/* Pork-dash mobile view (html.pd-mobile). Toggle button lives in the sticky nav. */
.pd-mobile-toggle {
  margin-left: auto; appearance: none; border: 1px solid #d6c48f; background: #fffdf5; color: #78350f;
  font-weight: 700; font-size: .85rem; border-radius: 8px; padding: 4px 10px; cursor: pointer; white-space: nowrap;
}
.pd-mobile-toggle[aria-pressed="true"] { background: #d97706; color: #fff; border-color: #b45309; }

html.pd-mobile body { font-size: 14px; }
html.pd-mobile header { padding: 10px 12px; }
html.pd-mobile header h1 { font-size: 1.05rem; }
html.pd-mobile header p { font-size: .76rem; margin-top: 3px; }

/* horizontally scrollable sticky nav */
html.pd-mobile nav {
  flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch;
  gap: 2px !important; padding: 2px 6px !important; scrollbar-width: none;
}
html.pd-mobile nav::-webkit-scrollbar { display: none; }
html.pd-mobile nav a, html.pd-mobile nav .pd-mobile-toggle {
  flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center; padding: 0 10px;
  white-space: nowrap; font-size: .86rem;
}
html.pd-mobile nav .pd-mobile-toggle { position: sticky; right: 0; margin: 4px 0 4px auto; min-height: 36px; box-shadow: -6px 0 8px #efe6c8; }

html.pd-mobile main { padding: 10px 8px 32px !important; }
html.pd-mobile .note { font-size: .8rem; padding: 9px 10px; }

/* stacked year slider */
html.pd-mobile .year-range { flex-direction: column; align-items: stretch !important; gap: 4px; padding: 8px 10px; }
html.pd-mobile .year-range-macro { position: static; }
html.pd-mobile .year-range .yr-label { min-width: 0; font-size: .86rem; }
html.pd-mobile .year-range .yr-sliders { min-width: 0; }
html.pd-mobile .year-range input[type=range] { height: 40px; }
html.pd-mobile .year-range .yr-hint { font-size: .72rem; }

/* headline cards 2x2 */
html.pd-mobile .cards, html.pd-mobile .top-cards, html.pd-mobile .drawer-kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important;
}
html.pd-mobile .card { padding: 8px 10px; min-width: 0; }
html.pd-mobile .card .k { font-size: .66rem; }
html.pd-mobile .card .v { font-size: 1.02rem; overflow-wrap: anywhere; }
html.pd-mobile .card .s { font-size: .72rem; }

/* charts full width, reduced height (Plotly layout.height set by mobile.js) */
html.pd-mobile .layout { grid-template-columns: 1fr !important; }
html.pd-mobile .js-plotly-plot { height: 280px !important; min-height: 0 !important; width: 100% !important; }
html.pd-mobile .js-plotly-plot.pd-tall { height: 300px !important; }
html.pd-mobile .chart, html.pd-mobile .chart-tall { height: 280px; }
html.pd-mobile .panel > h2, html.pd-mobile .panel h2 { font-size: .92rem; padding: 9px 10px; }
html.pd-mobile .chart-block h3, html.pd-mobile .panel h3 { font-size: .86rem; }

/* tables: horizontal scroll, sticky header + first column */
html.pd-mobile table { font-size: .76rem; }
html.pd-mobile th, html.pd-mobile td { padding: 6px 7px; white-space: nowrap; }
html.pd-mobile .pd-hscroll { overflow: auto; max-height: 70vh; -webkit-overflow-scrolling: touch; }
html.pd-mobile .wrap { overflow: auto; -webkit-overflow-scrolling: touch; }
html.pd-mobile table th { position: sticky; top: 0; z-index: 3; }
html.pd-mobile table td:first-child { position: sticky; left: 0; z-index: 2; background: inherit; box-shadow: 1px 0 0 #eee0b8; }
html.pd-mobile table th:first-child { position: sticky; left: 0; top: 0; z-index: 4; }
html.pd-mobile table tbody tr { background-color: var(--row, #fffdf5); }
html.pd-mobile table tbody tr.selected { background-color: var(--row-sel, #fde68a); }

/* tap targets >= 40px */
html.pd-mobile button, html.pd-mobile .btn, html.pd-mobile .btn-download, html.pd-mobile select,
html.pd-mobile .metric-tabs button, html.pd-mobile .toolbar label, html.pd-mobile .toggle-box,
html.pd-mobile .excl-list label { min-height: 40px; }
html.pd-mobile .metric-tabs button { padding: 6px 10px; font-size: .8rem; }
html.pd-mobile .toolbar { padding: 8px 10px; gap: 6px; }
html.pd-mobile .excl-list label { display: inline-flex; align-items: center; min-width: 44px; justify-content: center; }
html.pd-mobile tbody tr td { height: 40px; }

/* exports-by-country drawer full screen */
html.pd-mobile .drawer-backdrop { align-items: stretch; justify-content: stretch; }
html.pd-mobile .drawer { width: 100vw !important; max-width: 100vw !important; height: 100% !important; border-left: none; box-shadow: none; }
html.pd-mobile .drawer-head { padding: 10px 12px; }
html.pd-mobile .drawer-close { width: 44px !important; height: 44px !important; }
html.pd-mobile .drawer-body { padding: 10px 8px 24px; }

html.pd-mobile footer { padding: 10px 12px 24px; font-size: .75rem; }