/*
 * Motiva Design System — Global Base Styles
 *
 * Purely additive. Does NOT redeclare anything already owned by
 * app.css (RTL direction/text-align, font-family) or by Bootstrap's
 * Reboot (box-sizing). Loaded after both, so this file only fills
 * gaps — it never overrides an existing, working rule.
 *
 * Consumes tokens from motiva-tokens.css only. See
 * design/design-system/MOTIVA_FOUNDATIONS.md for consumption rules.
 */

/* box-sizing: restated defensively for the design system's own
   independence from Bootstrap. Bootstrap's Reboot already sets this
   today, so this line is currently a no-op — it only starts to
   matter if Bootstrap is ever removed (see audit's migration plan). */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Default surface + text color for anything NOT already covered by
   .app-shell (AppLayout.razor.css sets its own background). This is
   the fallback for chrome-less layouts (BlankLayout, 404, auth
   pages under MainLayout) that render directly on <body>. */
body {
    background-color: var(--motiva-surface-app-bg);
    color: var(--motiva-text-primary);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* RTL note: direction/text-align are already set globally by
   app.css (`html, body { direction: rtl; text-align: right; }`).
   Nothing here redeclares that — this file only guarantees that
   nothing it adds (focus ring, disabled state) hardcodes left/right,
   so it stays correct under the existing RTL setup with no extra
   rules needed. */

/* Motiva System Master — scope activation.
 *
 * The scope's entire token block lives in motiva-tokens.css under
 * `.motiva`. This is the one rule that lets its TYPOGRAPHY
 * tokens actually take effect: app.css sets `font-family` on
 * `html, body` with a literal ('Assistant'), not a token, so every
 * descendant inherits that literal and re-pointing --g-font-base
 * alone would never reach the page.
 *
 * This is the scope root's own activation rule, not component or page
 * styling.
 *
 * Applied by AppLayout.razor to the Student and Mentor shells. Lecturer
 * / Staff / Admin never carry it. Renamed from `.motiva-student` in
 * Epic 0 — selector only, no declaration changed.
 *
 * `color` added in Phase 4A.1, for exactly the same reason and as the
 * same class of fix as the token re-declaration in motiva-tokens.css:
 * the `body` rule above reads `var(--motiva-text-primary)`, but `body`
 * is an ANCESTOR of the scope root, so that declaration resolves at
 * :root and freezes the legacy slate ink (#1e293b) into the inherited
 * value. Measured on /tasks: every element that does not set its own
 * `color` — the shell, and any text a component leaves uncoloured —
 * inherited slate rather than the Master's warm #1A1820. Declaring it
 * here re-resolves the token on the scope root itself.
 *
 * Still the only non-custom-property declarations the foundations layer
 * introduces, and still scoped so no other role can reach them.
 */
.motiva {
    font-family: var(--motiva-font-family);
    color: var(--motiva-text-primary);
}

/* ── Primary call-to-action ──────────────────────────────────────────
 * ONE definition of the primary-action treatment, shared by MButton's
 * Primary variant and by the handful of student screens whose CTA is a
 * hand-rolled element with its own geometry (a card's inline CTA, a row's
 * compact action, a legacy modal's footer button).
 *
 * WHY IT LIVES HERE AND NOT IN MButton.razor.css
 * Component-scoped CSS cannot be reached by anything outside the component,
 * so a page button could never share MButton's rules. Rather than paste the
 * gradient into six page stylesheets — six copies to drift — the treatment is
 * declared once, globally, and both the component and those pages opt into it
 * by carrying `.motiva-cta`. Page stylesheets keep ONLY geometry (padding,
 * font size, layout); the fill, radius and states all come from here.
 *
 * WHAT IS DELIBERATELY NOT HERE
 * No width, no height, no padding, no font size. Primary actions differ in
 * size by context — a compact "פתיחה" in a row and a wide "+ משימה חדשה" in a
 * toolbar are both correct — and this pass standardizes their TREATMENT, not
 * their dimensions.
 *
 * The unscoped block below restates exactly what .m-btn-primary already
 * painted (same gradient token, same white ink), so it is a no-op for Mentor /
 * Lecturer / Admin. Everything that actually changes — the smaller radius, the
 * shadowless rest state, the brightness-based hover and press — is gated on
 * .motiva.
 */

.motiva-cta {
    /* The product's existing signature sweep. No new colour is introduced
       here: inside .motiva this token already resolves to the
       Master's violet→teal two-stop gradient (motiva-tokens.css). */
    background: var(--motiva-gradient-signature);
    /* Approved exception, the same one MButton documents: no --motiva-* token
       represents "text on brand gradient". */
    color: #fff;
    cursor: pointer;
}

/* WHEN THE CTA IS AN <a>, NOT A <button>
 * Bootstrap styles `a:hover` (specificity 0,1,1), which outranks the
 * `.motiva-cta` rule above (0,1,0). A gradient CTA rendered as a link
 * therefore kept its white ink at rest and fell back to link blue the moment
 * it was hovered — measured as rgb(10,88,202) on the mentor Quick View's
 * "למרחב הפרויקט" CTA — which is close to unreadable on the violet→teal
 * sweep. Every gradient CTA anchor in the product had it.
 *
 * Restating ONLY the ink at each interactive state is the smallest fix that
 * clears `a:hover`: (0,2,0) beats (0,1,1). Nothing here touches the gradient,
 * the radius, the geometry or the brightness steps, and `:disabled` is
 * declared later at equal-or-higher specificity so the disabled treatment
 * still wins for buttons. `:link`/`:visited` guard the same way against
 * Bootstrap's own link colours.
 */
.motiva-cta:link,
.motiva-cta:visited,
.motiva-cta:hover,
.motiva-cta:focus,
.motiva-cta:focus-visible,
.motiva-cta:active {
    color: #fff;
}

.motiva .motiva-cta {
    /* The radius the solid-violet CTAs already used (--motiva-radius-sm, 10px)
       rather than MButton's 14px, which read as a pill at small heights. */
    border-radius: var(--motiva-radius-sm);
    /* "No unnecessary shadow" at rest. --motiva-shadow-sm is already `none`
       inside the Motiva scope; this states it so a page rule cannot leave a
       stray resting shadow behind. */
    box-shadow: none;
    transition: filter var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard);
}

/* Hover and press are a brightness step on the SAME gradient, not a second
   colour: the identity is preserved, nothing new is introduced, and there is
   no size change, lift or bounce. */
.motiva .motiva-cta:hover:not(:disabled) {
    filter: brightness(1.07);
    box-shadow: none;
}

.motiva .motiva-cta:active:not(:disabled) {
    filter: brightness(0.93);
}

.motiva-cta:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.motiva-cta:disabled {
    background: var(--motiva-color-disabled-bg);
    color: var(--motiva-color-disabled-text);
    cursor: not-allowed;
    filter: none;
    box-shadow: none;
}

/* ════════════════════════════════════════════════════════════════════
   .motiva-cta-outline — THE OUTLINED COUNTERPART OF .motiva-cta

   Same signature sweep, carried on the BORDER instead of the fill: white
   interior, dark text, a 1px violet→teal edge. The secondary action's visual
   language, for something that should still read as Motiva's — "עריכת פרטים"
   beside a project title, "העלאת לוגו" in its edit dialog — where a filled
   gradient would outrank the thing it acts on.

   IT INTRODUCES NO GRADIENT OF ITS OWN. The whole recipe is
   `--motiva-tag-brand-surface`, the token the design system already uses
   wherever a brand EDGE is drawn: MStatusBadge's informational variants, the
   request type pills, the project logo tile. It is a three-layer background —
   surface on padding-box, a softening wash on border-box, and
   --motiva-gradient-signature on border-box beneath. Painted this way rather
   than with border-image so the corners stay round, and it needs
   `border: 1px solid transparent` to have an edge to paint into.

   ── ONE RECIPE, THREE SELECTORS, AND WHY ─────────────────────────────
   The declarations appear ONCE. The selector list only climbs specificity so
   the same rule wins wherever it is used, because what it must outrank differs:

     .motiva .motiva-cta-outline
         the base, for any element.
     .motiva.motiva-final .motiva-cta-outline            (0,3,0)
         beats a component's own scoped rule on a raw element — e.g.
         `.pwe-logo-btn[b-…]` (0,2,0), which sets its own border and surface.
     .motiva.motiva-final .m-btn.motiva-cta-outline      (0,4,0)
         beats `.motiva-final .m-btn-secondary[b-…]` (0,3,0) in MButton.razor.css,
         which is what draws the grey outline on a Secondary button. Order alone
         cannot do it: the scoped bundle is linked after this file.

   `.motiva` and `.motiva-final` sit on the SAME shell element, so
   `.motiva.motiva-final` is a compound selector, not a descendant pair.

   Radius, height and padding are deliberately untouched — an element keeps the
   geometry it already had, which is what lets a 34px MButton and a 4px/10px
   label both take this without either being resized.
   ════════════════════════════════════════════════════════════════════ */
.motiva .motiva-cta-outline,
.motiva.motiva-final .motiva-cta-outline,
.motiva.motiva-final .m-btn.motiva-cta-outline {
    border: 1px solid transparent;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
    box-shadow: none;
    cursor: pointer;
}

/* Hover deepens the interior only. The edge is the control's identity, not its
   state, so it does not change. */
.motiva .motiva-cta-outline:hover:not(:disabled),
.motiva.motiva-final .motiva-cta-outline:hover:not(:disabled),
.motiva.motiva-final .m-btn.motiva-cta-outline:hover:not(:disabled) {
    background:
        linear-gradient(var(--motiva-surface-hover), var(--motiva-surface-hover)) padding-box,
        var(--motiva-tag-brand-surface);
    border: 1px solid transparent;
    color: var(--motiva-text-primary);
}

/* FOCUS — the soft brand halo, NOT an outline ring. The edge is already the
   resting treatment, so focus cannot be signalled by colouring it. This is the
   same halo the refined controls use (.m-sel-trigger:focus-visible in
   MSelect.razor.css and the dialog fields), which is what keeps one focus
   language across the system. `outline: none` is safe only because the halo
   replaces it — deliberately NOT the 2px --motiva-color-focus-ring ring that
   was removed from those fields. */
.motiva .motiva-cta-outline:focus-visible,
.motiva.motiva-final .motiva-cta-outline:focus-visible,
.motiva.motiva-final .m-btn.motiva-cta-outline:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--motiva-color-brand-bg);
}


/* Disabled controls: a consistent low-affordance look for any native
   control that doesn't already define its own [disabled] styling.
   Existing component-scoped rules (any selector more specific than
   a bare element+attribute) continue to win — this is a fallback,
   not an override. Bootstrap's own .btn:disabled (opacity 0.65,
   higher specificity) is unaffected. */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Focus-visible: one consistent keyboard-focus ring for elements
   that don't already define their own :focus/:focus-visible style.
   Blazor's CSS isolation gives existing per-component focus rules
   an attribute-selector bump in specificity, so they continue to
   take precedence wherever they already exist — this only lights
   up the gaps. */
:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

/* Reduced motion: collapse any Motiva-driven transition/animation
   to near-instant when the OS requests it. Scoped to the general
   * selector so it also covers future components built on the
   --motiva-motion-* tokens without extra opt-in. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Student experience, final: CTA geometry ─────────────────────────
 * The finalized student screens draw every primary action as a PILL —
 * `border-radius:999px` on gradient fill, hover `brightness(1.08)`, no
 * shadow at any state. The `.motiva .motiva-cta` block above gives the
 * shared treatment a 10px radius, which was right for the previous
 * system and is wrong for this one.
 *
 * Same specificity as that block (0,2,0), declared after it, so it wins
 * for students and changes nothing for Mentor — which still resolves
 * `.motiva .motiva-cta` and keeps its own radius.
 */
.motiva-final .motiva-cta {
    border-radius: var(--motiva-radius-full);
    box-shadow: none;
    transition: filter var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard);
}

.motiva-final .motiva-cta:hover:not(:disabled) {
    filter: brightness(1.08);
    box-shadow: none;
}

.motiva-final .motiva-cta:active:not(:disabled) {
    filter: brightness(0.94);
}

/* The design's disabled CTA is a flat neutral chip, not a dimmed
   gradient — it reads as "not available yet" rather than "broken". */
.motiva-final .motiva-cta:disabled {
    background: var(--motiva-color-neutral-bg);
    color: var(--motiva-text-subtle);
    cursor: default;
    filter: none;
}

/* Focus ring: the final screens use a soft violet wash at 2px with no
   offset, on every control. */
.motiva-final :focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 0;
}

/* ============================================================================
 * .motiva-count — THE numeric count bubble
 *
 * WHY THIS EXISTS
 * The same recipe was written out four times, in four scoped stylesheets, by
 * four unrelated components:
 *
 *   .stn-nav-count          MotivaTopNav        16px · 0 5px · full · violet · #fff · 10/600
 *   .m-filter-tab-badge     MFilterTabs         16px · 0 5px · full · violet · #fff · 10/600
 *   .tst-badge              TaskStatusTabs      16px · 0 5px · full · violet · #fff · 10/600
 *   .m-section-heading-count MSectionHeading    19px pill, its own fill and ink
 *
 * The first three were byte-identical and the fourth had already drifted.
 * Four copies of one idea is not four decisions; it is one decision nobody
 * can change. This is that decision, written once — the same move
 * `.motiva-cta` above makes for primary actions.
 *
 * THE TREATMENT
 * A translucent sweep of the signature gradient with DARK ink on it. The
 * solid violet fill it replaces read as a notification badge — something you
 * must act on — when every one of these bubbles only ever answers "how many
 * are in here". White-on-violet also made the number the loudest thing in a
 * nav item that had a label to read first.
 *
 * `to left` matches --motiva-gradient-signature's own direction, so it runs
 * violet at the reading start to cyan at the reading end like every other
 * gradient in this RTL product. Written out rather than referencing the token
 * because the token is opaque by design and carries no alpha to turn down.
 *
 * NOT AN ALERT. NotificationBell's `.nbell-badge` is deliberately NOT folded
 * in here: it is a rose alert dot that overlays the bell to say "something
 * happened", not a count of rows in a list. Softening it to a brand tint
 * would take the urgency out of the one badge that is meant to carry it.
 * ========================================================================== */

.motiva-count {
    display: inline-block;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: var(--motiva-radius-full);

    background: linear-gradient(to left,
        rgba(109, 40, 245, 0.18),
        rgba(46, 99, 232, 0.14) 60%,
        rgba(15, 168, 194, 0.18));

    /* Dark, never violet. The tint is light enough at these alphas that the
       primary ink clears contrast comfortably on every surface one of these
       sits on — a nav pill, a filter track, a raised white tab, a card. */
    color: var(--motiva-text-primary);

    font-size: var(--motiva-font-size-count, 11px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 18px;
    text-align: center;

    /* Digits read left-to-right even inside an RTL line. */
    direction: ltr;
}


/* ==========================================================================
 * .motiva-panel — THE STANDARD MOTIVA SURFACE, AS A CLASS
 *
 * WHY THIS EXISTS, AND WHY THE TOKENS ALONE WERE NOT ENOUGH.
 *
 * The previous pass made `--motiva-panel-*` the recipe and pointed
 * `.motiva-final .m-card` at it, which fixed every surface drawn BY MCard.
 * It could not fix the ones that are not MCards at all — a page that builds
 * its own `<div class="ltp-list">` gets nothing from a component it never
 * renders, and Blazor's CSS isolation means a page stylesheet cannot import
 * the recipe either. So those pages kept their own copies, and the copies
 * were the pre-panel translucent section: `rgba(255,255,255,.66)` behind a
 * white hairline, which reads as grey-white over the canvas's violet radial.
 * That is exactly what was still on screen after a pass that "migrated
 * everything": the Lecturer team list, the Knowledge Center workspace, the
 * Requests zero-state, the KPI and stat tiles.
 *
 * A token says what the values are. It cannot say "and this div is one of
 * those". This class is the missing half: any element that IS the standard
 * Motiva surface wears it, whether or not a component draws it, and the four
 * values live in exactly one place for both routes.
 *
 * GLOBAL ON PURPOSE. It sits in motiva-base.css rather than in a .razor.css
 * so it reaches every page without a scope id, the same way .motiva-cta and
 * .motiva-count already do. It is deliberately low specificity (0,1,0): a
 * page-scoped rule can still add layout, padding or a fill state on top —
 * it just must not restate the surface.
 *
 * WHAT IT IS NOT FOR: semantic and interactive surfaces. Selected rows,
 * urgent/rose states, filter pills, tags, calendar event chips, inputs and
 * the gradient-bordered highlight card all keep their own fills. This class
 * is the NEUTRAL ground only.
 * ========================================================================== */

.motiva-panel {
    background: var(--motiva-panel-surface, #FFFFFF);
    border: 1px solid var(--motiva-panel-border, rgba(109, 40, 245, 0.08));
    border-radius: var(--motiva-panel-radius, 24px);
    box-shadow: var(--motiva-panel-shadow,
                    0 1px 2px rgba(27, 26, 34, 0.04),
                    0 10px 24px -20px rgba(27, 26, 34, 0.22));
}

/* The smaller member of the family — a tile, KPI or stat card that is the
   same SURFACE at a tighter corner. Same fill, same edge, same lift; only
   the radius steps down to the scale's small-card value, because a 90px-tall
   tile at 24px reads as a bubble. Nothing else may differ. */
.motiva-panel-tile {
    background: var(--motiva-panel-surface, #FFFFFF);
    border: 1px solid var(--motiva-panel-border, rgba(109, 40, 245, 0.08));
    border-radius: var(--motiva-radius-card, 18px);
    box-shadow: var(--motiva-panel-shadow,
                    0 1px 2px rgba(27, 26, 34, 0.04),
                    0 10px 24px -20px rgba(27, 26, 34, 0.22));
}


/* ==========================================================================
 * .motiva-ico-gradient — THE DASHBOARD CARD-HEAD GLYPH
 *
 * Promoted verbatim from LecturerTasksPage's `.lt-ico` / `.lt-grad-def` pair,
 * which is where this treatment was designed (see the long note at
 * LecturerTasksPage.razor.css §"the section glyphs' ink"). It lives here now
 * because the student dashboard's card heads needed the same mark, and the
 * one thing a shared visual signature must not be is two copies of itself.
 *
 * THE GRADIENT IS ON THE MARK ITSELF. There is no tile, no circle and no fill
 * behind it — the stroke is painted by a <linearGradient> paint server, so the
 * brand reads as the drawing rather than as a background the drawing sits on.
 *
 * An SVG stroke cannot take a CSS gradient: `stroke` resolves a paint server,
 * not a background, so the gradient has to exist as a document node and be
 * referenced by id. AppLayout renders that node ONCE per document
 * (`#motivaIconGradient`), which is what makes every glyph in the app provably
 * the same mark instead of N competing ids. Usage:
 *
 *     <span class="sd-head-icon motiva-ico-gradient">
 *       <svg viewBox="0 0 24 24" fill="none" stroke="url(#motivaIconGradient)" …>
 *
 * `color` is still set so a glyph that keeps `stroke="currentColor"` (or an
 * inline <path fill="currentColor">) degrades to dark ink rather than to
 * nothing if the paint server is ever missing.
 * ========================================================================== */

.motiva-ico-gradient {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--motiva-text-primary);
}

/* The paint-server node itself: present in the document, occupying none of
   it. `position:absolute` keeps it out of flow entirely. */
.motiva-grad-def {
    position: absolute;
    width: 0;
    height: 0;
}

/* ==========================================================================
 * .motiva-tag — THE DEFAULT TAG
 *
 * One shape for every informational chip in the product: a category, a type,
 * a stage, a status that is not an alarm. White paper under a 1px Motiva
 * gradient edge, dark ink, compact pill.
 *
 * WHAT IT REPLACED. The system had drifted onto a filled light-violet pill
 * with violet type — restated privately in ~30 page stylesheets across
 * Student, Mentor and Lecturer. Individually each one was defensible; together
 * they made every list a column of violet blocks, so the chips competed with
 * the rows they were annotating and with the CTAs they sat beside. The edge
 * says "this is branded" without spending a filled block to say it.
 *
 * TWO STYLES, NOT SEVEN. Everything informational looks like this. Everything
 * that needs a person NOW stays rose — `.m-badge-rose` / `-warning` /
 * `-danger` and every page-local overdue / late / returned / blocked pill are
 * deliberately untouched. Teal keeps completion. A red chip only works while
 * it is the only loud thing on the row, which is exactly what this buys back.
 *
 * WHERE THE SURFACE COMES FROM: `--motiva-tag-brand-surface` in
 * motiva-tokens.css — the same token MStatusBadge and the page-local pills
 * read, so there is one recipe and no second gradient anywhere.
 *
 * USE IT for a new tag. An EXISTING tag with its own metrics instead reads the
 * token directly (three declarations: the transparent border, primary ink, and
 * one less px of padding per axis to pay for the edge) — which is why the
 * token, not this class, is the shared unit.
 * ========================================================================== */

.motiva-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--motiva-space-xs);
    padding: 5px 12px;
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}

/* A tag is not a control. Even when it sits inside one — a clickable row, a
   card link — it must not light up on hover, or the page grows a second set of
   things that look pressable. */
.motiva-tag:hover {
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
}

/* ==========================================================================
 * THE JOURNEY COUNT, AS A CONTROL — "3 מתוך 7 אבני דרך הושלמו"
 *
 * Two screens state this sentence beside a "מסע הפרויקט" heading — the
 * student dashboard's hero and /project's journey card — and on both it is
 * the way into MilestoneJourneyModal. The recipe lives here, once, rather
 * than in each page's scoped stylesheet, because the affordance has to
 * READ the same in both places or the two entry points stop looking like
 * the same thing.
 *
 * It stays the quiet statistic it already was. What marks it operable is
 * the chevron and a hover that lifts the ink one step — the same treatment
 * a band name gets. Nothing here is violet: this opens a view, it is not
 * an action to take.
 * ========================================================================== */

.motiva-journey-open {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 5px 8px;
    margin-inline-end: -8px;   /* keeps the text on the card's own reading edge */

    border: 0;
    border-radius: var(--motiva-radius-sm);
    background: none;
    font: inherit;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1;
    color: var(--motiva-text-subtle);
    white-space: nowrap;
    cursor: pointer;

    transition: color            var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                background-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.motiva-journey-open:hover {
    color: var(--motiva-text-primary);
    background: rgba(27, 26, 34, 0.04);
}

.motiva-journey-open:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

/* The chevron points along the reading direction. This app sets direction
   in CSS rather than with a dir attribute, so the RTL page gets the glyph
   as drawn (pointing to the reading edge) and no flip rule is needed. */
.motiva-journey-open-chev {
    flex: 0 0 auto;
    opacity: 0.75;
    transition: transform var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.motiva-journey-open:hover .motiva-journey-open-chev { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
    .motiva-journey-open,
    .motiva-journey-open-chev { transition: none; }
}

/* ==========================================================================
 * THE MILESTONE COMPLETION PILL — "3/7 הושלמו"
 *
 * Lives beside .motiva-journey-open because it is what that button holds on
 * both screens that draw it: the student dashboard's journey head and
 * /project's. Declared once for the same reason the affordance is — the two
 * have to read identically or they stop looking like the same control.
 *
 * MILESTONE COMPLETION ONLY. The overall project percentage is a different
 * measure and is deliberately not welded into this pill: it sits beside the
 * page title on /project, in its own badge. One pill, one meaning.
 *
 * Caption-sized and neutral: it annotates a heading, it is not a KPI.
 * ========================================================================== */

.motiva-journey-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;

    padding: 3px 10px;
    border-radius: var(--motiva-radius-full);
    background: rgba(27, 26, 34, 0.05);

    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.4;
    color: var(--motiva-text-muted);
    white-space: nowrap;
}

/* The fraction is Latin digits and a slash inside an RTL line — <bdi> in the
   markup isolates it; tabular figures stop it jittering as the count moves. */
.motiva-journey-frac {
    font-variant-numeric: tabular-nums;
    color: var(--motiva-text-primary);
}

.motiva-journey-open:hover .motiva-journey-pill {
    background: rgba(27, 26, 34, 0.08);
    color: var(--motiva-text-secondary);
}