/* ==========================================================================
   OEAC Digital Library — MOBILE / APP SHELL
   Loaded last so it wins. Everything here is inside a max-width media query
   except the app-shell chrome which is hidden above 860px.
   Goal: on a phone this should feel like a native app, not a squeezed website.
   ========================================================================== */

/* The bottom tab bar and the app-only FAB are hidden on desktop. */
.tabbar,
.app-fab,
.app-search-bar,
.filters-toggle { display: none; }

/* ==========================================================================
   COLLAPSIBLE FILTERS ON PHONES
   Six stacked selects pushed the whole shelf below the fold. The quick chips
   stay visible; the full filter card opens on demand.
   ========================================================================== */
@media (max-width: 860px) {
  .filters-toggle {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    background: var(--surface);
    border: 1px solid rgba(255, 107, 0, .18);
    border-radius: 14px;
    padding: .85rem 1rem;
    margin-bottom: .7rem;
    color: var(--txt);
    font-weight: 700;
    font-size: .9rem;
    font-family: inherit;
    cursor: pointer;
    text-align: start;
  }
  .filters-toggle:active { transform: scale(.99); }
  .filters-badge {
    background: var(--orange);
    color: #050505;
    border-radius: 20px;
    font-size: .68rem;
    font-weight: 800;
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .4rem;
  }
  .filters-chev { margin-inline-start: auto; transition: transform .25s; font-size: .8rem; opacity: .7; }
  .filters-toggle[aria-expanded="true"] .filters-chev { transform: rotate(180deg); }

  .filters { display: none; }
  .filters.open { display: block; animation: filtersOpen .25s cubic-bezier(.2, .9, .3, 1); }
  @keyframes filtersOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

  /* quick chips stay put so language/topic are always one tap away */
  .chips-quick { margin: 0 0 .9rem; }
}

/* ==========================================================================
   PHONE  (<= 860px)
   ========================================================================== */
@media (max-width: 860px) {

  /* ------------------------------------------------------------- shell */
  html { -webkit-text-size-adjust: 100%; }
  body {
    /* room for the fixed tab bar + the iOS home indicator */
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior-y: contain;
  }
  body.reader-body { padding-bottom: 0; }

  /* kill the 300ms tap delay and the grey tap flash */
  a, button, .book-card, .cat-card, .chip, label, summary, input, select, textarea {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .wrap { padding-inline: 1rem; }
  .section { padding-block: 1.6rem 2rem; }

  /* ------------------------------------------------- safe-area on nav */
  nav.topnav {
    padding: .6rem .85rem;
    padding-top: calc(.6rem + env(safe-area-inset-top, 0px));
  }
  nav.topnav.scrolled { padding: .5rem .85rem; padding-top: calc(.5rem + env(safe-area-inset-top, 0px)); }

  /* the desktop link pill is replaced by the tab bar */
  #navLinks { display: none !important; }
  .burger { display: none !important; }
  .logo { font-size: 1rem; }
  .logo-mark { width: 28px; height: 28px; }
  .nav-btn { padding: .5rem .85rem; font-size: .76rem; }
  #installLink { display: none; }          /* it lives in the tab bar instead */

  /* ------------------------------------------------------- bottom tabs */
  .tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    background: rgba(8, 8, 8, .94);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-top: 1px solid rgba(255, 107, 0, .18);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  [data-theme="light"] .tabbar {
    background: rgba(255, 255, 255, .95);
    border-top-color: rgba(10, 10, 10, .1);
  }
  .tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: .5rem .25rem .45rem;
    min-height: 56px;
    text-decoration: none;
    color: var(--txt-dimmer);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .2px;
    position: relative;
    transition: color .2s;
  }
  .tabbar a svg { width: 22px; height: 22px; fill: currentColor; display: block; }
  .tabbar a.on { color: var(--orange); }
  .tabbar a.on::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 2px;
    border-radius: 0 0 3px 3px;
    background: var(--orange);
    box-shadow: 0 0 12px var(--orange-glow);
  }
  .tabbar a:active { transform: scale(.94); }
  .tabbar .badge-dot {
    position: absolute;
    top: 6px;
    right: 50%;
    margin-right: -18px;
    min-width: 8px;
    height: 8px;
    border-radius: 8px;
    background: var(--orange);
    border: 1.5px solid #080808;
  }
  [data-theme="light"] .tabbar .badge-dot { border-color: #fff; }

  /* --------------------------------------------------- reading progress */
  /* a hairline of progress under the header while you read */
  .app-search-bar {
    display: block;
    margin: .6rem 0 1rem;
  }
  .app-search-bar button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--surface-2);
    border: 1px solid var(--gray-line);
    border-radius: 14px;
    padding: .7rem .9rem;
    color: var(--txt-dimmer);
    font-family: inherit;
    font-size: .88rem;
    text-align: start;
  }
  .app-search-bar button kbd { margin-inline-start: auto; }

  /* ------------------------------------------------------------ cards */
  /* two-up grid feels native on a phone and shows more of the shelf */
  .grid-view { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .book-card { padding: .7rem; border-radius: 16px; }
  .book-cover-card { height: 168px; margin-bottom: .6rem; border-radius: 11px; }
  .book-info h3 { font-size: .84rem; line-height: 1.3; }
  .book-info .author { font-size: .7rem; margin-bottom: .5rem; }
  .book-footer { padding-top: .5rem; }
  .book-meta { gap: .4rem; font-size: .66rem; }
  .book-meta .pill { display: none; }
  .dl-btn, .fav-btn { width: 34px; height: 34px; }

  /* the list view becomes a comfortable touch list */
  .list-item {
    grid-template-columns: 46px minmax(0, 1fr) 44px;
    gap: .7rem;
    padding: .7rem .75rem;
    border-radius: 14px;
  }
  .list-item .info h4 { font-size: .86rem; }
  .list-item .info span { font-size: .7rem; }
  .list-item .stat { display: none; }
  .list-item .download { padding: .5rem; border-radius: 12px; }
  .list-item .download svg { width: 15px; height: 15px; }

  .showcase-card { flex: 0 0 78vw; padding: 1.1rem; }

  /* ---------------------------------------------------------- typography */
  .hero-title { font-size: clamp(2rem, 11vw, 2.8rem); letter-spacing: -1.5px; }
  .section-title h2 { font-size: clamp(1.35rem, 6.4vw, 1.75rem); letter-spacing: -1px; }
  .hero-right { height: 400px; }
  .book-stage { transform: scale(.58); }

  /* ------------------------------------------------------------- filters */
  /* one control per row, full width, big enough to tap */
  .filters { padding: .9rem; border-radius: 16px; }
  .filter-row { display: block; }
  .filter-row + .filter-row { margin-top: .6rem; padding-top: .6rem; }
  .filter-group { min-width: 0; width: 100%; margin-bottom: .55rem; }
  .filter-group[style] { flex: none !important; min-width: 0 !important; }
  select, input[type=text], input[type=email], input[type=password],
  input[type=number], input[type=search], textarea {
    font-size: 16px;   /* stops iOS zooming the whole page on focus */
    padding: .75rem .85rem;
    border-radius: 12px;
  }
  .chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .35rem; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; padding: .45rem .85rem; }

  /* --------------------------------------------------------------- CTA */
  .cta-section { padding: 2.2rem 1rem; }
  .cta-actions { flex-direction: column; }
  .cta-actions .btn { width: 100%; justify-content: center; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form input, .newsletter-form button { width: 100%; }

  /* ------------------------------------------------------------ tables */
  /* real tables scroll inside their own box instead of breaking the page */
  .table-wrap { -webkit-overflow-scrolling: touch; }
  table.tbl { font-size: .8rem; }
  table.tbl th, table.tbl td { padding: .5rem .45rem; white-space: nowrap; }

  /* ---------------------------------------------------------- dashboard */
  .dash-side {
    position: sticky;
    top: 0;
    z-index: 900;
    padding: .6rem .7rem;
    background: rgba(8, 8, 8, .96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    height: auto;
    max-height: none;
    border-bottom: 1px solid var(--gray-line);
  }
  [data-theme="light"] .dash-side { background: rgba(255, 255, 255, .96); }
  .dash-side .who { padding: .45rem .6rem; margin-bottom: .55rem; }
  .dash-side .who .av { width: 32px; height: 32px; font-size: .8rem; }
  .dash-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: .35rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .dash-nav::-webkit-scrollbar { display: none; }
  .dash-nav a { flex: 0 0 auto; padding: .5rem .75rem; font-size: .78rem; background: var(--surface-2); }
  .dash-nav a.active { background: rgba(255, 107, 0, .16); }
  .dash-main { padding: 1rem .85rem 2.5rem; }
  .dash-head h1 { font-size: 1.3rem; }
  .kpis, .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .kpi, .stat-card { padding: .85rem .9rem; border-radius: 14px; }
  .kpi .v, .stat-card .v { font-size: 1.3rem; }
  .panel { padding: 1rem; border-radius: 16px; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .tabs a { flex: 0 0 auto; }

  /* ----------------------------------------------------- stats heatmap */
  .heatmap { grid-template-rows: repeat(7, 11px); }
  .heatmap i { width: 11px; height: 11px; }
  .bars { height: 92px; }
  .bars .bar span { font-size: .56rem; }

  /* ---------------------------------------------------------- reader UI */
  .reader-bar { padding: .5rem .6rem; gap: .5rem; }
  .reader-bar .rt { font-size: .8rem; flex: 1 1 100%; order: 3; }
  .reader-nav { padding: .45rem .5rem; gap: .35rem; }
  .reader-nav .nav-btn { padding: .45rem .7rem; font-size: .76rem; }
  .reader-nav input[type=number] { width: 60px !important; }
  #zoomOut, #zoomIn, #zoomLabel, #fitBtn { display: none; }   /* pinch-zoom instead */
  .reader-canvas { padding: 8px; gap: 8px; }

  /* ------------------------------------------------------------ modals */
  .overlay { padding: 0; align-items: flex-end; }
  .modal, .palette {
    max-width: 100%;
    width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 92vh;
    overflow-y: auto;
    animation: sheetUp .28s cubic-bezier(.2, .9, .3, 1);
  }
  @keyframes sheetUp { from { transform: translateY(28px); opacity: .6; } to { transform: none; opacity: 1; } }
  .palette-results { max-height: 60vh; }
  .modal-body { padding: 1rem; }
  .modal-head { position: sticky; top: 0; background: var(--black-card); z-index: 2; }

  /* iOS zooms the page when a font-size < 16px input is focused */
  .palette input { font-size: 16px; }

  /* --------------------------------------------------------- about/install */
  .about-hero, .install-hero { gap: 1.2rem; }
  .install-hero-visual { order: -1; }
  .install-phone { width: 190px; }
}

/* ==========================================================================
   VERY NARROW  (<= 400px)
   ========================================================================== */
@media (max-width: 400px) {
  .book-cover-card { height: 146px; }
  .hero-title { font-size: 1.9rem; }
  .kpis, .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabbar a { font-size: .56rem; }
  .tabbar a svg { width: 20px; height: 20px; }
}

/* ==========================================================================
   TOUCH DEVICES ONLY — no hover effects that stick after a tap
   ========================================================================== */
@media (hover: none) {
  .book-card:hover,
  .showcase-card:hover,
  .cat-card:hover,
  .shelf-card:hover,
  .stat-item:hover { transform: none; }
  .book-card:hover::after { opacity: 0; }
  .list-item:hover { transform: none; }
  /* but do give a proper press feedback */
  .book-card:active,
  .cat-card:active,
  .shelf-card:active { transform: scale(.985); }
}

/* ==========================================================================
   INSTALLED APP (standalone) — hide the bits that only make sense in a browser
   ========================================================================== */
@media (display-mode: standalone) {
  .install-only,
  #installLink,
  [data-install-app] { display: none !important; }
}