/* tpl-state.css - Jobs In Each State, state page /state/{s}/ (polish Batch 6b, Nov 10, 2026).
   Loaded only by Views/States/Details.cshtml (@section Styles), after site-brand.css and templates.css.
   Reuses the B6a tokens and components (erw-band, jl-*, st-*, rk-bar/rk-w*, nb-*, fq-*, src-*, erw-ad*); only the
   state page frame, the crumbs, the city/field link chips and the pay-by-occupation list live here.
   Same specificity convention as templates.css: "html:root body" prefix so component rules beat the global
   type rules in site-brand.css. Navy is the only UI colour; no text under 12px; chips 44px on phones/coarse
   pointers, 36px otherwise (T2/T8); no horizontal scroll at 320px. */

/* ---------------------------------------------------------------- band: lede, "jobs below" (R2D-1, L14); crumbs = shared .jx-crumbs */
html:root body main .erw-band p.sp-lede { margin: 0 0 12px; max-width: 64ch; }
html:root body main .erw-band p.sp-jump { margin: 4px 0 0; font-size: 16px !important; }
html:root body main .erw-band p.sp-jump a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* ---------------------------------------------------------------- frame: list + side column (tiles, rail) */
/* 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. */
@media (max-width: 959px) { html:root body .sp-side-desk section.st { display: none; } }
/* Phones/tablets: one column in DOM order (list, tiles, links, data). >=960px: the tiles sit beside the list (L14);
   >=1200px: the 300x600 rail ad follows the tiles in the same sticky column (R2 section 5). */
html:root body .sp-grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; }
html:root body .sp-grid > * { min-width: 0; }
@media (min-width: 960px) {
    html:root body .sp-grid.sp-has-side { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "list side" "rest side"; align-items: start; }
    html:root body .sp-has-side > .sp-list { grid-area: list; }
    html:root body .sp-has-side > .sp-side { grid-area: side; position: sticky; top: 24px; padding-top: 32px; }
    html:root body .sp-has-side > .sp-rest { grid-area: rest; }
    html:root body.jx-tpl main .sp-side section.st { margin-top: 0; }
    html:root body .sp-side .st-grid { grid-template-columns: minmax(0, 1fr); }
    html:root body .sp-side .st-n3 > .st-tile:last-child { grid-column: auto; }
    html:root body .sp-side .erw-ad-rail { margin-top: 24px; }
}

/* ---------------------------------------------------------------- city and field link chips (T8: links, not filters) */
/* Inside the listing module (ChipsHtml slot, between the controls and the status line, also in its empty states):
   two disclosures on one row; an open one takes the full width (UI/UX M1). */
html:root body .sp-chipnav { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
html:root body .sp-chipnav > details[open] { flex-basis: 100%; }
html:root body main .sp-chipnav :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
html:root body main .sp-chipnav li { list-style: none; margin: 0; padding: 0; float: none; width: auto; }
html:root body main .sp-chipnav li::before { content: none; }
html:root body main .sp-chipnav p.sp-more { margin: 8px 0 0; font-size: 14px !important; }
html:root body main .sp-chipnav p.sp-more a { display: inline-flex; align-items: center; min-height: 44px; color: var(--erw-navy) !important; text-decoration: underline; }
/* Disclosure toggles look like outline chips with a chevron, never like links (T8, S1). */
html:root body .sp-fold summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 14px; border: 1px solid var(--erw-line); border-radius: var(--erw-r-pill); background: #fff; cursor: pointer; font: 600 14px/1.3 var(--erw-font-body); color: var(--erw-ink); text-decoration: none; white-space: nowrap; }
html:root body .sp-fold summary::-webkit-details-marker { display: none; }
html:root body .sp-fold summary::after { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); margin-left: 2px; }
html:root body .sp-fold[open] summary::after { transform: translateY(2px) rotate(-135deg); }
html:root body .sp-fold summary:hover { border-color: var(--erw-navy); }
html:root body .sp-fold-n { font-weight: 400; color: var(--erw-muted); }
/* Visible label "By city"; the DOM text stays "by city" after the hidden "Jobs " (accessible name "Jobs by city (n)"). */
html:root body .sp-fold-l { display: inline-block; }
html:root body .sp-fold-l::first-letter { text-transform: uppercase; }
html:root body .sp-fold[open] summary { margin-bottom: 10px; }
@media (prefers-reduced-motion: no-preference) { html:root body .sp-fold summary::after { transition: transform var(--erw-dur) var(--erw-ease); } }
html:root body .sp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
html:root body main a.sp-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--erw-line); border-radius: var(--erw-r-pill); background: #fff; color: var(--erw-ink) !important; font: 600 15px/1.3 var(--erw-font-body); text-decoration: none !important; }
html:root body main a.sp-chip:hover { border-color: var(--erw-navy); color: var(--erw-navy) !important; text-decoration: underline !important; }
@media (max-width: 639px), (pointer: coarse) { html:root body main a.sp-chip { min-height: 44px; } }

/* after-list ad: no local spacing; the shared .erw-ad margin (72px + label above, 90px below) gives >= 90px (B6a round 2) */

/* ---------------------------------------------------------------- pay by occupation: ranked rows, cards on phones */
html:root body main .sp-pay p.sp-note { font-size: 14px !important; line-height: 1.5 !important; color: var(--erw-muted) !important; margin: 0 0 12px; max-width: 72ch; }
html:root body main ol.sp-occ { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
html:root body main ol.sp-occ > li { list-style: none; margin: 0; padding: 0; float: none; width: auto; }
html:root body main ol.sp-occ > li::before { content: none; }
html:root body main ol.sp-occ > li.sp-occ-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 10px; align-items: start; background: #fff; border: 1px solid var(--erw-line); border-radius: var(--erw-r); padding: 14px 16px; }
html:root body .sp-occ-row > :not(.sp-occ-n) { grid-column: 2; }
html:root body .sp-occ-n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--erw-soft); color: var(--erw-navy); font: 700 13px/1 var(--erw-font-body); font-variant-numeric: tabular-nums; }
html:root body main .sp-occ p { margin: 0; }
html:root body main .sp-occ p.sp-occ-t { font: 600 16px/1.35 var(--erw-font-body) !important; color: var(--erw-ink) !important; }
html:root body main .sp-occ a.sp-occ-a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--erw-navy) !important; text-decoration: underline; }
html:root body main .sp-occ p.sp-occ-v { font: 700 18px/1.35 var(--erw-font-body) !important; color: var(--erw-ink) !important; font-variant-numeric: tabular-nums; }
html:root body .sp-occ-p { font-weight: 400; font-size: 13px; color: var(--erw-muted); }
html:root body .sp-occ-row .sp-occ-bar { margin: 2px 0 4px; }
html:root body main .sp-occ p.sp-occ-d { font-size: 13px !important; line-height: 1.5 !important; color: var(--erw-ink) !important; display: flex; flex-direction: column; gap: 2px; max-width: 75ch; }
html:root body .sp-occ-cd, html:root body .sp-occ-e { color: var(--erw-muted); }
@media (min-width: 640px) {
    html:root body main ol.sp-occ > li.sp-occ-row { grid-template-columns: 30px minmax(0, 1fr) 200px; padding: 14px 20px; }
    html:root body .sp-occ-row > .sp-occ-main { grid-column: 2; grid-row: 1 / span 2; }
    html:root body .sp-occ-row > .sp-occ-v { grid-column: 3; grid-row: 1; text-align: right; }
    html:root body .sp-occ-row > .sp-occ-bar { grid-column: 3; grid-row: 2; }
    html:root body .sp-occ-row > .sp-occ-d { grid-column: 2 / -1; grid-row: 3; }
}