/* ===========================================================================
   PREPLANS - Direction A, docs first            (Donald + Brad, 2026-09-29)
   ===========================================================================
   docs/preplans/IDEAS.md A1-A4. Started from the mockup harness (branch
   mock/preplans, docs/preplans/mockups/harness/preplans-mock.css) without its
   iPhone chrome and without directions B and C. App tokens only. */
:root{--pp-red:#d7261e;--pp-yel:#f5c400;--pp-ok:#45b183}

/* shared */
.pp-code{font:700 .8rem/1 var(--font-mono);color:var(--muted2);background:var(--pill);border-radius:6px;padding:4px 6px;letter-spacing:.05em;flex-shrink:0}
.pp-r-t{display:block;font-weight:700;font-size:.9375rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-r-s{display:block;font:500 .8rem/1.45 var(--font-mono);color:var(--muted);letter-spacing:.03em;margin-top:2px}
.pp-r-s.pp-ok{color:#7fbfa3}
.pp-r-s.pp-warn{color:#f3d27a}
.pp-r-s.pp-pri{color:#f3d27a}
.pp-chev{margin-left:auto;color:var(--muted);font-size:20px;flex-shrink:0}
.pp-sec{font:700 .8rem/1 var(--font-mono);color:var(--muted);letter-spacing:.1em;text-transform:uppercase;padding:14px 20px 8px}
.pp-err{margin:12px 20px;color:#f3a38f;font-size:.8125rem;line-height:1.4}
.pp-tag{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 9px;background:var(--card);color:var(--muted2);font:600 .8rem/1 var(--font-mono);letter-spacing:.04em;white-space:nowrap}
.pp-tag.ok{color:#9fdcc0;background:rgba(69,177,131,.12)}
.pp-tag.warn{color:#f3d27a;background:rgba(232,185,58,.12)}
.pp-btn{display:flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:14px;padding:15px;font:700 .9375rem/1 var(--font);width:100%;touch-action:manipulation}
.pp-btn.pri{background:var(--acc);color:var(--acc-ink)}
.pp-btn.sec{background:var(--card);color:var(--text)}
.pp-btn:disabled{opacity:.6}
.pp-act{border:none;border-radius:10px;padding:0 12px;min-height:44px;background:var(--card);color:var(--text);font:700 .8rem/1 var(--font);white-space:nowrap;flex-shrink:0;touch-action:manipulation}
.pp-act.pri{background:var(--acc);color:var(--acc-ink)}
.pp-act.del{color:var(--fire)}
/* calConfirm (calendar-ticks.js) is the app's one confirm dialog, at z 210/211,
   under the viewer (420). Raise it so "Publish this preplan?" is visible.
   It is modal, so topmost everywhere is right. */
#cal-confirm-overlay{z-index:460}
#cal-confirm{z-index:461}

.pp-libbar{display:flex;align-items:center;gap:8px;min-height:44px;width:calc(100% - 40px);margin:0 20px 10px;padding:10px 12px;border:none;border-radius:12px;background:var(--card);color:var(--muted2);font:600 .8rem/1.3 var(--font);text-align:left;touch-action:manipulation}
.pp-libbar b{color:var(--text)}
.pp-libbar .sp{margin-left:auto;font:500 .8rem/1 var(--font-mono);color:var(--muted);letter-spacing:.04em}
.pp-search{border-bottom:1px solid var(--bdr);margin-bottom:6px}
.pp-hint-line{padding:14px 20px 4px;line-height:1.5}

/* rows (chooser, library, search) */
.pp-lr{display:flex;gap:12px;align-items:center;width:100%;padding:11px 20px;background:none;border:none;color:inherit;font:inherit;text-align:left;touch-action:manipulation}
.pp-lr + .pp-lr{border-top:1px solid var(--bdr)}
.pp-lr-b{min-width:0;flex:1}

/* sheets */
.pp-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:450}
.pp-sheet{position:fixed;left:0;right:0;bottom:0;z-index:451;max-height:85vh;overflow-y:auto;background:var(--bg2);border-radius:20px 20px 0 0;box-shadow:0 -12px 48px rgba(0,0,0,.5);padding:8px 0 calc(var(--sab) + 12px)}
.pp-grab{width:38px;height:5px;border-radius:3px;background:#3a3f4a;margin:0 auto 10px}
.pp-sh-head{display:flex;align-items:flex-start;gap:12px;padding:4px 20px 12px}
.pp-sh-title{font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.pp-sh-sub{font:500 .8rem/1.4 var(--font-mono);color:var(--muted);letter-spacing:.04em;margin-top:3px;text-transform:uppercase}
.pp-x{margin-left:auto;background:var(--pill);border:none;color:var(--muted2);width:44px;height:44px;border-radius:50%;font-size:18px;flex-shrink:0}
.pp-form{padding:0 20px 8px;display:flex;flex-direction:column;gap:6px}
.pp-form .srch-inp{width:100%}
.pp-lbl{font:700 .8rem/1 var(--font-mono);color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:8px}
.pp-hint{font-size:.8rem;color:var(--muted);line-height:1.4}
.pp-form .pp-err{margin:4px 0}
.pp-form .pp-btn{margin-top:10px}

/* A2: document viewer */
.pp-viewer{position:fixed;inset:0;z-index:420;background:#0a0b0d;display:flex;flex-direction:column}
.pp-v-top{padding:calc(var(--sat) + 8px) 12px 8px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--bg)}
.pp-v-back{background:var(--card);border:none;color:var(--text);width:44px;height:44px;border-radius:12px;font-size:22px;flex-shrink:0}
.pp-v-hd{min-width:0;flex:1}
.pp-v-t{font-weight:700;font-size:.9375rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-v-s{font:500 .8rem/1.3 var(--font-mono);color:var(--muted);letter-spacing:.05em;text-transform:uppercase;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Map queue M3: who published it and when (its own line under the page
   line) - a name, so it wraps rather than being cut, in its own capitals. */
.pp-v-stamp{font:500 .8rem/1.3 var(--font-mono);color:var(--muted);letter-spacing:.02em;margin-top:2px}
.pp-v-stamp:empty{display:none}
.pp-v-act{display:flex;gap:6px}
/* the actions get their own row, so the preplan's name keeps the full width */
.pp-v-act:not(:empty){flex-basis:100%;justify-content:flex-end}
.pp-v-status{display:flex;gap:6px;flex-wrap:wrap;padding:0 12px 8px;background:var(--bg)}
.pp-page-wrap{flex:1;position:relative;overflow:hidden;background:#0a0b0d;touch-action:none}
.pp-page{position:absolute;background:#f6f3ec;box-shadow:0 10px 40px rgba(0,0,0,.6);border-radius:3px;overflow:hidden;transform-origin:50% 50%;will-change:transform}
.pp-page canvas,.pp-page img{display:block}
.pp-page .pp-err{margin:16px;color:#7a2320}
.pp-note-page{padding:24px;color:#1b1d22;font:500 14px/1.5 var(--font);white-space:pre-wrap;overflow:auto;height:100%;box-sizing:border-box}
.pp-empty-doc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--muted2);font-size:.875rem;line-height:1.5}
.pp-zoom{position:absolute;right:12px;top:10px;background:rgba(14,15,18,.85);color:var(--muted2);font:600 .8rem/1 var(--font-mono);padding:6px 9px;border-radius:999px;letter-spacing:.05em;pointer-events:none}
.pp-jump{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:10px 12px 6px;background:var(--bg)}
.pp-jump:empty{display:none}
.pp-jc{background:var(--card);color:var(--muted2);border:none;border-radius:999px;padding:0 14px;min-height:44px;font:600 .8rem/1 var(--font);white-space:nowrap;flex-shrink:0;touch-action:manipulation}
.pp-jc.on{background:var(--acc);color:var(--acc-ink);font-weight:700}
.pp-strip{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:6px 12px 8px;background:var(--bg)}
.pp-strip:empty{display:none}
.pp-st{width:46px;height:58px;border-radius:6px;border:none;padding:0;background:#f4f1ea;flex-shrink:0;overflow:hidden;position:relative;opacity:.75}
.pp-st.on{opacity:1;box-shadow:0 0 0 2px var(--acc)}
.pp-st canvas,.pp-st img{width:100%!important;height:100%!important;object-fit:cover;display:block}
.pp-st i{position:absolute;bottom:2px;right:3px;font:700 12px/1 var(--font-mono);color:#555;font-style:normal}
.pp-v-bot{display:flex;gap:8px;padding:6px 12px calc(var(--sab) + 12px);background:var(--bg)}
.pp-v-bot button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;background:var(--card);color:var(--text);border:none;border-radius:13px;padding:13px 6px;min-height:44px;font:600 .8125rem/1 var(--font);touch-action:manipulation}
.pp-v-bot button[hidden]{display:none}
.pp-v-bot button:disabled{color:var(--muted);opacity:.6;cursor:default}

/* A3: map layer */
.pp-sym{background:none!important;border:none!important}
.pp-sym svg{display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.pp-hyd{display:flex;align-items:center;gap:3px}
/* the hydrant label is .pp-hlbl (preplans-map.js); .pp-lbl is the form label above */
.pp-hlbl{background:rgba(10,11,13,.82);color:#fff;font:700 12px/1 var(--font-mono);padding:2px 4px;border-radius:4px;white-space:nowrap;letter-spacing:.03em}
.pp-docpin{width:24px;height:24px;border-radius:7px;background:#f6f3ec;border:2.5px solid var(--pp-ok);display:flex;align-items:center;justify-content:center;color:#1b1d22;box-shadow:0 2px 6px rgba(0,0,0,.6);box-sizing:border-box}
.pp-docpin.draft{border-color:#8a94a4}
.pp-layer-btn{position:absolute;right:10px;top:10px;z-index:7;display:flex;align-items:center;gap:6px;background:rgba(14,15,18,.9);border:1px solid rgba(160,180,215,.14);color:var(--text);border-radius:999px;padding:0 12px 0 10px;min-height:44px;font:700 .8rem/1 var(--font);letter-spacing:.02em;box-shadow:0 4px 14px rgba(0,0,0,.45);touch-action:manipulation}
.pp-layer-btn .sw{width:26px;height:15px;border-radius:9px;background:var(--pill);position:relative;transition:background .15s}
.pp-layer-btn .sw::after{content:'';position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;background:var(--muted2);transition:left .15s}
.pp-layer-btn.on .sw{background:var(--acc)}
.pp-layer-btn.on .sw::after{left:13px;background:#0e0f12}
.pp-card{position:absolute;left:10px;right:10px;bottom:10px;z-index:8;background:rgba(24,27,33,.98);border-radius:18px;padding:14px;box-shadow:0 10px 36px rgba(0,0,0,.6)}
.pp-card-h{display:flex;gap:11px;align-items:flex-start}
.pp-card-b{flex:1;min-width:0}
.pp-card-t{font-weight:800;font-size:.9375rem;letter-spacing:.01em;color:var(--text)}
.pp-card-s{font-size:.8rem;color:var(--muted2);margin-top:3px;line-height:1.4}
.pp-card-m{font:500 .8rem/1.4 var(--font-mono);color:var(--muted);letter-spacing:.04em;margin-top:6px;text-transform:uppercase}
.pp-card-a{display:flex;gap:8px;margin-top:12px}
.pp-card-a button{flex:1;border:none;border-radius:12px;padding:11px 6px;min-height:44px;font:700 .8rem/1 var(--font);background:var(--pill);color:var(--text)}
.pp-card-a button.pri{background:var(--acc);color:var(--acc-ink)}
.pp-leg{display:inline-flex;align-items:center;gap:4px;font-size:.8rem;color:var(--muted)}
/* Map queue M1 (Donald + Brad, 2026-09-29): the card's close clears the
   selected preplan; the distance block says what the numbers measure. */
.pp-card-x{position:absolute;top:4px;right:4px;width:44px;height:44px;border:none;border-radius:50%;background:transparent;color:var(--muted2);font:400 1.375rem/1 var(--font);display:flex;align-items:center;justify-content:center;touch-action:manipulation}
.pp-card-x:active{background:var(--pill)}
.pp-card-h{padding-right:34px}
.pp-card-d{margin-top:10px;padding-top:9px;border-top:1px solid var(--bdr)}
.pp-card-dt{font-size:.8rem;font-weight:700;color:var(--text);line-height:1.35}
.pp-hlbl.sel{background:var(--acc);color:var(--acc-ink)}
/* map queue M2: the stored distances' "By road = ..." explanation under the nearest three */
.pp-card-note{color:var(--muted);font-size:.8rem;margin-top:4px}
/* fix round 1: whose distances these are, on the map for as long as the
   preplan is selected (below the status line, clear of the zoom buttons) */
.pp-selchip{position:absolute;top:96px;left:50%;transform:translateX(-50%);z-index:7;width:max-content;max-width:calc(100% - 120px);background:rgba(14,15,18,.92);border:1.5px solid var(--acc);color:var(--text);border-radius:12px;padding:5px 10px;font:500 .8rem/1.35 var(--font);text-align:center;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.pp-selchip b{color:var(--acc);font-weight:800}

/* A4: library */
.pp-lib{position:fixed;inset:0;z-index:400;background:var(--bg);display:flex;flex-direction:column}
.pp-lib-h{padding:calc(var(--sat) + 8px) 20px 6px;display:flex;align-items:center;gap:10px}
.pp-lib-h .t{font-size:1.375rem;font-weight:700;letter-spacing:-.02em;flex:1;color:var(--text)}
.pp-lib-s{padding:4px 20px 10px}
.pp-lib-s .srch-inp{width:100%}
.pp-seg{display:flex;flex-wrap:wrap;gap:6px;padding:0 20px 10px}
.pp-seg .rng-btn{padding:8px 12px;flex-shrink:0}
.pp-lib-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(var(--sab) + 16px)}
.pp-count{font:600 .8rem/1 var(--font-mono);color:var(--muted);letter-spacing:.08em;text-transform:uppercase;padding:4px 20px 8px}
.pp-empty{margin:6px 20px 10px;border-radius:16px;padding:14px;box-shadow:inset 0 0 0 1.5px var(--pill)}
.pp-ql-a{display:flex;gap:8px;margin-top:12px}
.pp-ql-a button{flex:1;border:none;border-radius:12px;padding:12px 6px;font:700 .8125rem/1 var(--font);background:var(--pill);color:var(--text);touch-action:manipulation}
.pp-ql-a button.pri{background:var(--acc);color:var(--acc-ink)}
.pp-scriptfail{margin:8px 16px;padding:8px 12px;border:1px solid var(--fire);border-radius:8px;color:var(--fire);font-size:13px;line-height:1.35;font-weight:600}