/* ═══════════════════════════════════════════════════════════════
   GORA AI — tablet-first responsive layer (Oct 2026)
   Loaded after styles.css. Tablets (iPad portrait/landscape) are the
   primary device; phones get a compact single-column version.
   Breakpoints: ≤1194px tablet (incl. iPad Pro 11" landscape),
                ≤900px tablet portrait, ≤600px phone.
═══════════════════════════════════════════════════════════════ */

/* ── Overlays always sit above the sticky header ─────────────── */
.drawer                { z-index: 300; }
.tmpl-src-modal, #templateSourceModal { z-index: 320; }
#addProgrammeModal     { z-index: 320; }
.assistant-panel       { z-index: 260; }
.assistant-launcher    { z-index: 250; }
.cookie-banner         { z-index: 240; }

/* The template drawer's Close button stays pinned while scrolling */
.drawer-inner { position: relative; }
.drawer-inner > #closeDrawer {
  position: sticky; top: 0; float: right; z-index: 5;
  margin: -4px -4px 0 12px; background: #fff;
  box-shadow: 0 0 0 6px #fff;
}

/* Map legend: covered vs reference-only */
.map-legend { flex-direction: column; gap: 8px; }
.map-legend .legend-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.map-legend .legend-group > strong { flex-basis: 100%; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.map-legend .legend-group--muted { opacity: 1; color: var(--muted); padding-top: 6px; border-top: 1px dashed var(--line); }

/* ── Touch devices: comfortable targets, no iOS input zoom ───── */
@media (pointer: coarse) {
  button, .small-button, .export-button, .sidenav-btn, .filter-tab,
  .assistant-modes button, .plan-banner-cta, .plan-banner-ghost,
  .market-chip-label, .link-row a { min-height: 44px; }
  .link-row a { display: inline-flex; align-items: center; }
  .topbar button { min-height: 0; }
  .mode-switch-btn { height: 36px; }
  input, select, textarea { font-size: 16px !important; }
  .requirement-item > input[type="checkbox"] { width: 22px; height: 22px; margin-top: 2px; }
  .market-card:hover:not(.active) { transform: none; }
  #mapTooltip { display: none !important; }
}

/* ═════════════════ TABLET (≤1194px) ═════════════════ */
@media (max-width: 1194px) {
  /* Header: brand + actions on row 1, a full-width step bar on row 2 */
  .topbar { flex-wrap: wrap; height: auto; min-height: 56px; row-gap: 0; padding-top: 0; }
  .topbar-brand { height: 56px; }
  .topbar .sandbox-badge { display: none; }
  .topbar-actions { height: 56px; margin-left: auto; }
  .step-nav {
    order: 3; flex: 0 0 100%; height: 48px; justify-content: space-between;
    margin: 0 calc(-1 * clamp(14px, 3vw, 40px)); padding: 0 clamp(8px, 2vw, 28px);
    width: calc(100% + 2 * clamp(14px, 3vw, 40px)); flex-basis: calc(100% + 2 * clamp(14px, 3vw, 40px));
    border-top: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.12);
  }
  .workspace-app[data-mode="portfolio"] .step-nav { display: none !important; }
  .step-nav-btn { flex: 1 1 0; justify-content: center; height: 40px; padding: 0 6px; border-radius: 8px; }
  .step-nav-btn.active { background: rgba(255,255,255,.08); }
  .step-nav .step-label, .step-nav-btn:not(.active) .step-label { display: inline !important; font-size: 13px; }
  .step-connector { width: 12px; margin: 0 2px; }

  /* Page rhythm */
  .step-page { padding: 18px clamp(14px, 3vw, 28px); gap: 14px; }
  .plan-banner { margin: 14px clamp(14px, 3vw, 28px) 0; }
  .panel { padding: 16px; border-radius: 12px; }

  /* Section headings: title on its own line, actions as a tidy row */
  .section-heading { flex-wrap: wrap; }
  .section-heading > div:first-child { flex: 1 1 auto; min-width: min(100%, 280px); }
  .export-group { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; }
  .export-group::-webkit-scrollbar { display: none; }
  .export-group > * { flex: 0 0 auto; }
  .export-group { flex-direction: row !important; align-items: center !important; }

  /* Dossier: section tabs become a horizontal, scrollable tab bar with labels */
  .dossier-layout { grid-template-columns: 1fr !important; grid-template-rows: auto 1fr; border-radius: 12px; }
  .dossier-sidenav {
    flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 4px;
    border-right: none; border-bottom: 1px solid var(--line); padding: 8px !important;
    scrollbar-width: none;
  }
  .dossier-sidenav::-webkit-scrollbar { display: none; }
  .sidenav-btn { flex: 0 0 auto; padding: 8px 14px !important; border-radius: 999px; overflow: visible; }
  .sidenav-label { display: inline !important; overflow: visible; }

  /* Market cards: 2-up on tablets, readable dl */
  .market-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .market-card dl { grid-template-columns: 84px 1fr; row-gap: 6px; }

  /* Product intake: slimmer filter rail */
  .catalog-sidebar { width: 200px; }
  .product-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Template drawer: full-height sheet from the right */
  .drawer-inner, .drawer.drawer--wide .drawer-inner {
    width: min(860px, 100vw - 24px) !important; height: calc(100dvh - 24px); max-height: none;
    margin: 12px 12px 12px auto; border-radius: 14px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  /* Assistant: right-hand side sheet */
  .assistant-panel {
    top: 12px; right: 12px; bottom: 12px; width: min(440px, 100vw - 24px);
    max-height: none; border-radius: 14px;
  }

  /* Bottom actions clear of the assistant button */
  .step-footer { padding-right: 0; padding-bottom: 72px; }
}

/* ═════════════════ TABLET PORTRAIT (≤900px) ═════════════════ */
@media (max-width: 900px) {
  .catalog-layout { flex-direction: column; }
  .catalog-sidebar { width: 100%; max-height: none; border-right: none; border-bottom: 1px solid var(--line); }
  .catalog-sidebar .filter-tabs { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .catalog-sidebar .filter-tab { width: auto; flex: 0 0 auto; }
  .product-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═════════════════ PHONE (≤600px) ═════════════════ */
@media (max-width: 600px) {
  .topbar { padding: 0 12px; }
  .topbar-brand, .topbar-actions { height: 52px; }
  .topbar-brand-name, .pricing-nav-link, .support-nav-link, .sign-out-button { display: none !important; }
  .mode-switch-btn { padding: 0 10px; }
  .step-nav { height: 46px; margin: 0 -12px; padding: 0 6px; width: calc(100% + 24px); flex-basis: calc(100% + 24px); }
  .step-nav-btn { gap: 6px; padding: 0 4px; }
  .step-circle { width: 24px; height: 24px; font-size: 11px; }
  .step-connector { display: none; }
  /* short labels: Device · Markets · Dossier · Tools */
  .step-nav .step-label, .step-nav-btn:not(.active) .step-label { font-size: 0 !important; }
  .step-nav .step-label::after { content: attr(data-short); font-size: 12px; }

  .step-page { padding: 12px; gap: 12px; }
  .panel { padding: 14px; border-radius: 12px; }
  h2 { font-size: 20px; }
  .section-heading { flex-direction: column; gap: 10px; margin-bottom: 10px; }
  .export-group { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)); width: 100%; gap: 6px; overflow: visible; }
  .export-button { padding: 0 8px; justify-content: center; font-size: 12.5px; white-space: nowrap; }

  /* Sandbox / plan banner: compact, buttons side by side */
  .plan-banner { margin: 10px 12px 0; padding: 10px 12px; gap: 8px; font-size: 13px; }
  .plan-banner > span { flex-basis: 100%; }
  .plan-banner-cta, .plan-banner-ghost { height: 36px; min-height: 36px; font-size: 12.5px; }
  .plan-banner-cta { flex: 1; justify-content: center; }

  /* Dossier tab bar */
  .dossier-sidenav { padding: 6px !important; }
  .sidenav-btn { padding: 6px 12px !important; font-size: 12.5px; }
  .sidenav-btn svg { width: 15px; height: 15px; }

  /* Requirement cards: tighter */
  .requirement-item { gap: 10px; }
  .requirement-item h3 { font-size: 15.5px; }
  .requirement-item p { font-size: 14px; line-height: 1.5; }
  .cost-estimate { padding: 10px 12px; }
  .link-row { gap: 6px; }

  /* One market card per row */
  .market-cards { grid-template-columns: 1fr; }
  .product-tile-grid { grid-template-columns: 1fr; }

  /* Template drawer + assistant: full-screen sheets */
  .drawer-inner, .drawer.drawer--wide .drawer-inner {
    width: 100vw !important; height: 100dvh; margin: 0; border-radius: 0;
    padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
  }
  .assistant-panel {
    inset: 0; width: 100vw; height: 100dvh; max-height: none; border-radius: 0; border: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Assistant launcher: compact pill bottom-right */
  .assistant-launcher { right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); height: 46px; padding: 0 16px; }

  /* Cookie banner: one compact strip */
  .cookie-banner { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); flex-direction: row !important; flex-wrap: wrap; align-items: center !important; gap: 8px; padding: 10px 12px !important; font-size: 12.5px; }
  .cookie-text { min-width: 0; flex-basis: 100%; }
  .cookie-actions { width: 100%; }
  .cookie-actions > * { flex: 1; }

  .add-prog-market-chips { max-height: 210px; overflow-y: auto; }
}

/* ── Sandbox: save/export gate + idle-reset toast (sandbox-guard.js) ── */
.sbx-gate { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: rgba(8, 18, 22, 0.5); }
.sbx-gate[hidden] { display: none; }
.sbx-gate-card { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: #fff; border-radius: 16px; padding: 24px 22px 20px; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.sbx-gate-card h2 { margin: 4px 0 8px; font-size: 22px; }
.sbx-gate-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--teal-soft, #e6f4f1); cursor: pointer; font-size: 14px; }
.sbx-gate-what { margin: 0 0 6px; font-weight: 700; color: var(--ink, #10242b); }
.sbx-gate-sub { margin: 0 0 16px; color: var(--muted, #5b6472); font-size: 14px; line-height: 1.5; }
.sbx-gate-cta { display: flex; justify-content: center; width: 100%; text-decoration: none; }
.sbx-gate-form { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line, #d9e0e3); }
.sbx-gate-or { margin: 0 0 8px; font-size: 13.5px; color: var(--muted, #5b6472); }
.sbx-gate-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sbx-gate-row input { flex: 1 1 220px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line, #d9e0e3); border-radius: 8px; font: inherit; }
.sbx-gate-row button { min-height: 44px; }
.sbx-gate-consent { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 12.5px; color: var(--muted, #5b6472); }
.sbx-gate-consent[hidden], .sbx-gate-row[hidden] { display: none; }
.sbx-gate-msg { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--teal, #0f766e); }
.sbx-reset-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 400; padding: 12px 18px; border-radius: 10px; background: #10242b; color: #fff; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: calc(100vw - 32px); }

/* Sign-in providers are hidden until enabled in Supabase */
.oauth-section[hidden], .oauth-btn[hidden], .oauth-divider[hidden] { display: none !important; }

/* ── Accessibility (WCAG 2.2 AA) ── */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 5000; padding: 10px 16px; border-radius: 8px; background: #0f766e; color: #fff; font-weight: 700; text-decoration: none; transition: top .15s; }
.skip-link:focus { top: 12px; }
#mainContent:focus { outline: none; }
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 3px solid #0f766e; outline-offset: 2px; }
:root[data-theme="dark"] :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible { outline-color: #5fd4c6; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }