/* ================================
   Home.css — Pro-Quizzers (mobile-first)
   - Hero + stylish search pill
   - Daily Quizzes: Subject/Exam accordions
   - Users’ Quizzes: card grid with inline play
   - Mobile polish: sticky CTA, bigger tap targets
=================================== */

/* ===== Generic spacing ===== */
.section { margin-top:16px; }

/* ===== Hero ===== */
.hero{
  display:grid;
  grid-template-columns:1.4fr .8fr;
  gap:16px;
  align-items:center;
  margin:8px 0 4px;
}
.hero-left h1{
  margin:0 0 6px;
  font-size:1.6rem;
  line-height:1.25;
}
.hero-sub{
  margin:8px 0 0;
  color:var(--muted);
  font-size:.98rem;
}
.cta-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.hero-right{ display:grid; gap:10px; }
.btn.ghost{
  background:transparent;
  border:1px dashed var(--border);
}

/* ===== Stylish Search Bar with Icon ===== */
.search-home{
  display:flex; align-items:center;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px 6px 4px 12px; /* extra left for icon */
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
  transition:border-color .2s, box-shadow .2s;
  position:relative;
  margin-top:10px;
}
.search-home:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(59,130,246,.25);
}
.search-home::before{
  content:"🔍";
  font-size:1rem;
  margin-right:8px;
  opacity:.7;
  pointer-events:none;
}
.search-home input{
  flex:1; border:none; background:transparent;
  padding:10px 12px;
  font-size:1rem; color:var(--text);
  border-radius:999px;
}
.search-home input::placeholder{ color:var(--muted); font-style:italic; }
.search-home button{
  border-radius:999px; padding:8px 16px;
  font-weight:600; font-size:.95rem;
  background:var(--accent); color:#fff; border:none;
  transition:background .2s, transform .15s;
}
.search-home button:hover{ background:var(--accent-hover); transform:translateY(-1px); }
.search-home button:active{ transform:translateY(0); }

/* smaller search for section heads */
.search-home.mini{
  max-width:420px;
  margin:0;
  box-shadow:none;
}
.section-tools{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}

/* ===== Section head ===== */
.section-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}

/* =========================================
   Daily Quizzes — Subject / Exam Accordion
   ========================================= */
.subject-accordion{ display:grid; gap:12px; }

.subject{
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  background:var(--card);
}
.subject-bar{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:12px 14px;
  background:var(--surface);
  font-weight:800;
  border-bottom:1px solid var(--border);
  position:relative; padding-right:40px;
}
.subject-bar::-webkit-details-marker{ display:none; }
.subject[open] .subject-bar{ background:var(--card); }
.subject-name{ font-size:1rem; }
.subject-count{
  font-size:.8rem; padding:3px 8px; border-radius:999px;
  border:1px solid var(--border); color:var(--muted);
}

/* plus/minus indicators */
.subject-bar::after,
.exam-bar::after{
  content:"＋";
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-weight:900; opacity:.7; line-height:1;
}
.subject[open] > .subject-bar::after { content:"－"; opacity:.9; }

.exam{ border-top:1px solid var(--border); }
.exam-bar{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:10px 14px;
  background:var(--surface);
  font-weight:700; color:var(--text);
  border-top:1px solid var(--border);
  position:relative; padding-right:40px;
}
.exam-bar::-webkit-details-marker{ display:none; }
.exam-name{ font-size:.95rem; }
.exam-count{
  min-width:26px; text-align:center; font-size:.78rem;
  padding:2px 6px; border-radius:999px;
  background:rgba(59,130,246,.10); color:var(--accent);
  border:1px solid var(--border);
}

/* Tests grid — compact chips (Daily) */
.tests-grid{
  display:grid; gap:10px; padding:12px;
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
.test-chip{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid var(--border); background:var(--card);
  border-radius:10px; padding:8px 10px;
  transition:background .2s, transform .15s, border-color .2s;
}
.test-chip:hover{ background:var(--surface); transform:translateY(-1px); }
.test-chip__name{
  flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-weight:600; font-size:.95rem; line-height:1.25;
}
.test-chip .btn.xs{
  padding:6px 10px; font-size:.85rem; border-radius:8px; min-height:36px;
}

/* =========================================
   Users’ Quizzes — Card Grid
   ========================================= */
.test-card-grid{
  display:grid; gap:12px; padding:12px;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.test-card{
  display:flex; flex-direction:column; gap:8px;
  border:1px solid var(--border); background:var(--card);
  border-radius:12px; padding:12px;
  transition:background .2s, transform .15s, border-color .2s;
}
.card-soft{ box-shadow:0 6px 18px rgba(0,0,0,.06); border:1px solid var(--border); }
.test-card:hover{ background:var(--surface); transform:translateY(-2px); }
.test-card__head{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 8px; border-radius:999px;
  font-size:.75rem; font-weight:700;
  border:1px solid var(--border); color:var(--muted); background:var(--surface);
}
.test-card__title{
  font-weight:800; font-size:1rem; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  min-height:2.6em;
}
.meta{ font-size:.9rem; }
.actions-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; justify-content:flex-end; }

/* Inline play */
.uq-step { display:none; transition: opacity .18s ease; }
.uq-step.is-active { display:block; animation: fadeIn .18s ease; }
@keyframes fadeIn { from {opacity:0} to {opacity:1} }
.qtext{ font-weight:700; margin-bottom:6px; font-size:1rem; line-height:1.35; }
.table-wrap{ overflow:auto; border-radius:10px; }
.tests-grid.two-col{ grid-template-columns:1fr 1fr; }
/* preserve newlines in display areas */
.qtext,
.explain,
.test-chip__name { white-space: pre-wrap; line-height: 1.35; }


.like-share.strip{
  margin-top:8px;
  display:flex; gap:10px; justify-content:flex-end; align-items:center;
}
.badge-new{
  display:inline-block;
  margin-left:6px;
  font-size:.7rem;
  padding:2px 6px;
  border-radius:6px;
  font-weight:700;
  background:#e6f0ff;
  color:#2f5aff;
  vertical-align:middle;
}


/* Sticky CTA on phones */
.sticky-cta-wrap { position: relative; }

/* =========================================
   Tablet tweaks (≤ 860px)
   ========================================= */
@media (max-width:860px){
  .hero{ grid-template-columns:1fr; }
  .hero-right{ order:-1; }
  .subject-accordion{ gap:10px; }
  .subject-bar{ padding:11px 12px; }
  .exam-bar{ padding:9px 12px; }

  .tests-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .test-card-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
}

/* =========================================
   Phone compact (≤ 640px)
   ========================================= */
.only-sm { display:none; }
.hide-sm { display:initial; }

@media (max-width:640px){
  .only-sm { display:initial; }
  .hide-sm { display:none; }

  .section{ margin-top:12px; }
  .hero{ gap:10px; margin:6px 0 2px; }
  .hero-left h1{ font-size:clamp(1.1rem, 4.5vw, 1.35rem); line-height:1.25; }
  .hero-sub{ font-size:.92rem; }

  .search-home{ padding:4px 6px 4px 12px; }
  .search-home input{ padding:11px 10px; font-size:1rem; }
  .search-home button{ padding:10px 14px; font-size:.98rem; }
  .cta-row .btn{ flex:1; }

  .subject{ border-radius:10px; }
  .subject-bar{ padding:12px; font-size:1rem; padding-right:36px; }
  .exam-bar{ padding:10px 12px; font-size:.94rem; padding-right:36px; }
  .subject-count{ font-size:.76rem; padding:2px 6px; }
  .exam-count{ font-size:.72rem; padding:2px 6px; }

  .tests-grid{ grid-template-columns:1fr !important; gap:8px; padding:10px; }
  .test-chip{ padding:10px 12px; border-radius:12px; }
  .test-chip .btn.xs{ min-height:40px; }
  .test-chip__name{ font-size:.98rem; }

  .test-card-grid{ grid-template-columns:1fr; gap:8px; padding:10px; }
  .test-card{ padding:10px; }
  .test-card__title{ font-size:.95rem; }

  .section-tools{ width:100%; justify-content:space-between; }
  .search-home.mini{ flex:1; max-width:none; }

  .sticky-cta-wrap .cta-row.compact{
    position:sticky;
    bottom:0;
    z-index:2;
    background:linear-gradient(to top, var(--card) 70%, transparent);
    padding-top:8px;
    margin-top:10px;
    border-top:1px solid var(--border);
  }
  .like-share.strip{
    justify-content:space-between;
    padding:8px 0;
    border:none; background:transparent;
  }
  .subject-bar::after, .exam-bar::after{ right:10px; font-size:1.1rem; }

  .card-soft{ box-shadow:0 8px 20px rgba(0,0,0,.08); }
}

/* Extra-narrow phones */
@media (max-width:380px){
  .test-chip__name{ font-size:.95rem; }
  .table-wrap{ overflow-x:auto; }
}

/* ===== Legacy compatibility (if old markup renders) ===== */
.subject-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.subject-card{ border:1px solid var(--border); border-radius:12px; padding:12px; background:var(--card); }
.subject-title{ font-weight:700; margin-bottom:6px; }
.exam-title{ font-size:.95rem; font-weight:700; margin:8px 0 6px; color:#334155; }
html[data-theme="dark"] .exam-title{ color:#cbd5e1; }

.test-btn-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; }
.test-btn{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--border); border-radius:10px;
  background:var(--card); padding:8px 10px;
}
.test-btn:hover{ background: var(--surface); }
.test-btn__name{
  max-width:320px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-weight:600;
}
.badge-new,.badge-old{ margin-left:4px; font-size:.75rem; padding:2px 6px; border-radius:6px; }
.badge-new{ background:#e6f0ff; color:#2f5aff; }
.badge-old{ background:#6b7280; color:#fff; }

@media (max-width:860px){
  .subject-grid{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; }
}
@media (max-width:640px){
  .test-btn{ flex-direction:column; align-items:flex-start; width:100%; }
  .test-btn__name{ max-width:100%; }
  .cta-row .btn{ flex:1; }
}

.top-cta{
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 2;
  padding-top: 6px;
}

/* ===========================
   Soft/cute pills + mini buttons
   (no HTML changes needed)
   =========================== */

/* Base pill already exists — soften it a bit */
.test-card__head .pill{
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
}

/* Map the 4 pills by order:
   1) Subject  2) Difficulty  3) Played  4) Posted At */
.test-card__head .pill:nth-child(1){ /* Subject */
  background: rgba(59,130,246,.12);    /* blue */
  border-color: rgba(59,130,246,.25);
  color: #1d4ed8;
}
.test-card__head .pill:nth-child(2){ /* Difficulty */
  background: rgba(168,85,247,.12);    /* purple */
  border-color: rgba(168,85,247,.25);
  color: #7e22ce;
}
.test-card__head .pill:nth-child(3){ /* Played */
  background: rgba(34,197,94,.12);     /* green */
  border-color: rgba(34,197,94,.25);
  color: #166534;
}
.test-card__head .pill:nth-child(4){ /* Posted at */
  background: rgba(234,179,8,.14);     /* amber */
  border-color: rgba(234,179,8,.28);
  color: #92400e;
}

/* Dark mode tweaks: keep contrast, soften borders */
html[data-theme="dark"] .test-card__head .pill:nth-child(1){
  background: rgba(59,130,246,.18); border-color: rgba(59,130,246,.35); color:#93c5fd;
}
html[data-theme="dark"] .test-card__head .pill:nth-child(2){
  background: rgba(168,85,247,.2); border-color: rgba(168,85,247,.35); color:#d8b4fe;
}
html[data-theme="dark"] .test-card__head .pill:nth-child(3){
  background: rgba(34,197,94,.2); border-color: rgba(34,197,94,.35); color:#86efac;
}
html[data-theme="dark"] .test-card__head .pill:nth-child(4){
  background: rgba(234,179,8,.22); border-color: rgba(234,179,8,.38); color:#fde68a;
}

/* Mini buttons inside cards: soft outlines + hover lift */
.test-card .btn.xs.outline{
  background: rgba(59,130,246,.08);
  border-color: rgba(59,130,246,.22);
  color: var(--accent);
  transition: transform .15s ease, box-shadow .15s ease, background .15s;
}
.test-card .btn.xs.outline:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
  background: rgba(59,130,246,.12);
}

/* Success-ish buttons (Submit) — soft green */
.test-card .btn.xs.success{
  background: rgba(34,197,94,.16);
  color: #14532d;
  border: 1px solid rgba(34,197,94,.28);
}
.test-card .btn.xs.success:hover{
  background: rgba(34,197,94,.22);
}

/* Prev / Next — keep them visible but gentle */
.sticky-cta-wrap .btn.xs.outline.prev,
.sticky-cta-wrap .btn.xs.outline.next{
  background: rgba(148,163,184,.10);   /* slate */
  border-color: rgba(148,163,184,.28);
  color: #475569;
}
html[data-theme="dark"] .sticky-cta-wrap .btn.xs.outline.prev,
html[data-theme="dark"] .sticky-cta-wrap .btn.xs.outline.next{
  color:#cbd5e1;
}
/* Share & Favorite — give them their own tint */
.actions-row .share-btn.btn.xs.outline{
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.25);
  color:#1d4ed8;
}
.actions-row .fav-toggle.btn.xs.outline{
  background: rgba(234,179,8,.12);
  border-color: rgba(234,179,8,.3);
  color:#92400e;
}

/* Like/Dislike — gentle green/red */
.like-share.strip [data-action="like"].btn.xs{
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.25);
  color:#166534;
}
.like-share.strip [data-action="dislike"].btn.xs{
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.28);
  color:#991b1b;
}

/* Full View link — soft indigo */
.like-share.strip a.btn.xs.outline{
  background: rgba(99,102,241,.12);
  border: 1px solid rgba(99,102,241,.28);
  color:#3730a3;
}

/* Make tiny badges match the vibe */
.badge-new{
  background:#eef2ff;
  color:#3847c6;
  border: 1px solid rgba(99,102,241,.28);
}

/* Keyboard focus: clear + consistent */
.btn:focus-visible,
.pill:focus-visible,
.test-chip:focus-visible,
label.test-chip:has(input:focus-visible){
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Reduced motion: tone down lifts/fades for folks who prefer it */
@media (prefers-reduced-motion: reduce){
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

.btn:active { transform: translateY(0); filter: saturate(.95); }
.test-card:active { transform: translateY(-1px) scale(.998); }