/* OBOR mobile final QA: spacing, touch targets and chart inspection.
 * Every visual rule is confined to phone/tablet widths <=700px.
 * Desktop appearance and research calculations are untouched.
 */
@media(max-width:700px){
  /* Keep site-header mode and menu targets thumb-sized. */
  .site-header.obor-tools-ready .home-menu,
  .site-header.obor-tools-ready .obor-header-controls .research-workspace-switch button{
    min-height:44px;box-sizing:border-box;
  }
  /* The year/month selectors replaced a former single month field.
   * Keep the actual controls beside the research heading, not on a new line. */
  body.home-v3.obor-mobile-firstscreen .economic-lens-heading{
    display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;
    gap:8px;min-height:44px;margin-bottom:9px;
  }
  body.home-v3.obor-mobile-firstscreen .economic-lens-heading-text{
    flex:0 1 auto;min-width:0;
  }
  body.home-v3.obor-mobile-firstscreen .obor-workspace-heading-tools{
    flex:0 0 auto;width:auto;min-width:0;max-width:66%;gap:0;
  }
  body.home-v3.obor-mobile-firstscreen .economic-month-picker{
    display:flex;width:auto;min-width:0;max-width:100%;flex:0 0 auto;
    align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:4px;
  }
  body.home-v3.obor-mobile-firstscreen .economic-month-picker #economic-month-prev,
  body.home-v3.obor-mobile-firstscreen .economic-month-picker #economic-month-next{
    display:none;
  }
  body.home-v3.obor-mobile-firstscreen .economic-month-picker select{
    box-sizing:border-box;min-height:44px;height:44px;
    font-size:14px;padding:7px 4px;background:#fff;
  }
  body.home-v3.obor-mobile-firstscreen #economic-month-year{width:67px}
  body.home-v3.obor-mobile-firstscreen #economic-month-month{width:101px}
  body.home-v3.obor-mobile-firstscreen .economic-month-picker #economic-month-latest:not(:disabled){
    display:inline-flex;min-width:46px;min-height:44px;height:44px;
    padding:6px;font-size:11px;
  }
  body.home-v3.obor-mobile-firstscreen .economic-month-picker #economic-month-latest:disabled{
    display:none;
  }
  body.home-v3.obor-mobile-firstscreen .obor-customize-anchor{
    display:none;
  }
  body.home-v3.obor-mobile-firstscreen .economic-lens-heading .eyebrow{
    font-size:10px;line-height:1.3;white-space:normal;
  }
  /* Scope, date, and selected question should survive a narrow screen. */
  body.home-v3.obor-mobile-firstscreen .economic-lens-shell{
    min-width:0;overflow:visible;
  }
  body.home-v3.obor-mobile-firstscreen .economic-lens-output,
  body.home-v3.obor-mobile-firstscreen .economic-lens-takeaway,
  body.home-v3.obor-mobile-firstscreen .economic-lens-graphic{
    min-width:0;
  }
  body.home-v3.obor-mobile-firstscreen .economic-lens-primary-value>strong{
    overflow-wrap:anywhere;
  }
  body.home-v3.obor-mobile-firstscreen .economic-lens-shell[data-obor-mobile-edit=true]
   .economic-lens-controls label select{
    min-height:34px;font-size:14px;
  }
  body.home-v3.obor-mobile-firstscreen .obor-mobile-context{
    padding:9px 10px;margin-bottom:8px;
  }
  /* Mobile modal must clear the dynamic safe areas and allow keyboard scrolling. */
  body.obor-mobile-research-polish .economic-question-dialog[open]{
    padding-bottom:calc(22px + env(safe-area-inset-bottom,0px));
    overscroll-behavior-y:contain;
  }
  body.obor-mobile-research-polish .economic-question-dialog-top{
    padding-top:calc(7px + env(safe-area-inset-top,0px));
    min-height:calc(52px + env(safe-area-inset-top,0px));
  }
  body.obor-mobile-research-polish .economic-question-dialog>.economic-question-filters{
    top:calc(52px + env(safe-area-inset-top,0px));
  }
  body.obor-mobile-research-polish .economic-question-dialog>.economic-question-filters select{
    font-size:16px;
  }
  body.obor-mobile-research-polish .economic-active-question{
    scroll-margin-top:80px;
  }
  /* Range buttons already scroll horizontally: ensure finger size and no wrap. */
  body.obor-mobile-research-polish .research-history-range{
    scrollbar-width:thin;touch-action:pan-x;
  }
  body.obor-mobile-research-polish .research-history-range button{
    min-height:44px;
  }

  /* All other interactive instruments use a shared 44px touch rhythm. */
  .obor-trade-range-control select,
  .obor-trade-range-custom input,
  .econ-panel .obor-evidence-trigger,
  .econ-panel .obor-evidence-range select,
  .econ-panel .obor-evidence-filter select,
  .econ-panel .obor-evidence-custom input,
  #trade-summary .tfm-controls select,
  #trade-summary .tfm-custom input,
  #trade-summary .tfm-period-controls button,
  #trade-summary .tfm-period-controls select,
  .hs6-explorer-controls select,
  .hs6-explorer-custom input,
  .obor-china-history-controls select,
  .obor-china-history-custom input,
  .policy-timeline-field select,
  .policy-timeline-custom input{
    min-height:44px;box-sizing:border-box;
  }
  .econ-panel .obor-evidence-row{
    min-height:44px;padding:9px 7px;
  }
  .econ-panel .obor-evidence-month input[type=range]{
    min-height:44px;box-sizing:border-box;margin:3px 0;
  }

  /* Keep paired custom-date inputs inside narrow cards. */
  .hs6-explorer-custom,
  .obor-china-history-custom{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;min-width:0;gap:7px;
  }
  .hs6-explorer-custom[hidden],
  .obor-china-history-custom[hidden]{display:none}
  .hs6-explorer-custom label,
  .obor-china-history-custom label{
    min-width:0;
  }
  .hs6-explorer-custom input,
  .obor-china-history-custom input{
    width:100%;min-width:0;max-width:100%;
  }
  /* Larger inspection surfaces: readouts below charts replace floating
   * tooltips on touch screens (never occlude points or adjacent controls). */
  .econ-panel .obor-evidence-plot svg{height:126px}
  .hs6-explorer-plot svg{height:150px}
  .obor-china-history-plot svg{height:160px}
  .econ-panel .obor-evidence-tip,
  .obor-trade-tooltip,
  #trade-summary .tfm-tooltip,
  .hs6-explorer-tip,
  .obor-china-history-tooltip{
    display:none!important;
  }
  .econ-panel .obor-evidence-chartread,
  .obor-trade-chart-note,
  #trade-summary .tfm-inspection,
  .hs6-explorer-read,
  .obor-china-history-read{
    font-size:12px;line-height:1.5;min-height:36px;
    overflow-wrap:anywhere;
  }
  .obor-china-history-source,
  .policy-timeline-source{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .obor-china-history-source[hidden]{display:none}

  /* The timeline preserves a 19px visual dot but gives it a 44px target.
   * Horizontal coordinates and event dates do not change. */
  .policy-timeline-rail{height:44px}
  .policy-timeline-marker,
  .policy-timeline-marker--expiry{
    top:0;box-sizing:border-box;width:44px;height:44px;
    padding:0;border:0;border-radius:50%;
    background:transparent;box-shadow:none;
  }
  .policy-timeline-marker::after{
    content:"";position:absolute;top:12px;left:12px;
    width:19px;height:19px;box-sizing:border-box;border-radius:50%;
    border:3px solid #fff;background:#2f7d99;
    box-shadow:0 0 0 1.5px #2f7d99;
  }
  .policy-timeline-marker--expiry::after{
    background:#b77b4b;box-shadow:0 0 0 1.5px #b77b4b;
  }
  .policy-timeline-marker:hover,
  .policy-timeline-marker[aria-pressed=true],
  .policy-timeline-marker:focus-visible{
    box-shadow:none;outline:2px solid #214859;outline-offset:0;z-index:3;
  }
  .policy-timeline-marker[aria-pressed=true]::after{
    box-shadow:0 0 0 2px #214859;
  }
  .policy-timeline-product strong{overflow-wrap:anywhere}
  .policy-timeline-custom{gap:7px}
  .policy-timeline-custom label{min-width:0;flex:1 1 120px}
  .policy-timeline-custom input{width:100%;max-width:100%}
  .policy-timeline-detail{min-width:0;overflow-wrap:anywhere}
}
@media(max-width:380px){
  .site-header.obor-tools-ready .brand-lockup{
    width:114px;flex:0 1 114px;min-width:0;
  }
  .site-header.obor-tools-ready .home-menu{
    min-width:48px;padding:6px 4px;
  }
  /* Two controlled rows beat cramped or clipped selectors on 320–375px. */
  body.home-v3.obor-mobile-firstscreen .economic-lens-heading{
    flex-wrap:wrap;gap:5px;
  }
  body.home-v3.obor-mobile-firstscreen .economic-lens-heading-text{
    flex:1 1 100%;
  }
  body.home-v3.obor-mobile-firstscreen .obor-workspace-heading-tools{
    flex:1 1 100%;width:100%;max-width:100%;
  }
  body.home-v3.obor-mobile-firstscreen .economic-month-picker{
    width:100%;justify-content:flex-start;
  }
  body.home-v3.obor-mobile-firstscreen #economic-month-year{width:71px}
  body.home-v3.obor-mobile-firstscreen #economic-month-month{width:105px}
}