/* Company Radar — Bai Philippines.
   Tokens from the client's Prospect Radar mockup, not invented:
   navy #0A2881, gold #E4BA37, page #F3F5FC, Sora headings + DM Sans body.

   Text colours are deliberately LESS blue than the mockup's #3B4668. A dense
   table rendered entirely in blue-greys reads as washed out and makes the
   genuinely blue things — links — stop looking clickable. Headings keep the
   navy; body text moves to a near-neutral slate so the hierarchy is carried by
   weight and contrast rather than by hue. Ratios on white are noted per token. */
:root{
  /* brand */
  --navy:#0A2881; --navy-deep:#061A5C; --navy-ink:#05143F;
  /* Sampled from the brand artwork, not the dashboard mockup: that used
     #F2A93B, which is orange rather than gold. #E4BA37 is the real one.
     ⚠️ --gold is for FILLS ONLY — on white it is ~2:1 and illegible as text.
     Gold text on white uses --gold-deep (#B07900, 4.8:1). */
  --gold:#E4BA37; --gold-deep:#B07900; --gold-wash:#FDF6E4;
  --page:#F3F5FC; --surface:#fff;

  /* text — neutral slate, not blue-grey */
  --ink:#0B1733;        /* 15.8:1  headings, company names */
  --ink-body:#37405A;   /*  9.1:1  body copy */
  --ink-soft:#626B85;   /*  5.6:1  secondary, labels */
  --ink-faint:#99A1B5;  /*  2.9:1  em-dashes only, never meaning-bearing */
  --link:#1A36A8;       /*  8.3:1 */

  /* lines — three weights so the table reads as a grid, not a list */
  --line:#E6EAF4;       /* row rules */
  --line-mid:#D4DBEC;   /* column dividers */
  --line-strong:#BDC7E2;/* outer edges */
  --zebra:#FAFBFE;
  --chip:#EBEFFA;

  --ok:#1B7A47; --ok-bg:#E7F5ED;
  --warn-bg:#FFF6E3; --warn-line:#F0DDB2; --warn-ink:#6B4A0E;
  --bad:#A3261B; --bad-bg:#FBECEA;
  --nav-w:252px; --radius:14px;
  --sans:'DM Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --display:'Sora',var(--sans);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--page);color:var(--ink-body);font-family:var(--sans);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none;font-weight:500}
a:hover{text-decoration:underline}
button{font-family:inherit;font-size:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
.muted{color:var(--ink-soft)}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* brand mark: the Bai Philippines roundel, the same file as the favicon */
.mark{width:30px;height:30px;flex:none;display:block}
.mark.small{width:20px;height:20px}

.shell{display:flex;min-height:100vh}

/* ---------- side nav ---------- */
.nav{width:var(--nav-w);flex:none;background:var(--navy);color:#fff;
  display:flex;flex-direction:column;padding:20px 12px;position:sticky;top:0;
  height:100vh;min-height:100vh}
.nav-brand{display:flex;align-items:center;gap:11px;padding:4px 8px 18px;
  margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.14)}
.nav-brand-text{display:flex;flex-direction:column;line-height:1.22}
.nav-brand-text strong{font-family:var(--display);font-weight:700;font-size:15.5px;
  letter-spacing:-.01em}
.nav-brand-text small{color:#9FB3E8;font-size:11px;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase}
.nav-label{margin:16px 10px 7px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#7D90CC;font-weight:700}
.nav-item{width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:8px;background:none;border:0;border-left:3px solid transparent;color:#C9D3EE;
  text-align:left;padding:9px 10px;border-radius:0 9px 9px 0;font-size:14px;
  font-family:inherit;font-weight:400;line-height:1.5;cursor:pointer;
  transition:background .12s,color .12s}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.is-active{background:var(--navy-deep);color:#fff;font-weight:700;
  border-left-color:var(--gold)}
.nav-item.is-active .pill{background:var(--gold);color:var(--navy-ink)}
.stage-nav{width:100%}
.stage-all{min-height:44px}
.stage-option{padding-left:30px;padding-right:10px}
.pill{background:rgba(255,255,255,.13);color:#C9D3EE;border-radius:999px;
  padding:1px 8px;font-size:11.5px;font-weight:700;min-width:24px;text-align:center;
  font-variant-numeric:tabular-nums}
.nav-foot{margin-top:auto;padding:13px 10px 0;border-top:1px solid rgba(255,255,255,.13);
  font-size:11.5px;color:#9FAFDB;flex:none}
.nav-run{margin-bottom:2px;color:#C9D3EE}
.nav>nav{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none}
.nav>nav::-webkit-scrollbar{display:none}

/* ---------- loading skeletons ---------- */
.sk{display:block;height:12px;border-radius:6px;
  background:linear-gradient(90deg,var(--chip) 25%,#F7F9FE 50%,var(--chip) 75%);
  background-size:200% 100%;animation:sk-shine 1.3s ease-in-out infinite}
.sk-thin{height:8px;margin-top:8px}
.sk-fill{height:100%;width:100%;border-radius:10px}
.sk-item{pointer-events:none}
.sk-item::before{visibility:hidden}
.sk-tr td{padding-top:16px;padding-bottom:16px}
.is-loading .tile-n{color:transparent;width:2.4em;border-radius:8px;
  background:linear-gradient(90deg,rgba(255,255,255,.14) 25%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.14) 75%);
  background-size:200% 100%;animation:sk-shine 1.3s ease-in-out infinite}
.is-loading .tile-amber .tile-n{color:transparent;background-image:linear-gradient(90deg,var(--chip) 25%,#F7F9FE 50%,var(--chip) 75%)}
/* a reload keeps the old numbers, dimmed, so nothing jumps */
.is-refreshing .dash-grid,.is-refreshing .tiles,.is-refreshing .scroll{opacity:.55;transition:opacity .15s}
@keyframes sk-shine{from{background-position:100% 0}to{background-position:-100% 0}}

@media (prefers-reduced-motion:reduce){
  .sk,.is-loading .tile-n{animation:none}
}

/* ---------- main ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;padding:24px clamp(16px,2.4vw,30px) 0}
@media (min-width:981px){
  body[data-me] .nav{position:fixed;inset:0 auto 0 0;z-index:20}
  body[data-me] .main{margin-left:var(--nav-w)}
}
.top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px;margin-bottom:22px}
.burger{display:none;background:var(--navy);color:#fff;border:0;border-radius:9px;padding:9px 12px}
.top-head{flex:1 1 420px;min-width:0}
.top-with-filter{flex-wrap:nowrap;align-items:center}
.top-with-filter .top-head{flex:1;min-width:0}
.period-filter{position:relative;flex:none;margin-left:auto}
.period-trigger{display:flex;align-items:center;gap:8px;min-height:44px}
.period-trigger svg{flex:none}
.period-menu{position:absolute;right:0;top:calc(100% + 8px);width:190px;z-index:10;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:6px}
.period-heading{margin:6px 10px;font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;color:var(--ink-soft)}
.period-option{display:block;width:100%;min-height:44px;padding:10px;text-align:left;
  border:0;border-radius:8px;background:none;color:var(--navy);font-size:14px}
.period-option:hover{background:var(--chip)}
.period-option[aria-checked="true"]{background:var(--navy);color:var(--surface);font-weight:700}
@media (max-width:480px){
  .top-with-filter{gap:10px}
  .period-trigger{padding:9px 12px}
  .period-trigger #periodLabel{display:none}
}
.eyebrow{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-deep);display:flex;align-items:center;gap:9px}
.eyebrow::after{content:"";flex:1;max-width:60px;height:2px;background:var(--gold);border-radius:2px}
h1{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(23px,2.5vw,31px);
  line-height:1.14;letter-spacing:-.025em;color:var(--navy)}
.search{flex:0 1 330px;min-width:220px;display:flex;flex-direction:column;gap:6px}
.search label{font-size:11.5px;font-weight:700;color:var(--ink-soft);
  letter-spacing:.03em;text-transform:uppercase}
.search input{border:1.5px solid var(--line-strong);border-radius:10px;padding:10px 13px;
  font-size:15px;background:#fff;color:var(--ink);width:100%}
.search input::placeholder{color:var(--ink-faint)}
.search input:hover{border-color:#A7B4D8}

/* ---------- tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:14px;margin-bottom:20px}
.tile{background:var(--navy);color:#fff;border-radius:var(--radius);padding:17px 19px;
  min-width:0;position:relative;overflow:hidden}
.tile-icon{position:absolute;top:16px;right:17px;width:20px;height:20px;
  color:var(--gold);opacity:.9;pointer-events:none}
/* Numbers are WHITE. Gold on navy at 31px was a lot of gold, and white reads
   as the louder of the two anyway — which is right, since the figure is the
   point of the tile. */
.tile-n{font-family:var(--display);font-weight:800;font-size:31px;line-height:1.05;
  color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tile-l{font-size:12.5px;color:#D3DBF2;display:flex;flex-direction:column;margin-top:4px;font-weight:500}
.tile-sub{color:#93A3D6;font-size:11px;font-weight:400}

/* "Still to contact" is the one tile that should pull the eye, so it inverts
   instead of filling with gold — a white card among navy ones is louder than
   a gold slab, and spends almost none of the accent. */
.tile-amber{background:var(--surface);border:1px solid var(--line-mid);color:var(--ink)}
.tile-amber::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--gold)}
.tile-amber .tile-n{color:var(--navy)}
.tile-amber .tile-l{color:var(--ink-soft)}
.tile-amber .tile-sub{color:var(--ink-faint)}
.tile-amber .tile-icon{color:var(--gold-deep)}

.tile-chart{background:var(--surface);border:1px solid var(--line-mid);
  display:flex;flex-direction:column;gap:9px}
.tile-l-top{color:var(--ink-soft);font-weight:700;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase}
.spark{display:flex;align-items:flex-end;gap:5px;height:44px}
.spark i{flex:1;background:var(--chip);border-radius:3px 3px 0 0;min-height:3px}
.spark i.on{background:var(--navy)}
.spark i:last-child.on{background:var(--gold)}

/* ---------- card ---------- */
.card{background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;
  box-shadow:0 16px 40px rgba(10,40,129,.08);overflow:hidden;margin-bottom:24px}
.card-top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--line-mid)}
.card-top h2{margin:0 0 2px;font-family:var(--display);font-weight:700;font-size:18px;
  color:var(--navy);letter-spacing:-.01em}
.card-top p{margin:0;font-size:12.5px}
.card-actions{display:flex;gap:9px;align-items:center}
.postings-card-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px;
  padding:18px 24px;align-items:start}
.postings-heading{min-width:0;flex:initial}
.postings-card-top h2{margin-bottom:8px}
.postings-meta{display:flex;align-items:center;flex-wrap:nowrap;gap:6px;max-width:100%;
  overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.postings-meta::-webkit-scrollbar{height:3px}
.postings-meta::-webkit-scrollbar-track{background:transparent}
.postings-meta::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:999px}
.postings-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;
  border-radius:999px;background:var(--page);color:var(--ink-soft);font-size:11px;
  font-weight:700;max-width:100%;white-space:nowrap;flex:none}
.postings-badge svg{flex:none;width:14px;height:14px}
.postings-badge[hidden]{display:none}
.postings-count{background:var(--chip);color:var(--navy)}
.postings-tools{display:flex;align-items:center;gap:9px;flex:0 1 auto;min-width:0;
  max-width:100%;height:36px;margin:0;align-self:start}
.postings-tools .search{position:relative;display:block;flex:1 1 600px;min-width:300px;
  max-width:600px;margin-left:-260px}
.postings-tools .search label,.postings-summary{position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.postings-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;
  color:var(--ink-soft);pointer-events:none}
.postings-tools .search input{width:100%;min-width:0;min-height:36px;border-radius:999px;
  padding:6px 12px 6px 36px;font-family:inherit;font-size:12.5px}
.postings-tools .card-actions{flex:none;justify-content:flex-end;gap:8px}
.postings-tools .btn,.postings-tools .btn-ghost{min-height:36px;display:inline-flex;
  align-items:center;justify-content:center;white-space:nowrap;padding:6px 12px;font-size:12px}
.postings-tools .btn-ghost{border-color:var(--navy)}
@media (max-width:1240px){
  .postings-card-top{grid-template-columns:minmax(0,1fr)}
  .postings-tools{width:100%;justify-self:start}
  .postings-tools .search{flex-basis:380px;min-width:160px;max-width:600px;margin-left:0}
}
@media (max-width:760px){
  .postings-card-top{padding:16px;gap:12px}
  .postings-tools{height:auto;flex-wrap:wrap}
  .postings-tools .search{flex:1 1 100%;min-width:0;max-width:none;margin-left:0}
  .postings-tools .card-actions{justify-content:flex-start;flex-wrap:nowrap;width:auto}
}
.btn{background:var(--gold);color:var(--navy-ink);font-weight:700;border:0;
  padding:10px 19px;border-radius:999px;font-size:13.5px;letter-spacing:.01em}
.btn:hover{text-decoration:none;background:#D4AB2D}
.btn-ghost{background:#fff;border:1.5px solid var(--line-strong);color:var(--navy);
  font-weight:700;padding:9px 16px;border-radius:999px;font-size:13.5px}
.btn-ghost:hover{border-color:var(--navy);background:#F7F9FE}
.banner{background:var(--warn-bg);color:var(--warn-ink);font-size:13px;
  padding:11px 20px;border-bottom:1px solid var(--warn-line)}

/* ---------- table ---------- */
/* One row per company, nine columns, sized to fit a 1366px laptop beside the
   nav. It still scrolls inside the card on anything narrower, and the header
   row stays pinned while you read down (sticky only works in its own scroller). */
.scroll{overflow:auto;max-height:calc(100vh - 210px)}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:13.5px}
#tbl{table-layout:fixed;min-width:1200px}
#tbl thead th:nth-child(1){width:96px}
#tbl thead th:nth-child(2){width:160px}
#tbl thead th:nth-child(3){width:150px}
#tbl thead th:nth-child(4){width:220px}
#tbl thead th:nth-child(5){width:140px}
#tbl thead th:nth-child(6){width:60px}
#tbl thead th:nth-child(7){width:110px}
#tbl thead th:nth-child(8){width:125px}
#tbl thead th:nth-child(9){width:139px}
/* Below ~1560px the 1200px above doesn't fit beside the sidebar and Status
   scrolls out of sight. Narrower columns, with Job Description taking what's
   left, so a 1366px laptop shows all nine. Date stays 96px: the pinned
   Company column's left offset depends on it. */
@media (max-width:1560px){
  #tbl{min-width:0}
  #tbl thead th:nth-child(2){width:136px}
  #tbl thead th:nth-child(3){width:130px}
  #tbl thead th:nth-child(4){width:auto}
  #tbl thead th:nth-child(5){width:104px}
  #tbl thead th:nth-child(6){width:54px}
  #tbl thead th:nth-child(7){width:92px}
  #tbl thead th:nth-child(8){width:110px}
  #tbl thead th:nth-child(9){width:146px}   /* fits "Meeting Booked" */
}

thead th{background:var(--navy);color:#fff;font-weight:700;font-size:11.5px;
  letter-spacing:.055em;text-transform:uppercase;text-align:left;padding:13px 10px;
  position:sticky;top:0;z-index:3;vertical-align:bottom;
  border-right:1px solid rgba(255,255,255,.13);
  border-bottom:2px solid var(--gold)}
#tbl thead th{vertical-align:middle;text-align:left}
thead th:last-child{border-right:0}
thead th[data-sort]{cursor:pointer;user-select:none}
thead th[data-sort]:hover{background:var(--navy-deep)}
thead th .arr{color:var(--gold);font-size:9px;margin-left:5px}

tbody td{padding:9px 10px;border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);vertical-align:top;line-height:1.45;
  color:var(--ink-body)}
tbody td:last-child{border-right:0}
tbody tr:nth-child(even) td{background:var(--zebra)}
tbody tr:hover td{background:#F2F6FF}
tbody tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer}

/* Date and Company stay put if a narrow screen has to scroll sideways. */
thead th:nth-child(1){left:0;z-index:4}
thead th:nth-child(2){left:96px;z-index:4}
thead th:nth-child(1),thead th:nth-child(2){position:sticky}
tbody td:nth-child(1),tbody td:nth-child(2){position:sticky;z-index:2;background:#fff}
/* The Date column's width is what the Company column's `left` assumes, so pin
   it on the header too — with no rows, the header alone sets it. */
thead th:nth-child(1),tbody td:nth-child(1){width:96px;min-width:96px;max-width:96px;
  box-sizing:border-box}
tbody td:nth-child(1){left:0}
tbody td:nth-child(2){left:96px;box-shadow:1px 0 0 var(--line-mid)}
tbody tr:nth-child(even) td:nth-child(1),
tbody tr:nth-child(even) td:nth-child(2){background:var(--zebra)}
tbody tr:hover td:nth-child(1),tbody tr:hover td:nth-child(2){background:#F2F6FF}

.c-date{color:var(--ink-soft);white-space:nowrap;font-size:12.5px;
  font-variant-numeric:tabular-nums}
.c-co{font-weight:700;color:var(--navy);min-width:120px;max-width:200px}
.c-co .st{display:block;font-weight:500;font-size:11px;color:var(--ink-soft);
  letter-spacing:.06em;margin-top:2px}
/* the company's email, under its name: a click opens mail, not the drawer */
.c-co .co-mail{display:block;margin-top:2px;font-size:12px;font-weight:500;
  width:0;min-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-title{font-weight:500;color:var(--ink);min-width:130px}
.c-desc{min-width:140px}
.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden}
.c-skills{min-width:90px;max-width:180px;font-size:13px}
.c-src,.c-status{white-space:nowrap}
.more{display:block;margin-top:2px;color:var(--ink-soft);font-size:11.5px;font-weight:500}
.c-src .more{display:inline;cursor:help}

.chip{display:inline-block;background:var(--chip);color:var(--navy);font-weight:700;
  font-size:11px;padding:4px 10px;border-radius:999px;white-space:nowrap;
  letter-spacing:.02em}
.dash{color:var(--ink-faint)}

/* score as a badge: the eye should find the 86 before it reads the row */
.score{font-family:var(--display);font-weight:700;font-size:13px;
  display:inline-block;min-width:38px;text-align:center;padding:3px 8px;border-radius:7px}
.s-hi{background:var(--ok-bg);color:var(--ok)}
.s-mid{background:var(--gold-wash);color:var(--gold-deep)}
.s-lo{background:var(--chip);color:var(--ink-soft)}

/* the company's stage: early blue, in-talks amber, Revisit violet, Won green */
.stage-badge{display:inline-block;padding:3px 11px;border-radius:999px;font-size:12px;
  font-weight:700;background:var(--chip);color:var(--navy);white-space:nowrap}
.stage-badge[data-stage="qualified"],.stage-badge[data-stage="contacted"]{background:#E3EFFD;color:#0B4FA8}
.stage-badge[data-stage="replied"],.stage-badge[data-stage="meeting-booked"],
.stage-badge[data-stage="proposal-sent"]{background:#FFF3CF;color:#7A5600}
.stage-badge[data-stage="revisit"]{background:#EFE8FB;color:#5B2FA3;cursor:help}
.stage-badge[data-stage="won"]{background:var(--ok);color:#fff}
.stage-badge[data-stage="lost"]{background:#E9E9EE;color:#5A5F70}
/* the same badge as a picker in the table's Status column */
.stage-pick{appearance:auto;border:0;font-family:inherit;padding:4px 2px 4px 8px;cursor:pointer;
  max-width:100%}
.stage-pick[data-stage="revisit"]{cursor:pointer}
.stage-pick:hover{box-shadow:inset 0 0 0 1.5px currentColor}
.stage-pick:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.stage-pick:disabled{opacity:.6;cursor:progress}
.stage-pick option{background:#fff;color:var(--ink);font-weight:500}
/* an ad that turned up after the company last moved stage */
.new-ad{display:inline-block;padding:1px 7px;border-radius:999px;font-size:10.5px;
  font-weight:700;letter-spacing:.02em;color:var(--warn-ink);background:var(--warn-bg);
  border:1px solid var(--warn-line);vertical-align:2px;white-space:nowrap;cursor:help}

/* the Members page's role picker */
select.status{border:1.5px solid var(--line-strong);border-radius:8px;padding:6px 8px;
  font-size:12.5px;font-family:inherit;background:#fff;color:var(--ink);font-weight:500}
select.status:hover{border-color:var(--navy)}

.empty{padding:48px 24px;text-align:center}
/* Sits under the table inside its scroller: a block child is as wide as the
   visible area, and sticky keeps it there if the table scrolls sideways. */
.scroll .empty{position:sticky;left:0}
.empty p{margin:0 0 6px;color:var(--ink)}
.empty .muted{color:var(--ink-soft);font-size:13.5px;max-width:46ch;margin:0 auto}

.foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;color:var(--ink-soft);
  font-size:12px;padding:4px 2px 24px;margin-top:auto}
.foot.postings-foot{justify-content:flex-end;padding-inline:0}
.foot.postings-foot span{text-align:right}

/* ---------- drawer ---------- */
/* The company page slides in from the right; a stage's pane slides over it.
   One scrolling page: Details, Why they're a prospect, Postings, Status, Notes. */
.drawer-bg{position:fixed;inset:0;background:rgba(5,20,63,.32);z-index:40}
.drawer{position:fixed;top:0;right:0;width:min(580px,100vw);height:100vh;background:#fff;
  z-index:41;display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(5,20,63,.18);
  color:var(--ink);font-size:14px;animation:drawer-in .28s cubic-bezier(.4,0,.2,1)}
.drawer[hidden]{display:none}                 /* display:flex would beat [hidden] */
.drawer-bg{animation:drawer-fade-in .28s ease-out}
.drawer.is-closing{animation:drawer-out .22s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}
.drawer-bg.is-closing{animation:drawer-fade-out .22s ease-in forwards;pointer-events:none}
@keyframes drawer-out{to{transform:translateX(100%)}}
@keyframes drawer-fade-in{from{opacity:0}}
@keyframes drawer-fade-out{to{opacity:0}}
@keyframes drawer-in{from{transform:translateX(100%)}}
.drawer-top{display:flex;align-items:center;justify-content:space-between;flex:none;
  padding:10px 14px;border-bottom:1px solid var(--line)}
.drawer-tag{font-size:12px;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase}
.drawer-x{border:0;background:transparent;border-radius:8px;width:40px;height:40px;
  display:grid;place-items:center;color:var(--ink-body)}
.drawer-x:hover{background:var(--chip);color:var(--navy)}
.drawer-panes{position:relative;flex:1;overflow:hidden}
.drawer-pane{position:absolute;inset:0;overflow-y:auto;padding:16px 24px 40px;background:#fff}
.drawer-stage{box-shadow:-6px 0 16px rgba(5,20,63,.08);animation:drawer-in .28s cubic-bezier(.4,0,.2,1)}
.d-crumb{margin:0 0 8px;font-size:13px;color:var(--ink-soft)}
.d-crumb b{color:var(--ink);font-weight:600}
.link-btn{border:0;background:none;padding:0;font:inherit;color:var(--link);font-weight:600}
.link-btn:hover{text-decoration:underline}
.d-title{margin:0 0 4px;font-family:var(--display);font-weight:800;font-size:24px;
  line-height:1.2;color:var(--navy);letter-spacing:-.015em}
.d-title.done{color:var(--ok)}
.d-title .new-ad{font-family:var(--sans);vertical-align:5px}
.d-sub{margin:0 0 14px;color:var(--ink-soft)}
.d-rows{margin:0}
.d-row{display:grid;grid-template-columns:120px 1fr;gap:8px;padding:8px 0;
  border-bottom:1px solid var(--line);align-items:start}
.d-row dt{color:var(--ink-soft);font-size:13px}
.d-row dd{margin:0;overflow-wrap:anywhere}
.d-row dd.d-editable{display:flex;align-items:center;gap:7px;min-width:0;border-radius:6px}
.d-detail-display{display:block;flex:1;min-width:0;overflow-wrap:anywhere;border-radius:4px}
.d-detail-display[role="button"]{cursor:pointer}
.d-detail-display[role="button"]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.d-edit-trigger{display:grid;place-items:center;flex:none;width:32px;height:32px;padding:0;
  border:1px solid transparent;border-radius:7px;background:transparent;color:var(--ink-soft);
  opacity:0;transition:opacity .15s,color .15s,background .15s}
.d-edit-trigger svg,.d-inline-actions svg{width:17px;height:17px}
.d-editable:hover .d-edit-trigger,.d-editable:focus-within .d-edit-trigger{opacity:1}
.d-edit-trigger:hover{background:var(--chip);color:var(--navy)}
.d-editable.is-editing{display:block}
.d-inline-editor{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;width:100%}
.d-inline-input{width:100%;min-width:0;height:38px;padding:7px 9px;border:1px solid var(--line-strong);
  border-radius:7px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px}
.d-inline-input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(10,40,129,.12)}
.d-inline-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.d-inline-actions{display:flex;gap:4px}
.d-inline-actions button{display:grid;place-items:center;flex:none;width:38px;height:38px;padding:0;
  border:1px solid var(--line-mid);border-radius:8px;background:var(--surface);color:var(--ink-soft);
  transition:background .15s,color .15s,border-color .15s}
.d-inline-save:hover{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.d-inline-cancel:hover{border-color:var(--line-strong);background:var(--chip);color:var(--navy)}
.d-inline-actions button:disabled{opacity:.5;cursor:wait}
.d-inline-message{grid-column:1/-1;font-size:12px;color:var(--bad)}
.d-inline-message.is-saved{color:var(--ok);opacity:1;transition:opacity 400ms ease}
.d-inline-message.is-saved.is-fading{opacity:0}
.drawer h4{margin:22px 0 8px;font-family:var(--display);font-size:15px;font-weight:700;
  color:var(--navy)}
/* "Why they're a prospect" folds away; the arrow turns when it opens */
.d-why summary{display:flex;align-items:center;gap:9px;margin:22px 0 4px;cursor:pointer;
  list-style:none;border-radius:6px}
.d-why summary::-webkit-details-marker{display:none}
.d-why summary::before{content:"";width:7px;height:7px;margin:0 2px 3px;
  border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);
  transform:rotate(-45deg);transition:transform 150ms ease}
.d-why[open] summary::before{transform:rotate(45deg);margin-bottom:5px}
.d-why summary:hover h4{color:var(--navy)}
.d-why summary:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.d-why summary h4{margin:0}
.d-why-tools{display:flex;justify-content:flex-end;margin-bottom:4px}
@media (prefers-reduced-motion:reduce){.d-why summary::before{transition:none}}
/* "Why they're a prospect" and research: a grey label over a paragraph */
.d-para{padding:7px 0 9px;border-bottom:1px solid var(--line)}
.d-label{display:block;margin-bottom:2px;font-size:12.5px;color:var(--ink-soft)}
.d-para p{margin:0;line-height:1.55;color:var(--ink-body);white-space:pre-wrap}
.d-para p b{color:var(--navy)}
.d-para span[title]{text-decoration:underline dotted var(--line-strong);text-underline-offset:3px;
  cursor:help}
/* one card per posting */
.d-jobs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.d-job{border:1px solid var(--line-mid);border-radius:10px;padding:10px 12px;font-size:13.5px}
.d-job small{display:block;margin-top:3px;color:var(--ink-soft);font-size:12px}
.d-desc{margin-top:6px;white-space:pre-wrap;line-height:1.5;color:var(--ink-body);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.d-job.open .d-desc{display:block}
.d-job .link-btn{margin-top:4px;font-size:12.5px}
.posting-edit-dialog button{min-height:44px}
/* one line per posting: its title, then its own Edit / Delete */
.job-line{display:flex;align-items:center;justify-content:space-between;gap:10px}
.job-line .new-ad{margin-right:auto}
.job-actions{display:flex;gap:6px;flex:none}
.mini-btn{background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;
  padding:4px 11px;min-height:30px;font-size:12px;font-weight:700;color:var(--navy)}
.mini-btn:hover{border-color:var(--navy);background:#F7F9FE}
.mini-danger{color:#B42318}
.mini-danger:hover{border-color:#B42318;background:#FEF3F2}
/* the stage list, and each stage's own pane */
.d-stages{display:flex;flex-direction:column;gap:6px}
.d-stagebtn{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;text-align:left;
  border:1px solid var(--line-mid);background:#fff;border-radius:10px;padding:10px 12px;
  color:var(--ink)}
.d-stagebtn:hover{border-color:var(--navy);background:#F7F9FE}
.d-stagebtn.cur{border-color:var(--gold);background:var(--gold-wash);font-weight:700}
.d-stagebtn.done{border-color:var(--ok);background:var(--ok-bg)}
.d-dot{width:10px;height:10px;border-radius:50%;background:var(--line-strong);flex:none}
.d-stagebtn.cur .d-dot{background:var(--gold)}
.d-stagebtn.done .d-dot{background:var(--ok)}
.d-go{margin-left:auto;display:flex;gap:8px;align-items:center;color:var(--ink-soft);
  font-size:12px;font-weight:500}
.d-badge{background:var(--gold);color:var(--navy-ink);border-radius:999px;padding:1px 8px;
  font-size:11px;font-weight:700}
.d-badge.d-ok{background:var(--ok);color:#fff}
.d-title .d-badge{vertical-align:middle;margin-left:6px;font-family:var(--sans);font-size:12px}
.d-field{display:block;margin:14px 0 4px;font-weight:600;font-size:13px;color:var(--ink-body)}
.d-text{width:100%;min-height:130px;border:1px solid var(--line-strong);border-radius:10px;
  padding:10px 12px;font:inherit;resize:vertical}
.d-text:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(10,40,129,.14)}
.d-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.d-complete{min-height:44px;background:#fff;color:var(--ok);border:2px solid var(--ok);
  border-radius:999px;padding:8px 24px;font-weight:800}
.d-complete:hover{background:var(--ok-bg)}
.d-complete:disabled{opacity:.5;cursor:not-allowed}
.d-actions .btn{min-height:44px;padding:10px 26px;border-radius:999px}
.d-hint{margin:8px 0 0;font-size:12.5px;color:var(--ink-soft)}
.drawer .d-msg{padding:6px 0 0;font-weight:600}  /* beats .form-msg's padding below */
@media (prefers-reduced-motion:reduce){
  .drawer,.drawer-stage{animation:none}
  .d-edit-trigger,.d-inline-actions button,.d-inline-message.is-saved{transition:none}
}
/* Next follow-up (F-07): a date that saves on change */
.d-date{font:inherit;font-size:13px;color:var(--ink-body);border:1px solid var(--line-strong);
  border-radius:8px;padding:3px 8px;background:var(--surface)}
.d-date:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(10,40,129,.14)}
.d-saved{margin-left:8px;font-size:12px;color:var(--ink-soft)}
/* Files on a company: one row each, name links to the file */
.d-files{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:6px}
.d-files li{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;
  border:1px solid var(--line-mid);border-radius:10px;background:var(--surface)}
.d-files a{min-width:0;font-weight:600;font-size:13.5px;overflow-wrap:anywhere}
.d-files small{margin-left:auto;flex:none;font-size:12px;color:var(--ink-soft)}
.d-files-tools{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-bottom:4px}
.d-saved.is-bad{color:#B42318}

/* Do not contact (F-08): admins only, set apart at the very bottom */
.d-dnc{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:28px;
  padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-soft)}
.d-dnc .mini-btn{color:#B42318}
.d-dnc .mini-btn:hover{border-color:#B42318;background:#FEF3F2}
.dnc-dialog label{display:block;font-size:13px;font-weight:600;color:var(--ink-body)}
.dnc-dialog textarea{display:block;width:100%;margin-top:6px;font:inherit;resize:vertical;
  border:1.5px solid var(--line-strong);border-radius:10px;padding:10px 12px}
.dnc-dialog textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(10,40,129,.14)}
.dnc-dialog .posting-modal-msg{margin:8px 0 0}
.dnc-dialog .signout-actions{margin-top:20px}

/* notes: a running log, newest first */
.notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.notes li{font-size:13.5px;border-left:3px solid var(--line-strong);padding:2px 0 2px 12px}
.notes li{display:flex;align-items:flex-start;gap:8px}
.note-text{flex:1;min-width:0;white-space:pre-wrap}
.notes small{display:block;font-size:12px;color:var(--ink-soft)}
.note-del{flex:none;width:28px;height:28px;border:0;border-radius:999px;background:none;
  color:var(--ink-soft);font-size:18px;line-height:1}
.note-del:hover{background:#FEF3F2;color:#B42318}
.note-empty{font-size:13px}
.research-dialog .add-form{gap:10px}
.chip-hidden{font-size:10.5px;padding:2px 8px;margin-left:6px;background:var(--line);color:var(--ink-soft)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.posting-modal-msg{padding:0}
.verdict{display:inline-block;font-size:11px;font-weight:700;padding:4px 10px;
  border-radius:999px;letter-spacing:.04em;text-transform:uppercase}
.v-confirmed{background:var(--ok-bg);color:var(--ok)}
.v-likely{background:var(--gold-wash);color:var(--gold-deep)}

@media (max-width:980px){
  .nav{position:fixed;left:0;top:0;z-index:50;height:100vh;min-height:100vh;
    transform:translateX(-100%);transition:transform .18s}
  .nav.open{transform:none}
  .burger{display:block}
  .main{padding-left:16px}
  tbody td:nth-child(1),tbody td:nth-child(2){position:static}
  thead th:nth-child(1),thead th:nth-child(2){left:auto}   /* still pinned to the top */
}

/* ---------- sign-in ---------- */
.login-page{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 62%,var(--navy-ink) 100%);
  min-height:100vh}
.login{max-width:410px;margin:0 auto;padding:12vh 16px 40px;display:flex;flex-direction:column;gap:22px}
.login-brand{display:flex;align-items:center;gap:13px;color:#fff}
.login-brand strong{display:block;font-family:var(--display);font-size:20px;letter-spacing:-.01em}
.login-brand small{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#9FB3E8}
.login-card{background:#fff;border-radius:var(--radius);padding:30px 28px 26px;
  border-top:3px solid var(--gold);box-shadow:0 18px 50px rgba(3,10,40,.35)}
.login-card h1{margin:0 0 6px;font-family:var(--display);font-size:24px;color:var(--ink);letter-spacing:-.01em}
.login-card .muted{margin:0 0 20px;font-size:14px}
.login-card label{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px}
.login-card input{width:100%;border:1.5px solid var(--line-strong);border-radius:10px;
  padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);background:#fff}
.login-card input:hover{border-color:#A7B4D8}
.login-card input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(10,40,129,.14)}
#code{font-size:24px;letter-spacing:.35em;font-variant-numeric:tabular-nums;text-align:center}
.login-error{min-height:20px;margin:8px 0 2px;font-size:13px;color:#B42318}
.login-note{margin:0 0 8px;font-size:13px;color:var(--ink-soft)}
.login-note:empty{display:none}
.login-btn{width:100%;padding:13px 19px;font-size:15px}
.login-btn:disabled{opacity:.65;cursor:progress}
.login-alt{margin:16px 0 0;text-align:center;font-size:13px;color:var(--ink-faint)}
.linkish{background:none;border:0;padding:0;color:var(--link);font-weight:500;font-size:13px}
.linkish:hover{text-decoration:underline}
.login-foot{font-size:12px;color:#9FAFDB;text-align:center;line-height:1.6}

/* signed-in user, bottom of the side nav */
.nav-user{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-bottom:9px;color:#fff;font-size:12.5px;font-weight:500}
.nav-user span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-signout{background:none;border:0;padding:0;color:#C9D3EE;font-size:11.5px;font-weight:700;flex:none}
.nav-signout:hover{color:#fff;text-decoration:underline}

/* Dashboard account card and sign-out confirmation. */
.radar-nav-foot .nav-user{margin:0 -10px 9px;padding:10px 8px;border-radius:var(--radius);
  background:color-mix(in srgb,var(--navy) 90%,var(--surface));justify-content:flex-start}
.radar-nav-foot .nav-user-avatar{display:grid;place-items:center;width:36px;height:36px;
  flex:none;border-radius:50%;background:var(--gold);color:var(--navy-ink);font-weight:700}
.radar-nav-foot .nav-user-details{flex:1;min-width:0}
.radar-nav-foot .nav-user-name{display:block;color:var(--surface);font-size:13.5px;font-weight:800;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.radar-nav-foot .nav-user-email{display:block;color:#E4BA37;font-size:11.5px;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.radar-nav-foot .nav-signout{display:flex;align-items:center;justify-content:center;
  width:44px;min-height:44px;color:#C9D3EE;transition:color 200ms ease}
.radar-nav-foot .nav-signout:hover,.radar-nav-foot .nav-signout:focus-visible{
  color:var(--surface);text-decoration:none}
.signout-dialog{position:fixed;inset:0;margin:auto;width:min(420px,calc(100% - 32px));
  height:fit-content;max-height:calc(100% - 32px);overflow:auto;padding:24px;
  background:var(--surface);color:var(--ink-body);font:inherit;
  border:1px solid var(--line-strong);border-radius:16px;box-shadow:0 16px 40px rgba(10,40,129,.08)}
.signout-dialog::backdrop{background:rgba(5,20,63,.45)}
.signout-dialog h2{margin:0;color:var(--navy);font-family:var(--display);font-size:20px;font-weight:700}
.signout-dialog p{margin:12px 0 24px}
.signout-actions{display:flex;justify-content:flex-end;gap:12px}
.signout-actions button{min-height:44px}
.signout-dialog .signout-actions button{transition:transform 200ms ease,
  background-color 200ms ease,border-color 200ms ease}
.signout-dialog .signout-actions button:hover{transform:translateY(-1px)}
.signout-confirm,.btn-danger{background:#B42318;color:var(--surface);border:0;border-radius:999px;
  padding:10px 19px;font-size:13.5px;font-weight:700;letter-spacing:.01em}
.signout-dialog .signout-confirm:hover,.btn-danger:hover{background:color-mix(in srgb,#B42318 85%,var(--navy-ink))}
@media (prefers-reduced-motion:reduce){
  .radar-nav-foot .nav-signout{transition:none}
  .signout-dialog .signout-actions button{transition:none}
  .signout-dialog .signout-actions button:hover{transform:none}
}

/* ---------- members (admin) ----------
   The postings table above pins its first two columns. None of that
   applies here, so it is undone for .members. */
table.members{min-width:640px}
.members thead th:nth-child(n),.members tbody td:nth-child(n){position:static;width:auto;
  min-width:0;max-width:none;box-shadow:none}
.members thead th{position:sticky;top:0}
.members tbody tr{cursor:default}
.members tbody td{vertical-align:middle}
.members tr.is-off td{color:var(--ink-soft)}
.members tr.is-off b{color:var(--ink-soft)}
.off-tag{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;color:#B42318}
.roles-table td:not(:first-child){text-align:center;color:var(--ok);font-weight:700}
.roles-table th:not(:first-child){text-align:center}
.roles-note{margin:0;padding:14px 20px;font-size:13px}
.btn-small{padding:6px 12px;font-size:12.5px}
.member-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:18px 20px 6px}
.member-form label{display:flex;flex-direction:column;gap:6px;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);flex:1 1 180px}
.member-form input,.member-form select{border:1.5px solid var(--line-strong);border-radius:10px;
  padding:10px 12px;font:inherit;font-size:14.5px;text-transform:none;letter-spacing:0;
  color:var(--ink);background:#fff;font-weight:500}
.member-form input:focus,.member-form select:focus{outline:none;border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(10,40,129,.14)}
.member-form .btn{flex:none}
.add-dialog{border:0;border-top:3px solid var(--gold);border-radius:var(--radius);padding:0;
  width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 32px);color:var(--ink);
  box-shadow:0 24px 60px rgba(5,20,63,.28)}
.add-dialog::backdrop{background:rgba(5,20,63,.45)}
.add-form{flex-direction:column;align-items:stretch;padding:24px 24px 20px}
.add-form h2{margin:0;font-family:var(--display);font-weight:700;font-size:20px;color:var(--navy)}
.add-form p.muted{margin:-4px 0 4px;font-size:13px}
.add-form label{flex:none}
.add-form label i{font-style:normal;font-weight:500;text-transform:none;letter-spacing:0}
.add-form textarea{border:1.5px solid var(--line-strong);border-radius:10px;padding:10px 12px;
  font:inherit;font-size:14.5px;color:var(--ink);resize:vertical;text-transform:none;
  letter-spacing:0;font-weight:500}
.add-form textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(10,40,129,.14)}
.add-form .form-msg{padding:0}
.add-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:4px}
.form-msg{margin:0;padding:8px 20px 16px;font-size:13px;color:var(--ok)}
.form-msg:empty{display:none}
.form-msg.is-bad{color:#B42318}
a.nav-item{text-decoration:none}

/* DNC Archive: a list of companies, so a menu item with a count like All prospects */
.nav-dnc{min-height:44px;margin-top:6px}

/* "View as" (admins) */
.radar-nav-foot{position:relative}
.radar-nav-foot .nav-user-line{display:flex;align-items:center;gap:6px;min-width:0}
.radar-nav-foot .nav-user-line .nav-user-name{min-width:0}
.radar-nav-foot:has(.viewas-trigger) .nav-signout{width:32px}
.viewas-trigger{display:inline-flex;align-items:center;gap:2px;flex:none;
  background:rgba(255,255,255,.13);color:#C9D3EE;border:0;border-radius:999px;
  padding:2px 7px;font-size:11px;font-weight:700;transition:background .12s,color .12s}
.viewas-trigger:hover,.viewas-trigger[aria-expanded="true"]{background:rgba(255,255,255,.22);color:#fff}
.viewas-menu{position:absolute;left:0;right:0;bottom:100%;z-index:20;margin-bottom:-2px;
  background:var(--surface);border-radius:18px;padding:10px 8px;
  box-shadow:0 16px 40px rgba(3,10,40,.35)}
.viewas-heading{margin:4px 12px 8px;font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)}
.viewas-option{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;
  padding:8px 12px;border:0;border-radius:10px;background:none;text-align:left;
  color:var(--navy);font-size:14.5px;font-weight:600}
.viewas-option:hover,.viewas-option:focus-visible{background:var(--chip)}
.viewas-option svg{flex:none;visibility:hidden}
.viewas-option span{min-width:0;overflow-wrap:anywhere}
.viewas-option[aria-checked="true"]{font-weight:700}
.viewas-option[aria-checked="true"] svg{visibility:visible}
@media (prefers-reduced-motion:reduce){.viewas-trigger{transition:none}}
.chip-owner{background:var(--navy);color:#fff}
.login-devnote{margin:-8px 0 18px;padding:9px 12px;border-radius:9px;font-size:13px;
  background:var(--gold-wash);border:1px solid var(--warn-line);color:var(--warn-ink)}

/* ---------- dashboard (F-01) ----------
   The landing view. Four tiles, then a grid of cards: pipeline and the weekly
   chart span the full width, Call next and Last run sit side by side. */
.view[hidden]{display:none}
.nav-dash{margin-top:8px}
.dash-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:24px}
.dash-card{margin-bottom:0;padding:18px 20px 20px}
.dash-wide{grid-column:1 / -1}
.dash-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:4px 12px;margin-bottom:14px}
.dash-head h2{margin:0;font-family:var(--display);font-weight:700;font-size:18px;
  color:var(--navy);letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.dash-heading-icon{flex:none;width:17px;height:17px;color:var(--gold-deep)}
.dash-head p{margin:0;font-size:12.5px}

/* pipeline: one bar per stage, in pipeline order; Lost sits apart */
.pipeline{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stage{width:100%;display:flex;flex-direction:column;gap:8px;background:#F7F9FE;
  border:1px solid var(--line-mid);border-radius:12px;padding:12px 14px;text-align:left;color:var(--ink)}
.stage:hover{border-color:var(--navy)}
.stage-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.stage-name{font-size:13px;font-weight:700;color:var(--ink-soft);letter-spacing:.02em}
.stage-n{font-family:var(--display);font-weight:800;font-size:24px;color:var(--navy);
  font-variant-numeric:tabular-nums}
.stage-bar{display:block;height:6px;background:var(--chip);border-radius:999px;overflow:hidden}
.stage-bar i{display:block;height:100%;background:var(--navy);border-radius:999px}
.pipeline li:first-child .stage-bar i{background:var(--gold)}
.pipeline-off{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line-mid)}
.stage-off{background:none;border:1px solid var(--line-mid);border-radius:999px;
  padding:6px 14px;font-size:13px;color:var(--ink-soft)}
.stage-off b{color:var(--ink);margin-left:4px}
.stage-off:hover{border-color:var(--navy);color:var(--ink)}

/* the weekly chart: the old sparkline, larger and labelled */
.week-chart{position:relative;display:flex;align-items:stretch;gap:10px;height:200px}
.wk{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.wk-n{font-size:12px;font-weight:700;color:var(--ink);min-height:18px;
  font-variant-numeric:tabular-nums}
.wk-bar{flex:1;width:100%;display:flex;align-items:flex-end}
.wk-bar i{display:block;width:100%;background:var(--chip);border-radius:5px 5px 0 0;min-height:3px}
.wk-bar i.on{background:var(--navy)}
.wk-bar i.now{background:var(--gold)}
#weekChart .wk-bar i{background:var(--gold)}
#dayChart .wk-bar i{background:var(--navy)}
.wk-l{font-size:11.5px;color:var(--ink-soft);white-space:nowrap}
.wk-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  margin:0;font-size:13.5px;pointer-events:none}

/* Call next */
.call-next{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;
  counter-reset:call}
.call-next li{counter-increment:call}
.call-item{width:100%;display:flex;align-items:center;gap:12px;background:none;
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;text-align:left;color:var(--ink)}
.call-item::before{content:counter(call);flex:none;width:22px;font-size:12px;font-weight:700;
  color:var(--ink-soft);font-variant-numeric:tabular-nums}
.call-item:hover{border-color:var(--navy);background:#F7F9FE}
.call-name{flex:1;min-width:0;font-weight:700;color:var(--navy);overflow:hidden;
  text-overflow:ellipsis}
.call-name small{display:block;font-weight:500;font-size:12px;color:var(--ink-soft)}
.call-empty{font-size:13.5px;padding:8px 0}

/* Last run: one slim strip, not a whole card of empty space */
.run-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;padding:14px 20px}
.run-strip h2{margin:0;font-family:var(--display);font-weight:700;font-size:15px;color:var(--navy);
  display:flex;align-items:center;gap:7px}
.run-kv{margin:0;display:flex;flex-wrap:wrap;gap:6px 28px}
.run-kv div{display:flex;gap:8px;align-items:baseline}
.run-kv dt{font-size:12.5px;color:var(--ink-soft)}
.run-kv dd{margin:0;font-size:13.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

/* the right-hand column beside Call next */
.dash-stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.dash-stack > .card:last-child{flex:1}   /* ends level with Call next */
.day-chart{height:170px}

/* horizontal bars: categories and states */
.hbars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.hbars li{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr) 2.5em;
  align-items:center;gap:12px;font-size:13px}
.hb-l{color:var(--ink-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-bar{height:10px;background:var(--chip);border-radius:999px;overflow:hidden}
.hb-bar i{display:block;height:100%;background:var(--navy);border-radius:999px}
#categoryChart .hb-bar i{background:var(--gold)}
#stateChart .hb-bar i{background:var(--navy)}
.hb-n{text-align:right;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.hbars .hb-empty{display:block;font-size:13.5px}

@media (max-width:760px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}   /* 2 x 2, never 3 + 1 */
  .hbars li{grid-template-columns:minmax(0,10em) minmax(0,1fr) 2.5em}
  .hb-l{white-space:normal;line-height:1.3}   /* wrap rather than cut on phones */
  .dash-grid{grid-template-columns:minmax(0,1fr)}
  .pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .week-chart{gap:5px;height:170px}
  .wk-l{font-size:10px}
}
@media (max-width:420px){
  .wk-l{writing-mode:vertical-rl;transform:rotate(180deg)}
}

/* ---------- pagination (prospects table) ---------- */
.pager-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;
  padding:14px 20px;border-top:1px solid var(--line-mid)}
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}
.per-page{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft)}
.per-page select{border:1.5px solid var(--line-strong);border-radius:8px;padding:6px 8px;
  font:inherit;font-weight:700;color:var(--navy);background:#fff}
.per-page select:hover,.per-page select:focus{border-color:var(--navy);outline:none;
  box-shadow:0 0 0 3px rgba(10,40,129,.14)}
.pg{min-width:36px;background:#fff;border:1.5px solid var(--line-strong);border-radius:9px;
  padding:6px 11px;font-size:13px;font-weight:700;color:var(--navy);
  font-variant-numeric:tabular-nums}
.pg:hover:not(:disabled){border-color:var(--navy);background:#F7F9FE}
.pg[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:#fff}
.pg:disabled{color:var(--ink-faint);border-color:var(--line);cursor:default}
.pg-gap{color:var(--ink-soft);padding:0 2px}

/* ---------- sign-in polish ----------
   Same fonts, colours and layout as the sign-in block above; this only adds
   depth and finish. Everything is scoped to .login-page so no other page moves. */
.login-page{
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(228,186,55,.13), transparent 62%),
    radial-gradient(700px 600px at 92% 105%, rgba(26,54,168,.55), transparent 65%),
    radial-gradient(1px 1px at 1px 1px, rgba(255,255,255,.09) 1px, transparent 0) 0 0 / 26px 26px,
    linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 62%,var(--navy-ink) 100%);
  background-attachment:fixed}
.login-page .login{min-height:100vh;justify-content:center;padding:40px 16px 48px;gap:26px}

/* brand: a soft gold ring round the roundel, a little more presence */
.login-page .login-brand{justify-content:center;gap:14px}
.login-page .login-brand .mark{width:44px;height:44px;border-radius:50%;
  box-shadow:0 0 0 3px rgba(228,186,55,.35),0 8px 22px rgba(3,10,40,.45)}
.login-page .login-brand strong{font-size:22px}

/* card: rounder, layered shadow, gold edge as a gradient, gentle entrance */
.login-page .login-card{position:relative;overflow:hidden;border-radius:18px;border-top:0;
  padding:34px 32px 30px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 2px 6px rgba(3,10,40,.18),
    0 24px 60px rgba(3,10,40,.42);
  animation:login-in .45s cubic-bezier(.2,.7,.2,1) both}
.login-page .login-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold) 35%,var(--gold) 65%,var(--gold-deep))}
.login-page .login-card h1{font-size:26px}

/* field: taller, smooth focus */
.login-page .login-card input{padding:14px 16px;border-radius:12px;background:#FBFCFF;
  transition:border-color .15s,box-shadow .15s,background .15s}
.login-page .login-card input:focus{background:#fff}

/* button: soft lift on hover, a press on click */
.login-page .login-btn{border-radius:999px;padding:14px 19px;
  box-shadow:0 6px 16px rgba(176,121,0,.28);
  transition:transform .12s,box-shadow .12s,background .12s}
.login-page .login-btn:hover:not(:disabled){transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(176,121,0,.34)}
.login-page .login-btn:active:not(:disabled){transform:translateY(0);
  box-shadow:0 3px 10px rgba(176,121,0,.28)}

.login-page .login-foot{color:#8FA2D6;font-size:12.5px}

@keyframes login-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .login-page .login-card{animation:none}
  .login-page .login-btn{transition:none}
}
@media (max-width:480px){
  .login-page .login{justify-content:flex-start;padding-top:9vh}
  .login-page .login-card{padding:28px 22px 24px}
}

/* ---------- "Sort by" dropdown (prospects) ---------- */
.sort-by{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);font-weight:700}
.sort-by select{font:inherit;font-weight:700;color:var(--navy);background:#fff;
  border:1.5px solid var(--line-strong);border-radius:9px;padding:6px 10px;cursor:pointer}
.sort-by select:hover,.sort-by select:focus{border-color:var(--navy);outline:none}

/* ---------- Follow-ups due ---------- */
.wait{flex:none;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;
  background:var(--chip);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.wait-late{background:var(--gold);color:var(--navy)}
.postings-meta .sort-by{margin-left:4px;font-size:11px;gap:6px}
.postings-meta .sort-by select{font-size:11.5px;padding:4px 8px;border-radius:999px;border-width:1px}

/* ---------- stage pane: back + mark not completed ---------- */
.d-nav{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.d-nav .d-crumb{margin:0}
.d-back{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:30px;padding:0 14px 0 11px;background:#fff;
  border:1.5px solid var(--line-strong);border-radius:999px;
  font:inherit;font-size:13px;font-weight:700;line-height:1;color:var(--navy);cursor:pointer;
  transition:border-color .15s,background .15s}
.d-back:hover{border-color:var(--navy);background:#F7F9FE}
.d-subrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:6px 12px;margin:0 0 16px}
.d-subrow .d-sub{margin:0}
.d-undo{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  height:26px;padding:0 10px;background:none;border:1.5px solid transparent;border-radius:999px;
  font:inherit;font-size:12px;font-weight:700;line-height:1;color:var(--ink-soft);cursor:pointer;
  transition:border-color .15s,color .15s,background .15s}
.d-undo:hover{border-color:var(--line-strong);color:var(--navy);background:#F7F9FE}
.d-undo:disabled{opacity:.6;cursor:default}
.d-back:focus-visible,.d-undo:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* "✓ Completed 21 Oct · who" with Undo right beside it */
.d-done-row{justify-content:flex-start}
.d-done-row .d-badge{font-size:12px;padding:3px 10px}
/* a stage that isn't the current one: one clear way to move the company here */
.d-moveto{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  margin:4px 0 6px;padding:10px 12px;border-radius:12px;background:var(--page);
  font-size:13px;color:var(--ink-body)}
.d-moveto .d-complete{min-height:36px;padding:6px 16px}
/* once the move is made, the line fades and folds away (opacity and height only) */
.d-moveto.is-gone{overflow:hidden;pointer-events:none;animation:d-moveto-out .2s ease-out forwards}
@keyframes d-moveto-out{
  from{opacity:1;max-height:80px}
  to{opacity:0;max-height:0;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0}}
@media (prefers-reduced-motion:reduce){.d-moveto.is-gone{animation-duration:1ms}}
/* lines the app writes itself (moves, completions): quieter than notes */
.notes li.is-log{border-left-color:var(--line);color:var(--ink-soft);font-size:12.5px}

/* ---------- confirmation card ---------- */
.cf-wrap{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(11,24,61,.42);animation:cf-fade .15s ease-out}
.cf-card{width:100%;max-width:380px;background:#fff;border-radius:14px;padding:22px 22px 18px;
  box-shadow:0 18px 48px rgba(11,24,61,.28);animation:cf-pop .18s ease-out}
.cf-title{margin:0 0 6px;font-size:17px;font-weight:700;color:var(--navy)}
.cf-text{margin:0 0 20px;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.cf-actions{display:flex;justify-content:flex-end;gap:8px}
.cf-btn{height:36px;padding:0 16px;border-radius:999px;font:inherit;font-size:13.5px;font-weight:700;
  cursor:pointer;transition:background .15s,border-color .15s}
.cf-no{background:#fff;border:1.5px solid var(--line-strong);color:var(--navy)}
.cf-no:hover{border-color:var(--navy);background:#F7F9FE}
.cf-yes{background:var(--navy);border:1.5px solid var(--navy);color:#fff}
.cf-yes:hover{background:#09226B}
.cf-danger{background:#B3261E;border-color:#B3261E}
.cf-danger:hover{background:#8F1E18}
.cf-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@keyframes cf-fade{from{opacity:0}}
@keyframes cf-pop{from{opacity:0;transform:translateY(6px) scale(.98)}}