/* ============================================================
   Nbeeeh — design tokens
   Palette: Golden Summer Glow
   Type:    Fraunces (en) + Thmanyah Sans (ar)
   ============================================================ */

@font-face {
  font-family: 'Thmanyah';
  src: url('../fonts/thmanyahsans-Light.woff2') format('woff2');
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: 'Thmanyah';
  src: url('../fonts/thmanyahsans-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Thmanyah';
  src: url('../fonts/thmanyahsans-Medium.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Thmanyah';
  src: url('../fonts/thmanyahsans-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Thmanyah';
  src: url('../fonts/thmanyahsans-Black.woff2') format('woff2');
  font-weight: 900; font-display: swap;
}

:root {
  /* Golden Summer Glow */
  --paper:       #FAF0CA;
  --paper-warm:  #F4E5A8;
  --sage-soft:   #FBE8A5;
  --sage:        #F4D35E;
  --tan:         #EE964B;
  --tan-deep:    #F95738;

  /* Ink & rules */
  --ink:         #0D3B66;
  --ink-soft:    #3D5B85;
  --ink-faint:   #8DA0BC;
  --rule:        #E8DDB0;

  /* States */
  --correct:     #2D7A4F;
  --correct-bg:  rgba(45, 122, 79, 0.12);
  --wrong:       #A03A2A;
  --wrong-bg:    rgba(160, 58, 42, 0.10);

  /* Type */
  --display-en:  'Fraunces', Georgia, serif;
  --body-en:     'Inter', system-ui, sans-serif;
  --type-ar:     'Thmanyah', system-ui, sans-serif;
  --display:     var(--display-en);
  --body:        var(--body-en);
}
[dir="rtl"] {
  --display: var(--type-ar);
  --body:    var(--type-ar);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(238, 150, 75, 0.08), transparent 70%),
    radial-gradient(ellipse at bottom right, rgba(244, 211, 94, 0.10), transparent 60%);
}
.app { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; padding: 28px 22px 80px; }

/* ===== Buttons ===== */
.btn {
  font-family: var(--body); font-size: 14px; font-weight: 500;
  letter-spacing: 0.01em;
  padding: 14px 26px;
  background: var(--ink); color: var(--paper);
  border: none; border-radius: 999px;
  cursor: pointer; transition: color 0.2s, transform 0.18s;
  display: inline-flex; align-items: center; gap: 8px;
  position: relative; overflow: hidden; isolation: isolate;
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--tan-deep);
  transform: translateX(-101%);
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
[dir="rtl"] .btn::before { transform: translateX(101%); }
.btn:hover { transform: translateY(-1px); }
.btn:hover::before, [dir="rtl"] .btn:hover::before { transform: translateX(0); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn:disabled::before { display: none; }
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-ghost::before { background: var(--tan-deep); }
.btn-ghost:hover { color: var(--paper); transform: translateY(-1px); }
.btn-text {
  background: none; border: none; padding: 0;
  color: var(--ink-soft); cursor: pointer;
  font: inherit;
}
.btn-text:hover { color: var(--tan-deep); }
[dir="rtl"] .btn { font-family: var(--type-ar); font-weight: 500; }

/* Click ripple — applied via JS to any .btn / .today-cta / .lang-toggle / .signout-btn / .pill-btn / .option / .btn-link */
.ripple-fx {
  position: absolute; border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 0;
  animation: rippleOut 0.6s ease-out forwards;
}
@keyframes rippleOut {
  0%   { width: 0; height: 0; opacity: 0.6; }
  100% { width: 600px; height: 600px; opacity: 0; }
}

/* ===== Masthead ===== */
.masthead {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 40px;
}
.brand-lockup {
  display: inline-flex; align-items: center; gap: 10px;
  background: none; border: none; padding: 0;
  color: var(--ink); cursor: pointer; text-decoration: none;
  line-height: 1;
  transition: opacity 0.2s;
}
.brand-lockup:hover { opacity: 0.75; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: auto;
  color: inherit;
}
.brand-mark svg {
  width: 100%; height: auto; display: block;
  fill: currentColor;
}
.brand-wordmark {
  font-family: var(--type-ar); /* Thmanyah — same wordmark face in both languages */
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0;
  color: inherit;
}
[dir="rtl"] .brand-wordmark { font-weight: 700; font-size: 24px; }
@media (max-width: 480px) {
  .brand-mark { width: 30px; }
  .brand-wordmark { font-size: 19px; }
  [dir="rtl"] .brand-wordmark { font-size: 21px; }
}

/* Primary nav — Dashboard / Library. Engulf-wave hover unifies with utility buttons. */
.masthead-nav {
  display: flex; gap: 10px; align-items: center;
  margin-inline-start: 8px;
}
.nav-link {
  background: none; border: 1px solid var(--rule);
  padding: 8px 16px; border-radius: 999px;
  font-family: var(--body); font-size: 13px; font-weight: 500;
  color: var(--ink-soft); letter-spacing: 0.02em;
  cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.nav-link::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--tan-deep);
  transform: translateX(-101%);
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
[dir="rtl"] .nav-link::before { transform: translateX(101%); }
.nav-link:hover {
  color: var(--paper);
  border-color: var(--tan-deep);
}
.nav-link:hover::before,
[dir="rtl"] .nav-link:hover::before { transform: translateX(0); }
.nav-link.is-current {
  color: var(--ink);
  border-color: var(--tan-deep);
}
[dir="rtl"] .nav-link {
  font-family: var(--type-ar); font-size: 14px; font-weight: 500; letter-spacing: 0;
}

/* Utility actions — lang toggle + sign out — pushed to the far end */
.masthead-actions { display: flex; gap: 10px; align-items: center; margin-inline-start: auto; }
.lang-toggle, .signout-btn {
  background: none; border: 1px solid var(--rule); color: var(--ink-soft);
  font-family: var(--body); font-size: 12px; font-weight: 500;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s; letter-spacing: 0.04em;
  position: relative; overflow: hidden; isolation: isolate;
}
.lang-toggle::before, .signout-btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--tan-deep);
  transform: translateX(-101%);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
[dir="rtl"] .lang-toggle::before,
[dir="rtl"] .signout-btn::before { transform: translateX(101%); }
.lang-toggle:hover, .signout-btn:hover {
  border-color: var(--tan-deep); color: var(--paper);
}
.lang-toggle:hover::before, .signout-btn:hover::before,
[dir="rtl"] .lang-toggle:hover::before,
[dir="rtl"] .signout-btn:hover::before { transform: translateX(0); }
/* Toggle always displays the opposite-script character (ع in EN, EN in AR),
   so it always uses Thmanyah — which renders both Arabic and Latin glyphs cleanly. */
.lang-toggle {
  font-family: var(--type-ar);
  font-size: 14px;
}
[dir="rtl"] .signout-btn {
  font-family: var(--type-ar); font-size: 13px;
}

/* Compact on narrow phones — keep nav, shrink utility */
@media (max-width: 480px) {
  .masthead { gap: 10px; }
  .masthead-nav { margin-inline-start: 0; gap: 6px; }
  .nav-link { padding: 7px 12px; font-size: 12px; }
  .lang-toggle, .signout-btn { padding: 6px 10px; font-size: 11px; }
}

/* ===== Auth view ===== */
.auth-view { max-width: 380px; margin: 6vh auto 0; }
.auth-brand {
  text-align: center; margin-bottom: 36px;
}
.auth-brand .logo {
  font-family: var(--display); font-size: 44px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  font-variation-settings: 'SOFT' 100;
}
[dir="rtl"] .auth-brand .logo { font-family: var(--type-ar); font-weight: 900; font-size: 50px; letter-spacing: 0; text-transform: none; }
.auth-brand .tagline {
  color: var(--ink-soft); margin-top: 8px;
  font-size: 15px;
}
.auth-card {
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  padding: 32px 28px;
  border-radius: 6px;
}
.auth-card h2 {
  font-family: var(--display); font-size: 22px; font-weight: 500;
  margin-bottom: 24px;
}
[dir="rtl"] .auth-card h2 { font-family: var(--type-ar); font-weight: 700; font-size: 24px; }
.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 12px; font-weight: 500;
  margin-bottom: 6px; color: var(--ink-soft);
  letter-spacing: 0.04em;
}
[dir="rtl"] .field label { font-family: var(--type-ar); font-size: 14px; letter-spacing: 0; }
.field input, .field select {
  width: 100%; padding: 11px 14px;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 4px; font-family: var(--body); font-size: 15px;
  color: var(--ink); transition: border-color 0.15s;
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--tan);
}
[dir="rtl"] .field input, [dir="rtl"] .field select { font-family: var(--type-ar); font-size: 16px; }
.auth-submit { width: 100%; justify-content: center; margin-top: 8px; padding: 13px; }
.auth-toggle {
  text-align: center; margin-top: 18px; font-size: 14px;
  color: var(--ink-soft);
}
[dir="rtl"] .auth-toggle { font-family: var(--type-ar); font-size: 15px; }
.auth-error {
  background: var(--wrong-bg); color: var(--wrong);
  padding: 10px 14px; border-radius: 4px; font-size: 13px;
  margin-bottom: 14px;
}
[dir="rtl"] .auth-error { font-family: var(--type-ar); font-size: 14px; }
.auth-lang-switch {
  text-align: center; margin-top: 24px;
}
.local-badge {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 10px;
  background: rgba(238, 150, 75, 0.18);
  color: var(--tan-deep);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  border-radius: 3px;
}
[dir="rtl"] .local-badge { font-family: var(--type-ar); font-size: 12px; letter-spacing: 0; font-weight: 700; }

/* ===== Dashboard ===== */
.greeting {
  margin-bottom: 8px;
}
.greeting .eyebrow {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tan-deep); margin-bottom: 10px; font-weight: 500;
}
[dir="rtl"] .greeting .eyebrow { font-family: var(--type-ar); font-size: 14px; letter-spacing: 0; text-transform: none; }
.greeting h1 {
  font-family: var(--display);
  font-weight: 400; font-size: clamp(34px, 5.5vw, 50px);
  line-height: 1.05; letter-spacing: -0.015em;
  font-variation-settings: 'SOFT' 100;
}
[dir="rtl"] .greeting h1 { font-family: var(--type-ar); font-weight: 700; letter-spacing: 0; }
.greeting .subline {
  margin-top: 14px; color: var(--ink-soft); font-size: 17px;
  font-style: italic; max-width: 56ch;
}
[dir="rtl"] .greeting .subline { font-style: normal; }
.greeting-meta {
  margin-top: 12px; color: var(--ink-soft);
  font-size: 13px; letter-spacing: 0.04em;
}
[dir="rtl"] .greeting-meta { font-family: var(--type-ar); font-size: 15px; letter-spacing: 0; }
.greeting-meta .sep { opacity: 0.4; margin: 0 8px; }

/* ===== Today's reading featured card ===== */
.today-section { margin-top: 36px; margin-bottom: 36px; }
.today-section .section-head { margin: 0 0 14px; }
.today-card {
  background: var(--ink); color: var(--paper);
  border-radius: 8px;
  position: relative; overflow: hidden;
}
.today-image {
  width: 100%; aspect-ratio: 16 / 9;
  background-size: cover; background-position: center;
  background-color: var(--paper-warm); /* fallback while loading */
  border-bottom: 3px solid var(--tan);
  position: relative;
}
/* Soft fade at the bottom of the image into the navy below */
.today-image::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: linear-gradient(to bottom, transparent, rgba(13, 59, 102, 0.55));
  pointer-events: none;
}
.today-content {
  padding: 28px 32px;
  position: relative;
}
.today-content::before {
  content: ''; position: absolute;
  top: -40px; inset-inline-end: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(244, 211, 94, 0.15) 0%, transparent 70%);
  pointer-events: none;
}
.today-card.has-image .today-content { padding-top: 24px; }
.today-card-done .today-content { padding: 40px 32px; }
.today-badge {
  display: inline-block; background: var(--sage); color: var(--ink);
  padding: 4px 10px; border-radius: 3px;
  font-size: 10px; letter-spacing: 0.14em; font-weight: 700;
  margin-bottom: 18px;
}
[dir="rtl"] .today-badge { font-family: var(--type-ar); font-size: 12px; letter-spacing: 0; font-weight: 700; }
.today-badge.done { background: var(--tan); color: var(--paper); }
.today-category {
  font-size: 11px; letter-spacing: 0.16em; color: var(--tan);
  font-weight: 600; margin-bottom: 10px; text-transform: uppercase;
}
[dir="rtl"] .today-category { font-family: var(--type-ar); font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 700; }
.today-title {
  font-family: var(--display); font-weight: 500; font-size: 34px;
  line-height: 1.12; margin-bottom: 12px; color: var(--paper);
  font-variation-settings: 'SOFT' 100;
}
[dir="rtl"] .today-title { font-family: var(--type-ar); font-weight: 700; }
.today-subtitle {
  color: rgba(250, 240, 202, 0.75); font-style: italic;
  font-size: 16px; max-width: 52ch; margin-bottom: 24px; line-height: 1.5;
}
[dir="rtl"] .today-subtitle { font-style: normal; font-family: var(--type-ar); }
.today-actions {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.today-cta {
  background: var(--sage); color: var(--ink);
  padding: 13px 28px; border-radius: 999px; border: none;
  font: inherit; font-weight: 600; font-size: 14px;
  letter-spacing: 0.04em; cursor: pointer;
  transition: color 0.2s;
  position: relative; overflow: hidden; isolation: isolate;
}
.today-cta::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--tan-deep);
  transform: translateX(-101%);
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
[dir="rtl"] .today-cta::before { transform: translateX(101%); }
[dir="rtl"] .today-cta { font-family: var(--type-ar); font-size: 15px; letter-spacing: 0; }
.today-cta:hover { color: var(--paper); }
.today-cta:hover::before, [dir="rtl"] .today-cta:hover::before { transform: translateX(0); }
.today-meta {
  font-size: 12px; color: var(--ink-faint); letter-spacing: 0.04em;
}
[dir="rtl"] .today-meta { font-family: var(--type-ar); font-size: 14px; letter-spacing: 0; }
.today-meta .sep { margin: 0 8px; opacity: 0.4; }

/* ===== Stats row ===== */
.stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 0 0 36px;
}
.stats-row-4 { grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat-card {
  background: var(--paper-warm); border: 1px solid var(--rule);
  padding: 22px 20px; border-radius: 6px;
}
.stat-label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 10px; font-weight: 500;
}
[dir="rtl"] .stat-label { font-family: var(--type-ar); font-size: 13px; letter-spacing: 0; text-transform: none; }
.stat-value {
  font-family: var(--display); font-weight: 500;
  font-size: 38px; line-height: 1; color: var(--ink);
}
[dir="rtl"] .stat-value { font-family: var(--type-ar); font-weight: 700; }
.stats-row-4 .stat-value { font-size: 32px; }
.stat-value .unit { font-size: 16px; color: var(--ink-soft); font-weight: 400; margin-left: 4px; }
[dir="rtl"] .stat-value .unit { margin-left: 0; margin-right: 4px; }
.stat-sub {
  margin-top: 8px; font-size: 12px; color: var(--ink-faint);
  letter-spacing: 0.02em; line-height: 1.4;
}
[dir="rtl"] .stat-sub { font-family: var(--type-ar); font-size: 13px; letter-spacing: 0; }

/* ===== Activity grid ===== */
.activity-grid {
  margin: 0 0 36px; padding: 20px;
  background: var(--paper-warm); border: 1px solid var(--rule);
  border-radius: 6px;
}
.activity-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
}
.activity-label {
  font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 500;
}
[dir="rtl"] .activity-label { font-family: var(--type-ar); font-size: 14px; letter-spacing: 0; text-transform: none; }
.activity-legend {
  display: flex; gap: 14px; font-size: 11px; color: var(--ink-faint);
  letter-spacing: 0.04em;
}
[dir="rtl"] .activity-legend { font-family: var(--type-ar); font-size: 13px; letter-spacing: 0; }
.activity-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  vertical-align: middle;
}
.legend-dot.empty { background: var(--sage-soft); border: 1px solid var(--rule); }
.legend-dot.read  { background: var(--sage); }
.legend-dot.high  { background: var(--tan); }
.day-row {
  display: grid; grid-template-columns: repeat(30, 1fr); gap: 4px;
}
.day-cell {
  aspect-ratio: 1; border-radius: 2px;
  background: var(--sage-soft); transition: background 0.15s;
}
.day-cell.empty { background: var(--sage-soft); }
.day-cell.read  { background: var(--sage); }
.day-cell.high  { background: var(--tan); }
.day-cell.done  { background: var(--tan); } /* legacy class, kept for safety */
.day-cell.today { outline: 2px solid var(--ink); outline-offset: 1px; }

/* ===== Brain block ===== */
.brain-block {
  background: var(--paper-warm); border: 1px solid var(--rule);
  border-radius: 8px; padding: 32px;
  display: grid; grid-template-columns: 1fr auto; gap: 32px;
  align-items: center; margin-bottom: 36px;
}
/* RTL note: grid auto-flips column placement; the default 1fr auto puts
   text on the right and brain on the left, which is what we want. */
.brain-label {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600; margin-bottom: 12px;
}
[dir="rtl"] .brain-label { font-family: var(--type-ar); font-size: 13px; letter-spacing: 0; text-transform: none; }
.brain-headline {
  font-family: var(--display); font-weight: 500; font-size: 30px;
  line-height: 1.1; color: var(--ink); margin-bottom: 10px;
  font-variation-settings: 'SOFT' 100;
}
[dir="rtl"] .brain-headline { font-family: var(--type-ar); font-weight: 700; }
.brain-sub {
  color: var(--ink-soft); font-size: 14px; line-height: 1.5;
  max-width: 38ch;
}
[dir="rtl"] .brain-sub { font-family: var(--type-ar); font-size: 15px; }
.brain-viz {
  width: 200px; height: 200px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.brain {
  width: 100%; height: 100%;
  color: var(--ink); /* path fills use currentColor */
  transform-origin: center;
  animation: brainBreathe 4s ease-in-out infinite;
}
.brain-illustration { transition: opacity 0.6s ease; }
@keyframes brainBreathe {
  0%, 100% { transform: scale(var(--brain-scale, 1)); }
  50%      { transform: scale(calc(var(--brain-scale, 1) * 1.03)); }
}
.spark { animation: sparkle 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.spark.s2 { animation-delay: 0.8s; animation-duration: 2.8s; }
.spark.s3 { animation-delay: 1.6s; animation-duration: 3.2s; }
@keyframes sparkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
.brain-viz.glowing::before {
  content: ''; position: absolute; inset: 10px;
  background: radial-gradient(circle, rgba(238, 150, 75, 0.35) 0%, transparent 65%);
  animation: brainGlow 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes brainGlow {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* ===== Recent reads + categories (two-column) ===== */
.two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 36px;
}
.panel {
  background: var(--paper-warm); border: 1px solid var(--rule);
  padding: 22px; border-radius: 6px;
}
.panel-label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 16px; font-weight: 600;
}
[dir="rtl"] .panel-label { font-family: var(--type-ar); font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 700; }
.panel-empty {
  color: var(--ink-faint); font-size: 14px; font-style: italic; line-height: 1.5;
}
[dir="rtl"] .panel-empty { font-family: var(--type-ar); font-size: 15px; font-style: normal; }
.panel-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--rule); gap: 14px;
}
.panel-item:last-child { border-bottom: none; }
.panel-item-text { min-width: 0; flex: 1; }
.panel-item-title {
  font-family: var(--display); font-weight: 500; font-size: 16px;
  color: var(--ink); margin-bottom: 2px; line-height: 1.25;
  font-variation-settings: 'SOFT' 80;
}
[dir="rtl"] .panel-item-title { font-family: var(--type-ar); font-weight: 700; font-size: 17px; }
.panel-item-when { font-size: 12px; color: var(--ink-faint); letter-spacing: 0.02em; }
[dir="rtl"] .panel-item-when { font-family: var(--type-ar); font-size: 13px; }
.score-badge {
  flex-shrink: 0;
  font-size: 12px; font-weight: 700;
  padding: 4px 9px; border-radius: 3px;
  letter-spacing: 0.04em;
}
.score-badge.high { background: rgba(244, 211, 94, 0.5); color: var(--ink); }
.score-badge.mid  { background: rgba(238, 150, 75, 0.25); color: var(--tan-deep); }
[dir="rtl"] .score-badge { font-family: var(--type-ar); font-size: 13px; letter-spacing: 0; }
.cat { margin-bottom: 14px; }
.cat:last-child { margin-bottom: 0; }
.cat-h {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 5px;
}
.cat-name { font-size: 13px; font-weight: 500; color: var(--ink); }
[dir="rtl"] .cat-name { font-family: var(--type-ar); font-size: 15px; font-weight: 700; }
.cat-count { font-size: 12px; color: var(--ink-faint); letter-spacing: 0.02em; }
[dir="rtl"] .cat-count { font-family: var(--type-ar); font-size: 13px; }
.cat-bar { height: 6px; background: var(--paper); border-radius: 3px; overflow: hidden; }
.cat-bar-fill {
  height: 100%; background: var(--tan); border-radius: 3px;
  transition: width 0.5s ease;
}

/* ===== Dashboard bottom CTA ===== */
.dashboard-bottom { text-align: center; padding-top: 8px; }
.btn-link {
  background: none; border: none; color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 500;
  cursor: pointer; padding: 12px 20px;
  border-bottom: 1px solid var(--ink);
  position: relative; overflow: hidden; isolation: isolate;
  transition: color 0.2s, border-color 0.2s;
}
.btn-link::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--tan-deep);
  transform: translateX(-101%);
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
[dir="rtl"] .btn-link::before { transform: translateX(101%); }
[dir="rtl"] .btn-link { font-family: var(--type-ar); font-size: 16px; }
.btn-link:hover { color: var(--paper); border-color: var(--tan-deep); }
.btn-link:hover::before, [dir="rtl"] .btn-link:hover::before { transform: translateX(0); }

.section-head {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); margin: 44px 0 18px; font-weight: 500;
}
[dir="rtl"] .section-head { font-family: var(--type-ar); font-size: 14px; letter-spacing: 0; text-transform: none; }

/* ===== Catalog ===== */
.catalog {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.topic-card {
  background: var(--paper-warm); border: 1px solid var(--rule);
  border-radius: 8px; padding: 0; overflow: hidden;
  cursor: pointer; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  display: flex; flex-direction: column; min-height: 170px;
  text-align: start; font-family: var(--body); color: var(--ink);
}
.topic-card:hover {
  border-color: var(--tan-deep);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(13, 59, 102, 0.08);
}
.topic-card.has-image { min-height: 290px; }
.topic-image {
  width: 100%; height: 150px;
  background-size: cover; background-position: center;
  background-color: var(--sage-soft); /* fallback while loading */
  border-bottom: 1px solid var(--rule);
  transition: transform 0.4s ease, border-color 0.2s;
}
.topic-card:hover .topic-image {
  transform: scale(1.04);
  border-bottom-color: var(--tan-deep);
}
.topic-body {
  padding: 18px 20px 20px;
  display: flex; flex-direction: column; flex-grow: 1;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color 0.25s;
}
.topic-body::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--tan-deep);
  transform: translateX(-101%);
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
[dir="rtl"] .topic-body::before { transform: translateX(101%); }
.topic-card:hover .topic-body::before,
[dir="rtl"] .topic-card:hover .topic-body::before { transform: translateX(0); }
/* Text colors flip to paper when the wash is over the body */
.topic-card:hover .topic-num,
.topic-card:hover .topic-title,
.topic-card:hover .topic-category,
.topic-card:hover .status-new { color: var(--paper); }
.topic-card:hover .status-done { color: var(--paper); }
.topic-card:hover .status-done::before { content: '✓ '; }
.topic-num {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--ink-soft); margin-bottom: 12px;
  letter-spacing: 0.08em; font-weight: 500;
  transition: color 0.25s;
}
[dir="rtl"] .topic-num { font-family: var(--type-ar); font-size: 13px; letter-spacing: 0; }
.topic-title {
  font-family: var(--display); font-size: 21px; font-weight: 500;
  line-height: 1.18; margin-bottom: 10px; flex-grow: 1;
  font-variation-settings: 'SOFT' 80;
  transition: color 0.25s;
}
[dir="rtl"] .topic-title { font-family: var(--type-ar); font-weight: 700; font-size: 23px; }
.topic-category {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tan-deep); font-weight: 600;
  transition: color 0.25s;
}
[dir="rtl"] .topic-category { font-family: var(--type-ar); font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 700; }
.topic-status {
  font-size: 10px; letter-spacing: 0.06em; font-weight: 500;
  transition: color 0.25s;
}
[dir="rtl"] .topic-status { font-family: var(--type-ar); font-size: 12px; letter-spacing: 0; }
.status-done { color: var(--correct); }
.status-done::before { content: '✓ '; }
.status-new { color: var(--ink-faint); }

/* ===== Article view ===== */
.article-view { max-width: 660px; margin: 0 auto; }
.crumb {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--ink-soft); margin-bottom: 22px;
  letter-spacing: 0.05em;
}
[dir="rtl"] .crumb { font-family: var(--type-ar); font-size: 14px; letter-spacing: 0; }
.crumb .crumb-meta { letter-spacing: 0.10em; text-transform: uppercase; }
[dir="rtl"] .crumb .crumb-meta { letter-spacing: 0; text-transform: none; }
.article-hero {
  margin: 0 0 28px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  aspect-ratio: 16 / 9;
  position: relative;
}
.article-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.article-title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 5vw, 44px); line-height: 1.08;
  letter-spacing: -0.018em; margin-bottom: 12px;
  font-variation-settings: 'SOFT' 100;
}
[dir="rtl"] .article-title { font-family: var(--type-ar); font-weight: 700; letter-spacing: 0; }
.article-subtitle {
  color: var(--ink-soft); font-style: italic; font-size: 17px;
  margin-bottom: 32px; padding-bottom: 26px;
  border-bottom: 1px solid var(--rule);
}
[dir="rtl"] .article-subtitle { font-style: normal; }
.article-body {
  font-size: 18px; line-height: 1.78; color: var(--ink);
  font-family: var(--body-en);
}
[dir="rtl"] .article-body { font-family: var(--type-ar); font-size: 18px; line-height: 1.95; }
.article-body p { margin-bottom: 1.2em; }
.continue-bar {
  margin-top: 44px; padding-top: 28px;
  border-top: 1px solid var(--rule);
  display: flex; justify-content: flex-end; gap: 12px;
}
[dir="rtl"] .continue-bar { justify-content: flex-start; }

/* ===== Notebook prompt ===== */
.notebook-view {
  max-width: 540px; margin: 8vh auto 0;
  text-align: center;
}
.notebook-icon {
  width: 56px; height: 56px; margin: 0 auto 24px;
  background: var(--sage-soft); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.notebook-view h2 {
  font-family: var(--display); font-weight: 500;
  font-size: 28px; line-height: 1.25; margin-bottom: 16px;
  font-variation-settings: 'SOFT' 100;
}
[dir="rtl"] .notebook-view h2 { font-family: var(--type-ar); font-weight: 700; font-size: 30px; }
.notebook-view p {
  color: var(--ink-soft); font-size: 17px; line-height: 1.6;
  margin-bottom: 28px; max-width: 44ch; margin-left: auto; margin-right: auto;
}
[dir="rtl"] .notebook-view p { font-family: var(--type-ar); }
.notebook-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ===== Quiz ===== */
.quiz-view { max-width: 660px; margin: 0 auto; }
.quiz-header { margin-bottom: 32px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.quiz-header h2 {
  font-family: var(--display); font-size: 28px; font-weight: 500;
  margin-bottom: 6px;
  font-variation-settings: 'SOFT' 100;
}
[dir="rtl"] .quiz-header h2 { font-family: var(--type-ar); font-weight: 700; }
.quiz-header p { color: var(--ink-soft); font-size: 15px; }
[dir="rtl"] .quiz-header p { font-family: var(--type-ar); font-size: 16px; }

.question { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.question:last-of-type { border-bottom: none; }
.q-num {
  font-size: 11px; letter-spacing: 0.12em; color: var(--tan-deep);
  margin-bottom: 10px; font-weight: 500;
}
[dir="rtl"] .q-num { font-family: var(--type-ar); font-size: 13px; letter-spacing: 0; }
.q-text {
  font-family: var(--display); font-size: 21px; font-weight: 500;
  line-height: 1.3; margin-bottom: 18px;
  font-variation-settings: 'SOFT' 80;
}
[dir="rtl"] .q-text { font-family: var(--type-ar); font-weight: 700; font-size: 22px; }
.option {
  display: block; padding: 13px 16px; margin-bottom: 8px;
  border: 1px solid var(--rule); background: var(--paper);
  border-radius: 999px; cursor: pointer;
  font-size: 16px;
  position: relative; overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.option:not(.disabled):not(.selected):hover {
  transform: translateY(-1px);
  border-color: var(--ink-faint);
  box-shadow: 0 4px 12px -6px rgba(13, 59, 102, 0.18);
}
.option.selected { border-color: var(--ink); background: var(--paper-warm); }
.option.correct { border-color: var(--correct); background: var(--correct-bg); }
.option.incorrect { border-color: var(--wrong); background: var(--wrong-bg); }
.option.disabled { cursor: default; }
[dir="rtl"] .option { font-family: var(--type-ar); font-size: 17px; }

/* ===== Explanation — shown beneath options after submit ===== */
.explanation {
  margin-top: 14px;
  padding: 14px 16px;
  background: rgba(244, 211, 94, 0.14);
  border-left: 2px solid var(--tan-deep);
  border-radius: 0 4px 4px 0;
  font-size: 15px; line-height: 1.55;
  color: var(--ink);
  opacity: 0;
  transform: translateY(4px);
  animation: explainIn 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.15s forwards;
}
[dir="rtl"] .explanation {
  border-left: 0;
  border-right: 2px solid var(--tan-deep);
  border-radius: 4px 0 0 4px;
  font-family: var(--type-ar);
  font-size: 16px;
  line-height: 1.85;
}
.explanation-label {
  display: inline-block;
  font-family: var(--display);
  font-variation-settings: 'opsz' 14, 'SOFT' 70;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--tan-deep);
  margin-right: 8px;
  font-weight: 500;
}
[dir="rtl"] .explanation-label {
  font-family: var(--type-ar); font-weight: 500;
  font-size: 13px; letter-spacing: 0;
  margin-right: 0; margin-left: 8px;
}
@keyframes explainIn {
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .explanation { opacity: 1; transform: none; animation: none; }
}

/* ===== Result ===== */
.result-view { max-width: 480px; margin: 6vh auto 0; text-align: center; }
.result-score {
  font-family: var(--display); font-size: 88px; line-height: 1;
  font-weight: 500; color: var(--tan-deep); margin-bottom: 8px;
  font-variation-settings: 'SOFT' 100;
}
.result-score-out {
  font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 26px;
}
[dir="rtl"] .result-score-out { font-family: var(--type-ar); font-size: 14px; letter-spacing: 0; text-transform: none; }
.result-msg {
  font-family: var(--display); font-size: 22px; font-weight: 400;
  line-height: 1.35; margin-bottom: 30px;
  font-variation-settings: 'SOFT' 100;
}
[dir="rtl"] .result-msg { font-family: var(--type-ar); font-weight: 500; font-size: 24px; }
.result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ===== Loading ===== */
.loading {
  display: flex; align-items: center; justify-content: center;
  min-height: 50vh; color: var(--ink-soft); font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
[dir="rtl"] .loading { font-family: var(--type-ar); font-size: 16px; letter-spacing: 0; text-transform: none; }

/* ===== Animations ===== */
.view { animation: fadeIn 0.32s ease-out; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Mobile ===== */
@media (max-width: 640px) {
  .app { padding: 20px 16px 60px; }
  .masthead { flex-wrap: wrap; gap: 14px; }
  .stats-row, .stats-row-4 { grid-template-columns: 1fr 1fr; }
  .stats-row-4 .stat-value { font-size: 30px; }
  .today-image { /* aspect-ratio governs at every width; no override needed */ }
  .today-content { padding: 24px 22px; }
  .today-title { font-size: 26px; }
  .brain-block {
    grid-template-columns: 1fr;
    text-align: center; padding: 24px; gap: 22px;
  }
  [dir="rtl"] .brain-block { grid-template-columns: 1fr; }
  .brain-sub { margin: 0 auto; }
  .brain-viz { margin: 0 auto; width: 180px; height: 180px; }
  .two-col { grid-template-columns: 1fr; }
  .day-row { grid-template-columns: repeat(15, 1fr); grid-template-rows: repeat(2, 1fr); }
  .catalog { grid-template-columns: 1fr; }
  .topic-image { height: 180px; }
  .topic-card.has-image { min-height: 0; }
  .article-body { font-size: 17px; }
  .auth-card { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   Library — grouped by shelf (v18)
   New page header, sticky chip row, and per-shelf section heads.
   The existing .topic-card and .catalog styles are reused as-is.
   ============================================================ */

/* --- Editorial page header --- */
.catalog-view .lib-head {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 28px;
  margin: 8px 0 0;
}
.lib-eyebrow {
  font-family: var(--body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--tan-deep);
  margin-bottom: 14px;
}
[dir="rtl"] .lib-eyebrow {
  font-family: var(--type-ar);
  font-size: 13px; letter-spacing: 0; text-transform: none;
}
.lib-title {
  font-family: var(--display);
  font-variation-settings: 'opsz' 120, 'SOFT' 30, 'wght' 400;
  font-size: clamp(48px, 7vw, 86px);
  line-height: 0.95;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  color: var(--ink);
}
[dir="rtl"] .lib-title {
  font-family: var(--type-ar);
  font-weight: 700;
  letter-spacing: 0;
}
.lib-lede {
  font-family: var(--display);
  font-variation-settings: 'opsz' 14, 'SOFT' 60, 'wght' 400;
  font-size: 19px; line-height: 1.5;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0;
}
[dir="rtl"] .lib-lede {
  font-family: var(--type-ar);
  font-size: 18px;
}
.lib-meta {
  margin-top: 18px;
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink-faint);
}
[dir="rtl"] .lib-meta {
  font-family: var(--type-ar);
  font-size: 15px;
}

/* --- Sticky chip row --- */
.catalog-view .chips-wrap {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  margin: 0 -24px;
  padding: 14px 24px;
}
.catalog-view .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.catalog-view .chip {
  font-family: var(--body);
  font-size: 14px; font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--ink-faint);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
[dir="rtl"] .catalog-view .chip {
  font-family: var(--type-ar);
  font-size: 15px;
}
.catalog-view .chip .chip-icon {
  display: inline-flex;
  width: 14px; height: 14px;
  color: currentColor;
}
.catalog-view .chip .chip-icon svg {
  width: 100%; height: 100%;
}
.catalog-view .chip:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.catalog-view .chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.catalog-view .chip .chip-count {
  font-size: 11px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.catalog-view .chip.is-active .chip-count {
  color: var(--paper-warm);
}

/* --- Shelf section --- */
.shelf {
  padding: 56px 0 8px;
  border-bottom: 1px solid var(--rule);
}
.shelf:last-of-type { border-bottom: 0; }
.shelf-head {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 32px;
}
.shelf-icon {
  width: 52px; height: 52px;
  flex-shrink: 0;
  color: var(--tan-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}
.shelf-icon svg {
  width: 100%; height: 100%;
}
.shelf-title-block {
  flex: 1;
  min-width: 0;
}
.shelf-title {
  font-family: var(--display);
  font-variation-settings: 'opsz' 90, 'SOFT' 30, 'wght' 500;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
[dir="rtl"] .shelf-title {
  font-family: var(--type-ar);
  font-weight: 700;
  letter-spacing: 0;
}
.shelf-sub {
  font-family: var(--display);
  font-variation-settings: 'opsz' 14, 'SOFT' 60, 'wght' 400;
  font-size: 15px;
  color: var(--ink-soft);
  margin-top: 14px;
}
[dir="rtl"] .shelf-sub {
  font-family: var(--type-ar);
  font-size: 16px;
  margin-top: 20px;
}
.shelf-count {
  font-family: var(--body);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  text-transform: uppercase;
  white-space: nowrap;
  padding-bottom: 8px;
}
[dir="rtl"] .shelf-count {
  font-family: var(--type-ar);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

/* --- Responsive --- */
@media (max-width: 720px) {
  .catalog-view .chips-wrap {
    margin: 0 -16px;
    padding: 12px 16px;
  }
  .shelf {
    padding: 40px 0 4px;
  }
  .shelf-head {
    gap: 14px;
    margin-bottom: 24px;
  }
  .shelf-icon { width: 40px; height: 40px; }
  .shelf-count { display: none; }
}