:root{
  /* IPH Mechanical brand palette */
  --iph:#00214B; --iph-dark:#001536; --accent:#E31937; --ok:#1a7f37; --bad:#E31937;
  --line:#e3e8ee; --bg:#f4f6f9; --card:#fff; --ink:#1a1d21; --muted:#58595B;
}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 "Open Sans","Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
h1,h2,h3{font-family:"Roboto","Segoe UI",Arial,sans-serif}
a{color:var(--iph);text-decoration:none}
a:hover{text-decoration:underline}
/* ---- header: brand banner + company tools bar (2026-10-03) ------------- */
header.top{background:var(--iph);color:#fff;box-shadow:0 2px 8px rgba(0,16,40,.25);position:relative;z-index:30}
header.top .banner{display:flex;align-items:center;gap:20px;height:64px;padding:0 24px}
header.top .brand{display:flex;align-items:center;gap:14px;text-decoration:none}
header.top .brand img.brandlogo{height:40px;width:auto;display:block}
header.top .brand .brandsub{color:#fff;font-family:"Roboto","Segoe UI",Arial,sans-serif;font-size:19px;
  font-weight:700;letter-spacing:.6px;border-left:1px solid #3a5a80;padding-left:14px;line-height:1}
header.top .banner-right{margin-left:auto;display:flex;align-items:center;gap:10px}
header.top .bproj{display:flex;align-items:baseline;gap:10px;min-width:0;flex:0 1 auto;
  padding-left:20px;border-left:1px solid rgba(255,255,255,.28);color:#fff;text-decoration:none}
header.top .bproj:hover{text-decoration:none}
header.top .bproj-no{font-family:"Roboto","Segoe UI",Arial,sans-serif;font-size:19px;font-weight:700;
  letter-spacing:.3px;white-space:nowrap}
header.top .bproj-name{font-size:15px;color:#dbe7f1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){header.top .bproj-name{display:none}header.top .bproj{padding-left:12px}}
header.top .hlink{color:#dbe7f1;font-size:13px}
header.top .ico{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
header.top .projsearch{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:0 10px;height:36px;color:#cdd8e6;cursor:text}
header.top .projsearch:focus-within{background:#fff;color:var(--muted);border-color:#fff}
header.top .projsearch input{border:0;background:transparent;color:#fff;font-size:13px;width:230px;
  padding:0;outline:none;height:34px}
header.top .projsearch:focus-within input{color:var(--ink)}
header.top .projsearch input::placeholder{color:#b7c6d8}
header.top .hmenu{position:relative}
header.top .hmenu summary{list-style:none}
header.top .hmenu summary::-webkit-details-marker{display:none}
header.top .hbtn{display:flex;align-items:center;gap:7px;height:36px;padding:0 11px;border-radius:8px;
  color:#dbe7f1;font-size:13px;font-weight:600;cursor:pointer;user-select:none}
header.top .hbtn:hover,header.top .hmenu[open] .hbtn,header.top .hbtn.on{background:rgba(255,255,255,.12);color:#fff}
header.top .avatar-btn{padding:0 4px}
header.top .avatar{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:700;letter-spacing:.5px}
header.top .hmenu-pop{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:#fff;
  border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,16,40,.18);padding:6px;z-index:40}
header.top .hmenu-pop a{display:block;padding:8px 12px;border-radius:6px;color:var(--ink);font-size:13px}
header.top .hmenu-pop a:hover{background:#f2f5f9;text-decoration:none;color:var(--iph)}
header.top .hmenu-who{padding:8px 12px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
header.top .hmenu-who b{display:block;color:var(--iph-dark);font-size:13px}
header.top .hmenu-who span{color:var(--muted);font-size:12px}
header.top .toolbar{display:flex;gap:2px;padding:0 16px;background:var(--iph-dark);
  border-bottom:3px solid var(--accent);overflow-x:auto;scrollbar-width:none}
header.top .toolbar::-webkit-scrollbar{display:none}
header.top .toolbar a{display:flex;align-items:center;gap:8px;padding:0 14px;height:44px;color:#c7d4e4;
  font-size:14px;font-weight:600;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-3px}
header.top .toolbar a:hover{color:#fff;text-decoration:none;background:rgba(255,255,255,.06)}
header.top .toolbar a.on{color:#fff;border-bottom-color:#fff}
/* Phones: the header must never set the page's minimum width — it wraps instead,
   so field pages (Forms, FLHA) render at true device width, not zoomed out. */
@media (max-width:760px){
  header.top .banner{height:auto;min-height:56px;padding:8px 12px;gap:10px;flex-wrap:wrap}
  header.top .brand img.brandlogo{height:32px}
  header.top .brand .brandsub{font-size:16px;padding-left:10px}
  header.top .banner-right{gap:6px}
  header.top .projsearch{order:3}
  header.top .projsearch input{width:120px}
  header.top .hide-sm{display:none}
  header.top .toolbar{padding:0 6px}
  header.top .toolbar a{padding:0 11px;font-size:13px;height:42px}
}
@media (max-width:480px){
  header.top .banner-right{width:100%;margin-left:0}
  header.top .projsearch{flex:1;order:0}
  header.top .projsearch input{width:100%}
}
/* Wider, with less white space either side (Jeremy 2026-10-05). */
.wrap{max-width:1640px;margin:20px auto;padding:0 24px}
/* Side-panel navigation (projects + settings). The aside is rendered first in
   the flow; :has() switches the wrap to a two-column layout only on pages that
   contain one, so pages without a sidenav (dashboard, LME print view) keep the
   plain single column. */
.wrap:has(.sidenav){max-width:1880px;position:relative;padding-left:273px;min-height:640px}
/* The side menu scrolls on its own, apart from the page (Jeremy 2026-10-23): it
   floats in the wrap's left padding and sticks just below the top of the window,
   no taller than the window. It comes first in the page so it starts at the top. */
.wrap:has(.sidenav)>.sidenav{position:sticky;top:12px;float:left;width:225px;margin-left:-249px;
  max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.sidenav{background:#fff;border:1px solid var(--line);border-radius:8px;padding:0 0 8px;
  font-size:13px;overflow:hidden}
/* A group header must LEAD its tools, not recede behind them. It used to be
   lighter and smaller than the links under it, with nothing but whitespace
   between groups, so twenty similar-looking links read as one long list.
   Navy on a tinted band, ruled top and bottom, so the eye chunks it
   (Jeremy 2026-10-02). */
.sidenav .sn-group{margin:9px 0 0;padding:6px 14px 5px;font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.6px;color:var(--iph);background:#eceff5;
  border-top:1px solid #d8e0ea;border-bottom:1px solid #d8e0ea}
.sidenav .sn-group:first-child,.sidenav .sn-toggle+.sn-group,.sidenav .sn-head+.sn-group{margin-top:0;border-top:0}
/* The side menu's own header with its Hide button (2026-10-05) - a computer only,
   and only once the script that hides it has run. */
.sidenav .sn-head{display:none}
@media (min-width:701px){
  .sn-js .sidenav .sn-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:7px 8px 7px 14px;background:var(--iph);color:#fff;font-size:12px;font-weight:700;letter-spacing:.3px}
  .sn-js .sidenav .sn-hide{border:1px solid rgba(255,255,255,.45);background:transparent;color:#fff;border-radius:5px;
    padding:3px 8px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
  .sn-js .sidenav .sn-hide:hover{background:rgba(255,255,255,.14)}
}
/* Phone fold-up of the project panel (_tabs.html): the bar shows only on a
   phone, and only once its script has run. */
.sidenav .sn-toggle{display:none}
@media (max-width:700px){
  .sn-js .sidenav .sn-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;
    gap:10px;padding:12px 14px;background:#fff;border:0;font:inherit;font-size:15px;font-weight:700;
    color:var(--iph);cursor:pointer;text-align:left}
  .sn-js .sidenav .sn-toggle .sn-cur{font-size:13px;font-weight:600;color:var(--muted);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sn-js .sidenav.open .sn-toggle{border-bottom:1px solid var(--line)}
  .sn-js .sidenav:has(>.sn-toggle):not(.open){padding-bottom:0}
  .sn-js .sidenav:has(>.sn-toggle):not(.open)>:not(.sn-toggle){display:none}
  .sn-js .sidenav:has(>.sn-toggle) a{padding-top:10px;padding-bottom:10px}      /* thumb-sized once open */
}
/* Links sit indented under their header, so the hierarchy is visible at a glance. */
/* Ask Manifold up front in the side menu (base.html, 2026-10-23) */
.sidenav .sn-ask{display:flex;align-items:center;gap:8px;width:calc(100% - 16px);margin:8px;
  padding:8px 12px;border:0;border-radius:6px;background:var(--accent);color:#fff;font:inherit;
  font-weight:700;cursor:pointer;text-decoration:none;box-sizing:border-box}
.sidenav .sn-ask:hover{background:var(--accent);color:#fff;filter:brightness(1.08);text-decoration:none}
.sidenav .sn-ask.sn-ask-off{background:#fff;color:var(--accent);border:1px dashed var(--accent)}
.sidenav a{display:block;padding:6px 14px 6px 24px;color:#333;font-weight:500;
  border-left:3px solid transparent}
.sidenav a:hover{background:#f4f7fb;text-decoration:none}
.sidenav a.on{color:var(--iph);font-weight:700;border-left-color:var(--accent);background:#eaf1fa}
.crumb{color:var(--muted);font-size:13px;margin-bottom:10px}
/* _crumbs.html: the same look as a job's path bar (.pnav) - links, then where you are */
nav.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:24px}
nav.crumb a{color:var(--iph);font-weight:600}
nav.crumb .crumb-sep{color:#9aa3ad;font-size:15px;line-height:1}
nav.crumb .crumb-here,.pnav .pnav-here{color:var(--ink);font-weight:600;overflow-wrap:anywhere}

/* ---- project header ------------------------------------------------------
   On every project page, so you always know which job you are in. It replaced
   a breadcrumb plus an H1 that printed the same job number and name twice. */
.phead{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-left:5px solid var(--iph);
  border-radius:9px;padding:11px 16px;margin-bottom:10px;
  box-shadow:0 1px 2px rgba(16,24,40,.04)}
.phead-id{display:flex;align-items:center;gap:14px;min-width:0}
.phead-no{font-size:21px;font-weight:800;color:var(--iph);letter-spacing:.3px;white-space:nowrap}
.phead-name{font-size:15px;font-weight:650;color:#1a2433;line-height:1.25}
.phead-meta{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;
  flex-wrap:wrap;margin-top:2px}
.phead-stats{display:flex;gap:22px;flex-wrap:wrap}
.phead-stats>div{display:flex;flex-direction:column;gap:1px}
.phead-stats .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.phead-stats .v{font-size:15px;font-weight:700;color:var(--iph-dark);white-space:nowrap}
.phead-stats .warnv{color:#8a5a00}

/* Only what needs the PM's attention, each linking to the page that fixes it. */
.phead-alerts{display:flex;gap:8px;flex-wrap:wrap;margin:-2px 0 12px}
.palert{display:inline-block;font-size:12px;padding:4px 10px;border-radius:999px;
  border:1px solid transparent;text-decoration:none}
.palert:hover{text-decoration:none;filter:brightness(.97)}
.palert.info{background:#eef4fb;border-color:#cadcf0;color:#1c4a76}
.palert.warn{background:#fff6e5;border-color:#f0dcb0;color:#7a5200}
.palert.bad{background:#fdecee;border-color:#f3c7cd;color:#8c1d2a;font-weight:600}
@media (max-width:700px){
  .phead{gap:10px}
  .phead-stats{gap:14px}
  .phead-no{font-size:18px}
}
h1{font-size:22px;margin:.2em 0 .1em}
h2{font-size:16px;margin:1.4em 0 .5em;color:var(--iph-dark);border-bottom:2px solid var(--line);padding-bottom:5px}
h3{font-size:14px;margin:1em 0 .4em}
.sub{color:var(--muted);margin:0 0 12px}
.msg{background:#eaf5ff;border:1px solid #b6d9f7;color:#0b4a75;padding:8px 12px;border-radius:6px;margin:10px 0}
/* The "Saved" note when a save keeps you where you were (base.html). It floats
   at the bottom of the screen instead of sitting at the top of the page, which
   you are no longer looking at. Clears itself; a click closes it sooner. */
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,8px);
  z-index:70;max-width:min(560px,calc(100vw - 32px));background:var(--iph);color:#fff;padding:10px 16px;
  border-radius:8px;box-shadow:0 6px 22px rgba(0,16,40,.32);font-size:13px;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto;cursor:pointer}
.toast.bad{background:var(--accent)}
body:has(.mtabs) .toast,body:has(.fillbar) .toast{bottom:calc(82px + env(safe-area-inset-bottom))}
form[data-busy] button,form[data-busy] select,form[data-busy] input{cursor:progress;opacity:.6}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* minmax(0,1fr), not 1fr: a plain 1fr cannot shrink below its content, so four
   KPI tiles holding $2,063,050.00 pushed the page wider than a 1000px screen
   beside the side menu (2026-10-03). Mid-width screens get two-by-two. */
@media (max-width:1180px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:16px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.card h3{margin-top:0}
.kpi{display:flex;flex-direction:column;gap:2px}
.kpi .v{font-size:22px;font-weight:700;color:var(--iph-dark);overflow-wrap:anywhere}
.kpi .l{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600}
.pill.active{background:#e6f4ea;color:var(--ok)}
.pill.draft{background:#fdf1e5;color:var(--accent)}
.pill.gray{background:#eef1f5;color:var(--muted)}
table{border-collapse:collapse;width:100%;background:#fff;font-size:13px}
th,td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left}
th{background:#f7f9fc;color:var(--iph-dark);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.3px}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tr:hover td{background:#fafcff}
tfoot td{font-weight:700;border-top:2px solid var(--iph);background:#f2f6fb}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
/* Drag-to-resize columns on every table (static/colresize.js, 2026-10-23). A grip
   sits on each heading's right edge; nothing changes until a column is dragged.
   NOTE: table-layout:fixed is deliberately NOT set here - the script writes the
   table's own widths into a <colgroup> first and only then switches it to fixed.
   data-tblkey on a table names its saved widths; data-noresize opts a table out. */
.cr-grip{position:absolute;top:0;right:0;width:7px;height:100%;cursor:col-resize;
  user-select:none;touch-action:none;z-index:3}
.cr-grip:hover,.cr-grip.dragging{background:var(--iph);opacity:.6}
/* Once resized: headings keep wrapping (an ellipsised heading hides the column
   name) but never spill into the next one; cells break long words, and a form
   control stays inside its column. */
table.cr-on th{overflow:hidden}
/* click a heading to sort; a wide table's side-scroll bar pinned to the bottom of
   the window while its own is out of sight (static/colresize.js, 2026-10-23) */
th.cr-sortable{cursor:pointer;user-select:none}
/* a heading that sorts carries a faint up/down mark, the sorted one an arrow; one that
   does not sort has neither (QA review 2026-10-29, M4) */
th.cr-sortable::after{content:" \21C5";font-size:11px;opacity:.4;white-space:nowrap}
th.cr-sortable:hover::after,th.cr-sortable:focus-visible::after{opacity:.85}
th.cr-sortable:hover{text-decoration:underline;text-underline-offset:3px}
th.cr-sortable:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
th.cr-sort-asc::after{content:" \25B2";font-size:10px;opacity:1}
th.cr-sort-desc::after{content:" \25BC";font-size:10px;opacity:1}
/* the search box over a long table (static/tablefind.js) */
.tbl-find{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 6px}
.tbl-find input{flex:1 1 220px;max-width:420px}
.tf-hide{display:none!important}
.hscroll-float{position:fixed;bottom:0;height:16px;overflow-x:auto;overflow-y:hidden;z-index:60;
  display:none;background:rgba(244,246,249,.95);border-top:1px solid var(--line)}
.hscroll-float>div{height:1px}
table.cr-on td{overflow-wrap:anywhere}
table.cr-on td :is(input,select,textarea){max-width:100%}
body.col-resizing{cursor:col-resize;user-select:none}
.neg{color:var(--bad)}.pos{color:var(--ok)}
/* company Safety: a red count stays red as a link; a job's whole name wraps */
table[data-tblkey="safety-dash"] td.neg a{color:inherit;font-weight:700}
.sd-proj{min-width:190px}
.bar{height:8px;background:#edf1f6;border-radius:5px;overflow:hidden;min-width:70px}
.bar>span{display:block;height:100%;background:var(--iph)}
.bar>span.over{background:var(--bad)}
form.inline{display:inline}
label{display:block;font-size:12px;color:var(--muted);margin:6px 0 2px}
input,select,textarea{font:inherit;font-size:13px;padding:7px 8px;border:1px solid #cbd5e1;border-radius:6px;width:100%;background:#fff}
input[type=checkbox]{width:auto}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>div{flex:1;min-width:120px}
.btn{display:inline-block;background:var(--iph);color:#fff;border:0;padding:8px 14px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600}
.btn:hover{background:var(--iph-dark);text-decoration:none;color:#fff}
.btn.sm{padding:4px 9px;font-size:12px}
.btn.ghost{background:#fff;color:var(--iph);border:1px solid var(--iph)}
.btn.warn{background:var(--accent)}
.btn.danger{background:var(--bad)}
details{margin:8px 0}summary{cursor:pointer;font-weight:600;color:var(--iph)}
.tag{font-size:11px;background:#eef1f5;padding:1px 6px;border-radius:4px;color:var(--muted)}
.tabs{display:flex;gap:4px;margin:14px 0;border-bottom:2px solid var(--line);flex-wrap:wrap}
.tabs a{padding:8px 14px;font-size:13px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-2px}
.tabs a.on{color:var(--iph);border-bottom-color:var(--iph)}
.muted{color:var(--muted)}
.small{font-size:12px}
.right{text-align:right}
.mt{margin-top:16px}
.warnbox{background:#fef6ee;border:1px solid #f6d9bd;color:#8a4b17;padding:8px 12px;border-radius:6px;font-size:12px}
/* After a row action the redirect lands on #ph-<id>; briefly mark it so it is
   obvious which row you just changed. Pure CSS — no script needed. */
tr:target td{background:#fff7e6 !important}
tr:target td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
/* Anchored sections shouldn't sit tight against the top of the viewport. */
[id]{scroll-margin-top:14px}
/* Project module nav: group row + tools row */
.tabs.groups{margin:14px 0 0;border-bottom:1px solid var(--line);gap:2px}
.tabs.groups a{font-size:12px;text-transform:uppercase;letter-spacing:.4px;padding:6px 12px;color:var(--muted)}
.tabs.groups a.on{color:var(--iph);border-bottom-color:var(--accent)}
.tabs.sub{margin-top:0}
/* Workflow guide */
.wf-intro{border-left:4px solid var(--accent)}
.wf-step{display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:start;margin:10px 0}
.wf-step .wf-num{width:34px;height:34px;border-radius:50%;background:var(--iph);color:#fff;font-weight:700;font-family:"Roboto",Arial,sans-serif;display:flex;align-items:center;justify-content:center;font-size:15px;flex:none}
.wf-step.done .wf-num{background:var(--ok)}
.wf-body{min-width:0}
.wf-body h3{margin:.1em 0 .35em;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px}
.wf-how{color:var(--muted);margin:.25em 0 .5em}
.wf-chips{display:flex;gap:6px;flex-wrap:wrap;margin:.3em 0 .5em}
.wf-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}

/* Non-production banner. Deliberately loud and deliberately at the very top,
   above the brand, so it cannot be mistaken for part of the app's own chrome. */
.envbar{background:repeating-linear-gradient(45deg,#8a3b00,#8a3b00 12px,#a04600 12px,#a04600 24px);
  color:#fff;font-size:13px;padding:7px 16px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.envbar a{color:#ffe6c7;text-decoration:underline}
.envbar .envdata{margin-left:auto;opacity:.85;font-size:12px}
@media print{.envbar{display:none}}

/* ---- Phone home screen (/m) -------------------------------------------
   Deliberately huge targets: this gets used with gloves on, outdoors, one
   handed. 56px min height is well above the 44px accessibility floor. */
.mob{max-width:560px;margin:0 auto}
.mobh{font-size:20px;margin:6px 0 12px}
.mobh2{font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  border:0;margin:22px 0 8px;padding:0}
.mobback{margin:0 0 6px;font-size:14px}
.mobtile{display:flex;flex-direction:column;justify-content:center;gap:2px;
  min-height:56px;padding:12px 16px;margin:8px 0;background:#fff;
  border:1px solid var(--line);border-left:4px solid var(--iph);border-radius:10px;
  box-shadow:0 1px 2px rgba(16,24,40,.06);color:var(--ink)}
.mobtile:hover,.mobtile:active{text-decoration:none;background:#f4f7fb}
.mobtile.alt{border-left-color:var(--accent)}
.mobtile .mobnum{font-weight:700;color:var(--iph-dark);font-size:15px}
.mobtile .mobname{font-size:15px}
.mobtile .mobnum + .mobname{font-size:13px;color:var(--muted)}

/* Form photos: thumbnails big enough to recognise on a phone without opening. */
.photogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.photo{margin:0;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.photo img{width:100%;height:120px;object-fit:cover;display:block}
.photo figcaption{padding:6px 8px;display:flex;gap:6px;align-items:center;justify-content:space-between}
.photo figcaption form{margin:0}

/* ---- iPhone / small-screen behaviour ---------------------------------------
   Two iOS-specific problems this fixes:
   1. Safari ZOOMS the whole page when you tap an input whose font-size is under
      16px, and does not zoom back out. Every field goes to 16px on phones.
   2. Fixed bottom bars sit UNDER the home indicator on notched iPhones, so the
      Submit button is half-unreachable. env(safe-area-inset-*) reserves it. */
@media (max-width: 700px) {
  input, select, textarea { font-size: 16px; }
  .btn { padding: 10px 14px; }                 /* thumb-sized, not mouse-sized */
  .btn.sm { padding: 7px 11px; font-size: 13px; }
  /* "Edit", "Work it", "+ Add a missed entry": a 17px-tall line of text is
     too small to hit with a gloved thumb, so a disclosure gets a full row. */
  summary:not(.btn) { padding: 9px 0; }
  .wrap { margin: 12px auto; padding: 0 12px; }
  .grid.g2, .grid.g3, .grid.g4 { grid-template-columns: minmax(0, 1fr); }
  /* A table sitting straight in a card (no .tbl-wrap) scrolls inside the
     card instead of pushing the page sideways - five pages did, by 5-33px. */
  .card table:not(.tbl-wrap table) { display: block; overflow-x: auto; }
  .row > div { min-width: 100%; }              /* stack form rows */
  table { font-size: 13px; }
  /* the project side panel becomes a normal block above the content */
  .wrap:has(.sidenav) { padding-left: 12px; min-height: 0 }
  .wrap:has(.sidenav) > .sidenav { position: static; width: auto; margin-bottom: 14px;
    float: none; margin-left: 0; max-height: none; overflow: visible }
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}
.fillbar { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.envbar { padding-top: calc(7px + env(safe-area-inset-top)); }
/* iOS momentum scrolling inside wide tables */
.tbl-wrap { -webkit-overflow-scrolling: touch; }

/* On a phone the banner must announce itself without eating the screen:
   keep "DEV COPY", drop the explanation and the data path. */
@media (max-width: 700px) {
  .envbar { padding: 5px 12px; font-size: 12px; gap: 8px }
  .envbar .envwhy, .envbar .envdata { display: none }
}

/* ---- Phone UI: list rows + bottom tab bar --------------------------------
   The shape crews already know from Procore/iOS: a titled header, grouped
   list rows with a leading icon and a chevron, and a fixed bottom tab bar.
   IPH colours throughout - the pattern is borrowed, the branding is ours. */
/* room for the whole bottom bar - its height includes the iPhone's home-indicator strip,
   which hid the last line of every phone page (Jeremy 2026-10-31) */
.mob{max-width:640px;margin:0 auto;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.mtop{padding:4px 2px 10px}
.mtop h1{font-size:26px;margin:2px 0 2px;letter-spacing:-.3px}
/* the full site from the phone: a small pill, not a paragraph (2026-10-06) */
.mtop-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mfull{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:20px;border:1px solid var(--line);
  background:#fff;color:var(--iph);font-size:13.5px;font-weight:700;text-decoration:none;white-space:nowrap}
.mfull:hover{text-decoration:none;background:#eef2f8}
.mfull .ic{width:18px;height:18px}
.mtop .msub{margin:0;color:var(--muted);font-size:14px}
.mback{display:inline-block;font-size:15px;font-weight:600;margin-bottom:2px}
.msearch{width:100%;margin-top:10px;padding:11px 12px;border-radius:10px;
  border:1px solid var(--line);background:#fff;font-size:16px}
.msec{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;
  color:var(--muted);margin:18px 2px 7px}
.mlist{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mrow{display:flex;align-items:center;gap:13px;padding:14px 14px;min-height:58px;
  color:var(--ink);border-bottom:1px solid var(--line)}
.mrow:last-child{border-bottom:0}
.mrow:hover,.mrow:active{background:#f4f7fb;text-decoration:none}
.mrow .ic{width:23px;height:23px;flex:none;color:var(--iph)}
.mrow .mtext{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.mrow .mtext b{font-size:16px;font-weight:600}
.mrow .mtext small{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow .chev{width:17px;height:17px;flex:none;color:#b9c2cf}
.mempty{padding:16px;color:var(--muted);font-size:14px;background:#fff;
  border:1px solid var(--line);border-radius:12px}
.mtabs{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;background:#fff;
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -1px 6px rgba(16,24,40,.06)}
.mtabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 4px 7px;color:var(--muted);font-size:11px;font-weight:600}
.mtabs a:hover{text-decoration:none}
.mtabs a svg{width:23px;height:23px}
.mtabs a.on{color:var(--iph)}
.mtabs a.on svg{color:var(--iph)}
@media print{.mtabs{display:none}}

/* Copy-to-day popover. Used by Cost Entries and by Timesheets (duplicate a
   line, or repeat a whole day) - so it lives here rather than in one page. */
.copydd{position:relative;display:inline-block}
.copydd summary{display:inline-block;list-style:none;cursor:pointer}
.copydd summary::-webkit-details-marker{display:none}
.copydd .copypanel{position:absolute;left:0;top:calc(100% + 4px);z-index:30;background:#fff;
  border:1px solid var(--line,#d8dce3);border-radius:8px;padding:10px;min-width:250px;
  box-shadow:0 6px 18px rgba(0,33,75,.15);text-align:left}
.copydd .copypanel input[type=date]{width:100%}

/* ---- In-page tabs: SOV / Phase codes / Mapping -------------------------- */
/* The tool nav is a vertical side panel, so a horizontal strip here reads as
   "sections of this page" rather than navigation. */
.ptabs{margin:18px 0 14px}
.ptabs a{cursor:pointer}
.ptabs .cnt{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:20px;
  background:#eef1f5;color:var(--muted);font-size:11px;font-weight:600;
  text-transform:none;letter-spacing:0}
.ptabs a.on .cnt{background:var(--iph);color:#fff}
.srcbar{padding:12px 16px}
.srcbar summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--iph)}
.srcbar details[open] summary{margin-bottom:10px}
.srcbar details .card{border:0;box-shadow:none;padding:0;max-width:none}

/* SOV lines: the description is what you actually read, so give it every pixel
   the fixed-width columns do not need. These used to sit in a half-width grid
   column where the inputs overflowed and you scrolled sideways to read a line
   (Jeremy 2026-10-02). */
#pane-sov td:nth-child(2){width:100%}
#pane-sov input[name="description"]{width:100%;min-width:280px}
#pane-sov input[name="sov_number"]{min-width:64px}
/* Save and the delete button belong side by side, not stacked. */
#pane-sov td:last-child{white-space:nowrap}
/* Same squeeze, same fix: seven columns in half a page. */
#pane-phasecodes td:nth-child(2){width:100%}

/* ---- Workflow guide: one card per tool, grouped as in the side menu ------ */
.wf-list{margin:.3em 0 .6em 1.1em;padding:0}
.wf-list li{margin:.25em 0;line-height:1.45}
.guide-group{margin:22px 0 8px;padding-bottom:6px;border-bottom:2px solid var(--iph);
  font-size:15px;text-transform:uppercase;letter-spacing:.5px;color:var(--iph)}
.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
.guide-tool h3{margin:0;font-size:15px}
.guide-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.guide-what{margin:.2em 0 .4em}
@media (max-width:600px){.guide-grid{grid-template-columns:1fr}}

/* ---- Cost Detail pivot --------------------------------------------------- */
.pv-bar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-start;padding:12px 14px}
.pv-zone-wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.pv-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.pv-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:30px;padding:3px;
  border-radius:8px;border:1px dashed transparent}
.pv-drop{border-color:var(--line);background:#f7f9fc;min-width:220px;padding:3px 8px}
.pv-chips.pv-over{border-color:var(--iph);background:#eef3fa}
.pv-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:16px;
  background:#fff;border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--iph);
  cursor:grab;user-select:none}
.pv-chip:hover{border-color:var(--iph)}
.pv-chip.on{background:var(--iph);color:#fff;border-color:var(--iph)}
.pv-chip .pv-x{border:0;background:none;color:inherit;font-size:14px;line-height:1;padding:0 0 0 2px;cursor:pointer}
.pv-sep{color:var(--muted);font-weight:700}
.pv-hint{font-size:12px;color:var(--muted);font-style:italic}
.pv-tools{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;align-items:center}
.pv-cols{position:relative}
.pv-cols summary{list-style:none}
.pv-cols summary::-webkit-details-marker{display:none}
.pv-colmenu{position:absolute;right:0;top:110%;z-index:20;min-width:210px;padding:8px 10px}
.pv-colrow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:2px 0;font-size:13px}
.pv-colrow button{border:1px solid var(--line);background:#fff;border-radius:4px;padding:0 6px;cursor:pointer;margin-left:2px}
.pv-colrow button:disabled{opacity:.35;cursor:default}
.pv-help{margin:6px 0 8px}
.pv-table th[data-sort]{cursor:pointer;white-space:nowrap}
.pv-table th.pv-col{cursor:grab}
.pv-table th.pv-before{box-shadow:inset 3px 0 0 var(--accent)}
.pv-table th.pv-after{box-shadow:inset -3px 0 0 var(--accent)}
.pv-table .pv-dragging{opacity:.45}
.pv-table td.pv-name{white-space:nowrap}
.pv-table tr.pv-grp td{font-weight:600;cursor:pointer}
.pv-table tr.pv-grp.pv-d0 td{background:#eef3fa;border-top:1px solid #d6e0ee}
.pv-table tr.pv-grp.pv-d1 td{background:#f5f8fc}
.pv-table tr.pv-grp.pv-d2 td,.pv-table tr.pv-grp.pv-d3 td{background:#fafbfd}
.pv-tog{border:0;background:none;color:var(--iph);cursor:pointer;width:16px;padding:0;font-size:12px}
.pv-n{display:inline-block;font-size:10px;font-weight:600;color:var(--muted);background:#eef1f5;
  border-radius:10px;padding:0 6px;margin-left:4px;vertical-align:1px}
@media (max-width:700px){.pv-tools{margin-left:0}.pv-drop{min-width:0;flex:1}}

/* Long unbroken text (a file path, a rate-set name in a dropdown) wraps or
   shrinks rather than widening the page on a phone. */
code { overflow-wrap: anywhere; }
select { max-width: 100%; }

/* ---- Change Management --------------------------------------------------- */
.cm-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.cm-head h1{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cm-actions{display:flex;gap:6px;flex-wrap:wrap}
.cm-flow{padding:10px 14px}
.cm-flow-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cm-filter{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.cm-filter .tag.cm-on{background:var(--iph);color:#fff}
.pill.cm-draft,.pill.cm-internal{background:#eef1f5;color:var(--muted)}
.pill.cm-external{background:#e8eefb;color:var(--iph)}
.pill.cm-submitted,.pill.cm-received{background:#fdf1e5;color:#8a5a00}
.pill.cm-approved,.pill.cm-executed{background:#e6f4ea;color:var(--ok)}
.pill.cm-rejected,.pill.cm-void{background:#fdecee;color:#8c1d2a}
.cm-gridbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.cm-gridtools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cm-help{margin:8px 0}
/* PCO pricing in sections, cost side | revenue side (2026-10-23) */
.pg-savebar{position:sticky;top:0;z-index:4;background:#fff;padding:6px 0;border-bottom:1px solid var(--line);margin-bottom:6px}
.pg-sec{margin-top:14px}
.pg-sec-head{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.pg-sec-head h3{margin:0;font-size:15px}
.pg-sec-head .btn{margin-left:auto}
table.pg tr.pg-bandrow th{padding:3px 6px;font-size:11px;text-align:center;letter-spacing:.4px}
table.pg th.pg-band-c{background:#58595B}
table.pg th.pg-band-r{background:var(--iph);box-shadow:inset 0 3px 0 var(--accent)}
table.pg td.pg-rev{background:#eef3fa}
.cm-history{list-style:none;margin:0;padding:0}
.cm-history li{padding:8px 0;border-bottom:1px solid var(--line)}
.cm-when{display:inline-block;min-width:150px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}

/* the pricing grid: spreadsheet-tight cells */
table.pg td{padding:2px 3px;vertical-align:middle}
table.pg td.pg-wide{width:100%}
table.pg th[title]{cursor:help}
table.pg th{padding:6px 6px}
table.pg .pg-in{border:1px solid transparent;border-radius:3px;padding:4px 6px;font-size:13px;background:transparent}
table.pg .pg-in:hover{border-color:var(--line)}
table.pg .pg-in:focus{border-color:var(--iph);background:#fff;outline:none;box-shadow:0 0 0 2px #dbe5f3}
table.pg .pg-in.n{text-align:right;font-variant-numeric:tabular-nums}
table.pg select{padding:3px 4px;font-size:13px}
table.pg select.pg-rate{max-width:none;background:#eef6ee}
table.pg .pg-missing{background:#fff7e6;border-color:#e8b04b}
table.pg .pg-custom{background:#fff7e6}
table.pg .pg-override{background:#fdecee;font-weight:600}
table.pg .pg-calc{white-space:nowrap;color:var(--iph-dark);padding-right:8px}
table.pg .pg-no{color:var(--muted);font-size:11px;text-align:right;width:26px}
table.pg .pg-chk{text-align:center}
table.pg .pg-del{border:0;background:none;color:var(--muted);cursor:pointer;font-size:15px}
table.pg .pg-del:hover{color:var(--accent)}

/* ---- Directory ----------------------------------------------------------- */
.dir-filter{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* Show / Hide inside a password box (static/pwshow.js, 2026-10-30) */
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding-right:62px;box-sizing:border-box}
.pw-show{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:none;
  color:var(--iph);font:inherit;font-size:12px;font-weight:700;padding:6px 8px;cursor:pointer}
/* the Directory's two sections and its bulk permissions bar (2026-10-30) */
.dir-section{margin:20px 0 6px;font-size:17px}
.dir-pick{width:30px;text-align:center}
.dir-pick input{width:auto;margin:0}
.dir-bulk{position:sticky;top:0;z-index:5;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin:12px 0 0;padding:8px 12px;background:#fff;border:1px solid var(--line);border-radius:8px}
.dir-bulk.on{border-color:var(--iph);box-shadow:0 2px 10px rgba(0,16,40,.14)}
.dir-bulk select{width:auto}
.dir-filter select{width:auto}
.dir-invite{border-left:4px solid var(--ok);background:#f3faf5}
.dir-linkrow{display:flex;gap:8px;align-items:center}
.dir-linkrow input{flex:1;min-width:0;font-family:Consolas,monospace;font-size:12px}

/* ---- Submittals ---------------------------------------------------------- */
.pill.su-draft{background:#eef1f5;color:var(--muted)}
.pill.su-internal-review,.pill.su-ready-to-send{background:#e8eefb;color:var(--iph)}
.pill.su-submitted{background:#fdf1e5;color:#8a5a00}
.pill.su-approved,.pill.su-approved-as-noted,.pill.su-closed{background:#e6f4ea;color:var(--ok)}
.pill.su-revise-and-resubmit,.pill.su-rejected,.pill.su-void{background:#fdecee;color:#8c1d2a}
.su-shown{font-weight:700}
.su-markup{margin-top:10px;padding:10px 12px;border:1px dashed var(--line);border-radius:8px;
  display:flex;flex-direction:column;gap:4px}

/* ---- the shared PDF viewer (Apryse WebViewer) ----------------------------- */
.pdfv{display:flex;flex-direction:column;gap:8px}
.pdfv-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pdfv-frame{height:78vh;min-height:520px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#e9ecf1}
.pdfv-fallback{width:100%;height:100%;min-height:520px;border:0}
.pdfv-trial{color:#8a5a00;background:#fdf1e5;border-radius:10px;padding:2px 8px}
/* Settings > Roles: the permission matrix (2026-10-07) - tools by None / Read
   Only / Standard / Admin, like Procore's template editor; a stacked list on a phone */
.pm-chip{display:inline-block;padding:1px 8px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap}
.pm-chip.admin{background:var(--iph);color:#fff}
.pm-chip.standard{background:#e8eefb;color:var(--iph)}
.pm-chip.read{background:#eef1f5;color:var(--muted)}
.pm-chip.none{background:transparent;color:var(--muted);border:1px dashed var(--line)}
.rl-counts .pm-chip{margin:1px 2px 1px 0}
.rl-acts{white-space:nowrap}
.rl-log{list-style:none;margin:0;padding:0}
.rl-log>li{border-top:1px solid var(--line);padding:6px 0}
.rl-log>li:first-child{border-top:0}
.rl-log ul{margin:2px 0 0 18px;padding:0}
.pm-key dl{display:grid;grid-template-columns:max-content 1fr;gap:2px 12px;margin:6px 0 0}
.pm-key dt{font-weight:700;color:var(--iph-dark)}
.pm-key dd{margin:0}
.pm-card{padding:0;overflow:visible}
.pm-matrix{width:100%;border-collapse:collapse}
.pm-matrix thead th{position:sticky;top:0;z-index:2;background:var(--iph);color:#fff;font-size:12px;
  text-transform:uppercase;letter-spacing:.03em;padding:8px 10px}
.pm-matrix th.pm-tool{text-align:left;font-weight:600}
.pm-matrix tbody th{text-transform:none;letter-spacing:0;font-size:14px;background:#fff;color:var(--ink)}
.pm-matrix tbody .pm-ghead th{font-size:13px;text-transform:uppercase;letter-spacing:.3px}
.pm-matrix .pm-c{text-align:center;width:13%}
.pm-matrix td,.pm-matrix th{border-bottom:1px solid var(--line);padding:6px 10px}
.pm-ghead th,.pm-ghead td{background:#f4f6f9;color:var(--iph-dark)}
.pm-ghead th{font-weight:700}
.pm-ghead .cnt{color:var(--muted);font-weight:400;font-size:12px;margin-left:4px}
.pm-all{background:#fff;border:1px solid var(--line);border-radius:6px;font-size:11px;color:var(--iph);
  padding:2px 8px;cursor:pointer}
.pm-all:hover{border-color:var(--iph)}
.pm-all .pm-l{display:none}
.pm-row:hover th,.pm-row:hover td{background:#f9fafc}
.pm-opt{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin:0;cursor:pointer;
  min-width:44px;min-height:32px}
.pm-opt input{width:18px;height:18px;margin:0;accent-color:var(--iph)}
.pm-opt .pm-l{display:none}
.pm-adds{display:block;font-size:12px;font-weight:400;color:var(--muted)}
.pm-gran td{padding:0 10px 6px 26px;border-bottom:1px solid var(--line)}
.pm-gran summary{font-size:12px;color:var(--iph);cursor:pointer;padding:2px 0}
.pm-gran .cnt{color:var(--muted)}
.pm-sw{display:flex;gap:8px;align-items:center;font-weight:400;font-size:13px;margin:4px 0 4px 6px}
.pm-sw input{width:auto;margin:0;accent-color:var(--iph)}
.pm-note{color:var(--muted);font-size:12px}
.pm-save{position:sticky;bottom:0;background:var(--bg);padding:8px 0;z-index:3}
.pv-list{list-style:none;margin:0;padding:0}
.pv-list>li{padding:6px 0;border-top:1px solid var(--line)}
.pv-list>li:first-child{border-top:0}
.pv-subs{margin:2px 0 0;padding-left:16px;list-style:none}
.ua-table td{padding:5px 8px;vertical-align:top}
.ro-card{max-width:640px;border-left:4px solid var(--iph)}
@media (max-width:760px){
  /* the phone: one card per tool, its four levels as a row of choices */
  .pm-matrix thead{display:none}
  .pm-matrix,.pm-matrix tbody{display:block}
  .pm-matrix tr{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:6px 10px;
    border-bottom:1px solid var(--line)}
  .pm-matrix tr>th,.pm-matrix tr>td,.pm-matrix .pm-c{display:block;border:0;padding:0;width:auto;background:none}
  .pm-matrix tr>.pm-tool{grid-column:1/-1;padding:2px 0}
  .pm-ghead{background:#f4f6f9}
  .pm-gran{display:block}
  .pm-gran td{grid-column:1/-1;padding:0}
  .pm-opt{display:flex;flex-direction:column;gap:2px;font-size:11px;font-weight:600;color:var(--iph-dark);
    border:1px solid var(--line);border-radius:8px;padding:4px 2px;min-height:44px;width:100%;
    box-sizing:border-box;white-space:nowrap}
  .pm-opt:has(input:checked){border-color:var(--iph);background:#e8eefb}
  .pm-opt .pm-l,.pm-all .pm-l{display:inline}
  .pm-all{width:100%;min-height:36px}
  .pm-all .pm-d{display:none}
  .rl-acts{white-space:normal}
}
/* RFIs and site instructions (2026-10-03) */
.pill.rf-draft,.pill.rf-received{background:#eef1f5;color:var(--muted)}
.pill.rf-open,.pill.rf-in-review{background:#fdf1e5;color:#8a5a00}
.pill.rf-answered,.pill.rf-priced{background:#e8eefb;color:var(--iph)}
.pill.rf-closed,.pill.rf-proceeding{background:#e6f4ea;color:var(--ok)}
.pill.rf-void{background:#fdecee;color:#8c1d2a}
/* Drawings (2026-10-03) */
.dw-pending{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-left:4px solid var(--accent)}
.dw-log .dw-disc th{background:#f4f6f9;color:var(--iph-dark);font-size:13px;text-align:left;padding-top:10px}
.dw-log tr.dw-old td{color:var(--muted)}
.pill.dw-processing{background:#e8eefb;color:var(--iph)}
.pill.dw-review{background:#fdf1e5;color:#8a5a00}
.pill.dw-published{background:#e6f4ea;color:var(--ok)}
.pill.dw-problem{background:#fdecee;color:#8c1d2a}
.dw-review{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:14px;align-items:start}
.dw-rt td:nth-child(3){width:100%}
.dw-rt td:nth-child(3) input{width:100%;min-width:140px}
.dw-rt select{width:auto;max-width:130px}
.dw-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.dw-rt td{vertical-align:top}
.dw-rt input,.dw-rt select{margin:0}
.dw-rt tr{cursor:pointer}
.dw-rt tr.dw-on td{background:#eef3fb}
.dw-rt tr.dw-skip td{opacity:.45}
.dw-rt input.dw-blank{border-color:var(--accent);background:#fffaf4}
.dw-replaces{color:var(--iph)}
.dw-peek{position:sticky;top:12px;display:flex;flex-direction:column;gap:6px}
.dw-peek iframe{width:100%;height:72vh;min-height:420px;border:1px solid var(--line);border-radius:6px;background:#e9ecf1}
.dw-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.dw-title{font-weight:500;color:var(--muted)}
@media (max-width:900px){.dw-review{grid-template-columns:minmax(0,1fr)}.dw-peek{position:static}}

/* Subcontracts (2026-10-04) */
.pill.sc-draft,.pill.sc-closed{background:#eef1f5;color:var(--muted)}
.pill.sc-issued{background:#e8eefb;color:var(--iph)}
.pill.sc-pending{background:#fdf1e5;color:#8a5a00}
.pill.sc-executed,.pill.sc-approved{background:#e6f4ea;color:var(--ok)}
.pill.sc-void,.pill.sc-rejected{background:#fdecee;color:#8c1d2a}
.sub-lines input,.sub-lines select{width:100%}
.sub-lines [name=phase]{min-width:96px}.sub-lines [name=cat]{min-width:128px}
.sub-lines [name=amount]{min-width:112px}.sub-lines [name=desc]{min-width:200px}

/* Phone mode (2026-10-04): opened from the phone app, a tool page keeps a way
   back. Only on phone-sized screens - a wide window ignores the cookie. */
.mbar{display:none}
@media (max-width: 900px){
  .mf-m .mbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:60;
    background:var(--iph);color:#fff;padding:10px 12px;padding-top:max(10px, env(safe-area-inset-top))}
  .mf-m .mbar-back{background:none;border:0;color:#fff;font:inherit;font-size:16px;font-weight:600;
    padding:6px 8px 6px 0;cursor:pointer;min-height:40px}
  .mf-m .mbar-title{flex:1;font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;text-align:center}
  .mf-m .mbar-menu{color:#fff;font-weight:600;font-size:14px;border:1px solid rgba(255,255,255,.5);
    border-radius:6px;padding:7px 10px;text-decoration:none;white-space:nowrap}
  .mf-m header.top, .mf-m aside.sidenav, .mf-m .envbar .envwhy{display:none}
}

/* Go to project as a drop-down (2026-10-04): tap for a scrolling list, type to narrow. */
header.top .projsearch{position:relative}
.projdrop{position:absolute;top:calc(100% + 6px);left:0;width:min(440px,92vw);max-height:60vh;
  overflow:auto;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 10px 30px rgba(0,16,40,.22);z-index:70;padding:4px;-webkit-overflow-scrolling:touch}
.projdrop a{display:block;padding:9px 12px;border-radius:6px;color:var(--ink);font-size:13.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.projdrop a b{color:var(--iph);margin-right:6px}
.projdrop a:hover,.projdrop a.on{background:#eaf1fa}
.projdrop .pd-none{padding:10px 12px;color:var(--muted);font-size:13px}
/* display:block above beat the hidden attribute, so typing never narrowed the list (QA 2026-10-29, M1) */
.projdrop a[hidden]{display:none}
.projdrop .pd-head{padding:8px 12px 3px;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
@media (max-width: 900px){.projdrop{left:auto;right:0}}

/* The iPhone status bar (2026-10-04: "can't see the top of the app on my phone, it's
   blurred"). Installed on the home screen the page runs underneath a see-through
   status bar; keep everything below it and put IPH navy behind the clock. */
body{padding-top:env(safe-area-inset-top)}
body::before{content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top);
  background:var(--iph);z-index:100;pointer-events:none}
@media (max-width: 900px){
  .mf-m .mbar{top:env(safe-area-inset-top);padding-top:10px}
}

/* Word search on the drawings (2026-10-04, app/drawing_search.py) */
.dw-hits tr.dw-old td{color:var(--muted)}
.dw-snip{overflow-wrap:anywhere}
.dw-snip mark{background:#fff1b8;color:var(--ink);padding:0 2px;border-radius:2px;font-weight:600}

/* ---- Phone walkthrough fixes (2026-10-04) --------------------------------
   Found using the phone app the way a foreman would: one thumb, outdoors.
   All inside phone-width media queries; .mf-m = came in through /m (base.html). */
@media (max-width: 900px){
  /* PM alerts ("No rate set", "LMEs still in draft") link to
     billing pages a foreman cannot open - noise on site, and they push the
     tool down. The desktop layout still shows them. */
  .mf-m .phead-alerts{display:none}
  /* The job list and job menu: Account / Full site / Sign out moved to the
     More tab (/m/more) - 19px-tall links where a thumb hit Sign out. */
  body:has(.mtabs) header.top nav.banner-right{display:none}
  .mob .mback{display:inline-block;padding:10px 14px 10px 0;font-size:16px}
  .mrow .mtext small.mwrap{white-space:normal}
}
@media (max-width: 700px){
  /* `font:13px inherit` near the top of this file is not valid CSS, so the
     browser drops it and fields fall back to its own fonts - every textarea
     was monospace on a phone. */
  input, select, textarea, button{font-family:inherit}
  /* Thumb-sized: .btn.sm was 29px tall, a crumb link 17px. */
  .mf-m .btn{padding:11px 14px}
  .mf-m .btn.sm{padding:11px 12px;font-size:13px}
  .mf-m .crumb a{display:inline-block;padding:10px 14px 10px 0;font-size:14px}
  .mf-m input[type=checkbox], .mf-m input[type=radio]{width:22px;height:22px;flex:none}
  .mf-m summary:not(.btn){padding:11px 0}
  /* A row you were sent back to (#obs-1) had a red bar on every cell. */
  tr:target td{box-shadow:none}
  tr:target td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
  /* KPI tiles: four full-width cards pushed the list below the fold. Two up. */
  .mf-m .grid:has(> .kpi){grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .mf-m .grid > .card.kpi{padding:10px 12px}
  .mf-m .grid > .kpi .v{font-size:18px}
  .mf-m .grid > .kpi .l{font-size:10.5px}

  /* Timesheets: a person's lines were an 8-column table - Edit sat off the
     right edge and its form opened inside a 120px column. One line per row. */
  .ts-day .tbl-wrap{overflow:visible;border:0;border-radius:0}
  .ts-day .tbl-wrap table, .ts-day .tbl-wrap tbody{display:block}
  .ts-day .tbl-wrap thead{display:none}
  .ts-day .tbl-wrap tbody tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;
    padding:10px 0;border-bottom:1px solid var(--line)}
  .ts-day .tbl-wrap tbody td{display:block;border:0;padding:0;background:none}
  .ts-day .tbl-wrap tbody td:nth-child(1){font-weight:700;font-size:15px;color:var(--iph-dark)}
  .ts-day .tbl-wrap tbody td:nth-child(3)::after{content:" h"}
  .ts-day .tbl-wrap tbody td:nth-child(4):not(:empty)::before{content:"LOA "}
  .ts-day .tbl-wrap tbody td:nth-child(5):not(:empty)::before{content:"Travel "}
  .ts-day .tbl-wrap tbody td:nth-child(5):not(:empty)::after{content:" h"}
  .ts-day .tbl-wrap tbody td:nth-child(7){flex-basis:100%;color:var(--muted)}
  .ts-day .tbl-wrap tbody td:nth-child(7):empty{display:none}
  .ts-day .tbl-wrap tbody td:last-child{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px;
    align-items:flex-start}
  .ts-day .tbl-wrap tbody td:last-child details{flex:0 0 auto;margin:0}
  .ts-day .tbl-wrap tbody td:last-child details[open]{flex:1 1 100%}
  .ts-day .tbl-wrap tbody td:last-child details > summary{display:inline-block;list-style:none;
    padding:10px 16px;border:1px solid var(--iph);border-radius:6px;background:#fff;
    color:var(--iph);font-size:13px;font-weight:600}
  .ts-day .tbl-wrap tbody td:last-child details > summary::-webkit-details-marker{display:none}
  .ts-day .tbl-wrap tbody td:only-child{font-weight:400;font-size:13px;color:var(--muted)}

  /* Crew time: the phase-row table clipped the Hours box off the right edge;
     the per-person grid lost the names when scrolled sideways. */
  #crewform .tbl-wrap:has(#crewrows){overflow:visible;border:0}
  #crewform #crewrows, #crewform #crewrows tbody{display:block}
  #crewform #crewrows thead{display:none}
  #crewform #crewrows .crew-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;
    gap:6px 8px;padding:10px 0;border-bottom:1px solid var(--line);align-items:end}
  #crewform #crewrows .crew-row td{display:block;padding:0;border:0;background:none}
  #crewform #crewrows .crew-row td:first-child{grid-column:1 / -1}
  #crewform #crewrows .crew-row td:nth-child(2)::before{content:"Type";display:block;font-size:12px;color:var(--muted)}
  #crewform #crewrows .crew-row td:nth-child(3)::before{content:"Hours";display:block;font-size:12px;color:var(--muted)}
  #crewform #crewrows select, #crewform #crewrows input{min-width:0;width:100%}
  #crewform #crewrows .pg-del{width:44px;height:44px;font-size:22px;border:1px solid var(--line);
    border-radius:8px;background:#fff;color:var(--muted)}
  #crewform #crewgrid th:first-child, #crewform #crewgrid td:first-child{position:sticky;left:0;z-index:1;
    background:#fff;box-shadow:1px 0 0 var(--line)}
  #crewform #crewgrid th:first-child{background:#f7f9fc}
  #crewform .crew-person{min-height:44px}
  #crewform .crew-person input{width:22px;height:22px}

  /* Team: the role pickers were squeezed to an arrow. */
  .tbl-wrap form.team-role select{min-width:150px}
  a.tel{display:inline-block;padding:8px 0;white-space:nowrap}
  /* Go to project (desktop layout on a phone): 13px made iPhone zoom the page
     on tap; list rows thumb-sized. */
  header.top .projsearch input{font-size:16px}
  .projdrop a{padding:12px}
}
@media (max-width: 480px){
  /* Here the search box is the first thing on its row, so the list hangs from
     its left edge - right-aligned it ran off the left of the screen and cut
     the job numbers off. */
  .projdrop{left:0;right:auto;width:calc(100vw - 24px)}
}
.only-phone{display:none}
@media (max-width: 900px){header.top .only-phone{display:inline-flex}}

/* ---- Project navigation (2026-10-05): the path bar and the tool menu ---------------------
   Dashboard > group > tool, with a menu of every tool, at the top of every
   project page; the side menu can be hidden (remembered) and the bar still
   gets you anywhere. Replaces the "<- PCOs" links on detail pages. */
.pnav{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:0 0 14px;font-size:13px;
  color:var(--muted);min-height:32px}
.pnav a{color:var(--iph);font-weight:600}
.pnav a:hover{text-decoration:underline}
.pnav-sep{color:#9aa3ad;font-size:15px;line-height:1}
.pnav-group{color:var(--muted)}
/* "Show menu" only once the side menu is hidden - the menu hides from its own button */
.pnav-menu{display:none;align-items:center;gap:6px;border:1px solid var(--iph);background:#fff;border-radius:6px;
  height:32px;padding:0 11px;cursor:pointer;color:var(--iph);font:inherit;font-size:13px;font-weight:700;
  line-height:1;margin-right:2px}
.pnav-menu:hover{background:#eaf1fa}
html.sn-collapsed .pnav-menu{display:inline-flex}
/* Tools: a solid button leading the bar, so the way to every tool is obvious */
.pnav-switch{position:static;display:inline-block;margin-right:6px}   /* menu hangs from the bar's left edge */
.pnav-switch>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;height:32px;
  padding:0 13px;border-radius:6px;background:var(--iph);color:#fff;font-weight:700;font-size:13.5px;
  border:1px solid var(--iph);box-shadow:0 1px 2px rgba(0,16,40,.18);user-select:none}
.pnav-switch>summary::-webkit-details-marker{display:none}
.pnav-switch>summary:hover,.pnav-switch[open]>summary{background:#0b3470;border-color:#0b3470}
.pnav-switch>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pnav-ic{width:14px;height:14px;fill:currentColor;flex:none}
.pnav-pop{position:absolute;left:0;top:calc(100% + 6px);z-index:65;background:#fff;border:1px solid var(--line);
  border-radius:8px;box-shadow:0 10px 30px rgba(0,16,40,.18);padding:6px;width:min(820px,92vw);
  max-height:75vh;overflow-y:auto;overflow-x:hidden;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 8px;align-items:start}
.pnav-g{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  color:var(--iph);padding:8px 10px 3px}
.pnav-pop a{display:block;padding:6px 10px;border-radius:5px;color:var(--ink);font-weight:500}
.pnav-pop a:hover{background:#f4f7fb;text-decoration:none}
.pnav-pop a.on{background:#eaf1fa;color:var(--iph);font-weight:700}
html.sn-collapsed .wrap:has(.sidenav){padding-left:24px}
html.sn-collapsed .wrap:has(.sidenav)>.sidenav{display:none}
@media (max-width:700px){
  .pnav-menu,html.sn-collapsed .pnav-menu{display:none}   /* phones fold the menu into its own bar */
  html.sn-collapsed .wrap:has(.sidenav)>.sidenav{display:block}
  .pnav-pop{grid-template-columns:1fr}
}

/* ---- the company menu (_company_nav.html, app/company_nav.py, 2026-10-28) -----------
   The company bar across the top became this menu down the left; the banner's Company
   button leads to it. The red rule the bar carried now closes the banner. */
header.top{border-bottom:3px solid var(--accent)}
header.top .cobtn{border:1px solid rgba(255,255,255,.4);color:#fff;font-weight:700;margin-left:4px;
  white-space:nowrap;flex:none}
header.top .cobtn.on{background:rgba(255,255,255,.16);border-color:#fff}
header.top .hubbtn{margin-left:-10px}                       /* a pair with Company */
/* Company + Projects Hub (2026-10-30) need the room. The job number never gives way (QA
   2026-10-30: at 1280 wide "266010" ran under Go to project - min-width:0 let the job
   shrink below its own number). On a narrower window the job name gives way first, then
   Go to project narrows (230px down to 140px), then the banner takes a second line.
   - each item starts at its smallest (flex-basis 0, never below its content), so the
     banner wraps only when even that does not fit;
   - the job is a grid: the number's column is never narrower than the number, the
     name's can go to nothing (ellipsizing on the way);
   - so is Go to project: its box column runs 140px to 230px;
   - the room left over goes to the right-hand group first (100:1) until Go to project is
     full width, then to the job name; max-content stops both, so the right-hand group
     still sits at the right. So the job name shows wherever there is room, wrapped or
     not; phones (760 and under) keep their own layout, without it. */
header.top .banner{height:auto;min-height:64px;flex-wrap:wrap;row-gap:8px;padding-top:8px;padding-bottom:8px}
@media (min-width:761px){
  header.top .bproj{display:grid;grid-template-columns:auto minmax(0,1fr);min-width:auto;flex:1 1 0;
    max-width:max-content}
  header.top .banner-right{flex:100 1 0;max-width:max-content}
  header.top .projsearch{display:grid;grid-template-columns:auto minmax(140px,230px)}
  header.top .projsearch input{width:100%}
  header.top .hmenu{margin:0}       /* details{margin:8px 0} made the group 52px: a 68px banner */
}
/* Feedback (app/feedback.py, 2026-10-30): on every page; an administrator sees how many are New */
header.top .fbbtn{position:relative;white-space:nowrap}
header.top .fbn{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;
  font-size:11px;font-weight:700;line-height:18px;text-align:center}
@media (max-width:760px){header.top .fbn{position:absolute;top:0;right:-2px;min-width:16px;height:16px;line-height:16px;font-size:10px;padding:0 4px}}
.mf-m .mbar .mbar-fb{border-color:transparent;background:none}
/* the Message Board (2026-10-31): unread count on the phone Jobs page's envelope (the tool pages'
   top bar lost its envelope 2026-11-07) */
.mbar-n{position:absolute;top:3px;right:1px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;line-height:17px;text-align:center}
.mtop-row .mmsg{position:relative;margin-left:auto;padding:0 11px}
.mtop-row .mmsg .mbar-n{top:-5px;right:-5px}
.sidenav .sn-count{margin-left:4px;padding:1px 7px;border-radius:9px;background:var(--accent);color:#fff;font-size:11px}
/* a page with its own side menu (Settings, the Bid Board) keeps only that one */
.wrap:has(.sidenav:not(.cnav))>.cnav,.wrap:has(.sidenav:not(.cnav))>.cn-show{display:none}
/* hidden by Hide Menu: Show Menu brings it back (a project page has its own, in the path bar) */
.cn-show{display:none}
html.sn-collapsed .wrap>.cn-show{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;
  padding:6px 12px;border:1px solid var(--iph);border-radius:6px;background:#fff;color:var(--iph);
  font:inherit;font-size:13px;font-weight:700;cursor:pointer}
html.sn-collapsed .wrap:has(.sidenav:not(.cnav))>.cn-show{display:none}
@media (max-width:700px){
  html.sn-collapsed .wrap>.cn-show{display:none}           /* phones fold the menu into its own bar */
  header.top .cobtn{margin-left:0}
}
@media (max-width:900px){ .mf-m .pnav{display:none} }      /* the phone bar does this job */
@media print{.pnav,.sidenav{display:none} .wrap:has(.sidenav){padding-left:0}}

/* ---- Drawings on a phone (2026-10-05, tracker FLHA-020) ---------------------------------
   Procore's drawings list (REF-02) in IPH colours, shown only in phone mode on a
   phone; the desk keeps the log table (.dw-desk). */
.dwc{display:none}
.mtabs.ptab-shell{display:none}
@media (max-width:900px){
  .mf-m .dwc{display:block;padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .mf-m .dw-desk{display:none}
  .mf-m .mtabs.ptab-shell{display:flex}
  .mf-m body:has(.ptab-shell) .wrap{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .mf-m body:has(.ptab-shell) .toast{bottom:calc(82px + env(safe-area-inset-bottom))}
}
.dwc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 2px 10px}
.dwc-head h1,.dwc-head h2{margin:0;font-size:24px;color:var(--ink)}
.dwc-setsbtn{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:8px;background:#e9edf3;
  color:var(--iph);font-weight:800}
.dwc-setsbtn:hover{text-decoration:none}
.dwc-note{background:#fef6ee;border:1px solid #f6d9bd;color:#8a4b17;border-radius:8px;padding:9px 12px;margin:0 0 10px;font-size:13.5px}
.dwc-group{margin:0 0 12px}
.dwc-group>summary{display:flex;align-items:center;gap:12px;list-style:none;cursor:pointer;padding:10px 4px;min-height:56px}
.dwc-group>summary::-webkit-details-marker{display:none}
.dwc-chev{width:12px;height:12px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(-45deg);
  margin:0 4px;transition:transform .15s;flex:none}
.dwc-group[open] .dwc-chev{transform:rotate(45deg)}
.dwc-gt{flex:1;display:flex;flex-direction:column}
.dwc-gt b{font-size:19px}
.dwc-gt small{color:var(--muted);font-size:14px}
.dwc-cloud{width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:#9aa3ad}
.dwc-cloud svg,.dwc-thumb svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dwc-card{display:flex;gap:14px;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;
  margin:0 0 10px;color:var(--ink);min-height:96px}
.dwc-card:hover,.dwc-card:active{text-decoration:none;border-color:#9fb3cc}
.dwc-card:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.dwc-thumb{flex:none;width:120px;height:90px;border:1px solid var(--line);border-radius:4px;background:#f4f6f9;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.dwc-thumb img{width:100%;height:100%;object-fit:contain;background:#fff}
.dwc-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.dwc-txt b{font-size:18px;color:var(--iph)}
.dwc-txt span{font-size:14px;text-transform:uppercase;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dwc-txt small{margin-top:auto;color:var(--muted);font-size:13px}
.dwc-old{opacity:.7}
.dwc-sets{display:none;position:fixed;inset:0;z-index:70;background:var(--bg);overflow:auto;padding:calc(14px + env(safe-area-inset-top)) 14px 90px}
.dwc-sets:target{display:block}

/* ---- The drawing tool, full page (2026-10-05, tracker FLHA-019) ------------------------
   Procore's layout (REF-01): Done / sheet and revision / actions across the top,
   the markup tools down the right, arrows bottom-right, a pull-up drawer to find a
   sheet. Always full page on a phone, by Expand on a desk (static/pdfviewer.js);
   it is a class on the same element, so the open drawing is never reloaded. */
.pdfv-top,.pdfv-tools,.pdfv-nav,.pdfv-drawer{display:none}
.pdfv-stage{position:relative}
html.pdfv-lock,html.pdfv-lock body{overflow:hidden}
.pdfv.pdfv-full{position:fixed;inset:0;z-index:300;margin:0;gap:0;background:#1f2328;color:#fff;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.pdfv-full .pdfv-top{display:flex;align-items:center;gap:6px;min-height:56px;padding:0 6px}
.pdfv-done{background:none;border:0;color:#fff;font:inherit;font-size:18px;font-weight:800;min-height:48px;padding:0 14px;cursor:pointer}
.pdfv-title{flex:1;min-width:0;text-align:center;font-family:"Roboto","Segoe UI",Arial,sans-serif;font-weight:800;font-size:19px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdfv-acts{display:flex;gap:2px}
.pdfv-ib{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:0;background:none;
  color:#fff;cursor:pointer;padding:0}
.pdfv-ib:hover{background:#3a4149;text-decoration:none}
.pdfv-ib svg,.pdfv-tools svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pdfv-full .pdfv-bar{background:#2b3036;color:#dfe5ec;padding:4px 10px}
.pdfv-full .pdfv-bar .muted{color:#b8c1cb}
/* full page keeps Save; the trial notes and Download with markups (the PDF the
   watermark note is about) stay on the page layout, so the drawing gets the room */
.pdfv-full .pdfv-expand,.pdfv-full .pdfv-trial,.pdfv-full [data-pdfv="pdf"]{display:none}
/* The drawing fills everything above one bar along the bottom (2026-10-06): Sheets on
   the left, the markup tools in the middle, previous / next on the right. Nothing sits
   over the drawing; the sheet finder and the colours open above the bar only when tapped. */
.pdfv-full .pdfv-stage{flex:1;min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:minmax(0,1fr) auto;background:#1f2328}
.pdfv-full .pdfv-frame{grid-column:1 / -1;grid-row:1;height:100%;min-height:0;border:0;border-radius:0}
.pdfv-full .pdfv-tools{display:flex;grid-column:2;grid-row:2;position:relative;flex-direction:row;justify-content:flex-start;
  gap:2px;padding:4px;min-width:0;overflow-x:auto;scrollbar-width:none;border-top:1px solid #3a4149}
.pdfv-tools>button{flex:none;width:64px;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:0;background:none;color:#fff;border-radius:8px;font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;padding:4px}
/* centred while it fits, scrolls from the first tool when it does not (justify-content:center would cut Select off) */
.pdfv-tools>button:first-child{margin-left:auto}
.pdfv-tools>button:last-of-type{margin-right:auto}
.pdfv-tools>button:hover{background:#3a4149}
.pdfv-tools>button[aria-pressed="true"]{background:#3a4149;box-shadow:inset 0 -3px 0 var(--accent)}
.pdfv-dot{display:block;width:24px;height:24px;border-radius:50%;border:2px solid #fff}
.pdfv-full .pdfv-tools:has(.pdfv-colors:not([hidden])){overflow:visible}
.pdfv-colors{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);display:grid;
  grid-template-columns:repeat(6,44px);gap:8px;background:#1f2328;padding:10px;border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.35);z-index:7}
.pdfv-colors[hidden]{display:none}
.pdfv-colors button{width:44px;height:44px;border-radius:50%;border:2px solid #fff;padding:0;cursor:pointer}
.pdfv-full .pdfv-nav{display:flex;grid-column:3;grid-row:2;align-items:center;border-top:1px solid #3a4149;padding:0 4px}
.pdfv-nav a,.pdfv-nav span{width:56px;height:56px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:38px;
  line-height:1;text-decoration:none}
.pdfv-nav span{opacity:.3}
.pdfv-nav a:hover{background:#3a4149;border-radius:10px;text-decoration:none}
.pdfv-full .pdfv-drawer{display:flex;grid-column:1;grid-row:2;position:relative;align-items:center;
  border-top:1px solid #3a4149;padding:0 4px}
.pdfv-handle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:64px;min-height:56px;
  background:none;border:0;border-radius:8px;color:#fff;cursor:pointer;padding:4px;font:inherit;font-size:11.5px}
.pdfv-handle:hover,.pdfv-drawer[data-open="1"] .pdfv-handle{background:#3a4149}
.pdfv-handle svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.pdfv-panel{display:none;position:absolute;left:4px;bottom:calc(100% + 6px);z-index:7;width:min(560px,calc(100vw - 24px));
  padding-top:12px;background:#1f2328;border-radius:14px;box-shadow:0 -6px 20px rgba(0,0,0,.35)}
.pdfv-drawer[data-open="1"] .pdfv-panel{display:block}
.pdfv-find{display:flex;gap:8px;padding:0 12px 12px}
.pdfv-find input{flex:1;min-width:0;min-height:48px;border-radius:10px;border:0;background:#3a4149;color:#fff;padding:0 14px;font-size:16px}
.pdfv-find input::placeholder{color:#b8c1cb}
.pdfv-find select{min-height:48px;max-width:38%;border-radius:10px;border:0;background:#3a4149;color:#fff;padding:0 10px;font-size:15px}
.pdfv-list{display:none;overflow:auto;max-height:50vh;padding:0 8px 12px;-webkit-overflow-scrolling:touch}
.pdfv-drawer[data-open="1"] .pdfv-list{display:block}
.pdfv-list a{display:block;padding:12px;color:#e8edf2;border-radius:8px;text-decoration:none;font-size:14.5px}
.pdfv-list a:hover{background:#2b3036}
.pdfv-list a.on{background:#3a4149}
.pdfv-list a b{color:#fff;margin-right:6px}
.pdfv-list a[hidden]{display:none}
.pdfv-revs-h{color:#aab3bd;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:6px 12px}
.pdfv-revs p{padding:0 12px;color:#b8c1cb}
.pdfv-drawer.revs .pdfv-find,.pdfv-drawer.revs .pdfv-list>a{display:none}
@media (max-width:900px){.pdfv-only-desk{display:none}}
@media (max-width:560px){
  .pdfv-tools>button{width:50px;min-height:52px;font-size:10px}
  .pdfv-tools svg,.pdfv-handle svg{width:22px;height:22px}
  .pdfv-handle{min-width:50px;min-height:52px;font-size:10px}
  .pdfv-nav a,.pdfv-nav span{width:40px;height:52px;font-size:32px}
  .pdfv-colors{grid-template-columns:repeat(3,44px)}
}
@media print{.pdfv-top,.pdfv-tools,.pdfv-nav,.pdfv-drawer{display:none}}

/* ==========================================================================
   Richer blue, and a phone that looks like an app (2026-10-07).
   Jeremy: "i also would like the app to have richer blue coloring throughout
   the pages that have small text and are not mobile friendly need to be
   adjusted. The mobile app i don't want to look like a web page on a phone".

   Everywhere: a blue-tinted page, navy titles, navy table heads with white
   text (IPH's brand standard for table headers), a navy side-menu highlight.
   Phone layout (.mf-m, base.html): 16px text and nothing under 12.5px, an app
   bar naming the screen, wide tables as cards (static/phone.js), thumb-sized
   buttons and fields, navy heads on the job list and More.
   ========================================================================== */
:root{--bg:#e8eef6;--line:#d5deea;--tint:#e3ebf6;--navy-2:#0b3470}
h1{color:var(--iph)}
h2{color:var(--iph);border-bottom-color:#cfdbeb}
.card{border-color:var(--line);box-shadow:0 1px 3px rgba(0,33,75,.07)}
.card h3{color:var(--iph)}
.kpi .v{color:var(--iph)}
/* table heads: navy, white text */
thead th{background:var(--iph);color:#fff;border-bottom-color:var(--iph)}
thead th a,thead th a:hover{color:#fff}
.cr-grip:hover,.cr-grip.dragging{background:var(--accent)}
/* heads that carry their own colours keep them (bid leveling's low bidder, the
   schedule grid's dates) - and a grey header colour never lands on navy */
html .lv thead th,html .se-grid thead th{color:var(--iph-dark)}
html .ins .ins-opts thead th,html table.tm-rvw > thead th{color:#fff}
html #crewform #crewgrid thead th:first-child{background:var(--iph)}
/* the side menu: the page you are on, in navy */
.sidenav{border-color:var(--line)}
.sidenav .sn-group{background:var(--tint);border-color:#cbd8ea}
.sidenav a.on{background:var(--iph);color:#fff;border-left-color:var(--accent)}
.sidenav a.on:hover{background:var(--navy-2)}
.sidenav a:hover{background:#eaf0f8}

/* ---- the phone's own screens (/m, /m/more, Camera): navy heads ---------- */
.mob > .mtop:first-child{background:var(--iph);color:#fff;margin:-12px -12px 14px;padding:14px 14px 16px;
  border-radius:0 0 22px 22px;box-shadow:0 6px 16px rgba(0,33,75,.18)}
body:has(.mob > .mtop:first-child) header.top{box-shadow:none}
@media (min-width:701px){.mob > .mtop:first-child{margin:0 0 16px;border-radius:18px}}
.mob > .mtop:first-child h1{color:#fff}
.mob > .mtop:first-child .msub{color:#cfdcec}
.mob > .mtop:first-child .mback{color:#fff}
.mob > .mtop:first-child .msearch{border:0;box-shadow:0 2px 6px rgba(0,0,0,.18);min-height:50px;font-size:17px}
.mob > .mtop:first-child .mfull{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff}
/* Today's FLHAs this person is on, at the top of the phone's home (2026-10-30,
   _m_myflha.html): one card each, navy on white; STOP WORK in IPH red. */
.mob .mflha{display:grid;gap:8px;margin:0 0 14px}
.mob .mflha-row{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 12px;background:#fff;
  border:2px solid var(--iph);border-radius:12px;color:#1a1d21;text-decoration:none}
.mob .mflha-row:hover{text-decoration:none;background:#f4f7fb}
.mob .mflha-ic{flex:none;width:38px;height:38px;border-radius:50%;background:var(--iph);color:#fff;display:flex;
  align-items:center;justify-content:center}
.mob .mflha-ic .ic{width:22px;height:22px}
.mob .mflha-t{flex:1;min-width:0;display:flex;flex-direction:column}
.mob .mflha-t b{font-size:15.5px;color:var(--iph);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mob .mflha-t small{font-size:13px;color:#4a5568;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mob .mflha-pill{flex:none;font-size:11.5px;font-weight:800;padding:3px 8px;border-radius:12px;background:var(--accent);color:#fff}
.mob .mflha-pill.await{background:#fff6e0;color:#6b4a00;border:1px solid #e3b341}
.mob .mflha-row.stop{border-color:var(--accent)}
.mob .mflha-row .chev{width:18px;height:18px;flex:none;color:#9aa3ae}
.th .mflha{margin:12px 0 4px}
.msec{font-size:13px;color:var(--iph);letter-spacing:.6px;margin:20px 4px 8px}
.mrow .mtext small{font-size:14px}
.mrow .mtext b{font-size:16.5px}
/* bottom tabs: the one you are on sits in a navy-tinted pill */
.mtabs a{font-size:12px;color:#4a5568}
/* Ask Manifold, in the middle of every bottom bar (2026-10-31) */
.mtabs .mtab-ask{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 7px;
  border:0;background:none;font:inherit;font-size:12px;font-weight:700;color:var(--iph);cursor:pointer}
.mtabs .mtab-ask svg{width:23px;height:23px}
/* Ask shows only where Ask Manifold is on for this person (static/assistant.js) */
.mtab-ask,.mbar-ask,.tbar-ask-in{display:none!important}
.ask-on .mtabs .mtab-ask{display:flex!important}
@media (max-width: 900px){.ask-on.mf-m.ask-in-bar .tbar-ask-in{display:inline-flex!important}}
@media (max-width: 900px){.ask-on.mf-m:not(.ask-in-bar) .mbar-ask{display:flex!important}}
/* Ask is one of the bar's own tabs (2026-11-06, Jeremy: "the ask manifold is a floating
   button but should be integrated into the bottom bar") - in line with the others, its
   icon in a navy pill so it still stands out. Nothing rises out of the bar or floats. */
.mtabs .mtab-ask svg{background:var(--iph);color:#fff;border-radius:14px;padding:3px 16px;box-sizing:content-box}
/* Ask inside a page's own Save bar (static/phone.js) */
.tbar-ask-in{order:-1;flex:none;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:52px;min-height:44px;
  padding:4px 6px;border:0;border-radius:10px;background:var(--tint);color:var(--iph);font:inherit;font-size:11px;
  font-weight:700;cursor:pointer}
.tbar-ask-in svg{width:22px;height:22px}
/* ...or in the top bar, when that Save bar cannot take another button */
@media (max-width: 900px){
  .mf-m .mbar-ask{flex:none;width:40px;height:40px;padding:0;border-radius:50%;align-items:center;justify-content:center;
    border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);color:#fff;cursor:pointer}
  .mf-m .mbar-ask svg{width:22px;height:22px}
  .mf-m .mbar-ask span{display:none}
}
/* the borrowed bar (base.html #mtabs-default) is a phone thing only */
.mtabs.tdef{display:none}
@media (max-width: 900px){.mf-m .mtabs.tdef{display:flex}}
/* the keyboard is up (static/phonebar.js): the bottom bar and the round + step aside */
.kb-open .mtabs,.kb-open .th-fab,.kb-open .ob-fab{display:none!important}
/* a page that cannot scroll, after the keyboard: one frame on their own layer puts the bars back */
.bars-relayout .mtabs,.bars-relayout .th-fab,.bars-relayout .ob-fab{transform:translateZ(0)}
/* an icon added before the status bar became its own strip, on an iOS that reports that strip
   as 0 tall (static/phonebar.js html.sb-under): the page still starts below the clock */
.sb-under body{padding-top:max(env(safe-area-inset-top),54px)}
.sb-under body::before{height:max(env(safe-area-inset-top),54px)}
@media (max-width: 900px){.sb-under.mf-m .mbar{top:max(env(safe-area-inset-top),54px)}}
/* a tool page's bottom bar (static/phone.js): the page's own actions, and Ask */
.mtabs .tbar-act{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 7px;
  border:0;background:none;font:inherit;font-size:12px;font-weight:700;color:var(--iph);text-decoration:none;cursor:pointer}
.mtabs .tbar-act svg{width:23px;height:23px}
.mtabs .tbar-act span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mf-m .in-tbar{display:none!important}
.mf-m body:has(.tbar) .wrap,.mf-m body:has(.tdef) .wrap{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.mf-m body:has(.tbar) .ob-fab{display:none}
body:has(.mtabs) .vx-mic{bottom:calc(84px + env(safe-area-inset-bottom))}
.mtabs a.on{color:var(--iph);font-weight:800}
.mtabs a.on svg{background:var(--tint);border-radius:14px;padding:3px 16px;box-sizing:content-box}

/* ---- the phone layout of every other page ------------------------------- */
@media (max-width: 900px){
  /* the app bar (2026-11-07, Jeremy): Back, the screen's name, Feedback - and nothing else.
     "back = just a bigger back arrow" (no words - they were cut off), the name only (the job
     line under it was cut off most of the time), no Message Board or job menu up here. The
     two ends share the room left over equally, so the name sits in the middle of the screen
     whatever is at either end (Ask joins Feedback when a Save bar has no room for it).
     A solid navy bar with no shadow ("still some shadowing into the header"). */
  .mf-m .mbar{min-height:60px;padding:8px 10px;gap:4px;box-shadow:none}
  .mf-m .mbar-start,.mf-m .mbar-end{flex:1 1 0;min-width:46px;display:flex;align-items:center;gap:6px}
  /* Ask joined Feedback at the end (static/phone.js, when a Save bar has no room for it): the end
     never gets less than the two (86px) - the 46px floor let them spill left over a long name
     (2026-11-08). The name gives way instead (min-width:0 and its ellipsis). */
  .ask-on.mf-m:not(.ask-in-bar) .mbar-end:has(> .mbar-ask){min-width:max-content}
  .mf-m .mbar-end{justify-content:flex-end}
  /* the arrow's tap area runs to the bar's edges - 56 x 60, a gloved thumb's worth - the bar stays 60 tall */
  .mf-m .mbar-back{flex:none;display:flex;align-items:center;justify-content:center;width:56px;height:60px;min-height:44px;
    margin:-8px 0 -8px -10px;padding:0;color:#fff;text-decoration:none}
  .mf-m .mbar-back .ico{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .mf-m .mbar-back:active{background:rgba(255,255,255,.16)}
  .mf-m .mbar-title{flex:0 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2;min-width:0;font-size:inherit}
  .mf-m .mbar-title b{font-size:17px;color:#fff;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mf-m .mbar-menu{flex:none;width:40px;height:40px;padding:0;border-radius:50%;display:flex;align-items:center;
    justify-content:center;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1)}
  .mf-m .mbar-menu .ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

  /* text: 16px body, nothing a thumb has to squint at */
  .mf-m body{font-size:16px}
  .mf-m .small,.mf-m small{font-size:14px}
  .mf-m .muted{color:#4a5568}
  .mf-m label{font-size:15px}
  .mf-m h1{font-size:23px}
  .mf-m h2{font-size:18px}
  .mf-m h3{font-size:16.5px}
  .mf-m .crumb{font-size:14px}
  .mf-m .kpi .l,.mf-m .grid > .kpi .l{font-size:12.5px;color:#3d4a5c}
  .mf-m .kpi .v,.mf-m .grid > .kpi .v{font-size:20px}
  .mf-m table{font-size:15px}
  .mf-m th{font-size:12.5px}
  .mf-m .pill,.mf-m .chip,.mf-m .tag{font-size:13px}

  /* buttons and fields: thumb-sized, rounded like the phone's own */
  .mf-m .btn{min-height:46px;font-size:15px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
  .mf-m .btn.sm{min-height:42px;font-size:14px}
  .mf-m input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),.mf-m select{min-height:46px;border-radius:10px}
  .mf-m textarea{border-radius:10px}

  /* cards */
  .mf-m .card{border-radius:14px;padding:14px}

  /* list tables as cards (static/phone.js marks them .mcards) */
  .mf-m table.mcards,.mf-m table.mcards tbody{display:block;background:none;border:0}
  .mf-m table.mcards thead{display:none}
  .mf-m table.mcards tfoot{display:block}
  .mf-m table.mcards tr{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;
    padding:10px 14px;margin:0 0 10px;box-shadow:0 1px 2px rgba(0,33,75,.05)}
  .mf-m table.mcards td{display:flex;gap:12px;justify-content:space-between;align-items:baseline;border:0;
    padding:5px 0;text-align:right;overflow-wrap:anywhere;background:none}
  .mf-m table.mcards td::before{content:attr(data-label);flex:none;max-width:45%;text-align:left;font-size:12.5px;
    font-weight:700;color:#3d4a5c;text-transform:uppercase;letter-spacing:.3px}
  .mf-m table.mcards td:first-child{display:block;text-align:left;font-size:16.5px;font-weight:700;color:var(--iph);padding-top:0}
  .mf-m table.mcards td:first-child::before,.mf-m table.mcards td[data-label=""]::before{display:none}
  .mf-m table.mcards td[data-label=""]{justify-content:flex-start;text-align:left}
  .mf-m table.mcards td:empty{display:none}
  .mf-m .tbl-wrap:has(> table.mcards){overflow:visible;border:0;background:none;box-shadow:none}
  /* tables people type into scroll sideways inside their own box */
  .mf-m .mscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px;background:#fff}
}

/* ---- one Back (2026-11-07, Jeremy: "two back buttons") ----------------------------------
   A phone page with the top bar (.mbar) has one Back, the bar's. A page's own back link -
   "‹ Inspections", "‹ NCRs", "‹ Templates", the company pages' breadcrumb - steps aside on the
   phone only. The phone's own pages (/m: no top bar) and the desk keep theirs. Another page's
   back link can join with data-phone-back. (The FLHA pages already hide theirs, flha.css.) */
@media (max-width: 900px){
  .mf-m body:has(> .mbar) :is(.ins-back,.ncr-back,nav.crumb,[data-phone-back]){display:none}
  .mf-m body:has(> .mbar) .ins .ins-bar{grid-template-columns:minmax(0,1fr) auto}
  .mf-m body:has(> .mbar) .ins .ins-bar > .ins-title{text-align:left}
}

/* ---- the top of the screen on an iPhone (2026-11-07, Jeremy: the header is better but "still
   some shadowing into the header"; no screenshot - NOT yet seen on an iPhone). iOS 26 ignores
   theme-color and takes the colour behind the clock, and of its scroll-edge shading, from the
   page itself: the page's background, or a solid full-width bar at the top. So on the phone
   pages nothing light or see-through touches the top: the bar has no shadow (above), the page
   behind everything is navy (pulled down, or any edge tint, it shows navy, not grey) while the
   page itself still fills the screen in its own grey, and a bar a page keeps stuck to the top
   waits under the top bar instead of sliding behind it with its edge showing. */
@media (max-width: 900px){
  html.mf-m,html:has(.mob > .mtop:first-child){background:var(--iph)}
  html.mf-m body,html:has(.mob > .mtop:first-child) body{min-height:100vh;min-height:100dvh;box-sizing:border-box}
  .mf-m body:has(> .mbar) :is(.pg-savebar,.dir-bulk){top:calc(60px + env(safe-area-inset-top))}
  .sb-under.mf-m body:has(> .mbar) :is(.pg-savebar,.dir-bulk){top:calc(60px + max(env(safe-area-inset-top),54px))}
}

/* Inside Procore's frame (2026-10-23, app/routes/procore_signin.py): Procore's own
   header is above, so Manifold's goes; a slim bar keeps "open in a new tab". */
.mf-embed header.top{display:none}
.embedbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 16px;
  background:var(--iph);color:#fff;font-size:13.5px}
.embedbar a{color:#fff;font-weight:600}

/* A row's "⋯" menu (QA 2026-10-29, L5): archive, remove, approve and decline sit
   behind it - each asks first - instead of a button on every row. base.html's script
   pins the open list to the screen so a table's scroll box never cuts it off. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rowmenu{position:relative;display:inline-block}
.rowmenu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:30px;padding:0 8px;border:1px solid var(--line);border-radius:6px;background:#fff;
  color:var(--iph);font-size:18px;font-weight:700;line-height:1;user-select:none}
.rowmenu>summary::-webkit-details-marker{display:none}
.rowmenu>summary:hover,.rowmenu[open]>summary{border-color:var(--iph);background:#eaf1fa}
.rowmenu>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rowmenu-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:70;min-width:190px;background:#fff;
  border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 30px rgba(0,16,40,.18);padding:4px;text-align:left}
.rowmenu-pop form{margin:0;display:block}
.rowmenu-pop a,.rowmenu-pop button{display:block;width:100%;text-align:left;padding:8px 12px;border:0;background:none;
  font:inherit;font-size:13.5px;font-weight:500;color:var(--ink);border-radius:5px;cursor:pointer;white-space:nowrap}
.rowmenu-pop a:hover,.rowmenu-pop button:hover{background:#f4f7fb;text-decoration:none}
.rowmenu-pop button:disabled{color:var(--muted);cursor:default;background:none}
.rowmenu-pop .rm-bad{color:var(--bad)}
.rowmenu-pop .rm-sep{height:1px;background:var(--line);margin:4px 6px}
.rowmenu-pop .rm-note{padding:4px 12px 6px;font-size:12px;color:var(--muted);white-space:normal;max-width:240px}