/* ===========================
   Subject Home — Mobile First
   Scope everything to #subject-home
=========================== */
#subject-home {
  --bg: #f6f8fc;
  --card: #ffffff;
  --ink: #171717;
  --muted: #64748b;
  --line: #e5e7eb;
  --primary: #2563eb;
  --primary-100: #eff6ff;
  --primary-200: #dbeafe;
  --accent: #10b981;
  --accent-100: #ecfdf5;
  --accent-200: #d1fae5;
  --warning: #f59e0b;
  --warning-100: #fff7ed;
  --warning-200: #fed7aa;
  --chip: #f1f5f9;

  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--ink);
  background: var(--primary-100);
  min-height: 100svh;
  padding: 12px 16px 96px;
}

/* Utility */
#subject-home .layer { display:block; }
#subject-home .grid2 { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#subject-home .pill { display:inline-block; border-radius:999px; padding:.45rem .9rem; font-size:14px; line-height:1; white-space:nowrap; }
#subject-home .bullets { margin: 8px 0 0 16px; }
#subject-home .bullets li { margin: 4px 0; }
#subject-home .mini { font-size: 14px; }
#subject-home a { color: inherit; text-decoration: none; }
#subject-home *:focus-visible { outline: 2px dashed var(--primary); outline-offset: 2px; }

/* Cards */
#subject-home .card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 16px;
  margin: 12px 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
#subject-home .card-head {
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
}
#subject-home .btn-primary,
#subject-home .btn-start {
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--primary); color:#fff; border-radius: 14px; padding: 10px 16px; font-weight:600; border:0; cursor:pointer;
}
#subject-home .btn-outline {
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--chip); color: var(--primary); border: 1px solid var(--primary-200);
  border-radius: 12px; padding: 8px 12px; font-weight:600; cursor:pointer;
}

/* Header */
#subject-home .sh-header {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 14px 14px 16px;
  margin-top: 6px;
}
#subject-home .vwpapptivate-layer-back {
  width: 44px; height: 44px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--chip); color: var(--primary); font-size: 22px; display:inline-flex; align-items:center; justify-content:center;
}
#subject-home .sh-title { display:flex; align-items:center; gap: 12px; margin-top: 8px; }
#subject-home .sh-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--primary); object-fit: cover; }
#subject-home .subject-name { font-size: 22px; line-height:1.2; margin: 0; }
#subject-home .unit-switcher { margin-top: 10px; display:flex; gap: 6px; background: var(--chip); padding: 6px; border-radius: 999px; width: fit-content; }
#subject-home .unit-switcher .unit-tab {
  border:0; background: transparent; padding: 8px 14px; border-radius: 999px; font-weight:700; color: var(--muted); cursor:pointer;
}
#subject-home .unit-switcher .unit-tab.active { background: var(--primary); color: #fff; }

/* Progress strip */
#subject-home .progress-strip {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  display: grid; grid-template-columns: repeat(4, 1fr); padding: 12px 8px; margin: 12px 0;
}
#subject-home .progress-item { text-align:center; padding: 6px 10px; border-inline-end:1px solid var(--line); }
#subject-home .progress-item:last-child { border-inline-end: 0; }
#subject-home .progress-item strong { display:block; font-size:18px; }
#subject-home .progress-item span {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
    white-space: nowrap;
}

/* Quick actions */
#subject-home .quick-actions {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 12px; margin: 12px 0;
  display:grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
#subject-home .qa-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    background: var(--accent-100);
    border: 1px solid var(--accent-200);
    color: #0f766e;
    border-radius: 16px;
    padding: 12px;
    font-weight: 600;
}
#subject-home .qa-btn[data-action="ask-ai"] { background: var(--primary-100); border-color: var(--primary-200); color: var(--primary); }

/* Smart nudge */
#subject-home .smart-nudge h2 { font-size: 16px; margin: 0 0 6px; }
#subject-home .smart-nudge p { color: var(--muted); margin: 0 0 10px; }

/* Syllabus browser */
#subject-home .syllabus h2 { font-size: 18px; margin: 0; }
#subject-home .syllabus .syllabus-tree { list-style: none; padding: 0; margin: 8px 0 0; }
#subject-home .syllabus .module { border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 8px; }
#subject-home .syllabus .toggle {
  width: 100%; text-align: left; background: transparent; border: 0; padding: 10px 8px;
  font-weight:700; color: var(--ink); border-radius: 12px; cursor: pointer;
}
#subject-home .syllabus .topics { list-style: none; padding: 0 8px 8px 8px; margin: 0; }
#subject-home .syllabus .topics[hidden] { display: none !important; }
#subject-home .syllabus .topic {
  display:flex; align-items:center; justify-content:space-between; gap: 10px;
  padding: 8px 10px; border:1px solid var(--line); border-radius: 12px; margin: 8px 0;
}
#subject-home .syllabus .topic-title { font-size: 15px; font-weight:600; }
#subject-home .syllabus .topic-actions { display:flex; align-items:center; gap: 8px; }
#subject-home .syllabus .topic-actions .link {
  padding: 6px 10px; border-radius: 999px; font-size: 13px; font-weight:700;
  border:1px solid var(--primary-200); color: var(--primary); background: var(--primary-100);
}
#subject-home .syllabus .pill-done {
  background: #f8fafc; color: var(--muted); border:1px solid var(--line); padding: 6px 10px; border-radius: 999px; font-size: 12px;
}

/* Practice hub */
#subject-home .practice h2 { font-size: 18px; margin: 0 0 8px; }
#subject-home .practice .tile {
  display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius: 16px; padding: 14px;
  background: #fff; font-weight:600;
}

/* Past papers */
#subject-home .past-papers h2 { font-size: 18px; margin: 0; }
#subject-home .past-papers .filters { display:flex; align-items:center; gap: 8px; }
#subject-home .past-papers select {
  appearance: none; background: var(--chip); border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; color: var(--muted); font-weight:600;
}
#subject-home .past-papers .pp-list { list-style: none; padding: 0; margin: 10px 0 0; }
#subject-home .past-papers .pp-list li {
  display:flex; align-items:center; justify-content:space-between; padding: 10px 8px; border-bottom:1px dashed var(--line);
}
#subject-home .past-papers .pp-list li:last-child { border-bottom: 0; }
#subject-home .past-papers .pp-list a { color: var(--primary); font-weight:700; }

/* AI Study Coach */
#subject-home .ai-coach h2 { font-size: 18px; margin: 0 0 8px; }
#subject-home .ai-templates { display:flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
#subject-home .ai-templates .chip {
  white-space: nowrap; background: var(--primary-100); border: 1px solid var(--primary-200); color: var(--primary);
  border-radius: 999px; padding: 8px 12px; font-weight:700; cursor:pointer;
}

/* Social & Leaderboard */
#subject-home .social .feed-preview { list-style:none; padding: 0; margin: 8px 0; }
#subject-home .social .feed-preview .post { padding: 6px 0; border-bottom: 1px dashed var(--line); }
#subject-home .social .feed-preview .post:last-child { border-bottom: 0; }
#subject-home .leaderboard { margin-top: 8px; }
#subject-home .leaderboard.mini {
  background: #f9fafb; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px;
}

/* Challenges & Streaks */
#subject-home .challenges .tile {
  display:flex; align-items:center; gap:10px; border-radius: 16px; padding: 14px; font-weight:600;
}
#subject-home .challenges .tile:first-child { background: var(--accent-100); border: 1px solid var(--accent-200); color:#0f766e; }
#subject-home .challenges .tile:last-child { background: var(--warning-100); border: 1px solid var(--warning-200); color:#b45309; }

/* Resources */
#subject-home .resources .grid2 { grid-template-columns: 1fr 1fr; }
#subject-home .resources .tile,
#subject-home .resources a {
  display:block; border:1px solid var(--line); border-radius: 14px; padding: 14px; background:#fafafa; font-weight:600; text-align:left;
}

/* Upgrade CTA (toggle via JS depending on plan) */
#subject-home .upgrade {
  background: #f0f9ff; border:1px solid #bfdbfe;
}
#subject-home [data-visibility="non-subscribers"] { display: none; }

/* Footer */
#subject-home .sh-footer {
  display:flex; gap: 16px; flex-wrap:wrap; padding: 8px 0 24px; color: var(--muted); font-size: 13px;
}

/* Responsive tweaks */
@media (min-width: 480px) {
  #subject-home { max-width: 480px; margin: 0 auto; }
}
@media (prefers-color-scheme: dark) {
  #subject-home {
    --bg:#0b1220; --card:#121a2a; --ink:#e5e7eb; --muted:#94a3b8; --line:#1f2937;
    --chip:#111827; --primary-100:#0b284f; --primary-200:#0f3a7a; --accent-100:#0c2f26; --accent-200:#0e3a2e; --warning-100:#2a1a08; --warning-200:#4a2a0e;
  }
  #subject-home .qa-btn { color:#a7f3d0; }
  #subject-home .resources a { background:#0f172a; }
}