/* ─────────────────────────────────────────────────────────────
   MANIKA MOBILE BASELINE — wave 1 of the mobile UI/UX pass.
   Loads AFTER style.css + concept.css so it is the final word
   for phone behaviour. Canonical breakpoint: 640px.
   Hover hardening lives at the bottom under @media (hover: none).
   ───────────────────────────────────────────────────────────── */

/* Safety net: nothing may create a horizontal scrollbar. */
html, body { overflow-x: clip; }
.mk-opener, .mk-concept { overflow: hidden; }

/* Any manika block that declares itself a two-column flex/grid row
   collapses to a single stacked column on phones. The `--{layout}`
   variants that are already column-direction are unaffected. */
@media (max-width: 640px) {
    [class*="mk-"][class*="-content"]:is(.mk-stats-content, .mk-chapter-content),
    .mk-gateway-row,
    .mk-track-row,
    .mk-tour-row,
    .mk-connect-grid,
    .mk-tl-vinyl,
    .mk-archives-circles {
        flex-direction: column;
        align-items: stretch;
        gap: 1.6rem;
    }
    .mk-connect-grid,
    .mk-tl-whisper-row,
    .mk-seek-hit,
    .mk-timeline li {
        grid-template-columns: 1fr;
    }

    /* Rigid minimums that force 2-col math onto a 390px viewport. */
    .mk-stats-content { gap: 2rem; }
    .mk-stats-grid { min-width: 0; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 2rem; }
    .mk-seva-grid { grid-template-columns: 1fr; gap: 1.4rem; }
    .mk-cinema-grid { grid-template-columns: 1fr; gap: 2rem; }
    .mk-cinema-reel { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
    .mk-books-grid { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 1.6rem; }
    .mk-archives-grid { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 1.8rem; }
    .mk-press-grid { grid-template-columns: 1fr; }
    .mk-social-cards { grid-template-columns: 1fr; }

    /* The featured orbital circle is a fixed 320/340px square —
       scale the ring to the screen, never let the row overflow. */
    .mk-archives-circles { flex-direction: column; align-items: center; }
    .mk-circles-featured { width: min(320px, 80vw); }
    .mk-circles-orbit { width: min(340px, 86vw); height: min(340px, 86vw); }

    .mk-section--darbar-invite .mk-section-media,
    .mk-section--sevadar-board .mk-section-media { max-width: 100%; }

    /* Generous desktop gaps that strand related content far apart. */
    .mk-stats-content, .mk-chapter-content { gap: 2rem; }
    .mk-connect-grid { gap: 2rem; }
    .mk-timeline li { gap: 0.9rem; grid-template-columns: 70px 1fr; }
}

/* Touch ergonomics (all pointer types — phones are the target). */
@media (max-width: 640px) {
    .mk-opener button, .mk-opener a,
    .mkc-ui button, .mkc-ui a,
    .mk-social-link, .mk-tl-btn-share, .mk-tl-btn-download,
    .mk-mala-reset, .mk-ardas-submit, .mkp-play, .mkp-full, .mkp-pip {
        min-height: 44px;
        min-width: 44px;
    }
    /* Kill double-tap-zoom delay on frequently tapped UI without
       trapping global pinch-zoom. */
    .mk-opener, .mk-concept, .mkc-ui, button, [role="button"] { touch-action: manipulation; }
    /* The opener is a one-time fullscreen ritual: own the surface,
       no page scroll behind it. */
    .mk-opener, .mk-opener .mko-canvas { touch-action: none; }
    /* Inline concept sections must still let the page scroll vertically
       (their engines only bind taps/holds, never drags). */
    .mk-concept canvas { touch-action: pan-y pinch-zoom; }
}

/* ─────────────────────────────────────────────────────────────
   WAVE 2 — structural families at phone width.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Editorial label/eyebrow tracking (0.3–0.5em) blows text lines
       past the viewport on short uppercase strings. Only the wide-tracked
       display classes are touched; body micro-tracking stays intact. */
    .mk-seek-label, .mk-seek-hit .hit-album, .mk-seek-count,
    .mk-footer .mk-footer-note, .mkc-sub, .mko-skip, .mk-hero-prefix,
    .mkc-eyebrow, .mkc-overline, .mkc-label, .mko-hint,
    .mk-stats-value small, .mk-tl-seat-np small,
    [class*="-label"], [class*="-overline"], [class*="-eyebrow"], [class*="-note"] {
        letter-spacing: 0.18em !important;
    }

    /* Timeline: date column narrows, copy sits under it. */
    .mk-timeline li { grid-template-columns: 64px 1fr; gap: 0.8rem 1rem; padding: 1rem 0; }

    /* Tracklist rows: stacked identity + actions, no 2rem baseline gaps. */
    .mk-track-row { gap: 0.8rem; padding: 1.1rem 0; flex-wrap: wrap; }
    .mk-tl-actions { opacity: 1; } /* hover-revealed on desktop; on touch it would be invisible until tapped */

    /* Tour & connect rows: date/meta moves under the name. */
    .mk-tour-row, .mk-connect-row { gap: 0.3rem; flex-wrap: wrap; }
    .mk-connect-social { gap: 1.2rem; margin-top: 1.6rem; }

    /* Cinema detail copy: drop the artificial 420px measure cap. */
    .mk-film p { max-width: none; }

    /* Seek: smaller search line, tighter hits. */
    .mk-seek-input { font-size: 1.25rem; }
    .mk-seek-hit { padding: 1.1rem 0; gap: 0.3rem 1rem; }
    .mk-seek-hit .hit-title { font-size: 1.25rem; }
    .mk-seek-suggest { margin-top: 2.4rem; }

    /* Footer: brand stack instead of a squeezed row. */
    .mk-footer { flex-direction: column; align-items: center; text-align: center; gap: 0.9rem; }
    .mk-footer .mk-footer-brand { flex-direction: column; gap: 0.5rem; }

    /* Chapter / stats / archives heads: reclaim horizontal room. */
    .mk-chapter-content, .mk-stats-content { gap: 1.6rem; }
    .mk-stats-left { max-width: none; }
    .mk-archives-left { margin-bottom: 2rem; }

    /* Gateway row already stacks (wave 1); trim its label column. */
    .mk-gateway-row { gap: 0.6rem; }
}

/* ─────────────────────────────────────────────────────────────
   WAVE 3 — concept overlay UIs + opener at phone width.
   Canvas engines are size-agnostic; these fix the HTML layer
   that sits on top of them.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Shared overlay typography: desktop display sizes overflow narrow
       columns inside .mkc-* panels. */
    .mkc-center h1, .mkc-center h2, .mk-concept .mkc-title { font-size: clamp(1.7rem, 8vw, 2.6rem); }
    .mkc-communion-en { font-size: clamp(1rem, 4.4vw, 1.3rem); max-width: 88vw; }
    .mkc-sub { margin-top: 1.1rem; line-height: 1.9; max-width: 88vw; }

    /* One-string player: side rail + track list collapse; the 74vw×88vh
       stage gets a bottom-sheet player instead of a floating panel. */
    .mk-concept--onestring .mkc-navpages { padding: 1.2rem 1rem 0 0; }
    .mk-concept--onestring .mkc-panel,
    .mk-concept--onestring .mkc-side { width: min(86vw, 420px); }
    .mk-concept--onestring .mkc-tracks-scroll { max-height: 38vh; }
    .mk-concept--onestring .mkc-player { opacity: 1; }
    .mk-concept--onestring .mkc-track { gap: 0.8rem; padding: 0.9rem 0; }

    /* Player row columns (constellation / darbar family markup). */
    .mk-concept--constellation .mkc-player-row { grid-template-columns: 1fr auto; }
    .mk-concept--constellation .mkc-player { opacity: 1; }

    .mk-concept--amritvela .mkc-stage h2 { font-size: clamp(1.9rem, 8.4vw, 3rem); }
    .mk-concept--amritvela .mkc-press blockquote { font-size: clamp(1.25rem, 6vw, 1.8rem); }

    .mk-concept--breath .mkc-above { top: 10vh; }
    .mk-concept--breath .mkc-below { bottom: 13vh; letter-spacing: 0.24em; }

    /* Nine doors: 9 hit-targets on two thumb rows. */
    .mk-concept--ninedoors .mkc-doors { gap: 0.5rem; padding: 0 3vw 2rem; }

    /* Press / poster player chrome: compact meters. */
    .mkp-rate, .mkp-vbtn, .mkp-pip { min-width: 40px; }
}

/* Opener: invocation lines + skip affordance on a fullscreen canvas. */
@media (max-width: 640px) {
    .mk-opener .mko-pa { font-size: clamp(1.3rem, 6.4vw, 2rem); padding: 0 6vw; }
    .mk-opener .mko-en { font-size: clamp(0.95rem, 4.4vw, 1.2rem); padding: 0 8vw; }
    .mk-opener .mko-hint { letter-spacing: 0.24em; bottom: 16vh; }
    .mk-opener .mko-skip { padding: 0.8rem 1.2rem; }
}

/* ─────────────────────────────────────────────────────────────
   WAVE 4 — fixes for the 390px DOM-geometry audit.
   These address systemic bleed + the crushed two-column sections.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* (1) Global bleed: `.ht-container { width:100% }` + GEUIkit's 15px
       side padding under content-box made every container 405px inside a
       375px viewport — a silent 15px right-edge cut on every section. */
    #swup .ht-container { box-sizing: border-box; }

    /* (2) Section crush: the `.mk-section--text-left/right` variants keep
       flex-direction:row on phones, so text+media share one narrow line —
       gallery collapsed to 52px, tour to 123px. Stack them full-width.
       mobile.css loads after style.css, so a plain `.mk-section` column
       beats the row variants without !important. */
    .mk-section { flex-direction: column; align-items: stretch; gap: 1.8rem; }
    .mk-section-text, .mk-section-media { flex: none; width: 100%; min-width: 0; }

    /* (3) Discography blow-out: album blocks are flex children with
       min-width:auto, so long rows forced 900px+ tracks wide. Let them
       shrink and wrap. */
    .mk-disco-album-header, .mk-disco-track { min-width: 0; flex-wrap: wrap; }
    .mk-disco-album-header { gap: 1rem; }
    .mk-disco-cover { width: 60px; }
    .mk-disco-title { font-size: 1.25rem; }
    .mk-disco-track { gap: 0.6rem; padding: 0.55rem 0.2rem; }

    /* (4) Chapter watermark: a 40vw glyph centred behind copy overlapped
       the body text. Shrink + lift clear of the reading column. */
    .mk-chapter-watermark { font-size: 58vw; opacity: 0.015; }

    /* (5) Micro-label legibility floor: the tracked eyebrows sat at
       8–10px. Raise just the label classes; tracking is already eased. */
    .mkc-note, .mkc-holdhint, .mk-cd-cell label, .mk-cd-note { font-size: 0.62rem; }
    .mk-concept--ninedoors .mkc-door { font-size: 0.72rem; }
    .mk-seek-hit .hit-album, .mk-disco-meta, .mk-hero-prefix, .mk-book-badge, .mk-book-by { font-size: 0.66rem; }

    /* (6) One-string captions: note (left) and holdhint (right) both sat
       at bottom:1.3rem and collided across the narrow stage. Stack them. */
    .mk-concept--onestring .mkc-holdhint,
    .mkc-holdhint { bottom: 3.4rem; right: 3.2rem; }

    /* (7) Fixed chrome vs footer: the communion orb + progress bar are
       position:fixed and sat on top of the footer note / last row.
       Give the page bottom breathing room and shrink the orb ring. */
    .mk-footer { padding-bottom: 6.5rem; }
    .mk-orb-ring { width: 58px; height: 58px; }
    #mk-communion-orb { right: 1.1rem; bottom: 1.1rem; }
    .mk-progress-indicator { left: 1.1rem; bottom: 1.2rem; gap: 0.6rem; }
    .mk-progress-line { width: 84px; }

    /* (8) Compass wings (char duari): 8px labels, EAST ran past the edge. */
    .cd-wing, .cd-wing small { font-size: 0.66rem; letter-spacing: 0.16em; }

    /* (9) Discography tracklist: a builder multi-column (column-count:3)
       survives into mobile, crushing columns to ~94px and truncating
       titles to 12-48px. Force a single readable column. */
    .mk-disco-tracklist { column-count: 1 !important; }
    .mk-disco-track-title { white-space: normal; }
}

/* Cursor flashlight / ring / dot are pointer-fine only; on touch they
   render as stray fixed blobs (600px glow measured on phones). */
@media (hover: none), (max-width: 640px) {
    .mk-cursor-glow, .mk-cursor-ring, .mk-cursor-dot { display: none !important; }
}

/* "Skip to main content" was painting over the logo: the parent a11y
   link uses .ht-link-reset (static/visible). Hide until focused. */
.screen-reader-text:not(:focus),
a.ht-link-reset[href="#main"]:not(:focus),
a[href="#mk-main"]:not(:focus),
a[href="#main"]:not(:focus) {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0;
    border: 0;
}
a[href="#main"]:focus, a.ht-link-reset[href="#main"]:focus {
    position: fixed !important; top: 0.6rem; left: 0.6rem; width: auto; height: auto;
    clip: auto; clip-path: none; z-index: 10000; padding: 0.6rem 1rem;
    background: var(--gold, #C9A227); color: #0C0A12; border-radius: 2px;
}

/* iOS never inflates text automatically if we opt out; keep our own
   scale discipline instead. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ── Hover hardening ───────────────────────────────────────────
   Touch browsers keep :hover "stuck" after a tap. On devices with
   no hover capability, neutralise hover-only visual changes whose
   effect is a reveal/transform; state-driven (.is-*) styling is
   untouched because JS owns that on tap. */
@media (hover: none) {
    /* Controls revealed only by :hover on desktop are permanently
       visible on touch devices — losing them would remove function. */
    .mk-album .mk-album-play { opacity: 1; }
    .mk-mosaic-item .mk-mosaic-overlay,
    .mk-mosaic-item .mk-album-play { opacity: 1; }
    .mk-archives--crate .mk-crate-item h4 { opacity: 1; }
    .mk-gateway-row .mk-gateway-arrow { opacity: 1; transform: none; }
    .mk-tl-cosmic-planet-wrap .mk-tl-cosmic-label { opacity: 1; }
    .mk-d-volume input[type='range'] { opacity: 1; width: 90px; }
    .mk-tl-actions { opacity: 1; }
    .mk-concept--onestring .mkc-player,
    .mk-concept--constellation .mkc-player { opacity: 1; }

    :not(.mk-nav *):hover {
        transition: none;
    }
    .mk-opener .mko-skip:hover,
    .mk-mala-reset:hover,
    .mkp-ext:hover,
    .mk404-home:hover { color: unset; }
    .mkp-poster:hover .mkp-sigil { box-shadow: unset; transform: none; }
    /* (volume slider is forced permanently open for touch further up —
       keep this hover-only for pointer-capable devices.) */
    .mkp-vwrap:hover .mkp-vol { width: 70px; opacity: 1; }
    .mkg-frame:hover img { transform: none; opacity: 1; }
    .mk-concept--onestring .mkc-track:hover { padding-left: unset; }
    .mk-concept--onestring .mkc-track:hover h3 { color: unset; font-style: unset; }
    .mk-concept .mkc-track:hover .mkc-trackplay { color: unset; transform: none; }
}