.jobs-main {
    width: min(1540px, 100%);
    margin: 0 auto;
    padding: 20px clamp(14px, 3vw, 40px) 72px;
}

/* Numbers on this page change as levels are scaled, so keep digits the same
   width - otherwise 9 -> 10 silently reflows whatever sits next to them. */
.jobs-main {
    font-variant-numeric: tabular-nums;
}

.job-picker-shell {
    position: sticky;
    top: var(--sticky-header-height, 0px);
    z-index: 20;
    display: flex;
    margin: 0 0 18px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* 1px, not 0: a zero-height block lets the heading's bottom margin and the
   shell's top margin collapse straight through it, so the sentinel would move
   whenever those margins changed and the observer would flip back and forth. */
.job-picker-sentinel {
    height: 1px;
    margin: 0;
    pointer-events: none;
}

/* Condensed form once the picker parks under the header. The extra
   margin-bottom replaces exactly the height the bar loses (measured once in
   jobs.js), so the document keeps the same height and nothing below shifts.
   Never change margin-top here - that moves the sentinel and causes a loop. */
.job-picker-shell.is-stuck {
    margin-bottom: calc(18px + var(--jobs-picker-shrink, 0px));
    padding: 6px 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.job-picker-shell.is-stuck .job-pick {
    padding: 4px 4px 3px;
}

.job-picker-shell.is-stuck .job-pick img {
    width: 30px;
    height: 30px;
    margin-bottom: 2px;
}

.job-picker-shell.is-stuck .job-pick span {
    font-size: 0.62rem;
}

.job-picker {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 9px;
}

.job-picker-shell.is-stuck .job-picker {
    gap: 6px;
}

.school-quick-switch {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    display: flex;
    max-width: min(680px, calc(100vw - 28px));
    gap: 6px;
    padding: 7px;
    overflow-x: auto;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--bg-primary) 96%, transparent);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-5px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    scrollbar-width: none;
}

.school-quick-switch::-webkit-scrollbar {
    display: none;
}

.job-picker-shell.is-stuck.show-school-switch .school-quick-switch {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.school-quick-tab {
    display: grid;
    grid-template-columns: 34px max-content;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 5px 11px 5px 6px;
    color: var(--text-muted);
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.school-quick-tab img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.school-quick-tab:hover {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent) 48%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 9%, var(--bg-tertiary));
}

.school-quick-tab:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 85%, white);
    outline-offset: 1px;
}

.school-quick-tab[aria-selected="true"] {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent) 68%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 18%, var(--bg-tertiary));
}

.job-pick,
.school-tab {
    color: var(--text-muted);
    border: 1px solid transparent;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.job-pick {
    flex: 0 0 86px;
    min-width: 0;
    border-radius: var(--radius);
    padding: 9px 5px 7px;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.job-pick img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    display: block;
    margin: 0 auto 5px;
    filter: saturate(0.72);
}

.job-pick span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 750;
}

.job-pick:hover {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border-color));
    background: var(--bg-tertiary);
}

.job-pick:hover img {
    filter: saturate(1);
}

.job-pick[aria-selected="true"] {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent) 65%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 18%, var(--bg-tertiary));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}

.job-pick[aria-selected="true"] img {
    filter: saturate(1);
}

.job-hero {
    min-height: 300px;
    display: grid;
    grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.4fr);
    align-items: stretch;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-secondary);
}

.job-art-stage {
    min-height: 300px;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: min(1vw, 14px);
    background: var(--bg-tertiary);
    overflow: hidden;
}

.job-art-stage img {
    width: min(56%, 315px);
    max-height: 296px;
    object-fit: contain;
    object-position: center bottom;
    margin: 0 -7%;
}

.job-art-stage img:only-child {
    width: min(76%, 370px);
    margin: 0;
}

.job-identity {
    padding: clamp(22px, 3vw, 40px);
    align-self: center;
}

.job-identity h2 {
    margin: 5px 0 10px;
    font-size: clamp(1.9rem, 3.2vw, 3rem);
    line-height: 1;
    letter-spacing: -0.055em;
}

.job-identity > p {
    max-width: 720px;
    color: var(--text-secondary);
}

.school-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    max-width: 640px;
    gap: 10px;
    margin-top: 20px;
}

.school-tab {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 64px auto;
    justify-items: center;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 14px 10px 16px;
    border-radius: 10px;
    border-color: var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    text-align: center;
    line-height: 1.3;
    font-weight: 800;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.school-tab img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.school-tab:hover {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent) 65%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 9%, var(--bg-tertiary));
    transform: translateY(-1px);
}

.school-tab:hover img {
    transform: scale(1.05);
}

.school-tab:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 85%, white);
    outline-offset: 3px;
}

.school-tab[aria-selected="true"] {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent) 72%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 17%, var(--bg-tertiary));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

.school-tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    right: 22%;
    bottom: 0;
    left: 22%;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: color-mix(in srgb, var(--accent) 78%, white);
}

.school-tab[aria-selected="true"] img {
    filter: drop-shadow(0 3px 7px color-mix(in srgb, var(--accent) 42%, transparent));
}

.school-content {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

@media (min-width: 1280px) {
    .school-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jobs-section.span-2 {
        grid-column: 1 / -1;
    }

    /* The paired cards keep one constant height so the row does not grow and
       shrink as you move between jobs and builds. The floor covers the busiest
       case in the data - 4 weapon types, or 3 weapons plus the shadow glove -
       and the default stretch alignment then matches the two to each other. */
    .school-content > .jobs-section:not(.span-2) {
        min-height: var(--jobs-pair-height, 380px);
    }
}

.jobs-section {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    overflow: hidden;
}

.jobs-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 21px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.jobs-section h3 {
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}

.jobs-section-body {
    padding: 18px 21px 22px;
}

.weapon-chart {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.weapon-type-card {
    display: grid;
    gap: 11px;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-tertiary);
}

.weapon-type-card strong {
    color: color-mix(in srgb, var(--accent) 70%, var(--text-primary));
}

.size-bars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.size-bar {
    text-align: center;
    border-radius: var(--radius);
    padding: 8px 5px;
    color: var(--text-muted);
    background: var(--bg-primary);
    font-size: 0.72rem;
}

.size-bar b {
    display: block;
    color: var(--text-primary);
    font-size: 1rem;
}

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
    gap: 11px;
}

.item-tile,
.stunt-tile {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-tertiary);
}

.item-tile img,
.stunt-tile img {
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    object-fit: contain;
}

.item-tile:hover,
.reward-item:hover,
.item-tile:focus,
.reward-item:focus {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border-color));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
    outline: none;
}

.tile-copy {
    min-width: 0;
}

.tile-copy strong {
    display: block;
    color: var(--text-primary);
    line-height: 1.25;
}

.tile-copy span {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.stunt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 11px;
}

.stunt-tile {
    align-items: flex-start;
}

.skill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 62px);
    gap: 10px;
}

.skill-card {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    padding: 5px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-tertiary);
    cursor: pointer;
}

.skill-card img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.skill-card:hover,
.skill-card:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border-color));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
    outline: none;
}

.stunt-tile.stunt-gold {
    border-color: rgba(247, 183, 74, 0.75);
}

.stunt-tile p {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.stunt-tile p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.stunt-group + .stunt-group {
    margin-top: 22px;
}

/* Tiers and gear groups sit side by side; each holds a short stack of cards. */
.skill-tiers,
.gear-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    align-items: start;
}

.gear-groups .tile-grid {
    grid-template-columns: minmax(0, 1fr);
}

.stunt-group h4,
.skill-tier h4,
.gear-group h4 {
    margin-bottom: 10px;
    color: color-mix(in srgb, var(--accent) 70%, var(--text-primary));
    font-size: 0.84rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.enchant-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 16px;
}

.slot-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 7px;
}

.slot-button {
    width: 100%;
    min-height: 60px;
    padding: 8px;
    color: var(--text-muted);
    text-align: center;
    font: inherit;
    font-weight: 750;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-tertiary);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.slot-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.slot-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.slot-button:hover {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border-color));
}

.slot-button[aria-selected="true"] {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent) 65%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 22%, var(--bg-tertiary));
}

.enchant-sets {
    display: grid;
    gap: 11px;
}

.hand-switch {
    display: flex;
    gap: 7px;
}

.hand-switch .slot-button {
    width: auto;
    min-width: 76px;
    text-align: center;
}

.enchant-set {
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-tertiary);
}

.enchant-set-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.enchant-set-top h4 {
    color: color-mix(in srgb, var(--accent) 70%, var(--text-primary));
}

/* Sizing/colour come from .skill-controls and .skill-btn in the shared
   stylesheet so these match the skill planner exactly - do not restyle the
   buttons here, a `.level-controls button` rule outranks `.skill-btn`. */
.level-controls {
    flex: 0 0 auto;
}

.gem-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.gem-chip {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 7px 10px;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-primary);
}

.gem-chip > div {
    min-width: 0;
}

.gem-chip img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.gem-chip strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.78rem;
}

.gem-chip span {
    display: block;
    font-size: 0.7rem;
}

.gem-chip .gem-cost {
    white-space: nowrap;
}

.gem-chip .gem-effect {
    margin: 2px 0;
    color: color-mix(in srgb, var(--accent) 70%, var(--text-primary));
    font-weight: 750;
}

.effect-list {
    margin-top: 12px;
    display: grid;
    gap: 4px;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.effect-list div::before {
    content: "\25C6";
    color: color-mix(in srgb, var(--accent) 70%, var(--text-primary));
    margin-right: 7px;
    font-size: 0.62rem;
}

.master-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 12px;
}

.master-tier {
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-tertiary);
}

.master-tier-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.master-tier-head strong {
    color: color-mix(in srgb, var(--accent) 70%, var(--text-primary));
}

.reward-item {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 6px 9px;
    background: var(--bg-primary);
}

.reward-item img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.requirement-list {
    display: grid;
    gap: 7px;
}

.requirement {
    display: grid;
    grid-template-columns: 27px 1fr;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.requirement img {
    width: 27px;
    height: 27px;
    object-fit: contain;
}

.empty-inline {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Item tooltip - mirrors the Equipment nav component. */

.jobs-tooltip {
    position: fixed;
    z-index: 1000;
    width: 320px;
    max-width: calc(100vw - 24px);
    max-height: min(520px, calc(100vh - 24px));
    overflow: auto;
    pointer-events: none;
    padding: 1rem;
    color: var(--text-primary);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: rgba(20, 22, 28, 0.98);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    font-size: 0.9rem;
}

.tooltip-header {
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    gap: 10px;
}

.jobs-tooltip .tooltip-icon {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: contain;
}

.tooltip-title {
    font-weight: 700;
    line-height: 1.25;
}

.tooltip-subtitle,
.tooltip-meta {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.tooltip-meta {
    margin-top: 3px;
}

.tooltip-desc {
    margin-top: 10px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
}

.tooltip-section {
    margin-top: 10px;
}

.tooltip-section-title {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 4px;
    color: color-mix(in srgb, var(--accent) 70%, var(--text-primary));
}

.tooltip-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* Detail modal - replaces the hover tooltip on narrow screens. */

.jobs-detail-modal .refine-modal-card {
    width: min(560px, 95vw);
}

.jobs-detail-modal .refine-modal-body {
    padding: 16px 18px 20px;
}

.jobs-detail-modal .tooltip-header {
    grid-template-columns: 52px 1fr;
}

.jobs-detail-modal .tooltip-icon {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.quality-6 { color: #fa7575; }
.quality-5 { color: #f4a15f; }
.quality-4 { color: #c690ed; }
.quality-3 { color: #79aef2; }

@media (max-width: 1120px) {
    /* A touch rail, so no scrollbar chrome - it reads as a stray grey bar on a
       phone. The mask hints that the row continues past the edge instead. */
    .job-picker {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scroll-padding: 0 12px;
        -webkit-mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 22px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 22px), transparent);
    }

    .job-picker::-webkit-scrollbar {
        display: none;
    }

    .job-pick {
        flex: 0 0 86px;
        scroll-snap-align: center;
    }

    .job-picker-shell.is-stuck .job-pick {
        flex: 0 0 62px;
    }

    .job-hero {
        grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1fr);
    }
}

@media (max-width: 1100px) {
    .jobs-tooltip {
        display: none !important;
    }
}

@media (max-width: 760px) {
    .jobs-main {
        padding: 20px 8px 36px;
    }

    .job-picker-shell {
        position: static;
        top: auto;
        z-index: auto;
        width: auto;
        margin: 0 0 10px;
        padding: 8px;
        box-shadow: none;
    }

    .school-quick-switch {
        display: none;
    }

    .job-picker {
        gap: 6px;
        scroll-padding: 0 8px;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .job-pick {
        flex-basis: 68px;
        padding: 6px 4px 5px;
    }

    .job-pick img {
        width: 42px;
        height: 42px;
        margin-bottom: 3px;
    }

    .job-pick span {
        font-size: 0.65rem;
    }

    .jobs-intro {
        align-items: start;
        flex-direction: column;
        border-radius: var(--radius-lg);
    }

    .job-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .job-art-stage {
        min-height: 220px;
    }

    .job-art-stage img {
        max-height: 220px;
    }

    .job-identity {
        padding: 16px 14px 18px;
    }

    .job-identity h2 {
        font-size: 2rem;
    }

    .job-identity > p {
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .school-tabs {
        gap: 6px;
        margin-top: 14px;
    }

    .school-tab {
        grid-template-rows: 44px auto;
        gap: 6px;
        padding: 10px 5px 12px;
        font-size: 0.75rem;
        overflow-wrap: anywhere;
    }

    .school-tab img {
        width: 44px;
        height: 44px;
    }

    .jobs-section-head,
    .jobs-section-body {
        padding-left: 14px;
        padding-right: 14px;
    }

    .enchant-layout {
        grid-template-columns: 1fr;
    }

    .slot-list {
        display: flex;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .slot-button {
        flex: 0 0 auto;
        min-width: 60px;
        width: auto;
    }

    .tile-grid,
    .stunt-grid,
    .master-grid {
        grid-template-columns: 1fr;
    }

    .enchant-set-top {
        align-items: flex-start;
    }

    .gem-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .gem-chip .gem-cost {
        white-space: nowrap;
    }
}