/* ---- Job Site (Sheet 27) ----
     The tab, the drawing viewer and the walk. The viewer and the walk fill the
     screen, because on a phone on site that is the only thing being looked at;
     every control on them is at least 44px, the size a thumb hits first time. */
  .js-bar { align-items:center; }
  .js-bar .js-gap { flex:1; }
  .js-sec { margin:0 0 1.4rem; }
  .js-sec > h3 { font-size:.95rem; margin:.2rem 0 .5rem; }
  .js-note { font-size:.82rem; color:var(--ink-3); margin:.3rem 0 .7rem; max-width:70ch; }
  .js-banner { border-left:3px solid var(--st-warning); background:var(--today); padding:.5rem .75rem; font-size:.85rem; margin:0 0 .8rem; }
  .js-caps { display:grid; grid-template-columns:repeat(auto-fill, minmax(13rem, 1fr)); gap:.6rem; }
  .js-cap { border:1px solid var(--rule); border-radius:6px; background:var(--surface); padding:.5rem; display:flex; flex-direction:column; gap:.35rem; min-width:0; }
  .js-cap__h { display:flex; gap:.4rem; align-items:center; font-size:.8rem; color:var(--ink-2); }
  .js-cap__h .ic { width:16px; height:16px; }
  .js-cap img, .js-cap video { width:100%; max-height:14rem; object-fit:cover; border-radius:4px; background:var(--rule-soft); }
  .js-cap audio { width:100%; }
  .js-t { font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink); }
  .js-tr { width:100%; min-height:9rem; font:inherit; font-size:.9rem; padding:.5rem; border:1px solid var(--rule); border-radius:4px; background:var(--surface); color:var(--ink); box-sizing:border-box; }
  .js-acts { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin:.5rem 0; }
  table.js-items td { vertical-align:top; }
  table.js-items input[type=text], table.js-items select { font:inherit; font-size:.85rem; width:100%; min-width:6rem; box-sizing:border-box;
         padding:.3rem .4rem; border:1px solid var(--rule); border-radius:4px; background:var(--surface); color:var(--ink); }
  table.js-items .js-said { font-size:.75rem; color:var(--ink-3); margin-top:.25rem; }
  table.js-items tr.js-done td { color:var(--ink-3); }
  .js-ev { display:flex; gap:.25rem; flex-wrap:wrap; align-items:center; }
  .js-ev img { width:44px; height:44px; object-fit:cover; border-radius:3px; }
  .js-add { display:flex; gap:.4rem; flex-wrap:wrap; margin:.6rem 0 0; }
  .js-add select, .js-add input { font:inherit; font-size:.85rem; padding:.35rem .45rem; border:1px solid var(--rule); border-radius:4px; background:var(--surface); color:var(--ink); }
  .js-add input.js-wide { flex:1 1 16rem; }
  .js-sheets { display:grid; grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr)); gap:.7rem; }
  .js-sheet { border:1px solid var(--rule); border-radius:6px; background:var(--surface); overflow:hidden; display:flex; flex-direction:column; }
  .js-sheet__img { aspect-ratio:3/2; background:#fff; display:flex; align-items:center; justify-content:center; color:#7b8a9c; font-size:.8rem; cursor:pointer; }
  .js-sheet__img img { width:100%; height:100%; object-fit:contain; }
  .js-sheet__b { padding:.5rem .6rem; display:flex; flex-direction:column; gap:.2rem; font-size:.85rem; }
  .js-sheet__no { font-weight:700; color:var(--ink); }
  .js-sheet__acts { display:flex; gap:.4rem; margin-top:.3rem; }
  /* above the app's own bars (50), below its messages (60) */
  .js-ov { position:fixed; inset:0; z-index:58; background:var(--bg); display:flex; flex-direction:column;
           padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px); }
  .js-ov__top { display:flex; align-items:center; gap:.5rem; padding:.45rem .7rem; background:var(--surface); border-bottom:1px solid var(--rule); flex-wrap:wrap; }
  .js-ov__title { font-weight:700; font-size:.95rem; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .js-ov__sub { font-size:.8rem; color:var(--ink-3); font-variant-numeric:tabular-nums; }
  .js-ov__top select { font:inherit; font-size:.9rem; min-height:40px; border:1px solid var(--rule); border-radius:4px; background:var(--surface); color:var(--ink); max-width:60vw; }
  .js-ov__main { position:relative; flex:1; min-height:0; }
  .js-osd { position:absolute; inset:0; background:#fff; }
  .js-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:1.5rem; color:var(--ink-2); }
  /* the search, the sheet and the matches, stacked together where the eye already is */
  .js-tools { position:absolute; top:.5rem; left:.5rem; width:min(24rem, calc(100% - 1rem)); display:flex; flex-direction:column;
         gap:.35rem; z-index:3; pointer-events:none; }
  .js-tools > * { pointer-events:auto; }
  .js-find { position:relative; }
  .js-row { display:flex; gap:.35rem; }
  .js-row select { flex:1 1 auto; min-width:0; min-height:44px; font:inherit; font-size:.92rem; padding:0 .5rem; border:1px solid var(--rule);
         border-radius:6px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow); }
  .js-match { display:flex; gap:.35rem; align-items:center; background:var(--surface); border:1px solid var(--rule); border-radius:6px;
         padding:.2rem; box-shadow:var(--shadow); }
  .js-match .js-tbtn { box-shadow:none; }
  .js-match__n { font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink); padding:0 .2rem; }
  .js-match__w { flex:1 1 auto; min-width:0; font-size:.8rem; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .js-results__h { padding:.5rem .7rem; font-size:.8rem; color:var(--ink-2); border-bottom:1px solid var(--rule); position:sticky; top:0; background:var(--surface); }
  .js-where { position:absolute; bottom:.6rem; left:calc(16% + 1rem); right:.6rem; z-index:3; pointer-events:none; text-align:center;
         font-size:.85rem; font-weight:600; color:var(--ink); background:color-mix(in srgb, var(--surface) 92%, transparent);
         border:1px solid var(--rule); border-radius:999px; padding:.35rem .8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .js-where:empty { display:none; }
  .js-tap { background:#14202b; color:#fff; font-size:.8rem; font-weight:600; padding:.3rem .55rem; border-radius:6px; white-space:nowrap;
         pointer-events:none; margin-bottom:6px; box-shadow:0 2px 8px rgba(0,0,0,.35); }
  .js-find input { width:100%; box-sizing:border-box; min-height:44px; font:inherit; font-size:1rem; padding:.4rem .6rem;
         border:1px solid var(--rule); border-radius:6px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow); }
  .js-results { position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--surface); border:1px solid var(--rule);
         border-radius:6px; box-shadow:var(--shadow); max-height:50vh; overflow:auto; }
  .js-results button { display:flex; width:100%; gap:.5rem; justify-content:space-between; padding:.6rem .7rem; border:0; border-bottom:1px solid var(--rule-soft);
         background:transparent; color:var(--ink); font:inherit; font-size:.9rem; text-align:left; cursor:pointer; min-height:44px; }
  .js-results button:hover, .js-results button:focus { background:var(--accent-soft); }
  .js-results .muted { white-space:nowrap; }
  .js-tbtn { min-width:44px; min-height:44px; border:1px solid var(--rule); border-radius:6px; background:var(--surface);
         color:var(--ink); font:inherit; font-size:1.05rem; cursor:pointer; box-shadow:var(--shadow); }
  .js-tbtn:active { background:var(--accent-soft); }
  .js-back { display:inline-flex; align-items:center; gap:.35rem; padding:0 .7rem; font-weight:600; flex:0 0 auto; }
  @media (max-width:40rem) { .js-back .js-lbl { display:none; } }
  .js-ov__bar { display:flex; gap:.6rem; padding:.55rem .7rem; background:var(--surface); border-top:1px solid var(--rule); align-items:center; flex-wrap:wrap; }
  .js-ov__bar .js-gap { flex:1; }
  .js-big { min-height:52px; min-width:52px; padding:.45rem .9rem; font:inherit; font-size:1rem; border:1px solid var(--rule); border-radius:8px;
         background:var(--surface); color:var(--ink); cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; }
  .js-big .ic { width:22px; height:22px; }
  .js-big.on { border-color:var(--accent); background:var(--accent-soft); }
  .js-rec { width:64px; height:64px; border-radius:50%; border:4px solid var(--surface); box-shadow:0 0 0 2px #c62828; background:#d32f2f;
         cursor:pointer; position:relative; flex:0 0 auto; }
  .js-rec::after { content:""; position:absolute; inset:16px; border-radius:50%; background:#fff; opacity:.0; }
  .js-rec.live { animation:jsPulse 1.6s ease-in-out infinite; }
  /* what a press will do: while recording, pause (two bars); while paused, go on (a dot) */
  .js-rec.live::after { inset:18px 20px; border-radius:0; opacity:1; background:linear-gradient(90deg, #fff 0 35%, transparent 35% 65%, #fff 65%); }
  .js-rec.paused { background:#8d1f1f; }
  .js-rec.paused::after { inset:19px; border-radius:50%; opacity:1; background:#fff; }
  @keyframes jsPulse { 50% { box-shadow:0 0 0 8px rgba(211,47,47,.25); } }
  @media (prefers-reduced-motion: reduce) { .js-rec.live { animation:none; } }
  .js-status { font-size:.85rem; color:var(--ink-2); font-variant-numeric:tabular-nums; display:flex; flex-direction:column; gap:.1rem; }
  .js-status b { color:var(--ink); }
  /* ASIs (7 Oct): one column of labelled fields, rows that wrap at a narrow pane */
  .asi-bar { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
  .asi-form { padding:.8rem 1rem 1.2rem; display:flex; flex-direction:column; gap:.75rem; max-width:52rem; }
  .asi-form label { display:flex; flex-direction:column; gap:.25rem; font-size:.8rem; color:var(--ink-2); }
  .asi-form input:not([type=checkbox]):not([type=file]), .asi-form select, .asi-form textarea {
         font:inherit; font-size:.92rem; color:var(--ink); background:var(--surface); border:1px solid var(--rule);
         border-radius:6px; padding:.4rem .5rem; min-height:38px; }
  .asi-form textarea { line-height:1.45; resize:vertical; }
  .asi-row { display:flex; gap:.75rem; flex-wrap:wrap; align-items:flex-end; }
  .asi-row .asi-grow { flex:1 1 14rem; min-width:0; }
  .asi-form select { max-width:100%; min-width:0; text-overflow:ellipsis; }
  .asi-no input { width:5.5rem; }
  .asi-form label.asi-check { flex-direction:row; align-items:center; gap:.4rem; font-size:.92rem; color:var(--ink); min-height:38px; }
  .asi-rfis { border:1px solid var(--rule); border-radius:6px; padding:.4rem .7rem .5rem; margin:0; display:flex; flex-direction:column; gap:.2rem;
         max-height:11rem; overflow:auto; }
  .asi-rfis legend { font-size:.8rem; color:var(--ink-2); padding:0 .3rem; }
  .asi-rfis label { flex-direction:row; align-items:baseline; gap:.45rem; font-size:.88rem; color:var(--ink); }
  .asi-docs h4 { margin:.2rem 0 .3rem; font-size:.85rem; }
  .asi-docs ul { margin:0 0 .5rem; padding-left:1.1rem; display:flex; flex-direction:column; gap:.3rem; }
  .asi-docs li input { min-width:14rem; }
  .asi-form .actions { display:flex; gap:.7rem; align-items:center; }
  /* a transmittal's form (7 Oct): the ASI form's look, with its recipients and
     its document lines laid out to wrap at the pane's width */
  .xm-recs { display:flex; flex-direction:column; gap:.3rem; }
  .xm-rec { display:flex; align-items:center; gap:.5rem; font-size:.9rem; flex-wrap:wrap; }
  .xm-rec .muted { font-size:.8rem; }
  .asi-form label.xm-to { flex-direction:row; align-items:center; gap:.3rem; font-size:.8rem; color:var(--ink-2); }
  .xm-add { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
  .xm-find { position:relative; }
  .xm-find input { width:100%; box-sizing:border-box; }
  .xm-sugg { position:absolute; left:0; right:0; top:100%; z-index:30; margin:.2rem 0 0; padding:.2rem 0; list-style:none;
             background:var(--surface); border:1px solid var(--rule); border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.25);
             max-height:20rem; overflow:auto; }
  .xm-sugg li { padding:.4rem .6rem; cursor:pointer; font-size:.9rem; position:relative; }
  .xm-sugg li:hover, .xm-sugg li.on { background:var(--accent-soft); }
  .xm-sugg .xs-mail { font-size:.78rem; }
  .xm-sugg .xs-job { color:var(--accent); font-weight:600; }
  .xm-sugg .xs-new { color:var(--accent); font-weight:600; border-top:1px solid var(--rule-soft); }
  .xm-sugg .xs-none { cursor:default; }
  .xm-newp { border:1px dashed var(--rule); border-radius:6px; padding:.6rem; display:flex; flex-direction:column; gap:.5rem; margin-top:.4rem; }
  .asi-rfis.xm-tofield { max-height:none; overflow:visible; }
  .xm-add select { flex:1 1 14rem; }
  .xm-docs { display:flex; flex-direction:column; gap:.5rem; }
  .xm-doc { display:flex; flex-wrap:wrap; gap:.4rem; padding:.5rem; border:1px solid var(--rule); border-radius:6px; align-items:center; }
  .xm-doc .xc { width:4.6rem; } .xm-doc .xs { width:6.5rem; } .xm-doc .xd { flex:1 1 14rem; min-width:0; }
  .xm-doc .xdt { width:9.6rem; } .xm-doc .xa { flex:1 1 12rem; min-width:0; } .xm-doc .xp { flex:1 1 100%; min-width:0; }
  .xm-doc .xfile { flex:1 1 100%; font-size:.85rem; }
  .xm-note { font-size:.82rem; color:var(--ink-2); background:var(--accent-soft); border-radius:6px; padding:.45rem .6rem; }
  .xm-view dl { display:grid; grid-template-columns:max-content 1fr; gap:.3rem .9rem; margin:0; font-size:.9rem; }
  .xm-view dt { color:var(--ink-3); font-size:.78rem; padding-top:.1rem; }
  .xm-view dd { margin:0; }
  .xm-view .msg { white-space:pre-wrap; font-size:.9rem; }
  .segbar .xm-new { margin-left:auto; }
  .segbar .xm-kindsel { font:inherit; font-size:.8rem; color:var(--ink); background:var(--surface); border:1px solid var(--rule); border-radius:6px; padding:.2rem .35rem; }
  .xm-kind { display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); margin-bottom:.1rem; }
  .asi-docs ul.xm-sent { list-style:none; padding:0; gap:.45rem; }
  .xm-sent li { border-left:3px solid var(--rule); padding:.15rem 0 .15rem .6rem; font-size:.9rem; }
  .js-hit { border:3px solid #e8a317; background:rgba(232,163,23,.18); border-radius:3px; pointer-events:none; }
  .js-hit--all { border:2px solid rgba(232,163,23,.75); background:rgba(232,163,23,.08); }
  .js-link { border:2px dashed #14567A; background:rgba(20,86,122,.07); border-radius:3px; cursor:pointer; }
  .js-pin { width:26px; height:26px; color:#c62828; pointer-events:none; }
  body.js-open #toast { bottom:calc(6rem + env(safe-area-inset-bottom, 0px)); }
  /* On a phone an open project gets the whole width: the list beside it folds
     to its "All projects" button above it (Job Site, 6 Oct -- starting a visit
     from a 140px column was the first thing a phone did badly). Wider screens
     keep the list beside the project. */
  @media (max-width:40rem) {
    .work { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
    .work > .jobs { border-right:0; border-bottom:1px solid var(--rule); overflow:visible; }
    .work > .jobs > :not(.jobsearch), .work .jobsearch > :not(.jobsearch__top) { display:none; }
    .work .jobsearch { padding:.4rem .6rem; }
  }
  /* the page behind the viewer and the walk holds still */
  html.js-lock, html.js-lock body { overflow:hidden; overscroll-behavior:none; }
  .js-pin.photo { color:#14567A; pointer-events:auto; cursor:pointer; }
  .js-pin svg { width:26px; height:26px; fill:currentColor; stroke:#fff; stroke-width:1.2; }
  @media (max-width:40rem) {
    .js-ov__bar { gap:.4rem; }
    .js-big .js-lbl { display:none; }
  }