/* ═══════════════════════════════════════════════════════════════════════════
   CHIKARA OS · responsive.css
   The last stylesheet. Global overrides for breakpoints, orientation, input
   modality, dynamic viewport units, container queries, contrast preferences,
   and print. Loaded after every component sheet so it can safely correct.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1 · DYNAMIC VIEWPORT (mobile browser chrome) ──────────────────────── */

/* Prefer dvh where supported — the shell must survive iOS Safari's address
   bar collapsing mid-session. Fall back to vh on older engines. */
@supports (height: 100dvh) {
  #boot,
  .screen,
  .appview,
  .overlay__panel,
  .launch,
  .mobile-menu {
    height: 100dvh;
  }
}

/* ─── 2 · SMALL PHONES (≤375px, e.g. iPhone SE) ─────────────────────────── */

@media (max-width: 375px) {
  :root {
    --shell-edge: 1rem;
  }
  .home__page {
    column-gap: .8rem;
    row-gap: 1.1rem;
  }
  .tile__art { max-width: 64px; }
  .tile__name { font-size: 11px; }
  .dock { padding: .6rem .7rem; gap: .2rem; }
  .dock__icon { width: 40px; height: 40px; }
  .dock__name { max-width: 44px; }
  .featured-card { padding: 1rem 1rem; }
  .featured-card__art { width: 48px; height: 48px; }
  .librow { padding: .75rem .8rem; }
  .librow__art { width: 42px; height: 42px; }
  .citem { padding: .75rem .85rem; }
  .citem__mark { width: 34px; height: 34px; }
  .citem__mark img { width: 20px; height: 20px; }
}

/* ─── 3 · LARGE PHONES (≥430px) ─────────────────────────────────────────── */

@media (min-width: 430px) {
  .home__page {
    column-gap: 1.1rem;
    row-gap: 1.5rem;
  }
  .tile__art { max-width: 82px; }
}

/* ─── 4 · TABLETS ───────────────────────────────────────────────────────── */

@media (min-width: 720px) and (orientation: portrait) {
  .home__page { row-gap: 1.75rem; }
  .home__header { padding-bottom: 1.35rem; }
  .home__greeting { font-size: clamp(2rem, 4vw, 2.6rem); }
  .dock { padding: .85rem 1rem; }
  .dock__icon { width: 52px; height: 52px; }
  .overlay--panel .overlay__panel {
    left: auto;
    right: calc(var(--shell-edge) + var(--safe-right));
    bottom: calc(var(--shell-edge) + var(--safe-bottom));
    width: min(420px, 48vw);
    border-radius: var(--r-xl);
    max-height: 78vh;
  }
  .overlay--panel .overlay__scrim { opacity: 0; }
  .overlay--panel.is-open .overlay__scrim { opacity: .55; }
}

/* ─── 5 · DESKTOP ───────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  :root {
    --shell-edge: 2rem;
    --max-width: 1280px;
  }
  .statusbar {
    padding-left: max(calc(var(--shell-edge) + var(--safe-left)), calc((100vw - var(--max-width)) / 2));
    padding-right: max(calc(var(--shell-edge) + var(--safe-right)), calc((100vw - var(--max-width)) / 2));
  }
  .home__header,
  .home__pages,
  .home__dots,
  .files__header,
  .files__body,
  .files__foot,
  .appview__bar,
  .library__nav,
  .library__body,
  .overlay__bar,
  .search__head,
  .search__body {
    padding-left: max(calc(var(--shell-edge) + var(--safe-left)), calc((100vw - var(--max-width)) / 2));
    padding-right: max(calc(var(--shell-edge) + var(--safe-right)), calc((100vw - var(--max-width)) / 2));
  }
  .overlay--panel .overlay__panel {
    right: calc((100vw - var(--max-width)) / 2);
    left: auto;
    width: 420px;
  }
}

@media (min-width: 1440px) {
  .home__page { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .tile__art { max-width: 94px; }
}

/* ─── 6 · ORIENTATION: LANDSCAPE PHONES ─────────────────────────────────── */

@media (orientation: landscape) and (max-height: 500px) {
  :root { --shell-status-h: calc(38px + var(--safe-top)); }

  .home { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5rem); }
  .home__greeting { font-size: clamp(1.1rem, 3vw, 1.5rem); }
  .home__date { font-size: 9px; }
  .home__header { padding-bottom: .5rem; }
  .home__page {
    column-gap: .8rem;
    row-gap: .9rem;
    padding: .25rem 0 .5rem;
  }
  .tile__art { max-width: 56px; }
  .tile__name { font-size: 10px; }
  .home__dots { padding: .35rem 1rem .25rem; }
  .dock { padding: .5rem .75rem; }
  .dock__icon { width: 36px; height: 36px; }
  .dock__name { display: none; }
  .home__gesture { display: none; }

  /* Overlays become horizontal */
  .overlay--panel .overlay__panel {
    left: var(--safe-left);
    right: var(--safe-right);
    bottom: 0;
    top: 0;
    width: auto;
    max-height: none;
    border-radius: 0;
    padding-left: calc(var(--shell-edge) + var(--safe-left));
    padding-right: calc(var(--shell-edge) + var(--safe-right));
  }

  /* Files and settings collapse to single pane to preserve reading width */
  .files { grid-template-columns: 1fr; }
  .files__sidebar { display: none; }
  .settings { grid-template-columns: 1fr; }
  .settings__nav--rail {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    padding: .5rem calc(var(--shell-edge) + var(--safe-right)) .35rem calc(var(--shell-edge) + var(--safe-left));
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
    background: none;
  }
  .settings__nav--rail .settings__link {
    padding: .32rem .65rem;
    font-size: 9px;
    border-radius: var(--r-pill);
    border: 1px solid var(--hairline);
  }
  .settings__nav--rail .settings__link-mark { display: none; }
}

/* ─── 7 · TOUCH MODALITY ────────────────────────────────────────────────── */

@media (hover: none) and (pointer: coarse) {
  /* Restore tap-highlight suppression only where interactive elements want
     deliberate feedback (pressable/tile/dock). We do not remove accessibility. */
  .tile,
  .dock__item,
  .fitem,
  .librow,
  .citem,
  .home__searchbtn {
    -webkit-tap-highlight-color: transparent;
  }
  /* Larger hit targets on touch */
  .iconbtn { min-width: 40px; min-height: 40px; }
  .chip { padding: .5rem .9rem; }
}

@media (hover: hover) and (pointer: fine) {
  /* Subtle mouse-only micro-interactions */
  .tile:hover .tile__art { transform: translateY(-3px); box-shadow: var(--sh-inset), var(--shadow-2); }
  .tile:hover .tile__icon { transform: scale(1.06); }
  .librow:hover .librow__art { transform: scale(1.03); }
  .citem:hover .citem__mark { border-color: rgba(201,151,58,.32); }
}

/* ─── 8 · SAFE AREAS (re-affirm on older engines) ───────────────────────── */

@supports not (padding: env(safe-area-inset-top)) {
  :root {
    --safe-top: 0px;
    --safe-bottom: 0px;
    --safe-left: 0px;
    --safe-right: 0px;
  }
}

/* When a notch is present in landscape, protect content from the cutout */
@media (orientation: landscape) {
  .home__header,
  .files__header,
  .settings__main,
  .library__body,
  .connect {
    padding-left: max(calc(var(--shell-edge) + var(--safe-left)), 1.5rem);
    padding-right: max(calc(var(--shell-edge) + var(--safe-right)), 1.5rem);
  }
}

/* ─── 9 · CONTAINER QUERIES (progressive enhancement) ───────────────────── */

@supports (container-type: inline-size) {
  .overlay__panel,
  .appview__bar {
    container-type: inline-size;
  }
  @container (max-width: 380px) {
    .overlay__title h2 { font-size: 1.1rem; }
    .appview__title h2 { font-size: 1.1rem; }
    .srow__hint { display: none; }
  }
  @container (min-width: 640px) {
    .srow { padding: 1rem 1.1rem; }
    .citem { padding: 1rem 1.15rem; }
  }
}

/* ─── 10 · HIGH CONTRAST ────────────────────────────────────────────────── */

@media (prefers-contrast: more) {
  :root {
    --hr-vellum: rgba(31,26,22,.22);
    --hr-obsidian: rgba(246,240,226,.22);
  }
  .tile__art,
  .librow,
  .citem,
  .srow,
  .fitem__art {
    border-width: 1.5px;
  }
  .chip.is-active { box-shadow: 0 0 0 2px #241A0A; }
}

/* ─── 11 · FORCED COLORS ────────────────────────────────────────────────── */

@media (forced-colors: active) {
  .mat-gold,
  .btn--gamazine,
  .segmented button.is-active,
  .switch input:checked + .switch__track {
    forced-color-adjust: none;
  }
  .tile__art,
  .librow,
  .citem,
  .srow,
  .srow__hint,
  .fitem {
    border: 1px solid CanvasText;
  }
}

/* ─── 12 · REDUCED MOTION (global re-affirmation) ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1 !important; transform: none !important; }
  .overlay,
  .overlay__panel,
  .appview,
  .launch,
  .toast { transition-duration: .001ms !important; }
  * { scroll-behavior: auto !important; }
}
html[data-reduced-motion="true"] .fade-up { opacity: 1 !important; transform: none !important; }

/* ─── 13 · PRINT ────────────────────────────────────────────────────────── */

@media print {
  body::before,
  body::after,
  .statusbar,
  .home__gesture,
  .dock,
  .overlay,
  .launch,
  .toast,
  .whatsapp-float { display: none !important; }

  body,
  .home,
  .appview,
  .screen {
    position: static !important;
    overflow: visible !important;
    transform: none !important;
    opacity: 1 !important;
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }
  .appview { display: block !important; }
  a { color: #000; text-decoration: underline; }
}

/* ─── 14 · DARK-MODE AUTO (system preference, first run only) ───────────── */

/* Note: app.js sets data-theme explicitly after reading localStorage. This
   block is a defensive fallback so a user opening the shell for the first
   time in a dark OS environment is not met with a bright flash. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme-set]) {
    color-scheme: dark;
  }
}