/* =========================================================================
   PF-MOBILE · 2026-09-11 · the phone tier, and only the phone tier.
   Founder order: "audit mobile ui ux of all tools and pages, if any flaws
   fix it." Brief: SPEC-3-mobile.md (F1…F8 + Shared).

   THE LAW THIS FILE OBEYS: a late plain-selector override must restate every
   media tier it touches. This sheet is linked LAST, so every rule below is
   written INSIDE its own @media tier — there is not one tier-less
   declaration in this file. Remove this one link and every surface is
   exactly the desktop-and-phone product it was before.

   Tiers used, in this order:
     (max-width: 1023px)  the tablet fold, where a two-column tool becomes one
     (max-width: 900px)   THE PHONE TIER — the estate's own phone breakpoint
     (max-width: 720px)   the narrow phone, where the landing re-composes
     (max-width: 700px)   the design libraries go two-up
     (max-width: 480px)   the 360–430px band
   ========================================================================= */


/* -------------------------------------------------------------------------
   SHARED · 1 · every form field is 16px on the phone.
   iOS Safari zooms the whole page when a focused field is under 16px, and it
   does not zoom back out. This is the one rule that has to be blunt.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body.folio-v5 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  body.folio-v5 textarea,
  body.folio-v5 select {
    font-size: 16px;
  }
  /* 2026-09-11 (late) · the sheet's own sizing rule sets `font: … 15px …` with
     two classes, which OUT-SPECIFIES the blunt rule above and would leave the
     details sheet as the one surface on the phone that still zooms iOS on
     focus. The law is restated here, at the specificity the sheet uses. The
     outcome cells are textareas since this round, so they need it too. */
  body.folio-v5 .cxs-field input,
  body.folio-v5 .cxs-field textarea,
  body.folio-v5 .cxs-panel-field input,
  body.folio-v5 .cxs-panel-field textarea,
  body.folio-v5 .cxs-cell,
  body.folio-v5 textarea.cxs-cell,
  body.folio-v5 .cxs-chip-input,
  body.folio-v5 textarea.cxs-chip-input {
    font-size: 16px;
  }
}

/* -------------------------------------------------------------------------
   SHARED · 2 · THE LAUNCH STRIP (ATS · letter · portfolio all wear it).
   Before: 34px items, 9.5px numerals, 10.5px labels, and the current step's
   label truncated to "Your lett…". After: 44px items, 11px labels, and the
   CURRENT step keeps its whole label — the done/todo steps give up the room.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body.folio-v5 .pf-launch-strip > ol {
    display: flex;
    align-items: stretch;
    gap: 4px;
  }
  body.folio-v5 .pf-launch-strip li { flex: 0 1 auto; min-width: 0; }
  body.folio-v5 .pf-launch-strip li.on { flex: 1 1 auto; }
  /* the li must reserve the room its 40px button takes, or the button hangs
     1–11px past the list and the page measures the difference. */
  body.folio-v5 .pf-launch-strip li:not(.on) { flex: 0 0 40px; }
  body.folio-v5 .pf-launch-strip li > *,
  body.folio-v5 .pf-launch-strip li:not(:has(a, button)) {
    min-height: 44px;
    gap: 8px;
    padding: 4px 6px;
  }
  /* the numerals stay small ON PURPOSE — they are decorative repeats of the
     step order the label already states, and they carry no information a
     reader loses. Everything that is READ is 11px or more. */
  body.folio-v5 .pf-launch-strip em {
    width: 24px; height: 24px; min-width: 24px;
    font-size: 11px;
  }
  body.folio-v5 .pf-launch-strip b {
    font-size: 11px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  body.folio-v5 .pf-launch-strip li.on b {
    overflow: visible; text-overflow: clip; white-space: normal;
  }
  /* a done or todo step that shrinks to "C" is worse than no label at all:
     off the current step the numeral IS the label, and the current step takes
     the whole remaining row. */
  body.folio-v5 .pf-launch-strip li:not(.on) b { display: none; }
  /* …and a numeral-only step is still a 44×44 target, not a 28px disc. */
  body.folio-v5 .pf-launch-strip li:not(.on) > *,
  body.folio-v5 .pf-launch-strip li:not(.on):not(:has(a, button)) {
    min-width: 40px;
    padding-inline: 0;
    justify-content: center;
  }
  body.folio-v5 .pf-launch-strip li.on > * { min-width: 0; }
  body.folio-v5 .pf-ck-strip > ol { grid-template-columns: none; }
}

/* -------------------------------------------------------------------------
   SHARED · 3 · the top bar's product numerals.
   01…04 beside the four product names, 10px everywhere. They are a numeral
   pair on a nav item that already names itself; 11px costs nothing.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body.folio-v5 .topbar .primary-nav a em { font-size: 11px; }
}


/* =========================================================================
   F1 · LANDING (/)
   ========================================================================= */

/* The 20px cut. `.folio-v5 .pf-stage` (the portfolio's PREVIEW DIALOG) also
   matched the landing hero's `<div class="pf-stage">`, and under 900px it
   handed that div `width: 100vw`. A 100vw item inside a 350px grid track
   forced the track to 390px, so the whole hero column measured right=410 and
   `overflow-x: hidden` ate the difference. The home stage is a div, never a
   dialog — it takes its size back here. */
@media (max-width: 900px) {
  body.folio-v5 .pf-home .pf-stage {
    width: auto;
    max-width: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  body.folio-v5 .pf-home .pf-hero-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 721px) and (max-width: 900px) {
  body.folio-v5 .pf-home .pf-stage { height: 540px; }
}
/* …and the stage itself is tightened: at 390 the artefacts dock in the top
   third and left ~400px of empty paper above the four-beat strip. */
@media (max-width: 720px) {
  /* 470 → 300. The four artefacts dock against the stage's own centre line,
     so the stage cannot simply be cut — every dock offset is restated here
     against the new centre (56% of 300 = 168) so the papers land on the rope
     instead of above it. The beats become a 2×2 block and the hand note sits
     above them, not through them. */
  body.folio-v5 .pf-home .pf-stage { height: 300px; }
  body.folio-v5 .pf-home .pf-hero { padding-bottom: 54px; }
  body.folio-v5 .pf-home .pf-a-resume.docked { transform: translate(calc(-50% - 96px), calc(-50% - 98px)) scale(.4); }
  body.folio-v5 .pf-home .pf-a-ats.docked { transform: translate(calc(-50% - 32px), calc(-50% - 102px)) scale(.42); }
  body.folio-v5 .pf-home .pf-a-letter.docked { transform: translate(calc(-50% + 34px), calc(-50% - 98px)) scale(.4); }
  body.folio-v5 .pf-home .pf-a-live.docked { transform: translate(calc(-50% + 104px), calc(-50% - 88px)) scale(.5); }
  body.folio-v5 .pf-home .pf-beats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 0;
  }
  body.folio-v5 .pf-home .pf-beat {
    text-align: center;
    letter-spacing: .05em;
    padding: 8px 4px;
  }
  body.folio-v5 .pf-home .pf-stagecap { bottom: 84px; font-size: 17px; }
}

/* the beats are legible, not 9px. (The miniature résumé, the ATS chit, the
   letter and the live card inside the stage keep their 6.5–9px type: the
   whole stage carries aria-hidden="true" — it is a drawing of the four
   documents, not text anyone is asked to read.) */
@media (max-width: 900px) {
  body.folio-v5 .pf-home .pf-beat { font-size: 11px; padding: 8px 11px; }
}

/* "See the 37 designs" / "View all 37 →" were 19px tall. */
@media (max-width: 900px) {
  body.folio-v5 .pf-home .pf-linkline {
    min-height: 40px;
    align-items: center;
    padding-bottom: 0;
  }
  body.folio-v5 .pf-home .pf-foot .flinks { gap: 8px 26px; }
  body.folio-v5 .pf-home .pf-foot .flinks a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}


/* =========================================================================
   F2 · RÉSUMÉ DESIGNS (/resume-designs)
   26,735px at 390: one column, each card a 500px-tall paper whose lower half
   is blank. The phone gets the library two-up, each paper a true top crop of
   the real design (the page is rendered at 334px — the width it was already
   readable at — and scaled, so the card never shows a re-flowed layout that
   the design does not have). Tap the paper = the existing full preview.
   ========================================================================= */
@media (max-width: 700px) {
  body.folio-v5 .resume-designs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 12px;
  }
  body.folio-v5 .resume-design-card { --tk: 0deg; }
  body.folio-v5 .resume-design-card .pf-tape { display: none; }
  body.folio-v5 .resume-design-card .resume-design-paper {
    width: 150px;
    margin: 0 auto;
    padding: 20px 6px 6px;
  }
  body.folio-v5 .resume-design-card .resume-design-paper .resume-template-thumb {
    position: relative;
    width: 138px;
    height: 166px;
    overflow: hidden;
  }
  body.folio-v5 .resume-design-card .resume-design-paper .template-preview-host { position: absolute; inset: 0; }
  body.folio-v5 .resume-design-card .resume-design-paper .resume-template-thumb iframe {
    position: absolute; top: 0; left: 0;
    width: 334px; height: 446px;
    transform: scale(.4132);
    transform-origin: 0 0;
  }
  body.folio-v5 .resume-design-card .resume-design-number {
    top: 5px; left: 5px;
    padding: 4px 6px;
    font-size: 11px;
  }
  body.folio-v5 .resume-design-card .template-preview-loading { font-size: 11px; }
  body.folio-v5 .resume-design-card-copy {
    display: block;
    padding-top: 10px;
  }
  body.folio-v5 .resume-design-card-copy > span:last-child {
    display: block;
    margin-top: 8px;
  }
  body.folio-v5 .resume-design-card-copy small,
  body.folio-v5 .resume-design-card-copy em { font-size: 11px; }
  body.folio-v5 .resume-design-card-copy h2 { font-size: 19px; }
  body.folio-v5 .resume-design-card-copy p { font-size: 11px; }
  body.folio-v5 .resume-design-card-copy button {
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
    padding: 0 10px;
    border: 1px solid var(--cx-ink);
    background: var(--cx-ink);
    color: var(--cx-cons-paper);
    font: 700 12px/1 var(--cx-font-ui);
    cursor: pointer;
  }
  /* the back / forward door in the hero was 18px tall. */
  body.folio-v5 .resume-designs-back {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  body.folio-v5 .resume-design-preview-browser > span b { font-size: 11px; }
}
@media (max-width: 480px) {
  body.folio-v5 .resume-designs-page { padding-inline: 14px; }
}


/* =========================================================================
   F3 · RÉSUMÉ START (/resume-builder/start)
   ========================================================================= */
@media (max-width: 900px) {
  body.folio-v5 .resume-welcome-proof span small,
  body.folio-v5 .resume-welcome-actions .eyebrow { font-size: 11px; }
  body.folio-v5 .resume-welcome-actions > footer a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}


/* =========================================================================
   F4 · RÉSUMÉ EDITOR (/resume-builder)
   The BUTTON the sweep saw at right=440 is NOT an off-canvas desktop
   control: it is `.resume-phone-sections`, a deliberate horizontal section
   rail (overflow-x: auto) inside a page that clips. The desktop
   Preview/Download pair already measures 0×0 on the phone. What was wrong
   here is the type and the 38px rail buttons.
   ========================================================================= */
@media (max-width: 900px) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-mobile-progress span { font-size: 11px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-mobile-dock-context span { font-size: 11px; }
  body.folio-v5 .resume-content-overview > header small { font-size: 11px; }
  body.folio-v5 .resume-phone-sections button { min-height: 40px; }
  body.folio-v5 .resume-phone-sections button i { font-size: 11px; }
  body.folio-v5 .tool-workflow-count { font-size: 11px; }
  body.folio-v5 .resume-preview-toolbar span small { font-size: 11px; }
  body.folio-v5 .resume-document-id small { font-size: 11px; }
  body.folio-v5 .resume-document-controls .button,
  body.folio-v5 .resume-document-controls .v5-open,
  body.folio-v5 .resume-version-menu > summary { min-height: 40px; }
}


/* =========================================================================
   F5 · ATS (/ats-resume-checker)
   ========================================================================= */

/* 02's chrome was topbar 64 + strip 59 + mini-nav 53 = 176px of sticky over
   an 844px phone. The strip is the step marker, not a control you need while
   reading a report — on the phone it scrolls away and the mini-nav is the
   only thing that stays. Chrome while reading: 64 + 53 = 117px. */
@media (max-width: 900px) {
  body.folio-v5 .pf-ck-strip { position: static; }
  body.folio-v5 .pf-ck-prov { font-size: 11px; }
  body.folio-v5 .pf-check-title small { font-size: 11px; }
  body.folio-v5 .pf-ats-scoreblock > span { font-size: 11px; }
  body.folio-v5 .pf-ats-stamp { font-size: 11px; }
  body.folio-v5 .pf-ck-strip li > *,
  body.folio-v5 .pf-ck-strip li:not(:has(a, button)) { min-height: 44px; }
}


/* =========================================================================
   F6 · LETTER (/cover-letter-designs, /cover-letter-builder)
   ========================================================================= */

/* 03 and 04 held the letter in a 56vh box with its own scrollbar, so the
   closing and the signature sat below a fold most people never found. On the
   phone the paper is simply whole: full width, its own height, one scroll —
   the page's. */
@media (max-width: 900px) {
  body.folio-v5 .pfl-paper,
  body.folio-v5 .pfl-check-paper {
    max-height: none;
    overflow: visible;
  }
}

/* DELETED 2026-09-11 · the preview dialog's phone targets (.pf-stage-close /
   .pf-stage-use at ≤900px). The world stage carries its own 40px phone tier in
   assets/pf-world-stage.css, beside the rules it belongs to. */


/* =========================================================================
   F7 · PORTFOLIO (/portfolio-designs, /portfolio-builder)
   Every control in the 02 sheet was built for a mouse.
   ========================================================================= */
@media (max-width: 900px) {
  /* the switch: 38×22 with no hit area → 46×26 with a 44px-tall invisible
     target around it (the ::before is the target, the lozenge is the sign). */
  body.folio-v5 .cxs-switch {
    width: 46px; height: 26px; min-width: 46px; min-height: 26px;
  }
  body.folio-v5 .cxs-switch::after { top: 4px; left: 24px; width: 18px; height: 18px; }
  body.folio-v5 .cxs-switch.off::after { left: 2px; top: 3px; }
  body.folio-v5 .cxs-switch::before {
    content: "";
    position: absolute;
    inset: -9px -4px;
  }
  /* the skill chips: a 20px text field and a 22px "×".
     2026-09-11 (late) · the sheet's one sizing rule reaches the phone
     unchanged — 44px, and this tier restates it rather than shrinking it. */
  /* 2026-09-11 · SPEC-6 §1 — the chip IS the box on the phone too: 40px pill,
     borderless input, a 40px × cap. The 44px this tier used to restate is what
     made the inner box exactly as tall as the pill. */
  body.folio-v5 .cxs-chip { height: 40px; }
  /* 2026-09-12 · SPEC-9c §6 · the skill field is a wrapping textarea on the
     phone too — this is where it earns its keep. "annotation QA (bounding
     boxes, temporal events, tracking, occlusion)" is one skill and it takes two
     lines here; the 16px type is untouchable (below it iOS zooms the page on
     focus and never zooms back) and the × keeps its 40px hit area, so the CHIP
     grows instead of the text shrinking. `height` is the one-line floor; the
     binder writes the measured height. */
  body.folio-v5 textarea.cxs-chip-input {
    height: 26px; min-height: 26px; min-width: 4ch; border: 0; background: transparent; border-radius: 0;
    resize: none; overflow: hidden; overflow-wrap: break-word; white-space: pre-wrap; line-height: 1.35;
  }
  body.folio-v5 .cxs-chip.skill { height: auto; min-height: 40px; }
  body.folio-v5 .cxs-chip.skill button { width: 40px; min-width: 40px; height: auto; align-self: stretch; min-height: 38px; font-size: 18px; }
  /* ---------- 2026-09-12 · SPEC-8 §A5 · THE LONGEST REAL SKILL FITS ----------
     Measured at 390 on the founder's own CV: "deployment and production
     debugging" needs 289px of text. The sheet's inner column is 332px and the
     chip's own furniture — 12px of padding and the 40px × cap — takes 54 of it,
     so the text had 278 and was clipped by 11px.

     The two things that could have paid for it must NOT: the type size is 16px
     because anything smaller makes iOS zoom the page on focus and never zoom
     back (SHARED · 1 above), and the × is 40px because that is the hit-area
     floor. So the ROW pays: the chips take the full width of the sheet, inside
     its padding, which is 364 − 54 = 310px of text. Measured after: 289/289. */
  body.folio-v5 .cxs-chips { margin-inline: -16px; padding-inline: 4px; }
  body.folio-v5 .cxs-addrow button { min-height: 40px; }
  /* ---------- 2026-09-12 · SPEC-8 §A4/§A5 · the phone tier of the row card
     At 390 the three short fields STACK (one column, full width each) and the
     Outcome keeps the whole row it already has. The 9ch Years field keeps its
     label but takes the row with the others — a 9ch box beside a wrapped
     Company was the narrowest thing on the sheet.
     §A5 · a skill chip may take the whole row here too; the ceiling that clipped
     a long skill is gone in pf-portfolio.css and nothing restates it here. */
  body.folio-v5 .cxs-rowline { flex-direction: column; align-items: stretch; gap: 10px; }
  body.folio-v5 .cxs-rowfield.grow,
  body.folio-v5 .cxs-rowfield.yr { flex: 1 1 100%; width: 100%; min-width: 0; }
  body.folio-v5 .cxs-table td.card { padding-inline: 0; }
  body.folio-v5 .cxs-ask { padding: 10px 12px; }
  body.folio-v5 .cxs-ask-answers button { flex: 1 1 100%; justify-content: center; }
  body.folio-v5 .cxs-cand-answer { width: 100%; }
  body.folio-v5 .cxs-cand-answer button { flex: 1 1 0; }
  /* "Details ▾" was 65×30. */
  body.folio-v5 .cxs-details-key { min-height: 40px; }
  body.folio-v5 .cxs-details-key i { font-size: 11px; }
  /* 03's "Full screen" was 93×30 — the pill's own min-height loses to the
     studio's later button reset, so it is restated at this tier. */
  body.folio-v5 .portfolio-fullscreen-trigger { min-height: 40px; height: 40px; }
}


/* =========================================================================
   F8 · WORKSPACE (/workspace, /workspace/<tool>)
   ========================================================================= */

/* The dashboard was 5,294px because every row led with a 300×390 paper and
   only then said which tool it was. On the phone the paper becomes a 96px
   object BESIDE the title — the same sheet, drawn small, laid out at its
   true size and scaled, so the row reads as a line of work, not a poster.
   (transform + negative margin, not `zoom`: the layout box has to shrink on
   every engine, not only the ones that ship `zoom`.) */
@media (max-width: 700px) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-card {
    grid-template-columns: 74px minmax(0, 1fr);
    column-gap: 14px;
  }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-card > * { grid-column: 2; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-card > .cxm-tile,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-card > .cxm-tile.pf-ws-blank {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    justify-self: start;
    width: 300px;
    max-width: none;
    height: 390px;
    aspect-ratio: auto;
    margin: 0 -226px -294px 0;
    transform: scale(.246);
    transform-origin: 0 0;
  }
}

/* the shelf and the header: 33×40 and 24×40 buttons, 9.5–10.5px chips. */
@media (max-width: 900px) {
  body.folio-v5 .pf-ws-act { min-width: 44px; min-height: 40px; padding-inline: 8px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-dashcards .cxm-status { font-size: 11px; }
  body.folio-v5 .cxm-card .pf-ws-flag,
  body.folio-v5 .cxm-shelf-item i,
  body.folio-v5 .pf-ws-shelf i { font-size: 11px; }
  body.folio-v5 .cxm-scope a,
  body.folio-v5 .cxm-viewtabs a { min-height: 40px; display: inline-flex; align-items: center; }
}

/* the rooms: 113px of sticky room bar under a 64px top bar, over a 57px tab
   strip = 234px of chrome on an 844px phone. The bar keeps both its doors —
   the application target and "All work" — it simply stops following the
   scroll. Chrome while working: 64px top, 57px bottom. */
@media (max-width: 900px) {
  body.folio-v5 .v5-roombar { position: static; }
  body.folio-v5 .v5-seg a,
  body.folio-v5 .v5-seg button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  body.folio-v5 .v5-target > span,
  body.folio-v5 .v5-roombar .v5-target span,
  body.folio-v5 .v5-tabs span,
  body.folio-v5 .cxm-toolnav span { font-size: 11px; }
  body.folio-v5 .cxm-facts dt,
  body.folio-v5 .cxm-versions dt { font-size: 11px; }
  body.folio-v5 .v5-roombar b,
  body.folio-v5 .v5-next b { font-size: 11px; }
}


/* =========================================================================
   360 · the narrow band. Nothing below may overflow at 360×780.
   ========================================================================= */
@media (max-width: 400px) {
  body.folio-v5 .pf-home .pf-wrap { padding-inline: 16px; }
  body.folio-v5 .cxs-chip { padding-inline: 10px; }
  /* a skill chip's right side is the × cap, not padding (SPEC-6 §1). */
  body.folio-v5 .cxs-chip.skill { padding: 0 0 0 10px; }
  body.folio-v5 .pf-launch-strip li > *,
  body.folio-v5 .pf-launch-strip li:not(:has(a, button)) { padding-inline: 4px; gap: 6px; }
}


/* =========================================================================
   THE 11px FLOOR · the phone tier.
   The standard: nothing a person is asked to READ is under 11px. Everything
   below is UI chrome — labels, counters, status chips, table heads, the
   ledger's own small print. Each rule carries the long body chain because the
   value it overrides is written with one (`.folio-v5 .resume-editor-page
   .resume-phone-sections > button > i` and its kin outrank a two-class
   selector no matter how late the file loads).

   WHAT IS DELIBERATELY LEFT SMALLER, and why:
   · everything inside `[aria-hidden="true"]` — the landing's four docked
     artefacts, the twelve letter specimens on /cover-letter-designs, the
     miniature résumé sheets on the home rail (made aria-hidden in this pass).
     They are drawings of documents, not text anyone is asked to read.
   · the letter paper on steps 03/04 and the résumé thumbnails on
     /resume-designs: a whole document scaled to the width of a phone. Its
     type is the DESIGN's own — raising it would change the document, and the
     document is the product. The same words are in the paragraph fields
     beside it at full size, and in the full-size stage and the PDF.
   ========================================================================= */
@media (max-width: 900px) {
  /* --- landing ------------------------------------------------------- */
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .pf-home .pf-rmeta > span,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .pf-home .pf-pmeta > span,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .pf-home .pf-tbody h3 small,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .pf-home .pf-pstep span.out { font-size: 11px; }

  /* --- the import dialog, shared by three tools ----------------------- */
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-inline-import > header small,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-inline-import > header > div > small,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-inline-import > footer span,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-inline-import > footer button { font-size: 11px; }

  /* --- résumé start --------------------------------------------------- */
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cons-start .pf-thr-facts small,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-welcome-proof small,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-welcome-actions > header > .eyebrow { font-size: 11px; }

  /* --- résumé designs -------------------------------------------------- */
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-guide-eyebrow,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-template-choice > header small,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-template-choice button span small { font-size: 11px; }

  /* --- résumé editor --------------------------------------------------- */
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-editor-page .resume-phone-sections > button > i { font-size: 11px; }
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-template-card .template-card-copy small,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-template-card .template-card-copy em,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .template-preview-loading,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-content-overview > header > div > small,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .resume-section-dialog button span small { font-size: 11px; }

  /* --- ATS report ------------------------------------------------------ */
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .studio-product-nav-label,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .pf-ats-scoreblock > p,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .ats-best-move small,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .ats-best-move em,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .ats-best-move button,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .pf-ats-ledger > header small,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .pf-ats-ledger article small,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .pf-ats-ledger article p,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .pf-ats-ledger article mark,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .pf-ats-arith b,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .pf-ats-arith em,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .pf-ats-read b,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .pf-ats-more > summary,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .pf-ck-fix small,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .pf-ck-fix-do span,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .ats-report-system th,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .ats-report-system td small { font-size: 11px; }

  /* --- letter ----------------------------------------------------------- */
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .pfl-hero > div > span,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .pfl-tools p b,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .pfl-card-index i,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .pfl-card-index small,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .pfl-paper-id small,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .pfl-row-words,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .pfl-trace { font-size: 11px; }

  /* --- portfolio --------------------------------------------------------- */
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-showcase-index i,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-showcase-index small,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-showcase-art em,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-detail-browserbar b,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxs-field > label > i,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxs-draft,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxs-table th,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-step-mark,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .fld-flag { font-size: 11px; }

  /* --- workspace + rooms --------------------------------------------------- */
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-status,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-approw a span,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-partstate,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-pick > span,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxm-title > b,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .career-proof-library article p,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .career-proof-library > a,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .v5-chain a i,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .v5-meter b,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .v5-mobready,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .v5-nba span { font-size: 11px; }
}

/* --- the 11px floor, second pass: what the first pass could not reach ---- */
@media (max-width: 900px) {
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .tool-workflow-nav > .studio-product-nav-label,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .ats-evidence-list article span small,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .ats-evidence-list article span p,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cxpre-menu-doors a b em,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-suggest > span,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .portfolio-fullscreen-trigger > span,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .pfl-review-head > span,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-review-summary span small,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-review-summary span em,
  body.career-canvas-v3.folio-v4c.folio-v4d.folio-v5 .cover-review-list article > i { font-size: 11px; }
}

/* --- the strip pays for its own 44px items -------------------------------
   Items went 34 → 44px, so the strip went 59 → 69 and the letter's and the
   portfolio's top chrome read 133px against a 130px standard. The padding
   around the row gives the 13px back: strip ≈ 57px, chrome = 64 + 57 = 121. */
@media (max-width: 900px) {
  body.folio-v5 .pf-launch-strip { padding-top: 3px; padding-bottom: 0; }
  body.folio-v5 .pf-launch-strip > ol { margin-bottom: 4px; }
}

/* =========================================================================
   360 · the two things that only break at 360, not at 390.
   ========================================================================= */
@media (max-width: 400px) {
  /* the room bar's application <select> carries `flex: 1 1 0%` with the
     default `min-width: auto`, so a long application name set its own floor
     (253px starting at x=126) and pushed the page 19px wide. */
  body.folio-v5 .v5-target > select { min-width: 0; }

  /* DELETED 2026-09-11 · the preview dialog's two-row head at 360. The world
     stage's bar is ONE row at every width: on a phone it drops the device
     switch (you are on the device), the category note and the position, and
     what is left — back, name, ← →, Use, × — fits 390 with room to spare. */
}