/* Phone layout: app shell, sheets and touch-first controls. Desktop is unchanged. */
.app-tabbar,.app-sheet,.app-result-bar,.app-segmented { display:none; }

@media (max-width:760px) {
  :root { --app-tabbar-h:64px; --app-safe-b:env(safe-area-inset-bottom,0px); --app-ease:cubic-bezier(.22,1,.36,1); }

  /* Footer text runs on two lines instead of colliding. */
  .footer-bottom span { display:block; }
  .footer-bottom span + span { margin-top:4px; }
  .site-footer { padding-bottom:calc(var(--app-tabbar-h) + var(--app-safe-b) + 24px) !important; }

  /* Slim sticky header with a solid backdrop, so it never sits over content. */
  :root:is([data-theme],:not([data-theme])) body .nh-header { position:sticky !important; top:0; z-index:50; padding-top:env(safe-area-inset-top,0px); background:color-mix(in srgb,var(--bg) 88%,transparent) !important; -webkit-backdrop-filter:saturate(1.4) blur(14px) !important; backdrop-filter:saturate(1.4) blur(14px) !important; border-bottom:1px solid var(--border) !important; }
  .nh-header-inner { min-height:56px; padding-top:4px !important; padding-bottom:4px !important; }
  .nh-brand img { width:auto !important; height:44px !important; }
  .nh-header .nh-search-trigger { display:none !important; }
  .nh-header .nh-theme-toggle,.nh-header .nh-menu-toggle { width:44px !important; height:44px !important; min-height:44px; color:var(--ink) !important; }
  body.navaro-intro-complete .navaro-intro-topnav { background:color-mix(in srgb,var(--bg) 88%,transparent); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--border); }
  body.navaro-intro-complete .navaro-intro-topnav::before { display:none; }

  /* Bottom tab bar. */
  body.has-app-tabbar { padding-bottom:calc(var(--app-tabbar-h) + var(--app-safe-b)); }
  .app-tabbar { position:fixed; inset:auto 0 0; z-index:60; display:grid; grid-template-columns:repeat(5,1fr); height:calc(var(--app-tabbar-h) + var(--app-safe-b)); padding:0 6px var(--app-safe-b); background:color-mix(in srgb,var(--surface) 92%,transparent); -webkit-backdrop-filter:saturate(1.4) blur(18px); backdrop-filter:saturate(1.4) blur(18px); border-top:1px solid var(--border); }
  .app-tabbar a,.app-tabbar button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; padding:0; border:0; background:none; color:var(--muted); font:500 11px/1.1 var(--font-body); letter-spacing:.02em; text-decoration:none; -webkit-tap-highlight-color:transparent; cursor:pointer; }
  .app-tabbar svg { width:24px; height:24px; transition:transform 160ms var(--app-ease); }
  .app-tabbar [aria-current="page"] { color:var(--ink); font-weight:600; }
  .app-tabbar [aria-current="page"] svg { stroke-width:1.9; }
  .app-tabbar a:active svg,.app-tabbar button:active svg { transform:scale(.88); }
  .app-tabbar a:focus-visible,.app-tabbar button:focus-visible { outline:2px solid var(--accent); outline-offset:-4px; border-radius:10px; }
  .back-to-top-arrow { bottom:calc(var(--app-tabbar-h) + var(--app-safe-b) + 16px) !important; }

  /* Bottom sheet used for search and vendor details. */
  .app-sheet:not([hidden]) { display:block; position:fixed; inset:0; z-index:80; }
  .app-sheet-scrim { position:absolute; inset:0; background:rgba(0,0,0,.42); opacity:0; transition:opacity 220ms ease; }
  .app-sheet-panel { position:absolute; inset:auto 0 0; max-height:82vh; overflow:auto; padding:10px 20px calc(20px + var(--app-safe-b)); background:var(--surface); color:var(--ink); border-radius:18px 18px 0 0; box-shadow:0 -12px 40px rgba(0,0,0,.22); transform:translateY(100%); transition:transform 280ms var(--app-ease); }
  .app-sheet.is-open .app-sheet-scrim { opacity:1; }
  .app-sheet.is-open .app-sheet-panel { transform:none; }
  .app-sheet-grip { display:block; width:40px; height:4px; margin:0 auto 14px; border-radius:2px; background:var(--border-strong); }
  .app-sheet-title { margin:0 0 14px; font:400 1.45rem/1.15 var(--font-display); color:var(--ink); }
  .app-sheet-close { display:block; width:100%; min-height:48px; margin-top:14px; border:1px solid var(--border-strong); border-radius:12px; background:transparent; color:var(--ink); font:500 1rem var(--font-body); }
  body.app-sheet-open { overflow:hidden; }
  .app-search-form { display:flex; gap:8px; }
  .app-search-form input { flex:1; min-width:0; min-height:48px; padding:0 14px; border:1px solid var(--border-strong); border-radius:12px; background:var(--bg); color:var(--ink); font:16px var(--font-body); }
  .app-search-form button,.app-sheet-action { display:flex; align-items:center; justify-content:center; min-height:48px; padding:0 18px; border:0; border-radius:12px; background:var(--ink); color:var(--bg) !important; font:600 1rem var(--font-body); text-decoration:none !important; }
  .app-vendor-sheet dl { display:grid; gap:0; margin:0 0 16px; }
  .app-vendor-sheet dl > div { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--border); }
  .app-vendor-sheet dt { color:var(--muted); font-size:.95rem; }
  .app-vendor-sheet dd { margin:0; text-align:right; font-size:1rem; overflow-wrap:anywhere; }

  /* Tap feedback. */
  .app-tappable,.compound-card,.tool-card,.bac-vendor-card { transition:transform 140ms var(--app-ease),background-color 140ms ease; -webkit-tap-highlight-color:transparent; }
  .app-tappable:active,.compound-card:active,.tool-card:active { transform:scale(.975); }

  /* Compound pages: sticky section tabs and collapsible sections. */
  .compound-page .container { padding-left:16px !important; padding-right:16px !important; }
  .app-section-tabs { position:sticky; top:calc(64px + env(safe-area-inset-top,0px)); z-index:20; display:flex; gap:6px; margin:18px -16px 8px; padding:8px 16px; overflow-x:auto; scrollbar-width:none; background:color-mix(in srgb,var(--bg) 92%,transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
  .app-section-tabs::-webkit-scrollbar { display:none; }
  .app-section-tabs a { flex:0 0 auto; padding:8px 14px; border:1px solid var(--border-strong); border-radius:999px; color:var(--ink-soft); font:500 14px/1 var(--font-body); text-decoration:none; white-space:nowrap; }
  .app-section-tabs a[aria-current] { background:var(--ink); border-color:var(--ink); color:var(--bg); }
  .app-section { border-bottom:1px solid var(--border); scroll-margin-top:124px; }
  .app-section > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; padding:6px 0; list-style:none; cursor:pointer; }
  .app-section > summary::-webkit-details-marker { display:none; }
  .app-section > summary h3 { margin:0 !important; font-size:1.2rem !important; }
  .app-section > summary::after { content:""; flex:0 0 10px; width:10px; height:10px; margin-right:4px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(45deg) translateY(-3px); transition:transform 200ms var(--app-ease); }
  .app-section[open] > summary::after { transform:rotate(-135deg) translateY(-3px); }
  .app-section-body { padding-bottom:20px; }
  .app-section-body p,.app-section-body li { font-size:1.05rem; line-height:1.6; }

  /* Library: categories become a swipeable chip row; cards lead with the name. */
  .library-sidebar #categoryChips { display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; gap:8px !important; margin:0 -16px; padding:4px 16px 8px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; }
  .library-sidebar #categoryChips::-webkit-scrollbar { display:none; }
  .library-sidebar #categoryChips .chip { flex:0 0 auto !important; width:auto !important; min-height:40px !important; padding:6px 14px 6px 6px !important; border-radius:999px !important; scroll-snap-align:start; gap:8px !important; }
  .library-sidebar #categoryChips .category-chip-thumb { width:28px !important; height:28px !important; border-radius:50% !important; }
  .compound-card .compound-card-body { display:flex !important; flex-direction:column; }
  .compound-card .name { order:-1; margin:0 0 6px !important; padding-right:22px; }
  .compound-card .compound-card-top { margin-bottom:8px !important; }
  .compound-card .go { display:none !important; }
  .compound-card .category-pill,.compound-card .compound-tag { font-size:12px !important; }
  .compound-card .compound-description { font-size:15px !important; line-height:1.45 !important; }

  /* Vendors: one card style, whole card opens a details sheet. */
  :root:is([data-theme],:not([data-theme])) body .tools-page :is(#category-vendors,#category-resellers,#category-resources).vendor-section { --ink:inherit; --ink-soft:inherit; --muted:inherit; --surface:inherit; --surface-2:inherit; --border:inherit; --border-strong:inherit; --category-ink:inherit; --category-soft:inherit; }
  :root:is([data-theme],:not([data-theme])) body .tools-page :is(#category-vendors,#category-resellers,#category-resources) :is(.directory-table,.directory-table tbody tr) { border-color:var(--border) !important; }
  :root:is([data-theme],:not([data-theme])) body .tools-page :is(#category-vendors,#category-resellers,#category-resources):is(.vendor-section,* .other-resource-group,* .directory-table) { background:var(--bg) !important; background-image:none !important; }
  :root:is([data-theme],:not([data-theme])) body .tools-page :is(#category-vendors,#category-resellers,#category-resources) .directory-table { background:transparent !important; border:0 !important; }
  :root:is([data-theme],:not([data-theme])) body .tools-page :is(#category-vendors,#category-resellers,#category-resources) .directory-table tbody tr.mobile-vendor-ready { background:var(--surface) !important; border:1px solid var(--border) !important; }
  :root:is([data-theme],:not([data-theme])) body :is(.other-resource-group h3,.vendor-section > .container > h2) { color:var(--ink) !important; font-family:var(--font-display) !important; font-size:1.3rem !important; }
  :root:is([data-theme],:not([data-theme])) body .other-resource-group .stock-note { color:var(--muted) !important; }
  .compound-jump-nav { display:none !important; }
  .vendor-mobile-flag { right:44px !important; }
  :root:is([data-theme],:not([data-theme])) body .korean-vendor-link { display:block; padding:16px 44px 16px 18px; background:var(--surface) !important; color:var(--ink) !important; border:1px solid var(--border) !important; border-radius:14px !important; font-family:var(--font-display); font-size:1.25rem; text-decoration:none !important; position:relative; }
  :root:is([data-theme],:not([data-theme])) body .korean-vendor-link::after { content:""; position:absolute; right:20px; top:50%; width:8px; height:8px; border-right:1.5px solid var(--muted); border-top:1.5px solid var(--muted); transform:translateY(-50%) rotate(45deg); }
  :root:is([data-theme],:not([data-theme])) body :is(tr.mobile-vendor-ready,.bac-vendor-card) { position:relative; background:var(--surface) !important; color:var(--ink) !important; border:1px solid var(--border) !important; border-top:1px solid var(--border) !important; border-radius:14px !important; box-shadow:none !important; cursor:pointer; }
  :root:is([data-theme],:not([data-theme])) body .tools-page :is(#category-vendors,#category-resellers,#category-resources) :is(tr.mobile-vendor-ready .vendor-profile-link,.bac-vendor-card .bac-vendor-name,tr.mobile-vendor-ready td) { color:var(--ink) !important; font-family:var(--font-display) !important; font-size:1.25rem !important; text-decoration:none !important; }
  tr.mobile-vendor-ready::after,.bac-vendor-card::after { content:""; position:absolute; right:20px; top:50%; width:8px; height:8px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:translateY(-50%) rotate(-45deg); pointer-events:none; }
  .vendor-mobile-actions,.bac-vendor-actions { display:none !important; }
  .bac-vendor-card .bac-tier { margin-right:28px; color:var(--muted) !important; }

  /* Tools: each category is a swipeable row of compact cards. */
  .page-panel .tool-card-grid { display:flex !important; flex-wrap:nowrap !important; justify-content:flex-start !important; gap:12px !important; margin:0 -16px 8px !important; padding:4px 16px 12px !important; overflow-x:auto; scroll-snap-type:x proximity; scroll-padding:0 16px; scrollbar-width:none; grid-template-columns:none !important; }
  .page-panel .tool-card-grid::-webkit-scrollbar { display:none; }
  .page-panel .tool-card-grid > .tool-card { flex:0 0 78% !important; width:78% !important; min-height:0 !important; height:200px !important; scroll-snap-align:start; }
  .page-panel .popular-tool-grid > .tool-card { height:240px !important; }
  .page-panel > h2 { text-align:left !important; margin:28px 0 10px !important; font-size:1.35rem !important; }

  /* Calculators: segmented units and a result bar that follows the inputs. */
  .app-segmented { display:flex; padding:3px; border:1px solid var(--border-strong); border-radius:12px; background:var(--surface-2); }
  .app-segmented button { flex:1; min-height:42px; border:0; border-radius:9px; background:transparent; color:var(--ink-soft); font:500 15px var(--font-body); transition:background-color 160ms ease,color 160ms ease; }
  .app-segmented button[aria-checked="true"] { background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.14); }
  .app-segmented-source { display:none !important; }
  main input,main select,main textarea { font-size:16px !important; }
  body.has-app-result-bar .site-footer { padding-bottom:calc(var(--app-tabbar-h) + var(--app-safe-b) + 88px) !important; }
  .app-result-bar { position:fixed; left:12px; right:12px; bottom:calc(var(--app-tabbar-h) + var(--app-safe-b) + 10px); z-index:55; display:flex; gap:10px; padding:10px 14px; border:1px solid var(--border-strong); border-radius:14px; background:var(--ink); color:var(--bg); box-shadow:0 10px 28px rgba(0,0,0,.24); text-align:left; transition:transform 240ms var(--app-ease),opacity 200ms ease; }
  .app-result-bar[hidden] { display:none; }
  .app-result-bar.is-hidden { transform:translateY(16px); opacity:0; pointer-events:none; }
  .app-result-bar span { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
  .app-result-bar small { font:500 12px var(--font-body); opacity:.72; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .app-result-bar strong { font:600 17px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; }
}

@media (max-width:760px) and (prefers-reduced-motion:reduce) {
  .app-sheet-panel,.app-sheet-scrim,.app-result-bar,.app-tabbar svg,.app-section > summary::after { transition:none; }
  .app-tappable:active,.compound-card:active,.tool-card:active { transform:none; }
}