/* ============================================================================
   Mobile device floors for jobshifu.com.

   ⛔ LINKED LAST IN EVERY <head>, ON PURPOSE. Nine pages (index.html, blog.html,
   the seven blog/*.html posts) carry a self-contained inline <style> and never
   load assets/page.css at all, and on the pages that DO load page.css the link
   sits BEFORE the inline <style> block. So a rule written in page.css loses to
   the inline copy at equal specificity, and a rule written here wins everywhere
   without !important and without specificity golf. Keep the link last.

   Measured 2026-08-27 in real Mobile Safari (iOS 26.3 simulator, iPhone 17,
   402x812 CSS px) across all 36 pages. Raw probe reports and 442 before/after
   screenshots: ~/Project/private/landing-mobile-audit-2026-08-27.

   ⚠️ Do not "verify" an edit here by reading the cascade. Re-measure on the
   device: getComputedStyle + getBoundingClientRect at a phone viewport. Two of
   the app's equivalent fixes lost to a selector nobody found by grepping.
   ============================================================================ */

/* ── 1. One long token must never scroll the whole page ─────────────────────
   /research/experience-required scrolled 35px sideways and /research/relisting
   15px, both from the "Cite as" <code> block: the bare citation URL is a single
   unbreakable token and nothing in the sheets gave <code> a break opportunity.
   body{overflow-x:hidden} did NOT contain it, the html element scrolled anyway. */
code, kbd, samp { overflow-wrap: anywhere; }

/* ── 2. Anchor targets must clear the sticky header ─────────────────────────
   header.site is position:sticky and 75px tall, and only .article h2 carried a
   scroll-margin-top. Every other deep-link target (Google has /#product indexed)
   landed underneath it. */
html { scroll-padding-top: 92px; }

@media (max-width: 760px) {
  /* ── 3. iOS Safari zooms the page 16/fontSize on focus and never zooms back ─
     /ats-check's job-url field was 15px, so tapping the one input on an ads
     landing page threw the visitor into a horizontally scrolled page.
     ⛔ select counts. checkbox/radio/range do not. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
  select,
  textarea { font-size: 16px; }

  /* ── 4. Comparison tables: fit when they can, scroll when they cannot ──────
     table.cmp pins min-width:520px so wide data scrolls inside .table-scroll
     rather than scrolling the page. Correct for the 7-column research tables,
     but it also forced the 2-column ones (/resume-tailoring's five operations,
     /cover-letters, /calibration) to cut off mid-word at the viewport edge with
     no hint that anything scrolled. Releasing the floor lets narrow tables fit
     outright; wide ones still scroll, now with more of each column visible. */
  table.cmp { min-width: 0; font-size: .92rem; }
  table.cmp th,
  table.cmp td { padding: 11px 10px; }
}

/* ── 5. Touch floors ────────────────────────────────────────────────────────
   Keyed on (pointer: coarse), which is the actual condition the 44px floor is
   about, so a narrow desktop window is left alone.

   Two tiers on purpose:
     · Primary actions get the full 44px iOS floor.
     · Dense secondary link lists (footer columns, breadcrumbs) get 24px with
       clean spacing, which is WCAG 2.2 Target Size (Minimum). Giving those the
       full 44px would add roughly 100px per footer column for no real gain. */
@media (pointer: coarse) {
  /* Header CTA on all 34 pages: "Join now" measured 40px tall and "Log in" 42px,
     and the max-width:400px rule cut both to 38px on anything narrower than an
     iPhone 17. This is the signup button. */
  .nav-links .btn { min-height: 44px; }
  .btn { min-height: 44px; }

  /* "Add to Chrome, it's free" measured 39px on the seven pages that carry it. */
  .storebtn { min-height: 44px; }

  /* Homepage product tabs measured 40px inside their scroll rail. */
  .pt-tab { min-height: 44px; }

  /* Blog navigation. "← All posts" measured 81x23 at the top of a post and
     89x28 at the bottom; the category rail on /blog measured 36x36. */
  .heroback,
  .backlink { min-height: 44px; align-items: center; }
  .cats a { padding-top: 14px; }

  /* The "Copy" control on prompt blocks measured 57x32. */
  .copybtn { min-height: 44px; min-width: 44px; }

  /* Footnote markers measured 18x16, the smallest control on the site. Padding
     plus an equal negative margin buys the hit area without moving the baseline
     or reflowing the sentence the marker sits in.
     ⚠️ 14px, not 12: a 16px line box plus 12px either side lands at 40, and the
     first version of this rule shipped at 40 because the sum was reasoned about
     rather than measured. Re-measure on the device after touching it. */
  .prose a.cite { padding: 14px 6px; margin: -14px -2px; }

  /* Dense secondary lists. Footer column links measured 22px tall on 26 pages. */
  .foot-col { gap: 14px; }
  .foot-col a,
  .foot-links a,
  .footlinks a,
  .crumbs a { display: inline-block; min-height: 24px; line-height: 24px; }

  /* Sticky table of contents on the seven blog posts: 19px rows. A dense nav
     list, so 32px rather than the full 44, which would push the last entries of
     a nine-item contents list off a phone screen on their own. */
  .toc a { display: block; min-height: 32px; line-height: 32px; }
  .toc li { margin-bottom: 6px; }

  /* Footer RSS link measured 28x18. */
  .footbase a { display: inline-block; min-height: 24px; line-height: 24px; }

  /* A paragraph whose entire content is one link is a control, not prose: the
     "More research", "See the full breakdown" and "More questions, answered in
     full" lines all measured 17 to 21px tall. :only-child is what keeps this off
     links that sit inside a sentence, where growing the box would break the line
     rhythm and WCAG exempts them anyway.
     13px, not 6: these line boxes run 18 to 27px, so 6px either side stopped at 30 to 39
     and only the first pass' measurement said so. */
  p > a:only-child { display: inline-block; padding: 13px 0; }

  /* Wordmark, top and bottom of every page: 40px in the navbar, 30px in the footer. */
  .brand { min-height: 44px; align-items: center; }

  /* Hero-film chapter dots. 11px circles with an ::after hit area inset
     -7px -4.5px, so 20x25 and the only way to jump chapters on a phone. The
     horizontal inset is already maximal: dots sit on a 20px pitch, so widening
     past -4.5px would make neighbouring hit areas overlap. Height is free. */
  #chips button::after { inset: -16.5px -4.5px; }
}

/* ── 6. /extension on a device that cannot install an extension ─────────────
   Set by a head script in extension.html on iPhone, iPad and Android.
   ⛔ CORRECTED 2026-08-27: this said the store link was "a dead end". It is not, and
   the claim was made without loading the store on a device. The Chrome Web Store
   serves phones a working "Add to Desktop" button that queues the install for the
   Chrome the visitor is signed into, so BOTH buttons are real actions there. The
   account still carries the emphasis, for a different and better reason: the
   extension signs in with a JobShifu account and does nothing without one, and the
   account is usable on the phone immediately. Default (no class, no JS) unchanged. */
.ext-mobile-note { display: none; }

.no-ext .launch-cta .btn-cta {
  background: transparent; background-image: none; color: var(--text);
  border: 1px solid var(--neutral-6); box-shadow: none; order: 2;
}
.no-ext .launch-cta .btn-ghost {
  background: var(--grad-cta); color: #fff; border: none;
  box-shadow: var(--shadow); order: 1;
}
.no-ext .launch-cta { display: flex; flex-wrap: wrap; }
.no-ext .ext-mobile-note {
  display: block; margin-top: 14px; max-width: 46ch;
  font-size: .95rem; line-height: 1.55; color: var(--text-secondary);
}

/* ── 7. /fit-score rings demo ───────────────────────────────────────────────
   .rings-stage is a flex ROW holding the two dials and the Replay control. On a
   phone the row squeezes .rings until its two 150px columns wrap and stack, which
   leaves Replay floating beside the FIT dial as though it belonged to that one
   ring rather than to the demo. Turning the stage into a column at phone width
   gives .rings the full measure back: 2 x 150px plus a 28px gap is 328px inside
   the 354px a 402px viewport leaves, so the dials sit side by side again and
   Replay lands underneath both, which is what it controls. */
@media (max-width: 760px) {
  .rings-stage { flex-direction: column; align-items: center; }
  .rings { gap: 28px; }
}

/* ── 8. /resume-tailoring hero demo: the keyword sticker was covering the demo ─
   .chips-float is a floating sticker pinned to the bottom-left of the tailoring
   sheet, and .stage .tdemo-sheet reserves 74px of padding for it. That reserve was
   sized for the desktop case, where the caption is one line and the chips are one
   row. At 402px the caption wraps to two lines and the chips to three rows, about
   150px, so the sticker grew upward out of its reserve and sat on top of the third
   change card, hiding its "Kept:" explanation. A sticker overlapping the object it
   annotates is a wide-screen flourish; stacked underneath is the same information
   with nothing hidden. */
@media (max-width: 520px) {
  .chips-float { position: static; max-width: none; margin-top: 14px; }
  .stage .tdemo-sheet { padding-bottom: 18px; }
}

/* ── 9. Readable type inside the product mockups ────────────────────────────
   The Tier-A pages illustrate the product with miniature renderings of real app
   screens. Their internal type is sized for a 600 to 900px wide figure, and a
   402px phone shrinks the figure without shrinking the reader: measured
   2026-08-27, 61 text runs across 9 pages fell under 12px, bottoming out at 7.5.

   ⛔ THIS IS NOT A BLANKET BUMP, and the split is the whole decision. 47 of those
   runs sit at 10.5 to 11.5px, one step from readable, in components that have room
   for the extra pixels: a tag row, a stat label, a filename chip. Those are below,
   raised to a 12.5px floor. The other 14 sit at 7.5 to 10px inside components whose
   LAYOUT is the problem, not their font size: /job-tracker's five-column kanban
   rendered 1,774px wide in a 402px viewport, and /resume-tailoring's change cards,
   which derive from a three-column diff. Enlarging type inside those makes them
   overflow rather than legible; they need a different illustration on a phone and
   are deliberately untouched here.

   ⚠️ Two of these truncate with an ellipsis rather than wrap, so a bigger font
   shows FEWER characters. Both carry content that is the point of its page (the
   ATS host in the autofill mockup, the generated filename on /calibration), so
   they get 12px rather than 12.5 and are called out here so the next person does
   not "finish the job" and lose half the string. */
@media (max-width: 760px) {
  /* /fresh — the freshness signals ARE the page's argument */
  .ui .fx-tag { font-size: 12.5px; }
  .ui .fx-seen { font-size: 12.5px; }

  /* /ats-check, /ats-truth, /tailoring — the shared .ui panel */
  .ui .ui-label { font-size: 12.5px; }
  .ui .ui-stat .sub { font-size: 12.5px; }
  .ui .ui-pill { font-size: 12.5px; }
  .ui .mini { font-size: 12.5px; }

  /* /calibration — the export demo */
  .twc-xp h4 { font-size: 12.5px; }
  .xp-btn { font-size: 12.5px; }
  .xp-note { font-size: 12.5px; }
  .xp-doc { font-size: 12px; }        /* ellipsis, see the note above */

  /* /autofill — the browser and form mockup */
  .af-job small { font-size: 12.5px; }
  .af-file-chip { font-size: 12.5px; }
  .af-url { font-size: 12px; }        /* ellipsis, see the note above */

  /* /fit-score and /resume-tailoring — the unit beside a score dial */
  .ring-num small,
  .ring-float .big small { font-size: 12.5px; }

  /* ⚠️ `.ui .ui-row > .k .mini` is (0,4,0) in page.css, so the `.ui .mini` this file
     first shipped LOST on specificity even though it loads later, and re-measuring
     is the only reason that was caught rather than assumed fixed. Match the chain. */
  .ui .ui-row > .k .mini { font-size: 12.5px; }

  /* /resume-tailoring, the HERO editor and its two floating stickers only. The dense
     .ts2-* / .c3w-* change cards further down the page are the other tier and stay
     as they are. */
  .ring-float .lbl { font-size: 12.5px; }
  .chips-float .cap { font-size: 12.5px; }
  .kchip { font-size: 12.5px; }
  .tdemo-pill { font-size: 12.5px; }
  .tdemo-gate { font-size: 12.5px; }
  .tdemo-src { font-size: 12.5px; }

  /* /autofill field labels sat at 9.5px, the smallest type on the page. 11.5 keeps
     them visibly subordinate to the 12.5px value they caption, which is the whole
     point of a form-field label, while ending the squint. */
  .af-field label { font-size: 11.5px; }
}
