/* ===========================================================================
   Xcelo VMS / ATS — design system
   Craft notes: transform/opacity-only motion, custom ease-out curves,
   press feedback on all controls, ease-out entrances, reduced-motion aware.
   =========================================================================== */
/* Palette taken from xcelogroup.com: deep navy #253559 with the gold #f6b129
   that carries the brand. Navy leads for structure and authority; gold is
   reserved for the one thing that matters on a screen, never for chrome. */
:root{
  /* ---------------------------------------------------------------------
     Palette
     ---------------------------------------------------------------------
     Google's Material weights, chosen deliberately: 600-level hues carry
     meaning, 50/100 tints carry surfaces, and the neutral ground is cooled and
     deepened so white cards lift off it instead of dissolving into it.

     The previous set was correct and timid -- a near-white page, a navy that
     only appeared on buttons, and pastels light enough that a full tile read as
     an empty one. Saturation is the information here: on a screen showing five
     hundred requirements, colour is how a recruiter finds the four that matter.

     Token names are unchanged. Every value below was checked against the
     surface it actually sits on, not against white, because most secondary text
     sits on --bg rather than on a card.
     ------------------------------------------------------------------ */

  /* Ground and surfaces. Cool grey, a step deeper than before, so a card has
     something to sit on. */
  --bg:#eef1f6;
  --surface:#ffffff;
  --surface-2:#f7f9fc;

  /* Text. Near-black with a blue cast rather than true black -- warmer greys
     read as dirty next to a saturated blue. */
  --ink:#111827;
  --ink-soft:#334155;
  /* Secondary text: 4.6:1 on --bg, which is where most of it lives. */
  --muted:#5b6577;
  /* Third tier: rules, disabled marks, placeholder chrome. Never body text. */
  --muted-2:#94a3b8;
  --line:#dbe2ec;
  --line-2:#e8edf4;

  /* Brand. Google blue at 700 for actions, because the old navy was so dark it
     read as a neutral and gave the eye nothing to follow. The gold stays --
     it is the one piece of the original identity worth keeping -- but deepened
     out of the pale-yellow range. */
  --brand:#1a56db;            /* primary actions, active nav */
  --brand-ink:#1443ad;        /* pressed / hover */
  --brand-wash:#e8effc;       /* tinted surfaces */
  --gold:#f59e0b;             /* accent — scores, highlights, focus */
  --gold-ink:#92400e;
  --gold-wash:#fef4e2;

  /* States, at Material 600-700 so a badge reads at a glance. Each has a wash
     to fill with and an ink dark enough to set text on that wash. */
  --ok:#0b7b41;      --ok-wash:#e3f5ea;
  --warn:#b45309;    --warn-wash:#fdf2e0;  --warn-ink:#8a4708;
  --danger:#cd2b2b;  --danger-wash:#fdecec;
  --info:#1565c0;    --info-wash:#e6f0fb;
  --ai:#6d28d9;      --ai-wash:#f3edff;     /* the AI's own colour: AI connected, AI calls */

  /* Technology families. One definition, borrowed by the skill chips and by
     every chart, so a slice and a chip for the same technology are the same
     colour wherever they appear. Pushed to full Material saturation: these are
     the only thing distinguishing twenty chips in a row. */
  --fam-lang:#5e35b1;  --fam-web:#0288d1;      --fam-backend:#00897b;
  --fam-cloud:#ef6c00; --fam-data:#1e56c9;     --fam-ai:#8e24aa;
  --fam-platform:#c2185b; --fam-practice:#546e7a;

  /* Chart and tag fills.
     Material 200-300 for the fill with a darker ink for text on it -- a real
     colour rather than a tint, so a donut whose largest slice is one state
     still reads as full.

     Every ink here was solved for, not picked: the first pass looked right and
     eight of these pairs measured between 3.99 and 4.50, under the floor for
     text somebody has to read. They now sit at 4.6-4.8, and white on the two
     solid fills holds at 5.3. */
  --pas-blue:#7ba7f5;   --pas-blue-ink:#103778;
  --pas-green:#6fc98a;  --pas-green-ink:#0a5325;
  --pas-amber:#fbc02d;  --pas-amber-ink:#704904;
  --pas-red:#ef8b85;    --pas-red-ink:#790a0a;
  --pas-purple:#bb86e8; --pas-purple-ink:#4b1279;
  --pas-teal:#6fd3cb;   --pas-teal-ink:#095650;
  --pas-pink:#f286c4;   --pas-pink-ink:#730e4f;
  /* Deeper than the rest on purpose: this is the slice that carries 499 of 500
     requirements, and at a lighter value the tile still read as empty. */
  --pas-slate:#b3c1de;  --pas-slate-ink:#36415a;
  /* Two more, solved the same way, so every job board can have its own and
     none of them has to share: LinkedIn next to Indeed, and ZipRecruiter next
     to Glassdoor, are the pairs that would otherwise both read as one blue
     and one green. */
  --pas-indigo:#9aa6f0; --pas-indigo-ink:#25307e;
  --pas-lime:#b7d36a;   --pas-lime-ink:#3d4f0c;

  --radius:12px; --radius-sm:9px; --radius-lg:16px;
  --shadow-xs:0 1px 2px rgba(21,27,43,.05);
  --shadow-sm:0 1px 3px rgba(21,27,43,.07),0 1px 2px rgba(21,27,43,.04);
  --shadow-md:0 6px 20px -6px rgba(21,27,43,.14),0 2px 6px -2px rgba(21,27,43,.06);
  --shadow-pop:0 18px 44px -12px rgba(21,27,43,.24);

  --sidebar:250px;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);
  font-size:14px;line-height:1.55;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-ink)}
h1,h2,h3{margin:0;font-weight:640;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:1.4rem}h2{font-size:1.05rem}h3{font-size:.95rem}
p{margin:.4rem 0}

/* ---------- app shell: sidebar + content ---------- */
.app{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}

.sidebar{
  position:sticky;top:0;height:100vh;
  background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:1.1rem .8rem;gap:.25rem;
  /* Taller than the screen, so it has to scroll.
     It was a fixed 100vh with no overflow rule at all, which does not clip
     visibly -- it just makes everything below the fold unreachable. Bench
     sales carries four more entries than recruiting (Apply jobs, My
     consultants, Pipeline, The bench) plus the Admin group, so that is where
     it bit: Reports, Vendors and Recruiters were on the page and could not be
     got to. The mail screen had this rule already; every other screen did not. */
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  overscroll-behavior:contain;
}
/* A rail that only shows its scrollbar when there is something to scroll to,
   and never a heavy one -- this is chrome beside the work, not the work. */
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{
  background:var(--line);border-radius:99px;border:2px solid var(--surface)}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar .brand{
  display:flex;align-items:center;gap:.6rem;padding:.35rem .55rem 1rem;
  font-weight:750;font-size:1.15rem;letter-spacing:-.03em;color:var(--ink);
}
.sidebar .brand .mark{
  width:30px;height:30px;border-radius:9px;flex:none;
  background:linear-gradient(140deg,var(--brand-ink),var(--brand));color:#fff;
  display:grid;place-items:center;font-size:.85rem;font-weight:800;
  box-shadow:0 4px 12px -3px rgba(37,53,89,.45);
}
.sidebar .brand span{color:var(--brand)}
.navgroup{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  padding:.9rem .6rem .3rem;font-weight:650}
.navlink{
  display:flex;align-items:center;gap:.65rem;
  padding:.55rem .6rem;border-radius:var(--radius-sm);
  color:var(--muted);font-weight:550;font-size:.9rem;
  transition:background 150ms var(--ease-out),color 150ms var(--ease-out),transform 120ms var(--ease-out);
}
.navlink svg{width:18px;height:18px;flex:none;opacity:.85}
.navlink:hover{background:var(--surface-2);color:var(--ink)}
.navlink:active{transform:scale(.985)}
.navlink.active{background:var(--brand);color:#fff;font-weight:650}
.navlink.active svg{opacity:1}
.sidebar .spacer{flex:1}
.userchip{
  display:flex;align-items:center;gap:.6rem;padding:.55rem .6rem;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--surface-2);
}
.userchip .av{width:32px;height:32px;border-radius:50%;flex:none;color:#fff;font-weight:700;font-size:.8rem;
  display:grid;place-items:center;background:linear-gradient(140deg,var(--brand-ink),#4a6099)}
.userchip .meta{min-width:0;flex:1}
.userchip .nm{font-size:.82rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.userchip .rl{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.iconbtn{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--surface);
  display:grid;place-items:center;color:var(--muted);cursor:pointer;flex:none;
  transition:transform 140ms var(--ease-out),background 140ms var(--ease-out),color 140ms var(--ease-out)}
.iconbtn:hover{background:var(--bg);color:var(--danger)}
.iconbtn:active{transform:scale(.94)}

.content{min-width:0;display:flex;flex-direction:column}
.content-inner{max-width:1200px;width:100%;margin:0 auto;padding:1.6rem 2rem 3rem}
.sitefoot{color:var(--muted);font-size:.78rem;padding:0 2rem 1.6rem;max-width:1200px;margin:0 auto;width:100%}

@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;
    padding:.7rem 1rem;gap:.4rem;overflow-x:auto}
  .sidebar .brand{padding:.2rem .4rem;width:auto}
  .navgroup{display:none}
  .navlink{padding:.45rem .6rem}.navlink span{display:none}
  .sidebar .spacer{flex:1}
  .content-inner{padding:1.2rem 1.1rem 2.5rem}
}

/* ---------- page header ---------- */
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.pagehead .sub{color:var(--muted);font-size:.9rem;margin-top:.25rem}
.breadcrumb{font-size:.8rem;color:var(--muted-2);margin-bottom:.35rem}
.breadcrumb a{color:var(--muted)}

/* ---------- KPI cards ---------- */
.kpis{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:1.5rem}
.kpi{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.05rem 1.15rem;box-shadow:var(--shadow-xs);position:relative;overflow:hidden;
  transition:transform 200ms var(--ease-out),box-shadow 200ms var(--ease-out);
}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.kpi .l{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;font-weight:600;display:flex;align-items:center;gap:.4rem}
.kpi .l .dot{width:8px;height:8px;border-radius:50%;background:var(--brand)}
.kpi .n{font-size:2.05rem;font-weight:720;letter-spacing:-.03em;margin-top:.35rem;line-height:1}
.kpi .hint{font-size:.76rem;color:var(--muted);margin-top:.35rem}
.kpi.k-open .l .dot{background:var(--brand)}
.kpi.k-sub .l .dot{background:var(--ok)}
.kpi.k-today .l .dot{background:var(--warn)}
.kpi.k-placed .l .dot{background:var(--info)}
/* The two stages between sent and placed. Gold for the rate, because that is
   the moment money is agreed and gold is this app's "pay attention" colour;
   green for an interview, which is the thing already going well. */
.kpi.k-rate .l .dot{background:var(--gold)}
.kpi.k-iv .l .dot{background:var(--ok)}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-xs);margin-bottom:1.25rem;overflow:hidden}
.card>.card-h{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.95rem 1.15rem;border-bottom:1px solid var(--line-2)}
.card>.card-h h2{font-size:.98rem}
.card>.card-b{padding:1.05rem 1.15rem}
.card>.card-b.flush{padding:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media(max-width:820px){.grid2{grid-template-columns:1fr}}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.875rem}
th,td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--line-2);vertical-align:middle}
thead th{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:650;
  background:var(--surface-2);position:sticky;top:0}
tbody tr{transition:background 120ms var(--ease-out)}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:none}
td .sub{color:var(--muted);font-size:.78rem}
.t-strong{font-weight:600;color:var(--ink)}
.num{font-variant-numeric:tabular-nums}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .55rem;border-radius:999px;
  font-size:.72rem;font-weight:650;white-space:nowrap;line-height:1.4}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.badge-open{background:var(--brand-wash);color:var(--brand-ink)}
.badge-filled{background:var(--ok-wash);color:var(--ok)}
.badge-closed{background:var(--danger-wash);color:var(--danger)}
.badge-hold{background:var(--warn-wash);color:var(--warn-ink)}
.badge-info{background:var(--info-wash);color:var(--info)}
.badge-default{background:#eef1f6;color:var(--muted)}
.prio-high{color:var(--danger);font-weight:650}
.prio-medium{color:var(--warn-ink);font-weight:600}
.prio-low{color:var(--muted)}

/* ---------- buttons ---------- */
/* A button marked hidden is hidden.
 *
 * .btn sets its own display, and an explicit display beats the browser's
 * [hidden]{display:none} -- so every .btn carrying the attribute stayed on
 * screen. Six of them do across the app: "View changes" on a resume with no
 * changes, "Hide highlighting" before anything is highlighted, "Remove" on an
 * empty file slot, "Write them again" before any questions exist, and both
 * actions in the auto apply panel during a run, where pressing one would start
 * work the recruiter did not ask for. Fixed here rather than at each call site,
 * because the next .btn[hidden] somebody writes would have the same bug.
 */
.btn[hidden]{display:none}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  background:var(--brand);color:#fff;border:1px solid var(--brand);
  padding:.55rem .95rem;border-radius:var(--radius-sm);font-weight:600;font-size:.88rem;
  cursor:pointer;white-space:nowrap;box-shadow:var(--shadow-xs);
  transition:transform 140ms var(--ease-out),background 140ms var(--ease-out),box-shadow 140ms var(--ease-out);
}
.btn svg{width:16px;height:16px}
.btn:not(:disabled):hover{background:var(--brand-ink);border-color:var(--brand-ink);color:#fff;box-shadow:var(--shadow-sm)}
.btn:not(:disabled):active{transform:scale(.97)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(246,177,41,.45)}
/* A disabled button had no style of its own: full brand colour, pointer
   cursor, hover state and all -- so "Working..." and "nothing is ticked"
   both looked exactly like a button that simply did not respond. */
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn-sm{padding:.35rem .65rem;font-size:.8rem}
.btn-ghost{background:var(--surface);color:var(--ink-soft);border-color:var(--line)}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink);border-color:var(--muted-2)}
.btn-danger{background:var(--danger);border-color:var(--danger)}
.btn-danger:hover{background:#b91c1c;border-color:#b91c1c}
.btn-block{width:100%}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.link-danger{color:var(--danger)}

/* ---------- forms ---------- */
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.15rem}
@media(max-width:700px){.formgrid{grid-template-columns:1fr}}
.formgrid .full{grid-column:1/-1}
.row{margin-bottom:1rem}
label{display:block;font-size:.78rem;font-weight:600;color:var(--ink-soft);margin-bottom:.35rem}
input,select,textarea{
  width:100%;padding:.58rem .7rem;border:1px solid var(--line);border-radius:var(--radius-sm);
  font:inherit;font-size:.9rem;background:var(--surface);color:var(--ink);
  transition:border-color 140ms var(--ease-out),box-shadow 140ms var(--ease-out);
}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(246,177,41,.22)}
textarea{min-height:96px;resize:vertical}
.req::after{content:" *";color:var(--danger)}
.hint{font-size:.75rem;color:var(--muted);margin-top:.3rem}
.checks{display:flex;flex-wrap:wrap;gap:.5rem}
.checks label{display:flex;align-items:center;gap:.45rem;font-weight:500;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);padding:.4rem .7rem;border-radius:999px;margin:0;cursor:pointer;
  transition:border-color 140ms var(--ease-out),background 140ms var(--ease-out)}
.checks label:hover{border-color:var(--muted-2)}
.checks input{width:auto;margin:0}
.checks input:checked+span{color:var(--brand-ink);font-weight:600}
.formfoot{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--line-2)}

/* ---------- form section headings ---------- */
.secthead{
  font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--brand-ink);
  font-weight:700;margin:1.6rem 0 .9rem;padding-bottom:.45rem;border-bottom:1px solid var(--line-2);
}
.secthead:first-child{margin-top:0}

/* ---------- filter bar ---------- */
.filterbar{display:flex;gap:.7rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:1.1rem}
.filterbar .row{margin:0}
.filterbar select,.filterbar input{min-width:150px}
.idsearch-note{margin:-.45rem 0 1rem;padding:.5rem .75rem;border-radius:8px;font-size:.84rem;background:var(--brand-wash);color:var(--ink)}
.idsearch-note.has-missing strong{color:var(--danger,#b91c1c)}
/* A select is as wide as its longest option, and position labels carry the
   title, the city and two job numbers -- so one of them took the whole row and
   pushed everything else onto the next line. Capped, with the position field
   given more room than the rest because its labels genuinely need it. */
.filterbar select{max-width:210px}
/* Wide enough to hold a job title, since that is what people type into it. */
.filterbar .filtersearch{min-width:240px;max-width:300px}
.filterbar select[name=position]{max-width:330px}

/* ---------- flash ---------- */
.flash{padding:.75rem 1rem;border-radius:var(--radius-sm);margin-bottom:1rem;font-weight:550;
  border:1px solid transparent;animation:flashIn 320ms var(--ease-out) both}
.flash{position:relative;padding-right:2.6rem}
.flash-x{position:absolute;right:.55rem;top:.4rem;border:0;background:none;font:inherit;font-size:1.3rem;line-height:1;
         cursor:pointer;color:inherit;opacity:.65;padding:.1rem .3rem;border-radius:6px}
.flash-x:hover{opacity:1;background:rgba(0,0,0,.06)}
/* A refusal that must be read: the warning pop-up. */
.flash-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;
             padding:1rem;background:rgba(15,23,42,.45)}
.flash-modal-box{position:relative;width:100%;max-width:540px;background:var(--surface);color:var(--text);
                 border-radius:14px;padding:1.4rem 1.6rem 1.3rem;box-shadow:0 24px 60px rgba(0,0,0,.28);
                 border-top:5px solid #b06000}
.flash-modal-box .flash-x{top:.6rem;right:.7rem}
.flash-modal-icon{width:46px;height:46px;border-radius:50%;background:#fef7e0;color:#b06000;
                  display:flex;align-items:center;justify-content:center;margin-bottom:.7rem}
.flash-modal-box h2{margin:0 0 .5rem;font-size:1.15rem}
.flash-modal-box p{margin:0 0 .6rem;line-height:1.5}
.flash-modal-note{background:#fef7e0;color:#8a5a00;border-radius:9px;padding:.65rem .85rem;font-weight:600}
.flash-modal-box .actions{display:flex;justify-content:flex-end;margin-top:1rem}
/* The severe one: dark, red, big, and it waits to be read. */
.flash-modal.is-severe{background:rgba(8,4,6,.82);backdrop-filter:blur(4px)}
.flash-modal.is-severe .flash-modal-box{max-width:720px;padding:2rem 2.2rem 1.8rem;border-top:0;border-radius:18px;
  background:linear-gradient(180deg,#2a0a0e 0%,#180608 100%);color:#fde8e8;
  box-shadow:0 0 0 1px rgba(255,80,80,.35),0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(220,38,38,.25)}
.flash-modal.is-severe .flash-x{color:#fbb;opacity:.8}
.flash-modal.is-severe .fm-head{display:flex;gap:1.1rem;align-items:center;margin-bottom:1.1rem}
.flash-modal.is-severe .flash-modal-icon{width:72px;height:72px;flex:none;margin:0;background:#dc2626;color:#fff;
  box-shadow:0 0 0 0 rgba(220,38,38,.6);animation:fm-pulse 1.6s ease-out infinite}
@keyframes fm-pulse{0%{box-shadow:0 0 0 0 rgba(220,38,38,.65)}100%{box-shadow:0 0 0 22px rgba(220,38,38,0)}}
.flash-modal.is-severe .fm-kicker{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#f87171;margin-bottom:.25rem}
.flash-modal.is-severe h2{font-size:1.55rem;line-height:1.2;margin:0;color:#fff}
.flash-modal.is-severe .fm-reason{font-size:1rem;line-height:1.55;color:#fecaca;margin:0 0 1rem;padding:.9rem 1rem;
  background:rgba(255,255,255,.05);border-left:4px solid #ef4444;border-radius:8px}
.flash-modal.is-severe .fm-record{background:rgba(0,0,0,.35);border:1px solid rgba(248,113,113,.35);border-radius:12px;padding:.9rem 1.1rem;margin-bottom:1rem}
.flash-modal.is-severe .fm-record-h{font-weight:800;color:#fca5a5;text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.flash-modal.is-severe .fm-dot{width:10px;height:10px;border-radius:50%;background:#ef4444;box-shadow:0 0 10px #ef4444;animation:fm-blink 1s steps(2,start) infinite}
@keyframes fm-blink{to{visibility:hidden}}
.flash-modal.is-severe dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1.2rem;margin:0;font-size:.95rem}
.flash-modal.is-severe dt{color:#fca5a5;font-weight:600}
.flash-modal.is-severe dd{margin:0;color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92rem}
.flash-modal.is-severe .fm-warn{font-weight:700;color:#fff;line-height:1.55;margin:0 0 .4rem}
.flash-modal.is-severe .fm-close{background:#dc2626;color:#fff;border:0;font-weight:800;padding:.7rem 1.4rem;border-radius:10px;cursor:pointer}
.flash-modal.is-severe .fm-close:disabled{background:#7f1d1d;color:#fca5a5;cursor:not-allowed}
.flash-modal.is-severe .fm-close:not(:disabled):hover{background:#b91c1c}
@media (max-width:640px){.flash-modal.is-severe .flash-modal-box{padding:1.4rem 1.2rem}.flash-modal.is-severe h2{font-size:1.25rem}.flash-modal.is-severe .flash-modal-icon{width:56px;height:56px}}
.flash-success{background:var(--ok-wash);color:var(--ok);border-color:#bfe6d2}
.flash-error{background:var(--danger-wash);color:var(--danger);border-color:#f5c6c6}
.flash-info{background:var(--info-wash);color:var(--info);border-color:#c6dcf0}
@keyframes flashIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* ---------- misc ---------- */
.muted{color:var(--muted)}
.small{font-size:.82rem}
.right{text-align:right}
.center{text-align:center}
.nowrap{white-space:nowrap}
.mt{margin-top:1rem}.mb0{margin-bottom:0}
.empty{text-align:center;color:var(--muted);padding:3rem 1rem}
.empty svg{width:42px;height:42px;color:var(--muted-2);margin-bottom:.6rem}
.tag{display:inline-block;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;
  padding:.1rem .4rem;font-size:.74rem;color:var(--muted);margin:.1rem}
.pill-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 .35rem;border-radius:999px;
  background:var(--brand-wash);color:var(--brand-ink);font-size:.74rem;font-weight:700}

/* ---------- AI panel ---------- */
.aibox{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);padding:.9rem 1rem}
.aibox-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:.5rem}
.aistatus{font-size:.82rem;color:var(--muted);min-height:1.1rem;margin:.35rem 0}
.aistatus-ok{color:var(--ok);font-weight:600}
.aistatus-err{color:var(--danger);font-weight:600}
.scorebar{display:flex;align-items:center;gap:.5rem;margin:.4rem 0}
.tag-ok{background:var(--ok-wash);color:var(--ok);border-color:#bfe6d2}
.tag-bad{background:var(--danger-wash);color:var(--danger);border-color:#f5c6c6}

/* ---------- score ring ---------- */
.scorering{
  --v:0; width:88px;height:88px;border-radius:50%;flex:none;display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--ring,var(--brand)) calc(var(--v)*3.6deg), var(--line) 0);
  transition:background 600ms var(--ease-out);
}
.scorering::before{content:"";position:absolute;width:66px;height:66px;border-radius:50%;background:var(--surface)}
.scorering span{position:relative;font-weight:750;font-size:1.05rem;letter-spacing:-.02em}
.scoretag{display:inline-grid;place-items:center;min-width:46px;padding:.2rem .45rem;border-radius:7px;
  font-weight:700;font-size:.8rem;font-variant-numeric:tabular-nums}

/* ---------- entrance motion ---------- */
.rise{animation:rise 360ms var(--ease-out) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.stagger>*{animation:rise 360ms var(--ease-out) both}
.stagger>*:nth-child(1){animation-delay:20ms}
.stagger>*:nth-child(2){animation-delay:60ms}
.stagger>*:nth-child(3){animation-delay:100ms}
.stagger>*:nth-child(4){animation-delay:140ms}
.stagger>*:nth-child(5){animation-delay:180ms}
.stagger>*:nth-child(6){animation-delay:220ms}

/* ---------- login ---------- */
.authwrap{min-height:100vh;display:grid;place-items:center;padding:1.5rem;
  background:radial-gradient(1100px 560px at 50% -12%,#e9edf5, var(--bg))}
.authcard{width:100%;max-width:390px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);padding:2.2rem 2rem;animation:rise 420ms var(--ease-out) both}
.authcard .brandrow{display:flex;align-items:center;gap:.65rem;justify-content:center;margin-bottom:.4rem}
.authcard .mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(140deg,var(--brand-ink),var(--brand));
  color:#fff;display:grid;place-items:center;font-weight:800;box-shadow:0 8px 18px -4px rgba(37,53,89,.45)}
.authcard h1{text-align:center;font-size:1.25rem}
.authcard .tagline{text-align:center;color:var(--muted);font-size:.86rem;margin:.15rem 0 1.5rem}

@media (hover:hover) and (pointer:fine){
  .kpi:hover{transform:translateY(-2px)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .kpi:hover{transform:none}
}

/* vendor requirement id chip */
.reqid{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;background:var(--surface-2);
  border:1px solid var(--line);border-radius:5px;padding:.05rem .3rem;color:var(--muted)}

/* fields populated by the resume AI */
.autofilled{background:#f0fdf4;border-color:#86efac}
.autofilled:focus{border-color:var(--brand)}

/* ---------- accordion sections ---------- */
.acc{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:.7rem;background:var(--surface);overflow:hidden}
.acc[open]{box-shadow:var(--shadow-xs)}
.acc-head{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:.6rem;
  padding:.8rem 1rem;font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-soft);background:var(--surface-2);user-select:none;
  transition:background 140ms var(--ease-out),color 140ms var(--ease-out);
}
.acc-head::-webkit-details-marker{display:none}
.acc-head::before{
  content:"";width:8px;height:8px;flex:none;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(-45deg);margin-left:.15rem;transition:transform 200ms var(--ease-out);
}
.acc[open] > .acc-head::before{transform:rotate(45deg)}
.acc[open] > .acc-head{color:var(--brand-ink);background:var(--brand-wash)}
.acc-head:hover{background:var(--bg)}
.acc-body{padding:1.1rem 1rem 1.2rem;animation:accIn 220ms var(--ease-out)}
@keyframes accIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.acc-head .cnt{margin-left:auto;font-size:.7rem;font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted-2)}
.acc-head .cnt.filled{color:var(--ok)}

/* ---------- resume viewer ---------- */
.cvviewer{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface-2)}
.cvviewer iframe{width:100%;height:84vh;min-height:640px;border:0;display:block;background:#fff}
.cvviewer img{width:100%;height:auto;display:block;background:#fff}
.cvtext{white-space:pre-wrap;font-size:.85rem;line-height:1.6;color:var(--ink-soft);
  padding:1.1rem 1.25rem;max-height:84vh;overflow:auto;background:#fff}
.iconlink{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:7px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  transition:transform 140ms var(--ease-out),background 140ms var(--ease-out),color 140ms var(--ease-out)}
.iconlink:hover{background:var(--brand-wash);color:var(--brand-ink);border-color:var(--brand-wash)}
.iconlink:active{transform:scale(.94)}
.iconlink svg{width:16px;height:16px}
.iconlink.disabled{opacity:.35;pointer-events:none}

/* ---------- employment / client history ---------- */
.whcard{position:relative;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.7rem .85rem;margin-bottom:.55rem;background:var(--surface)}
.whcard:last-child{margin-bottom:0}
.whcard-top{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;flex-wrap:wrap}
.whcard-top strong::before{content:"";display:inline-block;width:5px;height:5px;border-radius:1px;
  background:var(--gold);margin-right:.5rem;vertical-align:.18em}
.whclient{display:inline-block;background:var(--brand-wash);color:var(--brand-ink);border-radius:5px;
  padding:.05rem .35rem;font-size:.74rem;font-weight:650;margin-left:.3rem}

/* ---------- rendered Word documents (docx-preview) ---------- */
.docxhost{max-height:84vh;overflow:auto;background:var(--surface-2)}
.docxhost .docx-wrapper{background:var(--surface-2);padding:1rem 0 1.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem}
.docxhost .docx{background:#fff;box-shadow:0 2px 12px rgba(15,23,42,.14);margin:0!important}
.docxhost .docx-fallback .cvtext{max-height:none}
.docxhost table{width:auto}
.docxhost img{max-width:100%;height:auto}

/* ---------- resume preview panel (submission form) ---------- */
.cvpanel{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.cvpanel-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.6rem .9rem;background:var(--surface-2);border-bottom:1px solid var(--line-2)}
.cvpanel-body{border:0;border-radius:0;min-height:620px}
.cvpanel-body iframe{height:82vh;min-height:620px}
.cvpanel-body.docxhost{max-height:82vh}

/* ---------- modal ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:60;
  display:flex;align-items:center;justify-content:center;padding:1.25rem;
  animation:fadeIn 160ms var(--ease-out)}
.modal-backdrop[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);
  width:100%;max-width:520px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;
  animation:modalIn 220ms var(--ease-out)}
@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-head{padding:1.1rem 1.25rem .3rem}
.modal-head h2{font-size:1.05rem}
.modal-body{padding:.6rem 1.25rem 1rem;overflow:auto}
.modal-body .formgrid{gap:.6rem 1rem}
.modal-body label{margin-bottom:.1rem}
.modal-foot{display:flex;justify-content:flex-end;gap:.6rem;padding:.9rem 1.25rem;
  border-top:1px solid var(--line-2);background:var(--surface-2)}
@media (prefers-reduced-motion:reduce){.modal,.modal-backdrop{animation:none}}

/* draws the eye to the step the user still has to take */
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(246,177,41,.55)}70%{box-shadow:0 0 0 8px rgba(246,177,41,0)}100%{box-shadow:0 0 0 0 rgba(246,177,41,0)}}
.btn.pulse{animation:pulseRing 1.6s var(--ease-out) infinite}
@media (prefers-reduced-motion:reduce){.btn.pulse{animation:none;outline:2px solid var(--brand)}}

/* ---------- resume tailoring ---------- */
.tailor-pt{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem .85rem;margin-bottom:.5rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer;
  transition:border-color 140ms var(--ease-out),background 140ms var(--ease-out)}
.tailor-pt:hover{border-color:var(--muted-2);background:var(--surface-2)}
.tailor-pt input{width:auto;margin:.15rem 0 0;flex:none}
.tailor-pt:has(input:checked){border-color:var(--brand);background:var(--brand-wash)}
.tailor-text{display:block;font-size:.88rem;color:var(--ink);line-height:1.5}
.tailor-skills{display:block;margin-top:.35rem}

/* send-to-vendor row on the submission form */
.sendrow{margin-top:1.2rem;padding:.9rem 1rem;border:1px solid var(--brand-wash);border-radius:var(--radius);
  background:var(--brand-wash)}
.sendrow .checks label{background:var(--surface);border-color:var(--brand);font-weight:600}

/* ---------- match analysis dialog ---------- */
.anhead{display:flex;gap:1.1rem;align-items:flex-start;padding:.5rem 0 1rem;border-bottom:1px solid var(--line-2);margin-bottom:.4rem}
.andelta{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-bottom:.35rem}
.anarrow{color:var(--muted-2)}
.angain{color:var(--ok);font-weight:700;font-size:.82rem}
.anloss{color:var(--danger);font-weight:700;font-size:.82rem}
.anlist{margin:.4rem 0 0;padding-left:1.15rem;font-size:.87rem;line-height:1.6;color:var(--ink-soft)}
.anlist li{margin-bottom:.25rem}
.anlist-ok li::marker{color:var(--ok)}
.anlist-bad li::marker{color:var(--danger)}
.anlist-todo li::marker{color:var(--brand)}
#analysis-body table{font-size:.84rem}
#analysis-body td{vertical-align:top}


/* ---------- brand accents ----------
   Gold is the one hue that draws the eye, so it is spent only on the
   score ring, the active nav marker and the KPI a manager scans first. */
.sidebar .brand span{color:var(--gold)}
.navlink.active{background:var(--brand);color:#fff;font-weight:650}
.navlink.active svg{opacity:1;color:var(--gold)}
.kpi .n{color:var(--ink)}
.kpi.k-sub .l .dot{background:var(--gold)}
.kpi.k-sub .n{color:var(--brand)}
.scorering{--ring:var(--gold)}
.authcard .mark{background:linear-gradient(140deg,var(--brand-ink),var(--brand))}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.reqid{background:var(--gold-wash);border-color:#f3dfae;color:var(--gold-ink)}
.badge-open{background:var(--brand-wash);color:var(--brand)}
.pill-count{background:var(--brand-wash);color:var(--brand)}
.acc[open] > .acc-head{color:var(--brand);background:var(--brand-wash)}
.secthead{color:var(--brand)}

/* ---------- compact period filter ---------- */
.rangebtn{position:relative;display:inline-block}
.rangebtn .caret{opacity:.6;font-size:.7em;margin-left:.1rem}
.rangemenu{
  position:absolute;right:0;top:calc(100% + .4rem);z-index:30;min-width:13.5rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-pop);padding:.35rem;
  animation:rangeIn 160ms var(--ease-out);
}
@keyframes rangeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.rangemenu[hidden]{display:none}
.rangemenu a{
  display:block;padding:.5rem .6rem;border-radius:var(--radius-sm);
  font-size:.87rem;color:var(--ink-soft);font-weight:550;
  transition:background 120ms var(--ease-out),color 120ms var(--ease-out);
}
.rangemenu a:hover{background:var(--surface-2);color:var(--ink)}
.rangemenu a.on{background:var(--brand);color:#fff;font-weight:650}
.rangecustom{border-top:1px solid var(--line-2);margin-top:.35rem;padding:.6rem .6rem .3rem;
  display:grid;gap:.4rem}
.rangecustom label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0}
.rangecustom input{padding:.4rem .5rem;font-size:.82rem}

/* Xcelo's own position reference — navy, to set it apart from a vendor req id */
.reqid.xgid{background:var(--brand-wash);color:var(--brand);border-color:#ccd5e8;font-weight:700}

/* Type-to-search filter field (datalist combobox) */
.filterbar input[list]{min-width:230px}
@media (min-width:900px){.filterbar input[list]{min-width:270px}}

/* ---------- Approval queue ---------- */
.approw{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;
  padding:1rem 1.15rem;border-bottom:1px solid var(--line)}
.approw:last-child{border-bottom:0}
.approw-main{flex:1;min-width:280px}
.approw-top{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.2rem}
.approw-act{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}
.approw-act input[type=text]{min-width:210px}
.btn.danger{color:var(--danger);border-color:#f0c9c9}
.btn.danger:hover{background:var(--danger-wash)}
.appnote{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
  padding:.6rem .75rem;margin-top:.5rem;font-size:.88rem}
.apphist{margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--line)}
.apphist-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding:.3rem 0;font-size:.88rem}
.apphist-row .sub{flex-basis:100%;margin-left:.2rem}
.navcount{margin-left:auto;background:var(--gold);color:#3d2a00;font-size:.7rem;font-weight:700;
  border-radius:9px;padding:.05rem .42rem;min-width:18px;text-align:center}

/* A field the workflow owns — shown, not editable */
.lockedfield{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:.5rem .65rem}

/* ---------- Vendor email review ---------- */
.mrmodal{position:fixed;inset:0;z-index:80;background:rgba(15,23,42,.55);
  display:flex;align-items:flex-start;justify-content:center;padding:2.5vh 1rem;overflow:auto}
.mrmodal[hidden]{display:none}
.mrbox{background:var(--surface);border-radius:14px;box-shadow:var(--shadow-lg,0 24px 60px rgba(15,23,42,.28));
  width:min(940px,100%);max-height:95vh;display:flex;flex-direction:column;overflow:hidden;
  animation:mrIn 180ms var(--ease-out)}
@keyframes mrIn{from{opacity:0;transform:translateY(-8px) scale(.99)}to{opacity:1;transform:none}}
.mrhead{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.05rem 1.3rem;border-bottom:1px solid var(--line)}
.mrhead h2{margin:0;font-size:1.05rem}
.mrhead .sub{color:var(--muted);font-size:.85rem;margin-top:.15rem}
.mrclose{background:none;border:0;font-size:1.6rem;line-height:1;color:var(--muted);cursor:pointer;padding:0 .2rem}
.mrclose:hover{color:var(--ink)}
.mrbody{display:flex;flex-direction:column;min-height:0;flex:1;padding:1.1rem 1.3rem;gap:.7rem;overflow:auto}
.mrfields{display:grid;grid-template-columns:auto 1fr;gap:.5rem .8rem;align-items:center}
/* A vendor has written back and nobody has read it.
   The one tag on a row that asks for something to be done, so it is the one
   tag that is filled rather than washed -- everything else on the row is a
   label. Gold on dark ink because --gold is an amber in both themes and takes
   dark text on either ground; --brand inverts to a pale tint on dark and would
   have put white on near-white. */
.mail-tag.is-reply{background:var(--gold);color:#3a2a06;font-weight:700}
.mail-tag.is-reply svg{color:#3a2a06}

/* The same thing counted, on the rail. Sits before the total and reads as a
   number of things waiting, not as a second total: 168 is how much is on the
   desk, 2 is how much of it is waiting on the recruiter right now. */
.mail-count.is-reply{
  margin-left:auto;padding:.02rem .3rem;border-radius:99px;
  background:var(--gold);color:#3a2a06;font-weight:700;
}
/* The rail tints its counts on hover and when selected. This one is a filled
   pill, so those rules would repaint its text into its own background. */
.mail-view:hover .mail-count.is-reply,
.mail-view.is-on .mail-count.is-reply{color:#3a2a06;opacity:1}
/* Only the first count claims the free space; the total then sits beside it. */
.mail-count.is-reply + .mail-count{margin-left:0}

/* The rate box: a currency sign, a number and a basis reading as one control
   rather than three fields that happen to be adjacent. */
.ratewrap{display:flex;align-items:center;gap:.4rem}
.ratewrap .ratecur{color:var(--muted);font-weight:600}
.ratewrap input{flex:1;min-width:0}
.ratewrap select{flex:none;width:auto}

/* From this title, to that one. Reads as a change rather than as two
   unrelated tags sitting side by side. */
.tailor-pt.is-done{opacity:.85;cursor:default}
.tailor-pt.is-done .tailor-text{font-weight:600}
.tailor-arrow{margin:0 .3rem;color:var(--muted);font-weight:700}

/* Searching the requirement picker. Sits directly above the select it fills,
   and reads as part of it rather than as another field to fill in. */
.possearch{margin-bottom:.35rem}
.mrfields label{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
/* Two children of this grid are not label-and-field pairs.
   The grid is `auto 1fr`, so the note explaining where the copies went landed
   in the label column and stretched it to fit a whole sentence -- squeezing
   every field into a strip down the right-hand side. It only ever showed from
   an address that is not ours, which is why the layout looked like it broke on
   switching account. The note spans both columns; the Bcc row hands its own
   label and value straight to the grid so they pair up like the rest. */
.mrfields > .mrspan{grid-column:1 / -1;margin:0}
#mr-bcc-row:not([hidden]){display:contents}
.mrfiles{display:flex;gap:.35rem;flex-wrap:wrap}
.mrlabel{font-weight:600;font-size:.9rem;margin-top:.3rem}
.mrcanvas{border:1px solid var(--line);border-radius:10px;background:#fff;color:#1f2937;
  padding:1.1rem 1.2rem;min-height:38vh;max-height:52vh;overflow:auto;font-size:.9rem}
.mrcanvas:focus{outline:2px solid var(--brand);outline-offset:1px}
/* flex:none because .mrbody is a flex column: without it the footer is the
   first thing squeezed when the fields above grow, and the row being squeezed
   is the one holding Save. */
.mrfoot{display:flex;flex:none;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-top:.8rem;border-top:1px solid var(--line);margin-top:.2rem}
.mrfoot .actions{display:flex;gap:.5rem;align-items:center;margin-left:auto}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem}

/* Who to ring, on a submission. Set apart from the candidate's own details
   below it, because they are two different people and a recruiter reaching for
   a phone number must not dial the consultant by mistake. */
.vendorblock{padding-bottom:.9rem;margin-bottom:.9rem;border-bottom:1px solid var(--line)}
/* The person under the firm, on the list. Quieter than the company name so
   the column still scans as a list of vendors. */
/* The call log, under the number it was made to. */
.concell{display:flex;align-items:center;gap:.4rem;margin-top:.3rem;flex-wrap:wrap}
.conbtn{background:none;border:1px dashed var(--line-2);border-radius:999px;
  padding:.1rem .5rem;font-size:.72rem;color:var(--muted);cursor:pointer}
.conbtn:hover{border-style:solid;color:var(--brand-ink,#253559)}
.conchip{display:inline-block;padding:.1rem .45rem;border-radius:999px;font-size:.7rem;font-weight:600}
.conchip.is-connected{background:#e7f6ec;color:#12643a}
.conchip.is-connected_email{background:#e7f6ec;color:#12643a}
.conchip.is-connected_email::before{content:"\2709\00a0";font-size:.9em}
.conchip.is-voicemail{background:#fff4e0;color:#8a5a00}
.conchip.is-dnp{background:#fdecec;color:#a02020}
/* A call the consultant made themselves.
 *
 * The outcome colour stays -- what changed is whose call it was, not how it
 * went -- so the difference is carried by a ring rather than a fourth colour
 * the eye would have to learn. A recruiter scanning the list sees at a glance
 * which vendors have already heard from our side today. */
.conchip.by-cand{box-shadow:inset 0 0 0 1px currentColor}
/* Nobody has rung this one yet. Quiet -- it is the resting state of most rows,
   and a column of loud grey chips would drown the three that mean something. */
.conchip.is-none{background:#eef0f4;color:#5f6368;font-weight:500}
/* When it was last tried, on the row rather than behind a hover: a recruiter
   deciding whether to call again is asking "how long ago", and hovering forty
   rows to find out is how a log stops being read. */
.contime{font-size:.68rem;color:var(--muted);white-space:nowrap}

.vendcell-who{margin-top:.15rem;font-size:.78rem;color:var(--muted)}
.vendcell-who a{color:var(--brand-ink,#253559);text-decoration:none}
.vendcell-who a:hover{text-decoration:underline}
.vendalt{display:flex;flex-direction:column;gap:.35rem;margin-top:.2rem}
.vendalt-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;
  padding:.4rem .6rem;background:var(--surface-2);border-radius:8px;font-size:.88rem}

/* Completion cues for the submission-edit accordion */
.accsummary{background:var(--brand-wash);border:1px solid #ccd5e8;border-radius:10px;
  padding:.7rem .95rem;margin-bottom:1rem;font-size:.9rem;color:var(--brand-ink)}
.accnum{width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;
  flex:0 0 auto;margin-right:.55rem}
.acctitle{margin-right:.6rem}
.accchip{font-size:.68rem;font-weight:700;letter-spacing:.02em;border-radius:20px;padding:.15rem .55rem;
  text-transform:uppercase;border:1px solid transparent}
.accchip.ok{background:#e7f6ef;color:#0f7b52;border-color:#bfe6d4}
.accchip.part{background:var(--gold-wash);color:var(--gold-ink);border-color:#f3dfae}
.accchip.todo{background:var(--danger-wash);color:var(--danger);border-color:#f0c9c9}
.accmiss{background:var(--danger-wash);border:1px solid #f0c9c9;color:var(--danger);
  border-radius:8px;padding:.5rem .7rem;font-size:.84rem;margin-bottom:.9rem}
.accfoot{display:flex;justify-content:flex-end;gap:.6rem;margin:1.1rem 0 1.6rem}
.acclinks{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.acclink{display:flex;flex-direction:column;gap:.15rem;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:.8rem .95rem;text-decoration:none;color:inherit;
  transition:border-color 160ms var(--ease-out),transform 160ms var(--ease-out)}
.acclink:hover{border-color:var(--brand);transform:translateY(-1px)}

.mrcanvas.ro{background:var(--surface-2);cursor:default}
.mrfields input[readonly]{background:var(--surface-2);color:var(--muted)}

/* ---------- Vendor points of contact ---------- */
.poclist{display:flex;flex-direction:column;gap:.7rem}
.poc{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:10px;padding:.85rem .95rem;background:var(--surface-2)}
.poc-grid{display:grid;gap:.7rem 1rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));flex:1;min-width:260px}
.poc-side{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;padding-top:1.35rem}
.poc-recv{display:flex;align-items:center;gap:.4rem;font-size:.84rem;white-space:nowrap}
.poc-remove:disabled{opacity:.4;cursor:not-allowed}
.pocline{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap;padding:.3rem 0}
.pocline .muted{font-size:.85rem}

/* ---------- Messaging ---------- */
.chatwrap{display:grid;grid-template-columns:290px 1fr;gap:1rem;height:calc(100vh - 190px);min-height:460px}
@media (max-width:860px){.chatwrap{grid-template-columns:1fr;height:auto}}
.chatside{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:auto;display:flex;flex-direction:column}
.chatside-h{padding:.7rem .9rem;font-size:.7rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);background:var(--surface-2);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1}
.chatlist{display:flex;flex-direction:column}
.titem{display:flex;align-items:center;gap:.65rem;padding:.6rem .8rem;text-decoration:none;
  color:inherit;border-bottom:1px solid var(--line)}
.titem:hover{background:var(--surface-2)}
.titem.on{background:var(--brand-wash)}
.tbody{flex:1;min-width:0;display:flex;flex-direction:column}
.tname{font-weight:600;font-size:.9rem}
.tpreview{color:var(--muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcount{background:var(--gold);color:#3d2a00;font-size:.7rem;font-weight:700;border-radius:9px;
  padding:.05rem .42rem;min-width:18px;text-align:center}
.avatar{position:relative;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex:0 0 auto}
.avatar.lg{width:42px;height:42px;font-size:.85rem}
.presence{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;
  background:var(--muted-2);border:2px solid var(--surface)}
.presence.on{background:#22c55e}
.chatmain{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  display:flex;flex-direction:column;overflow:hidden;min-height:0}
.chathead{display:flex;align-items:center;gap:.7rem;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.chatmsgs{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.4rem;min-height:260px}
.chatday{text-align:center;margin:.6rem 0}
.chatday span{background:var(--surface-2);color:var(--muted);font-size:.72rem;
  padding:.15rem .6rem;border-radius:20px}
.msg{display:flex}
.msg.mine{justify-content:flex-end}
.bubble{max-width:min(70%,520px);background:var(--surface-2);border:1px solid var(--line);
  border-radius:14px 14px 14px 4px;padding:.55rem .8rem .5rem;font-size:.9rem;line-height:1.5;
  word-wrap:break-word;overflow-wrap:anywhere}
.msg.mine .bubble{background:var(--brand);border-color:var(--brand);color:#fff;
  border-radius:14px 14px 4px 14px}
.bubble .meta{display:block;font-size:.68rem;opacity:.65;margin-top:.2rem;text-align:right}
.chatform{display:flex;gap:.6rem;padding:.75rem;border-top:1px solid var(--line);align-items:flex-end}
.chatform textarea{flex:1;resize:none;min-height:42px;max-height:140px;padding:.6rem .75rem;
  border:1px solid var(--line);border-radius:10px;font:inherit;font-size:.9rem}
.chatform textarea:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}

/* Chat alert status strip */
.alertbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:var(--gold-wash);border:1px solid #f3dfae;color:var(--gold-ink);
  border-radius:var(--radius-sm);padding:.75rem 1rem;margin-bottom:1rem;font-size:.9rem}
.alertbar.ok{background:var(--ok-wash);border-color:#bfe6d4;color:var(--ok)}
.alertbar.warn{background:var(--danger-wash);border-color:#f0c9c9;color:var(--danger)}
.alertbar-msg{display:flex;flex-direction:column;gap:.15rem;min-width:240px;flex:1}
.alertbar-msg span{font-size:.84rem;opacity:.9;line-height:1.5}
.alertbar-msg code{font-size:.8rem;background:rgba(0,0,0,.06);padding:.05rem .3rem;border-radius:4px}
.alertbar{align-items:flex-start}
.alertbar .actions{flex-shrink:0}

/* Message toasts — bottom right, rising from the bottom. Shown whatever the
   browser's notification permission is, so a message is never missed silently. */
.chat-toasts{position:fixed;right:1.25rem;bottom:1.25rem;z-index:1200;
  display:flex;flex-direction:column-reverse;gap:.6rem;pointer-events:none}
.chat-toast{position:relative;pointer-events:auto;cursor:pointer;width:min(21rem,calc(100vw - 2.5rem));
  background:var(--brand);color:#fff;border-radius:var(--radius);padding:.8rem 2.1rem .85rem 1rem;
  box-shadow:var(--shadow-pop);border-left:3px solid var(--gold);
  opacity:0;transform:translateY(14px);transition:opacity .2s ease,transform .2s ease}
.chat-toast.in{opacity:1;transform:translateY(0)}
.chat-toast .ct-from{font-weight:600;font-size:.86rem;color:var(--gold);margin-bottom:.15rem}
.chat-toast .ct-body{font-size:.86rem;line-height:1.35;opacity:.92;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.chat-toast .ct-close{position:absolute;top:.35rem;right:.45rem;background:none;border:0;
  color:#fff;opacity:.55;font-size:1.15rem;line-height:1;cursor:pointer;padding:.15rem .3rem}
.chat-toast .ct-close:hover{opacity:1}
@media (prefers-reduced-motion:reduce){.chat-toast{transition:none;opacity:1;transform:none}}

/* AI-added resume points, highlighted for internal review only.
   Never written into the .docx - the vendor's copy has no highlighting. */
.xc-added{background:var(--gold-wash) !important;box-shadow:-3px 0 0 var(--gold);
  border-radius:2px;padding:1px 4px 1px 6px;transition:background 150ms var(--ease-out)}
.xc-added-legend{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:.6rem;
  flex-wrap:wrap;background:var(--gold-wash);border:1px solid #f3dfae;color:var(--gold-ink);
  border-radius:var(--radius-sm);padding:.55rem .8rem;margin:0 0 .75rem;font-size:.82rem}
.xc-added-legend .xc-added-swatch{width:14px;height:14px;border-radius:3px;flex:none;
  background:#fff;box-shadow:-3px 0 0 var(--gold),inset 0 0 0 1px #f3dfae}
.xc-added-legend span:not(.xc-added-swatch){flex:1;min-width:12rem}
@media print{.xc-added{background:none !important;box-shadow:none}.xc-added-legend{display:none}}

.xc-added-legend.warn{background:var(--warn-wash);border-color:#f0dcb4;color:var(--warn)}
.xc-added-list{margin-top:.9rem;border-top:1px solid var(--line);padding-top:.8rem}
.xc-added-list h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.4rem}
.xc-added-list ol{margin:0;padding-left:1.2rem;font-size:.86rem;color:var(--ink-soft)}
.xc-added-list li{margin:.3rem 0}
#resume-review-view .docxview{box-shadow:none}

.badge-gold{background:var(--gold-wash);color:var(--gold-ink);border:1px solid #f3dfae}

/* List tabs (Submissions: sent / drafts / all) */
.tabbar{display:flex;gap:.25rem;border-bottom:1px solid var(--line);margin-bottom:1rem;overflow-x:auto}
.tab{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .9rem;white-space:nowrap;
  color:var(--muted);font-weight:600;font-size:.88rem;border-bottom:2px solid transparent;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  transition:color 150ms var(--ease-out),background 150ms var(--ease-out),border-color 150ms var(--ease-out)}
.tab:hover{color:var(--ink);background:var(--surface-2)}
.tab.active{color:var(--brand);border-bottom-color:var(--gold)}
.tab-count{display:inline-grid;place-items:center;min-width:1.35rem;height:1.35rem;padding:0 .35rem;
  border-radius:999px;background:var(--surface-2);border:1px solid var(--line);
  font-size:.72rem;font-weight:700;color:var(--muted)}
.tab.active .tab-count{background:var(--brand);border-color:var(--brand);color:#fff}

/* "Fix & add points" dialog: recruiter notes and coverage report */
.tailor-notes{border:1px solid var(--line);border-radius:var(--radius-sm);padding:.7rem .85rem;margin:.8rem 0}
.tailor-notes label{display:block;margin-bottom:.35rem;font-size:.85rem}
.tailor-notes textarea{width:100%;resize:vertical;font:inherit;padding:.5rem .6rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}
.tailor-notes .actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.5rem}
.tailor-cov{border-radius:var(--radius-sm);padding:.6rem .8rem;margin:.6rem 0;font-size:.85rem}
.tailor-cov.ok{background:var(--ok-wash);border:1px solid #bfe6d4;color:var(--ok)}
.tailor-cov.warn{background:var(--warn-wash);border:1px solid #f0dcb4;color:var(--warn)}
.tailor-cov ul{margin:.35rem 0 0;padding-left:1.1rem}
.tailor-terms{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.3rem}

/* "Add more points" chooser */
.readd-opt{display:block;width:100%;text-align:left;cursor:pointer;margin:.55rem 0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.8rem .9rem;transition:border-color 150ms var(--ease-out),background 150ms var(--ease-out),
  transform 120ms var(--ease-out)}
.readd-opt:hover{border-color:var(--brand);background:var(--brand-wash)}
.readd-opt:active{transform:scale(.995)}
.readd-opt.on{border-color:var(--brand);background:var(--brand-wash)}
.readd-opt strong{display:block;font-size:.92rem;color:var(--ink)}
.readd-opt span{display:block;font-size:.83rem;color:var(--muted);margin-top:.15rem}
#readd-manual-box{margin-top:.6rem;border-top:1px solid var(--line);padding-top:.7rem}
#readd-manual-box textarea{width:100%;resize:vertical;font:inherit;padding:.5rem .6rem;margin-top:.35rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}
#readd-manual-box .actions{margin-top:.55rem}

.tailor-selectall{display:flex;align-items:center;gap:.4rem;margin:.8rem 0 .2rem}
.tailor-selectall .muted{margin-left:.35rem}


/* ===========================================================================
   Mail — a dark navigation shell around a light reading surface.

   The rails are dark for the reason Zoho's are: they are furniture, looked at
   all day and never read, and sinking them lets the mail itself be the only
   bright thing on screen. The message list and the reading pane stay light
   because that is where the words are.

   Only two things scroll: the message list and the reading pane. The rails and
   the app nav are fixed, so nothing slides away underneath you mid-read.
   =========================================================================== */
:root{
  /* The mail rail. Rehued to sit under the new blue rather than under the navy
     it replaced -- at 222 degrees, the same hue as --brand, dropped dark. The
     inks were checked against it: 11.7:1 for the readable one, 6.8:1 for the
     dim one, so the folder list is legible and the muted labels still recede. */
  --mail-rail:#121b30;         /* deep blue-slate, a shade under the brand */
  --mail-rail-2:#1e2943;       /* the folders column, one step lighter */
  --mail-rail-ink:#cdd6e8;
  --mail-rail-dim:#98a4bd;
  --mail-rail-hot:#ffffff;
  --mail-rail-line:rgba(255,255,255,.07);
  --mail-list:340px;
  --mail-fold:196px;
}

/* The whole app becomes a fixed frame on the mail screens: the window never
   scrolls, only the panes inside it. */
body.mailscreen{overflow:hidden}
body.mailscreen .app{height:100vh;overflow:hidden}
/* The sidebar scrolls everywhere now, so this said nothing the base rule did
   not already say. Left as the height alone, which the mail screen does need. */
body.mailscreen .sidebar{height:100vh}
body.mailscreen .content{height:100vh;min-height:0;overflow:hidden}
body.mailscreen .content-inner{
  max-width:none;width:100%;padding:0;height:100vh;min-height:0;display:flex;flex-direction:column;
}
body.mailscreen .sitefoot{display:none}
/* Flashes sit above the panes rather than pushing them off the bottom. */
body.mailscreen .content-inner > .flash{margin:.55rem .9rem 0;flex:none}

.mailapp{
  flex:1;min-height:0;
  display:grid;grid-template-columns:var(--mail-fold) var(--mail-list) 4px 1fr;
  background:var(--surface);
  overflow:hidden;
}

.mailapp ::selection{background:var(--gold-wash);color:var(--ink)}
.mailapp :focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}

/* Scrollbars belong to this design, not to the operating system. */
.mail-rows,.mail-read,.mail-fold{scrollbar-width:thin}
.mail-rows,.mail-read{scrollbar-color:#cfd5e0 transparent}
.mail-fold{scrollbar-color:rgba(255,255,255,.16) transparent}
.mail-rows::-webkit-scrollbar,.mail-read::-webkit-scrollbar,.mail-fold::-webkit-scrollbar{width:9px}
.mail-rows::-webkit-scrollbar-thumb,.mail-read::-webkit-scrollbar-thumb{
  background:#cfd5e0;border-radius:99px;border:2.5px solid var(--surface)}
.mail-fold::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.16);border-radius:99px;border:2.5px solid var(--mail-rail-2)}
.mail-rows::-webkit-scrollbar-thumb:hover,.mail-read::-webkit-scrollbar-thumb:hover{background:var(--muted-2)}

/* ---- the dark folder rail ---- */
.mail-fold{
  background:var(--mail-rail-2);
  border-right:1px solid rgba(0,0,0,.25);
  padding:.7rem .5rem;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;gap:.1rem;
  color:var(--mail-rail-ink);
}
.mail-write{
  display:flex;align-items:center;justify-content:center;gap:.42rem;
  margin-bottom:.6rem;padding:.55rem .7rem;border-radius:9px;
  background:var(--gold);color:#3b2a02;border:0;
  font-size:.845rem;font-weight:560;letter-spacing:-.006em;
  box-shadow:0 3px 10px -3px rgba(246,177,41,.5);
  transition:transform .14s var(--ease-out),box-shadow .14s var(--ease-out),background .14s var(--ease-out);
}
.mail-write:hover{background:#ffc04a;color:#3b2a02;box-shadow:0 5px 16px -4px rgba(246,177,41,.62)}
.mail-write:active{transform:scale(.98)}
.mail-write svg{width:15px;height:15px}

.mail-railhead{
  font-size:.62rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--mail-rail-dim);padding:.85rem .55rem .28rem;font-weight:600;
}
.mail-views{display:flex;flex-direction:column;gap:1px}
.mail-view{
  display:flex;align-items:center;gap:.55rem;padding:.4rem .55rem;border-radius:7px;
  color:var(--mail-rail-ink);font-size:.83rem;font-weight:400;line-height:1.35;
  transition:background .14s var(--ease-out),color .14s var(--ease-out);
}
.mail-view svg{width:15px;height:15px;flex:none;color:var(--mail-rail-dim);
  transition:color .14s var(--ease-out)}
.mail-view > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.mail-view:hover{background:rgba(255,255,255,.07);color:var(--mail-rail-hot)}
.mail-view:hover svg{color:var(--mail-rail-hot)}
/* Selected, not shouting.
   Three of these are on at once — the folder, the filter and the account — and
   a solid gold fill on each read as though everything had been switched on
   together. Gold now belongs to one thing in this rail: the Write button. Being
   in a place is marked by a quiet lift and a thin accent bar, which is what
   Zoho does and why its rail stays calm with the same three selections. */
.mail-view{position:relative}
.mail-view.is-on{
  background:rgba(255,255,255,.09);
  color:var(--mail-rail-hot);
  font-weight:550;
}
.mail-view.is-on::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:2.5px;
  border-radius:0 3px 3px 0;background:var(--gold);
}
.mail-view.is-on svg{color:var(--gold)}
.mail-view.is-on:hover{background:rgba(255,255,255,.13)}

/* The folder you are reading is the primary one — it gets a touch more than
   the filter and account below it, so the three do not compete. */
.mail-folders .mail-view.is-on{background:rgba(255,255,255,.13)}
.mail-count{
  margin-left:auto;font-style:normal;font-size:.715rem;font-weight:500;
  color:var(--mail-rail-dim);font-variant-numeric:tabular-nums;flex:none;
}
.mail-view:hover .mail-count{color:var(--mail-rail-hot)}
.mail-view.is-on .mail-count{color:var(--mail-rail-hot);opacity:.8}
/* The unread total was gold too, so a fourth thing in the rail glowed. It is
   information, not a call to action — brightness is enough. */
.mail-count.is-live{color:var(--mail-rail-ink);font-weight:600}
.mail-view.is-on .mail-count.is-live{color:var(--mail-rail-hot);opacity:1}
.mail-dot{width:8px;height:8px;border-radius:99px;flex:none;
  background:hsl(var(--h) 62% 62%);box-shadow:0 0 0 2px hsl(var(--h) 62% 62% / .22)}

/* ---- the account switcher ----
   Sits above everything else in the rail because the account is the frame the
   rest sits inside: folders, counts and search all mean something different
   depending on which mailbox is selected. */
.mail-acct{position:relative;margin-bottom:.55rem}
.mail-acct > summary{
  display:flex;align-items:center;gap:.5rem;cursor:pointer;list-style:none;
  padding:.45rem .55rem;border-radius:9px;
  background:rgba(255,255,255,.07);color:var(--mail-rail-ink);
  transition:background .14s var(--ease-out);
}
.mail-acct > summary::-webkit-details-marker{display:none}
.mail-acct > summary:hover{background:rgba(255,255,255,.12)}
.mail-acct > summary > svg{width:14px;height:14px;flex:none;color:var(--mail-rail-dim);
  transition:transform .16s var(--ease-out)}
.mail-acct[open] > summary > svg{transform:rotate(180deg)}
.mail-acct-txt{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.25}
.mail-acct-txt strong{
  font-size:.83rem;font-weight:560;color:var(--mail-rail-hot);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mail-acct-txt em{
  font-style:normal;font-size:.68rem;color:var(--mail-rail-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.mail-acct-menu{
  position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);
  background:#2b3651;border:1px solid rgba(255,255,255,.12);border-radius:10px;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.6);
  padding:.3rem;max-height:60vh;overflow-y:auto;
}
.mail-acct-item{
  display:flex;align-items:center;gap:.5rem;padding:.42rem .5rem;border-radius:7px;
  color:var(--mail-rail-ink);transition:background .12s var(--ease-out);
}
.mail-acct-item:hover{background:rgba(255,255,255,.09);color:var(--mail-rail-hot)}
.mail-acct-item.is-on{background:rgba(246,177,41,.16)}
.mail-acct-item.is-on strong{color:var(--gold)}
.mail-acct-item > span{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.25}
.mail-acct-item strong{font-size:.8rem;font-weight:520;color:var(--mail-rail-hot);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-acct-item em{font-style:normal;font-size:.67rem;color:var(--mail-rail-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-acct-item > svg{width:14px;height:14px;flex:none;color:var(--mail-rail-dim)}
.mail-acct-item.is-add strong{color:var(--mail-rail-ink);font-weight:450}
.mail-acct-rule{height:1px;background:rgba(255,255,255,.1);margin:.3rem .2rem}

.mail-railnote{
  margin-top:auto;display:flex;gap:.45rem;padding:.55rem .55rem;border-radius:8px;
  background:rgba(246,177,41,.13);color:#f3d08a;font-size:.73rem;line-height:1.45;
}
.mail-railnote svg{width:14px;height:14px;flex:none;margin-top:.1rem}
.mail-railnote strong{display:block;font-size:.75rem;margin-bottom:.1rem;color:#ffd98a}
.mail-railnote p{margin:.15rem 0 0;opacity:.85}
.mail-railnote a{color:#ffd98a;text-decoration:underline}

/* ---- the message list ---- */
.mail-list{
  border-right:1px solid var(--line);display:flex;flex-direction:column;
  min-width:0;min-height:0;background:var(--surface);
}
.mail-search{position:relative;display:flex;align-items:center;padding:.55rem .65rem;
  border-bottom:1px solid var(--line-2);flex:none}
.mail-search > svg{position:absolute;left:1.15rem;width:14px;height:14px;color:var(--muted-2);pointer-events:none}
.mail-search input{
  width:100%;padding:.42rem .6rem .42rem 1.95rem;border:1px solid var(--line);border-radius:8px;
  background:var(--surface-2);font:inherit;font-size:.815rem;font-weight:400;color:var(--ink);
  transition:border-color .14s var(--ease-out),background .14s var(--ease-out),box-shadow .14s var(--ease-out);
}
.mail-search input::placeholder{color:var(--muted-2)}
.mail-search input:focus{outline:none;border-color:var(--brand);background:var(--surface);
  box-shadow:0 0 0 3px rgba(37,53,89,.08)}
.mail-search input::-webkit-search-cancel-button{display:none}
.mail-search-clear{position:absolute;right:1.1rem;display:grid;place-items:center;
  width:19px;height:19px;border-radius:5px;color:var(--muted)}
.mail-search-clear svg{position:static;width:12px;height:12px}
.mail-search-clear:hover{background:var(--line-2);color:var(--ink)}

.mail-rows{overflow-y:auto;overflow-x:hidden;flex:1;min-height:0}
.mail-daymark{
  position:sticky;top:0;z-index:2;padding:.42rem .8rem .24rem;
  background:linear-gradient(var(--surface) 64%,rgba(255,255,255,0));
}
.mail-daymark span{font-size:.65rem;font-weight:600;letter-spacing:.055em;
  text-transform:uppercase;color:var(--muted-2)}

/* Denser than before: more mail on screen without crowding it. */
.mail-row{
  display:flex;gap:.55rem;padding:.5rem .8rem;border-bottom:1px solid var(--line-2);
  color:var(--ink);position:relative;
  transition:background .14s var(--ease-out);
}
.mail-row:hover{background:var(--surface-2)}
/* The conversation open in the pane beside it. Reads as selected at a glance:
   a 2px hairline against a pale wash was easy to lose in a long list, and the
   list reloads from the top on every open. */
.mail-row.is-open,.mail-row.is-open:hover{
  background:var(--brand-wash);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 28%,transparent);
}
.mail-row.is-open::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand)}
.mail-row.is-open .mail-subject{color:var(--ink);font-weight:600}
.mail-row-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:.02rem}
.mail-row-top{display:flex;align-items:baseline;gap:.5rem}
.mail-who{
  font-size:.85rem;font-weight:400;color:var(--ink-soft);letter-spacing:-.006em;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;
}
.mail-row-top time{font-size:.735rem;font-weight:400;color:var(--muted-2);flex:none;font-variant-numeric:tabular-nums}
.mail-subject{
  font-size:.845rem;font-weight:400;color:var(--muted);letter-spacing:-.006em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mail-snip{font-size:.78rem;font-weight:400;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Unread reads as weight, not as a different size. */
.mail-row.is-new .mail-who{font-weight:650;color:var(--ink)}
.mail-row.is-new .mail-subject{font-weight:500;color:var(--ink)}
.mail-row.is-new .mail-row-top time{color:var(--brand);font-weight:500}

.mail-face{
  width:29px;height:29px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-size:.68rem;font-weight:700;letter-spacing:.01em;
  background:hsl(var(--h) 58% 93%);color:hsl(var(--h) 46% 32%);
}
.mail-face-lg{width:36px;height:36px;border-radius:10px;font-size:.76rem}
.mail-to{
  display:inline-block;font-size:.63rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted-2);margin-right:.15rem;vertical-align:.05em;
}
.mail-row.is-new .mail-to{color:var(--muted)}

.mail-tags{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.16rem}
.mail-tag{
  display:inline-flex;align-items:center;gap:.2rem;padding:.06rem .32rem;border-radius:5px;
  background:var(--line-2);color:var(--muted);font-size:.69rem;font-weight:500;max-width:180px;
}
.mail-tag svg{width:10px;height:10px;flex:none}
.mail-tag.is-linked{background:var(--brand-wash);color:var(--brand)}
.mail-tag.is-linked em{font-style:normal;font-weight:800;color:var(--warn);margin-left:.08rem}
.mail-tag.is-star{background:var(--gold-wash);color:var(--gold-ink)}
.mail-tag.is-flag{background:var(--danger-wash);color:var(--danger)}

/* ---- the reading pane ---- */
.mail-read{overflow-y:auto;overflow-x:hidden;min-width:0;min-height:0;
  background:var(--surface);display:flex;flex-direction:column}
.mail-head{padding:1rem 1.3rem .75rem;border-bottom:1px solid var(--line-2);flex:none}
.mail-head-line{display:flex;align-items:flex-start;gap:.8rem}
.mail-head h1{font-size:1rem;line-height:1.45;flex:1;min-width:0;font-weight:560;letter-spacing:-.012em;color:var(--ink)}
.mail-head-acts{display:flex;gap:.28rem;flex:none;align-items:center}
.mail-read .iconbtn{width:28px;height:28px}
.mail-read .iconbtn:hover{color:var(--brand);border-color:var(--muted-2);background:var(--surface-2)}
.mail-read .iconbtn.is-star{color:var(--gold-ink);border-color:#e8d19a;background:var(--gold-wash)}
.mail-read .iconbtn.is-flag{color:var(--danger);border-color:#e8b4b4;background:var(--danger-wash)}
/* Delete only turns red on approach. A permanently red button in a row of six
   pulls the eye to the one action nobody is looking for. */
.mail-read .iconbtn.is-danger:hover{color:var(--danger);border-color:#e8b4b4;background:var(--danger-wash)}
.mail-read .iconbtn svg{width:14px;height:14px}
.mail-head-acts .btn{font-size:.78rem;padding:.32rem .6rem}
.mail-head-acts .btn svg{width:13px;height:13px}

.mail-from{display:flex;align-items:center;gap:.6rem;margin-top:.7rem}
.mail-from-txt{min-width:0;flex:1;font-size:.815rem;line-height:1.45;font-weight:400}
.mail-from-txt strong{font-weight:620}
.mail-from-txt .muted{font-size:.765rem}
.mail-when{font-size:.74rem;color:var(--muted);flex:none;font-variant-numeric:tabular-nums}

.mail-context{
  display:flex;align-items:flex-start;gap:.55rem;margin-top:.75rem;padding:.5rem .65rem;
  border-radius:9px;background:var(--brand-wash);font-size:.8rem;flex-wrap:wrap;
}
.mail-context > svg{width:15px;height:15px;flex:none;color:var(--brand);margin-top:.1rem}
.mail-context > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:.06rem}
.mail-context .muted{font-size:.755rem}
.mail-context.is-guess{background:var(--warn-wash)}
.mail-context.is-guess > svg{color:var(--warn)}
.mail-guess{font-size:.74rem;color:#6b4708;font-weight:600}
.mail-context form{display:flex;gap:.35rem;margin-top:.5rem;flex-wrap:wrap;width:100%}
.mail-context select{
  flex:1;min-width:190px;padding:.3rem .45rem;border:1px solid var(--line);border-radius:7px;
  font:inherit;font-size:.775rem;background:var(--surface);color:var(--ink);
}
.mail-relink{flex:none}
.mail-relink summary{cursor:pointer;font-size:.74rem;color:var(--brand);font-weight:620;
  list-style:none;padding:.12rem .35rem;border-radius:5px}
.mail-relink summary::-webkit-details-marker{display:none}
.mail-relink summary:hover{background:rgba(37,53,89,.08)}
.mail-relink[open]{flex-basis:100%;order:9}

/* The "link this to a submission" control, when nothing is linked. Quiet,
   because most mail is not about a submission and a loud notice on 900 of 936
   messages is just noise. */
.mail-linkable{margin-top:.6rem}
.mail-linkable summary{
  display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;list-style:none;
  font-size:.745rem;color:var(--muted-2);font-weight:520;padding:.15rem .4rem;
  border-radius:6px;transition:color .14s var(--ease-out),background .14s var(--ease-out);
}
.mail-linkable summary::-webkit-details-marker{display:none}
.mail-linkable summary svg{width:13px;height:13px}
.mail-linkable summary:hover{color:var(--brand);background:var(--brand-wash)}
.mail-linkable form{display:flex;gap:.35rem;margin-top:.5rem;flex-wrap:wrap}
.mail-linkable select{
  flex:1;min-width:190px;padding:.3rem .45rem;border:1px solid var(--line);border-radius:7px;
  font:inherit;font-size:.775rem;background:var(--surface);color:var(--ink);
}

/* ---- the body ---- */
.mail-body{
  padding:.75rem 1.3rem 1.3rem;font-size:.86rem;line-height:1.62;color:var(--ink-soft);
  font-weight:400;max-width:80ch;overflow-wrap:anywhere;
}
.mail-body img{max-width:100%;height:auto;border-radius:5px}
.mail-body table{max-width:100%;border-collapse:collapse}
.mail-body td,.mail-body th{padding:.22rem .38rem}
.mail-body blockquote{margin:.65rem 0;padding-left:.85rem;border-left:2px solid var(--line);color:var(--muted)}
.mail-body a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;text-decoration-color:rgba(37,53,89,.32)}
.mail-body a:hover{text-decoration-color:var(--brand)}
.mail-plain{font-family:inherit;white-space:pre-wrap;word-break:break-word;margin:0;
  font-size:.845rem;line-height:1.62;font-weight:400}

.mail-imgblock{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  margin:0 1.3rem .8rem;padding:.45rem .65rem;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--line);
  font-size:.755rem;color:var(--muted);
}
.mail-imgblock span{flex:1;min-width:180px}

/* Attachments live below the message, where they belong: you read first, then
   deal with what came with it. */
.mail-files{
  display:flex;flex-wrap:wrap;gap:.45rem;margin:0 1.3rem 1.2rem;padding-top:.85rem;
  border-top:1px solid var(--line-2);
}
.mail-files-lead{
  flex-basis:100%;font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted-2);font-weight:600;margin-bottom:.1rem;
}
.mail-file{
  display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem .4rem .45rem;
  border:1px solid var(--line);border-radius:9px;background:var(--surface);max-width:250px;
  transition:border-color .14s var(--ease-out),box-shadow .14s var(--ease-out),transform .14s var(--ease-out);
}
.mail-file:hover{border-color:var(--brand);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.mail-file:active{transform:translateY(0)}
.mail-file-ext{
  width:29px;height:29px;border-radius:7px;flex:none;display:grid;place-items:center;
  background:var(--line-2);color:var(--muted);font-size:.56rem;font-weight:800;letter-spacing:.02em;
}
.mail-file.is-doc .mail-file-ext{background:var(--gold-wash);color:var(--gold-ink)}
.mail-file-txt{min-width:0;display:flex;flex-direction:column;font-size:.775rem;color:var(--ink)}
.mail-file-txt em{font-style:normal;font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---- the conversation stack ----
   Every message in the thread in one pane, each one collapsible. Replies used
   to be links to other pages, so following a four-message exchange meant four
   page loads and losing your place each time. */
.mail-conv{display:flex;flex-direction:column;padding:.25rem 0 1.6rem}
.mail-conv-trim{
  margin:.5rem 1.3rem .3rem;padding:.4rem .6rem;border-radius:7px;
  background:var(--surface-2);color:var(--muted-2);font-size:.73rem;line-height:1.45;
}

.mail-turn{border-bottom:1px solid var(--line-2)}
.mail-turn:last-child{border-bottom:0}
.mail-conv.is-single > .mail-turn{border-bottom:0}

.mail-turn-head{
  display:flex;align-items:center;gap:.6rem;padding:.62rem 1.3rem;cursor:pointer;
  list-style:none;transition:background .14s var(--ease-out);
}
.mail-turn-head::-webkit-details-marker{display:none}
.mail-turn-head:hover{background:var(--surface-2)}
.mail-turn[open] > .mail-turn-head{padding-bottom:.35rem}
.mail-turn[open] > .mail-turn-head:hover{background:transparent}
/* The one that was clicked, so it is findable in a long thread. */
.mail-turn.is-current > .mail-turn-head{box-shadow:inset 2px 0 0 var(--gold)}

.mail-turn-who{min-width:0;flex:1;display:flex;flex-direction:column;gap:.04rem}
.mail-turn-name{
  display:flex;align-items:baseline;gap:.35rem;min-width:0;
  font-size:.83rem;line-height:1.4;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mail-turn-name strong{font-weight:600;letter-spacing:-.008em}
.mail-turn-addr{font-size:.75rem;color:var(--muted-2);font-weight:400}
.mail-turn-tag{
  flex:none;font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  padding:.05rem .3rem;border-radius:4px;background:var(--ok-wash);color:var(--ok);
}
.mail-turn-tag.is-draft{background:var(--warn-wash);color:#6b4708}
.mail-turn-sub{
  font-size:.755rem;color:var(--muted);font-weight:400;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Collapsed shows the snippet, expanded shows who it went to — the same line
   answering whichever question you have at that moment. */
.mail-turn      .mail-turn-to{display:none}
.mail-turn[open] .mail-turn-to{display:inline}
.mail-turn[open] .mail-turn-snip{display:none}
.mail-turn-clip{width:13px;height:13px;flex:none;color:var(--muted-2)}
.mail-turn-when{
  flex:none;font-size:.735rem;color:var(--muted-2);font-variant-numeric:tabular-nums;
}
.mail-turn-head .mail-face{width:30px;height:30px;border-radius:9px}

.mail-turn-body{padding-top:.1rem}
.mail-turn-acts{display:flex;gap:.4rem;flex-wrap:wrap;padding:0 1.3rem 1rem}
.mail-turn-acts .btn{font-size:.775rem;padding:.34rem .68rem}
.mail-turn-acts .btn svg{width:13px;height:13px}

.mail-head-count{
  display:inline-block;margin-left:.4rem;font-size:.72rem;font-weight:500;
  color:var(--muted);vertical-align:.08em;
}
.mail-head-count::before{content:"("}
.mail-head-count::after{content:")"}

/* How many messages are behind this row, the way Gmail counts them. */
.mail-convn{
  display:inline-block;margin-left:.3rem;font-size:.68rem;font-weight:500;
  color:var(--muted-2);font-variant-numeric:tabular-nums;
}
.mail-row.is-new .mail-convn{color:var(--brand)}

/* ---- picking several at once ----
   The checkbox sits over the avatar and only appears on approach, so the list
   reads the same as it did until somebody actually wants to select. */
.mail-item{position:relative}
.mail-pick{
  position:absolute;left:.8rem;top:.5rem;z-index:2;
  width:29px;height:29px;display:grid;place-items:center;border-radius:9px;
  background:var(--surface);opacity:0;pointer-events:none;
  transition:opacity .12s var(--ease-out);
}
.mail-pick input{width:15px;height:15px;accent-color:var(--brand);cursor:pointer;margin:0}
.mail-item:hover .mail-pick,
.mail-pick:focus-within,
.mail-pick.is-on,
body.is-picking .mail-pick{opacity:1;pointer-events:auto}
/* The avatar underneath would otherwise show through the checkbox. */
.mail-item:hover .mail-face,
.mail-pick.is-on + .mail-row .mail-face,
body.is-picking .mail-face{visibility:hidden}
.mail-item:has(.mail-pick.is-on) .mail-row{background:var(--brand-wash)}

.mail-bulk{
  display:flex;align-items:center;gap:.3rem;flex:none;
  padding:.4rem .65rem;border-bottom:1px solid var(--line-2);background:var(--surface-2);
}
.mail-bulk[hidden]{display:none}
.mail-bulk-all{display:grid;place-items:center;width:29px;height:29px}
.mail-bulk-all input{width:15px;height:15px;accent-color:var(--brand);cursor:pointer;margin:0}
.mail-bulk-n{
  font-size:.755rem;font-weight:500;color:var(--ink-soft);margin-right:auto;
  font-variant-numeric:tabular-nums;
}
.mail-bulk-btn{
  display:grid;place-items:center;width:28px;height:28px;border-radius:7px;
  border:1px solid transparent;background:transparent;color:var(--muted);
  transition:background .12s var(--ease-out),color .12s var(--ease-out),border-color .12s var(--ease-out);
}
.mail-bulk-btn svg{width:14px;height:14px}
.mail-bulk-btn:hover{background:var(--surface);border-color:var(--line);color:var(--brand)}
.mail-bulk-btn.is-danger:hover{color:var(--danger);border-color:#e8b4b4;background:var(--danger-wash)}
.mail-bulk-clear{
  background:none;border:0;font:inherit;font-size:.735rem;color:var(--muted);
  padding:.2rem .4rem;border-radius:6px;cursor:pointer;
}
.mail-bulk-clear:hover{background:var(--line-2);color:var(--ink)}

/* ---- loading the next hundred ---- */
.mail-more-rows{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1.1rem .8rem 1.6rem;font-size:.755rem;color:var(--muted-2);
}
.mail-more-spin{
  width:13px;height:13px;border-radius:99px;flex:none;
  border:1.6px solid var(--line);border-top-color:var(--muted-2);
  animation:mailspin .7s linear infinite;
}
@keyframes mailspin{to{transform:rotate(360deg)}}
.mail-more-end{
  padding:1rem .8rem 1.6rem;text-align:center;font-size:.73rem;color:var(--muted-2);
}

/* ---- the drag handle between the list and the reading pane ----
   Long vendor subjects are unreadable at a fixed width, and how much of the
   screen the list deserves depends on what someone is doing with it. */
.mail-grip{
  position:relative;cursor:col-resize;background:var(--line);
  transition:background .12s var(--ease-out);
  touch-action:none;
}
/* A 5px target is precise but hard to hit, so the hit area is wider than the
   line it draws. */
.mail-grip::after{
  content:"";position:absolute;top:0;bottom:0;left:-3px;right:-3px;
}
.mail-grip::before{
  content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:2px;height:26px;border-radius:99px;background:var(--muted-2);
  opacity:0;transition:opacity .14s var(--ease-out);
}
.mail-grip:hover,.mail-grip:focus-visible{background:var(--brand)}
.mail-grip:hover::before,.mail-grip:focus-visible::before{opacity:.55;background:#fff}
body.is-mail-resizing{cursor:col-resize;user-select:none}
body.is-mail-resizing .mail-grip{background:var(--brand)}
body.is-mail-resizing iframe{pointer-events:none}
/* ---- empty states ---- */
.mail-blank{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;
  padding:2.6rem 1.4rem;text-align:center;color:var(--muted);font-size:.815rem;
}
.mail-blank svg{width:32px;height:32px;color:var(--muted-2);opacity:.5;margin-bottom:.15rem}
.mail-blank p{margin:0}
.mail-blank-lg{height:100%;justify-content:center}
.mail-blank-lg svg{width:48px;height:48px}
.truncate{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- narrower screens ---- */
@media (max-width:1240px){
  .mailapp{--mail-fold:0px;--mail-list:310px;grid-template-columns:var(--mail-list) 4px 1fr}
  .mail-fold{display:none}
}
@media (max-width:880px){
  body.mailscreen{overflow:auto}
  body.mailscreen .app,body.mailscreen .content,body.mailscreen .content-inner{height:auto;overflow:visible}
  .mailapp{grid-template-columns:1fr;height:auto}
  .mail-list{border-right:0;max-height:48vh}
  .mail-read{border-top:1px solid var(--line)}
  /* Nothing to drag when the panes are stacked, and a 1fr-wide handle would be
     a mystery bar across the screen. */
  .mail-grip{display:none}
  .mail-head,.mail-body,.mail-turn-head,.mail-turn-acts{padding-left:.9rem;padding-right:.9rem}
  .mail-files,.mail-imgblock,.mail-conv-trim{margin-left:.9rem;margin-right:.9rem}
}
@media (prefers-reduced-motion:reduce){
  .mail-view,.mail-row,.mail-file,.mail-thread-row,.mail-search input,.mail-write{transition:none}
  .mail-file:hover,.mail-write:active{transform:none}
}

/* ---- what the model suggests, and what you can do about it ---- */
.mail-ai{padding:.75rem 1.3rem 0}
.mail-ai-card{
  display:flex;align-items:flex-start;gap:.65rem;padding:.6rem .75rem;border-radius:9px;
  background:var(--gold-wash);border:1px solid #f0dcb0;
}
.mail-ai-badge{
  flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--gold);color:#4a3402;font-size:.72rem;font-weight:800;
  font-variant-numeric:tabular-nums;
}
.mail-ai-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:.08rem;font-size:.8rem}
.mail-ai-txt strong{color:var(--ink);font-size:.845rem;font-weight:640}
.mail-ai-txt span{color:#6b4708}
.mail-ai-extra{font-weight:640}
.mail-ai-why{font-style:italic;opacity:.85;font-size:.765rem}
.mail-ai-acts{display:flex;gap:.3rem;flex:none;align-items:flex-start}
.mail-ai-acts form{display:contents}
.mail-ai-done{
  margin:0;padding:.45rem .7rem;border-radius:8px;background:var(--ok-wash);color:var(--ok);
  font-size:.79rem;font-weight:600;
}

/* The actions live in a vertical strip on the right of the reading pane —
   always in the same place, out of the way of the words, and they do not
   push the message down the screen. */
.mail-tools{
  position:absolute;top:.85rem;right:.85rem;z-index:5;
  display:flex;flex-direction:column;gap:.3rem;
}
.mail-read{position:relative}
.mail-tool{
  position:relative;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;
  transition:border-color .14s var(--ease-out),color .14s var(--ease-out),background .14s var(--ease-out);
}
.mail-tool svg{width:15px;height:15px}
.mail-tool:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-wash)}
.mail-tool:active{transform:scale(.95)}
.mail-tool::after{
  content:attr(data-label);
  position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%) translateX(4px);
  padding:.26rem .5rem;border-radius:6px;white-space:nowrap;
  background:var(--ink);color:#fff;font-size:.735rem;font-weight:520;
  opacity:0;pointer-events:none;box-shadow:var(--shadow-md);
  transition:opacity .14s var(--ease-out),transform .14s var(--ease-out);
}
.mail-tool:hover::after,.mail-tool:focus-visible::after{opacity:1;transform:translateY(-50%) translateX(0)}
.mail-tools form{display:contents}
@media (prefers-reduced-motion:reduce){.mail-tool,.mail-tool::after{transition:none}}

/* review screens */
.notice{padding:.65rem .85rem;border-radius:9px;margin-bottom:1rem;font-size:.83rem;line-height:1.55;
  background:var(--surface-2);border:1px solid var(--line);color:var(--muted)}
.notice-warn{background:var(--warn-wash);color:#6b4708;border-color:#f0dcb0}
/* Used by the "filled in from an email" banners. Without a rule of its own it
   rendered as unstyled text and read as part of the form. */
.notice-info{background:var(--brand-wash);border-color:rgba(37,53,89,.14);color:var(--ink-soft)}
.notice strong{display:block;margin-bottom:.12rem;color:var(--ink)}

/* The banner on a form reached from an email, on both the candidate and the
   position side, so the two entry points look like the same feature. */
.mail-prefill{display:flex;gap:.6rem;align-items:flex-start;
  background:var(--brand-wash);border-color:rgba(37,53,89,.14);color:var(--ink-soft)}
.mail-prefill > svg{width:16px;height:16px;flex:none;color:var(--brand);margin-top:.15rem}
.mail-prefill.notice-warn{background:var(--warn-wash);border-color:#f0dcb0;color:#6b4708}
.mail-prefill.notice-warn > svg{color:#a8730c}
.formcard textarea{
  width:100%;padding:.5rem .65rem;border:1px solid var(--line);border-radius:8px;
  font:inherit;font-size:.845rem;line-height:1.55;background:var(--surface);color:var(--ink);
  resize:vertical;
}
.formcard textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,53,89,.09)}
.pickfiles{display:flex;flex-direction:column;gap:.28rem}
.pickfile{
  display:flex;align-items:center;gap:.45rem;padding:.35rem .5rem;border-radius:7px;
  border:1px solid var(--line);cursor:pointer;font-weight:450;font-size:.83rem;
  transition:border-color .14s var(--ease-out),background .14s var(--ease-out);
}
.pickfile:hover{background:var(--surface-2)}
.pickfile:has(input:checked){border-color:var(--brand);background:var(--brand-wash)}
.pickfile input{accent-color:var(--brand)}
.pickfile em{font-style:normal;color:var(--muted);font-size:.765rem;margin-left:.25rem}

/* ---- composing ---- */
/* Fills the space left of it, the way Zoho does — measured on their compose:
   the To field runs 1509px wide in a 1920px window, with a 95px right gap.
   A 900px cap here left most of the screen empty and pushed everything left. */
.composewrap{
  grid-column:2 / -1;                 /* the rail is column 1 */
  padding:1.15rem 1.5rem 2.5rem;
  overflow-y:auto;min-height:0;min-width:0;
}
/* Measured against Zoho: their To field runs 1509px in a 1920px window with a
   95px gap. A 1180px cap here left 440px of dead space to the right. */
.composewrap .compose{max-width:1560px}
.compose-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.compose-head h1{font-size:1.05rem;font-weight:560;letter-spacing:-.012em}
.compose-context{
  display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem;padding:.5rem .7rem;
  border-radius:8px;background:var(--brand-wash);color:var(--brand);font-size:.8rem;
}
.compose-context svg{width:14px;height:14px;flex:none}
.compose-context strong{color:var(--ink);font-weight:560}
.compose-row{display:flex;align-items:center;gap:.7rem;padding:.45rem .1rem;
  border-bottom:1px solid var(--line-2)}
.compose-row label{
  flex:none;width:60px;font-size:.735rem;font-weight:680;color:var(--muted);
  text-transform:uppercase;letter-spacing:.045em;
}
.compose-row input,.compose-row select{
  flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:.865rem;
  font-weight:400;color:var(--ink);padding:.15rem 0;
}
.compose-row input:focus,.compose-row select:focus{outline:none}
.compose-row:focus-within{border-bottom-color:var(--brand)}
.compose-row input::placeholder{color:var(--muted-2)}
.compose-static{font-size:.865rem}

.compose-bodywrap{border:1px solid var(--line);border-radius:10px;margin-top:.9rem;
  background:var(--surface);overflow:hidden}
.compose-tools{
  display:flex;align-items:center;gap:.12rem;padding:.35rem .45rem;
  border-bottom:1px solid var(--line-2);background:var(--surface-2);flex-wrap:wrap;
}
.compose-tools button{
  border:0;background:transparent;border-radius:5px;padding:.22rem .45rem;cursor:pointer;
  font:inherit;font-size:.775rem;color:var(--ink-soft);min-width:26px;
  transition:background .14s var(--ease-out),color .14s var(--ease-out);
}
.compose-tools button:hover{background:var(--brand-wash);color:var(--brand)}
.compose-sep{width:1px;height:15px;background:var(--line);margin:0 .25rem}
.compose-body{
  min-height:210px;padding:.85rem 1rem;font-size:.87rem;line-height:1.62;color:var(--ink);
  font-weight:400;outline:none;overflow-wrap:anywhere;
}
.compose-quoted{
  padding:.55rem 1rem .9rem;border-top:1px solid var(--line-2);
  font-size:.82rem;color:var(--muted);max-height:260px;overflow:auto;
}
.compose-acts{display:flex;align-items:center;gap:.5rem;margin-top:.9rem;flex-wrap:wrap}
.compose-acts .btn svg{width:14px;height:14px}
.compose-spacer{flex:1}
.compose-note{flex-basis:100%;font-size:.745rem;color:var(--muted-2);margin:.45rem 0 0}
.hidden-form{display:none}

/* ---- attachments on the composer ---- */
.compose-attach{margin-top:.8rem}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.attach-btn{
  display:inline-flex;align-items:center;gap:.35rem;padding:.34rem .65rem;border-radius:8px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);
  font-size:.8rem;font-weight:520;cursor:pointer;
  transition:border-color .14s var(--ease-out),color .14s var(--ease-out),background .14s var(--ease-out);
}
.attach-btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-wash)}
.attach-btn svg{width:14px;height:14px}
.attach-hint{font-size:.75rem;color:var(--muted-2);margin-left:.5rem}
.attach-hint.is-bad{color:var(--danger);font-weight:600}
.attach-list{list-style:none;margin:.45rem 0 0;padding:0;display:flex;flex-direction:column;gap:.18rem}
.attach-list li{font-size:.78rem;color:var(--ink-soft);padding:.22rem .45rem;border-radius:6px;
  background:var(--surface-2);font-variant-numeric:tabular-nums}
.attach-list li.is-bad{background:var(--danger-wash);color:var(--danger);font-weight:600}
.attach-carry{margin-top:.6rem}
.attach-carry-lead{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted-2);font-weight:700;margin-bottom:.2rem}
.attach-keep{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--ink-soft);
  padding:.2rem 0;cursor:pointer}
.attach-keep input{accent-color:var(--brand)}
.attach-keep em{font-style:normal;color:var(--muted);font-size:.75rem}

/* ---- first run ---- */
.mail-onboard{display:grid;place-items:center;padding:2rem 1.4rem 4rem;overflow-y:auto;flex:1}
.mail-onboard-card{max-width:620px;width:100%}
.mail-onboard-art{width:42px;height:42px;color:var(--brand);opacity:.5;margin-bottom:.9rem}
.mail-onboard h1{font-size:1.42rem;margin-bottom:.45rem;font-weight:640}
.mail-onboard .lede{font-size:.92rem;color:var(--muted);line-height:1.62;max-width:60ch;margin-bottom:1.5rem}
.mail-steps{margin:0 0 1.6rem;padding:0;list-style:none;counter-reset:step;
  display:flex;flex-direction:column;gap:.85rem}
.mail-steps li{counter-increment:step;position:relative;padding-left:2.3rem;
  font-size:.845rem;line-height:1.6;color:var(--muted)}
.mail-steps li::before{
  content:counter(step);position:absolute;left:0;top:-.1rem;
  width:23px;height:23px;border-radius:7px;display:grid;place-items:center;
  background:var(--brand-wash);color:var(--brand);font-size:.72rem;font-weight:750;
}
.mail-steps strong{color:var(--ink);font-weight:620}
.mail-steps em{font-style:normal;color:var(--ink-soft);font-weight:580}
.mail-onboard-acts{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:1.3rem}
.mail-onboard-foot{font-size:.765rem;color:var(--muted-2);margin:0}

/* ---- mailbox setup ---- */
.mbox{margin-bottom:.85rem}
.mbox.is-bad{border-color:#f0d6a8}
.mbox-head{display:flex;align-items:center;gap:.7rem}
.mbox-id{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.4}
.mbox-id strong{font-size:.92rem;font-weight:620}
.mbox-id .muted{font-size:.765rem}
.mbox-error{margin:.65rem 0 0;padding:.5rem .65rem;border-radius:8px;
  background:var(--warn-wash);color:#6b4708;font-size:.8rem;line-height:1.5}
.mbox-when{font-size:.72rem;color:var(--muted-2);margin-left:auto}
.mbox-acts{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.85rem}
.mbox-acts form{display:contents}
.mbox-foot{font-size:.77rem;max-width:70ch;margin-top:1.1rem}
.btn-danger-ghost{background:var(--surface);color:var(--danger);border-color:var(--line)}
.btn-danger-ghost:hover{background:var(--danger-wash);border-color:#e8b4b4}

.formcard{max-width:820px}
.formcard .field{margin-bottom:.95rem}
.formcard label{display:block;font-size:.8rem;font-weight:620;color:var(--ink-soft);margin-bottom:.28rem}
/* date and file were missing from this list, so those fields fell back to the
   browser's own look and sat noticeably taller than the ones beside them. */
.formcard input[type=text],.formcard input[type=email],.formcard input[type=password],
.formcard input[type=number],.formcard input[type=date],.formcard input[type=tel],
.formcard input[type=file],.formcard select{
  width:100%;padding:.45rem .6rem;border:1px solid var(--line);border-radius:8px;
  font:inherit;font-size:.855rem;font-weight:400;background:var(--surface);color:var(--ink);
  transition:border-color .14s var(--ease-out),box-shadow .14s var(--ease-out);
}
.formcard input:focus,.formcard select:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(37,53,89,.09)}
.formcard .hint{font-size:.765rem;color:var(--muted);margin:.3rem 0 0;line-height:1.5;max-width:68ch}
/* A file input cannot take padding on its button, so it needs a little less of
   its own or it stands taller than every field around it. */
.formcard input[type=file]{padding:.32rem .45rem;font-size:.8rem}
/* The buttons at the foot of a form. This had no rule at all, so Save and
   Cancel sat flush against the last field with nothing separating them. */
.formactions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  margin-top:1.15rem;padding-top:1rem;border-top:1px solid var(--line)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 .9rem}
.grid3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:0 .9rem}
/* Three fields of equal weight. .grid3 above is deliberately lopsided -- it
   exists for "server, port, security", where the host needs the room -- so
   reusing it for three ordinary fields gave the first one double the width. */
.grid3even{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 .9rem}
/* Top-aligned: one column carrying a two-line hint should not leave the
   fields beside it floating in the middle of a tall row. */
.grid2,.grid3,.grid3even{align-items:start}
@media (max-width:720px){.grid2,.grid3,.grid3even{grid-template-columns:1fr}}
.advanced{margin:.35rem 0 1rem;padding:.65rem .8rem;border:1px solid var(--line);
  border-radius:9px;background:var(--surface-2)}
.advanced summary{cursor:pointer;font-size:.83rem;font-weight:620;color:var(--ink-soft)}
.advanced summary:hover{color:var(--brand)}
.advanced[open] summary{margin-bottom:.65rem}
.field-check{display:flex;flex-direction:column;justify-content:center}
.check{display:flex;align-items:center;gap:.45rem;font-weight:520;cursor:pointer}
.check input{width:15px;height:15px;accent-color:var(--brand)}
.formacts{display:flex;gap:.55rem;margin-top:.35rem;flex-wrap:wrap}
.pill{font-size:.7rem;font-weight:680;padding:.12rem .45rem;border-radius:99px;flex:none}
.pill-ok{background:var(--ok-wash);color:var(--ok)}
.pill-warn{background:var(--warn-wash);color:var(--warn)}
.pill-muted{background:var(--line-2);color:var(--muted)}

/* ---- choosing which folders to read ---- */
.mbox-fold{margin-top:.8rem;border-top:1px solid var(--line-2);padding-top:.65rem}
.mbox-fold summary{cursor:pointer;font-size:.81rem;color:var(--ink-soft);display:flex;
  align-items:center;gap:.35rem;flex-wrap:wrap;list-style:none}
.mbox-fold summary::-webkit-details-marker{display:none}
.mbox-fold summary::before{content:"\25B8";color:var(--muted-2);font-size:.78rem}
.mbox-fold[open] summary::before{content:"\25BE"}
.mbox-fold summary:hover{color:var(--brand)}
.mbox-foldform{margin-top:.65rem;display:flex;flex-direction:column;gap:.08rem}
.foldrow{display:flex;align-items:center;gap:.5rem;padding:.3rem .45rem;border-radius:7px;
  font-size:.81rem;cursor:pointer;transition:background .14s var(--ease-out)}
.foldrow:hover{background:var(--surface-2)}
.foldrow input{accent-color:var(--brand)}
.foldrow.is-locked{opacity:.6;cursor:not-allowed}
.foldname{font-weight:520;color:var(--ink)}
.foldrole{font-size:.65rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700;
  color:var(--muted);background:var(--line-2);padding:.04rem .3rem;border-radius:4px}
.foldn{font-style:normal;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.foldwhy{font-size:.73rem;color:var(--muted-2);margin-left:auto;text-align:right;max-width:44ch}
.foldwhy.is-bad{color:var(--warn)}
.mbox-foldacts{display:flex;gap:.4rem;margin-top:.65rem;flex-wrap:wrap}

/* ---- choosing a workspace at sign-in ---- */
.wspick{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin:0 0 1.1rem}
@media (max-width:420px){.wspick{grid-template-columns:1fr}}
.wsopt{display:flex;flex-direction:column;gap:.08rem;padding:.55rem .65rem;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);text-align:left;
  transition:border-color .14s var(--ease-out),background .14s var(--ease-out),box-shadow .14s var(--ease-out)}
.wsopt:hover{border-color:var(--muted-2);background:var(--surface-2)}
.wsopt.is-on{border-color:var(--brand);background:var(--brand-wash);box-shadow:0 0 0 3px rgba(37,53,89,.07)}
.wsopt-name{font-size:.86rem;font-weight:680;color:var(--ink);letter-spacing:-.01em}
.wsopt.is-on .wsopt-name{color:var(--brand)}
.wsopt-sub{font-size:.72rem;color:var(--muted);line-height:1.35}
.sidebar .brand .mark.is-alt{
  background:linear-gradient(140deg,#f6c356,var(--gold));color:#4a3402;
  box-shadow:0 4px 12px -3px rgba(246,177,41,.5);
}

/* ---- collapsible main menu ---- */
body.nav-tight{--sidebar:64px}
.app{transition:grid-template-columns .2s var(--ease-out)}
@media (prefers-reduced-motion:reduce){.app{transition:none}}
/* overflow:visible here undid the scrolling the moment the rail was collapsed,
   which is the state with the LEAST room -- the labels sit under their icons
   rather than escaping sideways, so nothing needed to overflow in the first
   place. */
body.nav-tight .sidebar{padding-left:.5rem;padding-right:.5rem}
body.nav-tight .navlink{justify-content:center;padding-left:0;padding-right:0;gap:0;position:relative}
body.nav-tight .navlink > span{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
body.nav-tight .navgroup{height:1px;padding:.65rem 0 0;margin:0 .35rem;overflow:hidden;
  color:transparent;border-top:1px solid var(--line-2)}
body.nav-tight .sidebar .brand{justify-content:center;padding:.3rem 0 .9rem;font-size:0;gap:0}
body.nav-tight .sidebar .brand .mark{font-size:.82rem}
body.nav-tight .navcount{
  position:absolute;top:.24rem;right:.56rem;min-width:7px;height:7px;padding:0;
  border-radius:99px;font-size:0;line-height:0;background:var(--gold);
  box-shadow:0 0 0 2px var(--surface);
}
body.nav-tight .navlink.active .navcount{box-shadow:0 0 0 2px var(--brand)}
body.nav-tight .userchip{justify-content:center;padding:.4rem 0;gap:0}
body.nav-tight .userchip .meta,body.nav-tight .userchip > a{display:none}
body.nav-tight .navlink::after{
  content:attr(data-label);
  position:absolute;left:calc(100% + 9px);top:50%;transform:translateY(-50%) translateX(-4px);
  padding:.26rem .5rem;border-radius:6px;white-space:nowrap;
  background:var(--ink);color:#fff;font-size:.755rem;font-weight:520;
  opacity:0;pointer-events:none;z-index:60;box-shadow:var(--shadow-md);
  transition:opacity .13s var(--ease-out),transform .13s var(--ease-out);
}
body.nav-tight .navlink:hover::after,
body.nav-tight .navlink:focus-visible::after{opacity:1;transform:translateY(-50%) translateX(0)}
@media (prefers-reduced-motion:reduce){body.nav-tight .navlink::after{transition:none}}

.sidebar .brandrow{display:flex;align-items:flex-start;gap:.28rem}
.sidebar .brandrow .brand{flex:1;min-width:0;padding-bottom:.9rem}
.sidebar .navtoggle{
  flex:none;width:27px;height:27px;margin:.28rem 0 0;padding:0;
  display:grid;place-items:center;border:1px solid transparent;border-radius:7px;
  background:transparent;color:var(--muted-2);cursor:pointer;
  transition:background .14s var(--ease-out),color .14s var(--ease-out),border-color .14s var(--ease-out);
}
.sidebar .navtoggle:hover{background:var(--surface-2);color:var(--brand);border-color:var(--line)}
.sidebar .navtoggle svg{width:15px;height:15px;transition:transform .2s var(--ease-out)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.nav-tight .sidebar .brandrow{flex-direction:column;align-items:center;gap:.35rem}
body.nav-tight .sidebar .brandrow .brand{padding-bottom:.15rem}
body.nav-tight .sidebar .navtoggle{margin-top:0}
body.nav-tight .sidebar .navtoggle svg{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.sidebar .navtoggle svg{transition:none}}

/* When the mail screens are open the main menu is dark too, so the whole
   left edge reads as one piece of furniture rather than two. */
body.mailscreen .sidebar{
  background:var(--mail-rail);border-right-color:rgba(0,0,0,.3);
}
body.mailscreen .sidebar .brand{color:var(--brand-wash)}
body.mailscreen .sidebar .brand span{color:var(--gold)}
body.mailscreen .navgroup{color:#6e7a92}
body.mailscreen .navlink{color:var(--mail-rail-ink);font-weight:450}
body.mailscreen .navlink svg{opacity:.75}
body.mailscreen .navlink:hover{background:rgba(255,255,255,.07);color:#fff}
body.mailscreen .navlink.active{background:var(--gold);color:#3b2a02;font-weight:640}
body.mailscreen .navlink.active svg{opacity:1}
body.mailscreen .navcount{background:rgba(255,255,255,.14);color:#dfe5f0}
body.mailscreen .navlink.active .navcount{background:rgba(0,0,0,.16);color:#3b2a02}
body.mailscreen .userchip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09)}
body.mailscreen .userchip .nm{color:var(--brand-wash)}
body.mailscreen .userchip .rl{color:var(--muted-2)}
body.mailscreen .sidebar .navtoggle{color:var(--muted-2)}
body.mailscreen .sidebar .navtoggle:hover{background:rgba(255,255,255,.08);color:#fff;
  border-color:rgba(255,255,255,.14)}
body.mailscreen .sidebar .iconbtn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);
  color:#9aa6bd}
body.mailscreen .sidebar .iconbtn:hover{background:rgba(255,255,255,.12);color:#fff}
body.mailscreen.nav-tight .navcount{box-shadow:0 0 0 2px var(--mail-rail)}

/* The quiet alternative to reloading under someone's cursor. */
.mail-new{
  display:block;width:calc(100% - 1.6rem);margin:.55rem .8rem;padding:.45rem .6rem;
  border:0;border-radius:8px;background:var(--brand);color:#fff;cursor:pointer;
  font:inherit;font-size:.78rem;font-weight:640;text-align:center;
  box-shadow:0 3px 10px -3px rgba(37,53,89,.4);
}
.mail-new:hover{background:var(--brand-ink)}
.outbox-lead{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted-2);font-weight:700;padding:.35rem .1rem;
}
/* ---- the three-dot menu on a message ---- */
.mail-more{position:absolute;top:.85rem;right:.85rem;z-index:20}
.mail-more > summary{
  list-style:none;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;
  transition:border-color .14s var(--ease-out),color .14s var(--ease-out),background .14s var(--ease-out);
}
.mail-more > summary::-webkit-details-marker{display:none}
.mail-more > summary svg{width:16px;height:16px}
.mail-more > summary:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-wash)}
.mail-more[open] > summary{border-color:var(--brand);color:var(--brand);background:var(--brand-wash)}

.mail-menu{
  position:absolute;top:calc(100% + 6px);right:0;min-width:310px;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;
  box-shadow:var(--shadow-pop);padding:.3rem;
  display:flex;flex-direction:column;gap:1px;
}
.mail-menu form{display:contents}
.mail-menu-item{
  display:flex;align-items:flex-start;gap:.55rem;width:100%;text-align:left;
  padding:.5rem .6rem;border:0;border-radius:8px;background:transparent;cursor:pointer;
  font:inherit;color:var(--ink-soft);
  transition:background .13s var(--ease-out),color .13s var(--ease-out);
}
.mail-menu-item svg{width:16px;height:16px;flex:none;margin-top:.12rem;color:var(--muted-2);
  transition:color .13s var(--ease-out)}
.mail-menu-item span{display:flex;flex-direction:column;gap:.05rem;min-width:0}
.mail-menu-item strong{font-size:.83rem;font-weight:580;color:var(--ink);letter-spacing:-.005em}
.mail-menu-item em{font-style:normal;font-size:.735rem;color:var(--muted);line-height:1.4}
.mail-menu-item:hover{background:var(--brand-wash)}
.mail-menu-item:hover svg,.mail-menu-item:hover strong{color:var(--brand)}
/* A step already taken. It sits in the menu so the recruiter can see it was
   recorded, but it is a statement, not a control -- the hover and the pointer
   are what make the difference legible before they try to click it. */
.mail-menu-item.is-done{cursor:default}
.mail-menu-item.is-done:hover{background:transparent}
.mail-menu-item.is-done svg,.mail-menu-item.is-done:hover svg{color:var(--ok)}
.mail-menu-item.is-done:hover strong{color:var(--ink)}
.mail-menu-rule{height:1px;background:var(--line-2);margin:.25rem .4rem}
@media (prefers-reduced-motion:reduce){
  .mail-more > summary,.mail-menu-item,.mail-menu-item svg{transition:none}
}
/* ---- collapsed menu: icon PLUS its word ----
   An icon-only rail is unreadable unless you already know the app. Zoho's own
   left rail labels every icon; so does this one now. The rail widens a little
   to fit, which still leaves the mail far more room than the full menu did. */
body.nav-tight{--sidebar:82px}
body.nav-tight .navlink{
  flex-direction:column;justify-content:center;gap:.2rem;
  padding:.45rem .2rem;text-align:center;
}
/* :not(.navcount) matters — the badge is a span too, and without this the
   label rule out-specified the dot rule and rendered "99+" full size in the
   middle of the icon. */
body.nav-tight .navlink > span:not(.navcount){
  position:static;width:auto;height:auto;overflow:visible;clip:auto;
  font-size:.62rem;font-weight:600;letter-spacing:-.01em;line-height:1.15;
  white-space:normal;word-break:break-word;
}
body.nav-tight .navlink svg{width:17px;height:17px}
/* The hover tooltip is redundant once the word is on screen. */
body.nav-tight .navlink::after{content:none}
body.nav-tight .navcount{top:.2rem;right:.9rem}
body.nav-tight .navgroup{margin:0 .3rem}
body.nav-tight .sidebar{padding-left:.3rem;padding-right:.3rem}
body.nav-tight .navtoggle{margin-top:0}

/* "Fetch now" — secondary to Write, but findable. */
.mail-syncform{margin-bottom:.5rem}
.mail-fetch{
  display:flex;align-items:center;justify-content:center;gap:.35rem;width:100%;
  padding:.4rem .6rem;border-radius:8px;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
  color:var(--mail-rail-ink);font:inherit;font-size:.76rem;font-weight:520;
  transition:background .14s var(--ease-out),color .14s var(--ease-out);
}
.mail-fetch:hover{background:rgba(255,255,255,.11);color:#fff}
.mail-fetch svg{width:13px;height:13px}
/* Compose sits inside the same grid as the message panes: rail, then the
   writing area across the rest. */
body.mailscreen .mailapp:has(.composewrap){grid-template-columns:var(--mail-fold) 1fr}
@media (max-width:1240px){
  body.mailscreen .mailapp:has(.composewrap){grid-template-columns:1fr}
}
/* The active icon was gold on gold — invisible, which read as a blank block.
   currentColor was not reaching the svg, so it is stated outright. */
body.mailscreen .navlink.active,
body.mailscreen .navlink.active svg,
body.mailscreen .navlink.active > span:not(.navcount){color:#3b2a02}
body.mailscreen .navlink.active svg{opacity:1;stroke:#3b2a02}

/* The badge sits top-right of the icon, clear of the label underneath it. */
body.nav-tight .navcount{
  position:absolute;top:.18rem;right:.72rem;
  min-width:8px;height:8px;padding:0;border-radius:99px;
  font-size:0;line-height:0;background:var(--gold);
  box-shadow:0 0 0 2px var(--mail-rail);
}
body.nav-tight .navlink.active .navcount{background:#3b2a02;box-shadow:0 0 0 2px var(--gold)}
/* ===========================================================================
   Night mode.

   The whole app is built on the custom properties at the top of this file, so
   a dark theme is a swap of those values rather than a second stylesheet. Only
   the handful of places that hard-code a colour need restating below.

   Not a straight inversion: pure black on white text vibrates, so the surfaces
   are a cool near-black and the text is a soft off-white, and the gold is
   pulled back slightly because saturated yellow on dark reads as a glare.
   =========================================================================== */
html[data-theme="dark"]{
  --bg:#11151f;
  --surface:#171c28;
  --surface-2:#1d2331;
  /* Stated as a literal on purpose. A blanket find-and-replace of the light
     theme's greys pointed this at var(--line-2), which this very block
     redefines to #222937 -- near-black body text on a near-black surface. A
     token that means "text" in one theme cannot be aliased to a token that
     means "hairline" in the other. */
  --ink:#e7ebf3;
  --ink-soft:#c2cad9;
  --muted:#95a0b5;
  --muted-2:#6f7b91;
  --line:#2a3244;
  --line-2:#222937;

  --brand:#8fa8de;              /* navy is unreadable on dark; lifted to a tint */
  --brand-ink:#a9bde8;
  --brand-wash:#1e2740;
  --gold:#e9ac37;
  --gold-ink:#f0c165;
  --gold-wash:#2e2513;

  --ok:#5fcf9e;      --ok-wash:#142b22;
  --warn:#e0ae52;    --warn-wash:#2d2415;
  --danger:#ef7676;  --danger-wash:#331b1d;
  --info:#7fb0ea;    --info-wash:#16283d;
  --ai:#b9a2f7;      --ai-wash:#251d3f;

  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 1px 3px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 6px 20px -6px rgba(0,0,0,.6),0 2px 6px -2px rgba(0,0,0,.4);
  --shadow-pop:0 18px 44px -12px rgba(0,0,0,.75);

  /* The mail rails are already dark; nudged so they sit with the new surfaces
     rather than standing apart from them. */
  --mail-rail:#0e1219;
  --mail-rail-2:#141926;
  --mail-rail-line:rgba(255,255,255,.06);

  color-scheme:dark;            /* native scrollbars, form controls and caret */
}

/* Places that name a colour outright rather than using a token. */
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] .sidebar{background:var(--mail-rail-2)}
html[data-theme="dark"] .sidebar .brand{color:var(--ink)}
html[data-theme="dark"] .navlink{color:var(--ink-soft)}
html[data-theme="dark"] .navlink:hover{background:rgba(255,255,255,.06);color:#fff}
html[data-theme="dark"] .card,
html[data-theme="dark"] .mail-list,
html[data-theme="dark"] .mail-read,
html[data-theme="dark"] .compose-bodywrap{background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] .mail-daymark{background:linear-gradient(var(--surface) 64%,rgba(0,0,0,0))}
html[data-theme="dark"] .mail-rows::-webkit-scrollbar-thumb,
html[data-theme="dark"] .mail-read::-webkit-scrollbar-thumb{
  background:#39435a;border-color:var(--surface)}
html[data-theme="dark"] .mail-face{background:hsl(var(--h) 34% 24%);color:hsl(var(--h) 62% 78%)}
html[data-theme="dark"] .userchip{background:rgba(255,255,255,.04);border-color:var(--line)}
html[data-theme="dark"] .userchip .nm{color:var(--ink)}
html[data-theme="dark"] .mail-write{color:#2a1f04}
html[data-theme="dark"] .mail-view.is-on{color:#2a1f04}
html[data-theme="dark"] .btn{background:var(--brand);color:#0f1420;border-color:transparent}
html[data-theme="dark"] .btn-ghost{background:var(--surface-2);color:var(--ink-soft);border-color:var(--line)}
html[data-theme="dark"] .btn-ghost:hover{background:var(--line-2);color:var(--ink)}

/* An email body is markup written by a stranger, usually assuming a white
   page. Forcing it dark makes half of them illegible, so the message itself
   keeps its own light card and only its frame follows the theme. */
html[data-theme="dark"] .mail-body,
html[data-theme="dark"] .compose-quoted{
  background:#f7f8fa;color:#151b2b;border-radius:10px;
  margin:.9rem 1.3rem;padding:1rem 1.2rem;max-width:none;
}
html[data-theme="dark"] .mail-body a{color:#1d4ed8}

/* The theme control itself. */
.themebtn{
  flex:none;width:27px;height:27px;margin:.28rem 0 0;padding:0;
  display:grid;place-items:center;border:1px solid transparent;border-radius:7px;
  background:transparent;color:var(--muted-2);cursor:pointer;
  transition:background .14s var(--ease-out),color .14s var(--ease-out);
}
.themebtn:hover{background:var(--surface-2);color:var(--gold)}
.themebtn svg{width:15px;height:15px}
.themebtn .moon{display:none}
html[data-theme="dark"] .themebtn .moon{display:block}
html[data-theme="dark"] .themebtn .sun{display:none}
body.mailscreen .themebtn{color:var(--muted-2)}
body.mailscreen .themebtn:hover{background:rgba(255,255,255,.08);color:var(--gold)}

/* ===========================================================================
   Bench sales — allocating consultants.

   A grid, because the question is never "who has this one consultant" but
   "is anybody carrying too many, and who is not being worked at all". Both
   answers are in the shape of the thing rather than in any single row.
   =========================================================================== */
.benchgrid-wrap{overflow-x:auto;padding:0}
.benchgrid{width:100%;border-collapse:separate;border-spacing:0;font-size:.83rem}
.benchgrid th,.benchgrid td{padding:.45rem .5rem;border-bottom:1px solid var(--line-2)}

/* The consultant column stays put while the recruiters scroll. */
.benchgrid th.bg-name,.benchgrid td.bg-name{
  position:sticky;left:34px;z-index:2;background:var(--surface);min-width:220px;
}
.benchgrid th.bg-pick,.benchgrid td.bg-pick{
  position:sticky;left:0;z-index:3;background:var(--surface);width:34px;text-align:center;
}
.benchgrid thead th{
  position:sticky;top:0;z-index:4;background:var(--surface-2);
  border-bottom:1px solid var(--line);
  font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;
}
.benchgrid thead th.bg-name,.benchgrid thead th.bg-pick{z-index:5;background:var(--surface-2)}

.bg-rec{text-align:center;min-width:88px;vertical-align:bottom}
.bg-rec.is-inactive{opacity:.5}
.bg-rec-name{display:block;text-transform:none;letter-spacing:0;font-size:.76rem;color:var(--ink-soft)}
.bg-rec-load{
  display:inline-block;margin-top:.15rem;padding:.02rem .3rem;border-radius:5px;
  background:var(--line-2);color:var(--muted);font-size:.68rem;font-variant-numeric:tabular-nums;
}
.bg-title{display:block;font-size:.73rem;color:var(--muted);font-weight:400}
.bg-alt{
  display:inline-block;margin-top:.15rem;padding:.02rem .3rem;border-radius:5px;
  background:var(--brand-wash);color:var(--brand);font-size:.66rem;font-weight:500;
}
.bg-alt.is-warn{background:var(--warn-wash);color:#6b4708}

.bg-cell{text-align:center}
/* Empty by default — a grid of two hundred filled dots reads as noise, and
   what matters is the few that are set. */
.bg-dot{
  width:30px;height:24px;border-radius:6px;border:1px dashed var(--line);
  background:transparent;color:transparent;font-size:.62rem;font-weight:600;
  cursor:pointer;transition:background .12s var(--ease-out),border-color .12s var(--ease-out);
}
.bg-dot:hover{border-color:var(--muted-2);background:var(--surface-2);color:var(--muted-2)}
.bg-dot.is-active{background:var(--ok-wash);border:1px solid var(--ok);color:var(--ok)}
.bg-dot.is-paused{background:var(--warn-wash);border:1px solid #e0b877;color:#6b4708}
.bg-dot.is-placed{background:var(--brand-wash);border:1px solid var(--brand);color:var(--brand)}
.bg-dot.is-left,.bg-dot.is-off{background:var(--line-2);border:1px solid var(--line);color:var(--muted-2)}
.bg-dot.is-busy{opacity:.45;pointer-events:none}

.benchbulk{
  position:sticky;bottom:0;z-index:6;display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  margin-top:.8rem;padding:.6rem .8rem;border-radius:10px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 -6px 20px -12px rgba(0,0,0,.3);
}
.benchbulk[hidden]{display:none}
.benchbulk-n{font-size:.8rem;font-weight:500;margin-right:auto}

.benchlegend{
  display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;
  margin-top:.7rem;font-size:.75rem;color:var(--muted);
}
.benchlegend i{font-style:normal;display:inline-grid;place-items:center;vertical-align:-.35em;margin-right:.2rem}
.benchlegend span{display:inline-flex;align-items:center}

.filters{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;padding:.7rem .8rem;margin-bottom:.9rem}
.filters input[type=search],.filters select{
  padding:.36rem .5rem;border:1px solid var(--line);border-radius:7px;
  font:inherit;font-size:.8rem;background:var(--surface);color:var(--ink);
}
.filters input[type=search]{min-width:230px}

tr.is-dim td{opacity:.55}

/* ---- Apply jobs ----
   Built around one action: tick a name, press submit. Everything else on the
   card is only what is needed to make that decision. */
.jobcard{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:.85rem 1rem;margin-bottom:.8rem;
}
.jobcard.is-unsure{border-style:dashed;border-color:#e0b877;background:var(--warn-wash)}
/* A requirement is a decision, so the row it sits on has to answer one question
   at a glance: can somebody be sent for this? Everything below serves that —
   colour only on the states worth acting on, weight on the edges of the card so
   you can see where one ends, and a hover that says the whole line is a target. */
/* A white card on a near-white page measured 1.07:1 against it — the edges were
   there in the markup and not on the screen. Lift it off the page at rest, and
   let hover and open each add a step so the one you are working in is obvious. */
.jobcard{
  border-color:#dfe4ec;box-shadow:var(--shadow-xs);
  transition:border-color .16s var(--ease-out),box-shadow .16s var(--ease-out);
}
.jobcard:hover{border-color:#ccd3e0;box-shadow:var(--shadow-sm)}
.jobcard[open]{border-color:#c6cfe0;box-shadow:var(--shadow-md)}
.jobcard.is-focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash),var(--shadow-md)}

.jobcard > summary.jobcard-sum{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:.6rem;
  padding:.28rem .3rem;margin:-.28rem -.3rem;border-radius:var(--radius-sm);
  user-select:none;transition:background .14s var(--ease-out);
}
.jobcard > summary.jobcard-sum::-webkit-details-marker{display:none}
.jobcard > summary.jobcard-sum:hover{background:var(--surface-2)}
.jobcard > summary.jobcard-sum:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;background:var(--surface-2);
}
.jobcard > summary.jobcard-sum::before{
  content:"";flex:none;width:7px;height:7px;border-right:1.5px solid var(--muted-2);
  border-bottom:1.5px solid var(--muted-2);transform:rotate(-45deg);margin-left:.15rem;
  transition:transform .18s var(--ease-out),border-color .14s var(--ease-out);
}
.jobcard[open] > summary.jobcard-sum::before{transform:rotate(45deg)}
.jobcard > summary.jobcard-sum:hover::before{border-color:var(--brand)}
.jobcard[open] > summary.jobcard-sum{
  margin-bottom:.55rem;padding-bottom:.5rem;border-bottom:1px solid var(--line-2);
  border-bottom-left-radius:0;border-bottom-right-radius:0;
}
.jobcard-sumtitle{
  font-size:.95rem;font-weight:600;letter-spacing:-.014em;color:var(--ink);
  flex:none;max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.jobcard-sumwho{
  font-size:.78rem;color:var(--muted);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.jobcard-sumwhen{
  font-size:.72rem;color:var(--muted);flex:none;font-variant-numeric:tabular-nums;
  min-width:4.2rem;text-align:right;
}

/* Only the states worth acting on carry colour. An amber badge on "no strong
   fit" pulled harder than the green beside it, so the rows you could actually
   do something with were the hardest ones to pick out. */
.jobtag{
  font-size:.69rem;font-weight:650;padding:.14rem .45rem;border-radius:999px;flex:none;
  letter-spacing:.005em;line-height:1.35;white-space:nowrap;border:1px solid transparent;
}
.jobtag.is-go{background:var(--ok-wash);color:var(--ok);border-color:#bfe3d1}
.jobtag.is-done{background:var(--brand-wash);color:var(--brand);border-color:#d8dfec}
/* Quiet, but still readable: --muted-2 on white measured 2.60:1, under the
   floor for text anyone is expected to read. */
.jobtag.is-quiet{background:none;color:var(--muted);font-weight:500;padding-inline:0}

/* Landed since yesterday. Gold, which the system reserves for the one thing
   that matters — and on this screen, at this moment, that is what is new. */
.jobnew{
  flex:none;font-size:.63rem;font-weight:750;letter-spacing:.07em;text-transform:uppercase;
  color:var(--gold-ink);background:var(--gold-wash);border:1px solid #f3dda6;
  border-radius:4px;padding:.06rem .3rem;line-height:1.5;
}
/* Read or not, for whoever's bench is on screen. Unread is the one worth
   seeing, so it carries the weight and Read recedes to a hairline. */
.jobseen{
  flex:none;font-size:.66rem;font-weight:600;border-radius:999px;line-height:1.4;
  padding:.06rem .4rem;color:var(--muted-2);background:none;border:1px solid var(--line-2);
}
.jobseen.is-unread{color:var(--brand);background:var(--brand-wash);border-color:var(--line)}
.jobscore{
  font-size:.72rem;font-weight:650;flex:none;font-variant-numeric:tabular-nums;
  min-width:2.5rem;text-align:right;
}
.jobscore.is-high{color:var(--ok)}
.jobscore.is-mid{color:var(--gold-ink)}
/* A low score is still a number someone reads to decide. Quiet, not faint —
   --muted-2 measured 2.60:1, well under the floor. */
.jobscore.is-low{color:var(--muted);font-weight:500}

/* What the requirement asks for, so the decision does not need the email
   opening somewhere else. Inset and quiet — it is reference, not the action. */
.jobcard-jd{
  margin-top:.6rem;padding:.6rem .75rem;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--line-2);
  font-size:.79rem;color:var(--ink-soft);line-height:1.6;
}
.jobcard-jd p{margin:.5rem 0 0;max-width:78ch}
.jobcard-skills{display:flex;flex-wrap:wrap;gap:.26rem;align-items:center}
.jdlabel{
  font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-right:.15rem;
}
/* Skills, coloured by what kind of technology they are.
   Not confetti: the same skill is always the same colour, so the mix on a card
   says "this is a cloud role" or "this is a data role" before a word is read.
   Every pair is a pastel wash with ink drawn from the same hue, which keeps it
   soft without dropping the text under 4.5:1. */
.skillchip{
  font-size:.71rem;font-weight:550;line-height:1.45;
  border-radius:6px;padding:.1rem .4rem;
  border:1px solid transparent;
  color:var(--ink-soft);background:var(--surface-2);
  transition:transform .12s var(--ease-out),box-shadow .12s var(--ease-out);
}
.skillchip:hover{transform:translateY(-1px);box-shadow:var(--shadow-xs)}
.skillchip.fam-lang    {background:#ecebfd;color:#453196;border-color:#dcd9fa}
.skillchip.fam-web     {background:#e4f3fb;color:#0f5c81;border-color:#cfe8f6}
.skillchip.fam-backend {background:#e4f5ec;color:#116343;border-color:#cbead9}
.skillchip.fam-cloud   {background:#fdf0e0;color:#8a5308;border-color:#f6e0c2}
.skillchip.fam-data    {background:#e7edfb;color:#27478f;border-color:#d3ddf6}
.skillchip.fam-ai      {background:#f7e9fa;color:#762a8b;border-color:#eed6f4}
.skillchip.fam-platform{background:#fce8ee;color:#94284e;border-color:#f7d4de}
.skillchip.fam-practice{background:#eceff4;color:#47516a;border-color:#dde2ea}

/* With a consultant chosen, the chips answer one question: do they have it?
   Missing ones hollow out — the shape of the gap is the point. Never colour
   alone: the outline and the strike both carry it. */
.skillchip.is-miss{
  background:transparent;border-style:dashed;opacity:.65;font-weight:450;
}
.skillchip.is-have{box-shadow:inset 0 0 0 1px currentColor}
.skilltally{
  font-size:.68rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;
  margin-left:.15rem;
}

/* A checkbox that reads as one of the filters rather than a stray control. */
.filtertick{
  display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--ink-soft);
  white-space:nowrap;
}

/* Related titles: a list you can see and correct, because it decides which
   requirements a consultant is ever shown against. */
.chipbox{display:flex;flex-wrap:wrap;gap:.3rem;margin:.15rem 0 .4rem;min-height:1.6rem}
.chip{
  display:inline-flex;align-items:center;gap:.28rem;
  background:var(--brand-wash);color:var(--ink);border:1px solid transparent;
  border-radius:999px;padding:.14rem .3rem .14rem .55rem;font-size:.76rem;line-height:1.4;
}
.chip-x{
  border:0;background:transparent;cursor:pointer;color:var(--muted);
  font-size:.95rem;line-height:1;padding:0 .2rem;border-radius:999px;
}
.chip-x:hover{color:var(--danger,#b91c1c);background:rgba(0,0,0,.05)}
.chipnone{font-size:.76rem;color:var(--muted-2)}
.chipadd{display:flex;gap:.4rem;align-items:center;margin-bottom:.35rem}
.chipadd input{flex:1;min-width:0}
/* Once the chips are drawn the raw comma list is redundant — but it stays in
   the DOM as the field that is actually submitted, and is what you get if the
   script never runs. */
.is-chipped{display:none}
/* What the score decided, before the list of names it decided it about. */
.matchhead{
  margin-top:.6rem;font-size:.76rem;color:var(--ink-soft);font-weight:520;
}
.matchhead.is-quiet{color:var(--muted);font-weight:440}
.jobcard-head{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between}
.jobcard-title h2{font-size:1rem;font-weight:560;letter-spacing:-.012em;margin:0}
.jobcard-meta{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.2rem;font-size:.78rem;color:var(--muted)}
.jobcard-meta strong{color:var(--ink-soft);font-weight:550}
.jobcard-side{text-align:right;flex:none;display:flex;flex-direction:column;gap:.15rem;align-items:flex-end}
.jobsrc{
  font-size:.68rem;font-weight:550;padding:.06rem .38rem;border-radius:5px;
  background:var(--brand-wash);color:var(--brand);white-space:nowrap;
}
.jobwhen{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}

.jobcard-vendor{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  margin-top:.5rem;padding-top:.45rem;border-top:1px solid var(--line-2);font-size:.78rem;
}
.jobcard-decide{margin-top:.5rem}
.jobcard-decide form{display:flex;gap:.4rem}
.jobcard-none{margin-top:.5rem;font-size:.78rem;color:var(--muted-2)}

.matchlist{margin-top:.6rem;display:flex;flex-direction:column;gap:.25rem}
.matchrow{
  display:flex;align-items:center;gap:.6rem;padding:.42rem .55rem;border-radius:8px;
  border:1px solid var(--line-2);cursor:pointer;
  transition:background .12s var(--ease-out),border-color .12s var(--ease-out);
}
.matchrow:hover{background:var(--surface-2);border-color:#d7dce6}
/* The tick and the name are the label; the row is not, so the Open link beside
   them can be a link. display:contents keeps the flex layout unchanged. */
.matchpick{display:contents;cursor:pointer}
/* One click, one tab — never refused, unlike a second popup. */
.matchopen{
  flex:none;display:inline-flex;align-items:center;gap:.22rem;
  font-size:.72rem;font-weight:600;color:var(--brand);
  border:1px solid var(--line);border-radius:6px;padding:.14rem .4rem;
  background:var(--surface);opacity:0;transition:opacity .12s var(--ease-out),
             border-color .12s var(--ease-out),background .12s var(--ease-out);
}
.matchopen svg{width:11px;height:11px}
.matchrow:hover .matchopen,.matchopen:focus-visible{opacity:1}
.matchopen:hover{border-color:var(--brand);background:var(--brand-wash)}
.matchnote{
  flex-basis:100%;font-size:.75rem;color:var(--warn-ink);background:var(--warn-wash);
  border:1px solid #efd9a8;border-radius:var(--radius-sm);padding:.42rem .6rem;margin-top:.1rem;
}
.matchrow input[type=checkbox]{width:15px;height:15px;accent-color:var(--brand);flex:none;margin:0}
/* The ones already ticked for you read as a set, so the default answer is
   visible before anything is clicked. */
.matchrow:has(input[type=checkbox]:checked){
  background:var(--brand-wash);border-color:var(--line);
}
.matchrow:has(input[type=checkbox]:checked) .matchwho strong{font-weight:640}
/* Secondary text has to be tinted up off the wash it now sits on — --muted was
   4.7:1 on white and 4.16:1 here. */
.matchrow:has(input[type=checkbox]:checked) .matchwho em,
.matchrow:has(input[type=checkbox]:checked) .matchwhy{color:var(--ink-soft)}
.matchrow:focus-within{outline:2px solid var(--brand);outline-offset:1px}
.matchrow.is-done{opacity:.62;cursor:default}
.matchrow.is-done:hover{background:transparent;border-color:var(--line-2)}
.matchtick{width:15px;text-align:center;color:var(--ok);font-weight:700;flex:none}
.matchwho{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.3}
.matchwho strong{font-size:.83rem;font-weight:550}
.matchwho em{font-style:normal;font-size:.73rem;color:var(--muted)}
/* Why the score is what it is, as tags rather than a sentence — the title that
   carried the match is the single most useful thing on the row, and it is what
   a vendor screens on. */
.matchwhy{
  font-size:.73rem;color:var(--muted);flex:1;min-width:0;
  display:flex;align-items:center;gap:.3rem;overflow:hidden;white-space:nowrap;
}
.titletag{
  font-size:.71rem;font-weight:600;color:var(--brand);background:var(--brand-wash);
  border:1px solid #d6dded;border-radius:999px;padding:.06rem .48rem;
  max-width:20rem;overflow:hidden;text-overflow:ellipsis;
}
.skillcount{font-size:.71rem;color:var(--muted);font-variant-numeric:tabular-nums}
.nomatch{font-size:.71rem;color:var(--muted);font-style:italic}
.matchrow.is-strong .titletag{color:#116343;background:#e4f5ec;border-color:#cbead9}
.matchscore{
  flex:none;font-size:.73rem;font-weight:600;font-variant-numeric:tabular-nums;
  padding:.06rem .35rem;border-radius:5px;
}
.matchrow.is-strong .matchscore{background:var(--ok-wash);color:var(--ok)}
.matchrow.is-fair   .matchscore{background:var(--warn-wash);color:#6b4708}
.matchrow.is-weak   .matchscore{background:var(--line-2);color:var(--ink-soft)}
.matchdone{font-size:.72rem;color:var(--brand);flex:none}

/* The end of the card, and the one thing to do on it. Ruled off so the card has
   a visible bottom, and the button carries its own weight rather than sitting
   in the flow like another line of text. */
.matchfoot{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  margin:.75rem -1rem -.85rem;padding:.7rem 1rem;
  border-top:1px solid var(--line-2);background:var(--surface-2);
  border-radius:0 0 11px 11px;
}
.matchfoot .btn-primary{
  font-size:.85rem;font-weight:600;padding:.5rem 1.05rem;box-shadow:var(--shadow-sm);
}
.matchfoot .btn-primary:hover{box-shadow:var(--shadow-md)}
.matchfoot .hint{font-size:.73rem;color:var(--muted);flex:1;min-width:12rem}
.matchhead{margin-top:.7rem}

.kpi.is-warn{border-color:#e0b877;background:var(--warn-wash)}

/* ---- bench: this email is a requirement ----
   Shown in the reading pane, where the decision naturally happens. Somebody
   reading a C2C blast is at the moment they would act on it. */
.benchsuggest{
  margin:.75rem 1.3rem 0;padding:.7rem .8rem;border-radius:10px;
  background:var(--brand-wash);border:1px solid rgba(37,53,89,.16);
}
.benchsuggest.is-unsure{background:var(--warn-wash);border-color:#e0b877}
.benchsuggest-head{display:flex;align-items:flex-start;gap:.55rem}
.benchsuggest-head > svg{width:16px;height:16px;flex:none;color:var(--brand);margin-top:.15rem}
.benchsuggest.is-unsure .benchsuggest-head > svg{color:#a8730c}
.benchsuggest-head > div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.4}
.benchsuggest-head strong{font-size:.85rem;font-weight:560}
.benchsuggest-head .muted{font-size:.75rem}
.benchsuggest-list{display:flex;flex-direction:column;gap:.22rem;margin-top:.55rem}
.benchsuggest-list .matchrow{background:var(--surface)}
.benchsuggest-none{margin-top:.4rem;font-size:.76rem;color:var(--muted)}
/* The rest of the bench: one click away rather than hidden, because the score
   ranks people and does not get to decide who may be considered. */
.benchsuggest-more{margin-top:.4rem}
.benchsuggest-more > summary{
  cursor:pointer;font-size:.74rem;color:var(--muted);list-style:none;
  padding:.16rem 0;user-select:none;
}
.benchsuggest-more > summary::-webkit-details-marker{display:none}
.benchsuggest-more > summary::before{content:"▸ ";color:var(--muted-2)}
.benchsuggest-more[open] > summary::before{content:"▾ "}
.benchsuggest-more > summary:hover{color:var(--ink-soft)}

.mail-tag.is-job{background:var(--ok-wash);color:var(--ok)}
/* ===========================================================================
   Bench sales · the state of the desk
   Four questions answered above the queue: is work still coming in, what is the
   market buying, how much of it turns into a submission, and who can be sold
   this week. Charts are drawn here in SVG and CSS — nothing is fetched, and
   every figure is also written out, so the answer survives a screen reader and
   a monochrome print.

   Motion: one authored moment. The bars and the donut draw in once on arrival,
   ease-out, under a third of a second, and never again. Nothing loops.
   =========================================================================== */
.bidash{
  display:grid;gap:.8rem;margin-bottom:1rem;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.bitile{
  background:var(--surface);border:1px solid #dfe4ec;border-radius:var(--radius);
  box-shadow:var(--shadow-xs);padding:.85rem 1rem .9rem;
  display:flex;flex-direction:column;min-width:0;
  transition:border-color .16s var(--ease-out),box-shadow .16s var(--ease-out);
}
.bitile:hover{border-color:#ccd3e0;box-shadow:var(--shadow-sm)}
.bitile-wide{grid-column:1 / -1}
.bitile > header{margin-bottom:.7rem}
.bitile h2{
  font-size:.82rem;font-weight:640;letter-spacing:-.008em;color:var(--ink);margin:0;
}
.bitile > header p{margin:.12rem 0 0;font-size:.74rem;color:var(--muted)}
.bitile > header p strong{color:var(--ink-soft);font-weight:650}
.bitile > footer{
  display:flex;justify-content:space-between;margin-top:.5rem;
  font-size:.68rem;color:var(--muted);
}
.bifoot-split{gap:.8rem}
.bifoot-split strong{color:var(--ink-soft);font-weight:650}
.binone{font-size:.76rem;color:var(--muted);padding:1rem 0;text-align:center}

/* ---- 1. inflow, day by day ---- */
.bibars{
  display:flex;align-items:flex-end;gap:3px;height:86px;
  padding-top:.2rem;border-bottom:1px solid var(--line);
}
/* The inflow, kept as a strip under the pie: still worth seeing that work is
   arriving, no longer the headline the tile leads with. */
.bistrip{
  display:flex;align-items:flex-end;gap:3px;height:30px;margin-top:.7rem;
  padding-top:.2rem;border-bottom:1px solid var(--line);
}
.bistrip .bibar{border-radius:2px 2px 0 0}
.bitile > footer{justify-content:space-between}
.bibar{
  flex:1;min-width:0;border-radius:3px 3px 0 0;background:var(--brand-wash);
  position:relative;transform-origin:bottom;
  animation:bigrow .34s var(--ease-out) both;
}
.bibar.is-today{background:var(--gold)}
.bibar.is-empty{background:var(--line-2)}
.bibar:hover{background:var(--brand)}
.bibar.is-today:hover{background:var(--gold-ink)}
/* The count sits above its own bar on hover — no tooltip layer to manage. */
.bibar i{
  position:absolute;left:50%;bottom:calc(100% + 3px);transform:translateX(-50%);
  font-style:normal;font-size:.65rem;font-weight:700;color:var(--ink);
  opacity:0;transition:opacity .12s var(--ease-out);pointer-events:none;
  font-variant-numeric:tabular-nums;
}
.bibar:hover i{opacity:1}
@keyframes bigrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---- 2. what the market wants ---- */
.bidonut{display:flex;align-items:center;gap:.85rem;min-width:0}
.bidonut svg{width:104px;height:104px;flex:none;animation:bifade .3s var(--ease-out) both}
.bidonut path{transition:opacity .12s var(--ease-out)}
.bidonut svg:hover path{opacity:.45}
.bidonut svg path:hover{opacity:1}
.bidonut-n{
  text-anchor:middle;font-size:19px;font-weight:700;fill:var(--ink);
  font-variant-numeric:tabular-nums;
}
.bidonut-l{text-anchor:middle;font-size:8px;font-weight:600;fill:var(--muted)}
.bilegend{list-style:none;margin:0;padding:0;flex:1;min-width:0;display:grid;gap:.2rem}
.bilegend li{display:flex;align-items:center;gap:.4rem;font-size:.72rem;min-width:0}
.bidot{width:9px;height:9px;border-radius:3px;flex:none}
.bilabel{
  color:var(--ink-soft);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bival{color:var(--muted);font-weight:650;font-variant-numeric:tabular-nums;flex:none}

/* ---- 3. found to sent ---- */
.bifunnel{display:grid;gap:.5rem}
.bistep{display:flex;align-items:center;gap:.5rem;font-size:.73rem}
.bistep-l{flex:none;width:6.6rem;color:var(--ink-soft);font-weight:550}
.bistep-track{flex:1;min-width:0;height:9px;border-radius:999px;background:var(--line-2)}
.bistep-fill{
  display:block;height:100%;border-radius:999px;
  transform-origin:left;animation:biwipe .34s var(--ease-out) both;
}
.bistep.is-found .bistep-fill{background:var(--brand)}
.bistep.is-fit   .bistep-fill{background:var(--ok)}
.bistep.is-sent  .bistep-fill{background:var(--gold)}
.bistep-n{
  flex:none;min-width:1.9rem;text-align:right;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
@keyframes biwipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- 4. who can be sold ---- */
.bipeople{list-style:none;margin:0;padding:0;display:grid;gap:.34rem}
.bipeople li{display:flex;align-items:center;gap:.6rem;font-size:.75rem;min-width:0}
.bipeople li.is-idle{opacity:.62}
.bip-name{
  flex:none;width:9.5rem;color:var(--ink);font-weight:550;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bip-track{
  flex:1;min-width:0;height:11px;border-radius:999px;background:var(--line-2);
  position:relative;overflow:hidden;
}
.bip-fit,.bip-sent{
  position:absolute;left:0;top:0;height:100%;border-radius:999px;
  transform-origin:left;animation:biwipe .34s var(--ease-out) both;
}
.bip-fit{background:var(--brand-wash);box-shadow:inset 0 0 0 1px var(--line)}
.bip-sent{background:var(--gold)}
.bip-n{
  flex:none;min-width:3.4rem;text-align:right;font-weight:700;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.bip-n em{display:block;font-style:normal;font-size:.66rem;font-weight:550;color:var(--gold-ink)}
.bikey{gap:.9rem;justify-content:flex-start !important}
.bikey span{display:inline-flex;align-items:center;gap:.3rem}
.bikey i{width:14px;height:8px;border-radius:999px;display:inline-block;position:static}

@keyframes bifade{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

/* Narrow: three tiles cannot hold their shape, so they stack rather than
   squeeze. The wide tile was already full width. */
@media (max-width:1100px){
  .bidash{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .bidash{grid-template-columns:minmax(0,1fr)}
  .bidonut{flex-direction:column;align-items:flex-start}
  .bidonut svg{width:96px;height:96px;align-self:center}
  .bilegend{width:100%}
  .bistep-l{width:5.4rem}
  .bip-name{width:7rem}
}

/* One authored moment, and only for those who want it. */
@media (prefers-reduced-motion:reduce){
  .bibar,.bistep-fill,.bip-fit,.bip-sent,.bidonut svg{animation:none}
}

/* A requirement row is one line only while there is a line to hold it. Below
   this it wraps — title first, then the meta, then the state — rather than
   pushing the page sideways. Measured: 320px was scrolling to 505px. */
@media (max-width:760px){
  .jobcard > summary.jobcard-sum{flex-wrap:wrap;row-gap:.3rem}
  .jobcard-sumtitle{
    flex:1 1 100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;min-width:0;
  }
  .jobcard-sumwho{flex:1 1 100%;white-space:normal;overflow:visible}
  .jobcard-sumwhen{margin-left:auto;min-width:0}
  .jobcard-vendor{flex-wrap:wrap;row-gap:.25rem}

  .matchrow{flex-wrap:wrap;row-gap:.3rem}
  .matchwho{flex:1 1 auto;min-width:0}
  .matchwhy{flex:1 1 100%;white-space:normal;order:3}
  .titletag{max-width:100%}
  .matchscore{order:2}
  .matchopen{order:2;opacity:1}          /* no hover on touch — always visible */
  .matchfoot{flex-direction:column;align-items:flex-start}
  .matchfoot .hint{min-width:0}

  .filters{flex-wrap:wrap}
  .jobcard-jd p{max-width:100%}
}

/* ---- the figures are links -------------------------------------------------
   A number on a dashboard that cannot be opened is a number you have to go and
   look up somewhere else. Each one narrows the list below; clicking the same
   one again clears it. Hover is a tint, not a jump — these sit inside charts
   and must not shift the layout when the pointer crosses them. */
.bilink{
  display:flex;align-items:center;gap:.4rem;width:100%;min-width:0;
  padding:.1rem .3rem;margin:-.1rem -.3rem;border-radius:6px;color:inherit;
  transition:background .12s var(--ease-out);
}
.bilink:hover{background:var(--surface-2)}
.bilink:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.bilink.is-on{background:var(--brand-wash)}
.bilink.is-on .bilabel{color:var(--brand);font-weight:640}

.bistep{
  color:inherit;border-radius:7px;padding:.16rem .3rem;margin:-.16rem -.3rem;
  transition:background .12s var(--ease-out);
}
.bistep:hover{background:var(--surface-2)}
.bistep:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.bistep.is-on{background:var(--brand-wash)}
.bistep.is-on .bistep-l{color:var(--brand);font-weight:650}

.bifootlink{
  color:var(--muted);border-radius:5px;padding:.06rem .25rem;margin:-.06rem -.25rem;
  transition:background .12s var(--ease-out),color .12s var(--ease-out);
}
.bifootlink:hover{background:var(--surface-2);color:var(--ink-soft)}
.bifootlink.is-on{background:var(--brand-wash);color:var(--brand)}
.bifootlink strong{color:var(--ink-soft);font-weight:650}
.bifootlink.is-on strong{color:var(--brand)}

a.bip-name{
  color:var(--ink);border-radius:5px;padding:.04rem .26rem;margin:-.04rem -.26rem;
  transition:background .12s var(--ease-out);
}
a.bip-name:hover{background:var(--surface-2);color:var(--brand)}
a.bip-name:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
a.bip-name.is-on{background:var(--brand-wash);color:var(--brand);font-weight:650}

/* Why the list is short, and the way back. */
.drillbar{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;
  background:var(--brand-wash);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.5rem .75rem;margin-bottom:.8rem;font-size:.78rem;color:var(--ink-soft);
}
.drillbar strong{color:var(--brand);font-weight:700}
.drillbar a{font-weight:600;color:var(--brand);text-decoration:underline;text-underline-offset:2px}

/* The filter group is a narrowing of the folder above it, not a second place to
   be. Its heading carries the way out. */
.mail-railhead{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.mail-railclear{
  font-size:.68rem;font-weight:600;color:var(--brand);text-transform:none;letter-spacing:0;
  padding:.05rem .3rem;border-radius:5px;
}
.mail-railclear:hover{background:var(--brand-wash)}

/* The stage a submission has reached, carried on every email in its thread. */
.mail-tag.is-stage{background:var(--brand-wash);color:var(--brand);font-weight:650}
.mail-tag.is-stage.stage-interview_scheduled,
.mail-tag.is-stage.stage-interviewed{background:var(--gold-wash);color:var(--gold-ink)}
.mail-tag.is-stage.stage-offered,
.mail-tag.is-stage.stage-placed{background:var(--ok-wash);color:var(--ok)}
.mail-tag.is-stage.stage-rejected,
.mail-tag.is-stage.stage-backed_out,
.mail-tag.is-stage.stage-withdrawn{background:var(--danger-wash);color:var(--danger)}

/* Interview details: the appointment, and the form that captures it. */
.ivrow{
  display:grid;gap:.3rem .9rem;padding:.6rem 0;border-bottom:1px solid var(--line-2);
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,.9fr);
}
.ivrow:last-child{border-bottom:0}
.ivwhen strong{display:block;font-size:.86rem}
.ivtz{font-size:.72rem;color:var(--muted);margin-left:.3rem}
.ivwhen em{display:block;font-style:normal;font-size:.73rem;color:var(--muted)}
.ivwho{display:flex;flex-direction:column;font-size:.78rem;color:var(--ink-soft);min-width:0}
.ivwho span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.ivlink{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.76rem}
.ivnotes{grid-column:1/-1;margin:.2rem 0 0;font-size:.78rem;color:var(--ink-soft)}
/* .card>.card-h sets justify-content:space-between, which with three children
   strands the caret on the far left and floats the heading into the middle of
   the row. The caret belongs beside the heading it opens; only the hint goes
   right. */
/* .card.ivform, not .ivform: .card>.card-h is two classes and would otherwise
   win, leaving the caret a full 1rem adrift from the heading it belongs to. */
.card.ivform > summary{cursor:pointer;list-style:none;justify-content:flex-start;gap:.5rem}
.card.ivform > summary::-webkit-details-marker{display:none}
.card.ivform > summary::before{
  content:"";width:.42rem;height:.42rem;flex:none;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(-45deg);transition:transform .15s ease,border-color .15s ease;
}
.card.ivform[open] > summary::before{transform:rotate(45deg)}
.card.ivform > summary .hint{margin-left:auto}
/* It is a control, so it should answer the pointer. */
.card.ivform > summary:hover h2{color:var(--brand)}
.card.ivform > summary:hover::before{border-color:var(--brand)}
.ivpaste{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.8rem;
  padding:.55rem .7rem;border:1px dashed var(--line);border-radius:var(--radius-sm);
  background:var(--surface-2);
}
.ivpaste kbd{
  font:inherit;font-size:.72rem;background:var(--surface);border:1px solid var(--line);
  border-bottom-width:2px;border-radius:4px;padding:0 .25rem;
}
.ivstate{font-size:.76rem;color:var(--muted)}
.ivstate.is-ok{color:var(--ok);font-weight:600}
.ivstate.is-warn{color:var(--warn-ink);font-weight:600}
/* A field the model filled: visibly its work, still yours to correct. */
.is-filled{background:var(--gold-wash);border-color:#f0d9a4}
@media (max-width:760px){ .ivrow{grid-template-columns:minmax(0,1fr)} }

/* The analysis a draft already has, shown on reopening it. */
.aiprev{
  margin-top:.6rem;padding:.75rem .85rem;border:1px solid var(--line-2);
  border-radius:var(--radius-sm);background:var(--surface-2);
}
.aiprev-top{display:flex;align-items:baseline;gap:.6rem}
.aiprev-score{font-size:1.35rem;font-weight:700;color:var(--brand);line-height:1}
.aiprev-when{font-size:.75rem;color:var(--muted)}
.aiprev-note{margin:.5rem 0 .6rem;font-size:.82rem;color:var(--ink-soft)}
.aiprev-row{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;margin-bottom:.4rem}
.aiprev-row > span{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  min-width:4.2rem;
}
.aiprev .chip{
  font-style:normal;font-size:.73rem;padding:.12rem .45rem;border-radius:999px;
  border:1px solid transparent;
}
.aiprev .chip-ok{background:var(--ok-wash);color:var(--ok);border-color:#bfe3cd}
.aiprev .chip-gap{background:var(--danger-wash);color:var(--danger);border-color:#f2cdcd}
/* No gaps left is good news, and should read like it. */
.aiprev .chip-none{
  background:var(--ok-wash);color:var(--ok);border-color:#bfe3cd;
  border-radius:var(--radius-sm);padding:.14rem .5rem;
}
/* The score as it stood, and what tailoring moved it to. */
.aiprev-was{font-size:1rem;font-weight:600;color:var(--muted);text-decoration:line-through}
.aiprev-arrow{color:var(--muted-2)}
.aiprev-gain{
  font-size:.72rem;font-weight:650;color:var(--ok);background:var(--ok-wash);
  border-radius:999px;padding:.1rem .45rem;
}
.aiprev-act{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.6rem 0 .5rem}

/* ---- Positions / Submissions dashboards ------------------------------- */
.bidash-pos{margin-bottom:1rem}

/* A single figure that carries the tile, with the bar reading as progress. */
.bigauge{text-align:center;padding:.35rem 0 .1rem}
.bigauge-n{font-size:2.1rem;font-weight:750;color:var(--brand);line-height:1}
.bigauge-l{font-size:.74rem;color:var(--muted);margin:.2rem 0 .55rem}
.bigauge-track{height:8px;border-radius:999px;background:var(--line-2);overflow:hidden}
.bigauge-fill{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--brand),#4f86f0);
}
.bilegend-flat{display:flex;gap:1.1rem;flex-wrap:wrap;margin-top:.7rem;padding:0;list-style:none}
.bilegend-flat li{display:flex;flex-direction:column;gap:.05rem}
.bilegend-flat .bilabel{font-size:.7rem;color:var(--muted)}
.bilegend-flat .bival{font-size:.95rem;font-weight:700;color:var(--ink)}

/* A ranked list where the bar is the comparison, not decoration. */
.birank{list-style:none;margin:0;padding:0;display:grid;gap:.42rem}
.birank li{display:grid;grid-template-columns:minmax(0,7.5rem) 1fr auto;align-items:center;gap:.5rem}
.birank-name{
  font-size:.78rem;color:var(--ink-soft);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}
.birank-bar{height:7px;border-radius:999px;background:var(--line-2);overflow:hidden}
.birank-bar > span{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--gold),#f3c86a);
}
.birank-n{font-size:.78rem;font-weight:700;color:var(--ink);min-width:1.6rem;text-align:right}

/* Skills, sized by how often they are asked for. */
.bicloud{display:flex;flex-wrap:wrap;gap:.35rem;align-items:baseline}
.bichip{
  display:inline-flex;align-items:baseline;gap:.28rem;text-decoration:none;
  padding:.16rem .5rem;border-radius:999px;line-height:1.25;
  background:var(--brand-wash);color:var(--brand);border:1px solid transparent;
  transition:background .12s ease,border-color .12s ease;
}
.bichip:hover{background:#dfe8fb;border-color:#c4d3f4}
.bichip em{font-style:normal;font-size:.68em;color:var(--muted);font-weight:650}
/* A tile with a lot to say gets two columns rather than a lonely third. */
.bitile-2up{grid-column:span 2}
@media (max-width:900px){ .bitile-2up{grid-column:1 / -1} }

/* The pipeline as a funnel: each rung a row you can open. */
.bifunnel{list-style:none;margin:0;padding:0;display:grid;gap:.34rem}
.bifunnel-row{
  display:grid;grid-template-columns:minmax(0,8.5rem) 1fr auto;align-items:center;
  gap:.5rem;text-decoration:none;padding:.12rem .18rem;border-radius:var(--radius-sm);
}
.bifunnel-row:hover{background:var(--surface-2)}
.bifunnel-name{font-size:.78rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bifunnel-track{height:14px;border-radius:4px;background:var(--line-2);overflow:hidden}
.bifunnel-fill{display:block;height:100%;border-radius:4px;transition:width .2s ease}
.bifunnel-n{font-size:.8rem;font-weight:700;color:var(--ink);min-width:1.8rem;text-align:right}

/* Match-score bands, as columns that stand on a shared floor. */
.bibands{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;align-items:end;min-height:104px}
.biband{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:104px}
.biband-bar{
  width:100%;max-width:46px;border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,var(--brand),#7aa5f5);
}
.biband-n{font-size:.82rem;font-weight:700;color:var(--ink);margin-top:.25rem}
.biband-l{font-size:.66rem;color:var(--muted)}

/* ---- Apply jobs: one filter strip, and grouping by consultant --------- */
.jobfilter{display:grid;gap:.55rem;padding:.85rem .95rem}
.jobfilter-find{display:flex;gap:.5rem}
.jobfilter-find input[type="search"]{flex:1;font-size:.92rem;padding:.5rem .7rem}
.jobfilter-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.jobfilter-row select{min-width:9.5rem}
.jobfilter-widened{
  font-size:.74rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.3rem;align-items:baseline;
}
.jobfilter-widened em{
  font-style:normal;background:var(--brand-wash);color:var(--brand);
  border-radius:999px;padding:.05rem .4rem;
}

.jobgroup{margin:1.1rem 0}
.jobgroup-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin:0 0 .5rem;padding-bottom:.35rem;
  border-bottom:2px solid var(--line);
}
.jobgroup-head h2{margin:0;font-size:1rem;display:flex;align-items:center;gap:.45rem}
.jobgroup-n{
  font-size:.72rem;font-weight:700;background:var(--brand);color:#fff;
  border-radius:999px;padding:.05rem .45rem;
}
.jobgroup-head p{margin:0;font-size:.76rem;color:var(--muted)}
.jobgroup-head a{color:var(--brand);text-decoration:none}
.jobgroup-head a:hover{text-decoration:underline}

.jobtag.is-term{background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line)}
.jobtag.is-term.is-c2c{background:var(--ok-wash);color:var(--ok);border-color:#bfe3cd}
.jobtag.is-auth{background:var(--gold-wash);color:var(--gold-ink);border:1px solid #f0d9a4}

/* A merged group names the other disciplines it took in, quietly. */
.jobgroup-also {
  margin: .15rem 0 0;
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: .01em;
}

/* What the board is currently narrowed to, and the way back out of it. */
.jobfilter-scope {
  margin: .55rem 0 0;
  padding: .5rem .7rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  font-size: .84rem;
  color: var(--text);
}
.jobfilter-scope a { margin-left: .35rem; font-weight: 600; }
.jobfilter-widened em { font-style: normal; font-weight: 600; }

/* ===========================================================================
   Apply jobs: the group tabs, the collapsed filter, and the opened requirement
   ===========================================================================
   The expanded card was one flat white sheet: meta, vendor, wants, the email
   body and the candidate list all sat on --surface with only margins between
   them, so nothing told you where one thing ended and the next began. Each part
   now gets its own ground, and the order of importance is carried by how much
   colour each one is allowed to hold -- the candidate list most, because that
   is the only section anyone acts on, and the email body least, because it is
   reference material.
   ======================================================================== */

/* --- the group tabs --------------------------------------------------- */
.jobtabs{margin-top:.9rem}
.jobtabs-strip{
  display:flex;flex-wrap:wrap;gap:.3rem;
  padding:.3rem;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.jobtab{
  display:inline-flex;align-items:center;gap:.4rem;
  /* 44px tall including the border: a tab is a primary control here and gets a
     real target, not a text link that happens to be clickable. */
  min-height:2.6rem;padding:.5rem .8rem;
  border:1px solid transparent;border-radius:calc(var(--radius) - .2rem);
  background:transparent;color:var(--ink-soft);
  font:inherit;font-size:.83rem;font-weight:530;letter-spacing:-.005em;
  cursor:pointer;transition:background .14s ease,color .14s ease,border-color .14s ease;
}
.jobtab:hover{background:var(--brand-wash);color:var(--brand)}
.jobtab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.jobtab.is-on{
  background:var(--brand);border-color:var(--brand);color:#fff;
  /* Colour alone would leave the selected tab invisible to anyone who cannot
     separate navy from grey, so the gold underline says it a second way. */
  box-shadow:inset 0 -3px 0 var(--gold);
}
.jobtab-name{white-space:nowrap}
.jobtab-n{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.5rem;padding:0 .32rem;border-radius:999px;
  background:var(--brand-wash);color:var(--brand);
  font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums;
}
.jobtab.is-on .jobtab-n{background:rgba(255,255,255,.2);color:#fff}
.jobtab-own{
  font-size:.63rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--gold-ink);background:var(--gold-wash);
  padding:.08rem .3rem;border-radius:4px;
}
.jobtab.is-on .jobtab-own{background:rgba(255,255,255,.22);color:#fff}

/* Naming your own group: present, but never louder than the tabs themselves. */
.jobtabs-add{margin:.5rem 0 0;font-size:.8rem}
.jobtabs-add > summary{
  display:inline-block;cursor:pointer;padding:.3rem .1rem;
  color:var(--brand);font-weight:560;
}
.jobtabs-add > summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.jobtabs-add form{
  display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;
  margin-top:.4rem;padding:.7rem .8rem;
  border-radius:var(--radius-sm);background:var(--brand-wash);
  border:1px solid color-mix(in srgb, var(--brand) 16%, transparent);
}
.jobtabs-add form label{font-weight:560;color:var(--ink-soft)}
.jobtabs-add form input[type="text"]{flex:1;min-width:14rem}
.jobtabs-add form p{flex-basis:100%;margin:.1rem 0 0}
.jobtabs-own{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.3rem}
.jobtabs-own li{
  display:flex;align-items:center;gap:.5rem;
  padding:.35rem .55rem;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--line-2);
}
.jobtabs-own li > span:first-child{font-weight:550;color:var(--ink)}
.jobtabs-own li form{margin-left:auto;padding:0;background:none;border:0}
.jobtabs-panel{margin-top:.75rem}

/* --- the filter, collapsed into the strip ----------------------------- */

/* A class that sets display beats the browser's own [hidden] rule, so the
   panel stayed on screen with the attribute correctly applied -- the markup was
   right and the page looked broken anyway. Both collapsibles say it explicitly.
   Kept as its own rule rather than folded into the layout ones, because this is
   about the attribute winning, not about how either element is laid out. */
.jobfilter-row[hidden],
.jobtabs-panel[hidden]{display:none}

.jobfilter-toggle{
  display:inline-flex;align-items:center;gap:.35rem;flex:none;
  min-height:2.4rem;
}
.jobfilter-toggle svg{flex:none}
.jobfilter-toggle[aria-expanded="true"]{background:var(--brand-wash);color:var(--brand)}
.jobfilter-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.2rem;height:1.2rem;padding:0 .25rem;border-radius:999px;
  background:var(--gold);color:#3d2a02;
  font-size:.68rem;font-weight:800;font-variant-numeric:tabular-nums;
}

/* --- the opened requirement ------------------------------------------- */

/* Where it came from and what it pays: quiet, but on its own ground. */
.jobcard[open] .jobcard-head{
  padding:.6rem .75rem;margin-top:.1rem;
  border-radius:var(--radius-sm);
  background:var(--brand-wash);
  border:1px solid color-mix(in srgb, var(--brand) 12%, transparent);
}
.jobcard[open] .jobcard-meta{font-size:.8rem}
.jobcard[open] .jobcard-meta strong{color:var(--brand)}

/* The vendor line reads as a source, so it is tinted like information rather
   than like something to act on. */
.jobcard-vendor{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  margin-top:.5rem;padding:.45rem .7rem;border-top:0;
  border-radius:var(--radius-sm);
  background:var(--info-wash);
  border:1px solid color-mix(in srgb, var(--info) 14%, transparent);
  font-size:.78rem;
}
.jobcard-vendor > a:first-child{font-weight:600;color:var(--info)}

/* What the role wants, and the email itself. Two different kinds of thing, so
   the chips sit on white and the prose sits on the recessed ground below it. */
.jobcard-jd{
  margin-top:.6rem;padding:0;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--line);
  overflow:hidden;
  font-size:.79rem;color:var(--ink-soft);line-height:1.6;
}
.jobcard-skills{
  display:flex;flex-wrap:wrap;gap:.26rem;align-items:center;
  padding:.55rem .7rem;
  background:var(--gold-wash);
  border-bottom:1px solid color-mix(in srgb, var(--gold) 26%, transparent);
}
.jdlabel{
  font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-ink);margin-right:.15rem;
}
.jobcard-body{
  padding:.65rem .8rem;
  background:var(--surface-2);
  /* The body arrives as plain text from an email; a left rule marks it as
     quoted material rather than something the app wrote. */
  border-left:3px solid var(--line);
}
/* The ground spans the panel, the words stop where they are still readable. */
.jobcard-jd p{margin:0;max-width:78ch}

/* The candidate list is the only part anyone acts on, so it is the only part
   allowed a strong edge. */
.jobcard-match{
  margin-top:.65rem;padding:.6rem .7rem .7rem;
  border-radius:var(--radius-sm);
  background:var(--surface);
  border:1px solid var(--line);
  border-top:3px solid var(--brand);
  box-shadow:var(--shadow-sm);
}
.matchhead{
  margin:0 0 .45rem;font-size:.79rem;color:var(--brand);font-weight:600;
}
.matchhead.is-quiet{color:var(--muted);font-weight:460}
.jobcard-none{
  margin-top:.5rem;padding:.5rem .7rem;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px dashed var(--line);
  font-size:.78rem;color:var(--muted);
}

@media (max-width:720px){
  .jobtabs-strip{padding:.25rem;gap:.2rem}
  .jobtab{padding:.45rem .6rem;font-size:.8rem}
  .jobfilter-find{flex-wrap:wrap}
  .jobfilter-toggle{flex:1 0 auto}
}

/* Somebody who has asked for less movement gets none of the tab transition. */
@media (prefers-reduced-motion:reduce){
  .jobtab{transition:none}
}

/* What the search actually found, said in numbers. */
.jobfilter-hits{
  margin:.5rem 0 0;padding:.5rem .7rem;border-radius:var(--radius-sm);
  background:var(--ok-wash);
  border:1px solid color-mix(in srgb, var(--ok) 22%, transparent);
  font-size:.83rem;color:var(--ink-soft);
}
.jobfilter-hits strong{color:var(--ok);font-variant-numeric:tabular-nums}
/* Nothing found is not a success, and must not be dressed as one. */
.jobfilter-hits.is-none{
  background:var(--warn-wash);
  border-color:color-mix(in srgb, var(--warn) 26%, transparent);
}
.jobfilter-hits.is-none strong{color:var(--warn-ink)}

/* ===========================================================================
   The bench band: colour, hover, and a list you can actually search
   ===========================================================================
   Everything here was drawn in border greys and washes, so a tile full of work
   looked like a tile with nothing in it, and no row answered the mouse. The
   fills are pastel, the hover is real, and the consultant list holds the whole
   bench instead of the first eight.
   ======================================================================== */

/* The whole list scrolls once it outgrows the tile. */
.bipeople{max-height:19rem;overflow-y:auto;padding-right:.2rem}
.bipeople::-webkit-scrollbar{width:8px}
.bipeople::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.bipeople::-webkit-scrollbar-thumb:hover{background:var(--muted-2)}

.bipeople-find{margin:0 0 .45rem}
.bipeople-q{
  width:100%;padding:.34rem .55rem;font-size:.78rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--ink);
}
.bipeople-q:focus{
  outline:none;border-color:var(--brand);background:var(--surface);
  box-shadow:0 0 0 3px var(--brand-wash);
}
.bipeople li[hidden]{display:none}
.bipeople-none{
  padding:.5rem;font-size:.78rem;color:var(--muted);text-align:center;
}

/* A row is a target, so it behaves like one. */
.bipeople li{
  padding:.18rem .3rem;border-radius:var(--radius-sm);
  transition:background .12s var(--ease-out);
}
.bipeople li:hover{background:var(--brand-wash)}

/* Name over title: the title is what tells twenty people apart. */
a.bip-name{display:flex;flex-direction:column;gap:.05rem;line-height:1.25}
.bip-who{font-weight:580;color:var(--ink)}
.bip-title{
  font-size:.68rem;color:var(--muted);font-weight:450;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bipeople li:hover .bip-who,
a.bip-name.is-on .bip-who{color:var(--brand)}

/* The bars carry a real colour now, and answer the mouse. */
.bip-track{background:var(--line-2);border-radius:999px;overflow:hidden}
.bip-fit{
  background:var(--pas-blue);box-shadow:none;
  transition:background .12s var(--ease-out);
}
.bip-sent{background:var(--pas-amber)}
.bipeople li:hover .bip-fit{background:var(--brand)}
.bikey i.bip-fit{background:var(--pas-blue)}
.bikey i.bip-sent{background:var(--pas-amber)}

/* The donut and its legend. */
.bidonut svg path{transition:opacity .12s var(--ease-out)}
.bidonut:hover svg path{opacity:.72}
.bidonut svg path:hover{opacity:1}
.bilink{border-radius:var(--radius-sm);transition:background .12s var(--ease-out)}
.bilink:hover{background:var(--brand-wash)}
.bidot{box-shadow:inset 0 0 0 1px rgba(21,27,43,.12)}

/* The daily strip: an empty day should read as a quiet day, not a broken one. */
.bibar{background:var(--pas-blue);transition:background .12s var(--ease-out)}
.bibar:hover{background:var(--brand)}
.bibar.is-today{background:var(--pas-amber)}
.bibar.is-empty{background:var(--line-2)}

/* ---- the tags, in the same pastel family ---- */
.jobtag.is-term{
  background:var(--pas-slate);color:var(--pas-slate-ink);
  border:1px solid transparent;font-weight:650;
}
.jobtag.is-term.is-c2c{background:var(--pas-green);color:var(--pas-green-ink)}
.jobtag.is-auth{
  background:var(--pas-teal);color:var(--pas-teal-ink);
  border:1px solid transparent;font-weight:650;
}
.jobtag.is-go{background:var(--pas-green);color:var(--pas-green-ink);border-color:transparent}
.jobtag.is-done{background:var(--pas-blue);color:var(--pas-blue-ink);border-color:transparent}
.jobnew{background:var(--pas-amber);color:var(--pas-amber-ink);border-color:transparent}

/* ---- the requirement body, in the shape it arrived ---- */
.jobcard-body{
  max-height:22rem;overflow-y:auto;
  /* The scrollbar is the only clue there is more below, so it stays visible
     rather than appearing on hover. */
  scrollbar-gutter:stable;
}
/* A vendor's own markup needs more room than reconstructed prose: a rate table
   or a bulleted spec is taller than the same words as paragraphs. */
.jobcard-body.is-original{max-height:30rem}
.jobcard-body.is-original > *:first-child{margin-top:0}
.jobcard-body.is-original p{margin:0 0 .5rem}
.jobcard-body.is-original ul,.jobcard-body.is-original ol{margin:.3rem 0 .6rem;padding-left:1.15rem}
.jobcard-body.is-original li{margin:.12rem 0}
.jobcard-body.is-original b,.jobcard-body.is-original strong{color:var(--ink)}
.jobcard-body::-webkit-scrollbar{width:8px}
.jobcard-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.jobcard-body p{margin:0 0 .5rem;max-width:78ch}
.jobcard-body p:last-child{margin-bottom:0}
.jobcard-body h4{
  margin:.7rem 0 .3rem;font-size:.75rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--brand);
}
.jobcard-body h4:first-child{margin-top:0}
.jobcard-body ul{margin:.2rem 0 .55rem;padding-left:1.05rem;max-width:78ch}
.jobcard-body li{margin:.16rem 0}
.jobcard-body li::marker{color:var(--gold)}
/* "Location: Dallas, TX" -- the label earns its own weight. */
.jobcard-body .jdfact{margin:.1rem 0}
.jobcard-body .jdfact span{
  font-weight:650;color:var(--ink-soft);
}

/* One sending account: shown, not offered as a choice. */
.mrfrom-one{
  padding:.4rem .55rem;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--line-2);
  font-size:.85rem;color:var(--ink-soft);
}

/* One consultant picked: say who, and offer the way back. */
.bipicked{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  color:var(--ink-soft);
}
.bipicked strong{color:var(--brand)}
.biclear,.jobfilter-reset{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.14rem .5rem;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);
  color:var(--ink-soft);font-size:.74rem;font-weight:600;text-decoration:none;
  transition:background .12s var(--ease-out),color .12s var(--ease-out);
}
.biclear::before,.jobfilter-reset::before{content:"×";font-size:.95em;line-height:1}
.biclear:hover,.jobfilter-reset:hover{
  background:var(--danger-wash);border-color:#e8b9b9;color:var(--danger);
}

/* ===========================================================================
   Assign consultants — one card per person, every recruiter on it
   ===========================================================================
   This was a matrix, consultants down and recruiters across. At four recruiters
   it read fine. At twenty-five it was wider than any screen, and allocating one
   person meant scrolling sideways until the name you were aiming at had left
   the viewport. Recruiters now wrap under the consultant they belong to, so the
   whole of one person's allocation is readable at once and nothing scrolls
   horizontally. The ground is darker than the rest of the app on purpose: this
   is an admin screen and the chips need something to sit against.
   ======================================================================== */

.benchtabs{display:flex;gap:.3rem;margin:.9rem 0 .7rem}
/* The second tab strip: which way the allocation is grouped.
 *
 * Kept visually quieter than the roster strip above it. That one chooses the
 * data -- on the bench or archived -- and this one only chooses how the same
 * data is laid out, so it should not compete with it for the eye.
 */
.benchtabs-view{margin:.2rem 0 .8rem;flex-wrap:wrap}
.benchtabs-view .benchtab{font-size:.84rem;padding:.3rem .65rem}
/* A recruiter with nobody on them is a fact worth reading, not a blank card. */
.benchempty{padding:.55rem .7rem;font-size:.85rem;color:var(--muted,#6b7280);font-style:italic}
.benchcards-rec .benchcard-name{color:var(--ink,#1f2937)}
.benchcards-rec .benchchip{max-width:100%}
.benchcards-rec .benchchip-name{overflow:hidden;text-overflow:ellipsis}
.benchtab{
  display:inline-flex;align-items:center;gap:.4rem;min-height:2.4rem;
  padding:.45rem .85rem;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);
  color:var(--ink-soft);font-size:.85rem;font-weight:560;text-decoration:none;
  transition:background .12s var(--ease-out),color .12s var(--ease-out);
}
.benchtab:hover{background:var(--brand-wash);color:var(--brand)}
.benchtab.is-on{
  background:var(--brand);border-color:var(--brand);color:#fff;
  box-shadow:inset 0 -3px 0 var(--gold);
}
.benchtab-n{
  min-width:1.5rem;padding:0 .3rem;border-radius:999px;text-align:center;
  background:var(--brand-wash);color:var(--brand);
  font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums;
}
.benchtab.is-on .benchtab-n{background:rgba(255,255,255,.2);color:#fff}

.benchcards{display:grid;gap:.6rem}
.benchcard{
  padding:.75rem .85rem;border-radius:var(--radius);
  /* Darker than a plain card: the chips below need a ground to read against. */
  background:linear-gradient(180deg, var(--brand-wash) 0%, var(--line-2) 100%);
  border:1px solid #d3dae7;
  box-shadow:var(--shadow-sm);
}
.benchcard.is-loose{
  /* Nobody marketing them is the one state worth spotting from across a room. */
  border-color:#e6c98f;
  background:linear-gradient(180deg, #fdf6e8 0%, #f8eed9 100%);
}
.benchcard-head{display:flex;align-items:flex-start;gap:.7rem;flex-wrap:wrap}
.benchcard-pick{flex:none;padding-top:.15rem}
.benchcard-who{flex:1;min-width:12rem;display:flex;flex-direction:column;gap:.1rem}
.benchcard-name{font-size:.95rem;font-weight:640;color:var(--brand);text-decoration:none}
.benchcard-name:hover{text-decoration:underline}
.benchcard-title{font-size:.78rem;color:var(--ink-soft)}
.benchcard-since{font-size:.74rem;color:var(--ink-soft)}
.benchcard-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.15rem}
.benchcard-state{flex:none;align-self:center}
.benchcard-count{
  padding:.16rem .5rem;border-radius:999px;
  background:var(--pas-green);color:var(--pas-green-ink);
  font-size:.72rem;font-weight:700;
}
.benchcard-count.is-none{background:var(--pas-amber);color:var(--pas-amber-ink)}
.benchcard-arch{
  padding:.16rem .5rem;border-radius:999px;
  background:var(--pas-slate);color:var(--pas-slate-ink);
  font-size:.72rem;font-weight:700;
}
.benchcard-acts{display:flex;gap:.35rem;flex:none;align-self:center}
.benchcard-acts form{margin:0}
.benchcard-acts .is-danger{color:var(--danger)}
.benchcard-acts .is-danger:hover{background:var(--danger-wash);border-color:#e8b9b9}

/* Every recruiter, wrapping. No horizontal scroll at any bench size. */
.benchchips{
  display:flex;flex-wrap:wrap;gap:.3rem;
  margin-top:.6rem;padding-top:.6rem;
  border-top:1px solid #d3dae7;
}
.benchchip{
  display:inline-flex;align-items:center;gap:.35rem;
  /* A real target: these get clicked all day. */
  min-height:2rem;padding:.3rem .55rem;
  border-radius:999px;border:1px dashed #b8c2d4;
  background:rgba(255,255,255,.65);color:var(--ink-soft);
  font:inherit;font-size:.76rem;font-weight:550;cursor:pointer;
  transition:background .12s var(--ease-out),border-color .12s var(--ease-out),
             color .12s var(--ease-out);
}
.benchchip:hover{border-color:var(--brand);background:#fff;color:var(--brand)}
.benchchip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.benchchip-name{white-space:nowrap}
.benchchip-load{
  min-width:1.15rem;padding:0 .25rem;border-radius:999px;text-align:center;
  background:rgba(37,53,89,.09);color:var(--muted);
  font-size:.67rem;font-weight:700;font-variant-numeric:tabular-nums;
}
.benchchip-st{font-size:.67rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase}

/* Assigned states, solid so they read at a glance across a wrapped block. */
.benchchip.is-active{
  background:var(--ok);border:1px solid var(--ok);color:#fff;
}
.benchchip.is-active .benchchip-load{background:rgba(255,255,255,.22);color:#fff}
.benchchip.is-paused{
  background:var(--pas-amber);border:1px solid #e0b447;color:var(--pas-amber-ink);
}
.benchchip.is-paused .benchchip-load{background:rgba(0,0,0,.09);color:var(--pas-amber-ink)}
.benchchip.is-placed{
  background:var(--brand);border:1px solid var(--brand);color:#fff;
}
.benchchip.is-placed .benchchip-load{background:rgba(255,255,255,.22);color:#fff}
.benchchip.is-left,.benchchip.is-off{
  background:var(--pas-slate);border:1px solid #a6b4d0;color:var(--pas-slate-ink);
}

@media (max-width:760px){
  .benchcard-acts{width:100%;justify-content:flex-start}
  .benchcard-state{order:-1}
}
@media (prefers-reduced-motion:reduce){
  .benchtab,.benchchip{transition:none}
}

/* A submission that has not been sent. Said plainly, in a colour that is
   neither success nor failure -- it is simply unfinished work. */
.badge-draft{
  background:var(--pas-slate);color:var(--pas-slate-ink);
  border:1px solid transparent;font-weight:650;white-space:nowrap;
}

/* Who is on a requirement, named. The count alone never answered the question
   a manager was actually asking. */
.rectags{display:inline-flex;flex-wrap:wrap;gap:.2rem;justify-content:flex-end}
.rectag{
  padding:.1rem .4rem;border-radius:999px;
  background:var(--pas-blue);color:var(--pas-blue-ink);
  font-size:.68rem;font-weight:650;white-space:nowrap;
}
.rectag.is-more{background:var(--pas-slate);color:var(--pas-slate-ink)}

/* Somebody else already answered this requirement. */
.jobtag.is-others{
  background:var(--pas-purple);color:var(--pas-purple-ink);
  border:1px solid transparent;font-weight:650;cursor:help;
}
/* The vendor's own markup, kept inside the card rather than let loose on it. */
.jobcard-body.is-original{padding:.65rem .8rem}
.jobcard-body.is-original table{max-width:100%;border-collapse:collapse}
.jobcard-body.is-original td,.jobcard-body.is-original th{
  padding:.2rem .4rem;border:1px solid var(--line-2);font-size:.78rem;
}
.jobcard-body.is-original img{max-width:100%;height:auto}
.jobcard-body.is-original a{color:var(--info)}
.jobcard-bodyfoot{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.35rem .8rem;border-top:1px solid var(--line-2);
  background:var(--surface);font-size:.74rem;
}
.jobcard-asis{color:var(--muted-2)}
.jobcard-full{margin-left:auto;font-weight:600;color:var(--brand)}

/* The mail a requirement was read out of. Quiet until wanted. */
.poslink-mail{color:var(--info);font-weight:600;text-decoration:none}
.poslink-mail:hover{text-decoration:underline}

/* Somebody has answered this requirement. Counted when more than one desk has. */
.jobtag.is-sent{
  background:var(--brand);color:#fff;border:1px solid transparent;
  font-weight:700;cursor:help;
}

/* What a group is holding back, and the way to see more of it. */
.jobgroup-more{
  display:flex;align-items:center;gap:.7rem;
  margin-top:.5rem;padding:.5rem .7rem;
  border-radius:var(--radius-sm);
  background:var(--surface);border:1px dashed var(--line);
  font-size:.8rem;color:var(--muted);
}
.jobgroup-more a{margin-left:auto}

/* ===========================================================================
   Submission auto-pilot
   ===========================================================================
   A recruiter starts several of these and goes back to reading requirements, so
   the panel has to answer "what is it doing and is it stuck" from across the
   room, and "what exactly did it do" on demand. Hence a stepper for the shape,
   one line of live text for now, and a collapsed log for everything.
   ======================================================================== */

.matchauto{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.2rem .5rem;border-radius:999px;
  background:var(--brand-wash);color:var(--brand);
  font-size:.72rem;font-weight:650;text-decoration:none;white-space:nowrap;
  /* Held back until the row is hovered: this is the powerful action on the row
     and it should not compete with reading the score. */
  opacity:0;transition:opacity .12s var(--ease-out),background .12s var(--ease-out);
}
.matchrow:hover .matchauto,
.matchauto:focus-visible{opacity:1}
.matchauto:hover{background:var(--brand);color:#fff}
.matchauto svg{width:12px;height:12px;flex:none}
/* Touch has no hover, so there it simply stays visible. */
@media (hover:none){.matchauto{opacity:1}}

.appanel{
  margin:0 0 1rem;padding:.9rem 1.05rem;
  border-radius:var(--radius);
  background:var(--surface);
  border:1px solid var(--line);
  border-left:4px solid var(--brand);
  box-shadow:var(--shadow-md);
}
.appanel.is-won{border-left-color:var(--ok)}
.appanel.is-stopped{border-left-color:var(--warn)}
.appanel.is-failed{border-left-color:var(--danger)}
/* Reached the target, but by writing most of the match in. Amber, not green:
   the run succeeded and the resume still needs reading before it goes out. */
.appanel.is-won.is-stretched{border-left-color:var(--warn)}
.appanel.is-won.is-stretched .appanel-live{background:var(--warn-wash);color:var(--warn-ink)}

.appanel-head{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.appanel-head h2{margin:0;font-size:1rem;font-weight:640;letter-spacing:-.01em}
.appanel-round{
  padding:.1rem .45rem;border-radius:999px;
  background:var(--brand-wash);color:var(--brand);
  font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums;
}
.appanel-head .btn{margin-left:auto}

.apsteps{
  list-style:none;display:flex;flex-wrap:wrap;gap:.3rem;
  margin:.7rem 0 .6rem;padding:0;
}
.apstep{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.25rem .6rem;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line-2);
  font-size:.75rem;font-weight:560;color:var(--muted);
}
.apstep::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--muted-2)}
.apstep.is-running{
  background:var(--brand-wash);border-color:transparent;color:var(--brand);
}
.apstep.is-running::before{
  background:var(--brand);
  animation:appulse 1.1s ease-in-out infinite;
}
.apstep.is-done{background:var(--ok-wash);border-color:transparent;color:var(--ok)}
.apstep.is-done::before{background:var(--ok)}
.apstep.is-stopped{background:var(--warn-wash);border-color:transparent;color:var(--warn-ink)}
.apstep.is-stopped::before{background:var(--warn)}
.apstep.is-failed{background:var(--danger-wash);border-color:transparent;color:var(--danger)}
.apstep.is-failed::before{background:var(--danger)}
@keyframes appulse{0%,100%{opacity:1}50%{opacity:.25}}

.appanel-live{
  margin:0;padding:.5rem .65rem;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--line-2);
  font-size:.84rem;color:var(--ink-soft);
}
.appanel-meta{
  display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem;
  font-size:.74rem;color:var(--muted);
}
.appanel-meta span{
  padding:.1rem .45rem;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--line-2);font-variant-numeric:tabular-nums;
}
.appanel-log{margin-top:.55rem;font-size:.78rem}
.appanel-log > summary{cursor:pointer;color:var(--brand);font-weight:560}
.appanel-log ul{
  list-style:none;margin:.4rem 0 0;padding:.45rem .6rem;
  max-height:11rem;overflow-y:auto;
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  color:var(--muted);
}
.appanel-log li{padding:.12rem 0;border-bottom:1px solid var(--line-2)}
.appanel-log li:last-child{border-bottom:0}

@media (prefers-reduced-motion:reduce){
  .apstep.is-running::before{animation:none}
  .matchauto{transition:none}
}

/* The "this form went stale" page. Rendered before routing, so it has no
   sidebar and no shell to sit in -- it centres itself instead. */
body.csrfstale{display:grid;place-items:center;min-height:100vh;padding:1.5rem;background:var(--bg)}
body.csrfstale .card{max-width:34rem;text-align:left}
body.csrfstale h1{font-size:1.35rem;margin:0 0 .6rem}
body.csrfstale p{margin:0 0 .8rem;color:var(--ink)}
body.csrfstale .btn{margin-right:.4rem}

/* The candidate pipeline. A table, because the questions asked of it are
   "who is going cold" and "who is ready" -- both answered by sorting. */
.pipecold{border-left:3px solid var(--warn)}
.pipecold .tbl td{padding-top:.35rem;padding-bottom:.35rem}
/* A sortable heading.
 *
 * It has to read as a control without becoming a button: the arrow is the only
 * thing that changes, greyed while the column is not the one in use and solid
 * in the direction it is sorted, so a glance at the row says both which column
 * decides the order and which way it runs.
 */
.sorth{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:.25rem;
       white-space:nowrap;border-radius:.25rem}
.sorth:hover{text-decoration:none;color:var(--brand,#253559)}
.sorth:focus-visible{outline:2px solid var(--brand,#253559);outline-offset:2px}
.sorth.is-on{font-weight:800}
.sortarrow{font-size:.78em;line-height:1;opacity:.35}
.sorth:hover .sortarrow{opacity:.7}
.sortarrow.is-on{opacity:1;color:var(--brand,#253559)}
.pipetbl tr.is-dropped{opacity:.62}
.pipetbl .is-cold{color:var(--danger);font-weight:700}
.pipetbl .tag{margin-right:.15rem}
/* Scoped, because .formcard label sets display:block at the same specificity
   and whichever came last would otherwise decide it. */
.formcard label.check{display:flex;align-items:center;gap:.4rem;font-weight:500;
  margin:.15rem 0;font-size:.85rem;color:var(--ink)}
.formcard label.check input{margin:0}


/* The rate behind a "Rate confirmed" status, on hover. */
.ratecard {
    position: absolute;
    z-index: 60;
    min-width: 15rem;
    max-width: 22rem;
    padding: .7rem .8rem;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    background: var(--surface, #fff);
    box-shadow: 0 12px 30px rgba(16, 24, 40, .16);
    font-size: .82rem;
    line-height: 1.5;
    pointer-events: none;
}
.ratecard .rc-head {
    font-weight: 700;
    color: var(--navy, #253559);
    margin-bottom: .4rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--line-2);
}
.ratecard .rc-line {
    display: flex;
    justify-content: space-between;
    gap: 1.2rem;
}
.ratecard .rc-line span { color: var(--ink-soft, #6b7280); }
.ratecard .rc-line strong { font-variant-numeric: tabular-nums; text-align: right; }
.ratecard .rc-note {
    margin-top: .45rem;
    padding-top: .35rem;
    border-top: 1px solid var(--line-2);
    color: var(--ink-soft, #6b7280);
}


/* The rate field on the inbox's "Rate confirmed" action. */
.mail-menu-rate {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .1rem .85rem .6rem 2.6rem;
    font-size: .78rem;
    color: var(--ink-soft, #6b7280);
}
.mail-menu-rate input {
    width: 6.5rem;
    padding: .25rem .45rem;
    font-size: .8rem;
    border: 1px solid var(--line-2);
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
}
.mail-menu-rate em { font-style: normal; opacity: .75; }


/* The pipeline field the chosen status is asking for. */
.formgrid .row.is-wanted > label { color: var(--navy, #253559); font-weight: 700; }
.formgrid .row.is-wanted input,
.formgrid .row.is-wanted select {
    border-color: var(--gold, #f6b129);
    box-shadow: 0 0 0 3px rgba(246, 177, 41, .18);
}
.formgrid .row .pl-ask { color: var(--ink-soft, #6b7280); margin-top: .3rem; }
.plpair { display: flex; gap: .5rem; }
.plpair input { flex: 1 1 8rem; min-width: 0; }
.plpair select { flex: 0 0 8.5rem; }

/* What a consultant's submissions came to, on Assign consultants. */
.bg-alt.is-rate { background: rgba(246, 177, 41, .16); color: #8a5b00; }
.bg-alt.is-iv   { background: rgba(37, 53, 89, .10);  color: var(--navy, #253559); }
.bg-alt.is-ivd  { background: rgba(46, 158, 99, .14); color: #1f7a4d; }

/* How the requirement was read, above the points drafted from it. */
.tailor-sec.tailor-focus {
    padding: .55rem .7rem;
    margin-bottom: .6rem;
    border-left: 3px solid var(--gold, #f6b129);
    background: rgba(246, 177, 41, .08);
    border-radius: 0 8px 8px 0;
}
.tailor-sec.tailor-focus h4 { margin: 0; font-size: .85rem; font-weight: 600; }
.tailor-sec.tailor-focus p { margin: .25rem 0 0; }

/* Which kind of number the Apply jobs row is showing. */
.matchscore { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.matchscore em {
    font-style: normal;
    font-size: .62rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .7;
    font-weight: 600;
}
.matchscore.is-analysed em { color: #1f7a4d; opacity: .9; }

/* Bullets the requirement has no use for, offered for removal. */
.tailor-sec.tailor-drop {
    border-left: 3px solid #c0392b;
    background: rgba(192, 57, 43, .05);
    padding: .55rem .7rem;
    border-radius: 0 8px 8px 0;
    margin-top: .8rem;
}
.tailor-sec.tailor-drop h4 { margin: 0; font-size: .85rem; color: #8c2f22; }
.tailor-sec.tailor-drop del { color: var(--ink-soft, #6b7280); }

/* Removals in the resume change review. */
.xc-added-list del { color: #8c2f22; text-decoration-color: rgba(140, 47, 34, .55); }
.xc-added-list .xc-why { font-style: normal; color: var(--ink-soft, #6b7280); font-size: .82em; }

/* ---------------------------------------------------------------- rebuild panel
 *
 * The review shown after "Rebuild projects 1-3": one row per bullet, each with
 * a checkbox.
 *
 * Every input on this site is width:100% (see the form rule far above), which
 * stretched each of these checkboxes to the full width of the card -- the box
 * on one side of the screen, its sentence on the other, and the rows
 * staircasing down the page. Scoped here so the panel's layout lives in one
 * place instead of inline on every element.
 */
#rebuild-status{font-size:.82rem;color:var(--ink)}
#rebuild-status .rb-block{margin:0 0 .85rem}
#rebuild-status .rb-head{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;
  margin-bottom:.15rem}
#rebuild-status label{display:flex;align-items:flex-start;gap:.45rem;margin:0;
  font-size:.82rem;font-weight:400;color:var(--ink);line-height:1.45;cursor:pointer}
#rebuild-status input[type=checkbox]{width:15px;height:15px;min-width:15px;flex:none;
  margin:.18rem 0 0;padding:0;border-radius:3px;accent-color:var(--brand)}
#rebuild-status .rb-points{margin:.3rem 0 0;padding:0;list-style:none}
#rebuild-status .rb-points li{margin:.22rem 0}
#rebuild-status .rb-sub{margin-left:1.4rem}
#rebuild-status ul.rb-plain{margin:.2rem 0 0 1.4rem;padding:0 0 0 1rem}
#rebuild-status ul.rb-plain li{margin:.15rem 0}
#rebuild-status .rb-covers{color:var(--muted)}
#rebuild-status .rb-checks{margin-top:.6rem;padding-top:.45rem;
  border-top:1px solid var(--line-2);color:var(--muted)}

/* ------------------------------------------------------------- wide screens
 *
 * The shell centres page content inside 1200px, which suits a form or a single
 * record. A table of fourteen columns does not fit in it: the pipeline board
 * was cut off on the right, scrolling inside itself, while the page had empty
 * gutters on both sides. These screens use the width that is there.
 */
body.widescreen .content-inner{max-width:none;padding-left:1.6rem;padding-right:1.6rem}
/* The board's own table can still be wider than a laptop; scrollx stays the
 * fallback, but it should no longer be the normal case. */
body.widescreen .scrollx{overflow-x:auto}
body.widescreen .pipetbl{width:100%;table-layout:auto}
body.widescreen .pipetbl td,body.widescreen .pipetbl th{white-space:normal}
body.widescreen .pipetbl td.nowrap,body.widescreen .pipetbl th.nowrap{white-space:nowrap}
@media (max-width:900px){
  body.widescreen .content-inner{padding-left:1.1rem;padding-right:1.1rem}
}

/* ------------------------------------------------- pipeline note thread
 *
 * A shared log, so every entry carries who wrote it and when. Read top to
 * bottom like a conversation; the box to add to it sits at the end.
 */
.pipenotes{margin-top:1rem}
.notelog{list-style:none;margin:0 0 1rem;padding:0}
.notelog li{padding:.6rem 0;border-bottom:1px solid var(--line-2)}
.notelog li:last-child{border-bottom:0}
.notemeta{display:flex;gap:.5rem;align-items:baseline;font-size:.78rem;margin-bottom:.2rem}
.notemeta strong{font-weight:640;color:var(--ink)}
.notebody{font-size:.86rem;line-height:1.55;color:var(--ink-soft);white-space:pre-wrap}
.noteadd textarea{width:100%}
.noteactions{display:flex;align-items:center;gap:.8rem;margin-top:.45rem;flex-wrap:wrap}
.noteactions .chk{display:flex;align-items:center;gap:.4rem;margin:0;
  font-size:.8rem;font-weight:400;color:var(--ink-soft)}
.noteactions .chk input[type=checkbox]{width:15px;height:15px;min-width:15px;flex:none;
  margin:0;padding:0;accent-color:var(--brand)}
.noteactions .btn{margin-left:auto}
.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}

/* --------------------------------------------- pipeline record + its notes
 *
 * On a wide screen the record and its note log sit side by side. Stretching a
 * two-column form across the whole window would only make every field absurdly
 * long; the space is better spent putting the log next to the record instead of
 * under it. Below 1180px they stack, which is the old behaviour.
 */
.pipesplit{display:grid;gap:1rem;align-items:start}
.pipesplit > .formcard{margin:0}
.pipesplit > .pipenotes{margin:0}
@media (min-width:1180px){
  body.widescreen .pipesplit:not(.is-single){
    grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  }
  /* The card no longer needs its reading-width cap: the grid column is the
   * cap now, and 820px inside a 900px column just leaves a gutter. */
  body.widescreen .pipesplit > .formcard{max-width:none}
  /* Adding somebody has no notes to sit beside, so it keeps the reading width
   * rather than stretching a lone form across the screen. */
  body.widescreen .pipesplit.is-single > .formcard{max-width:820px}
  body.widescreen .pipenotes .notelog{max-height:none}
}

/* ---------------------------------------- who has been put forward (dialog)
 *
 * One card per submission, numbered, so a person can say "the second one" and
 * be understood. This replaced a native tooltip that drew four sends as two
 * cramped lines off the edge of the window.
 */
button.jobtag.is-sent{cursor:pointer;font:inherit;font-size:.7rem;line-height:1.5;
  border:1px solid transparent;appearance:none}
button.jobtag.is-sent:hover{filter:brightness(.94)}
button.jobtag.is-sent:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
/* Colour is the information here. Five sends drawn in one weight of black made
   a person read every word to find the live one; the stripe down the edge and
   the pill on the right answer "which of these is still running" before the
   name is read. The status decides both, so they can never disagree. */
.subcard{position:relative;border:1px solid var(--line);border-radius:var(--radius-sm);
  border-left:4px solid var(--stripe,var(--muted-2));
  padding:.75rem .9rem .8rem 1rem;margin-bottom:.7rem;background:var(--surface)}
.subcard:last-of-type{margin-bottom:0}
/* The wash fades out across the card so the facts on the right stay on white
   and keep their contrast. */
.subcard.is-live {--stripe:var(--brand); --wash:var(--brand-wash)}
.subcard.is-won  {--stripe:var(--ok);    --wash:var(--ok-wash)}
.subcard.is-draft{--stripe:var(--gold);  --wash:var(--gold-wash)}
.subcard.is-dead {--stripe:var(--danger);--wash:var(--danger-wash)}
.subcard.is-live,.subcard.is-won,.subcard.is-draft,.subcard.is-dead{
  background:linear-gradient(100deg,var(--wash) 0,var(--surface) 62%)}

.subcard-h{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.65rem}
/* The number a person says out loud -- "the second one" -- so it is a marker,
   not a caption. */
.subcard-n{flex:none;display:grid;place-items:center;width:1.6rem;height:1.6rem;
  border-radius:50%;background:var(--stripe,var(--muted-2));color:#fff;
  font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums}
.subcard-id{flex:1 1 11rem;min-width:0}
.subcard-id strong{display:block;font-size:1rem;line-height:1.25;color:var(--ink)}
.subcard-t{display:block;font-size:.76rem;color:var(--muted);margin-top:.1rem}
.substat{flex:none;white-space:nowrap;font-size:.7rem;font-weight:700;letter-spacing:.02em;
  padding:.22rem .6rem;border-radius:999px;border:1px solid transparent}
.substat.is-live {background:var(--brand-wash); color:var(--brand-ink);border-color:#c6d6f7}
.substat.is-won  {background:var(--ok);         color:#fff}
.substat.is-draft{background:var(--gold-wash);  color:var(--gold-ink); border-color:#f0d9a4}
.substat.is-dead {background:var(--danger-wash);color:var(--danger);   border-color:#f5c6c6}

.subfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:.5rem .9rem;margin:0;padding-top:.6rem;border-top:1px solid var(--line-2)}
.subfacts div{margin:0}
.subfacts dt{font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  margin:0 0 .12rem}
.subfacts dd{margin:0;font-size:.86rem;color:var(--ink);font-variant-numeric:tabular-nums}
/* Whose desk to ring is the reason this panel exists, so it is the one fact
   that carries the brand colour. */
.subfacts dd .who{font-weight:650;color:var(--brand-ink)}
.subfacts dd .rate{font-weight:650;color:var(--ok)}
.subscore{font-weight:700}
.subscore.hi{color:var(--ok)}.subscore.mid{color:var(--gold-ink)}.subscore.lo{color:var(--muted)}
.subsent{display:inline-flex;align-items:center;gap:.35rem;font-weight:600}
.subsent::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
.subsent.yes{color:var(--ok)}
.subsent.no{color:var(--warn)}

/* The dialog itself: a tinted head so the panel reads as one object rather
   than a heading floating above a list. */
#sub-detail .modal-head{background:var(--brand-wash);border-bottom:1px solid #d3e0fa;
  padding:1rem 1.25rem .85rem}
#sub-detail .modal-head h2{color:var(--brand-ink)}
#sub-detail-req{margin:.2rem 0 0;font-weight:600;color:var(--ink-soft)}
#sub-detail .modal-body{padding-top:.9rem}
.subnote{margin:.9rem 0 0;padding:.55rem .7rem;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink-soft)}

/* ------------------------------------- the requirement this form was opened for
 *
 * Arriving from Apply jobs the dropdown below is already set, but the search
 * box above it is empty -- and an empty box under a required label reads as
 * "nothing was picked up". So the requirement is stated instead, with where the
 * submission will go, and the picker is put away until somebody wants it.
 */
.chosenreq{border:1px solid #c6d6f7;border-left:4px solid var(--brand);
  border-radius:var(--radius-sm);background:var(--brand-wash);padding:.6rem .75rem}
.chosenreq.is-changing{opacity:.55}
.chosenreq-h{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.chosenreq-tag{flex:none;font-size:.62rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:#fff;background:var(--brand);
  padding:.16rem .45rem;border-radius:999px}
.chosenreq-h strong{flex:1 1 12rem;min-width:0;font-size:.95rem;color:var(--ink);line-height:1.3}
.chosenreq-h .btn{flex:none}
.chosenreq-to{margin-top:.35rem;font-size:.8rem;color:var(--ink-soft)}
.chosenreq-to strong{color:var(--brand-ink)}
.chosenreq-to .is-none{color:var(--warn);font-weight:600}
#pos-picker[hidden]{display:none}


/* --------------------------------------- the email behind a submission row
 *
 * A rate is agreed in a reply, and reading it meant opening the submission and
 * then the thread. One click, in a new tab, because the reader is working down
 * a list and wants the answer beside the row rather than instead of it.
 */
.mailtag{display:inline-flex;align-items:center;gap:.25rem;margin-top:.3rem;
  font-size:.7rem;font-weight:650;letter-spacing:.01em;text-decoration:none;
  padding:.16rem .4rem;border-radius:5px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink-soft)}
.mailtag svg{width:.72rem;height:.72rem}
.mailtag:hover{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-wash)}
.mailtag:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
/* The vendor has answered. That is the one worth opening. */
.mailtag.is-reply{border-color:#bfe6d2;background:var(--ok-wash);color:var(--ok)}
.mailtag.is-reply:hover{border-color:var(--ok);background:#d7f0e2;color:var(--ok)}
/* The send bounced. The row says "Sent to vendor" and the mail never arrived,
   which is the one thing on this screen worth interrupting for. */
.mailtag.is-bounce{border-color:#f5c6c6;background:var(--danger-wash);color:var(--danger)}
.mailtag.is-bounce:hover{border-color:var(--danger);background:#fbdcdc;color:var(--danger)}

/* ------------------------------------------------- where the work came from
 *
 * Above the title groups on Apply jobs, because it is the outer question: the
 * inbox and Dice's board are two different desks. A board with nothing on it
 * still gets a tab -- "found nothing today" and "has stopped answering us" look
 * identical otherwise, and only one of those is fine.
 */
.srcstrip{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center;margin:0 0 .7rem}
.srctab{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;
  padding:.4rem .7rem;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-soft);font-size:.82rem;font-weight:600;
  transition:background .12s var(--ease-out),border-color .12s var(--ease-out)}
.srctab:hover{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-wash)}
.srctab.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.srctab-n{font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums;
  padding:.05rem .35rem;border-radius:999px;background:var(--surface-2);color:var(--ink-soft)}
.srctab.is-on .srctab-n{background:rgba(255,255,255,.22);color:#fff}
/* The board stopped answering. Not the same as a quiet day. */
.srctab.is-ill{border-color:#f0d9a4;background:var(--gold-wash);color:var(--gold-ink)}
.srctab-warn{display:inline-grid;place-items:center;width:1rem;height:1rem;border-radius:50%;
  background:var(--warn);color:#fff;font-size:.68rem;font-weight:800;line-height:1}

/* ------------------------------- the resume a recruiter markets someone with
 *
 * One consultant worked by three recruiters is three different pitches. The
 * column says which document goes out, and setting it changes nobody else's.
 */
.altcv{min-width:15rem}
.altcv-name{font-size:.8rem;font-weight:600;color:var(--brand-ink);text-decoration:none;
  display:inline-block;max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  vertical-align:middle}
.altcv-name:hover{text-decoration:underline}
.altcv-tag{display:inline-block;margin-left:.35rem;font-size:.62rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--ok);
  padding:.1rem .35rem;border-radius:999px;vertical-align:middle}
.altcv form{display:inline-block;margin:.25rem .3rem 0 0}
.altcv-add input[type=file]{max-width:11rem;font-size:.72rem;display:inline-block;width:auto}

/* The rate on a thread nobody linked: pick the submission, then confirm. */
.mail-menu-item.is-pick{cursor:default;align-items:flex-start}
.mail-menu-rate.is-wide .ratefind-q{flex:1;min-width:0;width:auto;font-size:.78rem}

/* Typing to find the submission, with this thread's own ones ready to click. */
.mail-menu:has(.ratefind){min-width:24rem}
.ratefind{display:block}
.ratefind-hits{display:flex;flex-direction:column;gap:1px;padding:0 .3rem .3rem 2.6rem;
  max-height:13rem;overflow-y:auto}
.ratefind-hit{display:flex;flex-direction:column;gap:.1rem;width:100%;text-align:left;
  padding:.35rem .5rem;border:0;border-radius:7px;background:transparent;cursor:pointer;
  font:inherit;color:var(--ink-soft)}
.ratefind-hit:hover,.ratefind-hit:focus-visible{background:var(--brand-wash)}
.ratefind-hit strong{font-size:.78rem;font-weight:560;color:var(--ink);line-height:1.35}
.ratefind-hit em{font-style:normal;font-size:.7rem;color:var(--muted)}
.ratefind-hit.is-done strong{opacity:.65}
.ratefind-already{color:var(--warn-ink,#9a6b00)}
.ratefind.is-chosen .ratefind-q{border-color:var(--brand);background:var(--brand-wash)}
.ratefind-hit.is-pos strong{color:var(--navy,#253559)}
.ratefind-kind{color:var(--muted-2)}
.ratefind-step{border-top:1px solid var(--line-2);margin-top:.35rem;padding-top:.35rem}
.ratefind-step select{flex:1;min-width:0;font-size:.78rem;padding:.25rem .45rem;
  border:1px solid var(--line-2);border-radius:6px;background:var(--surface);color:var(--ink)}
.ratefind-note{margin:0;padding:0 .85rem .5rem 2.6rem;font-size:.72rem;color:var(--muted)}
.mail-menu-item.is-go{justify-content:center;font-weight:650;color:var(--brand-ink);
  border-top:1px solid var(--line-2);width:100%}
.mail-menu-item.is-go:hover{background:var(--brand-wash)}

/* ---------------------------------------------- where a requirement came from
 *
 * One colour per source, used in both places it appears: the tab that filters
 * to a board, and the tag on every row that came from it. The strip teaches
 * the list -- having read "Dice" in red once at the top, a recruiter reads the
 * red pill halfway down without looking at the word.
 *
 * The hue follows the board's own where that helps recall (Dice red, Monster
 * purple, Indeed blue, foundit pink) and is simply distinct where it does not.
 * Internal takes the deep slate, as it does on the dashboard: it is the slice
 * carrying almost everything, and a pale fill made the bulk of the list look
 * washed out.
 */
.is-src-email        {--src:var(--pas-slate);  --src-ink:var(--pas-slate-ink)}
.is-src-dice         {--src:var(--pas-red);    --src-ink:var(--pas-red-ink)}
.is-src-techfetch    {--src:var(--pas-teal);   --src-ink:var(--pas-teal-ink)}
.is-src-monster      {--src:var(--pas-purple); --src-ink:var(--pas-purple-ink)}
.is-src-foundit      {--src:var(--pas-pink);   --src-ink:var(--pas-pink-ink)}
.is-src-ziprecruiter {--src:var(--pas-lime);   --src-ink:var(--pas-lime-ink)}
.is-src-indeed       {--src:var(--pas-blue);   --src-ink:var(--pas-blue-ink)}
.is-src-glassdoor    {--src:var(--pas-green);  --src-ink:var(--pas-green-ink)}
.is-src-linkedin     {--src:var(--pas-indigo); --src-ink:var(--pas-indigo-ink)}
.is-src-careerbuilder{--src:var(--pas-amber);  --src-ink:var(--pas-amber-ink)}

.jobtag.is-src{
  background:var(--src,var(--pas-slate));color:var(--src-ink,var(--pas-slate-ink));
  border-color:transparent;font-weight:650;
}

/* The same colour on the tab, carried by the outline until it is chosen and by
   the fill once it is. */
.srctab.is-src{border-color:var(--src);color:var(--src-ink)}
.srctab.is-src:hover{background:var(--src);border-color:var(--src);color:var(--src-ink)}
.srctab.is-src.is-on{background:var(--src);border-color:var(--src);color:var(--src-ink)}
.srctab.is-src.is-on .srctab-n{background:rgba(255,255,255,.4);color:var(--src-ink)}
/* Except when the board has stopped answering. That is not a quiet day, and it
   has to outrank the brand colour rather than hide behind it. */
.srctab.is-src.is-ill{border-color:#f0d9a4;background:var(--gold-wash);color:var(--gold-ink)}

/* A requirement body on the position screen, given the same room the job card
   gives it: the poster's own headings and bullets, at a width that stays
   readable rather than running the full panel. */
.jdbody{color:var(--ink-soft);max-width:82ch}
.jdbody > *:first-child{margin-top:0}
.jdbody > *:last-child{margin-bottom:0}
.jdbody p{margin:0 0 .55rem}
.jdbody ul,.jdbody ol{margin:.3rem 0 .65rem;padding-left:1.15rem}
.jdbody li{margin:.14rem 0}
.jdbody li::marker{color:var(--gold)}
.jdbody b,.jdbody strong{color:var(--ink)}
.jdbody h4{margin:.7rem 0 .3rem;font-size:.75rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--brand)}
.jdbody table{border-collapse:collapse;max-width:100%}
.jdbody td,.jdbody th{border:1px solid var(--line);padding:.25rem .45rem}

/* Paging on the positions list. It renders a page now rather than every
   requirement, so there has to be a way to the next one. */
.pager{display:flex;align-items:center;justify-content:center;gap:.9rem;
  margin:1rem 0 .25rem;flex-wrap:wrap}
.pager .btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.pager-at{font-size:.82rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* The requirement's text arrives when its card is opened. */
.jobcard-body.is-lazy{min-height:2.2rem;display:flex;align-items:center}
.jobcard-loading{font-size:.78rem;color:var(--muted)}

/* ------------------------------- the requirement behind a tagged email
 *
 * The tag names the consultant; the hover says which requirement, and hands
 * over the number rather than making somebody read it off the screen and
 * retype it. Shown on focus as well as hover, so it is reachable by keyboard.
 */
.mail-tag.has-pop{position:relative}
.mailpop{
  display:none;position:absolute;bottom:calc(100% + 6px);left:0;z-index:40;
  min-width:13rem;max-width:20rem;padding:.5rem .6rem;
  background:var(--surface);border:1px solid var(--line);border-radius:9px;
  box-shadow:var(--shadow-pop);color:var(--ink-soft);font-weight:500;
  text-align:left;white-space:normal;cursor:default;
}
.mail-tag.has-pop:hover .mailpop,
.mail-tag.has-pop:focus-within .mailpop{display:block}
.mailpop-title{display:block;font-size:.78rem;font-weight:620;color:var(--ink);line-height:1.35}
.mailpop-row{display:flex;align-items:center;gap:.4rem;margin-top:.35rem}
.mailpop-id{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.74rem;
  padding:.1rem .3rem;border-radius:4px;background:var(--surface-2);color:var(--ink);
}
.mailpop-copy{
  font-size:.7rem;font-weight:650;padding:.12rem .4rem;border-radius:5px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--brand-ink);cursor:pointer;
}
.mailpop-copy:hover{background:var(--brand-wash);border-color:var(--brand)}
.mailpop-copy.is-done{background:var(--ok-wash);border-color:#bfe3d1;color:var(--ok)}
.mailpop-hint{display:block;margin-top:.3rem;font-size:.68rem;color:var(--muted)}

/* ------------------------------------------- the three dots on a bench row
 *
 * Archiving used to be a button called Remove sitting next to Edit: one slip
 * from an ordinary edit, and named like something irreversible. Behind a menu
 * it is chosen rather than brushed past, and there is room to say that nothing
 * is deleted.
 */
.rowmenu{position:relative;display:inline-block}
.rowmenu > summary{
  list-style:none;cursor:pointer;display:inline-grid;place-items:center;
  width:1.9rem;height:1.9rem;border-radius:7px;border:1px solid var(--line);
  background:var(--surface);color:var(--muted);
}
.rowmenu > summary::-webkit-details-marker{display:none}
.rowmenu > summary svg{width:15px;height:15px}
.rowmenu > summary:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-wash)}
.rowmenu[open] > summary{border-color:var(--brand);color:var(--brand);background:var(--brand-wash)}
.rowmenu-pop{
  position:absolute;top:calc(100% + 6px);right:0;z-index:30;min-width:16rem;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;
  box-shadow:var(--shadow-pop);padding:.3rem;display:flex;flex-direction:column;gap:1px;
  text-align:left;
}
.rowmenu-pop form{display:contents}
.rowmenu-item{
  display:flex;align-items:flex-start;gap:.5rem;width:100%;text-align:left;
  padding:.5rem .6rem;border:0;border-radius:8px;background:transparent;cursor:pointer;
  font:inherit;color:var(--ink-soft);text-decoration:none;
}
.rowmenu-item span{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.rowmenu-item strong{font-size:.83rem;font-weight:580;color:var(--ink);letter-spacing:-.005em}
.rowmenu-item em{font-style:normal;font-size:.735rem;color:var(--muted);line-height:1.4}
.rowmenu-item:hover{background:var(--brand-wash)}
.rowmenu-item:hover strong{color:var(--brand)}
/* Archiving is reversible, so it is not painted as a danger -- but it is the
   one item here that changes what the desk sees, so it is not silent either. */
.rowmenu-item.is-warn:hover{background:var(--gold-wash)}
.rowmenu-item.is-warn:hover strong{color:var(--gold-ink)}

/* --------------------------------------------- where the work happens
 *
 * Remote is the one recruiters hunt for, so it is the one that carries colour;
 * hybrid and onsite are stated plainly rather than shouted, because the point
 * of showing them is that a missing Remote tag means onsite, not "unknown".
 * A requirement that never said gets no tag at all.
 */
.jobtag.is-mode{border:1px solid transparent;font-weight:650}
.jobtag.is-mode.is-remote{background:var(--pas-green);color:var(--pas-green-ink)}
.jobtag.is-mode.is-hybrid{background:var(--pas-amber);color:var(--pas-amber-ink)}
.jobtag.is-mode.is-onsite{background:var(--surface-2);color:var(--muted);border-color:var(--line)}

/* The number a recruiter markets a consultant on, beside the resume they use. */
.altph{display:flex;align-items:center;gap:.35rem;margin-top:.4rem}
.altph input[type=tel]{flex:1;min-width:0;max-width:11rem;font-size:.78rem;
  padding:.25rem .45rem;border:1px solid var(--line-2);border-radius:6px}
.altph-note{display:block;margin-top:.2rem;font-size:.68rem;color:var(--muted)}
/* The address is longer than a phone number and unreadable truncated, so it
   gets the room the number does not need. */
.altem input[type=email]{flex:1;min-width:0;max-width:14rem;font-size:.78rem;
  padding:.25rem .45rem;border:1px solid var(--line-2);border-radius:6px}

/* --- Consultant portal access ------------------------------------------- */
/* The summary strip above the table: the four numbers that decide whether
   anybody needs to do anything today. */
.portalsum{display:flex;flex-wrap:wrap;gap:1.1rem;margin:.2rem 0 .9rem;font-size:.88rem;color:var(--muted,#6b7280)}
.portalsum strong{color:var(--ink,#1f2937);font-variant-numeric:tabular-nums}
.portalsum .is-warn strong{color:var(--danger)}

.portalstate{display:inline-block;padding:.14rem .5rem;border-radius:99px;font-size:.76rem;font-weight:600}
.portalstate.is-good{background:rgba(15,157,88,.12);color:#0b7a44}
.portalstate.is-bad{background:rgba(217,48,37,.1);color:#b3261e}
.portalstate.is-none{background:rgba(37,53,89,.08);color:var(--brand,#253559)}

/* Three controls per row, so they sit on one line and wrap together rather
   than each form claiming its own. */
.portalacts{display:flex;gap:.3rem;justify-content:flex-end;align-items:flex-start;flex-wrap:wrap}
.portalinline{display:inline}

.portalset{position:relative;display:inline-block}
.portalset > summary{list-style:none;cursor:pointer}
.portalset > summary::-webkit-details-marker{display:none}
.portalsetform{
  position:absolute;right:0;top:calc(100% + .35rem);z-index:30;width:19rem;
  display:flex;flex-direction:column;gap:.35rem;text-align:left;
  background:var(--card,#fff);border:1px solid var(--line,rgba(37,53,89,.14));
  border-radius:10px;padding:.8rem .85rem;box-shadow:0 10px 28px rgba(37,53,89,.16)}
.portalsetform label{font-size:.78rem;font-weight:600}
.portalsetform input[type="text"]{padding:.45rem .6rem;border:1px solid var(--line,rgba(37,53,89,.14));border-radius:7px;font-family:Consolas,monospace}
.portalsetform .filtertick{font-weight:400;font-size:.8rem}
.portalsetform .btn{margin-top:.2rem}

.portaltbl td{vertical-align:top}
.portalnote{margin:.7rem .2rem 0;max-width:46rem}

/* The resume field in the rate-confirm menu. A file input is taller than the
   number beside it, so the row gets its own spacing rather than the label
   fighting the control. */
.mail-menu-rate.is-file{flex-wrap:wrap;align-items:flex-start;gap:.3rem .5rem;padding-top:.15rem}
.mail-menu-rate.is-file input[type=file]{
  flex:1 1 12rem;min-width:0;font-size:.78rem;padding:.3rem 0;
  color:var(--ink-soft);background:none;border:0}
.mail-menu-rate.is-file input[type=file]::file-selector-button{
  font:inherit;font-size:.76rem;font-weight:600;cursor:pointer;margin-right:.5rem;
  padding:.25rem .6rem;border-radius:6px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink)}
.mail-menu-rate.is-file input[type=file]::file-selector-button:hover{border-color:var(--brand);color:var(--brand)}
.mail-menu-rate.is-file em{flex-basis:100%;font-size:.72rem;color:var(--muted)}

/* ------------------------------------------------------------- auto apply */
/* One panel, three states. The setup and the list are a form; the tracker is a
   log, and reads as one -- a dot per requirement, a state on the right, and the
   reason under the title where a failure needs explaining. */
.aa{max-width:780px;width:94vw}
/* The footer must survive a long list.
 *
 * .modal is a flex column with a height cap, and a flex child's default
 * min-height is auto -- so a body full of qualifying jobs pushed the foot to
 * zero height and "Select & proceed" was present, unhidden and unclickable,
 * which reads as the button being broken. Scoped here rather than fixed on
 * .modal-foot globally: every other dialog in the app is short enough never to
 * have hit this, and their layout is not worth disturbing to fix one that did.
 */
.aa .modal-body{min-height:0}
.aa .modal-foot{flex:none}
.aa-for{font-weight:500;color:var(--muted)}

/* Where the applications go: two cards, one chosen. Given more weight than the
   filters below it because it changes what the rest of the panel means. */
.aa-src{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.9rem}
.aa-src-opt{display:flex;align-items:flex-start;gap:.5rem;margin:0;padding:.6rem .7rem;
  border:1px solid var(--line);border-radius:10px;cursor:pointer;
  transition:border-color 160ms ease,background 160ms ease}
.aa-src-opt:hover{background:var(--surface-2)}
.aa-src-opt input{width:15px;height:15px;min-width:15px;flex:none;margin:.15rem 0 0;
  padding:0;accent-color:var(--brand)}
.aa-src-opt span{display:flex;flex-direction:column;line-height:1.3}
.aa-src-opt strong{font-size:.88rem;font-weight:650}
.aa-src-opt em{font-style:normal;font-size:.74rem;color:var(--muted)}
.aa-src-opt:has(input:checked){border-color:var(--brand);background:var(--brand-wash)}
@media (max-width:560px){.aa-src{grid-template-columns:1fr}}

.aa-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:.7rem .8rem;margin-bottom:.9rem}
.aa-filters label{display:flex;flex-direction:column;gap:.25rem}
.aa-filters label>span{font-size:.78rem;font-weight:600;color:var(--muted)}
.aa-filters select{width:100%}

.aa-warn{color:#b06000;background:#fef7e0;border-radius:8px;padding:.6rem .75rem;
  margin:0 0 .7rem}
.aa-rule{color:var(--muted);background:var(--brand-wash);border-radius:8px;
  padding:.6rem .75rem;margin:0}

.aa-last{display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem;
  font-size:.82rem;color:var(--muted);background:var(--surface-2);
  border-radius:8px;padding:.45rem .65rem}
.aa-last[hidden]{display:none}
.linkish{background:none;border:0;padding:0;font:inherit;font-weight:600;
  color:var(--brand);cursor:pointer;text-decoration:underline}
.linkish:hover{color:var(--brand-ink)}

.aa-listhead{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:.5rem;border-bottom:1px solid var(--line);margin-bottom:.35rem}
.aa-all{display:flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:600}
.aa-count{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* The list can be long; the panel must not run off the screen. */
.aa-jobs{max-height:min(46vh,420px);overflow-y:auto;display:flex;
  flex-direction:column;gap:.15rem}
.aa-job{display:flex;align-items:center;gap:.6rem;padding:.5rem .55rem;
  border-radius:8px;cursor:pointer}
.aa-job:hover{background:var(--brand-wash)}
.aa-jobs.is-run .aa-job{cursor:default}
.aa-jobs.is-run .aa-job:hover{background:none}

/* The tick, at tick size.
 *
 * input,select,textarea sets width:100% for the app's form fields, and a bare
 * checkbox inherits it -- so each row's box was 646px wide with padding, eating
 * the whole row and leaving the title and vendor squeezed to zero width. The
 * text was in the DOM the whole time; there was simply nowhere to draw it. The
 * same three lines appear on .matchrow and #rebuild-status for the same reason.
 */
.aa-job input[type=checkbox],
.aa-all input[type=checkbox]{width:15px;height:15px;min-width:15px;flex:none;
  padding:0;margin:0;accent-color:var(--brand)}

.aa-score{flex:none;min-width:3.1rem;text-align:center;font-weight:700;
  font-size:.92rem;border-radius:6px;padding:.16rem .3rem;
  font-variant-numeric:tabular-nums}
.aa-score i{font-style:normal;font-size:.7em;opacity:.75}
.aa-score.is-strong{background:#e6f4ea;color:#137333}
.aa-score.is-fair  {background:#fef7e0;color:#b06000}
.aa-score.is-ok    {background:#e8f0fe;color:#1967d2}

.aa-meta{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.25}
.aa-ttl{display:flex;align-items:center;gap:.5rem;min-width:0}
.aa-ttl strong{min-width:0}
/* The years the requirement asks for, beside the title. */
.aa-exp{flex:none;font-style:normal;font-size:.72rem;font-weight:600;color:#1967d2;background:#e8f0fe;
        border-radius:999px;padding:.05rem .5rem;white-space:nowrap}
.aa-job.is-off .aa-exp,.aa-job.is-blocked .aa-exp{color:var(--muted);background:#eef0f4}
.aa-meta strong{font-weight:600;font-size:.9rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.aa-sub{font-size:.76rem;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* The tracker: state carried by colour and by word, never colour alone. */
.aa-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--line)}
.aa-job.is-working .aa-dot{background:#1967d2;animation:aa-pulse 1.1s ease-in-out infinite}
.aa-job.is-sent    .aa-dot{background:#137333}
.aa-job.is-failed  .aa-dot{background:#c5221f}
.aa-job.is-skipped .aa-dot{background:#b06000}
@keyframes aa-pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.aa-job.is-working .aa-dot{animation:none}}

.aa-state{flex:none;font-size:.78rem;font-weight:600;color:var(--muted)}
.aa-job.is-sent   .aa-state{color:#137333}
.aa-job.is-failed .aa-state{color:#c5221f}

.aa-prog{margin-bottom:.8rem}
.aa-prog-bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.aa-prog-bar i{display:block;height:100%;background:#1967d2;border-radius:99px;
  transition:width 240ms cubic-bezier(.23,1,.32,1)}
.aa-prog-txt{margin:.45rem 0 0;font-size:.85rem;font-weight:600;
  font-variant-numeric:tabular-nums}
.aa-leave{color:var(--muted);margin-top:.7rem}

.aa-err{margin-right:auto;color:#c5221f;font-size:.82rem;font-weight:600}
.aa-err[hidden]{display:none}

/* The sign-in, inline on the consultant list. Narrow on purpose: it is a thing
   entered once per person and then left alone, not a column to be read. */
.dicelog{width:1%;white-space:nowrap}
.dicebox>summary{list-style:none;cursor:pointer;display:inline-flex}
.dicebox>summary::-webkit-details-marker{display:none}
.dicebox[open]>summary{margin-bottom:.4rem}
/* Opened, it needs room for two fields -- but only while it is open, so the
   column stays narrow for the thirty-five rows nobody is editing. */
.dicebox[open]{display:block;min-width:200px;white-space:normal}
.dicelog form{display:flex;flex-direction:column;gap:.3rem}
.dicelog input{font-size:.8rem;padding:.35rem .5rem;width:100%;box-sizing:border-box}
.dicelog-act{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.dicelog .bl-state{font-size:.7rem;padding:.12rem .5rem}
.dicelog-why{margin:.3rem 0 0;font-size:.72rem;color:#c5221f}

/* ------------------------------------------------- job board sign-in */
.bl-form{display:grid;grid-template-columns:1fr 1fr auto;gap:.6rem;align-items:end;
  margin-bottom:.6rem}
.bl-form label{display:flex;flex-direction:column;gap:.25rem;margin:0}
.bl-form label>span{font-size:.76rem;font-weight:600;color:var(--muted)}
.bl-act{display:flex;gap:.4rem}
.bl-state{font-size:.76rem;font-weight:600;border-radius:99px;padding:.15rem .6rem}
.bl-state.is-ok{background:#e6f4ea;color:#137333}
.bl-state.is-failed{background:#fce8e6;color:#c5221f}
.bl-state.is-untested{background:#fef7e0;color:#b06000}
.bl-state.is-none{background:var(--surface-2);color:var(--muted)}
@media (max-width:760px){.bl-form{grid-template-columns:1fr}}

/* Where a submission came from. Quiet by default -- it is a fact to scan past,
   not a badge -- with Dice given its own colour because that is the one whose
   absence of a "sent" time needs explaining. */
.srcchip{display:inline-block;font-size:.72rem;font-weight:700;border-radius:99px;
  padding:.1rem .5rem;white-space:nowrap;text-decoration:none}
.srcchip.is-internal{background:var(--surface-2);color:var(--muted)}
.srcchip.is-dice{background:#e8f0fe;color:#1967d2}
.srcchip.is-board{background:#f3e8fd;color:#7c3aed}
a.srcchip:hover{text-decoration:underline}

/* ------------------------------------------------------------- AI spend */
/* The ranking is the finding, so cost leads and a bar carries the comparison
   the eye would otherwise have to do down a column of numbers. */
.aiu-top{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem}
.aiu-fig{flex:1;min-width:140px;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:.7rem .85rem;display:flex;flex-direction:column;gap:.15rem}
.aiu-fig.is-warn{border-color:#f6c7c4;background:#fdf3f2}
.aiu-fig-v{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1}
.aiu-fig-l{font-size:.74rem;color:var(--muted)}

table.aiu{width:100%}
table.aiu th{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);text-align:left;padding:.5rem .6rem}
table.aiu td{padding:.5rem .6rem;border-top:1px solid var(--line)}
table.aiu .num{text-align:right;font-variant-numeric:tabular-nums}
.aiu-src{font-size:.76rem;color:var(--muted)}
.aiu-fail{display:inline-block;margin-left:.4rem;font-size:.7rem;font-weight:700;
  color:#c5221f;background:#fce8e6;border-radius:99px;padding:.1rem .45rem}
.aiu-bar-h,.aiu-bar-c{width:22%}
.aiu-bar{display:block;height:7px;border-radius:99px;background:var(--line);overflow:hidden}
.aiu-bar i{display:block;height:100%;background:#1967d2;border-radius:99px}
.aiu-h2{margin:1.4rem 0 .5rem;font-size:1rem}

/* ------------------------------------------------------- auto apply history */
/* A record, so it reads as a list of events rather than a dashboard: one line
   per run, opening to the requirements underneath. */
.aarun-list{padding:.35rem .5rem}
.aarun{border-bottom:1px solid var(--line)}
.aarun:last-child{border-bottom:0}
.aarun>summary{display:flex;align-items:center;gap:.65rem;padding:.7rem .6rem;
  cursor:pointer;list-style:none}
.aarun>summary::-webkit-details-marker{display:none}
.aarun>summary:hover{background:var(--surface-2)}
.aarun-dot{width:8px;height:8px;border-radius:50%;background:var(--line-2);flex:none}
.aarun-dot.is-live{background:#1967d2;animation:aa-pulse 1.1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.aarun-dot.is-live{animation:none}}
.aarun-who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.aarun-sub{font-size:.76rem;color:var(--muted)}
.aarun-tally{display:flex;gap:.35rem;flex:none}

.aatag{border-radius:99px;padding:.15rem .55rem;font-size:.74rem;font-weight:700;
  font-variant-numeric:tabular-nums}
.aatag.is-sent{background:#e6f4ea;color:#137333}
.aatag.is-failed{background:#fce8e6;color:#c5221f}
.aatag.is-live{background:#e8f0fe;color:#1967d2}
.aatag.is-quiet{background:var(--surface-2);color:var(--muted)}

.aarun-jobs{width:100%;margin:0 0 .5rem;font-size:.82rem}
.aarun-jobs td{padding:.4rem .6rem;border-top:1px solid var(--line);vertical-align:top}
.aarun-j-state{width:5.5rem;font-weight:700;color:var(--muted)}
.aarun-jobs tr.is-sent .aarun-j-state{color:#137333}
.aarun-jobs tr.is-failed .aarun-j-state{color:#c5221f}
.aarun-j-role strong{display:block;font-weight:600}
.aarun-why{display:block;margin-top:.15rem;font-size:.76rem;color:#c5221f}
.aarun-j-score{width:3.5rem;text-align:right;font-weight:700;
  font-variant-numeric:tabular-nums}
.aarun-j-score i{font-style:normal;font-size:.72em;opacity:.7}
.aarun-j-link{width:4rem;text-align:right}

/* The run, carried on the board itself.
 *
 * Quieter than the Auto apply button beside it: this reports, it does not ask
 * for anything. The dot pulses only while work is actually outstanding, so a
 * finished run stops drawing the eye. */
.aa-live{display:inline-flex;align-items:center;gap:.4rem;margin-left:.4rem;
  border:1px solid var(--line);background:var(--surface);border-radius:99px;
  padding:.25rem .6rem;font-size:.78rem;font-weight:600;color:var(--muted);
  cursor:pointer;transition:transform 160ms cubic-bezier(.23,1,.32,1),color 160ms ease}
.aa-live:hover{color:var(--ink)}
.aa-live:active{transform:scale(.97)}
.aa-live-dot{width:7px;height:7px;border-radius:50%;background:var(--line-2);flex:none}
.aa-live.is-live{color:#1967d2;border-color:#c6dafc;background:#f4f8ff}
.aa-live.is-live .aa-live-dot{background:#1967d2;animation:aa-pulse 1.1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.aa-live.is-live .aa-live-dot{animation:none}}

/* The button sits in the scope line, so it must not out-shout the sentence. */
.aa-open{display:inline-flex;align-items:center;gap:.3rem;margin-left:.5rem;
  transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.aa-open:active{transform:scale(.97)}

/* ==========================================================================
   hidden means hidden
   ==========================================================================
   The browser's own rule is [hidden]{display:none}, which any class that sets
   display outranks -- so an element given the attribute by JavaScript stays on
   screen if its class happens to set display. This has now been found and
   patched one class at a time fourteen times in this stylesheet: .btn,
   .modal-backdrop, .rangemenu, .jobfilter-row and the rest above are all the
   same bug rediscovered.

   The latest was .mrfields{display:grid}, which left the "Rate agreed" pair
   showing in the status popup whenever an interview was being booked -- the
   recruiter was asked for a rate they had not come to give, on a form that
   would not have saved it.

   !important is the point rather than a shortcut: nothing should outrank an
   element being told it is not on the page. The per-class rules above are now
   redundant and harmless.
   -------------------------------------------------------------------------- */
[hidden]{display:none !important}

/* The recipient checkpoint, where it asks.
   Amber rather than red: nothing is wrong yet, but nothing will be sent until
   it is answered, and it must not read like the ordinary grey notice above it. */
.reqsender-ask{display:grid;gap:.35rem;margin-top:.35rem;padding:.65rem .8rem;
  background:#fff7e6;border:1px solid #f2c46d;border-radius:9px;font-size:.86rem}
.reqsender-ask input{max-width:30rem}
.reqsender-warn{color:#8a5a00}

/* Auto-apply: roles outside the consultant's titles, listed apart and unticked. */
.aa-offhead{margin:.7rem 0 .3rem;padding:.5rem .7rem;border-radius:8px;background:#fff7e6;
  border:1px solid #f2c46d;color:#7a4f00;font-size:.8rem;line-height:1.4}
.aa-job.is-off .aa-meta strong{color:var(--muted)}

/* Auto-apply list: the board's jobs, grouped by where each stands. */
.aa-grouphead{margin:.75rem 0 .3rem;font-size:.72rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.aa-grouphead:first-child{margin-top:.2rem}
.aa-grouphead.is-pick{color:#8a5a00}
.aa-why{display:block;font-size:.74rem;color:#8a5a00;margin-top:.1rem}
.aa-job.is-blocked{opacity:.55;cursor:default}
.aa-job.is-blocked .aa-why{color:var(--muted)}

/* Related titles: ones the model did not suggest this time, kept but dimmed. */
.chip.is-unsuggested{opacity:.5;text-decoration:line-through;text-decoration-color:rgba(0,0,0,.25)}
.chipnote{margin:.4rem 0 0;font-size:.8rem;color:#8a5a00}
.chipnote .linkbtn{background:none;border:0;padding:0;color:var(--brand-ink,#253559);
  text-decoration:underline;cursor:pointer;font:inherit}

/* The tick on a related title: made a job group in your own Apply jobs.
   An empty ring until it is one; a filled green tick once it is. */
.chip{padding-left:.22rem}
.chip-tick{
  display:inline-grid;place-items:center;flex:none;
  width:1.05rem;height:1.05rem;padding:0;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--muted-2);background:var(--surface);color:transparent;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .12s ease-out;
}
.chip-tick svg{width:.72rem;height:.72rem}
.chip-tick:hover{border-color:var(--ok);color:var(--ok)}
.chip-tick:active{transform:scale(.9)}
.chip-tick:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.chip-tick[aria-pressed="true"]{background:var(--ok);border-color:var(--ok);color:var(--surface);cursor:default}
.chip-tick.is-busy{border-color:var(--ok);border-right-color:transparent;animation:chiptick-spin .7s linear infinite;cursor:progress}
.chip-tick.is-fail{border-color:var(--danger,#b91c1c);color:var(--danger,#b91c1c)}
.chip.is-grouped{border-color:var(--ok-wash)}
@keyframes chiptick-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.chip-tick.is-busy{animation:none}}
.chipgroups{margin:-.1rem 0 .45rem;font-size:.78rem}
.chipgroups a{margin-left:.15rem}

/* Call history in the contact dialog, and the latest note on the row. */
.conhist{margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--line-2)}
.conhist-h{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem}
.conhist-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;max-height:240px;overflow:auto}
.conhist-top{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.conhist-meta{font-size:.75rem;color:var(--muted)}
.conhist-note{margin-top:.25rem;font-size:.86rem;line-height:1.4;white-space:pre-wrap;
  padding:.4rem .6rem;background:var(--surface-2,#f6f7fb);border-radius:7px}
.connote{display:block;font-size:.74rem;color:var(--muted);font-style:italic;margin-top:.15rem;
  max-width:22rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* "Vexabit has been updated": the notice update.js shows an open tab after a
   deploy. Bottom corner, out of the way of the page, never over a form. */
.updnote{
  position:fixed;right:1rem;bottom:1rem;z-index:9000;max-width:22rem;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow-pop);padding:.85rem 1rem .8rem;font-size:.84rem;
  animation:updnote-in .22s cubic-bezier(.23,1,.32,1);
}
.updnote strong{display:block;font-size:.9rem;margin-bottom:.3rem}
.updnote ul{margin:.2rem 0 .45rem 1rem;padding:0}
.updnote li{margin:.12rem 0}
.updnote p{margin:.2rem 0 .6rem;color:var(--muted)}
.updnote-row{display:flex;gap:.4rem}
@keyframes updnote-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.updnote{animation:none}}
@media (max-width:520px){.updnote{left:1rem;right:1rem;max-width:none}}

/* ---------------------------------------------------------------------------
   Vendor calls: contacted out of callable, one accordion row per recruiter.
   ------------------------------------------------------------------------ */
.calls-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.calls-ranges{display:flex;flex-wrap:wrap;gap:.25rem}
.calls-range{
  font-size:.72rem;padding:.22rem .6rem;border-radius:999px;text-decoration:none;
  color:var(--ink-soft);background:var(--surface-2,var(--line-2));border:1px solid var(--line);
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.calls-range:hover{border-color:var(--brand);color:var(--brand)}
.calls-range.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.calls-list{display:grid;gap:.3rem}
.callrow{border:1px solid var(--line-2);border-radius:10px;background:var(--surface)}
.callrow[open]{border-color:var(--line)}
.callrow > summary{
  list-style:none;cursor:pointer;display:grid;align-items:center;gap:.75rem;
  grid-template-columns:minmax(0,9rem) minmax(4rem,1fr) 8.5rem 7rem 9.5rem;
  padding:.5rem .75rem;border-radius:10px;
}
.callrow > summary::-webkit-details-marker{display:none}
.callrow > summary:hover{background:var(--surface-2,var(--line-2))}
.callrow > summary:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.callrow-name{font-size:.8rem;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.callrow-name::before{content:'';display:inline-block;width:.4rem;height:.4rem;margin-right:.45rem;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);
  transition:transform .15s ease;vertical-align:.08rem}
.callrow[open] .callrow-name::before{transform:rotate(45deg)}
.callrow-bar{height:8px;border-radius:999px;background:var(--line-2);overflow:hidden}
.callrow-bar > span{display:block;height:100%;border-radius:999px;background:var(--ok)}
.callrow-n{font-size:.78rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.callrow-n strong{color:var(--ink);font-size:.86rem}
.callrow-left{font-size:.76rem;font-weight:600;color:var(--warn-ink);font-variant-numeric:tabular-nums}
.callrow-left.is-done{color:var(--ok)}
.callrow-miss{justify-self:end;font-size:.7rem;font-weight:650;padding:.12rem .5rem;border-radius:999px;
  background:var(--danger-wash);color:var(--danger)}
.callrow-body{padding:.2rem .75rem .75rem 1.6rem;display:grid;gap:.7rem}
.callstates{display:flex;flex-wrap:wrap;gap:.35rem}
.callstate{font-size:.74rem;text-decoration:none;padding:.25rem .6rem;border-radius:8px;
  border:1px solid var(--line);color:var(--ink-soft);background:var(--surface)}
.callstate b{font-variant-numeric:tabular-nums;color:var(--ink)}
.callstate:hover{border-color:var(--brand)}
.callstate.is-connected{background:var(--ok-wash);border-color:transparent}
.callstate.is-connected b{color:var(--ok)}
.callstate.is-voicemail,.callstate.is-dnp{background:var(--warn-wash);border-color:transparent}
.callstate.is-zero{opacity:.55}
.callstate.is-on{outline:2px solid var(--brand);outline-offset:1px}
.callstate.is-remaining{margin-left:auto;color:var(--brand);border-color:var(--brand)}
.callmiss h3{font-size:.76rem;font-weight:650;margin:0 0 .35rem;color:var(--ink)}
.callmiss h3 span{font-weight:450;color:var(--muted);margin-left:.35rem}
.callmiss-none{font-size:.74rem;color:var(--muted);margin:0}
.callmiss-t{width:100%;border-collapse:collapse;font-size:.74rem}
.callmiss-t th{text-align:left;font-weight:600;color:var(--muted);padding:.2rem .5rem .25rem 0;border-bottom:1px solid var(--line-2)}
.callmiss-t td{padding:.28rem .5rem .28rem 0;border-bottom:1px solid var(--line-2);color:var(--ink-soft)}
.callmiss-t tr.is-missed td:first-child{color:var(--danger);font-weight:600}
@media (max-width:760px){
  .callrow > summary{grid-template-columns:minmax(0,1fr) auto;row-gap:.35rem}
  .callrow-bar{grid-column:1 / -1;order:3}
  .callrow-miss{justify-self:start}
  .callstate.is-remaining{margin-left:0}
}

/* ---------------------------------------------------------------------------
   The daily rate check: the 1:30 warning, the 4:30 pause, the managers' view.
   ------------------------------------------------------------------------ */
.rcwarn-back{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:1rem;
  background:rgba(12,17,28,.55);animation:rc-fade .18s ease-out}
.rcwarn{max-width:28rem;width:100%;background:var(--surface);color:var(--ink);border-radius:14px;
  padding:1.4rem 1.5rem 1.3rem;box-shadow:var(--shadow-pop);border-top:4px solid var(--warn);
  animation:rc-rise .22s cubic-bezier(.23,1,.32,1)}
.rcwarn-mark{width:2.4rem;height:2.4rem;border-radius:999px;display:grid;place-items:center;
  background:var(--warn-wash);color:var(--warn);margin-bottom:.7rem}
.rcwarn-mark svg{width:1.3rem;height:1.3rem}
.rcwarn h2{font-size:1.05rem;margin:0 0 .45rem}
.rcwarn p{font-size:.88rem;line-height:1.5;color:var(--ink-soft);margin:0 0 1.1rem}
@keyframes rc-fade{from{opacity:0}to{opacity:1}}
@keyframes rc-rise{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rcwarn-back,.rcwarn{animation:none}}

.rclock-body{min-height:100vh;display:grid;place-items:center;padding:1rem;background:var(--bg);color:var(--ink)}
.rclock{max-width:32rem;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:1.8rem 1.8rem 1.5rem;box-shadow:var(--shadow-md);border-top:5px solid var(--danger)}
.rclock-mark{width:2.8rem;height:2.8rem;border-radius:999px;display:grid;place-items:center;
  background:var(--danger-wash);color:var(--danger);margin-bottom:.9rem}
.rclock-mark svg{width:1.4rem;height:1.4rem}
.rclock h1{font-size:1.35rem;margin:0 0 .5rem;letter-spacing:-.01em}
.rclock p{font-size:.9rem;line-height:1.55;color:var(--ink-soft);margin:0 0 .7rem}
.rclock .rclock-lead{color:var(--ink);font-weight:500}
.rclock-mgrs{list-style:none;margin:.2rem 0 1rem;padding:0;display:grid;gap:.35rem}
.rclock-mgrs li{display:flex;gap:.6rem;align-items:baseline;font-size:.9rem;padding:.5rem .7rem;
  border-radius:9px;background:var(--surface-2,var(--line-2))}
.rclock-mgrs strong{min-width:4.5rem}
.rclock-when{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:0 0 1.1rem;font-size:.8rem}
.rclock-when dt{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em}
.rclock-when dd{margin:.1rem 0 0;font-weight:600;font-variant-numeric:tabular-nums}
.rclock-row{display:flex;gap:.5rem}
.rclock-status{margin:.7rem 0 0;min-height:1.2em}

.rcwait{margin:0 0 1rem;padding:.6rem .85rem;border-radius:10px;font-size:.86rem;
  background:var(--danger-wash);color:var(--ink);border:1px solid transparent;border-left:4px solid var(--danger)}
.rcwait a{margin-left:.3rem;font-weight:600}
.badge-rclock{background:var(--danger-wash);color:var(--danger)}
.rch2{font-size:.95rem;margin:1.4rem 0 .6rem}
.rcack{display:flex;gap:.35rem;justify-content:flex-end;align-items:center}
.rcack input{width:12rem;min-width:0;font-size:.8rem;padding:.3rem .5rem}

/* Search and Reset, together and the same size, at the end of the filter bar. */
.filterbar-go{display:flex;gap:.4rem;align-items:center}
/* The list opened from the Vendor calls card says so. */
.callfilter{margin:-.35rem 0 1rem;padding:.5rem .75rem;border-radius:8px;font-size:.84rem;
  background:var(--brand-wash);color:var(--ink)}
.callfilter a{margin-left:.35rem;font-weight:600}
/* The Contact dialog asking for a vendor's number when none is on file. */
.con-req{margin-right:.35rem;font-size:.7rem;font-weight:650;color:var(--warn-ink);
  background:var(--warn-wash);padding:.05rem .4rem;border-radius:999px}
.con-hint{font-size:.74rem;color:var(--muted);margin-top:.3rem;line-height:1.4}
/* The 11:30 / 2:15 activity warning: the same dialog, a lighter hand. */
.rcwarn-body p{font-size:.88rem;line-height:1.5;color:var(--ink-soft);margin:0 0 .7rem}
.rcwarn-body p:last-child{margin-bottom:1.1rem;font-size:.8rem;color:var(--muted)}
.rcwarn.is-nudge{border-top-color:var(--gold,#f6b129)}
.rcwarn.is-nudge .rcwarn-mark{background:var(--brand-wash);color:var(--brand)}
.rcpace{font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.rcpace .is-low{color:var(--danger);font-weight:650}
/* Rate checks table: the two-part header on one line, the release form narrow enough to stay in view. */
.rctable .rcth-sub{font-size:.66rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);margin-top:.1rem}
.rctable .rcpace{white-space:normal;min-width:13rem}
.rcack input{width:8.5rem}

/* Approving a paused recruiter: two notes first. */
.rcapprove{display:grid;gap:.45rem}
.rcapprove label{font-size:.82rem;font-weight:600;color:var(--ink);margin-top:.35rem}
.rcapprove textarea{width:100%;resize:vertical;font:inherit;font-size:.86rem}
.rcapprove-hint{font-size:.76rem;color:var(--muted);margin:.1rem 0 .2rem}
.rcapprove [data-rc-submit]:disabled{opacity:.45;cursor:not-allowed}
/* The owner's log of what approvers wrote. */
.rcnotes{display:grid}
.rcnote{padding:.85rem 1.1rem;border-bottom:1px solid var(--line-2)}
.rcnote:last-child{border-bottom:0}
.rcnote header{display:flex;flex-wrap:wrap;gap:.35rem;align-items:baseline;font-size:.86rem}
.rcnote-by{margin-left:auto;font-size:.76rem;color:var(--muted)}
.rcnote dl{display:grid;grid-template-columns:11rem 1fr;gap:.35rem .9rem;margin:.55rem 0 0;font-size:.84rem}
.rcnote dt{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;padding-top:.15rem}
.rcnote dd{margin:0;color:var(--ink);line-height:1.5}
@media (max-width:700px){.rcnote dl{grid-template-columns:1fr}.rcnote-by{margin-left:0}}

/* ---------------------------------------------------------------------------
   The daily-check popups, meant to be felt: an alarm header, each missed
   target as its own highlighted panel, what happens next, who was told.
   ------------------------------------------------------------------------ */
.rcwarn{max-width:42rem;padding:0;border-top:0;overflow:hidden;border-radius:16px;
  box-shadow:0 30px 80px -20px rgba(120,20,20,.45),0 0 0 1px rgba(205,43,43,.18)}
.rcwarn-back{background:rgba(40,8,8,.62);backdrop-filter:blur(2px)}
.rcwarn-top{display:flex;gap:1rem;align-items:center;padding:1.25rem 1.5rem;color:#fff;
  background:linear-gradient(135deg,#b3261e,#e0442f)}
.rcwarn-amber .rcwarn-top{background:linear-gradient(135deg,#b3261e 0%,#d9531e 55%,#f08c1a 100%)}
.rcwarn .rcwarn-mark{flex:none;width:3.2rem;height:3.2rem;border-radius:999px;display:grid;place-items:center;
  background:rgba(255,255,255,.18);color:#fff;margin:0;box-shadow:0 0 0 0 rgba(255,255,255,.5);
  animation:rc-alarm 1.8s ease-out infinite}
.rcwarn .rcwarn-mark svg{width:1.75rem;height:1.75rem}
@keyframes rc-alarm{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}70%{box-shadow:0 0 0 14px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.rcwarn-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.9}
.rcwarn-top h2{font-size:1.35rem;line-height:1.25;margin:.15rem 0 .1rem;color:#fff;letter-spacing:-.01em}
.rcwarn-date{font-size:.8rem;opacity:.85}
.rcwarn-main{padding:1.1rem 1.5rem .4rem;display:grid;gap:.9rem}
.rcwarn .rcwarn-lead{margin:0;font-size:.95rem;line-height:1.5;color:var(--ink);font-weight:500}
.rcmiss-list{display:grid;gap:.6rem}
.rcmiss{border-radius:12px;padding:.8rem .95rem .85rem;border:1px solid var(--line)}
.rcmiss.is-miss{background:var(--danger-wash);border-color:rgba(205,43,43,.35);border-left:5px solid var(--danger)}
.rcmiss.is-ok{background:var(--ok-wash);border-color:transparent;border-left:5px solid var(--ok)}
.rcmiss-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.rcmiss-label{font-size:.8rem;font-weight:650;color:var(--ink);text-transform:uppercase;letter-spacing:.04em}
.rcmiss-pill{font-size:.72rem;font-weight:750;padding:.18rem .6rem;border-radius:999px;white-space:nowrap;
  background:var(--danger);color:#fff}
.rcmiss.is-ok .rcmiss-pill{background:var(--ok);color:#fff}
.rcmiss-num{margin:.3rem 0 .45rem;font-size:.9rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.rcmiss-num strong{font-size:1.9rem;line-height:1;color:var(--danger);font-weight:750;letter-spacing:-.02em}
.rcmiss.is-ok .rcmiss-num strong{color:var(--ok)}
.rcmiss-bar{height:9px;border-radius:999px;background:rgba(0,0,0,.08);overflow:hidden}
.rcmiss-bar > span{display:block;height:100%;border-radius:999px;background:var(--danger)}
.rcmiss.is-ok .rcmiss-bar > span{background:var(--ok)}
.rcmiss-hint{margin-top:.5rem;font-size:.84rem;font-weight:600;color:var(--danger)}
.rcnext{border:1px dashed var(--line);border-radius:12px;padding:.7rem .95rem}
.rcnext-h{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.rcnext ol{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.rcnext li{display:grid;grid-template-columns:4.6rem 1fr;gap:.6rem;font-size:.84rem;color:var(--ink-soft)}
.rcnext li b{font-variant-numeric:tabular-nums;color:var(--ink)}
.rcnext li.is-hard span{color:var(--danger);font-weight:600}
.rcreported{display:flex;gap:.7rem;align-items:flex-start;padding:.75rem .95rem;border-radius:12px;
  background:#2a0f10;color:#ffd9d4;font-size:.86rem;line-height:1.45}
.rcreported strong{color:#fff}
.rcreported-i{flex:none;width:1.4rem;height:1.4rem;color:#ff8a7a}
.rcreported-i svg{width:100%;height:100%}
.rcwarn-foot{padding:.9rem 1.5rem 1.3rem;display:flex;justify-content:flex-end}
.rcwarn .rcwarn-btn{background:var(--danger);border-color:var(--danger);font-weight:650;padding:.6rem 1.1rem}
.rcwarn .rcwarn-btn:hover{filter:brightness(1.07)}
@media (prefers-reduced-motion:reduce){.rcwarn .rcwarn-mark{animation:none}}
@media (max-width:560px){.rcwarn-top{padding:1rem}.rcwarn-main{padding:1rem}.rcnext li{grid-template-columns:1fr}}

/* The pause screen, in the same alarm language as the warnings. */
.rclock{max-width:44rem;padding:0;border-top:0;overflow:hidden;border-radius:18px;
  box-shadow:0 30px 80px -20px rgba(120,20,20,.45),0 0 0 1px rgba(205,43,43,.2)}
.rclock-top{display:flex;gap:1rem;align-items:center;padding:1.4rem 1.7rem;color:#fff;
  background:linear-gradient(135deg,#8f1d17,#c62f22 60%,#e0442f)}
.rclock .rclock-mark{flex:none;width:3.4rem;height:3.4rem;margin:0;background:rgba(255,255,255,.16);color:#fff;
  animation:rc-alarm 1.8s ease-out infinite}
.rclock .rclock-mark svg{width:1.8rem;height:1.8rem}
.rclock-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.9}
.rclock-top h1{font-size:1.4rem;line-height:1.25;margin:.15rem 0 .15rem;color:#fff}
.rclock-date{font-size:.82rem;opacity:.85}
.rclock-main{padding:1.2rem 1.7rem 1.4rem;display:grid;gap:.9rem}
.rclock .rclock-lead{margin:0;font-size:1rem;color:var(--ink)}
.rclock .rclock-lead strong{color:var(--danger)}
.rclock-ask{margin:0;font-size:.9rem;color:var(--ink-soft)}
.rclock .rclock-mgrs{margin:0}
.rclock .rclock-when{margin:0}
@media (prefers-reduced-motion:reduce){.rclock .rclock-mark{animation:none}}
@media (max-width:560px){.rclock-top,.rclock-main{padding:1rem}}
/* Tall popups scroll inside the overlay instead of running off the screen;
   the IST time column is wide enough for "12:00 AM IST" on one line. */
.rcwarn-back{display:flex;overflow-y:auto;padding:1.5rem 1rem;align-items:flex-start}
.rcwarn{margin:auto}
.rcmiss{padding:.65rem .9rem .7rem}
.rcmiss-num{margin:.2rem 0 .35rem}
.rcmiss-num strong{font-size:1.6rem}
.rcmiss-hint{margin-top:.4rem}
.rcnext li{grid-template-columns:6.6rem 1fr}
.rcnext li b{white-space:nowrap}
.rcwarn-main{gap:.75rem}

/* Rate checks: "N warnings" per recruiter, and the cards scrolled left to right. */
.rcevbtn{font:inherit;font-size:.78rem;font-weight:650;padding:.28rem .65rem;border-radius:999px;cursor:pointer;
  border:1px solid rgba(217,83,30,.4);background:#fff4e8;color:#a3400f;white-space:nowrap}
.rcevbtn:hover{border-color:#d9531e;background:#ffe9d4}
.rcevbtn.has-pause{border-color:rgba(205,43,43,.45);background:var(--danger-wash);color:var(--danger)}
html[data-theme="dark"] .rcevbtn{background:rgba(240,140,26,.14);color:#ffb37a}
.rcev-box{max-width:min(62rem,96vw);width:100%}
.rcev-body{position:relative;display:flex;align-items:center;gap:.4rem;padding:1rem .6rem .4rem}
.rcev-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:.2rem .2rem 1rem;flex:1;min-width:0;outline:none;overscroll-behavior-x:contain}
.rcev-track:focus-visible{box-shadow:0 0 0 2px var(--brand) inset;border-radius:10px}
.rcev-arrow{flex:none;width:2.4rem;height:2.4rem;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-size:1.1rem;cursor:pointer}
.rcev-arrow:hover{border-color:var(--brand);color:var(--brand)}
.rcev-card{flex:0 0 min(19rem,78%);scroll-snap-align:start;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;
  box-shadow:0 8px 24px -14px rgba(0,0,0,.35)}
.rcev-top{padding:.8rem .95rem;color:#fff;background:linear-gradient(135deg,#b3261e 0%,#d9531e 60%,#f08c1a 100%)}
.rcev-card.is-rate .rcev-top{background:linear-gradient(135deg,#b3261e,#e0442f)}
.rcev-card.is-pause .rcev-top{background:linear-gradient(135deg,#6e140f,#b3261e)}
.rcev-eyebrow{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.92}
.rcev-title{font-size:1.05rem;font-weight:700;margin:.15rem 0 .1rem}
.rcev-ist{font-size:.74rem;opacity:.88}
.rcev-figs{padding:.7rem .95rem;display:grid;gap:.4rem;flex:1}
.rcev-fig{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline;font-size:.8rem;
  padding:.4rem .55rem;border-radius:8px}
.rcev-fig.is-miss{background:var(--danger-wash);border-left:4px solid var(--danger)}
.rcev-fig.is-miss strong{color:var(--danger)}
.rcev-fig.is-ok{background:var(--ok-wash);border-left:4px solid var(--ok)}
.rcev-fig.is-ok strong{color:var(--ok)}
.rcev-fig strong{font-variant-numeric:tabular-nums;white-space:nowrap}
.rcev-status{font-size:.76rem;padding:.55rem .95rem .7rem;border-top:1px solid var(--line-2);color:var(--muted)}
.rcev-status.is-open{color:var(--danger);font-weight:650}
.rcev-foot{padding:0 1.2rem 1rem;font-size:.76rem;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
@media (max-width:640px){.rcev-arrow{display:none}.rcev-card{flex-basis:86%}}

.rcev-figs{align-content:start}

/* Automated calls: on a submission row beside the recruiter's own call, and in
   the Calling log. Dashed, and labelled "Auto call", so it is never mistaken for
   a conversation -- it is not counted as Contacted. */
.autocell{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.3rem}
.autochip{display:inline-flex;align-items:center;gap:.35rem;padding:.08rem .5rem .08rem .12rem;border-radius:999px;
  font-size:.7rem;font-weight:600;line-height:1.55;white-space:nowrap;border:1px dashed currentColor;
  background:var(--line-2);color:var(--muted)}
.autochip:not(:has(.autochip-k)){padding-left:.5rem}
.autochip-k{font-size:.58rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;
  padding:.05rem .38rem;border-radius:999px;background:var(--surface);color:inherit}
.autochip.is-ok{background:var(--ok-wash);color:var(--ok)}
.autochip.is-bad{background:var(--danger-wash);color:var(--danger)}
.autochip.is-warn{background:var(--warn-wash);color:var(--warn-ink)}
.autochip.is-info{background:var(--info-wash);color:var(--info)}

/* Calling page. */
.vc-state{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .8rem;border-radius:999px;font-size:.8rem;
  font-weight:700;background:var(--line-2);color:var(--muted);white-space:nowrap}
.vc-state::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
.vc-state.is-ok{background:var(--ok-wash);color:var(--ok)}
.vc-state.is-info{background:var(--info-wash);color:var(--info)}
.vc-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
@media(max-width:900px){.vc-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.vc-facts{grid-template-columns:1fr}}
.vc-fact{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.8rem 1rem}
.vc-fact-k{font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.vc-fact-v{font-size:1.15rem;font-weight:700;margin:.2rem 0 .1rem;font-variant-numeric:tabular-nums}
.vc-fact-of{font-size:.8rem;font-weight:500;color:var(--muted)}
.vc-fact-s{font-size:.75rem;color:var(--muted)}
.vc-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1rem;align-items:start}
@media(max-width:1000px){.vc-grid{grid-template-columns:1fr}}
.vc-grid > .card{margin:0}
.vc-say-k{font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:.2rem 0 .35rem}
.vc-say{margin:0 0 .8rem;padding:.7rem .85rem;border-radius:var(--radius-sm);background:var(--brand-wash);
  font-size:.86rem;line-height:1.55;max-width:70ch}
.vc-say.is-soft{background:var(--line-2)}
.vc-say mark{background:none;color:var(--brand);font-weight:650}
.vc-people td{vertical-align:middle}
.vc-people input{max-width:22rem}
.vc-people tr.is-missing td:first-child{color:var(--danger)}
.vc-scroll{overflow-x:auto}
.vc-test-tag{display:inline-block;font-size:.6rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;
  padding:.05rem .4rem;border-radius:999px;background:var(--gold-wash);color:var(--gold-ink)}

.vc-say-tag{display:inline-block;margin-left:.4rem;font-size:.62rem;letter-spacing:.04em;padding:.05rem .45rem;
  border-radius:999px;background:var(--brand-wash);color:var(--brand);text-transform:none}
.vc-alt{margin:.2rem 0 .8rem}.vc-alt summary{cursor:pointer;font-size:.8rem;color:var(--brand);margin-bottom:.4rem}
.vc-people select{min-width:11rem}.vc-people select.is-unset{border-color:var(--warn);background:var(--warn-wash)}
.vc-people input[name^="cname"]{max-width:10rem}

.vc-facts{grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr))}
.vc-fact.is-warn{border-color:var(--warn);background:var(--warn-wash)}
.vc-say-them{color:var(--muted);font-style:italic}
.vc-branches{margin:0 0 .6rem;padding-left:1.1rem;font-size:.84rem;line-height:1.55;display:grid;gap:.2rem;max-width:70ch}
.vc-transcript{margin-top:.35rem;font-size:.78rem;max-width:44rem}
.vc-transcript summary{cursor:pointer;color:var(--brand)}
.vc-transcript p{margin:.25rem 0;padding:.3rem .5rem;border-radius:8px;background:var(--line-2)}
.vc-transcript p.is-us{background:var(--brand-wash)}

.vc-voices{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1.2rem}
.vc-voicelist{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.vc-voicelist li{display:grid;grid-template-columns:1fr auto;gap:.35rem .6rem;align-items:center;padding:.55rem .65rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.vc-voicelist li.is-current{border-color:var(--ok);background:var(--ok-wash)}
.vc-voicelist audio{grid-column:1/-1;width:100%;height:32px}
.vc-voice-name{font-weight:600;font-size:.86rem;display:flex;flex-direction:column}
.vc-voicelist form{grid-row:1;grid-column:2}

.vc-keyrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.8rem;align-items:start;border-bottom:1px solid var(--line-2)}
.vc-keyrow > div:last-child{padding-top:1.45rem}
@media(max-width:640px){.vc-keyrow{grid-template-columns:1fr}.vc-keyrow > div:last-child{padding-top:0}}

.vc-score{display:inline-grid;place-items:center;min-width:2.1rem;height:1.5rem;padding:0 .4rem;border-radius:999px;font-weight:700;
  font-size:.78rem;font-variant-numeric:tabular-nums;background:var(--line-2);color:var(--muted)}
.vc-score.is-ok{background:var(--ok-wash);color:var(--ok)}.vc-score.is-warn{background:var(--warn-wash);color:var(--warn-ink)}
.vc-score.is-bad{background:var(--danger-wash);color:var(--danger)}
.vc-lessons{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;max-width:62rem}
.vc-lessons li{display:grid;grid-template-columns:1fr auto;gap:.8rem;align-items:center;padding:.55rem .7rem;
  border:1px solid var(--line);border-radius:var(--radius-sm)}
.vc-lessons li.is-active{border-left:4px solid var(--ok)}
.vc-lessons li.is-retired{opacity:.62}
.vc-inline-num{width:5.2rem;display:inline-block;padding:.2rem .4rem;margin:0 .2rem}

.vc-provider{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.vc-azkey{grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto}
@media(max-width:760px){.vc-azkey{grid-template-columns:1fr}}
details.vc-alt.card-b{margin:0;border-top:1px solid var(--line-2)}

/* Calling page: the notice a background save leaves, at the top of the screen. */
.vc-toast{position:fixed;top:16px;left:50%;z-index:9999;max-width:min(40rem,calc(100vw - 32px));
  transform:translate(-50%,-12px);opacity:0;padding:.75rem 1.1rem;border-radius:var(--radius-sm);font-weight:600;font-size:.88rem;
  background:var(--ok-wash);color:var(--ok);border:1px solid #bfe6d2;box-shadow:var(--shadow-pop);
  transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out)}
.vc-toast.is-in{opacity:1;transform:translate(-50%,0)}
.vc-toast.is-error{background:var(--danger-wash);color:var(--danger);border-color:#f5c6c6}
@media (prefers-reduced-motion:reduce){.vc-toast{transition:none}}

/* ---- the submission picker (inbox_submission_picker): a search box over the grouped select ---- */
.sub-pick{display:flex;flex-wrap:wrap;gap:.35rem;flex:1 1 auto;min-width:0}
.sub-pick-q,.sub-pick-sel{
  flex:1 1 220px;min-width:0;padding:.3rem .45rem;border:1px solid var(--line);border-radius:7px;
  font:inherit;font-size:.775rem;background:var(--surface);color:var(--ink);
}
.sub-pick-sel{flex-basis:100%}
.sub-pick-q:focus,.sub-pick-sel:focus{outline:2px solid var(--brand);outline-offset:1px}
.mail-relink form{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.4rem}
/* the submission's number and the job it went for, on a linked row */
.mail-tag.is-sub{background:var(--brand-wash);color:var(--brand);font-weight:650}
.mail-tag.is-pos{max-width:230px}
.mail-tag-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* ---- Apply jobs: board access (the unblocking API the refused boards are read through) ---- */
.boardaccess{margin:.2rem 0 .7rem;border:1px solid var(--line);border-radius:9px;background:var(--surface)}
.boardaccess summary{display:flex;align-items:center;gap:.5rem;cursor:pointer;list-style:none;padding:.55rem .8rem;font-size:.82rem;font-weight:650;color:var(--ink)}
.boardaccess summary::-webkit-details-marker{display:none}
.boardaccess .ba-state{font-weight:450;color:var(--muted);font-size:.78rem}
.ba-dot{width:9px;height:9px;border-radius:50%;background:var(--warn);flex:none;box-shadow:0 0 0 3px rgba(246,177,41,.18)}
.ba-dot.is-on{background:var(--ok);box-shadow:0 0 0 3px rgba(22,163,74,.16)}
.ba-body{padding:.2rem .8rem .75rem;display:flex;flex-direction:column;gap:.5rem}
.ba-form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-end}
.ba-form label{display:flex;flex-direction:column;gap:.2rem;font-size:.74rem;color:var(--muted-2);font-weight:560}
.ba-form input,.ba-form select{padding:.32rem .5rem;border:1px solid var(--line);border-radius:7px;font:inherit;font-size:.8rem;min-width:220px;background:var(--surface);color:var(--ink)}
.ba-form input[type=password]{min-width:320px}
.ba-note{font-size:.76rem;color:var(--muted);align-self:center}
.ba-help{margin:0;font-size:.75rem;color:var(--muted);max-width:80ch}

/* ---------------------------------------------------------------------------
   Follow-ups: the daily call to every consultant on the bench.
   State reads in form as well as number: a done row goes quiet, a missed
   consultant is a red chip, a person's day is a filled bar.
   ------------------------------------------------------------------------ */
.cfu-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.7rem;margin:0 0 1rem}
.cfu-tile{display:flex;flex-direction:column;gap:.15rem;padding:.75rem .9rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);text-decoration:none}
a.cfu-tile:hover{border-color:var(--brand)}
.cfu-tile.is-warn{background:var(--warn-wash);border-color:#f3d9ae}
.cfu-tile.is-bad{background:var(--danger-wash);border-color:#f5c6c6}
.cfu-tile.is-ok{background:var(--ok-wash);border-color:#bfe5cd}
.cfu-big{font-size:1.6rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.cfu-big small{font-size:.95rem;color:var(--muted);font-weight:600}
.cfu-cap{font-size:.8rem;color:var(--muted)}
.cfu-bar{display:block;height:6px;border-radius:99px;background:var(--line-2);overflow:hidden;margin-top:.3rem}
.cfu-bar i{display:block;height:100%;background:var(--ok);border-radius:99px}

.cfu-owner{margin-bottom:.9rem;padding:.7rem .9rem}
.cfu-owner summary{cursor:pointer;list-style:none}
.cfu-owner summary::-webkit-details-marker{display:none}
.cfu-owner summary::before{content:"\25B8";display:inline-block;margin-right:.4rem;color:var(--muted);transition:transform .15s ease-out}
.cfu-owner[open] summary::before{transform:rotate(90deg)}
.cfu-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.6rem;margin-top:.7rem}
.cfu-person{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border:1px solid var(--line-2);border-radius:9px;background:var(--surface-2)}
.cfu-person form{margin-left:auto}
.cfu-person .cfu-chip{margin-left:auto}
.cfu-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--brand-wash);color:var(--brand);font-size:.75rem;font-weight:700;flex:none}
.cfu-pn{display:flex;flex-direction:column;line-height:1.25;min-width:0}

.cfu-filters{align-items:center}
.cfu-seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface)}
.cfu-seg a{padding:.36rem .7rem;font-size:.82rem;color:var(--ink-soft);text-decoration:none;border-right:1px solid var(--line)}
.cfu-seg a:last-child{border-right:0}
.cfu-seg a span{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:.15rem}
.cfu-seg a.on{background:var(--brand);color:#fff}
.cfu-seg a.on span{color:rgba(255,255,255,.8)}

.cfu-bulk{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;position:sticky;top:.5rem;z-index:5;
  padding:.55rem .8rem;margin-bottom:.7rem;background:var(--ink);color:#fff;border-radius:10px;font-size:.85rem}
.cfu-bulk select{padding:.3rem .45rem;border-radius:7px;border:0;font:inherit}
.cfu-bulk[hidden]{display:none}

.cfu-tbl td{vertical-align:top}
.cfu-tbl .cfu-tick{width:28px}
.cfu-row.is-done td{background:var(--surface-2)}
.cfu-row.is-hit td{background:var(--gold-wash)}
.cfu-facts{margin-top:.15rem}
.cfu-reach{min-width:140px;overflow-wrap:anywhere}
.cfu-call{display:inline-flex;align-items:center;gap:.3rem;font-weight:600;color:var(--brand);text-decoration:none;white-space:nowrap}
.cfu-call svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.cfu-call:hover{text-decoration:underline}
.cfu-ownerform select{padding:.28rem .4rem;border:1px solid var(--line);border-radius:7px;font:inherit;font-size:.8rem;background:var(--surface);max-width:170px}
.cfu-ownerform select.is-empty{border-color:var(--danger);color:var(--danger)}
.cfu-latest{min-width:210px;max-width:360px}
.cfu-chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.25rem}
.cfu-said{color:var(--ink-soft);line-height:1.45;overflow-wrap:anywhere}

.cfu-chip{display:inline-block;padding:.12rem .5rem;border-radius:99px;font-size:.74rem;font-weight:600;white-space:nowrap;text-decoration:none}
.cfu-chip.is-good{background:var(--ok-wash);color:var(--ok)}
.cfu-chip.is-warn{background:var(--warn-wash);color:var(--warn-ink)}
.cfu-chip.is-bad{background:var(--danger-wash);color:var(--danger)}
.cfu-chip.is-info{background:var(--info-wash);color:var(--info)}
.cfu-chip.is-gold{background:var(--gold-wash);color:var(--gold-ink)}
.cfu-chip.is-none{background:var(--line-2);color:var(--muted)}
a.cfu-chip:hover{filter:brightness(.96)}
.cfu-out{font-size:.74rem;font-weight:600;padding-left:.6rem;position:relative}
.cfu-out::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:currentColor}
.cfu-out.is-good{color:var(--ok)}
.cfu-out.is-warn{color:var(--warn)}
.cfu-out.is-bad{color:var(--danger)}

.cfu-logrow td{background:var(--brand-wash);padding:0}
.cfu-log{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.2rem;padding:1rem}
.cfu-form{display:flex;flex-direction:column;gap:.75rem}
.cfu-outcomes{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem}
.cfu-outcomes legend{font-weight:600;font-size:.85rem;margin-bottom:.4rem;padding:0}
.cfu-pick{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .65rem;border:1px solid var(--line);border-radius:99px;
  background:var(--surface);font-size:.8rem;cursor:pointer;transition:border-color .12s ease-out,background-color .12s ease-out}
.cfu-pick input{margin:0;accent-color:var(--brand)}
.cfu-pick.is-good:has(input:checked){background:var(--ok-wash);border-color:var(--ok)}
.cfu-pick.is-warn:has(input:checked){background:var(--warn-wash);border-color:var(--warn)}
.cfu-pick.is-bad:has(input:checked){background:var(--danger-wash);border-color:var(--danger)}
.cfu-pick:focus-within{outline:2px solid var(--brand);outline-offset:1px}
.cfu-fields{display:flex;gap:.8rem;flex-wrap:wrap}
.cfu-fields label,.cfu-comment{display:flex;flex-direction:column;gap:.25rem;font-size:.78rem;font-weight:600;color:var(--ink-soft)}
.cfu-fields select,.cfu-fields input,.cfu-comment textarea{padding:.42rem .55rem;border:1px solid var(--line);border-radius:8px;font:inherit;
  font-size:.85rem;font-weight:400;background:var(--surface);color:var(--ink)}
.cfu-fields select{min-width:240px}
.cfu-comment textarea{resize:vertical;min-height:4.5rem}
.cfu-actions{display:flex;gap:.5rem}
.cfu-hist{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem;max-height:340px;overflow:auto}
.cfu-hist-h{font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.5rem}
.cfu-hist ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem}
.cfu-hist li{font-size:.8rem;padding-bottom:.6rem;border-bottom:1px solid var(--line-2)}
.cfu-hist li:last-child{border-bottom:0;padding-bottom:0}
.cfu-hist-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;color:var(--muted);margin-bottom:.2rem}
.cfu-hist-meta strong{color:var(--ink)}

/* The review */
.cfu-daypick{align-items:center}
.cfu-daypick input[type=date]{padding:.3rem .45rem;border:1px solid var(--line);border-radius:7px;font:inherit}
.cfu-dayname{margin-left:.4rem}
.cfu-h2{font-size:1rem;margin:1.4rem 0 .6rem}
.cfu-grid th.center,.cfu-grid td.center{text-align:center}
.cfu-grid th a{color:inherit;text-decoration:none;font-size:.78rem;line-height:1.2}
.cfu-grid th a span{color:var(--muted);font-weight:500}
.cfu-grid .is-weekend{background:var(--surface-2)}
.cfu-grid .is-sel{box-shadow:inset 0 -2px 0 var(--brand)}
.cfu-cell{display:inline-block;min-width:3.2rem;padding:.18rem .45rem;border-radius:7px;font-weight:700;font-size:.8rem;font-variant-numeric:tabular-nums}
.cfu-cell.is-good{background:var(--ok-wash);color:var(--ok)}
.cfu-cell.is-warn{background:var(--warn-wash);color:var(--warn-ink)}
.cfu-cell.is-bad{background:var(--danger-wash);color:var(--danger)}
.cfu-cell.is-none{background:var(--line-2);color:var(--muted)}
.cfu-plus{display:block;font-size:.7rem;color:var(--muted)}
.cfu-people-day{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.8rem}
.cfu-pday{padding:.8rem .9rem;display:flex;flex-direction:column;gap:.4rem}
.cfu-pday-h{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.cfu-missed{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;margin-top:.2rem}
.cfu-allgood{color:var(--ok);font-weight:600}
.cfu-daylog td{vertical-align:top}
.cfu-daylog .cfu-said{max-width:460px}

/* The app's form defaults (every input full width, every label a block with a
   gap under it) are for the long edit forms; these controls sit in a row. */
.cfu-filters select{width:auto;min-width:170px}
.cfu-filters input[type=search]{width:auto;flex:1 1 230px}
.cfu-tbl input[type=checkbox],.cfu-pick input{width:auto;padding:0;margin:0}
.cfu-pick,.cfu-fields label,.cfu-comment{margin-bottom:0}
.cfu-ownerform select{width:auto;min-width:0;max-width:140px}
.cfu-bulk select,.cfu-daypick input[type=date]{width:auto}
.cfu-fields input[type=date]{width:auto}

@media (max-width: 760px){
  /* The table scrolls sideways on a phone; the form stays where the eye is. */
  .cfu-log{grid-template-columns:1fr;position:sticky;left:0;max-width:calc(100vw - 2.6rem);box-sizing:border-box}
  .cfu-fields select{min-width:0;width:100%}
  .cfu-fields label{flex:1 1 100%}
}
@media (prefers-reduced-motion: reduce){
  .cfu-owner summary::before,.cfu-pick{transition:none}
}

/* ---- Follow-ups: the sheet ------------------------------------------------
   A spreadsheet on purpose: gridlines, frozen header row and name column,
   cells that are colour first and words second. */
.cfu-headacts{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.cfu-inl{display:inline-flex;align-items:center;gap:.4rem;margin:0;font-size:.78rem;color:var(--muted)}
.cfu-dates{display:inline-flex;align-items:center;gap:.35rem}
.cfu-dates[hidden]{display:none}
.cfu-dates input{width:auto;padding:.32rem .45rem;font-size:.8rem;border-radius:7px}
.cfu-tickl{display:inline-flex;align-items:center;gap:.35rem;margin:0;font-size:.8rem;font-weight:500;color:var(--ink-soft)}
.cfu-tickl input{width:auto;margin:0}
.cfu-period{margin-left:auto;font-weight:700;font-size:.85rem;color:var(--ink);font-variant-numeric:tabular-nums}

.cfu-legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center;font-size:.76rem;color:var(--ink-soft);margin:-.2rem 0 .7rem}
.cfu-legend span{display:inline-flex;align-items:center;gap:.35rem}
.cfu-sw{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid var(--line)}

.cfu-sheetwrap{padding:0;overflow:hidden}
.cfu-sheetscroll{overflow:auto;max-height:calc(100vh - 250px);min-height:240px}
.cfu-sheet{border-collapse:separate;border-spacing:0;font-size:.74rem;font-variant-numeric:tabular-nums}
.cfu-sheet th,.cfu-sheet td{border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:0}
.cfu-sheet thead th{position:sticky;top:0;z-index:3;background:var(--surface-2);border-bottom:1px solid var(--line);
  font-weight:600;color:var(--ink-soft)}
.cfu-sheet tfoot td,.cfu-sheet tfoot th{position:sticky;bottom:0;z-index:3;background:var(--surface-2);border-top:1px solid var(--line)}
.cfu-sheet .cfu-s-name{position:sticky;left:0;z-index:2;background:var(--surface);text-align:left;min-width:190px;max-width:220px;
  padding:.4rem .6rem;border-right:1px solid var(--line)}
.cfu-sheet .cfu-s-done{position:sticky;left:190px;z-index:2;background:var(--surface);min-width:58px;text-align:center;
  padding:.3rem .35rem;border-right:2px solid var(--line)}
.cfu-sheet thead .cfu-s-name,.cfu-sheet thead .cfu-s-done,.cfu-sheet tfoot .cfu-s-name,.cfu-sheet tfoot .cfu-s-done{z-index:4;background:var(--surface-2)}
.cfu-sheet thead .cfu-s-name{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
.cfu-sheet tbody .cfu-s-name a{display:block;font-weight:600;font-size:.8rem;color:var(--ink);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfu-sheet tbody .cfu-s-name a:hover{color:var(--brand)}
.cfu-sheet tbody .cfu-s-name small{display:block;font-weight:400;color:var(--muted);font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfu-sheet tbody tr:hover .cfu-s-name,.cfu-sheet tbody tr:hover .cfu-s-done{background:var(--brand-wash)}
.cfu-s-day{min-width:62px;text-align:center;padding:.3rem .2rem !important;line-height:1.05;font-size:.8rem}
.cfu-s-day span{display:block;font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.cfu-s-day small{display:block;font-size:.62rem;color:var(--muted);font-weight:500}
.cfu-s-day.is-today{background:var(--brand-wash) !important;color:var(--brand)}
.cfu-s-now{padding:.3rem .5rem !important;min-width:220px;max-width:280px;text-align:left;background:var(--surface)}
.cfu-s-now .cfu-chip{margin-bottom:.15rem}
.cfu-s-now .cfu-note{display:block;font-size:.74rem;color:var(--ink-soft);line-height:1.3}
.cfu-s-now small{display:block;font-size:.66rem;color:var(--muted);margin-top:.1rem}
.cfu-sheet thead .cfu-s-now{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}

.cfu-c{height:42px;min-width:62px;text-align:center;vertical-align:middle;line-height:1.1;position:relative}
.cfu-c b{display:block;font-weight:700;font-size:.72rem}
.cfu-c i{display:block;font-style:normal;font-size:.62rem;opacity:.85}
.cfu-c em{position:absolute;top:2px;right:3px;font-style:normal;font-size:.58rem;font-weight:700;opacity:.8}
.cfu-c[data-k]{cursor:pointer}
.cfu-c[data-k]:hover,.cfu-c.is-open{box-shadow:inset 0 0 0 2px var(--ink)}
.cfu-c[data-k]:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.cfu-c.is-good,.cfu-sw.is-good{background:#cdeedb;color:#0a5325}
.cfu-c.is-warn,.cfu-sw.is-warn{background:#fde6bd;color:#704904}
.cfu-c.is-bad,.cfu-sw.is-bad{background:#f8d2cf;color:#790a0a}
.cfu-c.is-miss,.cfu-sw.is-miss{background:var(--surface)}
.cfu-c.is-wk,.cfu-sw.is-wk{background:repeating-linear-gradient(135deg,var(--surface-2) 0 4px,var(--line-2) 4px 5px)}
.cfu-c.is-today{box-shadow:inset 2px 0 0 var(--brand),inset -2px 0 0 var(--brand)}
.cfu-done{display:inline-block;padding:.1rem .35rem;border-radius:5px;font-weight:700;font-size:.72rem}
.cfu-done.is-good{background:var(--ok-wash);color:var(--ok)}
.cfu-done.is-warn{background:var(--warn-wash);color:var(--warn-ink)}
.cfu-done.is-bad{background:var(--danger-wash);color:var(--danger)}
.cfu-s-tot{text-align:center;font-weight:700;padding:.35rem .2rem !important;font-size:.76rem}
.cfu-s-tot small{color:var(--muted);font-weight:500}
.cfu-s-tot.is-today{color:var(--brand)}

.cfu-pop{position:fixed;z-index:60;width:min(380px,calc(100vw - 16px));max-height:min(420px,70vh);overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(17,24,39,.18);
  padding:.7rem .85rem;transform-origin:top center;animation:cfu-pop-in .14s cubic-bezier(.23,1,.32,1)}
.cfu-pop[hidden]{display:none}
@keyframes cfu-pop-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.cfu-pop-h{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.45rem;font-size:.85rem}
.cfu-pop-x{border:0;background:none;font-size:1.2rem;line-height:1;cursor:pointer;color:var(--muted);padding:.1rem .3rem;width:auto}
.cfu-pop ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.cfu-pop li{font-size:.8rem;border-top:1px solid var(--line-2);padding-top:.5rem}
.cfu-pop li:first-child{border-top:0;padding-top:0}
.cfu-pop-m{color:var(--muted)}
.cfu-pop-m strong{color:var(--ink)}
.cfu-pop-tags{font-weight:600;color:var(--ink-soft);margin:.1rem 0 .2rem}
.cfu-pop-c{color:var(--ink);line-height:1.45;overflow-wrap:anywhere}
@media (prefers-reduced-motion: reduce){.cfu-pop{animation:none}}
@media (max-width: 760px){
  .cfu-sheet .cfu-s-name{min-width:130px;max-width:140px}
  .cfu-sheet .cfu-s-done{left:130px}
  .cfu-period{margin-left:0}
  .cfu-sheetscroll{max-height:calc(100vh - 200px)}
}

/* ---- Follow-ups made mandatory -------------------------------------------- */
.cfu-people{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.cfu-person form + form,.cfu-person form + .cfu-chip{margin-left:.35rem}
.cfu-req{width:auto;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);border-radius:99px;
  padding:.22rem .6rem;font:inherit;font-size:.72rem;font-weight:600;cursor:pointer;white-space:nowrap}
.cfu-req:hover{border-color:var(--warn)}
.cfu-req.is-on{background:var(--warn-wash);border-color:#f3d9ae;color:var(--warn-ink)}

.cfu-nudge{position:fixed;right:20px;bottom:20px;z-index:200;width:min(380px,calc(100vw - 24px));
  background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--warn);border-radius:14px;
  box-shadow:0 18px 48px rgba(17,24,39,.24);padding:1rem 1.1rem 1.05rem;
  opacity:0;transform:translateY(12px) scale(.98);transition:opacity .2s cubic-bezier(.23,1,.32,1),transform .2s cubic-bezier(.23,1,.32,1)}
.cfu-nudge.in{opacity:1;transform:none}
.cfu-nudge-k{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--warn-ink)}
.cfu-nudge h2{margin:.25rem 0 .35rem;font-size:1.08rem;line-height:1.3;text-wrap:balance}
.cfu-nudge h2 span{font-size:1.5rem;color:var(--danger);font-variant-numeric:tabular-nums}
.cfu-nudge p{margin:0 0 .5rem;font-size:.84rem;color:var(--ink-soft);line-height:1.45}
.cfu-nudge .cfu-bar{margin:.1rem 0 .8rem}
.cfu-nudge-acts{display:flex;gap:.5rem;flex-wrap:wrap}
.cfu-nudge-perm{width:auto;margin-top:.7rem;border:0;background:none;padding:0;font:inherit;font-size:.78rem;
  color:var(--brand);text-decoration:underline;cursor:pointer;text-align:left}
.cfu-nudge-note{margin:.6rem 0 0 !important;font-size:.76rem !important;color:var(--muted) !important}

.cfu-rem{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.cfu-rem li{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.8rem}
.cfu-rem-t{min-width:94px;font-weight:700;font-variant-numeric:tabular-nums}
.cfu-rem-t small{display:block;font-weight:500;color:var(--muted);font-size:.68rem}
@media (prefers-reduced-motion: reduce){.cfu-nudge{transition:none}}

.cfu-default{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.8rem;padding-top:.7rem;border-top:1px solid var(--line-2)}
.cfu-default select{width:auto;min-width:220px;padding:.3rem .45rem;font-size:.82rem;border-radius:7px}

/* Dashboard interviews: the submission id and its email, under the name. */
.ivlinks{display:flex;align-items:center;gap:.5rem;margin-top:.15rem}
.ivlinks .ivsub{font-weight:700;font-variant-numeric:tabular-nums;padding:.02rem .4rem;border-radius:6px;
  background:var(--brand-wash);color:var(--brand);text-decoration:none}
.ivlinks .ivsub:hover{background:var(--brand);color:#fff}

/* Submissions: find one by its number. */
.filterbar .subidsearch{width:120px;min-width:0;font-variant-numeric:tabular-nums}
.subidnote{margin:-.2rem 0 .8rem}

/* Submissions: the number, and (for the owner) where the resume came from. */
.subidlink{display:inline-block;font-weight:700;font-size:.78rem;font-variant-numeric:tabular-nums;padding:.08rem .42rem;
  border-radius:6px;background:var(--brand-wash);color:var(--brand);text-decoration:none}
.subidlink:hover{background:var(--brand);color:#fff}
.rochip{display:inline-block;padding:.12rem .5rem;border-radius:99px;font-size:.72rem;font-weight:700;white-space:nowrap}
.rochip.is-ai{background:#ede4fb;color:#4b1279}
.rochip.is-manual{background:#fde6bd;color:#704904}
.rochip.is-plain{background:var(--line-2);color:var(--ink-soft)}
.rochip.is-none{background:var(--danger-wash);color:var(--danger)}
.rocard{margin-bottom:1rem}
.rocard .card-h .sub{max-width:80ch}
.rotbl{width:100%;border-collapse:collapse;font-size:.84rem;font-variant-numeric:tabular-nums}
.rotbl th,.rotbl td{padding:.5rem .8rem;border-bottom:1px solid var(--line-2);text-align:right}
.rotbl th:first-child,.rotbl td:first-child{text-align:left}
.rotbl thead th{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.rotbl tr.is-total td{font-weight:700;background:var(--surface-2)}
.rotbl tr.is-sel td{background:var(--brand-wash)}
.rotbl a{color:inherit;text-decoration:none}
.rotbl a:hover .rochip{filter:brightness(.95)}
.rotbl .pct{display:inline-block;min-width:3.4rem;font-weight:700}
.rotbl .bar{display:inline-block;width:70px;height:6px;border-radius:99px;background:var(--line-2);vertical-align:middle;margin-left:.4rem;overflow:hidden}
.rotbl .bar i{display:block;height:100%;background:var(--ok)}
.ronote{padding:.6rem .9rem;font-size:.78rem;color:var(--muted);line-height:1.5}

/* Inbox narrowed to one submission's emails (from the dashboard's View email). */
.mail-subscope{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:0 .6rem .5rem;
  padding:.5rem .7rem;border-radius:9px;background:var(--brand-wash);border:1px solid #c9d8f7;font-size:.8rem;color:var(--ink-soft)}
.mail-subscope a{color:var(--brand)}
.mail-subscope span{display:block;color:var(--muted);font-size:.74rem;margin-top:.1rem}
.mail-subscope-x{flex:none;font-weight:600;white-space:nowrap}

/* A "vendor" email that went to one of our own mailboxes. */
.ownboxchip{display:inline-block;margin-top:.2rem;padding:.08rem .45rem;border-radius:99px;font-size:.7rem;font-weight:700;
  background:var(--danger-wash);color:var(--danger);white-space:nowrap}

/* Inbox: create a new submission from an email and link it. */
.mail-newsub{margin-top:.55rem;font-size:.82rem}
.mail-newsub summary{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;color:var(--brand);font-weight:600;list-style:none}
.mail-newsub summary::-webkit-details-marker{display:none}
.mail-newsub summary svg{width:15px;height:15px}
.newsub-form{display:flex;flex-direction:column;gap:.6rem;margin-top:.6rem;padding:.8rem .9rem;border:1px solid var(--line);
  border-radius:10px;background:var(--surface-2);max-width:560px}
.newsub-form label,.newsub-pos{display:flex;flex-direction:column;gap:.25rem;margin:0;font-size:.76rem;font-weight:600;color:var(--ink-soft)}
.newsub-lbl{font-size:.76rem;font-weight:600;color:var(--ink-soft)}
.newsub-form select,.newsub-form input[type=search],.newsub-form input[type=file]{font-size:.84rem;padding:.42rem .55rem}
.newsub-hint{margin:0;font-size:.76rem;color:var(--muted)}
.newsub-warn{margin:0;font-size:.76rem;color:var(--danger)}
.newsub-chosen{padding:.4rem .6rem;border-radius:8px;background:var(--brand-wash);color:var(--brand-ink);font-weight:600;font-size:.82rem}
.newsub-chosen em{font-style:normal;font-weight:500;color:var(--muted)}
.newsub-hits{display:flex;flex-direction:column;max-height:200px;overflow:auto;border-radius:8px}
.newsub-hits:empty{display:none}
.newsub-hit{width:auto;text-align:left;border:0;border-bottom:1px solid var(--line-2);background:var(--surface);padding:.4rem .6rem;
  font:inherit;font-size:.8rem;cursor:pointer;color:var(--ink)}
.newsub-hit:hover,.newsub-hit:focus-visible{background:var(--brand-wash)}
.newsub-none{margin:0;padding:.4rem .6rem;font-size:.78rem;color:var(--muted)}
.newsub-form .btn{align-self:flex-start}

/* Follow-ups: Log call stays in view. On a narrower screen the table scrolls
   sideways and the last column -- the one action on each row -- went past the
   edge (Santosh, 5 Oct). Pinned to the right of the scrolling box instead. */
.cfu-tbl th.cfu-act,.cfu-tbl td.cfu-act{position:sticky;right:0;z-index:1;background:var(--surface);
  box-shadow:-10px 0 10px -10px rgba(17,24,39,.25)}
.cfu-tbl thead th.cfu-act{background:var(--surface-2)}
.cfu-row.is-done td.cfu-act{background:var(--surface-2)}
.cfu-row.is-hit td.cfu-act{background:var(--gold-wash)}
/* Access cards: the name keeps its line; the badges wrap below it if they must. */
.cfu-person{flex-wrap:wrap}
.cfu-pn{flex:1 1 140px}

/* My consultants: the visa a consultant is marketed under. */
.mktvisa select{width:auto;min-width:130px;max-width:170px;padding:.3rem .4rem;font-size:.8rem;border-radius:7px}
.mktvisa select.is-set{border-color:var(--brand);color:var(--brand-ink);font-weight:600;background:var(--brand-wash)}
.mktvisa-note{font-size:.68rem;color:var(--muted);margin-top:.15rem}

/* Calling page: AI calls per recruiter. */
.vc-ai-on{display:inline-flex;align-items:center;gap:.35rem;margin:0;font-weight:500;white-space:nowrap}
.vc-people .vc-ai-on input{width:auto;max-width:none;margin:0}

/* Submissions: AI call button, and the popup of what the calls found out. */
.aicbtn{border-color:var(--brand);color:var(--brand-ink)}
.autochip.is-open{cursor:pointer}
.autochip.is-open:hover{filter:brightness(.96);text-decoration:underline}
.aic-call{border:1px solid var(--line);border-radius:10px;padding:.75rem .9rem;display:flex;flex-direction:column;gap:.35rem}
.aic-call + .aic-call{margin-top:.2rem}
.aic-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-bottom:.15rem}
.aic-when{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.aic-row{display:grid;grid-template-columns:11rem 1fr;gap:.6rem;font-size:.86rem}
.aic-k{color:var(--muted)}
.aic-tr summary{cursor:pointer;color:var(--brand-ink);font-size:.84rem;margin-top:.2rem}
.aic-tr-body{margin-top:.4rem;max-height:320px;overflow:auto;display:flex;flex-direction:column;gap:.35rem;font-size:.84rem}
.aic-tr-body p{margin:0;padding:.35rem .55rem;border-radius:8px;max-width:92%}
.aic-tr-body p.is-ai{background:var(--brand-wash)}
.aic-tr-body p.is-them{background:var(--surface-2, #f1f4f8);align-self:flex-end}
@media (max-width:600px){.aic-row{grid-template-columns:1fr;gap:.05rem}}

/* AI calls: pick several, and the live state while they run. */
.aicsel{display:inline-flex;align-items:center;margin:0 .1rem 0 .35rem;cursor:pointer}
.aicsel input{width:auto;margin:0}
.aicbar{position:fixed;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:.6rem;
  background:var(--ink);color:#fff;padding:.55rem .7rem .55rem 1rem;border-radius:999px;box-shadow:0 10px 30px rgba(15,23,42,.28);font-size:.88rem}
.aicbar[hidden]{display:none}
.aicbar .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.autochip.is-live::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:currentColor;margin-left:.15rem;
  animation:aicpulse 1.2s ease-in-out infinite}
@keyframes aicpulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.autochip.is-live::before{animation:none}}

/* ---- Submissions, Vendor column: tidy, and the AI's follow-up stands out ---- */
.vendcell-firm{font-weight:650;color:var(--ink)}
.concell{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.45rem;flex-wrap:wrap}
.concell-state{display:inline-flex;align-items:center;gap:.35rem;flex-wrap:wrap;min-width:0}
.concell-act{display:inline-flex;align-items:center;gap:.35rem;margin-left:auto}
.conchip.is-ai{background:var(--ai-wash);color:var(--ai)}
.aicsplit{display:inline-flex;align-items:stretch;border:1px solid var(--ai);border-radius:999px;overflow:hidden}
.aicsplit .aicsel{display:inline-flex;align-items:center;padding:0 .3rem 0 .45rem;margin:0;border-right:1px solid color-mix(in srgb,var(--ai) 35%,transparent);cursor:pointer}
.aicsplit .aicsel input{width:auto;margin:0;accent-color:var(--ai)}
.aicbtn{background:none;border:0;color:var(--ai);font:inherit;font-size:.72rem;font-weight:650;padding:.12rem .55rem .12rem .4rem;cursor:pointer}
.aicbtn:hover{background:var(--ai-wash)}
.aicbtn:disabled{opacity:.6;cursor:default}
.autocell{margin-top:.35rem}

.aifu{margin:.5rem 0 .1rem;padding:.55rem .65rem .6rem;border-radius:10px;background:var(--ai-wash);
  border:1px solid color-mix(in srgb,var(--ai) 45%,transparent);display:flex;flex-direction:column;gap:.3rem;max-width:30rem}
.aifu-h{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.aifu-badge{display:inline-flex;align-items:center;gap:.3rem;background:var(--ai);color:#fff;border-radius:999px;
  padding:.08rem .5rem;font-size:.66rem;font-weight:750;letter-spacing:.04em;text-transform:uppercase}
.aifu-badge::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:currentColor;opacity:.85}
:root[data-theme="dark"] .aifu-badge{color:#1a1430}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .aifu-badge{color:#1a1430}}
.aifu-out{font-weight:650;color:var(--ink);font-size:.8rem}
.aifu-when{margin-left:auto;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.aifu-say{margin:0;font-size:.78rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.aifu-next{margin:0;font-size:.8rem;font-weight:650;color:var(--ink)}
.aifu-act{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.1rem}
.aifu-btn{display:inline-flex;align-items:center;border:1px solid color-mix(in srgb,var(--ai) 45%,transparent);background:var(--surface);
  color:var(--ai);border-radius:999px;padding:.16rem .65rem;font:inherit;font-size:.74rem;font-weight:650;cursor:pointer;text-decoration:none}
.aifu-btn:hover{background:var(--ai-wash)}
.aifu-btn.is-primary{background:var(--ai);border-color:var(--ai);color:#fff}
:root[data-theme="dark"] .aifu-btn.is-primary{color:#1a1430}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .aifu-btn.is-primary{color:#1a1430}}
.aifu-btn.is-primary:hover{filter:brightness(1.08)}
.aifu-btn:focus-visible,.aicbtn:focus-visible{outline:2px solid var(--ai);outline-offset:2px}
tr:has(> td.has-aifu) > td{background:color-mix(in srgb,var(--ai-wash) 55%,transparent)}

.aifu-banner{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:0 0 1rem;padding:.65rem .9rem;border-radius:10px;
  background:var(--ai-wash);border:1px solid color-mix(in srgb,var(--ai) 45%,transparent);color:var(--ink);text-decoration:none;font-size:.88rem}
.aifu-banner:hover{border-color:var(--ai)}
.aifu-banner-go{margin-left:auto;color:var(--ai);font-weight:700}

/* AI calling entries per recruiter (Calling page, My consultants). */
.cpent{display:flex;flex-direction:column;gap:.45rem}
.cpent-h{font-weight:650;font-size:.84rem}
.cpent-h span{font-weight:400;color:var(--muted);margin-left:.35rem}
.cpent-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.cpent-list li{display:grid;grid-template-columns:minmax(9rem,14rem) minmax(6rem,10rem) minmax(8rem,1fr) auto;gap:.6rem;align-items:center;
  padding:.35rem .6rem;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:.84rem;max-width:44rem}
.cpent-cand{font-weight:650}
.cpent-as{color:var(--ai)}
.cpent-co{color:var(--muted)}
.cpent-del{background:none;border:0;color:var(--danger);font:inherit;font-size:.78rem;cursor:pointer;padding:.1rem .3rem}
.cpent-del:hover{text-decoration:underline}
.cpent-add{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.cpent-add[hidden]{display:none}
.cpent-add select,.cpent-add input{width:auto;min-width:10rem;max-width:16rem;padding:.35rem .5rem;font-size:.84rem;margin:0}
.cpent-addbtn{align-self:flex-start;background:none;border:1px dashed var(--ai);color:var(--ai);border-radius:999px;
  padding:.2rem .75rem;font:inherit;font-size:.78rem;font-weight:650;cursor:pointer}
.cpent-addbtn:hover{background:var(--ai-wash)}
.cpent-err{color:var(--danger);font-size:.8rem}
.cpent-none{margin:0;color:var(--muted);font-size:.84rem}
tr.cpent-tr td{background:var(--surface-2);border-top:0;padding-top:.4rem;padding-bottom:.7rem}
tr.cpent-tr:hover{background:none}

/* Submissions: one frame, no sideways scroll. */
table.subtbl th,table.subtbl td{padding:.5rem .5rem}
table.subtbl td:nth-child(2){min-width:7.5rem}
table.subtbl .vendcell{min-width:14rem;max-width:19rem}
table.subtbl .concell{justify-content:flex-start}
table.subtbl .concell-act{margin-left:0}
table.subtbl .aifu{max-width:100%}

/* ---- My consultants: one row, readable at a glance ---- */
.mb-hint{margin:0 0 .9rem;font-size:.84rem;color:var(--muted)}
.mbtbl > tbody > tr > td{vertical-align:top;padding-top:.85rem;padding-bottom:.85rem}
.mb-name{font-weight:650;color:var(--brand-ink);text-decoration:none}
a.mb-name:hover{text-decoration:underline}
.mb-title{margin-top:.2rem;font-size:.82rem;color:var(--ink);line-height:1.35;max-width:22rem}
.mb-title span{color:var(--muted)}
.mb-sub{margin-top:.2rem;font-size:.72rem;color:var(--muted);line-height:1.3}
.mb-status .badge{white-space:nowrap}
.mb-subs strong{font-size:1rem;font-variant-numeric:tabular-nums}

/* The setup block: label on the left, its one control on the right. */
.mb-setup{min-width:25rem}
.mbtbl .mktvisa select{min-width:7.5rem;max-width:8.75rem}
.setup{display:grid;grid-template-columns:5.3rem minmax(0,1fr);column-gap:.6rem;row-gap:.4rem;align-items:start}
.setup-k{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;line-height:1.95rem}
.setup-v{min-height:1.95rem}
.setup-k.is-ai{color:var(--ai)}
.setup-v{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;min-width:0}
.setup-v form{margin:0;display:inline-flex;align-items:center;gap:.4rem}
.setup-file{font-size:.82rem;font-weight:600;color:var(--brand-ink);text-decoration:none;max-width:16rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.setup-file:hover{text-decoration:underline}
.setup-plain{font-size:.82rem;color:var(--muted)}
.setup-link{position:relative;display:inline-flex;align-items:center;background:none;border:0;padding:.1rem 0;margin:0;
  font:inherit;font-size:.78rem;font-weight:650;color:var(--brand);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--brand) 40%,transparent)}
.setup-link:hover{text-decoration-color:currentColor}
.setup-link.is-quiet{color:var(--muted);font-weight:500}
.setup-link:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}
form.altcv-add input.setup-file-input{position:absolute;width:1px;height:1px;max-width:1px;opacity:0;pointer-events:none}
.setup-form{display:inline-flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.setup-form input{width:12.5rem;max-width:100%;height:1.95rem;padding:.25rem .55rem;font-size:.8rem;margin:0;border-radius:7px}
.setup-form .aias-name{width:6.5rem}
.setup-form .aias-co{width:9rem}
.aias-from{font-size:.74rem;color:var(--muted)}
.aias input{border-color:color-mix(in srgb,var(--ai) 35%,var(--line))}
.aias input:focus{border-color:var(--ai);box-shadow:0 0 0 3px color-mix(in srgb,var(--ai) 18%,transparent)}
.setup-save{visibility:hidden;opacity:0;transition:opacity 150ms ease-out;background:var(--brand);color:#fff;border:0;border-radius:7px;
  height:1.95rem;padding:0 .55rem;font:inherit;font-size:.76rem;font-weight:650;cursor:pointer}
.aias .setup-save{background:var(--ai)}
:root[data-theme="dark"] .setup-save{color:#0f1420}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .setup-save{color:#0f1420}}
.is-dirty > .setup-save,.setup-save:focus-visible{visibility:visible;opacity:1}
.setup-save:disabled{opacity:.6}
.setup-note{font-size:.7rem;color:var(--muted)}
.aias-ok{font-size:.74rem;font-weight:600}
.aias-ok.is-ok{color:var(--ok)}
.aias-ok.is-bad{color:var(--danger)}
@media (prefers-reduced-motion:reduce){.setup-save{transition:none}}

/* Submissions: the AI follow-up as a strip under its row. */
table.subtbl tr:has(> td.has-aifu) > td{border-bottom:0}
table.subtbl tr.aifu-tr > td{padding:0 .5rem .55rem;background:color-mix(in srgb,var(--ai-wash) 55%,transparent)}
table.subtbl tr.aifu-tr:hover{background:none}
table.subtbl .aifu{flex-direction:row;align-items:center;flex-wrap:wrap;gap:.35rem 1rem;max-width:none;margin:0;padding:.45rem .7rem}
table.subtbl .aifu-h{flex:none;flex-wrap:nowrap}
table.subtbl .aifu-when{margin-left:0}
table.subtbl .aifu-say{flex:1 1 18rem;min-width:12rem;-webkit-line-clamp:1}
table.subtbl .aifu-next{flex:0 1 auto;max-width:26rem}
table.subtbl .aifu-act{flex:none;margin:0}

/* Submissions: filter by how the AI call went. */
.aitabs{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:0 0 .75rem}
.aitabs-k{font-size:.68rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--ai);margin-right:.25rem}
.aitab{display:inline-flex;align-items:center;gap:.4rem;padding:.28rem .7rem;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-size:.8rem;font-weight:550;text-decoration:none;transition:background 150ms ease-out,border-color 150ms ease-out}
.aitab b{font-variant-numeric:tabular-nums;font-weight:700;color:var(--muted)}
.aitab:hover{border-color:var(--ai)}
.aitab.is-zero{opacity:.55}
.aitab.is-ai b{color:var(--ai)}
.aitab.is-ok b{color:var(--ok)}
.aitab.is-bad b{color:var(--danger)}
.aitab.is-warn b{color:var(--warn-ink, var(--warn))}
.aitab.is-info b{color:var(--info)}
.aitab.is-on{background:var(--ai);border-color:var(--ai);color:#fff}
.aitab.is-on b{color:#fff}
:root[data-theme="dark"] .aitab.is-on,:root[data-theme="dark"] .aitab.is-on b{color:#1a1430}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .aitab.is-on,:root:not([data-theme="light"]) .aitab.is-on b{color:#1a1430}}
.aitab:focus-visible{outline:2px solid var(--ai);outline-offset:2px}
.aitabs-clear{font-size:.78rem;color:var(--muted);margin-left:.3rem}
@media (prefers-reduced-motion:reduce){.aitab{transition:none}}

/* ---- AI follow-up strips: the outcome sets the colour ---- */
.aifu{--t:var(--info);--t-wash:var(--info-wash)}
.aifu.tone-ok{--t:var(--ok);--t-wash:var(--ok-wash)}
.aifu.tone-warn{--t:var(--warn);--t-wash:var(--warn-wash)}
.aifu.tone-bad{--t:var(--danger);--t-wash:var(--danger-wash)}
.aifu.aifu{background:var(--t-wash);border:1px solid color-mix(in srgb,var(--t) 38%,transparent)}
.aifu .aifu-out{display:inline-flex;align-items:center;padding:.12rem .55rem;border-radius:999px;background:var(--t);color:#fff;
  font-size:.74rem;font-weight:700;letter-spacing:.01em;white-space:nowrap}
:root[data-theme="dark"] .aifu .aifu-out{color:#0f1420}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .aifu .aifu-out{color:#0f1420}}
.aifu .aifu-badge{background:none;color:var(--ai);border:1px solid color-mix(in srgb,var(--ai) 45%,transparent);padding:.04rem .45rem;font-size:.6rem}
.aifu .aifu-badge::before{display:none}
.aifu-test{font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  border:1px dashed var(--line-2,var(--line));border-radius:999px;padding:.04rem .45rem;white-space:nowrap}
.aifu .aifu-say{color:var(--ink);font-size:.8rem}
.aifu .aifu-say b{color:var(--muted);font-weight:650;margin-right:.15rem}
.aifu .aifu-next{display:inline-flex;align-items:baseline;gap:.45rem;color:var(--t);font-size:.82rem;font-weight:700}
.aifu-next-k{flex:none;font-size:.6rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:.08rem .4rem;border-radius:4px;
  background:var(--t);color:#fff;transform:translateY(-1px)}
:root[data-theme="dark"] .aifu-next-k{color:#0f1420}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .aifu-next-k{color:#0f1420}}
.aifu .aifu-btn.is-primary{background:var(--t);border-color:var(--t)}
.aifu .aifu-btn{color:var(--t);border-color:color-mix(in srgb,var(--t) 40%,transparent)}
.aifu .aifu-btn:hover{background:color-mix(in srgb,var(--t) 10%,var(--surface))}
.aifu .aifu-btn.is-primary:hover{background:var(--t);filter:brightness(1.07)}
/* A test call is visibly not a result: muted, dashed. */
.aifu.is-test{background:var(--surface-2);border-style:dashed;border-color:var(--line-2,var(--line))}
.aifu.is-test .aifu-out{opacity:.85}
/* The row and its strip read as one item, on a quiet neutral, so the colour belongs to the strip alone. */
/* Each submission is a deck (its row and its AI strip): shaded in turn, a
   sliver of the page between decks, and lit as one on hover. */
table.subtbl > tbody.subdeck > tr > td{background:var(--surface);transition:background-color 120ms ease-out}
table.subtbl > tbody.subdeck:nth-of-type(even) > tr > td{background:var(--surface-2)}
table.subtbl > tbody.subdeck + tbody.subdeck > tr:first-child > td{border-top:6px solid var(--bg)}
table.subtbl > tbody.subdeck > tr:not(:last-child) > td{border-bottom:0}
table.subtbl > tbody.subdeck:hover > tr > td{background:color-mix(in srgb,var(--brand) 11%,var(--surface))}
table.subtbl > tbody.subdeck > tr:hover{background:none}
@media (prefers-reduced-motion:reduce){table.subtbl > tbody.subdeck > tr > td{transition:none}}
.aifu .aifu-btn.is-primary{color:#fff}
:root[data-theme="dark"] .aifu .aifu-btn.is-primary{color:#0f1420}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .aifu .aifu-btn.is-primary{color:#0f1420}}

/* Rate checks: the period tabs. */
.rcrange{display:flex;gap:.35rem;flex-wrap:wrap;margin:-.3rem 0 1rem}
.rcrange-tab{padding:.32rem .8rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-size:.82rem;font-weight:550;text-decoration:none;transition:background 150ms ease-out,border-color 150ms ease-out}
.rcrange-tab:hover{border-color:var(--brand)}
.rcrange-tab.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
:root[data-theme="dark"] .rcrange-tab.is-on{color:#0f1420}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rcrange-tab.is-on{color:#0f1420}}
.rcrange-tab:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.rc-short{color:var(--danger)}
@media (prefers-reduced-motion:reduce){.rcrange-tab{transition:none}}


/* ---- My consultants: calling a consultant, and today's talk time (ccalls.php) ---- */
.cctoday{margin:0 0 1rem;padding:.75rem .95rem .8rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-xs)}
.cctoday-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:.25rem .5rem}
.cctoday-lbl{font-size:.82rem;color:var(--muted)}
.cctoday-val{font-size:1.12rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.cctoday-of{font-size:.82rem;color:var(--muted)}
.cctoday-pend{font-size:.74rem;color:var(--info);background:var(--info-wash);border-radius:999px;padding:.05rem .5rem}
.cctoday-link{margin-left:auto;font-size:.82rem;font-weight:600;color:var(--brand);text-decoration:none}
.cctoday-link:hover{text-decoration:underline}
.cctoday-bar{margin-top:.55rem;height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.cctoday-bar span{display:block;height:100%;border-radius:inherit;background:var(--warn);transition:width .4s var(--ease-out)}
.cctoday.is-met .cctoday-bar span{background:var(--ok)}
.cctoday.is-met .cctoday-val{color:var(--ok)}
.cctoday-warn{margin-top:.5rem;font-size:.8rem;color:var(--warn-ink)}

.cccall{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}
.cccall-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.26rem .7rem .26rem .55rem;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--ok) 35%,var(--line));background:var(--ok-wash);color:var(--ok);
  font:inherit;font-size:.78rem;font-weight:650;cursor:pointer;transition:transform .14s var(--ease-out),background-color .15s ease,border-color .15s ease}
.cccall-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cccall-btn:hover:not(:disabled){border-color:var(--ok)}
.cccall-btn:active:not(:disabled){transform:scale(.97)}
.cccall-btn:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
.cccall-btn:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.6)}
.cccall-state{font-size:.74rem;color:var(--muted);line-height:1.3}
.cccall-never{color:var(--warn-ink)}
.cccall.is-live .cccall-state{color:var(--ok);font-weight:600}
.cccall.is-live .cccall-btn{animation:ccpulse 1.6s ease-in-out infinite}
.cccall.is-err .cccall-state{color:var(--danger)}
@keyframes ccpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 35%,transparent)}50%{box-shadow:0 0 0 5px transparent}}
@media (prefers-reduced-motion:reduce){.cccall.is-live .cccall-btn{animation:none}}

/* ---- Consultant talk time report ---- */
.ccsla{font-variant-numeric:tabular-nums}
.ccsla-bar{display:inline-block;vertical-align:middle;width:5.5rem;height:6px;border-radius:999px;background:var(--line);overflow:hidden;margin-left:.45rem}
.ccsla-bar span{display:block;height:100%;background:var(--warn)}
.ccsla.is-met .ccsla-bar span{background:var(--ok)}
.ccsla.is-met strong{color:var(--ok)}
.ccsla.is-short strong{color:var(--danger)}
.ccdays{display:flex;gap:3px;flex-wrap:wrap}
.ccday{width:1.35rem;height:1.35rem;border-radius:5px;display:grid;place-items:center;font-size:.62rem;font-weight:650;
  background:var(--danger-wash);color:var(--danger)}
.ccday.is-met{background:var(--ok-wash);color:var(--ok)}
.ccday.is-part{background:var(--warn-wash);color:var(--warn-ink)}
.cccalls audio{height:32px;width:15rem;max-width:100%}
.cccalls .cc-out{font-size:.78rem;white-space:nowrap}
.cc-o-talked{color:var(--ok);font-weight:650}
.cc-o-voicemail,.cc-o-one-sided,.cc-o-no-recording{color:var(--warn-ink)}
.cc-o-failed,.cc-o-recruiter-missed{color:var(--danger)}
.ccfilters{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:0 0 .8rem}
.ccnote{font-size:.8rem;color:var(--muted);margin:.2rem 0 1rem;max-width:62rem;line-height:1.45}
.rc-talk{font-variant-numeric:tabular-nums;white-space:nowrap}
.rc-talk.is-met{color:var(--ok);font-weight:650}
.rc-talk.is-short{color:var(--danger)}
.ccset{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.8rem 1rem;max-width:62rem}
.ccset label{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem;font-weight:600;color:var(--ink-soft)}
.ccset input{font:inherit;font-weight:400}
.ccset-acts{grid-column:1/-1;display:flex;gap:.5rem;flex-wrap:wrap}
.ccset .ccnote{grid-column:1/-1;margin:0}

/* Each consultant's own fifteen minutes today (My consultants) */
.ccrow{display:flex;align-items:center;gap:.45rem;margin-top:.35rem;font-size:.74rem;color:var(--muted)}
.ccrow-bar{flex:none;width:4.2rem;height:5px;border-radius:999px;background:var(--line);overflow:hidden}
.ccrow-bar span{display:block;height:100%;background:var(--warn);border-radius:inherit;transition:width .4s var(--ease-out)}
.ccrow strong{font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.ccrow.is-met .ccrow-bar span{background:var(--ok)}
.ccrow.is-met strong{color:var(--ok)}
.ccrow.is-off{opacity:.6}
.cctoday-short{margin-top:.5rem;font-size:.8rem;color:var(--warn-ink)}
.ccrate{font-variant-numeric:tabular-nums}
.ccpairs{font-size:.72rem;color:var(--muted);margin-top:.15rem}
.ccday.is-none{background:transparent;color:var(--muted)}
.ccdays .ccday{width:auto;min-width:1.35rem;padding:0 .25rem}
.ccgrid .ccday{display:inline-grid;min-width:1.6rem;padding:0 .3rem}
.rctable tr.is-sel td{background:var(--brand-wash)}

/* My consultants: is the consultant using their portal? */
.mbportal{display:flex;align-items:center;gap:.35rem;margin-top:.35rem;font-size:.74rem;line-height:1.3;color:var(--muted)}
.mbportal-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--line)}
.mbportal.is-ok{color:var(--ok)}       .mbportal.is-ok .mbportal-dot{background:var(--ok)}
.mbportal.is-warn{color:var(--warn-ink)} .mbportal.is-warn .mbportal-dot{background:var(--warn)}
.mbportal.is-bad{color:var(--danger)}   .mbportal.is-bad .mbportal-dot{background:var(--danger)}

/* Consultants' ratings of recruiters (management only) */
.mbfb{display:block;margin-top:.3rem;font-size:.74rem;line-height:1.35;text-decoration:none;color:var(--ink-soft)}
.mbfb:hover{text-decoration:underline}
.mbfb-stars{letter-spacing:.05em}
.mbfb.is-ok .mbfb-stars{color:var(--gold)}
.mbfb.is-warn .mbfb-stars{color:var(--warn)}
.mbfb.is-bad .mbfb-stars,.mbfb.is-bad .mbfb-last{color:var(--danger)}
.mbfb.is-none{color:var(--muted)}
.rfbm-status{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;padding:.8rem 1rem;margin:0 0 .7rem;
  border:1px solid var(--line);border-left:4px solid var(--muted);border-radius:var(--radius);background:var(--surface);font-size:.86rem}
.rfbm-status.is-on{border-left-color:var(--ok)}
.rfbm-acts{display:flex;gap:.4rem;flex-wrap:wrap}
.rfbm-sender{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin:0 0 1rem;font-size:.84rem}
.rfbm-sender label{display:flex;gap:.45rem;align-items:center;font-weight:600}
.rfbm-stars{letter-spacing:.05em;font-size:.95rem}
.rfbm-stars.is-ok{color:var(--gold)} .rfbm-stars.is-warn{color:var(--warn)} .rfbm-stars.is-bad{color:var(--danger)}
.rfbm-comment{max-width:24rem}

.privrow{grid-column:1/-1}
.privrow-note{display:block;background:var(--gold-wash);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);border-radius:var(--radius-sm);
  padding:.6rem .8rem;font-size:.82rem;line-height:1.45;color:var(--gold-ink)}
.rfbm-warn{margin:0 0 1rem;padding:.7rem .9rem;border-radius:var(--radius);background:var(--warn-wash);color:var(--warn-ink);font-size:.84rem;line-height:1.6}

/* My consultants: a recruiter's overall rating from consultants */
.rfbov{display:flex;align-items:baseline;gap:.25rem .55rem;flex-wrap:wrap;margin:0 0 1rem;padding:.75rem .95rem;border:1px solid var(--line);
  border-left:4px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-xs)}
.rfbov.is-ok{border-left-color:var(--gold)} .rfbov.is-warn{border-left-color:var(--warn)} .rfbov.is-bad{border-left-color:var(--danger)}
.rfbov-lbl{font-size:.82rem;color:var(--muted);margin-right:.2rem}
.rfbov-stars{font-size:1.05rem;letter-spacing:.06em;color:var(--gold)}
.rfbov.is-bad .rfbov-stars{color:var(--danger)} .rfbov.is-warn .rfbov-stars{color:var(--warn)}
.rfbov-val{font-size:1.15rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.rfbov-of{font-size:.82rem;color:var(--muted)}
.rfbov-sub{font-size:.8rem;color:var(--muted);flex-basis:100%}

/* Talk time: the admin's on/off switch for consultant calling */
.ccswitch{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:0 0 1rem;padding:.85rem 1rem;
  border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-xs)}
.ccswitch.is-off{border-left-color:var(--danger);background:var(--danger-wash)}
.ccswitch-txt{display:flex;flex-direction:column;gap:.2rem;font-size:.86rem;color:var(--ink-soft);max-width:48rem}
.ccswitch-txt strong{font-size:.98rem;color:var(--ink)}
.ccswitch.is-on .ccswitch-txt strong{color:var(--ok)}
.ccswitch.is-off .ccswitch-txt strong{color:var(--danger)}

/* OPT / STEM OPT: the ten days to market under another visa */
.vchg{margin-top:.4rem;display:flex;flex-direction:column;gap:.15rem;font-size:.74rem;line-height:1.35;max-width:14rem;
  padding:.35rem .5rem;border-radius:var(--radius-sm);background:var(--info-wash);color:var(--info)}
.vchg-timer{font-weight:700;font-variant-numeric:tabular-nums}
.vchg.is-soon2{background:var(--warn-wash);color:var(--warn-ink);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent)}
.vchg.is-soon1{background:var(--danger-wash);color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 40%,transparent)}
.vchg.is-over{background:var(--danger);color:#fff}
.vchg.is-over span{opacity:.92}
.vchg.is-done{background:var(--ok-wash);color:var(--ok);font-weight:650}
.vchg-banner{display:flex;flex-direction:column;gap:.2rem;margin:0 0 1rem;padding:.75rem .95rem;border-radius:var(--radius);
  background:var(--warn-wash);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);border-left:4px solid var(--warn);color:var(--warn-ink);font-size:.86rem}
.vchg-banner.is-over{background:var(--danger-wash);border-color:color-mix(in srgb,var(--danger) 40%,transparent);border-left-color:var(--danger);color:var(--danger)}
.vchg-banner strong{font-size:.95rem}
.vchg-chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.3rem}
.vchg-chip{font-size:.72rem;padding:.12rem .5rem;border-radius:999px;background:var(--info-wash);color:var(--info);white-space:nowrap}
.vchg-chip.is-soon2{background:var(--warn-wash);color:var(--warn-ink)}
.vchg-chip.is-soon1,.vchg-chip.is-overdue{background:var(--danger-wash);color:var(--danger);font-weight:650}
.vchg-chip.is-converted{background:var(--ok-wash);color:var(--ok)}

/* ---- Cold leads (pipeline/cold) ---- */
.cl-today{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;align-items:baseline;margin:0 0 .9rem;padding:.65rem .9rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);font-size:.84rem}
.cl-today-who{color:var(--ink-soft)}
.cl-int{color:var(--ok)}
.cl-filters{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;margin:.2rem 0 .8rem}
.cl-filters input[type=search]{min-width:16rem;flex:1 1 16rem}
.cl-jobsel{max-width:16rem}
.cl-bulk{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:0 0 .5rem}
.cl-total{margin-left:auto}
.cltbl td{vertical-align:top}
.cltbl .cl-chk{width:1.8rem}
.cl-who strong{color:var(--ink)}
.cl-li{display:inline-block;margin-left:.3rem;padding:0 .3rem;border-radius:4px;background:#0a66c2;color:#fff;font-size:.68rem;font-weight:700;text-decoration:none;vertical-align:1px}
.cl-phone{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.cl-skills{max-width:15rem}
.cl-job{max-width:14rem}
.cl-state{min-width:12rem}
.cl-chip{display:inline-block;padding:.12rem .55rem;border-radius:999px;font-size:.74rem;font-weight:650;background:var(--info-wash);color:var(--info)}
.cl-chip.is-warn{background:var(--warn-wash);color:var(--warn-ink)}
.cl-chip.is-bad{background:var(--danger-wash);color:var(--danger)}
.cl-chip.is-muted{background:var(--bg);color:var(--muted)}
.cl-chip.is-ok{background:var(--ok-wash);color:var(--ok)}
.cl-due{color:var(--danger);font-weight:650}
.cl-note{font-style:italic}
.cl-pipe{display:block;font-weight:600;color:var(--ok)}
.cl-upd{margin-top:.35rem}
.cl-edit td{background:var(--brand-wash)}
.cl-form{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:flex-end}
.cl-form label{display:flex;flex-direction:column;gap:.2rem;font-size:.76rem;font-weight:600;color:var(--ink-soft)}
.cl-form label[hidden]{display:none}
.cl-form-note{flex:1 1 16rem}
.cl-form input,.cl-form select{font:inherit;font-weight:400}
.cl-err{color:var(--danger);font-size:.8rem;font-weight:600}
tr.cl-saved td{background:var(--ok-wash);transition:background-color .6s ease}
.cl-pages{display:flex;gap:.3rem;flex-wrap:wrap;margin:1rem 0}
.cl-pages a{padding:.25rem .6rem;border:1px solid var(--line);border-radius:6px;text-decoration:none;font-size:.82rem}
.cl-pages a.is-on{background:var(--brand);color:#fff;border-color:var(--brand)}
.cl-imp{padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.8rem;max-width:62rem}
.cl-drop{display:flex;flex-direction:column;gap:.5rem;padding:1.2rem;border:2px dashed var(--line);border-radius:var(--radius);background:var(--bg)}
.cl-map select{min-width:13rem}
.cl-map select.is-set{border-color:var(--ok);background:var(--ok-wash)}
.cl-sample{max-width:26rem}
.cl-impopts{display:flex;gap:1rem;flex-wrap:wrap}
.cl-impopts label{display:flex;flex-direction:column;gap:.25rem;font-size:.82rem;font-weight:600}
.cl-res{font-size:1.02rem;margin:0}

/* Cold leads: dropdowns with checkboxes (who can import; share out on import) */
.cl-dd{position:relative;display:inline-block}
.cl-dd > summary{list-style:none;cursor:pointer}
.cl-dd > summary::-webkit-details-marker{display:none}
.cl-dd-pop{position:absolute;right:0;z-index:30;margin-top:.35rem;min-width:17rem;max-width:22rem;padding:.75rem .85rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-pop);display:flex;flex-direction:column;gap:.55rem;white-space:normal}
.cl-dd-pop p{margin:0}
.cl-dd-list{display:flex;flex-direction:column;gap:.15rem;max-height:18rem;overflow:auto}
.cl-dd-list label{display:flex;gap:.45rem;align-items:center;font-size:.86rem;padding:.2rem .15rem;border-radius:6px;cursor:pointer}
.cl-dd-list label:hover{background:var(--bg)}
.cl-dd-list input{width:auto;margin:0}
.cl-impowner{display:flex;flex-direction:column;gap:.25rem;font-size:.82rem;font-weight:600}
.cl-impowner .cl-dd-pop{left:0;right:auto}

.cl-share{margin:0 0 .6rem}
.cl-dd-pop.cl-dd-left{left:0;right:auto}


/* ==========================================================================
   Cold leads, laid out like the CRM contacts table (pipeline/cold), measured
   off the live page on 15 Oct: system font 14px; text #12344d; page #ebeff3;
   rows 40px with #ebeff3 hairlines between rows and columns; cells padded
   10px; a 40px tick column, a 400px Name column (32px avatar, then the name in
   #2c5cc5 at 500), 150px for the rest; headings 12px/600 #475867 with a 12px
   caret 14px from the right; tags 12px/500 padded 2.5px 5px, radius 4.
   ========================================================================== */
.fw{--fw-ink:#12344d;--fw-ink2:#384551;--fw-ink3:#475867;--fw-tab:#576c7d;--fw-mute:#92a2b1;--fw-line:#ebeff3;--fw-line2:#cfd7df;
  --fw-link:#2c5cc5;--fw-bg:#ebeff3;--fw-white:#fff;--fw-navy:#12344d;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  font-size:14px;line-height:20px;color:var(--fw-ink);background:var(--fw-bg);margin:0;padding:0 10px}
body.fwscreen .content{background:#ebeff3}
body.fwscreen .content-inner{padding:0}
body.fwscreen .content-inner > .flash,body.fwscreen .content-inner > .rcwait{margin:10px 16px 0}
.fw *{box-sizing:border-box}
/* A base for buttons that every specific button style overrides: :where() keeps its weight at zero. */
:where(.fw) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:where(.fw) input,:where(.fw) select,:where(.fw) textarea{font:inherit;color:var(--fw-ink)}
.fw svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fw-a{color:var(--fw-link);text-decoration:none}
.fw-a:hover{text-decoration:underline}
.fw-muted{color:var(--fw-mute)}

/* title row */
.fw-top{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px;padding:0 6px}
.fw-title{margin:0;font-size:20px;line-height:28px;font-weight:600;color:var(--fw-ink)}
.fw-search{position:relative;width:200px}
.fw-search svg{position:absolute;left:10px;top:9px;color:var(--fw-ink3)}
.fw-search input{width:100%;height:34px;padding:0 10px 0 32px;border:1px solid var(--fw-line2);border-radius:4px;background:var(--fw-white)}
.fw-search input::placeholder{color:var(--fw-mute)}
.fw-search input:focus{outline:none;border-color:var(--fw-link);box-shadow:0 0 0 1px var(--fw-link)}

/* tabs and the page's actions */
.fw-tabrow{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;min-height:40px;flex-wrap:wrap}
.fw-tabs{display:flex;align-items:flex-end;gap:2px;flex-wrap:wrap}
.fw-tab{display:inline-flex;align-items:center;gap:6px;height:40px;padding:10px;font-weight:500;color:var(--fw-tab);text-decoration:none;border-radius:6px 6px 0 0;white-space:nowrap}
.fw-tab:hover{color:var(--fw-ink)}
.fw-tab.is-on{background:var(--fw-white);color:var(--fw-ink2)}
.fw-count{display:inline-block;min-width:22px;padding:0 7px;height:20px;line-height:20px;border-radius:10px;background:#527fa6;color:#fff;font-size:12px;font-weight:600;text-align:center}
.fw-tabx{display:inline-grid;place-items:center;width:18px;height:18px;margin-left:2px;border-radius:3px;color:var(--fw-ink3);font-size:18px;line-height:1}
.fw-tabx:hover{background:var(--fw-line)}
.fw-more{height:40px;padding:10px;font-weight:500;color:var(--fw-ink2)}
.fw-actions{display:flex;align-items:center;gap:12px;padding-bottom:4px}
.fw-textbtn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 8px;font-weight:500;color:var(--fw-ink2);border-radius:4px}
.fw-textbtn:hover,.fw-textbtn.is-on{background:#dfe5eb}
.fw-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:6px 12px;border:1px solid var(--fw-line2);border-radius:4px;
  background:var(--fw-white);color:var(--fw-ink);font-weight:500;text-decoration:none;white-space:nowrap}
.fw-btn:hover{background:#f5f7f9}
.fw-btn.fw-primary{background:var(--fw-navy);border-color:var(--fw-navy);color:#fff}
.fw-btn.fw-primary:hover{background:#1f4a6b}
.fw-split{display:inline-flex}
.fw-split-main{border-radius:4px 0 0 4px}
.fw-split-caret{border-radius:0 4px 4px 0;border-left:0;padding:6px 8px}
.fw-split-caret:only-child{border-left:1px solid var(--fw-line2);border-radius:4px}

/* toolbar */
.fw-toolbar{display:flex;align-items:center;gap:8px;height:52px;padding:0 0 0 0;flex-wrap:wrap}
.fw-tablebtn{height:34px;padding:8px 10px;font-weight:400}
.fw-caret{width:12px!important;height:12px!important;margin-left:2px}
.fw-iconbtn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:4px;color:var(--fw-ink3)}
.fw-iconbtn:hover{background:#dfe5eb}
.fw-picked{color:var(--fw-link)}
.fw-today{margin-left:auto;font-size:13px;color:var(--fw-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50%}
.fw-today b{color:var(--fw-ink)}
.fw-int{color:#00795b;font-weight:600}

/* pop-overs */
.fw-popwrap{position:relative;display:inline-flex}
.fw-pop{display:none;position:absolute;top:calc(100% + 4px);left:0;z-index:60;min-width:200px;max-width:300px;padding:6px 0;background:var(--fw-white);
  border:1px solid var(--fw-line2);border-radius:4px;box-shadow:0 4px 16px rgba(18,52,77,.16);flex-direction:column;font-weight:400}
.fw-pop.is-open{display:flex}
.fw-pop-r{left:auto;right:0}
.fw-pop-up{top:auto;bottom:calc(100% + 4px)}
.fw-pop-item{display:block;width:100%;padding:7px 14px;text-align:left;color:var(--fw-ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fw-pop-item:hover{background:#ebeff3}
.fw-pop-item.is-on{color:var(--fw-link);font-weight:500}
.fw-pop-link{color:var(--fw-link)}
.fw-pop-h{padding:8px 14px 4px;font-size:12px;font-weight:600;color:var(--fw-ink3);text-transform:none}
.fw-pop-check{display:flex;align-items:center;gap:8px;padding:5px 14px;cursor:pointer}
.fw-pop-check:hover{background:#ebeff3}
.fw-pop-check input{margin:0}
.fw-pop-scroll{display:flex;flex-direction:column;max-height:220px;overflow:auto}
.fw-filter{padding:12px 14px;gap:10px;min-width:280px}
.fw-filter label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--fw-ink3)}
.fw-filter select,.fw-filter input{height:32px;padding:0 8px;border:1px solid var(--fw-line2);border-radius:4px;background:#fff;font-size:14px;font-weight:400}
.fw-filter-acts{display:flex;align-items:center;gap:12px;margin-top:4px}

/* the table */
.fw-grid{overflow:auto;background:var(--fw-white);border:1px solid var(--fw-line);border-radius:4px 4px 0 0}
.fw-table{border-collapse:separate;border-spacing:0;table-layout:fixed;width:max-content;min-width:100%}
.fw-table th,.fw-table td{height:40px;padding:0 10px;border-bottom:1px solid var(--fw-line);border-right:1px solid var(--fw-line);background:var(--fw-white);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;text-align:left;font-weight:400}
.fw-table thead th{position:sticky;top:0;z-index:3;height:40px}
.fw-table .c-chk{position:sticky;left:0;z-index:2;padding:0;text-align:center;border-right:0}
.fw-table .c-name{position:sticky;left:40px;z-index:2;padding:0 10px;box-shadow:inset -1px 0 0 var(--fw-line)}
.fw-table thead .c-chk,.fw-table thead .c-name{z-index:4}
.fw-table .c-chk input{width:16px;height:16px;margin:0;vertical-align:middle;accent-color:var(--fw-link)}
.fw-table tbody tr:hover td,.fw-table tbody tr.is-picked td{background:#f5f7f9}
.fw-table tbody tr.is-saved td{background:#e5f6ef;transition:background-color .6s ease}
.fw-th{display:flex;align-items:center;justify-content:space-between;gap:6px;height:39px}
.fw-th-l{font-size:12px;font-weight:600;color:var(--fw-ink3);overflow:hidden;text-overflow:ellipsis}
.fw-th-caret{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:4px;border-radius:3px;color:var(--fw-ink)}
.fw-th-caret svg{width:12px;height:12px;fill:currentColor;stroke:none}
.fw-th-caret:hover,.fw-th-caret.is-on{background:#ebeff3}
.fw-th .fw-popwrap{position:static}
.fw-table thead th .fw-pop{top:38px;left:auto;right:4px}
.fw-dash{color:var(--fw-mute)}
.fw-empty{color:var(--fw-mute)}

.fw-namecell{display:flex;align-items:center;gap:5px;height:39px}
.fw-av{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;font-size:14px;font-weight:500}
.fw-name{flex:1;min-width:0;text-align:left;color:var(--fw-link)!important;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:0}
.fw-name:hover{text-decoration:underline}
.fw-kebabwrap{flex:none;margin-left:auto}
.fw-kebab{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:4px;color:var(--fw-ink)}
.fw-kebab svg{fill:currentColor;stroke:none}
.fw-kebab:hover{background:#ebeff3}
.fw-kebabwrap .fw-pop{top:30px}

.fw-tag{display:inline-block;max-width:100%;padding:2.5px 5px;border-radius:4px;font-size:12px;line-height:20px;font-weight:500;vertical-align:middle;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#e5e9ef;color:#384551}
.fw-tag-g{background:#c4ecd8;color:#0b5f3b}
.fw-tag-t{background:#c6e9ef;color:#0b5867}
.fw-tag-b{background:#cfdffb;color:#1b3f8f}
.fw-tag-p{background:#e2d6fb;color:#4c2a9e}
.fw-tag-o{background:#e0caaa;color:#761214}
.fw-owner{display:inline-flex;align-items:center;gap:5px;max-width:100%;overflow:hidden}
.fw-owner svg{color:var(--fw-ink3)}
.fw-status{display:inline-flex;align-items:center;gap:5px;max-width:100%;height:24px;padding:0 6px;border:1px solid var(--fw-line2);border-radius:4px;
  font-weight:500;font-size:13px;color:var(--fw-ink)!important;background:#fff!important}
.fw-status span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fw-status svg{width:14px;height:14px;color:var(--fw-ink3)}
.fw-status.is-warn svg{color:#e5a000}
.fw-status.is-bad svg{color:#d72d30}
.fw-status.is-ok svg{color:#00a886}
.fw-status.is-info svg{color:var(--fw-link)}
.fw-status:hover{border-color:var(--fw-ink3)}
.fw-due{color:#d72d30;font-weight:500}

/* the pager */
.fw-foot{display:flex;align-items:center;gap:24px;height:48px;padding:0 10px}
.fw-showing{color:var(--fw-ink)}
.fw-pager{display:flex;align-items:center;gap:2px;margin-left:16px}
.fw-pg{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 4px;border-radius:4px;color:var(--fw-ink);text-decoration:none}
.fw-pg:hover{background:#dfe5eb}
.fw-pg.is-on{background:var(--fw-link);color:#fff;font-weight:500}
.fw-pg-arrow{font-size:20px;color:var(--fw-ink3)}
.fw-pg-arrow.is-off{color:#c4ccd5}
.fw-pg-gap{color:var(--fw-ink3)}
.fw-foot > .fw-popwrap{margin-left:auto}
.fw-perbtn{display:inline-flex;align-items:center;gap:6px;color:var(--fw-link)!important}
.fw-perbtn svg{width:14px;height:14px}

/* side panel */
.fw-veil{position:fixed;inset:0;z-index:80;background:rgba(18,52,77,.35)}
.fw-drawer{position:fixed;top:0;right:0;bottom:0;z-index:81;width:min(540px,100vw);background:#fff;box-shadow:-6px 0 24px rgba(18,52,77,.2);display:flex;flex-direction:column}
.fw-veil[hidden],.fw-drawer[hidden],.fw-modal[hidden]{display:none}
.fw-dh{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--fw-line)}
.fw-av-lg{width:40px;height:40px;font-size:16px}
.fw-dh-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.fw-dh-txt strong{font-size:18px;line-height:24px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fw-dh-txt span{color:var(--fw-ink3);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fw-x{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;font-size:22px;line-height:1;color:var(--fw-ink3)}
.fw-x:hover{background:#ebeff3}
.fw-db{flex:1;overflow:auto;padding:4px 20px 24px}
.fw-dsec{padding:16px 0;border-bottom:1px solid var(--fw-line);display:flex;flex-direction:column;gap:10px}
.fw-dsec[hidden]{display:none}
.fw-dsec h3{margin:0;font-size:14px;font-weight:600;color:var(--fw-ink)}
.fw-dsec label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--fw-ink3)}
.fw-dsec label[hidden]{display:none}
.fw-dsec select,.fw-dsec input,.fw-dsec textarea{padding:6px 8px;border:1px solid var(--fw-line2);border-radius:4px;font-size:14px;font-weight:400;background:#fff}
.fw-dsec select,.fw-dsec input{height:34px}
.fw-dacts{display:flex;align-items:center;gap:12px}
.fw-err{color:#d72d30;font-size:13px;font-weight:500}
.fw-dnote{margin:12px 0 0;padding:10px 12px;background:#fff6e5;border-radius:4px;color:#7a4b00;font-size:13px}
.fw-flds{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.fw-fld{display:flex;flex-direction:column;gap:2px;min-width:0}
.fw-fld span{font-size:12px;color:var(--fw-ink3)}
.fw-fld b{font-weight:500;overflow-wrap:anywhere}
.fw-hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.fw-hist li{display:flex;flex-direction:column;gap:2px;padding-left:12px;border-left:2px solid var(--fw-line2)}
.fw-hwhen{font-size:12px;color:var(--fw-ink3)}
.fw-hnote{color:var(--fw-ink3);font-size:13px}

/* modals */
.fw-modal{position:fixed;inset:0;z-index:90;background:rgba(18,52,77,.35);display:grid;place-items:center;padding:16px}
.fw-mcard{width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:6px;box-shadow:0 12px 40px rgba(18,52,77,.28);display:flex;flex-direction:column}
.fw-mcard header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--fw-line)}
.fw-mcard h2{margin:0;font-size:16px;font-weight:600}
.fw-mcard footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--fw-line)}
.fw-mgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;padding:16px 20px 4px}
.fw-mgrid label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--fw-ink3)}
.fw-mgrid input,.fw-mgrid select,.fw-mgrid textarea{padding:6px 8px;border:1px solid var(--fw-line2);border-radius:4px;font-size:14px;font-weight:400}
.fw-mgrid input,.fw-mgrid select{height:34px}
.fw-full{grid-column:1/-1}
.fw-mnote{margin:8px 20px;font-size:13px;color:var(--fw-ink3)}
.fw-mlist{display:flex;flex-direction:column;gap:2px;padding:4px 20px 12px;max-height:50vh;overflow:auto}
.fw-mlist label{display:flex;align-items:center;gap:8px;padding:5px 4px;border-radius:4px;cursor:pointer}
.fw-mlist label:hover{background:#f5f7f9}
@media (max-width:700px){.fw-flds,.fw-mgrid{grid-template-columns:1fr}.fw-top{height:auto;padding:10px 6px;flex-wrap:wrap}.fw-search{width:100%}}
/* Cold leads: what the side-by-side with the CRM showed (15 Oct) */
.fw{color-scheme:light}
.fw-table thead th{text-transform:none;letter-spacing:normal}
.fw-th-l{font-size:12px;font-weight:600;color:#475867;text-transform:none;letter-spacing:normal}
.fw-th-caret{color:#12344d}
.fw-th-caret svg{width:12px;height:12px}
.fw-table .c-name{box-shadow:none;border-right:1px solid var(--fw-line)}
.fw input[type=checkbox]{appearance:auto;-webkit-appearance:checkbox;width:16px;height:16px;accent-color:#2c5cc5;background:#fff}

/* Cold leads: the selection bar, and "Assign these N" (15 Oct) */
.fw-selbar{display:flex;align-items:center;gap:12px;height:52px;padding:0 12px;margin:0 0 0 0;background:#e5f2fd;border:1px solid #bbdcfe;border-radius:4px;flex-wrap:wrap}
.fw-selbar[hidden]{display:none}
.fw-selbar strong{font-weight:600;color:var(--fw-ink)}
.fw-selall{color:var(--fw-ink3)}
.fw-selall[hidden]{display:none}
.fw-toolbar.is-hidden{display:none}
.fw-assignpop{min-width:280px;padding-bottom:0}
.fw-assignacts{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--fw-line);margin-top:6px}
.fw-assignall{margin-left:4px}

/* Cold leads: click a heading to sort (↑↓ shows which way); drag the column edge to resize (15 Oct) */
.fw-table thead th{position:sticky}
.fw-th-l{display:inline-flex;align-items:center;gap:6px;min-width:0;color:#475867;text-decoration:none;cursor:pointer;border-radius:3px}
.fw-th-l:hover{color:#12344d;text-decoration:none}
.fw-th-l.is-on{color:#12344d}
.fw-th-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fw-sortico{flex:none;width:8px;height:12px;stroke:none;opacity:0;transition:opacity .12s ease}
.fw-sortico path{fill:#c3ccd5}
.fw-th-l:hover .fw-sortico,.fw-sortico.is-asc,.fw-sortico.is-desc{opacity:1}
.fw-sortico.is-asc .up,.fw-sortico.is-desc .dn{fill:#2c5cc5}
.fw-resize{position:absolute;top:0;right:0;width:7px;height:100%;cursor:col-resize;z-index:5;touch-action:none}
.fw-resize::after{content:"";position:absolute;top:8px;bottom:8px;right:0;width:2px;border-radius:1px;background:transparent;transition:background-color .12s ease}
.fw-resize:hover::after,.fw-resize.is-drag::after{background:#2c5cc5;top:0;bottom:0}
body.fw-resizing,body.fw-resizing *{cursor:col-resize!important;user-select:none}

/* Cold leads filter: experience range (15 Oct) */
.fw-exp{display:flex;flex-direction:column;gap:4px}
.fw-exp-l{font-size:12px;font-weight:600;color:#475867}
.fw-exp-r{display:flex;align-items:center;gap:8px;color:#475867;font-size:13px}
.fw-exp-r input{width:0;flex:1;min-width:0}