/* skarn-framework — responsive & touch layer
 * ==========================================
 * Cross-cutting adaptivity. Load this LAST among the framework layers, after
 * the theme, chrome and content stylesheets. Two independent concerns:
 *
 *   1. TOUCH   — `pointer: coarse`: grow interactive targets to ~44px so the
 *                shell is usable with a finger. A fine pointer (mouse /
 *                trackpad) is left exactly as the desktop design intends.
 *   2. COMPACT — `max-width` breakpoints shrink the desktop shell for phones
 *                and narrow windows. Tablet portrait lands in the 768–900px
 *                band; phones in the ≤600px band. Above 900px nothing here
 *                applies, so the desktop layout is byte-identical.
 *
 * Component responsiveness lives with the components: the 12-column grid and
 * the navbar expand modes are in skf-grid.css / skf-content.css. This file
 * only covers what those cannot reach — the fixed desktop shell.
 *
 * Media queries are PHYSICAL. There is no `inline-size` media feature (only
 * container queries have one), so `@media (min-inline-size: …)` is silently
 * dropped by every browser. This layer — and the grid — therefore use
 * `min-width` / `max-width`, which describe the viewport regardless of the
 * active writing mode. Component *styling* stays logical (inline/block) so
 * vertical and RTL flows still reflow; only the breakpoint syntax is
 * physical.
 */

/* ═══ 1. Compact shell — tablets & phones (≤ 900px) ══════════════════ */
@media (max-width: 900px) {

  /* ── Titlebar: tighter padding, window tabs snap-scroll ─────────── */
  .skf-titlebar { padding-inline: 4px; }
  .skf-tb-start { padding-inline-end: 2px; }
  .skf-win-tabs {
    scroll-snap-type: inline proximity;
    overflow-inline: auto;
  }
  .skf-win-tab {
    max-inline-size: 150px;
    scroll-snap-align: start;
  }

  /* ── Ribbon: scroll the band instead of letting it wrap tall ────── */
  .skf-ribbon-tabs {
    gap: 12px;
    padding-inline: 12px;
    flex-wrap: nowrap;
    overflow-inline: auto;
    scrollbar-width: none;
  }
  .skf-ribbon-tabs::-webkit-scrollbar { display: none; }
  .skf-ribbon-tab { flex: none; }
  .skf-ribbon-pages {
    padding-inline: 12px;
    min-block-size: 56px;
    overflow-inline: auto;
    scrollbar-width: none;
  }
  .skf-ribbon-pages::-webkit-scrollbar { display: none; }
  .skf-ribbon-page.is-active {
    flex-wrap: nowrap;
    min-inline-size: max-content;   /* let the page grow so the band scrolls */
  }
  .skf-group { padding-inline-end: 12px; margin-inline-end: 12px; gap: 3px; }
  .skf-group-name { font-size: 0.62rem; letter-spacing: 0.1em; }
  .skf-cap-btn { min-inline-size: 50px; min-block-size: 46px; padding-inline: 7px; }
  .skf-cap-btn svg { width: 20px; height: 20px; }

  /* ── Statusbar ──────────────────────────────────────────────────── */
  .skf-statusbar { gap: 8px; padding-inline: 10px; }

  /* ── Overlays: take the screen, never overflow it ───────────────── */
  .skf-pane, .skf-sidebar { --skf-pane-size: min(320px, 84vw); }
  .skf-fontdrawer { inline-size: min(320px, 88vw); }
  .skf-fd-select { inline-size: calc(100% - 24px); margin-inline: 12px; }

  /* ── Explorer / tree: tighter rows ─────────────────────────────── */
  .skf-nav-toolbar { padding-inline: 8px; }
  .skf-tree-row { padding-inline: 8px; }

  /* ── Content components that hard-code desktop widths ──────────── */
  .skf-dialog { min-inline-size: 0; max-inline-size: calc(100vw - 2rem); }
  .skf-toast-container { inset-inline: 12px; }
  .skf-toast { white-space: normal; max-inline-size: 100%; }
  .skf-table th, .skf-table td { padding-inline: 0.9rem; }
  .skf-section-head { gap: 0.6rem 0.9rem; }
  .skf-carousel__control--prev { inset-inline-start: 0.5rem; }
  .skf-carousel__control--next { inset-inline-end: 0.5rem; }
}

/* ═══ 2. Narrow shell — phones (≤ 600px) ═════════════════════════════ */
@media (max-width: 600px) {

  .skf-win-tab { max-inline-size: 120px; }
  .skf-ribbon-tabs { gap: 10px; padding-inline: 10px; }
  .skf-ribbon-tab { padding-inline: 6px; }
  .skf-cap-btn { min-inline-size: 44px; padding-inline: 6px; }
  .skf-statusbar { font-size: 0.72rem; }

  /* controls that would otherwise overflow a 320px viewport */
  .skf-dd { max-inline-size: 100%; }
  .skf-dd-btn { min-inline-size: 0; }
  .skf-seg-item { padding-inline: 9px; }
  .skf-titlebar .tb-mode .skf-btn-toggle { padding-inline: 9px; }
  .skf-dialog { max-inline-size: calc(100vw - 1rem); }

  /* typography scale-down for content pages */
  .skf-section-head { flex-wrap: wrap; gap: 0.35rem 0.75rem; }
  .skf-section-title { font-size: 1.35rem; }
  .skf-display-1 { font-size: 2.5rem; }
  .skf-display-2 { font-size: 2.25rem; }
  .skf-display-3 { font-size: 2rem; }
  .skf-display-4 { font-size: 1.75rem; }
  .skf-display-5 { font-size: 1.6rem; }
  .skf-display-6 { font-size: 1.5rem; }
  .skf-lead { font-size: 1.05rem; }
  .skf-blockquote { font-size: 1rem; }

  .skf-navbar { padding-inline: 1rem; }
  .skf-navbar__link { padding-inline: 0.6rem; }
}

/* ═══ 3. Touch targets — coarse pointer ══════════════════════════════
 * Ordered after the compact blocks so a finger always wins the final size.
 * Sizes are declared with `min-*` where the visual layer already uses
 * `min-block-size`, so nothing is pinned to a value that a theme needs. */
@media (pointer: coarse) {
  :root { --skf-touch: 44px; }

  /* structural controls */
  .skf-btn,
  .skf-btn-toggle,
  .skf-entry,
  .skf-textarea { min-block-size: var(--skf-touch); }

  .skf-check,
  .skf-radio,
  .skf-switch {
    min-block-size: var(--skf-touch);
    padding-block: 6px;
  }

  /* icon-only chrome + factory buttons */
  .skf-icon-btn,
  .skf-nav-btn,
  .skf-titlebar-btn,
  .skf-win-btn,
  .skf-row-act {
    inline-size: var(--skf-touch);
    block-size: var(--skf-touch);
  }
  .skf-win-tab-add { inline-size: var(--skf-touch); }  /* height is bar-capped */

  /* text-bearing rows in menus, drawers, trees and panes */
  .skf-dd-item,
  .skf-ctx-item,
  .skf-fd-item,
  .skf-pane-row,
  .skf-tree-row,
  .skf-seg-item,
  .skf-mode-btn,
  .skf-close,
  .skf-carousel__control,
  .skf-pagination__item { min-block-size: var(--skf-touch); }

  /* resize edges are a desktop-window affordance — pointless under a finger */
  .skf-rz-edge { display: none; }
}