/* ══════════════════════════════════════════════════════════
   APP THEME — Duolingo-inspired tactility
   Chunky pressable buttons (hard bottom edge, press-down),
   bold 2px-bordered rounded cards, thick juicy progress bar,
   confident uppercase nav. Brand colors unchanged.
   Loaded after page styles, before dark-mode overrides.
   ══════════════════════════════════════════════════════════ */

:root {
  --edge:        #0038B8;            /* darker brand blue for 3D button edges */
  --edge-soft:   #E3E6EC;            /* neutral edge for white tiles */
  --edge-soft-h: #C9D7FF;            /* hover edge for white tiles */
}
[data-theme="dark"] {
  --edge:        #002E99;
  --edge-soft:   rgba(93,130,255,0.20);
  --edge-soft-h: rgba(93,130,255,0.38);
}

/* ── Buttons: press me ─────────────────────────────────── */
.btn {
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.btn:active { transform: translateY(3px); }
.btn-primary { box-shadow: 0 4px 0 var(--edge); }
.btn-primary:hover { box-shadow: 0 4px 0 var(--edge); }
.btn-primary:active { box-shadow: 0 1px 0 var(--edge); }
.btn-outline {
  border: 2px solid var(--border);
  box-shadow: 0 3px 0 var(--edge-soft);
}
.btn-outline:hover { box-shadow: 0 3px 0 var(--edge-soft-h); }
.btn-outline:active { box-shadow: 0 0 0 var(--edge-soft); }
.btn:disabled, .btn:disabled:active { transform: none; }

/* Home hero CTA — the START button of the app */
.hm-cta-btn {
  border-radius: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 4px 0 var(--edge);
  transition: background 150ms, box-shadow 100ms, transform 100ms;
}
.hm-cta-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); }

/* ── Sidebar nav: bold, roomy, obvious ─────────────────── */
.nav { gap: 6px; padding: 16px 12px; }
.nav-item {
  padding: 11px 12px;
  border-radius: 12px;
  border: 2px solid transparent;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  gap: 12px;
}
.nav-item:hover { background: rgba(0,82,255,0.06); }
.nav-item.active {
  background: rgba(0,82,255,0.08);
  border: 2px solid rgba(0,82,255,0.30);
  color: var(--primary2);
}
.nav-icon { width: 19px; height: 19px; }

/* Mobile bottom nav to match */
.mobile-nav-item { font-weight: 700; }
.mobile-nav-item.active { font-weight: 800; }

/* ── Cards: bold outlines, no floaty shadows ───────────── */
.card { border-width: 2px; border-radius: 16px; }

/* Home page surfaces */
.hm-hero-left, .hm-hero-visual {
  border-width: 2px;
  border-radius: 16px;
}
.hm-drop-tile { border-width: 2px; border-radius: 16px; }

/* Tool tiles press down like Duolingo lesson tiles */
.hm-tool-card {
  border-width: 2px;
  border-radius: 16px;
  box-shadow: 0 3px 0 var(--edge-soft);
  transition: border-color 150ms, background 150ms, box-shadow 100ms, transform 100ms;
}
.hm-tool-card:hover { box-shadow: 0 3px 0 var(--edge-soft-h); }
.hm-tool-card:active { transform: translateY(3px); box-shadow: 0 0 0 var(--edge-soft); }
.hm-tool-ico { border-radius: 14px; }

/* Steps read as a path, not chips */
.hm-step { font-weight: 700; }

/* ── Usage bar: thick and juicy, with the Duolingo shine ── */
.hm-usage-track {
  height: 16px;
  border-radius: 100px;
  border: 2px solid var(--edge-soft);
  background: #F0F2F5;
}
.hm-usage-fill {
  position: relative;
  border-radius: 100px;
}
.hm-usage-fill::after {
  content: '';
  position: absolute;
  top: 3px; left: 8px; right: 8px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.30);
}
[data-theme="dark"] .hm-usage-track { background: var(--card2); }

/* Mobile: tools render as one joined list — rows go flat, the container
   carries the bold border. Undo the per-card tile treatment entirely. */
@media (max-width: 640px) {
  .hm-tool-card,
  .hm-tool-card:hover,
  .hm-tool-card:active {
    border-width: 0;
    border-bottom-width: 1px;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }
  .hm-tool-card:last-child { border-bottom-width: 0; }
  .hm-tools-grid { border-width: 2px; border-radius: 16px; }
}