/* ==========================================================================
   responsive.css — breakpoints (320 → 1920)
   Desktop = left rail. Below 1024px = mobile app shell with bottom tab bar.
   ========================================================================== */

/* ---------- large desktop — a centred content column, roomier rail ---------- */
@media (min-width: 1440px) {
  :root { --maxw: 1180px; --rail-w: 276px; --status-h: 46px; }
  body { font-size: 16.5px; }
  .phone { width: 336px; }
  .home-stage { width: min(480px, 100%); }
}
@media (min-width: 1800px) {
  :root { --maxw: 1320px; --rail-w: 312px; }
  body { font-size: 17px; }
  .phone { width: 372px; }
  .home-stage { width: min(560px, 100%); }
}
@media (min-width: 2300px) {
  :root { --maxw: 1420px; --rail-w: 360px; }
  body { font-size: 17.5px; }
  .phone { width: 400px; }
}

/* ---------- tighten desktop ---------- */
@media (max-width: 1200px) {
  .float-card-fire { right: -4%; }
  .float-card-store { left: -2%; }
}

@media (max-width: 1080px) {
  .stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stack-card { min-height: 220px; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-grid { grid-template-columns: 320px 1fr; }
  .home-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .home-stage { order: -1; min-height: 440px; }
  .home-lead, .home-facts { max-width: none; }
  .code-band { grid-template-columns: 1fr; }
  .float-card-fire { right: -5%; }
  .float-card-store { left: -5%; }
}

/* ---------- MOBILE APP SHELL ---------- */
@media (max-width: 1023px) {
  :root { --tabbar-h: 68px; }

  .app {
    display: block;
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 1rem);
  }

  .rail { display: none; }

  .statusbar { padding-inline: clamp(0.9rem, 4vw, 1.4rem); }

  .screen { min-height: auto; padding-block: clamp(3rem, 9vh, 4.5rem); }
  #home.screen { min-height: var(--card-h); }

  /* bottom tab bar — sticks to the bottom of the scrollable card */
  .tabbar {
    position: sticky;
    bottom: 0;
    margin-top: calc(-1 * (var(--tabbar-h) + env(safe-area-inset-bottom, 0px)));
    z-index: 100;
    border-radius: 0 0 var(--r-frame) var(--r-frame);
    display: flex;
    align-items: stretch;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border-top: 1px solid var(--border);
  }
  .tabbar-indicator {
    position: absolute;
    top: 6px;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    left: 6px;
    width: calc((100% - 12px) / 5);
    background: var(--accent-soft);
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px var(--accent-line);
    transition: transform 0.4s var(--ease);
    pointer-events: none;
  }
  .tab {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--text-3);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: color 0.2s;
  }
  .tab svg { width: 22px; height: 22px; }
  .tab.is-active { color: var(--accent); }

  .theme-toggle.theme-toggle-float {
    display: grid;
    position: fixed;
    right: calc(var(--frame) + 1rem);
    bottom: calc(var(--frame) + var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 1rem);
    z-index: 120;
    width: 44px;
    height: 44px;
    background: var(--surface);
    box-shadow: var(--shadow-2), inset 0 0 0 1px var(--border-2);
  }

  /* layout collapses */
  .profile-grid { grid-template-columns: 1fr; }
  .profile-card { position: static; max-width: 420px; margin-inline: auto; }
  .profile-points { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .edu-grid { grid-template-columns: 1fr; }

  .tl-toggle { grid-template-columns: 1fr 24px; gap: 0.3rem 1rem; }
  .tl-when { grid-column: 1; grid-row: 1; }
  .tl-role { grid-column: 1; grid-row: 2; }
  .tl-org { grid-column: 1; grid-row: 3; }
  .tl-chevron { grid-column: 2; grid-row: 1 / span 3; align-self: center; }

  .work-grid { grid-template-columns: 1fr; }

  .sheet-panel { width: 100%; }
  .sheet-wide .sheet-panel { width: 100%; }
}

/* ---------- tablet portrait ---------- */
@media (max-width: 768px) {
  .screen { padding-block: clamp(2.25rem, 5vh, 3.25rem); }
  .screen-head { margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
  .home-title { font-size: clamp(2rem, 8vw, 3rem); overflow-wrap: break-word; }
  .screen-title { font-size: clamp(1.6rem, 6.6vw, 2.3rem); }
  .stack-grid { grid-template-columns: 1fr; }
  .stack-card { min-height: 0; }
  .services-list { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .home-stage { width: min(300px, 80vw); min-height: 360px; }
  .float-card { display: none; }
  .phone { width: min(240px, 66vw); }

  /* filter chips become a horizontal scroller — a familiar mobile pattern */
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-inline: calc(var(--pad-screen) * -1);
    padding-inline: var(--pad-screen);
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-btn { flex: 0 0 auto; }
}

/* keep the status-bar text clear of the Dynamic Island on narrow screens */
@media (max-width: 560px) {
  .statusbar-crumb, .statusbar-sep { display: none; }
}

/* ---------- phones ---------- */
@media (max-width: 480px) {
  :root {
    --pad-screen: 1.15rem; --frame: 8px; --r-frame: 20px;
    --device-gap-x: clamp(4px, 2.5vw, 16px);
    --bezel: 8px; --device-r: 36px; --screen-r: 28px;
    --island-top: 8px; --island-h: 26px; --island-w: clamp(120px, 40vw, 170px);
  }
  .device-btn { display: none; }

  .statusbar { font-size: 0.66rem; }

  .home-title { font-size: clamp(1.85rem, 7.4vw, 2.4rem); }
  .mini-section-label, .mini-list { display: none; }
  .mini-headline { margin-top: 10px; }
  .home-cta { flex-direction: column; align-items: stretch; }
  .home-cta .btn { width: 100%; }
  .home-facts { gap: 1.2rem; }

  .stat-row { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .stat-tile { padding: 1rem 0.9rem; }

  .phone { width: min(230px, 62vw); }

  .work-body { padding: 1.2rem; }
  .work-name { font-size: 1.2rem; }

  .service { grid-template-columns: auto 1fr; gap: 0.5rem 0.9rem; padding: 1.2rem; }
  .service-arrow { display: none; }
}

/* ---------- very small ---------- */
@media (max-width: 360px) {
  .tab span { font-size: 0.58rem; }
  .contact-quick { gap: 0.8rem 1rem; }
}

/* ---------- landscape short ---------- */
@media (max-height: 560px) and (max-width: 1023px) {
  #home.screen { min-height: auto; padding-block: 4rem; }
}