/* ==========================================================================
   BLUE LOBSTER PARTNER PORTAL — PRODUCT LAYER
   --------------------------------------------------------------------------
   Layer test (blue-lobster-brand SKILL.md §0): the reader DOES things here —
   logs in, filters, taps, opens a Job Form. This is the PRODUCT layer.
   Tokens below come from assets/product.css. brand.css is NOT loaded.

   Deviations from the desktop reference build, and why:
   - Base type is 15px, not 14px. 14px is a working size for a dense desktop
     table. This is a phone held at arm's length, outdoors, in sun. Floor is
     still 11.5px and everything <=12.5px keeps its word-spacing. [PROPOSED]
   - The shell is a fixed top bar + fixed bottom tab bar rather than a 216px
     rail. Same rule: the shell never scrolls, exactly one pane does.
   - No Tay Wingman. Its EULA is single-user and this is a public URL served
     to other companies — that is webfont redistribution. Display face sits
     behind --p-display-face; swap it in when the foundry confirms in writing.
   - No Vintage Goods. The product layer bans the script face outright.
   ========================================================================== */

:root{
  /* surfaces — separate by line, not by value (Mist is 1.03:1 vs White) */
  --p-surface:#FFFFFF;
  --p-surface-2:#F4FEFF;      /* Mist [SPEC] */
  --p-surface-3:#EAF6F9;
  --p-line:#DDE6EB;           /* 1px hairline, 1.27:1 */
  --p-line-2:#C4D2DA;         /* 1.55:1 */
  /* ink — measured on White / Mist */
  --p-ink:#182F3B;            /* Nautical [SPEC] 13.92 / 13.57 */
  --p-ink-2:#47606E;          /* 6.63 / 6.46 */
  --p-ink-3:#5E7684;          /* 4.77 / 4.65 */
  --p-ink-4:#8095A1;          /* 3.12 — placeholder + disabled ONLY */
  --p-accent:#3D6180;         /* Rare Blue [SPEC] 6.52 */
  /* chrome */
  --p-rail:#182F3B;
  --p-rail-ink:#FFFFFF;
  --p-rail-ink-2:#ADCCE0;     /* Sky [SPEC] 8.28:1 on Nautical — the one approved pairing */
  --p-rail-line:#2C4756;
  --p-rail-hover:#20404F;
  /* semantic — exactly two non-brand hues exist in this layer */
  --p-pos:#337431; --p-pos-fill:#E0F3DE; --p-pos-ink:#125713; --p-pos-edge:#6AA167;
  --p-alarm:#902F33; --p-alarm-fill:#FFE6E5; --p-alarm-ink:#7C2529; --p-alarm-edge:#D07E7C;
  /* uncertainty is NOT amber — Deepsea on Sky, 11.61:1, an approved pairing */
  --p-unsure-fill:#ADCCE0; --p-unsure-ink:#060D14; --p-unsure-edge:#7C98B2;
  /* type */
  --p-face:'Questrial UI','Questrial',system-ui,-apple-system,'Segoe UI',sans-serif;
  --p-display-face:var(--p-face);
  --p-t-fig:30px; --p-t-display:19px; --p-t-h:16px;
  --p-t-base:15px; --p-t-sm:12.5px; --p-t-xs:11.5px;
  /* radius / elevation / motion */
  --p-r:6px; --p-r-sm:4px; --p-r-pill:999px;
  --p-e1:0 1px 2px rgba(6,13,20,.07), 0 1px 1px rgba(6,13,20,.04);
  --p-e2:0 4px 12px rgba(6,13,20,.10), 0 1px 3px rgba(6,13,20,.06);
  --p-fast:.14s; --p-ease:cubic-bezier(.2,0,.2,1);
  /* shell */
  --p-top-h:60px; --p-tab-h:60px;
  --p-gut:16px;
  --p-safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  font-family:var(--p-face);
  font-size:var(--p-t-base); line-height:1.45; color:var(--p-ink);
  background:var(--p-surface-2);
  font-feature-settings:'tnum' 1,'lnum' 1,'kern' 1;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;                      /* the SHELL does not scroll */
}
.fig,.tnum{font-variant-numeric:tabular-nums lining-nums}
svg{display:block;flex:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

:focus-visible{outline:2px solid var(--p-accent);outline-offset:2px;border-radius:var(--p-r-sm)}
.screen-header :focus-visible,.tab-bar :focus-visible{outline-color:var(--p-rail-ink-2)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}
}

/* ==========================================================================
   SHELL — fixed header, fixed tab bar, exactly one scroller
   ========================================================================== */
.screen{
  display:flex; flex-direction:column;
  height:100dvh; height:100vh;
  overflow:hidden; background:var(--p-surface-2);
}
.screen-content{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:var(--p-gut) var(--p-gut) 28px;
  display:flex; flex-direction:column; gap:14px;
}

/* ---------- top bar ---------- */
.screen-header{
  flex:none; background:var(--p-rail); color:var(--p-rail-ink);
  padding:14px var(--p-gut) 13px;
  padding-top:calc(14px + env(safe-area-inset-top,0px));
  display:flex; flex-direction:column; gap:2px;
  border-bottom:1px solid var(--p-rail-line);
}
.hdr-title{
  font-family:var(--p-display-face); font-size:var(--p-t-display);
  letter-spacing:.055em; text-transform:uppercase; line-height:1.15;
  color:var(--p-rail-ink);
}
.hdr-account{
  display:flex; align-items:baseline; gap:7px;
  color:var(--p-rail-ink); font-size:var(--p-t-sm);
  line-height:1.3; overflow-wrap:anywhere;
}
.hdr-account-label{
  flex:none; color:var(--p-rail-ink-2);
  font-size:var(--p-t-xs); letter-spacing:.08em; text-transform:uppercase;
}
.hdr-sub{
  font-size:var(--p-t-xs); letter-spacing:.055em; text-transform:uppercase;
  color:var(--p-rail-ink-2); word-spacing:.03em; line-height:1.35;
}
/* Home gets the mark; inner screens get a back affordance instead */
.hdr-home{padding-bottom:15px}
.hdr-home .hdr-title{font-size:22px}

.back-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--p-t-sm); letter-spacing:.04em; text-transform:uppercase;
  color:var(--p-rail-ink-2); word-spacing:.02em;
  min-height:32px; margin-bottom:2px; align-self:flex-start;
  transition:color var(--p-fast) var(--p-ease);
}
.back-btn::before{
  content:''; width:7px; height:7px; flex:none;
  border-left:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
}
.back-btn:hover,.back-btn:active{color:var(--p-rail-ink)}

/* ---------- bottom tab bar ---------- */
.tab-bar{
  flex:none; display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  background:var(--p-rail); border-top:1px solid var(--p-rail-line);
  padding-bottom:var(--p-safe-b);
}
.tab-item{
  min-height:var(--p-tab-h); padding:9px 4px 10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  font-size:var(--p-t-xs); letter-spacing:.06em; text-transform:uppercase;
  word-spacing:.03em; color:var(--p-rail-ink-2);
  border-top:2px solid transparent; margin-top:-1px;
  transition:color var(--p-fast) var(--p-ease),background var(--p-fast) var(--p-ease);
}
.tab-item svg{width:21px;height:21px;stroke-width:1.4}
.tab-item:hover{background:var(--p-rail-hover)}
.tab-item.active{color:var(--p-rail-ink); border-top-color:var(--p-rail-ink-2); background:var(--p-rail-hover)}

/* ==========================================================================
   SECTION HEADS
   ========================================================================== */
.sec-hd{
  font-size:var(--p-t-xs); letter-spacing:.1em; text-transform:uppercase;
  color:var(--p-ink-3); word-spacing:.03em; margin-top:8px;
}
.lab,.intro-label,.strip-label,.kv-key,.opp-field-label,.report-block-label,
.referral-block-label,.ref-tile-label{
  display:block; font-size:var(--p-t-xs); letter-spacing:.09em;
  text-transform:uppercase; color:var(--p-ink-3); word-spacing:.03em;
}

/* ==========================================================================
   HOME
   ========================================================================== */
.hero{
  background:var(--p-rail); color:var(--p-rail-ink);
  border-radius:var(--p-r); padding:16px 18px 18px;
  display:flex; flex-direction:column; gap:2px; position:relative;
  transition:background var(--p-fast) var(--p-ease);
}
.hero .lab{color:var(--p-rail-ink-2)}
.hero-n{font-size:44px; line-height:1.05; letter-spacing:-.01em; margin-top:4px}
.hero-cap{font-size:var(--p-t-sm); color:var(--p-rail-ink-2); word-spacing:.02em; margin-top:6px; max-width:34ch}
.hero:hover,.hero:active{background:var(--p-rail-hover)}
.hero::after{
  content:''; position:absolute; right:18px; top:50%; margin-top:-6px;
  width:9px; height:9px; border-right:1.5px solid var(--p-rail-ink-2);
  border-top:1.5px solid var(--p-rail-ink-2); transform:rotate(45deg);
}

.duo{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.duo-reports,.duo-pending{
  background:var(--p-surface); border:1px solid var(--p-line);
  border-radius:var(--p-r); padding:13px 14px 14px; box-shadow:var(--p-e1);
  display:flex; flex-direction:column; gap:1px; min-height:96px;
  transition:border-color var(--p-fast) var(--p-ease),box-shadow var(--p-fast) var(--p-ease);
}
.duo-reports:hover,.duo-pending:hover{border-color:var(--p-line-2); box-shadow:var(--p-e2)}
/* Reports ready is the highest-value thing in the portal. It carries the accent. */
.duo-reports{border-left:3px solid var(--p-accent)}
.duo-n{font-size:var(--p-t-fig); line-height:1.1; margin-top:5px}
.duo-cap{font-size:var(--p-t-xs); color:var(--p-ink-3); word-spacing:.03em; margin-top:auto; padding-top:6px}

.strip{
  display:grid; grid-template-columns:repeat(3,1fr);
  background:var(--p-surface); border:1px solid var(--p-line);
  border-radius:var(--p-r); overflow:hidden;
}
.strip-item{padding:12px 12px 13px; border-left:1px solid var(--p-line)}
.strip-item:first-child{border-left:0}
.strip-value{font-size:19px; line-height:1.2; margin-top:4px}

.intro-block{
  background:var(--p-surface); border:1px solid var(--p-line);
  border-left:3px solid var(--p-accent);
  border-radius:var(--p-r); padding:13px 15px;
}
.intro-text{font-size:var(--p-t-sm); color:var(--p-ink-2); word-spacing:.02em; margin-top:4px; max-width:62ch}
/* A one-line positioning statement, not a paragraph - no label above it,
   so no top margin is needed and the card can be shorter. Maximizes room
   for the actual opportunity cards below it. */
.intro-block.intro-tight{padding:11px 15px}
.intro-block.intro-tight .intro-text{margin-top:0; font-weight:600; color:var(--p-ink)}

/* ---------- recent updates ---------- */
.mini-event{
  background:var(--p-surface); border:1px solid var(--p-line);
  border-radius:var(--p-r); padding:12px 14px;
  display:flex; flex-direction:column; gap:3px;
  transition:border-color var(--p-fast) var(--p-ease),background var(--p-fast) var(--p-ease);
}
.mini-event:hover{border-color:var(--p-line-2); background:var(--p-surface-2)}
.mini-event-type{
  font-size:var(--p-t-xs); letter-spacing:.08em; text-transform:uppercase;
  color:var(--p-accent); word-spacing:.03em;
}
.mini-event-detail{font-size:var(--p-t-base); color:var(--p-ink); line-height:1.4}
.mini-event-meta{font-size:var(--p-t-sm); color:var(--p-ink-3); word-spacing:.02em}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn-ghost{
  min-height:46px; width:100%;
  border:1px solid var(--p-line-2); border-radius:var(--p-r-sm);
  background:var(--p-surface); color:var(--p-ink);
  font-size:var(--p-t-sm); letter-spacing:.07em; text-transform:uppercase;
  word-spacing:.02em;
  transition:background var(--p-fast) var(--p-ease),border-color var(--p-fast) var(--p-ease);
}
.btn-ghost:hover{background:var(--p-surface-3); border-color:var(--p-ink-4)}
.btn-ghost:active{background:var(--p-surface-3); transform:translateY(1px)}

/* The Job Form CTA. This is the payoff of the whole product — treat it like one. */
.btn-view{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:50px; width:100%; padding:0 18px;
  background:var(--p-rail); color:var(--p-rail-ink);
  border:0; border-radius:var(--p-r-sm);
  font-size:var(--p-t-base); letter-spacing:.07em; text-transform:uppercase;
  cursor:pointer;
  transition:background var(--p-fast) var(--p-ease),box-shadow var(--p-fast) var(--p-ease),transform 60ms var(--p-ease);
}
.btn-view::after{
  content:''; width:8px; height:8px; flex:none;
  border-right:1.6px solid currentColor; border-top:1.6px solid currentColor;
  transform:rotate(45deg);
}
.btn-view:hover{background:var(--p-rail-hover); box-shadow:var(--p-e2)}
.btn-view:active{transform:translateY(1px); box-shadow:var(--p-e1)}
.btn-view:focus-visible{outline:2px solid var(--p-accent); outline-offset:3px}

/* ==========================================================================
   FILTER CHIPS — visible at rest, never hover-only
   ========================================================================== */
.filter-chips{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:2px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.filter-chips::-webkit-scrollbar{display:none}
.chip{
  flex:none; min-height:36px; padding:0 15px;
  display:inline-flex; align-items:center;
  border:1px solid var(--p-line-2); border-radius:var(--p-r-pill);
  background:var(--p-surface); color:var(--p-ink-2);
  font-size:var(--p-t-sm); letter-spacing:.05em; text-transform:uppercase;
  word-spacing:.02em; cursor:pointer;
  transition:background var(--p-fast) var(--p-ease),color var(--p-fast) var(--p-ease),border-color var(--p-fast) var(--p-ease);
}
.chip:hover{border-color:var(--p-ink-4); background:var(--p-surface-3)}
.chip.active{background:var(--p-rail); border-color:var(--p-rail); color:var(--p-rail-ink)}

/* ==========================================================================
   JOB CARD — the workhorse. Scannable in one glance, one thumb.
   ========================================================================== */
.job-card{
  background:var(--p-surface); border:1px solid var(--p-line);
  border-radius:var(--p-r); padding:14px 15px 13px; box-shadow:var(--p-e1);
  display:flex; flex-direction:column; gap:9px;
  transition:border-color var(--p-fast) var(--p-ease),box-shadow var(--p-fast) var(--p-ease);
}
.job-card:hover{border-color:var(--p-line-2); box-shadow:var(--p-e2)}
.job-card:active{background:var(--p-surface-2)}

.job-card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.job-prop{
  font-size:17px; line-height:1.25; color:var(--p-ink);
  letter-spacing:-.005em; min-width:0; overflow-wrap:anywhere;
}
.job-num{
  flex:none; font-size:var(--p-t-sm); color:var(--p-ink-3);
  word-spacing:.02em; padding-top:2px;
}
.job-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  font-size:var(--p-t-sm); color:var(--p-ink-2); word-spacing:.02em;
}
.job-address{font-size:var(--p-t-sm); color:var(--p-ink-2); word-spacing:.02em; line-height:1.4}
.job-date{font-size:var(--p-t-sm); color:var(--p-ink-3); word-spacing:.02em}
.job-opps{
  font-size:var(--p-t-xs); letter-spacing:.06em; text-transform:uppercase;
  color:var(--p-accent); word-spacing:.03em;
}

/* ---------- status pill — always a word, never colour alone ---------- */
.status-pill{
  display:inline-flex; align-items:center; align-self:flex-start;
  min-height:21px; padding:0 9px;
  border-radius:var(--p-r-pill); border:1px solid var(--p-line-2);
  background:var(--p-surface-3); color:var(--p-ink-2);
  font-size:var(--p-t-xs); letter-spacing:.06em; text-transform:uppercase;
  word-spacing:.03em; white-space:nowrap;
}
.status-COMPLETED,.status-COMPLETED_NO_REPORT{
  background:var(--p-pos-fill); color:var(--p-pos-ink); border-color:var(--p-pos-edge);
}
.status-SCHEDULED,.status-SCHEDULED_TODAY{
  background:var(--p-unsure-fill); color:var(--p-unsure-ink); border-color:var(--p-unsure-edge);
}
.status-LATE,.status-ACTION_REQUIRED{
  background:var(--p-alarm-fill); color:var(--p-alarm-ink); border-color:var(--p-alarm-edge);
}

/* ---------- the four milestone dots ---------- */
.pill-dots{display:inline-flex; align-items:center; gap:5px}
.pill-dot{
  width:7px; height:7px; border-radius:50%;
  background:transparent; border:1px solid var(--p-line-2);
}
.pill-dot.filled{background:var(--p-accent); border-color:var(--p-accent)}
.pill-dot.faded{background:transparent; border-color:var(--p-line-2)}

/* ==========================================================================
   JOB DETAIL
   ========================================================================== */
.kv-card{
  background:var(--p-surface); border:1px solid var(--p-line);
  border-radius:var(--p-r); overflow:hidden; box-shadow:var(--p-e1);
}
.kv-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:11px 15px; border-top:1px solid var(--p-line);
}
.kv-row:first-child{border-top:0}
.kv-key{flex:none}
.kv-val{font-size:var(--p-t-base); color:var(--p-ink); text-align:right; overflow-wrap:anywhere}

/* ---------- milestone timeline ---------- */
.timeline{
  background:var(--p-surface); border:1px solid var(--p-line);
  border-radius:var(--p-r); padding:6px 15px 8px; box-shadow:var(--p-e1);
}
.tl-step{
  position:relative; display:flex; flex-direction:column; gap:1px;
  padding:11px 0 11px 26px; min-height:52px;
}
.tl-step::before{            /* the connecting rail */
  content:''; position:absolute; left:5px; top:0; bottom:0; width:1px;
  background:var(--p-line);
}
.tl-step:first-child::before{top:22px}
.tl-step:last-child::before{bottom:calc(100% - 22px)}
.tl-marker{
  position:absolute; left:0; top:16px; width:11px; height:11px;
  border-radius:50%; background:var(--p-surface);
  border:1.5px solid var(--p-line-2); z-index:1;
}
.tl-marker.done{background:var(--p-accent); border-color:var(--p-accent)}
.tl-step-label{
  font-size:var(--p-t-sm); letter-spacing:.07em; text-transform:uppercase;
  color:var(--p-ink); word-spacing:.02em;
}
.tl-step-label.pending{color:var(--p-ink-4)}
.tl-step-body{font-size:var(--p-t-sm); color:var(--p-ink-2); word-spacing:.02em}
.tl-step-date{font-size:var(--p-t-xs); color:var(--p-ink-3); word-spacing:.03em}

/* ---------- job form block on the detail screen ---------- */
.report-block{
  background:var(--p-surface); border:1px solid var(--p-line);
  border-left:3px solid var(--p-accent);
  border-radius:var(--p-r); padding:14px 15px 15px; box-shadow:var(--p-e1);
  display:flex; flex-direction:column; gap:11px;
}
.report-block-label{color:var(--p-ink-3)}
.report-btns{display:flex; flex-direction:column; gap:9px}

/* ---------- events on the detail screen ---------- */
.detail-events{
  background:var(--p-surface); border:1px solid var(--p-line);
  border-radius:var(--p-r); overflow:hidden;
}
.event-row{
  padding:12px 15px; border-top:1px solid var(--p-line);
  display:flex; flex-direction:column; gap:2px;
  transition:background var(--p-fast) var(--p-ease);
}
.event-row:first-child{border-top:0}
.event-row:hover{background:var(--p-surface-2)}
.event-row.consequential{border-left:3px solid var(--p-accent); padding-left:12px}
.event-type{
  font-size:var(--p-t-xs); letter-spacing:.08em; text-transform:uppercase;
  color:var(--p-accent); word-spacing:.03em;
}
.event-detail{font-size:var(--p-t-base); color:var(--p-ink); line-height:1.4}
.event-meta{font-size:var(--p-t-sm); color:var(--p-ink-3); word-spacing:.02em}

.day-group{display:flex; flex-direction:column; gap:10px}
.day-label{
  font-size:var(--p-t-xs); letter-spacing:.1em; text-transform:uppercase;
  color:var(--p-ink-3); word-spacing:.03em; margin-top:6px;
}

/* ==========================================================================
   MY REPORTS — field documentation, not a forgotten attachment
   ========================================================================== */
.report-card{
  background:var(--p-surface); border:1px solid var(--p-line);
  border-radius:var(--p-r); padding:15px; box-shadow:var(--p-e1);
  display:flex; flex-direction:column; gap:11px;
  transition:border-color var(--p-fast) var(--p-ease),box-shadow var(--p-fast) var(--p-ease);
}
.report-card:hover{border-color:var(--p-line-2); box-shadow:var(--p-e2)}
.report-card-prop{font-size:17px; line-height:1.25; color:var(--p-ink); overflow-wrap:anywhere}
.report-card-meta{
  display:flex; flex-wrap:wrap; gap:5px 10px;
  font-size:var(--p-t-sm); color:var(--p-ink-2); word-spacing:.02em;
}
.report-card-btns{display:flex; flex-direction:column; gap:9px}
.report-ready-tag{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  min-height:21px; padding:0 9px; border-radius:var(--p-r-pill);
  background:var(--p-pos-fill); color:var(--p-pos-ink); border:1px solid var(--p-pos-edge);
  font-size:var(--p-t-xs); letter-spacing:.06em; text-transform:uppercase; word-spacing:.03em;
}

/* ==========================================================================
   REFERRALS / OPPORTUNITIES
   ========================================================================== */
.ref-tiles{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.ref-tile{
  background:var(--p-surface); border:1px solid var(--p-line);
  border-radius:var(--p-r); padding:13px 14px; box-shadow:var(--p-e1);
}
.ref-tile-val{font-size:var(--p-t-fig); line-height:1.1; margin-top:5px}
.ref-tile-paid{border-left:3px solid var(--p-pos)}
.ref-tile-pending{border-left:3px solid var(--p-line-2)}

.ref-row,.opp-card,.referral-block{
  background:var(--p-surface); border:1px solid var(--p-line);
  border-radius:var(--p-r); padding:14px 15px; box-shadow:var(--p-e1);
  display:flex; flex-direction:column; gap:6px;
}
.ref-row-hl{border-left:3px solid var(--p-accent)}
.ref-prop,.opp-title,.opp-prop{font-size:16px; line-height:1.3; color:var(--p-ink)}
.ref-meta,.opp-addr{font-size:var(--p-t-sm); color:var(--p-ink-2); word-spacing:.02em}
.ref-right,.ref-amount,.referral-amount{font-size:17px; color:var(--p-ink)}
.ref-state-tag,.opp-status,.referral-state{
  display:inline-flex; align-items:center; align-self:flex-start;
  min-height:21px; padding:0 9px; border-radius:var(--p-r-pill);
  border:1px solid var(--p-line-2); background:var(--p-surface-3); color:var(--p-ink-2);
  font-size:var(--p-t-xs); letter-spacing:.06em; text-transform:uppercase; word-spacing:.03em;
}
.ref-state-PAID{background:var(--p-pos-fill); color:var(--p-pos-ink); border-color:var(--p-pos-edge)}
.ref-state-PENDING{background:var(--p-unsure-fill); color:var(--p-unsure-ink); border-color:var(--p-unsure-edge)}
.opp-field{display:flex; flex-direction:column; gap:2px}
.opp-field-val{font-size:var(--p-t-base); color:var(--p-ink)}
.opp-ref-wrap,.opp-ref-frame{border-radius:var(--p-r); overflow:hidden; border:1px solid var(--p-line)}
.opp-ref-img{width:100%; height:auto; display:block}
.opp-ref-caption,.opp-ref-tap-hint,.opp-ref-label{
  font-size:var(--p-t-xs); color:var(--p-ink-3); word-spacing:.03em;
}

/* ==========================================================================
   EMPTY / LOADING — say what to do next, never "no data"
   ========================================================================== */
.empty-state,.no-content{
  background:var(--p-surface); border:1px solid var(--p-line);
  border-radius:var(--p-r); padding:30px 22px;
  display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center;
}
.empty-state-title{
  font-size:var(--p-t-h); letter-spacing:.05em; text-transform:uppercase;
  color:var(--p-ink); word-spacing:.02em;
}
.empty-state-body{font-size:var(--p-t-sm); color:var(--p-ink-2); word-spacing:.02em; max-width:40ch; line-height:1.5}

/* ==========================================================================
   LOGIN
   ========================================================================== */
.login-screen{
  min-height:100dvh; min-height:100vh; overflow-y:auto;
  background:var(--p-rail); color:var(--p-rail-ink);
  display:flex; flex-direction:column; justify-content:center;
  padding:40px var(--p-gut) calc(40px + var(--p-safe-b));
}
.login-portal{width:100%; max-width:400px; margin:0 auto; display:flex; flex-direction:column; gap:16px}
.login-logo{width:150px; height:auto; margin-bottom:6px}
.login-tagline{
  font-family:var(--p-display-face); font-size:24px; letter-spacing:.05em;
  text-transform:uppercase; line-height:1.2; color:var(--p-rail-ink);
}
.login-features{
  font-size:var(--p-t-base); color:var(--p-rail-ink-2); line-height:1.6;
  display:flex; flex-direction:column; gap:5px; list-style:none;
}
.login-input{
  width:100%; min-height:50px; padding:0 14px;
  background:var(--p-surface); color:var(--p-ink);
  border:1px solid var(--p-line-2); border-radius:var(--p-r-sm);
  font:inherit; font-size:16px;              /* 16px stops iOS zoom-on-focus */
}
.login-input::placeholder{color:var(--p-ink-4)}
.btn-login{
  width:100%; min-height:50px;
  background:var(--p-rail-ink-2); color:var(--p-unsure-ink);   /* Deepsea on Sky, 11.61:1 */
  border-radius:var(--p-r-sm);
  font-size:var(--p-t-base); letter-spacing:.07em; text-transform:uppercase;
  transition:filter var(--p-fast) var(--p-ease),transform 60ms var(--p-ease);
}
.btn-login:hover{filter:brightness(1.06)}
.btn-login:active{transform:translateY(1px)}
.login-note{font-size:var(--p-t-sm); color:var(--p-rail-ink-2); word-spacing:.02em; line-height:1.5}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lb-scroll{
  position:fixed; inset:0; z-index:50; overflow-y:auto;
  background:rgba(6,13,20,.94); padding:56px 12px calc(24px + var(--p-safe-b));
}
.lb-img{width:100%; height:auto; display:block; margin:0 auto 12px; border-radius:var(--p-r-sm)}
.lb-close{
  position:fixed; top:calc(12px + env(safe-area-inset-top,0px)); right:12px; z-index:51;
  width:44px; height:44px; border-radius:var(--p-r-pill);
  background:rgba(255,255,255,.14); color:#FFFFFF;
  display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1;
}
.lb-close:hover{background:rgba(255,255,255,.24)}

/* ==========================================================================
   HOME — value hierarchy. What Blue Lobster did, not a database.
   ========================================================================== */
.install-banner{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:transparent; border:1px solid var(--p-line); border-radius:var(--p-r);
  padding:10px 14px; margin-top:22px;
}
.install-banner-txt{flex:1 1 200px; min-width:0}
.install-banner-h{font-size:12.5px; font-weight:600; color:var(--p-ink-3)}
.install-banner-b{font-size:12px; color:var(--p-ink-3); margin-top:2px; line-height:1.4}
.install-banner-actions{display:flex; gap:8px; flex:0 0 auto}
.install-banner-actions .btn-ghost, .install-banner-actions .cta-btn, .install-banner .btn-ghost{
  width:auto; min-height:34px; padding:6px 12px; font-size:12.5px;
}

.vip-badge{
  align-self:flex-start; display:inline-flex; align-items:center;
  font-family:var(--p-display-face); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--p-rail-ink); background:var(--p-rail); border:1px solid var(--p-rail-line);
  border-radius:var(--p-r-pill); padding:6px 14px; margin-bottom:-2px;
}
.vip-badge.rw-vip{background:var(--p-accent); border-color:var(--p-accent)}

.value-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.value-card{
  background:var(--p-surface); border:1px solid var(--p-line); border-left:3px solid var(--p-line-2);
  border-radius:var(--p-r); box-shadow:var(--p-e1); padding:14px 14px 13px;
  display:flex; flex-direction:column;
}
.value-card:hover{border-color:var(--p-line-2); box-shadow:var(--p-e2)}
.value-n{font-size:var(--p-t-fig); line-height:1.05}
.value-lab{font-size:13.5px; color:var(--p-ink); font-weight:600; margin-top:4px; line-height:1.25}
.value-cap{font-size:var(--p-t-xs); color:var(--p-ink-3); word-spacing:.03em; margin-top:4px; line-height:1.35}
.vc-reports{border-left-color:var(--p-accent)}
.vc-jobs{border-left-color:var(--p-ink-3)}
.vc-benefit{border-left-color:var(--p-pos)}
.vc-opp{border-left-color:var(--p-accent); background:var(--p-surface-3)}

.cta-row{display:flex; flex-direction:column; gap:9px}
.cta-btn{
  width:100%; min-height:48px; padding:12px 16px; border-radius:var(--p-r);
  font-size:14.5px; font-weight:600; letter-spacing:.01em; text-align:center;
  background:var(--p-surface); color:var(--p-ink); border:1px solid var(--p-line-2);
  box-shadow:var(--p-e1);
}
.cta-btn:hover{border-color:var(--p-ink-4); box-shadow:var(--p-e2)}
.cta-btn:active{transform:translateY(1px)}
.cta-primary{background:var(--p-rail); color:var(--p-rail-ink); border-color:var(--p-rail)}
.cta-primary:hover{background:var(--p-rail-hover)}

/* Home's two regions. Plain stacked flow on a phone — this is a no-op
   below the desktop breakpoint. The real composition lives in the
   "WIDER SCREENS" block below: two columns, not one column stretched. */
.home-grid{display:flex; flex-direction:column; gap:20px}
.home-main{display:flex; flex-direction:column; gap:14px}
.home-side{display:flex; flex-direction:column; gap:14px}

/* ==========================================================================
   GROW WITH BLUE LOBSTER
   ========================================================================== */
/* Fixed 3-column segmented control - always fits, never scrolls. Replaces
   the old .filter-chips row here, which clipped a third option off-screen
   on a 390px phone. .filter-chips/.chip stay as they are for Jobs, where a
   scrolling chip row is the right, expected pattern - this is a different,
   fixed-count control with a different job. */
.grow-segmented{
  display:grid; grid-template-columns:repeat(3,1fr); gap:4px;
  background:var(--p-surface-3); border:1px solid var(--p-line-2); border-radius:var(--p-r);
  padding:4px;
}
.grow-seg{
  min-height:40px; padding:8px 4px; border-radius:var(--p-r-sm);
  font-size:12.5px; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  text-align:center; line-height:1.2; color:var(--p-ink-2); background:transparent; border:0;
}
.grow-seg.active{background:var(--p-surface); color:var(--p-ink); box-shadow:var(--p-e1)}

.grow-panel{
  background:var(--p-surface); border:1px solid var(--p-line); border-radius:var(--p-r);
  padding:16px 15px; display:flex; flex-direction:column; gap:12px;
}
/* The success state (stateBlock()) ships its own card chrome for the
   screens where it stands alone. Inside a grow-panel it would otherwise
   double-box - a card inside a card. Flatten it here instead of forking
   stateBlock() into two versions. */
.grow-panel .state{
  background:none; border:0; box-shadow:none; padding:10px 0 2px;
}
.grow-h{font-family:var(--p-display-face); font-size:17px; letter-spacing:.02em; color:var(--p-ink)}
.grow-b{font-size:14px; line-height:1.55; color:var(--p-ink-2); word-spacing:.02em}
.grow-form{display:flex; flex-direction:column; gap:12px; margin-top:2px}
.grow-field-lab{
  display:flex; flex-direction:column; gap:6px;
  font-size:12.5px; font-weight:600; color:var(--p-ink-2); letter-spacing:.02em;
}
.grow-input{resize:vertical; font-family:inherit; padding-top:12px; padding-bottom:12px}
textarea.grow-input{min-height:64px}
.grow-form-err{
  font-size:13px; color:var(--p-alarm-ink); background:var(--p-alarm-fill);
  border:1px solid var(--p-alarm-edge); border-radius:var(--p-r-sm); padding:9px 12px;
}
.grow-incentive{
  font-size:13px; font-weight:600; color:var(--p-ink-3); background:var(--p-surface-3);
  border:1px solid var(--p-line); border-radius:var(--p-r-sm); padding:9px 12px;
}
.grow-incentive.is-set{color:var(--p-accent); background:var(--p-surface-2); border-color:var(--p-line-2)}
.grow-link-row{display:flex; align-items:center; gap:8px}
.grow-link{
  flex:1; min-width:0; font-size:12.5px; color:var(--p-ink-2); background:var(--p-surface-3);
  border:1px solid var(--p-line); border-radius:var(--p-r-sm); padding:10px 12px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.grow-link-row .btn-ghost{width:auto; margin:0; flex:none; padding-left:16px; padding-right:16px}
.grow-toast{
  text-align:center; font-size:var(--p-t-sm); color:var(--p-pos-ink); background:var(--p-pos-fill);
  border:1px solid var(--p-pos-edge); border-radius:var(--p-r-sm); padding:8px; margin-top:2px;
  opacity:0; transform:translateY(-4px); transition:opacity var(--p-fast) var(--p-ease),transform var(--p-fast) var(--p-ease);
  pointer-events:none;
}
.grow-toast.is-shown{opacity:1; transform:translateY(0)}

/* ==========================================================================
   REPORT VIEWER — contained in-app PDF. Full-screen, own bar, no tab bar:
   the whole point is that Close is always one tap away and nothing here
   ever hands the browser off to its own chrome.
   ========================================================================== */
.report-viewer-screen{background:var(--p-ink)}
.rv-bar{
  flex:none; display:flex; align-items:flex-start; gap:10px;
  background:var(--p-rail); color:var(--p-rail-ink);
  padding:12px var(--p-gut) 12px calc(var(--p-gut) - 6px);
  padding-top:calc(12px + env(safe-area-inset-top,0px));
  border-bottom:1px solid var(--p-rail-line);
}
.rv-close{
  flex:none; display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:52px; min-height:44px; padding:2px 4px; border-radius:var(--p-r-sm);
  color:var(--p-rail-ink-2); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
}
.rv-close:hover,.rv-close:active{color:var(--p-rail-ink); background:var(--p-rail-hover)}
.rv-bar-text{flex:1; min-width:0; padding-top:2px}
.rv-bar-title{
  font-family:var(--p-display-face); font-size:15px;
  letter-spacing:.02em; color:var(--p-rail-ink);
  line-height:1.3; overflow-wrap:anywhere;
}
.rv-bar-sub{
  font-size:var(--p-t-xs); color:var(--p-rail-ink-2); word-spacing:.02em;
  margin-top:2px; overflow-wrap:anywhere;
}
.rv-bar-actions{flex:none; display:flex; gap:4px}
.rv-act{
  width:44px; height:44px; border-radius:var(--p-r-sm);
  display:flex; align-items:center; justify-content:center;
  color:var(--p-rail-ink-2);
}
.rv-act:hover,.rv-act:active{color:var(--p-rail-ink); background:var(--p-rail-hover)}
.rv-body{flex:1; position:relative; background:#525659; overflow:hidden}
/* Contained PDF.js canvas pages, not a bare iframe - see
   ensureReportPdfRendered() in app.js for why. */
.rv-pdf-scroll{
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.rv-pdf-pages{display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px 0 28px}
.rv-pdf-page{display:block; max-width:100%; height:auto; background:#FFFFFF; box-shadow:0 1px 6px rgba(0,0,0,.4)}
.rv-spinner{
  position:absolute; top:50%; left:50%; width:34px; height:34px; margin:-17px 0 0 -17px;
  border-radius:50%; border:3px solid rgba(255,255,255,.22); border-top-color:#FFFFFF;
  animation:rv-spin .8s linear infinite; z-index:1;
}
@keyframes rv-spin{to{transform:rotate(360deg)}}
.rv-body .state{background:var(--p-surface-2); min-height:100%; padding:40px 20px}

/* ==========================================================================
   TAPPABLE — one consistent affordance
   ========================================================================== */
.tappable{cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none}
.tappable:active{transform:scale(.995)}

/* ==========================================================================
   WIDER SCREENS — the phone layout is the design; desktop just centres it
   ========================================================================== */
@media (min-width:600px){
  :root{--p-gut:22px}
  .screen-content{max-width:680px; width:100%; margin:0 auto; padding-bottom:36px}
  .screen-header{align-items:stretch}
  .screen-header>*{max-width:680px; width:100%; margin-inline:auto}
  .tab-bar{max-width:680px; margin-inline:auto; width:100%}
  .hero-n{font-size:48px}
}
@media (min-width:900px){
  .duo{grid-template-columns:1fr 1fr}
  .screen-content{max-width:760px}
  .screen-header>*,.tab-bar{max-width:760px}
}

/* ==========================================================================
   HOME — DESKTOP COMPOSITION
   Not the phone layout centred: a real two-region canvas. Left region
   (value cards + CTAs) gets a wider grid and larger type; right region
   (recent activity) becomes a standing side panel instead of a fourth
   thing to scroll past. Scoped to .screen-home only — every other screen
   keeps the single centred column above, on purpose; this pass only
   asked for Home.
   ========================================================================== */
@media (min-width:960px){
  .screen-home .screen-content,
  .screen-home .screen-header>*,
  .screen-home .tab-bar{max-width:1180px}
  .screen-home .home-grid{
    display:grid; grid-template-columns:1.5fr 1fr; gap:32px; align-items:start;
  }
  .screen-home .home-main{gap:22px}
  .screen-home .home-side{
    gap:14px; position:sticky; top:calc(var(--p-gut));
    background:var(--p-surface); border:1px solid var(--p-line); border-radius:var(--p-r);
    box-shadow:var(--p-e1); padding:18px 20px 20px;
  }
  .screen-home .vip-badge{font-size:13.5px; padding:8px 18px}
  .screen-home .value-grid{grid-template-columns:repeat(4,1fr); gap:16px}
  .screen-home .value-card{padding:22px 20px 20px}
  .screen-home .value-n{font-size:44px}
  .screen-home .value-lab{font-size:15.5px}
  .screen-home .value-cap{font-size:13px}
  .screen-home .cta-row{flex-direction:row; gap:12px}
  .screen-home .cta-btn{width:auto; flex:1 1 0; min-height:58px; font-size:15.5px}
  /* The side panel gets real breathing room too, not just a taller box
     around the same four small rows - larger type, more generous card
     padding, so it reads as a standing panel, not a leftover list. */
  .screen-home .mini-event{padding:16px 18px}
  .screen-home .mini-event-detail{font-size:15.5px}
  .screen-home .mini-event-meta{font-size:13px}
  .screen-home .sec-hd{font-size:13.5px}
  .screen-home .hdr-home .hdr-title{font-size:26px}
  .screen-home .hdr-account{font-size:13.5px}
}
@media (min-width:1180px){
  .screen-home .screen-content,
  .screen-home .screen-header>*,
  .screen-home .tab-bar{max-width:1320px}
}

/* The home header ships a bare <img> with no class — constrain it.
   The script mark is the LOGO ARTWORK, not the Vintage Goods text face,
   so it is allowed here. One logo per surface. */
.screen-header img{display:block; width:auto; height:26px; max-width:190px; margin-bottom:7px}
.hdr-home img{height:32px; max-width:210px}

/* Wide screens: pad the header in so its children align with the content
   column, instead of centring each child independently (which floated the
   logo to the middle while the title stayed left). */
@media (min-width:600px){
  .screen-header{padding-inline:max(var(--p-gut), calc((100% - 760px)/2))}
  .screen-header>*{max-width:none; width:auto; margin-inline:0}
}

/* statusPill() nests .pill-dots INSIDE the pill, so they are one component,
   not two colliding ones. The dots take the pill's own ink so a completed job
   reads green all the way through and a late one reads claret. */
.status-pill{gap:8px; padding:0 11px; min-height:23px}
.pill-dot.filled{background:currentColor; border-color:currentColor}
.pill-dot.faded{background:transparent; border-color:currentColor; opacity:.38}

/* .filter-chips is a flex item in a column flex container and was collapsing
   to 2px. Pin it. */
.filter-chips{flex:none; min-height:38px; align-items:center}
.screen-content>.sec-hd,.screen-content>.day-label{flex:none}

/* .tl-marker ships a check glyph inside an 11px dot, which overflowed and
   read as a map pin. Suppress the glyph; the filled dot is the signal and
   the label beside it carries the meaning. */
.tl-marker{font-size:0; line-height:0; overflow:hidden; color:transparent}

/* Phone tab bar. Measured: REFERRALS sets the width at 71px with .06em
   tracking, against a 70px usable cell on a 390px screen — it wraps.
   Type stays at the 11.5px floor; the tracking and padding give way. */
@media (max-width:599px){
  .tab-item{letter-spacing:.02em; padding-inline:2px; white-space:nowrap}
  .tab-item svg{width:20px;height:20px}
}


/* ==========================================================================
   PHONE FIXES — from real-device testing on iOS Safari
   ========================================================================== */

/* 1. THE SCROLL LOCK AND THE MISSING TAB BAR.
      Two bugs, one shape.
      a) 100vh on iOS is the LARGE viewport — taller than what you can see —
         so the fixed tab bar sat under Safari's toolbar. dvh has to win, so
         it goes last.
      b) A flex item that scrolls needs min-height:0. Without it the item's
         min-height resolves to its content, the pane can never shrink, so it
         never scrolls and the page just grows off the bottom instead. */
.screen{height:100vh; height:100dvh}
.screen-content{flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch}

/* 2. Nothing inside the scroller may be squeezed. This is what clipped the
      ON SITE row on #6058 and collapsed the filter chips to 2px earlier —
      same cause, so fix the class of bug, not each instance. */
.screen-content>*{flex:none}

/* 3. The milestone dots are spans containing a BLACK SQUARE glyph. The glyph,
      not the box, was drawing the tombstone shape. Kill the glyph and let the
      box be the dot. */
.pill-dot{
  display:block; flex:0 0 auto;
  width:8px; height:8px; border-radius:999px;
  font-size:0; line-height:0; color:transparent; overflow:hidden;
  box-sizing:border-box;
}

/* 4. Logo. Two different lockups were being served and both sat off-axis
      against the title. One logo per surface: Home keeps the mark, inner
      screens are already identified by their title and back button. */
.screen-header:not(.hdr-home) img{display:none}
.hdr-home img{height:30px; max-width:200px; margin:0 0 9px -2px}

/* 5. Strip labels wrap to two lines unevenly, so the figures landed on
      different baselines. Reserve two lines for all three. */
.strip-label{min-height:2.5em; display:flex; align-items:flex-start}

/* 6. LATE and ACTION_REQUIRED no longer read as alarms, so they must not be
      coloured as alarms. Claret is reserved for genuine alarm. */
.status-LATE,.status-ACTION_REQUIRED{
  background:var(--p-unsure-fill); color:var(--p-unsure-ink); border-color:var(--p-unsure-edge);
}


/* Tappable strip tiles. They are real controls now, so they get a real
   affordance and a real hit area. */
.strip-item{
  cursor:default; position:relative;
  transition:background var(--p-fast) var(--p-ease);
}
.strip-item.tappable{cursor:pointer; min-height:66px}
.strip-item.tappable:hover{background:var(--p-surface-2)}
.strip-item.tappable:active{background:var(--p-surface-3)}
.strip-item.tappable:focus-visible{outline:2px solid var(--p-accent); outline-offset:-2px}

/* Home header now leads with the partner name, which is longer than "HOME"
   and must be allowed to wrap without shoving the logo around. */
.hdr-home .hdr-title{font-size:20px; line-height:1.2; overflow-wrap:anywhere}


/* ==========================================================================
   PHASE 2 — FIRST IMPRESSION
   Boot state, authentication gate, and the failure screens behind them.
   All of this is presentation for markup that auth.js owns; no auth logic
   lives here.
   ========================================================================== */

/* --- BOOT -----------------------------------------------------------------
   Rendered inline in index.html so the very first paint is Blue Lobster
   rather than white. It is removed the moment a gate or the app takes over. */
.boot{
  position:fixed; inset:0; z-index:9998;
  background:var(--p-rail);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:26px; padding:32px;
  opacity:1; transition:opacity .28s var(--p-ease);
}
.boot-done{opacity:0; pointer-events:none}
.boot-logo{width:190px; max-width:62%; height:auto}
.boot-bar{
  width:132px; height:2px; border-radius:2px;
  background:rgba(173,204,224,.18); overflow:hidden;
}
.boot-bar span{
  display:block; width:40%; height:100%; border-radius:2px;
  background:var(--p-rail-ink-2);
  animation:boot-slide 1.15s var(--p-ease) infinite;
}
@keyframes boot-slide{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(350%)}
}
@media (prefers-reduced-motion:reduce){
  .boot-bar span{animation:none; width:100%; opacity:.5}
}

/* --- GATE SHELL -----------------------------------------------------------
   One scrolling pane. The gate must survive a 320px phone in landscape and a
   software keyboard eating half the viewport, so it scrolls rather than
   centring into a fixed box that can clip the sign-in field. */
.bl-gate-shell{
  position:fixed; inset:0; z-index:9999;
  background:var(--p-rail);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.gate{
  position:relative;
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
  padding:clamp(40px,9vh,88px) var(--p-gut) calc(20px + var(--p-safe-b));
}
/* A single soft light source behind the mark. Not a gradient wash - it is
   there to stop the dark field reading as flat, and nothing else. */
.gate-glow{
  position:absolute; top:-14%; left:50%; transform:translateX(-50%);
  width:min(560px,140%); aspect-ratio:1;
  background:radial-gradient(circle,rgba(173,204,224,.13) 0%,rgba(173,204,224,0) 62%);
  pointer-events:none;
}
.gate-body{
  position:relative;
  width:100%; max-width:392px; margin:0 auto;
  flex:1 1 auto;
  display:flex; flex-direction:column; justify-content:center;
}
.gate-logo{width:172px; max-width:56%; height:auto; display:block; margin-bottom:30px}
.gate-eyebrow{
  font-size:var(--p-t-xs); letter-spacing:.16em; text-transform:uppercase;
  color:var(--p-rail-ink-2); word-spacing:.02em; margin-bottom:10px;
}
.gate-title{
  font-family:var(--p-display-face);
  font-size:26px; line-height:1.18; font-weight:600; letter-spacing:-.005em;
  color:var(--p-rail-ink); margin-bottom:12px;
  text-wrap:balance;
}
.gate-sub{
  font-size:var(--p-t-base); line-height:1.55;
  color:rgba(255,255,255,.62); max-width:34ch; margin-bottom:30px;
}
/* The sign-in widget gets a real container so it reads as part of the product
   instead of a third-party box dropped onto a background. */
.gate-card{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.13);
  border-radius:10px;
  padding:20px 18px;
}
.gate-card .cl-rootBox,.gate-card .cl-card{width:100%}
/* Clerk's phone field reserves a country-control segment on the left. Centering
   the remaining input alone therefore appears shifted right; matching that
   reserved width on the right centers the entered number across the full box. */
.gate-card .cl-phoneInputInput,
.gate-card input[type="tel"]{
  text-align:center!important;
  padding-right:52px!important;
}

.gate-actions{display:flex; flex-direction:column; gap:10px; margin-top:4px}
.gate-btn,.gate-btn-ghost{
  width:100%; min-height:48px; border-radius:var(--p-r);
  font-family:inherit; font-size:13px; letter-spacing:.05em; text-transform:uppercase;
  font-weight:600; cursor:pointer;
  transition:filter var(--p-fast) var(--p-ease), background var(--p-fast) var(--p-ease);
}
.gate-btn{background:var(--p-rail-ink-2); color:#0B1B24; border:1px solid var(--p-rail-ink-2)}
.gate-btn:active{filter:brightness(.94)}
.gate-btn-ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3)}
.gate-btn-ghost:active{background:rgba(255,255,255,.07)}

.gate-foot{
  position:relative;
  width:100%; max-width:392px; margin:34px auto 0;
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  padding-top:16px; border-top:1px solid rgba(255,255,255,.1);
  font-size:var(--p-t-sm); line-height:1.5; color:rgba(255,255,255,.6);
  word-spacing:.02em;
}
.gate-foot-badge{
  display:inline-block; padding:3px 8px; border-radius:var(--p-r-pill);
  background:rgba(173,204,224,.12); border:1px solid rgba(173,204,224,.26);
  color:var(--p-rail-ink-2);
  font-size:var(--p-t-xs); letter-spacing:.1em; text-transform:uppercase;
}

/* Short viewports (landscape phones): tighten, never centre-and-clip. */
@media (max-height:600px){
  .gate{padding-top:28px}
  .gate-logo{width:140px; margin-bottom:20px}
  .gate-title{font-size:22px}
  .gate-sub{margin-bottom:20px}
}


/* ==========================================================================
   PHASE 2 — SCREENS
   Skeletons, empty/error states, job cards, report cards, home job rows.
   ========================================================================== */

/* --- SKELETONS ------------------------------------------------------------
   Drawn at the final dimensions of what they replace so nothing jumps when
   real content arrives. */
.sk{
  position:relative; overflow:hidden;
  background:var(--p-surface-3); border-radius:var(--p-r-sm);
}
.sk::after{
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  animation:sk-sweep 1.3s var(--p-ease) infinite;
}
@keyframes sk-sweep{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){ .sk::after{animation:none} }
.sk-line{display:block}
.sk-fig{display:inline-block; width:34px; height:30px; vertical-align:-4px}
.sk-card{pointer-events:none}
.sk-card > .sk-line + .sk-line{margin-top:2px}

/* --- EMPTY / ERROR --------------------------------------------------------
   One component. A mark, a plain-English title, one sentence of what happens
   next, and an action only when there is genuinely something to tap. */
.state{
  background:var(--p-surface); border:1px solid var(--p-line);
  border-radius:var(--p-r); box-shadow:var(--p-e1);
  padding:30px 22px 26px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px;
}
.state-mark{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; margin-bottom:3px;
  border-radius:var(--p-r-pill);
  background:var(--p-surface-3); color:var(--p-accent);
}
.state-mark:empty{display:none}
.state-title{
  font-size:var(--p-t-h); line-height:1.3; color:var(--p-ink);
  letter-spacing:-.004em;
}
.state-body{
  font-size:var(--p-t-sm); line-height:1.55; color:var(--p-ink-2);
  word-spacing:.02em; max-width:38ch;
}
.state .btn-view,.state .btn-ghost{margin-top:9px; width:100%; max-width:260px}

/* --- JOB CARD -------------------------------------------------------------
   Not every line is equal any more: property is the headline, status is read
   without reading, and the completed job form gets its own affordance. */
.job-card{gap:7px; padding:14px 15px 13px}
/* The pill sits on its own row rather than beside the property. Pill widths
   swing from "TODAY" to "WITH BLUE LOBSTER", so sharing a row meant it sat
   inline on short names and wrapped on long ones - the rhythm broke card to
   card and read as a bug. One row each, always. */
.job-card-top{display:block}
.job-prop{
  display:block; font-size:17px; font-weight:600; letter-spacing:-.006em;
  line-height:1.25; margin-bottom:8px;
}
.job-card .status-pill{align-self:flex-start}
.job-meta{color:var(--p-ink-2)}
.job-foot{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding-top:8px; margin-top:1px; border-top:1px solid var(--p-line);
}
.job-foot .job-num{padding-top:0; color:var(--p-ink-3)}

/* The deliverable. Reads as an action, not as a label. */
.job-form-strip{
  display:flex; align-items:center; gap:9px;
  min-height:44px; margin-top:3px; padding:0 12px;
  border-radius:var(--p-r-sm);
  background:var(--p-surface-3); border:1px solid #C3DAE6;
  color:var(--p-accent); cursor:pointer;
  transition:background var(--p-fast) var(--p-ease),border-color var(--p-fast) var(--p-ease);
}
.job-form-strip:hover{background:#DFEEF5; border-color:var(--p-accent)}
.job-form-strip:active{background:#D3E6F0}
.job-form-strip:focus-visible{outline:2px solid var(--p-accent); outline-offset:2px}
.jfs-mark{display:flex; flex:none; align-items:center}
.jfs-mark svg{width:19px; height:19px}
.jfs-text{
  flex:1 1 auto; font-size:var(--p-t-sm); letter-spacing:.04em;
  text-transform:uppercase; word-spacing:.03em; font-weight:600;
}
.jfs-go{
  flex:none; font-size:var(--p-t-sm); letter-spacing:.04em; text-transform:uppercase;
  word-spacing:.03em; opacity:.85;
}
.jfs-go::after{content:' \203A'; font-size:15px; line-height:1}

/* --- HOME JOB ROWS --------------------------------------------------------
   Compact form of the same job, for the Home command-center list. */
/* --- HOME JOB ROWS --------------------------------------------------------
   PHASE 3 — JROW. Two explicit rows. The property gets the full width of the
   first row so it stops being truncated by a status pill sitting beside it. */
.jrow{
  display:flex; flex-direction:column; gap:7px;
  background:var(--p-surface); border:1px solid var(--p-line);
  border-radius:var(--p-r); box-shadow:var(--p-e1);
  padding:12px 13px; cursor:pointer;
  transition:border-color var(--p-fast) var(--p-ease),box-shadow var(--p-fast) var(--p-ease);
}
.jrow:hover{border-color:var(--p-line-2); box-shadow:var(--p-e2)}
.jrow:active{background:var(--p-surface-2)}
.jrow:focus-visible{outline:2px solid var(--p-accent); outline-offset:2px}
.jrow-l1{display:flex; align-items:baseline; gap:10px}
.jrow-l2{display:flex; align-items:center; justify-content:space-between; gap:10px}
.jrow-prop{
  flex:1 1 auto; min-width:0;
  font-size:var(--p-t-base); font-weight:600; color:var(--p-ink);
  letter-spacing:-.004em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.jrow-when{flex:none; font-size:var(--p-t-sm); color:var(--p-ink-2); word-spacing:.02em}
.jrow-meta{
  flex:1 1 auto; min-width:0;
  font-size:var(--p-t-sm); color:var(--p-ink-3); word-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.jrow .status-pill{flex:none}

/* --- REPORT CARD ----------------------------------------------------------
   A filed document, not an attachment. */
.report-card{
  padding:15px; gap:10px;
  border-left:3px solid var(--p-accent);
}
.report-card-head{display:flex; align-items:flex-start; gap:11px}
.report-mark{
  display:flex; flex:none; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:var(--p-r-sm);
  background:var(--p-surface-3); color:var(--p-accent);
}
.report-mark svg{width:21px; height:21px}
.report-card-headtext{min-width:0; display:flex; flex-direction:column; gap:3px}
.report-card-prop{font-weight:600; letter-spacing:-.006em}
.report-card-btns .btn-view{width:100%}

/* --- HOLDING SCREEN -------------------------------------------------------
   Stand-in for the old mock login. Never a form. */
.hold{
  min-height:100vh; min-height:100dvh;
  background:var(--p-rail);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  padding:32px;
}
.hold-logo{width:190px; max-width:62%; height:auto}


/* ==========================================================================
   PARTNER REWARDS — display only. No value here is derived in the browser.

   Rewards runs on Rare Blue #3D6180 [SPEC] rather than the Nautical rail, so
   the card reads as its own feature instead of a third navy panel stacked
   under the header and Active Jobs. Rare Blue is the product layer's declared
   accent; nothing new was invented.

   Text on it is White (6.52:1, an approved pairing). Sky is NOT used as text
   here - Sky on Rare Blue measures 3.88:1 and the guidelines list it as a
   patterns-and-lines pairing only. It survives as the VIP hairline, which is
   a line.
   ========================================================================== */
:root{
  --p-rw:#3D6180;                       /* Rare Blue [SPEC] */
  --p-rw-ink:#FFFFFF;                   /* 6.52:1 */
  --p-rw-ink-2:rgba(255,255,255,.84);   /* 5.18:1 measured over Rare Blue */
  --p-rw-ink-3:rgba(255,255,255,.80);   /* 4.85:1 - floor for anything readable */
  --p-rw-line:rgba(255,255,255,.22);
  --p-rw-hover:#365777;
}
.rw-home{
  background:var(--p-rw); color:var(--p-rw-ink);
  border-radius:var(--p-r); padding:16px 15px 14px; box-shadow:var(--p-e2);
  display:flex; flex-direction:column; gap:10px; cursor:pointer; position:relative; overflow:hidden;
  border:1px solid var(--p-rw-line);
}
.rw-home::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 92% -10%,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 60%);
}
.rw-home:active{background:var(--p-rw-hover)}
.rw-home:focus-visible{outline:2px solid var(--p-rw-ink); outline-offset:2px}
.rw-eyebrow{
  position:relative; font-size:var(--p-t-xs); letter-spacing:.16em; text-transform:uppercase;
  color:var(--p-rw-ink-2); word-spacing:.02em;
}
.rw-tier{
  position:relative; font-family:var(--p-display-face);
  font-size:24px; line-height:1.15; font-weight:600; letter-spacing:-.006em;
}
.rw-summary{position:relative; font-size:var(--p-t-sm); line-height:1.5; color:var(--p-rw-ink-3); word-spacing:.02em}
.rw-track{position:relative; display:flex; flex-direction:column; gap:5px; margin-top:2px}
.rw-track-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.rw-track-lab{font-size:var(--p-t-sm); color:var(--p-rw-ink-3); word-spacing:.02em}
.rw-track-n{font-size:var(--p-t-h); font-weight:600}
.rw-bar{height:5px; border-radius:999px; background:rgba(255,255,255,.24); overflow:hidden}
/* Sky on Rare Blue is a patterns-and-lines pairing - banned as text, correct
   for a rule. A solid white bar was the loudest thing on the card. */
.rw-bar span{display:block; height:100%; border-radius:999px; background:var(--p-rail-ink-2)}
.rw-track-foot{font-size:var(--p-t-xs); color:var(--p-rw-ink-2); letter-spacing:.04em;
  text-transform:uppercase; word-spacing:.03em}
.rw-top{opacity:.8}
.rw-note{position:relative; font-size:var(--p-t-sm); color:var(--p-rw-ink-2); word-spacing:.02em}
.rw-cta{
  position:relative; margin-top:4px; align-self:flex-start;
  font-size:var(--p-t-sm); letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  color:var(--p-rw-ink); word-spacing:.03em;
}
.rw-cta::after{content:' \203A'; font-size:15px}
/* VIP gets a warmer edge. Status should feel earned, not gamified - one hairline,
   no badges, no points, no leaderboard. */
.rw-home.rw-vip{border-color:var(--p-rail-ink-2)}

.rw-hero{
  background:var(--p-rw); color:var(--p-rw-ink); border-radius:var(--p-r);
  padding:22px 18px; box-shadow:var(--p-e2); position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:8px; border:1px solid var(--p-rw-line);
}
.rw-hero::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 88% -15%,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 62%)}
.rw-hero.rw-vip{border-color:var(--p-rail-ink-2)}
.rw-hero-tier{position:relative; font-family:var(--p-display-face); font-size:29px;
  line-height:1.12; font-weight:600; letter-spacing:-.008em}
.rw-hero-sum{position:relative; font-size:var(--p-t-base); line-height:1.5;
  color:var(--p-rw-ink-2); word-spacing:.02em; max-width:36ch}

.rw-ways{background:var(--p-surface); border:1px solid var(--p-line); border-radius:var(--p-r);
  box-shadow:var(--p-e1); padding:16px 15px; display:flex; flex-direction:column; gap:12px}
.rw-ways-hd{font-size:var(--p-t-h); color:var(--p-ink); letter-spacing:-.004em}
.rw-way-t{font-size:var(--p-t-base); font-weight:600; color:var(--p-ink); margin-bottom:3px}
.rw-way-b{font-size:var(--p-t-sm); line-height:1.55; color:var(--p-ink-2); word-spacing:.02em}
.rw-way-note{font-size:var(--p-t-sm); line-height:1.5; color:var(--p-ink-3); word-spacing:.02em;
  padding-top:10px; border-top:1px solid var(--p-line)}

.rw-block{background:var(--p-surface); border:1px solid var(--p-line); border-radius:var(--p-r);
  box-shadow:var(--p-e1); padding:15px; display:flex; flex-direction:column; gap:2px}
.rw-block-hd{font-size:var(--p-t-h); color:var(--p-ink); letter-spacing:-.004em}
.rw-block-sub{font-size:var(--p-t-sm); color:var(--p-ink-3); word-spacing:.02em; margin-bottom:9px}
.rw-kv{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 0; border-top:1px solid var(--p-line); font-size:var(--p-t-sm)}
.rw-kv span{color:var(--p-ink-2); word-spacing:.02em}
.rw-kv b{color:var(--p-ink); font-weight:600; text-align:right}
.rw-kv-strong b{font-size:var(--p-t-h)}
.rw-benefits{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:9px}
.rw-benefits li{position:relative; padding-left:20px; font-size:var(--p-t-sm);
  line-height:1.5; color:var(--p-ink); word-spacing:.02em}
.rw-benefits li::before{
  content:''; position:absolute; left:2px; top:.5em; width:7px; height:7px;
  border-radius:999px; background:var(--p-accent);
}

/* Benefits as a checkmark grid - earned value read at a glance. */
.rw-benefit-grid{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:11px}
.rw-benefit-item{
  display:flex; align-items:flex-start; gap:10px;
  font-size:14.5px; line-height:1.4; color:var(--p-ink); word-spacing:.02em; font-weight:500;
}
.rw-benefit-check{
  flex:none; width:20px; height:20px; border-radius:999px; margin-top:1px;
  background:var(--p-pos-fill); color:var(--p-pos-ink); border:1px solid var(--p-pos-edge);
  display:flex; align-items:center; justify-content:center; font-size:11px;
}

/* Free detections / pending rewards - pulled out of dense kv rows into their
   own stat cards so earned value is the first thing the eye lands on. */
.rw-perk-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.rw-perk-card{
  background:var(--p-surface); border:1px solid var(--p-line); border-left:3px solid var(--p-pos);
  border-radius:var(--p-r); box-shadow:var(--p-e1); padding:14px;
  display:flex; flex-direction:column;
}
.rw-perk-money{border-left-color:var(--p-accent)}
.rw-perk-n{font-size:26px; line-height:1.1}
.rw-perk-lab{font-size:12.5px; font-weight:600; color:var(--p-ink); margin-top:3px; line-height:1.3}
.rw-perk-cap{font-size:var(--p-t-xs); color:var(--p-ink-3); margin-top:3px}

/* What you unlock next - one line per real, numbered distance to a real
   reward. Never rendered for a track already at its top tier. */
.rw-unlock{gap:10px}
.rw-unlock-row{
  display:flex; align-items:baseline; gap:10px; padding:8px 0;
  border-top:1px solid var(--p-line);
}
.rw-unlock-row:first-of-type{border-top:0; padding-top:2px}
.rw-unlock-n{flex:none; font-size:20px; min-width:1.6em}
.rw-unlock-b{font-size:13.5px; color:var(--p-ink-2); line-height:1.4; word-spacing:.02em}
.rw-unlock-b b{color:var(--p-ink)}

.rw-ways-strip{display:flex; flex-direction:column; gap:8px; margin-top:2px}
.rw-way-compact{font-size:13px; line-height:1.5; color:var(--p-ink-2); word-spacing:.02em}
.rw-way-compact b{color:var(--p-ink)}


/* --- Lifetime milestones. Cumulative, permanent, not a tier. ------------- */
.rw-life-big{display:flex; align-items:baseline; gap:9px; padding:4px 0 12px}
.rw-life-n{font-family:var(--p-display-face); font-size:34px; line-height:1;
  font-weight:600; letter-spacing:-.01em; color:var(--p-accent)}
.rw-life-lab{font-size:var(--p-t-sm); color:var(--p-ink-2); word-spacing:.02em}

/* "41 / 50" toward the next milestone, with a real bar - not the dark
   .rw-bar (built for the tier hero card), a light-surface version that
   reads correctly on .rw-life's white card. Two seconds: earned, unlock
   next, how close. */
.rw-life-bar-wrap{padding:0 0 14px}
.rw-life-bar-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:6px}
.rw-life-frac{font-size:19px; font-weight:600; color:var(--p-ink)}
.rw-life-frac-of{font-size:14px; font-weight:400; color:var(--p-ink-3)}
.rw-life-bar-goal{font-size:var(--p-t-xs); color:var(--p-ink-3); letter-spacing:.02em; white-space:nowrap}
.rw-life-bar-wrap .rw-bar{height:7px; background:var(--p-surface-3); border:1px solid var(--p-line)}
.rw-life-bar-wrap .rw-bar span{background:var(--p-accent)}
.rw-msline{list-style:none; display:flex; margin:0; padding:0 0 4px; gap:6px}
.rw-ms{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:9px 2px 8px; border-radius:10px; border:1px solid var(--p-line);
  background:var(--p-surface-2);
}
.rw-ms-n{font-size:var(--p-t-base); font-weight:600; color:var(--p-ink-3); letter-spacing:-.004em}
.rw-ms-a{font-size:var(--p-t-xs); color:var(--p-ink-3); letter-spacing:.02em}
/* Earned steps carry the accent as a fill; the next step only outlines it.
   Everything past it stays neutral, so the colour marks progress instead of
   decorating the row. */
.rw-ms.is-done{background:var(--p-rw); border-color:var(--p-rw)}
.rw-ms.is-done .rw-ms-n{color:var(--p-rw-ink)}
.rw-ms.is-done .rw-ms-a{color:var(--p-rw-ink-2)}
.rw-ms.is-done .rw-ms-n::after{content:' \2713'; font-size:11px; color:var(--p-rw-ink)}
.rw-ms.is-next{border-color:var(--p-accent); box-shadow:inset 0 0 0 1px var(--p-accent)}
.rw-ms.is-next .rw-ms-n{color:var(--p-accent)}
.rw-ms.is-next .rw-ms-a{color:var(--p-ink-2)}
.rw-next{display:flex; flex-direction:column; gap:2px; padding:11px 0 0; border-top:1px solid var(--p-line)}
.rw-next-lab{font-size:var(--p-t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--p-ink-3)}
.rw-next-val{font-size:var(--p-t-sm); color:var(--p-ink); word-spacing:.02em}
.rw-choices{font-size:var(--p-t-sm); line-height:1.5; color:var(--p-ink-3);
  word-spacing:.02em; padding-top:10px}


/* =========================================================
   FIVE-TAB BAR
   The bar was built for four labels. "Opportunities" is thirteen characters
   and, at the old size, pushed the grid wider than the phone and clipped
   "Rewards" clean off the right edge. Equal columns are kept - a nav where one
   tab is visibly bigger reads as one tab being more important - and the type
   steps down instead. min-width:0 stops a long word from forcing the column
   wider than its 1fr share ever again.
   ========================================================= */
.tab-bar{ --p-t-xs:9.5px }
.tab-item{
  min-width:0; white-space:nowrap; letter-spacing:.02em; padding:9px 2px 10px;
}

/* Narrow phones (360px and below) need one more step down, or the longest
   label overruns its column again. */
@media (max-width:379px){ .tab-bar{ --p-t-xs:9px } }

/* =========================================================
   OPPORTUNITIES
   Deliberately NOT Rare Blue. Rare Blue is frozen as the Rewards accent, and
   two features wearing the same accent is how a colour stops meaning anything.
   Opportunities uses the neutral card surface already in the system, with the
   category chip carrying the only emphasis.
   ========================================================= */

/* Side by side, the sentence got squeezed into three ragged lines next to the
   link. Stacked, it reads as one line of news with an action under it. */
.opp-home{
  display:block;
  background:var(--p-surface);border:1px solid var(--p-line);border-radius:var(--p-r);box-shadow:var(--p-e1);
  border-left:3px solid var(--p-ink);
  padding:14px 16px;margin-bottom:14px;
}
.opp-home-n{font-size:15px;line-height:1.35;color:var(--p-ink)}
.opp-home-n .fig{font-size:17px;font-weight:600}
.opp-home-go{
  margin-top:8px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--p-ink-2);white-space:nowrap;
}

.opp-handback{
  font-size:13px;line-height:1.5;color:var(--p-ink-2);
  margin:0 0 12px;
}

/* The legacy .ref-row/.opp-card/.referral-block rule higher up makes this a
   flex column with a 6px gap, which stretched the category chip to full width
   and fought the per-element spacing below. Back to block flow: the margins in
   this section then mean exactly what they say. */
.opp-card{
  display:block;
  background:var(--p-surface);border:1px solid var(--p-line);
  border-radius:var(--p-r);box-shadow:var(--p-e1);
  padding:16px;margin-bottom:12px;
}
.opp-card.is-closed{opacity:.62}

.opp-cat{
  display:inline-block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--p-ink-2);border:1px solid var(--p-line-2);border-radius:999px;
  padding:4px 10px;margin-bottom:10px;
}
.opp-prop{font-size:16px;font-weight:600;color:var(--p-ink);line-height:1.3}
.opp-summary{font-size:17px;font-weight:600;line-height:1.35;color:var(--p-ink)}
.opp-found{font-size:12.5px;color:var(--p-ink-3);margin-top:6px;word-spacing:.02em}
.opp-addr{font-size:12.5px;color:var(--p-ink-3);margin-top:2px}

.opp-field-label{
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--p-ink-3);margin-top:12px;
}
.opp-field-val{font-size:14px;line-height:1.5;color:var(--p-ink-2);margin-top:3px}

.opp-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--p-line);
}
.opp-meta{font-size:12px;color:var(--p-ink-3)}
.opp-state{
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--p-ink-3);
}
.opp-status-tag{
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;
  padding:4px 10px;border:1px solid transparent;
}
.opp-status-tag.is-open{background:var(--p-unsure-fill);color:var(--p-unsure-ink);border-color:var(--p-unsure-edge)}
.opp-status-tag.is-closed{background:var(--p-surface-3);color:var(--p-ink-3);border-color:var(--p-line-2)}
.opp-card-btns{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
/* Both button styles carry width:100%, so flex-basis:auto made each one claim
   the whole row and wrap. Basis 0 lets them share it. */
.opp-card-btns .btn-ghost,.opp-card-btns .btn-view{margin:0;width:auto;flex:1 1 0;min-width:132px}