/* Requirements-led selector aligned with the shared Django brand system. */
#switch-selector {
    --switch-navy-soft: var(--color-ink-soft);
    --switch-blue: var(--color-primary);
    --switch-blue-strong: var(--color-brand-dark);
    --switch-canvas: var(--color-page);
    --switch-surface: #ffffff;
    --switch-surface-soft: #f8f9fa;
    --switch-line: #dee2e9;
    --switch-muted: #52617a;
    --switch-shadow: 0 18px 46px rgba(15, 25, 42, .09);
    position: relative;
    isolation: isolate;
    padding-bottom: 4rem;
    color: var(--color-ink);
}
#switch-selector::before {
    content: '';
    position: absolute;
    z-index: -2;
    inset: 0 50%;
    margin-inline: -50vw;
    background:
        radial-gradient(circle at 12% 20%, rgba(13, 91, 215, .08), transparent 28rem),
        linear-gradient(180deg, #f2f4f7 0%, var(--switch-canvas) 29rem, #f9fafb 100%);
}
#switch-selector [hidden] { display: none !important; }
#switch-selector .selector-form-card {
    position: relative;
    overflow: visible;
    padding: 0;
    margin-top: -2.8rem;
    border: 1px solid var(--switch-line);
    border-top: 0;
    border-radius: 18px;
    background: var(--switch-surface);
    box-shadow: var(--switch-shadow);
}
#switch-selector .selector-form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 4px;
    border-radius: 18px 18px 0 0;
    background: var(--switch-blue);
}
#switch-selector .selector-section-kicker,
#switch-selector .selector-data-badge { font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; }
#switch-selector .selector-section-kicker { color: var(--color-brand-dark); font-weight: 600; }
#switch-selector .selector-data-badge {
    padding: .55rem .8rem;
    border: 1px solid #d4d9e2;
    border-radius: 999px;
    color: var(--color-brand-dark);
    background: #f5f7f9;
    white-space: nowrap;
}
#switch-selector .selector-submit-button,
#switch-selector .selector-add-button,
#switch-selector .selector-swap-button {
    font-size: 1rem;
    cursor: pointer;
    flex-shrink: 0;
    min-height: 2.8rem;
}
#switch-selector button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
#switch-selector button:focus-visible { outline: 2px solid var(--selector-blue); outline-offset: 3px; }
#switch-selector .selector-submit-button {
    border-color: var(--color-brand-mid);
    background: var(--color-brand-mid);
    box-shadow: 0 8px 18px rgba(11, 29, 58, .22);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
#switch-selector .selector-submit-button:hover {
    background: var(--color-brand-dark);
    box-shadow: 0 11px 24px rgba(10, 73, 174, .26);
    transform: translateY(-1px);
}
#switch-selector [data-step-panel] h3,
#switch-selector .switch-results-heading h2 { color: var(--color-ink); }
#switch-selector [data-step-panel] {
    position: relative;
    overflow: hidden;
    padding: 1.4rem;
    border: 1px solid var(--switch-line);
    border-radius: 14px;
    background: var(--switch-surface);
    box-shadow: 0 8px 24px rgba(15, 25, 42, .05);
}
#switch-selector [data-step-panel]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4.5rem;
    height: 3px;
    border-radius: 0 0 4px 0;
    background: var(--switch-blue);
}
#switch-selector [data-step-panel] > fieldset,
#switch-selector [data-step-panel] fieldset.rounded-box,
#switch-selector [data-feature-group] {
    border-radius: 12px;
    border-color: var(--switch-line);
    background-color: #fff;
    box-shadow: 0 4px 14px rgba(15, 25, 42, .035);
}
#switch-selector .input,
#switch-selector .select {
    min-height: 3rem;
    height: 3rem;
    border: 1px solid var(--switch-line);
    border-radius: 10px;
    background-color: #fff;
    color: var(--color-ink);
    font-size: 1rem;
}
#switch-selector .input:focus,
#switch-selector .select:focus {
    border-color: var(--selector-blue);
    outline: none;
    box-shadow: 0 0 0 4px rgba(13, 91, 215, .13);
}
#switch-selector [aria-invalid="true"] { border-color: #b42318; }
#switch-selector .input:disabled,
#switch-selector .select:disabled { background-color: #f3f4f7; color: #717f96; }
#switch-selector .selector-form-card nav[aria-label="Selection steps"] {
    padding: 1rem 1rem 1.1rem !important;
    border: 1px solid var(--switch-line) !important;
    border-radius: 14px;
    background: var(--switch-surface-soft);
}
#switch-selector .switch-steps { position: relative; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .5rem; }
#switch-selector .switch-steps::before { content: ''; position: absolute; top: 1.65rem; left: 10%; right: 10%; height: 2px; background: #c7d3e8; }
#switch-selector .switch-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: .65rem; width: 100%; padding: .55rem .25rem; text-align: center; border: 1px solid transparent; border-radius: 10px; cursor: pointer; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; }
#switch-selector .switch-step:hover { border-color: #c2d0e8; background: #fff; }
#switch-selector .switch-step-number { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border: 1px solid #c7d3e8; border-radius: 50%; background: #ebeef2; color: #52617a; font-weight: 600; box-shadow: 0 0 0 5px #f5f6f8; }
#switch-selector .switch-step[aria-current="step"] { color: var(--color-brand-dark); }
#switch-selector .switch-step[aria-current="step"] { border-color: #b1c3e2; background: #fff; box-shadow: 0 7px 16px rgba(13, 91, 215, .10); }
#switch-selector .switch-step[aria-current="step"] .switch-step-number { border-color: var(--switch-blue); background: var(--color-primary); color: #fff; box-shadow: 0 0 0 5px #e9ecf0; }
#switch-selector .switch-filter-toolbar {
    border: 1px solid var(--color-brand-dark);
    border-radius: 14px;
    color: #f4f6f8;
    background: linear-gradient(118deg, var(--color-brand-dark) 0%, var(--color-brand-mid) 100%);
    box-shadow: 0 15px 34px rgba(15, 25, 42, .18);
}
#switch-selector .switch-filter-toolbar [data-update-label] { color: #e9ecf0; opacity: 1; }
#switch-selector .switch-filter-toolbar .selector-submit-button { border-color: #fff; background: #fff; color: var(--color-brand-mid); box-shadow: 0 8px 20px rgba(15, 25, 42, .18); }
#switch-selector .switch-filter-toolbar .selector-submit-button:hover { background: #f5f7f9; color: var(--color-brand-dark); }
#switch-selector .switch-requirements { border: 1px solid var(--switch-line); border-radius: 13px; background: #f8f9fa; margin-top: 1.5rem; }
/* A real basis lets the chips wrap onto their own line instead of shrinking to a sliver. */
#switch-selector #selection-chips { flex: 1 1 14rem; }
#switch-selector #switch-results {
    padding: 2rem;
    border: 1px solid var(--switch-line);
    border-radius: 18px;
    background: var(--switch-surface);
    box-shadow: var(--switch-shadow);
}
#switch-selector .switch-results-heading .selector-section-kicker { color: var(--color-brand-dark); }
#switch-selector .switch-results-shell { overflow: hidden; border: 1px solid var(--switch-line); border-radius: 14px; background: white; box-shadow: 0 10px 28px rgba(15, 25, 42, .07); }
#switch-selector .switch-results-table { table-layout: fixed; border-collapse: separate; border-spacing: 0; }
#switch-selector .switch-results-table .switch-col-model { width: 20%; }
#switch-selector .switch-results-table .switch-col-description { width: 48%; }
#switch-selector .switch-results-table .switch-col-price { width: 14%; }
#switch-selector .switch-results-table .switch-col-order { width: 18%; }
#switch-selector .switch-results-table thead { color: #fff; background: var(--color-brand-dark); }
#switch-selector .switch-results-table thead th {
    padding: .78rem 1.1rem;
    color: #fff;
    background: var(--color-brand-dark);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .045em;
    text-transform: uppercase;
}
#switch-selector .switch-results-table tbody tr { transition: background-color .16s ease; }
#switch-selector .switch-results-table tbody tr:nth-child(even) { background: #f9fafb; }
#switch-selector .switch-results-table tbody tr:hover { background: #f5f6f8; }
#switch-selector .switch-results-table tbody td {
    padding: .82rem 1.1rem;
    vertical-align: middle;
    border-bottom: 1px solid #e6e9ef;
}
#switch-selector .switch-results-table tbody tr:last-child td { border-bottom: 0; }
#switch-selector .switch-result-model { font-size: .96rem; line-height: 1.35; }
#switch-selector .switch-result-model a { text-underline-offset: 3px; }
#switch-selector .switch-result-description { max-width: none; color: #263653; font-size: .95rem; line-height: 1.45; }
#switch-selector .switch-result-price { color: #102549; font-variant-numeric: tabular-nums; font-size: .96rem; }
#switch-selector .switch-result-order form { display: flex; justify-content: flex-end; }
#switch-selector .switch-product-button,
#switch-selector .switch-result-order > .selector-swap-button {
    min-height: 2.55rem;
    height: 2.55rem;
    padding: .5rem .9rem;
    border-radius: 9px;
    font-size: .88rem;
    box-shadow: none;
}
#switch-selector .switch-result-requirement {
    margin-top: .45rem;
    color: #8a4b08;
    font-size: .875rem;
    line-height: 1.45;
}
#switch-selector .switch-seo-section {
    position: relative;
    margin-top: 5rem;
    padding: 2.25rem;
    border: 1px solid var(--switch-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 14px 38px rgba(15, 25, 42, .07);
}
#switch-selector .switch-seo-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 2.25rem;
    width: 5rem;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: var(--switch-blue);
}
#switch-selector .switch-seo-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.25rem;
}
#switch-selector .switch-seo-heading h2,
#switch-selector .switch-match-section h2 {
    max-width: 760px;
    margin-top: .35rem;
    color: var(--color-ink);
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    font-weight: 600;
    line-height: 1.15;
}
#switch-selector .switch-seo-heading > p {
    max-width: 430px;
    color: #526079;
    line-height: 1.65;
}
#switch-selector .switch-seo-intro {
    max-width: 900px;
    color: #43526d;
    font-size: 1.05rem;
    line-height: 1.75;
}
#switch-selector .switch-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.6rem;
}
#switch-selector .switch-guide-grid article {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 1.4rem;
    border: 1px solid var(--switch-line);
    border-radius: 14px;
    background: linear-gradient(160deg, #fff, #f8f9fa);
    box-shadow: 0 8px 22px rgba(15, 25, 42, .055);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
#switch-selector .switch-guide-grid article::after { content: ''; position: absolute; inset: auto 0 0; height: 3px; background: var(--switch-blue); opacity: .8; }
#switch-selector .switch-guide-grid article:hover { border-color: #a7bbdd; box-shadow: 0 14px 32px rgba(13, 91, 215, .11); transform: translateY(-3px); }
#switch-selector .switch-guide-grid article > span {
    color: var(--selector-blue);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .12em;
}
#switch-selector .switch-guide-grid h3 {
    margin-top: .6rem;
    color: var(--color-ink);
    font-size: 1.15rem;
    font-weight: 600;
}
#switch-selector .switch-guide-grid p {
    margin-top: .55rem;
    color: #526079;
    line-height: 1.65;
}
#switch-selector .switch-tender-section {
    border-color: #d4d9e2;
    background: linear-gradient(145deg, #fff, #f2f4f7);
}
#switch-selector .switch-tender-section::before { background: var(--color-primary); }
#switch-selector .switch-spec-table-shell {
    overflow-x: auto;
    margin-top: 1.5rem;
    border: 1px solid var(--switch-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(15, 25, 42, .07);
}
#switch-selector .switch-spec-table { width: 100%; border-collapse: collapse; }
#switch-selector .switch-spec-table th,
#switch-selector .switch-spec-table td { padding: .9rem 1rem; border-bottom: 1px solid #ebedf1; text-align: left; }
#switch-selector .switch-spec-table th { color: #f7f8fa; background: var(--color-ink-soft); font-size: .875rem; font-weight: 600; }
#switch-selector .switch-spec-table td { color: #35445e; font-size: .95rem; }
#switch-selector .switch-spec-table td:first-child { color: var(--color-ink); font-weight: 500; }
#switch-selector .switch-spec-table tbody tr:nth-child(even) { background: #f8f9fa; }
#switch-selector .switch-spec-table tbody tr:hover { background: #f3f4f7; }
#switch-selector .switch-spec-table tr:last-child td { border-bottom: 0; }
#switch-selector .switch-match-section {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 2.5rem;
    overflow: hidden;
    border-radius: 18px;
    color: #edeff3;
    border-color: var(--color-brand-dark);
    background:
        linear-gradient(135deg, var(--color-ink) 0%, var(--color-brand-mid) 52%, var(--color-primary) 120%);
    box-shadow: 0 22px 52px rgba(15, 25, 42, .18);
}
#switch-selector .switch-match-section::before { background: #afc1e1; }
#switch-selector .switch-match-section .selector-section-kicker { color: #e9ecf0; }
#switch-selector .switch-match-section h2 { color: #fff; }
#switch-selector .switch-match-section > p { line-height: 1.75; }
#switch-selector .switch-related-links { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
#switch-selector .switch-related-links a {
    display: grid;
    padding: 1.2rem;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 12px;
    color: #fff;
    background: rgba(255,255,255,.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
#switch-selector .switch-related-links a:hover { border-color: rgba(233, 236, 240, .78); background: rgba(255,255,255,.12); transform: translateY(-2px); }
#switch-selector .switch-related-links span { margin-top: .35rem; color: #dee2e9; line-height: 1.55; }
#switch-selector .switch-related-links em { margin-top: .9rem; color: #e9ecf0; font-style: normal; font-weight: 600; }
#switch-selector .switch-faq-section {
    width: min(1040px, calc(100vw - 2rem));
    margin-inline: auto;
    padding-inline: 2rem;
    border: 1px solid var(--switch-line);
    border-radius: 18px;
    background: #f8f9fa;
    box-shadow: 0 14px 36px rgba(15, 25, 42, .06);
}
#switch-selector .switch-faq-section .collapse {
    border-color: #cbd5e5;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#switch-selector .switch-faq-section .collapse:hover {
    border-color: #b1c3e2;
    box-shadow: 0 8px 20px rgba(13, 91, 215, .07);
    transform: translateY(-1px);
}
#switch-selector .switch-faq-section .collapse:has(input:checked) {
    border-color: var(--color-primary);
    box-shadow: 0 10px 24px rgba(13, 91, 215, .09);
}
#switch-selector [data-poe-unrestricted] {
    border: 1px solid #d4d9e2;
    color: #455879;
    background: #f5f6f8;
    opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
    #switch-selector .l23-reveal {
        transform: translate3d(0, 30px, 0) scale(.992);
        transition-duration: .72s;
        transition-timing-function: cubic-bezier(.2, .78, .2, 1);
    }
    #switch-selector .l23-reveal[data-reveal="fade"] { transform: none; }
    #switch-selector .l23-reveal.l23-visible { transform: translate3d(0, 0, 0) scale(1); }
}
/* Below 960px each result row becomes a card: narrower tables cannot fit a nowrap
   price next to the order button in their fixed 14%/18% columns. This is the only
   breakpoint for the results table: _switch_results.html has no responsive display
   classes, so the table, its column widths and its rows always switch together. */
@media (max-width: 959.98px) {
    #switch-selector .switch-results-shell { overflow: visible; border: 0; background: transparent; box-shadow: none; }
    #switch-selector .switch-results-table,
    #switch-selector .switch-results-table tbody { display: block; }
    #switch-selector .switch-results-table colgroup,
    #switch-selector .switch-results-table thead { display: none; }
    #switch-selector .switch-results-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: .7rem; overflow: hidden; border: 1px solid #c7d1e1; border-radius: 11px; background: #fff; box-shadow: 0 8px 20px rgba(5, 20, 47, .06); }
    #switch-selector .switch-results-table tbody tr:nth-child(even) { background: #f8f9fb; }
    #switch-selector .switch-results-table tbody td { padding: .75rem .85rem; border-bottom: 0; }
    #switch-selector .switch-results-table td[colspan] { grid-column: 1 / -1; }
    #switch-selector .switch-result-model,
    #switch-selector .switch-result-price { padding-bottom: .6rem !important; }
    #switch-selector .switch-result-model { order: 1; min-width: 0; }
    #switch-selector .switch-result-price { order: 2; }
    #switch-selector .switch-result-description {
        order: 3;
        grid-column: 1 / -1;
        padding-top: .8rem !important;
        padding-bottom: .8rem !important;
        border-top: 1px solid #e6e9ef;
    }
    #switch-selector .switch-result-order { order: 4; grid-column: 1 / -1; padding-top: 0 !important; }
    #switch-selector .switch-product-button,
    #switch-selector .switch-result-order > .selector-swap-button { min-height: 2.7rem; height: 2.7rem; }
}
@media (max-width: 680px) {
    #switch-selector .selector-page-width { width: 100%; }
    #switch-selector .selector-data-badge { font-size: .75rem; }
    #switch-selector .selector-form-card { border-radius: 16px; }
    #switch-selector .selector-form-card nav[aria-label="Selection steps"] { padding: .7rem .35rem .8rem !important; }
    #switch-selector .switch-steps { gap: 0; }
    #switch-selector .selector-submit-button { padding-inline: 1rem; }
    #switch-selector [data-step-panel] { padding: 1rem; }
    #switch-selector [data-port-side] { padding: .85rem; }
    #switch-selector [data-port-side] > div { gap: .5rem; }
    #switch-selector #switch-results { padding: 1rem; border-radius: 16px; }
    #switch-selector .switch-seo-section { width: 100%; margin-top: 3.5rem; padding: 1.35rem; border-radius: 17px; }
    #switch-selector .switch-seo-section::before { left: 1.35rem; }
    #switch-selector .switch-seo-heading { display: block; }
    #switch-selector .switch-seo-heading > p { margin-top: .75rem; }
    #switch-selector .switch-guide-grid,
    #switch-selector .switch-related-links { grid-template-columns: 1fr; }
    #switch-selector .switch-tender-section,
    #switch-selector .switch-match-section { padding: 1.25rem; }
    #switch-selector .switch-match-section { grid-template-columns: 1fr; gap: 1rem; }
}
/* Below 768px .stack-table turns each tender row into a card; drop the row borders and padding the id rules add. */
@media (max-width: 767.98px) {
    #switch-selector .switch-spec-table td { padding: .2rem 0; border-bottom: 0; }
    #switch-selector .switch-spec-table td[data-label] { padding-top: .45rem; font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
    #switch-selector button,
    #switch-selector .switch-guide-grid article,
    #switch-selector .switch-related-links a { transition: none; transform: none; }
}

/* Hero background: shared .tool-hero aurora and logo-trace motif (tailwind.css). */
#switch-selector .switch-hero { min-height: 0; }
#switch-selector .switch-hero-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(22rem, .65fr);
    align-items: center;
    gap: 2rem;
    padding-block: 5.5rem 7.5rem;
}
#switch-selector .switch-hero-copy { max-width: 760px; }
#switch-selector .switch-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: #8fb3e6;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
}
#switch-selector .switch-hero-eyebrow::before { content: ''; width: 1.1rem; height: 2px; background: #2f7cf6; }
#switch-selector .switch-hero h1 { max-width: none; margin: .75rem 0 0; color: #fff; font-size: clamp(2.65rem, 4.1vw, 3.65rem); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; }
#switch-selector .switch-hero h1 span { color: #e9ecf0; }
#switch-selector .switch-hero-lead { color: #e8ebf0; font-size: 1.3rem; line-height: 1.4; margin-top: .9rem; }
#switch-selector .switch-hero-description { max-width: 48rem; color: #9badc6; font-size: 1rem; line-height: 1.65; margin-top: .5rem; }
#switch-selector .switch-hero-coverage { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; margin-top: 1rem; color: #9badc6; font-size: .875rem; }
#switch-selector .switch-hero-coverage strong { color: #fff; font-weight: 500; }
#switch-selector .switch-hero-attribution { color: #a9bbd9; }
@media (max-width: 960px) {
    #switch-selector .switch-hero-copy { max-width: 820px; }
    #switch-selector .switch-hero-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    #switch-selector .switch-hero-layout { width: calc(100% - 2rem); padding-block: 3rem 5.5rem; }
    #switch-selector .switch-hero h1 { font-size: 2.35rem; }
    #switch-selector .switch-hero-lead { font-size: 1.16rem; }
    #switch-selector .switch-hero-description { line-height: 1.58; }
    #switch-selector .switch-hero-coverage { margin-top: .9rem; }
}

/* Simple / expert selection modes. */
#switch-selector .switch-mode-heading {
    align-items: flex-end;
    margin: 0;
    padding: 1.85rem 2rem 1rem;
}
#switch-selector .switch-mode-heading > p {
    max-width: 31rem;
    color: var(--switch-muted);
    font-size: 1rem;
    line-height: 1.55;
}
#switch-selector .switch-mode-picker {
    padding: 0 2rem 1.75rem;
}
#switch-selector .switch-mode-picker > legend {
    float: left;
    color: var(--color-ink);
    font-size: 1.05rem;
    font-weight: 600;
}
#switch-selector .switch-mode-picker > p {
    float: right;
    margin-top: .15rem;
    color: #647289;
    font-size: .875rem;
}
#switch-selector .switch-mode-grid {
    clear: both;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding-top: .65rem;
}
#switch-selector .switch-mode-card {
    display: grid;
    grid-template-columns: 3.1rem minmax(0, 1fr) auto;
    gap: .9rem;
    align-items: center;
    min-height: 6.35rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--switch-line);
    border-radius: 14px;
    color: var(--color-ink);
    background: linear-gradient(145deg, #fff, #f8f9fa);
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#switch-selector .switch-mode-card:hover {
    border-color: #a7bbdd;
    box-shadow: 0 10px 24px rgba(13, 91, 215, .09);
    transform: translateY(-1px);
}
#switch-selector .switch-mode-card.is-active {
    border-color: var(--color-primary);
    color: var(--color-ink);
    background: #f5f6f8;
    box-shadow: 0 10px 26px rgba(13, 91, 215, .12), inset 4px 0 0 var(--color-primary);
}
#switch-selector .switch-mode-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: 1px solid #b9c9e5;
    border-radius: 11px;
    color: var(--switch-blue-strong);
    background: #f0f2f5;
}
#switch-selector .switch-mode-icon svg { width: 1.45rem; height: 1.45rem; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#switch-selector .switch-mode-card.is-active .switch-mode-icon {
    border-color: var(--color-primary);
    color: white;
    background: var(--color-primary);
}
#switch-selector .switch-mode-card strong,
#switch-selector .switch-mode-card small { display: block; }
#switch-selector .switch-mode-card strong { font-size: 1.2rem; }
#switch-selector .switch-mode-card small {
    margin-top: .2rem;
    color: #5c6a82;
    font-size: .875rem;
    line-height: 1.3;
}
#switch-selector .switch-mode-card.is-active small { color: #52617a; }
#switch-selector .switch-mode-card em {
    align-self: start;
    padding: .3rem .55rem;
    border-radius: 999px;
    color: #17479a;
    background: #eef0f3;
    font-size: .7rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
#switch-selector .switch-mode-card.is-active em {
    color: var(--color-brand-dark);
    background: #e9ecf0;
}
#switch-selector .switch-selection-workspace {
    padding: 1.55rem 2rem 1.9rem;
    border-top: 1px solid var(--switch-line);
    background: var(--switch-surface-soft);
}
#switch-selector .switch-mode-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem;
    padding: 0 .15rem;
}
#switch-selector .switch-mode-summary strong,
#switch-selector .switch-mode-summary span { display: block; }
#switch-selector .switch-mode-summary strong { font-size: 1.15rem; }
#switch-selector .switch-mode-summary div > span {
    margin-top: .2rem;
    color: var(--switch-muted);
    font-size: .9rem;
}
#switch-selector .switch-mode-summary > span {
    padding: .35rem .65rem;
    border: 1px solid var(--switch-line);
    border-radius: 999px;
    color: #465876;
    background: rgba(255,255,255,.7);
    font-size: .875rem;
    white-space: nowrap;
}
#switch-selector .switch-paused-note {
    margin: 0 0 1rem;
    padding: .75rem .9rem;
    border: 1px solid #c2d0e8;
    border-radius: 10px;
    color: #314d7e;
    background: #f5f6f8;
    font-size: .875rem;
}
#switch-selector .selector-form-card nav[aria-label="Expert selection steps"] {
    margin-bottom: 1.2rem;
    padding: 1rem 1rem 1.1rem;
    border: 1px solid var(--switch-line);
    border-radius: 14px;
    background: #f2f4f7;
}
#switch-selector .switch-selection-panels { min-width: 0; }
#switch-selector .selector-form-card[data-selection-mode="simple"] .switch-selection-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "ports ports"
        "poe performance";
    gap: 1rem;
    align-items: start;
}
#switch-selector .selector-form-card[data-selection-mode="simple"] [data-step-panel="1"] { grid-area: ports; }
#switch-selector .selector-form-card[data-selection-mode="simple"] [data-step-panel="2"] { grid-area: poe; }
#switch-selector .selector-form-card[data-selection-mode="simple"] [data-step-panel="4"] { grid-area: performance; }
#switch-selector .selector-form-card[data-selection-mode="simple"] [data-step-panel] { padding: 1.25rem; }
#switch-selector .switch-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
#switch-selector .switch-panel-heading p {
    margin-top: .25rem;
    color: var(--switch-muted);
    font-size: .9rem;
    line-height: 1.5;
}
#switch-selector .switch-panel-badge {
    padding: .35rem .65rem;
    border-radius: 999px;
    border: 1px solid #c2d0e8;
    color: var(--switch-blue-strong);
    background: #f5f6f8;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}
#switch-selector .switch-port-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}
#switch-selector .switch-port-group {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--switch-line);
    border-radius: 12px;
    background: linear-gradient(180deg, #fff, #fcfcfd);
    box-shadow: 0 6px 18px rgba(15, 25, 42, .04);
}
#switch-selector .switch-port-group > legend {
    padding-inline: .2rem;
    font-size: 1.02rem;
    color: var(--switch-navy-soft);
    font-weight: 600;
}
#switch-selector .switch-port-row {
    display: grid;
    grid-template-columns: 2rem minmax(6.2rem, .72fr) minmax(7rem, 1fr) minmax(6.2rem, .82fr) 2.8rem;
    gap: .55rem;
    align-items: end;
}
#switch-selector .switch-port-row + .switch-port-row { margin-top: .75rem; }
#switch-selector .switch-port-row label {
    min-width: 0;
    color: #42526e;
    font-size: .78rem;
}
#switch-selector .switch-row-number {
    display: grid;
    height: 3rem;
    place-items: center;
    border-radius: 8px;
    color: var(--switch-blue-strong);
    background: #eff1f5;
    font-size: .8rem;
    font-weight: 600;
}
#switch-selector .switch-remove-row {
    display: grid;
    width: 2.8rem;
    height: 3rem;
    place-items: center;
    border: 1px solid #d4d9e2;
    border-radius: 8px;
    color: #60708d;
    background: white;
    font-size: 1.2rem;
    cursor: pointer;
}
#switch-selector .switch-add-row {
    margin-top: .75rem;
    padding: .38rem .55rem;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--switch-blue-strong);
    background: transparent;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
}
#switch-selector .switch-add-row:hover { border-color: #c2d0e8; background: #f5f6f8; }
#switch-selector .switch-port-limit {
    float: right;
    margin-top: .85rem;
    color: #748197;
    font-size: .75rem;
}
#switch-selector .switch-poe-fields {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: .85rem;
    margin-top: 1rem;
}
#switch-selector .switch-poe-fields label:first-child { grid-column: 1 / -1; }
#switch-selector .switch-poe-fields label { color: #42526e; font-size: .82rem; }
#switch-selector .switch-field-note {
    margin-top: .75rem;
    color: var(--switch-muted);
    font-size: .8rem;
    line-height: 1.5;
}
#switch-selector .switch-deployment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
#switch-selector .selector-form-card[data-selection-mode="simple"] .switch-deployment-grid { grid-template-columns: 1fr; }
#switch-selector .selector-form-card[data-selection-mode="simple"] [data-performance-fieldset] {
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}
#switch-selector .selector-form-card[data-selection-mode="simple"] [data-performance-fieldset] legend { display: none; }
#switch-selector .switch-step-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--switch-line);
}
#switch-selector .switch-requirements { margin-top: 1.2rem; }
#switch-selector .switch-filter-toolbar {
    position: sticky;
    z-index: 18;
    bottom: 1rem;
    display: grid;
    grid-template-columns: 3.15rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border-left-width: 1px;
    border-top: 4px solid #afc1e1;
    box-shadow: 0 18px 42px rgba(15, 25, 42, .22), 0 4px 12px rgba(15, 25, 42, .12);
}
#switch-selector .switch-action-marker {
    display: grid;
    width: 3.15rem;
    height: 3.15rem;
    place-items: center;
    border: 1px solid rgba(233, 236, 240, .55);
    border-radius: 12px;
    color: #fff;
    background: rgba(255,255,255,.1);
}
#switch-selector .switch-action-marker svg {
    width: 1.55rem;
    height: 1.55rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.8;
}
#switch-selector .switch-action-copy > p:nth-child(2) {
    color: #fff;
    font-size: 1.08rem;
    font-weight: 600;
}
#switch-selector .switch-action-kicker {
    margin-bottom: .15rem;
    color: #e9ecf0;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}
#switch-selector .switch-action-copy [data-update-label] {
    margin-top: .2rem;
    color: #e9ecf0;
    font-size: .82rem;
}
#switch-selector .switch-action-controls {
    display: flex;
    align-items: center;
    gap: .85rem;
}
#switch-selector .switch-action-controls > span {
    padding: .42rem .65rem;
    border: 1px solid rgba(233, 236, 240, .38);
    border-radius: 999px;
    color: #edeff3;
    font-size: .78rem;
    white-space: nowrap;
}
#switch-selector .switch-filter-toolbar .selector-submit-button {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    min-height: 3.3rem;
    padding: .72rem .82rem .72rem 1.2rem;
    border-color: #fff;
    color: var(--color-brand-mid);
    background: #fff;
    box-shadow: 0 10px 25px rgba(15, 25, 42, .2);
}
#switch-selector .switch-filter-toolbar .selector-submit-button:hover {
    color: var(--color-brand-dark);
    background: #f5f7f9;
}
#switch-selector .switch-action-arrow {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 8px;
    color: var(--color-brand-dark);
    background: #e9ecf0;
    font-size: 1.2rem;
}

/* Two mode cards leave the badge its own column only from about 1080px; narrower
   cards move it under the description so the text column stays readable. */
@media (max-width: 1080px) {
    #switch-selector .switch-mode-card { grid-template-columns: 3.1rem minmax(0, 1fr); }
    #switch-selector .switch-mode-card em { grid-column: 2; justify-self: start; margin-top: -.35rem; }
    /* A port row needs about 422px, so Downlink and Uplink sit side by side only above this width. */
    #switch-selector .switch-port-columns { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
    #switch-selector .switch-mode-heading { display: block; }
    #switch-selector .switch-mode-heading > p { margin-top: .65rem; }
    #switch-selector .selector-form-card[data-selection-mode="simple"] .switch-selection-panels {
        grid-template-columns: 1fr;
        grid-template-areas: "ports" "poe" "performance";
    }
    #switch-selector .switch-deployment-grid { grid-template-columns: 1fr; }
    /* The chips above already list the requirements; the pill would squeeze the action copy. */
    #switch-selector .switch-action-controls > span { display: none; }
}
@media (max-width: 680px) {
    #switch-selector .switch-mode-heading,
    #switch-selector .switch-mode-picker,
    #switch-selector .switch-selection-workspace { padding-left: 1rem; padding-right: 1rem; }
    #switch-selector .switch-mode-grid { grid-template-columns: 1fr; }
    #switch-selector .switch-mode-picker > p { float: none; clear: both; padding-top: .25rem; }
    #switch-selector .switch-mode-card { grid-template-columns: 2.65rem minmax(0, 1fr); min-height: 5.8rem; padding: .85rem; }
    #switch-selector .switch-mode-icon { width: 2.55rem; height: 2.55rem; }
    #switch-selector .switch-mode-summary { align-items: flex-start; }
    #switch-selector .switch-port-row {
        grid-template-columns: 1.8rem minmax(0, 1fr) minmax(0, 1fr) 2.65rem;
    }
    #switch-selector .switch-port-row label:nth-of-type(3) { grid-column: 2 / 4; }
    #switch-selector .switch-port-row .switch-remove-row { grid-column: 4; }
    #switch-selector .switch-poe-fields { grid-template-columns: 1fr; }
    #switch-selector .switch-poe-fields label:first-child { grid-column: auto; }
    #switch-selector .switch-panel-heading { display: block; }
    #switch-selector .switch-panel-badge { display: inline-block; margin-top: .6rem; }
    #switch-selector .switch-filter-toolbar {
        bottom: .5rem;
        grid-template-columns: 1fr;
        padding: .65rem;
    }
    #switch-selector .switch-action-marker,
    #switch-selector .switch-action-copy { display: none; }
    #switch-selector .switch-action-controls {
        grid-column: auto;
    }
    #switch-selector .switch-filter-toolbar .selector-submit-button {
        width: 100%;
        min-height: 3rem;
        justify-content: space-between;
    }
}

/* Copy revision 2026-09-11 */
#switch-selector .switch-hero-attribution { margin-top: .45rem; color: #a9bbd9; font-size: .8125rem; }
#switch-selector .switch-feature-search-row { display: flex; justify-content: flex-end; margin-bottom: .75rem; }
#switch-selector .switch-match-section > p a { color: #e9ecf0; text-decoration: underline; text-underline-offset: 2px; }
#switch-selector .switch-empty-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1rem; max-width: 40rem; margin: 1.5rem auto 0; padding-top: 1.25rem; border-top: 1px solid #dee2e9; }
#switch-selector .switch-empty-help p { color: #455673; font-size: .875rem; }