/* ============================================================
   LockLeed — /skillbridge scoped styles
   Loaded only on the SkillBridge occupation directory (see generate_skillbridge.py SB_CSS).
   Tokens come from styles.css :root. Prefix: .sb-
   ============================================================ */

/* ---------- occupation search ---------- */
.sb-filter{max-width:760px;margin:0 auto 26px;}
.sb-filter input{width:100%;padding:16px 18px;border:1px solid var(--line);background:#fff;
  font-family:var(--sans);font-size:16px;color:var(--ink);}
.sb-filter input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-l);}
.sb-filter__count{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-3);
  margin-top:10px;text-align:center;min-height:1.2em;}

/* ---------- occupation grid ---------- */
.sb-occs{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);}
.sb-occ{background:#fff;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;
  gap:14px;transition:background .15s;}
.sb-occ:hover{background:var(--soft);}
.sb-occ__n{font-size:14px;font-weight:500;color:var(--ink);line-height:1.35;}
.sb-occ:hover .sb-occ__n{color:var(--red);}
.sb-occ__c{font-family:var(--mono);font-size:12px;color:var(--ink-3);flex:none;
  background:var(--soft-2);padding:3px 9px;}
.sb-occ[hidden]{display:none;}
.sb-empty{text-align:center;color:var(--ink-2);font-size:15px;padding:34px 0 0;}
.sb-empty[hidden]{display:none;}
.sb-empty a{color:var(--red);font-weight:600;text-decoration:underline;}

/* ---------- industry chips ---------- */
.sb-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
.sb-chip{font-family:var(--mono);font-size:11px;letter-spacing:.03em;background:var(--soft-2);
  color:var(--ink-2);padding:6px 11px;border:1px solid var(--line);}

/* ---------- program table ---------- */
/* Wide table on a phone: scroll it inside its own box rather than letting the page scroll
   sideways. -webkit-overflow-scrolling keeps it from feeling stuck on iOS. */
.sb-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  background:#fff;}
.sb-table{width:100%;border-collapse:collapse;font-size:14px;min-width:660px;}
.sb-table th{text-align:left;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:13px 16px;
  border-bottom:1px solid var(--line);background:var(--soft);position:sticky;top:0;z-index:1;}
.sb-table td{padding:12px 16px;border-bottom:1px solid var(--soft-2);vertical-align:top;
  line-height:1.5;color:var(--ink-2);}
.sb-table tbody tr:last-child td{border-bottom:none;}
.sb-table tbody tr:nth-child(even){background:#FCFDFE;}
.sb-table td:first-child{font-weight:600;color:var(--ink);}
.sb-table td:nth-child(3),.sb-table td:nth-child(4){font-size:13px;color:var(--ink-3);}

/* ---------- the honesty block ---------- */
/* Deliberately prominent rather than a footnote: these pages republish government data and
   must not read as if LockLeed runs SkillBridge or can grant eligibility. */
.sb-note{margin-top:30px;background:var(--soft);border:1px solid var(--line);
  border-left:3px solid var(--ink-4);padding:22px 26px;}
.sb-note p{font-size:13.5px;line-height:1.7;color:var(--ink-2);}
.sb-note p + p{margin-top:12px;}
.sb-note strong{color:var(--ink);font-weight:600;}
.sb-note a{color:var(--red);font-weight:600;text-decoration:underline;}
.sb-note__stamp{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--ink-3);
  border-top:1px solid var(--line);padding-top:12px;}

@media (max-width:700px){
  .sb-occs{grid-template-columns:1fr;}
  .sb-note{padding:18px 18px;}
  .sb-table th,.sb-table td{padding:10px 12px;}
}

/* ---------- A–Z employer nav ---------- */
.sb-az{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line);}
.sb-az a,.sb-az__on{flex:1 1 auto;min-width:42px;text-align:center;padding:11px 6px;background:#fff;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--ink-2);}
.sb-az a:hover{background:var(--soft);color:var(--red);}
.sb-az__on{background:var(--red);color:#fff;font-weight:500;}
.sb-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
/* A row linked from an occupation table is reached via #slug — highlight it so the visitor can
   see which of several hundred rows they were sent to. */
.sb-table tr:target{background:var(--red-l);scroll-margin-top:90px;}
.sb-table tr:target td:first-child{box-shadow:inset 3px 0 0 var(--red);}