/* ===== SealPal SOC step (soc-tool.js, Beta 2.1): matches with Level I–IV wages for the worksite ===== */
.soc-list{display:grid;gap:10px;margin:14px 0 0;padding:0;list-style:none}
.soc-row{display:grid;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-panel)}
.soc-row.picked{border-color:var(--brand,#1570e6);box-shadow:0 0 0 1px var(--brand,#1570e6) inset}
.soc-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.soc-code{font:600 14px ui-monospace,SFMono-Regular,Menlo,monospace}
.soc-name{font-weight:600}
.soc-levels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.soc-levels span{display:grid;gap:2px;padding:8px 10px;border-radius:var(--radius-inset);background:rgba(127,127,127,.08)}
.soc-levels span.on{box-shadow:0 0 0 2px var(--brand,#1570e6) inset}
.soc-levels small{font-size:11.5px;color:var(--muted)}
.soc-levels b{font-size:14px;font-variant-numeric:tabular-nums}
.soc-ok,.soc-low,.soc-err{margin:0;font-size:13px}
.soc-low,.soc-err{color:#b3261e}
html[data-theme=night] .soc-low,html[data-theme=night] .soc-err{color:#ff9a8f}
.soc-actions{display:flex;align-items:center;gap:14px}
.soc-copy{padding:0;border:0;background:none;cursor:pointer}
.soc-where{display:flex;align-items:center;gap:6px;margin:14px 0 0;font-size:13px;color:var(--muted)}
.soc-where svg{width:16px;height:16px}
@media (max-width:560px){.soc-levels{grid-template-columns:repeat(2,minmax(0,1fr))}}