/* ════════════════════════════════════════════════════════════════════════
   public/app.css - THE CREW KIT, as blessed on the canvas (Sept 15-16 2026)
   ════════════════════════════════════════════════════════════════════════
   The first block below is the shared style block of the blessed Today
   artboard, docs/mockups/crew-app/Main.dc.html in the Hub's repository,
   lifted verbatim so the kit's CSS never drifts from what the owner blessed
   (the design closeouts, the-crew-app-3 and the-crew-app-4). Every colour
   is one of the Hub's own by the kit's rule. Change it on the canvas
   first, then here; never here alone. The second block adapts the canvas
   frame (390px, a div per field) to a real phone (the viewport, real
   inputs) and adds nothing to the look. */

  * { box-sizing: border-box; }
  body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: #f1f4f1; color: #1d2b1f; -webkit-font-smoothing: antialiased; }
  a { color: #3a7d44; } a:hover { color: #336e3c; }
  button { font: inherit; cursor: pointer; }
  .screen { width: 390px; background: #f1f4f1; display: flex; flex-direction: column; }
  .bar { height: 52px; flex: none; background: #234b34; color: #fff; display: flex; align-items: center;
    gap: 9px; padding: 0 16px; box-shadow: 0 1px 0 rgba(0,0,0,.18); }
  .bar img { width: 26px; height: 26px; border-radius: 5px; display: block; }
  .bar .brand { font-size: 15px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; }
  .body { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 24px; flex: 1; }
  .h1 { font-size: 22px; font-weight: 700; letter-spacing: -.3px; line-height: 1.2; margin: 0; }
  .sub { font-size: 15px; color: #3a4a3c; line-height: 1.5; margin: 0; }
  .meta { font-size: 13px; color: #5a6b5c; line-height: 1.5; margin: 0; }
  .lab { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #5a6b5c; }
  .card { background: #fff; border: 1px solid #e2e8e2; border-radius: 12px; padding: 15px 16px;
    display: flex; flex-direction: column; gap: 8px; line-height: 1.5; }
  .card-title { font-size: 18px; font-weight: 700; line-height: 1.2; margin: 0; }
  .name { font-size: 17px; font-weight: 700; line-height: 1.3; margin: 0; }
  .line { font-size: 15px; color: #3a4a3c; line-height: 1.5; margin: 0; }
  .q { font-size: 17px; font-weight: 600; line-height: 1.4; margin: 0; }
  .btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    min-height: 56px; padding: 8px 14px; font-size: 18px; font-weight: 700; border-radius: 10px;
    border: 1px solid transparent; background: #3a7d44; color: #fff; }
  .btn-hero { min-height: 72px; font-size: 22px; }
  .btn-ghost { background: #fff; color: #2c4a34; border-color: #c9d4ca; }
  .btn-amber { background: #b45309; color: #fff; }
  .btn-sm { min-height: 44px; font-size: 15px; font-weight: 600; }
  .btn.is-off { opacity: .55; cursor: default; }
  .btn svg { width: 22px; height: 22px; flex: none; }
  .btn-hero svg { width: 26px; height: 26px; }
  .btn-sm svg { width: 18px; height: 18px; }
  .pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .4px;
    padding: 3px 9px; border-radius: 999px; text-transform: uppercase; white-space: nowrap; }
  .pill svg { width: 12px; height: 12px; }
  .pill-active { background: #e3f2e5; color: #256a30; }
  .pill-absent { background: #fdeeda; color: #8a4b06; }
  .pill-archived { background: #e6eaf2; color: #3c4b66; }
  .bar .pill { margin-left: auto; min-height: 28px; }
  .band { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 15px; line-height: 1.4;
    background: #b45309; color: #fff; min-height: 56px; }
  .band svg { width: 24px; height: 24px; flex: none; }
  .band .more { margin-left: auto; flex: none; }
  .field { display: flex; flex-direction: column; gap: 4px; }
  .field .flab { font-size: 13px; font-weight: 600; }
  .in { min-height: 52px; display: flex; align-items: center; padding: 0 14px; font-size: 17px;
    border: 1px solid #c9d4ca; border-radius: 9px; background: #fff; color: #1d2b1f; }
  .in.is-empty { color: #9aa79b; }
  .ta { min-height: 88px; padding: 12px 14px; font-size: 17px; line-height: 1.5; border: 1px solid #c9d4ca;
    border-radius: 9px; background: #fff; color: #1d2b1f; }
  .ta.is-empty { color: #9aa79b; }
  .yn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .yn button, .yes1 { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px;
    font-size: 17px; font-weight: 700; border-radius: 9px; border: 1px solid #c9d4ca; background: #fff; color: #2c4a34; }
  .yn button.is-on, .yes1.is-on { background: #234b34; color: #fff; border-color: #234b34; }
  .yes1 { width: 100%; }
  .yn svg, .yes1 svg { width: 20px; height: 20px; }
  .row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 0; }
  .row + .row { border-top: 1px solid #e2e8e2; }
  .row .rname { font-size: 15px; font-weight: 600; flex: 1; min-width: 0; line-height: 1.4; }
  .row .rname .addr { font-weight: 400; color: #5a6b5c; }
  .row .rline { font-size: 13px; color: #5a6b5c; font-weight: 400; line-height: 1.45; }
  .num { width: 24px; height: 24px; flex: none; border-radius: 999px; background: #eef3ee; color: #5a6b5c;
    font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .box { width: 28px; height: 28px; flex: none; border: 2px solid #b6c0ba; border-radius: 6px; background: #fff;
    display: flex; align-items: center; justify-content: center; color: #fff; }
  .box.is-on { background: #234b34; border-color: #234b34; }
  .box svg { width: 18px; height: 18px; }
  .step { display: flex; align-items: center; gap: 6px; flex: none; }
  .step button { width: 48px; height: 52px; display: flex; align-items: center; justify-content: center;
    border: 1px solid #c9d4ca; border-radius: 9px; background: #fff; color: #2c4a34; padding: 0; }
  .step button svg { width: 22px; height: 22px; }
  .step .val { width: 56px; height: 52px; display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700; border: 1px solid #c9d4ca; border-radius: 9px; background: #fff; }
  .step .val.is-empty { color: #9aa79b; font-weight: 400; }
  .unit { font-size: 13px; color: #5a6b5c; font-weight: 400; line-height: 1.4; }
  .item { display: flex; flex-direction: row; align-items: center; gap: 12px; }
  .item .grow { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .hdr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
  .spin { width: 44px; height: 44px; border-radius: 50%; flex: none; border: 4px solid rgba(58,125,68,0.22);
    border-top-color: #3a7d44; }
  .warn { color: #8a4b06; font-size: 13px; font-weight: 600; flex: 1 1 100%; line-height: 1.4; }
  .err { background: #fdecea; color: #7f1d1d; border-radius: 8px; padding: 10px 14px; font-size: 15px; line-height: 1.4; }
  .center { text-align: center; align-items: center; }
  .acc { background: #fff; border: 1px solid #e2e8e2; border-radius: 12px; padding: 0 16px; line-height: 1.5; }
  .acc > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 52px;
    padding: 10px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s; }
  .acc > summary::-webkit-details-marker { display: none; }
  .acc > summary .acc-h { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .acc > summary .acc-t { font-size: 18px; font-weight: 700; line-height: 1.2; }
  .acc > summary .acc-m { font-size: 13px; color: #5a6b5c; line-height: 1.4; }
  .acc > summary .acc-c { margin-left: auto; flex: none; width: 24px; height: 24px; color: #5a6b5c;
    display: inline-flex; transition: transform .2s ease; }
  .acc > summary .acc-c svg { width: 24px; height: 24px; }
  .acc[open] > summary .acc-c { transform: rotate(180deg); }
  .acc > summary:active { background: #eef3ee; }
  .acc-body { border-top: 1px solid #e2e8e2; padding: 2px 0 4px; animation: acc-open .22s ease; }
  @keyframes acc-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  .acc-body .row:first-child { border-top: 0; }
  .acc > summary .acc-t .acc-f { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px;
    border-radius: 999px; background: #fdecea; color: #7f1d1d; font-size: 13px; font-weight: 700; vertical-align: middle; }
  .acc > summary .acc-t .acc-f svg { width: 14px; height: 14px; }
  .mapbtn { display: inline-flex; align-items: center; gap: 4px; flex: none; align-self: center; min-height: 36px; padding: 0 10px;
    border: 1px solid #c9d4ca; border-radius: 9px; background: #fff; color: #2c4a34; font-size: 13px; font-weight: 600;
    text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .mapbtn svg { width: 16px; height: 16px; }
  .numbox { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 104px; height: 52px;
    padding: 0 12px; border: 1px solid #c9d4ca; border-radius: 9px; background: #fff; flex: none; }
  .numbox .n { font-size: 22px; font-weight: 700; line-height: 1; }
  .numbox .u { font-size: 13px; color: #5a6b5c; margin-top: 7px; }
  .numbox.is-empty .n { color: #9aa79b; font-weight: 400; }
  .numbox.is-read { background: #eef3ee; border-color: #e2e8e2; }
  .tiles { display: flex; flex-wrap: wrap; gap: 8px; }
  .tile { width: 72px; height: 72px; border-radius: 8px; background: #eef3ee; border: 1px solid #e2e8e2; color: #5a6b5c;
    display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; flex: none; }
  .tile svg { width: 24px; height: 24px; }
  .tile .t { position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; font-weight: 600; text-align: center;
    padding: 2px 0; background: #fff; color: #3a4a3c; }
  .tile-btn { width: 72px; height: 72px; border-radius: 8px; border: 1px solid #c9d4ca; background: #fff; color: #2c4a34;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px;
    font-weight: 600; padding: 0 6px; text-align: center; line-height: 1.25; flex: none; }
  .tile-btn svg { width: 22px; height: 22px; }
  .pill-refused { background: #fdecea; color: #7f1d1d; }
  .band-refused { background: #fdecea; color: #7f1d1d; }
  .blk { padding: 10px 0; display: flex; flex-direction: column; gap: 8px; }
  .blk + .blk { border-top: 1px solid #e2e8e2; }
  .btns { display: flex; flex-wrap: wrap; gap: 8px; }
  .btns .btn { flex: 1 1 0; min-width: max-content; }
  .req { color: #dc2626; margin-right: 4px; font-weight: 700; }
  .ferr { font-size: 13px; font-weight: 600; color: #7f1d1d; line-height: 1.4; }
  .in.is-invalid, .ta.is-invalid, .numbox.is-invalid, .tile-btn.is-invalid, .yn button.is-invalid { border-color: #7f1d1d; }
  .top { position: relative; }
  .bar .right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
  .bar .back, .ttl .back { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; margin-left: -8px;
    padding: 0; border: 0; border-radius: 999px; background: transparent; color: #fff; -webkit-tap-highlight-color: transparent; }
  .bar .back svg, .ttl .back svg { width: 22px; height: 22px; }
  .ibtn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; padding: 0; border: 0;
    border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; -webkit-tap-highlight-color: transparent; }
  .ibtn svg { width: 20px; height: 20px; }
  .ibtn-alert { background: #dc2626; }
  /* THE SYNC STATE AS AN ICON (the owner, Oct 2 2026; the Hub's docs/notes/call-and-menu-polish.md): the icon alone,
     its circle in the state's colour - the pill's own pairs, and the system line's blue for sending */
  .sync { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border-radius: 999px; }
  .sync svg { width: 17px; height: 17px; }
  .sync-ok { background: #e3f2e5; color: #256a30; }
  .sync-busy { background: #eef5f9; color: #24527c; }
  .sync-wait { background: #fdeeda; color: #8a4b06; }
  .sync-bad { background: #fdecea; color: #7f1d1d; }
  .ttl { display: flex; align-items: center; gap: 6px; padding: 0 16px 12px; background: #234b34; color: #fff; }
  .ttl .tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .ttl h1 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.3px; line-height: 1.2; overflow-wrap: anywhere; }
  .ttl .tt span { font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.72); }
  .drop { position: absolute; top: 100%; right: 12px; margin-top: 6px; min-width: 200px; background: #fff; color: #1d2b1f;
    border: 1px solid #e2e8e2; border-radius: 12px; box-shadow: 0 12px 28px rgba(0,0,0,.18); padding: 6px; display: flex;
    flex-direction: column; z-index: 30; transform-origin: top right; animation: drop-in .18s ease; }
  .drop button { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border: 0; border-radius: 8px;
    background: transparent; color: #2c4a34; font-size: 16px; font-weight: 600; text-align: left; }
  .drop button:active { background: #eef3ee; }
  .drop button svg { width: 20px; height: 20px; flex: none; }
  .slide { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid #e2e8e2;
    box-shadow: 0 12px 24px rgba(0,0,0,.14); padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 8px; z-index: 30;
    animation: slide-down .22s ease; }
  .drop.is-closing, .slide.is-closing { animation: menu-out .18s ease forwards; }
  @keyframes drop-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
  @keyframes slide-down { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
  @keyframes menu-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-8px); } }
  .scrim { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(17,29,20,.45); z-index: 40; animation: fade-in .2s ease; }
  .sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow-y: auto; background: #f1f4f1;
    border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.2); padding: 6px 16px 24px; display: flex;
    flex-direction: column; gap: 12px; z-index: 41; animation: sheet-up .28s cubic-bezier(.2,.8,.2,1); }
  .sheet .grab { width: 40px; height: 5px; border-radius: 999px; background: #c9d4ca; align-self: center; flex: none; }
  .sheet .sh-h { display: flex; align-items: center; gap: 8px; }
  .sheet .sh-h .h1 { flex: 1; min-width: 0; }
  .sheet .x { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; padding: 0;
    border: 0; border-radius: 999px; background: #e2e8e2; color: #2c4a34; }
  .sheet .x svg { width: 20px; height: 20px; }
  .scrim.is-closing { animation: fade-out .24s ease forwards; }
  .sheet.is-closing { animation: sheet-down .24s ease forwards; }
  /* THE PHOTO VIEWER (A PHOTO TAKEN EARLIER OPENS AND CAN BE REMOVED, the Hub's
     docs/notes/crew-photo-remove.md): the photo large, above the screen and any
     panel, with Remove beneath it - the sheet's own parts, one layer higher. */
  .scrim.vw-scrim { z-index: 44; background: rgba(17,29,20,.94); }
  .viewer { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 45; display: flex; flex-direction: column; gap: 12px;
    padding: calc(12px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); pointer-events: none; }
  .viewer > * { pointer-events: auto; }
  .viewer .vw-h { display: flex; align-items: center; gap: 8px; color: #fff; }
  .viewer .vw-t { flex: 1; min-width: 0; font-weight: 600; }
  .viewer .x { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; padding: 0;
    border: 0; border-radius: 999px; background: #fff; color: #2c4a34; }
  .viewer .x svg { width: 20px; height: 20px; }
  .viewer .vw-img { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
  .viewer .vw-img img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
  .viewer .vw-f { display: flex; flex-direction: column; gap: 8px; background: #f1f4f1; border-radius: 16px; padding: 12px; }
  @keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
  @keyframes sheet-down { from { transform: none; } to { transform: translateY(100%); } }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
  .toast { position: fixed; left: 16px; right: 16px; bottom: 24px; z-index: 50; display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-radius: 12px; background: #234b34; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.4;
    box-shadow: 0 8px 24px rgba(0,0,0,.25); animation: toast-in .22s ease; }
  .toast svg { width: 20px; height: 20px; flex: none; }
  .toast.is-closing { animation: fade-out .3s ease forwards; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .pull { position: fixed; left: 50%; width: 40px; height: 40px; margin-left: -20px; border-radius: 999px; background: #fff;
    color: #3a7d44; box-shadow: 0 2px 10px rgba(0,0,0,.2); display: flex; align-items: center; justify-content: center;
    z-index: 19; pointer-events: none; }
  .pull svg { width: 22px; height: 22px; }
  .pull.is-armed { background: #3a7d44; color: #fff; }
  .pull.is-back { transition: transform .25s ease, opacity .25s ease; }
  .row .rname .nm { font-size: 15px; font-weight: 600; }
  .racts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
  .startbtn { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 36px; padding: 0 12px;
    border: 1px solid #3a7d44; border-radius: 9px; background: #3a7d44; color: #fff; font-size: 13px; font-weight: 700;
    -webkit-tap-highlight-color: transparent; }
  .startbtn svg { width: 16px; height: 16px; }
  .startbtn:disabled { opacity: .55; }

/* ─── the app on a real phone (not on the canvas) ───────────────────────── */
html { min-height: 100%; }
body { min-height: 100vh; min-height: 100dvh; }
.screen { width: 100%; min-height: 100vh; min-height: 100dvh; }
.bar { padding-top: env(safe-area-inset-top); height: calc(52px + env(safe-area-inset-top)); }
.body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
input.in { width: 100%; font: inherit; -webkit-appearance: none; appearance: none; }
input.in:focus { outline: 2px solid #3a7d44; outline-offset: 1px; }
.bar img { flex: none; }
.hidden { display: none !important; }
/* THE VISIT segment two: a real input inside the kit's number box and a
   real textarea behind the kit's text box - the same look as the artboards'
   div per field, on a phone that types (the blessed JobOpen artboard draws
   the number box with the unit inside and the text box with its placeholder). */
.numbox input.n { width: 64px; border: 0; padding: 0; margin: 0; background: transparent; text-align: center;
  font: inherit; font-size: 22px; font-weight: 700; line-height: 1; color: #1d2b1f; -webkit-appearance: none; appearance: none; -moz-appearance: textfield; }
.numbox input.n::-webkit-outer-spin-button, .numbox input.n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.numbox input.n::placeholder { color: #9aa79b; font-weight: 400; }
.numbox input.n:focus { outline: none; }
.numbox:focus-within { outline: 2px solid #3a7d44; outline-offset: 1px; }
textarea.ta { width: 100%; font: inherit; font-size: 17px; resize: vertical; -webkit-appearance: none; appearance: none; display: block; }
textarea.ta::placeholder { color: #9aa79b; }
textarea.ta:focus { outline: 2px solid #3a7d44; outline-offset: 1px; }
.tile img { display: block; }
/* A PLACEHOLDER CLEARS WHILE ITS FIELD HAS THE CARET (the owner, Sept 29 2026:
   "When clicking inside of fields, the placeholders do not disappear, so the
   cursor intersects them") - the number box's centred dash most of all. */
input.in:focus::placeholder, textarea.ta:focus::placeholder, .numbox input.n:focus::placeholder { color: transparent; }
/* THE PANEL AND THE MESSAGE clear the phone's own bottom edge, and the page
   beneath an open panel stays where it is. */
.sheet { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.toast { bottom: calc(24px + env(safe-area-inset-bottom)); }
body.sheet-open { overflow: hidden; }

/* ─── THE POLISHING PHASE, segment two (the owner, Sept 21 2026) ────────────── */

/* THE HEADER STAYS AT THE TOP. It scrolled away with the page, so on a long
   job screen there was nothing to get back to. `position: sticky` keeps it
   where it is drawn without taking it out of the flow, so nothing below it
   needs a matching offset. Since THE POLISHING PHASE's second list (the owner,
   Sept 29 2026) the header is the bar AND the view's title beneath it, one
   block (`.top`), which is what sticks. */
.top { position: sticky; top: 0; z-index: 20; }

/* THE BAR NEVER OUTGROWS THE SCREEN (the owner, Sept 29 2026: "there is
   horizontal scrolling because of the top buttons all sharing one line"):
   a 360 px phone read the page 367 px wide - the pill and three round
   buttons at the right, which never shrink, and the brand, which never
   wrapped (the Hub's docs/notes/crew-header-cleanup.md 3.5). The shield is
   now the person menu's Admin, and the brand gives way before the buttons
   do: it shortens with an ellipsis rather than push the page wider. A page
   wider than the screen is also what let a phone zoom and pan, taking the
   header with it (3.6). */
.bar .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* THE DAY'S SECTION HEADINGS (the owner, Sept 29 2026: "a small header that says
   'Current Site'", "a similar 'Timeclock' header", "a Routes header"): the
   kit's `.lab`, set a little closer to the card it heads than to the one
   above it. */
.sect { margin: 6px 2px -4px; }
.sect:first-child { margin-top: 0; }

/* A PULL DOWN AT THE TOP NO LONGER RELOADS THE PAGE. The browser's own
   pull-to-refresh threw away everything the screen was holding - a note
   half typed, a supply-out being written - because those live on the phone
   in memory until they are recorded. `contain` keeps the overscroll inside
   the page: the list still bounces, the page never reloads. */
html, body { overscroll-behavior-y: contain; }

/* ─── THE PROJECT PLAN (the Hub's crew app entry, item (22), part two, Sept 26
   2026): the plan's own classes, LIFTED VERBATIM from the blessed style block
   of docs/mockups/project-plan/CrewPlan.dc.html in the Hub's repository - the
   six crew artboards of that canvas share one style block byte for byte, and
   its first part is the kit's block above, unchanged. Change it on the canvas
   first, then here; never here alone. ─── */
  .plan-card { background: #fff; border: 1px solid #e2e8e2; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
  .map-wrap { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid #c9d4ca; }
  .map-chip { position: absolute; left: 8px; bottom: 8px; background: rgba(255,255,255,.92); color: #3a4a3c; font-size: 11px; font-weight: 600;
    padding: 3px 8px; border-radius: 999px; }
  .map-chip.right { left: auto; right: 8px; }
  .phases { display: flex; gap: 8px; flex-wrap: wrap; }
  .ph { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 6px 12px; border-radius: 9px;
    border: 1px solid #c9d4ca; background: #fff; color: #2c4a34; font-size: 14px; font-weight: 700; text-decoration: none; }
  .ph svg { width: 18px; height: 18px; }
  .ph.is-on { background: #234b34; color: #fff; border-color: #234b34; }
  .ph.is-done { color: #256a30; }
  .ph.is-side { border-style: dashed; color: #3c4b66; }
  .legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: #3a4a3c; }
  .legend span { display: inline-flex; align-items: center; gap: 6px; }
  .sw { width: 16px; height: 16px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
  .sw svg { width: 12px; height: 12px; }
  .sw-done { background: #256a30; color: #fff; } .sw-todo { background: #facc15; color: #3d2e00; }
  .sw-issue { background: #c2410c; color: #fff; } .sw-other { background: #e6eaf2; border: 1px dashed #3c4b66; }
  .zrow { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 0; color: #1d2b1f; text-decoration: none; }
  .zrow + .zrow { border-top: 1px solid #e2e8e2; }
  .zrow .zn { width: 30px; height: 30px; flex: none; border-radius: 999px; display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; }
  .zrow .zn svg { width: 16px; height: 16px; }
  .zn-done { background: #256a30; color: #fff; } .zn-todo { background: #facc15; color: #3d2e00; }
  .zn-issue { background: #c2410c; color: #fff; } .zn-other { background: #e6eaf2; color: #3c4b66; border: 1px dashed #3c4b66; }
  .zrow .zt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .zrow .zt b { font-size: 16px; line-height: 1.3; }
  .zrow .zt span { font-size: 13px; color: #5a6b5c; line-height: 1.4; }
  .zrow .go { width: 20px; height: 20px; color: #5a6b5c; flex: none; }
  .prog { height: 8px; border-radius: 999px; background: #eef3ee; overflow: hidden; display: flex; }
  .prog i { display: block; height: 100%; }
  .kv { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; line-height: 1.4; padding: 6px 0; }
  .kv + .kv { border-top: 1px solid #e2e8e2; }
  .kv b { font-weight: 600; }
  .pill-todo { background: #fef3c7; color: #7a5200; } .pill-issue { background: #ffedd5; color: #9a3412; }
  .pill-done { background: #e3f2e5; color: #256a30; } .pill-other { background: #e6eaf2; color: #3c4b66; }
  .divider { height: 1px; background: #d6ded6; margin: 4px 0; }
  a.btn, a.btn:hover { text-decoration: none; }
  a.btn-ghost { color: #2c4a34; }
/* ─── THE PROPERTY'S DRAWING ON THE PLAN (the Hub's THE TRACED PROPERTY
   DRAWING, PART TWO, SEGMENT TWO, Oct 19 2026): the Drawing and Photo switch,
   LIFTED VERBATIM from the style blocks of the boards approved Oct 14 2026 -
   docs/mockups/traced-property-drawing/CrewPlanDrawing.dc.html (the switch)
   and CrewOfflineDrawing.dc.html (its Photo without signal) in the Hub's
   repository. ─── */
  .mapseg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #c9d4ca; border-radius: 9px; overflow: hidden; }
  .mapseg button { min-height: 44px; border: 0; background: #fff; color: #2c4a34; font-size: 15px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 8px; }
  .mapseg button + button { border-left: 1px solid #c9d4ca; }
  .mapseg button.is-on { background: #234b34; color: #fff; }
  .mapseg svg { width: 18px; height: 18px; }
  .mapseg button:disabled { color: #8a978d; background: #f4f6f2; cursor: default; }
/* OTHER WORK FOR THIS CUSTOMER (the owner, Sept 30 2026: the green blocks sat
   against the fold's rule with no space - "very ugly, no space"; the Hub's
   docs/notes/crew-job-screen-purpose.md section 8): a row as the day's list
   draws one - the name, its status tag (the kit's pill-done and pill-todo)
   and a chevron pointing on to what was recorded - with the list's own
   rule between rows and room above the first. */
.svcrow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; text-align: left; background: none;
  border: 0; border-top: 1px solid #e2e8e2; padding: 10px 0; font: inherit; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.svcrow:first-child { border-top: 0; margin-top: 4px; }
.svcrow .svc-name { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 500; line-height: 1.35; }
.svcrow .pill { flex: none; }
.svcrow .svc-go { flex: none; width: 18px; height: 18px; color: #5a6b5c; transform: rotate(-90deg); }
/* SERVICES EXPECTED, COMPLETED AND OTHER (the Hub's docs/notes/crew-services-expected.md,
   the owner's order of Oct 1 2026: "Services Expected should have a red number flag ...
   Services Completed should have a green number flag ... When a service is completed,
   it goes into the Services Completed section in green"): the green count is the kit's
   red flag (.acc-f) in the kit's done green (.pill-done's pair); a row's second line
   sits under its name; a completed row's name is the done green. */
.acc > summary .acc-t .acc-f.acc-f-done { background: #e3f2e5; color: #256a30; }
.svcrow .svc-name .svc-sub { display: block; font-size: 13px; font-weight: 400; color: #5a6b5c; line-height: 1.4; margin-top: 2px; }
.svcrow.is-done .svc-name { color: #256a30; }
.svcrow.is-read { cursor: default; }

/* ─── THE RADAR MAP (THE CREW APP'S RADAR MAP, the Hub's docs/notes/crew-radar-map.md,
   Sept 30 2026): the screen's own classes, LIFTED VERBATIM from the second style
   block of docs/mockups/crew-app/RadarMap.dc.html in the Hub's repository. The
   map box itself is the Hub's map kit's (public/mapkit.css). Change it on the
   canvas first, then here; never here alone. ─── */
  .rmap { margin: -16px -16px 0; }
  .rmap .map { height: calc(100vh - 250px); min-height: 320px; border-radius: 0; border: 0; border-bottom: 1px solid #c9d4ca; }
  .rmap-ctl { display: flex; align-items: center; gap: 10px; }
  .rmap-ctl .radartime { font-size: 13px; font-weight: 600; color: #1d2b1f; }
  .rmap-ctl .me { margin-left: auto; }
  .rmap-ctl .ibtn { background: #e3f2e5; color: #234b34; }
  .rmap-notes { display: flex; flex-direction: column; gap: 6px; }
  .rmap-note { margin: 0; font-size: 13px; line-height: 1.4; color: #3a4a3c; }
  .rmap-credit { margin: 0; font-size: 11px; line-height: 1.4; color: #5a6b5c; }
  .rmap .medot { fill: #2b6cb0; stroke: #fff; stroke-width: 3; }
  .rmap .meacc { fill: rgba(43, 108, 176, .14); stroke: rgba(43, 108, 176, .45); stroke-width: 1; }
  .rmap .crewdot { fill: #234b34; stroke: #fff; stroke-width: 2.5; }
  .rmap .crewname { font-size: 12px; font-weight: 700; fill: #1d2b1f; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
  .rmap .crewtime { font-size: 11px; fill: #3a4a3c; paint-order: stroke; stroke: #fff; stroke-width: 3px; }

/* ─── THE CREW MESSAGES (STEP 1, THE CONVERSATION; the Hub's LD-108, Sept 30 2026):
   the screens' own classes, LIFTED from the phone screens of the step's drawing,
   docs/mockups/crew-messages/crew-messages-step-1.html in the Hub's repository,
   which the owner approved with the plan (its docs/notes/crew-messages-conversation.md
   section 14) - each rule as the drawing writes it with the drawing's phone frame
   `.ph` taken off, since `.ph` is the plan's phase button above, its menu item's
   `.mi` read as the menu's own button, and its bubbles' two sides `.in` and `.out`
   named `.theirs` and `.mine`, since `.in` is the kit's input box above (the first
   drive drew the office's bubbles centred, 52 px tall, by it). Change it on the
   drawing first, then here; never here alone. ─── */
  .ibtn { position: relative; }
  .ibtn .badge { position: absolute; top: -3px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #234b34; line-height: 1; }
  .drop button .cnt { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .convo { display: flex; gap: 11px; padding: 11px 0; align-items: flex-start; }
  .convo + .convo { border-top: 1px solid #e2e8e2; }
  .av { width: 40px; height: 40px; border-radius: 999px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #fff; background: #3a7d44; }
  .av svg { width: 20px; height: 20px; }
  .av.office { background: #234b34; }
  .av.grp { background: #5a6b5c; }
  .cv { flex: 1; min-width: 0; }
  .cv .t { display: flex; gap: 6px; align-items: baseline; }
  .cv .t b { font-size: 15px; }
  .cv .t .when { margin-left: auto; font-size: 12px; color: #5a6b5c; white-space: nowrap; }
  .cv .pv { font-size: 13.5px; color: #3a4a3c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cv .pv.unread { color: #1d2b1f; font-weight: 600; }
  .ucount { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #3a7d44; color: #fff; font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 22px; flex: none; }
  .thread { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 8px; flex: 1; }
  .day { align-self: center; font-size: 11.5px; font-weight: 700; color: #5a6b5c; background: #e2e8e2; padding: 2px 10px; border-radius: 999px; letter-spacing: .3px; }
  .bub { max-width: 84%; border-radius: 14px; padding: 9px 12px; font-size: 14.5px; line-height: 1.45; display: flex; flex-direction: column; gap: 6px; }
  .bub.theirs { align-self: flex-start; background: #fff; border: 1px solid #e2e8e2; border-bottom-left-radius: 4px; }
  .bub.mine { align-self: flex-end; background: #2f6b3a; color: #fff; border-bottom-right-radius: 4px; }
  .bub .who { font-size: 12px; font-weight: 700; color: #234b34; }
  .bub .stamp { font-size: 11.5px; color: #5a6b5c; display: flex; align-items: center; gap: 4px; }
  .bub.mine .stamp { color: rgba(255,255,255,.8); justify-content: flex-end; }
  .bub .stamp svg { width: 14px; height: 14px; }
  /* THE CREW MESSAGES, STEP 7 (the Hub's drawing P3, approved Oct 5 2026):
     Supply out over the person's own words on their own bubble */
  .bub .stag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #ffe2b8; }
  .bub .stag svg { width: 13px; height: 13px; }
  .qr { display: flex; gap: 6px; overflow: hidden; padding: 0 12px 8px; flex-wrap: wrap; }
  .qr button { font-size: 13px; font-weight: 600; padding: 6px 11px; border-radius: 999px; border: 1px solid #c9d4ca; background: #fff; color: #2c4a34; white-space: nowrap; }
  .comp { display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px; background: #fff; border-top: 1px solid #e2e8e2; }
  .comp .ic { width: 38px; height: 38px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #2c4a34; background: #eef3ee; flex: none; }
  .comp textarea { flex: 1; min-height: 40px; border: 1px solid #c9d4ca; border-radius: 999px; padding: 0 14px; display: flex; align-items: center; color: #8a978c; font-size: 14.5px; }
  .comp .snd { background: #3a7d44; color: #fff; }

/* ─── the messages on a real phone (not on the drawing) ─── the drawing's phone
   frame adapted to the viewport and to real controls, adding nothing to the look:
   a conversation's row is a button, the box a textarea that grows, the answers
   and the box kept at the foot of the screen, the words as typed. */
.convos { padding: 4px 14px; gap: 0; }
.convo { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.convo + .convo { border-top: 1px solid #e2e8e2; }
.cv .pv { display: block; }
.msgcard { border-color: #bcd8c1; background: #f3faf4; }
.msgcard-h { display: flex; gap: 8px; align-items: center; }
.msgcard-h svg { width: 20px; height: 20px; flex: none; color: #2f6b3a; }
.msgcard .line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.msgbody { padding-left: 0; padding-right: 0; padding-bottom: 0; gap: 0; }
.msgbody .thread { padding-left: 16px; padding-right: 16px; }
.msgbody .thread > .btn { align-self: center; width: auto; }
.bub .tx { white-space: pre-wrap; overflow-wrap: anywhere; }
.bub .ans { font-size: 12px; font-weight: 700; opacity: .85; }
.bub.wd .tx { font-style: italic; color: #5a6b5c; }
.bub .stamp .pill { font-size: 9.5px; padding: 1px 6px; }
.msgfoot { position: sticky; bottom: 0; z-index: 5; background: #f1f4f1; padding-top: 8px; }
.msgfoot .comp { flex-wrap: wrap; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.comp textarea { resize: none; padding: 9px 14px; line-height: 1.4; color: #1d2b1f; font-family: inherit; max-height: 160px;
  border-radius: 20px; -webkit-appearance: none; appearance: none; }
.comp textarea::placeholder { color: #8a978c; }
.comp textarea:focus { outline: 2px solid #3a7d44; outline-offset: 1px; }
.comp textarea:focus::placeholder { color: transparent; }
.comp .ic { border: 0; padding: 0; }
.comp .ic svg { width: 20px; height: 20px; }
.comp .only { flex-basis: 100%; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #2c4a34; }
.comp .only input { width: 18px; height: 18px; margin: 0; accent-color: #234b34; }
.qr button { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* ─── THE CREW MESSAGES, STEP 2 (OUR RECORDS IN A MESSAGE; the Hub's LD-108 ruling 1,
   Oct 1 2026): the cards a message carries, the office's message quoted where a card
   led, and the line once a property is chosen for after the job, LIFTED from the
   phone screens of the step's drawing, docs/mockups/crew-messages/
   crew-messages-step-2.html in the Hub's repository, which the owner approved with the
   plan (its docs/notes/crew-messages-records.md section 18) - each rule as the
   drawing writes it with the drawing's phone frame `.ph` taken off. Change it on
   the drawing first, then here; never here alone. ─── */
  .att { border: 1px solid #d5ddd5; border-radius: 10px; padding: 9px 10px; background: #f6f9f6; display: flex; flex-direction: column; gap: 4px; color: #1d2b1f; }
  .att .ak { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #5a6b5c; }
  .att .ak svg { width: 14px; height: 14px; }
  .att .an { font-size: 15px; font-weight: 700; }
  .att .al { font-size: 13px; color: #3a4a3c; }
  .att .aa { display: flex; gap: 6px; margin-top: 4px; }
  .att .ad { font-size: 12.5px; color: #5a6b5c; line-height: 1.4; }
  .att .aq { border-left: 3px solid #3a7d44; padding: 3px 9px; background: #fff; border-radius: 0 7px 7px 0; font-size: 13.5px; color: #2c3c2e; line-height: 1.45; }
  .att .tel { color: #1f6a2c; font-weight: 600; text-decoration: underline; font-size: 13.5px; }
  .att .prow { display: flex; align-items: center; gap: 8px; padding-top: 4px; border-top: 1px solid #e2e8e2; margin-top: 2px; }
  .att .prow .al { flex: 1; min-width: 0; }
  .mini { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 11px; border-radius: 8px; font-size: 13px; font-weight: 700; border: 1px solid #c9d4ca; background: #fff; color: #2c4a34; white-space: nowrap; }
  .mini.go { background: #3a7d44; border-color: #3a7d44; color: #fff; }
  .mini svg { width: 15px; height: 15px; }
  .ok { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #256a30; }
  .ok svg { width: 13px; height: 13px; }
  .off { font-size: 12px; font-weight: 700; color: #8a4b06; }
  .info { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 12px; background: #e4eef7; color: #1f3f5f; font-size: 14px; line-height: 1.45; border: 1px solid #cfe0ef; }
  .info svg { width: 18px; height: 18px; margin-top: 1px; color: #2f5f8a; }
  .qcard { background: #fff; border: 1px solid #d6e7d8; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
  .qcard .ql { font-size: 12.5px; font-weight: 700; color: #234b34; }
  .qcard .qt { font-size: 14px; color: #1d2b1f; line-height: 1.45; }

/* ─── the cards on a real phone (not on the drawing) ─── the drawing's cards adapted
   to real controls, adding nothing to the look: the cards held together under the
   words as the bubble spaces its own parts, Open a real button and Map a real
   link, a customer's words kept as written, and the job a message is about shown
   above the box while it waits to be sent ("Tell the office about this job"). */
.atts { display: flex; flex-direction: column; gap: 6px; }
.mini { font-family: inherit; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.att .an, .att .al, .att .ad, .att .tel { overflow-wrap: anywhere; }
.att .aq { white-space: pre-wrap; overflow-wrap: anywhere; }
.info svg { flex: none; }
.qcard .qt { white-space: pre-wrap; overflow-wrap: anywhere; }
.boxatt { margin: 0 12px 8px; }
/* THE JOB SCREEN, CORRECTED FROM THE OWNER'S PHONE (the Hub's docs/notes/job-screen-corrections.md
   section 10): the x that takes the job off a message waiting to be sent, at the tag's right - a
   32 px tap in the tag's own grey. */
.att .ak .att-x { margin-left: auto; width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 999px; background: transparent; color: #5a6b5c; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.att .ak .att-x svg { width: 18px; height: 18px; }

/* ─── THE CREW MESSAGES, STEP 3 (ANNOUNCEMENTS, CONFIRMATIONS AND URGENT; the Hub's
   LD-108, Oct 1 2026): the red band, the pinned messages, Got it, the urgent tag, a
   note's day, a change's lines, the line above an office-only box and the message
   beneath a stop, LIFTED from the phone screens of the step's drawing,
   docs/mockups/crew-messages/crew-messages-step-3.html in the Hub's repository, which
   the owner approved with the plan (its docs/notes/crew-messages-announcements.md section 15)
   - each rule as the drawing writes it with the drawing's phone frame `.ph` taken off,
   and its bubble's side `.in` the app's `.theirs`. Change it on the drawing first, then
   here; never here alone. ─── */
  .av.ann { background: #b45309; }
  .band.urg { background: #b42318; color: #fff; align-items: stretch; flex-direction: column; gap: 8px; padding: 12px 14px 13px; }
  .band.urg .uh { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
  .band.urg .uh svg { width: 18px; height: 18px; }
  .band.urg .uw { font-size: 14px; line-height: 1.45; }
  .band.urg .ub { display: flex; gap: 8px; }
  .band.urg .ub span { flex: 1 1 0; text-align: center; border-radius: 9px; font-weight: 700; font-size: 15px; padding: 9px 10px; }
  .band.urg .ub .g1 { background: #fff; color: #9b1c1c; }
  .band.urg .ub .g2 { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.45); }
  .pinbox { background: #fff7ec; border: 1px solid #f1d6b3; border-radius: 12px; padding: 10px 12px 4px; display: flex; flex-direction: column; }
  .pinbox .ph2 { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #8a4b06; }
  .pinbox .ph2 svg { width: 14px; height: 14px; }
  .pinrow { display: flex; gap: 10px; padding: 9px 0; align-items: flex-start; }
  .pinrow + .pinrow { border-top: 1px solid #f1e2cc; }
  .bub .ptag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #8a4b06; }
  .bub .ptag svg { width: 13px; height: 13px; }
  .bub.urgb { border: 2px solid #dc2626; }
  .bub .utag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #b42318; }
  .bub .utag svg { width: 13px; height: 13px; }
  .bub .askl { font-size: 13px; color: #3a4a3c; }
  .bub .gotit { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: #3a7d44; color: #fff; border-radius: 9px; padding: 7px 14px; font-size: 14px; font-weight: 700; }
  .bub .gotit svg { width: 15px; height: 15px; }
  .bub .gotdone { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: #256a30; }
  .bub .gotdone svg { width: 14px; height: 14px; }
  .bub .fday { font-size: 11.5px; font-weight: 700; color: #24527c; }
  .sysline { align-self: stretch; background: #eef5f9; border: 1px solid #cfe0ef; color: #1f3f5f; border-radius: 10px; padding: 8px 11px; font-size: 13.5px; line-height: 1.45; display: flex; flex-direction: column; gap: 2px; }
  .sysline b { font-size: 12px; letter-spacing: .3px; color: #24527c; }
  .sysline .closed { color: #5a6b5c; font-size: 12.5px; }
  .alone { padding: 6px 12px 0; font-size: 12.5px; color: #5a6b5c; }
  .rline.msg .lab { color: #24527c; }

/* ─── step three on a real phone (not on the drawing) ─── the drawing's pieces adapted
   to real controls, adding nothing to the look: Got it, the band's two buttons and a
   pinned row are real buttons with the drawing's own looks, the band's words and a
   change's lines kept as written, the pinned box spaced as the screen's cards are. */
.band.urg .ub button { flex: 1 1 0; text-align: center; border-radius: 9px; font-weight: 700; font-size: 15px; padding: 9px 10px;
  border: 0; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.band.urg .ub .g2 { border: 1px solid rgba(255,255,255,.45); }
.band.urg .uw { white-space: pre-wrap; overflow-wrap: anywhere; }
.band.urg + .band.urg { border-top: 1px solid rgba(255,255,255,.35); }
.bub .gotit { border: 0; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bub .gotit:disabled { opacity: .6; }
.pinrow { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.sysline span { white-space: pre-wrap; overflow-wrap: anywhere; }
.rline.note, .line.note { white-space: pre-wrap; overflow-wrap: anywhere; }
.msgbody .alone { padding-left: 16px; padding-right: 16px; }

/* ─── THE CREW MESSAGES, STEP 4 (CALLING THE CREW IN, WEATHER AND SAFETY; the Hub's
   LD-108, Oct 1 2026): the call to come in, its answers and its panel's times, the
   answer given, the snow event's tag, the weather band and the Service's own words,
   I need help now's two screens and its menu item, LIFTED from the phone screens of
   the step's drawing, docs/mockups/crew-messages/crew-messages-step-4.html in the
   Hub's repository, which the owner approved with the plan (its
   docs/notes/crew-messages-snow-safety.md section 13) - each rule as the drawing
   writes it with the drawing's phone frame `.ph` taken off, its menu item `.mi`
   read as the menu's own button, and its time chips `span` the app's buttons. The
   drawing's band's words and button (`.band .bx`, `.band .bb`) and its chips are
   its kit's, lifted with them. Change it on the drawing first, then here; never
   here alone. ─── */
  .band .bx { display: flex; flex-direction: column; gap: 6px; flex: 1; }
  .band .bb { align-self: flex-start; background: #fff; color: #9b1c1c; border-radius: 8px; font-weight: 700; font-size: 13.5px; padding: 6px 12px; }
  .chips { display: flex; gap: 6px; flex-wrap: wrap; }
  .chips button { font-size: 13.5px; font-weight: 700; padding: 7px 12px; border-radius: 9px; border: 1px solid #c9d4ca; background: #fff; color: #2c4a34; }
  .chips button.on { background: #234b34; color: #fff; border-color: #234b34; }
  .come { background: #fff; border: 1px solid #d6e7d8; border-radius: 12px; padding: 12px 13px; display: flex; flex-direction: column; gap: 6px; }
  .come .ck { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #5a6b5c; display: flex; align-items: center; gap: 6px; }
  .come .ck svg { width: 14px; height: 14px; }
  .come .cbig { font-size: 21px; font-weight: 700; line-height: 1.25; color: #1d2b1f; letter-spacing: -.2px; }
  .come .cw { font-size: 14px; color: #34463a; line-height: 1.5; white-space: pre-line; }
  .times { display: flex; flex-direction: column; border-top: 1px solid #edf1ed; }
  .times .tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 7px 2px; border-bottom: 1px solid #edf1ed; font-size: 14px; }
  .times .tr b { font-weight: 700; }
  .times .tr .tt { font-weight: 700; color: #234b34; white-space: nowrap; }
  .times .tr.me { background: #eef6ef; border-radius: 8px; padding-inline: 8px; border-bottom-color: transparent; }
  .times .tr .you { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #1f6a2c; margin-left: 6px; }
  /* THE CALL'S CREWS (the Hub's TODAY'S SITES AND THE DAY'S CREWS, segment four): Your crew, Your sites, Everyone's crews */
  .crewppl { font-size: 14px; color: #1d2b1f; line-height: 1.4; }
  .sitelist { margin: 2px 0 0; padding-left: 22px; font-size: 14px; color: #1d2b1f; line-height: 1.45; }
  .sitelist b { font-weight: 700; }
  /* THE FOLD WITH NO SPACE BENEATH IT CLOSED (the owner, Oct 2 2026: "fixed the extra padding underneath it"): a card's
     flex column gives the closed fold's hidden content a gap of its own, so the fold is a block and its rows space
     themselves */
  .crewfold { display: block; }
  .crewfold > summary { list-style: none; display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; font-weight: 700; color: #2c4a34; }
  .crewfold > summary::-webkit-details-marker { display: none; }
  .crewfold > summary svg { width: 16px; height: 16px; }
  .crewfold[open] > summary svg { transform: rotate(180deg); }
  .crewrow { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid #edf1ed; }
  .crewrow .cn { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; color: #1d2b1f; }
  .crewrow .cdot { width: 10px; height: 10px; border-radius: 50%; background: var(--c, #5a6b5c); flex: none; }
  .crewrow .cm { font-size: 13px; color: #5a6b5c; }
  .crewrow .you { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #1f6a2c; margin-left: 6px; }
  .ask3 { display: flex; flex-direction: column; gap: 8px; }
  .ask3 .aq { font-size: 16px; font-weight: 700; color: #1d2b1f; }
  .ask3 .a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 10px; font-size: 17px; font-weight: 700; border: 1px solid #c9d4ca; background: #fff; color: #2c4a34; }
  .ask3 .a.yes { background: #3a7d44; border-color: #3a7d44; color: #fff; }
  .ask3 .a.late { color: #8a4b06; border-color: #ecc79a; background: #fff7ec; }
  .ask3 .a.no { color: #7f1d1d; border-color: #e7b4ae; }
  .ask3 .a.picked { box-shadow: 0 0 0 3px #8fd49a; }
  .answered { display: flex; flex-direction: column; gap: 4px; background: #eef6ef; border: 1px solid #cfe3d2; border-radius: 12px; padding: 10px 12px; font-size: 14px; color: #1d4d27; }
  .answered b { font-size: 15px; }
  .answered .sm { font-size: 12.5px; color: #3a5a40; }
  .tag4 { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 2px 9px; border-radius: 999px; background: #e4eef7; color: #24527c; }
  .tag4 svg { width: 13px; height: 13px; }
  .tag4.day { background: #e3f2e5; color: #256a30; }
  .band.wx { background: #fdeeda; color: #6b3605; border-bottom: 1px solid #f1d6b3; align-items: center; }
  .band.wx svg { color: #b45309; }
  .band.wx .bb { color: #8a4b06; border: 1px solid #ecc79a; }
  .svc { border-left: 3px solid #b45309; background: #fff; border-radius: 0 9px 9px 0; padding: 8px 11px; font-size: 13.5px; color: #2c3c2e; line-height: 1.5; display: flex; flex-direction: column; gap: 6px; }
  .svc .sk { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #8a4b06; }
  .helpscr { background: #fff5f4; }
  .hbig { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; border-radius: 12px; background: #b42318; color: #fff; font-size: 20px; font-weight: 700; }
  .hbig svg { width: 24px; height: 24px; }
  .h911 { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #e7b4ae; background: #fff; border-radius: 12px; padding: 10px 12px; font-size: 14px; color: #7f1d1d; font-weight: 600; }
  .h911 .c { display: inline-flex; align-items: center; gap: 6px; background: #7f1d1d; color: #fff; border-radius: 9px; padding: 7px 12px; font-weight: 700; white-space: nowrap; }
  .h911 .c svg { width: 16px; height: 16px; }
  .hstat { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid #e2e8e2; border-radius: 12px; padding: 11px 12px; font-size: 14px; }
  .hstat .l { display: flex; align-items: center; gap: 8px; }
  .hstat .l svg { width: 16px; height: 16px; color: #3a7d44; }
  .drop button.help { color: #b42318; background: #fdecea; }
  .drop button.help svg { color: #b42318; }

/* ─── step four on a real phone (not on the drawing) ─── the drawing's pieces adapted
   to real controls, adding nothing to the look: the answers, Change my answer, the
   chips, the band's Open, Send for help now and the calls are real buttons and links
   with the drawing's own looks; a call's parts held together as the screen spaces its
   cards; the Service's words and the work kept as written; an ended warning dimmed as
   the drawing's P8 dims it; the paragraph under Send for help? as P11 writes it; and
   I need help now in the alert menu and at the top of Messages in the menu item's own
   colours. */
.callbox { display: flex; flex-direction: column; gap: 10px; align-self: stretch; }
.ask3 .a { width: 100%; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ask3 .a svg { width: 20px; height: 20px; flex: none; }
.ask3 .a:disabled { opacity: .6; }
.chips button { font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.band.wx .bb { font-family: inherit; cursor: pointer; flex: none; -webkit-tap-highlight-color: transparent; }
.band.wx .bx b, .band.wx .bx span { overflow-wrap: anywhere; }
.svc span { white-space: pre-wrap; overflow-wrap: anywhere; }
.come .cw { overflow-wrap: anywhere; }
.bub.ended { opacity: .7; }
.hlead { font-size: 15px; color: #3a1c19; margin: 0; }
.hbig { width: 100%; border: 0; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hbig:disabled { opacity: .6; }
.h911 .c { text-decoration: none; }
.hstat .l svg { flex: none; }
.btn.help { color: #b42318; background: #fdecea; border-color: #e7b4ae; }
.btn.help svg { color: #b42318; }
/* the answer in the card's place on Today and Clock in (the drawing's P4): the
   call's title above the answer given, in the card's own look (`.qcard .ql`) */
.answered .ql { font-size: 12.5px; font-weight: 700; color: #234b34; }
/* TODAY'S SITES (the Hub's TODAY'S SITES AND THE DAY'S CREWS, segment two,
   Oct 2 2026): frame 4 and 5's own classes, LIFTED from the blessed drawing
   docs/mockups/todays-crews.html in the Hub's repository (its `.ph .acc.mine`,
   `.ph .who`, `.ph .pill.under` and `.ph .hintline`, blessed with LD-110):
   the person's crew edged in the crew's colour, the crew's people beneath its
   heading, the amber "Under way", and the dashed line of a day nobody set.
   "Your crew" is the kit's pill-absent, the drawing's --new pair exactly; done
   and not done the kit's pill-done and pill-refused. */
.acc.mine { border-color: var(--c, #e2e8e2); box-shadow: inset 4px 0 0 var(--c, transparent); }
.acc .who { font-size: 12.5px; color: #3a4a3c; padding: 0 0 8px; }
.pill-under { background: #fdf3dc; color: #8a5a06; }
.acc-t .pill-crew { margin-left: 8px; }
.nm .pill-site { margin-left: 6px; vertical-align: 1px; }
.hintline { font-size: 13px; color: #5a6b5c; background: #fff; border: 1px dashed #c9d4ca; border-radius: 10px; padding: 9px 11px; margin: 0; }

/* ─── THE CREW MESSAGES, STEP 5 (PHOTOS, VOICE MESSAGES, FILES AND PLACES; the Hub's
   LD-108 ruling 1's fifth step, Oct 2 2026): a photo in a message and several two to
   a row, one still on its way, the photos and the recording waiting above the box
   with their X, the recording bar, the player and the written copy, the office's
   file and the small map of a place, LIFTED from the phone screens of the step's
   drawing, docs/mockups/crew-messages/crew-messages-step-5.html in the Hub's
   repository, which the owner approved with the plan (its docs/notes/crew-messages-media.md
   section 13) - each rule as the drawing writes it with the drawing's phone frame
   `.ph` taken off, and its bubble's side `.out` the app's `.mine`. The drawing's two
   other stand-in photos (`.shot.b`, `.shot.c`), its waveform and its viewer are not
   lifted: a real photo is drawn, and the viewer is the job screen's own. Change it on
   the drawing first, then here; never here alone. ─── */
  .shot { display: block; border-radius: 10px; min-height: 120px; background: linear-gradient(135deg, #7d8f6a, #4f6444 55%, #8a7a5e); position: relative; }
  .shot.sm { min-height: 0; height: 64px; width: 64px; flex: none; }
  .shots { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .shots .shot { min-height: 86px; }
  .pend { display: flex; align-items: center; gap: 8px; min-height: 64px; border-radius: 10px; border: 1px dashed #b9c6ba; padding: 10px 12px; font-size: 13px; color: #3a4a3c; background: #f6f9f6; }
  .tray { display: flex; gap: 8px; padding: 10px 12px 0; background: #fff; border-top: 1px solid #e2e8e2; flex-wrap: wrap; align-items: center; }
  .tray .tx { position: relative; }
  .tray .tx .xx { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 999px; background: #1d2b1f; color: #fff; display: flex; align-items: center; justify-content: center; }
  .tray .tx .xx svg { width: 12px; height: 12px; }
  .tray + .comp { border-top: 0; }
  .vplay { display: flex; align-items: center; gap: 10px; }
  .vplay .pb { width: 34px; height: 34px; border-radius: 999px; background: #eef3ee; color: #2c4a34; display: flex; align-items: center; justify-content: center; flex: none; }
  .bub.mine .vplay .pb { background: rgba(255,255,255,.18); color: #fff; }
  .vplay .pb svg { width: 16px; height: 16px; }
  .vplay .vt { font-size: 12.5px; font-variant-numeric: tabular-nums; }
  .wcopy { font-size: 13.5px; line-height: 1.45; border-left: 3px solid #c9d4ca; padding-left: 8px; }
  .bub.mine .wcopy { border-left-color: rgba(255,255,255,.5); }
  .wcopy i { font-style: normal; font-weight: 700; display: block; font-size: 11.5px; letter-spacing: .3px; }
  .wcopy.wait { color: #5a6b5c; font-style: italic; }
  .bub.mine .wcopy.wait { color: rgba(255,255,255,.8); }
  .recbar { display: flex; align-items: center; gap: 10px; padding: 10px 12px 12px; background: #fff; border-top: 1px solid #e2e8e2; }
  .recbar .rdot { width: 12px; height: 12px; border-radius: 999px; background: #dc2626; flex: none; box-shadow: 0 0 0 4px rgba(220,38,38,.18); }
  .recbar .rt { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
  .recbar .stop { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: #dc2626; color: #fff; font-weight: 700; font-size: 14.5px; }
  .recbar .stop svg { width: 15px; height: 15px; }
  .recbar .cx { width: 38px; height: 38px; border-radius: 999px; background: #eef3ee; color: #2c4a34; display: flex; align-items: center; justify-content: center; }
  .fcard { display: flex; align-items: center; gap: 10px; border: 1px solid #d5ddd5; border-radius: 10px; padding: 9px 10px; background: #f6f9f6; color: #1d2b1f; }
  .fcard .fi { width: 34px; height: 40px; border-radius: 6px; background: #e3f2e5; color: #256a30; display: flex; align-items: center; justify-content: center; flex: none; }
  .fcard .fn { font-size: 14px; font-weight: 700; line-height: 1.3; }
  .fcard .fs { font-size: 12px; color: #5a6b5c; }
  .fcard .mapbtn { margin-left: auto; }
  .pmap { height: 110px; border-radius: 10px; position: relative; border: 1px solid #dfe5dc; background:
    linear-gradient(0deg, transparent 55%, #d9dfd4 55%, #d9dfd4 60%, transparent 60%),
    linear-gradient(90deg, transparent 38%, #e6e1cf 38%, #e6e1cf 42%, transparent 42%),
    linear-gradient(90deg, transparent 76%, #d9dfd4 76%, #d9dfd4 79%, transparent 79%), #eef1e9; overflow: hidden; }
  .pmap .pdrop { position: absolute; left: 47%; top: 28%; width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #b42318; border: 2px solid #fff; }
  .pmap .you { position: absolute; left: 50%; top: 46%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 999px; background: #2f6fd6; border: 3px solid #fff; }
  .pmap .acc { position: absolute; left: 50%; top: 46%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 999px; background: rgba(47,111,214,.14); border: 1px solid rgba(47,111,214,.4); }

/* ─── step five on a real phone (not on the drawing) ─── the drawing's pieces adapted
   to real controls, adding nothing to the look: a photo is a real picture filling
   its place (several cropped to their squares), the X, the player's button, Stop
   and the recording's X real buttons with the drawing's own looks, a file's name and
   size held together and kept as written, the copy kept as written, the voice's
   length clear of its X in the tray, the line above the box (words 15 and 20) in the
   look of step three's line above an office-only box, and the small map a real map
   from the Hub's map kit - its pictures centred on the place, the dot and its ring
   and a dropped place's pin on the place itself. */
.shot { width: 100%; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.shot img { display: block; width: 100%; height: auto; }
.shots .shot img { height: 100%; min-height: 86px; object-fit: cover; }
img.shot.sm { object-fit: cover; cursor: default; }
.pend { overflow-wrap: anywhere; }
.tray .tx .xx { border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tray .tx .vplay { padding-right: 18px; }
.vplay .pb { border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.recbar .cx { border: 0; padding: 0; cursor: pointer; flex: none; -webkit-tap-highlight-color: transparent; }
.recbar .stop { border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.msgfoot .recbar { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.wcopy { white-space: pre-wrap; overflow-wrap: anywhere; }
.fcard .fx { display: flex; flex-direction: column; min-width: 0; }
.fcard .fn { overflow-wrap: anywhere; }
.fcard .mapbtn { cursor: pointer; }
.mnote { padding: 6px 12px 0; font-size: 12.5px; color: #5a6b5c; margin: 0; }
.pmap .pml { position: absolute; left: 50%; top: 0; width: 640px; margin-left: -320px; }
.pmap .you, .pmap .acc { top: 50%; }
.pmap .pdrop { left: calc(50% - 9px); top: calc(50% - 22px); }
/* The credit Esri requires, whole, on a small map: at the map kit's own 10px it
   wrapped to three or four lines on the 84px map in a message and covered the
   pin or the phone's dot at 320, 360 and 390 pixels wide (the Hub's browser
   drive, Oct 2 2026; its docs/notes/crew-messages-media.md section 24); at 8px
   it keeps to the bottom and leaves the point clear at each. Two classes, as
   public/mapkit.css loads after this file (index.html) and its `.map .attrib`
   would otherwise keep its own size. */
.map.pmap .attrib { font-size: 8px; line-height: 1.2; padding: 0 3px; left: 2px; right: 2px; bottom: 1px; }

/* ─── THE CREW MESSAGES, STEP 6 (CORRECTIONS, QUICK ANSWERS, SHARED PHOTOS AND IPHONE
   NOTIFICATIONS; the Hub's LD-108, Oct 2 2026): "Corrected" beside a message's time
   and the screen that chooses where shared photos go, LIFTED from the phone screens of
   the step's drawing, docs/mockups/crew-messages/crew-messages-step-6.html in the Hub's
   repository, which the owner approved with its words ("As recommended"; its
   docs/notes/crew-messages-corrections.md section 12) - each rule as the drawing
   writes it with the drawing's phone frame `.ph` taken off. Its stand-in photo
   (`.shot.b`), share sheet and notification shade are not lifted: a real photo is
   drawn, and the share sheet and the shade are the phone's own. Change it on the
   drawing first, then here; never here alone. ─── */
  .bub .stamp .corr { font-weight: 700; }
  .pick { padding: 14px 14px 18px; display: flex; flex-direction: column; gap: 10px; }
  .pick .shots3 { display: flex; gap: 6px; }
  .pick .shots3 .shot { width: 72px; height: 72px; min-height: 0; flex: none; }
  .pick h5 { margin: 4px 0 0; font-size: 17px; font-weight: 700; }
  .pick .ln { font-size: 13.5px; color: #43554a; margin: 0; }
  .pick .cvs { background: #fff; border: 1px solid #e2e8e2; border-radius: 12px; overflow: hidden; }
  .pick .cvs .cv2 { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-top: 1px solid #edf1ed; font-size: 14.5px; }
  .pick .cvs .cv2:first-child { border-top: 0; }
  .pick .cvs .cv2 b { font-weight: 700; }
  .pick .cvs .cv2 .sub3 { display: block; font-size: 12px; color: #5a6b5c; }
  .pick .cvs .cv2 svg.go { margin-left: auto; color: #8a9a8d; }

/* ─── step six on a real phone (not on the drawing) ─── the drawing's rows are real
   buttons with the drawing's own look (the whole row a tap); the photos wrap when
   more than four are shared, each a real picture cropped to its square; a row's
   words hold together beside the avatar and a long last line stays inside it. */
.pick .cvs .cv2 { width: 100%; border-left: 0; border-right: 0; border-bottom: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pick .cvs .cv2:first-child { border-top: 0; }
.pick .cvs .cv2 .cvt { display: flex; flex-direction: column; min-width: 0; }
.pick .cvs .cv2 .sub3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick .cvs .cv2 svg.go { flex: none; width: 18px; height: 18px; }
.pick .shots3 { flex-wrap: wrap; }
.pick .shots3 img.shot { object-fit: cover; }

/* ─── THE OWNER'S WALK OF OCT 6 2026 (the Hub's docs/notes/crew-smoke-corrections.md) ───
   "Not finished – same reason for all" spans the card's width, where the pair's
   two-column grid held it in one half; the empty Services completed line keeps a
   row's own height and padding, where it sat against the fold's edge. */
.yn.yn-one { grid-template-columns: minmax(0, 1fr); }
/* THE WORDS ONE LABEL BESIDE THE ICON (the owner, Oct 6 2026: "the button icons I
   asked you to add are cramped and not following other button icon
   conventions"): the label shrinks to its words, so the pair - icon and words -
   centres together as on Yes and No and the job screen's foot, and words that must
   wrap on the narrowest phone (320 px) start beside the icon, never apart from it;
   "Not finished" over "Same reasons" reads as one block beside its icon. */
.yn button .ynl { min-width: 0; text-align: left; }
.yn button .ynl-two { line-height: 1.25; }
.acc-body > .meta.empty { display: flex; align-items: center; min-height: 48px; padding: 8px 0; }
/* ─── EVERY SITE ON THE DAY IS ACCOUNTED FOR (the Hub's LD-116, Oct 8 2026) ───
   A site the crew said will not be done today: its pill in the office's own
   purple (the Hub's crew map, #6b46c1 on #efe9fb), its reason beneath; the
   next site's Yes is its directions, a link drawn as the kit's Yes and No. */
.pill-nottoday { background: #efe9fb; color: #6b46c1; }
.yn a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px;
  font-size: 17px; font-weight: 700; border-radius: 9px; border: 1px solid #c9d4ca; background: #fff; color: #2c4a34; text-decoration: none; }
.yn a svg { width: 20px; height: 20px; }
/* ─── A DONE SITE'S WORDS FADED (the owner, Oct 12 2026: "fade the text for the
   done sites so it's easier to see which ones are done") ───
   On Today's Sites, a site the Hub marks done draws its number, name, address
   and lines in the kit's empty-field grey; its Done pill and its Map and Start
   buttons keep their own colours. */
.row.is-done .num, .row.is-done .rname, .row.is-done .rname .addr,
.row.is-done .rline, .row.is-done .rline .lab { color: #9aa79b; }