@media (max-width:700px) {
  .v2-shell { padding:22px 14px 92px; }
  .v2-header { padding:10px 14px; }
  .v2-page-label { display:none; }
  .v2-grid, .v2-account-grid { grid-template-columns:1fr; }
  .v2-toolbar { grid-template-columns:1fr 120px; }
  .v2-toolbar .v2-primary { grid-column:1/-1; }
  .v2-search { flex-direction:column; }
}

@media (min-width:900px) {
  /* Use the full window width in v2. The existing 1100px cap (and my earlier
     1280px one) left a wide dead margin around the app on large screens. */
  html[data-experience="v2"] #app { max-width:none; width:100%; }
  .v2-layout { display:grid; grid-template-columns:220px minmax(0,1fr); }
  .v2-side-nav { position:sticky; top:0; display:flex; flex-direction:column; align-self:start; min-height:100dvh; padding:24px 14px; border-right:1px solid var(--border); background:var(--surface); }
  .v2-side-brand { margin:0 8px 28px; font-size:1.05rem; font-weight:800; }
  .v2-side-brand small { display:block; margin-top:6px; color:var(--text-muted); font-size:.72rem; font-weight:400; line-height:1.4; }
  .v2-side-nav .v2-nav-button { display:flex; justify-content:flex-start; gap:10px; min-height:48px; padding:0 12px; border:0; border-radius:7px; }
  .v2-bottom-nav { display:none; }
  .v2-mobile-brand { display:none; }
  .v2-header { min-height:64px; }
  .v2-shell { padding-bottom:50px; }
}

@media (max-width:320px) {
  .v2-country { max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .v2-nav-button { font-size:.68rem; }
}

/* Phase 8 — accessibility hardening */
/* Every interactive control meets a 44px touch target at every width, since
   tablets and laptops also have touchscreens and pointer precision varies. */
.v2-primary, .v2-secondary, .v2-danger, .v2-topic, .v2-jcard-action,
.v2-help-situation, .v2-fac-switch-btn, .v2-link-button, .v2-nav-button,
.v2-player-icon, .v2-back, .v2-jcard-nav-button, .v2-drill-rate,
.v2-fac-code, .v2-result, .v2-domain > button { min-height:44px; }
.v2-link-button { display:inline-flex; align-items:center; padding:6px 2px; }
.v2-drill-rate { min-width:44px; }

/* Visible focus on every interactive element, without relying on colour alone. */
.v2-link-button:focus-visible, .v2-topic:focus-visible, .v2-jcard-action:focus-visible,
.v2-jcard-nav-button:focus-visible, .v2-help-situation:focus-visible, .v2-fac-switch-btn:focus-visible,
.v2-player-icon:focus-visible, .v2-back:focus-visible, .v2-drill-rate:focus-visible,
.v2-result:focus-visible, .v2-domain > button:focus-visible, .v2-nav-button:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:2px;
}

/* Honour reduced-motion for every V2 animation and transition. */
@media (prefers-reduced-motion:reduce) {
  #v2-prototype *, #v2-prototype *::before, #v2-prototype *::after {
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}
