/* ===== MOBILE POLISH v4 — 2026-09-02 · all rules are inside mobile media queries ===== */

/* --- 1. Mobile nav accordion. The desktop :hover/:focus-within rule (specificity 0,4,0)
       was beating the .nav.menu-open override (0,3,0) and translating the open submenu
       ~171px off the left edge of the screen the moment it was tapped. --- */
@media (max-width:1100px){
  .menu-btn{width:44px;height:44px;gap:5px}
  .menu-btn span{width:18px}
  .nav-links li.has-dd .dd-menu,
  .nav-links li.has-dd:hover .dd-menu,
  .nav-links li.has-dd:focus-within .dd-menu{
    position:static;transform:none;left:auto;right:auto;top:auto;
    min-width:0;width:auto;max-width:100%;max-height:none;overflow:visible;
    background:transparent;border:0;box-shadow:none;padding:2px 0 12px 12px}
  .nav-links li.has-dd .dd-menu::before{display:none}
  .nav.menu-open li.has-dd .dd-menu{opacity:1;visibility:visible;pointer-events:auto}
  .nav.menu-open li.has-dd:not(.dd-open) .dd-menu{display:none}
  .nav.menu-open li.has-dd.dd-open .dd-menu{display:block}
  .nav.menu-open .dd-eyebrow{display:none}
  .nav.menu-open .nav-links>li>a,
  .nav.menu-open .nav-links .dd-top{display:flex;align-items:center;width:100%;
    box-sizing:border-box;min-height:52px;padding:6px 4px;font-size:15px}
  .nav.menu-open .nav-links .dd-top{justify-content:space-between;gap:12px}
  .nav.menu-open .dd-caret{margin-left:auto;flex:0 0 auto;width:9px;height:9px;
    border-right-width:2px;border-bottom-width:2px}
  .nav.menu-open li.has-dd .dd-caret{transform:rotate(45deg)}
  .nav.menu-open li.has-dd.dd-open .dd-caret{transform:rotate(225deg) translateY(-3px)}
  .nav.menu-open .dd-menu a{display:block;white-space:normal;box-sizing:border-box;
    min-height:46px;padding:12px 10px;font-size:1rem;line-height:1.3}
  .nav.menu-open .dd-menu .dd-divider{margin:6px 8px}
  .nav.menu-open .nav-links{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .nav.menu-open .nav-links a.nav-cta{min-height:52px}
  .nav.menu-open .nav-links a::after{display:none}
  .dd-overview{font-weight:600}
}
@media (min-width:1101px){.dd-menu a.dd-overview,.dd-overview{display:none!important}}
/* Small-laptop nav density. The English pages already carry these steps; the three
   Spanish pages kept the older nav and pushed the layout to 1229px at 1101–1300. */
@media (min-width:1101px) and (max-width:1300px){
  .nav-row{padding:16px 22px;gap:12px}
  .nav-links{gap:12px}
  .nav-links>li>a,.nav-links .dd-top{white-space:nowrap;font-size:12px}
  .nav-links a.nav-cta{padding:9px 11px;font-size:11px}
  .brand-mark{width:44px;height:44px}
  .brand-name{font-size:.72rem}
  .brand-meta{display:none}
}
@media (min-width:1101px) and (max-width:1200px){
  .nav-row{padding:14px 16px;gap:8px}
  .nav-links{gap:8px}
  .nav-links>li>a,.nav-links .dd-top{font-size:11.5px}
  .nav-links a.nav-cta{padding:8px 9px;font-size:10.5px}
}

/* --- 2. No column may be forced wider than the phone --- */
@media (max-width:1100px){
  .post-grid>*,.bio-grid>*,.feature-grid>*,.roadmap-grid>*,.lmap-grid>*,
  .c-grid>*,.f-grid>*,.svc-grid>*,.atty-grid>*,.docket-grid>*,.ed-grid>*,
  .court-grid>*,.urgency-inner>*,.post-prose>*{min-width:0}
  .post-prose,.post-prose *{max-width:100%}
  .bio-photo img,.post-prose img{max-width:100%;height:auto}
}

/* --- 3. Wide tables scroll instead of stretching the page --- */
@media (max-width:899px){
  .tscroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tscroll>table{margin-top:0}
  table{max-width:100%}
  .ctable,.gtable,.ptable,.post-prose table{font-size:.9rem}
  .ctable th,.ctable td,.gtable th,.gtable td,.ptable th,.ptable td,
  .post-prose table th,.post-prose table td{padding:9px 7px;overflow-wrap:anywhere}
  .ctable th,.gtable th,.ptable th,.post-prose table th{letter-spacing:.03em;font-size:11.5px}
}
/* Below ~560px a three-column data table has no honest column widths left, so each
   row becomes a labelled card instead of seven-character word-broken columns. */
@media (max-width:560px){
  table.tstack,table.tstack tbody,table.tstack tr,table.tstack td{display:block;width:auto}
  table.tstack{border-collapse:collapse;margin:18px 0}
  table.tstack thead{display:none}
  table.tstack tbody tr{border:1px solid var(--rule);border-left:2px solid var(--brass);
    background:var(--paper);padding:6px 0;margin:0 0 12px}
  table.tstack tbody td{border:0;padding:7px 14px;font-size:1rem;line-height:1.5}
  table.tstack tbody td[data-lbl]::before{content:attr(data-lbl);display:block;
    font-family:var(--mono),ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--stone-3);margin-bottom:3px;font-weight:600}
  table.tstack tbody td:first-child{font-weight:600}
  .tscroll{overflow-x:visible}
}

/* --- 4. Small phones (iPhone SE / mini) --- */
@media (max-width:430px){
  .roadmap-grid,.lmap-grid,.feature-grid,.bio-grid,.court-grid,.jcourt-grid,
  .lmap-grid,.c-grid{grid-template-columns:1fr!important}
  section,.contact,.manifesto,.hero,footer{padding-left:18px;padding-right:18px}
  .nav-row,.trust-inner,.s-inner,.f-grid,.f-bot,.f-disclaimer,.breadcrumb,
  .jumpnav-inner{padding-left:18px;padding-right:18px}
  .bio-photo-col{max-width:100%}
  .hero-grid>*,.hero-l,.hero-r,.form-card,.field,.field>*{min-width:0}
}
@media (max-width:365px){
  .mcb{gap:8px;padding-left:8px;padding-right:8px}
  .mcb a{font-size:.8rem;padding:13px 4px;letter-spacing:0;min-width:0}
}

/* --- 5. Content-bearing text large enough to read on a phone --- */
@media (max-width:899px){
  .f-h{font-size:12.5px;letter-spacing:.14em;margin-bottom:16px}
  .f-addr,.f-bot,.f-disclaimer{font-size:12.5px}
  footer li a{font-size:14px}
  .form-foot,.c-form .sub,.form-sub,.ph-form-sub,.hero-stat .lbl{font-size:11.5px}
  .dcase-tag,.dcase-foot,.court,.dcourt-meta,.dcourt-go,.jcourt-county,
  .office-lbl,.office-pic-meta,.atty-cred,.atty-role,.court-tag,.trust-label,
  .results-disclaimer,.toc-label,.post-byline,.urgency-meta,.urgency-clock,
  .fact-row .lbl,.pc{font-size:12px}
  .mthd-list li,.sidebar-box h4,.bio-facts h3,.pcite,.svc-link,.gfine{font-size:12.5px}
  .court-info dt,.ph-fact .lbl,.dcase-num span,.poffense small,.prow .pc,
  .hero-pull cite,.bio-quote cite,.ed-pillquote cite,.manifesto-cite,
  .manifesto-cite strong,.ctable th,.gtable th,.ptable th{font-size:12px}
  .nav.menu-open .dd-menu a .dd-sub{font-size:11px}
}

/* --- 6. Thumb-sized targets for standalone links --- */
@media (max-width:899px){
  .jumpnav a{padding:16px 12px;font-size:11.5px}
  .toc a{display:block;padding:11px 4px}
  .toc li{margin-bottom:2px}
  .loc-row,.post-card,.court-card a,.jcourt a{min-height:44px}
  .bio-fact .v a,.c-val a,.court-info dd a{display:inline-block;padding:12px 0}
  .consent a{display:inline-block;padding:7px 2px;margin:-7px -2px}
}

/* --- 7. Ticker: two tidy lines, not four --- */
@media (max-width:640px){
  .ticker{padding:5px 0}
  .ticker-inner{gap:0 10px;font-size:11px;line-height:1.45;padding:0 14px}
  .ticker a{padding:2px 0}
  .ticker .sep{display:none}
}