:root { font-family: Arial, Helvetica, sans-serif; color:#142d38; background:#f3f5f2; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; }
button,input { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.6; }
a { color:#075f72; }
:focus-visible { outline:3px solid #e3893e; outline-offset:2px; }
[hidden] { display:none!important; }
.shell { max-width:1240px; margin:0 auto; padding:0 16px 48px; }
.mast { background:#102935; color:white; border-bottom:4px solid #ec7e3e; }
.mast-inner { max-width:1240px; margin:auto; padding:18px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.brand { font-size:1.35rem; line-height:1.1; font-weight:850; letter-spacing:-.025em; }
.brand small { display:block; margin-top:4px; color:#bad1d9; font-size:.73rem; text-transform:uppercase; letter-spacing:.12em; }
.mast-actions { display:flex; gap:8px; flex-wrap:wrap; }
.eyebrow { margin:0 0 7px; color:#ac4d1d; text-transform:uppercase; letter-spacing:.13em; font-size:.72rem; font-weight:800; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(1.7rem,4vw,2.65rem); letter-spacing:-.04em; line-height:1.1; }
h2 { font-size:1.2rem; letter-spacing:-.02em; }
h3 { font-size:1rem; }
.muted { color:#53666e; }
.small { font-size:.84rem; }
.card { background:#fff; border:1px solid #d8e0df; border-radius:15px; padding:24px; box-shadow:0 5px 20px #10293508; min-width:0; }
.grid + .card,.card + .card,.card + .grid { margin-top:22px; }
.intro { padding:24px 0 10px; }
.intro p { margin-bottom:0; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin:22px 0; }
.span-all { grid-column:1/-1; }
.hero { background:#102935; color:white; border-color:#102935; }
.hero .eyebrow,.hero .muted { color:#b7d3dd; }
.hero .metric { color:#fff; }
.hero .submetric { color:#d7e7ea; }
.metrics { display:flex; flex-wrap:wrap; gap:28px; }
.metric-block { margin:24px 0 18px; }
.metric { display:block; font-size:clamp(2.05rem,7vw,3.6rem); line-height:1; letter-spacing:-.06em; font-weight:850; font-variant-numeric:tabular-nums; }
.submetric { display:block; margin-top:6px; color:#566b73; font-size:.86rem; }
.chip { display:inline-block; padding:6px 9px; border-radius:999px; background:#e6f0f1; color:#165268; font-size:.76rem; font-weight:750; }
.chip.warn { background:#fff0ce; color:#765210; }
.chip.bad { background:#ffe7e4; color:#952e25; }
.shift-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.shift-stats { display:flex; gap:28px; flex-wrap:wrap; margin-top:24px; }
.shift-stats strong { display:block; font-size:1.65rem; font-variant-numeric:tabular-nums; }
.production-total { margin-top:28px; }
.shift-compare { display:grid; gap:7px; margin-top:24px; padding:14px 16px; border-radius:10px; background:#f1f6f5; font-size:.85rem; }
.shift-compare strong { font-size:1rem; font-variant-numeric:tabular-nums; }
.load-secondary { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:28px 0 18px; padding:18px 0 0; border-top:1px solid #dce6e9; color:#53666e; font-size:.85rem; }
.load-secondary strong { color:#142d38; font-size:1.35rem; font-variant-numeric:tabular-nums; }
.hero .load-secondary { border-color:#395561; color:#d7e7ea; }
.hero .load-secondary strong { color:#fff; }
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.9rem; }
th,td { text-align:left; padding:11px 9px; border-bottom:1px solid #e4e9e8; vertical-align:top; }
th { color:#62727a; font-size:.73rem; text-transform:uppercase; letter-spacing:.07em; white-space:nowrap; }
td.num,th.num { text-align:right; font-variant-numeric:tabular-nums; }
tbody tr:last-child td { border-bottom:0; }
.rate-good { color:#126744; font-weight:850; }
.rate-bad { color:#b12729; font-weight:850; }
.chart { display:flex; gap:6px; align-items:flex-end; height:144px; padding:12px 0 0; overflow-x:auto; }
.target-chart { display:grid; gap:18px; margin:22px 0 8px; }
.target-row { display:grid; grid-template-columns:78px minmax(0,1fr); gap:16px; align-items:center; border:1px solid #dce6e5; border-radius:12px; background:#f7faf9; padding:17px; }
.target-row > strong { font-size:1.05rem; }
.target-pair { display:grid; gap:11px; min-width:0; }
.target-line { display:grid; grid-template-columns:48px minmax(0,1fr) 62px; gap:7px; align-items:center; font-size:.78rem; }
.target-line b { text-align:right; font-variant-numeric:tabular-nums; }
.target-track { height:15px; background:#e5ecee; border-radius:8px; overflow:hidden; }
.target-fill { display:block; height:100%; border-radius:8px; }
.target-fill.actual { background:#087c90; }
.target-fill.actual.rate-good { background:#168456; }
.target-fill.actual.rate-bad { background:#c84343; }
.target-fill.goal { background:#e58942; }
.target-form { display:grid; grid-template-columns:1fr 1fr auto; gap:16px; align-items:end; margin-top:20px; }
.target-form label { display:grid; gap:6px; font-weight:750; }
.target-form input,.target-form select { width:100%; min-width:0; min-height:48px; border:1px solid #90a7ae; border-radius:9px; padding:10px; background:white; }
.bar-col { min-width:30px; flex:1 0 30px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px; }
.bar { width:100%; max-width:36px; min-height:2px; border-radius:5px 5px 0 0; background:#0b8293; }
.bar-col small { font-size:.67rem; color:#53666e; }
.bar-col[title] { cursor:default; }
.reason-list { display:grid; gap:7px; margin:0; padding:0; list-style:none; }
.reason-list li { display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid #e4e9e8; padding:6px 0; }
.alert { border:1px solid #e9c96d; background:#fff4d7; color:#664a16; border-radius:10px; padding:11px 13px; margin:12px 0; }
.error { border-color:#ecaaa5; background:#fff0ef; color:#922d27; }
.button { min-height:48px; border:0; border-radius:10px; background:#087c90; color:#fff; padding:11px 16px; font-weight:800; }
.button.secondary { background:#e1ecee; color:#174457; border:1px solid #bbd3d9; }
.button.ghost { background:transparent; color:inherit; border:1px solid #92a6af; }
.button.danger { background:#a23d31; }
.auth { max-width:440px; margin:7vh auto 0; }
.auth label { display:grid; gap:6px; font-weight:750; margin:15px 0; }
.auth input { width:100%; min-height:50px; border:1px solid #90a7ae; border-radius:9px; padding:12px; background:white; color:#142d38; }
.auth-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
.notice { min-height:1.5em; margin-top:12px; }
.foot { color:#526870; border-top:1px solid #d3dddc; margin-top:28px; padding-top:16px; font-size:.84rem; }
.review-row { border-top:1px solid #e0e7e6; padding:15px 0; }
.review-row:first-child { border-top:0; }
.review-doc { width:100%; min-height:55vh; border:1px solid #a7b5ba; background:#fff; border-radius:8px; }
.signature { width:100%; height:140px; border:1px solid #819aa4; border-radius:9px; background:white; touch-action:none; }
@media(max-width:720px) {
  .hero .metrics,.shift-stats { display:grid; grid-template-columns:1fr; gap:0; }
  .hero .metrics > div + div,.shift-stats > div + div { border-top:1px solid #dce6e9; margin-top:18px; padding-top:18px; }
  .hero .metrics > div + div { border-color:#395561; }
  .target-form { grid-template-columns:1fr; }
  .grid { grid-template-columns:1fr; }
  .span-all { grid-column:auto; }
  .mast-inner { display:block; }
  .mast-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:12px; }
  .mast-actions .button { padding:9px 6px; min-height:43px; font-size:.78rem; }
  .card { padding:20px; }
  .dig-table,.dig-table tbody,.dig-table tr,.dig-table td { display:block; width:100%; }
  .dig-table thead { display:none; }
  .dig-table tr { border-top:1px solid #dfe7e6; padding:9px 0; }
  .dig-table tr:first-child { border-top:0; }
  .dig-table td { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:5px 0; border:0; text-align:right; }
  .dig-table td::before { content:attr(data-label); text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:#62727a; font-weight:750; }
}
@media(max-width:360px) { .target-row { grid-template-columns:1fr; } }

/* Last 24 hours: day and night beside each digger (Claude, 4 Nov 2026). A real table on a phone too. */
.shift-table { width:100%; border-collapse:collapse; font-size:.95rem; }
.shift-table th, .shift-table td { padding:10px 8px; border-bottom:1px solid #dbe3e7; text-align:left; }
.shift-table .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.shift-table thead th { font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:#4f6470; }
.shift-table thead small { text-transform:none; letter-spacing:0; font-weight:600; }
.shift-table tfoot th, .shift-table tfoot td { font-weight:850; border-bottom:0; border-top:2px solid #102935; }
@media (max-width:520px) { .shift-table { font-size:.8rem; } .shift-table th, .shift-table td { padding:8px 3px; } .shift-table thead th { font-size:.66rem; letter-spacing:.02em; } }
/* Every column on a phone: Rate was cut off the side of the screen (Ryan's demo run, 5 Nov 2026). */
@media(max-width:560px) { .shift-table { font-size:.76rem; } .shift-table th,.shift-table td { padding:8px 3px; } .shift-table th { font-size:.6rem; letter-spacing:0; } .shift-table strong { font-size:.82rem; } }