/* SEO Monitor + Mapbox Settings + Job Filters (/panel/seo-monitor,
   /panel/mapbox-settings, /panel/job-filters-overview) — EDS bridge overrides.
   Owned by this surface only. Page-scoped selectors only (.fi-eds-jf .jf-*,
   .mapset-*) — never restyle global fi-* chrome here.

   SEO Monitor already composed entirely from the shared fi-eds-* bridge
   primitives and needed no page-scoped overrides.

   Job Filters + Mapbox Settings previously carried their own <style> blocks
   inline in the blade (against the bridge rule: no <style> in blades). Moved
   here verbatim, correcting the drift found against docs/design-system.md:
   Fraunces headings must sit at weight 430 (never 500); eyebrow/tag letter-
   spacing must sit within .06–.1em (was .12–.16em); chips/tags/badges use the
   6px radius, never 999px/pill (pills are for genuinely circular elements
   only); token hex should be referenced via var(), not re-typed literally. */

/* ---------- SEO Monitor (/panel/seo-monitor) ---------- */
/* .fi-eds-kv is a shared eds-panel.css primitive (104px/1fr grid) whose dt
   has no overflow control; long dt labels (route names, URL paths) overflow
   the fixed column with zero gutter. Page-scoped fix here; the clean
   long-term home is eds-panel.css itself (see sharedCssRequests). */
[wire\:key^="seo-monitor-"] .fi-eds-kv dt { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Job Filters (/panel/job-filters-overview) ---------- */

.fi-eds-jf {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: clamp(18px, 3vw, 30px);
    color: var(--ink);
    font-family: var(--sans);
    font-feature-settings: 'ss01' on, 'cv01' on, 'cv11' on;
}
.fi-eds-jf *, .fi-eds-jf *::before, .fi-eds-jf *::after { box-sizing: border-box; }

.jf-hero { max-width: 64ch; margin-bottom: clamp(20px, 3vw, 32px); }
.jf-eyebrow {
    margin: 0; font: 600 11px var(--sans); letter-spacing: .08em;
    text-transform: uppercase; color: var(--purple7);
    display: inline-flex; align-items: center; gap: 8px;
}
.jf-eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--purple); opacity: .5; }
.jf-title { margin: 12px 0 0; font: 430 clamp(1.6rem, 3vw, 2.2rem)/1.1 var(--ser); letter-spacing: -.015em; color: var(--ink); }
.jf-sub { margin: 10px 0 0; font: 400 14.5px/1.6 var(--sans); color: var(--ink2); }
.jf-sub b { color: var(--ink); font-weight: 600; }

.jf-sech {
    display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
    font: 430 16px/1.2 var(--ser); letter-spacing: -.01em; color: var(--ink);
}
.jf-sech span {
    font: 600 10.5px var(--sans); letter-spacing: .08em; text-transform: uppercase;
    color: var(--purple7); background: var(--psoft); border-radius: 6px; padding: 3px 10px;
}
.jf-sech::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.jf-section + .jf-section { margin-top: clamp(22px, 3vw, 32px); }

/* The profession spine — connected nodes with flow arrows. */
.jf-spine { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.jf-arrow { align-self: center; color: var(--ink3); font-size: 20px; line-height: 1; flex: 0 0 auto; }

.jf-node, .jf-card {
    position: relative; display: flex; flex-direction: column; gap: 6px;
    text-decoration: none; background: var(--paper);
    border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
    box-shadow: var(--fi-eds-shadow); color: var(--ink);
    transition: transform 160ms var(--fi-eds-ease), border-color 160ms var(--fi-eds-ease), box-shadow 160ms var(--fi-eds-ease);
}
.jf-node { flex: 1 1 180px; min-width: 170px; }
.jf-node:hover, .jf-card:hover { transform: translateY(-2px); border-color: var(--lineS); box-shadow: var(--fi-eds-shadow-h); }
.jf-node:focus-visible, .jf-card:focus-visible { outline: none; border-color: var(--purple); box-shadow: var(--eds-focus-ring); }

.jf-node__count, .jf-card__count {
    align-self: flex-start; font: 600 12px var(--sans); color: var(--purple7);
    background: var(--psoft); border-radius: 6px; padding: 2px 10px; letter-spacing: .01em;
}
.jf-node__label, .jf-card__label { font: 600 14.5px var(--sans); color: var(--ink); }
.jf-node__tag, .jf-card__tag { font: 400 12.5px/1.4 var(--sans); color: var(--ink2); }
.jf-node__open {
    margin-top: 2px; font: 600 12px var(--sans); color: var(--purple7);
    opacity: 0; transform: translateX(-4px); transition: opacity 160ms var(--fi-eds-ease), transform 160ms var(--fi-eds-ease);
}
.jf-node:hover .jf-node__open, .jf-card:hover .jf-node__open { opacity: 1; transform: translateX(0); }

.jf-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

@media (max-width: 720px) {
    .jf-arrow { transform: rotate(90deg); align-self: flex-start; margin-left: 24px; }
    .jf-spine { flex-direction: column; align-items: stretch; }
    .jf-node { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
    .jf-node, .jf-card, .jf-node__open { transition: none; }
}

/* ---------- Mapbox Settings (/panel/mapbox-settings) ---------- */
/* Page-local preview styling (mirrors EdsMapPin/EdsMapCluster looks). */

.mapset-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.mapset-rolefield { margin-top: 14px; }
.mapset-cards { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.mapset-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 14px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); cursor: pointer; min-width: 128px; max-width: 168px; transition: border-color 160ms var(--fi-eds-ease), box-shadow 160ms var(--fi-eds-ease), transform 160ms var(--fi-eds-ease); }
.mapset-card:hover { border-color: var(--lineS); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(40,33,20,.08); }
.mapset-card input { position: absolute; opacity: 0; pointer-events: none; }
.mapset-card:has(input:checked) { border-color: var(--purple); box-shadow: 0 0 0 1.5px var(--purple); }
.mapset-card__stage { display: flex; align-items: flex-end; justify-content: center; width: 84px; height: 60px; border-radius: 10px; background: var(--psoft); border: 1px solid var(--line); padding-bottom: 5px; margin-bottom: 4px; filter: drop-shadow(0 1px 1.5px rgba(40,33,20,.18)); }
.mapset-card__name { font: 600 11.5px var(--sans); color: var(--ink); text-align: center; line-height: 1.25; }
.mapset-card__label { font: 400 10.5px var(--sans); color: var(--ink3); text-align: center; max-width: 140px; line-height: 1.35; }
/* Featured previews twinkle + breathe exactly like the live pins. */
.mapset-spark { transform-box: fill-box; transform-origin: center; animation: mapset-twinkle 2.8s ease-in-out infinite; }
@keyframes mapset-twinkle { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(.8) rotate(18deg); opacity: .82; } }
.mapset-pulse { transform-box: fill-box; transform-origin: center; animation: mapset-pulse 2.8s cubic-bezier(.22,.61,.36,1) infinite; }
@keyframes mapset-pulse { 0% { transform: scale(1); opacity: .5; } 70% { opacity: 0; } 100% { transform: scale(3); opacity: 0; } }
.mapset-pulse--seal { animation-name: mapset-pulse-seal; }
@keyframes mapset-pulse-seal { 0% { transform: scale(1); opacity: .4; } 70% { opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } }
/* Cluster counter mirrors the live map marker exactly — genuinely circular
   (width == height), so the pill radius here is the spec's stated exception. */
.mapset-cluster { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.mapset-cluster__halo { position: absolute; inset: 0; border-radius: 50%; background: var(--purple); opacity: .3; }
.mapset-cluster__halo--ink { background: var(--dark); opacity: .22; }
.mapset-cluster__chip { position: relative; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); color: var(--purple); border: 1.5px solid var(--purple); font: 500 12px 'JetBrains Mono', ui-monospace, monospace; }
.mapset-cluster__chip--iris { background: var(--purple); color: var(--paper); border-color: var(--purple7); }
.mapset-cluster__chip--ink { background: var(--dark); color: var(--paper); border-color: var(--dark); }
.mapset-toggle { display: inline-flex; align-items: center; gap: 8px; font: 400 13px var(--sans); color: var(--ink2); cursor: pointer; padding-top: 6px; }
.mapset-toggle input { accent-color: var(--purple); width: 16px; height: 16px; }
.mapset-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
@media (max-width: 640px) {
    .mapset-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mapset-card { min-width: 0; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .mapset-pulse { display: none; } .mapset-spark, .mapset-card { animation: none; transition: none; } }