/* Design pass A (audit/design_pass_a_plan.md, 2026-10-29): the shared "depth"
   look Nate approved in the new-look mockup. Two-tone icons, icon tiles,
   lifting cards. Only new class names (dp-*) plus the sidebar, so pages that
   don't use them look as before. Loaded by app_base.html. */
svg .duo{fill:currentColor;opacity:.22;stroke:none}
svg .solid{fill:currentColor;stroke:none}
.dp-tile{--t:var(--color-primary,#2563eb);flex:none;width:44px;height:44px;border-radius:13px;display:inline-grid;place-items:center;color:var(--t);
  background:linear-gradient(150deg,color-mix(in srgb,var(--t) 9%,#fff),color-mix(in srgb,var(--t) 22%,#fff));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px color-mix(in srgb,var(--t) 16%,transparent)}
.dp-tile svg{width:22px;height:22px}
.dp-tile.sm{width:34px;height:34px;border-radius:10px}.dp-tile.sm svg{width:18px;height:18px}
.dp-tile.lg{width:52px;height:52px;border-radius:15px}.dp-tile.lg svg{width:26px;height:26px}
.dp-tile.solid{color:#fff;background:linear-gradient(155deg,color-mix(in srgb,var(--t) 62%,#fff) 0%,var(--t) 58%,color-mix(in srgb,var(--t) 80%,#000) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 14px -6px color-mix(in srgb,var(--t) 70%,transparent)}
.dp-tile.solid svg .duo{opacity:.35}
.dp-lift{transition:transform .18s ease,box-shadow .18s ease,border-color .18s}
.dp-lift:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(15,23,42,.06),0 10px 24px -10px rgba(15,23,42,.18)}
@media (prefers-reduced-motion: reduce){.dp-lift,.dp-lift:hover{transition:none;transform:none}}

/* ── Sidebar: tinted icon tiles, a solid tile on the page you're on ──
   data-app-href: the demo pages' links (they point at /demo/…), see
   scripts/demo_capture.py nav_colors(). */
.sidebar-shell .nav-item{--nav-c:#64748b}
.sidebar-shell .nav-item[data-target="tab-career"],.sidebar-shell .nav-item[href^="/career-paths"],.sidebar-shell .nav-item[data-app-href="/career-paths"]{--nav-c:#5b4ce6}
.sidebar-shell .nav-item[data-target="tab-college"],.sidebar-shell .nav-item[href^="/college"],.sidebar-shell .nav-item[data-app-href="/college"]{--nav-c:#be185d}
.sidebar-shell .nav-item[href^="/resume"],.sidebar-shell .nav-item[href="/import-resume"],.sidebar-shell .nav-item[data-app-href="/resume"],.sidebar-shell .nav-item[data-app-href="/import-resume"]{--nav-c:#2563eb}
.sidebar-shell .nav-item[href^="/cover-letter"],.sidebar-shell .nav-item[data-app-href="/cover-letter"]{--nav-c:#13aa1f}
.sidebar-shell .nav-item[data-target="tab-linkedin"],.sidebar-shell .nav-item[href^="/linkedin"],.sidebar-shell .nav-item[data-app-href="/linkedin"]{--nav-c:#0a66c2}
.sidebar-shell .nav-item[href^="/interview"],.sidebar-shell .nav-item[data-app-href="/interview"]{--nav-c:#c2410c}
.sidebar-shell .nav-item[href^="/jobs"],.sidebar-shell .nav-item[data-app-href="/jobs"]{--nav-c:#087c74}
.sidebar-shell .nav-item[href="/dashboard"],.sidebar-shell .nav-item[href="/form"],.sidebar-shell .nav-item[data-app-href="/dashboard"],.sidebar-shell .nav-item[data-app-href="/form"]{--nav-c:#4f46e5}
.sidebar-shell .nav-item[href="/roadmap"],.sidebar-shell .nav-item[data-app-href="/roadmap"]{--nav-c:#0e7490}
.sidebar-shell .nav-item>svg{width:28px;height:28px;padding:5px;border-radius:9px;box-sizing:border-box;color:var(--nav-c);
  background:color-mix(in srgb,var(--nav-c) 10%,#fff);transition:background .15s,color .15s}
.sidebar-shell .nav-item.active>svg{color:#fff;background:linear-gradient(150deg,color-mix(in srgb,var(--nav-c) 70%,#fff),var(--nav-c));
  box-shadow:0 4px 10px -4px var(--nav-c)}
.sidebar-shell .nav-item.active>svg .duo{opacity:.35}
/* Sidebar items as soft buttons with a › arrow (Nate 2026-10-31, option E:
   "show these are clickable"). Hovering tints and lifts the item in its tool
   colour; the page you're on keeps its coloured highlight. Desktop only (the
   sidebar is hidden on phones). */
.sidebar-shell .nav-item{background:#f8fafc;border:1px solid #edf1f6;border-radius:12px;margin:0 0 5px;
  transition:background .15s,border-color .15s,box-shadow .15s,transform .15s,color .15s}
.sidebar-shell .nav-item::after{content:"\203A";margin-left:auto;padding-left:6px;color:#c3cad6;font-size:18px;line-height:1;
  transition:color .15s,transform .15s}
.sidebar-shell .nav-item .lock-pill{margin-left:auto}
.sidebar-shell .nav-item .lock-pill~*{margin-left:0}
.sidebar-shell .nav-item[href="/logout"]::after{content:none}
.sidebar-shell .nav-item:hover{background:#fff;border-color:color-mix(in srgb,var(--nav-c) 35%,#fff);
  box-shadow:0 4px 12px -6px color-mix(in srgb,var(--nav-c) 55%,transparent);transform:translateY(-1px)}
.sidebar-shell .nav-item:hover::after{color:var(--nav-c);transform:translateX(2px)}
.sidebar-shell .nav-item.active{background:var(--tool-soft,#eef2ff);border-color:color-mix(in srgb,var(--nav-c) 30%,#fff)}
.sidebar-shell .nav-item.active::after{color:var(--nav-c)}
@media (prefers-reduced-motion:reduce){.sidebar-shell .nav-item,.sidebar-shell .nav-item::after{transition:none}
  .sidebar-shell .nav-item:hover,.sidebar-shell .nav-item:hover::after{transform:none}}

/* ── Phone bottom bar: the sidebar's look (Nate 2026-11-02) ──
   Each tab has its tool's colour on a tinted tile; the page you're on gets a
   solid tile with a white icon, the same as the sidebar's active item.
   data-app-href says which page a tab is (the demo pages rewrite hrefs). */
.app-tab{--nav-c:#64748b}
.app-tab[data-app-href="/dashboard"]{--nav-c:#4f46e5}
.app-tab[data-app-href="/career-paths"]{--nav-c:#5b4ce6}
.app-tab[data-app-href="/college"]{--nav-c:#be185d}
.app-tab[data-app-href="/resume"]{--nav-c:#2563eb}
.app-tab[data-app-href="/cover-letter"]{--nav-c:#13aa1f}
.app-tab[data-app-href="/linkedin"]{--nav-c:#0a66c2}
.app-tab[data-app-href="/interview"]{--nav-c:#c2410c}
.app-tab[data-app-href="/jobs"]{--nav-c:#087c74}
.app-tab[data-app-href="/roadmap"]{--nav-c:#0e7490}
.app-tab .app-tab-icon{width:42px;height:30px;border-radius:10px;color:var(--nav-c);
  background:color-mix(in srgb,var(--nav-c) 10%,#fff);transition:background .15s,color .15s}
.app-tab .app-tab-icon svg{width:20px;height:20px}
.app-tab.active{color:color-mix(in srgb,var(--nav-c) 82%,#000)}
.app-tab.active .app-tab-icon{color:#fff;background:linear-gradient(150deg,color-mix(in srgb,var(--nav-c) 70%,#fff),var(--nav-c));
  box-shadow:0 4px 10px -4px var(--nav-c)}
.app-tab.active .app-tab-icon svg .duo{opacity:.35}