#page-employeehub{padding:0;overflow:hidden}
#ehub{height:100%;display:flex;flex-direction:column;min-width:0}
#ehub :focus{outline:none}
#ehub :focus-visible{outline:none;border-radius:var(--r-xs);box-shadow:0 0 0 3px rgba(47,154,166,.32)}
#ehub .fld input:focus-visible, #ehub .fld select:focus-visible, #ehub .fld textarea:focus-visible{border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,154,166,.32)}
#ehub .ph{background:linear-gradient(180deg,#22272f,#1b1f26);border-bottom:1px solid var(--border);padding:16px 24px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:16px;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 6px 18px rgba(0,0,0,.25)}
#ehub .ph-l{min-width:0}
#ehub .ph-title{font-family:var(--font-display);font-size:19px;font-weight:600;letter-spacing:-.1px;color:var(--text)}
#ehub .ph-sub{font-size:11px;color:var(--text3);margin-top:3px;letter-spacing:.2px}
#ehub .ph-r{display:flex;align-items:center;gap:12px;flex-shrink:0}
#ehub .clockbadge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:22px;font-size:12.5px;font-weight:700;border:1px solid var(--border-2);font-variant-numeric:tabular-nums}
#ehub .clockbadge.in{background:var(--green-l);color:var(--green);border-color:rgba(134,204,114,.32)}
#ehub .clockbadge.out{background:var(--gray-l);color:var(--text2)}
#ehub .clockbadge .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
#ehub .clockbadge.in .dot{animation:eh_pulse 2s var(--ease) infinite}
@keyframes eh_pulse{0%,100%{opacity:1}50%{opacity:.35}}
#ehub .langtog{display:inline-flex;border:1px solid var(--border);border-radius:22px;overflow:hidden}
#ehub .langtog button{background:transparent;border:none;color:var(--text2);font-size:11.5px;font-weight:700;padding:6px 12px;cursor:pointer;font-family:inherit;transition:all .15s}
#ehub .langtog button:hover{color:var(--text)}
#ehub .langtog button.active{background:var(--blue-soft);color:var(--blue-m)}
#ehub .hub-tabwrap{flex-shrink:0;background:#15181d;border-bottom:1px solid var(--border);padding:0 24px;overflow-x:auto}
#ehub .tabs{display:flex;gap:2px}
#ehub .tab{padding:12px 16px;font-size:13px;cursor:pointer;color:var(--text2);border:none;font-weight:600;transition:color .15s,background .15s,box-shadow .15s;white-space:nowrap;flex-shrink:0;background:none;font-family:inherit;border-radius:8px 8px 0 0;box-shadow:inset 0 -2px 0 transparent}
#ehub .tab:hover{color:var(--text);background:rgba(47,161,173,.08)}
#ehub .tab[aria-selected="true"]{color:var(--blue-m);background:rgba(47,161,173,.10);box-shadow:inset 0 -2px 0 var(--blue)}
/* PAGE CHROME (2026-09-13): the hub's gutter is the same 24px every page's widgets sit on. */
#ehub .hub-scroll{flex:1;overflow-y:auto;padding:22px 24px 40px}
/* ── One-page Time Clock (owner: "shouldn't have to scroll on desktop") ────────────
   The punch clock, today's job, the week and the two feeds fill the viewport; the two
   list cards (Announcements, Recognition) are the only regions that scroll, inside
   themselves. A short or narrow window falls back to normal page scrolling rather than
   squeezing the Clock In button. */
#ehub .hub-listbody{overflow-y:auto}
/* Fit mode engages on any real desktop window (the owner's is ~1320x790). Rather than
   standing down on a shorter screen and leaving a ragged half-empty page, the hero
   COMPACTS — smaller clock, tighter paddings, shorter button — and the last card in each
   column can scroll inside itself. Below 1100x700 (phones, split windows) it falls back
   to ordinary page scrolling, where segmenting doesn't matter. */
@media (min-width:1100px) and (min-height:700px){
  #page-employeehub.ehub-fit #ehub .hub-scroll{overflow:hidden;display:flex;flex-direction:column;min-height:0;padding:22px 24px 14px}
  #page-employeehub.ehub-fit #ehub .hub-scroll > #hub-pane{flex:1;min-height:0;display:flex;flex-direction:column}
  #page-employeehub.ehub-fit #ehub .home-grid{flex:1;min-height:0;align-items:stretch}
  #page-employeehub.ehub-fit #ehub .home-col{min-height:0}
  #page-employeehub.ehub-fit #ehub .home-col > .card{flex:0 0 auto;margin-bottom:0}
  /* the last card in a column absorbs any leftover height so the column ends at the fold... */
  #page-employeehub.ehub-fit #ehub .home-col > .card:last-child{flex:1 1 auto;min-height:0;overflow-y:auto}
  /* Compact the punch hero so the column fills the window instead of overflowing it. */
  #page-employeehub.ehub-fit #ehub .punch{padding:16px}
  #page-employeehub.ehub-fit #ehub .punch-main{margin-bottom:12px}
  #page-employeehub.ehub-fit #ehub .punch-btn{min-height:58px;font-size:17px}
  #page-employeehub.ehub-fit #ehub .privacy{margin-top:8px;font-size:10.5px;line-height:1.45}
  #page-employeehub.ehub-fit #ehub .punch-site{margin-top:12px}
  #page-employeehub.ehub-fit #ehub .geo-row{margin-top:8px}
  @media (max-height:900px){
    #page-employeehub.ehub-fit #ehub .punch-time{font-size:34px;letter-spacing:-1px}
    #page-employeehub.ehub-fit #ehub .punch-btn{min-height:50px;font-size:16px}
    #page-employeehub.ehub-fit #ehub .punch{padding:13px}
  }
  /* ...unless they're the two feeds, which SHARE what's left evenly (this rule comes second
     on purpose, so a trailing feed doesn't hog the slack and starve the one above it) */
  #page-employeehub.ehub-fit #ehub .home-col > .hub-listcard{flex:1 1 0;min-height:112px;display:flex;flex-direction:column}
  /* MY JOBS / TEAM & UPDATES: every card shares the column height evenly and scrolls inside
     itself, so the bubbles line up and the page is full top to bottom instead of a row of
     short cards over an empty half-screen. */
  #page-employeehub.ehub-fit #hub-pane[data-fit="jobs"] .home-col > .card,
  #page-employeehub.ehub-fit #hub-pane[data-fit="team"] .home-col > .card{
    flex:1 1 0;min-height:120px;margin-bottom:0;overflow-y:auto }
  #page-employeehub.ehub-fit #hub-pane[data-fit="jobs"] .ws-stats,
  #page-employeehub.ehub-fit #hub-pane[data-fit="jobs"] > .ws-note{ flex:0 0 auto }
  /* the lone "Nothing here yet" card CENTERS in the pane instead of hugging the top-left
     corner of a huge empty screen ("my jobs still looks weird", 2026-08-17 round two) */
  #page-employeehub.ehub-fit #hub-pane[data-fit="jobs"] > .mj-blank{ max-width:560px;width:100%;margin:auto;flex:0 0 auto }
  /* The ≥1680px centered-column exception for My Jobs is GONE (Ryan, 2026-08-31: "all tabs
     within employee hub have different left/right top/bottom end point vertices. fix that.
     I want it full screen like time clock team updates & documents"). This REVERSES the
     2026-08-17 "my jobs looks weird on full screen" centering — every tab now shares the
     same full-bleed frame at every width, which is what MJ9b pins (the test viewport never
     reached 1680, which is how the exception slipped past it). Do not re-add a per-tab
     max-width; if a wide-monitor complaint returns, solve it inside the cards, not by
     moving the tab's edges. */
  /* MY PAY fills the fold like the other card tabs: stats fixed, the punches card takes
     the leftover height and scrolls inside itself, the note stays put at the bottom. */
  #page-employeehub.ehub-fit #hub-pane[data-fit="pay"] > .stat-pair{ flex:0 0 auto;margin-bottom:14px }
  #page-employeehub.ehub-fit #hub-pane[data-fit="pay"] > .card.widget{ flex:1 1 0;min-height:140px;overflow-y:auto;margin-bottom:0 }
  #page-employeehub.ehub-fit #hub-pane[data-fit="pay"] > .ws-note{ flex:0 0 auto;margin-top:10px }
  #page-employeehub.ehub-fit #ehub .hub-listcard > .hub-listbody{flex:1;min-height:0}
  #page-employeehub.ehub-fit #ehub .hub-upnext{flex:0 0 auto}
  /* Site weather has to EARN its space on the one-page tab — tighter chips, no wasted padding,
     so Today's job still lands inside the window with the forecast on it. */
  #page-employeehub.ehub-fit #ehub .tj-wx{margin:9px 0 2px;padding:8px 9px}
  #page-employeehub.ehub-fit #ehub .tj-wx-head{margin-bottom:6px;font-size:10px}
  #page-employeehub.ehub-fit #ehub .tj-wx-adv{margin-bottom:6px;gap:5px}
  #page-employeehub.ehub-fit #ehub .tj-wx-adv span{padding:2px 7px;font-size:10px}
  #page-employeehub.ehub-fit #ehub .tj-wx-day{padding:4px 2px;gap:1px}
  #page-employeehub.ehub-fit #ehub .tj-wx-day .ic{width:13px;height:13px}
  #page-employeehub.ehub-fit #ehub .tj-wx-day .hi{font-size:11px}
  /* ...and the card around it gives up its loose spacing rather than the forecast. */
  #page-employeehub.ehub-fit #ehub .home-col > .card:last-child .wh{margin-bottom:9px}
  #page-employeehub.ehub-fit #ehub .tj-name{font-size:15.5px}
  #page-employeehub.ehub-fit #ehub .tj-addr{margin:8px 0}
  #page-employeehub.ehub-fit #ehub .tj-foot{margin:8px 0 4px}
  #page-employeehub.ehub-fit #ehub .pbar{margin:6px 0 3px}
  #page-employeehub.ehub-fit #ehub .home-col > .card:last-child{padding:14px 16px}
}
#ehub .pane{animation:eh_fadeIn .38s var(--ease-out)}
@keyframes eh_fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#ehub .card{background:#1e242b;border:1px solid var(--border-2);border-radius:var(--r);padding:20px;margin-bottom:16px;box-shadow:0 1px 2px rgba(0,0,0,.22)}
/* TOP STRIP — the two things a crew member opens the app for: where am I today, and is next
   week posted. Two thin rows, never a table; the day-by-day breakdown lives on My Jobs. */
#ehub .hub-upnext{padding:0;margin-bottom:14px;overflow:hidden;background:linear-gradient(180deg,#16231c,#13201a);border-color:var(--green-l)}
#ehub .hts-row{display:flex;align-items:center;gap:11px;padding:11px 14px;min-height:46px}
#ehub .hts-row + .hts-row{border-top:1px solid rgba(255,255,255,.07)}
#ehub .hts-ic{flex:0 0 auto;border-color:transparent}
#ehub .hts-ic.today{background:var(--blue-l);color:var(--blue-m)}
#ehub .hts-ic.next{background:var(--green-l);color:var(--green)}
#ehub .hts-tag{flex:0 0 auto;font-weight:800;font-size:12.5px;letter-spacing:.3px;color:var(--text)}
#ehub .hts-body{flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ehub .hts-dim{color:var(--text3)}
#ehub .hts-row .btn,#ehub .hts-row .badge{flex:0 0 auto}
/* SITE WEATHER inside Today's job — five thin day chips, advisories only when real. */
#ehub .tj-wx{margin:12px 0 4px;padding:10px 11px;border:1px solid var(--border);border-radius:var(--r-sm);background:rgba(255,255,255,.02)}
#ehub .tj-wx-head{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--text3);margin-bottom:9px}
#ehub .tj-wx-head .ic{width:14px;height:14px;color:var(--blue-m)}
#ehub .tj-wx-head .badge{margin-left:auto;text-transform:none;letter-spacing:0}
#ehub .tj-wx-load{font-size:12px;color:var(--text3);padding:2px 0 3px}
#ehub .tj-wx-adv{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
#ehub .tj-wx-adv span{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;border:1px solid}
#ehub .tj-wx-days{display:flex;gap:5px}
#ehub .tj-wx-day{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 3px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.02)}
#ehub .tj-wx-day.wet{border-color:rgba(91,141,239,.35);background:rgba(91,141,239,.07)}
#ehub .tj-wx-day .ic{width:15px;height:15px;color:var(--text2)}
#ehub .tj-wx-day .d{font-size:9.5px;font-weight:800;text-transform:uppercase;color:var(--text3)}
#ehub .tj-wx-day .hi{font-size:12px;font-weight:700;color:var(--text)}
#ehub .tj-wx-day .lo{font-size:9.5px;color:var(--text3)}
#ehub .badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:10.5px;font-weight:600;letter-spacing:.2px;line-height:1.2}
#ehub .b-blue{background:var(--blue-l);color:var(--blue-m)}
#ehub .b-green{background:var(--green-l);color:var(--green)}
#ehub .b-amber{background:var(--amber-l);color:var(--amber)}
#ehub .b-red{background:var(--red-l);color:var(--red)}
#ehub .b-gray{background:var(--gray-l);color:var(--text2)}
#ehub .sc{background:linear-gradient(180deg,#252b33,#1f242b);border:1px solid var(--border-2);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh-sm);position:relative;overflow:hidden}
#ehub .sc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue) 0%,var(--blue-m) 100%);opacity:.8}
#ehub .sc-lbl{font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px;font-weight:700}
#ehub .sc-val{font-size:22px;font-weight:700;letter-spacing:-.5px;color:var(--text)}
#ehub .pbar{height:6px;background:var(--border-2);border-radius:3px;overflow:hidden;margin:10px 0 4px}
#ehub .pfill{height:100%;background:linear-gradient(90deg,var(--blue) 0%,var(--blue-m) 100%);border-radius:3px;transition:width .4s var(--ease)}
#ehub .btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r-sm);font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .22s var(--ease);font-family:inherit;letter-spacing:.1px;line-height:1.2}
#ehub .btn-p{background:linear-gradient(180deg,#2fa1ad,#1c7e8a);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 2px 8px rgba(31,126,138,.3)}
#ehub .btn-p:hover{background:linear-gradient(180deg,#37b0bd,#1f8b98);transform:translateY(-1.5px)}
#ehub .btn-s{background:#252b33;color:var(--text);border:1px solid var(--border)}
#ehub .btn-s:hover{background:#2c333c;border-color:var(--gray-m)}
#ehub .btn-sm{padding:5px 11px;font-size:12px}
#ehub .fld{display:flex;flex-direction:column;gap:5px}
#ehub .fld label{font-size:10.5px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px}
#ehub .fld input, #ehub .fld select, #ehub .fld textarea{border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 11px;font-size:13px;color:var(--text);background:#13161b;width:100%;outline:none;font-family:inherit;transition:all .15s}
#ehub .fld select:hover{border-color:var(--gray-m)}
/* Searchable job-site combobox (Ryan, 2026-09-15): a text input that filters an absolutely-
   positioned option list. Works the same on desktop and phone; 44px option rows for touch. */
#ehub .combo{position:relative}
#ehub .combo-input{cursor:text}
#ehub .combo-list{position:absolute;left:0;right:0;top:100%;z-index:40;margin-top:4px;max-height:min(280px,52vh);overflow-y:auto;background:#13161b;border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:0 14px 34px rgba(0,0,0,.55);display:none;-webkit-overflow-scrolling:touch}
#ehub .combo.open .combo-list{display:block}
#ehub .combo-opt{display:flex;align-items:center;min-height:44px;padding:10px 12px;font-size:13px;color:var(--text);cursor:pointer;border-bottom:1px solid var(--border-2)}
#ehub .combo-opt:last-child{border-bottom:none}
#ehub .combo-opt:hover{background:var(--blue-soft);color:var(--blue-m)}
#ehub .combo-none{padding:12px;font-size:12.5px;color:var(--text3)}
#ehub .ic{width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px}
#ehub .btn .ic{vertical-align:-3px}
#ehub .fr{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#ehub .empty{text-align:center;padding:30px 16px;color:var(--text2);font-size:13px}
/* compact empty state — an empty card should read as a short note, not a crater */
#ehub .empty.sm{padding:14px 12px;line-height:1.65}
#ehub .mj-blank{max-width:640px}
#ehub .ws-stats{margin-bottom:16px}
#ehub .muted{color:var(--text2)}
#ehub .ts{font-size:12px}
#ehub .wh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}
#ehub .wh-l{display:flex;align-items:center;gap:10px;min-width:0}
#ehub .wh-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue-m);border:1px solid var(--blue-l);flex-shrink:0}
#ehub .wh-ic .ic{width:16px;height:16px}
#ehub .wh-t{font-size:13.5px;font-weight:700;letter-spacing:.2px;color:var(--text)}
#ehub .wh-actions{display:flex;align-items:center;gap:7px;flex-shrink:0}
#ehub .ehub-doc-thumb{width:44px;height:44px;flex:none;border-radius:8px;border:1px solid var(--border);object-fit:cover;cursor:pointer;background:#0d0f13}
#ehub .ehub-doc-thumb.ph{display:inline-flex;align-items:center;justify-content:center;font-size:19px}
#ehub .punch{background:linear-gradient(180deg,#20272f,#181d24);border:1px solid var(--border-2);border-radius:var(--r);padding:22px;box-shadow:var(--sh);margin-bottom:16px}
#ehub .punch-main{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px}
#ehub .punch-time{font-size:48px;font-weight:700;letter-spacing:-1.5px;font-variant-numeric:tabular-nums;color:var(--text);line-height:1}
#ehub .punch-state{font-size:11.5px;color:var(--text2);text-transform:uppercase;letter-spacing:1px;font-weight:700;margin-top:7px}
#ehub .punch-total{text-align:right}
#ehub .punch-total .sc-lbl{margin-bottom:3px}
#ehub .punch-total-v{font-size:26px;font-weight:700;color:var(--blue-m);letter-spacing:-.6px;font-variant-numeric:tabular-nums}
#ehub .punch-btn{width:100%;min-height:72px;font-size:19px;font-weight:700;border-radius:var(--r-sm);border:none;cursor:pointer;color:#fff;background:linear-gradient(180deg,#2fa1ad,#1c7e8a);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 18px rgba(31,126,138,.4);display:flex;align-items:center;justify-content:center;gap:11px;transition:transform .18s var(--ease),box-shadow .22s var(--ease);font-family:inherit;letter-spacing:.4px}
#ehub .punch-btn:hover{transform:translateY(-1.5px)}
#ehub .punch-btn:active{transform:translateY(0)}
#ehub .punch-btn.is-in{background:linear-gradient(180deg,#E5736F,#bf4f4b);box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 6px 18px rgba(180,70,66,.42)}
/* Break and Move deliberately carry NO size overrides — they inherit .punch-btn's height at
   every breakpoint, so all three big actions are the SAME size (Ryan: "a large button like
   clock in/out"; paybatch PB6 pins Move == Clock). Color is the only difference. */
#ehub .punch-btn.break-cta{margin-top:10px;background:linear-gradient(180deg,#3d4c58,#2c3a45);box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 5px 14px rgba(0,0,0,.32)}
#ehub .punch-btn.break-cta.on-break{background:linear-gradient(180deg,#e8bb45,#c29424);color:#241b06;box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 5px 14px rgba(194,148,36,.38)}
#ehub .punch-btn:focus-visible{box-shadow:0 0 0 3px rgba(47,154,166,.45),0 6px 18px rgba(31,126,138,.4)}
#ehub .punch-btn .ic{width:23px;height:23px;stroke-width:2.2}
#ehub .punch-selects{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
#ehub .geo{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13px;font-weight:600;padding:10px 13px;border-radius:var(--r-sm);border:1px solid var(--border-2)}
#ehub .geo.on{background:var(--green-l);border-color:rgba(134,204,114,.32);color:var(--green)}
#ehub .geo.off{background:var(--amber-l);border-color:rgba(224,166,70,.32);color:var(--amber)}
#ehub .geo .dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex-shrink:0;box-shadow:0 0 0 4px rgba(255,255,255,.06)}
#ehub .geo .ic{width:15px;height:15px}
#ehub .privacy{font-size:11.5px;color:var(--text2);margin-top:9px;line-height:1.5;display:flex;gap:7px}
#ehub .privacy .ic{width:14px;height:14px;color:var(--text2);flex-shrink:0;margin-top:1px}
#ehub .punch-extras{display:flex;gap:9px;align-items:center;margin-top:12px;flex-wrap:wrap}
/* "Punch In at a NEW job site": a second FULL-SIZE punch button directly under the main one.
   Amber = location move, visually distinct from the teal clock in/out so nobody confuses them. */
#ehub .punch-btn.move-cta{margin-top:10px;background:linear-gradient(180deg,#b8862e,#8a5f1c);box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 6px 18px rgba(138,95,28,.4);font-weight:800}
#ehub .punch-btn.move-cta:hover{filter:brightness(1.08)}
#ehub .punch-btn.move-cta.is-off{background:#262b32;color:var(--text3);box-shadow:none;cursor:default;font-weight:700}
#ehub .punch-btn.move-cta.is-off:hover{transform:none;filter:none}
#ehub .move-note{margin-top:8px;font-size:12px;line-height:1.55;color:var(--text2);background:rgba(184,134,46,.10);border:1px solid rgba(184,134,46,.35);border-radius:9px;padding:8px 11px}
#ehub .chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:6px 11px;border-radius:20px;background:var(--gray-l);color:var(--text2);border:1px solid var(--border-2)}
#ehub .chip .ic{width:14px;height:14px}
#ehub .chip.on{background:var(--blue-soft);color:var(--blue-m);border-color:var(--blue-l)}
#ehub .safety{margin-top:15px;padding:15px;border-radius:var(--r-sm);background:var(--amber-l);border:1px solid rgba(224,166,70,.32);animation:eh_fadeIn .28s var(--ease-out)}
#ehub .safety-q{font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:12px;display:flex;align-items:center;gap:8px}
#ehub .safety-q .ic{color:var(--amber);width:18px;height:18px}
#ehub .toast{margin-top:14px;padding:11px 14px;border-radius:var(--r-sm);background:var(--green-l);border:1px solid rgba(134,204,114,.32);color:var(--green);font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:9px;animation:eh_fadeIn .28s var(--ease-out)}
#ehub .toast.warn{background:var(--amber-l);border-color:rgba(224,166,70,.32);color:var(--amber)}
#ehub .wk{display:flex;flex-direction:column;gap:9px}
#ehub .wk-row{display:flex;align-items:center;gap:12px}
#ehub .wk-d{font-size:11px;font-weight:700;color:var(--text2);width:34px;text-transform:uppercase;letter-spacing:.5px}
#ehub .wk-bar{flex:1;height:9px;background:var(--border-2);border-radius:5px;overflow:hidden}
#ehub .wk-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--blue-m));border-radius:5px}
#ehub .wk-h{font-size:12px;font-weight:700;color:var(--text);width:34px;text-align:right;font-variant-numeric:tabular-nums}
#ehub .wk-total{display:flex;justify-content:space-between;align-items:center;margin-top:13px;padding-top:13px;border-top:1px solid var(--border-2);font-size:13px;font-weight:700;color:var(--text)}
#ehub .wk-total span:last-child{color:var(--blue-m);font-variant-numeric:tabular-nums}
#ehub .crew-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border-2)}
#ehub .crew-row:last-child{border-bottom:none}
#ehub .avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:700;color:#fff;background:linear-gradient(150deg,#37b3c0,#1b7d89);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 3px 8px rgba(31,126,138,.35);flex-shrink:0;letter-spacing:.3px}
#ehub .crew-name{font-size:13px;font-weight:600;color:var(--text)}
#ehub .crew-h{font-size:11.5px;color:var(--text2);margin-top:1px;font-variant-numeric:tabular-nums}
#ehub .sk{position:relative;overflow:hidden;background:#222831;border-radius:7px;display:block}
#ehub .sk::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);transform:translateX(-100%);animation:eh_shimmer 1.3s infinite}
@keyframes eh_shimmer{100%{transform:translateX(100%)}}
#ehub .soon{display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 22px;gap:12px}
#ehub .soon-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue-m);border:1px solid var(--blue-l)}
#ehub .soon-ic .ic{width:23px;height:23px}
#ehub .soon-t{font-size:15px;font-weight:700;color:var(--text)}
#ehub .soon-d{font-size:12.5px;color:var(--text2);max-width:430px;line-height:1.6}
#ehub .soon-tag{font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--amber);background:var(--amber-l);padding:3px 9px;border-radius:20px}
#ehub a.btn{text-decoration:none}
/* Full bleed: the hub is a workspace, not an article — the cards run to both edges
   instead of sitting in a centred 1560px column with dead rails either side. */
#ehub .home-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start;width:100%}
#ehub .home-col{display:flex;flex-direction:column;gap:16px;min-width:0}
#ehub .punch.hero{background:linear-gradient(150deg,#1c3c43 0%,#1a2b32 44%,#181d24 100%);border-color:#244a52;box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 14px 34px rgba(0,0,0,.42),0 0 0 1px rgba(47,154,166,.08)}
#ehub .punch-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
#ehub .punch-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue-m)}
#ehub .punch-site{margin-top:14px}
#ehub .geo-row{margin-top:8px}
#ehub .punch-site .fld select{padding:11px 12px;cursor:pointer}
#ehub .fld select option{background:#1a1f25;color:var(--text)}
/* "preview as drop down… it's white now and I can't see the names" (2026-08-17): the header
   Preview-as select sits outside .fld, so its popup fell back to the UA's white list with
   near-white text. Same dark option treatment as every other hub select. */
#hub-prev-emp option{background:#1a1f25;color:var(--text)}
#ehub .punch-site .fld label{color:var(--blue-m)}
#ehub .geo-row{display:flex;align-items:center;gap:10px;margin-top:14px}
#ehub .geo-row .geo{flex:1;margin-top:0}
#ehub .locate{width:40px;height:40px;flex-shrink:0;border-radius:var(--r-sm);background:#11181c;border:1px solid var(--border);color:var(--text2);display:grid;place-items:center;cursor:pointer;transition:all .15s var(--ease)}
#ehub .locate:hover{color:var(--blue-m);border-color:var(--blue-l);background:var(--blue-soft)}
#ehub .locate:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(47,154,166,.32)}
#ehub .locate .ic{width:16px;height:16px}
#ehub .stat-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#ehub .stat-pair .sc{margin-bottom:0}
#ehub .stat-pair .sc-val{font-size:25px}
#ehub .stat-sub{font-size:11px;color:var(--text2);font-weight:600;margin-top:4px}
#ehub .tj-name{font-size:17px;font-weight:700;letter-spacing:-.2px;color:var(--text)}
#ehub .tj-meta{font-size:12px;color:var(--text2);margin-top:2px}
#ehub .tj-addr{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;color:var(--text2);margin:13px 0;line-height:1.45}
#ehub .tj-addr .ic{color:var(--blue-m);width:15px;height:15px;margin-top:1px;flex-shrink:0}
#ehub .tj-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:13px 0 10px}
#ehub .avstack{display:flex}
#ehub .avstack .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:700;color:#0d1014;margin-left:-7px;border:2px solid #1e242b;letter-spacing:.2px}
#ehub .avstack .av:first-child{margin-left:0}
#ehub .av-0{background:linear-gradient(150deg,#5cc6d1,#2fa1ad)}
#ehub .av-1{background:linear-gradient(150deg,#86CC72,#5fa84e)}
#ehub .av-2{background:linear-gradient(150deg,#E0A646,#c98a2e)}
#ehub .av-3{background:linear-gradient(150deg,#b79df0,#8e6fd6)}
#ehub .b-green i, #ehub .badge i{display:inline-block;vertical-align:middle}
#ehub .tj-scope{font-size:12px;color:var(--text2);margin-top:2px}
/* assignment checklist (Today card) */
#ehub .hub-ck{margin-top:12px;border:1px solid var(--border);border-radius:11px;background:#12151a;overflow:hidden}
#ehub .hub-ck-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:#171b21;border-bottom:1px solid var(--border)}
#ehub .hub-ck-name{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--text2)}
#ehub .hub-ck-n{font-size:11.5px;font-weight:800;color:var(--text3);font-variant-numeric:tabular-nums}
#ehub .hub-ck-n.all{color:var(--green,#3fb27f)}
#ehub .hub-ck-row{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--border-2);padding:9px 12px;cursor:pointer;font-family:inherit;color:var(--text);transition:background .12s}
#ehub .hub-ck-row:last-child{border-bottom:none}
#ehub .hub-ck-row:hover{background:rgba(255,255,255,.03)}
#ehub .hub-ck-box{width:19px;height:19px;flex:none;border-radius:6px;border:1.5px solid var(--border-2);display:grid;place-items:center;color:#06251a;background:#0d1014;margin-top:1px}
#ehub .hub-ck-row.done .hub-ck-box{background:var(--green,#3fb27f);border-color:var(--green,#3fb27f)}
#ehub .hub-ck-txt{flex:1;min-width:0;font-size:12.5px;line-height:1.45}
#ehub .hub-ck-row.done .hub-ck-txt{color:var(--text3);text-decoration:line-through}
#ehub .hub-ck-who{flex:none;font-size:9.5px;font-weight:800;color:var(--text3);border:1px solid var(--border);border-radius:20px;padding:2px 7px;margin-top:2px}
#ehub .ann{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--border-2)}
#ehub .ann:last-child{border-bottom:none;padding-bottom:2px}
#ehub .ann-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex-shrink:0}
#ehub .ann-ic .ic{width:17px;height:17px}
#ehub .ann-tile-Safety{background:var(--amber-l);color:var(--amber);border:1px solid rgba(224,166,70,.32)}
#ehub .ann-tile-Schedule{background:var(--blue-soft);color:var(--blue-m);border:1px solid var(--blue-l)}
#ehub .ann-tile-Company{background:var(--green-l);color:var(--green);border:1px solid rgba(134,204,114,.32)}
#ehub .ann-body{flex:1;min-width:0}
#ehub .ann-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
#ehub .ann-title{font-size:13px;font-weight:700;color:var(--text);line-height:1.3}
#ehub .ann-text{font-size:12.5px;color:var(--text2);line-height:1.5;margin-top:5px}
#ehub .ann-meta{font-size:11px;color:var(--text2);margin-top:6px;font-weight:500}
#ehub .kudo{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid var(--border-2)}
#ehub .kudo:last-child{border-bottom:none;padding-bottom:2px}
#ehub .kudo .avatar{width:30px;height:30px;font-size:11px;flex-shrink:0}
#ehub .kudo-body{flex:1;min-width:0}
#ehub .kudo-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
#ehub .kudo-who{font-size:12.5px;font-weight:700;color:var(--text)}
#ehub .kudo-who b{color:var(--blue-m);font-weight:700}
#ehub .kudo-time{font-size:11px;color:var(--text2);flex-shrink:0}
#ehub .kudo-msg{font-size:12.5px;color:var(--text2);line-height:1.5;margin-top:4px}
#ehub .kudo-arrow{color:var(--text3);margin:0 2px}
@media (max-width:980px){#ehub .home-grid{grid-template-columns:1fr}}
/* Small-LAPTOP fallback (Ryan, 2026-08-19: the Announcements column stopped short of
   Today's job). When the window is two-column wide but the 1100x700 fit gate above stands
   down, the columns still END LEVEL: the grid row stretches both columns to the taller one
   and each column's LAST card absorbs the difference. Inside the fit gate these exact
   rules already exist with higher specificity, so nothing changes there. */
@media (min-width:981px){
  #ehub .home-grid{align-items:stretch}
  #ehub .home-col > .card:last-child{flex:1 1 auto}
}
#ehub .ws-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
/* today's bar is called out so the week reads at a glance (it used to always be Friday) */
#ehub .wk-row.wk-now .wk-d{color:var(--blue-m);font-weight:800}
#ehub .wk-row.wk-now .wk-fill{background:var(--blue-m)}
#ehub .wk-row.wk-now .wk-h{color:var(--text);font-weight:700}
#ehub .wkj-row{align-items:center;padding:7px 0}
#ehub .wkj-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
#ehub .wkj-name b{font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ehub .ws-job{padding:12px 0;border-bottom:1px solid var(--border-2)}
#ehub .ws-job:last-child{border-bottom:none;padding-bottom:0}
#ehub .ws-job-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
#ehub .ws-job-name{font-size:13px;font-weight:600;color:var(--text)}
#ehub .ws-note{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text2);margin:2px 2px 0;padding:2px}
#ehub .ws-note .ic{width:14px;height:14px;color:var(--green)}
@media (prefers-reduced-motion:reduce){#ehub *{animation:none!important;transition:none!important}}
@media (max-width:980px){#ehub .ph{flex-wrap:wrap}
#ehub .hub-scroll{padding:16px 16px 40px}}