/* ==========================================================================
   BedreByttede • RESPONSIVE
   Purpose: viewport-aware refinements for mobile, tablet, desktop.
   Assumes tokens.css (variables, depth) and base.css/layout.css (components).
   Philosophy: mobile-first; scale readability + intent, not just pixels.
   ========================================================================== */

/* 0) Platform + safe-area -------------------------------------------------- */
:root {
  /* iOS notch padding (no-op on others) */
  --safe-top: max(env(safe-area-inset-top, 0px), 0px);
  --safe-right: max(env(safe-area-inset-right, 0px), 0px);
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), 0px);
  --safe-left: max(env(safe-area-inset-left, 0px), 0px);
}

/* Give sticky bars breathing room on iOS */
.app-header__inner {
  padding-top: calc(var(--safe-top) * 0.5);
}

.bottom-nav {
  padding-bottom: var(--safe-bottom);
}

/* 1) Global fluid readability --------------------------------------------- */
/* Nudge base font-size with viewport width; caps protect extreme cases. */
body {
  font-size: clamp(15px, 0.42vw + 14px, 17px);
}

/* Container matches token container widths + spacing scale */
.wrap {
  width: min(var(--container-lg), 92vw);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* Keep comfortable line length for text-heavy areas */
.prose {
  max-width: 72ch;
}


/* --- Grid System (bb-grid) ------------------------------------------- */
/* Progression: 1 col (base) -> 2 col (md) -> 3 col (lg) -> 4 col (xl)  */
.bb-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 48rem) {
  .bb-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .bb-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 80rem) {
  .bb-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 2) MOBILE (phones, portrait & small landscape)
   - Focus: single-column flow, large tap targets, obvious hierarchy.
   ------------------------------------------------------------------ */
@media (max-width: 47.99rem) {
  /* < 768px */

  /* Containers: a tiny bit more gutter on phones */
  .container,
  .shell {
    width: min(100% - var(--space-6), var(--container-lg));
  }

        /* Header and bottom nav are primary affordances on mobile */
  
  .bottom-nav {
    display: block;
  }

  /* Hero: keep media visible but not dominant */
  .hero> :is(img, video) {
    height: clamp(200px, 38vh, 360px);
  }

  /* Search bar: vertical stack for clarity */
  .searchbar {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  /* Dashboard: single column */
  .dash {
    grid-template-columns: 1fr;
  }

  .dash__panel {
    padding: var(--space-3);
  }

  .dash__stack {
    gap: var(--space-4);
  }

  /* Cards grid: 1-up */
  .cards-2 {
    grid-template-columns: 1fr;
  }

  /* Sidebar layouts collapse */
  .sidebar {
    grid-template-columns: 1fr;
  }

  /* Tiles: bigger imagery, tighter meta */
  .tile {
    padding: .6rem;
  }

  .tile__title {
    font-size: var(--fs-sm);
  }

  .tile__meta {
    font-size: var(--fs-xs);
  }

  /* Stepper: vertical with clear current step */
  .stepper {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    gap: .45rem;
  }

  /* Chat bubbles: wider tolerance and larger target */
  .msg {
    max-width: 90vw;
  }

  .msg__meta {
    font-size: var(--fs-xxs);
  }

  /* Tables: optional card stack mode (opt-in with data-stack) */
  .table[data-stack] {
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .table[data-stack] thead {
    display: none;
  }

  .table[data-stack] tbody,
  .table[data-stack] tr,
  .table[data-stack] td {
    display: block;
    width: 100%;
  }

  .table[data-stack] tr {
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: var(--radius-2);
    box-shadow: var(--umbra-1), var(--pen-1), var(--top-shine-1);
    padding: .6rem .75rem;
    margin-bottom: var(--space-3);
  }

  .table[data-stack] td {
    border: 0;
    padding: .25rem 0;
  }

  .table[data-stack] td[data-label]::before {
    content: attr(data-label) " ";
    display: inline-block;
    min-width: 9ch;
    color: var(--text);
    font-weight: 700;
  }

  /* Sheet/drawer: taller snap for thumb reach */
  .sheet {
    max-height: 90vh;
    border-radius: 16px 16px 0 0;
  }

  /* Chip rails: promote scrollability */
  .chips {
    padding-bottom: var(--space-1);
  }
}

/* 3) TABLET (compact laptops & tablets)
   - Focus: two-column patterns; denser cards without losing clarity.
   ------------------------------------------------------------------ */
@media (min-width: 48rem) and (max-width: 63.99rem) {

  /* 768–1023 */
  /* Containers */
  .container,
  .shell {
    width: min(100% - var(--space-8), var(--container-lg));
  }


  .bottom-nav {
    display: block;
  }

  /* Dashboard: 2 columns (settings + content) */
  .dash {
    grid-template-columns: 1.25fr 1fr;
    align-items: start;
    gap: var(--space-6);
  }

  /* Cards grid (tiles): 2-up */
  .cards-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Sidebar: still collapses if content is narrow */
  .sidebar {
    grid-template-columns: 1fr;
  }

  @media (min-width: 56em) {
    .sidebar {
      grid-template-columns: 320px 1fr;
    }
  }

  /* Hero: allow a bit more drama */
  .hero> :is(img, video) {
    height: clamp(260px, 42vh, 520px);
  }

  /* Stepper: horizontal, still readable */
  .stepper {
    grid-auto-flow: column;
    grid-template-columns: repeat(4, 1fr);
  }

  /* Chat width: comfortable reading */
  .msg {
    max-width: 62ch;
  }
}

/* 4) DESKTOP (≥ 1024)
   - Focus: balanced density; sidebars and multi-panels shine.
   ------------------------------------------------------------------ */
@media (min-width: 64rem) {

  /* ≥1024 */
  /* Containers reach their designed widths */
  .container,
  .shell {
    width: min(100% - var(--space-10), var(--container-xl));
  }


  .bottom-nav {
    display: none;
  }

  /* desktop gets header & side-UI */

  /* Dashboard: strong 2-column rhythm */
  .dash {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-6);
  }

  /* Sidebar: standard two-column layout */
  .sidebar {
    grid-template-columns: 320px 1fr;
  }

  /* Cards grid: 2-up becomes default; tiles pack tighter */
  .cards-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Hero: give visuals room to breathe */
  .hero> :is(img, video) {
    height: clamp(340px, 45vh, 640px);
  }

  /* Stepper: horizontal with more spacing */
  .stepper {
    gap: .75rem;
  }

  .step {
    padding: .55rem .7rem;
  }

  /* Chat width: long-form readability on desktop */
  .msg {
    max-width: 72ch;
  }
}

/* 5) LARGE DESKTOP (≥ 1280) ---------------------------------------------- */
@media (min-width: 80rem) {

  /* Cards: generous grid */
  .cards-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .grid {
    --min: 280px;
    gap: var(--space-6);
  }

  /* Dashboard balance tilts slightly to content side */
  .dash {
    grid-template-columns: 1.1fr 1.1fr;
  }

  .hero> :is(img, video) {
    height: clamp(420px, 48vh, 720px);
  }
}

/* 6) HOVER CAPABILITY ----------------------------------------------------- */
/* If there is no hover (touch-first), remove hover-only elevation jumps. */
@media (hover: none),
(pointer: coarse) {

  .btn:hover,
  .card:hover,
  .tile:hover {
    transform: none;
    box-shadow: var(--umbra-1), var(--pen-1), var(--top-shine-1);
  }
}

/* 7) ORIENTATION TWEAKS --------------------------------------------------- */
@media (orientation: landscape) and (max-height: 480px) {

  /* On tiny landscape (phones sideways), reduce chrome height */

  .hero> :is(img, video) {
    height: clamp(180px, 36vh, 300px);
  }

  .sheet {
    max-height: 86vh;
  }
}

/* 8) REDUCED MOTION (delegates to tokens but safe-guards here) ------------ */
@media (prefers-reduced-motion: reduce) {

  .card,
  .btn,
  .tile,
  .sheet {
    transition-duration: .01ms !important;
  }
}

/* 9) PRINT (optional, but sensible) --------------------------------------- */
/* Print/PDF exports: readable, ink-friendly, no sticky chrome. Activate by
   including this file; @media rules ensure it only applies to print.        */
@media print {

  /* White background, dark text */
  body {
    background: #fff !important;
    color: #111 !important;
    font-size: 12pt;
  }

  .app-header,
  .bottom-nav,
  .modal,
  .sheet-root {
    display: none !important;
  }

  /* Remove shadows and decorative borders */
  .card,
  .tile,
  .dash__panel,
  .surface,
  .table,
  .searchbar {
    box-shadow: none !important;
    border-color: #ccc !important;
    background: #fff !important;
  }

  /* Expand links to show destinations (useful in receipts/agreements) */
  a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-weight: 400;
    color: #555;
  }

  /* Tables: classic print style */
  .table {
    border-collapse: collapse !important;
    border: 1px solid #bbb !important;
  }

  .table th,
  .table td {
    border: 1px solid #bbb !important;
    padding: 6pt 8pt !important;
  }

  /* Page breaks for long lists/cards */
  .card {
    break-inside: avoid;
  }
}