/* ==========================================================================
   THE PHONE LAYER (2026-09-26, mobile lane)

   Linked LAST in every base layout (after `{% block stylesheets %}`), so a rule here beats a
   page stylesheet's rule of the same specificity by ORDER — no `!important`, no selector
   inflation. Everything in it is inside a phone media query; nothing here applies on a desktop.

   A PHONE IS ALSO A PHONE ON ITS SIDE (owner, 2026-09-26: "When I turn my phone to landscape
   mode, it's not stretching the full width and is still showing a lot of desktop-esque styling
   and features"). An iPhone in landscape is 667–932px wide, past every width query, so each
   phone query here also matches `(orientation: landscape) and (max-height: 500px)` — no tablet
   or laptop is that short, and every phone on its side is (≤ 430px tall).

   Owner, 2026-09-26: "I am trying to think about how we visualize all our data for the Wage
   Magic site on mobile. Things are not rendering well" — and he asked for Tufte: maximise the
   share of the screen that is data. MEASURED at 390px (WebKit, iPhone 13) before this file: a
   Search row's chart got 262px of a 390px screen. The page container is 80% of the window at
   every size (`--home-page-width`, base/variables.css), which on a phone is 78px of empty
   margin, and a Career card adds 24px of padding a side inside the container's own 16px.
   ========================================================================== */
/* NO TEXT INFLATION ON iOS (owner, 2026-09-26, the skills table on his iPhone: "the text is way
   too big ... there must be a missing class or something"). There was no missing class: Safari
   enlarges the type of any block it judges too wide to read ("text autosizing"), and the table was
   wider than the phone, so its group headings came out at roughly twice their size. 100% keeps
   every size exactly what the stylesheets say, on every page. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
    /* The page is the full width of the phone, less the container's own 16px gutters. `auto`,
       not 100%: `.panel-inner` is content-box with padding, so 100% put it 32px wider than the
       screen (measured: 422px on a 390px phone). As a `max-width` (hero.css, dashboard.css)
       `auto` is invalid and falls back to `none`, which is the same "no cap" on a phone. */
    :root { --home-page-width: auto; }

    /* The "since your last visit" banner's × sits where the beta banner's does on a phone:
       pinned to the right edge of a centred strip (components/nav.css). */
    .career-deltas-dismiss {
        position: absolute;
        top: 50%;
        right: 2px;
        transform: translateY(-50%);
        margin: 0;
        min-width: 36px;
        min-height: 36px;
        font-size: 20px;
    }

    /* One 16px card inset on a phone instead of 24px: the card border already separates the
       card from the page, so the extra 8px a side was white space and not structure. */
    .career-page .seeker-card {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
}

/* ==========================================================================
   THE SUNBURST'S PHONE BAR LIST (2026-09-26) — seeker/career/_skillbars.html,
   pages/career_skillbars.js. Owner: "the sunburst chart is illegible"; he chose a ranked bar
   list grouped by the colour groups for phones, the sunburst kept for the desktop (four groups
   then; two from 2026-09-27; since round 4, 2026-09-28, three: "On your resume", "Related to
   your skills" and "Not on your resume", green, orange and red).
   MEASURED at 390px before: the sunburst held at `min-width: 520px`, scrolling sideways in a
   262px card, 67 rotated names at 8.9px.

   Low data-ink on purpose: no card or box per row, one hairline between rows, the group's colour
   used once on its swatch and on the bars that belong to it, the scale a faint 0–100 % track the
   bar sits in (the one piece of non-data ink kept, because a length needs its whole to be read),
   and every figure 13px or more. Nothing here applies above 720px, and the list is display:none
   there, so the desktop sunburst and everything around it are untouched.
   ========================================================================== */
.career-skillbars { display: none; }

@media (max-width: 720px), (orientation: landscape) and (max-height: 500px) {
    .career-skillchart-row .career-skillchart { display: none; }
    .career-skillbars { display: block; margin: 4px 0 20px; }
    /* In the chart's own slot: below 1360px the row is a column that orders the sticky ticker
       bar (-2), then the chart (-1), then the legend (pages/career_skills.css). */
    .career-page .career-skillchart-row > .career-skillbars { order: -1; }
    /* The legend's one-skill reading is redundant here: every row opens to the same sentences.
       The ticker, "Have any of these?" and the receipt stay. (The chart's key is inside the
       hidden <figure>: the list's group heads below carry the same swatch, words and count.) */
    .career-skillchart-row .career-skillchart-panel-skill { display: none; }

    .career-skillbars-group { margin: 0 0 20px; }
    .career-skillbars-head {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 0 0 6px;
        border-bottom: 1px solid var(--line_color);
        font-size: 14px;
        font-weight: var(--font-semibold, 600);
        line-height: 1.3;
        color: var(--text_color);
    }
    .career-skillbars-head .skillchart-key {
        display: inline-block;
        flex: 0 0 10px;
        width: 10px;
        height: 10px;
        border-radius: 2px;
    }
    .career-skillbars-head .skillchart-key-have { background: var(--skillchart-have, var(--status-success)); }
    .career-skillbars-head .skillchart-key-adjacent { background: var(--skillchart-adjacent, var(--status-warning)); }
    .career-skillbars-head .skillchart-key-missing { background: var(--skillchart-missing, var(--status-error)); }
    .career-skillbars-count {
        margin-left: auto;
        font-weight: 400;
        color: var(--text_color_shiny);
        font-variant-numeric: tabular-nums;
    }

    .career-skillbars-list { list-style: none; margin: 0; padding: 0; }
    .career-skillbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        border-bottom: 1px solid var(--line_color);
    }
    /* The 44px +/- column exists only when the calculator put buttons in it (career_skillbars.js
       adds `has-toggles`); signed out, the bars run the whole width. */
    .career-skillbars.has-toggles .career-skillbar {
        grid-template-columns: minmax(0, 1fr) 44px;
        column-gap: 6px;
    }
    .career-skillbars-group.is-collapsible:not(.is-expanded) .career-skillbar:nth-child(n+7) { display: none; }
    .career-skillbar-read { min-width: 0; }
    .career-skillbar-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "name value" "bar bar";
        align-items: baseline;
        column-gap: 10px;
        row-gap: 6px;
        min-height: 44px;
        box-sizing: border-box;
        padding: 9px 0 10px;
        list-style: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .career-skillbar-row::-webkit-details-marker { display: none; }
    .career-skillbar-row::marker { content: ''; }
    .career-skillbar-name {
        grid-area: name;
        font-size: 15px;
        line-height: 1.3;
        color: var(--text_color);
        overflow-wrap: anywhere;
    }
    .career-skillbar-value {
        grid-area: value;
        font-size: 13px;
        color: var(--text_color_shiny);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }
    .career-skillbar-track {
        grid-area: bar;
        display: block;
        height: 6px;
        border-radius: 3px;
        /* A faint scale in both themes: --primary_2 is near-black in dark mode and drew a
           heavier bar behind every bar than the data itself. */
        background: rgba(127, 127, 127, 0.14);
        overflow: hidden;
    }
    .career-skillbar-fill { display: block; height: 100%; border-radius: 3px; transition: width 0.5s ease; }
    .career-skillbar.skillchart-have .career-skillbar-fill { background: var(--skillchart-have, var(--status-success)); }
    .career-skillbar.skillchart-adjacent .career-skillbar-fill { background: var(--skillchart-adjacent, var(--status-warning)); }
    .career-skillbar.skillchart-missing .career-skillbar-fill { background: var(--skillchart-missing, var(--status-error)); }
    /* No measured share: no bar and no track — "we have no number" must not read as a zero.
       (A Profile resume skill with no share is not a row at all since 2026-09-27 — it is a row of
       the table under the chart; a posting chart before any search still has rows like this.) In
       "$ value" such a row can still have a price, and then it has a bar (`has-value-bar`). */
    .career-skillbar.is-nodata:not(.has-value-bar) .career-skillbar-track { visibility: hidden; }
    /* "$ VALUE" ON THE BAR LIST (back since round 4, 2026-09-28, and the default on a ready chart;
       pages/career_skillbars.js): a skill worth $0 greys its name, as its slice does. The bars'
       widths ease over 500 ms with the switch's first step (a length, the owner's 120-500 ms); the
       FIRST arrival of the sizes is instant (`is-instant`, one committed change), and reduced
       motion makes every change instant. */
    .career-skillbar.is-dzero .career-skillbar-name { color: var(--text_color_shiny); }
    .career-skillbars.is-instant .career-skillbar-fill { transition: none; }

    /* THE READING, STACKED (owner, 2026-09-26: "I feel like this is hard to read"). It was a
       two-column dl whose values wrapped into a 60% column beside their labels. Now each label is
       a small grey caption over its sentence, full width, and the pair has room around it. */
    .career-skillbar-reading {
        display: block;
        margin: 0 0 14px;
    }
    .career-skillbar-reading dt {
        margin: 10px 0 2px;
        color: var(--text_color_shiny);
        font-size: 11px;
        font-weight: var(--font-semibold, 600);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }
    .career-skillbar-reading dt:first-child { margin-top: 2px; }
    .career-skillbar-reading dd {
        margin: 0;
        color: var(--text_color);
        font-size: 14px;
        line-height: 1.45;
    }
    /* "Related to Photoshop on your resume" (2026-09-27, _skillbars.html) under a lacking skill's
       two sentences: the words that replaced the "one hop away" colour, in the muted ink (4.74 : 1
       light, 5.79 : 1 dark), close under the sentences it belongs to. Two classes deep (review,
       2026-09-28): it is a <p>, and typography.css's `.dark-mode p` (0,1,1) painted a one-class
       rule in the body ink in dark mode. */
    .career-skillbar-read:has(.career-skillbar-related) .career-skillbar-reading { margin-bottom: 6px; }
    .career-page .career-skillbar-related {
        margin: 0 0 14px;
        color: var(--text_color_shiny);
        font-size: 14px;
        line-height: 1.45;
    }

    .career-skillbar-toggle {
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        color: var(--text_color_shiny);
        font: inherit;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .career-skillbar-toggle.is-pending { font-size: 13px; font-weight: var(--font-semibold, 600); color: var(--blue_1); }
    .career-skillbar-toggle:focus-visible { outline: 2px solid var(--blue_1); outline-offset: -4px; border-radius: 8px; }

    /* Pending, mirrored from the slice: an addition reads as added, a removal is struck through. */
    .career-skillbar.is-add .career-skillbar-name,
    .career-skillbar.is-remove .career-skillbar-name { font-weight: var(--font-semibold, 600); }
    /* The "+ " is TEXT (15px semibold), so it takes the text-grade mix of the fill with the body
       ink (--skillchart-glyph-mix, variables.css), as the chart's mark and the receipt's sign do
       (review, 2026-09-28: the raw blue fill of round 2 was 3.68 : 1 on the white card, under
       AA; round 4's green #4BDF2B is 1.77 : 1). #327C22 5.20 : 1 light, #77E65F 9.56 : 1 dark
       (round 3's green made them #427027 and #8DD466); the plain fill is the fallback where
       color-mix() is not supported. A pending add is green whichever group it came from. */
    .career-skillbar.is-add .career-skillbar-name::before {
        content: '+ ';
        color: var(--skillchart-have, var(--status-success));
        color: color-mix(in srgb, var(--skillchart-have, var(--status-success)) var(--skillchart-glyph-mix, 75%), var(--text_color));
    }
    .career-skillbar.is-remove .career-skillbar-name { text-decoration: line-through; }
    .career-skillbar.is-add .career-skillbar-fill { background: var(--skillchart-have, var(--status-success)); }
    .career-skillbar.is-remove .career-skillbar-fill { background: var(--skillchart-missing, var(--status-error)); }

    /* THE LEGEND ON A PHONE (owner, 2026-09-26: "The width doesn't match the rest of the page and
       neither does the typography"; "span this to match the width of the rest of the page"). The
       panel is a 360px desktop column with 24px of its own padding; stacked under the list it now
       takes the card's full width like everything above it, and its sign-up line is the page's
       body size and weight rather than a bold link standing in for a heading. */
    .career-page .career-skillchart-row .career-skillchart-tip--static {
        padding: 16px 0 0;
    }
    .career-page .skillcalc-register,
    .career-page .skillcalc-verify { font-size: 15px; line-height: 1.45; }
    .career-page .skillcalc-register a,
    .career-page .skillcalc-verify a { font-weight: var(--font-medium, 500); }

    .career-skillbars-more {
        display: block;
        margin: 6px 0 0;
        padding: 10px 0;
        border: 0;
        background: none;
        color: var(--blue_1);
        font: inherit;
        font-size: 14px;
        font-weight: var(--font-semibold, 600);
        cursor: pointer;
    }
}

/* ==========================================================================
   THE PHONE FOOTER (2026-09-26). Owner, with Tesla's and Amazon's phone footers beside ours:
   "I think we should have the legal stuff first, then at the very bottom we have the 'WAGE
   MAGIC' with the social links underneath. My thought is that people are more likely to go to
   the bottom of the screen FIRST before they scroll looking for the start of the footer."

   So, top to bottom, all centred: the four links as a 2 × 2 grid of full-height (44px) tap rows;
   then the sign-off — the Design Partner seal when the account has one, the wordmark, and the
   socials on the very last line, each a 44px target instead of an 18px icon. The owner's second
   pass (same day): centre the 2 × 2, drop the hairline that split it from the wordmark (the
   footer's own top rule stays), and drop "© 2026 Wage Magic" everywhere — the markup no longer
   has it. The column titles ("About Us", "Legal") are
   dropped on a phone: over two links each they were labels for labels, and "Feedback" never
   belonged under "Legal". Everything shares one centre line, which is what the old stack
   lacked (its copyright was centred inside the two link columns, 14px in from everything else).

   Order only, by CSS: the markup (includes/footer.html) and the desktop footer are unchanged.
   The last line clears the iPhone home indicator (env(safe-area-inset-bottom)).
   ========================================================================== */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
    footer {
        padding: 8px var(--spacing-md) calc(20px + env(safe-area-inset-bottom, 0px));
    }
    .footer-container,
    .footer-container--design-partner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .footer-columns,
    .footer-container--design-partner .footer-columns {
        order: 1;
        display: grid;
        grid-template-columns: repeat(2, max-content);
        justify-content: center;
        gap: 0 48px;
    }
    .footer-column { gap: 0; align-items: center; }
    .footer-column-title { display: none; }
    .footer-column a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        font-size: 15px;
    }

    /* EQUAL AIR ABOVE AND BELOW THE SEAL (owner, 2026-09-26: "inconsistent padding between the
       links and the Wage Magic/Socials"). MEASURED at 390, text to coin: 37px above (the last
       link row's own 44px height carries ~13px of air) against 15px below. The two margins below
       make both ~24px of visible space, the lower one a little more for the coin's shadow. */
    .design-partner-seal {
        order: 2;
        align-self: center;
        width: 4.75rem;
        margin-top: 11px;
    }

    .footer-brand {
        order: 3;
        align-items: center;
        gap: 6px;
        margin-top: 24px;
    }
    .footer-container--design-partner .footer-brand { margin-top: 23px; }
    .footer-logo { font-size: 1.125rem; }
    .footer-socials { gap: 4px; justify-content: center; }
    .footer-socials a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
    }
    .footer-socials svg { width: 20px; height: 20px; }
}

/* ==========================================================================
   THE PAY TICKER BAR, below 1360px (1420px until 2026-09-28) (2026-09-26). Owner, of the sticky bar on his phone: "this
   anchoring to the top looks SO GOOD! ... remove the '· ' and make the '355 open job postings'
   smaller so we focus on the salary. ... Again, the goal is for people to tap through the skills
   and see the salary changes."

   The bar (pages/career_skills.css: sticky under the nav below 1360px) is three lines on the
   left — the label, the FIGURE with its change beside it, and the count in small grey — with the
   size switch centred against all three on the right (the owner's "change the 'Show $ value' to
   an icon ... It should be much more subtle"): the "% | $" pill below. It went with "$ value" on
   2026-09-27 and is back since round 4 (2026-09-28), "$ value" the default. Nothing here applies
   at 1360px and up, where the legend sits beside the sunburst with its own copy of the pill.
   ========================================================================== */
@media (max-width: 1359.98px) {
    .career-page .career-skillchart-row > .skillcalc-bar {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        grid-template-areas:
            "label label label size"
            "total chip  .     size"
            "roles roles roles size";
        align-items: baseline;
        column-gap: 8px;
        row-gap: 1px;
    }
    .career-page .skillcalc-bar > .skillcalc-bar-label { grid-area: label; }
    .career-page .skillcalc-bar > .skillcalc-bar-total { grid-area: total; font-size: 22px; }
    .career-page .skillcalc-bar > .skillcalc-chip { grid-area: chip; align-self: center; }
    .career-page .skillcalc-bar > .skillcalc-bar-roles {
        grid-area: roles;
        font-size: 12px;
        color: var(--text_color_shiny);
    }
    .career-page .skillcalc-bar > .skillcalc-bar-size {
        grid-area: size;
        align-self: center;
        margin-left: 0;
    }
}

/* ==========================================================================
   "EVERY NUMBER AS A TABLE" ON A PHONE (2026-09-26). Owner: "The text hierarchy is way off for
   the collapsed table. I also don't want to scroll sideways to see all the data. Just stack the
   stats so 'Asked for of X postings' is on top of 'Your open roles of X'." Each skill becomes a
   block — its name (and the tool / task tag), then one line per statistic with the column's name
   as a small grey caption (`data-label`, _skills_section.html) — so nothing is wider than the
   phone and the header row, whose two type sizes did not match, is not needed.
   ========================================================================== */
@media (max-width: 720px), (orientation: landscape) and (max-height: 500px) {
    .career-page .seeker-table-scroll:has(.career-skills-table, .career-asks-table) { overflow: visible; }
    .career-page .career-skills-table,
    .career-page .career-asks-table,
    .career-page .career-skills-table tbody,
    .career-page .career-asks-table tbody { display: block; width: 100%; }
    .career-page .career-skills-table thead,
    .career-page .career-asks-table thead { display: none; }
    .career-page .career-skills-table tr,
    .career-page .career-asks-table tr {
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid var(--line_color);
    }
    .career-page .career-skills-table td,
    .career-page .career-asks-table td {
        display: block;
        padding: 0;
        border: 0;
        text-align: left;
        white-space: normal;
        font-size: 14px;
        line-height: 1.4;
    }
    .career-page .career-skills-table td.seeker-title-cell,
    .career-page .career-asks-table td.seeker-title-cell {
        margin-bottom: 4px;
        font-size: 15px;
        font-weight: var(--font-medium, 500);
    }
    .career-page .career-skills-table td[data-label]::before,
    .career-page .career-asks-table td[data-label]::before {
        content: attr(data-label);
        display: inline-block;
        min-width: 8.5em;
        margin-right: 8px;
        color: var(--text_color_shiny);
        font-size: 11px;
        font-weight: var(--font-semibold, 600);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }
    .career-page .career-asks-table td.career-share-cell { display: none; }
    .career-page .career-skills-table tr.career-group-head,
    .career-page .career-skills-table tr.career-group-empty { padding-top: 18px; }
    .career-page .career-skills-table .career-group-head th {
        display: block;
        padding: 0 0 0 10px;
        font-size: 15px;
        line-height: 1.35;
        text-align: left;
    }
    .career-page .career-skills-table .career-group-head .career-group-hint {
        display: block;
        margin-top: 2px;
        font-size: 13px;
        font-weight: 400;
    }
}

/* ==========================================================================
   PAGE HEADERS AND LIBRARY CARDS ON A PHONE (2026-09-26).
   Owner, with Library, Job Search and Profile side by side: "I don't know why library does not
   match the other two pages ... but the library looks the best. On mobile, can you please align
   the action button with the title, then have the subtitle below like how the library page is.
   It's cleaner." The Career pages' `.career-head` (a wrapping flex row that dropped the actions
   onto a line of their own, right-aligned) becomes the Library's phone grid: title and actions
   share the first line, the lede spans the second.

   And of a Library card: "the delete button is not in the corner." pages/library.css stacks a
   card's header below 768px, which put the trash under the title; the header stays a row here,
   the title taking the width and the delete its natural size at the top right.
   ========================================================================== */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
    .career-page .career-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 12px;
        row-gap: 6px;
    }
    .career-page .career-title { grid-column: 1; grid-row: 1; }
    .career-page .career-head-actions { grid-column: 2; grid-row: 1; margin-left: 0; }
    .career-page .career-lede { grid-column: 1 / -1; grid-row: 2; max-width: none; }
}
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {
    .analysis-card .analysis-header {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
    }
    .analysis-card .card-title-section { flex: 1 1 auto; min-width: 0; }
    .analysis-card .card-actions {
        flex: 0 0 auto;
        justify-content: flex-end;
        margin: -6px -8px 0 0;
    }
    .analysis-card .card-actions .action-btn { flex: 0 0 auto; }
}

/* ==========================================================================
   UNDER A STICKY FLOW BAR (2026-09-26). Below 1200px a signed-in page pins the Career flow bar
   (40px, components/nav.css) as a second row of the navbar, so what pins under the navbar at a
   LITERAL 60px pins 40px lower: the Profile's pay ticker (pages/career_skills.css: `top: 60px`).
   Section anchors use the measured `--nav-height`, which already includes the row.
   `--flow-bar-h` is 0 wherever the row is absent.
   ========================================================================== */
@media (max-width: 1199px) {
    .career-page .career-skillchart-row > .skillcalc-bar { top: calc(60px + var(--flow-bar-h, 0px)); }
    .career-page .career-role-dialog-body .career-skillchart-row > .skillcalc-bar { top: calc(-1 * var(--spacing-lg)); }
}
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {
    .career-page .career-role-dialog-body .career-skillchart-row > .skillcalc-bar { top: -16px; }
}

/* ==========================================================================
   THE "% | $" SWITCH AT EVERY WIDTH, BESIDE "PAY WITHIN REACH" (2026-09-26; deleted 2026-09-27;
   BACK since round 4 of the tester round, 2026-09-28, with "$ value" the DEFAULT). Owner, with
   the phone's switch in his screenshot: "I really like the simplicity of this switch between %
   and $. Can you implement this exact thing on the desktop version in the same spot if there's
   enough room?" — and, bringing it back: "Can you also please add back the % and $ slider? I
   think it's helpful. The $ should be the default view." One button, two glyphs, the lit one the
   view on screen (`data-calc-size-mode`, career_skills.js pressSize); its words ("Show $ value" /
   "Show % of postings") are its accessible name and tooltip. It ships `hidden` and the script
   shows it once the chart's sizes have arrived — the first moment "$ value" can be drawn — so it
   never names a view the chart is not showing, and a chart that cannot be sized (a visitor, an
   unverified email, an ended trial, a lock, a refused sizes request) has no switch at all.

   IT TAKES NO HEIGHT (the one screen at 1440x900 and 1366x768, career_skills.css): positioned in
   the ticker's top-right corner, level with "Pay within reach", it sits in the corner the label
   leaves empty (the label is ~190px of the legend's 312px). Its vertical centre is the label
   line's — the label is 13px (--text-data-label) at --leading-normal — so the 28px pill hangs
   (13 x 1.5 - 28) / 2 = -4.25px above the ticker's top. Where the legend stacks and on a phone it
   is the same corner of the same section. The sticky bar's copy is placed by the bar's grid, above.
   ========================================================================== */
/* The switch: one button, two glyphs, the lit one is the view on screen. */
.career-page .skillcalc-size-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    width: 56px;
    min-height: 0;
    height: 28px;
    padding: 2px;
    border: 1px solid var(--line_color);
    border-radius: 999px;
    background: var(--bg_color);
    font-size: 0;
    color: transparent;
    overflow: hidden;
    cursor: pointer;
}
.career-page .skillcalc-size-btn[hidden] { display: none; }
.career-page .skillcalc-size-btn::before,
.career-page .skillcalc-size-btn::after {
    flex: 1 1 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-radius: 999px;
    font-size: 13px;
    font-weight: var(--font-semibold, 600);
    line-height: 1;
    color: var(--text_color_shiny);
}
/* "$ | %" since 2026-09-29 (owner: "$ is on the left and the % is on the right. The $ is still
   the default") — $ is ::before, % is ::after. */
.career-page .skillcalc-size-btn::before { content: '$'; }
.career-page .skillcalc-size-btn::after { content: '%'; }
.career-page .skillcalc-size-btn[data-calc-size-mode="value"]::before,
.career-page .skillcalc-size-btn[data-calc-size-mode="share"]::after {
    background: var(--fg_color);
    color: var(--text_color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.career-page .skillcalc-size-btn:hover:not(:disabled) { background: var(--bg_color); border-color: var(--text_color_shiny); }
.career-page .skillcalc-ticker { position: relative; }
.career-page .career-skillchart-tip--static .skillcalc-ticker > .skillcalc-size-btn {
    position: absolute;
    top: calc((var(--text-data-label, 0.8125rem) * 1.5 - 28px) / 2);
    right: 0;
}

/* The phone bar list's widths move with the size switch's first step (above); reduced motion makes
   that change instant, as it makes every change on these charts. */
@media (prefers-reduced-motion: reduce) {
    .career-skillbar-fill { transition: none; }
}