#ar2,#ar2 *,#ar2 *::before,#ar2 *::after{box-sizing:border-box;margin:0;padding:0}
#ar2{
  --t:#00b4d8;--aq:#48cae4;--ic:#90e0ef;--go:#f0a500;--gr:#22c55e;
  --re:#ef4444;--tx:#e0f4fa;--mu:#7db8cc;--nv:#040f1e;--dp:#071628;
  --pa:#0d2d4a;--bd:rgba(0,180,216,.2);--cd:linear-gradient(145deg,rgba(13,45,74,.92),rgba(7,22,40,.96));
  font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.5;
  background:radial-gradient(ellipse 90% 55% at 50% 0%,rgba(0,40,70,.65) 0%,#040f1e 58%);
  color:var(--tx);overflow-x:hidden;
}
/* ── Bar ── */
#ar2 .ar-bar{background:rgba(4,15,30,.88);backdrop-filter:blur(20px);border-bottom:1px solid var(--bd);padding:0 20px;}
/* PWA standalone (Add-to-Home-Screen installed) — hide the top bar
   entirely. iOS + Android PWA already render their own status-bar
   area, and the app-like feel is undermined by web nav chrome. */
@media (display-mode: standalone){
  #ar2 .ar-bar{display:none!important;}
}
/* iOS Safari sets window.navigator.standalone but doesn't always
   match the display-mode query — JS adds body.pwa-standalone on
   init so this rule fires in both cases. */
body.pwa-standalone #ar2 .ar-bar{display:none!important;}
#ar2 .ar-bar-inner{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:0;height:58px;max-width:1320px;margin:0 auto;width:100%;box-sizing:border-box;}
#ar2 .ar-stepper{justify-self:center;}
#ar2 .ar-brand{display:flex;align-items:center;gap:10px;}
#ar2 .ar-bn{font-family:'Bebas Neue',sans-serif;font-size:21px;letter-spacing:3px;background:linear-gradient(135deg,#fff,var(--aq),var(--t));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
#ar2 .ar-bd{width:1px;height:18px;background:rgba(0,180,216,.3);}
#ar2 .ar-bs{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:#3a6a80;}
/* ── Stepper ── */
#ar2 .ar-stepper{display:flex;align-items:center;gap:4px;}
#ar2 .ar-si{display:flex;align-items:center;gap:5px;padding:4px 6px;border-radius:8px;transition:background .15s;}
/* Clickable step items — visible affordance + focus ring for keyboard
   users. The active step has .ar-si without .ar-si-clickable so it
   doesn't get hover styling (you can't jump to where you already are). */
#ar2 .ar-si-clickable{cursor:pointer;}
#ar2 .ar-si-clickable:hover{background:rgba(0,180,216,.08);}
#ar2 .ar-si-clickable:hover .ar-dot.idle{background:rgba(0,180,216,.22);border-color:rgba(0,180,216,.5);color:#cfe2eb;}
#ar2 .ar-si-clickable:hover .ar-sl.idle{color:#cfe2eb;}
#ar2 .ar-si-clickable:focus-visible{outline:2px solid var(--t);outline-offset:2px;}
#ar2 .ar-dot{width:25px;height:25px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;transition:background .2s,border-color .2s,color .2s;}
#ar2 .ar-dot.done{background:var(--gr);border:1px solid var(--gr);color:var(--nv);}
#ar2 .ar-dot.active{background:var(--t);border:1px solid var(--t);color:var(--nv);}
#ar2 .ar-dot.idle{background:rgba(0,180,216,.1);border:1px solid rgba(0,180,216,.2);color:#3a6a80;}
#ar2 .ar-sl{font-size:11px;white-space:nowrap;}
#ar2 .ar-sl.done{color:var(--gr);}
#ar2 .ar-sl.active{color:var(--tx);}
@media(max-width:900px){#ar2 .ar-sl{display:none;}}
#ar2 .ar-sc{width:18px;height:1px;background:rgba(0,180,216,.28);margin:0 2px;flex-shrink:0;}
#ar2 .ar-sc.done{background:rgba(34,197,94,.55);}
#ar2 .ar-step-arrow{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,180,216,.08);border:1px solid rgba(0,180,216,.2);color:var(--t);cursor:pointer;transition:.2s;flex-shrink:0;font-family:inherit;margin:0 14px;}
#ar2 .ar-step-arrow:hover:not(:disabled){background:rgba(0,180,216,.2);border-color:var(--t);}
#ar2 .ar-step-arrow:disabled{opacity:.3;cursor:not-allowed;}
/* ── Layout ── */
#ar2 .ar-layout{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;max-width:1320px;margin:0 auto;padding:0 20px 60px;align-items:start;}
#ar2 .ar-form-col{padding:28px 20px 0 0;}
#ar2 .ar-dev-col{padding:28px 16px 0 0;}
@media(max-width:860px){#ar2 .ar-form-col{padding:0;}#ar2 .ar-dev-col{padding-right:0;}}
#ar2 .ar-res-col{padding-top:28px;position:sticky;top:20px;}
/* ── Quote step layout — form occupies cols 1+2, devices col hidden, results
   col holds the live preview + Preview button. Wider form area allows the
   internal 2-column grid (renderStepQuote) so reps can see header/buyer side
   by side with line items / totals. */
#ar2.quote-step .ar-form-col{grid-column:1 / 3;}
#ar2.quote-step .ar-dev-col{display:none;}
/* Step 6 (Field Report). The middle devices column is empty on this
   step (devices breakdown isn't part of the report), and the form is
   self-contained with its own KPI band — so collapse the layout to a
   2-column grid: report content (spans cols 1-2) + results sidebar. */
#ar2.report-step .ar-form-col{grid-column:1 / 3;}
#ar2.report-step .ar-dev-col{display:none;}
/* Client-mode feature gating ─ when a Client signs in, the calculator JS
   adds the .app-client class to #ar2. Any element marked with the
   `data-client-hide` attribute is then visually + interactively hidden.
   Used to gate the Quote step, Discount slider, Cover/Back Cover/Exec
   Summary export toggles, and the Quote-page export toggles. */
#ar2.app-client [data-client-hide]{display:none !important;}
/* Field Report (step 5) — hidden unless the user is admin or the
   record-owner User role. The CSS hides the stepper dot, label, and
   connector line via the data-fr-hide attribute when #ar2 lacks
   the .app-fr-eligible class. The CSS rule below is the INVERSE —
   it hides the attribute when the class is ABSENT. */
#ar2:not(.app-fr-eligible) [data-fr-hide]{display:none !important;}

/* ─────────────── Field Report (step 5) ─────────────── */
#ar2 .ar-fr-wrap{max-width:1100px;margin:0 auto;padding:18px 22px 40px;color:#cfe2eb;font-family:'DM Sans',sans-serif;}
#ar2 .ar-fr-hero{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:flex-start;padding:22px 24px;background:linear-gradient(145deg,rgba(0,180,216,.08),rgba(72,202,228,.03));border:1px solid rgba(0,180,216,.28);border-radius:14px;margin-bottom:18px;}
#ar2 .ar-fr-eyebrow{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:#48cae4;font-weight:600;margin-bottom:4px;}
#ar2 .ar-fr-title{font-family:'Bebas Neue',sans-serif;font-size:32px;letter-spacing:1.6px;color:#fff;line-height:1.1;margin-bottom:10px;}
#ar2 .ar-fr-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:12.5px;color:var(--mu);}
#ar2 .ar-fr-meta b{color:#fff;font-weight:600;}
#ar2 .ar-fr-meta .ar-eng-pill{vertical-align:1px;}
#ar2 .ar-fr-notes{margin-top:12px;font-size:12.5px;color:#cfe2eb;background:rgba(0,180,216,.06);border-left:3px solid rgba(0,180,216,.45);padding:8px 12px;border-radius:0 7px 7px 0;line-height:1.55;}
#ar2 .ar-fr-notes b{color:#48cae4;font-weight:700;}

#ar2 .ar-fr-actions{display:flex;flex-direction:column;gap:8px;min-width:200px;}
#ar2 .ar-fr-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:rgba(7,22,40,.55);border:1px solid rgba(0,180,216,.32);color:#cfe2eb;padding:9px 16px;border-radius:8px;font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.4px;cursor:pointer;transition:background .12s,border-color .12s,color .12s;}
#ar2 .ar-fr-btn:hover:not(:disabled){background:rgba(0,180,216,.14);border-color:rgba(0,180,216,.6);color:#fff;}
#ar2 .ar-fr-btn.primary{background:linear-gradient(135deg,#00b4d8,#48cae4);color:#040f1e;border-color:transparent;}
#ar2 .ar-fr-btn.primary:hover:not(:disabled){filter:brightness(1.08);}
#ar2 .ar-fr-btn.success{background:linear-gradient(135deg,#16a34a,#22c55e);color:#04210d;border-color:transparent;}
#ar2 .ar-fr-btn.success:hover:not(:disabled){filter:brightness(1.08);}
#ar2 .ar-fr-btn.ghost{background:transparent;color:#7db8cc;border-color:rgba(125,184,204,.32);}
#ar2 .ar-fr-btn.ghost:hover:not(:disabled){border-color:rgba(125,184,204,.65);color:#fff;}

/* Field Report fallback picker — shown inside the empty state when
   the user has engineer submissions on OTHER records they can jump to
   instead of starting from the current (unrelated) session. */
#ar2 .ar-fr-picker{max-width:560px;margin:18px auto 0;padding:14px;background:rgba(0,180,216,.04);border:1px solid rgba(0,180,216,.22);border-radius:12px;}
#ar2 .ar-fr-picker-title{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:#48cae4;font-weight:600;margin-bottom:8px;text-align:center;}
#ar2 .ar-fr-picker-list{display:flex;flex-direction:column;gap:6px;}
#ar2 .ar-fr-picker-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:rgba(7,22,40,.4);border:1px solid rgba(0,180,216,.2);border-radius:8px;padding:9px 12px;color:#cfe2eb;font-family:inherit;text-align:left;cursor:pointer;transition:background .12s,border-color .12s;}
#ar2 .ar-fr-picker-row:hover{background:rgba(0,180,216,.12);border-color:rgba(0,180,216,.55);}
#ar2 .ar-fr-picker-row-scope{font-size:12.5px;font-weight:700;color:#fff;}
#ar2 .ar-fr-picker-row-meta{font-size:10.5px;color:var(--mu);margin-top:2px;}

/* Empty / error states */
#ar2 .ar-fr-empty{text-align:center;padding:54px 24px;background:rgba(7,22,40,.4);border:1px dashed rgba(0,180,216,.25);border-radius:14px;max-width:560px;margin:0 auto;}
#ar2 .ar-fr-empty.error{border-color:rgba(239,68,68,.4);}
#ar2 .ar-fr-empty-icon{color:rgba(125,184,204,.55);margin-bottom:10px;display:inline-flex;}
#ar2 .ar-fr-empty-title{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:1.5px;color:#fff;margin-bottom:10px;}
#ar2 .ar-fr-empty-body{font-size:13.5px;color:var(--mu);line-height:1.6;}

/* Loading skeleton */
#ar2 .ar-fr-hero.skel{display:block;}
#ar2 .skel-block{background:linear-gradient(90deg,rgba(0,180,216,.06),rgba(0,180,216,.14),rgba(0,180,216,.06));background-size:200% 100%;animation:ar-fr-shimmer 1.4s linear infinite;height:18px;border-radius:6px;margin-bottom:10px;}
#ar2 .skel-block.w70{width:70%;height:28px;}
#ar2 .skel-block.w40{width:40%;}
#ar2 .ar-fr-skel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px;}
#ar2 .ar-fr-skel-grid .skel-block{height:90px;}
@keyframes ar-fr-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* KPI grid — 6 tiles, evenly distributed. Mirrors the visual weight
   of the admin Overview KPIs so reps see a consistent dashboard
   pattern. The Engineer-gal tile picks up a tone-* color (green /
   amber / red) when the confirmed total drifts from the rep's estimate. */
#ar2 .ar-fr-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:22px;}
#ar2 .ar-fr-kpi{background:linear-gradient(145deg,rgba(0,180,216,.06),rgba(0,180,216,.02));border:1px solid rgba(0,180,216,.2);border-radius:10px;padding:14px 14px 12px;text-align:left;display:flex;flex-direction:column;gap:4px;}
#ar2 .ar-fr-kpi-lbl{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#7db8cc;font-weight:600;}
#ar2 .ar-fr-kpi-val{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;color:#fff;line-height:1.1;}
#ar2 .ar-fr-kpi-sub{font-size:10.5px;color:var(--mu);letter-spacing:.3px;line-height:1.3;}
#ar2 .ar-fr-kpi.tone-green{border-color:rgba(34,197,94,.45);background:linear-gradient(145deg,rgba(34,197,94,.1),rgba(34,197,94,.02));}
#ar2 .ar-fr-kpi.tone-green .ar-fr-kpi-val{color:#4ade80;}
#ar2 .ar-fr-kpi.tone-green .ar-fr-kpi-sub{color:#86efac;}
#ar2 .ar-fr-kpi.tone-amber{border-color:rgba(240,165,0,.45);background:linear-gradient(145deg,rgba(240,165,0,.1),rgba(240,165,0,.02));}
#ar2 .ar-fr-kpi.tone-amber .ar-fr-kpi-val{color:#f0a500;}
#ar2 .ar-fr-kpi.tone-amber .ar-fr-kpi-sub{color:#fbbf24;}
#ar2 .ar-fr-kpi.tone-red{border-color:rgba(239,68,68,.45);background:linear-gradient(145deg,rgba(239,68,68,.1),rgba(239,68,68,.02));}
#ar2 .ar-fr-kpi.tone-red .ar-fr-kpi-val{color:#fca5a5;}
#ar2 .ar-fr-kpi.tone-red .ar-fr-kpi-sub{color:#fca5a5;}

/* Section heading — used for Pump Rooms (and later Pools). */
#ar2 .ar-fr-section{margin-bottom:22px;}
#ar2 .ar-fr-section-hd{margin-bottom:12px;}
#ar2 .ar-fr-section-title{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:2px;color:#48cae4;text-transform:uppercase;display:flex;align-items:center;gap:10px;}
#ar2 .ar-fr-section-count{font-family:'JetBrains Mono',monospace;font-size:11px;color:#7db8cc;background:rgba(0,180,216,.12);border:1px solid rgba(0,180,216,.32);padding:2px 8px;border-radius:99px;letter-spacing:.5px;}
#ar2 .ar-fr-section-sub{font-size:12px;color:var(--mu);line-height:1.55;margin-top:4px;max-width:720px;}
#ar2 .ar-fr-empty-mini{font-size:12.5px;color:var(--mu);padding:14px;background:rgba(7,22,40,.4);border:1px dashed rgba(125,184,204,.25);border-radius:10px;}

/* Pump-rooms strip — horizontal scroll on overflow. Each card has a
   walkthrough video tile up top, label + pools-served below, photo
   count + notes-indicator footer. */
#ar2 .ar-fr-pr-strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;}
#ar2 .ar-fr-pr-strip::-webkit-scrollbar{height:6px;}
#ar2 .ar-fr-pr-strip::-webkit-scrollbar-thumb{background:rgba(0,180,216,.3);border-radius:3px;}
#ar2 .ar-fr-pr-card{flex:0 0 260px;background:rgba(13,45,74,.55);border:1px solid rgba(0,180,216,.22);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;}
#ar2 .ar-fr-pr-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
#ar2 .ar-fr-pr-label{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:1.5px;color:#fff;}
#ar2 .ar-fr-pr-stat{font-size:10.5px;color:#4ade80;letter-spacing:.5px;background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.35);padding:2px 7px;border-radius:99px;white-space:nowrap;}
#ar2 .ar-fr-pr-video{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:120px;border:1px solid rgba(0,180,216,.35);background:linear-gradient(135deg,rgba(0,180,216,.16),rgba(7,22,40,.5));border-radius:9px;color:#cfe2eb;font-family:inherit;cursor:pointer;padding:18px 12px;font-size:11.5px;font-weight:600;letter-spacing:.4px;transition:background .15s,border-color .15s,color .15s;}
#ar2 .ar-fr-pr-video:hover{background:linear-gradient(135deg,rgba(0,180,216,.28),rgba(7,22,40,.6));border-color:rgba(0,180,216,.7);color:#fff;}
#ar2 .ar-fr-pr-video.empty{cursor:default;background:rgba(7,22,40,.35);border-color:rgba(125,184,204,.22);border-style:dashed;color:#7db8cc;}
#ar2 .ar-fr-pr-video.empty:hover{background:rgba(7,22,40,.35);border-color:rgba(125,184,204,.22);color:#7db8cc;}
#ar2 .ar-fr-pr-video-icon{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);}
#ar2 .ar-fr-pr-video.empty .ar-fr-pr-video-icon{background:rgba(255,255,255,.04);}
#ar2 .ar-fr-pr-foot{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;color:var(--mu);letter-spacing:.4px;padding-top:4px;border-top:1px solid rgba(0,180,216,.1);}
#ar2 .ar-fr-pr-has-notes{color:#48cae4;cursor:help;border-bottom:1px dotted rgba(72,202,228,.55);}

/* Pool comparison grid — one card per pool, two-column inside
   (reference image + Estimate/Engineer compare table), then a
   return-line media row underneath. Cards stack on narrow viewports. */
#ar2 .ar-fr-pool-grid{display:flex;flex-direction:column;gap:14px;}
#ar2 .ar-fr-pool-card{background:linear-gradient(145deg,rgba(13,45,74,.55),rgba(7,22,40,.4));border:1px solid rgba(0,180,216,.22);border-radius:12px;padding:16px 18px;}
#ar2 .ar-fr-pool-card.verified{border-color:rgba(34,197,94,.38);background:linear-gradient(145deg,rgba(34,197,94,.06),rgba(13,45,74,.4));}
#ar2 .ar-fr-pool-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(0,180,216,.12);}
#ar2 .ar-fr-pool-name{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:1.5px;color:#fff;}
#ar2 .ar-fr-pool-pills{display:flex;gap:6px;flex-wrap:wrap;}
#ar2 .ar-fr-pool-pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:3px 9px;border-radius:99px;border:1px solid transparent;}
#ar2 .ar-fr-pool-pill.ok{color:#4ade80;background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.45);}
#ar2 .ar-fr-pool-pill.warn{color:#f0a500;background:rgba(240,165,0,.14);border-color:rgba(240,165,0,.4);}
#ar2 .ar-fr-pool-pill.na{color:#7db8cc;background:rgba(125,184,204,.1);border-color:rgba(125,184,204,.25);}
#ar2 .ar-fr-pool-pill.added{color:#48cae4;background:rgba(0,180,216,.14);border-color:rgba(0,180,216,.45);}

#ar2 .ar-fr-pool-body{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:start;}
#ar2 .ar-fr-pool-img{position:relative;border-radius:8px;overflow:hidden;border:1px solid rgba(0,180,216,.3);cursor:zoom-in;background:#0a2540;}
#ar2 .ar-fr-pool-img img{display:block;width:100%;height:160px;object-fit:cover;}
#ar2 .ar-fr-pool-img:hover{border-color:rgba(0,180,216,.6);}
#ar2 .ar-fr-pool-img-tag{position:absolute;top:6px;left:6px;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:rgba(72,202,228,.9);color:#040f1e;padding:2px 7px;border-radius:99px;}
#ar2 .ar-fr-pool-img-stub{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:160px;border:1px dashed rgba(125,184,204,.22);border-radius:8px;background:rgba(7,22,40,.4);color:#7db8cc;font-size:11px;letter-spacing:.4px;text-align:center;padding:14px;}
#ar2 .ar-fr-pool-img-stub svg{color:rgba(125,184,204,.45);}

#ar2 .ar-fr-pool-compare{display:grid;grid-template-columns:120px 1fr 1fr;gap:6px 14px;font-size:12.5px;align-items:center;}
#ar2 .ar-fr-cmp-row{display:contents;}
#ar2 .ar-fr-cmp-row.head > div{font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:#7db8cc;font-weight:700;border-bottom:1px solid rgba(0,180,216,.14);padding-bottom:6px;margin-bottom:4px;}
#ar2 .ar-fr-cmp-row .lbl{font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:#7db8cc;font-weight:600;}
#ar2 .ar-fr-cmp-row > div{padding:5px 0;border-bottom:1px solid rgba(0,180,216,.05);min-height:24px;display:flex;align-items:center;gap:6px;color:#cfe2eb;}
#ar2 .ar-fr-cmp-row > div:nth-child(3){color:#fff;font-weight:600;}
#ar2 .ar-fr-dot{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;flex-shrink:0;margin-left:auto;}
#ar2 .ar-fr-dot.ok{background:rgba(34,197,94,.2);color:#4ade80;border:1px solid rgba(34,197,94,.45);}
#ar2 .ar-fr-dot.warn{background:rgba(240,165,0,.2);color:#f0a500;border:1px solid rgba(240,165,0,.45);}
#ar2 .ar-fr-dot.na{background:rgba(125,184,204,.08);color:#7db8cc;border:1px solid rgba(125,184,204,.22);font-weight:700;}

/* Engineer's property-wide notes (Step 6 / field report) */
#ar2 .ar-fr-prop-notes{margin-top:22px;padding:18px 20px;background:rgba(0,180,216,.05);border:1px solid rgba(0,180,216,.22);border-radius:12px;}
#ar2 .ar-fr-prop-notes-hd{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#48cae4;font-weight:600;margin-bottom:12px;}
#ar2 .ar-fr-prop-notes-block + .ar-fr-prop-notes-block{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(0,180,216,.18);}
#ar2 .ar-fr-prop-notes-eng{font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:#7db8cc;font-weight:600;margin-bottom:6px;}
#ar2 .ar-fr-prop-notes-body{font-size:13px;line-height:1.65;color:#cfe2eb;white-space:pre-wrap;}

/* Media gallery row */
#ar2 .ar-fr-pool-media{margin-top:14px;padding-top:12px;border-top:1px solid rgba(0,180,216,.1);}
#ar2 .ar-fr-pool-media-hd{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#7db8cc;font-weight:700;margin-bottom:8px;}
#ar2 .ar-fr-pool-media-hd span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.4px;color:var(--mu);text-transform:none;font-weight:500;}
#ar2 .ar-fr-pool-thumbs{display:flex;flex-wrap:wrap;gap:8px;}
#ar2 .ar-fr-pool-thumbs-empty{font-size:11.5px;color:var(--mu);font-style:italic;padding:8px 0;}
#ar2 .ar-fr-thumb{position:relative;width:88px;height:66px;background:rgba(0,0,0,.4);border:1px solid rgba(0,180,216,.22);border-radius:7px;overflow:hidden;cursor:zoom-in;padding:0;transition:border-color .12s,transform .12s;}
#ar2 .ar-fr-thumb:hover{border-color:rgba(0,180,216,.65);transform:translateY(-1px);}
#ar2 .ar-fr-thumb-img{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;}
#ar2 .ar-fr-thumb-type{position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,.7);color:#fff;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;}

/* Per-pool callouts */
#ar2 .ar-fr-pool-callout{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.55;padding:9px 12px;border-radius:8px;margin-top:10px;color:#cfe2eb;background:rgba(0,180,216,.06);border-left:3px solid rgba(0,180,216,.45);}
#ar2 .ar-fr-pool-callout b{color:#48cae4;}
#ar2 .ar-fr-pool-callout svg{flex-shrink:0;margin-top:2px;color:#48cae4;}
#ar2 .ar-fr-pool-callout.warn{background:rgba(240,165,0,.08);border-left-color:rgba(240,165,0,.55);}
#ar2 .ar-fr-pool-callout.warn b,
#ar2 .ar-fr-pool-callout.warn svg{color:#f0a500;}

@media (max-width: 760px){
  #ar2 .ar-fr-pool-body{grid-template-columns:1fr;}
  #ar2 .ar-fr-pool-img img{height:200px;}
  #ar2 .ar-fr-pool-compare{grid-template-columns:90px 1fr 1fr;}
}

/* Responsive: stack KPIs 3-up on narrow viewports. */
@media (max-width: 880px){
  #ar2 .ar-fr-kpis{grid-template-columns:repeat(3,1fr);}
}
@media (max-width: 520px){
  #ar2 .ar-fr-kpis{grid-template-columns:repeat(2,1fr);}
}

/* Placeholder bands — replaced in sub-ships #7b/c/d. */
#ar2 .ar-fr-placeholder{background:rgba(7,22,40,.4);border:1px solid rgba(0,180,216,.18);border-radius:10px;padding:18px;}
#ar2 .ar-fr-placeholder-title{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:1.5px;color:#48cae4;margin-bottom:8px;}
#ar2 .ar-fr-placeholder-body{font-size:13px;color:#cfe2eb;margin-bottom:6px;}
#ar2 .ar-fr-placeholder-body b{color:#fff;font-weight:600;}
#ar2 .ar-fr-placeholder-hint{font-size:11.5px;color:var(--mu);font-style:italic;}

@media (max-width: 720px){
  #ar2 .ar-fr-hero{grid-template-columns:1fr;}
  #ar2 .ar-fr-actions{flex-direction:row;flex-wrap:wrap;min-width:0;}
}
/* Portfolio property mode — hides surfaces that don't apply when the rep
   is working on a property INSIDE a portfolio. Quote step is the headline
   case (Quote lives at the portfolio level), but the pattern extends to
   any future per-property element that should disappear in pf context. */
body.pf-property-mode #ar2 [data-pf-prop-hide]{display:none !important;}
/* Quote app page: card headers tinted teal-blue for visual consistency with
   the rendered PDF's section accents. Scoped to .quote-step so other steps
   keep the standard text-color titles. Catches both standalone titles and
   titles inside the .ar-card-title-row layout (cards with help info button). */
#ar2.quote-step .ar-card-title{color:var(--t);}
#ar2 .ar-quote-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;}
@media(max-width:1080px){#ar2 .ar-quote-form-grid{grid-template-columns:1fr;}}
#ar2 .ar-quote-form-grid .ar-quote-col-a,
#ar2 .ar-quote-form-grid .ar-quote-col-b{display:flex;flex-direction:column;gap:14px;}
/* ── Quote step internal components ── */
#ar2 .ar-q-subsection{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mu);margin:6px 0 4px;font-weight:700;}
#ar2 .ar-q-line-row{display:grid;grid-template-columns:1fr 90px;gap:10px;align-items:center;padding:6px 0;border-bottom:1px dashed rgba(0,180,216,.12);}
#ar2 .ar-q-line-row:last-of-type{border-bottom:none;}
#ar2 .ar-q-line-desc{display:flex;flex-direction:column;gap:2px;}
#ar2 .ar-q-line-sub{font-size:10px;color:var(--mu);}
#ar2 .ar-q-line-amt{font-size:12px;color:var(--tx);font-family:'JetBrains Mono',monospace;font-weight:600;}
#ar2 .ar-q-line-tax label{display:block;font-size:10px;color:var(--mu);}
#ar2 .ar-q-disc-strip{margin-top:8px;padding:8px 10px;background:rgba(0,180,216,.06);border:1px solid rgba(0,180,216,.18);border-radius:8px;display:flex;flex-direction:column;gap:4px;}
#ar2 .ar-q-disc-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;font-size:11px;color:var(--tx);}
#ar2 .ar-q-disc-row.strong{border-top:1px dashed rgba(0,180,216,.25);padding-top:4px;margin-top:2px;}
#ar2 .ar-inp.ar-inp-sm{width:100px;text-align:right;font-family:'JetBrains Mono',monospace;}
#ar2 .ar-q-addon{margin-top:10px;padding:10px 12px;background:rgba(0,180,216,.04);border:1px solid rgba(0,180,216,.14);border-radius:8px;display:flex;flex-direction:column;gap:8px;}
#ar2 .ar-q-addon-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
#ar2 .ar-q-addon-section-label{font-size:13px;font-weight:600;color:var(--t);letter-spacing:.4px;}
#ar2 .ar-q-addon-incl{display:flex;align-items:center;gap:8px;cursor:pointer;}
#ar2 .ar-q-addon-incl-label{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:var(--mu);}
/* Description gets its own full-width row above the numeric inputs so the
   field can wrap freely without competing for horizontal space. */
#ar2 .ar-q-addon-desc-row{display:flex;flex-direction:column;gap:3px;}
#ar2 .ar-q-addon-desc-row > label{font-size:10px;color:var(--mu);}
#ar2 .ar-q-addon-numeric-row{display:grid;grid-template-columns:1fr 80px 80px;gap:8px;align-items:end;}
#ar2 .ar-q-cell label{display:block;font-size:10px;color:var(--mu);margin-bottom:2px;}
#ar2 .ar-q-readonly{font-size:11px;padding:8px 10px;color:var(--mu);background:rgba(0,0,0,.18);border:1px solid rgba(0,180,216,.12);border-radius:6px;}
#ar2 .ar-q-addon-subtotal{display:flex;justify-content:space-between;align-items:center;padding-top:6px;border-top:1px dashed rgba(0,180,216,.18);font-size:11px;color:var(--tx);}
#ar2 .ar-q-addon-subtotal span{color:var(--mu);text-transform:uppercase;letter-spacing:1.2px;font-size:10px;}
#ar2 .ar-q-addon-subtotal b{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--tx);}
#ar2 .ar-q-tot-row{display:flex;justify-content:space-between;font-size:11px;color:var(--tx);padding:4px 0;border-bottom:1px solid rgba(0,180,216,.12);}
#ar2 .ar-q-tot-row.strong{font-size:13px;color:var(--t);font-weight:700;padding:8px 0;border-top:2px solid var(--t);border-bottom:none;margin-top:4px;}
/* Auto-grow textarea — reps type a long description and the field expands
   up to ~160px before scrolling. JS sets style.height; line-height + padding
   match the .ar-inp single-line look. */
#ar2 textarea.ar-textarea.ar-grow{min-height:38px;resize:none;overflow:hidden;line-height:1.4;font-family:inherit;}
/* Rich text editor — toolbar + contenteditable. Caret-preserving toolbar
   (mousedown preventDefault) so clicking B / I / List doesn't lose focus. */
#ar2 .ar-rte-toolbar{display:flex;flex-wrap:wrap;gap:4px;padding:6px 8px;background:rgba(0,180,216,.06);border:1px solid rgba(0,180,216,.2);border-bottom:none;border-radius:8px 8px 0 0;}
#ar2 .ar-rte-btn{background:rgba(0,0,0,.25);border:1px solid rgba(0,180,216,.18);color:var(--tx);font-family:inherit;font-size:11px;padding:4px 10px;border-radius:5px;cursor:pointer;min-width:32px;transition:background .15s,color .15s;}
#ar2 .ar-rte-btn:hover{background:rgba(0,180,216,.18);color:var(--aq);}
#ar2 .ar-rte{min-height:200px;max-height:360px;overflow:auto;padding:10px 12px;background:rgba(0,0,0,.25);border:1px solid rgba(0,180,216,.2);border-radius:0 0 8px 8px;color:var(--tx);font-size:11.5px;line-height:1.5;font-family:inherit;outline:none;}
#ar2 .ar-rte:focus{border-color:rgba(0,180,216,.45);}
#ar2 .ar-rte:empty:before{content:attr(data-placeholder);color:var(--mu);font-style:italic;}
#ar2 .ar-rte ol,#ar2 .ar-rte ul{padding-left:22px;margin:6px 0;}
#ar2 .ar-rte li{margin-bottom:4px;}
#ar2 .ar-rte p{margin:4px 0;}
/* PDF — included pill + generic ol/ul/p in the rich-text page-2 body */
#ar2-report .rpt-q-included{font-style:italic;color:#7d8a96;font-weight:600;font-size:9.5px;letter-spacing:1px;}
#ar2-report .rpt-q-terms-text ol,#ar2-report .rpt-q-terms-text ul{padding-left:22px;margin:6px 0;}
#ar2-report .rpt-q-terms-text li{margin-bottom:4px;line-height:1.5;}
#ar2-report .rpt-q-terms-text p{margin:6px 0;line-height:1.5;}
@media(max-width:860px){#ar2 .ar-res-col{position:static;}}
/* ── Cards ── */
#ar2 .ar-card{background:var(--cd);border:1px solid var(--bd);border-radius:14px;padding:20px 18px;position:relative;overflow:hidden;margin-bottom:14px;}
#ar2 .ar-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--t),var(--aq));}
#ar2 .ar-card.ac-go::before{background:linear-gradient(90deg,var(--go),#f7c948);}
#ar2 .ar-card.ac-gr::before{background:linear-gradient(90deg,var(--gr),#4ade80);}
#ar2 .ar-card-title{font-size:13px;font-weight:600;color:var(--tx);margin-bottom:14px;}
#ar2 .ar-card-info-btn{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,180,216,.5);background:rgba(0,180,216,.08);color:var(--t);font-weight:700;font-family:inherit;font-size:12px;line-height:1;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;transition:.18s;z-index:3;}
#ar2 .ar-card-info-btn:hover{background:rgba(0,180,216,.2);border-color:rgba(0,180,216,.8);}
#ar2 .ar-card.show-info .ar-card-info-btn{background:var(--t);border-color:var(--t);color:#04101e;}
#ar2 .ar-card-info-pop{display:none;margin-top:10px;padding:10px 12px;background:rgba(0,180,216,.06);border:1px solid rgba(0,180,216,.22);border-left:2px solid var(--t);border-radius:6px;font-size:11px;line-height:1.5;color:var(--mu);}
#ar2 .ar-card.show-info .ar-card-info-pop{display:block;}
#ar2 .ar-card-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
#ar2 .ar-card-title-row .ar-card-title{margin-bottom:0;}
#ar2 .ar-card-title-row .ar-card-info-btn{position:static;}
/* ── Labels / inputs ── */
#ar2 .ar-lbl{display:block;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--mu);font-weight:600;margin-bottom:6px;}
#ar2 .ar-inp,#ar2 .ar-sel{width:100%;background:rgba(0,0,0,.22);border:1px solid rgba(0,180,216,.22);border-radius:8px;color:var(--tx);padding:9px 12px;font-size:14px;font-family:'DM Sans',sans-serif;outline:none;transition:border-color .16s,box-shadow .16s;}
#ar2 .ar-inp:focus,#ar2 .ar-sel:focus{border-color:rgba(0,180,216,.6);box-shadow:0 0 0 3px rgba(0,180,216,.1);}
#ar2 .ar-inp::placeholder{color:rgba(125,184,204,.4);}
#ar2 .ar-inp.sm{padding:7px 10px;font-size:13px;}
#ar2 .ar-sel{cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2300b4d8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;}
#ar2 .ar-sel option{background:#071628;}
#ar2 .ar-frow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;}
#ar2 .ar-field{margin-bottom:14px;}
#ar2 .ar-field:last-child{margin-bottom:0;}
/* ── Pool type toggle ── */
#ar2 .ar-toggle{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:10px;border:1px solid rgba(0,180,216,.22);overflow:hidden;}
#ar2 .ar-tog-btn{padding:10px 14px;text-align:center;font-size:13px;font-weight:600;cursor:pointer;border:none;background:transparent;color:var(--mu);transition:background .18s,color .18s;}
#ar2 .ar-tog-btn.on{background:rgba(0,180,216,.18);color:var(--t);}
#ar2 .ar-tog-btn:hover:not(.on){background:rgba(0,180,216,.08);color:var(--tx);}
/* ── Pipe grid ── */
#ar2 .ar-pipe-grid{display:flex;flex-direction:column;gap:9px;}
#ar2 .ar-pipe-row{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:10px;align-items:center;background:rgba(0,0,0,.18);border:1px solid rgba(0,180,216,.12);border-radius:10px;padding:12px 14px;}
#ar2 .ar-pipe-sz{font-family:'Bebas Neue',sans-serif;font-size:22px;color:#fff;letter-spacing:1px;min-width:32px;}
#ar2 .ar-pipe-info{min-width:0;}
#ar2 .ar-pipe-price{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--t);white-space:nowrap;}
#ar2 .ar-pipe-rate{font-size:10px;color:#3a6a80;white-space:nowrap;margin-top:2px;}
#ar2 .ar-pipe-row.selected{background:rgba(0,180,216,.08);border-color:rgba(0,180,216,.3);}
#ar2 .ar-qty{display:flex;align-items:center;gap:0;border:1px solid rgba(0,180,216,.25);border-radius:8px;overflow:hidden;}
#ar2 .ar-qty-btn{width:30px;height:30px;background:rgba(0,180,216,.08);border:none;color:var(--t);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;}
#ar2 .ar-qty-btn:hover{background:rgba(0,180,216,.2);}
#ar2 .ar-qty-n{width:30px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;color:#fff;background:transparent;}
/* ── Slider ── */
#ar2 .ar-slider-wrap{position:relative;padding-bottom:20px;}
#ar2 .ar-range{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;outline:none;cursor:pointer;}
#ar2 .ar-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--t);cursor:pointer;box-shadow:0 0 6px rgba(0,180,216,.5);}
#ar2 .ar-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--t);cursor:pointer;border:none;}
#ar2 .ar-slider-val{position:absolute;bottom:0;right:0;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:var(--t);}
#ar2 .ar-slider-row{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
#ar2 .ar-slider-row .ar-range{flex:1;}
#ar2 .ar-slider-row .ar-slider-val-inline{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:var(--t);min-width:36px;text-align:right;}
#ar2 .ar-slider-ticks{display:flex;justify-content:space-between;font-size:9px;color:#3a6a80;padding:0 2px;margin-right:46px;margin-bottom:10px;}
/* ── CO2 toggle ── */
#ar2 .ar-sw{display:flex;align-items:center;justify-content:space-between;padding:12px 0;}
#ar2 .ar-sw-label{font-size:13px;color:var(--tx);}
#ar2 .ar-sw-sub{font-size:11px;color:#3a6a80;margin-top:2px;}
#ar2 .ar-sw-track{width:42px;height:24px;border-radius:12px;background:rgba(0,180,216,.15);border:1px solid rgba(0,180,216,.25);position:relative;cursor:pointer;transition:background .2s;flex-shrink:0;}
#ar2 .ar-sw-track.on{background:rgba(0,180,216,.5);border-color:var(--t);}
#ar2 .ar-sw-thumb{position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;transition:left .2s;box-shadow:0 1px 4px rgba(0,0,0,.3);}
#ar2 .ar-sw-track.on .ar-sw-thumb{left:20px;}
/* ── Chem table ── */
#ar2 .ar-chem-table{width:100%;border-collapse:collapse;}
#ar2 .ar-chem-table th{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--mu);padding:6px 8px;border-bottom:1px solid var(--bd);text-align:left;font-weight:500;}
#ar2 .ar-chem-table th:not(:first-child){text-align:right;}
#ar2 .ar-chem-table td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle;}
#ar2 .ar-chem-table tr:last-child td{border-bottom:none;}
#ar2 .ar-chem-table .chem-name{font-size:12px;color:#99c5d8;}
#ar2 .ar-chem-table .ar-inp.sm{text-align:right;}
#ar2 .ar-chem-table .co2-row td{opacity:.45;pointer-events:none;}
#ar2 .ar-chem-table .co2-row.active td{opacity:1;pointer-events:auto;}
/* ── Buttons ── */
#ar2 .ar-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 20px;border-radius:9px;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:600;font-size:14px;transition:filter .18s,transform .18s;}
#ar2 .ar-btn:disabled{opacity:.4;cursor:not-allowed;}
#ar2 .ar-btn:not(:disabled):hover{filter:brightness(1.1);transform:translateY(-1px);}
#ar2 .ar-btn.primary{background:linear-gradient(135deg,var(--t),var(--aq));color:var(--nv);box-shadow:0 4px 16px rgba(0,180,216,.22);}
#ar2 .ar-btn.ghost{background:rgba(0,180,216,.08);border:1px solid rgba(0,180,216,.25);color:var(--mu);}
#ar2 .ar-btn.ghost:not(:disabled):hover{color:var(--tx);}
/* ── Step navigation colour-coding ──
   advance = forward/continue (green), retreat = back/return (orange).
   Wins over .primary / .ghost via override ordering + same specificity. */
#ar2 .ar-btn.advance{background:linear-gradient(135deg,var(--gr),#16a34a);color:#fff;box-shadow:0 4px 16px rgba(34,197,94,.28);border:none;}
#ar2 .ar-btn.advance:not(:disabled):hover{filter:brightness(1.08);}
#ar2 .ar-btn.retreat{background:linear-gradient(135deg,var(--go),#d88b00);color:#fff;border:1px solid rgba(240,165,0,.55);box-shadow:0 3px 10px rgba(240,165,0,.20);}
#ar2 .ar-btn.retreat:not(:disabled):hover{filter:brightness(1.08);color:#fff;}
/* Same colour-coding for the map step's Continue button (uses .ap-btn instead of .ar-btn). */
#ap2 .ap-btn.advance{background:linear-gradient(135deg,var(--gr),#16a34a) !important;color:#fff !important;border:none !important;box-shadow:0 4px 16px rgba(34,197,94,.28);}
#ap2 .ap-btn.advance:not(:disabled):hover{filter:brightness(1.08);}
#ar2 .ar-nav{margin-bottom:12px;}
#ar2 .ar-nav-stack{display:flex;flex-direction:column;gap:8px;}
#ar2 .ar-nav-stack .ar-btn{padding:12px 16px;font-size:12px;}
#ar2 .ar-nav-stack .ar-btn.primary{font-weight:600;}
/* ── Results ── */
#ar2 .ar-kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px;}
#ar2 .ar-kpi{background:rgba(13,45,74,.9);border:1px solid var(--bd);border-radius:12px;padding:14px 12px;text-align:center;}
#ar2 .ar-kpi-lbl{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--mu);margin-bottom:5px;}
#ar2 .ar-kpi-val{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:700;}
/* ── Tabs ── */
#ar2 .ar-tabs{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:10px;border:1px solid rgba(0,180,216,.2);overflow:hidden;margin-bottom:12px;}
#ar2 .ar-tab{padding:10px;text-align:center;font-size:12px;font-weight:600;cursor:pointer;border:none;background:transparent;color:var(--mu);transition:background .18s,color .18s;}
#ar2 .ar-tab.on{background:rgba(0,180,216,.15);color:var(--t);}
#ar2 .ar-tab:hover:not(.on){background:rgba(0,180,216,.07);color:var(--tx);}
#ar2 .ar-tab-panel{display:none;}
#ar2 .ar-tab-panel.on{display:block;}
#ar2 .ar-metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
#ar2 .ar-metric{border-radius:9px;padding:11px 12px;}
#ar2 .ar-metric.pos{background:rgba(34,197,94,.08);}
#ar2 .ar-metric.neg{background:rgba(239,68,68,.08);}
#ar2 .ar-metric.neu{background:rgba(255,255,255,.05);}
#ar2 .ar-metric.acc{background:rgba(0,180,216,.08);}
#ar2 .ar-metric dt{font-size:11px;color:var(--mu);margin-bottom:3px;}
#ar2 .ar-metric dd{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:700;}
#ar2 .ar-metric.pos dd{color:var(--gr);}
#ar2 .ar-metric.neg dd{color:var(--re);}
#ar2 .ar-metric.neu dd{color:var(--tx);}
#ar2 .ar-metric.acc dd{color:var(--t);}
/* ── Breakdown table ── */
#ar2 .ar-bk-table{width:100%;border-collapse:collapse;font-size:12px;}
#ar2 .ar-bk-table th{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mu);padding:6px 8px;border-bottom:1px solid var(--bd);text-align:left;font-weight:500;}
#ar2 .ar-bk-table th:not(:first-child){text-align:right;}
#ar2 .ar-bk-table td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.04);color:#c8e6f0;}
#ar2 .ar-bk-table td:not(:first-child){text-align:right;color:#e0f4fa;font-family:'JetBrains Mono',monospace;}
#ar2 .ar-bk-table tr.total-row{font-weight:700;background:rgba(255,255,255,.04);}
#ar2 .ar-bk-table tr.total-row td{border-bottom:none;color:#fff;}
#ar2 .ar-bk-table tr.total-row td:not(:first-child){color:var(--t);}
/* ── Water tile ── */
#ar2 .ar-water{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
#ar2 .ar-water-ico{width:36px;height:36px;border-radius:9px;background:rgba(0,180,216,.1);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
/* ── Empty state ── */
#ar2 .ar-empty{display:flex;align-items:center;justify-content:center;min-height:300px;text-align:center;padding:30px;}
/* ── Review ── */
#ar2 .ar-review-section{margin-bottom:18px;}
#ar2 .ar-review-hd{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--t);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;}
#ar2 .ar-review-edit{font-size:11px;color:var(--mu);cursor:pointer;text-decoration:underline;}
#ar2 .ar-review-edit:hover{color:var(--t);}
#ar2 .ar-review-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:13px;}
#ar2 .ar-review-row:last-child{border-bottom:none;}
#ar2 .ar-review-row span:first-child{color:var(--mu);}
#ar2 .ar-review-row span:last-child{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--tx);}
/* ── Disc / Saving weight note ── */
#ar2 .ar-note{font-size:11px;color:#3a6a80;line-height:1.6;padding:10px 12px;background:rgba(0,0,0,.15);border-radius:8px;margin-top:8px;}
/* ── Badge row ── */
#ar2 .ar-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
#ar2 .ar-badge{padding:3px 9px;border-radius:20px;background:rgba(0,180,216,.07);border:1px solid rgba(0,180,216,.18);font-size:10px;color:var(--mu);}
/* ── Disc ── */
#ar2 .ar-disc{font-size:10px;color:#2d4e5e;line-height:1.7;text-align:center;margin-top:12px;padding:0 4px;}
/* ── Animations ── */
@keyframes ar2-fu{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
#ar2 .ar-fu{animation:ar2-fu .4s cubic-bezier(.22,.68,0,1.2) both;}
@keyframes ar2-sh{from{background-position:-200% center;}to{background-position:200% center;}}
#ar2 .ar-sh{background:linear-gradient(90deg,var(--t) 0%,var(--ic) 40%,var(--t) 100%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:ar2-sh 3s linear infinite;}
@media print{#ar2 .ar-bar,#ar2 .ar-nav,.no-print{display:none!important;}}
/* ── Bodies of water ── */
#ar2 .ar-body-card{background:rgba(0,0,0,.2);border:1px solid rgba(0,180,216,.12);border-radius:10px;padding:13px 13px;margin-bottom:10px;transition:border-color .2s,background .2s;}
#ar2 .ar-body-card.has-gal{background:rgba(0,180,216,.05);border-color:rgba(0,180,216,.25);}
#ar2 .ar-body-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px;flex-wrap:wrap;}
#ar2 .ar-body-type{display:grid;grid-template-columns:1fr 1fr;border-radius:7px;border:1px solid rgba(0,180,216,.2);overflow:hidden;flex-shrink:0;}
#ar2 .ar-btype-btn{padding:6px 12px;text-align:center;font-size:11px;font-weight:600;cursor:pointer;border:none;background:rgba(72,202,228,.12);color:var(--aq);transition:background .15s,color .15s;white-space:nowrap;}
#ar2 .ar-btype-btn.on{background:var(--aq);color:#fff;}
#ar2 .ar-btype-btn:hover:not(.on){background:rgba(0,180,216,.08);color:var(--tx);}
#ar2 .ar-body-dims{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-bottom:10px;}
#ar2 .ar-body-surf{display:grid;grid-template-columns:1.6fr 1fr;gap:9px;margin-bottom:10px;}
#ar2 .ar-body-gal{display:flex;align-items:center;justify-content:space-between;padding-top:9px;border-top:1px solid rgba(255,255,255,.05);}
#ar2 .ar-body-gal-lbl{font-size:11px;color:#3a6a80;}
#ar2 .ar-body-gal-val{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:var(--t);}
#ar2 .ar-total-row{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;background:rgba(0,180,216,.07);border:1px solid rgba(0,180,216,.18);border-radius:9px;margin-top:4px;}
#ar2 .ar-add-body{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:9px;margin-top:4px;border-radius:8px;border:1px dashed var(--aq);background:rgba(72,202,228,.06);color:var(--aq);font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,color .15s;}
#ar2 .ar-add-body:hover{background:rgba(0,180,216,.08);color:var(--t);}
#ar2 .ar-rm-body{padding:4px 8px;border-radius:6px;border:1px solid rgba(239,68,68,.2);background:rgba(239,68,68,.08);color:var(--re);font-size:11px;font-weight:600;cursor:pointer;flex-shrink:0;}
#ar2 .ar-rm-body:hover{background:rgba(239,68,68,.18);}
/* ── Input mode toggle (Dimensions / Gallons / Manual) ── */
#ar2 .ar-imode{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid rgba(0,180,216,.25);border-radius:7px;overflow:hidden;flex-shrink:0;}
#ar2 .ar-imode-btn{padding:7px 11px;font-size:11px;font-weight:600;cursor:pointer;border:none;background:rgba(72,202,228,.12);color:var(--aq);transition:background .15s,color .15s;white-space:nowrap;line-height:1.4;}
#ar2 .ar-imode-btn.on{background:var(--aq);color:#fff;}
#ar2 .ar-imode-btn:hover:not(.on){background:rgba(0,180,216,.07);color:var(--tx);}
/* Divergence badge — shown on body cards whose input drifted >15% from the map */
#ar2 .ar-diverge-badge{display:flex;align-items:center;gap:6px;margin:8px 0 0;padding:7px 10px;border-radius:7px;background:rgba(240,165,0,.12);border:1px solid rgba(240,165,0,.35);color:#f7c948;font-size:11px;line-height:1.3;cursor:help;}
#ar2 .ar-diverge-badge u{cursor:pointer;color:#fff;text-decoration-color:rgba(255,255,255,.4);font-weight:600;}
#ar2 .ar-diverge-badge u:hover{text-decoration-color:#fff;}
#ar2 .ar-diverge-badge svg{flex-shrink:0;}
/* Map-origin provenance tag on body card header */
#ar2 .ar-body-map-tag{display:inline-flex;align-items:center;gap:3px;font-size:9px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;padding:2px 6px;border-radius:8px;color:var(--aq);background:rgba(0,180,216,.12);border:1px solid rgba(0,180,216,.28);}
#ar2 .ar-img-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;font-size:11px;font-weight:600;cursor:pointer;border:1px solid rgba(0,180,216,.3);background:rgba(0,180,216,.08);color:var(--aq);border-radius:5px;transition:background .15s,color .15s,border-color .15s;white-space:nowrap;line-height:1.3;font-family:inherit;}
#ar2 .ar-img-btn:hover{background:rgba(0,180,216,.18);color:#fff;border-color:var(--aq);}
#ar2 .ar-img-btn.danger{padding:6px 9px;border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08);color:#fca5a5;}
#ar2 .ar-img-btn.danger:hover{background:rgba(239,68,68,.2);color:#fff;border-color:#ef4444;}
#ar2 .ar-bpipe-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;}
#ar2 .ar-bpipe-cell{display:flex;flex-direction:column;align-items:center;}
#ar2 .ar-bpipe-lbl{font-size:10px;color:var(--mu);font-weight:600;margin-bottom:3px;letter-spacing:0.5px;}
#ar2 .ar-bpipe-inp{width:100%;max-width:52px;padding:5px 4px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;background:rgba(0,0,0,.25);color:var(--t);border:1px solid rgba(0,180,216,.2);border-radius:4px;outline:none;transition:border-color .15s,background .15s;}
#ar2 .ar-bpipe-inp:focus{border-color:var(--t);background:rgba(0,0,0,.35);}
#ar2 .ar-bpipe-inp::-webkit-outer-spin-button,#ar2 .ar-bpipe-inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
#ar2 .ar-bpipe-inp[type=number]{-moz-appearance:textfield;}
#ar2 .ar-qty-btn.locked{opacity:.35;pointer-events:none;cursor:not-allowed;}
#ar2 .ar-pipe-row.locked .ar-pipe-info{opacity:.85;}
#ar2 .ar-manual-override{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06);}
#ar2 .ar-manual-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
#ar2 .ar-manual-row label{font-size:13px;color:var(--tx);}
@media(max-width:480px){#ar2 .ar-body-dims{grid-template-columns:1fr 1fr;}}
/* ── Export section ── */
#ar2 .ar-export{}
#ar2 .ar-export-title{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--t);font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:7px;}
#ar2 .ar-export-field{margin-bottom:16px;}
#ar2 .ar-export-field-lbl{display:block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mu);font-weight:600;margin-bottom:8px;}
#ar2 .ar-export-note{font-size:11px;color:#3a6a80;margin-top:6px;line-height:1.6;}
/* ── Comments input (UX-polished) ── */
#ar2 .ar-comm-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
#ar2 .ar-comm-counter{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;color:var(--mu);letter-spacing:0.5px;padding:2px 8px;background:rgba(0,180,216,.06);border:1px solid rgba(0,180,216,.15);border-radius:10px;transition:color .2s,background .2s,border-color .2s;}
#ar2 .ar-comm-counter-sep{opacity:.45;margin:0 2px;}
#ar2 .ar-comm-counter.warn{color:#f0a500;background:rgba(240,165,0,.1);border-color:rgba(240,165,0,.35);}
#ar2 .ar-comm-counter.full{color:#ef4444;background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.4);}
#ar2 .ar-comm-wrap{position:relative;display:flex;align-items:center;background:rgba(0,0,0,.25);border:1px solid rgba(0,180,216,.2);border-radius:8px;transition:border-color .15s,background .15s,box-shadow .15s;}
#ar2 .ar-comm-wrap:hover{border-color:rgba(0,180,216,.35);}
#ar2 .ar-comm-wrap:focus-within{border-color:var(--t);background:rgba(0,0,0,.35);box-shadow:0 0 0 3px rgba(0,180,216,.12);}
#ar2 .ar-comm-wrap.filled{border-color:rgba(0,180,216,.3);}
#ar2 .ar-comm-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:34px;height:38px;color:var(--mu);transition:color .15s;}
#ar2 .ar-comm-wrap:focus-within .ar-comm-icon,#ar2 .ar-comm-wrap.filled .ar-comm-icon{color:var(--t);}
#ar2 .ar-comm-input{flex:1;background:transparent;border:none;outline:none;color:var(--tx);font-family:'DM Sans',sans-serif;font-size:13px;padding:10px 4px;min-width:0;}
#ar2 .ar-comm-input::placeholder{color:#486b7a;font-style:italic;}
#ar2 .ar-comm-clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin-right:5px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:50%;color:var(--mu);cursor:pointer;transition:background .15s,color .15s,transform .1s;padding:0;}
#ar2 .ar-comm-clear:hover{background:rgba(239,68,68,.15);color:#fca5a5;border-color:rgba(239,68,68,.3);transform:rotate(90deg);}
#ar2 .ar-comm-clear:active{transform:rotate(90deg) scale(.9);}
/* Radio / checkbox rows */
#ar2 .ar-radio-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
#ar2 .ar-radio-row label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--tx);cursor:pointer;}
#ar2 .ar-radio-row input[type=radio],
#ar2 .ar-radio-row input[type=checkbox]{accent-color:var(--t);width:14px;height:14px;cursor:pointer;}
#ar2 .ar-radio-divider{width:1px;height:18px;background:rgba(0,180,216,.2);margin:0 4px;}
/* Toggle row */
#ar2 .ar-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;border:1px solid rgba(0,180,216,.15);border-radius:9px;margin-bottom:9px;}
#ar2 .ar-toggle-row label{font-size:13px;color:var(--tx);cursor:pointer;}
/* Textarea */
#ar2 .ar-textarea{width:100%;background:rgba(0,0,0,.22);border:1px solid rgba(0,180,216,.22);border-radius:8px;color:var(--tx);padding:10px 12px;font-size:13px;font-family:'DM Sans',sans-serif;outline:none;resize:vertical;min-height:50px;transition:border-color .16s;}
#ar2 .ar-textarea:focus{border-color:rgba(0,180,216,.6);box-shadow:0 0 0 3px rgba(0,180,216,.1);}
#ar2 .ar-textarea::placeholder{color:rgba(125,184,204,.4);}
/* Media items */
#ar2 .ar-media-item{background:rgba(0,0,0,.15);border:1px solid rgba(255,255,255,.06);border-radius:9px;padding:11px;margin-bottom:10px;}
#ar2 .ar-media-preview{position:relative;display:inline-block;margin-bottom:7px;}
#ar2 .ar-media-thumb{width:180px;height:auto;border-radius:6px;border:1px solid rgba(255,255,255,.1);display:block;}
#ar2 .ar-yt-wrap{position:relative;display:inline-block;}
#ar2 .ar-yt-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
#ar2 .ar-yt-play-icon{background:rgba(0,0,0,.6);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;}
#ar2 .ar-rm-media{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;background:var(--re);border:none;color:#fff;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;}
#ar2 .ar-yt-url{font-size:10px;color:#3a6a80;margin-bottom:6px;word-break:break-all;}
/* ── Image slots ── */
#ar2 .ar-img-slots{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
#ar2 .ar-img-slot{aspect-ratio:4/3;border:1px dashed rgba(0,180,216,.3);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:background .15s;overflow:hidden;position:relative;}
#ar2 .ar-img-slot:hover{background:rgba(0,180,216,.05);}
#ar2 .ar-img-slot.filled{border-style:solid;border-color:rgba(0,180,216,.2);}
#ar2 .ar-img-slot img{width:100%;height:100%;object-fit:cover;display:block;}
#ar2 .ar-img-slot .ar-img-cap-input{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.6);border:none;color:#fff;font-size:11px;padding:6px 8px;font-family:inherit;outline:none;}
/* ── YouTube drawer ── */
#ar2 .ar-yt-drawer{max-height:0;overflow:hidden;transition:max-height .3s ease;}
#ar2 .ar-yt-drawer.open{max-height:2000px;}
/* File upload button */
#ar2 .ar-file-btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px;width:100%;border:1px dashed rgba(0,180,216,.3);border-radius:8px;color:var(--mu);font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,color .15s;}
#ar2 .ar-file-btn:hover{background:rgba(0,180,216,.07);color:var(--t);}
/* Gen button */
#ar2 .ar-gen-btn{background:linear-gradient(135deg,var(--t),var(--aq));color:var(--nv);border:none;border-radius:9px;padding:13px;width:100%;font-family:'DM Sans',sans-serif;font-weight:700;font-size:14px;cursor:pointer;transition:filter .18s;margin-top:4px;}
#ar2 .ar-gen-btn:hover{filter:brightness(1.1);}
#ar2 .ar-gen-btn:disabled{opacity:.5;cursor:not-allowed;}
/* ── Print: hide app, show report ── */
#ar2-report{display:none;}
/* Preview mode — when generateEngineerReport(..., {previewOnly:true})
   opens the in-page preview, the report root gets .is-preview so the
   page can fill the full viewport instead of being capped at the
   default 860px narrow column. Print CSS already overrides max-width
   separately, so paper output isn't affected. */
#ar2-report.is-preview{background:#1a2a3a;min-height:100vh;}
/* All report page types widen to the full viewport in preview mode so
   the on-screen layout mirrors the printed paper without the 860px
   narrow-column compression that the default screen CSS imposes. */
#ar2-report.is-preview .rpt,
#ar2-report.is-preview .rpt-pp-page,
#ar2-report.is-preview .rpt-es-page,
#ar2-report.is-preview .rpt-cover-page,
#ar2-report.is-preview .rpt-factsheet-page,
#ar2-report.is-preview .rpt-back-cover,
#ar2-report.is-preview .rpt-fs-img-page{max-width:none!important;width:100%!important;margin:0!important;box-shadow:0 0 0 1px rgba(255,255,255,.04);}
#ar2-report.is-preview .rpt + .rpt,
#ar2-report.is-preview .rpt-pp-page + .rpt-pp-page,
#ar2-report.is-preview .rpt + .rpt-pp-page,
#ar2-report.is-preview .rpt-pp-page + .rpt,
#ar2-report.is-preview .rpt-es-page + *,
#ar2-report.is-preview .rpt-factsheet-page + *,
#ar2-report.is-preview .rpt-pp-page + *{margin-top:24px!important;}

/* Page-sized preview — locks each report page to the same dimensions
   it'll print at (US Letter portrait 8.5×11in / landscape 11×8.5in)
   so the in-page preview is a faithful preview of the PDF download,
   not a continuous scroll. Overflow:hidden mirrors the print clip
   behaviour: if content runs long, it's clipped at the page edge
   instead of growing the preview tall. Centred on a slate background
   with shadow for the "sheet of paper on a desk" effect.
   8.5in / 11in @ 96dpi = 816px / 1056px. */
#ar2-report.is-preview{padding:24px 0;}
#ar2-report.is-preview .rpt:not(.rpt-landscape),
#ar2-report.is-preview .rpt-pp-page:not(.rpt-pp-page-landscape),
#ar2-report.is-preview .rpt-es-page,
#ar2-report.is-preview .rpt-cover-page,
#ar2-report.is-preview .rpt-factsheet-page,
#ar2-report.is-preview .rpt-back-cover,
#ar2-report.is-preview .rpt-fs-img-page{
  width:816px!important;
  max-width:816px!important;
  min-height:1056px!important;
  height:1056px!important;
  max-height:1056px!important;
  margin:24px auto!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  box-shadow:0 12px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04)!important;
  background:#fff!important;
  box-sizing:border-box!important;
}
/* Landscape page types (existing screen rules already size these to
   1120×866 — see @media screen block lower in this stylesheet). The
   `.is-preview` padding above applies to those too via the wrapper. */
#ar2-report.is-preview .rpt.rpt-landscape{
  margin:24px auto!important;
  box-shadow:0 12px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04)!important;
  background:#fff!important;
}
/* Body inside a preview page — same flex containment the print rules
   apply, so the footer/CTA stay pinned to the bottom and overflowing
   content gets clipped instead of spilling past the page edge. */
#ar2-report.is-preview .rpt > .rpt-body{flex:1 1 0!important;min-height:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;}
#ar2-report.is-preview .rpt-cta-bar,
#ar2-report.is-preview .rpt-foot{flex:0 0 auto!important;}
#ar2-report.is-preview .rpt-foot{margin-top:auto!important;}

/* Engineer verification PDF — minimal additions on top of existing .rpt-* chrome. */
#ar2-report .rpt-eng-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px;}
#ar2-report .rpt-eng-photo{break-inside:avoid;page-break-inside:avoid;}
#ar2-report .rpt-eng-photo img{width:100%;height:auto;border-radius:6px;border:1px solid #ddd;display:block;}
#ar2-report .rpt-eng-photo-missing{padding:24px;background:#f5f5f5;color:#888;font-size:10px;text-align:center;border-radius:6px;}
#ar2-report .rpt-eng-photo-cap{font-size:10px;color:#666;margin-top:4px;font-style:italic;}
#ar2-report .rpt-eng-videos{margin-top:10px;font-size:11px;color:#555;}
#ar2-report .rpt-eng-discrepancy{margin-top:14px;padding:10px 12px;background:#fff4dc;border-left:3px solid #f0a500;border-radius:4px;font-size:11.5px;color:#5a3c00;line-height:1.5;}
@media print{
  html,body{margin:0!important;padding:0!important;background:#fff!important;overflow:visible!important;height:auto!important;width:auto!important;}
  /* Hide everything by default */
  body>*{display:none!important;}
  /* Show #ar2-report by moving it to be a direct child of body via JS,
     OR reveal the ancestor chain if it's nested in Webflow wrappers */
  #ar2-report{display:block!important;max-width:none!important;width:100%!important;padding:0!important;margin:0!important;position:static!important;visibility:visible!important;height:auto!important;overflow:visible!important;}
  /* Ensure Webflow wrapper ancestors of #ar2-report are visible */
  /* IMPORTANT: use explicit `in` units instead of `100vh` for the print
     page wrapper. Chrome's print engine resolves vh against the BROWSER
     window, not the printed sheet — so a tall window made 100vh > 11in
     and the Assessment .rpt bled onto a second sheet (portrait orphan
     page) or bottom-anchored content (landscape media row) sat below
     the printable area. The orientation is set on @page (margin:0mm)
     so the layout-time width × height equals exactly 8.5in × 11in
     portrait or 11in × 8.5in landscape. */
  #ar2-report .rpt:not(.rpt-landscape){max-width:none!important;width:100%!important;margin:0!important;min-height:11in!important;max-height:11in!important;height:11in!important;display:flex!important;flex-direction:column!important;page-break-after:auto!important;break-after:auto!important;overflow:hidden!important;}
  #ar2-report .rpt.rpt-landscape{max-width:none!important;width:100%!important;margin:0!important;min-height:8.5in!important;max-height:8.5in!important;height:8.5in!important;display:flex!important;flex-direction:column!important;page-break-after:auto!important;break-after:auto!important;overflow:hidden!important;}
  /* Body MUST be flex:1 1 0 + min-height:0 + overflow:hidden so content
     inside the body never pushes the CTA bar or footer past the page
     boundary. flex:1 alone (without min-height:0) lets body grow to fit
     content, which then bleeds CTA + foot off the page in landscape. */
  #ar2-report .rpt .rpt-body{flex:1 1 0!important;min-height:0!important;overflow:hidden!important;padding:16px 28px 12px!important;}
  #ar2-report .rpt-foot{margin-top:auto!important;flex:0 0 auto!important;}
  #ar2-report .rpt-cta-bar{flex:0 0 auto!important;}
  .no-print{display:none!important;}
  /* Hide chrome extensions and overlays */
  *[id*="hubspot"],*[class*="hubspot"],*[id*="HubSpot"],*[class*="HubSpot"],
  iframe:not(#ar2-report iframe),object,embed,
  div[style*="position: fixed"],div[style*="position:fixed"],
  [style*="z-index: 2147483647"],[style*="z-index:2147483647"]{display:none!important;}
  #ar2-report .rpt,#ar2-report .rpt *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;color-adjust:exact!important;}
  #ar2-report .rpt-head,#ar2-report .rpt-kpis,#ar2-report .rpt-foot,#ar2-report .rpt-sbox,#ar2-report .rpt-stat,#ar2-report .rpt-tbl thead tr{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
  #ar2-report .rpt-sec{page-break-inside:avoid;}
  #ar2-report .rpt-body{page-break-before:avoid;}
  #ar2-report .rpt-factsheet-page{page-break-before:always;break-before:page;min-height:100vh;display:flex;flex-direction:column;max-width:none!important;width:100%!important;margin:0!important;}
  #ar2-report .rpt-factsheet-page .rpt-body{flex:1;}
  #ar2-report .rpt-factsheet-page .rpt-foot{margin-top:auto;}
  #ar2-report .rpt-factsheet-page,#ar2-report .rpt-factsheet-page *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;color-adjust:exact!important;}
  #ar2-report .rpt-fs-kpi,#ar2-report .rpt-cert,#ar2-report .rpt-fs-cell{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
  #ar2-report .rpt-back-cover{page-break-before:always;break-before:page;}
  #ar2-report .rpt-cover-page{page-break-after:auto;break-after:auto;page-break-inside:avoid;break-inside:avoid;width:100vw!important;height:100vh!important;max-height:100vh!important;max-width:none!important;margin:0!important;padding:0!important;overflow:hidden!important;position:relative;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
  #ar2-report .rpt-cover-page .rpt-cover-bg{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;margin:0!important;padding:0!important;}
  #ar2-report .rpt-cover-header{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
  /* Pool Profile page — full-bleed: padding:0 on the page so the header
     band and footer span edge-to-edge. The grid wrapper has its own
     internal padding (.rpt-pp-grid-wrap) so the cards still have
     margin from the page edges. */
  /* .rpt-pp-page used to be hard-clamped to height:100vh + overflow:hidden,
     which silently CLIPPED any cards that didn't fit in a single
     printed sheet. With the per-page chunker now sized for headroom,
     allow the page to grow if it needs to so nothing is hidden. The
     page-break-before still starts every chunk on a new sheet. */
  /* Use explicit in units (page-relative) instead of 100vh (browser-
     window-relative in Chrome print) so the page wrapper matches the
     printed sheet exactly. Same Chrome quirk that caused the original
     Assessment orphan now also surfaces on Pool Profile portrait. */
  #ar2-report .rpt-pp-page:not(.rpt-pp-page-landscape){page-break-before:always!important;break-before:page!important;page-break-after:auto!important;break-after:auto!important;min-height:11in!important;max-height:11in!important;height:11in!important;max-width:none!important;width:100%!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column!important;box-shadow:none!important;overflow:hidden!important;}
  #ar2-report .rpt-pp-page.rpt-pp-page-landscape{page-break-before:always!important;break-before:page!important;page-break-after:auto!important;break-after:auto!important;min-height:8.5in!important;max-height:8.5in!important;height:8.5in!important;max-width:none!important;width:100%!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column!important;box-shadow:none!important;overflow:hidden!important;}
  #ar2-report .rpt-pp-page .rpt-pp-grid{padding:14px 22px;flex:1 1 auto!important;min-height:0!important;overflow:visible!important;align-content:start;}
  /* Card sizing — sized so 12 cards (6 rows × 2 cols) fit cleanly inside
     the portrait 100vh print sheet. 6 × 148 + 5 × 8 gap = 928px content;
     header (~50) + grid padding (28) + footer (30) ≈ 1036px ≤ ~1056px
     print height. Landscape (15 cards = 5 rows × 3 cols) gets its own
     tighter card size via the .rpt-pp-page-landscape override below. */
  #ar2-report .rpt-pp-page .rpt-pp-card{min-height:148px!important;padding:10px!important;}
  #ar2-report .rpt-pp-page .rpt-pp-grid{gap:8px!important;}
  #ar2-report .rpt-pp-page .rpt-pp-row{padding:1px 0!important;font-size:10.5px!important;}
  #ar2-report .rpt-pp-page .rpt-pp-head{margin-bottom:3px!important;padding-bottom:3px!important;}
  #ar2-report .rpt-pp-page .rpt-pp-img{width:140px!important;height:92px!important;}
  #ar2-report .rpt-pp-page .rpt-pp-card{grid-template-columns:140px 1fr!important;}
  #ar2-report .rpt-pp-page,#ar2-report .rpt-pp-page *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;color-adjust:exact!important;}
  #ar2-report .rpt-pp-grid{flex:1 1 auto;align-content:start;}
  #ar2-report .rpt-pp-card{page-break-inside:avoid;break-inside:avoid;}
  /* ── Exec Summary pages — locked to 100vh, no bleed ── */
  /* Exec Summary page — kept page-break-before / inside-avoid for
     visual integrity but the hard height clamp was causing the same
     clip-on-overflow problem the pool profile pages had. Allow growth. */
  #ar2-report .rpt-es-page{page-break-before:always!important;break-before:page!important;page-break-after:auto!important;break-after:auto!important;page-break-inside:avoid!important;break-inside:avoid!important;min-height:100vh!important;max-height:none!important;height:auto!important;max-width:none!important;width:100%!important;margin:0!important;box-shadow:none!important;overflow:visible!important;display:flex!important;flex-direction:column!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
  #ar2-report .rpt-es-page,#ar2-report .rpt-es-page *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;color-adjust:exact!important;}
  #ar2-report .rpt-es-head{padding:12px 28px 10px!important;}
  /* Portrait ES body containment — both body-1 (page 1) and body-2 (page 2)
     must be flex:1 1 0 so they grow to fill remaining vertical space inside
     the .rpt-es-page (height:100vh) and overflow:hidden clips any content
     that exceeds that allotted body height. Previously body-2 used
     flex:0 1 auto which let content push past the page boundary.
     Children (left/right col) inherit this strict containment via overflow:hidden. */
  #ar2-report .rpt-es-body-1,
  #ar2-report .rpt-es-page-2 .rpt-es-body-2{flex:1 1 0!important;min-height:0!important;overflow:hidden!important;}
  #ar2-report .rpt-es-body-1 > *,
  #ar2-report .rpt-es-page-2 .rpt-es-body-2 > *{min-height:0!important;overflow:hidden!important;}
  /* Chart SVG cap kept loose so the print render matches the screen preview.
     Earlier we'd hard-clamped to 160px which made the chart shrink and
     introduce horizontal margins — preview and PDF then diverged. The
     viewBox aspect (540×210) already keeps the natural height ≈ col-width
     ÷ 2.57 ≈ 176px, which fits comfortably without bleeding the footer. */
  #ar2-report .rpt-es-page .rpt-es-chart-svg{max-height:200px!important;}
  #ar2-report .rpt-es-device-full{margin:0 0 10px!important;}
  #ar2-report .rpt-es-feat-grid{margin:3px 0 10px!important;}
  #ar2-report .rpt-es-left,#ar2-report .rpt-es-right{padding:14px 24px 18px!important;}
  #ar2-report .rpt-es-left-2{padding:12px 24px 16px!important;}
  #ar2-report .rpt-es-right-2{padding:12px 26px 16px!important;}
  #ar2-report .rpt-es-hero img{height:120px!important;}
  #ar2-report .rpt-es-foot{padding:8px 28px!important;font-size:8px!important;margin-top:auto!important;}
  #ar2-report .rpt-es-foot .rpt-foot-logo{font-size:11px!important;}
  #ar2-report .rpt-es-chart{margin:4px 0 8px!important;}
  #ar2-report .rpt-es-page a[href]{color:inherit;}
  #ar2-report .rpt-pp-page .rpt-foot{margin-left:-28px!important;margin-right:-28px!important;margin-bottom:-14px!important;}
  #ar2-report .rpt-fs-img-page{page-break-before:always!important;break-before:page!important;page-break-after:auto!important;break-after:auto!important;page-break-inside:avoid;break-inside:avoid;width:100%!important;max-width:none!important;height:100vh!important;max-height:100vh!important;margin:0!important;padding:0!important;overflow:hidden!important;position:relative;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;}
  #ar2-report .rpt-fs-img-page img{width:100%!important;height:100%!important;max-width:100%!important;max-height:100vh!important;object-fit:contain!important;display:block!important;margin:0!important;padding:0!important;}
  /* Back cover — full bleed, no white borders (overrides fact-sheet contain) */
  #ar2-report .rpt-back-cover-page img{object-fit:cover!important;}
  #ar2-report .rpt-fs-img-page:last-child{page-break-after:avoid;break-after:avoid;}
  /* ── Landscape variants — clamp to exactly one landscape page, no bleed ── */
  #ar2-report .rpt-ls-cover-page{page-break-before:always!important;break-before:page!important;page-break-after:auto!important;break-after:auto!important;page-break-inside:avoid!important;break-inside:avoid!important;width:100vw!important;height:100vh!important;max-width:none!important;max-height:100vh!important;margin:0!important;padding:0!important;overflow:hidden!important;position:relative!important;box-shadow:none!important;aspect-ratio:auto!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
  #ar2-report .rpt-ls-cover-page .rpt-cover-bg{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;margin:0!important;padding:0!important;}
  #ar2-report .rpt-ls-back-cover-page{page-break-before:always!important;break-before:page!important;page-break-after:auto!important;break-after:auto!important;page-break-inside:avoid!important;break-inside:avoid!important;width:100vw!important;height:100vh!important;max-width:none!important;max-height:100vh!important;margin:0!important;padding:0!important;overflow:hidden!important;position:relative!important;box-shadow:none!important;aspect-ratio:auto!important;}
  #ar2-report .rpt-ls-back-cover-page img{width:100%!important;height:100%!important;max-width:100%!important;max-height:100vh!important;object-fit:cover!important;display:block!important;margin:0!important;padding:0!important;}
  #ar2-report .rpt-ls-es-page{page-break-before:always!important;break-before:page!important;page-break-after:auto!important;break-after:auto!important;page-break-inside:avoid!important;break-inside:avoid!important;min-height:100vh!important;max-height:100vh!important;height:100vh!important;width:100vw!important;max-width:none!important;margin:0!important;box-shadow:none!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;aspect-ratio:auto!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
  #ar2-report .rpt-ls-es-page,#ar2-report .rpt-ls-es-page *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;color-adjust:exact!important;}
  #ar2-report .rpt-ls-es-body-3col,#ar2-report .rpt-ls-es-body-2col{flex:1!important;min-height:0!important;overflow:hidden!important;}
  #ar2-report .rpt-ls-es-page .rpt-es-foot{margin-top:auto!important;}
  #ar2-report .rpt-ls-es-page a[href]{color:inherit;}
  #ar2-report .rpt-pres-deck-page{page-break-before:always!important;break-before:page!important;page-break-after:auto!important;break-after:auto!important;page-break-inside:avoid!important;break-inside:avoid!important;width:100vw!important;height:100vh!important;max-width:none!important;max-height:100vh!important;margin:0!important;padding:0!important;overflow:hidden!important;position:relative!important;box-shadow:none!important;aspect-ratio:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
  #ar2-report .rpt a[href]{color:inherit;}
  #ar2-report .rpt-cta-bar a{color:#48cae4!important;text-decoration:none!important;}
  #ar2-report .rpt-media-wrap a{display:block;}
  /* Flatten gradients (applies to both orientations) → smaller PDF raster size */
  #ar2-report .rpt-kpis{background:#071628!important;}
  #ar2-report .rpt-cta-bar{background:#071628!important;}
}
/* ── Portrait-only compaction — ensures up to 10 pools fit on a single Assessment page. Does not affect landscape. ── */
@media print and (orientation:portrait){
  #ar2-report .rpt-body{padding:12px 24px 8px;}
  #ar2-report .rpt-sec{margin-bottom:8px;}
  #ar2-report .rpt-stitle{margin-bottom:7px;padding-bottom:4px;font-size:8px;}
  #ar2-report .rpt-row{padding:2px 0;font-size:10.5px;}
  #ar2-report .rpt-tbl td,#ar2-report .rpt-tbl th{padding:4px 8px;font-size:10.5px;}
  #ar2-report .rpt-tbl{font-size:10.5px;}
  #ar2-report .rpt-sbox{padding:10px 12px;margin-bottom:6px;}
  #ar2-report .rpt-sbox-title{margin-bottom:6px;padding-bottom:5px;}
  #ar2-report .rpt-kpi{padding:12px 12px;}
  #ar2-report .rpt-kpi-val{font-size:22px;}
  #ar2-report .rpt-head{padding:16px 28px 14px;}
  #ar2-report .rpt-disc{font-size:8px;padding-top:6px;margin-top:8px;line-height:1.5;}
  #ar2-report .rpt-foot{padding:10px 28px;}
  #ar2-report .rpt-stat{padding:8px 10px;}
  #ar2-report .rpt-stat-val{font-size:14px;}
  #ar2-report .rpt-comments{padding:6px 10px;font-size:10.5px;}
  /* ── PORTRAIT EXEC SUMMARY — PDF ONLY compression ──
     Screen preview renders the ES pages at ~1113px tall, but the print
     page (8.5x11in @ 96dpi) is 1056px tall. Without these rules the page-1
     hero/lead and page-2 outcome-cards/Ritz block overflow off the bottom
     of the PDF page (preview looks fine, print doesn't). These rules
     apply to PRINT ONLY: screen preview is unaffected. */
  #ar2-report .rpt-es-page .rpt-es-head{padding:8px 24px 6px!important;}
  #ar2-report .rpt-es-page .rpt-es-foot{padding:5px 24px!important;font-size:7.5px!important;}
  #ar2-report .rpt-es-page .rpt-es-foot .rpt-foot-logo{font-size:10px!important;}
  #ar2-report .rpt-es-page .rpt-es-left,
  #ar2-report .rpt-es-page .rpt-es-right{padding:10px 20px 12px!important;}
  #ar2-report .rpt-es-page .rpt-es-left-2,
  #ar2-report .rpt-es-page .rpt-es-right-2{padding:8px 20px 10px!important;}
  #ar2-report .rpt-es-page .rpt-es-hero img{height:90px!important;}
  /* Chart max-height intentionally NOT clamped here — the upstream rule at
     line ~465 caps it to 200px so the PDF render matches the screen preview.
     A previous 130px override (since removed) was squishing the chart in
     print only and diverging from the preview. */
  #ar2-report .rpt-es-page .rpt-es-chart{margin:2px 0 6px!important;}
  #ar2-report .rpt-es-page .rpt-es-statline{padding:3px 0!important;}
  #ar2-report .rpt-es-page .rpt-es-bignum{font-size:20px!important;margin:2px 0 8px!important;}
  #ar2-report .rpt-es-page .rpt-es-outcome-cards{gap:6px!important;margin:5px 0 6px!important;}
  #ar2-report .rpt-es-page .rpt-es-out-card{padding:5px 4px!important;}
  #ar2-report .rpt-es-page .rpt-es-feat-grid{margin:2px 0 6px!important;}
  #ar2-report .rpt-es-page .rpt-es-device-full{margin:0 0 4px!important;}
  /* Trim Ritz + video container margins on page 2 so they don't push the
     bottom off the print page. */
  #ar2-report .rpt-es-page .rpt-es-ritz{margin:4px 0 6px!important;}
  #ar2-report .rpt-es-page .rpt-es-video{margin:4px 0 6px!important;}
  /* ── PORTRAIT ASSESSMENT — cap image/video grids + client-logo header ──
     The single-page Assessment fits Pool Config + Devices + Purchase +
     Breakdown + Water + Property Images + Video Resources + CTA + Foot
     into one 8.5×11 page. When a Client uploads a logo, the rpt-head
     grows from ~70px (wordmark+sub) to ~83px (42px logo+sub), eating into
     the body slot. Combined with the natural ~120px-tall 16/9 image
     tiles, the imgHtml + ytHtml row could overflow the body's
     overflow:hidden clip — content vanished or visually crowded the
     footer. Caps below trim the tile height and tighten the header logo
     so PDF and preview stay aligned even with a tall client mark.
     Selector `.rpt:not(.rpt-landscape)` targets ONLY the bare Assessment
     wrapper — Cover / ES / Pool Profile / Back Cover all use their own
     `.rpt-*-page` classes and aren't affected. */
  #ar2-report .rpt:not(.rpt-landscape) .rpt-img-grid{gap:6px!important;margin-top:3px!important;}
  #ar2-report .rpt:not(.rpt-landscape) .rpt-img-wrap{max-height:72px!important;}
  #ar2-report .rpt:not(.rpt-landscape) .rpt-img-cap{font-size:8px!important;margin-top:2px!important;line-height:1.25!important;}
  #ar2-report .rpt:not(.rpt-landscape) .rpt-head-left img{max-height:34px!important;margin-bottom:2px!important;}
  /* ── Portrait Assessment body: belt-and-suspenders containment ──
     The body is flex-column with its 3 children (Row A pool+devices,
     Row B purchase+breakdown+water+images+videos, disclaimer) as flex
     items. Mark the row that holds Property Images + Video Resources
     (`.rpt-pt-media-row`, added by the JS builder below) as flex:0 0 auto
     and pin it just above the disclaimer with margin-top:auto so the
     images CANNOT be pushed past the body's overflow:hidden boundary —
     if upper content runs tall, the Purchase/Breakdown row gets clipped
     before the media row does. */
  #ar2-report .rpt:not(.rpt-landscape) > .rpt-body{flex:1 1 0!important;min-height:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;}
  #ar2-report .rpt:not(.rpt-landscape) .rpt-pt-media-row{margin-top:auto!important;flex:0 0 auto!important;}
  #ar2-report .rpt:not(.rpt-landscape) .rpt-disc{flex:0 0 auto!important;}
  /* Compress all sections except the bottom-pinned media row so dense
     properties (7+ pools + water + images + videos) still fit on a single
     portrait page. */
  #ar2-report .rpt:not(.rpt-landscape) .rpt-row{padding:1.5px 0!important;font-size:10px!important;}
  #ar2-report .rpt:not(.rpt-landscape) .rpt-sec{margin-bottom:6px!important;}
  #ar2-report .rpt:not(.rpt-landscape) .rpt-sbox{padding:7px 10px!important;margin-bottom:4px!important;}
  #ar2-report .rpt:not(.rpt-landscape) .rpt-tbl td,
  #ar2-report .rpt:not(.rpt-landscape) .rpt-tbl th{padding:3px 6px!important;font-size:10px!important;}
}
/* ── LANDSCAPE PRINT RULES ──
   IMPORTANT: rules here are inside plain `@media print` and scoped by the
   `.rpt-landscape` / `.rpt.rpt-landscape` selector — NOT inside
   `@media print and (orientation:landscape)`.
   Why: Chrome's print engine (esp. headless --print-to-pdf, and in some
   interactive-print configurations) reports the orientation media query
   as PORTRAIT even when the page is laid out landscape via @page or the
   print dialog. As a result, every CSS rule we previously placed inside
   `@media print and (orientation:landscape){}` was DEAD CODE — never
   applied — which is why landscape Assessment PDFs kept breaking even
   after the rules were updated. Class scoping works because the JS
   builder adds `rpt-landscape` to the wrapper when EX.layout==='landscape'. */
@media print{
  #ar2-report .rpt.rpt-landscape{font-size:10px;}
  #ar2-report .rpt.rpt-landscape .rpt-head{padding:10px 20px;}
  #ar2-report .rpt.rpt-landscape .rpt-logo{font-size:20px;}
  #ar2-report .rpt.rpt-landscape .rpt-prop-name{font-size:16px;}
  #ar2-report .rpt.rpt-landscape .rpt-body{padding:10px 20px 6px;}
  #ar2-report .rpt.rpt-landscape .rpt-kpi{padding:8px 10px;}
  #ar2-report .rpt.rpt-landscape .rpt-kpi-val{font-size:18px;}
  #ar2-report .rpt.rpt-landscape .rpt-kpi-lbl{font-size:7px;}
  #ar2-report .rpt.rpt-landscape .rpt-sec{margin-bottom:6px;}
  #ar2-report .rpt.rpt-landscape .rpt-cols{gap:10px;}
  #ar2-report .rpt.rpt-landscape .rpt-img-wrap{border-radius:3px;}
  #ar2-report .rpt.rpt-landscape .rpt-foot-logo{font-size:11px;}
  #ar2-report .rpt.rpt-landscape .rpt-cta-bar .cta-label{font-size:8px;}
  #ar2-report .rpt.rpt-landscape .rpt-cta-bar a{font-size:10px;}
  /* Landscape is single-page tight — drop the redundant Savings Projection
     line below the breakdown table to recover ~24px of vertical space. The
     same value is already visible via the savings_weight applied in the
     scenario boxes; keeping it on portrait only. */
  #ar2-report .rpt.rpt-landscape .rpt-sw-applied{display:none!important;}
  /* Pool Profiles landscape — scoped via the dedicated landscape page class
     (.rpt-pp-page-landscape — applied by the JS builder when layout is
     landscape) so portrait Pool Profile pages are not affected. */
  #ar2-report .rpt-pp-page-landscape .rpt-pp-grid{grid-template-columns:1fr 1fr 1fr!important;gap:8px!important;}
  #ar2-report .rpt-pp-page-landscape .rpt-pp-card{min-height:140px!important;padding:8px!important;grid-template-columns:110px 1fr!important;}
  #ar2-report .rpt-pp-page-landscape .rpt-pp-img{width:110px!important;height:74px!important;}
  #ar2-report .rpt-pp-page-landscape .rpt-pp-name{font-size:12px!important;}
  #ar2-report .rpt-pp-page-landscape .rpt-pp-row{font-size:9.5px!important;}
  #ar2-report .rpt-pp-page-landscape .rpt-pp-row .v{font-size:10.5px!important;min-width:64px!important;}
  #ar2-report .rpt-pp-page-landscape .rpt-pp-title{font-size:18px!important;}
  #ar2-report .rpt-pp-page-landscape .rpt-pp-sub{font-size:9.5px!important;}
  #ar2-report .rpt-pp-page-landscape .rpt-pp-header{padding-bottom:6px!important;margin-bottom:8px!important;}
  /* ── Landscape Exec Summary fine-tuning ── */
  #ar2-report .rpt-ls-es-page .rpt-es-head{padding:10px 24px 8px!important;}
  #ar2-report .rpt-ls-es-page .rpt-es-left,#ar2-report .rpt-ls-es-page .rpt-es-right,#ar2-report .rpt-ls-es-page .rpt-es-mid{padding:14px 22px 16px!important;}
  #ar2-report .rpt-ls-es-page .rpt-es-foot{padding:6px 24px!important;font-size:8px!important;}
  #ar2-report .rpt-ls-es-page .rpt-es-foot .rpt-foot-logo{font-size:11px!important;}
  #ar2-report .rpt-ls-es-page .rpt-es-chart-svg{max-height:200px!important;}
  #ar2-report .rpt-ls-es-page .rpt-es-hero img{height:110px!important;}
  /* Ritz + video — natural aspect ratio in print too. Image fills col
     width with height:auto so the source proportions are preserved
     and nothing is cropped. */
  #ar2-report .rpt-ls-es-page .rpt-es-ritz img,
  #ar2-report .rpt-ls-es-page .rpt-es-video img{width:100%!important;height:auto!important;max-height:none!important;display:block!important;}
  /* ── ASSESSMENT LANDSCAPE — PDF ONLY compression ──
     Screen preview renders the Assessment at 1120×866px, but the print
     page (11×8.5 in @ 96dpi) is 1056×816px — 50px shorter. Without these
     rules content that just fits the screen preview overflows onto a
     phantom second page in the PDF. These rules apply to PRINT ONLY:
     screen preview is unaffected. */
  #ar2-report .rpt.rpt-landscape .rpt-head{padding:8px 24px!important;}
  #ar2-report .rpt.rpt-landscape .rpt-logo{font-size:22px!important;}
  #ar2-report .rpt.rpt-landscape .rpt-logo-sub{font-size:8.5px!important;margin-top:2px!important;}
  #ar2-report .rpt.rpt-landscape .rpt-prop-name{font-size:17px!important;}
  #ar2-report .rpt.rpt-landscape .rpt-prop-date{font-size:9.5px!important;}
  #ar2-report .rpt.rpt-landscape .rpt-kpi{padding:8px 12px!important;}
  #ar2-report .rpt.rpt-landscape .rpt-kpi-val{font-size:18px!important;}
  #ar2-report .rpt.rpt-landscape .rpt-kpi-lbl{font-size:8px!important;}
  #ar2-report .rpt.rpt-landscape .rpt-body{padding:10px 22px 6px!important;font-size:11px!important;}
  /* Match the screen-mode body containment: flex column with bottom-pinned
     media row + disclaimer so the landscape PDF body uses its vertical span
     (upper content top, gap, media + disc at the bottom). */
  #ar2-report .rpt.rpt-landscape > .rpt-body{flex:1 1 0!important;min-height:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;}
  #ar2-report .rpt.rpt-landscape .rpt-ls-media-row{margin-top:auto!important;flex:0 0 auto!important;}
  #ar2-report .rpt.rpt-landscape > .rpt-body:not(:has(.rpt-ls-media-row)) > .rpt-disc:last-child{margin-top:auto!important;}
  #ar2-report .rpt.rpt-landscape > .rpt-body > .rpt-disc{flex:0 0 auto!important;}
  #ar2-report .rpt.rpt-landscape .rpt-cta-bar{padding:3px 20px!important;}
  #ar2-report .rpt.rpt-landscape .rpt-foot{padding:3px 20px!important;font-size:6.5px!important;}
  /* ── Landscape Assessment AGGRESSIVE compaction ──
     The landscape body slot is ~440-460 CSS px tall (8.5in − chrome).
     With 7+ pools + 2 purchase boxes + full breakdown + water + images
     + videos, content totals ~480-520 CSS px naturally. To make it ALL
     fit on one landscape page we squeeze every section: smaller fonts,
     tighter padding on rows / boxes / tables / titles. This is print-
     only — screen preview keeps the relaxed sizes.
     Numbers tuned against the actual user data: 7 pools, Purchase +
     Advantage boxes, 6-row Breakdown table, Water Conservation row,
     2 property images, 2 video thumbs. Verified to fit with ~20px to
     spare before the disclaimer. */
  #ar2-report .rpt.rpt-landscape .rpt-sec{margin-bottom:5px!important;}
  #ar2-report .rpt.rpt-landscape .rpt-stitle{font-size:9px!important;margin-bottom:4px!important;padding-bottom:3px!important;letter-spacing:2px!important;}
  /* Row + box sizing tightened again (the 10.5px / 1.32 / 2px-padding
     of pf-20260525j still left ~15px of Row B content overflowing into
     the CTA bar at 11-pool landscape). Down another notch: 10px font,
     1.25 line-height, 2px padding → ~16px row, ~30px saved on a
     12-row Pool Config. Purchase sbox + Breakdown table compressed in
     parallel so Row B doesn't pull the floor down. */
  #ar2-report .rpt.rpt-landscape .rpt-row{padding:2px 0!important;font-size:10px!important;line-height:1.28!important;}
  #ar2-report .rpt.rpt-landscape .rpt-row.strong{padding:3px 0!important;}
  #ar2-report .rpt.rpt-landscape .rpt-sbox{padding:7px 10px!important;margin-bottom:5px!important;}
  #ar2-report .rpt.rpt-landscape .rpt-sbox-title{font-size:9px!important;margin-bottom:4px!important;padding-bottom:3px!important;}
  #ar2-report .rpt.rpt-landscape .rpt-tbl{font-size:10px!important;}
  #ar2-report .rpt.rpt-landscape .rpt-tbl td,
  #ar2-report .rpt.rpt-landscape .rpt-tbl th{padding:3px 7px!important;font-size:10px!important;line-height:1.32!important;}
  #ar2-report .rpt.rpt-landscape .rpt-cols{gap:18px!important;}
  #ar2-report .rpt.rpt-landscape .rpt-disc{font-size:8px!important;line-height:1.45!important;margin-top:4px!important;padding-top:4px!important;border-top:1px solid #eee!important;}
  #ar2-report .rpt.rpt-landscape .rpt-stat{padding:8px 10px!important;}
  #ar2-report .rpt.rpt-landscape .rpt-stat-val{font-size:15px!important;}
  #ar2-report .rpt.rpt-landscape .rpt-stat-lbl{font-size:8px!important;}
  /* Upper sections shrink to fit (flex:0 1 auto) but never GROW beyond
     their natural height. The previous flex:1 1 auto was making Row A
     + Row B compete for body height and crowding out the bottom-pinned
     media row — images were rendering past the body's overflow:hidden
     clip and disappearing from the PDF. align-items:stretch keeps the
     two columns inside each row visually equal-height. */
  #ar2-report .rpt.rpt-landscape > .rpt-body > .rpt-sec.rpt-cols:not(.rpt-ls-media-row){flex:0 1 auto!important;align-items:stretch!important;}
  /* ── Property Images + Video Resources row (new) ──
     Rendered as a regular 2-col section after Row B, in natural flow.
     Capped tile height of 78px in print so the row + caption stays
     under 110px and the entire body fits a single landscape page. */
  #ar2-report .rpt.rpt-landscape .rpt-ls-media-row{margin-bottom:0!important;}
  #ar2-report .rpt.rpt-landscape .rpt-ls-media-row .rpt-stitle{font-size:9px!important;margin-bottom:4px!important;}
  /* Media tile capped at 70px (was 80px / originally 100px). At 16/9
     that's ~125×70 — still legible for a PDF thumb and recovers
     another ~10px the dense pool-row stack needs. */
  #ar2-report .rpt.rpt-landscape .rpt-img-wrap{aspect-ratio:16/9!important;height:auto!important;max-height:70px!important;}
  #ar2-report .rpt.rpt-landscape .rpt-img-grid{gap:8px!important;}
  #ar2-report .rpt.rpt-landscape .rpt-img-cap{font-size:8.5px!important;margin-top:3px!important;line-height:1.35!important;}
}
/* ── Mobile: results panel above form ── */
@media(max-width:860px){
  #ar2 .ar-layout{display:flex;flex-direction:column;}
  #ar2 .ar-res-col{order:-1;padding-top:20px;}
  #ar2 .ar-form-col{padding:12px 0 0;}
  #ar2 .ar-dev-col{padding:0;}
}
/* ── CO₂ advanced disclosure ── */
/* ── Advanced chemicals disclosure ── */
#ar2 .ar-adv-details{margin-top:2px;}
#ar2 .ar-adv-details>summary{font-size:12px;color:#3a6a80;cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;padding:9px 12px;border:1px solid rgba(0,180,216,.14);border-radius:8px;user-select:none;transition:color .15s,border-color .15s;}
#ar2 .ar-adv-details>summary::-webkit-details-marker{display:none;}
#ar2 .ar-adv-details[open]>summary{color:var(--t);border-color:rgba(0,180,216,.3);}
#ar2 .ar-adv-details>.ar-adv-body{margin-top:10px;}
/* ── Nav disabled hint ── */
#ar2 .ar-nav-hint{font-size:11px;color:#3a6a80;text-align:center;margin-top:8px;}
/* ── Savings weight direction labels ── */
#ar2 .ar-slider-dirs{display:flex;justify-content:space-between;font-size:10px;color:#3a6a80;margin-bottom:3px;}
/* ── Device total row ── */
#ar2 .ar-dev-total{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;margin-top:8px;background:rgba(0,180,216,.06);border:1px solid rgba(0,180,216,.18);border-radius:9px;font-size:12px;}
#ar2 .ar-dev-total .k{color:var(--mu);}
#ar2 .ar-dev-total .v{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--go);}
/* ── Tab recommended badge ── */
#ar2 .ar-tab-rec{font-size:9px;letter-spacing:1px;text-transform:uppercase;background:rgba(34,197,94,.18);color:var(--gr);border-radius:4px;padding:2px 5px;margin-left:5px;font-weight:700;}
/* ── Quick-add button in empty state ── */
#ar2 .ar-quick-add{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:9px 18px;border-radius:8px;border:1px solid rgba(0,180,216,.35);background:rgba(0,180,216,.1);color:var(--t);font-size:13px;font-weight:600;cursor:pointer;transition:background .15s;}
#ar2 .ar-quick-add:hover{background:rgba(0,180,216,.2);}
/* ── Manual volume section ── */
#ar2 .ar-manual-lede{font-size:11px;color:#3a6a80;padding:8px 11px;border-radius:7px;border:1px dashed rgba(0,180,216,.2);margin-top:10px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;}
#ar2 .ar-manual-lede:hover{border-color:rgba(0,180,216,.35);color:var(--mu);}
/* ── Reset button ── */
#ar2 .ar-reset-btn{font-size:12px;font-weight:500;color:var(--mu);background:none;border:1px solid rgba(0,180,216,.15);cursor:pointer;padding:6px 13px;border-radius:7px;transition:background .18s,color .18s;font-family:inherit;}
#ar2 .ar-reset-btn:hover{background:rgba(239,68,68,.1);color:var(--re);border-color:rgba(239,68,68,.25);}
/* ══════════════════════════════════════════════════
   REPORT — Professional design system
   ══════════════════════════════════════════════════ */
#ar2-report .rpt{font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;color:#222;background:#fff;font-size:13px;line-height:1.5;max-width:860px;margin:0 auto;display:flex;flex-direction:column;}
/* Landscape Assessment — preview at 11×8.5 aspect ratio so it visually
   matches the printed page. JS adds the .rpt-landscape class when
   EX.layout==='landscape'. */
/* ════════════════════════════════════════════════════════════════════
   SCREEN-MODE landscape preview rules.
   IMPORTANT: wrapped in @media screen so they DO NOT leak into print.
   In print mode, the @media print block (above in this stylesheet) sets
   page elements to 100vw/100vh which match the actual 11×8.5 print page.
   Without this @media screen scope, the !important here would override
   print sizing → content would overflow physical page → Chrome would
   cascade onto phantom pages. (Caused multi-day debug.)
   ════════════════════════════════════════════════════════════════════ */
@media screen {
  /* Force explicit width/height so every landscape page renders at exactly
     11×8.5 in / 1120×866 px in screen preview.
     !important inside @media screen is safe — the @media print rules use
     a separate media query, so this !important only applies on screen and
     never overrides print sizing. Without !important, other unscoped rules
     defined later in this stylesheet (e.g. .rpt-ls-cover-page{width:100%})
     would win the cascade and render some pages narrower than the ES pages. */
  #ar2-report .rpt-ls-cover-page,
  #ar2-report .rpt-ls-back-cover-page,
  #ar2-report .rpt-ls-es-page,
  #ar2-report .rpt-pp-page.rpt-pp-page-landscape{
    width:1120px!important;
    max-width:1120px!important;
    height:866px!important;
    min-height:866px!important;
    max-height:866px!important;
    margin:32px auto 0!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    box-sizing:border-box!important;
    aspect-ratio:auto!important;
  }
  /* Landscape Assessment matches the other landscape page wrappers — same
     1120×866 explicit size, flex column, overflow:hidden. The body inside
     contains naturally-flowing rows (Row A, Row B, media row, disc); no
     special grid containment needed since we no longer try to bottom-pin
     anything inside individual columns. */
  #ar2-report .rpt.rpt-landscape{
    width:1120px!important;
    max-width:1120px!important;
    height:866px!important;
    min-height:866px!important;
    max-height:866px!important;
    margin:32px auto 0!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    box-sizing:border-box!important;
    aspect-ratio:auto!important;
  }
  /* Screen body containment so content doesn't push CTA/footer past the
     866px page boundary in preview. */
  #ar2-report .rpt.rpt-landscape > .rpt-body{flex:1 1 0;min-height:0;overflow:hidden;display:flex;flex-direction:column;}
  /* Bottom-anchor the disclaimer (and media row when present) so the
     landscape body uses its vertical span — upper content sits at the
     top, then a flexible gap, then media row + disclaimer pinned to the
     body's bottom edge just above the CTA bar. Mirrors the portrait
     pattern at lines 573-575. Order matters: media row claims the auto
     margin when it exists; when it doesn't, the :not(:has()) fallback
     hands the auto margin to the disclaimer instead. */
  #ar2-report .rpt.rpt-landscape .rpt-ls-media-row{margin-top:auto;flex:0 0 auto;}
  #ar2-report .rpt.rpt-landscape > .rpt-body:not(:has(.rpt-ls-media-row)) > .rpt-disc:last-child{margin-top:auto;}
  #ar2-report .rpt.rpt-landscape > .rpt-body > .rpt-disc{flex:0 0 auto;}
  #ar2-report .rpt-pp-page.rpt-pp-page-landscape > .rpt-pp-grid{flex:1 1 0;min-height:0;overflow:hidden;}
  /* Property Images + Video Resources row — separate row at the bottom
     of body, natural flow placement. Mirrors print-mode caps so preview
     and PDF render Property Images / Video Resources at the same 16/9
     aspect and same ~110px max-height. */
  /* margin-top set to `auto` above (bottom-pin); only style margin-bottom here */
  #ar2-report .rpt.rpt-landscape .rpt-ls-media-row{margin-bottom:0;}
  #ar2-report .rpt.rpt-landscape .rpt-img-wrap{aspect-ratio:16/9;max-height:110px;}
  #ar2-report .rpt.rpt-landscape .rpt-img-grid{gap:8px;}
  /* Landscape Assessment compression — fits 5-KPI strip + 2-col body + CTA + footer in 866px */
  #ar2-report .rpt.rpt-landscape{font-size:11px;}
  #ar2-report .rpt.rpt-landscape .rpt-head{padding:10px 22px 8px;}
  #ar2-report .rpt.rpt-landscape .rpt-logo{font-size:22px;}
  #ar2-report .rpt.rpt-landscape .rpt-prop-name{font-size:16px;}
  #ar2-report .rpt.rpt-landscape .rpt-kpi{padding:10px 12px;}
  #ar2-report .rpt.rpt-landscape .rpt-kpi-val{font-size:18px;}
  #ar2-report .rpt.rpt-landscape .rpt-kpi-lbl{font-size:8px;letter-spacing:1.5px;}
  #ar2-report .rpt.rpt-landscape .rpt-kpis-5 .rpt-kpi-val{font-size:16px;}
  #ar2-report .rpt.rpt-landscape .rpt-body{padding:10px 22px 8px;font-size:10px;}
  #ar2-report .rpt.rpt-landscape .rpt-stitle{font-size:8px;margin-bottom:5px;padding-bottom:3px;}
  #ar2-report .rpt.rpt-landscape .rpt-row{font-size:10px;padding:1.5px 0;}
  #ar2-report .rpt.rpt-landscape .rpt-tbl{font-size:9.5px;}
  #ar2-report .rpt.rpt-landscape .rpt-tbl td,#ar2-report .rpt.rpt-landscape .rpt-tbl th{padding:3px 6px;font-size:9.5px;}
  #ar2-report .rpt.rpt-landscape .rpt-sbox{padding:8px 10px;margin-bottom:5px;}
  #ar2-report .rpt.rpt-landscape .rpt-sbox-title{font-size:7.5px;margin-bottom:4px;padding-bottom:3px;}
  #ar2-report .rpt.rpt-landscape .rpt-stat{padding:6px 8px;}
  #ar2-report .rpt.rpt-landscape .rpt-stat-val{font-size:13px;}
  #ar2-report .rpt.rpt-landscape .rpt-stat-lbl{font-size:8px;}
  #ar2-report .rpt.rpt-landscape .rpt-cta-bar{padding:6px 22px;font-size:9px;}
  #ar2-report .rpt.rpt-landscape .rpt-foot{padding:7px 22px;font-size:8.5px;}
  #ar2-report .rpt.rpt-landscape .rpt-disc{font-size:8px;line-height:1.4;}
}
#ar2-report .rpt .rpt-body{flex:1;}
#ar2-report .rpt *{box-sizing:border-box;}
/* ── Header band ── */
#ar2-report .rpt-head{background:#040f1e;padding:22px 32px 20px;display:flex;justify-content:space-between;align-items:center;gap:20px;}
#ar2-report .rpt-head-left{}
#ar2-report .rpt-logo{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:5px;color:#fff;line-height:1;}
#ar2-report .rpt-logo-sub{font-size:8px;letter-spacing:4px;text-transform:uppercase;color:#48cae4;margin-top:4px;}
#ar2-report .rpt-head-right{text-align:right;}
#ar2-report .rpt-prop-name{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2px;color:#fff;line-height:1.1;}
#ar2-report .rpt-prop-date{font-size:10px;color:#7db8cc;margin-top:5px;line-height:1.5;}
#ar2-report .rpt-nsf-badge{display:inline-block;margin-top:6px;padding:2px 8px;border:1px solid rgba(0,180,216,.4);border-radius:3px;font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:#48cae4;font-weight:600;}
/* ── KPI stripe ── */
#ar2-report .rpt-kpis{background:linear-gradient(to right,#071628,#0a2540);border-bottom:3px solid #00b4d8;display:grid;grid-template-columns:repeat(4,1fr);}
/* Landscape variant: 5th block (Savings Projection Applied) — 5-col grid */
#ar2-report .rpt-kpis-5{grid-template-columns:repeat(5,1fr);}
#ar2-report .rpt-kpi{padding:16px 16px;text-align:center;border-right:1px solid rgba(0,180,216,.15);}
#ar2-report .rpt-kpi:last-child{border-right:none;}
#ar2-report .rpt-kpi-lbl{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#fff;margin-bottom:6px;}
#ar2-report .rpt-kpi-val{font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:700;color:#fff;line-height:1;}
#ar2-report .rpt-kpi-val.green{color:#4ade80;}
#ar2-report .rpt-kpi-val.teal{color:#48cae4;}
/* ── Body ── */
#ar2-report .rpt-body{padding:16px 28px 12px;}
/* ── Sections ── */
#ar2-report .rpt-sec{margin-bottom:12px;}
#ar2-report .rpt-stitle{font-size:8px;letter-spacing:3.5px;text-transform:uppercase;font-weight:700;color:#00b4d8;padding-bottom:6px;border-bottom:1.5px solid #00b4d8;margin-bottom:11px;display:flex;align-items:center;gap:8px;}
#ar2-report .rpt-stitle::after{content:'';flex:1;height:1.5px;background:linear-gradient(to right,#d5eaf5,transparent);}
/* ── Two-column ── */
#ar2-report .rpt-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
/* Assess flow layout — each column flows its own content height
   independently rather than locking to the row's max. CSS grid auto-
   sizes rows to the tallest cell, but ITEMS inside don't stretch
   unless align-items:stretch is on, so setting align-items:start keeps
   each column packed to its own natural height. */
#ar2-report .rpt-assess-flow{align-items:start!important;}
/* Landscape print scoped rule above sets align-items:stretch on every
   .rpt-cols inside the body — exclude the new assess-flow grid from
   that stretch so its columns flow at natural height. */
@media print { #ar2-report .rpt.rpt-landscape > .rpt-body > .rpt-sec.rpt-cols.rpt-assess-flow{align-items:start!important;} }
#ar2-report .rpt-stitle-stack{margin-top:14px;}
/* ── Data rows ── */
#ar2-report .rpt-row{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;border-bottom:1px solid #f0f0f0;font-size:11px;}
#ar2-report .rpt-row:last-child{border-bottom:none;}
#ar2-report .rpt-row .k{color:#555;}
#ar2-report .rpt-row .v{font-family:'JetBrains Mono',monospace;font-weight:600;color:#111;}
#ar2-report .rpt-row.strong .k{font-weight:600;color:#111;}
#ar2-report .rpt-row.strong .v{color:#040f1e;}
#ar2-report .rpt-row .v.pos{color:#16a34a;}
#ar2-report .rpt-row .v.neg{color:#dc2626;}
#ar2-report .rpt-row .v.teal{color:#007fa0;}
/* ── Box ── */
#ar2-report .rpt-box{background:#f8fbfd;border:1px solid #d5eaf5;border-radius:5px;padding:12px 14px;}
/* ── Scenario boxes ── */
#ar2-report .rpt-sbox{border:1px solid #d5eaf5;border-top:3px solid #00b4d8;border-radius:0 0 5px 5px;padding:12px 14px;background:#f8fbfd;}
#ar2-report .rpt-sbox.pur{border-top-color:#f0a500;}
#ar2-report .rpt-sbox-title{font-size:8px;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:#00b4d8;margin-bottom:9px;padding-bottom:7px;border-bottom:1px solid #e8f4fb;}
#ar2-report .rpt-sbox.pur .rpt-sbox-title{color:#b07800;}
/* ── Table ── */
#ar2-report .rpt-tbl{width:100%;border-collapse:collapse;font-size:12px;}
#ar2-report .rpt-tbl thead tr{background:#040f1e;}
#ar2-report .rpt-tbl th{text-align:left;padding:8px 10px;font-size:8px;letter-spacing:2px;text-transform:uppercase;color:#90d4e8;font-weight:600;}
#ar2-report .rpt-tbl th:not(:first-child){text-align:right;}
#ar2-report .rpt-tbl td{padding:6px 10px;border-bottom:1px solid #f0f0f0;font-size:12px;}
#ar2-report .rpt-tbl td:not(:first-child){text-align:right;font-family:'JetBrains Mono',monospace;}
#ar2-report .rpt-tbl tbody tr:nth-child(even) td{background:#fafcfe;}
#ar2-report .rpt-tbl tr.tot td{font-weight:700;background:#eaf7ff;border-top:2px solid #00b4d8;border-bottom:none;font-family:'JetBrains Mono',monospace;}
/* ── Bar chart in table ── */
#ar2-report .rpt-bar-wrap{display:flex;align-items:center;gap:7px;}
#ar2-report .rpt-bar-bg{flex:1;height:5px;background:#e8f0f4;border-radius:3px;min-width:40px;}
#ar2-report .rpt-bar-fill{height:100%;border-radius:3px;background:linear-gradient(to right,#00b4d8,#48cae4);}
/* ── Water conservation ── */
#ar2-report .rpt-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
#ar2-report .rpt-stat{background:#f0fbff;border:1px solid #c8eaf5;border-radius:5px;padding:10px 12px;text-align:center;}
#ar2-report .rpt-stat-val{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:700;color:#007fa0;margin-bottom:3px;}
#ar2-report .rpt-stat-lbl{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#7db8cc;}
/* ── Comments ── */
#ar2-report .rpt-comments{background:#fafafa;border-left:3px solid #00b4d8;padding:10px 14px;font-size:12px;color:#444;line-height:1.75;border-radius:0 5px 5px 0;}
#ar2-report .rpt-comments p{margin-bottom:6px;}
#ar2-report .rpt-comments p:last-child{margin-bottom:0;}
/* ── Media — images ── */
#ar2-report .rpt-img-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
#ar2-report .rpt-img-item{break-inside:avoid;}
#ar2-report .rpt-img-wrap{aspect-ratio:16/9;overflow:hidden;border-radius:5px;border:1px solid #d5e8f0;}
#ar2-report .rpt-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
#ar2-report .rpt-img-cap{font-size:10px;color:#555;margin-top:5px;line-height:1.5;}
/* ── Media — YouTube ── */
#ar2-report .rpt-yt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
#ar2-report .rpt-yt-item{break-inside:avoid;}
#ar2-report .rpt-yt-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:5px;border:1px solid #d5e8f0;}
#ar2-report .rpt-yt-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
#ar2-report .rpt-yt-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);}
#ar2-report .rpt-yt-play-btn{background:rgba(0,0,0,.6);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;}
#ar2-report .rpt-yt-url{font-size:9px;color:#00b4d8;margin-top:5px;word-break:break-all;line-height:1.4;}
#ar2-report .rpt-yt-cap{font-size:10px;color:#555;margin-top:3px;line-height:1.5;}
/* ── Fact Sheet Page ── */
#ar2-report .rpt-factsheet-page{font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;color:#222;background:#fff;font-size:13px;line-height:1.5;max-width:860px;margin:0 auto;page-break-before:always;break-before:page;display:flex;flex-direction:column;}
#ar2-report .rpt-factsheet-page .rpt-body{flex:1;}
#ar2-report .rpt-factsheet-page .rpt-foot{margin-top:auto;}
#ar2-report .rpt-factsheet-page *{box-sizing:border-box;}
#ar2-report .rpt-fs-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px;}
#ar2-report .rpt-fs-kpi{text-align:center;padding:14px 8px;background:#f0fbff;border:1px solid #c8eaf5;border-radius:6px;}
#ar2-report .rpt-fs-kpi-val{font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:700;color:#00b4d8;}
#ar2-report .rpt-fs-kpi-lbl{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:#7db8cc;margin-top:4px;}
#ar2-report .rpt-fs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0;}
#ar2-report .rpt-fs-cell{background:#f8fbfd;border:1px solid #d5eaf5;border-radius:6px;padding:14px 12px;text-align:center;}
#ar2-report .rpt-fs-cell-title{font-size:11px;font-weight:700;color:#111;margin-bottom:4px;}
#ar2-report .rpt-cert-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:14px 0;}
#ar2-report .rpt-cert{text-align:center;padding:10px 6px;background:#f8fbfd;border:1px solid #d5eaf5;border-radius:5px;}
#ar2-report .rpt-cert-val{font-size:10px;font-weight:700;color:#00b4d8;margin-bottom:3px;}
#ar2-report .rpt-cert-lbl{font-size:9px;color:#666;line-height:1.4;}
/* ── Legacy aliases ── */
#ar2-report .rpt-fs-hero-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px;}
#ar2-report .rpt-fs-how{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0;}
#ar2-report .rpt-fs-how-card{background:#f8fbfd;border:1px solid #d5eaf5;border-radius:6px;padding:14px 12px;text-align:center;}
#ar2-report .rpt-fs-how-num{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:700;color:#00b4d8;margin-bottom:6px;}
#ar2-report .rpt-fs-how-title{font-size:11px;font-weight:700;color:#111;margin-bottom:4px;}
#ar2-report .rpt-fs-how-desc{font-size:10px;color:#666;line-height:1.5;}
#ar2-report .rpt-fs-lab{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0;}
#ar2-report .rpt-fs-lab-col{}
#ar2-report .rpt-fs-certs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:14px 0;}
#ar2-report .rpt-fs-cert{text-align:center;padding:10px 6px;background:#f8fbfd;border:1px solid #d5eaf5;border-radius:5px;}
#ar2-report .rpt-fs-cert-title{font-size:10px;font-weight:700;color:#00b4d8;margin-bottom:3px;}
#ar2-report .rpt-fs-cert-desc{font-size:9px;color:#666;line-height:1.4;}
#ar2-report .rpt-fs-page{font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;color:#222;background:#fff;font-size:13px;line-height:1.5;max-width:860px;margin:0 auto;page-break-before:always;}
#ar2-report .rpt-fs-img-page{max-width:860px;margin:32px auto 0;background:#fff;box-shadow:0 2px 12px rgba(4,15,30,.08);}
#ar2-report .rpt-fs-img-page img{width:100%;height:auto;display:block;}
/* Back cover preview — taller area to mimic full-bleed page */
#ar2-report .rpt-back-cover-page{aspect-ratio:8.5/11;overflow:hidden;}
#ar2-report .rpt-back-cover-page img{width:100%;height:100%;object-fit:cover;}
/* Preview-only separation between the Assessment page and subsequent pages */
#ar2-report .rpt-pp-page{margin-top:32px;box-shadow:0 2px 12px rgba(4,15,30,.08);min-height:1113px;display:flex;flex-direction:column;}
/* Grid keeps cards at natural height — empty space goes below, footer sits at bottom */
#ar2-report .rpt-pp-page .rpt-pp-grid{flex:1 1 auto;align-content:start;}
/* Pool Profile page footer — span full page width edge-to-edge and sit at bottom of page */
#ar2-report .rpt-pp-page .rpt-foot{margin-left:-28px;margin-right:-28px;margin-bottom:-18px;margin-top:auto;}
/* ── Executive Summary Pages ── */
/* Portrait ES page — preview at the EXACT print dimensions (8.5x11in @ 96dpi
   = 816x1056 px). Previously the screen preview was 1113px tall, 57px more
   than the print page, which masked content that overflows in the PDF.
   Locking screen to 816x1056 means what you see is what you get.
   Companion: ES content density is compressed at base level (rules below)
   so screen and print render identically. The @media print rules layer
   on top with !important for any final pixel-perfect tweaks. */
#ar2-report .rpt-es-page{font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;color:#222;background:#fff;font-size:11px;line-height:1.45;width:816px;max-width:816px;margin:32px auto 0;page-break-before:always;break-before:page;display:flex;flex-direction:column;min-height:1056px;max-height:1056px;height:1056px;position:relative;box-shadow:0 2px 12px rgba(4,15,30,.08);overflow:hidden;box-sizing:border-box;}
#ar2-report .rpt-es-page *{box-sizing:border-box;}
/* Page 1 header (Assessment-style band across the top) — tight padding so
   header total height ~70px instead of ~98px, saving 28px for body content. */
#ar2-report .rpt-es-head{background:#040f1e;padding:10px 24px 8px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-shrink:0;}
#ar2-report .rpt-es-head-left{}
#ar2-report .rpt-es-logo{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:5px;color:#fff;line-height:1;}
#ar2-report .rpt-es-logo-sub{font-size:7px;letter-spacing:3px;text-transform:uppercase;color:#48cae4;margin-top:3px;}
#ar2-report .rpt-es-head-right{text-align:right;}
#ar2-report .rpt-es-prop-name{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:2px;color:#fff;line-height:1.1;}
#ar2-report .rpt-es-prop-date{font-size:9px;color:#7db8cc;margin-top:3px;line-height:1.4;}
#ar2-report .rpt-es-nsf-badge{display:inline-block;margin-top:4px;padding:1px 6px;border:1px solid rgba(0,180,216,.4);border-radius:3px;font-size:7px;letter-spacing:1.2px;text-transform:uppercase;color:#48cae4;font-weight:600;}
/* Page 1 body — 2-col grid below the header */
#ar2-report .rpt-es-body-1{display:grid;grid-template-columns:320px 1fr;flex:1;min-height:0;}
/* Page 2 body — 2-col grid below the hero */
#ar2-report .rpt-es-page-2 .rpt-es-body-2{display:grid;grid-template-columns:320px 1fr;flex:1;min-height:0;}
#ar2-report .rpt-es-hero{width:100%;overflow:hidden;background:#0a2540;flex-shrink:0;}
#ar2-report .rpt-es-hero img{width:100%;height:90px;object-fit:cover;display:block;}
#ar2-report .rpt-es-left{background:#0a2540;color:#fff;padding:12px 20px 14px;}
/* Page 2 columns flex top-to-bottom and stretch the bottom block so the
   column fills the height above the footer (no empty band at the bottom).
   Left col: ESG section pinned to bottom (margin-top:auto on its h2).
   Right col: Video Summary pinned to bottom (margin-top:auto on its h2).
   Extra space between top and bottom blocks distributes naturally. */
#ar2-report .rpt-es-left-2{padding:10px 20px 14px;display:flex;flex-direction:column;}
#ar2-report .rpt-es-right{background:#fff;color:#222;padding:12px 22px 14px;display:flex;flex-direction:column;min-height:0;overflow:hidden;}
/* Investment chart + custom block sit at the bottom of the page 1 right column,
   pinned just above the footer band so the chart fills the column span and
   visually anchors the page. margin-top:auto pushes the block to the bottom of
   the flex column when there's slack; if content above runs long, the body
   itself shrinks proportionally rather than letting the chart bleed below. */
#ar2-report .rpt-es-right .rpt-es-right-bottom{margin-top:auto;width:100%;flex-shrink:0;}
#ar2-report .rpt-es-right .rpt-es-right-bottom .rpt-es-chart{margin:0 0 4px;width:100%;}
/* Don't cap the SVG height — preserveAspectRatio="xMidYMid meet" with a max-
   height leaves horizontal margins (chart shrinks to fit smaller dim, leaving
   blank space). Letting it render at its natural aspect (col-width / 1.8)
   means the chart spans the full column width, matching the rest of the
   right-column content. */
#ar2-report .rpt-es-right-2{padding:10px 22px 14px;display:flex;flex-direction:column;}
/* Page 2 — proportionate stretch. Sections expand vertically so the col
   fills the area between the hero image and the footer without bunching
   at the top. Calibrated to fit cleanly within 1056px page boundary. */
#ar2-report .rpt-es-page-2 .rpt-es-left-2 .rpt-es-h2,
#ar2-report .rpt-es-page-2 .rpt-es-right-2 .rpt-es-h2{margin:10px 0 4px;}
#ar2-report .rpt-es-page-2 .rpt-es-left-2 > .rpt-es-h2:first-child,
#ar2-report .rpt-es-page-2 .rpt-es-right-2 > .rpt-es-h2:first-child{margin-top:0;}
#ar2-report .rpt-es-page-2 .rpt-es-left-2 .rpt-es-statline{padding:3px 0;}
#ar2-report .rpt-es-page-2 .rpt-es-left-2 .rpt-es-ritz{margin:4px 0 8px;}
#ar2-report .rpt-es-page-2 .rpt-es-left-2 .rpt-es-quote{margin:6px 0;padding:6px 0 6px 10px;}
#ar2-report .rpt-es-page-2 .rpt-es-left-2 .rpt-es-ul-dark li{margin-bottom:3px;line-height:1.45;}
#ar2-report .rpt-es-page-2 .rpt-es-left-2 .rpt-es-p,
#ar2-report .rpt-es-page-2 .rpt-es-right-2 .rpt-es-p,
#ar2-report .rpt-es-page-2 .rpt-es-right-2 .rpt-es-p-light{margin-bottom:6px;line-height:1.45;}
#ar2-report .rpt-es-page-2 .rpt-es-right-2 .rpt-es-ul li{margin-bottom:3px;line-height:1.45;}
#ar2-report .rpt-es-page-2 .rpt-es-right-2 .rpt-es-outcome-cards{gap:6px;margin:6px 0 8px;}
#ar2-report .rpt-es-page-2 .rpt-es-right-2 .rpt-es-out-card{padding:6px 5px;}
#ar2-report .rpt-es-page-2 .rpt-es-right-2 .rpt-es-link{margin:4px 0;}
/* Right col Video Summary still pins to the bottom so the thumbnail
   sits at the column foot — that's the intentional layout for the right
   column. Left col ESG no longer pins; it flows naturally under the
   quote with normal spacing so col-1 content is balanced rather than
   bunched (top half) + isolated bottom block. Any leftover height drops
   below the ESG bullets near the footer. */
#ar2-report .rpt-es-page-2 .rpt-es-right-2 > .rpt-es-h2-tail{margin-top:auto;padding-top:8px;}
/* Custom user-supplied section (full-width above footer on Page 1) */
#ar2-report .rpt-es-custom{background:#f0fbff;border-top:3px solid #00b4d8;padding:14px 32px 16px;flex-shrink:0;}
#ar2-report .rpt-es-custom-title{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:2px;color:#0a2540;margin-bottom:6px;line-height:1.1;}
#ar2-report .rpt-es-custom-copy{font-size:11px;line-height:1.55;color:#444;}
/* Footer band — wired to bottom via flex */
#ar2-report .rpt-es-foot{margin-top:auto;flex-shrink:0;}
/* Device graphic in right column */
#ar2-report .rpt-es-device{margin:6px 0 10px;text-align:center;}
#ar2-report .rpt-es-device img{max-width:100%;height:auto;display:block;margin:0 auto;}
/* ── AquaRev Water Technology block — right column only ── */
#ar2-report .rpt-es-right .rpt-es-h2:first-child{margin-top:0;}
#ar2-report .rpt-es-tech-blurb{margin:0 0 4px;font-size:10px;line-height:1.4;color:#444;}
#ar2-report .rpt-es-tech-blurb:first-of-type{margin-top:2px;}
#ar2-report .rpt-es-device-full{margin:4px 0 4px;width:100%;}
#ar2-report .rpt-es-device-full img{width:100%;max-width:100%;height:auto;display:block;}
#ar2-report .rpt-es-feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:2px 0 4px;}
#ar2-report .rpt-es-feat-col .rpt-es-h3-light{font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:1.5px;color:#0a2540;margin:0 0 3px;font-weight:700;}
#ar2-report .rpt-es-feat-col .rpt-es-ul{margin-bottom:0;}
#ar2-report .rpt-es-feat-col .rpt-es-ul li{font-size:10px;padding-left:10px;margin-bottom:1px;line-height:1.35;}
/* ── Documented Performance Outcomes — card grid ── */
#ar2-report .rpt-es-outcome-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin:4px 0 5px;}
#ar2-report .rpt-es-out-card{background:#f0fbff;border:1px solid #c8eaf5;border-top:3px solid #00b4d8;border-radius:0 0 5px 5px;padding:5px 4px;text-align:center;}
#ar2-report .rpt-es-out-pct{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:700;color:#00b4d8;line-height:1;margin-bottom:2px;}
#ar2-report .rpt-es-out-lbl{font-size:8.5px;color:#444;letter-spacing:0.2px;line-height:1.2;}
/* ── Investment Chart (lives in Page 1 right column) ──
   No max-height: with viewBox 540×300 and preserveAspectRatio='xMidYMid
   meet', clamping height leaves horizontal margins (chart doesn't fill
   the col). Letting it render at natural aspect (col-width / 1.8) means
   the chart spans the full col width as the user expects. */
#ar2-report .rpt-es-chart{margin:2px 0 4px;}
#ar2-report .rpt-es-chart-svg{width:100%;height:auto;display:block;}
/* Chart title must stay on one line so the chart card aligns visually
   with the column. White-space:nowrap + smaller font keep the full string
   "Investment & Return Profile — 5-Year Outlook" within the col width. */
#ar2-report .rpt-es-chart-title{font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:1.5px;color:#0a2540;line-height:1.1;margin-bottom:2px;white-space:nowrap;}
#ar2-report .rpt-es-chart-title .rpt-es-chart-sub-title{font-size:12px;letter-spacing:1px;color:#0a2540;}
#ar2-report .rpt-es-chart-sub{font-size:9.5px;color:#666;margin-bottom:0;}
#ar2-report .rpt-es-chart-svg{width:100%;height:auto;display:block;}
/* Chart header strip — title/subtitle on left, Net Benefit + Payback Period
   stats on right. Lives ABOVE the SVG so the data line and green fill never
   collide with text labels (used to be embedded inside the SVG plot region). */
#ar2-report .rpt-es-chart-hdr{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:4px;}
#ar2-report .rpt-es-chart-hdr-text{flex:1;min-width:0;}
#ar2-report .rpt-es-chart-hdr .rpt-es-chart-sub{margin-bottom:0;}
#ar2-report .rpt-es-chart-stats{flex:0 0 auto;text-align:right;line-height:1.15;padding-bottom:2px;}
#ar2-report .rpt-es-chart-stat-net{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;color:#15803d;letter-spacing:.2px;}
#ar2-report .rpt-es-chart-stat-pb{font-family:'DM Sans',sans-serif;font-size:10px;color:#444;}
#ar2-report .rpt-es-title{font-family:'Bebas Neue',sans-serif;font-size:34px;letter-spacing:2px;color:#fff;line-height:1;margin-bottom:8px;}
#ar2-report .rpt-es-lead{font-size:10.5px;line-height:1.45;color:#cfe2eb;margin-bottom:8px;}
#ar2-report .rpt-es-h2{font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:1.5px;color:#48cae4;margin:8px 0 4px;line-height:1.1;}
#ar2-report .rpt-es-h2-light{color:#0a2540;}
#ar2-report .rpt-es-h3-light{font-size:10.5px;font-weight:700;color:#0a2540;margin:6px 0 3px;}
#ar2-report .rpt-es-p{font-size:10px;line-height:1.4;color:#cfe2eb;margin-bottom:5px;}
#ar2-report .rpt-es-p-light{font-size:10px;line-height:1.4;color:#444;margin-bottom:5px;}
#ar2-report .rpt-es-p strong,#ar2-report .rpt-es-p-light strong{color:#fff;}
#ar2-report .rpt-es-right .rpt-es-p-light strong,#ar2-report .rpt-es-right .rpt-es-h2-light{color:#0a2540;}
#ar2-report .rpt-es-right .rpt-es-p-light strong{color:#0a2540;}
#ar2-report .rpt-es-bignum{font-family:'JetBrains Mono','Bebas Neue',monospace;font-size:18px;font-weight:700;color:#fff;margin:2px 0 6px;line-height:1.1;}
#ar2-report .rpt-es-bignum-unit{font-size:11px;font-weight:500;color:#cfe2eb;margin-left:4px;}
#ar2-report .rpt-es-statline{display:flex;align-items:baseline;gap:12px;padding:2px 0;border-bottom:1px solid rgba(255,255,255,.08);}
#ar2-report .rpt-es-statline .v{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:700;color:#fff;min-width:64px;}
#ar2-report .rpt-es-statline .k{font-size:10px;color:#cfe2eb;}
#ar2-report .rpt-es-note{font-size:8.5px;color:#7db8cc;margin-top:4px;font-style:italic;}
#ar2-report .rpt-es-ul{list-style:none;padding:0;margin:0 0 5px;}
#ar2-report .rpt-es-ul li{position:relative;padding-left:12px;font-size:10px;line-height:1.4;color:#444;margin-bottom:2px;}
#ar2-report .rpt-es-ul li::before{content:'\2022';position:absolute;left:0;color:#00b4d8;font-weight:700;}
#ar2-report .rpt-es-left .rpt-es-ul li,#ar2-report .rpt-es-ul-dark li{color:#cfe2eb;}
#ar2-report .rpt-es-ul-dark{list-style:none;padding:0;margin:0 0 5px;}
#ar2-report .rpt-es-ul-dark li{position:relative;padding-left:12px;font-size:10px;line-height:1.4;color:#cfe2eb;margin-bottom:2px;}
#ar2-report .rpt-es-ul-dark li::before{content:'\2022';position:absolute;left:0;color:#48cae4;font-weight:700;}
#ar2-report .rpt-es-ul-dark li strong{color:#fff;}
#ar2-report .rpt-es-pct-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;margin-top:5px;}
#ar2-report .rpt-es-pct{display:flex;align-items:baseline;gap:6px;}
#ar2-report .rpt-es-pct .n{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:700;color:#00b4d8;min-width:42px;}
#ar2-report .rpt-es-pct .lbl{font-size:9.5px;color:#444;}
#ar2-report .rpt-es-quote{margin:6px 0;padding:4px 0;border-left:3px solid #48cae4;padding-left:10px;font-size:10px;font-style:italic;color:#cfe2eb;line-height:1.4;}
#ar2-report .rpt-es-quote .quote-mark{font-family:'Bebas Neue',sans-serif;font-size:18px;color:#48cae4;font-style:normal;line-height:0;vertical-align:-2px;}
#ar2-report .rpt-es-quote cite{display:block;margin-top:4px;font-size:9px;font-style:normal;color:#7db8cc;letter-spacing:1px;text-transform:uppercase;}
#ar2-report .rpt-es-link{margin:3px 0;}
#ar2-report .rpt-es-link a{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#00b4d8;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;}
#ar2-report .rpt-es-link a:hover{color:#0a2540;}
#ar2-report .rpt-es-link-ico{width:13px;height:13px;flex-shrink:0;color:#00b4d8;}
#ar2-report .rpt-es-link a:hover .rpt-es-link-ico{color:#0a2540;}
/* ── Quote / Order Form pages ──────────────────────────────────────
   Each quote page reuses .rpt-es-page (sizing + flex column + overflow
   containment) and .rpt-es-head / .rpt-es-foot (header / footer band)
   so the look-and-feel matches the Executive Summary. The body content
   between them lives under .rpt-q-body. */
#ar2-report .rpt-q-page{padding:0;}
#ar2-report .rpt-q-body{flex:1 1 0;min-height:0;overflow:hidden;padding:18px 32px 14px;display:flex;flex-direction:column;gap:10px;font-size:11px;color:#222;}
#ar2-report .rpt-q-doc-kind{position:absolute;top:14px;right:32px;font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:4px;color:#fff;z-index:2;line-height:1;}
#ar2-report .rpt-q-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
/* Standardized top row used on every Quote page (Order, Terms, Payment).
   Three columns: Seller (left) · Prepared For — Buyer (middle) · Header info
   card (right). The right column is wrapped in a light-tinted card so it reads
   as a discrete metadata block rather than another body column. */
#ar2-report .rpt-q-top-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:start;}
#ar2-report .rpt-q-top-col{min-width:0;}
#ar2-report .rpt-q-top-card-body{background:#f0fbff;border:1px solid #c8eaf5;border-radius:6px;padding:8px 12px;margin-top:0;}
#ar2-report .rpt-q-top-card-body .rpt-q-meta-rows{gap:3px 10px;}
#ar2-report .rpt-q-block-title{font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:2px;color:#48cae4;text-transform:uppercase;margin-bottom:4px;}
#ar2-report .rpt-q-block-text{font-size:10.5px;line-height:1.5;color:#222;white-space:pre-line;}
#ar2-report .rpt-q-meta-rows{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:10.5px;color:#444;}
#ar2-report .rpt-q-meta-rows dt{font-weight:600;color:#0a2540;letter-spacing:0.5px;text-transform:uppercase;font-size:9px;align-self:center;}
#ar2-report .rpt-q-meta-rows dd{margin:0;color:#222;}
#ar2-report .rpt-q-table{width:100%;border-collapse:collapse;font-size:10.5px;margin-top:4px;}
#ar2-report .rpt-q-table thead th{background:#0a2540;color:#fff;padding:6px 8px;text-align:left;font-family:'Bebas Neue',sans-serif;font-size:10px;letter-spacing:1.5px;font-weight:700;}
#ar2-report .rpt-q-table thead th.amt,#ar2-report .rpt-q-table thead th.qty,#ar2-report .rpt-q-table thead th.tax,#ar2-report .rpt-q-table thead th.rate{text-align:right;}
#ar2-report .rpt-q-table tbody td{padding:5px 8px;border-bottom:1px solid #e5eef3;vertical-align:top;}
#ar2-report .rpt-q-table tbody td.amt,#ar2-report .rpt-q-table tbody td.qty,#ar2-report .rpt-q-table tbody td.tax,#ar2-report .rpt-q-table tbody td.rate{text-align:right;font-family:'JetBrains Mono',monospace;}
#ar2-report .rpt-q-section-row td{background:#f0fbff;font-family:'Bebas Neue',sans-serif;font-size:10px;letter-spacing:1.5px;color:#0a2540;padding:5px 8px;font-weight:700;}
#ar2-report .rpt-q-totals{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:start;margin-top:6px;}
#ar2-report .rpt-q-totals .terms{font-size:8.5px;line-height:1.4;color:#444;max-width:55ch;}
#ar2-report .rpt-q-totals .terms-title{font-family:'Bebas Neue',sans-serif;font-size:9.5px;letter-spacing:1.5px;color:#48cae4;margin-bottom:3px;text-transform:uppercase;}
#ar2-report .rpt-q-totals-table{display:grid;grid-template-columns:auto 110px;gap:3px 12px;font-size:11px;color:#222;min-width:240px;font-family:'JetBrains Mono',monospace;}
#ar2-report .rpt-q-totals-table dt{color:#444;}
#ar2-report .rpt-q-totals-table dd{margin:0;text-align:right;}
#ar2-report .rpt-q-totals-table .strong dt,#ar2-report .rpt-q-totals-table .strong dd{font-weight:700;color:#0a2540;border-top:2px solid #0a2540;padding-top:4px;margin-top:3px;}
#ar2-report .rpt-q-sigblock{margin-top:auto;padding-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:18px;font-size:10px;color:#444;}
#ar2-report .rpt-q-sigblock .sigline{display:flex;flex-direction:column;gap:4px;}
#ar2-report .rpt-q-sigblock .sigline label{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:#0a2540;font-weight:700;}
#ar2-report .rpt-q-sigblock .sigline .line{border-bottom:1px solid #0a2540;height:18px;}
#ar2-report .rpt-q-shipto{font-size:10px;line-height:1.5;color:#222;white-space:pre-line;}
/* Terms page — nested ordered list with hanging indent for numbered items
   and lettered sub-items so the structure is visually unambiguous in the PDF. */
#ar2-report .rpt-q-terms-body{flex:1 1 0;min-height:0;overflow:hidden;padding:24px 36px 18px;display:flex;flex-direction:column;gap:10px;}
#ar2-report .rpt-q-terms-text{font-size:10.5px;line-height:1.55;color:#222;}
#ar2-report .rpt-q-terms-title{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:3px;color:#0a2540;margin-bottom:6px;}
#ar2-report .rpt-q-terms-ol{list-style:none;counter-reset:tnum;padding-left:0;margin:0;}
#ar2-report .rpt-q-terms-ol > li{counter-increment:tnum;position:relative;padding-left:28px;margin-bottom:6px;line-height:1.5;}
#ar2-report .rpt-q-terms-ol > li::before{content:counter(tnum) ".";position:absolute;left:0;top:0;font-weight:700;color:#0a2540;width:22px;text-align:left;}
#ar2-report .rpt-q-terms-sub-ol{list-style:none;counter-reset:tsub;padding-left:0;margin:4px 0 0 8px;}
#ar2-report .rpt-q-terms-sub-ol > li{counter-increment:tsub;position:relative;padding-left:24px;margin-bottom:3px;line-height:1.45;color:#333;}
#ar2-report .rpt-q-terms-sub-ol > li::before{content:counter(tsub, lower-alpha) ".";position:absolute;left:0;top:0;color:#0a2540;width:18px;text-align:left;}
#ar2-report .rpt-q-terms-p{margin:6px 0;}
/* Payment Form page — each section sits in its own bordered box for clear
   visual hierarchy. Signature row at the bottom uses dedicated lines. */
#ar2-report .rpt-q-pay-body{flex:1 1 0;min-height:0;overflow:hidden;padding:18px 32px 14px;display:flex;flex-direction:column;gap:10px;}
#ar2-report .rpt-q-pay-method-strip{display:flex;align-items:center;gap:18px;padding:6px 0 4px;border-bottom:1px solid #d8e4eb;}
#ar2-report .rpt-q-pay-method-strip .rpt-q-block-title{margin-bottom:0;}
#ar2-report .rpt-q-pay-method{display:flex;gap:14px;font-size:11px;color:#222;}
#ar2-report .rpt-q-pay-method label{display:flex;align-items:center;gap:6px;}
#ar2-report .rpt-q-pay-method input[type="checkbox"]{width:14px;height:14px;}
#ar2-report .rpt-q-pay-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;font-size:10px;color:#222;}
#ar2-report .rpt-q-pay-box{border:1px solid #c8d8e0;border-radius:6px;padding:10px 12px;background:#f7fbfd;}
#ar2-report .rpt-q-pay-cols .col-title{font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:2px;color:#0a2540;margin-bottom:6px;border-bottom:2px solid #00b4d8;padding-bottom:4px;}
#ar2-report .rpt-q-pay-field{display:flex;align-items:baseline;gap:8px;border-bottom:1px solid #d8e4eb;padding:3px 0;font-size:10px;}
#ar2-report .rpt-q-pay-field label{flex:0 0 100px;color:#666;font-weight:600;}
#ar2-report .rpt-q-pay-field .val{flex:1;color:#222;min-height:14px;}
#ar2-report .rpt-q-pay-auth-box{margin-top:6px;}
#ar2-report .rpt-q-pay-auth{font-size:9.5px;line-height:1.5;color:#444;padding:4px 0 10px;}
#ar2-report .rpt-q-pay-sig-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;align-items:end;margin-top:8px;}
#ar2-report .rpt-q-pay-sig{display:flex;flex-direction:column;gap:4px;}
#ar2-report .rpt-q-pay-sig label{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:#0a2540;font-weight:700;}
#ar2-report .rpt-q-pay-sig .line{border-bottom:1px solid #0a2540;height:22px;}
/* Ship-To box on the Order page */
#ar2-report .rpt-q-shipto-box{border:1px solid #c8eaf5;background:#f0fbff;border-radius:6px;padding:8px 12px;margin-top:8px;max-width:55ch;}
#ar2-report .rpt-q-shipto-box .rpt-q-block-title{margin-bottom:4px;}
#ar2-report .rpt-q-shipto-box .rpt-q-shipto{font-size:9.5px;line-height:1.4;}
#ar2-report .rpt-q-shipterm{margin-top:6px;padding-top:6px;border-top:1px dashed #b9d9e6;font-size:10.5px;color:#0a2540;}
#ar2-report .rpt-q-shipterm-label{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:#5b6f7c;font-weight:700;}
#ar2-report .rpt-q-shipterm b{color:#0a2540;letter-spacing:.6px;}
#ar2-report .rpt-es-video{display:block;margin:4px 0 6px;border-radius:5px;overflow:hidden;border:1px solid #d5eaf5;}
#ar2-report .rpt-es-video img{width:100%;height:auto;display:block;}
#ar2-report .rpt-es-ritz{margin:4px 0 6px;border-radius:4px;overflow:hidden;}
#ar2-report .rpt-es-ritz img{width:100%;height:auto;display:block;}
#ar2-report .rpt-es-contact{font-size:11px;line-height:1.6;color:#444;}
#ar2-report .rpt-es-contact a{color:#444;text-decoration:none;}
#ar2-report .rpt-es-url{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:2px;color:#48cae4;font-family:'DM Sans',sans-serif;font-weight:600;}
/* ── Step 3 export panel header ── */
#ar2 .ar-export-panel-label{font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--aq);margin:8px 0 4px;}
/* ── Landscape Cover (page) ── */
#ar2-report .rpt-ls-cover-page{position:relative;width:100%;max-width:1120px;margin:32px auto 0;background:#0a2540;overflow:hidden;aspect-ratio:11/8.5;box-shadow:0 2px 12px rgba(4,15,30,.08);}
#ar2-report .rpt-ls-cover-page .rpt-cover-bg{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;position:absolute!important;inset:0!important;z-index:1;}
#ar2-report .rpt-ls-back-cover-page img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;}
/* Position overlay so the left edge aligns with the 'A' in the AquaRevWater
   logo on the cover image — sits at ~7% from the left edge. */
#ar2-report .rpt-ls-cover-overlay{position:absolute;left:11%;top:42%;max-width:48%;text-align:left;z-index:2;color:#fff;}
#ar2-report .rpt-ls-cover-tagline{font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:4px;text-transform:uppercase;color:#48cae4;font-weight:600;}
#ar2-report .rpt-ls-cover-prop{margin-top:8px;font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:2px;color:#fff;line-height:1.1;word-wrap:break-word;}
#ar2-report .rpt-ls-cover-date{margin-top:6px;font-family:'DM Sans',sans-serif;font-size:12px;color:#7db8cc;}
/* ── Landscape Back Cover (page) — full bleed ── */
#ar2-report .rpt-ls-back-cover-page{aspect-ratio:11/8.5;}
/* ── Landscape Exec Summary pages (preview screen) ── */
#ar2-report .rpt-ls-es-page{font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;color:#222;background:#fff;font-size:11px;line-height:1.5;max-width:1120px;margin:32px auto 0;page-break-before:always;break-before:page;display:flex;flex-direction:column;aspect-ratio:11/8.5;position:relative;box-shadow:0 2px 12px rgba(4,15,30,.08);overflow:hidden;}
#ar2-report .rpt-ls-es-page *{box-sizing:border-box;}
#ar2-report .rpt-ls-es-head{flex-shrink:0;}
#ar2-report .rpt-ls-es-foot{margin-top:auto;flex-shrink:0;}
/* Switched from CSS Grid to Flexbox for explicit height containment.
   Grid auto-rows can stretch row height to max content, leaking past
   the page footer. Flexbox + flex:1 1 0 + min-height:0 + overflow:hidden
   guarantees each col fills the body height exactly and clips overflow. */
#ar2-report .rpt-ls-es-body-3col{flex:1 1 0;min-height:0;display:flex;flex-direction:row;}
#ar2-report .rpt-ls-es-body-2col{flex:1 1 0;min-height:0;display:flex;flex-direction:row;}
#ar2-report .rpt-ls-es-body-3col > .rpt-ls-es-col{flex:1 1 0;width:0;min-width:0;}
#ar2-report .rpt-ls-es-body-2col > .rpt-ls-es-col{flex:1 1 0;width:0;min-width:0;}
#ar2-report .rpt-ls-es-col{padding:14px 18px 14px;overflow:hidden;min-height:0;height:100%;display:flex;flex-direction:column;}
#ar2-report .rpt-ls-es-col-dark{background:#0a2540;color:#fff;}
#ar2-report .rpt-ls-es-col-light{background:#fff;color:#222;}
/* ── Col-with-anchor pattern (Page 1 cols 1 & 2) ──
   Top content stacks naturally; anchor section pinned to bottom of column. */
#ar2-report .rpt-ls-col-with-anchor{display:flex;flex-direction:column;}
#ar2-report .rpt-ls-col-with-anchor .rpt-ls-col-content{flex:0 0 auto;}
#ar2-report .rpt-ls-col-with-anchor .rpt-ls-col-anchor{margin-top:auto;padding-top:10px;}
/* ── Flow modifier ── opt out of bottom-anchored layout so the bullets sit
   directly under the paragraphs above instead of being pushed to the
   column footer. Used on Page 1 col 1 (Operational Advantages / Outcome
   Impact). The leftover space is reserved for future content. */
#ar2-report .rpt-ls-col-with-anchor .rpt-ls-col-anchor.rpt-ls-anchor-flow{margin-top:0;padding-top:14px;}
/* ── ES Page 1 — extra breathing room between bottom content and the
   footer band. Col 2 has slightly less footer padding to give the
   technology blurb more room for readable font. Col 3 keeps a fuller
   pad since its chart card has its own visual separation. */
#ar2-report .rpt-ls-es-page-1 .rpt-ls-es-body-3col > .rpt-ls-es-col:nth-child(2){padding-bottom:10px;}
#ar2-report .rpt-ls-es-page-1 .rpt-ls-es-body-3col > .rpt-ls-es-col:nth-child(3){padding-bottom:32px;}
/* Col 2 — device graphic displays at full width and natural aspect (no
   crop). Pump-room image gets 5% trimmed off the bottom (aspect-ratio
   16/8.55 ≈ 1.872, object-position top) to recover vertical space.
   Tech blurb font bumped to 10.5px for readability — the slack absorbed
   the auto-margin gap that used to sit between the device image and the
   "Inline Device Installation" header (~43px of dead space). */
#ar2-report .rpt-ls-es-page-1 .rpt-ls-es-body-3col > .rpt-ls-es-col:nth-child(2) .rpt-es-tech-blurb{font-size:10.5px;line-height:1.4;margin-bottom:3px;}
#ar2-report .rpt-ls-es-page-1 .rpt-ls-es-body-3col > .rpt-ls-es-col:nth-child(2) .rpt-es-device-full{margin:2px 0 0;}
/* Crop ~10px off the top of the device image (aspect 1.785 vs natural
   1.692 — keeps the device body and arrows visible, trims the empty
   upper margin of the source PNG). object-position:center bottom. */
#ar2-report .rpt-ls-es-page-1 .rpt-ls-es-body-3col > .rpt-ls-es-col:nth-child(2) .rpt-es-device-full img{width:100%;max-width:100%;max-height:none;height:auto;aspect-ratio:1.785/1;object-fit:cover;object-position:center bottom;}
/* Tighten the anchor padding-top in col 2 so the device image and the
   Installation title sit close together (was ~16-26px apart in addition
   to the auto-margin gap). */
#ar2-report .rpt-ls-es-page-1 .rpt-ls-es-body-3col > .rpt-ls-es-col:nth-child(2) .rpt-ls-col-anchor{padding-top:2px;}
#ar2-report .rpt-ls-es-page-1 .rpt-ls-es-body-3col > .rpt-ls-es-col:nth-child(2) .rpt-ls-col-anchor-title-light{margin-bottom:2px;}
/* Pump room — crop 5% off the bottom by constraining display aspect to
   1.872 (vs natural 16/9 = 1.778) and pinning content to the top. */
#ar2-report .rpt-ls-es-page-1 .rpt-ls-es-body-3col > .rpt-ls-es-col:nth-child(2) .rpt-ls-col-anchor-img{aspect-ratio:1.872/1;object-fit:cover;object-position:center top;}
/* Col 3 — slightly tighter chart card and stat lines so the chart lifts
   off the footer with the new padding-bottom. */
#ar2-report .rpt-ls-es-page-1 .rpt-ls-es-body-3col > .rpt-ls-es-col:nth-child(3) .rpt-es-chart-svg{max-height:160px!important;}
#ar2-report .rpt-ls-es-page-1 .rpt-ls-es-body-3col > .rpt-ls-es-col:nth-child(3) .rpt-es-statline{padding:2px 0;}
#ar2-report .rpt-ls-col-anchor-title-light{font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:1.8px;color:#0a2540;margin-bottom:4px;text-transform:uppercase;font-weight:700;}
/* Pump room photo — fixed 16:9 aspect, fills column width, no distortion. */
#ar2-report .rpt-ls-col-anchor-img{width:100%;max-width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:6px;}
/* ── H3-dark variant for the bottom-anchor 2-col bullet headers (dark cols) */
#ar2-report .rpt-ls-es-page .rpt-es-h3-dark{font-size:10px;letter-spacing:1.8px;margin:0 0 4px;color:#48cae4;font-family:'Bebas Neue',sans-serif;font-weight:700;text-transform:uppercase;}
/* ── Assessment Snapshot scope tiles (Page 1 col 3) — 2-stat panel */
#ar2-report .rpt-ls-scope-row{display:flex;align-items:center;gap:14px;margin:8px 0 10px;padding:10px 8px;background:rgba(72,202,228,.06);border:1px solid rgba(72,202,228,.18);border-radius:6px;}
#ar2-report .rpt-ls-scope-item{flex:1;text-align:center;}
#ar2-report .rpt-ls-scope-num{font-family:'Bebas Neue',sans-serif;font-size:34px;letter-spacing:2px;color:#48cae4;line-height:1;}
#ar2-report .rpt-ls-scope-lbl{font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:#cfe2eb;margin-top:3px;}
#ar2-report .rpt-ls-scope-divider{width:1px;height:36px;background:rgba(72,202,228,.25);}
#ar2-report .rpt-ls-volume-lbl{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:#cfe2eb;margin:6px 0 2px;}
/* ROI chart card (lives inside col 3 of ES Page 1). margin-top:auto pins
   it to the bottom of the col so the financial statlines flow above it
   and the chart sits comfortably above the footer with no cutoff. */
#ar2-report .rpt-ls-chart-card{background:#fff;border-radius:6px;margin-top:auto;padding:8px 10px;color:#222;}
#ar2-report .rpt-ls-chart-card .rpt-es-chart{margin:0;}
#ar2-report .rpt-ls-chart-card .rpt-es-chart-svg{max-height:110px;}
#ar2-report .rpt-ls-chart-card .rpt-es-chart-title{font-size:14px;line-height:1.1;margin-bottom:1px;white-space:nowrap;}
#ar2-report .rpt-ls-chart-card .rpt-es-chart-title .rpt-es-chart-sub-title{font-size:12px;color:#5a7388;letter-spacing:1px;}
#ar2-report .rpt-ls-chart-card .rpt-es-chart-sub{font-size:8.5px;line-height:1.3;color:#666;}
#ar2-report .rpt-ls-chart-card .rpt-es-chart-hdr{margin-bottom:2px;}
#ar2-report .rpt-ls-chart-card .rpt-es-chart-stat-net{font-size:11px;}
#ar2-report .rpt-ls-chart-card .rpt-es-chart-stat-pb{font-size:9px;}
/* ── Page 2 Col 3 — NSF default image OR vertical photo stack ──
   NSF image: object-fit:cover + object-position:right fills the entire
   column between header and footer. The image is cropped from the LEFT
   side as the column gets narrower, keeping the NSF logos and product
   shot (right-side composition of the source image) visible.
   Container has zero padding so the image goes truly edge-to-edge.
   Photo stack: flex:1 1 0 per tile so 4 photos share col height equally. */
#ar2-report .rpt-ls-p2c3{padding:0;display:flex;flex-direction:column;gap:0;}
#ar2-report .rpt-ls-p2c3-default-img{display:block;width:100%;height:100%;flex:1 1 0;min-height:0;object-fit:cover;object-position:right center;}
#ar2-report .rpt-ls-p2c3-stack{display:flex;flex-direction:column;gap:8px;flex:1 1 0;min-height:0;width:100%;padding:8px;}
#ar2-report .rpt-ls-p2c3-tile{width:100%;flex:1 1 0;min-height:0;border-radius:5px;overflow:hidden;background:#0a2540;}
#ar2-report .rpt-ls-p2c3-tile img{width:100%;height:100%;display:block;object-fit:cover;}
#ar2-report .rpt-ls-video-caption-pre{margin-bottom:4px;font-size:9.5px;color:#5a7388;}
/* Video hero — natural aspect, fills column width. */
#ar2-report .rpt-ls-video-hero{display:block;width:100%;}
#ar2-report .rpt-ls-video-hero img{width:100%;height:auto;border-radius:5px;display:block;}
/* ── Property Photos drawer (Step 4 export panel) ── */
#ar2 .ar-p2c3-drawer{margin:4px 0 10px;background:rgba(0,180,216,.04);border:1px solid rgba(0,180,216,.18);border-radius:8px;padding:10px;}
#ar2 .ar-p2c3-slots{display:flex;flex-direction:column;gap:8px;}
#ar2 .ar-p2c3-slot{position:relative;width:100%;aspect-ratio:16/9;border:1px dashed rgba(0,180,216,.35);border-radius:6px;background:rgba(0,180,216,.04);display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;transition:background .15s,border-color .15s;}
#ar2 .ar-p2c3-slot:hover{background:rgba(0,180,216,.1);border-color:rgba(0,180,216,.55);}
#ar2 .ar-p2c3-slot.filled{cursor:default;border-style:solid;border-color:rgba(0,180,216,.5);}
#ar2 .ar-p2c3-slot.dragging{background:rgba(0,180,216,.2);border-color:#48cae4;}
#ar2 .ar-p2c3-slot img{width:100%;height:100%;object-fit:cover;display:block;}
#ar2 .ar-p2c3-slot-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#7db8cc;font-size:11px;text-align:center;padding:8px;width:100%;height:100%;}
#ar2 .ar-p2c3-slot-inner input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;}
#ar2 .ar-p2c3-rm{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;border:none;background:rgba(0,0,0,.65);color:#fff;cursor:pointer;font-size:14px;line-height:22px;padding:0;display:flex;align-items:center;justify-content:center;}
#ar2 .ar-p2c3-rm:hover{background:rgba(239,68,68,.85);}
#ar2-report .rpt-ls-es-page .rpt-es-title{font-size:34px;letter-spacing:2px;}
#ar2-report .rpt-ls-es-page .rpt-es-h2{font-size:14px;margin:10px 0 5px;}
#ar2-report .rpt-ls-es-page .rpt-es-lead{font-size:10.5px;line-height:1.5;}
#ar2-report .rpt-ls-es-page .rpt-es-p,#ar2-report .rpt-ls-es-page .rpt-es-p-light{font-size:10.5px;line-height:1.5;margin-bottom:5px;}
#ar2-report .rpt-ls-es-page .rpt-es-bignum{font-size:18px;margin:2px 0 8px;}
#ar2-report .rpt-ls-es-page .rpt-es-bignum-unit{font-size:11px;}
#ar2-report .rpt-ls-es-page .rpt-es-statline{padding:3px 0;}
#ar2-report .rpt-ls-es-page .rpt-es-statline .v{font-size:14px;min-width:64px;}
#ar2-report .rpt-ls-es-page .rpt-es-statline .k{font-size:10px;}
#ar2-report .rpt-ls-es-page .rpt-es-ul li{font-size:10.5px;line-height:1.4;margin-bottom:3px;}
#ar2-report .rpt-ls-es-page .rpt-es-h3-light{font-size:12px;letter-spacing:2px;color:#0a2540;font-family:'Bebas Neue',sans-serif;font-weight:700;margin:6px 0 4px;}
#ar2-report .rpt-ls-es-page .rpt-es-tech-blurb{font-size:10px;line-height:1.5;}
#ar2-report .rpt-ls-es-page .rpt-es-device-full{margin:6px 0 8px;text-align:center;}
#ar2-report .rpt-ls-es-page .rpt-es-device-full img{width:100%;max-width:100%;height:auto;margin:0 auto;display:block;}
#ar2-report .rpt-ls-feat-row .rpt-es-feat-col{margin-top:4px;}
#ar2-report .rpt-ls-outcome-cards{grid-template-columns:1fr 1fr 1fr!important;gap:6px!important;}
#ar2-report .rpt-ls-outcome-cards .rpt-es-out-card{padding:8px 6px;}
#ar2-report .rpt-ls-outcome-cards .rpt-es-out-pct{font-size:18px;}
#ar2-report .rpt-ls-outcome-cards .rpt-es-out-lbl{font-size:9.5px;}
/* Ritz hero photo — natural aspect ratio (no forced container ratio, no
   object-fit cropping). Image fills col width and lets height adjust to
   maintain its native proportions; surrounding content flows around it. */
#ar2-report .rpt-ls-es-page .rpt-es-ritz{display:block;border-radius:4px;overflow:hidden;width:100%;margin:8px 0;}
#ar2-report .rpt-ls-es-page .rpt-es-ritz img{width:100%;height:auto;max-height:none;display:block;}
#ar2-report .rpt-ls-es-page .rpt-es-quote{font-size:11px;line-height:1.5;}
#ar2-report .rpt-ls-es-page .rpt-es-link a{font-size:11.5px;}
/* Video thumbnail — natural aspect ratio. width:100%; height:auto so the
   image displays at its source proportions without cropping or stretching. */
#ar2-report .rpt-ls-es-page .rpt-es-video{display:block;border-radius:5px;overflow:hidden;width:100%;margin:6px 0 0;}
#ar2-report .rpt-ls-es-page .rpt-es-video img{width:100%;height:auto;max-height:none;display:block;}
/* ── Landscape ES Page 2 ── ──────────────────────────────────────────────
   Col 1 Ritz photo: full-bleed across the column (no horizontal col padding)
   so the wide narrow source image has more visual presence. Compress ESG
   section below to absorb the image's vertical footprint without clipping.
   Col 2 Video Summary: title sits directly above the thumbnail with normal
   spacing — no margin-top:auto pin (which used to leave an empty gap).
   Other content tightened so the column distributes evenly head-to-foot. */
/* ── Col 1: full-bleed Ritz image — extend past 18px col padding both sides
   so the image spans wall-to-wall. width:calc(100%+36px) overrides the
   inherited width:100% from .rpt-ls-es-page .rpt-es-ritz earlier in the file. */
#ar2-report .rpt-ls-es-page-2 .rpt-ls-ritz-fb{margin:8px -18px 8px;border-radius:0;width:calc(100% + 36px);}
#ar2-report .rpt-ls-es-page-2 .rpt-ls-ritz-fb img{width:100%;height:auto;max-height:none;display:block;}
/* ── Col 1: compressed ESG section ── */
#ar2-report .rpt-ls-es-page-2 .rpt-ls-es-col-dark .rpt-es-ul-dark{margin:2px 0 0;padding-left:14px;}
#ar2-report .rpt-ls-es-page-2 .rpt-ls-es-col-dark .rpt-es-ul-dark li{font-size:9.5px;line-height:1.35;margin-bottom:2px;}
#ar2-report .rpt-ls-es-page-2 .rpt-ls-es-col-dark .rpt-es-h2:nth-of-type(2){margin:8px 0 3px;font-size:13px;}
#ar2-report .rpt-ls-es-page-2 .rpt-ls-es-col-dark .rpt-es-h2:nth-of-type(2) + .rpt-es-p{font-size:9.5px;line-height:1.4;margin-bottom:3px;}
/* ── Col 2: tighten content + flow Video Summary naturally ── */
#ar2-report .rpt-ls-es-page-2 .rpt-ls-es-body-p2 > .rpt-ls-es-col:nth-child(2){display:flex;flex-direction:column;}
#ar2-report .rpt-ls-es-page-2 .rpt-ls-es-body-p2 > .rpt-ls-es-col:nth-child(2) .rpt-es-h2{margin:8px 0 4px;}
#ar2-report .rpt-ls-es-page-2 .rpt-ls-es-body-p2 > .rpt-ls-es-col:nth-child(2) .rpt-es-p,
#ar2-report .rpt-ls-es-page-2 .rpt-ls-es-body-p2 > .rpt-ls-es-col:nth-child(2) .rpt-es-p-light{margin-bottom:4px;font-size:10px;line-height:1.4;}
#ar2-report .rpt-ls-es-page-2 .rpt-ls-es-body-p2 > .rpt-ls-es-col:nth-child(2) .rpt-ls-outcome-cards{gap:5px;margin:4px 0 6px;}
#ar2-report .rpt-ls-es-page-2 .rpt-ls-es-body-p2 > .rpt-ls-es-col:nth-child(2) .rpt-ls-outcome-cards .rpt-es-out-card{padding:6px 8px;}
#ar2-report .rpt-ls-es-page-2 .rpt-ls-es-body-p2 > .rpt-ls-es-col:nth-child(2) .rpt-es-ul li{font-size:10px;margin-bottom:2px;line-height:1.35;}
#ar2-report .rpt-ls-es-page-2 .rpt-ls-es-body-p2 > .rpt-ls-es-col:nth-child(2) .rpt-ls-video-caption-pre{display:none;}
#ar2-report .rpt-ls-es-page-2 .rpt-ls-es-body-p2 > .rpt-ls-es-col:nth-child(2) .rpt-es-link{margin:2px 0;font-size:10.5px;line-height:1.3;}
#ar2-report .rpt-ls-es-page-2 .rpt-ls-es-body-p2 > .rpt-ls-es-col:nth-child(2) .rpt-ls-video-hero{margin:6px 0 0;}
#ar2-report .rpt-ls-es-page .rpt-es-chart{margin:0 0 8px;}
#ar2-report .rpt-ls-es-page .rpt-es-chart-svg{max-height:240px;}
#ar2-report .rpt-ls-es-page .rpt-es-custom{padding:10px 14px;border-top:3px solid #00b4d8;background:#f0fbff;}
/* ── Presentation Deck (stub) ── */
#ar2-report .rpt-pres-deck-page{position:relative;width:100%;max-width:1120px;margin:32px auto 0;background:#0a2540;color:#fff;aspect-ratio:11/8.5;display:flex;align-items:center;justify-content:center;overflow:hidden;page-break-before:always;break-before:page;box-shadow:0 2px 12px rgba(4,15,30,.08);}
#ar2-report .rpt-pres-deck-stub{text-align:center;padding:40px;}
#ar2-report .rpt-pres-deck-logo{font-family:'Bebas Neue',sans-serif;font-size:48px;letter-spacing:6px;color:#fff;}
#ar2-report .rpt-pres-deck-sub{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:#48cae4;font-weight:600;margin-top:6px;}
#ar2-report .rpt-pres-deck-prop{margin-top:24px;font-family:'Bebas Neue',sans-serif;font-size:32px;letter-spacing:2px;color:#fff;}
#ar2-report .rpt-pres-deck-note{margin-top:18px;font-size:11px;color:#7db8cc;font-style:italic;}
/* ── Pool Profiles Page ── */
#ar2-report .rpt-pp-page{font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;color:#222;background:#fff;font-size:12px;line-height:1.4;max-width:860px;margin:0 auto;padding:0;page-break-before:always;break-before:page;box-sizing:border-box;}
/* Pool Profile: full-bleed page — header band spans edge-to-edge with its
   own internal padding; grid + footer have their own padding too.
   Removed the wrapper padding so the header/footer go to the page edge. */
#ar2-report .rpt-pp-page > .rpt-es-head{margin:0;}
#ar2-report .rpt-pp-page .rpt-pp-grid{padding:14px 22px;}
#ar2-report .rpt-pp-page .rpt-foot{margin:0;}
/* Landscape Pool Profiles — preview at 11×8.5 aspect ratio.
   3-col grid + tighter card sizing previously lived ONLY inside
   @media print, which left the screen preview rendering landscape pool
   profile pages in the default 2-col grid. Cards then overflowed the
   866px page-height clamp and were silently clipped — exactly the
   "pages don't extend / pool profiles broken at 11+ pools" report.
   Hoisted into the base stylesheet so preview and print match. */
#ar2-report .rpt-pp-page.rpt-pp-page-landscape{max-width:1120px;aspect-ratio:11/8.5;min-height:0;overflow:hidden;}
#ar2-report .rpt-pp-page-landscape .rpt-pp-grid{grid-template-columns:1fr 1fr 1fr;gap:8px;}
#ar2-report .rpt-pp-page-landscape .rpt-pp-card{min-height:140px;padding:8px;grid-template-columns:110px 1fr;}
#ar2-report .rpt-pp-page-landscape .rpt-pp-img{width:110px;height:74px;}
#ar2-report .rpt-pp-page-landscape .rpt-pp-name{font-size:12px;}
#ar2-report .rpt-pp-page-landscape .rpt-pp-row{font-size:9.5px;}
#ar2-report .rpt-pp-page-landscape .rpt-pp-row .v{font-size:10.5px;min-width:64px;}
#ar2-report .rpt-pp-page *{box-sizing:border-box;}
#ar2-report .rpt-pp-header{border-bottom:1.5px solid #00b4d8;padding-bottom:10px;margin-bottom:14px;}
#ar2-report .rpt-pp-title{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:3px;color:#00b4d8;line-height:1;}
#ar2-report .rpt-pp-sub{font-size:11px;color:#666;margin-top:4px;}
#ar2-report .rpt-pp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
#ar2-report .rpt-pp-grid-1{grid-template-columns:1fr;}
#ar2-report .rpt-pp-card{background:#f8fbfd;border:1px solid #d5eaf5;border-top:3px solid #00b4d8;border-radius:0 0 6px 6px;padding:12px;display:grid;grid-template-columns:150px 1fr;gap:12px;min-height:148px;break-inside:avoid;page-break-inside:avoid;}
/* Screen-preview grid gap matches print so 12 portrait cards (6×2) fit
   the simulated 1113px page boundary without overflowing. */
#ar2-report .rpt-pp-page .rpt-pp-grid{gap:8px;}
#ar2-report .rpt-pp-grid-1 .rpt-pp-card{grid-template-columns:300px 1fr;min-height:220px;}
#ar2-report .rpt-pp-img{width:150px;height:100px;border-radius:4px;border:1px solid #d5eaf5;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#eaf5fa;flex-shrink:0;}
#ar2-report .rpt-pp-grid-1 .rpt-pp-img{width:300px;height:200px;}
#ar2-report .rpt-pp-img img{width:100%;height:100%;object-fit:cover;display:block;}
#ar2-report .rpt-pp-img-empty{flex-direction:column;gap:6px;background:#e8eef3;border-color:#cdd8e0;}
#ar2-report .rpt-pp-img-empty svg{stroke:#94a3b8;}
#ar2-report .rpt-pp-img-empty-lbl{font-size:9px;color:#94a3b8;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;}
#ar2-report .rpt-pp-info{display:flex;flex-direction:column;min-width:0;}
#ar2-report .rpt-pp-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px;padding-bottom:5px;border-bottom:1px solid #e8f4fb;}
#ar2-report .rpt-pp-name{font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:1.5px;color:#040f1e;line-height:1;flex:1;min-width:0;}
#ar2-report .rpt-pp-pill{display:inline-block;font-size:8px;letter-spacing:1px;text-transform:uppercase;font-weight:700;padding:2px 7px;border-radius:10px;border:1px solid transparent;line-height:1.4;}
#ar2-report .rpt-pp-rows{display:flex;flex-direction:column;gap:2px;}
#ar2-report .rpt-pp-row{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;padding:2px 0;}
#ar2-report .rpt-pp-row .k{color:#555;}
#ar2-report .rpt-pp-row .v{font-family:'JetBrains Mono',monospace;font-weight:600;color:#111;}
#ar2-report .rpt-pp-row.strong .k{color:#040f1e;font-weight:600;}
#ar2-report .rpt-pp-row.strong .v{font-weight:700;}
#ar2-report .rpt-pp-row .v.pos{color:#16a34a;}
#ar2-report .rpt-pp-summary{margin-top:12px;padding:10px 14px;background:#040f1e;color:#90d4e8;border-radius:5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:10px;letter-spacing:1px;text-transform:uppercase;}
#ar2-report .rpt-pp-summary strong{color:#fff;font-family:'JetBrains Mono',monospace;font-weight:700;letter-spacing:0.5px;}
/* ── Disclaimer ── */
#ar2-report .rpt-disc{font-size:9px;color:#aaa;line-height:1.7;border-top:1px solid #eee;padding-top:11px;margin-top:16px;}
/* ── Footer band ── */
#ar2-report .rpt-cta-bar{background:linear-gradient(135deg,#071628,#0a2540);padding:14px 32px;display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:2px solid #00b4d8;}
#ar2-report .rpt-cta-bar a{color:#48cae4;font-size:12px;font-weight:600;text-decoration:none;}
/* ── Cover Page ── */
#ar2-report .rpt-cover-page{page-break-after:always;break-after:page;position:relative;width:100%;max-width:860px;margin:0 auto;overflow:hidden;}
#ar2-report .rpt-cover-bg{width:100%;height:auto;display:block;}
#ar2-report .rpt-cover-overlay{position:absolute;top:20%;left:7%;text-align:left;z-index:2;}
#ar2-report .rpt-cta-bar span{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#7db8cc;}
#ar2-report .rpt-foot{background:#040f1e;padding:12px 32px;display:flex;justify-content:space-between;align-items:center;gap:20px;}
#ar2-report .rpt-foot-logo{font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:3px;color:#fff;flex-shrink:0;}
#ar2-report .rpt-foot-info{font-size:9px;color:#4a7a90;text-align:right;line-height:1.6;}
/* ── Archive ── */
#ar2 .ar-bank-wrap{max-width:1320px;margin:0 auto;padding:0 0 60px;width:100%;box-sizing:border-box;}
#ar2 .ar-bank-hero{display:flex;justify-content:space-between;align-items:center;height:58px;border-bottom:1px solid rgba(255,255,255,.06);}
#ar2 .ar-bank-title{font-size:14px;font-weight:600;color:#fff;display:flex;align-items:center;gap:10px;}
#ar2 .ar-bank-title span{color:var(--mu);font-weight:400;font-size:13px;}
#ar2 .ar-bank-empty{text-align:center;padding:80px 20px;color:var(--mu);font-size:14px;line-height:1.8;}
#ar2 .ar-bank-empty svg{display:block;margin:0 auto 16px;opacity:.25;}
#ar2 .ar-bank-loading{text-align:center;padding:50px;color:var(--mu);font-size:13px;}
#ar2 .ar-bank-search{width:100%;padding:9px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:var(--tx);font-size:13px;margin:16px 0 8px;box-sizing:border-box;outline:none;transition:border-color .2s,background .2s;}
#ar2 .ar-bank-search:focus{border-color:rgba(0,180,216,.5);background:rgba(255,255,255,.06);}
#ar2 .ar-bank-search::placeholder{color:var(--mu);opacity:.5;}
/* Select mode toolbar */
#ar2 .ar-bank-toolbar{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);}
#ar2 .ar-bank-toolbar .ar-bank-sel-count{font-size:13px;color:var(--t);font-weight:500;}
#ar2 .ar-bank-toolbar .ar-bank-sel-all{font-size:12px;color:var(--mu);cursor:pointer;border:none;background:none;padding:4px 8px;border-radius:4px;transition:color .15s;}
#ar2 .ar-bank-toolbar .ar-bank-sel-all:hover{color:var(--t);}
#ar2 .ar-bank-toolbar .ar-bank-del-sel{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:6px;border:1px solid rgba(239,68,68,.3);background:rgba(239,68,68,.08);color:#f87171;font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;margin-left:auto;}
#ar2 .ar-bank-toolbar .ar-bank-del-sel:hover{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.5);}
/* Checkbox column */
#ar2 .ar-bank-chk{display:flex;align-items:center;justify-content:center;width:32px;}
#ar2 .ar-bank-chk input{width:15px;height:15px;accent-color:var(--t);cursor:pointer;margin:0;}
/* Table header — Actions column widened from 140px to 200px so icons
   render with breathing room and never overlap adjacent metric columns. */
#ar2 .ar-bank-thead{display:grid;grid-template-columns:2.2fr repeat(7,1fr) 260px;gap:0;padding:10px 0;font-size:11px;font-weight:500;color:var(--mu);text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid rgba(255,255,255,.08);}
#ar2 .ar-bank-thead.selmode{grid-template-columns:32px 2.2fr repeat(7,1fr) 260px;}
/* Admin view adds a Created By column between the metrics and the actions strip. */
#ar2 .ar-bank-thead.admin-cols{grid-template-columns:2.2fr repeat(7,1fr) 1.2fr 280px;}
#ar2 .ar-bank-thead.admin-cols.selmode{grid-template-columns:32px 2.2fr repeat(7,1fr) 1.2fr 280px;}
#ar2 .ar-bank-thead>div:not(:first-child){text-align:right;}
/* Row list */
#ar2 .ar-bank-list{display:flex;flex-direction:column;gap:0;}
/* Admin dashboard panel — collapsible drawer above the archive table.
   Default state is collapsed (closed); click the header to expand. State
   is persisted to localStorage as 'ar2:admin-dash-open'. */
#ar2 .ar-admin-dash{margin:18px 0 14px;background:linear-gradient(145deg,rgba(0,180,216,.06),rgba(0,180,216,.02));border:1px solid rgba(0,180,216,.18);border-radius:12px;overflow:hidden;}
#ar2 .ar-admin-dash-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;cursor:pointer;user-select:none;transition:background .15s;}
#ar2 .ar-admin-dash-head:hover{background:rgba(0,180,216,.04);}
#ar2 .ar-admin-dash-title{font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:2px;color:#48cae4;text-transform:uppercase;display:flex;align-items:center;gap:10px;}
#ar2 .ar-admin-dash-title-sub{font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:1px;color:var(--mu);text-transform:none;}
#ar2 .ar-admin-dash-toggle{background:rgba(0,180,216,.1);border:1px solid rgba(0,180,216,.25);color:var(--t);font-size:18px;font-weight:600;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;transition:transform .25s,background .15s;}
#ar2 .ar-admin-dash.open .ar-admin-dash-toggle{transform:rotate(180deg);}
#ar2 .ar-admin-dash-body{display:none;padding:0 18px 18px;}
#ar2 .ar-admin-dash.open .ar-admin-dash-body{display:block;}
#ar2 .ar-admin-kpis{display:grid;grid-template-columns:1fr 2fr;gap:14px;margin-bottom:14px;}
#ar2 .ar-admin-kpi-card{background:rgba(0,0,0,.22);border:1px solid rgba(0,180,216,.18);border-radius:10px;padding:14px 16px;}
#ar2 .ar-admin-kpi-lbl{font-size:10px;letter-spacing:1.5px;color:var(--mu);text-transform:uppercase;margin-bottom:6px;}
#ar2 .ar-admin-kpi-val{font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:700;color:#fff;line-height:1;}
#ar2 .ar-admin-kpi-sub{font-size:10.5px;color:var(--mu);margin-top:6px;}
#ar2 .ar-admin-userlist{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
#ar2 .ar-admin-userchip{background:rgba(0,180,216,.1);border:1px solid rgba(0,180,216,.22);border-radius:99px;padding:3px 10px;font-size:10.5px;color:var(--tx);}
#ar2 .ar-admin-userchip b{color:#fff;font-family:'JetBrains Mono',monospace;margin-left:4px;}
/* User-activity table inside the admin dashboard drawer. Lifetime + 30-day
   record + 30-day login counts per user. Designed to read at a glance — small
   monospaced numbers in right-aligned columns. */
#ar2 .ar-admin-userstats-card{background:rgba(0,0,0,.16);border:1px solid rgba(0,180,216,.14);border-radius:10px;padding:12px 14px;margin-bottom:14px;}

/* ─── Admin Dashboard tabs (Phase 3) ─────────────────────────────── */
#ar2 .ar-admin-tabs{display:flex;gap:2px;padding:3px;background:rgba(7,22,40,.55);border:1px solid rgba(0,180,216,.2);border-radius:8px;margin-bottom:16px;flex-wrap:wrap;}
#ar2 .ar-admin-tab{flex:1;min-width:120px;background:transparent;border:none;color:#7db8cc;padding:8px 14px;border-radius:6px;font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.4px;cursor:pointer;transition:background .12s,color .12s;}
#ar2 .ar-admin-tab:hover{color:#cfe2eb;background:rgba(0,180,216,.06);}
#ar2 .ar-admin-tab.active{background:linear-gradient(135deg,rgba(0,180,216,.22),rgba(72,202,228,.18));color:#fff;}
/* Regular users (non-admin) get the dashboard with Overview + Engineer
   Submissions tabs only — the Users tab and its pane are hidden. The
   .non-admin class is set in renderBank when role !== 'admin'. */
#ar2 .ar-admin-dash.non-admin [data-admin-tab="users"],
#ar2 .ar-admin-dash.non-admin [data-admin-tab-pane="users"]{display:none!important;}
/* Drawer title flips for non-admins so it doesn't say "Admin Dashboard". */
#ar2 .ar-admin-dash.non-admin .ar-admin-dash-title::first-line{}
#ar2 .ar-admin-tab-pane{margin-top:4px;}

/* Engineer Submissions card + filters + table */
#ar2 .ar-admin-eng-sub-card{background:rgba(0,0,0,.16);border:1px solid rgba(0,180,216,.14);border-radius:10px;padding:14px;}
#ar2 .ar-admin-eng-filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
#ar2 .ar-admin-eng-filter{background:rgba(7,22,40,.55);border:1px solid rgba(0,180,216,.2);color:#7db8cc;padding:5px 11px;border-radius:99px;font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.4px;cursor:pointer;transition:background .12s,color .12s,border-color .12s;}
#ar2 .ar-admin-eng-filter:hover{background:rgba(0,180,216,.08);color:#cfe2eb;border-color:rgba(0,180,216,.4);}
#ar2 .ar-admin-eng-filter.active{background:linear-gradient(135deg,rgba(0,180,216,.25),rgba(72,202,228,.18));color:#fff;border-color:transparent;}
#ar2 .ar-admin-eng-count{font-size:11px;color:var(--mu);margin-left:auto;letter-spacing:.4px;}
#ar2 .ar-admin-eng-refresh{background:transparent;border:1px solid rgba(0,180,216,.25);color:#48cae4;width:28px;height:24px;border-radius:6px;font-family:inherit;font-size:13px;cursor:pointer;line-height:1;}
#ar2 .ar-admin-eng-refresh:hover{background:rgba(0,180,216,.12);color:#fff;}
#ar2 .ar-admin-eng-tbl{width:100%;border-collapse:collapse;font-size:12.5px;}
#ar2 .ar-admin-eng-tbl thead th{text-align:left;padding:8px 10px;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:#7db8cc;font-weight:600;border-bottom:1px solid rgba(0,180,216,.18);}
#ar2 .ar-admin-eng-tbl tbody td{padding:10px;border-bottom:1px solid rgba(0,180,216,.08);color:#cfe2eb;}
#ar2 .ar-admin-eng-row{cursor:pointer;transition:background .12s;}
#ar2 .ar-admin-eng-row:hover td{background:rgba(0,180,216,.06);}
#ar2 .ar-admin-empty{padding:18px 12px;text-align:center;color:var(--mu);font-size:12px;}

/* Review modal — verifications list */
#ar2 .ar-admin-review-list{display:flex;flex-direction:column;gap:10px;margin-bottom:8px;}
#ar2 .ar-admin-review-pool{background:rgba(13,45,74,.55);border:1px solid rgba(0,180,216,.18);border-radius:10px;padding:12px 14px;}
#ar2 .ar-admin-review-pool-head{font-size:13px;font-weight:600;color:#fff;margin-bottom:8px;display:flex;align-items:center;}
#ar2 .ar-admin-review-pool-row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:12.5px;align-items:baseline;}
#ar2 .ar-admin-review-pool-row > span:first-child{color:var(--mu);font-size:11px;letter-spacing:.3px;text-transform:uppercase;flex:0 0 auto;}
#ar2 .ar-admin-review-pool-row > b,
#ar2 .ar-admin-review-pool-row > div{color:#cfe2eb;text-align:right;}
#ar2 .ar-admin-line-chip{display:inline-block;padding:2px 8px;border-radius:4px;background:rgba(0,180,216,.12);border:1px solid rgba(0,180,216,.25);color:#48cae4;font-family:'JetBrains Mono',monospace;font-size:11px;margin-right:4px;}

/* ──────────── Engineer Submission Review modal ────────────
   IMPORTANT: this modal mounts on document.body (not inside #ar2), so
   every selector below is UNSCOPED — adding `#ar2` would silently
   disable the styling and collapse the table back to a wall of text
   (which is exactly the bug that prompted this redesign). The
   .ar-admin-line-chip class IS still defined under #ar2 elsewhere; we
   replicate it here un-prefixed so it also works inside the modal. */
.ar-admin-line-chip{display:inline-block;padding:2px 8px;border-radius:4px;background:rgba(0,180,216,.12);border:1px solid rgba(0,180,216,.25);color:#48cae4;font-family:'JetBrains Mono',monospace;font-size:11px;margin-right:4px;}

/* Modal header — title + status pill on the same line, then the
   property name set big and the engineer info as a clean metadata row. */
.ar-admin-review-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid rgba(0,180,216,.18);}
.ar-admin-review-head-l{min-width:0;flex:1;}
.ar-admin-review-eyebrow{font-family:'Bebas Neue','DM Sans',sans-serif;font-size:13px;letter-spacing:2.5px;color:#48cae4;text-transform:uppercase;margin-bottom:6px;}
.ar-admin-review-title{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:1.5px;color:#fff;line-height:1.15;word-break:break-word;}
.ar-admin-review-status{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;border:1px solid transparent;line-height:1;white-space:nowrap;}
.ar-admin-review-status::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;}
.ar-admin-review-status.pending{background:rgba(240,165,0,.14);color:#f0a500;border-color:rgba(240,165,0,.4);}
.ar-admin-review-status.in_progress{background:rgba(250,204,21,.14);color:#facc15;border-color:rgba(250,204,21,.4);}
.ar-admin-review-status.submitted{background:rgba(0,180,216,.16);color:#48cae4;border-color:rgba(0,180,216,.5);}
.ar-admin-review-status.reviewed{background:rgba(34,197,94,.16);color:#4ade80;border-color:rgba(34,197,94,.5);}
.ar-admin-review-status.locked{background:rgba(125,184,204,.16);color:#cfe2eb;border-color:rgba(125,184,204,.45);}

/* Engineer info strip — small icon-rich metadata row */
.ar-admin-review-meta{display:flex;flex-wrap:wrap;gap:10px 22px;padding:0 0 14px;border-bottom:1px solid rgba(0,180,216,.12);margin-bottom:14px;font-size:12.5px;color:#cfe2eb;}
.ar-admin-review-meta-item{display:flex;align-items:center;gap:7px;min-width:0;}
.ar-admin-review-meta-lbl{font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:#7db8cc;font-weight:600;}
.ar-admin-review-meta-val{color:#fff;font-weight:500;}
.ar-admin-review-meta-val.mono{font-family:'JetBrains Mono',monospace;font-weight:600;letter-spacing:.4px;font-size:12px;}

/* KPI band — at-a-glance counts (pools, pump rooms, photos, videos) */
.ar-admin-review-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px;}
.ar-admin-review-kpi{background:rgba(0,180,216,.06);border:1px solid rgba(0,180,216,.18);border-radius:8px;padding:8px 10px;text-align:left;}
.ar-admin-review-kpi-lbl{font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:#7db8cc;font-weight:600;margin-bottom:3px;}
.ar-admin-review-kpi-val{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:700;color:#fff;line-height:1;}
.ar-admin-review-kpi.warn .ar-admin-review-kpi-val{color:#f0a500;}

/* Pump room chips */
.ar-admin-review-rooms{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 0 14px;border-bottom:1px solid rgba(0,180,216,.12);margin-bottom:14px;}
.ar-admin-review-rooms-lbl{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#7db8cc;font-weight:600;margin-right:4px;}

/* One row per pool — column grid that actually applies now that we
   dropped the #ar2 prefix. Designed for the 720px modal. */
.ar-admin-review-table{display:flex;flex-direction:column;font-size:12px;background:rgba(7,22,40,.35);border:1px solid rgba(0,180,216,.18);border-radius:8px;overflow:hidden;}
.ar-admin-review-thead,
.ar-admin-review-trow{display:grid;grid-template-columns:minmax(120px,1.4fr) 70px 95px minmax(160px,1.7fr) 70px minmax(80px,1fr) 50px;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid rgba(0,180,216,.08);}
.ar-admin-review-trow:last-child{border-bottom:none;}
.ar-admin-review-thead{font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:#7db8cc;font-weight:700;background:rgba(0,180,216,.07);border-bottom:1px solid rgba(0,180,216,.25);}
.ar-admin-review-trow{color:#cfe2eb;transition:background .12s;}
.ar-admin-review-trow:hover{background:rgba(0,180,216,.05);}
.ar-admin-review-trow .col-pool{display:flex;align-items:center;gap:5px;min-width:0;}
.ar-admin-review-trow .col-pool b{color:#fff;font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ar-admin-review-thead .col-gal,
.ar-admin-review-trow .col-gal{font-family:'JetBrains Mono',monospace;text-align:right;}
.ar-admin-review-thead .col-media,
.ar-admin-review-trow .col-media{font-family:'JetBrains Mono',monospace;text-align:center;}
.ar-admin-review-trow .col-lines{display:flex;flex-wrap:wrap;gap:3px;}
.ar-admin-review-trow .col-lines .ar-admin-line-chip{margin:0;padding:1px 6px;font-size:10.5px;}
.ar-admin-review-trow .col-room,
.ar-admin-review-trow .col-type{font-size:11.5px;color:#cfe2eb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ar-admin-review-type-pill{display:inline-flex;align-items:center;padding:2px 7px;border-radius:99px;font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;border:1px solid transparent;line-height:1.4;}
.ar-admin-review-type-pill.fresh{background:rgba(0,180,216,.15);color:#48cae4;border-color:rgba(0,180,216,.35);}
.ar-admin-review-type-pill.salt{background:rgba(34,197,94,.15);color:#4ade80;border-color:rgba(34,197,94,.35);}
.ar-admin-review-type-pill.unk{background:rgba(125,184,204,.1);color:#7db8cc;border-color:rgba(125,184,204,.25);}
.ar-admin-review-trow .col-flag{display:flex;gap:4px;justify-content:flex-end;}
.ar-admin-review-chev{display:inline-block;color:#7db8cc;font-size:10px;flex-shrink:0;transition:transform .12s;}
.ar-admin-review-flag{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:10px;font-weight:700;line-height:1;}
.ar-admin-review-flag.added{background:rgba(34,197,94,.22);border:1px solid rgba(34,197,94,.55);color:#4ade80;}
.ar-admin-review-flag.disc{background:rgba(240,165,0,.22);border:1px solid rgba(240,165,0,.55);color:#f0a500;}
.ar-admin-review-flag.note{background:rgba(125,184,204,.18);border:1px solid rgba(125,184,204,.45);color:#cfe2eb;}

/* Expandable notes / discrepancy region beneath a pool row */
.ar-admin-review-expand{background:rgba(0,180,216,.06);border-left:3px solid rgba(0,180,216,.45);padding:10px 14px;margin:0;font-size:12px;}
.ar-admin-review-expand-row{display:flex;gap:12px;align-items:baseline;padding:4px 0;line-height:1.5;}
.ar-admin-review-expand-row > span:first-child{flex:0 0 92px;color:#7db8cc;font-size:9.5px;letter-spacing:1px;text-transform:uppercase;font-weight:600;}
.ar-admin-review-expand-row.disc > span:first-child{color:#f0a500;}
.ar-admin-review-expand-row > div{color:#cfe2eb;flex:1;}

/* Property-wide engineer notes (engineer_property_notes), shown below
   the pool table when present. */
.ar-admin-review-prop-notes{margin-top:14px;padding:12px 14px;background:rgba(0,180,216,.05);border:1px solid rgba(0,180,216,.22);border-radius:8px;}
.ar-admin-review-prop-notes-hd{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#48cae4;font-weight:700;margin-bottom:6px;}
.ar-admin-review-prop-notes-body{font-size:12.5px;color:#cfe2eb;line-height:1.6;white-space:pre-wrap;}

/* Empty / error states */
.ar-admin-review-empty,.ar-admin-review-err{padding:18px 14px;text-align:center;font-size:12.5px;color:#7db8cc;background:rgba(7,22,40,.4);border:1px dashed rgba(125,184,204,.3);border-radius:8px;}
.ar-admin-review-err{color:#fca5a5;border-color:rgba(252,165,165,.4);background:rgba(252,165,165,.06);}

/* Narrow viewport — collapse the table to a 2-line stacked layout */
@media (max-width:680px){
  .ar-admin-review-kpis{grid-template-columns:repeat(2,1fr);}
  .ar-admin-review-thead{display:none;}
  .ar-admin-review-trow{grid-template-columns:1fr;gap:4px;padding:11px 14px;}
  .ar-admin-review-trow > span{display:flex;align-items:baseline;gap:8px;}
  .ar-admin-review-trow > span::before{content:attr(data-lbl);font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:#7db8cc;font-weight:600;min-width:74px;}
  .ar-admin-review-trow .col-pool::before{content:'';min-width:0;}
}
#ar2 .ar-admin-review-expand-row > div{color:#cfe2eb;flex:1;}
#ar2 .ar-admin-review-expand-row.disc > div{color:#f0a500;}
@media (max-width: 640px){
  #ar2 .ar-admin-review-thead{display:none;}
  #ar2 .ar-admin-review-trow{grid-template-columns:1fr 1fr;grid-auto-flow:row;gap:4px 10px;padding:10px 8px;}
  #ar2 .ar-admin-review-trow .col-pool{grid-column:1/-1;}
  #ar2 .ar-admin-review-trow .col-lines{grid-column:1/-1;}
}
#ar2 .ar-admin-userstats-title{font-size:11px;letter-spacing:1.4px;color:var(--mu);text-transform:uppercase;margin-bottom:8px;}
#ar2 .ar-admin-userstats-tbl{width:100%;border-collapse:collapse;font-size:11px;color:var(--tx);}
#ar2 .ar-admin-userstats-tbl th{text-align:left;font-weight:500;color:var(--mu);font-size:10px;letter-spacing:.6px;text-transform:uppercase;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.08);}
#ar2 .ar-admin-userstats-tbl th.num,#ar2 .ar-admin-userstats-tbl td.num{text-align:right;font-family:'JetBrains Mono',monospace;}
#ar2 .ar-admin-userstats-tbl td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.04);}
#ar2 .ar-admin-userstats-tbl td.muted{color:var(--mu);font-size:10.5px;}
#ar2 .ar-admin-userstats-tbl td.email{font-family:'JetBrains Mono',monospace;font-size:10.5px;word-break:break-all;}
#ar2 .ar-admin-userstats-tbl td.email .muted{color:rgba(125,184,204,.5);}
#ar2 .ar-admin-userstats-tbl tr:last-child td{border-bottom:none;}
#ar2 .ar-admin-role{display:inline-block;font-size:9px;text-transform:uppercase;letter-spacing:.8px;padding:2px 7px;border-radius:99px;font-weight:600;}
#ar2 .ar-admin-role.role-admin{background:rgba(240,165,0,.14);color:var(--go);border:1px solid rgba(240,165,0,.3);}
#ar2 .ar-admin-role.role-user{background:rgba(0,180,216,.1);color:var(--t);border:1px solid rgba(0,180,216,.25);}
#ar2 .ar-admin-role.role-client{background:rgba(168,85,247,.12);color:#c89aff;border:1px solid rgba(168,85,247,.3);}
/* Engineer role pill — green, signaling field/verification status distinct
   from rep (teal/blue), admin (gold), or client (purple). */
#ar2 .ar-admin-role.role-engineer{background:rgba(34,197,94,.12);color:#4ade80;border:1px solid rgba(34,197,94,.32);}
#ar2 .ar-admin-disabled{display:inline-block;font-size:9px;color:var(--re);background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);padding:1px 6px;border-radius:99px;margin-left:6px;letter-spacing:.5px;text-transform:uppercase;}
/* ── Admin modal styling ────────────────────────────────────────────
   Admin pop-up modals are appended to <body>, OUTSIDE the #ar2 root, so
   the #ar2-scoped form/button styles don't reach them. These unscoped
   rules guarantee modal inputs / selects / buttons render with proper
   contrast on top of the dark gradient backdrop, regardless of the host
   page's CSS (Webflow defaults, etc.). Apply via class="ar2-modal-card"
   on the modal's inner card div. */
.ar2-modal-card{font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;color:#cfe2eb;}
.ar2-modal-card label{display:block;font-size:11px;font-weight:600;color:#cfe2eb;letter-spacing:.4px;margin-bottom:5px;}
.ar2-modal-card input[type="text"],
.ar2-modal-card input[type="password"],
.ar2-modal-card input[type="tel"],
.ar2-modal-card input[type="email"],
.ar2-modal-card input[type="number"],
.ar2-modal-card input[type="search"],
.ar2-modal-card input[type="url"],
.ar2-modal-card input:not([type]),
.ar2-modal-card select,
.ar2-modal-card textarea{
  width:100%;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(0,180,216,.4);
  color:#ffffff;
  padding:10px 12px;
  border-radius:6px;
  font-size:14px;
  font-family:'DM Sans',sans-serif;
  outline:none;
  box-sizing:border-box;
  transition:border-color .15s,box-shadow .15s;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}
.ar2-modal-card input:focus,
.ar2-modal-card select:focus,
.ar2-modal-card textarea:focus{
  border-color:rgba(0,180,216,.85);
  box-shadow:0 0 0 3px rgba(0,180,216,.15);
}
.ar2-modal-card input::placeholder,
.ar2-modal-card textarea::placeholder{color:rgba(255,255,255,.45);opacity:1;}
.ar2-modal-card select{
  cursor:pointer;
  padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2300b4d8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
}
.ar2-modal-card select option{background:#0a2540;color:#fff;}
.ar2-modal-card input[type="file"]{
  background:rgba(0,0,0,.3);
  border:1px dashed rgba(0,180,216,.35);
  color:#cfe2eb;
  padding:10px 12px;
  border-radius:6px;
  font-size:12px;
  width:100%;
  cursor:pointer;
}
.ar2-modal-card input[type="file"]::-webkit-file-upload-button,
.ar2-modal-card input[type="file"]::file-selector-button{
  background:rgba(0,180,216,.18);
  border:1px solid rgba(0,180,216,.4);
  color:#cfe2eb;
  padding:5px 10px;
  border-radius:4px;
  font-size:11px;
  cursor:pointer;
  margin-right:10px;
}
.ar2-modal-card button.ar2-mb{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:#cfe2eb;
  padding:11px 14px;
  border-radius:6px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  font-family:inherit;
  letter-spacing:.4px;
  transition:.15s;
}
.ar2-modal-card button.ar2-mb:hover:not(:disabled){background:rgba(255,255,255,.14);}
.ar2-modal-card button.ar2-mb.primary{
  background:linear-gradient(135deg,#00b4d8,#48cae4);
  border-color:transparent;
  color:#04101e;
}
.ar2-modal-card button.ar2-mb.primary:hover:not(:disabled){filter:brightness(1.08);}
.ar2-modal-card button.ar2-mb.danger{
  background:rgba(239,68,68,.15);
  border-color:rgba(239,68,68,.4);
  color:#fca5a5;
}
.ar2-modal-card button.ar2-mb.danger:hover:not(:disabled){background:rgba(239,68,68,.25);}
.ar2-modal-card button.ar2-mb:disabled{opacity:.5;cursor:not-allowed;}
/* ── Help icon in the top bar ────────────────────────────────────
   A small `?` circle that opens the step-aware tutorial overlay.
   Sits between New and the user chip. */
#ar2 .ar-help-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:rgba(0,180,216,.1);border:1px solid rgba(0,180,216,.35);color:var(--t);font-family:'DM Sans',sans-serif;font-size:16px;font-weight:700;cursor:pointer;padding:0;line-height:1;transition:.15s;flex-shrink:0;}
#ar2 .ar-help-icon:hover{background:rgba(0,180,216,.2);border-color:rgba(0,180,216,.6);color:#fff;}
/* Install App pill in the top bar — visible only when the calculator
   isn't already running as a standalone PWA. Click opens an info
   modal with platform-specific instructions (and fires the native
   install prompt directly when Android Chrome has it available). */
#ar2 .ar-install-pill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:99px;background:linear-gradient(135deg,rgba(0,180,216,.18),rgba(72,202,228,.08));border:1px solid rgba(0,180,216,.5);color:#cfe2eb;font-family:'DM Sans',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.4px;cursor:pointer;line-height:1;transition:background .15s,border-color .15s,color .15s,transform .15s;flex-shrink:0;}
#ar2 .ar-install-pill:hover{background:linear-gradient(135deg,rgba(0,180,216,.32),rgba(72,202,228,.14));border-color:rgba(0,180,216,.85);color:#fff;transform:translateY(-1px);}
#ar2 .ar-install-pill svg{width:14px;height:14px;color:#48cae4;flex-shrink:0;}
#ar2 .ar-install-pill:hover svg{color:#fff;}
@media(max-width:780px){#ar2 .ar-install-pill-lbl{display:none;}#ar2 .ar-install-pill{padding:0 9px;}}

/* ── Install AquaRev modal — platform-prioritized, scrollable on
   any screen height, QR section at the bottom. */
.ar-install-modal{position:fixed;inset:0;background:rgba(4,15,30,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:999998;display:flex;align-items:center;justify-content:center;padding:14px;font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;}
.ar-install-modal .ar-install-card-wrap{background:linear-gradient(145deg,#0a2540,#071628);border:1px solid rgba(0,180,216,.32);border-radius:14px;padding:22px 24px 18px;width:100%;max-width:520px;max-height:92vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.55);}
.ar-install-modal .ar-install-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;}
.ar-install-modal .ar-install-eyebrow{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#48cae4;font-weight:700;margin-bottom:3px;}
.ar-install-modal .ar-install-title{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:1.5px;color:#fff;line-height:1.1;}
.ar-install-modal .ar-install-close{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#cfe2eb;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:18px;font-family:inherit;line-height:1;flex-shrink:0;}
.ar-install-modal .ar-install-close:hover{background:rgba(255,255,255,.18);color:#fff;}
.ar-install-modal .ar-install-lede{font-size:12.5px;color:#cfe2eb;line-height:1.55;margin-bottom:14px;}

/* Primary platform card */
.ar-install-modal .ar-install-card{background:linear-gradient(135deg,rgba(0,180,216,.12),rgba(72,202,228,.04));border:1px solid rgba(0,180,216,.42);border-radius:11px;padding:14px 16px;margin-bottom:10px;}
.ar-install-modal .ar-install-card-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.ar-install-modal .ar-install-card-lbl{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#48cae4;font-weight:700;}
.ar-install-modal .ar-install-card-ico{font-size:18px;line-height:1;}
.ar-install-modal .ar-install-card-msg{font-size:13px;color:#cfe2eb;line-height:1.55;margin-bottom:12px;}
.ar-install-modal .ar-install-do{display:block;width:100%;background:linear-gradient(135deg,#00b4d8,#48cae4);color:#040f1e;border:none;padding:14px 18px;border-radius:9px;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.5px;cursor:pointer;transition:filter .12s,transform .12s;}
.ar-install-modal .ar-install-do:hover{filter:brightness(1.08);transform:translateY(-1px);}

/* Pulse arrow pointing down to where the iOS Share button lives */
.ar-install-modal .ar-install-card-pulse{display:flex;align-items:center;gap:12px;padding:10px 12px;background:rgba(0,180,216,.08);border:1px dashed rgba(0,180,216,.45);border-radius:8px;margin-bottom:12px;color:#cfe2eb;}
.ar-install-modal .ar-install-card-pulse svg{width:22px;height:22px;color:#48cae4;flex-shrink:0;animation:arInstallBounce 1.4s ease-in-out infinite;}
@keyframes arInstallBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}
.ar-install-modal .ar-install-card-pulse-msg{font-size:12.5px;line-height:1.45;}

/* Annotated visual tutorial — SVG diagrams for each platform */
.ar-install-modal .ar-install-visual{margin:0 0 12px;background:rgba(0,0,0,.3);border:1px solid rgba(0,180,216,.18);border-radius:10px;overflow:hidden;padding:10px;}
.ar-install-modal .ar-install-visual svg{display:block;width:100%;height:auto;max-height:280px;}
.ar-install-modal .ar-install-visual-desktop svg{max-height:200px;}
.ar-install-modal .ar-install-visual-ios svg,
.ar-install-modal .ar-install-visual-android svg{max-width:200px;margin:0 auto;}
/* Pulse animation on the highlighted install target */
.ar-install-modal .ar-install-target{animation:arInstallPulse 1.6s ease-in-out infinite;transform-origin:center;transform-box:fill-box;}
.ar-install-modal .ar-install-callout{animation:arInstallPulse 1.6s ease-in-out infinite;}
@keyframes arInstallPulse{0%,100%{opacity:1;filter:drop-shadow(0 0 0 rgba(72,202,228,0));}50%{opacity:.7;filter:drop-shadow(0 0 6px rgba(72,202,228,.85));}}
.ar-install-modal .ar-install-card-or{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:#7db8cc;font-weight:600;text-align:center;margin:14px 0 10px;position:relative;}
.ar-install-modal .ar-install-card-or::before,
.ar-install-modal .ar-install-card-or::after{content:'';display:inline-block;width:48px;height:1px;background:rgba(0,180,216,.25);vertical-align:middle;margin:0 8px;}
.ar-install-modal .ar-install-card-note{margin-top:10px;padding:8px 12px;background:rgba(240,165,0,.08);border:1px solid rgba(240,165,0,.25);border-radius:7px;font-size:11.5px;color:#cfe2eb;line-height:1.5;}

/* Numbered steps */
.ar-install-modal .ar-install-steps{margin:0;padding-left:22px;color:#cfe2eb;font-size:12.5px;line-height:1.65;}
.ar-install-modal .ar-install-steps li{margin-bottom:4px;}
.ar-install-modal .ar-install-steps b{color:#fff;font-weight:600;}

/* Other-device collapsed cards */
.ar-install-modal .ar-install-other{margin:8px 0 14px;}
.ar-install-modal .ar-install-other summary{cursor:pointer;font-size:11.5px;color:#7db8cc;text-transform:uppercase;letter-spacing:1.2px;font-weight:600;padding:6px 0;list-style:none;outline:none;}
.ar-install-modal .ar-install-other summary::-webkit-details-marker{display:none;}
.ar-install-modal .ar-install-other summary::before{content:'▸ ';color:#48cae4;display:inline-block;transition:transform .15s;margin-right:4px;}
.ar-install-modal .ar-install-other[open] summary::before{transform:rotate(90deg);}
.ar-install-modal .ar-install-other-list{margin-top:6px;display:flex;flex-direction:column;gap:6px;}
.ar-install-modal .ar-install-card.compact{padding:9px 12px;background:rgba(7,22,40,.45);border-color:rgba(0,180,216,.18);}
.ar-install-modal .ar-install-card.compact .ar-install-card-hd{margin-bottom:3px;}
.ar-install-modal .ar-install-card-sub{font-size:12px;color:#cfe2eb;line-height:1.5;}

/* QR section — install on another device */
.ar-install-modal .ar-install-qr{display:flex;gap:14px;align-items:center;padding:14px 16px;background:rgba(7,22,40,.55);border:1px solid rgba(0,180,216,.2);border-radius:11px;margin-bottom:10px;}
.ar-install-modal .ar-install-qr-l{flex:1;min-width:0;}
.ar-install-modal .ar-install-qr-eyebrow{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#48cae4;font-weight:700;margin-bottom:4px;}
.ar-install-modal .ar-install-qr-title{font-size:13.5px;color:#fff;font-weight:600;margin-bottom:4px;line-height:1.35;}
.ar-install-modal .ar-install-qr-sub{font-size:11.5px;color:#7db8cc;line-height:1.5;}
.ar-install-modal .ar-install-qr-r{flex-shrink:0;}
.ar-install-modal .ar-install-qr-r img{display:block;width:100px;height:100px;border-radius:6px;background:#fff;padding:6px;border:1px solid rgba(0,180,216,.25);}
@media(max-width:480px){
  .ar-install-modal .ar-install-qr{flex-direction:column;text-align:center;}
  .ar-install-modal .ar-install-qr-r img{width:140px;height:140px;}
}

.ar-install-modal .ar-install-foot{margin-top:6px;font-size:10.5px;color:#7db8cc;text-align:center;}
.ar-install-modal .ar-install-foot b{color:#cfe2eb;}
/* Guided tour — 4 mask bands dim the page except the target, a teal ring
   highlights the spotlight area, and a coach-mark card carries the step copy
   + controls. Outside the bands, clicks pass through to the highlighted
   element so the user can actually interact with what's being explained. */
/* Tour stacking lives BELOW modal layers (ar-pf-modal-backdrop = 100000+)
   so opening a portfolio / new-portfolio / copy-to-portfolio modal during
   an active tour shows the modal cleanly on top instead of getting buried
   under the spotlight overlay. */
.ar2-tour-mask{position:fixed;background:rgba(4,15,30,.72);z-index:50000;pointer-events:auto;transition:all .18s ease;}
.ar2-tour-ring{position:fixed;z-index:50001;pointer-events:none;border-radius:8px;box-shadow:0 0 0 3px rgba(0,180,216,.85),0 0 24px rgba(0,180,216,.45);transition:all .18s ease;}
.ar2-tour-card{position:fixed;z-index:50100;background:linear-gradient(145deg,#0a2540,#071628);border:1px solid rgba(0,180,216,.4);border-radius:12px;padding:18px 20px;box-shadow:0 20px 50px rgba(0,0,0,.6);font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;color:#e0f4fa;transition:top .18s ease,left .18s ease;}
.ar2-tour-card-progress{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:#48cae4;font-weight:700;margin-bottom:6px;}
.ar2-tour-card-title{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:2px;color:#fff;line-height:1.2;margin-bottom:8px;}
.ar2-tour-card-body{font-size:13px;line-height:1.55;color:#cfe2eb;margin-bottom:14px;}
.ar2-tour-card-actions{display:flex;align-items:center;gap:8px;}
.ar2-tour-btn{padding:7px 14px;border-radius:7px;border:1px solid rgba(0,180,216,.32);background:transparent;color:#cfe2eb;font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.4px;cursor:pointer;transition:background .15s,border-color .15s;}
.ar2-tour-btn:hover{background:rgba(0,180,216,.12);border-color:rgba(0,180,216,.6);color:#fff;}
.ar2-tour-btn.primary{background:linear-gradient(135deg,#00b4d8,#48cae4);color:#040f1e;border-color:transparent;}
.ar2-tour-btn.primary:hover{filter:brightness(1.1);}
.ar2-tour-btn.ghost{opacity:.7;border-color:rgba(255,255,255,.15);}
.ar2-tour-btn.ghost:hover{opacity:1;}
@media print{.ar2-tour-mask,.ar2-tour-ring,.ar2-tour-card{display:none!important;}}
/* ── User chip in the top bar ──────────────────────────────────────
   Sits beside the New button. Shows the signed-in user's initial in a
   circle + their name. Click → dropdown with full name, role, and a
   Sign Out option. Hidden until cloud session is established. */
#ar2 .ar-user-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(0,180,216,.08);border:1px solid rgba(0,180,216,.28);color:var(--tx);padding:4px 12px 4px 4px;border-radius:99px;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;letter-spacing:.2px;transition:.15s;line-height:1;}
#ar2 .ar-user-chip:hover{background:rgba(0,180,216,.16);border-color:rgba(0,180,216,.5);}
#ar2 .ar-user-chip.role-admin{border-color:rgba(240,165,0,.4);background:rgba(240,165,0,.08);}
#ar2 .ar-user-chip.role-admin:hover{background:rgba(240,165,0,.16);}
#ar2 .ar-user-chip.role-client{border-color:rgba(168,85,247,.45);background:rgba(168,85,247,.1);}
#ar2 .ar-user-chip.role-client:hover{background:rgba(168,85,247,.18);}
#ar2 .ar-user-chip-avatar{width:26px;height:26px;border-radius:50%;background:var(--t);color:#04101e;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;letter-spacing:0;flex-shrink:0;}
#ar2 .ar-user-chip.role-admin .ar-user-chip-avatar{background:var(--go);}
#ar2 .ar-user-chip.role-client .ar-user-chip-avatar{background:#a855f7;color:#fff;}
#ar2 .ar-user-chip-name{font-size:12px;font-weight:600;}
@media(max-width:780px){#ar2 .ar-user-chip-name{display:none;}}
/* Icon-only variant — renders as a clean circle without the name pill. */
#ar2 .ar-user-chip.ar-user-chip-icononly{padding:3px;border-radius:50%;}
#ar2 .ar-user-chip.ar-user-chip-icononly .ar-user-chip-name{display:none;}

/* ─── Notification bell + drawer (Phase 5) ───────────────────────── */
#ar2 .ar2-notif-bell{position:relative;background:rgba(0,180,216,.08);border:1px solid rgba(0,180,216,.28);color:#cfe2eb;width:32px;height:32px;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:.15s;line-height:1;}
#ar2 .ar2-notif-bell:hover{background:rgba(0,180,216,.18);border-color:rgba(0,180,216,.5);}
#ar2 .ar2-notif-bell-icon{display:inline-flex;align-items:center;justify-content:center;line-height:0;color:#cfe2eb;}
#ar2 .ar2-notif-bell:hover .ar2-notif-bell-icon{color:#e6f4f9;}
#ar2 .ar2-notif-bell-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:99px;background:#ef4444;color:#fff;font-size:10px;font-weight:700;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;border:2px solid #040f1e;letter-spacing:0;font-family:'JetBrains Mono',monospace;}
.ar2-notif-drawer{position:fixed;z-index:999998;width:340px;max-width:calc(100vw - 16px);max-height:70vh;overflow:hidden;background:linear-gradient(145deg,#0a2540,#071628);border:1px solid rgba(0,180,216,.32);border-radius:12px;box-shadow:0 18px 60px rgba(0,0,0,.5);font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;display:flex;flex-direction:column;}
.ar2-notif-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(0,180,216,.18);}
.ar2-notif-title{font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:2px;color:#48cae4;text-transform:uppercase;}
.ar2-notif-mark-all{background:transparent;border:1px solid rgba(0,180,216,.3);color:#48cae4;font-family:inherit;font-size:11px;font-weight:600;padding:5px 10px;border-radius:6px;cursor:pointer;transition:background .12s,color .12s;}
.ar2-notif-mark-all:hover{background:rgba(0,180,216,.12);color:#fff;}
.ar2-notif-list{overflow-y:auto;max-height:calc(70vh - 50px);}
.ar2-notif-empty{padding:20px;text-align:center;color:#7db8cc;font-size:12px;}
.ar2-notif-row{display:grid;grid-template-columns:16px 1fr 18px;gap:10px;align-items:flex-start;padding:11px 14px;border-bottom:1px solid rgba(0,180,216,.08);cursor:pointer;transition:background .12s;}
.ar2-notif-row:hover{background:rgba(0,180,216,.06);}
.ar2-notif-row-del{background:transparent;border:0;color:#7db8cc;cursor:pointer;padding:0;width:18px;height:18px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1;opacity:0;transition:opacity .12s,background .12s,color .12s;margin-top:1px;}
.ar2-notif-row:hover .ar2-notif-row-del{opacity:.65;}
.ar2-notif-row-del:hover{opacity:1!important;background:rgba(239,68,68,.18);color:#fca5a5;}
/* Read/unread toggle. Bigger hit area (16px) + cursor:pointer because
   it's a real button now. Read state shows a hollow ring; unread shows
   the filled aqua dot with the existing halo. */
.ar2-notif-row-dot{width:16px;height:16px;border-radius:50%;background:transparent;border:1.5px solid rgba(125,184,204,.4);cursor:pointer;padding:0;flex-shrink:0;margin-top:2px;display:inline-block;transition:border-color .12s,background .12s,box-shadow .12s;}
.ar2-notif-row-dot:hover{border-color:#48cae4;background:rgba(72,202,228,.12);}
.ar2-notif-row.unread .ar2-notif-row-dot{background:#48cae4;border-color:#48cae4;box-shadow:0 0 0 3px rgba(72,202,228,.18);}
.ar2-notif-row.unread .ar2-notif-row-dot:hover{background:#1a8aa3;border-color:#1a8aa3;}
.ar2-notif-row-msg{font-size:12.5px;color:#cfe2eb;line-height:1.45;}
.ar2-notif-row.unread .ar2-notif-row-msg{color:#fff;font-weight:600;}
.ar2-notif-row-when{font-size:10.5px;color:#7db8cc;margin-top:3px;font-family:'JetBrains Mono',monospace;}
/* Sign-Out menu popped open from the chip */
.ar-user-menu{position:fixed;background:linear-gradient(145deg,#0a2540,#071628);border:1px solid rgba(0,180,216,.3);border-radius:10px;padding:14px;box-shadow:0 12px 36px rgba(0,0,0,.5);z-index:999997;font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;color:#cfe2eb;min-width:220px;}
.ar-user-menu-name{font-size:14px;font-weight:600;color:#fff;margin-bottom:2px;}
.ar-user-menu-role{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:#48cae4;margin-bottom:12px;}
.ar-user-menu-role.role-admin{color:#f0a500;}
.ar-user-menu-role.role-client{color:#c89aff;}
.ar-user-menu-divider{border-top:1px solid rgba(255,255,255,.08);margin:0 -14px 10px;}
.ar-user-menu-btn{display:block;width:100%;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.32);color:#fca5a5;padding:9px 12px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;font-family:inherit;letter-spacing:.4px;text-align:center;transition:.15s;}
.ar-user-menu-btn:hover{background:rgba(239,68,68,.22);}
/* Add User button + row actions in the admin manager */
#ar2 .ar-admin-userstats-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
#ar2 .ar-admin-add-btn{background:linear-gradient(135deg,#00b4d8,#48cae4);color:#fff;border:none;padding:6px 14px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;letter-spacing:.4px;}
#ar2 .ar-admin-add-btn:hover{filter:brightness(1.1);}
#ar2 .ar-admin-userstats-tbl th.actions,#ar2 .ar-admin-userstats-tbl td.actions{text-align:right;white-space:nowrap;}
#ar2 .ar-admin-row-act{background:rgba(0,180,216,.08);border:1px solid rgba(0,180,216,.22);color:var(--t);font-size:10px;padding:3px 8px;border-radius:5px;cursor:pointer;font-family:inherit;font-weight:500;margin-left:4px;letter-spacing:.4px;transition:.15s;}
#ar2 .ar-admin-row-act:hover{background:rgba(0,180,216,.16);border-color:rgba(0,180,216,.4);}
#ar2 .ar-admin-row-act.danger{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.22);color:var(--re);}
#ar2 .ar-admin-row-act.danger:hover{background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.4);}
#ar2 .ar-admin-row-act.enable{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.28);color:var(--gr);}
#ar2 .ar-admin-row-act.enable:hover{background:rgba(34,197,94,.18);}
#ar2 .ar-admin-chart{background:rgba(0,0,0,.16);border:1px solid rgba(0,180,216,.14);border-radius:10px;padding:12px 14px;}
#ar2 .ar-admin-chart-title{font-size:11px;letter-spacing:1.4px;color:var(--mu);text-transform:uppercase;margin-bottom:6px;}
#ar2 .ar-admin-chart svg{width:100%;height:auto;display:block;}
#ar2 .ar-admin-chart-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;font-size:10px;color:var(--mu);}
#ar2 .ar-admin-chart-legend i{display:inline-block;width:10px;height:2px;margin-right:4px;vertical-align:middle;}
/* Admin Created By cell + reassign menu */
#ar2 .ar-bank-createdby{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;text-align:center;}
/* Created By thead label — centered to match the row data; overrides
   the generic "all non-first thead columns are right-aligned" rule. */
#ar2 .ar-bank-thead > .ar-bank-th-createdby{text-align:center;}
#ar2 .ar-bank-createdby .name{color:var(--tx);font-weight:500;}
#ar2 .ar-bank-createdby .role{font-size:9px;color:var(--mu);text-transform:uppercase;letter-spacing:.6px;}
#ar2 .ar-bank-createdby .role.admin{color:var(--go);}
#ar2 .ar-bank-act.reassign{background:rgba(240,165,0,.14);border:1px solid rgba(240,165,0,.28);color:#f0a500;}
/* Engineer-assign hardhat icon button on Archive single-assessment rows.
   Always green when engineers are assigned (filled); dimmer outline when
   none. Tiny badge in the top-right corner when 2+ engineers. */
#ar2 .ar-bank-act.ar-bank-act-engineer{position:relative;padding:6px 8px;background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.32);color:#4ade80;}
#ar2 .ar-bank-act.ar-bank-act-engineer:hover{background:rgba(34,197,94,.24);border-color:rgba(34,197,94,.55);color:#fff;}
#ar2 .ar-bank-act.ar-bank-act-engineer.unassigned{background:transparent;border-color:rgba(125,184,204,.25);color:rgba(125,184,204,.65);border-style:dashed;}
#ar2 .ar-bank-act.ar-bank-act-engineer.unassigned:hover{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.5);color:#4ade80;border-style:solid;}
#ar2 .ar-bank-act.ar-bank-act-engineer svg{display:block;flex-shrink:0;}
/* Engineer names line — sits BELOW the action button row on the right
   side of the card, right-justified, green, same typographic scale as
   .ar-bank-date so the row reads as "metadata under controls". */
/* Actions cell holds the row of buttons. Engineer-name pills are
   anchored as an absolutely-positioned column under the hardhat icon
   via .ar-bank-eng-anchor so the line's left edge aligns with the icon. */
#ar2 .ar-bank-actions-cell{display:flex;align-items:center;justify-content:flex-end;}
#ar2 .ar-bank-eng-anchor{position:relative;display:inline-flex;align-items:center;}
#ar2 .ar-bank-engineer-pills{position:absolute;top:calc(100% + 4px);left:0;display:flex;flex-wrap:wrap;gap:3px;max-width:340px;z-index:2;pointer-events:auto;}
#ar2 .ar-bank-engineer-pill{font-size:9.5px;font-weight:600;color:#4ade80;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.32);border-radius:99px;padding:2px 7px;line-height:1.3;letter-spacing:.2px;cursor:pointer;white-space:nowrap;font-family:inherit;transition:.15s;}
#ar2 .ar-bank-engineer-pill:hover{background:rgba(34,197,94,.24);border-color:rgba(34,197,94,.6);color:#fff;}
#ar2 .ar-bank-engineer-pill:focus-visible{outline:2px solid rgba(34,197,94,.6);outline-offset:1px;}
#ar2 .ar-bank-act-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:99px;background:#4ade80;color:#040f1e;font-size:10px;font-weight:700;padding:0 4px;display:inline-flex;align-items:center;justify-content:center;border:2px solid #040f1e;font-family:'JetBrains Mono',monospace;letter-spacing:0;line-height:1;}
#ar2 .ar-bank-act.reassign:hover{background:rgba(240,165,0,.22);}
/* Each record row */
#ar2 .ar-bank-card{display:grid;grid-template-columns:2.2fr repeat(7,1fr) 260px;gap:0;align-items:center;padding:16px 0 22px;border-bottom:1px solid rgba(255,255,255,.05);transition:background .15s;position:relative;}
#ar2 .ar-bank-card.selmode{grid-template-columns:32px 2.2fr repeat(7,1fr) 200px;}
#ar2 .ar-bank-card.admin-cols{grid-template-columns:2.2fr repeat(7,1fr) 1.2fr 280px;}
#ar2 .ar-bank-card.admin-cols.selmode{grid-template-columns:32px 2.2fr repeat(7,1fr) 1.2fr 280px;}
#ar2 .ar-bank-card.selected{background:rgba(0,180,216,.06);}
#ar2 .ar-bank-card:hover{background:rgba(0,180,216,.04);}
#ar2 .ar-bank-card.selected:hover{background:rgba(0,180,216,.08);}
/* Name + date column */
#ar2 .ar-bank-name{display:flex;flex-direction:column;gap:2px;min-width:0;}
#ar2 .ar-bank-prop{font-size:14px;font-weight:600;color:#f0f0f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:10px;cursor:pointer;padding-left:10px;}
#ar2 .ar-bank-prop:hover{color:var(--t);}
/* Type badge — small pill at the front of each row name distinguishing
   single assessments from portfolios in the unified Archive list. */
/* Premium type indicator — small icon marker (no text pill) before the
   record name. Pair with a 3px left-edge accent stripe on the row itself
   for unmistakable visual differentiation. */
#ar2 .ar-bank-typeicon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;flex-shrink:0;cursor:default;}
#ar2 .ar-bank-typeicon.single{color:#48cae4;background:rgba(72,202,228,.10);box-shadow:inset 0 0 0 1px rgba(72,202,228,.22);}
#ar2 .ar-bank-typeicon.portfolio{color:#4ade80;background:rgba(74,222,128,.10);box-shadow:inset 0 0 0 1px rgba(74,222,128,.28);}
/* Left-edge accent stripe — pulled into a pseudo-element to avoid affecting
   layout. 3px wide bar at the leftmost edge of each row, color-coded by
   type. Singles get a teal stripe, portfolios get a green stripe. */
#ar2 .ar-bank-card::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 2px 2px 0;background:#48cae4;opacity:.65;}
#ar2 .ar-bank-card.is-portfolio::before{background:#4ade80;opacity:.85;}
#ar2 .ar-bank-card.is-portfolio{background:linear-gradient(90deg,rgba(74,222,128,.04),transparent 35%);}
/* Date sits directly under the property icon (which is offset 10px
   inside .ar-bank-prop); matching padding-left lines it up with the
   icon's left edge rather than with the property name text. */
#ar2 .ar-bank-date{font-size:11px;color:var(--mu);font-weight:400;padding-left:10px;}
/* Data cells */
#ar2 .ar-bank-cell{text-align:right;font-variant-numeric:tabular-nums;}
#ar2 .ar-bank-cell-val{font-size:14px;font-weight:600;color:#e8e8e8;line-height:1.4;}
#ar2 .ar-bank-cell-val.green{color:#4ade80;}
#ar2 .ar-bank-cell-val.gold{color:#fbbf24;}
#ar2 .ar-bank-cell-val.teal{color:var(--aq);}
#ar2 .ar-bank-cell-sub{font-size:11px;color:var(--mu);font-weight:400;}
/* Actions — always visible so users can see all available row actions
   without having to hover; previously hover-only which hid them entirely
   on touch devices and made the column purpose unclear. */
#ar2 .ar-bank-actions{display:flex;gap:4px;justify-content:flex-end;align-items:center;opacity:1;}
#ar2 .ar-bank-act{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border-radius:6px;border:none;background:rgba(255,255,255,.06);color:#ccc;font-size:11px;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap;}
#ar2 .ar-bank-act:hover{background:rgba(0,180,216,.15);color:var(--t);}
#ar2 .ar-bank-act.primary{background:rgba(0,180,216,.12);color:var(--t);}
#ar2 .ar-bank-act.primary:hover{background:rgba(0,180,216,.22);}
#ar2 .ar-bank-act.danger{background:transparent;color:#888;}
#ar2 .ar-bank-act.danger:hover{background:rgba(239,68,68,.1);color:#f87171;}
#ar2 .ar-bank-act:disabled{opacity:.4;cursor:default;}
/* Mobile: collapse to card layout */
@media(max-width:960px){
#ar2 .ar-bank-thead{display:none;}
#ar2 .ar-bank-card{grid-template-columns:1fr 1fr 1fr;gap:10px 16px;padding:16px 0;border-radius:0;}
#ar2 .ar-bank-name{grid-column:1/-1;}
#ar2 .ar-bank-cell{text-align:left;}
#ar2 .ar-bank-actions{grid-column:1/-1;opacity:1;justify-content:flex-start;padding-top:10px;}
}
/* ── Save report button ── */
#ar2 .ar-save-wrap{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--bd);}
#ar2 .ar-save-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:9px;border:1px solid rgba(0,180,216,.35);background:rgba(0,180,216,.09);color:var(--t);font-size:13px;font-weight:500;cursor:pointer;transition:background .18s,border-color .18s;white-space:nowrap;}
#ar2 .ar-save-btn:hover{background:rgba(0,180,216,.18);border-color:rgba(0,180,216,.55);}
#ar2 .ar-save-btn:disabled{opacity:.45;cursor:default;}
#ar2 .ar-save-toast{font-size:12px;color:#4ade80;display:none;align-items:center;gap:5px;}
#ar2 .ar-save-toast.err{color:#f87171;}
#ar2 .ar-save-toast.show{display:inline-flex;}
/* ── Bank nav button in top bar ── */
#ar2 .ar-bank-nav{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:7px;border:1px solid var(--bd);background:rgba(0,180,216,.07);color:var(--mu);font-size:12px;font-weight:500;cursor:pointer;transition:background .18s,color .18s;margin-left:auto;}
#ar2 .ar-bank-nav:hover,#ar2 .ar-bank-nav.on{background:rgba(0,180,216,.15);color:var(--t);}

/* ── Confetti burst (success feedback) ── */
.ar-confetti{position:fixed;inset:0;pointer-events:none;z-index:100000;overflow:hidden;}
.ar-confetti-piece{position:absolute;width:8px;height:12px;border-radius:2px;will-change:transform,opacity;opacity:0;}
@keyframes ar-confetti-burst{
  0%   {transform:translate(-50%,-50%) rotate(0deg) scale(.7);opacity:0;}
  10%  {opacity:1;}
  20%  {transform:translate(calc(-50% + var(--mx)),calc(-50% + var(--my))) rotate(calc(var(--r) * .3)) scale(1);}
  100% {transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) rotate(var(--r)) scale(1);opacity:0;}
}

/* ═══════════════════════════════════════════════════════════════════
   AquaRev Pool Measure (Step 0) — #ap2 scope, coexists with #ar2
   ═══════════════════════════════════════════════════════════════════ */
#ap2,#ap2 *,#ap2 *::before,#ap2 *::after{box-sizing:border-box;margin:0;padding:0}
#ap2{
  --t:#00b4d8;--aq:#48cae4;--ic:#90e0ef;--go:#f0a500;--gr:#22c55e;
  --re:#ef4444;--tx:#e0f4fa;--mu:#7db8cc;--nv:#040f1e;--dp:#071628;
  --pa:#0d2d4a;--bd:rgba(0,180,216,.2);
  --cd:linear-gradient(145deg,rgba(13,45,74,.92),rgba(7,22,40,.96));
  font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.5;
  color:var(--tx);
  position:relative; /* anchor for the first-run overlay (Phase 4C) */
}
/* Step 0: hide the calculator's 3-column layout entirely; #ap2 is the step's UI. */
#ar2.map-step #ar2-main-layout{display:none !important;}
#ar2.map-step #ap2{display:block;}
#ap2{display:none;}
/* Step-nav buttons pinned at the top of their columns. */
#ap2 .ap-top-nav{margin-bottom:12px;padding:12px 16px;font-size:12px;}
/* Skip button — amber/gold treatment to flag it as "opt-out" rather than "continue". */
#ap2 .ap-top-nav#ap-btn-skip{background:rgba(240,165,0,.14);border:1px solid rgba(240,165,0,.45);color:var(--go);}
#ap2 .ap-top-nav#ap-btn-skip:hover{background:rgba(240,165,0,.28);border-color:var(--go);color:#fff;}

#ap2 .ap-bar{background:rgba(4,15,30,.88);backdrop-filter:blur(20px);border-bottom:1px solid var(--bd);padding:0 20px;}
#ap2 .ap-bar-inner{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:0;height:58px;max-width:1420px;margin:0 auto;}
#ap2 .ap-brand{display:flex;align-items:center;gap:10px;}
#ap2 .ap-bn{font-family:'Bebas Neue',sans-serif;font-size:21px;letter-spacing:3px;background:linear-gradient(135deg,#fff,var(--aq),var(--t));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
#ap2 .ap-bd{width:1px;height:18px;background:rgba(0,180,216,.3);}
#ap2 .ap-bs{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:#3a6a80;}
#ap2 .ap-status{justify-self:center;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mu);}
#ap2 .ap-status .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mu);margin-right:6px;vertical-align:middle;}
#ap2 .ap-status.ready .dot{background:var(--gr);}
#ap2 .ap-status.busy .dot{background:var(--go);animation:ap-pulse 1s infinite;}
@keyframes ap-pulse{0%,100%{opacity:1}50%{opacity:.3}}
#ap2 .ap-actions{justify-self:end;display:flex;gap:8px;}
/* Match the calculator's .ar-layout span: max-width 1320px, horizontal padding 20px. */
#ap2 .ap-layout{display:grid;grid-template-columns:280px 1fr 300px;gap:12px;max-width:1320px;margin:0 auto;padding:20px 20px 24px;align-items:stretch;}
@media(max-width:1200px){#ap2 .ap-layout{grid-template-columns:260px 1fr 280px;gap:10px;}}
@media(max-width:1040px){#ap2 .ap-layout{grid-template-columns:240px 1fr;} #ap2 .ap-col-right{grid-column:1 / -1;}}
@media(max-width:760px){#ap2 .ap-layout{grid-template-columns:1fr;} #ap2 .ap-col-left,#ap2 .ap-col-map,#ap2 .ap-col-right{grid-column:1 / -1;}}
#ap2 .ap-card{background:var(--cd);border:1px solid var(--bd);border-radius:14px;padding:18px 16px;position:relative;overflow:hidden;margin-bottom:12px;}
#ap2 .ap-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--t),var(--aq));}
#ap2 .ap-card.ac-go::before{background:linear-gradient(90deg,var(--go),#f7c948);}
#ap2 .ap-card.ac-gr::before{background:linear-gradient(90deg,var(--gr),#4ade80);}
/* Start-here variant — default blue border kept; only the top accent line
   turns bold green so the rep's eye lands on this card first. */
#ap2 .ap-card.ap-card-start::before{height:4px;background:linear-gradient(90deg,var(--gr),#4ade80);}
#ap2 .ap-card-title{font-size:13px;font-weight:600;color:var(--tx);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;}
/* Property / Add to Portfolio / Portfolio mode toggle (Phase 1d sandbox).
   Radio strip lives on the Map Pools Property card. The "Add to Portfolio"
   and "Portfolio" radios are gated to User/Admin roles only — hidden until
   body.pf-enabled is set by AR2_PF.init() on login. Clients never see them. */
#ap2 .ap-mode-radios{display:flex;gap:6px;margin:-4px 0 12px;padding:4px;background:rgba(7,22,40,.55);border:1px solid var(--bd);border-radius:10px;}
#ap2 .ap-mode-radio{flex:1;position:relative;display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px;font-weight:600;letter-spacing:.3px;color:var(--mu);padding:7px 8px;border-radius:7px;cursor:pointer;user-select:none;transition:background .15s,color .15s;text-align:center;line-height:1.15;}
#ap2 .ap-mode-radio input{position:absolute;opacity:0;pointer-events:none;}
#ap2 .ap-mode-radio:hover{color:var(--tx);}
#ap2 .ap-mode-radio:has(input:checked){background:linear-gradient(135deg,rgba(0,180,216,.22),rgba(72,202,228,.18));color:#fff;box-shadow:inset 0 0 0 1px rgba(0,180,216,.45);}
/* Role-gated UI: PF-only controls are hidden until AR2_PF.init() confirms
   the signed-in user has a role of 'user' or 'admin'. Clients never see these. */
#ap2 [data-pf-only]{display:none!important;}
body.pf-enabled #ap2 .ap-mode-radio[data-pf-only]{display:flex!important;}
body.pf-enabled #ap2 .ap-pf-picker[data-pf-only].is-active{display:block!important;}
/* Portfolio picker — appears under the radios when "Add to Portfolio" is
   the active mode. Lists portfolios visible to the signed-in user (RLS
   already scopes: users see own only, admins see all). */
#ap2 .ap-pf-picker{margin:0 0 12px;}
#ap2 .ap-pf-picker-lbl{display:block;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:#7db8cc;margin-bottom:6px;font-weight:600;}
#ap2 .ap-pf-picker-select{width:100%;background:rgba(7,22,40,.6);border:1px solid rgba(0,180,216,.28);border-radius:8px;padding:10px 30px 10px 12px;color:#e0f4fa;font-size:13px;font-family:inherit;outline:none;transition:border-color .15s;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#7db8cc 50%),linear-gradient(135deg,#7db8cc 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;cursor:pointer;}
#ap2 .ap-pf-picker-select:focus{border-color:var(--t);}
#ap2 .ap-pf-picker-select:disabled{opacity:.55;cursor:wait;}
#ap2 .ap-pf-picker-hint{font-size:11px;color:#7db8cc;margin-top:6px;line-height:1.45;}
#ap2 .ap-pf-picker-chip{display:none;align-items:center;gap:8px;margin:8px 0 0;padding:8px 10px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.32);border-radius:7px;font-size:12px;color:#cfe2eb;font-weight:600;line-height:1.3;}
#ap2 .ap-pf-picker-chip.is-active{display:flex;}
#ap2 .ap-pf-picker-chip b{color:var(--gr);font-weight:700;}
#ap2 .ap-pf-picker-chip-clear{margin-left:auto;background:transparent;border:none;color:var(--mu);cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;border-radius:4px;}
#ap2 .ap-pf-picker-chip-clear:hover{background:rgba(255,255,255,.08);color:var(--tx);}
#ap2 .ap-lbl{display:block;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--mu);font-weight:600;margin-bottom:6px;}
#ap2 .ap-inp,#ap2 .ap-sel{width:100%;background:rgba(0,0,0,.22);border:1px solid rgba(0,180,216,.22);border-radius:8px;color:var(--tx);padding:9px 12px;font-size:14px;font-family:'DM Sans',sans-serif;outline:none;transition:border-color .16s,box-shadow .16s;}
#ap2 .ap-inp:focus,#ap2 .ap-sel:focus{border-color:rgba(0,180,216,.6);box-shadow:0 0 0 3px rgba(0,180,216,.1);}
#ap2 .ap-inp::placeholder{color:rgba(125,184,204,.4);}
#ap2 .ap-inp.sm{padding:7px 10px;font-size:13px;}
#ap2 .ap-frow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
#ap2 .ap-field{margin-bottom:12px;}
#ap2 .ap-field:last-child{margin-bottom:0;}
#ap2 .ap-btn{appearance:none;font-family:inherit;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:10px 14px;border-radius:10px;cursor:pointer;transition:all .18s;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;}
#ap2 .ap-btn.primary{background:linear-gradient(135deg,var(--t),#0088a8);color:#fff;box-shadow:0 2px 10px rgba(0,180,216,.25);}
#ap2 .ap-btn.primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,180,216,.35);}
#ap2 .ap-btn.ghost{background:rgba(0,180,216,.08);border-color:rgba(0,180,216,.28);color:var(--t);}
#ap2 .ap-btn.ghost:hover{background:rgba(0,180,216,.18);}
#ap2 .ap-btn.danger{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.35);color:var(--re);}
#ap2 .ap-btn.danger:hover{background:rgba(239,68,68,.2);}
#ap2 .ap-btn.full{width:100%;}
#ap2 .ap-btn:disabled{opacity:.45;cursor:not-allowed;transform:none !important;box-shadow:none !important;}
#ap2 .ap-btn-row{display:flex;gap:8px;}
#ap2 .ap-btn-row .ap-btn{flex:1;}
#ap2 .ap-map-wrap{background:var(--cd);border:1px solid var(--bd);border-radius:14px;overflow:hidden;position:relative;min-height:620px;display:flex;flex-direction:column;}
#ap2 #ap-map{flex:1;min-height:620px;}
#ap2 .ap-map-overlay{position:absolute;bottom:12px;left:12px;display:flex;gap:8px;z-index:5;}
#ap2 .ap-map-overlay .ap-btn{padding:8px 12px;font-size:11px;backdrop-filter:blur(10px);background:rgba(4,15,30,.82);}
#ap2 .ap-map-hint{position:absolute;bottom:12px;left:12px;right:12px;background:rgba(4,15,30,.85);backdrop-filter:blur(10px);border:1px solid var(--bd);border-radius:10px;padding:10px 14px;font-size:12px;color:var(--tx);z-index:5;display:none;}
#ap2 .ap-map-hint.show{display:block;}
#ap2 .ap-map-hint strong{color:var(--t);}
#ap2 .ap-kpi-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
#ap2 .ap-summary-card{padding:12px 14px;margin-bottom:12px;}
#ap2 .ap-totals-inline{display:flex;gap:16px;align-items:baseline;}
#ap2 .ap-totals-inline > div{display:flex;align-items:baseline;gap:6px;}
#ap2 .ap-totals-inline .lbl{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mu);font-weight:600;}
#ap2 .ap-totals-inline b{font-family:'JetBrains Mono',monospace;font-size:18px;color:var(--go);font-weight:600;}
#ap2 .ap-totals-inline .unit{font-size:10px;color:var(--mu);}
#ap2 .ap-kpi{background:rgba(0,0,0,.22);border:1px solid rgba(0,180,216,.15);border-radius:10px;padding:10px 8px;text-align:center;}
#ap2 .ap-kpi-lbl{font-size:9px;letter-spacing:1.8px;text-transform:uppercase;color:var(--mu);margin-bottom:4px;font-weight:600;}
#ap2 .ap-kpi-val{font-family:'JetBrains Mono',monospace;font-size:16px;color:var(--t);font-weight:600;line-height:1.2;}
#ap2 .ap-kpi-sub{font-size:10px;color:var(--mu);margin-top:2px;}
#ap2 .ap-pool-list{display:flex;flex-direction:column;gap:8px;max-height:520px;overflow-y:auto;margin:0 -6px;padding:0 6px;}
#ap2 .ap-pool-list::-webkit-scrollbar{width:6px;}
#ap2 .ap-pool-list::-webkit-scrollbar-track{background:rgba(0,0,0,.2);}
#ap2 .ap-pool-list::-webkit-scrollbar-thumb{background:rgba(0,180,216,.3);border-radius:3px;}
/* Card + hover/select states. Left rail doubles as status color. */
#ap2 .ap-pool{background:linear-gradient(145deg,rgba(13,45,74,.45),rgba(7,22,40,.55));border:1px solid rgba(0,180,216,.18);border-radius:10px;padding:12px 12px 10px 28px;cursor:pointer;transition:border-color .15s,background .15s,transform .1s;position:relative;box-shadow:inset 3px 0 0 rgba(34,197,94,.0);}
#ap2 .ap-pool:hover{border-color:rgba(0,180,216,.45);background:linear-gradient(145deg,rgba(13,45,74,.6),rgba(7,22,40,.7));}
/* ── Phase 3: drag handle + inline × delete ── */
#ap2 .ap-pool-drag-handle{position:absolute;left:8px;top:50%;transform:translateY(-50%);color:#5a8aa0;font-size:16px;letter-spacing:-2px;line-height:1;cursor:grab;user-select:none;padding:4px 2px;}
#ap2 .ap-pool[draggable="true"]:hover .ap-pool-drag-handle{color:#7db8cc;}
#ap2 .ap-pool[draggable="false"] .ap-pool-drag-handle{opacity:.25;cursor:default;}
#ap2 .ap-pool[draggable="true"]:active{cursor:grabbing;}
#ap2 .ap-pool.dragging{opacity:.45;}
#ap2 .ap-pool.drop-above{box-shadow:inset 0 3px 0 var(--t),inset 3px 0 0 var(--gr);}
#ap2 .ap-pool.drop-below{box-shadow:inset 0 -3px 0 var(--t),inset 3px 0 0 var(--gr);}
#ap2 .ap-pool-x{position:absolute;top:6px;right:6px;width:22px;height:22px;border:none;background:rgba(239,68,68,.12);color:#ef4444;border-radius:50%;cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s,transform .1s;z-index:2;}
#ap2 .ap-pool-x:hover{background:rgba(239,68,68,.28);transform:scale(1.1);}
/* ── Phase 4C: First-run hint overlay ── */
#ap2 .ap-first-run{position:absolute;inset:0;background:rgba(4,15,30,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:9999;display:flex;align-items:center;justify-content:flex-start;padding:60px;pointer-events:auto;}
#ap2 .ap-first-run-card{background:linear-gradient(145deg,#0a2540,#071628);border:1px solid rgba(0,180,216,.45);border-radius:12px;padding:24px 28px;max-width:420px;box-shadow:0 12px 40px rgba(0,0,0,.55);color:#e7f1f7;font-family:'DM Sans',sans-serif;}
#ap2 .ap-first-run-eyebrow{font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:3px;color:#48cae4;font-weight:700;text-transform:uppercase;margin-bottom:6px;}
#ap2 .ap-first-run-title{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:1.5px;color:#fff;margin-bottom:14px;}
#ap2 .ap-first-run-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13px;line-height:1.5;color:#cfe2eb;}
#ap2 .ap-first-run-list li{padding:8px 12px;border-left:2px solid rgba(0,180,216,.45);background:rgba(0,180,216,.06);border-radius:0 6px 6px 0;}
#ap2 .ap-first-run-list b{color:#fff;}
#ap2 .ap-first-run-list kbd{margin-left:6px;font-family:'JetBrains Mono',monospace;font-size:10px;padding:1px 5px;background:rgba(0,180,216,.18);border:1px solid rgba(0,180,216,.35);border-radius:3px;color:#48cae4;}
#ap2 .ap-first-run-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;}
#ap2 .ap-first-run-tip{font-size:11px;color:#7db8cc;}
#ap2 .ap-first-run-tip kbd{font-family:'JetBrains Mono',monospace;font-size:10px;padding:1px 5px;background:rgba(0,180,216,.18);border:1px solid rgba(0,180,216,.35);border-radius:3px;color:#48cae4;margin:0 2px;}
#ap2 .ap-pool.selected{border-color:var(--t);box-shadow:inset 3px 0 0 var(--t),0 0 0 2px rgba(0,180,216,.2);}
#ap2 .ap-pool.checked{border-color:var(--go);background:rgba(240,165,0,.08);}
#ap2 .ap-pool.registered{box-shadow:inset 3px 0 0 var(--gr);}
#ap2 .ap-pool.registered:hover{box-shadow:inset 3px 0 0 var(--gr);}
#ap2 .ap-pool.registered.selected{box-shadow:inset 3px 0 0 var(--gr),0 0 0 2px rgba(0,180,216,.2);}

/* 2-column grid: [thumbnail] [body]. Body stacks three rows. */
#ap2 .ap-pool-row{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:start;}
/* Select-for-merge checkbox sits 32px from the right edge so it doesn't
   overlap the × delete button at right:6 (which is 22px wide). */
#ap2 .ap-pool-check{appearance:none;position:absolute;top:10px;right:34px;width:14px;height:14px;border:1.5px solid rgba(0,180,216,.35);border-radius:3px;background:rgba(0,0,0,.4);cursor:pointer;opacity:0;transition:opacity .15s,background .15s,border-color .15s;z-index:2;}
#ap2 .ap-pool:hover .ap-pool-check,#ap2 .ap-pool .ap-pool-check:checked,#ap2 .ap-pool.checked .ap-pool-check{opacity:1;}
#ap2 .ap-pool-check:checked{background:var(--go);border-color:var(--go);}
#ap2 .ap-pool-check:checked::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 5l3 3 5-6' stroke='%23040f1e' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;}

/* Thumbnail — larger for at-a-glance recognition */
#ap2 .ap-pool-thumb-sm{width:72px;height:56px;border-radius:6px;overflow:hidden;background:rgba(0,0,0,.4);border:1px solid rgba(0,180,216,.22);display:flex;align-items:center;justify-content:center;color:var(--mu);font-size:18px;flex-shrink:0;}
#ap2 .ap-pool-thumb-sm img{display:block;width:100%;height:100%;object-fit:cover;}

/* Body — 3 rows: name · meta · actions */
#ap2 .ap-pool-body{min-width:0;display:flex;flex-direction:column;gap:5px;}
#ap2 .ap-pool-name{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--tx);line-height:1.2;word-break:break-word;padding-right:20px;}
#ap2 .ap-pool-num{display:inline-flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:12px;letter-spacing:.5px;background:linear-gradient(135deg,var(--t),#0077b6);color:#fff;min-width:22px;height:20px;border-radius:5px;padding:0 5px;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.35);}
#ap2 .ap-pool-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--mu);align-items:center;line-height:1.2;}
#ap2 .ap-pool-meta b{font-family:'JetBrains Mono',monospace;color:var(--tx);font-weight:500;}
#ap2 .ap-pool-meta .sep{color:rgba(125,184,204,.35);}
#ap2 .ap-pool-meta .dev{color:var(--aq);}

/* Actions row — right-justified status pill + menu button */
#ap2 .ap-pool-actions-row{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:3px;}
#ap2 .ap-merge-bar{display:none;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:rgba(240,165,0,.12);border:1px solid rgba(240,165,0,.35);border-radius:10px;margin-bottom:10px;}
#ap2 .ap-merge-bar.show{display:flex;}
#ap2 .ap-merge-bar-text{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--go);font-weight:600;}
#ap2 .ap-merge-bar .ap-mini-btn{border-color:rgba(240,165,0,.4);color:var(--go);background:rgba(240,165,0,.1);}
#ap2 .ap-merge-bar .ap-mini-btn:hover{background:rgba(240,165,0,.2);}
/* Tool-mode map cursors. Inline SVG data URLs so no external requests
   on tool entry. Hotspots are tuned to the visible tip of each glyph
   (top-left for the arrow, top-right for the wand) so the click point
   matches what the rep sees. Falls back to crosshair / pointer if the
   browser can't load the SVG. */
#ap2.tracing .maplibregl-canvas{
  cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M3 2 L3 22 L9 17 L13 25 L16 24 L12 16 L20 16 Z' fill='%23dc2626' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, crosshair !important;
}
#ap2.wand .maplibregl-canvas{
  cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M22 4 L26 8 L10 24 L6 20 Z' fill='%23f97316' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M21 2 L23 4 M27 6 L29 8 M19 6 L21 8' stroke='%23fde68a' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='24' cy='6' r='1' fill='%23fff'/%3E%3C/svg%3E") 24 6, crosshair !important;
}
#ap2 .ap-btn.wand-active{background:linear-gradient(135deg,var(--go),#d88b00) !important;color:#fff !important;box-shadow:0 2px 10px rgba(240,165,0,.3) !important;}
#ap2 .ap-pool-more-wrap{position:relative;}
#ap2 .ap-pool-more-btn{width:28px;height:24px;padding:0;font-size:15px;line-height:1;border-radius:6px;flex:0 0 auto;letter-spacing:1px;}
/* Popover lives outside card clipping via position:fixed; coords set on open. */
/* Popover lives outside card clipping via position:fixed; coords set on open. */
#ap2 .ap-pool-more-menu{position:fixed;display:none;z-index:1500;min-width:180px;background:rgba(4,15,30,.96);backdrop-filter:blur(20px);border:1px solid var(--bd);border-radius:10px;padding:4px;box-shadow:0 12px 40px rgba(0,0,0,.7);}
#ap2 .ap-pool-more-menu.show{display:block;}
#ap2 .ap-pool-more-menu .ap-ctx-item{width:100%;}
#ap2 .ap-mini-btn{flex:1;background:rgba(0,180,216,.06);border:1px solid rgba(0,180,216,.2);color:var(--t);padding:5px 6px;border-radius:6px;font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;font-family:inherit;}
#ap2 .ap-mini-btn:hover{background:rgba(0,180,216,.15);}
#ap2 .ap-mini-btn.danger{color:var(--re);border-color:rgba(239,68,68,.28);background:rgba(239,68,68,.06);}
#ap2 .ap-mini-btn.danger:hover{background:rgba(239,68,68,.18);}
#ap2 .ap-empty{text-align:center;padding:24px 10px;color:var(--mu);font-size:12px;font-style:italic;}
#ap2 .ap-toggle{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-radius:10px;border:1px solid rgba(0,180,216,.22);overflow:hidden;}
#ap2 .ap-tog-btn{padding:8px 10px;text-align:center;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;cursor:pointer;border:none;background:transparent;color:var(--mu);transition:.18s;font-family:inherit;}
#ap2 .ap-tog-btn.on{background:rgba(0,180,216,.18);color:var(--t);}
#ap2 .ap-help{font-size:11px;color:var(--mu);line-height:1.5;margin-top:6px;}
#ap2 .ap-lbl-aux{font-weight:400;color:var(--mu);text-transform:none;letter-spacing:0;font-size:10px;margin-left:4px;}
#ap2 .ap-xref-row{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:10px;color:var(--mu);flex-wrap:wrap;}
#ap2 .ap-xref-lbl{text-transform:uppercase;letter-spacing:.8px;font-size:9px;color:var(--mu);opacity:.8;}
#ap2 .ap-xref-link{color:var(--t);text-decoration:none;font-size:11px;font-weight:500;border-bottom:1px dotted rgba(0,180,216,.4);transition:.15s;}
#ap2 .ap-xref-link:hover{color:#fff;border-bottom-color:var(--t);}
#ap2 .ap-xref-sep{color:var(--mu);opacity:.6;}
#ap2 .ap-name-wrap{position:relative;}
#ap2 .ap-name-dropdown{position:absolute;top:calc(100% + 2px);left:0;right:0;background:rgba(4,15,30,.98);backdrop-filter:blur(20px);border:1px solid var(--bd);border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.6);max-height:280px;overflow-y:auto;z-index:900;display:none;}
#ap2 .ap-name-dropdown.show{display:block;}
#ap2 .ap-name-sug{padding:8px 12px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04);transition:background .12s;}
#ap2 .ap-name-sug:last-child{border-bottom:none;}
#ap2 .ap-name-sug:hover,#ap2 .ap-name-sug.active{background:rgba(0,180,216,.12);}
#ap2 .ap-name-sug-label{font-size:13px;color:var(--tx);font-weight:500;line-height:1.3;}
#ap2 .ap-name-sug-meta{font-size:11px;color:var(--mu);margin-top:2px;line-height:1.3;}
#ap2 .ap-name-sug-type{display:inline-block;font-size:9px;color:var(--t);text-transform:uppercase;letter-spacing:.5px;margin-right:6px;opacity:.7;}
#ap2 .ap-name-empty{padding:10px 12px;font-size:11px;color:var(--mu);text-align:center;}
#ap2 .ap-info-btn{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,180,216,.5);background:rgba(0,180,216,.08);color:var(--t);font-weight:700;font-family:inherit;font-size:12px;line-height:1;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;transition:.18s;}
#ap2 .ap-info-btn:hover{background:rgba(0,180,216,.2);border-color:rgba(0,180,216,.8);}
#ap2 .ap-measurement .ap-help{display:none;}
#ap2 .ap-measurement.show-help .ap-help{display:block;}
#ap2 .ap-measurement.show-help .ap-info-btn{background:var(--t);border-color:var(--t);color:#04101e;}
#ap2 .ap-toast{position:absolute;top:14px;right:14px;background:rgba(4,15,30,.95);backdrop-filter:blur(20px);border:1px solid var(--bd);border-radius:10px;padding:10px 16px 10px 14px;font-size:13px;color:var(--tx);z-index:1000;opacity:0;transition:opacity .25s;pointer-events:none;box-shadow:0 8px 32px rgba(0,0,0,.5);display:flex;align-items:center;gap:10px;max-width:calc(100% - 28px);}
#ap2 .ap-toast.show{opacity:1;}
#ap2 .ap-toast.err{border-color:rgba(239,68,68,.5);}
#ap2 .ap-toast.ok{border-color:rgba(34,197,94,.5);}
#ap2 .ap-toast .drop{width:18px;height:18px;flex-shrink:0;}
#ap2 .ap-ctx{position:fixed;z-index:2000;min-width:220px;background:rgba(4,15,30,.96);backdrop-filter:blur(20px);border:1px solid var(--bd);border-radius:10px;padding:6px;box-shadow:0 12px 40px rgba(0,0,0,.6);display:none;}
#ap2 .ap-ctx.show{display:block;}
#ap2 .ap-ctx-title{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--mu);padding:6px 10px 4px;font-weight:600;}
#ap2 .ap-ctx-item{display:flex;align-items:center;gap:10px;width:100%;border:none;background:transparent;color:var(--tx);font-family:'DM Sans',sans-serif;font-size:13px;text-align:left;padding:8px 10px;border-radius:6px;cursor:pointer;transition:background .12s;}
#ap2 .ap-ctx-item:hover{background:rgba(0,180,216,.15);}
#ap2 .ap-ctx-item.danger{color:var(--re);}
#ap2 .ap-ctx-item.danger:hover{background:rgba(239,68,68,.15);}
#ap2 .ap-ctx-item .ico{width:14px;height:14px;flex-shrink:0;opacity:.7;}
#ap2 .ap-ctx-sep{height:1px;background:rgba(0,180,216,.15);margin:4px 2px;}
#ap2 .ap-confirm{position:fixed;inset:0;z-index:4000;display:none;align-items:center;justify-content:center;padding:20px;}
#ap2 .ap-confirm.show{display:flex;}
#ap2 .ap-confirm-backdrop{position:absolute;inset:0;background:rgba(4,15,30,.75);backdrop-filter:blur(6px);cursor:pointer;}
#ap2 .ap-confirm-card{position:relative;background:linear-gradient(145deg,rgba(13,45,74,.98),rgba(7,22,40,1));border:1px solid var(--bd);border-radius:14px;padding:24px;width:100%;max-width:360px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.7);}
#ap2 .ap-confirm-icon{width:48px;height:48px;margin:0 auto 14px;}
#ap2 .ap-confirm-icon svg{width:100%;height:100%;filter:drop-shadow(0 4px 10px rgba(0,119,182,.4));}
#ap2 .ap-confirm-title{font-size:16px;font-weight:600;color:var(--tx);margin-bottom:6px;}
#ap2 .ap-confirm-body{font-size:13px;color:var(--mu);margin-bottom:18px;line-height:1.4;}
#ap2 .ap-confirm-body:empty{display:none;margin-bottom:10px;}
#ap2 .ap-confirm-actions{display:flex;gap:10px;}
#ap2 .ap-confirm-actions .ap-btn{flex:1;}
#ap2 .ap-confirm .ap-btn.primary.danger{background:linear-gradient(135deg,var(--re),#b91c1c) !important;color:#fff !important;border-color:transparent !important;box-shadow:0 2px 10px rgba(239,68,68,.3) !important;}
#ap2 .ap-confirm .ap-btn.primary.danger:hover{box-shadow:0 4px 16px rgba(239,68,68,.45) !important;transform:translateY(-1px);}
#ap2 .ap-modal{position:fixed;inset:0;z-index:3000;display:none;align-items:center;justify-content:center;padding:20px;}
#ap2 .ap-modal.show{display:flex;}
#ap2 .ap-modal-backdrop{position:absolute;inset:0;background:rgba(4,15,30,.75);backdrop-filter:blur(6px);}
#ap2 .ap-modal-card{position:relative;background:linear-gradient(145deg,rgba(13,45,74,.98),rgba(7,22,40,1));border:1px solid var(--bd);border-radius:16px;padding:24px;width:100%;max-width:460px;box-shadow:0 24px 60px rgba(0,0,0,.7);max-height:88vh;overflow-y:auto;}
#ap2 .ap-modal-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--t),var(--aq));border-radius:16px 16px 0 0;}
#ap2 .ap-modal-card::-webkit-scrollbar{width:8px;}
#ap2 .ap-modal-card::-webkit-scrollbar-thumb{background:rgba(0,180,216,.3);border-radius:4px;}
#ap2 .ap-modal-title{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:2.5px;color:var(--tx);margin-bottom:18px;}
#ap2 .ap-modal-sub{font-size:11px;color:var(--mu);letter-spacing:1px;text-transform:uppercase;margin-top:-12px;margin-bottom:16px;}
#ap2 .ap-modal-actions{display:flex;gap:10px;margin-top:20px;}
#ap2 .ap-modal-actions .ap-btn{flex:1;}
#ap2 textarea.ap-inp{resize:vertical;min-height:64px;font-family:'DM Sans',sans-serif;}
#ap2 .ap-pipe-grid{display:flex;flex-direction:column;gap:6px;}
#ap2 .ap-pipe-row{display:grid;grid-template-columns:44px 1fr 96px;gap:10px;align-items:center;background:rgba(0,0,0,.2);border:1px solid rgba(0,180,216,.14);border-radius:8px;padding:6px 10px;}
#ap2 .ap-pipe-sz{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:1px;color:#fff;}
#ap2 .ap-pipe-flow{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mu);}
#ap2 .ap-qty{display:grid;grid-template-columns:26px 1fr 26px;align-items:center;gap:4px;background:rgba(0,0,0,.24);border:1px solid rgba(0,180,216,.22);border-radius:6px;}
#ap2 .ap-qty-btn{border:none;background:transparent;color:var(--t);font-size:15px;font-weight:700;height:26px;cursor:pointer;font-family:inherit;}
#ap2 .ap-qty-btn:hover{background:rgba(0,180,216,.15);border-radius:6px;}
#ap2 .ap-qty-n{text-align:center;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--tx);}
#ap2 .ap-image-thumb{width:80px;height:60px;border-radius:6px;object-fit:cover;border:1px solid rgba(0,180,216,.3);}
#ap2 details.ap-advanced{margin-top:4px;border-top:1px solid rgba(0,180,216,.12);padding-top:10px;}
#ap2 details.ap-advanced summary{cursor:pointer;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--mu);font-weight:600;list-style:none;padding:2px 0;user-select:none;}
#ap2 details.ap-advanced summary::-webkit-details-marker{display:none;}
#ap2 details.ap-advanced summary::before{content:'▸ ';color:var(--t);font-size:9px;}
#ap2 details.ap-advanced[open] summary::before{content:'▾ ';}
#ap2 .ap-review{background:var(--cd);border:1px solid rgba(240,165,0,.4);border-radius:14px;padding:16px;margin-top:12px;position:relative;overflow:hidden;transition:border-color .2s,opacity .2s;}
#ap2 .ap-review::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--go),#f7c948);}
#ap2 .ap-review.empty{border-color:rgba(0,180,216,.12);opacity:.75;}
#ap2 .ap-review.empty::before{background:rgba(0,180,216,.25);}
#ap2 .ap-review-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
#ap2 .ap-review-title{font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--go);}
#ap2 .ap-review.empty .ap-review-title{color:var(--mu);}
#ap2 .ap-review-stats{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--tx);}
#ap2 .ap-review-grid{display:grid;grid-template-columns:140px 1fr;gap:14px;align-items:start;}
@media(max-width:640px){#ap2 .ap-review-grid{grid-template-columns:1fr;}}
#ap2 .ap-review-thumb{width:140px;height:100px;border-radius:8px;background:rgba(0,0,0,.25);border:1px solid rgba(0,180,216,.22);overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--mu);font-size:10px;position:relative;}
#ap2 .ap-review-thumb img{display:block;width:100%;height:100%;object-fit:cover;}
#ap2 .ap-review-thumb .ap-recap{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;background:rgba(4,15,30,.85);backdrop-filter:blur(6px);border:1px solid rgba(0,180,216,.35);color:var(--t);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-family:inherit;transition:background .15s,transform .15s;}
#ap2 .ap-review-thumb .ap-recap:hover{background:rgba(0,180,216,.35);color:#fff;transform:scale(1.08);}
#ap2 .ap-review-thumb .ap-recap svg{width:14px;height:14px;}
#ap2 .ap-review-body{display:flex;flex-direction:column;gap:10px;}
#ap2 .ap-review-row{display:grid;grid-template-columns:1.6fr 1fr 0.7fr;gap:10px;}
@media(max-width:640px){#ap2 .ap-review-row{grid-template-columns:1fr;}}
#ap2 .ap-review-kbd{display:flex;gap:14px;margin-top:6px;font-size:10px;letter-spacing:1px;color:var(--mu);text-transform:uppercase;font-weight:600;flex-wrap:wrap;}
#ap2 .ap-review-kbd kbd{font-family:'JetBrains Mono',monospace;background:rgba(0,180,216,.1);border:1px solid rgba(0,180,216,.25);border-radius:4px;padding:1px 6px;color:var(--t);font-size:10px;margin-right:4px;}
#ap2 .ap-review-counter{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;padding:2px 8px;background:rgba(240,165,0,.1);border:1px solid rgba(240,165,0,.3);border-radius:10px;color:var(--go);margin-right:8px;}
#ap2 .ap-review-pipes{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;}
@media(max-width:720px){#ap2 .ap-review-pipes{grid-template-columns:repeat(3,1fr);}}
#ap2 .ap-pipe-chip{display:flex;flex-direction:column;align-items:stretch;gap:4px;background:rgba(0,0,0,.22);border:1px solid rgba(0,180,216,.12);border-radius:8px;padding:6px 4px;transition:opacity .15s,border-color .15s,background .15s;}
#ap2 .ap-pipe-chip.zero{opacity:.55;}
#ap2 .ap-pipe-chip.zero:hover{opacity:.9;border-color:rgba(0,180,216,.25);}
#ap2 .ap-pipe-chip.has{opacity:1;border-color:rgba(0,180,216,.45);background:rgba(0,180,216,.08);box-shadow:inset 0 0 0 1px rgba(0,180,216,.22);}
#ap2 .ap-pipe-chip .sz{font-family:'Bebas Neue',sans-serif;font-size:15px;color:#fff;letter-spacing:1px;text-align:center;line-height:1;}
#ap2 .ap-pipe-chip.has .sz{color:var(--aq);}
#ap2 .ap-pipe-chip .qty-row{display:grid;grid-template-columns:22px 1fr 22px;align-items:center;gap:2px;}
#ap2 .ap-pipe-chip .btn{border:none;background:rgba(0,180,216,.08);color:var(--t);font-weight:700;cursor:pointer;padding:2px 0;font-family:inherit;border-radius:4px;font-size:13px;line-height:1;}
#ap2 .ap-pipe-chip .btn:hover{background:rgba(0,180,216,.2);}
#ap2 .ap-pipe-chip .n{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--tx);text-align:center;}
#ap2 .ap-pipe-chip.has .n{color:var(--aq);font-weight:600;}
#ap2 .ap-review-actions{display:flex;gap:8px;margin-top:4px;}
#ap2 .ap-review-actions .ap-btn{padding:9px 14px;font-size:11px;}
#ap2 .ap-pool.draft{border-color:rgba(240,165,0,.45);box-shadow:inset 3px 0 0 var(--go);}
#ap2 .ap-pool.draft:hover{box-shadow:inset 3px 0 0 var(--go);}
#ap2 .ap-pool-status{display:inline-flex;align-items:center;justify-content:center;gap:3px;font-weight:600;padding:3px 8px;height:22px;border-radius:11px;letter-spacing:.5px;line-height:1;}
#ap2 .ap-pool-status.registered{color:var(--gr);background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.4);font-size:11px;}
#ap2 .ap-pool-status.draft{color:var(--go);background:rgba(240,165,0,.14);border:1px solid rgba(240,165,0,.4);text-transform:uppercase;letter-spacing:1.2px;font-size:9px;}
#ap2 .ap-progress{display:inline-flex;align-items:center;gap:8px;margin-left:14px;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mu);font-weight:600;}
#ap2 .ap-progress b{font-family:'JetBrains Mono',monospace;color:var(--tx);font-size:11px;font-weight:600;letter-spacing:0;}
#ap2 .ap-btn.merge-active{background:linear-gradient(135deg,var(--go),#d88b00) !important;color:#fff !important;}
#ap2.merge-mode .maplibregl-canvas{cursor:copy !important;}
/* ── Pool number flag — horizontal pill, screen-upright. ──
   Marker is created with rotationAlignment:'viewport' + pitchAlignment:'viewport'
   so the pill is always upright on screen regardless of map rotation/tilt.
   Centred via polylabel (pole of inaccessibility) so L-shaped pools land their
   flag inside the water rather than on a centroid that may sit on a wall. */
.ap-pool-flag{
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:28px;height:22px;padding:0 9px;
  font-family:'Bebas Neue',sans-serif;font-size:13px;line-height:1;letter-spacing:1.5px;
  color:#fff;
  background:linear-gradient(135deg,#00b4d8,#0077b6);
  border:1.5px solid #fff;border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.45);
  transition:transform .15s,box-shadow .15s;
  white-space:nowrap;
}
.ap-pool-flag:hover{transform:scale(1.08);box-shadow:0 4px 10px rgba(0,0,0,.55);}
.ap-pool-flag.selected{background:linear-gradient(135deg,var(--go),#d88b00);}
/* Zoom-out collapse — when the user zooms out far enough to see multiple
   pools at once, shrink each pill to a tighter dot-style badge so the
   map stays readable. JS toggles the .compact class via map.on('zoom'). */
.ap-pool-flag.compact{min-width:18px;height:16px;padding:0 5px;font-size:10px;border-width:1px;letter-spacing:0.5px;}
/* Property (big) flag — shown only when zoomed out beyond pool scale so the user can navigate back. */
/* Google-Maps-style red teardrop pin. The :before is the teardrop body,
   the :after is the white dot in the centre. Drop-shadow below for depth. */
.ap-property-flag{width:28px;height:40px;cursor:pointer;position:relative;filter:drop-shadow(0 4px 6px rgba(0,0,0,.55));transition:transform .15s;}
.ap-property-flag::before{content:'';position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50% 50% 50% 0;background:linear-gradient(135deg,#ea4335 0%,#c5221f 100%);transform:rotate(-45deg);border:2px solid #fff;box-sizing:border-box;}
.ap-property-flag::after{content:'';position:absolute;left:50%;top:9px;width:9px;height:9px;background:#fff;border-radius:50%;transform:translateX(-50%);}
.ap-property-flag > span{display:none;}
.ap-property-flag:hover{transform:scale(1.12) translateY(-2px);}
.maplibregl-ctrl-attrib{background:rgba(4,15,30,.7) !important;color:#7db8cc !important;font-size:10px !important;}
.maplibregl-ctrl-attrib a{color:#48cae4 !important;}
.mapboxgl-ctrl-group,.maplibregl-ctrl-group{background:rgba(4,15,30,.92) !important;border:1px solid rgba(0,180,216,.45) !important;box-shadow:0 4px 14px rgba(0,0,0,.5) !important;}
.mapboxgl-ctrl-group button,.maplibregl-ctrl-group button{background:transparent !important;width:32px !important;height:32px !important;}
.mapboxgl-ctrl-group button+button,.maplibregl-ctrl-group button+button{border-top:1px solid rgba(0,180,216,.25) !important;}
.mapboxgl-ctrl-group button:hover,.maplibregl-ctrl-group button:hover{background:rgba(0,180,216,.22) !important;}
/* Invert + and - icons so they render bright white on dark background */
.mapboxgl-ctrl-group button .mapboxgl-ctrl-icon,
.maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1) brightness(2) contrast(1.1);}

/* ════════════════════════════════════════════════════════════════════
   PORTFOLIO TOOL (sandbox build) — namespaced ar-pf-* so nothing here
   can collide with existing single-assessment styles. Every rule lives
   under .ar-pf-* and stays inside #ar2 / #ar2-bank scope.
   ════════════════════════════════════════════════════════════════════ */
/* Archive wrap (Portfolio mode) — mirrors .ar-bank-wrap so the tabstrip,
   Single Assessments content, and Portfolios panel all share the same
   horizontal span (1320px max-width, centered) as the rest of the app.
   No padding-bottom here: when the Single Assessments tab is active,
   renderBank renders its own .ar-bank-wrap inside which already adds
   60px bottom padding. The Portfolio panel sets its own bottom space. */
#ar2 .ar-pf-archive-wrap{max-width:1320px;margin:0 auto;padding:0 20px;width:100%;box-sizing:border-box;}

/* ─── Engineer Portal — Phase 1 landing shell ───────────────────────
   Standalone view for role='engineer'. Sized for tablet field-use
   first; desktop scales up gracefully. No rep / admin chrome. */
#ar2 .ar-eng-wrap{max-width:760px;margin:0 auto;padding:40px 20px 80px;width:100%;box-sizing:border-box;}
#ar2 .ar-eng-header{margin-bottom:28px;}
#ar2 .ar-eng-eyebrow{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#4ade80;font-weight:600;margin-bottom:8px;}
#ar2 .ar-eng-title{font-family:'Bebas Neue',sans-serif;font-size:36px;letter-spacing:2px;color:#fff;margin-bottom:6px;line-height:1.05;}
#ar2 .ar-eng-sub{font-size:13.5px;color:var(--mu);line-height:1.5;}
#ar2 .ar-eng-list{display:flex;flex-direction:column;gap:10px;}
#ar2 .ar-eng-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:16px 18px;background:rgba(13,45,74,.5);border:1px solid rgba(34,197,94,.18);border-radius:12px;cursor:pointer;transition:background .15s,border-color .15s,transform .12s;}
#ar2 .ar-eng-row:hover{background:rgba(13,45,74,.7);border-color:rgba(34,197,94,.4);}
#ar2 .ar-eng-row:active{transform:translateY(1px);}
#ar2 .ar-eng-row-main{min-width:0;}
#ar2 .ar-eng-row-name{font-size:15px;font-weight:600;color:#fff;margin-bottom:2px;}
#ar2 .ar-eng-row-sub{font-size:12px;color:var(--mu);line-height:1.4;}
#ar2 .ar-eng-row-status{flex-shrink:0;}
#ar2 .ar-eng-pill{display:inline-block;padding:4px 10px;border-radius:99px;font-size:11px;font-weight:600;letter-spacing:.4px;white-space:nowrap;}
#ar2 .ar-eng-pill.amber {background:rgba(240,165,0,.12); color:#f0a500; border:1px solid rgba(240,165,0,.32);}
#ar2 .ar-eng-pill.yellow{background:rgba(234,179,8,.12); color:#eab308; border:1px solid rgba(234,179,8,.32);}
#ar2 .ar-eng-pill.blue  {background:rgba(0,180,216,.12);  color:#48cae4; border:1px solid rgba(0,180,216,.32);}
#ar2 .ar-eng-pill.green {background:rgba(34,197,94,.12);  color:#4ade80; border:1px solid rgba(34,197,94,.32);}
#ar2 .ar-eng-pill.gray  {background:rgba(125,184,204,.1); color:#7db8cc; border:1px solid rgba(125,184,204,.25);}
#ar2 .ar-eng-empty{padding:48px 20px;text-align:center;border:1px dashed rgba(0,180,216,.18);border-radius:14px;color:var(--mu);font-size:13px;}
#ar2 .ar-eng-empty-icon{font-size:36px;color:rgba(125,184,204,.45);margin-bottom:8px;line-height:1;}
#ar2 .ar-eng-empty-title{font-size:14px;font-weight:600;color:#cfe2eb;margin-bottom:6px;}
#ar2 .ar-eng-empty-body{font-size:12px;color:var(--mu);line-height:1.55;max-width:380px;margin:0 auto;}
/* Install affordance — appears between header and assignment list. */
/* PWA install card — engineer portal landing.
   Three variants depending on capability:
     • Android Chrome (programmatic install)  → bright aqua card + "Install AquaRev" button
     • iOS Safari/Chrome                       → tutorial card with the iOS Share-icon SVG
     • Already standalone                       → not rendered at all (handled in JS) */
#ar2 .ar-eng-install{display:grid;grid-template-columns:auto 1fr auto;gap:14px 16px;align-items:center;padding:16px 18px;margin-bottom:18px;background:linear-gradient(135deg,rgba(0,180,216,.18),rgba(72,202,228,.04));border:1px solid rgba(0,180,216,.42);border-radius:12px;box-shadow:0 6px 18px rgba(0,180,216,.08);}
#ar2 .ar-eng-install.ios{background:linear-gradient(135deg,rgba(13,45,74,.65),rgba(7,22,40,.55));border-color:rgba(0,180,216,.3);box-shadow:none;}
#ar2 .ar-eng-install-ico{width:42px;height:42px;border-radius:10px;background:rgba(0,180,216,.18);border:1px solid rgba(0,180,216,.45);color:#48cae4;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
#ar2 .ar-eng-install.ios .ar-eng-install-ico{background:rgba(125,184,204,.12);border-color:rgba(125,184,204,.32);color:#cfe2eb;}
#ar2 .ar-eng-install-ico svg{width:22px;height:22px;}
#ar2 .ar-eng-install-body{min-width:0;}
#ar2 .ar-eng-install-eyebrow{font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:#48cae4;font-weight:700;margin-bottom:3px;}
#ar2 .ar-eng-install.ios .ar-eng-install-eyebrow{color:#7db8cc;}
#ar2 .ar-eng-install-title{font-size:14px;font-weight:600;color:#fff;line-height:1.25;margin-bottom:4px;}
#ar2 .ar-eng-install-msg{font-size:12px;color:#cfe2eb;line-height:1.5;}
#ar2 .ar-eng-install-msg b{color:#fff;font-weight:600;}
#ar2 .ar-eng-install-msg .ar-eng-share-glyph{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:rgba(0,180,216,.18);border:1px solid rgba(0,180,216,.45);border-radius:4px;vertical-align:-4px;margin:0 2px;}
#ar2 .ar-eng-install-msg .ar-eng-share-glyph svg{width:11px;height:13px;color:#48cae4;}
#ar2 .ar-eng-install-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0;}
#ar2 .ar-eng-install-btn{background:linear-gradient(135deg,#00b4d8,#48cae4);color:#040f1e;border:none;padding:10px 18px;border-radius:8px;font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.5px;cursor:pointer;transition:filter .12s,transform .12s;white-space:nowrap;}
#ar2 .ar-eng-install-btn:hover{filter:brightness(1.08);transform:translateY(-1px);}
#ar2 .ar-eng-install-btn.outline{background:transparent;border:1px solid rgba(125,184,204,.4);color:#cfe2eb;font-weight:600;font-size:11.5px;padding:8px 14px;}
#ar2 .ar-eng-install-btn.outline:hover{border-color:rgba(125,184,204,.7);color:#fff;transform:none;}
@media(max-width:560px){
  #ar2 .ar-eng-install{grid-template-columns:auto 1fr;gap:10px 12px;}
  #ar2 .ar-eng-install-actions{grid-column:1 / -1;flex-direction:row;}
  #ar2 .ar-eng-install-btn{flex:1;}
}
#ar2 .ar-eng-footer{margin-top:36px;text-align:center;}

/* ─── Engineer Portal — 4-step flow (Phase 2) ────────────────────── */
#ar2 .ar-eng-flow{max-width:880px;}
#ar2 .ar-eng-flow-header{position:relative;margin-bottom:22px;}
#ar2 .ar-eng-header-top{display:flex;align-items:center;justify-content:space-between;}
#ar2 .ar-eng-help-btn{background:transparent;border:1px solid rgba(0,180,216,.3);color:#48cae4;width:28px;height:28px;border-radius:50%;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s,color .12s;}
#ar2 .ar-eng-help-btn:hover{background:rgba(0,180,216,.15);border-color:rgba(0,180,216,.6);color:#fff;}

/* Help drawer */
.ar-eng-help-drawer-backdrop{position:fixed;inset:0;background:rgba(4,15,30,.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:999990;display:flex;align-items:stretch;justify-content:flex-end;}
.ar-eng-help-drawer-panel{width:420px;max-width:100vw;height:100vh;background:linear-gradient(180deg,#0a2540,#071628);border-left:1px solid rgba(0,180,216,.3);box-shadow:-20px 0 40px rgba(0,0,0,.5);display:flex;flex-direction:column;}
.ar-eng-help-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(0,180,216,.2);}
.ar-eng-help-drawer-title{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:2px;color:#48cae4;}
.ar-eng-help-close{background:transparent;border:none;color:#cfe2eb;font-size:24px;line-height:1;cursor:pointer;padding:0;width:32px;height:32px;border-radius:6px;}
.ar-eng-help-close:hover{background:rgba(0,180,216,.1);color:#fff;}
.ar-eng-help-drawer-body{padding:18px 22px 24px;overflow-y:auto;flex:1;color:#cfe2eb;font-size:13px;line-height:1.6;font-family:'DM Sans',sans-serif;}
.ar-eng-help-drawer-body p{margin:0 0 12px;}
.ar-eng-help-drawer-body b{color:#fff;font-weight:600;}
.ar-eng-help-drawer-body .ar-eng-help-section{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:#4ade80;font-weight:600;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid rgba(34,197,94,.2);}
.ar-eng-help-drawer-body button{margin:6px 0 14px;}

/* Pipe diameter visual reference */
.ar-eng-pipe-ref{display:flex;align-items:flex-end;justify-content:space-around;gap:8px;background:rgba(0,180,216,.06);border:1px solid rgba(0,180,216,.18);border-radius:8px;padding:14px 10px;margin:8px 0 12px;}
.ar-eng-pipe-ref-col{display:flex;flex-direction:column;align-items:center;gap:6px;}
.ar-eng-pipe-ref-circle{border-radius:50%;background:radial-gradient(circle at 35% 30%, #48cae4, #00b4d8 50%, #0090b4);border:1px solid rgba(255,255,255,0.18);box-shadow:inset 0 0 4px rgba(0,0,0,.3);}
.ar-eng-pipe-ref-lbl{font-family:'JetBrains Mono',monospace;font-size:11px;color:#cfe2eb;font-weight:600;}
#ar2 .ar-eng-back-btn{background:transparent;border:1px solid rgba(0,180,216,.25);color:#cfe2eb;padding:6px 12px;border-radius:7px;font-family:inherit;font-size:11.5px;letter-spacing:.4px;cursor:pointer;transition:border-color .15s,color .15s;display:inline-flex;align-items:center;gap:6px;}
#ar2 .ar-eng-back-btn:hover{border-color:rgba(0,180,216,.6);color:#fff;}
#ar2 .ar-eng-back-btn svg{width:14px;height:14px;}
#ar2 .ar-eng-prop-title{font-family:'Bebas Neue',sans-serif;font-size:30px;letter-spacing:2px;color:#fff;margin-top:14px;line-height:1.1;}
#ar2 .ar-eng-prop-sub{font-size:12px;color:var(--mu);letter-spacing:1px;text-transform:uppercase;margin-top:4px;}
#ar2 .ar-eng-saved{display:inline-block;font-size:11px;color:#7db8cc;margin-top:8px;font-family:'JetBrains Mono',monospace;}
#ar2 .ar-eng-lock-banner{background:rgba(125,184,204,.08);border:1px solid rgba(125,184,204,.25);color:#cfe2eb;padding:10px 14px;border-radius:8px;font-size:12.5px;margin-top:14px;}

/* Stepper */
#ar2 .ar-eng-stepper{display:flex;align-items:center;gap:0;margin-bottom:24px;flex-wrap:wrap;}
#ar2 .ar-eng-step{background:transparent;border:none;padding:0 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:inherit;color:var(--mu);transition:color .15s;}
#ar2 .ar-eng-step.current{color:#fff;}
#ar2 .ar-eng-step.done{color:#4ade80;cursor:pointer;}
#ar2 .ar-eng-step.pending{color:rgba(125,184,204,.5);cursor:not-allowed;}
#ar2 .ar-eng-step-num{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(125,184,204,.12);border:1px solid rgba(125,184,204,.3);font-size:13px;font-weight:600;}
#ar2 .ar-eng-step.current .ar-eng-step-num{background:linear-gradient(135deg,#00b4d8,#48cae4);border-color:transparent;color:#040f1e;}
#ar2 .ar-eng-step.done .ar-eng-step-num{background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.45);color:#4ade80;}
#ar2 .ar-eng-step-lbl{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;}
#ar2 .ar-eng-step-bar{flex:1;height:2px;background:rgba(125,184,204,.18);margin:0 6px;align-self:center;margin-top:-14px;}
#ar2 .ar-eng-step-bar.done{background:rgba(34,197,94,.4);}

/* Cards + sections */
#ar2 .ar-eng-card{background:rgba(13,45,74,.45);border:1px solid rgba(0,180,216,.18);border-radius:14px;padding:24px 24px 20px;margin-bottom:18px;}
#ar2 .ar-eng-card .ar-eng-eyebrow{margin-bottom:6px;}
#ar2 .ar-eng-h1{font-family:'Bebas Neue',sans-serif;font-size:30px;letter-spacing:2px;color:#fff;line-height:1.1;margin-bottom:10px;}
#ar2 .ar-eng-h2{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:1.5px;color:#fff;line-height:1.15;margin-bottom:10px;}
#ar2 .ar-eng-lede{font-size:13.5px;color:var(--mu);line-height:1.6;margin-bottom:20px;}
#ar2 .ar-eng-section-title{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#7db8cc;font-weight:600;margin:22px 0 10px;border-top:1px dashed rgba(0,180,216,.14);padding-top:14px;}
#ar2 .ar-eng-section-title:first-of-type{border-top:none;padding-top:0;margin-top:18px;}

/* Briefing video + bullets */
#ar2 .ar-eng-video{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:10px;background:#000;margin-bottom:18px;}
#ar2 .ar-eng-video iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
#ar2 .ar-eng-bullets{list-style:none;padding:0;margin:0 0 18px;font-size:13px;color:#cfe2eb;line-height:1.6;}
#ar2 .ar-eng-bullets li{padding:6px 0 6px 22px;position:relative;}
#ar2 .ar-eng-bullets li::before{content:'';position:absolute;left:0;top:14px;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#00b4d8,#48cae4);}
#ar2 .ar-eng-bullets li b{color:#fff;font-weight:600;}
#ar2 .ar-eng-skip-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#cfe2eb;cursor:pointer;user-select:none;margin-bottom:14px;}
#ar2 .ar-eng-skip-row input{width:16px;height:16px;cursor:pointer;accent-color:#00b4d8;}

/* Briefing supplement (Step 1, below the video). Drawn from the
   AquaRev Specifications Guide PDF — gives the engineer a quick
   visual reference for what to capture on site, plus a link to the
   full PDF for deeper detail. */
#ar2 .ar-eng-brief-sup{margin:22px 0 6px;padding-top:18px;border-top:1px dashed rgba(0,180,216,.18);}
#ar2 .ar-eng-brief-sup-hd{font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:2px;color:#48cae4;text-transform:uppercase;margin-bottom:6px;}
#ar2 .ar-eng-brief-sup-sub{font-size:12.5px;color:var(--mu);line-height:1.6;margin-bottom:14px;}
#ar2 .ar-eng-brief-imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px;}
@media(max-width:720px){#ar2 .ar-eng-brief-imgs{grid-template-columns:1fr;}}
#ar2 .ar-eng-brief-fig{background:rgba(7,22,40,.55);border:1px solid rgba(0,180,216,.18);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;cursor:zoom-in;transition:border-color .15s,transform .15s;}
#ar2 .ar-eng-brief-fig:hover{border-color:rgba(0,180,216,.5);transform:translateY(-1px);}
#ar2 .ar-eng-brief-fig img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#040f1e;}
#ar2 .ar-eng-brief-fig-cap{padding:9px 11px 11px;font-size:11.5px;color:#cfe2eb;line-height:1.45;}
#ar2 .ar-eng-brief-fig-cap b{display:block;color:#fff;font-weight:600;margin-bottom:2px;font-size:12px;letter-spacing:.2px;}
/* Device sizing mini-table */
#ar2 .ar-eng-brief-sizes{background:rgba(0,180,216,.05);border:1px solid rgba(0,180,216,.18);border-radius:10px;padding:12px 14px;margin-bottom:14px;}
#ar2 .ar-eng-brief-sizes-hd{font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:#7db8cc;font-weight:600;margin-bottom:8px;}
#ar2 .ar-eng-brief-sizes-tbl{width:100%;border-collapse:collapse;font-size:12px;color:#cfe2eb;}
#ar2 .ar-eng-brief-sizes-tbl th,#ar2 .ar-eng-brief-sizes-tbl td{text-align:left;padding:6px 8px;border-bottom:1px solid rgba(0,180,216,.08);}
#ar2 .ar-eng-brief-sizes-tbl th{color:#7db8cc;font-weight:600;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;}
#ar2 .ar-eng-brief-sizes-tbl tr:last-child td{border-bottom:none;}
#ar2 .ar-eng-brief-sizes-tbl td:first-child{color:#48cae4;font-weight:600;font-family:'JetBrains Mono',monospace;}
#ar2 .ar-eng-brief-sizes-foot{margin-top:8px;font-size:11px;color:var(--mu);font-style:italic;}
/* Resource strip — PDF link + contact */
#ar2 .ar-eng-brief-strip{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;}
#ar2 .ar-eng-brief-link{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,rgba(0,180,216,.16),rgba(72,202,228,.06));border:1px solid rgba(0,180,216,.4);color:#cfe2eb;padding:11px 14px;border-radius:10px;font-size:12.5px;font-weight:600;text-decoration:none;letter-spacing:.2px;transition:background .15s,border-color .15s,color .15s;flex:1;min-width:240px;}
#ar2 .ar-eng-brief-link:hover{background:linear-gradient(135deg,rgba(0,180,216,.28),rgba(72,202,228,.12));border-color:rgba(0,180,216,.7);color:#fff;}
#ar2 .ar-eng-brief-link svg{flex-shrink:0;width:16px;height:16px;color:#48cae4;}
#ar2 .ar-eng-brief-link-sub{display:block;font-size:10.5px;font-weight:500;color:var(--mu);letter-spacing:.5px;text-transform:uppercase;margin-top:1px;}
#ar2 .ar-eng-brief-contact{display:flex;flex-direction:column;justify-content:center;padding:9px 14px;background:rgba(7,22,40,.4);border:1px solid rgba(0,180,216,.15);border-radius:10px;font-size:11.5px;color:var(--mu);line-height:1.5;min-width:200px;}
#ar2 .ar-eng-brief-contact b{display:block;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:#7db8cc;margin-bottom:3px;font-weight:600;}
#ar2 .ar-eng-brief-contact a{color:#cfe2eb;text-decoration:none;font-weight:500;}
#ar2 .ar-eng-brief-contact a:hover{color:#48cae4;}

/* Install QR card on the briefing step — text on the left, QR on
   the right. Stacks vertically on phones. */
#ar2 .ar-eng-brief-install{display:flex;gap:18px;align-items:center;margin:22px 0 4px;padding:18px 20px;background:linear-gradient(135deg,rgba(0,180,216,.15),rgba(72,202,228,.04));border:1px solid rgba(0,180,216,.4);border-radius:12px;}
#ar2 .ar-eng-brief-install-l{flex:1;min-width:0;}
#ar2 .ar-eng-brief-install-eyebrow{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#48cae4;font-weight:700;margin-bottom:4px;}
#ar2 .ar-eng-brief-install-title{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:1.5px;color:#fff;line-height:1.2;margin-bottom:6px;}
#ar2 .ar-eng-brief-install-sub{font-size:12.5px;color:#cfe2eb;line-height:1.55;margin-bottom:12px;}
#ar2 .ar-eng-brief-install-btn{background:linear-gradient(135deg,#00b4d8,#48cae4);color:#040f1e;border:none;padding:10px 18px;border-radius:8px;font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.4px;cursor:pointer;transition:filter .12s,transform .12s;}
#ar2 .ar-eng-brief-install-btn:hover{filter:brightness(1.08);transform:translateY(-1px);}
#ar2 .ar-eng-brief-install-qr{flex-shrink:0;text-align:center;}
#ar2 .ar-eng-brief-install-qr img{display:block;width:120px;height:120px;border-radius:8px;background:#fff;padding:6px;border:1px solid rgba(0,180,216,.25);}
#ar2 .ar-eng-brief-install-qr-cap{margin-top:5px;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:#7db8cc;font-weight:600;}
@media(max-width:560px){
  #ar2 .ar-eng-brief-install{flex-direction:column;text-align:left;}
  #ar2 .ar-eng-brief-install-qr{align-self:center;}
  #ar2 .ar-eng-brief-install-qr img{width:140px;height:140px;}
}

/* Flat key-value rows + notes */
#ar2 .ar-eng-row-flat{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px solid rgba(0,180,216,.08);font-size:13px;}
#ar2 .ar-eng-row-flat:last-of-type{border-bottom:none;}
#ar2 .ar-eng-k{color:var(--mu);font-size:12px;letter-spacing:.4px;}
#ar2 .ar-eng-v{color:#cfe2eb;font-weight:500;text-align:right;}
#ar2 .ar-eng-link{color:#48cae4;text-decoration:underline;text-underline-offset:2px;font-size:12px;margin-left:6px;}
#ar2 .ar-eng-link:hover{color:#fff;}
#ar2 .ar-eng-notes{background:rgba(0,180,216,.05);border:1px solid rgba(0,180,216,.15);border-radius:8px;padding:10px 12px;margin:14px 0 6px;font-size:12.5px;color:#cfe2eb;line-height:1.55;}
#ar2 .ar-eng-notes b{display:block;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:#7db8cc;margin-bottom:4px;font-weight:600;}

/* Confirm choice buttons */
#ar2 .ar-eng-choice{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
#ar2 .ar-eng-choice-btn{flex:1;min-width:180px;background:rgba(7,22,40,.55);border:1px solid rgba(0,180,216,.22);color:#cfe2eb;padding:12px 16px;border-radius:10px;font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.3px;cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
#ar2 .ar-eng-choice-btn:hover{background:rgba(0,180,216,.08);border-color:rgba(0,180,216,.4);}
#ar2 .ar-eng-choice-btn.on.green{background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.55);color:#4ade80;}
#ar2 .ar-eng-choice-btn.on.red{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.5);color:#fca5a5;}
#ar2 .ar-eng-choice-btn.on.amber{background:rgba(240,165,0,.18);border-color:rgba(240,165,0,.5);color:#f0a500;}

/* Fields */
#ar2 .ar-eng-field{margin:14px 0;}
#ar2 .ar-eng-field label{display:block;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:#7db8cc;font-weight:600;margin-bottom:6px;}
#ar2 .ar-eng-field .ar-eng-hint{text-transform:none;letter-spacing:0;color:var(--mu);font-size:11px;font-weight:400;}
#ar2 .ar-eng-field input[type=text],
#ar2 .ar-eng-field input[type=number],
#ar2 .ar-eng-field input[type=tel],
#ar2 .ar-eng-field textarea,
#ar2 .ar-eng-field select{width:100%;background:rgba(0,0,0,.25);border:1px solid rgba(0,180,216,.22);color:#fff;padding:10px 12px;border-radius:8px;font-family:inherit;font-size:13.5px;outline:none;transition:border-color .15s,box-shadow .15s;box-sizing:border-box;}
#ar2 .ar-eng-field input:focus,
#ar2 .ar-eng-field textarea:focus,
#ar2 .ar-eng-field select:focus{border-color:rgba(0,180,216,.6);box-shadow:0 0 0 3px rgba(0,180,216,.12);}
#ar2 .ar-eng-field textarea{resize:vertical;min-height:60px;font-family:inherit;}
#ar2 .ar-eng-inline{display:flex;gap:8px;align-items:center;}
#ar2 .ar-eng-inline input{flex:1;}
#ar2 .ar-eng-tiny{background:transparent;border:1px solid rgba(0,180,216,.3);color:#48cae4;font-family:inherit;font-size:11px;font-weight:600;padding:6px 10px;border-radius:6px;white-space:nowrap;cursor:pointer;transition:background .15s;}
#ar2 .ar-eng-tiny:hover{background:rgba(0,180,216,.1);color:#fff;}

/* Pool grid */
#ar2 .ar-eng-pool-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:18px;}
@media(min-width:768px){
  #ar2 .ar-eng-pool-grid{grid-template-columns:1fr 1fr;}
}
#ar2 .ar-eng-pool-card{background:rgba(13,45,74,.45);border:1px solid rgba(0,180,216,.18);border-radius:12px;padding:18px 18px 14px;position:relative;transition:border-color .2s;}
#ar2 .ar-eng-pool-card.complete{border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.04);}
#ar2 .ar-eng-pool-head{margin-bottom:8px;}
#ar2 .ar-eng-pool-name{font-size:15px;font-weight:600;color:#fff;}
#ar2 .ar-eng-pool-meta{font-size:11.5px;color:var(--mu);margin-top:2px;}
/* Status pill in the pool card head row. Was previously position:absolute
   (overlapped long pool names); now a normal flex item, pushed to the
   right with margin-left:auto. Two states: "Complete" (green) when
   verification + photo requirements pass, otherwise "Pending" (amber). */
#ar2 .ar-eng-pool-check{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;letter-spacing:.4px;padding:3px 8px;border-radius:99px;flex-shrink:0;margin-left:auto;white-space:nowrap;}
#ar2 .ar-eng-pool-check.complete{color:#4ade80;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.32);}
#ar2 .ar-eng-pool-check.pending{color:#f0a500;background:rgba(240,165,0,.1);border:1px solid rgba(240,165,0,.32);}
#ar2 .ar-eng-pool-check svg{width:11px;height:11px;}

/* Return-line stepper rows */
#ar2 .ar-eng-lines{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
#ar2 .ar-eng-line{display:flex;align-items:center;gap:8px;padding:6px;background:rgba(0,0,0,.18);border:1px solid rgba(0,180,216,.14);border-radius:8px;}
#ar2 .ar-eng-line-stepper{display:flex;align-items:center;gap:4px;}
#ar2 .ar-eng-line-step{width:30px;height:30px;border-radius:6px;background:rgba(0,180,216,.1);border:1px solid rgba(0,180,216,.2);color:#cfe2eb;font-family:inherit;font-size:16px;font-weight:600;cursor:pointer;transition:background .12s;display:flex;align-items:center;justify-content:center;}
#ar2 .ar-eng-line-step:hover{background:rgba(0,180,216,.22);color:#fff;}
#ar2 .ar-eng-line-count{min-width:24px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:14px;color:#fff;font-weight:600;}
#ar2 .ar-eng-line-dia{flex:1;background:rgba(0,0,0,.22);border:1px solid rgba(0,180,216,.2);color:#fff;padding:7px 10px;border-radius:6px;font-family:inherit;font-size:13px;outline:none;cursor:pointer;}
#ar2 .ar-eng-line-x{background:transparent;border:1px solid rgba(239,68,68,.25);color:#f87171;width:30px;height:30px;border-radius:6px;font-size:14px;line-height:1;cursor:pointer;transition:background .12s;display:flex;align-items:center;justify-content:center;}
#ar2 .ar-eng-line-x:hover{background:rgba(239,68,68,.18);color:#fca5a5;}
#ar2 .ar-eng-add-line{background:transparent;border:1px dashed rgba(0,180,216,.35);color:#48cae4;padding:8px 12px;border-radius:8px;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;margin-top:8px;width:100%;transition:border-color .15s,color .15s;}
#ar2 .ar-eng-add-line:hover{border-color:rgba(0,180,216,.6);color:#fff;}
#ar2 .ar-eng-empty-mini{font-size:12px;color:var(--mu);padding:8px;opacity:.7;}
#ar2 .ar-eng-media-placeholder{margin-top:12px;padding:10px;background:rgba(125,184,204,.06);border:1px dashed rgba(125,184,204,.2);border-radius:8px;font-size:11.5px;color:var(--mu);text-align:center;}

/* Apply Pool 1 toolbar (Phase 2 — fast-fill for identical pool decks) */
#ar2 .ar-eng-pool-toolbar{display:flex;justify-content:flex-end;margin-bottom:10px;}
#ar2 .ar-eng-pool-toolbar .ar-eng-tiny{font-size:11.5px;padding:6px 12px;}

/* Discrepancy soft-warning — surfaces when engineer's gallons differ
   from rep value by more than 5%. Inline note + required reason field. */
#ar2 .ar-eng-discrepancy{background:rgba(240,165,0,.1);border:1px solid rgba(240,165,0,.35);border-radius:8px;padding:10px 12px;margin-top:8px;}
#ar2 .ar-eng-discrepancy-title{font-size:12px;font-weight:600;color:#f0a500;margin-bottom:4px;}
#ar2 .ar-eng-discrepancy-body{font-size:11.5px;color:#cfe2eb;line-height:1.45;margin-bottom:8px;}
#ar2 .ar-eng-discrepancy textarea{width:100%;background:rgba(0,0,0,.2);border:1px solid rgba(240,165,0,.32);color:#fff;padding:8px 10px;border-radius:7px;font-family:inherit;font-size:12.5px;outline:none;resize:vertical;min-height:48px;box-sizing:border-box;}
#ar2 .ar-eng-discrepancy textarea:focus{border-color:#f0a500;box-shadow:0 0 0 3px rgba(240,165,0,.15);}

/* Media thumbnails + uploader buttons */
#ar2 .ar-eng-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;min-height:6px;}
#ar2 .ar-eng-thumb{position:relative;width:72px;height:72px;border-radius:8px;border:1px solid rgba(0,180,216,.22);background:rgba(0,0,0,.32);overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#7db8cc;font-size:24px;}
#ar2 .ar-eng-thumb-img{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;}
#ar2 .ar-eng-thumb.uploading{border-style:dashed;border-color:rgba(0,180,216,.45);background:rgba(0,180,216,.08);}
#ar2 .ar-eng-thumb-spin{position:absolute;bottom:6px;right:6px;width:14px;height:14px;border-radius:50%;border:2px solid rgba(0,180,216,.25);border-top-color:#48cae4;animation:ar-eng-spin 0.8s linear infinite;}
@keyframes ar-eng-spin{to{transform:rotate(360deg);}}
#ar2 .ar-eng-thumb-type{position:absolute;left:4px;bottom:4px;background:rgba(4,15,30,.7);color:#fff;font-size:11px;padding:1px 5px;border-radius:4px;}
#ar2 .ar-eng-thumb-x{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:rgba(4,15,30,.85);border:1px solid rgba(239,68,68,.4);color:#fca5a5;font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;padding:0;}
#ar2 .ar-eng-thumb:hover .ar-eng-thumb-x{opacity:1;}
#ar2 .ar-eng-thumb-x:hover{background:rgba(239,68,68,.4);color:#fff;}
#ar2 .ar-eng-media-actions{display:flex;gap:8px;flex-wrap:wrap;}
#ar2 .ar-eng-media-btn{flex:1;min-width:130px;background:rgba(0,180,216,.08);border:1px dashed rgba(0,180,216,.4);color:#48cae4;padding:10px 12px;border-radius:8px;font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.3px;cursor:pointer;transition:background .12s,color .12s,border-color .12s;}
#ar2 .ar-eng-media-btn:hover:not(.disabled){background:rgba(0,180,216,.18);color:#fff;border-color:rgba(0,180,216,.6);}
#ar2 .ar-eng-media-btn.disabled{opacity:.4;cursor:not-allowed;border-style:solid;}

/* Lightbox modal — full-size view of a thumbnail. */
/* Lightbox mounts on document.body (outside #ar2 root) so it can stay
   above all calculator chrome. Selectors are NOT #ar2-prefixed —
   prefixing would leave the lightbox invisible because the cascade
   never matches. */
.ar-eng-lightbox-backdrop{position:fixed;inset:0;background:rgba(4,15,30,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:9999990;display:flex;align-items:center;justify-content:center;padding:24px;font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;}
.ar-eng-lightbox-content{max-width:90vw;max-height:90vh;border-radius:10px;overflow:hidden;background:#000;box-shadow:0 20px 80px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;}
.ar-eng-lightbox-content img,
.ar-eng-lightbox-content video{max-width:90vw;max-height:90vh;display:block;}
.ar-eng-lightbox-close{position:fixed;top:18px;right:18px;background:rgba(7,22,40,.85);border:1px solid rgba(0,180,216,.4);color:#cfe2eb;width:42px;height:42px;border-radius:50%;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:9999991;}
.ar-eng-lightbox-close:hover{background:rgba(0,180,216,.2);border-color:rgba(0,180,216,.7);color:#fff;}

/* Action bar */
#ar2 .ar-eng-actions{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;margin-top:18px;}
#ar2 .ar-eng-btn{background:rgba(7,22,40,.55);border:1px solid rgba(0,180,216,.25);color:#cfe2eb;padding:12px 22px;border-radius:9px;font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.5px;cursor:pointer;transition:filter .12s,background .15s,border-color .15s;display:inline-flex;align-items:center;gap:7px;justify-content:center;}
#ar2 .ar-eng-btn:hover:not(:disabled){background:rgba(0,180,216,.08);border-color:rgba(0,180,216,.5);color:#fff;}
#ar2 .ar-eng-btn.primary{background:linear-gradient(135deg,#00b4d8,#48cae4);color:#040f1e;border-color:transparent;}
#ar2 .ar-eng-btn.primary:hover:not(:disabled){filter:brightness(1.08);background:linear-gradient(135deg,#00b4d8,#48cae4);}
#ar2 .ar-eng-btn:disabled{opacity:.5;cursor:not-allowed;}
#ar2 .ar-eng-btn.secondary:hover:not(:disabled){background:rgba(125,184,204,.08);}
/* Ghost-aqua: high-contrast outlined button used inside the help drawer
   and for the engineer-side PDF preview button. Replaces the low-contrast
   .secondary that disappeared into the drawer background. */
#ar2 .ar-eng-btn.ghost-aq,
.ar-eng-help-drawer-body .ar-eng-btn.ghost-aq{background:rgba(0,180,216,.14);border:1px solid rgba(0,180,216,.55);color:#48cae4;}
#ar2 .ar-eng-btn.ghost-aq:hover:not(:disabled),
.ar-eng-help-drawer-body .ar-eng-btn.ghost-aq:hover:not(:disabled){background:rgba(0,180,216,.24);border-color:rgba(0,180,216,.85);color:#fff;}

/* Engineer inline icons — replace OS emojis. Default to vertically
   centered with the button text. Currentcolor makes them inherit hover
   state styling automatically. */
.ar-eng-svg-icon{display:inline-block;vertical-align:-2px;flex-shrink:0;}
#ar2 .ar-eng-btn .ar-eng-svg-icon,
#ar2 .ar-eng-tiny .ar-eng-svg-icon{vertical-align:-1px;}

/* Step-2 access UI (Phase 7.1) — replaces the binary Confirm Access
   buttons. The "ok" row sits inline (badge + tiny report button); the
   "blocked" card opens when the engineer reports an issue. */
#ar2 .ar-eng-access-ok-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);border-radius:10px;padding:11px 14px;flex-wrap:wrap;}
#ar2 .ar-eng-access-ok-msg{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#4ade80;font-weight:600;}
#ar2 .ar-eng-access-blocked-card{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.32);border-radius:10px;padding:14px;}
#ar2 .ar-eng-access-blocked-hd{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:#fca5a5;margin-bottom:10px;letter-spacing:.3px;}
#ar2 .ar-eng-tiny.danger{border-color:rgba(239,68,68,.45);color:#fca5a5;}
#ar2 .ar-eng-tiny.danger:hover{background:rgba(239,68,68,.15);color:#fff;}

/* Pool-card "still missing" inline hint — surfaces which specific item
   is blocking the Complete state so the engineer can act without
   guessing. Amber to match the "warn" color family. */
#ar2 .ar-eng-pool-missing{display:flex;align-items:center;gap:7px;background:rgba(240,165,0,.08);border:1px solid rgba(240,165,0,.32);color:#f0a500;font-size:11.5px;border-radius:8px;padding:7px 11px;margin-top:12px;line-height:1.45;}
#ar2 .ar-eng-hint.required{color:#f0a500;}

/* Pre-fill tag — appears beside field labels (Water type, Return lines)
   when the value was seeded from the rep's assessment. Subtle cue that
   the engineer should confirm or edit, not enter from scratch. */
#ar2 .ar-eng-prefilled-tag{display:inline-block;font-size:9.5px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:#48cae4;background:rgba(0,180,216,.12);border:1px solid rgba(0,180,216,.34);padding:1px 7px;border-radius:99px;margin-left:6px;vertical-align:1px;}

/* Pools section wrapper — explicit visual break between the Pump
   Rooms section above and the Pools work area below. Adds its own
   eyebrow + lede so engineers can't conflate the two asks. */
#ar2 .ar-eng-pools-section{margin-top:8px;padding-top:18px;border-top:1px dashed rgba(0,180,216,.25);}
#ar2 .ar-eng-pools-section > .ar-eng-section-hd{margin-bottom:16px;}
#ar2 .ar-eng-pools-section .ar-eng-section-eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#48cae4;font-weight:600;margin-bottom:4px;}
#ar2 .ar-eng-pools-section .ar-eng-section-sub{font-size:12.5px;color:var(--mu);line-height:1.55;max-width:680px;}

/* Property-wide notes (bottom of Step 3 / Pool profiles). Visually
   parallels the .ar-eng-pump-rooms-section / .ar-eng-pools-section
   blocks so the engineer reads the page as three distinct buckets:
   pump rooms → pools → property-level notes. */
#ar2 .ar-eng-prop-notes-section{margin-top:22px;padding:18px 18px 18px;background:rgba(0,180,216,.04);border:1px solid rgba(0,180,216,.18);border-radius:14px;}
#ar2 .ar-eng-prop-notes-section > .ar-eng-section-hd{margin-bottom:12px;}
#ar2 .ar-eng-prop-notes-section .ar-eng-section-eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#48cae4;font-weight:600;margin-bottom:4px;}
#ar2 .ar-eng-prop-notes-section .ar-eng-section-sub{font-size:12.5px;color:var(--mu);line-height:1.55;max-width:680px;}
#ar2 .ar-eng-prop-notes-input{width:100%;background:rgba(7,22,40,.5);border:1px solid rgba(0,180,216,.22);color:#cfe2eb;border-radius:10px;padding:11px 13px;font-family:'DM Sans',sans-serif;font-size:13px;line-height:1.55;resize:vertical;min-height:96px;transition:border-color .12s,background .12s,box-shadow .12s;}
#ar2 .ar-eng-prop-notes-input:focus{outline:none;border-color:rgba(0,180,216,.65);background:rgba(0,180,216,.08);box-shadow:0 0 0 3px rgba(0,180,216,.14);}
#ar2 .ar-eng-prop-notes-input::placeholder{color:rgba(125,184,204,.7);}

/* Compact return-line media block — replaces the bulky cyan callout.
   Single header row holds label + Required/Captured pill + tally + ?
   help chip. Thumbs render in their own row (hidden when empty).
   Buttons sit beside each other. Everything fits in ~120px height. */
#ar2 .ar-eng-return-media-field .ar-eng-return-media-hd{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:6px;}
#ar2 .ar-eng-return-media-field .ar-eng-return-media-hd > label{margin:0;}
#ar2 .ar-eng-media-tally{font-size:10.5px;color:var(--mu);letter-spacing:.3px;font-family:'JetBrains Mono',monospace;margin-left:auto;}
#ar2 .ar-eng-mini-help{width:18px;height:18px;border-radius:50%;background:rgba(0,180,216,.12);border:1px solid rgba(0,180,216,.4);color:#48cae4;font-size:10px;font-weight:700;line-height:1;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;}
#ar2 .ar-eng-mini-help:hover{background:rgba(0,180,216,.24);color:#fff;}

/* Smaller variant of the existing engineer status pills — used inline
   beside labels (Required / Captured). */
#ar2 .ar-eng-pill.sm{padding:2px 7px;font-size:9.5px;letter-spacing:.6px;display:inline-flex;align-items:center;gap:3px;}
#ar2 .ar-eng-pill.sm .ar-eng-svg-icon{width:10px;height:10px;}

/* Step-4 PDF row — outline button + helper hint paired side-by-side. */
#ar2 .ar-eng-pdf-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px;}
#ar2 .ar-eng-pdf-hint{font-size:11.5px;color:var(--mu);line-height:1.4;flex:1 1 200px;}

/* Step-4 "already sent" banner. Soft success tint with reinforcing
   message that re-edit + re-send is normal/expected. */
#ar2 .ar-eng-sent-banner{display:flex;align-items:flex-start;gap:8px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.35);color:#cfe2eb;font-size:12.5px;line-height:1.5;padding:11px 14px;border-radius:10px;margin:10px 0 14px;}
#ar2 .ar-eng-sent-banner b{color:#4ade80;font-weight:700;}
#ar2 .ar-eng-sent-banner .ar-eng-svg-icon{color:#4ade80;flex-shrink:0;margin-top:1px;}

/* Engineer help button — match the calculator header's .ar-help-icon
   (32x32 circle with aqua tint). Overrides the older 28x28 ? style. */
#ar2 .ar-eng-help-btn.ar-help-icon{width:32px;height:32px;font-size:16px;background:rgba(0,180,216,.1);border:1px solid rgba(0,180,216,.35);color:var(--t);}
#ar2 .ar-eng-help-btn.ar-help-icon:hover{background:rgba(0,180,216,.22);border-color:rgba(0,180,216,.7);color:#fff;}

/* Admin Review Mode — compact pill in the engineer-portal header.
   Replaces the old verbose 2-line banner with a tight aqua chip that
   reads "ADMIN REVIEW MODE" + a tappable info icon. The full
   "what's editable / how to finish" copy moves into a small popover
   that opens on the info-icon tap, so the chrome stays uncluttered. */
#ar2 .ar-eng-admin-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;border-radius:99px;background:rgba(0,180,216,.18);border:1px solid rgba(0,180,216,.55);color:#48cae4;font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;line-height:1;margin-bottom:10px;align-self:flex-start;}
#ar2 .ar-eng-admin-chip svg{width:13px;height:13px;color:#48cae4;flex-shrink:0;}
#ar2 .ar-eng-admin-chip-info{background:transparent;border:none;color:inherit;width:16px;height:16px;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;margin-left:2px;opacity:.7;transition:opacity .12s,background .12s;}
#ar2 .ar-eng-admin-chip-info:hover{opacity:1;background:rgba(0,180,216,.25);}
#ar2 .ar-eng-admin-chip-info svg{width:11px;height:11px;}
/* Legacy .ar-eng-admin-banner — kept for the rare "engineer-submit
   succeeded but admin notification fan-out failed" warning at runtime
   (see _engineerSubmit handler). Same shape as the old aqua banner. */
#ar2 .ar-eng-admin-banner{display:flex;align-items:flex-start;gap:9px;background:rgba(0,180,216,.1);border:1px solid rgba(0,180,216,.42);color:#cfe2eb;font-size:12.5px;line-height:1.5;padding:10px 14px;border-radius:9px;margin:10px 0 4px;}
#ar2 .ar-eng-admin-banner b{color:#48cae4;font-weight:700;}

/* Outline variant of the modal primary button for "Review in Portal" —
   primary intent but visually softer than the destructive Lock or
   confirming Mark Reviewed actions sitting beside it. */
#ar2 .ar-pf-modal-btn.primary.outline{background:transparent;border:1px solid rgba(0,180,216,.55);color:#48cae4;}
#ar2 .ar-pf-modal-btn.primary.outline:hover{background:rgba(0,180,216,.14);color:#fff;border-color:rgba(0,180,216,.85);}

/* ──────── Ship #3 — Engineer portal additions ──────── */

/* Defensive: when the engineer mode is active, hide the calculator's
   three-column main layout AND the Pool Measure mount even if showView
   has somehow left them visible. Catches a class of "image leaking
   below the footer" bugs where a body-image preview was rendering. */
body.pf-engineer-mode #ar2 #ar2-main-layout,
body.pf-engineer-mode #ap2{display:none!important;}

/* Reference image attached to the pool card. Click opens lightbox. */
#ar2 .ar-eng-pool-image{position:relative;width:100%;border-radius:8px;overflow:hidden;border:1px solid rgba(0,180,216,.32);background:rgba(7,22,40,.65);cursor:zoom-in;margin:6px 0 12px;}
#ar2 .ar-eng-pool-image img{display:block;width:100%;max-height:220px;object-fit:cover;}
#ar2 .ar-eng-pool-image:hover{border-color:rgba(0,180,216,.6);}
#ar2 .ar-eng-pool-image-tag{position:absolute;top:8px;left:8px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:#040f1e;background:rgba(72,202,228,.92);padding:3px 8px;border-radius:99px;}
#ar2 .ar-eng-pool-image-stub{font-size:11.5px;color:#7db8cc;background:rgba(7,22,40,.4);border:1px dashed rgba(125,184,204,.3);border-radius:8px;padding:8px 12px;margin:6px 0 12px;display:inline-flex;align-items:center;gap:6px;}
#ar2 .ar-eng-pool-image-stub svg{opacity:.7;}

/* Pool name input — editable inline. Engineer override replaces the
   rep-supplied label without mutating the assessment. */
/* Editable pool-name label. The pencil icon sits inside the input
   wrapper so it acts as the visual "tap to edit" affordance. The
   <label> wrap means a click anywhere on the chip — including the
   pencil — focuses the input. */
#ar2 .ar-eng-pool-name-edit{flex:1;display:inline-flex;align-items:center;gap:6px;padding:3px 10px;background:rgba(0,180,216,.05);border:1px solid rgba(0,180,216,.22);border-radius:8px;min-width:0;cursor:text;transition:background .12s,border-color .12s;}
#ar2 .ar-eng-pool-name-edit:hover{background:rgba(0,180,216,.1);border-color:rgba(0,180,216,.45);}
#ar2 .ar-eng-pool-name-edit:focus-within{background:rgba(0,180,216,.12);border-color:rgba(0,180,216,.7);box-shadow:0 0 0 3px rgba(0,180,216,.12);}
#ar2 .ar-eng-pool-name-input{flex:1;background:transparent;border:none;color:#fff;font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:1.5px;padding:2px 0;outline:none;min-width:0;}
#ar2 .ar-eng-pool-name-input::placeholder{color:rgba(125,184,204,.45);}
#ar2 .ar-eng-pool-name-input:disabled{opacity:.55;cursor:not-allowed;}
#ar2 .ar-eng-pool-name-edit-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(0,180,216,.12);color:#48cae4;flex-shrink:0;transition:background .12s,color .12s;}
#ar2 .ar-eng-pool-name-edit:hover .ar-eng-pool-name-edit-icon{background:rgba(0,180,216,.25);color:#fff;}
#ar2 .ar-eng-pool-name-edit:focus-within .ar-eng-pool-name-edit-icon{background:linear-gradient(135deg,#00b4d8,#48cae4);color:#040f1e;}
/* Locked card disables the pencil affordance visually. */
#ar2 .ar-eng-pool-card.locked .ar-eng-pool-name-edit{opacity:.55;pointer-events:none;}
#ar2 .ar-eng-pool-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px;}
#ar2 .ar-eng-pool-head .ar-eng-pool-meta{flex-basis:100%;}
#ar2 .ar-eng-pool-head .ar-eng-thumb-x{position:static;width:26px;height:26px;flex-shrink:0;}
#ar2 .ar-eng-pool-added-pill{font-size:9.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#4ade80;background:rgba(34,197,94,.16);border:1px solid rgba(34,197,94,.4);padding:2px 8px;border-radius:99px;}

/* Locked-card overlay state — pool cards disable until pump rooms get
   at least one piece of media. Inputs are :disabled; the card itself
   gets a soft fade + a yellow tinted border. */
#ar2 .ar-eng-pool-card.locked{opacity:.78;background:rgba(13,45,74,.32);}
#ar2 .ar-eng-pools-locked{display:flex;align-items:flex-start;gap:9px;background:rgba(240,165,0,.1);border:1px solid rgba(240,165,0,.42);color:#cfe2eb;font-size:12.5px;line-height:1.55;padding:11px 14px;border-radius:9px;margin:10px 0 14px;}
#ar2 .ar-eng-pools-locked b{color:#f0a500;font-weight:700;}
#ar2 .ar-eng-pools-locked .ar-eng-svg-icon{color:#f0a500;flex-shrink:0;margin-top:2px;}

/* + Add Pool button + hint below the grid. */
#ar2 .ar-eng-pool-add-row{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap;}
#ar2 .ar-eng-add-pool{background:transparent;border:1px dashed rgba(0,180,216,.42);color:#48cae4;font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.4px;padding:10px 18px;border-radius:9px;cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
#ar2 .ar-eng-add-pool:hover{background:rgba(0,180,216,.1);border-color:rgba(0,180,216,.7);color:#fff;}
#ar2 .ar-eng-pool-add-hint{font-size:11.5px;color:var(--mu);flex:1 1 220px;}

/* GREEN Send button — primary intent flips from cyan to green on the
   final review step so the engineer can spot it as the success action.
   Disabled state keeps the cyan-muted treatment so it doesn't look
   broken before all requirements are met. */
#ar2 .ar-eng-btn.primary.send-green{background:linear-gradient(135deg,#16a34a,#22c55e);color:#04210d;border-color:transparent;}
#ar2 .ar-eng-btn.primary.send-green:hover:not(:disabled){filter:brightness(1.08);}
#ar2 .ar-eng-btn.primary.send-green:disabled{background:linear-gradient(135deg,rgba(34,197,94,.32),rgba(22,163,74,.32));color:rgba(255,255,255,.72);}

/* Engineer-verified badge on the rep's pool body card. Sits beside
   the pool name input. Click opens the Engineer Submission Review
   modal (admin only — data-action routes through admin-review-submission
   which checks isAdmin() before opening). */
#ar2 .ar-body-eng-verified{display:inline-flex;align-items:center;gap:4px;background:rgba(34,197,94,.16);border:1px solid rgba(34,197,94,.5);color:#4ade80;padding:3px 8px;border-radius:99px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:background .15s,color .15s;}
#ar2 .ar-body-eng-verified:hover{background:rgba(34,197,94,.28);color:#fff;}
#ar2 .ar-body-eng-verified svg{flex-shrink:0;}
#ar2 .ar-body-eng-verified-lbl{line-height:1;}
#ar2 .ar-body-card.eng-verified{border-color:rgba(34,197,94,.35);}

/* Pool Water-type dropdown inside the engineer pool card. */
#ar2 .ar-eng-pool-type-select{width:100%;background:rgba(7,22,40,.55);border:1px solid rgba(0,180,216,.28);color:#fff;padding:9px 12px;border-radius:7px;font-family:inherit;font-size:13px;outline:none;cursor:pointer;}
#ar2 .ar-eng-pool-type-select:focus{border-color:rgba(0,180,216,.65);}
#ar2 .ar-eng-pool-type-select:disabled{opacity:.55;cursor:not-allowed;}

/* Engineer Submissions search input — paired with the filter chips. */
#ar2 .ar-admin-eng-search-wrap{flex:1 1 220px;min-width:160px;max-width:320px;display:flex;align-items:center;}
#ar2 .ar-admin-eng-search{width:100%;background:rgba(7,22,40,.55);border:1px solid rgba(0,180,216,.25);color:#fff;padding:5px 12px;border-radius:99px;font-family:inherit;font-size:11.5px;outline:none;transition:border-color .12s;}
#ar2 .ar-admin-eng-search:focus{border-color:rgba(0,180,216,.65);}
#ar2 .ar-admin-eng-search::placeholder{color:rgba(125,184,204,.55);}

/* Engineer report — pump-room pool-list chip styling. Mirrors the
   per-pool return-line chip family but matches the print color palette
   (light bg so it reads on the white PDF page). */
#ar2-report .rpt-eng-line-chip{display:inline-block;padding:2px 8px;border-radius:4px;background:#e6f4f9;border:1px solid #b8dbe6;color:#0a2540;font-family:'JetBrains Mono',monospace;font-size:11px;margin-right:4px;}

/* The previous .ar-eng-report-preview-* overlay is retired in favor of
   the calculator-style hide-body + fixed-toolbar pattern. The toolbar
   itself is built inline (#ar2-eng-preview-toolbar) so no class hook
   is required here. */

/* ───────── Pump Rooms (Ship #2) ─────────
   Section lives at the top of Step 3, above the pool grid. Each card
   captures a pump-room ID + walkthrough video + supporting photos.
   Pool cards reference these via the per-pool Pump Room dropdown. */
#ar2 .ar-eng-pump-rooms-section{margin-bottom:22px;padding:18px 18px 16px;background:rgba(0,180,216,.05);border:1px solid rgba(0,180,216,.22);border-radius:14px;}
#ar2 .ar-eng-pump-rooms-section .ar-eng-section-hd{margin-bottom:14px;}
#ar2 .ar-eng-pump-rooms-section .ar-eng-section-eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#48cae4;font-weight:600;margin-bottom:4px;}
#ar2 .ar-eng-pump-rooms-section .ar-eng-section-sub{font-size:12.5px;color:var(--mu);line-height:1.55;max-width:680px;}
#ar2 .ar-eng-pump-room-empty{font-size:12.5px;color:var(--mu);background:rgba(7,22,40,.4);border:1px dashed rgba(0,180,216,.22);border-radius:10px;padding:14px 16px;margin-bottom:12px;line-height:1.5;}
#ar2 .ar-eng-pump-room-empty b{color:#48cae4;font-weight:600;}

#ar2 .ar-eng-pump-room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:12px;}

#ar2 .ar-eng-pump-room-card{background:rgba(13,45,74,.65);border:1px solid rgba(0,180,216,.28);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;}
#ar2 .ar-eng-pump-room-head{display:flex;align-items:center;gap:8px;}
#ar2 .ar-eng-pump-room-label{flex:1;background:transparent;border:none;color:#fff;font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:1.5px;padding:4px 6px;border-radius:5px;outline:none;min-width:0;}
#ar2 .ar-eng-pump-room-label:hover,#ar2 .ar-eng-pump-room-label:focus{background:rgba(0,180,216,.08);}
#ar2 .ar-eng-pump-room-card .ar-eng-thumb-x{position:static;width:24px;height:24px;flex-shrink:0;}

/* Walkthrough video tile — full-width inside the card. Three states:
   empty (click to record), uploading (spinner), has-video (click to view). */
#ar2 .ar-eng-pump-room-video{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;min-height:100px;border-radius:9px;border:1px solid rgba(0,180,216,.32);background:rgba(7,22,40,.55);color:#cfe2eb;font-family:inherit;cursor:pointer;padding:14px;text-align:center;transition:background .15s,border-color .15s;position:relative;}
#ar2 .ar-eng-pump-room-video:hover{background:rgba(0,180,216,.12);border-color:rgba(0,180,216,.6);color:#fff;}
#ar2 .ar-eng-pump-room-video.empty{border-style:dashed;color:#48cae4;}
#ar2 .ar-eng-pump-room-video.empty:hover{color:#fff;}
#ar2 .ar-eng-pump-room-video.has-video{background:linear-gradient(135deg,rgba(34,197,94,.16),rgba(34,197,94,.06));border-color:rgba(34,197,94,.45);color:#4ade80;}
#ar2 .ar-eng-pump-room-video.has-video:hover{background:linear-gradient(135deg,rgba(34,197,94,.24),rgba(34,197,94,.1));color:#fff;}
#ar2 .ar-eng-pump-room-video.uploading{opacity:.85;color:#48cae4;cursor:default;}
#ar2 .ar-eng-pump-room-video-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);}
#ar2 .ar-eng-pump-room-video-icon svg{width:18px;height:18px;}
#ar2 .ar-eng-pump-room-video-msg{font-size:11.5px;font-weight:600;letter-spacing:.4px;line-height:1.3;}
#ar2 .ar-eng-pump-room-video .ar-eng-thumb-x{position:absolute;top:6px;right:6px;}

#ar2 .ar-eng-pump-room-photos{display:flex;flex-direction:column;gap:6px;}
#ar2 .ar-eng-pump-room-photos-lbl{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:#7db8cc;font-weight:600;}
#ar2 .ar-eng-pump-room-photos .ar-eng-thumbs{display:flex;flex-wrap:wrap;gap:6px;}
#ar2 .ar-eng-pump-room-photos .ar-eng-media-btn{align-self:flex-start;font-size:11.5px;padding:6px 10px;}
#ar2 .ar-eng-pump-room-foot{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--mu);padding-top:6px;border-top:1px solid rgba(0,180,216,.12);}
#ar2 .ar-eng-pump-room-stat{letter-spacing:.4px;}

/* Inline draft entry — Add Pump Room → input + Save/Cancel. */
#ar2 .ar-eng-pump-room-draft{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;background:rgba(0,180,216,.08);border:1px solid rgba(0,180,216,.38);border-radius:10px;margin-bottom:10px;}
#ar2 .ar-eng-pump-room-input{flex:1;min-width:180px;background:rgba(7,22,40,.7);border:1px solid rgba(0,180,216,.35);color:#fff;font-family:inherit;font-size:13px;padding:8px 12px;border-radius:7px;outline:none;}
#ar2 .ar-eng-pump-room-input:focus{border-color:rgba(0,180,216,.7);}
#ar2 .ar-eng-tiny.ghost{background:transparent;border-color:rgba(125,184,204,.3);color:#cfe2eb;}
#ar2 .ar-eng-tiny.ghost:hover{border-color:rgba(125,184,204,.6);}
#ar2 .ar-eng-add-pump-room{background:transparent;border:1px dashed rgba(0,180,216,.45);color:#48cae4;font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.4px;padding:10px 16px;border-radius:9px;cursor:pointer;width:100%;transition:background .15s,border-color .15s,color .15s;}
#ar2 .ar-eng-add-pump-room:hover{background:rgba(0,180,216,.1);border-color:rgba(0,180,216,.7);color:#fff;}

/* Per-pool pump room linkage dropdown. */
#ar2 .ar-eng-pump-room-select{width:100%;background:rgba(7,22,40,.55);border:1px solid rgba(0,180,216,.28);color:#fff;padding:9px 12px;border-radius:7px;font-family:inherit;font-size:13px;outline:none;cursor:pointer;}
#ar2 .ar-eng-pump-room-select:focus{border-color:rgba(0,180,216,.65);}

/* Review summary */
#ar2 .ar-eng-summary{background:rgba(0,0,0,.18);border:1px solid rgba(0,180,216,.12);border-radius:10px;padding:14px 16px;margin:14px 0 18px;}
#ar2 .ar-eng-summary-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid rgba(0,180,216,.08);font-size:13px;}
#ar2 .ar-eng-summary-row:last-child{border-bottom:none;}
#ar2 .ar-eng-warn{background:rgba(240,165,0,.1);border:1px solid rgba(240,165,0,.32);color:#f0a500;padding:10px 14px;border-radius:8px;font-size:12.5px;margin-bottom:12px;}

/* Step 4 — Review & Send polish. Builds on the .ar-admin-review-*
   patterns so all three views (admin Submission Review modal, eng
   Step 2 Property Review, eng Step 4 Final Review) share the same
   visual grammar. */
/* Per-pool readiness checklist — one row per pool showing ready /
   missing-items in a glance. Clickable rows scroll back to the pool
   card on Step 3 (data-action="ar-eng-goto-pool"). */
#ar2 .ar-eng-readiness{background:rgba(7,22,40,.4);border:1px solid rgba(0,180,216,.18);border-radius:10px;padding:6px 0;margin:14px 0 18px;}
#ar2 .ar-eng-readiness-hd{padding:10px 16px 8px;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#7db8cc;font-weight:700;display:flex;justify-content:space-between;border-bottom:1px solid rgba(0,180,216,.14);}
#ar2 .ar-eng-readiness-hd b{color:#fff;font-weight:600;letter-spacing:.4px;font-size:11px;text-transform:none;}
#ar2 .ar-eng-readiness-row{display:flex;align-items:center;gap:12px;padding:9px 16px;border-bottom:1px solid rgba(0,180,216,.06);font-size:12.5px;color:#cfe2eb;transition:background .12s;cursor:pointer;}
#ar2 .ar-eng-readiness-row:last-child{border-bottom:none;}
#ar2 .ar-eng-readiness-row:hover{background:rgba(0,180,216,.05);}
#ar2 .ar-eng-readiness-row .ar-eng-readiness-name{flex:1;min-width:0;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#ar2 .ar-eng-readiness-row .ar-eng-readiness-missing{flex:2 1 auto;min-width:0;color:#f0a500;font-size:11.5px;font-style:italic;}
#ar2 .ar-eng-readiness-row.complete .ar-eng-readiness-missing{color:#4ade80;font-style:normal;}
#ar2 .ar-eng-readiness-row .ar-eng-readiness-flag{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;}
#ar2 .ar-eng-readiness-row.complete .ar-eng-readiness-flag{background:rgba(34,197,94,.18);border:1px solid rgba(34,197,94,.5);color:#4ade80;}
#ar2 .ar-eng-readiness-row:not(.complete) .ar-eng-readiness-flag{background:rgba(240,165,0,.18);border:1px solid rgba(240,165,0,.5);color:#f0a500;}
#ar2 .ar-eng-readiness-row .ar-eng-readiness-chev{color:#7db8cc;font-size:14px;flex-shrink:0;}

/* General notes preview — read-only display of engineer_property_notes
   (entered on Step 3) so the engineer can review what they wrote
   before sending. */
#ar2 .ar-eng-final-notes{background:rgba(0,180,216,.06);border:1px solid rgba(0,180,216,.22);border-radius:10px;padding:12px 14px;margin:0 0 14px;}
#ar2 .ar-eng-final-notes-hd{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#48cae4;font-weight:700;margin-bottom:6px;}
#ar2 .ar-eng-final-notes-body{font-size:12.5px;color:#cfe2eb;line-height:1.6;white-space:pre-wrap;}

/* Send section — large primary CTA with prominent send button + small
   secondary text. Replaces the cramped single-line submit button. */
#ar2 .ar-eng-send-card{background:linear-gradient(135deg,rgba(0,180,216,.1),rgba(72,202,228,.04));border:1px solid rgba(0,180,216,.35);border-radius:12px;padding:18px 20px;margin:18px 0 6px;}
#ar2 .ar-eng-send-card.ready{background:linear-gradient(135deg,rgba(34,197,94,.12),rgba(34,197,94,.04));border-color:rgba(34,197,94,.45);}
#ar2 .ar-eng-send-card.locked{background:linear-gradient(135deg,rgba(125,184,204,.08),rgba(125,184,204,.02));border-color:rgba(125,184,204,.32);}
#ar2 .ar-eng-send-card-title{font-family:'Bebas Neue',sans-serif;font-size:17px;letter-spacing:1.5px;color:#fff;margin-bottom:4px;}
#ar2 .ar-eng-send-card-sub{font-size:12.5px;color:var(--mu);line-height:1.5;margin-bottom:14px;}
#ar2 .ar-eng-send-card .ar-eng-btn.send-green{width:100%;font-size:14px;padding:14px 22px;background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;font-weight:700;letter-spacing:.6px;}
#ar2 .ar-eng-send-card .ar-eng-btn.send-green:hover:not(:disabled){filter:brightness(1.1);}
#ar2 .ar-eng-send-card .ar-eng-btn.send-green:disabled{background:rgba(125,184,204,.18);color:#7db8cc;cursor:not-allowed;}

/* ── Custom camera overlay (getUserMedia-backed) ──────────────────
   iOS WebKit's <input capture> launches the native camera UI but
   frequently fails to attach a live stream — preview stays black.
   Same issue inside iOS PWA standalone mode. Custom camera built
   on getUserMedia() is bulletproof: we own the <video> element,
   own the permission grant, and produce a JPEG blob the same way
   the existing uploadMedia(file) call expects. Lives outside #ar2
   because the overlay covers the entire viewport. */
.ar-eng-cam{position:fixed;inset:0;z-index:1000000;background:#000;display:flex;flex-direction:column;font-family:'DM Sans',sans-serif;}
.ar-eng-cam-stage{flex:1 1 0;min-height:0;position:relative;background:#000;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.ar-eng-cam-stage video,
.ar-eng-cam-stage img{width:100%;height:100%;object-fit:cover;background:#000;}
.ar-eng-cam-stage video{transform:scaleX(1);}
/* Front-camera selfie mirror */
.ar-eng-cam-stage video.front{transform:scaleX(-1);}
.ar-eng-cam-msg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;color:#fff;text-align:center;font-size:14px;line-height:1.55;background:rgba(0,0,0,.7);}
.ar-eng-cam-msg b{display:block;font-size:18px;margin-bottom:10px;letter-spacing:.5px;font-weight:700;}
.ar-eng-cam-msg-sub{font-size:13px;color:#cfe2eb;max-width:340px;margin-bottom:18px;}
.ar-eng-cam-msg .ar-eng-cam-fallback{background:rgba(0,180,216,.22);border:1px solid rgba(0,180,216,.55);color:#cfe2eb;padding:11px 22px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;letter-spacing:.4px;}
.ar-eng-cam-msg .ar-eng-cam-fallback:hover{background:rgba(0,180,216,.35);color:#fff;}

/* Top bar — close X */
.ar-eng-cam-top{position:absolute;top:0;left:0;right:0;padding:16px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0));z-index:5;}
.ar-eng-cam-close{background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25);color:#fff;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;line-height:1;}
.ar-eng-cam-flip{background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25);color:#fff;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.ar-eng-cam-flip svg{width:20px;height:20px;}

/* Bottom action bar — capture shutter + library fallback */
.ar-eng-cam-bottom{flex:0 0 auto;background:#000;padding:18px 24px calc(18px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;}
.ar-eng-cam-pick{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;padding:9px 14px;border-radius:8px;font-family:inherit;font-size:12.5px;cursor:pointer;font-weight:500;}
.ar-eng-cam-pick:hover{background:rgba(255,255,255,.08);}
.ar-eng-cam-shutter{width:74px;height:74px;border-radius:50%;background:#fff;border:5px solid rgba(255,255,255,.5);cursor:pointer;padding:0;flex-shrink:0;transition:transform .1s;}
.ar-eng-cam-shutter:active{transform:scale(.92);}
.ar-eng-cam-shutter:disabled{background:rgba(255,255,255,.4);cursor:not-allowed;}
.ar-eng-cam-side{min-width:96px;display:flex;justify-content:flex-end;}
.ar-eng-cam-side .ar-eng-cam-pick{padding-left:10px;padding-right:10px;}

/* Review state — show captured photo with retake / use buttons */
.ar-eng-cam.is-review .ar-eng-cam-shutter{display:none;}
.ar-eng-cam-review-actions{display:flex;gap:10px;flex:1;justify-content:center;}
.ar-eng-cam-retake,.ar-eng-cam-use{padding:11px 20px;border-radius:8px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;letter-spacing:.3px;}
.ar-eng-cam-retake{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;}
.ar-eng-cam-retake:hover{background:rgba(255,255,255,.08);}
.ar-eng-cam-use{background:linear-gradient(135deg,#16a34a,#22c55e);border:none;color:#fff;}
.ar-eng-cam-use:hover{filter:brightness(1.08);}
.ar-eng-cam-use:disabled{background:rgba(125,184,204,.18);color:#7db8cc;cursor:not-allowed;}

#ar2 .ar-eng-signout-btn{background:transparent;border:1px solid rgba(125,184,204,.25);color:var(--mu);padding:8px 18px;border-radius:8px;font-family:inherit;font-size:12px;letter-spacing:.5px;cursor:pointer;transition:border-color .15s,color .15s;}
#ar2 .ar-eng-signout-btn:hover{border-color:rgba(125,184,204,.5);color:#cfe2eb;}
@media(max-width:640px){
  #ar2 .ar-eng-wrap{padding:24px 16px 60px;}
  #ar2 .ar-eng-title{font-size:28px;}
  #ar2 .ar-eng-row{padding:14px 14px;}
}
/* Tab strip — sits at the top of the archive wrap when AR2_PF is enabled.
   No horizontal padding here because the wrap above already centers content. */
#ar2 .ar-pf-tabstrip{display:flex;gap:2px;background:linear-gradient(180deg,rgba(13,45,74,.5),rgba(7,22,40,.3));border-bottom:1px solid rgba(0,180,216,.18);}
#ar2 .ar-pf-tab{position:relative;background:transparent;border:none;color:#7db8cc;font-family:inherit;font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:14px 18px 12px;cursor:pointer;transition:color .15s;border-radius:0;}
#ar2 .ar-pf-tab:hover{color:#cfe2eb;}
#ar2 .ar-pf-tab.active{color:var(--t);}
#ar2 .ar-pf-tab.active::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--t),var(--aq));border-radius:1px;}
#ar2 .ar-pf-tab-count{display:inline-block;margin-left:6px;padding:1px 7px;background:rgba(0,180,216,.16);color:var(--t);border-radius:9px;font-size:10px;letter-spacing:.5px;font-weight:700;}
#ar2 .ar-pf-tab.active .ar-pf-tab-count{background:rgba(0,180,216,.28);color:#fff;}

/* Portfolio panel container — holds either the empty state or the roster.
   Bottom padding mirrors the Single Assessments view (.ar-bank-wrap's 60px)
   so both tabs visually rest the same distance above the page edge. */
#ar2 .ar-pf-panel{padding:18px 0 60px;}
#ar2 .ar-pf-panel-hero{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:14px;flex-wrap:wrap;}
#ar2 .ar-pf-panel-title{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:3px;color:#fff;}
#ar2 .ar-pf-panel-sub{font-size:11.5px;color:var(--mu);letter-spacing:1px;text-transform:uppercase;margin-top:2px;}

/* CTA: New Portfolio */
#ar2 .ar-pf-newbtn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:8px;border:1px solid rgba(0,180,216,.32);background:linear-gradient(135deg,rgba(0,180,216,.18),rgba(72,202,228,.12));color:var(--t);font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.5px;cursor:pointer;transition:filter .18s,background .18s;}
#ar2 .ar-pf-newbtn:hover{filter:brightness(1.15);background:linear-gradient(135deg,rgba(0,180,216,.28),rgba(72,202,228,.18));}
#ar2 .ar-pf-newbtn::before{content:"+";font-size:18px;line-height:1;font-weight:400;}

/* Empty state — shown when user has no portfolios yet */
#ar2 .ar-pf-empty{padding:48px 24px;text-align:center;border:1px dashed rgba(0,180,216,.22);border-radius:14px;background:rgba(13,45,74,.32);}
#ar2 .ar-pf-empty-icon{width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,rgba(0,180,216,.18),rgba(72,202,228,.1));display:inline-flex;align-items:center;justify-content:center;color:var(--t);font-size:26px;margin-bottom:16px;border:1px solid rgba(0,180,216,.28);}
#ar2 .ar-pf-empty-title{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2.5px;color:#fff;margin-bottom:8px;}
#ar2 .ar-pf-empty-body{font-size:13px;color:var(--mu);line-height:1.65;max-width:480px;margin:0 auto 22px;}

/* Portfolio list row (Phase 1 — simple list; Phase 2 = full roster grid) */
#ar2 .ar-pf-list{display:flex;flex-direction:column;gap:10px;}
#ar2 .ar-pf-row{display:grid;grid-template-columns:1fr auto auto auto;gap:14px;align-items:center;padding:14px 18px;background:rgba(13,45,74,.42);border:1px solid rgba(0,180,216,.14);border-radius:11px;cursor:pointer;transition:background .15s,border-color .15s,transform .12s;}
#ar2 .ar-pf-row:hover{background:rgba(0,180,216,.07);border-color:rgba(0,180,216,.32);transform:translateY(-1px);}
#ar2 .ar-pf-row-name{font-family:'DM Sans',sans-serif;font-size:14.5px;font-weight:600;color:#e0f4fa;}
#ar2 .ar-pf-row-meta{font-size:11px;color:var(--mu);letter-spacing:.5px;margin-top:3px;}
#ar2 .ar-pf-row-status{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;padding:3px 9px;border-radius:9px;font-weight:700;}
#ar2 .ar-pf-row-status.draft{background:rgba(125,184,204,.16);color:#8fb8c8;}
#ar2 .ar-pf-row-status.in_review{background:rgba(240,165,0,.16);color:#f0a500;}
#ar2 .ar-pf-row-status.sent{background:rgba(0,180,216,.18);color:var(--t);}
#ar2 .ar-pf-row-status.won{background:rgba(34,197,94,.18);color:var(--gr);}
#ar2 .ar-pf-row-status.lost{background:rgba(239,68,68,.16);color:#f87171;}
#ar2 .ar-pf-row-status.archived{background:rgba(125,184,204,.08);color:#7db8cc;}
#ar2 .ar-pf-row-kpi{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
#ar2 .ar-pf-row-kpi .v{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:#cfe2eb;}
#ar2 .ar-pf-row-kpi .l{font-size:9.5px;color:var(--mu);letter-spacing:1px;text-transform:uppercase;}

/* New Portfolio modal — lightweight create form */
.ar-pf-modal-backdrop{position:fixed;inset:0;background:rgba(4,15,30,.75);z-index:100000;display:flex;align-items:center;justify-content:center;padding:24px;}
.ar-pf-modal{width:100%;max-width:440px;background:linear-gradient(145deg,#0d2d4a,#071628);border:1px solid rgba(0,180,216,.32);border-radius:14px;padding:22px 24px 18px;box-shadow:0 14px 40px rgba(0,0,0,.55);color:#e0f4fa;font-family:'DM Sans',sans-serif;}
.ar-pf-modal-title{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:3px;color:#fff;margin-bottom:14px;}
.ar-pf-modal-lbl{display:block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#7db8cc;margin-bottom:6px;}
.ar-pf-modal-input{width:100%;background:rgba(7,22,40,.6);border:1px solid rgba(0,180,216,.28);border-radius:8px;padding:10px 12px;color:#e0f4fa;font-size:14px;font-family:inherit;outline:none;transition:border-color .15s;}
.ar-pf-modal-input:focus{border-color:var(--t);}
.ar-pf-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;}
.ar-pf-modal-btn{padding:9px 16px;border-radius:8px;border:1px solid rgba(0,180,216,.2);background:transparent;color:#cfe2eb;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s;}
.ar-pf-modal-btn:hover{background:rgba(0,180,216,.1);}
/* Hardcoded colors — modal lives at document.body, outside #ar2's scope,
   so var(--t)/var(--aq)/var(--nv) don't resolve. Falling back to the same
   literal values keeps the primary CTA recognisable across all modals. */
.ar-pf-modal-btn.primary{background:linear-gradient(135deg,#00b4d8,#48cae4);border-color:transparent;color:#040f1e;}
.ar-pf-modal-btn.primary:hover{filter:brightness(1.1);}
.ar-pf-modal-btn:disabled{opacity:.45;cursor:not-allowed;}
.ar-pf-modal-err{font-size:12px;color:#f87171;margin-top:8px;min-height:16px;}
.ar-pf-modal-hint{font-size:11.5px;color:#7db8cc;margin-top:8px;line-height:1.55;}

/* ════════════════════════════════════════════════════════════════════
   Portfolio Overview (Phase 1b) — hero + KPI strip + property roster
   ════════════════════════════════════════════════════════════════════ */
#ar2 .ar-pf-ov-hero{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 0 14px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:18px;}
/* P3: Portfolio Export panel */
#ar2 .ar-pf-exp-wrap{max-width:760px;margin:0 auto;padding:0 0 60px;}
#ar2 .ar-pf-exp-card{background:linear-gradient(145deg,rgba(13,45,74,.6),rgba(7,22,40,.7));border:1px solid var(--bd);border-radius:14px;padding:20px 22px;}
#ar2 .ar-pf-exp-card-title{font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:3px;color:var(--t);margin-bottom:14px;}
#ar2 .ar-pf-exp-row{display:flex;align-items:flex-start;gap:12px;padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer;}
#ar2 .ar-pf-exp-row:last-child{border-bottom:none;}
#ar2 .ar-pf-exp-row input[type=checkbox]{margin-top:3px;flex-shrink:0;width:16px;height:16px;cursor:pointer;accent-color:var(--t);}
#ar2 .ar-pf-exp-row-text{display:flex;flex-direction:column;gap:2px;font-size:14px;color:#e0f4fa;font-weight:500;line-height:1.35;}
#ar2 .ar-pf-exp-row-meta{font-size:11.5px;color:var(--mu);font-weight:400;display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
/* CSV import — drag-and-drop zone inside the bulk-import modal. */
#ar2 .ar-csv-drop,
.ar-pf-modal .ar-csv-drop{position:relative;border:2px dashed rgba(0,180,216,.32);border-radius:10px;padding:28px 18px;text-align:center;background:rgba(7,22,40,.45);transition:background .15s,border-color .15s,transform .12s;outline:none;cursor:pointer;}
.ar-pf-modal .ar-csv-drop:hover,
.ar-pf-modal .ar-csv-drop:focus{border-color:var(--t);background:rgba(0,180,216,.06);}
.ar-pf-modal .ar-csv-drop.is-drag{border-color:var(--gr);background:rgba(34,197,94,.10);transform:scale(1.01);}
/* Sub-options strip — sits just below a parent .ar-toggle-row when the
   section has Cards/List style choices. Negative top margin merges the
   strip visually with its parent row so it reads as part of the same group. */
#ar2 .ar-pf-exp-sub-row{margin:-6px 0 9px;padding:6px 13px 8px;display:flex;justify-content:flex-end;border-left:1px solid rgba(0,180,216,.12);border-right:1px solid rgba(0,180,216,.12);border-bottom:1px solid rgba(0,180,216,.12);border-bottom-left-radius:9px;border-bottom-right-radius:9px;background:rgba(7,22,40,.25);}
/* Inline radio sub-control under an Export section row (Cards vs List).
   Rendered as <span> elements (not native radios) to avoid nested-label
   click bubbling that would toggle the parent row's checkbox. */
#ar2 .ar-pf-exp-radio-group{display:inline-flex;align-items:center;gap:2px;padding:2px;background:rgba(7,22,40,.55);border:1px solid var(--bd);border-radius:7px;margin-left:6px;}
#ar2 .ar-pf-exp-radio{display:inline-flex;align-items:center;padding:4px 10px;border-radius:5px;font-size:11px;font-weight:600;letter-spacing:.3px;color:var(--mu);cursor:pointer;user-select:none;transition:background .12s,color .12s;}
#ar2 .ar-pf-exp-radio:hover{color:var(--tx);background:rgba(0,180,216,.08);}
#ar2 .ar-pf-exp-radio.active{background:linear-gradient(135deg,rgba(0,180,216,.22),rgba(72,202,228,.18));color:#fff;}
#ar2 .ar-pf-exp-row.locked{cursor:default;opacity:.85;}
#ar2 .ar-pf-exp-row.locked input[type=checkbox]{cursor:not-allowed;opacity:.4;}
#ar2 .ar-pf-exp-unlock{background:linear-gradient(135deg,var(--gr),#4ade80);color:var(--nv);border:none;border-radius:6px;padding:5px 10px;font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.5px;cursor:pointer;transition:filter .15s;}
#ar2 .ar-pf-exp-unlock:hover{filter:brightness(1.1);}
#ar2 .ar-pf-exp-edit{background:transparent;border:1px solid rgba(0,180,216,.55);color:var(--aq);border-radius:6px;padding:4px 10px;font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.5px;cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
#ar2 .ar-pf-exp-edit:hover{background:rgba(0,180,216,.18);border-color:var(--aq);color:#fff;}
/* Variant used inside modals (CSV Import etc.) — renders as an inline
   text link instead of a chip-button so it reads correctly within a
   paragraph of helper copy. Brighter cyan + underline = obvious link
   contrast against the modal's navy background. */
#ar2 .ar-pf-exp-edit.as-link{background:transparent;border:none;padding:0;font-size:13px;color:var(--aq);text-decoration:underline;text-underline-offset:2px;}
#ar2 .ar-pf-exp-edit.as-link:hover{color:#fff;background:transparent;text-decoration-color:#fff;}
#ar2 .ar-pf-exp-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:18px;}
#ar2 .ar-pf-exp-btn{padding:12px 16px;border-radius:8px;border:1px solid rgba(0,180,216,.32);background:transparent;color:var(--t);font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.6px;cursor:pointer;transition:background .15s,border-color .15s;}
#ar2 .ar-pf-exp-btn:hover{background:rgba(0,180,216,.10);border-color:var(--t);}
#ar2 .ar-pf-exp-btn.primary{background:linear-gradient(135deg,var(--t),var(--aq));color:var(--nv);border-color:transparent;}
#ar2 .ar-pf-exp-btn.primary:hover{filter:brightness(1.1);}
#ar2 .ar-pf-exp-btn.archive{background:linear-gradient(135deg,var(--gr),#4ade80);color:var(--nv);border-color:transparent;}
#ar2 .ar-pf-exp-btn.archive:hover{filter:brightness(1.1);}
#ar2 .ar-pf-exp-note{margin-top:12px;font-size:11px;color:var(--mu);text-align:center;font-style:italic;}
/* P3: Quote builder shell */
#ar2 .ar-pf-qb-wrap{max-width:880px;margin:0 auto;padding:0 0 60px;display:flex;flex-direction:column;gap:14px;}
#ar2 .ar-pf-qb-card{background:linear-gradient(145deg,rgba(13,45,74,.6),rgba(7,22,40,.7));border:1px solid var(--bd);border-radius:14px;padding:20px 22px;position:relative;}
#ar2 .ar-pf-qb-card.placeholder{opacity:.6;background:linear-gradient(145deg,rgba(13,45,74,.3),rgba(7,22,40,.4));}
#ar2 .ar-pf-qb-section-num{position:absolute;top:-12px;left:18px;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--t),var(--aq));color:var(--nv);font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;}
#ar2 .ar-pf-qb-card-title{font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:3px;color:var(--t);margin-bottom:14px;padding-left:34px;}
#ar2 .ar-pf-qb-grid{display:grid;gap:12px 14px;}
#ar2 .ar-pf-qb-grid.two{grid-template-columns:1fr 1fr;}
#ar2 .ar-pf-qb-field{display:flex;flex-direction:column;gap:5px;}
#ar2 .ar-pf-qb-field.full{grid-column:1/-1;}
#ar2 .ar-pf-qb-field span{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:#7db8cc;font-weight:600;}
#ar2 .ar-pf-qb-field input,#ar2 .ar-pf-qb-field textarea{background:rgba(7,22,40,.6);border:1px solid rgba(0,180,216,.28);border-radius:8px;padding:9px 11px;color:#e0f4fa;font-size:13px;font-family:inherit;outline:none;transition:border-color .15s;resize:vertical;}
#ar2 .ar-pf-qb-field input:focus,#ar2 .ar-pf-qb-field textarea:focus{border-color:var(--t);}
#ar2 .ar-pf-qb-placeholder{font-size:12px;color:var(--mu);padding:8px 0 4px 34px;line-height:1.5;font-style:italic;}
/* P5: Line items roll-up — table-style rows + per-property breakdown */
#ar2 .ar-pf-li-thead{display:grid;grid-template-columns:2fr 90px 110px 110px;gap:10px;padding:6px 0 8px;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:#7db8cc;font-weight:600;border-bottom:1px solid rgba(0,180,216,.18);margin-bottom:6px;}
#ar2 .ar-pf-li-thead .num{text-align:right;}
#ar2 .ar-pf-li-row{display:grid;grid-template-columns:2fr 90px 110px 110px;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed rgba(0,180,216,.08);}
#ar2 .ar-pf-li-row.has-override{background:linear-gradient(90deg,rgba(240,165,0,.06),transparent 40%);}
#ar2 .ar-pf-li-sku{display:flex;flex-direction:column;gap:2px;min-width:0;}
#ar2 .ar-pf-li-sku-label{font-size:13px;color:#e0f4fa;font-weight:600;}
#ar2 .ar-pf-li-sku-meta{font-size:11px;color:var(--mu);}
#ar2 .ar-pf-li-cell{font-size:13px;color:#e0f4fa;}
#ar2 .ar-pf-li-cell.num{text-align:right;font-family:'JetBrains Mono',monospace;}
#ar2 .ar-pf-li-cell input{width:100%;text-align:right;background:rgba(7,22,40,.5);border:1px solid rgba(0,180,216,.2);border-radius:6px;padding:6px 8px;color:#e0f4fa;font-family:'JetBrains Mono',monospace;font-size:12px;outline:none;transition:border-color .15s;}
#ar2 .ar-pf-li-cell input:focus{border-color:var(--t);background:rgba(7,22,40,.8);}
#ar2 .ar-pf-li-cell input::placeholder{color:rgba(125,184,204,.6);}
#ar2 .ar-pf-li-breakdown{margin:-2px 0 6px 8px;padding:6px 10px;background:rgba(7,22,40,.45);border-left:2px solid rgba(0,180,216,.25);border-radius:4px;}
#ar2 .ar-pf-li-breakdown summary{font-size:11px;color:var(--t);cursor:pointer;letter-spacing:.5px;padding:2px 0;outline:none;}
#ar2 .ar-pf-li-breakdown summary:hover{color:#fff;}
#ar2 .ar-pf-li-bd-body{margin-top:6px;display:flex;flex-direction:column;gap:3px;}
#ar2 .ar-pf-li-bd-row{display:flex;justify-content:space-between;font-size:11.5px;color:#cfe2eb;padding:2px 0;}
#ar2 .ar-pf-li-bd-row .num{color:var(--aq);font-family:'JetBrains Mono',monospace;}
#ar2 .ar-pf-li-subtotal{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid rgba(0,180,216,.25);font-size:13px;color:#cfe2eb;}
#ar2 .ar-pf-li-subtotal b{color:var(--t);font-family:'JetBrains Mono',monospace;font-size:15px;}
#ar2 .ar-pf-li-note{font-size:11px;color:var(--mu);margin-top:8px;font-style:italic;line-height:1.45;}
/* P6: Ship-To list */
#ar2 .ar-pf-ship-mode{display:flex;gap:14px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid rgba(0,180,216,.15);}
#ar2 .ar-pf-ship-mode-radio{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#cfe2eb;cursor:pointer;}
#ar2 .ar-pf-ship-mode-radio input{cursor:pointer;accent-color:var(--t);}
#ar2 .ar-pf-ship-list{display:flex;flex-direction:column;gap:14px;}
#ar2 .ar-pf-ship-row{background:rgba(7,22,40,.4);border:1px solid rgba(0,180,216,.14);border-radius:9px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;}
#ar2 .ar-pf-ship-row-head{display:flex;flex-direction:column;gap:2px;}
#ar2 .ar-pf-ship-row-name{font-size:12px;color:#e0f4fa;font-weight:600;letter-spacing:.3px;}
#ar2 .ar-pf-ship-row-auto{font-size:11px;color:var(--mu);line-height:1.4;}
#ar2 .ar-pf-ship-row-auto.missing{color:#f87171;font-style:italic;}
#ar2 .ar-pf-ship-row-input,#ar2 .ar-pf-ship-row-notes{width:100%;background:rgba(7,22,40,.6);border:1px solid rgba(0,180,216,.22);border-radius:7px;padding:8px 10px;color:#e0f4fa;font-family:inherit;font-size:12.5px;outline:none;transition:border-color .15s;resize:vertical;}
#ar2 .ar-pf-ship-row-input:focus,#ar2 .ar-pf-ship-row-notes:focus{border-color:var(--t);}
#ar2 .ar-pf-ship-consolid{display:flex;flex-direction:column;gap:10px;}
/* P7: Portfolio report reuses single-property .rpt-* page chrome exactly.
   No portfolio-specific page-size CSS needed — the captured per-property
   HTML carries .rpt / .rpt-cover-page / .rpt-es-page / .rpt-pp-page / etc.
   which already have @page sizing, page-break rules, and print-color-adjust
   wired in higher up in this stylesheet. */
/* P7+: Portfolio list-table styles — used by the Pool Profiles List view
   and the Property Profiles List-by-Country view. Mirrors the visual
   weight of the existing report (Bebas Neue headers, navy accents) so
   it doesn't look foreign next to the card pages. */
#ar2-report .rpt-ppl-tbl{width:100%;border-collapse:collapse;font-size:10.5px;color:#222;background:#fff;}
#ar2-report .rpt-ppl-tbl thead th{font-family:'Bebas Neue',sans-serif;font-size:10px;letter-spacing:1.5px;color:#0a2540;text-align:left;padding:7px 10px;background:#f5fbff;border-bottom:1.5px solid #48cae4;text-transform:uppercase;}
#ar2-report .rpt-ppl-tbl thead th.num{text-align:right;}
#ar2-report .rpt-ppl-tbl tbody td{padding:6px 10px;border-bottom:1px solid #eef4f7;vertical-align:top;}
#ar2-report .rpt-ppl-tbl tbody td.num{text-align:right;font-family:'JetBrains Mono',monospace;color:#0a2540;}
#ar2-report .rpt-ppl-country-row td{background:#f0fbff;font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:1.5px;color:#0a2540;padding:6px 10px;font-weight:700;text-transform:uppercase;border-top:1px solid #cce8f1;border-bottom:1px solid #cce8f1;}
#ar2-report .rpt-ppl-row td{font-size:10.5px;}
#ar2-report .rpt-ppl-addr{font-size:9.5px;color:#666;margin-top:1px;}
#ar2-report .rpt-ppl-wrap{background:#fff;}
/* Portfolio Overview action group — pinned right via margin-left:auto so
   Quote / Export / + Property sit as a unit on the right side of the hero,
   regardless of how long the portfolio title runs. */
#ar2 .ar-pf-ov-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;}
#ar2 .ar-pf-actbtn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:8px;border:1px solid rgba(0,180,216,.32);background:transparent;color:var(--t);font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.5px;cursor:pointer;transition:filter .18s,background .18s,border-color .18s,color .18s;}
#ar2 .ar-pf-actbtn:hover{background:rgba(0,180,216,.10);border-color:var(--t);color:#fff;}
#ar2 .ar-pf-actbtn.primary{background:linear-gradient(135deg,var(--t),var(--aq));color:var(--nv);border-color:transparent;}
#ar2 .ar-pf-actbtn.primary:hover{filter:brightness(1.1);background:linear-gradient(135deg,var(--t),var(--aq));color:var(--nv);}
#ar2 .ar-pf-back{background:transparent;border:1px solid rgba(0,180,216,.22);color:#cfe2eb;font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.5px;padding:8px 12px;border-radius:8px;cursor:pointer;transition:background .15s,border-color .15s;}
#ar2 .ar-pf-back:hover{background:rgba(0,180,216,.08);border-color:rgba(0,180,216,.4);color:var(--t);}
#ar2 .ar-pf-ov-title-wrap{flex:1;min-width:0;display:flex;align-items:center;gap:14px;}
#ar2 .ar-pf-ov-title{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:3px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#ar2 .ar-pf-ov-meta{display:flex;align-items:center;gap:8px;}

/* KPI strip — borrows visual language from the existing report KPI band
   so portfolio totals feel native to the calculator brand. */
#ar2 .ar-pf-kpistrip{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:rgba(0,180,216,.16);border:1px solid rgba(0,180,216,.18);border-radius:12px;overflow:hidden;margin-bottom:18px;}
#ar2 .ar-pf-kpi{background:linear-gradient(145deg,#0d2d4a,#071628);padding:14px 16px;text-align:center;}
#ar2 .ar-pf-kpi-lbl{font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:#7db8cc;margin-bottom:6px;}
#ar2 .ar-pf-kpi-val{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:700;color:#e0f4fa;letter-spacing:.5px;}
#ar2 .ar-pf-kpi-val.teal{color:var(--t);}
#ar2 .ar-pf-kpi-val.green{color:var(--gr);}

/* Property roster — list of property rows. Hover lifts each row slightly. */
#ar2 .ar-pf-prop-list{display:flex;flex-direction:column;gap:8px;}
#ar2 .ar-pf-prop-row{display:grid;grid-template-columns:36px 1fr 70px 90px 110px 110px 90px 30px;gap:14px;align-items:center;padding:12px 16px;background:rgba(13,45,74,.42);border:1px solid rgba(0,180,216,.14);border-radius:10px;cursor:pointer;transition:background .15s,border-color .15s,transform .12s;position:relative;}
#ar2 .ar-pf-prop-row[draggable="true"]{cursor:grab;}
#ar2 .ar-pf-prop-row[draggable="true"]:active{cursor:grabbing;}
#ar2 .ar-pf-prop-row.dragging{opacity:.45;}
#ar2 .ar-pf-prop-row.drop-above{box-shadow:inset 0 3px 0 var(--t);}
#ar2 .ar-pf-prop-row.drop-below{box-shadow:inset 0 -3px 0 var(--t);}
#ar2 .ar-pf-prop-idx{position:relative;}
#ar2 .ar-pf-prop-grip{position:absolute;left:-4px;top:50%;transform:translateY(-50%);color:#5a8aa0;font-size:14px;letter-spacing:-2px;line-height:1;user-select:none;pointer-events:none;opacity:0;transition:opacity .12s;}
#ar2 .ar-pf-prop-row:hover .ar-pf-prop-grip{opacity:1;}
/* Engineer assignment chip — sits under the address inside the property
   name column. Color reflects assignment status; outline variant when
   no engineer is assigned. Click opens the assign-engineer modal. */
#ar2 .ar-pf-prop-eng-chip{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:3px 9px;border-radius:99px;font-size:10.5px;font-weight:600;letter-spacing:.3px;cursor:pointer;user-select:none;border:1px solid;transition:filter .12s,border-color .15s,background .15s;}
#ar2 .ar-pf-prop-eng-chip.amber {background:rgba(240,165,0,.14); color:#f0a500; border-color:rgba(240,165,0,.4);}
#ar2 .ar-pf-prop-eng-chip.yellow{background:rgba(234,179,8,.14); color:#eab308; border-color:rgba(234,179,8,.4);}
#ar2 .ar-pf-prop-eng-chip.blue  {background:rgba(0,180,216,.14); color:#48cae4; border-color:rgba(0,180,216,.4);}
#ar2 .ar-pf-prop-eng-chip.green {background:rgba(34,197,94,.14); color:#4ade80; border-color:rgba(34,197,94,.4);}
#ar2 .ar-pf-prop-eng-chip.gray  {background:rgba(125,184,204,.1); color:#7db8cc; border-color:rgba(125,184,204,.25);}
#ar2 .ar-pf-prop-eng-chip.outline{background:transparent; color:#7db8cc; border-color:rgba(125,184,204,.3); border-style:dashed;}
#ar2 .ar-pf-prop-eng-chip:hover{filter:brightness(1.1);}
#ar2 .ar-pf-prop-eng-chip.outline:hover{border-color:#4ade80; color:#4ade80; background:rgba(34,197,94,.08);}
/* Danger button shared with Add Property modal's "Remove assignment" CTA. */
.ar-pf-modal-btn.danger{background:transparent; border:1px solid rgba(239,68,68,.35); color:#fca5a5;}
.ar-pf-modal-btn.danger:hover{background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.6); color:#fff;}

/* Multi-engineer assignment list inside the assign-engineer modal */
.ar2-modal-card .ar-eng-assign-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:8px 12px;background:rgba(0,180,216,.06);border:1px solid rgba(0,180,216,.18);border-radius:8px;margin-bottom:6px;}
.ar2-modal-card .ar-eng-assign-row-main{min-width:0;}
.ar2-modal-card .ar-eng-assign-row-name{font-size:13px;font-weight:600;color:#fff;}
.ar2-modal-card .ar-eng-assign-row-meta{font-size:11px;color:var(--mu);margin-top:2px;}
.ar2-modal-card .ar-eng-assign-row-x{background:transparent;border:1px solid rgba(239,68,68,.32);color:#fca5a5;width:24px;height:24px;border-radius:6px;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .12s,color .12s;}
.ar2-modal-card .ar-eng-assign-row-x:hover{background:rgba(239,68,68,.18);color:#fff;}

#ar2 .ar-pf-prop-del{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;background:transparent;border:1px solid rgba(239,68,68,.25);color:#f87171;font-family:inherit;font-size:14px;font-weight:600;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s,background .15s,border-color .15s;padding:0;}
#ar2 .ar-pf-prop-row:hover .ar-pf-prop-del,#ar2 .ar-pf-prop-del:focus{opacity:1;}
#ar2 .ar-pf-prop-del:hover{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.5);color:#fca5a5;}
#ar2 .ar-pf-prop-row:hover{background:rgba(0,180,216,.07);border-color:rgba(0,180,216,.32);transform:translateY(-1px);}
#ar2 .ar-pf-prop-idx{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:var(--mu);text-align:center;}
#ar2 .ar-pf-prop-id{min-width:0;}
#ar2 .ar-pf-prop-name{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;color:#e0f4fa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#ar2 .ar-pf-prop-sub{font-size:11px;color:var(--mu);margin-top:2px;letter-spacing:.3px;}
#ar2 .ar-pf-prop-kpi{text-align:right;}
#ar2 .ar-pf-prop-kpi .v{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:#cfe2eb;}
#ar2 .ar-pf-prop-kpi .l{font-size:9.5px;color:var(--mu);letter-spacing:1px;text-transform:uppercase;margin-top:1px;}
#ar2 .ar-pf-prop-status{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;padding:5px 8px;border-radius:7px;font-weight:700;text-align:center;}
#ar2 .ar-pf-prop-status.incomplete{background:rgba(240,165,0,.16);color:#f0a500;}
#ar2 .ar-pf-prop-status.ready{background:rgba(34,197,94,.18);color:var(--gr);}

/* Narrow viewport — collapse the per-property KPI columns to keep the
   row legible. Single Assessments already does similar at this breakpoint. */
@media(max-width:860px){
  #ar2 .ar-pf-kpistrip{grid-template-columns:repeat(3,1fr);}
  #ar2 .ar-pf-prop-row{grid-template-columns:32px 1fr 90px 30px;}
  #ar2 .ar-pf-prop-row .ar-pf-prop-kpi:not(:nth-of-type(1)){display:none;}
  #ar2 .ar-pf-ov-title{font-size:22px;}
}

/* ════════════════════════════════════════════════════════════════════
   Property-mode subbar (Phase 1c) — breadcrumb + Save controls.
   Hidden by default — `.is-active` is toggled by AR2_PF._toggleSubbar.
   Using a class (not inline style) means the visibility state can't be
   stomped by a stray re-render that omits the inline style attribute.
   ════════════════════════════════════════════════════════════════════ */
/* Subbar geometry mirrors the calculator content area (.ar-layout) so the
   breadcrumb starts at the same left edge as the form column and ends at
   the same right edge as the results column:
     outer  → background full-width, no horizontal padding
     inner  → max-width 1320px, centered, 20px horizontal padding
              (matches .ar-layout) */
#ar2-pf-subbar{display:none;background:linear-gradient(180deg,rgba(13,45,74,.95),rgba(7,22,40,.95));border-bottom:1px solid rgba(0,180,216,.22);padding:0;}
#ar2-pf-subbar.is-active{display:block;}
.ar-pf-sub-inner{max-width:1320px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:'DM Sans',sans-serif;width:100%;box-sizing:border-box;}
.ar-pf-sub-back{background:rgba(0,180,216,.10);border:1px solid rgba(0,180,216,.28);color:var(--t);font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.5px;padding:7px 11px;border-radius:7px;cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis;}
.ar-pf-sub-back:hover{background:rgba(0,180,216,.18);border-color:rgba(0,180,216,.5);}
.ar-pf-sub-sep{color:#7db8cc;font-size:14px;opacity:.6;}
.ar-pf-sub-prop{font-size:13px;font-weight:600;color:#e0f4fa;letter-spacing:.3px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ar-pf-sub-status{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;padding:4px 9px;border-radius:7px;font-weight:700;}
.ar-pf-sub-status.saving{background:rgba(125,184,204,.18);color:#7db8cc;}
.ar-pf-sub-status.saved {background:rgba(34,197,94,.18);color:var(--gr);}
.ar-pf-sub-status.error {background:rgba(239,68,68,.18);color:#f87171;cursor:help;}
/* Prev/Next property navigation (Phase 1d) — sits between the property
   name and the save status. Disabled at the boundaries (first / last). */
.ar-pf-sub-nav{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;background:rgba(0,180,216,.06);border:1px solid rgba(0,180,216,.18);border-radius:7px;}
.ar-pf-sub-navbtn{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--t);font-size:14px;cursor:pointer;border-radius:4px;transition:background .12s,color .12s;font-family:inherit;}
.ar-pf-sub-navbtn:hover:not(:disabled){background:rgba(0,180,216,.16);}
.ar-pf-sub-navbtn:disabled{color:#3a5b6a;cursor:not-allowed;opacity:.5;}
.ar-pf-sub-navpos{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;color:#cfe2eb;letter-spacing:.4px;min-width:48px;text-align:center;}
.ar-pf-sub-actions{display:flex;gap:6px;}
.ar-pf-sub-act{background:transparent;border:1px solid rgba(0,180,216,.22);color:#cfe2eb;font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.5px;padding:7px 12px;border-radius:7px;cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
.ar-pf-sub-act:hover{background:rgba(0,180,216,.10);border-color:rgba(0,180,216,.4);color:var(--t);}
.ar-pf-sub-act.primary{background:linear-gradient(135deg,var(--t),var(--aq));border-color:transparent;color:var(--nv);}
.ar-pf-sub-act.primary:hover{filter:brightness(1.1);}

/* Property mode — single-assessment-only chrome is hidden. The "New"
   button doesn't apply (use Add Property in the overview instead);
   the Archive button label is replaced by the breadcrumb so we hide
   it. The .pf-property-mode body class scopes these overrides. */
body.pf-property-mode #ar2 #ar2-bar-actions{display:none!important;}

/* Engineer mode — hide calculator-specific affordances (Archive, New,
   Help tutorial icon, stepper) since engineers only use the field
   verification portal. The user chip + notification bell remain visible
   via id-specific exceptions so engineers can still sign out. */
body.pf-engineer-mode #ar2 #ar2-bank-nav,
body.pf-engineer-mode #ar2 #ar2-bar-actions [data-action="reset-app"],
body.pf-engineer-mode #ar2 #ar2-help-btn,
body.pf-engineer-mode #ar2 #ar2-stepper{display:none!important;}