/* ═══════════════════════════════════════════════════════════════
   SPARTAN DESIGN — MOBILE & TABLET STYLESHEET
   Targets: all mobile (≤1024px), phone-only (≤600px), tablet (601–1024px)
   Tournament use: readable at arm's length, fat-finger safe,
   works offline, safe-area aware.
   ═══════════════════════════════════════════════════════════════ */

/* ── Better tap highlight ─────────────────────────────────────── */
* {
  -webkit-tap-highlight-color: rgba(0, 212, 255, 0.12);
  -webkit-text-size-adjust: 100%;
}

/* ── Safe area for notch + home bar (all pages) ──────────────── */
nav {
  padding-left:  max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

/* The fixed bottom guide-nav bar that appears on every guide page */
#backBar {
  padding-left:  max(20px, env(safe-area-inset-left)) !important;
  padding-right: max(20px, env(safe-area-inset-right)) !important;
  padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  min-height: 52px;
  box-sizing: border-box;
}

/* spacer div that compensates for the fixed bar height */
#backBar + div[style*="height"] {
  height: calc(56px + env(safe-area-inset-bottom)) !important;
}

/* Mobile bottom nav bar */
#mobileBottomNav {
  height: auto !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
}

#mobileBottomNav a {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  min-height: 48px;
}

/* ── Prevent iOS keyboard-zoom on ALL inputs ─────────────────── */
input,
select,
textarea,
input[type="number"],
input[type="text"],
input[type="search"],
input[type="email"] {
  font-size: 16px !important;
  touch-action: manipulation;
}

/* Range sliders still fine at any size */
input[type="range"] {
  font-size: inherit !important;
  height: 28px;
  cursor: pointer;
  touch-action: pan-y;
}

/* ── Minimum tap target for ALL interactive elements ─────────── */
button,
.copy-btn,
.nav-link,
.rel-link,
.ftab,
.ext-link,
.card,
.path-card {
  min-height: 44px;
}

/* ── Global table — horizontal scroll on overflow ────────────── */
table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  /* Keep table semantics */
  border-collapse: collapse;
}

/* Restore thead/tbody/tr/td layout inside scrollable wrapper */
table thead, table tbody, table tfoot {
  display: table-header-group;
}
table tbody { display: table-row-group; }
table tfoot { display: table-footer-group; }
table tr     { display: table-row; }
table th, table td { display: table-cell; }

/* Don't clip tiny BOM/code tables that scroll nicely */
.bom-example table,
.sheets-preview table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Code blocks ─────────────────────────────────────────────── */
pre, code {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre;
  word-break: normal;
  word-wrap: normal;
}

/* ══════════════════════════════════════════════════════════════
   TABLET — iPad portrait (≤ 900px) & landscape small
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Slightly larger body text for comfortable tablet reading */
  body { font-size: 15px; line-height: 1.75; }
  p, li { font-size: 15px; }

  .wrap { padding-left: 20px; padding-right: 20px; }

  /* Nav — collapse to brand + hamburger at ≤ 1024px (FIX B) */
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — ≤ 1024px (phones in any orientation + small tablets)
   FIX B: raised from 768px to cover all mobile devices
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── Nav ─────────────────────────────────────────────────── */
  .nav-links {
    display: none; /* replaced by hamburger menu */
  }

  /* hamburger button — injected by mobile-nav.js */
  #navHamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(0,212,255,.07);
    border: 1px solid rgba(0,212,255,.2);
    color: #00d4ff;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
  }

  /* ── Hamburger drawer ───────────────────────────────────── */
  /* navDrawer/navOverlay removed — Option E uses slide-up drawer */
  /* ── Content wrap ───────────────────────────────────────── */
  .wrap {
    padding: 28px 16px 120px;
  }

  /* ── Typography scale-up for readability ────────────────── */
  h1 { font-size: clamp(20px, 5.5vw, 28px) !important; }
  .hero-sub { font-size: 14px; }
  p, li { font-size: 14px; line-height: 1.7; }
  .sh { font-size: 10px !important; }

  /* ── Two-column grids → single column ───────────────────── */
  .compare,
  .budget-grid,
  .calc-grid,
  .est-grid,
  .tracker-grid,
  .path-grid,
  .guide-grid,
  .tier-grid,
  .result-tiles,
  .matrix-controls {
    grid-template-columns: 1fr !important;
  }

  /* Budget hub tier grid → 2 col on tablet-ish, single on phone */
  .tier-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Step grids stay single col */
  .step-grid { gap: 10px; }
  .step { flex-direction: column; }
  .step-num { font-size: 18px; }

  /* ── Callouts — remove left border radius on narrow screens ─ */
  .callout {
    padding: 12px 14px;
    font-size: 13.5px;
  }

  /* ── Cards — always full width ──────────────────────────── */
  .role-grid,
  .featured-row,
  .support-grid,
  .links-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Related links — wrap neatly ────────────────────────── */
  .related-links {
    flex-direction: column;
  }
  .rel-link {
    width: 100%;
    justify-content: space-between;
  }

  /* ── Back bar bottom nav — stack on very small screens ───── */
  #backBar {
    gap: 8px !important;
    flex-wrap: wrap;
  }
  #backBar a {
    font-size: 10px !important;
    padding: 8px 12px !important;
    flex: 1;
    justify-content: center;
  }

  /* ── Tables — reduce cell padding ──────────────────────── */
  th, td {
    padding: 7px 8px !important;
    font-size: 12px;
  }
  th {
    font-size: 8px !important;
  }

  /* ── BOM / sheet previews ───────────────────────────────── */
  .bom-table td, .bom-table th {
    padding: 5px 8px !important;
    font-size: 10px !important;
  }

  /* ── Email template boxes ───────────────────────────────── */
  .email-body {
    font-size: 13px;
  }

  /* ── Decision matrix widget ─────────────────────────────── */
  .matrix-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Entry templates ────────────────────────────────────── */
  .entry-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 6px;
  }

  /* ── Sponsor tier ────────────────────────────────────────── */
  .tier { padding: 12px; }
  .tier-amount { font-size: 15px; }

  /* ── Library filter tabs — horizontal scroll ─────────────── */
  .filter-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
  }
  .ftab {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ══════════════════════════════════════════════════════════════
   PHONE — ≤ 480px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Tier grid — stack fully on small phone ─────────────── */
  .tier-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Result tiles ────────────────────────────────────────── */
  .result-tiles {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Nav brand shorter ───────────────────────────────────── */
  .nav-brand { font-size: 10px; letter-spacing: 1px; }

  /* ── Wrap padding ────────────────────────────────────────── */
  .wrap { padding-left: 14px; padding-right: 14px; }

  /* ── Cards compact ───────────────────────────────────────── */
  .card { padding: 12px 14px !important; }
  .guide-card { padding: 12px !important; }

  /* ── Path cards — horizontal layout ─────────────────────── */
  .path-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 14px !important;
  }
  .path-icon { font-size: 22px; flex-shrink: 0; }
  .path-desc { font-size: 12px; }

  /* ── Budget calculator result val ────────────────────────── */
  .result-tile-val { font-size: 17px; }

  /* ── Formula box text ────────────────────────────────────── */
  .formula-text { font-size: 13px !important; }
  .formula-parts { gap: 6px; }
  .formula-part { padding: 6px 10px; font-size: 11px; }

  /* ── QA cards ────────────────────────────────────────────── */
  .qa-q { font-size: 11px; }
  .qa-text { font-size: 12.5px; }

  /* ── Timeline ───────────────────────────────────────────── */
  .tl-title { font-size: 13px; }
  .tl-desc { font-size: 12.5px; }
}

/* ══════════════════════════════════════════════════════════════
   TOURNAMENT MODE — injected class on body when user taps ⚡
   Bigger text, fewer distractions, high contrast
   ══════════════════════════════════════════════════════════════ */
body.tournament-mode p,
body.tournament-mode li {
  font-size: 16px !important;
  line-height: 1.85 !important;
}
body.tournament-mode h1 {
  font-size: clamp(22px, 5vw, 30px) !important;
}
body.tournament-mode .hero-sub {
  font-size: 15px !important;
}
body.tournament-mode table th,
body.tournament-mode table td {
  font-size: 13px !important;
  padding: 9px 10px !important;
}
body.tournament-mode .sh {
  font-size: 11px !important;
}
body.tournament-mode code {
  font-size: 13px !important;
}

/* ══════════════════════════════════════════════════════════════
   PRINT (bonus: for notebook screenshots / reference sheets)
   ══════════════════════════════════════════════════════════════ */
@media print {
  nav, #backBar, #mobileBottomNav, #navDrawer,
  .callout.orange, body::before {
    display: none !important;
  }
  body {
    background: white !important;
    color: black !important;
    font-size: 11pt;
  }
  .wrap { max-width: 100%; padding: 0; }
  h1 { color: black !important; font-size: 18pt; }
  h1 em { color: #555 !important; }
  .sh { color: black !important; }
  .sh-line { background: #ccc !important; }
  a { color: black !important; text-decoration: underline; }
}

/* ══════════════════════════════════════════════════════════════
   ADDITIONAL MOBILE POLISH — Round 2
   ══════════════════════════════════════════════════════════════ */

/* ── Better active/pressed states for touch ─────────────────── */
@media (hover: none) {
  /* Cards — show pressed state instead of hover */
  .card:active,
  .guide-card:active,
  .path-card:active,
  .feat-card:active,
  .mu-card:active,
  .role-card:active {
    transform: scale(0.97) !important;
    opacity: 0.85;
    transition: transform 0.08s, opacity 0.08s !important;
  }

  /* Buttons and links */
  .rel-link:active,
  .ext-link:active,
  .btn:active,
  .ftab:active,
  .copy-btn:active {
    opacity: 0.7;
    transform: scale(0.96);
  }

  /* Nav links in drawer */
  #navDrawer a:active {
    background: rgba(0,212,255,.14) !important;
  }

  /* Remove hover transforms that cause flicker on touch */
  .role-card:hover { transform: none !important; }
  .mu-card:hover   { transform: none !important; }
}

/* ── Reading progress bar position below nav ─────────────────── */
#readingBar {
  top: 56px; /* matches nav height */
}

/* ── cmdk overlay mobile styles (supplement to inline) ────────── */
@media (max-width: 1024px) {
  #cmdk-overlay {
    padding: 12px 12px calc(68px + env(safe-area-inset-bottom)) !important;
  }
  #cmdk-overlay > div {
    margin-top: 0;
  }
}

/* ── Filter tab scroll fade hint ─────────────────────────────── */
@media (max-width: 1024px) {
  /* Parent of filter-tabs gets a right-edge fade */
  .filter-inner-wrap,
  .filter-bar,
  div:has(> .filter-tabs) {
    position: relative;
  }

  /* Simpler approach: let the tabs section have a visual right mask */
  .filter-tabs {
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }
  /* Remove mask once user has scrolled */
  .filter-tabs.scrolled {
    mask-image: none;
    -webkit-mask-image: none;
  }
}

/* ── Sticky table headers for long tables ─────────────────────── */
@media (max-width: 1024px) {
  /* Make th sticky within horizontal-scrolling table */
  /* Note: sticky + overflow:auto doesn't work in all browsers,
     but the horizontal scroll is still the primary fix */
  th {
    white-space: nowrap;
  }

  /* BOM tables — monospace content, tighten up */
  .bom-table td,
  .bom-table th {
    white-space: nowrap;
  }
}

/* ── Hero sections — tighter on mobile ──────────────────────── */
@media (max-width: 1024px) {
  .hero {
    padding: 48px 20px 36px !important;
  }
  .hero-title {
    font-size: clamp(28px, 9vw, 44px) !important;
    letter-spacing: -1px !important;
  }
  .hero-sub {
    font-size: 14px !important;
  }
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 24px !important;
  }
  .hero-cta a {
    text-align: center;
    justify-content: center;
  }
}

/* ── Section headers — tighter on mobile ────────────────────── */
@media (max-width: 1024px) {
  .section, .section-sm {
    padding-top: 32px !important;
  }
}

/* ── Improve tap target on library cards ─────────────────────── */
@media (max-width: 1024px) {
  .card {
    padding: 14px 16px !important;
  }
  .card-title {
    font-size: 14px !important;
  }
  .card-desc {
    font-size: 12.5px !important;
    line-height: 1.55 !important;
  }
}

/* ── Timeline items — more space between dots on mobile ──────── */
@media (max-width: 480px) {
  .timeline { padding-left: 22px; }
  .tl-step { margin-bottom: 20px; }
  .tl-step::before { left: -18px; }
}

/* ── QA cards — more breathing room ─────────────────────────── */
@media (max-width: 480px) {
  .qa-card { margin-bottom: 10px; }
  .qa-q { padding: 10px 12px; }
  .qa-body { padding: 10px 12px; }
}

/* ── Step rows — stack on very small screens ──────────────────── */
@media (max-width: 480px) {
  .step-row {
    flex-direction: column;
    gap: 8px;
  }
  .step-num {
    font-size: 16px !important;
    width: auto;
  }
}

/* ── Spartan dashboard — calendar / countdown on mobile ───────── */
@media (max-width: 1024px) {
  .countdown-box,
  .phase-strip,
  .workflow {
    border-radius: 8px;
  }

  /* Make drill timer buttons touch-friendly */
  .drill-btn,
  [onclick*="timer"],
  [onclick*="start"],
  [onclick*="reset"] {
    min-height: 48px !important;
    font-size: 14px !important;
  }
}

/* ── Nav search bar — hide on mobile (hamburger is the nav) ──── */
@media (max-width: 1024px) {
  .nav-search-wrap {
    display: none !important;
  }
  .nav-count {
    display: none !important;
  }
}

/* ── Spacer at bottom accounts for both bars ─────────────────── */
@media (max-width: 1024px) {
  /* When mobile bottom nav AND backBar are both showing,
     we need enough clearance for both */
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }
}

/* ── Prevent text selection on UI elements (cleaner touch) ────── */
nav,
#mobileBottomNav,
#backBar,
.ftab,
.copy-btn {
  -webkit-user-select: none;
  user-select: none;
}

/* ── Smooth momentum scrolling everywhere ────────────────────── */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* ── Better focus ring for accessibility ─────────────────────── */
:focus-visible {
  outline: 2px solid #00d4ff;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════
   TOOLBAR FIX — OLD-STYLE MULTI-STEP PAGES
   ══════════════════════════════════════════════════════════════ */

/* On mobile: hide section tabs (hamburger provides navigation) */
@media (max-width: 1024px) {
  /* Hide .nb links (hamburger covers these) */
  nav a.nb,
  nav .nb-spacer {
    display: none !important;
  }
}

/* On desktop: keep nav-tabs visible, but add subtle back affordance */
@media (min-width: 769px) {
  /* Make the nav-brand stand out as a link on old-style pages */
  a.nav-brand {
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s;
  }
  a.nav-brand:hover {
    opacity: 0.7;
  }
  /* Role page .nb links: hide overflow on medium screens */
  @media (max-width: 1024px) {
    nav .nb-spacer ~ a.nb { display: none; }
  }
}

/* Back link in old-style navs */
.nav-back-link {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim, #6b8ba8);
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid var(--border, #1a3050);
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
  margin-right: 8px;
}
.nav-back-link:hover {
  color: #00d4ff;
  border-color: rgba(0,212,255,0.4);
}
/* On mobile, back link hidden — hamburger drawer handles navigation */
@media (max-width: 1024px) {
  .nav-back-link { display: none !important; }
}



/* ══════════════════════════════════════════════════════════════
   PHONE-ONLY — ≤ 600px (FIX C)
   Bottom tab bar spacer only applies on phones, not tablets.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }
}

/* ══════════════════════════════════════════════════════════════
   LANDSCAPE PHONE — short screens in landscape orientation
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 500px) {
  /* Shorter nav in landscape — more content visible */
  /* Option E: top nav hidden; bottom bar already handles nav */
  #spartan-bottom-bar {
    height: calc(44px + env(safe-area-inset-bottom));
  }

  /* Reduce wrap top padding in landscape */
  .wrap {
    padding-top: 20px;
  }

  /* Hide bottom tab bar in landscape — drawer covers navigation */
  #mobileBottomNav {
    display: none !important;
  }

  /* Reduce backBar in landscape */
  #backBar {
    padding: 6px 16px !important;
    bottom: 0 !important;
  }
  #backBar + div[style*="height"] {
    height: calc(44px + env(safe-area-inset-bottom)) !important;
  }
}

/* ── GPU layer promotion for fixed elements ───────────────────── */
/* Prevents iOS Safari scroll jank on sticky/fixed elements       */
#backBar,
#spartan-bottom-bar,
#spartan-drawer {
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Explicit compositing hint for the grid background overlay */
body::before {
  will-change: transform;
}

/* ══════════════════════════════════════════════════════════════
   OPTION E — backBar sits above bottom nav bar on mobile
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* backBar hidden on mobile — 5-tab bottom bar handles all navigation */
  #backBar { display: none !important; }
  #backBar + div { display: none !important; }
}
}

/* ── Library topbar: simplified on mobile (Option E handles nav) ── */
@media (max-width: 1024px) {
  .topbar .back-link,
  .topbar .topbar-sep {
    display: none !important;
  }
  .topbar-inner {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* ── Light mode overrides for mobile nav ─────────────────────── */
html[data-theme="light"] #spartan-bottom-bar {
  background: rgba(240,244,248,0.97) !important;
  border-top-color: #c8d8e8 !important;
}

html[data-theme="light"] #spartan-drawer,
html[data-theme="light"] #spartan-drawer-panel {
  background: #f0f4f8 !important;
  border-color: #c8d8e8 !important;
}

html[data-theme="light"] #spartan-drawer-panel h3,
html[data-theme="light"] #spartan-drawer-panel .drawer-section-title {
  color: #0a1628 !important;
  border-color: #c8d8e8 !important;
}

html[data-theme="light"] #spartan-drawer-panel a {
  color: #4a6a8a !important;
  border-color: #c8d8e8 !important;
}

html[data-theme="light"] #spartan-drawer-panel a:hover {
  background: rgba(0,105,148,.08) !important;
  color: #006994 !important;
}

html[data-theme="light"] #spartan-search-panel,
html[data-theme="light"] #spartan-search-overlay {
  background: rgba(240,244,248,.97) !important;
}

html[data-theme="light"] #spartan-search-input {
  background: rgba(0,0,0,.05) !important;
  color: #0a1628 !important;
  border-color: #c8d8e8 !important;
}

/* Guide tab navigation — always visible, horizontally scrollable */
nav .nav-tabs {
  display: flex !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: 2px;
  flex-wrap: nowrap;
  padding-bottom: 2px;
  min-width: 0;
  flex: 1 1 0;
}
nav .nav-tabs::-webkit-scrollbar { display: none; }
nav .nav-tab, nav .nav-tabs button {
  flex-shrink: 0;
}

/* Nav must not clip tab overflow */
@media (max-width: 1024px) {
  nav {
    overflow: visible;
  }
  nav .nav-tabs {
    overflow-x: auto !important;
    max-width: calc(100vw - 48px);
  }
}