/* QCI v2 — responsive layer (phones and small tablets)
   ============================================================================

   The site was built desktop-only. This file adapts it to a phone WITHOUT
   touching the desktop rendering: every visual rule below lives inside
   `@media (max-width: 820px)` (with a tighter 480px tier for small phones), so
   above 820px the browser parses this file and applies nothing from it. The
   desktop is safe by construction, not by inspection — keep it that way, and
   never add a rule here outside a media query except the two burger rules at
   the top, which hide markup that exists only for this layer.

   Load order: linked LAST in <head>, after each page's inline <style>, so an
   equal-specificity tie goes to this file. Where a value has to beat an inline
   `style="…"` attribute (the header row, the fixed-width admin inputs) the
   declaration is `!important` — an author !important outranks an inline
   non-important declaration. Those are marked one by one below; do not sprinkle
   more.

   Colours come from the tokens defined at the top of qci.css. A literal only
   looks right in one of the seven themes, which is the same rule the rest of
   the codebase follows.

   Markup hooks this file depends on (both additive, invisible on desktop):
     - src/partials/topnav.php  — #qci-nav-toggle, .qci-nav-burger, .qci-nav-panel
     - the 25 page headers      — .qci-pagehead / -id / -tools

   Measured baseline before this file existed, at a 390px viewport: every page
   scrolled sideways (scrollWidth 724–805px), the user/theme controls sat off
   screen, and the topnav's 12 buttons filled the first screenful.
   ========================================================================== */

/* The only rules outside a media query. The burger control is in the markup at
   every width; on desktop it must not exist visually. */
#qci-nav-toggle { display: none; }
.qci-nav-burger { display: none; }


@media (max-width: 820px) {

  /* ── Shell ───────────────────────────────────────────────────────────────
     28px of padding on a 390px screen is 14% of it. The card's decorative HUD
     corners are 60px squares — at this size they overlap the content they
     frame, so they go. */
  .qci-wrap {
    width: 100%;
    padding: 12px;
  }
  .qci-card {
    padding: 14px;
    margin-bottom: 12px;
    border-radius: 16px;
    /* A card is often a grid item, and a grid item's automatic minimum size is
       its min-content — which a wide table inside propagates all the way up,
       stretching the column past the viewport even though the table itself
       sits in an overflow-x:auto wrapper. That rule only zeroes out for the
       scroll container itself, never for the block chain above it. */
    min-width: 0;
  }
  .dash-row > *,
  .qci-card > * { min-width: 0; }
  .qci-card::before,
  .qci-card::after { display: none; }

  /* .qci-sweep is `inset:-120px` — 240px wider than its card — and its
     keyframes then translate it another 30% to the right. body{overflow-x:
     hidden} does not save us: that value propagates to the viewport, so the
     overflow is not clipped at the card, it just becomes unreachable content
     off the right edge. Pulled back to the card's box, with a narrower travel
     so the animation still reads and never leaves it. */
  .qci-sweep {
    inset: 0;
    animation-name: qci-sweep-contained;
  }
  @keyframes qci-sweep-contained {
    0%, 100% { transform: translateX(-40%); }
    50%      { transform: translateX(0); }
  }

  /* ── Page header ─────────────────────────────────────────────────────────
     The row is a non-wrapping flex from an inline style, so the identity block
     and the QCIADMINS/USER/Tema block sat side by side and the second one fell
     off the screen. !important is what beats the inline declaration. */
  .qci-pagehead {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .qci-pagehead-id { gap: 10px !important; }
  /* flex-shrink:0 is set inline: without overriding it the cluster keeps its
     max-content width (742px on the Market Big Data card) and wrapping inside
     it never gets a chance to happen. */
  .qci-pagehead-tools {
    flex-wrap: wrap !important;
    flex-shrink: 1 !important;
    min-width: 0;
  }

  .qci-title {
    font-size: 19px;
    letter-spacing: .06em;
    overflow-wrap: anywhere;   /* "INTELLIGENCE" was clipped mid-word */
  }
  .qci-top { flex-wrap: wrap; }

  /* The theme picker keeps its hover/focus dropdown (a tap focuses the button,
     which :focus-within catches) but must open inwards, not off the edge. */
  .qci-pagehead-tools .qci-dropdown-menu {
    right: 0;
    left: auto;
    min-width: 0;
    max-width: min(86vw, 280px);
  }

  /* ── Navigation ──────────────────────────────────────────────────────────
     52 nav_items rows, 12 of them top level, previously rendered as a wall of
     buttons ahead of the content. Now collapsed behind ☰ and driven by a
     checkbox — no JS, and nothing about qci_nav_render_node() changes. */
  .qci-nav-burger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--red-35);
    border-radius: 12px;
    background: var(--red-08);
    color: var(--text);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
  }
  #qci-nav-toggle:checked ~ .qci-nav-burger {
    border-color: var(--red-55);
    background: var(--red-14);
  }
  #qci-nav-toggle:not(:checked) ~ .qci-nav-panel { display: none; }

  .qci-nav-panel {
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 10px;
  }
  .qci-nav { flex-direction: column; align-items: stretch; gap: 0; }
  .qci-nav-left,
  .qci-nav-right {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
  }
  .qci-nav-right { margin-top: 6px; }
  .qci-nav .qci-btn,
  .qci-nav form,
  .qci-nav form .qci-btn {
    display: block;
    width: 100%;
    min-height: 42px;
    line-height: 30px;
    text-align: left;
  }

  /* Inside the panel a dropdown is not a dropdown: :hover is unreliable on
     touch, so every menu renders open, indented under its heading. Scoped to
     the panel so the theme picker in the header keeps behaving like a menu. */
  .qci-nav-panel .qci-dropdown { width: 100%; }
  .qci-nav-panel .qci-dropdown-menu,
  .qci-nav-panel .qci-dropdown-submenu-flyout {
    position: static !important;   /* beats the inline right/left overrides */
    display: block;
    min-width: 0 !important;       /* beats $qciNavMenuStyle's 280px */
    width: auto;
    max-width: none;
    margin: 4px 0 8px 14px;
    border: none;
    border-left: 2px solid var(--red-25);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
  }
  .qci-nav-panel .qci-dropdown-menu::before { display: none; }
  .qci-nav-panel .qci-dropdown-menu a,
  .qci-nav-panel .qci-dropdown-menu button,
  .qci-nav-panel .qci-dropdown-submenu-flyout a {
    min-height: 40px;
    display: flex;
    align-items: center;
  }
  .qci-nav-panel .qci-dropdown-submenu-label { min-height: 38px; }

  /* ── Tables ──────────────────────────────────────────────────────────────
     A table scrolls inside its own box instead of dragging the page sideways
     (admin's user list is 844px, the Market Database's is 5773px). Several
     pages already wrap their tables in an overflow-x:auto div — that keeps
     working, this only covers the ones that do not. */
  .qci-table,
  .dash-table,
  .qci-modal-table,
  .noc-disc-table,
  .pj-plan {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .qci-table th,
  .qci-table td { padding: 8px 10px; }

  /* The P&L charts come from two generators in src/crypto.php: one writes a
     viewBox and scales, the other writes width/height attributes, and for that
     one `width:100%` (crypto_dashboard_global.php:195) crops the drawing at
     the card edge instead of shrinking it. Give the card the scroll and the
     chart its own geometry back. */
  .chart-card { overflow-x: auto; }
  .chart-card svg:not([viewBox]) {
    width: auto !important;
    max-width: none;
  }

  /* ── Forms and touch targets ─────────────────────────────────────────────
     16px is the threshold below which iOS Safari zooms into a focused field.
     !important is for the inline width:180px/200px/220px fields in admin.php. */
  .qci-input,
  .qci-textarea,
  select.qci-input {
    width: 100% !important;
    max-width: 100%;
    font-size: 16px;
  }
  .qci-btn,
  .qci-btn-sm { min-height: 38px; }
  .qci-inline-select { max-width: 100%; }

  /* Two-column form grids written as inline styles (admin.php, the calendar's
     time fields). They have no class to hook, and one column is the only thing
     that fits. */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* ── Modals ──────────────────────────────────────────────────────────────*/
  .qci-modal { padding: 2vh 8px; }
  .qci-modal-box,
  .noc-modal-box,
  .pj-modal-box-wide {
    max-width: 100% !important;
    width: 100%;
  }

  /* ── dashboard.php ───────────────────────────────────────────────────────
     The reactor's own steps (500/375/310px) size the circle, but .dash-orbit
     spins: a rotating square's bounding box is 1.41x its side, so the ring
     claims 84px of scrollable width per unit of --dash-reactor-scale even
     though the circle you see fits. These steps are that number solved for the
     content box (viewport - 24px of .qci-wrap padding) rather than for the
     circle, which is why they sit below the page's own. */
  .dash-reactor { --dash-reactor-scale: 6; }
  .dash-stage { max-width: 100%; }
  .dash-stats { width: 100%; }

  /* ── private.php ─────────────────────────────────────────────────────────
     .pv-row already collapses to one column at 900px. */
  .pv-cell { min-width: 0; }

  /* ── hive.php ────────────────────────────────────────────────────────────
     .hive-hexgrid is a fixed 720x580 box with absolutely positioned hexes, so
     it cannot reflow. zoom scales the layout box as well as the paint (unlike
     transform, which would leave a 720px box behind and keep the page
     scrolling sideways). */
  .hive-hexgrid { zoom: .6; }
  .noc-subgrid { grid-template-columns: 1fr; }
  .noc-disc-select { max-width: 100%; }

  /* ── quitos_ai.php ───────────────────────────────────────────────────────
     The rail is a 186px column beside the pane; on a phone it becomes a
     horizontal strip above it. The :has() rules that open a 320/340px detail
     column need !important because they outrank a plain class. */
  .qai-shell { grid-template-columns: 1fr; gap: 14px; }
  .qai-rail {
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
    width: 100%;
  }
  .qai-chat,
  .qai-runs,
  .qai-editor { grid-template-columns: 1fr !important; }
  .qai-cards { grid-template-columns: 1fr; }

  /* ── family_calendar.php ─────────────────────────────────────────────────
     Seven day columns in 366px is 48px each. The week grid scrolls sideways
     instead, and .tg-time-col — already position:sticky;left:0 — pins the hour
     labels while it does. */
  .tg-outer { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tg-outer:has(#tg-week) .tg-head,
  .tg-outer:has(#tg-week) .tg-allday,
  #tg-week .tg-inner { min-width: 620px; }
  .form-grid { grid-template-columns: 1fr; }
  .mo-grid { gap: 2px; font-size: 11px; }
  .cal-nav { flex-wrap: wrap; row-gap: 8px; }

  /* ── admin.php ───────────────────────────────────────────────────────────
     The permission rows are a 300px/220px/110px grid set inline. */
  .qci-perm-row {
    grid-template-columns: 1fr !important;
    row-gap: 6px;
  }

  /* ── projects.php ────────────────────────────────────────────────────────
     .pj-ct-grid and .pj-ct-children already step 8 → 2 columns at 900px. */
  .pj-ct-grid,
  .pj-ct-children { grid-template-columns: 1fr; }
  .pj-drop { min-width: 0; max-width: 90vw; }
}


@media (max-width: 480px) {

  .qci-wrap { padding: 10px 8px; }
  .qci-card { padding: 12px; }
  .qci-title { font-size: 16px; }

  /* 720px of hexes into a ~344px content box. */
  .hive-hexgrid { zoom: .45; }

  .dash-reactor { --dash-reactor-scale: 4; }

  /* The crypto dashboards already stack at 700px; this is for the remaining
     auto-fit grids whose 210–280px minimums still overflow a 360px phone. */
  .dash-stats,
  .noc-subgrid,
  .filter-grid,
  .detail-grid,
  .payload-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 340px) {
  /* 3.4 x 84px of spinning orbit ring in a 296px content box. */
  .dash-reactor { --dash-reactor-scale: 3.4; }

  /* 720px of hexes into a 280px content box. */
  .hive-hexgrid { zoom: .36; }
}