/*
 * ◆ AXIOM — shell responsive base (ax-shell.css)
 *
 * The ONE responsive layer every AXIOM shell shares. A "shell" is the chrome
 * that hosts app surfaces: the macOS Tauri hub, the mobile/tablet hub, the
 * Linux bridge shell. Before this file each shell reinvented its own
 * breakpoints, safe-area handling and touch sizing inline — so responsiveness
 * had to be fixed in three 180 KB files.
 *
 * Namespaced `ax-*`; it does not touch existing classes, so it can be adopted
 * incrementally. Form factor is driven by attributes `AxiomPlatform.apply()`
 * stamps on <html>:
 *
 *   <html data-ax-form="mobile|tablet|desktop"
 *         data-ax-orientation="portrait|landscape"
 *         data-ax-pointer="coarse|fine"
 *         data-ax-motion="reduced|full"
 *         data-ax-native="true|false">
 *
 * Media queries mirror those attributes as a no-JS fallback, so layout is
 * correct even before the platform layer runs.
 *
 * Contract: docs/specs/axiom-shell.md.
 */

:root {
    /* Safe areas (iOS notch / home indicator). AxiomPlatform.safeArea() reads
       these back as numbers; 0 on devices without insets. */
    --ax-safe-top: env(safe-area-inset-top, 0px);
    --ax-safe-right: env(safe-area-inset-right, 0px);
    --ax-safe-bottom: env(safe-area-inset-bottom, 0px);
    --ax-safe-left: env(safe-area-inset-left, 0px);

    /* Breakpoint documentation (JS owns the thresholds). */
    --ax-bp-mobile: 599px;
    --ax-bp-tablet: 1023px;

    /* Chrome dimensions per form factor. */
    --ax-rail-w: 220px;
    --ax-rail-w-compact: 64px;
    --ax-sidebar-w: 300px;
    --ax-drawer-w: min(86vw, 340px);
    --ax-touch-target: 44px;
}

/* ── Layout primitive ──────────────────────────────────────────────────────
   .ax-shell is a three-region grid: rail (primary nav) · sidebar (secondary
   list) · main (content). Regions are optional; modifiers redistribute it. */

.ax-shell {
    display: grid;
    grid-template-columns: var(--ax-rail-w) var(--ax-sidebar-w) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    padding: var(--ax-safe-top) var(--ax-safe-right) var(--ax-safe-bottom) var(--ax-safe-left);
    background: var(--bg-0, #07080a);
    color: var(--fg-0, #e6e8eb);
}

.ax-shell--no-sidebar { grid-template-columns: var(--ax-rail-w) minmax(0, 1fr); }
.ax-shell--main-only { grid-template-columns: minmax(0, 1fr); }

.ax-rail,
.ax-sidebar,
.ax-main {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.ax-main { position: relative; }

/* ── Tablet: rail becomes icon-only; sidebar is an overlay drawer ────────── */

@media (min-width: 600px) and (max-width: 1023px) {
    .ax-shell { grid-template-columns: var(--ax-rail-w-compact) minmax(0, 1fr); }
    .ax-shell .ax-sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: var(--ax-rail-w-compact);
        width: var(--ax-drawer-w);
        transform: translateX(-110%);
        transition: transform 180ms ease;
        z-index: 40;
        background: var(--bg-1, #0d0f12);
        border-inline-end: 1px solid var(--line, #191c22);
    }
    .ax-shell.ax-drawer-open .ax-sidebar { transform: translateX(0); }
}

[data-ax-form="tablet"] .ax-shell { grid-template-columns: var(--ax-rail-w-compact) minmax(0, 1fr); }
[data-ax-form="tablet"] .ax-shell .ax-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: var(--ax-rail-w-compact);
    width: var(--ax-drawer-w);
    transform: translateX(-110%);
    transition: transform 180ms ease;
    z-index: 40;
    background: var(--bg-1, #0d0f12);
    border-inline-end: 1px solid var(--line, #191c22);
}
[data-ax-form="tablet"] .ax-shell.ax-drawer-open .ax-sidebar { transform: translateX(0); }

/* ── Mobile: rail collapses to a bottom bar; sidebar is a full drawer ────── */

@media (max-width: 599px) {
    .ax-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
    }
    .ax-shell .ax-main { grid-row: 1; }
    .ax-shell .ax-rail {
        grid-row: 2;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: space-around;
        border-block-start: 1px solid var(--line, #191c22);
        padding-block-end: var(--ax-safe-bottom);
        overflow-x: auto;
        overflow-y: hidden;
    }
    .ax-shell .ax-sidebar {
        position: fixed;
        inset: 0;
        width: var(--ax-drawer-w);
        max-width: 100%;
        transform: translateX(-110%);
        transition: transform 200ms ease;
        z-index: 50;
        background: var(--bg-1, #0d0f12);
        padding-block-start: var(--ax-safe-top);
    }
    .ax-shell.ax-drawer-open .ax-sidebar { transform: translateX(0); }
}

[data-ax-form="mobile"] .ax-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
}
[data-ax-form="mobile"] .ax-shell .ax-main { grid-row: 1; }
[data-ax-form="mobile"] .ax-shell .ax-rail {
    grid-row: 2;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-around;
    border-block-start: 1px solid var(--line, #191c22);
    padding-block-end: var(--ax-safe-bottom);
    overflow-x: auto;
    overflow-y: hidden;
}
[data-ax-form="mobile"] .ax-shell .ax-sidebar {
    position: fixed;
    inset: 0;
    width: var(--ax-drawer-w);
    max-width: 100%;
    transform: translateX(-110%);
    transition: transform 200ms ease;
    z-index: 50;
    background: var(--bg-1, #0d0f12);
    padding-block-start: var(--ax-safe-top);
}
[data-ax-form="mobile"] .ax-shell.ax-drawer-open .ax-sidebar { transform: translateX(0); }

/* Rail labels hide on the compact/mobile rails. */
[data-ax-form="mobile"] .ax-rail .ax-rail-label,
[data-ax-form="tablet"] .ax-rail .ax-rail-label { display: none; }
[data-ax-form="mobile"] .ax-rail > * { min-width: var(--ax-touch-target); }

/* ── Touch ergonomics: opt-in 44px targets on a coarse pointer ─────────────
   Namespaced on purpose. A blanket `button { min-height/min-width: 44px }`
   rule blows up compact chrome that intentionally sits below the touch target
   — tab pills, close buttons, toolbar actions — so it forced every shell to
   fight the base layer. Opt in with `.ax-tap` where a 44px target is wanted. */

@media (pointer: coarse) {
    .ax-tap { min-height: var(--ax-touch-target); }
}

[data-ax-pointer="coarse"] .ax-tap {
    min-height: var(--ax-touch-target);
    min-width: var(--ax-touch-target);
}

/* ── Drawer scrim ────────────────────────────────────────────────────────── */

.ax-scrim {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    z-index: 45;
}
.ax-scrim.ax-open { opacity: 1; pointer-events: auto; }

/* ── Motion: honor the user's preference ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .ax-shell *, .ax-scrim {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}
[data-ax-motion="reduced"] .ax-shell *,
[data-ax-motion="reduced"] .ax-scrim {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
}

/* ── Keyboard focus is always visible (a11y, all form factors) ───────────── */

.ax-shell :focus-visible {
    outline: 2px solid var(--accent, #7ee0c9);
    outline-offset: 2px;
}

@media (display-mode: standalone) {
    .ax-shell { padding-block-start: max(var(--ax-safe-top), 4px); }
}