/* ==========================================================================
   Legal Evidence Portal — Mobile Enhancements
   Additive mobile-only styles. Does not alter desktop layout.
   Load AFTER legal.css, legal-court.css, legal-nav.css, legal-dark.css.
   ========================================================================== */

/* ==========================================================================
   1. STAT BLOCK TOOLTIPS — show title text below each block on mobile
   ========================================================================== */

@media (max-width: 768px) {
  .stat-block[title]::after {
    content: attr(title);
    display: block;
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--text-secondary);
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border);
  }
}

/* ==========================================================================
   2. STATS GRID — force 2 columns on mobile (not auto-fit collapse to 1)
   ========================================================================== */

@media (max-width: 768px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-sm);
  }

  .stat-block {
    padding: var(--space-sm);
  }

  .stat-block .stat-value {
    font-size: var(--text-lg);
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .stat-block .stat-label {
    font-size: 0.65rem;
  }
}

/* ==========================================================================
   3. TOUCH TARGETS — minimum 44px for all interactive elements
   ========================================================================== */

@media (max-width: 768px) {
  .btn,
  .filter-btn,
  .legal-panel-close,
  .panel-tab,
  .cite-this-btn,
  .hash-badge {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .sidebar-link,
  .nav-links a,
  .breadcrumb a,
  .authority-item a,
  a.xref,
  .prev-next a,
  .case-card,
  .search-result-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .mobile-nav a {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* Bigger filter buttons so fingers can tap them */
  .filter-btn {
    padding: 0.5em 1em;
    font-size: var(--text-sm);
  }
}

/* ==========================================================================
   4. SIDEBAR — hamburger toggle on mobile
   ========================================================================== */

/* Hamburger button (visible only on mobile) */
.sidebar-hamburger {
  display: none;
}

@media (max-width: 1099px) {
  .sidebar-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: calc(var(--nav-height, 64px) + var(--space-sm));
    left: var(--space-sm);
    z-index: 110;
    width: 44px;
    height: 44px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: background 0.15s;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--text-secondary);
  }

  .sidebar-hamburger:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
  }

  /* Sidebar becomes an off-canvas drawer on mobile */
  .legal-sidebar {
    display: block;
    position: fixed;
    left: 0;
    top: var(--nav-height, 64px);
    bottom: 0;
    width: 260px;
    background: var(--bg-primary);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: var(--space-md) 0;
    z-index: 105;
    font-size: var(--text-xs);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08);
  }

  .legal-sidebar.sidebar-open {
    transform: translateX(0);
  }

  /* Overlay behind open sidebar */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    top: var(--nav-height, 64px);
    background: rgba(0, 0, 0, 0.3);
    z-index: 104;
  }

  .sidebar-overlay.visible {
    display: block;
  }

  /* Ensure main content is not pushed when sidebar opens on mobile */
  .has-sidebar .legal-main {
    margin-left: 0;
  }

  .has-sidebar .site-nav .nav-inner {
    padding-left: var(--space-xl);
  }
}

/* ==========================================================================
   5. FONT SIZES — increased readability on small screens
   ========================================================================== */

@media (max-width: 768px) {
  .legal-hero .subtitle {
    font-size: var(--text-base);
    line-height: 1.7;
  }

  .legal-section-title {
    font-size: var(--text-lg);
  }

  .case-card .case-title {
    font-size: var(--text-base);
  }

  .case-card .case-meta {
    font-size: var(--text-sm);
  }

  .case-card .case-ref {
    font-size: var(--text-xs);
  }

  .open-justice-banner {
    font-size: var(--text-sm);
    line-height: 1.7;
  }

  .ground-card .ground-title {
    font-size: var(--text-base);
  }

  .ground-card .ground-desc {
    font-size: var(--text-sm);
    line-height: 1.7;
  }

  .formal-text {
    font-size: var(--text-base);
    line-height: 1.8;
  }

  .annotation-box {
    font-size: var(--text-sm);
  }

  .annotation-box .annotation-label {
    font-size: var(--text-xs);
  }

  .nexis-code {
    font-size: var(--text-base);
  }

  .breadcrumb {
    font-size: var(--text-xs);
    flex-wrap: wrap;
  }

  .breadcrumb span:last-child {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .portal-notice {
    font-size: var(--text-sm);
    padding: var(--space-sm) var(--space-md);
  }
}

/* ==========================================================================
   6. TABLES — horizontal scroll with scroll hints
   ========================================================================== */

@media (max-width: 768px) {
  .order-table,
  .schedule-table,
  .matrix-table,
  .register {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Scroll hint wrapper. Add .table-scroll-wrapper around tables in HTML,
     or these styles degrade gracefully on bare tables. */
  .table-scroll-wrapper {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-scroll-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, var(--bg-primary));
    pointer-events: none;
    opacity: 0.8;
    z-index: 1;
  }

  /* Prevent tables from shrinking below readable width */
  .order-table table,
  .schedule-table table,
  .matrix-table table {
    min-width: 600px;
  }

  .order-table {
    font-size: var(--text-xs);
  }

  .order-table th,
  .order-table td {
    padding: var(--space-xs) var(--space-sm);
    white-space: nowrap;
  }

  /* Let description column wrap */
  .order-table td:last-child {
    white-space: normal;
    min-width: 200px;
  }

  .schedule-table th,
  .schedule-table td {
    padding: var(--space-xs) var(--space-sm);
  }
}

/* ==========================================================================
   7. SPLIT-SCREEN PANEL — full-width overlay on mobile
   ========================================================================== */

@media (max-width: 768px) {
  .legal-panel {
    width: 100vw;
    max-width: none;
    top: 0;
    z-index: 200;
  }

  .legal-panel-header {
    padding: var(--space-sm) var(--space-md);
    padding-top: calc(var(--space-sm) + env(safe-area-inset-top, 0px));
  }

  .legal-panel-close {
    min-height: 44px;
    min-width: 44px;
    font-size: var(--text-base);
  }

  .legal-panel-title {
    font-size: var(--text-sm);
    max-width: calc(100vw - 100px);
  }

  /* Don't shrink main when panel is open (it's a full overlay) */
  .legal-main.panel-active {
    margin-right: 0;
  }
}

/* ==========================================================================
   8. BOTTOM MOBILE NAV — prevent content overlap
   ========================================================================== */

@media (max-width: 768px) {
  .legal-page,
  .legal-wrapper {
    padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
  }

  .site-footer {
    padding-bottom: calc(var(--space-2xl) + 4rem + env(safe-area-inset-bottom, 0px));
  }

  /* Cross-nav links at page bottom need clearance too */
  .legal-wrapper + section {
    padding-bottom: calc(var(--space-xl) + 4rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ==========================================================================
   9. SAFE AREA INSETS — notched phones (iPhone X+)
   ========================================================================== */

@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .mobile-nav {
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .legal-panel {
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .sidebar-hamburger {
      left: calc(var(--space-sm) + env(safe-area-inset-left, 0px));
    }

    body {
      padding-left: env(safe-area-inset-left, 0px);
      padding-right: env(safe-area-inset-right, 0px);
    }
  }
}

/* ==========================================================================
   10. COURT HEADING — stack properly on narrow screens
   ========================================================================== */

@media (max-width: 768px) {
  .court-heading,
  [style*="court-heading"],
  .legal-hero .container > div:first-of-type {
    padding: var(--space-md) var(--space-sm);
  }

  /* Court name and division: smaller text, tighter spacing */
  .court-heading .court-name,
  .court-heading .court-division {
    font-size: 0.65rem;
    letter-spacing: 0.15em;
  }

  .court-heading .case-number {
    font-size: var(--text-sm);
    word-break: break-all;
  }

  .court-heading .party {
    font-size: var(--text-base);
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .court-heading .party-role {
    font-size: var(--text-xs);
  }

  .court-heading .between,
  .court-heading .and {
    font-size: 0.6rem;
    margin: var(--space-xs) 0;
  }

  /* Inline-styled court heading (overview page uses inline styles) */
  .legal-hero [style*="border-bottom:3px double"] {
    padding: var(--space-md) var(--space-xs);
  }

  /* Make the "Public Evidence Portal" heading smaller */
  .doc-title-block h1,
  .legal-hero h1 {
    font-size: var(--text-lg);
    letter-spacing: 0.04em;
  }

  /* Case grid: single column on small mobile */
  .case-grid {
    grid-template-columns: 1fr;
  }

  /* Navigate grid: 2 columns */
  .case-grid[style*="minmax(200px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Prev/next navigation: stack vertically */
  .prev-next {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .prev-next a {
    max-width: 100%;
  }

  .prev-next .next {
    text-align: left;
  }

  .prev-next .pn-title {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Cross-reference links: wrap nicely */
  a.xref {
    font-size: 0.75rem;
    padding: 0.3em 0.5em;
  }

  /* Evidence header: stack */
  .evidence-header {
    flex-direction: column;
    gap: var(--space-sm);
  }

  /* Evidence meta: single column on very small screens */
  .evidence-meta {
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.75rem;
  }

  .evidence-meta dt {
    font-weight: 600;
    margin-top: var(--space-xs);
  }

  .evidence-meta dd {
    margin-top: var(--space-xs);
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Authority items: stack on small screens */
  .authority-item {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .authority-item a,
  .authority-item span {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Timeline: tighter left padding */
  .timeline {
    padding-left: 1.5rem;
  }

  .timeline-entry::before {
    left: calc(-1.5rem + 0.25rem);
  }

  /* Prevent void cascade dots clipping outside container */
  .legal-section [style*="padding-left:2rem"],
  .legal-section [style*="padding-left: 2rem"] {
    overflow: hidden;
  }

  /* Timeline dates: wrap inline links and badges */
  .timeline-date {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
  }

  .timeline-date .badge {
    font-size: 0.6rem;
  }

  /* Ground cards: tighter padding */
  .ground-card {
    padding: var(--space-md);
  }

  /* List items inside ground cards: reduce left indent */
  .ground-card ul {
    padding-left: 1rem;
  }

  /* Ground links: allow wrap */
  .ground-links {
    gap: var(--space-xs);
  }

  /* Annotation box: tighter */
  .annotation-box {
    padding: var(--space-sm) var(--space-md);
  }

  /* Search input */
  .legal-search-input {
    font-size: 16px; /* prevents iOS zoom on focus */
    min-height: 44px;
  }
}

/* ==========================================================================
   EXTRA SMALL SCREENS (under 400px)
   ========================================================================== */

@media (max-width: 400px) {
  .stats-row {
    gap: var(--space-xs);
  }

  .stat-block {
    padding: var(--space-xs);
  }

  .stat-block .stat-value {
    font-size: var(--text-base);
  }

  .stat-block .stat-label {
    font-size: 0.6rem;
  }

  .stat-block[title]::after {
    font-size: 0.6rem;
  }

  .case-grid[style*="minmax(200px"] {
    grid-template-columns: 1fr !important;
  }

  .legal-hero h1 {
    font-size: var(--text-base);
  }
}

/* ==========================================================================
   GLOBAL MOBILE FIXES (added 22/03/2026 from 8-agent audit)
   ========================================================================== */

@media (max-width: 768px) {
  /* ── Bar chart fixes: prevent text clipping in narrow bars ── */
  .bar-track, .rv-bar-track {
    overflow: visible !important;
  }
  .bar-fill, .rv-bar-fill {
    min-width: fit-content;
    padding-right: 0.5rem;
    overflow: visible;
  }

  /* ── Stacked bar sensitivity: stack label above bar ── */
  .sensitivity-row {
    flex-wrap: wrap;
  }
  .sensitivity-label {
    width: 100% !important;
    text-align: left;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
  }
  .stacked-segment {
    font-size: 0 !important;
  }

  /* ── Scroll hint gradient for overflow containers ── */
  div[style*="overflow-x"] {
    position: relative;
  }
  div[style*="overflow-x"]::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    background: linear-gradient(to right, transparent, var(--bg-primary, #fafaf8));
    pointer-events: none;
    z-index: 1;
  }

  /* ── Revenue vertical chart: rotate labels ── */
  .revenue-bar .bar-value {
    font-size: 0.55rem;
    top: -20px;
    transform: translateX(-50%) rotate(-45deg);
    transform-origin: center bottom;
  }
  .revenue-chart {
    padding-top: 2.5rem;
  }

  /* ── SVG: responsive scaling ── */
  svg {
    max-width: 100%;
    height: auto;
  }

  /* ── Gate page card ── */
  .gate-card {
    padding: 2rem 1.5rem;
  }
  .gate-title {
    font-size: 1.3rem;
  }
  .gate-cases {
    font-size: 0.6rem;
  }

  /* ── Annotation boxes ── */
  .annotation-box {
    padding: var(--space-sm);
  }

  /* ── Two-column inline grids: stack ── */
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── NTB cards ── */
  .ntb-card {
    padding: 1rem;
  }
  .ntb-number {
    width: 1.75rem;
    height: 1.75rem;
    line-height: 1.75rem;
    font-size: 0.8rem;
  }

  /* ── Inline tables: minimum readable size ── */
  .rv-table td, .rv-table th {
    padding: 0.35rem;
    font-size: 0.8rem;
  }

  /* ── Counter/response cards ── */
  .ntb-counter, .ntb-response {
    padding: 0.75rem;
  }

  /* ── Circularity loop diagrams ── */
  .loop-diagram {
    max-width: 300px;
    margin: 0 auto;
  }

  /* ── JR body cards ── */
  .jr-card {
    padding: 1rem;
  }

  /* ── Gaslighting cards ── */
  .gl-card {
    padding: 1rem;
  }

  /* ── Waiver sections ── */
  .wv-section {
    padding: 1rem;
  }

  /* ── SAR cards ── */
  .sar-card {
    padding: 1rem;
  }

  /* ── Dark mode scroll hint ── */
  html.dark div[style*="overflow-x"]::after {
    background: linear-gradient(to right, transparent, var(--void-deep, #0a0c14));
  }
}