/* Extracted verbatim from the original frontend/app.html — the real Oasis look. */

/* ── Apple-light professional theme ─────────────────────
   THE ONE LIGHT PALETTE. This used to be two: these values, and a second
   :root further down under a "MINIMALIST UI REFRESH (2026-06-27)" banner that
   was appended last specifically so it would override them. Reading the top
   of the file therefore told you the wrong thing about seven of the tokens,
   and editing a color here did nothing, which is a good way to conclude the
   app just looks like that. The refresh's values won, so the refresh's values
   are the ones written here, merged in place. Dark mode overrides these near
   the end of the file, in BOTH forms it needs (an explicit [data-theme] and a
   prefers-color-scheme mirror) — that pair is the three-state theme contract
   and neither half is redundant. */
:root{
  --bg:#f6f6f7;
  --surface:#ffffff;
  --card:#fbfbfd;
  --card-2:#f5f5f7;
  --border:rgba(17,17,26,.08);
  --border-strong:rgba(17,17,26,.14);
  --text:#1d1d1f;
  --muted:#8a8a91;
  --soft:#56565e;
  /* The accent IS the brand orange. Named separately so a component can say
     what it means (accent) rather than which color it happens to be. */
  --accent:var(--orange);
  --accent-weak:rgba(255,107,26,.10);
  --orange:#ff6b1a;
  --orange-d:#e85d10;
  --orange-light:#ff8a4d;
  --purple:#af52de;
  --green:#34c759;
  --green-d:#1e8e3e;
  --red:#ff3b30;
  --red-d:#c0271d;
  --yellow:#ff9500;
  --yellow-d:#9a5b00;
  --blue:#007aff;
  --blue-d:#0a5fc7;
  --glass:rgba(255,255,255,.72);
  --glass-strong:rgba(255,255,255,.85);
  --shadow-sm:0 1px 2px rgba(17,17,26,.05);
  --shadow:0 1px 2px rgba(17,17,26,.05), 0 8px 22px -14px rgba(17,17,26,.18);
  --shadow-lg:0 16px 44px -18px rgba(17,17,26,.22);
  --hero-grad:linear-gradient(180deg,#ffffff 0%, #fafafa 100%);

  /* LEGACY TOKEN ALIASES, owned here so nobody has to redefine them.
     Several component partials (invoices/_design.html, tasks/_styles.html,
     core/_design_system.html) were authored against an older sheet whose
     tokens had different names, and each one was patching the gap itself.
     invoices/_design.html did it by writing :root from inside a page <style>
     block, which is a page reaching up and editing global state for every
     screen that happens to include it. Declared once here instead, so the
     names simply exist and a partial can use them without redefining
     anything. New code should prefer the real names on the right. */
  --ink:var(--text);
  --line:var(--border-strong);
  --brand:var(--orange);
  --brand-dk:var(--orange-d);
  --danger:var(--red);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);
  height:100vh;display:flex;flex-direction:column;overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
header{
  background:var(--glass);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--border);
  color:var(--text);
  padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;position:sticky;top:0;z-index:100;
}
header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent 0%, rgba(255,107,26,.35) 40%, rgba(255,107,26,.35) 60%, transparent 100%);
}
.brand-lockup{display:flex;align-items:center;text-decoration:none;color:inherit;}
.brand-lockup:hover{color:inherit;}
.brand-logo{height:34px;width:auto;display:block;flex-shrink:0;}
header h1{font-size:17px;font-weight:600;letter-spacing:-.2px;color:var(--text);}
header p{font-size:11px;color:var(--muted);margin-top:1px;letter-spacing:.4px;text-transform:uppercase;font-weight:600;}
.hbtns{display:flex;gap:8px;align-items:center;}
nav{background:var(--surface);border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;flex-shrink:0;position:relative;}
nav button, nav .nav-item{flex:1;padding:13px 10px;background:none;border:none;border-bottom:2px solid transparent;color:var(--soft);font-size:13px;font-weight:500;cursor:pointer;transition:color .15s, background .15s, border-color .15s;letter-spacing:-.1px;display:flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;}
nav button:hover, nav .nav-item:hover{color:var(--text);background:rgba(255,107,26,.04);}
nav button.active, nav .nav-item.active{color:var(--orange);border-bottom-color:var(--orange);background:rgba(255,107,26,.06);font-weight:600;}

/* Routines hover dropdown */
.nav-dropdown{position:relative;flex:1;}
.nav-dropdown > .nav-item{width:100%;}
.nav-dropdown .nav-menu{position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1px solid var(--border);border-top:none;border-radius:0 0 14px 14px;box-shadow:var(--shadow-lg);display:none;z-index:60;min-width:280px;overflow:hidden;}
.nav-dropdown:hover .nav-menu, .nav-dropdown:focus-within .nav-menu{display:block;}
.nav-menu a{display:block;padding:12px 16px;font-size:13px;color:var(--text);text-decoration:none;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s;}
.nav-menu a:last-child{border-bottom:none;}
.nav-menu a:hover{background:rgba(255,107,26,.06);color:var(--orange);}
.nav-menu a .nm-sub{display:block;font-size:11px;color:var(--muted);margin-top:2px;font-weight:400;}
main{flex:1;overflow:hidden;}
.tab{display:none;height:100%;overflow-y:auto;padding:24px;}
.tab.active{display:block;}
#chat-tab.active{display:flex;flex-direction:column;padding:0;}
button{cursor:pointer;border:none;border-radius:8px;font-family:inherit;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;padding:8px 14px;font-size:12.5px;font-weight:600;letter-spacing:-.1px;transition:background .15s, transform .08s, box-shadow .15s;border-radius:8px;}
.btn:active{transform:scale(.985);}
.btn-orange{background:var(--orange);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 14px -4px rgba(255,107,26,.45);}
.btn-orange:hover:not(:disabled){background:var(--orange-d);box-shadow:0 1px 2px rgba(0,0,0,.06), 0 6px 18px -4px rgba(255,107,26,.55);}
.btn-purple{background:var(--purple);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 14px -4px rgba(175,82,222,.4);}
.btn-purple:hover:not(:disabled){background:#9540c9;}
.btn-ghost{background:var(--surface);color:var(--text);border:1px solid var(--border-strong);}
.btn-ghost:hover{background:var(--card);}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;}
/* Button loading spinner */
@keyframes btn-spin{to{transform:rotate(360deg);}}
.btn.loading{cursor:not-allowed;}
.btn.loading::after{content:'';display:inline-block;width:11px;height:11px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:btn-spin .55s linear infinite;margin-left:8px;vertical-align:middle;}
/* Ingestion loading note — shown next to a submit button while a blocking
   OCR/vision/LLM call or a background job is in flight (see base.html's
   shared [data-loading-text] submit handler). */
.form-processing-note{display:flex;align-items:flex-start;gap:6px;margin-top:8px;padding:8px 10px;background:var(--card);border:1px solid var(--border);border-radius:8px;font-size:12.5px;line-height:1.4;color:var(--muted);max-width:520px;}
.form-processing-note::before{content:'ℹ️';flex:0 0 auto;}
/* Global busy bar. Fades in only after a ~300ms grace period: a navigation
   that lands quickly (cached page, prefetched link, fast fragment swap) never
   flashes the bar at all — the flash itself read as "the whole page reloaded". */
#busy-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;background:linear-gradient(90deg,transparent 0%,var(--orange) 40%,var(--orange) 60%,transparent 100%);background-size:300% 100%;opacity:0;pointer-events:none;transition:opacity .15s ease;}
#busy-bar.show{opacity:1;transition-delay:.3s;animation:busy-slide 1.4s linear infinite;}
@keyframes busy-slide{0%{background-position:100% 0;}100%{background-position:-200% 0;}}

/* ── Smooth page-to-page navigation (cross-document view transitions) ──────
   Same-origin navigations crossfade instead of hard-cutting through a blank
   frame, so moving between sections stops feeling like a full reload. The
   sticky chrome (header + sidebar) gets its own named transition group with
   the animation zeroed out, so it visually stays put like an app shell while
   only the content area fades. Browsers without the feature (or users with
   reduced motion) simply keep the classic instant swap. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation: auto; }
  ::view-transition-old(root){ animation-duration:.16s; }
  ::view-transition-new(root){ animation-duration:.16s; }
  /* body > header only: inner card/section <header>s (e.g. the tasks board's
     post-its) must NOT get the name — a duplicate view-transition-name makes
     the browser skip the whole transition on that page. */
  body > header{ view-transition-name: oasis-header; }
  nav.sidebar{ view-transition-name: oasis-sidebar; }
  ::view-transition-group(oasis-header),
  ::view-transition-group(oasis-sidebar){ animation-duration:0s; }
  ::view-transition-old(oasis-header),
  ::view-transition-new(oasis-header),
  ::view-transition-old(oasis-sidebar),
  ::view-transition-new(oasis-sidebar){ animation:none; mix-blend-mode:normal; }
}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:14px;box-shadow:var(--shadow-sm);}
.card h3{font-size:15px;font-weight:600;margin-bottom:12px;color:var(--text);letter-spacing:-.2px;}
.card h4{font-size:11px;font-weight:600;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px;}

/* "Under construction" tag */
.uc-tag{display:inline-block;background:rgba(255,149,0,.12);color:var(--yellow-d);border:1px solid rgba(255,149,0,.35);padding:2px 8px;border-radius:99px;font-size:9.5px;font-weight:700;letter-spacing:.4px;margin-left:6px;vertical-align:middle;}
/* Chat power badges — tell the user what each chat can actually do */
.chat-power{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;border:1px solid;vertical-align:middle;}
.chat-power-read   {background:rgba(52,199,89,.10); color:var(--green-d); border-color:rgba(52,199,89,.35);}
.chat-power-suggest{background:rgba(255,107,26,.10);color:var(--orange); border-color:rgba(255,107,26,.35);}
.chat-power-edit   {background:rgba(255,59,48,.10); color:var(--red-d); border-color:rgba(255,59,48,.40);}
.chat-power-help{font-size:11px;color:var(--muted);margin-top:4px;}

/* ── How-to note ──────────────────────────────────────────────────────
   Friendly, plain-English "instructions by the function" box. Blue accent
   = "this is a guide, not a button." Built on <details> so it's open by
   default (visible before you touch the tool) but collapsible once learned;
   collapse state is remembered per-id in localStorage (see initHowtos()). */
.howto{border:1px solid rgba(0,122,255,.28);border-left:3px solid var(--blue);border-radius:10px;background:linear-gradient(135deg,rgba(0,122,255,.05),transparent);margin-bottom:16px;overflow:hidden;}
.howto>summary{cursor:pointer;list-style:none;padding:11px 15px;font-size:13px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;user-select:none;}
.howto>summary::-webkit-details-marker{display:none;}
/* To-do tab dropdowns (Team-notes composer, All-tasks-at-a-glance, My tasks) —
   plain <details>, not .howto, so hide the default disclosure triangle here too. */
#bc-composer>summary::-webkit-details-marker,#task-stack-card>summary::-webkit-details-marker,#my-tasks-d>summary::-webkit-details-marker{display:none;}
#task-stack-card>summary:hover,#my-tasks-d>summary:hover{opacity:.85;}
.howto>summary:hover{background:rgba(0,122,255,.05);}
.howto>summary .howto-chev{margin-left:auto;color:var(--muted);font-size:11px;font-weight:400;transition:transform .15s;}
.howto[open]>summary .howto-chev{transform:rotate(180deg);}
.howto-body{padding:3px 16px 15px;font-size:12.5px;line-height:1.65;color:var(--text);}
.howto-body p{margin:0 0 9px;}
.howto-body p:last-child{margin-bottom:0;}
.howto-body b{color:var(--text);}
.howto-meta{color:var(--muted);font-style:italic;}
.howto-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0;}
@media(max-width:680px){.howto-cols{grid-template-columns:1fr;}}
.howto-box{border-radius:8px;padding:9px 12px;}
.howto-box.good{background:rgba(52,199,89,.08);border:1px solid rgba(52,199,89,.28);}
.howto-box.bad{background:rgba(255,59,48,.06);border:1px solid rgba(255,59,48,.22);}
.howto-box .hb-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;}
.howto-box.good .hb-h{color:var(--green-d);}
.howto-box.bad .hb-h{color:var(--red-d);}
.howto-box ul{margin:0;padding-left:17px;}
.howto-box li{margin-bottom:4px;}
.howto-eg{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:8px 11px;margin:9px 0;font-size:12px;line-height:1.55;}
.howto-eg b{color:var(--orange);}

/* SOP reading view — a polished, formatted render of the markdown body
   (with inline pictures). Two containers share the typography below: .sop-doc
   (the viewer POPUP — capped height, scrolls inside the modal) and .sop-body
   (the DETAIL PAGE — flows with normal page scroll, so no max-height). */
.sop-doc{font-size:14px;line-height:1.7;color:var(--text);max-height:62vh;overflow:auto;padding:2px 2px 6px;}
.sop-body{font-size:14.5px;line-height:1.75;color:var(--text);margin:6px 0 0;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:26px 30px 30px;box-shadow:var(--shadow-sm);}
/* Extra visual breakup for the full-page document: more air before each new
   section than the compact popup needs. */
.sop-body h2{margin-top:1.8em;}
.sop-body p{margin:.75em 0;}
.sop-body li{margin:.4em 0;}
.sop-doc>:first-child,.sop-body>:first-child{margin-top:0;}
.sop-doc h1,.sop-doc h2,.sop-doc h3,.sop-doc h4,.sop-body h1,.sop-body h2,.sop-body h3,.sop-body h4{color:var(--text);margin:1.3em 0 .5em;line-height:1.3;font-weight:700;}
.sop-doc h1,.sop-body h1{font-size:22px;border-bottom:2px solid var(--orange);padding-bottom:6px;}
.sop-doc h2,.sop-body h2{font-size:18px;border-bottom:1px solid var(--border);padding-bottom:4px;}
.sop-doc h3,.sop-body h3{font-size:15.5px;}
.sop-doc h4,.sop-body h4{font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;}
.sop-doc p,.sop-body p{margin:.6em 0;}
.sop-doc img,.sop-body img{max-width:100%;height:auto;border-radius:8px;border:1px solid var(--border);margin:12px 0;display:block;box-shadow:0 2px 10px rgba(0,0,0,.12);}
.sop-doc ul,.sop-doc ol,.sop-body ul,.sop-body ol{padding-left:22px;margin:.5em 0;}
.sop-doc li,.sop-body li{margin:.3em 0;}
.sop-doc blockquote,.sop-body blockquote{border-left:3px solid var(--orange);background:rgba(249,115,22,.07);margin:.8em 0;padding:8px 14px;border-radius:0 6px 6px 0;}
.sop-doc blockquote p,.sop-body blockquote p{margin:.2em 0;}
.sop-doc code,.sop-body code{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-size:12.5px;font-family:ui-monospace,Menlo,monospace;}
.sop-doc pre,.sop-body pre{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px;overflow:auto;margin:.7em 0;}
.sop-doc pre code,.sop-body pre code{border:none;padding:0;background:none;}
.sop-doc table,.sop-body table{border-collapse:collapse;width:100%;margin:1em 0;font-size:13px;}
.sop-doc th,.sop-doc td,.sop-body th,.sop-body td{border:1px solid var(--border);padding:6px 10px;text-align:left;vertical-align:top;}
.sop-doc th,.sop-body th{background:var(--card);font-weight:650;}
.sop-doc a,.sop-body a{color:var(--orange);}
.sop-doc hr,.sop-body hr{border:none;border-top:1px solid var(--border);margin:1.2em 0;}
.sop-edit-ta{width:100%;min-height:380px;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;line-height:1.6;padding:12px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);box-sizing:border-box;}
/* Pictures attached in the SOP word editor render inline in the viewer. */
.sop-body img{max-width:100%;height:auto;border:1px solid var(--border);border-radius:8px;margin:8px 0;display:block;}
/* SOP word editor (EasyMDE) — keep the toolbar/preview on-brand and bounded. */
.EasyMDEContainer .CodeMirror{border-color:var(--border);border-radius:0 0 8px 8px;background:var(--surface);color:var(--text);min-height:340px;}
.EasyMDEContainer .editor-toolbar{border-color:var(--border);border-top-left-radius:8px;border-top-right-radius:8px;}
.EasyMDEContainer .editor-preview img,.EasyMDEContainer .CodeMirror img{max-width:100%;height:auto;}
/* Standardized SOP letterhead — the same on every SOP (viewer chrome). */
.sop-brandbar{text-align:center;border-bottom:2px solid var(--orange);padding-bottom:9px;margin-bottom:12px;}
.sop-brandbar .sb-co{font-size:12.5px;font-weight:800;letter-spacing:1.4px;color:var(--orange);text-transform:uppercase;}
.sop-brandbar .sb-cf{font-size:10px;font-style:italic;color:var(--muted);letter-spacing:.6px;text-transform:uppercase;margin-top:2px;}
.sop-reviewbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.3);border-radius:7px;padding:8px 12px;margin-bottom:12px;font-size:12px;color:var(--text);}

/* Dashboard widgets */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:18px;}
.dash-w{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .15s, box-shadow .15s;}
.dash-w:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.dash-w::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:var(--orange);}
.dash-w.red::before{background:var(--red);}
.dash-w.green::before{background:var(--green);}
.dash-w.blue::before{background:var(--blue);}
.dash-w-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600;margin-bottom:8px;}
.dash-w-value{font-size:32px;font-weight:600;color:var(--text);letter-spacing:-.6px;line-height:1;margin-bottom:6px;}
.dash-w-detail{font-size:11.5px;color:var(--muted);max-height:90px;overflow-y:auto;}
.dash-w-detail li{padding:3px 0;border-bottom:1px dashed var(--border);font-size:11px;}
.dash-w-detail li:last-child{border-bottom:none;}

/* Index status bar */
.index-bar-wrap{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 16px;margin-bottom:14px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-sm);}
.index-bar-track{flex:1;background:rgba(0,0,0,.06);border-radius:99px;height:7px;overflow:hidden;}
.index-bar-fill{height:100%;background:linear-gradient(90deg,var(--purple),var(--blue));border-radius:99px;transition:width .5s;}
.index-bar-label{font-size:11.5px;color:var(--muted);white-space:nowrap;}

/* Toggle switch */
#mode-toggle::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;background:var(--muted);border-radius:50%;transition:all .2s;}
#mode-toggle:checked{background:var(--purple);border-color:var(--purple);}
#mode-toggle:checked::after{left:18px;background:#fff;}

/* Complex modal */
#cx-modal{position:fixed;inset:0;background:rgba(0,0,0,.30);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:200;}
#cx-modal.show{display:flex;}
#cx-box{background:var(--surface);border:1px solid var(--border);border-radius:18px;width:640px;max-width:94vw;max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);}
#cx-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
#cx-body{padding:16px 20px;overflow-y:auto;flex:1;}
.cand-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:11px 13px;margin-bottom:7px;cursor:pointer;transition:border-color .12s, background .12s, box-shadow .12s;}
.cand-card:hover{border-color:var(--orange);background:#fff;box-shadow:var(--shadow-sm);}
.cand-name{font-weight:600;font-size:13px;color:var(--text);}
.cand-meta{font-size:11px;color:var(--muted);margin-top:2px;}
.q-row{margin-bottom:10px;}
.q-q{font-size:12px;font-weight:600;color:var(--text);margin-bottom:5px;}

/* Email history modal */
#hist-modal{position:fixed;inset:0;background:rgba(0,0,0,.30);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:200;}
#hist-modal.show{display:flex;}
#hist-box{background:var(--surface);border:1px solid var(--border);border-radius:18px;width:760px;max-width:94vw;max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);}
#hist-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
#hist-body{padding:16px 20px;overflow-y:auto;flex:1;}
.hist-row{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:11px 13px;margin-bottom:8px;font-size:12px;}
.hist-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin-bottom:3px;}
.hist-subj{font-weight:600;color:var(--text);margin-bottom:5px;}
.hist-text{color:var(--soft);font-size:11.5px;line-height:1.5;max-height:140px;overflow:hidden;position:relative;}
.hist-text.expanded{max-height:none;}
.hist-text.collapsed::after{content:'';position:absolute;left:0;right:0;bottom:0;height:30px;background:linear-gradient(transparent,var(--card));}

/* Prior-email card with hover tooltip */
.prior-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:9px 11px;margin-bottom:6px;position:relative;cursor:help;}
.prior-card .prior-full{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:10;background:var(--surface);border:1px solid var(--orange);border-radius:10px;padding:12px 14px;box-shadow:var(--shadow-lg);max-height:280px;overflow-y:auto;white-space:pre-wrap;font-size:11.5px;line-height:1.5;color:var(--text);}
.prior-card:hover .prior-full{display:block;}

/* Floating progress pill (non-blocking) */
.taskpill{position:fixed;bottom:18px;right:18px;background:var(--glass-strong);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:1px solid var(--border);border-radius:14px;padding:14px 16px;width:320px;max-width:calc(100vw - 36px);z-index:50;box-shadow:var(--shadow-lg);display:none;}
.taskpill.show{display:block;}
.taskpill h3{font-size:13px;margin-bottom:4px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:600;}
.taskpill .tp-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:0 4px;line-height:1;}
.taskpill .tp-close:hover{color:var(--text);}
.ptrack{background:rgba(0,0,0,.06);border-radius:99px;height:7px;overflow:hidden;margin:6px 0 5px;}
.pfill{height:100%;background:linear-gradient(90deg,var(--orange),var(--purple));border-radius:99px;transition:width .35s;}
.plabel{font-size:11.5px;color:var(--muted);line-height:1.4;}
.plabel-sub{font-size:10.5px;color:var(--muted);margin-top:3px;}

/* Stats */
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;}
.scard{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;text-align:center;box-shadow:var(--shadow-sm);}
.snum{font-size:26px;font-weight:600;line-height:1;letter-spacing:-.4px;}
.slbl{font-size:10.5px;color:var(--muted);margin-top:5px;text-transform:uppercase;letter-spacing:.4px;font-weight:600;}
.scard.p .snum{color:var(--orange);}
.scard.n .snum{color:var(--blue);}
.scard.s .snum{color:var(--muted);}

/* Tasks — light tinted status tiles */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px;}
.tc{border-radius:12px;padding:12px;text-align:center;border:1px solid;}
.tc.tod{background:rgba(255,59,48,.08);border-color:rgba(255,59,48,.25);}
.tc.tod .tcn{color:var(--red-d);}
.tc.ov{background:rgba(255,149,0,.08);border-color:rgba(255,149,0,.25);}
.tc.ov .tcn{color:var(--yellow-d);}
.tc.li{background:rgba(255,107,26,.08);border-color:rgba(255,107,26,.25);}
.tc.li .tcn{color:var(--orange-d);}
.tc.ok{background:var(--card);border-color:var(--border);}
.tcn{font-size:22px;font-weight:600;letter-spacing:-.4px;}
.tcl{font-size:10.5px;color:var(--muted);margin-top:3px;font-weight:500;}

/* Filters */
/* .fbar/.fbtn removed — they styled the dashboard's cut legacy "📬 Emails" filter bar. */

/* Activity rows */
.actrow{display:grid;grid-template-columns:140px 1fr 200px 80px;gap:10px;padding:9px 12px;border-bottom:1px solid var(--border);font-size:11.5px;align-items:center;}
.actrow:last-child{border-bottom:none;}
.actrow .ad{color:var(--muted);font-variant-numeric:tabular-nums;}
.actrow .asub{color:var(--text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.actrow .afrom{color:var(--orange);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.actrow .afold{color:var(--muted);font-size:10px;text-align:right;}

/* Emails */
.sg{background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:8px;overflow:hidden;box-shadow:var(--shadow-sm);}
.sh{padding:10px 14px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:background .12s;}
.sh:hover{background:var(--card);}
.sn{font-size:12.5px;font-weight:600;color:var(--orange);}
.sc{font-size:10px;color:var(--muted);background:var(--card-2);padding:2px 8px;border-radius:99px;}
.se{border-top:1px solid var(--border);}
.er{padding:10px 14px;border-bottom:1px solid var(--border);font-size:11.5px;}
.er:last-child{border-bottom:none;}
.esub{color:var(--text);font-weight:500;margin-bottom:2px;}
.emeta{color:var(--muted);font-size:10px;}
.pb{display:inline-block;padding:1px 7px;border-radius:99px;font-size:9.5px;font-weight:600;margin-left:5px;}
.pbp{background:rgba(255,107,26,.12);color:var(--orange);}
.pbn{background:rgba(0,122,255,.10);color:var(--blue);}

/* Chat */
.cmsgs{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:10px;background:var(--bg);}
.cempty{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100%;padding:26px 16px 16px;color:var(--muted);gap:6px;}
.cempty h2{font-size:16px;color:var(--text);font-weight:600;letter-spacing:-.2px;}
/* Sorted inbox — the landing view inside "Search your email". Real mail
   bucketed by the smart classifier (invoices / work orders / important
   people); junk is left out and only counted. */
.ibx{width:100%;max-width:620px;margin:2px auto 20px;text-align:left;}
.ibx-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:11px;}
.ibx-title{font-size:15px;font-weight:700;color:var(--text);}
.ibx-sub{font-size:11.5px;color:var(--muted);margin-top:2px;}
.ibx-refresh{background:none;border:1px solid var(--border);color:var(--muted);border-radius:6px;padding:4px 9px;font-size:13px;line-height:1;cursor:pointer;}
.ibx-refresh:hover{color:var(--text);border-color:var(--orange);}
.ibx-group{border:1px solid var(--border);border-radius:8px;margin-bottom:8px;background:var(--card);overflow:hidden;}
.ibx-ghead{display:flex;align-items:center;gap:9px;padding:10px 13px;cursor:pointer;user-select:none;}
.ibx-ghead:hover{background:rgba(0,0,0,.03);}
.ibx-gicon{font-size:15px;}
.ibx-glabel{font-weight:700;font-size:13px;color:var(--text);}
.ibx-gcount{font-size:11px;font-weight:700;color:var(--muted);background:rgba(0,0,0,.06);border-radius:99px;padding:1px 8px;}
.ibx-gchev{margin-left:auto;color:var(--muted);font-size:11px;transition:transform .15s;}
.ibx-group.open .ibx-gchev{transform:rotate(180deg);}
.ibx-glist{display:none;border-top:1px solid var(--border);max-height:300px;overflow-y:auto;}
.ibx-group.open .ibx-glist{display:block;}
.ibx-row{padding:9px 13px;border-bottom:1px solid var(--border);cursor:pointer;}
.ibx-row:last-child{border-bottom:none;}
.ibx-row:hover{background:rgba(0,0,0,.03);}
.ibx-row-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.ibx-from{font-weight:600;font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ibx-date{font-size:10.5px;color:var(--muted);white-space:nowrap;}
.ibx-subj{font-size:12px;color:var(--text);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ibx-snip{font-size:11px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ibx-empty{padding:11px 13px;font-size:12px;color:var(--muted);}
.ibx-more{padding:8px 13px;font-size:11px;color:var(--muted);text-align:center;}
.ibx-junk{font-size:11px;color:var(--muted);text-align:center;margin-top:6px;}
.suggs{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.sug{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 14px;font-size:12px;color:var(--soft);cursor:pointer;text-align:left;transition:border-color .12s, color .12s, box-shadow .12s;}
.sug:hover{border-color:var(--orange);color:var(--text);box-shadow:var(--shadow-sm);}
.msg{display:flex;gap:8px;max-width:84%;}
.msg.u{align-self:flex-end;flex-direction:row-reverse;}
.mb{padding:11px 15px;border-radius:14px;font-size:13.5px;line-height:1.6;}
.msg.u .mb{background:var(--orange);color:#fff;white-space:pre-wrap;box-shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 14px -4px rgba(255,107,26,.35);}
.msg.a .mb{background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:var(--shadow-sm);}
.msg.a .mb p{margin:0 0 8px 0;}
.msg.a .mb p:last-child{margin-bottom:0;}
.msg.a .mb strong{color:var(--text);font-weight:600;}
.msg.a .mb em{color:var(--text);font-style:italic;}
.msg.a .mb code{background:var(--card);border:1px solid var(--border);padding:1px 6px;border-radius:5px;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--blue-d);}
.msg.a .mb h3{font-size:13.5px;margin:10px 0 5px 0;color:var(--text);font-weight:600;}
.msg.a .mb ul,.msg.a .mb ol{margin:4px 0 8px 0;padding-left:22px;}
.msg.a .mb li{margin-bottom:3px;}
.msg.a .mb blockquote{margin:6px 0;padding:8px 12px;border-left:3px solid var(--orange);background:var(--card);color:var(--soft);border-radius:0 8px 8px 0;font-style:italic;}
.msg.a .mb blockquote p{margin:0;}
.msg.a .mb hr{border:none;border-top:1px solid var(--border);margin:8px 0;}
.mav{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;margin-top:3px;background:var(--card);border:1px solid var(--border);}
.typ{display:flex;gap:4px;padding:12px 14px;}
.typ span{width:6px;height:6px;background:var(--muted);border-radius:50%;animation:bop .9s infinite;}
.typ span:nth-child(2){animation-delay:.15s;}.typ span:nth-child(3){animation-delay:.3s;}
@keyframes bop{0%,60%,100%{transform:translateY(0);}30%{transform:translateY(-5px);}}

/* Orange pulsing indicator for the general chat ("Digital Ivan is thinking…"). */
.thinking{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;color:var(--soft);font-size:12.5px;align-self:flex-start;box-shadow:var(--shadow-sm);}
.thinking-dot{width:8px;height:8px;border-radius:50%;background:var(--orange);animation:thinkpulse 1.1s ease-in-out infinite;box-shadow:0 0 8px rgba(255,107,26,.55);}
@keyframes thinkpulse{0%,100%{transform:scale(.7);opacity:.55;}50%{transform:scale(1.15);opacity:1;}}
@keyframes freshPulse{0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,.7);}50%{box-shadow:0 0 0 4px rgba(251,191,36,0);}}
@keyframes remSlideIn{from{transform:translateY(-100%);opacity:0;}to{transform:translateY(0);opacity:1;}}

/* Composer states — focus glow + drag-over highlight. */
#gen-composer:focus-within{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,107,26,.14);}
#gen-composer.dragover{border-color:var(--orange);background:rgba(255,107,26,.04);}
.gen-attach-chip{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);padding:4px 10px;border-radius:8px;font-size:11.5px;color:var(--text);max-width:240px;}
.gen-attach-chip .x{cursor:pointer;color:var(--muted);font-weight:600;padding:0 2px;}
.gen-attach-chip .x:hover{color:var(--orange);}
.gen-followup{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px;align-self:stretch;}
.gen-followup .chip{background:transparent;border:1px solid var(--border);color:var(--muted);padding:3px 9px;border-radius:99px;font-size:11px;cursor:pointer;transition:border-color .12s,color .12s,background .12s;}
.gen-followup .chip:hover{border-color:var(--orange);color:var(--text);background:rgba(255,107,26,.04);}

/* Digital Ivan chat — uses the same .msg / .mav / .mb bubble formatting
   as the email chat (defined above) so both chat surfaces look identical.
   The lead-paragraph emphasis stays — first paragraph of an assistant
   turn is the direct answer, rendered slightly heavier than supporting
   context. Scoped to .msg.a .mb p:first-child so it applies in both
   chats (email + Digital Ivan) symmetrically. */
.msg.a .mb p:first-child {
  font-size: 15.5px; font-weight: 500; color: var(--text); margin-top: 0; line-height: 1.5;
}
/* "Next:" line — a one-liner action suggestion the model can drop at
   the end. Rendered as a subtle hint, not a heading. */
.msg.a .mb p.next-step { color: var(--muted); font-size: 12.5px; font-style: italic; margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--border); }
/* Digital Ivan #gen-msgs is a flex column like email .cmsgs — keep the
   stretched widths for the "What I checked" panel + followup chips that
   sit between bubbles. */
#gen-msgs { gap: 10px !important; }

/* Digital Ivan tab — make the chat use the full available vertical
   space. The tab is a flex column; the chat card grows to fill, with
   the "More tools" details tucked at the bottom as a thin handle. */
#general-tab.active { display: flex; flex-direction: column; padding: 14px 24px 10px; gap: 8px; }
#general-tab > .card:first-child {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0;
  margin-bottom: 0;
}
#general-tab #gen-msgs {
  max-height: none !important;
  flex: 1 1 auto;
  min-height: 0;
}
.cinput{padding:14px 20px;background:var(--surface);border-top:1px solid var(--border);display:flex;gap:8px;}
.cinput input{flex:1;background:var(--card);border:1px solid var(--border-strong);color:var(--text);padding:10px 14px;border-radius:10px;font-size:13.5px;font-family:inherit;outline:none;transition:border-color .15s, box-shadow .15s;}
.cinput input:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,107,26,.14);}
.cinput input::placeholder{color:#b1b1b6;}

/* Compose */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.fg{margin-bottom:12px;}
label{display:block;font-size:11.5px;color:var(--text);font-weight:500;margin-bottom:6px;}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],input[type=tel],input[type=url],input[type=date],textarea{width:100%;background:var(--surface);border:1px solid var(--border-strong);color:var(--text);padding:10px 12px;border-radius:10px;font-size:13px;font-family:inherit;outline:none;transition:border-color .15s, box-shadow .15s;}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=search]:focus,input[type=number]:focus,input[type=tel]:focus,input[type=url]:focus,input[type=date]:focus,textarea:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,107,26,.14);}
/* `class="select"` — used repo-wide (see e.g. _wo_report_content.html,
   task_form.html) but never actually defined until now, so every <select>
   carrying it rendered as a bare, unstyled native control instead of
   matching the text/date inputs beside it. Mirrors the input rule above
   rather than introducing a third visual language. */
select.select{width:100%;background:var(--surface);border:1px solid var(--border-strong);color:var(--text);padding:10px 12px;border-radius:10px;font-size:13px;font-family:inherit;outline:none;transition:border-color .15s, box-shadow .15s;}
select.select:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,107,26,.14);}
input[type=text]::placeholder,input[type=email]::placeholder,input[type=password]::placeholder,input[type=search]::placeholder,input[type=number]::placeholder,input[type=tel]::placeholder,input[type=url]::placeholder,textarea::placeholder{color:#b1b1b6;}
textarea{resize:vertical;min-height:80px;line-height:1.5;}
.dp{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px;font-size:12.5px;line-height:1.7;white-space:pre-wrap;min-height:100px;color:var(--text);}
.dm{font-size:11.5px;color:var(--muted);margin-bottom:8px;}
.dm span{font-weight:600;color:var(--text);}

/* Toast */
#toast{position:fixed;bottom:20px;right:20px;background:var(--green);color:#fff;padding:11px 18px;border-radius:10px;font-size:13px;font-weight:600;opacity:0;transition:opacity .3s;pointer-events:none;z-index:999;box-shadow:0 6px 20px -4px rgba(52,199,89,.45);}
#toast.show{opacity:1;}

::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25);}
@media(max-width:700px){.sgrid{grid-template-columns:repeat(2,1fr);}.cgrid{grid-template-columns:1fr;}}

/* ── Admin dashboard — sectioned, uniform, calm ───────────── */
#admin-tab{max-width:1180px;margin:0 auto;}
.admin-sec{padding:18px 2px 8px;margin:18px 0 10px;border-bottom:1px solid var(--border);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.admin-sec:first-child{margin-top:0;padding-top:0;}
.admin-sec .as-h{font-size:12px;font-weight:700;color:var(--soft);text-transform:uppercase;letter-spacing:.8px;}
.admin-sec .as-sub{font-size:11.5px;color:var(--muted);font-weight:500;}

.acard{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:12px;box-shadow:var(--shadow-sm);}
.acard.attn{border-color:rgba(255,107,26,.28);background:linear-gradient(180deg,rgba(255,107,26,.035),transparent 40%);}
.acard.warn{border-color:rgba(255,149,0,.32);background:linear-gradient(180deg,rgba(255,149,0,.04),transparent 40%);}

.ahead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px;}
.ahead h3{margin:0;font-size:15px;font-weight:600;letter-spacing:-.2px;color:var(--text);}
.ahead .actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.asub{font-size:12px;color:var(--muted);line-height:1.55;margin:2px 0 14px 0;}
.asub code{background:var(--card-2);padding:1px 6px;border-radius:5px;font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--blue-d);}

.btn-mini{padding:5px 11px;font-size:11px;font-weight:600;border-radius:7px;}

/* Stat tiles — used for counts in documents/vector-db */
.statg{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:14px;}
.stat{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:11px 13px;}
.stat .sl{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin-bottom:3px;}
.stat .sv{font-size:19px;font-weight:600;color:var(--text);letter-spacing:-.3px;font-variant-numeric:tabular-nums;line-height:1.15;}
.stat .sv.mono{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;font-weight:600;}
.stat.accent{background:linear-gradient(180deg,rgba(255,107,26,.06),transparent);border-color:rgba(255,107,26,.20);}
.stat.accent .sv{color:var(--orange);}

/* Hero counter — big number with right-aligned meta */
.hero-cnt{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 18px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px;}
.hero-cnt .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700;}
.hero-cnt .num{font-size:30px;font-weight:600;color:var(--text);letter-spacing:-.6px;line-height:1.1;margin-top:2px;}
.hero-cnt .meta{text-align:right;font-size:11.5px;color:var(--muted);line-height:1.6;}
.hero-cnt .meta b{color:var(--text);font-weight:600;}

/* 5-stage pipeline cards */
.pipe-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:14px;}
.pipe-stage{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:11px 13px;position:relative;overflow:hidden;}
.pipe-stage::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:var(--orange);}
.pipe-stage .ps-step{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin-bottom:2px;}
.pipe-stage .ps-name{font-size:13px;font-weight:600;color:var(--text);letter-spacing:-.1px;}
.pipe-stage .ps-cnt{font-size:14px;font-weight:700;color:var(--orange);margin:5px 0 7px 0;font-variant-numeric:tabular-nums;}
.pipe-stage ul{list-style:none;padding:0;margin:0;}
.pipe-stage li{font-size:10.5px;line-height:1.55;color:var(--muted);padding:1px 0;}
.pipe-stage li code{background:var(--card-2);padding:0 4px;border-radius:3px;font-family:ui-monospace,Menlo,monospace;font-size:10px;color:var(--text);}

/* Quick-jump tiles */
.qjg{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;}
.qj{background:var(--card);border:1px solid var(--border);border-radius:11px;padding:14px;text-align:left;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;gap:3px;transition:border-color .15s, background .15s, transform .08s, box-shadow .15s;}
.qj:hover{border-color:var(--orange);background:var(--surface);box-shadow:var(--shadow-sm);transform:translateY(-1px);}
.qj .qj-t{font-size:13px;font-weight:600;color:var(--text);letter-spacing:-.15px;}
.qj .qj-s{font-size:11px;color:var(--muted);line-height:1.4;}

/* Inline toolbar (search box + filters within a card) */
.atool{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px;}
.atool input[type=text], .atool select, .atool input[type=file]{background:var(--surface);border:1px solid var(--border-strong);color:var(--text);padding:8px 12px;border-radius:8px;font-size:12px;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s;}
.atool input[type=text]:focus, .atool select:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,107,26,.12);}
.atool input[type=text]{flex:1;min-width:200px;}
.atool input[type=file]{padding:6px 8px;}

/* Pill / badge — used for chips, state indicators */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:10.5px;font-weight:700;letter-spacing:.2px;border:1px solid var(--border);background:var(--card);color:var(--soft);}
.pill.green{background:rgba(52,199,89,.10);color:var(--green-d);border-color:rgba(52,199,89,.30);}
.pill.orange{background:rgba(255,107,26,.10);color:var(--orange);border-color:rgba(255,107,26,.30);}
.pill.purple{background:rgba(175,82,222,.10);color:var(--purple);border-color:rgba(175,82,222,.30);}
.pill.red{background:rgba(255,59,48,.10);color:var(--red-d);border-color:rgba(255,59,48,.30);}
.pill.muted{background:var(--card);color:var(--muted);border-color:var(--border);}

/* Shared tab bar (apps.core.page_tabs / templates/core/_page_tabs.html) —
   underline tabs for a page with more than one full-page-reload view of the
   same subject (Employees' Map/Directory/Org chart, Manager notifications'
   Alerts/Hierarchy). One definition so every adopter looks identical and a
   future visual tweak lands once. */
.page-tabs{display:flex;gap:.3rem;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-bottom:16px;}
.page-tab{background:none;border:none;border-bottom:2px solid transparent;padding:.65rem 1rem;
          font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;text-decoration:none;}
.page-tab:hover{color:var(--text);}
.page-tab.is-active{color:var(--text);border-bottom-color:var(--orange);}

/* Big "currently processing" card — calmer than the old purple-orange blast */
.proc-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:14px;}
.proc-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
.proc-title{font-size:14px;font-weight:600;color:var(--text);letter-spacing:-.15px;display:flex;align-items:center;gap:8px;}
.proc-title::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--purple);box-shadow:0 0 0 0 rgba(175,82,222,.5);animation:thinkpulse 1.1s ease-in-out infinite;}
.proc-sub{font-size:11px;color:var(--muted);margin-top:2px;}
.proc-headline{font-size:28px;font-weight:600;color:var(--purple);letter-spacing:-.5px;line-height:1;font-variant-numeric:tabular-nums;}
.proc-bar{background:rgba(0,0,0,.06);border-radius:99px;height:8px;overflow:hidden;}
.proc-bar-fill{height:100%;background:linear-gradient(90deg,var(--purple),var(--orange));border-radius:99px;transition:width .4s ease;}

/* Stage tile within proc-card */
.proc-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:12px;}
.proc-tile{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 11px;}
.proc-tile .pt-l{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700;}
.proc-tile .pt-v{font-size:16px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.15;margin-top:2px;}

/* Reconciliation row (on-disk vs in-index) */
.rec-tbl{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;font-size:12px;}
.rec-tbl .rec-head{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:700;background:var(--card-2);padding:8px 12px;border-bottom:1px solid var(--border);}
.rec-tbl .rec-row{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;padding:7px 12px;border-bottom:1px solid var(--border);align-items:center;}
.rec-tbl .rec-row:last-child{border-bottom:none;}
.rec-tbl .rec-row .num{text-align:right;font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;}

/* List row used in: namespaces, sources, recent */
.lrow{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px dashed var(--border);font-size:11.5px;}
.lrow:last-child{border-bottom:none;}
.lrow code{background:var(--card-2);padding:1px 6px;border-radius:4px;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:var(--text);}

.sub-h{font-size:10px;color:var(--soft);text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin-bottom:6px;}

/* ─── PDF SPLIT-VIEW PREVIEW ───────────────────────────────────────────
   Opens when a PDF is dropped on an invoice routine drop zone. Takes the
   LEFT half of the viewport. The rest of the page (header + main) shifts
   to the right half. A floating button on the right edge of the panel
   toggles full-screen. */
#pdf-preview-panel{position:fixed;top:0;left:0;width:50vw;height:100vh;background:var(--bg);border-right:1px solid var(--border);box-shadow:4px 0 24px rgba(0,0,0,.18);z-index:180;display:none;flex-direction:column;transition:width .25s ease;}
#pdf-preview-panel.open{display:flex;}
#pdf-preview-panel.fullscreen{width:100vw;border-right:none;}
#pdf-preview-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--card);flex-shrink:0;gap:10px;}
#pdf-preview-title{font-size:12px;color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
#pdf-preview-actions{display:flex;gap:6px;align-items:center;}
.pdf-prev-btn{background:var(--card);border:1px solid var(--border);color:var(--text);padding:5px 10px;border-radius:6px;font-size:11.5px;cursor:pointer;line-height:1;}
.pdf-prev-btn:hover{background:var(--card-2);border-color:var(--orange);}
#pdf-preview-loading{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(168,85,247,.15);overflow:hidden;display:none;pointer-events:none;}
#pdf-preview-loading.on{display:block;}
#pdf-preview-loading::after{content:"";display:block;height:100%;width:30%;background:linear-gradient(90deg,#f97316,#a855f7);animation:pdf-prev-bar 1.1s infinite ease-in-out;}
@keyframes pdf-prev-bar{0%{transform:translateX(-100%);}100%{transform:translateX(400%);}}
#pdf-preview-frame{flex:1;width:100%;border:none;background:#fff;}
#pdf-preview-fullscreen-btn{position:absolute;right:0;top:50%;transform:translate(50%,-50%);width:32px;height:72px;background:var(--orange);color:#fff;border:none;border-radius:8px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.25);z-index:182;font-size:18px;display:flex;align-items:center;justify-content:center;}
#pdf-preview-fullscreen-btn:hover{background:#ea580c;}
body.pdf-preview-fullscreen #pdf-preview-fullscreen-btn{right:12px;transform:translate(0,-50%);}

/* Shift the rest of the page right when the preview is open */
body.pdf-preview-open > header,
body.pdf-preview-open > main{margin-left:50vw;transition:margin-left .25s ease;}
body.pdf-preview-fullscreen > header,
body.pdf-preview-fullscreen > main{margin-left:0;filter:blur(1.5px);opacity:.35;pointer-events:none;}

/* Loading bar inside the original drop zone — shown briefly after drop */
.dropzone-loading{position:relative;overflow:hidden;pointer-events:none;opacity:.75;}
.dropzone-loading::after{content:"";position:absolute;left:0;bottom:0;height:4px;background:linear-gradient(90deg,#f97316,#a855f7);width:30%;border-radius:4px;animation:pdf-prev-bar 1.1s infinite ease-in-out;}

/* ─────────────────────────────────────── */

@keyframes slideUp{from{transform:translateY(24px);opacity:0;}to{transform:translateY(0);opacity:1;}}

/* ─────────────────────────────────────── */

#calendar-tab { max-width: 1100px; margin: 0 auto; }
.cal-header { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.cal-title   { font-size:20px; font-weight:700; letter-spacing:-.4px; flex:1; }
.cal-nav-btn { background:none; border:1px solid var(--border); border-radius:8px; padding:5px 12px; cursor:pointer; font-size:14px; color:var(--text); font-weight:600; }
.cal-nav-btn:hover { background:var(--card); }
.cal-month-label { font-size:16px; font-weight:700; min-width:140px; text-align:center; }
.cal-filters { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.cal-filter-btn { padding:4px 11px; border-radius:99px; border:1.5px solid var(--border); background:var(--surface); font-size:11.5px; font-weight:600; cursor:pointer; color:var(--soft); transition:all .13s; }
.cal-filter-btn:hover { border-color:#aaa; color:var(--text); }
.cal-filter-btn.active { color:#fff; border-color:transparent; }
.cal-filter-btn[data-type="all"].active     { background:#374151; }
.cal-filter-btn[data-type="inspection"].active { background:#1d4ed8; }
.cal-filter-btn[data-type="follow-up"].active  { background:#c2410c; }
.cal-filter-btn[data-type="meeting"].active    { background:#6d28d9; }
.cal-filter-btn[data-type="deadline"].active   { background:#b91c1c; }
.cal-filter-btn[data-type="other"].active      { background:#4b5563; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:0; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.cal-dow  { background:var(--card); padding:7px 4px; text-align:center; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--border); }
.cal-cell { min-height:90px; padding:6px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); cursor:pointer; transition:background .1s; position:relative; vertical-align:top; background:var(--surface); }
.cal-cell:nth-child(7n) { border-right:none; }
.cal-cell:hover { background:rgba(255,107,26,.04); }
.cal-cell.other-month { background:var(--card); opacity:.5; }
.cal-cell.today { background:rgba(255,107,26,.07); }
.cal-cell.today .cal-day-num { background:var(--orange); color:#fff; }
.cal-day-num { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; font-size:12px; font-weight:600; color:var(--text); margin-bottom:4px; }
.cal-chip { display:block; font-size:10.5px; font-weight:600; border-radius:4px; padding:2px 5px; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; line-height:1.4; }
.cal-chip:hover { filter:brightness(.93); }
.cal-chip-inspection { background:#dbeafe; color:#1d4ed8; }
.cal-chip-follow-up  { background:#ffedd5; color:#c2410c; }
.cal-chip-meeting    { background:#ede9fe; color:#6d28d9; }
.cal-chip-deadline   { background:#fee2e2; color:#b91c1c; }
.cal-chip-other      { background:#f3f4f6; color:#374151; }
.cal-chip-task       { background:#f5f3ff; color:#6d28d9; border:1px dashed #c4b5fd; }
.cal-chip-task:hover { background:#ede9fe; }
.cal-task-link { font-size:9px; opacity:.7; margin-left:3px; }
.cal-more { font-size:10px; color:var(--muted); font-weight:600; cursor:pointer; margin-top:1px; }
.cal-body { display:grid; grid-template-columns:1fr 260px; gap:18px; align-items:start; }
@media (max-width:760px) { .cal-body { grid-template-columns:1fr; } }
.cal-upcoming-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px; position:sticky; top:12px; }
.cal-upcoming-card h4 { margin:0 0 10px 0; font-size:13px; font-weight:700; }
.cal-upcoming-item { padding:8px 0; border-bottom:1px solid var(--border); cursor:pointer; }
.cal-upcoming-item:last-child { border-bottom:none; }
.cal-upcoming-item:hover .cal-upcoming-title { color:var(--orange); }
.cal-upcoming-title { font-size:13px; font-weight:600; }
.cal-upcoming-meta  { font-size:11px; color:var(--muted); margin-top:2px; }
.cal-upcoming-dot   { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; flex-shrink:0; }
#cal-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:200; align-items:center; justify-content:center; }
#cal-modal.open { display:flex; }
#cal-modal-box { background:var(--surface); border-radius:16px; padding:24px; width:480px; max-width:95vw; max-height:90vh; overflow-y:auto; box-shadow:0 8px 40px rgba(0,0,0,.22); }
#cal-modal-box h3 { margin:0 0 16px 0; font-size:16px; font-weight:700; }
.cal-form-row { margin-bottom:12px; }
.cal-form-row label { display:block; font-size:11px; font-weight:700; color:var(--muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:.4px; }
.cal-form-row input, .cal-form-row select, .cal-form-row textarea { width:100%; font-size:13px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--card); color:var(--text); font-family:inherit; box-sizing:border-box; }
.cal-form-row textarea { resize:vertical; min-height:60px; }
.cal-form-row input:focus, .cal-form-row select:focus, .cal-form-row textarea:focus { outline:none; border-color:var(--orange); }
.cal-form-row-half { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cal-modal-btns { display:flex; gap:8px; margin-top:18px; justify-content:flex-end; }

/* ── 10-day view ── */
.cal-view-toggle { display:flex; gap:0; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.cal-view-toggle button { padding:5px 14px; background:none; border:none; font-size:12px; font-weight:600; color:var(--soft); cursor:pointer; transition:all .12s; }
.cal-view-toggle button:hover { color:var(--text); background:var(--card); }
.cal-view-toggle button.active { background:var(--orange); color:#fff; }
.cal-10day-grid { display:grid; grid-template-columns:repeat(10,1fr); gap:0; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.cal-10day-col { border-right:1px solid var(--border); min-height:300px; }
.cal-10day-col:last-child { border-right:none; }
.cal-10day-hdr { padding:8px 6px 6px; border-bottom:1px solid var(--border); background:var(--card); text-align:center; }
.cal-10day-hdr .c10-dow { font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.cal-10day-hdr .c10-date { font-size:15px; font-weight:700; color:var(--text); margin-top:2px; }
.cal-10day-col.today-col .c10-date { background:var(--orange); color:#fff; border-radius:50%; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; }
.cal-10day-events { padding:5px 4px; display:flex; flex-direction:column; gap:3px; }
.cal-10day-chip { font-size:10.5px; font-weight:600; border-radius:5px; padding:4px 6px; cursor:pointer; line-height:1.4; word-break:break-word; }
.cal-10day-chip:hover { filter:brightness(.93); }
.cal-10day-chip .c10-time { display:block; font-size:9.5px; opacity:.8; margin-bottom:1px; }
.cal-10day-empty { font-size:10px; color:var(--muted); padding:6px 5px; text-align:center; }

/* ─────────────────────────────────────── */

/* Layout */
    .wb-wrap { padding: 24px 28px; max-width: 1400px; margin: 0 auto; background:#f7f7f9; min-height: calc(100vh - 100px); }
    .wb-header { background:#fff; border:1px solid #e2e2e7; border-radius:12px; padding:20px 24px; margin-bottom:18px; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
    .wb-title-row { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
    .wb-title { margin:0; font-size:26px; font-weight:700; letter-spacing:-0.4px; color:#1a1a1f; }
    .wb-subtitle { color:#888; font-size:13px; padding:4px 10px; background:#fff4cc; border-radius:5px; }
    .wb-summary { color:#555; font-size:13px; margin-bottom:14px; }
    .wb-toolbar { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
    .wb-search { padding:11px 16px; border:1.5px solid #d8d8de; border-radius:10px; font-size:14px; min-width:340px; flex:1; transition:border-color .15s; }
    .wb-search:focus { outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,107,26,0.1); }
    .wb-ai-banner { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
    .wb-ai-tag { background:linear-gradient(135deg,var(--orange),#ff9a4d); color:#fff; font-weight:700; font-size:11px; padding:2px 9px; border-radius:999px; white-space:nowrap; }
    .wb-ai-scope { font-size:11px; color:#8a6d3b; background:#fff6e9; border:1px solid #f0d9b5; padding:1px 8px; border-radius:999px; white-space:nowrap; }
    .wb-ai-clear { font-size:12px; color:var(--orange); cursor:pointer; font-weight:600; }
    .wb-ai-clear:hover { text-decoration:underline; }
    .wb-ai-answer { flex-basis:100%; margin-top:7px; padding:9px 12px; background:#fff6e9; border-left:3px solid var(--orange); border-radius:8px; font-size:13.5px; line-height:1.5; color:var(--text,#222); }

    /* Stage chips — bigger, clearer */
    .wb-stage-chips { display:flex; gap:8px; flex-wrap:wrap; }
    .wb-chip { padding:10px 18px; border:1.5px solid #d8d8de; border-radius:24px; background:#fff; cursor:pointer; font-size:13px; font-weight:500; user-select:none; transition:all .12s; display:inline-flex; align-items:center; gap:8px; }
    .wb-chip:hover { border-color:#a8a8b0; background:#f5f5f7; }
    .wb-chip.active { background:var(--orange); color:#fff; border-color:var(--orange); box-shadow:0 2px 6px rgba(255,107,26,0.25); }
    .wb-chip-count { background:rgba(0,0,0,0.08); padding:2px 9px; border-radius:11px; font-size:11px; font-weight:700; min-width:20px; text-align:center; }
    .wb-chip.active .wb-chip-count { background:rgba(255,255,255,0.25); color:#fff; }

    /* Kanban — Label → Follow up → Bill → Done. Done is collapsed; the
       three actionable stages get equal width. */
    .wb-list { display:block; }
    .wb-col { background:#fff; border:1px solid #e2e2e7; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; max-height: calc(100vh - 290px); }
    .wb-col-head { padding:14px 18px; border-bottom:2px solid; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
    /* Fork board: To Be Confirmed (amber) → Simple (blue) | Complex (orange) → Done (green) */
    .wb-col-label      { border-top:4px solid #c77a00; } .wb-col-label .wb-col-head      { background:#fff4e0; border-bottom-color:#f0c070; }
    .wb-col-simple     { border-top:4px solid #2a8ad6; } .wb-col-simple .wb-col-head     { background:#e6f1fb; border-bottom-color:#7fb3df; }
    .wb-col-complex    { border-top:4px solid #e07b00; } .wb-col-complex .wb-col-head    { background:#fdeede; border-bottom-color:#f0b070; }
    .wb-col-done       { border-top:4px solid #0c5132; } .wb-col-done .wb-col-head       { background:#dff0e3; border-bottom-color:#5ac08a; }
    /* legacy classes kept so any un-remapped row still styles */
    .wb-col-follow-up  { border-top:4px solid #2a8ad6; } .wb-col-follow-up .wb-col-head  { background:#e6f1fb; border-bottom-color:#7fb3df; }
    .wb-col-bill       { border-top:4px solid #6a3eb0; } .wb-col-bill .wb-col-head       { background:#efeafa; border-bottom-color:#a98fd4; }
    .wb-col-title { font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:#3a3a45; }
    .wb-col-count { background:rgba(0,0,0,0.08); padding:3px 10px; border-radius:10px; font-size:12px; font-weight:700; color:#3a3a45; }
    .wb-col-body { padding:12px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:10px; }
    .wb-col-empty { padding:30px 14px; text-align:center; color:#aaa; font-size:13px; font-style:italic; }

    /* Compact kanban card */
    .wb-list-flat { display:flex; flex-direction:column; gap:14px; }
    .wb-card { border:1px solid #e2e2e7; border-radius:10px; padding:0; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.05); overflow:hidden; transition:box-shadow .15s,border-color .15s; }
    .wb-card:hover { box-shadow:0 4px 12px rgba(0,0,0,0.10); border-color:#d0d0d8; }
    .wb-card-top { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid #f0f0f3; flex-wrap:wrap; }
    .wb-card-body { padding:12px 14px; }
    .wb-card-foot { padding:10px 14px; border-top:1px solid #f0f0f3; background:#fafafc; }

    /* Inline data-entry fields */
    .wb-fields { display:flex; flex-direction:column; gap:8px; margin-top:10px; padding-top:10px; border-top:1px dashed #e2e2e7; }
    .wb-field { display:flex; flex-direction:column; gap:3px; }
    .wb-field-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#888; }
    .wb-input { padding:6px 10px; border:1px solid #d8d8de; border-radius:6px; font-size:12px; font-family:inherit; background:#fff; transition:border-color .12s, background .12s; }
    .wb-input:focus { outline:none; border-color:var(--orange); background:#fffaf5; }
    .wb-input.wb-dirty { border-color:#f0a020; background:#fff8e8; }
    .wb-textarea { padding:6px 10px; border:1px solid #d8d8de; border-radius:6px; font-size:12px; font-family:inherit; resize:vertical; min-height:44px; background:#fff; transition:border-color .12s, background .12s; }
    .wb-textarea:focus { outline:none; border-color:var(--orange); background:#fffaf5; }
    .wb-textarea.wb-dirty { border-color:#f0a020; background:#fff8e8; }
    .wb-save-hint { font-size:10px; color:#f0a020; font-weight:600; margin-left:auto; }

    /* Stage pill — bigger */
    .wb-stage { padding:6px 12px; border-radius:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; }
    .wb-stage-label     { background:#fff4e0; color:#7a4500; border:1px solid #f0c070; }
    .wb-stage-follow-up { background:#e6f1fb; color:#0c4b78; border:1px solid #7fb3df; }
    .wb-stage-bill      { background:#efeafa; color:#3a2070; border:1px solid #a98fd4; }
    .wb-stage-done      { background:#cfead9; color:#0c5132; border:1px solid #5ac08a; }
    /* Action buttons — per-stage colors */
    .wb-act-label     { background:#dc2626; color:#fff; border-color:#dc2626; font-weight:700; box-shadow:0 0 0 2px rgba(220,38,38,0.25); }
    .wb-act-label:hover { background:#b91c1c; border-color:#b91c1c; }
    .wb-act-follow-up { background:#2a8ad6; color:#fff; border-color:#2a8ad6; }
    .wb-act-follow-up:hover { background:#1f6fb0; }
    /* Label Focus primary CTA — green = "confirm, advance to follow-up". Made
       visually loud so it's obviously THE action on the page. */
    .lf-confirm-cta { background:#16a34a; color:#fff; border-color:#16a34a; box-shadow:0 2px 9px rgba(22,163,74,.38); }
    .lf-confirm-cta:hover { background:#15803d; border-color:#15803d; box-shadow:0 3px 13px rgba(22,163,74,.5); }
    .lf-confirm-cta:active { transform:translateY(1px); box-shadow:0 1px 5px rgba(22,163,74,.4); }
    .lf-confirm-cta:disabled { background:#9ad3ad; border-color:#9ad3ad; box-shadow:none; cursor:default; }
    /* Label-Focus confirm button forced red w/ white text for legibility. Scoped to the
       id (not .lf-confirm-cta) so the shared green confirm buttons elsewhere stay green. */
    #lf-confirm-btn { background:#dc2626; color:#fff; border-color:#dc2626; box-shadow:0 2px 9px rgba(220,38,38,.38); }
    #lf-confirm-btn:hover { background:#b91c1c; border-color:#b91c1c; box-shadow:0 3px 13px rgba(220,38,38,.5); }
    #lf-confirm-btn:active { transform:translateY(1px); box-shadow:0 1px 5px rgba(220,38,38,.4); }
    #lf-confirm-btn:disabled { background:#e05252; border-color:#e05252; color:#fff; box-shadow:none; cursor:default; }
    /* Compound selectors (.wb-btn.X) so the colored background beats the base
       .wb-btn white — without this, white text lands on a white bg. */
    .wb-btn.wb-act-bill      { background:#6a3eb0; color:#fff; border-color:#6a3eb0; }
    .wb-btn.wb-act-bill:hover { background:#522e8c; }
    .wb-btn.wb-act-done      { background:#0c5132; color:#fff; border-color:#0c5132; }
    .wb-btn.wb-act-done:hover { background:#093d26; }

    .wb-kind-badge { font-size:10px; padding:3px 9px; border-radius:4px; background:#eee; text-transform:uppercase; font-weight:700; letter-spacing:0.3px; }
    .wb-kind-email { background:#fff2d4; color:#8a5a00; }
    .wb-kind-wo    { background:#d8efd8; color:#0a5a0a; }
    /* Origin-lane badge — shows whether a downstream WO was tagged Simple or
       Complex back at the fork, so Ready/Generated/Done still carry that. */
    .wb-lane-badge { font-size:10px; padding:3px 9px; border-radius:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; display:inline-flex; align-items:center; gap:4px; }
    .wb-lane-simple  { background:#e6f1fb; color:#0c4b78; border:1px solid #7fb3df; }
    .wb-lane-complex { background:#fdeede; color:#9a4a00; border:1px solid #f0b070; }
    /* Bill tier (1–3) — the surfaced classification that replaces Simple/Complex. */
    .wb-tier-badge { font-size:10px; padding:3px 9px; border-radius:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; display:inline-flex; align-items:center; gap:4px; }
    .wb-tier1 { background:#e7f5ec; color:#0f7a3d; border:1px solid #86cfa4; }
    .wb-tier2 { background:#fdeede; color:#9a4a00; border:1px solid #f0b070; }
    .wb-tier3 { background:#fbe7e7; color:#9b1c1c; border:1px solid #e79b9b; }
    /* Job-completion gate — a Simple/Complex WO can't be billed until done. */
    .wb-complete-row { display:flex; align-items:center; gap:8px; margin:10px 0 0; padding-top:10px; border-top:1px dashed #e2e2e7; }
    .wb-complete-flag { font-size:11px; font-weight:700; padding:4px 10px; border-radius:12px; display:inline-flex; align-items:center; gap:5px; }
    .wb-complete-yes { background:#cfead9; color:#0c5132; border:1px solid #5ac08a; }
    .wb-complete-no  { background:#fff4e0; color:#7a4500; border:1px solid #f0c070; }
    .wb-btn.wb-act-complete { background:#16a34a; color:#fff; border-color:#16a34a; }
    .wb-btn.wb-act-complete:hover { background:#15803d; border-color:#15803d; }
    /* Named piles: new-pile (light) + generate-pile (solid purple, white text on color — never white-on-white) */
    .wb-btn.wb-act-new-pile { background:#efe9fb; color:#5b3aa0; border-color:#d9cef0; }
    .wb-btn.wb-act-new-pile:hover { background:#e4daf6; border-color:#c9b9ec; }
    .wb-btn.wb-act-gen-pile { background:#6a3eb0; color:#fff; border-color:#6a3eb0; }
    .wb-btn.wb-act-gen-pile:hover { background:#522e8c; border-color:#522e8c; }
    .wb-btn.wb-act-gen-pile[disabled] { background:#ece9f3; color:#b3a9cb; border-color:#ddd7ea; cursor:not-allowed; }
    .ready-pile.drag-over { outline:2px dashed #6a3eb0; outline-offset:2px; background:#f3effb !important; }
    /* Invoice AI-match: suggest (light indigo) + confirm (green, white on color) */
    .wb-btn.wb-act-suggest { background:#eef0ff; color:#3730a3; border-color:#c7cbf5; }
    .wb-btn.wb-act-suggest:hover { background:#e3e6fd; border-color:#b3b8f0; }
    .wb-btn.wb-act-confirm-match { background:#16a34a; color:#fff; border-color:#16a34a; }
    .wb-btn.wb-act-confirm-match:hover { background:#15803d; border-color:#15803d; }
    /* Ready "build your shards" interactivity */
    .ready-pg { transition:transform .08s ease, box-shadow .12s ease; }
    .ready-pg:hover { transform:translateY(-2px); box-shadow:0 5px 16px rgba(0,0,0,.13); }
    .ready-pg:active { transform:translateY(0); }
    .ready-lane { transition:border-color .12s ease, box-shadow .12s ease; }
    .ready-lane:hover { border-color:#b9b9c2; }
    .ready-zoombtn { background:rgba(255,255,255,.92); border:1px solid #d8d8de; border-radius:6px; cursor:zoom-in; font-size:12px; padding:2px 7px; line-height:1.4; }
    .ready-zoombtn:hover { background:#fff; border-color:#a8a8b0; }
    .wb-act-uncomplete { color:#0c5132; border-color:#9ad3ad; background:#fff; }
    .wb-act-uncomplete:hover { background:#f0faf3; }
    /* Solid blue action (Mark complete + Ready to bill) — solid even when the
       Ready button is disabled, so it reads as a real button, not a ghost.
       Compound selector so it wins over the base .wb-btn white. */
    .wb-btn.wb-act-blue { background:#2a8ad6; color:#fff; border:1.5px solid #2a8ad6; font-weight:700; }
    .wb-btn.wb-act-blue:hover { background:#1f6fb0; border-color:#1f6fb0; }
    .wb-btn.wb-act-blue:disabled { background:#5e93c4; border-color:#5e93c4; color:#fff; cursor:default; box-shadow:none; }
    /* Lane re-route (→ Complex / → Simple) — a SECONDARY choice, so it's a soft
       outlined button, not a third loud filled color competing with the primaries. */
    .wb-btn.wb-act-purple { background:#f4f0fb; color:#5b3aa0; border:1.5px solid #ddd0f2; font-weight:600; }
    .wb-btn.wb-act-purple:hover { background:#ece3f8; border-color:#cbb9ec; }
    /* Send-back-one-stage — a quiet neutral "go back" control. */
    .wb-btn.wb-act-back { background:#f6f6f8; color:#555; border:1.5px solid #e2e2e8; font-weight:600; }
    .wb-btn.wb-act-back:hover { background:#ededf1; color:#333; border-color:#cfcfd6; }

    /* Due-date traffic light — colored left edge + badge by "completed by" date. */
    .wb-card.wb-due-red    { border-left:5px solid #dc2626; }
    .wb-card.wb-due-yellow { border-left:5px solid #f0a020; }
    .wb-card.wb-due-green  { border-left:5px solid #16a34a; }
    .wb-due-badge { font-size:10px; font-weight:800; padding:3px 9px; border-radius:11px; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
    .wb-due-badge.red    { background:#fde5e5; color:#a01818; border:1px solid #f0a0a0; }
    .wb-due-badge.yellow { background:#fff4e0; color:#7a4500; border:1px solid #f0c070; }
    .wb-due-badge.green  { background:#cfead9; color:#0c5132; border:1px solid #5ac08a; }

    /* WO reference photos (not used by the AI — storage only). */
    .wb-photos { margin-top:10px; padding-top:10px; border-top:1px dashed #e2e2e7; }
    .wb-photos-h { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#888; margin-bottom:7px; display:flex; align-items:center; gap:6px; }
    .wb-photos-h .hint { font-weight:600; text-transform:none; letter-spacing:0; color:#b0b0b8; font-size:10px; }
    .wb-photo-grid { display:flex; flex-wrap:wrap; gap:8px; }
    .wb-photo { position:relative; width:64px; height:64px; border-radius:8px; overflow:hidden; border:1px solid #e2e2e7; background:#f3f3f7; }
    .wb-photo img { width:100%; height:100%; object-fit:cover; cursor:pointer; display:block; }
    .wb-photo .del { position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,0.6); color:#fff; border:none; cursor:pointer; font-size:12px; line-height:1; display:grid; place-items:center; opacity:0; transition:opacity .12s; }
    .wb-photo:hover .del { opacity:1; }
    .wb-photo-add { width:64px; height:64px; border-radius:8px; border:1.5px dashed #c8c8d0; background:#fafafc; cursor:pointer; display:grid; place-items:center; color:#999; font-size:11px; font-weight:600; text-align:center; line-height:1.2; transition:all .12s; }
    .wb-photo-add:hover { border-color:var(--orange); color:var(--orange); background:#fffaf5; }

    .wb-wo-num { font-weight:700; font-size:14px; font-family:ui-monospace,SF Mono,Menlo,monospace; color:#1a1a1f; letter-spacing:-0.2px; }
    .wb-addr { color:#666; font-size:12px; flex-basis:100%; }
    .wb-addr-icon { color:#999; margin-right:4px; }

    /* Body — invoice block */
    .wb-inv-block { }
    .wb-inv-headline { display:flex; align-items:center; gap:14px; margin-bottom:10px; flex-wrap:wrap; }
    .wb-confidence { font-size:11px; padding:4px 10px; border-radius:5px; font-weight:700; letter-spacing:0.3px; }
    .wb-conf-SAFE     { background:#cfead9; color:#0c5132; }
    .wb-conf-PROBABLE { background:#fff4cc; color:#7a5a00; }
    .wb-conf-LOW      { background:#fde5d4; color:#a13d00; }
    .wb-total { font-weight:700; font-size:22px; color:#1a1a1f; }
    .wb-date { color:#888; font-size:13px; }
    .wb-items { font-size:13px; color:#3a3a45; margin:6px 0 10px; line-height:1.6; }
    .wb-just { color:#555; font-size:13px; line-height:1.55; padding:10px 14px; background:#fafafa; border-left:3px solid #d8d8de; border-radius:4px; margin-top:8px; }

    /* Body — email block */
    .wb-email-block { font-size:14px; line-height:1.55; }
    .wb-email-row { display:flex; gap:8px; margin-bottom:5px; align-items:baseline; }
    .wb-email-label { font-weight:600; color:#666; font-size:12px; text-transform:uppercase; letter-spacing:0.3px; min-width:70px; }
    .wb-email-val { color:#1a1a1f; }
    .wb-email-text { color:#555; font-size:13px; line-height:1.6; padding:10px 14px; background:#fafafa; border-left:3px solid #d8d8de; border-radius:4px; margin-top:10px; }
    .wb-cls-yes { color:#0a5a0a; font-size:12px; margin-top:8px; font-weight:600; }
    .wb-cls-no  { color:#888; font-size:12px; margin-top:8px; }

    /* Labels + actions */
    .wb-labels { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
    .wb-label { background:#e8e8ee; color:#3a3a45; padding:4px 11px; border-radius:14px; font-size:12px; display:inline-flex; align-items:center; font-weight:500; }
    .wb-label .x { margin-left:7px; cursor:pointer; opacity:0.5; font-size:14px; line-height:1; }
    .wb-label .x:hover { opacity:1; color:#a00; }
    .wb-label-input { padding:4px 11px; border:1px dashed #b8b8c0; border-radius:14px; font-size:12px; width:120px; background:transparent; outline:none; transition:border-color .15s; }
    .wb-label-input:focus { border-color:var(--orange); background:#fff; }

    .wb-actions { display:flex; gap:7px; margin-top:12px; flex-wrap:wrap; }
    .wb-btn { display:inline-flex; align-items:center; justify-content:center; gap:5px;
      font-size:12.5px; line-height:1; padding:8px 13px; cursor:pointer; border-radius:8px;
      border:1px solid #dcdce3; background:#fff; color:#33333b; font-weight:600;
      transition:transform .1s, box-shadow .12s, background .12s, border-color .12s; }
    .wb-btn:hover { background:#f6f6f8; border-color:#c2c2cc; }
    .wb-btn:active { transform:translateY(1px); }
    /* Filled actions get a touch of depth so the row reads as real buttons. */
    .wb-btn.wb-act-complete, .wb-btn.wb-act-blue, .wb-btn.wb-act-done,
    .wb-btn.wb-act-bill, .wb-btn.wb-act-uncomplete { box-shadow:0 1px 2px rgba(0,0,0,.12); }
    .wb-btn-primary { background:var(--orange); color:#fff; border-color:var(--orange); }
    .wb-btn-primary:hover { background:#e85c0e; border-color:#e85c0e; }
    .wb-btn-danger { color:#b42318; border-color:#f3c6c1; background:#fff; }
    .wb-btn-danger:hover { background:#fef3f2; border-color:#eda29b; color:#7a1810; }

    .wb-empty { text-align:center; padding:60px 20px; color:#888; background:#fff; border-radius:12px; border:1px dashed #d8d8de; }
    .wb-empty-icon { font-size:48px; opacity:0.4; margin-bottom:12px; }

    /* ─── View toggle (Accounting | Operational) ─── */
    .wbv-toggle { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
    .wbv-tab { padding:10px 22px; border:1.5px solid #d8d8de; border-radius:24px; background:#fff; cursor:pointer; font-size:14px; font-weight:600; color:#3a3a45; transition:all .12s; }
    .wbv-tab:hover { border-color:#a8a8b0; background:#f5f5f7; }
    .wbv-tab.active { background:#1a1a1f; color:#fff; border-color:#1a1a1f; box-shadow:0 2px 8px rgba(0,0,0,0.18); }
    .wbv-hint { font-size:12px; color:#888; }

    /* ─── Operational weekly calendar ─── */
    .wbo-layout { display:grid; grid-template-columns:260px 1fr; gap:16px; align-items:start; }
    .wbo-pool { background:#fff; border:1px solid #e2e2e7; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; max-height:calc(100vh - 250px); position:sticky; top:12px; }
    .wbo-pool-head { padding:13px 16px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#7a4500; background:#fff4e0; border-bottom:2px solid #f0c070; display:flex; align-items:center; gap:8px; }
    .wbo-pool-count { background:rgba(0,0,0,0.08); padding:2px 9px; border-radius:11px; font-size:11px; font-weight:700; }
    .wbo-pool-body { padding:10px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:8px; min-height:120px; }
    .wbo-week { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
    .wbo-day { background:#fff; border:1px solid #e2e2e7; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; min-height:180px; }
    .wbo-day.wbo-today { border-color:var(--orange); box-shadow:0 0 0 2px rgba(255,107,26,0.18); }
    .wbo-day.wbo-dragover { border-color:#2a8ad6; background:#eef6fd; }
    .wbo-day-head { padding:9px 12px; border-bottom:1px solid #f0f0f3; display:flex; align-items:baseline; justify-content:space-between; background:#fafafc; }
    .wbo-day-name { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#3a3a45; }
    .wbo-day-date { font-size:11px; color:#999; }
    .wbo-day.wbo-today .wbo-day-name { color:var(--orange); }
    .wbo-day-body { padding:8px; flex:1; display:flex; flex-direction:column; gap:8px; }
    .wbo-day-empty { color:#c4c4cc; font-size:11px; font-style:italic; text-align:center; padding:14px 4px; }

    /* Operational job card */
    .wbo-card { border:1px solid #e2e2e7; border-left:4px solid #c77a00; border-radius:8px; background:#fff; padding:9px 10px; box-shadow:0 1px 2px rgba(0,0,0,0.04); cursor:grab; }
    .wbo-card:active { cursor:grabbing; }
    .wbo-card.wbo-dragging { opacity:0.45; }
    .wbo-card-wo { font-weight:700; font-size:12px; font-family:ui-monospace,Menlo,monospace; color:#1a1a1f; }
    .wbo-card-addr { font-size:11px; color:#666; margin:2px 0 6px; line-height:1.35; }
    .wbo-card-type { display:inline-block; font-size:10px; font-weight:700; padding:2px 7px; border-radius:9px; background:#eef1f6; color:#3a4a5a; margin-bottom:6px; }
    .wbo-who { display:flex; align-items:center; gap:5px; }
    .wbo-who-sel { flex:1; padding:5px 7px; border:1px solid #d8d8de; border-radius:6px; font-size:11px; font-family:inherit; background:#fff; }
    .wbo-who-sel.wbo-ok { border-color:#5ac08a; background:#f3fbf6; }
    .wbo-who-sel.wbo-warn { border-color:#f0a020; background:#fff8e8; }
    .wbo-skills { margin-top:6px; display:flex; flex-wrap:wrap; gap:3px; }
    .wbo-skill { font-size:9px; padding:1px 6px; border-radius:8px; background:#eef1f6; color:#566; }
    .wbo-warn-msg { font-size:10px; color:#9a5a00; margin-top:4px; }
    /* Duration + auto/locked state */
    .wbo-card-meta { display:flex; align-items:center; gap:6px; margin-bottom:6px; flex-wrap:wrap; }
    .wbo-dur { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:700; color:#3a4a5a; background:#eef1f6; border-radius:9px; padding:2px 7px; }
    .wbo-dur input { width:30px; border:none; background:transparent; font-size:10px; font-weight:700; color:#3a4a5a; text-align:right; font-family:inherit; padding:0; }
    .wbo-dur input:focus { outline:none; }
    .wbo-card.wbo-auto { border-left-style:dashed; }
    .wbo-tag-auto   { font-size:9px; font-weight:700; padding:1px 6px; border-radius:8px; background:#eef6fd; color:#1f6fb0; }
    .wbo-tag-locked { font-size:9px; font-weight:700; padding:1px 6px; border-radius:8px; background:#fff4e0; color:#7a4500; }
    /* Day capacity / overtime */
    .wbo-day-load { font-size:10px; font-weight:700; color:#16a34a; }
    .wbo-day.wbo-over .wbo-day-load { color:#dc2626; }
    .wbo-over-msg { font-size:10px; color:#a01818; background:#fde5e5; border-top:1px solid #f0a0a0; padding:5px 8px; font-weight:600; }

    /* ───────────────────────────────────────────────────────────────
       GRAPH VIEW — the pipeline drawn as a left→right directed graph.
       To Be Confirmed ─┬─ Simple ─┐
                        └─ Complex ┴─ Ready ── Generated ── Done
       Nodes are clickable; clicking one drills its work orders into the
       panel below. Edges are an SVG layer measured from the live layout.
       ─────────────────────────────────────────────────────────────── */
    .wb-graph-card { background:#fff; border:1px solid #e2e2e7; border-radius:16px; padding:8px 12px 4px; margin-bottom:18px; box-shadow:0 1px 3px rgba(0,0,0,0.04); overflow-x:auto; }
    .wb-cleanse-btn { position:absolute; top:12px; right:14px; z-index:3; cursor:pointer;
      font-size:12px; font-weight:600; color:#b8456b; background:#fff;
      border:1px solid #e6c2cf; border-radius:8px; padding:6px 11px; line-height:1;
      box-shadow:0 1px 2px rgba(0,0,0,.04); transition:background .12s,border-color .12s; }
    .wb-cleanse-btn:hover { background:#fdf2f6; border-color:#d98bab; }
    .wb-cleanse-btn:disabled { opacity:.55; cursor:default; }
    .wb-review-btn { position:absolute; top:12px; right:160px; z-index:3; cursor:pointer;
      font-size:12px; font-weight:600; color:#2a6fb0; background:#fff;
      border:1px solid #c2d8ec; border-radius:8px; padding:6px 11px; line-height:1;
      box-shadow:0 1px 2px rgba(0,0,0,.04); transition:background .12s,border-color .12s; }
    .wb-review-btn:hover { background:#f2f8fd; border-color:#8bb6d9; }
    /* ── Review carousel ─────────────────────────────────────────────── */
    .rev-overlay { position:fixed; inset:0; z-index:9000; background:rgba(20,22,28,.55);
      display:none; align-items:stretch; justify-content:center; }
    .rev-overlay.open { display:flex; }
    .rev-shell { background:#f6f7f9; width:100%; max-width:1500px; margin:18px; border-radius:14px;
      display:flex; flex-direction:column; overflow:hidden; box-shadow:0 18px 60px rgba(0,0,0,.35); }
    .rev-head { display:flex; align-items:center; gap:14px; padding:12px 18px; background:#fff;
      border-bottom:1px solid #e7e9ee; flex:0 0 auto; }
    .rev-head .rev-counter { font-weight:700; font-size:14px; color:#1b2330; min-width:90px; }
    .rev-head select, .rev-head input { font-size:13px; padding:5px 8px; border:1px solid #d6d9e0;
      border-radius:7px; background:#fff; }
    .rev-nav-btn { cursor:pointer; border:1px solid #d6d9e0; background:#fff; border-radius:7px;
      width:34px; height:30px; font-size:15px; line-height:1; }
    .rev-nav-btn:hover { background:#f0f2f6; }
    .rev-nav-btn:disabled { opacity:.4; cursor:default; }
    .rev-spacer { flex:1 1 auto; }
    .rev-close { cursor:pointer; border:none; background:#eef0f4; border-radius:7px; width:32px; height:30px; font-size:16px; }
    .rev-body { display:grid; grid-template-columns:1fr 1fr; gap:0; flex:1 1 auto; min-height:0; }
    .rev-pane { overflow:auto; padding:18px; }
    .rev-pane.rev-left { background:#2b2f3a; }
    .rev-pane.rev-right { background:#f6f7f9; border-left:1px solid #e2e4ea; }
    .rev-pane-title { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
      margin:0 0 12px; }
    .rev-left .rev-pane-title { color:#9aa3b2; }
    .rev-right .rev-pane-title { color:#7a8290; }
    .rev-img { width:100%; border-radius:8px; margin-bottom:12px; box-shadow:0 2px 10px rgba(0,0,0,.3);
      background:#fff; display:block; }
    .rev-pagewrap { position:relative; margin-bottom:12px; }
    .rev-pageno { position:absolute; top:8px; left:8px; background:rgba(0,0,0,.6); color:#fff;
      font-size:11px; padding:2px 7px; border-radius:5px; }
    .rev-card { background:#fff; border-radius:10px; padding:16px 18px; color:#1b2330; line-height:1.55; }
    .rev-card .rev-meta { font-size:12.5px; color:#3a4150; margin-bottom:4px; }
    .rev-card .rev-meta b { color:#1b2330; }
    .rev-card .rev-bodytext { margin-top:12px; padding-top:12px; border-top:1px solid #eceef2;
      white-space:pre-wrap; font-size:13px; color:#2a3140; }
    .rev-card mark { background:#fff2a8; padding:0 2px; border-radius:3px; }
    .rev-field { margin-bottom:12px; }
    .rev-field label { display:block; font-size:11px; font-weight:700; color:#6a7280; margin-bottom:4px; }
    .rev-field input, .rev-field textarea, .rev-field select { width:100%; box-sizing:border-box;
      font-size:13px; padding:7px 9px; border:1px solid #d6d9e0; border-radius:7px; background:#fff; font-family:inherit; }
    .rev-field textarea { min-height:64px; resize:vertical; }
    .rev-field input[readonly] { background:#eef0f4; color:#6a7280; }
    .rev-row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .rev-savebar { display:flex; align-items:center; gap:10px; margin:6px 0 18px; }
    .rev-save-btn { cursor:pointer; background:#2a8ad6; color:#fff; border:none; border-radius:8px;
      padding:8px 16px; font-weight:600; font-size:13px; }
    .rev-save-btn:disabled { opacity:.5; cursor:default; }
    .rev-saved { font-size:12px; color:#1a8a4a; font-weight:600; }
    .rev-ai { background:#fff; border:1px solid #e2e4ea; border-radius:10px; padding:14px; }
    .rev-ai h4 { margin:0 0 8px; font-size:12px; color:#3a4150; font-weight:700; }
    .rev-ai-row { display:flex; gap:8px; }
    .rev-ai-row input { flex:1; font-size:13px; padding:8px 10px; border:1px solid #d6d9e0; border-radius:7px; }
    .rev-ai-btn { cursor:pointer; background:#6a3eb0; color:#fff; border:none; border-radius:7px; padding:8px 14px; font-weight:600; font-size:13px; }
    .rev-ai-btn:disabled { opacity:.5; cursor:default; }
    .rev-ai-hint { font-size:11px; color:#9aa3b2; margin-top:7px; }
    .rev-diff { margin-top:12px; border-top:1px solid #eceef2; padding-top:12px; }
    .rev-diff-row { font-size:12.5px; margin-bottom:7px; }
    .rev-diff-row .rev-df-field { font-weight:700; color:#3a4150; }
    .rev-diff-row .rev-df-from { color:#b8456b; text-decoration:line-through; }
    .rev-diff-row .rev-df-to { color:#1a8a4a; font-weight:600; }
    .rev-diff-note { font-size:12px; color:#6a7280; font-style:italic; margin:6px 0 12px; }
    .rev-diff-actions { display:flex; gap:8px; }
    .rev-apply-btn { cursor:pointer; background:#1a8a4a; color:#fff; border:none; border-radius:7px; padding:7px 14px; font-weight:600; font-size:13px; }
    .rev-reject-btn { cursor:pointer; background:#eef0f4; color:#3a4150; border:none; border-radius:7px; padding:7px 14px; font-weight:600; font-size:13px; }
    .rev-loading { color:#9aa3b2; font-size:13px; padding:20px 0; }
    .wb-graph-wrap { position:relative; min-width:920px; }
    .wb-graph-edges { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; overflow:visible; }
    .wb-edge { fill:none; stroke:#c9ccd6; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:7 7; animation:wb-flow 1.1s linear infinite; }
    @keyframes wb-flow { to { stroke-dashoffset:-14; } }
    .wb-graph-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(7,1fr); grid-template-rows:1fr 1fr; column-gap:48px; row-gap:24px; padding:34px 26px; align-items:center; }

    /* A node = one stage. Accent color comes from --nc / --nc2 set inline. */
    .wb-node { --nc:#888; --nc2:#aaa; position:relative; cursor:pointer; background:#fff;
      border:1.5px solid #e6e6ec; border-radius:14px; padding:16px 18px 15px; min-width:150px;
      box-shadow:0 2px 6px rgba(0,0,0,0.05); transition:transform .14s, box-shadow .14s, border-color .14s;
      display:flex; flex-direction:column; gap:7px; }
    .wb-node::before { content:''; position:absolute; left:0; top:0; bottom:0; width:5px; border-radius:14px 0 0 14px; background:linear-gradient(180deg,var(--nc),var(--nc2)); }
    .wb-node:hover { transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,0,0,0.12); border-color:var(--nc); }
    .wb-node.active { border-color:var(--nc); box-shadow:0 0 0 3px color-mix(in srgb, var(--nc) 22%, transparent), 0 8px 22px rgba(0,0,0,0.12); }
    .wb-node-top { display:flex; align-items:center; gap:9px; }
    .wb-node-ico { width:30px; height:30px; flex-shrink:0; border-radius:9px; display:grid; place-items:center; font-size:16px; background:linear-gradient(135deg,var(--nc),var(--nc2)); color:#fff; box-shadow:0 2px 5px color-mix(in srgb, var(--nc) 40%, transparent); }
    .wb-node-name { font-size:13.5px; font-weight:800; letter-spacing:-0.2px; color:#23232b; line-height:1.15; }
    .wb-node-bottom { display:flex; align-items:baseline; gap:7px; }
    .wb-node-count { font-size:30px; font-weight:800; line-height:1; color:var(--nc); letter-spacing:-1px; }
    .wb-node-unit { font-size:11px; color:#9a9aa4; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; }
    .wb-node-act { margin-top:1px; font-size:10.5px; font-weight:700; color:var(--nc); opacity:.85; }
    /* the fork node spans both rows so it sits centered between Simple/Complex */
    .wb-node-span { grid-row:1 / 3; }

    /* Detail panel below the graph — cards for the selected stage. */
    .wb-panel { background:#fff; border:1px solid #e2e2e7; border-radius:14px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
    .wb-panel-head { padding:15px 20px; border-bottom:1px solid #eee; display:flex; align-items:center; gap:12px; }
    .wb-panel-dot { width:14px; height:14px; border-radius:5px; flex-shrink:0; }
    .wb-panel-title { font-size:16px; font-weight:800; color:#1a1a1f; }
    .wb-panel-sub { font-size:13px; color:#888; margin-left:auto; }
    .wb-panel-link { font-size:12px; font-weight:700; color:#c77a00; cursor:pointer; padding:6px 12px; border-radius:8px; background:#fff8e1; border:1px solid #f0c070; }
    .wb-panel-link:hover { background:#fdefc2; }
    .wb-panel-body { padding:16px; display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px; align-items:start; }
    .wb-panel-empty { padding:48px 20px; text-align:center; color:#aaa; font-style:italic; grid-column:1/-1; }

    /* Stage-history popup — click a WO to see its journey + the view it had at
       each earlier stage (defaults to the previous stage). */
    .wbsm-overlay { position:fixed; inset:0; background:rgba(20,20,28,0.5); backdrop-filter:blur(2px); z-index:9000; display:flex; align-items:center; justify-content:center; padding:28px; }
    .wbsm-modal { background:#fff; border-radius:16px; width:min(820px,100%); max-height:90vh; display:flex; flex-direction:column; box-shadow:0 24px 60px rgba(0,0,0,0.35); overflow:hidden; }
    .wbsm-head { padding:18px 22px; border-bottom:1px solid #eee; display:flex; align-items:center; gap:12px; }
    .wbsm-title { font-size:17px; font-weight:800; color:#1a1a1f; display:flex; align-items:center; gap:10px; }
    .wbsm-close { margin-left:auto; cursor:pointer; border:none; background:#f0f0f3; width:32px; height:32px; border-radius:9px; font-size:18px; color:#666; line-height:1; }
    .wbsm-close:hover { background:#e2e2e7; color:#000; }
    /* Timeline rail of stages the WO passed through. */
    .wbsm-rail { display:flex; align-items:stretch; gap:0; padding:16px 22px; border-bottom:1px solid #f0f0f3; overflow-x:auto; }
    .wbsm-step { display:flex; align-items:center; gap:0; flex-shrink:0; }
    .wbsm-chip { cursor:pointer; border:1.5px solid #e2e2e7; background:#fff; border-radius:11px; padding:8px 13px; display:flex; flex-direction:column; gap:2px; min-width:96px; transition:all .12s; }
    .wbsm-chip:hover { border-color:var(--cc,#aaa); background:#fafafc; }
    .wbsm-chip.sel { border-color:var(--cc,#888); box-shadow:0 0 0 3px color-mix(in srgb, var(--cc,#888) 20%, transparent); }
    .wbsm-chip.cur { background:color-mix(in srgb, var(--cc,#888) 8%, #fff); }
    .wbsm-chip-name { font-size:12px; font-weight:800; color:#23232b; display:flex; align-items:center; gap:5px; }
    .wbsm-chip-when { font-size:10px; color:#9a9aa4; font-weight:600; }
    .wbsm-arrow { color:#c9ccd6; font-size:18px; padding:0 6px; align-self:center; }
    .wbsm-body { padding:20px 22px; overflow-y:auto; }
    .wbsm-stage-banner { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#666; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
    .wbsm-note { margin-top:14px; font-size:12px; color:#777; padding:10px 14px; background:#fafafa; border-left:3px solid #d8d8de; border-radius:4px; }
    .wbsm-foot { padding:12px 22px; border-top:1px solid #f0f0f3; display:flex; align-items:center; gap:14px; font-size:12px; color:#999; }
    .wbsm-raw { cursor:pointer; color:#888; text-decoration:underline; }
    .wbsm-raw:hover { color:#444; }
    /* Email Tool — clickable source-email cards under each answer, + the
       mini email-reader popup they open (work-order Label-Focus styling). */
    .et-src-wrap { align-self:stretch; margin:2px 0 6px 38px; }
    .et-src-label { font-size:11px; color:var(--muted); margin-bottom:6px; }
    .et-src-row { display:flex; flex-wrap:wrap; gap:8px; }
    .et-src-card { text-align:left; cursor:pointer; border:1px solid var(--border); background:var(--card); border-radius:10px; padding:8px 11px; max-width:280px; min-width:170px; font:inherit; color:var(--text); transition:border-color .12s, box-shadow .12s, transform .06s; }
    .et-src-card:hover { border-color:var(--orange); box-shadow:0 3px 12px rgba(0,0,0,0.10); }
    .et-src-card:active { transform:translateY(1px); }
    .et-src-from { font-size:11px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .et-src-subj { font-size:12px; color:var(--text); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .et-src-date { font-size:10px; color:var(--muted); margin-top:2px; }
    .et-src-why { font-size:10.5px; color:var(--orange); margin-top:5px; line-height:1.35; white-space:normal; }
    .et-rd-modal { width:min(680px,100%); }
    .et-rd-meta { font-size:12px; color:#444; line-height:1.6; padding-bottom:8px; border-bottom:1px solid #eee; margin-bottom:10px; }
    .et-rd-meta b { color:#1a1a1f; }
    .et-rd-meta-row { margin-bottom:2px; }
    .et-rd-why { font-size:12.5px; color:#7a4500; background:#fff8e1; border:1px solid #f0c070; border-radius:8px; padding:8px 11px; margin-bottom:8px; line-height:1.45; }
    .et-rd-quote { font-size:12.5px; color:#333; border-left:3px solid #fbbf24; background:#fffdf3; padding:6px 11px; margin-bottom:12px; border-radius:0 6px 6px 0; font-style:italic; }
    .et-rd-body { font-size:13px; line-height:1.6; color:#222; max-height:60vh; overflow-y:auto; }
    .et-rd-body p { margin:0 0 12px 0; }
    .et-rd-body blockquote { margin:0 0 12px 0; padding-left:12px; border-left:3px solid #ddd; color:#555; }
    /* Details modal — clean, formatted alternative to the raw JSON dump. */
    .wbd-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:13px 20px; }
    .wbd-field { display:flex; flex-direction:column; gap:3px; }
    .wbd-k { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#9a9aa4; }
    .wbd-v { font-size:13.5px; color:#1a1a1f; font-weight:500; }
    .wbd-sec { margin-top:18px; padding-top:16px; border-top:1px solid #f0f0f3; }
    .wbd-sec-h { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; color:#888; margin-bottom:10px; }
    .wbd-email-meta { font-size:13px; line-height:1.7; color:#3a3a45; padding-bottom:12px; border-bottom:1px solid #eee; }
    .wbd-email-meta b { color:#888; font-weight:700; }
    /* The Details modal renders the SAME body / portal-card markup the labeling
       carousel does (lf-email-body, rp-portal). Those styles are scoped to
       #label-focus-tab, so re-declare them here (scoped to .wbsm-modal) or the
       plain-text + portal views would come out as raw, unstyled text. */
    .wbsm-modal .lf-email-body { font-family:-apple-system,"Segoe UI",Tahoma,sans-serif; font-size:14px; line-height:1.55; color:#1a1a1f; background:#fffaf0; padding:16px 18px; border:1px solid #f0d9a8; border-left:4px solid #e0a000; border-radius:6px; margin-top:4px; }
    .wbsm-modal .lf-email-body p { margin:0 0 12px 0; }
    .wbsm-modal .lf-email-body p:last-child { margin-bottom:0; }
    .wbsm-modal .lf-email-body blockquote { margin:8px 0 12px 0; padding:4px 12px; border-left:3px solid #c7d2e0; color:#5a6678; font-size:13px; }
    .wbsm-modal .rp-portal { font-family:-apple-system,"Segoe UI",Tahoma,sans-serif; color:#1a1a1f; background:#fff; border:1px solid #e2e2e7; border-radius:8px; padding:4px 0 10px; margin-top:4px; overflow:hidden; }
    .wbsm-modal .rp-hdr { font-size:14px; font-weight:700; color:#14213d; background:#f5f7fb; padding:12px 18px; border-bottom:1px solid #e8ebf2; }
    .wbsm-modal .rp-sec { font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#6a3eb0; margin:14px 18px 4px; padding-bottom:4px; border-bottom:1px solid #ede8f7; }
    .wbsm-modal .rp-row { display:grid; grid-template-columns:190px 1fr; gap:4px 14px; padding:5px 18px; font-size:13px; line-height:1.5; }
    .wbsm-modal .rp-row:nth-child(even) { background:#fcfcfe; }
    .wbsm-modal .rp-row-wide { grid-template-columns:1fr; }
    .wbsm-modal .rp-row-wide .rp-v { background:#fffbe9; border:1px solid #f0e3b8; border-radius:6px; padding:8px 10px; margin-top:2px; white-space:pre-wrap; }
    .wbsm-modal .rp-k { font-weight:600; color:#5a6678; }
    .wbsm-modal .rp-v { color:#1a1a1f; }
    .wb-card-top.wbsm-clickable { cursor:pointer; }
    .wb-card-top.wbsm-clickable:hover { background:#f7f7fb; }
    .wbsm-openhint { margin-left:auto; font-size:11px; color:#b8b8c0; font-weight:600; }

    /* "How this works" explainer — the human process + what the stages mean. */
    .wb-explain { margin-top:16px; border:1px solid #e8e8ee; border-radius:12px; background:#fbfbfd; overflow:hidden; }
    .wb-explain > summary { cursor:pointer; list-style:none; padding:13px 18px; font-weight:700; font-size:14px; color:#2a2a33; display:flex; align-items:center; gap:9px; user-select:none; }
    .wb-explain > summary::-webkit-details-marker { display:none; }
    .wb-explain > summary::after { content:'▾'; margin-left:auto; color:#aaa; transition:transform .15s; }
    .wb-explain[open] > summary::after { transform:rotate(180deg); }
    .wb-explain > summary:hover { background:#f3f3f7; }
    .wb-explain-body { padding:4px 20px 20px; }
    .wb-explain-lead { font-size:13.5px; line-height:1.6; color:#444; margin:4px 0 18px; }
    .wb-explain-lead b { color:#1a1a1f; }
    .wb-explain-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:26px; align-items:start; }
    @media (max-width:900px){ .wb-explain-grid { grid-template-columns:1fr; } }
    .wb-explain-h { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.6px; color:#999; margin:0 0 12px; }
    .wb-steps { margin:0; padding:0; list-style:none; counter-reset:step; display:flex; flex-direction:column; gap:11px; }
    .wb-steps li { position:relative; padding-left:36px; font-size:13px; line-height:1.5; color:#3a3a45; counter-increment:step; }
    .wb-steps li::before { content:counter(step); position:absolute; left:0; top:-1px; width:23px; height:23px; border-radius:7px; background:var(--orange); color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center; }
    .wb-steps li b { color:#1a1a1f; }
    .wb-steps li i { color:#7a7a85; }
    .wb-legend { display:flex; flex-direction:column; gap:15px; }
    .wb-legend-item { border-left:3px solid var(--lc,#ccc); padding:2px 0 2px 13px; }
    .wb-legend-name { font-weight:800; font-size:13px; color:#23232b; display:flex; align-items:center; gap:7px; }
    .wb-legend-desc { font-size:12px; color:#666; line-height:1.5; margin-top:4px; }
    .wb-egtags { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
    .wb-egtag { font-size:11px; padding:3px 10px; border-radius:11px; background:#fff; border:1px solid var(--lc,#ddd); color:#444; font-weight:600; }

/* ─────────────────────────────────────── */

#ajr-launch { position:fixed; bottom:20px; right:20px; z-index:60; background:var(--orange); color:#fff; border:none; border-radius:26px; padding:13px 20px; font-size:13px; font-weight:700; cursor:pointer; box-shadow:0 6px 20px -4px rgba(255,107,26,.5); display:flex; align-items:center; gap:8px; }
    #ajr-launch:hover { filter:brightness(1.05); }
    #ajr-panel { position:fixed; bottom:20px; right:20px; z-index:61; width:440px; max-width:calc(100vw - 36px); max-height:calc(100vh - 120px); background:#fff; border:1px solid #e2e2e7; border-radius:14px; box-shadow:0 12px 40px -8px rgba(0,0,0,.28); display:none; flex-direction:column; overflow:hidden; }
    #ajr-panel.open { display:flex; }
    .ajr-head { background:var(--orange); color:#fff; padding:13px 16px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
    .ajr-head b { font-size:13.5px; }
    .ajr-x { background:rgba(255,255,255,.2); border:none; color:#fff; width:26px; height:26px; border-radius:7px; cursor:pointer; font-size:15px; line-height:1; }
    .ajr-body { padding:14px 16px; overflow-y:auto; }
    .ajr-drop { border:1.5px dashed #d8d8de; border-radius:10px; padding:14px; text-align:center; font-size:12px; color:#888; cursor:pointer; }
    .ajr-drop:hover { border-color:var(--orange); color:var(--orange); }
    .ajr-row { border:1px solid #e2e2e7; border-radius:9px; padding:10px; margin-top:8px; background:#fafafb; }
    .ajr-row label { font-size:9px; color:#999; text-transform:uppercase; letter-spacing:.4px; font-weight:700; display:block; margin-bottom:2px; }
    .ajr-row input, .ajr-row select { width:100%; font-size:12px; padding:5px 7px; border:1px solid #d8d8de; border-radius:6px; margin-bottom:6px; box-sizing:border-box; }
    .ajr-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .ajr-rangewarn { font-size:10px; color:#c77a00; background:#fff4e0; border:1px solid #f0c070; border-radius:5px; padding:4px 7px; margin-bottom:6px; }
    .ajr-status-parked    { color:#888; }
    .ajr-status-linked    { color:#1f9d4d; }
    .ajr-status-dismissed { color:#c0392b; }

/* ─────────────────────────────────────── */

.ma-wrap{max-width:1280px;margin:0 auto;}
    .ma-head h2{margin:0 0 4px;font-size:20px;}
    .ma-head p{margin:0 0 12px;color:var(--soft);font-size:13px;line-height:1.55;max-width:880px;}
    .ma-toolbar{display:flex;align-items:center;gap:14px;margin:14px 0 18px;flex-wrap:wrap;}
    .ma-status{font-size:12px;color:var(--soft);}
    .ma-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
    .ma-col{border:1px solid var(--line,#e3e3e3);border-radius:10px;overflow:hidden;background:var(--card,#fff);}
    .ma-col-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line,#e3e3e3);background:rgba(0,0,0,.02);}
    .ma-col-head h3{margin:0;font-size:13px;font-weight:700;letter-spacing:.2px;}
    .ma-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;background:#eef;color:#335;margin-left:6px;}
    .ma-badge.new{background:#e6f5ec;color:#1d7a43;}
    .ma-doc{margin:0;padding:14px;max-height:540px;overflow:auto;font-family:ui-monospace,Menlo,monospace;font-size:11px;line-height:1.5;white-space:pre-wrap;word-break:break-word;}
    .ma-empty{padding:40px 18px;text-align:center;color:var(--soft);font-size:13px;}
    .ma-changes{margin-top:22px;}
    .ma-change{border:1px solid var(--line,#e3e3e3);border-left-width:4px;border-radius:8px;padding:11px 14px;margin-bottom:10px;background:var(--card,#fff);}
    .ma-change.adjust{border-left-color:#e0a000;} .ma-change.split{border-left-color:#7a3fb0;} .ma-change.add{border-left-color:#1d7a43;}
    .ma-change-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;margin-bottom:6px;}
    .ma-tag{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:2px 7px;border-radius:9px;color:#fff;}
    .ma-tag.adjust{background:#e0a000;} .ma-tag.split{background:#7a3fb0;} .ma-tag.add{background:#1d7a43;}
    .ma-code{font-family:ui-monospace,Menlo,monospace;font-weight:700;font-size:12px;}
    .ma-conf{font-size:10px;color:var(--soft);}
    .ma-ev{font-size:11px;color:#335;background:#eef;border-radius:6px;padding:1px 7px;}
    .ma-diff{font-family:ui-monospace,Menlo,monospace;font-size:11px;line-height:1.5;margin:4px 0;}
    .ma-diff .del{color:#b3261e;} .ma-diff .add{color:#1d7a43;}
    .ma-why{font-size:12px;color:var(--text);margin-top:4px;line-height:1.5;}
    .ma-ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;}
    .ma-card{border:1px solid var(--line,#e3e3e3);border-radius:8px;padding:10px 12px;background:var(--card,#fff);font-size:12px;}
    .ma-card h4{margin:0 0 4px;font-size:13px;}
    .ma-card .ma-line{color:var(--soft);font-size:11px;line-height:1.5;}
    .ma-knobs{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap;}
    .ma-knob{font-size:10px;padding:2px 7px;border-radius:9px;background:rgba(0,0,0,.05);}
    .ma-knob.good{background:#e6f5ec;color:#1d7a43;} .ma-knob.warn{background:#fdeede;color:#9a4a00;}
    .ma-sec-h{font-size:15px;margin:24px 0 10px;}
    @media(max-width:900px){.ma-cols{grid-template-columns:1fr;}}
    /* Editable pricing sources */
    .ps-panel{border:1px solid var(--line,#e3e3e3);border-radius:10px;margin-bottom:10px;background:var(--card,#fff);overflow:hidden;}
    .ps-panel>summary{cursor:pointer;padding:11px 14px;font-weight:700;font-size:13px;list-style:none;}
    .ps-panel>summary::-webkit-details-marker{display:none;}
    .ps-meta{font-weight:500;color:var(--soft);font-size:11px;margin-left:8px;}
    .ps-body{padding:12px 14px;border-top:1px solid var(--line,#e3e3e3);}
    .ps-table{width:100%;border-collapse:collapse;font-size:12px;}
    .ps-table th{position:sticky;top:0;background:var(--card,#fff);text-align:left;padding:7px 8px;border-bottom:1px solid var(--line,#e3e3e3);font-size:11px;color:var(--soft);}
    .ps-table td{padding:3px 6px;border-bottom:1px solid rgba(0,0,0,.05);}
    .ps-table input{width:100%;box-sizing:border-box;border:1px solid transparent;background:transparent;padding:4px 6px;border-radius:6px;font-size:12px;color:var(--text);}
    .ps-table input:focus{border-color:var(--orange);outline:none;background:rgba(0,0,0,.03);}
    .ps-table input.ps-price{text-align:right;font-family:ui-monospace,Menlo,monospace;}
    .ps-del{cursor:pointer;color:#b3261e;border:none;background:none;font-size:13px;padding:2px 6px;}
    .ps-area{width:100%;min-height:300px;font-family:ui-monospace,Menlo,monospace;font-size:11px;line-height:1.5;padding:10px;border:1px solid var(--line,#e3e3e3);border-radius:8px;resize:vertical;box-sizing:border-box;color:var(--text);background:var(--bg,#fff);white-space:pre;}
    .ps-actions{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap;}
    .ps-status{font-size:12px;color:var(--soft);}

/* ─────────────────────────────────────── */

#match-invoices-tab .mi-wrap   { padding:18px 22px; max-width:1500px; margin:0 auto; }
    #match-invoices-tab .mi-header { background:#fff; border:1px solid #e2e2e7; border-radius:10px; padding:14px 18px; margin-bottom:14px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
    #match-invoices-tab .mi-title  { margin:0; font-size:18px; font-weight:700; color:#3a2070; letter-spacing:-.2px; }
    #match-invoices-tab .mi-counter{ color:#666; font-size:13px; }
    #match-invoices-tab .mi-nav    { margin-left:auto; display:flex; gap:6px; align-items:center; }
    #match-invoices-tab .mi-nav button { padding:7px 12px; font-size:12px; border:1px solid #d8d8de; background:#fff; border-radius:6px; cursor:pointer; }
    #match-invoices-tab .mi-nav button:hover  { background:#efeafa; border-color:#6a3eb0; }
    #match-invoices-tab .mi-nav button:disabled { opacity:.4; cursor:not-allowed; }
    #match-invoices-tab .mi-panes  { display:grid; grid-template-columns: 1.1fr 1fr; gap:14px; align-items:stretch; min-height:calc(100vh - 220px); }
    /* Large ledgers (HW Foote) — give the editable table the dominant width. */
    #match-invoices-tab .mi-panes.mi-wide-table { grid-template-columns: 0.78fr 1.6fr; }
    @media (max-width:1100px) { #match-invoices-tab .mi-panes, #match-invoices-tab .mi-panes.mi-wide-table { grid-template-columns: 1fr; } }
    #match-invoices-tab .mi-pane   { background:#fff; border:1px solid #e2e2e7; border-radius:10px; display:flex; flex-direction:column; overflow:hidden; }
    #match-invoices-tab .mi-pane-head { padding:11px 16px; background:#fafafa; border-bottom:1px solid #e2e2e7; font-size:11.5px; font-weight:700; color:#3a3a45; text-transform:uppercase; letter-spacing:.5px; }
    #match-invoices-tab .mi-pane-body { padding:14px 18px; overflow-y:auto; flex:1; }
    #match-invoices-tab .mi-row    { display:grid; grid-template-columns: 130px 1fr; gap:8px 12px; align-items:start; margin-bottom:10px; }
    #match-invoices-tab .mi-row label { font-size:11px; font-weight:700; color:#3a3a45; text-transform:uppercase; letter-spacing:.4px; padding-top:7px; }
    #match-invoices-tab .mi-row input { padding:7px 10px; border:1px solid #d8d8de; border-radius:5px; font-size:12.5px; font-family:inherit; background:#fff; width:100%; }
    #match-invoices-tab .mi-row input:focus { outline:none; border-color:#6a3eb0; background:#faf8ff; }
    #match-invoices-tab .mi-actions { padding:12px 18px; border-top:1px solid #e2e2e7; display:flex; gap:8px; justify-content:flex-end; background:#fafafa; }
    #match-invoices-tab .mi-meta   { font-size:12px; color:#444; margin-bottom:4px; line-height:1.5; }
    #match-invoices-tab .mi-meta b { color:#1a1a1f; }
    #match-invoices-tab .mi-empty  { text-align:center; padding:80px 20px; color:#888; font-size:14px; }
    #match-invoices-tab .mi-status { font-size:11.5px; color:#666; padding:6px 14px; background:#fff; border-top:1px solid #e2e2e7; }

/* ─────────────────────────────────────── */

#hw-foote-tab { padding:0; }
  #hw-foote-tab .hwf-wrap { padding:18px 22px; max-width:1400px; margin:0 auto; }
  #hw-foote-tab .hwf-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
  #hw-foote-tab .hwf-header h2 { margin:0; font-size:18px; font-weight:700; color:#3a2070; flex:1; }
  #hw-foote-tab .hwf-balance-chip { background:#3a2070; color:#fff; font-size:12px; font-weight:700; padding:5px 14px; border-radius:20px; white-space:nowrap; }
  #hw-foote-tab .hwf-balance-chip.zero { background:#1a7a3a; }
  #hw-foote-tab .hwf-panes { display:grid; grid-template-columns:320px 1fr; gap:14px; align-items:start; min-height:calc(100vh - 220px); }
  @media (max-width:900px) { #hw-foote-tab .hwf-panes { grid-template-columns:1fr; } }
  #hw-foote-tab .hwf-list-pane { background:#fff; border:1px solid var(--line,#e2e2e7); border-radius:10px; overflow:hidden; }
  #hw-foote-tab .hwf-pane-head { padding:10px 14px; background:#fafafa; border-bottom:1px solid var(--line,#e2e2e7); font-size:11px; font-weight:700; color:#3a3a45; text-transform:uppercase; letter-spacing:.5px; }
  #hw-foote-tab .hwf-email-item { padding:10px 14px; border-bottom:1px solid #f2f2f5; cursor:pointer; transition:background .12s; }
  #hw-foote-tab .hwf-email-item:hover { background:#f5f2ff; }
  #hw-foote-tab .hwf-email-item.active { background:#ede8fa; border-left:3px solid #6a3eb0; }
  #hw-foote-tab .hwf-email-item .hwf-subj { font-size:13px; font-weight:600; color:#1a1a1f; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #hw-foote-tab .hwf-email-item .hwf-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  #hw-foote-tab .hwf-email-item .hwf-date { font-size:11px; color:#888; }
  #hw-foote-tab .hwf-badge { font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; white-space:nowrap; }
  #hw-foote-tab .hwf-badge.statement { background:#e8f4ea; color:#1a7a3a; }
  #hw-foote-tab .hwf-badge.payment-thread { background:#e8f0ff; color:#2a5ab0; }
  #hw-foote-tab .hwf-badge.other { background:#f0f0f5; color:#666; }
  #hw-foote-tab .hwf-scan-status { font-size:10.5px; color:#888; margin-top:3px; }
  #hw-foote-tab .hwf-scan-status.done { color:#1a7a3a; }
  #hw-foote-tab .hwf-detail-pane { background:#fff; border:1px solid var(--line,#e2e2e7); border-radius:10px; overflow:hidden; }
  #hw-foote-tab .hwf-detail-body { padding:18px 20px; }
  #hw-foote-tab .hwf-detail-empty { display:flex; align-items:center; justify-content:center; min-height:260px; color:#aaa; font-size:14px; }
  #hw-foote-tab .hwf-summary-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px; }
  #hw-foote-tab .hwf-summary-cell { background:#f8f6ff; border:1px solid #e0d8f8; border-radius:8px; padding:10px 14px; }
  #hw-foote-tab .hwf-summary-cell .sc-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#888; margin-bottom:4px; }
  #hw-foote-tab .hwf-summary-cell .sc-val { font-size:16px; font-weight:700; color:#3a2070; }
  #hw-foote-tab .hwf-summary-cell .sc-val.green { color:#1a7a3a; }
  #hw-foote-tab .hwf-line-table { width:100%; border-collapse:collapse; font-size:12.5px; }
  #hw-foote-tab .hwf-line-table th { text-align:left; padding:7px 10px; background:#f5f2ff; border-bottom:2px solid #d8d0f0; font-size:11px; text-transform:uppercase; letter-spacing:.3px; color:#3a2070; }
  #hw-foote-tab .hwf-line-table td { padding:6px 10px; border-bottom:1px solid #f0f0f5; vertical-align:top; }
  #hw-foote-tab .hwf-line-table tr:hover td { background:#faf8ff; }
  #hw-foote-tab .hwf-amt-invoice { color:#1a1a1f; }
  #hw-foote-tab .hwf-amt-payment { color:#1a7a3a; font-weight:600; }
  #hw-foote-tab .hwf-amt-credit  { color:#b05000; font-weight:600; }
  #hw-foote-tab .hwf-actions { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
  #hw-foote-tab .hwf-empty-email { color:#888; font-size:13px; font-style:italic; padding:12px 0; }

/* ─────────────────────────────────────── */

#label-focus-tab .lf-wrap     { padding:18px 22px; max-width:1500px; margin:0 auto; }
    #label-focus-tab .lf-header   { background:#fff; border:1px solid #e2e2e7; border-radius:10px; padding:14px 18px; margin-bottom:14px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
    #label-focus-tab .lf-title    { margin:0; font-size:18px; font-weight:700; color:#7a4500; letter-spacing:-.2px; }
    #label-focus-tab .lf-counter  { color:#666; font-size:13px; }
    #label-focus-tab .lf-nav      { margin-left:auto; display:flex; gap:6px; align-items:center; }
    #label-focus-tab .lf-nav button { padding:7px 12px; font-size:12px; border:1px solid #d8d8de; background:#fff; border-radius:6px; cursor:pointer; }
    #label-focus-tab .lf-nav button:hover  { background:#fff8e1; border-color:#c77a00; }
    #label-focus-tab .lf-nav button:disabled { opacity:.4; cursor:not-allowed; }
    #label-focus-tab .lf-panes    { display:grid; grid-template-columns: 1.1fr 1fr; gap:14px; align-items:stretch; min-height:calc(100vh - 220px); }
    @media (max-width:1100px) { #label-focus-tab .lf-panes { grid-template-columns: 1fr; } }
    #label-focus-tab .lf-pane     { background:#fff; border:1px solid #e2e2e7; border-radius:10px; display:flex; flex-direction:column; overflow:hidden; }
    #label-focus-tab .lf-pane-head{ padding:11px 16px; background:#fafafa; border-bottom:1px solid #e2e2e7; font-size:11.5px; font-weight:700; color:#3a3a45; text-transform:uppercase; letter-spacing:.5px; }
    #label-focus-tab .lf-pane-body{ padding:14px 18px; overflow-y:auto; flex:1; }
    #label-focus-tab .lf-meta-row { font-size:12px; color:#444; margin-bottom:3px; line-height:1.5; }
    #label-focus-tab .lf-meta-row b { color:#1a1a1f; }
    /* Match-Invoices renders the SAME body / portal-card markup (lf-email-body,
       rp-portal) as the labeling carousel — see miRenderCurrent()'s no-attachment
       fallback. Share the scope with #match-invoices-tab or that preview comes
       out as raw, unstyled text. (cf. the .wbsm-modal re-declarations above.) */
    #label-focus-tab .lf-email-body,
    #match-invoices-tab .lf-email-body {
      font-family: -apple-system, "Segoe UI", Tahoma, sans-serif;
      font-size: 14px; line-height: 1.55; color: #1a1a1f;
      background: #fffaf0; padding: 16px 18px; border: 1px solid #f0d9a8; border-left: 4px solid #e0a000; border-radius: 6px;
      margin-top: 12px; max-width: 720px;
    }
    #label-focus-tab .lf-email-body p,
    #match-invoices-tab .lf-email-body p { margin: 0 0 12px 0; }
    #label-focus-tab .lf-email-body p:last-child,
    #match-invoices-tab .lf-email-body p:last-child { margin-bottom: 0; }
    #label-focus-tab .lf-email-body blockquote,
    #match-invoices-tab .lf-email-body blockquote {
      margin: 8px 0 12px 0; padding: 4px 12px; border-left: 3px solid #c7d2e0;
      color: #5a6678; font-size: 13px;
    }
    /* RealPage portal SR — clean sectioned key/value card (the "HTML view" look) */
    #label-focus-tab .rp-portal,
    #match-invoices-tab .rp-portal {
      font-family: -apple-system, "Segoe UI", Tahoma, sans-serif; color: #1a1a1f;
      background: #fff; border: 1px solid #e2e2e7; border-radius: 8px;
      padding: 4px 0 10px; margin-top: 12px; max-width: 760px; overflow: hidden;
    }
    #label-focus-tab .rp-hdr,
    #match-invoices-tab .rp-hdr { font-size: 14px; font-weight: 700; color: #14213d;
      background: #f5f7fb; padding: 12px 18px; border-bottom: 1px solid #e8ebf2; }
    #label-focus-tab .rp-sec,
    #match-invoices-tab .rp-sec { font-size: 11px; font-weight: 800; letter-spacing: .6px;
      text-transform: uppercase; color: #6a3eb0; margin: 14px 18px 4px; padding-bottom: 4px;
      border-bottom: 1px solid #ede8f7; }
    #label-focus-tab .rp-row,
    #match-invoices-tab .rp-row { display: grid; grid-template-columns: 190px 1fr; gap: 4px 14px;
      padding: 5px 18px; font-size: 13px; line-height: 1.5; }
    #label-focus-tab .rp-row:nth-child(even),
    #match-invoices-tab .rp-row:nth-child(even) { background: #fcfcfe; }
    #label-focus-tab .rp-row-wide,
    #match-invoices-tab .rp-row-wide { grid-template-columns: 1fr; }
    #label-focus-tab .rp-row-wide .rp-v,
    #match-invoices-tab .rp-row-wide .rp-v { background: #fffbe9; border: 1px solid #f0e3b8;
      border-radius: 6px; padding: 8px 10px; margin-top: 2px; white-space: pre-wrap; }
    #label-focus-tab .rp-k,
    #match-invoices-tab .rp-k { font-weight: 600; color: #5a6678; }
    #label-focus-tab .rp-v,
    #match-invoices-tab .rp-v { color: #1a1a1f; }
    #label-focus-tab .lf-row      { display:grid; grid-template-columns: 130px 1fr; gap:8px 12px; align-items:start; margin-bottom:8px; }
    #label-focus-tab .lf-row label{ font-size:11px; font-weight:700; color:#3a3a45; text-transform:uppercase; letter-spacing:.4px; padding-top:7px; }
    #label-focus-tab .lf-row input, #label-focus-tab .lf-row textarea, #label-focus-tab .lf-row select {
      padding:7px 10px; border:1px solid #d8d8de; border-radius:5px; font-size:12.5px; font-family:inherit; background:#fff;
    }
    #label-focus-tab .lf-row input:focus, #label-focus-tab .lf-row textarea:focus, #label-focus-tab .lf-row select:focus { outline:none; border-color:var(--orange); background:#fffaf5; }
    #label-focus-tab .lf-row textarea { min-height:60px; resize:vertical; }
    #label-focus-tab .lf-actions  { padding:12px 18px; border-top:1px solid #e2e2e7; display:flex; gap:8px; justify-content:flex-end; background:#fafafa; }
    #label-focus-tab .lf-status   { font-size:11.5px; color:#666; padding:6px 14px; background:#fff; border-top:1px solid #e2e2e7; }
    #label-focus-tab .lf-empty    { text-align:center; padding:80px 20px; color:#888; font-size:14px; }
    /* Labeling guide */
    .lf-guide { margin:0 0 16px; border:1px solid #e0e0e8; border-radius:10px; background:#f7f9fc; overflow:hidden; }
    .lf-guide > summary { cursor:pointer; list-style:none; padding:10px 14px; font-weight:700; font-size:12.5px; color:#2a2a33; display:flex; align-items:center; gap:8px; }
    .lf-guide > summary::-webkit-details-marker { display:none; }
    .lf-guide > summary::after { content:'▾'; margin-left:auto; color:#aaa; }
    .lf-guide[open] > summary::after { content:'▴'; }
    .lf-guide ol { margin:0; padding:2px 18px 14px 34px; display:flex; flex-direction:column; gap:8px; }
    .lf-guide li { font-size:12px; line-height:1.5; color:#3a3a45; }
    .lf-guide li b { color:#1a1a1f; }
    /* Copyable email message block */
    .lf-emailmsg-head { display:flex; align-items:center; gap:10px; }
    .lf-copy-btn { padding:4px 11px; font-size:11px; font-weight:600; border:1px solid #d8d8de; background:#fff; border-radius:6px; cursor:pointer; }
    .lf-copy-btn:hover { background:#f0f0f3; border-color:#a8a8b0; }
    .lf-emailmsg { font-size:12px; line-height:1.55; color:#444; white-space:pre-wrap; background:#fafafa; border:1px solid #eee; border-left:3px solid #d8d8de; border-radius:6px; padding:10px 12px; max-height:160px; overflow-y:auto; margin-top:4px; }

/* ─────────────────────────────────────── */

@keyframes ip-think-pulse { 0%,100% { opacity:.25; transform:translateY(0); } 50% { opacity:1; transform:translateY(-2px); } }
          .ip-chip {
            font-size:10px; font-family:ui-monospace,Menlo,monospace;
            padding:3px 7px; border-radius:4px; border:1px solid var(--border);
            color:var(--muted); background:var(--bg); white-space:nowrap;
          }
          .ip-chip.pending    { color:var(--muted); }
          .ip-chip.extracting { color:#a855f7; border-color:#a855f7; background:rgba(168,85,247,.10); }
          .ip-chip.drafting   { color:var(--orange); border-color:var(--orange); background:rgba(249,115,22,.10); }
          .ip-chip.done       { color:var(--green); border-color:var(--green); background:rgba(34,197,94,.10); }
          .ip-chip.error,
          .ip-chip.parse-error{ color:var(--red); border-color:var(--red); background:rgba(239,68,68,.10); }

/* ─────────────────────────────────────── */

#oasis-info-tab { padding:0; }
    #oasis-info-tab .oi-wrap { padding:20px 24px; max-width:1500px; margin:0 auto; }

    /* Header bar */
    #oasis-info-tab .oi-header { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
    #oasis-info-tab .oi-header h2 { margin:0; font-size:19px; font-weight:700; flex:1; letter-spacing:-.3px; }
    #oasis-info-tab .oi-search { padding:8px 13px; border:1.5px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); font-size:13px; min-width:220px; outline:none; transition:border-color .15s; }
    #oasis-info-tab .oi-search:focus { border-color:var(--orange); }
    #oasis-info-tab .oi-add-btn { padding:8px 16px; border-radius:8px; background:var(--orange); color:#fff; border:none; font-size:13px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:6px; transition:opacity .12s; }
    #oasis-info-tab .oi-add-btn:hover { opacity:.88; }
    #oasis-info-tab .oi-row-count { font-size:11.5px; color:var(--muted); white-space:nowrap; }

    /* Sheet pill tabs */
    #oasis-info-tab .oi-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
    #oasis-info-tab .oi-tab-btn { padding:7px 17px; border:1.5px solid var(--border); border-radius:20px; background:var(--surface); font-size:13px; font-weight:600; cursor:pointer; color:var(--text); transition:all .13s; }
    #oasis-info-tab .oi-tab-btn:hover { border-color:#999; background:var(--card); }
    #oasis-info-tab .oi-tab-btn.active { background:var(--orange); color:#fff; border-color:var(--orange); }

    /* Table shell */
    #oasis-info-tab .oi-table-wrap { overflow-x:auto; background:var(--card); border:1.5px solid var(--border); border-radius:12px; box-shadow:0 1px 6px rgba(0,0,0,.06); }
    #oasis-info-tab .oi-table { width:100%; border-collapse:collapse; font-size:13.5px; }
    #oasis-info-tab .oi-table thead tr { background:var(--surface); }
    #oasis-info-tab .oi-table th { position:sticky; top:0; z-index:2; background:var(--surface); text-align:left; padding:11px 14px; border-bottom:2px solid var(--border); font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; user-select:none; }
    #oasis-info-tab .oi-table th:first-child { border-radius:12px 0 0 0; }
    #oasis-info-tab .oi-table th:last-child  { border-radius:0 12px 0 0; }

    /* Body rows */
    #oasis-info-tab .oi-table tbody tr { transition:background .1s; }
    #oasis-info-tab .oi-table tbody tr:hover td { background:rgba(249,115,22,.04); }
    #oasis-info-tab .oi-table td { padding:0; border-bottom:1px solid var(--border); vertical-align:middle; }
    #oasis-info-tab .oi-table tbody tr:last-child td { border-bottom:none; }

    /* Cell: read mode */
    #oasis-info-tab .oi-cell { display:block; padding:9px 14px; min-height:38px; cursor:text; position:relative; transition:background .1s; border-radius:0; }
    #oasis-info-tab .oi-cell:hover { background:rgba(249,115,22,.07); }
    #oasis-info-tab .oi-cell:hover::after { content:'✏'; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:10px; color:var(--orange); opacity:.7; }
    #oasis-info-tab .oi-cell.editing { padding:0; background:transparent; }
    #oasis-info-tab .oi-cell.editing::after { display:none; }

    /* Cell: edit mode input */
    #oasis-info-tab .oi-cell input {
      width:100%; box-sizing:border-box; border:none; outline:none;
      padding:9px 14px; font-size:13.5px; font-family:inherit;
      background:#fffbf5; border-bottom:2px solid var(--orange);
      border-radius:0; color:var(--text);
    }

    /* Save flash animations */
    @keyframes oi-flash-ok  { 0%{background:#d1fae5} 100%{background:transparent} }
    @keyframes oi-flash-err { 0%{background:#fee2e2} 100%{background:transparent} }
    #oasis-info-tab td.oi-saved { animation:oi-flash-ok .9s ease-out forwards; }
    #oasis-info-tab td.oi-error { animation:oi-flash-err .9s ease-out forwards; }

    /* Add-row form */
    #oasis-info-tab .oi-add-row-tr td { background:#f0fdf4; border-top:2px dashed #86efac; padding:0; }
    #oasis-info-tab .oi-add-row-tr input { border:none; outline:none; background:transparent; padding:9px 14px; font-size:13.5px; font-family:inherit; width:100%; box-sizing:border-box; color:var(--text); }
    #oasis-info-tab .oi-add-row-tr input::placeholder { color:#9ca3af; }
    #oasis-info-tab .oi-add-actions { display:flex; gap:8px; padding:10px 14px; background:#f0fdf4; border-top:1px solid #bbf7d0; border-radius:0 0 12px 12px; }
    #oasis-info-tab .oi-save-row-btn { padding:7px 18px; background:#16a34a; color:#fff; border:none; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; }
    #oasis-info-tab .oi-save-row-btn:hover { background:#15803d; }
    #oasis-info-tab .oi-cancel-row-btn { padding:7px 14px; background:transparent; color:var(--muted); border:1.5px solid var(--border); border-radius:7px; font-size:13px; cursor:pointer; }
    #oasis-info-tab .oi-cancel-row-btn:hover { color:var(--text); border-color:#999; }

    #oasis-info-tab .oi-empty   { padding:60px 20px; text-align:center; color:var(--muted); font-size:13px; }
    #oasis-info-tab .oi-loading { padding:60px 20px; text-align:center; color:var(--muted); font-size:13px; }

/* ─────────────────────────────────────── */

#properties-tab .re-muted{color:#888;font-size:12px;}
#properties-tab .re-roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:14px 0;}
#properties-tab .re-card{text-align:left;background:var(--surface,#fff);border:1px solid var(--border,#e2e2e7);border-radius:12px;padding:14px;cursor:pointer;transition:.12s;display:flex;flex-direction:column;gap:8px;color:var(--text,#222);}
#properties-tab .re-card:hover{border-color:var(--orange,#ff6b1a);box-shadow:0 2px 10px rgba(0,0,0,.06);}
#properties-tab .re-card-active{border-color:var(--orange,#ff6b1a);box-shadow:0 0 0 2px rgba(255,107,26,.18);}
#properties-tab .re-card-addr{font-weight:700;font-size:15px;}
#properties-tab .re-card-stat{font-size:12px;color:#666;}
#properties-tab .re-chip{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid;width:fit-content;}
#properties-tab #re-detail{background:var(--surface,#fff);border:1px solid var(--border,#e2e2e7);border-radius:14px;padding:18px 20px;margin-bottom:30px;}
#properties-tab .re-detail-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--border,#eee);padding-bottom:12px;margin-bottom:12px;}
#properties-tab .re-detail-addr{font-size:22px;font-weight:800;}
#properties-tab .re-statusswitch{display:flex;gap:6px;flex-wrap:wrap;}
#properties-tab .re-stbtn{padding:7px 12px;border:1.5px solid #d8d8de;border-radius:9px;background:#fff;cursor:pointer;font-size:12.5px;font-weight:600;color:#444;}
#properties-tab .re-stbtn:hover{border-color:#aaa;}
#properties-tab .re-section{padding:14px 0;border-top:1px solid #f0f0f3;}
#properties-tab .re-section h4{margin:0 0 8px;font-size:14px;}
#properties-tab .re-section-h{display:flex;justify-content:space-between;align-items:center;gap:10px;}
#properties-tab .re-fieldrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
#properties-tab .re-fieldrow+.re-fieldrow{margin-top:6px;}
#properties-tab .re-in{padding:7px 10px;border:1px solid #d8d8de;border-radius:8px;font-size:13px;flex:1;min-width:110px;background:#fff;color:#222;}
#properties-tab .re-in:focus{outline:none;border-color:var(--orange,#ff6b1a);}
#properties-tab .re-in-num{max-width:120px;flex:0 0 auto;}
#properties-tab .re-wrow{display:flex;gap:6px;align-items:center;margin-bottom:6px;}
#properties-tab .re-btn{padding:7px 14px;border:1px solid #d8d8de;border-radius:8px;background:#f7f7f9;cursor:pointer;font-size:12.5px;font-weight:600;color:#333;text-decoration:none;display:inline-block;}
#properties-tab .re-btn:hover{background:#eee;}
#properties-tab .re-btn-primary{background:var(--orange,#ff6b1a);color:#fff;border-color:var(--orange,#ff6b1a);}
#properties-tab .re-mini{font-size:11.5px;padding:3px 8px;border:1px solid #d8d8de;border-radius:6px;background:#fff;cursor:pointer;color:#555;display:inline-block;}
#properties-tab .re-mini:hover{border-color:#aaa;}
#properties-tab .re-del{color:#c0392b;}
#properties-tab .re-x{border:none;background:none;color:#c0392b;cursor:pointer;font-size:13px;padding:2px 6px;}
#properties-tab .re-link{border:none;background:none;color:var(--orange,#ff6b1a);cursor:pointer;font-weight:600;font-size:12.5px;}
#properties-tab .re-filebox{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
#properties-tab .re-fchip{display:inline-flex;align-items:center;gap:4px;background:#eef2f8;border:1px solid #d6e0ef;border-radius:7px;padding:3px 8px;font-size:11.5px;}
#properties-tab .re-fchip a{color:#2a6fd6;text-decoration:none;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#properties-tab .re-fchip button{border:none;background:none;color:#999;cursor:pointer;}
#properties-tab .re-drop{border:1.6px dashed #cdd2dd;border-radius:10px;padding:16px;text-align:center;color:#888;cursor:pointer;font-size:12.5px;margin-top:4px;}
#properties-tab .re-drop:hover,#properties-tab .re-drop-over{border-color:var(--orange,#ff6b1a);color:var(--orange,#ff6b1a);background:rgba(255,107,26,.04);}
#properties-tab .re-twocol{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
#properties-tab .re-kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
#properties-tab .re-kpi{background:#f8f9fb;border:1px solid #e8e8ee;border-radius:10px;padding:10px 12px;}
#properties-tab .re-kpi-l{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:#999;font-weight:700;}
#properties-tab .re-kpi-v{font-size:18px;font-weight:800;margin-top:2px;}
#properties-tab .re-kpi-s{font-size:11px;color:#888;margin-top:1px;}
#properties-tab .re-gantt{position:relative;margin-bottom:14px;}
#properties-tab .re-grow{display:flex;align-items:center;gap:10px;margin-bottom:5px;}
#properties-tab .re-glabel{width:200px;flex:0 0 200px;font-size:12px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#properties-tab .re-gtrack{position:relative;flex:1;height:22px;background:#f2f3f6;border-radius:5px;}
#properties-tab .re-gbar{position:absolute;top:2px;height:18px;border-radius:4px;color:#fff;font-size:10px;overflow:hidden;display:flex;align-items:center;}
#properties-tab .re-gprog{position:absolute;left:0;top:0;height:100%;background:rgba(0,0,0,.22);}
#properties-tab .re-gbar-txt{position:relative;padding-left:5px;z-index:1;white-space:nowrap;}
#properties-tab .re-mile{position:absolute;top:1px;transform:translateX(-50%);color:#d9822b;font-size:14px;}
#properties-tab .re-gtoday{position:absolute;top:0;bottom:0;width:2px;background:#c0392b;z-index:3;}
#properties-tab .re-gtoday span{position:absolute;top:-13px;left:-12px;font-size:9px;color:#c0392b;font-weight:700;}
#properties-tab .re-gtbl{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px;}
#properties-tab .re-gtbl th{text-align:left;font-size:10px;text-transform:uppercase;color:#999;padding:3px;}
#properties-tab .re-gtbl td{padding:2px 3px;}
#properties-tab .re-kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
#properties-tab .re-vcol,#properties-tab .re-tcol{background:#f6f7f9;border:1px solid #e8e8ee;border-radius:10px;padding:8px;min-height:80px;}
#properties-tab .re-vcol-over{border-color:var(--orange,#ff6b1a);background:rgba(255,107,26,.05);}
#properties-tab .re-vcol-h,#properties-tab .re-tcol-h{font-size:11.5px;font-weight:700;color:#555;margin-bottom:7px;display:flex;justify-content:space-between;}
#properties-tab .re-count{background:rgba(0,0,0,.08);border-radius:8px;padding:0 7px;font-size:10.5px;}
#properties-tab .re-vcard{background:#fff;border:1px solid #e2e2e7;border-radius:9px;padding:8px;margin-bottom:7px;cursor:grab;}
#properties-tab .re-vcard.re-dragging{opacity:.4;}
#properties-tab .re-vc-name{font-weight:700;border:none;width:100%;font-size:13px;padding:2px 0;background:none;color:#222;}
#properties-tab .re-vc-scope{border:none;width:100%;font-size:11.5px;color:#666;padding:1px 0;background:none;}
#properties-tab .re-vc-money{display:flex;gap:6px;margin:4px 0;}
#properties-tab .re-vc-money input{width:72px;border:1px solid #e2e2e7;border-radius:5px;font-size:11px;padding:2px 4px;}
#properties-tab .re-vc-money label{font-size:10px;color:#999;}
#properties-tab .re-vc-notes{width:100%;border:1px solid #eee;border-radius:5px;font-size:11px;padding:3px;resize:vertical;min-height:26px;font-family:inherit;}
#properties-tab .re-vc-actions{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap;align-items:center;}
#properties-tab .re-budget{font-size:12.5px;color:#444;margin-bottom:8px;}
#properties-tab .re-addvendor,#properties-tab .re-addtask{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;align-items:center;}
#properties-tab .re-taskboard{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
#properties-tab .re-tcard{background:#fff;border:1px solid #e2e2e7;border-radius:9px;padding:8px;margin-bottom:7px;}
#properties-tab .re-tc-title{font-size:12.5px;font-weight:600;margin-bottom:4px;}
#properties-tab .re-tc-meta{display:flex;gap:6px;flex-wrap:wrap;font-size:10.5px;color:#777;align-items:center;}
#properties-tab .re-urg{background:#fff3e0;color:#b9690f;border-radius:5px;padding:0 6px;}
#properties-tab .re-due{background:#eef2f8;border-radius:5px;padding:0 6px;}
#properties-tab .re-overdue{background:#fde9e7;color:#c0392b;font-weight:700;}
#properties-tab .re-ptag{background:#eef7ee;color:#2a8a4a;border-radius:5px;padding:0 6px;}
#properties-tab .re-rb{font-size:11px;color:#c0392b;margin:4px 0;}
#properties-tab .re-tc-status{margin-top:6px;width:100%;font-size:11.5px;padding:3px;border:1px solid #e2e2e7;border-radius:6px;}
#properties-tab .re-tenant{background:#fafbfc;border:1px solid #ececf1;border-radius:9px;padding:10px;margin-bottom:8px;}
#properties-tab .re-tenant-prev{opacity:.78;}
#properties-tab .re-tenant-actions{display:flex;gap:8px;margin-top:7px;align-items:center;flex-wrap:wrap;}
#properties-tab .re-prev{margin-top:10px;}
#properties-tab .re-prev summary{cursor:pointer;font-size:12.5px;color:#666;}
#properties-tab .re-act{font-size:12px;padding:4px 0;border-bottom:1px solid #f3f3f6;}
#properties-tab .re-act-d{color:#999;font-size:11px;margin-right:6px;}
#properties-tab .re-permitbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.re-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#222;color:#fff;padding:9px 18px;border-radius:9px;font-size:13px;opacity:0;transition:.25s;z-index:9999;pointer-events:none;}
.re-toast-show{opacity:1;transform:translateX(-50%) translateY(0);}
#properties-tab .re-superview{background:linear-gradient(135deg,rgba(0,122,255,.05),transparent);border:1px solid rgba(0,122,255,.22);margin-bottom:14px;}
#properties-tab .re-sv-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px;}
#properties-tab .re-sv-cols h4{margin:0 0 8px;font-size:13px;}
#properties-tab .re-att{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:#fff;border:1px solid #ececf1;border-radius:8px;padding:7px 10px;margin-bottom:6px;cursor:pointer;font-size:12px;color:#333;}
#properties-tab .re-att:hover{border-color:var(--orange,#ff6b1a);}
#properties-tab .re-att-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
#properties-tab .re-sv-row{display:block;width:100%;text-align:left;background:#fff;border:1px solid #ececf1;border-radius:8px;padding:8px 10px;margin-bottom:6px;cursor:pointer;color:#333;}
#properties-tab .re-sv-row:hover{border-color:var(--orange,#ff6b1a);}
#properties-tab .re-sv-row-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px;}
#properties-tab .re-sv-bar{height:6px;background:#eef0f4;border-radius:4px;overflow:hidden;margin:3px 0;}
#properties-tab .re-sv-bar>div{height:100%;border-radius:4px;}
#properties-tab .re-rentrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 9px;border:1px solid #ececf1;border-radius:7px;margin-bottom:5px;font-size:12px;}
#properties-tab .re-rr-date{color:#666;min-width:78px;}
#properties-tab .re-rr-amt{font-weight:700;}
#properties-tab .re-rr-bank{color:#2a6fd6;}
#properties-tab .re-thread{border:1px solid #ececf1;border-radius:9px;padding:10px;margin-bottom:8px;background:#fafbfc;}
#properties-tab .re-thread-closed{opacity:.68;}
#properties-tab .re-thread-h{display:flex;justify-content:space-between;align-items:center;gap:8px;}
#properties-tab .re-thread-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px;}
#properties-tab .re-updates,#properties-tab .re-msgs{margin:6px 0;display:flex;flex-direction:column;gap:4px;}
#properties-tab .re-update{font-size:12px;padding:4px 8px;background:#fff;border-left:3px solid #c0392b;border-radius:4px;}
#properties-tab .re-msg{font-size:12px;padding:5px 8px;background:#fff;border:1px solid #eee;border-radius:6px;}
#properties-tab .re-msg b{font-size:11.5px;}
#properties-tab .re-badge{background:#c0392b;color:#fff;border-radius:8px;padding:1px 7px;font-size:10.5px;font-weight:700;vertical-align:middle;}
@media(max-width:900px){#properties-tab .re-kanban,#properties-tab .re-taskboard{grid-template-columns:1fr 1fr;}#properties-tab .re-twocol,#properties-tab .re-sv-cols{grid-template-columns:1fr;}}

/* ─────────────────────────────────────── */

#hl-grid-table .dg-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
#hl-grid-table .dg-filter{font-size:12.5px;padding:7px 11px;border:1px solid var(--border);border-radius:8px;background:var(--surface);min-width:200px;color:var(--text);}
#hl-grid-table .dg-filter:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,107,26,.15);}
#hl-grid-table .dg-legend{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
#hl-grid-table .dg-dot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle;}
#hl-grid-table .dg-wrap{border:1px solid var(--border);border-radius:12px;overflow:auto;max-height:560px;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.04);}
#hl-grid-table table.dg{border-collapse:separate;border-spacing:0;width:100%;min-width:640px;font-size:12.5px;}
#hl-grid-table .dg thead th{position:sticky;top:0;z-index:3;background:var(--card-2);border-bottom:2px solid var(--border-strong);padding:8px 4px;color:var(--soft);font-weight:600;text-align:center;}
#hl-grid-table .dg th.dg-name-h{left:0;z-index:4;text-align:left;padding-left:15px;min-width:148px;}
#hl-grid-table .dg .dg-wd{font-size:12px;font-weight:700;color:var(--text);letter-spacing:.2px;}
#hl-grid-table .dg .dg-dt{font-size:10px;color:var(--muted);font-weight:400;margin-top:1px;}
#hl-grid-table .dg th.dg-weekend{background:#eceef3;}
#hl-grid-table .dg th.dg-today{background:rgba(255,107,26,.16);}
#hl-grid-table .dg th.dg-today .dg-wd{color:var(--orange-d);}
#hl-grid-table .dg th.dg-total-h{border-left:2px solid var(--border-strong);min-width:54px;}
#hl-grid-table .dg tbody td{border-bottom:1px solid var(--border);height:40px;}
#hl-grid-table .dg td.dg-name{position:sticky;left:0;z-index:1;background:var(--surface);border-right:2px solid var(--border-strong);padding:4px 15px;text-align:left;white-space:nowrap;}
#hl-grid-table .dg .dg-nm{font-weight:600;color:var(--text);font-size:12.5px;line-height:1.2;}
#hl-grid-table .dg .dg-adp{font-size:10px;color:var(--muted);font-weight:400;line-height:1.2;}
#hl-grid-table .dg tbody tr:nth-child(even) td{background:var(--card);}
#hl-grid-table .dg tbody tr:nth-child(even) td.dg-name{background:#f3f3f6;}
#hl-grid-table .dg tbody tr:hover td{background:rgba(255,107,26,.07);}
#hl-grid-table .dg tbody tr:hover td.dg-name{background:rgba(255,107,26,.10);}
#hl-grid-table .dg td.dg-cell{text-align:center;padding:0;}
#hl-grid-table .dg td.dg-weekend{background:rgba(0,0,0,.022);}
#hl-grid-table .dg td.dg-today{background:rgba(255,107,26,.05);}
#hl-grid-table .dg .dg-cellwrap{position:relative;display:flex;align-items:center;justify-content:center;}
#hl-grid-table .dg input.dg-in{width:50px;height:31px;text-align:center;font-size:13px;border:1.5px solid transparent;border-radius:7px;background:transparent;color:var(--text);-moz-appearance:textfield;appearance:textfield;}
#hl-grid-table .dg input.dg-in::-webkit-outer-spin-button,#hl-grid-table .dg input.dg-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
#hl-grid-table .dg input.dg-in::placeholder{color:rgba(0,0,0,.17);}
#hl-grid-table .dg input.dg-in:hover{border-color:var(--border-strong);}
#hl-grid-table .dg input.dg-in:focus{outline:none;border-color:var(--orange);background:var(--surface);box-shadow:0 0 0 3px rgba(255,107,26,.18);}
#hl-grid-table .dg input.dg-in.has{background:rgba(0,0,0,.05);font-weight:700;}
#hl-grid-table .dg input.dg-in.dg-leave{background:rgba(175,82,222,.12)!important;color:var(--purple)!important;font-weight:700;}
#hl-grid-table .dg input.dg-in.dg-assumed{background:rgba(255,149,0,.10);color:#9a5b00;font-style:italic;font-weight:600;}
#hl-grid-table .dg .dg-tag{position:absolute;top:3px;right:4px;font-size:8px;font-weight:800;color:var(--purple);pointer-events:none;}
#hl-grid-table .dg.dg-haslocs th.dg-day{min-width:94px;}
#hl-grid-table .dg.dg-haslocs tbody td{height:auto;}
#hl-grid-table .dg .dg-loc{font-size:9px;line-height:1.15;color:var(--muted);max-width:88px;margin:0 auto 3px;padding:0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;}
#hl-grid-table .dg .dg-loc.present{color:var(--green-d);}
#hl-grid-table .dg .dg-loc.office{color:var(--yellow-d);font-weight:600;}
#hl-grid-table .dg td.dg-total{text-align:center;font-weight:800;border-left:2px solid var(--border-strong);background:var(--card-2);color:var(--text);font-size:13px;}
#hl-grid-table .dg td.dg-total.full{color:var(--green-d);}
#hl-grid-table .dg td.dg-total.zero{color:rgba(0,0,0,.25);font-weight:600;}
#hl-grid-table .dg tfoot td{position:sticky;bottom:0;z-index:3;background:#eef0f4;border-top:2px solid var(--border-strong);font-weight:800;text-align:center;padding:9px 4px;color:var(--text);font-size:13px;}
#hl-grid-table .dg tfoot td.dg-name{left:0;z-index:4;text-align:left;padding-left:15px;color:var(--soft);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.3px;}
#hl-grid-table .dg tfoot td.dg-foot-grand{border-left:2px solid var(--border-strong);color:var(--orange-d);}

/* ─────────────────────────────────────── */

.ip-card { display:flex; flex-direction:column; gap:4px; padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:var(--bg); transition:border-color .25s ease, box-shadow .25s ease; }
      .ip-card .ip-card-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
      .ip-card .ip-card-title { font-size:12.5px; font-weight:700; color:var(--text); }
      .ip-card .ip-card-sub   { font-size:10.5px; color:var(--muted); }
      .ip-card .ip-card-pill  { font-size:9.5px; padding:2px 7px; border-radius:999px; text-transform:uppercase; letter-spacing:.4px; font-weight:700; }
      .ip-card .ip-card-meta  { font-size:10.5px; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; }
      .ip-card.pending    { opacity:.55; }
      .ip-card.extracting { border-color:#a855f7; box-shadow:0 0 0 1px rgba(168,85,247,.18); }
      .ip-card.drafting   { border-color:var(--orange); box-shadow:0 0 0 1px rgba(249,115,22,.18); }
      .ip-card.done       { border-color:var(--green); }
      .ip-card.error,
      .ip-card.parse-error{ border-color:var(--red); background:rgba(239,68,68,.04); }
      .ip-card .pill-pending    { background:var(--card); color:var(--muted); }
      .ip-card .pill-extracting { background:rgba(168,85,247,.15); color:#a855f7; }
      .ip-card .pill-drafting   { background:rgba(249,115,22,.15); color:var(--orange); }
      .ip-card .pill-done       { background:rgba(34,197,94,.15); color:var(--green); }
      .ip-card .pill-error,
      .ip-card .pill-parse-error{ background:rgba(239,68,68,.15); color:var(--red); }
      .ip-card .pill-group-HIGH   { background:rgba(34,197,94,.15);  color:var(--green); }
      .ip-card .pill-group-LOW    { background:rgba(245,158,11,.18); color:#f59e0b; }
      .ip-card .pill-group-INSANE { background:rgba(239,68,68,.18);  color:var(--red); }

/* ─────────────────────────────────────── */

.pl2-row{padding:14px 0;border-top:1px solid var(--border);}
        .pl2-row:first-child{border-top:none;padding-top:2px;}
        .pl2-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px;}
        .pl2-name{font-size:14px;font-weight:650;color:var(--text);}
        .pl2-ns{font-size:10.5px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,monospace;margin-left:7px;}
        .pl2-bar{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--card-2);border:1px solid var(--border);}
        .pl2-bar-emb{background:var(--green);}
        .pl2-bar-pen{background:var(--orange);opacity:.5;}
        .pl2-blurb{font-size:11px;color:var(--muted);margin-top:8px;}
        .pl2-note{font-size:11.5px;color:var(--soft);background:var(--card-2);border:1px solid var(--border);border-radius:8px;padding:9px 12px;margin-top:12px;}

/* ─────────────────────────────────────── */

.pl-section { padding: 14px 0; border-bottom: 1px solid var(--border); }
        .pl-section:last-child { border-bottom: 0; }
        .pl-label { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
        .pl-big { font-size: 28px; font-weight: 700; line-height: 1.1; }
        .pl-sub { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
        .pl-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
        .pl-file { font-size: 13px; font-weight: 500; color: var(--text); word-break: break-all; }
        .pl-meta { font-size: 11px; color: var(--muted); white-space: nowrap; }
        .pl-empty { font-size: 12px; color: var(--muted); font-style: italic; }
        .pl-list { display: grid; gap: 4px; max-height: 320px; overflow-y: auto; }
        .pl-list-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
        .pl-list-row:last-child { border-bottom: 0; }
        .pl-sublabel { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
        .pl-bar-row { display: grid; grid-template-columns: 110px 1fr 50px; gap: 8px; align-items: center; padding: 3px 0; font-size: 11.5px; }
        .pl-bar-label { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .pl-bar-track { height: 6px; background: rgba(0,0,0,.08); border-radius: 99px; overflow: hidden; }
        .pl-bar-fill { display: block; height: 100%; background: var(--orange); border-radius: 99px; transition: width .3s ease; }
        .pl-bar-count { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }

/* ─────────────────────────────────────── */

@keyframes flightPulse { 0%,100%{background:rgba(255,107,26,.04);} 50%{background:rgba(255,107,26,.12);} }
        @keyframes justDonePulse { 0%{background:rgba(34,197,94,.35);} 100%{background:rgba(34,197,94,.10);} }

/* ═══════════════════════════════════════════════════════════════════════════
   BRIDGE — styles the Django templates' utility classes in the Oasis palette.
   (card / btn / btn-ghost / pill / msg / howto / nav-item already come from the
   original app.html CSS above; the classes below are the ones the Django pages
   add, defined here with your --orange / --card / --border / etc. variables.)
   ═══════════════════════════════════════════════════════════════════════════ */
.btn--primary{background:var(--orange);color:#fff;border:1px solid var(--orange-d);}
.btn--primary:hover{background:var(--orange-d);}
.btn--success{background:var(--green);color:#fff;border:1px solid var(--green-d);}
.btn--success:hover{background:var(--green-d);}
.btn--danger{background:var(--red);color:#fff;border:1px solid var(--red-d);}
.btn--ghost{background:var(--surface);color:var(--text);border:1px solid var(--border-strong);}
.btn--sm{padding:4px 9px;font-size:12px;}
.card--narrow{max-width:400px;margin:40px auto;}

.table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);}
.table th,.table td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:top;}
.table th{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);background:var(--card-2);}
.table tbody tr:hover{background:var(--card);}
/* Wrap a wide .table in this so it scrolls horizontally on mobile instead of
   blowing out the page. Was previously copy-pasted as a local <style> block
   in 2 templates (projects/list.html, projects/detail.html) — promoted here
   so new templates don't have to redefine it (or silently no-op the class,
   which is what happened until this fix). */
.table-scroll{overflow-x:auto;}
.table tr:last-child td{border-bottom:0;}
/* The "View proof" disclosure row in _wo_table_rows.html's report variant:
   a full-width row that drops open directly under the WO it belongs to,
   holding an <iframe> onto workorders:detail?bare=1 (the whole WO page,
   chrome-free), instead of navigating to a separate page or new tab. Not a
   data row, so it opts out of the hover tint. */
.wo-proof-row td{background:var(--card-2);padding:10px 4px;}
.wo-proof-row:hover td{background:var(--card-2);}
.wo-proof-frame{width:100%;height:70vh;border:0;border-radius:8px;background:var(--surface);}
.row-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}

.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--card-2);color:var(--soft);}
.badge--green{background:rgba(52,199,89,.14);color:var(--green-d);}
.badge--amber,.badge--yellow{background:rgba(255,149,0,.16);color:var(--yellow-d);}
.badge--red{background:rgba(255,59,48,.13);color:var(--red-d);}
.badge--blue{background:rgba(0,122,255,.12);color:var(--blue-d);}
.badge--purple{background:rgba(175,82,222,.14);color:#7a3aa0;}
.badge--gray{background:var(--card-2);color:var(--soft);}

.page-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;flex-wrap:wrap;}
.page-head h1{margin:0;font-size:22px;}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 16px;}

.kv{display:grid;grid-template-columns:180px 1fr;gap:6px 16px;margin:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow-sm);}
.kv dt{color:var(--muted);font-size:13px;}.kv dd{margin:0;overflow-wrap:anywhere;}
@media(max-width:520px){.kv{grid-template-columns:1fr;}.kv dt{margin-top:8px;}.kv dt:first-child{margin-top:0;}}

.empty{text-align:center;color:var(--muted);background:var(--surface);border:1px dashed var(--border-strong);border-radius:12px;padding:40px 16px;}

.field{display:block;margin-bottom:14px;}
.field>label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px;}
.field input,.field select,.field textarea,.searchbar input{padding:8px 10px;border:1px solid var(--border-strong);border-radius:9px;font-size:14px;background:var(--surface);color:var(--text);}
.searchbar{max-width:320px;}.searchbar input{width:100%;}

.tiles{display:flex;gap:14px;flex-wrap:wrap;margin:18px 0;}
.tile{flex:1 1 150px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;text-align:center;text-decoration:none;color:var(--text);box-shadow:var(--shadow-sm);display:block;}
a.tile:hover{border-color:var(--orange);}
.tile__num{font-size:30px;font-weight:700;}.tile__label{color:var(--muted);font-size:13px;}

.pager{display:flex;gap:12px;align-items:center;margin-top:14px;color:var(--muted);}
/* Flash messages float as toasts (Ivan, 2026-08-20: shouldn't be part of the
   page) — the wrapper is fixed-position so it never pushes page content, and
   each message keeps its own background/shadow since it's now floating over
   whatever's underneath rather than sitting inline in the page flow. */
.msg-toasts{position:fixed;top:calc(var(--header-h,56px) + 14px);right:18px;z-index:1100;
  display:flex;flex-direction:column;gap:8px;width:min(360px,calc(100vw - 36px));pointer-events:none;}
.msg--success{background:var(--surface);color:var(--green-d);padding:10px 14px;border-radius:10px;box-shadow:var(--shadow-lg);border:1px solid rgba(52,199,89,.3);pointer-events:auto;}
.msg--error{background:var(--surface);color:var(--red-d);padding:10px 14px;border-radius:10px;box-shadow:var(--shadow-lg);border:1px solid rgba(255,59,48,.3);pointer-events:auto;}
.msg--info{background:var(--surface);color:var(--blue-d);padding:10px 14px;border-radius:10px;box-shadow:var(--shadow-lg);border:1px solid rgba(0,122,255,.3);pointer-events:auto;}
.msg--warning{background:var(--surface);color:var(--yellow-d);padding:10px 14px;border-radius:10px;box-shadow:var(--shadow-lg);border:1px solid rgba(255,149,0,.3);pointer-events:auto;}
/* A toast is a fixed 360px column, so one long unbroken run of characters --
   an email address, a one-time password -- used to spill past its own rounded
   edge and get clipped by the viewport. That is worst for exactly the messages
   that matter most: the hire confirmation is the ONLY place a new office
   assistant's PIN and password are ever shown. Wrap anywhere rather than
   widening the column. */
.msg--success,.msg--error,.msg--info,.msg--warning{overflow-wrap:anywhere;}
.muted{color:var(--muted);}.inline{display:inline;}.stack>*+*{margin-top:14px;}

/* ── Shell + grouped sidebar navigation (UI revamp) ───────────────────────
   The nav was a single cramped row of 16 equal-width tabs. This reorganizes it
   into a clear, grouped LEFT SIDEBAR so the app's sections are scannable at a
   glance. The brand header stays full-width on top; the sidebar is sticky while
   content scrolls, and collapses to a horizontal scrollable bar on narrow
   screens (no JS). Only the sidebar's own rules are overridden here — every
   design token, button, card, table and the .nav-item active color are reused
   unchanged. */
.shell{display:flex;align-items:flex-start;}
.shell > main{flex:1;min-width:0;}

nav.sidebar{
  display:flex;flex-direction:column;flex-wrap:nowrap;gap:2px;
  width:214px;flex-shrink:0;
  background:var(--surface);
  border-bottom:none;border-right:1px solid var(--border);
  padding:14px 10px;
  position:sticky;top:var(--header-h,0px);align-self:flex-start;
  max-height:calc(100vh - var(--header-h, 0px));overflow-y:auto;overflow-x:hidden;
}
nav.sidebar .nav-group{display:flex;flex-direction:column;gap:1px;margin-bottom:6px;}
nav.sidebar .nav-group:last-child{margin-bottom:0;}
/* Group labels double as collapse toggles: click to fold the group (▾/▸). */
nav.sidebar .nav-group-label{
  font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted);padding:5px 11px 3px;
  display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;
  border-radius:7px;transition:color .12s,background .12s;
}
nav.sidebar .nav-group-label:hover{color:var(--text);background:rgba(255,107,26,.05);}
nav.sidebar .nav-group-label::before{
  content:"▾";font-size:9px;line-height:1;color:var(--muted);
  transition:transform .15s;display:inline-block;
}
nav.sidebar .nav-group.collapsed .nav-group-label::before{transform:rotate(-90deg);}
nav.sidebar .nav-group.collapsed .nav-item{display:none;}
/* While the live filter is active, matching items show even in a folded group. */
nav.sidebar.nav-filtering .nav-group.collapsed .nav-item{display:flex;}
/* A section whose every link was gated away renders as a bare header with
   nothing under it: a fold that opens onto nothing. That was invisible while
   the sidebar showed most items to most people, and became routine once roles
   got a focused sidebar (apps.core.nav's FOCUS), so the empty ones drop out
   here rather than each section growing a hand-kept {% if %} listing its own
   children. Not a security boundary: it hides a header, and the header never
   carried a link. */
nav.sidebar .nav-group:not(:has(.nav-item)){display:none;}
/* Vertical, left-aligned items (override the legacy horizontal flex:1 tab). */
nav.sidebar .nav-item{
  flex:none;justify-content:flex-start;text-align:left;
  padding:7px 11px;border:none;border-bottom:none;border-radius:9px;
  font-size:13px;line-height:1.25;color:var(--soft);gap:9px;
}
nav.sidebar .nav-item:hover{background:rgba(255,107,26,.06);color:var(--text);}
nav.sidebar .nav-item.active{
  background:rgba(255,107,26,.10);color:var(--orange);font-weight:600;
  border-bottom:none;box-shadow:inset 3px 0 0 var(--orange);
}
/* Search-only tab entries (apps.core.page_tabs / SEARCHABLE_TABS): hidden in
   the sidebar's resting state no matter what — the nav-filter script is the
   only thing that ever reveals one, and only on an actual query match. */
nav.sidebar .nav-item--tab-shadow{display:none;}

/* Collapsible sidebar: the header ☰ toggles html.sb-collapsed (persisted in JS). */
#sb-toggle{
  flex-shrink:0;width:34px;height:34px;border:1px solid var(--border);
  border-radius:8px;background:var(--surface);color:var(--soft);
  font-size:17px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:background .12s,color .12s;
}
#sb-toggle:hover{background:rgba(255,107,26,.08);color:var(--orange);}
html.sb-collapsed nav.sidebar{display:none;}

/* ── App-wide modal popup (WO card / Ground Truth) ──────────────── */
.oasis-modal{position:fixed;inset:0;z-index:1000;display:none;}
.oasis-modal.open{display:block;}
.oasis-modal__backdrop{position:absolute;inset:0;background:rgba(20,20,28,.45);backdrop-filter:blur(1px);}
.oasis-modal__panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(720px,94vw);max-height:90vh;overflow:auto;background:var(--surface,#fff);
  border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,.35);padding:18px;}
/* --lg: a full screen swapped in (e.g. the Link-to-work-order review), not a
   small read-only fragment (Ground Truth, WO email view) — selected off a
   marker class on the swapped-in content so the ~20 existing small-fragment
   modal usages are untouched. */
.oasis-modal__panel:has(.oasis-modal-body--lg){width:min(1200px,96vw);max-height:94vh;}
.oasis-modal__x{position:absolute;top:10px;right:12px;width:30px;height:30px;border:none;
  border-radius:8px;background:rgba(0,0,0,.05);color:#555;font-size:15px;cursor:pointer;z-index:2;}
.oasis-modal__x:hover{background:rgba(0,0,0,.10);color:#000;}
/* The stacked "peek" popup (Ground Truth / Email View) — same shell, higher
   z-index so it renders ON TOP of a primary modal (e.g. Email View opened
   from inside the Link-this-bill modal) instead of destroying it. */
.oasis-modal--peek{z-index:1100;}
.oasis-modal--peek .oasis-modal__panel{width:min(640px,92vw);}
/* Instant-open modal spinner (shown the moment a modal fragment is requested). */
.modal-loading{display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:120px;color:var(--muted,#667);font-size:14px;}
.modal-spinner{width:18px;height:18px;border-radius:50%;border:2px solid rgba(0,0,0,.15);
  border-top-color:var(--orange,#e07b39);animation:modal-spin .7s linear infinite;}
@keyframes modal-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.modal-spinner{animation-duration:1.6s;}}

/* ── Ground Truth panel (shared: Details card + Print Queue preview + AR matchers) ── */
.sed{border:1px solid var(--border,rgba(0,0,0,.12));border-radius:12px;padding:14px;background:var(--card,#fafafc);}
.sed-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.sed-title{font-size:14px;font-weight:800;}
.sed-kind{font-size:11px;font-weight:700;color:#5b3aa0;background:#f1ecfb;border:1px solid #ddd0f2;border-radius:999px;padding:2px 9px;}
.sed-meta{font-size:12px;color:var(--soft,#555);line-height:1.5;margin-bottom:10px;}
.sed-pages{display:flex;flex-direction:column;gap:10px;max-height:70vh;overflow:auto;}
/* WORK-ORDER-ONLY PANEL — shown when no source document or email body survived
   ingestion. It stands in for the document, so it is deliberately quieter than
   one: a flagged banner, then the job's own words, then its fields. Reads as a
   record, not as paperwork, so nobody mistakes it for the real thing. */
.sed-fb{display:flex;flex-direction:column;gap:14px;}
.sed-fb__flag{font-size:12.5px;line-height:1.5;color:var(--fg,#111);background:rgba(255,149,0,.10);border:1px solid rgba(255,149,0,.38);border-left:3px solid #ff9500;border-radius:8px;padding:10px 12px;}
.sed-fb__flag b{display:block;font-size:13px;font-weight:800;margin-bottom:3px;}
.sed-fb__lbl{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted,#86868b);margin-bottom:6px;}
.sed-fb__scope{border:1px solid var(--border,rgba(0,0,0,.12));border-radius:8px;padding:11px 12px;background:var(--card-2,#f5f5f7);}
.sed-fb__scope p{margin:0 0 8px;font-size:13.5px;line-height:1.55;color:var(--fg,#111);white-space:pre-wrap;}
.sed-fb__scope p:last-child{margin-bottom:0;}
.sed-fb__scope--empty p{color:var(--muted,#86868b);font-style:italic;}
.sed-fb__dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;font-size:12.5px;line-height:1.45;}
.sed-fb__dl dt{color:var(--muted,#86868b);white-space:nowrap;}
.sed-fb__dl dd{margin:0;color:var(--fg,#111);font-weight:600;overflow-wrap:anywhere;}
.sed-fb__portal{align-self:flex-start;font-size:12.5px;font-weight:700;color:#0071e3;text-decoration:none;}
.sed-fb__portal:hover{text-decoration:underline;}
.sed-pagewrap{position:relative;display:block;line-height:0;}
/* Everything past page 1 folds away: page 1 carries the WO number, address and
   unit, and the rest were eating the pane's height unread. */
.sed-more{border-top:1px solid var(--border,rgba(0,0,0,.12));margin-top:2px;padding-top:8px;}
.sed-more__sum{cursor:pointer;font-size:12px;font-weight:600;color:var(--muted,#666);list-style:none;padding:3px 0;line-height:1.4;}
.sed-more__sum::-webkit-details-marker{display:none;}
.sed-more__sum::before{content:"▸";display:inline-block;margin-right:6px;transition:transform .15s ease;}
.sed-more[open] > .sed-more__sum::before{transform:rotate(90deg);}
.sed-more__sum:hover{color:var(--fg,#111);}
.sed-more__sum:focus-visible{outline:2px solid #ff6b1a;outline-offset:2px;border-radius:4px;}
/* Scoped to [open] on purpose: an unscoped `display:flex` here is an AUTHOR rule
   that outranks the UA rule hiding a closed <details>, so the pages would stay on
   screen and the fold would collapse nothing. */
.sed-more[open] > .sed-more__body{display:flex;flex-direction:column;gap:10px;margin-top:8px;}
.sed-page{width:100%;height:auto;min-height:120px;background:var(--card-2,#f5f5f7);border:1px solid var(--border,rgba(0,0,0,.12));border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.06);}
/* A PAGE THAT DID NOT RENDER MUST NOT LEAVE ITS BOXES BEHIND. `.sed-page` is
   height:auto, so a failed PNG collapses the image to nothing — while
   `.sed-pagewrap` stays position:relative and the highlight boxes, positioned in
   PERCENTAGES of that now-zero box, keep drawing. The result is a grey line with
   coloured bars on it and no page: unreadable, and it reads as corrupt data
   rather than a missing image. min-height above keeps the frame; this hides the
   orphaned overlay and says what happened. */
.sed-pagewrap.is-broken .sed-box{display:none;}
.sed-pagewrap.is-broken::after{content:attr(data-broken);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;font-size:12.5px;line-height:1.5;color:var(--muted,#86868b);text-align:center;}
/* Overlay boxes: bigger (3px border) + a different color per kind of field. The
   matched text rides in title=; the legend above the pages spells out the colors. */
.sed-box{position:absolute;border:3px solid #ff3b30;background:rgba(255,59,48,.10);border-radius:3px;pointer-events:none;box-shadow:0 0 0 1px rgba(255,255,255,.6) inset;}
.sed-box--wo{border-color:#ff3b30;background:rgba(255,59,48,.12);}
.sed-box--address{border-color:#0a84ff;background:rgba(10,132,255,.12);}
.sed-box--issue{border-color:#8e44ad;background:rgba(142,68,173,.15);}
.sed-box--service{border-color:#13a05a;background:rgba(19,160,90,.15);}
.sed-box--meta{border-color:#ff9500;background:rgba(255,149,0,.13);}
.sed-box--field{border-color:#ff3b30;background:rgba(255,59,48,.10);}
/* The floor-plan DRAWING (Ivan, 2026-09-07: billing is off the plan). Thicker,
   dashed, teal, so it reads as "this region" rather than "this text", and the
   one box that takes clicks: it is a link to the full-resolution page. */
.sed-box--plan{border:4px dashed #0e8a8a;background:rgba(14,138,138,.07);pointer-events:auto;cursor:zoom-in;
  box-shadow:0 0 0 2px rgba(255,255,255,.85) inset;text-decoration:none;}
.sed-box--plan:hover,.sed-box--plan:focus-visible{background:rgba(14,138,138,.16);border-style:solid;outline:none;}
.sed-box--plan::before{content:attr(data-tag);position:absolute;left:-4px;top:-4px;padding:2px 8px;
  font-size:11px;font-weight:800;line-height:1.3;letter-spacing:.02em;color:#fff;background:#0e8a8a;
  border-radius:3px 0 6px 0;white-space:nowrap;}
.sed-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;font-weight:700;color:#444;margin:0 2px 8px;}
.sed-legend span{display:inline-flex;align-items:center;gap:5px;}
.sed-legend i{width:13px;height:13px;border-radius:3px;border:2px solid;box-sizing:border-box;}
.sed-legend .lg-wo{border-color:#ff3b30;background:rgba(255,59,48,.2);}
.sed-legend .lg-address{border-color:#0a84ff;background:rgba(10,132,255,.2);}
.sed-legend .lg-issue{border-color:#8e44ad;background:rgba(142,68,173,.22);}
.sed-legend .lg-service{border-color:#13a05a;background:rgba(19,160,90,.22);}
.sed-legend .lg-meta{border-color:#ff9500;background:rgba(255,149,0,.22);}
.sed-legend .lg-plan{border-color:#0e8a8a;border-style:dashed;background:rgba(14,138,138,.15);}
/* ── Scope spotlight (Ground Truth opened while linking a bill) ───────────────
   The reviewer's question is "is this the same JOB", so the SCOPE boxes (Issue
   description / Service comments) burn bright and the identifier boxes drop back
   — right building + right unit + wrong work is the mistake that pays the wrong
   invoice, and it hides in a page of equally-weighted boxes. */
.sed-legend__lit{color:#6d28d9;background:#f5f0ff;border:1px solid #ddd0f2;border-radius:999px;padding:1px 9px;}
.sed--scopelit .sed-box{opacity:.22;border-width:2px;}
.sed--scopelit .sed-box--plan{opacity:.6;border-width:3px;}
.sed--scopelit .sed-box--issue,.sed--scopelit .sed-box--service{opacity:1;border-width:4px;
  box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 16px 4px rgba(142,68,173,.45);
  animation:sed-scope-pulse 2.2s ease-in-out 3;}
@keyframes sed-scope-pulse{0%,100%{box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 16px 4px rgba(142,68,173,.45);}
  50%{box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 26px 9px rgba(142,68,173,.65);}}
@media (prefers-reduced-motion:reduce){.sed--scopelit .sed-box--issue,.sed--scopelit .sed-box--service{animation:none;}}
/* The strip: the two scopes as each document words them, shared words marked. */
.sed-scope{border:1px solid #ddd0f2;border-left:4px solid #8e44ad;border-radius:10px;
  background:#faf7ff;padding:11px 14px;margin:0 0 11px;}
.sed-scope--strong{border-color:#a7dcbc;border-left-color:#13a05a;background:#f4fdf7;}
.sed-scope--none{border-color:#f3c9c9;border-left-color:#d65a5a;background:#fff7f7;}
.sed-scope__hd{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px;}
.sed-scope__title{font-size:13.5px;font-weight:800;color:#2c2c33;}
.sed-scope__pill{font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  color:#5b3aa0;background:#fff;border:1px solid #ddd0f2;border-radius:999px;padding:2px 9px;white-space:nowrap;}
.sed-scope--strong .sed-scope__pill{color:#0c5132;border-color:#9ad3ad;}
.sed-scope--none .sed-scope__pill{color:#8a2b2b;border-color:#e9b4b4;}
.sed-scope__row{display:grid;grid-template-columns:9.5rem 1fr;gap:4px 12px;align-items:baseline;margin:0 0 5px;}
.sed-scope__lbl{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#8b8b96;}
.sed-scope__txt{font-size:13px;line-height:1.45;color:#1a1a1f;}
.sed-scope__verdict{font-size:12.5px;line-height:1.45;color:#4a4a55;margin:8px 0 0;}
/* A shared scope word, marked in the document text — distinct from the plain
   yellow field-value <mark> so "the job" reads apart from "the identifiers". */
.sed mark.mk-scope{background:#e9d5ff;box-shadow:0 0 0 1px #c4a4e8 inset;}
/* Honest banner: the source PDF wasn't captured, so we're showing the text instead. */
.sed-warn{font-size:12.5px;line-height:1.45;color:#7a4500;background:#fff3cd;border:1px solid #e0a800;
  border-radius:8px;padding:9px 12px;margin:0 0 10px;}
.sed-body{white-space:pre-wrap;word-break:break-word;font:12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:#fff;border:1px solid var(--border,rgba(0,0,0,.12));border-radius:8px;padding:12px;margin:0;max-height:50vh;overflow:auto;}
.sed-body mark,.sed mark{background:#fff3a3;color:inherit;padding:0 1px;border-radius:2px;}
.sed-frame{width:100%;height:60vh;border:1px solid var(--border,rgba(0,0,0,.12));border-radius:8px;background:#fff;}
/* The email body rendered as a human reads it: a readable sans-serif block (NOT a
   monospace dump, NOT a blank iframe), line breaks preserved, field values <mark>ed. */
.sed-email{white-space:pre-wrap;word-break:break-word;
  font:13.5px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#1a1a1f;background:#fff;border:1px solid var(--border,rgba(0,0,0,.12));border-radius:8px;
  padding:16px 18px;margin:0;max-height:60vh;overflow:auto;}

/* ── Print-queue work-order mini cards ───────────────────────────────────── */
.pq-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px;}
.pq-card{border:1px solid var(--border,rgba(0,0,0,.12));border-left:4px solid var(--brand,#ff6b1a);
  border-radius:11px;background:var(--surface,#fff);padding:12px 14px;display:flex;flex-direction:column;gap:7px;box-shadow:0 1px 3px rgba(0,0,0,.05);}
.pq-card__top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.pq-card__wo{font-size:14px;font-weight:800;text-decoration:none;color:var(--orange,#ff6b1a);cursor:pointer;background:none;border:none;padding:0;font-family:inherit;}
.pq-card__wo:hover{text-decoration:underline;}
.pq-card__addr{font-size:13px;font-weight:600;color:var(--text,#222);}
.pq-card__scope{font-size:12px;color:var(--soft,#555);line-height:1.4;}
.pq-card__foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px;}
.pq-card__time{font-size:11px;color:var(--muted,#9a9aa4);margin-left:auto;}
.pq-unmatched{border-left-color:#d65a5a;}
.pq-card--other{border-left-color:#9a9aa4;}
.pq-card--invoice{border-left-color:var(--green,#34c759);}
/* Pending states — a job that hasn't physically printed yet gets an amber
   (queued) or blue, gently-pulsing (printing) left rail so it reads as "not
   done" at a glance inside the same unified list as already-printed jobs. */
.pq-card--queued{border-left-color:#ff9500;}
.pq-card--printing{border-left-color:#007aff;position:relative;animation:pq-card-pulse 1.8s ease-out infinite;}
@keyframes pq-card-pulse{0%{box-shadow:0 0 0 0 rgba(0,122,255,.28);}70%{box-shadow:0 0 0 6px rgba(0,122,255,0);}100%{box-shadow:0 0 0 0 rgba(0,122,255,0);}}
/* Held — Abdu printed it, never heard back, and can't prove either way. The
   card carries a question instead of a status, so it reads as needing an
   answer rather than as another job quietly waiting its turn. */
.pq-card--held{border-left-color:#ff9500;}
.pq-held{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.pq-held__ask{font-size:12px;font-weight:600;color:var(--soft,#555);}
.pq-held__btn{font-size:0.85rem;}

/* ── Print-log filter bar ── uses the shared .filters convention (base.html).
   A global reset forces input[type=date/search] to width:100% (oasis.css's
   text-input rule) which, inside a flex row, forces every control onto its
   own line — so this page scopes each control back to a sane intrinsic width.
   Only the search input should stretch (it's the wide element in the row). */
#print-queue-body .filters select{width:auto;min-width:150px;}
#print-queue-body .filters input[type="date"]{width:auto;}
#print-queue-body .filters .pq-search{flex:1 1 220px;min-width:160px;width:auto;}
.pq-pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:1rem;}
.pq-pagination__label{font-size:12.5px;color:var(--muted,#9a9aa4);}

/* ── Manager assignment board (assign work orders to employees) ─────────── */
/* ── Assign board: toolbar (search • view toggle • expand/collapse) ─────── */
.assign-sub{margin-top:.2rem;max-width:60ch;}
.assign-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.assign-toolbar__search{max-width:300px;flex:1 1 220px;}
.assign-toolbar__actions{display:flex;gap:4px;}
.assign-toolbar__count{margin-left:auto;font-size:12.5px;color:var(--muted,#86868b);white-space:nowrap;}
/* Hide the list-only controls while the map is showing (toggled via JS). */
.assign-toolbar.is-map [data-list-only]{display:none;}

.seg__btn{border:1px solid var(--border-strong,rgba(0,0,0,.14));background:var(--surface,#fff);
  color:var(--soft,#6e6e73);font:inherit;font-size:13px;font-weight:600;padding:6px 14px;cursor:pointer;}
.seg__btn:first-child{border-radius:9px 0 0 9px;}
.seg__btn:last-child{border-radius:0 9px 9px 0;margin-left:-1px;}
.seg__btn.is-active{background:var(--orange,#ff6b1a);border-color:var(--orange,#ff6b1a);color:#fff;}
.btn-quiet{border:none;background:none;color:var(--soft,#6e6e73);font:inherit;font-size:12.5px;
  font-weight:600;padding:6px 8px;border-radius:8px;cursor:pointer;}
.btn-quiet:hover{background:var(--card-2,#f5f5f7);color:var(--text,#222);}

/* Show exactly one view at a time. */
#assign-shell[data-view="list"] .assign-map-view{display:none;}
#assign-shell[data-view="map"] .assign-list-view{display:none;}

/* ── Region (proximity) sections ───────────────────────────────────────── */
.region{margin-bottom:22px;}
.region__head{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;
  padding:6px 2px 10px;border-bottom:1px solid var(--border,rgba(0,0,0,.08));margin-bottom:14px;}
.region__head::-webkit-details-marker{display:none;}
.region__name{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--text,#222);}
.region__pin{color:var(--orange,#ff6b1a);font-size:15px;}
.region__meta{font-size:12px;color:var(--muted,#86868b);}
.region__head::before{content:"▸";color:var(--muted,#9a9aa4);font-size:11px;
  transition:transform .15s ease;margin-right:-4px;}
.region[open]>.region__head::before{transform:rotate(90deg);}

/* ── Compact, collapsible property cards ───────────────────────────────── */
.assign-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;align-items:start;}
.prop-card{border:1px solid var(--border,rgba(0,0,0,.10));border-left:3px solid var(--muted,#c8c8cf);
  border-radius:11px;background:var(--surface,#fff);overflow:hidden;transition:box-shadow .15s,border-color .15s;}
.prop-card:hover{box-shadow:0 1px 8px rgba(0,0,0,.06);}
.prop-card--green{border-left-color:var(--green,#34c759);}
.prop-card--red{border-left-color:var(--red,#ff3b30);}
.prop-card--amber{border-left-color:var(--orange,#ff6b1a);}
.prop-card__head{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;padding:11px 13px;}
.prop-card__head::-webkit-details-marker{display:none;}
.prop-card__chev{color:var(--muted,#9a9aa4);font-size:15px;font-weight:700;line-height:1;
  transition:transform .15s ease;flex:0 0 auto;}
.prop-card[open]>.prop-card__head .prop-card__chev{transform:rotate(90deg);}
.prop-card__title{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto;}
.prop-card__addr-line{font-size:13.5px;font-weight:700;color:var(--text,#222);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.prop-card__count{font-size:11px;color:var(--muted,#86868b);font-weight:500;}
.prop-card__body{display:flex;flex-direction:column;gap:9px;max-height:520px;overflow-y:auto;
  padding:2px 13px 13px;border-top:1px solid var(--border,rgba(0,0,0,.06));}
.prop-card--flash{box-shadow:0 0 0 2px var(--orange,#ff6b1a);border-color:var(--orange,#ff6b1a);}

.prop-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;
  padding:.28rem .55rem;border-radius:999px;white-space:nowrap;flex:0 0 auto;}
.prop-badge--green{background:rgba(52,199,89,.14);color:var(--green-d);}
.prop-badge--red{background:rgba(255,59,48,.13);color:var(--red-d);}
.prop-badge--amber{background:rgba(255,149,0,.16);color:var(--yellow-d);}

/* ── Map view (a real Leaflet + OpenStreetMap map) ───────────────────────── */
.assign-map-view{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start;}
.assign-map{position:relative;}
.assign-leaflet-map{height:600px;border-radius:14px;overflow:hidden;
  border:1px solid var(--border,rgba(0,0,0,.10));background:var(--card-2,#f5f5f7);}
/* Town name tooltip — a permanent Leaflet tooltip anchored at the town's true
   centroid (pins themselves sit nearby, jittered), on a faint chip so it
   stays legible over the tiles. */
.assign-map__town-tooltip{background:rgba(255,255,255,.82);border:none;box-shadow:none;
  font-size:10px;font-weight:700;color:var(--soft,#6e6e73);letter-spacing:.4px;
  text-transform:uppercase;padding:1px 6px;border-radius:6px;}
.assign-map__town-tooltip::before{display:none;}

/* Custom marker: a Leaflet divIcon whose innerHTML is this dot + tooltip. */
.map-pin{cursor:pointer;transition:transform .1s;}
.map-pin__dot{display:flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;color:#fff;font-size:12px;font-weight:800;box-shadow:0 1px 4px rgba(0,0,0,.28);
  border:2px solid #fff;}
.map-pin--green .map-pin__dot{background:var(--green,#34c759);}
.map-pin--red .map-pin__dot{background:var(--red,#ff3b30);}
.map-pin--amber .map-pin__dot{background:var(--orange,#ff6b1a);}
.map-pin:hover{transform:scale(1.12);z-index:1000!important;}
.map-pin.is-active .map-pin__dot{box-shadow:0 0 0 4px rgba(255,107,26,.35),0 1px 4px rgba(0,0,0,.28);}
.map-pin.is-dim{opacity:.2;}
.map-pin__tip{background:#1c1c1e;color:#fff;font-size:11px;font-weight:600;padding:4px 8px;
  border-radius:6px;white-space:nowrap;border:none;box-shadow:none;}
.map-pin__tip::before{display:none;}

.assign-map__panel{position:sticky;top:12px;border:1px solid var(--border,rgba(0,0,0,.10));
  border-radius:14px;background:var(--surface,#fff);padding:16px;min-height:200px;max-height:600px;overflow-y:auto;}
.assign-map__panel-empty{display:flex;flex-direction:column;gap:6px;text-align:center;
  color:var(--muted,#86868b);padding:40px 8px;}
/* `display:flex` above beats the plain `hidden` attribute — restore hiding. */
.assign-map__panel-empty[hidden]{display:none;}
.assign-map__panel-empty strong{color:var(--soft,#6e6e73);font-size:14px;}
.assign-map__panel-empty span{font-size:12.5px;}
.map-detail__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px;}
.map-detail__addr{font-size:14px;font-weight:700;color:var(--text,#222);line-height:1.3;}
.map-detail__town{font-size:11.5px;color:var(--muted,#86868b);font-weight:600;margin-top:2px;}
.map-detail__wos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.map-detail__wo{border-top:1px solid var(--border,rgba(0,0,0,.07));padding-top:10px;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.map-detail__wo:first-child{border-top:none;padding-top:0;}
.map-detail__wonum{font-size:13px;font-weight:800;color:var(--orange,#ff6b1a);text-decoration:none;}
.map-detail__wonum:hover{text-decoration:underline;}
.map-detail__assigned{font-size:10.5px;font-weight:700;color:var(--green-d);background:rgba(52,199,89,.14);
  padding:2px 7px;border-radius:999px;}
.map-detail__unassigned{font-size:10.5px;font-weight:700;color:var(--yellow-d);background:rgba(255,149,0,.16);
  padding:2px 7px;border-radius:999px;}
.map-detail__unit{flex-basis:100%;font-size:12px;font-weight:600;color:var(--soft,#555);}
.map-detail__scope{flex-basis:100%;font-size:12px;color:var(--soft,#555);line-height:1.4;}
.map-detail__open{margin-top:14px;padding:8px 10px;background:var(--card-2,#f5f5f7);width:100%;}

.assign-map__unmapped{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--border-strong,rgba(0,0,0,.14));}
.assign-map__unmapped-h{font-size:12px;font-weight:700;color:var(--muted,#86868b);}
.chip--ghost{border:1px solid var(--border-strong,rgba(0,0,0,.14));background:var(--surface,#fff);
  color:var(--soft,#6e6e73);font:inherit;font-size:12px;font-weight:600;padding:5px 11px;
  border-radius:999px;cursor:pointer;}
.chip--ghost:hover{border-color:var(--orange,#ff6b1a);color:var(--orange,#ff6b1a);}
@media (max-width:900px){.assign-map-view{grid-template-columns:1fr;}}

.assign-wo-card{gap:8px;}
/* One flex-wrap row: chips prefer to sit side by side, and only wrap to a
   new line when they run out of horizontal room. The chips live in a
   display:contents wrapper (purely so assignment_add has a stable element to
   swap by id) so they — and the + "chip" — are direct flex items of the same
   row and wrap together exactly like ordinary chips would. */
.assign-widget{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.assign-widget__chips{display:contents;}
.worker-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  border:1px solid var(--border-strong,rgba(0,0,0,.14));border-radius:999px;background:var(--card-2,#f5f5f7);
  color:var(--text,#222);padding:.3rem .65rem .3rem .5rem;cursor:pointer;font-family:inherit;}
.worker-chip:hover{border-color:var(--soft,#6e6e73);}
.worker-chip__light{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:#9a9aa4;}
.worker-chip--grey .worker-chip__light{background:#9a9aa4;}
.worker-chip--yellow .worker-chip__light{background:var(--yellow,#ff9500);}
.worker-chip--red .worker-chip__light{background:var(--red,#ff3b30);}
.worker-chip--green .worker-chip__light{background:var(--green,#34c759);}

/* Job Schedule board — one row per assigned worker: their status chip + an
   inline, auto-saving date picker for "when". */
.schedule-rows{display:flex;flex-direction:column;gap:6px;}
.schedule-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.schedule-row__date{font:inherit;font-size:12.5px;padding:.28rem .5rem;border-radius:8px;
  border:1px solid var(--border-strong,rgba(0,0,0,.14));background:var(--surface,#fff);color:var(--text,#222);}

.assign-dropdown{position:relative;display:inline-block;}
/* Every .assign-dropdown's trigger is a <summary> — the "+" button AND each
   assigned-worker chip (View employee / Unassign) — so hide the native
   disclosure marker generically here rather than per-variant. */
.assign-dropdown>summary{list-style:none;user-select:none;}
.assign-dropdown>summary::-webkit-details-marker{display:none;}
.assign-dropdown[open]>summary{border-color:var(--soft,#6e6e73);}
/* The + button IS a worker-chip (see .assign-widget__chips comment above) —
   same pill, just centered "+" text instead of a name, so it flows and wraps
   in the row exactly like the chips next to it. */
.assign-add-btn{justify-content:center;font-size:14px;font-weight:700;}
.assign-dropdown[open] .assign-add-btn{background:var(--card-2,#f5f5f7);border-color:var(--soft,#6e6e73);}
/* Default position (relative to .assign-dropdown) is only a fallback for the
   instant it's revealed — assignment_board.html's toggle listener immediately
   switches this to position:fixed with JS-computed coordinates, so it renders
   at the top level and isn't clipped by a scrollable/clamped .prop-card__body
   (see the height-clamp comment on .prop-card__body above). z-index sits
   above the sticky header (100) but below modals (200). */
.assign-dropdown__menu{position:absolute;top:calc(100% + 4px);left:0;z-index:150;min-width:180px;
  max-height:240px;overflow-y:auto;background:var(--surface,#fff);border:1px solid var(--border-strong,rgba(0,0,0,.14));
  border-radius:9px;box-shadow:0 6px 20px rgba(0,0,0,.14);padding:4px;display:flex;flex-direction:column;gap:1px;}
.assign-dropdown__item{display:block;width:100%;text-align:left;background:none;border:none;border-radius:6px;
  padding:.4rem .6rem;font-size:13px;font-family:inherit;color:var(--text,#222);cursor:pointer;text-decoration:none;}
.assign-dropdown__item:hover{background:var(--card-2,#f5f5f7);}
/* Unassign, on a worker chip's View employee / Unassign menu — a subtle red
   hint since it's destructive (the hx-confirm is the real guard). */
.assign-dropdown__item--danger{color:var(--red,#ff3b30);}
.assign-dropdown__empty{padding:.4rem .6rem;font-size:12.5px;}
/* Type-ahead box at the top of the "+" menu — see focusAssignFilter() in
   assignment_board.html. Sits inside the same scrollable/padded menu box,
   just pinned visually by being the first flex child. */
.assign-dropdown__filter{width:100%;box-sizing:border-box;margin-bottom:3px;padding:.4rem .6rem;
  font-size:13px;font-family:inherit;border:1px solid var(--border-strong,rgba(0,0,0,.14));
  border-radius:6px;background:var(--surface,#fff);color:var(--text,#222);}
.assign-dropdown__filter:focus{outline:2px solid var(--orange,#ff6b1a);outline-offset:-1px;}
/* Enter-key target while typing in the filter box above. */
.assign-dropdown__item.is-highlighted{background:var(--card-2,#f5f5f7);outline:1px solid var(--border-strong,rgba(0,0,0,.14));}
/* Instant feedback the MOMENT a name is clicked — htmx adds "htmx-request" to
   the clicked button itself as soon as the request starts (no JS of ours
   needed), well before the ~50-150ms round trip completes. The new chip
   lands behind this same open menu (expected — an open dropdown overlaying
   what's behind it is normal), so this spinner is what tells the user their
   click registered without needing to see the chip appear. */
.assign-dropdown__item.htmx-request{opacity:.55;pointer-events:none;display:flex;align-items:center;gap:6px;}
.assign-dropdown__item.htmx-request::after{content:"";width:11px;height:11px;flex:0 0 auto;
  border:2px solid var(--border-strong,rgba(0,0,0,.14));border-top-color:var(--orange,#ff6b1a);
  border-radius:50%;animation:assign-item-spin .6s linear infinite;}
@keyframes assign-item-spin{to{transform:rotate(360deg);}}

/* Per-job "how to do it" note (WorkOrder.entry_notes) shown on the assign board. */
.instructions-note{background:rgba(255,149,0,.09);border:1px solid rgba(255,149,0,.3);border-radius:8px;
  padding:8px 10px;font-size:13px;margin:8px 0;}
.instructions-note strong{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.03em;
  color:var(--yellow-d,#9a5b00);margin-bottom:3px;}

/* Narrow screens: sidebar stays VERTICAL (scrolls up/down), just slimmer. */
@media (max-width:900px){
  nav.sidebar{
    width:170px;
    padding:10px 8px;
  }
}

/* ── Interaction & update feedback (UI revamp — front-end only) ────────────
   Makes every interaction and in-place update unmistakable, app-wide, with no
   backend or per-screen changes. The existing #busy-bar is now driven on
   navigation + HTMX requests (wired in base.html); here we (1) flash swapped-in
   content so an update is obvious, (2) dim+lock the control that's mid-request,
   and (3) give every interactive element a clear keyboard-focus + hover state. */

/* HTMX: dim + lock the control that fired the in-flight request. */
.htmx-request{opacity:.55;pointer-events:none;transition:opacity .1s;}
/* HTMX: freshly swapped-in content briefly highlights so the change is seen. */
@keyframes oasis-flash-in{from{background:rgba(255,107,26,.16);}to{background:transparent;}}
.htmx-added,.htmx-settling{animation:oasis-flash-in .85s ease-out;}

/* Clear keyboard focus everywhere (accessibility + "what am I on"). */
a:focus-visible,button:focus-visible,.btn:focus-visible,.nav-item:focus-visible,
summary:focus-visible,[role="button"]:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;border-radius:6px;
}
/* Obvious row interaction on data tables. */
.table tbody tr{transition:background .12s;}
.table tbody tr:hover{background:rgba(255,107,26,.045);}
/* Everything clickable reads as clickable. */
.btn,.nav-item,[role="button"]{cursor:pointer;}
/* Flash messages slide in so a result/update is noticed. */
@keyframes oasis-msg-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.msg--success,.msg--error,.msg--info,.msg--warning{animation:oasis-msg-in .2s ease-out;}

/* Sidebar quick-switcher: a compact "Jump to…" filter above the nav groups. */
.nav-search{padding:2px 4px 9px;}
.nav-search input{
  width:100%;padding:7px 11px;font-size:12.5px;
  border:1px solid var(--border-strong);border-radius:8px;
  background:var(--card);color:var(--text);outline:none;
}
.nav-search input::placeholder{color:var(--muted);}
.nav-search input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,107,26,.12);}
/* On the narrow-screen horizontal strip, drop the filter to save room. */
@media (max-width:900px){.nav-search{display:none;}}

/* ── Dismissible flash messages (× to close; injected by base.html) ──────── */
.msg--success,.msg--error,.msg--info,.msg--warning{display:flex;align-items:center;gap:8px;}
.msg-close{margin-left:auto;background:none;border:none;cursor:pointer;font-size:18px;
  line-height:1;color:inherit;opacity:.55;padding:0 2px;border-radius:6px;flex-shrink:0;}
.msg-close:hover{opacity:1;}

/* ── Click-to-sort data tables (enhanced by base.html; opt out via data-no-sort) ── */
th.th-sort{cursor:pointer;user-select:none;white-space:nowrap;}
th.th-sort:hover{color:var(--orange);}
th.th-sort::after{content:'↕';opacity:.3;font-size:10px;margin-left:6px;}
th.th-sort-asc::after{content:'↑';opacity:1;color:var(--orange);}
th.th-sort-desc::after{content:'↓';opacity:1;color:var(--orange);}

/* ── Sort-direction caret, CSS triangle (not a unicode glyph, which renders
   inconsistently across fonts/platforms) — used by the server-rendered
   sortable column headers, e.g. the Records report's Status column. ── */
.sort-caret{display:inline-block;width:0;height:0;margin-left:5px;vertical-align:1px;
  border-left:4px solid transparent;border-right:4px solid transparent;}
.sort-caret--asc{border-bottom:5px solid currentColor;}
.sort-caret--desc{border-top:5px solid currentColor;}

/* ── Back-to-top button (appears after scrolling; wired in base.html) ────── */
#to-top{position:fixed;right:18px;bottom:18px;z-index:45;width:40px;height:40px;
  border-radius:50%;border:1px solid var(--border-strong);background:var(--surface);
  color:var(--text);font-size:17px;line-height:1;cursor:pointer;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .15s, transform .15s, border-color .15s, color .15s;}
#to-top.show{opacity:1;pointer-events:auto;transform:none;}
#to-top:hover{border-color:var(--orange);color:var(--orange);}

/* ── Show/hide password toggle (wired in base.html) ───────────────────────────
   The wrapper is injected around every input[type=password] by script, so every
   password field on the site gets this without its template knowing. Toggling
   the input to type=text keeps the same styling — the base input rule covers
   text and password identically — so the field doesn't jump when revealed.
   An eye icon rather than a "Show"/"Hide" text label — one glyph reads faster
   than a word, and it's the one convention every password field on the web
   already trained people on. */
.pw-wrap{position:relative;display:block;}
.pw-wrap > input{padding-right:46px;}
.pw-toggle{position:absolute;right:2px;top:0;bottom:0;width:44px;
  display:flex;align-items:center;justify-content:center;
  border:0;background:none;color:var(--muted);cursor:pointer;
  border-radius:0 10px 10px 0;transition:color .12s;}
.pw-toggle svg{width:20px;height:20px;}
.pw-toggle:hover{color:var(--orange);}
.pw-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:-2px;color:var(--orange);}

/* ── WO AI search bar ─────────────────────────────────────────────────────── */
.wo-search-form{margin:14px 0 6px;}
.wo-search-row{display:flex;gap:8px;align-items:center;}
.wo-search-input{flex:1;padding:11px 14px;border:1.5px solid var(--border-strong);border-radius:10px;font-size:14px;background:var(--surface);color:var(--text);min-width:0;transition:border-color .15s;}
.wo-search-input:focus{outline:none;border-color:var(--orange);}
.wo-search-hint{font-size:12px;color:var(--muted);margin-top:5px;}
.wo-search-loading{display:none;font-size:12px;color:var(--muted);margin-top:6px;}
.htmx-request .wo-search-loading{display:block;}
.wo-search-interp{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 14px;font-size:13px;margin-bottom:12px;}
.wo-search-interp strong{color:var(--text);}
.wo-search-answer{margin-top:5px;color:var(--text);font-style:italic;}

/* ── Invoices: unified accounts-payable board ───────────────────────────── */
/* Overflow "More" menu for the board header — keeps the primary 1-2 actions
   visible and tucks less-frequent / admin-only actions behind a click. */
.inv-more-menu{position:relative;display:inline-block;}
.inv-more-menu>summary{list-style:none;cursor:pointer;user-select:none;}
.inv-more-menu>summary::-webkit-details-marker{display:none;}
.inv-more-menu__panel{position:absolute;left:0;top:calc(100% + 6px);z-index:20;width:max-content;
  min-width:220px;max-width:min(280px,calc(100vw - 32px));
  background:var(--card,#fff);border:1px solid var(--border-strong);border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.14);padding:6px;display:flex;flex-direction:column;gap:2px;}
@media(min-width:640px){.inv-more-menu__panel{left:auto;right:0;}}
.inv-more-menu__panel a,.inv-more-menu__panel button{
  display:block;width:100%;text-align:left;background:none;border:none;border-radius:7px;
  padding:8px 10px;font-size:13px;color:var(--text);cursor:pointer;text-decoration:none;}
.inv-more-menu__panel a:hover,.inv-more-menu__panel button:hover{background:var(--surface,#f5f5f7);}
.inv-more-menu__sep{height:1px;background:var(--border);margin:4px 2px;}
.inv-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:14px 0;}
.inv-tiles .tile{padding:12px 10px;}
.tile__num{font-size:22px;font-weight:700;line-height:1.1;}
.tile__lbl{font-size:11.5px;color:var(--muted);margin-top:4px;font-weight:600;}
.tile.is-active{border-color:var(--orange);box-shadow:0 2px 8px rgba(255,107,26,.18);}
.inv-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;margin-bottom:18px;}
.inv-card-amt{font-size:18px;font-weight:700;}
.inv-card-meta{font-size:12.5px;color:var(--muted);margin:2px 0;word-break:break-word;}
.inv-card-foot{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.inv-verify{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;}
@media(max-width:900px){.inv-verify{grid-template-columns:1fr;}}
.inv-verify iframe{width:100%;height:78vh;border:1px solid var(--border);border-radius:10px;background:#fff;}
.inv-doc-empty{height:78vh;display:flex;align-items:center;justify-content:center;border:1px dashed var(--border-strong);border-radius:10px;color:var(--muted);}
.inv-warn{color:var(--red-d);font-weight:600;}
/* `.badge--purple` was redefined here in a DIFFERENT purple (#f3e8ff/#7c3aed)
   from the one two other rules already agree on, so the same badge rendered
   one shade with `.badge` on it and another shade without. Removed 2026-08-24;
   the definitions near .badge--blue and .badge.badge--purple are the pair that
   agree, and they are now the only two. */

/* ═══════════════════════════════════════════════════════════════════════════
   MINIMALIST UI REFRESH (2026-06-27)
   Calmer palette, flat surfaces, quiet chrome, more whitespace, fewer loud
   accents. Class names are unchanged, so the whole site picks this up with no
   template edits.

   Its :root block has been MERGED INTO THE ONE AT THE TOP OF THIS FILE
   (2026-08-24). It used to sit here and override the original palette purely
   by being later in the cascade, so the file stated two different light
   themes and only the second was true. The component rules below are the rest
   of the refresh and still belong here, after the components they restyle.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Links read as text, accent on hover — kills the underline noise everywhere. */
a{color:inherit;text-decoration:none;}
a:hover{color:var(--accent);text-decoration:none;}
.btn,.btn:hover,.nav-item,.nav-item:hover,.pill,.howto>summary{text-decoration:none;}

/* Header: drop the glass blur + gradient underline → one quiet hairline. */
header{padding:12px 22px;background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;}
header::after{display:none;}
header h1{font-size:15px;font-weight:600;letter-spacing:-.2px;}

/* Sidebar: neutral hovers, subtle active row with a thin accent rail. */
nav.sidebar{width:224px;padding:14px 12px;background:var(--surface);}
nav.sidebar .nav-item{color:var(--soft);font-size:13px;padding:7px 10px;border-radius:8px;font-weight:500;}
nav.sidebar .nav-item:hover{background:rgba(17,17,26,.05);color:var(--text);}
nav.sidebar .nav-item.active{background:rgba(17,17,26,.055);color:var(--text);font-weight:600;box-shadow:inset 2px 0 0 var(--accent);}
nav.sidebar .nav-group{margin-bottom:10px;}
nav.sidebar .nav-group-label{color:var(--muted);font-size:9.5px;letter-spacing:.7px;padding:6px 11px 4px;}
nav.sidebar .nav-group-label:hover{background:rgba(17,17,26,.04);color:var(--soft);}
.nav-search input{border-radius:8px;}
.nav-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak);}
#sb-toggle:hover{background:rgba(17,17,26,.05);color:var(--text);}

/* Buttons: flat + consistent. One accent for primary, hairline for ghost. */
.btn{font-weight:600;border-radius:8px;padding:8px 13px;box-shadow:none;}
.btn-orange,.btn--primary{background:var(--accent);color:#fff;border:1px solid var(--accent);box-shadow:none;}
.btn-orange:hover:not(:disabled),.btn--primary:hover:not(:disabled){background:var(--orange-d);box-shadow:none;}
.btn-ghost,.btn--ghost{background:var(--surface);color:var(--text);border:1px solid var(--border-strong);box-shadow:none;}
.btn-ghost:hover:not(:disabled),.btn--ghost:hover:not(:disabled){background:rgba(17,17,26,.045);}

/* Cards + tables: lighter borders, no heavy shadow, neutral hover, airy headers. */
.card{border:1px solid var(--border);border-radius:12px;box-shadow:none;}
.table{border:1px solid var(--border);border-radius:12px;box-shadow:none;}
.table th{background:transparent;color:var(--muted);font-size:10.5px;letter-spacing:.06em;border-bottom:1px solid var(--border);padding:10px 12px;}
.table td{border-bottom:1px solid var(--border);padding:10px 12px;}
.table tbody tr:hover{background:rgba(17,17,26,.025);}

/* "What is this screen?" guides: quiet neutral instead of loud blue. */
.howto{border:1px solid var(--border);border-left:3px solid var(--border-strong);background:var(--card);border-radius:10px;}
.howto>summary{color:var(--soft);font-weight:600;}
.howto>summary:hover{background:rgba(17,17,26,.025);}

/* Pills/badges: soft, neutral by default. */
.pill{border-radius:7px;font-weight:600;border:1px solid var(--border);background:var(--card);color:var(--soft);}

/* Page headers: a touch larger + more breathing room. */
.page-head{margin-bottom:16px;}
.page-head h1{font-size:20px;font-weight:600;letter-spacing:-.3px;}
.tab{padding:26px 28px;}

/* ── Bootstrap-compat shim ───────────────────────────────────────────────────
   Several templates (the vendor pages, a couple of shared cards) were authored
   with Bootstrap class names, but Bootstrap isn't loaded — so they rendered
   unstyled. Map the handful of classes they actually use onto the oasis tokens
   so those pages match the rest of the site. (Lightweight; not full Bootstrap.) */
.container,.container-fluid{width:100%;max-width:1100px;}
.container-fluid{max-width:none;}
.row{display:flex;flex-wrap:wrap;gap:16px;}
.row.g-4{gap:20px;}
.col,.flex-grow-1{flex:1 1 0;min-width:0;}
.col-auto{flex:0 0 auto;}
.col-md-6{flex:1 1 320px;}
.col-lg-4{flex:1 1 300px;}
.col-lg-8{flex:1 1 560px;}
.d-flex{display:flex;}
.d-grid{display:grid;gap:8px;}
.gap-2{gap:8px;}
.justify-content-between{justify-content:space-between;}
.align-items-center{align-items:center;}
.w-100{width:100%;}
.h-100{height:100%;}
.text-center{text-align:center;}
.text-muted{color:var(--muted)!important;}
.text-dark{color:var(--text)!important;}
.small,small{font-size:12px;}
.mt-2{margin-top:8px;}.mt-3{margin-top:12px;}.mt-4{margin-top:18px;}.mt-5{margin-top:26px;}
.mb-0{margin-bottom:0;}.mb-2{margin-bottom:8px;}.mb-3{margin-bottom:12px;}.mb-4{margin-bottom:18px;}
.pb-3{padding-bottom:12px;}.me-2{margin-right:8px;}
.border-0{border:0!important;}
.border-top{border-top:1px solid var(--border);}
.border-bottom{border-bottom:1px solid var(--border);}
.bg-white{background:var(--surface);}
.bg-light{background:var(--card);}

/* Bootstrap buttons → oasis buttons */
.btn-primary{background:var(--accent);color:#fff;border:1px solid var(--accent);}
.btn-primary:hover{background:var(--orange-d);}
.btn-outline-primary{background:var(--surface);color:var(--accent);border:1px solid var(--accent);}
.btn-outline-primary:hover{background:var(--accent-weak);}
.btn-outline-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border-strong);}
.btn-outline-secondary:hover{background:rgba(17,17,26,.045);}
.btn-outline-success{background:var(--surface);color:var(--green-d);border:1px solid rgba(52,199,89,.5);}
.btn-outline-success:hover{background:rgba(52,199,89,.08);}
.btn-lg{padding:9px 16px;font-size:13px;}
.btn-sm{padding:6px 11px;font-size:11.5px;}

/* Bootstrap cards: oasis .card already provides the shell, so drop its padding
   when it hosts card-header/body/footer (those bring their own). */
.card:has(> .card-body),.card:has(> .card-header),.card:has(> .card-footer){padding:0;overflow:hidden;}
.card-header{padding:14px 16px;border-bottom:1px solid var(--border);background:var(--card);}
.card-body{padding:16px;}
.card-footer{padding:12px 16px;border-top:1px solid var(--border);background:var(--surface);}
.card-title{font-size:15px;font-weight:600;margin-bottom:4px;letter-spacing:-.2px;}
.card-text{color:var(--soft);}
.shadow-sm{box-shadow:none;}

/* Bootstrap badges → oasis pills */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:7px;font-size:10.5px;font-weight:600;letter-spacing:.2px;border:1px solid var(--border);background:var(--card);color:var(--soft);}
.badge.bg-success{background:rgba(52,199,89,.12);color:var(--green-d);border-color:rgba(52,199,89,.30);}
.badge.bg-warning{background:rgba(255,149,0,.14);color:var(--yellow-d);border-color:rgba(255,149,0,.35);}
.badge.bg-danger{background:rgba(255,59,48,.10);color:var(--red-d);border-color:rgba(255,59,48,.30);}
.badge.bg-info{background:rgba(0,122,255,.10);color:var(--blue-d);border-color:rgba(0,122,255,.28);}
.badge.bg-secondary{background:var(--card);color:var(--muted);border-color:var(--border);}
.badge.bg-light{background:var(--card);color:var(--soft);border-color:var(--border);}
/* The plain .badge rule above ties .badge--green/--red/etc (line ~1697) at equal
   CSS specificity and comes later in the file, so it was silently winning the
   cascade and washing every color-coded badge sitewide out to gray. Doubling the
   selector here restores the intended color without touching the 74 templates
   that already use these classes. */
.badge.badge--green{background:rgba(52,199,89,.14);color:var(--green-d);border-color:rgba(52,199,89,.30);}
.badge.badge--amber,.badge.badge--yellow{background:rgba(255,149,0,.16);color:var(--yellow-d);border-color:rgba(255,149,0,.35);}
.badge.badge--red{background:rgba(255,59,48,.13);color:var(--red-d);border-color:rgba(255,59,48,.30);}
.badge.badge--blue{background:rgba(0,122,255,.12);color:var(--blue-d);border-color:rgba(0,122,255,.28);}
.badge.badge--purple{background:rgba(175,82,222,.14);color:#7a3aa0;border-color:rgba(175,82,222,.30);}
.badge.badge--gray{background:var(--card-2);color:var(--soft);border-color:var(--border);}

/* Bootstrap form controls → oasis inputs */
.form-control,.form-select{width:100%;font:inherit;padding:8px 11px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--text);}
.form-control-lg{padding:10px 13px;}
.form-control:focus,.form-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak);}
.form-label{display:block;font-size:12px;font-weight:600;color:var(--soft);margin-bottom:5px;}

/* Bootstrap alerts → quiet note cards */
.alert{padding:11px 14px;border:1px solid var(--border);border-radius:10px;background:var(--card);margin-bottom:14px;color:var(--text);}
.alert-info{border-left:3px solid var(--border-strong);}
.alert-success{border-left:3px solid var(--green);}
.alert-warning{border-left:3px solid var(--yellow);}
.alert-danger{border-left:3px solid var(--red);}

/* Bare element fallbacks for any page not using a component class. Low specificity
   so .btn/.input/.table/.form-control always win where present. */
main h1{font-size:20px;font-weight:600;letter-spacing:-.3px;}
main h2{font-size:16px;font-weight:600;letter-spacing:-.2px;}

/* ── Life360 report — Locations cards (cleaned address + property link + map) ── */
.loc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;margin-top:12px;}
.loc-card{display:flex;border:1px solid var(--border,#e3e5e8);border-radius:10px;overflow:hidden;background:var(--surface,#fff);}
.loc-card--todo{border-color:#f0c36d;background:#fffaf0;}
.loc-card__body{flex:1 1 auto;padding:12px 14px;min-width:0;}
.loc-card__addr{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;font-size:15px;}
.loc-card__meta{font-size:12px;margin-top:3px;}
.loc-card__meta code{font-size:11px;background:rgba(0,0,0,.06);padding:1px 5px;border-radius:4px;}
.loc-card__label{display:flex;gap:6px;margin-top:9px;}
.loc-card__label .input{flex:1 1 auto;min-width:0;padding:5px 8px;font-size:13px;}
.loc-card__edit{margin-top:9px;}
.loc-card__edit>summary{display:inline-flex;align-items:center;gap:4px;cursor:pointer;list-style:none;
  font-size:12px;color:var(--muted,#6b7280);user-select:none;}
.loc-card__edit>summary::-webkit-details-marker{display:none;}
.loc-card__edit>summary:hover{color:var(--orange-d,#b3541e);text-decoration:underline;}
.loc-card__edit[open]>summary{margin-bottom:2px;}
.loc-card__edit .loc-card__label{margin-top:0;}
.loc-card__ruling{margin-top:10px;}
.loc-card__map{position:relative;flex:0 0 120px;display:flex;align-items:center;justify-content:center;
  background:#eef1f4;color:#5b6470;text-decoration:none;text-align:center;font-size:12px;line-height:1.35;border-left:1px solid var(--border,#e3e5e8);}
.loc-card__map img{width:120px;height:100%;object-fit:cover;display:block;}
.loc-card__mapfallback{padding:8px;}
.loc-card__far{position:absolute;top:5px;left:5px;background:#fff3cd;color:#8a6d1a;border-radius:4px;padding:1px 5px;font-size:10px;font-weight:600;}
@media (prefers-color-scheme:dark){
  .loc-card--todo{background:#2a2416;border-color:#6d571f;}
  .loc-card__map{background:#2a2d31;color:#aab2bd;}
}
:root[data-theme="dark"] .loc-card--todo{background:#2a2416;border-color:#6d571f;}
:root[data-theme="dark"] .loc-card__map{background:#2a2d31;color:#aab2bd;}

/* ── Life360 receipts — debug: original screenshot next to what we read ──────── */
.l360-debug{display:flex;flex-direction:column;gap:14px;margin-top:12px;}
.l360-debug-row{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--border,#e3e5e8);border-radius:10px;padding:10px;}
.l360-debug-img{flex:0 0 160px;text-decoration:none;color:inherit;}
.l360-debug-img img{width:160px;border-radius:8px;border:1px solid var(--border,#e3e5e8);display:block;}
.l360-debug-img .cap{display:block;font-size:11px;color:var(--muted,#6b7280);margin-top:4px;}
.l360-debug-read{flex:1 1 auto;min-width:0;}
.l360-debug-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--muted,#6b7280);margin-bottom:6px;}
.l360-debug-line{font-size:13px;padding:2px 0;border-bottom:1px dashed var(--border,#eee);}
.l360-debug-ocr{margin-top:8px;}
.l360-debug-ocr summary{font-size:12px;color:var(--muted,#6b7280);cursor:pointer;}
.l360-debug-ocr pre{font-size:11px;white-space:pre-wrap;background:rgba(0,0,0,.04);padding:8px;border-radius:6px;max-height:200px;overflow:auto;margin-top:6px;}
@media (prefers-color-scheme:dark){ .l360-debug-ocr pre{background:rgba(255,255,255,.06);} }

/* Life360 location context map (worker among our sites + supply stores) */
.loc-card__ctxmap{display:block;text-decoration:none;border-top:1px solid var(--border,#e3e5e8);}
.loc-card__ctxmap img{width:100%;display:block;max-height:180px;object-fit:cover;}
.loc-card__ctxlegend{display:block;font-size:11px;color:var(--muted,#6b7280);padding:4px 8px;}

/* ── Phone off-canvas sidebar (≤700px) — additive (UI polish pass) ─────────
   Below ~700px the old rule only slimmed the in-flow sidebar to 170px, which
   left the content column ~166px wide (unusable). Make the sidebar an
   off-canvas drawer instead: hidden by default so content gets the full
   viewport, sliding in over the page via the header ☰ toggle base.html
   already has (html.sb-collapsed). On phones the persisted "collapsed" class
   therefore means "drawer open" — first paint is always content-first. */
@media (max-width:700px){
  nav.sidebar{
    position:fixed;left:0;top:var(--header-h,56px);bottom:0;z-index:80;
    width:min(78vw,270px);max-height:none;
    transform:translateX(-102%);transition:transform .18s ease;
    box-shadow:8px 0 30px rgba(0,0,0,.18);
    border-right:1px solid var(--border);
  }
  html.sb-collapsed nav.sidebar{display:flex;transform:none;}
}

/* ══════════════════════════════════════════════════════════════════════════
   PUBLIC LANDING / SALES PAGE (core/landing.html) — shown to anonymous
   (non-employee) visitors at "/". The father-&-son construction story, the
   services, and a permits/construction showcase. Minimal and warm on the site's
   flat light palette; the one accent is the brand orange. Every image is a
   durable STATIC asset with a graceful placeholder, so nothing ever renders as
   a broken-image icon (the old landing's images died on ephemeral upload disk).
   ══════════════════════════════════════════════════════════════════════════ */
.brand-palm{font-size:.95em;}

/* Full-bleed landing: break out of the .tab scroll-container padding, then let
   each band paint edge to edge with a centered inner wrap (.lpw). */
.lp{margin:-24px -24px -24px;background:#f7f3ec;color:var(--text);}
.lp--hasflash{margin-top:0;}
.lpb{position:relative;scroll-margin-top:80px;}
.lpb--pad{padding:66px 0;}
.lpb--cream{background:#f7f3ec;}
.lpb--cream2{background:#efe8dc;}
.lpb--dark{background:#1a1712;color:#f3ede2;}
.lpw{max-width:1120px;margin:0 auto;padding:0 32px;}
.lp-cta--center{justify-content:center;}

/* Marketing nav bar — replaces the default console header on the public
   landing page (see core/landing.html's header block). Dark, always-solid
   (not transparent-over-hero) so it reads cleanly against both the photo
   hero and, once scrolled, the cream bands below. About/Portfolio open a
   plain-CSS hover/focus dropdown onto anchors further down this same page. */
.lp-nav{position:sticky;top:0;z-index:100;background:#161310;border-bottom:1px solid rgba(255,255,255,.08);}
.lp-nav__inner{max-width:1120px;margin:0 auto;padding:0 32px;height:72px;display:flex;align-items:center;gap:28px;}
.lp-nav__brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;}
.lp-nav__logo{display:block;height:40px;width:auto;flex-shrink:0;}
.lp-nav__word{font-size:14.5px;font-weight:700;letter-spacing:.3px;color:#fff;white-space:nowrap;}
.lp-nav__links{display:flex;align-items:center;gap:6px;height:100%;background:transparent;border-bottom:none;flex-wrap:nowrap;position:static;}
.lp-nav__item{position:relative;height:100%;display:flex;align-items:center;}
.lp-nav__link{display:flex;align-items:center;gap:4px;height:100%;padding:0 14px;font-size:12.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:rgba(243,237,226,.86);text-decoration:none;transition:color .15s;white-space:nowrap;}
.lp-nav__link:hover{color:#fff;}
/* The page you're on, marked with the brand accent under the label. */
.lp-nav__link.is-current{color:#fff;box-shadow:inset 0 -2px 0 var(--orange);}
.lp-nav__caret{font-size:9px;opacity:.7;}
.lp-nav__menu{position:absolute;top:100%;left:14px;min-width:220px;background:#211d17;border:1px solid rgba(255,255,255,.1);border-radius:10px;box-shadow:var(--shadow-lg);padding:6px;display:none;z-index:60;}
.lp-nav__item:hover .lp-nav__menu, .lp-nav__item:focus-within .lp-nav__menu{display:block;}
.lp-nav__menu a{display:block;padding:10px 12px;border-radius:7px;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:rgba(243,237,226,.86);text-decoration:none;transition:background .12s,color .12s;}
.lp-nav__menu a:hover{background:rgba(255,138,77,.12);color:var(--orange-light);}
.lp-nav__cta{margin-left:6px;flex-shrink:0;}

/* Portfolio — service sub-tabs, one panel visible at a time */
.lp-portfolio-split{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.lp-portfolio-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:30px 28px;scroll-margin-top:80px;}
.lp-portfolio-card__t{font-size:20px;font-weight:700;letter-spacing:-.3px;color:var(--text);margin:0 0 10px;}
.lp-portfolio-card__b{font-size:14.5px;line-height:1.62;color:var(--soft);margin:0 0 18px;}
.lp-portfolio-card__list{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:9px;}
.lp-portfolio-card__list li{font-size:13.5px;font-weight:500;color:var(--text);padding-left:20px;position:relative;}
.lp-portfolio-card__list li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;background:var(--orange);}

.lp-ptabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;}
.lp-ptabs__tab{font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.2px;color:var(--soft);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:9px 18px;cursor:pointer;transition:background .18s,color .18s,border-color .18s;}
.lp-ptabs__tab:hover{color:var(--text);border-color:var(--orange);}
.lp-ptabs__tab.is-active{color:#fff;background:var(--orange);border-color:var(--orange);}
.lp-ptabs__panel{display:none;}
.lp-ptabs__panel.is-active{display:block;}

/* Cinematic photo hero */
.lp-hero2{min-height:min(84vh,650px);display:flex;align-items:center;overflow:hidden;background:#1a1712;}
.lp-hero2__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;}
.lp-hero2--nobg .lp-hero2__bg{display:none;}
.lp-hero2__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,13,10,.88) 0%,rgba(16,13,10,.6) 44%,rgba(16,13,10,.16) 78%,rgba(16,13,10,.34) 100%),linear-gradient(0deg,rgba(16,13,10,.6) 0%,rgba(16,13,10,0) 48%);}
.lp-hero2__inner{position:relative;z-index:2;width:100%;padding:98px 32px;color:#f3ede2;}
.lp-hero2__title{font-size:clamp(40px,6vw,70px);font-weight:700;letter-spacing:-1.4px;line-height:1.01;margin:0 0 20px;color:#fff;text-wrap:balance;}
.lp-hero2__logo{margin:0 0 24px;}
.lp-hero2__logo img{display:block;height:clamp(84px,11vw,150px);width:auto;max-width:100%;}
.lp-hero2__lede{font-size:clamp(16px,1.5vw,20px);line-height:1.62;color:rgba(243,237,226,.9);max-width:56ch;margin:0 0 30px;text-wrap:pretty;}
.lp-hero2__lede strong{color:#fff;font-weight:700;}
.lp-eyebrow--light{color:var(--orange-light);}
.btn--onphoto{background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.btn--onphoto:hover{background:rgba(255,255,255,.24);border-color:#fff;}
.lp-statsband{padding:32px 0;}

/* Shared image slot — durable static asset + branded placeholder fallback.
   The <img>'s onerror adds .lp-img--fallback to swap in the .lp-img__ph block. */
.lp-img{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--border);box-shadow:var(--shadow);background:var(--card);}
.lp-img img{width:100%;height:100%;display:block;object-fit:cover;object-position:center top;}
.lp-img__ph{display:none;}
.lp-img--fallback img{display:none;}
.lp-img--fallback .lp-img__ph{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  width:100%;height:100%;padding:22px;text-align:center;
  background:linear-gradient(160deg,#fff7f0 0%,#ffe7d0 100%);
}
.lp-img__ph .t{font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.2px;}
.lp-img__ph .s{font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--orange);}

/* Shared eyebrow + CTA (hero photo + contact band) */
.lp-eyebrow{font-size:12px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--orange);margin:0 0 14px;}
.lp-cta{display:flex;gap:12px;flex-wrap:wrap;}
.btn--lg{padding:13px 24px;font-size:14px;border-radius:11px;}

/* Stats — on the dark strip under the hero */
.lp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.lp-stat{text-align:center;}
.lp-stat__num{font-size:clamp(30px,3.8vw,42px);font-weight:700;color:var(--orange-light);letter-spacing:-.6px;}
.lp-stat__label{font-size:12.5px;color:rgba(243,237,226,.66);margin-top:5px;letter-spacing:.2px;}

/* Section heading */
.lp-kicker{font-size:12px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--orange);margin:0 0 10px;}
.lp-title{font-size:clamp(27px,3.6vw,40px);font-weight:700;letter-spacing:-.8px;color:var(--text);margin:0 0 12px;text-wrap:balance;}
/* A dark band needs a light heading. This used to be spelled only as
   `.lp-selected .lp-title`, so any OTHER dark section rendered its title in
   near-black on near-black: the home page's "Our story" band was doing exactly
   that. Keyed off the band, so a new dark section cannot reintroduce it. */
.lpb--dark .lp-title{color:#fff;}
.lp-sub{font-size:16px;line-height:1.62;color:var(--soft);max-width:64ch;margin:0 0 30px;text-wrap:pretty;}
.lp-sub--fine{font-size:14px;margin-top:-18px;color:var(--soft);opacity:.85;}
.lp-fine-link{color:inherit;text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:2px;}
.lp-fine-link:hover{color:var(--orange);}

/* Section heading with an action on the right */
.lp-sectionhead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px;}
.lp-sectionhead .lp-title{margin-bottom:0;}

/* Dark page header band — the top of every interior marketing page */
.lp-pagehead{padding:64px 0 58px;}
.lp-pagehead--photo{position:relative;overflow:hidden;padding:78px 0 72px;}
.lp-pagehead--photo .lpw{position:relative;z-index:2;}
.lp-pagehead__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.lp-pagehead__veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,13,10,.94) 0%,rgba(16,13,10,.8) 46%,rgba(16,13,10,.44) 100%);}
.lp-pagehead__title{font-size:clamp(30px,4.2vw,50px);font-weight:700;letter-spacing:-1.1px;color:#fff;margin:0 0 14px;text-wrap:balance;}
.lp-pagehead__sub{font-size:16.5px;line-height:1.62;color:rgba(243,237,226,.8);max-width:62ch;margin:0;text-wrap:pretty;}

/* ── Plain section header ──────────────────────────────────────────────────
   Kicker + title, used as-is on the home page's Finished Work and Our story
   bands. `--split` lays a trailing action (a button) on the same line. */
.lp-sectionhead2{margin:0 0 30px;}
.lp-sectionhead2 .lp-title{margin-bottom:0;}
.lp-sectionhead2--split{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.lpb--dark .lp-sectionhead2 .lp-title{color:#fff;}
.lpb--dark .lp-sectionhead2 .lp-kicker{color:var(--orange-light);}

/* Services section header — a plain kicker + title that fills with a flat
   light-grey panel on hover, no photo. Purely a hover cue; the actual reveal
   (the dropdown of work photos) lives on the rows below. */
.lp-servhead{margin:0 0 30px;padding:22px 26px;border-radius:16px;
  transition:background-color .3s ease;}
.lp-servhead:hover{background-color:var(--card);}
.lp-servhead .lp-title{margin-bottom:0;}

/* Services — one row per service rather than a grid of cards. The names read
   straight down the left; hovering (or tabbing to) a row turns its background
   light grey and drops down thumbnails of that service's own work below it.
   The row links to the portfolio filtered to it. */
.lp-svclist{display:flex;flex-direction:column;border-top:1px solid var(--border);}
.lp-svcrow2{position:relative;display:block;text-decoration:none;
  border-bottom:1px solid var(--border);border-radius:10px;
  transition:background-color .26s ease;}
.lp-svcrow2:hover,.lp-svcrow2:focus-within{background-color:var(--card);}
.lp-svcrow2__main{position:relative;display:grid;align-items:center;gap:0 22px;
  grid-template-columns:26px minmax(210px,.9fr) 1.4fr 150px;
  padding:22px 20px;transition:padding-left .3s ease;}
.lp-svcrow2:hover .lp-svcrow2__main,.lp-svcrow2:focus-within .lp-svcrow2__main{padding-left:30px;}
.lp-svcrow2__n{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--muted);}
.lp-svcrow2__t{font-size:clamp(19px,2.1vw,25px);font-weight:700;letter-spacing:-.5px;color:var(--text);}
.lp-svcrow2__b{font-size:14px;line-height:1.6;color:var(--soft);}
.lp-svcrow2__more{font-size:11.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--orange);
  opacity:0;transform:translateX(-8px);transition:opacity .3s ease,transform .3s ease;white-space:nowrap;}
.lp-svcrow2:hover .lp-svcrow2__more,.lp-svcrow2:focus-within .lp-svcrow2__more{opacity:1;transform:none;}
/* Work-photo dropdown: collapsed to nothing at rest, expands open on hover or
   focus. max-height (not height) is what's animatable without knowing the
   panel's real height up front. */
.lp-svcrow2__drop{display:flex;gap:10px;padding:0 20px;max-height:0;opacity:0;
  overflow:hidden;transition:max-height .34s ease,opacity .26s ease,padding-bottom .34s ease;}
.lp-svcrow2:hover .lp-svcrow2__drop,.lp-svcrow2:focus-within .lp-svcrow2__drop{
  max-height:130px;opacity:1;padding-bottom:20px;}
.lp-svcrow2__drop img{width:130px;height:98px;object-fit:cover;border-radius:10px;border:1px solid var(--border);}

/* Recent work — one finished house per slide, with the address (linked to the
   portfolio) and everything the crew did there. Before the script runs the
   track is a plain horizontal scroller, so the photos are reachable with JS
   off; `.is-live` hands it over to the buttons. */
.lp-carousel{position:relative;}
.lp-carousel__viewport{overflow:hidden;border-radius:20px;}
.lp-carousel__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);}
.lp-carousel.is-live .lp-carousel__track{overflow:visible;}
.lp-slide{position:relative;margin:0;flex:0 0 100%;aspect-ratio:16/9;overflow:hidden;background:#000;scroll-snap-align:start;}
.lp-slide img{width:100%;height:100%;object-fit:cover;}
.lp-slide__cap{position:absolute;left:0;right:0;bottom:0;padding:30px 32px 26px;color:#fff;
  background:linear-gradient(0deg,rgba(8,6,4,.92) 0%,rgba(8,6,4,.66) 52%,transparent 100%);}
.lp-slide__addr{display:inline-block;font-size:clamp(20px,2.4vw,28px);font-weight:700;letter-spacing:-.6px;
  color:#fff;text-decoration:none;border-bottom:2px solid transparent;transition:border-color .2s ease;}
.lp-slide__addr:hover{border-color:var(--orange-light);}
.lp-slide__city{display:block;font-size:13.5px;color:rgba(243,237,226,.86);margin-top:3px;}
.lp-slide__rooms{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.lp-slide__room{font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:5px 12px;}
.lp-carousel__nav{position:absolute;top:calc(50% - 22px);width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(20,17,13,.62);border:1px solid rgba(255,255,255,.3);color:#fff;
  transition:background .18s,border-color .18s;}
.lp-carousel__nav:hover{background:var(--orange);border-color:var(--orange);}
.lp-carousel__nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.lp-carousel__nav--prev{left:16px;}
.lp-carousel__nav--next{right:16px;}
.lp-carousel__dots{display:flex;justify-content:center;gap:9px;margin-top:18px;}
.lp-carousel__dot{width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  background:var(--border-strong);border:none;transition:background .2s,transform .2s;}
.lp-carousel__dot:hover{background:var(--soft);}
.lp-carousel__dot.is-current{background:var(--orange);transform:scale(1.3);}

/* Home page's About band — "Our story" beside the founders' photo. The
   paragraph is sized to match the photo's visual weight: an equal-width
   column and a larger type size than the site's usual body copy, so neither
   side reads as an afterthought next to the other. */
.lp-story{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.lp-story__figure{margin:0;}
.lp-story__photo{aspect-ratio:4/5;width:100%;max-width:400px;box-shadow:var(--shadow-lg);}
.lp-story__cap{font-size:12.5px;color:var(--muted);margin-top:11px;max-width:400px;text-align:center;}
.lp-story__lede{font-size:20px;line-height:1.62;color:var(--soft);margin:0 0 26px;max-width:46ch;text-wrap:pretty;}
.lpb--dark .lp-story__lede{color:rgba(243,237,226,.86);}
.lpb--dark .lp-story__cap{color:rgba(243,237,226,.56);}
.lpb--dark .lp-story__photo{border-color:rgba(255,255,255,.14);}

/* Services page — one anchored row per service, copy beside its photos */
.lp-svcrow{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:center;
  padding:40px 0;border-top:1px solid var(--border);scroll-margin-top:88px;}
.lp-svcrow:first-child{border-top:none;padding-top:6px;}
.lp-svcrow:nth-child(even) .lp-svcrow__text{order:2;}
.lp-svcrow__t{font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-.5px;color:var(--text);margin:0 0 18px;line-height:1.32;text-wrap:pretty;}
.lp-svcrow__links{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.lp-svcrow__media{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.lp-svcrow__media img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;border:1px solid var(--border);}
.lp-svcrow__media img:first-child{grid-column:1 / -1;aspect-ratio:16/9;}

/* Permits & construction */
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:30px;}
.lp-step{border-top:2px solid var(--orange);padding:16px 0 0;}
.lp-step__n{font-size:13px;font-weight:700;color:var(--orange);letter-spacing:1px;}
.lp-step__t{font-size:16px;font-weight:700;color:var(--text);margin:6px 0 8px;letter-spacing:-.2px;}
.lp-step__b{font-size:14px;line-height:1.6;color:var(--soft);margin:0;}
/* Flagship build — "from empty lot to finished home" progression */
.lp-portfolio{margin:6px 0 42px;}
.lp-portfolio__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px;}
.lp-portfolio__t{font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.2px;margin:0;}
.lp-portfolio__addr{font-size:13px;color:var(--soft);margin:4px 0 0;}
.lp-portfolio__links{display:flex;gap:16px;flex-wrap:wrap;}
.lp-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.lp-progress__item{margin:0;}
.lp-progress__item .lp-img{aspect-ratio:4/3;}
.lp-progress__cap{font-size:13px;font-weight:600;color:var(--text);margin-top:9px;text-align:center;}

/* 82 Lexington — before / after core visual */
.lp-showcase{margin:2px 0 6px;}
.lp-ba{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;}
.lp-ba__side{margin:0;}
.lp-ba__img{aspect-ratio:4/3;}
.lp-ba__tag{position:absolute;top:12px;left:12px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#fff;padding:5px 12px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.2);}
.lp-ba__tag--before{background:rgba(24,24,27,.78);}
.lp-ba__tag--after{background:var(--orange);}
.lp-ba__cap{font-size:13.5px;font-weight:600;color:var(--text);margin-top:11px;text-align:center;}
.lp-showcase__foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;}
.lp-showcase__addr{font-size:13px;font-weight:600;color:var(--soft);margin:0;}
.lp-showcase__more{font-size:11.5px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);margin:30px 0 13px;text-align:center;}
.lp-progress--duo{grid-template-columns:repeat(2,1fr);max-width:680px;margin:0 auto;}
.lp-during{margin:26px 0 0;}
.lp-during__img{aspect-ratio:16/9;}
.lp-during__cap{font-size:13px;font-weight:600;color:var(--text);margin-top:11px;text-align:center;}

/* ── Selected work — dark band: interactive before/after + best-work gallery ──
   Same type system as the rest of the landing (system font, orange kicker,
   .lp-title weights); headings go light because the band is dark. */
.lp-selected .lp-kicker{color:var(--orange-light);}
.lp-selected .lp-title{color:#fff;}
.lp-selected .lp-sub{color:rgba(243,237,226,.82);}

/* Drag-to-compare before/after tiles (2-up) */
.lp-compares{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:0 0 8px;}
.lp-compare-block{margin:0;}
.lp-compare-label{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;}
.lp-compare-label .n{font-size:12px;font-weight:700;letter-spacing:.6px;color:var(--orange-light);}
.lp-compare-label .t{font-size:16px;font-weight:700;color:#fff;letter-spacing:-.2px;}
.lp-compare-label .h{font-size:11px;color:rgba(243,237,226,.5);margin-left:auto;text-transform:uppercase;letter-spacing:.5px;}
.lp-compare{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:18px;border:1px solid rgba(255,255,255,.12);cursor:ew-resize;user-select:none;background:#000;box-shadow:var(--shadow-lg);}
.lp-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;}
.lp-compare .lp-compare__after{clip-path:inset(0 0 0 50%);}
.lp-compare__handle{position:absolute;top:0;bottom:0;left:50%;width:0;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;pointer-events:none;}
.lp-compare__handle .ln{position:absolute;top:0;bottom:0;width:2px;background:#fff;left:50%;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.2);}
.lp-compare__handle .gr{position:relative;width:44px;height:44px;border-radius:50%;background:var(--orange);border:3px solid #fff;box-shadow:0 3px 12px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;line-height:1;}
.lp-compare__tag{position:absolute;top:12px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#fff;padding:5px 12px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.25);}
.lp-compare__tag--before{left:12px;background:rgba(24,24,27,.8);}
.lp-compare__tag--after{right:12px;background:var(--orange);}

/* Property grid — one card per job, hover reveals corner brackets + a zoom */
.lp-jobs{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:2px 0 8px;}
.lp-job{position:relative;display:block;overflow:hidden;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:#000;text-decoration:none;box-shadow:var(--shadow-lg);}
.lp-job__photo{position:relative;aspect-ratio:4/3;overflow:hidden;}
.lp-job__photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1);}
.lp-job:hover .lp-job__photo img{transform:scale(1.06);}
.lp-job__bracket{position:absolute;inset:12px;pointer-events:none;opacity:0;transition:opacity .3s ease;}
.lp-job:hover .lp-job__bracket{opacity:1;}
.lp-job__bracket span{position:absolute;width:20px;height:20px;border:2px solid var(--orange);}
.lp-job__bracket .tl{top:0;left:0;border-right:none;border-bottom:none;}
.lp-job__bracket .tr{top:0;right:0;border-left:none;border-bottom:none;}
.lp-job__bracket .bl{bottom:0;left:0;border-right:none;border-top:none;}
.lp-job__bracket .br{bottom:0;right:0;border-left:none;border-top:none;}
.lp-job__meta{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;background:rgba(24,22,18,.72);}
.lp-job__addr{font-size:15px;font-weight:700;color:#fff;letter-spacing:-.2px;}
.lp-job__tag{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:rgba(243,237,226,.62);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:4px 9px;white-space:nowrap;}
.lp-job__tag--done{color:var(--orange-light);border-color:rgba(255,138,77,.4);}

/* Portfolio filter tabs — pill row; active pill is solid orange */
.lp-filter{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 22px;}
.lp-filter__tab{display:inline-block;text-decoration:none;font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.2px;color:rgba(243,237,226,.72);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 16px;cursor:pointer;transition:background .18s,color .18s,border-color .18s;}
.lp-filter__tab:hover{color:#fff;background:rgba(255,255,255,.12);}
.lp-filter__tab.is-active{color:#fff;background:var(--orange);border-color:var(--orange);}

/* Best-work gallery — uniform tiles so it reflows cleanly under the filter */
.lp-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px;}
.lp-gallery figure{position:relative;margin:0;overflow:hidden;border-radius:16px;background:#000;border:1px solid rgba(255,255,255,.1);aspect-ratio:4/3;}
.lp-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.lp-gallery figure:hover img{transform:scale(1.06);}
.lp-gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.72),transparent);}

.lp-portfolio__note{font-size:13.5px;color:rgba(243,237,226,.62);margin:30px 0 0;text-align:center;font-style:italic;}

@media (max-width:900px){.lp-jobs{grid-template-columns:1fr 1fr;}.lp-contactgrid{grid-template-columns:1fr;}.lp-svcrow{grid-template-columns:1fr;gap:24px;}.lp-svcrow:nth-child(even) .lp-svcrow__text{order:0;}.lp-story{grid-template-columns:1fr;gap:26px;}.lp-detail{grid-template-columns:1fr;}.lp-detail__side{position:static;}.lp-cartgrid{grid-template-columns:1fr;}.lp-checkout{position:static;}.lp-addgrid{grid-template-columns:1fr;}.lp-work{grid-template-columns:1fr;}}
@media (max-width:820px){
  .lp-compares{grid-template-columns:1fr;}
  .lp-gallery{grid-template-columns:1fr 1fr;}
}

/* Permit / external links — quiet orange text link */
.lp-permit-link{font-size:13px;font-weight:600;color:var(--orange);white-space:nowrap;}
.lp-permit-link:hover{color:var(--orange-d);text-decoration:underline;}
.lp-permit-link--muted{color:var(--soft);}
.lp-permit-link--muted:hover{color:var(--text);}

/* "Houses we're building right now" — one row per permitted job */
.lp-permits__title{font-size:19px;font-weight:700;color:var(--text);letter-spacing:-.2px;margin:8px 0 6px;}
.lp-permits__sub{font-size:14.5px;line-height:1.6;color:var(--soft);margin:0 0 18px;}
.lp-permits{display:flex;flex-direction:column;gap:10px;}
.lp-permit-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 18px;}
.lp-permit-row__main{min-width:165px;}
.lp-permit-row__addr{display:block;font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.2px;}
.lp-permit-row__city{display:block;font-size:12.5px;color:var(--muted);margin-top:1px;}
.lp-permit-row__what{font-size:13.5px;color:var(--soft);flex:1;min-width:120px;}
.lp-permit-row__links{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto;}
.perm-badge{font-size:11.5px;font-weight:700;letter-spacing:.2px;color:var(--green-d);background:rgba(52,199,89,.12);border:1px solid rgba(52,199,89,.28);border-radius:999px;padding:4px 11px;white-space:nowrap;}
.lp-permits__note{font-size:12px;color:var(--muted);margin-top:14px;font-style:italic;}

/* About / founders */
.lp-about{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start;}
.lp-about__figure{margin:0;position:sticky;top:24px;}
.lp-about__photo{aspect-ratio:4/5;width:100%;max-width:380px;box-shadow:var(--shadow-lg);}

/* Our team — full-width whole-crew photo band */
.lp-team__figure{margin:0;}
.lp-team__photo{aspect-ratio:21/9;width:100%;box-shadow:var(--shadow-lg);}

/* Contact page — the free estimate tool beside its lead form */
.lp-contactgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:start;}
.lp-estimator,.lp-leadform{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:30px 28px;}
.lp-estimator__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.lp-estimator__head .lp-kicker{margin:0;}
.lp-wip{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--soft);
  background:var(--card);border:1px dashed var(--border-strong);border-radius:999px;padding:4px 10px;}
.lp-estimator__t{font-size:22px;font-weight:700;letter-spacing:-.4px;color:var(--text);margin:12px 0 8px;}
.lp-estimator__b{font-size:14.5px;line-height:1.6;color:var(--soft);margin:0 0 20px;}

.lp-rates{display:flex;flex-direction:column;gap:9px;margin-bottom:22px;}
.lp-rate{display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer;
  background:var(--card);border:1px solid var(--border);border-radius:12px;transition:border-color .16s,background .16s;}
.lp-rate:hover{border-color:var(--orange);}
.lp-rate:has(input:checked){border-color:var(--orange);background:rgba(255,107,26,.06);}
.lp-rate input{accent-color:var(--orange);width:17px;height:17px;flex-shrink:0;margin:0;}
.lp-rate__body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.lp-rate__t{font-size:14.5px;font-weight:600;color:var(--text);}
.lp-rate__d{font-size:12.5px;color:var(--muted);}
.lp-rate__price{font-size:17px;font-weight:700;color:var(--text);white-space:nowrap;}
.lp-rate__price .u{font-size:11.5px;font-weight:600;color:var(--muted);margin-left:2px;}

.lp-calc{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;
  padding:18px;background:var(--card);border:1px solid var(--border);border-radius:12px;}
.lp-calc__area{display:flex;flex-direction:column;gap:7px;flex:1;min-width:150px;}
.lp-calc__area[hidden]{display:none;}
.lp-calc__field{font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);}
.lp-calc__input{font:inherit;font-size:16px;padding:10px 12px;width:100%;
  background:var(--surface);color:var(--text);border:1px solid var(--border-strong);border-radius:9px;}
.lp-calc__input:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:var(--orange);}
.lp-calc__out{margin-left:auto;text-align:right;}
.lp-calc__label{display:block;font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);}
.lp-calc__total{display:block;font-size:32px;font-weight:700;letter-spacing:-1px;color:var(--orange);line-height:1.15;}
.lp-calc__total:empty,.lp-calc__total.is-blank{color:var(--muted);}
.lp-calc__note{font-size:12.5px;line-height:1.55;color:var(--muted);margin:14px 0 0;}

.lp-form{display:flex;flex-direction:column;gap:14px;margin-top:20px;}
.lp-form__row{display:flex;flex-direction:column;gap:6px;}
.lp-form__row label{font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);}
.lp-form input,.lp-form select,.lp-form textarea{font:inherit;font-size:15px;padding:10px 12px;width:100%;
  background:var(--card);color:var(--text);border:1px solid var(--border-strong);border-radius:9px;}
.lp-form input:focus,.lp-form select:focus,.lp-form textarea:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:var(--orange);}
.lp-form textarea{resize:vertical;min-height:88px;}
.lp-form__err{font-size:12.5px;color:var(--red,#d7263d);margin:0;}
.lp-form__alt{font-size:13.5px;color:var(--muted);margin:18px 0 0;}
.lp-form__alt a{color:var(--orange);font-weight:600;}

.lp-form__hint{font-size:12.5px;color:var(--muted);margin:2px 0 0;}
.lp-form input[type="file"]{padding:9px 10px;font-size:13.5px;}

/* ── The shared "We Value…" block that closes every marketing page ───────────
   A centered, single-column list of bold headers, each a fixed-height row so
   hovering it is stable regardless of how tall its subtext turns out to be.
   At rest, just the header. Hovering (or tabbing to) a row slides the header
   left and fades in a light-grey subtext box beside it. The box is absolutely
   positioned and `pointer-events:none`, so it never becomes its own hover
   target and can never grow the row's hit area out from under the cursor —
   that instability is what a content-driven width/height transition here
   would otherwise cause, flickering the reveal on and off. */
.lp-value__head{text-align:center;}
.lp-value__list{list-style:none;margin:30px auto 0;padding:0;max-width:900px;
  display:flex;flex-direction:column;align-items:center;}
.lp-value__item{position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;min-height:96px;padding:12px 0;border-top:1px solid var(--border);cursor:default;}
.lp-value__item:last-child{border-bottom:1px solid var(--border);}
.lp-value__t{font-size:19px;font-weight:700;color:var(--text);letter-spacing:-.2px;
  white-space:nowrap;transition:transform .34s ease;}
.lp-value__item:hover .lp-value__t,.lp-value__item:focus-within .lp-value__t{transform:translateX(-190px);}
.lp-value__b{position:absolute;left:50%;top:50%;width:380px;
  transform:translate(50px,-50%);opacity:0;pointer-events:none;
  background:var(--card);color:var(--soft);font-size:14px;line-height:1.5;text-align:left;
  border-radius:10px;padding:14px 18px;box-shadow:var(--shadow);
  transition:opacity .3s ease,transform .34s ease;}
.lp-value__item:hover .lp-value__b,.lp-value__item:focus-within .lp-value__b{
  opacity:1;transform:translate(100px,-50%);}
.lp-areas{font-size:13.5px;color:var(--muted);margin:34px 0 0;text-align:center;}

/* Per-service page: what you get, beside what the work covers */
.lp-detail{display:grid;grid-template-columns:1.35fr .65fr;gap:44px;align-items:start;}
.lp-promise{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.lp-promise li{position:relative;padding-left:30px;font-size:16px;line-height:1.55;color:var(--text);}
.lp-promise li::before{content:"";position:absolute;left:0;top:7px;width:15px;height:9px;
  border-left:2.5px solid var(--orange);border-bottom:2.5px solid var(--orange);transform:rotate(-45deg);}
.lp-detail__side{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;position:sticky;top:88px;}
.lp-detail__sidet{font-size:12px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--orange);margin:0 0 14px;}
.lp-detail__areas{font-size:12.5px;line-height:1.55;color:var(--muted);margin:18px 0 0;padding-top:16px;border-top:1px solid var(--border);}
.lp-svcrow__link{color:inherit;text-decoration:none;}
.lp-svcrow__link:hover{color:var(--orange);}

.lp-work{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;}
.lp-work figure{margin:0;}
.lp-work .lp-gallery-tile{position:relative;overflow:hidden;border-radius:18px;background:#000;border:1px solid rgba(255,255,255,.12);aspect-ratio:4/3;box-shadow:var(--shadow-lg);}
.lp-work .lp-gallery-tile img{width:100%;height:100%;object-fit:cover;}
.lp-work .lp-gallery-tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.72),transparent);}

/* The same-week promise, sitting just above the hero's buttons */
.lp-guarantee{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--orange-light);background:rgba(255,107,26,.14);border:1px solid rgba(255,138,77,.42);
  border-radius:999px;padding:7px 15px;margin:0 0 4px;}

/* Cart */
.lp-nav__cta--quiet{margin-left:0;}
.lp-cartgrid{display:grid;grid-template-columns:1.25fr .75fr;gap:38px;align-items:start;}
.lp-cartmain,.lp-checkout{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:28px;}
.lp-checkout{position:sticky;top:88px;}
.lp-cartlines{display:flex;flex-direction:column;gap:8px;margin:18px 0 0;}
.lp-cartline{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--card);border:1px solid var(--border);border-radius:12px;}
.lp-cartline__main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.lp-cartline__t{font-size:14.5px;font-weight:600;color:var(--text);}
.lp-cartline__d{font-size:12.5px;color:var(--muted);}
.lp-cartline__amt{font-size:16px;font-weight:700;color:var(--text);white-space:nowrap;}
.lp-cartline__x{font-family:inherit;font-size:19px;line-height:1;color:var(--muted);background:none;border:none;cursor:pointer;padding:2px 4px;}
.lp-cartline__x:hover{color:var(--red,#d7263d);}
.lp-carttotals{margin-top:20px;padding-top:18px;border-top:1px solid var(--border);}
.lp-carttotal{display:flex;justify-content:space-between;gap:16px;font-size:14.5px;color:var(--soft);margin-bottom:8px;}
.lp-carttotal--big{font-size:20px;font-weight:700;color:var(--text);}
.lp-carttotal--big span:last-child{color:var(--orange);}
.lp-cartempty{padding:34px 20px;text-align:center;border:1px dashed var(--border-strong);border-radius:14px;margin-top:16px;}
.lp-addgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;}
.lp-add{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;}
.lp-add__head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.lp-add__t{font-size:14px;font-weight:700;color:var(--text);}
.lp-add__p{font-size:14px;font-weight:700;color:var(--orange);white-space:nowrap;}
.lp-add__d{font-size:12.5px;line-height:1.5;color:var(--muted);margin:6px 0 12px;}
.lp-add__foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.lp-add__qtylabel{font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--muted);flex:1 1 100%;}
.lp-add__qty{font:inherit;font-size:14px;width:92px;padding:7px 9px;background:var(--surface);color:var(--text);border:1px solid var(--border-strong);border-radius:8px;}
.lp-thanks{max-width:640px;}
.lp-thanks__ref{font-size:13.5px;color:rgba(243,237,226,.66);margin:16px 0 0;}

/* Portfolio's closing step into the cart */
.lp-nextstep{margin-top:40px;padding:34px 24px;text-align:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:18px;}
.lp-nextstep__t{font-size:22px;font-weight:700;letter-spacing:-.4px;color:#fff;margin:0 0 8px;}
.lp-nextstep__b{font-size:15px;line-height:1.6;color:rgba(243,237,226,.78);margin:0 auto 22px;max-width:52ch;}

/* Portfolio — nothing photographed for this service yet */
.lp-empty{text-align:center;padding:52px 24px;border:1px dashed rgba(255,255,255,.18);border-radius:16px;margin:8px 0 0;}
.lp-empty__t{font-size:17px;font-weight:700;color:#fff;margin:0 0 8px;}
.lp-empty__b{font-size:14.5px;line-height:1.6;color:rgba(243,237,226,.7);margin:0 auto;max-width:52ch;}

/* Footer nav */
.lp-footer2__links{background:transparent;border-bottom:none;position:static;display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin:0 0 18px;}
.lp-footer2__links a{font-size:13px;font-weight:600;color:rgba(243,237,226,.78);text-decoration:none;}
.lp-footer2__links a:hover{color:var(--orange-light);}

/* Contact — dark closing band */
.lp-contact2{padding:76px 0;}
.lp-contact2__inner{max-width:720px;margin:0 auto;text-align:center;}
.lp-contact2__title{font-size:clamp(28px,3.8vw,44px);font-weight:700;letter-spacing:-.9px;color:#fff;margin:4px 0 14px;text-wrap:balance;}
.lp-contact2__sub{font-size:16px;line-height:1.62;color:rgba(243,237,226,.82);margin:0 auto 28px;max-width:54ch;}
.lp-contact2__email{font-size:14px;color:rgba(243,237,226,.66);margin:22px 0 0;}
.lp-contact2__email a{color:var(--orange-light);font-weight:600;text-decoration:none;}
.lp-contact2__email a:hover{text-decoration:underline;}
.lp-footer2{border-top:1px solid rgba(255,255,255,.09);padding:30px 0 34px;text-align:center;}
.lp-footer2__logo{height:74px;width:auto;opacity:.9;margin-bottom:16px;}
.lp-footer2 p{margin:0;font-size:12.5px;color:rgba(243,237,226,.6);}

/* Bios — a quiet accent rail per person, no boxes, lots of air. */
.bio{border-left:3px solid var(--border);padding:1px 0 1px 18px;margin:0 0 24px;}
.bio--founder{border-left-color:var(--orange);}
.bio--coo{border-left-color:var(--blue);}
.bio:last-child{margin-bottom:0;}
.bio__head{margin-bottom:8px;}
.bio__name{font-size:20px;font-weight:700;letter-spacing:-.3px;color:var(--text);margin:0;}
.bio__title{font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--orange);margin:3px 0 0;}
.bio--coo .bio__title{color:var(--blue);}
.bio__body{font-size:14.5px;line-height:1.66;color:var(--soft);margin:0;max-width:64ch;}
.bio__body strong{color:var(--text);font-weight:600;}

/* Responsive */
@media (max-width:820px){
  .lp-hero2__inner{padding:74px 24px;}
  .lp-about{grid-template-columns:1fr;gap:26px;}
  .lp-about__figure{position:static;max-width:320px;margin:0 auto;}
  .lp-about__photo{max-width:320px;margin:0 auto;}
  .lp-steps,.lp-ba,.lp-portfolio-split{grid-template-columns:1fr;}
  .lp-team__photo{aspect-ratio:4/3;}
  .lp-stats{gap:8px;}
  .lp-permit-row__links{margin-left:0;width:100%;}
  .lpw{padding:0 22px;}
  .lp-nav__links{display:none;}
  .lp-nav__inner{padding:0 20px;}
}

@media (prefers-color-scheme:dark){
  .lp-img--fallback .lp-img__ph{background:linear-gradient(160deg,#2a2116,#3a2a17);}
}
:root[data-theme="dark"] .lp-img--fallback .lp-img__ph{background:linear-gradient(160deg,#2a2116,#3a2a17);}

/* ═══════════════════════════════════════════════════════════════════════════
   OLED DARK MODE (2026-08-02)
   Appended last so it overrides every token above. Two triggers, same values:
   (1) the system is set to dark and the user hasn't picked a side manually —
   `:root:not([data-theme="light"])` inside the media query; (2) the manual
   toggle (base.html's theme button) sets data-theme="dark"/"light" directly,
   which always wins over the system setting. True black (#000) for the page
   and header/input surfaces, not a dark gray, so OLED panels actually turn
   pixels off; .card/.card-2 get a hair of lift so they still read as raised
   surfaces against it. Status colors (green/red/yellow/blue/orange "-d" text
   shades) are swapped for brighter variants — the light-mode shades are tuned
   for dark text on a pale tint and go muddy/illegible on a near-black tint. */
:root[data-theme="dark"]{
  --bg:#000000;
  --surface:#0d0d0f;
  --card:#1c1c1e;
  --card-2:#232326;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.16);
  --text:#f5f5f7;
  --muted:#98989d;
  --soft:#c7c7cc;
  --accent-weak:rgba(255,107,26,.16);
  --glass:rgba(10,10,12,.72);
  --glass-strong:rgba(10,10,12,.85);
  --shadow-sm:0 1px 2px rgba(0,0,0,.6);
  --shadow:0 1px 3px rgba(0,0,0,.5), 0 10px 24px -8px rgba(0,0,0,.6);
  --shadow-lg:0 20px 50px -16px rgba(0,0,0,.7);
  --hero-grad:linear-gradient(180deg,#0d0d0f 0%, #000000 100%);
  --green-d:#30d158;
  --red-d:#ff453a;
  --yellow-d:#ffd60a;
  --blue-d:#409cff;
  --orange-d:#ff9142;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#000000;
    --surface:#0d0d0f;
    --card:#1c1c1e;
    --card-2:#232326;
    --border:rgba(255,255,255,.08);
    --border-strong:rgba(255,255,255,.16);
    --text:#f5f5f7;
    --muted:#98989d;
    --soft:#c7c7cc;
    --accent-weak:rgba(255,107,26,.16);
    --glass:rgba(10,10,12,.72);
    --glass-strong:rgba(10,10,12,.85);
    --shadow-sm:0 1px 2px rgba(0,0,0,.6);
    --shadow:0 1px 3px rgba(0,0,0,.5), 0 10px 24px -8px rgba(0,0,0,.6);
    --shadow-lg:0 20px 50px -16px rgba(0,0,0,.7);
    --hero-grad:linear-gradient(180deg,#0d0d0f 0%, #000000 100%);
    --green-d:#30d158;
    --red-d:#ff453a;
    --yellow-d:#ffd60a;
    --blue-d:#409cff;
    --orange-d:#ff9142;
  }
}

/* Tinted badge/pill/chip backgrounds are hardcoded rgba(color, low-alpha) —
   not tokens — so they don't pick up the swap above automatically. Light-mode
   alphas (.06-.16) go nearly invisible against true black; bump them so the
   chips still read as distinct color-coded surfaces. */
:root[data-theme="dark"] .badge--green,
:root[data-theme="dark"] .badge.badge--green{background:rgba(48,209,88,.16);border-color:rgba(48,209,88,.4);}
:root[data-theme="dark"] .badge--amber,
:root[data-theme="dark"] .badge--yellow,
:root[data-theme="dark"] .badge.badge--amber,
:root[data-theme="dark"] .badge.badge--yellow{background:rgba(255,214,10,.16);border-color:rgba(255,214,10,.4);}
:root[data-theme="dark"] .badge--red,
:root[data-theme="dark"] .badge.badge--red{background:rgba(255,69,58,.16);border-color:rgba(255,69,58,.4);}
:root[data-theme="dark"] .badge--blue,
:root[data-theme="dark"] .badge.badge--blue{background:rgba(64,156,255,.16);border-color:rgba(64,156,255,.4);}
:root[data-theme="dark"] .badge--purple,
:root[data-theme="dark"] .badge.badge--purple{background:rgba(191,110,255,.18);color:#bf6eff;border-color:rgba(191,110,255,.4);}
:root[data-theme="dark"] .pill.green{background:rgba(48,209,88,.16);border-color:rgba(48,209,88,.4);}
:root[data-theme="dark"] .pill.red{background:rgba(255,69,58,.16);border-color:rgba(255,69,58,.4);}
:root[data-theme="dark"] .pill.orange{background:rgba(255,145,66,.16);border-color:rgba(255,145,66,.4);}
:root[data-theme="dark"] .pill.purple{background:rgba(191,110,255,.16);border-color:rgba(191,110,255,.4);}
:root[data-theme="dark"] .chat-power-read{background:rgba(48,209,88,.16);border-color:rgba(48,209,88,.4);}
:root[data-theme="dark"] .chat-power-suggest{background:rgba(255,145,66,.16);border-color:rgba(255,145,66,.4);}
:root[data-theme="dark"] .chat-power-edit{background:rgba(255,69,58,.16);border-color:rgba(255,69,58,.4);}
:root[data-theme="dark"] .howto-box.good{background:rgba(48,209,88,.12);border-color:rgba(48,209,88,.35);}
:root[data-theme="dark"] .howto-box.bad{background:rgba(255,69,58,.10);border-color:rgba(255,69,58,.3);}
:root[data-theme="dark"] .howto{background:linear-gradient(135deg,rgba(10,132,255,.10),transparent);border-color:rgba(10,132,255,.35);}

/* .wb-btn (workorders card-footer buttons) is hardcoded light-mode hex, not
   tokens — background:#fff rendered as a white pill on the true-black OLED
   page. Give the neutral variants the same var(--card)/var(--border-strong)
   treatment as .btn--ghost; the colored fills (wb-act-bill, wb-act-blue, etc.)
   already use solid colors that read fine on black and are left alone.

   Same bug, same fix, one card up: .wb-card itself is background:#fff, so the
   whole card body behind the now-fixed .wb-btn buttons was still a white
   panel on the true-black page.

   Both triggers, same as the OLED block above: the explicit toggle
   (`:root[data-theme="dark"]`) AND system dark with no manual override
   (`@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) }`).
   These rules originally only covered the explicit toggle, so Accounts
   Receivable's WO cards stayed hardcoded white for anyone following the
   system theme without ever clicking the in-app toggle, even though the
   --card/--border-strong tokens themselves were already correctly dark in
   that case. */
:root[data-theme="dark"] .wb-btn{background:var(--card);color:var(--text);border-color:var(--border-strong);}
:root[data-theme="dark"] .wb-btn:hover{background:var(--card-2);border-color:var(--border-strong);}
:root[data-theme="dark"] .wb-btn.wb-act-back{background:var(--card);color:var(--soft);border-color:var(--border-strong);}
:root[data-theme="dark"] .wb-btn.wb-act-back:hover{background:var(--card-2);color:var(--text);border-color:var(--border-strong);}
:root[data-theme="dark"] .wb-btn-danger{background:var(--card);color:var(--red-d);border-color:rgba(255,69,58,.4);}
:root[data-theme="dark"] .wb-btn-danger:hover{background:rgba(255,69,58,.12);border-color:rgba(255,69,58,.5);color:var(--red-d);}
:root[data-theme="dark"] .wb-card{background:var(--card);border-color:var(--border-strong);}
:root[data-theme="dark"] .wb-card:hover{border-color:var(--border-strong);}
:root[data-theme="dark"] .wb-card-top{border-color:var(--border);}
:root[data-theme="dark"] .wb-card-foot{background:var(--card-2);border-color:var(--border);}
:root[data-theme="dark"] .wb-card-top.wbsm-clickable:hover{background:var(--card-2);}
/* .wb-input/.wb-textarea (the card's Address/Completed-By/Scope-of-work
   fields) are the same hardcoded background:#fff bug, one layer further in —
   without this they stayed bright white input boxes even after the card
   shell itself went dark. */
:root[data-theme="dark"] .wb-input,
:root[data-theme="dark"] .wb-textarea{background:var(--card);color:var(--text);border-color:var(--border-strong);}
:root[data-theme="dark"] .wb-input:focus,
:root[data-theme="dark"] .wb-textarea:focus{background:var(--card-2);border-color:var(--orange);}
:root[data-theme="dark"] .wb-input.wb-dirty,
:root[data-theme="dark"] .wb-textarea.wb-dirty{background:rgba(255,149,0,.12);border-color:var(--orange);}
/* .wb-complete-yes/.wb-complete-no (the card's crew-submitted-vs-office-
   approved completion flag) are also hardcoded light hex, same bug again. */
:root[data-theme="dark"] .wb-complete-yes{background:rgba(48,209,88,.16);color:var(--green-d);border-color:rgba(48,209,88,.4);}
:root[data-theme="dark"] .wb-complete-no{background:rgba(255,214,10,.16);color:var(--yellow-d);border-color:rgba(255,214,10,.4);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .wb-btn{background:var(--card);color:var(--text);border-color:var(--border-strong);}
  :root:not([data-theme="light"]) .wb-btn:hover{background:var(--card-2);border-color:var(--border-strong);}
  :root:not([data-theme="light"]) .wb-btn.wb-act-back{background:var(--card);color:var(--soft);border-color:var(--border-strong);}
  :root:not([data-theme="light"]) .wb-btn.wb-act-back:hover{background:var(--card-2);color:var(--text);border-color:var(--border-strong);}
  :root:not([data-theme="light"]) .wb-btn-danger{background:var(--card);color:var(--red-d);border-color:rgba(255,69,58,.4);}
  :root:not([data-theme="light"]) .wb-btn-danger:hover{background:rgba(255,69,58,.12);border-color:rgba(255,69,58,.5);color:var(--red-d);}
  :root:not([data-theme="light"]) .wb-card{background:var(--card);border-color:var(--border-strong);}
  :root:not([data-theme="light"]) .wb-card:hover{border-color:var(--border-strong);}
  :root:not([data-theme="light"]) .wb-card-top{border-color:var(--border);}
  :root:not([data-theme="light"]) .wb-card-foot{background:var(--card-2);border-color:var(--border);}
  :root:not([data-theme="light"]) .wb-card-top.wbsm-clickable:hover{background:var(--card-2);}
  :root:not([data-theme="light"]) .wb-input,
  :root:not([data-theme="light"]) .wb-textarea{background:var(--card);color:var(--text);border-color:var(--border-strong);}
  :root:not([data-theme="light"]) .wb-input:focus,
  :root:not([data-theme="light"]) .wb-textarea:focus{background:var(--card-2);border-color:var(--orange);}
  :root:not([data-theme="light"]) .wb-input.wb-dirty,
  :root:not([data-theme="light"]) .wb-textarea.wb-dirty{background:rgba(255,149,0,.12);border-color:var(--orange);}
  :root:not([data-theme="light"]) .wb-complete-yes{background:rgba(48,209,88,.16);color:var(--green-d);border-color:rgba(48,209,88,.4);}
  :root:not([data-theme="light"]) .wb-complete-no{background:rgba(255,214,10,.16);color:var(--yellow-d);border-color:rgba(255,214,10,.4);}
}

/* Light/dark asset swap (e.g. the brand logo, which is dark ink and needs a
   light-colored twin on an OLED background). Same two triggers as the token
   swap above: explicit data-theme, or system preference with no override. */
.light-only{display:inline;}
.dark-only{display:none;}
:root[data-theme="dark"] .light-only{display:none;}
:root[data-theme="dark"] .dark-only{display:inline;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .light-only{display:none;}
  :root:not([data-theme="light"]) .dark-only{display:inline;}
}

/* Theme toggle button (base.html header) */
.theme-toggle{background:var(--surface);color:var(--text);border:1px solid var(--border-strong);border-radius:8px;
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;padding:0;}
.theme-toggle:hover{background:var(--card);}
.theme-toggle .icon-dark{display:none;}
:root[data-theme="dark"] .theme-toggle .icon-light{display:none;}
:root[data-theme="dark"] .theme-toggle .icon-dark{display:inline;}


/* ── Language switcher (EN | ES) ──────────────────────────────────────────
   Shared by every page shell: console header, landing nav, sign-in header and
   both mobile shells (templates/_language_switcher.html). Built off the theme
   tokens so it reads correctly in light and dark; the active side uses the
   brand orange, which carries on both backgrounds. */
.lang-switch{
  display:inline-flex; align-items:stretch; overflow:hidden;
  border:1px solid var(--border-strong); border-radius:8px;
  background:var(--card); box-shadow:var(--shadow-sm);
}
.lang-switch__opt{
  appearance:none; border:0; background:transparent; cursor:pointer;
  font:inherit; font-size:12px; font-weight:700; letter-spacing:.03em;
  line-height:1; padding:0 11px; min-height:32px; color:var(--muted);
  transition:background .12s ease, color .12s ease;
}
.lang-switch__opt + .lang-switch__opt{ border-left:1px solid var(--border); }
.lang-switch__opt:hover{ background:var(--card-2); color:var(--text); }
.lang-switch__opt.is-active{ background:var(--orange); color:#fff; }
.lang-switch__opt:focus-visible{ outline:2px solid var(--orange); outline-offset:-2px; }
/* On the landing page the nav sits on a dark bar of its own, so the control
   has to read against that rather than against the page surface. */
.lp-nav .lang-switch{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28); }
.lp-nav .lang-switch__opt{ color:#e8e8ea; }
.lp-nav .lang-switch__opt:hover{ background:rgba(255,255,255,.16); color:#fff; }
.lp-nav .lang-switch__opt.is-active{ background:var(--orange); color:#fff; }

/* ── Privileged and Confidential notice ────────────────────────────────────
   Rendered at the bottom of every internal console page (see base.html and the
   two standalone shells). Deliberately quiet: it is a marking, not content, so
   it reads as a footnote under a hairline rule. Both colors are theme
   variables, so it stays legible in light and in OLED dark. */
.confidential-note{
  margin:40px 0 0; padding-top:12px;
  border-top:1px solid var(--border);
  font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
}
/* Fullscreen shells clip their overflow, so the notice pins to the bottom
   instead of sitting below the fold. It never intercepts clicks. */
.confidential-note--fixed{
  position:fixed; right:10px; bottom:8px; left:auto; margin:0;
  padding:4px 10px; border:1px solid var(--border); border-radius:6px;
  background:var(--bg); pointer-events:none;
}
/* Modal iframes are small; the notice gives back most of its breathing room. */
.confidential-note--compact{
  margin-top:20px; padding-top:8px; font-size:10px; letter-spacing:.06em;
}

/* A submit button that reads as an inline text link.
   Sign-out is POST-only (a GET logout is forgeable by any page that can make
   the browser fetch a URL), so the sign-out affordances that sit inside a
   sentence have to be form buttons rather than anchors. This makes one look
   like the link it replaced instead of leaving a default button mid-paragraph. */
.linkish{
  border:none; background:none; padding:0; margin:0;
  font:inherit; color:inherit; text-decoration:underline;
  cursor:pointer;
}
.linkish:hover{color:var(--accent);}

/* Private-message widget (templates/pm/_widget.html): the floating
   bottom-right launcher + panel included on every signed-in page. Moved here
   from an inline <style> block so it ships via the cacheable stylesheet
   instead of being re-sent, byte-identical, on every page load. */
.pmw-launch{position:fixed;right:22px;bottom:22px;z-index:1200;display:flex;
  align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  background:var(--orange);color:#fff;border:none;cursor:pointer;font-size:13px;font-weight:800;
  box-shadow:var(--shadow-lg);transition:transform .12s, background .15s;}
.pmw-launch:hover{background:var(--orange-d);transform:translateY(-2px);}
.pmw-badge{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;
  border-radius:10px;background:var(--red);color:#fff;font-size:11.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--bg);}
.pmw{position:fixed;right:22px;bottom:88px;z-index:1200;width:360px;max-width:calc(100vw - 44px);
  height:520px;max-height:calc(100vh - 130px);display:none;flex-direction:column;
  background:var(--card);border:1px solid var(--border-strong);border-radius:16px;
  box-shadow:var(--shadow-lg);overflow:hidden;}
.pmw.open{display:flex;}
.pmw-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--border);}
.pmw-head strong{font-size:15px;color:var(--text);}
.pmw-x{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;line-height:1;padding:2px 6px;border-radius:8px;}
.pmw-x:hover{background:var(--card-2);color:var(--text);}
.pmw-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-height:0;}

/* Contact / thread list */
.pmw-list{list-style:none;margin:0;padding:6px;}
.pmw-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:11px 12px;border:none;background:none;border-radius:12px;cursor:pointer;}
.pmw-row:hover{background:var(--card-2);}
.pmw-av{flex:none;width:38px;height:38px;border-radius:50%;background:var(--orange-light);
  color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;text-transform:uppercase;}
.pmw-av-wrap{position:relative;flex:none;}
.pmw-dot{position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;
  background:var(--muted);border:2px solid var(--card);}
.pmw-dot.online{background:var(--green);}
.pmw-meta{flex:1;min-width:0;}
.pmw-name{font-weight:700;color:var(--text);font-size:14px;display:flex;align-items:center;gap:6px;}
.pmw-status{color:var(--muted);font-size:11.5px;margin-top:1px;display:block;}
.pmw-prev{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.pmw-unread{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--red);
  color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.pmw-empty{color:var(--muted);font-size:13px;text-align:center;padding:34px 20px;}

/* One conversation */
.pmw-thread-head{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border);}
.pmw-back{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;padding:2px 6px;border-radius:8px;}
.pmw-back:hover{background:var(--card-2);color:var(--text);}
.pmw-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;min-height:0;}
.pmw-bub{max-width:78%;padding:9px 13px;border-radius:15px;font-size:13.5px;line-height:1.4;word-wrap:break-word;white-space:pre-wrap;}
.pmw-bub.me{align-self:flex-end;background:var(--orange);color:#fff;border-bottom-right-radius:5px;}
.pmw-bub.them{align-self:flex-start;background:var(--card-2);color:var(--text);border-bottom-left-radius:5px;}
.pmw-time{font-size:10.5px;opacity:.7;margin-top:3px;display:block;}
.pmw-attach{margin-bottom:6px;}
.pmw-attach-img{max-width:100%;max-height:160px;border-radius:10px;display:block;}
.pmw-attach-file{color:inherit;text-decoration:underline;font-size:13px;}
.pmw-compose{display:flex;align-items:flex-end;gap:8px;padding:10px;border-top:1px solid var(--border);}
.pmw-compose textarea{flex:1;resize:none;border:1px solid var(--border-strong);border-radius:12px;
  padding:9px 12px;font:inherit;font-size:13.5px;max-height:96px;background:var(--bg);color:var(--text);}
.pmw-attach-btn{flex:none;display:flex;align-items:center;justify-content:center;height:36px;padding:0 12px;
  border-radius:12px;cursor:pointer;font-size:12px;font-weight:700;white-space:nowrap;color:var(--muted);}
.pmw-attach-btn:hover{background:var(--card-2);color:var(--text);}
.pmw-attach-btn input{display:none;}
.pmw-attach-btn.has-file{color:var(--orange);}
.pmw-send{flex:none;background:var(--orange);color:#fff;border:none;border-radius:12px;padding:0 16px;height:36px;font-weight:800;cursor:pointer;}
.pmw-send:hover{background:var(--orange-d);}

/* ── Service SEO pages (templates/marketing/service_detail.html) ────────────
   Every service page is built to rank, so these carry the long-form parts a
   generic service page did not have: breadcrumbs, the intro body, the
   scannable what-we-take lists, the FAQ accordion, the towns, and the
   cross-links to the other services. Desktop-first, like the rest of the
   marketing site. */
/* The bare `nav{}` rule near the top of this file styles the internal console's
   tab bar, and it lands on ANY <nav> that does not opt out, which painted a
   light bar with a border straight across this dark photo hero. Reset both
   explicitly rather than relying on order. */
.lp-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px;
  background:none;border:0;border-bottom:0;padding:0;
  font-size:13px;letter-spacing:.2px;color:rgba(243,237,226,.72);}
.lp-crumbs a{color:rgba(243,237,226,.72);text-decoration:none;border-bottom:1px solid transparent;}
.lp-crumbs a:hover{color:#fff;border-bottom-color:var(--orange-light);}
.lp-crumbs span[aria-current]{color:#fff;font-weight:600;}

.lp-seo-intro{font-size:17.5px;line-height:1.72;color:var(--text);margin:0 0 18px;max-width:68ch;text-wrap:pretty;}

.lp-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:34px;}
.lp-list__t{font-size:23px;font-weight:700;letter-spacing:-.4px;margin:0 0 10px;color:var(--text);}
.lp-list__note{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0 0 14px;max-width:44ch;}
.lp-list__items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.lp-list__items li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.55;color:var(--text);}
.lp-list__items li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
  border-radius:2px;background:var(--orange);}

/* Centered rather than left-aligned: an accordion capped at a readable measure
   against a full-width section otherwise leaves the right half of a desktop
   screen visibly empty. One column, not two, because opening an item in a
   two-column accordion reflows the other column under the reader's cursor. */
.lp-faq{display:flex;flex-direction:column;gap:10px;margin-top:26px;
  max-width:82ch;margin-inline:auto;}
.lp-faq__item{border:1px solid var(--border);border-radius:12px;background:var(--bg);
  padding:2px 20px;transition:border-color .16s ease;}
.lp-faq__item[open]{border-color:var(--border-strong);}
.lp-faq__item:hover{border-color:var(--border-strong);}
.lp-faq__q{cursor:pointer;list-style:none;padding:16px 0;font-size:16.5px;font-weight:650;
  letter-spacing:-.2px;color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:16px;}
.lp-faq__q::-webkit-details-marker{display:none;}
.lp-faq__q::after{content:"";flex:0 0 auto;width:11px;height:11px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .18s ease;margin-bottom:4px;}
.lp-faq__item[open] .lp-faq__q::after{transform:rotate(225deg);margin-bottom:0;}
.lp-faq__a{margin:0;padding:0 0 18px;font-size:15.5px;line-height:1.7;color:var(--muted);max-width:66ch;}

.lp-towns{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px;
  margin-top:26px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--border);}
.lp-town{background:var(--bg);padding:18px 20px;display:flex;flex-direction:column;gap:5px;}
.lp-town__n{font-size:16px;font-weight:700;letter-spacing:-.2px;color:var(--text);}
.lp-town__b{font-size:13.5px;line-height:1.5;color:var(--muted);}

.lp-siblings{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:26px;}
.lp-sibling{display:flex;flex-direction:column;gap:8px;padding:0 0 18px;text-decoration:none;
  border:1px solid rgba(243,237,226,.16);border-radius:14px;overflow:hidden;
  background:rgba(243,237,226,.04);transition:border-color .16s ease,transform .16s ease;}
.lp-sibling:hover{border-color:var(--orange-light);transform:translateY(-2px);}
.lp-sibling img{width:100%;height:150px;object-fit:cover;display:block;margin-bottom:6px;}
.lp-sibling__t{padding:0 18px;font-size:18px;font-weight:700;letter-spacing:-.3px;color:#fff;}
.lp-sibling__b{padding:0 18px;font-size:14px;line-height:1.55;color:rgba(243,237,226,.76);}