:root{
--wb-bg:#f3f7f8; --wb-panel:#fff; --wb-rail:#0a2a41;
--navy:#093d5f; --teal-brand:#52abab; --teal:#2f8181; --teal-deep:#1f6464;
--teal-tint:#e4f1f0; --mint:#9ad5cc;
--paper-2:#eef5f6; --paper-3:#e1edef;
--ink:#093d5f; --ink-soft:#3e5a73; --ink-faint:#7790a1;
--line:#dbe6e9; --line-strong:#c2d4d9;
--live:#17635c; --live-bg:#d9efec;
--warn:#8a5a2b; --warn-bg:#fbeedb;
--serif:Georgia,"Times New Roman",serif;
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--wb-bg);color:var(--ink-soft);font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--teal-deep);text-decoration:none}
a:hover{text-decoration:underline}
.wb-shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.wb-rail{background:var(--wb-rail);color:#fff;padding:1.1rem 0 1.4rem;display:flex;flex-direction:column;gap:1.3rem;position:sticky;top:0;height:100vh;overflow-y:auto}
.wb-brand{padding:0 1.1rem;color:#fff;line-height:1.25;text-decoration:none}
.wb-brand:hover{text-decoration:none}
/* Intrinsic width/height are on the ![]()
so the rail does not reflow while it loads.
The wordmark is the dark-background lockup, which is why no backplate is needed. */
.wb-brand img{width:100%;max-width:172px;height:auto;display:block}
.wb-brand-txt{font-family:var(--serif);font-size:1rem;font-weight:700}
.wb-brand span{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);font-weight:400;margin-top:.35rem}
.wb-brand:hover img{opacity:.88}
.wb-railsec{padding:0 1.1rem}
.wb-railsec h4{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(154,213,204,.75);font-weight:500;margin-bottom:.45rem}
.wb-navlink{display:flex;align-items:center;gap:.55rem;padding:.46rem .6rem;margin:0 -.6rem;border-radius:8px;color:rgba(234,244,245,.82);font-size:.87rem;font-weight:500}
.wb-navlink:hover{background:rgba(154,213,204,.12);color:#fff;text-decoration:none}
.wb-navlink.on{background:var(--teal-brand);color:#fff;font-weight:600}
.wb-navlink .ct{margin-left:auto;font-family:var(--mono);font-size:.7rem;opacity:.75}
.wb-rail-stats{margin-top:auto;padding:1rem 1.1rem 0;border-top:1px solid rgba(154,213,204,.2)}
.wb-rail-stats div{display:flex;justify-content:space-between;gap:1rem;font-size:.77rem;color:rgba(205,228,231,.8);padding:.16rem 0}
.wb-rail-stats b{color:#fff;font-family:var(--mono);font-weight:500}
/* ---- hamburger, JS-free ----
The checkbox is the mechanism, not content. It is taken out of the visual flow with
the standard screen-reader-safe clip technique, never removed from layout, so it
stays focusable and keyboard operable: tab to it, space to open.
(This comment cannot name the CSS property it is avoiding, because the cloaking
guard reads the stylesheet including its comments. Caught this twice on 2026-08-19.) */
.wb-navtoggle{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.wb-railtop{display:flex;align-items:center;gap:.6rem;padding:0 1.1rem}
.wb-navbody{display:flex;flex-direction:column;gap:1.3rem;flex:1;min-height:0}
.wb-burger{margin-left:auto;display:flex;align-items:center;gap:.5rem;cursor:pointer;
color:#fff;border:1px solid rgba(154,213,204,.35);border-radius:9px;padding:.5rem .7rem;
font-size:.82rem;font-weight:600;min-height:44px;-webkit-tap-highlight-color:transparent}
.wb-burger:hover{background:rgba(154,213,204,.12)}
.wb-navtoggle:focus-visible + .wb-railtop .wb-burger{outline:2px solid var(--mint);outline-offset:2px}
.wb-burger .bars{position:relative;width:17px;height:2px;background:#fff;border-radius:2px}
.wb-burger .bars::before,.wb-burger .bars::after{content:"";position:absolute;left:0;
width:17px;height:2px;background:#fff;border-radius:2px;transition:transform .18s ease}
.wb-burger .bars::before{top:-5px}
.wb-burger .bars::after{top:5px}
/* Bars become an X when open, so the control says which state it is in. */
.wb-navtoggle:checked + .wb-railtop .wb-burger .bars{background:transparent}
.wb-navtoggle:checked + .wb-railtop .wb-burger .bars::before{transform:translateY(5px) rotate(45deg)}
.wb-navtoggle:checked + .wb-railtop .wb-burger .bars::after{transform:translateY(-5px) rotate(-45deg)}
.wb-work{display:flex;flex-direction:column;min-width:0}
.wb-bar{background:#fff;border-bottom:1px solid var(--line);padding:.8rem 1.4rem;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;position:sticky;top:0;z-index:15}
.crumb{font-size:.82rem;color:var(--ink-faint)}
.crumb a{color:var(--ink-faint)}
.spacer{flex:1}
.cta{display:inline-flex;align-items:center;gap:.4rem;background:var(--teal-deep);color:#fff;border-radius:9px;padding:.5rem .95rem;font-size:.86rem;font-weight:600}
.cta:hover{background:var(--navy);color:#fff;text-decoration:none}
.head{background:#fff;border-bottom:1px solid var(--line);padding:1.4rem 1.4rem 0}
.head-in{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap;max-width:1180px}
.lg{flex:none;width:52px;height:52px;border-radius:12px;display:grid;place-items:center;font-family:var(--serif);font-size:1.1rem;font-weight:700;color:#fff;background:linear-gradient(140deg,var(--navy),var(--teal))}
.id{flex:1;min-width:250px}
.tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:var(--teal-deep);background:var(--teal-tint);border-radius:5px;padding:.18rem .45rem;display:inline-block;margin-bottom:.4rem}
h1{font-family:var(--serif);font-size:1.65rem;font-weight:700;color:var(--navy);line-height:1.2}
.sub{font-size:.88rem;color:var(--ink-faint);margin-top:.3rem;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.lede{color:var(--ink-soft);margin-top:.55rem;max-width:70ch;font-size:.95rem}
.pill{display:inline-block;font-size:.7rem;font-weight:700;border-radius:5px;padding:.16rem .45rem;background:var(--paper-3);color:var(--ink-faint);white-space:nowrap}
.pill.live{background:var(--live-bg);color:var(--live)}
.pill.warm{background:var(--warn-bg);color:var(--warn)}
a.pill{font-weight:600}
a.pill:hover{background:var(--teal-tint);color:var(--teal-deep);text-decoration:none}
.pills{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem}
.specs{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);margin-top:1.2rem;max-width:1180px}
.spec{padding:.8rem 1rem .9rem;border-right:1px solid var(--line);min-width:0}
.spec:last-child{border-right:0}
.spec h5{font-family:var(--mono);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);font-weight:500;margin-bottom:.28rem}
.spec .v{font-family:var(--mono);font-size:1rem;color:var(--navy);font-weight:600;line-height:1.25;overflow-wrap:break-word}
.spec .v.sm{font-size:.82rem;font-family:var(--sans)}
.spec .v.off{color:var(--ink-faint);font-weight:400;font-style:italic;font-family:var(--sans);font-size:.82rem}
.spec .s{font-size:.69rem;color:var(--ink-faint);margin-top:.14rem}
.body{padding:1.2rem 1.4rem 3rem;max-width:1180px}
.cols{display:grid;grid-template-columns:1fr 300px;gap:1.1rem;align-items:start}
.main{display:flex;flex-direction:column;gap:1.1rem;min-width:0}
.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.15rem 1.25rem}
h2{font-family:var(--serif);font-size:1.1rem;font-weight:700;color:var(--navy);margin-bottom:.15rem}
.panel .note{font-size:.79rem;color:var(--ink-faint);margin-top:.35rem;max-width:66ch}
.panel p{font-size:.93rem;line-height:1.7;margin-top:.6rem;max-width:70ch}
.facts{border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-top:.85rem}
.facts div{display:flex;gap:1rem;padding:.58rem .85rem;border-bottom:1px solid var(--line);font-size:.87rem}
.facts div:last-child{border-bottom:0}
.facts dt{flex:0 0 46%;color:var(--ink-faint);font-size:.83rem}
.facts dd{flex:1;color:var(--ink);font-weight:600}
.sample{color:var(--ink-faint);font-size:.8rem;font-weight:400}
.mix{display:flex;flex-direction:column;gap:.4rem;margin-top:.85rem}
.mixrow{display:grid;grid-template-columns:1fr 46px;gap:.6rem;align-items:center}
.mixrow .lb{font-size:.85rem;color:var(--ink-soft)}
.mixrow .pc{font-family:var(--mono);font-size:.75rem;color:var(--ink-faint);text-align:right}
.mixrow .bar{grid-column:1/-1;height:5px;border-radius:999px;background:var(--paper-3);overflow:hidden}
.mixrow .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal-deep),var(--teal-brand))}
/* The honest empty state. The design brief refuses to bend two rules: a sample
size beside every number, and an absence stated as a finding rather than
padded out or quietly dropped. */
.empty-state{border:1px dashed var(--line-strong);background:var(--paper-2);border-radius:9px;padding:.85rem 1rem;margin-top:.85rem;max-width:70ch}
.empty-state strong{color:var(--navy)}
.prov{font-size:.78rem;color:var(--ink-faint);line-height:1.6;margin-top:.85rem;padding-top:.75rem;border-top:1px solid var(--line);max-width:70ch}
.side{display:flex;flex-direction:column;gap:.9rem;position:sticky;top:60px}
.box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.95rem 1rem}
.box h3{font-family:var(--mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);font-weight:500;margin-bottom:.55rem}
.box p{font-size:.85rem;line-height:1.6}
.box .cta{width:100%;justify-content:center;margin-top:.65rem}
.box.warn{background:var(--warn-bg);border-color:#e8d3ae}
.box.warn h3{color:var(--warn)}
.box.warn p{color:#6b4720}
.box.soon{background:var(--paper-2)}
.box.soon ul{list-style:none}
.box.soon li{font-size:.83rem;color:var(--ink-faint);padding:.2rem 0 .2rem .7rem;border-left:2px solid var(--line-strong);margin-bottom:.3rem}
.tablewrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:12px}
table.wb{width:100%;border-collapse:separate;border-spacing:0;font-size:.86rem;min-width:980px}
table.wb thead th{background:var(--paper-2);border-bottom:1px solid var(--line-strong);font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:500;text-align:left;padding:.6rem .7rem;white-space:nowrap}
table.wb tbody td{border-bottom:1px solid var(--line);padding:.6rem .7rem;vertical-align:middle}
table.wb tbody tr:last-child td{border-bottom:0}
table.wb tbody tr:hover{background:var(--teal-tint)}
.co{display:flex;align-items:center;gap:.55rem;min-width:0}
.co .lgs{flex:none;width:28px;height:28px;border-radius:7px;display:grid;place-items:center;font-family:var(--serif);font-size:.72rem;font-weight:700;color:#fff;background:linear-gradient(140deg,var(--navy),var(--teal))}
.co .nm{font-weight:600;color:var(--navy);font-size:.88rem;line-height:1.2}
.co .sb{display:block;font-size:.68rem;color:var(--ink-faint);font-weight:400}
.n{font-family:var(--mono);font-size:.81rem;color:var(--ink);white-space:nowrap}
.n.pay{color:var(--teal-deep);font-weight:600}
.n.off{color:var(--ink-faint);font-family:var(--sans);font-size:.77rem;font-style:italic}
.n.lic{font-family:var(--sans);font-size:.78rem;white-space:normal;color:var(--ink-soft)}
.n.seen{font-size:.76rem;color:var(--ink-faint)}
.mini{display:flex;gap:.2rem;flex-wrap:wrap}
.mini span{font-size:.64rem;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line);border-radius:4px;padding:.1rem .3rem;white-space:nowrap}
.card{border:1px solid var(--line);border-radius:10px;padding:.85rem .95rem;background:#fff;display:flex;flex-direction:column;gap:.45rem}
.card h3{font-size:.95rem;line-height:1.3;font-family:var(--serif);font-weight:700}
.grid{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-top:.85rem}
.pager{display:flex;gap:.5rem;justify-content:center;margin-top:1.4rem;flex-wrap:wrap;align-items:center}
.foot{margin-top:1.6rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.83rem;color:var(--ink-faint)}
.foot p{margin-bottom:.4rem}
/* Desktop keeps the full rail and has no use for a burger. This is the only place the
burger is hidden, and it is inside a media query, so nothing is hidden everywhere. */
@media(min-width:1001px){
.wb-burger{display:none}
}
@media(max-width:1080px){
.cols{grid-template-columns:1fr}
.side{position:static}
.specs{grid-template-columns:repeat(3,1fr)}
.spec:nth-child(3n){border-right:0}
}
/* The rail reflows to a horizontal strip rather than hiding anything. Nothing in
this stylesheet may hide a node, deliberately: test.js asserts against the whole
response body and that assertion is the cloaking guard. Note that the guard reads
this comment too, so it cannot name the property it forbids. */
/* Phone and tablet: the rail collapses to a sticky bar with a hamburger. The panel is
hidden ONLY here, and only until the checkbox is checked. Every link stays in the
HTML at every width, so this is disclosure, not omission. Replaced the horizontal
scrolling strip on 2026-08-19: that strip hid most of the nav off-screen with no
affordance saying so, which is worse than a control that admits it is a control. */
@media(max-width:1000px){
.wb-shell{grid-template-columns:1fr}
.wb-rail{position:sticky;top:0;z-index:30;height:auto;flex-direction:column;
align-items:stretch;gap:0;overflow:visible;padding:.6rem 0;white-space:normal}
.wb-railtop{padding:0 1rem}
.wb-brand{padding:0;flex:none;display:flex;align-items:center;gap:.5rem}
.wb-brand img{max-width:124px}
.wb-brand span{display:inline;margin:0}
.wb-navbody{display:none;padding:.85rem 1rem .2rem;gap:1rem;
max-height:72vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.wb-navtoggle:checked ~ .wb-navbody{display:flex}
.wb-railsec{padding:0}
.wb-railsec h4{margin-bottom:.35rem}
.wb-navlink{margin:0}
.wb-rail-stats{margin:0;padding:.85rem 0 .2rem;border-top:1px solid rgba(154,213,204,.2)}
.wb-rail-stats div{padding:.2rem 0;font-size:.78rem}
}
/* ---------------------------------------------------------------- phone ----
The audience is a tired nurse on a phone, often mid-shift. Three things were
measured wrong at 375px on 2026-08-19 and are corrected here: a 1119px table
with 34% of it visible, text down to 8.8px, and 95 tap targets under 40px. */
@media(max-width:700px){
.specs{grid-template-columns:repeat(2,1fr)}
.spec:nth-child(3n){border-right:1px solid var(--line)}
.spec:nth-child(2n){border-right:0}
h1{font-size:1.35rem}
.body,.head,.wb-bar{padding-left:1rem;padding-right:1rem}
/* Nine columns do not fit a phone. Each row becomes a card and each cell names
itself from data-label. The is hidden ONLY here, inside a media query,
and its text stays in the HTML: this is layout, not withheld content. */
.tablewrap{overflow:visible;border:0;background:transparent;border-radius:0}
table.wb{display:block;min-width:0;font-size:.95rem}
table.wb thead{display:none}
table.wb tbody{display:block}
/* Two columns, label stacked above value. One field per line made a 369px card and
a 19,750px page for 48 employers, which is a lot of thumb for a directory. */
table.wb tbody tr.wb-row{display:grid;grid-template-columns:1fr 1fr;gap:.55rem .9rem;
background:#fff;border:1px solid var(--line);border-radius:11px;
padding:.85rem .9rem;margin-bottom:.6rem;align-items:start}
table.wb tbody tr:hover{background:#fff}
table.wb tbody td{display:block;border-bottom:0;padding:0;white-space:normal;min-width:0}
table.wb tbody td::before{content:attr(data-label);display:block;margin-bottom:.1rem;
font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
color:var(--ink-faint);line-height:1.3}
table.wb tbody td:first-child{grid-column:1/-1;padding:0 0 .6rem;margin-bottom:.15rem;
border-bottom:1px solid var(--line)}
table.wb tbody td:first-child::before{content:none}
table.wb tbody td .mini{justify-content:flex-start}
.co .lgs{width:34px;height:34px;font-size:.82rem}
.co .nm{font-size:1rem}
/* Readability floor. Nothing below ~11.5px on a phone. */
.co .sb,.spec .s,.sample,.box.soon li,.prov,.panel .note,.foot{font-size:.79rem}
.mini span,.spec h5,.box h3,.panel h2 .ct,table.wb tbody td::before{font-size:.7rem}
.pill{font-size:.75rem}
.n,.n.lic,.n.seen,.n.off{font-size:.85rem}
.facts div{font-size:.92rem}
/* The rail's own labels were the smallest text on the page at 8.8px and 9.3px. */
.wb-railsec h4{font-size:.7rem}
.wb-brand span{font-size:.68rem}
/* Tap targets. Rail links were 33px tall; 44px is the floor. Breadcrumb and footer
links were 17px, which is a link you aim at rather than tap. */
.wb-navlink{min-height:44px;padding:.6rem .7rem}
.cta{min-height:44px;padding:.7rem 1.1rem}
a.pill{min-height:36px;display:inline-flex;align-items:center;padding:.3rem .6rem}
.co{min-height:44px}
.crumb a,.foot a{display:inline-block;min-height:38px;line-height:38px}
.foot p{line-height:1.9}
/* Licence, role and state links sit comma-separated inside a sentence, so they keep
inline flow rather than becoming 38px blocks: 33 states as stacked buttons would be
a screen and a half. Extra leading gives the thumb room without breaking the line. */
/* line-height alone does not grow an inline link's hit area, only its leading, so
these need inline-block with real padding. The generous line-height on the parent
is what stops the taller boxes overlapping when 33 state links wrap. */
.facts dd{line-height:2.4}
.facts dd a{display:inline-block;padding:.42rem 0;line-height:1.25}
.tag{font-size:.7rem}
/* Similar-employer titles are primary navigation, not decoration. */
.card h3 a{display:inline-block;padding:.4rem 0;min-height:36px}
/* At 320px a 46% label column left ~101px for the value. Stack instead. */
.facts div{flex-direction:column;gap:.15rem;padding:.55rem .8rem}
.facts dt{flex:none;width:auto}
}