/* tpl-category.css - Jobs In Each State: category hub, national category, category x state, city and search templates
   (polish Batch 6c, Nov 10, 2026). Loaded only by those views, after site-brand.css and templates.css (B6a), whose
   tokens and components (erw-band, jl, st, rk, nb, fld, fq, src, erw-ad) it reuses. Same rules as templates.css:
   "html:root body" prefix to outrank site-brand.css; navy the only UI colour; minimum text 12px; tap targets 44px
   primary / 24px minimum; no horizontal scroll at 320px; prose about 75ch at desktop. */

/* ------------------------------------------------------------ band: crumbs, lede, "Jobs below" */
/* Crumbs: the shared _Crumbs partial (.jx-crumbs in templates.css, Lead ruling R3). */
html:root body main .erw-band p.cx-lede { max-width: 66ch; margin: 0 0 12px; }
html:root body main .erw-band p.cx-jump { margin: 0; font-size: 16px !important; }
html:root body main .erw-band p.cx-jump a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; }

/* ------------------------------------------------------------ main column + side column (same frame as B6b's state page) */
html:root body .cx-main { padding-bottom: 48px; }
/* Phones/tablets: one column in DOM order (list, rest). The phone copy of the tiles is the module's div.jl-insert (hidden at
   >=960px by templates.css); the side copy shows at >=960px only. >=960px: tiles beside the list, sticky (L14, UI/UX S2);
   >=1200px: the 300x600 rail ad follows the tiles in the same column (R2 section 5; only where TemplateAds allows). */
@media (max-width: 959px) { html:root body .cx-side-desk section.st { display: none; } }
html:root body .cx-grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; }
html:root body .cx-grid > * { min-width: 0; }
@media (min-width: 960px) {
    html:root body .cx-grid.cx-has-side { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "list side" "rest side"; align-items: start; }
    html:root body .cx-has-side > .cx-list { grid-area: list; }
    html:root body .cx-has-side > .cx-side { grid-area: side; position: sticky; top: 24px; padding-top: 32px; }
    html:root body .cx-has-side > .cx-rest { grid-area: rest; }
    html:root body.jx-tpl main .cx-side section.st { margin-top: 0; }
    html:root body .cx-side .st-grid { grid-template-columns: minmax(0, 1fr); }
    html:root body .cx-side .st-n3 > .st-tile:last-child { grid-column: auto; }
    html:root body .cx-side .erw-ad-rail { margin-top: 24px; }
}
html:root body .cx-main p { max-width: 75ch; }

html:root body .cx-about p { font-size: 16px; line-height: 1.6; color: var(--erw-ink); margin: 0; }

/* ------------------------------------------------------------ pay by occupation table -> cards on phones */
html:root body .cx-tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; background: #fff; }
html:root body .cx-tbl caption { caption-side: top; text-align: left; font-size: 14px; line-height: 1.45; color: var(--erw-muted); padding: 0 0 10px; }
html:root body .cx-tbl :is(th, td) { padding: 10px 12px; border-top: 1px solid var(--erw-line); text-align: left; vertical-align: top; font-size: 15px; line-height: 1.45; color: var(--erw-ink); }
html:root body .cx-tbl thead th { font-size: 13px; font-weight: 600; color: var(--erw-muted); border-top: 0; border-bottom: 2px solid var(--erw-line); white-space: nowrap; }
html:root body .cx-tbl tbody th { font-weight: 600; }
html:root body .cx-tbl td b { font-weight: 700; }
html:root body .cx-cmp { display: block; font-size: 13px; line-height: 1.45; color: var(--erw-ink); }
html:root body .cx-rp { font-weight: 400; font-size: 13px; color: var(--erw-muted); }
html:root body main p.cx-note { font-size: 14px !important; line-height: 1.5 !important; color: var(--erw-muted) !important; margin: 10px 0 0; }
@media (max-width: 639px) {
    html:root body .cx-tbl, html:root body .cx-tbl tbody, html:root body .cx-tbl tr, html:root body .cx-tbl th, html:root body .cx-tbl td { display: block; width: 100%; }
    html:root body .cx-tbl caption { display: block; }
    html:root body .cx-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    html:root body .cx-tbl tr { border: 1px solid var(--erw-line); border-radius: var(--erw-r); padding: 12px 14px; margin: 0 0 10px; box-shadow: var(--erw-shadow); }
    html:root body .cx-tbl :is(th, td) { border: 0; padding: 2px 0; }
    html:root body .cx-tbl tbody th { font-size: 16px; padding-bottom: 6px; }
    html:root body .cx-tbl td { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 8px; }
    html:root body .cx-tbl td::before { content: attr(data-label); font-size: 13px; color: var(--erw-muted); }
    /* A6: the comparison spans both columns instead of wrapping under the label. */
    html:root body .cx-tbl td .cx-cmp { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ pay by state (rk card, full width, 2 columns >= 960) */
html:root body .cx-sp-card { max-width: none; }
@media (min-width: 960px) { html:root body .cx-sp-list { columns: 2; column-gap: 32px; } html:root body .cx-sp-list .rk-row { break-inside: avoid; } }
html:root body main .rk span.rk-name { font: 600 16px/1.35 var(--erw-font-body); color: var(--erw-ink); min-height: 24px; display: inline-block; }

/* ------------------------------------------------------------ neighbors: plain-text chip when the link gate says no */
html:root body main span.nb-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--erw-r-pill); background: var(--erw-soft); color: var(--erw-ink); font: 600 15px/1.2 var(--erw-font-body); }

/* ------------------------------------------------------------ hospital salary link (health category x state) */
html:root body main p.cx-hosp { font-size: 15px; line-height: 1.55; color: var(--erw-ink); margin: 14px 0 0; padding: 12px 16px; background: var(--erw-soft); border-radius: var(--erw-r-sm, 8px); }
html:root body main p.cx-hosp a { color: var(--erw-navy) !important; text-decoration: underline; font-weight: 600; }
html:root body .cx-ext { text-decoration: none; display: inline-block; }

/* ------------------------------------------------------------ states A-Z and related links */
html:root body .cx-az, html:root body .cx-related ul { list-style: none; margin: 0; padding: 0; }
html:root body .cx-az { columns: 136px 4; column-gap: 16px; }
html:root body .cx-az li, html:root body .cx-related li { list-style: none; margin: 0; padding: 0; float: none; width: auto; break-inside: avoid; }
html:root body .cx-az li::before, html:root body .cx-related li::before { content: none; }
html:root body main .cx-az a, html:root body main .cx-az span, html:root body main .cx-related a { display: flex; align-items: center; min-height: 44px; font-size: 16px; }
html:root body main :is(.cx-az, .cx-related) a { color: var(--erw-navy) !important; text-decoration: underline; }
html:root body main .cx-az span { color: var(--erw-ink); }

/* ------------------------------------------------------------ hub cards: a little more room for two-word names */
html:root body .cx-fields { margin-top: 32px; }

/* ------------------------------------------------------------ search band: crumbs and H1 left, white search card right */
html:root body .cx-sband .hub-intro { align-self: start; }
@media (min-width: 960px) { html:root body .cx-sband .hub-band-in { align-items: start; } }