/* =====================================================
   inveni — v2 onboarding "Build your interests" (MOBILE)
   Faithful adaptation of the design handoff
   (design_handoff_seed_papers_mobile/seed-mobile.css).
   Everything is scoped under #v2MobileShell AND a phone
   media query so it can never touch the desktop v2 page.
   ===================================================== */

#v2MobileShell { display: none; }

@media (max-width: 767px) {

  /* ── Full-screen shell (takes over the viewport during seed selection) ── */
  #v2MobileShell.active {
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; right: 0;
    /* Stop above the app's real bottom nav (.sidebar, 60px, z-50) so it stays
       visible + tappable — we dropped the shell's own duplicate tab bar. */
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    z-index: 210;
    background: var(--ink-800);
    color: var(--fg-1); font-family: var(--font-sans);
    overflow: hidden;
    /* Real-device safe area at the top (the bottom is handled by the nav gap). */
    padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
  }

  /* ── Header ── */
  #v2MobileShell .seed-header { flex-shrink: 0; padding: 4px 16px 0; }
  #v2MobileShell .seed-heading {
    font-family: var(--font-display); font-weight: 500; font-size: 24px;
    letter-spacing: -0.02em; line-height: 1.1; color: var(--fg-1); margin: 0 0 5px;
  }
  #v2MobileShell .seed-howto-m {
    padding: 6px 10px;
    border: 1px solid var(--border-hair); border-left: 3px solid var(--signal-amber);
    background: rgba(229,178,93,0.08); border-radius: 6px;
    font-size: 12px; line-height: 1.45; color: var(--fg-2); margin-bottom: 8px;
  }
  #v2MobileShell .seed-howto-m strong { color: var(--fg-1); }
  /* Match .collapsed specificity so the hint folds cleanly (#4). */
  #v2MobileShell .seed-howto-m.collapsed {
    padding-top: 0; padding-bottom: 0; border-width: 0; margin-bottom: 0;
  }
  #v2MobileShell .seed-howto-list { margin: 5px 0 0; padding-left: 16px; }
  #v2MobileShell .seed-howto-list li { margin: 3px 0; }

  /* ── Import zone ── */
  #v2MobileShell .seed-import-zone { flex-shrink: 0; margin-bottom: 6px; }
  #v2MobileShell .glass-card-m {
    background: rgba(17,24,39,0.6); border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--r-md);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  }
  #v2MobileShell .imp-card { margin: 0 16px; overflow: hidden; }
  #v2MobileShell .imp-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; background: transparent; border: none; cursor: pointer;
    font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--fg-2);
    -webkit-tap-highlight-color: transparent;
  }
  #v2MobileShell .imp-toggle svg { transition: transform var(--dur-2) var(--ease-out); }
  #v2MobileShell .imp-card.open .imp-toggle svg { transform: rotate(180deg); }
  #v2MobileShell .imp-body { padding: 0 14px 14px; display: none; flex-direction: column; gap: 10px; }
  #v2MobileShell .imp-card.open .imp-body { display: flex; }
  #v2MobileShell .imp-field { display: flex; flex-direction: column; gap: 4px; }
  #v2MobileShell .imp-label {
    font-family: var(--font-sans); font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.18em; color: var(--fg-3);
  }
  #v2MobileShell .imp-inline { display: flex; gap: 6px; }
  #v2MobileShell .imp-status { font-size: 12px; color: var(--fg-2); line-height: 1.4; min-height: 1em; }

  /* ── Inputs ── */
  #v2MobileShell .seed-input-m {
    width: 100%; flex: 1; min-width: 0;
    background: rgba(0,0,0,0.3); border: 1px solid var(--border-hair);
    border-radius: var(--r-sm); padding: 9px 12px; color: var(--fg-1);
    font-family: var(--font-mono); font-size: 12px; outline: none;
    transition: border-color var(--dur-1) var(--ease-out);
  }
  #v2MobileShell .seed-input-m:focus { border-color: var(--signal-azure); box-shadow: var(--glow-azure); }
  #v2MobileShell .seed-input-m::placeholder { color: var(--fg-4); }
  #v2MobileShell input[type="file"].seed-file-m { font-size: 12px; color: var(--fg-2); max-width: 100%; }

  /* ── Buttons ── */
  #v2MobileShell .btn-pri-m {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px;
    font-family: var(--font-sans); font-size: 14px; font-weight: 600;
    background: var(--fg-1); color: var(--ink-900);
    border: 1px solid transparent; border-radius: var(--r-sm);
    cursor: pointer; white-space: nowrap; line-height: 1.2;
    transition: all var(--dur-1) var(--ease-out); -webkit-tap-highlight-color: transparent;
  }
  #v2MobileShell .btn-pri-m:hover { background: #fff; }
  #v2MobileShell .btn-pri-m:active { transform: scale(0.98); }
  #v2MobileShell .btn-pri-m.compact { padding: 10px 14px; font-size: 12px; }
  #v2MobileShell .btn-pri-m.full { width: 100%; justify-content: center; }
  #v2MobileShell .btn-sec-m {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px;
    font-family: var(--font-sans); font-size: 12px; font-weight: 600;
    background: transparent; color: var(--fg-1);
    border: 1px solid var(--border-soft); border-radius: var(--r-sm);
    cursor: pointer; white-space: nowrap;
    transition: all var(--dur-1) var(--ease-out); -webkit-tap-highlight-color: transparent;
  }
  #v2MobileShell .btn-sec-m:hover { border-color: var(--fg-2); box-shadow: var(--glow-azure); }
  #v2MobileShell .btn-sec-m.full { width: 100%; justify-content: center; }
  #v2MobileShell .v2-add-btn-m {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
    font-family: var(--font-sans); font-size: 12px; font-weight: 600;
    background: var(--signal-violet); color: var(--ink-900);
    border: 1px solid var(--signal-violet); border-radius: 6px; cursor: pointer;
    transition: filter var(--dur-1) var(--ease-out); -webkit-tap-highlight-color: transparent;
  }
  #v2MobileShell .v2-add-btn-m:hover { filter: brightness(1.08); }

  /* ── Tabs ── */
  #v2MobileShell .seed-tabs {
    display: flex; flex-shrink: 0;
    border-bottom: 1px solid var(--border-hair); border-top: 1px solid var(--border-hair);
    background: var(--ink-900);
  }
  #v2MobileShell .seed-tab {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 12px 8px 10px;
    font-family: var(--font-sans); font-size: 13px; font-weight: 600;
    color: var(--fg-3); background: transparent; border: none;
    border-bottom: 2px solid transparent; cursor: pointer;
    transition: all var(--dur-1) var(--ease-out); -webkit-tap-highlight-color: transparent;
  }
  #v2MobileShell .seed-tab.active {
    color: var(--fg-1); border-bottom-color: var(--signal-violet);
    background: rgba(167,139,250,0.04);
  }
  #v2MobileShell .seed-tab__count {
    font-family: var(--font-mono); font-size: 11px;
    background: rgba(255,255,255,0.04); color: var(--fg-4);
    padding: 1px 7px; border-radius: 999px; transition: all var(--dur-1) var(--ease-out);
  }
  #v2MobileShell .seed-tab.active .seed-tab__count {
    background: rgba(167,139,250,0.15); color: var(--signal-violet);
  }

  /* ── Scrollable list ── */
  #v2MobileShell .seed-list-scroll {
    flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
    padding: 10px 16px 16px; scrollbar-width: none; -ms-overflow-style: none;
  }
  #v2MobileShell .seed-list-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
  #v2MobileShell .seed-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
  #v2MobileShell .seed-empty { padding: 32px 16px; text-align: center; color: var(--fg-3); font-size: 13px; line-height: 1.5; }
  #v2MobileShell .seed-star { display: block; font-family: var(--font-display); font-size: 28px; color: var(--signal-amber); margin-bottom: 8px; }

  /* ── Paper card ── */
  #v2MobileShell .v2-card-m {
    display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
    border: 1px solid var(--border-hair); border-radius: var(--r-sm);
    background: var(--ink-700); cursor: pointer; min-height: 44px;
    transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
  }
  #v2MobileShell .v2-card-m:hover { border-color: var(--border-soft); }
  #v2MobileShell .v2-card-m.selected { border-color: var(--signal-violet); background: rgba(167,139,250,0.05); }
  #v2MobileShell .v2-card-m__check-col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex-shrink: 0; }
  #v2MobileShell .v2-card-m__check {
    width: 20px; height: 20px; border-radius: 4px; border: 1px solid var(--border-soft);
    background: transparent; color: transparent;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--dur-1) var(--ease-out);
  }
  #v2MobileShell .v2-card-m__check svg { width: 13px; height: 13px; }
  #v2MobileShell .v2-card-m.selected .v2-card-m__check {
    background: var(--signal-violet); border-color: var(--signal-violet); color: var(--ink-900);
  }
  #v2MobileShell .v2-card-m__year { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); line-height: 1; }
  #v2MobileShell .v2-card-m__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  #v2MobileShell .v2-card-m__title {
    font-family: var(--font-sans); font-size: 14px; font-weight: 500;
    color: var(--fg-1); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* Source badge — reuse production .v2-src-* colors, just size for mobile */
  #v2MobileShell .v2-card-m__src {
    align-self: flex-start; font-family: var(--font-mono);
    font-size: 9px; line-height: 1.4; letter-spacing: .03em;
    padding: 0 6px; border-radius: 999px; border: 1px solid var(--border-soft); color: var(--fg-3);
  }

  /* ── Suggestion / search "Add selected" bar ── */
  #v2MobileShell .sugg-action-bar {
    flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; margin: 0 16px 6px;
    background: rgba(167,139,250,0.1); border: 1px solid rgba(167,139,250,0.3);
    border-radius: var(--r-sm);
  }
  #v2MobileShell .sugg-count { font-family: var(--font-mono); font-size: 12px; color: var(--signal-violet); }

  /* ── Search card ── */
  #v2MobileShell .search-card {
    margin: 0; padding: 14px;
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  }
  /* Search-in-progress highlight (mirrors the desktop busy glow). */
  #v2MobileShell .search-card.v2m-busy {
    border-color: var(--signal-violet); box-shadow: var(--glow-violet);
  }
  /* Search-result source badge — reuse the card badge styling/colors. */
  #v2MobileShell .sr-body .v2-card-m__src { margin-top: 4px; }
  #v2MobileShell .search-title { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--fg-1); margin-bottom: 10px; }
  #v2MobileShell .mode-row { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
  #v2MobileShell .mode-pill {
    padding: 5px 12px; font-family: var(--font-sans); font-size: 12px;
    border: 1px solid var(--border-soft); border-radius: 999px;
    background: transparent; color: var(--fg-2); cursor: pointer;
    transition: all var(--dur-1) var(--ease-out); -webkit-tap-highlight-color: transparent;
  }
  #v2MobileShell .mode-pill:hover { border-color: var(--signal-violet); color: var(--fg-1); }
  #v2MobileShell .mode-pill.active { background: var(--signal-violet); border-color: var(--signal-violet); color: var(--ink-900); font-weight: 600; }
  #v2MobileShell .search-row { display: flex; gap: 6px; }
  #v2MobileShell .search-input-wrap {
    flex: 1; display: flex; align-items: center; gap: 8px;
    background: var(--ink-900, #0b0e16); border: 1px solid var(--border-soft);
    border-radius: var(--r-sm); padding: 0 12px; min-width: 0; color: var(--fg-3);
    transition: border-color var(--dur-1) var(--ease-out);
  }
  #v2MobileShell .search-input-wrap:focus-within { border-color: var(--signal-azure); box-shadow: var(--glow-azure); }
  #v2MobileShell .search-input {
    flex: 1; padding: 9px 0; background: transparent; border: none;
    color: var(--fg-1); -webkit-text-fill-color: var(--fg-1);
    font-family: var(--font-sans); font-size: 14px; outline: none; min-width: 0;
  }
  #v2MobileShell .search-input::placeholder { color: var(--fg-4); -webkit-text-fill-color: var(--fg-4); }
  /* Kill the browser autofill white/yellow fill that was overriding the dark field. */
  #v2MobileShell .search-input:-webkit-autofill,
  #v2MobileShell .search-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--fg-1);
    -webkit-box-shadow: 0 0 0 1000px var(--ink-900, #0b0e16) inset;
    caret-color: var(--fg-1);
  }
  #v2MobileShell .search-busy { display: flex; align-items: center; justify-content: center; padding: 16px 0; gap: 8px; }
  #v2MobileShell .spinner-sm {
    width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.08);
    border-top-color: var(--signal-violet); border-radius: 50%; animation: v2mSpin 800ms linear infinite;
  }
  @keyframes v2mSpin { to { transform: rotate(360deg); } }
  #v2MobileShell .search-busy span { font-family: var(--font-sans); font-size: 12px; color: var(--fg-3); }
  #v2MobileShell .search-results { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
  #v2MobileShell .search-result {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
    border-radius: var(--r-sm); border: 1px solid var(--border-hair);
    background: rgba(0,0,0,0.15); cursor: pointer;
    transition: all var(--dur-1) var(--ease-out); -webkit-tap-highlight-color: transparent;
  }
  #v2MobileShell .search-result.selected { border-color: var(--signal-violet); background: rgba(167,139,250,0.08); }
  #v2MobileShell .sr-check {
    width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; margin-top: 1px;
    border: 1px solid var(--border-soft); background: transparent; color: transparent;
    display: inline-flex; align-items: center; justify-content: center;
  }
  #v2MobileShell .sr-check svg { width: 12px; height: 12px; }
  #v2MobileShell .search-result.selected .sr-check { background: var(--signal-violet); border-color: var(--signal-violet); color: var(--ink-900); }
  #v2MobileShell .sr-body { flex: 1; min-width: 0; }
  #v2MobileShell .sr-title { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--fg-1); line-height: 1.4; }
  #v2MobileShell .sr-meta { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); }

  /* ── Bottom action bar ── */
  #v2MobileShell .seed-actions-bar {
    flex-shrink: 0; padding: 12px 16px; border-top: 1px solid var(--border-hair);
    background: var(--ink-900); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  #v2MobileShell .seed-actions-left { display: flex; flex-direction: column; gap: 1px; }
  #v2MobileShell .seed-sel-count { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); font-feature-settings: 'tnum'; }
  #v2MobileShell .seed-cap-count { font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); }

  /* ── Bottom nav tab bar ── */
  #v2MobileShell .mob-tabbar {
    flex-shrink: 0; display: flex; justify-content: space-around; align-items: center;
    height: 60px; border-top: 1px solid var(--border-soft);
    background: rgba(11,14,22,0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  #v2MobileShell .mob-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 0 6px; color: var(--fg-3); cursor: pointer; min-height: 44px;
    background: none; border: none; -webkit-tap-highlight-color: transparent;
  }
  #v2MobileShell .mob-tab.active { color: var(--fg-1); }
  #v2MobileShell .mob-tab.active svg { stroke: var(--signal-violet); }
  #v2MobileShell .mob-tab span { font-family: var(--font-sans); font-size: 10.5px; line-height: 1; }

  /* ── Floating search FAB ── */
  #v2MobileShell .search-fab {
    position: absolute; left: 16px; bottom: 84px;   /* just above the actions bar (tab bar removed) */
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--ink-700); border: 1px solid var(--border-soft); color: var(--fg-2);
    display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 8;
    box-shadow: var(--elev-2); transition: all var(--dur-2) var(--ease-out);
    -webkit-tap-highlight-color: transparent; animation: v2mFabIn 240ms var(--ease-out) both;
  }
  #v2MobileShell .search-fab:hover { border-color: var(--signal-violet); color: var(--fg-1); box-shadow: var(--elev-2), var(--glow-violet); }
  #v2MobileShell .search-fab:active { transform: scale(0.94); }
  @keyframes v2mFabIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }

  /* ── Confirm overlay ── */
  #v2MobileShell .seed-overlay {
    position: absolute; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    background: var(--scrim-strong); padding: 24px;
  }
  #v2MobileShell .seed-modal { width: 100%; max-width: 320px; padding: 28px 24px 22px; border-radius: var(--r-lg); box-shadow: var(--elev-4); }
  #v2MobileShell .seed-modal-star { font-family: var(--font-display); font-size: 28px; color: var(--signal-amber); text-align: center; margin-bottom: 10px; }
  #v2MobileShell .seed-modal-title { font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; color: var(--fg-1); text-align: center; margin-bottom: 6px; }
  #v2MobileShell .seed-modal-hint { font-size: 13px; color: var(--fg-3); text-align: center; line-height: 1.5; margin-bottom: 20px; }
  #v2MobileShell .seed-modal-btns { display: flex; flex-direction: column; gap: 8px; }
}