/* ==========================================================================
   إحراز — the simple, modern layer (October 2026): the dashboard's language
   (home.css, after the Eduzen learning dashboard) on every signed-in page.
   Loaded last on each page so it wins over the older page styles; it changes
   the look only — never what a lesson, test or exercise says.
   - Soft white cards on the grey canvas with no outline; tinted cards are lighter.
   - No row of numbers under a page title (the cards show them); only an action like «3 أخطاء للمراجعة» stays, as a tile.
   - Fewer words: no tags or descriptions on the big section cards, no English
     sub-names or extra lines in lesson lists, no sub-lines under stage names.
   - Boxes inside cards are flat grey fills, never outlined boxes.
   Tokens (purple accent, --card-bg, --lilac…) are in nav.css.
   ========================================================================== */
.dash-body {
  --border-strong: #e8e8ec;          /* every remaining line is fainter */
  --border: #efeff2;
}

/* ---------- page title ---------- */
.dash-body .dash-title { font-size: clamp(26px, 2.4vw, 36px); font-weight: var(--w-regular); line-height: 1.35; }
.dash-body .crumbs, .dash-body .rl-crumbs { font-size: 12.5px; color: var(--muted); }

/* the numbers under a title repeat what the cards below already show (score, lessons, texts, minutes): only an
   action stays — «3 أخطاء للمراجعة» — as a small white tile, the number over its word */
.dash-body .rh-chip:not(.rh-chip--link) { display: none !important; }
.dash-body .rh-chips:not(:has(.rh-chip--link)) { display: none; }
.dash-body .rh-chips { gap: 8px; margin-top: 4px; }
.dash-body .rh-chip { flex-direction: column; align-items: flex-start; gap: 2px; min-width: 96px; padding: 10px 16px; border: 0 !important;
  border-radius: 18px; background: var(--card-bg); font-size: 12px; color: var(--muted); }
.dash-body .rh-chip:first-child { padding-inline-start: 16px; }
.dash-body .rh-chip b { font-size: 21px; font-weight: var(--w-regular); }
.dash-body .rh-chip--ink::before { display: none; }
.dash-body .rh-chip:has(b ~ b) { flex-direction: row; align-items: baseline; gap: 5px; }   /* «40 سؤالًا · 30 د»: two numbers stay on one line */
.dash-body a.rh-chip:hover { box-shadow: 0 0 0 1px var(--border-strong); text-decoration: none; }

/* ---------- cards: soft, borderless ---------- */
.dash-body :is(.card, .rh-next, .rll-group, .rll-top, .v-due, .exam-hero, .next, .mock, .kpi, .pl-today, .pl-focus, .st-card, .sd-card) {
  border-color: transparent !important; box-shadow: none;
}
.dash-body :is(.card, .rh-next, .rll-group) { border-radius: 24px; }
.dash-body .card__title { font-size: 18px; font-weight: var(--w-regular); }
.dash-body .card__sub { display: none; }
/* the soft shine on tinted cards (nav.css) goes: flat soft colour reads calmer */
.dash-body :is(.rh-door, .gx-next, .gx-cta, .pl-today, .v-due, .sp-next--rec, .sp-part, .ls-result, .rv-summary, .sg-tip, .strategy,
  .exam-hero, .kpi--band, .rll-top, .next, .mock) { background-image: none !important; }

/* ---------- «خطوتك التالية» strips ---------- */
.dash-body .rh-next { padding: 18px 22px; background: var(--card-bg); }
.dash-body .rh-next__title { font-size: 18px; font-weight: var(--w-medium); }
.dash-body .rh-path small { display: none; }               /* the stage names are enough */
.dash-body .rh-path b { font-size: 13px; font-weight: var(--w-medium); }
.dash-body .rh-path__dot { width: 22px; height: 22px; border: 0; background: var(--lilac); }

/* ---------- section doors (الدروس / التدريب …): lighter tints, one title, one number, one button ---------- */
.dash-body .rh-door { border: 0 !important; top: 0 !important; gap: 16px; padding: 22px 24px; border-radius: 26px; }
.dash-body .rh-doors .rh-door { min-height: 0; padding: 24px 26px; gap: 18px; border-radius: 28px; }
/* the four skill hubs (القراءة، الاستماع، الكتابة، المحادثة) share one size on a wide screen, whatever each door or card holds:
   the doors as tall as the fullest one, the bottom cards as tall as four rows (a section with 2–3 parts or no activity yet) */
@media (min-width: 961px) {
  .dash-body .rh-doors .rh-door { min-height: 430px; }
  .dash-body .rh-row > .rh-card { min-height: 392px; }
}
.dash-body .rh-door--lessons { background-color: color-mix(in srgb, var(--t-plan) 55%, #fff); }
.dash-body .rh-door--practice { background-color: color-mix(in srgb, var(--t-vocab) 55%, #fff); }
.dash-body .rh-door--exam { background-color: color-mix(in srgb, var(--t-exam) 55%, #fff); }
.dash-body :is(.rh-door__tag, .rh-door__sub, .rp-door__sub, .rh-door__stats) { display: none !important; }
.dash-body .rh-door__icon { width: 44px; height: 44px; border-radius: 14px; }
.dash-body .rh-doors .rh-door__title { font-size: clamp(24px, 2vw, 30px); font-weight: var(--w-regular); }
.dash-body .rh-doors .rh-ring { width: 116px; height: 116px; }
.dash-body .rh-doors .rh-ring b { font-size: 34px; font-weight: var(--w-regular); }
.dash-body .rh-doors .rh-score { width: 160px; padding: 14px 16px 10px; border-radius: 20px; }
.dash-body .rh-doors .rh-score > b { font-size: 40px; }
.dash-body .rh-door__next { padding: 12px 16px; border-radius: 18px; background: rgba(255, 255, 255, .7); }
.dash-body .rh-door__next b { font-size: 14.5px; }
.dash-body .rh-doors .rh-door__go { padding: 12px 24px; font-size: 15px; }
.dash-body .rh-door__go { margin-top: auto; }
.dash-body .rp-door { border: 0 !important; border-radius: 24px; min-height: 0; }

/* ---------- lesson lists: quiet rows, the name only ---------- */
.dash-body .rll-top { padding: 20px 24px !important; border-radius: 26px !important;
  background: color-mix(in srgb, var(--t-plan) 50%, #fff) !important; }
.dash-body .rll-top .card__title { font-size: clamp(19px, 1.7vw, 24px); font-weight: var(--w-regular); }
.dash-body .rll-ring { width: 96px; height: 96px; }
.dash-body .rll-ring b { font-size: 28px; font-weight: var(--w-regular); }
.dash-body .rll-group { padding: 18px 20px 20px; gap: 12px; background: var(--card-bg); }
.dash-body .rll-group__n { width: 30px; height: 30px; border-radius: 10px; font-weight: var(--w-medium); }
.dash-body .rll-group__count { border: 0; background: var(--lilac); }
.dash-body .rll-list { gap: 6px; }
.dash-body .rll-item { border: 0; border-radius: 16px; background: var(--lilac); }
.dash-body .rll-item:hover { background: var(--border); }
.dash-body .rll-item.is-next { background: color-mix(in srgb, var(--highlight-soft) 70%, #fff); }
.dash-body .rll-item__link { padding: 12px 14px; gap: 12px; align-items: center; }
.dash-body .rll-item__n { width: 32px; height: 32px; border: 0; background: var(--surface); }
.dash-body .rll-item__title { font-size: 15px; font-weight: var(--w-medium); }
.dash-body .rll-item__sub, .dash-body .rll-note { display: none; }
.dash-body .rll-item__meta:has(> .ltr:only-child) { display: none; }   /* a lesson's English name alone; minutes and scores stay */
.dash-body .rll-item__foot { margin: 0 14px; border-top-style: solid; border-top-color: rgba(0, 0, 0, .05); }
.dash-body .rll-item__foot:not(.is-done) { margin: 0 8px 8px; border: 0; border-radius: 12px; background: var(--surface); }

/* ---------- practice library ---------- */
.dash-body :is(.next__whyd, .mode-note) { display: none; }                    /* «لماذا هذا الاقتراح؟», the mode's long line */
.dash-body .mhelp > span:not(.mhelp__sw) { display: none; }                  /* «مع مساعدة» says enough */
.dash-body .lib__icon { border: 0; border-radius: 12px; }
.dash-body .lib__retake { border-style: solid; border-color: var(--border-strong); }
.dash-body .rp-from { border: 0 !important; background: var(--lilac); }

/* ---------- vocabulary ---------- */
.dash-body .v-due__text > p:not(:first-child) { display: none; }              /* the title and the button say the step */
.dash-body .v-due { background: color-mix(in srgb, var(--highlight-soft) 60%, #fff); }
.dash-body :is(.v-due__n, .v-tile, .v-status, .v-badge, .flip__say, .flip__status) { border-color: transparent; }
.dash-body .v-tile { background: var(--card-bg); border-radius: 20px; }
.dash-body .v-tile--hl { background: color-mix(in srgb, var(--t-vocab) 60%, #fff); }
.dash-body .v-due__n { background: var(--surface); border-radius: 16px; }

/* ---------- small things everywhere ---------- */
/* pills and tags: soft fills instead of outlines */
.dash-body :is(.rh-door__tag, .rll-chip, .lib__rec, .v-tag, .hm-kind) { border: 0; }
/* search boxes and plain inputs: a soft grey pill */
.dash-body :is(.search, .dash-search, .lib-search) { border-color: transparent; background: var(--lilac); border-radius: var(--r-pill); }
.dash-body :is(.search, .dash-search, .lib-search):focus-within { border-color: var(--accent); background: var(--surface); }
/* progress bars: rounder and a touch thicker, no outline */
.dash-body .rh-bar { height: 8px; border: 0; background: var(--lilac); }
.dash-body .rll-top .rh-bar, .dash-body .rh-door .rh-bar { background: rgba(255, 255, 255, .8); }
/* the icon tiles beside rows and doors: no outline */
.dash-body :is(.sheet__icon, .hm-skill__icon, .rp-door__icon, .rll-item__n) { border-color: transparent; }

/* ---------- squares that kept the old look ---------- */
/* tinted page headers (practice and test pages): a plain title like every other page */
.dash-body:not(.home-page) .dash-head { padding: 4px 0 0; border: 0; border-radius: 0; background: none !important; box-shadow: none; }
/* the practice / tests switch: the chosen card is tinted with a soft ring, the other plain white; no dark outline, no stat chips */
.dash-body .rp-door { background: var(--card-bg); box-shadow: none; }
.dash-body .rp-door[aria-selected="true"] { background: color-mix(in srgb, var(--t-vocab) 60%, #fff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--k) 45%, transparent); }
.dash-body .rp-door--exam[aria-selected="true"] { background: color-mix(in srgb, var(--t-exam) 60%, #fff); }
.dash-body .rp-door--essay[aria-selected="true"] { background: color-mix(in srgb, var(--t-writing) 60%, #fff); }
.dash-body .rp-door__stats { display: none; }
.dash-body .rp-door__title { font-size: 21px; font-weight: var(--w-regular); }
/* rows of texts: quiet pills instead of outlined buttons, soft rows */
.dash-body .lib > li { border-radius: 16px; }
.dash-body .lib .btn--ghost { min-height: 36px; padding: 6px 16px; border-color: transparent; background: var(--lilac); font-size: 13.5px; }
.dash-body .lib .btn--ghost:hover { background: var(--ink); color: var(--on-accent); }
.dash-body .card.resume { background: var(--card-bg); }

/* ==========================================================================
   Hover: modern and calm. Cards lift (with `top`, never transform — they hold Arabic text, and
   Safari drops its marks from moving text) and cast a soft shadow in their own colour; everything
   that moves is text-free: a light sheen sweeping across the big cards, a glow in their corner,
   icon tiles that pop, the arrow in a button. Pointer devices only; «حركة أقل» turns it all off.
   ========================================================================== */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html:not(.calm) .dash-body :is(.rh-door, .rp-door, .db-skill, .db-sq, .rll-item, .lib > li, .v-tile, .card.resume) {
    position: relative; top: 0;
    transition: top 420ms var(--ease-out), box-shadow 420ms var(--ease-out), background-color 200ms ease;
  }

  /* --- the big section cards (الدروس / التدريب / الاختبارات): lift, coloured shadow, glow, sheen --- */
  .dash-body :is(.rh-door, .rp-door) { isolation: isolate; overflow: hidden; }
  .dash-body :is(.rh-door, .rp-door)::before {           /* a soft glow of the card's colour, growing from its corner */
    content: ""; position: absolute; z-index: -1; inset-block-start: -40%; inset-inline-end: -25%; width: 70%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--k) 22%, transparent) 0%, transparent 70%);
    transform: scale(.6); opacity: 0; pointer-events: none;
    transition: transform 700ms var(--ease-out), opacity 500ms ease;
  }
  .dash-body :is(.rh-door, .rp-door)::after {            /* a band of light that sweeps across once, right to left */
    content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .5) 48%, rgba(255, 255, 255, 0) 60%);
    transform: translateX(-100%); transition: transform 0s;
  }
  .dash-body :is(.rh-door, .rp-door):hover {
    top: -6px !important;
    box-shadow: 0 28px 50px -28px color-mix(in srgb, var(--k) 60%, transparent), 0 10px 22px -16px rgba(20, 20, 30, .18);
  }
  .dash-body :is(.rh-door, .rp-door):hover::before { transform: scale(1); opacity: 1; }
  .dash-body :is(.rh-door, .rp-door):hover::after { transform: translateX(100%); transition: transform 1100ms cubic-bezier(.3, .7, .2, 1); }
  /* its icon tile pops and takes the card's colour */
  .dash-body :is(.rh-door__icon, .rp-door__icon) { transition: transform 520ms var(--ease-spring), background-color 300ms ease, color 300ms ease; }
  .dash-body :is(.rh-door, .rp-door):hover :is(.rh-door__icon, .rp-door__icon) { transform: scale(1.12) rotate(-8deg); background: var(--k); color: #fff; }
  /* its button turns purple and the arrow leans forward */
  .dash-body .rh-door__go { transition: background-color 250ms ease, box-shadow 300ms ease; }
  .dash-body .rh-door:hover .rh-door__go { background: var(--accent); box-shadow: 0 12px 24px -12px rgba(124, 77, 234, .7); }
  .dash-body .rh-door__go::after { display: inline-block; transition: transform 400ms var(--ease-spring); }
  .dash-body .rh-door:hover .rh-door__go::after { transform: translateX(-5px); }
  /* the ring and the score box breathe a little: their own soft shadow */
  .dash-body .rh-door :is(.rh-ring, .rh-score) { transition: box-shadow 420ms var(--ease-out); }
  .dash-body .rh-door:hover :is(.rh-ring, .rh-score) { box-shadow: 0 14px 28px -18px color-mix(in srgb, var(--k) 70%, transparent); }

  /* --- smaller squares: a gentle lift and an icon pop (every lift starts html:not(.calm) to outrank the `top: 0` above) --- */
  html:not(.calm) .dash-body .db-skill:hover { top: -4px; box-shadow: 0 18px 32px -20px color-mix(in srgb, var(--k) 70%, transparent); }
  html:not(.calm) .dash-body .db-sq:hover { top: -6px; box-shadow: 0 22px 36px -20px rgba(20, 20, 30, .35); }
  html:not(.calm) .dash-body .db-sq--glow:hover { box-shadow: 0 24px 40px -16px rgba(150, 100, 200, .75); }
  html:not(.calm) .dash-body .rll-item:hover { top: -3px; box-shadow: 0 16px 28px -18px rgba(20, 20, 30, .4); }

  /* --- the number squares (days left / target / streak): sheen, a corner glow, the number pops --- */
  .dash-body .db-sq { isolation: isolate; overflow: hidden; }
  .dash-body .db-sq::before {                           /* white squares: a lilac glow from the corner; the gradient one: a warm light */
    content: ""; position: absolute; z-index: -1; inset-block-start: -50%; inset-inline-start: -40%; width: 110%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 70%);
    transform: scale(.5); opacity: 0; pointer-events: none;
    transition: transform 650ms var(--ease-out), opacity 450ms ease;
  }
  .dash-body .db-sq--glow::before { background: radial-gradient(circle, rgba(255, 255, 255, .45) 0%, transparent 70%); }
  .dash-body .db-sq::after {
    content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 48%, rgba(255, 255, 255, 0) 60%);
    transform: translateX(-100%); transition: transform 0s;
  }
  .dash-body .db-sq:hover::before { transform: scale(1); opacity: 1; }
  .dash-body .db-sq:hover::after { transform: translateX(100%); transition: transform 900ms cubic-bezier(.3, .7, .2, 1); }
  .dash-body .db-sq b { transform-origin: right center; transition: transform 480ms var(--ease-spring); }   /* digits only: safe to move */
  .dash-body .db-sq:hover b { transform: scale(1.14); }

  /* --- lesson rows: a sheen, the number circle pops and turns gold, an arrow slides in at the end --- */
  .dash-body .rll-item { overflow: hidden; }
  .dash-body .rll-item::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .6) 48%, rgba(255, 255, 255, 0) 60%);
    transform: translateX(-100%); transition: transform 0s;
  }
  .dash-body .rll-item:hover::before { transform: translateX(100%); transition: transform 1000ms cubic-bezier(.3, .7, .2, 1); }
  .dash-body .rll-item:not(.is-done, .is-locked, .is-skipped):hover .rll-item__n {   /* !important: reading-lessons.css colours the circles with it */
    background: var(--highlight) !important; border-color: var(--highlight) !important; color: var(--ink) !important; box-shadow: 0 0 0 5px color-mix(in srgb, var(--highlight) 30%, transparent); }
  .dash-body .rll-item__link::after {                   /* a small chevron pointing forward (left) */
    content: ""; flex: none; align-self: center; width: 8px; height: 8px; margin-inline: 4px 6px;
    border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; color: var(--ink-2);
    transform: translateX(10px) rotate(45deg); opacity: 0;
    transition: transform 420ms var(--ease-spring), opacity 250ms ease;
  }
  .dash-body .rll-item:hover .rll-item__link::after { transform: translateX(0) rotate(45deg); opacity: 1; }
  html:not(.calm) .dash-body .lib > li:hover { top: -2px; background: var(--lilac); }
  html:not(.calm) .dash-body :is(.v-tile, .card.resume):hover { top: -3px; box-shadow: 0 16px 30px -22px rgba(20, 20, 30, .35); }
  .dash-body :is(.db-skill .db-ico, .db-tk__ico, .rll-item__n, .rh-tool__ico, .lib__icon, .db-task .db-ico) { transition: transform 480ms var(--ease-spring), background-color 250ms ease, color 250ms ease, box-shadow 300ms ease; }
  .dash-body .db-skill:hover .db-ico { transform: scale(1.12) rotate(-8deg); background: var(--k); color: #fff; }
  .dash-body a.db-tk:hover .db-tk__ico { transform: scale(1.1) rotate(-6deg); }
  .dash-body .rll-item:hover .rll-item__n { transform: scale(1.12); }
  .dash-body .lib > li:hover .lib__icon { transform: scale(1.08) rotate(-4deg); }
  .dash-body .rh-tool:hover .rh-tool__ico { transform: scale(1.1) rotate(-6deg); }
  /* the thin bars in the skill tiles fill up a little brighter */
  .dash-body .db-skill .db-bar i { transition: filter 300ms ease; }
  .dash-body .db-skill:hover .db-bar i { filter: brightness(1.12) saturate(1.2); }

  /* --- buttons and round arrows --- */
  .dash-body .btn--primary { transition: background-color 200ms ease, box-shadow 300ms ease, top 200ms ease; }
  .dash-body .btn--primary:hover { box-shadow: 0 12px 24px -12px rgba(124, 77, 234, .75); }
  .dash-body .db-go .icon { transition: transform 450ms var(--ease-spring); }
  .dash-body .db-go:hover .icon { transform: rotate(-45deg); }
}

@media (max-width: 960px) {
  .dash-body .rh-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-body .rh-chip { min-width: 0; padding: 8px 12px; white-space: normal; }
  .dash-body .rh-chip:has(b ~ b) { grid-column: span 2; flex-wrap: wrap; }
  .dash-body .rh-chip b { font-size: 18px; }
  .dash-body .rh-doors .rh-door { padding: 18px; border-radius: 22px; }
  .dash-body .rh-doors .rh-ring { width: 92px; height: 92px; }
  .dash-body .rh-doors .rh-ring b { font-size: 26px; }
}

/* ==========================================================================
   Type hierarchy (October 2026): one font, three clear steps.
   Titles are semibold, buttons medium, and secondary lines a touch larger
   (--muted is darker in tokens.css). Big data numbers stay regular.
   ========================================================================== */
.dash-body :is(.dash-title, .card__title, .rll-top .card__title, .db-head h2, .rh-next__title, .rh-card__head h2,
  .rh-door__title, .rh-doors .rh-door__title, .rp-door__title,
  .pl-h, .pl-sum__h, .pl-focus h2, .pl-daycard__head h3, .pl-road__h, .pl-rcard h3, .pl-empty h3) { font-weight: var(--w-semibold); }

.dash-body :is(.btn, .btn--primary, .rh-door__go, .rh-next__go, .db-tk__go, .db-big__go, .link--btn) { font-weight: var(--w-medium); }

.dash-body :is(.crumbs, .rl-crumbs, .db-head p, .db-big__n small, .db-more, .rh-card__head p) { font-size: 13.5px; }
.dash-body :is(.db-sub small, .rh-chip, .rh-recent__main small, .rh-tool small, .rll-item__meta, .sheet__row small, .side__later) { font-size: 13px; }
.dash-body :is(.db-tk__min, .rh-spark small, .rh-types__pct small, .rh-recent__n small, .pl-sum__sub small, .pl-rcard h4 small) { font-size: 12.5px; }
.dash-body .db-days button small { font-size: 12px; }
.dash-body :is(.db-none, .rh-empty) { font-size: 14.5px; }