/* pp-final (2026-10-08): last-loaded quality pass. Additive overrides only; no markup,
   data or scoring changes. Phones first. Since 2026-10-08 (v3) phones lay out at the real device
   width, 1:1: css px are real px, so 48 px is the tap floor (44 + a margin) and 16 px input text
   is the iOS no-zoom floor. Section 6 onward is the mobile-zoom pass. */

/* 1. Root scroller: the assessment section rounds to 1 px wider than the viewport on phones
   (pre-existing, sub-pixel); clip the root so no screen can be nudged sideways. */
@media (max-width:768px){
  html{overflow-x:clip;}
}

/* 2. Random autofill (visible to everyone during the test). One control, right-aligned so it
   reads as a utility beside the Saved mark rather than a stray first step; same height as the
   other test-form controls. */
#testAutofillBar{justify-content:flex-start;margin:12px 0 6px;}
#testAutofillBar .hangwrap{justify-content:flex-start;}
#testAutofillBar button[onclick*="random"]{min-height:44px;padding:0 18px;}
@media (max-width:768px){
  #testAutofillBar button[onclick*="random"]{min-height:48px;}
}

/* 3. Tap floors on phones for controls the earlier passes missed (all measured at 33-36 of
   the 44 px floor): skip / glossary / option / blend buttons in the question flow, the modal
   action row, the signature picker, the contact form, and the x / close buttons on the
   guide, omen and legal modals. */
@media (max-width:768px){
  #testContainer button:not(.likert > button){min-height:48px;}
  #modalContent .modal-action-row .btn{min-height:48px;}
  #sig-cancel-btn,#sig-confirm-btn,.cf-send{min-height:48px;}
  #sig-picker-modal [onclick^="_pickSig"]{min-height:48px;display:flex;align-items:center;box-sizing:border-box;}
  button[onclick="goEditAssessment()"],button[onclick="showProfileCard()"],#btn-add-to-pool{min-height:48px;}
  #signin-modal button,#signin-modal input,#contact-form input{min-height:48px;box-sizing:border-box;}
  #archetypeGuideClose,#omenClose,.cust-close,
  #limits-modal button[onclick*="display='none'"],
  #contact-modal button[onclick*="display='none'"],
  #legal-modal button[onclick*="display='none'"],
  #methodology-modal button[onclick*="display='none'"]{min-width:48px;min-height:48px;}
  /* iOS zooms the page when a focused field is under 16 css px */
  #takerName,#signin-ml-email,#signin-pw-email,#signin-pw-password,
  #cf-name,#cf-email,#cf-subject,#cf-body,.js-axisview-select,.section-nav-select,.matrix-search{font-size:16px!important;}
  /* the sticky submit bar sits on the home indicator */
  #testStickySubmit{padding-bottom:calc(10px + env(safe-area-inset-bottom))!important;}
}

/* 4. Quieter chrome. The similarity badge in the thinker card carried a 20 px colour bloom;
   the fill already says it. */
#modalContent .sim-badge{box-shadow:0 1px 3px rgba(0,0,0,.4)!important;}

/* 5. Header mode toggle: both of its buttons are display:none in every mode, so the empty
   wrapper painted as a 6x6 bordered square in the middle of the desktop header. Hide the
   wrapper while it has no visible button (browsers without :has ignore this and keep the
   old behaviour). */
#mainHeader .mode-toggle:not(:has(> button:not([style*="none"]))){display:none!important;}

/* ===================== 6. Mobile zoom pass (2026-10-08, v3) =====================
   Phones now lay out at the real device width (see the viewport script at the top of
   index.html). Everything below is sized in real px. Landscape phones lay out at 768 and are
   scaled up, so the same block covers them. */

/* 6a. Type floors: body 16, secondary 14. The 480 px breakpoint used to be out of reach on
   390/430 phones (they laid out at 500-551 virtual px); it now applies, and it shrinks several
   labels under the floor. */
@media (max-width:768px){
  body{font-size:16px!important;}
  #metaAxes .meta-lockpoles,#metaAxes .meta-sub,#metaAxes .meta-eyebrow{font-size:14px!important;}
  #testContainer button:not([class]){font-size:14px!important;} /* the classless No Opinion / Skip */
  #testSection label em,#testContainer em,.cf-label em{font-size:14px!important;}
  #sig-cancel-btn,#sig-confirm-btn{font-size:14px!important;}
  .tw-axpoles,.tw-axpoles span{font-size:14px!important;} /* pole labels under the twins axis rows (0.66rem) */
  .hs-poles,.hs-poles span{font-size:14px!important;} /* pole labels under the horseshoe cards (0.66rem) */
  #omenPanel .omen-mark{font-size:14px!important;}
  #omenPanel h2{font-size:17px!important;}
  .ad-badge{font-size:13px!important;}
  /* legal footer buttons and the Random utility read at 14.5 / 12.1 before; 14 is the floor */
  .legal-cta,#testAutofillBar button[onclick*="random"]{font-size:14px!important;}
}

/* 6b. Theme toggle and #mainHeader coexist. The toggle used to float 136x58 over the header's
   right half; it is now a 44 px pill in the header's top band and the header reserves a lane
   for it, so "Axis view" / the section picker never run underneath. */
@media (max-width:768px){
  /* body #themeToggleBtn{min-height:58px!important} and #themeToggleBtn:not(#_){font-size:15.5px} sit
     upstream in index.html; this selector outranks both (two ids + a type). */
  body #themeToggleBtn:not(#_){top:1px!important;right:8px!important;bottom:auto!important;transform:none!important;
    min-height:44px!important;height:44px!important;max-height:44px!important;padding:0 12px!important;
    line-height:42px!important;box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;
    font-size:14px!important;letter-spacing:.08em!important;}
  body #themeToggleBtn:not(#_) strong,body #themeToggleBtn:not(#_) span{font-size:14px!important;}
  #mainHeader{padding-right:150px!important;min-height:46px;box-sizing:border-box;}
  body.mode-assessment #testSection{padding-top:56px!important;}
}

/* 6c. Tap floors in real px. Inline links in prose (axis chips in the themes cards, the legal
   footer links) grow their hit box with padding and pull it back with a negative margin so
   line spacing does not move. */
@media (max-width:768px){
  a.meta-axlink{display:inline-block;padding:10px 2px;margin:-10px -2px;}
  #footer-legal .footer-links a{display:inline-block;padding:11px 4px;margin:-11px -4px;}
  #metaAxes .meta-card{min-height:44px;}
}

/* 6d. Landscape phones (laid out at 768 and scaled up): the Crypt and any other wide table
   or chart scroll inside their own box instead of pushing the page sideways. */
@media (max-width:768px){
  #databaseMode,#databaseMode > *{max-width:100%;box-sizing:border-box;}
  #databaseMode table{display:block;overflow-x:auto;max-width:100%;}
  #databaseMode pre{overflow-x:auto;max-width:100%;}
}

/* 7. Closest / Farthest (2026-10-09, closest3d): an editorial ranked list in place of the boxed
   cards. Hairline rows, quiet tabular rank, a thin match bar under the name, the coverage tier
   as a small muted dot (hollow, half, full, terracotta) instead of a warning triangle. Loads
   last, so !important only where pp-polish already used it. */
.cf-grid{gap:16px 36px!important;}
.cf-col,.cf-col-close,.cf-col-far{background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important;border-radius:0!important;}
.cf-header,.cf-close-header,.cf-far-header{display:flex;align-items:center;gap:9px;text-transform:none!important;letter-spacing:0!important;font-size:1.02rem!important;font-weight:700!important;color:var(--ink)!important;margin-bottom:0!important;padding-bottom:9px!important;border-bottom:1px solid var(--line-strong)!important;}
.cf-header::before{content:'';width:9px;height:9px;border-radius:50%;flex:0 0 auto;box-sizing:border-box;}
.cf-close-header::before{background:var(--gold);}
.cf-far-header::before{border:1.5px solid var(--ink-mute);}
.cf-list{gap:0!important;}
body .cf-row{display:grid;grid-template-columns:1.25rem 2.1rem minmax(0,1fr) auto;gap:0 10px;align-items:center;min-height:48px;padding:6px 2px!important;background:transparent!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;box-shadow:none!important;color:var(--ink)!important;font-size:1rem!important;font-weight:500!important;transform:none!important;transition:background 140ms ease!important;}
body .cf-row:hover{transform:none!important;background:rgba(226,180,92,0.07)!important;border-color:var(--line)!important;}
body.light-mode .cf-row:hover{background:rgba(138,106,30,0.08)!important;}
body .cf-row:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}
.cf-rank{width:auto!important;height:auto!important;background:none!important;border-radius:0!important;color:var(--ink-mute)!important;font-family:var(--ff-mono);font-variant-numeric:tabular-nums;font-size:0.82rem!important;font-weight:500!important;justify-content:flex-end;}
.cf-symbol{font-size:1.05rem!important;line-height:1;display:flex;align-items:center;justify-content:center;}
.cf-symbol .pt-por-inline{width:1.9rem!important;height:1.9rem!important;box-shadow:0 0 0 1px var(--line-strong)!important;}
.cf-name{position:relative;padding:2px 0 8px;font-weight:600;background:linear-gradient(var(--line),var(--line)) no-repeat left bottom/100% 1px;}
.cf-name::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:calc(var(--sim,0)*1%);max-width:100%;background:var(--gold);opacity:0.9;}
.cf-far .cf-name::after{background:var(--ink-mute);opacity:0.6;}
.cf-sim{font-family:var(--ff-mono);font-variant-numeric:tabular-nums;font-weight:600!important;font-size:0.95rem!important;color:var(--ink-dim)!important;padding-left:4px;}
.cf-ovlegend{border-bottom:1px solid var(--line)!important;color:var(--ink-mute)!important;}
.cf-ovll-lead{text-transform:none!important;letter-spacing:0!important;font-weight:700!important;color:var(--ink-dim)!important;}
@media (max-width:768px){
  .cf-grid{gap:22px!important;}
  body .cf-row{padding:7px 0!important;min-height:48px;}
}

/* 8. 3D plus-field (closest3d): the static 32px tick field stays as the far plane but steps
   back so the perspective field in #ppMotionBg carries the depth. Same SVG, lower opacity. */
body.pp-3d:not(.light-mode){background:var(--bg-0) !important;}
body.pp-3d.light-mode{background:#f3f3f4 !important;}
/* 7b. Light palette for the ranked list: ink headings (pp-polish paints the closest header green), brand gold for the bar and tier dots. */
body.light-mode .cf-header,body.light-mode .cf-close-header,body.light-mode .cf-far-header{color:var(--ink)!important;}
body.light-mode .cf-close-header::before,body.light-mode .cf-name::after{background:#8a6a1e;}
body.light-mode .cf-far .cf-name::after{background:var(--ink-mute);}