/* ==========================================================================
   Revision Hub — landing page for the Revision mode (third mode).
   Namespaced under .revhub- so it can't collide with app styles.
   The OSCE Revision Kit's own launch button is hidden here because the kit
   is opened from the hub instead.
   ========================================================================== */

/* Hide the revision kit's self-added launcher — we open it from the hub */
.nbtn.oscup-launch,
.oscup-fab { display: none !important; }

.revhub-wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 8px 4px 40px;
}

.revhub-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 28px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(99,102,241,0.14), rgba(16,185,129,0.12));
  border: 1px solid rgba(120,120,160,0.18);
  margin-bottom: 22px;
}
.revhub-hero-txt { flex: 1 1 auto; }
.revhub-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
}
.revhub-title {
  margin: 4px 0 6px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
}
.revhub-sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  opacity: .82;
  max-width: 60ch;
}
.revhub-hero-ico {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  color: #6366f1;
  opacity: .9;
}
.revhub-hero-ico svg { width: 56px; height: 56px; }

.revhub-section-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .6;
  margin: 6px 4px 12px;
}

.revhub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.revhub-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 20px 20px 22px;
  border-radius: 16px;
  border: 1px solid rgba(120,120,160,0.22);
  background: var(--card-bg, rgba(255,255,255,0.03));
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  position: relative;
  overflow: hidden;
  color: inherit;
  font: inherit;
}
.revhub-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.16);
  border-color: rgba(99,102,241,0.5);
}
.revhub-card:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }

.revhub-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: #6366f1;
}
.revhub-card.revhub-kit::before      { background: linear-gradient(#6366f1, #8b5cf6); }
.revhub-card.revhub-quiz::before     { background: #0ea5e9; }
.revhub-card.revhub-daily::before    { background: #10b981; }
.revhub-card.revhub-stations::before { background: #f59e0b; }

.revhub-card-badge {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(99,102,241,0.16);
  color: #6366f1;
  margin-bottom: 2px;
}
.revhub-card-t { font-size: 18px; font-weight: 700; }
.revhub-card-s { font-size: 13.5px; line-height: 1.45; opacity: .78; }

@media (max-width: 560px) {
  .revhub-hero { flex-direction: column; align-items: flex-start; padding: 20px; }
  .revhub-hero-ico { width: 44px; height: 44px; }
  .revhub-title { font-size: 24px; }
}

/* Quick Rev — the one-page summary rendered inline on a topic page.
   (rev-sheet-paper was designed for the print/modal; constrain it here.) */
.qrev-sheet-wrap {
  max-width: 940px;
  margin: 6px auto 44px;
}
.qrev-sheet-wrap .rev-sheet-paper {
  border-radius: 14px;
  border: 1px solid rgba(120,120,160,0.25);
  box-shadow: 0 8px 30px rgba(0,0,0,0.10);
}

/* ── Toolbar declutter / layout tweaks ─────────────────────────────────── */
/* Remove the language (EN/AR) toggle from the toolbar */
#langBtn { display: none !important; }

/* Profile item in the sidebar (above Home) */
.sb-item.sb-profile {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sb-item.sb-profile .sb-profile-ico {
  display: inline-flex;
  opacity: .8;
}

/* Quick Rev toggle on the topic page (sits next to the print-sheet button) */
.qrev-topic-btn { display: inline-flex; align-items: center; gap: 6px; }
body.qrev .qrev-topic-btn { background: var(--gn, #059669); color: #fff; border-color: var(--gn, #059669); }

/* Exit control shown at the top of the inline one-page summary */
.qrev-exit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(120,120,160,0.3);
  background: var(--card-bg, rgba(255,255,255,0.04));
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.qrev-exit-btn:hover { border-color: #6366f1; }

/* ── Home dashboard: 4-box row (desktop) ───────────────────────────────────
   study plan · overall progress · tools · study lists, side by side. */
.dh-focus.dh-quad {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1320px;
  align-items: stretch;
}
.dh-focus.dh-quad > .dh-card,
.dh-focus.dh-quad > .plhp {
  margin: 0 !important;
  height: 100%;
  box-sizing: border-box;
}
/* Stack the Tools buttons vertically (under each other), not side by side */
.dh-tools .dh-actions { grid-template-columns: 1fr; }
@media (max-width: 1100px) {
  .dh-focus.dh-quad { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .dh-focus.dh-quad { grid-template-columns: 1fr; }
}

/* ── Footer: Instagram + Feedback ──────────────────────────────────────── */
.credit-footer .footer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 14px 0 20px;
}
.footer-ig {
  display: inline-flex;
  color: var(--tx3, #94a3b8);
  transition: color .15s ease, transform .15s ease;
}
.footer-ig:hover { color: #e1306c; transform: translateY(-1px); }
.footer-feedback {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--tx3, #94a3b8);
  background: none;
  border: 1px solid rgba(120,120,160,0.28);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.footer-feedback:hover { color: var(--ac, #4f46e5); border-color: var(--ac, #4f46e5); }

/* Per-topic Feedback button (sits in the topic action row) */
.topic-feedback-btn { display: inline-flex; align-items: center; gap: 6px; }
.topic-feedback-btn:hover { border-color: var(--ac, #4f46e5) !important; color: var(--ac, #4f46e5) !important; }