/* /solutions/employee-ai-agents v2 (2026-10-04) · the first page on usecase.css, ElevenLabs' use-case layout in our theme
   (build/solutions-v2/GUIDE-UC.md). This file holds the page's gold field and its own scenes only, every class prefixed emp-.
   Hawcx screens are dark (#161618 windows, #1c1c1f cards); the tools Sofia's assistants work in (mail, drive, CRM, meetings, expenses)
   stay light. Cast: Brightline Logistics, Sofia Marin (finance operations), Daniel Park (controller). */

/* ---------- the gold field (build/solutions-v2/PAGES.md row 5) ---------- */
body.elv.pg-emp{
  --sol-field:url(/assets/grain-tile.png) 0 0/128px 128px repeat,radial-gradient(60% 70% at 88% 6%,rgba(255,220,150,.30),rgba(255,220,150,0) 70%),linear-gradient(32deg,#1c1103 0%,#5a3a08 42%,#a8700f 78%,#d79a2b 100%);
  --sol-field-base:#7a4e0c;
  --sol-card-field:url(/assets/grain-tile.png) 0 0/128px 128px repeat,linear-gradient(32deg,#1c1103 0%,#5a3a08 55%,#7a500c 100%);
  --sol-soft:linear-gradient(160deg,#faf4e8 0%,#f2e6cc 100%);
  --sol-soft-base:#f6eddb;
}
body.elv .emp-av-s{background:#3d2f17!important;color:#f1dfb8!important}

/* ---------- jobs · shared bits of the five light tool windows ---------- */
body.elv .emp-tile{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:7px}
body.elv .emp-tile svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.elv .emp-tile--mail{background:#e8effd;color:#1f55c0}
body.elv .emp-tile--drv{background:#e5f3ea;color:#177a43}
body.elv .emp-tile--crm{background:#efeafb;color:#5b3fb8}
body.elv .emp-tile--meet{background:#e3f4f1;color:#0d6f5e}
body.elv .emp-tile--exp{background:#fbefe2;color:#9a4f06}
body.elv .emp-hd-r{margin-left:auto;font-size:12px;color:rgba(28,27,24,.64);overflow:hidden;text-overflow:ellipsis}
body.elv .emp-path{min-width:0;overflow:hidden;text-overflow:ellipsis;color:rgba(28,27,24,.64)}
body.elv .emp-path i{font-style:normal;margin:0 3px;color:rgba(28,27,24,.4)}
body.elv .emp-path b{color:#1c1b18}
body.elv .uc-win .uc-hx{margin-top:14px}

/* 1 · mail: a reply to the carrier with the rate sheet attached */
body.elv .emp-mail-f{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;column-gap:8px;padding:9px 16px;border-bottom:1px solid rgba(0,0,0,.06);font-size:12.5px}
body.elv .emp-mail-f span{color:rgba(28,27,24,.64)}
body.elv .emp-mail-f b{min-width:0;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.elv .emp-ext{padding:1px 8px;border-radius:999px;background:#fbefe2;color:#8a4505;font-style:normal;font-size:11px;line-height:17px}
body.elv .emp-mail-tx{font-size:13px;line-height:20px}
body.elv .emp-att{display:inline-flex;align-items:center;gap:10px;margin-top:12px;padding:7px 14px 7px 8px;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.09)}
body.elv .emp-att-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:7px;background:#e5f3ea;color:#14603a;font:500 9.5px/1 var(--mono);letter-spacing:.04em}
body.elv .emp-att b{display:block;font-weight:400;font-size:12.5px;line-height:17px}
body.elv .emp-att em{display:block;font-style:normal;font-size:11.5px;line-height:16px;color:rgba(28,27,24,.64)}

/* 2 · drive: the close folder, the restricted board pack */
body.elv .emp-drv-ls{padding:4px 16px 0}
body.elv .emp-file{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;column-gap:12px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.06)}
body.elv .emp-file b{display:block;font-weight:400;line-height:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.elv .emp-file em{display:block;font-style:normal;font-size:12px;line-height:17px;color:rgba(28,27,24,.64);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.elv .emp-fi{position:relative;display:grid;place-items:center;width:24px;height:30px;border-radius:4px 8px 4px 4px;margin-left:3px}
body.elv .emp-fi--doc{background:#e8effd;box-shadow:inset 0 0 0 1px rgba(31,85,192,.18)}
body.elv .emp-fi--doc::after{content:"";width:12px;height:9px;background:linear-gradient(#1f55c0,#1f55c0) 0 0/12px 1.5px no-repeat,linear-gradient(#1f55c0,#1f55c0) 0 4px/12px 1.5px no-repeat,linear-gradient(#1f55c0,#1f55c0) 0 8px/8px 1.5px no-repeat}
body.elv .emp-fi--xls{background:#e5f3ea;box-shadow:inset 0 0 0 1px rgba(23,122,67,.2)}
body.elv .emp-fi--xls::after{content:"";width:12px;height:10px;background:linear-gradient(90deg,transparent 5px,#177a43 5px,#177a43 6.5px,transparent 6.5px),linear-gradient(transparent 4px,#177a43 4px,#177a43 5.5px,transparent 5.5px);box-shadow:inset 0 0 0 1.5px #177a43;border-radius:1px}
body.elv .emp-fi--lock{background:#f1f0ee;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
body.elv .emp-fi--lock svg{width:15px;height:15px;fill:none;stroke:#5f5d58;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.elv .emp-file--lock{border-bottom:0}
body.elv .emp-drv-hx{padding-top:0}
body.elv .emp-drv-hx .uc-hx{margin-top:2px}

/* 3 · CRM: the account's activity feed */
body.elv .emp-crm-k{margin-bottom:10px!important;font-size:12px;color:rgba(28,27,24,.64)}
body.elv .emp-act{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:12px}
body.elv .emp-act+.emp-act{margin-top:16px;padding-top:14px;border-top:1px solid rgba(0,0,0,.06)}
body.elv .emp-act-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f1f0ee;color:#5f5d58}
body.elv .emp-act-ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body.elv .emp-act-ic--call{background:#efeafb;color:#5b3fb8}
body.elv .emp-act-t{font-size:12px;line-height:18px;color:rgba(28,27,24,.64)}
body.elv .emp-act-t b{font-weight:500;color:#1c1b18}
body.elv .emp-act-x{margin-top:3px!important;font-size:13px;line-height:19px}
body.elv .emp-act .uc-hx{margin-top:10px}
body.elv .emp-act--old .emp-act-x{color:rgba(28,27,24,.7)}

/* 4 · meetings: the follow-ups from the month-end review */
body.elv .emp-meet-k{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px!important}
body.elv .emp-meet-k span{font-size:13.5px;font-weight:500}
body.elv .emp-meet-k em{font-style:normal;font-size:12px;color:rgba(28,27,24,.64);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.elv .emp-todo{margin:0;padding:0;list-style:none}
body.elv .emp-todo li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;column-gap:12px;padding:9px 0;border-bottom:1px solid rgba(0,0,0,.06)}
body.elv .emp-todo i{width:15px;height:15px;border-radius:4px;box-shadow:inset 0 0 0 1.4px rgba(28,27,24,.3)}
body.elv .emp-todo li>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.elv .emp-todo b{display:flex;align-items:center;gap:6px;font-weight:400;font-size:12px;color:rgba(28,27,24,.64)}
body.elv .emp-mini{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#efe3c8;color:#5a3a08;font-size:9.5px}
body.elv .emp-mini--d{background:#dfe7f3;color:#1f3f73}
body.elv .emp-more{margin-top:8px!important;font-size:12px;color:rgba(28,27,24,.64)}

/* 5 · expenses: Sofia's September travel report */
body.elv .emp-st{margin-left:auto;padding:1px 9px;border-radius:999px;background:#eef3ff;color:#1f55c0;font-size:11.5px;line-height:18px}
body.elv .emp-exp-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid rgba(0,0,0,.07)}
body.elv .emp-exp-top b{display:block;font-weight:500}
body.elv .emp-exp-top em{display:block;font-style:normal;font-size:12px;line-height:17px;color:rgba(28,27,24,.64)}
body.elv .emp-exp-top .emp-exp-sum{font-size:17px;font-weight:400}
body.elv .emp-line{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:12px;padding:9px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:13px}
body.elv .emp-line>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.elv .emp-line em{font-style:normal;font-size:11.5px;color:#177a43;white-space:nowrap}
body.elv .emp-line b{font-weight:400;grid-column:3}

/* ---------- platform · Sofia's page in Hawcx (dark) ---------- */
body.elv .emp-bot{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;background:#1f1f22;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:#d9b56a}
body.elv .emp-bot svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* 1 · rooted in her sign-in */
body.elv .emp-ag-hd{display:flex;align-items:center;gap:12px}
body.elv .emp-ag-hd b{display:block;font-weight:500;font-size:15px;line-height:21px;color:#fff}
body.elv .emp-ag-hd em{display:block;font-style:normal;font-size:12.5px;line-height:18px;color:rgba(255,255,255,.58)}
body.elv .emp-live{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:2px 10px 2px 8px;border-radius:999px;background:rgba(76,196,136,.12);color:#4cc488;font-size:12px;line-height:18px;white-space:nowrap}
body.elv .emp-live i{width:6px;height:6px;border-radius:50%;background:#4cc488}
body.elv .emp-signin{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;column-gap:14px;margin-top:22px;padding:14px 16px;border-radius:12px;background:#1c1c1f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
body.elv .emp-si-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#26262a;color:rgba(255,255,255,.8)}
body.elv .emp-si-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
body.elv .emp-si-tx{min-width:0}
body.elv .emp-si-tx b{display:block;font-weight:400;color:#fff}
body.elv .emp-si-tx em{display:block;font-style:normal;font-size:12.5px;line-height:18px;color:rgba(255,255,255,.58)}
body.elv .emp-si-tag{padding:2px 10px;border-radius:999px;background:rgba(122,167,255,.14);color:#7aa7ff;font-size:12px;line-height:18px;white-space:nowrap}
body.elv .emp-kv{margin:18px 0 0;padding:0 2px}
body.elv .emp-kv>div{display:grid;grid-template-columns:190px minmax(0,1fr);column-gap:16px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06)}
body.elv .emp-kv>div:last-child{border-bottom:0}
body.elv .emp-kv dt{color:rgba(255,255,255,.58)}
body.elv .emp-kv dd{margin:0;color:#fff}
/* 2 · one call checked */
body.elv .emp-chk-hd{display:flex;align-items:center;justify-content:space-between;gap:12px}
body.elv .emp-chk-k{font-size:12.5px;color:rgba(255,255,255,.58)}
body.elv .emp-chk .sol-o{font-size:11px}
body.elv .emp-chk-call{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:10px!important}
body.elv .emp-chk-call .sol-mono{font-size:15px;font-weight:400;color:#fff}
body.elv .emp-chk-call span{font-size:13.5px;color:rgba(255,255,255,.7)}
body.elv .emp-chk-ask{margin-top:12px!important;padding:9px 14px;border-radius:12px;background:#232327;color:#fff;font-size:13px}
body.elv .emp-chk-ask em{margin-left:6px;font-style:normal;font-size:12px;color:rgba(255,255,255,.55)}
body.elv .emp-chk-ls{margin:14px 0 0;padding:0;list-style:none}
body.elv .emp-chk-ls li{display:grid;grid-template-columns:20px 110px minmax(0,1fr);align-items:center;column-gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
body.elv .emp-chk-ls b{font-weight:400;color:#fff}
body.elv .emp-chk-ls span{color:rgba(255,255,255,.72)}
body.elv .emp-chk-ls i{position:relative;display:grid;place-items:center;width:20px;height:20px;border-radius:50%}
body.elv .emp-chk-ls .is-ok i{background:rgba(76,196,136,.16)}
body.elv .emp-chk-ls .is-ok i::after{content:"";width:4px;height:8px;margin-top:-2px;border:solid #4cc488;border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}
body.elv .emp-chk-ls .is-no i{background:rgba(240,164,86,.16)}
body.elv .emp-chk-ls .is-no i::before,body.elv .emp-chk-ls .is-no i::after{content:"";position:absolute;left:5px;top:9.1px;width:10px;height:1.8px;border-radius:1px;background:#f0a456;transform:rotate(45deg)}
body.elv .emp-chk-ls .is-no i::after{transform:rotate(-45deg)}
body.elv .emp-chk-ls .is-no span{color:#f0a456}
body.elv .emp-chk-ls .is-na i{background:rgba(255,255,255,.07)}
body.elv .emp-chk-ls .is-na i::after{content:"";width:8px;height:1.8px;border-radius:1px;background:rgba(255,255,255,.55)}
body.elv .emp-chk-ft{margin-top:12px!important;font-size:12.5px;color:rgba(255,255,255,.58)}
/* 3 · her assistants, each with a pause */
body.elv .emp-mine-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08)}
body.elv .emp-mine-hd b{font-weight:500;font-size:15px;color:#fff}
body.elv .emp-mine-hd span{font-size:12.5px;color:rgba(255,255,255,.58)}
body.elv .emp-mine-r{display:grid;grid-template-columns:36px minmax(0,1fr) auto 30px;align-items:center;column-gap:16px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.06)}
body.elv .emp-mine-n{min-width:0}
body.elv .emp-mine-n b{display:block;font-weight:400;color:#fff}
body.elv .emp-mine-n em{display:block;font-style:normal;font-size:12.5px;line-height:18px;color:rgba(255,255,255,.58);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.elv .emp-mine-c{font-size:12.5px;color:rgba(255,255,255,.62);white-space:nowrap}
body.elv .emp-mine-r--off .emp-bot{color:rgba(255,255,255,.45)}
body.elv .emp-tg{position:relative;width:30px;height:17px;border-radius:999px;background:#3a3a3e}
body.elv .emp-tg::after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25)}
body.elv .emp-tg.is-on{background:#2f7dfa}
body.elv .emp-tg.is-on::after{left:15px}
body.elv .emp-mine-ft{display:flex;align-items:center;gap:6px;margin-top:14px!important;font-size:12.5px;color:#fff}
body.elv .emp-mine-ft i{font-style:normal;color:rgba(255,255,255,.55)}

/* the one passwordless mention (FAQ 6), with its green dot */
body.elv .emp-faq-dot{margin:-2px 6px 0 2px}
body.elv .emp-nw{white-space:nowrap}

/* ---------- breakpoints ---------- */
@media (max-width:1100px){
  body.elv .emp-kv>div{grid-template-columns:170px minmax(0,1fr)}
}
@media (max-width:760px){
  body.elv .emp-mail-f{grid-template-columns:52px minmax(0,1fr) auto;padding:8px 12px}
  body.elv .emp-drv-ls{padding:2px 12px 0}
  body.elv .emp-hd-r{display:none}
  body.elv .emp-st{display:none}
  body.elv .emp-line em{display:none}
  body.elv .emp-meet-k em{display:none}
  body.elv .emp-ag-hd em{white-space:normal}
  body.elv .emp-live{display:none}
  body.elv .emp-signin{grid-template-columns:34px minmax(0,1fr);column-gap:12px;margin-top:16px;padding:12px}
  body.elv .emp-si-ic{width:34px;height:34px}
  body.elv .emp-si-tag{grid-column:2;justify-self:start;margin-top:8px}
  body.elv .emp-kv>div{grid-template-columns:minmax(0,1fr) auto;column-gap:12px}
  body.elv .emp-kv dd{text-align:right}
  body.elv .emp-chk-ls li{grid-template-columns:20px 76px minmax(0,1fr);column-gap:10px}
  body.elv .emp-mine-r{grid-template-columns:32px minmax(0,1fr) 30px;column-gap:12px;row-gap:2px}
  body.elv .emp-mine-r .emp-bot{width:32px;height:32px;grid-row:1 / 3}
  body.elv .emp-mine-c{grid-column:2;grid-row:2;white-space:normal}
  body.elv .emp-mine-r .emp-tg{grid-column:3;grid-row:1 / 3}
}

/* ---------- v3 · get started: the finance assistants' rules, and the setup steps (both Hawcx, dark) ---------- */
body.elv .emp-rules-hd{display:flex;align-items:center;gap:8px;padding-bottom:10px;margin-bottom:4px!important;border-bottom:1px solid rgba(255,255,255,.07);font-size:12.5px;color:rgba(255,255,255,.62);white-space:nowrap}
body.elv .emp-rules-hd .sol-mk{width:20px}
body.elv .emp-rules-hd b{font-weight:500;color:#fff}
body.elv .emp-rules-hd i{font-style:normal;color:rgba(255,255,255,.3)}
body.elv .emp-rule{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06)}
body.elv .emp-rule:last-child{border-bottom:0}
body.elv .emp-rule em{font-style:normal}
body.elv .emp-step{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:12px;align-items:start;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06)}
body.elv .emp-step:last-child{border-bottom:0}
body.elv .emp-step>i{width:18px;height:18px;margin-top:1px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
body.elv .emp-step.is-done>i{position:relative;background:#4cc488;box-shadow:none}
body.elv .emp-step.is-done>i::after{content:"";position:absolute;left:6.5px;top:3.5px;width:4px;height:8px;border:solid #161618;border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}
body.elv .emp-step b{display:block;font-weight:500;color:#fff}
body.elv .emp-step em{display:block;font-style:normal;font-size:12px;line-height:17px;color:rgba(255,255,255,.58)}