/* pages/drawings.css — the drawings component's styles (split out of drawings.html on 2026-10-10: that file was 463
   lines, over the 400-line cap, Commandment XVII). MIRRORED with drawings.html, drawings-viewer.js and
   drawings-quality.js: a host copies all four at build, and prove-drawings-mirror fails on drift. */
/* SITESYNC HOUSE STYLE. Mark, 2026-09-05: "we need to get consistency between all the
   apps... so they're recognizable as part of the same system. Similar, with tabs fixed to
   the top." Tokens, lockup and tab shapes are pocket's, unchanged, so the crew app and the
   iPad read as one system rather than two things that happen to share a door. A general
   look review across all the apps is owed separately. */
:root{--bg:#f5f7f9;--face:#fff;--ink:#2d3748;--mut:#718096;--line:#e0e5ea;--brand:#0f6e5a;--alert:#b42318;
--first:#5bc0de;--second:#1a8a7a;--sanware:#b45309;--finals:#912018;--ashp:#667085;--fill:#e0b400;--wait:#718096;
--amber:#fff4d6;--amberline:#e0b64f}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);
font:16px/1.45 -apple-system,system-ui,sans-serif;padding:var(--navh,52px) 0 40px}
h1{font-size:15px;letter-spacing:.2em;color:var(--brand);margin:0;font-weight:800}
.sub{font-size:11px;color:var(--mut);letter-spacing:.1em}
/* THE BAR IS PINNED. A plumber scrolls a long drawing list one-handed on a landing; the
   plot and the tabs must never scroll away from the thumb. */
.top{position:sticky;top:var(--navh,52px);z-index:3;background:var(--bg);padding:12px 14px 8px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.brand .sub{margin-bottom:0}
.row{display:flex;gap:8px;align-items:center}
input[type=text]{border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit;background:var(--face)}
#plot{width:5.5em;font-size:19px;font-weight:700;text-align:center}
#who{font-size:12px;color:var(--mut);flex:1}
.chips{display:flex;gap:6px;overflow-x:auto;padding:8px 0 2px;-webkit-overflow-scrolling:touch}
.chip{flex:0 0 auto;padding:7px 11px;border-radius:12px;border:1px solid var(--line);background:var(--face);font-weight:600;font-size:14px}
.chip.on{background:var(--brand);color:#fff;border-color:var(--brand)}
/* THE APP TABS OUTRANK THE DOCUMENT. Mark, 2026-09-05: "quality tab, once in, can't get
   out... leave other tabs fixed at top so can navigate wherever needed." A full-screen
   viewer that hides the only way out is a trap, and "close" is not obvious when the thing
   filling the screen is a document somebody expected to be a page. The nav is fixed above
   the viewer, so wherever you are, the four tabs are there. */
.appnav{position:fixed;top:0;left:0;right:0;z-index:12;display:flex;gap:6px;
padding:8px 14px calc(8px + env(safe-area-inset-bottom,0px));background:var(--bg);
border-bottom:1px solid var(--line);padding-top:max(8px,env(safe-area-inset-top))}
.appnav a,.appnav span{flex:1;text-align:center;padding:9px 4px;border-radius:9px;font-size:13px;font-weight:700;
text-decoration:none;color:var(--mut);background:var(--face);border:1px solid var(--line);line-height:1.4}
.appnav .on{background:var(--brand);color:#fff;border-color:var(--brand)}
.tabs{display:flex;gap:8px;margin-top:10px}
.tabs button{flex:1;text-align:center;background:var(--face);border:1px solid var(--line);border-radius:10px;
padding:10px 4px;color:var(--ink);font:inherit;font-size:13px;font-weight:600}
.tabs button.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.tabs .hosttab{flex:1;text-align:center;background:var(--face);border:1px solid var(--line);border-radius:10px;
padding:10px 4px;color:var(--ink);text-decoration:none;font-size:13px;font-weight:600;line-height:1.5}
main{padding:12px 14px 0}
.card{background:var(--face);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:12px}
.note{font-size:13px;color:var(--mut)}
.warn{background:var(--amber);border-color:var(--amberline)}
.err{color:var(--alert);font-weight:600}
.pg{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.pg:first-of-type{border-top:0}
.pg b{font-size:15px}
.pg .pick{width:24px;height:24px;flex:0 0 24px;accent-color:var(--brand)}
.pg .left{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.kept{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;color:var(--brand);
border:1px solid var(--brand);border-radius:8px;padding:1px 6px;vertical-align:2px}
#keepbar{position:sticky;bottom:0;display:none;gap:8px;padding:10px 0 14px;background:linear-gradient(transparent,var(--bg) 28%)}
#keepbar.on{display:flex}
#keepbar button{flex:1;border:0;border-radius:10px;padding:12px;font:inherit;font-weight:700;color:#fff;background:var(--brand)}
#keepbar button.ghost{background:var(--face);color:var(--ink);border:1px solid var(--line);max-width:100px}
.offbanner{background:var(--amber);border-color:var(--amberline)}
.pg button{border:0;border-radius:10px;padding:10px 16px;font:inherit;font-weight:700;color:#fff;background:var(--brand)}
#ask{display:flex;gap:8px;margin-bottom:12px}#ask input{flex:1}
#ask button{border:0;border-radius:10px;padding:10px 16px;font:inherit;font-weight:700;color:#fff;background:var(--brand)}
/* BELOW THE NAV, NEVER OVER IT. inset:0 put the viewer at the very top and its own bar
   ended up hidden behind the pinned tabs — the document filled the screen with no
   visible way out, which is the trap Mark hit on the quality tab. */
#viewer{position:fixed;top:var(--navh,55px);left:0;right:0;bottom:0;background:#222;display:none;flex-direction:column;z-index:9}
#viewer.on{display:flex}
/* flex:0 0 auto — in a column flexbox the bar will SHRINK to nothing given the chance, and
   it did the moment the viewer stopped being full-height: the close button and the zoom
   controls were squeezed to a sliver. The controls must never be the thing that gives way. */
#viewer .bar{flex:0 0 auto;display:flex;gap:10px;align-items:center;padding:9px 12px;color:#fff;background:#111;font-size:13px}
#viewer .bar b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
#viewer .bar button,#viewer .bar a{color:#fff;font:inherit;background:#333;border:0;border-radius:8px;padding:8px 12px;text-decoration:none;font-weight:600}
#vpane{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;background:#222;padding:10px 0 30px}
/* A HOST MAY PUT A STANDING NOTE ABOVE ITS QUALITY DOCUMENT, and one or more links out
   to documents it does not ship. Mark, 2026-09-08: "renelec's standards must be adhered to,
   in addition to these, site specific quality items are as follows". The company standard is
   111 pages on somebody else's SharePoint and changes on their schedule, so it is LINKED, not
   copied — a stale copy of a standard is worse than no copy. The site-specific set stays a
   local file and still opens with no signal; the link needs one, which is why the note says
   which is which rather than pretending they are the same kind of thing. Content comes from
   the host's /quality.json, so this page still knows nothing about any particular company. */
#qcnote{display:none;padding:14px 16px 4px;max-width:52em;margin:0 auto}
#qcnote.on{display:block}
#qcnote a.ext{display:block;background:#1e3330;border:1px solid #2a4a45;border-radius:8px;
  padding:13px 15px;margin:0 0 12px;color:#e8f0ef;text-decoration:none;font:600 16px/1.3 system-ui}
#qcnote a.ext:active{background:#26403c}
#qcnote a.ext i{display:block;font:400 13px/1.35 system-ui;color:#9fb5b1;font-style:normal;margin-top:3px}
#qcnote p{margin:0 0 12px;font:15px/1.45 system-ui;color:#c9d6d3}
#qcnote hr{border:0;border-top:1px solid #2a4a45;margin:14px 0 0}
/* THE STAGE SUB-TABS (Mark, 2026-09-15). Order is 1st fix, 2nd fix, finals, air source —
   the sequence a plumber MEETS THE WORK IN, which is not the order the source documents
   list themselves in. Ruled deliberately against following the documents. */
#qcstages{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
#qcstages button{flex:1 1 auto;min-width:8.5em;text-align:center;background:#1e3330;
  border:1px solid #2a4a45;border-radius:10px;color:#dfeae8;font:600 15px/1.2 system-ui;
  padding:9px 8px;cursor:pointer}
#qcstages button.on{background:#0f6e5a;border-color:#0f6e5a;color:#fff}
#qcstages button i{display:block;font-style:normal;font:400 12px/1.3 system-ui;color:#9fb5b1;margin-top:3px}
#qcstages button.on i{color:#cfe8e1}
/* ── ACKNOWLEDGEMENT MARKERS. The badge has to read at arm's length on a phone held in a wet
   glove, so it is a solid block of colour, not a dot — and it is the one warm colour on this
   surface, which is otherwise all greens, so nothing else competes with it. */
.qcupd{display:inline-block;background:#c1502e;color:#fff;font:700 10px/1 system-ui;
  letter-spacing:.08em;padding:3px 5px;border-radius:3px;margin-left:6px;vertical-align:middle}
#qcread{display:none}#qcread.on{display:block;margin:10px 0 0;padding:12px 14px;background:#16302b;border-radius:12px}
#qcread .qcreadhead button{font:inherit;font-weight:800;margin-left:8px;padding:6px 12px;border-radius:10px;border:1px solid #3f6b62;background:#22453e;color:#e8f3ef}
#qcitems{display:none}
#qcitems.on{display:block;margin:14px 0 0;padding:12px 14px;background:#1b2f2c;
  border:1px solid #2c4a45;border-radius:8px}
.qcupdhead{margin:0 0 10px;font:400 14px/1.45 system-ui;color:#cfe8e1}
/* A tick target sized for a thumb, not a mouse: 44px is the smallest thing a gloved hand hits
   reliably, and a missed tick here means an item stays badged and gets read twice — annoying,
   but the right way round compared with clearing one nobody read. */
.qcitem{display:flex;gap:10px;align-items:flex-start;padding:9px 0;min-height:44px;
  border-top:1px solid #2c4a45;font:400 15px/1.45 system-ui;color:#e6f2ef;cursor:pointer}
.qcitem:first-of-type{border-top:0}
.qcitem input{width:24px;height:24px;margin:2px 0 0;flex:0 0 auto;accent-color:#0f6e5a}
.qcitem b{color:#9fb5b1;font-weight:700;margin-right:5px}
#qcset{display:block;margin:12px 0 0;font:400 13px/1.4 system-ui;color:#9fb5b1}
#qcset a{color:#7fd3c0}
#vstack{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:0 10px}
#vstack canvas{height:auto;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.45);max-width:none}
#viewer .bar #zlvl{color:#9aa0a6;font-size:12px;min-width:3.4em;text-align:center}
#viewer .bar #zin,#viewer .bar #zout{min-width:40px;font-size:17px;line-height:1}
#vstack .pgnum{color:#9aa0a6;font-size:12px;letter-spacing:.08em}
#viewer .bar #vpages{color:#9aa0a6;font-size:12px}
pre{white-space:pre-wrap;font:13.5px/1.45 inherit;margin:6px 0 0;color:var(--ink)}