/* RowBranch tools · v3. Styles shared by the two free tools (the Egypt hiring cost calculator
   and the Egypt Exposure Check). Tokens, chrome and the shared components are in site.css;
   the tool logic is in /tools/calc.js and /tools/exposure.js. */

/* ---- two-column tool: inputs left, live result right, stacked on phones ---- */
.tool-sec{padding:8px 0 0}
.tool{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.tool-in{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:26px 28px}
.tool-out{background:var(--ink);color:#CFDDDB;border:1px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh-lg);padding:28px;display:flex;flex-direction:column;min-height:100%}
.tool-out>div{display:flex;flex-direction:column;flex:1}
.tool [hidden]{display:none!important}
.tool .field{margin-bottom:16px}
.tool .field:last-child{margin-bottom:0}
.tool .field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:8px;line-height:1.4}
.tool .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tool .bf-in{font-variant-numeric:tabular-nums}
.tool input.bf-in[type="number"]{font-family:var(--mono);font-size:17px}
@media(max-width:820px){.tool{grid-template-columns:1fr}.tool-out{min-height:0}}
@media(max-width:480px){.tool-in,.tool-out{padding:22px 20px}.tool .row2{grid-template-columns:1fr}}

/* ---- employee / contractor switch ---- */
.toggle{display:flex;gap:4px;background:var(--wash);border:1px solid var(--line);border-radius:var(--r-sm);padding:4px;margin-bottom:20px}
.toggle button{flex:1;font-family:var(--sans);font-weight:600;font-size:14.5px;padding:10px 8px;border-radius:9px;border:none;background:transparent;color:var(--muted);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.toggle button:hover{color:var(--ink)}
.toggle button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm)}

/* ---- result panel (dark card) ---- */
.res-head{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#9DB6B4;margin-bottom:8px}
.res-total{font-family:var(--display);font-size:clamp(34px,4vw,42px);font-weight:700;color:#fff;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.res-total-usd{font-family:var(--mono);font-size:13px;color:#E4C079;margin-top:6px;min-height:1.4em}
.res-lines{margin-top:22px;border-top:1px solid rgba(255,255,255,.14);padding-top:14px}
.res-lines .l{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:14.5px;line-height:1.45}
.res-lines .l span:first-child{color:#CFDDDB}
.res-lines .l span:last-child{color:#fff;font-family:var(--mono);font-size:13.5px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.res-lines .l.sub{font-size:13.5px}
.res-lines .l.sub span{color:#9DB6B4}
.res-note{margin-top:auto;padding-top:16px;font-size:13.5px;line-height:1.55;color:#9DB6B4;border-top:1px solid rgba(255,255,255,.14)}
.res-lines+.res-note{margin-top:18px}
.res-cta{margin-top:18px}
.res-cta .btn.solid{width:100%;background:#fff;color:var(--ink)}
.res-cta .btn.solid:hover{background:var(--brass-soft)}

/* ---- exposure level and meter ---- */
.res-level{font-family:var(--display);font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1;color:#fff}
.res-level.critical{color:#FF9A8B}
.res-level.high{color:#FFC27A}
.res-level.medium{color:#E4C079}
.res-level.low{color:#8FDCC0}
.res-count{font-family:var(--mono);font-size:13px;color:#E4C079;margin-top:10px}
.res-meter{display:flex;gap:5px;margin-top:18px}
.res-meter i{height:7px;flex:1;border-radius:999px;background:rgba(255,255,255,.14);transition:background .2s}
.res-meter i.on.critical{background:#FF9A8B}
.res-meter i.on.high{background:#FFC27A}
.res-meter i.on.medium{background:#E4C079}
.res-meter+.res-note{margin-top:22px}

/* ---- findings (rendered by exposure.js) ---- */
.findings{margin-top:28px}
.findings h2{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--brass);font-weight:500;line-height:1.4;margin-bottom:14px}
.finding{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);overflow:hidden;margin-bottom:12px}
.finding.cleared{opacity:.72;box-shadow:none}
.fhead{display:flex;align-items:center;gap:12px;padding:14px 20px;background:var(--wash);border-bottom:1px solid var(--line)}
.fhead .num{font-family:var(--mono);font-size:13px;color:var(--faint)}
.fhead h3{font-size:18px;color:var(--ink);flex:1;line-height:1.15;margin:0}
.hits{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.hits b{color:var(--ink);font-weight:600}
.sev{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;padding:5px 11px;border-radius:999px;white-space:nowrap;border:1px solid}
.sev.critical{background:#FAECE9;color:#B23A2E;border-color:#E5B3AC}
.sev.high{background:#FBF0E2;color:#A5610D;border-color:#E6C79A}
.sev.medium{background:var(--brass-soft);color:var(--brass);border-color:#E0CFA4}
.sev.low,.sev.cleared{background:var(--ok-soft);color:var(--ok);border-color:#AACDC6}
.fbody{display:grid;grid-template-columns:1fr 1fr}
.fbody .exp,.fbody .fix{padding:16px 20px;font-size:14.5px;line-height:1.55}
.fbody .exp{border-right:1px solid var(--line);color:var(--body)}
.fbody .fix{background:var(--wash);color:var(--ink)}
.fbody .lbl{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px}
.fbody .exp .lbl{color:#B23A2E}
.finding.cleared .fbody .exp .lbl{color:var(--ok)}
.fbody .fix .lbl{color:var(--brass)}
.fbody .fix b{color:var(--ink);font-weight:600}
@media(max-width:600px){
  .fbody{grid-template-columns:1fr}
  .fbody .exp{border-right:none;border-bottom:1px solid var(--line)}
  .hits{display:none}
  .fhead{padding:12px 16px}
  .fbody .exp,.fbody .fix{padding:14px 16px}
}

/* ---- "why this matters now" ---- */
.whybar{background:#FAECE9;border:1px solid #E5B3AC;border-radius:var(--r);padding:16px 22px;margin-top:24px;font-size:14.5px;line-height:1.55;color:#7D2018}
.whybar b{color:#5C1810}

/* ---- assumptions / how it works ---- */
.assume{margin-top:24px;max-width:var(--read)}
.assume summary{cursor:pointer;list-style:none;font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--muted);padding:8px 0}
.assume summary::-webkit-details-marker{display:none}
.assume summary::before{content:"+ ";color:var(--brass)}
.assume[open] summary::before{content:"\2013  "}
.assume summary:hover{color:var(--ink)}
.assume .ab{font-size:14px;line-height:1.65;color:var(--body);background:var(--wash);border-radius:var(--r-sm);padding:16px 20px;margin-top:6px}
.assume .ab ul{margin:8px 0 0;padding-left:18px}
.assume .ab li{margin:4px 0}
.assume .ab li::marker{color:var(--brass)}

/* ---- the explanatory article under each tool ---- */
.tool-article{padding:56px 0 40px}
.tool-article .article{padding-bottom:0}
.tool-article .article>*{min-width:0}
.tool-article .prose>h2:first-child{margin-top:0}
.prose .disc{color:var(--muted);font-size:14px;line-height:1.65}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mini{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);padding:22px 24px}
.mini .k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--brass)}
.prose .mini h3{font-size:19px;margin-top:8px}
.prose .mini h3+p{margin-top:6px;font-size:14.5px;line-height:1.55}
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.prose .rel a{display:block;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);padding:18px 20px;transition:transform .18s ease,box-shadow .18s ease,border-color .2s}
.prose .rel a:hover{border-color:var(--brass);transform:translateY(-2px)}
.rel .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--brass)}
.rel h4{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:-.01em;margin-top:8px;line-height:1.3;color:var(--ink)}
@media(max-width:600px){.split,.rel{grid-template-columns:1fr}}
@media(max-width:720px){.tool-article{padding:40px 0 24px}}
@media(prefers-reduced-motion:reduce){.prose .rel a:hover{transform:none}}