*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#F5F7FA;--card:#FFFFFF;--border:#E2E8F0;--border2:#CBD5E1
/* An OPAQUE ground for anything that floats OVER content. In the themed skin
   --card is glass (62% in light, 5.5% in dark) and a popover painted with it is
   see-through: the page behind shows through and the two sets of text overlap.
   Here the two are the same colour; the token exists so a float can ask for the
   right one. NOTE: theme.css also declares it and always loads, so this line
   is defence in depth rather than the one that decides — see
   test/overlay-opacity-smoke.mjs's "known limit". */
--card-solid:#FFFFFF;
--text:#0F172A;--text2:#475569;--text3:#94A3B8;
--accent:#1E7A3C;--accent-l:#F0FDF4;--accent-m:#3AAE57;--accent-d:#165F2E;--gold:#F5C23B;--gold-l:#FEF6E0;
--teal:#0D9488;--teal-l:#F0FDFA;
--green:#16A34A;--green-l:#F0FDF4;
--amber:#D97706;--amber-l:#FFFBEB;
--red:#DC2626;--red-l:#FEF2F2;
--purple:#7C3AED;--purple-l:#F5F3FF;
--r:8px;--r2:12px;--r3:16px;
--sh:0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);
--sh2:0 4px 16px rgba(0,0,0,.09),0 2px 4px rgba(0,0,0,.05);
--sh3:0 20px 40px rgba(0,0,0,.12);
--font:'DM Sans',system-ui,sans-serif;
--display:'Sora',system-ui,sans-serif;
--mono:'DM Mono',monospace;
}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.5}
*{-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
.salary-range-wrap{padding:12px 14px;background:var(--bg);border:1px solid var(--border2);border-radius:var(--r2)}
.salary-range-track{position:relative;height:8px;background:var(--border);border-radius:999px;margin:18px 0 8px}
.salary-range-fill{position:absolute;height:8px;background:var(--accent);border-radius:999px;pointer-events:none}
.salary-range-wrap input[type=range]{position:absolute;width:100%;height:8px;top:0;left:0;margin:0;background:transparent;pointer-events:none;-webkit-appearance:none;appearance:none}
.salary-range-wrap input[type=range]::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.15);cursor:pointer}
.salary-range-wrap input[type=range]::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.15);cursor:pointer}
.salary-range-track input[type=range]:last-of-type{z-index:3}
.salary-range-track input[type=range]:first-of-type{z-index:2}
input,select,textarea,button{font-family:var(--font);font-size:14px;color:inherit}
button{cursor:pointer;border:none;background:none;outline:none}
a{color:inherit;text-decoration:none}

/* LAYOUT */
#app{display:flex;height:100vh;overflow:hidden}
@media(max-width:640px){
  #sidebar{width:200px;min-width:200px}
  .page{padding:16px 14px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .span2,.span3{grid-column:span 1}
  .stat-grid{grid-template-columns:1fr 1fr}
  .banner-stats{gap:12px}
  .bstat-val{font-size:18px}
  .detail-panel{width:100%;min-width:0;position:fixed;inset:0;z-index:50;overflow-y:auto}
  .tbl-wrap{font-size:12px}
  th,td{padding:8px 8px}
}
#sidebar{width:228px;min-width:228px;background:var(--card);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
#topbar{height:54px;min-height:54px;background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;gap:12px}
#content{flex:1;overflow-y:auto;overflow-x:auto}

/* SIDEBAR */
.sb-brand{padding:18px 18px 14px;border-bottom:1px solid var(--border)}
.sb-logo{display:flex;align-items:center;gap:10px}
.sb-icon{width:34px;height:34px;background:var(--accent);border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--display);font-weight:700;font-size:13px;flex-shrink:0}
.sb-name{font-family:var(--display);font-weight:600;font-size:14px}
.sb-sub{font-size:10px;color:var(--text3)}
.sb-nav{padding:10px 10px 4px}
.sb-lbl{font-size:10px;font-weight:600;color:var(--text3);letter-spacing:.07em;text-transform:uppercase;padding:0 8px;margin-bottom:3px}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r);color:var(--text2);cursor:pointer;font-size:14px;transition:background-color .12s,border-color .12s,color .12s,box-shadow .12s;margin-bottom:1px;user-select:none}
.nav-item:hover{background:var(--bg);color:var(--text)}
.nav-item.active{background:var(--accent-l);color:var(--accent);font-weight:500}
.nav-icon{width:15px;height:15px;flex-shrink:0;opacity:.55}
.nav-item.active .nav-icon{opacity:1}
.nav-badge{margin-left:auto;background:var(--accent);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;font-family:var(--mono)}
.sb-footer{margin-top:auto;padding:12px;border-top:1px solid var(--border)}
.user-row{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:var(--r2);cursor:pointer;transition:background .12s}
.user-row:hover{background:var(--bg)}
.u-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-role{font-size:11px;color:var(--text3)}
.signout{font-size:12px;color:var(--text3);cursor:pointer;padding:3px 2px;transition:color .12s;display:inline-block}
.signout:hover{color:var(--red)}

/* AVATAR */
.av{border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0;font-family:var(--display)}
.av-32{width:32px;height:32px;font-size:12px}
.av-28{width:28px;height:28px;font-size:11px}
.av-40{width:40px;height:40px;font-size:14px}
.av-48{width:48px;height:48px;font-size:16px}
.av-admin{background:#EDE9FE;color:#5B21B6}
.av-bd{background:#DBEAFE;color:#1D4ED8}
.av-ra{background:#DCFCE7;color:#166534}
.av-sp{background:#FCE7F3;color:#9D174D}

/* TOPBAR */
.tb-title{font-family:var(--display);font-weight:600;font-size:15.5px}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.tb-date{font-size:12px;color:var(--text3);font-family:var(--mono)}
.switcher{display:flex;gap:5px;padding:4px 8px;background:var(--bg);border-radius:var(--r2);border:1px solid var(--border)}
.sw-av{cursor:pointer;transition:opacity .12s;border-radius:50%;border:2px solid transparent}
.sw-av:hover{border-color:var(--accent)}
.sw-av.me{border-color:var(--accent)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border-radius:var(--r);font-weight:500;font-size:14px;transition:background-color .12s,border-color .12s,color .12s,box-shadow .12s;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#165F2E}
.btn-outline{background:var(--card);color:var(--text);border:1px solid var(--border2)}
.btn-outline:hover{background:var(--bg)}
.btn-ghost{color:var(--text2)}
.btn-ghost:hover{background:var(--bg);color:var(--text)}
.btn-danger{background:var(--red-l);color:var(--red);border:1px solid rgba(220,38,38,.15)}
.btn-danger:hover{background:#FCA5A5}
.btn-sm{padding:5px 11px;font-size:13px}
/* Email preview panel — visible only on very wide screens */
.email-preview-panel{width:360px;flex-shrink:0;display:block}
@media(max-width:1380px){.email-preview-panel{display:none !important}}
.tab{padding:9px 18px;font-size:14px;font-weight:500;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;transition:background-color .15s,border-color .15s,color .15s;user-select:none;white-space:nowrap}
.tab:hover{color:var(--text);background:var(--bg);border-radius:var(--r) var(--r) 0 0}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.btn-xs{padding:3px 8px;font-size:12px}
.btn-icon{width:28px;height:28px;padding:0;border-radius:var(--r);display:inline-flex;align-items:center;justify-content:center;color:var(--text3)}
.btn-icon:hover{background:var(--bg);color:var(--text)}

/* CARDS */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r3);box-shadow:var(--sh)}
.cp{padding:20px 22px}

/* BADGE */
.bdg{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:12px;font-weight:500;white-space:nowrap}
.bdg-blue{background:var(--accent-l);color:var(--accent)}
.bdg-green{background:var(--green-l);color:var(--green)}
.bdg-amber{background:var(--amber-l);color:var(--amber)}
.bdg-red{background:var(--red-l);color:var(--red)}
.bdg-purple{background:var(--purple-l);color:var(--purple)}
.bdg-teal{background:var(--teal-l);color:var(--teal)}
.bdg-gray{background:var(--bg);color:var(--text2)}

/* STAGE */
.st-Active{background:#DCFCE7;color:#15803D}
.st-No_Response{background:#FEF9C3;color:#A16207}
.st-Negative{background:#FEE2E2;color:#B91C1C}
.st-Positive{background:#D1FAE5;color:#065F46}
.st-Connected{background:#DBEAFE;color:#1D4ED8}
.st-Future{background:#EDE9FE;color:#6D28D9}
.st-Out_of_Office{background:#E0F2FE;color:#0369A1}
.st-Deactivated{background:#F1F5F9;color:#64748B}
.st-Referred{background:#FDF4FF;color:#9333EA}

/* INPUTS */
/* A modal's own heading and tab row. These carried their sizes inline, which is
   why the phone could not re-scale them against its 16px inputs — an inline
   font-size is as unreachable to a stylesheet as an inline colour or width.
   Declared here at exactly the sizes they already had, so desktop is unchanged;
   mobile.css lifts them. */
.mhd{font-weight:700;font-size:16px}
.mtab{padding:8px 14px;border:0;background:none;cursor:pointer;font-size:13px}
.inp{background:var(--card);border:1px solid var(--border2);border-radius:var(--r);padding:8px 11px;color:var(--text);outline:none;width:100%;transition:border-color .12s,box-shadow .12s;font-size:14px}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(30,122,60,.12)}
.sel{background:var(--card);border:1px solid var(--border2);border-radius:var(--r);padding:7px 11px;color:var(--text);outline:none;cursor:pointer;width:100%;transition:border-color .12s;font-size:14px}
.sel:focus{border-color:var(--accent)}
.sel option{background:#fff}
/* Address chips (R-093): one box, each address a removable chip. */
.chipf{display:flex;flex-wrap:wrap;gap:4px;align-items:center;flex:1;min-width:0;background:var(--card);border:1px solid var(--border2);border-radius:var(--r);padding:4px 8px;cursor:text;transition:border-color .12s}
.chipf:focus-within{border-color:var(--accent)}
.chipf-c{display:inline-flex;align-items:center;gap:2px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:1px 3px 1px 9px;font-size:12px;max-width:100%;overflow-wrap:anywhere}
.chipf-c.bad{border-color:var(--red);color:var(--red)}
.chipf-c button{border:0;background:none;color:var(--text3);cursor:pointer;font-size:16px;line-height:1;padding:0 4px}
.chipf-in{flex:1;min-width:120px;border:0;outline:0;background:transparent;color:var(--text);font-size:13px;padding:3px 0}
.txta{background:var(--card);border:1px solid var(--border2);border-radius:var(--r);padding:8px 11px;color:var(--text);outline:none;width:100%;resize:vertical;font-size:14px;line-height:1.6}
.txta:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(30,122,60,.12)}
.flbl{display:block;font-size:12px;font-weight:500;color:var(--text2);margin-bottom:4px}
/* Two form fields side by side. A class, not an inline grid, so a narrow
   screen can put them one above the other — an inline style cannot be
   overridden without !important. */
.fpair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fgrp{display:flex;flex-direction:column;margin-bottom:12px}
.ferr{font-size:11px;color:var(--red);margin-top:3px}

/* TABLE */
.tbl-wrap{overflow-x:auto;border-radius:var(--r3);border:1px solid var(--border);background:var(--card)}
table{width:100%;border-collapse:collapse}
th{background:#F8FAFC;padding:9px 13px;text-align:left;font-size:11px;font-weight:600;color:var(--text3);letter-spacing:.07em;text-transform:uppercase;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:11px 13px;border-bottom:1px solid var(--border);font-size:14px;vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:#FAFBFC}
tr.sel-row td{background:var(--accent-l)}
.td1{font-weight:500}
.td2{font-size:12px;color:var(--text3)}
.td-trunc{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* MODAL */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(2px)}
.modal{background:var(--card);border-radius:var(--r3);box-shadow:var(--sh3);max-width:92vw;max-height:90vh;overflow-y:auto;animation:mIn .18s ease}
@keyframes mIn{from{transform:scale(.95) translateY(8px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.modal-w480{width:480px}
.modal-w640{width:640px}
.modal-w860{width:860px}
.mh{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 14px}
.mt{font-family:var(--display);font-weight:600;font-size:16.5px}
.mb_{padding:0 22px 18px}
.mf{display:flex;justify-content:flex-end;gap:9px;padding:14px 22px;border-top:1px solid var(--border)}

/* TOAST */
.toast-wrap{position:fixed;top:14px;right:14px;z-index:200;display:flex;flex-direction:column;gap:7px;pointer-events:none}
.toast{background:var(--card);border:1px solid var(--border);border-radius:var(--r2);padding:11px 15px;font-size:14px;display:flex;align-items:center;gap:9px;box-shadow:var(--sh2);animation:tIn .2s ease;min-width:260px;max-width:340px;pointer-events:all}
@keyframes tIn{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}

/* GRID */
/* COLUMN-ONLY GRIDS. `.g2`/`.g3` also set a gap, so converting an existing
   inline grid to one of them changes its spacing on every screen. These set
   columns and nothing else, so the caller keeps its own inline gap and NO WIDE
   SCREEN MOVES — the same discipline as `.mhd`/`.mtab` in Session 25. They
   collapse to one column on a phone (mobile.css), which an inline
   `grid-template-columns` can never do. */
.gc2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.gc3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.gc4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.span2{grid-column:span 2}
.span3{grid-column:span 3}
.flex{display:flex}.aic{align-items:center}.jb{justify-content:space-between}.jc{justify-content:center}
.gap1{gap:4px}.gap2{gap:8px}.gap3{gap:12px}.gap4{gap:16px}
.mt1{margin-top:4px}.mt2{margin-top:8px}.mt3{margin-top:12px}.mt4{margin-top:16px}.mt5{margin-top:20px}.mt6{margin-top:24px}
.mb2{margin-bottom:8px}.mb3{margin-bottom:12px}.mb4{margin-bottom:16px}.mb5{margin-bottom:20px}
.w100{width:100%}.fw5{font-weight:500}.fw6{font-weight:600}
.f12{font-size:12px}.f13{font-size:13px}.f11{font-size:11px}.text3{color:var(--text3)}.text2{color:var(--text2)}
.hr{height:1px;background:var(--border);margin:14px 0}
.page{padding:22px 26px}
.ph{margin-bottom:18px}
.ptitle{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.3px}
.psub{font-size:13px;color:var(--text3);margin-top:2px}
.empty{text-align:center;padding:56px 20px;color:var(--text3)}
.empty-ico{width:48px;height:48px;background:var(--bg);border-radius:var(--r2);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.empty-t{font-size:16px;font-weight:600;color:var(--text2);margin-bottom:5px}

/* FILTER CHIPS */
.fc{display:inline-flex;align-items:center;padding:5px 11px;background:var(--card);border:1px solid var(--border2);border-radius:20px;font-size:13px;color:var(--text2);cursor:pointer;transition:background-color .12s,border-color .12s,color .12s,box-shadow .12s}
.fc:hover,.fc.on{background:var(--accent-l);border-color:var(--accent);color:var(--accent)}
.fsel{background:var(--card);border:1px solid var(--border2);border-radius:20px;padding:5px 11px;font-size:13px;color:var(--text2);outline:none;cursor:pointer}
.fsel:focus{border-color:var(--accent)}

/* WELCOME BANNER */
.banner{background:linear-gradient(130deg,#1E7A3C 0%,#3AAE57 100%);border-radius:var(--r3);padding:22px 26px;color:#fff;margin-bottom:18px;position:relative}
.banner::after{content:'';position:absolute;right:-30px;top:-30px;width:180px;height:180px;background:rgba(255,255,255,.06);border-radius:50%}
.banner-name{font-family:var(--display);font-size:20px;font-weight:700}
.banner-sub{font-size:13px;opacity:.82;margin-top:3px}
.banner-stats{display:flex;align-items:center;gap:20px;margin-top:16px;flex-wrap:wrap}
/* The clock. Absolutely positioned so it sits in the banner's top-right corner
   without pushing the greeting down — which is fine while there is room beside
   the greeting, and is exactly why it landed ON TOP of it on a phone. The
   mobile layer puts it back in the flow; this class exists so it can, and so
   the same block is not inline-styled in three dashboards. */
.banner-clock{
  position:absolute;top:16px;right:20px;
  background:rgba(255,255,255,.18);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.3);border-radius:var(--r2);
  padding:10px 16px;text-align:right;
}
.bstat-val{font-family:var(--display);font-size:24px;font-weight:700;line-height:1}
.bstat-lbl{font-size:11px;opacity:.78;margin-top:4px}

/* STAT CARD */
/* The small dashboard/team stat tile. Was three identical inline-styled copies
   whose `min-width:105px` could not be reached from a stylesheet — which is
   how six of them ended up three-to-a-row on a 390px phone with "Awaiting
   approval" running out of its own card. A class can be re-laid-out; an inline
   style cannot. */
.dash-tile{
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;text-align:center;min-width:105px;flex:1;
}
.dash-tile-v{font-size:24px;font-weight:700}
.dash-tile-l{font-size:11px;color:var(--text3);margin-top:2px;white-space:nowrap}

/* Morning briefing — the one-sentence card above the tiles on every dashboard.
   No inline width/grid so it reflows on its own at any viewport. */
.briefing-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r3);
  padding:14px 18px;margin-bottom:16px;display:flex;align-items:flex-start;gap:12px;
}
.briefing-card.is-quiet{background:var(--bg)}
.briefing-card.is-error{border-color:var(--red-l);background:var(--red-l)}
.briefing-ic{flex:none;font-size:18px;line-height:1;margin-top:1px}
.briefing-body{flex:1;min-width:0}
.briefing-text{font-size:14px;font-weight:600;line-height:1.4}
.briefing-sub{font-size:12px;color:var(--text3);margin-top:3px}
.briefing-error .briefing-text{color:var(--red);font-weight:500}
.stat-ico{width:36px;height:36px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.stat-val{font-family:var(--display);font-size:28px;font-weight:700;letter-spacing:-.5px;line-height:1}
.stat-lbl{font-size:12px;color:var(--text3);margin-top:4px}

/* DETAIL PANEL */
.detail-panel{background:var(--card);border-left:1px solid var(--border);width:380px;min-width:380px;display:flex;flex-direction:column;overflow:hidden}
.dp-head{padding:16px 18px;border-bottom:1px solid var(--border)}
.dp-body{flex:1;overflow-y:auto;padding:14px 18px}
.dp-sec{margin-bottom:18px}
.dp-sec-t{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);margin-bottom:9px}
.dp-row{display:flex;gap:8px;margin-bottom:7px;font-size:13px}
.dp-k{color:var(--text3);min-width:100px;flex-shrink:0}
.dp-v{color:var(--text);flex:1;word-break:break-word}
.act-item{display:flex;gap:9px;padding:7px 0;border-bottom:1px solid var(--border)}
.act-item:last-child{border-bottom:none}
.act-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:5px}
.act-txt{font-size:13px}
.act-meta{font-size:12px;color:var(--text3);margin-top:1px}

/* CONTACT PILL */
.cpill{display:flex;align-items:center;gap:7px;padding:6px 9px;background:var(--bg);border-radius:var(--r);margin-bottom:6px;font-size:13px}
.ctype{font-size:11px;background:var(--border);padding:1px 6px;border-radius:4px;color:var(--text3);min-width:46px;text-align:center}

/* INDUSTRY BAR */
.ind-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border)}
.ind-row:last-child{border-bottom:none}
.ind-bg{flex:1;height:5px;background:var(--bg);border-radius:3px;overflow:hidden}
.ind-fill{height:100%;border-radius:3px;transition:width .5s ease}

/* LOGIN */
/* The wrapper SCROLLS (owner, 8 Oct 2026): it used to be a fixed-height box with its overflow hidden, so on a small laptop
   (150% display scaling = a ~590px-tall window) the password box and the Log In button were cut off with no way to reach them.
   `margin:auto` on the card centres it when it fits and lets it start at the top and scroll when it does not (align-items:center
   would cut the top off first). */
.login-wrap{height:100vh;height:100dvh;width:100vw;display:flex;padding:24px;position:relative;overflow-x:hidden;overflow-y:auto;background:#e8f5ee;box-sizing:border-box}
.login-card{background:var(--card);border:1px solid var(--border);border-radius:20px;box-shadow:var(--sh3);width:100%;max-width:360px;overflow:visible;margin:auto;flex:none}
.login-top{background:linear-gradient(130deg,#1E7A3C 0%,#3AAE57 100%);padding:24px 28px 20px;color:#fff;border-radius:20px 20px 0 0}
.login-body{padding:22px 28px 26px;border-radius:0 0 20px 20px}
.google-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:10px;border:1.5px solid var(--border2);border-radius:var(--r2);background:var(--card);font-size:14px;font-weight:500;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s;margin-bottom:14px}
.google-btn:hover{background:var(--bg);border-color:var(--accent)}
.or-div{display:flex;align-items:center;gap:10px;margin:14px 0;font-size:12px;color:var(--text3)}
.or-div::before,.or-div::after{content:'';flex:1;height:1px;background:var(--border)}
.demo-picks{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}

/* EMAIL */
.email-card{background:var(--bg);border-radius:var(--r2);padding:13px;margin-bottom:9px}
.email-subj{font-weight:500;font-size:14px}
.email-prev{font-size:13px;color:var(--text3);margin-top:4px;line-height:1.5}

/* BAR CHART */
.bar-chart{display:flex;align-items:flex-end;gap:7px;height:80px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center}
.bar-fill{width:100%;border-radius:4px 4px 0 0;transition:height .4s ease;min-height:3px}
.bar-lbl{font-size:11px;color:var(--text3);margin-top:4px;text-align:center}

/* Outreach Generator (Email → Generator): the form and the finished email sit
   side by side, but below ~1000px that gives each of them a column too narrow
   to paste a job description into, so they stack. */
@media (max-width:1000px){ .og-grid{grid-template-columns:1fr !important} }

/* ── REMINDERS ──────────────────────────────────────────────────────────────
   Colour is a scarce resource on a LIST (Session 24). The first version of
   these cards gave every overdue row a 2px red border, a solid red pill and a
   red-tinted panel. That reads fine as one card and turns the whole screen red
   at five or six — which is exactly what the owner reported: "too much red...
   after 5,6 reminders the screen will look reddish."

   Overdue is the ordinary state of a to-do list, not a fault, and red should
   mean something has gone wrong. So the list is calm by default — a neutral
   card on the normal surface — and state is carried by a 3px left stripe plus
   ONE tinted chip. Red is not used on this page at all.

   These are CLASSES, not inline styles, for the two standing reasons: an
   inline colour cannot be re-themed, and an inline layout cannot be re-laid-out
   on a phone. Every colour below is a token, so theme.css reaches all of it. */
.rem-card{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--border2);
  border-radius:var(--r2);padding:13px 16px;margin-bottom:10px}
.rem-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:5px}
.rem-who{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.rem-name{font-weight:600;font-size:14px;color:var(--text)}
.rem-acts{display:flex;gap:8px;flex-shrink:0}
.rem-pill{font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px;white-space:nowrap}
.rem-pill-quiet{background:var(--bg);color:var(--text3);font-weight:500}
.rem-about{font-size:13px;color:var(--text2);font-weight:600}
.rem-meta{font-size:12px;color:var(--text3);margin-top:2px;word-break:break-word}
.rem-note-line{font-size:12px;color:var(--text3);margin-top:7px;display:flex;gap:6px;align-items:flex-start}
.rem-note-line>span:first-child{flex-shrink:0}
.rem-panel{font-size:12px;margin-top:6px;padding:7px 9px;background:var(--bg);
  border-radius:var(--r);color:var(--text2)}
/* A missing phone number is a gap in a record, not a failure — amber TEXT on
   the same recessed panel, never its own coloured slab. */
.rem-panel-warn{color:var(--amber)}
.rem-reach{font-size:13px;margin-top:7px;font-weight:600;color:var(--text2);word-break:break-word}
/* A quiet strip, not an alarm. It sits above a list of ordinary work; a tinted
   slab with a 1.5px border set the tone for the screen before a card was read. */
.rem-banner{padding:2px 0 14px;margin-bottom:4px;border-bottom:1px solid var(--border)}
.rem-banner-t{font-weight:600;font-size:14px;color:var(--text)}
.rem-banner-s{font-size:12px;color:var(--text3);margin-top:2px}

/* Dashboard → Reminders card (R-071): the same rows, in brief. ONE tinted chip
   carries the state (no dot, no solid amber button — the old row painted three
   ambers), tokens only so both themes reach it, and a class rather than an
   inline flex so the actions can wrap under the name on a phone. */

/* ── TEAM REVIEW (D-0020) ────────────────────────────────────────────────────
   A manager's own list stays their own; what is open beneath them is a count
   with this screen behind it. Read-only by construction — the only action is
   "Ask them", which puts a note on the OWNER's list rather than closing
   anything. Classes, not inline styles, for the two standing reasons. */
.na-team{max-width:640px;width:100%}
.na-team-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--border)}
.na-team-title{font-weight:700;font-size:16px;color:var(--text)}
.na-team-hint{font-size:12px;color:var(--text3);margin-top:3px}
.na-team-body{max-height:60vh;overflow:auto}
.na-team-row{display:flex;align-items:flex-start;gap:12px;padding:11px 20px;
  border-bottom:1px solid var(--border)}
.na-team-main{flex:1;min-width:0}
.na-team-t{font-size:14px;font-weight:600;color:var(--text)}
.na-team-sub{font-weight:400;color:var(--text3)}
.na-team-who{font-size:12px;color:var(--text2);margin-top:2px;font-weight:600}
.na-team-note{font-size:12px;color:var(--text3);margin-top:4px;white-space:pre-wrap}
.na-team-empty{padding:26px 20px;text-align:center;font-size:13px;color:var(--text3)}
@media (max-width:860px){ .na-team-row{flex-wrap:wrap} }

/* ── Didn't send (Session 29, R-036) ─────────────────────────────────────
   Failed emails stay on the Pending tab with their reason and a Retry.
   Calm by default (D-0019): neutral card, a 3px stripe, no red ground. */
.failed-panel{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--amber);border-radius:var(--r2);margin-bottom:14px;overflow:hidden}
.failed-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border)}
.failed-title{font-weight:700;font-size:14px;color:var(--text)}
.failed-sub{font-size:12px;color:var(--text3);margin-top:2px}
.failed-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border2)}
.failed-row:last-child{border-bottom:0}
.failed-acts{display:flex;gap:8px;flex-shrink:0;align-items:center}
.failed-main{min-width:0;flex:1}
.failed-to{font-size:13px;font-weight:600;color:var(--text);overflow-wrap:anywhere}
.failed-job{font-weight:400;color:var(--text3);font-size:12px}
.failed-why{font-size:12px;color:var(--text2);margin-top:2px}
.failed-note{font-size:12px;color:var(--text3);margin-top:2px}
.retry-chip{font-size:10px;padding:2px 7px;background:var(--amber-l);color:var(--amber);border-radius:6px;font-weight:600;margin-left:6px;white-space:nowrap}
@media (max-width:860px){.failed-row{flex-wrap:wrap}.failed-row .btn{min-height:40px}}

/* AI-written / will-be-written marker on Email rows (D-0032). One quiet chip. */
.ai-chip{font-size:10px;padding:2px 7px;background:var(--accent-l);color:var(--accent);border-radius:6px;font-weight:600;margin-left:6px;white-space:nowrap}

/* R-040 — provider-reported AI limits on the Integrations AI card. */
.ail{margin-top:12px;border-top:1px solid var(--border);padding-top:10px}
.ail-head{font-weight:600;font-size:12px;margin-bottom:6px;color:var(--text)}
.ail-row{padding:6px 0;border-bottom:1px solid var(--border2)}
.ail-row:last-child{border-bottom:0}
.ail-name{font-size:12px;font-weight:600;color:var(--text)}
.ail-name span{font-weight:400;color:var(--text3);font-size:11px;margin-left:4px}
.ail-line{font-size:12px;color:var(--text2);margin-top:2px}
.ail-line.is-low{color:var(--amber)}
.ail-none,.ail-at{font-size:11px;color:var(--text3);margin-top:2px}

/* Lead details block in the lead window (Session 29). Rows on a quiet grid. */
.ld{margin-bottom:18px;border:1px solid var(--border2);border-radius:10px;padding:12px 14px;background:var(--bg3)}
.ld-h{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.ld-h2{margin-top:12px}
.ld-row{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:4px 0;font-size:13px}
.ld-k{color:var(--text3)}
.ld-v{color:var(--text);overflow-wrap:anywhere}
.ld-none{color:var(--text3);font-style:italic}
.ld-link{color:var(--accent);text-decoration:none}
.ld-link:hover{text-decoration:underline}
@media (max-width:860px){.ld-row{grid-template-columns:1fr;gap:0}.ld-k{font-size:12px}}

/* ── "Ask to take over" (R-047, D-0036/D-0037/D-0038) ─────────────────────── */
/* Calm by construction: no red anywhere in this block (D-0019) — a request is
   a normal workflow step, not a fault. */
.ot-slot{display:inline-block}
.ot-ask{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px}
.ot-decides{font-size:11px;color:var(--text3)}
.ot-pending{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ot-pending-lbl{font-size:12px;color:var(--text2);font-weight:600}
.ot-check{font-size:13px;color:var(--text3);padding:4px 0}
.ot-check.ot-blocked{color:var(--amber)}
.ot-label{font-size:11px;color:var(--text2);display:block;margin:10px 0 4px}
.ot-decides-line{font-size:13px;color:var(--text2);margin-bottom:10px}
.ot-dup-link{color:var(--accent);text-decoration:none;font-weight:600}
.ot-dup-link:hover{text-decoration:underline}
.ot-summary{padding:12px 14px}

.ot-panel{max-width:640px;width:100%}
.ot-tabs{display:flex;gap:0;padding:0 20px;border-bottom:1px solid var(--border)}
.ot-tab{padding:10px 4px;margin-right:18px;font-size:13px;font-weight:600;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent}
.ot-tab.on{color:var(--text);border-bottom-color:var(--accent)}
.ot-body{max-height:60vh;overflow:auto}
.ot-row{padding:12px 20px;border-bottom:1px solid var(--border2);border-left:3px solid transparent}
.ot-row.st-pending{border-left-color:var(--accent)}
.ot-row.st-approved{border-left-color:var(--green)}
.ot-row.st-declined,.ot-row.st-withdrawn,.ot-row.st-cancelled{border-left-color:var(--text3)}
.ot-row-t{font-size:14px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ot-row-sub{font-size:12px;color:var(--text3);margin-top:2px}
.ot-row-note{font-size:12px;color:var(--text2);margin-top:4px;white-space:pre-wrap}
.ot-row-acts{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.ot-decline-box{margin-top:8px}
.ot-empty{padding:26px 20px;text-align:center;font-size:13px;color:var(--text3)}
.ot-chip{font-size:11px;font-weight:700;padding:2px 8px;border-radius:8px}
.ot-chip.pending{background:var(--accent-l);color:var(--accent)}
.ot-chip.approved{background:var(--green-l);color:var(--green)}
.ot-chip.declined,.ot-chip.withdrawn,.ot-chip.cancelled{background:var(--bg);color:var(--text3);border:1px solid var(--border2)}
@media (max-width:860px){
  .ot-row-acts .btn{min-height:40px}
  .ot-tabs{padding:0 14px}
}

/* ── The stage-move window (33-stage-modal.js): header / body / footer, the
   "left out" note and the per-person result panel. Tokens only, so it re-themes. */
.stg-hd{padding:16px 20px;border-bottom:1px solid var(--border)}
.stg-who{font-size:13px;color:var(--text2);margin-top:3px;line-height:1.4}
.stg-job{font-size:12px;color:var(--text3);margin-top:2px}
.stg-bd{padding:16px 20px;max-height:62vh;overflow-y:auto}
.stg-ft{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
.stg-err{font-size:13px;color:var(--red);margin-top:8px;min-height:0}
.stg-err:empty{display:none}
.stg-p{font-size:13px;color:var(--text2);line-height:1.5;margin:0 0 10px}
.stg-left{border:1px solid var(--border);border-left:3px solid var(--amber);border-radius:8px;padding:10px 12px;margin-bottom:12px}
.stg-left-t{font-size:13px;font-weight:700;color:var(--text)}
.stg-left-b{font-size:13px;color:var(--text2);line-height:1.45;margin-top:3px}
.stg-left-act{margin-top:8px}
.stg-res-t{font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stg-res-h{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;margin:12px 0 4px}
.stg-res-h:first-child{margin-top:0}
.stg-res-names{font-size:13px;color:var(--text);line-height:1.5}
.stg-res-list{display:flex;flex-direction:column;gap:6px}
.stg-res-row{border:1px solid var(--border);border-radius:8px;padding:8px 10px}
.stg-res-nm{font-size:13px;font-weight:600;color:var(--text)}
.stg-res-why{font-size:13px;color:var(--text2);margin-top:2px;line-height:1.4}
.stg-res-inv{font-size:13px;color:var(--text2);margin-top:12px}
.stg-pick{max-width:200px}

/* ── Windows: minimise / full screen / close, and the tray of parked ones
   (10a-window-dock.js, R-078/R-079). Tokens only, so it re-themes; the tray and
   the bar sit on --card-solid because they float over content. */
.winbar{position:relative}
.win-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:4px 6px 4px 14px;background:var(--card-solid);border-bottom:1px solid var(--border);min-height:34px}
.win-t{font-size:12px;font-weight:600;color:var(--text3);min-width:0;line-height:1.25;letter-spacing:.02em}   /* wraps, never clips — a long title beside three buttons on a phone */
.win-b{display:flex;gap:2px;flex:none}
.win-b button{width:28px;height:28px;border:0;background:transparent;border-radius:6px;cursor:pointer;color:var(--text2);
  font-size:16px;line-height:1;font-family:inherit;padding:0;transition:background-color .12s,color .12s}
.win-b button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media (hover:hover) and (pointer:fine){
  .win-b button:hover{background:var(--bg);color:var(--text)}
  .win-chip:hover{border-color:var(--accent)}
  .win-chip .wx:hover{background:var(--bg);color:var(--text)}
}
.overlay.win-max{padding:0;align-items:stretch;justify-content:stretch}
.overlay.win-max .modal{width:100vw!important;max-width:100vw!important;height:100vh;max-height:100vh!important;border-radius:0}
#win-tray{position:fixed;left:76px;bottom:12px;z-index:120;display:flex;gap:8px;flex-wrap:wrap;max-width:calc(100vw - 92px)}
.win-chip{display:flex;align-items:center;gap:6px;background:var(--card-solid);border:1px solid var(--border);border-radius:10px;
  padding:5px 4px 5px 12px;box-shadow:var(--sh3);cursor:pointer;max-width:230px;transition:border-color .12s}
.win-chip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.win-chip .wt{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win-chip .wx{width:22px;height:22px;border:0;background:transparent;border-radius:6px;cursor:pointer;color:var(--text3);font-size:16px;line-height:1;padding:0;flex:none}

/* ── "From" picker (10b-from-picker.js, R-087) ── */
.from-slot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--text2);margin-bottom:12px}
.from-lbl{font-size:11px;color:var(--text2)}
.from-sel{flex:1;min-width:180px;max-width:100%}
.from-note{font-size:12px;color:var(--text3)}
.from-none{color:var(--amber)}

/* the spam check under the sequence editor (07-page-email.js seqSpamHtml) */
.seq-spam-box{margin-top:10px;padding:10px 12px;border:1px solid var(--border);border-left-width:3px;border-radius:8px}
.seq-spam-box.is-risk{border-color:var(--red)}
.seq-spam-box.is-warn{border-color:var(--amber)}
.seq-spam-box.is-ok{border-color:var(--green)}
.seq-spam-box ul{margin:6px 0 0 16px}