/* =========================================================================
   MULTI-FAMILY GENIUS — "cyanotype blueprint drafting room"
   Two themes: dark "blueprint night" (default) + light "Translucent Minimalist".
   ========================================================================= */

/* ---- DEFAULT: light drafting sheet (#e9eaf2) ---- */
:root{
  --paper:#e9eaf2;          /* light lavender-gray drafting sheet */
  --paper-2:#f6f7fb;        /* raised panel / card */
  --paper-3:#dee0ee;        /* highlight / hover */
  --ink:#141c2e;            /* dark slate ink */
  --ink-soft:#3b465d;       /* muted, still high-contrast on light */
  --line:#c7cbdb;
  --line-strong:#a3a8c1;
  --line-half:rgba(163,168,193,.45);   /* half-strength ring - see .mini */
  --grid:rgba(27,35,52,.05);
  --orange:#d9531a;         /* architect's redline (deep enough for text on light) */
  --orange-half:rgba(217,83,26,.45);   /* half-strength ring - see .btn-act */
  --orange-ink:#ffffff;
  --mint:#0a8a54;           /* money */
  --cyan:#1668a8;           /* info */
  --red:#c62448;
  /* one height and one width for every control row - see .ctl-row */
  --ctl-h:38px; --ctl-btn:200px; --ctl-field:240px; --ctl-pill:150px;
  --yellow:#946600;
  --green:#0a8a54;
  --shadow:0 10px 30px rgba(27,35,52,.12);
  --f-head:"Big Shoulders Display",Impact,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --f-body:"IBM Plex Sans",system-ui,sans-serif;
  --f-hand:"Caveat",cursive;
  --hh:150px;               /* measured header height (JS updates) */
}
/* ---- NIGHT: blueprint night (prussian blue) — the toggle's dark mode ---- */
body[data-theme="light"]{
  --paper:#0a1a2f;
  --paper-2:#0d2039;
  --paper-3:#12335a;
  --ink:#e8f0fb;
  --ink-soft:#9fb6d4;
  --line:#274a72;
  --line-strong:#3a6291;
  --line-half:rgba(58,98,145,.45);
  --grid:rgba(120,170,230,.10);
  --orange:#ff6b2c;
  --orange-half:rgba(255,107,44,.45);
  --orange-ink:#0a1a2f;
  --mint:#4ee6a8;
  --cyan:#46c8ff;
  --red:#ff5470;
  --yellow:#ffd166;
  --green:#4ee6a8;
  --shadow:0 10px 34px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
[hidden]{display:none!important}   /* the hidden attribute must always win over component display rules */
html,body{margin:0;padding:0}
body{
  font-family:var(--f-body);
  font-size:15px;
  line-height:1.45;
  color:var(--ink);
  background:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* centered drawing sheet with real side margins (modeled on HQ .app max-width) */
#titleblock,#welcome,#hero,#heroSlim,#sheets,#subtabs,#panel-root,#footerblock{
  width:min(1320px, calc(100% - 64px));
  margin-left:auto!important;margin-right:auto!important;
}
@media (max-width:760px){
  #titleblock,#welcome,#hero,#heroSlim,#sheets,#subtabs,#panel-root,#footerblock{ width:calc(100% - 28px); }
}
a{color:var(--cyan);text-decoration:none}
button{font-family:var(--f-mono);cursor:pointer;color:inherit;background:none;border:none}
h1,h2,h3,h4{margin:0;font-family:var(--f-head);letter-spacing:.5px;line-height:.95}
label{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:1px}

/* ---------- drafting frame ---------- */
.frame{position:fixed;inset:10px;border:2px solid var(--line-strong);pointer-events:none;z-index:5}
.frame .ticks{position:absolute;background-repeat:repeat}
.ticks-top,.ticks-bottom{left:0;right:0;height:10px}
.ticks-left,.ticks-right{top:0;bottom:0;width:10px}
.ticks-top{top:-1px;background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 40px)}
.ticks-bottom{bottom:-1px;background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 40px)}
.ticks-left{left:-1px;background-image:repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 40px)}
.ticks-right{right:-1px;background-image:repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 40px)}
.corner{position:absolute;width:14px;height:14px;border:2px solid var(--orange)}
.corner.tl{top:-2px;left:-2px;border-right:0;border-bottom:0}
.corner.tr{top:-2px;right:-2px;border-left:0;border-bottom:0}
.corner.bl{bottom:-2px;left:-2px;border-right:0;border-top:0}
.corner.br{bottom:-2px;right:-2px;border-left:0;border-top:0}

/* ---------- title block header ---------- */
#titleblock{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;gap:16px;
  align-items:stretch;padding:12px 22px;margin:14px 0 0;border:1.5px solid var(--line-strong);border-radius:4px;
  background:linear-gradient(180deg,var(--paper-2),var(--paper));backdrop-filter:blur(6px)}
.tb-left{display:flex;gap:14px;align-items:center;min-width:0}
.tb-logo{font-size:34px;color:var(--orange);cursor:pointer;line-height:1}
/* one wordmark: both words identical weight and size, on one line, in the brand orange */
.tb-name h1{font-size:clamp(18px,2.4vw,30px);font-weight:900;color:var(--orange);white-space:nowrap}
.tb-name h1 span{color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit}
.tb-name h1 span::before{content:" "}
.tb-sub{font-family:var(--f-mono);font-size:10px;letter-spacing:2px;color:var(--ink-soft);margin-top:4px}
.tb-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.tb-meta{display:flex;gap:8px}
.tb-cell{border:1px solid var(--line);padding:4px 10px;text-align:center;background:var(--paper)}
.tb-cell label{display:block;font-size:8px;color:var(--ink-soft)}
.tb-cell b{font-family:var(--f-mono);font-size:14px}
.status-pill b{color:var(--ink-soft)}                 /* PREVIEW — you're only looking */
.status-pill.live b{color:var(--mint);font-weight:800} /* LIVE — User Mode, it's your board */
.tb-tools{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.hbtn{border:1px solid var(--line-strong);padding:6px 11px;font-size:10.5px;letter-spacing:1px;
  background:var(--paper);transition:.15s;white-space:nowrap;border-radius:2px}
.hbtn:hover{background:var(--orange);color:var(--orange-ink);border-color:var(--orange)}
.needs-you{border-color:var(--red);color:var(--red);font-weight:600}
.needs-you:hover{background:var(--red);color:#fff;border-color:var(--red)}
body[data-mask="off"] #maskBtn{background:var(--red);color:#fff;border-color:var(--red)}
body[data-mask="off"]{outline:3px solid var(--red);outline-offset:-3px}

/* ---------- welcome strip ---------- */
#welcome{margin:14px 0 0;border:1.5px dashed var(--orange);border-radius:4px;background:var(--paper-2)}
#welcome .wrap{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 20px}
.w-copy{max-width:640px;font-size:14px;line-height:1.5}
.w-copy b{display:block;font-family:var(--f-head);font-size:20px;color:var(--orange);margin-bottom:2px}
.w-btns{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- stamp buttons ---------- */
.stamp{border:2px solid var(--orange);color:var(--orange);background:transparent;padding:10px 18px;
  font-weight:600;letter-spacing:1.5px;font-size:12.5px;transform:rotate(-.6deg);transition:.15s;
  text-transform:uppercase;border-radius:3px}
.stamp:hover{background:var(--orange);color:var(--orange-ink);transform:rotate(0) scale(1.02)}
.stamp.ghost{border-color:var(--line-strong);color:var(--ink)}
.stamp.ghost:hover{background:var(--ink);color:var(--paper)}
.stamp.sm{padding:6px 11px;font-size:10.5px;letter-spacing:1px}

/* ---------- hero ---------- */
#hero{position:relative;margin:14px 0 0;border:1.5px solid var(--line-strong);border-radius:4px;overflow:hidden;min-height:300px;
  display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;background:
   radial-gradient(circle at 20% 20%,rgba(92,216,255,.10),transparent 40%),
   repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 2px,transparent 2px 22px),
   linear-gradient(135deg,#0a2f4f,#0d3b5f 60%,#0a2f4f);
  animation:drift 40s linear infinite}
@keyframes drift{to{background-position:0 0,600px 0,0 0}}
@media (prefers-reduced-motion:reduce){.hero-bg{animation:none}}
.hero-inner{position:relative;padding:34px 40px;max-width:100%;color:#eafff8}
.dwg-tag{font-family:var(--f-mono);font-size:11px;letter-spacing:3px;color:#ff8a57;
  border:1px solid #ff8a57;display:inline-block;padding:2px 8px;margin-bottom:14px}
.hero-h{font-weight:800;line-height:1.12;margin-bottom:16px}
.hero-h .line{display:block;white-space:nowrap;font-size:clamp(15px,3.05vw,34px)}
.hero-h .line+.line{color:#ffd9c6}
.hero-p{font-size:15px;line-height:1.55;max-width:660px;color:#cfe0f0}
.hero-p b{color:#8ff0c4}
.hero-btns{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
/* hero sits on the dark cyanotype in BOTH themes → buttons always stay light */
#hero .stamp{border-color:#ff8a57;color:#ff8a57}
#hero .stamp:hover{background:#ff8a57;color:#0a1a2f}
#hero .stamp.ghost{border-color:rgba(255,255,255,.6);color:#f2f7ff;font-weight:700}
#hero .stamp.ghost:hover{background:#f2f7ff;color:#0a1a2f}
.hero-collapse{color:#eafff8;border-color:rgba(255,255,255,.4)}
.hero-collapse{position:absolute;top:10px;right:12px;font-size:10px;letter-spacing:1px;color:#eafff8;
  border:1px solid var(--line);padding:4px 8px;background:rgba(0,0,0,.2)}
#heroSlim{margin:14px 0 0;border:1.5px solid var(--line-strong);border-radius:4px;padding:10px 18px;display:flex;gap:16px;
  align-items:center;background:var(--paper-2)}
#heroSlim .slim-copy{font-family:var(--f-hand);font-size:22px;color:var(--ink);flex:1}

/* ---------- sheet tabs ---------- */
#sheets{display:flex;gap:8px;margin:16px 0 0;flex-wrap:wrap}
.sheet-tab{flex:1;min-width:150px;border:1.5px solid var(--line-strong);background:var(--paper-2);
  padding:11px 15px;text-align:left;transition:.15s;border-radius:2px}
.sheet-tab .code{font-family:var(--f-mono);font-size:10px;letter-spacing:2px;color:var(--ink-soft);display:block}
.sheet-tab .name{font-family:var(--f-head);font-weight:800;font-size:22px;display:block;margin-top:2px;line-height:1;text-transform:uppercase}
.sheet-tab:hover{border-color:var(--orange)}
.sheet-tab:hover .name{color:var(--orange)}
.sheet-tab.active{background:var(--orange);border-color:var(--orange)}
.sheet-tab.active .code{color:var(--orange-ink);opacity:.85}
.sheet-tab.active .name{color:var(--orange-ink)}

/* ---------- sticky sub-tabs ---------- */
#subtabs{position:sticky;top:calc(var(--hh) + 4px);z-index:15;display:flex;gap:6px;flex-wrap:wrap;
  margin:10px 0 0;padding:8px;border:1px solid var(--line-strong);border-radius:4px;background:var(--paper-2);
  box-shadow:var(--shadow)}
.subtab{border:1px solid var(--line);padding:6px 11px;font-size:12px;letter-spacing:1px;background:var(--paper);
  display:flex;gap:7px;align-items:center;transition:.12s;border-radius:2px}
.subtab .n{font-family:var(--f-mono);color:var(--orange);font-weight:600}
.subtab:hover{border-color:var(--orange)}
.subtab.active{background:var(--ink);color:var(--paper)}
.subtab.active .n{color:var(--orange)}

/* ---------- panels ---------- */
#panel-root{margin:14px 0 0;min-height:50vh}
.panel{border:1.5px solid var(--line-strong);background:var(--paper-2);padding:24px;animation:fade .3s;border-radius:4px}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
.dwg-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;
  border-bottom:2px solid var(--line-strong);padding-bottom:12px;margin-bottom:18px;flex-wrap:wrap}
/* the drawing code is a quiet reference mark — the plain-English panel name leads */
.dwg-head .l .code{font-family:var(--f-mono);font-size:10px;letter-spacing:2.5px;color:var(--ink-soft);opacity:.65}
.dwg-head .l h3{font-size:clamp(22px,3vw,34px);font-weight:800;margin-top:4px}
.dwg-head .l p{font-size:15px;color:var(--ink-soft);max-width:660px;margin-top:6px;line-height:1.55}
.dwg-head .r{font-family:var(--f-hand);font-size:21px;color:var(--orange);text-align:right;max-width:220px}

/* ---------- footer title block (HQ style) ---------- */
/* bottom-margin leaves room for the fixed ASK button, which otherwise sits on the title block */
#footerblock{display:flex;flex-wrap:wrap;margin-top:26px;margin-bottom:96px;
  border:1.5px solid var(--line-strong);border-radius:4px;background:var(--paper-2);overflow:hidden}
.fb-cell{padding:11px 20px;border-right:1px solid var(--line);min-width:110px}
.fb-cell:last-child{border-right:0}
.fb-cell.grow{flex:1 1 220px}
.fb-cell label{display:block;font-family:var(--f-mono);font-size:9px;letter-spacing:2px;color:var(--ink-soft)}
.fb-cell b{display:block;font-family:var(--f-mono);font-size:14px;color:var(--ink);margin-top:5px;font-weight:600}
.fb-cell.drawn b{font-family:var(--f-hand);font-size:23px;color:var(--cyan);font-weight:700;letter-spacing:.5px;margin-top:2px}
.coming{text-align:center;padding:70px 20px}
.coming .big{font-family:var(--f-head);font-size:clamp(30px,6vw,64px);color:var(--orange)}
.coming p{color:var(--ink-soft);font-size:16px;margin-top:10px}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field label{font-size:10px;color:var(--ink-soft)}
.field input,.field select{font-family:var(--f-mono);font-size:14px;padding:9px 12px;background:var(--paper);
  color:var(--ink);border:1px solid var(--line-strong);border-radius:3px}
.field input:focus,.field select:focus{outline:2px solid var(--orange);border-color:var(--orange)}
.form-row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
/* ================= UNIFORM CONTROL ROWS =================
   ⚠️ Luis, 2026-09-01: "Make fields and buttons uniform size. Note that currently, even the Filter
   By State fields are different sizes on different pages."
   He was right, and the cause was `.form-row .field{flex:1}` - the field GREW into whatever space
   was left, so its width depended on the button beside it. "+ ADD BROKER" and "+ ADD PROPERTY
   MANAGER" are very different widths, so the same filter box came out a different size on every
   contact board. Sizes here are FIXED, not flexible, and shared by every control row in the app:
   the five contact boards, the lender search, and the Property List tabs.
   ⚠️ If you add a control to one of these rows, give it a class listed below - do not invent a
   one-off width, or the rows drift apart again. */
.ctl-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.ctl-row .field{flex:0 0 var(--ctl-field);min-width:0;margin-bottom:0}
.ctl-row .field input,.ctl-row .field select{height:var(--ctl-h);box-sizing:border-box}
.ctl-row>button,.ctl-row>a.mini,.ctl-row>.stamp{flex:0 0 var(--ctl-btn);height:var(--ctl-h);
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;padding:0 10px}
/* .stamp carries a rotate(-.6deg) flourish. It is charming on a hero button and wrong in a row of
   aligned controls - it makes one button sit visibly askew of its neighbours. Same treatment
   .ms-form already gives it. */
.ctl-row>.stamp{transform:none}
.ctl-row>.pill{flex:0 0 var(--ctl-pill);height:var(--ctl-h);box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center}
.ctl-row>.oz-toggle{height:var(--ctl-h);box-sizing:border-box;display:inline-flex;align-items:center;flex:0 0 auto}
/* Property List's BROKER / UPLOADED / HOLD tabs - boxed in the same screenshot. */
.ctl-tabs{display:flex;flex-wrap:wrap;gap:10px}
.ctl-tabs .subtab{flex:0 0 var(--ctl-btn);height:var(--ctl-h);box-sizing:border-box;justify-content:center}
@media (max-width:760px){
  /* One column on a phone: fixed widths would overflow, so let them fill the row instead. */
  .ctl-row .field,.ctl-row>button,.ctl-row>a.mini,.ctl-row>.stamp,.ctl-row>.pill,
  .ctl-tabs .subtab{flex:1 1 100%}
}

.form-row .field{flex:1;min-width:180px}
/* ⚠️ MUST STAY BELOW the rule above. `.form-row .field{flex:1}` is what made the filter box a
   different width on every page, and it has the same specificity as `.ctl-row .field`, so source
   order is the only thing that decides. Moving this line up silently brings the bug back. */
.form-row.ctl-row .field{flex:0 0 var(--ctl-field);min-width:0;margin-bottom:0}
/* Market Search: 1/3-width entry fields + inline aligned scan button */
.ms-form .field{flex:1 1 170px;min-width:150px;margin-bottom:0}
.ms-form .stamp{flex:0 0 auto;transform:none;padding:9px 20px}
/* frozen results header + scrollable listings */
.ms-scroll{max-height:60vh;overflow:auto}
.ms-scroll table.data th{position:sticky;top:0;z-index:2}
.hint{font-size:12px;color:var(--ink-soft);font-family:var(--f-mono);line-height:1.5}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line)}
table.data{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
table.data th{font-family:var(--f-mono);font-size:10px;letter-spacing:1px;text-align:left;
  padding:10px;border-bottom:2px solid var(--line-strong);color:var(--ink-soft);position:sticky;top:0;background:var(--paper-2)}
table.data td{padding:10px;border-bottom:1px solid var(--line);font-family:var(--f-mono)}
table.data tr:hover td{background:var(--paper-3)}
.val-green{color:var(--green);font-weight:600}
.val-yellow{color:var(--yellow);font-weight:600}
.val-red{color:var(--red);font-weight:600}
.linklike{color:var(--cyan);cursor:pointer;text-decoration:underline dotted}
.rank-badge{display:inline-block;min-width:34px;text-align:center;border:1px solid var(--orange);
  color:var(--orange);font-family:var(--f-mono);font-weight:600;padding:2px 6px}
.scorebar{height:6px;background:var(--line);position:relative;min-width:60px}
.scorebar i{position:absolute;left:0;top:0;bottom:0;background:var(--mint)}

/* ---------- money ---------- */
.money{color:var(--mint);font-family:var(--f-mono)}
.mono{font-family:var(--f-mono)}

/* ---------- kanban ---------- */
.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px}
.col{min-width:260px;flex:0 0 260px;border:1px solid var(--line-strong);background:var(--paper);display:flex;flex-direction:column}
.col-head{padding:10px;border-bottom:2px solid var(--orange);position:sticky;top:0;background:var(--paper)}
.col-head .t{font-family:var(--f-mono);font-size:11px;letter-spacing:1px;font-weight:600}
.col-head .m{display:flex;justify-content:space-between;margin-top:4px;font-family:var(--f-mono);font-size:11px;color:var(--ink-soft)}
.col-head .m .profit{color:var(--mint)}
.col-body{padding:8px;display:flex;flex-direction:column;gap:8px;min-height:60px}
.card{border:1px solid var(--line-strong);background:var(--paper-2);overflow:hidden;transition:.2s;border-radius:4px}
/* Shorter than it was (96px): the card now carries a labelled Asking / Calculated /
   Equity block, and Luis asked for the image to give up the room rather than the card growing. */
.card .photo{height:74px;background-size:cover;background-position:center;border-bottom:1px solid var(--line)}
.card .cbody{padding:10px}
.card .addr{font-family:var(--f-head);font-size:17px;line-height:1}
.card .sub{font-family:var(--f-mono);font-size:11px;color:var(--ink-soft);margin-top:4px}
.card .price{color:var(--mint);font-family:var(--f-mono);font-weight:600;margin-top:6px}
/* Two numbers that look alike need labels, or nobody can tell the ask from the valuation. */
.card .prices{margin-top:6px;font-family:var(--f-mono)}
.card .pline{display:flex;align-items:baseline;justify-content:space-between;gap:10px;line-height:1.55}
.card .plab{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft)}
.card .pval{font-size:13px;font-weight:600;color:var(--ink)}
.card .pval.money,.card .pval .money{color:var(--mint)}
/* Asking price above what the income supports. Only ever set when there IS a calculated value. */
.card .pval.ask-high{color:var(--red)}
/* Calculated value above the asking price - the deal is worth more than they want for it. */
.card .pval.val-good{color:var(--mint)}
/* DELETE always lands in the last column, with the gap before it (Luis's screenshot). */
.card .cbtns>.card-del{grid-column:3}
.card .contact{color:var(--mint);font-family:var(--f-mono);font-size:11px;margin-top:6px;border-top:1px dashed var(--line);padding-top:6px}
/* A GRID, not flex-wrap: three equal columns make every button the same width, which is what
   Luis's screenshot marked up (MOVE and DELETE were visibly narrower than their neighbours). */
.card .cbtns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:8px}
.card .cbtns>button,.card .cbtns>a{border:1px solid var(--line-strong);padding:5px 4px;font-size:10px;
  letter-spacing:.5px;width:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Cards with a seller carry 7 buttons, which left the last one stranded alone on its own row.
   When the final button starts a row by itself, it spans the full width instead - deliberate,
   not orphaned. See [[ui-changes-must-look-designed]]. */
/* ⚠️ :not(.card-del) - DELETE has its own column and must never be widened by this rule. */
.card .cbtns>*:last-child:nth-child(3n+1):not(.card-del){grid-column:1/-1}
.card .cbtns button:hover{background:var(--orange);color:var(--orange-ink);border-color:var(--orange)}
.card.glow{animation:glow 2.5s ease-out}
@keyframes glow{0%{box-shadow:0 0 0 3px var(--orange);border-color:var(--orange)}100%{box-shadow:0 0 0 0 transparent}}
.card.flash{animation:flash 2s ease-out}
@keyframes flash{0%,60%{background:var(--orange);color:var(--orange-ink)}100%{background:var(--paper-2)}}

/* mobile pager */
.pager{display:none;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;
  border:1px solid var(--line-strong);padding:8px 12px;background:var(--paper)}
.pager b{font-family:var(--f-mono);font-size:13px}
.pager .cnt{font-size:11px;color:var(--ink-soft)}
.pager button{font-size:20px;color:var(--orange);padding:0 10px}

/* ---------- analyzer ---------- */
/* minmax(0,1fr) — a plain 1fr can't shrink below its content's min-width, which pushed the
   analyzer's third column past the viewport on tablets and gave the page a sideways scroll. */
.an-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.an-cols>div{min-width:0}
.an-row input{min-width:0;max-width:100%}
@media (max-width:1020px){ .an-cols{grid-template-columns:repeat(2,minmax(0,1fr))} }
.an-grp{border:1px solid var(--line-strong);background:var(--paper);margin-bottom:14px}
.an-grp>.gh{font-family:var(--f-mono);font-size:11px;letter-spacing:2px;padding:8px 10px;
  background:var(--ink);color:var(--paper)}
.an-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line)}
.an-row:last-child{border-bottom:0}
.an-row label{font-size:11px;letter-spacing:.5px;flex:1;text-transform:none;font-family:var(--f-body)}
.an-row input{width:120px;text-align:right;font-family:var(--f-mono);font-size:13px;padding:5px 7px;
  background:var(--paper-2);color:var(--ink);border:1px solid var(--line)}
.an-hd-input{width:100%;font-family:var(--f-mono);font-size:15px;padding:7px 9px;margin-top:4px;
  background:var(--paper);color:var(--ink);border:1px solid var(--line-strong);border-radius:3px}
.an-hd-input:focus{outline:2px solid var(--orange);border-color:var(--orange)}
.an-row .calc{width:130px;text-align:right;font-family:var(--f-mono);font-size:13px;font-weight:600}
.an-row.total{background:var(--paper-3)}
.an-row.total label{font-weight:700}
.an-row.hero-out .calc{color:var(--mint);font-size:16px}
.an-row .calc.neg{color:var(--red)}
.an-chk{display:flex;align-items:center;gap:6px}

/* ---------- chips / deadlines ---------- */
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{border:1px solid var(--line-strong);padding:10px 14px;background:var(--paper);min-width:180px}
.chip .d{font-family:var(--f-head);font-size:26px}
.chip .l{font-family:var(--f-mono);font-size:11px;color:var(--ink-soft)}
.chip .days{font-family:var(--f-mono);font-size:12px;font-weight:600}
.chip.far{border-color:var(--green)} .chip.far .days{color:var(--green)}
.chip.near{border-color:var(--orange)} .chip.near .days{color:var(--orange)}
.chip.due{border-color:var(--red)} .chip.due .days{color:var(--red)}
.chip button{float:right;border:1px solid var(--line);padding:2px 6px;font-size:10px}

/* ---------- empty states ---------- */
.empty{text-align:center;padding:56px 20px;border:2px dashed var(--line-strong)}
.empty h4{font-size:clamp(24px,4vw,40px);color:var(--orange);margin-bottom:8px}
.empty p{color:var(--ink-soft);font-size:15px;max-width:460px;margin:0 auto 18px;line-height:1.5}

/* ---------- masked ---------- */
.mask{cursor:pointer;letter-spacing:2px;color:var(--ink-soft)}
.mask::before{content:attr(data-mask)}
body[data-mask="off"] .mask{letter-spacing:normal;color:inherit}
body[data-mask="off"] .mask::before,.mask.shown::before{content:attr(data-real)}
.mask.shown{letter-spacing:normal;color:inherit}
.mask-empty{color:var(--ink-soft)}

/* ---------- toasts / progress ---------- */
/* The container is a full-height 340px column in the bottom-right corner. Left clickable it
   swallows every click that lands in the gaps between toasts — so it's click-through, and only
   the toasts themselves (and their UNDO button) take the pointer. */
#toasts{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;flex-direction:column;gap:8px;max-width:340px;
  pointer-events:none}
#toasts .toast{pointer-events:auto}
.toast{border:2px solid var(--line-strong);background:var(--paper-2);padding:12px 14px;box-shadow:var(--shadow);
  display:flex;gap:10px;align-items:center;animation:slidein .25s}
@keyframes slidein{from{transform:translateX(40px);opacity:0}}
.toast .msg{font-size:13px;flex:1}
.toast .undo{border:1px solid var(--orange);color:var(--orange);padding:5px 10px;font-size:11px;letter-spacing:1px}
.toast .undo:hover{background:var(--orange);color:var(--orange-ink)}
.toast.err{border-color:var(--red)}
#progressbox{position:fixed;right:20px;bottom:20px;z-index:61;border:2px solid var(--orange);
  background:var(--paper-2);padding:14px 34px 14px 16px;box-shadow:var(--shadow);min-width:240px;border-radius:4px}
.pbx{position:absolute;top:7px;right:8px;border:1px solid var(--line-strong);padding:0 7px;font-size:12px;
  line-height:1.6;background:var(--paper);border-radius:2px}
.pbx:hover{background:var(--red);color:#fff;border-color:var(--red)}
#progressbox .pt{font-family:var(--f-mono);font-size:11px;letter-spacing:1px;color:var(--orange);margin-bottom:8px}
#progressbox .step{font-family:var(--f-mono);font-size:12px;padding:3px 0;color:var(--ink-soft)}
#progressbox .step.done{color:var(--mint)}
#progressbox .step.cur{color:var(--ink)}
#progressbox .step.cur .ic{animation:blink 1s steps(2) infinite}
@media (prefers-reduced-motion:reduce){#progressbox .step.cur .ic{animation:none}}
@keyframes blink{50%{opacity:.3}}

/* ---------- overlays / modals ---------- */
.overlay{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.55);display:flex;align-items:flex-start;
  justify-content:center;padding:60px 16px;overflow:auto}
.modal{border:2px solid var(--orange);background:var(--paper-2);max-width:760px;width:100%;box-shadow:var(--shadow)}
.modal.wide{max-width:980px}   /* footers that carry a full row of buttons */
.modal .mh{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:2px solid var(--line-strong)}
.modal .mh h3{font-size:24px}
.modal .mh .x{font-size:20px;border:1px solid var(--line-strong);padding:2px 10px}
.modal .mb{padding:18px}
.modal .tabs{display:flex;gap:6px;margin-bottom:14px}
.modal .tabs button{border:1px solid var(--line-strong);padding:8px 14px;font-size:12px}
.modal .tabs button.active{background:var(--orange);color:var(--orange-ink);border-color:var(--orange)}
/* editable, and tall enough that a scroll bar never appears (JS sizes it to its content) */
.draft-box{display:block;width:100%;white-space:pre-wrap;font-family:var(--f-mono);font-size:13px;line-height:1.55;
  background:var(--paper);color:var(--ink);border:1px solid var(--line-strong);padding:14px;
  min-height:320px;resize:vertical;overflow:hidden}
.draft-box:focus{outline:2px solid var(--orange);border-color:var(--orange)}
.modal .mfoot{display:flex;gap:8px;justify-content:flex-end;padding:14px 18px;border-top:1px solid var(--line);flex-wrap:wrap;align-items:center}
/* left-aligned utility buttons, everything else pushed right */
.modal .mfoot-split{justify-content:flex-start}
.mfoot-gap{flex:1 1 0;min-width:0}
/* The TEXT panel. Each step is a labelled block so the order is obvious at a glance, and the
   number is big enough to read across the room - the whole point is that nothing has to be
   remembered while you are in another tab. */
/* ---- OUTREACH HISTORY: three columns, five deep, sideways for older ----
   Fixed height by construction - each column holds exactly five rows - so logging a touch can
   never make the contact page taller again. */
.an-grp>.gh.gh-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gh-btn{font-size:10px;letter-spacing:1px;padding:2px 8px}
/* Lender search: the two action controls belong side by side, never stacked. */
/* The published phone sits under the lender's name, where it is readable without
   widening the table. */
.lender-search .lend-phone{font-size:11px;color:var(--ink-soft);margin-top:2px}
.lender-search .lend-act{white-space:nowrap}
.lender-search td .pill{margin-left:8px}
.lender-search .lend-act>*{display:inline-block;vertical-align:middle}
.lender-search .lend-act>*+*{margin-left:6px}
.oh-scroll{overflow-x:auto;overflow-y:hidden;padding-bottom:2px}
.oh-cols{display:flex;gap:14px;align-items:flex-start;min-width:min-content}
.oh-col{flex:0 0 calc((100% - 28px)/3);min-width:150px}
.oh-col .brief-line{cursor:default}
.oh-more{margin:8px 0 0}
.gv-step{padding:12px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* Sized down at Luis's request (2026-08-31): it has to be easy to read while typing it into
   Google Voice, not shout across the panel. Roughly the modal title's size, not bigger. */
/* ⚠️ 15px is the THIRD reduction of this number (26 -> 22 -> 18 -> 15). It only has to be readable
   while you type it into Google Voice - it is not the headline of the panel. */
.gv-num{font-size:15px;font-weight:500;letter-spacing:.5px;flex:0 0 auto}
/* ⚠️ SPACING OF THE STEP-1 SEQUENCE. Luis marked this twice. A flat gap packed COPY NUMBER, the
   number, both "Then ->" connectors and the two buttons into an even run with no rhythm; his
   mockup gives the connectors real air on each side so the line reads as
   [do this] -> [then this] -> [then this] rather than one undifferentiated row. */
.gv-then{flex:0 0 auto;font-size:14px;color:var(--ink-soft);margin:0 14px}
.gv-step .gv-num{margin:0 14px}   /* air on BOTH sides - it is the thing being copied */
/* The "first time only" note sits on its own line under the step-1 sequence. */
.gv-firsttime{flex:1 1 100%;margin-top:2px}
/* ⚠️⚠️ ONE VOICE FOR EVERY INSTRUCTION IN THIS PANEL - FAMILY, SIZE, COLOUR **AND WEIGHT**.
   Luis boxed five statements in red and said "all statements in those red boxes are to be made
   uniform with the same darker font". I unified family/size/colour first and kept bold lead-ins
   for emphasis - and that leftover weight difference was exactly what he was still pointing at.
   ⚠️ Do not reintroduce a hierarchy here: no <b> lead-ins, no lighter "secondary" line. Five
   sentences that all do the same job read as one voice. Test 62u-iv compares all five computed
   styles INCLUDING fontWeight. */
.gv-firsttime .hint,.gv-note,.gv-state,.gv-sep{font-family:var(--f-body);font-size:13px;
  color:var(--ink);font-weight:600}
.gv-sep{margin-left:8px}
.gv-note{line-height:1.5}
/* A soft header for the message block: it is not a numbered step, it is the thing you edit, so it
   reads as a sentence rather than shouting like the dark step bars. */
.an-grp>.gh.gh-soft{background:var(--paper-3);color:var(--ink);font-family:var(--f-body);
  font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;padding:9px 12px;
  display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.an-grp>.gh.gh-soft .gv-state{flex:0 0 auto}
.gv-step .draft-box{flex:1 1 100%;min-height:0}
.gv-note{flex:1 1 100%;margin:2px 0 0}
/* The header carries the how-to, so it is top-aligned rather than centred on the title. */
.modal .mh-gv{align-items:flex-start;gap:18px}
/* Shifted right off the title and given a hanging indent so a wrapped bullet lines up under its
   own text rather than under the asterisk (Luis's mockup, 2026-09-04). */
.modal .mh-gv .gv-how{flex:1 1 auto;font-size:14px;line-height:1.55;padding-top:2px}
.modal .mh-gv .gv-how .gv-cont{display:inline-block;margin-left:12px}
/* ⚠️ The name must not wrap, AND it reserves a FIXED width so the how-to block always begins in
   the same place however long the broker's name is. `flex:0 0 auto` sized to the text, which meant
   a long name shoved the instructions right and a short one let them drift left - Luis asked for
   the room to be reserved. Overflow is hidden rather than allowed to collide. */
.modal .mh-gv h3{font-size:19px;white-space:nowrap;flex:0 0 330px;overflow:hidden;text-overflow:ellipsis}
/* The contact page's reach row, lifted out of the footer to sit under WHO THEY ARE (Luis's
   screenshot, 2026-08-31). Same row, but it needs its own band mid-page: a footer only ever had a
   rule above it because the modal edge closed it off below. */
.modal .mfoot-inline{border-bottom:1px solid var(--line);margin:0 0 14px;padding:12px 14px}
/* a full row of footer buttons must sit on ONE level — never let one wrap on its own */
.modal .mfoot>button,.modal .mfoot>a{flex:0 0 auto;white-space:nowrap}
@media (min-width:820px){ .modal .mfoot{flex-wrap:nowrap} }

/* finder */
#finder .modal{max-width:620px}
.finder-in{width:100%;font-family:var(--f-mono);font-size:18px;padding:14px;background:var(--paper);
  color:var(--ink);border:2px solid var(--orange)}
.finder-res{margin-top:10px;max-height:50vh;overflow:auto}
.finder-res .r{padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer;font-size:14px}
.finder-res .r b{font-family:var(--f-head);font-size:16px}
.finder-res .r small{font-family:var(--f-mono);color:var(--ink-soft);display:block}
.finder-res .r.sel{background:var(--orange);color:var(--orange-ink)}
.finder-res .r.sel small{color:var(--orange-ink)}

/* ---------- misc ---------- */
.pill{display:inline-block;font-family:var(--f-mono);font-size:10px;letter-spacing:1px;border:1px solid var(--line-strong);padding:2px 7px}
.pill.metro{border-color:var(--cyan);color:var(--cyan)}
.pill.tert{border-color:var(--orange);color:var(--orange)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.stat{border:1px solid var(--line-strong);padding:12px;background:var(--paper)}
.stat .k{font-family:var(--f-mono);font-size:10px;color:var(--ink-soft);letter-spacing:1px}
.stat .v{font-family:var(--f-head);font-size:28px;margin-top:4px}
.stat .v.money{color:var(--mint)}
.barchart{display:flex;gap:6px;align-items:flex-end;height:160px;border-bottom:2px solid var(--line-strong);padding:10px 0}
.barchart .bar{flex:1;background:var(--mint);position:relative;min-height:2px}
.barchart .bar span{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-family:var(--f-mono);font-size:9px;color:var(--ink-soft)}
.row-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
/* ⚠️ Same deliberate HALF-STEP as .btn-act, applied to the plain buttons at Luis's request
   (2026-09-01): "slightly increase the boldness of all of the buttons with black borders and text
   the same way you did with the orange buttons." Weight 500, and a 1px solid edge plus a 1px ring
   at 45% alpha - `border-width:1.5px` is NOT an option, browsers round it back to 1px. */
.mini{border:1px solid var(--line-strong);box-shadow:0 0 0 1px var(--line-half);
  padding:5px 9px;font-size:10.5px;letter-spacing:.5px;border-radius:2px;font-weight:500}
/* A disabled button must not shout as loudly as a live one. */
.mini[disabled]{box-shadow:none;font-weight:400}
/* ---- .btn-act : the ONE look for Search and ADD actions on a main page ----
   Luis, 2026-09-01: "some of our buttons on main pages have bold orange lettering and borders, and
   some have un-bolded black font with fine black borders." They did: `+ ADD LENDER` was a `.mini`
   (fine grey border, black text) sitting beside `FIND LENDERS` as a `.stamp sm` (2px border, BOLD
   orange, and rotated). His call: fine orange border, un-bolded orange lettering, everywhere, for
   Search and ADD.
   ⚠️ MUST STAY BELOW `.mini`. Same specificity, so source order decides - placed above it, `.mini`'s
   grey border wins and the button comes out orange-lettered with a GREY outline.
   ⚠️ MAIN PAGE actions only. Buttons inside a popup stay `.mini` so the popup's own row reads as
   one set - that is why PRE-QUALIFY stopped being a `.stamp sm`. */
/* the auto-note's address, on its own line and indented (Luis's card screenshot) */
.pc-note .note-addr{display:block;margin-left:18px}
/* ⚠️ THIS IS A DELIBERATE HALF-STEP, not a stray value. Luis asked for the borders and labels to
   sit "halfway between where it is now and where it was": the fine version was 1px/400, the old
   `.stamp` was 2px/600.
   Weight 500 is the literal midpoint. The BORDER cannot be - `border-width:1.5px` computes back to
   1px (browsers round borders to whole device pixels at 1x), so it changed nothing on screen. A 1px
   solid edge plus a 1px ring at 45% alpha gives a two-pixel edge whose outer half is faint, which
   reads as ~1.5px and renders the same at any display scaling.
   Do not "simplify" this to a 2px border - that is the old heavy stamp he moved away from. */
.btn-act{border:1px solid var(--orange);box-shadow:0 0 0 1px var(--orange-half);
  color:var(--orange);background:transparent;
  font-weight:500;letter-spacing:1px;border-radius:2px;transform:none}
.btn-act:hover{background:var(--orange);color:var(--orange-ink);border-color:var(--orange);
  box-shadow:0 0 0 1px var(--orange)}
.empty .btn-act{padding:10px 18px;font-size:12.5px}
.mini:hover{background:var(--orange);color:var(--orange-ink);border-color:var(--orange)}
.mini.danger:hover{background:var(--red);border-color:var(--red);color:#fff}
.margin-note{font-family:var(--f-hand);font-size:20px;color:var(--orange);transform:rotate(-1.5deg)}

/* ---------- responsive: mobile one-stage board ---------- */
@media (max-width:760px){
  #titleblock{flex-direction:column;gap:10px}
  .tb-right{align-items:flex-start}
  .an-cols,.grid-2,.grid-3{grid-template-columns:1fr}
  .board .col{display:none;min-width:100%;flex-basis:100%}
  .board .col.show1{display:flex}
  .board{overflow-x:hidden}
  .pager{display:flex}
}

/* ================= SESSION 2 — contacts, briefing, vault, gate, sync ================= */
/* mode + sync pills */
.mode-btn.on{font-weight:600}
#modeUserBtn.on{background:var(--green);color:#fff;border-color:var(--green)}
#modeDemoBtn.on{border-color:var(--orange);color:var(--orange)}
.sync-pill{cursor:default;letter-spacing:.5px}
.sync-local{color:var(--ink-soft)}
.sync-syncing{color:var(--orange);border-color:var(--orange)}
.sync-synced{color:var(--mint);border-color:var(--mint)}
.sync-offline{color:var(--red);border-color:var(--red)}
body[data-mode="demo"] #titleblock::after{content:"PREVIEW · READ-ONLY";position:absolute;top:2px;right:12px;
  font-family:var(--f-mono);font-size:8px;letter-spacing:2px;color:var(--orange)}

/* Sheet B — people cards */
.people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.pcard{border:1px solid var(--line-strong);border-left-width:4px;border-radius:4px;background:var(--paper-2);padding:12px 14px}
.pcard.due{border-left-color:var(--red)} .pcard.near{border-left-color:var(--orange)} .pcard.far{border-left-color:var(--mint)}
.pc-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.pc-name{font-family:var(--f-head);font-size:19px;line-height:1}
.pc-co{font-family:var(--f-mono);font-size:12px;color:var(--ink);margin-top:3px}
.pc-loc{font-family:var(--f-mono);font-size:11px;color:var(--ink-soft)}
.pc-due{font-family:var(--f-mono);font-size:12px;font-weight:600;white-space:nowrap}
.pcard.due .pc-due{color:var(--red)} .pcard.near .pc-due{color:var(--orange)} .pcard.far .pc-due{color:var(--mint)}
.pc-contact{color:var(--mint);font-family:var(--f-mono);font-size:12px;margin-top:8px;border-top:1px dashed var(--line);padding-top:8px}
.pc-note{font-family:var(--f-hand);font-size:16px;color:var(--ink-soft);margin-top:6px}
.pc-meta{margin-top:6px}
/* Contact cards get the SAME uniform grid as pipeline cards - three equal columns, so OPEN, CALL,
   TEXT, EMAIL and SCRIPT are all one width instead of five. Matches .card .cbtns; change both. */
.pcard .cbtns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px}
.pcard .cbtns>button,.pcard .cbtns>a{padding:5px 4px;width:100%;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* A lone final button spans the row rather than sitting orphaned - same rule the deal cards use. */
/* ⚠️ :not(.card-open) - OPEN has its own column, per Luis's card screenshot. */
.pcard .cbtns>*:last-child:nth-child(3n+1):not(.card-open){grid-column:1/-1}
.pcard .cbtns>.card-open{grid-column:3}

/* Sheet C — briefing / write-ups */
.brief-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.brief-col{border:1px solid var(--line-strong);border-radius:4px;background:var(--paper);padding:14px}
.brief-col h4{font-family:var(--f-mono);font-size:12px;letter-spacing:2px;color:var(--orange);margin-bottom:10px}
.brief-line{display:flex;align-items:center;gap:8px;padding:7px 6px;border-bottom:1px solid var(--line);font-size:14px;cursor:pointer}
.brief-line:last-child{border-bottom:0}
.brief-line:hover{background:var(--paper-3)}
.pflag{font-family:var(--f-mono);font-size:10px;font-weight:600;border:1px solid;border-radius:2px;padding:1px 5px;flex:0 0 auto}
.pflag.pP1,.pflag.p1{color:var(--red);border-color:var(--red)}
.pflag.pP2,.pflag.p2{color:var(--orange);border-color:var(--orange)}
.pflag.pP3,.pflag.p3{color:var(--ink-soft);border-color:var(--line-strong)}
@media (max-width:760px){ .brief-grid{grid-template-columns:1fr} }

/* ---------- PRINT: the analysis sheet only, on white, no app chrome ---------- */
#printHead{display:none}
@media print{
  @page{ margin:14mm }
  /* force an ink-friendly sheet regardless of the on-screen theme */
  html,body{background:#fff !important;color:#000 !important}
  body::before,body::after{display:none !important}
  .frame,#titleblock,#welcome,#hero,#heroSlim,#sheets,#subtabs,#footerblock,
  #toasts,#progressbox,#finder,#modal,#gateBox{display:none !important}
  main#panel-root{margin:0 !important;padding:0 !important;max-width:none !important;width:auto !important}
  /* the on-screen action buttons are meaningless on paper */
  .row-btns,.subtab,.stamp,.mini,.an-chk input,button{display:none !important}
  #printHead{display:block;margin:0 0 10px;border-bottom:2px solid #000;padding-bottom:8px}
  #printHead .ph-t{font-family:var(--f-head);font-size:22px;letter-spacing:.5px}
  #printHead .ph-m{font-family:var(--f-mono);font-size:10px;color:#333;margin-top:3px}
  .panel{border:0 !important;box-shadow:none !important;padding:0 !important;background:#fff !important}
  /* the on-screen pitch + status tag are chatter on paper (markup is .dwg-head .l p and .r) */
  .dwg-head .l p,.dwg-head .r{display:none !important}
  .dwg-head{border-bottom:1px solid #000 !important;margin-bottom:10px !important;padding-bottom:6px !important}
  /* flow the groups through TWO balanced columns — a 2-col grid strands the 3rd block and
     leaves half the sheet empty. Multi-column fills the page; groups never split. */
  .an-cols{display:block !important;column-count:2;column-gap:10px}
  .an-cols>div{display:block !important}
  .an-grp{break-inside:avoid;page-break-inside:avoid;border:1px solid #000 !important;background:#fff !important;margin-bottom:8px}
  .an-grp>.gh{background:#000 !important;color:#fff !important;font-size:10px;padding:4px 8px}
  .an-row{padding:3px 8px !important;border-bottom:1px solid #bbb !important}
  .an-row label{font-size:10px !important;color:#000 !important}
  .an-row .calc,.an-row input{font-size:11px !important;color:#000 !important;background:#fff !important;
    border:0 !important;width:auto !important;text-align:right !important;padding:0 !important}
  .an-row.total{background:#eee !important}
  .an-row.hero-out .calc{font-size:13px !important;font-weight:700 !important}
  .grid-3{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:8px !important}
  .stat{border:1px solid #000 !important;background:#fff !important;padding:6px 8px !important}
  .stat .k{font-size:9px !important;color:#333 !important}
  .stat .v{font-size:13px !important;color:#000 !important}
  .an-hd-input{border:0 !important;font-size:13px !important;color:#000 !important;background:#fff !important;padding:0 !important}
  .money,.val-green,.val-yellow,.val-red,.calc.neg{color:#000 !important}
  a[href]::after{content:"" !important}
  /* the assistant and the reel player are screen furniture — never paper */
  #scout-fab,#scout-panel,#film-stage,.film-watch{display:none !important}
}

/* =========================================================================
   SESSION 3 — SCOUT, the built-in assistant
   ========================================================================= */
.scout-fab{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;align-items:center;gap:10px;
  background:var(--orange);color:var(--orange-ink);border:none;border-radius:999px;padding:9px 18px 9px 11px;
  cursor:pointer;box-shadow:0 8px 26px rgba(217,83,26,.42);font-family:var(--f-head);font-weight:800;
  transition:transform .15s,box-shadow .15s}
.scout-fab:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(217,83,26,.55)}
.scout-fab.hidden{display:none}
.scout-ask{font-size:19px;letter-spacing:1.5px}

/* the little face — eyes blink on a loop, the mouth moves while he speaks */
.scout-face{position:relative;width:34px;height:34px;border-radius:50%;background:var(--orange-ink);
  display:inline-block;flex:0 0 auto}
.scout-face.sm{width:30px;height:30px}
.scout-face .eye{position:absolute;top:11px;width:5px;height:6px;border-radius:50%;background:var(--orange);
  animation:scoutBlink 4s infinite}
.scout-face .eye:nth-child(1){left:9px} .scout-face .eye:nth-child(2){right:9px}
.scout-face.sm .eye{top:9px}
.scout-face .mouth{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:12px;height:3px;
  border-radius:3px;background:var(--orange)}
.scout-face.speaking .mouth{animation:scoutTalk .28s infinite alternate}
.scout-face.speaking .eye{animation-duration:2.4s}
@keyframes scoutBlink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.15)}}
@keyframes scoutTalk{from{height:3px;width:12px}to{height:9px;width:8px}}
/* on the light sheet the face sits on white — flip the ink so it stays readable */
.scout-head .scout-face,.scout-panel .scout-face{background:var(--ink)}
.scout-head .scout-face .eye,.scout-head .scout-face .mouth,
.scout-panel .scout-face .eye,.scout-panel .scout-face .mouth{background:var(--orange)}

.scout-panel{position:fixed;right:22px;bottom:22px;z-index:91;width:min(400px,94vw);height:min(560px,82vh);
  background:var(--paper);border:1.5px solid var(--orange);border-radius:6px;box-shadow:var(--shadow);
  display:none;flex-direction:column;overflow:hidden}
.scout-panel.open{display:flex}
.scout-head{display:flex;align-items:center;gap:6px;padding:10px 10px;border-bottom:1px solid var(--line);
  background:var(--paper-2);flex-wrap:nowrap}
/* nowrap on purpose: with wrap enabled the name block refused to give up width and shoved the
   LIVE button and the close box onto a second line. Now the subtitle ellipsises instead. */
.scout-head .mini,.scout-head .x,.scout-head .scout-face{flex:0 0 auto}
/* min-width:0 lets this shrink; without it a flex item refuses to go below its content width
   and the button cluster wraps onto a second line. */
.scout-id{min-width:0}
.scout-id .scout-name{font-family:var(--f-head);font-weight:800;font-size:19px;line-height:1;color:var(--orange);letter-spacing:1.5px}
.scout-id .scout-sub{font-family:var(--f-hand);font-size:14px;color:var(--cyan);line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scout-spacer{flex:1}
.scout-head .mini{padding:4px 6px;font-size:9.5px}
/* Live-call voice picker. Its own strip under the header - the header is nowrap and full. */
.scout-voicebar{display:flex;align-items:center;gap:8px;padding:7px 10px;
  border-bottom:1px solid var(--line);background:var(--paper-2);flex-wrap:wrap}
.scout-voicebar label{font-family:var(--f-mono);font-size:10px;letter-spacing:1px;
  text-transform:uppercase;color:var(--ink-soft)}
.scout-voicebar select{font-family:var(--f-mono);font-size:12px;padding:3px 6px;
  background:var(--paper);border:1px solid var(--line-strong);border-radius:2px;color:var(--ink)}
.scout-voicebar .hint{font-size:11px}
.scout-head .scout-tts.on,.scout-head .scout-live.on{background:var(--mint);border-color:var(--mint);color:#fff}
/* PAUSE / CONTINUE: amber while her voice is held mid-sentence, dimmed when there is nothing to
   control, so the header never carries a button that looks dead. Fixed width so the header does
   not jump as the label swaps between the two words. */
.scout-head .scout-hush{min-width:26px;text-align:center;font-size:11px;line-height:1.1}
.scout-head .scout-hush.paused{background:var(--yellow);border-color:var(--yellow);color:#1a1206}
.scout-head .scout-hush.idle{opacity:.45}
.scout-head .x{font-size:15px;color:var(--ink-soft);padding:2px 4px;line-height:1}
.scout-head .x:hover{color:var(--red)}
.scout-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.scout-welcome p{color:var(--ink-soft);font-size:13.5px;margin:0 0 12px;line-height:1.55}
.scout-chips{display:flex;flex-wrap:wrap;gap:6px}
.scout-msg{max-width:86%;padding:9px 12px;border-radius:10px;font-size:13.5px;line-height:1.5;white-space:normal}
.scout-msg.you{align-self:flex-end;background:var(--orange);color:var(--orange-ink);border-bottom-right-radius:2px}
.scout-msg.scout{align-self:flex-start;background:var(--paper-2);border:1px solid var(--line);border-bottom-left-radius:2px}
.scout-msg.scout b{color:var(--orange)}
.scout-msg.scout code{font-family:var(--f-mono);font-size:12px;background:var(--paper-3);padding:1px 4px;border-radius:2px}
.scout-receipt{align-self:flex-start;font-family:var(--f-mono);font-size:11px;color:var(--mint);
  background:rgba(10,138,84,.09);border-left:2px solid var(--mint);padding:5px 9px;border-radius:2px;max-width:92%;line-height:1.45}
body[data-theme="light"] .scout-receipt{background:rgba(78,230,168,.10)}
.scout-typing{display:inline-flex;gap:4px}
.scout-typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-soft);animation:scoutDot 1s infinite}
.scout-typing i:nth-child(2){animation-delay:.15s} .scout-typing i:nth-child(3){animation-delay:.3s}
@keyframes scoutDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.scout-input-row{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);align-items:center}
.scout-input-row input{flex:1;min-width:0;font-family:var(--f-body);font-size:14px;background:var(--paper-2);
  border:1px solid var(--line-strong);color:var(--ink);padding:9px 12px;border-radius:999px}
.scout-input-row input:focus{outline:none;border-color:var(--orange)}
.scout-mic{width:36px;height:36px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line-strong);
  background:var(--paper-2);color:var(--ink);cursor:pointer;font-size:15px}
.scout-mic.listening{border-color:var(--red);color:var(--red);animation:scoutMic 1s infinite}
@keyframes scoutMic{0%,100%{box-shadow:0 0 0 0 rgba(198,36,72,.4)}50%{box-shadow:0 0 0 6px rgba(198,36,72,0)}}

/* =========================================================================
   FILM ROOM — theater panel (C-05) + the self-driving player chrome
   ========================================================================= */
.dwg-head .r{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.dwg-head .r .dwg-note{font-family:var(--f-hand);font-size:21px;color:var(--orange);text-align:right}
.film-watch{border-color:var(--orange);color:var(--orange);white-space:nowrap}

.film-note{display:flex;gap:12px;align-items:flex-start;margin:6px 0 18px;padding:12px 14px;
  border:1px dashed var(--line-strong);border-left:3px solid var(--orange);border-radius:3px;
  background:var(--paper-2);font-size:13px;color:var(--ink-soft)}
.film-note .fn-ico{font-size:18px;line-height:1.2}

.film-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
.film-card{border:1px solid var(--line-strong);border-radius:4px;overflow:hidden;background:var(--paper-2);
  display:flex;flex-direction:column;transition:border-color .18s,transform .18s,box-shadow .18s}
.film-card:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:var(--shadow)}
.film-card.now{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange),var(--shadow)}
.fc-poster{position:relative;height:94px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 140% at 50% -20%,rgba(217,83,26,.20),transparent 60%),
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 22px),var(--paper-3);
  border-bottom:1px solid var(--line)}
.fc-emoji{font-size:38px}
.fc-code{position:absolute;top:8px;left:10px;font-family:var(--f-mono);font-size:10px;letter-spacing:1.5px;color:var(--orange)}
.fc-dur{position:absolute;top:8px;right:10px;font-family:var(--f-mono);font-size:10px;color:var(--ink-soft)}
.fc-live{position:absolute;bottom:8px;right:10px;font-family:var(--f-mono);font-size:10px;letter-spacing:1px;
  color:var(--mint);animation:filmBlink 1.1s steps(1) infinite}
@keyframes filmBlink{50%{opacity:.35}}
.fc-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.fc-tag{font-family:var(--f-mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-soft)}
.fc-body h4{margin:0;font-size:19px}
.fc-body p{margin:0 0 4px;font-size:12.5px;color:var(--ink-soft);flex:1;line-height:1.5}
.fc-body .mini{align-self:flex-start}

/* ---- the player: floats over the live app while the reel drives it ---- */
#film-stage{position:fixed;inset:0;z-index:95;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .25s}
#film-stage.open{opacity:1;visibility:visible}
.film-dim{position:absolute;inset:0;background:rgba(10,26,47,.72);opacity:0;transition:opacity .3s}
#film-stage.no-target .film-dim{opacity:1}
#film-spot{position:absolute;left:50%;top:40%;width:120px;height:60px;border-radius:5px;border:2px solid var(--orange);
  box-shadow:0 0 0 4000px rgba(10,26,47,.72),0 0 24px rgba(217,83,26,.5),inset 0 0 22px rgba(217,83,26,.24);
  transition:left .55s cubic-bezier(.5,.05,.2,1),top .55s cubic-bezier(.5,.05,.2,1),
    width .55s cubic-bezier(.5,.05,.2,1),height .55s cubic-bezier(.5,.05,.2,1),opacity .3s}
#film-stage.no-target #film-spot{opacity:0}
#film-cursor{position:absolute;left:50%;top:45%;width:26px;height:26px;margin:-2px 0 0 -2px;z-index:2;
  transition:left .7s cubic-bezier(.4,.1,.2,1),top .7s cubic-bezier(.4,.1,.2,1)}
#film-cursor svg{fill:#fff;stroke:#0a1a2f;stroke-width:1.2px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
#film-cursor .fc-ring{position:absolute;left:2px;top:2px;width:20px;height:20px;border-radius:50%;
  border:2px solid var(--orange);opacity:0}
#film-cursor.ping .fc-ring{animation:filmPing .7s ease-out}
@keyframes filmPing{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.4);opacity:0}}

#film-bar{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:min(680px,92vw);
  pointer-events:auto;background:var(--paper);border:1.5px solid var(--orange);border-radius:6px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);padding:12px 16px 14px}
.fb-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fb-poster{font-size:18px}
.fb-title{font-family:var(--f-head);font-weight:700;font-size:18px;letter-spacing:.5px}
.fb-code{font-family:var(--f-mono);font-size:10px;letter-spacing:1.5px;color:var(--orange)}
.fb-step{font-family:var(--f-mono);font-size:11px;color:var(--ink-soft)}
.fb-spacer{flex:1}
.fb-cap{margin:10px 2px 12px;font-size:15px;line-height:1.5;color:var(--ink);min-height:44px}
.fb-ctrls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fb-btn{font-family:var(--f-mono);font-size:13px;background:var(--paper-2);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:3px;padding:6px 12px;cursor:pointer;line-height:1;
  transition:border-color .15s,color .15s,background .15s}
.fb-btn:hover{border-color:var(--orange);color:var(--orange)}
.fb-btn.play{background:var(--orange);color:var(--orange-ink);border-color:var(--orange);min-width:44px}
.fb-btn.play:hover{color:var(--orange-ink);opacity:.88}
.fb-btn.ghost{padding:6px 9px}
.fb-btn:disabled{opacity:.4;cursor:default}
.fb-btn.ghost[data-on="false"]{color:var(--ink-soft)}
.fb-dots{display:flex;gap:6px;margin-left:auto;align-items:center;flex-wrap:wrap}
.film-dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;
  padding:0;cursor:pointer;transition:background .15s,border-color .15s}
.film-dot.done{background:var(--line-strong)}
.film-dot.on{background:var(--orange);border-color:var(--orange);box-shadow:0 0 8px rgba(217,83,26,.6)}

@media (max-width:760px){
  .scout-fab{right:14px;bottom:14px;padding:8px 15px 8px 10px}
  .scout-panel{right:0;left:0;bottom:0;width:100vw;height:86vh;border-radius:6px 6px 0 0;border-width:1.5px 0 0}
  .film-grid{grid-template-columns:1fr}
  #film-bar{bottom:8px;padding:10px 12px 12px}
  .fb-cap{font-size:14px;min-height:38px}
  .dwg-head .r{flex-direction:row;align-items:center}
}
@media (prefers-reduced-motion:reduce){
  .scout-face .eye,.scout-face .mouth,.fc-live,#film-cursor .fc-ring{animation:none!important}
  #film-spot,#film-cursor{transition:none}
}

/* =========================================================================
   SESSION 4 — maps, "Need INCOME", contact pages, message library
   ========================================================================= */

/* a listing with no rent roll can't be valued — say so in plain bold black, not a colour code */
.val-need{font-weight:700;color:#000}
body[data-theme="light"] .val-need{color:var(--ink)}   /* readable on the dark blueprint too */
.need-income-note{margin:0 0 16px;padding:12px 14px;border:1px dashed var(--line-strong);
  border-left:3px solid var(--ink);border-radius:3px;background:var(--paper-2);
  font-size:13px;color:var(--ink-soft);line-height:1.55}
.need-income-note b{color:var(--ink)}
.an-row input::placeholder,.field input::placeholder,.field textarea::placeholder{color:var(--ink-soft);opacity:.55}

/* an empty INCOME box is the one thing blocking the valuation — outline it in red until it's filled */
.need-val{border-color:var(--red)!important;box-shadow:inset 0 0 0 1px var(--red)}
.need-val:focus{outline:2px solid var(--red)!important;border-color:var(--red)!important}
.need-val::placeholder{color:var(--red);opacity:.7}

/* the pipeline thumbnail opens Property Info, same as the address above it */
.card .photo{cursor:pointer}
.card .photo:hover{filter:brightness(1.08)}

/* contact card: the one-line "what they do for you" pulled off their profile */
.pc-focus{font-size:12.5px;color:var(--ink);margin-top:7px;padding-top:7px;border-top:1px dashed var(--line);line-height:1.45}

/* contact page textareas */
.ct-area{font-family:var(--f-body);font-size:14px;line-height:1.55;padding:9px 12px;background:var(--paper);
  color:var(--ink);border:1px solid var(--line-strong);min-height:76px;resize:vertical;width:100%}
.ct-area:focus{outline:2px solid var(--orange);border-color:var(--orange)}
.field textarea.ct-area{margin-bottom:0}

/* message library */
.msg-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.msg-box{display:block;width:100%;min-height:240px;font-family:var(--f-mono);font-size:13px;line-height:1.55;
  padding:12px;background:var(--paper);color:var(--ink);border:1px solid var(--line-strong);resize:vertical;overflow:hidden}
.msg-box:focus{outline:2px solid var(--orange);border-color:var(--orange)}
.msg-state{float:right;font-family:var(--f-mono);font-size:9px;letter-spacing:1px;opacity:.75;text-transform:uppercase}
.film-note code{font-family:var(--f-mono);font-size:11.5px;background:var(--paper-3);color:var(--orange);
  padding:1px 5px;border-radius:2px;white-space:nowrap}
.mini[disabled]{opacity:.4;cursor:default}
.mini[disabled]:hover{background:none;color:inherit;border-color:var(--line-strong)}

@media (max-width:760px){
  .msg-box{min-height:220px}
  .draft-box{min-height:260px}
  .modal .mfoot-split{justify-content:flex-start}
  .mfoot-gap{flex-basis:100%}
}

/* =========================================================================
   SESSION 5 — sample/real split, deadline list, preview gating
   ========================================================================= */

/* Deadlines & Offers: overdue rows read at a glance */
.late-bad{font-family:var(--f-mono);font-size:11.5px;font-weight:700;color:#fff;background:var(--red);
  padding:2px 7px;border-radius:2px;white-space:nowrap;letter-spacing:.5px}
.late-today{font-family:var(--f-mono);font-size:11.5px;font-weight:700;color:var(--red);
  border:1px solid var(--red);padding:1px 6px;border-radius:2px;white-space:nowrap}
tr.row-late td{background:rgba(198,36,72,.07)}
body[data-theme="light"] tr.row-late td{background:rgba(255,84,112,.10)}
tr.row-late td:first-child{box-shadow:inset 3px 0 0 var(--red)}

/* the strip that explains what Preview is holding back */
.preview-note{display:flex;gap:12px;align-items:flex-start;margin:0 0 16px;padding:12px 14px;
  border:1px dashed var(--orange);border-left:3px solid var(--orange);border-radius:3px;
  background:var(--paper-2);font-size:13px;color:var(--ink-soft);line-height:1.55}
.preview-note b{color:var(--orange)}
.preview-note .pn-ico{font-size:17px;line-height:1.2}

/* panel-header tool row: WATCH plus any panel-level buttons, on one line under the note */
.dwg-head .r-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.dwg-head .r{max-width:none}
/* the go-live tease next to a locked export */
.golive-note{display:inline-block;border:2px solid var(--orange);border-radius:16px;
  padding:6px 16px;font-family:var(--f-body);font-size:13px;font-weight:400;line-height:1.35;
  color:var(--orange);background:var(--paper);text-align:center;white-space:normal}
.golive-note b{color:var(--mint);font-weight:700}   /* only LIVE is emphasised */
@media (max-width:760px){
  .dwg-head .r-tools{justify-content:flex-start}
  .golive-note{max-width:100%}
}

/* Deal Analyzer toolbar: utility buttons left, PRINT ANALYSIS pushed right */
.an-toolbar{align-items:center}
.an-toolbar-gap{flex:1 1 auto;min-width:12px}

/* Unit mix: six small counters on one line — they only ever hold 1-2 digits */
/* Property Info address line: City · State · Zip · Units, all on ONE row.
   .form-row alone cannot do it - its .field min-width:180px means 4 fields need 762px in a ~740px
   modal, so Units wrapped onto a line of its own and stretched full width. A grid fixes the
   proportions instead of leaving them to flex-wrap. min-width:0 on the children is required: a
   grid item will not shrink below min-content without it and would push the modal sideways. */
.addr-row{display:grid;grid-template-columns:1.7fr 1fr 1.15fr 1fr;gap:14px;align-items:end}
.addr-row .field{min-width:0}
@media (max-width:760px){ .addr-row{grid-template-columns:1fr 1fr} }
.mix-row{gap:10px}
.mix-row .field{flex:0 1 auto;min-width:0;width:104px;margin-bottom:0}
.mix-row .field label{font-size:9px;letter-spacing:.5px;white-space:nowrap}
.mix-row .field input{text-align:center;padding:8px 6px}
@media (max-width:760px){ .mix-row .field{width:calc(33.333% - 7px)} }

/* "OZ only" sits on the Market Search filter row. Sized to its content so a checkbox never takes
   a full-width .field slot next to the real inputs. */
.oz-toggle{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.5px;color:var(--ink-soft);
  padding-bottom:9px;cursor:pointer}
.oz-toggle input{width:15px;height:15px;accent-color:var(--orange);cursor:pointer}
td.oz-cell{text-align:right}

/* The broker-reach cluster on Property Info + Pre-qualify. Boxed and centred so it reads as one
   group of related actions rather than five loose buttons sharing a row with everything else. */
.reach-cluster-wrap{display:flex;justify-content:center;margin:14px 0 2px}
.reach-cluster{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:8px;
  padding:10px 12px;border:1px solid var(--line-strong);border-radius:3px;background:var(--paper)}
.reach-cluster .mini[disabled]{opacity:.45;cursor:not-allowed}

/* Message Library: how outreach leaves the building. Sized to its content on purpose - a
   single-digit account number must never own half a row (.form-row would stretch it to ~630px).
   justify-content:start keeps the pair hugging the left instead of spreading across the panel. */
/* ⚠️ THREE columns since the user's name joined this row (2026-09-04). It is a fixed grid, so
   adding a field without adding a column silently wraps it onto a second line - a test asserts the
   row stays on one, and that is how this was caught. */
.reach-row{display:grid;grid-template-columns:minmax(0,240px) minmax(0,300px) 118px;gap:14px;
  align-items:end;justify-content:start}
.reach-row .field{min-width:0}
.reach-row #googleUser{text-align:center}
/* ⚠️ On a narrow screen the NAME takes its own full-width row and the other two share the next -
   with three children and only two columns, the account box lands in the wide cell and becomes a
   300px box for one digit. */
@media (max-width:620px){
  .reach-row{grid-template-columns:minmax(0,1fr) 100px}
  .reach-row .field:first-child{grid-column:1/-1}
}

/* Deal Analyzer: who to call about this deal, under the auto-save note in the results column */
.an-broker{margin-top:12px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:3px;
  background:var(--paper-2)}
.an-broker .ab-h{font-weight:700;font-size:13px;color:var(--ink);margin-bottom:6px}
.an-broker .ab-l{font-size:14px;color:var(--ink);line-height:1.4;padding-left:14px}

/* "est." tag on an analyzer line whose number the app worked out rather than read */
.an-note{display:inline-block;margin-left:6px;font-family:var(--f-mono);font-size:9px;letter-spacing:.5px;
  text-transform:uppercase;color:var(--yellow);border:1px solid var(--yellow);border-radius:2px;
  padding:0 4px;vertical-align:middle;cursor:help}

/* the confirm box on CLEAR EVERYTHING — deliberately looks dangerous */
#wipeConfirm{font-family:var(--f-mono);letter-spacing:2px;text-transform:uppercase}
#wipeGo:disabled{opacity:.35;cursor:not-allowed;border-color:var(--line-strong);color:var(--ink-soft)}
#wipeGo:disabled:hover{background:transparent;color:var(--ink-soft);transform:none}
.stamp.danger{border-color:var(--red);color:var(--red)}
.stamp.danger:hover{background:var(--red);color:#fff}

/* Home ZIP box lives in the Market Search panel header, next to the export button */
.home-zip{font-family:var(--f-mono);font-size:12px;letter-spacing:1px;text-align:center;
  width:150px;padding:6px 10px;background:var(--paper);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:2px}
.home-zip:focus{outline:none;border-color:var(--orange)}
.home-zip::placeholder{letter-spacing:0;text-transform:none;color:var(--ink-soft);opacity:.7}
.dist-cell{white-space:nowrap;text-align:right}
@media (max-width:760px){ .home-zip{width:130px} }