/* CareerXchange shared UI layer (docs/features/63 §4.2, §7). Tokens + responsive components. Loaded on every public page after style2.css. */
:root{
  --cx-primary:#2563eb;--cx-primary-dark:#1d4ed8;--cx-accent:#dd6b20;--cx-ink:#111827;--cx-muted:#6b7280;--cx-line:#e5e7eb;--cx-bg:#f7f8fb;--cx-card:#ffffff;
  --cx-ok:#2e7d32;--cx-warn:#b45309;--cx-danger:#c62828;
  --cx-s1:4px;--cx-s2:8px;--cx-s3:12px;--cx-s4:16px;--cx-s5:24px;--cx-s6:32px;
  --cx-t1:12px;--cx-t2:14px;--cx-t3:16px;--cx-t4:18px;--cx-t5:22px;--cx-t6:28px;
  --cx-radius:12px;--cx-shadow:0 6px 24px rgba(17,24,39,.08);--cx-tap:44px;
  --cx-safe-bottom:env(safe-area-inset-bottom,0px);
}
html{-webkit-text-size-adjust:100%}
*{box-sizing:border-box}
img,video{max-width:100%;height:auto}
input,select,textarea,button{font-size:16px}          /* ≥16px stops iOS zoom */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.cx-hide{display:none!important}
.cx-only-mobile{display:none}.cx-only-desktop{display:initial}
@media(max-width:767.98px){.cx-only-mobile{display:initial}.cx-only-desktop{display:none!important}}
/* --- table → scroll / cards */
.table-scroll,.cx-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
@media(max-width:767.98px){
  .cx-card-list table,.cx-card-list thead{display:block}
  .cx-card-list thead{display:none}
  .cx-card-list tbody,.cx-card-list tr,.cx-card-list td{display:block;width:100%}
  .cx-card-list tr{background:var(--cx-card);border:1px solid var(--cx-line);border-radius:var(--cx-radius);margin:0 0 var(--cx-s3);padding:var(--cx-s3)}
  .cx-card-list td{padding:4px 0;border:0}
  .cx-card-list td[data-label]::before{content:attr(data-label) ": ";color:var(--cx-muted);font-size:var(--cx-t1);text-transform:uppercase;letter-spacing:.03em}
}
/* --- tap targets */
.cx-btn,.cx-tab,.cx-nav-dot,.cx-choice{min-height:var(--cx-tap)}
@media(max-width:767.98px){.cx-btn{min-height:var(--cx-tap);padding:10px 14px}.cx-actions{flex-wrap:wrap}}
/* --- off-canvas nav drawer (public header) */
.cx-nav-backdrop{position:fixed;inset:0;background:rgba(17,24,39,.5);z-index:1090;opacity:0;pointer-events:none;transition:opacity .2s}
.cx-nav-drawer{position:fixed;top:0;bottom:0;right:0;width:min(84vw,340px);background:var(--cx-card);z-index:1100;transform:translateX(100%);transition:transform .25s;box-shadow:var(--cx-shadow);display:flex;flex-direction:column;padding:var(--cx-s4);padding-bottom:calc(var(--cx-s4) + var(--cx-safe-bottom));overflow:auto}
.cx-nav-drawer.left{right:auto;left:0;transform:translateX(-100%)}
body.cx-drawer-open .cx-nav-backdrop{opacity:1;pointer-events:auto}
body.cx-drawer-open .cx-nav-drawer[data-open="1"]{transform:none}
body.cx-drawer-open{overflow:hidden}
.cx-nav-drawer .cx-drawer-head,.cx-sheet .cx-drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--cx-s3)}
.cx-drawer-close{background:none;border:0;font-size:24px;line-height:1;min-width:var(--cx-tap);min-height:var(--cx-tap)}
.cx-nav-drawer nav ul{list-style:none;margin:0;padding:0}
.cx-nav-drawer nav li a{display:block;padding:12px 8px;border-bottom:1px solid var(--cx-line);color:var(--cx-ink);font-size:var(--cx-t3);text-decoration:none}
.cx-nav-drawer nav li a.active{color:var(--cx-primary);font-weight:600}
/* --- bottom sheet: any .cx-modal becomes a sheet on small screens */
@media(max-width:767.98px){
  .cx-modal{align-items:flex-end!important}
  .cx-modal .cx-modal-sheet{border-radius:16px 16px 0 0!important;max-width:100%!important;max-height:92vh;padding-bottom:calc(var(--cx-s4) + var(--cx-safe-bottom));animation:cx-sheet-up .22s ease-out}
  .cx-modal .cx-modal-sheet::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:#d1d5db;margin:-6px auto 12px}
}
@keyframes cx-sheet-up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.cx-sheet{position:fixed;left:0;right:0;bottom:0;background:var(--cx-card);border-radius:16px 16px 0 0;box-shadow:var(--cx-shadow);z-index:1100;padding:var(--cx-s4);padding-bottom:calc(var(--cx-s4) + var(--cx-safe-bottom));transform:translateY(100%);transition:transform .25s;max-height:92vh;overflow:auto}
.cx-sheet[data-open="1"]{transform:none}
/* --- bottom action bar (sticky CTA) */
.cx-action-bar{position:sticky;bottom:0;z-index:50;background:var(--cx-card);border-top:1px solid var(--cx-line);padding:var(--cx-s3) var(--cx-s4);padding-bottom:calc(var(--cx-s3) + var(--cx-safe-bottom));display:flex;gap:var(--cx-s2);align-items:center}
.cx-action-bar .grow{flex:1}
@media(min-width:768px){.cx-action-bar.cx-mobile-only{position:static;border:0;padding:0;background:transparent}}
/* --- skeletons */
.cx-skeleton{position:relative;overflow:hidden;background:#e9ecf1;border-radius:8px;min-height:14px}
.cx-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:cx-shimmer 1.2s infinite}
.cx-skeleton-card{padding:var(--cx-s4);border:1px solid var(--cx-line);border-radius:var(--cx-radius);background:var(--cx-card);margin-bottom:var(--cx-s3)}
.cx-skeleton-line{height:12px;margin:8px 0}.cx-skeleton-line.w50{width:50%}.cx-skeleton-line.w80{width:80%}
@keyframes cx-shimmer{to{transform:translateX(100%)}}
/* --- offline banner + install prompt */
.cx-offline{display:none;background:#b45309;color:#fff;text-align:center;padding:6px 12px;font-size:var(--cx-t2)}
body.cx-is-offline .cx-offline{display:block}
.cx-install{position:fixed;left:12px;right:12px;bottom:calc(12px + var(--cx-safe-bottom));z-index:1080;background:var(--cx-card);border:1px solid var(--cx-line);border-radius:var(--cx-radius);box-shadow:var(--cx-shadow);padding:12px 14px;display:none;align-items:center;gap:12px}
.cx-install[data-show="1"]{display:flex}
.cx-install img{width:40px;height:40px;border-radius:8px}
.cx-install .grow{flex:1;font-size:var(--cx-t2)}
@media(min-width:768px){.cx-install{left:auto;max-width:380px}}
/* --- generic responsive guards */
.wrapper,.container,.cx-wizard,.cx-ats{max-width:100%}
@media(max-width:575.98px){.cx-grid,.cx-grid-2,.cx-cols{grid-template-columns:1fr!important}.cx-row{flex-wrap:wrap}}
/* --- verified badge (doc 61) */
.cx-verified-badge{display:inline-flex;align-items:center;gap:3px;background:#e3f2e6;color:#1b5e20;border-radius:999px;padding:1px 8px;font-size:12px;font-weight:600;vertical-align:middle}
.cx-response{font-size:13px;margin-top:4px}
/* --- reviews (doc 51) */
.cx-stars{display:inline-block;font-size:18px;letter-spacing:2px;background:linear-gradient(90deg,#f5a623 calc(var(--v,0)/5*100%),#d8dce3 0);-webkit-background-clip:text;background-clip:text;color:transparent}
.cx-star-input button{background:none;border:0;font-size:28px;color:#d8dce3;cursor:pointer;padding:0 2px;min-height:0}.cx-star-input.sm button{font-size:20px}.cx-star-input button.on{color:#f5a623}
.cx-dist{display:flex;align-items:center;gap:8px;font-size:13px;margin:2px 0}.cx-dist-bar{flex:1;height:8px;background:#eef1f7;border-radius:4px;overflow:hidden}.cx-dist-bar span{display:block;height:100%;background:#f5a623}
.cx-review{margin:10px 0}.cx-response-block{background:#f7f8fb;border-left:3px solid var(--cx-primary);padding:8px 12px;border-radius:6px;margin:8px 0}
.cx-helpful.active{background:#e3f2e6;border-color:#2e7d32}
.cx-sub li{padding:2px 0;font-size:13px}
/* --- salary insights (doc 52) */
.cx-range-row{display:grid;grid-template-columns:80px 1fr 60px;gap:10px;align-items:center;margin:8px 0;font-size:13px}
.cx-range-track{position:relative;height:16px;background:#eef1f7;border-radius:8px}
.cx-range-fill{position:absolute;top:0;height:100%;background:#2b6cb0;border-radius:8px;opacity:.85}.cx-range-fill.cx-range-exp{background:#dd6b20}
.cx-range-fill i{position:absolute;top:-3px;width:3px;height:22px;background:#111;border-radius:2px}
.cx-salary-hint{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}.cx-salary-hint.cx-hint-low{background:#fbe9e7;color:#c62828}.cx-salary-hint.cx-hint-high{background:#e3f2e6;color:#1b5e20}
.cx-ac{position:relative}.cx-ac button{display:block;width:100%;text-align:left;background:#fff;border:1px solid #e5e7eb;border-top:0;padding:8px 10px;cursor:pointer}.cx-ac button:hover{background:#f3f4f6}