.shell { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }
.side {
  background: var(--ink); color: #dfe6ea; padding: 20px 14px; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 22px;
}
.brand { display: flex; gap: 10px; align-items: center; color: #fff; text-decoration: none; padding: 0 6px; }
.brand b { display: block; font: 600 15px/1.2 var(--body); letter-spacing: -.01em; }
.brand small { display: block; color: #9fb0bb; font-size: 12px; }
.brand-mark {
  width: 30px; height: 30px; flex: none; border-radius: 4px;
  background:
    linear-gradient(var(--free), var(--free)) 6px 0/3px 100% no-repeat,
    linear-gradient(var(--free), var(--free)) 21px 0/3px 100% no-repeat,
    linear-gradient(#fff, #fff) 0 9px/100% 3px no-repeat,
    linear-gradient(#fff, #fff) 0 20px/100% 3px no-repeat;
}
#nav { display: flex; flex-direction: column; gap: 2px; }
#nav a {
  color: #b9c6ce; text-decoration: none; padding: 9px 10px; border-radius: 6px; white-space: nowrap;
  font: 500 14.5px/1.2 var(--body); letter-spacing: 0; display: flex; gap: 11px; align-items: center;
  transition: background-color .12s, color .12s;
}
#nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
#nav a.on { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 3px 0 0 var(--free); }
#nav .cnt { margin-left: auto; }
.ic { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.navmore { display: none; }
.cnt:empty { display: none; }
.cnt { background: var(--lock); color: #fff; font: 600 12px/1 var(--mono); padding: 3px 6px; border-radius: 10px; }
.cnt.amber { background: var(--wind); color: var(--ink); }
.side-note { margin-top: auto; font-size: 12.5px; color: #8fa1ac; padding: 0 6px; }

main { padding: 28px 34px 64px; min-width: 0; outline: none; width: 100%; max-width: 1440px; }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.head h1 { font-size: 30px; letter-spacing: -.025em; }
.head p { margin: 4px 0 0; }
h2 { font-size: 19px; margin: 30px 0 12px; }
h2 small { font: 400 14px var(--body); color: var(--steel); margin-left: 8px; letter-spacing: 0; }

.card { overflow-wrap: break-word; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow); }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tags { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tag .site { font-weight: 600; margin-top: 4px; }
.tag .addr { font-size: 13px; color: var(--steel); }
.tag .wx { margin-top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13.5px; }
.tag .act { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px; }
.stat { text-decoration: none; }
.tag.stat::after { display: none; }
.stat .body { padding: 14px 16px 15px; }
.stat .n { font: 600 36px/1.05 var(--body); letter-spacing: -.03em; font-feature-settings: "tnum"; }
.biz3 { align-items: start; }
@media (max-width: 1180px) { .biz3 { grid-template-columns: 1fr; } }
.biz-col { min-width: 0; }
.biz-col td { overflow-wrap: anywhere; }
.biz-col td.num { white-space: nowrap; overflow-wrap: normal; }
.biz-n { font: 600 32px/1.1 var(--body); letter-spacing: -.03em; font-feature-settings: "tnum"; margin-top: 6px; }
.biz-n small { font: 500 15px var(--body); letter-spacing: 0; color: var(--steel); }
.biz-sub { margin: 4px 0 10px; font-size: 13.5px; }
.stat.lock .n { color: var(--lock); }
.stat .t { font-size: 13.5px; color: var(--steel); margin-top: 4px; }

.banner { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--r); background: var(--wind-bg); border: 1px solid #f0d9a4; margin-bottom: 18px; font-size: 14px; }
.banner.red { background: var(--lock-bg); border-color: #f1c0bb; }
.banner .grow { flex: 1; min-width: 200px; }

table.list { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.list th { text-align: left; font: 500 12.5px var(--body); color: var(--steel); padding: 10px 12px; border-bottom: 1px solid var(--line); background: #f7f9fa; }
.list td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.list tr:last-child td { border-bottom: 0; }
.list tr.link { cursor: pointer; }
.list tr.link:hover td { background: #f7f9fa; }
.list .idc { font: 500 14.5px var(--mono); white-space: nowrap; }
.scroll { overflow-x: auto; }

.map { height: 340px; border-radius: var(--r); border: 1px solid var(--line); z-index: 0; }
.map.small { height: 240px; }
.leaflet-tile-pane { filter: grayscale(1) contrast(.92) brightness(1.04); }

.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.chip:hover { border-color: #b8c3c9; }
.chip { border: 1px solid var(--line); background: var(--card); padding: 6px 11px; border-radius: 20px; cursor: pointer; font: 500 13.5px var(--body); color: var(--ink); }
a.chip { text-decoration: none; display: inline-block; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
input[type=search], input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], select, textarea {
  font: 15px var(--body); padding: 9px 10px; border: 1px solid #c4ccd1; border-radius: 6px; background: #fff; color: var(--ink); width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--work); box-shadow: 0 0 0 3px rgba(60,110,158,.2); }
textarea { min-height: 70px; resize: vertical; }
.filters input[type=search] { width: 220px; margin-left: auto; }
label.f { display: block; margin-bottom: 12px; }
label.f > span { display: block; font-size: 13px; color: var(--steel); margin-bottom: 4px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* The hidden attribute always wins over a class that sets display. */
[hidden] { display: none !important; }

.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 18px; }
.facts div span { display: block; font-size: 12.5px; color: var(--steel); }
.facts div b { font-weight: 600; }

/* Inspection checklist */
.check { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.check:last-of-type { border-bottom: 0; }
.check small { display: block; color: var(--steel); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { padding: 9px 14px; cursor: pointer; font-weight: 600; font-size: 14px; background: #fff; }
.seg input:checked + label.ok { background: var(--free-ink); color: #fff; }
.seg input:checked + label.bad { background: var(--lock); color: #fff; }
.seg input:focus-visible + label { outline: 3px solid var(--wind); outline-offset: -3px; }

/* Crew week plan */
.week { display: grid; grid-template-columns: 170px repeat(6, minmax(120px, 1fr)); border: 1px solid var(--line); border-radius: var(--r); background: var(--card); min-width: 900px; }
.week > div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px; min-height: 92px; }
.week > div:nth-child(7n) { border-right: 0; }
.week .wh { min-height: 0; background: #f7f9fa; font: 600 13px var(--body); color: var(--steel); }
.week .wh.today { color: var(--ink); box-shadow: inset 0 -3px 0 var(--wind); }
.week .crew b { font: 600 15px var(--body); display: block; }
.week .crew small { display: block; color: var(--steel); font-size: 12.5px; line-height: 1.35; }
.cell { display: flex; flex-direction: column; gap: 6px; }
.cell.today { background: #fffcf3; }
.job {
  text-align: left; border: 0; border-left: 4px solid var(--work); background: var(--work-bg); border-radius: 4px;
  padding: 6px 7px; font: 13px/1.3 var(--body); color: var(--ink); cursor: pointer; width: 100%;
}
.job b { font: 500 12.5px var(--mono); letter-spacing: -.01em; }
.job.insp { border-color: var(--free); background: var(--free-bg); }
.job.recheck { border-color: var(--lock); background: var(--lock-bg); }
.job.strike { border-color: var(--steel); background: #eceff1; }
.job.deliv { border-color: var(--wind); background: #fbf1dc; }
.job.coll { border-color: #8a5c00; background: #f3ece0; }
.job.done { opacity: .5; text-decoration: line-through; }
.job .warn { display: block; color: var(--lock); font-weight: 600; font-size: 12px; }
.add { border: 1px dashed var(--line); background: transparent; color: var(--steel); border-radius: 4px; padding: 4px; cursor: pointer; font-size: 18px; line-height: 1; }
.add:hover { border-color: var(--ink); color: var(--ink); }

.due { font-family: var(--mono); font-size: 13.5px; white-space: nowrap; }
.due.over { color: var(--lock); font-weight: 600; }
.due.soon { color: #8a5c00; font-weight: 600; }
.week .crew .due { white-space: normal; }

dialog { border: 0; border-radius: 12px; padding: 0; width: min(520px, calc(100vw - 32px)); box-shadow: 0 24px 70px rgba(23,32,43,.35); }
/* Wide forms set their own width; the dialog follows them instead of cutting off the buttons. */
dialog:has(> form[style*="width"]) { width: fit-content; max-width: calc(100vw - 32px); }
dialog::backdrop { background: rgba(23,32,43,.45); }
dialog form { padding: 20px; }
dialog h3 { font-size: 21px; margin-bottom: 14px; }
.btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 8px; }
.btns .left { margin-right: auto; }

.empty { padding: 18px; text-align: center; color: var(--steel); background: var(--card); border: 1px dashed var(--line); border-radius: var(--r); }
.src { font-size: 12.5px; color: var(--steel); margin-top: 10px; }
.alert { border-left: 4px solid var(--wind); background: var(--card); padding: 10px 14px; border-radius: 4px; margin-bottom: 8px; }
.alert.wind { border-color: var(--lock); }

/* Printable protocol */
.proto { background: #fff; max-width: 800px; padding: 30px; border: 1px solid var(--line); }
.proto table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.proto td, .proto th { border: 1px solid #999; padding: 7px 9px; text-align: left; font-size: 14px; }
.sig { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.sctag { border-width: 6px; }
.sctag.free { border-color: var(--free); }
.sctag.lock { border-color: var(--lock); }
.sctag-state { font: 700 54px/1.05 var(--display); margin: 8px 0 10px; text-transform: uppercase; }
.sctag.free .sctag-state { color: var(--free-ink); }
.sctag.lock .sctag-state { color: var(--lock); }
.sctag.amber { border-color: var(--wind); }
.sctag.amber .sctag-state { color: #6b4a00; font-size: 34px; text-transform: none; }
.sig div { border-top: 1px solid #333; padding-top: 6px; font-size: 13px; }
@media print {
  .side, .noprint { display: none !important; }
  .shell { display: block; }
  main { padding: 0; }
  .proto { border: 0; padding: 0; }
  .proto.sctag { border: 6px solid; padding: 24px; }
  .sctag.free { border-color: var(--free); }
  .sctag.lock { border-color: var(--lock); }
  .sctag.amber { border-color: var(--wind); }
}

@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
  .grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .side { min-width: 0; }
  .side { position: sticky; top: 0; height: auto; z-index: 10; padding: 10px 16px; gap: 8px; }
  .side-note { display: none; }
  /* Phone: sections as a bar under the thumb. Four main ones plus More; More opens a second row. */
  #nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px; background: var(--ink); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 -6px 20px rgba(23,32,43,.18);
  }
  #nav a, .navmore {
    flex-direction: column; justify-content: center; gap: 4px; padding: 7px 2px 6px; position: relative; text-align: center;
    font: 600 11.5px/1.15 var(--body); letter-spacing: 0; color: #b9c6ce; border-radius: 8px; white-space: normal;
  }
  .navmore { display: flex; align-items: center; background: none; border: 0; cursor: pointer; order: 1; }
  .side.more .navmore { color: #fff; background: rgba(255,255,255,.1); }
  #nav a.on { box-shadow: none; }
  #nav a:nth-of-type(n+5) { display: none; order: 2; }
  .side.more #nav a:nth-of-type(n+5) { display: flex; }
  #nav .ic { width: 22px; height: 22px; }
  #nav .cnt { position: absolute; top: 2px; left: calc(50% + 6px); margin: 0; font-size: 10.5px; padding: 2px 5px; }
  .navmore.dot::after { content: ""; position: absolute; top: 6px; left: calc(50% + 9px); width: 8px; height: 8px; border-radius: 50%; background: var(--wind); }
  main { padding: 18px 16px calc(96px + env(safe-area-inset-bottom)); }
  .head h1 { font-size: 25px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .grid3, .row { grid-template-columns: 1fr; }
  .filters input[type=search] { width: 100%; margin-left: 0; }
  .list .hide-m { display: none; }
  /* Thumbs and gloves: every button at least 40 px tall. Inputs at 16 px, or iPhones zoom in on tap. */
  .btn, .btn.small, .rm, .seg label, .chip, .add { min-height: 40px; }
  .rm, .seg label { display: inline-flex; align-items: center; }
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
  .pill { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

.side-note a, .linkbtn { color: #c9d3d9; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }
#who { color: #fff; font-weight: 600; }
.chip input { margin: 0 4px 0 0; vertical-align: -1px; }
.rm { background: none; border: 0; padding: 4px 0; font: 13.5px var(--body); color: var(--steel); text-decoration: underline; cursor: pointer; white-space: nowrap; }
.rm:hover { color: var(--lock); }
.list select { min-width: 140px; }

/* Demo storm switch (demo only) */
.banner.storm { background: var(--card); border-color: var(--line); }
.banner.storm.on { background: var(--wind-bg); border-color: #f0d9a4; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; flex: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { width: 40px; height: 24px; border-radius: 12px; background: #c3ccd1; position: relative; transition: background-color .15s; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.switch input:checked + .track { background: var(--wind); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 3px solid var(--wind); outline-offset: 2px; }

/* Who is where: one card per site with the people checked in there */
.here { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.here .card { padding: 16px 18px 8px; }
.here .site { display: block; margin: 2px 0 8px; font-weight: 600; color: var(--ink); text-decoration: none; }
.here .site:hover { text-decoration: underline; }
.here ul { list-style: none; margin: 0; padding: 0; }
.here li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 9px 0; border-top: 1px solid var(--line); }
.here li .muted { font-size: 13px; margin-right: auto; }

/* Round 5: N/A answers, photos, signatures, logo, QR tag, logins */
.seg input:checked + label.na { background: var(--steel); color: #fff; }
.filebtn { position: relative; overflow: hidden; cursor: pointer; }
.filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.filebtn:focus-within { outline: 3px solid var(--wind); outline-offset: 2px; }
.photos { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.photos:empty { display: none; }
.photos figure { position: relative; margin: 0; width: 104px; height: 104px; border: 1px solid var(--line); border-radius: 6px; background: #f3f5f6; display: grid; place-items: center; overflow: hidden; font-size: 12px; }
.photos img { width: 100%; height: 100%; object-fit: cover; }
.photos .rm { position: absolute; top: 3px; right: 3px; width: 28px; height: 28px; padding: 0; border-radius: 50%; background: rgba(23, 32, 43, .78); color: #fff; text-decoration: none; font-size: 18px; line-height: 28px; }
.photos .rm:hover { background: var(--lock); color: #fff; }
.sigs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 18px; }
.pad { display: block; width: 100%; height: auto; aspect-ratio: 56 / 17; margin-top: 6px; background: #fff; border: 1px dashed #9aa8b1; border-radius: 6px; touch-action: none; cursor: crosshair; }
.rphotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 14px; }
.rphotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid #ccc; }
.sig > div { border-top: 0; padding-top: 0; min-height: 60px; display: flex; flex-direction: column; justify-content: flex-end; }
.sig > div > span { display: block; border-top: 1px solid #333; padding-top: 6px; }
.sig img { display: block; max-width: 100%; height: 54px; object-fit: contain; object-position: left bottom; margin-bottom: -6px; }
.firmhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.firmhead img { max-height: 48px; max-width: 200px; object-fit: contain; }
.logoprev { display: block; max-height: 70px; max-width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.sctag .qr { float: right; width: 150px; margin: 0 0 12px 18px; text-align: center; }
.sctag .qr svg { display: block; width: 150px; height: 150px; }
.sctag .qr small { display: block; font-size: 11.5px; color: var(--steel); margin-top: 2px; }
.pubpage { max-width: 520px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.pubstate { font: 700 34px/1.1 var(--display); text-transform: uppercase; margin: 14px 0; padding: 14px 16px; border-radius: 6px; background: #eef1f3; }
.pubstate.free { background: var(--free-bg); color: var(--free-ink); }
.pubstate.lock { background: var(--lock-bg); color: var(--lock); }
.pubstate.amber { background: var(--wind-bg); color: #6b4a00; font-size: 24px; text-transform: none; }
.pubpage table.list th { width: 40%; }
.banner.ok { background: var(--free-bg); border-color: #b9dcc6; }
.f.pw { display: block; margin-bottom: 12px; flex: 1; }
.f.pw > label { display: block; font-size: 13px; color: var(--steel); margin-bottom: 4px; }
.pwrow { display: flex; gap: 8px; }
.pwrow input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; }
.pwrow .btn { white-space: nowrap; }
code { font: 13.5px ui-monospace, Menlo, monospace; background: #eef1f3; padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
@media print {
  .sctag .qr svg { width: 40mm; height: 40mm; }
  .sctag .qr { width: 40mm; }
  .pad, .photos, .filebtn { display: none; }
}
@media (max-width: 560px) {
  .sctag .qr { float: none; margin: 0 auto 12px; }
  .rphotos { grid-template-columns: repeat(2, 1fr); }
  .pubstate { font-size: 27px; }
}

/* Round 6: picked faults, defects to put right, documents, access points, checklist editor */
.check select.fault { grid-column: 1 / -1; width: 100%; font: 14px var(--body); padding: 8px 10px; border: 1px solid var(--lock); border-radius: 6px; background: #fff; }
.fixes, .docs { list-style: none; margin: 6px 0 0; padding: 0; width: 100%; }
.fixes li, .docs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; }
.fixes li:first-child, .docs li:first-child { border-top: 0; }
.fixes .grow, .docs .muted { flex: 1 1 180px; min-width: 0; }
.fixes .pill { margin-left: 4px; }
.linkbtn { background: none; border: 0; padding: 0; font: 600 14.5px var(--body); color: var(--ink); text-decoration: underline; cursor: pointer; text-align: left; }
.tagpoints { margin-bottom: 16px; }
.tagpoints .btn { margin-top: 10px; }
details.chk { border-top: 1px solid var(--line); padding: 10px 0; }
details.chk:first-child { border-top: 0; padding-top: 0; }
details.chk summary { cursor: pointer; padding: 4px 0; }
details.chk[open] summary { margin-bottom: 8px; }
.sctag + .sctag { margin-top: 24px; }
@media print {
  .sctag + .sctag { break-before: page; margin-top: 0; }
}

/* Round 7: quotes and invoices, RAMS, harness checks, toolbox talks, kit (office.js) */
.mdoc .mtop { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.mdoc .mfrom { text-align: right; font-size: 13.5px; color: var(--steel); }
.mdoc .mto { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin: 18px 0 4px; font-size: 14.5px; }
.mdoc .num, .mdoc th.num { text-align: right; }
.mline { display: grid; grid-template-columns: minmax(0, 1fr) 70px 100px auto; gap: 8px; align-items: center; margin-top: 6px; }
.mline input, .hrow input, .hrow textarea, .kr input { width: 100%; font: 14.5px var(--body); padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; min-width: 0; }
.hrow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.hrow textarea { grid-column: 1 / -1; min-height: 64px; resize: vertical; }
.hrow .rm { justify-self: start; }
.hfaults { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 14px; }
.hfaults label { display: flex; gap: 8px; align-items: flex-start; }
.signs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin: 10px 0; }
.signs div { border-top: 1px solid #333; padding-top: 4px; font-size: 13px; }
.signs img { display: block; height: 52px; max-width: 100%; object-fit: contain; object-position: left; }
.kitrows { max-height: 46vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; }
.kr, .kh { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 8px; align-items: center; padding: 5px 0; font-size: 14px; }
.kitrows .kh { font: 600 12px var(--body); color: var(--steel); text-align: center; }
form[data-k="back"] .kr, form[data-k="back"] .kh { grid-template-columns: minmax(0, 1fr) repeat(3, 64px); }
#jobkit-rows .kh { text-align: left; }
#jobkit .kitrows { margin-bottom: 12px; }
.kr small { display: block; }
details.kitsite { padding: 10px 14px; margin-bottom: 8px; }
details.kitsite summary { cursor: pointer; }
details.kitsite table { margin-top: 8px; }
@media (max-width: 760px) {
  .mline { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .mline input[name=d] { grid-column: 1 / -1; }
  .proto.mdoc { padding: 18px 14px; }
  .mdoc td, .mdoc th { padding: 6px 5px; font-size: 13px; }
  .mdoc .mtop, .mdoc .mto { display: block; }
  .mdoc .mfrom { text-align: left; margin-top: 8px; }
  .hrow, .hfaults { grid-template-columns: 1fr; }
}
@media print {
  .mdoc { font-size: 13px; }
  .signs { break-inside: avoid; }
}
/* kit tables: the Item column stays put when a phone scrolls the counts sideways */
table.kitstate, table.kitfree { overflow: clip; }
.kitstate tr > :first-child, .kitfree tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--card); box-shadow: 1px 0 0 var(--line); }
.kitstate th:first-child, .kitfree th:first-child { background: #f7f9fa; }
/* label.f sets display:block, which beat the hidden attribute (empty "last day" box on every job) */
.f[hidden] { display: none; }
/* kit kinds as a row in the kit tables */
.kitstate tr.grp > td, .kitfree tr.grp > td { background: #f7f9fa; font: 600 12px var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--steel); padding-top: 10px; }
.row.r31 { grid-template-columns: 3fr 1fr; }
.facts b.big { font: 600 26px/1.1 var(--body); letter-spacing: -.02em; font-feature-settings: "tnum"; }
/* lorry runs under the planner */
.runs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.runs ol { margin: 8px 0 10px; padding-left: 20px; line-height: 1.45; }
.runs li { margin-bottom: 6px; }
/* counting kit on the phone: the totals stay in view while the list scrolls */
.countf { max-width: 760px; }
.countbar { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; background: var(--card); padding: 10px 0 8px; margin: -6px 0 10px; border-bottom: 1px solid var(--line); }
.countbar span { display: block; font-size: 12.5px; color: var(--steel); }
.countbar b { font: 600 28px/1 var(--body); letter-spacing: -.02em; font-feature-settings: "tnum"; }
.countbar .bad b { color: var(--lock); }
.countbar .amber b { color: #8a5c00; }
.countbar p { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--steel); }
.countbar.static { position: static; margin: 14px 0; border: 0; }
@media (max-width: 760px) { .countbar { top: 58px; } }
@media (max-width: 560px) { .proto.kc { padding: 18px 14px; } .proto table.kcount td, .proto table.kcount th { padding: 6px 4px; font-size: 12px; } }
.cr, .ch { display: grid; grid-template-columns: minmax(0, 1fr) 70px 84px 84px; gap: 8px; align-items: center; padding: 6px 0; font-size: 14.5px; }
.cr { border-top: 1px solid var(--line); }
.ch { font: 600 12px var(--body); color: var(--steel); }
.ch span:not(:first-child), .cr b { text-align: right; }
.cr b { font-feature-settings: "tnum"; padding-right: 6px; }
.cr input { width: 100%; min-width: 0; font: 16px var(--body); padding: 9px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.cr input:invalid:not(:placeholder-shown) { border-color: var(--lock); }
@media (max-width: 560px) {
  .row.r31 { grid-template-columns: 1fr; }
  .cr, .ch { grid-template-columns: minmax(0, 1fr) 58px 64px 64px; gap: 6px; font-size: 14px; }
  .ch { font-size: 11px; white-space: nowrap; }
  .countbar b { font-size: 24px; }
}
.itembtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline dotted #9aa8b1; text-underline-offset: 3px; }
.itembtn:hover { color: var(--work); }

/* Delivering kit: item, planned, delivered. */
form[data-form=deliver] .cr, form[data-form=deliver] .ch { grid-template-columns: minmax(0, 1fr) 70px 96px; }
form[data-form=deliver] details { margin-top: 10px; }
form[data-form=deliver] summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
/* After a QR scan: one big button per thing to do. */
.scanacts { display: grid; gap: 10px; max-width: 520px; }
.scanbtn { --c: var(--ink); display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-align: left; text-decoration: none; color: var(--c);
  background: #fff; border: 2px solid var(--c); border-radius: 12px; }
.scanbtn .ic { width: 34px; height: 34px; stroke-width: 1.6; }
.scanbtn span { display: flex; flex-direction: column; gap: 2px; }
.scanbtn b { font: 600 17px var(--body); letter-spacing: -.01em; }
.scanbtn small { font-weight: 400; color: var(--ink); }
.scanbtn.on { background: var(--c); color: #fff; }
.scanbtn.on small { color: #fff; }
.sc-deliver { --c: #b77a00; } .sc-count { --c: var(--free); } .sc-open { --c: var(--steel); }
/* A scaffolder's and a driver's day. */
.daylist { margin: 0; padding-left: 20px; }
.daylist li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.daylist li:last-child { border-bottom: 0; }
.daylist .btn, .run li .btn { margin-top: 8px; }
.asbar { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.stiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.stile { --c: var(--ink); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; font: 500 13.5px var(--body); color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--c); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.stile b { font: 600 21px var(--body); letter-spacing: -.02em; color: var(--c); line-height: 1.15; }
.stile.on { background: var(--c); border-color: var(--c); color: #fff; }
.stile.on b { color: #fff; }
.st-free { --c: var(--free); } .st-lock { --c: var(--lock); } .st-work { --c: var(--work); } .st-gone { --c: var(--steel); } .st-extra { --c: #b77a00; }
@media (max-width: 760px) { .stiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.roletiles { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.roletiles legend { padding: 0; margin-bottom: 6px; }
.roletiles > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.roletile { --c: var(--ink); position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: var(--c);
  border: 2px solid var(--c); border-radius: 12px; padding: 10px 6px; cursor: pointer; background: #fff; }
.roletile.as-staff { --c: var(--work); } .roletile.as-field { --c: var(--free); }
.roletile input { position: absolute; opacity: 0; pointer-events: none; }
.roletile .ic { width: 30px; height: 30px; stroke-width: 1.6; }
.roletile b { font: 600 15px var(--body); }
.roletile .astag { font-size: .75rem; border-radius: 6px; padding: 2px 5px; line-height: 1.25; width: 100%; }
.roletile:has(input:checked) { background: var(--c); color: #fff; }
.roletile:has(input:focus-visible) { outline: 3px solid var(--c); outline-offset: 2px; }
.roletiles[disabled] .roletile { cursor: not-allowed; opacity: .6; }
.roletiles[disabled] .roletile:has(input:checked) { opacity: 1; }
.asbar h2 { margin: 0; font-size: 1.15rem; }
.ashead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.asquick { --c: var(--ink); display: inline-flex; border: 2px solid var(--c); border-radius: 999px; overflow: hidden; }
.asquick.as-site { --c: var(--free); }
.assite { display: inline-flex; align-items: center; gap: 6px; }
.asquicklbl { font-size: .85rem; font-weight: 600; color: var(--free); }
.asbar.open .assite { display: none; }
.asquick button { font: 600 .85rem var(--body); padding: 6px 14px; border: 0; background: #fff; color: var(--c); cursor: pointer; }
.asquick > button.as-office { --c: var(--work); }
.asquick > button.as-site { --c: var(--free); }
.asquick > button.as-admin { --c: var(--ink); }
.asquick.as-site > button { --c: var(--free); }
.asquick button + button { border-left: 1px solid color-mix(in srgb, var(--ink) 25%, #fff); }
.asquick button.on { background: var(--c); color: #fff; }
.asquick button:not(.on):hover { background: color-mix(in srgb, var(--c) 8%, #fff); }
.astoggle { margin-left: auto; font: inherit; font-size: .9rem; font-weight: 600; background: none; border: 0; color: var(--ink); cursor: pointer; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; }
.astoggle::after { content: " ▾"; text-decoration: none; display: inline-block; margin-left: 4px; }
.asbar.open .astoggle::after { content: " ▴"; }
.asbar .asless, .asbar.open .asmore { display: none; }
.asbar.open .asless { display: inline; }
.asbar:not(.open) { cursor: pointer; }
.asfull { display: none; margin-top: 10px; }
.asbar.open .asfull { display: block; }
.asbar.open .asquick { display: none; }
.asbar .asnote { margin: 0 0 10px; font-size: .9rem; }
.ascards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ascard { --c: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font: inherit; color: var(--c);
  background: #fff; border: 2px solid var(--c); border-radius: 12px; padding: 14px 8px; cursor: pointer; }
.ascard.as-office, .aswho.as-office { --c: var(--work); }
.ascard.as-site, .aswho.as-site { --c: var(--free); }
.aspicklbl { font-weight: 600; font-size: .9rem; margin: 2px 0 6px; }
.aspick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 2px solid var(--c); border-radius: 10px; overflow: hidden; margin: 0 0 12px; }
.aspick button { display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; padding: 10px 14px; border: 0; background: #fff; color: var(--c); cursor: pointer; }
.aspick button + button { border-left: 2px solid var(--c); }
.aspick button .ic { width: 28px; height: 28px; flex: none; }
.aspick button b { display: block; font: 600 .95rem var(--body); }
.aspick button small { display: block; color: var(--ink); font-size: .85rem; }
.aspick button.on { background: var(--c); color: #fff; }
.aspick button.on small { color: #fff; }
.aspick button:not(.on):hover { background: color-mix(in srgb, var(--c) 8%, #fff); }
@media (max-width: 560px) { .aspick button { padding: 8px 8px; gap: 6px; } .aspick button .ic { width: 22px; height: 22px; } .aspick button small { font-size: .75rem; } }
.ascard .ic { width: 40px; height: 40px; stroke-width: 1.6; }
.ascard .astitle { font: 600 1.1rem var(--body); letter-spacing: -.01em; }
.ascard .asline { font-size: .9rem; color: var(--ink); }
.ascard.on { background: var(--c); color: #fff; }
.ascard.on .asline { color: #fff; }
.ascard:not(.on):hover { background: color-mix(in srgb, var(--c) 8%, #fff); }
.aswho { --c: var(--ink); margin-top: 10px; border-left: 4px solid var(--c); padding: 4px 0 4px 12px; }
.astags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.astag { font-size: .85rem; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--free) 12%, #fff); color: var(--free); font-weight: 600; }
.astag.no { background: color-mix(in srgb, var(--lock) 10%, #fff); color: var(--lock); }
.assees { font-size: .9rem; }
@media (max-width: 760px) {
  .ascards { gap: 6px; }
  .ascard { padding: 10px 4px; }
  .ascard .ic { width: 30px; height: 30px; }
  .ascard .astitle { font-size: .9rem; }
  .ascard .asline { font-size: .75rem; line-height: 1.2; }
}

/* Team: the four ticks per person, one per line */
td.ticks label { display: block; white-space: nowrap; font-size: 13.5px; line-height: 1.7; }

/* Sub-pages under one menu item: a tab bar, so it reads as separate pages. */
.ptabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin: 4px 0 18px; overflow-x: auto; scrollbar-width: none; }
.ptabs::-webkit-scrollbar { display: none; }
.ptabs > a, .ptabs > button { flex: none; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 11px 16px; font: 600 16px var(--body); color: var(--steel); text-decoration: none; cursor: pointer; white-space: nowrap; min-height: 44px; }
.ptabs > a:hover, .ptabs > button:hover { color: var(--ink); }
.ptabs > .on { color: var(--ink); border-bottom-color: var(--ink); }
@media (max-width: 600px) { .ptabs { gap: 0; } .ptabs > a, .ptabs > button { padding: 10px 10px; font-size: 14.5px; } }
/* Collection count: item, expected, back, damaged, beyond repair, left on site.
   On a phone the item name takes its own line above the five numbers. */
form[data-form=count] .cr, form[data-form=count] .ch { grid-template-columns: minmax(0, 1fr) 64px repeat(4, 78px); }
form[data-form=count] .ch span { white-space: normal; line-height: 1.2; }
@media (max-width: 700px) {
  form[data-form=count] .cr, form[data-form=count] .ch { grid-template-columns: 56px repeat(4, minmax(0, 1fr)); gap: 6px; }
  form[data-form=count] .cr > span:first-child, form[data-form=count] .ch > span:first-child { grid-column: 1 / -1; font-weight: 600; }
  form[data-form=count] .ch > span:first-child { display: none; }
  form[data-form=count] .ch { font-size: 11px; }
}
.countf [data-act=count-all] { white-space: normal; max-width: 100%; text-align: left; }
form[data-form=count] .ch span { overflow-wrap: normal; word-break: keep-all; }
.ptabs.more { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }

/* Title over the wind chart */
.chartt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-bottom: 4px; }
.chartt b { font: 600 15px var(--body); letter-spacing: -.01em; }
.chartt span { font-size: 13px; color: var(--steel); }