/* ============================================================
   OBSIDIAN — MOBILE APP LAYER (v2, Oct 30, 2026)
   Owner verdict, Oct 30: the Reseller page on his phone "doesn't
   feel like a mobile app" — "small letters and words", "hard to
   read, see." This layer is the fix, phone-width only
   (max-width: 860px); desktop rendering is untouched.

   v1 of this file targeted a dead template's classes
   (.site-header / .base44-*) and was loaded by NO page — the
   estate had a mobile layer on paper only. v2 targets the real
   storefront classes from clone.css / showcase.css.

   What it does:
   1. TYPE SCALE UP — body 17px/1.65; component text that shipped
      at 12.5–15.5px raised to a readable 14.5–18.5px.
   2. APP FEEL — an app-style bottom tab bar (injected by
      assets/mobile-nav.js as .obs-mobile-nav), thumb-sized tap
      targets (>=48px), looser density, one idea per screen.
   3. LIGHT CLEAN FACES — clone.js now defaults phone-width
      screens to the light theme (a stored choice still wins);
      the overrides under html[data-theme="light"] below repair
      the components whose colors were hard-coded for the dark
      skin, so light mode has no white-on-white text.
   Load order: this sheet is linked AFTER clone.css/showcase.css
   on every storefront page so these rules win ties.
   ============================================================ */

@media (max-width: 860px) {

  /* ---------- 1. type scale + density ---------- */
  body { font-size: 17px; line-height: 1.65; }
  .wrap { padding: 0 18px; }
  .section { padding: 42px 0 6px; }
  .section-head { margin-bottom: 26px; }
  .section-head p { font-size: 17.5px; line-height: 1.6; }
  .page-head { padding: 36px 0 4px; }
  .page-head p { font-size: 17px; line-height: 1.6; }
  .hero { padding: 38px 0 30px; }
  .hero p.sub { font-size: 18.5px; line-height: 1.6; }
  .hero .promo { font-size: 12.5px; padding: 9px 15px; text-align: center; }

  .card { padding: 24px 20px; }
  .card p { font-size: 16.5px; line-height: 1.65; }
  .card .go { font-size: 15.5px; margin-top: 18px; }
  .beat p { font-size: 16px; line-height: 1.65; }
  .step p { font-size: 15.5px; line-height: 1.6; }
  .step h3 { font-size: 17px; }
  .gallery-card p { font-size: 16px; line-height: 1.65; }
  .gallery-card .go { font-size: 15.5px; }
  .style-panel p { font-size: 16.5px; line-height: 1.7; }
  .style-panel ul li { font-size: 16px; }
  .digest-band p { font-size: 16.5px; line-height: 1.65; }
  .cta-band p { font-size: 16.5px; line-height: 1.65; }
  .help-band p { font-size: 17px; line-height: 1.65; }
  .faq summary { font-size: 17.5px; padding: 16px 4px; }
  .faq .a { font-size: 16.5px; line-height: 1.7; }
  .lane-note { font-size: 14.5px; line-height: 1.6; }
  .count-line { font-size: 14px; }
  .trustline { font-size: 15px; }
  .price-card .pitch { font-size: 15px; line-height: 1.55; }
  .price-card .per { font-size: 14px; }
  .co-row .pdesc { font-size: 15px; line-height: 1.6; }
  .result-card .price-line { font-size: 14.5px; }
  .status { font-size: 15px; }
  .field label { font-size: 13px; }
  .megafooter ul a { font-size: 15.5px; }
  .megafooter .legal { font-size: 13.5px; line-height: 1.6; }
  .crumb { font-size: 14px; }

  /* ---------- 2. app chrome: top bar ---------- */
  .topbar-in { height: 60px; padding: 0 14px; gap: 10px; }
  .brand { font-size: 18px; gap: 8px; }
  .brand .mark { width: 32px; height: 32px; border-radius: 9px; font-size: 16px; }
  .topbar .phone { display: none !important; }
  /* the cart button is an <a class="icon-btn">; on a phone the cart
     lives in the Plans tab + the checkout flow, and keeping the
     button here pushed the burger off the right edge of the bar */
  .topbar-right a.icon-btn { display: none; }
  .topbar-right { gap: 6px; }
  .signin-link { font-size: 15px; white-space: nowrap; padding: 12px 6px; }
  .lang-toggle button { min-height: 40px; padding: 9px 12px; font-size: 13px; }
  .icon-btn { width: 44px; height: 44px; flex: 0 0 auto; }

  /* drawer: full-height app menu */
  .drawer .panel { width: min(340px, 88vw); padding: 20px; }
  .drawer .panel a.dlink { padding: 17px 4px; font-size: 17.5px; }
  .drawer .panel a.dlink small { font-size: 13.5px; }

  /* ---------- 2b. the core action: search, big and thumb-first ---------- */
  .searchbar { border-radius: 20px; padding: 10px; margin-top: 26px; }
  .searchbar input { font-size: 17px; min-height: 58px; padding: 14px; }
  .searchbar .btn { min-height: 58px; font-size: 17px; width: 100%; }
  .tld-chips .chip { font-size: 14.5px; padding: 11px 16px; }

  /* tap targets */
  .btn { min-height: 56px; font-size: 16px; }
  .filter-chips button, .filter-axis button { min-height: 48px; font-size: 15px; padding: 11px 18px; }
  .style-tabs button { min-height: 50px; font-size: 15.5px; }

  /* price table: readable, scrolls sideways instead of squeezing */
  .tld-table-wrap { overflow-x: auto; }
  table.tld-table { font-size: 16px; }
  table.tld-table th, table.tld-table td { padding: 14px 16px; }

  /* cookie banner floats above the tab bar, never under it */
  html.has-mobile-nav .cookie { bottom: 92px; }
  .cookie h3 { font-size: 16.5px; }
  .cookie p { font-size: 14.5px; line-height: 1.6; }
  .cookie .row .btn { min-height: 50px; font-size: 14.5px; }

  /* ---------- 2c. bottom tab bar (markup: assets/mobile-nav.js) ---------- */
  html.has-mobile-nav body { padding-bottom: 78px; }
  .obs-mobile-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500;
    display: flex; gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border-top: 1px solid #e3e6ee;
    box-shadow: 0 -8px 28px rgba(5, 5, 10, .08);
  }
  .obs-mobile-nav a {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 3px; padding: 7px 2px 5px; border-radius: 14px;
    color: #5b6270; text-decoration: none;
    font-size: 11.5px; font-weight: 800; letter-spacing: .01em;
    -webkit-tap-highlight-color: transparent;
  }
  .obs-mobile-nav a svg { width: 23px; height: 23px; display: block; }
  .obs-mobile-nav a span { white-space: nowrap; }
  .obs-mobile-nav a.on { color: var(--cyan); }
  .obs-mobile-nav a:active { background: rgba(37, 99, 235, .08); }

  /* stored-dark phones keep a dark tab bar */
  html:not([data-theme="light"]) .obs-mobile-nav {
    background: rgba(10, 10, 16, .97); border-top-color: #26262f;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .5);
  }
  html:not([data-theme="light"]) .obs-mobile-nav a { color: #9aa0ae; }
  html:not([data-theme="light"]) .obs-mobile-nav a.on { color: #fff; }

  /* ---------- 3. light-face repairs (hard-coded dark-skin colors) ---------- */
  html[data-theme="light"] .cta-band {
    background: linear-gradient(160deg, #ffffff, #eef2fb); color: #050508;
  }
  html[data-theme="light"] .cta-band p { color: #454b58; }
  html[data-theme="light"] .mock-prompt { color: #1c2130; background: #f2f5fa; }
  html[data-theme="light"] .style-panel ul li { color: #1c2130; }
  html[data-theme="light"] .gallery-card .feel { color: #1c2130; }
  html[data-theme="light"] .plan .tag { color: #1d4ed8; }
  html[data-theme="light"] .preview-tag {
    color: #1d4ed8; background: rgba(37, 99, 235, .1); border-color: rgba(37, 99, 235, .35);
  }
  html[data-theme="light"] .cat-tag {
    color: #1d4ed8; background: rgba(37, 99, 235, .1); border-color: rgba(37, 99, 235, .35);
  }
  html[data-theme="light"] .browser-mock .url { background: #ffffff; }
  html[data-theme="light"] .drawer .panel { background: #ffffff; }
}