/* Tradesmen Marketplace — Prototype
   Direction B: "The Spec Plate" — cyanotype blueprint navy ground, vellum-white
   title-block card surfaces, a single redline-orange accent. Barlow Condensed
   display, Barlow body, Martian Mono data/labels. Source of truth:
   files/tradesmen/design/{B-home,B-pro}.html — this file extends that language
   to every screen the direction itself didn't render. */

:root{
  --blueprint:#10314F;
  --blueprint-2:#163E63;
  --blueprint-3:#1C4A78;
  --vellum:#EEF2F1;
  --ink:#1B2A2E;
  --white:#FFFFFF;
  --cyan:#BFE1F0;
  --cyan-label:#9FC3D9;
  --redline:#FF6A1A;
  --redline-cta:#C1450F;
  --gridline:rgba(255,255,255,0.09);
  --hair-on-dark:rgba(255,255,255,0.16);
  --hair-on-dark-strong:rgba(255,255,255,0.35);
  --hair-on-light:rgba(27,42,46,0.14);
  --font-body:'Barlow', sans-serif;
  --font-disp:'Barlow Condensed', sans-serif;
  --font-mono:'Martian Mono', monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-body);
  background:#08182a;
  color:var(--white);
  -webkit-font-smoothing:antialiased;
}
button{ font-family:inherit; }
img{ max-width:100%; display:block; }
svg.ic{ stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; width:16px; height:16px; flex-shrink:0; }

/* cyanotype duotone treatment for every real work photo in the app */
.cyano{ filter:grayscale(1) sepia(0.5) hue-rotate(178deg) saturate(2.2) brightness(0.88) contrast(1.08); }

/* registration marks — the print-alignment crosshair used on every photo corner */
.reg-mark{ position:absolute; width:10px; height:10px; pointer-events:none; }
.reg-mark::before,.reg-mark::after{ content:""; position:absolute; background:rgba(255,255,255,0.85); }
.reg-mark::before{ left:4.5px; top:0; width:1px; height:10px; }
.reg-mark::after{ left:0; top:4.5px; width:10px; height:1px; }
.reg-mark.corner-tl{ top:7px; left:7px; }
.reg-mark.corner-tr{ top:7px; right:7px; }
.reg-mark.corner-br{ bottom:7px; right:7px; }
.reg-mark.corner-bl{ bottom:7px; left:7px; }

/* ---------- outer page chrome (desktop/tablet review context) ---------- */

.page{
  min-height:100dvh;
  width:100%;
  display:flex;
  flex-direction:column;
}

.page-head{
  text-align:center;
  padding:10px 16px 8px;
  flex-shrink:0;
}
.page-head-title{
  font-family:var(--font-disp);
  font-weight:800;
  font-size:16px;
  letter-spacing:.3px;
  color:var(--white);
}
.page-head-sub{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--cyan-label);
  margin-top:3px;
}

.stage{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:8px 16px 16px;
  min-height:0;
}

.reviewer-nav{
  width:172px;
  flex-shrink:0;
  background:var(--blueprint-2);
  border:1px solid var(--hair-on-dark);
  border-radius:2px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:4px;
  box-shadow:0 2px 10px rgba(0,0,0,.3);
}
.reviewer-nav-label{
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--cyan-label);
  padding:2px 6px 6px;
}
.reviewer-nav button{
  text-align:left;
  border:none;
  background:transparent;
  color:var(--cyan);
  font-size:12.5px;
  font-weight:500;
  padding:7px 8px;
  border-radius:2px;
  cursor:pointer;
}
.reviewer-nav button:hover{ background:rgba(255,255,255,.08); color:var(--white); }
.reviewer-nav button.is-active{ background:var(--redline-cta); color:#fff; }

.phone{
  width:390px;
  /* Fit short laptop windows (e.g. 1440x789): header + stage padding + bezel take ~120px. */
  height:min(844px, calc(100dvh - 120px));
  min-height:520px;
  max-width:100%;
  background:var(--blueprint);
  border-radius:34px;
  box-shadow:0 10px 46px rgba(0,0,0,.4), 0 0 0 9px #0a1622, 0 0 0 10.5px #22303f;
  overflow:hidden;
  position:relative;
  flex-shrink:0;
}

/* Mobile: the phone IS the device. No page chrome, no bezel. */
@media (max-width:600px){
  body{ background:var(--blueprint); }
  .page-head, .reviewer-nav{ display:none; }
  .stage{ padding:0; }
  .phone{
    width:100%;
    height:100dvh;
    min-height:0;
    border-radius:0;
    box-shadow:none;
  }
}

/* ---------- screen scaffolding ---------- */

.screen{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:
    linear-gradient(var(--gridline) 1px, transparent 1px) 0 0/100% 24px,
    linear-gradient(90deg, var(--gridline) 1px, transparent 1px) 0 0/24px 100%,
    var(--blueprint);
}

.topbar{
  padding:14px 16px 10px;
  flex-shrink:0;
}
.topbar-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:0; }
.brand-name{ font-family:var(--font-disp); font-weight:900; font-size:22px; letter-spacing:.02em; line-height:1; color:var(--white); }
.brand-tag{ font-family:var(--font-mono); font-size:8.4px; letter-spacing:.02em; color:var(--cyan-label); margin-top:6px; text-transform:uppercase; }
.topbar-icons{ display:flex; gap:7px; flex-shrink:0; }

.icon-btn{
  width:33px; height:33px; border:1px solid var(--hair-on-dark-strong); border-radius:2px;
  background:var(--blueprint-2); display:flex; align-items:center; justify-content:center; position:relative; color:var(--white);
  cursor:pointer;
}
.icon-btn svg{ width:16px; height:16px; }
.icon-btn .dot{
  position:absolute; top:-6px; right:-6px; width:15px; height:15px; border-radius:50%;
  background:var(--redline-cta); color:#fff; font-family:var(--font-mono); font-size:8px; font-weight:700;
  display:flex; align-items:center; justify-content:center; border:1px solid var(--blueprint);
}

.search-pill{
  margin-top:12px; position:relative; background:var(--vellum); border-radius:2px;
  padding:9px 12px 9px 34px; display:flex; align-items:center; width:100%; border:none; cursor:pointer; text-align:left;
}
.search-pill svg{ width:15px; height:15px; color:var(--redline-cta); position:absolute; left:11px; }
.search-pill span.ph{ font-size:12.5px; color:#44585c; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.topbar-simple{
  padding:12px 16px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:10px;
}
.back-btn, .save-btn{
  width:33px; height:33px; border:1px solid var(--hair-on-dark-strong); border-radius:2px;
  background:var(--blueprint-2); color:var(--white); display:flex; align-items:center; justify-content:center;
  flex-shrink:0; cursor:pointer;
}
.back-btn svg, .save-btn svg{ width:16px; height:16px; }
.topbar-title{ font-family:var(--font-disp); font-weight:800; font-size:16px; letter-spacing:.01em; color:var(--white); }
.topbar-title-sub{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.02em; text-transform:uppercase; color:var(--cyan-label); margin-top:1px; }
.topbar-simple .icon-btn.pushed{ margin-left:auto; }
.clear-link{
  margin-left:auto; background:none; border:1px solid var(--hair-on-dark-strong); color:var(--cyan);
  font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.04em; cursor:pointer; padding:6px 9px; border-radius:2px;
}

.avatar-mini{ flex-shrink:0; }

.scroll-y{ flex:1; overflow-y:auto; -ms-overflow-style:none; scrollbar-width:none; }
.scroll-y::-webkit-scrollbar{ display:none; }

/* ---------- seal — the identity mark, used everywhere a face used to be ---------- */

.seal{
  border-radius:50%; border:1.4px solid var(--redline-cta); background:var(--vellum);
  display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0;
}
.seal::before{ content:""; position:absolute; inset:3px; border:1px solid var(--redline-cta); border-radius:50%; opacity:.55; }
.seal span{ font-family:var(--font-mono); font-weight:700; color:var(--redline-cta); }
.seal.seal-sm{ width:28px; height:28px; }
.seal.seal-sm span{ font-size:9px; }
.seal.seal-sm::before{ inset:2px; }
.seal.seal-md{ width:36px; height:36px; }
.seal.seal-md span{ font-size:11px; }
.seal.seal-lg{ width:56px; height:56px; }
.seal.seal-lg span{ font-size:16px; }
.seal.on-dark{ background:var(--blueprint-2); border-color:var(--redline); }
.seal.on-dark span{ color:var(--white); }
.seal.on-dark::before{ border-color:var(--redline); }

/* ---------- trade tabs / filter chips ---------- */

.tabstrip{ display:flex; gap:7px; overflow-x:auto; padding:2px 16px 12px; flex-shrink:0; scrollbar-width:none; }
.tabstrip::-webkit-scrollbar{ display:none; }
.tabstrip .tab{
  flex-shrink:0; font-family:var(--font-mono); font-weight:500; font-size:10px; text-transform:uppercase;
  letter-spacing:.02em; padding:6px 10px; border:1px solid var(--hair-on-dark-strong); border-radius:2px;
  color:var(--cyan); cursor:pointer; white-space:nowrap; background:none;
}
.tabstrip .tab.is-active{ background:var(--redline-cta); border-color:var(--redline-cta); color:#fff; font-weight:600; }

.chiprow{ display:flex; gap:7px; padding:9px 16px; overflow-x:auto; flex-shrink:0; scrollbar-width:none; }
.chiprow::-webkit-scrollbar{ display:none; }
.chip{
  flex-shrink:0; font-family:var(--font-mono); padding:6px 10px; border-radius:2px; font-size:10px; font-weight:500;
  text-transform:uppercase; letter-spacing:.02em; border:1px solid var(--hair-on-dark-strong); background:none; color:var(--cyan); cursor:pointer; white-space:nowrap;
}
.chip.is-active{ background:var(--redline-cta); color:#fff; border-color:var(--redline-cta); font-weight:600; }

/* ---------- home / browse: stacked title-block cards ---------- */

.cardlist{ flex:1; overflow-y:auto; padding:0 16px 14px; display:flex; flex-direction:column; gap:12px; scrollbar-width:none; }
.cardlist::-webkit-scrollbar{ display:none; }

.pro-card{ background:var(--vellum); border-radius:2px; position:relative; flex-shrink:0; box-shadow:0 3px 8px rgba(0,0,0,.35); cursor:pointer; }
.pro-card .photo-wrap{ position:relative; height:112px; overflow:hidden; border-radius:2px 2px 0 0; }
.pro-card .photo-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.avail-tag{
  position:absolute; top:7px; right:7px; background:rgba(16,49,79,.85); color:var(--cyan);
  font-family:var(--font-mono); font-size:8.3px; font-weight:500; letter-spacing:.03em; text-transform:uppercase;
  padding:3px 7px; border:1px solid var(--hair-on-dark-strong);
}
.badge-photos{
  position:absolute; bottom:7px; right:7px; background:rgba(16,49,79,.85); color:var(--cyan);
  font-family:var(--font-mono); font-size:8.3px; padding:3px 7px; border:1px solid var(--hair-on-dark-strong); display:flex; align-items:center; gap:4px;
}
.badge-photos svg{ width:10px; height:10px; }
.badge-verified{
  position:absolute; top:7px; left:7px; background:rgba(16,49,79,.85); color:var(--cyan);
  font-family:var(--font-mono); font-size:8.3px; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  padding:3px 7px; border:1px solid var(--hair-on-dark-strong); display:flex; align-items:center; gap:4px; white-space:nowrap;
}
.badge-verified svg{ width:10px; height:10px; }
.badge-emergency{
  position:absolute; top:30px; left:7px; background:rgba(16,49,79,.85); color:var(--cyan);
  font-family:var(--font-mono); font-size:8.3px; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  padding:3px 7px; border:1px solid var(--hair-on-dark-strong); display:flex; align-items:center; gap:4px; white-space:nowrap;
}

.pro-card .seal{ position:absolute; left:12px; top:89px; z-index:2; width:46px; height:46px; }
.pro-card .seal span{ font-size:13px; }
.pro-card .titleblock{ padding:22px 13px 10px 66px; }
.pro-card .titleblock:last-child{ padding-bottom:13px; }
.tb-row{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.pro-name{ font-family:var(--font-disp); font-weight:800; font-size:18px; color:var(--ink); line-height:1.08; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trade-label{ font-family:var(--font-mono); font-size:9px; font-weight:500; text-transform:uppercase; letter-spacing:.03em; color:var(--redline-cta); margin-top:2px; }
.meta-row{ display:flex; align-items:center; gap:6px; margin-top:5px; font-size:11.5px; color:#44585c; flex-wrap:wrap; }
.stars{ color:var(--redline-cta); font-size:11px; letter-spacing:1px; }
.tick{ width:1px; height:10px; background:rgba(27,42,46,.28); }
.rev-count{ font-size:11px; color:#44585c; }
.loc-line{ font-size:11.5px; color:#44585c; margin-top:2px; }
.bio-snip{ font-size:11.5px; color:#3f5256; line-height:1.4; margin:5px 0 0; }

.card-actions{ display:flex; gap:8px; padding:9px 13px 12px; border-top:1px solid var(--hair-on-light); margin-top:9px; }
.btn-teal, .btn-primary{
  flex:1; background:var(--redline-cta); color:#fff; border:none; border-radius:2px;
  padding:8px 13px; font-family:var(--font-body); font-size:12.5px; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.btn-teal:active, .btn-primary:active{ transform:scale(.97); }
.btn-outline{
  flex:1; background:transparent; color:var(--ink); border:1px solid rgba(27,42,46,.4); border-radius:2px;
  padding:8px 13px; font-family:var(--font-body); font-size:12.5px; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.btn-outline.is-following{ background:rgba(27,42,46,.08); }
.btn-outline:active{ transform:scale(.97); }

.empty-state{
  background:var(--blueprint-2); border:1px dashed var(--hair-on-dark-strong); border-radius:2px;
  padding:28px 20px; text-align:center;
}
.empty-state .glyph{ width:34px; height:34px; margin:0 auto 12px; color:var(--redline); }
.empty-state h4{ margin:0 0 6px; font-family:var(--font-disp); font-weight:800; font-size:17px; color:var(--white); letter-spacing:.01em; }
.empty-state p{ margin:0 0 14px; font-size:12.5px; color:var(--cyan); opacity:.85; line-height:1.5; }
.empty-state .btn-primary{ display:inline-flex; flex:none; padding:9px 18px; }

/* ---------- bottom nav ---------- */

.bottomnav{ background:var(--blueprint-2); border-top:1px solid var(--hair-on-dark); display:flex; align-items:stretch; flex-shrink:0; height:62px; }
.bottomnav button{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  cursor:pointer; padding:0; border:none; background:none; color:var(--cyan-label); position:relative;
}
.bottomnav .ic{ width:18px; height:18px; }
.bottomnav .lb{ font-family:var(--font-mono); font-size:8px; letter-spacing:.03em; text-transform:uppercase; font-weight:500; color:inherit; }
.bottomnav button.is-active{ color:var(--white); }
.bottomnav button.is-active::before{ content:""; position:absolute; top:0; left:26%; right:26%; height:2px; background:var(--redline); }
.bottomnav .dot{ display:none; }

/* ---------- pro profile ---------- */
.auth-privacy{ padding:16px; font-size:13px; line-height:1.5; color:var(--cyan-label); }
.auth-privacy a{ color:var(--white); text-decoration:underline; }

.profile-banner{ display:none; }
.hero-wrap{ position:relative; height:184px; overflow:hidden; flex-shrink:0; }
.hero-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-tag{
  position:absolute; bottom:9px; right:16px; background:rgba(16,49,79,.85); color:var(--cyan);
  font-family:var(--font-mono); font-size:9px; letter-spacing:.03em; text-transform:uppercase; padding:4px 9px; border:1px solid var(--hair-on-dark-strong);
}
.hero-emergency{ position:absolute; bottom:9px; left:16px; background:var(--redline-cta); color:#fff; font-family:var(--font-mono); font-size:9px; letter-spacing:.03em; text-transform:uppercase; padding:4px 9px; }
.badge-chip{ display:inline-block; margin:4px 0 0; padding:4px 9px; background:var(--blueprint-2); color:var(--cyan); border:1px solid var(--hair-on-dark-strong); font-family:var(--font-mono); font-size:10px; }
.badge-help{ margin:8px 16px 0; color:var(--cyan); font-size:11.5px; line-height:1.45; }
.profile-signin{ margin-top:14px; }
.report-overlay{ position:fixed; inset:0; z-index:50; background:rgba(8,20,28,.68); display:flex; align-items:flex-end; justify-content:center; }
.report-sheet{ position:relative; width:100%; max-width:390px; box-sizing:border-box; background:var(--vellum); color:var(--ink); padding:18px 16px 22px; border-radius:8px 8px 0 0; box-shadow:0 -4px 20px rgba(0,0,0,.3); }
.report-sheet .zt{ color:var(--ink); font-family:var(--font-disp); font-size:22px; font-weight:800; margin-bottom:10px; }
.report-sheet .btn-outline{ width:100%; min-height:44px; margin-top:8px; background:var(--vellum); color:var(--ink); }
.report-sheet .report-reason{ width:100%; min-height:44px; margin-top:8px; padding:10px 16px; box-sizing:border-box; background:var(--vellum) !important; border:1px solid var(--blueprint) !important; color:var(--blueprint) !important; font-size:16px; text-align:center; cursor:pointer; }
.report-cancel{ width:100%; min-height:44px; margin-top:8px; border:0; background:transparent; color:var(--ink); font-weight:700; cursor:pointer; }
.search-topbar{ display:block; }
.search-heading{ margin:0 0 6px; color:var(--white); font-family:var(--font-disp); font-size:16px; font-weight:800; line-height:1; white-space:nowrap; }
.search-input-row{ display:flex; align-items:center; gap:10px; }

.profile-head{ background:transparent; padding-bottom:0; }
.profile-head-row{ display:none; }
.titleblock-lg{
  margin:0 16px; margin-top:-30px; position:relative; z-index:3;
  background:var(--vellum); border-radius:2px; box-shadow:0 4px 12px rgba(0,0,0,.4);
  padding:14px 16px 14px 78px; min-height:70px; display:flex; flex-direction:column; justify-content:center;
}
.titleblock-lg .seal{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:56px; height:56px; }
.titleblock-lg .seal span{ font-size:16px; }
.profile-id{ padding:0; }
.profile-id .name{ font-family:var(--font-disp); font-weight:800; font-size:21px; color:var(--ink); line-height:1.05; }
.trade-chip{
  display:inline-block; font-family:var(--font-mono); font-size:10px; font-weight:500; text-transform:uppercase;
  letter-spacing:.03em; color:var(--redline-cta); margin:3px 0 0; padding:0; background:none;
}
.profile-chip-row{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:3px; }
.profile-chip-row .trade-chip{ margin:0; flex-basis:100%; }
.profile-chip-row .badge-chip{ margin:0; }
.emergency-chip{ display:inline-block; padding:4px 9px; background:var(--redline-cta); color:#fff; border:1px solid var(--redline-cta); font-family:var(--font-mono); font-size:10px; }
.meta-row.on-vellum{ color:#44585c; }
.dist-line{ font-size:11.5px; color:#44585c; margin-top:4px; }

.profile-head-actions{ display:flex; gap:9px; padding:11px 16px 0; }
.btn-follow{
  background:transparent; color:var(--white); border:1px solid var(--hair-on-dark-strong); border-radius:2px;
  padding:9px 14px; font-family:var(--font-body); font-size:12.5px; font-weight:600; cursor:pointer; flex:1;
}
.btn-follow.is-following{ background:var(--blueprint-2); }
.btn-contact{
  background:var(--redline-cta); color:#fff; border:none; border-radius:2px;
  padding:9px 14px; font-family:var(--font-body); font-size:12.5px; font-weight:600; cursor:pointer; flex:1;
}

.dimset{ margin:20px 16px 0; }
.dim-title{ font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--cyan-label); margin-bottom:10px; }
.dim-row{ display:flex; justify-content:space-between; gap:6px; }
.dim{ flex:1; text-align:center; position:relative; padding-top:9px; }
.dim::before{ content:""; position:absolute; top:4px; left:6px; right:6px; height:1px; background:rgba(255,255,255,.4); }
.dim-tick{ position:absolute; top:0; width:1px; height:9px; background:rgba(255,255,255,.4); }
.dim-tick.l{ left:6px; } .dim-tick.r{ right:6px; }
.dim-val{ font-family:var(--font-disp); font-weight:800; font-size:18px; color:var(--white); }
.dim-label{ font-family:var(--font-mono); font-size:8px; letter-spacing:.04em; text-transform:uppercase; color:var(--cyan-label); margin-top:2px; }

.section-block, .section{ margin:20px 16px 0; background:none; padding:0; }
.section-title{ font-family:var(--font-disp); font-weight:800; font-size:16.5px; text-transform:uppercase; letter-spacing:.01em; margin-bottom:8px; color:var(--white); }
.bio-text{ font-size:12.8px; line-height:1.55; color:var(--cyan); }

.photo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:2px; }
.photo-tile{ border-radius:2px; overflow:hidden; background:var(--vellum); position:relative; }
.photo-tile img{ width:100%; height:76px; object-fit:cover; display:block; }
.photo-cap{ font-family:var(--font-mono); font-size:8.4px; padding:5px 7px; color:#3f5256; }

.review-slip{ background:var(--blueprint-2); border:1px solid var(--hair-on-dark); border-radius:2px; padding:11px 12px; margin-top:10px; }
.review-row{ background:var(--blueprint-2); border:1px solid var(--hair-on-dark); border-radius:2px; padding:11px 12px; margin-bottom:10px; }
.review-row:last-child{ margin-bottom:0; }
.review-row .stars{ color:#FF9A5C; }
.review-top{ display:flex; align-items:center; gap:8px; }
.review-name{ font-family:var(--font-body); font-weight:600; font-size:12px; color:var(--white); }
.review-date{ margin-left:auto; font-family:var(--font-mono); font-size:8.6px; color:var(--cyan-label); }
.review-text{ font-size:11.8px; line-height:1.5; margin-top:7px; color:var(--cyan); }

.action-bar{ flex-shrink:0; display:flex; gap:9px; padding:11px 16px; background:var(--blueprint-2); border-top:1px solid var(--hair-on-dark); }
.btn{ flex:1; text-align:center; font-family:var(--font-body); font-weight:600; font-size:13px; padding:11px 0; border-radius:2px; display:flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; }
.btn.btn-primary{ background:var(--redline-cta); color:#fff; border:none; flex:1; }
.btn.btn-outline{ background:transparent; color:var(--white); border:1px solid var(--hair-on-dark-strong); flex:0 0 92px; }

/* ---------- map ---------- */

.map-wrap{ flex:1; position:relative; overflow:hidden; }
.map-wrap svg{ width:100%; height:100%; display:block; }
.map-popup{
  position:absolute; top:12px; left:16px; right:16px; background:var(--vellum); border-radius:2px;
  padding:12px 13px 13px 66px; min-height:60px; border:none; box-shadow:0 6px 18px rgba(0,0,0,.4); z-index:5;
}
.map-popup .seal{ position:absolute; left:12px; top:14px; width:44px; height:44px; }
.map-popup .seal span{ font-size:12px; }
.map-popup .name{ font-family:var(--font-disp); font-weight:800; font-size:15px; color:var(--ink); line-height:1.1; }
.map-popup .trade{ font-family:var(--font-mono); font-size:9px; font-weight:500; text-transform:uppercase; letter-spacing:.03em; color:var(--redline-cta); margin-top:2px; }
.map-popup .stars-line{ color:var(--redline-cta); font-size:11px; margin-top:4px; }
.map-popup .range-line{ font-size:11px; color:#44585c; margin-top:2px; }
.map-popup .btn-teal{ width:100%; border-radius:2px; padding:8px; margin-top:8px; text-align:center; font-size:12px; flex:none; }
.map-legend{
  position:absolute; bottom:14px; left:16px; background:var(--blueprint-2); border-radius:2px;
  padding:9px 11px; border:1px solid var(--hair-on-dark-strong); box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.map-legend .lgtitle{ font-family:var(--font-mono); font-size:9px; font-weight:600; color:var(--cyan-label); margin-bottom:6px; text-transform:uppercase; letter-spacing:.05em; }
.map-legend .lgrow{ display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.map-legend .lgrow:last-child{ margin-bottom:0; }
.map-legend .dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; border:1px solid rgba(255,255,255,.5); }
.map-legend span{ font-family:var(--font-body); font-size:10.5px; color:var(--white); }

/* ---------- rings / travel range ---------- */

.rings-hero{
  padding:14px; display:flex; align-items:center; justify-content:center; height:170px; flex-shrink:0;
  background:var(--blueprint-2); border-bottom:1px solid var(--hair-on-dark);
}
.rings-visual{ position:relative; width:145px; height:145px; display:flex; align-items:center; justify-content:center; }
.rings-visual .ring{ position:absolute; border-radius:50%; border:1px dashed var(--hair-on-dark-strong); background:none !important; }
.rings-visual .center-dot{ width:12px; height:12px; background:var(--redline); border-radius:50%; z-index:3; box-shadow:0 0 0 4px rgba(255,106,26,.18); }
.rings-visual .ring-label{ position:absolute; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:9px; color:var(--cyan-label); font-weight:500; white-space:nowrap; }
.rings-info{ background:var(--blueprint-2); border-bottom:1px solid var(--hair-on-dark); padding:11px 16px; }
.rings-info .t{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--white); font-weight:600; margin-bottom:4px; }
.rings-info .b{ font-size:12px; color:var(--cyan); line-height:1.5; }
.zone-card{ background:var(--vellum); margin:12px 16px 0; border-radius:2px; padding:13px 14px; }
.zone-card .zt{ font-family:var(--font-disp); font-size:15px; font-weight:800; color:var(--ink); margin-bottom:2px; }
.zone-card .zs{ font-size:11px; color:#44585c; margin-bottom:10px; }
.zone-row{ display:flex; align-items:center; gap:9px; }
.zone-row .zdot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; background:var(--redline-cta) !important; }
.zone-row .zlabel{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.02em; color:#44585c; width:70px; flex-shrink:0; }
.zone-row input[type=range]{
  flex:1; accent-color:var(--redline-cta); -webkit-appearance:none; appearance:none;
  height:3px; background:rgba(27,42,46,.18); border-radius:0; outline:none;
}
.zone-row input[type=range]::-webkit-slider-runnable-track{ height:3px; background:rgba(27,42,46,.18); }
.zone-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--vellum); border:2px solid var(--redline-cta); margin-top:-6.5px; cursor:pointer;
}
.zone-row input[type=range]::-moz-range-track{ height:3px; background:rgba(27,42,46,.18); }
.zone-row input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; background:var(--vellum); border:2px solid var(--redline-cta); cursor:pointer;
}
.zone-row .zval{ font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--redline-cta); width:44px; text-align:right; flex-shrink:0; }
.rings-save{ padding:16px 16px; }
.rings-save button{
  width:100%; background:var(--redline-cta); color:#fff; border:none; border-radius:2px;
  padding:13px; font-family:var(--font-body); font-size:14px; font-weight:700; cursor:pointer;
}
.toast{
  position:fixed; left:50%; bottom:84px; transform:translateX(-50%); max-width:calc(100vw - 32px); box-sizing:border-box;
  background:var(--blueprint-2); border:1px solid var(--hair-on-dark-strong); color:var(--white);
  font-family:var(--font-mono); font-size:11.5px; font-weight:500; text-transform:uppercase; letter-spacing:.03em;
  padding:9px 16px; border-radius:2px; box-shadow:0 6px 20px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  white-space:normal; text-align:center; z-index:200;
}
.toast.is-shown{ opacity:1; transform:translateX(-50%) translateY(-4px); }

/* ---------- account / list rows ---------- */

.account-hero{ background:var(--blueprint-2); border-bottom:1px solid var(--hair-on-dark); padding:16px 16px 18px; flex-shrink:0; }
.account-hero-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.account-hero-top span{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--cyan-label); }
.edit-btn{
  background:none; border:1px solid var(--hair-on-dark-strong); border-radius:2px;
  padding:5px 11px; color:var(--white); font-family:var(--font-body); font-size:12px; font-weight:600; cursor:pointer;
}
.account-id{ display:flex; align-items:center; gap:13px; margin-bottom:14px; }
.account-id .name{ font-family:var(--font-disp); font-size:18px; font-weight:800; color:var(--white); }
.account-id .loc{ font-family:var(--font-mono); font-size:10px; color:var(--cyan-label); margin-top:3px; }
.account-stats{ display:flex; gap:1px; background:var(--hair-on-dark); border:1px solid var(--hair-on-dark); }
.account-stats .s{ flex:1; background:var(--blueprint); padding:9px 5px; text-align:center; }
.account-stats .s b{ display:block; font-family:var(--font-disp); font-size:17px; font-weight:800; color:var(--white); }
.account-stats .s small{ font-family:var(--font-mono); font-size:8px; text-transform:uppercase; letter-spacing:.03em; color:var(--cyan-label); }

.spacer{ height:12px; }

.list-row{
  display:flex; align-items:center; gap:12px; padding:13px 16px; background:var(--blueprint-2);
  border-bottom:1px solid var(--hair-on-dark); cursor:pointer;
}
.list-row .ic{
  width:33px; height:33px; border:1px solid var(--hair-on-dark-strong); border-radius:2px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; color:var(--redline); background:var(--blueprint);
}
.list-row .ic svg{ width:16px; height:16px; }
.list-row .txt{ flex:1; min-width:0; }
.list-row .txt .l{ font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--white); }
.list-row .txt .s{ font-family:var(--font-mono); font-size:10.5px; color:var(--cyan-label); margin-top:2px; }
.list-row .count{ background:var(--redline-cta); color:#fff; border-radius:2px; padding:2px 8px; font-family:var(--font-mono); font-size:10.5px; font-weight:700; }
.list-row .chev{ color:var(--cyan-label); width:15px; height:15px; flex-shrink:0; }
.list-row.danger .l{ color:var(--white); }
.list-row.danger .ic{ color:var(--redline); }

/* ---------- quotes ---------- */

.segrow{ display:flex; background:var(--blueprint-2); border-bottom:1px solid var(--hair-on-dark); flex-shrink:0; }
.segrow .seg{
  flex:1; text-align:center; padding:11px 4px; font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.02em; color:var(--cyan-label); cursor:pointer; border-bottom:2px solid transparent;
}
.segrow .seg.is-active{ font-weight:700; color:var(--white); border-bottom-color:var(--redline); }

.quote-card{ background:var(--vellum); margin:12px 16px 0; border-radius:2px; padding:12px 13px; }
.quote-card.is-expired{ border:1px dashed var(--redline-cta); }
.quote-top{ display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.quote-top .name{ font-family:var(--font-disp); font-size:14px; font-weight:800; color:var(--ink); }
.quote-top .trade{ font-family:var(--font-mono); font-size:9px; font-weight:500; text-transform:uppercase; letter-spacing:.03em; color:var(--redline-cta); margin-top:1px; }
.status-chip{
  margin-left:auto; border-radius:2px; padding:4px 8px; font-family:var(--font-mono); font-size:9.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; flex-shrink:0;
}
.status-chip.active{ background:var(--redline-cta); color:#fff; }
.status-chip.pending{ background:none; border:1px solid var(--redline-cta); color:var(--redline-cta); }
.status-chip.done{ background:none; border:1px solid rgba(27,42,46,.4); color:#3f5256; }
.status-chip.expired{ background:none; border:1px dashed var(--redline-cta); color:var(--redline-cta); }
.quote-desc{ font-size:12px; color:#3f5256; line-height:1.45; margin-bottom:9px; }
.quote-bottom{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:9px; border-top:1px solid var(--hair-on-light); }
.quote-bottom .price{ font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--ink); }
.quote-bottom .price.is-muted{ color:#44585c; }
.quote-bottom .date{ font-family:var(--font-mono); font-size:9.5px; color:#44585c; margin-top:2px; }
.quote-bottom .date.is-flag{ color:var(--redline-cta); font-weight:700; opacity:1; }
.btn-quote{ border:none; border-radius:2px; padding:7px 13px; font-family:var(--font-body); font-size:11.5px; font-weight:600; cursor:pointer; flex-shrink:0; }
.btn-quote.primary{ background:var(--redline-cta); color:#fff; }
.btn-quote.review{ background:none; border:1px solid var(--redline-cta); color:var(--redline-cta); }
.btn-quote.retry{ background:none; border:1px solid rgba(27,42,46,.35); color:var(--ink); }

/* ---------- saved / messages / search rows ---------- */

.person-row{ display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--blueprint-2); border-bottom:1px solid var(--hair-on-dark); cursor:pointer; }
.person-info{ flex:1; min-width:0; }
.person-info .trade{ font-family:var(--font-mono); font-size:9px; color:var(--cyan); font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.person-info .name{ font-family:var(--font-disp); font-size:16px; font-weight:800; color:var(--white); line-height:1.15; margin-top:1px; }
.person-info .sub{ font-family:var(--font-mono); font-size:10px; color:var(--cyan-label); margin-top:2px; }
.person-info .sub.is-flag{ background:var(--redline-cta); color:#fff; font-weight:700; padding:2px 6px; border-radius:2px; display:inline-block; }
.msg-preview{ font-size:12.5px; color:var(--cyan); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.msg-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex-shrink:0; }
.msg-time{ font-family:var(--font-mono); font-size:9.5px; color:var(--cyan-label); }
.msg-time.is-flag{ background:var(--redline-cta); color:#fff; font-weight:700; padding:2px 6px; border-radius:2px; display:inline-block; }
.unread-badge{ background:var(--redline-cta); color:#fff; border-radius:2px; padding:2px 7px; font-family:var(--font-mono); font-size:10px; font-weight:700; }
.person-row .btn-outline{ flex:none; padding:7px 13px; color:var(--white); border-color:var(--hair-on-dark-strong); }
.person-row .btn-teal{ flex:none; padding:7px 13px; }

.list-search{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--cyan-label); padding:10px 16px 4px; }

/* ---------- chat ---------- */

.chat-log{ flex:1; overflow-y:auto; padding:13px 13px 8px; display:flex; flex-direction:column; gap:9px; scrollbar-width:none; }
.chat-log::-webkit-scrollbar{ display:none; }
.bubble-row{ display:flex; flex-direction:column; }
.bubble-row.me{ align-items:flex-end; }
.bubble-row.them{ align-items:flex-start; }
.bubble{ max-width:74%; padding:9px 13px; border-radius:2px; font-size:13px; line-height:1.45; }
.bubble.me{ background:var(--redline-cta); color:#fff; }
.bubble.them{ background:var(--vellum); color:var(--ink); }
.bubble-time{ font-family:var(--font-mono); font-size:9px; color:var(--cyan-label); margin-top:3px; padding:0 2px; text-transform:uppercase; letter-spacing:.02em; }
.chat-input-bar{ background:var(--blueprint-2); border-top:1px solid var(--hair-on-dark); padding:8px 16px 12px; display:flex; gap:8px; align-items:center; flex-shrink:0; }
.chat-input-bar input{
  flex:1; min-width:0; background:var(--vellum); border:1px solid transparent; border-radius:2px; padding:10px 13px;
  font-family:var(--font-body); font-size:14px; color:var(--ink); outline:none;
}
.chat-input-bar input:focus{ border-color:var(--redline-cta); }
.send-btn{ width:36px; height:36px; border-radius:2px; background:var(--redline-cta); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.send-btn svg{ width:17px; height:17px; }
.send-btn:active{ transform:scale(.94); }
.typing-row{ display:flex; align-items:center; gap:4px; padding:10px 13px; background:var(--vellum); border-radius:2px; width:fit-content; }
.typing-row span{ width:5px; height:5px; border-radius:50%; background:var(--ink); opacity:.5; animation:tdot 1s infinite ease-in-out; }
.typing-row span:nth-child(2){ animation-delay:.15s; }
.typing-row span:nth-child(3){ animation-delay:.3s; }
@keyframes tdot{ 0%,80%,100%{ opacity:.3; transform:translateY(0);} 40%{ opacity:1; transform:translateY(-2px);} }

/* ---------- notifications ---------- */

.notif-section{
  font-family:var(--font-mono); font-size:9.5px; color:var(--cyan-label); padding:9px 16px 5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em; background:var(--blueprint); border-bottom:1px solid var(--hair-on-dark);
}
.notif-row{ display:flex; align-items:flex-start; gap:11px; padding:12px 16px; background:var(--blueprint-2); border-bottom:1px solid var(--hair-on-dark); cursor:pointer; }
.notif-row.is-inert{ cursor:default; }
.notif-icon{ position:relative; flex-shrink:0; }
.notif-badge{
  position:absolute; bottom:-2px; right:-2px; width:16px; height:16px; border-radius:50%; border:2px solid var(--blueprint-2);
  display:flex; align-items:center; justify-content:center; background:var(--redline-cta); color:#fff;
}
.notif-badge svg{ width:9px; height:9px; }
.notif-body{ flex:1; }
.notif-text{ font-size:13px; color:var(--cyan); line-height:1.45; }
.notif-text strong{ color:var(--white); font-weight:700; }
.notif-time{ font-family:var(--font-mono); font-size:10px; color:var(--cyan-label); margin-top:3px; text-transform:uppercase; letter-spacing:.02em; }
.notif-unread-dot{ width:7px; height:7px; border-radius:50%; background:var(--redline); flex-shrink:0; margin-top:5px; }

.wrap-14{ padding:0 16px; }

/* ---------- search ---------- */

.search-field-bar{ display:flex; align-items:center; gap:8px; background:var(--vellum); border-radius:2px; padding:9px 13px; flex:1; }
.search-field-bar svg{ width:15px; height:15px; color:var(--redline-cta); flex-shrink:0; }
.search-field-bar input{ flex:1; border:none; outline:none; font-family:var(--font-body); font-size:14px; color:var(--ink); background:transparent; }
.search-field-bar input::placeholder{ color:#44585c; }

footer{
  flex-shrink:0;
  text-align:center;
  padding:16px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--cyan-label);
}
footer a{
  display:inline-block;
  min-height:44px;
  padding:12px 8px;
  color:var(--cyan-label);
  text-decoration:none;
}
footer a:hover{ text-decoration:underline; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------- cold-inspection fix: .chip nested in .zone-card (Post a Job) ---------- */
/* Additive only. Does not touch the .chip or .chip.is-active declarations above.
   :not(.is-active) is required so this rule (equal specificity, later in file)
   cannot override .chip.is-active's white-on-red look. */
.zone-card .chip:not(.is-active){ color:var(--ink); border-color:rgba(27,42,46,.35); }