/* /AuthPages/PrivacyPolicyPage.razor.rz.scp.css */
/* ============================================================
   PrivacyPolicyPage — מדיניות פרטיות
   Prefix: pp-

   A PUBLIC READING PAGE, so it is deliberately plain: one centred
   column on the product's own canvas, no card stack and no chrome.
   Every value is a Motiva token — the page opts into the system with
   `motiva motiva-final` on its root, so nothing here re-invents a
   colour, a face or a radius.
   ============================================================ */

.pp-page[b-dralnzgwgs] {
    min-height: 100vh;
    box-sizing: border-box;
    /* The product's own canvas wash, so a signed-out visitor lands on
       something recognisably Motiva rather than a bare white page. */
    background: var(--motiva-gradient-canvas, var(--motiva-surface-page, #fff));
    padding-block: 48px 64px;
    /* One gutter for the whole page; never less than 20px on a phone. */
    padding-inline: max(20px, 5vw);
    font-family: var(--motiva-font-family);
    color: var(--motiva-text-primary);
}

/* The readable column. ~68ch is the comfortable measure for Hebrew body
   text; the px cap keeps it from stretching on a wide monitor. */
.pp-sheet[b-dralnzgwgs] {
    max-width: min(760px, 100%);
    margin-inline: auto;
}

.pp-head[b-dralnzgwgs] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-block-end: 24px;
}

.pp-logo[b-dralnzgwgs] {
    width: 132px;
    height: auto;
    /* Its own line at the reading edge — a public page needs to say whose
       it is before it says anything else. */
    align-self: flex-start;
}

.pp-title[b-dralnzgwgs] {
    margin: 0;
    font-size: 30px;
    font-weight: var(--motiva-font-weight-bold);
    line-height: var(--motiva-line-height-heading, 1.3);
    letter-spacing: var(--motiva-letter-spacing-page, normal);
    color: var(--motiva-text-primary);
}

/* The opening paragraph carries the context, so it reads one step up
   from the body and in the secondary ink. */
.pp-lede[b-dralnzgwgs] {
    margin: 0 0 8px;
    font-size: var(--motiva-font-size-h3, 17px);
    line-height: 1.7;
    color: var(--motiva-text-secondary);
}

.pp-sec[b-dralnzgwgs] { margin-block-start: 32px; }

.pp-h2[b-dralnzgwgs] {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: var(--motiva-font-weight-bold);
    line-height: var(--motiva-line-height-heading, 1.3);
    color: var(--motiva-text-primary);
}

/* A sub-heading inside a section — used where one section covers two
   distinct sources of data. Deliberately a step BELOW .pp-h2 in both size
   and weight, so the section list stays the page's only top-level rhythm. */
.pp-h3[b-dralnzgwgs] {
    margin: 22px 0 8px;
    font-size: var(--motiva-font-size-h3, 16.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: var(--motiva-line-height-heading, 1.3);
    color: var(--motiva-text-primary);
}

.pp-h3:first-of-type[b-dralnzgwgs] { margin-block-start: 4px; }

/* Enumerations of what is collected / what it is used for. The logical
   `padding-inline-start` is what puts the markers on the RIGHT in this
   RTL page without a [dir] selector — the app sets direction in CSS, so a
   physical padding-left would indent the wrong edge. */
.pp-list[b-dralnzgwgs] {
    margin: 0 0 12px;
    padding-inline-start: 22px;
    padding-inline-end: 0;
    list-style: disc;
}

.pp-list li[b-dralnzgwgs] {
    margin-block-end: 6px;
    font-size: var(--motiva-font-size-lg, 16px);
    line-height: 1.75;
    color: var(--motiva-text-secondary);
}

.pp-list li[b-dralnzgwgs]::marker { color: var(--motiva-text-muted); }

.pp-list li:last-child[b-dralnzgwgs] { margin-block-end: 0; }

/* 16px/1.75 — this is a page someone actually reads end to end, so the
   measure and the leading are set for prose, not for a dense console. */
.pp-text[b-dralnzgwgs] {
    margin: 0 0 12px;
    font-size: var(--motiva-font-size-lg, 16px);
    line-height: 1.75;
    color: var(--motiva-text-secondary);
}

.pp-text:last-child[b-dralnzgwgs] { margin-bottom: 0; }

.pp-mail[b-dralnzgwgs] {
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    text-decoration: none;
    border-radius: var(--motiva-radius-sm);
    /* Latin address in an RTL run — keep it from reordering. */
    unicode-bidi: isolate;
}

.pp-mail:hover[b-dralnzgwgs] { text-decoration: underline; }

.pp-mail:focus-visible[b-dralnzgwgs] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

/* Separated by a hairline rather than a box: it is a timestamp, not a
   section. */
.pp-updated[b-dralnzgwgs] {
    margin: 40px 0 0;
    padding-block-start: 20px;
    border-block-start: 1px solid var(--motiva-border-card);
    font-size: var(--motiva-font-size-body, 14.5px);
    color: var(--motiva-text-muted);
}

@media (max-width: 560px) {
    .pp-page[b-dralnzgwgs]  { padding-block: 32px 48px; }
    .pp-title[b-dralnzgwgs] { font-size: 25px; }
    .pp-h2[b-dralnzgwgs]    { font-size: 17.5px; }
    .pp-h3[b-dralnzgwgs]    { font-size: 16px; }
    .pp-lede[b-dralnzgwgs]  { font-size: 16px; }
    .pp-logo[b-dralnzgwgs]  { width: 112px; }
    .pp-list[b-dralnzgwgs]  { padding-inline-start: 20px; }
}
/* /Components/Accordion/MAccordionItem.razor.rz.scp.css */
/* ============================================================
   MAccordionItem — a bounded management entity that edits in place.

   The whole point of this component is the BOUNDARY: head and body share one
   box with overflow:hidden, and the open state tints the box rather than only
   the head. Splitting those two was what made the previous treatment read as
   unrelated content dropped onto the page.

   Colour discipline: brand tint = "this one is open". Nothing here is rose —
   an expanded row is not an exception state.
   ============================================================ */

.m-acc[b-i8m9y2cm4d] {
    border: 1px solid var(--motiva-border-card, rgba(27, 26, 34, 0.07));
    border-radius: var(--motiva-radius-md, 16px);
    background: var(--motiva-surface-primary, #fff);
    /* Keeps the body's corners inside the box; without it an expanded body
       squares off the item's bottom corners. */
    overflow: hidden;
    transition: border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
                background   var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

/* The tint belongs to the ITEM, not the head — this is the fix. */
.m-acc-open[b-i8m9y2cm4d] {
    border-color: rgba(109, 40, 245, 0.20);
    background: rgba(109, 40, 245, 0.025);
}

.m-acc-disabled[b-i8m9y2cm4d] { opacity: 0.55; }

/* ── Head ────────────────────────────────────────────────── */
.m-acc-head[b-i8m9y2cm4d] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding-inline-end: 10px;
}

/* Open, the head keeps its own bottom edge. Without it the nested body below
   floats in the item's tint with nothing marking where the row ends. */
.m-acc-open .m-acc-head[b-i8m9y2cm4d] {
    border-block-end: 1px solid var(--motiva-border-card, rgba(27, 26, 34, 0.07));
}

.m-acc-toggle[b-i8m9y2cm4d] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 7px 13px;
    border: 0;
    background: none;
    color: var(--motiva-text-primary, #1B1A22);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    text-align: start;
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.m-acc-toggle:hover[b-i8m9y2cm4d] { background: var(--motiva-color-brand-bg, rgba(109, 40, 245, 0.09)); }

.m-acc-toggle:focus-visible[b-i8m9y2cm4d] {
    outline: 2px solid var(--motiva-color-focus-ring, rgba(109, 40, 245, 0.35));
    outline-offset: -2px;
}

.m-acc-disabled .m-acc-toggle[b-i8m9y2cm4d] { cursor: default; }
.m-acc-disabled .m-acc-toggle:hover[b-i8m9y2cm4d] { background: none; }

.m-acc-lead[b-i8m9y2cm4d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* The identity block. min-width:0 so a long project title ellipses instead of
   holding the row open and pushing the meta/status off the end. */
.m-acc-main[b-i8m9y2cm4d] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.m-acc-primary[b-i8m9y2cm4d] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-item, 15px);
    font-weight: 600;
    line-height: 1.25;
    color: var(--motiva-text-primary, #1B1A22);
}

.m-acc-secondary[b-i8m9y2cm4d] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: 400;
    line-height: 1.3;
    color: var(--motiva-text-muted, #6B6779);
}

/* Meta and status stay adjacent to each other at the end of the row rather
   than being spread across the full desktop width — related facts about one
   entity should read as one cluster, not as separate columns. */
.m-acc-meta[b-i8m9y2cm4d] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 320px;
    overflow: hidden;
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--motiva-text-secondary, #4A4657);
}

.m-acc-status[b-i8m9y2cm4d] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.m-acc-chevron[b-i8m9y2cm4d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: var(--motiva-radius-full, 9999px);
    color: var(--motiva-text-faint, #B4B0BF);
    transition: transform var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
                color     var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.m-acc-toggle:hover .m-acc-chevron[b-i8m9y2cm4d] { color: var(--motiva-text-primary, #1B1A22); }

/* A rotation, not a mirrored glyph — correct in both directions by construction. */
.m-acc-open .m-acc-chevron[b-i8m9y2cm4d] {
    transform: rotate(180deg);
    color: var(--motiva-color-violet, #6D28F5);
}

.m-acc-actions[b-i8m9y2cm4d] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* ── Body ────────────────────────────────────────────────── */
/* A NESTED SURFACE, not a second half of the head.

   It used to be a grey slab running the item's full width under a hairline —
   one flat block, so nothing said the controls in it belonged to the row that
   opened them rather than to the panel underneath.

   Now it is an opaque card inset 10px inside the item, sitting ON the item's
   open tint: the tint frames it on all four sides, which is what reads as
   "this content is inside that row". The boundary contract is unchanged —
   head and body still share one box with overflow:hidden, and the tint still
   belongs to the whole item.

   OPAQUE, deliberately. --motiva-surface-muted is translucent white and would
   vanish against the panel this item usually sits on, which is exactly the
   "no visible container" failure this component exists to fix. */
.m-acc-body[b-i8m9y2cm4d] {
    margin: 10px;
    padding: 12px 14px;
    border: 1px solid var(--motiva-border-card, rgba(27, 26, 34, 0.07));
    border-radius: var(--motiva-radius-sm, 12px);
    background: var(--motiva-surface-solid, #fff);
}

/* Content inside the body gets its own layout, not the head's columns. */
.m-acc-body > :first-child[b-i8m9y2cm4d] { margin-block-start: 0; }
.m-acc-body > :last-child[b-i8m9y2cm4d]  { margin-block-end: 0; }

/* ── Responsive ──────────────────────────────────────────── */
/* Below the point where meta + status + identity stop fitting on one line,
   drop the meta rather than let the row wrap into an unscannable block. */
@media (max-width: 820px) {
    .m-acc-meta[b-i8m9y2cm4d] { display: none; }
}
/* /Components/AdminBack/MAdminBack.razor.rz.scp.css */
/* ============================================================
   MAdminBack — the Management area's back arrow.

   The metrics are the form editor's own `.fed-back`, lifted verbatim and
   made shared: a 34px neutral disc, secondary ink, a slightly deeper wash
   on hover. Nothing here is new — that control already existed and worked,
   and this file is what stops every Management page from re-deriving it.

   NEUTRAL BY DEFAULT. No violet at rest, no fill, no border beyond the
   disc's own quiet wash: the page's primary action is elsewhere, and a
   coloured back arrow would compete with both it and the h1.

   Tokens: motiva-tokens.css. The Management pages render inside the canvas
   shell (.motiva .motiva-final .motiva-lecturer), so every --motiva-*
   already resolves to the finished design's value; the var() fallbacks
   exist only so the arrow still renders sanely outside it.
   ============================================================ */

a.m-admin-back[b-ir1uvg48xa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 34px: the same disc the form editor already used, and a comfortable
       target beside a page title without competing with it. */
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.045));
    color: var(--motiva-text-secondary, #5B5568);
    text-decoration: none;
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

/* `a.` is load-bearing: Bootstrap styles `a:hover` at (0,1,1), and the
   element selector puts this at (0,2,1) so the arrow keeps its neutral ink
   instead of falling back to link blue. */
a.m-admin-back:hover[b-ir1uvg48xa] {
    /* The Motiva accent, at the weight a secondary control earns: a violet
       breath and violet ink, not a filled violet button. */
    background: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 10%, transparent);
    color: var(--motiva-color-violet, #4F46E5);
    text-decoration: none;
}

a.m-admin-back:focus-visible[b-ir1uvg48xa] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

a.m-admin-back:active[b-ir1uvg48xa] {
    background: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 16%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    a.m-admin-back[b-ir1uvg48xa] { transition: none; }
}
/* /Components/Badge/MStatusBadge.razor.rz.scp.css */
/* ============================================================
   MStatusBadge — Motiva design system
   All visual values come from --motiva-* tokens (motiva-tokens.css).
   Color always pairs with visible text (Text/ChildContent is required by
   the API — there is no color-only rendering path).
   ============================================================ */

.m-badge[b-8zeyu50gvc] {
    display: inline-flex;
    align-items: center;
    gap: var(--motiva-space-xs);
    /* THE EDGE IS PAID FOR HERE, ONCE, FOR EVERY VARIANT.
       The informational variants below draw a 1px Motiva gradient border;
       rose and teal do not. Declaring the transparent border on the base —
       and taking its 1px back out of the padding — means both kinds of chip
       keep the SAME outer box, so no row, header or filter strip re-flows
       depending on which semantic it happens to be showing. */
    padding: calc(var(--motiva-space-xs) - 1px) calc(var(--motiva-space-sm) - 1px);
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-full);
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-bold);
    line-height: var(--motiva-line-height-caption);
    white-space: nowrap;
}

.m-badge-icon[b-8zeyu50gvc] {
    font-size: var(--motiva-font-size-caption);
}

/* ============================================================
   THE DEFAULT CHIP — white paper, Motiva gradient edge, dark ink.

   Neutral, Info and Violet are the three "here is a fact about this
   row" variants, and all three now draw the SAME object. That is the
   point rather than a side effect: they had been a grey block, a blue
   block and a violet block, which asked the reader to learn a colour
   code that carried no decision. A page of them read as violet noise
   and, worse, left the one chip that DID need a person — the rose one
   — as just another coloured block in a column of coloured blocks.

   Two styles is the whole system now: this, and red.

   The surface is `--motiva-tag-brand-surface` (motiva-tokens.css), the
   single recipe every page-local pill also reads. Nothing here is drawn
   from a second gradient or from a local literal.
   ============================================================ */

.m-badge-neutral[b-8zeyu50gvc],
.m-badge-info[b-8zeyu50gvc],
.m-badge-violet[b-8zeyu50gvc] {
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
}

/* ── Teal keeps completion ───────────────────────────────────
   "Done" is not the same fact as "in review", and green is the one
   non-alarm colour in this product a reader already understands
   without being taught it. It stays a fill. */
.m-badge-success[b-8zeyu50gvc] {
    background: var(--motiva-color-success-bg);
    color: var(--motiva-color-success);
}

/* ── Rose is untouched, deliberately ─────────────────────────
   Warning and Danger are the "act on this now" rungs — overdue,
   returned for fixes, blocked, at risk. They keep their rose fill AND
   their rose ink. The whole reason the informational chips gave up
   their fills is so that these are once again the only loud thing on
   the row. Nothing red is ever converted to the gradient edge. */
.m-badge-warning[b-8zeyu50gvc] {
    background: var(--motiva-color-warning-bg);
    color: var(--motiva-color-warning);
}

.m-badge-danger[b-8zeyu50gvc] {
    background: var(--motiva-color-danger-bg);
    color: var(--motiva-color-danger);
}

/* ============================================================
   CANONICAL VARIANTS — Motiva System Master
   "Three semantic colors only — violet / teal / rose."

   These are additions, not replacements: the five variants above are
   still rendered by existing callers across every role and are left
   byte-identical. Student-scope-only tokens carry a var() fallback to
   their :root peer so the canonical variants also render correctly
   outside .motiva (the /motiva gallery, and any future caller).
   ============================================================ */

/* Violet is folded into the default block above — see it for why. */

.m-badge-teal[b-8zeyu50gvc] {
    background: var(--motiva-color-success-bg);
    color: var(--motiva-color-teal);
}

/* Rose at text weight — the Master uses the darker rose step for labels
   and the lighter one for dots and fills. */
.m-badge-rose[b-8zeyu50gvc] {
    background: var(--motiva-color-danger-bg);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
}

/* ── Approaching ─────────────────────────────────────────────
   The middle rung between Neutral and Rose. A translucent sweep of the
   signature gradient carrying DARK ink, which is the same recipe
   `.motiva-count` uses — so "a soft gradient with black text on it"
   means one thing everywhere in the product rather than two.

   It is deliberately NOT amber. A third hue would be a fourth semantic
   colour in a system whose Master allows three, and the escalation this
   marks is the approach to an ATTENTION threshold, not a warning about a
   deadline — the product has neither an SLA nor a review deadline (see
   MentorAttentionDto's header). Brand tint says "notice this"; rose stays
   the only colour that says "act on this". */
/* QUIET BY DEFAULT — the neutral surface plus a hairline, and nothing
   else. It carried a brand-gradient fill, which made the ordinary case
   (an item that has simply been waiting a day or two) look like the
   loudest thing in its row and read as a call to action.

   A chip is an annotation on a row, not a control on it. The step from
   here to `Attention` is now the only place brand colour enters a chip. */
/* Both rungs now draw the default chip. The grey-plus-hairline of
   Approaching and the brand wash of Attention were two further ways of
   saying "informational" in a system that only needs one — and the
   wash in particular was a filled violet block by another name. The
   waiting LADDER survives where it is load-bearing: MentorAttentionAge
   still escalates to rose when something is genuinely late. */
.m-badge-approaching[b-8zeyu50gvc] {
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
}

/* ── Attention ───────────────────────────────────────────────
   The rung above Approaching and deliberately BELOW Rose in meaning,
   though not in loudness: same brand tint, heavier alpha, plus a ring.

   It exists so a waiting age can escalate without lying. Rose says "past
   a deadline"; nothing in a request or a submission has a deadline to be
   past, so their oldest items needed somewhere to go that was not red.
   Dark ink, like every other brand-tinted surface in this system. */
/* A WASH, NOT A FILL. This was the signature gradient at 0.30 with a
   0.22 ring — loud enough that a page whose rows are mostly in this state
   read as a grid of buttons. A third of that alpha still separates it
   unmistakably from the neutral rung beside it while staying an
   annotation. Dark ink throughout; the tint carries the emphasis. */
.m-badge-attention[b-8zeyu50gvc] {
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
}

/* ============================================================
   STUDENT SCOPE — Master chip metrics
   The Master's chips are 600-weight on a slightly roomier pill than the
   pre-Master badge (700 on 4/8 padding). Applying that under
   .motiva only means the Motiva experiences match the Master
   while Mentor / Lecturer / Staff / Admin render exactly as before —
   the same firewall the token scope itself uses.
   ============================================================ */

.motiva .m-badge[b-8zeyu50gvc] {
    padding-block: 5px;   /* 6px, less the 1px edge */
    padding-inline: 9px;  /* 10px, less the 1px edge */
    font-weight: var(--motiva-font-weight-semibold);
}

/* ============================================================
   STUDENT EXPERIENCE, FINAL — four semantic roles

   The finalized screens use FOUR, not three: violet for action,
   blue for in-progress/assigned, cyan for done/synced, rose for
   attention. `Info` therefore stops folding onto violet and becomes
   the blue role in its own right — which is what makes a "submitted,
   awaiting review" chip readable as different from "needs your
   action". (README.md §3.)

   Chip metrics are the design's: 6/13px pad, 700 weight, pill.
   ============================================================ */

.motiva-final .m-badge[b-8zeyu50gvc] {
    padding: 5px 12px;  /* the design's 6px/13px, less the 1px edge */
    border-radius: var(--motiva-radius-full);
    /* The badge step, shared with .motiva-tag and every date/status pill.
       It was a 12px literal, which is why a status chip sat a pixel under
       the tag beside it and did not move when the product's scale did. */
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1;
}

/* Five roles collapse to two. The design file drew Neutral grey, Info
   blue and Violet violet; in the shipped product that turned a single
   Requests row into three coloured blocks, none of which asked the
   reader to do anything. The gradient edge keeps the object branded
   and gives colour back to the two states that use it to mean
   something. */
.motiva-final .m-badge-neutral[b-8zeyu50gvc],
.motiva-final .m-badge-violet[b-8zeyu50gvc],
.motiva-final .m-badge-info[b-8zeyu50gvc],
.motiva-final .m-badge-approaching[b-8zeyu50gvc],
.motiva-final .m-badge-attention[b-8zeyu50gvc] {
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
    box-shadow: none;
}

/* Done stays teal. */
.motiva-final .m-badge-teal[b-8zeyu50gvc],
.motiva-final .m-badge-success[b-8zeyu50gvc] { background: var(--motiva-color-success-bg);  color: var(--motiva-color-teal-ink); }

/* Attention / error / risk stay rose — the only chip left that raises
   its voice, and now the only one that has to. */
.motiva-final .m-badge-rose[b-8zeyu50gvc],
.motiva-final .m-badge-warning[b-8zeyu50gvc],
.motiva-final .m-badge-danger[b-8zeyu50gvc]  { background: var(--motiva-color-danger-bg);   color: var(--motiva-color-rose-ink); }

/* ============================================================
   SMALL — the time chip

   NOT A NEW BADGE STYLE. Every value below is read off the mentor
   dashboard's own time pills, which are the reference for deadline,
   waiting-age and overdue wording across the mentor experience:

     MentorHomePage.razor.css  .mh-task-due        padding:5px 10px
                               .mh-attn-time-late  radius:full
                                                   11.5px / 600 / 1

   Background and ink are NOT restated — a small badge takes the same
   variant classes, so the semantic colour mapping is literally the
   same declaration a medium badge uses. Only the metrics change.

   WHY A SIZE AND NOT A SECOND COMPONENT: a time chip and a type tag
   are the same object at two scales, which is what a size parameter
   is for. The dashboard already proves the scale step is real — its
   attention item shows a medium type tag and a small time chip on one
   row, and they are not interchangeable.

   THE DASHBOARD ITSELF STILL DECLARES THESE NUMBERS PRIVATELY. Folding
   `.mh-task-due` / `.mh-attn-time-late` onto this size is a markup
   change to the reference screen and is deliberately out of this pass's
   scope; until it happens the two declarations must be kept in step.
   ============================================================ */

.m-badge-small[b-8zeyu50gvc] {
    padding: 4px 9px;  /* 5px/10px, less the 1px edge */
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
}

/* The finished scope re-bases the medium chip to 6/13px at 700, so the
   small one has to be re-stated against it at the same specificity. */
.motiva-final .m-badge-small[b-8zeyu50gvc] {
    padding: 4px 9px;  /* 5px/10px, less the 1px edge */
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
}
/* /Components/Button/MButton.razor.rz.scp.css */
/* ============================================================
   MButton — Motiva design system
   All visual values come from --motiva-* tokens (motiva-tokens.css).
   ============================================================ */

.m-btn[b-0ca6pddn04] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--motiva-space-xs);
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-md);
    font-family: var(--motiva-font-family);
    font-weight: var(--motiva-font-weight-semibold);
    cursor: pointer;
    white-space: nowrap;
    transition: box-shadow var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard),
                background var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard),
                color var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard);
}

/* ── Sizes ────────────────────────────────────────────────── */

.m-btn-small[b-0ca6pddn04] {
    height: var(--motiva-control-height-sm);
    padding-inline: var(--motiva-space-sm);
    font-size: var(--motiva-font-size-sm);
}

.m-btn-medium[b-0ca6pddn04] {
    height: var(--motiva-control-height-md);
    padding-inline: var(--motiva-space-md);
    font-size: var(--motiva-font-size-md);
}

.m-btn-large[b-0ca6pddn04] {
    height: var(--motiva-control-height-lg);
    padding-inline: var(--motiva-space-lg);
    font-size: var(--motiva-font-size-lg);
}

/* ── Student radius ───────────────────────────────────────────
   The student workspace standardizes on the smaller radius its solid CTAs
   already used (--motiva-radius-sm, 10px); MButton's 14px read as a pill on a
   32px-tall Small. Applied to EVERY variant, not just Primary: a save/cancel
   pair with two different corner radii is worse than either radius on its own.

   Scoped to .motiva, and stated here rather than in motiva-base.css so
   it deterministically outranks `.m-btn`'s own rule — Mentor / Lecturer /
   Admin keep 14px, per the standing scope. */
.motiva .m-btn[b-0ca6pddn04] {
    border-radius: var(--motiva-radius-sm);
}

/* ── Variants ─────────────────────────────────────────────── */

.m-btn-primary[b-0ca6pddn04] {
    background: var(--motiva-gradient-signature);
    /* Approved exception: no --motiva-* token represents "text on brand
       gradient". The visual reference (motiva-ui-library-v01.html)
       hardcodes the same literal for .btn.primary. */
    color: #fff;
    box-shadow: var(--motiva-shadow-sm);
}
.m-btn-primary:hover:not(:disabled)[b-0ca6pddn04] {
    box-shadow: var(--motiva-shadow-md);
}

/* The `m-btn-primary-solid` modifier that used to live here — flat violet
   instead of the gradient — has been REMOVED, along with its callers.

   It existed because an earlier reading of the Design System said "one primary
   per screen, solid violet, no gradient". The result in practice was two
   different primaries side by side across the student workspace: the gradient
   on screens using plain Primary, flat violet on the ones that had opted in.
   The product decision is now the gradient, everywhere a primary action
   appears, so the modifier is gone rather than left as a second option that
   would let the split reappear. The shared treatment lives in motiva-base.css
   under `.motiva-cta`, which this component's Primary variant carries. */

.m-btn-secondary[b-0ca6pddn04] {
    background: var(--motiva-surface-primary);
    color: var(--motiva-color-indigo);
    border-color: var(--motiva-border-subtle);
}
.m-btn-secondary:hover:not(:disabled)[b-0ca6pddn04] {
    background: var(--motiva-surface-hover);
}

.m-btn-ghost[b-0ca6pddn04] {
    background: transparent;
    color: var(--motiva-text-muted);
}
.m-btn-ghost:hover:not(:disabled)[b-0ca6pddn04] {
    background: var(--motiva-surface-hover);
    color: var(--motiva-text-primary);
}

.m-btn-danger[b-0ca6pddn04] {
    background: var(--motiva-color-danger);
    color: #fff; /* same approved exception as primary, above */
    box-shadow: var(--motiva-shadow-sm);
}
.m-btn-danger:hover:not(:disabled)[b-0ca6pddn04] {
    box-shadow: var(--motiva-shadow-md);
}

/* ── Disabled ─────────────────────────────────────────────── */

.m-btn:disabled[b-0ca6pddn04] {
    cursor: not-allowed;
    background: var(--motiva-color-disabled-bg);
    color: var(--motiva-color-disabled-text);
    border-color: var(--motiva-color-disabled-border);
    box-shadow: none;
}

/* ── Focus ────────────────────────────────────────────────── */

.m-btn:focus-visible[b-0ca6pddn04] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

/* ── Content (text + optional icon) ──────────────────────────
   align-items/gap were missing here — .m-btn's own align-items:center only
   governs its direct children (this wrapper + the loading spinner), not
   what's inside .m-btn-content itself. Without them, an inline icon glyph
   sits at inline-flex's default `stretch` cross-axis alignment instead of
   centered against the text baseline, and has no spacing from the text.
   Affects every MButton with icon + text anywhere in the app. ── */

.m-btn-content[b-0ca6pddn04] {
    display: inline-flex;
    align-items: center;
    gap: var(--motiva-space-xs);
}

.m-btn-spinner[b-0ca6pddn04] {
    width: 14px;
    height: 14px;
    border-radius: var(--motiva-radius-full);
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    flex-shrink: 0;
    animation: m-btn-spin-b-0ca6pddn04 var(--motiva-motion-duration-slow) linear infinite;
}

/* Reduced-motion is handled globally by motiva-base.css, which collapses
   all animation-duration to near-zero under prefers-reduced-motion:
   reduce. No local override needed or wanted here. */
@keyframes m-btn-spin-b-0ca6pddn04 {
    to { transform: rotate(360deg); }
}
/* ============================================================
   STUDENT EXPERIENCE, FINAL — buttons are pills

   Primary takes the shared `.motiva-cta` treatment (motiva-base.css),
   which is already re-based to a pill for this scope. What is left
   here is the geometry, and the secondary/ghost/danger variants the
   final screens draw as outlined pills. (README.md §5.)
   ============================================================ */

.motiva-final .m-btn[b-0ca6pddn04] {
    border-radius: var(--motiva-radius-full);
    font-weight: var(--motiva-font-weight-semibold);
    box-shadow: none;
}

/* THE THREE STEPS READ THE SCALE. They were 12.5 / 13 / 15 literals, so a
   button sat a pixel under the tab beside it and did not move when the
   product's scale did. Padding is untouched — only the type. */
.motiva-final .m-btn-small[b-0ca6pddn04]  { padding: 9px 17px;  font-size: var(--motiva-font-size-sm, 12.5px); }
.motiva-final .m-btn-medium[b-0ca6pddn04] { padding: 11px 20px; font-size: var(--motiva-font-size-control, 13px); }
.motiva-final .m-btn-large[b-0ca6pddn04]  { padding: 13px 24px; font-size: var(--motiva-font-size-lg, 15px); }

.motiva-final .m-btn-secondary[b-0ca6pddn04] {
    background: transparent;
    border: 1.5px solid var(--g-border);
    color: var(--motiva-text-secondary);
}

.motiva-final .m-btn-secondary:hover:not(:disabled)[b-0ca6pddn04] {
    background: transparent;
    border-color: rgba(27, 26, 34, 0.3);
    color: var(--motiva-text-primary);
}

/* The gradient-outline secondary treatment (.motiva-cta-outline) is NOT here.
   It began in this file, to outrank `.motiva-final .m-btn-secondary` above —
   then the same treatment was needed on a raw <label> (the logo upload control
   in ProjectIdentityEditModal), which cannot carry this component's scope
   attribute. A scoped copy plus a global one would have been two homes for one
   recipe, so it lives once in motiva-base.css beside .motiva-cta, with a
   selector strong enough for both cases. See the block there. */

.motiva-final .m-btn-ghost[b-0ca6pddn04] {
    background: transparent;
    border: none;
    color: var(--motiva-text-muted);
}

.motiva-final .m-btn-ghost:hover:not(:disabled)[b-0ca6pddn04] {
    background: transparent;
    color: var(--motiva-text-primary);
}

.motiva-final .m-btn-danger[b-0ca6pddn04] {
    background: var(--motiva-color-rose);
    color: #fff; /* approved exception: ink on a filled brand surface */
    border: none;
}

.motiva-final .m-btn-danger:hover:not(:disabled)[b-0ca6pddn04] { filter: brightness(1.08); }
/* /Components/Card/MCard.razor.rz.scp.css */
/* ============================================================
   MCard — Motiva design system
   All visual values come from --motiva-* tokens (motiva-tokens.css).
   ============================================================ */

.m-card[b-eqejsl12e8] {
    background: var(--motiva-surface-primary);
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-lg);
    box-shadow: var(--motiva-shadow-sm);
}

.m-card-elevated[b-eqejsl12e8] {
    box-shadow: var(--motiva-shadow-md);
}

/* Ambient gradient wash. Per MOTIVA_FOUNDATIONS.md this must stay subtle —
   it is the same --motiva-gradient-ambient token used for hero bands, not a
   bespoke, stronger gradient invented for cards. */
.m-card-ambient[b-eqejsl12e8] {
    background: var(--motiva-gradient-ambient);
    box-shadow: var(--motiva-shadow-sm);
}

/* Solid — an opaque fill on an otherwise translucent surface language.
   Outside .motiva-student the section surface is already opaque, so this
   resolves to the default card and introduces no second look. */
.m-card-solid[b-eqejsl12e8] {
    background: var(--motiva-surface-primary);
}

/* ── AmbientEdge ──────────────────────────────────────────────
   The Master's highest-emphasis surface. The gradient IS the card's
   background and a 1px padding lets it show as a hairline rule around
   the real surface, which sits on top in .m-card-inner. Drawn this way
   rather than with border-image so the corners stay properly rounded.

   The compound selector is deliberate: it has to outrank the
   .m-card-padding-* rules below, which would otherwise zero out the 1px
   that makes the rule visible. Padding for this variant is therefore
   applied to the inner surface instead — see the block after it. */
.m-card.m-card-ambientedge[b-eqejsl12e8] {
    display: flex;
    padding: 1px;
    border: 0;
    box-shadow: none;
    background: var(--motiva-gradient-edge, var(--motiva-border-card));
}

.m-card-ambientedge > .m-card-inner[b-eqejsl12e8] {
    flex: 1;
    min-width: 0;
    background: var(--motiva-surface-primary);
    /* One pixel tighter than the card so the rule reads as an even hairline
       all the way around the corner rather than pinching at the arcs. */
    border-radius: calc(var(--motiva-radius-lg) - 1px);
}

.m-card-ambientedge.m-card-padding-none   > .m-card-inner[b-eqejsl12e8] { padding: 0; }
.m-card-ambientedge.m-card-padding-small  > .m-card-inner[b-eqejsl12e8] { padding: var(--motiva-space-sm); }
.m-card-ambientedge.m-card-padding-medium > .m-card-inner[b-eqejsl12e8] { padding: var(--motiva-space-lg); }
.m-card-ambientedge.m-card-padding-large  > .m-card-inner[b-eqejsl12e8] { padding: var(--motiva-space-xl); }

/* ── Fill ─────────────────────────────────────────────────────
   Height comes from the parent track, and the content becomes a column
   so a scroll region inside can take the remaining space. min-height:0
   is what actually lets that region shrink and scroll instead of
   pushing the card past its track. */

.m-card-fill[b-eqejsl12e8] {
    height: 100%;
    box-sizing: border-box;
    /* A grid/flex item defaults to min-width:auto, i.e. it refuses to shrink
       below its own min-content width — so a single nowrap heading inside the
       card can hold the whole track open and push the page into horizontal
       overflow at narrow widths. A card that is explicitly told to fill its
       track must be allowed to shrink with it — on both axes, so a long list
       inside scrolls rather than stretching the track. */
    min-width: 0;
    min-height: 0;
}

.m-card-fill:not(.m-card-ambientedge)[b-eqejsl12e8] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.m-card-fill.m-card-ambientedge > .m-card-inner[b-eqejsl12e8] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.m-card-interactive[b-eqejsl12e8] {
    cursor: pointer;
    transition: box-shadow var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard);
}
.m-card-interactive:hover[b-eqejsl12e8] {
    box-shadow: var(--motiva-shadow-md);
}
.m-card-interactive:focus-visible[b-eqejsl12e8] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

/* ── Padding ──────────────────────────────────────────────── */

.m-card-padding-small[b-eqejsl12e8]  { padding: var(--motiva-space-sm); }
.m-card-padding-medium[b-eqejsl12e8] { padding: var(--motiva-space-lg); }
.m-card-padding-large[b-eqejsl12e8]  { padding: var(--motiva-space-xl); }
.m-card-padding-none[b-eqejsl12e8]   { padding: 0; }

/* "None" zeroes the card's own padding so ChildContent runs edge-to-edge, but
   the header (icon/title/trailing) is a sibling of ChildContent inside that
   same box — without its own inset it would sit flush against the rounded
   corners too. This rule only matches under .m-card-padding-none, so
   Small/Medium/Large are never affected and never get double padding: the
   header there still relies purely on .m-card's own (unchanged) padding. */
.m-card-padding-none .m-card-header[b-eqejsl12e8] {
    padding-inline: var(--motiva-space-lg);
    padding-block-start: var(--motiva-space-lg);
}

/* ── Header (optional: Icon / Title / Subtitle / TrailingContent) ───
   align-items: flex-start keeps the icon and TrailingContent pinned to
   the top of the row regardless of how many lines Title wraps to —
   center-aligning would drift them toward the middle of a wrapped
   multi-line title, which reads as misaligned. */

.m-card-header[b-eqejsl12e8] {
    display: flex;
    align-items: flex-start;
    gap: var(--motiva-space-sm);
    margin-block-end: var(--motiva-space-md);
}

.m-card-header-icon[b-eqejsl12e8] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fixed to Title's own first-line box height (font-size * line-height),
       both already-existing tokens — not a hand-tuned pixel guess. Icon
       content (whatever font-size a consumer's own glyph uses) centers
       inside this box via align-items/justify-content above, so its visual
       center lands on Title's first-line center regardless of the icon's
       own size. Height-based (not a margin nudge) so it works the same
       whether or not Title wraps, since align-items: flex-start on
       .m-card-header keeps both boxes top-anchored together. */
    height: calc(var(--motiva-font-size-h3) * var(--motiva-line-height-heading));
    font-size: var(--motiva-font-size-lg);
    line-height: 1;
    color: var(--motiva-text-secondary);
}

.m-card-header-text[b-eqejsl12e8] {
    flex: 1 1 auto;
    min-width: 0; /* allows Title to wrap instead of overflowing the flex row */
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-xs);
}

.m-card-title[b-eqejsl12e8] {
    margin: 0;
    font-size: var(--motiva-font-size-h3);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: var(--motiva-line-height-heading);
    color: var(--motiva-text-primary);
}

.m-card-subtitle[b-eqejsl12e8] {
    margin: 0;
    font-size: var(--motiva-font-size-sm);
    line-height: var(--motiva-line-height-caption);
    color: var(--motiva-text-secondary);
}

.m-card-header-trailing[b-eqejsl12e8] {
    flex-shrink: 0;
    margin-inline-start: auto;
    display: flex;
    align-items: center;
}
/* ============================================================
   EVERY FINISHED ROLE, ONE PANEL — the canonical Motiva surface

   THIS RULE IS THE SYSTEM'S ANSWER TO "what does a card look like",
   and until the cross-role consistency pass it was one of five.

   It used to draw the reference's TRANSLUCENT section:
   rgba(255,255,255,.66) behind a rgba(255,255,255,.85) hairline. That is
   right for a small card sitting ON a panel and wrong for the panel
   itself — at panel size the canvas's violet radial reads through as a
   grey cast, so a page built from these looked faded beside one built
   from #FFFFFF. Which is why five different screens each solved it
   privately, and why the same object arrived in five shades of white:

     · Mentor / Lecturer Home  #FFFFFF, violet hairline, 26px  (literals)
     · Student Dashboard       #FFFFFF, violet hairline, 26px  (tokens)
     · Request workspace       #FFFFFF, violet hairline, 22px
     · MDataTable (Admin)      #FFFFFF, WHITE hairline,  24px, own shadow
     · everything else         rgba(255,255,255,.66),    24px  ← this rule

   The --motiva-panel-* tokens were written to end that, but they were
   never made the DEFAULT, so a page only got the panel if it knew to ask.
   Now the default IS the panel: Mentor Calendar, פרויקטים בהנחייתי,
   Lecturer Tasks, Resources, Planning, the profiles and the project
   workspace all pick it up without a line of their own, and the five
   private copies collapse into one recipe.

   WHAT IS NOT FOLDED IN: the semantic surfaces. Rose/attention fills,
   selected states, filter pills, tags and calendar event chips keep
   their own colour — a panel token is a NEUTRAL ground, not a repaint.
   ============================================================ */

.motiva-final .m-card[b-eqejsl12e8] {
    background: var(--motiva-panel-surface);
    border: 1px solid var(--motiva-panel-border);
    border-radius: var(--motiva-panel-radius);
    box-shadow: var(--motiva-panel-shadow);
}

/* Elevated is the same surface — the final design has ONE section
   treatment, and a second elevation would introduce a distinction the
   screens do not draw. */
.motiva-final .m-card-elevated[b-eqejsl12e8] {
    background: var(--motiva-panel-surface);
    box-shadow: var(--motiva-panel-shadow);
}

/* Solid was "the one opaque section per screen", back when every other
   section was translucent. Every section is opaque now, so the variant
   has nothing left to say and resolves to the panel rather than to a
   second white one shade off it. Kept as a name, not as a look. */
.motiva-final .m-card.m-card-solid[b-eqejsl12e8] {
    background: var(--motiva-panel-surface);
    border-color: var(--motiva-panel-border);
}

/* Ambient: the wash lives on the canvas behind the card, so a card that
   paints its own would double it. Resolves to the panel surface. */
.motiva-final .m-card-ambient[b-eqejsl12e8] {
    background: var(--motiva-panel-surface);
}

/* AmbientEdge kept its gradient hairline in the previous system. The
   final design uses that treatment for exactly two things — the
   "רלוונטי לשלב שלך" strip and the calendar's create form — and both
   draw it over an OPAQUE fill at 1.5px, not over a translucent one, or
   the gradient shows through the card. */
.motiva-final .m-card.m-card-ambientedge[b-eqejsl12e8] {
    padding: 1.5px;
    background: linear-gradient(to left,
        rgba(109, 40, 245, 0.50),
        rgba(46, 99, 232, 0.40) 60%,
        rgba(15, 168, 194, 0.45));
    box-shadow: var(--motiva-shadow-md);
}

.motiva-final .m-card-ambientedge > .m-card-inner[b-eqejsl12e8] {
    background: var(--motiva-panel-surface);
    border-radius: calc(var(--motiva-panel-radius) - 1.5px);
}

/* The design's own section padding: 22px block-start, 26px inline. The
   spacing scale has no peer for either, so both stay literal — snapping
   them onto a token would visibly change every panel's proportions. */
/* Density pass: the reference's 22/26 inset is right for a card that owns a
   whole screen, and too generous for four cards sharing a laptop viewport.
   Trimmed on the BLOCK axis only — the inline inset is what gives the text
   its measure, so it is left alone. */
.motiva-final .m-card-padding-medium[b-eqejsl12e8] { padding: 18px 24px; }
.motiva-final .m-card-padding-large[b-eqejsl12e8]  { padding: 18px 26px 20px; }
.motiva-final .m-card-padding-small[b-eqejsl12e8]  { padding: 14px 18px; }

.motiva-final .m-card-ambientedge.m-card-padding-medium > .m-card-inner[b-eqejsl12e8] { padding: 18px 24px; }
.motiva-final .m-card-ambientedge.m-card-padding-large  > .m-card-inner[b-eqejsl12e8] { padding: 18px 26px 20px; }
.motiva-final .m-card-ambientedge.m-card-padding-small  > .m-card-inner[b-eqejsl12e8] { padding: 14px 18px; }

/* Interactive cards lift on hover by deepening the edge and the drop, not
   by moving — the final screens have no transform anywhere.

   It used to brighten the FILL toward opaque (rgba(255,255,255,.82)),
   which was the right gesture while the card was translucent and is a
   no-op now that it is #FFFFFF — worse, on some canvases it read as the
   card getting DARKER. The lift moved to the two properties that still
   have somewhere to go. */
.motiva-final .m-card-interactive:hover[b-eqejsl12e8] {
    border-color: color-mix(in srgb, var(--motiva-color-violet) 16%, transparent);
    box-shadow: var(--motiva-shadow-md);
    transform: none;
}
/* /Components/Confirm/MConfirmDialog.razor.rz.scp.css */
/* ============================================================
   MConfirmDialog — Motiva design system

   Every value here is the finalized /tasks confirmation dialog
   (StudentTasksPage.razor.css, .tsk-confirm-*) moved verbatim. Nothing
   was re-tuned in the move: same 440px/90vw width, same 24px modal
   radius, same 8/18px button geometry, same rose danger fill.
   ============================================================ */

.m-confirm-overlay[b-6vpi8vzb12] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--motiva-z-modal);
    outline: none; /* tabindex="-1" is for Escape, not a visible focus ring */
}

.m-confirm-dialog[b-6vpi8vzb12] {
    background: var(--motiva-surface-primary);
    border-radius: var(--motiva-radius-xl);
    box-shadow: var(--motiva-shadow-lg);
    padding: var(--motiva-space-lg) var(--motiva-space-xl);
    width: min(440px, 90vw);
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-md);
}

.m-confirm-head[b-6vpi8vzb12] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.m-confirm-icon-primary[b-6vpi8vzb12] { font-size: var(--motiva-font-size-h2, 22px); color: var(--motiva-color-violet, var(--motiva-color-indigo)); }
.m-confirm-icon-danger[b-6vpi8vzb12]  { font-size: var(--motiva-font-size-h2, 22px); color: var(--motiva-color-rose, var(--motiva-color-danger)); }

.m-confirm-title[b-6vpi8vzb12] {
    font-size: var(--motiva-font-size-h2);
    font-weight: var(--motiva-font-weight-bold);
    line-height: var(--motiva-line-height-heading);
    color: var(--motiva-text-primary);
    margin: 0;
}

.m-confirm-body[b-6vpi8vzb12] {
    font-size: var(--motiva-font-size-md);
    color: var(--motiva-text-secondary);
    margin: 0;
    line-height: var(--motiva-line-height-body);
}

.m-confirm-error[b-6vpi8vzb12] {
    padding: 10px 14px;
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-color-danger-bg);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    font-size: var(--motiva-font-size-sm);
}

.m-confirm-actions[b-6vpi8vzb12] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.m-confirm-cancel[b-6vpi8vzb12],
.m-confirm-ok[b-6vpi8vzb12] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: var(--motiva-radius-sm);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
    cursor: pointer;
    border: 1px solid transparent;
    /* Stated on this side because the shared .motiva-cta rule carries equal
       specificity — without it the gradient's hover would snap. */
    transition: opacity var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                filter  var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard);
}

.m-confirm-cancel[b-6vpi8vzb12] {
    background: var(--motiva-surface-secondary);
    border-color: var(--motiva-border-subtle);
    color: var(--motiva-text-secondary);
}

/* No fill on .m-confirm-ok in the Primary tone: it carries the shared
   `.motiva-cta` class, which owns the gradient, radius and hover. Only the
   danger tone declares its own. */
.m-confirm-danger[b-6vpi8vzb12] {
    background: var(--motiva-color-rose, var(--motiva-color-danger));
    color: #fff;
}

.m-confirm-cancel:hover:not(:disabled)[b-6vpi8vzb12] { opacity: 0.8; }
.m-confirm-ok:hover:not(:disabled)[b-6vpi8vzb12]     { opacity: 0.88; }

.m-confirm-cancel:disabled[b-6vpi8vzb12],
.m-confirm-ok:disabled[b-6vpi8vzb12] {
    opacity: 0.55;
    cursor: not-allowed;
}

.m-confirm-spinner[b-6vpi8vzb12] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-block-start-color: #fff;
    border-radius: var(--motiva-radius-full);
    animation: m-confirm-spin-b-6vpi8vzb12 0.65s linear infinite;
}

@keyframes m-confirm-spin-b-6vpi8vzb12 {
    to { transform: rotate(360deg); }
}

@media (max-width: 600px) {
    .m-confirm-dialog[b-6vpi8vzb12] { padding: var(--motiva-space-md); }
}

/* ============================================================
   STUDENT EXPERIENCE, FINAL

   The dialog was lifted from the previous system's /tasks confirm.
   These rules bring it onto the finalized modal language: the soft
   ink scrim, radius 26, pill buttons, and the design's own inline
   destructive-confirm tint. (README.md §4–5.)
   ============================================================ */

.motiva-final .m-confirm-overlay[b-6vpi8vzb12] { background: var(--motiva-scrim); }

.motiva-final .m-confirm-dialog[b-6vpi8vzb12] {
    border-radius: var(--motiva-radius-xl);
    box-shadow: var(--motiva-shadow-lg);
    padding: 26px 28px 24px;
    width: min(440px, calc(100vw - 52px));
    gap: 14px;
}

.motiva-final .m-confirm-title[b-6vpi8vzb12] {
    font-size: var(--motiva-font-size-h3, 18px);
    letter-spacing: var(--motiva-letter-spacing-section);
    line-height: 1;
}

.motiva-final .m-confirm-body[b-6vpi8vzb12] {
    font-size: var(--motiva-font-size-body, 14px);
    line-height: 1.5;
    color: var(--motiva-text-muted);
}

.motiva-final .m-confirm-error[b-6vpi8vzb12] {
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-color-danger-bg);
    color: var(--motiva-color-rose-ink);
}

.motiva-final .m-confirm-actions[b-6vpi8vzb12] { gap: 14px; }

.motiva-final .m-confirm-cancel[b-6vpi8vzb12],
.motiva-final .m-confirm-ok[b-6vpi8vzb12] {
    padding: 10px 18px;
    border-radius: var(--motiva-radius-full);
    font-size: var(--motiva-font-size-sm, 13px);
}

.motiva-final .m-confirm-cancel[b-6vpi8vzb12] {
    background: transparent;
    border-color: transparent;
    color: var(--motiva-text-muted);
}

.motiva-final .m-confirm-cancel:hover:not(:disabled)[b-6vpi8vzb12] {
    background: transparent;
    color: var(--motiva-text-primary);
    opacity: 1;
}

.motiva-final .m-confirm-danger[b-6vpi8vzb12] { background: var(--motiva-color-rose); }
.motiva-final .m-confirm-danger:hover:not(:disabled)[b-6vpi8vzb12] { filter: brightness(1.08); opacity: 1; }
/* /Components/CopyLink/MCopyLinkAction.razor.rz.scp.css */
/* ============================================================
   MCopyLinkAction
   Prefix: mcl-

   A compact ACTION, not a URL display. The address lives in the label's
   `title` and in the clipboard; the screen shows the action. Printing the
   full URL across a page header is what turned the old Management hub into
   a link viewer for an address most visits never need.

   Values are StudentRegistrationLink's, moved here unchanged when the two
   callers were folded onto one implementation — the outline pill is the
   quiet violet-edged control the product already uses for a secondary
   action beside a heading.
   ============================================================ */

.mcl[b-e9sfhn7ve0] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 7px 8px 7px 12px;
    border: 1px solid var(--motiva-border-card, rgba(27, 26, 34, 0.07));
    border-radius: var(--motiva-radius-sm, 12px);
    background: var(--motiva-surface-solid, #fff);
}

.mcl-label[b-e9sfhn7ve0] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: 600;
    line-height: 1.3;
    color: var(--motiva-text-secondary, #4A4657);
}

.mcl-btn[b-e9sfhn7ve0] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    height: 28px;
    padding-inline: 12px;
    border: 1px solid rgba(109, 40, 245, 0.20);
    border-radius: var(--motiva-radius-full, 9999px);
    background: transparent;
    color: var(--motiva-color-violet, #6D28F5);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 12px);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
                border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
                color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.mcl-btn:hover[b-e9sfhn7ve0] { background: rgba(109, 40, 245, 0.07); }

.mcl-btn:focus-visible[b-e9sfhn7ve0] {
    outline: 2px solid var(--motiva-color-focus-ring, rgba(109, 40, 245, 0.35));
    outline-offset: 2px;
}

/* Teal is completion in this system — the confirmation is the same colour role
   a finished task carries, not a second brand accent. */
.mcl-btn-done[b-e9sfhn7ve0] {
    border-color: rgba(15, 168, 194, 0.30);
    color: var(--motiva-color-teal-ink, #0F8FA6);
}

.mcl-btn-done:hover[b-e9sfhn7ve0] { background: rgba(15, 168, 194, 0.07); }
/* /Components/DataTable/MDataTable.razor.rz.scp.css */
/* ============================================================
   MDataTable — the Management area's tabular surface.

   Visual source:
       design-reference/Motiva Admin Users.dc.html  (the "TABLE" section)

   Everything here is the SHARED rhythm — surface, head, dividers, hover,
   cell inset. Anything specific to what a cell contains belongs in the
   calling page's own stylesheet.

   ::deep is load-bearing on every rule that touches th / tr / td: those
   elements come from the caller's RenderFragment and therefore carry the
   CALLER's isolation attribute, not this component's. `.m-dt-scroll` is
   rendered here, so it carries ours and can host the descendant combinator.
   ============================================================ */

.m-dt[b-414iypovns] {
    /* THE SHARED PANEL. A management table is the primary surface of its
       screen — the same object the Mentor Home cards, the calendar grid and
       the request queue are — so it takes the same recipe rather than the
       fourth near-miss it used to carry: a white .85 hairline (a highlight,
       not an outline, so Admin tables had no visible edge at all) over a
       hand-rolled −28px haze that was a percent or two off the panel drop
       everywhere else. */
    background: var(--motiva-panel-surface, #fff);
    border: 1px solid var(--motiva-panel-border, rgba(109, 40, 245, 0.08));
    border-radius: var(--motiva-panel-radius, var(--motiva-radius-lg, 18px));
    box-shadow: var(--motiva-panel-shadow,
                    0 1px 2px rgba(26, 24, 32, 0.04),
                    0 14px 34px -28px rgba(26, 24, 32, 0.22));

    /* A table inside a flex/grid track refuses to shrink below its
       min-content width by default, which is exactly how a wide table
       pushes a whole page into horizontal scroll. */
    min-width: 0;
}

/* ── The horizontal scroller ─────────────────────────────────
   `overflow: visible` at desktop width is not laziness — it is the only
   value under which a row's absolutely-positioned kebab menu can paint
   outside the table box. `overflow-x: auto` clips its descendants on BOTH
   axes even while nothing is scrolling, so it cannot be the resting state.

   Below 1000px the table genuinely does not fit, scrolling engages, and a
   menu near the bottom edge may be clipped — the deliberate trade, because
   the alternative (page-level horizontal scroll) breaks the whole shell
   rather than one popup. Desktop is the Admin priority.

   1000px is paired with the ~920px MinWidth the Users table declares plus
   the canvas's 40px side insets: it is the viewport at which that table
   stops fitting. A caller with a substantially different MinWidth should
   restate this breakpoint from its own stylesheet
   (`.its-page ::deep .m-dt-scroll { … }`) rather than widen it here. */
.m-dt-scroll[b-414iypovns] {
    overflow: visible;
    border-radius: inherit;
}

@media (max-width: 1000px) {
    .m-dt-scroll[b-414iypovns] {
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }
}

.m-dt-table[b-414iypovns] {
    width: 100%;
    /* Makes the caller's <colgroup> authoritative — without it a long
       email widens its own column and breaks alignment row to row. */
    table-layout: fixed;
    /* `separate` (not collapse) so the last row's corner cells can carry a
       radius and the hover wash follows the card's rounded bottom. */
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
}

/* ── Head ────────────────────────────────────────────────────
   Reference: 11.5px / 600 in --ink-3, a single hairline under the row, and
   noticeably tighter vertical padding than a body row. Column labels are
   signage, not content. */
.m-dt-head[b-414iypovns]  th {
    padding: 14px 10px 12px;
    text-align: start;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
    border-bottom: 1px solid var(--motiva-border-subtle, #F0EEF9);
}

/* The outer cells align with the card's own inset rather than with the
   inter-column gap. */
.m-dt-head[b-414iypovns]  th:first-child { padding-inline-start: 18px; }
.m-dt-head[b-414iypovns]  th:last-child  { padding-inline-end: 18px; }

/* ── Body rows ───────────────────────────────────────────────
   The divider is lighter than the head's — the head separates two kinds of
   thing, a row divider only separates two of the same kind. */
.m-dt-body[b-414iypovns]  td {
    padding: 11px 10px;
    vertical-align: middle;
    border-bottom: 1px solid var(--motiva-border-subtle, #F0EEF9);
}

.m-dt-body[b-414iypovns]  td:first-child { padding-inline-start: 18px; }
.m-dt-body[b-414iypovns]  td:last-child  { padding-inline-end: 18px; }

/* No rule under the last row: the card's own edge already closes the list. */
.m-dt-body[b-414iypovns]  tr:last-child > td { border-bottom: 0; }

/* Logical corners, so RTL and LTR both round the physically correct pair. */
.m-dt-body[b-414iypovns]  tr:last-child > td:first-child {
    border-end-start-radius: calc(var(--motiva-radius-lg, 18px) - 1px);
}

.m-dt-body[b-414iypovns]  tr:last-child > td:last-child {
    border-end-end-radius: calc(var(--motiva-radius-lg, 18px) - 1px);
}

/* Hover is a violet breath at 3%, the reference's value — enough to track a
   row across seven columns, far too faint to read as a selection. */
.m-dt-body[b-414iypovns]  tr:hover > td {
    background: var(--motiva-color-brand-bg, rgba(79, 70, 229, 0.10));
    background: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 3%, transparent);
}

/* An open row menu holds its row lit, so the popup is visibly anchored to
   the row it acts on. The caller opts in by putting .m-dt-row-active on
   the <tr>. */
.m-dt-body[b-414iypovns]  tr.m-dt-row-active > td {
    background: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 3%, transparent);
}

/* ── Loading / empty ─────────────────────────────────────────
   Both states replace the rows rather than sitting under them, so the
   table never shows a head over a body that means nothing. */
.m-dt-state-row > td[b-414iypovns] {
    border-bottom: 0;
    padding: 0;
}

.m-dt-state[b-414iypovns] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 44px 20px;
    font-size: var(--motiva-font-size-item, 14px);
    color: var(--motiva-text-muted, #8B8698);
}

.m-dt-state-empty[b-414iypovns] { padding: 28px 20px 36px; }

.m-dt-spinner[b-414iypovns] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border: 2px solid color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 16%, transparent);
    border-top-color: var(--motiva-color-violet, #4F46E5);
    border-radius: 50%;
    animation: m-dt-spin-b-414iypovns 0.7s linear infinite;
}

@keyframes m-dt-spin-b-414iypovns { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .m-dt-spinner[b-414iypovns] { animation-duration: 2.4s; }
}
/* /Components/DateTime/MDateField.razor.rz.scp.css */
/* =========================================================
   MDateField — Motiva date field + calendar panel.

   Geometry and colour come entirely from the Motiva tokens the
   surrounding form already uses, so the field is indistinguishable
   from the text inputs above it until it is opened.
   ========================================================= */

.mdf[b-2hfzcfp2eh] { position: relative; }

/* ── Trigger ──
   Sized and bordered exactly like a Motiva text input, because that is
   what it stands in for. */
.mdf-trigger[b-2hfzcfp2eh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--motiva-space-sm);
    width: 100%;
    box-sizing: border-box;
    min-height: var(--motiva-control-height-md);
    padding: 10px 12px;
    border: 1px solid var(--motiva-border-strong);
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-primary);
    font-family: inherit;
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-medium);
    text-align: start;
    cursor: pointer;
    transition: border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mdf-trigger:hover:not(:disabled)[b-2hfzcfp2eh] { border-color: var(--motiva-color-violet, var(--motiva-color-indigo)); }

/* Open reads as focus: the panel below it is the continuation of this
   control, not a separate thing that happens to be nearby. */
.mdf-trigger-open[b-2hfzcfp2eh] { border-color: var(--motiva-color-violet, var(--motiva-color-indigo)); }

.mdf-trigger-invalid[b-2hfzcfp2eh] { border-color: var(--motiva-color-rose-ink, var(--motiva-color-danger)); }

.mdf-trigger:focus-visible[b-2hfzcfp2eh] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 1px;
}

.mdf-trigger:disabled[b-2hfzcfp2eh] {
    background: var(--motiva-color-disabled-bg);
    color: var(--motiva-color-disabled-text);
    cursor: not-allowed;
}

.mdf-value[b-2hfzcfp2eh] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mdf-placeholder[b-2hfzcfp2eh] { color: var(--motiva-text-muted); font-weight: var(--motiva-font-weight-regular); }

.mdf-icon[b-2hfzcfp2eh] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--motiva-text-muted);
}

/* ── Panel ──
   IN FLOW, not absolutely positioned. MModal's dialog is overflow:hidden
   with a scrolling body, so an absolute panel would be clipped exactly
   when the form is long enough to need one — and a panel that pushes
   content down cannot cover a field the user is still reading. */
.mdf-panel[b-2hfzcfp2eh] {
    margin-block-start: 6px;
    padding: var(--motiva-space-sm);
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-elevated, var(--motiva-surface-primary));
    box-shadow: var(--motiva-shadow-md);
}

.mdf-panel-head[b-2hfzcfp2eh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--motiva-space-sm);
    margin-block-end: 6px;
}

.mdf-month[b-2hfzcfp2eh] {
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-bold);
    color: var(--motiva-text-primary);
}

.mdf-nav[b-2hfzcfp2eh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--motiva-radius-sm);
    background: transparent;
    color: var(--motiva-text-secondary);
    cursor: pointer;
}

.mdf-nav svg[b-2hfzcfp2eh] { width: 15px; height: 15px; }
.mdf-nav:hover[b-2hfzcfp2eh] { background: var(--motiva-surface-hover); }

.mdf-nav:focus-visible[b-2hfzcfp2eh] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 1px;
}

/* Seven equal columns. Under RTL the tracks flow from the reading edge,
   so Sunday lands on the right with no direction-conditional rule. */
.mdf-grid[b-2hfzcfp2eh] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.mdf-dayname[b-2hfzcfp2eh] {
    padding-block: 4px;
    text-align: center;
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-muted);
}

/* A comfortable target, not a number in a table — but no taller than it
   needs to be: six rows of these decide whether the whole panel fits in
   a modal body without scrolling. */
.mdf-day[b-2hfzcfp2eh] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--motiva-radius-sm);
    background: transparent;
    color: var(--motiva-text-primary);
    font-family: inherit;
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-medium);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mdf-day:hover[b-2hfzcfp2eh] { background: var(--motiva-surface-hover); }

.mdf-day:focus-visible[b-2hfzcfp2eh] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

/* Spill-over days stay legible but recede — the same treatment the mentor
   month grid gives them. */
.mdf-day-out[b-2hfzcfp2eh] { color: var(--motiva-text-subtle, var(--motiva-text-muted)); }

/* Today is stated, not selected: a ring, so it cannot be mistaken for the
   value when the value is some other day. */
.mdf-day-today[b-2hfzcfp2eh] {
    box-shadow: inset 0 0 0 1px var(--motiva-color-violet, var(--motiva-color-indigo));
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    font-weight: var(--motiva-font-weight-bold);
}

/* The selected day is the only filled thing in the panel. It carries the
   product's signature sweep, which is what "selected" looks like
   everywhere else in Motiva. */
.mdf-day-on[b-2hfzcfp2eh],
.mdf-day-on:hover[b-2hfzcfp2eh] {
    background: var(--motiva-gradient-signature);
    color: #fff;
    font-weight: var(--motiva-font-weight-bold);
    box-shadow: none;
}

.mdf-panel-foot[b-2hfzcfp2eh] {
    display: flex;
    gap: var(--motiva-space-sm);
    margin-block-start: 6px;
    padding-block-start: 6px;
    border-block-start: 1px solid var(--motiva-border-subtle);
}

.mdf-quick[b-2hfzcfp2eh] {
    padding: 4px 10px;
    border: 0;
    border-radius: var(--motiva-radius-sm);
    background: transparent;
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    font-family: inherit;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    cursor: pointer;
}

.mdf-quick:hover[b-2hfzcfp2eh] { background: var(--motiva-surface-hover); }
.mdf-quick-muted[b-2hfzcfp2eh] { color: var(--motiva-text-muted); }

.mdf-quick:focus-visible[b-2hfzcfp2eh] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 1px;
}
/* /Components/DateTime/MTimeField.razor.rz.scp.css */
/* =========================================================
   MTimeField — Motiva time field + time panel.

   The field is one value in one box; the panel names its two halves
   out loud. Neither borrows anything from the browser.
   ========================================================= */

.mtf[b-wilv9jl2ym] { position: relative; }

/* ── Field ──
   The input and its opener share ONE border, so the pair reads as a
   single control rather than a text box next to a button. */
.mtf-field[b-wilv9jl2ym] {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: var(--motiva-control-height-md);
    border: 1px solid var(--motiva-border-strong);
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-primary);
    transition: border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mtf-field:hover[b-wilv9jl2ym] { border-color: var(--motiva-color-violet, var(--motiva-color-indigo)); }

/* Focus and open are the same state visually: the panel below is this
   control continuing, not a separate thing nearby. */
.mtf-field:focus-within[b-wilv9jl2ym],
.mtf-field-open[b-wilv9jl2ym] { border-color: var(--motiva-color-violet, var(--motiva-color-indigo)); }

.mtf-field-invalid[b-wilv9jl2ym] { border-color: var(--motiva-color-rose-ink, var(--motiva-color-danger)); }

/* The border lives on the wrapper, so the input inside carries none —
   and no ring of its own, or the control would show two. */
.mtf-input[b-wilv9jl2ym] {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    color: var(--motiva-text-primary);
    font-family: inherit;
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-medium);
    /* A clock reading is left-to-right even in an RTL form, and the dash in
       the placeholder is bidi-neutral — without this the field paints
       "30:10". Tabular figures stop the value shifting as digits change. */
    direction: ltr;
    text-align: start;
    font-variant-numeric: tabular-nums;
}

.mtf-input:focus[b-wilv9jl2ym] { outline: none; }
.mtf-input[b-wilv9jl2ym]::placeholder { color: var(--motiva-text-muted); }
.mtf-input:disabled[b-wilv9jl2ym] { color: var(--motiva-color-disabled-text); cursor: not-allowed; }

.mtf-open[b-wilv9jl2ym] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    align-self: stretch;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--motiva-text-muted);
    cursor: pointer;
}

.mtf-open svg[b-wilv9jl2ym] { width: 16px; height: 16px; }
.mtf-open:hover[b-wilv9jl2ym] { color: var(--motiva-color-violet, var(--motiva-color-indigo)); }

.mtf-open:focus-visible[b-wilv9jl2ym] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
    border-radius: var(--motiva-radius-sm);
}

/* ── Panel ──
   In flow, below the field. See the component's own note for why it is
   not absolutely positioned. */
.mtf-panel[b-wilv9jl2ym] {
    margin-block-start: 6px;
    padding: var(--motiva-space-sm);
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-elevated, var(--motiva-surface-primary));
    box-shadow: var(--motiva-shadow-md);
}

.mtf-group + .mtf-group[b-wilv9jl2ym] { margin-block-start: var(--motiva-space-sm); }

/* The labels are the entire point: the native control's two columns are
   unlabeled, and that is what makes them unreadable. */
.mtf-group-label[b-wilv9jl2ym] {
    display: block;
    margin-block-end: 5px;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-muted);
}

/* Five across: the whole working day is visible at once, so nothing has
   to be scrolled to reach 17:00. */
.mtf-chips[b-wilv9jl2ym] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
}

/* Four minute steps, one row, each target as wide as it can be. */
.mtf-chips-minutes[b-wilv9jl2ym] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mtf-chip[b-wilv9jl2ym] {
    min-height: 34px;
    padding: 0 4px;
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-primary);
    font-family: inherit;
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-medium);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mtf-chip:hover[b-wilv9jl2ym] { background: var(--motiva-surface-hover); }

.mtf-chip:focus-visible[b-wilv9jl2ym] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 1px;
}

/* Selected is the product's signature sweep — the same thing "chosen"
   looks like on the date panel and on every primary action. */
.mtf-chip-on[b-wilv9jl2ym],
.mtf-chip-on:hover[b-wilv9jl2ym] {
    background: var(--motiva-gradient-signature);
    border-color: transparent;
    color: #fff;
    font-weight: var(--motiva-font-weight-bold);
}

.mtf-foot[b-wilv9jl2ym] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--motiva-space-sm);
    margin-block-start: var(--motiva-space-sm);
    padding-block-start: 6px;
    border-block-start: 1px solid var(--motiva-border-subtle);
}

/* States the escape hatch once, quietly — it is what keeps the chip
   lists short enough to fit without scrolling. */
.mtf-hint[b-wilv9jl2ym] {
    font-size: var(--motiva-font-size-caption, 11px);
    color: var(--motiva-text-muted);
}

.mtf-done[b-wilv9jl2ym] {
    padding: 4px 10px;
    border: 0;
    border-radius: var(--motiva-radius-sm);
    background: transparent;
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    font-family: inherit;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    cursor: pointer;
}

.mtf-done:hover[b-wilv9jl2ym] { background: var(--motiva-surface-hover); }

.mtf-done:focus-visible[b-wilv9jl2ym] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 1px;
}
/* /Components/Demand/MDemandBadge.razor.rz.scp.css */
/* ============================================================
   MDemandBadge — how contested a project is.

   Neutral by construction. Every level is the same ink; only the
   meter fills. See the .razor for why high demand is never rose.
   ============================================================ */

.m-demand[b-aqjy3fkark] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    white-space: nowrap;
    color: var(--motiva-text-muted, #8B8698);
    cursor: help;
}

/* ── The meter ───────────────────────────────────────────────
   Three segments, bottom-aligned, so a filled meter reads as a level
   rather than as three separate marks. */
.m-demand-meter[b-aqjy3fkark] {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 10px;
}

.m-demand-seg[b-aqjy3fkark] {
    width: 3px;
    border-radius: 1px;
    /* Unfilled segments are a hairline of ink, not a lighter violet: an empty
       slot must not look like a partially-lit one. */
    background: color-mix(in srgb, var(--motiva-text-primary, #1A1820) 12%, transparent);
}

/* Ascending heights make the level readable even in monochrome. */
.m-demand-seg:nth-child(1)[b-aqjy3fkark] { height: 5px; }
.m-demand-seg:nth-child(2)[b-aqjy3fkark] { height: 7.5px; }
.m-demand-seg:nth-child(3)[b-aqjy3fkark] { height: 10px; }

/* Solid violet — NOT the signature gradient, which renders as its blue
   midpoint at this size. */
.m-demand-seg--on[b-aqjy3fkark] { background: var(--motiva-color-violet, #4F46E5); }

/* At level 0 nothing is lit and the whole badge steps back: "nobody asked"
   is the quietest thing on the row, not an empty state to explain. */
.m-demand--l0[b-aqjy3fkark] { color: var(--motiva-text-faint, #B4AFC0); }

/* Level 3 darkens the TEXT only. The meter is already full; adding colour
   on top would turn a normal fact about a popular project into an alert. */
.m-demand--l3[b-aqjy3fkark] { color: var(--motiva-text-secondary, #5B5568); }

.m-demand-text[b-aqjy3fkark] {
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-weight: var(--motiva-font-weight-medium, 500);
}

.m-demand--full .m-demand-text[b-aqjy3fkark]    { font-size: var(--motiva-font-size-caption, 11.5px); }

/* Subordinate to the count it qualifies: one step down in colour, never in
   weight — a lighter grey at the same size stays readable where a smaller
   type size would not. */
.m-demand-first[b-aqjy3fkark] {
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-faint, #B4AFC0);
}
.m-demand--compact .m-demand-text[b-aqjy3fkark] { font-size: var(--motiva-font-size-caption, 11px); }

/* The count in the compact form carries the weight — it is the value, and
   "ביקשו" is only the unit. */
.m-demand--l3 .m-demand-text[b-aqjy3fkark] { font-weight: var(--motiva-font-weight-semibold, 600); }

.m-demand--meter[b-aqjy3fkark] { gap: 0; }
/* /Components/EmptyState/MEmptyState.razor.rz.scp.css */
/* ============================================================
   MEmptyState — Motiva System Master, "Empty state"
   Centred, quiet, text-only. No border, no fill, no icon: an empty state
   is an absence, and the Master never dresses it up as a card.
   ============================================================ */

.m-empty[b-e3yrrbpart] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-block: var(--motiva-space-md);
    padding-inline: var(--motiva-space-sm);
}

.m-empty-title[b-e3yrrbpart] {
    margin: 0;
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-bold);
    line-height: var(--motiva-line-height-heading);
    color: var(--motiva-text-primary);
}

.m-empty-text[b-e3yrrbpart] {
    margin: var(--motiva-space-xs) 0 0;
    max-width: 42ch; /* keeps the supporting line readable in a wide card */
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-regular);
    line-height: var(--motiva-line-height-body);
    color: var(--motiva-text-muted);
}

.m-empty-action[b-e3yrrbpart] {
    margin-block-start: var(--motiva-space-md);
}

/* ============================================================
   STUDENT EXPERIENCE, FINAL — empty states

   The finalized empties are a centred column: a 46px neutral circle
   holding a stroked glyph, a 14px/600 line in ink-2, and a 12.5px
   explanation in ink-4. The circle is drawn by the caller when it has
   a meaningful glyph; this component keeps its text-only contract and
   only re-bases the type and rhythm. (README.md, Resources.)
   ============================================================ */

/* 56px is the reference's inset for an empty state that owns a whole panel.
   Inside a section that is one of several on a page it reads as a hole, so
   the block axis is trimmed; the reference's 56px is kept for the two
   full-panel cases via .m-empty-roomy. */
.motiva-final .m-empty[b-e3yrrbpart] {
    gap: 10px;
    padding: 32px 20px;
}

.motiva-final .m-empty-roomy[b-e3yrrbpart] { padding: 56px 20px; }

.motiva-final .m-empty-title[b-e3yrrbpart] {
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.4;
    color: var(--motiva-text-secondary);
}

.motiva-final .m-empty-text[b-e3yrrbpart] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-regular);
    line-height: 1.5;
    color: var(--motiva-text-subtle);
}

.motiva-final .m-empty-action[b-e3yrrbpart] { margin-block-start: 4px; }
/* /Components/Feedback/MLoadingState.razor.rz.scp.css */
/* ============================================================
   MLoadingState — Motiva design system

   Values are lifted verbatim from the finalized student pages this
   replaces: the Block variant from /tasks (.tsk-loading/.tsk-spinner)
   and the Inline variant from /learning (.kc-loading/.kc-spinner). No
   metric is re-invented here — the point is that the six copies become
   one, not that they become different.

   Block's 36px ring is gone: that variant now draws the branded Motiva
   mark, whose rules live in the global wwwroot/css/motiva-loader.css
   (it is shared with index.html's pre-boot splash, which cannot use a
   scoped stylesheet). Only the Inline ring is still styled here.
   ============================================================ */

.m-loading[b-n36czc66sy] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--motiva-text-muted);
}

.m-loading-block[b-n36czc66sy] {
    flex-direction: column;
    gap: var(--motiva-space-md);
    padding: var(--motiva-space-2xl) 0;
    font-size: var(--motiva-font-size-sm);
}

.m-loading-inline[b-n36czc66sy] {
    flex-direction: row;
    gap: var(--motiva-space-sm);
    padding-block: 64px;
    font-size: var(--motiva-font-size-body);
}

.m-loading-spinner[b-n36czc66sy] {
    display: inline-block;
    border-radius: var(--motiva-radius-full);
    /* The violet fallback chain the student pages already use: inside
       .motiva --motiva-color-violet is the Master's brand hue; outside it
       (a non-student shell reaching this component) it resolves to indigo. */
    border-block-start-color: var(--motiva-color-violet, var(--motiva-color-indigo));
    animation: m-loading-spin-b-n36czc66sy 0.75s linear infinite;
}

.m-loading-inline .m-loading-spinner[b-n36czc66sy] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--motiva-border-subtle);
    border-block-start-color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

@keyframes m-loading-spin-b-n36czc66sy {
    to { transform: rotate(360deg); }
}

/* Student experience, final: the spinner reads violet, the brand/action
   role, on the design's neutral track. */
.motiva-final .m-loading-spinner[b-n36czc66sy] {
    border-color: rgba(27, 26, 34, 0.10);
    border-block-start-color: var(--motiva-color-violet);
}

.motiva-final .m-loading-label[b-n36czc66sy] { color: var(--motiva-text-subtle); }
/* /Components/InfoTip/MInfoTip.razor.rz.scp.css */
/* ============================================================
   MInfoTip — the page-title information affordance.

   Quiet by construction: a 20px glyph in the muted ink, no disc, no fill,
   no colour until it is touched. It sits beside an h1 and must never
   compete with it.
   ============================================================ */

.m-infotip[b-xzrzscyjpy] {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    /* The Management headers align their children on the text baseline so
       the h1 and its summary line share one. A 20px glyph baselined against
       a 34px title hangs below it, so the tip opts out and takes the row's
       centre instead. */
    align-self: center;
}

.m-infotip-btn[b-xzrzscyjpy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--motiva-text-subtle, #B7B2C2);
    cursor: pointer;
    transition: color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.m-infotip:hover .m-infotip-btn[b-xzrzscyjpy],
.m-infotip-btn:focus-visible[b-xzrzscyjpy] {
    color: var(--motiva-color-violet, #4F46E5);
}

.m-infotip-btn:focus-visible[b-xzrzscyjpy] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* ── The bubble ──────────────────────────────────────────────
   Out of flow, so revealing it never moves the title beside it.

   `display: none` AT REST, and this is load-bearing rather than a style
   choice. An absolutely-positioned box that is merely `visibility: hidden`
   still takes part in layout, so it still contributes to the SCROLLABLE
   OVERFLOW of every ancestor scroll container. Beside a field label inside a
   modal body — `display:flex; flex-direction:column; overflow-y:auto` — the
   hidden bubble hung 25px below the last field and 159px past its edge, and
   the dialog grew a permanent vertical scrollbar for content that was never
   visible. Measured: with the bubble suppressed, scrollHeight fell from 257
   to 232 and matched clientHeight exactly.

   The cost is the 120ms fade, which cannot run from `display: none`; the
   bubble now appears at once. That is the right trade for a tooltip: an
   invisible box must not be able to make a dialog scroll.

   aria-describedby still resolves against it — a referenced element supplies
   its description whether or not it is displayed, which is what makes this
   the conventional tooltip implementation rather than a workaround. */
.m-infotip-bubble[b-xzrzscyjpy] {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    /* Anchored at the reading start and growing toward the reading end —
       in RTL that means it opens leftward, into the page rather than off
       its edge. Logical, so an LTR build needs no second rule. */
    inset-inline-start: 0;
    z-index: var(--motiva-z-dropdown, 500);
    width: max-content;
    /* 280px was sized for one short clause. The Admin-wide pass moved whole
       explanatory sentences in here (Integrations, Request Types, Milestones,
       Role Settings), and at 280px those ran to eight or nine lines. 340px is
       still a tooltip, not a panel, and it is the only change this refactor
       needed in the shared component. */
    max-width: 340px;
    padding: 9px 12px;
    border-radius: var(--motiva-radius-sm, 10px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    box-shadow: var(--motiva-shadow-md, 0 16px 36px rgba(30, 20, 60, 0.14));
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.45;
    color: var(--motiva-text-secondary, #5B5568);
    text-align: start;
    white-space: normal;
    pointer-events: none;
}

/* Opens upward instead. See TipPlacement.Above for when that is needed. */
.m-infotip-bubble-above[b-xzrzscyjpy] {
    top: auto;
    bottom: calc(100% + 8px);
}

.m-infotip:hover .m-infotip-bubble[b-xzrzscyjpy],
.m-infotip-btn:focus-visible + .m-infotip-bubble[b-xzrzscyjpy] {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .m-infotip-btn[b-xzrzscyjpy] { transition: none; }
}
/* /Components/Journey/MJourneyStepper.razor.rz.scp.css */
/* ============================================================
   MJourneyStepper — "מסע הפרויקט"
   Every value transcribed from the finalized dashboard and project
   screens (design-reference/motiva-student-final/README.md).
   ============================================================ */

.m-journey[b-elccuguruc] {
    display: flex;
    align-items: flex-start;
}

.m-journey-stage[b-elccuguruc] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Extra room goes to the PRIMARY stage, not to every active one. Several
   stages can be Current at once now (milestones run in parallel), and giving
   each of them 1.7 would leave the row with no focal point at all. */
.m-journey-stage-primary[b-elccuguruc] { flex: 1.7 1 0; }

/* The last stage used to have no connector and collapsed to its content.
   Every milestone owns a segment now, so it sizes like the rest. */
.m-journey-stage-last[b-elccuguruc] { flex: 1 1 0; }

.m-journey-stage-clickable[b-elccuguruc] { cursor: pointer; }

.m-journey-track[b-elccuguruc] {
    display: flex;
    align-items: center;
    height: 18px;
    width: 100%;
}

.m-journey-dot[b-elccuguruc] {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: var(--motiva-radius-full);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff; /* approved exception: the tick on a filled stage dot */
}

/* Current — a hollow ring, the one place the design uses a 4px border. */
.m-journey-stage-current .m-journey-dot[b-elccuguruc] {
    background: var(--motiva-surface-primary);
    border: 4px solid var(--motiva-color-violet);
}

/* Future — smaller and quieter, so the eye stops at the current stage. */
.m-journey-stage-future .m-journey-dot[b-elccuguruc] {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background: var(--motiva-surface-primary);
    border: 2px solid var(--motiva-journey-dot-future);
}

/* The very last future dot is quieter still — it is the horizon. */
.m-journey-stage-last.m-journey-stage-future .m-journey-dot[b-elccuguruc] {
    border-color: var(--motiva-journey-track-future);
}

/* ── Segments ──
   One per milestone, and it represents THAT milestone's own progress.

   The gap at the segment's inline-end is what makes the row read as
   separate units: the segment stops short of the next milestone's dot
   instead of running into it, so no milestone's progress is ever drawn
   into its neighbour's node. Rounded ends complete the effect — each
   segment is a self-contained bar, not a length of pipe.

   `margin-inline-end` (not `margin-left`) puts that gap at the far end of
   the segment in both directions; in this RTL product the dot sits at the
   reading start and the segment runs toward the reading end. */
.m-journey-seg[b-elccuguruc] {
    flex: 1;
    height: 4px;
    min-width: 0;
    margin-inline-start: 6px;
    margin-inline-end: 12px;
    border-radius: var(--motiva-radius-full);
    overflow: hidden;
}

/* Completed: solid, in this stage's own stop from the journey ramp — the
   inline style supplies the colour (see SegmentStyle). */
.m-journey-seg-complete[b-elccuguruc] { background: var(--motiva-journey-5); }

/* Active: a muted track carrying a fill sized to this milestone's own
   percentage, and nothing else. */
.m-journey-seg-current[b-elccuguruc] { background: var(--motiva-journey-track); }

.m-journey-seg-fill[b-elccuguruc] {
    display: block;
    height: 100%;
    border-radius: var(--motiva-radius-full);
    background: linear-gradient(to left, var(--motiva-journey-4), var(--motiva-journey-5));
}

.m-journey-seg-future[b-elccuguruc] { background: var(--motiva-journey-track-future); }

.m-journey-label[b-elccuguruc] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-secondary);
}

.m-journey-stage-future .m-journey-label[b-elccuguruc] { color: var(--motiva-text-muted); }

.m-journey-stage-current .m-journey-label[b-elccuguruc] {
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: var(--motiva-letter-spacing-section);
    color: var(--motiva-color-violet);
}

.m-journey-percent[b-elccuguruc] { font-size: var(--motiva-font-size-sm, 13px); font-weight: var(--motiva-font-weight-bold); }

.m-journey-meta[b-elccuguruc] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-subtle);
}

/* ── Responsive ──
   The design is drawn desktop-only. A six-stage row cannot stay legible
   on a narrow viewport, so below the width where labels would collide the
   journey becomes a vertical list: the same dots and the same colours,
   stacked, with the connector running down instead of across. */
@media (max-width: 860px) {
    .m-journey[b-elccuguruc] {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }

    .m-journey-stage[b-elccuguruc],
    .m-journey-stage-current[b-elccuguruc],
    .m-journey-stage-last[b-elccuguruc] {
        flex: none;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .m-journey-track[b-elccuguruc] {
        width: auto;
        flex: 0 0 auto;
    }

    .m-journey-seg[b-elccuguruc] { display: none; }

    .m-journey-label[b-elccuguruc] { padding-block: 6px; }
}

/* ============================================================
   CLICKABLE STAGES — affordance without turning the row into buttons

   The stages have always been clickable (they open the milestone
   modal) but read as static text. The affordance is deliberately
   quiet: a soft ambient halo behind the DOT plus a lift in the
   label's colour — no chrome, no borders, no fill, so the journey
   still reads as one continuous line rather than a row of buttons.

   Applied only when the stepper actually has a click handler:
   .m-journey-stage-clickable is added by the component only when
   OnStageClick has a delegate, so the dashboard's stepper responds
   and a read-only one stays inert.
   ============================================================ */

.m-journey-stage-clickable[b-elccuguruc] {
    cursor: pointer;
    /* The hit area is the whole stage column, not just the 18px dot. */
    border-radius: var(--motiva-radius-md);
    transition: background var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard);
}

/* The halo sits behind the dot, drawn on the dot itself so it cannot
   shift anything: box-shadow does not participate in layout. */
.m-journey-stage-clickable .m-journey-dot[b-elccuguruc] {
    transition: box-shadow var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard),
                transform var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard);
}

.m-journey-stage-clickable:hover .m-journey-dot[b-elccuguruc],
.m-journey-stage-clickable:focus-visible .m-journey-dot[b-elccuguruc] {
    box-shadow: 0 0 0 6px rgba(109, 40, 245, 0.10);
}

.m-journey-stage-clickable:hover .m-journey-label[b-elccuguruc] {
    color: var(--motiva-text-primary);
}

/* The current stage already reads violet; keep it violet on hover rather
   than flattening it to ink. */
.m-journey-stage-current.m-journey-stage-clickable:hover .m-journey-label[b-elccuguruc] {
    color: var(--motiva-color-violet);
}

/* Keyboard focus must be visible and must not rely on the halo alone. */
.m-journey-stage-clickable:focus-visible[b-elccuguruc] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .m-journey-stage-clickable[b-elccuguruc],
    .m-journey-stage-clickable .m-journey-dot[b-elccuguruc] { transition: none; }
}

/* ── Single-stage stepper (the milestone modal) ──
   With one stage there is no connector for the dot to run into, so the
   column layout leaves the dot centred above a start-aligned label. A lone
   stage lays out as a ROW instead — dot, then label — which is what makes
   the modal's progress read as the same object as the dashboard's. */
.m-journey-stage:only-child[b-elccuguruc] {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.m-journey-stage:only-child .m-journey-track[b-elccuguruc] {
    width: auto;
    flex: 0 0 auto;
}

/* A lone stage has no journey to sit in, so its segment would be a bar
   floating beside a single dot. The dot and the label carry it instead. */
.m-journey-stage:only-child .m-journey-seg[b-elccuguruc] { display: none; }
/* /Components/Kpi/MKpiCard.razor.rz.scp.css */
/* ============================================================
   MKpiCard — Motiva System Master, "KPI card"
   States the Master actually ships: default · selected/pressed (inset ring
   in the card's own accent) · hover (thickens the same ring).

   The accent ring is derived from the semantic token with color-mix, not
   written as a fixed rgba, so it follows the token into dark mode. A plain
   rgba() is declared first as the fallback for engines without color-mix —
   var() fallbacks do not cover an *invalid* value, only a missing one, so
   the fallback has to be a preceding declaration.
   ============================================================ */

.m-kpi[b-yhxyaaijxg] {
    display: flex;
    align-items: center;
    gap: 10px;

    /* Grid child: min-width:0 lets a long label ellipsize instead of
       forcing its column wider than the equal share. */
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 78px;

    /* Master --pad-kpi (15px 14px): between the 8 and 16 steps of the
       spacing scale, so it stays literal. */
    padding: 15px 14px;

    background: var(--motiva-surface-primary);
    border: 1px solid var(--m-kpi-accent, var(--motiva-border-card, var(--motiva-border-subtle)));
    border-radius: var(--motiva-radius-md);

    /* Rest state carries the ring slot at zero opacity, so hover/pressed
       thicken the outline with no layout shift and no border-width jump. */
    box-shadow: inset 0 0 0 1px transparent;

    /* Reset the inherited element defaults for the <a> and <button> forms
       so all three render identically. */
    text-align: start;
    font-family: inherit;
    color: var(--motiva-text-primary);
    text-decoration: none;
}

/* ── Accents — the Master's three permitted semantics ──────────
   Each maps one token to three roles: the value's ink, the icon chip's
   tint, and the outline ring. Student-scope-only tokens fall back to
   their :root peers so the card also renders outside .motiva. */

.m-kpi-violet[b-yhxyaaijxg] {
    --m-kpi-color: var(--motiva-color-violet, var(--motiva-color-indigo));
    --m-kpi-tint: var(--motiva-color-brand-bg);
    --m-kpi-accent: rgba(79, 70, 229, 0.45);
    --m-kpi-accent: color-mix(in srgb, var(--m-kpi-color) 45%, transparent);
}

.m-kpi-teal[b-yhxyaaijxg] {
    --m-kpi-color: var(--motiva-color-teal);
    --m-kpi-tint: var(--motiva-color-success-bg);
    --m-kpi-accent: rgba(13, 156, 154, 0.45);
    --m-kpi-accent: color-mix(in srgb, var(--m-kpi-color) 45%, transparent);
}

/* Rose uses the Master's darker "rose at text weight" step for the number
   and ring — the lighter rose is for dots and fills, not labels. */
.m-kpi-rose[b-yhxyaaijxg] {
    --m-kpi-color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    --m-kpi-tint: var(--motiva-color-danger-bg);
    --m-kpi-accent: rgba(178, 50, 86, 0.42);
    --m-kpi-accent: color-mix(in srgb, var(--m-kpi-color) 42%, transparent);
}

/* ── Presentation-only accents (Phase 4B) ──────────────────────
   The finalized Tasks screen's four KPI hues. Ring opacities are the
   Design's own (.45 / .38), not a uniform value, so the two read at the
   same visual weight as the three above them despite different hues. */

.m-kpi-periwinkle[b-yhxyaaijxg] {
    --m-kpi-color: var(--motiva-color-periwinkle);
    --m-kpi-tint: var(--motiva-color-periwinkle-bg);
    --m-kpi-accent: rgba(110, 98, 184, 0.45);
    --m-kpi-accent: color-mix(in srgb, var(--m-kpi-color) 45%, transparent);
}

.m-kpi-cobalt[b-yhxyaaijxg] {
    --m-kpi-color: var(--motiva-color-cobalt);
    --m-kpi-tint: var(--motiva-color-cobalt-bg);
    --m-kpi-accent: rgba(29, 54, 227, 0.38);
    --m-kpi-accent: color-mix(in srgb, var(--m-kpi-color) 38%, transparent);
}

/* The finalized Requests screen's "waiting on you" hue. Its icon chip is
   drawn from the warmer rgba(255,138,31,.10) the Design uses for the tint
   while the number and ring take the darker #D9761A it uses for text —
   the same two-step treatment rose already has, not a lightness accident. */
.m-kpi-amber[b-yhxyaaijxg] {
    --m-kpi-color: var(--motiva-color-amber);
    --m-kpi-tint: var(--motiva-color-amber-bg);
    --m-kpi-accent: rgba(217, 118, 26, 0.45);
    --m-kpi-accent: color-mix(in srgb, var(--m-kpi-color) 45%, transparent);
}

/* ── Content ─────────────────────────────────────────────────── */

.m-kpi-ic[b-yhxyaaijxg] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--motiva-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--m-kpi-tint, var(--motiva-surface-secondary));
    color: var(--m-kpi-color, var(--motiva-text-secondary));
    line-height: 1;
}

.m-kpi-text[b-yhxyaaijxg] {
    min-width: 0;
    display: block;
}

.m-kpi-value[b-yhxyaaijxg] {
    display: block;
    /* Master --kpi-num: 22px sits between the 15px and 25px steps of the
       type scale, so it is literal rather than snapped onto either. */
    font-size: var(--motiva-font-size-h2, 22px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1;
    letter-spacing: -0.3px;
    margin-block-end: 3px;
    color: var(--m-kpi-color, var(--motiva-text-primary));
}

.m-kpi-label[b-yhxyaaijxg] {
    display: block;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-regular);
    line-height: var(--motiva-line-height-caption);
    color: var(--motiva-text-muted);
    /* Master keeps the label on one line; the ellipsis is added so a long
       label degrades instead of overflowing its column. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-kpi-support[b-yhxyaaijxg] {
    display: block;
    margin-block-start: var(--motiva-space-xs);
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-subtle, var(--motiva-text-muted));
}

/* ── Interactive / pressed ────────────────────────────────────
   Only the <a> and <button> forms react — the plain div form is inert by
   construction, so a non-interactive card can never look clickable. */

a.m-kpi[b-yhxyaaijxg],
button.m-kpi[b-yhxyaaijxg] {
    cursor: pointer;
    transition: box-shadow var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

/* Selected state is driven by the class, not by [aria-pressed="true"], so
   the visual and the ARIA state stay independent: a card that is selected
   but not a toggle still looks selected, and aria-pressed is still only
   emitted where it is semantically true. */
a.m-kpi:hover[b-yhxyaaijxg],
button.m-kpi:hover[b-yhxyaaijxg],
.m-kpi-pressed[b-yhxyaaijxg] {
    box-shadow: inset 0 0 0 1px var(--m-kpi-accent, var(--motiva-border-strong));
}

/* The uncoloured card has no accent to ring with, so the rule above falls
   back to --motiva-border-strong — one hairline step away from the card's
   own resting border, which does not read as "selected" at all. It rings in
   violet instead: the Master's focus/action colour, the same thing every
   other control in the system uses to say "this one". The rest border stays
   neutral (this only touches the ring), so an unselected neutral card is
   still visibly the uncoloured one. Declared after the shared rule because
   the hover selectors carry identical specificity. */
a.m-kpi-none:hover[b-yhxyaaijxg],
button.m-kpi-none:hover[b-yhxyaaijxg],
.m-kpi-none.m-kpi-pressed[b-yhxyaaijxg] {
    box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.45);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--motiva-color-violet, var(--motiva-color-indigo)) 45%, transparent);
}

a.m-kpi:focus-visible[b-yhxyaaijxg],
button.m-kpi:focus-visible[b-yhxyaaijxg] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    a.m-kpi[b-yhxyaaijxg],
    button.m-kpi[b-yhxyaaijxg] { transition: none; }
}

/* ============================================================
   STUDENT EXPERIENCE, FINAL — KPI / glance cards

   The finalized screens no longer draw a bordered KPI tile. Where a
   number is surfaced it sits inside a section card as a plain block,
   and where a KPI is a FILTER it is a pill in a segmented track. This
   block re-bases the tile to the section surface so any page still
   using it reads as part of the system; the pressed state becomes the
   design's white-pill treatment. (README.md §5.)
   ============================================================ */

.motiva-final .m-kpi[b-yhxyaaijxg] {
    padding: 16px 18px;
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-primary);
    border: 1px solid var(--motiva-border-card);
    box-shadow: none;
}

.motiva-final .m-kpi-value[b-yhxyaaijxg] {
    font-size: var(--motiva-font-size-h2, 22px);
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: var(--motiva-letter-spacing-section);
    color: var(--motiva-text-primary);
}

.motiva-final .m-kpi-label[b-yhxyaaijxg] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-muted);
}

/* The accent ring becomes the icon-chip tint the design uses — a 34px
   rounded square behind a stroked glyph, not an outline on the card. */
.motiva-final .m-kpi-ic[b-yhxyaaijxg] {
    width: 34px;
    height: 34px;
    border-radius: var(--motiva-radius-chip);
}

.motiva-final .m-kpi-violet[b-yhxyaaijxg]      { border-color: var(--motiva-border-card); }
.motiva-final .m-kpi-teal[b-yhxyaaijxg]        { border-color: var(--motiva-border-card); }
.motiva-final .m-kpi-rose[b-yhxyaaijxg]        { border-color: var(--motiva-border-card); }
.motiva-final .m-kpi-periwinkle[b-yhxyaaijxg],
.motiva-final .m-kpi-cobalt[b-yhxyaaijxg],
.motiva-final .m-kpi-amber[b-yhxyaaijxg]       { border-color: var(--motiva-border-card); }

.motiva-final .m-kpi-violet      .m-kpi-ic[b-yhxyaaijxg] { background: var(--motiva-color-brand-bg);   color: var(--motiva-color-violet); }
.motiva-final .m-kpi-teal        .m-kpi-ic[b-yhxyaaijxg] { background: var(--motiva-color-success-bg); color: var(--motiva-color-teal-ink); }
.motiva-final .m-kpi-rose        .m-kpi-ic[b-yhxyaaijxg] { background: var(--motiva-color-danger-bg);  color: var(--motiva-color-rose-ink); }
.motiva-final .m-kpi-periwinkle  .m-kpi-ic[b-yhxyaaijxg],
.motiva-final .m-kpi-cobalt      .m-kpi-ic[b-yhxyaaijxg] { background: var(--motiva-color-info-bg);    color: var(--motiva-color-blue); }
.motiva-final .m-kpi-amber       .m-kpi-ic[b-yhxyaaijxg] { background: var(--motiva-color-danger-bg);  color: var(--motiva-color-rose-ink); }

.motiva-final .m-kpi-pressed[b-yhxyaaijxg] {
    background: var(--motiva-surface-primary);
    border-color: var(--motiva-color-violet);
    box-shadow: var(--motiva-shadow-pill);
}
/* /Components/Kpi/MKpiGrid.razor.rz.scp.css */
/* ============================================================
   MKpiGrid — Motiva System Master, "KpiCard / KpiGrid"
   Master: "Stretches to fill content width."
   Master responsive rule: "KPI grid: 4 → 2 → 1 columns at 1060px / 520px."

   Column counts are static per class rather than a custom property fed
   into repeat(): repeat() takes a literal integer, and calc()/var() in
   that position is not reliably supported.
   ============================================================ */

.m-kpi-grid[b-qhm1ipue5a] {
    display: grid;

    /* Master --kpi-gap. The spacing scale steps 8 → 16, so 12px stays
       literal rather than being rounded onto a token. */
    gap: 12px;
}

/* minmax(0, 1fr) — not auto/fixed: 1fr alone would let a long label push
   a column wider than its share, and the fixed per-card cap is exactly
   the bug the Master's own audit closed ("the KPI row now shares the same
   horizontal boundaries as the content beneath it"). */
.m-kpi-grid-cols-4[b-qhm1ipue5a] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.m-kpi-grid-cols-3[b-qhm1ipue5a] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.m-kpi-grid-cols-2[b-qhm1ipue5a] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-kpi-grid-cols-1[b-qhm1ipue5a] { grid-template-columns: minmax(0, 1fr); }

/* Never 3+1: below the width where the full row is comfortable, the
   Master goes straight to two columns. */
@media (max-width: 1060px) {
    .m-kpi-grid-cols-4[b-qhm1ipue5a],
    .m-kpi-grid-cols-3[b-qhm1ipue5a] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .m-kpi-grid-cols-4[b-qhm1ipue5a],
    .m-kpi-grid-cols-3[b-qhm1ipue5a],
    .m-kpi-grid-cols-2[b-qhm1ipue5a] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Management/MManagementTile.razor.rz.scp.css */
/* ============================================================
   MManagementTile — the Management hub's destination card
   Prefix: mmt-

   Visual source:
       design/design-system/Motiva Admin Home.dc.html
   (the row card its section grids are built from: 44px tinted icon
   chip · title + quiet count · one-line description · trailing arrow)

   TOKENS, NOT THE REFERENCE'S LITERALS. The hub renders inside the
   canvas shell (.motiva .motiva-final .motiva-lecturer), where every
   --motiva-* token already resolves to the finished design's own value,
   so reading the token and reading the reference give the same pixel —
   and the token keeps giving it if the palette moves. The var()
   fallbacks are only for the case where a tile is viewed outside that
   scope.

   TWO DELIBERATE DEVIATIONS, both toward the system:
     · radius 18px (--motiva-radius-card) where the reference draws 20.
       18 is the product's card radius on every other finished screen; a
       hub whose cards are 2px rounder than the screens they open is the
       kind of drift this token exists to stop.
     · the icon chip's stroke is a palette hue (violet / blue / teal-ink)
       rather than the reference's hand-picked #2E55C4 / #0B7E92.
   ============================================================ */

.mmt[b-piwz29joot] {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-width: 0;
    padding: 17px 18px;
    /* The shared panel's edge and lift. The fill was already solid, but the
       hairline was white at 85% — invisible on a white tile — and the drop
       was a third hand-rolled variant of the panel shadow. Only the RADIUS
       stays the tile's own: --motiva-radius-card is the system's declared
       step for a small card, and a tile at panel radius reads as a bubble. */
    border: 1px solid var(--motiva-panel-border, rgba(109, 40, 245, 0.08));
    border-radius: var(--motiva-radius-card, 18px);
    background: var(--motiva-panel-surface, #fff);
    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));
    color: var(--motiva-text-primary, #1B1A22);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* The button form has to un-do the UA's own control styling before the
   rule above means anything. */
button.mmt[b-piwz29joot] {
    appearance: none;
    font: inherit;
}

/* Violet edge + a violet-tinted lift, exactly as the reference draws it:
   the hover state is where the brand appears on this page, and it appears
   as an EDGE and a shadow, never as a fill. A filled violet card is the
   "generic purple dashboard" this hub is not. */
.mmt:hover[b-piwz29joot] {
    border-color: rgba(109, 40, 245, 0.28);
    box-shadow: 0 2px 3px rgba(27, 26, 34, 0.05),
                0 18px 38px -24px rgba(109, 40, 245, 0.4);
    transform: translateY(-1px);
    color: var(--motiva-text-primary, #1B1A22);
}

.mmt:focus-visible[b-piwz29joot] {
    outline: 2px solid var(--motiva-color-focus-ring, rgba(109, 40, 245, 0.5));
    outline-offset: 2px;
}

.mmt:active[b-piwz29joot] { transform: translateY(0); }

/* ── Icon chip ───────────────────────────────────────────────
   The tri-tone tint is the same on every tile — it is the system's wash,
   not a per-module colour. Only the glyph's stroke changes, which is what
   keeps a grid row legible without turning the page into a colour key.

   Layered over an opaque white so the tint stays a tint: the canvas wash
   showing through three translucent stops would make the chip a different
   colour in every column. */
.mmt-icon[b-piwz29joot] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--motiva-radius-md, 14px);
    border: 1px solid rgba(109, 40, 245, 0.12);
    background:
        linear-gradient(140deg,
            rgba(109, 40, 245, 0.12),
            rgba(46, 99, 232, 0.10) 55%,
            rgba(15, 168, 194, 0.12)),
        var(--g-bg-surface, #fff);
}

.mmt-violet .mmt-icon[b-piwz29joot] { color: var(--motiva-color-violet, #6D28F5); }
.mmt-blue   .mmt-icon[b-piwz29joot] { color: var(--motiva-color-blue, #2E63E8); }
.mmt-teal   .mmt-icon[b-piwz29joot] { color: var(--motiva-color-teal-ink, #0F8FA6); }

/* ── Text ────────────────────────────────────────────────────
   min-width:0 on both the column and the title row: without it a long
   Hebrew title refuses to shrink and pushes the grid track wider than
   its 1fr, which is how a hub grid starts scrolling sideways. */
.mmt-text[b-piwz29joot] {
    flex: 1 1 auto;
    min-width: 0;
}

.mmt-title-row[b-piwz29joot] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.mmt-title[b-piwz29joot] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-item, 15.5px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--motiva-text-primary, #1B1A22);
}

/* An annotation on the title, not a badge. The reference prints the live
   figure as quiet muted type; a pill here would give twenty-one tiles
   twenty-one competing chips. */
.mmt-count[b-piwz29joot] {
    flex: 0 0 auto;
    font-size: var(--motiva-font-size-count, 11px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
    color: var(--motiva-text-faint, #B4B0BF);
}

.mmt-desc[b-piwz29joot] {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    color: var(--motiva-text-muted, #6B6779);
}

/* ── Trailing glyph ──────────────────────────────────────────
   Faint at rest and only reaching full ink on hover: twenty-one arrows at
   text weight would read as a column of punctuation down the grid. */
.mmt-go[b-piwz29joot] {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--motiva-text-faint, #B4B0BF);
    transition: color 0.15s ease, transform 0.15s ease;
}

.mmt:hover .mmt-go[b-piwz29joot] { color: var(--motiva-color-violet, #6D28F5); }

/* Only the "goes somewhere" arrow travels. The down chevron marks a panel
   opening in place and would read as a scroll hint if it moved.

   NEGATIVE, and that is not a typo. `transform` is not direction-aware — it
   does not flip under `dir="rtl"` the way a logical property does. The glyph
   is a left-pointing arrow because left IS forward here, so the nudge that
   follows it has to be written in the same physical axis. */
.mmt:hover .mmt-go:not(.mmt-go-open)[b-piwz29joot] { transform: translateX(-3px); }

@media (prefers-reduced-motion: reduce) {
    .mmt[b-piwz29joot],
    .mmt-go[b-piwz29joot] { transition: none; }

    .mmt:hover[b-piwz29joot],
    .mmt:hover .mmt-go[b-piwz29joot] { transform: none; }
}
/* /Components/MentorTask/MentorPersonalTaskModal.razor.rz.scp.css */
/* ============================================================
   MentorPersonalTaskModal — the mentor's own work-item editor.

   Field styling moved here verbatim from MentorTasksPage when the modal
   was extracted, so the form looks identical wherever it is opened from:
   the tasks page, or the calendar.
   ============================================================ */

.mpt-field-label[b-rd557rw8g3] {
    display: block;
    margin: 0 0 6px;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-muted);
}

.mpt-field[b-rd557rw8g3] {
    width: 100%;
    box-sizing: border-box;
    margin-block-end: var(--motiva-space-md);
    min-height: var(--motiva-control-height-md);
    padding: 10px 12px;
    border: 1px solid var(--motiva-border-strong);
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-primary);
    font-family: inherit;
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-medium);
}

.mpt-field:focus-visible[b-rd557rw8g3] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 1px;
}

/* The only multi-line input in this modal. */
.mpt-field-notes[b-rd557rw8g3] {
    resize: vertical;
    min-height: 68px;
    line-height: var(--motiva-line-height-body, 1.6);
}

.mpt-field-error[b-rd557rw8g3] {
    margin: 0;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
}

/* Sits before the delete/cancel pair so the question reads ahead of the
   buttons that answer it. */
.mpt-delete-confirm[b-rd557rw8g3] {
    margin-inline-end: auto;
    align-self: center;
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
}

/* ============================================================
   OPTIONAL SCHEDULING — שעה, then שעת התחלה / שעת סיום

   One column while there is a single time, because a lone time is one
   value and half a row would imply a missing partner. Two columns once
   an end exists, because a start and an end ARE one decision and must
   be read together.
   ============================================================ */

.mpt-times[b-rd557rw8g3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--motiva-space-md);
    margin-block-end: var(--motiva-space-md);
}

.mpt-times-pair[b-rd557rw8g3] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Each field owns its label; alignment comes from the grid, not from
   the shared .mpt-field bottom margin these no longer carry. */
.mpt-time[b-rd557rw8g3] { min-width: 0; align-self: start; }

/* ── The disclosure steps ──
   Text links, not buttons and certainly not fields. They are OFFERS —
   "+ הוספת שעה" must never carry the weight of שם המשימה, and a control
   with a border and a height reads as something waiting to be filled
   in rather than something available if wanted. */
.mpt-reveal[b-rd557rw8g3] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-block-end: var(--motiva-space-md);
    padding: 2px 0;
    border: 0;
    background: transparent;
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    font-family: inherit;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    cursor: pointer;
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard);
}

.mpt-reveal:hover[b-rd557rw8g3] { text-decoration-color: currentColor; }

.mpt-reveal:focus-visible[b-rd557rw8g3] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
    border-radius: var(--motiva-radius-sm);
}

.mpt-reveal:disabled[b-rd557rw8g3] { color: var(--motiva-color-disabled-text); cursor: not-allowed; }

/* Undo sits beside the next step, quieter than it — removing what you
   added is not an equal offer to adding more. */
.mpt-reveal-muted[b-rd557rw8g3] { color: var(--motiva-text-muted); }

.mpt-reveal-row[b-rd557rw8g3] {
    display: flex;
    align-items: center;
    gap: var(--motiva-space-md);
    flex-wrap: wrap;
}

/* Marks a field the form has just refused to save on. Border only — the
   sentence that says WHY is .mpt-field-error, and repeating it in colour
   here would be the same message twice. */
.mpt-field-invalid[b-rd557rw8g3] {
    border-color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
}

.mpt-required[b-rd557rw8g3] {
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    font-weight: var(--motiva-font-weight-bold);
}

/* ============================================================
   GOOGLE CALENDAR

   Quiet by construction. This is an optional side-effect of saving a
   task, not a second feature competing with it, so it gets one line and
   a toggle — no card, no icon, no coloured panel.
   ============================================================ */

/* Not connected: state the fact and offer the one action that fixes it.
   Task creation is never blocked by it. */
.mpt-gcal-notice[b-rd557rw8g3] {
    display: flex;
    align-items: center;
    gap: var(--motiva-space-sm);
    margin-block-end: var(--motiva-space-md);
    padding: 10px 12px;
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-secondary);
}

.mpt-gcal-notice-text[b-rd557rw8g3] {
    flex: 1;
    min-width: 0;
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-muted);
}

.mpt-gcal-connect[b-rd557rw8g3] {
    flex-shrink: 0;
    padding: 4px 12px;
    border: 1px solid var(--motiva-border-strong);
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-primary);
    font-family: inherit;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    cursor: pointer;
}

.mpt-gcal-connect:hover[b-rd557rw8g3] { background: var(--motiva-surface-hover); }

.mpt-gcal-connect:focus-visible[b-rd557rw8g3] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.mpt-gcal[b-rd557rw8g3] {
    margin-block-end: var(--motiva-space-md);
    padding-block-start: var(--motiva-space-sm);
    border-block-start: 1px solid var(--motiva-border-subtle);
}

.mpt-gcal-head[b-rd557rw8g3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--motiva-space-md);
}

.mpt-gcal-title[b-rd557rw8g3] {
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
}

/* One sentence, and only while the toggle is on: it says where the event's
   date and hours come from, which is the one thing the row does not
   already show. */
.mpt-gcal-hint[b-rd557rw8g3] {
    margin: 6px 0 0;
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-muted);
}

.mpt-gcal-confirm[b-rd557rw8g3] { margin-block-start: var(--motiva-space-sm); }

.mpt-gcal-confirm-text[b-rd557rw8g3] {
    margin: 0 0 8px;
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
}

.mpt-gcal-confirm-actions[b-rd557rw8g3] {
    display: flex;
    gap: var(--motiva-space-sm);
}

/* The task IS saved. Reads as a status line, never as an error — the only
   thing that failed is the calendar. */
.mpt-gcal-partial[b-rd557rw8g3] {
    margin: var(--motiva-space-sm) 0 0;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
}


/* ============================================================
   INLINE PRESENTATION — the finalized Calendar reference's
   create/edit card (Motiva Mentor Calendar.dc.html).

   The FIELDS above are untouched: this is the box around them,
   nothing more. Same inputs, same validation, same Google
   Calendar block, same footer actions — see the EditorPresentation
   note in the .razor for why there is no second editor.
   ============================================================ */

/* A 1.5px gradient hairline over an opaque fill. Two backgrounds and two
   clip boxes, which is the only way to paint a gradient BORDER without
   giving the card a wrapper element. */
.mpt-inline[b-rd557rw8g3] {
    margin: 0 0 18px;
    padding: 18px 22px;
    border: 1.5px solid transparent;
    border-radius: 18px;
    background:
        linear-gradient(var(--motiva-surface-primary, #fff), var(--motiva-surface-primary, #fff)) padding-box,
        var(--motiva-gradient-signature) border-box;
    box-shadow:
        0 1px 2px rgba(27, 26, 34, 0.05),
        0 12px 28px -24px rgba(27, 26, 34, 0.35);
    animation: mpt-inline-in-b-rd557rw8g3 200ms var(--motiva-motion-easing-entrance) both;
}

@keyframes mpt-inline-in-b-rd557rw8g3 {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .mpt-inline[b-rd557rw8g3] { animation: none; }
}

.mpt-inline-title[b-rd557rw8g3] {
    margin: 0 0 14px;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1;
    color: var(--motiva-text-primary);
}

/* The reference lays the form out ACROSS rather than down — it is a strip on
   a page, not a column in a dialog. The fields keep every rule they have in
   the modal; only their flow changes. */
.mpt-inline-fields[b-rd557rw8g3] {
    display: flex;
    align-items: flex-end;
    gap: 10px 14px;
    flex-wrap: wrap;
}

/* Each label+control pair is wrapped in .mpt-row so the strip can flow. The
   wrapper is INERT in the modal — a plain block in a vertical stack renders
   exactly as the bare pair did — and only becomes a flex item here. */
.mpt-inline-fields > .mpt-row[b-rd557rw8g3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 0 0 auto;
}

/* The name and the project earn the leftover width; the date sizes to its
   own control, and the notes take a line of their own because a description
   squeezed into a strip is a description nobody writes. */
.mpt-inline-fields > .mpt-row-grow[b-rd557rw8g3] { flex: 1 1 240px; }
.mpt-inline-fields > .mpt-row-full[b-rd557rw8g3] { flex: 1 1 100%; }

.mpt-inline-fields > .mpt-row-full textarea.mpt-field[b-rd557rw8g3] { min-height: 62px; }

.mpt-inline-actions[b-rd557rw8g3] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    margin-block-start: 14px;
}

@media (max-width: 720px) {
    .mpt-inline[b-rd557rw8g3] { padding-inline: 16px; }
    .mpt-inline-fields > input.mpt-field[b-rd557rw8g3] { flex-basis: 100%; }
}
/* /Components/Modal/MModal.razor.rz.scp.css */
/* ============================================================
   MModal — Motiva design system
   All visual values come from --motiva-* tokens (motiva-tokens.css).

   Backdrop scrim color is the one literal (non-token) color in this file:
   no --motiva-* token represents a translucent overlay scrim, and the
   existing MentorProfileModal.razor.css already uses the same literal
   (rgba(0,0,0,0.48)) for the same purpose — reused here rather than
   inventing a second value.
   ============================================================ */

.m-modal-overlay[b-qg3ge1h2ql] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--motiva-space-lg);
    z-index: var(--motiva-z-overlay);
    outline: none; /* tabindex="-1" programmatic focus ring is unwanted here */

    /* Scroll chaining, not a scroll lock. Body scroll is still not locked (see
       design/design-system/components/MModal.md) — but a wheel that reaches the
       end of the modal's own scroll area no longer carries on into the page
       behind it, which is the way the page used to move under an open dialog. */
    overscroll-behavior: contain;
}

.m-modal-dialog[b-qg3ge1h2ql] {
    position: relative;
    z-index: var(--motiva-z-modal);
    width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--motiva-surface-primary);
    border-radius: var(--motiva-radius-lg);
    box-shadow: var(--motiva-shadow-lg);
    max-height: calc(100vh - var(--motiva-space-2xl));
    overflow: hidden;
}

.m-modal-small[b-qg3ge1h2ql]  { max-width: var(--motiva-container-sm); }
.m-modal-medium[b-qg3ge1h2ql] { max-width: var(--motiva-container-md); }
.m-modal-large[b-qg3ge1h2ql]  { max-width: var(--motiva-container-lg); }

/* The desktop workspace size — a dialog wide enough to hold two
   columns. It is the only size expressed against the viewport,
   because that is what "as wide as this screen sensibly allows"
   means. */
.m-modal-wide[b-qg3ge1h2ql] {
    max-width: min(1180px, 88vw);
    width: min(1180px, 88vw);
}

.m-modal-header[b-qg3ge1h2ql] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--motiva-space-md);
    padding: var(--motiva-space-lg);
    border-bottom: 1px solid var(--motiva-border-subtle);
}

.m-modal-header-lead[b-qg3ge1h2ql] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--motiva-space-sm);
    flex: 1 1 auto;
    min-width: 0;
}

.m-modal-title[b-qg3ge1h2ql] {
    margin: 0;
    font-size: var(--motiva-font-size-h4);
    font-weight: var(--motiva-font-weight-bold);
    line-height: var(--motiva-line-height-heading);
    color: var(--motiva-text-primary);
}

.m-modal-close[b-qg3ge1h2ql] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--motiva-control-height-sm);
    height: var(--motiva-control-height-sm);
    border: none;
    border-radius: var(--motiva-radius-md);
    background: transparent;
    color: var(--motiva-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard),
                color var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard);
}
.m-modal-close:hover[b-qg3ge1h2ql] {
    background: var(--motiva-surface-hover);
    color: var(--motiva-text-primary);
}
.m-modal-close:focus-visible[b-qg3ge1h2ql] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.m-modal-body[b-qg3ge1h2ql] {
    padding: var(--motiva-space-lg);
    overflow-y: auto;

    /* `clip`, and it has to be stated.
       Setting only overflow-y makes the OTHER axis compute to `auto` as well
       (CSS overflow: a non-visible value on one axis turns `visible` into
       `auto` on the other), so this body was a scroll container horizontally
       too — and anything absolutely positioned inside it that reaches past the
       padding box added a horizontal scrollbar to the dialog. An MInfoTip
       bubble beside a field label does exactly that.
       `clip` rather than `hidden`: hidden would keep it a scroll port (just an
       unscrollable one), clip does not create one at all, and it leaves
       overflow-y: auto working normally. Body content that is genuinely wider
       than the dialog belongs in its own scroller, not this one. */
    overflow-x: clip;

    color: var(--motiva-text-primary);
}

/* Full-bleed content: the sections inside carry their own pad and rules. */
.m-modal-body-flush[b-qg3ge1h2ql] { padding: 0; }

.m-modal-footer[b-qg3ge1h2ql] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--motiva-space-sm);
    padding: var(--motiva-space-lg);
    border-top: 1px solid var(--motiva-border-subtle);
}

/* ============================================================
   STUDENT EXPERIENCE, FINAL — modal geometry

   The finalized screens draw one modal: 440–460px wide, radius 26,
   a soft ink scrim rather than a black one, and NO divider rules —
   the header, body and footer are one continuous 26/28px pad.
   (design-reference/motiva-student-final/README.md §4.)
   ============================================================ */

.motiva-final .m-modal-overlay[b-qg3ge1h2ql] {
    background: var(--motiva-scrim);
    padding: var(--motiva-shell-padding);
}

.motiva-final .m-modal-dialog[b-qg3ge1h2ql] {
    border-radius: var(--motiva-radius-xl);
    box-shadow: var(--motiva-shadow-lg);
    background: var(--motiva-surface-primary);
}

.motiva-final .m-modal-small[b-qg3ge1h2ql]  { max-width: 440px; }
.motiva-final .m-modal-medium[b-qg3ge1h2ql] { max-width: 460px; }
.motiva-final .m-modal-large[b-qg3ge1h2ql]  { max-width: 720px; }

.motiva-final .m-modal-wide[b-qg3ge1h2ql] {
    max-width: min(1180px, 88vw);
    width: min(1180px, 88vw);
    max-height: 88vh;
}

/* One continuous pad, no rules. */
.motiva-final .m-modal-header[b-qg3ge1h2ql] {
    padding: 26px 28px 0;
    border-bottom: none;
    align-items: center;
}

.motiva-final .m-modal-header-lead[b-qg3ge1h2ql] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--motiva-space-sm);
    flex: 1 1 auto;
    min-width: 0;
}

.m-modal-title[b-qg3ge1h2ql] {
    font-size: var(--motiva-font-size-h3, 18px);
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: var(--motiva-letter-spacing-section);
    line-height: 1;
}

.motiva-final .m-modal-close[b-qg3ge1h2ql] {
    width: 30px;
    height: 30px;
    border-radius: var(--motiva-radius-full);
    color: var(--motiva-text-subtle);
}

.motiva-final .m-modal-close:hover[b-qg3ge1h2ql] {
    background: var(--motiva-color-neutral-bg);
    color: var(--motiva-text-primary);
}

.motiva-final .m-modal-body[b-qg3ge1h2ql]   { padding: 18px 28px 0; }

.motiva-final .m-modal-footer[b-qg3ge1h2ql] {
    padding: 20px 28px 24px;
    border-top: none;
    gap: 14px;
}

/* ============================================================
   QUICK VIEW — the "inspect without navigating" popup

   One presentation, both roles. The finished mentor design draws it at
   `design-reference/Motiva Mentor Home.dc.html:163-189`:

       width: min(480px, calc(100vw - 48px));
       max-height: calc(100vh - 80px);
       border-radius: 26px; background: #fff;
       padding: 26px 28px;
       footer: margin-top:16px; padding-top:14px;
               border-top:1px solid rgba(27,26,34,.07);
               dismiss at the reading start, CTA pushed to the end.

   `motiva-mentor-final/README.md:44` states the student token/geometry spec
   applies to the mentor screens unchanged, so this is deliberately NOT a
   mentor-only rule — the same variant serves a student project quick view,
   a mentor team quick view, and anything else that gets inspected in place.

   Everything above the footer is already the shared `.motiva-final` modal:
   same surface, radius, shadow, scrim and 26/28px pad. Only the width and
   the ruled action row are particular to inspection.
   ============================================================ */

.m-modal-quickview[b-qg3ge1h2ql] { max-width: 480px; }

.motiva-final .m-modal-quickview[b-qg3ge1h2ql] { max-width: 480px; }

.motiva-final .m-modal-quickview .m-modal-footer[b-qg3ge1h2ql] {
    /* Inset to the body's own gutter so the rule stops where the content
       stops, rather than running the full width of the dialog. */
    margin: var(--motiva-space-md) 28px 0;
    padding: 14px 0 24px;
    border-top: 1px solid var(--motiva-border-subtle);
    gap: 10px;
    justify-content: flex-start;
}

/* The navigating CTA is the last child and sits at the far end; the dismiss
   control keeps the reading start. Logical property — correct under RTL and
   LTR without a [dir] branch. */
.motiva-final .m-modal-quickview .m-modal-footer > :last-child[b-qg3ge1h2ql] {
    margin-inline-start: auto;
}

/* Content that pads itself keeps padding itself, in both scopes. */
.motiva-final .m-modal-body-flush[b-qg3ge1h2ql] { padding: 0; }

/* ============================================================
   VIEWPORT FIT

   The dialog's height budget has to be the shell inset it actually sits in.
   `.motiva-final` re-declares the overlay padding as --motiva-shell-padding
   (26px) but the base max-height was still calculated against
   --motiva-space-2xl, so on a short viewport the dialog could out-grow its
   own gutter. Tied to the real value here.

   `dvh` rather than `vh` so a mobile browser's collapsing address bar does
   not push the footer out of reach.
   ============================================================ */

.motiva-final .m-modal-dialog[b-qg3ge1h2ql] {
    max-height: calc(100dvh - 2 * var(--motiva-shell-padding));
}

/* Narrow viewport: nearly full-width with a safe margin, still centred, still
   scrolling internally — never edge-attached and never a bottom sheet. */
@media (max-width: 560px) {
    .m-modal-overlay[b-qg3ge1h2ql],
    .motiva-final .m-modal-overlay[b-qg3ge1h2ql] {
        padding: 16px;
    }

    .motiva-final .m-modal-dialog[b-qg3ge1h2ql] {
        max-height: calc(100dvh - 32px);
    }

    .motiva-final .m-modal-header[b-qg3ge1h2ql]      { padding: 20px 20px 0; }
    .motiva-final .m-modal-body[b-qg3ge1h2ql]        { padding: 14px 20px 0; }
    .motiva-final .m-modal-body-flush[b-qg3ge1h2ql]  { padding: 0; }
    .motiva-final .m-modal-footer[b-qg3ge1h2ql]      { padding: 16px 20px 20px; }

    .motiva-final .m-modal-quickview .m-modal-footer[b-qg3ge1h2ql] {
        margin-inline: 20px;
        padding: 14px 0 20px;
    }
}


/* ============================================================
   FIT-TO-CONTENT DIALOGS  (MModal FitContent="true")

   THE DEFAULT, AND WHY IT IS USUALLY RIGHT
   Every other dialog is capped at the viewport (.m-modal-dialog max-height)
   with .m-modal-body scrolling inside it. That pins the header and the
   footer's actions while the content moves under them, which is what a form
   or a confirmation wants.

   WHY THIS EXISTS
   It is wrong for a surface you read ACROSS instead of filling in. The
   assignment workspace puts a team, its submitted preferences and the
   system's recommendation beside each other to be compared; the 88vh cap on
   .m-modal-wide gave it a scrollbar of its own INSIDE the overlay's, and cut
   the comparison in half on a screen with the room to show all of it.

   THE HIERARCHY THIS PRODUCES
     fits      → no scrollbar anywhere
     does not  → ONE scrollbar, the overlay's
   Never both, which is the state this replaces.

   HOW, AND THE TRAP IN IT
   `align-items: center` on a scrolling flex container CLIPS an over-tall
   child's top — the overflow is unreachable because it lands in negative
   scroll space. So the overlay switches to flex-start and the dialog takes
   `margin-block: auto`, which still centres it whenever it fits and simply
   stops centring when it cannot. Scoped with :has() so the overlay changes
   only while such a dialog is the one open; every other modal keeps the
   centred, internally-scrolled behaviour byte for byte.
   ============================================================ */

.m-modal-overlay:has(.m-modal-fit)[b-qg3ge1h2ql] {
    align-items: flex-start;
    overflow-y: auto;
}

.m-modal-overlay:has(.m-modal-fit) .m-modal-fit[b-qg3ge1h2ql] {
    /* Centres while there is room, yields when there is not. */
    margin-block: auto;
}

/* Beats both the base cap and `.motiva-final .m-modal-wide`'s 88vh. `overflow:
   hidden` on the dialog STAYS: it is what clips the corners against the
   border-radius, and with no height cap there is nothing vertical left for it
   to hide. */
.m-modal-dialog.m-modal-fit[b-qg3ge1h2ql],
.motiva-final .m-modal-dialog.m-modal-fit[b-qg3ge1h2ql] {
    max-height: none;
}

/* The body must not be a scroll CONTAINER at all — not merely a container that
   happens to have nothing to scroll. An `overflow-y: auto` box still clips its
   own overflow, which is how a popover opened near the bottom of the workspace
   would get cut off by a box that shows no scrollbar. */
.m-modal-fit .m-modal-body[b-qg3ge1h2ql],
.motiva-final .m-modal-fit .m-modal-body[b-qg3ge1h2ql] {
    overflow-y: visible;
}

/* Short viewport, small screen: the same arrangement. The narrow-screen block
   above re-caps every .motiva-final dialog at 100dvh - 32px, which would put
   the inner scrollbar back. */
@media (max-width: 560px) {
    .motiva-final .m-modal-dialog.m-modal-fit[b-qg3ge1h2ql] { max-height: none; }
}


/* ── Fit dialogs: the shell's own vertical padding ────────────
   The header/body/footer pads are generous because most dialogs scroll their
   body — the air is what keeps a pinned header and footer from crowding the
   moving content between them. A FitContent dialog has no moving content: its
   height IS its content, so every one of those pixels is spent pushing the
   whole thing closer to the viewport edge.

   Trimmed only inside .m-modal-fit. Nothing shared changes: every other modal
   in the product keeps the values it has, because it needs them.

   Footer is the biggest single win — 20 + 24 of padding around one 32px
   button. */
.motiva-final .m-modal-fit .m-modal-header[b-qg3ge1h2ql] { padding-block-start: 20px; }
.motiva-final .m-modal-fit .m-modal-body[b-qg3ge1h2ql]   { padding-block-start: 14px; }
.motiva-final .m-modal-fit .m-modal-footer[b-qg3ge1h2ql] { padding-block: 14px 16px; }
/* /Components/MotivaGallery/CodeBlock.razor.rz.scp.css */
/* ============================================================
   CodeBlock — semantic <pre><code> renderer for Razor usage
   snippets. Text-only; angle brackets are HTML-encoded by Razor's
   default @-expression behavior, never rendered as markup.
   ============================================================ */

.code-block[b-wsds2xebg5] {
    border-radius: var(--motiva-radius-md);
    overflow: hidden;
    border: 1px solid var(--motiva-border-strong);
}

.code-block-header[b-wsds2xebg5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--motiva-space-sm);
    padding-inline-start: var(--motiva-space-md);
    padding-inline-end: var(--motiva-space-xs);
    background: var(--motiva-surface-secondary);
    border-bottom: 1px solid var(--motiva-border-strong);
}

.code-block-label[b-wsds2xebg5] {
    padding-block: var(--motiva-space-xs);
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-muted);
}

.code-block-pre[b-wsds2xebg5] {
    margin: 0;
    padding: var(--motiva-space-lg);
    background: var(--motiva-text-primary);
    color: var(--motiva-surface-primary);
    overflow-x: auto;
    direction: ltr;
    text-align: left;
}

.code-block-pre code[b-wsds2xebg5] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--motiva-font-size-sm);
    line-height: var(--motiva-line-height-body);
    /* Wrap long attribute lines instead of forcing horizontal scroll —
       overflow-x above remains as a fallback for the rare unbreakable
       token (e.g. a long gradient value with no natural break point). */
    white-space: pre-wrap;
    overflow-wrap: break-word;
}
/* /Components/MotivaGallery/ComponentExample.razor.rz.scp.css */
/* ============================================================
   ComponentExample — bordered live-demo stage for a real Motiva
   production component, used throughout the component doc pages.
   ============================================================ */

.component-example[b-0rbv2j971g] {
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-secondary);
    overflow: hidden;
    transition: box-shadow var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard);
}

.component-example:hover[b-0rbv2j971g] {
    box-shadow: var(--motiva-shadow-sm);
}

.component-example-label[b-0rbv2j971g] {
    padding: var(--motiva-space-xs) var(--motiva-space-md);
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-muted);
    border-bottom: 1px solid var(--motiva-border-subtle);
    background: var(--motiva-surface-primary);
}

.component-example-stage[b-0rbv2j971g] {
    padding: var(--motiva-space-md) var(--motiva-space-lg);
    display: flex;
    flex-wrap: wrap;
    gap: var(--motiva-space-md);
}

.component-example-center[b-0rbv2j971g] {
    align-items: center;
}

/* Playground spotlight treatment: larger, elevated, ambient-washed — the
   preview should visually dominate the configuration controls beside it. */
.component-example-emphasis[b-0rbv2j971g] {
    border-color: transparent;
    background: var(--motiva-gradient-ambient);
    box-shadow: var(--motiva-shadow-md);
}

.component-example-emphasis:hover[b-0rbv2j971g] {
    box-shadow: var(--motiva-shadow-lg);
}

.component-example-emphasis .component-example-label[b-0rbv2j971g] {
    background: transparent;
    border-bottom-color: var(--motiva-border-subtle);
}

.component-example-emphasis .component-example-stage[b-0rbv2j971g] {
    min-height: 220px;
    padding: var(--motiva-space-xl);
    justify-content: center;
}
/* /Components/MotivaGallery/CopyButton.razor.rz.scp.css */
/* ============================================================
   CopyButton — small icon-only copy-to-clipboard control, used
   inside CodeBlock and TokenSwatch. All visual values come from
   --motiva-* tokens.
   ============================================================ */

.copy-btn[b-xpgtymspi0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--motiva-control-height-sm);
    height: var(--motiva-control-height-sm);
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-sm);
    background: transparent;
    color: var(--motiva-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.copy-btn:hover[b-xpgtymspi0] {
    background: var(--motiva-surface-hover);
    color: var(--motiva-text-primary);
}

.copy-btn:focus-visible[b-xpgtymspi0] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.copy-btn-copied[b-xpgtymspi0] {
    color: var(--motiva-color-success);
}

.copy-btn-compact[b-xpgtymspi0] {
    width: 20px;
    height: 20px;
}

.copy-btn-compact .oi[b-xpgtymspi0] {
    font-size: 11px;
}

/* Visible to screen readers only — a polite live region announcing the
   copy result without duplicating the icon's meaning visually. */
.copy-btn-announce[b-xpgtymspi0] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/MotivaGallery/DocPageHeader.razor.rz.scp.css */
.doc-header-title[b-p9dubnmqky] {
    font-size: var(--motiva-font-size-h1);
    margin: 0 0 var(--motiva-space-sm);
    display: flex;
    align-items: baseline;
    gap: var(--motiva-space-sm);
}

.doc-header-sub[b-p9dubnmqky] {
    font-size: var(--motiva-font-size-md);
    font-weight: var(--motiva-font-weight-regular);
    color: var(--motiva-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    direction: ltr;
}

.doc-header-purpose[b-p9dubnmqky] {
    max-width: 72ch;
    color: var(--motiva-text-secondary);
    line-height: var(--motiva-line-height-body);
    margin: 0 0 var(--motiva-space-lg);
}

.doc-header-purpose code[b-p9dubnmqky] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    direction: ltr;
    unicode-bidi: isolate;
}
/* /Components/MotivaGallery/GallerySection.razor.rz.scp.css */
/* ============================================================
   GallerySection — titled, anchorable section wrapper used to
   compose the gallery's documentation pages.
   ============================================================ */

/* Section rhythm: one deliberate size (xl) between sections, not the
   larger 2xl previously used — Phase 4.1 polish trims the gallery's
   vertical whitespace so pages read as a product, not a long document. */
.gallery-section[b-qm1owgpalv] {
    margin-bottom: var(--motiva-space-xl);
    scroll-margin-top: var(--motiva-space-lg);
}

.gallery-section:last-child[b-qm1owgpalv] {
    margin-bottom: 0;
}

.gallery-section-header h2[b-qm1owgpalv] {
    font-size: var(--motiva-font-size-h2);
    font-weight: var(--motiva-font-weight-bold);
    line-height: var(--motiva-line-height-heading);
    color: var(--motiva-text-primary);
    margin: 0 0 var(--motiva-space-xs);
}

.gallery-section-header p[b-qm1owgpalv] {
    color: var(--motiva-text-secondary);
    font-size: var(--motiva-font-size-md);
    line-height: var(--motiva-line-height-body);
    margin: 0 0 var(--motiva-space-md);
    max-width: 72ch;
}

.gallery-section-body[b-qm1owgpalv] {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-md);
}
/* /Components/MotivaGallery/GallerySidebar.razor.rz.scp.css */
/* ============================================================
   GallerySidebar — internal nav for the Motiva dev-only gallery.
   All visual values come from --motiva-* tokens.
   ============================================================ */

.gallery-sidebar[b-ocz9dxvha4] {
    height: 100vh;
    overflow-y: auto;
    padding: var(--motiva-space-lg) var(--motiva-space-md);
    background: var(--motiva-surface-primary);
    border-inline-end: 1px solid var(--motiva-border-subtle);
    position: sticky;
    top: 0;
}

.gallery-brand[b-ocz9dxvha4] {
    display: flex;
    align-items: center;
    gap: var(--motiva-space-sm);
    padding-inline: var(--motiva-space-sm);
}

.gallery-brand-mark[b-ocz9dxvha4] {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-gradient-signature);
    box-shadow: var(--motiva-shadow-sm);
}

.gallery-brand-text[b-ocz9dxvha4] {
    display: flex;
    flex-direction: column;
    line-height: var(--motiva-line-height-tight);
}

.gallery-brand-text strong[b-ocz9dxvha4] {
    font-size: var(--motiva-font-size-lg);
    color: var(--motiva-text-primary);
}

.gallery-brand-text span[b-ocz9dxvha4] {
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-muted);
}

.gallery-dev-flag[b-ocz9dxvha4] {
    padding: var(--motiva-space-md) var(--motiva-space-sm) var(--motiva-space-sm);
}

.gallery-search[b-ocz9dxvha4] {
    position: relative;
    display: flex;
    align-items: center;
    margin: var(--motiva-space-sm) var(--motiva-space-sm) 0;
}

.gallery-search-icon[b-ocz9dxvha4] {
    position: absolute;
    inset-inline-start: var(--motiva-space-sm);
    color: var(--motiva-text-muted);
    font-size: var(--motiva-font-size-sm);
    pointer-events: none;
}

.gallery-search-input[b-ocz9dxvha4] {
    width: 100%;
    height: var(--motiva-control-height-sm);
    padding-inline-start: calc(var(--motiva-space-sm) * 2 + 14px);
    padding-inline-end: var(--motiva-space-sm);
    border-radius: var(--motiva-radius-sm);
    border: 1px solid var(--motiva-border-subtle);
    background: var(--motiva-surface-secondary);
    color: var(--motiva-text-primary);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm);
    transition: border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.gallery-search-input[b-ocz9dxvha4]::placeholder {
    color: var(--motiva-text-muted);
}

.gallery-search-input:focus-visible[b-ocz9dxvha4] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 1px;
    border-color: var(--motiva-color-indigo);
}

/* Native [type="search"] adds its own clear icon in some browsers — hidden
   so it never doubles up with our own clear button. */
.gallery-search-input[b-ocz9dxvha4]::-webkit-search-cancel-button {
    display: none;
}

.gallery-search-clear[b-ocz9dxvha4] {
    position: absolute;
    inset-inline-end: var(--motiva-space-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: var(--motiva-radius-sm);
    background: transparent;
    color: var(--motiva-text-muted);
    cursor: pointer;
}

.gallery-search-clear:hover[b-ocz9dxvha4] {
    background: var(--motiva-surface-hover);
    color: var(--motiva-text-primary);
}

.gallery-search-clear:focus-visible[b-ocz9dxvha4] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 1px;
}

.gallery-search-empty[b-ocz9dxvha4] {
    padding: var(--motiva-space-sm);
    margin: var(--motiva-space-sm) 0 0;
    color: var(--motiva-text-muted);
    font-size: var(--motiva-font-size-sm);
}

.gallery-nav[b-ocz9dxvha4] {
    display: flex;
    flex-direction: column;
    margin-block-start: var(--motiva-space-md); /* breathing room below the search input —
                                                     was 0, relying only on the first link's own
                                                     8px padding, which read as too tight */
}

.gallery-group-title[b-ocz9dxvha4] {
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--motiva-text-muted);
    margin: var(--motiva-space-lg) var(--motiva-space-sm) var(--motiva-space-xs);
}

[b-ocz9dxvha4] .gallery-nav-top {
    font-weight: var(--motiva-font-weight-semibold);
}

/* NavLink is a child Blazor component — it renders its own <a> that does
   NOT carry this component's CSS-isolation scope attribute, so any
   selector targeting NavLink output must use ::deep (see the same note in
   AppSideNav.razor.css, the existing precedent for this pattern). The
   Foundations anchors below are plain <a> tags written directly in this
   component's markup, so they're targeted without ::deep. */

.gallery-subnav a[b-ocz9dxvha4],
[b-ocz9dxvha4] .gallery-nav-link,
[b-ocz9dxvha4] .gallery-subnav-link {
    display: flex;
    align-items: center;
    padding: var(--motiva-space-sm);
    border-radius: var(--motiva-radius-sm);
    /* Reserved, always-present accent bar (transparent at rest) so the
       active state doesn't shift text position when it turns opaque. */
    border-inline-start: 3px solid transparent;
    color: var(--motiva-text-secondary);
    text-decoration: none;
    font-size: var(--motiva-font-size-sm);
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                transform var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.gallery-subnav a:hover[b-ocz9dxvha4],
[b-ocz9dxvha4] .gallery-nav-link:hover,
[b-ocz9dxvha4] .gallery-subnav-link:hover {
    background: var(--motiva-surface-hover);
    color: var(--motiva-text-primary);
    transform: translateX(var(--gallery-nav-hover-shift, 0));
}

/* transform: translateX() is always physical (it does not flip for RTL the
   way logical properties do), so this app's fixed dir="rtl" (owned
   globally by app.css — never toggled at runtime, per
   MOTIVA_FOUNDATIONS.md) means "toward reading-start" is a positive X
   value here, not a mirrored logical one. Documented explicitly rather
   than silently relying on a value that would read backwards if this app
   ever became direction-agnostic. */
.gallery-subnav a:hover[b-ocz9dxvha4],
[b-ocz9dxvha4] .gallery-nav-link:hover,
[b-ocz9dxvha4] .gallery-subnav-link:hover {
    --gallery-nav-hover-shift: 2px;
}

.gallery-subnav a.active[b-ocz9dxvha4],
[b-ocz9dxvha4] .gallery-nav-link.active,
[b-ocz9dxvha4] .gallery-subnav-link.active {
    background: var(--motiva-color-info-bg);
    color: var(--motiva-color-indigo);
    font-weight: var(--motiva-font-weight-bold);
    border-inline-start-color: var(--motiva-color-indigo);
}

.gallery-subnav[b-ocz9dxvha4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gallery-subnav a[b-ocz9dxvha4],
[b-ocz9dxvha4] .gallery-subnav-link {
    padding-inline-start: var(--motiva-space-md);
}

.gallery-subnav-disabled span[b-ocz9dxvha4] {
    display: block;
    padding: var(--motiva-space-sm);
    padding-inline-start: var(--motiva-space-md);
    color: var(--motiva-color-disabled-text);
    font-size: var(--motiva-font-size-sm);
    cursor: not-allowed;
}

.gallery-subnav-disabled em[b-ocz9dxvha4] {
    font-style: normal;
    font-size: var(--motiva-font-size-caption);
}

.gallery-subnav a:focus-visible[b-ocz9dxvha4],
[b-ocz9dxvha4] .gallery-nav-link:focus-visible,
[b-ocz9dxvha4] .gallery-subnav-link:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .gallery-sidebar[b-ocz9dxvha4] {
        height: auto;
        position: static;
        border-inline-end: none;
        border-bottom: 1px solid var(--motiva-border-subtle);
    }

    .gallery-nav[b-ocz9dxvha4] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--motiva-space-xs);
    }

    .gallery-group-title[b-ocz9dxvha4] {
        flex-basis: 100%;
        margin-block: var(--motiva-space-sm) 2px;
    }

    .gallery-subnav[b-ocz9dxvha4] {
        flex-direction: row;
        flex-wrap: wrap;
        flex-basis: 100%;
    }
}
/* /Components/MotivaGallery/RelatedComponents.razor.rz.scp.css */
/* ============================================================
   RelatedComponents — footer cross-navigation between component
   doc pages. All visual values come from --motiva-* tokens.
   ============================================================ */

.related-components[b-k4sopnx3nd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--motiva-space-sm);
}

.related-chip[b-k4sopnx3nd] {
    display: inline-flex;
    align-items: center;
    padding: var(--motiva-space-xs) var(--motiva-space-md);
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-surface-secondary);
    border: 1px solid var(--motiva-border-subtle);
    color: var(--motiva-color-indigo);
    font-weight: var(--motiva-font-weight-semibold);
    font-size: var(--motiva-font-size-sm);
    text-decoration: none;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                transform var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                box-shadow var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.related-chip:hover[b-k4sopnx3nd] {
    background: var(--motiva-surface-hover);
    box-shadow: var(--motiva-shadow-sm);
    transform: translateY(-1px);
}

.related-chip:focus-visible[b-k4sopnx3nd] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.related-arrow[b-k4sopnx3nd] {
    color: var(--motiva-text-muted);
    font-size: var(--motiva-font-size-sm);
}
/* /Components/MotivaGallery/TokenSwatch.razor.rz.scp.css */
/* ============================================================
   TokenSwatch — visual swatch + token name for a Foundations
   token demonstration (color, gradient, radius, shadow, spacing).
   ============================================================ */

.token-swatch[b-zp0ku3r1og] {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-sm);
}

.token-swatch-preview[b-zp0ku3r1og] {
    height: 64px;
    border-radius: var(--motiva-radius-md);
    border: 1px solid var(--motiva-border-subtle);
    background: var(--motiva-surface-primary);
    transition: transform var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                box-shadow var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.token-swatch:hover .token-swatch-preview[b-zp0ku3r1og] {
    transform: translateY(-2px);
    box-shadow: var(--motiva-shadow-sm);
}

.token-swatch-meta[b-zp0ku3r1og] {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-xs);
}

.token-swatch-meta strong[b-zp0ku3r1og] {
    font-size: var(--motiva-font-size-sm);
    color: var(--motiva-text-primary);
}

/* Chip presentation: reads as a reusable design asset (like a real token
   browser) with an inline copy button — the token name and the action to
   reuse it live in one compact unit. */
.token-swatch-chip[b-zp0ku3r1og] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--motiva-space-xs);
    padding: 2px 2px 2px var(--motiva-space-sm);
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-secondary);
    border: 1px solid var(--motiva-border-subtle);
    max-width: 100%;
}

.token-swatch-chip code[b-zp0ku3r1og] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-muted);
    direction: ltr;
    text-align: start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/PageHeader/MPageHeader.razor.rz.scp.css */
/* ============================================================
   MPageHeader — Motiva System Master, "Page header — two variants"

   Every colour/gradient comes from the .motiva token scope.
   Each scope-only token is referenced with a var() fallback to its
   :root peer, so the component still renders correctly outside the
   scope (e.g. in the /motiva gallery) instead of losing its wash.
   ============================================================ */

.m-page-header[b-igt5f7kp0i] {
    position: relative;
    /* The two radial washes are positioned relative to this box; clipping
       keeps them from bleeding over the content below the band. */
    overflow: hidden;

    /* Master: "the ambient header and everything below it share the same
       left/right boundaries." Phase 2 already declared that inset as a
       token on the student shell — this reuses it rather than restating
       40px, so header and page content can never drift apart. */
    padding-inline: var(--motiva-content-padding-inline, 40px);
}

/* Master hero band: the stronger of the two ambient intensities.
   Block padding (40/30 hero, 38/28 compact) is literal — the spacing
   scale steps 32 → 48, so no token lands on the Master's values and
   snapping to one would visibly change the band's height. */
.m-page-header-hero[b-igt5f7kp0i] {
    padding-block: 40px 30px;
    background: var(--motiva-gradient-ambient-hero, var(--motiva-gradient-ambient));
}

/* Master compact band: the calmer wash used by Tasks / Knowledge Center. */
.m-page-header-compact[b-igt5f7kp0i] {
    padding-block: 38px 28px;
    background: var(--motiva-gradient-ambient);
}

/* ── Title row ────────────────────────────────────────────────
   position: relative lifts the text above the ambient background's
   stacking context so the radial washes never sit on top of it.

   With no Actions this is a flex container holding one flex:1 child, which
   lays out identically to the plain block it replaced — every existing
   caller is unaffected. The 32px gap is the Design's own value on the one
   screen that uses the slot. align-items: flex-start keeps the button
   pinned to the first line of a title that wraps to two. */

.m-page-header-top[b-igt5f7kp0i] {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
}

.m-page-header-body[b-igt5f7kp0i] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.m-page-header-actions[b-igt5f7kp0i] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--motiva-space-sm);
}

/* Master rhythm: 6px title→subtitle in compact, 10px in hero. Neither
   value has a --motiva-space-* peer (the scale steps 4 → 8 → 16), so
   they stay literal rather than being rounded onto a token that would
   visibly change the Master's spacing. */
.m-page-header-compact .m-page-header-body[b-igt5f7kp0i] { gap: 6px; }
.m-page-header-hero    .m-page-header-body[b-igt5f7kp0i] { gap: 10px; }

.m-page-header-title[b-igt5f7kp0i] {
    margin: 0;
    font-weight: var(--motiva-font-weight-bold);
}

/* Compact — Master "Page title": 25px / 700, -0.4px tracking, ink. */
.m-page-header-compact .m-page-header-title[b-igt5f7kp0i] {
    font-size: var(--motiva-font-size-h1);
    line-height: var(--motiva-line-height-tight);
    letter-spacing: var(--motiva-letter-spacing-page, normal);
    color: var(--motiva-text-primary);
}

/* Hero — the greeting is deliberately quieter than a page title: the
   loud element of a hero page is the snapshot content below it. The
   Master draws this at 17px, which sits between the 15px section and
   18px modal steps of the scale; it is snapped to the existing 18px
   token rather than introducing a one-off literal for a 1px gap. */
.m-page-header-hero .m-page-header-title[b-igt5f7kp0i] {
    font-size: var(--motiva-font-size-h2);
    line-height: var(--motiva-line-height-heading);
    color: var(--motiva-text-secondary);
}

.m-page-header-subtitle[b-igt5f7kp0i] {
    margin: 0;
    font-weight: var(--motiva-font-weight-regular);
    line-height: var(--motiva-line-height-body);
    color: var(--motiva-text-muted);
}

.m-page-header-compact .m-page-header-subtitle[b-igt5f7kp0i] {
    font-size: var(--motiva-font-size-body);
}

.m-page-header-hero .m-page-header-subtitle[b-igt5f7kp0i] {
    font-size: var(--motiva-font-size-lg);
}

/* ── Snapshot slot (KPI row / stepper) ────────────────────────
   The Master leaves 24px (compact) / 26px (hero) between the text
   block and the KPI row. Both resolve to the existing --motiva-space-lg
   step; the 2px hero difference is normalized deliberately rather than
   hardcoded, since nothing in the Master depends on it. */

.m-page-header-content[b-igt5f7kp0i] {
    position: relative;
    margin-block-start: var(--motiva-space-lg);
}

/* ============================================================
   STUDENT EXPERIENCE, FINAL — the header is a title row, not a band

   In the finalized student screens there is no ambient header band at
   all. Every page opens the same way: an `h1` at 38px/700 sitting
   directly on the canvas, an optional one-line subtitle under it, and
   the page's controls on the SAME row, pushed to the reading end.
   (design-reference/motiva-student-final/README.md §2.)

   The band was the previous system's signature, so this is the single
   biggest visual difference between the two — and collapsing it here,
   once, re-bases all six migrated student pages without editing any of
   them.

   HERO AND COMPACT COLLAPSE TO ONE
   The two variants existed because the old hero drew a quieter, smaller
   greeting than a page title. The final dashboard's greeting IS the
   page title, at the same 38px as every other screen, so both variants
   resolve to one treatment for students. The enum stays — Mentor still
   consumes both — and nothing outside `.motiva-student` is touched.
   ============================================================ */

.motiva-final .m-page-header[b-igt5f7kp0i] {
    overflow: visible;              /* nothing to clip — there is no wash */
    padding-inline: 4px;            /* the design's own 4px optical inset */
    padding-block: 8px 14px;
    background: none;
}

/* Both variants, one treatment. Declared together so a future edit
   cannot make them drift. */
.motiva-final .m-page-header-hero[b-igt5f7kp0i],
.motiva-final .m-page-header-compact[b-igt5f7kp0i] {
    padding-block: 8px 14px;
    background: none;
}

/* Controls sit on the title's baseline, not above it. */
.motiva-final .m-page-header-top[b-igt5f7kp0i] {
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
}

.motiva-final .m-page-header-body[b-igt5f7kp0i] { gap: 10px; }

.motiva-final .m-page-header-title[b-igt5f7kp0i],
.motiva-final .m-page-header-hero .m-page-header-title[b-igt5f7kp0i],
.motiva-final .m-page-header-compact .m-page-header-title[b-igt5f7kp0i] {
    font-size: var(--motiva-font-size-h1);
    font-weight: var(--motiva-font-weight-bold);
    line-height: var(--motiva-line-height-tight);
    letter-spacing: var(--motiva-letter-spacing-page);
    color: var(--motiva-text-primary);
}

/* Decision-0 — CORE (Compact) page titles take the approved 25px Master
   page-title hierarchy, matching MPageHeaderCard and the Management rollout.
   HERO keeps its larger greeting scale (the rule above), so the two are
   intentionally NOT collapsed. Only font-size is overridden; weight,
   line-height, tracking and colour still come from the shared rule. This
   applies to every Compact consumer (tasks, calendars, roadmap, submissions,
   projects lists, catalog, assignment) — the intended system-wide alignment. */
.motiva-final .m-page-header-compact .m-page-header-title[b-igt5f7kp0i] {
    font-size: 25px;
}

.motiva-final .m-page-header-subtitle[b-igt5f7kp0i],
.motiva-final .m-page-header-hero .m-page-header-subtitle[b-igt5f7kp0i],
.motiva-final .m-page-header-compact .m-page-header-subtitle[b-igt5f7kp0i] {
    font-size: var(--motiva-font-size-lg);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1;
    color: var(--motiva-text-muted);
}

.motiva-final .m-page-header-actions[b-igt5f7kp0i] {
    margin-inline-start: auto;
    gap: 12px;
    flex-wrap: wrap;
}

/* The snapshot slot keeps its job — it is what the dashboard's journey
   stepper and the tasks KPI row render into — but it no longer sits
   inside a band, so it takes the design's 22px section gap. */
.motiva-final .m-page-header-content[b-igt5f7kp0i] {
    margin-block-start: 16px;
}
/* /Components/PageHeader/MPageHeaderCard.razor.rz.scp.css */
/* ============================================================
   MPageHeaderCard — compact white-surface page header.

   The SURFACE (white fill, violet-tint hairline, 24px radius, subtle
   lift) is `.motiva-panel`, worn in the markup — never restated here.
   This scoped sheet is layout + title typography only.
   ============================================================ */

.m-page-header-card[b-7a8x3wnswr] {
    /* One restrained padding for every migrated header, so they stop
       drifting (they were 18/20/22px apart before). Compact by intent —
       this is a title row, not a hero band. */
    padding: 20px 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    /* When a narrow viewport can't fit title + actions on one line, the
       actions drop below rather than squeezing the title. */
    flex-wrap: wrap;
}

/* ── Compact band: Student Tasks + Planning only ─────────────────────────────
   These two core Student pages want a slightly shorter title band than the
   shared 20px default (block padding 20px → 12px, ~16px less header height),
   plus a modest gap before the content below.

   WHY THIS LIVES HERE, NOT IN THE PAGE SHEETS. The <header> is rendered by
   THIS component, so it carries this component's isolation scope — never the
   page's. A `.tsk-header` / `.pl-header` rule written in a page's own scoped
   sheet compiles to `[b-page]` and never matches the card. Narrowed to the two
   page classes the pages already pass via Class=, so every other caller
   (Lecturer, Mentor, Management) keeps the default 20px padding. Inline padding
   (24px → width), typography, the .motiva-panel surface and its radius are all
   untouched — height only. */
.m-page-header-card.tsk-header[b-7a8x3wnswr],
.m-page-header-card.pl-header[b-7a8x3wnswr] {
    padding-block: 12px;
    margin-block-end: 16px;
}

.m-page-header-card-main[b-7a8x3wnswr] {
    display: flex;
    align-items: center;
    gap: 16px;
    /* min-width:0 lets a long title shrink/wrap inside the flex row instead
       of forcing the card wider than its column. */
    min-width: 0;
}

.m-page-header-card-leading[b-7a8x3wnswr] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.m-page-header-card-text[b-7a8x3wnswr] {
    min-width: 0;
}

/* Title + its inline adornments (MInfoTip / MSummaryTag / status) on one
   baseline. Mirrors the finished Management `*-head-title` rows exactly
   (align-items:baseline, 14px gap, wrap) so a migrated header keeps the same
   title-to-chip composition. Present only when TitleTrailing is supplied. */
.m-page-header-card-titlerow[b-7a8x3wnswr] {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    min-width: 0;
}

/* PAGE TITLE — the Master's "Page title" step: 25px / 700.

   WHY A LITERAL AND NOT --motiva-font-size-h1. That token maps to
   --g-type-page-title, which the base `.motiva` scope sets to the Master's
   25px — but the finished `.motiva.motiva-final` scope (worn by every
   student/mentor/lecturer shell) re-inflates it to a 38px semantic "h1".
   Reading the token therefore rendered this compact header card's title at
   38px on every page — a page-header that dominated the surface. Pinning the
   Master's 25px here restores the approved page-header hierarchy uniformly;
   weight/line-height/tracking/colour stay on their tokens. */
/* CORE variant — the standard core-application page-title scale (~31px),
   larger than the Management/Tier-1–2 default (25px) but well below the old
   38px hero. ONE shared scale for every core page; Hero greetings keep their
   own larger treatment in MPageHeader. */
/* 36px, from 31. The Core variant is what every primary working surface
   wears — submissions, tasks, teams, resources — and 31 sat below the
   product's 36–40 page-title step while the type under it moved up.

   It reads the TOKEN rather than a third literal. --motiva-font-size-h1
   is 38px, inside the product's 36–40 page-title step, and it is what the
   project workspace's own title reads too — so every primary surface in
   the product now opens at one size instead of 31 here and 44 there.

   The header comment above records 38px as having "dominated the surface"
   once. That was measured against 12–14px body text; the body step is
   15.5px and rows are 17px now, so the ratio it was judged on no longer
   holds.

   THE MANAGEMENT/TIER-1–2 DEFAULT IS RAISED WITH IT. It was held at 25px
   on the grounds that it served mostly-peripheral admin pages; the
   coverage audit showed that leaving it there is exactly what made
   /management/users, /management/projects, /management/tasks,
   /management/milestones and /management/cycles open at 25px while
   /projects and /lecturer/submissions opened at 38px — the same semantic
   level, two sizes, decided by which tier the page happened to pass.
   One page-title step now, for every area. */
.m-page-header-card--core .m-page-header-card-title[b-7a8x3wnswr] {
    font-size: var(--motiva-font-size-h1, 31px);
}

.m-page-header-card-title[b-7a8x3wnswr] {
    margin: 0;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-h1, 25px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: var(--motiva-line-height-tight, 1.1);
    letter-spacing: var(--motiva-letter-spacing-page, -0.035em);
    color: var(--motiva-text-primary, #1B1A22);
}

.m-page-header-card-subtitle[b-7a8x3wnswr] {
    margin: 4px 0 0;
    font-size: var(--motiva-font-size-sm, 13px);
    line-height: var(--motiva-line-height-body, 1.5);
    color: var(--motiva-text-muted, #64748b);
}

.m-page-header-card-actions[b-7a8x3wnswr] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Optional second row. `flex-basis: 100%` forces it onto its own line within
   the header's wrapping flex row; the header's own 16px gap provides the space
   between it and the title row above. The page supplies its own layout inside. */
.m-page-header-card-secondrow[b-7a8x3wnswr] {
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
}
/* /Components/Progress/MProgressBar.razor.rz.scp.css */
/* ============================================================
   MProgressBar — Motiva design system
   All visual values come from --motiva-* tokens (motiva-tokens.css).

   The single documented inline-style exception for this component: the
   host element carries `style="--m-progress-percent: N%"` (a CSS custom
   property, not a direct style property) so the fill width can react to
   arbitrary runtime data without generating one CSS class per percentage
   point. See MProgressBar.razor for where it's set.
   ============================================================ */

.m-progress[b-xax4qp6u0g] {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-xs);
}

.m-progress-header[b-xax4qp6u0g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--motiva-font-size-sm);
    color: var(--motiva-text-secondary);
}

.m-progress-value-text[b-xax4qp6u0g] {
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
}

.m-progress-track[b-xax4qp6u0g] {
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-surface-secondary);
    overflow: hidden;
}

.m-progress-small  .m-progress-track[b-xax4qp6u0g] { height: var(--motiva-space-xs); }
.m-progress-medium .m-progress-track[b-xax4qp6u0g] { height: var(--motiva-space-sm); }
.m-progress-large  .m-progress-track[b-xax4qp6u0g] { height: var(--motiva-space-md); }

.m-progress-fill[b-xax4qp6u0g] {
    height: 100%;
    width: var(--m-progress-percent, 0%);
    background: var(--motiva-gradient-signature);
    border-radius: inherit;
    transition: width var(--motiva-motion-duration-slow) var(--motiva-motion-easing-standard);
}

/* Student experience, final: the journey's 4px track. The fill is the
   signature gradient, which is how the stepper draws every completed
   segment. (README.md, Dashboard journey.) */
.motiva-final .m-progress-track[b-xax4qp6u0g] {
    height: 4px;
    border-radius: 0;
    background: var(--motiva-journey-track);
}

.motiva-final .m-progress-small  .m-progress-track[b-xax4qp6u0g] { height: 4px; }
.motiva-final .m-progress-medium .m-progress-track[b-xax4qp6u0g] { height: 4px; }
.motiva-final .m-progress-large  .m-progress-track[b-xax4qp6u0g] { height: 6px; }

.motiva-final .m-progress-fill[b-xax4qp6u0g] {
    border-radius: 0;
    background: var(--motiva-gradient-signature);
}
/* /Components/ProjectImport/ProjectImportWizard.razor.rz.scp.css */
/* ============================================================
   ProjectImportWizard — ייבוא פרויקטים
   Prefix: piw-

   THE SIBLING OF UserImportWizard.razor.css, AND DELIBERATELY IDENTICAL.
   The two wizards are the same object in two domains — same modal, same rail,
   same drop zone, same mapping rows, same diff, same result screen — so this
   file is that one's rules under this component's prefix, plus the two
   selectors the project wizard needs and the users wizard has no use for
   (.piw-dup-num, .piw-dup-empty--error). It is a copy rather than a shared
   stylesheet because Blazor CSS isolation is per-component: a rule written in
   UserImportWizard.razor.css carries THAT component's scope attribute and can
   never match markup rendered here. Any change to the wizard language belongs
   in both files.

   Lives inside MModal, on the Project Catalog screen, so it inherits the
   .motiva .motiva-final token scope: every --motiva-* below already resolves
   to the finished design's values (18px card radius, 38px controls, the warm
   ink ramp, violet / teal / rose).

   COLOUR DISCIPLINE
   -----------------
   • violet  — the brand edge on a CHOSEN control, never a filled background.
   • teal    — a state that is fine (mapped, valid, will be created).
   • rose    — errors and the one destructive choice (replace). Nothing else.
   An "requires mapping" state is NOT an error, so it is amber-free and
   rose-free: it is drawn as neutral-with-emphasis.

   This is an admin workflow, so the density is tighter than a student screen:
   11.5-13px type, 6-10px insets, no decorative whitespace.
   ============================================================ */

.piw[b-rz735nvo1z] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    color: var(--motiva-text-primary, #1B1A22);
}

/* ── Stage rail ──────────────────────────────────────────── */
.piw-rail[b-rz735nvo1z] {
    padding: 2px 0 4px;
    border-bottom: 1px solid var(--motiva-border-subtle, rgba(27, 26, 34, 0.06));
}

.piw-rail-label[b-rz735nvo1z] {
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #6B6779);
    white-space: nowrap;
}

.piw-rail-label--on[b-rz735nvo1z] {
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-text-primary, #1B1A22);
}

/* ── Stage shell ─────────────────────────────────────────── */
.piw-stage[b-rz735nvo1z] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 260px;
}

.piw-stage--center[b-rz735nvo1z] {
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
}

.piw-stage-head[b-rz735nvo1z] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.piw-stage-line[b-rz735nvo1z] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-primary, #1B1A22);
}

.piw-foot-note[b-rz735nvo1z] {
    margin: 0;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.5;
    color: var(--motiva-text-muted, #6B6779);
}

.piw-muted[b-rz735nvo1z]  { color: var(--motiva-text-muted, #6B6779); }
.piw-strong[b-rz735nvo1z] { font-weight: var(--motiva-font-weight-semibold, 600); }
.piw-ltr[b-rz735nvo1z]    { direction: ltr; text-align: right; }

/* ── Tooltip ─────────────────────────────────────────────────
   There is no tooltip component in the system and this needed one bubble,
   not a new primitive: a 15px "?" that reveals a positioned bubble on hover
   AND on keyboard focus, so the explanation is not mouse-only. Kept local to
   the wizard deliberately — if a second screen needs it, that is the moment
   it becomes a component, not before. */
.piw-tip[b-rz735nvo1z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--motiva-surface-chip, var(--motiva-color-neutral-bg));
    color: var(--motiva-text-muted, #6B6779);
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1;
    cursor: help;
}

.piw-tip--inline[b-rz735nvo1z] { margin-inline-start: 6px; }

.piw-tip:focus-visible[b-rz735nvo1z] {
    outline: 2px solid var(--motiva-color-focus-ring, #6D28F5);
    outline-offset: 2px;
}

.piw-tip[b-rz735nvo1z]::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 7px);
    inset-inline-start: 0;
    z-index: 5;
    width: max-content;
    max-width: 300px;
    padding: 8px 10px;
    border-radius: var(--motiva-radius-sm, 12px);
    background: var(--motiva-text-primary, #1B1A22);
    /* Approved exception, the same one MButton and .motiva-cta document: no
       --motiva-* token represents "text on the ink surface". */
    color: #fff;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.5;
    text-align: start;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.piw-tip:hover[b-rz735nvo1z]::after,
.piw-tip:focus-visible[b-rz735nvo1z]::after {
    opacity: 1;
    visibility: visible;
}

/* ── Notes ───────────────────────────────────────────────────
   Rose is errors and destructive warnings ONLY. There is no third tone. */
.piw-note[b-rz735nvo1z] {
    padding: 9px 12px;
    border-radius: var(--motiva-radius-sm, 12px);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.5;
}

.piw-note--error[b-rz735nvo1z],
.piw-note--warn[b-rz735nvo1z] {
    background: var(--motiva-color-danger-bg);
    color: var(--motiva-color-rose-ink, #C42B52);
}

/* ── 1. Upload ───────────────────────────────────────────── */
.piw-drop[b-rz735nvo1z] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 30px 20px;
    border-radius: var(--motiva-radius-lg, 24px);
    border: 1.5px dashed var(--motiva-border-strong, rgba(27, 26, 34, 0.12));
    background: var(--motiva-surface-secondary, #FBFBFD);
    text-align: center;
    transition:
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.piw-drop--over[b-rz735nvo1z],
.piw-drop:focus-within[b-rz735nvo1z] {
    border-color: var(--motiva-color-violet, #6D28F5);
    background: var(--motiva-color-brand-bg);
}

/* A native file input is already a drop target and already opens the picker
   on click. Laying it over the whole zone at zero opacity therefore buys both
   behaviours with no JS interop and no custom dragover/drop plumbing.

   ::deep is required: the <input> is rendered by the framework's InputFile
   component and carries no isolation attribute of ours, so it can only be
   reached through a wrapper that does. */
.piw-drop-input[b-rz735nvo1z] {
    position: absolute;
    inset: 0;
}

.piw-drop-input[b-rz735nvo1z]  input[type="file"] {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.piw-drop-glyph[b-rz735nvo1z] { display: inline-flex; }

.piw-drop-title[b-rz735nvo1z] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
}

.piw-drop-sub[b-rz735nvo1z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-muted, #6B6779);
}

/* The longer "what goes in the file" explanation is an ACCORDION, not a
   permanent card: it answers a first-time question and then never needs to be
   read again. */
.piw-help-body[b-rz735nvo1z] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2px 0 6px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-regular, 400);
    line-height: 1.6;
    color: var(--motiva-text-secondary, #4A4657);
}

.piw-help-body p[b-rz735nvo1z] { margin: 0; }
.piw-help-muted[b-rz735nvo1z]  { color: var(--motiva-text-muted, #6B6779); }

.piw-help-body code[b-rz735nvo1z] {
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--motiva-surface-hover, rgba(27, 26, 34, 0.035));
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--motiva-font-size-caption, 11.5px);
    color: var(--motiva-text-primary, #1B1A22);
    direction: ltr;
    unicode-bidi: isolate;
}

/* Selected-file card */
.piw-file[b-rz735nvo1z] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    border-radius: var(--motiva-radius-md, 16px);
    background: var(--motiva-surface-secondary, #FBFBFD);
    border: 1px solid var(--motiva-border-card, rgba(27, 26, 34, 0.07));
}

.piw-file-glyph[b-rz735nvo1z] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, rgba(27, 26, 34, 0.07));
    color: var(--motiva-color-violet, #6D28F5);
}

.piw-file-text[b-rz735nvo1z] { flex: 1 1 auto; min-width: 0; }

.piw-file-name[b-rz735nvo1z] {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.3;
}

.piw-file-meta[b-rz735nvo1z] {
    margin: 2px 0 0;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.3;
    color: var(--motiva-text-muted, #6B6779);
}

.piw-file-clear[b-rz735nvo1z] {
    flex: 0 0 auto;
    padding: 6px 10px;
    border: 0;
    background: none;
    border-radius: var(--motiva-radius-sm, 12px);
    font-family: inherit;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-color-violet, #6D28F5);
    cursor: pointer;
}

.piw-file-clear:hover[b-rz735nvo1z] { background: var(--motiva-surface-hover, rgba(27, 26, 34, 0.035)); }

/* ── 2. Mapping ──────────────────────────────────────────── */
/* NOT overflow:hidden. This list contains popup menus that must leave its box
   — the same lesson MDataTable's scroller carries about kebab menus. The
   corners are therefore rounded on the first and last ROW instead of clipped
   by the container. */
.piw-maplist[b-rz735nvo1z] {
    display: flex;
    flex-direction: column;
    border-radius: var(--motiva-radius-md, 16px);
    border: 1px solid var(--motiva-border-card, rgba(27, 26, 34, 0.07));
}

.piw-maprow:first-child[b-rz735nvo1z] {
    border-start-start-radius: var(--motiva-radius-md, 16px);
    border-start-end-radius:   var(--motiva-radius-md, 16px);
}

.piw-maprow:last-child[b-rz735nvo1z] {
    border-end-start-radius: var(--motiva-radius-md, 16px);
    border-end-end-radius:   var(--motiva-radius-md, 16px);
}

.piw-maprow[b-rz735nvo1z] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) 120px minmax(0, 1.1fr);
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--motiva-border-subtle, rgba(27, 26, 34, 0.06));
    background: var(--motiva-surface-primary, #fff);
}

.piw-maprow:last-child[b-rz735nvo1z] { border-bottom: 0; }

/* A column that was recognised but NOT decided on is the only one that needs
   to pull the eye. It does it with a violet start-edge, not a fill and not a
   red — nothing is wrong yet, it is simply outstanding. */
.piw-maprow--needs[b-rz735nvo1z] {
    background: var(--motiva-surface-secondary, #FBFBFD);
    box-shadow: inset 2px 0 0 var(--motiva-color-violet, #6D28F5);
}

.piw-map-src[b-rz735nvo1z] { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.piw-map-header[b-rz735nvo1z] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.3;
}

.piw-map-sample[b-rz735nvo1z] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.3;
    color: var(--motiva-text-subtle, #9B96A8);
}

/* inline-flex, so the marker's position is layout and not bidi resolution:
   in RTL the first child (the label) sits at the reading start and the marker
   trails it — "דורש מיפוי !" rather than "! דורש מיפוי". */
.piw-map-state[b-rz735nvo1z] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
}

/* The marker is a fixed-width slot so the four states' labels all end on the
   same edge instead of shifting by a glyph width. */
.piw-map-state-mark[b-rz735nvo1z] {
    flex: 0 0 auto;
    min-width: 7px;
    text-align: center;
}

.piw-map-state--auto[b-rz735nvo1z],
.piw-map-state--manual[b-rz735nvo1z] { color: var(--motiva-color-teal-ink, var(--motiva-color-teal)); }
.piw-map-state--needs[b-rz735nvo1z]  { color: var(--motiva-color-violet, #6D28F5); }
.piw-map-state--off[b-rz735nvo1z]    { color: var(--motiva-text-subtle, #9B96A8); }

/* The destination control is MSelect, whose closed height/radius/type are
   already the admin-control values this row was built around — so there is no
   .piw-select rule here any more. What IS still this stage's business is
   stacking: the open menu leaves the row's box, so a row whose menu is open
   has to sit above the rows after it. */
.piw-map-dest[b-rz735nvo1z] {
    display: flex;
    align-items: center;
    min-width: 0;
    /* Establishes the containing block for MSelect's absolutely-positioned
       menu without giving the cell a z-index of its own. */
    position: relative;
}

/* A row whose menu is open has to paint over the rows after it, which are
   opaque. */
.piw-maprow:has(.m-sel-open)[b-rz735nvo1z] { position: relative; z-index: 2; }

/* ── 3./6. Compact tables ────────────────────────────────── */
.piw-tablewrap[b-rz735nvo1z] {
    max-height: 320px;
    overflow: auto;
    border-radius: var(--motiva-radius-md, 16px);
    border: 1px solid var(--motiva-border-card, rgba(27, 26, 34, 0.07));
}

.piw-tablewrap--short[b-rz735nvo1z] { max-height: 200px; }

.piw-table[b-rz735nvo1z] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
}

.piw-table th[b-rz735nvo1z] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 10px;
    text-align: start;
    background: var(--motiva-surface-secondary, #FBFBFD);
    border-bottom: 1px solid var(--motiva-border-subtle, rgba(27, 26, 34, 0.06));
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-muted, #6B6779);
    white-space: nowrap;
}

.piw-table td[b-rz735nvo1z] {
    padding: 7px 10px;
    border-bottom: 1px solid var(--motiva-border-subtle, rgba(27, 26, 34, 0.06));
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.piw-table tr:last-child td[b-rz735nvo1z] { border-bottom: 0; }

.piw-col-line[b-rz735nvo1z]   { width: 44px; color: var(--motiva-text-subtle, #9B96A8); }
.piw-col-narrow[b-rz735nvo1z] { width: 92px; }
.piw-col-state[b-rz735nvo1z]  { width: 104px; }
/* Written against `.piw-table td/th` rather than on its own, because those
   two set the cell padding at higher specificity than a bare class. */
.piw-table td.piw-col-chev[b-rz735nvo1z],
.piw-table th.piw-col-chev[b-rz735nvo1z] { width: 38px; padding-inline: 4px; text-align: center; }

.piw-row--error td[b-rz735nvo1z] { background: var(--motiva-color-danger-bg); }

.piw-inline[b-rz735nvo1z] {
    display: inline-block;
    margin-inline-end: 10px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.5;
}

.piw-inline--error[b-rz735nvo1z] { color: var(--motiva-color-rose-ink, #C42B52); }
.piw-inline--note[b-rz735nvo1z]  { color: var(--motiva-text-muted, #6B6779); }

/* ── 3. The check table's accordion rows ─────────────────── */
/* Everything here is scoped to .piw-vtable so the Done stage's failure table —
   which is nothing BUT failures, and where a red wash is the honest picture —
   keeps the plain .piw-row--error treatment above.

   ONE 2px LOGICAL SIDE BORDER, ALWAYS PRESENT, USUALLY TRANSPARENT.
   Every side marking on this table is drawn by recolouring these two borders
   rather than by adding one, because a border that appears only on some rows
   changes their cell widths and pulls the columns out of alignment — and an
   inset box-shadow, the usual way round that, is physical and would point at
   the wrong edge in an RTL table. */
/* th as well as td: they share a column, so a border on only one of them
   offsets the header text from the values under it by its own width. */
.piw-vtable td:first-child[b-rz735nvo1z],
.piw-vtable th:first-child[b-rz735nvo1z] { border-inline-start: 2px solid transparent; }
.piw-vtable td:last-child[b-rz735nvo1z],
.piw-vtable th:last-child[b-rz735nvo1z]   { border-inline-end:   2px solid transparent; }

/* THE RED IS AN EDGE, NOT A FILL. A file where 52 of 52 rows are broken used
   to arrive as a single red rectangle, in which the two importable rows were
   the invisible ones. Marking the exception on its start edge and leaving the
   surface alone is the same construction .piw-maprow--needs already uses for
   an outstanding mapping. */
.piw-vtable .piw-row--error td[b-rz735nvo1z] { background: none; }
.piw-vtable .piw-row--error td:first-child[b-rz735nvo1z] { border-inline-start-color: var(--motiva-color-rose, #D93864); }

.piw-chev[b-rz735nvo1z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: var(--motiva-radius-full, 999px);
    background: none;
    color: var(--motiva-text-subtle, #9B96A8);
    cursor: pointer;
    transition: transform  var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
                color      var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
                background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.piw-chev:hover[b-rz735nvo1z] {
    background: var(--motiva-surface-hover, rgba(27, 26, 34, 0.045));
    color: var(--motiva-text-primary, #1B1A22);
}

.piw-chev:focus-visible[b-rz735nvo1z] {
    outline: 2px solid var(--motiva-color-focus-ring, #6D28F5);
    outline-offset: 1px;
}

/* A rotation, not a second glyph — direction-free, like MAccordionItem's. */
.piw-chev--on[b-rz735nvo1z] {
    transform: rotate(180deg);
    color: var(--motiva-color-violet, #6D28F5);
}

/* ── The bounded accordion surface ───────────────────────── */
/* MAccordionItem's contract, expressed on two table rows: the tint belongs to
   the head AND the body, one continuous border runs round the pair, and the
   detail is an inset opaque card sitting on that tint. Without the shared tint
   the detail reads as content dropped into the table rather than as the inside
   of the row that opened it — the exact split MAccordionItem exists to fix.
   These rules come after the error rules on purpose: an OPEN row is outlined
   as one box, so its start edge is the box, not a second red marker. */
.piw-vtable .piw-vrow--open td[b-rz735nvo1z],
.piw-vtable .piw-vdetail td[b-rz735nvo1z] {
    background: var(--motiva-surface-hover, rgba(27, 26, 34, 0.035));
}

.piw-vtable .piw-vrow--open td:first-child[b-rz735nvo1z],
.piw-vtable .piw-vdetail td:first-child[b-rz735nvo1z] { border-inline-start-color: var(--motiva-border-strong, rgba(27, 26, 34, 0.16)); }

.piw-vtable .piw-vrow--open td:last-child[b-rz735nvo1z],
.piw-vtable .piw-vdetail td:last-child[b-rz735nvo1z]  { border-inline-end-color: var(--motiva-border-strong, rgba(27, 26, 34, 0.16)); }

.piw-vtable .piw-vrow--open td[b-rz735nvo1z] {
    border-top: 1px solid var(--motiva-border-strong, rgba(27, 26, 34, 0.16));
    /* The head keeps no rule against its own body. */
    border-bottom: 0;
}

.piw-vtable .piw-vrow--open td:first-child[b-rz735nvo1z] { border-start-start-radius: var(--motiva-radius-sm, 12px); }
.piw-vtable .piw-vrow--open td:last-child[b-rz735nvo1z]  { border-start-end-radius:   var(--motiva-radius-sm, 12px); }

.piw-vtable .piw-vdetail td[b-rz735nvo1z] {
    padding: 0 10px 10px;
    border-bottom: 1px solid var(--motiva-border-strong, rgba(27, 26, 34, 0.16));
    white-space: normal;
    max-width: none;
}

.piw-vtable .piw-vdetail td:first-child[b-rz735nvo1z] { border-end-start-radius: var(--motiva-radius-sm, 12px); }
.piw-vtable .piw-vdetail td:last-child[b-rz735nvo1z]  { border-end-end-radius:   var(--motiva-radius-sm, 12px); }

/* The inset card. Opaque on purpose: it sits ON the row's tint, and the tint
   framing it on all four sides is what says "this is inside that row". */
.piw-vdetail-box[b-rz735nvo1z] {
    padding: 9px 11px;
    border: 1px solid var(--motiva-border-card, rgba(27, 26, 34, 0.07));
    border-radius: var(--motiva-radius-sm, 12px);
    background: var(--motiva-surface-solid, #fff);
}

.piw-vdetail-title[b-rz735nvo1z] {
    margin: 0 0 4px;
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.3;
    color: var(--motiva-text-muted, #6B6779);
}

.piw-vdetail-title--error[b-rz735nvo1z] { color: var(--motiva-color-rose-ink, #C42B52); }

/* A second block gets its air from the first, not from a rule. */
.piw-vdetail-list + .piw-vdetail-title[b-rz735nvo1z] { margin-block-start: 9px; }

.piw-vdetail-list[b-rz735nvo1z] {
    margin: 0;
    padding-inline-start: 16px;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.55;
    color: var(--motiva-text-secondary, #4A4657);
}

/* Red is reserved for the entries that actually stop the row importing. */
.piw-vdetail-list--error[b-rz735nvo1z] { color: var(--motiva-color-rose-ink, #C42B52); }

.piw-vdetail-list li[b-rz735nvo1z] { margin: 0; }

/* Visually hidden, still read aloud — the chevron column's header. */
.piw-sr[b-rz735nvo1z] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.piw-chip[b-rz735nvo1z] {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-full, 999px);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.4;
    white-space: nowrap;
}

.piw-chip--ok[b-rz735nvo1z] {
    background: var(--motiva-color-success-bg);
    color: var(--motiva-color-teal-ink, var(--motiva-color-teal));
}

/* An already-existing user is a fact to resolve, not a fault — so it takes the
   brand edge (white paper, gradient rule) rather than a warning colour. */
.piw-chip--dup[b-rz735nvo1z] {
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary, #1B1A22);
}

.piw-chip--error[b-rz735nvo1z] {
    background: var(--motiva-color-danger-bg);
    color: var(--motiva-color-rose-ink, #C42B52);
}

/* ── 4. Duplicates ───────────────────────────────────────── */
.piw-bulk[b-rz735nvo1z] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.piw-bulk-label[b-rz735nvo1z] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #6B6779);
    margin-inline-end: 2px;
}

.piw-bulk-btn[b-rz735nvo1z],
.piw-dup-btn[b-rz735nvo1z] {
    padding: 6px 12px;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, rgba(27, 26, 34, 0.07));
    font-family: inherit;
    font-size: var(--motiva-font-size-control, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-secondary, #4A4657);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.piw-bulk-btn:hover[b-rz735nvo1z],
.piw-dup-btn:hover[b-rz735nvo1z] { border-color: var(--motiva-border-strong, rgba(27, 26, 34, 0.12)); }

/* THE CHOSEN OPTION IS THE BRAND EDGE — the same treatment the toolbar's
   applied filter uses, and for the same reason: a selected control is white
   paper with the signature gradient as its rule, never a violet fill. */
.piw-bulk-btn--on[b-rz735nvo1z],
.piw-bulk-btn--on:hover[b-rz735nvo1z],
.piw-dup-btn--on[b-rz735nvo1z],
.piw-dup-btn--on:hover[b-rz735nvo1z] {
    background: var(--motiva-tag-brand-surface);
    border-color: transparent;
    color: var(--motiva-text-primary, #1B1A22);
    font-weight: var(--motiva-font-weight-semibold, 600);
}

/* Replace is the one destructive choice on this screen, so ONLY its selected
   state is rose — an unselected "החלפה" is still just an option. */
.piw-dup-btn--danger.piw-dup-btn--on[b-rz735nvo1z],
.piw-dup-btn--danger.piw-dup-btn--on:hover[b-rz735nvo1z] {
    background: var(--motiva-color-danger-bg);
    border-color: color-mix(in srgb, var(--motiva-color-rose) 30%, transparent);
    color: var(--motiva-color-rose-ink, #C42B52);
}

.piw-bulk-btn:focus-visible[b-rz735nvo1z],
.piw-dup-btn:focus-visible[b-rz735nvo1z] {
    outline: 2px solid var(--motiva-color-focus-ring, #6D28F5);
    outline-offset: 2px;
}

.piw-duplist[b-rz735nvo1z] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 340px;
    overflow-y: auto;
    padding-inline-end: 2px;
}

.piw-dup[b-rz735nvo1z] {
    border-radius: var(--motiva-radius-md, 16px);
    border: 1px solid var(--motiva-border-card, rgba(27, 26, 34, 0.07));
    background: var(--motiva-surface-primary, #fff);
    overflow: hidden;
}

/* A row set to REPLACE is marked at the card level too, so the destructive
   choice is visible while scrolling past it and not only inside the diff. */
.piw-dup--danger[b-rz735nvo1z] {
    border-color: color-mix(in srgb, var(--motiva-color-rose) 28%, transparent);
}

.piw-dup-head[b-rz735nvo1z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 9px 12px;
    background: var(--motiva-surface-secondary, #FBFBFD);
    border-bottom: 1px solid var(--motiva-border-subtle, rgba(27, 26, 34, 0.06));
}

.piw-dup-id[b-rz735nvo1z] {
    display: flex;
    align-items: baseline;
    gap: 9px;
    min-width: 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
}

.piw-dup-actions[b-rz735nvo1z] { display: flex; gap: 6px; flex-wrap: wrap; }

.piw-dup-body[b-rz735nvo1z] { padding: 8px 12px 10px; }

.piw-dup-empty[b-rz735nvo1z] {
    margin: 0;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #6B6779);
}

/* A duplicate whose existing record could not be read. Rose because the row
   is genuinely out of the run, not merely unchanged. */
.piw-dup-empty--error[b-rz735nvo1z] { color: var(--motiva-color-rose-ink, #C42B52); }

/* The catalog's identity is its number, so the duplicate card leads with it —
   the place the users wizard puts the email. Tabular so a column of them
   aligns while scrolling. */
.piw-dup-num[b-rz735nvo1z] {
    flex: 0 0 auto;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-text-muted, #6B6779);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

.piw-difftable[b-rz735nvo1z] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--motiva-font-size-caption, 12px);
}

.piw-difftable th[b-rz735nvo1z] {
    padding: 0 8px 5px;
    text-align: start;
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-subtle, #9B96A8);
    white-space: nowrap;
}

.piw-difftable td[b-rz735nvo1z] {
    padding: 5px 8px;
    border-top: 1px solid var(--motiva-border-subtle, rgba(27, 26, 34, 0.06));
    vertical-align: middle;
}

.piw-difftable td:first-child[b-rz735nvo1z] { width: 92px; white-space: nowrap; }

.piw-diff--fill    td[b-rz735nvo1z] { background: var(--motiva-color-success-bg); }
.piw-diff--replace td[b-rz735nvo1z] { background: var(--motiva-color-danger-bg); }

.piw-diff-tag[b-rz735nvo1z] {
    margin-inline-start: 7px;
    padding: 2px 7px;
    border-radius: var(--motiva-radius-full, 999px);
    font-size: var(--motiva-font-size-caption, 10px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.5;
    white-space: nowrap;
}

.piw-diff-tag--fill[b-rz735nvo1z] {
    background: var(--motiva-color-success-bg);
    color: var(--motiva-color-teal-ink, var(--motiva-color-teal));
}

.piw-diff-tag--replace[b-rz735nvo1z] {
    background: var(--motiva-color-danger-bg);
    color: var(--motiva-color-rose-ink, #C42B52);
}

/* ── 5. Review / result summary ──────────────────────────── */
.piw-summary[b-rz735nvo1z] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: var(--motiva-radius-md, 16px);
    border: 1px solid var(--motiva-border-card, rgba(27, 26, 34, 0.07));
    overflow: hidden;
}

.piw-sum[b-rz735nvo1z] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 14px;
    background: var(--motiva-surface-primary, #fff);
    border-bottom: 1px solid var(--motiva-border-subtle, rgba(27, 26, 34, 0.06));
}

.piw-sum:last-child[b-rz735nvo1z] { border-bottom: 0; }

.piw-sum-n[b-rz735nvo1z] {
    flex: 0 0 auto;
    min-width: 28px;
    font-size: var(--motiva-font-size-h3, 17px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1;
    color: var(--motiva-text-primary, #1B1A22);
    font-variant-numeric: tabular-nums;
}

.piw-sum-t[b-rz735nvo1z] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-secondary, #4A4657);
}

.piw-sum--ok     .piw-sum-n[b-rz735nvo1z] { color: var(--motiva-color-teal-ink, var(--motiva-color-teal)); }
.piw-sum--danger .piw-sum-n[b-rz735nvo1z],
.piw-sum--error  .piw-sum-n[b-rz735nvo1z] { color: var(--motiva-color-rose-ink, #C42B52); }

/* ── Running ─────────────────────────────────────────────── */
.piw-run-title[b-rz735nvo1z] {
    margin: 0;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
}

.piw-run-count[b-rz735nvo1z] {
    margin: 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #6B6779);
    font-variant-numeric: tabular-nums;
}

.piw-progress[b-rz735nvo1z] {
    width: min(320px, 100%);
    height: 6px;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-surface-hover, rgba(27, 26, 34, 0.035));
    overflow: hidden;
}

.piw-progress-bar[b-rz735nvo1z] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--motiva-gradient-signature);
    transition: width var(--motiva-motion-duration-standard, 200ms) var(--motiva-motion-easing-standard, ease-out);
}

.piw-busy[b-rz735nvo1z] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #6B6779);
}

.piw-spinner[b-rz735nvo1z] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    border: 2px solid var(--motiva-color-brand-bg);
    border-top-color: var(--motiva-color-violet, #6D28F5);
    border-radius: 50%;
    animation: piw-spin-b-rz735nvo1z 0.7s linear infinite;
}

.piw-spinner--lg[b-rz735nvo1z] { width: 26px; height: 26px; border-width: 2.5px; }

@keyframes piw-spin-b-rz735nvo1z { to { transform: rotate(360deg); } }

/* ── Footer ──────────────────────────────────────────────── */
.piw-footer[b-rz735nvo1z] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.piw-footer-gap[b-rz735nvo1z] { flex: 1 1 auto; }

.piw-btn[b-rz735nvo1z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--motiva-control-height-md, 38px);
    padding: 0 16px;
    border: 0;
    border-radius: var(--motiva-radius-sm, 12px);
    font-family: inherit;
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.piw-btn-ghost[b-rz735nvo1z] {
    background: none;
    color: var(--motiva-text-secondary, #4A4657);
    font-weight: var(--motiva-font-weight-medium, 500);
}

.piw-btn-ghost:hover[b-rz735nvo1z] { background: var(--motiva-surface-hover, rgba(27, 26, 34, 0.035)); }

/* Fill/hover/press come from the shared .motiva-cta. */
.piw-btn-primary:disabled[b-rz735nvo1z] { opacity: 0.5; cursor: default; }

.piw-btn:focus-visible[b-rz735nvo1z] {
    outline: 2px solid var(--motiva-color-focus-ring, #6D28F5);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .piw-spinner[b-rz735nvo1z] { animation-duration: 2.4s; }
    .piw-progress-bar[b-rz735nvo1z],
    .piw-tip[b-rz735nvo1z]::after,
    .piw-drop[b-rz735nvo1z],
    .piw-bulk-btn[b-rz735nvo1z],
    .piw-dup-btn[b-rz735nvo1z] { transition: none; }
}

/* ── Narrow ──────────────────────────────────────────────── */
@media (max-width: 760px) {
    .piw-maprow[b-rz735nvo1z] { grid-template-columns: 1fr; gap: 6px; }
    .piw-dup-head[b-rz735nvo1z] { align-items: flex-start; }
}
/* /Components/ProjectWorkspace/ProjectWorkspace.razor.rz.scp.css */
/* ============================================================
   ProjectWorkspace — מרחב הפרויקט, shared by Lecturer and Mentor
   Prefix: pw-

   THIS FILE DECLARES NO CARD SURFACE OF ITS OWN.

   It used to: a hand-rolled card at --motiva-radius-xl over a
   color-mix of --motiva-surface-primary, with its own border and
   its own shadow. All three differed from what בית and המשימות שלי
   draw one click away, so the workspace read as a set of floating
   slabs rather than as another screen of the same product. MCard
   supplies the surface now — radius, border, shadow, translucency —
   exactly as .ldh-pane and .lt-pane get it, and the only thing
   layered over it is the 2.2% violet wash those two also use.

   THE WORK IS THREE CARDS, NOT ONE CARD WITH THREE TABS.
   הגשות owns a full-width band; בקשות and משימות share the one
   under it at 1 : 1.15, starting on the same top edge and each
   ending where its own content ends. See `.pw-row-pair`.

   REFERENCES — every number below comes from one of these:
     grid, gap, stretch     OverviewDashboardPage  (.ldh-row)
     card inset and head    LecturerTasksPage      (.lt-card)
     row rhythm and hover   LecturerTasksPage      (.lt-card .m-row)
     count bubble           MSectionHeading -> .motiva-count
     surface wash           both, byte for byte

   ── THE TYPE SCALE, AND NOTHING OUTSIDE IT ──────────────────
   Six levels, every one an existing token, resolved inside
   `.motiva-final`. Both this file and PwDetail.razor.css obey it.

     1 page title    --motiva-font-size-h1       25 / 700
     2 section title --motiva-font-size-h2       18 / 700  (MSectionHeading)
     3 sub-label     --motiva-font-size-h4       13 / 600
     4 item title    --motiva-font-size-item     14 / 600
     5 body          --motiva-font-size-body   13.5 / 400
     6 metadata      --motiva-font-size-caption  12 / 400
       action label  --motiva-font-size-caption  12 / 600

   Levels 2 and 4 are four pixels and one weight apart, which is
   what makes a card's name and a row's name different objects.
   Level 6 is the only size metadata may take, and it is never
   bolder than 500 — colour is not allowed to stand in for a step
   that the scale should be making.

   REMOVED IN THIS PASS: 17px, 11.5px and 11px literals here, and
   11px / 10.5px in PwDetail. Every one of them had a token within
   half a pixel.

   RTL: not one physical direction is written below. This app sets
   direction in CSS with no dir attribute (app.css:5), so every
   inset, margin and border uses its logical property and the whole
   composition mirrors without a second rule.
   ============================================================ */

.pw[b-hdh738888u] {
    /* TWO DISTANCES, AND THEY MEAN DIFFERENT THINGS.

       --pw-gap (18px, the dashboard's own) separates cards that
       belong to the SAME band — בקשות from משימות. The column gap
       between the bands is a step larger, so "this is a new part of
       the page" and "these two go together" are told apart by space
       instead of by a rule. That is the whole grouping strategy on
       this screen: the page draws no dividers between its sections
       and does not need any. */
    --pw-gap: var(--motiva-ws-band-gap, 18px);

    display: flex;
    flex-direction: column;
    gap: var(--motiva-ws-band-gap, var(--motiva-space-lg));
    min-width: 0;
}

/* ── 1. Identity — ONE header ────────────────────────────────
   It was two clusters held apart by `justify-content:
   space-between`: the title at the reading edge and a stacked
   progress/members column ~1000px away at the other end, with the
   metadata chips stranded between them. Nothing tied the three
   together, so the team and the 66% read as strays.

   Now it is three stacked lines that all begin at the reading
   edge and end where their content does — title + status, the
   project's sentence, and one facts line carrying the chips, the
   role's actions, the team and the progress. No element is pushed
   anywhere; the gaps are the gaps between groups, and that is the
   whole composition.

   Aligned to the card EDGE rather than inset from it, so the
   header and the cards under it share one inline measure. */

.pw-head[b-hdh738888u] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    padding-block: 4px 2px;
}

/* ── THE HEADER IS A Project Summary card (both workspaces) ──────
   The header used to float on the page background while every other
   block (roadmap, work, activity) sits on a white MCard, so it read
   as not belonging to the page. It becomes a card in the SAME
   language here — the exact panel tokens every .m-card uses (white
   surface, 24px radius, the violet-hairline border and the subtle
   panel shadow); nothing new is invented. Kept to two compact rows:
   the inline inset matches the section cards (24px) so the title
   lines up with the roadmap below, and the block inset is restrained
   and shrinks with viewport height so the card reuses the vertical
   space the floating header already took rather than growing the
   page. Applies to both finished workspaces (data-pw-context is set
   on either); the lecturer and mentor headers share it. */
.pw[data-pw-context] .pw-head[b-hdh738888u] {
    background: var(--motiva-panel-surface);
    border: 1px solid var(--motiva-panel-border);
    border-radius: var(--motiva-panel-radius);
    box-shadow: var(--motiva-panel-shadow);
    padding: clamp(9px, 1.35vh, 13px) 24px;
}

.pw-head-top[b-hdh738888u] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.pw-title[b-hdh738888u] {
    margin: 0;
    /* RUNG 1 — the page's own name, and the only thing at this size. It
       grows with the viewport so the header keeps its weight against a
       workspace that is also growing; never smaller than the 38px it has
       always been. */
    font-size: var(--motiva-ws-title-size, var(--motiva-font-size-h1));
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: -0.4px;
    line-height: 1.2;
    color: var(--motiva-text-primary);
}

/* The facts line, the metadata chips and the inline team/stage subtitle the
   mentor header used to carry are gone: both finished workspaces now put the
   project's metadata in the info popover, the team in it too, and the progress
   and materials on the compact summary row. The rules that styled those
   (.pw-sub, .pw-head-facts, .pw-meta, .pw-chip) went with the markup. */

/* ── THE PROJECT LOGO ────────────────────────────────────────
   The team's own uploaded mark, a compact thumbnail leading the title.
   Kept small (48px, within the 44–52 the brief asks) and never
   dominant: contain, not cover, so a wide or tall mark keeps its
   aspect ratio inside the tile rather than being cropped to fill it.
   The muted ground and hairline give an off-white or transparent mark
   an edge; the tile is only ever drawn when a logo actually loaded, so
   it never stands empty. */
.pw-logo[b-hdh738888u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: var(--motiva-radius-md);
    overflow: hidden;
    background: var(--motiva-surface-muted);
    border: 1px solid var(--motiva-panel-border);
}

.pw-logo-img[b-hdh738888u] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ── Item 3: THE PROJECT-INFO POPOVER (lecturer) ─────────────
   Team, field, students and mentors moved off the header into a
   popover opened from beside the title. It is NOT a hover tooltip —
   this is more information than a tooltip should carry — so it is a
   real in-place card in the same language as חומרי הפרויקט's popover
   (the card's own fill, radius and popover shadow), opened and closed
   by its trigger. The trigger is a quiet neutral disc, an information
   affordance rather than a page action, so it never wears the gradient. */
.pw-info[b-hdh738888u] {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.pw-info-trigger[b-hdh738888u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-surface-muted);
    color: var(--motiva-text-secondary);
    cursor: pointer;
    transition:
        color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
        background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.pw-info-trigger:hover[b-hdh738888u] {
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    background: var(--motiva-color-neutral-bg);
}

.pw-info-trigger:focus-visible[b-hdh738888u] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.pw-info-pop[b-hdh738888u] {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-start: 0;
    z-index: 30;
    min-width: 240px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 14px;
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-solid, #fff);
    box-shadow: var(--motiva-shadow-popover);
}

.pw-info-row[b-hdh738888u] {
    margin: 0;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-regular);
    line-height: 1.4;
    color: var(--motiva-text-secondary);
}

/* Item 1 (refinement): the team name leads the popover but reads as METADATA,
   not a heading. Stepped down from h4/semibold to the caption size the other
   rows use, kept a notch above them with medium weight and primary ink so it is
   still the lead line and still perfectly readable — just no longer dominant. */
.pw-info-team[b-hdh738888u] {
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-primary);
}

/* ── THE SUMMARY ROW (both finished workspaces) ──────────────
   The header's second line: milestone progress at the reading edge (physical
   RIGHT in RTL), and on the physical LEFT an actions cluster carrying the
   Drive/materials control and the role's own project action(s). One 28px band,
   so the controls read as one summary of the project rather than strays; wraps
   rather than collides when width is tight. */
.pw-head-summary[b-hdh738888u] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px;
    min-width: 0;
    margin-block-start: 6px;
    /* The row must span the FULL card width, or the physical-left push only
       reaches the middle — .pw-head is a flex-start column, so without this the
       row shrinks to its content and sits centred. space-between then anchors
       progress to the physical RIGHT and the actions cluster to the physical
       LEFT, with the whole width between them. */
    width: 100%;
    justify-content: space-between;
}

.pw-head-summary > *[b-hdh738888u] { min-height: 28px; }

/* The physical-left cluster: the Drive/materials control and, for the mentor,
   its own project action (the guidance-meeting scheduler + last-meeting caption
   projected through IdentityActions). The lecturer passes no action, so its
   cluster is the materials control alone. They sit side by side; the whole
   cluster is placed by the summary row's space-between above. */
.pw-head-actions[b-hdh738888u] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    min-width: 0;
}

/* ── DRIVE/MATERIALS GRADIENT OUTLINE (both workspaces) ──────
   The summary-row materials control gets the Motiva veiled-gradient hairline —
   the exact border-only treatment .pw-cta uses: a white fill on padding-box, the
   signature ramp on border-box softened by a section-colour veil. BORDER ONLY —
   the inside stays white/light, there is no filled gradient and no glow, so it
   reads as an elegant outlined link-out rather than an action. It already had a
   1px edge, so nothing about its size or spacing moves. Both finished
   workspaces render the materials control in the summary row and share it. */
.pw[data-pw-context] .pw-head-summary .pw-materials[b-hdh738888u] {
    border: 1px solid transparent;
    background:
        linear-gradient(var(--motiva-surface-solid, #fff), var(--motiva-surface-solid, #fff)) padding-box,
        linear-gradient(var(--motiva-surface-section), var(--motiva-surface-section)) border-box,
        var(--motiva-gradient-signature) border-box;
}

/* ── חומרי הפרויקט ───────────────────────────────────────────
   The team's working links, on the header's own facts line. Same
   chip vocabulary as the metadata beside it — nothing new is
   introduced — with the shared folder promoted to a real link and
   the rest behind a popover, so four links cost one chip of space
   rather than a fifth card. */

/* ── חומרי הפרויקט: a rounded container, not two more chips ──
   "Where are this project's files" is one of the four questions
   this page exists to answer in seconds, and it was answered by a
   chip indistinguishable from the project-type chip beside it. It
   is a small grouped surface now — a folder chip, the direct link,
   and the count — so the eye finds it as an object rather than as
   the fourth word on a line of chips.

   It stays a LINK OUT, so it is outlined and neutral, never the
   gradient: nothing here is the page's primary action. */

.pw-materials[b-hdh738888u] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 3px 4px 3px 10px;
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-surface-primary);
}

.pw-materials-icon[b-hdh738888u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-color-neutral-bg);
    color: var(--motiva-text-secondary);
    font-size: var(--motiva-font-size-caption);
}

/* An outline, not a fill: this is a way OUT of the page, not the
   page's own primary action. */
.pw-material-primary[b-hdh738888u],
.pw-materials-toggle[b-hdh738888u] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    color: var(--motiva-text-primary);
    transition: color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.pw-material-primary:hover[b-hdh738888u],
.pw-materials-toggle:hover[b-hdh738888u] { color: var(--motiva-color-violet, var(--motiva-color-indigo)); }

.pw-materials-sep[b-hdh738888u] {
    width: 1px;
    height: 14px;
    background: var(--motiva-border-subtle);
}

.pw-material-primary:focus-visible[b-hdh738888u],
.pw-materials-toggle:focus-visible[b-hdh738888u],
.pw-material:focus-visible[b-hdh738888u] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 3px;
    border-radius: var(--motiva-radius-sm);
}

.pw-materials-count[b-hdh738888u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding-inline: 5px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-color-neutral-bg);
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-secondary);
}

/* The popover. MModal's QuickView surface is a screen-level object
   and four links do not warrant one, so this is the smallest thing
   that can carry them: the card's own fill, radius and shadow,
   opened in place and closed by the same button. */
.pw-materials-pop[b-hdh738888u] {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-start: 0;
    z-index: 30;
    min-width: 240px;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    padding: 6px;
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-solid, #fff);
    box-shadow: var(--motiva-shadow-popover);
}

.pw-material[b-hdh738888u] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--motiva-radius-sm);
    text-decoration: none;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.pw-material:hover[b-hdh738888u] { background: var(--motiva-surface-muted); }

.pw-material-label[b-hdh738888u] {
    min-width: 0;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The host is the context a label cannot give — docs, figma,
   github — stated once, quietly, at the row's end. */
.pw-material-host[b-hdh738888u] {
    flex: 0 0 auto;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-regular);
    color: var(--motiva-text-subtle);
}


/* The member pills and the metadata group's controls lived on the removed
   facts line; the team roster now reads in the info popover and the role's
   action in the summary-row cluster, so .pw-members/.pw-member/.pw-meta went
   with them. */

/* INLINE, not a stacked block off the end of the row. Same figure,
   same label, same MProgressBar — laid along the header's line so
   it belongs to the header rather than floating beside it. */
.pw-progress[b-hdh738888u] {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* The one number in the header. `lg` rather than a 17px literal —
   the token is 15px, two below the page title, which is the step
   this figure should have been taking anyway. */
.pw-progress-pct[b-hdh738888u] {
    font-size: var(--motiva-font-size-lg);
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: -0.2px;
    line-height: 1;
    color: var(--motiva-text-primary);
}

.pw-progress-label[b-hdh738888u] {
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-regular);
    color: var(--motiva-text-secondary);
}

/* The bar needs a definite measure on a flex line — MProgressBar
   is a block and would otherwise take the row's remaining width. */
.pw-progress-bar[b-hdh738888u] {
    display: block;
    width: 120px;
    flex: 0 0 120px;
}

/* ── The grid ────────────────────────────────────────────────
   THREE WORK SECTIONS, TWO BANDS, UNEQUAL WEIGHT.

   הגשות takes the page's full measure: it carries the most rows and
   the richest ones — a title, a milestone, a deadline, a state and
   an action all on one line — and at half width the title was the
   only one of those with room to breathe. בקשות and משימות share
   the band under it.

   `align-items: start` on the pair is the whole reason the two
   cards are allowed to differ in height. The default `stretch`
   would pad a two-row בקשות card out to the height of a six-row
   משימות card beside it, which is exactly the "three equal tiles"
   look this pass exists to remove: a section's height is its
   content's, and a short list simply reads as a short list. */

.pw-row[b-hdh738888u] {
    display: grid;
    gap: var(--pw-gap);
    align-items: stretch;
    min-width: 0;
}

.pw-row-full[b-hdh738888u] { grid-template-columns: minmax(0, 1fr); }

/* ── THE WORK: A WIDE COLUMN AND A RAIL ──────────────────────
   The composition both reference screens use, and for the same
   reason: what a reader acts on gets the measure, what supports it
   gets the rail. הגשות and בקשות stack in the wide column at the
   reading edge; משימות and the activity postscript take the rail.

   1.9 : 1, not 1 : 1. A request row carries a title, a context
   line, a state pill, a date and a CTA; a task row carries a title
   and a state. Equal columns would have starved the first to pad
   the second.

   `align-items: start` on the grid AND on the rail is what keeps
   heights content-driven — nothing here stretches to match
   anything else. */

.pw-work[b-hdh738888u] {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    /* START, NOT STRETCH, and it is the rule this whole band depends on.
       `stretch` makes both columns as tall as the TALLER of them, so the
       lecturer's main column — which holds הגשות alone — was sized by
       משימות + בקשות stacked in the rail beside it. A one-row הגשות card
       was then padded out to the height of two other cards, which is the
       "three equal tiles" look the comment above says this band exists to
       avoid. Each column ends where its own content ends. */
    align-items: start;
    gap: var(--pw-gap);
    min-width: 0;
}

.pw-work-main[b-hdh738888u],
.pw-work-rail[b-hdh738888u] {
    display: flex;
    flex-direction: column;
    gap: var(--pw-gap);
    min-width: 0;
}

@media (max-width: 1180px) {
    /* Below this the rail cannot hold a task row's five slots, so the
       three sections stack in their reading order. */
    .pw-work[b-hdh738888u] { grid-template-columns: minmax(0, 1fr); }
}

/* ── Item 1 (refinement): LECTURER LOWER-CONTENT BALANCE ─────
   The lecturer main column carries only הגשות while the rail carries משימות
   and בקשות, so the 1.9 : 1 measure left the rail looking pinched and the
   band under the roadmap a little empty. 1.55 : 1 gives the rail a touch more
   presence without letting it rival הגשות, which stays the dominant section.
   Proportion only — the gap, the alignment and the stacking breakpoint are
   unchanged, so nothing stretches and the page does not grow taller. Scoped to
   the lecturer; the mentor keeps 1.9 : 1. */
.pw[data-pw-context="lecturer"] .pw-work[b-hdh738888u] {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}

/* ── THE STACKING BREAKPOINT, RESTATED SO IT ACTUALLY WINS ─────
   `@media (max-width: 1180px) { .pw-work { ... 1fr } }` is declared further
   up, and for the MENTOR context it works: equal specificity (0,1,0), later
   in the file than the base `.pw-work`.

   It never worked for the LECTURER. The rule above is (0,3,0) and sits after
   the media block, and a media query adds no specificity — so the lecturer
   workspace kept two columns all the way down. Measured on the real subtree:
   17px of horizontal overflow at 600px wide and 100px at 390px, while the
   mentor rendering of the SAME component measured 0 at both. A two-column
   grid holding a card that cannot go below its content is what pushed past
   the viewport.

   Same breakpoint, same value, same intent — only placed where it can take
   effect, and qualified so it applies to whichever context is set. Nothing
   at or above 1280px is touched: every desktop rung still renders the two
   columns it always did. */
@media (max-width: 1180px) {
    .pw[data-pw-context] .pw-work[b-hdh738888u] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── The pane and the card ───────────────────────────────────
   המשימות שלי's chain, unchanged: the <section> is the grid item,
   MCard is the surface, and `.pw-card` inside it is the column that
   holds the head and the list. */

.pw-pane[b-hdh738888u] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

/* MCard's own root cannot be reached without ::deep — CSS isolation
   scopes this file to elements THIS component renders, and the card
   root carries MCard's scope id. This compiles to
   `.pw-pane[b-…] > .m-card`, so it also cannot leak.

   `flex: 1 1 auto`, not `flex: 1`: the latter is `1 1 0%`, and a 0%
   basis contributes nothing to an auto-height parent's intrinsic
   size, which would collapse every card to its header. */
/* ── THE CARD'S EDGE ─────────────────────────────────────────
   This pane used to opt out of MCard twice: an opaque fill, because
   the shared card was translucent .66 and vanished on the canvas, and
   `--motiva-border-card` for its line, because MCard's own hairline
   was white at 85% — a highlight, not an outline.

   `.motiva-final .m-card` is the opaque panel with a violet hairline
   for every role now, so both overrides say what the default already
   says, in a third pair of values. Only the flex contract is left. */
.pw-pane[b-hdh738888u]  > .m-card {
    flex: 1 1 auto;
    min-height: 0;
}

/* NO TINTED CARD BORDER. "This section has work waiting for you" is
   already said by the gradient count beside its title, and saying it
   twice put a violet outline around a card whose contents were
   mostly neutral. `.pw-pane-live` survives as a hook with no
   decoration attached to it. */

.pw-card[b-hdh738888u] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    /* המשימות שלי's section inset — spacious card, compact rows.
       From the shared ladder (motiva-tokens.css), so the inset grows with
       the viewport's WIDTH instead of being frozen at one laptop's value. */
    padding: var(--motiva-ws-card-pad-block-start, 14px)
             var(--motiva-ws-card-pad-inline, 24px)
             var(--motiva-ws-card-pad-block-end, 12px);
}

/* NO CARD ON THIS PAGE CARRIES A HEIGHT.

   The primary section used to have a 200px floor, from when it was the
   one work card and had a rail card beside it that could out-measure
   it. Its primacy is now structural — it owns a whole band, at the
   page's full width, above the other two — so a floor would buy
   nothing except empty space under a short list, which is the thing
   "content-driven height" rules out. */

/* The fixed rows of a panel; only the list between them may grow. */
.pw-card-head[b-hdh738888u],
.pw-card-foot[b-hdh738888u] { flex-shrink: 0; }

/* No rule under the label: the rows' own hairlines are the only
   lines in the card, and a heading rule on top of those made every
   section read as a table with a header. */
/* A FULL STEP, NOT A RULE. The heading and the rows under it are
   two different things and the gap has to say so; 8px let a section
   title sit almost on top of its first row, which is most of why a
   card read as a table with a header. No border is added — the
   space is the separation. */
.pw-card-head[b-hdh738888u] { padding-block-end: var(--motiva-ws-card-head-gap, var(--motiva-space-md)); }

/* ── The heading's icon chip ─────────────────────────────────
   A rounded square with the section's glyph, in the muted ground.
   Deliberately NOT tinted per section: five coloured chips would be
   decoration, and the page already spends its one accent on the
   count of things waiting for the reader. */
.pw-sec-icon[b-hdh738888u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-color-neutral-bg);
    color: var(--motiva-text-secondary);
    font-size: var(--motiva-font-size-caption);
}

/* Gradient SVG variant — drop the grey tile, let the stroke paint itself. */
.pw-sec-icon.pw-sec-icon-gradient[b-hdh738888u] {
    background: none;
}

/* ── The count beside the title ──────────────────────────────
   Neutral for "how many are here"; the product's own count bubble for
   "how many are waiting on you".

   THE LIVE COUNT WAS A SOLID GRADIENT BLOCK with white digits — the
   loudest object on the card, sitting above a summary line in brand
   ink, beside rows carrying brand-edged pills and brand-edged buttons.
   That is the stack this pass exists to unpick. `.motiva-count` is the
   count MSectionHeading and MFilterTabs already render on every
   Lecturer and Mentor screen, and its own note is explicit: a
   translucent sweep with DARK ink, "never violet". Same object here. */
.pw-sec-count[b-hdh738888u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding-inline: 6px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-color-neutral-bg);
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-secondary);
}

.pw-sec-count-live[b-hdh738888u] {
    background: linear-gradient(to left,
        rgba(109, 40, 245, 0.18),
        rgba(46, 99, 232, 0.14) 60%,
        rgba(15, 168, 194, 0.18));
    color: var(--motiva-text-primary);
}

/* THE SECTION'S OWN COUNT/STATUS LINE, on the heading's baseline.

   RUNG 5, and deliberately quiet: it annotates the heading, it is not
   a second heading. What it says is the one number a reader needs
   before deciding whether to look — how many of these are waiting on
   THEM — and the tone is the same five-role vocabulary the rows below
   it use (PwTone), so the summary and the rows it summarises cannot
   disagree about what is urgent. */
.pw-sec-summary[b-hdh738888u] {
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1;
    white-space: nowrap;
}

/* A section summary is one line of bare text, so it carries its role as INK
   rather than as a chip. Quiet and Waiting deliberately resolve to the same
   subtle ink: "3 הגשות הוגשו" and "3 הגשות אצל המנחה" are both statements of
   fact to this reader, and a second grey for one of them would be a
   distinction without a difference at text scale. */
.pw-sec-summary.pw-tone-quiet[b-hdh738888u],
.pw-sec-summary.pw-tone-waiting[b-hdh738888u]   { color: var(--motiva-text-subtle); }

/* The one line on a section head that is addressed TO the reader —
   "2 הגשות ממתינות לאישורך". Brand ink, because at text scale that is what
   the attention rung has to spend (a wash needs a surface). */
.pw-sec-summary.pw-tone-attention[b-hdh738888u] { color: var(--motiva-color-violet, var(--motiva-color-indigo)); }

.pw-sec-summary.pw-tone-done[b-hdh738888u]      { color: var(--motiva-color-teal-ink, var(--motiva-color-teal)); }
.pw-sec-summary.pw-late[b-hdh738888u]           { color: var(--motiva-color-rose-ink, var(--motiva-color-danger)); }

/* Icon vertical alignment — the label is a <p> with inline content, so
   the icon span needs vertical-align to sit on the text's optical centre.
   The end gap keeps it from touching the title text. */
.pw-card-head[b-hdh738888u]  .m-section-heading-icon {
    vertical-align: middle;
    margin-inline-end: 6px;
}

/* Gap between section title and its count badge.
   MUST use margin-right (physical) — not margin-inline-start — because
   .motiva-count sets direction:ltr on the badge, which maps margin-inline-start
   to the LEFT side (away from the title). In RTL the count sits to the LEFT of
   the title, so the gap we want is on the RIGHT side of the badge. */
.pw-card-head[b-hdh738888u]  .m-section-heading-count {
    margin-right: 16px;
}

/* The summary and the queue link share the heading's trailing slot. */
.pw-card-head[b-hdh738888u]  .m-section-heading-trailing {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* "לכל הבקשות · 9" — reveals the rest of THIS project's category in
   place. A link would promise a different screen, which is what the
   heading's own trailing link is for; this is a disclosure, so it is a
   button and it is worded as one. */
.pw-more[b-hdh738888u] {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
    cursor: pointer;
    border-radius: var(--motiva-radius-sm);
}

.pw-more:hover[b-hdh738888u] { text-decoration: underline; }

.pw-more:focus-visible[b-hdh738888u] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 3px;
}

/* SPACING, NOT A RULE. The card already carries a hairline between
   every row; a second one across its foot made a four-row card read as
   a table with a summary line under it. Air separates the footer from
   the last row now, and the only horizontal lines left in a card are
   the ones that divide its rows. */
/* THE FOOT IS CENTRED, AND NO LONGER RULED. The rule marked where
   the body stopped; the row panel's own edge marks that now, so the
   line was a second boundary drawn on top of a boundary. Space is
   what is left. */
.pw-card-foot[b-hdh738888u] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-block-start: 10px;
}

.pw-card-note[b-hdh738888u] {
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-subtle);
    white-space: nowrap;
}

/* Matches .m-section-heading-link exactly — the same affordance in
   the one head that cannot use the component. */
.pw-all-link[b-hdh738888u] {
    flex-shrink: 0;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
    text-decoration: none;
    border-radius: var(--motiva-radius-sm);
    transition: color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.pw-all-link:hover[b-hdh738888u] { text-decoration: underline; }

.pw-all-link:focus-visible[b-hdh738888u] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 3px;
}

/* COMPACT. An empty card is now a heading and one line of type, and
   the card is that tall — nothing stretches it, so "אין פריטים
   שממתינים לך" no longer sits alone in the middle of a 294px box.
   The line lands where the first row would have started, so an empty
   card and a full one begin at the same place. */
.pw-empty[b-hdh738888u] {
    margin: 0;
    padding-block: 2px 4px;
    font-size: var(--motiva-font-size-body);
    font-weight: var(--motiva-font-weight-regular);
    line-height: 1.5;
    color: var(--motiva-text-subtle);
}

.pw-sr-only[b-hdh738888u] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── 2. Roadmap strip ────────────────────────────────────────
   The one card that is a diagram rather than a list, so it keeps its
   own internal geometry — on the same surface, the same inset and
   the same head rhythm as the four below it. */

.pw-stages[b-hdh738888u] {
    display: grid;
    grid-template-columns: repeat(var(--pw-stage-count, 1), minmax(0, 1fr));
    /* The strip keeps its seven equal tracks at every width — only the air
       between them grows, so nothing wraps and RTL order is untouched. */
    gap: var(--motiva-ws-stage-gap, 10px);
    align-items: start;
    margin: 0;
    padding: 0 0 4px;
    list-style: none;
}

.pw-stage[b-hdh738888u] { min-width: 0; }

.pw-stage-track[b-hdh738888u] {
    display: block;
    height: 5px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-surface-muted);
}

.pw-stage-done .pw-stage-track[b-hdh738888u]    { background: var(--motiva-color-teal); }
.pw-stage-current .pw-stage-track[b-hdh738888u] { background: var(--motiva-color-violet, var(--motiva-color-indigo)); }
.pw-stage-late .pw-stage-track[b-hdh738888u]    { background: var(--motiva-color-rose, var(--motiva-color-danger)); }

.pw-stage-name[b-hdh738888u] {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin-block-start: 11px;
}

/* At 7px the signature gradient renders as its blue midpoint, so a
   stage dot is a solid hue rather than a gradient that would read as
   a different colour from its own track. */
.pw-stage-dot[b-hdh738888u] {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--motiva-text-subtle);
}

.pw-stage-current .pw-stage-dot[b-hdh738888u] { background: var(--motiva-color-violet, var(--motiva-color-indigo)); }
.pw-stage-done .pw-stage-dot[b-hdh738888u]    { background: var(--motiva-color-teal); }
.pw-stage-late .pw-stage-dot[b-hdh738888u]    { background: var(--motiva-color-rose, var(--motiva-color-danger)); }

/* LEVEL 3, and this is the scale's one deliberate concession.

   A stage wanted to be level 4 like every other item on the page —
   the journey card and the section cards would then read as one
   system. MEASURED: at the item size a seven-column strip ellipses
   its longer names ("הגדרת הבעיה וכיוון ראשוני ל…"), and a stage
   whose name you cannot read is worse than a stage one step down
   the scale. Level 3 is the sub-label step, which is what a cell of
   a strip actually is, and it is still a full step above the date
   beneath it. */
.pw-stage-text[b-hdh738888u] {
    min-width: 0;
    font-size: var(--motiva-font-size-h4);
    font-weight: var(--motiva-font-weight-regular);
    line-height: 1.2;
    color: var(--motiva-text-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* WEIGHT, NOT BOLD. The current stage was 700 — the same weight as the
   project title — so the strip shouted over the page's own name. Semibold
   separates it from its neighbours without joining rung 1. */
.pw-stage-current .pw-stage-text[b-hdh738888u] {
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
}

.pw-stage-date[b-hdh738888u] {
    display: block;
    margin-block-start: 5px;
    padding-inline-start: 14px;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-regular);
    line-height: 1.3;
    color: var(--motiva-text-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pw-stage-current .pw-stage-date[b-hdh738888u] { color: var(--motiva-color-violet, var(--motiva-color-indigo)); }

.pw-stage-late .pw-stage-text[b-hdh738888u],
.pw-stage-late .pw-stage-date[b-hdh738888u] { color: var(--motiva-color-rose-ink, var(--motiva-color-danger)); }

/* ── ROADMAP LEGIBILITY (both workspaces) ────────────────────
   The stage titles and their date lines read too faint on the finished
   strip. Lift the FUTURE and DONE stages a legibility step — the title
   from regular/subtle to medium/secondary, the date from subtle to
   secondary. This is weight and ink, NOT a bold, and it is applied with
   :not() so it never touches the two states that already carry their own
   emphasis: the CURRENT stage keeps its semibold/primary title and violet
   date, and a LATE stage keeps its rose. Done stays marked by its teal
   track and dot, so the four states remain distinct. */
.pw[data-pw-context] .pw-stage:not(.pw-stage-current):not(.pw-stage-late) .pw-stage-text[b-hdh738888u] {
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-secondary);
}

.pw[data-pw-context] .pw-stage:not(.pw-stage-current):not(.pw-stage-late) .pw-stage-date[b-hdh738888u] {
    color: var(--motiva-text-secondary);
}

/* ── COMPACT ROADMAP (both workspaces) ───────────────────────
   The strip loses its "מסלול אבני הדרך" heading and shortens: the date
   sits ABOVE the track (the markup emits date → track → name), the date
   reads as the bare "dd.MM", and a completed stage shows a checkmark
   rather than the word "הושלם". The date cell holds a fixed line so every
   track stays on one horizontal line whether its date is text, a checkmark
   or empty. None of this touches STATE: the track and dot colours still
   tell current (violet), done (teal) and late (rose) apart. Both finished
   workspaces draw this compact strip. */

/* The kept one-line summary that stands in for the removed heading. */
.pw[data-pw-context] .pw-roadmap-summary[b-hdh738888u] {
    margin: 0 0 12px;
}

.pw[data-pw-context] .pw-stage-date[b-hdh738888u] {
    display: flex;
    align-items: center;
    /* Item 5: the date (and the completed checkmark) sits at the milestone
       segment's END point, above the track. The strip is a right-to-left
       timeline, so a segment's temporal end is its physical LEFT edge —
       justify-content:flex-end resolves to that edge under the app's RTL
       direction, with no physical-side value written here. */
    justify-content: flex-end;
    min-height: 16px;
    margin-block: 0 6px;
    padding-inline: 0;
}

.pw[data-pw-context] .pw-stage-name[b-hdh738888u] {
    margin-block-start: 8px;
}

/* Completed indicator — the done stage's teal, matching its track. */
.pw-stage-check[b-hdh738888u] {
    display: inline-flex;
    align-items: center;
    color: var(--motiva-color-teal);
}

/* ── SEGMENTED PROGRESS LINE (both workspaces) ───────────────
   The milestone line reads as separate units, not one continuous bar: the base
   track is PER-SEGMENT (no full-width bridge), so the grid's own 10px column gap
   shows between adjacent segments — segment · gap · segment. Each segment is a
   rounded pill; the light-gray base stays as the fill of the unfilled (future)
   segments, and done/current/late keep their Motiva colours. Date placement,
   completion checkmarks and roadmap height are all unchanged. Both finished
   workspaces draw it. */
.pw[data-pw-context] .pw-stage-future .pw-stage-track[b-hdh738888u] {
    background: var(--motiva-border-subtle);
}

/* ── Rows, shared by every list on the page ──────────────────
   המשימות שלי's row: 11px of block padding, a near-zero inline inset
   so the row reads as a line of content rather than a card, and the
   hairline as the only rule inside the panel. */

/* ── NO PANEL. ROWS SIT ON THE CARD ──────────────────────────
   The list briefly had a white ground of its own, to separate the
   heading from the body with a change of surface. It separated
   them and it also put a card inside a card: two nested rounded
   containers, the inner one white on a near-white section, for a
   list that was already legible.

   The heading's own 16px of bottom padding is the separation now,
   and the rows are held together by their rhythm — same block
   padding, same hover, no second container. The 8px negative inset
   stays: it is the rows' own inline padding, so a hover wash
   clears the text without the text moving. */
.pw-rows[b-hdh738888u] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-inline: -8px;
}

/* NO HAIRLINE BETWEEN ROWS.

   MRow — the row every reference screen on this product uses —
   declares `border: 0` and separates its rows with block padding
   alone. This file drew a rule under each one, so a four-row card
   carried three horizontal lines the dashboard beside it did not,
   and the page read as a set of small tables. The padding does the
   work now, and the hover ring is the only line a row can draw.

   9px of block padding, down from the reference's 11: these rows
   carry two lines of text where MRow's carry one plus a caption, so
   the same padding bought a taller row for the same content. The
   inline inset is 8px rather than 2 — the hover wash needs somewhere
   to sit around the text, and at 2px it stopped a hair from the
   glyphs. */
.pw-row-item[b-hdh738888u] {
    display: flex;
    align-items: center;
    gap: var(--motiva-space-md);
    width: 100%;
    box-sizing: border-box;
    padding-block: var(--motiva-ws-row-pad-block, 9px);
    padding-inline: 8px;

    /* Reset for the <button> form so both render identically. */
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--motiva-text-primary);
    text-align: start;
}

/* THE HOVER MOVES NOTHING AND REPAINTS NOTHING — the brand hue at
   .038 with a .07 inset ring, drawn with box-shadow rather than a
   real border so the row does not shift by a pixel. Interactive rows
   only: a hover state on a plain row promises a click that does
   nothing. */
button.pw-row-item[b-hdh738888u] {
    cursor: pointer;
    border-radius: var(--motiva-radius-sm);
    transition:
        background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
        box-shadow var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

/* ── HOVER IS A WASH, NOT A RING ─────────────────────────────
   The inset 1px brand ring drew a rounded outline around the whole
   row, which is the shape of a focused text input — a hovered row
   read as a form field that had been selected. What is left is the
   brand hue at 3%, which is barely a tint, plus the row's own
   action lighting up (see .pw-cta below). A row at rest is
   borderless and stays that way. */
button.pw-row-item:hover[b-hdh738888u] {
    background: rgba(109, 40, 245, 0.03);
}

/* FOCUS MUST NOT LOOK LIKE HOVER. It is the one place a real ring
   belongs: an outline OUTSIDE the row's box, in the focus colour,
   which no pointer state now draws. */
button.pw-row-item:focus-visible[b-hdh738888u] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 1px;
    border-radius: var(--motiva-radius-sm);
}

/* ── A row is two lines and one end group ────────────────────
   The reference's own row: the name over its context, and at the
   far end a single soft pill plus whatever date or action the row
   carries. */

.pw-row-text[b-hdh738888u] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.pw-row-end[b-hdh738888u] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

/* LEVEL 4 — the only item-sized thing in a card, so a row's own name
   is the one thing that reads as a title inside it. */
.pw-row-title[b-hdh738888u] {
    min-width: 0;
    /* THE LADDER, NOT THE ROLE'S OWN SCALE. `.motiva-mentor` rebases
       --motiva-font-size-item to 16px shell-wide while Lecturer keeps 15px,
       so this one shared component drew two different row sizes depending on
       who was reading it. Both roles resolve the same token here. */
    font-size: var(--motiva-ws-row-title-size, var(--motiva-font-size-item));
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.3;
    color: var(--motiva-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* `.pw-row-lead` is gone with the "שלי / צוות" chip: the assignee
   line beside it already said which it was, and one row does not
   need two ownership signals. */

/* LEVEL 6 — the context line: the milestone a deliverable belongs to,
   the requester, the assignee. It sits UNDER the title now rather than
   beside it, which is what buys the title its own line and lets the
   fact come back at all — strung across the row it was a fourth thing
   competing for the same 40 characters. */
.pw-row-meta[b-hdh738888u] {
    min-width: 0;
    /* Same reason as .pw-row-title: --g-font-size-xs is 13px on the mentor
       shell and 11.5px everywhere else. */
    font-size: var(--motiva-ws-row-meta-size, var(--motiva-font-size-caption));
    font-weight: var(--motiva-font-weight-regular);
    line-height: 1.3;
    color: var(--motiva-text-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A deadline is metadata; a state is a status. Same size, one weight
   apart — that is the whole difference between them, and it is enough. */
.pw-row-due[b-hdh738888u] {
    flex: 0 0 auto;
    font-size: var(--motiva-ws-row-meta-size, var(--motiva-font-size-caption));
    font-weight: var(--motiva-font-weight-regular);
    line-height: 1;
    white-space: nowrap;
}

/* ── The state, as a soft pill ───────────────────────────────
   Both reference screens carry a row's state in a tinted rounded
   pill, never as bare coloured text. The tint is the tone at ~8%,
   the ink is the tone itself; a quiet state gets the neutral
   ground, so no row is ever without a shape at its end and the
   column of pills is what you scan. */
/* Compact and SECONDARY. A state is not a heading: it steps down to
   medium so the row's own name stays the strongest thing on the
   line, and the pill is tight enough that a column of them reads as
   a column of marks rather than of buttons. */
.pw-pill[b-hdh738888u] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--motiva-radius-full);
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.4;
    white-space: nowrap;
}

/* ── THE FIVE ROLES, EACH ONE THE SYSTEM'S OWN TREATMENT ─────
   Every declaration below is read off MStatusBadge — the chip the
   Lecturer and Mentor screens already render — so a state looks the
   same here as it does on /lecturer/tasks, /lecturer/submissions and
   /management/requests. No token, hex or alpha is invented here.

   WHAT THIS REPLACED, and why it was noisy: the pill had a Blue role
   and a Violet role as well. Inside the Motiva scope
   `--motiva-color-info` is ALIASED to `--motiva-color-violet`, so a
   Blue "הוגש" chip and a Violet "ממתין לאישורך" chip were two violets
   carrying two unrelated meanings in one column — while the state that
   genuinely needed the reader was painted rose next to a row that was
   actually overdue. Five roles, five meanings, one of each. */

/* THREE OF THE FIVE ROLES NOW DRAW ONE OBJECT — the product's default
   tag: white paper under the Motiva gradient edge, dark ink.

     · quiet     — ordinary information
     · waiting   — in flight with somebody else (הוגש · הוחזר לתיקון ·
                   ממתינה להמלצת מנחה)
     · attention — the reader owns the next move (ממתין לאישורך ·
                   ממתין לבדיקה שלך)

   THE DISTINCTIONS WERE NOT LOAD-BEARING, and the middle one was
   actively expensive: `attention` drew a brand wash under a brand ring,
   which is a filled violet block by another name, so a column where most
   rows are waiting on the reader read as a column of buttons. `waiting`
   added a hairline to the same grey `quiet` used, a difference no reader
   was ever going to name.

   WHAT SURVIVES IS THE PART THAT DECIDES SOMETHING: done is teal and late
   is rose. PwTone still carries all five values and the mapping that
   produces them is untouched — this is where three of them stop being
   three different colours.

   `.pw-pill` is 3px/9px, so the 1px edge is paid for at 2px/8px and the
   pill column keeps its width. Read off MStatusBadge, as before: these are
   the same declarations `.m-badge-neutral` / `-approaching` / `-attention`
   now make. */
.pw-pill.pw-tone-quiet[b-hdh738888u],
.pw-pill.pw-tone-waiting[b-hdh738888u],
.pw-pill.pw-tone-attention[b-hdh738888u],
.pw-pill.pw-tone-done[b-hdh738888u] {
    padding: 2px 8px;
    border: 1px solid transparent;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
}

/* Rose stays rose, and now ONLY rose: overdue, missing, blocked. An
   exception is not a brand moment and a pending workflow state is not an
   exception. m-badge-rose. */
.pw-pill.pw-late[b-hdh738888u] {
    background: var(--motiva-color-danger-bg);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
}

.pw-row-due[b-hdh738888u] { color: var(--motiva-text-subtle); }

/* The four semantic roles and the quiet default — the only place
   PwTone becomes a colour. COMPOUNDED against the base rule rather
   than declared bare: a single `.pw-late` ties with `.pw-row-due` on
   specificity, and declaration order would decide the winner. */
/* Late is a COLOUR and a WORD ("באיחור"), at the same weight every
   other state takes. It used to jump to semibold as well, which put
   a third weight into level 6 and made a list with two late rows
   read as bolder than the card's own heading. */
.pw-row-due.pw-late[b-hdh738888u] {
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    font-weight: var(--motiva-font-weight-medium);
}

/* THE SAME ROSE, ON THE LINE THAT NOW CARRIES THE DATE. A task's state
   pill reads "פתוח" / "בעבודה" and deliberately never says late — a
   rose pill on that word was a colour contradicting it — so with the
   deadline moved under the title this line is the only place on the row
   where lateness can be stated. Exactly the treatment .pw-row-due.pw-late
   gave it at the row's far edge; nothing new, just relocated. */
.pw-row-meta.pw-row-meta-late[b-hdh738888u] {
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    font-weight: var(--motiva-font-weight-medium);
}

/* ── The row's affordance: AN OUTLINE, NOT THE GRADIENT ──────
   The row is already a button, its state pill already says the move
   is yours, and the section's count already carries the signature
   sweep. A filled gradient here as well meant a בקשות card with
   three open decisions rendered three gradient blocks in a column —
   which is the ramp used as decoration, and it stops meaning
   "this one" when everything has it.

   The brand hue survives as the outline and the ink, so the row
   still reads as actionable at a glance; the ramp itself is spent
   once per card (the waiting count) and once per decision (the
   button inside the surface). */
.pw-cta[b-hdh738888u] {
    flex: 0 0 auto;
    padding: 5px 13px;
    /* The same veiled signature hairline the state pill wears, and the
       same primary ink — this already had a 1px edge, so nothing about
       its size or spacing moves. See .pw-pill above for why the fill is
       opaque and why the ramp is veiled. */
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-full);
    background:
        linear-gradient(var(--motiva-surface-solid), var(--motiva-surface-solid)) padding-box,
        linear-gradient(var(--motiva-surface-section), var(--motiva-surface-section)) border-box,
        var(--motiva-gradient-signature) border-box;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
    color: var(--motiva-text-primary);
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

/* It fills on the ROW's hover, not its own — the whole row is the
   target, so the affordance answers to the row. */
/* The one accent a hover is allowed: the row's own action fills and
   its edge firms up. Everything else about the row stays where and
   as it was. */
button.pw-row-item:hover .pw-cta[b-hdh738888u] {
    background:
        linear-gradient(
            color-mix(in srgb, var(--motiva-color-violet, var(--motiva-color-indigo)) 8%, var(--motiva-surface-solid)),
            color-mix(in srgb, var(--motiva-color-violet, var(--motiva-color-indigo)) 8%, var(--motiva-surface-solid))
        ) padding-box,
        linear-gradient(var(--motiva-surface-section), var(--motiva-surface-section)) border-box,
        var(--motiva-gradient-signature) border-box;
}

.pw-cta-quiet[b-hdh738888u] {
    flex: 0 0 auto;
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-subtle);
    white-space: nowrap;
}

/* ── SETTLED ROWS ────────────────────────────────────────────
   A row that is already handled is there for orientation, not for
   action, and it has to read that way at a glance — otherwise the
   two rows that need doing are three rows down a list of five that
   all look equally urgent.

   QUIETED WITH INK, NOT WITH OPACITY. `opacity` would fade the
   whole row including any state colour and any focus ring, and it
   composites the text against the card rather than restating it —
   so the title steps down to the secondary ink and to regular
   weight, which is exactly the step .pw-row-meta already takes
   below .pw-row-title. */

.pw-row-item.pw-row-quiet .pw-row-title[b-hdh738888u] {
    font-weight: var(--motiva-font-weight-regular);
    color: var(--motiva-text-secondary);
}

/* ── SUBMISSION TITLES ANCHOR THEIR ROWS (both workspaces) ───
   In the הגשות section the submission titles read too thin — a settled row
   otherwise drops its title to regular weight like every other section. Hold
   them at semibold whether the row is active or settled, so each submission row
   has a clear anchor. WEIGHT ONLY: no size change, the secondary ink of a
   settled row is untouched, and the metadata/date/state below it is unchanged.
   Scoped to the submissions pane, so request/task rows keep the shared
   behaviour. Specificity (0,4,0) clears the quiet rule above (0,3,0). */
.pw[data-pw-context] [data-pw-section="subs"] .pw-row-title[b-hdh738888u] {
    font-weight: var(--motiva-font-weight-semibold);
}

/* ── Item 3 (refinement): SUBMISSION ROW SEPARATORS ──────────
   The הגשות list read as one continuous block, so a very light hairline is
   drawn BETWEEN rows — never after the last one (adjacent-sibling `+`, so the
   first row and the tail have none). It is a pseudo-element inset from the row
   edges rather than a full-bleed border, so it reads as a divider and not a
   table grid, and it clears the -8px hover-wash zone. Subs pane on both
   workspaces; request/task rows keep the borderless rhythm. Where the
   "needs you / handled" air gap already separates two rows (.pw-row-quiet-start)
   the line is suppressed, so the two separations never stack. */
.pw[data-pw-context] [data-pw-section="subs"] .pw-rows .pw-row-item[b-hdh738888u] {
    position: relative;
}

.pw[data-pw-context] [data-pw-section="subs"] .pw-rows .pw-row-item + .pw-row-item[b-hdh738888u]::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 8px;
    height: 1px;
    background: var(--motiva-border-subtle);
}

.pw[data-pw-context] [data-pw-section="subs"] .pw-rows .pw-row-item.pw-row-quiet-start[b-hdh738888u]::before {
    display: none;
}

/* AIR, NOT A CAPTION AND NOT A RULE. The boundary between "needs
   you" and "already handled" is the only grouping inside a card
   worth marking, and a heading over two rows would cost more lines
   than the rows it labels. With the per-row hairlines gone this is
   now a full step of space rather than a hint beside a line. */
.pw-row-item.pw-row-quiet-start[b-hdh738888u] { margin-block-start: var(--motiva-space-md); }

/* ── A SECTION WITH NOTHING OUTSTANDING ──────────────────────
   Its heading and its summary ARE the card: "4 מתוך 5 הוגשו"
   beside the title says what a list of five settled rows was
   there to say, in one line instead of five.

   The pads that separate a label from the rows beneath it are the
   empty box when there are no rows beneath it, so the calm card
   closes them: less bottom inset, and no gap reserved between a
   heading and a footer that follows it directly. */

.pw-card-calm[b-hdh738888u] { padding-block-end: 10px; }

.pw-card-calm .pw-card-head + .pw-card-foot[b-hdh738888u],
.pw-card-calm .pw-card-head + .pw-empty[b-hdh738888u] { margin-block-start: 0; }

.pw-card-calm .pw-card-head:has(+ .pw-card-foot)[b-hdh738888u] {
    padding-block-end: 0;
}

.pw-card-calm .pw-card-head:has(+ .pw-card-foot)[b-hdh738888u]  .m-section-heading {
    margin-block-end: 6px;
}

/* ── 4. THE ROW WHOSE DETAIL IS OPEN ─────────────────────────
   A detail surface covers most of the page, so the row it came from
   has to still be identifiable underneath and the moment it closes.
   The marker is the hover state made permanent plus a violet edge at
   the reading start — no movement, no reflow, and legible the instant
   the surface is dismissed. */

/* The row whose detail is open: a soft ground and an edge at the
   reading start. NO RING here either — the surface covering the page
   is what says "you are in this item"; the row only has to be
   findable the moment it closes.

   -3px puts the band on the RIGHT inner edge, which is the reading
   start of this app: the whole product is RTL by CSS `direction`
   with no dir attribute on the tree (app.css:5), so there is no
   logical form of a box-shadow offset and no attribute to branch
   on. Stated as the one physical value in this file, with the
   reason, rather than left to look like an oversight. */
.pw-row-item.pw-row-open[b-hdh738888u],
button.pw-row-item.pw-row-open:hover[b-hdh738888u] {
    background: rgba(109, 40, 245, 0.05);
    box-shadow: inset -3px 0 0 0 var(--motiva-color-violet, var(--motiva-color-indigo));
}

.pw-row-item.pw-row-open .pw-row-title[b-hdh738888u] {
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

/* ── 5. פעילות אחרונה — a postscript, not a section ───────────
   It used to be a full-width MCard with the same surface, the same
   inset and the same row rhythm as the work card above it: reference
   material dressed as one of the page's subjects, and most of its
   lines were a second copy of a row already on the page.

   What survived is the handful of events nothing else states — who
   filed a submission and when, a request that MOVED after it was
   opened, a guidance meeting that has already happened. Six of those
   are worth a label and some small type at the bottom of the page.
   They are not worth a card. */

/* CONTAINED, AND VISIBLY SECONDARY. It was bare text on the canvas,
   so it read as something that had fallen off a card rather than as
   part of the workspace. It is a card now — same radius, same
   inset, same neutral edge as the work cards beside it — and it
   stays secondary by what it does NOT have: no ambient wash and no
   shadow, so it sits flat against the page while the work cards
   lift off it. */
.pw-timeline[b-hdh738888u] {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-sm);
    padding: 14px 24px 12px;
    border: 1px solid var(--motiva-border-card);
    border-radius: var(--motiva-radius-lg);
    background: var(--motiva-surface-primary);
    /* Grow to fill remaining rail height so the bottom aligns with בקשות. */
    flex: 1;
}

/* RUNG 4 — below a section heading, above the lines it labels. It is
   not inside a card, so it carries no card's heading weight either. */
/* LEVEL 3 — a sub-label. It is not a section title (this block is
   not a card) and it must not be the same size as the lines it
   labels, which are level 6. */
.pw-timeline-h[b-hdh738888u] {
    margin: 0;
    font-size: var(--motiva-font-size-h4);
    font-weight: var(--motiva-font-weight-semibold);
    letter-spacing: var(--motiva-letter-spacing-section);
    color: var(--motiva-text-subtle);
}

/* פעילות אחרונה keeps its subtle postscript heading (base .pw-timeline-h) on
   the mentor workspace — the only one of the two that still draws an activity
   feed. The lecturer removed the feed entirely, so no override is needed here;
   an earlier rule that lifted this heading to section-title weight is gone with
   the feed it styled. */

.pw-timeline-list[b-hdh738888u] {
    display: flex;
    flex-direction: column;
    margin: 0 -6px;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.pw-timeline-item[b-hdh738888u] { min-width: 0; }

.pw-timeline-row[b-hdh738888u] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding-block: 6px;
    padding-inline: 6px;

    border: 0;
    background: transparent;
    font: inherit;
    color: var(--motiva-text-primary);
    text-align: start;
}

button.pw-timeline-row[b-hdh738888u] {
    cursor: pointer;
    border-radius: var(--motiva-radius-sm);
    transition: color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

button.pw-timeline-row:hover[b-hdh738888u] {
    background: var(--motiva-surface-hover);
}

button.pw-timeline-row:hover .pw-act-text[b-hdh738888u] {
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

button.pw-timeline-row:focus-visible[b-hdh738888u] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

.pw-act-dot[b-hdh738888u] {
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* The activity dot is ~7px, and a dot that small cannot carry the brand
   wash — it renders as its own midpoint. Solid ink per role, and the log's
   default is quiet: an activity feed reports what happened, it does not ask
   for anything. */
.pw-act-dot.pw-tone-quiet[b-hdh738888u],
.pw-act-dot.pw-tone-waiting[b-hdh738888u]   { color: var(--motiva-text-subtle); }
.pw-act-dot.pw-tone-attention[b-hdh738888u] { color: var(--motiva-color-violet, var(--motiva-color-indigo)); }
.pw-act-dot.pw-tone-done[b-hdh738888u]      { color: var(--motiva-color-teal-ink, var(--motiva-color-teal)); }

/* RUNG 6 — a sentence, not a title. It was 13.5/500, a hair under the row
   titles above it, so the activity feed read as another list of headings
   instead of as the page's quiet postscript. */
.pw-act-text[b-hdh738888u] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-regular);
    line-height: 1.3;
    color: var(--motiva-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Actor and date at the row's other end — the same trailing slot a
   work row gives its state, so the two lists scan the same way. */
.pw-act-meta[b-hdh738888u] {
    flex: 0 0 auto;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-regular);
    line-height: 1;
    color: var(--motiva-text-subtle);
    white-space: nowrap;
}

/* ── Narrow ──────────────────────────────────────────────────
   The strip is the only block that cannot simply reflow: seven
   equal columns at 400px is seven ellipses. */

@media (max-width: 1100px) {
    /* Below this the narrower of the pair cannot hold a row's five
       slots, so the two sections stack rather than ellipsing. */
    .pw-row-pair[b-hdh738888u] { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
    .pw-stages[b-hdh738888u] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* .pw-row-meta USED TO BE HIDDEN HERE. It could be: the line carried a
       milestone name or a requester, orientation a narrow screen can do
       without. It carries the row's DEADLINE now, which is the fact the
       card exists to show, so it stays — and the three sections are stacked
       to full width at this breakpoint anyway, so there is room for it. */
}

/* ── DESKTOP SCALE ───────────────────────────────
   THREE BLOCKS OF HEIGHT-ONLY MEDIA QUERIES USED TO LIVE HERE, and
   deleting them is the fix.

   They read `@media (max-height: 880px)` and `(max-height: 800px)` to
   tighten every gap, with `(min-height: 881px)` as the only rule that
   ever loosened one. An ordinary browser window is about 800px tall,
   so on ANY monitor at ANY width both tightening bands fired and the
   loosening band could not. Measured on a 1633px-wide viewport: 9px
   band gap, 9px in-band gap, 9px/8px card padding, 9px rows — 1366x768
   laptop density on a desktop screen, which is exactly what "the page
   looks too small and compressed on a large monitor" was.

   They existed to make the page fit one viewport for the flex fill
   chain (see below), and that chain is gone. With it gone the page
   measured scrollHeight === clientHeight with 50px of slack while
   still being squeezed — the compression had stopped buying anything.

   Everything they set now comes from the shared width ladder in
   motiva-tokens.css, which the Student workspace reads too, and the
   one genuinely-short-window fallback lives there as well
   (`max-height: 760px`) rather than being restated per component.

   `flex: 1` stays: it lets .pw occupy the page root so the shell's own
   bottom inset is respected. Nothing inside it grows — see the note
   under "NO CARD FILLS THE VIEWPORT". */
.pw[data-pw-context][b-hdh738888u] {
    flex: 1;
    min-height: 0;
}

/* ── The project summary card ──────────────────────
   Its inset is on the same ladder as the section cards, so the header
   keeps its weight against a workspace that grows around it (item 4).
   The stack gap grows a touch with it; the title's own size is on the
   ladder at .pw-title. */
.pw[data-pw-context] .pw-head[b-hdh738888u] {
    gap: 6px;
    padding-block: var(--motiva-ws-head-pad-block, 10px);
}

.pw[data-pw-context] .pw-timeline[b-hdh738888u] {
    padding-block: var(--motiva-ws-card-pad-block-start, 14px)
                   var(--motiva-ws-card-pad-block-end, 12px);
}

/* The milestone label's step below its rail rides the strip's own gap,
   so the whole band breathes together rather than the columns spreading
   while the rows stay pinned. */
.pw[data-pw-context] .pw-stage-name[b-hdh738888u] {
    margin-block-start: var(--motiva-ws-stage-gap, 10px);
}

/* ── NO CARD FILLS THE VIEWPORT ─────────────────────
   There used to be a fill chain here: the work band grew (`flex: 1 1 auto`) to
   absorb whatever height was left under the roadmap, every pane grew inside it,
   and each card's row list spread its rows through the result with
   `justify-content: space-evenly`. It was written to stop the page ending early
   on a tall monitor, and it bought that at the cost of the rule the band is
   built on: a card's height stopped being its content's.

   What it actually produced is the bug this pass fixes. The lecturer's main
   column holds הגשות alone; with the band stretched to the viewport and the
   pane stretched inside it, a two-row הגשות card was drawn ~380px tall with
   its two rows floated apart by space-evenly — a card sized by the window and
   by משימות + בקשות in the rail beside it, never by its own list.

   A short list reads as a short list now, on every viewport and in both
   workspaces. Leftover height at the bottom of a tall window is empty page,
   which is what empty page looks like; it is not a card's to claim.

   The page roots still declare `flex: 1` (.lpw-page / .mpw-page) so the shell's
   own bottom inset is respected — nothing inside them grows into it. */

/* THE LAST HEIGHT QUERY IS GONE TOO. `@media (min-height: 881px)` was the
   only rule that ever gave the work cards their roomier inset — 16px/14px
   padding, 13px rows — and it could not fire in a normal ~800px browser
   window, so in practice nobody ever saw it. Those are the ladder's ≥1440
   values now, keyed to WIDTH, which is the axis that actually says "this is
   a desktop". The two-line row keeps its 4px stack at every size. */
.pw[data-pw-context] .pw-work .pw-row-text[b-hdh738888u] { gap: 4px; }
/* /Components/ProjectWorkspace/PwDetail.razor.rz.scp.css */
/* ============================================================
   PwDetail — the Project Workspace's one detail / review surface
   Prefix: pwd-

   WHY `::deep` IS EVERYWHERE BELOW.

   Everything under `.pwd-cols` is written by the HOST (the mentor
   workspace, the lecturer workspace), so it carries that host's
   scope id and not this component's. `::deep` compiles the rule to
   `.pwd-cols[b-pwd] .pwd-sec`, which matches a descendant from any
   scope while still being anchored to an element THIS component
   rendered — so the vocabulary is shared without leaking to the
   rest of the app.

   THE VOCABULARY a host may use inside ChildContent:

     .pwd-sec            one labelled block
     .pwd-sec-action     the viewer's action — the ONE weighted
                         block, last, with the surface's only rule
     .pwd-sec-title      its label, with an optional .pwd-count
     .pwd-text           body prose  ·  .pwd-quote  someone's words
     .pwd-empty          "this block has nothing in it"

     .pwd-dates          the date pair  ·  .pwd-date / -k / -v / -to
     .pwd-date-arrow     the move between them
     .pwd-shift          "דחייה של 7 ימים"

     .pwd-files          the file list  ·  .pwd-file  one row
     .pwd-file-icon / -info / -name / -size / -go

     .pwd-hist           the trail  ·  .pwd-round  one round
     .pwd-round-btn / -start / -end / -num / -date
     .pwd-round-body  ·  .pwd-block  ·  .pwd-block-label
     .pwd-fb (+ -mentor / -reviewer)  ·  .pwd-fb-head  ·  .pwd-fb-text
     .pwd-line           one flat "who — what · when" trail row

     .pwd-form           an action block inside the body
     .pwd-label · .pwd-textarea · .pwd-input · .pwd-error
     .pwd-banner (+ tone)  the decision already on record

     footer: .pwd-btn (+ -approve / -return / -quiet) · .pwd-note

   TONES are the shared PwTone five, and nothing else may be
   introduced: quiet / blue / violet / teal / rose.

   ONE GROUND FOR EVERY TINTED BLOCK, AND IT IS NOT A SURFACE
   TOKEN. `--motiva-surface-muted` and `--motiva-surface-section`
   are TRANSLUCENT WHITES (.50 and .66) — they are built to sit on
   the app's tinted canvas, and this surface is a white dialog, so
   every "tinted" block on it was rendering flat white on white: the
   quote, the date pair, the round bodies, the feedback blocks and
   the decision panel all had a shape nobody could see.
   `--motiva-color-neutral-bg` is an INK tint (rgba(27,26,34,.05)),
   so it reads on white and is the one ground this file uses.

   TYPE is the six-level scale documented at the top of
   ProjectWorkspace.razor.css, and this file adds no level of its
   own: title = h2/700, sub-label = h4/600, item = item/600,
   body = body/400, metadata = caption/400, action = caption/600.
   The 11px and 10.5px literals that used to sit under the caption
   token are gone.

   RTL: no physical direction is written. The app sets direction in
   CSS with no dir attribute, so every inset and margin below is a
   logical property.
   ============================================================ */

/* ── Shell ───────────────────────────────────────────────────
   MModal supplies the surface, the radius, the scrim, the pad, the
   scroll lock and Escape. Size="Large" is 720px inside `.motiva-final`,
   which is the measure a review surface needs: a date pair, a file
   list and a round history all wrap at the 460px Medium.

   Nothing about the shell is restyled from here. What this file owns
   is the STRUCTURE inside it — and `.pwd-modal` would not have
   worked anyway: a class handed to a child component lands on that
   component's element, which never carries this file's scope id. */

/* ── Header — the hierarchy's first three rungs ───────────────
   Eyebrow, title, then status and metadata on one line. Three
   different sizes and three different weights, so the reader is
   never asked which of two same-sized bold lines is the name. */

.pwd-head[b-jk40plp9b1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

/* LEVEL 6 — it qualifies the title, so it is smaller, quieter and
   above it. */
.pwd-eyebrow[b-jk40plp9b1] {
    margin: 0;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-medium);
    letter-spacing: var(--motiva-letter-spacing-section);
    color: var(--motiva-text-subtle);
}

/* LEVEL 2 — the item's name, and the only thing at this size on the
   surface. It was taking `h4` (13px), which is the SUB-LABEL step:
   the title of the thing you had opened was smaller than the card
   headings still visible behind the scrim. `h2` is also what
   `.m-modal-title` uses, so every dialog in the product names itself
   at one size. */
.pwd-title[b-jk40plp9b1] {
    margin: 0;
    font-size: var(--motiva-font-size-h2);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1.25;
    color: var(--motiva-text-primary);
    overflow-wrap: anywhere;
}

.pwd-idline[b-jk40plp9b1] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    min-width: 0;
    margin-block-start: 2px;
}

.pwd-badge[b-jk40plp9b1] {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: var(--motiva-radius-full);
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}

/* ── THE FIVE ROLES, from MStatusBadge ───────────────────────
   The detail panel's status badge is the same object as the row pill it
   was opened from, so it takes the same five treatments — see the long
   note at .pw-pill in ProjectWorkspace.razor.css. Nothing here is a new
   colour; each block is the shared component's own declaration. */

/* Quiet, waiting, attention and done all draw the default gradient-border
   tag — see the long note at `.pw-pill` in ProjectWorkspace.razor.css for
   why these roles collapsed to one object. `.pwd-badge` is 4px/11px, so
   the 1px edge is paid for at 3px/10px. */
.pwd-badge.pwd-tone-quiet[b-jk40plp9b1],
.pwd-badge.pwd-tone-waiting[b-jk40plp9b1],
.pwd-badge.pwd-tone-attention[b-jk40plp9b1],
.pwd-badge.pwd-tone-done[b-jk40plp9b1] {
    padding: 3px 10px;
    border: 1px solid transparent;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
}
.pwd-badge.pwd-tone-rose[b-jk40plp9b1] { background: var(--motiva-color-danger-bg);  color: var(--motiva-color-rose-ink); }

/* LEVEL 6 — who and when. Metadata, never a heading. */
.pwd-meta[b-jk40plp9b1] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-regular);
    color: var(--motiva-text-subtle);
    white-space: nowrap;
}

.pwd-meta .oi[b-jk40plp9b1] { font-size: var(--motiva-font-size-caption); }

/* ── The two columns ─────────────────────────────────────────
   65 / 35, the content column at the reading start. The action
   column is `position: sticky` inside the scrolling body, so it
   stays put while a long description, a file list and a trail move
   under it — the reader never loses sight of what they are being
   asked to do.

   `align-items: start` is what lets the sticky work: a stretched
   grid item is already as tall as the row and has nothing to stick
   within. */

/* FLEX, NOT GRID, and the reason is the empty action column.

   A host supplies the Side slot unconditionally and fills it only
   when this viewer has something to do, so a submission needing no
   decision left an empty aside holding a third of a 1180px dialog
   open. With a grid that has to be undone by a selector, and the
   obvious one — `.pwd-cols:has(> .pwd-side:not(:has(*)))` — is
   INVALID CSS: `:has()` may not be nested inside `:has()`, so the
   whole rule is dropped and the track stays. Flex needs no rule at
   all: the aside sets `display: none` on itself when it has no
   element children, and the content column grows into the space
   because that is what `flex: 1` already means. */
.pwd-cols[b-jk40plp9b1] {
    display: flex;
    /* STRETCH, so the action column is as tall as what it is deciding
       about. That is what gives "anchored at the bottom" something to
       anchor against — see .pwd-side below. */
    align-items: stretch;
    gap: var(--motiva-space-lg);
    min-width: 0;
    /* NO TOP PAD OF ITS OWN. MModal's body already opens with 18px
       under the header; a second 16px on top of it left a band of
       empty dialog above the first word every time the surface
       opened. */
    padding-block: 0 var(--motiva-space-lg);
}

/* One column when there is no room for two. The action goes FIRST
   there: with nothing to keep it visible beside the content, the
   next best thing is to put it where the reader lands. */
@media (max-width: 900px) {
    .pwd-cols[b-jk40plp9b1] { flex-direction: column; }
    .pwd-side[b-jk40plp9b1] {
        order: -1;
        flex-basis: auto;
        width: 100%;
    }

    /* Stacked, there is no column to anchor to and nothing beside it
       to stay level with. */
    .pwd-cols[b-jk40plp9b1]  .pwd-side > :last-child:not(:first-child) {
        margin-block-start: 0;
        position: static;
    }
}

/* Between SEMANTIC blocks — reason, dates, files, trail — a clear
   step, so the column reads as four things. Inside a block the gap is
   8px (see .pwd-sec), which is what makes a block read as one thing.

   space-md, NOT space-lg. A read-only request is four short blocks:
   at 24px apart, 116px of a 328px dialog was inter-block gap and the
   surface read as a mostly-empty canvas rather than a detail modal.
   18px still leaves a 2.25× step over the 8px inside a block, which is
   what the grouping actually depends on — the ratio, not the absolute.
   Nothing is moved, merged or removed; only the air between blocks. */
.pwd-main[b-jk40plp9b1],
.pwd-side[b-jk40plp9b1] {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-md);
    min-width: 0;
}

/* ~65 / 35, with the action column bounded: below 300px a decision
   form's fields stop being usable, and above 380px it starts
   competing with the content for the eye. */
.pwd-main[b-jk40plp9b1] { flex: 1 1 0; }

.pwd-side[b-jk40plp9b1] { flex: 0 0 clamp(300px, 33%, 380px); }

/* ── THE ACTION COLUMN READS TOP TO BOTTOM ───────────────────
   Context first (the mentor's recommendation, where there is one),
   then the decision — and the decision is pushed to the FOOT of the
   column, because it is the last step of the review and should read
   as one. `margin-block-start: auto` on the final block is the whole
   mechanism; with the column stretched to the content's height there
   is always somewhere to push it to.

   The column itself no longer sticks. The DECISION does, to the
   bottom of the scrollport, so on a long submission the feedback
   field and the two buttons stay on screen while the files and the
   trail move past them. */
.pwd-side[b-jk40plp9b1] { position: static; }

/* `:not(:first-child)` IS THE WHOLE FIX, and it is why this rule kept
   producing an empty dialog.

   The column is stretched to the content column's height (see .pwd-cols),
   so `margin-block-start: auto` on its last block pushes that block to the
   BOTTOM of whatever the content happens to be. That is right when the
   column holds context ABOVE a decision — the mentor's recommendation, then
   the approve/reject form — which is the case it was written for.

   It is wrong when the column holds ONE block, which is every read-only
   request: a single "סטטוס הטיפול" panel was pushed a measured 105px
   down the dialog, leaving a void above it that read as a mostly-empty
   full-width surface. A lone block starts where the column starts. */
.pwd-cols[b-jk40plp9b1]  .pwd-side > :last-child:not(:first-child) {
    margin-block-start: auto;
    position: sticky;
    bottom: 0;
}

/* ── AN ACTION COLUMN WITH NOTHING IN IT IS NOT A COLUMN ─────
   A host supplies the Side slot unconditionally and fills it only
   when this viewer has something to do, so a submission that needs
   no decision rendered an empty aside holding 35% of a 1180px
   dialog open — the largest piece of unused whitespace on the
   surface. When the aside has no element children the grid drops to
   one track and the content takes the width.

   `:not(:has(*))` rather than `:empty`, because Razor leaves
   whitespace text nodes inside the slot and `:empty` would never
   match.

   DECLARED AFTER the base rules on purpose. Blazor's isolation
   rewriter appends the scope attribute to the end of the compound
   (`.pwd-side:not(:has(*))[b-…]`), which lands this at exactly the
   same specificity as `.pwd-side[b-…]` above — so source order is
   what decides, and above the base rule the `display: none` simply
   lost. */
.pwd-side:not(:has(*))[b-jk40plp9b1] { display: none; }


/* Anything the host puts in the action column is a panel, not a
   paragraph — one containment rule so a state summary and a
   decision form are the same object. */
.pwd-cols[b-jk40plp9b1]  .pwd-side > .pwd-sec {
    padding: var(--motiva-space-md);
    border: 1px solid var(--motiva-border-card);
    border-radius: var(--motiva-radius-md);
    background:
        linear-gradient(180deg,
            rgba(109, 40, 245, 0.03),
            rgba(109, 40, 245, 0) 120px),
        var(--motiva-surface-primary);
}

.pwd-loading[b-jk40plp9b1] { padding-block: var(--motiva-space-xl); }

/* ── Blocks ──────────────────────────────────────────────────
   SEPARATED BY SPACE, NOT BY RULES. Every block used to be ruled
   off from the next, so one request drew four horizontal lines
   down a narrow column and read as a form. */

.pwd-cols[b-jk40plp9b1]  .pwd-sec {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-sm);
    min-width: 0;
}

/* ── THE ACTION PANEL ────────────────────────────────────────
   The one thing on this surface that is not reference material,
   and the only block that is contained rather than flat: its own
   rounded ground, its own hairline, its own inset. It sits at the
   top of the action column and stays there.

   No full-bleed band any more — a contained panel is what makes it
   read as an object you act on rather than as the floor of the
   dialog, and it is the same containment the workspace cards use. */
/* THE STRONGEST CONTAINED REGION on the surface, and it earns that
   by being the only one with an edge: every other group here is
   held by its ground alone. Same radius and inset as the rest — the
   difference is the line, not the size. */
.pwd-cols[b-jk40plp9b1]  .pwd-sec-action {
    gap: 10px;
    padding: var(--motiva-space-md);
    border: 1px solid var(--motiva-border-card);
    border-radius: var(--motiva-radius-md);
    /* THE SAME AMBIENT WASH THE WORKSPACE CARDS SIT ON, not a grey
       fill. At `neutral-bg` this panel was a solid ink tint against
       a white dialog and read as a form pasted into the surface;
       the 2.2% violet fade over white is what every card on the page
       behind it uses, so the panel belongs to the same product. */
    background:
        linear-gradient(180deg,
            rgba(109, 40, 245, 0.03),
            rgba(109, 40, 245, 0) 120px),
        var(--motiva-surface-primary);
}

/* LEVEL 3 — a block label. A full step under the item's own title
   and a step above the metadata it introduces, so the surface never
   has two things at the same size doing different jobs. */
.pwd-cols[b-jk40plp9b1]  .pwd-sec-title {
    display: flex;
    align-items: center;
    gap: var(--motiva-space-sm);
    margin: 0;
    font-size: var(--motiva-font-size-h4);
    font-weight: var(--motiva-font-weight-semibold);
    letter-spacing: var(--motiva-letter-spacing-section);
    color: var(--motiva-text-secondary);
}

.pwd-cols[b-jk40plp9b1]  .pwd-count {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-color-neutral-bg);
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.5;
    color: var(--motiva-text-subtle);
}

/* LEVEL 5 — prose, at the body line-height so a long reason stays
   readable. The only block on the surface allowed to be long. */
.pwd-cols[b-jk40plp9b1]  .pwd-text {
    margin: 0;
    font-size: var(--motiva-font-size-body);
    font-weight: var(--motiva-font-weight-regular);
    line-height: var(--motiva-line-height-body);
    color: var(--motiva-text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Someone's own words, marked as quoted rather than restated as the
   product's. */
/* A SOFTER GROUND FOR THE BIG BLOCKS. `neutral-bg` (ink at 5%) is
   right for a chip and too heavy for a paragraph — four of them down
   a column turned the surface grey. `surface-hover` is the same ink
   at 3.5%, which reads as a tint rather than as a panel. */
.pwd-cols[b-jk40plp9b1]  .pwd-quote {
    padding: 10px 12px;
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-hover);
    color: var(--motiva-text-secondary);
}

.pwd-cols[b-jk40plp9b1]  .pwd-empty {
    margin: 0;
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-subtle);
}

/* ── Dates — a MOVE, drawn as one ────────────────────────────
   Current and requested side by side with the arrow between them,
   instead of two label-value rows the reader has to subtract in
   their head. RTL puts the current date first, on the right, so
   the arrow points with the reading direction. */

.pwd-cols[b-jk40plp9b1]  .pwd-dates {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 10px 14px;
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-hover);
}

.pwd-cols[b-jk40plp9b1]  .pwd-date {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pwd-cols[b-jk40plp9b1]  .pwd-date-v {
    font-size: var(--motiva-font-size-item);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.2;
    color: var(--motiva-text-secondary);
}

.pwd-cols[b-jk40plp9b1]  .pwd-date-k {
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-regular);
    line-height: 1;
    color: var(--motiva-text-subtle);
}

/* The destination is the one the decision is about, so it is the one
   in the brand ink. */
.pwd-cols[b-jk40plp9b1]  .pwd-date-to .pwd-date-v {
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

.pwd-cols[b-jk40plp9b1]  .pwd-date-arrow {
    flex: 0 0 auto;
    color: var(--motiva-text-subtle);
}

.pwd-cols[b-jk40plp9b1]  .pwd-shift {
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-subtle);
    white-space: nowrap;
}

/* ── Files — never an afterthought ───────────────────────────
   Its own labelled section with its own count, in the same place on
   every item, and it says so plainly when there is nothing rather
   than disappearing. A section that vanishes when empty cannot be
   distinguished from one the reader failed to find. */

/* ── FILES ARE ONE GROUP, NOT N LOOSE LINES ──────────────────
   A soft contained surface around the list — enough to say "these
   belong together and this is where the deliverable lives", not
   enough to be a box each. The rows inside stay borderless; their
   hover ground is the brand wash, which reads on this tint. */
.pwd-cols[b-jk40plp9b1]  .pwd-files {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-hover);
    min-width: 0;
}

/* BORDERLESS AT REST. Six files in a column meant six boxes, and a
   list of boxes is heavier than the list it contains — the icon
   chip, the name and the action already make a row legible without
   one. The ground appears on hover instead, which is also what
   makes the row's affordance obvious.

   Dense: 6px of block padding around a 28px chip is a 40px row, so
   a list of six is scannable in one glance. */
.pwd-cols[b-jk40plp9b1]  .pwd-file {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--motiva-radius-md);
    background: transparent;
    text-decoration: none;
    color: var(--motiva-text-primary);
    min-width: 0;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.pwd-cols[b-jk40plp9b1]  a.pwd-file:hover { background: rgba(109, 40, 245, 0.05); }

/* The action firms up with the row it belongs to — quiet at rest,
   obviously live under the pointer. */
.pwd-cols[b-jk40plp9b1]  a.pwd-file:hover .pwd-file-go,
.pwd-cols[b-jk40plp9b1]  .pwd-file:hover .pwd-file-go {
    background: rgba(109, 40, 245, 0.1);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

.pwd-cols[b-jk40plp9b1]  a.pwd-file:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 1px;
}

/* The icon rides a rounded chip, so a list of files has a column of
   shapes to scan down rather than a column of bare glyphs. */
.pwd-cols[b-jk40plp9b1]  .pwd-file-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-secondary);
}

/* AN EXTERNAL LINK IS NOT A FILE WE HOLD. A Drive deliverable leaves
   the product, and the row says so before it is clicked: the brand
   tint on the chip and the arrow glyph, against the neutral chip a
   stored file gets. */
.pwd-cols[b-jk40plp9b1]  .pwd-file-drive .pwd-file-icon {
    background: rgba(109, 40, 245, 0.09);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

/* THE ACTION STAYS WITH ITS FILE. `flex: 1 1 auto` made the name
   block absorb the whole column, so in a 700px content area the
   download control ended up 500px from the file it belonged to,
   pinned to the far edge like a table cell. Not growing keeps the
   chip, the name and the control as one cluster at the reading
   start, whatever the column's width. */
.pwd-cols[b-jk40plp9b1]  .pwd-file-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 0 1 auto;
    min-width: 0;
}

/* LEVEL 4 — a file is an item, and it takes the same size and
   weight a work row's title takes. */
.pwd-cols[b-jk40plp9b1]  .pwd-file-name {
    font-size: var(--motiva-font-size-item);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.3;
    color: var(--motiva-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Secondary by a full level and in the quietest ink — the name is
   what the reader is looking for, the size or host only qualifies
   it. */
.pwd-cols[b-jk40plp9b1]  .pwd-file-size {
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-subtle);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Obvious but quiet: a neutral round chip, the same ground the file
   icon sits on, so it reads as a control without competing with the
   name beside it. */
.pwd-cols[b-jk40plp9b1]  .pwd-file-go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-inline-start: 2px;
    border-radius: var(--motiva-radius-full);
    border: 1px solid transparent;
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-subtle);
    text-decoration: none;
    transition: border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.pwd-cols[b-jk40plp9b1]  .pwd-file-go:hover {
    background: rgba(109, 40, 245, 0.16);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

/* ── A DISCLOSURE, FOR ANYTHING HISTORICAL ───────────────────
   History is collapsed by default and says how much it holds, so
   the surface opens on the CURRENT state and the trail is a
   deliberate second step. It is a <details>, so the browser owns
   the open/closed state and no component grows a field for it. */

/* Contained, and deliberately UNBORDERED. The decision panel is the
   only bordered block on this surface, which is what makes it read
   as the strongest region; history gets containment from its ground
   alone and stays a step behind. */
.pwd-cols[b-jk40plp9b1]  .pwd-more {
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-hover);
    min-width: 0;
}

.pwd-cols[b-jk40plp9b1]  .pwd-more > summary {
    display: flex;
    align-items: center;
    gap: var(--motiva-space-sm);
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
    font-size: var(--motiva-font-size-h4);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
    border-radius: var(--motiva-radius-md);
}

.pwd-cols[b-jk40plp9b1]  .pwd-more > summary::-webkit-details-marker { display: none; }
.pwd-cols[b-jk40plp9b1]  .pwd-more > summary:hover { background: rgba(109, 40, 245, 0.04); }

.pwd-cols[b-jk40plp9b1]  .pwd-more > summary:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

/* The chevron is the only thing that moves. */
.pwd-cols[b-jk40plp9b1]  .pwd-more > summary .pwd-more-chev {
    margin-inline-start: auto;
    color: var(--motiva-text-subtle);
    transition: transform var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.pwd-cols[b-jk40plp9b1]  .pwd-more[open] > summary .pwd-more-chev { transform: rotate(180deg); }

.pwd-cols[b-jk40plp9b1]  .pwd-more-body {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-sm);
    padding: 2px 12px 12px;
}

/* ── History — reference, not reading ────────────────────────
   Rounds as an accordion, everything else as flat dated lines.
   Quieter than every block above it: it is what the reader consults
   after deciding, not what they decide from. */

.pwd-cols[b-jk40plp9b1]  .pwd-hist {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* A round sits ON the disclosure's tint. It used to carry its own
   border, which put a bordered box inside a contained block inside
   a section — three containers deep for one dated line. */
.pwd-cols[b-jk40plp9b1]  .pwd-round {
    border-radius: var(--motiva-radius-md);
    overflow: hidden;
}

.pwd-cols[b-jk40plp9b1]  .pwd-round-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--motiva-text-primary);
    text-align: start;
    cursor: pointer;
}

.pwd-cols[b-jk40plp9b1]  .pwd-round-btn:hover { background: var(--motiva-surface-hover); }

.pwd-cols[b-jk40plp9b1]  .pwd-round-start,
.pwd-cols[b-jk40plp9b1]  .pwd-round-end {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pwd-cols[b-jk40plp9b1]  .pwd-round-num {
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
}

.pwd-cols[b-jk40plp9b1]  .pwd-round-date {
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-subtle);
}

.pwd-cols[b-jk40plp9b1]  .pwd-round-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px 12px;
    border-block-start: 1px solid var(--motiva-border-subtle);
    background: var(--motiva-surface-hover);
}

.pwd-cols[b-jk40plp9b1]  .pwd-block {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.pwd-cols[b-jk40plp9b1]  .pwd-block-label {
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    letter-spacing: var(--motiva-letter-spacing-section);
    color: var(--motiva-text-subtle);
}

.pwd-cols[b-jk40plp9b1]  .pwd-fb {
    padding: 9px 11px;
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-hover);
}

.pwd-cols[b-jk40plp9b1]  .pwd-fb-mentor   { background: var(--motiva-color-info-bg); }
.pwd-cols[b-jk40plp9b1]  .pwd-fb-reviewer { background: rgba(109, 40, 245, 0.06); }

.pwd-cols[b-jk40plp9b1]  .pwd-fb-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
}

.pwd-cols[b-jk40plp9b1]  .pwd-fb-text {
    margin: 4px 0 0;
    font-size: var(--motiva-font-size-caption);
    line-height: var(--motiva-line-height-body);
    color: var(--motiva-text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* One flat line of an audit trail — "מי — מה · מתי". */
.pwd-cols[b-jk40plp9b1]  .pwd-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-block: 5px;
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-secondary);
    line-height: 1.5;
}

.pwd-cols[b-jk40plp9b1]  .pwd-line-dot {
    flex: 0 0 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--motiva-text-subtle);
    transform: translateY(-2px);
}

/* ── The decision already on record ──────────────────────────
   The same block, after the fact. It exists because what a mentor
   recommended is stored on the row and shown nowhere else in the
   product. */

.pwd-cols[b-jk40plp9b1]  .pwd-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--motiva-radius-md);
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    background: var(--motiva-surface-hover);
    color: var(--motiva-text-secondary);
}

.pwd-cols[b-jk40plp9b1]  .pwd-banner-teal { background: var(--motiva-color-success-bg); color: var(--motiva-color-teal-ink); }
.pwd-cols[b-jk40plp9b1]  .pwd-banner-rose { background: var(--motiva-color-danger-bg);  color: var(--motiva-color-rose-ink); }
.pwd-cols[b-jk40plp9b1]  .pwd-banner-blue { background: var(--motiva-color-info-bg);    color: var(--motiva-color-blue); }

.pwd-cols[b-jk40plp9b1]  .pwd-banner-note {
    font-weight: var(--motiva-font-weight-regular);
    color: var(--motiva-text-secondary);
}

/* ── Form controls, for the action block ─────────────────────
   In the BODY, because what the viewer types is part of the record
   they are reading; the buttons that commit it are in the footer. */

.pwd-cols[b-jk40plp9b1]  .pwd-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.pwd-cols[b-jk40plp9b1]  .pwd-label {
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-secondary);
}

.pwd-cols[b-jk40plp9b1]  .pwd-textarea,
.pwd-cols[b-jk40plp9b1]  .pwd-input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-primary);
    font-family: inherit;
    font-size: var(--motiva-font-size-caption);
    line-height: 1.5;
    color: var(--motiva-text-primary);
    resize: vertical;
}

.pwd-cols[b-jk40plp9b1]  .pwd-textarea:focus,
.pwd-cols[b-jk40plp9b1]  .pwd-input:focus {
    outline: none;
    border-color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

.pwd-cols[b-jk40plp9b1]  .pwd-textarea:disabled,
.pwd-cols[b-jk40plp9b1]  .pwd-input:disabled { opacity: 0.6; }

.pwd-cols[b-jk40plp9b1]  .pwd-error {
    margin: 0;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
}

/* ── Actions ─────────────────────────────────────────────────
   The viewer's own move, and the LAST thing on the surface — after
   the reason, the dates, the files and the trail, which is the order
   someone actually decides in.

   It lives in the BODY, beside the note it is committing, exactly as
   the submission review this surface is modelled on does. The footer
   below is for the quiet things that are not a decision: a sentence
   explaining why there is no action, or a link out. */

.pwd-foot[b-jk40plp9b1] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
}

.pwd-cols[b-jk40plp9b1]  .pwd-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-block-start: 2px;
}

/* In a 35% column two side-by-side buttons wrap to two ragged lines.
   Stacked and full-width they read as a decision, in order of
   consequence: the affirmative first. */
.pwd-cols[b-jk40plp9b1]  .pwd-actions-stack {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-block-start: 6px;
}

/* THE DECISION IS THE TALLEST THING IN THE COLUMN. Same padding
   scale, one step up, so it reads as the panel's conclusion rather
   than as the last of three equal controls. */
.pwd-cols[b-jk40plp9b1]  .pwd-actions-stack .pwd-btn { padding-block: 11px; }

.pwd-cols[b-jk40plp9b1]  .pwd-btn,
.pwd-foot[b-jk40plp9b1]  .pwd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-full);
    font-family: inherit;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: filter var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

/* ── THE ONE GRADIENT ON THE SURFACE ─────────────────────────
   The affirmative decision is the primary action of the whole
   dialog, so it wears the product's signature sweep — the same
   token `.motiva-cta` reads, so no new colour is introduced. Two
   solid fills (teal "approve", rose "reject") gave a rejection the
   same weight as an approval and spent two saturated colours
   saying "button".

   The negative decision is an OUTLINE. It is a real action and it
   stays reachable, but it is not the one the surface recommends,
   and a filled rose button reads as a warning about the dialog
   rather than as one of two choices. */
.pwd-cols[b-jk40plp9b1]  .pwd-btn-approve,
.pwd-foot[b-jk40plp9b1]  .pwd-btn-approve {
    background: var(--motiva-gradient-signature);
    color: #fff;
}

.pwd-cols[b-jk40plp9b1]  .pwd-btn-return,
.pwd-foot[b-jk40plp9b1]  .pwd-btn-return {
    background: transparent;
    border-color: var(--motiva-color-rose, var(--motiva-color-danger));
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
}

.pwd-cols[b-jk40plp9b1]  .pwd-btn-return:hover:not(:disabled),
.pwd-foot[b-jk40plp9b1]  .pwd-btn-return:hover:not(:disabled) {
    filter: none;
    background: var(--motiva-color-danger-bg);
}

.pwd-cols[b-jk40plp9b1]  .pwd-btn-quiet,
.pwd-foot[b-jk40plp9b1]  .pwd-btn-quiet {
    background: transparent;
    border-color: var(--motiva-border-subtle);
    color: var(--motiva-text-secondary);
}

.pwd-cols[b-jk40plp9b1]  .pwd-btn:hover:not(:disabled),
.pwd-foot[b-jk40plp9b1]  .pwd-btn:hover:not(:disabled) { filter: brightness(1.07); }

.pwd-cols[b-jk40plp9b1]  .pwd-btn-quiet:hover:not(:disabled),
.pwd-foot[b-jk40plp9b1]  .pwd-btn-quiet:hover:not(:disabled) { filter: none; background: var(--motiva-surface-hover); }

.pwd-cols[b-jk40plp9b1]  .pwd-btn:disabled,
.pwd-foot[b-jk40plp9b1]  .pwd-btn:disabled { opacity: 0.55; cursor: default; }

.pwd-cols[b-jk40plp9b1]  .pwd-btn:focus-visible,
.pwd-foot[b-jk40plp9b1]  .pwd-btn:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

/* A choice, not a commit — the recommendation pair. Selected reads as
   the brand outline; the other stays a hairline. */
.pwd-cols[b-jk40plp9b1]  .pwd-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-surface-primary);
    font-family: inherit;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-secondary);
    cursor: pointer;
}

/* The chosen recommendation — the same gradient-outline object as the
   status pill, so it gets the same veil and the same primary ink. It
   already carried a 1px edge, so the sweep replaces a solid violet
   line and nothing moves. Against its unselected sibling (grey ink,
   plain hairline) the edge and the fill are what mark it. */
.pwd-cols[b-jk40plp9b1]  .pwd-pill-on {
    border-color: transparent;
    background:
        linear-gradient(
            color-mix(in srgb, var(--motiva-color-violet, var(--motiva-color-indigo)) 6%, var(--motiva-surface-primary)),
            color-mix(in srgb, var(--motiva-color-violet, var(--motiva-color-indigo)) 6%, var(--motiva-surface-primary))
        ) padding-box,
        linear-gradient(var(--motiva-surface-section), var(--motiva-surface-section)) border-box,
        var(--motiva-gradient-signature) border-box;
    color: var(--motiva-text-primary);
}

.pwd-cols[b-jk40plp9b1]  .pwd-pill:disabled { opacity: 0.55; cursor: default; }

.pwd-cols[b-jk40plp9b1]  .pwd-pill:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

/* A sentence in the footer for a viewer who has no action — stated
   where the buttons would have been, so the absence is answered
   rather than left blank. */
.pwd-foot[b-jk40plp9b1]  .pwd-note {
    margin-inline-end: auto;
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-subtle);
    text-align: start;
}
/* /Components/Row/MKindTitle.razor.rz.scp.css */
/* ============================================================
   MKindTitle — weight only.

   No size, no colour, no spacing, no display change: this
   component exists to put one step of weight on the kind and to
   leave everything else exactly as .m-row-primary drew it.
   ============================================================ */

/* AN EXPLICIT WEIGHT, NOT <strong>'s DEFAULT. The UA gives <strong>
   `font-weight: bolder`, which is RELATIVE to what it inherits — and
   .m-row-primary is 500 for a Lecturer/Admin but 600 for a Mentor
   (`.motiva-mentor .m-row-primary`). `bolder` maps 500 to 700 and 600
   to 900, so the same prefix would have rendered two different weights
   on the two roles' copies of this card. 700 on both. */
.m-kind-title-prefix[b-tlforbu3zg] {
    font-weight: var(--motiva-font-weight-bold);
}

/* The item's own name keeps the row's weight — stated rather than
   assumed, so the rest can never inherit the prefix's. */
.m-kind-title-rest[b-tlforbu3zg] {
    font-weight: inherit;
}
/* /Components/Row/MRow.razor.rz.scp.css */
/* ============================================================
   MRow — Motiva System Master, "Row list (the 'table' pattern)"
   Master .row: flex, space-between, align-center, 14px/2px padding,
   hairline divider (supplied by MRowList), no zebra striping.
   ============================================================ */

.m-row[b-25ghungdff] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;

    /* Master --pad-row (14px 2px). The near-zero inline padding is what
       makes the row read as a line of content rather than a card, so it
       is not rounded up to a spacing token. */
    padding-block: 14px;
    padding-inline: 2px;

    /* Reset for the <a>/<button> forms so all three render identically. */
    background: transparent;
    border: 0;
    text-align: start;
    font-family: inherit;
    color: var(--motiva-text-primary);
    text-decoration: none;
}

/* ── Slots ───────────────────────────────────────────────────── */

.m-row-leading[b-25ghungdff] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.m-row-main[b-25ghungdff] {
    /* min-width: 0 lets long primary text ellipsize instead of pushing the
       end slot off the row. */
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.m-row-primary[b-25ghungdff] {
    /* Master "Item / row text" — 14px/500, the most common size in the
       list-heavy screens. */
    font-size: var(--motiva-font-size-item, var(--motiva-font-size-sm));
    font-weight: var(--motiva-font-weight-medium);
    line-height: var(--motiva-line-height-heading);
    color: var(--motiva-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-row-secondary[b-25ghungdff] {
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-regular);
    line-height: var(--motiva-line-height-caption);
    color: var(--motiva-text-muted);
}

.m-row-end[b-25ghungdff] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--motiva-space-sm);
    /* margin-inline-start: auto keeps the end block pinned to the row's end
       edge even when the main block is empty — and flips with RTL. */
    margin-inline-start: auto;
}

.m-row-meta[b-25ghungdff] {
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-regular);
    line-height: var(--motiva-line-height-caption);
    color: var(--motiva-text-muted);
    white-space: nowrap;
}

/* The Master's meta tones: an overdue date is rose and semibold, an
   ordinary one stays muted and regular — same slot, different meaning. */
.m-row-meta-violet[b-25ghungdff] { color: var(--motiva-color-violet, var(--motiva-color-indigo)); font-weight: var(--motiva-font-weight-semibold); }
.m-row-meta-teal[b-25ghungdff]   { color: var(--motiva-color-teal);   font-weight: var(--motiva-font-weight-semibold); }
.m-row-meta-rose[b-25ghungdff]   { color: var(--motiva-color-rose, var(--motiva-color-danger)); font-weight: var(--motiva-font-weight-semibold); }

/* ── Interaction ─────────────────────────────────────────────── */

a.m-row[b-25ghungdff],
button.m-row[b-25ghungdff] {
    cursor: pointer;
    /* The hover fill uses the row's own box — no negative margins. Pulling
       an interactive row outside the list would make its divider wider
       than a static row's, which reads as a misaligned list. */
    border-radius: var(--motiva-radius-sm);
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

a.m-row:hover[b-25ghungdff],
button.m-row:hover[b-25ghungdff] {
    background: var(--motiva-surface-hover);
}

a.m-row:focus-visible[b-25ghungdff],
button.m-row:focus-visible[b-25ghungdff] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px; /* inset: rows sit flush against their neighbours */
}

/* Selected/open row — the Master's soft brand wash, the same treatment the
   active nav item uses, so "this one is open" reads identically everywhere. */
.m-row-selected[b-25ghungdff] {
    background: var(--motiva-gradient-wash, var(--motiva-color-brand-bg));
}

@media (prefers-reduced-motion: reduce) {
    a.m-row[b-25ghungdff],
    button.m-row[b-25ghungdff] { transition: none; }
}

/* ============================================================
   STUDENT EXPERIENCE, FINAL — list rows

   The finalized rows are quieter and roomier than the previous
   system's: 13px block padding, a 15–16px/500 primary, a hairline
   divider at rgba(27,26,34,.06–.07), and a hover that is a wash
   rather than a fill. (README.md §6.)
   ============================================================ */

.motiva-final .m-row[b-25ghungdff] {
    gap: 12px;
    padding: 13px 6px;
    margin-inline: -6px;
    border-radius: var(--motiva-radius-row);
}

.motiva-final .m-row:hover[b-25ghungdff] { background: rgba(27, 26, 34, 0.025); }

.motiva-final .m-row-primary[b-25ghungdff] {
    font-size: var(--motiva-font-size-item);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.35;
    color: var(--motiva-text-primary);
}

/* THE BOTTOM TWO RUNGS OF THE LADDER, on tokens.

   Row title 15 → secondary 13 → meta 12.5, each one step quieter than the
   one above it. Both were literals, and both were being contradicted: the
   two dashboards each restated secondary at 13px (agreeing by hand) and
   meta at 13px — while THIS rule said 14px, so a date on a dashboard row and
   the same date on a shared MRow elsewhere were a pixel apart for no reason.
   Neither literal survives; --motiva-font-size-meta is the design's own meta
   step and the dashboards now inherit it. */
.motiva-final .m-row-secondary[b-25ghungdff] {
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-muted);
}

.motiva-final .m-row-meta[b-25ghungdff]        { font-size: var(--motiva-font-size-meta); font-weight: var(--motiva-font-weight-medium); color: var(--motiva-text-muted); }
.motiva-final .m-row-meta-violet[b-25ghungdff] { color: var(--motiva-color-violet); }
.motiva-final .m-row-meta-teal[b-25ghungdff]   { color: var(--motiva-color-teal-ink); }
.motiva-final .m-row-meta-rose[b-25ghungdff]   { color: var(--motiva-color-rose-ink); }

.motiva-final .m-row-selected[b-25ghungdff] {
    background: var(--motiva-color-brand-bg);
}

/* ============================================================
   MENTOR SCOPE — list-row typography

   THE ROLE HOOK, NOT A PAGE OVERRIDE. `.motiva-mentor` is the class
   AppLayout puts on the shell for exactly this: "the place a genuine
   role divergence goes" (AppLayout.razor:~150). It is declared here,
   in the row's own stylesheet, so the mentor value has ONE source and
   cannot be re-invented as a literal inside a page.

   WHY MENTOR DIVERGES, WITH THE EVIDENCE
   The block above is the STUDENT's row scale — 15px/500 body,
   14px/500 meta — transcribed from the student final screens. Both
   mentor design files put the same objects a step heavier and a step
   tighter:

     Motiva Mentor Tasks.dc.html      row title  600 15.5px/1.3
                                      row meta   500 13px/1
     Motiva Mentor Dashboard.dc.html  item title 600 13.5px/1.3
                                      item title 600 14px/1.35
                                      team name  700 15px/1.3
                                      meta/time  600 13px/1  ·  600 12px/1

   So a mentor's row title was rendering at 500 while every mentor
   design draws it at 600–700, and its meta at 14px while every mentor
   design draws it at 13px. That is what made המשימות שלי read lighter
   and looser than בית even though the two lists carry the same model.

   ONLY WEIGHT AND SIZE MOVE. No padding, no gap, no colour, no
   line-height — the row's geometry is the student block's and stays
   there, because the two roles genuinely do share it.

   Meta takes the DASHBOARD's 600 rather than the Tasks export's 500:
   the dashboard is this pass's typographic reference, and 600 is what
   keeps the three-step hierarchy legible inside one row —
   title 600 primary ink > secondary 500 muted > meta 600 in the
   state's own colour. At 500 the state read as a second line of
   description rather than as a state.
   ============================================================ */

.motiva-mentor .m-row-primary[b-25ghungdff] {
    font-weight: var(--motiva-font-weight-semibold);
}

/* THE SIZE LINE IS GONE, THE WEIGHT STAYS. This read
   `font-size: var(--motiva-font-size-sm)` (13px) while every other role
   resolved `.motiva-final .m-row-meta` to --motiva-font-size-meta
   (12.5px) — the last surviving piece of the mentor type rebase, and the
   half-pixel that would have kept row metadata off parity after the token
   block was removed.

   The WEIGHT is a different claim and is deliberately kept: inside one row
   the three steps are title 600 primary ink > secondary 500 muted > meta
   600 in the state's own colour, and at 500 the state read as a second
   line of description rather than as a state. That is a hierarchy
   decision, not a scale one. It is the only typography property on which
   a Mentor still differs from the other roles, and it is listed as such
   rather than left to be discovered. */
.motiva-mentor .m-row-meta[b-25ghungdff] {
    font-weight: var(--motiva-font-weight-semibold);
}
/* /Components/Row/MRowList.razor.rz.scp.css */
/* ============================================================
   MRowList — Motiva System Master, "Row list (the 'table' pattern)"
   space-between rows, hairline divider, no zebra striping.

   ::deep is required for the divider rules: MRow renders its own root with
   its own scope id, so a plain descendant selector compiled into this
   component's scope would never match it.

   The divider selector carries BOTH list classes on purpose. MRow's own
   reset sets `border: 0` (needed for its <button> form), which has the
   same specificity as a single-class ::deep rule — the winner would then
   depend on the order the two scoped stylesheets happen to be bundled in.
   The extra class settles it deterministically.
   ============================================================ */

.m-row-list[b-08esnj78cv] {
    display: flex;
    flex-direction: column;
}

.m-row-list.m-row-list-divided[b-08esnj78cv]  .m-row {
    border-block-end: 1px solid var(--motiva-border-subtle);
}

/* The Master's rule is on the row itself (.row:last-child{border-bottom:0}),
   but a row can also be the last *rendered* item while a later sibling is
   conditionally hidden — matching the last child from the list side keeps
   the divider correct in both cases. */
.m-row-list.m-row-list-divided[b-08esnj78cv]  .m-row:last-child {
    border-block-end: 0;
}

/* ============================================================
   INSET — the "list fills a bordered card" contract

   MRow's own rhythm (--pad-row: 14px 2px) is right for a list on a
   BARE surface: the 2px inline padding is what makes a row read as a
   line of content whose text aligns with the prose around it. Inside
   an `MCard Padding="None"` that 2px is the only inset there is, so
   the text ends up against the card's hairline and the row reads as
   cramped rather than as dense.

   This variant states the four values that relationship needs, in one
   place, instead of each page re-deriving them:

     padding-inline   a real inset from the card edge
     padding-block    one step airier than the bare-surface 14px —
                      a card row carries more per line (title, context,
                      status, meta) and 14px lets those four collide
     gap              between the main block and the end block, so the
                      status/meta column never crowds a long title
     .m-row-main gap  between the title and its context line; 2px is
                      fine for two lines on a bare surface and too
                      tight once a third line and a status share the row

   Specificity: `.m-row-list-inset ::deep .m-row` compiles to
   `.m-row-list-inset[b-…] .m-row` (0,3,0), which deterministically
   outranks MRow's own `.m-row[b-…]` (0,2,0) — the same argument the
   divider rules above document, and the reason this can live here at
   all rather than inside MRow.
   ============================================================ */

.m-row-list-inset[b-08esnj78cv]  .m-row {
    padding-inline: var(--motiva-space-md);
    /* 15px: half a step above the bare-surface 14px. A full 16px step
       pushed every mentor list noticeably taller for no extra clarity. */
    padding-block: 15px;
    gap: var(--motiva-space-md);
}

.m-row-list-inset[b-08esnj78cv]  .m-row-main {
    gap: var(--motiva-space-xs);
}

/* Student experience, final: the divider is the design's own hairline,
   rgba(27,26,34,.07) rather than a light-grey line. Written against the
   same ::deep row selector the base rule uses, so the last-child
   exception above keeps applying unchanged. */
.motiva-final .m-row-list.m-row-list-divided[b-08esnj78cv]  .m-row {
    border-block-end: 1px solid var(--motiva-border-card);
}
/* /Components/ScrollArea/MScrollArea.razor.rz.scp.css */
/* ============================================================
   MScrollArea — Motiva System Master, "Scrollable container"
   Thin 6px low-contrast scrollbar, transparent track, pill thumb.

   The thumb colour is the Master's ink at 16%/26%. It is derived from the
   ink token with color-mix rather than frozen as rgba(26,24,32,…), so it
   follows the token into dark mode instead of staying a light-mode value
   on a dark surface. A plain rgba() precedes each as the fallback for
   engines without color-mix — a var() fallback cannot cover an invalid
   value, only a missing one.
   ============================================================ */

/* ── The scrollbar goes on the physical RIGHT edge ──
   A scroll box puts its scrollbar on the INLINE-END edge, which under this
   app's `direction: rtl` is the LEFT one. Flipping only this box to
   `direction: ltr` moves it to the right; the direct children restore `rtl`
   immediately below, so every row's text, alignment, padding and order are
   computed exactly as before.

   This is the pattern .rqw-list / .rqw-list-inner established for the
   request queues and .pws-body reuses for the deliverables list; it lives
   here now so callers stop re-declaring it one screen at a time.

   IT IS SAFE HERE AND NOT EVERYWHERE. `.m-scroll` is a BLOCK container, so
   its own direction decides nothing about where its children are placed —
   only how text and logical properties resolve inside them, which the
   restore below puts back. On a grid or a row-flex scroll container the
   same flip reverses the items themselves, which is why the month/week
   grids are handled differently (see PlanningWeekView). */
.m-scroll[b-8w42p80r54] {
    direction: ltr;
    overflow-y: auto;
    /* Paired with a flex/grid parent, min-height:0 is what actually lets the
       box shrink and scroll instead of growing to fit its content. */
    min-height: 0;

    /* Gutter so the thumb never sits on top of the content. Logical, so it
       lands on the correct side in RTL. */
    padding-inline-end: 10px;

    /* Firefox / standards path. */
    scrollbar-width: thin;
    scrollbar-color: rgba(26, 24, 32, 0.18) transparent;
    scrollbar-color: color-mix(in srgb, var(--motiva-text-primary) 18%, transparent) transparent;
}

/* Back to the page's own direction for everything actually rendered inside.

   ::deep IS LOAD-BEARING. The children are rendered by the CALLER, so they
   carry the caller's scope attribute, not this component's — a plain
   `.m-scroll > *` compiles to `.m-scroll[b-x] > *[b-x]` and matches nothing
   at all, which is a silent failure that leaves the whole list ltr. With
   ::deep the attribute stays on `.m-scroll` and the child selector is left
   unscoped, which is exactly the reach this needs.

   Direct children only — a bare text node placed straight into the scroll box
   would stay ltr, which is the one thing this component asks callers not to
   do (see the note in the .razor). */
.m-scroll[b-8w42p80r54]  > * {
    direction: rtl;
}

/* WebKit / Blink path — same treatment, different API. */
.m-scroll[b-8w42p80r54]::-webkit-scrollbar {
    width: 6px;
}

.m-scroll[b-8w42p80r54]::-webkit-scrollbar-track {
    background: transparent;
}

.m-scroll[b-8w42p80r54]::-webkit-scrollbar-thumb {
    background: rgba(26, 24, 32, 0.16);
    background: color-mix(in srgb, var(--motiva-text-primary) 16%, transparent);
    border-radius: var(--motiva-radius-full);
}

.m-scroll[b-8w42p80r54]::-webkit-scrollbar-thumb:hover {
    background: rgba(26, 24, 32, 0.26);
    background: color-mix(in srgb, var(--motiva-text-primary) 26%, transparent);
}

/* Keyboard focus: the box is focusable so it can be scrolled with the
   arrow keys, and that has to be visible. Inset, because the scroll area
   usually sits flush inside a card. */
.m-scroll:focus-visible[b-8w42p80r54] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}
/* /Components/Search/MSearchField.razor.rz.scp.css */
/* ============================================================
   MSearchField — Motiva System Master, "Filters & search"

   Values from the finalized Knowledge Center hero
   (Motiva Resources.dc.html:104-107):
     flex, gap 10px, rgba(255,255,255,.82) fill, 1px #EFEDF4 border,
     radius 12px, padding 11px 16px, 16px violet-stroke magnifier,
     14px borderless input inheriting the page typeface.

   Every student-only token is read with a var() fallback to its :root
   peer so the field still renders correctly outside .motiva
   (e.g. in the /motiva gallery) instead of losing its surface.
   ============================================================ */

.m-search[b-yl746ycnnm] {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;

    /* The Design's fill is a translucent white so the hero's ambient wash
       stays faintly visible through the field. color-mix keeps that
       behaviour theme-aware: in dark mode it thins the dark surface
       instead of laying white over it. */
    background: color-mix(in srgb, var(--motiva-surface-primary) 82%, transparent);
    border: 1px solid var(--motiva-border-card, var(--motiva-border-subtle));

    /* 12px sits between --motiva-radius-sm (10px) and -md (14px). Snapping
       to either visibly changes the field's silhouette against the Design,
       so the Master's own value stays literal. */
    border-radius: 12px;

    /* Master value. The scale steps 8 -> 16, so neither axis lands on a
       token; rounding would change the field's height by 3px. */
    padding: 11px 16px;

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

/* The whole field reads as one control, so the ring goes on the box rather
   than on the bare input inside it. :focus-within (not :focus) because the
   focusable element is the input, one level down. */
.m-search:focus-within[b-yl746ycnnm] {
    border-color: var(--motiva-color-focus-ring);
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -1px;
}

.m-search-icon[b-yl746ycnnm] {
    flex-shrink: 0;
    /* Design stroke #6D5FD6 — the edge-violet of the ambient sweep, not the
       primary action violet, so the field never reads as a button. */
    color: var(--motiva-color-edge-violet, var(--motiva-color-violet));
}

.m-search-input[b-yl746ycnnm] {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    background: transparent;
    border: 0;
    outline: none;
    padding: 0;
    font-family: inherit;
    font-size: var(--motiva-font-size-item, var(--motiva-font-size-sm));
    font-weight: var(--motiva-font-weight-regular);
    color: var(--motiva-text-primary);
}

.m-search-input[b-yl746ycnnm]::placeholder {
    color: var(--motiva-text-subtle, var(--motiva-text-muted));
    opacity: 1; /* Firefox dims placeholders by default; the token is the value */
}

/* type="search" renders a UA clear affordance in WebKit/Blink that is not in
   the Design and does not match its icon language. Suppressed rather than
   switching to type="text", because "search" is what the field is and it
   carries the right semantics/keyboard on mobile. */
.m-search-input[b-yl746ycnnm]::-webkit-search-decoration,
.m-search-input[b-yl746ycnnm]::-webkit-search-cancel-button,
.m-search-input[b-yl746ycnnm]::-webkit-search-results-button,
.m-search-input[b-yl746ycnnm]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}

@media (prefers-reduced-motion: reduce) {
    .m-search[b-yl746ycnnm] { transition: none; }
}

/* ============================================================
   STUDENT EXPERIENCE, FINAL — the search pill

   Resources draws search as a translucent pill sitting on the canvas,
   not as a bordered field: a muted magnifier, a borderless input, and
   the whole thing rounded to 999px. (README.md, Resources.)
   ============================================================ */

.motiva-final .m-search[b-yl746ycnnm] {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--motiva-surface-section-border);
    border-radius: var(--motiva-radius-full);
    padding: 6px 8px 6px 6px;
    gap: 8px;
    box-shadow: none;
}

.motiva-final .m-search:focus-within[b-yl746ycnnm] {
    border-color: var(--motiva-surface-section-border);
    box-shadow: none;
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 0;
}

.motiva-final .m-search-icon[b-yl746ycnnm] { color: var(--motiva-text-subtle); }

.motiva-final .m-search-input[b-yl746ycnnm] {
    background: transparent;
    border: none;
    padding: 6px 0;
    font-size: var(--motiva-font-size-md);
    font-weight: var(--motiva-font-weight-medium);
}

.motiva-final .m-search-input[b-yl746ycnnm]::placeholder { color: var(--motiva-text-subtle); }

/* ============================================================
   ON A SOLID PANEL — .m-search-on-surface

   The .motiva-final border above is --motiva-surface-section-border
   (translucent white), which reads correctly for a pill sitting on the
   ambient canvas but vanishes when the field is placed on a solid white
   panel such as an MPageHeaderCard. This modifier swaps in the neutral
   "control edge" line so the field keeps a clearly visible but subtle
   outline against the white surface. Nothing else — width, radius, fill,
   padding, icon, focus ring — changes.
   ============================================================ */
.m-search.m-search-on-surface[b-yl746ycnnm],
.motiva-final .m-search.m-search-on-surface[b-yl746ycnnm],
.motiva-final .m-search.m-search-on-surface:focus-within[b-yl746ycnnm] {
    border-color: var(--motiva-border-strong);
}
/* /Components/SectionHeading/MSectionHeading.razor.rz.scp.css */
/* ============================================================
   MSectionHeading — Motiva System Master, section label

   Values are the ones the student pages already use for the same
   role (LearningMaterialsPage's .kc-results-count and its peers):
   body size, semibold, 0.06em tracking, secondary ink. Every one
   is read from a token, never restated as a literal.

   `align-items: baseline` rather than center: the label and the
   link are different sizes, and the design sits them on a shared
   text baseline, not on a shared box centre.
   ============================================================ */

/* ── The section rhythm ──────────────────────────────────────
   ONE rule, and the whole point of it is the RATIO:

       title  ↔  "לכל … ←"     same row        (this flex box)
       header ↔  its card       16px  (space-md)
       card   ↔  next section   48px  (space-2xl)   ← owned by the page

   3:1. The tight gap says "this card belongs to this heading"; the
   loose one says "a new section starts here". At the previous 12/30 the
   two gaps were close enough in absolute terms that a heading read as
   floating between two cards rather than belonging to the one below it.

   Both numbers are tokens, so the ratio survives a change to the
   spacing scale. The loose half lives on the page rather than as a
   margin-block-start here, because a page composes sections in
   different wrappers (bare siblings on בית, <section> elements on
   המשימות שלי) and a :first-child rule would silently zero the gap for
   every section that happens to open its own wrapper. */

.m-section-heading[b-b7f4kmxju4] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--motiva-space-md);
    margin-block-end: var(--motiva-space-md);
}

/* A heading whose end slot holds a control rather than a text link has
   nothing to sit on a shared text baseline WITH, so it centres instead —
   otherwise a 28px button hangs below the label it belongs to. */
.m-section-heading:has(.m-section-heading-trailing)[b-b7f4kmxju4] {
    align-items: center;
}

.m-section-heading-label[b-b7f4kmxju4] {
    margin: 0;
    min-width: 0;
    font-size: var(--motiva-font-size-body);
    font-weight: var(--motiva-font-weight-semibold);
    letter-spacing: 0.06em;
    color: var(--motiva-text-secondary);
}

/* The bubble is `.motiva-count` in motiva-base.css. Only the gap to the
   label belongs to this component.

   THE "· " SEPARATOR IS GONE. It existed for the old inline treatment,
   where the count was muted text trailing the heading and needed something
   to hold it off. A pill is its own boundary, and a middot inside one is
   punctuation with nothing to punctuate. */
.m-section-heading-count[b-b7f4kmxju4] {
    margin-inline-start: 6px;
}

/* The glyph is laid out by the caller, which owns whatever container
   treatment it wants; this only keeps it from stretching in a flex label. */
.m-section-heading-icon[b-b7f4kmxju4] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.m-section-heading-trailing[b-b7f4kmxju4] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--motiva-space-sm);
}

/* The "לכל ה… ←" link. Accent ink at heading weight, one step smaller
   than the label — the same treatment the student Dashboard already
   gives its own card links. */
.m-section-heading-link[b-b7f4kmxju4] {
    flex-shrink: 0;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    text-decoration: none;
    border-radius: var(--motiva-radius-sm);
    transition: color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.m-section-heading-link:hover[b-b7f4kmxju4] {
    color: var(--g-accent-hover);
    text-decoration: underline;
}

.m-section-heading-link:focus-visible[b-b7f4kmxju4] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 3px;
}

/* ============================================================
   STUDENT EXPERIENCE, FINAL — section titles

   20px/700 with -.02em tracking, sitting inside the section card
   rather than above it. The "see all" link is a quiet 14px/600 in
   ink-2, pushed to the reading end. (README.md §6.)
   ============================================================ */

.motiva-final .m-section-heading[b-b7f4kmxju4] {
    gap: 12px;
    margin-block-end: 0;
    padding-block-end: 0;
    border-block-end: none;
}

.motiva-final .m-section-heading-label[b-b7f4kmxju4] {
    font-size: var(--motiva-font-size-h2);
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: var(--motiva-letter-spacing-section);
    line-height: 1;
    color: var(--motiva-text-primary);
}

.motiva-final .m-section-heading-count[b-b7f4kmxju4]::before { content: none; }

.motiva-final .m-section-heading-link[b-b7f4kmxju4] {
    margin-inline-start: auto;
    font-size: var(--motiva-font-size-sm, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
    text-decoration: none;
}

.motiva-final .m-section-heading-link:hover[b-b7f4kmxju4] { color: var(--motiva-text-primary); }
/* /Components/Select/MSelect.razor.rz.scp.css */
/* ============================================================
   MSelect — Motiva's own closed control and its own open menu.

   The whole reason this file exists: a native <select> hands its popup to the
   operating system, which paints an OS font on an OS highlight with OS
   corners. Nothing below is decoration — it is the menu the browser refused
   to let the design system near.

   COLOUR DISCIPLINE
   Violet appears in exactly two places: the focus/open border, and the check
   on the selected option. Hover is neutral. A filled purple row would make an
   ordinary list of eight field names read as eight brand statements.

   RTL
   Logical properties throughout, and the chevron is a downward glyph rotated
   180deg when open, so it has no direction to mirror.
   ============================================================ */

.m-sel[b-cwo7liqp9z] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Closed control ──────────────────────────────────────── */
/* The border is drawn as a padding-box/border-box pair from the start, not
   only on focus. Swapping `border-color` for a gradient border-image on focus
   would change the box's paint model mid-interaction and shift the text by a
   subpixel; painting both states the same way keeps it still. */
.m-sel-trigger[b-cwo7liqp9z] {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-sm, 12px);
    background:
        linear-gradient(var(--motiva-surface-primary, #fff), var(--motiva-surface-primary, #fff)) padding-box,
        linear-gradient(var(--motiva-border-card, rgba(27, 26, 34, 0.10)), var(--motiva-border-card, rgba(27, 26, 34, 0.10))) border-box;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-primary, #1B1A22);
    text-align: start;
    cursor: pointer;
    user-select: none;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.m-sel-trigger:hover[b-cwo7liqp9z] {
    background:
        linear-gradient(var(--motiva-surface-primary, #fff), var(--motiva-surface-primary, #fff)) padding-box,
        linear-gradient(var(--motiva-border-strong, rgba(27, 26, 34, 0.18)), var(--motiva-border-strong, rgba(27, 26, 34, 0.18))) border-box;
}

/* Open AND keyboard focus both take the signature gradient edge. It reads as
   an edge because it runs the full width of a 32px control — the length is
   what lets the violet→teal sweep resolve. */
.m-sel-open .m-sel-trigger[b-cwo7liqp9z],
.m-sel-trigger:focus-visible[b-cwo7liqp9z] {
    outline: none;
    background:
        linear-gradient(var(--motiva-surface-primary, #fff), var(--motiva-surface-primary, #fff)) padding-box,
        var(--motiva-gradient-signature) border-box;
}

/* Keyboard focus additionally takes a soft halo, so "focused" and "open by
   mouse" are not the same picture. */
.m-sel-trigger:focus-visible[b-cwo7liqp9z] {
    box-shadow: 0 0 0 3px var(--motiva-color-brand-bg, rgba(109, 40, 245, 0.10));
}

.m-sel-value[b-cwo7liqp9z] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m-sel-value--empty[b-cwo7liqp9z] { color: var(--motiva-text-subtle, #9B96A8); }

.m-sel-chevron[b-cwo7liqp9z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--motiva-text-subtle, #9B96A8);
    transition: transform var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
                color     var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.m-sel-trigger:hover .m-sel-chevron[b-cwo7liqp9z] { color: var(--motiva-text-secondary, #4A4657); }

.m-sel-open .m-sel-chevron[b-cwo7liqp9z] {
    transform: rotate(180deg);
    color: var(--motiva-color-violet, #6D28F5);
}

.m-sel-disabled .m-sel-trigger[b-cwo7liqp9z] {
    cursor: default;
    opacity: 0.55;
}

/* ── Open menu ───────────────────────────────────────────── */
/* Width is tied to the trigger — `inset-inline: 0` rather than a min-width, so
   the menu is exactly as wide as the control that opened it and stays anchored
   to the reading start in both directions. */
.m-sel-menu[b-cwo7liqp9z] {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 5px);
    z-index: var(--motiva-z-dropdown, 500);
    max-height: 268px;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid var(--motiva-border-card, rgba(27, 26, 34, 0.07));
    border-radius: var(--motiva-radius-md, 14px);
    /* Opaque, not a translucent surface token: this floats over table rows and
       other controls, and a see-through popup is unreadable over them. */
    background: var(--motiva-surface-solid, #fff);
    box-shadow: var(--motiva-shadow-md, 0 16px 36px rgba(30, 20, 60, 0.14));
}

/* A taller menu once rows carry two or three lines: a rich list that shows
   three and a half options is a list you scroll instead of scan. */
.m-sel-menu:has(.m-sel-opt--rich)[b-cwo7liqp9z] { max-height: 360px; }

.m-sel-opt[b-cwo7liqp9z] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 6px 9px;
    border-radius: var(--motiva-radius-sm, 10px);
    font-size: var(--motiva-font-size-control, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.25;
    color: var(--motiva-text-primary, #1B1A22);
    cursor: pointer;
}

/* One hover treatment shared by pointer and keyboard: the keyboard highlight
   IS the hover state, so the two inputs cannot disagree about where you are. */
.m-sel-opt:hover[b-cwo7liqp9z],
.m-sel-opt--active[b-cwo7liqp9z] {
    background: var(--motiva-surface-hover, rgba(27, 26, 34, 0.045));
}

.m-sel-opt--on[b-cwo7liqp9z] { font-weight: var(--motiva-font-weight-semibold, 600); }

.m-sel-opt--off[b-cwo7liqp9z] {
    color: var(--motiva-text-subtle, #9B96A8);
    cursor: default;
}

.m-sel-opt--off:hover[b-cwo7liqp9z] { background: none; }

.m-sel-opt-label[b-cwo7liqp9z] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Rich rows: label + description + metadata ────────────────
   Opt-in, and only reached when the caller supplied a Description. A plain
   option is byte-for-byte the row it was before these rules existed.

   The whole point is that the row stays a ROW: two clamped lines of blurb and
   one quiet line of metadata, not a project card. A menu of cards is a menu
   you cannot compare down. */
.m-sel-opt--rich[b-cwo7liqp9z] {
    align-items: flex-start;
    padding-block: 8px;
}

.m-sel-opt-body[b-cwo7liqp9z] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.m-sel-opt-line[b-cwo7liqp9z] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* Amber, not the brand: a favourite is the student's own mark, and painting it
   violet would make it read as a system state. Kept at full strength on a
   disabled row — see the markup for why. */
.m-sel-opt-star[b-cwo7liqp9z] {
    flex: none;
    font-size: var(--motiva-font-size-caption, 11px);
    line-height: 1;
    color: #E8A33D;
}

/* Clamped to two lines. The blurb is here to decide BETWEEN options, and the
   full text lives one click away in ProjectQuickView. */
.m-sel-opt-desc[b-cwo7liqp9z] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-regular, 400);
    line-height: 1.45;
    color: var(--motiva-text-muted, #8B8698);
}

.m-sel-opt-meta[b-cwo7liqp9z] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.3;
    color: var(--motiva-text-faint, #B4AFC0);
}

/* ── Group heading ────────────────────────────────────────────
   A label over a run of rows, not a row itself: no hover, no hit area, and
   never the first thing the keyboard lands on. */
.m-sel-group[b-cwo7liqp9z] {
    padding: 10px 9px 4px;
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-bold, 700);
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--motiva-text-faint, #B4AFC0);
    pointer-events: none;
}

/* ── Filter box ───────────────────────────────────────────────
   Sticky: narrowing a hundred rows means typing while watching what is left,
   and a filter that scrolls away is a filter you retype. */
.m-sel-search[b-cwo7liqp9z] {
    position: sticky;
    top: -5px;
    z-index: 1;
    margin: -5px -5px 4px;
    padding: 7px 8px;
    background: var(--motiva-surface-solid, #fff);
    border-block-end: 1px solid var(--motiva-border-card, rgba(27, 26, 34, 0.07));
}

.m-sel-search-input[b-cwo7liqp9z] {
    box-sizing: border-box;
    width: 100%;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--motiva-border-card, rgba(27, 26, 34, 0.09));
    border-radius: var(--motiva-radius-sm, 10px);
    background: var(--motiva-surface-muted-solid, #F7F6F9);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 12.5px);
    color: var(--motiva-text-primary, #1B1A22);
    outline: none;
}

.m-sel-search-input:focus[b-cwo7liqp9z] {
    border-color: var(--motiva-color-violet, #4F46E5);
    background: var(--motiva-surface-solid, #fff);
}

.m-sel-empty[b-cwo7liqp9z] {
    padding: 14px 9px;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #8B8698);
    text-align: center;
}

/* A fixed slot, so the labels of checked and unchecked options start on the
   same edge instead of shifting by a glyph width. */
.m-sel-opt-check[b-cwo7liqp9z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 12px;
    width: 12px;
    color: var(--motiva-color-violet, #6D28F5);
}
/* /Components/Select/MSelectField.razor.rz.scp.css */
/* ============================================================
   MSelectField — scoped styles for the self-managed wrapper.

   Visual appearance is entirely in MSelect.razor.css; nothing
   here overrides those rules. This file owns only the backdrop
   that catches outside-clicks to dismiss the open menu.
   ============================================================ */

/* Transparent fixed overlay — present only while the menu is
   open, sits one z-level below the dropdown so the menu itself
   is still reachable, and swallows any click outside it. */
.m-selfield-bd[b-h7db2fd9tk] {
    position: fixed;
    inset: 0;
    z-index: calc(var(--motiva-z-dropdown, 500) - 1);
    background: transparent;
}
/* /Components/StatusBar/MStatusBar.razor.rz.scp.css */
/* ============================================================
   MStatusBar — the attention marker

   Moved verbatim out of MentorHomePage.razor.css's `.mh-attn-bar`,
   which transcribed it from Motiva Mentor Dashboard.dc.html: a 4px
   rule, 40px tall, fully rounded, in the state's own hue.

   The hues are read from the four semantic tokens rather than
   restated as literals, so this object and every chip, dot and meta
   cell beside it resolve the same colour. `.motiva-final` declares
   them; the var() fallbacks keep the component correct outside that
   scope (the /motiva gallery, and the legacy rail shell).
   ============================================================ */

.m-status-bar[b-nixn8cb82l] {
    display: block;
    width: 4px;
    height: 40px;
    flex: 0 0 4px;
    border-radius: var(--motiva-radius-full);
    background: var(--m-status-bar-color);
}

/* A single-line row gets a shorter rule — the bar should never be
   taller than the text it marks. */
.m-status-bar-compact[b-nixn8cb82l] { height: 28px; }

/* Tone resolution goes through one custom property, the same way
   MStatusDot's does, so a future labelled variant cannot drift to a
   different colour than the bar it sits beside. */
.m-status-bar-violet[b-nixn8cb82l]  { --m-status-bar-color: var(--motiva-color-violet, var(--motiva-color-indigo)); }
.m-status-bar-blue[b-nixn8cb82l]    { --m-status-bar-color: var(--motiva-color-blue, var(--motiva-color-info)); }
.m-status-bar-teal[b-nixn8cb82l]    { --m-status-bar-color: var(--motiva-color-teal); }
.m-status-bar-rose[b-nixn8cb82l]    { --m-status-bar-color: var(--motiva-color-rose, var(--motiva-color-danger)); }
.m-status-bar-neutral[b-nixn8cb82l] { --m-status-bar-color: var(--motiva-journey-dot-future, var(--motiva-text-faint)); }
/* /Components/StatusDot/MStatusDot.razor.rz.scp.css */
/* ============================================================
   MStatusDot — Motiva System Master, "Status dots & chips"
   Master .dot: 7px circle, inline, never shrinks.
   Violet = active/in-progress · Teal = complete/on-track · Rose = attention.
   ============================================================ */

/* Tone resolution lives on one custom property so the dot, its label and
   the attention ring can never drift to different colours. Student-scope
   tokens fall back to their :root peers. */
.m-dot-violet[b-830jmejq1y] { --m-dot-color: var(--motiva-color-violet, var(--motiva-color-indigo)); }
.m-dot-teal[b-830jmejq1y]   { --m-dot-color: var(--motiva-color-teal); }
.m-dot-rose[b-830jmejq1y]   { --m-dot-color: var(--motiva-color-rose, var(--motiva-color-danger)); }

.m-dot[b-830jmejq1y] {
    position: relative; /* anchors the attention ring */
    display: inline-block;
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: var(--motiva-radius-full);
    background: var(--m-dot-color);
}

/* ── Dot + label (the Master's inline status pattern) ────────── */

.m-dot-row[b-830jmejq1y] {
    display: inline-flex;
    align-items: center;
    /* Master pairs dot and label at 6px — below the 8px scale step, kept
       literal so the pair stays visually one unit rather than two items. */
    gap: 6px;
    color: var(--m-dot-color);
}

.m-dot-label[b-830jmejq1y] {
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: var(--motiva-line-height-caption);
    color: inherit;
    white-space: nowrap;
}

/* ── Attention ring ───────────────────────────────────────────
   Master's attn-dot: a ring in the dot's own tone expanding and fading
   on a slow loop. pointer-events:none so it can never intercept a click
   on the row underneath it. */

.m-dot-pulse .m-dot[b-830jmejq1y]::after,
.m-dot.m-dot-pulse[b-830jmejq1y]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid var(--m-dot-color);
    pointer-events: none;
    animation: m-dot-attention-b-830jmejq1y 1.65s var(--motiva-motion-easing-standard) infinite;
}

@keyframes m-dot-attention-b-830jmejq1y {
    0%   { transform: scale(1);   opacity: 0.55; }
    70%  {                        opacity: 0; }
    100% { transform: scale(3.1); opacity: 0; }
}

/* The Master's own stylesheet removes this animation outright under
   reduced motion rather than slowing it — an expanding halo is exactly
   the kind of motion that setting exists to stop. */
@media (prefers-reduced-motion: reduce) {
    .m-dot-pulse .m-dot[b-830jmejq1y]::after,
    .m-dot.m-dot-pulse[b-830jmejq1y]::after {
        animation: none;
        display: none;
    }
}

/* Student experience, final: 8px dots on the final palette.
   ── The tone classes set the shared --m-dot-color VARIABLE; they must not
   set `background` directly. `.m-dot-row` (the labelled mode) carries the
   same tone class and reads that variable as its TEXT colour, so painting a
   background on the tone class fills the whole label chip and hides its own
   text behind it. Overriding the variable keeps both modes correct. */
.motiva-final .m-dot[b-830jmejq1y]        { width: 8px; height: 8px; }
.motiva-final .m-dot-violet[b-830jmejq1y] { --m-dot-color: var(--motiva-color-violet); }
.motiva-final .m-dot-teal[b-830jmejq1y]   { --m-dot-color: var(--motiva-color-teal-ink); }
.motiva-final .m-dot-rose[b-830jmejq1y]   { --m-dot-color: var(--motiva-color-rose); }
/* /Components/Stepper/MProgressStepper.razor.rz.scp.css */
/* ============================================================
   MProgressStepper — System Master "Progress indicator"

   Circle/connector geometry from Motiva Student Dashboard V4:95-125
   — 26px circles, 2px connectors, 2px rings, 10px rail→labels gap.
   Those values are literal: nothing in the spacing or radius scale
   lands on them, and snapping would change the rail's height.

   DELIBERATE DEVIATION FROM V4 — column track instead of a flex rail.
   V4 anchors its first and last dot flush to the band's edges with
   flex:1 connectors between, while laying its labels out on a separate
   4-column grid. Those two systems do not line up: a label sits at the
   centre of column i, but dot i sits at i/(N-1) of the width, so V4's
   own labels drift off their dots. It is invisible at N=4 and wrong at
   any other N.

   Both rows here share one N-column track, so a label is always
   directly under its dot for any milestone count. The cost is that the
   end dots are inset by half a column rather than flush to the edge.

   The track also has a minimum column width, so a project with many
   milestones (14 is a real case in this app, against V4's 4) scrolls
   the rail on its own inline axis instead of crushing every label into
   an ellipsis. The page itself never scrolls sideways.
   ============================================================ */

.m-stepper[b-eve6d9dhk2] {
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    overflow-y: hidden;
    /* Keeps the breathing halo on the current dot from being clipped by
       the scroll box. */
    padding-block: 6px;
    scrollbar-width: thin;
}

.m-stepper[b-eve6d9dhk2]::-webkit-scrollbar { height: 6px; }
.m-stepper[b-eve6d9dhk2]::-webkit-scrollbar-thumb {
    background: var(--motiva-border-strong);
    border-radius: var(--motiva-radius-full);
}
.m-stepper[b-eve6d9dhk2]::-webkit-scrollbar-track { background: transparent; }

.m-stepper-rail[b-eve6d9dhk2],
.m-stepper-labels[b-eve6d9dhk2] {
    display: grid;
    grid-template-columns: repeat(var(--m-stepper-count, 4), minmax(72px, 1fr));
    min-width: 100%;
}

.m-stepper-step[b-eve6d9dhk2] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
}

.m-stepper-dot[b-eve6d9dhk2] {
    position: relative;
    z-index: 1;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    padding: 0;
    border-radius: var(--motiva-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    box-sizing: border-box;
    background: var(--motiva-surface-primary);
}

/* Only the button form is interactive; the span form inherits everything
   above and nothing below. */
button.m-stepper-dot[b-eve6d9dhk2] {
    cursor: pointer;
    font-family: inherit;
    transition: transform var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

button.m-stepper-dot:hover[b-eve6d9dhk2] { transform: scale(1.12); }

button.m-stepper-dot:focus-visible[b-eve6d9dhk2] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

/* Done — teal fill, white check. */
.m-stepper-dot-done[b-eve6d9dhk2] {
    background: var(--motiva-color-teal, #0D9C9A);
    border: 0;
    color: #fff;
}

.m-stepper-check[b-eve6d9dhk2] {
    font-size: var(--motiva-font-size-caption, 12px);
    line-height: 1;
}

/* Current — white, violet ring, slow breathing halo.
   The Master: "'current' step carries the breathing animation, others are
   static." Disabled wholesale under prefers-reduced-motion below. */
.m-stepper-dot-current[b-eve6d9dhk2] {
    border: 2px solid var(--motiva-color-violet, #4F46E5);
    animation: m-stepper-breathe-b-eve6d9dhk2 3.2s ease-in-out infinite;
}

/* Upcoming — white, neutral ring. */
.m-stepper-dot-upcoming[b-eve6d9dhk2] {
    border: 2px solid var(--motiva-border-strong);
}

/* Connector: runs from this step's centre to the next step's centre.
   Logical properties, so it extends toward the next dot in both LTR
   and RTL without a direction-specific rule. */
.m-stepper-line[b-eve6d9dhk2] {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 100%;
    height: 2px;
    transform: translateY(-1px);
}

.m-stepper-line-filled[b-eve6d9dhk2] { background: var(--motiva-color-teal, #0D9C9A); }
.m-stepper-line-muted[b-eve6d9dhk2]  { background: var(--motiva-border-strong); }

/* ── Label row ────────────────────────────────────────────────
   Same track as the rail. Cells are top-aligned so labels of
   different lengths still share one baseline row. */

.m-stepper-labels[b-eve6d9dhk2] {
    margin-block-start: 10px;
}

.m-stepper-label-cell[b-eve6d9dhk2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding-inline: 4px;
    box-sizing: border-box;
}

@keyframes m-stepper-breathe-b-eve6d9dhk2 {
    0%, 100% { box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.14); }
    50%      { box-shadow: 0 0 0 9px rgba(79, 70, 229, 0.05); }
}

@media (prefers-reduced-motion: reduce) {
    .m-stepper-dot-current[b-eve6d9dhk2] { animation: none; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.14); }
    button.m-stepper-dot[b-eve6d9dhk2]   { transition: none; }
    button.m-stepper-dot:hover[b-eve6d9dhk2] { transform: none; }
}
/* /Components/Summary/MSummaryTag.razor.rz.scp.css */
/* ============================================================
   MSummaryTag — page-level summary metadata beside the h1.

   Built from the Admin area's EXISTING tag recipe, not a new one: the same
   white paper, the same --motiva-border-card hairline and the same
   --motiva-radius-full that .pc-tag and the old .rtm-stat pills already
   wear. What changes is the count of containers — one, not three.

   Deliberately inert: no hover, no cursor, no shadow, no brand colour. The
   only thing on this row that may be loud is the h1.
   ============================================================ */

.m-sumtag[b-kva7wyp2k4] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 0;
    height: 28px;
    padding: 0 13px;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    white-space: nowrap;
    /* The header rows align their children on the TEXT BASELINE so the h1 and
       its neighbours share one. A 28px box baselined against a 34px title
       hangs below it, so — exactly as MInfoTip does — this opts out and takes
       the row's centre instead. */
    align-self: center;
}

/* gap: 0 — the space between the value and its label is a real character in
   the markup (see the component), so the gap would double it. */
.m-sumtag-item[b-kva7wyp2k4] {
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-width: 0;
}

/* The internal divider. A 1px rule rather than the middle dot the plain-text
   version used: a dot is punctuation inside one sentence, a rule says "two
   facts, one container", which is the whole point of the change.

   ::before on every item after the first, so the caller passes a flat list
   and no decorative separator ever reaches the accessibility tree.
   margin-inline-end pairs with the container's 10px gap, so the rule sits
   evenly between the two labels it parts. */
.m-sumtag-item + .m-sumtag-item[b-kva7wyp2k4]::before {
    content: "";
    flex: 0 0 auto;
    width: 1px;
    height: 12px;
    margin-inline-end: 10px;
    background: var(--motiva-border-strong, rgba(27, 26, 34, 0.12));
}

.m-sumtag-value[b-kva7wyp2k4] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
    /* Counts change as the admin works; lining figures stop the row twitching
       when 9 becomes 10. */
    font-variant-numeric: tabular-nums;
}

.m-sumtag-label[b-kva7wyp2k4] {
    font-size: var(--motiva-font-size-meta, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
}

/* ── Narrow ──────────────────────────────────────────────────
   The header rows are already `flex-wrap: wrap`, so below the width where the
   title, the tip and this tag stop sharing a line the tag drops to its own
   line intact — the grouping survives, which is why the metrics are one box
   and not three. Only the padding tightens; the type does not shrink. */
@media (max-width: 900px) {
    .m-sumtag[b-kva7wyp2k4] { padding: 0 11px; gap: 9px; }
    .m-sumtag-item + .m-sumtag-item[b-kva7wyp2k4]::before { margin-inline-end: 9px; }
}
/* /Components/Tabs/MFilterTabs.razor.rz.scp.css */
/* ============================================================
   MFilterTabs — the design's segmented pill group.

   The same recipe as the top nav and every other filter track in
   the finished screens: a tinted track, a raised white pill for the
   selection, a violet count on the tab that owns it.

   Values are the shared tokens, which is what keeps this identical
   to Pages/Tasks/TaskStatusTabs while both exist.
   ============================================================ */

.m-filter-tabs[b-wka7ikx6ke] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-surface-chip, var(--motiva-color-neutral-bg));
}

.m-filter-tab[b-wka7ikx6ke] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    border: none;
    border-radius: var(--motiva-radius-full);
    background: transparent;
    color: var(--motiva-text-muted);
    font-family: var(--motiva-font-family);
    /* The shared control step, not a literal: a tab and the select beside it
       are the same kind of thing and drifted apart while each owned its own
       13px. 15px on desktop, 13px below. */
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.m-filter-tab:hover[b-wka7ikx6ke] { color: var(--motiva-text-primary); }

.m-filter-tab:focus-visible[b-wka7ikx6ke] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

/* The selection is a raised white pill. The extra inline padding is the
   design's own optical correction for the heavier weight. */
.m-filter-tab-active[b-wka7ikx6ke],
.m-filter-tab-active:hover[b-wka7ikx6ke] {
    padding-inline: 16px;
    background: var(--motiva-surface-primary, #fff);
    color: var(--motiva-text-primary);
    font-weight: var(--motiva-font-weight-bold);
    box-shadow: var(--motiva-shadow-pill);
}

/* The bubble is `.motiva-count` in motiva-base.css. Nothing is restated
   here — a filter's count and a nav item's count are the same object and
   must not be able to drift apart again. */

@media (prefers-reduced-motion: reduce) {
    .m-filter-tab[b-wka7ikx6ke] { transition: none; }
}

@media (max-width: 720px) {
    .m-filter-tabs[b-wka7ikx6ke] { flex-wrap: wrap; }
}
/* /Components/TeamTask/TeamTaskEditModal.razor.rz.scp.css */
/* ============================================================
   TeamTaskEditModal — scoped (ttm-* prefix)

   ── What this pass changed, and why ──────────────────────────
   The markup, fields, validation and every interaction are untouched. What
   was wrong was the vocabulary: this file was moved verbatim out of
   TeamTasksCard, which predates the Motiva System Master, so it was still
   drawing a pre-Motiva dialog — 16px radius, 1.5px slate-era field borders,
   divider rules above and below the body, literal 17/15/13px type and
   literal 700/600 weights.

   Colour was the one thing that was already right by accident: the --g-*
   aliases this file reads are re-based inside `.motiva-student`
   (motiva-tokens.css), so the ink and surfaces already resolved to Master
   values. Everything geometric did not, and geometry is most of why a
   dialog reads as foreign.

   It now speaks the finalized student modal language, which is documented
   in one place — the `.motiva-student` block of MModal.razor.css:
     • radius --motiva-radius-xl (26), max-width 440, --motiva-scrim
     • ONE continuous pad through header, body and footer — no rules
     • 18px title, 30px round close button in --motiva-text-subtle

   Why this is styled rather than converted to <MModal>: MModal adds
   Escape-to-close and an auto-focused overlay. Those are behaviours, and
   this pass is not allowed to add any. Matching its stylesheet gets the
   whole visual result with none of that.
   ============================================================ */


/* ── Modal overlay ──────────────────────────────────────────────
   --motiva-scrim, not rgba(0,0,0,.38): the Master's scrim is warm ink at
   16%, not black at 38%. Under the old value the page behind the dialog
   went muddy and the warm canvas read cold. The blur stays — it is what
   keeps a busy task board from competing through a 16% veil. */
.ttm-overlay[b-t9u4tefron] {
    position: fixed;
    inset: 0;
    background: var(--motiva-scrim, rgba(27, 26, 34, 0.16));
    backdrop-filter: blur(2px);
    z-index: var(--motiva-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--motiva-shell-padding, 16px);
    animation: ttm-fade-in-b-t9u4tefron var(--motiva-motion-duration-standard) var(--motiva-motion-easing-entrance);
}

@keyframes ttm-fade-in-b-t9u4tefron {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Modal dialog ───────────────────────────────────────────────
   The 1px gradient edge is the "subtle gradient treatment" the rest of the
   system reserves for its highest-emphasis surface: the same
   --motiva-gradient-edge token MCard's AmbientEdge variant paints, and the
   same violet>transparent>teal sweep the finalized design draws around its
   own team-task create form.

   Painted with padding-box/border-box rather than MCard's 1px-padding-plus-
   inner-div, because that technique needs a wrapper element and this pass
   does not add DOM. Same hairline, same token, no extra node.

   max-height + a scrolling body are new and are a fix, not a flourish: with
   the calendar section open and a validation message showing, the dialog was
   taller than a short laptop viewport and `overflow: hidden` cropped the
   footer — the save button could be unreachable. MModal has carried this
   guard from the start. */
.ttm-modal[b-t9u4tefron] {
    border: 1px solid transparent;
    background:
        linear-gradient(var(--motiva-surface-primary), var(--motiva-surface-primary)) padding-box,
        /* --motiva-border-strong, not --motiva-border-card, as the fallback:
           the card token only exists inside `.motiva`, and a var() fallback
           covers a MISSING property, never an invalid one — so an undefined
           second fallback would invalidate the whole `background` shorthand
           and render the dialog transparent rather than plain. This one is
           declared at :root. */
        var(--motiva-gradient-edge, var(--motiva-border-strong)) border-box;
    border-radius: var(--motiva-radius-xl);
    box-shadow: var(--motiva-shadow-lg);
    width: 100%;
    /* 440px was a phone-shaped column on a desktop screen: the title and the
       description wrapped every few words, and five stacked fields plus the
       Google block ran past the fold on a laptop, so the form was scrolled
       rather than read. 680 is wide enough to stop the wrapping and to let
       the two short controls (assignee, due date) share one row — which is
       what takes the height back out. `width: 100%` and the overlay's own
       padding already shrink it below that on narrow viewports, so no media
       query is needed to make it responsive; the one below is only for the
       two-up row, which has to fold back to a single column.

       720 and not a number of its own: it is the value
       `.motiva-final .m-modal-large` resolves to in MModal.razor.css, which is
       the shell the lecturer calendar's create modal draws. The two create
       modals are the same object at two different implementations, so they may
       not be two different widths. (This file cannot read that rule — scoped
       CSS has no import — so the value is restated, with this note as the
       link.) */
    max-width: 720px;
    max-height: calc(100vh - 2 * var(--motiva-shell-padding, 16px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: ttm-scale-in-b-t9u4tefron var(--motiva-motion-duration-slow) var(--motiva-motion-easing-entrance);
}

@keyframes ttm-scale-in-b-t9u4tefron {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* ── Header ─────────────────────────────────────────────────────
   No rule, no icon, one pad. 22px rather than the shared modal's 26px: this
   dialog carries five fields and a disclosure, so it is the tallest modal in
   the student experience and the four points come off the top where nothing
   is lost. */
.ttm-modal-header[b-t9u4tefron] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--motiva-space-md);
    flex-shrink: 0;
    padding: 22px 28px 0;
}

.ttm-modal-title[b-t9u4tefron] {
    margin: 0;
    font-size: var(--motiva-font-size-h3, 18px);
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: var(--motiva-letter-spacing-section, normal);
    line-height: 1.2;
    color: var(--motiva-text-primary);
}

/* A round, quiet target — the shared modal's close button exactly. It was a
   squarish 8px box in secondary ink, which is a heavier thing than the only
   dismissive control in the dialog should be. */
.ttm-modal-close[b-t9u4tefron] {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--motiva-radius-full);
    color: var(--motiva-text-subtle, var(--motiva-text-muted));
    font-size: var(--motiva-font-size-sm, 13px);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.ttm-modal-close:hover:not(:disabled)[b-t9u4tefron] {
    background: var(--motiva-color-neutral-bg, var(--motiva-surface-hover));
    color: var(--motiva-text-primary);
}

/* The dialog's only dismissive control had no visible keyboard state at all. */
.ttm-modal-close:focus-visible[b-t9u4tefron] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.ttm-modal-close:disabled[b-t9u4tefron] {
    opacity: 0.45;
    cursor: default;
}

/* ── Body / fields ──────────────────────────────────────────────
   14px between fields, down from 14 + a 5px label gap that together read as
   19. The label now sits 6px off its control and 14px off the field above,
   so a field is legibly one object and the stack is legibly a list of them. */
.ttm-modal-body[b-t9u4tefron] {
    padding: 16px 28px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    min-height: 0;
}

.ttm-field[b-t9u4tefron] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Two short controls on one line — the assignee select and the due date.
   Neither needs 680px, and stacking them was most of the modal's height.
   `1fr 1fr` rather than auto: the two boxes stay equal, so the row reads as
   one pair of fields instead of two unrelated ones. Folds back to a single
   column exactly where the modal itself stops being 680px wide. */
.ttm-row[b-t9u4tefron] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}

@media (max-width: 620px) {
    .ttm-row[b-t9u4tefron] { grid-template-columns: 1fr; }
}

/* Master "Sub label": 13px / 600, secondary ink. Was a literal 13/600 in the
   same place — same result, but the value now moves when the scale does. */
.ttm-label[b-t9u4tefron] {
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
}

.ttm-required[b-t9u4tefron] {
    color: var(--motiva-color-rose, var(--motiva-color-danger));
}

/* ── Controls ───────────────────────────────────────────────────
   The finalized design's field: a filled, low-contrast well rather than a
   white box with a heavy outline — 10px/14px inset, the Master's inner
   radius, a 1px edge and the Master's own field fill. The old 1.5px border on
   white was the single most generic thing in the dialog; a Motiva field is
   read by its FILL, and its border is a hairline that only firms up on focus.

   min-height is the shared control height, so the select and the native date
   and time inputs — which size themselves from their own internal widgets —
   land on exactly the same 40px as the text input beside them instead of each
   settling somewhere different. */
.ttm-input[b-t9u4tefron],
.ttm-textarea[b-t9u4tefron],
.ttm-select[b-t9u4tefron] {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--motiva-control-height-md);
    padding: 10px 14px;
    border: 1px solid var(--motiva-border-strong);
    /* --motiva-radius-sm, not -md. The final student scope re-bases the ramp to
       12 / 16 / 24 / 26, and 12 is exactly the radius the reference draws on
       its own form controls — which leaves 16 for the blocks that CONTAIN a
       field (the calendar row, the notices), so container and control nest
       instead of sharing one arc. */
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-secondary, var(--motiva-surface-primary));
    color: var(--motiva-text-primary);
    font-family: var(--motiva-font-family, inherit);
    font-size: var(--motiva-font-size-md);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.3;
    outline: none;
    transition: border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
    direction: rtl;
    text-align: right;
}

.ttm-input[b-t9u4tefron]::placeholder,
.ttm-textarea[b-t9u4tefron]::placeholder {
    color: var(--motiva-text-subtle, var(--motiva-text-muted));
    font-weight: var(--motiva-font-weight-regular);
}

/* Focus lifts the field off the wash onto white and firms the edge to brand —
   the reference's own `input:focus` treatment. The ring is kept as a real
   outline as well, because a border-colour change alone is not a sufficient
   focus indicator for anyone who cannot resolve that hue. */
.ttm-input:focus[b-t9u4tefron],
.ttm-textarea:focus[b-t9u4tefron],
.ttm-select:focus[b-t9u4tefron] {
    border-color: var(--motiva-color-violet, var(--motiva-color-indigo));
    background: var(--motiva-surface-primary);
}

.ttm-input:focus-visible[b-t9u4tefron],
.ttm-textarea:focus-visible[b-t9u4tefron],
.ttm-select:focus-visible[b-t9u4tefron] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 0;
}

.ttm-input:disabled[b-t9u4tefron],
.ttm-textarea:disabled[b-t9u4tefron],
.ttm-select:disabled[b-t9u4tefron] {
    opacity: 0.55;
    cursor: default;
}

.ttm-input.ttm-input-error[b-t9u4tefron] {
    border-color: var(--motiva-color-rose, var(--motiva-color-danger));
    background: var(--motiva-color-danger-bg);
}

/* rows="2" is unchanged; this is the floor it sits on. 48px, down from 58 —
   two lines plus the new inset, rather than two lines plus room for a third
   that never arrives. */
.ttm-textarea[b-t9u4tefron] {
    resize: vertical;
    min-height: 48px;
    line-height: var(--motiva-line-height-body);
}

/* appearance:auto is kept — the native select is the interaction, and this
   pass changes none. The inline-end padding makes room for the platform's own
   arrow so a long member name never runs under it in RTL. */
.ttm-select[b-t9u4tefron] {
    cursor: pointer;
    appearance: auto;
    padding-inline-end: 10px;
}

/* Native date/time inputs centre their text against a taller intrinsic box in
   WebKit; without this they sit a pixel or two high against their labels. */
.ttm-input[type="date"][b-t9u4tefron],
.ttm-input[type="time"][b-t9u4tefron] {
    align-items: center;
}

.ttm-field-error[b-t9u4tefron] {
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.4;
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
}

.ttm-save-error[b-t9u4tefron] {
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    background: var(--motiva-color-danger-bg);
    border-radius: var(--motiva-radius-md);
    padding: 10px 14px;
}

/* ── Google Calendar section ──────────────────────────────────────
   One row, not a section under a rule.

   It used to be separated by a divider and left flat, which put a horizontal
   line across a dialog that now has none anywhere else and still left the
   toggle looking like a sixth unlabelled field. As a contained row on the
   field wash it reads as what it is: one switch that owns whatever appears
   beneath it.

   ON tints the row teal — the same teal the team row on /tasks already uses
   for its "ביומן Google" chip, and the same the finalized design gives its
   active sync control. Teal is the Master's progress/completion hue, so
   "this is scheduled" is said in the vocabulary the rest of the product
   already reads, with no fourth colour and no Google branding. */

.ttm-gcal[b-t9u4tefron] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--motiva-border-strong);
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-secondary, var(--motiva-surface-primary));
    transition: border-color var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard),
                background var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard);
}

.ttm-gcal-on[b-t9u4tefron] {
    border-color: rgba(13, 156, 154, 0.34);
    background: var(--motiva-color-success-bg);
}

.ttm-gcal-head[b-t9u4tefron] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.ttm-gcal-icon[b-t9u4tefron] {
    font-size: 13px;
    line-height: 1;
    color: var(--motiva-text-muted);
    transition: color var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard);
}

.ttm-gcal-on .ttm-gcal-icon[b-t9u4tefron] {
    color: var(--motiva-color-teal-ink, var(--motiva-color-teal));
}

/* margin-inline-end:auto rather than justify-content:space-between, so the
   icon and the label stay a pair and only the toggle is pushed away. */
.ttm-gcal-title[b-t9u4tefron] {
    margin-inline-end: auto;
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
}

@keyframes ttm-gcal-reveal-b-t9u4tefron {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Start and end are one decision, so they share a row and stack only when
   there is genuinely no width for two time inputs. */
.ttm-gcal-times[b-t9u4tefron] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    animation: ttm-gcal-reveal-b-t9u4tefron var(--motiva-motion-duration-standard) var(--motiva-motion-easing-entrance);
}

/* Inside the tinted row the fields go white. The field wash and the teal wash
   are within a few percent of each other, and a filled field on a filled row
   stops reading as a field at all. */
.ttm-gcal-on .ttm-input[b-t9u4tefron] {
    background: var(--motiva-surface-primary);
    border-color: rgba(13, 156, 154, 0.28);
}

.ttm-gcal-on .ttm-input.ttm-input-error[b-t9u4tefron] {
    border-color: var(--motiva-color-rose, var(--motiva-color-danger));
    background: var(--motiva-color-danger-bg);
}

/* The times belong to the switch above them, so their labels step down a
   size — they are a caption on a revealed control, not two more top-level
   fields. */
.ttm-gcal-times .ttm-label[b-t9u4tefron] {
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-muted);
}

@media (max-width: 380px) {
    .ttm-gcal-times[b-t9u4tefron] { grid-template-columns: 1fr; }
}

/* ── Disconnected notice ──────────────────────────────────────────
   Not a disabled toggle: a switch that silently fails on save is worse than
   no switch. This states the reason and offers the fix.

   Same row geometry as the toggle it stands in for, so the section does not
   change shape depending on whether Google is connected. The dashed border it
   used to carry was the only dashed edge in the student experience. */
.ttm-gcal-notice[b-t9u4tefron] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border: 1px solid var(--motiva-border-strong);
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-secondary, var(--motiva-surface-primary));
}

.ttm-gcal-notice-icon[b-t9u4tefron] {
    font-size: 13px;
    line-height: 1;
    color: var(--motiva-text-subtle, var(--motiva-text-muted));
}

.ttm-gcal-notice-text[b-t9u4tefron] {
    flex: 1;
    min-width: 0;
    font-size: var(--motiva-font-size-sm);
    color: var(--motiva-text-secondary);
}

/* The outlined pill the student scope gives every secondary action
   (.motiva-student .m-btn-secondary). It was a squared-off violet outline,
   which is the one button shape this scope does not use. */
.ttm-gcal-connect[b-t9u4tefron] {
    flex-shrink: 0;
    padding: 7px 15px;
    font-family: var(--motiva-font-family, inherit);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-secondary);
    background: transparent;
    border: 1.5px solid var(--motiva-border-strong);
    border-radius: var(--motiva-radius-full);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.ttm-gcal-connect:hover:not(:disabled)[b-t9u4tefron] {
    border-color: var(--motiva-color-violet, var(--motiva-color-indigo));
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

.ttm-gcal-connect:focus-visible[b-t9u4tefron] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.ttm-gcal-connect:disabled[b-t9u4tefron] { opacity: 0.55; cursor: default; }

/* ── Remove confirmation ──────────────────────────────────────────
   Inline rather than a nested dialog: it is one question about one row, and a
   modal on top of a modal would bury the task being edited. It replaces the
   times inside the same container, so the row does not jump when it appears —
   only its contents change. */
.ttm-gcal-confirm[b-t9u4tefron] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 11px 12px;
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-color-danger-bg);
    /* Sits inside .ttm-gcal, so it takes the inner step of the same ramp. */
    animation: ttm-gcal-reveal-b-t9u4tefron var(--motiva-motion-duration-standard) var(--motiva-motion-easing-entrance);
}

.ttm-gcal-confirm-text[b-t9u4tefron] {
    margin: 0;
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
}

.ttm-gcal-confirm-actions[b-t9u4tefron] {
    display: flex;
    justify-content: flex-end;
    gap: var(--motiva-space-sm);
}

/* ── Partial success ──────────────────────────────────────────────
   The task IS saved; only the calendar step failed, and the footer's retry is
   the point of the message.

   It was amber — a fourth colour, which the Master forbids outright. Moved to
   the system's own warning slot, which inside `.motiva-student` is
   deliberately mapped onto rose so exactly this kind of call site keeps
   compiling while the rendered result obeys the three-colour rule. At 7%
   ground with ink-coloured body text it still reads as a notice rather than a
   failure, which is what the amber was protecting. */
.ttm-partial[b-t9u4tefron] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 14px;
    border-radius: var(--motiva-radius-md);
    font-size: var(--motiva-font-size-sm);
    line-height: 1.45;
    color: var(--motiva-text-primary);
    background: var(--motiva-color-warning-bg);
}

.ttm-partial-icon[b-t9u4tefron] {
    flex-shrink: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--motiva-color-rose-ink, var(--motiva-color-warning));
}

/* ── Footer ─────────────────────────────────────────────────────
   No rule, same 28px column as everything above it. ביטול and שמירה are
   MButton Secondary/Primary, which the student scope already draws as an
   outlined pill and the signature gradient pill (.motiva-cta) — so the
   hierarchy is the system's, declared once, and there is no button styling
   here at all. */
/* ACTIONS COLLECT AT THE END — the physical LEFT under RTL, which is the
   convention every Motiva dialog footer follows (`.m-modal-footer` states the
   same `flex-end`).

   It was `space-between`, and that is only correct when the footer happens to
   hold two things. On "משימת צוות חדשה" there is no task to delete, so the
   trash button is not rendered and שמירה is the row's ONLY child — and
   space-between puts a lone item at flex-start, i.e. the physical RIGHT. The
   footer read correctly while editing and wrongly while creating, from one
   rule, which is why it survived.

   The trash keeps its opposite corner by pushing itself there with an auto
   margin rather than by the container spreading its children: that is a
   property of the trash button, so it cannot change where the primary action
   sits, and adding a third control later cannot move either of them. */
.ttm-modal-footer[b-t9u4tefron] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex-shrink: 0;
    padding: 18px 28px 22px;
}

/* Trash icon button — compact square, danger ink, no fill at rest.
   `margin-inline-end: auto` is what holds it in the footer's opposite corner
   (the physical right) now that the row collects its actions at the end. */
.ttm-trash-btn[b-t9u4tefron] {
    margin-inline-end: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1.5px solid var(--motiva-border-strong);
    border-radius: var(--motiva-radius-md);
    background: none;
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.ttm-trash-btn svg[b-t9u4tefron] { width: 16px; height: 16px; }

.ttm-trash-btn:hover:not(:disabled)[b-t9u4tefron] {
    background: rgba(224, 51, 95, 0.08);
    border-color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
}

.ttm-trash-btn:focus-visible[b-t9u4tefron] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.ttm-trash-btn:disabled[b-t9u4tefron] {
    opacity: 0.4;
    cursor: not-allowed;
}
/* /Components/Toggle/MToggle.razor.rz.scp.css */
/* ============================================================
   MToggle — Motiva System Master, on/off switch

   Every literal here comes from the finalized Profile screen's own
   toggleStyle() helper (Motiva Profile.dc.html:428-433). The track and
   knob sizes are deliberately NOT snapped onto --motiva-space-*: the
   scale steps 4 -> 8 -> 16, and rounding 34/20/16 onto it would change
   the control's proportions.

   Colours DO come from tokens, with a var() fallback to the :root peer
   so the switch still renders correctly outside .motiva (e.g.
   in the /motiva gallery).
   ============================================================ */

.m-toggle[b-3m9zkqci6b] {
    position: relative;
    flex-shrink: 0;
    display: inline-block;
    box-sizing: border-box;

    width: 34px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: var(--motiva-radius-full, 999px);

    background: var(--motiva-border-strong, #E7E4EC);
    cursor: pointer;
    transition: background .15s ease-out;
}

.m-toggle-on[b-3m9zkqci6b] {
    background: var(--motiva-color-violet, var(--motiva-color-indigo));
}

.m-toggle:disabled[b-3m9zkqci6b] {
    cursor: not-allowed;
    opacity: .5;
}

/* ── Knob ─────────────────────────────────────────────────────
   The Master animates the knob with translateX(14px). That is NOT used
   here: this app turns on RTL with `direction: rtl` on html/body
   (app.css:5) and sets no dir attribute anywhere, so a `[dir="rtl"]`
   counter-rule would silently match nothing and the knob would slide
   out of the track on every student screen.

   Travelling `inset-inline-start` instead is direction-aware by
   construction — 2px at rest, 16px when on (34 − 16 − 2), which is the
   same 14px of motion the Master specifies, in the correct direction in
   both LTR and RTL with a single rule. */

.m-toggle-knob[b-3m9zkqci6b] {
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;

    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18);

    transition: inset-inline-start .15s ease-out;
}

.m-toggle-on .m-toggle-knob[b-3m9zkqci6b] {
    inset-inline-start: 16px;
}

/* ── Focus ────────────────────────────────────────────────────
   The Master gives cards and nav items a violet focus ring; the switch
   reuses it rather than relying on the UA default, which is invisible
   against the violet "on" fill. */

.m-toggle:focus[b-3m9zkqci6b] { outline: none; }

.m-toggle:focus-visible[b-3m9zkqci6b] {
    outline: 2px solid var(--motiva-color-violet, var(--motiva-color-indigo));
    outline-offset: 2px;
}

/* Student experience, final: 42x24 track, gradient when on, 18px knob
   (README.md §5, Profile preferences). */
.motiva-final .m-toggle[b-3m9zkqci6b] {
    width: 42px;
    height: 24px;
    padding: 3px;
    border-radius: var(--motiva-radius-full);
    background: rgba(27, 26, 34, 0.14);
    border: none;
}

.motiva-final .m-toggle-on[b-3m9zkqci6b] { background: var(--motiva-gradient-toggle); }

/* The knob's rest position and travel have to be re-stated with the track:
   the base rule places a 16px knob in a 34x20 track (2px inset, 16px travel),
   and leaving those numbers under a 42x24 track parks an 18px knob 1px off
   centre and stops it 5px short of the far end. 3px inset, 21px travel
   (42 − 18 − 3) is the same control at the final design's size.

   Direction is unchanged and deliberately so — see the base rule: this app
   turns on RTL with `direction`, and travelling `inset-inline-start` mirrors
   the switch the way every other RTL control in the product mirrors. */
.motiva-final .m-toggle-knob[b-3m9zkqci6b] {
    top: 3px;
    inset-inline-start: 3px;
    width: 18px;
    height: 18px;
    box-shadow: 0 1px 2px rgba(27, 26, 34, 0.25);
}

.motiva-final .m-toggle-on .m-toggle-knob[b-3m9zkqci6b] { inset-inline-start: 21px; }
/* /Components/UserImport/UserImportWizard.razor.rz.scp.css */
/* ============================================================
   UserImportWizard — ייבוא משתמשים
   Prefix: uiw-

   Lives inside MModal, on the Users management screen, so it inherits the
   .motiva .motiva-final token scope: every --motiva-* below already resolves
   to the finished design's values (18px card radius, 38px controls, the warm
   ink ramp, violet / teal / rose).

   COLOUR DISCIPLINE
   -----------------
   • violet  — the brand edge on a CHOSEN control, never a filled background.
   • teal    — a state that is fine (mapped, valid, will be created).
   • rose    — errors and the one destructive choice (replace). Nothing else.
   An "requires mapping" state is NOT an error, so it is amber-free and
   rose-free: it is drawn as neutral-with-emphasis.

   This is an admin workflow, so the density is tighter than a student screen:
   11.5-13px type, 6-10px insets, no decorative whitespace.
   ============================================================ */

.uiw[b-z8wmvxjnx8] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    color: var(--motiva-text-primary, #1B1A22);
}

/* ── Stage rail ──────────────────────────────────────────── */
.uiw-rail[b-z8wmvxjnx8] {
    padding: 2px 0 4px;
    border-bottom: 1px solid var(--motiva-border-subtle, rgba(27, 26, 34, 0.06));
}

.uiw-rail-label[b-z8wmvxjnx8] {
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #6B6779);
    white-space: nowrap;
}

.uiw-rail-label--on[b-z8wmvxjnx8] {
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-text-primary, #1B1A22);
}

/* ── Stage shell ─────────────────────────────────────────── */
.uiw-stage[b-z8wmvxjnx8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 260px;
}

.uiw-stage--center[b-z8wmvxjnx8] {
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
}

.uiw-stage-head[b-z8wmvxjnx8] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.uiw-stage-line[b-z8wmvxjnx8] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-primary, #1B1A22);
}

.uiw-foot-note[b-z8wmvxjnx8] {
    margin: 0;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.5;
    color: var(--motiva-text-muted, #6B6779);
}

.uiw-muted[b-z8wmvxjnx8]  { color: var(--motiva-text-muted, #6B6779); }
.uiw-strong[b-z8wmvxjnx8] { font-weight: var(--motiva-font-weight-semibold, 600); }
.uiw-ltr[b-z8wmvxjnx8]    { direction: ltr; text-align: right; }

/* ── Tooltip ─────────────────────────────────────────────────
   There is no tooltip component in the system and this needed one bubble,
   not a new primitive: a 15px "?" that reveals a positioned bubble on hover
   AND on keyboard focus, so the explanation is not mouse-only. Kept local to
   the wizard deliberately — if a second screen needs it, that is the moment
   it becomes a component, not before. */
.uiw-tip[b-z8wmvxjnx8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--motiva-surface-chip, var(--motiva-color-neutral-bg));
    color: var(--motiva-text-muted, #6B6779);
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1;
    cursor: help;
}

.uiw-tip--inline[b-z8wmvxjnx8] { margin-inline-start: 6px; }

.uiw-tip:focus-visible[b-z8wmvxjnx8] {
    outline: 2px solid var(--motiva-color-focus-ring, #6D28F5);
    outline-offset: 2px;
}

.uiw-tip[b-z8wmvxjnx8]::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 7px);
    inset-inline-start: 0;
    z-index: 5;
    width: max-content;
    max-width: 300px;
    padding: 8px 10px;
    border-radius: var(--motiva-radius-sm, 12px);
    background: var(--motiva-text-primary, #1B1A22);
    /* Approved exception, the same one MButton and .motiva-cta document: no
       --motiva-* token represents "text on the ink surface". */
    color: #fff;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.5;
    text-align: start;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.uiw-tip:hover[b-z8wmvxjnx8]::after,
.uiw-tip:focus-visible[b-z8wmvxjnx8]::after {
    opacity: 1;
    visibility: visible;
}

/* ── Notes ───────────────────────────────────────────────────
   Rose is errors and destructive warnings ONLY. There is no third tone. */
.uiw-note[b-z8wmvxjnx8] {
    padding: 9px 12px;
    border-radius: var(--motiva-radius-sm, 12px);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.5;
}

.uiw-note--error[b-z8wmvxjnx8],
.uiw-note--warn[b-z8wmvxjnx8] {
    background: var(--motiva-color-danger-bg);
    color: var(--motiva-color-rose-ink, #C42B52);
}

/* ── 1. Upload ───────────────────────────────────────────── */
.uiw-drop[b-z8wmvxjnx8] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 30px 20px;
    border-radius: var(--motiva-radius-lg, 24px);
    border: 1.5px dashed var(--motiva-border-strong, rgba(27, 26, 34, 0.12));
    background: var(--motiva-surface-secondary, #FBFBFD);
    text-align: center;
    transition:
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.uiw-drop--over[b-z8wmvxjnx8],
.uiw-drop:focus-within[b-z8wmvxjnx8] {
    border-color: var(--motiva-color-violet, #6D28F5);
    background: var(--motiva-color-brand-bg);
}

/* A native file input is already a drop target and already opens the picker
   on click. Laying it over the whole zone at zero opacity therefore buys both
   behaviours with no JS interop and no custom dragover/drop plumbing.

   ::deep is required: the <input> is rendered by the framework's InputFile
   component and carries no isolation attribute of ours, so it can only be
   reached through a wrapper that does. */
.uiw-drop-input[b-z8wmvxjnx8] {
    position: absolute;
    inset: 0;
}

.uiw-drop-input[b-z8wmvxjnx8]  input[type="file"] {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.uiw-drop-glyph[b-z8wmvxjnx8] { display: inline-flex; }

.uiw-drop-title[b-z8wmvxjnx8] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
}

.uiw-drop-sub[b-z8wmvxjnx8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-muted, #6B6779);
}

/* The longer "what goes in the file" explanation is an ACCORDION, not a
   permanent card: it answers a first-time question and then never needs to be
   read again. */
.uiw-help-body[b-z8wmvxjnx8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2px 0 6px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-regular, 400);
    line-height: 1.6;
    color: var(--motiva-text-secondary, #4A4657);
}

.uiw-help-body p[b-z8wmvxjnx8] { margin: 0; }
.uiw-help-muted[b-z8wmvxjnx8]  { color: var(--motiva-text-muted, #6B6779); }

.uiw-help-body code[b-z8wmvxjnx8] {
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--motiva-surface-hover, rgba(27, 26, 34, 0.035));
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--motiva-font-size-caption, 11.5px);
    color: var(--motiva-text-primary, #1B1A22);
    direction: ltr;
    unicode-bidi: isolate;
}

/* Selected-file card */
.uiw-file[b-z8wmvxjnx8] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    border-radius: var(--motiva-radius-md, 16px);
    background: var(--motiva-surface-secondary, #FBFBFD);
    border: 1px solid var(--motiva-border-card, rgba(27, 26, 34, 0.07));
}

.uiw-file-glyph[b-z8wmvxjnx8] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, rgba(27, 26, 34, 0.07));
    color: var(--motiva-color-violet, #6D28F5);
}

.uiw-file-text[b-z8wmvxjnx8] { flex: 1 1 auto; min-width: 0; }

.uiw-file-name[b-z8wmvxjnx8] {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.3;
}

.uiw-file-meta[b-z8wmvxjnx8] {
    margin: 2px 0 0;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.3;
    color: var(--motiva-text-muted, #6B6779);
}

.uiw-file-clear[b-z8wmvxjnx8] {
    flex: 0 0 auto;
    padding: 6px 10px;
    border: 0;
    background: none;
    border-radius: var(--motiva-radius-sm, 12px);
    font-family: inherit;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-color-violet, #6D28F5);
    cursor: pointer;
}

.uiw-file-clear:hover[b-z8wmvxjnx8] { background: var(--motiva-surface-hover, rgba(27, 26, 34, 0.035)); }

/* ── 2. Mapping ──────────────────────────────────────────── */
/* NOT overflow:hidden. This list contains popup menus that must leave its box
   — the same lesson MDataTable's scroller carries about kebab menus. The
   corners are therefore rounded on the first and last ROW instead of clipped
   by the container. */
.uiw-maplist[b-z8wmvxjnx8] {
    display: flex;
    flex-direction: column;
    border-radius: var(--motiva-radius-md, 16px);
    border: 1px solid var(--motiva-border-card, rgba(27, 26, 34, 0.07));
}

.uiw-maprow:first-child[b-z8wmvxjnx8] {
    border-start-start-radius: var(--motiva-radius-md, 16px);
    border-start-end-radius:   var(--motiva-radius-md, 16px);
}

.uiw-maprow:last-child[b-z8wmvxjnx8] {
    border-end-start-radius: var(--motiva-radius-md, 16px);
    border-end-end-radius:   var(--motiva-radius-md, 16px);
}

.uiw-maprow[b-z8wmvxjnx8] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) 120px minmax(0, 1.1fr);
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--motiva-border-subtle, rgba(27, 26, 34, 0.06));
    background: var(--motiva-surface-primary, #fff);
}

.uiw-maprow:last-child[b-z8wmvxjnx8] { border-bottom: 0; }

/* A column that was recognised but NOT decided on is the only one that needs
   to pull the eye. It does it with a violet start-edge, not a fill and not a
   red — nothing is wrong yet, it is simply outstanding. */
.uiw-maprow--needs[b-z8wmvxjnx8] {
    background: var(--motiva-surface-secondary, #FBFBFD);
    box-shadow: inset 2px 0 0 var(--motiva-color-violet, #6D28F5);
}

.uiw-map-src[b-z8wmvxjnx8] { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.uiw-map-header[b-z8wmvxjnx8] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.3;
}

.uiw-map-sample[b-z8wmvxjnx8] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.3;
    color: var(--motiva-text-subtle, #9B96A8);
}

/* inline-flex, so the marker's position is layout and not bidi resolution:
   in RTL the first child (the label) sits at the reading start and the marker
   trails it — "דורש מיפוי !" rather than "! דורש מיפוי". */
.uiw-map-state[b-z8wmvxjnx8] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
}

/* The marker is a fixed-width slot so the four states' labels all end on the
   same edge instead of shifting by a glyph width. */
.uiw-map-state-mark[b-z8wmvxjnx8] {
    flex: 0 0 auto;
    min-width: 7px;
    text-align: center;
}

.uiw-map-state--auto[b-z8wmvxjnx8],
.uiw-map-state--manual[b-z8wmvxjnx8] { color: var(--motiva-color-teal-ink, var(--motiva-color-teal)); }
.uiw-map-state--needs[b-z8wmvxjnx8]  { color: var(--motiva-color-violet, #6D28F5); }
.uiw-map-state--off[b-z8wmvxjnx8]    { color: var(--motiva-text-subtle, #9B96A8); }

/* The destination control is MSelect, whose closed height/radius/type are
   already the admin-control values this row was built around — so there is no
   .uiw-select rule here any more. What IS still this stage's business is
   stacking: the open menu leaves the row's box, so a row whose menu is open
   has to sit above the rows after it. */
.uiw-map-dest[b-z8wmvxjnx8] {
    display: flex;
    align-items: center;
    min-width: 0;
    /* Establishes the containing block for MSelect's absolutely-positioned
       menu without giving the cell a z-index of its own. */
    position: relative;
}

/* A row whose menu is open has to paint over the rows after it, which are
   opaque. */
.uiw-maprow:has(.m-sel-open)[b-z8wmvxjnx8] { position: relative; z-index: 2; }

/* ── 3./6. Compact tables ────────────────────────────────── */
.uiw-tablewrap[b-z8wmvxjnx8] {
    max-height: 320px;
    overflow: auto;
    border-radius: var(--motiva-radius-md, 16px);
    border: 1px solid var(--motiva-border-card, rgba(27, 26, 34, 0.07));
}

.uiw-tablewrap--short[b-z8wmvxjnx8] { max-height: 200px; }

.uiw-table[b-z8wmvxjnx8] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
}

.uiw-table th[b-z8wmvxjnx8] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 10px;
    text-align: start;
    background: var(--motiva-surface-secondary, #FBFBFD);
    border-bottom: 1px solid var(--motiva-border-subtle, rgba(27, 26, 34, 0.06));
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-muted, #6B6779);
    white-space: nowrap;
}

.uiw-table td[b-z8wmvxjnx8] {
    padding: 7px 10px;
    border-bottom: 1px solid var(--motiva-border-subtle, rgba(27, 26, 34, 0.06));
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.uiw-table tr:last-child td[b-z8wmvxjnx8] { border-bottom: 0; }

.uiw-col-line[b-z8wmvxjnx8]   { width: 44px; color: var(--motiva-text-subtle, #9B96A8); }
.uiw-col-narrow[b-z8wmvxjnx8] { width: 92px; }
.uiw-col-state[b-z8wmvxjnx8]  { width: 104px; }
/* Written against `.uiw-table td/th` rather than on its own, because those
   two set the cell padding at higher specificity than a bare class. */
.uiw-table td.uiw-col-chev[b-z8wmvxjnx8],
.uiw-table th.uiw-col-chev[b-z8wmvxjnx8] { width: 38px; padding-inline: 4px; text-align: center; }

.uiw-row--error td[b-z8wmvxjnx8] { background: var(--motiva-color-danger-bg); }

.uiw-inline[b-z8wmvxjnx8] {
    display: inline-block;
    margin-inline-end: 10px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.5;
}

.uiw-inline--error[b-z8wmvxjnx8] { color: var(--motiva-color-rose-ink, #C42B52); }
.uiw-inline--note[b-z8wmvxjnx8]  { color: var(--motiva-text-muted, #6B6779); }

/* ── 3. The check table's accordion rows ─────────────────── */
/* Everything here is scoped to .uiw-vtable so the Done stage's failure table —
   which is nothing BUT failures, and where a red wash is the honest picture —
   keeps the plain .uiw-row--error treatment above.

   ONE 2px LOGICAL SIDE BORDER, ALWAYS PRESENT, USUALLY TRANSPARENT.
   Every side marking on this table is drawn by recolouring these two borders
   rather than by adding one, because a border that appears only on some rows
   changes their cell widths and pulls the columns out of alignment — and an
   inset box-shadow, the usual way round that, is physical and would point at
   the wrong edge in an RTL table. */
/* th as well as td: they share a column, so a border on only one of them
   offsets the header text from the values under it by its own width. */
.uiw-vtable td:first-child[b-z8wmvxjnx8],
.uiw-vtable th:first-child[b-z8wmvxjnx8] { border-inline-start: 2px solid transparent; }
.uiw-vtable td:last-child[b-z8wmvxjnx8],
.uiw-vtable th:last-child[b-z8wmvxjnx8]   { border-inline-end:   2px solid transparent; }

/* THE RED IS AN EDGE, NOT A FILL. A file where 52 of 52 rows are broken used
   to arrive as a single red rectangle, in which the two importable rows were
   the invisible ones. Marking the exception on its start edge and leaving the
   surface alone is the same construction .uiw-maprow--needs already uses for
   an outstanding mapping. */
.uiw-vtable .uiw-row--error td[b-z8wmvxjnx8] { background: none; }
.uiw-vtable .uiw-row--error td:first-child[b-z8wmvxjnx8] { border-inline-start-color: var(--motiva-color-rose, #D93864); }

.uiw-chev[b-z8wmvxjnx8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: var(--motiva-radius-full, 999px);
    background: none;
    color: var(--motiva-text-subtle, #9B96A8);
    cursor: pointer;
    transition: transform  var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
                color      var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
                background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.uiw-chev:hover[b-z8wmvxjnx8] {
    background: var(--motiva-surface-hover, rgba(27, 26, 34, 0.045));
    color: var(--motiva-text-primary, #1B1A22);
}

.uiw-chev:focus-visible[b-z8wmvxjnx8] {
    outline: 2px solid var(--motiva-color-focus-ring, #6D28F5);
    outline-offset: 1px;
}

/* A rotation, not a second glyph — direction-free, like MAccordionItem's. */
.uiw-chev--on[b-z8wmvxjnx8] {
    transform: rotate(180deg);
    color: var(--motiva-color-violet, #6D28F5);
}

/* ── The bounded accordion surface ───────────────────────── */
/* MAccordionItem's contract, expressed on two table rows: the tint belongs to
   the head AND the body, one continuous border runs round the pair, and the
   detail is an inset opaque card sitting on that tint. Without the shared tint
   the detail reads as content dropped into the table rather than as the inside
   of the row that opened it — the exact split MAccordionItem exists to fix.
   These rules come after the error rules on purpose: an OPEN row is outlined
   as one box, so its start edge is the box, not a second red marker. */
.uiw-vtable .uiw-vrow--open td[b-z8wmvxjnx8],
.uiw-vtable .uiw-vdetail td[b-z8wmvxjnx8] {
    background: var(--motiva-surface-hover, rgba(27, 26, 34, 0.035));
}

.uiw-vtable .uiw-vrow--open td:first-child[b-z8wmvxjnx8],
.uiw-vtable .uiw-vdetail td:first-child[b-z8wmvxjnx8] { border-inline-start-color: var(--motiva-border-strong, rgba(27, 26, 34, 0.16)); }

.uiw-vtable .uiw-vrow--open td:last-child[b-z8wmvxjnx8],
.uiw-vtable .uiw-vdetail td:last-child[b-z8wmvxjnx8]  { border-inline-end-color: var(--motiva-border-strong, rgba(27, 26, 34, 0.16)); }

.uiw-vtable .uiw-vrow--open td[b-z8wmvxjnx8] {
    border-top: 1px solid var(--motiva-border-strong, rgba(27, 26, 34, 0.16));
    /* The head keeps no rule against its own body. */
    border-bottom: 0;
}

.uiw-vtable .uiw-vrow--open td:first-child[b-z8wmvxjnx8] { border-start-start-radius: var(--motiva-radius-sm, 12px); }
.uiw-vtable .uiw-vrow--open td:last-child[b-z8wmvxjnx8]  { border-start-end-radius:   var(--motiva-radius-sm, 12px); }

.uiw-vtable .uiw-vdetail td[b-z8wmvxjnx8] {
    padding: 0 10px 10px;
    border-bottom: 1px solid var(--motiva-border-strong, rgba(27, 26, 34, 0.16));
    white-space: normal;
    max-width: none;
}

.uiw-vtable .uiw-vdetail td:first-child[b-z8wmvxjnx8] { border-end-start-radius: var(--motiva-radius-sm, 12px); }
.uiw-vtable .uiw-vdetail td:last-child[b-z8wmvxjnx8]  { border-end-end-radius:   var(--motiva-radius-sm, 12px); }

/* The inset card. Opaque on purpose: it sits ON the row's tint, and the tint
   framing it on all four sides is what says "this is inside that row". */
.uiw-vdetail-box[b-z8wmvxjnx8] {
    padding: 9px 11px;
    border: 1px solid var(--motiva-border-card, rgba(27, 26, 34, 0.07));
    border-radius: var(--motiva-radius-sm, 12px);
    background: var(--motiva-surface-solid, #fff);
}

.uiw-vdetail-title[b-z8wmvxjnx8] {
    margin: 0 0 4px;
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.3;
    color: var(--motiva-text-muted, #6B6779);
}

.uiw-vdetail-title--error[b-z8wmvxjnx8] { color: var(--motiva-color-rose-ink, #C42B52); }

/* A second block gets its air from the first, not from a rule. */
.uiw-vdetail-list + .uiw-vdetail-title[b-z8wmvxjnx8] { margin-block-start: 9px; }

.uiw-vdetail-list[b-z8wmvxjnx8] {
    margin: 0;
    padding-inline-start: 16px;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.55;
    color: var(--motiva-text-secondary, #4A4657);
}

/* Red is reserved for the entries that actually stop the row importing. */
.uiw-vdetail-list--error[b-z8wmvxjnx8] { color: var(--motiva-color-rose-ink, #C42B52); }

.uiw-vdetail-list li[b-z8wmvxjnx8] { margin: 0; }

/* Visually hidden, still read aloud — the chevron column's header. */
.uiw-sr[b-z8wmvxjnx8] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.uiw-chip[b-z8wmvxjnx8] {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-full, 999px);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.4;
    white-space: nowrap;
}

.uiw-chip--ok[b-z8wmvxjnx8] {
    background: var(--motiva-color-success-bg);
    color: var(--motiva-color-teal-ink, var(--motiva-color-teal));
}

/* An already-existing user is a fact to resolve, not a fault — so it takes the
   brand edge (white paper, gradient rule) rather than a warning colour. */
.uiw-chip--dup[b-z8wmvxjnx8] {
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary, #1B1A22);
}

.uiw-chip--error[b-z8wmvxjnx8] {
    background: var(--motiva-color-danger-bg);
    color: var(--motiva-color-rose-ink, #C42B52);
}

/* ── 4. Duplicates ───────────────────────────────────────── */
.uiw-bulk[b-z8wmvxjnx8] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.uiw-bulk-label[b-z8wmvxjnx8] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #6B6779);
    margin-inline-end: 2px;
}

.uiw-bulk-btn[b-z8wmvxjnx8],
.uiw-dup-btn[b-z8wmvxjnx8] {
    padding: 6px 12px;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, rgba(27, 26, 34, 0.07));
    font-family: inherit;
    font-size: var(--motiva-font-size-control, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-secondary, #4A4657);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.uiw-bulk-btn:hover[b-z8wmvxjnx8],
.uiw-dup-btn:hover[b-z8wmvxjnx8] { border-color: var(--motiva-border-strong, rgba(27, 26, 34, 0.12)); }

/* THE CHOSEN OPTION IS THE BRAND EDGE — the same treatment the toolbar's
   applied filter uses, and for the same reason: a selected control is white
   paper with the signature gradient as its rule, never a violet fill. */
.uiw-bulk-btn--on[b-z8wmvxjnx8],
.uiw-bulk-btn--on:hover[b-z8wmvxjnx8],
.uiw-dup-btn--on[b-z8wmvxjnx8],
.uiw-dup-btn--on:hover[b-z8wmvxjnx8] {
    background: var(--motiva-tag-brand-surface);
    border-color: transparent;
    color: var(--motiva-text-primary, #1B1A22);
    font-weight: var(--motiva-font-weight-semibold, 600);
}

/* Replace is the one destructive choice on this screen, so ONLY its selected
   state is rose — an unselected "החלפה" is still just an option. */
.uiw-dup-btn--danger.uiw-dup-btn--on[b-z8wmvxjnx8],
.uiw-dup-btn--danger.uiw-dup-btn--on:hover[b-z8wmvxjnx8] {
    background: var(--motiva-color-danger-bg);
    border-color: color-mix(in srgb, var(--motiva-color-rose) 30%, transparent);
    color: var(--motiva-color-rose-ink, #C42B52);
}

.uiw-bulk-btn:focus-visible[b-z8wmvxjnx8],
.uiw-dup-btn:focus-visible[b-z8wmvxjnx8] {
    outline: 2px solid var(--motiva-color-focus-ring, #6D28F5);
    outline-offset: 2px;
}

.uiw-duplist[b-z8wmvxjnx8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 340px;
    overflow-y: auto;
    padding-inline-end: 2px;
}

.uiw-dup[b-z8wmvxjnx8] {
    border-radius: var(--motiva-radius-md, 16px);
    border: 1px solid var(--motiva-border-card, rgba(27, 26, 34, 0.07));
    background: var(--motiva-surface-primary, #fff);
    overflow: hidden;
}

/* A row set to REPLACE is marked at the card level too, so the destructive
   choice is visible while scrolling past it and not only inside the diff. */
.uiw-dup--danger[b-z8wmvxjnx8] {
    border-color: color-mix(in srgb, var(--motiva-color-rose) 28%, transparent);
}

.uiw-dup-head[b-z8wmvxjnx8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 9px 12px;
    background: var(--motiva-surface-secondary, #FBFBFD);
    border-bottom: 1px solid var(--motiva-border-subtle, rgba(27, 26, 34, 0.06));
}

.uiw-dup-id[b-z8wmvxjnx8] {
    display: flex;
    align-items: baseline;
    gap: 9px;
    min-width: 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
}

.uiw-dup-actions[b-z8wmvxjnx8] { display: flex; gap: 6px; flex-wrap: wrap; }

.uiw-dup-body[b-z8wmvxjnx8] { padding: 8px 12px 10px; }

.uiw-dup-empty[b-z8wmvxjnx8] {
    margin: 0;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #6B6779);
}

.uiw-difftable[b-z8wmvxjnx8] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--motiva-font-size-caption, 12px);
}

.uiw-difftable th[b-z8wmvxjnx8] {
    padding: 0 8px 5px;
    text-align: start;
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-subtle, #9B96A8);
    white-space: nowrap;
}

.uiw-difftable td[b-z8wmvxjnx8] {
    padding: 5px 8px;
    border-top: 1px solid var(--motiva-border-subtle, rgba(27, 26, 34, 0.06));
    vertical-align: middle;
}

.uiw-difftable td:first-child[b-z8wmvxjnx8] { width: 92px; white-space: nowrap; }

.uiw-diff--fill    td[b-z8wmvxjnx8] { background: var(--motiva-color-success-bg); }
.uiw-diff--replace td[b-z8wmvxjnx8] { background: var(--motiva-color-danger-bg); }

.uiw-diff-tag[b-z8wmvxjnx8] {
    margin-inline-start: 7px;
    padding: 2px 7px;
    border-radius: var(--motiva-radius-full, 999px);
    font-size: var(--motiva-font-size-caption, 10px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.5;
    white-space: nowrap;
}

.uiw-diff-tag--fill[b-z8wmvxjnx8] {
    background: var(--motiva-color-success-bg);
    color: var(--motiva-color-teal-ink, var(--motiva-color-teal));
}

.uiw-diff-tag--replace[b-z8wmvxjnx8] {
    background: var(--motiva-color-danger-bg);
    color: var(--motiva-color-rose-ink, #C42B52);
}

/* ── 5. Review / result summary ──────────────────────────── */
.uiw-summary[b-z8wmvxjnx8] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: var(--motiva-radius-md, 16px);
    border: 1px solid var(--motiva-border-card, rgba(27, 26, 34, 0.07));
    overflow: hidden;
}

.uiw-sum[b-z8wmvxjnx8] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 14px;
    background: var(--motiva-surface-primary, #fff);
    border-bottom: 1px solid var(--motiva-border-subtle, rgba(27, 26, 34, 0.06));
}

.uiw-sum:last-child[b-z8wmvxjnx8] { border-bottom: 0; }

.uiw-sum-n[b-z8wmvxjnx8] {
    flex: 0 0 auto;
    min-width: 28px;
    font-size: var(--motiva-font-size-h3, 17px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1;
    color: var(--motiva-text-primary, #1B1A22);
    font-variant-numeric: tabular-nums;
}

.uiw-sum-t[b-z8wmvxjnx8] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-secondary, #4A4657);
}

.uiw-sum--ok     .uiw-sum-n[b-z8wmvxjnx8] { color: var(--motiva-color-teal-ink, var(--motiva-color-teal)); }
.uiw-sum--danger .uiw-sum-n[b-z8wmvxjnx8],
.uiw-sum--error  .uiw-sum-n[b-z8wmvxjnx8] { color: var(--motiva-color-rose-ink, #C42B52); }

/* ── Running ─────────────────────────────────────────────── */
.uiw-run-title[b-z8wmvxjnx8] {
    margin: 0;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
}

.uiw-run-count[b-z8wmvxjnx8] {
    margin: 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #6B6779);
    font-variant-numeric: tabular-nums;
}

.uiw-progress[b-z8wmvxjnx8] {
    width: min(320px, 100%);
    height: 6px;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-surface-hover, rgba(27, 26, 34, 0.035));
    overflow: hidden;
}

.uiw-progress-bar[b-z8wmvxjnx8] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--motiva-gradient-signature);
    transition: width var(--motiva-motion-duration-standard, 200ms) var(--motiva-motion-easing-standard, ease-out);
}

.uiw-busy[b-z8wmvxjnx8] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #6B6779);
}

.uiw-spinner[b-z8wmvxjnx8] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    border: 2px solid var(--motiva-color-brand-bg);
    border-top-color: var(--motiva-color-violet, #6D28F5);
    border-radius: 50%;
    animation: uiw-spin-b-z8wmvxjnx8 0.7s linear infinite;
}

.uiw-spinner--lg[b-z8wmvxjnx8] { width: 26px; height: 26px; border-width: 2.5px; }

@keyframes uiw-spin-b-z8wmvxjnx8 { to { transform: rotate(360deg); } }

/* ── Footer ──────────────────────────────────────────────── */
.uiw-footer[b-z8wmvxjnx8] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.uiw-footer-gap[b-z8wmvxjnx8] { flex: 1 1 auto; }

.uiw-btn[b-z8wmvxjnx8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--motiva-control-height-md, 38px);
    padding: 0 16px;
    border: 0;
    border-radius: var(--motiva-radius-sm, 12px);
    font-family: inherit;
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.uiw-btn-ghost[b-z8wmvxjnx8] {
    background: none;
    color: var(--motiva-text-secondary, #4A4657);
    font-weight: var(--motiva-font-weight-medium, 500);
}

.uiw-btn-ghost:hover[b-z8wmvxjnx8] { background: var(--motiva-surface-hover, rgba(27, 26, 34, 0.035)); }

/* Fill/hover/press come from the shared .motiva-cta. */
.uiw-btn-primary:disabled[b-z8wmvxjnx8] { opacity: 0.5; cursor: default; }

.uiw-btn:focus-visible[b-z8wmvxjnx8] {
    outline: 2px solid var(--motiva-color-focus-ring, #6D28F5);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .uiw-spinner[b-z8wmvxjnx8] { animation-duration: 2.4s; }
    .uiw-progress-bar[b-z8wmvxjnx8],
    .uiw-tip[b-z8wmvxjnx8]::after,
    .uiw-drop[b-z8wmvxjnx8],
    .uiw-bulk-btn[b-z8wmvxjnx8],
    .uiw-dup-btn[b-z8wmvxjnx8] { transition: none; }
}

/* ── Narrow ──────────────────────────────────────────────── */
@media (max-width: 760px) {
    .uiw-maprow[b-z8wmvxjnx8] { grid-template-columns: 1fr; gap: 6px; }
    .uiw-dup-head[b-z8wmvxjnx8] { align-items: flex-start; }
}
/* /Pages/Assignments/AssignmentFormModal.razor.rz.scp.css */
/* ============================================================
   AssignmentFormModal — טופס שיבוץ (read-only submitted form)
   Prefix: afm-

   ALMOST NOTHING LIVES HERE ANY MORE
   ──────────────────────────────────
   The header stamp, the panels, the preference cards, the members, the
   strength tags and the notes block are all drawn from
   motiva-assignment-surface.css (`asgn-`), the same sheet
   TeamAssignmentWorkspace reads. That is deliberate: this viewer and the
   decision workspace describe one cohort, and they used to describe it in
   two dialects — two rank pills, two member rows, two ways of saying
   "פנוי" — which made moving between them feel like moving between two
   products. What is left in this file is only what belongs to THIS modal
   and nothing else: its body rhythm and its footer button.

   The shell (overlay, dialog, header row, footer rule) belongs to MModal
   and is NOT restyled here.

   WHAT THIS FILE MUST NEVER GROW
   ──────────────────────────────
   A score, a recommendation, an assign control. Sharing a visual language
   with the workspace is what makes the difference in CONTENT legible: the
   same preference card appears on both surfaces, and only one of them
   carries a match score and a button. Add either here and the two screens
   stop meaning different things.

   Tokens: motiva-tokens.css.
   ============================================================ */

/* ── Body ────────────────────────────────────────────────────
   Panels, read top to bottom: what they asked for, who they are, what
   they wrote. The gap is wider than the workspace's because there is no
   second column here competing for the eye. */
.afm-body[b-xbawcno36m] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-block-end: 4px;
}

/* ── Footer button ───────────────────────────────────────────
   The footer ROW is MModal's; this is the one control inside it. Same
   metrics as the Assignments page's row buttons. */
.afm-btn[b-xbawcno36m] {
    height: 34px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: inherit;
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.afm-btn:focus-visible[b-xbawcno36m] {
    outline: 2px solid var(--motiva-color-violet, #4F46E5);
    outline-offset: 2px;
}
/* /Pages/Assignments/AssignmentsPage.razor.rz.scp.css */
/* ============================================================
   AssignmentsPage — שיבוצים (Admin)
   Prefix: ap-

   Visual source:
       Client/Pages/Management/Users/UsersManagement.razor.css   (um-)
       Client/Pages/Management/Milestones/MilestonesManagement.razor.css (ms-)

   Those two ARE the finished Admin language, so this file is the same
   stylesheet applied to a third set of cells: same page shell, header
   rhythm, toolbar, popup-menu recipe, table treatment and status
   vocabulary. Assignments must not become a fourth product.

   Design tokens: motiva-tokens.css. The page renders inside the canvas
   shell (.motiva .motiva-final .motiva-lecturer from AppLayout), so every
   --motiva-* token already resolves to the finished design's value — 18px
   card radius, 38px controls, the warm ink ramp, violet/teal/rose. The
   var() fallbacks exist only so the page still renders sanely outside it.

   The previous build was written against the legacy --g-* ramp and against
   a two-column card board that no longer exists, which is why this file is
   replaced rather than patched.

   Layout:
       header   (back · h1 · info · summary  ·  copy-link + publish CTA)
       ↓ 14px
       mode bar (segmented switch  ·  demo chip + publish state)
       ↓ 14px
       toolbar  (search · filter pill · clear · count)
       ↓ 14px
       MDataTable, full canvas width, with an expandable detail row
   ============================================================ */

/* ── The page container ──────────────────────────────────────
   WIDTH IS THE SHELL'S, NOT THIS PAGE'S — the same arrangement /requests
   uses, and the reason the two now sit on one content grid.

   This used to cap itself at `max-width: 1240px; margin-inline: auto`. Inside
   the canvas shell — which already insets every page by
   --motiva-canvas-padding-inline (28px) — that second, narrower cap left the
   queue floating in ~90px of dead space per side while /requests, /learning
   and the rest ran to the shell's own gutters. Two different content widths in
   one product, and the operational screen was the narrow one.

   `.rqw-page` (motiva-request-workspace.css) states no width at all: it fills
   `.app-content` and lets the shell own the margin. This does the same, so the
   two pages share ONE gutter value and it is declared in ONE place — change the
   shell token and both follow.

   NOT copied from .rqw-page: its `flex: 1; min-height: 0; contain: size`. Those
   make the Requests split a viewport-height workspace with its own internal
   scrollers; this page scrolls normally and would have its height crushed by
   them. Only the horizontal behaviour is shared, because only the horizontal
   behaviour was the complaint.

   WHAT THE CAP WAS FOR, since it is gone. שיבוצים קיימים is
   `table-layout: fixed`, so its columns divide whatever width the surface is
   given: the 1240 ceiling was there to stop a very wide monitor pulling a
   team's name and its publish state to opposite ends of a row with nothing
   between them. That risk is real and it is now the shell's to answer, the same
   way it answers it for /requests, /learning and every other page that runs to
   the gutters. If a 2560 screen ever does look thin, the fix belongs on the
   shell's content boundary — where every page would get it — and not back here
   as one screen's private ceiling. */
.ap-page[b-cgg0mczthy] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
    padding-block-end: 40px;
}

/* ── Header ──────────────────────────────────────────────────
   NO SUBTITLE. The mode switch below states what the page is about more
   precisely than a sentence did, and the summary tag carries the counts.

   The title/back/summary composition now comes from the shared white
   MPageHeaderCard (Core scale); only the Actions cluster's own layout is
   this page's, kept here as the header card's Actions slot content. */
.ap-head-actions[b-cgg0mczthy] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* MCopyLinkAction renders its own root, which carries ITS isolation
   attribute — hence ::deep. Capped so a long form label cannot push the
   page's one primary off the header row. */
.ap-head-actions[b-cgg0mczthy]  .ap-copy {
    max-width: 340px;
}

/* The search now sits in the header's ROW 1 Actions slot (physical top-left,
   aligned with the title). The page's assignment actions occupy the header's
   second row on their own. */
.ap-header-search[b-cgg0mczthy] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* MSearchField renders its own root (::deep). Compact by intent — a stated
   width is required or the wrapper collapses to ~190px; never full width. */
.ap-header-search[b-cgg0mczthy]  .ap-search {
    width: 300px;
    max-width: 320px;
}

/* ── Buttons ─────────────────────────────────────────────────
   One primary on the page: פרסום שיבוצים. Gradient, radius, hover and
   press all come from the shared .motiva-cta in motiva-base.css —
   everything here is geometry, per that file's contract. */
.ap-btn-primary[b-cgg0mczthy] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    padding: 0 18px;
    height: var(--motiva-control-height-md, 38px);
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.ap-btn-primary:disabled[b-cgg0mczthy] { opacity: 0.45; cursor: default; }

/* The header's secondary act. Outlined, never gradient: פרסום שיבוצים is the
   page's one primary, and a second filled button beside it would make the
   header ask two questions at once. Same 38px control height so the three
   header controls sit on one baseline. */
.ap-btn-ghost[b-cgg0mczthy] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    height: var(--motiva-control-height-md, 38px);
    border: 1px solid var(--motiva-border-strong, rgba(26, 24, 32, 0.16));
    border-radius: var(--motiva-radius-sm, 10px);
    background: #fff;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease;
}

.ap-btn-ghost:hover[b-cgg0mczthy] {
    border-color: var(--motiva-color-violet, #4F46E5);
    color: var(--motiva-color-violet, #4F46E5);
}

.ap-btn-ghost:focus-visible[b-cgg0mczthy] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* The row-level action. Smaller than the page primary on purpose: a table
   with twenty of these must not have twenty page-sized CTAs in it. */
.ap-btn-row[b-cgg0mczthy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    padding: 0 13px;
    height: 30px;
    border-radius: var(--motiva-radius-full, 999px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.ap-btn-row:disabled[b-cgg0mczthy] { opacity: 0.45; cursor: default; }

/* Paper alternative — used where there is no recommendation to accept, so
   the only honest action is "open it and choose". */
.ap-btn-row--ghost[b-cgg0mczthy] {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    color: var(--motiva-text-primary, #1A1820);
}

.ap-btn-row--ghost:hover[b-cgg0mczthy] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 28%, transparent);
}

/* Taking a project off another team is not the same act as filling an empty
   one. Rose, because it displaces someone — and it still routes through the
   confirmation, never straight to force:true. */
.ap-btn-row--warn[b-cgg0mczthy] {
    background: color-mix(in srgb, var(--motiva-color-rose, #E11D62) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--motiva-color-rose, #E11D62) 26%, transparent);
    color: var(--motiva-color-rose-ink, #B23256);
}

.ap-btn-row--warn:hover[b-cgg0mczthy] {
    background: color-mix(in srgb, var(--motiva-color-rose, #E11D62) 13%, transparent);
}

.ap-btn-primary:focus-visible[b-cgg0mczthy],
.ap-btn-row:focus-visible[b-cgg0mczthy] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* ── Mode bar ────────────────────────────────────────────────
   The compact segmented switch (MFilterTabs) and, at the far end, the two
   facts that are true across BOTH modes: whether this is demo data, and
   where publishing stands. They belong here rather than in a strip of
   their own — one line of page state, not a second header. */
.ap-modebar[b-cgg0mczthy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 0 2px;
}

.ap-modes[b-cgg0mczthy] { min-width: 0; }

.ap-modebar-end[b-cgg0mczthy] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Demo chip — the brand EDGE, so it reads as a system annotation rather
   than as a warning about the user's data. It is never silent: if the page
   is inventing rows, it says so on the same line as the switch. */
.ap-demo[b-cgg0mczthy] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-tag-brand-surface);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    cursor: pointer;
}

/* The way OUT of demo mode rides the chip that announced it, so the two are
   never separated: whatever tells you the rows are invented is also what puts
   the real ones back. */
.ap-demo-off[b-cgg0mczthy] {
    padding-inline-start: 8px;
    border-inline-start: 1px solid color-mix(in srgb, var(--motiva-text-primary, #1A1820) 12%, transparent);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-color-violet, #4F46E5);
}

/* The way IN — a real white button with the Motiva gradient OUTLINE. Same
   recipe as the demo chip and the applied filter pill: `--motiva-tag-brand-surface`
   (white paper padding-box under the signature gradient in the border-box) shown
   through a transparent border, at the approved 999px button radius. Not a plain
   grey pill and not guessed — it reuses the product's one gradient-edge token. */
.ap-demo-on[b-cgg0mczthy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-tag-brand-surface);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
    white-space: nowrap;
    cursor: pointer;
    transition: filter var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

/* Same hover as the applied filter pill, so the two gradient-edge controls on
   this page behave identically. */
.ap-demo-on:hover[b-cgg0mczthy] { filter: brightness(0.99) saturate(1.08); text-decoration: none; }

.ap-demo:focus-visible[b-cgg0mczthy],
.ap-demo-on:focus-visible[b-cgg0mczthy] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

.ap-demo-dot[b-cgg0mczthy] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    /* Solid violet, not the gradient: below ~12px the sweep renders as its
       blue midpoint and stops reading as the brand. */
    background: var(--motiva-color-violet, #4F46E5);
}

/* Publish state — dot + text, the same status vocabulary as the table's
   own state cells, so "טיוטה" means one thing on this page. */
.ap-pubstate[b-cgg0mczthy] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
}

.ap-pubstate--live[b-cgg0mczthy]  { color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 88%, #000); }

/* Informational, not brand. "N שיבוצים בטיוטה — טרם פורסמו" is a statement
   about where things stand; in violet it read as a link or a call to action
   sitting next to the page's actual primary. Secondary ink says the same
   sentence without asking to be pressed. The dot is `background: currentColor`
   so it follows — it stays a status dot, it stops being a brand mark. */
.ap-pubstate--draft[b-cgg0mczthy] { color: var(--motiva-text-secondary, #57525F); }

.ap-pubstate--none[b-cgg0mczthy]  { color: var(--motiva-text-muted, #8B8698); }

/* ── Toast ───────────────────────────────────────────────────
   One line, dismissible, in the page flow rather than floating: the result
   of an action belongs above the table the action changed. */
.ap-toast[b-cgg0mczthy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--motiva-radius-sm, 12px);
    background: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 22%, transparent);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.3;
    color: var(--motiva-text-primary, #1A1820);
}

.ap-toast--error[b-cgg0mczthy] {
    background: color-mix(in srgb, var(--motiva-color-rose, #E11D62) 7%, #fff);
    border-color: color-mix(in srgb, var(--motiva-color-rose, #E11D62) 24%, transparent);
    color: var(--motiva-color-rose-ink, #B23256);
}

.ap-toast-x[b-cgg0mczthy] {
    margin-inline-start: auto;
    border: 0;
    background: none;
    font-size: var(--motiva-font-size-h3, 18px);
    line-height: 1;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
}

.ap-toast-x:hover[b-cgg0mczthy] { opacity: 1; }

/* ── Toolbar ─────────────────────────────────────────────────
   align-items: stretch so the pills adopt whatever height the search line
   resolves to — the row is aligned by construction. */
.ap-toolbar[b-cgg0mczthy] {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 2px;
}

/* ::deep because MSearchField renders its own root. Without a stated width
   the wrapper collapses to ~190px regardless of flex-basis. */
.ap-toolbar[b-cgg0mczthy]  .ap-search {
    flex: 1 1 320px;
    width: 320px;
    max-width: 440px;
}

.ap-filter[b-cgg0mczthy],
.ap-actions[b-cgg0mczthy] {
    position: relative;
    display: flex;
}

/* Filter pill — "name: value ⌄". The label stays quiet and the value
   carries the weight, so the row scans as answers, not questions. */
.ap-filter-btn[b-cgg0mczthy] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 15px;
    border-radius: var(--motiva-radius-full, 999px);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    color: var(--motiva-text-primary, #1A1820);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.ap-filter-btn:hover[b-cgg0mczthy] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 22%, transparent);
}

/* Applied filter — the brand EDGE, not a violet wash. Same token every
   other Admin toolbar uses; geometry is untouched so nothing moves. */
.ap-filter-btn--on[b-cgg0mczthy] {
    background: var(--motiva-tag-brand-surface);
    border-color: transparent;
    color: var(--motiva-text-primary, #1A1820);
}

.ap-filter-btn--on:hover[b-cgg0mczthy] {
    border-color: transparent;
    filter: brightness(0.99) saturate(1.08);
}

.ap-filter-btn--on .ap-filter-name[b-cgg0mczthy] { color: var(--motiva-text-muted, #8B8698); }

.ap-filter-name[b-cgg0mczthy] {
    font-size: var(--motiva-font-size-control, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #8B8698);
}

.ap-filter-value[b-cgg0mczthy] {
    font-size: var(--motiva-font-size-control, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
}

.ap-chev[b-cgg0mczthy] {
    color: var(--motiva-text-muted, #8B8698);
    transition: transform var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.ap-chev--open[b-cgg0mczthy] { transform: rotate(180deg); }

.ap-clear[b-cgg0mczthy] {
    align-self: center;
    padding: 8px 4px;
    border: 0;
    background: none;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-color-violet, #4F46E5);
    white-space: nowrap;
    cursor: pointer;
}

.ap-clear:hover[b-cgg0mczthy] { text-decoration: underline; }

.ap-result[b-cgg0mczthy] {
    align-self: center;
    margin-inline-start: auto;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
}

.ap-filter-btn:focus-visible[b-cgg0mczthy],
.ap-clear:focus-visible[b-cgg0mczthy] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* ── Popup menus — one recipe, three callers ─────────────────
   Filter menus, row kebabs and the mentor picker are the same object:
   a floating white card of compact rows. Declared once so they cannot drift. */
.ap-menu[b-cgg0mczthy] {
    position: absolute;
    top: calc(100% + 6px);
    z-index: var(--motiva-z-dropdown, 500);
    min-width: 180px;
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
    border-radius: var(--motiva-radius-md, 14px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    box-shadow: var(--motiva-shadow-md, 0 16px 36px rgba(30, 20, 60, 0.14));
}

/* Anchored to the reading start of its trigger, logically — an LTR build
   needs no second rule. */
.ap-menu--filter[b-cgg0mczthy] { inset-inline-start: 0; }

/* A row menu hangs from the reading END of the row, which in RTL is the
   physical left. inset-inline-end:0 keeps it inside the table instead of
   pushing a horizontal scrollbar onto the page. */
.ap-menu--row[b-cgg0mczthy] {
    inset-inline-end: 0;
    min-width: 190px;
}

.ap-menu-item[b-cgg0mczthy] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--motiva-radius-sm, 10px);
    background: none;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.2;
    text-align: start;
    color: var(--motiva-text-primary, #1A1820);
    cursor: pointer;
}

.ap-menu-item:hover:not(:disabled)[b-cgg0mczthy] { background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035)); }
.ap-menu-item:disabled[b-cgg0mczthy] { opacity: 0.45; cursor: default; }

.ap-menu-item:focus-visible[b-cgg0mczthy] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: -2px;
}

.ap-menu-item-label[b-cgg0mczthy] { flex: 1 1 auto; min-width: 0; }
.ap-menu-item--on[b-cgg0mczthy]   { font-weight: var(--motiva-font-weight-semibold, 600); }
.ap-menu-check[b-cgg0mczthy]      { color: var(--motiva-color-violet, #4F46E5); flex: 0 0 auto; }

/* The one destructive item in the product's menus. Rose ink only — a
   filled red row in a six-item menu would out-shout everything above it. */
.ap-menu-item--danger[b-cgg0mczthy] { color: var(--motiva-color-rose-ink, #B23256); }

.ap-menu-empty[b-cgg0mczthy] {
    padding: 10px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    line-height: 1.3;
    color: var(--motiva-text-muted, #8B8698);
}

/* ============================================================
   TABLES
   Surface, head rhythm, dividers and hover come from MDataTable.
   Everything below is what an Assignments cell specifically contains.
   ============================================================ */

/* Fixed columns. The two text columns (team / preferences on view 1,
   project / team on view 2) carry no width and share the remainder, so the
   table widens into the canvas instead of capping itself. */
/* Percentages for the two columns that hold the sentence — a project name
   runs to sixty characters and has to be allowed to use the room — and
   PIXELS for the three that hold a word each. Fixed pixels are the point:
   "משובץ" needs 104px on any monitor, and a percentage would hand it 260
   on a wide one and put a desert between the mentor chips and the kebab. */
.ap-col-team[b-cgg0mczthy]    { width: 30%;   }
.ap-col-project[b-cgg0mczthy] { width: 34%;   }
.ap-col-mentors[b-cgg0mczthy] { width: 210px; }
.ap-col-status[b-cgg0mczthy]  { width: 104px; }
.ap-col-pub[b-cgg0mczthy]     { width: 104px; }
.ap-col-kebab[b-cgg0mczthy]   { width: 46px;  }

/* ── Identity cells ──────────────────────────────────────────  */
/* The flex row goes INSIDE the cell, never on the <td> itself: a table cell
   with display:flex drops out of the table layout algorithm, and the columns
   after it slide one position left. Harmless while these two classes lived in
   two different tables; the moment both appear in one row, the row breaks. */
.ap-cell-team[b-cgg0mczthy],
.ap-cell-project[b-cgg0mczthy] { min-width: 0; }

.ap-cellflex[b-cgg0mczthy] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ap-identity[b-cgg0mczthy] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ap-name[b-cgg0mczthy] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.2;
    color: var(--motiva-text-primary, #1A1820);
}

.ap-sub[b-cgg0mczthy] {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.2;
    color: var(--motiva-text-muted, #8B8698);
}

.ap-sep[b-cgg0mczthy] { color: var(--motiva-text-faint, #B4AFC0); }

/* A tint of the signature sweep, not the sweep itself — at 32px a full
   violet→teal gradient would make every row shout. */
.ap-avatar[b-cgg0mczthy] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background:
        linear-gradient(140deg,
            color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 12%, transparent),
            color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 12%, transparent)),
        var(--motiva-surface-primary, #fff);
    border: 1px solid color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 12%, transparent);
    font-size: 11.5px;
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
    user-select: none;
}

.ap-avatar--sm[b-cgg0mczthy] { width: 26px; height: 26px; font-size: 10.5px; }

/* The expand affordance. Quiet until the row is open or hovered — a column
   of dark chevrons would compete with the team names beside them. */
.ap-cell-quiet[b-cgg0mczthy] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.2;
    white-space: nowrap;
    color: var(--motiva-text-secondary, #5B5568);
}

/* The catalogue number is an identifier, not a value — quiet, tabular, and
   always ahead of the name it belongs to. */
.ap-num[b-cgg0mczthy] {
    flex: 0 0 auto;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-text-faint, #B4AFC0);
    font-variant-numeric: tabular-nums;
}

.ap-type[b-cgg0mczthy] {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035));
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
}

/* ── Preferences ─────────────────────────────────────────────
   A ranked chip: the rank disc is the emphasis, the title is the value.
   Used by the queue card's preference list and by its own-project marker. */
.ap-pref[b-cgg0mczthy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 190px;
    padding: 3px 10px 3px 4px;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035));
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
}

/* padding is asymmetric above because the rank disc sits at the reading
   START; in RTL that is the physical right, so the shorthand's "left" pad
   is the one that must stay wide. Restated logically here so an LTR build
   is correct too. */
.ap-pref[b-cgg0mczthy] {
    padding-inline-start: 4px;
    padding-inline-end: 10px;
}

.ap-pref-rank[b-cgg0mczthy] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--motiva-surface-primary, #fff);
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1;
    color: var(--motiva-color-violet, #4F46E5);
    font-variant-numeric: tabular-nums;
}

/* A team that ranked nothing and proposed its own idea is a different KIND
   of row, not a lower-ranked one — brand edge, no rank disc. */
.ap-pref--own[b-cgg0mczthy] {
    padding-inline: 11px;
    background: var(--motiva-tag-brand-surface);
    border: 1px solid transparent;
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-text-primary, #1A1820);
}

/* ── Score ───────────────────────────────────────────────────
   The match score, in the three bands the whole feature shares (40 / 25).
   Drawn on the queue card beside the recommendation it qualifies. */
.ap-score[b-cgg0mczthy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 3px 8px;
    border-radius: var(--motiva-radius-full, 999px);
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ap-score--high[b-cgg0mczthy] {
    background: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 12%, transparent);
    color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 85%, #000);
}

.ap-score--mid[b-cgg0mczthy] {
    background: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 9%, transparent);
    color: var(--motiva-color-violet, #4F46E5);
}

.ap-score--low[b-cgg0mczthy] {
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035));
    color: var(--motiva-text-muted, #8B8698);
}

/* ── State ───────────────────────────────────────────────────
   Dot + text, no filled pill — three values down a column of twenty rows
   would become the loudest thing on the screen and say the least.

   The vocabulary, which is the same in both views and in the mode bar:
     none  — nothing has happened yet          (muted)
     draft — decided, not yet visible to them  (violet: the system's "in
             progress", never amber, which this product does not use here)
     live  — published, the students can see it (teal: completion) */
.ap-state[b-cgg0mczthy] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.2;
}

.ap-dot[b-cgg0mczthy] {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.ap-state--live[b-cgg0mczthy]  { color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 88%, #000); }
.ap-state--draft[b-cgg0mczthy] { color: var(--motiva-color-violet, #4F46E5); }
.ap-state--none[b-cgg0mczthy]  { color: var(--motiva-text-muted, #8B8698); }

/* ── Row actions ─────────────────────────────────────────────  */
.ap-cell-act[b-cgg0mczthy] { position: relative; }

/* An open menu must paint over the rows BELOW it. Every actions cell is
   positioned, so without this the next row's cell — later in tree order —
   paints on top of the popup. At most one menu is open at a time. */
.ap-page tr.m-dt-row-active .ap-cell-act[b-cgg0mczthy],
.ap-page tr.m-dt-row-active .ap-cell-mentors[b-cgg0mczthy] { z-index: 20; }

.ap-actions[b-cgg0mczthy] {
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.ap-kebab[b-cgg0mczthy] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--motiva-text-muted, #8B8698);
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.ap-kebab:hover[b-cgg0mczthy],
.ap-kebab--on[b-cgg0mczthy] {
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035));
    color: var(--motiva-text-primary, #1A1820);
}

.ap-kebab:focus-visible[b-cgg0mczthy] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 1px;
}

/* ── Mentors cell (view 2) ───────────────────────────────────
   Chips with a remove affordance, plus a picker. The picker is a menu
   rather than a select field per row: twenty dropdowns down a column read
   as twenty unfilled forms. */
.ap-cell-mentors[b-cgg0mczthy] { position: relative; }

.ap-mentors[b-cgg0mczthy] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ap-mentor[b-cgg0mczthy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding-inline: 10px 4px;
    height: 26px;
    border-radius: var(--motiva-radius-full, 999px);
    background: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 9%, transparent);
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 85%, #000);
    white-space: nowrap;
}

.ap-mentor-x[b-cgg0mczthy] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: none;
    font-size: var(--motiva-font-size-body, 14px);
    line-height: 1;
    color: inherit;
    opacity: 0.55;
    cursor: pointer;
}

.ap-mentor-x:hover:not(:disabled)[b-cgg0mczthy] { opacity: 1; background: rgba(255, 255, 255, 0.6); }
.ap-mentor-x:disabled[b-cgg0mczthy] { opacity: 0.3; cursor: default; }

.ap-mentor-add[b-cgg0mczthy] {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding-inline: 11px;
    border: 1px dashed var(--motiva-border-strong, rgba(26, 24, 32, 0.16));
    border-radius: var(--motiva-radius-full, 999px);
    background: none;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
    cursor: pointer;
    transition:
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.ap-mentor-add:hover:not(:disabled)[b-cgg0mczthy] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 40%, transparent);
    color: var(--motiva-color-violet, #4F46E5);
}

.ap-mentor-add:disabled[b-cgg0mczthy] { opacity: 0.45; cursor: default; }

/* ============================================================
   THE QUEUE — ממתינים לשיבוץ

   WHY A CARD LIST AND NOT A TABLE
   The five things read while triaging — who, what they asked for,
   what we suggest, how contested it is, whether it is free — are not
   five comparable values. Two of them are lists and one is a phrase
   with a number in it. Forcing them into cells is what made the old
   table need an expandable row to say anything real, and an expanded
   workspace inside a queue row serves neither scanning nor deciding.

   Each card is one team and one act. It is deliberately SHORT: three
   text blocks and two buttons, on one line at desktop width, so ten
   waiting teams are ten scannable lines rather than ten white sheets.
   ============================================================ */

.ap-queue[b-cgg0mczthy] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The blocks are sized by what they hold, not by an even split: identity
   and preferences are read, the recommendation is judged, the actions are
   fixed. A four-way equal grid gave the button column 25% of a 1600px
   canvas and left the recommendation cramped beside it. */
.ap-q[b-cgg0mczthy] {
    display: grid;
    grid-template-columns: minmax(190px, 1.05fr) minmax(190px, 1.15fr) minmax(190px, 1.1fr) auto;
    align-items: center;
    gap: 16px 22px;
    padding: 13px 16px;
    /* THE SHARED TILE SURFACE. The fill was already `#fff` — the literal, not
       the token — but the edge was an INSET ring at --motiva-radius-md, i.e.
       the same object as every other list card drawn with a different corner
       and no lift. Border + panel drop, at the tile radius. Only the queue row
       changes; `.ap-q--sample` below keeps its grey fill, because "this is
       demo data" is a state and states are allowed to differ. */
    border: 1px solid var(--motiva-panel-border, rgba(109, 40, 245, 0.08));
    border-radius: var(--motiva-radius-card, 18px);
    background: var(--motiva-panel-surface, #fff);
    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));
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.ap-q:hover[b-cgg0mczthy] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #6D28F5) 16%, transparent);
}

/* ── The card is the way in ──────────────────────────────────
   Two signals, both quiet: the pointer says the whole card acts, and the
   team's own name picks up the brand the way a link would. The ring that
   was already there does the rest — a card that lit up on hover would
   read as selected in a list where nothing is. */
.ap-q--clickable[b-cgg0mczthy] { cursor: pointer; }

.ap-q--clickable:hover .ap-name[b-cgg0mczthy] {
    color: var(--motiva-color-violet, #4F46E5);
}

.ap-q-team[b-cgg0mczthy] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* ── The inspection row ──────────────────────────────────────
   Subtle on purpose. This row is not a warning and not an error: it is a
   real-looking form that happens not to be one, and a loud treatment would
   make the queue look broken every time a lecturer opened it.

   A faint ink wash rather than a tinted surface — the --motiva-surface-*
   tokens are translucent and would pick up the canvas's violet radial, which
   would read as a brand state instead of as "this one is not real". Mixed
   against #fff so it stays opaque and hue-free. */
.ap-q--sample[b-cgg0mczthy] {
    background: color-mix(in srgb, var(--motiva-text-primary, #1A1820) 3.5%, #fff);
}

/* The name and its marking share one line, so the chip cannot be read as
   belonging to the members line below it. */
.ap-nameline[b-cgg0mczthy] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.ap-sample[b-cgg0mczthy] {
    flex: none;
    padding: 0 7px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--motiva-radius-full, 999px);
    background: color-mix(in srgb, var(--motiva-text-primary, #1A1820) 8%, #fff);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
    cursor: help;
}

/* ── A labelled block ────────────────────────────────────────
   The label is what lets three unlike things sit in one row without a
   header above them. It stays small and muted: it names the column, it
   is not part of the reading. */
.ap-q-block[b-cgg0mczthy] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.ap-q-label[b-cgg0mczthy] {
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--motiva-text-muted, #8B8698);
}

/* ── Preferences ─────────────────────────────────────────────  */
.ap-q-prefs[b-cgg0mczthy] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ap-q-pref[b-cgg0mczthy] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.ap-q-pref-name[b-cgg0mczthy] {
    overflow: hidden;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--motiva-text-secondary, #5B5568);
}

/* The conflict signal at scanning level — the ONE thing on this card
   that explains why the recommendation beside it may not be the team's
   first choice. Rose, because it is a real conflict; demand next to it
   stays neutral, because wanting a project is not one. */
.ap-q-taken[b-cgg0mczthy] {
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: var(--motiva-radius-pill, 999px);
    background: color-mix(in srgb, var(--motiva-color-rose, #E11D62) 9%, #fff);
    font-size: var(--motiva-font-size-caption, 10px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.4;
    white-space: nowrap;
    color: var(--motiva-color-rose-ink, #B23256);
}

/* ── The recommendation ──────────────────────────────────────  */
.ap-q-rec[b-cgg0mczthy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    min-width: 0;
}

.ap-q-rec-name[b-cgg0mczthy] {
    overflow: hidden;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--motiva-text-primary, #1A1820);
}

.ap-q-rec-meta[b-cgg0mczthy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}

/* Where the suggestion came from. A submitted preference and a project
   nobody asked for must never look alike, here least of all — this is
   the line that tells the lecturer whether the system is honouring the
   form or working around it. */
.ap-q-rank[b-cgg0mczthy] {
    unicode-bidi: isolate;
    padding: 1px 7px;
    border-radius: var(--motiva-radius-pill, 999px);
    background: var(--motiva-tag-brand-surface, rgba(79, 70, 229, 0.08));
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.4;
    white-space: nowrap;
    color: var(--motiva-color-violet, #4F46E5);
}

.ap-q-rank--ext[b-cgg0mczthy] {
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.045));
    color: var(--motiva-text-muted, #8B8698);
}

/* ── Actions ─────────────────────────────────────────────────
   Two, and only two: decide, or read what they submitted. Both are named
   for exactly where they go. */
.ap-q-act[b-cgg0mczthy] {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
}

/* ── Loading ─────────────────────────────────────────────────
   The queue has no table shell to carry MDataTable's loading row, so it
   says so itself, in the same voice. */
.ap-loading[b-cgg0mczthy] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 26px 4px;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #8B8698);
}

.ap-spinner[b-cgg0mczthy] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--motiva-border, rgba(26, 24, 32, 0.14));
    border-block-start-color: var(--motiva-color-violet, #4F46E5);
    border-radius: 50%;
    animation: ap-spin-b-cgg0mczthy 720ms linear infinite;
}

@keyframes ap-spin-b-cgg0mczthy { to { transform: rotate(360deg); } }
/* ── Shared quiet states ─────────────────────────────────────  */
.ap-none[b-cgg0mczthy] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.3;
    color: var(--motiva-text-faint, #B4AFC0);
}

p.ap-none[b-cgg0mczthy] { margin: 0; }

/* Visually hidden but announced — an unlabelled <th> is a gap for anyone
   navigating the table by column. */
.ap-sr[b-cgg0mczthy] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Responsive ──────────────────────────────────────────────
   The table is handled by MDataTable's own scroller below its breakpoint.
   What has to change here is the queue card: its four blocks are laid out
   on one line for scanning, and a narrow canvas cannot hold them side by
   side without turning every value into a two-word column. So they stack
   in reading order, and the actions go full width at the end. */
@media (max-width: 1180px) {
    .ap-q[b-cgg0mczthy] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    /* Identity keeps the whole first line — it is what the eye lands on. */
    .ap-q-team[b-cgg0mczthy]  { grid-column: 1 / -1; }
    .ap-q-act[b-cgg0mczthy]   { grid-column: 1 / -1; justify-self: stretch; }
    .ap-q-act > .ap-btn-row[b-cgg0mczthy] { flex: 1 1 0; }
}

@media (max-width: 860px) {
    .ap-modebar[b-cgg0mczthy] { align-items: flex-start; }

    /* The header search (now in the white header's second row) fills its
       wrapped line on a narrow canvas rather than staying pinned at 300px. */
    .ap-header-search[b-cgg0mczthy] { flex: 1 1 100%; }
    .ap-header-search[b-cgg0mczthy]  .ap-search { flex: 1 1 100%; width: 100%; max-width: none; }
    .ap-result[b-cgg0mczthy] { margin-inline-start: 0; }

    .ap-q[b-cgg0mczthy] { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .ap-q[b-cgg0mczthy],
    .ap-filter-btn[b-cgg0mczthy],
    .ap-chev[b-cgg0mczthy],
    .ap-kebab[b-cgg0mczthy],
    .ap-mentor-add[b-cgg0mczthy] { transition: none; }

    .ap-spinner[b-cgg0mczthy] { animation: none; }
}

/* ============================================================
   Clickable rows — שיבוצים קיימים

   The row IS the entry point: clicking anywhere on an assignment opens
   it. The kebab is left holding only the acts the row click cannot
   mean, which is why it stopped being the way in.

   Only rows this screen can actually open get the affordance. A synced
   project naming a team from another cycle stays inert, and looks it —
   MDataTable's own 3% hover still tracks it across the columns, but
   there is no pointer and no link colour promising something to click.
   ============================================================ */
.ap-page tr.ap-row--clickable[b-cgg0mczthy] { cursor: pointer; }

.ap-page tr.ap-row--clickable:hover .ap-name--link[b-cgg0mczthy],
.ap-rowlink:hover .ap-name--link[b-cgg0mczthy] {
    color: var(--motiva-color-violet, #4F46E5);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

/* The keyboard's copy of the row click. It has to be a <button> to be
   reachable and announced, and a button has to be undone to sit inside a
   table cell without becoming a control that looks like one. */
.ap-rowlink[b-cgg0mczthy] {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

.ap-rowlink:focus-visible[b-cgg0mczthy] {
    outline: 2px solid var(--motiva-color-violet, #4F46E5);
    outline-offset: 3px;
    border-radius: var(--motiva-radius-sm, 10px);
}

.ap-name--link[b-cgg0mczthy] { transition: color 130ms ease; }

/* ── Row rhythm ──────────────────────────────────────────────
   MDataTable's 11px suits a single-line row. Every row here carries a
   primary line over a secondary one (team over members, project over
   type), and at 11px those pairs sit as close to the NEXT row as to
   each other. Three more pixels is all it takes for the pair to read as
   one block. The selector goes through .m-dt-body to outspecify the
   primitive's own ::deep rule rather than racing it on bundle order. */
.ap-table .m-dt-body td[b-cgg0mczthy] {
    padding-block: 14px;
}
/* /Pages/Assignments/LecturerSubmissionsPage.razor.rz.scp.css */
/* ── LecturerSubmissionsPage — scoped styles (split workspace redesign) ────────
   Prefix: lsb-
   Design source: הגשות מרצה 318.png / הגשות ובקרה מרצה 318.pdf
   Split skeleton comes from motiva-request-workspace.css (rqw-* classes).
   This file owns only what is genuinely the submissions page's own chrome:
   the segmented bucket control, the row card structure, and the workspace body.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Page shell (overrides rqw-page defaults for this page) ─────────────── */
.lsb-page[b-wxz1k5zzdh] {
    /* rqw-page provides flex-col + contain:size + flex:1 — nothing more needed */
}

/* ── Page header ─────────────────────────────────────────────────────────── */
.lsb-h1[b-wxz1k5zzdh] {
    /* rqw-title carries the size — only gap-fill if needed */
}

/* ── Full-page loading ───────────────────────────────────────────────────── */
.lsb-full-loading[b-wxz1k5zzdh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 1;
    color: #9B96A8;
    font-size: var(--motiva-font-size-body, 14px);
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR — right panel
   ══════════════════════════════════════════════════════════ */

/* ── Segmented status selector ── */
.lsb-seg[b-wxz1k5zzdh] {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 14px 12px;
    padding: 3px;
    background: rgba(27, 26, 34, 0.05);
    border-radius: 999px;
    flex-shrink: 0;
}

.lsb-seg-btn[b-wxz1k5zzdh] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-family: inherit;
    font-size: var(--motiva-font-size-control);
    font-weight: 500;
    color: #6B6779;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.lsb-seg-btn:hover:not(.lsb-seg-active)[b-wxz1k5zzdh] {
    background: rgba(255, 255, 255, 0.5);
    color: #1B1A22;
}

.lsb-seg-active[b-wxz1k5zzdh] {
    background: #ffffff;
    color: #1B1A22;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(27, 26, 34, 0.12);
}

/* Count badges inside segmented control.
   The "לבדיקה" badge also carries .motiva-count (from motiva-base.css) which
   supplies the gradient background and ink colour — this class adds only the
   structural geometry that differs from the global recipe. */
.lsb-seg-badge[b-wxz1k5zzdh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    font-size: var(--motiva-font-size-count);
    font-weight: 700;
    line-height: 1;
}

.lsb-seg-badge-muted[b-wxz1k5zzdh] {
    background: rgba(27, 26, 34, 0.12);
    color: #6B6779;
}

.lsb-seg-active .lsb-seg-badge-muted[b-wxz1k5zzdh] {
    background: rgba(27, 26, 34, 0.10);
    color: #4A4657;
}

/* ── Team filter wrapper override ── */
.lsb-team-wrap[b-wxz1k5zzdh] {
    margin: 0 10px 8px;
}

/* ── List empty state ── */
.lsb-list-empty[b-wxz1k5zzdh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    color: #CDCAD8;
    font-size: var(--motiva-font-size-sm, 13px);
    text-align: center;
}

/* ── Submission row card ──────────────────────────────────────────────────────
   Uses rqw-row for the button structure; these classes handle the two inner
   lines: title + date / team · project.

   IT WAS THREE LINES. The first held the milestone tag and a coloured state
   phrase, and the title came second — so the eye met a chip before it met the
   thing it was scanning for. The milestone moved to the record header, which
   already prints it in full; the state phrase went with it, because a queue
   filtered to one bucket does not need every row to name that bucket. What is
   left is the shape the request queue beside it uses: one head line that the
   title flexes inside, one quiet line of context under it.                    */

/* Head line: the title at the reading end, the date chip pinned to the far
   LEFT. `space-between` plus `flex: 1` on the title is what keeps the chip on
   the same edge on every row whatever the title's length. */
.lsb-row-top[b-wxz1k5zzdh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* ── THE DATE CHIP ───────────────────────────────────────────────────────────
   GEOMETRY HERE, TONE IN THE THREE MODIFIERS BELOW. The box never changes size
   between them: the border is always declared, so a tone that paints it and a
   tone that does not occupy the same pixels and a list does not jitter as rows
   age past the threshold.

   `--motiva-radius-full` and the 11px face are the pill geometry and typography
   every other tag in the workspace uses. `tabular-nums` lines the dates up as a
   column down the queue's edge, which is what makes them scannable at all. */
.lsb-row-date[b-wxz1k5zzdh] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 1px 8px;
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-full);
    font-size: var(--motiva-font-size-caption);
    font-weight: 500;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* WAITING, AND NOT YET LATE — the product's informational tag, unmodified:
   white paper under the Motiva gradient edge. `--motiva-tag-brand-surface` is
   the single token behind `.motiva-tag`, MStatusBadge and every page-local
   pill, so this is the same recipe and not a second gradient. The edge is paid
   for out of the padding, which is why the border is transparent rather than
   absent. */
.lsb-row-date-fresh[b-wxz1k5zzdh] {
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
}

/* WAITING TOO LONG — rose, the system's one "this needs a person now"
   treatment, in the tokens that already carry it everywhere else
   (`--motiva-color-danger-bg` behind `--motiva-color-rose-ink`). No new colour
   is defined here and no word is added: the date is the message, and the tone
   is how loudly it is said.

   It is the ONLY loud thing in the queue, which is the condition the design
   system attaches to spending rose at all. */
.lsb-row-date-overdue[b-wxz1k5zzdh] {
    background: var(--motiva-color-danger-bg);
    color: var(--motiva-color-rose-ink);
    font-weight: var(--motiva-font-weight-semibold, 600);
}

/* AGE MEANS NOTHING HERE — a handled submission. The quiet outlined chip: white
   paper inside a hairline of the page's own ink, muted type, no hue. A wait
   that is over must not keep wearing the colour of a wait that is not, so this
   is what טופלו rows get however old they are. */
.lsb-row-date-neutral[b-wxz1k5zzdh] {
    border-color: rgba(27, 26, 34, 0.10);
    background: var(--motiva-surface-primary, #FFFFFF);
    color: var(--motiva-text-muted, #9B96A8);
}

.lsb-row-title[b-wxz1k5zzdh] {
    font-size: var(--motiva-font-size-item);
    font-weight: 700;
    line-height: 1.3;
    color: #1B1A22;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

/* Row meta: team · project */
.lsb-row-meta[b-wxz1k5zzdh] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--motiva-font-size-meta);
    font-weight: 400;
    color: #9B96A8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lsb-row-meta-sep[b-wxz1k5zzdh] {
    color: #CDCAD8;
}

/* ══════════════════════════════════════════════════════════
   MAIN WORKSPACE — left panel
   ══════════════════════════════════════════════════════════ */

/* ── Detail loading inside workspace ── */
.lsb-detail-loading[b-wxz1k5zzdh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 32px;
    color: #9B96A8;
    font-size: var(--motiva-font-size-body, 14px);
}

/* ── Workspace header ── */
/* TWO CHILDREN ON ONE ROW, not a stack. The identity keeps the reading end —
   the physical RIGHT under dir=rtl — and the badges take the opposite corner,
   the upper LEFT, as the row's second item aligned to its start edge.

   `align-items: flex-start` is what puts them at the TOP of that corner rather
   than centred against a two-line title. Nothing is positioned absolutely, so
   the badges cannot overlap a long title and the head's height still comes
   from its content. */
.lsb-ws-head[b-wxz1k5zzdh] {
    padding: 28px 32px 20px;
    border-bottom: 1px solid rgba(27, 26, 34, 0.05);

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

/* The flexing half. `min-width: 0` is what lets a long title and the submeta
   line wrap inside it instead of pushing the badges off the card. */
.lsb-ws-ident[b-wxz1k5zzdh] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Unchanged in every way that is visible on a badge — same 10px gap, same
   wrapping. The bottom margin went with the stack it used to separate from the
   title; the head's own flex gap does that job now. */
.lsb-ws-badges[b-wxz1k5zzdh] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Default tag: white paper under the Motiva gradient edge, dark ink.
   `--motiva-tag-brand-surface`, the product's one tag recipe. The edge is
   paid for out of the padding so the pill's outer box does not move. */
.lsb-ws-type-pill[b-wxz1k5zzdh] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 600;
    white-space: nowrap;
}

/* Workspace wait/status label */
.lsb-ws-wait[b-wxz1k5zzdh] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.lsb-ws-wait-attention[b-wxz1k5zzdh] {
    background: rgba(109, 40, 245, 0.08);
    color: #6D28F5;
}
.lsb-ws-wait-mentor[b-wxz1k5zzdh] {
    background: rgba(155, 150, 168, 0.10);
    color: #7C7889;
}
.lsb-ws-wait-done[b-wxz1k5zzdh] {
    background: rgba(15, 168, 194, 0.08);
    color: #0FA8C2;
}

.lsb-ws-title[b-wxz1k5zzdh] {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.025em;
    color: #1B1A22;
}

.lsb-ws-submeta[b-wxz1k5zzdh] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    color: #6B6779;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    line-height: 1.5;
}

/* Meta separators and labels */
.lsb-meta-sep[b-wxz1k5zzdh]       { color: #CDCAD8; margin: 0 1px; }
.lsb-meta-submitter[b-wxz1k5zzdh] { font-weight: 600; color: #4A4657; }
.lsb-meta-team[b-wxz1k5zzdh]      { color: #6B6779; }
.lsb-meta-project[b-wxz1k5zzdh]   { color: #6B6779; }
.lsb-meta-mentor[b-wxz1k5zzdh]    { color: #9B96A8; font-size: var(--motiva-font-size-sm, 13px); }

/* ── Workspace body ── */
.lsb-ws-body[b-wxz1k5zzdh] {
    padding: 24px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Section grouping inside body */
.lsb-ws-section[b-wxz1k5zzdh] {
    margin-bottom: 20px;
}

.lsb-ws-section-label[b-wxz1k5zzdh] {
    margin: 0 0 8px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9B96A8;
}

/* Description text */
.lsb-desc[b-wxz1k5zzdh] {
    margin: 0 0 20px;
    font-size: var(--motiva-font-size-lg, 15px);
    font-weight: 400;
    line-height: 1.7;
    color: #1B1A22;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ── Dates block ─────────────────────────────────────────────────────────── */
.lsb-dates-row[b-wxz1k5zzdh] {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.lsb-dates-inner[b-wxz1k5zzdh] {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 10px 18px;
    border-radius: 14px;
    background: rgba(109, 40, 245, .05);
}

.lsb-date-col[b-wxz1k5zzdh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.lsb-date-val[b-wxz1k5zzdh] {
    display: block;
    font: 700 17px / 1 Heebo, system-ui, sans-serif;
    letter-spacing: -.02em;
    color: #6B6779;
}

.lsb-date-val-waiting[b-wxz1k5zzdh] {
    color: #6D28F5;
}

.lsb-date-lbl[b-wxz1k5zzdh] {
    display: block;
    margin-top: 5px;
    font: 500 11.5px / 1 Heebo, system-ui, sans-serif;
    color: #9B96A8;
}

.lsb-date-sep[b-wxz1k5zzdh] {
    width: 1px;
    height: 26px;
    background: rgba(27, 26, 34, .08);
}

.lsb-file-link[b-wxz1k5zzdh] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 600 13px / 1 Heebo, system-ui, sans-serif;
    color: #4A4657;
    text-decoration: none;
    transition: color .15s;
}

.lsb-file-link:hover[b-wxz1k5zzdh] { color: #6D28F5; }

/* ── "לצוות", against the team's own name ────────────────────────────────────
   A LINK, NOT A BUTTON. It sits inside the identity line now, immediately after
   the words that name the team, so it has to read as a continuation of that
   line rather than as a control parked next to it: the same 13.5px line box as
   the meta text it follows, no fill, no border, no padding block of its own.

   `margin-inline-start` and NOT a left/right margin: this line is RTL and the
   action trails the team name, so the gap belongs on the logical start side —
   the physical LEFT here — and it stays correct if the line is ever read the
   other way. The `·` separators around it are the meta line's own; the action
   deliberately does not take one, because it belongs TO the team name rather
   than being another item beside it.

   Violet only on hover / focus, which is where the product puts a link's
   interactive state. At rest it is secondary ink, quieter than the team name it
   hangs off. */
.lsb-team-link[b-wxz1k5zzdh] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-inline-start: 8px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: inherit;
    color: var(--motiva-text-secondary, #4A4657);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s;
}

.lsb-team-link:hover[b-wxz1k5zzdh],
.lsb-team-link:focus-visible[b-wxz1k5zzdh] { color: var(--motiva-color-violet, #6D28F5); }

.lsb-team-link:focus-visible[b-wxz1k5zzdh] {
    outline: 2px solid var(--motiva-color-violet, #6D28F5);
    outline-offset: 2px;
    border-radius: var(--motiva-radius-sm, 6px);
}

/* ── Mentor feedback block ───────────────────────────────────────────────── */
.lsb-feedback-block[b-wxz1k5zzdh] {
    margin-bottom: 16px;
    border-radius: 16px;
    padding: 14px 18px;
    background: rgba(109, 40, 245, .06);
}

.lsb-feedback-by[b-wxz1k5zzdh] {
    margin: 0;
    font: 600 12.5px / 1 Heebo, system-ui, sans-serif;
    color: #6D28F5;
}

.lsb-feedback-text[b-wxz1k5zzdh] {
    margin: 8px 0 0;
    font: 500 14.5px / 1.6 Heebo, system-ui, sans-serif;
    color: #1B1A22;
}

/* ── Approved status display ── */
.lsb-decision-done[b-wxz1k5zzdh] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(15, 168, 194, 0.06);
    border: 1px solid rgba(15, 168, 194, 0.15);
    margin: 0 0 20px;
}

.lsb-decision-done-label[b-wxz1k5zzdh] { font-size: var(--motiva-font-size-sm, 13px); font-weight: 600; color: #6B6779; }
.lsb-decision-done-val[b-wxz1k5zzdh]   { font-size: var(--motiva-font-size-sm, 13px); font-weight: 700; color: #0FA8C2; }
.lsb-decision-done-src[b-wxz1k5zzdh]   { font-size: var(--motiva-font-size-caption, 12px); color: #9B96A8; }

/* With-mentor waiting state */
.lsb-decision-waiting[b-wxz1k5zzdh] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(109, 40, 245, 0.05);
    border: 1px solid rgba(109, 40, 245, 0.12);
    color: #7C5FBC;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: 500;
    line-height: 1.4;
    margin: 0 0 20px;
}

/* ── Decision / action row ───────────────────────────────────────────────── */
.lsb-decision-row[b-wxz1k5zzdh] {
    border-top: 1px solid rgba(27, 26, 34, .07);
    margin-top: 4px;
    padding-top: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.lsb-btn-outline[b-wxz1k5zzdh] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 18px;
    border-radius: 999px;
    border: 1.5px solid rgba(27, 26, 34, .12);
    background: transparent;
    color: #4A4657;
    font: 600 13px / 1 Heebo, system-ui, sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, color .15s;
}

.lsb-btn-outline:hover:not(:disabled)[b-wxz1k5zzdh] {
    border-color: rgba(27, 26, 34, .3);
    color: #1B1A22;
}

.lsb-btn-outline:disabled[b-wxz1k5zzdh] { opacity: .5; cursor: not-allowed; }

.lsb-note-input[b-wxz1k5zzdh] {
    flex: 1;
    min-width: 200px;
    border: 1px solid rgba(27, 26, 34, .1);
    border-radius: 999px;
    background: rgba(27, 26, 34, .02);
    font: 400 13px / 1 Heebo, system-ui, sans-serif;
    color: #1B1A22;
    padding: 11px 16px;
    outline: none;
    transition: border-color .15s;
}

.lsb-note-input:focus[b-wxz1k5zzdh] { border-color: rgba(109, 40, 245, .35); }
.lsb-note-input[b-wxz1k5zzdh]::placeholder { color: #9B96A8; }

.lsb-btn-approve[b-wxz1k5zzdh] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(to left, #6D28F5, #2E63E8 60%, #0FA8C2);
    color: #fff;
    font: 600 13.5px / 1 Heebo, system-ui, sans-serif;
    padding: 12px 22px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: filter .15s;
}

.lsb-btn-approve:hover:not(:disabled)[b-wxz1k5zzdh] { filter: brightness(1.08); }
.lsb-btn-approve:disabled[b-wxz1k5zzdh] { opacity: .5; cursor: not-allowed; }

/* ── Per-row action messages ─────────────────────────────────────────────── */
.lsb-row-msg[b-wxz1k5zzdh] {
    margin: 6px 0 0;
    font: 500 13px / 1 Heebo, system-ui, sans-serif;
}

.lsb-row-msg-ok[b-wxz1k5zzdh]    { color: #0F8FA6; }
.lsb-row-msg-error[b-wxz1k5zzdh] { color: #C42B52; }

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.lsb-spinner[b-wxz1k5zzdh] {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 2px solid rgba(27, 26, 34, 0.10);
    border-top-color: #6D28F5;
    border-radius: 50%;
    animation: lsb-spin-b-wxz1k5zzdh 0.7s linear infinite;
}

@keyframes lsb-spin-b-wxz1k5zzdh { to { transform: rotate(360deg); } }

/* ── History ─────────────────────────────────────────────────────────────── */
.lsb-hist-bar[b-wxz1k5zzdh] {
    display: flex;
    align-items: center;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid rgba(27, 26, 34, 0.06);
}

.lsb-hist-btn[b-wxz1k5zzdh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    padding: 0;
    font-family: inherit;
    font-size: var(--motiva-font-size-control, 12.5px);
    font-weight: 500;
    color: #9B96A8;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease;
    margin-inline-start: auto;
}

.lsb-hist-btn:hover[b-wxz1k5zzdh] { color: #4A4657; }

.lsb-hist-caret[b-wxz1k5zzdh] {
    display: inline-flex;
    transition: transform 0.2s ease;
}

.lsb-hist-caret-open[b-wxz1k5zzdh] { transform: rotate(180deg); }

.lsb-hist-items[b-wxz1k5zzdh] {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lsb-hist-item[b-wxz1k5zzdh] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.lsb-hist-dot[b-wxz1k5zzdh] {
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #CDCAD8;
    margin-top: 6px;
}

.lsb-hist-content[b-wxz1k5zzdh] { flex: 1; min-width: 0; }

.lsb-hist-text[b-wxz1k5zzdh] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13px);
    color: #6B6779;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.lsb-hist-note[b-wxz1k5zzdh] {
    margin: 4px 0 0;
    font-size: var(--motiva-font-size-sm, 13px);
    color: #4A4657;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .lsb-ws-head[b-wxz1k5zzdh] { padding: 20px 22px 16px; }
    .lsb-ws-body[b-wxz1k5zzdh] { padding: 18px 22px 24px; }
}

@media (max-width: 720px) {
    /* One column is too narrow to hold a title and a badge cluster side by
       side, so the head unwraps back to a stack — badges FIRST, which is where
       they read correctly once they are no longer in a corner. */
    .lsb-ws-head[b-wxz1k5zzdh] {
        padding: 16px 16px 12px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .lsb-ws-badges[b-wxz1k5zzdh] { order: -1; justify-content: flex-start; }
    .lsb-ws-body[b-wxz1k5zzdh] { padding: 14px 16px 20px; }
    .lsb-decision-row[b-wxz1k5zzdh] { gap: 8px; }
    .lsb-btn-outline[b-wxz1k5zzdh],
    .lsb-btn-approve[b-wxz1k5zzdh] { padding: 10px 16px; font-size: 13px; }
    .lsb-note-input[b-wxz1k5zzdh]  { min-width: 160px; }
}

/* ══════════════════════════════════════════════════════════
   THE PAGE-LOCAL DESKTOP TYPE BLOCK THAT WAS HERE IS GONE.

   It raised this screen's type with a `@media (min-width: 901px)`
   override because the product had no scale to read. It does now, so
   every size above is a token instead and this page grows with the
   rest of the product rather than beside it — which also removes the
   override's own failure mode: it pinned literals (18 / 14.5 / 13 / 16)
   that immediately disagreed with the shared scale the moment the
   shared scale moved.

   The MPageHeaderCard title override went with it: the Core variant is
   36px at its source now, for every page that wears it.
   ══════════════════════════════════════════════════════════ */
/* /Pages/Assignments/TeamAssignmentWorkspace.razor.rz.scp.css */
/* ============================================================
   TeamAssignmentWorkspace — בדיקת שיבוץ (one team, one decision)
   Prefix: taw-

   Descended from the Assignments page's old expanded detail row: the
   three-panel grid, the score bands, the rank pill and the demand
   placement are the same objects, lifted out of the table and given a
   surface that can hold them. What changed is not the vocabulary but
   the room — a modal at Wide has the width the panel was always asking
   the table for, and none of the row rhythm it had to fight.

   The dialog shell belongs to MModal and is not restyled here.
   Tokens: motiva-tokens.css.
   ============================================================ */

/* ── Header ──────────────────────────────────────────────────  */
.taw-head[b-v6bq54n6ry] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

/* The state sits above the identity, on its own line, so it reads as a
   property of the team rather than a prefix to their names. */
/* Names and stamp share a line: the timestamp qualifies the identity, and a
   line of its own made a two-fact header look like a three-line one. It wraps
   under the names rather than squeezing them on a narrow modal. */
.taw-sub[b-v6bq54n6ry] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.4;
    color: var(--motiva-text-secondary, #5B5568);
}

.taw-sep[b-v6bq54n6ry] { color: var(--motiva-text-faint, #B4AFC0); }

/* A white pill with a neutral outline — deliberately NOT the brand tag. The
   gradient edge marks things that belong to the team or the project; this is
   a timestamp, and giving it the same edge would make the header compete with
   the skills below it for the same meaning. */
/* ── Body ────────────────────────────────────────────────────  */
.taw-body[b-v6bq54n6ry] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-block-end: 4px;
}

/* ── State bar ───────────────────────────────────────────────
   One line above everything: what is true now, and the single move that
   undoes it. Nothing else on the surface is allowed to look like this. */
.taw-bar[b-v6bq54n6ry] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 14px;
    border-radius: var(--motiva-radius-sm, 10px);
    background: color-mix(in srgb, var(--motiva-text-primary, #1A1820) 3%, #fff);
}

.taw-bar-state[b-v6bq54n6ry] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* ── The facts of an existing assignment ─────────────────────
   Four labelled facts under the state bar, not a fifth panel: they are
   what IS, and the three sections below are what could be instead. A
   grid rather than a row of chips, because "מנחה" with nothing in it is
   a fact worth having a labelled slot for.

   auto-fit keeps them on one line at Wide and folds them in pairs on a
   narrow viewport without a second breakpoint. */
.taw-facts[b-v6bq54n6ry] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px 18px;
    margin: 0;
    padding: 0;
}

.taw-fact[b-v6bq54n6ry] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.taw-fact-key[b-v6bq54n6ry] {
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--motiva-text-muted, #8B8698);
}

.taw-fact-val[b-v6bq54n6ry] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    min-width: 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    color: var(--motiva-text-primary, #1A1820);
}

.taw-fact-num[b-v6bq54n6ry] {
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-text-faint, #B4AFC0);
}

.taw-fact-name[b-v6bq54n6ry] {
    min-width: 0;
    font-weight: var(--motiva-font-weight-semibold, 600);
}

/* An edge, never a fill — the brand tag rule. */
.taw-fact-tag[b-v6bq54n6ry] {
    padding: 2px 8px;
    border-radius: var(--motiva-radius-pill, 999px);
    background: var(--motiva-tag-brand-surface, rgba(79, 70, 229, 0.08));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 18%, transparent);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.35;
    color: var(--motiva-color-violet, #4F46E5);
}

.taw-bar-note[b-v6bq54n6ry] {
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.3;
    color: var(--motiva-text-muted, #8B8698);
}

.taw-status[b-v6bq54n6ry] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--motiva-font-size-caption, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.25;
}

.taw-dot[b-v6bq54n6ry] {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.taw-status--live[b-v6bq54n6ry]  { color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 88%, #000); }
.taw-status--draft[b-v6bq54n6ry] { color: var(--motiva-color-violet, #4F46E5); }
.taw-status--none[b-v6bq54n6ry]  { color: var(--motiva-text-muted, #8B8698); }

/* ── The three sections ──────────────────────────────────────
   The decision column is its own column at full height, because it is
   the one thing the lecturer came here to do; the two context panels
   stack beside it in reading order — who they are, then what they asked
   for. Section 2 sits directly above nothing and directly beside the
   recommendation it feeds, which is the adjacency that makes the
   "why" sentence checkable at a glance. */
.taw-grid[b-v6bq54n6ry] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 14px;
    align-items: start;
}

/* Preferences first. What the students asked for is the input to the
   decision; who they are is the context that qualifies it, and a reader who
   has to scroll past three member cards to reach the request is reading the
   argument backwards. */
.taw-panel--prefs[b-v6bq54n6ry] { grid-column: 1; grid-row: 1; }
.taw-panel--team[b-v6bq54n6ry]  { grid-column: 1; grid-row: 2; }
/* The one item that opts OUT of the grid's `align-items: start`. It spans both
   rows, so stretching makes its outer edges land exactly on the top of the
   preferences panel and the bottom of the team panel beside it — the two
   columns read as two columns instead of one column and a short offcut.

   Nothing inside it stretches with it: .asgn-panel is a COLUMN flex, so its
   children size on the main axis to their own content and the surplus stays as
   empty space at the foot of the panel. The recommendation card and the
   additional-options rows keep the heights they have now. */
.taw-panel--rec[b-v6bq54n6ry]   { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }

/* ── 1 — members ─────────────────────────────────────────────
   auto-fit rather than a column, because this panel is two different
   widths: one of three columns in the decision (where 240px leaves room
   for exactly one track, so it stays the stack it has always been) and
   full-width in the details, where a stack of two members under a
   960px header is mostly empty card. */
/* The product's one tag recipe, not a private grey chip: the gradient edge
   veiled to a soft grey-lavender by --motiva-tag-brand-surface, over a white
   interior, with primary ink. Per the note on .motiva-tag in motiva-base.css,
   an existing tag with its own metrics reads the TOKEN rather than taking the
   class — three declarations: a transparent border for the gradient to paint
   into, primary ink, and one less px of padding per axis to pay for the edge. */
.taw-notes-text[b-v6bq54n6ry] {
    margin: 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
    line-height: 1.55;
    white-space: pre-wrap;
    color: var(--motiva-text-secondary, #5B5568);
}

.taw-notes[b-v6bq54n6ry] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-block-start: 10px;
    border-block-start: 1px solid var(--motiva-border-subtle, rgba(26, 24, 32, 0.07));
}

.taw-notes-label[b-v6bq54n6ry] {
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-text-muted, #8B8698);
}

/* ── 2 — preferences ─────────────────────────────────────────  */
/* Taken is the ONE state on this surface that earns rose, because it is
   the one state where acting costs another team its project. Demand
   never gets it — a wanted project is not an error. */
/* ── Availability ────────────────────────────────────────────
   Its own line, so the eye finds the same fact in the same place down
   the list. "פנוי" is stated, not implied by silence. */
/* ── Score ───────────────────────────────────────────────────  */
.taw-score[b-v6bq54n6ry] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--motiva-radius-pill, 999px);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.3;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* The number never travels alone. "ציון התאמה" is quiet and the value keeps
   its band colour, so the pair reads as one labelled measurement instead of a
   bare integer the reader has to interpret. */
.taw-scoreline[b-v6bq54n6ry] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.taw-scorelabel[b-v6bq54n6ry] {
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.3;
    color: var(--motiva-text-muted, #8B8698);
}

/* ── The recommendation's argument ───────────────────────────
   One fact per line under the project name: where it came from, what it
   scored, how contested it is, whether it is free. A row of chips made
   these four look like one undifferentiated strip of metadata; stacked,
   they read in the order a person actually asks them. */
.taw-primary-facts[b-v6bq54n6ry] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
}

.taw-primary-fact > dd[b-v6bq54n6ry] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.taw-primary-src[b-v6bq54n6ry] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.35;
    color: var(--motiva-color-violet, #4F46E5);
}

.taw-primary-scoreline[b-v6bq54n6ry] { line-height: 1.35; }

/* The <dt>s name each fact for a screen reader; on screen the value's own
   wording already says which fact it is. */
.taw-sr[b-v6bq54n6ry] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.taw-score--high[b-v6bq54n6ry] {
    background: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 12%, #fff);
    color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 88%, #000);
}

.taw-score--mid[b-v6bq54n6ry] {
    background: var(--motiva-tag-brand-surface, rgba(79, 70, 229, 0.08));
    color: var(--motiva-color-violet, #4F46E5);
}

.taw-score--low[b-v6bq54n6ry] {
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.05));
    color: var(--motiva-text-secondary, #5B5568);
}

/* ── 3 — the recommendation ──────────────────────────────────
   The only raised, brand-edged block on the surface. It is one option
   presented as an argument — rank, score, demand, availability, reason,
   act — and the alternatives beneath it are deliberately flatter. */
/* Highlighted, not selected. At 7% fill over a 24% edge the card read as an
   active choice the lecturer had already made — the same weight the product
   uses for a chosen state — so the eye landed on the BLOCK and only then on
   the project inside it. A 3.5% wash and a 12% hairline keep it the warmest
   thing in the column while letting the project name be the first thing read;
   the gradient CTA carries the emphasis that the surface no longer does.

   Mixed against #fff rather than left translucent: --motiva-tag-brand-surface
   is an alpha colour, and over the canvas's violet radial it stacks into a
   second, deeper tint at exactly the saturation this is removing. */
.taw-primary[b-v6bq54n6ry] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: var(--motiva-radius-sm, 10px);
    background: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 3.5%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 12%, transparent);
}


.taw-primary-name[b-v6bq54n6ry] {
    font-size: var(--motiva-font-size-h3, 17px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.25;
    color: var(--motiva-text-primary, #1A1820);
}

.taw-why[b-v6bq54n6ry] {
    margin: 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
    line-height: 1.55;
    color: var(--motiva-text-secondary, #5B5568);
}

/* justify-content on an explicit row, not align-self on the button: in a
   COLUMN flex the button's align-self resolves against the cross axis, which
   put it on the physical left in this RTL card. A row wrapper puts the
   alignment on the axis the eye actually reads. */
.taw-primary-act[b-v6bq54n6ry] {
    display: flex;
    justify-content: flex-start;
    margin-block-start: 2px;
}

.taw-primary-act > .taw-btn--cta[b-v6bq54n6ry] {
    align-self: auto;
    margin-block-start: 2px;
}

/* ── Alternatives ────────────────────────────────────────────  */
.taw-alts[b-v6bq54n6ry] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--motiva-border-subtle, rgba(26, 24, 32, 0.07));
}

/* The competing claim, stated once under the reason it produced. Neutral
   ink, not rose: another team wanting the same project is a fact about the
   cohort, not an error the lecturer has to fix. */
.taw-contest[b-v6bq54n6ry] {
    margin: 0;
    padding: 8px 10px;
    border-radius: var(--motiva-radius-sm, 10px);
    background: color-mix(in srgb, var(--motiva-text-primary, #1A1820) 4%, transparent);
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.5;
    color: var(--motiva-text-secondary, #5B5568);
}

.taw-contest strong[b-v6bq54n6ry] {
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-text-primary, #1A1820);
}

.taw-alts-title[b-v6bq54n6ry] {
    margin: 0;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.2;
    color: var(--motiva-text-muted, #8B8698);
}

.taw-alt-list[b-v6bq54n6ry] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.taw-alt[b-v6bq54n6ry] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border-radius: var(--motiva-radius-sm, 10px);
    background: color-mix(in srgb, var(--motiva-text-primary, #1A1820) 2.5%, #fff);
}

.taw-alt-main[b-v6bq54n6ry] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.taw-alt-name[b-v6bq54n6ry] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.3;
    color: var(--motiva-text-primary, #1A1820);
}

.taw-alt-tag[b-v6bq54n6ry] {
    padding: 1px 7px;
    border-radius: var(--motiva-radius-pill, 999px);
    background: var(--motiva-tag-brand-surface, rgba(79, 70, 229, 0.08));
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.3;
    white-space: nowrap;
    color: var(--motiva-color-violet, #4F46E5);
}

.taw-alt-tag--ext[b-v6bq54n6ry] {
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.045));
    color: var(--motiva-text-muted, #8B8698);
}

.taw-alt-meta[b-v6bq54n6ry] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.taw-current-tag[b-v6bq54n6ry] {
    display: inline-flex;
    align-items: center;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    white-space: nowrap;
    color: var(--motiva-color-violet, #4F46E5);
}

/* ── Buttons ─────────────────────────────────────────────────  */
.taw-btn[b-v6bq54n6ry] {
    height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: inherit;
    font-size: var(--motiva-font-size-control, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.taw-btn--cta[b-v6bq54n6ry] { height: 36px; padding: 0 20px; font-size: var(--motiva-font-size-control, 13px); }

.taw-btn--ghost[b-v6bq54n6ry] {
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--motiva-border, rgba(26, 24, 32, 0.13));
    color: var(--motiva-text-secondary, #5B5568);
    transition: background-color 140ms ease, color 140ms ease;
}

.taw-btn--ghost:hover:not(:disabled)[b-v6bq54n6ry] {
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.04));
    color: var(--motiva-text-primary, #1A1820);
}

/* Taking a project off another team is not the same act as filling an
   empty one, and it must not be able to be clicked by muscle memory. */
.taw-btn--warn[b-v6bq54n6ry] {
    background: #fff;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--motiva-color-rose, #E11D62) 38%, transparent);
    color: var(--motiva-color-rose-ink, #B23256);
    transition: background-color 140ms ease;
}

.taw-btn--warn:hover:not(:disabled)[b-v6bq54n6ry] {
    background: color-mix(in srgb, var(--motiva-color-rose, #E11D62) 7%, #fff);
}

.taw-btn:disabled[b-v6bq54n6ry] { opacity: 0.45; cursor: default; }

.taw-btn:focus-visible[b-v6bq54n6ry] {
    outline: 2px solid var(--motiva-color-violet, #4F46E5);
    outline-offset: 2px;
}

/* ── Quiet states ────────────────────────────────────────────  */
/* ── Responsive ──────────────────────────────────────────────
   Stacked, the decision must not end up below three member cards. */
@media (max-width: 900px) {
    .taw-grid[b-v6bq54n6ry] { grid-template-columns: 1fr; }

    .taw-panel--rec[b-v6bq54n6ry]   { grid-column: 1; grid-row: 1; }
    .taw-panel--team[b-v6bq54n6ry]  { grid-column: 1; grid-row: 2; }
    .taw-panel--prefs[b-v6bq54n6ry] { grid-column: 1; grid-row: 3; }
}

@media (max-width: 640px) {
    .taw-bar[b-v6bq54n6ry] { align-items: flex-start; flex-direction: column; gap: 10px; }
    .taw-bar > .taw-btn[b-v6bq54n6ry] { width: 100%; }

    /* the shared atoms carry their own narrow-width rules */
    .asgn-pref-act > .taw-btn[b-v6bq54n6ry] { width: 100%; }

    .taw-alt[b-v6bq54n6ry] { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .taw-btn--ghost[b-v6bq54n6ry],
    .taw-btn--warn[b-v6bq54n6ry] { transition: none; }
}

/* ============================================================
   Details mode — an assignment that already exists

   The order on this surface is the argument: what the assignment IS,
   what can be done to it, and only then, folded away, how it came
   about. The form the team submitted and the matcher's opinion are
   history once a decision has been taken; they are kept because a
   lecturer revisiting an assignment sometimes needs them, not because
   they still compete for the top of the screen.
   ============================================================ */

/* Management acts, together, at one weight. Below the facts they act on
   and above the fold they are unrelated to. */
.taw-acts[b-v6bq54n6ry] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* MAccordionItem owns the head and the bounded surface; only the inside
   is ours. */
.taw-fold-body[b-v6bq54n6ry] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px 20px;
}

.taw-fold-sec[b-v6bq54n6ry] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.taw-fold-rec[b-v6bq54n6ry] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px 13px;
    border-radius: var(--motiva-radius-sm, 10px);
    background: color-mix(in srgb, var(--motiva-text-primary, #1A1820) 3%, #fff);
}

/* The conditional, said out loud. Without it a recommendation sitting
   under a settled assignment reads as an instruction. */
.taw-fold-lead[b-v6bq54n6ry] {
    margin: 0;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.4;
    color: var(--motiva-text-muted, #8B8698);
}

.taw-fold-rec-top[b-v6bq54n6ry] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.taw-fold-rec-name[b-v6bq54n6ry] {
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.3;
    color: var(--motiva-text-primary, #1A1820);
}

@media (max-width: 900px) {
    .taw-fold-body[b-v6bq54n6ry] { grid-template-columns: 1fr; }
}


/* ============================================================
   VERTICAL FIT

   WHAT THIS BLOCK IS FOR
   The workspace is FitContent (see MModal): it takes the height its content
   needs, and the overlay scrolls only when that will not fit. At a 798px-tall
   window the dialog came to 758px and the overlay's own 26px gutters put the
   total at 810 — twelve pixels over, which bought a scrollbar for nothing. The
   trims below take the content back under the line with room to spare.

   WHERE THE HEIGHT ACTUALLY COMES FROM, because it is not where it looks
   The two columns measured 577px each and that is not a coincidence:
   `.taw-panel--rec` is `align-self: stretch`, so its own content only needs
   ~513 and the rest is stretch. The LEFT column — preferences stacked over
   team — is what sets the grid's height. Trimming the recommendation side
   (including dropping the אפשרויות נוספות subtitle) therefore buys ZERO
   height; every value below is on the left column or on the shell around it.

   WHAT IS DELIBERATELY NOT TOUCHED
   No type size, no control height, no column width, no content. These are
   padding and gap only, 1-2px at a time, taken from the places with the most
   air rather than spread thin everywhere.

   SCOPE
   The `.asgn-*` rules are the shared assignment-surface stylesheet's, but
   these elements are rendered by THIS component, so the scope attribute makes
   the overrides local: AssignmentFormModal draws the same classes at their
   original spacing and is unaffected.
   ============================================================ */

/* Panel padding: 14 → 10. Two panels in the left column, both edges. −16px.
   Block only: the inline padding is what keeps the text off the panel edge and
   is untouched. */
.asgn-panel[b-v6bq54n6ry] {
    padding-block: 10px;
}

/* The three preference rows, 10 → 8 top and bottom. The tallest single
   contributor: three rows, both edges. −12px */
.asgn-pref[b-v6bq54n6ry] {
    padding-block: 8px;
}

/* Between those rows, 8 → 6. Two gaps. −4px */
.asgn-prefs[b-v6bq54n6ry] {
    gap: 6px;
}

/* NOT TOUCHED: .asgn-members. It is
   `grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))` with an
   asymmetric `gap: 9px 16px`, and a shorthand `gap: 8px` here collapsed the
   COLUMN gap from 16 to 8 as well — enough slack for a second column, which
   silently reflowed the two team members from stacked to side by side. That is
   a layout change, not a spacing one. Two pixels are not worth it; the height
   below comes from panel padding instead. */

/* The notes block's own rule-off inset, 10 → 8. −2px */
.taw-notes[b-v6bq54n6ry] {
    padding-block-start: 8px;
}

/* Between the two stacked panels, 14 → 12. −2px */
.taw-grid[b-v6bq54n6ry] {
    gap: 12px;
}

/* Trailing air below the grid. The modal body already ends above the footer's
   own 20px pad, so this was doubled. −4px */
.taw-body[b-v6bq54n6ry] {
    padding-block-end: 0;
}
/* /Pages/CreateTeam/CreateTeam.razor.rz.scp.css */
/* ============================================================
   Team registration (יצירת צוות) — scoped page styles
   Prefix: ct-

   Rewritten with the student migration. The page renders outside the app
   shell (BlankLayout), so it carries the `.motiva` scope class itself and
   every value below reads a --motiva-* token — the same tokens the
   in-shell student pages resolve.
   ============================================================ */

.ct-page[b-qbb8u9f0cd] {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(24px, 5vw, 56px) 16px;
    direction: rtl;
    font-family: var(--motiva-font-family);
    color: var(--motiva-text-primary);
    /* The Master's ambient wash — the same one the student page headers
       use, here as the full-page atmosphere for a chrome-less screen. */
    background: var(--motiva-gradient-ambient), var(--motiva-surface-app-bg);
    background-attachment: fixed;
}

.ct-card[b-qbb8u9f0cd] {
    width: 100%;
    max-width: 860px;
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-lg);
    padding: clamp(20px, 4vw, 36px);
    border-radius: var(--motiva-radius-lg);
    border: 1px solid var(--motiva-border-card, var(--motiva-border-subtle));
    background: var(--motiva-surface-primary);
    box-shadow: var(--motiva-shadow-lg);
}

/* ── Header ── */
.ct-header[b-qbb8u9f0cd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.ct-logo[b-qbb8u9f0cd] {
    height: 34px;
    width: auto;
    object-fit: contain;
}

.ct-subtitle[b-qbb8u9f0cd] {
    margin: 0;
    font-size: var(--motiva-font-size-md);
    color: var(--motiva-text-secondary);
}

/* ── Student cards ── */
.ct-students[b-qbb8u9f0cd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--motiva-space-md);
}

@media (max-width: 680px) {
    .ct-students[b-qbb8u9f0cd] { grid-template-columns: 1fr; }
}

.ct-student-card[b-qbb8u9f0cd] {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-md);
    padding: var(--motiva-space-md);
    border-radius: var(--motiva-radius-md);
    border: 1px solid var(--motiva-border-subtle);
    background: var(--motiva-surface-secondary);
}

.ct-student-header[b-qbb8u9f0cd] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* The system's count-bubble treatment (.motiva-count in motiva-base.css):
   a translucent sweep of the signature gradient with DARK ink. This was a
   solid violet disc with white text — the flat brand fill the tag rules
   exist to prevent, and on a page whose only other violet is the submit
   CTA it made two 26px discs compete with the one control that matters.
   Same size and position; only the fill changes. */
.ct-student-num[b-qbb8u9f0cd] {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    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));
    color: var(--motiva-text-primary);
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-bold);
}

.ct-student-title[b-qbb8u9f0cd] {
    margin: 0;
    font-size: var(--motiva-font-size-h3);
    font-weight: var(--motiva-font-weight-bold);
    color: var(--motiva-text-primary);
}

/* ── Avatar ── */
.ct-avatar-row[b-qbb8u9f0cd] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ct-avatar[b-qbb8u9f0cd] {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--motiva-radius-full);
    border: 1px solid var(--motiva-border-strong);
    background: var(--motiva-surface-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ct-avatar--empty[b-qbb8u9f0cd] { border-style: dashed; }

.ct-avatar-img[b-qbb8u9f0cd] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ct-avatar-placeholder[b-qbb8u9f0cd] {
    font-size: 16px;
    color: var(--motiva-text-muted);
}

.ct-upload-btn[b-qbb8u9f0cd] {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: var(--motiva-radius-sm);
    border: 1px solid var(--motiva-border-strong);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-secondary);
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.ct-upload-btn:hover[b-qbb8u9f0cd] {
    background: var(--motiva-surface-hover);
    color: var(--motiva-text-primary);
}

/* ── Fields ── */
.ct-field-grid[b-qbb8u9f0cd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ct-field[b-qbb8u9f0cd] { display: flex; flex-direction: column; gap: 5px; }
.ct-field--full[b-qbb8u9f0cd] { grid-column: 1 / -1; }

.ct-label[b-qbb8u9f0cd] {
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
}

.ct-required[b-qbb8u9f0cd] { color: var(--motiva-color-rose, var(--motiva-color-danger)); }

.ct-input[b-qbb8u9f0cd] {
    width: 100%;
    padding: 9px 12px;
    border-radius: var(--motiva-radius-md);
    border: 1px solid var(--motiva-border-strong);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-primary);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-body);
    transition: border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.ct-input:focus[b-qbb8u9f0cd] {
    outline: none;
    border-color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

.ct-input:focus-visible[b-qbb8u9f0cd] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.ct-input[b-qbb8u9f0cd]::placeholder { color: var(--motiva-text-subtle, var(--motiva-text-muted)); }

/* ── Error ── */
.ct-error-bar[b-qbb8u9f0cd] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-color-danger-bg);
    border: 1px solid rgba(217, 56, 100, 0.30);
    border-color: color-mix(in srgb, var(--motiva-color-rose, var(--motiva-color-danger)) 30%, transparent);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    font-size: var(--motiva-font-size-body);
}

.ct-error-bar .oi[b-qbb8u9f0cd] { font-size: var(--motiva-font-size-caption, 12px); flex-shrink: 0; }

/* ── Footer ── */
.ct-footer[b-qbb8u9f0cd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Geometry only — the fill comes from the shared `.motiva-cta`. */
.ct-submit-btn[b-qbb8u9f0cd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 420px;
    padding: 12px 24px;
    border: none;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-md);
    font-weight: var(--motiva-font-weight-semibold);
}

.ct-footer-note[b-qbb8u9f0cd],
.ct-already-registered[b-qbb8u9f0cd] {
    margin: 0;
    font-size: var(--motiva-font-size-sm);
    color: var(--motiva-text-muted);
    text-align: center;
}

.ct-already-registered[b-qbb8u9f0cd] { display: flex; gap: 6px; }

.ct-login-link[b-qbb8u9f0cd] {
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    font-weight: var(--motiva-font-weight-semibold);
    text-decoration: none;
}

.ct-login-link:hover[b-qbb8u9f0cd] { text-decoration: underline; }

.ct-spinner[b-qbb8u9f0cd] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-block-start-color: #fff;
    border-radius: var(--motiva-radius-full);
    animation: ct-spin-b-qbb8u9f0cd 0.65s linear infinite;
}

@keyframes ct-spin-b-qbb8u9f0cd { to { transform: rotate(360deg); } }

/* ── Success ── */
.ct-success-panel[b-qbb8u9f0cd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: var(--motiva-space-lg) 0;
    text-align: center;
}

/* Teal = completion, the Master's second semantic. */
.ct-success-icon[b-qbb8u9f0cd] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-color-success-bg);
    color: var(--motiva-color-teal);
    font-size: 22px;
}

.ct-success-title[b-qbb8u9f0cd] {
    margin: 0;
    font-size: var(--motiva-font-size-h2);
    font-weight: var(--motiva-font-weight-bold);
    color: var(--motiva-text-primary);
}

.ct-success-body[b-qbb8u9f0cd] {
    margin: 0;
    max-width: 520px;
    font-size: var(--motiva-font-size-body);
    line-height: var(--motiva-line-height-body);
    color: var(--motiva-text-secondary);
}

.ct-success-warning[b-qbb8u9f0cd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 8px 14px;
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-color-danger-bg);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    font-size: var(--motiva-font-size-sm);
}

@media (max-width: 480px) {
    .ct-field-grid[b-qbb8u9f0cd] { grid-template-columns: 1fr; }
}

/* ── Stranded account ────────────────────────────────────────────────────
   Shown to a signed-in student whose account has no team, in place of a
   registration form that would refuse their own email. Deliberately quiet:
   this is an explanation and a way out, not an error the person caused. */
.ct-stranded[b-qbb8u9f0cd] {
    padding: var(--motiva-space-5, 20px) 0 var(--motiva-space-2, 8px);
    text-align: center;
}

.ct-stranded-title[b-qbb8u9f0cd] {
    margin: 0 0 var(--motiva-space-3, 12px);
    font-size: 1.125rem;
    font-weight: 650;
    color: var(--motiva-ink, #1a1a22);
}

.ct-stranded-body[b-qbb8u9f0cd] {
    margin: 0 0 var(--motiva-space-3, 12px);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--motiva-ink-muted, #5a5a68);
}

.ct-stranded-acts[b-qbb8u9f0cd] {
    margin-top: var(--motiva-space-4, 16px);
}

.ct-stranded-link[b-qbb8u9f0cd] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--motiva-brand, #6d3bf5);
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* /Pages/Dashboard/AttentionItemsCard.razor.rz.scp.css */
/* ============================================================
   AttentionItemsCard — "דורש תשומת לב"

   Deliberately the SAME shell as UpcomingSubmissionsCard,
   RecentUpdatesSection and OpenRequestsCard — and that shell is now
   the mentor dashboard's, supplied once in Dashboard.razor.css rather
   than copied into four stylesheets.

   Nothing here paints a rose surface: the attention colour lives on
   the per-row dot and the per-row state pill, never on the card. Both
   take the mentor dashboard's SOFTENED rose (#D9738F / #A9506B) — see
   the note in Dashboard.razor.css.
   ============================================================ */

.aic-body[b-bgj0jrtlnj] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0;
}

.aic-head[b-bgj0jrtlnj] {
    border-block-end: 0;
}
/* /Pages/Dashboard/Dashboard.razor.rz.scp.css */
/* ============================================================
   Student Dashboard — page layout, and the page's adoption of the
   MENTOR DASHBOARD'S VISUAL SYSTEM.

   VISUAL SOURCE OF TRUTH: Client/Pages/Mentor/MentorHomePage.razor.css
   (the live implementation, not a .dc.html export). Every surface,
   radius, shadow, inset, type step, divider, hover and semantic tone
   below is transcribed from it.

   WHAT THIS PASS IS AND IS NOT
   It is presentation only. The composition, the cards, what each card
   selects, who may see it, where a row navigates and every count are
   exactly what they were — this file changes how the page LOOKS, and
   Dashboard.razor's data flow, role gate and callbacks are untouched.

   THE COMPOSITION STAYS THE STUDENT'S
   The mentor's checkerboard (1.75/1 then 1/1.75) is NOT copied here.
   The student's own three-band composition is what carries their
   priorities and it is preserved:

       h1 greeting
       מסע הפרויקט                 — the journey, full width
       ROW 2                        — לשים לב 1fr / בקשות 1.4fr
       ROW 3                        — team tasks 1.6x + the glance cards

   WHAT IS ADOPTED, ONE THING PER GROUP
     surface     solid #FFFFFF at radius-xl over a violet-tinted
                 hairline, with ONE lifted card per page — the mentor's
                 rule exactly. Everywhere else in the student experience
                 the section card stays the translucent .66 fill; this
                 override is scoped to .sdash-page, which is the same
                 relationship MentorHomePage has to the mentor's own
                 sibling screens.
     rhythm      the mentor's density scale and its four height bands,
                 so both dashboards compress identically on a laptop.
     heads       glyph · title · link at the reading end, no rule under
                 the heading, 8px to the first row.
     rows        a rgba(27,26,34,.06) floor, none on the last, and a
                 hover that moves the INK to violet with no wash.
     semantics   status words become filled pills in their own tone, and
                 rose is the shared token pair
                 (--motiva-color-rose-ink on --motiva-color-danger-bg),
                 the one the mentor dashboard renders.
   ============================================================ */

.sdash-page[b-vibzuz11a0] {
    min-width: 0;
    display: flex;
    flex-direction: column;

    /* ── THE DENSITY SCALE ─────────────────────────────────────
       The mentor's, by name and by value. Every vertical inset on
       this page reads one of these and nothing else does, so the
       height bands at the foot of this file can retune the whole
       page without touching a single type step.

       THE VALUES ARE THE MENTOR'S, SPENT UP. The journey used to draw
       fourteen equal stepper stages and cost ~135px of the fold; the
       four-band phase strip costs about half that, and the page was
       already ending ~90px above the bottom of a laptop viewport. Both
       of those went back into this scale rather than into more rows:
       every card's block inset and every list row is roomier at every
       height now, and nothing is squeezed to make the page fit. */
    --sd-title-pt:  8px;
    --sd-title-pb: 22px;
    --sd-row-gap:  22px;

    --sd-card-pt: 24px;
    --sd-card-pb: 20px;
    --sd-head-mb: 15px;

    --sd-row-py:  15px;

    gap: var(--sd-row-gap);
}

/* ── ROW 2 — the compact two-column middle section ────────────
   The student's own ratio. Both cards stretch to a common height —
   the focus card is given height:100% and pins its CTA to the bottom,
   which is what keeps the pair level however long the requests list
   runs. */

.sdash-row-mid[b-vibzuz11a0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--sd-row-gap);
    align-items: stretch;
    min-width: 0;
}

/* ── ROW 3 — the glance row ───────────────────────────────────
   GRID, not flex. A wrapping flex row sizes each item to its own
   content on the cross axis, which left one card visibly ending
   lower than its neighbours; a grid row equalises its tracks by
   construction.

   THREE TRACKS, STATED OUTRIGHT. This used to be one explicit track
   plus `grid-auto-flow: column` and an implicit 1fr, because the row
   carried three cards or four depending on whether the attention card
   had anything to say. That card's placement is withdrawn and all
   three remaining cards render unconditionally, so the row has a fixed
   count and says so — an auto-flow rule that can only ever produce one
   result is a rule the next reader has to simulate to understand.

   The ratio is unchanged at 1.6 / 1 / 1: the team-tasks card's rows
   carry four columns (checkbox · title · assignee · due) and genuinely
   need the width, while the other two are two-column lists. Dropping
   the fourth card widens every track rather than re-proportioning
   them — the two 1fr cards go from ~22% of the row to ~28%, which is
   where the space the removal freed actually went. */
.sdash-row-glance[b-vibzuz11a0] {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sd-row-gap);
    align-items: stretch;
    min-width: 0;
}

.sdash-row-glance[b-vibzuz11a0]  > * { min-width: 0; }

/* ============================================================
   WHY EVERY M* OVERRIDE BELOW IS PREFIXED `.motiva-final`

   Each M* primitive already carries a finished-design rule of its own,
   written `.motiva-final .m-card` / `.m-row` / `.m-empty` and compiled
   to `.motiva-final .m-x[b-component]` — (0,3,0). A page override
   written `.sdash-page ::deep .m-x` compiles to `.sdash-page[b-dash]
   .m-x`, which is ALSO (0,3,0): an exact tie that only the order the
   two scoped sheets happen to be bundled in settles. It happens to
   favour the page today, and a component rename or a build-order change
   would silently flip it.

   The `.motiva-final` prefix lifts every one of them to (0,4,0), so
   they win on specificity. It costs nothing — the class is already on
   the shell root above this page, and both finished experiences carry
   it — and it says out loud which rule this one is answering.

   Do not remove it as redundant. See the repo note on Blazor
   scoped-CSS specificity for the three ways this goes wrong silently.
   ============================================================ */

/* ============================================================
   THE CARD — solid white, one lifted, three quiet
   MentorHomePage.razor.css ".mh-card" / ".mh-card-primary" /
   ".mh-card-quiet", transcribed.
   ============================================================ */

/* The surface is no longer stated here either. The --motiva-panel-*
   tokens this rule was written against are what `.motiva-final .m-card`
   itself now resolves to, for every role, so restating them on one page
   can only ever be a copy that drifts. What is left is the positioning
   context the glow below needs. Radius came with it: this page asked for
   radius-xl (26px) while the rest of the product's sections were 24px,
   and --motiva-panel-radius is now the single answer. */
.motiva-final .sdash-page[b-vibzuz11a0]  .m-card {
    position: relative;
    min-width: 0;
}

/* THE GLOW — the mentor's emphasis treatment, and the page's ONE
   lifted card. It goes to the focus card because that is the student's
   "what needs me now": the same job דורש את תשומת לבך does for the
   mentor, and the card this page has always documented as its single
   highest-emphasis surface.

   A hairline drop, then violet off the inline-start side, teal off the
   inline-end side and blue below — three coloured shadows at −26/−30
   spread, so none of them reads as a coloured EDGE. */
/* SPECIFICITY, and it was silently losing — the same way the lecturer
   dashboard's lifted card was. `.sdash-page ::deep .dfc-card` compiles to
   `.sdash-page[b-…] .dfc-card`, which is (0,3,0); the blanket card rule
   above is `.motiva-final .sdash-page[b-…] .m-card`, which is (0,4,0). The
   blanket won BOTH the border and the box-shadow, so this page's ONE lifted
   card — the whole point of the "one lifted, three quiet" rule the file
   opens by stating — rendered identical to the quiet ones. Measured: its
   border-color and box-shadow matched .usc-card exactly.

   The mentor dashboard was the only one of the three actually drawing a
   lifted card. Compounding `.m-card` takes this to (0,5,0) so it wins
   outright rather than on the order two scoped sheets happen to bundle in —
   which is the trap the file's own specificity note warns about. */
.motiva-final .sdash-page[b-vibzuz11a0]  .m-card.dfc-card {
    /* Was rgba(255,255,255,.9) — a white highlight from the translucent
       era, invisible against the opaque panels beside it. The lift is the
       three coloured drops; the edge stays the panel hairline. */
    border-color: var(--motiva-panel-border);
    box-shadow:
        0 1px 2px rgba(27, 26, 34, 0.04),
        -14px 14px 44px -26px rgba(109, 40, 245, 0.35),
        14px -10px 40px -26px rgba(15, 168, 194, 0.32),
        0 18px 48px -30px rgba(46, 99, 232, 0.28);
}

/* Card insets. The mentor spends 28px inline on its wide cards and
   24px on the two narrow ones; the glance row here is four narrow
   cards, so it takes the narrow value and the two full-width bands
   above it take the wide one. Block padding is the density scale's. */
.motiva-final .sdash-page[b-vibzuz11a0]  .m-card,
.motiva-final .sdash-page[b-vibzuz11a0]  .m-card.m-card-padding-none,
.motiva-final .sdash-page[b-vibzuz11a0]  .m-card.m-card-padding-small,
.motiva-final .sdash-page[b-vibzuz11a0]  .m-card.m-card-padding-medium,
.motiva-final .sdash-page[b-vibzuz11a0]  .m-card.m-card-padding-large {
    padding: var(--sd-card-pt) 28px var(--sd-card-pb);
}

.motiva-final .sdash-row-glance[b-vibzuz11a0]  .m-card,
.motiva-final .sdash-row-glance[b-vibzuz11a0]  .m-card.m-card-padding-none {
    padding-inline: 24px;
    padding-block-end: calc(var(--sd-card-pb) + 4px);
}

/* Every card fills its track so a row shares one height and the cards
   in it end on one line. */
.motiva-final .sdash-page[b-vibzuz11a0]  .m-card {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* ── The interactive card ────────────────────────────────────
   The mentor page moves INK on hover and never moves a surface. The
   pointer-following radial wash this page used to draw is gone with
   it: the focus card deepens its own glow and takes its heading to
   violet, and nothing on the page shifts. */

.motiva-final .sdash-page[b-vibzuz11a0]  .m-card-interactive {
    cursor: pointer;
    transition: box-shadow var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard);
}

/* The hover deepens the same glow, and takes the same lift in specificity
   so it cannot tie with the blanket rule either. */
.motiva-final .sdash-page[b-vibzuz11a0]  .m-card.dfc-card.m-card-interactive:hover,
.motiva-final .sdash-page[b-vibzuz11a0]  .m-card.dfc-card.m-card-interactive:focus-visible {
    box-shadow:
        0 1px 2px rgba(27, 26, 34, 0.04),
        -16px 16px 48px -24px rgba(109, 40, 245, 0.45),
        16px -12px 44px -24px rgba(15, 168, 194, 0.40),
        0 20px 52px -28px rgba(46, 99, 232, 0.34);
}

.motiva-final .sdash-page[b-vibzuz11a0]  .m-card-interactive:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .motiva-final .sdash-page[b-vibzuz11a0]  .m-card-interactive { transition: none; }
}

/* ============================================================
   SECTION HEADS — glyph · title · link at the reading end
   MentorHomePage ".mh-card-head". No rule under the heading: the
   mentor carries the boundary as 8px of air, and a hairline under
   six headings on one screen reads as six tables.
   ============================================================ */

.sdash-page[b-vibzuz11a0]  .sd-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin-block-end: 8px;
}

/* The glyph ALONE, on nothing — no chip, no tinted square. At its own
   16px in the brand violet, so the heading row is the height of its
   title and nothing else. */
.sdash-page[b-vibzuz11a0]  .sd-head-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--motiva-color-violet);
}

.sdash-page[b-vibzuz11a0]  .sd-head-title {
    margin: 0;
    /* SECTION TITLE — the system's h2 step, shared with the mentor and
       lecturer dashboards and with MSectionHeading. Was a 19px literal. */
    font-size: var(--motiva-font-size-h2);
    font-weight: var(--motiva-font-weight-bold);
    /* The mentor sets 1. This is the one metric of its head that is
       deliberately not copied: its narrow card is titled "בקרוב" and can
       never wrap, while this page's narrow cards carry four-word Hebrew
       titles. At 1 a wrapped title's two lines collide; 1.15 costs a
       single-line head 3px and makes the wrap legible if a project's
       data ever forces one. */
    line-height: 1.15;
    letter-spacing: var(--motiva-letter-spacing-section);
    color: var(--motiva-text-primary);
}

/* THE HEAD LADDER IS NOW ONE STEP, on purpose.

   It used to be two — 22px on the one lifted card, 19px on every quiet
   one — copied from the mentor dashboard, which carried the same pair.
   Both are gone: a section title is a section title, the glow is what
   marks the lifted card, and two hand-set sizes 3px apart is exactly the
   drift this pass exists to remove. (It was briefly THREE steps, when a
   fourth glance card squeezed "הגשות ומועדים קרובים" and that row was
   stepped down to 17 to keep every head on one line. Dropping the fourth
   card widened those tracks to ~429px, so the longest title now clears
   its head by ~80px at the section step. Re-measure before adding a card
   back.) */
.sdash-page[b-vibzuz11a0]  .dfc-heading { font-size: var(--motiva-font-size-h2); }

/* "לכל הבקשות", "לכל המשימות", "ראה הכל" — navigation, so it is the
   quietest thing in the head and it sits at the head's reading end
   rather than centred under the list. */
.sdash-page[b-vibzuz11a0]  .sd-head-link {
    margin-inline-start: auto;
    flex: 0 0 auto;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--motiva-radius-sm);
    transition: color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.sdash-page[b-vibzuz11a0]  .sd-head-link:hover { color: var(--motiva-text-primary); }

.sdash-page[b-vibzuz11a0]  .sd-head-link:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .sdash-page[b-vibzuz11a0]  .sd-head-link { transition: none; }
}

/* ============================================================
   ROWS — MRow in the mentor's row grammar
   A hairline floor, none on the last, and a hover that moves the ink
   instead of painting a wash.
   ============================================================ */

.motiva-final .sdash-page[b-vibzuz11a0]  .m-row {
    gap: 14px;
    padding-block: var(--sd-row-py);
    padding-inline: 2px;
    margin-inline: 0;
    border-radius: 0;
    border-block-end: 1px solid rgba(27, 26, 34, 0.06);
    color: var(--motiva-text-primary);
    transition: background-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

/* MRowList's own last-child exception is (0,5,0) and its .motiva-final
   divider rule is (0,5,0) too, so which of them wins depends on the
   order the two scoped sheets happen to be bundled in — today the
   divider does, and every list in the finished design keeps a rule
   under its last row. Stated here at (0,6,0) so the mentor's "none on
   the last" holds on this page deterministically. The component is
   left alone: fixing it there would move rows on every other student
   and mentor screen, which this pass is not scoped to. */
.motiva-final .sdash-page[b-vibzuz11a0]  .m-row:last-child,
.motiva-final .sdash-page[b-vibzuz11a0]  .m-row-list.m-row-list-divided .m-row:last-child { border-block-end: 0; }

/* HOVER IS STRUCTURAL, NOT CHROMATIC.

   This used to kill MRow's wash (`background: none`) and ink the whole row
   violet instead — `.m-row-primary` inherits, so a request title turned
   purple under the cursor. Two things were wrong with that. Violet is this
   product's ACTION colour, so a row that merely had the pointer over it
   borrowed the emphasis of a thing you must do; and on a card headed
   "דורש תשומת לב", where a rose dot is the real signal, a purple title
   competed with the one mark that was trying to mean something.

   What replaces it is MRow's own finished-design hover — a 2.5 per cent ink
   wash on the row's box — and nothing else. The primary stays dark, the
   secondary stays grey, the meta stays muted, and the row is still a link
   with unchanged pointer and click behaviour. */
.motiva-final .sdash-page[b-vibzuz11a0]  a.m-row:hover,
.motiva-final .sdash-page[b-vibzuz11a0]  button.m-row:hover {
    background: rgba(27, 26, 34, 0.025);
    color: var(--motiva-text-primary);
}

.motiva-final .sdash-page[b-vibzuz11a0]  a.m-row:focus-visible,
.motiva-final .sdash-page[b-vibzuz11a0]  button.m-row:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
    border-radius: var(--motiva-radius-row);
}

.motiva-final .sdash-page[b-vibzuz11a0]  .m-row-main { gap: 4px; }

/* The mentor's team row: 15/700 name over a 13/500 muted line. */
.motiva-final .sdash-page[b-vibzuz11a0]  .m-row-primary {
    font-size: var(--motiva-font-size-lg, 15px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1.3;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.motiva-final .sdash-page[b-vibzuz11a0]  .m-row-secondary {
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.3;
    color: var(--motiva-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── The meta slot ───────────────────────────────────────────
   Plain metadata stays plain 13px text, tabular so a column of dates
   lines up. A SEMANTIC meta — a status word, a lateness — becomes a
   filled pill in its own tone, which is how the mentor's team and
   task rows state the same kind of fact. */

.motiva-final .sdash-page[b-vibzuz11a0]  .m-row-meta {
    font-size: var(--motiva-font-size-meta);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.motiva-final .sdash-page[b-vibzuz11a0]  .m-row-meta-violet,
.motiva-final .sdash-page[b-vibzuz11a0]  .m-row-meta-teal,
.motiva-final .sdash-page[b-vibzuz11a0]  .m-row-meta-rose {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: var(--motiva-radius-full);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* THE BRAND TONE IS AN EDGE, NOT A FILL — `--motiva-tag-brand-surface`.

   "ממתין לתגובה" was a flat violet pill (#6D28F5 on rgba(109,40,245,.08)),
   which is the treatment the Project Workspace pills moved off: at that
   weight the interior carries the tag and the label is the same colour as
   its own background, so a waiting request read as the loudest object in
   the card. The recipe it moves to is `--motiva-tag-brand-surface` —
   see the token's own note.

   THE PILL DOES NOT CHANGE SIZE. The group above sets 6px/12px with no
   border; the 1px edge is paid for out of the padding (5px/11px), so the
   row's height and the column of pills are untouched.

   Teal and rose below are deliberately NOT re-based: completion keeps the
   success treatment and lateness keeps rose, exactly as before. */
.motiva-final .sdash-page[b-vibzuz11a0]  .m-row-meta-violet {
    padding: 5px 11px;
    border: 1px solid transparent;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
}

.motiva-final .sdash-page[b-vibzuz11a0]  .m-row-meta-teal   { color: var(--motiva-color-teal-ink); background: var(--motiva-color-success-bg); }

/* ONE ROSE, FROM THE TOKENS.

   This block used to soften the pair to #D9738F / #A9506B, and the reason
   given was that the mentor dashboard did the same. It no longer does: the
   mentor dashboard — now the approved reference — renders
   --motiva-color-rose-ink on --motiva-color-danger-bg, and its team dot
   renders --motiva-color-rose. So the product was carrying THREE roses
   (#C42B52, #A9506B, #D9738F), all called "softened", drifted apart by
   being retyped in three files.

   The tokens are what the reference reads, so they are what these read now.
   Everything else holds: a state is still a pill and never bare coloured
   text, so lateness is never carried by colour alone. */
.motiva-final .sdash-page[b-vibzuz11a0]  .m-row-meta-rose { color: var(--motiva-color-rose-ink); background: var(--motiva-color-danger-bg); }

/* The leading status dot takes the shared rose, at dot weight. */
.motiva-final .sdash-page[b-vibzuz11a0]  .m-dot-rose { --m-dot-color: var(--motiva-color-rose); }

/* ============================================================
   EMPTY / LOADING — the mentor's one quiet line
   MEmptyState's 32px block of centred copy is right for a card that
   owns a screen and far too loud for four cards sharing a laptop
   viewport, so it is compacted onto the reading edge.
   ============================================================ */

.motiva-final .sdash-page[b-vibzuz11a0]  .m-empty {
    align-items: flex-start;
    text-align: start;
    gap: 4px;
    padding: 8px 0 10px;
}

.motiva-final .sdash-page[b-vibzuz11a0]  .m-empty-title {
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
}

.motiva-final .sdash-page[b-vibzuz11a0]  .m-empty-text {
    font-size: var(--motiva-font-size-meta, 12.5px);
    color: var(--motiva-text-muted);
}

/* ── Page loading ─────────────────────────────────────────────
   Error and empty states use MEmptyState — the design allows exactly
   one empty-state treatment, so the page does not author a second. */

.sdash-loading[b-vibzuz11a0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--motiva-space-sm);
    padding-block: 48px;
    font-size: var(--motiva-font-size-body);
    color: var(--motiva-text-muted);
}

.sdash-spinner[b-vibzuz11a0] {
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    border: 2px solid rgba(27, 26, 34, 0.10);
    border-top-color: var(--motiva-color-violet);
    border-radius: var(--motiva-radius-full);
    animation: sdash-spin-b-vibzuz11a0 0.75s linear infinite;
}

@keyframes sdash-spin-b-vibzuz11a0 { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .sdash-spinner[b-vibzuz11a0] { animation-duration: 2s; }
}

/* ============================================================
   THE GREETING — the mentor's title row
   The greeting now sits on the finalized white MPageHeaderCard (Core
   scale), the same surface the mentor/lecturer dashboards and every other
   Student page use, rather than an ambient hero band. Only the block inset
   is set here — the mentor's own formula, so the two dashboards' greeting
   cards read at the same density — while the card keeps its standard 24px
   inline padding and .motiva-panel surface.
   ============================================================ */

.motiva-final .sdash-page[b-vibzuz11a0]  .m-page-header-card {
    padding-block: calc(var(--sd-title-pt) + 6px) var(--sd-title-pb);
}

/* The journey card's own margins are retired — the page's row gap is
   the single thing that spaces the bands now, exactly as on the
   mentor dashboard. */
.sdash-page[b-vibzuz11a0]  .sdh-journey {
    margin-block: 0;
}

/* ── Bottom row: one consistent row ──
   Each card's own body is the growing element, so a short list does
   not leave its card ending above its neighbours. */
.sdash-row-glance[b-vibzuz11a0]  .ttc-body,
.sdash-row-glance[b-vibzuz11a0]  .rus-body,
.sdash-row-glance[b-vibzuz11a0]  .usc-body,
.sdash-row-glance[b-vibzuz11a0]  .aic-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ============================================================
   SHORTER VIEWPORTS — the mentor's density bands

   These move PADDING and nothing else. No font-size, weight or
   line-height changes at any height, no card changes width, and the
   1.4 / 1.6 tracks are identical in every band — the page gets
   tighter without ever getting smaller or losing its shape.

   The breakpoints are the mentor dashboard's own, so the two screens
   step down together rather than one compacting while the other
   still sprawls.
   ============================================================ */

@media (max-height: 858px) {
    .sdash-page[b-vibzuz11a0] {
        --sd-title-pt:  6px;
        --sd-title-pb: 18px;
        --sd-row-gap:  20px;

        --sd-card-pt: 22px;
        --sd-card-pb: 18px;
        --sd-head-mb: 14px;

        --sd-row-py:  14px;
    }
}
@media (max-height: 826px) {
    .sdash-page[b-vibzuz11a0] {
        /* Every step down comes out of the HEADER first and the ROWS
           last. The title's own inset and the cards' block padding cost
           a reader nothing; a row's padding is the air around the text
           they are actually scanning, so it is the last thing to go and
           it never goes far. */
        --sd-title-pt:  4px;
        --sd-title-pb: 16px;
        --sd-row-gap:  18px;

        --sd-card-pt: 21px;
        --sd-card-pb: 17px;
        --sd-head-mb: 13px;

        --sd-row-py:  13px;
    }
}
@media (max-height: 802px) {
    .sdash-page[b-vibzuz11a0] {
        --sd-title-pt:  3px;
        --sd-title-pb: 15px;
        --sd-row-gap:  17px;

        --sd-card-pt: 20px;
        --sd-card-pb: 16px;
        --sd-head-mb: 12px;

        --sd-row-py:  12px;
    }
}
@media (max-height: 782px) {
    .sdash-page[b-vibzuz11a0] {
        --sd-title-pt:  2px;
        --sd-title-pb: 14px;
        --sd-row-gap:  16px;

        --sd-card-pt: 18px;
        --sd-card-pb: 14px;
        --sd-head-mb: 11px;

        --sd-row-py:  10px;
    }
}
@media (max-height: 747px) {
    .sdash-page[b-vibzuz11a0] {
        --sd-title-pt:  1px;
        --sd-title-pb: 12px;
        --sd-row-gap:  15px;

        --sd-card-pt: 17px;
        --sd-card-pb: 12px;
        --sd-head-mb: 10px;

        --sd-row-py:   9px;
    }
}
@media (max-height: 724px) {
    .sdash-page[b-vibzuz11a0] {
        /* THE FLOOR — and note what it is not. The floor BEFORE the
           journey was simplified ran card padding down to 12px/4px and
           row padding to 6px. This one keeps 15px/10px and 7px, so the
           tightest band the page can now reach is still roomier than
           what a 1440x900 laptop used to get. That is the fourteen-stage
           stepper's ~60px, given back. */
        --sd-title-pt:  0px;
        --sd-title-pb: 10px;
        --sd-row-gap:  13px;

        --sd-card-pt: 15px;
        --sd-card-pb: 10px;
        --sd-head-mb:  8px;

        --sd-row-py:   7px;
    }
}

/* EACH BAND COVERS THE RANGE BELOW ITS OWN BREAKPOINT, and the
   breakpoints come from what each band actually MEASURES, not from
   round numbers. Measured in the browser against real data — the
   four-band strip collapsed, 3 request rows, 2 deadline rows:

     media query   needs   effective for    card pt/pb   row py
     (none)        859px   860 and up         24 / 20      15px
     <= 858px      827px   828 - 858          22 / 18      14px
     <= 826px      803px   804 - 826          21 / 17      13px
     <= 802px      783px   784 - 802          20 / 16      12px
     <= 782px      748px   749 - 782          18 / 14      10px
     <= 747px      725px   726 - 747          17 / 12       9px
     <= 724px      688px   724 and below      15 / 10       7px

   READ THE MIDDLE COLUMN, NOT THE QUERY. Each block is a plain
   max-height, so at any viewport the LAST matching one wins — a band's
   effective range starts one pixel above the next band down, not at
   zero. The needs column is what sets the breakpoints: 826 is a
   breakpoint because the band above it needs 827.

   THIS TABLE IS A MEASUREMENT, NOT A DERIVATION. It holds only while
   the cards hold those row counts and the strip stays collapsed. Add a
   fourth request row and every figure moves. Re-measure before
   trusting it — the cheapest way is to set the six custom properties
   on .sdash-page from the console and read .sdash-row-glance's bottom.

   EXPANDING A PHASE BAND adds its milestones' height and will push the
   page past the fold on the shorter bands. That is deliberate and NOT
   a case worth sizing for: it is disclosure the student asked for, on
   a strip that collapses again with the same click. What must fit
   unaided is the page as it ARRIVES. */

/* ============================================================
   NARROWER VIEWPORTS
   A track is DROPPED, never allowed to overflow.
   ============================================================ */

@media (max-width: 1080px) {
    .sdash-row-mid[b-vibzuz11a0]   { grid-template-columns: minmax(0, 1fr); }
    .sdash-row-glance[b-vibzuz11a0] { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
    .motiva-final .sdash-page[b-vibzuz11a0]  .m-card,
    .motiva-final .sdash-page[b-vibzuz11a0]  .m-card.m-card-padding-none,
    .motiva-final .sdash-page[b-vibzuz11a0]  .m-card.m-card-padding-small,
    .motiva-final .sdash-page[b-vibzuz11a0]  .m-card.m-card-padding-medium,
    .motiva-final .sdash-page[b-vibzuz11a0]  .m-card.m-card-padding-large,
    .motiva-final .sdash-row-glance[b-vibzuz11a0]  .m-card { padding-inline: 18px; }

    .sdash-page[b-vibzuz11a0]  .dfc-heading { font-size: 19px; }
}
/* /Pages/Dashboard/DashboardFocusCard.razor.rz.scp.css */
/* ============================================================
   DashboardFocusCard — "משימה קרובה להגשה"

   THE PAGE'S ONE LIFTED CARD. The mentor dashboard puts exactly one
   card on its three-hue glow — דורש את תשומת לבך, "what needs me now"
   — and this is the student's card with that job. The glow itself, the
   card's surface, inset and head geometry are supplied once in
   Dashboard.razor.css; what is left here is the card's own body.
   ============================================================ */

/* Fills its grid cell so the card ends level with the requests card
   beside it — the reference gives this section height:100% and pins its
   CTA to the bottom. */
.dfc-section[b-uozil61qbm] {
    display: flex;
    height: 100%;
}

/* The head's geometry and its title's type step are the shared .sd-head
   rules; this card's only difference is that its title takes the
   mentor's larger step, which Dashboard.razor.css sets. */

/* The card's radius, surface, glow, inset and hover all come from
   Dashboard.razor.css now, so this is the one thing left that has to be
   said here. ::deep is required: MCard's root is a component root, so
   this stylesheet's scope attribute never lands on it. */
[b-uozil61qbm] .dfc-card {
    width: 100%;
}

/* ── Body ─────────────────────────────────────────────────────
   V4: text block at the reading start capped at 520px, CTA pinned at the
   reading end and vertically centred against the whole block. */

/* Reference: one column — head row, title, reason, due, then the CTA
   pinned to the bottom. The previous side-by-side text/CTA arrangement
   belonged to the old hero-band composition and is not what the final
   dashboard draws. */
.dfc-body[b-uozil61qbm] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    height: 100%;
}

.dfc-main[b-uozil61qbm] {
    display: flex;
    flex-direction: column;
}

.dfc-main[b-uozil61qbm] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 520px;
}

[b-uozil61qbm] .dfc-flag {
    margin-inline-start: auto;
    flex: 0 0 auto;
}

.dfc-title[b-uozil61qbm] {
    margin: 0 0 10px;
    font-size: var(--motiva-font-size-h3, 18px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: var(--motiva-line-height-heading);
    color: var(--motiva-text-primary);
}

.dfc-reason[b-uozil61qbm] {
    margin: 0;
    font-size: var(--motiva-font-size-item, 14px);
    font-weight: var(--motiva-font-weight-regular);
    line-height: var(--motiva-line-height-body);
    color: var(--motiva-text-secondary);
}

/* SECONDARY TO THE PILL, and spaced away from it. The state now lives in
   the badge at the head of the card, so this line is the quieter half of
   one statement: a step down in size from .dfc-reason (14px) and in ink
   from the title, with a wider top margin so it does not crowd the
   paragraph above or read as part of it. */
.dfc-due[b-uozil61qbm] {
    margin: 14px 0 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.4;
    color: var(--motiva-text-muted);
    font-variant-numeric: tabular-nums;
}

.dfc-due-days[b-uozil61qbm] {
    font-weight: var(--motiva-font-weight-semibold);
}

/* The mentor's SOFTENED rose, matching the pill above and the attention
   card beside it — a pressing deadline is attention, not an alarm. */
.dfc-due-overdue[b-uozil61qbm] { color: #A9506B; }
.dfc-due-urgent[b-uozil61qbm]  { color: #A9506B; }
.dfc-due-normal[b-uozil61qbm]  { color: var(--motiva-text-muted); }

/* ── CTA ──────────────────────────────────────────────────────
   Styled as the Master's primary button but rendered as a span: the whole
   card is the activation target, so this is an affordance, not a second
   control. Kept off the tab order for the same reason. */

/* Geometry only. The fill, radius and states come from the shared
   `.motiva-cta` treatment in motiva-base.css, which this element carries —
   see the note there for why the primary look is not declared per page. */
.dfc-cta[b-uozil61qbm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    /* Reference: the CTA sits at the bottom of the card, pushed there so the
       card can stretch to its neighbour's height without the button floating
       away from the text it belongs to. */
    margin-block-start: auto;
    align-self: flex-end;
    padding: 13px 24px;
    font-size: var(--motiva-font-size-item, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    white-space: nowrap;
}

.dfc-cta-arrow[b-uozil61qbm] {
    font-size: 10px;
}

/* ── Responsive ───────────────────────────────────────────────
   Same 900px breakpoint the rest of the dashboard uses. The CTA drops
   below the text and stretches rather than squeezing beside it. */

@media (max-width: 900px) {
    .dfc-body[b-uozil61qbm] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--motiva-space-md);
    }

    .dfc-main[b-uozil61qbm] { max-width: none; }

    .dfc-cta[b-uozil61qbm] { justify-content: center; }
}


/* /Pages/Dashboard/DashboardResourcesSection.razor.rz.scp.css */
/* ============================================================
   DashboardResourcesSection — Motiva Student Dashboard V4:158-195
   ============================================================ */

.drs-section[b-y0ukwjwy02] { display: block; }

/* V4: section title with a hairline rule under it, 14px above the grid. */
.drs-head[b-y0ukwjwy02] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--motiva-space-sm);
    margin-block-end: 14px;
    padding-block-end: 8px;
    border-block-end: 1px solid var(--motiva-border-card, var(--motiva-border-subtle));
}

.drs-heading[b-y0ukwjwy02] {
    margin: 0;
    font-size: var(--motiva-font-size-h3);
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: var(--motiva-letter-spacing-section, normal);
    color: var(--motiva-text-primary);
    line-height: var(--motiva-line-height-heading);
    min-width: 0;
}

.drs-heading-stage[b-y0ukwjwy02] {
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-muted);
}

.drs-all[b-y0ukwjwy02] {
    flex-shrink: 0;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-color-violet, #4F46E5);
    text-decoration-line: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard);
}

.drs-all:hover[b-y0ukwjwy02] { text-decoration-color: currentColor; }

/* ── Grid ─────────────────────────────────────────────────────
   V4: three equal columns, 12px gap. Responsive per decision M.8. */

.drs-grid[b-y0ukwjwy02] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1060px) {
    .drs-grid[b-y0ukwjwy02] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .drs-grid[b-y0ukwjwy02] { grid-template-columns: minmax(0, 1fr); }
}

/* V4 draws these mini-cards at 14px, one step down from the 18px system
   card — they are the page's smallest ambient surface.

   The .m-card-ambientedge class is repeated for SPECIFICITY: MCard's own
   scoped rules carry its scope attribute, so a plain `::deep .drs-card`
   ties or loses on equal specificity and would depend on stylesheet
   order. Naming the class outranks them outright. */
[b-y0ukwjwy02] .drs-card {
    border-radius: var(--motiva-radius-md);
}

[b-y0ukwjwy02] .drs-card.m-card-padding-none {
    border-radius: calc(var(--motiva-radius-md) - 1px);
}

/* The whole card is the hit area, and it is a real <a>/<button>, so
   keyboard activation and the browser's own affordances come for free. */
.drs-hit[b-y0ukwjwy02] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 18px;
    border: 0;
    background: transparent;
    border-radius: inherit;
    font-family: inherit;
    color: var(--motiva-text-primary);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard);
}

.drs-hit:hover[b-y0ukwjwy02],
.drs-hit:focus-visible[b-y0ukwjwy02] {
    box-shadow: inset 0 0 0 2px rgba(79, 70, 229, 0.15);
    color: var(--motiva-text-primary);
}

.drs-hit:focus-visible[b-y0ukwjwy02] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

.drs-hit-inert[b-y0ukwjwy02] { cursor: default; }
.drs-hit-inert:hover[b-y0ukwjwy02] { box-shadow: none; }

/* The Motiva icon container, at the mini-card step.
   Same construction as every other one in the system — MKpiCard's .m-kpi-ic
   (30px) and the Knowledge Center row's .kc-row-icon (36px): a fixed square
   at --motiva-radius-sm, an 8% tint of the accent behind an accent-coloured
   16px glyph. The accent is the resource's OWN Knowledge Center accent, so
   the same file is drawn identically here and on /learning.

   The radius was a hardcoded 9px, the one value in this container that was
   not the shared token; at radius-sm it now matches its siblings exactly. */
.drs-icon[b-y0ukwjwy02] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--motiva-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--drs-accent, var(--motiva-color-violet));
    background: color-mix(in srgb, var(--drs-accent, #4F46E5) 8%, transparent);
}

.drs-text[b-y0ukwjwy02] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.drs-title[b-y0ukwjwy02] {
    font-size: var(--motiva-font-size-item, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drs-type[b-y0ukwjwy02] {
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-muted);
}

/* Empty milestone — one calm line, no card, no reserved space. */
.drs-none[b-y0ukwjwy02] {
    margin: 0;
    font-size: var(--motiva-font-size-body);
    color: var(--motiva-text-muted);
}

/* ── Video modal ──────────────────────────────────────────────
   Same shape as the Knowledge Center's player: the Master allows a soft
   elevated shadow on modals only. */

.drs-video-overlay[b-y0ukwjwy02] {
    position: fixed;
    inset: 0;
    z-index: var(--motiva-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--motiva-space-lg);
    background: rgba(26, 24, 32, 0.45);
    backdrop-filter: blur(4px);
}

.drs-video-modal[b-y0ukwjwy02] {
    width: min(860px, 100%);
    background: var(--motiva-surface-primary);
    border-radius: var(--motiva-radius-xl);
    box-shadow: var(--motiva-shadow-lg);
    padding: var(--motiva-space-lg);
}

.drs-video-head[b-y0ukwjwy02] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--motiva-space-md);
    margin-block-end: var(--motiva-space-md);
}

.drs-video-title[b-y0ukwjwy02] {
    margin: 0;
    font-size: var(--motiva-font-size-h2);
    font-weight: var(--motiva-font-weight-bold);
    color: var(--motiva-text-primary);
}

.drs-video-close[b-y0ukwjwy02] {
    border: 0;
    background: transparent;
    color: var(--motiva-text-muted);
    font-size: var(--motiva-font-size-h3, 18px);
    line-height: 1;
    cursor: pointer;
    padding: 2px;
}

.drs-video-close:hover[b-y0ukwjwy02] { color: var(--motiva-text-primary); }

.drs-video-frame[b-y0ukwjwy02] {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--motiva-radius-md);
    display: block;
}

.drs-video-fallback[b-y0ukwjwy02] {
    margin: 0;
    font-size: var(--motiva-font-size-body);
}

/* Retargeted with the final-design pass: the card is a PLAIN section card
   now, so its inset lands on the card itself rather than on an inner
   element. `.m-card-padding-none` is kept for specificity — it is what
   MCard's own zeroing rule matches. */
/* /Pages/Dashboard/MilestoneDetailModal.razor.rz.scp.css */
/* ============================================================
   MilestoneDetailModal — scoped styles (mdm- prefix)
   RTL layout · Motiva System Master tokens · mirrors TaskDetailModal

   Migrated with the student side. Tokens moved --g-* -> --motiva-*, and the
   legacy six-hue status palette folded onto the Master's three: teal for
   completed, violet for in-progress/approved, rose for delayed / returned /
   overdue / attention, neutral for not-started and for "submitted", which is
   waiting on the mentor rather than on the student. Layout untouched.
   ============================================================ */

/* ── Header ── */

.mdm-header-start[b-xnddoz3zk8] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.mdm-dot[b-xnddoz3zk8] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    flex-shrink: 0;
}

.mdm-dot .oi[b-xnddoz3zk8] { font-size: 16px; }

.mdm-header-titles[b-xnddoz3zk8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mdm-title[b-xnddoz3zk8] {
    font-size: var(--g-type-h2, 18px);
    font-weight: 700;
    color: var(--motiva-text-primary);
    margin: 0;
    line-height: 1.3;
    word-break: break-word;
}

.mdm-status-pill[b-xnddoz3zk8] {
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 600;
    border-radius: var(--motiva-radius-full);
    padding: 2px 10px;
    align-self: flex-start;
    letter-spacing: 0.02em;
}

/* ── Dates meta line ── */
/* Inside MModal's padded body: vertical rhythm and the rule only — the
   horizontal gutter is the shell's. */
.mdm-meta-line[b-xnddoz3zk8] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding-block-end: 12px;
    border-bottom: 1px solid var(--motiva-border-subtle);
    flex-shrink: 0;
}

.mdm-meta-item[b-xnddoz3zk8] {
    font-size: var(--g-type-secondary, 13px);
    color: var(--motiva-text-secondary);
}

.mdm-meta-key[b-xnddoz3zk8] {
    color: var(--motiva-text-muted);
    font-weight: 600;
    margin-left: 5px;
}

/* ── Body ── */
.mdm-body[b-xnddoz3zk8] {
    padding-block: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mdm-progress-row[b-xnddoz3zk8] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--g-type-secondary, 13px);
    color: var(--motiva-text-secondary);
    font-weight: 600;
}

.mdm-progress-row .oi[b-xnddoz3zk8] { color: var(--motiva-color-violet, var(--motiva-color-indigo)); font-size: var(--motiva-font-size-body, 14px); }

/* ── Attention banner ── */
.mdm-attention-banner[b-xnddoz3zk8] {
    background: var(--motiva-color-danger-bg);
    border: 1px solid rgba(217, 56, 100, 0.28);
    border-color: color-mix(in srgb, var(--motiva-color-rose, var(--motiva-color-danger)) 28%, transparent);
    border-radius: var(--motiva-radius-md);
    padding: 12px 14px;
}

.mdm-attention-header[b-xnddoz3zk8] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    font-size: var(--g-type-secondary, 13px);
}

.mdm-attention-header .oi[b-xnddoz3zk8] { font-size: var(--motiva-font-size-body, 14px); }

.mdm-attention-list[b-xnddoz3zk8] {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mdm-attention-list li[b-xnddoz3zk8] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    font-size: var(--motiva-font-size-meta, 12.5px);
}

.mdm-attention-task[b-xnddoz3zk8] { font-weight: 600; color: var(--motiva-text-primary); }
.mdm-attention-reason[b-xnddoz3zk8] { color: var(--motiva-color-rose-ink, var(--motiva-color-danger)); }

/* ── Section title ── */
.mdm-section-title[b-xnddoz3zk8] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--g-type-secondary, 13px);
    font-weight: 700;
    color: var(--motiva-text-primary);
    margin: 0;
}

.mdm-section-title .oi[b-xnddoz3zk8] { color: var(--motiva-text-muted); font-size: var(--motiva-font-size-body, 14px); }

.mdm-empty[b-xnddoz3zk8] {
    font-size: var(--g-type-secondary, 13px);
    color: var(--motiva-text-muted);
    font-style: italic;
    margin: 0;
}

/* ── Task list ── */
.mdm-task-list[b-xnddoz3zk8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mdm-task-item[b-xnddoz3zk8] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: right;
    background: var(--motiva-surface-primary);
    border: 1px solid var(--motiva-border-subtle);
    border-right: 3px solid var(--motiva-border-strong);
    border-radius: var(--motiva-radius-md);
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, transform 0.05s;
    font-family: inherit;
}

.mdm-task-item:hover[b-xnddoz3zk8] {
    background: var(--motiva-surface-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.mdm-task-item:active[b-xnddoz3zk8] { transform: scale(0.995); }

.mdm-task-status-icon[b-xnddoz3zk8] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--motiva-surface-secondary);
    color: var(--motiva-text-muted);
}

.mdm-task-status-icon .oi[b-xnddoz3zk8] { font-size: 12px; }

.mdm-task-main[b-xnddoz3zk8] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.mdm-task-title[b-xnddoz3zk8] {
    font-size: var(--g-type-secondary, 13px);
    font-weight: 600;
    color: var(--motiva-text-primary);
    word-break: break-word;
}

.mdm-task-title-done[b-xnddoz3zk8] {
    text-decoration: line-through;
    color: var(--motiva-text-muted);
}

.mdm-task-meta[b-xnddoz3zk8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    color: var(--motiva-text-muted);
}

.mdm-task-meta .oi[b-xnddoz3zk8] { font-size: var(--motiva-font-size-caption, 11px); }

.mdm-task-date[b-xnddoz3zk8],
.mdm-task-assignee[b-xnddoz3zk8],
.mdm-task-sub[b-xnddoz3zk8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mdm-date-overdue[b-xnddoz3zk8] { color: var(--motiva-color-rose, var(--motiva-color-danger)); font-weight: 600; }

.mdm-task-badge[b-xnddoz3zk8] {
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: 600;
    border-radius: var(--motiva-radius-full);
    padding: 2px 9px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

/* ── Status color variants (dots, pills, badges, left-border) ── */
.mdm-dot-completed[b-xnddoz3zk8]  { background: var(--motiva-color-success-bg); border-color: var(--motiva-color-teal); color: var(--motiva-color-teal); }
.mdm-dot-inprogress[b-xnddoz3zk8] { background: var(--motiva-color-brand-bg); border-color: var(--motiva-color-violet, var(--motiva-color-indigo)); color: var(--motiva-color-violet, var(--motiva-color-indigo)); }
.mdm-dot-delayed[b-xnddoz3zk8]    { background: var(--motiva-color-danger-bg); border-color: var(--motiva-color-rose, var(--motiva-color-danger)); color: var(--motiva-color-rose-ink, var(--motiva-color-danger)); }
.mdm-dot-notstarted[b-xnddoz3zk8] { background: var(--motiva-surface-secondary); border-color: var(--motiva-border-strong); color: var(--motiva-text-muted); }
.mdm-dot-attention[b-xnddoz3zk8]  { background: var(--motiva-color-danger-bg); border-color: var(--motiva-color-rose, var(--motiva-color-danger)); color: var(--motiva-color-rose-ink, var(--motiva-color-danger)); }

.mdm-sl-completed[b-xnddoz3zk8]  { background: var(--motiva-color-success-bg); color: var(--motiva-color-teal); }
/* The brand tone takes the finalized edge recipe, not a flat fill — see
   `--motiva-tag-brand-surface`. `.mdm-status-pill` is 2px/10px with no
   border, so the 1px edge comes out of the padding and the pill keeps its
   size. Completed / delayed / attention / notstarted are untouched. */
.mdm-sl-inprogress[b-xnddoz3zk8] {
    padding: 1px 9px;
    border: 1px solid transparent;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
}
.mdm-sl-delayed[b-xnddoz3zk8]    { background: var(--motiva-color-danger-bg); color: var(--motiva-color-rose-ink, var(--motiva-color-danger)); }
.mdm-sl-notstarted[b-xnddoz3zk8] { background: var(--motiva-surface-secondary); color: var(--motiva-text-muted); }
.mdm-sl-attention[b-xnddoz3zk8]  { background: var(--motiva-color-danger-bg); color: var(--motiva-color-rose-ink, var(--motiva-color-danger)); }

.mdm-badge-completed[b-xnddoz3zk8]  { background: var(--motiva-color-success-bg); color: var(--motiva-color-teal); }
/* Same recipe on the task badge. `.mdm-task-badge` is 2px/9px, so the
   border is paid for at 1px/8px. NOTE: `approved` below is also drawn in
   the brand tone rather than in teal — that is a pre-existing SEMANTIC
   choice, not a visual one, and re-toning it is not this pass's call; it
   gets the same edge treatment so the two at least agree with each
   other. */
.mdm-badge-inprogress[b-xnddoz3zk8] {
    padding: 1px 8px;
    border: 1px solid transparent;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
}
/* Blue was the third informational fill in a column that already had two;
   it joins the same edge. `.mdm-task-badge` is 2px/9px. */
.mdm-badge-submitted[b-xnddoz3zk8]  {
    padding: 1px 8px;
    border: 1px solid transparent;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
}
.mdm-badge-returned[b-xnddoz3zk8]   { background: var(--motiva-color-danger-bg); color: var(--motiva-color-rose-ink, var(--motiva-color-danger)); }
.mdm-badge-approved[b-xnddoz3zk8]   {
    padding: 1px 8px;
    border: 1px solid transparent;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
}
.mdm-badge-overdue[b-xnddoz3zk8]    { background: var(--motiva-color-danger-bg); color: var(--motiva-color-rose-ink, var(--motiva-color-danger)); }
.mdm-badge-notstarted[b-xnddoz3zk8] { background: var(--motiva-surface-secondary); color: var(--motiva-text-muted); }

.mdm-task-completed[b-xnddoz3zk8]  { border-right-color: var(--motiva-color-teal); }
.mdm-task-inprogress[b-xnddoz3zk8] { border-right-color: var(--motiva-color-violet, var(--motiva-color-indigo)); }
.mdm-task-submitted[b-xnddoz3zk8]  { border-right-color: var(--motiva-color-blue); }
.mdm-task-returned[b-xnddoz3zk8]   { border-right-color: var(--motiva-color-rose, var(--motiva-color-danger)); }
.mdm-task-approved[b-xnddoz3zk8]   { border-right-color: var(--motiva-color-violet, var(--motiva-color-indigo)); }
.mdm-task-overdue[b-xnddoz3zk8]    { border-right-color: var(--motiva-color-rose, var(--motiva-color-danger)); }
.mdm-task-notstarted[b-xnddoz3zk8] { border-right-color: var(--motiva-border-strong); }

/* ── Footer ── */
.mdm-footer[b-xnddoz3zk8] {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid var(--motiva-border-subtle);
    flex-shrink: 0;
}

.mdm-btn-ghost[b-xnddoz3zk8] {
    background: var(--motiva-surface-secondary);
    border: 1px solid var(--motiva-border-strong);
    color: var(--motiva-text-secondary);
    font-weight: 600;
    font-size: var(--g-type-secondary, 13px);
    padding: 8px 18px;
    border-radius: var(--motiva-radius-md);
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}

.mdm-btn-ghost:hover[b-xnddoz3zk8] { background: var(--motiva-border-subtle); }

/* ── Mobile ──
   The dialog itself (width, inset, max-height, internal scroll) is MModal's
   responsibility now; what is left here is content reflow. */
@media (max-width: 560px) {
    .mdm-task-badge[b-xnddoz3zk8] { display: none; } /* status border + icon already convey state */
}
/* ── Correction, final-design pass ───────────────────────────────────
   An earlier pass in this migration folded the legacy BLUE "submitted /
   in review" states onto violet or neutral, following the superseded
   "three semantic colours only" rule. The finalized student design
   keeps blue as its own role — in progress / assigned / awaiting review
   — alongside violet for action. The `-submitted` states above are
   restored to blue accordingly. (README.md §3.)
   ── */

/* ============================================================
   POLISH PASS — modal hierarchy, notes, journey progress

   Brings this modal up to the task-detail modal's weight: lighter
   rules, a calmer header, and feedback that reads as feedback rather
   than as an error.
   ============================================================ */

/* ── Chrome ──
   Only what the shell does NOT own. The surface, radius, shadow, scrim,
   header padding and close button moved to MModal; the divider colour on
   the two content rules this file still draws stays here. */
.motiva-student .mdm-meta-line[b-xnddoz3zk8],
.motiva-student .mdm-body[b-xnddoz3zk8] { border-color: var(--motiva-border-card); }

.motiva-student .mdm-title[b-xnddoz3zk8] {
    font-size: var(--motiva-font-size-h2, 20px);
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: var(--motiva-letter-spacing-section);
    line-height: 1.25;
}

/* The status dot was a 40px filled tile — oversized next to a 20px
   title. It becomes a quiet chip. */
.motiva-student .mdm-dot[b-xnddoz3zk8] {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: var(--motiva-radius-chip);
}

.motiva-student .mdm-dot .oi[b-xnddoz3zk8] { font-size: 12px; }

.motiva-student .mdm-meta-line[b-xnddoz3zk8] {
    padding-block: 0 14px;
    border-block-end: 1px solid var(--motiva-border-card);
    font-size: var(--motiva-font-size-meta, 12.5px);
    color: var(--motiva-text-subtle);
}

.motiva-student .mdm-meta-key[b-xnddoz3zk8] {
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-muted);
}

.motiva-student .mdm-body[b-xnddoz3zk8] { padding-block: 18px 24px; }

.motiva-student .mdm-section-title[b-xnddoz3zk8] {
    font-size: var(--motiva-font-size-item, 15px);
    font-weight: var(--motiva-font-weight-bold);
    color: var(--motiva-text-primary);
}

/* ── Journey progress ──
   One stage, drawn by MJourneyStepper. It has no connector to run to, so
   the dot is given breathing room rather than being squeezed against the
   label. */
.motiva-student .mdm-progress[b-xnddoz3zk8] {
    padding: 4px 0 16px;
    border-block-end: 1px solid var(--motiva-border-card);
    margin-block-end: 16px;
}

.motiva-student .mdm-progress[b-xnddoz3zk8]  .m-journey-stage { gap: 8px; }
.motiva-student .mdm-progress[b-xnddoz3zk8]  .m-journey-track { width: auto; }

/* ── Lecturer / mentor notes and the attention list ──
   These were a red-bordered, red-tinted, red-texted band — the visual
   grammar of an error. They are FEEDBACK: someone read the work and
   replied. Softened to a low-tint rose surface with ink-weight text and
   no border, so it still separates clearly from ordinary content while
   strong rose stays reserved for genuine blockers and destructive acts. */
.motiva-student .mdm-attention-banner[b-xnddoz3zk8] {
    background: rgba(224, 51, 95, 0.045);
    border: none;
    border-radius: var(--motiva-radius-md);
    padding: 12px 14px;
}

.motiva-student .mdm-attention-header[b-xnddoz3zk8] {
    color: var(--motiva-color-rose-ink);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold);
}

.motiva-student .mdm-attention-header .oi[b-xnddoz3zk8] { font-size: var(--motiva-font-size-caption, 12px); }

/* The task name is content, not an alarm — ink, not rose. */
.motiva-student .mdm-attention-task[b-xnddoz3zk8] {
    color: var(--motiva-text-primary);
    font-weight: var(--motiva-font-weight-semibold);
}

/* Only the REASON keeps the rose ink, and at metadata weight. */
.motiva-student .mdm-attention-reason[b-xnddoz3zk8] {
    color: var(--motiva-color-rose-ink);
    font-weight: var(--motiva-font-weight-medium);
    font-size: var(--motiva-font-size-meta, 12.5px);
}
/* /Pages/Dashboard/MilestoneJourneyModal.razor.rz.scp.css */
/* ============================================================
   MilestoneJourneyModal — the whole journey, in the dashboard's
   own vocabulary.

   NOTHING HERE IS A NEW DESIGN. The four state colours are the
   hero strip's (.sdh-phase-done/-now/-next/-later), the row
   geometry is the hero's expanded band row (.sdh-ms-row), the
   card chrome is MModal's, and the dates/labels follow
   MilestoneDetailModal's meta line. This file only arranges
   them.

   direction: rtl is inherited from the shell.
   ============================================================ */

/* ── Header ──────────────────────────────────────────────── */

.mjm-head[b-7iuhmmdkv7] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.mjm-head-icon[b-7iuhmmdkv7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.mjm-title[b-7iuhmmdkv7] {
    margin: 0;
    font-size: var(--motiva-font-size-h3, 17px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1.25;
    color: var(--motiva-text-primary);
}

/* ── Summary ─────────────────────────────────────────────── */

.mjm-summary[b-7iuhmmdkv7] {
    padding-block-end: 16px;
    margin-block-end: 4px;
    border-block-end: 1px solid rgba(27, 26, 34, 0.07);
}

.mjm-summary-line[b-7iuhmmdkv7] {
    margin: 0 0 11px;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.3;
    color: var(--motiva-text-muted);
}

/* The number carries the weight; the sentence around it stays quiet. */
.mjm-summary-count[b-7iuhmmdkv7] {
    font-size: var(--motiva-font-size-lg, 15px);
    font-weight: var(--motiva-font-weight-bold);
    color: var(--motiva-text-primary);
}

/* One segment per milestone, in its own state colour — the hero
   strip's 5px track, subdivided. Equal widths: every milestone is
   one unit of the journey regardless of how long it runs. */
.mjm-summary-track[b-7iuhmmdkv7] {
    display: flex;
    gap: 3px;
}

.mjm-seg[b-7iuhmmdkv7] {
    flex: 1 1 0;
    min-width: 0;
    height: 5px;
    border-radius: var(--motiva-radius-full);
    background: rgba(27, 26, 34, 0.09);
}

.mjm-seg-done[b-7iuhmmdkv7]  { background: var(--motiva-color-teal); }
.mjm-seg-now[b-7iuhmmdkv7]   { background: var(--motiva-color-violet); }
.mjm-seg-next[b-7iuhmmdkv7]  { background: rgba(46, 99, 232, 0.45); }
/* .mjm-seg-later keeps the flat track. */

/* ── The list ────────────────────────────────────────────── */

.mjm-list[b-7iuhmmdkv7] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mjm-row[b-7iuhmmdkv7] {
    border-block-end: 1px solid rgba(27, 26, 34, 0.06);
}

.mjm-row:last-child[b-7iuhmmdkv7] { border-block-end: 0; }

/* The row's face. A button shell and a div shell must be visually
   identical, so every box property lives here and the button adds
   only the reset. */
.mjm-row-main[b-7iuhmmdkv7] {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;

    padding-block: 12px;
    padding-inline: 4px;

    text-align: start;
    color: var(--motiva-text-primary);
}

.mjm-row-btn[b-7iuhmmdkv7] {
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
    border-radius: var(--motiva-radius-row);

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

/* Structural hover — the row's box, never its ink. The same rule
   .sdh-ms-row follows. */
.mjm-row-btn:hover[b-7iuhmmdkv7] { background: rgba(27, 26, 34, 0.025); }

.mjm-row-btn:focus-visible[b-7iuhmmdkv7] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .mjm-row-btn[b-7iuhmmdkv7] { transition: none; }
}

/* ── Rail and dot ────────────────────────────────────────── */

.mjm-row-rail[b-7iuhmmdkv7] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 19px;             /* centres the dot on the title's first line */
}

.mjm-dot[b-7iuhmmdkv7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    border-radius: 50%;

    background: transparent;
    box-shadow: inset 0 0 0 2px var(--motiva-text-faint);
    color: #fff;
}

.mjm-dot-done[b-7iuhmmdkv7] {
    background: var(--motiva-color-teal);
    box-shadow: none;
}

/* The current milestone is a ring, not a fill: it is where the
   student IS, not something finished. */
.mjm-dot-now[b-7iuhmmdkv7] {
    background: transparent;
    box-shadow: inset 0 0 0 3px var(--motiva-color-violet);
}

.mjm-dot-next[b-7iuhmmdkv7] {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--motiva-color-blue);
}

/* ── Row body ────────────────────────────────────────────── */

.mjm-row-body[b-7iuhmmdkv7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mjm-row-top[b-7iuhmmdkv7] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.mjm-row-title[b-7iuhmmdkv7] {
    min-width: 0;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.3;
    color: var(--motiva-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* THE CURRENT MILESTONE IS THE EMPHASIS. Full-strength ink and the
   bold step — one row on the list reads louder than the rest, which
   is the whole point of opening this view. */
.mjm-row-emphasis .mjm-row-title[b-7iuhmmdkv7] {
    color: var(--motiva-text-primary);
    font-weight: var(--motiva-font-weight-bold);
}

/* A finished milestone's name steps back but is never struck
   through — it is done, not cancelled. */
.mjm-row-done .mjm-row-title[b-7iuhmmdkv7] { color: var(--motiva-text-muted); }

.mjm-row-later .mjm-row-title[b-7iuhmmdkv7] { color: var(--motiva-text-muted); }

.mjm-row-dates[b-7iuhmmdkv7],
.mjm-row-counts[b-7iuhmmdkv7] {
    font-size: var(--motiva-font-size-count, 12px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.35;
    color: var(--motiva-text-subtle);
    font-variant-numeric: tabular-nums;
}

.mjm-row-hint[b-7iuhmmdkv7] {
    color: var(--motiva-color-blue);
    font-weight: var(--motiva-font-weight-semibold);
}

/* ── State pill ──────────────────────────────────────────── */

.mjm-pill[b-7iuhmmdkv7] {
    flex: 0 0 auto;
    padding: 2px 9px;
    border-radius: var(--motiva-radius-full);

    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 16px;
    white-space: nowrap;
}

.mjm-pill-done[b-7iuhmmdkv7] {
    background: rgba(13, 156, 154, 0.11);
    color: #0A7B79;
}

.mjm-pill-now[b-7iuhmmdkv7] {
    background: rgba(79, 70, 229, 0.11);
    color: var(--motiva-color-violet);
}

.mjm-pill-next[b-7iuhmmdkv7] {
    background: rgba(28, 127, 184, 0.11);
    color: #15688F;
}

/* עתידית stays hue-free: it is the absence of a state, not a state.
   An opaque ink mix rather than a surface token — those are
   translucent and would let the canvas's violet wash through. */
.mjm-pill-later[b-7iuhmmdkv7] {
    background: rgba(27, 26, 34, 0.05);
    color: var(--motiva-text-muted);
}

/* ── The next-milestone preview ──────────────────────────── */

.mjm-preview[b-7iuhmmdkv7] {
    margin-block-end: 12px;
    margin-inline-start: 28px;   /* aligns under the title, clear of the rail */
    padding: 11px 13px;

    border-radius: var(--motiva-radius-row);
    background: rgba(27, 26, 34, 0.028);
}

.mjm-preview-empty[b-7iuhmmdkv7],
.mjm-preview-list[b-7iuhmmdkv7] { margin: 0; }

.mjm-preview-list[b-7iuhmmdkv7] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0;
    list-style: none;
}

/* EVERY ITEM IS A <li>, never a control. Nothing here is focusable,
   nothing is bound, and the cursor stays default — the surface is
   readable and inert by construction, not by a disabled attribute
   that could be re-enabled. */
.mjm-preview-item[b-7iuhmmdkv7] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding-block: 6px;
}

.mjm-prev-kind[b-7iuhmmdkv7] {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: var(--motiva-radius-full);

    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 15px;
    white-space: nowrap;
}

.mjm-prev-kind-task[b-7iuhmmdkv7] {
    background: rgba(27, 26, 34, 0.055);
    color: var(--motiva-text-muted);
}

/* A submission is the heavier of the two obligations, so it keeps the
   brand tint as an EDGE rather than a flat fill. */
.mjm-prev-kind-sub[b-7iuhmmdkv7] {
    background: rgba(79, 70, 229, 0.07);
    box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.22);
    color: var(--motiva-color-violet);
}

.mjm-prev-title[b-7iuhmmdkv7] {
    min-width: 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.35;
    color: var(--motiva-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mjm-prev-due[b-7iuhmmdkv7] {
    flex: 0 0 auto;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-subtle);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mjm-preview-empty[b-7iuhmmdkv7] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-subtle);
}

/* The locked note. Information, not a warning — no rose, no alert
   glyph, no border. It explains a normal state of the world. */
.mjm-locked[b-7iuhmmdkv7] {
    display: flex;
    align-items: center;
    gap: 6px;

    margin: 9px 0 0;
    padding-block-start: 9px;
    border-block-start: 1px solid rgba(27, 26, 34, 0.06);

    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.3;
    color: var(--motiva-text-muted);
}

.mjm-locked-ico[b-7iuhmmdkv7] {
    display: inline-flex;
    flex: 0 0 auto;
    opacity: 0.7;
}

/* ── Empty ───────────────────────────────────────────────── */

.mjm-empty[b-7iuhmmdkv7] {
    margin: 0;
    padding-block: 22px;
    text-align: center;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-subtle);
}

/* ── Narrow ──────────────────────────────────────────────── */

@media (max-width: 560px) {
    /* The pill drops under the title rather than squeezing it. */
    .mjm-row-top[b-7iuhmmdkv7] { flex-wrap: wrap; gap: 6px; }
    .mjm-row-title[b-7iuhmmdkv7] { white-space: normal; }

    .mjm-preview[b-7iuhmmdkv7] { margin-inline-start: 0; }

    /* The due date wraps to its own line before the title is crushed. */
    .mjm-preview-item[b-7iuhmmdkv7] { grid-template-columns: auto minmax(0, 1fr); }
    .mjm-prev-due[b-7iuhmmdkv7] { grid-column: 2; }
}
/* /Pages/Dashboard/OpenRequestsCard.razor.rz.scp.css */
/* ============================================================
   OpenRequestsCard — "דורש התייחסות"

   The card's own inset, head and rows now come from the shared
   treatment in Dashboard.razor.css, which is the mentor dashboard's
   (MentorHomePage.razor.css) transcribed. This file carries only what
   is this card's alone.

   Row geometry and dividers come from MRow, restyled page-wide to the
   mentor's row grammar. The surface is the mentor's solid white card —
   no tinted background of any kind, and the violet accent stays on the
   per-row dot and the per-row status pill.
   ============================================================ */

/* The card supplies its own padding now (the mentor's 20/24/14), so the
   body is a plain column that fills it. */
.orc-body[b-rw1j2c1dko] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0;
}

/* The head's geometry is the shared .sd-head rule. No hairline under it:
   the mentor carries that boundary as 8px of air, and a rule under six
   headings on one screen reads as six tables. */
.orc-head[b-rw1j2c1dko] {
    border-block-end: 0;
}

/* The attention icon uses the Motiva rose (same token as the Rose badge and
   the overdue state) rather than the gradient, because this card's head is
   itself an alert signal, not a neutral category label. Layout properties
   mirror .motiva-ico-gradient so the glyph sits identically. */
/* Mirrors the layout of .sd-head-icon (Dashboard.razor.css) but uses the
   Motiva alert red instead of violet. The sd-head-icon class is intentionally
   absent from the span so the dashboard's violet override cannot reach it. */
.orc-head-icon-rose[b-rw1j2c1dko] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--motiva-color-rose-ink);
}
/* /Pages/Dashboard/RecentUpdatesSection.razor.rz.scp.css */
/* ============================================================
   RecentUpdatesSection — Motiva Student Dashboard V4:199-216
   ============================================================ */

/* V4 inner padding: 11px top / 20px sides / 22px bottom — no MCard
   padding step lands on it, so Padding="None" plus this inset. */
/* flex:1 — MCard Fill makes .m-card-inner a full-height flex column, but a
   column's children still size to their content on the main axis. */
/* The card supplies its own padding now — the mentor dashboard's
   20/24/14 — so the body is a plain column that fills it. */
.rus-body[b-o4iztk5e6k] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0;
}

/* Geometry and type come from the shared .sd-head rule. No hairline
   under it: the mentor carries that boundary as 8px of air. */
.rus-head[b-o4iztk5e6k] {
    border-block-end: 0;
}

/* ── Rows ─────────────────────────────────────────────────────
   A row is a real <button>: activating it marks the update read and
   navigates, so it must be reachable and announced as a control. */

.rus-list[b-o4iztk5e6k] {
    display: flex;
    flex-direction: column;
}

.rus-row[b-o4iztk5e6k] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    /* The mentor's row inset — the density scale's block padding and the
       page-wide 2px inline, so this list lines up with the MRow lists in
       the cards beside it. */
    padding-block: var(--sd-row-py, 11px);
    padding-inline: 2px;
    border: 0;
    border-block-end: 1px solid rgba(27, 26, 34, 0.06);
    border-radius: 0;
    background: transparent;
    color: var(--motiva-text-primary);
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.rus-row:last-child[b-o4iztk5e6k] { border-block-end: 0; }

/* THE ROW HOVERS ITS BOX, NEVER ITS INK. This drew violet text, which made
   an update title read as an action under the cursor and put the product's
   action colour on something that is only being pointed at. The wash is
   MRow's, so every list on this dashboard answers the pointer the same
   way. */
.rus-row:hover[b-o4iztk5e6k] {
    background: rgba(27, 26, 34, 0.025);
    border-radius: var(--motiva-radius-row);
    color: var(--motiva-text-primary);
}

.rus-row:focus-visible[b-o4iztk5e6k] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
    border-radius: var(--motiva-radius-row);
}

/* FINAL DESIGN — unread is a violet dot and a bold title, nothing more.
   The tinted row fill this used to draw was V4's treatment; the finalized
   Notifications popover has no filled rows at all, and three stacked
   lavender blocks read as an alert state rather than a feed. Read rows
   are dimmed instead, which is what the reference does. */
.rus-row-unread[b-o4iztk5e6k] {
    background: transparent;
}

.rus-row:not(.rus-row-unread)[b-o4iztk5e6k] { opacity: 0.62; }

.rus-row-unread:hover[b-o4iztk5e6k],
.rus-row:hover[b-o4iztk5e6k] { opacity: 1; }

/* The mentor's 6px key dot, centred on the row rather than hung from
   its top edge — the row is one line now. */
.rus-dot[b-o4iztk5e6k] {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: var(--motiva-radius-full);
    background: transparent;
}

.rus-dot-unread[b-o4iztk5e6k] { background: var(--motiva-color-violet, #4F46E5); }

.rus-row-body[b-o4iztk5e6k] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Read rows step down in weight AND ink, so unread/read is carried by
   two signals rather than colour alone. */
.rus-row-title[b-o4iztk5e6k] {
    font-size: var(--motiva-font-size-item, 14px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-secondary);
    line-height: var(--motiva-line-height-heading);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rus-row-unread .rus-row-title[b-o4iztk5e6k] {
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
}

.rus-row-time[b-o4iztk5e6k] {
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-muted);
}

/* ── Loading ── */

.rus-loading[b-o4iztk5e6k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--motiva-space-sm);
    padding: var(--motiva-space-lg) 0;
    font-size: var(--motiva-font-size-body);
    color: var(--motiva-text-muted);
}

.rus-spinner[b-o4iztk5e6k] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--motiva-border-subtle);
    border-top-color: var(--motiva-color-violet, #4F46E5);
    border-radius: var(--motiva-radius-full);
    animation: rus-spin-b-o4iztk5e6k 0.75s linear infinite;
}

@keyframes rus-spin-b-o4iztk5e6k { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .rus-spinner[b-o4iztk5e6k] { animation-duration: 2s; }
}

.rus-sr-only[b-o4iztk5e6k] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Viewport density pass ───────────────────────────────────────────
   The composition is unchanged; only vertical air was removed, so the
   journey, the middle row and the glance row share a laptop viewport
   instead of spanning two screens. Type sizes are untouched. */


/* ============================================================
   POLISH PASS — one row per update, time at the far end

   The title and timestamp used to stack in a column, which made every
   update two lines tall and gave the date the same visual weight as the
   thing it dates. They share one line now: title at the reading start,
   time pushed to the physical LEFT (inline-end in RTL) and stepped down
   in size, weight and colour so it reads as metadata.
   ============================================================ */

.motiva-student .rus-row[b-o4iztk5e6k] {
    align-items: center;
    gap: 10px;
    padding-block: var(--sd-row-py, 11px);
    padding-inline: 2px;
}

/* The old column wrapper is gone from the markup; the title is a direct
   child now and takes the free space. */
.motiva-student .rus-row-title[b-o4iztk5e6k] {
    flex: 1;
    min-width: 0;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.35;
    color: var(--motiva-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.motiva-student .rus-row-time[b-o4iztk5e6k] {
    flex: 0 0 auto;
    margin-inline-start: auto;   /* RTL: pushes to the physical left */
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-subtle);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Read rows already dim as a whole; the title should not ALSO drop weight,
   or an unread and a read row stop being comparable at a glance. */
.motiva-student .rus-row:not(.rus-row-unread) .rus-row-title[b-o4iztk5e6k] {
    font-weight: var(--motiva-font-weight-medium);
}
/* /Pages/Dashboard/StudentDashboardHero.razor.rz.scp.css */
/* ============================================================
   StudentDashboardHero — the greeting and "מסע הפרויקט".

   The rules that painted the old ambient band, its two-ended context
   line and the read-only milestone checklist are gone with the markup
   they styled; MPageHeader draws the greeting and the strip below
   draws the journey.

   direction: rtl is inherited from the shell.
   ============================================================ */

/* ============================================================
   THE PHASE STRIP — "מסע הפרויקט"

   VISUAL SOURCE: ProjectWorkspace.razor.css ".pw-stages", the
   mentor project workspace's phase strip. Equal-width bands on a grid,
   a 5px rounded track each, then dot · name · a quiet detail line, and
   the same four-state colour logic. Transcribed, with two student-side
   additions that are both already in this experience's own vocabulary:

     the count chip   the neutral pill MSectionHeading uses for a count

   The band is a BUTTON, not a listitem: it expands its own milestones
   under the strip, so it must be focusable and operable from the
   keyboard. The mentor strip is inert because nothing opens from it.
   ============================================================ */

/* The greeting card and the "מסע הפרויקט" card are two page blocks, stacked at
   the page's own row rhythm — the same gap .sdash-page puts between every other
   pair of blocks. The greeting used to be an ambient band whose own padding did
   this; as the finalized white MPageHeaderCard it needs the gap on the stack. */
.sdh-open[b-ocmlz4dhcr] {
    display: flex;
    flex-direction: column;
    gap: var(--sd-row-gap);
}

.sdh-phases[b-ocmlz4dhcr] {
    display: grid;
    grid-template-columns: repeat(var(--sdh-phase-count, 4), minmax(0, 1fr));
    gap: 10px;
    align-items: start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sdh-phase[b-ocmlz4dhcr] { min-width: 0; }

/* The whole band is the hit target. Reset to a bare block so the
   button contributes nothing of its own. */
.sdh-phase-btn[b-ocmlz4dhcr] {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.sdh-phase-btn:focus-visible[b-ocmlz4dhcr] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 4px;
    border-radius: var(--motiva-radius-sm);
}

.sdh-phase-track[b-ocmlz4dhcr] {
    display: block;
    height: 5px;
    border-radius: var(--motiva-radius-full);
    background: rgba(27, 26, 34, 0.09);
}

.sdh-phase-name[b-ocmlz4dhcr] {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin-block-start: 11px;
}

.sdh-phase-dot[b-ocmlz4dhcr] {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--motiva-text-subtle);
}

.sdh-phase-text[b-ocmlz4dhcr] {
    min-width: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.2;
    color: var(--motiva-text-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* How many milestones the band holds — the quiet neutral count pill,
   never a semantic one: the number is a size, not a state. */
.sdh-phase-count-chip[b-ocmlz4dhcr] {
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;

    border-radius: var(--motiva-radius-full);
    background: rgba(27, 26, 34, 0.05);
    color: var(--motiva-text-muted);

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

.sdh-phase-detail[b-ocmlz4dhcr] {
    display: block;
    margin-block-start: 5px;
    padding-inline-start: 14px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.3;
    color: var(--motiva-text-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── The four states ─────────────────────────────────────────
   The mentor strip's own semantics on this experience's four-role
   palette: teal is finished, violet is where the project is now, blue
   is assigned-but-not-started, and בהמשך stays quiet. */

.sdh-phase-done .sdh-phase-track[b-ocmlz4dhcr] { background: var(--motiva-color-teal); }
.sdh-phase-done .sdh-phase-dot[b-ocmlz4dhcr]   { background: var(--motiva-color-teal); }
.sdh-phase-done .sdh-phase-text[b-ocmlz4dhcr]  { color: var(--motiva-text-secondary); }

.sdh-phase-now .sdh-phase-track[b-ocmlz4dhcr] { background: var(--motiva-color-violet); }
.sdh-phase-now .sdh-phase-dot[b-ocmlz4dhcr]   { background: var(--motiva-color-violet); }
.sdh-phase-now .sdh-phase-text[b-ocmlz4dhcr]  { color: var(--motiva-text-primary); font-weight: var(--motiva-font-weight-bold); }
.sdh-phase-now .sdh-phase-detail[b-ocmlz4dhcr] { color: var(--motiva-color-violet); font-weight: var(--motiva-font-weight-semibold); }

.sdh-phase-next .sdh-phase-track[b-ocmlz4dhcr] { background: rgba(46, 99, 232, 0.45); }
.sdh-phase-next .sdh-phase-dot[b-ocmlz4dhcr]   { background: var(--motiva-color-blue); }
.sdh-phase-next .sdh-phase-text[b-ocmlz4dhcr]  { color: var(--motiva-text-primary); font-weight: var(--motiva-font-weight-bold); }
.sdh-phase-next .sdh-phase-detail[b-ocmlz4dhcr] { color: var(--motiva-text-muted); }

/* Hovering a band lifts its own name to the reading ink — and stops there.
   The current and next bands used to escalate that to violet, which is the
   one hue this product reserves for "act on this"; a band under the cursor
   is not that. Dark ink is the whole feedback. */
.sdh-phase-btn:hover .sdh-phase-text[b-ocmlz4dhcr] { color: var(--motiva-text-primary); }

/* ── The expanded band ───────────────────────────────────────
   Opened IN PLACE under the strip, exactly as the mentor dashboard
   opens an attention group. Every row is a real milestone and still
   opens that milestone's own modal. */

/* A GRID, NOT A COLUMN — and that is what finally fixes the stretch.

   Capping the row alone was half the job: the rows stopped running
   edge-to-edge, but on a ~1660px card a single right-aligned column left
   ~1000px of empty surface beside them, which is the same imbalance the
   other way round. Flowing them into auto-filled columns fills the card
   with compact rows instead, and lands them under the band strip above at
   roughly its own column rhythm.

   auto-fill with a 340px floor, so the count follows the card: three
   columns on a laptop, two on a narrow shell, one on a phone — no
   breakpoint of its own to keep in step with .sdh-phases. */
.sdh-phase-items[b-ocmlz4dhcr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 2px 18px;
    align-content: start;

    margin-block-start: 14px;
    padding-block-start: 12px;
    border-block-start: 1px solid rgba(27, 26, 34, 0.06);
}

/* FOUR COLUMNS NOW — dot · name · date · chevron.

   AND A MAX-WIDTH, which is the actual fix for the stretch. On a laptop
   this card is ~1660px wide, so `1fr` gave the milestone NAME a 1589px
   column: the title sat at one edge of the screen and its date at the
   other, with a quarter-metre of nothing between two facts about the same
   milestone. Capping the row groups them into one readable unit and leaves
   the CARD's own width untouched — the dashboard grid is not involved. */
.sdh-ms-row[b-ocmlz4dhcr] {
    display: grid;
    grid-template-columns: 7px minmax(0, 1fr) auto 13px;
    align-items: center;
    gap: 11px;
    width: 100%;
    box-sizing: border-box;

    padding-block: 8px;
    padding-inline: 6px;

    background: none;
    border: 0;
    font: inherit;
    text-align: start;
    color: var(--motiva-text-primary);
    cursor: pointer;

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

/* Structural hover — the row's box, never its ink. The chevron is the
   exception: it lifts out of its resting grey so the affordance answers
   the cursor, and slides a hair along the reading direction. */
.sdh-ms-row:hover[b-ocmlz4dhcr] {
    background: rgba(27, 26, 34, 0.025);
    border-radius: var(--motiva-radius-row);
    color: var(--motiva-text-primary);
}

.sdh-ms-row:hover .sdh-ms-chev[b-ocmlz4dhcr] {
    color: var(--motiva-text-secondary);
    transform: translateX(2px);
}

.sdh-ms-row:focus-visible[b-ocmlz4dhcr] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
    border-radius: var(--motiva-radius-row);
}

@media (prefers-reduced-motion: reduce) {
    .sdh-ms-row[b-ocmlz4dhcr] { transition: none; }
}

.sdh-ms-dot[b-ocmlz4dhcr] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--motiva-text-faint);
}

.sdh-ms-dot-done[b-ocmlz4dhcr] { background: var(--motiva-color-teal); }
.sdh-ms-dot-now[b-ocmlz4dhcr]  { background: var(--motiva-color-violet); }

.sdh-ms-title[b-ocmlz4dhcr] {
    min-width: 0;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.3;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sdh-ms-due[b-ocmlz4dhcr] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-subtle);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── The three date tones ────────────────────────────────────
   ROSE IS FOR ONE THING ONLY: a deadline that has passed while the
   student can still act on it. It used to paint every past date, which
   meant a milestone whose window closed months ago — nothing to do, no
   one at fault — wore the same alarm as a live overdue one.

   See DueTone() for which is which; these only colour the answer. */

/* Completed. Teal, the product's finished colour, rather than the grey it
   shared with "no date at all". */
.sdh-ms-due-done[b-ocmlz4dhcr] { color: var(--motiva-color-teal); }

/* Genuinely overdue — window still open, the student can still act. */
.sdh-ms-due-late[b-ocmlz4dhcr] { color: #A9506B; }

/* Everything else, including a closed window: history, not a warning.
   Inherits .sdh-ms-due's own subtle ink; stated so the class is visible
   to a reader grepping for it. */
.sdh-ms-due-quiet[b-ocmlz4dhcr] { color: var(--motiva-text-subtle); }

/* ── The row chevron ─────────────────────────────────────────
   The affordance, not the hit area — the whole row is the button. Quiet
   at rest so a list of them does not read as a column of arrows. */
.sdh-ms-chev[b-ocmlz4dhcr] {
    flex: 0 0 auto;
    color: var(--motiva-text-faint);
    transition: color     var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                transform var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

@media (prefers-reduced-motion: reduce) {
    .sdh-ms-chev[b-ocmlz4dhcr] { transition: none; }
}

/* ── The compact completion pill ─────────────────────────────
   THE RECIPE IS NOT HERE. It is `.motiva-journey-pill` in
   motiva-base.css, beside `.motiva-journey-open` — the affordance it sits
   inside — because /project's journey head now states the same milestone
   count the same way, and one pill drawn two ways is two pills.

   Nothing is restated here on purpose: a scoped rule compiles to
   (0,2,0) and would tie the shared `:hover`, which loads earlier, and
   silently win it. Same trap documented on .sdh-journey-count. */


/* ── Narrow viewports ────────────────────────────────────────
   The mentor strip's own fold: four bands to two, then to one. A band
   is never allowed to squeeze below a readable name. */

@media (max-width: 1080px) {
    .sdh-phases[b-ocmlz4dhcr] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
}

@media (max-width: 620px) {
    .sdh-phases[b-ocmlz4dhcr] { grid-template-columns: minmax(0, 1fr); }
}

/* ── The count on the journey head ───────────────────────────
   Spacing between the greeting and the card, and the card's own
   margins, come from the page's density scale in Dashboard.razor.css —
   the row gap is the single thing that spaces the bands. */

/* The journey card's own margins are retired: the page's row gap is the
   single thing that spaces the bands now, exactly as on the mentor
   dashboard, and the greeting's inset is MPageHeader's — both set in
   Dashboard.razor.css from the shared density scale. Two gaps doing one
   job is what made this step drift out of the scale in the first place. */

/* ── The count, as the way into the journey ──────────────────
   THE BUTTON RECIPE IS NOT HERE. It is `.motiva-journey-open` in
   motiva-base.css, shared with /project's journey card — both screens
   state this same sentence beside a "מסע הפרויקט" heading and both open
   the same dialog from it, so the affordance has one definition rather
   than one per page.

   WHAT IS LEFT HERE IS PLACEMENT ONLY, and that is not tidiness — it is
   required. A scoped rule compiles to `.sdh-journey-count[b-hash]`,
   (0,2,0), which TIES with `.motiva-journey-open:hover`; scoped styles
   load after motiva-base.css, so on a tie the scoped rule wins and the
   hover colour silently never applies. Restating colour or type here
   would therefore break the shared hover rather than merely repeat it. */
.sdh-journey-count[b-ocmlz4dhcr] {
    margin-inline-start: auto;
    flex: 0 0 auto;

    /* The summary is two stacked lines now, so the button aligns them to
       the reading edge and centres the chevron against the pair. */
    align-items: center;
}

/* /Pages/Dashboard/TeamTasksCard.razor.rz.scp.css */
/* ============================================================
   TeamTasksCard — "משימות צוות"

   The card's surface, inset, head and row rhythm come from the shared
   treatment in Dashboard.razor.css, which is the mentor dashboard's
   (MentorHomePage.razor.css) transcribed. What is left here is this
   card's own four-column row and its two controls.
   ============================================================ */

/* The card supplies its own padding now — the mentor dashboard's
   20/24/14 — so the body is a plain column that fills it. */
.ttc-body[b-pddoxb6pjm] {
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* ── Head ─────────────────────────────────────────────────────
   glyph · title + quiet sub-label · "ראה הכל" · the "+", all on the
   one row the mentor's heads are. */

/* Geometry and type come from the shared .sd-head rule; no hairline
   under it, as on the mentor dashboard. */
.ttc-head[b-pddoxb6pjm] {
    border-block-end: 0;
}

/* Title over its sub-label, so the head keeps the mentor's single-row
   height when the sub-label is narrow enough to sit beside it and
   stacks cleanly when it is not. Takes the free width, which is what
   pushes "ראה הכל" and the "+" to the head's reading end. */
.ttc-head-text[b-pddoxb6pjm] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}

.ttc-subtitle[b-pddoxb6pjm] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-subtle);
}

/* The create affordance — a 26px square at this card's own 9px radius,
   sized to a head that is now the height of its title rather than of a
   28px chip. */
.ttc-add[b-pddoxb6pjm] {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    align-self: center;
    margin-inline-start: 2px;
    padding: 0;
    border: 0;
    /* Geometry only — 28px square at its own 9px radius, which is this card's
       rhythm and not the CTA radius. The gradient fill, hover, press and focus
       ring come from the shared `.motiva-cta` treatment (motiva-base.css) this
       button carries: an icon-only create action is still a create action. */
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--motiva-font-size-caption, 11px);
}

/* ── Rows ─────────────────────────────────────────────────────
   checkbox · title (flexible) · 24px initials · due. Not MRow — this
   row has four distinct columns that must line up across rows, which a
   start/end row cannot express. The floor, the block padding and the
   ink-only hover are the mentor's shared row treatment. */

.ttc-list[b-pddoxb6pjm] {
    display: flex;
    flex-direction: column;
}

.ttc-row[b-pddoxb6pjm] {
    display: grid;
    /* col order in RTL: check(right) · assignee(24px) · title(1fr) · due(left)
       Assignee anchors to the reading-start edge; title fills the gap;
       due date sits at the reading-end edge — consistent regardless of
       initials length or date string length. */
    grid-template-columns: auto 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding-block: var(--sd-row-py, 11px);
    padding-inline: 2px;
    border-block-end: 1px solid rgba(27, 26, 34, 0.06);
}

.ttc-row:last-child[b-pddoxb6pjm] { border-block-end: 0; }

/* Backed by a real API (TeamTasks.Toggle), unlike the hero's read-only
   checklist. */
/* The mentor dashboard's compact control: 17px at radius 5 over a
   violet hairline. The CHECKED fill stays teal — in the finalized
   student palette teal is "done · synced · team task", and recolouring
   it would break the student's own semantic to match a page that has
   no team-task concept at all. Geometry adopted, meaning preserved. */
.ttc-check[b-pddoxb6pjm] {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    box-sizing: border-box;
    border: 1px solid rgba(109, 40, 245, 0.22);
    border-radius: 5px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.ttc-check:hover[b-pddoxb6pjm] {
    border-color: rgba(109, 40, 245, 0.4);
    background: rgba(109, 40, 245, 0.05);
}

.ttc-check-on[b-pddoxb6pjm],
.ttc-check-on:hover[b-pddoxb6pjm] {
    background: var(--motiva-color-teal, #0D9C9A);
    border-color: var(--motiva-color-teal, #0D9C9A);
}

.ttc-check:focus-visible[b-pddoxb6pjm] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.ttc-check-mark[b-pddoxb6pjm] { line-height: 1; font-size: var(--motiva-font-size-caption, 10px); }

/* Title + calendar marker inside the single 1fr column, so adding the marker
   did not add a fifth column that every unscheduled row would pay for. The
   title still ellipsises; the marker never shrinks. Flex order is source
   order, so RTL puts the marker after the title without a direction rule. */
.ttc-row-main[b-pddoxb6pjm] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ttc-row-title[b-pddoxb6pjm] {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: var(--motiva-font-size-body);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-primary);
    text-align: start;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Structural hover. The title is a <button> inside a grid row rather than a
   row of its own, so the wash is padded out with a matching box-shadow
   spread — it reads as a soft field around the text and moves nothing. */
.ttc-row-title:hover[b-pddoxb6pjm] {
    background: rgba(27, 26, 34, 0.045);
    border-radius: var(--motiva-radius-sm);
    box-shadow: 0 0 0 3px rgba(27, 26, 34, 0.045);
    color: var(--motiva-text-primary);
}

.ttc-row-title:focus-visible[b-pddoxb6pjm] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
    border-radius: var(--motiva-radius-sm);
}

/* The Tasks page's marker at this card's scale: caption size and the same
   muted ink as .ttc-due and .ttc-subtitle, so it reads as row metadata beside
   the due date rather than as a second title. */
.ttc-gcal[b-pddoxb6pjm] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-regular);
    color: var(--motiva-text-muted);
    white-space: nowrap;
}

.ttc-gcal .oi[b-pddoxb6pjm] { font-size: var(--motiva-font-size-caption, 10px); }

.ttc-assignee[b-pddoxb6pjm] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-surface-secondary);
    color: var(--motiva-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold);
}

/* The mentor's plain tabular meta. Deliberately NOT its due PILL: that
   pill encodes ahead / late / done, and this card computes no such
   state — a coloured pill here would assert something the data has
   never said about a team task. */
.ttc-due[b-pddoxb6pjm] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-muted);
    font-variant-numeric: tabular-nums;
    text-align: end;
    white-space: nowrap;
}

/* "ראה הכל" moved into the head — see the .razor. Its look is the
   shared .sd-head-link rule. */

/* ── Loading ── */

.ttc-loading[b-pddoxb6pjm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--motiva-space-sm);
    padding: var(--motiva-space-lg) 0;
    font-size: var(--motiva-font-size-body);
    color: var(--motiva-text-muted);
}

.ttc-spinner[b-pddoxb6pjm] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--motiva-border-subtle);
    border-top-color: var(--motiva-color-violet, #4F46E5);
    border-radius: var(--motiva-radius-full);
    animation: ttc-spin-b-pddoxb6pjm 0.75s linear infinite;
}

@keyframes ttc-spin-b-pddoxb6pjm { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .ttc-spinner[b-pddoxb6pjm] { animation-duration: 2s; }
}

/* On narrow viewports the assignee chip is the first thing to go — the
   name is still on the row's title tooltip and inside the edit modal. */
@media (max-width: 640px) {
    .ttc-row[b-pddoxb6pjm] { grid-template-columns: auto minmax(0, 1fr) auto; }
    .ttc-assignee[b-pddoxb6pjm] { display: none; }

    /* The title needs the width back before the marker's words do: the icon
       alone still says "scheduled", and the tooltip still spells it out. */
    .ttc-gcal span:last-child[b-pddoxb6pjm] { display: none; }
}

/* ============================================================
   The team-wide chip and the row's own type steps
   ============================================================ */

/* The team chip is quieter than an initials chip: a glyph, not a label,
   because "everyone" is the absence of an owner rather than an owner. */
.motiva-student .ttc-assignee-team[b-pddoxb6pjm] {
    background: transparent;
    color: var(--motiva-text-subtle);
    box-shadow: inset 0 0 0 1px var(--motiva-border-card);
}

.motiva-student .ttc-assignee-team svg[b-pddoxb6pjm] { display: block; }

.motiva-student .ttc-row-title[b-pddoxb6pjm] {
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
}

/* Row padding, the due date's step and the sub-label's now come from
   the shared scale above, so the three literals this block used to
   re-declare are gone rather than left to compete with it. */

/* The title and its info tip on one baseline. The tip LEADS the row in
   RTL terms — it sits immediately after the title at the reading edge —
   so the heading is never pushed off its line by the trigger. */
.ttc-title-row[b-pddoxb6pjm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
/* /Pages/Dashboard/UpcomingSubmissionsCard.razor.rz.scp.css */
/* ============================================================
   UpcomingSubmissionsCard — "הגשות ומועדים קרובים"

   THE DATE BLOCK, from the mentor dashboard's בקרוב list
   (MentorHomePage.razor.css ".mh-up-*"): a 46px tile carrying day over
   month, the entry beside it, and the relative phrasing at the row's
   end. Transcribed, not approximated.

   The card's surface, inset and head come from the shared treatment in
   Dashboard.razor.css.
   ============================================================ */

.usc-body[b-a8azrxp42i] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0;
}

.usc-head[b-a8azrxp42i] {
    border-block-end: 0;
}

/* ── The list ─────────────────────────────────────────────────
   Every row sits on a hairline floor with none on the last, and
   hovers its INK rather than painting a wash — the mentor's shared
   row treatment. */

.usc-list[b-a8azrxp42i] {
    display: flex;
    flex-direction: column;
}

.usc-row[b-a8azrxp42i] {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    width: 100%;
    box-sizing: border-box;

    padding-block: var(--sd-row-py, 11px);
    padding-inline: 2px;

    background: none;
    border: 0;
    border-block-end: 1px solid rgba(27, 26, 34, 0.06);
    font: inherit;
    text-align: start;
    color: var(--motiva-text-primary);
    cursor: pointer;

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

.usc-row:last-child[b-a8azrxp42i] { border-block-end: 0; }

/* Structural hover — the row's box, never its ink. */
.usc-row:hover[b-a8azrxp42i] {
    background: rgba(27, 26, 34, 0.025);
    border-radius: var(--motiva-radius-row);
    color: var(--motiva-text-primary);
}

.usc-row:focus-visible[b-a8azrxp42i] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
    border-radius: var(--motiva-radius-row);
}

@media (prefers-reduced-motion: reduce) {
    .usc-row[b-a8azrxp42i] { transition: none; }
}

/* ── The tile ─────────────────────────────────────────────────
   The fill never changes, so the column reads as a column of dates;
   the 2.5px inset bar is the only thing that carries a semantic. Two
   hues, matching the mentor's own escalation rule: rose while the
   deadline is pressing, blue otherwise. */

.usc-tile[b-a8azrxp42i] {
    display: block;
    overflow: hidden;
    padding: 6px 0 5px;

    border-radius: 9px;
    text-align: center;
    /* Panel fill. Was rgba(255,255,255,.9) — a fourth white for a tile that
       sits on a white card, so it was never actually translucent-for-a-reason.
       The border and the INSET semantic bar are untouched: the bar is what
       carries the urgency hue and must not be folded into the panel shadow. */
    background: var(--motiva-panel-surface, #FFFFFF);
    border: 1px solid rgba(27, 26, 34, 0.10);
    box-shadow: inset 0 2.5px 0 #2E63E8;
}

/* The mentor dashboard's softened rose, not the student scope's
   #E0335F — a pressing deadline is attention, not an alarm. */
.usc-tile-urgent[b-a8azrxp42i] { box-shadow: inset 0 2.5px 0 #D9738F; }

.usc-day[b-a8azrxp42i] {
    display: block;
    font-size: var(--motiva-font-size-lg, 16px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1;
    color: var(--motiva-text-primary);
    font-variant-numeric: tabular-nums;
}

.usc-month[b-a8azrxp42i] {
    display: block;
    margin-block-start: 3px;
    font-size: var(--motiva-font-size-caption, 10px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-subtle);
}

/* ── The entry ───────────────────────────────────────────────── */

.usc-entry[b-a8azrxp42i] { min-width: 0; }

.usc-row-title[b-a8azrxp42i] {
    display: block;
    min-width: 0;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.35;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.usc-row-sub[b-a8azrxp42i] {
    display: block;
    min-width: 0;
    margin-block-start: 3px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1;
    color: var(--motiva-text-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── The relative phrasing ───────────────────────────────────
   Plain 13px meta while the deadline is comfortable — nothing is
   wrong yet, so nothing is chipped. A pressing one takes the mentor's
   soft rose pill, so lateness is never carried by colour alone. */

.usc-when[b-a8azrxp42i] {
    flex: 0 0 auto;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.usc-when-urgent[b-a8azrxp42i] {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;

    border-radius: var(--motiva-radius-full);
    font-size: var(--motiva-font-size-caption, 11.5px);
    color: #A9506B;
    background: rgba(196, 97, 124, 0.10);
}

/* The row is a single line of title now that the grey subtitle under it is
   withdrawn — centred against the date tile instead of top-aligned to a
   two-line stack that no longer exists. .usc-row-sub keeps its rule: the
   record still carries Subtitle and nothing else was removed. */
.usc-entry[b-a8azrxp42i] { justify-content: center; }
/* /Pages/Files/StudentFilesPage.razor.rz.scp.css */
/* ============================================================
   StudentFilesPage — scoped styles
   Prefix: sfp-
   ============================================================ */

/* ── Page wrapper ─────────────────────────────────────────── */

.sfp-page[b-77v3luu4jl] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Loading / error / empty states ──────────────────────── */

.sfp-loading[b-77v3luu4jl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 80px 0;
    color: var(--g-text-muted);
    font-family: var(--g-font-base);
    font-size: var(--g-type-secondary);
}

.sfp-spinner[b-77v3luu4jl] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--g-border);
    border-top-color: var(--g-accent);
    border-radius: var(--g-radius-full);
    animation: sfp-spin-b-77v3luu4jl 0.75s linear infinite;
}

@keyframes sfp-spin-b-77v3luu4jl {
    to { transform: rotate(360deg); }
}

.sfp-state-msg[b-77v3luu4jl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 0;
    font-family: var(--g-font-base);
    font-size: var(--g-type-secondary);
    color: var(--g-text-muted);
    text-align: center;
}

.sfp-state-msg .oi[b-77v3luu4jl] { font-size: 28px; }
.sfp-error[b-77v3luu4jl]         { color: var(--g-danger); }

.sfp-empty[b-77v3luu4jl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 60px 0;
    color: var(--g-text-muted);
    font-family: var(--g-font-base);
    font-size: var(--g-type-secondary);
    text-align: center;
    background: var(--g-bg-surface);
    border-radius: var(--g-radius-md);
    border: 1px dashed var(--g-border);
}

.sfp-empty .oi[b-77v3luu4jl] { font-size: 32px; opacity: 0.5; }

/* ── Page header card ─────────────────────────────────────── */
/* The header SURFACE is now <MPageHeaderCard> (the shared .motiva-panel
   card). Only the leading icon chip stays page-scoped — it is passed into
   the component's Leading slot. */

.sfp-page-icon[b-77v3luu4jl] {
    width: 46px;
    height: 46px;
    border-radius: var(--g-radius-sm);
    background: var(--g-accent-active-bg);
    color: var(--g-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

/* ── Accordion ────────────────────────────────────────────── */

.sfp-accordion[b-77v3luu4jl] {
    background: var(--g-bg-surface);
    border-radius: var(--g-radius-md);
    box-shadow: var(--g-shadow-sm);
    border: 1px solid var(--g-border-light);
    overflow: hidden;
}

.sfp-accordion-head[b-77v3luu4jl] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--g-font-base);
    text-align: start;
    transition: background 0.15s ease;
    direction: rtl;
}

.sfp-accordion-head:hover[b-77v3luu4jl] {
    background: var(--g-bg-hover);
}

.sfp-accordion-chevron[b-77v3luu4jl] {
    font-size: 11px;
    color: var(--g-text-muted);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.sfp-folder-icon[b-77v3luu4jl] {
    font-size: 16px;
    color: var(--g-accent);
    flex-shrink: 0;
}

.sfp-accordion-title[b-77v3luu4jl] {
    font-size: var(--motiva-font-size-item, 15px);
    font-weight: 700;
    color: var(--g-text-primary);
    flex: 1;
}

.sfp-accordion-count[b-77v3luu4jl] {
    font-size: var(--motiva-font-size-count, 12px);
    font-weight: 600;
    color: var(--g-text-muted);
    background: var(--g-bg-hover);
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.sfp-accordion-body[b-77v3luu4jl] {
    border-top: 1px solid var(--g-border-light);
}

/* ── Videos body ──────────────────────────────────────────── */

.sfp-videos-body[b-77v3luu4jl] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Single video card ────────────────────────────────────── */

.sfp-video-card[b-77v3luu4jl] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--g-border-light);
    transition: background 0.13s ease;
}

.sfp-video-card:last-child[b-77v3luu4jl] { border-bottom: none; }
.sfp-video-card:hover[b-77v3luu4jl]       { background: var(--g-bg-hover); }

/* Left thumbnail area */
.sfp-video-card-left[b-77v3luu4jl] { flex-shrink: 0; }

.sfp-video-thumb-wrap[b-77v3luu4jl] {
    position: relative;
    width: 160px;
    height: 90px;
    border-radius: var(--g-radius-sm);
    background: var(--g-accent-active-bg);
    color: var(--g-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.sfp-video-thumb-img[b-77v3luu4jl] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Semi-transparent play button overlay on thumbnail */
.sfp-video-thumb-overlay[b-77v3luu4jl] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    transition: background 0.15s ease;
}

.sfp-video-card:hover .sfp-video-thumb-overlay[b-77v3luu4jl] {
    background: rgba(0, 0, 0, 0.5);
}

.sfp-video-thumb-play[b-77v3luu4jl] {
    font-size: var(--motiva-font-size-h2, 20px);
    color: #fff;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}

.sfp-video-thumb-icon[b-77v3luu4jl] { font-size: 24px; }

/* Right content area */
.sfp-video-card-body[b-77v3luu4jl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.sfp-video-title-row[b-77v3luu4jl] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sfp-video-title[b-77v3luu4jl] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-item, 15px);
    font-weight: 700;
    color: var(--g-text-primary);
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.sfp-video-desc[b-77v3luu4jl] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--g-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.sfp-video-actions[b-77v3luu4jl] { margin-top: 2px; }

/* ── Watch / action button ────────────────────────────────── */

.sfp-watch-btn[b-77v3luu4jl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: var(--g-accent-active-bg);
    color: var(--g-accent);
    border: 1px solid var(--g-accent);
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.sfp-watch-btn:hover[b-77v3luu4jl] { opacity: 0.82; }

/* ── Video modal ──────────────────────────────────────────── */

.sfp-modal-backdrop[b-77v3luu4jl] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.sfp-modal[b-77v3luu4jl] {
    background: var(--g-bg-surface);
    border-radius: var(--g-radius-md);
    box-shadow: 0 8px 40px rgba(0,0,0,0.28);
    width: 100%;
    max-width: 760px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sfp-modal-header[b-77v3luu4jl] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--g-border-light);
    flex-shrink: 0;
}

.sfp-modal-title[b-77v3luu4jl] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-item, 15px);
    font-weight: 700;
    color: var(--g-text-primary);
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.sfp-modal-close[b-77v3luu4jl] {
    width: 32px;
    height: 32px;
    border-radius: var(--g-radius-sm);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--g-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--motiva-font-size-sm, 13px);
    flex-shrink: 0;
    transition: background 0.13s, color 0.13s;
}

.sfp-modal-close:hover[b-77v3luu4jl] {
    background: var(--g-bg-hover);
    color: var(--g-text-primary);
}

.sfp-modal-body[b-77v3luu4jl] {
    padding: 20px;
    overflow-y: auto;
}

/* 16:9 responsive iframe wrapper */
.sfp-modal-video-wrap[b-77v3luu4jl] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--g-radius-sm);
    overflow: hidden;
    background: #000;
}

.sfp-modal-iframe[b-77v3luu4jl] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Fallback for non-embeddable videos */
.sfp-modal-external[b-77v3luu4jl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 32px 0;
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-body, 14px);
    color: var(--g-text-muted);
    text-align: center;
}

.sfp-modal-external p[b-77v3luu4jl] { margin: 0; }

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 600px) {
    .sfp-video-thumb-wrap[b-77v3luu4jl] {
        width: 100px;
        height: 56px;
    }

    .sfp-file-card[b-77v3luu4jl] {
        flex-wrap: wrap;
    }

    .sfp-file-action-btn[b-77v3luu4jl] {
        width: 100%;
        justify-content: center;
        margin-top: 4px;
    }
}

/* ── File cards ───────────────────────────────────────────── */

.sfp-file-card[b-77v3luu4jl] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--g-border-light);
    transition: background 0.13s ease;
}

.sfp-file-card:last-child[b-77v3luu4jl] { border-bottom: none; }
.sfp-file-card:hover[b-77v3luu4jl]       { background: var(--g-bg-hover); }

/* ── File icon — base ─────────────────────────────────────── */

.sfp-file-icon-wrap[b-77v3luu4jl] {
    width: 42px;
    height: 42px;
    border-radius: var(--g-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    /* default colour — overridden by modifier classes below */
    background: var(--g-accent-active-bg);
    color: var(--g-accent);
}

/* ── Icon colour by file type ─────────────────────────────── */

.sfp-file-icon-pdf[b-77v3luu4jl]          { background: #fff1f0; color: #e03131; }
.sfp-file-icon-image[b-77v3luu4jl]        { background: #e8f4fd; color: #1971c2; }
.sfp-file-icon-archive[b-77v3luu4jl]      { background: #fff8e1; color: #e67700; }
.sfp-file-icon-spreadsheet[b-77v3luu4jl]  { background: #ebfbee; color: #2f9e44; }
.sfp-file-icon-presentation[b-77v3luu4jl] { background: #f3f0ff; color: #7048e8; }
.sfp-file-icon-default[b-77v3luu4jl]      { background: var(--g-accent-active-bg); color: var(--g-accent); }

/* ── File info ────────────────────────────────────────────── */

.sfp-file-info[b-77v3luu4jl] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.sfp-file-name[b-77v3luu4jl] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: 600;
    color: var(--g-text-primary);
    word-break: break-word;
    line-height: 1.3;
}

.sfp-file-desc[b-77v3luu4jl] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-caption, 12px);
    color: var(--g-text-secondary);
    line-height: 1.4;
}

.sfp-file-meta[b-77v3luu4jl] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    flex-wrap: wrap;
}

.sfp-file-date[b-77v3luu4jl] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-caption, 11px);
    color: var(--g-text-muted);
    white-space: nowrap;
}

/* ── Badges ───────────────────────────────────────────────── */

/* Default tag: white paper under the Motiva gradient edge, dark ink.
   `--motiva-tag-brand-surface`, the product's one tag recipe. The edge is
   paid for out of the padding so the pill's outer box does not move. */
.sfp-ms-badge[b-77v3luu4jl] {
    display: inline-block;
    padding: 2px 9px;
    border: 1px solid transparent;
    border-radius: 20px;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 600;
    white-space: nowrap;
}

.sfp-task-badge[b-77v3luu4jl] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    background: #f0fdf4;
    color: #15803d;
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 600;
    white-space: nowrap;
    text-align: center;
}

/* ── File action button (הורדה / פתיחה) ──────────────────── */

.sfp-file-action-btn[b-77v3luu4jl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--g-accent-active-bg);
    color: var(--g-accent);
    border: 1.5px solid var(--g-accent);
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
}

.sfp-file-action-btn:hover[b-77v3luu4jl] { opacity: 0.78; }
/* /Pages/Forms/FormFillPage.razor.rz.scp.css */
/* ============================================================
   FormFillPage — מילוי טופס (student)
   Prefix: ffl-

   The student side of the admin form editor. It reuses the finished
   student visual language (Motiva tokens, the card/question rhythm of
   /student/assignment) rather than inventing a form skin: a student who has
   filled the assignment form should recognise this immediately.

   A reading column, not a working canvas — hence the max-width. This is the
   one place in the flow where a measured line length matters more than
   filling the viewport.

   Design tokens: motiva-tokens.css, resolved by the shell.
   ============================================================ */

.ffl-page[b-eaheedpo3i] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 780px;
    min-width: 0;
    margin-inline: auto;
    padding-block-end: 56px;
}

/* ── Head ────────────────────────────────────────────────── */
.ffl-head[b-eaheedpo3i] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 2px 0;
}

/* PAGE TITLE — the shared h1 step. Values live in motiva-tokens.css; never restate them here. */
.ffl-h1[b-eaheedpo3i] {
    margin: 0;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-h1, 38px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: var(--motiva-line-height-tight, 1.1);
    letter-spacing: var(--motiva-letter-spacing-page, -0.035em);
    color: var(--motiva-text-primary, #1B1A22);
}

.ffl-head-meta[b-eaheedpo3i] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ffl-cycle[b-eaheedpo3i] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
    unicode-bidi: isolate;
}

/* Same chip recipe as the admin list and editor — one status language
   across the three screens. */
.ffl-status[b-eaheedpo3i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--motiva-radius-full, 999px);
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
}

.ffl-status-dot[b-eaheedpo3i] {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.ffl-status--open[b-eaheedpo3i]      { color: #1E7F63; background: rgba(42, 160, 126, 0.10); }
.ffl-status--open .ffl-status-dot[b-eaheedpo3i] { background: #2AA07E; }
.ffl-status--scheduled[b-eaheedpo3i] { color: #2E55C4; background: rgba(62, 107, 224, 0.10); }
.ffl-status--scheduled .ffl-status-dot[b-eaheedpo3i] { background: #3E6BE0; }
.ffl-status--closed[b-eaheedpo3i]    { color: var(--motiva-text-secondary, #4A4657); background: rgba(27, 26, 34, 0.06); }
.ffl-status--closed .ffl-status-dot[b-eaheedpo3i] { background: #9B96A8; }
.ffl-status--draft[b-eaheedpo3i]     { color: #9A6A10; background: rgba(217, 161, 59, 0.13); }
.ffl-status--draft .ffl-status-dot[b-eaheedpo3i] { background: #D9A13B; }

/* ── Instructions ────────────────────────────────────────── */
.ffl-instructions[b-eaheedpo3i] {
    padding: 14px 18px;
    border-radius: var(--motiva-radius-md, 14px);
    background: var(--motiva-color-neutral-bg, rgba(27, 26, 34, 0.02));
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.6;
    color: var(--motiva-text-secondary, #5B5568);
    white-space: pre-wrap;
}

/* ── Banners ─────────────────────────────────────────────── */
.ffl-banner[b-eaheedpo3i] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 13px 16px;
    border-radius: var(--motiva-radius-md, 14px);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.5;
}

.ffl-banner svg[b-eaheedpo3i] { flex: 0 0 auto; }

.ffl-banner--ok[b-eaheedpo3i] {
    background: rgba(42, 160, 126, 0.09);
    border: 1px solid rgba(42, 160, 126, 0.24);
    color: #1E7F63;
}

.ffl-banner--info[b-eaheedpo3i] {
    background: var(--motiva-tag-brand-surface, rgba(79, 70, 229, 0.06));
    border: 1px solid color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 20%, transparent);
    color: var(--motiva-text-secondary, #4A4657);
}

/* A closed window is a fact, not a failure — neutral, not red. Red here is
   reserved for the student's own validation errors. */
.ffl-banner--closed[b-eaheedpo3i] {
    background: rgba(27, 26, 34, 0.04);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    color: var(--motiva-text-secondary, #4A4657);
}

.ffl-banner--error[b-eaheedpo3i] {
    background: color-mix(in srgb, var(--motiva-color-rose, #C2506D) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--motiva-color-rose, #C2506D) 22%, transparent);
    color: var(--motiva-color-rose-ink, #A33C56);
}

.ffl-banner-action[b-eaheedpo3i] {
    margin-inline-start: auto;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-color-violet, #4F46E5);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ffl-banner-action:focus-visible[b-eaheedpo3i] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
    border-radius: var(--motiva-radius-xs, 6px);
}

/* ── Blocks ──────────────────────────────────────────────── */
.ffl-blocks[b-eaheedpo3i] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* An information block is not a card — it is a break in the list, so it
   carries no border and no number. */
.ffl-info[b-eaheedpo3i] {
    padding: 8px 2px 0;
}

.ffl-info-title[b-eaheedpo3i] {
    margin: 0 0 6px;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-item, 16px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.3;
    color: var(--motiva-text-primary, #1A1820);
}

.ffl-info-text[b-eaheedpo3i] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.65;
    color: var(--motiva-text-secondary, #5B5568);
    white-space: pre-wrap;
}

.ffl-block[b-eaheedpo3i] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    border-radius: var(--motiva-radius-lg, 18px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    box-shadow: 0 1px 2px rgba(27, 26, 34, 0.04), 0 10px 26px -24px rgba(27, 26, 34, 0.25);
    transition: border-color var(--motiva-motion-duration-fast, 150ms) var(--motiva-motion-easing-standard, ease-out);
}

/* An unanswered required question after a submit attempt. The edge carries
   it — the card is not filled red. */
.ffl-block--invalid[b-eaheedpo3i] {
    border-color: color-mix(in srgb, var(--motiva-color-rose, #C2506D) 45%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--motiva-color-rose, #C2506D) 12%, transparent);
}

.ffl-q[b-eaheedpo3i] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.ffl-q-num[b-eaheedpo3i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    margin-top: 1px;
    border-radius: var(--motiva-radius-xs, 8px);
    background: var(--motiva-surface-hover, rgba(27, 26, 34, 0.045));
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1;
    color: var(--motiva-text-secondary, #6B6779);
    font-variant-numeric: tabular-nums;
}

.ffl-q-text[b-eaheedpo3i] { min-width: 0; }

/* The required marker is its own flex child so the RTL bidi run does not
   drag the asterisk to the wrong end of the question. */
.ffl-q-title[b-eaheedpo3i] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 0;
    font-size: var(--motiva-font-size-body, 14.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.45;
    color: var(--motiva-text-primary, #1A1820);
}

.ffl-req[b-eaheedpo3i] {
    flex: 0 0 auto;
    color: var(--motiva-color-rose, #C2506D);
    font-weight: var(--motiva-font-weight-bold, 700);
}

.ffl-q-help[b-eaheedpo3i] {
    margin: 5px 0 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.55;
    color: var(--motiva-text-muted, #8B8698);
}

.ffl-answer[b-eaheedpo3i] { padding-inline-start: 35px; }

/* ── Choices ─────────────────────────────────────────────── */
.ffl-choices[b-eaheedpo3i] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ffl-choice[b-eaheedpo3i] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--motiva-radius-sm, 11px);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-color-neutral-bg, rgba(27, 26, 34, 0.015));
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.4;
    color: var(--motiva-text-primary, #1A1820);
    cursor: pointer;
    transition:
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.ffl-choice:hover[b-eaheedpo3i] { border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 26%, transparent); }

/* Selected — brand edge on white, never a filled violet row. */
.ffl-choice--on[b-eaheedpo3i] {
    background: #fff;
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 45%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 12%, transparent);
    font-weight: var(--motiva-font-weight-semibold, 600);
}

.ffl-choice input[b-eaheedpo3i] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    accent-color: var(--motiva-color-violet, #4F46E5);
    cursor: pointer;
}

.ffl-choice:has(input:disabled)[b-eaheedpo3i] { cursor: default; opacity: 0.75; }
.ffl-choice input:disabled[b-eaheedpo3i] { cursor: default; }

.ffl-choice:focus-within[b-eaheedpo3i] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* ── Rating ──────────────────────────────────────────────── */
.ffl-rating[b-eaheedpo3i] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Wraps rather than scrolls: a 1–10 scale on a narrow screen should fold to
   two rows, not hide half its buttons behind a horizontal scroller. */
.ffl-scale[b-eaheedpo3i] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.ffl-scale-btn[b-eaheedpo3i] {
    width: 42px;
    height: 42px;
    border-radius: var(--motiva-radius-sm, 11px);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-color-neutral-bg, rgba(27, 26, 34, 0.015));
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 14px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition:
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.ffl-scale-btn:hover:not(:disabled)[b-eaheedpo3i] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 30%, transparent);
    background: #fff;
}

/* The chosen rung is the one filled control on the page — a single value
   deserves the emphasis a checkbox list does not. */
.ffl-scale-btn--on[b-eaheedpo3i] {
    background: var(--motiva-color-violet, #4F46E5);
    border-color: var(--motiva-color-violet, #4F46E5);
    color: #fff;
    font-weight: var(--motiva-font-weight-bold, 700);
}

.ffl-scale-btn:disabled[b-eaheedpo3i] { cursor: default; opacity: 0.75; }

.ffl-scale-btn:focus-visible[b-eaheedpo3i] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

.ffl-scale-labels[b-eaheedpo3i] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #8B8698);
}

/* ── Text inputs ─────────────────────────────────────────── */
.ffl-input[b-eaheedpo3i],
.ffl-textarea[b-eaheedpo3i] {
    width: 100%;
    height: var(--motiva-control-height-lg, 42px);
    padding: 0 13px;
    border-radius: var(--motiva-radius-sm, 11px);
    border: 1px solid var(--motiva-border-input, rgba(27, 26, 34, 0.12));
    background: #fff;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-primary, #1A1820);
    outline: none;
}

.ffl-textarea[b-eaheedpo3i] {
    height: auto;
    min-height: 92px;
    padding: 11px 13px;
    line-height: 1.6;
    resize: vertical;
}

.ffl-input:focus[b-eaheedpo3i],
.ffl-textarea:focus[b-eaheedpo3i] { border-color: var(--motiva-color-violet, #4F46E5); }

.ffl-input:disabled[b-eaheedpo3i],
.ffl-textarea:disabled[b-eaheedpo3i] {
    background: var(--motiva-color-neutral-bg, rgba(27, 26, 34, 0.02));
    color: var(--motiva-text-secondary, #5B5568);
    cursor: default;
}

.ffl-unsupported[b-eaheedpo3i] {
    margin: 0;
    padding: 11px 14px;
    border-radius: var(--motiva-radius-sm, 10px);
    background: var(--motiva-color-neutral-bg, rgba(27, 26, 34, 0.025));
    border: 1px dashed var(--motiva-border-input, rgba(27, 26, 34, 0.14));
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #8B8698);
}

/* ── Actions ─────────────────────────────────────────────── */
.ffl-actions[b-eaheedpo3i] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}

.ffl-submit[b-eaheedpo3i] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: var(--motiva-control-height-lg, 44px);
    padding: 0 26px;
    border: 0;
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
}

.ffl-submit:disabled[b-eaheedpo3i] { opacity: 0.65; cursor: default; }

.ffl-btn-ghost[b-eaheedpo3i] {
    padding: 0 16px;
    height: var(--motiva-control-height-lg, 44px);
    border: 0;
    background: none;
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-secondary, #5B5568);
    cursor: pointer;
}

.ffl-btn-ghost:hover[b-eaheedpo3i] { background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035)); }
.ffl-btn-ghost:disabled[b-eaheedpo3i] { opacity: 0.5; cursor: default; }

.ffl-submit:focus-visible[b-eaheedpo3i],
.ffl-btn-ghost:focus-visible[b-eaheedpo3i] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

.ffl-spinner[b-eaheedpo3i] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    animation: ffl-spin-b-eaheedpo3i 0.7s linear infinite;
    flex: 0 0 auto;
}

@keyframes ffl-spin-b-eaheedpo3i { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .ffl-spinner[b-eaheedpo3i] { animation-duration: 2.4s; }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
    .ffl-h1[b-eaheedpo3i] { font-size: 24px; }
    /* The answer's indent under the question number costs more than it gives
       once the column is this narrow. */
    .ffl-answer[b-eaheedpo3i] { padding-inline-start: 0; }
    .ffl-block[b-eaheedpo3i] { padding: 16px; }
    .ffl-actions[b-eaheedpo3i] { justify-content: stretch; }
    .ffl-submit[b-eaheedpo3i] { flex: 1 1 auto; justify-content: center; }
}
/* /Pages/Learning/KnowledgeCategoryCard.razor.rz.scp.css */
/* ============================================================
   KnowledgeCategoryCard — the Design's .catwrap / .catcard
   (motiva-student.css:74-81, rendered at Motiva Resources.dc.html:171-209)

   Design values reproduced exactly: 16px radius, 16px padding, 10px gap,
   38px/11px icon tile, 14px/600 label, and the three-step border that
   thickens 1px -> 1.5px -> 2px across rest / hover / active.
   ============================================================ */

.kc-cat[b-4x0vdzko7b] {
    position: relative;
    min-width: 0;
}

.kc-cat-card[b-4x0vdzko7b] {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    gap: 10px;              /* Design value; the scale steps 8 -> 16 */

    /* Design values. 16px radius sits above --motiva-radius-md (14px) and
       below -lg (18px); 16px padding sits between --motiva-space-md (16px)
       — which does match — and is written as the token accordingly. */
    border: 0;
    border-radius: 16px;
    padding: var(--motiva-space-md);

    background: var(--motiva-surface-primary);
    font-family: inherit;
    text-align: start;
    cursor: pointer;
}

/* ── The three-state border ───────────────────────────────────
   Drawn as a masked ::before rather than a border so the thickness can
   animate without shifting the card's content box by a pixel. The mask
   pair punches out the interior, leaving only the padding ring painted.
   (-webkit- prefixes retained: Safari still needs them for mask-composite.)

   Rest is a flat hairline (Design #EAE7F0); the gradient appears only on
   interaction. Hover and active read the shared Master edge tokens rather
   than restating literals, so the card follows the palette into dark mode.
   The Design's own hover sweep peaks slightly stronger than
   --motiva-gradient-edge (.40 vs .30 alpha); the resting token is used
   instead so the rest -> hover -> active progression stays token-driven,
   and the 1 -> 1.5 -> 2px thickening still carries the state change. */
.kc-cat-card[b-4x0vdzko7b]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    padding: 1px;
    background: var(--motiva-border-card, var(--motiva-border-subtle));

    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;

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

.kc-cat-card:hover[b-4x0vdzko7b]::before {
    padding: 1.5px;
    background: var(--motiva-gradient-edge);
}

/* Design: the open state settles almost instantly (transition-duration .05s)
   so the card does not appear to lag behind the panel opening below it. */
.kc-cat-card-open[b-4x0vdzko7b]::before {
    padding: 2px;
    background: var(--motiva-gradient-edge-active, var(--motiva-gradient-edge));
    transition-duration: 50ms;
}

.kc-cat-card:focus-visible[b-4x0vdzko7b] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

/* Design: .catcard > * { position:relative; z-index:1 } — keeps content
   above the ::before ring. */
.kc-cat-card > *[b-4x0vdzko7b] {
    position: relative;
    z-index: 1;
}

/* ── Icon tile ───────────────────────────────────────────────
   Design: 38x38, 11px radius, background tint(accent, .08) rising to .12
   when open, glyph in the accent itself. color-mix reproduces the
   prototype's tint() helper without needing a second hex per category. */

.kc-cat-icon[b-4x0vdzko7b] {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--kc-accent);
    background: color-mix(in srgb, var(--kc-accent) 8%, transparent);
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.kc-cat-card-open .kc-cat-icon[b-4x0vdzko7b] {
    background: color-mix(in srgb, var(--kc-accent) 12%, transparent);
}

/* ── Text ────────────────────────────────────────────────────── */

.kc-cat-text[b-4x0vdzko7b] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Design: 14px / 600 / line-height 1.3 */
.kc-cat-label[b-4x0vdzko7b] {
    font-size: var(--motiva-font-size-item, var(--motiva-font-size-sm));
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.3;
    color: var(--motiva-text-primary);
}

/* The added count line — quiet enough that the label stays the card's
   only loud element, matching the Design's single-line silhouette. */
.kc-cat-count[b-4x0vdzko7b] {
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-regular);
    line-height: var(--motiva-line-height-caption);
    color: var(--motiva-text-subtle, var(--motiva-text-muted));
}

@media (prefers-reduced-motion: reduce) {
    .kc-cat-card[b-4x0vdzko7b]::before,
    .kc-cat-icon[b-4x0vdzko7b] { transition: none; }
}
/* /Pages/Learning/KnowledgeResourceRow.razor.rz.scp.css */
/* ============================================================
   KnowledgeResourceRow — the Design's .resrow
   (Motiva Resources.dc.html:18-22 + the row markup at :221-259)

   NO ::deep IN THIS FILE — and that is not an oversight.

   This component's root element is <MRow>, a component, so no element in
   the rendered tree carries this stylesheet's scope attribute as an
   *ancestor*. A `::deep .kc-row-icon` rule would compile to
   `[b-thisfile] .kc-row-icon` and match nothing at all.

   The spans below, by contrast, are written directly in this component's
   markup, so they receive the attribute themselves — a plain selector
   compiles to `.kc-row-icon[b-thisfile]` and matches. Descendant
   selectors work too, because Blazor appends the attribute only to the
   selector's last element (`a.kc-row:hover .kc-row-mark` is fine).

   The rules that target MRow's OWN elements (.kc-row, .m-row-leading)
   therefore cannot live here at all; they are in
   LearningMaterialsPage.razor.css, whose scope does sit on an ancestor.
   ============================================================ */

/* ── Arrow mark ──────────────────────────────────────────────
   Design: colour #8B8698, 15px, opacity .4 -> 1 with a 2px slide on hover.

   translateX(2px), exactly as the Design writes it — deliberately NOT
   mirrored under RTL. The prototype authored this nudge inside a
   dir="rtl" page, so +2px IS the RTL behaviour it draws; "correcting" it
   to -2px would invert the Design rather than honour it. (An earlier pass
   here did exactly that, guarded by [dir="rtl"] — which also never
   matched: this app sets RTL through a CSS `direction` declaration, not a
   dir attribute, so no element in the tree carries one.) In a
   hypothetical LTR render the nudge lands on the other side, which is a
   2px cosmetic nuance and not worth a direction-conditional rule. */
.kc-row-mark[b-220ccoruew] {
    flex-shrink: 0;
    font-size: var(--motiva-font-size-lg);
    line-height: 1;
    color: var(--motiva-text-muted);
    opacity: 0.4;
    transition:
        opacity   var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
        transform var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

a.kc-row:hover .kc-row-mark[b-220ccoruew],
button.kc-row:hover .kc-row-mark[b-220ccoruew],
a.kc-row:focus-visible .kc-row-mark[b-220ccoruew],
button.kc-row:focus-visible .kc-row-mark[b-220ccoruew] {
    opacity: 1;
    transform: translateX(2px);
}

/* ── Icon tile ───────────────────────────────────────────────
   Design: 36x36, 10px radius, tint(accent,.08) fill, accent glyph. */
.kc-row-icon[b-220ccoruew] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--motiva-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kc-accent);
    background: color-mix(in srgb, var(--kc-accent) 8%, transparent);
}

/* ── Body ────────────────────────────────────────────────────
   Design: 5px between the title and the meta line. MRow's .m-row-main
   uses 2px for its own Primary/Secondary pair, so the body owns its
   spacing rather than fighting that value. */
.kc-row-body[b-220ccoruew] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

/* Design: 15px / 500 / line-height 1.35 / ink. --motiva-font-size-lg is
   exactly 15px inside the student scope, so the token carries it rather
   than a literal. */
.kc-row-title[b-220ccoruew] {
    font-size: var(--motiva-font-size-lg);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.35;
    color: var(--motiva-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Design: gap 8px, wraps. */
.kc-row-meta[b-220ccoruew] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--motiva-space-sm);
    min-width: 0;
}

/* Design: padding 2px 9px, pill radius, tint(accent,.08) fill, accent text,
   10.5px / 500. The half-pixel size is the Design's own value. */
.kc-row-pill[b-220ccoruew] {
    flex-shrink: 0;
    padding: 2px 9px;
    border-radius: var(--motiva-radius-full);
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: var(--motiva-line-height-caption);
    color: var(--kc-accent);
    background: color-mix(in srgb, var(--kc-accent) 8%, transparent);
    white-space: nowrap;
}

/* Design: the separator is one step quieter than the meta text it divides
   (#D5D1DC against #8B8698) so the line reads as one phrase, not three. */
.kc-row-sep[b-220ccoruew] {
    color: var(--motiva-text-subtle, var(--motiva-text-muted));
    font-size: var(--motiva-font-size-caption);
    line-height: 1;
}

.kc-row-meta-text[b-220ccoruew] {
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-regular);
    line-height: var(--motiva-line-height-caption);
    color: var(--motiva-text-muted);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .kc-row-mark[b-220ccoruew] { transition: none; }
}
/* /Pages/Learning/ResourceCard.razor.rz.scp.css */
/* ============================================================
   ResourceCard — the FINAL Resources screen's library card.
   Prefix: rc-

   Reference values (Motiva Student Resources final.dc.html, `cards`):
     card   padding 18px 18px 16px · radius 18 · #fff · 1px rgba(27,26,34,.06)
            shadow 0 1px 2px rgba(27,26,34,.03) · column gap 11px
     hover  border rgba(109,40,245,.35) + the section shadow one step up
     title  700 15px/1.35, -.01em · desc 400 12.5px/1.55 #6B6779
     foot   meta 500 11.5px #9B96A8

   ── WHERE THIS NOW DEPARTS FROM THE REFERENCE, AND WHY ────────────────
   The reference paints the type as a 34px chip tinted with the resource's
   own accent hex, beside that same hex as bold coloured text, and the foot
   action as violet 600 text with a chevron. Three coloured objects per
   card, two of them saying "this is a PDF" and the third the only thing on
   the card a person can actually do — and none of the three distinguishable
   from the others at a glance.

   The card now spends colour on meaning instead:
     TYPE   the shared #motivaIconGradient glyph + `.motiva-tag`, the
            product's gradient-EDGE recipe. Brand, not category-coded.
     ACTION a neutral secondary button. It is a control, so it looks like
            one; it is secondary to the title, so it is not brand-coloured.
     OPEN   `.motiva-cta-outline` on the selected card — the one place a
            full Motiva edge appears, because "this is the one you have
            open" is the only state on the grid worth that much ink.

   --rc-accent is gone from this file with the chip that used it. The hex
   is still on the model and still drives the four CATEGORY tiles, where
   distinguishing one category from another is the actual job.
   ============================================================ */

.rc[b-386wmxa482] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 18px 18px 16px;
    /* A FLOOR, not a fixed height — grid items still stretch to their row's
       tallest card, and a card with a description grows past this on its own.
       It exists because most resources carry no description, and without it a
       row of those collapses to ~130px of card inside a workspace several
       hundred pixels wide: the resources end up looking incidental to their
       own library. This is the height at which four cards across a desktop
       viewport read as the page's content. */
    min-height: 152px;
    border: 1px solid var(--motiva-border-card);
    border-radius: var(--motiva-radius-card);
    background: var(--motiva-surface-primary);
    /* The card is the object on this page, so it takes the lifted shadow and
       the .lrs-workspace ground behind it takes none at all. It used to be the
       other way round, which is why the container read louder than its
       contents. */
    box-shadow: var(--motiva-shadow-md, 0 1px 2px rgba(27, 26, 34, 0.03));
    color: var(--motiva-text-primary);
    text-align: start;
    cursor: pointer;
    transition:
        border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
        box-shadow   var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
        transform    var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.rc:hover[b-386wmxa482] {
    border-color: rgba(109, 40, 245, 0.35);
    box-shadow:
        0 2px 4px rgba(27, 26, 34, 0.05),
        0 18px 30px -20px rgba(27, 26, 34, 0.40);
}

/* The lift the transition list above always anticipated but nothing ever set.
   A transform, deliberately: the hover reads unmistakably without altering a
   single track height, so the row stays aligned while one card is raised. */
.rc:hover[b-386wmxa482] { transform: translateY(-2px); }

/* ── The open card ────────────────────────────────────────
   NOTHING IS DECLARED HERE, and that is the change. The treatment comes
   from `.motiva-cta-outline`, which the markup adds alongside this class:
   the shared gradient edge over --motiva-tag-brand-surface, a near-white
   interior, and the card's own radius untouched. `.motiva.motiva-final
   .motiva-cta-outline` is (0,3,0) against this file's scoped (0,2,0), so it
   wins on specificity rather than on link order — the ladder motiva-base.css
   documents for exactly this case, and all three shells wear both classes.

   It used to be `border-color: var(--motiva-color-violet)` — a solid violet
   line, which is the one thing the edge recipe exists to replace — plus the
   hover shadow, which meant an open card and a hovered card were the same
   object. They are now plainly different: hover lifts, open is outlined.

   The class also zeroes the box-shadow, and that is right here. The panel
   lays a scrim over this grid, and a shadow does not survive a scrim while a
   brand edge does; the open card needs to be findable THROUGH it, which was
   the original reason this rule existed at all.

   The rule is kept as an empty-of-declarations anchor because the markup and
   the responsive block below both name `.rc-selected`, and a reader looking
   for "what does selected look like" must land somewhere that answers. */
.rc-selected[b-386wmxa482] { /* see the note above — treatment is .motiva-cta-outline's */ }

.rc:focus-visible[b-386wmxa482] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

/* ── Top row ─────────────────────────────────────────────── */

.rc-top[b-386wmxa482] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* ── The type unit: glyph + tag, read as one thing ──────────
   8px apart, which is close enough to group them and wide enough that the
   tag's edge does not touch the glyph's stroke. The unit shrinks before the
   stage pill and the star do, because a truncated "מצגת" costs less than a
   truncated milestone name. */

.rc-typeunit[b-386wmxa482] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* No box. `.motiva-ico-gradient` states the display and the fallback ink;
   the sweep is on the glyph's own stroke, so there is nothing behind it to
   size or tint — which is the whole point of that recipe ("no tile, no
   circle and no fill behind it"). */
.rc-icon[b-386wmxa482] { flex: 0 0 auto; }

/* `.motiva-tag` supplies the surface, the edge, the radius and the ink. This
   rule adds only what is true HERE: one notch tighter than the shared tag's
   5px/12px, because this one sits in a row with a stage pill and a star
   rather than alone in a card head, and the ellipsis guard a long "גיליון
   אלקטרוני" needs to not push the star off the row.

   Scoped rules are (0,2,0) and `.motiva-tag` is (0,1,0), so anything stated
   here WINS over the shared class — which is exactly why colour, weight and
   background are deliberately absent below. */
.rc-type[b-386wmxa482] {
    min-width: 0;
    padding: 4px 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rc-top-end[b-386wmxa482] {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.rc-stage[b-386wmxa482] {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-surface-chip);
    color: var(--motiva-text-muted);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
}

.rc-star[b-386wmxa482] {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--motiva-text-faint, var(--motiva-text-subtle));
    cursor: pointer;
    transition: color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.rc-star:hover[b-386wmxa482] { color: var(--motiva-color-violet); opacity: 0.85; }

.rc-star-on[b-386wmxa482],
.rc-star-on:hover[b-386wmxa482] { color: var(--motiva-color-violet); opacity: 1; }

.rc-star:focus-visible[b-386wmxa482] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ── Body ────────────────────────────────────────────────── */

.rc-body[b-386wmxa482] { min-width: 0; }

.rc-title[b-386wmxa482] {
    margin: 0;
    font-size: var(--motiva-font-size-item, 15.5px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--motiva-text-primary);
    /* A long filename must not push the grid track: three lines, then ellipsis. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.rc-desc[b-386wmxa482] {
    margin: 5px 0 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-regular);
    line-height: 1.55;
    color: var(--motiva-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* ── Foot ────────────────────────────────────────────────── */

/* margin-top:auto is what makes every card in a row end on the same line
   even though their titles and descriptions differ in height. */
.rc-foot[b-386wmxa482] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block-start: auto;
    padding-block-start: 4px;
}

.rc-meta[b-386wmxa482] {
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1;
    color: var(--motiva-text-subtle);
}

/* ── The action ────────────────────────────────────────────
   A secondary button, in the same language as every other quiet action in
   the product: a hairline edge, neutral ink, a hover that darkens both. No
   gradient and no fill — the gradient on this card belongs to the type mark
   and to the open state, and a third one here would make all three mean
   nothing.

   `pointer-events: none` is what keeps it honest. It LOOKS like a control
   and the card is the control, so the label must never eat a click that the
   card should handle; without it, a click landing exactly on the verb would
   still work (it bubbles) but hovering the verb would not raise the card.
   With it, the whole card including this label is one hover target and one
   click target. It also keeps the pointer as the card's own. */
.rc-action[b-386wmxa482] {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px solid var(--motiva-border-card);
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-secondary);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    pointer-events: none;
    transition:
        border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
        color        var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
        background   var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

/* The hover is the CARD's, because the card is what is hovered — the button
   responds as part of it rather than as a separate target that has to be
   found first. */
.rc:hover .rc-action[b-386wmxa482] {
    border-color: var(--motiva-border-strong, rgba(27, 26, 34, 0.16));
    background: var(--motiva-surface-hover, var(--motiva-surface-primary));
    color: var(--motiva-text-primary);
}

.rc-action svg[b-386wmxa482] { flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
    .rc[b-386wmxa482],
    .rc-action[b-386wmxa482],
    .rc-star[b-386wmxa482] { transition: none; }

    /* The border and shadow still change on hover; only the movement goes. */
    .rc:hover[b-386wmxa482] { transform: none; }
}
/* /Pages/Learning/ResourceDetailPanel.razor.rz.scp.css */
/* ============================================================
   ResourceDetailPanel — the FINAL Resources screen's side panel.
   Prefix: rdp-

   Reference (Motiva Student Resources final.dc.html, `detailOpen`):
     scrim  rgba(27,26,34,.16)
     panel  position:fixed · top/bottom 26px · inset-inline-end 26px
            width 360 · radius 26 · #fff · padding 26px 28px
            shadow 0 2px 4px rgba(27,26,34,.06), 0 30px 60px -30px rgba(27,26,34,.5)
     title  700 20px/1.35 -.02em · desc 400 13.5px/1.6 #6B6779
     meta   key 600 12px #9B96A8 in a 74px column · value 500 13.5px/1.3
            each row 11px block padding over a rgba(27,26,34,.06) hairline
     CTA    gradient pill · secondary 1.5px rgba(27,26,34,.12) ghost pill
   ============================================================ */

.rdp-scrim[b-lwkwku89hx] {
    position: fixed;
    inset: 0;
    z-index: var(--motiva-z-overlay);
    background: var(--motiva-scrim);
    animation: rdp-fade-b-lwkwku89hx 160ms var(--motiva-motion-easing-standard) both;
}

.rdp[b-lwkwku89hx] {
    position: fixed;
    z-index: var(--motiva-z-modal);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    padding: 26px 28px;
    border-radius: var(--motiva-radius-xl);
    background: var(--motiva-surface-primary);
    box-shadow: var(--motiva-shadow-lg);

    /* Vertical only, and the bar on the physical right — the same pattern as
       .m-scroll / .rqw-list. `overflow: auto` computed the horizontal axis to
       auto as well, and flipping the box turns any start-edge overhang into a
       scrollable end-edge one, which is how this kind of flip grows a
       horizontal bar (see .pws-body). The panel is a fixed 420px column; it
       has nothing to scroll sideways, so that axis is clipped outright. */
    overflow-y: auto;
    overflow-x: hidden;
    direction: ltr;
    outline: none;              /* tabindex="-1" focus ring is unwanted here */
    animation: rdp-slide-b-lwkwku89hx 200ms var(--motiva-motion-easing-standard) both;
}

/* Back to RTL for everything rendered inside. Direct children only; the
   panel's subtrees inherit from them. */
.rdp > *[b-lwkwku89hx] {
    direction: rtl;
}

@keyframes rdp-fade-b-lwkwku89hx {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Fades up into center — matches the centered modal presentation. */
@keyframes rdp-slide-b-lwkwku89hx {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* ── Head ────────────────────────────────────────────────── */

.rdp-head[b-lwkwku89hx] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── The type unit ────────────────────────────────────────
   ResourceCard's `.rc-typeunit` / `.rc-icon` / `.rc-type`, value for value:
   the same 8px gap, the same bare gradient glyph at 18px and the same
   `.motiva-tag` at the same 4px/9px. The two files are separate only
   because Blazor scopes each component's stylesheet to itself; the numbers
   are the contract, and the surface, edge and ink come from the one shared
   class in both places.

   --rdp-accent is gone with the tinted pill that used it. */

.rdp-typeunit[b-lwkwku89hx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.rdp-type-icon[b-lwkwku89hx] { flex: 0 0 auto; }

/* Scoped (0,2,0) beats `.motiva-tag` (0,1,0), so colour, weight, background
   and radius are deliberately absent — only the geometry that is true here. */
.rdp-type[b-lwkwku89hx] {
    min-width: 0;
    padding: 4px 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rdp-close[b-lwkwku89hx] {
    margin-inline-start: auto;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--motiva-text-subtle);
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
        color      var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.rdp-close:hover[b-lwkwku89hx] {
    background: var(--motiva-surface-hover);
    color: var(--motiva-text-primary);
}

.rdp-close:focus-visible[b-lwkwku89hx] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 1px;
}

/* ── Text ────────────────────────────────────────────────── */

.rdp-title[b-lwkwku89hx] {
    margin: 16px 0 0;
    font-size: var(--motiva-font-size-h2, 20px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1.35;
    letter-spacing: var(--motiva-letter-spacing-section);
    color: var(--motiva-text-primary);
    overflow-wrap: anywhere;
}

.rdp-desc[b-lwkwku89hx] {
    margin: 10px 0 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-regular);
    line-height: 1.6;
    color: var(--motiva-text-muted);
    overflow-wrap: anywhere;
}

/* ── Meta table ──────────────────────────────────────────── */

.rdp-meta[b-lwkwku89hx] {
    margin: 18px 0 0;
    display: flex;
    flex-direction: column;
}

.rdp-meta-row[b-lwkwku89hx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-block: 11px;
    border-block-end: 1px solid var(--motiva-border-subtle);
}

.rdp-meta-key[b-lwkwku89hx] {
    flex: 0 0 74px;
    width: 74px;
    margin: 0;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-subtle);
}

.rdp-meta-val[b-lwkwku89hx] {
    min-width: 0;
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.3;
    color: var(--motiva-text-primary);
    overflow-wrap: anywhere;
}

.rdp-meta-val-accent[b-lwkwku89hx] { color: var(--motiva-color-violet); }

/* The value is Latin; keeping it LTR stops "DOCX" and "youtube.com" from
   mirroring, while text-align:end holds it against the RTL column edge. */
.rdp-meta-val-ltr[b-lwkwku89hx] { text-align: end; }

/* ── Actions ─────────────────────────────────────────────── */

/* ── Footer actions ───────────────────────────────────────
   ACTIONS COLLECT AT THE END — the physical LEFT under RTL, which is the
   convention every Motiva dialog footer already follows (`.m-modal-footer`
   states the same `flex-end`, and TeamTaskEditModal's footer was brought to
   it for the same reason). This panel was the last surface still leaving
   them at flex-start, i.e. the physical RIGHT, directly under a right-
   aligned metadata list they then read as part of.

   `flex-end` and not a physical `margin-right`, because the whole app runs
   in one direction and this is the rule the other footers are written with:
   one convention stated the same way in every file beats a second idiom that
   happens to also be correct here.

   The DOM order is untouched, so the pair reads [primary] [secondary] from
   the physical left — see the markup's own note.

   `flex-wrap` stays: at the 640px breakpoint below the panel becomes a
   full-width sheet and two buttons plus a long Hebrew label can still need
   a second line. `justify-content` then applies per line, which keeps both
   rows on the same edge. */
.rdp-actions[b-lwkwku89hx] {
    margin-block-start: auto;
    padding-block-start: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.rdp-btn[b-lwkwku89hx],
.rdp-btn-ghost[b-lwkwku89hx],
.rdp-btn-disabled[b-lwkwku89hx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--motiva-radius-full);
    font-family: inherit;
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.rdp-btn[b-lwkwku89hx] {
    padding: 11px 20px;
    border: none;
    background: var(--motiva-gradient-signature);
    color: #fff; /* approved exception: ink on a filled brand surface */
    transition: filter var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.rdp-btn:hover[b-lwkwku89hx] { filter: brightness(1.08); color: #fff; }

.rdp-btn-ghost[b-lwkwku89hx] {
    padding: 10px 18px;
    border: 1.5px solid var(--motiva-border-strong, rgba(27, 26, 34, 0.12));
    background: transparent;
    color: var(--motiva-text-secondary);
    transition:
        border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
        color        var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.rdp-btn-ghost:hover[b-lwkwku89hx] {
    border-color: rgba(27, 26, 34, 0.3);
    color: var(--motiva-text-primary);
}

.rdp-btn-disabled[b-lwkwku89hx] {
    padding: 11px 20px;
    background: var(--motiva-surface-chip);
    color: var(--motiva-text-subtle);
    cursor: default;
}

.rdp-btn:focus-visible[b-lwkwku89hx],
.rdp-btn-ghost:focus-visible[b-lwkwku89hx] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

/* ── Narrow viewports ────────────────────────────────────
   Below the width where a 360px edge panel still leaves the grid readable,
   it becomes a full-width sheet pinned to the bottom — the panel keeps its
   content and its actions, it just stops being an aside. */
@media (max-width: 640px) {
    .rdp[b-lwkwku89hx] {
        top: auto;
        left: 12px;
        right: 12px;
        bottom: 12px;
        transform: none;
        width: auto;
        max-width: none;
        max-height: 86vh;
        padding: 22px 20px;
        /* A sheet rises, it does not slide in from the edge. A second named
           keyframe rather than a redefinition of rdp-slide: Blazor's CSS
           isolation does not scope @keyframes names, so redefining one inside
           a media query would be an app-wide override. */
        animation-name: rdp-rise-b-lwkwku89hx;
    }

    @keyframes rdp-rise-b-lwkwku89hx {
        from { opacity: 0; transform: translateY(18px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .rdp[b-lwkwku89hx],
    .rdp-scrim[b-lwkwku89hx] { animation: none; }

    .rdp-close[b-lwkwku89hx],
    .rdp-btn[b-lwkwku89hx],
    .rdp-btn-ghost[b-lwkwku89hx] { transition: none; }
}
/* /Pages/Learning/ResourcesLibrary.razor.rz.scp.css */
/* ============================================================
   ResourcesLibrary — the shared משאבים screen (Student + Mentor + Lecturer)
   Prefix: lrs-

   Visual source: Motiva Lecturer Resources.dc.html
                  משאבים מרצה 268.pdf
                  Implemented student Resources as shared design reference.

   ONE WORKSPACE, NOT A STACK OF SLABS
   ───────────────────────────────────
   The screen used to be three separate boxes floating on the canvas — a
   title row that also held the search field, a full-width stage strip, and
   a library panel — which read as fragmented and left the actual resources
   feeling small inside a very wide, very empty container.

   It is now:

       משאבים                                    ← page title only
       short subtitle

       ┌─ .lrs-workspace ─────────────────────────────────────┐
       │  filters ······························ search       │  .lrs-toolbar
       │  ────────────────────────────────────────────────    │
       │  ┌ .lrs-stage — gradient-bordered recommendation ┐    │
       │  │ רלוונטי לשלב שלך  [badge]                      │    │
       │  │ short explanation                              │    │
       │  │ [pick card] [pick card] [pick card]            │    │
       │  └───────────────────────────────────────────────┘    │
       │  משאבים כלליים            4 משאבים                    │  .lrs-general
       │  [ card ] [ card ] [ card ] [ card ]                  │  .lrs-grid
       └──────────────────────────────────────────────────────┘

   Three rules hold that together:
     • The workspace is a GROUND, not an object — hairline border, no
       shadow, translucent fill. The cards on it are the objects.
     • The stage module's picks sit on the SAME grid tracks as the general
       cards, so the two sections align column for column.
     • Nothing that acts on the library lives outside the workspace. The
       search field in particular was ~1300px from the grid it filters.

   The card grid, ResourceCard, and ResourceDetailPanel are fully shared
   across the three roles — no duplication.
   ============================================================ */

/* ── Page shell ──────────────────────────────────────────── */

.lrs-page[b-eu71z69zda] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    /* 8px here + the shell's 20px --motiva-canvas-padding-block-end = a 28px
       bottom gutter, which is exactly --motiva-canvas-padding-inline. The
       workspace is therefore inset by the same amount on all four sides
       instead of floating 52px above the fold. */
    padding-block-end: 8px;
    min-width: 0;

    /* FULL-HEIGHT BY INHERITANCE, NOT BY ARITHMETIC.
       `.app-shell-student` is already a border-box flex column at
       min-height:100vh, and `.app-shell-student .app-content` is already
       `flex: 1` — so the page only has to claim the height that chain is
       handing it. No calc(100vh - nav - padding) anywhere: nothing here
       hardcodes the nav's height, so nothing here breaks when it changes,
       and because the shell's padding is inside its own border box the
       page can never total more than the viewport on its own. */
    flex: 1 1 auto;
}

/* ── Title row ───────────────────────────────────────────── */

/* The page title is now the shared white <MPageHeaderCard Scale="Core">, a
   sibling card above the .lrs-workspace panel (18px page gap between them).
   The old floating .lrs-title-row / .lrs-title-block / .lrs-h1 rules are
   gone. */

/* ── Loading spinner ─────────────────────────────────────── */

.lrs-loading[b-eu71z69zda] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 56px 0;
    justify-content: center;
    color: var(--motiva-text-subtle, #9B96A8);
    font-size: var(--motiva-font-size-body, 14px);
}

.lrs-spinner[b-eu71z69zda] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(109, 40, 245, 0.15);
    border-top-color: var(--motiva-color-violet, #6D28F5);
    border-radius: 50%;
    animation: lrs-spin-b-eu71z69zda 0.7s linear infinite;
}

@keyframes lrs-spin-b-eu71z69zda {
    to { transform: rotate(360deg); }
}

/* ── The workspace surface ───────────────────────────────────
   A GROUND, deliberately quiet: hairline edge, translucent fill, NO
   shadow. The previous version gave this container `--motiva-shadow-md`,
   which under `.motiva-final` is the lifted CARD shadow — so the empty
   panel was casting a heavier shadow than the resources inside it. A mat
   does not out-rank what is laid on it.
   ── */

.lrs-workspace[b-eu71z69zda] {
    /* The page's growth lands HERE, on the container. .lrs-workspace is a
       plain block, so its children keep their natural heights and the extra
       space collects at the bottom of the surface — the cards are not
       stretched, the grid is not re-tracked, nothing inside moves. */
    flex: 1 1 auto;
    padding: 18px 20px 22px;
    /* THE SURFACE IS `.motiva-panel`, worn in the markup — the same white
       every other workspace shell in the product uses.

       It was briefly a translucent "mat" (.66) on the argument that white
       resource cards need a darker ground to read against. Withdrawn: a
       page-sized container tinted by the canvas's violet radial is the
       inconsistency users actually see, and the cards on it carry their own
       hairline and drop, which is what separates them. A ground that has to
       be off-white for its contents to read is a contents problem. */
    min-width: 0;
}

/* ── Toolbar — filters at the reading start, search at the end ──
   The hairline underneath is the one rule on this page that exists purely
   to separate: it is what makes the row read as the workspace's controls
   rather than as its first row of content. ── */

.lrs-toolbar[b-eu71z69zda] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-block-end: 16px;
    margin-block-end: 18px;
    border-block-end: 1px solid rgba(27, 26, 34, 0.06);
}

.lrs-chips[b-eu71z69zda] {
    display: flex;
    align-items: center;
    /* 4px, not 2px: eight labels 2px apart read as one long word. */
    gap: 4px;
    flex-wrap: wrap;
    padding: 4px;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-surface-chip, rgba(27, 26, 34, 0.045));
}

.lrs-chip[b-eu71z69zda] {
    padding: 8px 15px;
    border: none;
    border-radius: var(--motiva-radius-full, 999px);
    background: transparent;
    color: var(--motiva-text-muted, #6B6779);
    font-family: inherit;
    font-size: var(--motiva-font-size-caption, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--motiva-motion-duration-fast, 0.12s) var(--motiva-motion-easing-standard, ease);
}

.lrs-chip:hover[b-eu71z69zda] { color: var(--motiva-text-primary, #1B1A22); }

/* White and lifted — never a filled violet tab. The old `padding-inline`
   override is gone: it widened the active pill by 2px, so picking a filter
   nudged every pill after it sideways. */
.lrs-chip-active[b-eu71z69zda],
.lrs-chip-active:hover[b-eu71z69zda] {
    background: var(--motiva-surface-primary, #fff);
    color: var(--motiva-text-primary, #1B1A22);
    font-weight: var(--motiva-font-weight-bold, 700);
    box-shadow:
        0 1px 2px rgba(27, 26, 34, 0.10),
        0 4px 10px -6px rgba(27, 26, 34, 0.28);
}

.lrs-chip:focus-visible[b-eu71z69zda] {
    outline: 2px solid var(--motiva-color-focus-ring, #6D28F5);
    outline-offset: 1px;
}

/* Search (and, for a lecturer, the management link) at the far end of the
   toolbar — inside the library, opposite its filters. */
.lrs-toolbar-end[b-eu71z69zda] {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* MSearchField is width:100%, so a shrink-to-fit wrapper collapses it to
   its intrinsic ~180px and the caller's MaxWidth never applies to anything.
   A stated `width` rather than a flex-basis, because the basis alone does
   not feed the parent's max-content size — .lrs-toolbar-end would size to
   the field's intrinsic width and squeeze it straight back down. */
.lrs-search-wrap[b-eu71z69zda] {
    width: 320px;
    max-width: 100%;
    flex: 0 1 auto;
}

/* ── Search presence ─────────────────────────────────────────
   The field's own sheet paints it as a translucent pill — rgba(255,255,255,
   .75) over the canvas wash. On .lrs-workspace, which is itself
   rgba(255,255,255,.74), that is white on white and the control disappears.

   So it is lifted HERE, from the one screen whose ground caused the
   problem, rather than by restyling MSearchField for every page that uses
   it. Reached with ::deep because the field's internals belong to that
   component; `.lrs-search-wrap` is local, so the scope attribute lands on
   it and these rules win on specificity over the `.motiva-final .m-search`
   defaults without an !important.

   Deliberately still lighter than an active filter chip, which carries
   `0 1px 2px/.10` plus a 10px spread: opaque paper, a hairline edge and a
   single 2px shadow is enough to read as a control. No fill, no purple, no
   extra height. */

.lrs-search-wrap[b-eu71z69zda]  .m-search {
    background: var(--motiva-surface-primary, #fff);
    border-color: rgba(27, 26, 34, 0.10);
    box-shadow: 0 1px 2px rgba(27, 26, 34, 0.05);
}

/* 17px and one step darker: the magnifier is what makes the control
   legible as SEARCH at a glance, and at --motiva-text-subtle it was the
   faintest mark in the toolbar. */
.lrs-search-wrap[b-eu71z69zda]  .m-search-icon {
    width: 17px;
    height: 17px;
    color: var(--motiva-text-muted, #6B6779);
}

.lrs-search-wrap[b-eu71z69zda]  .m-search-input::placeholder {
    color: var(--motiva-text-muted, #6B6779);
}

/* ── Focus: the Motiva edge, not a coloured ring ───────────
   REST IS UNTOUCHED — opaque paper, one hairline, one soft shadow, exactly
   what the rule above paints. Only the focused state changes.

   `.motiva-final .m-search:focus-within` (MSearchField.razor.css) puts a 2px
   SOLID --motiva-color-focus-ring around the field, which is the product's
   general focus language and is right for a plain control. On this screen the
   brand edge already means something specific — an open resource card wears
   it — so the field's focus reads as the same family instead of as a fourth
   colour on a toolbar that already carries a gradient CTA.

   TWO LAYERS AND A HALO, all from existing tokens:
     · white on padding-box, --motiva-gradient-signature on border-box. The
       ramp is a border-box paint layer, so `border: 1px solid transparent` is
       what gives it an edge to appear in — and 1px is exactly the border the
       field already has, so nothing moves by a pixel on focus.
     · `box-shadow: 0 0 0 3px var(--motiva-color-brand-bg)` — the soft brand
       halo `.motiva-cta-outline:focus-visible` uses (motiva-base.css). It is
       what keeps the focus indicator at the weight of the 2px ring it
       replaces; a 1px hairline alone would be a real accessibility
       regression, which is why `outline: none` is only safe with it.

   The UNVEILED pairing rather than --motiva-tag-brand-surface: that token
   carries a softening wash over the ramp because it dresses resting tags that
   must not look pressable. A focus indicator has the opposite job. This is the
   same "one notch up on the edge" the edit buttons take on hover, and it
   introduces no colour — --motiva-gradient-signature is the one sweep.

   THE CLASS IS DOUBLED ON PURPOSE. `.lrs-search-wrap ::deep .m-search:focus-
   within` and `.motiva-final .m-search:focus-within` both scope to (0,4,0),
   and which one wins would then depend on the order two scoped files land in
   one bundle. Repeating the class makes it (0,5,0) and settles it. */
.lrs-search-wrap.lrs-search-wrap[b-eu71z69zda]  .m-search:focus-within {
    border: 1px solid transparent;
    background:
        linear-gradient(var(--motiva-surface-solid), var(--motiva-surface-solid)) padding-box,
        var(--motiva-gradient-signature) border-box;
    outline: none;
    box-shadow: 0 0 0 3px var(--motiva-color-brand-bg);
}

/* ── "ניהול משאבים" — the toolbar's primary action ─────────
   GEOMETRY ONLY. The fill, the ink, the radius, the hover brightness, the
   press step, the focus ring and the anchor's own :link/:visited guard all
   come from `.motiva-cta`, which the markup carries — the division of labour
   that rule states for every consumer ("page stylesheets keep ONLY geometry;
   the fill, radius and states all come from here").

   EVERY ONE OF THOSE HAD TO BE DELETED, not left to be overridden. A scoped
   rule is (0,2,0), `.motiva-cta` is (0,1,0) and `.motiva .motiva-cta` is
   (0,2,0) — a tie this file wins, because the scoped bundle is linked after
   motiva-base.css. So a leftover `background: transparent` or
   `border-radius: 999px` here would have beaten the class and left the button
   looking exactly as it did, and the old `transition: background` would have
   replaced the brightness transition the hover depends on.

   It was a violet-outlined link at --motiva-radius-full. That treatment is
   the SECONDARY language — it is what a resource card's הורדה now wears —
   and this is not a secondary action: it is the only thing on this toolbar
   that is not a filter, it leaves the library entirely, and only a lecturer
   sees it at all (CanManage, which the lecturer wrapper alone passes true).

   Compact on purpose. 8px/14px at 12.5px keeps it the toolbar's size beside
   a 320px search field rather than a form's submit button; the radius it
   takes from .motiva-cta is --motiva-radius-sm, the same one every other
   primary in the product uses. */
.lrs-manage-link[b-eu71z69zda] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 8px 14px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

/* The pencil is `stroke="currentColor"`, and .motiva-cta pins its ink to #fff
   at every state including :hover — so the glyph turns white with the label
   instead of staying violet on the gradient. Nothing to declare; this rule is
   the flex guard, and the note answers "why is the icon not styled". */
.lrs-manage-link svg[b-eu71z69zda] { flex: 0 0 auto; }

/* ── Recommendation module — "רלוונטי לשלב שלך" ───────────────
   A PANEL with a header and a row of real cards. Not a hero, and not the
   full-width one-line bar it briefly became: that shape had an enormous
   horizontal footprint for a sentence of content and read as a
   notification banner rather than as something personalised and useful.

   TWO THINGS KEEP IT AT CARD PROPORTIONS.

   It sits in .lrs-stage-shell — the card grid's own tracks — and spans
   whole COLUMNS, so its edges land on the same lines as the resources
   below instead of floating over them.

   And it spans as many columns as it has content for: three when there is
   a full row of picks, two otherwise, the empty state included. That is
   the rule that stopped it being 1536px of panel around one sentence.
   ── */

.lrs-stage-shell[b-eu71z69zda] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 14px;
    margin-block-end: 22px;
}

.lrs-stage[b-eu71z69zda] {
    grid-column: span 2;
    min-width: 0;
    padding: 16px 18px 18px;
    border: 1.5px solid transparent;
    border-radius: var(--motiva-radius-lg, 20px);
    /* BOTH LAYERS HAVE TO MOVE TOGETHER. Under `.motiva-final` the
       signature token is an OPAQUE violet→blue→cyan ramp, which reads
       straight through a translucent fill and washes the whole panel into
       a coloured banner. The padding-box fill is therefore the opaque
       --motiva-surface-solid, which confines the gradient to the 1.5px
       border where it belongs. */
    background:
        linear-gradient(var(--motiva-surface-solid, #FDFDFE), var(--motiva-surface-solid, #FDFDFE)) padding-box,
        var(--motiva-gradient-signature) border-box;
    box-shadow: var(--motiva-shadow-sm, 0 1px 2px rgba(0,0,0,.04));
}

.lrs-stage-head[b-eu71z69zda] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-block-end: 14px;
}

.lrs-stage-headline[b-eu71z69zda] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.lrs-stage-title[b-eu71z69zda] {
    margin: 0;
    font-size: var(--motiva-font-size-item, 16px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.2;
    letter-spacing: var(--motiva-letter-spacing-section, -0.01em);
    color: var(--motiva-text-primary, #1B1A22);
}

/* Default tag: white paper under the Motiva gradient edge, dark ink.
   `--motiva-tag-brand-surface`, the product's one tag recipe. */
.lrs-stage-chip[b-eu71z69zda] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1;
    white-space: nowrap;
}

.lrs-stage-dot[b-eu71z69zda] {
    flex: 0 0 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--motiva-color-violet, #6D28F5);
}

.lrs-stage-note[b-eu71z69zda] {
    margin: 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-regular, 400);
    line-height: 1.45;
    color: var(--motiva-text-subtle, #9B96A8);
}

/* A full row of picks earns the third column. */
.lrs-stage-wide[b-eu71z69zda] { grid-column: span 3; }

.lrs-stage-row[b-eu71z69zda] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 12px;
}

/* Picks are cards now, not list rows — the same paper, edge and radius as
   a resource card, one size down. */
.lrs-pick[b-eu71z69zda] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--motiva-border-card, rgba(27,26,34,0.06));
    border-radius: var(--motiva-radius-card, 18px);
    background: var(--motiva-surface-primary, #fff);
    box-shadow: 0 1px 2px rgba(27, 26, 34, 0.04);
    color: var(--motiva-text-primary, #1B1A22);
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    transition:
        border-color var(--motiva-motion-duration-fast, 0.12s) var(--motiva-motion-easing-standard, ease),
        box-shadow   var(--motiva-motion-duration-fast, 0.12s) var(--motiva-motion-easing-standard, ease),
        transform    var(--motiva-motion-duration-fast, 0.12s) var(--motiva-motion-easing-standard, ease);
}

.lrs-pick:hover[b-eu71z69zda] {
    border-color: rgba(109, 40, 245, 0.35);
    box-shadow:
        0 2px 4px rgba(27, 26, 34, 0.05),
        0 16px 26px -20px rgba(27, 26, 34, 0.38);
    transform: translateY(-2px);
}

.lrs-pick:focus-visible[b-eu71z69zda] {
    outline: 2px solid var(--motiva-color-focus-ring, #6D28F5);
    outline-offset: 2px;
}

/* ── The type glyph ───────────────────────────────────────
   ResourceCard's `.rc-icon`, and deliberately the same thing: one gradient
   mark for a file format wherever that format appears. It was a 34px chip
   tinted with the resource's accent hex around a glyph in that same hex —
   the treatment the library cards below carried until this pass, and the
   only flat-purple object left inside a module whose own container already
   carries the gradient outline.

   NO BOX. `.motiva-ico-gradient` supplies the display and the fallback ink;
   the sweep is on the glyph's own stroke, so there is nothing behind it to
   size or tint. That is also what keeps the gradient count honest inside
   this module — the OUTER container has the edge, the mini-card stays plain
   white, and the mark is the only brand ink on the row.

   --lrs-accent is gone from this file with the chip that used it. */
.lrs-pick-icon[b-eu71z69zda] { flex: 0 0 auto; }

.lrs-pick-text[b-eu71z69zda] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lrs-pick-title[b-eu71z69zda] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.3;
}

.lrs-pick-type[b-eu71z69zda] {
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-subtle, #9B96A8);
}

.lrs-pick-mark[b-eu71z69zda] {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--motiva-text-subtle, #9B96A8);
    opacity: 0.6;
}

/* Empty relevance state — reached only when the host forbids fallback (the
   student) and nothing is pinned to their stage. Given a pick card's shape
   and height, with an icon, so the module reads as deliberately waiting for
   content rather than as a panel that failed to fill. Quiet by design: it
   states a fact, it is not a call to action. */
.lrs-stage-empty[b-eu71z69zda] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px dashed rgba(27, 26, 34, 0.13);
    border-radius: var(--motiva-radius-card, 18px);
    background: rgba(27, 26, 34, 0.022);
}

.lrs-stage-empty-icon[b-eu71z69zda] {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--motiva-radius-chip, 11px);
    background: var(--motiva-surface-chip, rgba(27, 26, 34, 0.045));
    color: var(--motiva-text-subtle, #9B96A8);
}

.lrs-stage-empty-text[b-eu71z69zda] {
    margin: 0;
    min-width: 0;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.45;
    color: var(--motiva-text-muted, #6B6779);
}

/* ── The general library ─────────────────────────────────── */

.lrs-general[b-eu71z69zda] {
    min-width: 0;
}

.lrs-general-head[b-eu71z69zda] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding-block-end: 12px;
}

.lrs-general-title[b-eu71z69zda] {
    margin: 0;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.2;
    letter-spacing: var(--motiva-letter-spacing-section, -0.01em);
    color: var(--motiva-text-primary, #1B1A22);
}

/* Deliberately the quietest thing in the row: it reports the result of the
   filters, it is not one of them. */
.lrs-count[b-eu71z69zda] {
    font-size: var(--motiva-font-size-count, 12px);
    font-weight: var(--motiva-font-weight-regular, 400);
    line-height: 1;
    color: var(--motiva-text-subtle, #9B96A8);
}

.lrs-grid[b-eu71z69zda] {
    display: grid;
    /* min() so a viewport narrower than one track collapses the track rather
       than overflowing it — the grid can never become a horizontal scroller. */
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 14px;
}

/* ── Empty states ────────────────────────────────────────── */

.lrs-empty[b-eu71z69zda] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 44px 20px;
    text-align: center;
}

.lrs-empty-icon[b-eu71z69zda] {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--motiva-surface-chip, rgba(27, 26, 34, 0.045));
    color: var(--motiva-text-subtle, #9B96A8);
}

.lrs-empty-title[b-eu71z69zda] {
    margin: 0;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.4;
    color: var(--motiva-text-secondary, #3D3B4A);
}

.lrs-empty-note[b-eu71z69zda] {
    margin: 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-regular, 400);
    line-height: 1.5;
    color: var(--motiva-text-subtle, #9B96A8);
}

.lrs-empty-clear[b-eu71z69zda] {
    margin-block-start: 4px;
    padding: 8px 18px;
    border: 1px solid rgba(109, 40, 245, 0.22);
    border-radius: var(--motiva-radius-full, 999px);
    background: transparent;
    color: var(--motiva-color-violet, #6D28F5);
    font-family: inherit;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 0.12s) ease;
}

.lrs-empty-clear:hover[b-eu71z69zda] {
    background: var(--motiva-color-brand-bg, rgba(109, 40, 245, 0.08));
}

/* ── Video modal frame ───────────────────────────────────── */

.lrs-video-frame[b-eu71z69zda] {
    position: relative;
    padding-block-end: 56.25%; /* 16:9 */
}

.lrs-video-frame iframe[b-eu71z69zda] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--motiva-radius-md, 12px);
}

.lrs-video-external[b-eu71z69zda] {
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-color-violet, #6D28F5);
    color: #fff;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-medium, 500);
    text-decoration: none;
}

.lrs-video-external:hover[b-eu71z69zda] { opacity: 0.88; }

/* ── Narrow widths ───────────────────────────────────────────
   The composition is width-driven and degrades on its own: the toolbar and
   the chip rail wrap, and both grids lose columns. This only fixes what
   wrapping alone gets wrong — the search field stranded on the far edge of
   an otherwise empty line. */

/* Below these widths the shell has fewer tracks than the module wants to
   span, and a span wider than the explicit grid would create IMPLICIT
   columns and push the page into horizontal scroll. `1 / -1` is the safe
   floor: take the whole row, whatever the row currently is. */
@media (max-width: 1040px) {
    .lrs-stage-wide[b-eu71z69zda] { grid-column: span 2; }
}

@media (max-width: 760px) {
    /* Content-driven height on a small screen: a short page should end where
       its content ends rather than being padded out to fill a phone
       viewport. */
    .lrs-page[b-eu71z69zda],
    .lrs-workspace[b-eu71z69zda] { flex: 0 0 auto; }

    .lrs-stage[b-eu71z69zda],
    .lrs-stage-wide[b-eu71z69zda] { grid-column: 1 / -1; }

    .lrs-toolbar-end[b-eu71z69zda] {
        flex: 1 1 100%;
        margin-inline-start: 0;
    }

    .lrs-search-wrap[b-eu71z69zda] { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .lrs-pick[b-eu71z69zda] { transition: none; }
    .lrs-pick:hover[b-eu71z69zda] { transform: none; }
}

/* Out of flow entirely — the wrapper is a ::deep anchor, not a box.
   display:contents removes its stacking context so the panel and scrim
   get their own z-index relative to the root, covering nav/header. */
.lrs-overlays[b-eu71z69zda] {
    display: contents;
}
/* /Pages/Lecturer/LecturerCalendarPage.razor.rz.scp.css */
/* =========================================================
   LecturerCalendarPage — scoped overrides only.

   All non-::deep mcal-* rules live in
   wwwroot/css/motiva-calendar.css (global), loaded in index.html
   before AuthWithAdmin.Client.styles.css.

   The layout rule below (.mcal-body) is also in the global file;
   repeating it here makes the scoped version win the specificity
   tie so the layout is guaranteed even if load order changes.

   The ::deep rules MUST stay scoped: they target child component
   internals (MCard, MEmptyState, MentorPersonalTaskModal). The
   scoped attribute selector gives them ~030 specificity, beating
   the global ~020 that the same selectors would carry in
   motiva-calendar.css.
   ========================================================= */

/* ── Shell layout ────────────────────────────────────────── */

.mcal-body[b-6ezy8x0byd] {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    contain: size;
}

/* ── Calendar toolbar ────────────────────────────────────────
   The view tabs + date navigation + create action, now a sibling
   BENEATH the white MPageHeaderCard and above the grid — not part
   of the header card. `flex: 0 0 auto` keeps it a fixed cost above
   the viewport-filling grid, exactly as the header bleed was, so
   the grid still fills the rest of .mcal-body. A top gap separates
   it from the page-header card, and a bottom gap from the grid. */
.mcal-toolbar[b-6ezy8x0byd] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-block: var(--motiva-space-md, 16px) 12px;
}

/* The create action pushes to the reading end of the toolbar row. */
.mcal-toolbar .mcal-create[b-6ezy8x0byd] { margin-inline-start: auto; }

/* ── Child-component overrides (::deep required) ─────────── */

/* The inline task editor's `flex: 0 0 auto` used to live here. This page now
   opens the editor as a centred MModal, which is a fixed-position overlay and
   is not a flex item of .mcal-body at all, so the rule matched nothing. The
   mentor calendar keeps its own copy for its own inline card. */

/* 2. The MCard that wraps the month/week grid. */
.mcal-body[b-6ezy8x0byd]  .mcal-card {
    margin-block-end: 0;
    flex: 1;
    min-height: 584px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 3. MEmptyState inside the body gets the XL vertical rhythm. */
[b-6ezy8x0byd] .mcal-empty { padding-block: var(--motiva-space-xl); }

/* 4. Both views (month grid / week grid) fill the card column. */
[b-6ezy8x0byd] .mcal-card > * {
    flex: 1;
    min-height: 0;
    padding: 12px 20px 14px;
}

/* ── Event-detail: centered modal (Lecturer only) ────────────
   These scoped rules override the global drawer layout in
   motiva-calendar.css without touching Mentor / Student behavior.
   Scoped attribute selector raises specificity above the global
   .mcal-* rules, so these win for every breakpoint.
   ─────────────────────────────────────────────────────────── */

/* Scrim must sit above ALL page chrome, including the app nav
   (nav z-index ≈ 100). Match the ltp-overlay pattern. */
.mcal-scrim[b-6ezy8x0byd] {
    z-index: 110;
    pointer-events: auto;
}

/* Convert the side drawer to a centered modal */
.mcal-drawer[b-6ezy8x0byd] {
    /* cancel drawer positioning */
    top: 50%;
    bottom: auto;
    inset-inline-end: auto;
    /* center physically — works correctly in RTL */
    left: 50%;
    transform: translate(-50%, -50%);
    /* modal sizing */
    width: min(480px, 92vw);
    max-width: none;
    max-height: 85vh;
    /* above the scrim */
    z-index: 111;
    /* modal entrance: fade + slight upward drift */
    animation: mcal-modal-in-b-6ezy8x0byd 200ms var(--motiva-motion-easing-entrance, ease-out) both;
}

@keyframes mcal-modal-in-b-6ezy8x0byd {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

@media (prefers-reduced-motion: reduce) {
    .mcal-drawer[b-6ezy8x0byd] { animation: none; }
}

/* Override the global 720 px bottom-sheet breakpoint so the
   modal stays centered on small screens too. */
@media (max-width: 720px) {
    .mcal-drawer[b-6ezy8x0byd] {
        top: 50%;
        bottom: auto;
        inset-inline: auto;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(92vw, 480px);
        max-width: none;
        max-height: 90vh;
        border-radius: var(--motiva-radius-xl);
    }
}
/* /Pages/Management/Approvals/PendingApprovalSettings.razor.rz.scp.css */
/* ============================================================
   PendingApprovalSettings — הגדרות אישורי מנחה (Admin)
   Prefix: pas-

   Visual source:
       Client/Pages/Management/Milestones/MilestonesManagement.razor.css
       Client/Pages/Management/Cycles/CycleDetailPage.razor.css

   The finished Admin recipe applied to a settings screen: same header
   rhythm, strip, card border/radius, switch-row recipe, form controls and
   button language as the list screens.

   Design tokens: motiva-tokens.css. The page renders inside the canvas
   shell (.motiva .motiva-final .motiva-lecturer), so every --motiva-*
   token already resolves to the finished design's value. The var()
   fallbacks exist only so the page still renders sanely outside it.

   The previous version of this file was written against the legacy --g-*
   ramp, which inside .motiva-final yields the right colours with the wrong
   geometry — hence a replacement rather than a patch.

   Layout:
       header (crumb / title + subtitle · queue · discard · save)
       ↓ 14px
       strip  (explainer · last-updated)
       ↓ 14px
       one column of accordion sections — scrolling is expected
   ============================================================ */

/* ── Page shell ────────────────────────────────────────────── */
.pas-page[b-7e486ga28l] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
    padding-block-end: 40px;
}

/* Page header is now <MPageHeaderCard>; old .pas-head* rows removed. */

.pas-subtitle[b-7e486ga28l] {
    margin: 0;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
}

/* ── Buttons ─────────────────────────────────────────────────
   The primary's gradient, radius, hover and press come from the shared
   .motiva-cta in motiva-base.css — only geometry lives here. */
.pas-btn-primary[b-7e486ga28l],
.pas-btn-secondary[b-7e486ga28l],
.pas-btn-ghost[b-7e486ga28l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 16px;
    height: var(--motiva-control-height-md, 38px);
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.pas-btn-primary[b-7e486ga28l] { border: 0; padding: 0 18px; font-size: var(--motiva-font-size-control, 13.5px); }
.pas-btn-primary:disabled[b-7e486ga28l] { opacity: 0.55; cursor: default; }

.pas-btn-secondary[b-7e486ga28l] {
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-surface-primary, #fff);
    color: var(--motiva-text-primary, #1A1820);
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.pas-btn-secondary:hover[b-7e486ga28l] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 26%, transparent);
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035));
}

.pas-btn-ghost[b-7e486ga28l] {
    border: 0;
    background: none;
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-secondary, #5B5568);
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.pas-btn-ghost:hover[b-7e486ga28l] { background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035)); }
.pas-btn-ghost:disabled[b-7e486ga28l] { opacity: 0.5; cursor: default; }

.pas-btn-primary:focus-visible[b-7e486ga28l],
.pas-btn-secondary:focus-visible[b-7e486ga28l],
.pas-btn-ghost:focus-visible[b-7e486ga28l] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

.pas-meta[b-7e486ga28l] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
}

.pas-meta-by[b-7e486ga28l] { color: var(--motiva-text-subtle, #B7B2C2); }

/* ── Toast ───────────────────────────────────────────────────
   Success teal, failure rose. Rose appears here, on the threshold error
   and on the critical timeline step — nowhere else on the page. */
.pas-toast[b-7e486ga28l] {
    padding: 11px 14px;
    border-radius: var(--motiva-radius-md, 14px);
    border: 1px solid transparent;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.35;
}

.pas-toast--ok[b-7e486ga28l] {
    background: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 8%, transparent);
    border-color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 24%, transparent);
    color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 84%, #000);
}

.pas-toast--err[b-7e486ga28l] {
    background: color-mix(in srgb, var(--motiva-color-rose, #D93864) 8%, transparent);
    border-color: color-mix(in srgb, var(--motiva-color-rose, #D93864) 24%, transparent);
    color: var(--motiva-color-rose-ink, #B23256);
}



/* ============================================================
   THE SETTINGS STACK
   ============================================================ */

/* One column. No max-width games and no columns: eight groups at equal
   weight gave a reader no order to follow, and this page is allowed to
   scroll. */
.pas-sections[b-7e486ga28l] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* MAccordionItem draws its body inside a SECOND bordered, rounded box —
   right for a list of entities, wrong here, where it would wrap every
   settings group in a card inside a card. Flattened to plain padding.
   (0,4,0) beats the component's own (0,2,0), so this wins on specificity
   rather than on bundle order.

   `background: transparent` is the load-bearing part of this rule. The body
   otherwise paints --motiva-surface-solid over the item's open surface, so
   the tint stopped at the header and the open section read as a coloured
   strip with a white slab under it — two surfaces, not one section. */
.pas-page[b-7e486ga28l]  .pas-acc .m-acc-body {
    margin: 0;
    padding: 4px 14px 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* ── The open section — NEUTRAL, no hue at all ───────────────
   MAccordionItem's own open state is a violet wash with a violet edge
   (rgba(109,40,245,.20) / .025). That is right where an accordion is a
   PICKED row in a list of entities; here it made a settings group look
   selected, and eight of them made the page look coloured.

   The previous attempt at a fix reached for --motiva-surface-section
   (rgba(255,255,255,0.66)) on the theory that it was "the ambient wash,
   not a tint". It is not a colour — it is a HOLE. The .motiva-final canvas
   under this page is --motiva-gradient-canvas, whose first layer is
   `radial-gradient(70% 60% at 88% -10%, rgba(109,40,245,0.09), …)`. A 66%
   white sheet passes 34% of that violet radial straight through, so every
   open section still painted lavender — the more so at the top of the page,
   which is where the radial peaks. That is the purple that survived the
   last pass.

   So: an OPAQUE neutral, mixed from the ink ramp rather than the brand
   ramp, and therefore immune to whatever the canvas is doing behind it.
   ~#F8F8F9. Closed sections stay opaque white; the open one is one step
   greyer, with one step more edge (0.07 → 0.12 on the line scale). Open vs
   closed is carried by surface + border + chevron rotation. No hue. */
.pas-page[b-7e486ga28l]  .pas-acc.m-acc-open {
    background: color-mix(in srgb, var(--motiva-text-primary, #1B1A22) 4%, #FFFFFF);
    border-color: var(--motiva-border-strong, rgba(27, 26, 34, 0.12));
}

/* The head's own divider steps down to the row-divider weight, so the two
   halves of an open section separate without ruling a line across it. */
.pas-page[b-7e486ga28l]  .pas-acc.m-acc-open .m-acc-head {
    border-block-end-color: var(--motiva-border-subtle, rgba(27, 26, 34, 0.06));
}

/* The chevron. The component paints it --motiva-color-violet when open,
   which on a settings page is a purple state marker on every group the
   administrator has expanded. Both states go to the ink ramp: muted grey
   at rest, one step darker when open. The ROTATION is the state. */
.pas-page[b-7e486ga28l]  .pas-acc .m-acc-chevron {
    color: var(--motiva-text-subtle, #9B96A8);
}

.pas-page[b-7e486ga28l]  .pas-acc.m-acc-open .m-acc-chevron {
    color: var(--motiva-text-secondary, #4A4657);
}

.pas-page[b-7e486ga28l]  .pas-acc .m-acc-toggle:hover .m-acc-chevron {
    color: var(--motiva-text-primary, #1B1A22);
}

/* Header hover. The component's is --motiva-color-brand-bg, which inside
   .motiva-final is rgba(109,40,245,0.09) — a full-width purple wash under
   the pointer, and the loudest purple left on the page. The neutral hover
   the rest of this file already uses for its buttons. */
.pas-page[b-7e486ga28l]  .pas-acc .m-acc-toggle:hover {
    background: var(--motiva-surface-hover, rgba(27, 26, 34, 0.035));
}

/* The closed-state summary — what this group is currently set to. Neutral:
   it reports configuration, not status. */
.pas-tag[b-7e486ga28l] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.04));
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.3;
    color: var(--motiva-text-secondary, #5B5568);
    white-space: nowrap;
}

/* ── Setting rows ────────────────────────────────────────────
   The same switch-row the Milestones and Task-template modals use: label
   and note on the reading side, one control at the inline end. */
.pas-rows[b-7e486ga28l] {
    display: flex;
    flex-direction: column;
}

/* A row, not a card: one hairline between neighbours and nothing around
   the group. Consistent 52px minimum so a column of them scans. */
.pas-row[b-7e486ga28l] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 10px 0;
    border-bottom: 1px solid var(--motiva-border-subtle, #F0EEF9);
}

.pas-row:last-child[b-7e486ga28l] { border-bottom: 0; padding-bottom: 0; }
.pas-row:first-child[b-7e486ga28l] { padding-top: 4px; }

.pas-row-copy[b-7e486ga28l] { min-width: 0; flex: 1 1 auto; }

.pas-row-title[b-7e486ga28l] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.2;
    color: var(--motiva-text-primary, #1A1820);
}

.pas-row-note[b-7e486ga28l] {
    display: block;
    margin-top: 4px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    color: var(--motiva-text-muted, #8B8698);
}

/* "בקרוב" — a roadmap note, not a status. The brand edge, no colour of
   its own. */
.pas-soon[b-7e486ga28l] {
    padding: 3px 8px;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-tag-brand-surface);
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.3;
    color: var(--motiva-text-primary, #1A1820);
    white-space: nowrap;
}

/* ── Day thresholds ──────────────────────────────────────────
   Three numbers of the same kind, side by side, so the ordering rule they
   have to satisfy is visible while it is being typed. */
.pas-days[b-7e486ga28l] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.pas-day[b-7e486ga28l] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.pas-day-label[b-7e486ga28l] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
}

.pas-day-input[b-7e486ga28l] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-inline-end: 12px;
    height: var(--motiva-control-height-md, 38px);
    border-radius: var(--motiva-radius-sm, 10px);
    background: var(--motiva-surface-secondary, #FAF9F7);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    transition: border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

/* The three thresholds now sit in a full-width accordion body rather than
   a narrow card, so the field is capped: a 470px-wide box holding a
   two-digit number reads as a text input, not a number. */
.pas-day-input[b-7e486ga28l] { max-width: 190px; }

.pas-day-input--narrow[b-7e486ga28l] { width: 128px; max-width: 128px; }

.pas-day-input:focus-within[b-7e486ga28l] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: -1px;
    border-color: var(--motiva-color-focus-ring, #4F46E5);
}

/* The input carries no chrome of its own — the wrapper is the control, so
   the "ימים" suffix sits inside the same box as the number. */
.pas-input[b-7e486ga28l] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 12px;
    height: 100%;
    border: 0;
    background: none;
    border-radius: inherit;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-text-primary, #1A1820);
    font-variant-numeric: tabular-nums;
}

.pas-input:focus[b-7e486ga28l] { outline: none; }

.pas-day-suffix[b-7e486ga28l] {
    flex: 0 0 auto;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
}

.pas-day-hint[b-7e486ga28l] {
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    color: var(--motiva-text-muted, #8B8698);
}

.pas-inline[b-7e486ga28l] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pas-inline-label[b-7e486ga28l] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
}

/* ── Choices — frequency radios and recipient checkboxes ─────
   The native input stays in the DOM (and keeps its keyboard semantics);
   the label is the visible control. */
.pas-choices[b-7e486ga28l] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pas-choice[b-7e486ga28l] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    height: var(--motiva-control-height-md, 38px);
    border-radius: var(--motiva-radius-md, 14px);
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
    border: 1.5px solid var(--motiva-border-card, #EFEDF4);
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.pas-choice:hover[b-7e486ga28l] {
    border-color: var(--motiva-border-strong, rgba(27, 26, 34, 0.12));
    background: var(--motiva-surface-hover, rgba(27, 26, 34, 0.035));
}

/* Selected — THE BRAND EDGE, not a violet fill. This was a violet wash
   inside a solid violet 1.5px border, i.e. seven filled purple pills sitting
   inside an already-open section: the flat-fill mistake --motiva-tag-brand-surface
   exists to prevent, and the same one Catalog and Forms fixed on their
   applied-filter pills. That token is white paper with the signature sweep
   showing only as the 1px rule around it, ink stays dark — so it is the
   product's shared "chosen, not actioned" treatment rather than a purple
   control. Geometry untouched: same height, radius, padding, gap. */
.pas-choice--on[b-7e486ga28l] {
    background: var(--motiva-tag-brand-surface);
    border-color: transparent;
}

/* Hover must not repaint the border over the sweep, or the rule vanishes
   on pointer-over. Same brightness step the Catalog pill uses. */
.pas-choice--on:hover[b-7e486ga28l] {
    border-color: transparent;
    filter: brightness(0.99) saturate(1.08);
}

/* Visually replaced by the label, but never removed: it is what the
   keyboard and the screen reader operate. */
.pas-choice input[b-7e486ga28l] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}

.pas-choice:focus-within[b-7e486ga28l] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

.pas-choice-label[b-7e486ga28l] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
    white-space: nowrap;
}

/* ── Validation error ────────────────────────────────────── */
.pas-error[b-7e486ga28l] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--motiva-radius-sm, 10px);
    background: color-mix(in srgb, var(--motiva-color-rose, #D93864) 8%, transparent);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.35;
    color: var(--motiva-color-rose-ink, #B23256);
}

.pas-error svg[b-7e486ga28l] { flex: 0 0 auto; }

/* ── Scenario timeline ───────────────────────────────────────
   Four steps of one story. The tag column is fixed so the day numbers
   line up and the sentences start at the same place. */
.pas-timeline[b-7e486ga28l] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pas-tl[b-7e486ga28l] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--motiva-radius-md, 14px);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
}

/* The day column. It was violet 700 — four bold purple labels stacked
   inside an expanded section, which is a colour spent on a row label rather
   than on meaning. Dark ink at the same weight separates it from the
   sentence beside it just as well, and leaves rose as the only colour in
   the timeline, on the one step that has earned it. */
.pas-tl-tag[b-7e486ga28l] {
    flex: 0 0 74px;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.4;
    color: var(--motiva-text-primary, #1A1820);
    font-variant-numeric: tabular-nums;
}

.pas-tl-text[b-7e486ga28l] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.5;
    color: var(--motiva-text-secondary, #5B5568);
}

/* The rung at which the product declares the project at risk — the one
   step that has earned rose. */
.pas-tl--critical[b-7e486ga28l] {
    border-color: color-mix(in srgb, var(--motiva-color-rose, #D93864) 24%, transparent);
    background: color-mix(in srgb, var(--motiva-color-rose, #D93864) 5%, transparent);
}

.pas-tl--critical .pas-tl-tag[b-7e486ga28l] { color: var(--motiva-color-rose-ink, #B23256); }

/* ── Narrow Management viewports ───────────────────────────── */
@media (max-width: 900px) {
    .pas-days[b-7e486ga28l] { grid-template-columns: 1fr; }
    .pas-meta[b-7e486ga28l] { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pas-btn-secondary[b-7e486ga28l],
    .pas-btn-ghost[b-7e486ga28l],
    .pas-choice[b-7e486ga28l],
    .pas-day-input[b-7e486ga28l] { transition: none; }
}
/* /Pages/Management/Approvals/PendingMentorApprovalsManagement.razor.rz.scp.css */
/* Pending Mentor Approvals — lecturer/admin supervision inbox.
   Mirrors the visual language of the existing management pages
   (RequestsManagement, CatalogManagement). */

.pma-page[b-yweaxjbv26] {
    padding: 24px 28px;
    direction: rtl;
}

/* Header moved to the shared MPageHeaderCard + MAdminBack; dead topbar/back/breadcrumb/title rules removed. */

/* ── State views ───────────────────────────────────────────────────────── */
.pma-loading[b-yweaxjbv26], .pma-empty[b-yweaxjbv26], .pma-error[b-yweaxjbv26] {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; padding: 60px 24px; color: var(--g-text-muted, #64748b);
    font-size: 0.95rem;
}
.pma-empty-icon[b-yweaxjbv26] { font-size: 28px; color: #16a34a; }
.pma-error[b-yweaxjbv26]      { color: #b91c1c; }

.pma-spinner[b-yweaxjbv26] {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 3px solid var(--g-border-light, rgba(15,23,42,0.12));
    border-top-color: var(--g-accent, #2563eb);
    animation: pma-spin-b-yweaxjbv26 0.8s linear infinite;
}
.pma-spinner-sm[b-yweaxjbv26] { width: 14px; height: 14px; border-width: 2px; }
@keyframes pma-spin-b-yweaxjbv26 { to { transform: rotate(360deg); } }

/* ── Table ─────────────────────────────────────────────────────────────── */
.pma-table-wrap[b-yweaxjbv26] {
    overflow-x: auto;
    border: 1px solid var(--g-border-light, rgba(15,23,42,0.08));
    border-radius: var(--g-radius-md, 10px);
    background: var(--g-bg-input, #fff);
}
.pma-table[b-yweaxjbv26] {
    width: 100%;
    border-collapse: collapse;
    direction: rtl;
}
.pma-table th[b-yweaxjbv26], .pma-table td[b-yweaxjbv26] {
    padding: 12px 14px;
    text-align: right;
    vertical-align: top;
    font-size: 0.92rem;
    color: var(--g-text, #0f172a);
    border-bottom: 1px solid var(--g-border-light, rgba(15,23,42,0.06));
}
.pma-table thead th[b-yweaxjbv26] {
    font-weight: 600;
    color: var(--g-text-muted, #475569);
    background: var(--g-bg-soft, #f8fafc);
    border-bottom-width: 1px;
    white-space: nowrap;
}
.pma-table tbody tr:hover[b-yweaxjbv26] { background: var(--g-bg-hover, #f1f5f9); }

.pma-project-num[b-yweaxjbv26]   { font-weight: 700; color: var(--g-text, #0f172a); }
.pma-project-title[b-yweaxjbv26] { color: var(--g-text-muted, #475569); font-size: 0.85rem; }

.pma-days[b-yweaxjbv26] {
    display: inline-block;
    min-width: 28px;
    padding: 2px 10px;
    text-align: center;
    border-radius: 999px;
    background: var(--g-bg-soft, #f1f5f9);
    color: var(--g-text-muted, #475569);
    font-weight: 600;
}
.pma-days.pma-days-late[b-yweaxjbv26] {
    background: #fef2f2; color: #b91c1c;
}

.pma-status[b-yweaxjbv26] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
}
.pma-status-pending[b-yweaxjbv26] { background: #fef9c3; color: #92400e; }

/* ── Action buttons ────────────────────────────────────────────────────── */
.pma-actions-col[b-yweaxjbv26]   { width: 1%; white-space: nowrap; }
.pma-row-actions[b-yweaxjbv26] {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.pma-btn[b-yweaxjbv26] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: var(--g-radius-sm, 8px);
    border: 1px solid transparent;
    cursor: pointer; font-weight: 600; font-size: 0.85rem;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pma-btn:disabled[b-yweaxjbv26] { opacity: 0.6; cursor: not-allowed; }
.pma-btn-remind[b-yweaxjbv26] {
    background: #fff;
    color: #b45309;
    border-color: #fde68a;
}
.pma-btn-remind:hover:not(:disabled)[b-yweaxjbv26] {
    background: #fffbeb;
}
.pma-btn-override[b-yweaxjbv26] {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}
.pma-btn-override:hover:not(:disabled)[b-yweaxjbv26] {
    background: #1d4ed8;
}
.pma-btn-ghost[b-yweaxjbv26] {
    background: var(--g-bg-input, #fff);
    color: var(--g-text-muted, #475569);
    border-color: var(--g-border-light, rgba(15,23,42,0.15));
}
.pma-btn-ghost:hover:not(:disabled)[b-yweaxjbv26] {
    background: var(--g-bg-hover, #f1f5f9);
}

.pma-row-msg[b-yweaxjbv26] {
    margin-top: 6px;
    font-size: 0.82rem;
}
.pma-row-msg-ok[b-yweaxjbv26]  { color: #16a34a; }
.pma-row-msg-err[b-yweaxjbv26] { color: #b91c1c; }

/* ── Modal ─────────────────────────────────────────────────────────────── */
.pma-modal-overlay[b-yweaxjbv26] {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 1100;
    direction: rtl;
}
.pma-modal[b-yweaxjbv26] {
    width: min(540px, 92vw);
    background: var(--g-bg-input, #fff);
    border-radius: var(--g-radius-md, 12px);
    border: 1px solid var(--g-border-light, rgba(15,23,42,0.12));
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    display: flex; flex-direction: column;
}
.pma-modal-header[b-yweaxjbv26] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--g-border-light, rgba(15,23,42,0.08));
}
.pma-modal-title[b-yweaxjbv26] {
    margin: 0;
    font-size: 1.05rem;
    color: var(--g-text, #0f172a);
}
.pma-modal-close[b-yweaxjbv26] {
    width: 32px; height: 32px;
    border-radius: var(--g-radius-sm, 6px);
    background: transparent;
    border: 1px solid var(--g-border-light, rgba(15,23,42,0.1));
    color: var(--g-text-muted, #64748b);
    cursor: pointer;
}
.pma-modal-close:hover:not(:disabled)[b-yweaxjbv26] {
    background: var(--g-bg-hover, #f1f5f9);
}
.pma-modal-body[b-yweaxjbv26] {
    padding: 18px;
    display: flex; flex-direction: column; gap: 10px;
}
.pma-modal-context[b-yweaxjbv26] {
    background: var(--g-bg-soft, #f8fafc);
    border: 1px solid var(--g-border-light, rgba(15,23,42,0.08));
    border-radius: var(--g-radius-sm, 8px);
    padding: 10px 12px;
    font-size: 0.85rem;
    color: var(--g-text, #0f172a);
    display: flex; flex-direction: column; gap: 4px;
}
.pma-modal-label[b-yweaxjbv26] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--g-text-muted, #475569);
}
.pma-modal-textarea[b-yweaxjbv26] {
    width: 100%;
    border: 1px solid var(--g-border-light, rgba(15,23,42,0.15));
    border-radius: var(--g-radius-sm, 8px);
    padding: 10px;
    font-family: inherit;
    font-size: 0.92rem;
    resize: vertical;
    direction: rtl;
}
.pma-modal-textarea:focus[b-yweaxjbv26] {
    outline: 2px solid var(--g-accent, #2563eb);
    outline-offset: -1px;
}
.pma-modal-error[b-yweaxjbv26] {
    display: inline-flex; align-items: center; gap: 6px;
    color: #b91c1c;
    font-size: 0.85rem;
}
.pma-modal-actions[b-yweaxjbv26] {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid var(--g-border-light, rgba(15,23,42,0.08));
}
/* /Pages/Management/Catalog/CatalogManagement.razor.rz.scp.css */
/* ============================================================
   CatalogManagement — קטלוג פרויקטים (Admin)
   Prefix: pc-

   Visual source:
       Client/Pages/Management/Users/UsersManagement.razor.css

   THE SHELL, HEADER, BUTTONS, POPUP MENUS, TOOLBAR, ROW ACTIONS AND MODAL
   RULES BELOW ARE THAT FILE'S, UNDER THIS COMPONENT'S PREFIX. They are copied
   rather than shared because Blazor CSS isolation is per-component: a rule
   written in UsersManagement.razor.css carries THAT component's scope
   attribute and can never match markup rendered here. The two Admin screens
   have to be the same object, so the two files have to say the same thing —
   any change to the Admin table language belongs in both.

   What is genuinely THIS screen's, and appears nowhere in the users file:
       • the number chip and the title/organization identity cell
       • categorical type / source tags and the priority chip
       • sortable column headers
       • the pager

   Design tokens: motiva-tokens.css. The page renders inside the canvas shell
   (.motiva .motiva-final .motiva-lecturer), so every --motiva-* below already
   resolves to the FINISHED design's value — 18px card radius, 38px controls,
   the warm ink ramp, violet/teal/rose. The var() fallbacks exist only so the
   page still renders sanely if it is ever viewed outside that scope.

   The previous version of this file was written against the legacy --g-* ramp,
   which inside .motiva-final yields the right colours with the wrong geometry
   (26px radii, 40px controls). That is why it is replaced rather than patched.

   Layout:
       header row (title + summary · 2 imports + add)
       ↓ 14px
       toolbar  (search · 5 filter pills · clear · count)
       ↓ 14px
       MDataTable, full canvas width
       ↓ 14px
       pager (only past one page)
   ============================================================ */
/* ── Page shell ──────────────────────────────────────────────
   No max-width. The canvas shell already owns the side inset
   (--motiva-canvas-padding-inline); an Admin table wants every pixel of
   what it is given, and a centred column here would only throw desktop
   width away. min-width:0 keeps the table's min-width from propagating
   out and turning into PAGE-level horizontal scroll. */
.pc-page[b-4rqooq28oj] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
    padding-block-end: 40px;
}

/* ── Header ──────────────────────────────────────────────────
   The page header is now <MPageHeaderCard>: MAdminBack in Leading, MInfoTip
   + MSummaryTag in TitleTrailing, the three page actions (Airtable sync,
   file import, add project) in Actions. The old floating .pc-head /
   .pc-head-main / .pc-head-title / .pc-h1 / .pc-head-actions rules are gone. */

/* `.pc-summary` — the loose `N x · M y` line beside the h1 — is now an
   MSummaryTag, so this rule has no markup left. */

/* ── Buttons ─────────────────────────────────────────────────
   One primary on the page. The gradient, radius, hover and press all come
   from the shared .motiva-cta in motiva-base.css — everything here is
   geometry, per that file's contract. */
.pc-btn-primary[b-4rqooq28oj] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    padding: 0 16px;
    height: var(--motiva-control-height-md, 38px);
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.pc-btn-primary--lg[b-4rqooq28oj] { padding: 0 18px; font-size: var(--motiva-font-size-control, 13.5px); }

.pc-btn-primary:disabled[b-4rqooq28oj] { opacity: 0.6; cursor: default; }

/* Secondary — translucent paper with a hairline, warming to brand on
   hover. Never a second filled button: the reference gives the page one
   emphasis and one alternative. */
.pc-btn-secondary[b-4rqooq28oj] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
    height: var(--motiva-control-height-md, 38px);
    border-radius: var(--motiva-radius-sm, 10px);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    color: var(--motiva-text-primary, #1A1820);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.pc-btn-secondary:hover[b-4rqooq28oj] {
    background: #fff;
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 28%, transparent);
}

/* Ghost — modal cancel. Text weight only; a bordered cancel next to a
   gradient save reads as a second choice of equal standing. */
.pc-btn-ghost[b-4rqooq28oj] {
    padding: 0 14px;
    height: var(--motiva-control-height-md, 38px);
    border: 0;
    background: none;
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-secondary, #5B5568);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.pc-btn-ghost:hover[b-4rqooq28oj] { background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035)); }
.pc-btn-ghost:disabled[b-4rqooq28oj] { opacity: 0.5; cursor: default; }

.pc-btn-primary:focus-visible[b-4rqooq28oj],
.pc-btn-secondary:focus-visible[b-4rqooq28oj],
.pc-btn-ghost:focus-visible[b-4rqooq28oj] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* ── Popup menus — one recipe, two callers ───────────────────
   Filter menus and row menus are the same object: a floating white card of
   compact rows. Declared once so they cannot drift. (The import menu was the
   third caller until import became a wizard.) */
.pc-filter[b-4rqooq28oj],
.pc-actions[b-4rqooq28oj] {
    position: relative;
    display: flex;
}

.pc-menu[b-4rqooq28oj] {
    position: absolute;
    top: calc(100% + 6px);
    z-index: var(--motiva-z-dropdown, 500);
    min-width: 180px;
    padding: 6px;
    border-radius: var(--motiva-radius-md, 14px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    box-shadow: var(--motiva-shadow-md, 0 16px 36px rgba(30, 20, 60, 0.14));
}

/* Anchored to the reading start of its trigger. `inset-inline-start: 0`
   rather than a physical side, so an LTR build needs no second rule. */
.pc-menu--filter[b-4rqooq28oj] { inset-inline-start: 0; }

/* The kebab sits inside the name cell, so the menu has row on both sides of it
   and the choice is about what it covers. `inset-inline-start` opens it toward
   the row's END — over the type / cycle / source columns — rather than back
   over the project name the admin just picked to act on. */
.pc-menu--row[b-4rqooq28oj] {
    inset-inline-start: 0;
    top: calc(100% + 4px);
    min-width: 176px;
}

.pc-menu-item[b-4rqooq28oj] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    background: none;
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.pc-menu-item:hover:not(:disabled)[b-4rqooq28oj] { background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035)); }

.pc-menu-item:focus-visible[b-4rqooq28oj] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: -2px;
}

.pc-menu-item svg[b-4rqooq28oj] { flex: 0 0 auto; color: var(--motiva-text-muted, #8B8698); }

.pc-menu-item-label[b-4rqooq28oj] { flex: 1 1 auto; }

/* Selected option — weight and a violet check, no filled row. */
.pc-menu-item--on[b-4rqooq28oj] { font-weight: var(--motiva-font-weight-semibold, 600); }
.pc-menu-check[b-4rqooq28oj] { color: var(--motiva-color-violet, #4F46E5); }

.pc-menu-item:disabled[b-4rqooq28oj] {
    color: var(--motiva-text-subtle, #B7B2C2);
    cursor: default;
}

/* ── Toolbar ─────────────────────────────────────────────────
   align-items: stretch is doing real work. MSearchField owns its own
   height, and hardcoding a matching number on the filter pills would
   silently misalign the row the day that component's padding changes.
   Stretching makes the pills adopt whatever the search line resolves to,
   so the row is aligned by construction. */
.pc-toolbar[b-4rqooq28oj] {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 2px;
}

/* The shared search control. ::deep because MSearchField renders its own
   root, which carries ITS isolation attribute and not this page's. */
.pc-toolbar[b-4rqooq28oj]  .pc-search {
    flex: 1 1 300px;
    max-width: 440px;
}

/* Filter pill — "name: value ⌄". The label stays quiet and the value
   carries the weight, so a row of three pills scans as three answers
   rather than three questions. */
.pc-filter-btn[b-4rqooq28oj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 15px;
    border-radius: var(--motiva-radius-full, 999px);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    color: var(--motiva-text-primary, #1A1820);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.pc-filter-btn:hover[b-4rqooq28oj] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 22%, transparent);
}

.pc-filter-btn:focus-visible[b-4rqooq28oj] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* Applied filter — THE BRAND EDGE, not a violet tint.
 *
 * This was a violet-washed pill with a violet border. That is the flat-fill
 * mistake the system has a token specifically to prevent: in the Motiva
 * language an emphasised-but-not-actioned control is white paper with the
 * signature gradient showing as a 1px rule around it, and its ink stays dark.
 * A purple wash reads as a pressed button and puts a second accent colour on a
 * toolbar that already has one (the primary CTA).
 *
 * --motiva-tag-brand-surface is that treatment, declared once in
 * motiva-tokens.css and shared with every other brand-edged chip in the
 * product — three background layers: an opaque surface clipped to the padding
 * box, a translucent white softener, and the violet→teal sweep clipped to the
 * border box. It only shows if the border itself is transparent, which is why
 * the border-color is reset rather than left at the neutral hairline.
 *
 * Geometry is untouched: same height, radius, padding and gap as the resting
 * pill, so nothing in the toolbar row moves when a filter becomes active. */
.pc-filter-btn--on[b-4rqooq28oj] {
    background: var(--motiva-tag-brand-surface);
    border-color: transparent;
    color: var(--motiva-text-primary, #1A1820);
}

/* Hover must not put the neutral/violet hairline back over the gradient —
 * `.pc-filter-btn:hover` above would otherwise repaint border-color and the
 * sweep would vanish on pointer-over. The active pill's hover is the same
 * brightness step the CTA uses, so the feedback survives without a new colour. */
.pc-filter-btn--on:hover[b-4rqooq28oj] {
    border-color: transparent;
    filter: brightness(0.99) saturate(1.08);
}

/* The label inside an active pill stays quiet — the gradient rule is what
   marks the pill as applied, so the "תפקיד"/"מחזור" caption does not also
   need to darken. */
.pc-filter-btn--on .pc-filter-name[b-4rqooq28oj] { color: var(--motiva-text-muted, #8B8698); }

.pc-filter-name[b-4rqooq28oj] {
    font-size: var(--motiva-font-size-control, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #8B8698);
}

.pc-filter-value[b-4rqooq28oj] {
    font-size: var(--motiva-font-size-control, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
}

.pc-filter-chev[b-4rqooq28oj] {
    color: var(--motiva-text-muted, #8B8698);
    transition: transform var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.pc-filter-chev--open[b-4rqooq28oj] { transform: rotate(180deg); }

.pc-clear[b-4rqooq28oj] {
    align-self: center;
    padding: 8px 4px;
    border: 0;
    background: none;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-color-violet, #4F46E5);
    white-space: nowrap;
    cursor: pointer;
}

.pc-clear:hover[b-4rqooq28oj] { text-decoration: underline; }

.pc-clear:focus-visible[b-4rqooq28oj] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Pushed to the far end of the toolbar — the count answers the toolbar,
   so it belongs on the same line, at the end of it. */
.pc-result[b-4rqooq28oj] {
    align-self: center;
    margin-inline-start: auto;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
}

/* ============================================================
   TABLE
   Surface, head rhythm, dividers and hover come from MDataTable.
   Everything below is what a Catalog cell specifically contains.
   ============================================================ */

/* Fixed columns. The title carries no width and takes the remainder — see the
   <col> comment in the .razor.
   
   EVERY SIZED COLUMN IS THE WIDTH OF WHAT IT HOLDS, NOT MORE. They were each
   20-30px wider than their longest value, which under table-layout:fixed is
   not padding — it is space taken FROM the title, the one column whose content
   actually runs long. Trimming the six of them hands ~100px back to the name
   at every viewport, and closes the gaps between the metadata columns at the
   same time. */
.pc-col-number[b-4rqooq28oj]  { width: 56px; }
.pc-col-type[b-4rqooq28oj]    { width: 112px; }
.pc-col-cycle[b-4rqooq28oj]   { width: 92px; }
.pc-col-source[b-4rqooq28oj]  { width: 84px; }
.pc-col-status[b-4rqooq28oj]  { width: 138px; }
.pc-col-team[b-4rqooq28oj]    { width: 132px; }

/* ── Sortable headers ────────────────────────────────────────
   A <th> whose whole label is the control. The chevron is present only on the
   column currently sorting: eight permanently-drawn arrows would make the head
   the loudest row on the screen and say nothing, since only one of them is
   ever true. */
.pc-sort[b-4rqooq28oj] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
}

.pc-sort:hover[b-4rqooq28oj] { color: var(--motiva-text-primary, #1A1820); }

.pc-sort:focus-visible[b-4rqooq28oj] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
    border-radius: 4px;
}

.pc-sort--on[b-4rqooq28oj] { color: var(--motiva-text-primary, #1A1820); }

/* Hidden rather than absent, so adopting a column does not change the width of
   its header cell and shift every column after it. */
.pc-sort-mark[b-4rqooq28oj] {
    display: inline-flex;
    color: var(--motiva-color-violet, #4F46E5);
    opacity: 0;
    transition: transform var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.pc-sort--on .pc-sort-mark[b-4rqooq28oj] { opacity: 1; }

/* A rotation, not a second glyph — direction-free. */
.pc-sort-mark--desc[b-4rqooq28oj] { transform: rotate(180deg); }

/* ── Identity ────────────────────────────────────────────────
   A CATALOG ROW IS IDENTIFIED BY ITS NUMBER AND ITS TITLE, so the users
   table's single identity cell is split across two columns here. The title
   column carries the weight; the number is a reference, and reads as one.

   THE NUMBER IS PLAIN TEXT, NOT A CHIP. It was a tinted, bordered, rounded
   pill — the same shape this table uses for the type tag and the priority
   chip, both of which carry a MEANING you can compare between rows. A project
   number means nothing except "this row"; drawing it in badge clothing put a
   filled shape at the head of all 25 rows and made the loudest thing in the
   identity area the one value nobody scans by. */
.pc-num[b-4rqooq28oj] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.2;
    color: var(--motiva-text-muted, #8B8698);
    /* Latin digits inside an RTL row: tabular so a column of them aligns,
       isolated so they cannot drag the cell's punctuation around. */
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
    user-select: none;
}

/* In the detail modal the number has no column header to name it, so it keeps
   its "#" and sits above the title as its reference line. */
.pc-num--lg[b-4rqooq28oj] {
    display: block;
    margin-block-end: 3px;
    font-size: var(--motiva-font-size-sm, 13px);
}

/* THE IDENTITY CELL HOLDS THE NAME AND THE CONTROL THAT ACTS ON IT.
   The title button shrinks to its content (flex: 0 1 auto) rather than filling
   the cell, so the kebab sits immediately after a short name instead of at the
   far edge of the widest column in the table — which is what made the control
   feel unrelated to its row. A long name still takes the whole cell and
   ellipsises, and the kebab follows that. min-width:0 on the button is what
   lets the ellipsis happen at all inside a flex row. */
.pc-cell-identity[b-4rqooq28oj] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

/* The title is the row's one affordance — it opens the detail, which is what
   a row click did before this redesign. A button, not a styled <div>, so it is
   reachable and announced without a second hidden control. */
.pc-title-btn[b-4rqooq28oj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    /* Shrink to content, never grow: growing is what pushed the kebab away. */
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    padding: 2px 0;
    border: 0;
    background: none;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    text-align: start;
    cursor: pointer;
}

.pc-title-btn:focus-visible[b-4rqooq28oj] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
    border-radius: 6px;
}

.pc-title[b-4rqooq28oj] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.25;
    color: var(--motiva-text-primary, #1A1820);
}

.pc-title-btn:hover .pc-title[b-4rqooq28oj] { color: var(--motiva-color-violet, #4F46E5); }

/* The organization is context for the title, not a value of its own — hence a
   subline rather than a ninth column. */
.pc-org[b-4rqooq28oj] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.25;
    color: var(--motiva-text-muted, #8B8698);
}

/* ── Secondary values ────────────────────────────────────── */
.pc-cell-quiet[b-4rqooq28oj] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--motiva-text-secondary, #5B5568);
}

.pc-team[b-4rqooq28oj] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-team--none[b-4rqooq28oj] { color: var(--motiva-text-subtle, #B7B2C2); }

/* ── Categorical tags ────────────────────────────────────────
   ONE TAG RECIPE, THREE WEIGHTS OF THE SAME EDGE.

   The type tag and the source tag are both categorical facts about a row, and
   they used to be drawn in two unrelated languages: the type as a violet-tinted
   fill with violet text, the source as the system's full gradient brand edge.
   Two badge styles in one row, neither quieter than the other, and between them
   they put more colour on every row than the status column — which is the one
   value here that actually carries a state.

   So all three are now the same object: white paper, a hairline, dark readable
   text. Only the hairline changes, and it is the whole signal — a brand-tinted
   rule for the two values worth noticing (the project's type, and a record that
   came from Airtable rather than from a person), a neutral rule for the plain
   one. Categorical, never semantic: the Master's violet/teal/rose set means
   progress and attention, and a type is neither, so no tag here is filled and
   rose is not used at all.

   NOT --motiva-tag-brand-surface. That token is the system's "emphasised but
   not actioned" treatment and it earns its weight by being rare — it is what
   an APPLIED filter pill and the CURRENT pager page wear on this screen. Spending
   it on a value that appears on all 25 rows is what made it stop reading as
   emphasis. The rule below is the same construction at a lower volume. */
.pc-tag[b-4rqooq28oj] {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px 10px;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    color: var(--motiva-text-primary, #1A1820);
    white-space: nowrap;
}

/* The two that are worth noticing take the brand-tinted rule. */
.pc-tag--type[b-4rqooq28oj],
.pc-tag--airtable[b-4rqooq28oj] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 24%, transparent);
}

/* "ידני" is the default provenance — the absence of a sync, not a fact about
   the project. Neutral rule, quiet ink. */
.pc-tag--manual[b-4rqooq28oj] {
    color: var(--motiva-text-secondary, #5B5568);
}

/* Only in the detail modal's header, where it states a fact the row's own
   שיוך column already carries in the table. Teal because "assigned" IS a
   state, unlike a type or a source. */
.pc-tag--assigned[b-4rqooq28oj] {
    border-color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 30%, transparent);
    color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 82%, #000);
}

/* ── Status ──────────────────────────────────────────────────
   Dot + text, no filled pill: 25 filled chips down a column would become the
   loudest thing on the screen and say the least.

   THREE TONES, NOT TWO. The catalog writes זמין / לא זמין, but the assignment
   flow also puts "Active" / "InProgress" on a project, and those describe a
   project already in motion — a different axis from "may a team pick this
   up". They are drawn neutral rather than forced onto teal or rose. */
.pc-status-cell[b-4rqooq28oj] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.pc-status[b-4rqooq28oj] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--motiva-font-size-caption, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
}

.pc-status-dot[b-4rqooq28oj] {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.pc-status--on[b-4rqooq28oj]    { color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 88%, #000); }
.pc-status--off[b-4rqooq28oj]   { color: var(--motiva-color-rose-ink, #B23256); }
.pc-status--other[b-4rqooq28oj] { color: var(--motiva-text-muted, #8B8698); }

/* Priority qualifies the availability and has no column of its own, so it
   rides beside it — smaller and quieter than the status it modifies. */
.pc-priority[b-4rqooq28oj] {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035));
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.3;
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
}

/* Only the top rung is coloured. Marking all three would spend the page's one
   attention colour on the two priorities that are not urgent. */
.pc-priority--high[b-4rqooq28oj] {
    background: color-mix(in srgb, var(--motiva-color-rose, #D93864) 8%, transparent);
    color: var(--motiva-color-rose-ink, #B23256);
}
/* ── Row actions ─────────────────────────────────────────────
   The kebab is quiet until hovered or opened: 28 dark glyphs down the
   last column would compete with the names. */
.pc-cell-actions[b-4rqooq28oj] {
    position: relative;
    flex: 0 0 auto;
}

/* An open menu has to paint over the rows BELOW it. Every actions cell is
   positioned, so without this the next row's cell — later in tree order —
   paints on top of the popup. Raising only the active row is enough:
   at most one menu is open at a time. */
.pc-page tr.m-dt-row-active .pc-cell-identity[b-4rqooq28oj],
.pc-page tr.m-dt-row-active .pc-cell-actions[b-4rqooq28oj] { z-index: 20; }

.pc-actions[b-4rqooq28oj] { justify-content: center; }

.pc-kebab[b-4rqooq28oj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--motiva-text-muted, #8B8698);
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.pc-kebab:hover[b-4rqooq28oj],
.pc-kebab--on[b-4rqooq28oj] {
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035));
    color: var(--motiva-text-primary, #1A1820);
}

.pc-kebab:focus-visible[b-4rqooq28oj] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 1px;
}

/* ============================================================
   MODALS — add / edit project, and the read-only detail
   The users screen's modal rules, unchanged. What changed here is only which
   modals exist: this page has no reset-password confirmation, and its two
   modals are both wide because the project form is three grouped sections
   and the detail is a record, not a sentence.
   ============================================================ */

.pc-modal-overlay[b-4rqooq28oj] {
    position: fixed;
    inset: 0;
    z-index: var(--motiva-z-modal, 1000);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(26, 24, 32, 0.36);
    backdrop-filter: blur(2px);
}

.pc-modal-box[b-4rqooq28oj] {
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    border-radius: var(--motiva-radius-xl, 24px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    box-shadow: var(--motiva-shadow-lg, 0 32px 70px rgba(30, 20, 60, 0.28));
    overflow: hidden;
}

/* Both modals on this page are wide: the add/edit form is three grouped
   sections of paired fields, and the detail is a full record. The users
   screen's 520px default stays as the base so the two files keep one
   declaration of the modal box. */
.pc-modal-box--wide[b-4rqooq28oj] { max-width: 760px; }

.pc-modal-header[b-4rqooq28oj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 14px;
}

.pc-modal-title[b-4rqooq28oj] {
    font-size: var(--motiva-font-size-h2, 18px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.3;
    color: var(--motiva-text-primary, #1A1820);
}

.pc-modal-subtitle[b-4rqooq28oj] {
    margin-top: 4px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.3;
    color: var(--motiva-text-muted, #8B8698);
    overflow-wrap: anywhere;
}

.pc-modal-close[b-4rqooq28oj] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--motiva-text-muted, #8B8698);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.pc-modal-close:hover[b-4rqooq28oj] {
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035));
    color: var(--motiva-text-primary, #1A1820);
}

.pc-modal-body[b-4rqooq28oj] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 22px 18px;
    overflow-y: auto;
}

.pc-modal-footer[b-4rqooq28oj] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px 20px;
    border-top: 1px solid var(--motiva-border-subtle, #F0EEF9);
}

/* ── Form controls ───────────────────────────────────────── */
.pc-form-row[b-4rqooq28oj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.pc-form-field[b-4rqooq28oj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.pc-form-label[b-4rqooq28oj] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
}

.pc-form-input[b-4rqooq28oj],
.pc-form-select[b-4rqooq28oj] {
    width: 100%;
    box-sizing: border-box;
    height: var(--motiva-control-height-md, 38px);
    padding: 0 12px;
    border-radius: var(--motiva-radius-sm, 10px);
    background: var(--motiva-surface-secondary, #FAF9F7);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-primary, #1A1820);
    transition: border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.pc-form-input[b-4rqooq28oj]::placeholder { color: var(--motiva-text-subtle, #B7B2C2); }

.pc-form-input:focus[b-4rqooq28oj],
.pc-form-select:focus[b-4rqooq28oj] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: -1px;
    border-color: var(--motiva-color-focus-ring, #4F46E5);
}

/* ── Inline feedback ─────────────────────────────────────────
   Rose for the failure. There is no teal counterpart here: a successful save
   closes the modal and refetches, so the confirmation IS the updated table. */
.pc-form-error[b-4rqooq28oj] {
    padding: 10px 12px;
    border-radius: var(--motiva-radius-sm, 10px);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.45;
    background: color-mix(in srgb, var(--motiva-color-rose, #D93864) 8%, transparent);
    color: var(--motiva-color-rose-ink, #B23256);
}

.pc-spinner-sm[b-4rqooq28oj] {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pc-spin-b-4rqooq28oj 0.7s linear infinite;
}

@keyframes pc-spin-b-4rqooq28oj { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .pc-spinner-sm[b-4rqooq28oj] { animation-duration: 2.4s; }
    .pc-filter-chev[b-4rqooq28oj],
    .pc-btn-secondary[b-4rqooq28oj],
    .pc-menu-item[b-4rqooq28oj],
    .pc-kebab[b-4rqooq28oj] { transition: none; }
}

/* ============================================================
   PAGER
   Client-side over the one unpaged GET. Rendered only past one page — a pager
   that cannot move is furniture.
   ============================================================ */
.pc-pager[b-4rqooq28oj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 2px 4px;
}

.pc-pager-range[b-4rqooq28oj] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
}

.pc-pager-controls[b-4rqooq28oj] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pc-pager-btn[b-4rqooq28oj],
.pc-pager-num[b-4rqooq28oj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-sm, 10px);
    background: none;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.pc-pager-btn:hover:not(:disabled)[b-4rqooq28oj],
.pc-pager-num:hover[b-4rqooq28oj] { background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035)); }

.pc-pager-btn:disabled[b-4rqooq28oj] {
    color: var(--motiva-text-subtle, #B7B2C2);
    cursor: default;
}

/* The current page is the brand EDGE — white paper with the signature
   gradient as its rule — the same treatment an applied filter pill takes, and
   for the same reason: a selected control is never a violet fill. */
.pc-pager-num--on[b-4rqooq28oj],
.pc-pager-num--on:hover[b-4rqooq28oj] {
    background: var(--motiva-tag-brand-surface);
    border-color: transparent;
    color: var(--motiva-text-primary, #1A1820);
    font-weight: var(--motiva-font-weight-semibold, 600);
}

.pc-pager-btn:focus-visible[b-4rqooq28oj],
.pc-pager-num:focus-visible[b-4rqooq28oj] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

.pc-pager-gap[b-4rqooq28oj] {
    padding: 0 2px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    color: var(--motiva-text-subtle, #B7B2C2);
}

/* ============================================================
   FORM SECTIONS AND THE READ-ONLY DETAIL
   The add/edit form is long enough to need grouping, which the users modal
   does not; the section rule and its label are the only additions to that
   modal's vocabulary.
   ============================================================ */
.pc-form-section[b-4rqooq28oj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* The rule belongs to the section that follows it, not to the one above, so
   the first group opens flush with the modal body. */
.pc-form-section + .pc-form-section[b-4rqooq28oj] {
    padding-block-start: 16px;
    border-top: 1px solid var(--motiva-border-subtle, #F0EEF9);
}

.pc-form-section-title[b-4rqooq28oj] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
}

.pc-form-section-optional[b-4rqooq28oj] {
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-subtle, #B7B2C2);
}

.pc-form-textarea[b-4rqooq28oj] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: var(--motiva-radius-sm, 10px);
    background: var(--motiva-surface-secondary, #FAF9F7);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.55;
    color: var(--motiva-text-primary, #1A1820);
    resize: vertical;
    transition: border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.pc-form-textarea[b-4rqooq28oj]::placeholder { color: var(--motiva-text-subtle, #B7B2C2); }

.pc-form-textarea:focus[b-4rqooq28oj] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: -1px;
    border-color: var(--motiva-color-focus-ring, #4F46E5);
}

/* The detail modal's header carries the number chip and the row's own tags,
   so it needs the identity cluster the create/edit header does not. */
.pc-modal-head-id[b-4rqooq28oj] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.pc-modal-meta[b-4rqooq28oj] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 7px;
}

/* A real <dl>: these are name/value pairs, and the two-column grid is the
   presentation of that, not the structure. */
.pc-detail-grid[b-4rqooq28oj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px 18px;
    margin: 0;
}

.pc-detail-row[b-4rqooq28oj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pc-detail-key[b-4rqooq28oj] {
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
}

.pc-detail-val[b-4rqooq28oj] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    color: var(--motiva-text-primary, #1A1820);
    overflow-wrap: anywhere;
}

.pc-detail-text[b-4rqooq28oj] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-regular, 400);
    line-height: var(--motiva-line-height-body, 1.6);
    color: var(--motiva-text-secondary, #5B5568);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.pc-detail-text--quiet[b-4rqooq28oj] { color: var(--motiva-text-muted, #8B8698); }

.pc-detail-sub[b-4rqooq28oj] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #8B8698);
}

/* ── Narrow Management viewports ─────────────────────────────
   The table's own scroller takes over below ~1000px (MDataTable). Here the
   page furniture stops trying to hold a single line: the header actions wrap
   under the title, the toolbar's count drops its auto-margin so it does not
   sit alone on a line of its own, and the pager stacks. */
@media (max-width: 900px) {
    .pc-toolbar[b-4rqooq28oj]  .pc-search { flex: 1 1 100%; max-width: none; }
    .pc-result[b-4rqooq28oj] { margin-inline-start: 0; }

    .pc-form-row[b-4rqooq28oj] { grid-template-columns: 1fr; }

    .pc-pager[b-4rqooq28oj] { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .pc-sort-mark[b-4rqooq28oj],
    .pc-pager-btn[b-4rqooq28oj],
    .pc-pager-num[b-4rqooq28oj],
    .pc-form-textarea[b-4rqooq28oj] { transition: none; }
}
/* /Pages/Management/Cycles/CycleDetailPage.razor.rz.scp.css */
/* ============================================================
   CycleDetailPage — תוכנית המחזור (Admin)
   Prefix: cd-

   Visual source:
       design/design-system/Motiva Admin Cycle Detail.dc.html

   Design tokens: motiva-tokens.css. The page renders inside the canvas
   shell (.motiva .motiva-final .motiva-lecturer), so every --motiva-*
   token already resolves to the finished design's value — 18px card
   radius, 38px controls, the warm ink ramp, violet/teal/rose. The var()
   fallbacks exist only so the page still renders sanely outside it.

   WHY THE REFERENCE'S LITERAL VALUES ARE NOT COPIED
   The prototype is a standalone HTML page: it hardcodes #6D28F5, 36px
   frame radii, 999px pills and its own Heebo stack because it has no
   token layer to read from. Inside .motiva-final those same intentions
   already have names, and re-stating the hex would fork the palette the
   first time a token moves. Composition and rhythm are taken literally;
   colour and geometry are taken by role.

   Layout:
       header  (breadcrumb / title + state + meta · edit cycle)
       ↓ 14px
       section head (title + count · add milestone + overflow)
       ↓ 12px
       MDataTable, full canvas width
   ============================================================ */

/* ── Page shell ────────────────────────────────────────────── */
.cd-page[b-f41krf7odi] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
    padding-block-end: 40px;
}

/* Page header is now <MPageHeaderCard>; old .cd-head* rows removed. */

.cd-meta[b-f41krf7odi] {
    margin: 0;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
    white-space: nowrap;
}

/* The current-cycle pill — the brand EDGE around paper, never a violet
   fill. Its dot is solid violet rather than the sweep: below ~12px the
   gradient renders as its blue midpoint and stops reading as the brand. */
.cd-state-tag[b-f41krf7odi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-tag-brand-surface);
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
    white-space: nowrap;
}

.cd-state-dot[b-f41krf7odi] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--motiva-color-violet, #4F46E5);
}

/* ── Buttons ─────────────────────────────────────────────────
   Gradient, radius, hover and press for the primary come from the shared
   .motiva-cta in motiva-base.css — only geometry lives here. */
.cd-btn-primary[b-f41krf7odi] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    padding: 0 17px;
    height: var(--motiva-control-height-md, 38px);
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.cd-btn-primary:disabled[b-f41krf7odi] { opacity: 0.55; cursor: default; }

.cd-btn-secondary[b-f41krf7odi] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
    height: var(--motiva-control-height-md, 38px);
    border-radius: var(--motiva-radius-sm, 10px);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    color: var(--motiva-text-primary, #1A1820);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.cd-btn-secondary:hover[b-f41krf7odi] {
    background: #fff;
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 28%, transparent);
}

.cd-btn-ghost[b-f41krf7odi] {
    padding: 0 14px;
    height: var(--motiva-control-height-md, 38px);
    border: 0;
    background: none;
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-secondary, #5B5568);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.cd-btn-ghost:hover[b-f41krf7odi] { background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035)); }
.cd-btn-ghost:disabled[b-f41krf7odi] { opacity: 0.5; cursor: default; }

.cd-btn-primary:focus-visible[b-f41krf7odi],
.cd-btn-secondary:focus-visible[b-f41krf7odi],
.cd-btn-ghost:focus-visible[b-f41krf7odi] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* ── Section head ────────────────────────────────────────────
   The program's own actions live on its title row, not in the page
   header. That is the reference's central structural decision: adding a
   milestone and applying templates act on the PROGRAM, and putting them
   beside "עריכת מחזור" would imply they act on the cycle's own fields. */
.cd-section-head[b-f41krf7odi] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 6px 2px 0;
}

.cd-section-title[b-f41krf7odi] {
    margin: 0;
    font-size: var(--motiva-font-size-item, 15px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
}

/* Compact section-label capsule — a light paper pill with a subtle Motiva
   hairline, NOT a CTA. Type scale is inherited from .cd-section-title
   (15px/600), so only the surface/padding/radius are added here. */
.cd-section-pill[b-f41krf7odi] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-panel-border, rgba(109, 40, 245, 0.08));
}

.cd-section-note[b-f41krf7odi] {
    margin-inline-start: 8px;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #8B8698);
}

.cd-section-actions[b-f41krf7odi] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
}

/* The overflow trigger — a round paper button, matched in height to the
   primary beside it so the pair sits on one optical line. */
.cd-round-btn[b-f41krf7odi] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--motiva-control-height-md, 38px);
    height: var(--motiva-control-height-md, 38px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    color: var(--motiva-text-secondary, #5B5568);
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.cd-round-btn:hover[b-f41krf7odi],
.cd-round-btn--on[b-f41krf7odi] {
    background: #fff;
    color: var(--motiva-text-primary, #1A1820);
}

.cd-round-btn:focus-visible[b-f41krf7odi] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* Shown when the cycle is Closed or Archived and every write control is
   disabled. Quiet paper, not a rose alert: the state is a fact about the
   cycle, not a failure. */
.cd-locked-note[b-f41krf7odi] {
    padding: 10px 14px;
    border-radius: var(--motiva-radius-md, 14px);
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.45;
    color: var(--motiva-text-secondary, #5B5568);
}

/* ── Popup menus — one recipe, two callers ─────────────────── */
.cd-actions[b-f41krf7odi] { position: relative; display: flex; }

.cd-menu[b-f41krf7odi] {
    position: absolute;
    top: calc(100% + 6px);
    z-index: var(--motiva-z-dropdown, 500);
    min-width: 190px;
    padding: 6px;
    border-radius: var(--motiva-radius-md, 14px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    box-shadow: var(--motiva-shadow-md, 0 16px 36px rgba(30, 20, 60, 0.14));
}

/* Both menus hang from a trigger sitting at the row's INLINE END — the
   far left in RTL — so both must anchor their own end edge to it and
   grow inward. `inset-inline-start: 0` would pin the menu's start edge
   instead and push its width further outward, straight off the viewport,
   which also gives the page a horizontal scrollbar it should never have.
   Wider than the row menu because its two main items each carry an
   explanatory line. */
.cd-menu--program[b-f41krf7odi] {
    inset-inline-end: 0;
    min-width: 268px;
}

.cd-menu--row[b-f41krf7odi] {
    inset-inline-end: 0;
    top: calc(100% + 4px);
    min-width: 186px;
}

.cd-menu-item[b-f41krf7odi] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    background: none;
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.cd-menu-item:hover:not(:disabled)[b-f41krf7odi] { background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035)); }

.cd-menu-item:focus-visible[b-f41krf7odi] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: -2px;
}

.cd-menu-item:disabled[b-f41krf7odi] { color: var(--motiva-text-subtle, #B7B2C2); cursor: default; }
.cd-menu-item:disabled .cd-menu-note[b-f41krf7odi] { color: var(--motiva-text-subtle, #B7B2C2); }
.cd-menu-item > svg[b-f41krf7odi] { flex: 0 0 auto; color: var(--motiva-text-muted, #8B8698); }

/* The two-line variant: an icon, a title and a line saying what the
   action actually does. Both apply-templates entries need it — their
   names are nearly the same and their effects are not. */
.cd-menu-item--rich[b-f41krf7odi] { align-items: flex-start; white-space: normal; }

.cd-menu-ico[b-f41krf7odi] {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--motiva-text-muted, #8B8698);
    display: flex;
}

.cd-menu-copy[b-f41krf7odi] { min-width: 0; }

.cd-menu-title[b-f41krf7odi] {
    display: block;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.2;
}

.cd-menu-note[b-f41krf7odi] {
    display: block;
    margin-top: 4px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    color: var(--motiva-text-muted, #8B8698);
}

.cd-menu-item--danger[b-f41krf7odi] { color: var(--motiva-color-rose-ink, #B23256); }
.cd-menu-item--danger > svg[b-f41krf7odi] { color: currentColor; }

.cd-menu-item--danger:hover:not(:disabled)[b-f41krf7odi] {
    background: color-mix(in srgb, var(--motiva-color-rose, #D93864) 8%, transparent);
}

.cd-menu-sep[b-f41krf7odi] {
    height: 1px;
    margin: 5px 8px;
    background: var(--motiva-border-subtle, #F0EEF9);
}

/* ============================================================
   PROGRAM TABLE
   Surface, head rhythm, dividers and hover come from MDataTable.
   ============================================================ */

.cd-col-num[b-f41krf7odi]     { width: 52px; }
.cd-col-type[b-f41krf7odi]    { width: 118px; }
.cd-col-dates[b-f41krf7odi]   { width: 138px; }
.cd-col-count[b-f41krf7odi]   { width: 76px; }
.cd-col-status[b-f41krf7odi]  { width: 96px; }
.cd-col-order[b-f41krf7odi]   { width: 62px; }
.cd-col-actions[b-f41krf7odi] { width: 48px; }

/* An inactive milestone stays fully legible but recedes — it is still
   part of the program, just not presented to projects. */
.cd-row--off[b-f41krf7odi] { opacity: 0.62; }

/* The order disc. A tint of the signature sweep with a violet hairline,
   never the sweep itself: 28 saturated discs down a column would make
   the numbers the loudest thing on a screen about names. */
.cd-num[b-f41krf7odi] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background:
        linear-gradient(140deg,
            color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 10%, transparent),
            color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 10%, transparent)),
        var(--motiva-surface-primary, #fff);
    border: 1px solid color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 14%, transparent);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
    font-variant-numeric: tabular-nums;
    user-select: none;
}

/* ── Name + description ────────────────────────────────────── */
.cd-cell-name[b-f41krf7odi] { min-width: 0; }

.cd-name-line[b-f41krf7odi] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.cd-name[b-f41krf7odi] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.25;
    color: var(--motiva-text-primary, #1A1820);
}

/* Replaces the reference's "מבוסס על תבנית" chip, which would be true on
   every row here. This one is only drawn when it is actually true and
   actually matters: the template is shared with another cycle, so an
   edit to the shared fields reaches beyond this screen. */
.cd-shared[b-f41krf7odi] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
}

.cd-desc[b-f41krf7odi] {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    color: var(--motiva-text-muted, #8B8698);
}

/* ── Project-type chip ───────────────────────────────────────
   CATEGORICAL, NOT SEMANTIC. A project type means neither progress nor
   attention, so these stay low-alpha tints and rose is not used here at
   all. "שניהם" takes the brand edge rather than a fourth invented hue. */
.cd-type[b-f41krf7odi] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-full, 999px);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
}

.cd-type-dot[b-f41krf7odi] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: currentColor;
}

.cd-type--tech[b-f41krf7odi] {
    background: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 8%, transparent);
    color: var(--motiva-color-violet, #4F46E5);
}

.cd-type--method[b-f41krf7odi] {
    background: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 10%, transparent);
    /* The teal token is too light for 11px text on its own tint. */
    color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 82%, #000);
}

.cd-type--both[b-f41krf7odi] {
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary, #1A1820);
}

/* The "both" dot cannot be currentColor — the chip's ink is neutral. */
.cd-type--both .cd-type-dot[b-f41krf7odi] { background: var(--motiva-color-violet, #4F46E5); }

/* ── Values ──────────────────────────────────────────────────
   Dates and counts are quiet by construction: the row is scanned by
   name, and the numbers are looked up once the eye has already stopped. */
.cd-cell-dates[b-f41krf7odi] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.2;
    white-space: nowrap;
    color: var(--motiva-text-secondary, #5B5568);
}

.cd-cell-num[b-f41krf7odi] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
    font-variant-numeric: tabular-nums;
}

.cd-cell-empty[b-f41krf7odi] { color: var(--motiva-text-subtle, #B7B2C2); font-weight: var(--motiva-font-weight-medium, 500); }

/* ── Status ──────────────────────────────────────────────────
   Dot + text, no filled pill — the same treatment the Users and Cycles
   tables use. Two values across many rows; chips would become the
   loudest column and say the least. Inactive is neutral, never rose:
   deactivating a milestone is a normal editorial act, not a fault. */
.cd-status[b-f41krf7odi] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--motiva-font-size-caption, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
}

.cd-status-dot[b-f41krf7odi] {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.cd-status--on[b-f41krf7odi]       { color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 88%, #000); }
.cd-status--off[b-f41krf7odi]      { color: var(--motiva-text-muted, #8B8698); }
.cd-status--inactive[b-f41krf7odi] { color: var(--motiva-text-muted, #8B8698); }
.cd-status--closed[b-f41krf7odi]   { color: var(--motiva-text-secondary, #5B5568); }
.cd-status--archived[b-f41krf7odi] { color: var(--motiva-color-rose-ink, #B23256); }

/* ── Order controls ────────────────────────────────────────── */
.cd-order[b-f41krf7odi] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.cd-order-btn[b-f41krf7odi] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 7px;
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035));
    color: var(--motiva-text-secondary, #5B5568);
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.cd-order-btn:hover:not(:disabled)[b-f41krf7odi] {
    background: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 9%, transparent);
    color: var(--motiva-color-violet, #4F46E5);
}

/* A disabled arrow is the first/last row's honest state, so it stays in
   place at low contrast rather than disappearing — a column whose
   controls come and go is a column that jumps. */
.cd-order-btn:disabled[b-f41krf7odi] {
    background: none;
    color: var(--motiva-text-subtle, #B7B2C2);
    cursor: default;
}

.cd-order-btn:focus-visible[b-f41krf7odi] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 1px;
}

/* ── Row actions ───────────────────────────────────────────── */
.cd-cell-actions[b-f41krf7odi] { position: relative; }

/* An open menu has to paint over the rows BELOW it. Every actions cell
   is positioned, so without this the next row's cell — later in tree
   order — paints on top of the popup. */
.cd-page tr.m-dt-row-active .cd-cell-actions[b-f41krf7odi] { z-index: 20; }

/* The section head's own menu outranks the table entirely. */
.cd-section-head[b-f41krf7odi] { position: relative; z-index: 30; }

.cd-kebab[b-f41krf7odi] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--motiva-text-muted, #8B8698);
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.cd-kebab:hover:not(:disabled)[b-f41krf7odi],
.cd-kebab--on[b-f41krf7odi] {
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035));
    color: var(--motiva-text-primary, #1A1820);
}

.cd-kebab:disabled[b-f41krf7odi] { color: var(--motiva-text-subtle, #B7B2C2); cursor: default; }

.cd-kebab:focus-visible[b-f41krf7odi] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 1px;
}

.cd-sr[b-f41krf7odi] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   MODALS — milestone / cycle / templates / rollout
   ============================================================ */

.cd-modal-overlay[b-f41krf7odi] {
    position: fixed;
    inset: 0;
    z-index: var(--motiva-z-modal, 1000);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(26, 24, 32, 0.36);
    backdrop-filter: blur(2px);
}

.cd-modal-box[b-f41krf7odi] {
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    border-radius: var(--motiva-radius-xl, 24px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    box-shadow: var(--motiva-shadow-lg, 0 32px 70px rgba(30, 20, 60, 0.28));
    overflow: hidden;
}

.cd-modal-box--lg[b-f41krf7odi] { max-width: 660px; }
.cd-modal-box--sm[b-f41krf7odi] { max-width: 460px; }

.cd-modal-header[b-f41krf7odi] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 22px 14px;
}

/* A tint of the sweep, not the sweep itself — a full gradient on a 38px
   chip reads as a button rather than an emblem. */
.cd-modal-glyph[b-f41krf7odi] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--motiva-radius-sm, 10px);
    background:
        linear-gradient(140deg,
            color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 13%, transparent),
            color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 11%, transparent)),
        var(--motiva-surface-primary, #fff);
    color: var(--motiva-color-violet, #4F46E5);
}

.cd-modal-titles[b-f41krf7odi] { min-width: 0; flex: 1 1 auto; }

.cd-modal-title[b-f41krf7odi] {
    font-size: var(--motiva-font-size-h2, 18px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.3;
    color: var(--motiva-text-primary, #1A1820);
}

.cd-modal-subtitle[b-f41krf7odi] {
    margin-top: 4px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.3;
    color: var(--motiva-text-muted, #8B8698);
    overflow-wrap: anywhere;
}

.cd-modal-close[b-f41krf7odi] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--motiva-text-muted, #8B8698);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.cd-modal-close:hover[b-f41krf7odi] {
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035));
    color: var(--motiva-text-primary, #1A1820);
}

.cd-modal-body[b-f41krf7odi] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 22px 18px;
    overflow-y: auto;
}

.cd-modal-text[b-f41krf7odi] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-regular, 400);
    line-height: var(--motiva-line-height-body, 1.6);
    color: var(--motiva-text-secondary, #5B5568);
}

.cd-modal-footer[b-f41krf7odi] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 22px 20px;
    border-top: 1px solid var(--motiva-border-subtle, #F0EEF9);
}

.cd-footer-note[b-f41krf7odi] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
}

.cd-footer-actions[b-f41krf7odi] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
}

.cd-footer-actions--only[b-f41krf7odi] { margin-inline-start: auto; }

/* ── Form controls ───────────────────────────────────────── */

/* The reference's small caps-ish group label. It separates the modal's
   four groups without four rules across it. */
.cd-form-section[b-f41krf7odi] {
    margin: 10px 0 -2px;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1;
    letter-spacing: 0.03em;
    color: var(--motiva-text-muted, #8B8698);
}

.cd-form-section:first-child[b-f41krf7odi] { margin-top: 4px; }

.cd-form-section-note[b-f41krf7odi] {
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-subtle, #B7B2C2);
}

.cd-form-grid[b-f41krf7odi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Name takes the room; the order chip needs only its two digits. */
.cd-form-grid--name[b-f41krf7odi] { grid-template-columns: 1fr 110px; }

.cd-form-field[b-f41krf7odi] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.cd-form-label[b-f41krf7odi] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
}

.cd-req[b-f41krf7odi] { color: var(--motiva-color-rose-ink, #B23256); }

.cd-form-input[b-f41krf7odi],
.cd-form-textarea[b-f41krf7odi] {
    width: 100%;
    box-sizing: border-box;
    padding: 0 12px;
    height: var(--motiva-control-height-md, 38px);
    border-radius: var(--motiva-radius-sm, 10px);
    background: var(--motiva-surface-secondary, #FAF9F7);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-primary, #1A1820);
    transition: border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.cd-form-textarea[b-f41krf7odi] {
    height: auto;
    min-height: 74px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
}

.cd-form-input[b-f41krf7odi]::placeholder,
.cd-form-textarea[b-f41krf7odi]::placeholder { color: var(--motiva-text-subtle, #B7B2C2); }

.cd-form-input:focus[b-f41krf7odi],
.cd-form-textarea:focus[b-f41krf7odi] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: -1px;
    border-color: var(--motiva-color-focus-ring, #4F46E5);
}

/* The position. Drawn as a field so the modal keeps the reference's
   two-up head row, but it is not an input: the up/down arrows in the
   table own the order, and a second editor here would let the two
   disagree. */
.cd-form-readonly[b-f41krf7odi] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--motiva-control-height-md, 38px);
    border-radius: var(--motiva-radius-sm, 10px);
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
    border: 1px dashed var(--motiva-border-card, #EFEDF4);
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
    font-variant-numeric: tabular-nums;
}

/* ── Type choice — three bordered cards ────────────────────── */
.cd-choice-grid[b-f41krf7odi] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.cd-choice[b-f41krf7odi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    border-radius: var(--motiva-radius-md, 14px);
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
    border: 1.5px solid var(--motiva-border-card, #EFEDF4);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    color: var(--motiva-text-primary, #1A1820);
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.cd-choice:hover[b-f41krf7odi] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 26%, transparent);
}

/* The picked card is the one place on this page a violet wash is right:
   it is a selected control, not a status, and the border carries the
   commitment. */
.cd-choice--on[b-f41krf7odi] {
    background: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 7%, transparent);
    border-color: var(--motiva-color-violet, #4F46E5);
}

.cd-choice:focus-visible[b-f41krf7odi] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

.cd-choice-label[b-f41krf7odi] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
}

.cd-choice-dot[b-f41krf7odi] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.cd-choice-dot--tech[b-f41krf7odi]   { background: var(--motiva-color-violet, #4F46E5); }
.cd-choice-dot--method[b-f41krf7odi] { background: var(--motiva-color-teal, #0D9C9A); }

/* At 9px the sweep still resolves; this is the one dot large enough for
   it, and it is the "both" case, which is exactly what the sweep means. */
.cd-choice-dot--both[b-f41krf7odi] {
    background: linear-gradient(120deg,
        var(--motiva-color-violet, #4F46E5),
        var(--motiva-color-teal, #0D9C9A));
}

/* ── Switch rows ───────────────────────────────────────────── */
.cd-switch-row[b-f41krf7odi] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--motiva-radius-md, 14px);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
}

.cd-switch-copy[b-f41krf7odi] { min-width: 0; flex: 1 1 auto; }

.cd-switch-title[b-f41krf7odi] {
    display: block;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
}

.cd-switch-note[b-f41krf7odi] {
    display: block;
    margin-top: 4px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    color: var(--motiva-text-muted, #8B8698);
}

/* ── Template picker rows ──────────────────────────────────── */
.cd-tpl-list[b-f41krf7odi] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 46vh;
    overflow-y: auto;
    padding-inline-end: 2px;
}

.cd-tpl-row[b-f41krf7odi] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 13px;
    border-radius: var(--motiva-radius-md, 14px);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-surface-primary, #fff);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    text-align: start;
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.cd-tpl-row:hover[b-f41krf7odi] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 26%, transparent);
}

.cd-tpl-row--on[b-f41krf7odi] {
    background: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 5%, transparent);
    border-color: var(--motiva-color-violet, #4F46E5);
}

.cd-tpl-row:focus-visible[b-f41krf7odi] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

.cd-tpl-check[b-f41krf7odi] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid var(--motiva-border-strong, #DCD8E6);
    background: var(--motiva-surface-primary, #fff);
    color: #fff;
}

.cd-tpl-check--on[b-f41krf7odi] {
    background: var(--motiva-color-violet, #4F46E5);
    border-color: var(--motiva-color-violet, #4F46E5);
}

.cd-tpl-copy[b-f41krf7odi] { min-width: 0; flex: 1 1 auto; }

.cd-tpl-title[b-f41krf7odi] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.25;
    color: var(--motiva-text-primary, #1A1820);
}

.cd-tpl-desc[b-f41krf7odi] {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    color: var(--motiva-text-muted, #8B8698);
}

.cd-tpl-tasks[b-f41krf7odi] {
    flex: 0 0 auto;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
}

/* ── Rollout result tiles ──────────────────────────────────── */
.cd-stat-grid[b-f41krf7odi] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.cd-stat[b-f41krf7odi] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 10px;
    border-radius: var(--motiva-radius-md, 14px);
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    text-align: center;
}

.cd-stat-value[b-f41krf7odi] {
    font-size: var(--motiva-font-size-h2, 20px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
    font-variant-numeric: tabular-nums;
}

.cd-stat-label[b-f41krf7odi] {
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.3;
    color: var(--motiva-text-muted, #8B8698);
}

/* "Already existed" is the idempotent no-op, not an outcome to celebrate. */
.cd-stat--quiet .cd-stat-value[b-f41krf7odi] { color: var(--motiva-text-muted, #8B8698); }

/* ── Inline feedback ─────────────────────────────────────────
   Rose for the failure, teal for the confirmation, quiet paper for the
   advisory — the same three roles the rest of the page uses. */
.cd-form-note[b-f41krf7odi],
.cd-form-warn[b-f41krf7odi],
.cd-form-error[b-f41krf7odi],
.cd-form-success[b-f41krf7odi] {
    padding: 10px 12px;
    border-radius: var(--motiva-radius-sm, 10px);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.45;
}

.cd-form-note[b-f41krf7odi] {
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
    color: var(--motiva-text-secondary, #5B5568);
}

/* The shared-template warning. Amber is not in this system's vocabulary
   and rose would say "error", so the caution is carried by the brand
   edge — the same treatment applied filters and brand tags use. */
.cd-form-warn[b-f41krf7odi] {
    background: var(--motiva-tag-brand-surface);
    border: 1px solid transparent;
    color: var(--motiva-text-secondary, #5B5568);
}

.cd-form-error[b-f41krf7odi] {
    background: color-mix(in srgb, var(--motiva-color-rose, #D93864) 8%, transparent);
    color: var(--motiva-color-rose-ink, #B23256);
}

.cd-form-success[b-f41krf7odi] {
    background: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 9%, transparent);
    color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 82%, #000);
}

.cd-inline-state[b-f41krf7odi] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 4px;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-secondary, #5B5568);
}

.cd-spinner[b-f41krf7odi] {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cd-spin-b-f41krf7odi 0.7s linear infinite;
}

/* The same spinner on paper instead of on a gradient button. */
.cd-spinner--ink[b-f41krf7odi] {
    width: 15px;
    height: 15px;
    border-color: var(--motiva-border-card, #EFEDF4);
    border-top-color: var(--motiva-color-violet, #4F46E5);
}

@keyframes cd-spin-b-f41krf7odi { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .cd-spinner[b-f41krf7odi] { animation-duration: 2.4s; }
    .cd-menu-item[b-f41krf7odi],
    .cd-order-btn[b-f41krf7odi],
    .cd-choice[b-f41krf7odi],
    .cd-tpl-row[b-f41krf7odi],
    .cd-kebab[b-f41krf7odi] { transition: none; }
}

/* ── Narrow Management viewports ─────────────────────────────
   The table's own scroller takes over below ~1000px (MDataTable). Here
   the page furniture stops trying to hold single lines. */
@media (max-width: 900px) {
    .cd-section-actions[b-f41krf7odi] { margin-inline-start: 0; width: 100%; }

    .cd-form-grid[b-f41krf7odi],
    .cd-form-grid--name[b-f41krf7odi] { grid-template-columns: 1fr; }

    .cd-choice-grid[b-f41krf7odi] { grid-template-columns: 1fr; }
    .cd-stat-grid[b-f41krf7odi] { grid-template-columns: repeat(2, 1fr); }

    .cd-modal-footer[b-f41krf7odi] { align-items: stretch; }
    .cd-footer-actions[b-f41krf7odi] { margin-inline-start: 0; justify-content: flex-end; }
}
/* /Pages/Management/Cycles/CycleRoadmapStagesPage.razor.rz.scp.css */
/* ============================================================
   CycleRoadmapStagesPage (crs-* prefix)
   Per-cycle roadmap-stage configuration screen.
   Mirrors layout of other /management pages for consistency.
   ============================================================ */

.crs-page[b-nykrfuf5rv] {
    /* Match the standard Management page-width convention (.cy-page / .im-page
       / .pc-page): full width with NO horizontal padding, so the shell's
       --motiva-canvas-padding-inline is the only left/right margin. The page
       previously added its own 28px inline padding on top of that, which
       narrowed the header + stage cards vs every other Management screen.
       Vertical rhythm (top/bottom padding, gap) is unchanged. */
    width: 100%;
    min-width: 0;
    padding: 24px 0 48px;
    display: flex; flex-direction: column;
    gap: 18px;
}

/* Header moved to the shared MPageHeaderCard + MAdminBack; dead topbar/back/breadcrumb/title rules removed. */

/* ── Buttons ───────────────────────────────────────────── */
.crs-primary-btn[b-nykrfuf5rv], .crs-ghost-btn[b-nykrfuf5rv] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    /* Reset the native <button> border. The gradient primary (.motiva-cta)
       has a clean edge; the ghost re-applies its own hairline in its own rule
       below. This removes the stray dark/gray outer frame on שלב חדש. */
    border: none;
    border-radius: var(--g-radius-sm);
    font-size: var(--motiva-font-size-control, 13px); font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
/* Fill / text / hover come from the shared `.motiva-cta` (motiva-base.css) —
   the real Motiva gradient, carried in the markup. Only geometry (padding,
   --motiva-radius-sm via --g-radius-sm, font) lives on .crs-primary-btn, so
   the button matches the other Management primaries. The old solid --g-accent
   fill + brightness hover are gone. */
.crs-primary-btn:disabled[b-nykrfuf5rv] { opacity: 0.55; cursor: not-allowed; }
.crs-ghost-btn[b-nykrfuf5rv] { background: var(--g-bg-surface); border: 1px solid var(--g-border-light); color: var(--g-text-secondary); }
.crs-ghost-btn:hover:not(:disabled)[b-nykrfuf5rv] { background: var(--g-bg-hover); color: var(--g-text-primary); }
.crs-ghost-btn:disabled[b-nykrfuf5rv] { opacity: 0.55; cursor: not-allowed; }

.crs-link-btn[b-nykrfuf5rv] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: var(--g-radius-sm);
    background: transparent;
    border: 1px solid var(--g-border-light);
    color: var(--g-accent);
    font-size: var(--motiva-font-size-control, 12px); font-weight: 600;
    cursor: pointer;
    margin-inline-start: auto;
}
.crs-link-btn:hover[b-nykrfuf5rv] { background: var(--g-accent-active-bg, var(--g-bg-hover)); }

/* ── Banner ────────────────────────────────────────────── */
.crs-banner[b-nykrfuf5rv] {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-radius: var(--g-radius-md);
    font-size: var(--motiva-font-size-sm, 13px);
    border: 1px solid;
}
.crs-banner--ok[b-nykrfuf5rv]  { background: #ecfdf5; border-color: #34d399; color: #065f46; }
.crs-banner--err[b-nykrfuf5rv] { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.crs-banner-close[b-nykrfuf5rv] { margin-inline-start: auto; background: transparent; border: 0; color: inherit; cursor: pointer; padding: 4px; }

/* ── List ──────────────────────────────────────────────── */
.crs-list[b-nykrfuf5rv] { display: flex; flex-direction: column; gap: 12px; }

.crs-card[b-nykrfuf5rv] {
    /* Surface from the shared `.motiva-panel-tile` class (motiva-base.css),
       worn in the markup. This block used to restate it as --g-bg-surface at
       --g-radius-md behind --g-border-light with --g-shadow-sm: the same white,
       but a 16px corner, a grey hairline and no lift, against the 24px violet-
       edged lifted panel every migrated screen renders. */
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.crs-card--inactive[b-nykrfuf5rv] { opacity: 0.65; }

.crs-card-head[b-nykrfuf5rv] {
    display: flex; align-items: center; gap: 10px;
}

.crs-order-badge[b-nykrfuf5rv] {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--g-accent-active-bg, #eef2ff);
    color: var(--g-accent);
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.crs-card-head-text[b-nykrfuf5rv] { flex: 1; }
.crs-card-name[b-nykrfuf5rv] { margin: 0; font-size: 1rem; font-weight: 700; color: var(--g-text-primary); }
/* .crs-card-code (English stage code line) removed from the card — display-only. */

.crs-card-actions[b-nykrfuf5rv] { display: flex; gap: 4px; }

.crs-icon-btn[b-nykrfuf5rv] {
    width: 30px; height: 30px;
    border-radius: var(--g-radius-sm);
    border: 1px solid var(--g-border-light);
    background: var(--g-bg-surface);
    color: var(--g-text-secondary);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.13s, color 0.13s;
}
.crs-icon-btn:hover[b-nykrfuf5rv] { background: var(--g-bg-hover); color: var(--g-text-primary); }
.crs-icon-btn--danger:hover[b-nykrfuf5rv] { color: #b91c1c; border-color: #fca5a5; background: #fef2f2; }

.crs-card-desc[b-nykrfuf5rv] { margin: 0; color: var(--g-text-secondary); font-size: 13px; }
.crs-card-meta[b-nykrfuf5rv] {
    display: flex; align-items: center; gap: 14px;
    font-size: var(--motiva-font-size-caption, 12px); color: var(--g-text-muted);
    flex-wrap: wrap;
}
.crs-meta-item[b-nykrfuf5rv] { display: inline-flex; align-items: center; gap: 6px; }

.crs-status-pill[b-nykrfuf5rv] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--motiva-font-size-caption, 11px); font-weight: 700;
}
.crs-status--active[b-nykrfuf5rv]   { background: #dcfce7; color: #166534; }
.crs-status--inactive[b-nykrfuf5rv] { background: #fee2e2; color: #991b1b; }

.crs-milestone-chips[b-nykrfuf5rv] {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: 6px; flex-wrap: wrap;
}
.crs-chip[b-nykrfuf5rv] {
    /* Slightly tighter than before (was 3px/10px, 12px) so a stage with many
       linked milestones feels less crowded. Radius/colours/wrapping unchanged. */
    padding: 2px 8px;
    border-radius: var(--g-radius-sm);
    background: var(--g-bg-hover);
    border: 1px solid var(--g-border-light);
    font-size: var(--motiva-font-size-caption, 11px);
    color: var(--g-text-secondary);
}

.crs-empty[b-nykrfuf5rv] {
    text-align: center;
    padding: 32px 16px;
    color: var(--g-text-muted);
    font-size: var(--motiva-font-size-body, 14px);
}
.crs-empty--err[b-nykrfuf5rv] { color: #991b1b; }

/* ── Modals (shared with field + link) ─────────────────── */
.crs-modal-overlay[b-nykrfuf5rv] {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.crs-modal[b-nykrfuf5rv] {
    background: var(--g-bg-surface);
    border-radius: var(--g-radius-lg, 12px);
    width: min(640px, 100%);
    max-height: 92vh;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
    overflow: hidden;
}
.crs-modal-header[b-nykrfuf5rv] {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--g-border-light);
}
.crs-modal-title[b-nykrfuf5rv] { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--g-text-primary); }
.crs-modal-close[b-nykrfuf5rv] {
    width: 32px; height: 32px;
    border: 0; background: transparent; color: var(--g-text-muted);
    border-radius: var(--g-radius-sm);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.crs-modal-close:hover[b-nykrfuf5rv] { background: var(--g-bg-hover); color: var(--g-text-primary); }
.crs-modal-body[b-nykrfuf5rv] {
    padding: 18px 20px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 14px;
}
.crs-modal-footer[b-nykrfuf5rv] {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--g-border-light);
    background: var(--g-bg-hover);
}

/* ── Form fields ───────────────────────────────────────── */
.crs-field[b-nykrfuf5rv]        { display: flex; flex-direction: column; gap: 6px; }
.crs-field-row[b-nykrfuf5rv]    { display: flex; gap: 12px; flex-wrap: wrap; }
.crs-field--grow[b-nykrfuf5rv]  { flex: 1; }
.crs-field--small[b-nykrfuf5rv] { flex: 0 0 130px; }

.crs-label[b-nykrfuf5rv] { font-size: var(--motiva-font-size-caption, 12px); font-weight: 600; color: var(--g-text-secondary); }
.crs-required[b-nykrfuf5rv] { color: #dc2626; margin-inline-start: 2px; }

.crs-input[b-nykrfuf5rv], .crs-textarea[b-nykrfuf5rv] {
    padding: 8px 10px;
    font-size: var(--motiva-font-size-control, 13px);
    border-radius: var(--g-radius-sm);
    border: 1px solid var(--g-border-light);
    background: var(--g-bg-surface);
    color: var(--g-text-primary);
    direction: rtl;
    width: 100%; box-sizing: border-box;
    transition: border-color 0.13s, box-shadow 0.13s;
}
.crs-input:focus[b-nykrfuf5rv], .crs-textarea:focus[b-nykrfuf5rv] {
    border-color: var(--g-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.crs-input:disabled[b-nykrfuf5rv], .crs-textarea:disabled[b-nykrfuf5rv] {
    background: var(--g-bg-hover); color: var(--g-text-muted); cursor: not-allowed;
}
.crs-textarea[b-nykrfuf5rv] { resize: vertical; font-family: inherit; }
.crs-hint[b-nykrfuf5rv] { font-size: var(--motiva-font-size-caption, 11px); color: var(--g-text-muted); }

.crs-toggle[b-nykrfuf5rv] {
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer; font-size: var(--motiva-font-size-control, 13px); user-select: none;
}
.crs-toggle input[b-nykrfuf5rv] { display: none; }
.crs-toggle-track[b-nykrfuf5rv] {
    position: relative;
    width: 36px; height: 20px;
    background: #cbd5e1;
    border-radius: 999px;
    transition: background 0.18s;
}
.crs-toggle-thumb[b-nykrfuf5rv] {
    position: absolute; top: 2px; right: 2px;
    width: 16px; height: 16px;
    background: white;
    border-radius: 50%;
    transition: right 0.18s;
}
.crs-toggle input:checked + .crs-toggle-track[b-nykrfuf5rv] { background: var(--g-accent); }
.crs-toggle input:checked + .crs-toggle-track .crs-toggle-thumb[b-nykrfuf5rv] { right: 18px; }
.crs-toggle-label[b-nykrfuf5rv] { color: var(--g-text-secondary); }

/* ── Link modal list ───────────────────────────────────── */
.crs-link-list[b-nykrfuf5rv] {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 50vh; overflow-y: auto;
    border: 1px solid var(--g-border-light);
    border-radius: var(--g-radius-sm);
    padding: 6px;
}
.crs-link-row[b-nykrfuf5rv] {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: var(--g-radius-sm);
    cursor: pointer;
    transition: background 0.13s;
}
.crs-link-row:hover[b-nykrfuf5rv] { background: var(--g-bg-hover); }
.crs-link-row--on[b-nykrfuf5rv]   { background: var(--g-accent-active-bg, #eef2ff); }
.crs-link-row input[b-nykrfuf5rv] { cursor: pointer; }
.crs-link-title[b-nykrfuf5rv] { flex: 1; font-size: var(--motiva-font-size-sm, 13px); color: var(--g-text-primary); }
.crs-link-other[b-nykrfuf5rv] {
    font-size: var(--motiva-font-size-caption, 11px);
    color: #b45309;
    background: #fff7ed;
    padding: 2px 6px;
    border-radius: var(--g-radius-sm);
}

/* ── Error ────────────────────────────────────────────── */
.crs-error[b-nykrfuf5rv] {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    border-radius: var(--g-radius-sm);
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    font-size: var(--motiva-font-size-caption, 12px);
}

/* ── Inline spinner ───────────────────────────────────── */
.crs-spinner-inline[b-nykrfuf5rv] {
    width: 12px; height: 12px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    display: inline-block;
    animation: crs-spin-b-nykrfuf5rv 0.7s linear infinite;
    margin-inline-end: 4px;
}
@keyframes crs-spin-b-nykrfuf5rv { to { transform: rotate(360deg); } }
/* /Pages/Management/Cycles/CyclesManagement.razor.rz.scp.css */
/* ============================================================
   CyclesManagement — מחזורים אקדמיים (Admin)
   Prefix: cy-

   Visual source:
       design/design-system/Motiva Admin Cycle Detail.dc.html
       Client/Pages/Management/Users/UsersManagement.razor.css

   This file is the Users list's stylesheet applied to a different set of
   cells — same page shell, same header rhythm, same toolbar, same popup
   menu recipe, same modal. That repetition is the point: the two Admin
   lists are one screen type and must not drift into two.

   Design tokens: motiva-tokens.css. The page renders inside the canvas
   shell (.motiva .motiva-final .motiva-lecturer), so every --motiva-*
   token already resolves to the finished design's value — 18px card
   radius, 38px controls, the warm ink ramp, violet/teal/rose. The var()
   fallbacks exist only so the page still renders sanely outside it.

   The previous version of this file was written against the legacy --g-*
   ramp, which inside .motiva-final yields the right colours with the
   wrong geometry. That is why it is replaced rather than patched.

   Layout:
       header row (title + summary · new cycle)
       ↓ 14px
       toolbar  (search · 2 filter pills · clear · count)
       ↓ 14px
       MDataTable, full canvas width
   ============================================================ */

/* ── Page shell ──────────────────────────────────────────────
   No max-width: the canvas shell already owns the side inset, and an
   Admin table wants every pixel it is given. min-width:0 keeps the
   table's min-width from turning into PAGE-level horizontal scroll. */
.cy-page[b-dxvlt3jegp] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
    padding-block-end: 40px;
}

/* ── Header ────────────────────────────────────────────────── */
/* The page header is now <MPageHeaderCard>: MAdminBack in Leading,
   MInfoTip + MSummaryTag in TitleTrailing, the "new cycle" CTA in Actions.
   The old floating .cy-head / .cy-head-main / .cy-head-title / .cy-h1 /
   .cy-head-actions rules are gone. */

/* `.cy-summary` — the loose `N x · M y` line beside the h1 — is now an
   MSummaryTag, so this rule has no markup left. */

/* ── Buttons ─────────────────────────────────────────────────
   One primary on the page. Gradient, radius, hover and press come from
   the shared .motiva-cta in motiva-base.css — only geometry lives here,
   per that file's contract. */
.cy-btn-primary[b-dxvlt3jegp] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    padding: 0 16px;
    height: var(--motiva-control-height-md, 38px);
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.cy-btn-primary--lg[b-dxvlt3jegp] { padding: 0 18px; font-size: var(--motiva-font-size-control, 13.5px); }
.cy-btn-primary:disabled[b-dxvlt3jegp] { opacity: 0.6; cursor: default; }

/* Ghost — modal cancel. Text weight only; a bordered cancel beside a
   gradient save reads as a second choice of equal standing. */
.cy-btn-ghost[b-dxvlt3jegp] {
    padding: 0 14px;
    height: var(--motiva-control-height-md, 38px);
    border: 0;
    background: none;
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-secondary, #5B5568);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.cy-btn-ghost:hover[b-dxvlt3jegp] { background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035)); }
.cy-btn-ghost:disabled[b-dxvlt3jegp] { opacity: 0.5; cursor: default; }

.cy-btn-primary:focus-visible[b-dxvlt3jegp],
.cy-btn-ghost:focus-visible[b-dxvlt3jegp] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* ── Focus banner ────────────────────────────────────────────
   Shown only on ?focus=stages. Quiet paper with a brand edge, not a
   coloured alert: it is a wayfinding hint, not a warning. */
.cy-focus-banner[b-dxvlt3jegp] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-radius: var(--motiva-radius-md, 14px);
    background: var(--motiva-tag-brand-surface);
    border: 1px solid transparent;
}

.cy-focus-title[b-dxvlt3jegp] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
    white-space: nowrap;
}

.cy-focus-body[b-dxvlt3jegp] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.45;
    color: var(--motiva-text-secondary, #5B5568);
}

/* ── Popup menus — one recipe, two callers ───────────────────
   Filter menus and row menus are the same object: a floating white card
   of compact rows. Declared once so they cannot drift. */
.cy-filter[b-dxvlt3jegp],
.cy-actions[b-dxvlt3jegp] {
    position: relative;
    display: flex;
}

.cy-menu[b-dxvlt3jegp] {
    position: absolute;
    top: calc(100% + 6px);
    z-index: var(--motiva-z-dropdown, 500);
    min-width: 190px;
    padding: 6px;
    border-radius: var(--motiva-radius-md, 14px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    box-shadow: var(--motiva-shadow-md, 0 16px 36px rgba(30, 20, 60, 0.14));
}

/* Anchored to the reading start of its trigger — logical, so an LTR
   build needs no second rule. */
.cy-menu--filter[b-dxvlt3jegp] { inset-inline-start: 0; }

/* The kebab sits at the row's far end, so its menu hangs inward. */
.cy-menu--row[b-dxvlt3jegp] {
    inset-inline-end: 0;
    top: calc(100% + 4px);
    min-width: 196px;
}

.cy-menu-item[b-dxvlt3jegp] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    background: none;
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.cy-menu-item:hover:not(:disabled)[b-dxvlt3jegp] { background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035)); }

.cy-menu-item:focus-visible[b-dxvlt3jegp] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: -2px;
}

.cy-menu-item svg[b-dxvlt3jegp] { flex: 0 0 auto; color: var(--motiva-text-muted, #8B8698); }
.cy-menu-item-label[b-dxvlt3jegp] { flex: 1 1 auto; }

.cy-menu-item--on[b-dxvlt3jegp] { font-weight: var(--motiva-font-weight-semibold, 600); }
.cy-menu-check[b-dxvlt3jegp] { color: var(--motiva-color-violet, #4F46E5); }

/* Rose is reserved for the two actions that retire a cycle. Closing is
   reversible-ish and archiving is not, so only archive takes the full
   rose ink; close takes it at rest and both inherit the rose wash on
   hover — the reference's own treatment for its destructive item. */
.cy-menu-item--warn[b-dxvlt3jegp],
.cy-menu-item--danger[b-dxvlt3jegp] { color: var(--motiva-color-rose-ink, #B23256); }
.cy-menu-item--warn svg[b-dxvlt3jegp],
.cy-menu-item--danger svg[b-dxvlt3jegp] { color: currentColor; }

.cy-menu-item--warn:hover[b-dxvlt3jegp],
.cy-menu-item--danger:hover[b-dxvlt3jegp] {
    background: color-mix(in srgb, var(--motiva-color-rose, #D93864) 8%, transparent);
}

.cy-menu-sep[b-dxvlt3jegp] {
    height: 1px;
    margin: 5px 8px;
    background: var(--motiva-border-subtle, #F0EEF9);
}

/* ── Toolbar ─────────────────────────────────────────────────
   align-items: stretch so the filter pills adopt whatever height
   MSearchField resolves to — the row is aligned by construction rather
   than by a hardcoded number that silently drifts. */
.cy-toolbar[b-dxvlt3jegp] {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 2px;
}

/* ::deep because MSearchField renders its own root, which carries ITS
   isolation attribute and not this page's. A flex-basis alone leaves the
   wrapper at ~190px — the width has to be stated. */
.cy-toolbar[b-dxvlt3jegp]  .cy-search {
    flex: 1 1 300px;
    max-width: 440px;
}

/* Filter pill — "name: value ⌄". The label stays quiet and the value
   carries the weight, so a row of pills scans as answers, not questions. */
.cy-filter-btn[b-dxvlt3jegp] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 15px;
    border-radius: var(--motiva-radius-full, 999px);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    color: var(--motiva-text-primary, #1A1820);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.cy-filter-btn:hover[b-dxvlt3jegp] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 22%, transparent);
}

.cy-filter-btn:focus-visible[b-dxvlt3jegp] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* Applied filter — the brand EDGE, not a violet tint. A purple wash
   reads as a pressed button and puts a second accent on a toolbar that
   already has one. --motiva-tag-brand-surface only shows if the border
   itself is transparent, which is why border-color is reset. Geometry is
   untouched, so nothing moves when a filter becomes active. */
.cy-filter-btn--on[b-dxvlt3jegp] {
    background: var(--motiva-tag-brand-surface);
    border-color: transparent;
    color: var(--motiva-text-primary, #1A1820);
}

/* Hover must not repaint the hairline over the gradient. */
.cy-filter-btn--on:hover[b-dxvlt3jegp] {
    border-color: transparent;
    filter: brightness(0.99) saturate(1.08);
}

.cy-filter-btn--on .cy-filter-name[b-dxvlt3jegp] { color: var(--motiva-text-muted, #8B8698); }

.cy-filter-name[b-dxvlt3jegp] {
    font-size: var(--motiva-font-size-control, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #8B8698);
}

.cy-filter-value[b-dxvlt3jegp] {
    font-size: var(--motiva-font-size-control, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
}

.cy-filter-chev[b-dxvlt3jegp] {
    color: var(--motiva-text-muted, #8B8698);
    transition: transform var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.cy-filter-chev--open[b-dxvlt3jegp] { transform: rotate(180deg); }

.cy-clear[b-dxvlt3jegp] {
    align-self: center;
    padding: 8px 4px;
    border: 0;
    background: none;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-color-violet, #4F46E5);
    white-space: nowrap;
    cursor: pointer;
}

.cy-clear:hover[b-dxvlt3jegp] { text-decoration: underline; }

.cy-clear:focus-visible[b-dxvlt3jegp] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
    border-radius: 4px;
}

.cy-result[b-dxvlt3jegp] {
    align-self: center;
    margin-inline-start: auto;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
}

/* ============================================================
   TABLE
   Surface, head rhythm, dividers and hover come from MDataTable.
   Everything below is what a Cycles cell specifically contains.
   ============================================================ */

/* Fixed columns. The name carries no width and takes the remainder;
   the five sized columns total just under the 820px MinWidth. */
.cy-col-date[b-dxvlt3jegp]     { width: 128px; }
.cy-col-status[b-dxvlt3jegp]   { width: 118px; }
.cy-col-projects[b-dxvlt3jegp] { width: 96px; }
.cy-col-actions[b-dxvlt3jegp]  { width: 52px; }

/* ── Identity ────────────────────────────────────────────────
   The one place on the row that carries weight. The name is the link
   into the cycle, so it is a real button — underlined only on hover,
   because a table of permanently-underlined names is a table of noise. */
.cy-identity[b-dxvlt3jegp] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.cy-name-link[b-dxvlt3jegp] {
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.2;
    color: var(--motiva-text-primary, #1A1820);
    text-align: start;
    cursor: pointer;
    transition: color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.cy-name-link:hover[b-dxvlt3jegp] {
    color: var(--motiva-color-violet, #4F46E5);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cy-name-link:focus-visible[b-dxvlt3jegp] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
    border-radius: 4px;
}

/* The current-cycle marker. The brand tag is an EDGE — a gradient
   hairline around paper. A flat violet fill is the recurring bug this
   token exists to prevent, and it would also make the one current row
   shout at a table where it is merely a fact. */
.cy-current-tag[b-dxvlt3jegp] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-tag-brand-surface);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
    white-space: nowrap;
}

/* ── Secondary values ──────────────────────────────────────── */
.cy-cell-quiet[b-dxvlt3jegp] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.2;
    white-space: nowrap;
    color: var(--motiva-text-secondary, #5B5568);
}

.cy-cell-num[b-dxvlt3jegp] {
    font-variant-numeric: tabular-nums;
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-text-primary, #1A1820);
}

.cy-dash[b-dxvlt3jegp] { color: var(--motiva-text-subtle, #B7B2C2); font-weight: var(--motiva-font-weight-medium, 500); }

/* ── Status ──────────────────────────────────────────────────
   Dot + text, no filled pill — the same treatment the Users table uses.
   Four real lifecycle values, none invented: Active / Inactive from
   IsActive, Closed / Archived from the Status column.

   Rose is spent on Archived alone. Closed is a normal end-of-life state
   an admin chooses on purpose, and colouring both red would make the
   destructive one indistinguishable from the routine one. */
.cy-status[b-dxvlt3jegp] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--motiva-font-size-caption, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
}

.cy-status-dot[b-dxvlt3jegp] {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.cy-status--active[b-dxvlt3jegp]   { color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 88%, #000); }
.cy-status--inactive[b-dxvlt3jegp] { color: var(--motiva-text-muted, #8B8698); }
.cy-status--closed[b-dxvlt3jegp]   { color: var(--motiva-text-secondary, #5B5568); }
.cy-status--archived[b-dxvlt3jegp] { color: var(--motiva-color-rose-ink, #B23256); }

/* ── Row actions ─────────────────────────────────────────────
   The kebab is quiet until hovered or opened. */
.cy-cell-actions[b-dxvlt3jegp] { position: relative; }

/* An open menu has to paint over the rows BELOW it. Every actions cell
   is positioned, so without this the next row's cell — later in tree
   order — paints on top of the popup. Raising only the active row is
   enough: at most one menu is open at a time. */
.cy-page tr.m-dt-row-active .cy-cell-actions[b-dxvlt3jegp] { z-index: 20; }

.cy-actions[b-dxvlt3jegp] { justify-content: flex-end; }

.cy-kebab[b-dxvlt3jegp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--motiva-text-muted, #8B8698);
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.cy-kebab:hover[b-dxvlt3jegp],
.cy-kebab--on[b-dxvlt3jegp] {
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035));
    color: var(--motiva-text-primary, #1A1820);
}

.cy-kebab:focus-visible[b-dxvlt3jegp] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 1px;
}

/* Visually hidden but announced — the actions column has no visible
   header in the reference, and an unlabelled <th> is a gap for anyone
   navigating the table by column. */
.cy-sr[b-dxvlt3jegp] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   ADD / EDIT CYCLE MODAL
   ============================================================ */

.cy-modal-overlay[b-dxvlt3jegp] {
    position: fixed;
    inset: 0;
    z-index: var(--motiva-z-modal, 1000);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(26, 24, 32, 0.36);
    backdrop-filter: blur(2px);
}

.cy-modal-box[b-dxvlt3jegp] {
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    border-radius: var(--motiva-radius-xl, 24px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    box-shadow: var(--motiva-shadow-lg, 0 32px 70px rgba(30, 20, 60, 0.28));
    overflow: hidden;
}

.cy-modal-header[b-dxvlt3jegp] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 22px 14px;
}

/* The reference's tinted brand square. A tint of the sweep, not the
   sweep itself — a full gradient on a 38px chip reads as a button. */
.cy-modal-glyph[b-dxvlt3jegp] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--motiva-radius-sm, 10px);
    background:
        linear-gradient(140deg,
            color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 13%, transparent),
            color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 11%, transparent)),
        var(--motiva-surface-primary, #fff);
    color: var(--motiva-color-violet, #4F46E5);
}

.cy-modal-titles[b-dxvlt3jegp] { min-width: 0; flex: 1 1 auto; }

.cy-modal-title[b-dxvlt3jegp] {
    font-size: var(--motiva-font-size-h2, 18px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.3;
    color: var(--motiva-text-primary, #1A1820);
}

.cy-modal-subtitle[b-dxvlt3jegp] {
    margin-top: 4px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.3;
    color: var(--motiva-text-muted, #8B8698);
    overflow-wrap: anywhere;
}

.cy-modal-close[b-dxvlt3jegp] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--motiva-text-muted, #8B8698);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.cy-modal-close:hover[b-dxvlt3jegp] {
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035));
    color: var(--motiva-text-primary, #1A1820);
}

.cy-modal-body[b-dxvlt3jegp] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 22px 18px;
    overflow-y: auto;
}

.cy-modal-footer[b-dxvlt3jegp] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px 20px;
    border-top: 1px solid var(--motiva-border-subtle, #F0EEF9);
}

/* ── Form controls ───────────────────────────────────────── */
.cy-form-row[b-dxvlt3jegp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cy-form-field[b-dxvlt3jegp] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.cy-form-label[b-dxvlt3jegp] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
}

.cy-req[b-dxvlt3jegp] { color: var(--motiva-color-rose-ink, #B23256); }

.cy-form-input[b-dxvlt3jegp] {
    width: 100%;
    box-sizing: border-box;
    height: var(--motiva-control-height-md, 38px);
    padding: 0 12px;
    border-radius: var(--motiva-radius-sm, 10px);
    background: var(--motiva-surface-secondary, #FAF9F7);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-primary, #1A1820);
    transition: border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.cy-form-input[b-dxvlt3jegp]::placeholder { color: var(--motiva-text-subtle, #B7B2C2); }

.cy-form-input:focus[b-dxvlt3jegp] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: -1px;
    border-color: var(--motiva-color-focus-ring, #4F46E5);
}

/* ── Switch rows — the reference's bordered toggle cards ──── */
.cy-switch-row[b-dxvlt3jegp] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--motiva-radius-md, 14px);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
}

.cy-switch-copy[b-dxvlt3jegp] { min-width: 0; flex: 1 1 auto; }

.cy-switch-title[b-dxvlt3jegp] {
    display: block;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
}

.cy-switch-note[b-dxvlt3jegp] {
    display: block;
    margin-top: 4px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    color: var(--motiva-text-muted, #8B8698);
}

/* ── Inline feedback ─────────────────────────────────────────
   Rose for the failure, quiet paper for the advisory. */
.cy-form-note[b-dxvlt3jegp],
.cy-form-error[b-dxvlt3jegp] {
    padding: 10px 12px;
    border-radius: var(--motiva-radius-sm, 10px);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.45;
}

.cy-form-note[b-dxvlt3jegp] {
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
    color: var(--motiva-text-secondary, #5B5568);
}

.cy-form-error[b-dxvlt3jegp] {
    background: color-mix(in srgb, var(--motiva-color-rose, #D93864) 8%, transparent);
    color: var(--motiva-color-rose-ink, #B23256);
}

.cy-spinner[b-dxvlt3jegp] {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cy-spin-b-dxvlt3jegp 0.7s linear infinite;
}

@keyframes cy-spin-b-dxvlt3jegp { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .cy-spinner[b-dxvlt3jegp] { animation-duration: 2.4s; }
    .cy-filter-chev[b-dxvlt3jegp],
    .cy-menu-item[b-dxvlt3jegp],
    .cy-name-link[b-dxvlt3jegp],
    .cy-kebab[b-dxvlt3jegp] { transition: none; }
}

/* ── Narrow Management viewports ─────────────────────────────
   The table's own scroller takes over below ~1000px (MDataTable). Here
   the page furniture stops trying to hold a single line. */
@media (max-width: 900px) {
    .cy-toolbar[b-dxvlt3jegp]  .cy-search { flex: 1 1 100%; max-width: none; }
    .cy-result[b-dxvlt3jegp] { margin-inline-start: 0; }

    .cy-form-row[b-dxvlt3jegp] { grid-template-columns: 1fr; }
}
/* /Pages/Management/Deliverables/DeliverableLineEditor.razor.rz.scp.css */
/* ============================================================
   DeliverableLineEditor — the ordered דרישות / הערות rows
   Prefix: dlv-line-

   WHY THIS FILE EXISTS. These rules lived in
   DeliverablesManagement.razor.css and matched NOTHING. Blazor scoped
   CSS stamps every rule with the scope id of the component the
   stylesheet belongs to (`[b-c13fg0pnvo]` for the management page), and
   this editor is a SEPARATE component, so its markup never carries that
   attribute. The rows therefore rendered with no flex container, no
   input sizing and no button styling at all — which is why the number,
   the field and the three controls stacked and wrapped, and why the
   buttons appeared as browser defaults.

   A component's styles belong in the component's own stylesheet. The
   duplicated `.dlv-input` / `.dlv-label` base below is deliberate and is
   the normal cost of scoped CSS: the parent keeps its own copies for its
   own fields, and neither can reach the other's markup.
   ============================================================ */

.dlv-lines[b-t9t096rimw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* The editor is a flex item of the modal's form column; without this
       a long requirement can push the whole modal wider than its box. */
    min-width: 0;
}

.dlv-label[b-t9t096rimw] {
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
}

.dlv-lines-empty[b-t9t096rimw] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    color: var(--motiva-text-muted);
}

/* ── One requirement: [num] [input ......] [↑][↓][×] ─────────
   ONE ROW, ALWAYS. `nowrap` is explicit rather than relying on the
   default: this row has three children of very different natures and
   the failure mode when it wraps is exactly what was reported. */
.dlv-line[b-t9t096rimw] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

/* Fixed and non-shrinking — the ordinal must not be squeezed to nothing
   by a long requirement. */
.dlv-line-num[b-t9t096rimw] {
    flex: 0 0 22px;
    text-align: center;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-variant-numeric: tabular-nums;
    color: var(--motiva-text-muted);
    user-select: none;
}

/* The field takes everything that is left. `min-width: 0` is the part
   that actually matters: a flex item's default min-width is auto, so
   without it a long value sets a floor wider than the row and pushes
   the buttons out. */
.dlv-line-input[b-t9t096rimw] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1.5px solid var(--motiva-border-card);
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-primary, #fff);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-control, 15px);
    line-height: 1.5;
    color: var(--motiva-text-primary);
    direction: rtl;
    text-overflow: ellipsis;
    transition: border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.dlv-line-input:focus[b-t9t096rimw] {
    outline: none;
    border-color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

/* The control group stays whole: never wraps, never shrinks. */
.dlv-line-actions[b-t9t096rimw] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* Square, consistent, and the system's own quiet-control treatment —
   the same 28px round hit area, hover wash and focus ring the other
   icon buttons in Motiva use. Explicit `appearance: none` because these
   are <button> elements and were falling back to the platform chrome. */
.dlv-line-btn[b-t9t096rimw] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--motiva-radius-sm);
    background: none;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-control, 15px);
    line-height: 1;
    color: var(--motiva-text-secondary);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.dlv-line-btn:hover:not(:disabled)[b-t9t096rimw] {
    background: var(--motiva-surface-chip, rgba(27, 26, 34, 0.045));
    color: var(--motiva-text-primary);
}

.dlv-line-btn:focus-visible[b-t9t096rimw] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.dlv-line-btn:disabled[b-t9t096rimw] { opacity: 0.3; cursor: default; }

.dlv-line-btn-del:hover:not(:disabled)[b-t9t096rimw] {
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    background: var(--motiva-color-danger-bg, rgba(224, 51, 95, 0.10));
}

/* Its own row under the list, at the reading edge — which is the RIGHT
   in this RTL form, since flex-start follows the direction. */
.dlv-line-add[b-t9t096rimw] {
    align-self: flex-start;
    margin-top: 2px;
    border: 0;
    background: none;
    padding: 4px 0;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    cursor: pointer;
}

.dlv-line-add:hover[b-t9t096rimw] { text-decoration: underline; }

.dlv-line-add:focus-visible[b-t9t096rimw] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
    border-radius: var(--motiva-radius-sm);
}

/* Narrow: the controls drop under their field rather than crushing it.
   The row is still one unit — the ordinal stays with the input. */
@media (max-width: 560px) {
    .dlv-line[b-t9t096rimw] {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .dlv-line-input[b-t9t096rimw] { flex: 1 1 100%; order: 2; }
    .dlv-line-actions[b-t9t096rimw] { order: 3; margin-inline-start: auto; }
}
/* /Pages/Management/Deliverables/DeliverablesManagement.razor.rz.scp.css */
/* ============================================================
   DeliverablesManagement — ניהול → תוצרי הגשה
   Prefix: dlv-

   An AUTHORING screen, so it takes the readable end of the scale:
   15px table text, 15px inputs, 14px labels, 15px section headings.
   Grouping comes from headings and spacing — there are no cards
   inside the card and no gray boxes.
   ============================================================ */

.dlv-page[b-q6cvtcgcim] { display: flex; flex-direction: column; }

.dlv-page[b-q6cvtcgcim]  > .m-card { margin-block-start: 18px; }

/* The single line of orientation. It is the one thing a lecturer
   opening this page needs: what they type here, students read. */
.dlv-lede[b-q6cvtcgcim] {
    margin: 0 0 16px;
    font-size: var(--motiva-font-size-body, 14.5px);
    line-height: 1.5;
    color: var(--motiva-text-muted);
}

.dlv-add[b-q6cvtcgcim] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    padding: 9px 16px;
    border-radius: var(--motiva-radius-md);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.dlv-add-glyph[b-q6cvtcgcim] { font-size: var(--motiva-font-size-lg, 16px); line-height: 1; }

/* ── The list ───────────────────────────────────────────────── */
.dlv-table[b-q6cvtcgcim] { width: 100%; border-collapse: collapse; }

.dlv-th[b-q6cvtcgcim] {
    padding: 0 12px 10px;
    text-align: start;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-muted);
    border-bottom: 1px solid var(--motiva-border-card);
    white-space: nowrap;
}

.dlv-th-num[b-q6cvtcgcim], .dlv-th-order[b-q6cvtcgcim] { text-align: center; }
.dlv-th-act[b-q6cvtcgcim]  { width: 1%; }

.dlv-sr[b-q6cvtcgcim] {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.dlv-row[b-q6cvtcgcim] { border-bottom: 1px solid var(--motiva-border-subtle); }
.dlv-row:last-child[b-q6cvtcgcim] { border-bottom: 0; }

/* A deactivated row stays fully legible — it is still managed content,
   not a disabled control. Only the name quiets down. */
.dlv-row-off .dlv-name[b-q6cvtcgcim] { color: var(--motiva-text-muted); }

.dlv-td[b-q6cvtcgcim] {
    padding: 12px;
    font-size: var(--motiva-font-size-lg, 15px);
    color: var(--motiva-text-primary);
    vertical-align: middle;
}

.dlv-td-num[b-q6cvtcgcim]   { text-align: center; font-variant-numeric: tabular-nums; }
.dlv-td-order[b-q6cvtcgcim] { text-align: center; }
.dlv-td-act[b-q6cvtcgcim]   { white-space: nowrap; }

.dlv-name[b-q6cvtcgcim] { display: block; font-weight: var(--motiva-font-weight-semibold); }

.dlv-intro[b-q6cvtcgcim] {
    display: block;
    margin-top: 2px;
    font-size: var(--motiva-font-size-sm, 13.5px);
    color: var(--motiva-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 420px;
}

/* Order is a control, not a number to type. */
.dlv-move[b-q6cvtcgcim] { display: inline-flex; align-items: center; gap: 2px; }

.dlv-move-idx[b-q6cvtcgcim] {
    min-width: 20px;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-variant-numeric: tabular-nums;
    color: var(--motiva-text-muted);
}

.dlv-move-btn[b-q6cvtcgcim] {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: none; border-radius: var(--motiva-radius-sm);
    font-size: var(--motiva-font-size-control, 14px); color: var(--motiva-text-secondary); cursor: pointer;
}

.dlv-move-btn:hover:not(:disabled)[b-q6cvtcgcim] { background: var(--motiva-surface-chip, rgba(27,26,34,.045)); }
.dlv-move-btn:disabled[b-q6cvtcgcim] { opacity: .3; cursor: default; }

.dlv-state[b-q6cvtcgcim] {
    display: inline-flex; align-items: center;
    padding: 4px 11px;
    border-radius: var(--motiva-radius-full);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    white-space: nowrap;
}

.dlv-state-on[b-q6cvtcgcim]  { background: var(--motiva-color-success-bg); color: var(--motiva-color-teal-ink, var(--motiva-color-teal)); }
.dlv-state-off[b-q6cvtcgcim] { background: var(--motiva-color-neutral-bg); color: var(--motiva-text-secondary); }

.dlv-link[b-q6cvtcgcim] {
    border: 0; background: none; padding: 4px 8px;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-body, 14px); font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    cursor: pointer;
}

.dlv-link:hover[b-q6cvtcgcim] { text-decoration: underline; }
.dlv-link:disabled[b-q6cvtcgcim] { opacity: .5; cursor: default; }
.dlv-link-quiet[b-q6cvtcgcim] { color: var(--motiva-text-secondary); }

.dlv-foot[b-q6cvtcgcim] {
    margin: 14px 0 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    line-height: 1.5;
    color: var(--motiva-text-muted);
}

/* ── The editor ─────────────────────────────────────────────── */
.dlv-form[b-q6cvtcgcim] { display: flex; flex-direction: column; gap: 16px; }

.dlv-form-sec[b-q6cvtcgcim] {
    margin: 6px 0 -4px;
    font-size: var(--motiva-font-size-lg, 15px);
    font-weight: var(--motiva-font-weight-bold);
    color: var(--motiva-text-primary);
}

.dlv-form-sec:first-child[b-q6cvtcgcim] { margin-top: 0; }

.dlv-field[b-q6cvtcgcim] { display: flex; flex-direction: column; gap: 6px; }

.dlv-label[b-q6cvtcgcim] {
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
}

.dlv-input[b-q6cvtcgcim], .dlv-textarea[b-q6cvtcgcim] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1.5px solid var(--motiva-border-card);
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-primary, #fff);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-control, 15px);
    line-height: 1.5;
    color: var(--motiva-text-primary);
    direction: rtl;
    transition: border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.dlv-textarea[b-q6cvtcgcim] { resize: vertical; min-height: 76px; }

.dlv-input:focus[b-q6cvtcgcim], .dlv-textarea:focus[b-q6cvtcgcim] {
    outline: none;
    border-color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

.dlv-hint[b-q6cvtcgcim] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    line-height: 1.5;
    color: var(--motiva-text-muted);
}

/* ── The ordered bullet editor ──────────────────────────────
   ITS STYLES MOVED TO DeliverableLineEditor.razor.css, and had to.
   Blazor scoped CSS stamps each rule with the scope id of the component
   whose stylesheet it is, so `.dlv-line`, `.dlv-line-input`,
   `.dlv-line-btn` and `.dlv-line-add` written here were emitted as
   `[b-<this page>]` and never matched the child component's markup —
   the requirement rows rendered with no flex, no input sizing and
   browser-default buttons. A component's styles live with the
   component. */

.dlv-switch[b-q6cvtcgcim] {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--motiva-border-card);
    border-radius: var(--motiva-radius-md);
}

.dlv-switch-copy[b-q6cvtcgcim] { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dlv-switch-title[b-q6cvtcgcim] { font-size: var(--motiva-font-size-lg, 15px); font-weight: var(--motiva-font-weight-semibold); color: var(--motiva-text-primary); }
.dlv-switch-note[b-q6cvtcgcim]  { font-size: var(--motiva-font-size-sm, 13.5px); color: var(--motiva-text-muted); }

.dlv-error[b-q6cvtcgcim] {
    margin: 0;
    font-size: var(--motiva-font-size-body, 14px);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
}

.dlv-save[b-q6cvtcgcim] {
    border: 0; padding: 10px 22px;
    border-radius: var(--motiva-radius-md);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-body, 14.5px); font-weight: var(--motiva-font-weight-semibold);
    cursor: pointer;
}

.dlv-save:disabled[b-q6cvtcgcim] { opacity: .6; cursor: default; }

.dlv-cancel[b-q6cvtcgcim] {
    padding: 10px 20px;
    border: 1.5px solid var(--motiva-border-strong, rgba(27,26,34,.2));
    border-radius: var(--motiva-radius-md);
    background: none;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-body, 14.5px); font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
    cursor: pointer;
}

.dlv-cancel:hover[b-q6cvtcgcim] { border-color: var(--motiva-text-secondary); color: var(--motiva-text-primary); }
.dlv-cancel:disabled[b-q6cvtcgcim] { opacity: .6; cursor: default; }
/* /Pages/Management/ExternalForms/ExternalFormsManagement.razor.rz.scp.css */
/* ============================================================
   ExternalFormsManagement — טפסים חיצוניים (Admin)
   Prefix: exf-

   Visual source:
       Client/Pages/Management/Integrations/IntegrationsManagement.razor.css
       Client/Pages/Management/Forms/FormsManagement.razor.css
       Client/Pages/Management/Catalog/CatalogManagement.razor.css

   The finished Admin recipe applied to a small list screen: the same header
   rhythm, the same list toolbar (filter pill + result count + primary), the
   same card paper, tag, status and button language.

   Design tokens: motiva-tokens.css. The page renders inside the canvas
   shell (.motiva .motiva-final .motiva-lecturer), so every --motiva-*
   token already resolves to the finished design's value. The var()
   fallbacks exist only so the page still renders sanely outside it.

   The previous version of this file was written against the legacy --g-*
   ramp, which inside .motiva-final yields the right colours with the wrong
   geometry — hence a replacement rather than a patch.

   Layout:
       header (back · h1 · info)
       ↓ 14px
       toolbar (cycle filter · ניקוי · count + טופס חדש)
       ↓ 14px
       list of compact form cards
   ============================================================ */

/* ── Page shell ────────────────────────────────────────────── */
.exf-page[b-qcfvkq1nb5] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
    padding-block-end: 40px;
}

/* ── Header ────────────────────────────────────────────────── */
/* The page header is now <MPageHeaderCard>: MAdminBack in Leading, MInfoTip
   in TitleTrailing. The old .exf-head / .exf-head-main / .exf-head-line /
   .exf-h1 rules are gone. */

/* ── Toast / notices ─────────────────────────────────────────
   Success teal, failure rose. Rose appears here and on the delete button —
   nowhere else on the page. */
.exf-toast[b-qcfvkq1nb5] {
    padding: 11px 14px;
    border-radius: var(--motiva-radius-md, 14px);
    background: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 24%, transparent);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.35;
    color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 84%, #000);
}

.exf-toast--error[b-qcfvkq1nb5] {
    background: color-mix(in srgb, var(--motiva-color-rose, #D93864) 8%, transparent);
    border-color: color-mix(in srgb, var(--motiva-color-rose, #D93864) 24%, transparent);
    color: var(--motiva-color-rose-ink, #B23256);
}

/* The cycle list failed while the forms list succeeded. Degraded, not
   broken — so a neutral note, not an alert. */
.exf-note[b-qcfvkq1nb5] {
    padding: 10px 13px;
    border-radius: var(--motiva-radius-md, 14px);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.4;
    color: var(--motiva-text-secondary, #5B5568);
}

/* ── Load error ─────────────────────────────────────────────
   Distinct from "no forms", which is a legitimate empty state. */
.exf-state[b-qcfvkq1nb5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: var(--motiva-radius-lg, 18px);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-surface-primary, #fff);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-secondary, #5B5568);
}

.exf-state--error[b-qcfvkq1nb5] {
    border-color: color-mix(in srgb, var(--motiva-color-rose, #D93864) 24%, transparent);
    background: color-mix(in srgb, var(--motiva-color-rose, #D93864) 5%, transparent);
    color: var(--motiva-color-rose-ink, #B23256);
}

.exf-retry[b-qcfvkq1nb5] {
    margin-inline-start: auto;
    padding: 0 12px;
    height: var(--motiva-control-height-sm, 32px);
    border-radius: var(--motiva-radius-sm, 10px);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-surface-primary, #fff);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-text-primary, #1A1820);
    cursor: pointer;
}

/* ── Toolbar ─────────────────────────────────────────────────
   The list's own control row. Everything that acts on the list is here and
   nothing else is, which is what puts "טופס חדש" a single 14px gap above
   the first card instead of a page-height away in the header. */
.exf-toolbar[b-qcfvkq1nb5] {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 2px;
}

.exf-filter[b-qcfvkq1nb5] {
    position: relative;
    display: flex;
}

/* Filter pill — "name: value ⌄". The label stays quiet and the value
   carries the weight, so the pill scans as an answer, not a question. */
.exf-filter-btn[b-qcfvkq1nb5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: var(--motiva-control-height-md, 38px);
    padding: 0 15px;
    border-radius: var(--motiva-radius-full, 999px);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    color: var(--motiva-text-primary, #1A1820);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.exf-filter-btn:hover[b-qcfvkq1nb5] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 22%, transparent);
}

.exf-filter-btn:focus-visible[b-qcfvkq1nb5] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* Applied filter — the brand EDGE, not a violet fill. The exact treatment
   Forms and Catalog give an applied filter; a flat violet pill is the
   mistake the tag-brand token exists to prevent. */
.exf-filter-btn--on[b-qcfvkq1nb5] {
    background: #fff;
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 42%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 12%, transparent);
}

.exf-filter-name[b-qcfvkq1nb5] {
    font-size: var(--motiva-font-size-control, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-secondary, #5B5568);
}

.exf-filter-value[b-qcfvkq1nb5] {
    font-size: var(--motiva-font-size-control, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-text-primary, #1A1820);
}

.exf-filter-chev[b-qcfvkq1nb5] {
    flex: 0 0 auto;
    color: var(--motiva-text-muted, #8B8698);
    transition: transform var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.exf-filter-chev--open[b-qcfvkq1nb5] { transform: rotate(180deg); }

.exf-clear[b-qcfvkq1nb5] {
    align-self: center;
    padding: 0 10px;
    border: 0;
    background: none;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-secondary, #5B5568);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.exf-clear:hover[b-qcfvkq1nb5] { color: var(--motiva-text-primary, #1A1820); }

.exf-toolbar-end[b-qcfvkq1nb5] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-inline-start: auto;
}

.exf-result[b-qcfvkq1nb5] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
}

/* ── Filter menu ─────────────────────────────────────────── */
.exf-menu[b-qcfvkq1nb5] {
    position: absolute;
    top: calc(100% + 6px);
    z-index: var(--motiva-z-dropdown, 500);
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    border-radius: var(--motiva-radius-md, 14px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    box-shadow: var(--motiva-shadow-md, 0 16px 36px rgba(30, 20, 60, 0.14));
}

/* Anchored to the reading start of its trigger, logical so an LTR build
   needs no second rule. */
.exf-menu--filter[b-qcfvkq1nb5] { inset-inline-start: 0; }

.exf-menu-item[b-qcfvkq1nb5] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    background: none;
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.exf-menu-item:hover[b-qcfvkq1nb5] { background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035)); }

.exf-menu-item:focus-visible[b-qcfvkq1nb5] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: -2px;
}

.exf-menu-item-label[b-qcfvkq1nb5] { flex: 1 1 auto; }
.exf-menu-item--on[b-qcfvkq1nb5] { font-weight: var(--motiva-font-weight-semibold, 600); }
.exf-menu-check[b-qcfvkq1nb5] { color: var(--motiva-color-violet, #4F46E5); }

/* ── The list ────────────────────────────────────────────────
   One rhythm whether there is one card or twenty. The same 10px the
   settings stack uses — close enough to read as a list, open enough that
   two cards never look like one. */
.exf-list[b-qcfvkq1nb5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* A compact management card: two lines of content, not a panel. The same
   paper, hairline and haze the Integrations cards and MDataTable wear. */
.exf-item[b-qcfvkq1nb5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 13px 16px 14px;
    min-width: 0;
    background: var(--motiva-panel-surface, #fff);
    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(26, 24, 32, 0.04),
                    0 14px 34px -28px rgba(26, 24, 32, 0.22));
}

/* Disabled forms stay legible — they are still managed here. A recede, not
   a grey-out. */
.exf-item--off[b-qcfvkq1nb5] { background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02)); }

/* ── Row 1 — identity ────────────────────────────────────── */
.exf-item-head[b-qcfvkq1nb5] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

/* The name is the card's affordance into the editor — a real button so it
   is reachable by keyboard, styled as text so the list stays quiet. It is
   also the largest thing on the card, which is the point: the form's name
   is its identity, not its URL. */
.exf-name[b-qcfvkq1nb5] {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    text-align: start;
    cursor: pointer;
}

.exf-name-text[b-qcfvkq1nb5] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-body, 14.5px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.3;
    color: var(--motiva-text-primary, #1A1820);
    transition: color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.exf-name:hover .exf-name-text[b-qcfvkq1nb5] { color: var(--motiva-color-violet, #4F46E5); }

.exf-name:focus-visible[b-qcfvkq1nb5] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ── Tags ────────────────────────────────────────────────────
   Catalog's recipe, verbatim: ONE tag object — white paper, a hairline,
   dark readable text — where only the hairline changes. Categorical facts
   about the row, never a status, so nothing here is filled. */
.exf-tag[b-qcfvkq1nb5] {
    display: inline-flex;
    align-items: center;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px 10px;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    color: var(--motiva-text-primary, #1A1820);
    white-space: nowrap;
}

/* The form's own category is the one tag worth noticing, so it takes the
   brand-tinted rule. The cycle keeps the neutral one. */
.exf-tag--type[b-qcfvkq1nb5] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 24%, transparent);
}

/* "גלובלי" is the ABSENCE of a cycle, not a cycle — quiet ink. */
.exf-tag--global[b-qcfvkq1nb5] { color: var(--motiva-text-secondary, #5B5568); }

/* ── Status ──────────────────────────────────────────────────
   Dot + text, no filled pill — the treatment every finished Admin screen
   uses. "מושבת" is neutral, never rose: a form that is not published has
   not failed. */
.exf-status[b-qcfvkq1nb5] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-inline-start: auto;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
}

.exf-status-dot[b-qcfvkq1nb5] {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.exf-status--on[b-qcfvkq1nb5]  { color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 88%, #000); }
.exf-status--off[b-qcfvkq1nb5] { color: var(--motiva-text-muted, #8B8698); }

/* ── Description ─────────────────────────────────────────── */
.exf-item-desc[b-qcfvkq1nb5] {
    margin: -2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.4;
    color: var(--motiva-text-muted, #8B8698);
}

/* ── Row 2 — the pointer and its actions ───────────────────
   NO WRAP, deliberately. With `flex-wrap: wrap` a long Airtable URL (they
   carry prefill_/hide_/utm_ query strings and run past 200 characters) kept
   its full natural width, pushed the three action buttons onto a line of
   their own, and became the widest, loudest object on the card — the exact
   thing this pass exists to stop. Held on one line, the flex line MUST fit,
   so the address is what shrinks and the ellipsis finally fires. */
.exf-item-foot[b-qcfvkq1nb5] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* THE URL IS SECONDARY, DELIBERATELY.

   It used to be a full-width default-blue browser link on its own line,
   which made the address the loudest thing on the card and the form's name
   the second. It is an address: 11.5px, muted ink, no underline at rest,
   and it ellipses inside whatever width is left over.

   Nothing is lost by that. The anchor is the real href, it opens in a new
   tab, and title="" carries the untruncated value — so the full URL is one
   hover (or one click) away, which is all it was ever needed for.

   THE LTR BOX IS THE TEXT, NOT THE ANCHOR. Putting `direction: ltr` on the
   anchor while letting it grow (`flex: 1 1 240px`) made the box span the
   whole free width and then aligned the address to the box's own start —
   which in an LTR box is the LEFT — so the URL floated in the middle of an
   RTL card instead of sitting under the form name at the right edge. The
   anchor now stays in the page's RTL flow and only shrinks (`flex: 0 1
   auto` + `min-width: 0`), and the isolation moves to the text span, which
   is the only part that actually needs its own bidi order. */
.exf-url[b-qcfvkq1nb5] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 1 auto;
    min-width: 0;
    /* A ceiling as well as a floor: even on a wide canvas with room to
       spare, the address never grows past a third of the card. It is a
       pointer, not the card's identity. */
    max-width: 520px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.3;
    color: var(--motiva-text-muted, #8B8698);
    text-decoration: none;
    transition: color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.exf-url:hover[b-qcfvkq1nb5] {
    color: var(--motiva-text-secondary, #5B5568);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.exf-url:focus-visible[b-qcfvkq1nb5] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
    border-radius: 6px;
}

/* The system's own link glyph, at the ink weight of the text it labels —
   not a coloured icon competing with the name above it. */
.exf-url-ico[b-qcfvkq1nb5] { flex: 0 0 auto; color: var(--motiva-text-subtle, #B7B2C2); }

/* `unicode-bidi: isolate` so the Latin address renders in its own order and
   cannot reorder the Hebrew row around it; `text-align: start` inside that
   LTR box puts the ellipsis at the END of the string, so the scheme and host
   survive truncation and the query string is what gets cut. */
.exf-url-text[b-qcfvkq1nb5] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}

/* ── Actions ─────────────────────────────────────────────────
   Management actions, not three page-weight buttons: 32px controls parked
   at the row's end. Edit and enable/disable are the same neutral secondary
   — one is not more important than the other — and delete is the page's
   only destructive control. */
.exf-item-actions[b-qcfvkq1nb5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin-inline-start: auto;
}

/* ── Buttons ─────────────────────────────────────────────────
   One geometry, three tones. The primary's gradient, hover and press come
   from the shared .motiva-cta in motiva-base.css — only geometry lives
   here. */
.exf-btn-primary[b-qcfvkq1nb5],
.exf-btn-secondary[b-qcfvkq1nb5],
.exf-btn-ghost[b-qcfvkq1nb5],
.exf-btn-danger[b-qcfvkq1nb5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 15px;
    height: var(--motiva-control-height-md, 38px);
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.exf-btn-primary[b-qcfvkq1nb5] { border: 0; }
.exf-btn-primary:disabled[b-qcfvkq1nb5] { opacity: 0.55; cursor: default; }

.exf-btn-secondary[b-qcfvkq1nb5] {
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-surface-primary, #fff);
    color: var(--motiva-text-primary, #1A1820);
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.exf-btn-secondary:hover:not(:disabled)[b-qcfvkq1nb5] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 26%, transparent);
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035));
}

.exf-btn-secondary:disabled[b-qcfvkq1nb5] { opacity: 0.5; cursor: default; }

.exf-btn-ghost[b-qcfvkq1nb5] {
    border: 0;
    background: none;
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-secondary, #5B5568);
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.exf-btn-ghost:hover:not(:disabled)[b-qcfvkq1nb5] { background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035)); }
.exf-btn-ghost:disabled[b-qcfvkq1nb5] { opacity: 0.5; cursor: default; }

/* Rose ink on paper, not a filled red button. Destructive is signalled by
   the ink; the fill arrives only on hover, at the same 8% the rest of the
   Admin area uses for a danger hover. */
.exf-btn-danger[b-qcfvkq1nb5] {
    border: 1px solid color-mix(in srgb, var(--motiva-color-rose, #D93864) 24%, transparent);
    background: var(--motiva-surface-primary, #fff);
    color: var(--motiva-color-rose-ink, #B23256);
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.exf-btn-danger:hover:not(:disabled)[b-qcfvkq1nb5] {
    background: color-mix(in srgb, var(--motiva-color-rose, #D93864) 8%, transparent);
    border-color: color-mix(in srgb, var(--motiva-color-rose, #D93864) 40%, transparent);
}

.exf-btn-danger:disabled[b-qcfvkq1nb5] { opacity: 0.5; cursor: default; }

/* The row variant. Same tones, one step down the control scale so three of
   them sit inside a card instead of filling it. */
.exf-btn-secondary--sm[b-qcfvkq1nb5],
.exf-btn-danger--sm[b-qcfvkq1nb5] {
    height: var(--motiva-control-height-sm, 32px);
    padding: 0 12px;
    font-size: var(--motiva-font-size-control, 12.5px);
    border-radius: var(--motiva-radius-tag, 8px);
}

.exf-btn-primary:focus-visible[b-qcfvkq1nb5],
.exf-btn-secondary:focus-visible[b-qcfvkq1nb5],
.exf-btn-ghost:focus-visible[b-qcfvkq1nb5],
.exf-btn-danger:focus-visible[b-qcfvkq1nb5] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* Inline spinner for the save button. */
.exf-spinner[b-qcfvkq1nb5] {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    animation: exf-spin-b-qcfvkq1nb5 0.7s linear infinite;
}

@keyframes exf-spin-b-qcfvkq1nb5 { to { transform: rotate(360deg); } }

/* ── Editor form (inside MModal) ─────────────────────────── */
.exf-form[b-qcfvkq1nb5] {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.exf-field[b-qcfvkq1nb5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.exf-label[b-qcfvkq1nb5] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
}

.exf-req[b-qcfvkq1nb5] { color: var(--motiva-color-rose-ink, #B23256); }

.exf-input[b-qcfvkq1nb5],
.exf-textarea[b-qcfvkq1nb5] {
    width: 100%;
    box-sizing: border-box;
    padding: 0 12px;
    height: var(--motiva-control-height-md, 38px);
    border-radius: var(--motiva-radius-sm, 10px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-primary, #1A1820);
    transition: border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.exf-textarea[b-qcfvkq1nb5] {
    height: auto;
    padding: 10px 12px;
    line-height: 1.45;
    resize: vertical;
}

/* Latin values inside a Hebrew page — isolated so a URL cannot reorder the
   field around it. */
.exf-input--ltr[b-qcfvkq1nb5] { text-align: start; unicode-bidi: isolate; }

.exf-input[b-qcfvkq1nb5]::placeholder,
.exf-textarea[b-qcfvkq1nb5]::placeholder { color: var(--motiva-text-subtle, #B7B2C2); }

.exf-input:focus[b-qcfvkq1nb5],
.exf-textarea:focus[b-qcfvkq1nb5] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: -1px;
    border-color: var(--motiva-color-focus-ring, #4F46E5);
}

.exf-hint[b-qcfvkq1nb5] {
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.4;
    color: var(--motiva-text-muted, #8B8698);
}

.exf-form-error[b-qcfvkq1nb5] {
    padding: 10px 12px;
    border-radius: var(--motiva-radius-sm, 10px);
    background: color-mix(in srgb, var(--motiva-color-rose, #D93864) 8%, transparent);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.35;
    color: var(--motiva-color-rose-ink, #B23256);
}

/* The same switch row the Milestones and settings modals use: label and
   note on the reading side, one control at the inline end. */
.exf-switch-row[b-qcfvkq1nb5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--motiva-radius-md, 14px);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
}

.exf-switch-copy[b-qcfvkq1nb5] { min-width: 0; flex: 1 1 auto; }

.exf-switch-title[b-qcfvkq1nb5] {
    display: block;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
}

.exf-switch-note[b-qcfvkq1nb5] {
    display: block;
    margin-top: 4px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    color: var(--motiva-text-muted, #8B8698);
}

/* ── Narrow Management viewports ─────────────────────────────
   Below the point where the URL and three buttons stop sharing a line, the
   actions drop under the address rather than squeezing it to nothing. */
@media (max-width: 900px) {
    .exf-toolbar-end[b-qcfvkq1nb5] { margin-inline-start: 0; width: 100%; justify-content: space-between; }

    /* Below this width the address and three buttons genuinely cannot share
       a line, so here the wrap IS the right answer and the actions drop
       under the address rather than squeezing it to nothing. */
    .exf-item-foot[b-qcfvkq1nb5] { flex-wrap: wrap; }
    .exf-url[b-qcfvkq1nb5] { flex: 1 1 100%; max-width: 100%; }
    .exf-item-actions[b-qcfvkq1nb5] { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .exf-btn-secondary[b-qcfvkq1nb5],
    .exf-btn-danger[b-qcfvkq1nb5],
    .exf-filter-btn[b-qcfvkq1nb5],
    .exf-filter-chev[b-qcfvkq1nb5],
    .exf-menu-item[b-qcfvkq1nb5],
    .exf-name-text[b-qcfvkq1nb5],
    .exf-url[b-qcfvkq1nb5],
    .exf-input[b-qcfvkq1nb5],
    .exf-textarea[b-qcfvkq1nb5] { transition: none; }

    .exf-spinner[b-qcfvkq1nb5] { animation-duration: 2.4s; }
}
/* /Pages/Management/Forms/FormEditor.razor.rz.scp.css */
/* ============================================================
   FormEditor — עורך טופס (Admin)
   Prefix: fed-

   Visual source:
       design/design-system/Motiva Admin Form Editor.dc.html

   Transcribed from the reference: the sticky header's shape, the collapsible
   settings card with its summary line, the question card that expands in
   place, the segmented rating scale, the option row, and the toast.

   NOT transcribed: the reference's outer shell — its own logo, top nav, page
   background and rounded application frame. Admin already resolves to the
   canvas shell in AppLayout, so this page renders CONTENT ONLY. There is no
   second nav, no second logo and no second frame.

   Design tokens: motiva-tokens.css. Inside the canvas shell every --motiva-*
   token resolves to the finished design's value; the var() fallbacks exist
   only for the case where the page is viewed outside that scope.

   PREFIX NOTE. The previous version used `fm-` classes from the GLOBAL
   wwwroot/css/forms-management.css. This file is scoped and uses its own
   prefix so nothing collides while that stylesheet is still linked.
   ============================================================ */

.fed-page[b-8jyma5ubs2] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
    padding-block-end: 48px;
}

/* ── Sticky editor header ────────────────────────────────────
   The editor is a working canvas: the admin scrolls a long question list and
   the save control has to stay reachable, so identity + save state + actions
   travel with the page. */
.fed-header[b-8jyma5ubs2] {
    position: sticky;
    top: 0;
    z-index: var(--motiva-z-sticky, 400);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin-block-start: 6px;
    border-radius: var(--motiva-radius-lg, 18px);
    background: color-mix(in srgb, var(--motiva-surface-primary, #fff) 92%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    box-shadow: 0 1px 2px rgba(27, 26, 34, 0.05), 0 10px 26px -22px rgba(27, 26, 34, 0.3);
}

/* The sticky header's trail. It replaced an icon-only back button, so it
   carries that button's job: it is the one way out of the editor. Sized
   tight — this bar is sticky, and every pixel here is charged to every
   scroll position on the page. */



/* The back arrow points at the reading start; in RTL that is a leftward
   glyph, which is what the icon already draws. No transform needed. */

.fed-identity[b-8jyma5ubs2] { min-width: 0; }

.fed-identity-row[b-8jyma5ubs2] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.fed-title[b-8jyma5ubs2] {
    margin: 0;
    max-width: 360px;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: 19px;
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--motiva-text-primary, #1A1820);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fed-cycle[b-8jyma5ubs2] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
}

/* Save state — reported, not animated. Colour carries the meaning so the
   line is readable at a glance without being read. */
.fed-savestate[b-8jyma5ubs2] {
    margin: 4px 0 0;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
}

.fed-savestate--saved[b-8jyma5ubs2]  { color: #1E7F63; }
.fed-savestate--dirty[b-8jyma5ubs2]  { color: #9A6A10; }
.fed-savestate--saving[b-8jyma5ubs2] { color: #2E55C4; }

/* ── Status chip (shared shape with the list) ────────────── */
.fed-status[b-8jyma5ubs2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--motiva-radius-full, 999px);
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
}

/* Separate flex child, never a ::before on the text — an RTL marker glued to
   a text node inherits the bidi run and jumps sides. */
.fed-status-dot[b-8jyma5ubs2] {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.fed-status--open[b-8jyma5ubs2]      { color: #1E7F63; background: rgba(42, 160, 126, 0.10); }
.fed-status--open .fed-status-dot[b-8jyma5ubs2] { background: #2AA07E; }
.fed-status--scheduled[b-8jyma5ubs2] { color: #2E55C4; background: rgba(62, 107, 224, 0.10); }
.fed-status--scheduled .fed-status-dot[b-8jyma5ubs2] { background: #3E6BE0; }
.fed-status--closed[b-8jyma5ubs2]    { color: var(--motiva-text-secondary, #4A4657); background: rgba(27, 26, 34, 0.06); }
.fed-status--closed .fed-status-dot[b-8jyma5ubs2] { background: #9B96A8; }
.fed-status--draft[b-8jyma5ubs2]     { color: #9A6A10; background: rgba(217, 161, 59, 0.13); }
.fed-status--draft .fed-status-dot[b-8jyma5ubs2] { background: #D9A13B; }

/* ── Header actions ──────────────────────────────────────── */
.fed-actions[b-8jyma5ubs2] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
    flex-wrap: wrap;
}

.fed-action[b-8jyma5ubs2],
.fed-icon-action[b-8jyma5ubs2] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: var(--motiva-control-height-md, 38px);
    border-radius: var(--motiva-radius-full, 999px);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    color: var(--motiva-text-primary, #1A1820);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: 12.5px;
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.fed-action[b-8jyma5ubs2] { padding: 0 16px; }

.fed-icon-action[b-8jyma5ubs2] {
    width: 38px;
    justify-content: center;
    padding: 0;
    color: var(--motiva-text-secondary, #4A4657);
}

.fed-action:hover[b-8jyma5ubs2],
.fed-icon-action:hover[b-8jyma5ubs2] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 35%, transparent);
    color: var(--motiva-text-primary, #1A1820);
}

.fed-action:focus-visible[b-8jyma5ubs2],
.fed-icon-action:focus-visible[b-8jyma5ubs2],
.fed-save:focus-visible[b-8jyma5ubs2] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* The submission count is an annotation on the action, not a second label. */
.fed-action-count[b-8jyma5ubs2] {
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #8B8698);
    font-variant-numeric: tabular-nums;
}

/* Save — the page's one primary. It carries the gradient only when there is
   something to save; a permanently-gradient button that does nothing when
   pressed is the thing the header's save state exists to prevent. */
.fed-save[b-8jyma5ubs2] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: var(--motiva-control-height-md, 38px);
    padding: 0 22px;
    border: 0;
    border-radius: var(--motiva-radius-full, 999px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
}

.fed-save--idle[b-8jyma5ubs2] {
    background: rgba(27, 26, 34, 0.22);
    cursor: default;
}

.fed-save:disabled[b-8jyma5ubs2] { cursor: default; }

.fed-spinner[b-8jyma5ubs2] {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    animation: fed-spin-b-8jyma5ubs2 0.7s linear infinite;
    flex: 0 0 auto;
}

@keyframes fed-spin-b-8jyma5ubs2 { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .fed-spinner[b-8jyma5ubs2] { animation-duration: 2.4s; }
}

/* ── Notice / states ─────────────────────────────────────── */
.fed-notice[b-8jyma5ubs2] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 16px;
    border-radius: var(--motiva-radius-md, 14px);
    background: var(--motiva-tag-brand-surface, rgba(79, 70, 229, 0.06));
    border: 1px solid color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 20%, transparent);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.55;
    color: var(--motiva-text-secondary, #4A4657);
}

.fed-notice svg[b-8jyma5ubs2] { flex: 0 0 auto; margin-top: 2px; color: var(--motiva-color-violet, #4F46E5); }
.fed-notice strong[b-8jyma5ubs2] { color: var(--motiva-text-primary, #1A1820); font-weight: var(--motiva-font-weight-semibold, 600); }

.fed-state[b-8jyma5ubs2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--motiva-radius-md, 14px);
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
}

/* Red is reserved for error and destruction. */
.fed-state--error[b-8jyma5ubs2] {
    background: color-mix(in srgb, var(--motiva-color-rose, #C2506D) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--motiva-color-rose, #C2506D) 22%, transparent);
    color: var(--motiva-color-rose-ink, #A33C56);
}

.fed-retry[b-8jyma5ubs2] {
    margin-inline-start: auto;
    padding: 0 12px;
    height: 32px;
    border-radius: var(--motiva-radius-sm, 10px);
    border: 1px solid color-mix(in srgb, var(--motiva-color-rose, #C2506D) 30%, transparent);
    background: #fff;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-color-rose-ink, #A33C56);
    cursor: pointer;
}

/* ── Settings card ───────────────────────────────────────── */
.fed-card[b-8jyma5ubs2] {
    border-radius: var(--motiva-radius-lg, 18px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    box-shadow: 0 1px 2px rgba(27, 26, 34, 0.04), 0 14px 34px -26px rgba(27, 26, 34, 0.28);
    /* visible, not hidden: the settings body holds native selects whose
       popups must not be clipped by the card. */
    overflow: visible;
}

.fed-card-head[b-8jyma5ubs2] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 15px 18px;
    border: 0;
    background: none;
    text-align: start;
    cursor: pointer;
    border-radius: var(--motiva-radius-lg, 18px);
}

.fed-card-head:focus-visible[b-8jyma5ubs2] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: -2px;
}

.fed-card-icon[b-8jyma5ubs2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: var(--motiva-radius-sm, 11px);
    background: linear-gradient(140deg, rgba(109, 40, 245, 0.1), rgba(46, 99, 232, 0.08));
    color: var(--motiva-color-violet, #6D28F5);
}

.fed-card-head-text[b-8jyma5ubs2] { min-width: 0; flex: 1 1 auto; }

.fed-card-title[b-8jyma5ubs2] {
    display: block;
    font-size: var(--motiva-font-size-body, 14.5px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.2;
    color: var(--motiva-text-primary, #1A1820);
}

/* The summary is what makes collapsing safe: closed, the card still says
   what it holds. */
.fed-card-sub[b-8jyma5ubs2] {
    display: block;
    margin-top: 3px;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fed-chev[b-8jyma5ubs2] {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--motiva-text-muted, #8B8698);
    transition: transform var(--motiva-motion-duration-fast, 150ms) var(--motiva-motion-easing-standard, ease-out);
}

.fed-chev--open[b-8jyma5ubs2] { transform: rotate(180deg); }

.fed-card-body[b-8jyma5ubs2] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px 18px;
    border-top: 1px solid var(--motiva-border-subtle, rgba(27, 26, 34, 0.05));
}

/* ── Fields ──────────────────────────────────────────────── */
.fed-grid[b-8jyma5ubs2] { display: grid; gap: 12px; }
.fed-grid--name-cycle[b-8jyma5ubs2] { grid-template-columns: 1.4fr 1fr; }
.fed-grid--three[b-8jyma5ubs2]      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fed-grid--toggles[b-8jyma5ubs2]    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fed-grid--title-type[b-8jyma5ubs2] { grid-template-columns: 1fr 190px; }

.fed-field[b-8jyma5ubs2] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.fed-label[b-8jyma5ubs2] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-secondary, #4A4657);
}

.fed-req[b-8jyma5ubs2]      { color: var(--motiva-color-rose, #C2506D); }
.fed-optional[b-8jyma5ubs2] { font-weight: var(--motiva-font-weight-medium, 500); font-size: var(--motiva-font-size-caption, 11px); color: var(--motiva-text-subtle, #B7B2C2); }

.fed-input[b-8jyma5ubs2],
.fed-textarea[b-8jyma5ubs2] {
    width: 100%;
    height: var(--motiva-control-height-lg, 42px);
    padding: 0 13px;
    border-radius: var(--motiva-radius-sm, 11px);
    border: 1px solid var(--motiva-border-input, rgba(27, 26, 34, 0.12));
    background: #fff;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-primary, #1A1820);
    outline: none;
}

.fed-textarea[b-8jyma5ubs2] {
    height: auto;
    min-height: 68px;
    padding: 10px 13px;
    line-height: 1.5;
    resize: vertical;
}

.fed-input:focus[b-8jyma5ubs2],
.fed-textarea:focus[b-8jyma5ubs2] { border-color: var(--motiva-color-violet, #4F46E5); }

/* A value the API will not change. Drawn as a field so the row still reads
   as a field, with a lock so it does not read as broken. */
.fed-readonly[b-8jyma5ubs2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: var(--motiva-control-height-lg, 42px);
    padding: 0 13px;
    border-radius: var(--motiva-radius-sm, 11px);
    border: 1px dashed var(--motiva-border-input, rgba(27, 26, 34, 0.14));
    background: var(--motiva-color-neutral-bg, rgba(27, 26, 34, 0.02));
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-secondary, #5B5568);
    min-width: 0;
}

.fed-readonly span[b-8jyma5ubs2] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fed-readonly svg[b-8jyma5ubs2] { flex: 0 0 auto; color: var(--motiva-text-subtle, #B7B2C2); }

.fed-toggle-row[b-8jyma5ubs2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-radius: var(--motiva-radius-md, 14px);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-color-neutral-bg, rgba(27, 26, 34, 0.015));
}

.fed-toggle-label[b-8jyma5ubs2] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--motiva-font-size-control, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.3;
    color: var(--motiva-text-primary, #1A1820);
}

.fed-hint[b-8jyma5ubs2] {
    margin: 0;
    padding: 10px 13px;
    border-radius: var(--motiva-radius-sm, 10px);
    background: rgba(62, 107, 224, 0.07);
    border: 1px solid rgba(62, 107, 224, 0.2);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.5;
    color: #2E55C4;
}

/* ── Questions section head ──────────────────────────────── */
.fed-section-head[b-8jyma5ubs2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 4px 0;
}

.fed-h2[b-8jyma5ubs2] {
    margin: 0;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-lg, 16px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--motiva-text-primary, #1A1820);
}

.fed-count[b-8jyma5ubs2] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-text-muted, #8B8698);
    font-variant-numeric: tabular-nums;
}

.fed-add[b-8jyma5ubs2] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-inline-start: auto;
    padding: 9px 17px;
    border: 0;
    border-radius: var(--motiva-radius-full, 999px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.fed-add:focus-visible[b-8jyma5ubs2] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* ── Question cards ──────────────────────────────────────── */
.fed-blocks[b-8jyma5ubs2] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fed-block[b-8jyma5ubs2] {
    border-radius: var(--motiva-radius-lg, 18px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    box-shadow: 0 1px 2px rgba(27, 26, 34, 0.04), 0 10px 26px -24px rgba(27, 26, 34, 0.25);
    overflow: visible;
    transition: border-color var(--motiva-motion-duration-fast, 150ms) var(--motiva-motion-easing-standard, ease-out);
}

/* The open card is the one being worked on — a brand edge, not a fill. */
.fed-block--open[b-8jyma5ubs2] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 30%, transparent);
    box-shadow: 0 1px 2px rgba(27, 26, 34, 0.04), 0 16px 38px -24px rgba(109, 40, 245, 0.35);
}

/* Collapsed row. auto-sized tool cluster at the end; the title takes the
   slack so long questions truncate instead of pushing the controls off. */
.fed-block-row[b-8jyma5ubs2] {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto auto auto auto;
    gap: 10px;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
}

.fed-block-num[b-8jyma5ubs2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--motiva-radius-xs, 9px);
    background: var(--motiva-surface-hover, rgba(27, 26, 34, 0.045));
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1;
    color: var(--motiva-text-secondary, #6B6779);
    font-variant-numeric: tabular-nums;
}

.fed-block-title[b-8jyma5ubs2] {
    min-width: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.3;
    color: var(--motiva-text-primary, #1A1820);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A question with no title yet is a real state during authoring — it reads
   as a placeholder rather than as content. */
.fed-block-title--empty[b-8jyma5ubs2] { color: var(--motiva-text-subtle, #B3AEBE); font-weight: var(--motiva-font-weight-medium, 500); }

.fed-block-type[b-8jyma5ubs2] {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-tag-brand-surface, rgba(109, 40, 245, 0.06));
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-color-violet-ink, #5A2BC9);
    white-space: nowrap;
}

.fed-block-system[b-8jyma5ubs2] {
    padding: 4px 9px;
    border-radius: var(--motiva-radius-full, 999px);
    border: 1px solid color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 24%, transparent);
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-color-violet-ink, #4338CA);
    white-space: nowrap;
}

.fed-block-req[b-8jyma5ubs2] {
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-color-rose, #C2506D);
    white-space: nowrap;
}

.fed-block-tools[b-8jyma5ubs2] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.fed-tool[b-8jyma5ubs2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--motiva-text-muted, #9B96A8);
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.fed-tool--sm[b-8jyma5ubs2] { width: 26px; height: 26px; }

.fed-tool:hover:not(:disabled)[b-8jyma5ubs2] {
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.04));
    color: var(--motiva-text-primary, #1A1820);
}

.fed-tool:disabled[b-8jyma5ubs2] {
    color: rgba(27, 26, 34, 0.14);
    cursor: default;
}

.fed-tool--danger:hover:not(:disabled)[b-8jyma5ubs2] {
    color: var(--motiva-color-rose, #C2506D);
    background: color-mix(in srgb, var(--motiva-color-rose, #C2506D) 9%, transparent);
}

.fed-tool:focus-visible[b-8jyma5ubs2] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 1px;
}

/* Expanded editor. */
.fed-block-body[b-8jyma5ubs2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 18px 18px;
    border-top: 1px solid var(--motiva-border-subtle, rgba(27, 26, 34, 0.05));
}

/* ── Options ─────────────────────────────────────────────── */
.fed-options[b-8jyma5ubs2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fed-options-note[b-8jyma5ubs2],
.fed-system-note[b-8jyma5ubs2] {
    margin: 0;
    padding: 10px 13px;
    border-radius: var(--motiva-radius-sm, 10px);
    background: var(--motiva-color-neutral-bg, rgba(27, 26, 34, 0.025));
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.5;
    color: var(--motiva-text-secondary, #5B5568);
}

.fed-system-note strong[b-8jyma5ubs2] {
    color: var(--motiva-text-primary, #1A1820);
    font-weight: var(--motiva-font-weight-semibold, 600);
}

.fed-option-list[b-8jyma5ubs2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fed-option-row[b-8jyma5ubs2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fed-option-input[b-8jyma5ubs2] {
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--motiva-radius-xs, 10px);
    border: 1px solid var(--motiva-border-input, rgba(27, 26, 34, 0.1));
    background: var(--motiva-color-neutral-bg, rgba(27, 26, 34, 0.015));
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-primary, #1A1820);
    outline: none;
}

.fed-option-input:focus[b-8jyma5ubs2] {
    border-color: var(--motiva-color-violet, #4F46E5);
    background: #fff;
}

/* The locked machine value on a protected option. Shown, because an admin
   editing the label deserves to see what the label is attached to — and
   isolated with dir=ltr in the markup so a Latin value inside a Hebrew row
   does not reorder. */
.fed-option-value[b-8jyma5ubs2] {
    flex: 0 0 auto;
    padding: 4px 9px;
    border-radius: var(--motiva-radius-xs, 8px);
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.045));
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
    unicode-bidi: isolate;
}

.fed-option-tools[b-8jyma5ubs2] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

.fed-add-option[b-8jyma5ubs2] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: var(--motiva-radius-full, 999px);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
    cursor: pointer;
    transition: border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.fed-add-option:hover[b-8jyma5ubs2] { border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 30%, transparent); }

.fed-add-option:focus-visible[b-8jyma5ubs2] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* ── Rating ──────────────────────────────────────────────── */
.fed-rating[b-8jyma5ubs2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fed-rating-row[b-8jyma5ubs2] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.fed-seg[b-8jyma5ubs2] {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 4px;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-surface-hover, rgba(27, 26, 34, 0.045));
}

.fed-seg-btn[b-8jyma5ubs2] {
    padding: 6px 14px;
    border: 0;
    border-radius: var(--motiva-radius-full, 999px);
    background: none;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-secondary, #6B6779);
    cursor: pointer;
    white-space: nowrap;
}

.fed-seg-btn--on[b-8jyma5ubs2] {
    background: #fff;
    font-weight: var(--motiva-font-weight-bold, 700);
    color: var(--motiva-text-primary, #1A1820);
    box-shadow: 0 1px 2px rgba(27, 26, 34, 0.08);
}

.fed-seg-btn:focus-visible[b-8jyma5ubs2] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 1px;
}

/* ── Question footer ─────────────────────────────────────── */
.fed-block-foot[b-8jyma5ubs2] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--motiva-border-subtle, rgba(27, 26, 34, 0.05));
}

.fed-required[b-8jyma5ubs2] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.fed-required .fed-toggle-label[b-8jyma5ubs2] { flex: 0 0 auto; }

.fed-foot-note[b-8jyma5ubs2] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #8B8698);
}

.fed-close-block[b-8jyma5ubs2] {
    margin-inline-start: auto;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-text-secondary, #6B6779);
    cursor: pointer;
}

.fed-close-block:hover[b-8jyma5ubs2] { color: var(--motiva-text-primary, #1A1820); }

/* ── Empty ───────────────────────────────────────────────── */
.fed-empty[b-8jyma5ubs2] {
    padding: 38px 20px;
    text-align: center;
    border: 1px dashed var(--motiva-border-input, rgba(27, 26, 34, 0.14));
    border-radius: var(--motiva-radius-lg, 20px);
}

.fed-empty-title[b-8jyma5ubs2] {
    margin: 0;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-text-secondary, #4A4657);
}

.fed-empty-sub[b-8jyma5ubs2] {
    margin: 8px 0 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #8B8698);
}

/* ── Toast ───────────────────────────────────────────────── */
.fed-toast[b-8jyma5ubs2] {
    position: fixed;
    bottom: 26px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: var(--motiva-z-toast, 900);
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border-radius: var(--motiva-radius-full, 999px);
    background: #1B1A22;
    color: #fff;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    box-shadow: 0 14px 34px -12px rgba(27, 26, 34, 0.5);
}

/* ── Responsive ──────────────────────────────────────────────
   The editor is a wide working canvas, so it holds its grids longer than a
   reading page would. Below these widths the multi-column rows fold rather
   than shrink the controls into unusability. */
@media (max-width: 900px) {
    .fed-grid--three[b-8jyma5ubs2],
    .fed-grid--toggles[b-8jyma5ubs2],
    .fed-grid--name-cycle[b-8jyma5ubs2],
    .fed-grid--title-type[b-8jyma5ubs2] { grid-template-columns: 1fr; }

    /* The type chip and the required flag fold out of the collapsed row
       first; number, title and tools are what the row is for. */
    .fed-block-row[b-8jyma5ubs2] { grid-template-columns: 26px minmax(0, 1fr) auto; }
    .fed-block-type[b-8jyma5ubs2],
    .fed-block-system[b-8jyma5ubs2],
    .fed-block-req[b-8jyma5ubs2] { display: none; }
}

@media (max-width: 640px) {
    .fed-header[b-8jyma5ubs2] { padding: 12px; }
    .fed-actions[b-8jyma5ubs2] { width: 100%; margin-inline-start: 0; }
    .fed-title[b-8jyma5ubs2] { max-width: 100%; }
}

/* The pinned-required note on the project-preferences block. Reads as a
   stated constraint rather than a broken control, so it takes the lock
   glyph and the brand tint instead of a greyed-out toggle. */
.fed-foot-note--pinned[b-8jyma5ubs2] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-tag-brand-surface, rgba(79, 70, 229, 0.06));
    border: 1px solid color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 18%, transparent);
    color: var(--motiva-color-violet-ink, #4338CA);
    font-weight: var(--motiva-font-weight-semibold, 600);
}

.fed-foot-note--pinned svg[b-8jyma5ubs2] { flex: 0 0 auto; }
/* /Pages/Management/Forms/FormsManagement.razor.rz.scp.css */
/* ============================================================
   FormsManagement — טפסים (Admin)
   Prefix: fml-

   Visual source:
       design/design-system/Motiva Admin Form Editor.dc.html

   The reference draws the EDITOR. This list follows the same visual
   language and reuses the composition already settled on the other
   redesigned Admin screens (UsersManagement): title + summary + one
   primary / toolbar / full-width table. The button, popup-menu, filter-pill
   and toolbar recipes below are transcribed from that page on purpose —
   two Admin tables that look different are a bug, not a variation.

   Design tokens: motiva-tokens.css. This page renders inside the canvas
   shell (.motiva .motiva-final .motiva-lecturer), so every --motiva-*
   token resolves to the finished design's value. The var() fallbacks are
   only for the case where it is viewed outside that scope.

   NOTE ON PREFIX. The previous version of this page used `fm-` classes
   defined in the GLOBAL wwwroot/css/forms-management.css. This file is
   scoped (.razor.css) and uses a distinct prefix so nothing collides with
   that stylesheet while it is still linked.
   ============================================================ */

/* ── Page shell ──────────────────────────────────────────────
   No max-width: the canvas shell already owns the side inset, and an Admin
   table wants every pixel it is given. min-width:0 stops the table's
   min-width propagating out into page-level horizontal scroll. */
.fml-page[b-cxhg05ewty] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
    padding-block-end: 40px;
}

/* ── Header ──────────────────────────────────────────────── */
/* The page header is now <MPageHeaderCard>: MAdminBack in Leading, MInfoTip
   and the conditional MSummaryTag in TitleTrailing. The old .fml-head /
   .fml-head-main / .fml-head-title / .fml-h1 rules are gone. */

/* `.fml-summary` — the loose `N x · M y` line beside the h1 — is now an
   MSummaryTag, so this rule has no markup left. */

/* ── Buttons ─────────────────────────────────────────────────
   One primary on the page. Gradient, radius, hover and press all come from
   the shared .motiva-cta; everything here is geometry only. */
.fml-btn-primary[b-cxhg05ewty] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    padding: 0 16px;
    height: var(--motiva-control-height-md, 38px);
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.fml-btn-primary--lg[b-cxhg05ewty] { padding: 0 18px; font-size: var(--motiva-font-size-control, 13.5px); }
.fml-btn-primary:disabled[b-cxhg05ewty] { opacity: 0.6; cursor: default; }

.fml-btn-ghost[b-cxhg05ewty] {
    padding: 0 14px;
    height: var(--motiva-control-height-md, 38px);
    border: 0;
    background: none;
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-secondary, #5B5568);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.fml-btn-ghost:hover[b-cxhg05ewty] { background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035)); }
.fml-btn-ghost:disabled[b-cxhg05ewty] { opacity: 0.5; cursor: default; }

.fml-btn-primary:focus-visible[b-cxhg05ewty],
.fml-btn-ghost:focus-visible[b-cxhg05ewty] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* Inline spinner for the create button. */
.fml-spinner[b-cxhg05ewty] {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    animation: fml-spin-b-cxhg05ewty 0.7s linear infinite;
    flex: 0 0 auto;
}

@keyframes fml-spin-b-cxhg05ewty { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .fml-spinner[b-cxhg05ewty] { animation-duration: 2.4s; }
}

/* ── Toolbar ─────────────────────────────────────────────────
   align-items: stretch so the filter pills adopt whatever height
   MSearchField resolves to, instead of a hardcoded number that would
   silently misalign when that component changes. */
.fml-toolbar[b-cxhg05ewty] {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 2px;
}

/* ::deep because MSearchField renders its own root, which carries ITS
   isolation attribute and not this page's. MaxWidth alone is a no-op on
   that component — the wrapper needs a stated width, hence the flex basis
   plus max-width here. */
.fml-toolbar[b-cxhg05ewty]  .fml-search {
    flex: 1 1 300px;
    max-width: 440px;
}

.fml-filter[b-cxhg05ewty] {
    position: relative;
    display: flex;
}

/* Filter pill — "name: value ⌄". The label stays quiet and the value
   carries the weight, so a row of pills scans as answers, not questions. */
.fml-filter-btn[b-cxhg05ewty] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 15px;
    border-radius: var(--motiva-radius-full, 999px);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    color: var(--motiva-text-primary, #1A1820);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.fml-filter-btn:hover[b-cxhg05ewty] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 22%, transparent);
}

.fml-filter-btn:focus-visible[b-cxhg05ewty] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* Applied filter — the brand EDGE, not a violet fill. A flat violet pill is
   the mistake the tag-brand token exists to prevent. */
.fml-filter-btn--on[b-cxhg05ewty] {
    background: #fff;
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 42%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 12%, transparent);
}

.fml-filter-name[b-cxhg05ewty] {
    font-size: var(--motiva-font-size-control, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-secondary, #5B5568);
}

.fml-filter-value[b-cxhg05ewty] {
    font-size: var(--motiva-font-size-control, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-text-primary, #1A1820);
}

.fml-filter-chev[b-cxhg05ewty] {
    color: var(--motiva-text-muted, #8B8698);
    transition: transform var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
    flex: 0 0 auto;
}

.fml-filter-chev--open[b-cxhg05ewty] { transform: rotate(180deg); }

.fml-clear[b-cxhg05ewty] {
    align-self: center;
    padding: 0 10px;
    border: 0;
    background: none;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-secondary, #5B5568);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fml-clear:hover[b-cxhg05ewty] { color: var(--motiva-text-primary, #1A1820); }

/* The end group carries the auto margin now; the count sits inside it. */
.fml-toolbar-end[b-cxhg05ewty] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-inline-start: auto;
}

.fml-result[b-cxhg05ewty] {
    align-self: center;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
}

/* ── Popup menus — one recipe, two callers ─────────────────── */
.fml-menu[b-cxhg05ewty] {
    position: absolute;
    top: calc(100% + 6px);
    z-index: var(--motiva-z-dropdown, 500);
    min-width: 180px;
    padding: 6px;
    border-radius: var(--motiva-radius-md, 14px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    box-shadow: var(--motiva-shadow-md, 0 16px 36px rgba(30, 20, 60, 0.14));
}

/* Anchored to the reading start of its trigger, logical so an LTR build
   needs no second rule. */
.fml-menu--filter[b-cxhg05ewty] { inset-inline-start: 0; }

/* The kebab sits at the row's far end, so its menu hangs inward — the one
   direction with room. inset-inline-end:0 rather than a physical side, or
   the page gains a horizontal scrollbar in RTL. */
.fml-menu--row[b-cxhg05ewty] {
    inset-inline-end: 0;
    top: calc(100% + 4px);
    min-width: 168px;
}

.fml-menu-item[b-cxhg05ewty] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    background: none;
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.fml-menu-item:hover:not(:disabled)[b-cxhg05ewty] { background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035)); }

.fml-menu-item:focus-visible[b-cxhg05ewty] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: -2px;
}

.fml-menu-item-label[b-cxhg05ewty] { flex: 1 1 auto; }
.fml-menu-item--on[b-cxhg05ewty] { font-weight: var(--motiva-font-weight-semibold, 600); }
.fml-menu-check[b-cxhg05ewty] { color: var(--motiva-color-violet, #4F46E5); }

/* Red is reserved for destructive. */
.fml-menu-item--danger[b-cxhg05ewty] { color: var(--motiva-color-rose, #C2506D); }
.fml-menu-item--danger:hover[b-cxhg05ewty] { background: color-mix(in srgb, var(--motiva-color-rose, #C2506D) 8%, transparent); }

/* ── Table ───────────────────────────────────────────────────
   Widths for the fixed columns; the name column carries none so it takes
   whatever is left and the table fills the canvas. */
.fml-col-cycle[b-cxhg05ewty]   { width: 128px; }
.fml-col-status[b-cxhg05ewty]  { width: 118px; }
.fml-col-window[b-cxhg05ewty]  { width: 168px; }
.fml-col-num[b-cxhg05ewty]     { width: 84px; }
.fml-col-actions[b-cxhg05ewty] { width: 56px; }

/* The form name is the row's affordance into the editor — a button, so it
   is reachable by keyboard, styled as text so the table stays quiet. */
.fml-name[b-cxhg05ewty] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-text-primary, #1A1820);
    text-align: start;
    cursor: pointer;
    min-width: 0;
}

.fml-name:hover .fml-name-text[b-cxhg05ewty] { color: var(--motiva-color-violet, #4F46E5); }

.fml-name:focus-visible[b-cxhg05ewty] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
    border-radius: var(--motiva-radius-xs, 6px);
}

.fml-name-text[b-cxhg05ewty] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

/* The assignment form is flagged because its questions are not freely
   editable — the tag is the warning the editor then explains. Brand edge,
   never a filled violet chip. */
.fml-tag-system[b-cxhg05ewty] {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-tag-brand-surface, rgba(79, 70, 229, 0.07));
    border: 1px solid color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 24%, transparent);
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-color-violet-ink, #4338CA);
    white-space: nowrap;
}

.fml-muted[b-cxhg05ewty] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-secondary, #5B5568);
    white-space: nowrap;
}

.fml-num[b-cxhg05ewty] {
    display: inline-block;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-text-primary, #1A1820);
    font-variant-numeric: tabular-nums;
}

/* A zero submission count is real information, but it is not a destination
   — it stays quiet and unclickable rather than offering an empty screen. */
.fml-num--zero[b-cxhg05ewty] { color: var(--motiva-text-subtle, #B7B2C2); font-weight: var(--motiva-font-weight-medium, 500); }

.fml-num--link[b-cxhg05ewty] { cursor: pointer; }
.fml-num--link:hover[b-cxhg05ewty] { color: var(--motiva-color-violet, #4F46E5); text-decoration: underline; text-underline-offset: 3px; }

.fml-num--link:focus-visible[b-cxhg05ewty] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
    border-radius: var(--motiva-radius-xs, 6px);
}

/* ── Status — dot + text, four states ────────────────────────
   Restrained: a tinted pill with a solid dot, never a saturated fill. The
   dot is the colour; the text stays ink. Colours transcribed from the
   reference's stMap. */
.fml-status[b-cxhg05ewty] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: var(--motiva-radius-full, 999px);
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
}

/* The dot is a separate flex child, not a ::before on the text — an RTL
   marker glued to the text node inherits the bidi run and jumps sides. */
.fml-status-dot[b-cxhg05ewty] {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.fml-status--open[b-cxhg05ewty]        { color: #1E7F63; background: rgba(42, 160, 126, 0.10); }
.fml-status--open .fml-status-dot[b-cxhg05ewty] { background: #2AA07E; }

.fml-status--scheduled[b-cxhg05ewty]   { color: #2E55C4; background: rgba(62, 107, 224, 0.10); }
.fml-status--scheduled .fml-status-dot[b-cxhg05ewty] { background: #3E6BE0; }

.fml-status--closed[b-cxhg05ewty]      { color: var(--motiva-text-secondary, #4A4657); background: rgba(27, 26, 34, 0.06); }
.fml-status--closed .fml-status-dot[b-cxhg05ewty] { background: #9B96A8; }

.fml-status--draft[b-cxhg05ewty]       { color: #9A6A10; background: rgba(217, 161, 59, 0.13); }
.fml-status--draft .fml-status-dot[b-cxhg05ewty] { background: #D9A13B; }

/* ── Row actions ─────────────────────────────────────────── */
.fml-row-actions[b-cxhg05ewty] {
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.fml-kebab[b-cxhg05ewty] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--motiva-text-muted, #8B8698);
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.fml-kebab:hover[b-cxhg05ewty] {
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035));
    color: var(--motiva-text-primary, #1A1820);
}

.fml-kebab:focus-visible[b-cxhg05ewty] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* ── States ──────────────────────────────────────────────────
   Only the error state lives here: loading and empty are MDataTable's and
   MEmptyState's, so they match every other Admin table. */
.fml-state[b-cxhg05ewty] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-radius: var(--motiva-radius-md, 14px);
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
}

.fml-state--error[b-cxhg05ewty] {
    background: color-mix(in srgb, var(--motiva-color-rose, #C2506D) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--motiva-color-rose, #C2506D) 22%, transparent);
    color: var(--motiva-color-rose-ink, #A33C56);
}

.fml-retry[b-cxhg05ewty] {
    margin-inline-start: auto;
    padding: 0 12px;
    height: 32px;
    border-radius: var(--motiva-radius-sm, 10px);
    border: 1px solid color-mix(in srgb, var(--motiva-color-rose, #C2506D) 30%, transparent);
    background: #fff;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-color-rose-ink, #A33C56);
    cursor: pointer;
}

.fml-toast[b-cxhg05ewty] {
    padding: 11px 16px;
    border-radius: var(--motiva-radius-md, 14px);
    background: color-mix(in srgb, var(--motiva-color-teal, #0FA8C2) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--motiva-color-teal, #0FA8C2) 22%, transparent);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-primary, #1A1820);
}

.fml-toast--error[b-cxhg05ewty] {
    background: color-mix(in srgb, var(--motiva-color-rose, #C2506D) 7%, transparent);
    border-color: color-mix(in srgb, var(--motiva-color-rose, #C2506D) 22%, transparent);
    color: var(--motiva-color-rose-ink, #A33C56);
}

/* ── Create modal form ───────────────────────────────────── */
.fml-form[b-cxhg05ewty] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fml-form-row[b-cxhg05ewty] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.fml-field[b-cxhg05ewty] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.fml-label[b-cxhg05ewty] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-text-secondary, #4A4657);
}

.fml-req[b-cxhg05ewty] { color: var(--motiva-color-rose, #C2506D); }

.fml-input[b-cxhg05ewty],
.fml-textarea[b-cxhg05ewty] {
    width: 100%;
    padding: 0 13px;
    height: var(--motiva-control-height-lg, 42px);
    border-radius: var(--motiva-radius-sm, 10px);
    border: 1px solid var(--motiva-border-input, rgba(27, 26, 34, 0.12));
    background: #fff;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-primary, #1A1820);
    outline: none;
}

.fml-textarea[b-cxhg05ewty] {
    height: auto;
    min-height: 72px;
    padding: 10px 13px;
    line-height: 1.5;
    resize: vertical;
}

.fml-input:focus[b-cxhg05ewty],
.fml-textarea:focus[b-cxhg05ewty] { border-color: var(--motiva-color-violet, #4F46E5); }

.fml-form-error[b-cxhg05ewty] {
    padding: 10px 13px;
    border-radius: var(--motiva-radius-sm, 10px);
    background: color-mix(in srgb, var(--motiva-color-rose, #C2506D) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--motiva-color-rose, #C2506D) 22%, transparent);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-color-rose-ink, #A33C56);
}

/* ── Utility ───────────────────────────────────────────────── */
.fml-sr[b-cxhg05ewty] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Responsive ──────────────────────────────────────────────
   The modal's three-up date/status row folds first; the table itself
   scrolls inside MDataTable's own overflow container rather than pushing
   the page sideways. */
@media (max-width: 720px) {
    .fml-form-row[b-cxhg05ewty] { grid-template-columns: 1fr; }
    .fml-result[b-cxhg05ewty] { margin-inline-start: 0; }
}
/* /Pages/Management/Forms/FormSubmissionsPage.razor.rz.scp.css */
/* ============================================================
   FormSubmissionsPage — הגשות טופס (Admin)
   Prefix: fsb-

   Same visual language as FormsManagement / FormEditor: this is the third
   screen of one flow, so the header metrics, table treatment and muted-value
   styling are deliberately the same recipes.

   Design tokens: motiva-tokens.css, resolved by the canvas shell.
   ============================================================ */

.fsb-page[b-p5ce61v6mp] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
    padding-block-end: 40px;
}

/* Header moved to the shared MPageHeaderCard + MAdminBack (with MSummaryTag in TitleTrailing); dead head/back/head-title/h1 rules removed. */

/* `.fsb-summary` — the loose `N x · M y` line beside the h1 — is now an
   MSummaryTag, so this rule has no markup left. */

/* ── Table ───────────────────────────────────────────────── */
.fsb-col-email[b-p5ce61v6mp]   { width: 240px; }
.fsb-col-date[b-p5ce61v6mp]    { width: 160px; }
.fsb-col-num[b-p5ce61v6mp]     { width: 90px; }
.fsb-col-actions[b-p5ce61v6mp] { width: 96px; }

.fsb-name[b-p5ce61v6mp] {
    padding: 0;
    border: 0;
    background: none;
    max-width: 100%;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-text-primary, #1A1820);
    text-align: start;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fsb-name:hover[b-p5ce61v6mp] { color: var(--motiva-color-violet, #4F46E5); }

.fsb-name:focus-visible[b-p5ce61v6mp],
.fsb-open:focus-visible[b-p5ce61v6mp] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
    border-radius: var(--motiva-radius-xs, 6px);
}

.fsb-muted[b-p5ce61v6mp] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-secondary, #5B5568);
    white-space: nowrap;
    /* Latin values inside a Hebrew row need isolating or the run reorders. */
    unicode-bidi: isolate;
}

.fsb-num[b-p5ce61v6mp] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-text-primary, #1A1820);
    font-variant-numeric: tabular-nums;
}

.fsb-open[b-p5ce61v6mp] {
    padding: 0 12px;
    height: 30px;
    border-radius: var(--motiva-radius-sm, 10px);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: rgba(255, 255, 255, 0.9);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-text-primary, #1A1820);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.fsb-open:hover[b-p5ce61v6mp] { border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 32%, transparent); }

/* ── States ──────────────────────────────────────────────── */
.fsb-state[b-p5ce61v6mp] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--motiva-radius-md, 14px);
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.5;
}

.fsb-state--error[b-p5ce61v6mp] {
    background: color-mix(in srgb, var(--motiva-color-rose, #C2506D) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--motiva-color-rose, #C2506D) 22%, transparent);
    color: var(--motiva-color-rose-ink, #A33C56);
}

.fsb-retry[b-p5ce61v6mp] {
    margin-inline-start: auto;
    flex: 0 0 auto;
    padding: 0 12px;
    height: 32px;
    border-radius: var(--motiva-radius-sm, 10px);
    border: 1px solid color-mix(in srgb, var(--motiva-color-rose, #C2506D) 30%, transparent);
    background: #fff;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-color-rose-ink, #A33C56);
    cursor: pointer;
    white-space: nowrap;
}

/* ── Detail modal ────────────────────────────────────────── */
.fsb-detail[b-p5ce61v6mp] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fsb-detail-meta[b-p5ce61v6mp] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--motiva-border-subtle, rgba(27, 26, 34, 0.06));
}

.fsb-detail-email[b-p5ce61v6mp] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-secondary, #5B5568);
    unicode-bidi: isolate;
}

.fsb-detail-date[b-p5ce61v6mp] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #8B8698);
}

/* Answers read as a numbered transcript: the question quiet, the answer the
   thing with weight. */
.fsb-answers[b-p5ce61v6mp] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: fsb-answer;
}

.fsb-answer[b-p5ce61v6mp] { counter-increment: fsb-answer; }

.fsb-answer-q[b-p5ce61v6mp] {
    margin: 0 0 6px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.4;
    color: var(--motiva-text-secondary, #5B5568);
}

.fsb-answer-q[b-p5ce61v6mp]::before {
    content: counter(fsb-answer) ". ";
    color: var(--motiva-text-subtle, #B7B2C2);
}

.fsb-answer-a[b-p5ce61v6mp] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.6;
    color: var(--motiva-text-primary, #1A1820);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.fsb-answer-a--num[b-p5ce61v6mp] {
    font-size: var(--motiva-font-size-h3, 18px);
    font-weight: var(--motiva-font-weight-bold, 700);
    font-variant-numeric: tabular-nums;
}

.fsb-chips[b-p5ce61v6mp] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fsb-chip[b-p5ce61v6mp] {
    padding: 5px 11px;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-tag-brand-surface, rgba(79, 70, 229, 0.07));
    border: 1px solid color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 20%, transparent);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-color-violet-ink, #4338CA);
}

.fsb-btn-ghost[b-p5ce61v6mp] {
    padding: 0 14px;
    height: var(--motiva-control-height-md, 38px);
    border: 0;
    background: none;
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-secondary, #5B5568);
    cursor: pointer;
}

.fsb-btn-ghost:hover[b-p5ce61v6mp] { background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035)); }

.fsb-sr[b-p5ce61v6mp] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Pages/Management/Forms/StudentFormPreviewModal.razor.rz.scp.css */
/* ============================================================
   תצוגה מקדימה של טופס הסטודנט
   ------------------------------------------------------------
   This file styles the FRAME only — the badge, the title, the sentence that
   says which half is sample data, and the stage the student page is dropped
   onto. Not one rule here touches the form itself: everything inside
   .sfp-stage is StudentAssignmentPage's own scoped stylesheet, which is the
   entire point of the surface. A rule here that restyled a section would be
   the first crack of the drift this component exists to prevent.
   ============================================================ */

.sfp-head[b-iw72kek9x4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: start;
}

.sfp-head-top[b-iw72kek9x4] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Quiet, like every other "this is not live data" marking in the product:
   an opaque ink wash, never a brand fill — the --motiva-surface-* tokens are
   translucent and would pull the canvas gradient through. */
.sfp-badge[b-iw72kek9x4] {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 9px;
    border-radius: var(--motiva-radius-full, 999px);
    background: color-mix(in srgb, var(--motiva-text-primary, #1A1820) 8%, #fff);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
}

.sfp-title[b-iw72kek9x4] {
    margin: 0;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-h2, 20px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.2;
    color: var(--motiva-text-primary, #1A1820);
}

/* ── תצוגת סטודנט ─────────────────────────────────────────────
   A label and a select, and deliberately nothing more. It replaced a numbered
   1 → 2 strip with a 3/3 counter, which read as progress the READER had to
   make: an order to follow and a completion state that was theirs rather than
   the student's. Neither is true — either screen is valid at any moment — so
   the control says which screen is on view and stops.

   Sized to its longest option: MSelect's root is `flex: 1 1 auto`, so without a
   stated width here it would stretch to the header and become the filter bar
   this is not. */
.sfp-view[b-iw72kek9x4] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sfp-view-label[b-iw72kek9x4] {
    flex: none;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
}

/* ::deep — MSelect renders its own root, which carries ITS isolation
   attribute and not this file's, so a bare `.sfp-view-select` here would
   match nothing. `.sfp-view` is a real element of this component, which is
   what gives ::deep something to hang off. */
.sfp-view[b-iw72kek9x4]  .sfp-view-select {
    flex: none;
    width: 168px;
}

/* The stage.

   Inside a modal the page gutters belong to a different box, so
   --motiva-content-padding-inline is zeroed here rather than the page being
   taught about modals. (The preview renders the catalog/assignment surfaces
   with their headers suppressed, so this is now only a safety zero for any
   gutter-relative child.) */
.sfp-stage[b-iw72kek9x4] {
    --motiva-content-padding-inline: 0px;
    display: block;
}
/* /Pages/Management/InnovationIntegration/InnovationIntegrationManagement.razor.rz.scp.css */
/* ============================================================
   Innovation Integration management — scoped (iim-* prefix)
   Six stacked sections: endpoint, key status, field mappings,
   status mappings, payload preview, test endpoint.
   ============================================================ */

.iim-page[b-iuajjk8wkt] {
    padding: 24px 28px 56px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Header moved to the shared MPageHeaderCard + MAdminBack; dead topbar/back/breadcrumb/title rules removed. */

/* ── Section ──────────────────────────────────────────────── */

.iim-section[b-iuajjk8wkt] {
    /* Surface from the shared `.motiva-panel` class (motiva-base.css),
       worn in the markup. This block used to restate it as --g-bg-surface at
       --g-radius-md behind --g-border-light with --g-shadow-sm: the same white,
       but a 16px corner, a grey hairline and no lift, against the 24px violet-
       edged lifted panel every migrated screen renders. */
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.iim-section-head[b-iuajjk8wkt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* CARD TITLE — the shared h3 step (16px/700). Was a per-page literal. */
.iim-section-title[b-iuajjk8wkt] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--motiva-font-size-h3, 16px);
    font-weight: 700;
    color: var(--g-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.iim-section-title .oi[b-iuajjk8wkt] { color: var(--g-accent); }

.iim-section-desc[b-iuajjk8wkt] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--g-text-secondary);
    line-height: 1.6;
}
.iim-section-desc code[b-iuajjk8wkt] {
    direction: ltr;
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--g-bg-hover);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--motiva-font-size-caption, 12px);
}

/* ── States ───────────────────────────────────────────────── */

.iim-state[b-iuajjk8wkt] {
    padding: 32px;
    text-align: center;
    background: var(--g-bg-surface);
    border-radius: var(--g-radius-md);
    color: var(--g-text-muted);
    border: 1px dashed var(--g-border);
}
.iim-state-error[b-iuajjk8wkt] { color: var(--g-danger); }

.iim-debug[b-iuajjk8wkt] {
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--g-bg-hover);
    border-radius: var(--g-radius-sm);
    color: var(--g-text-muted);
    font-size: var(--motiva-font-size-caption, 12px);
    word-break: break-word;
    direction: ltr;
}

.iim-toast[b-iuajjk8wkt] {
    padding: 10px 14px;
    border-radius: var(--g-radius-sm);
    background: var(--g-accent-light);
    color: var(--g-accent);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: 600;
}
.iim-toast-error[b-iuajjk8wkt] { background: rgba(220, 53, 69, 0.1); color: var(--g-danger); }

.iim-empty[b-iuajjk8wkt] {
    padding: 14px;
    border-radius: var(--g-radius-sm);
    background: var(--g-bg-hover);
    color: var(--g-text-muted);
    font-size: var(--motiva-font-size-sm, 13px);
    text-align: center;
}

/* ── Buttons ──────────────────────────────────────────────── */

.iim-btn[b-iuajjk8wkt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: opacity 0.15s, background 0.13s;
}
.iim-btn:disabled[b-iuajjk8wkt] { opacity: 0.6; cursor: not-allowed; }
.iim-btn-primary[b-iuajjk8wkt]  { background: var(--g-accent); color: #fff; }
.iim-btn-primary:hover:not(:disabled)[b-iuajjk8wkt] { opacity: 0.9; }
.iim-btn-secondary[b-iuajjk8wkt] {
    background: var(--g-bg-surface);
    color: var(--g-text-secondary);
    border-color: var(--g-border);
}
.iim-btn-secondary:hover[b-iuajjk8wkt] { background: var(--g-bg-hover); color: var(--g-text-primary); }
.iim-btn-danger[b-iuajjk8wkt] {
    background: var(--g-bg-surface);
    color: var(--g-danger);
    border-color: var(--g-border);
}
.iim-btn-danger:hover[b-iuajjk8wkt] { background: rgba(220, 53, 69, 0.08); }

/* ── Key/value rows (endpoint details) ───────────────────── */

.iim-kv[b-iuajjk8wkt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--g-bg-hover);
    border-radius: var(--g-radius-sm);
    padding: 10px 14px;
}

.iim-kv-row[b-iuajjk8wkt] {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 10px;
    align-items: center;
}

.iim-kv-label[b-iuajjk8wkt] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 700;
    color: var(--g-text-muted);
}

.iim-kv-value[b-iuajjk8wkt] {
    color: var(--g-text-primary);
    font-size: var(--motiva-font-size-sm, 13px);
    word-break: break-all;
}
.iim-kv-url[b-iuajjk8wkt] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--motiva-font-size-caption, 12px);
}

.iim-copy-btn[b-iuajjk8wkt] {
    padding: 4px 10px;
    background: var(--g-bg-surface);
    color: var(--g-text-secondary);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    font-size: var(--motiva-font-size-control, 12px);
    cursor: pointer;
}
.iim-copy-btn:hover[b-iuajjk8wkt] { color: var(--g-accent); border-color: var(--g-accent); }

/* ── API-key status banner ───────────────────────────────── */

.iim-key-status[b-iuajjk8wkt] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--g-radius-sm);
    font-size: 14px;
}
.iim-key-ok[b-iuajjk8wkt] {
    background: rgba(40, 167, 69, 0.10);
    color: #1f7a3a;
}
.iim-key-missing[b-iuajjk8wkt] {
    background: rgba(220, 53, 69, 0.10);
    color: var(--g-danger);
}
.iim-key-len[b-iuajjk8wkt] { color: var(--g-text-muted); font-size: var(--motiva-font-size-caption, 12px); }

/* ── Tables ───────────────────────────────────────────────── */

.iim-table[b-iuajjk8wkt] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--motiva-font-size-sm, 13px);
}

.iim-table th[b-iuajjk8wkt],
.iim-table td[b-iuajjk8wkt] {
    padding: 8px 10px;
    text-align: start;
    border-bottom: 1px solid var(--g-border-light);
    vertical-align: top;
}

.iim-table th[b-iuajjk8wkt] {
    background: var(--g-bg-hover);
    color: var(--g-text-muted);
    font-weight: 700;
    font-size: var(--motiva-font-size-caption, 11px);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.iim-row-inactive[b-iuajjk8wkt] { opacity: 0.55; }

.iim-th-sub[b-iuajjk8wkt] {
    margin-top: 2px;
    font-size: var(--motiva-font-size-caption, 11px);
    color: var(--g-text-muted);
}

.iim-th-actions[b-iuajjk8wkt] { width: 1%; white-space: nowrap; }

.iim-td-actions[b-iuajjk8wkt] {
    white-space: nowrap;
    display: flex;
    gap: 6px;
}

.iim-td-notes[b-iuajjk8wkt] {
    color: var(--g-text-muted);
    max-width: 220px;
}

/* ── Payload preview / test response ─────────────────────── */

.iim-code[b-iuajjk8wkt] {
    background: #0f172a;
    color: #e2e8f0;
    border-radius: var(--g-radius-sm);
    padding: 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--motiva-font-size-caption, 12px);
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre;
    margin: 0;
}

.iim-test-input[b-iuajjk8wkt] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    background: var(--g-bg-surface);
    color: var(--g-text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--motiva-font-size-control, 12px);
    box-sizing: border-box;
    resize: vertical;
}

.iim-test-actions[b-iuajjk8wkt] {
    display: flex;
    justify-content: flex-start;
}

.iim-test-result[b-iuajjk8wkt] {
    border-radius: var(--g-radius-sm);
    padding: 12px 14px;
    font-size: var(--motiva-font-size-sm, 13px);
}
.iim-test-ok[b-iuajjk8wkt]   { background: rgba(40, 167, 69, 0.10); color: #1f7a3a; }
.iim-test-fail[b-iuajjk8wkt] { background: rgba(220, 53, 69, 0.10); color: var(--g-danger); }

.iim-test-warnings[b-iuajjk8wkt] {
    margin: 8px 0 0;
    padding-inline-start: 18px;
    font-size: var(--motiva-font-size-caption, 12px);
    color: var(--g-text-muted);
}

/* ── Modals ───────────────────────────────────────────────── */

.iim-overlay[b-iuajjk8wkt] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    z-index: var(--motiva-z-overlay); /* 900 — Motiva system token */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.iim-modal[b-iuajjk8wkt] {
    background: var(--g-bg-surface);
    border-radius: var(--g-radius-md);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.iim-modal-head[b-iuajjk8wkt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--g-border-light);
}
.iim-modal-head h2[b-iuajjk8wkt] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--g-text-primary);
}

.iim-modal-close[b-iuajjk8wkt] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--g-text-muted);
    width: 28px;
    height: 28px;
    border-radius: var(--g-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.iim-modal-close:hover[b-iuajjk8wkt] { background: var(--g-bg-hover); }

.iim-modal-body[b-iuajjk8wkt] {
    padding: 14px 18px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.iim-modal-foot[b-iuajjk8wkt] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--g-border-light);
}

.iim-field[b-iuajjk8wkt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.iim-field label[b-iuajjk8wkt] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 700;
    color: var(--g-text-muted);
}
.iim-field input[b-iuajjk8wkt],
.iim-field select[b-iuajjk8wkt],
.iim-field textarea[b-iuajjk8wkt] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    background: var(--g-bg-surface);
    color: var(--g-text-primary);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-body, 14px);
    box-sizing: border-box;
}

.iim-field-row[b-iuajjk8wkt] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.iim-checkbox[b-iuajjk8wkt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--g-text-primary);
    cursor: pointer;
}

.iim-form-error[b-iuajjk8wkt] {
    padding: 8px 10px;
    background: rgba(220, 53, 69, 0.1);
    color: var(--g-danger);
    border-radius: var(--g-radius-sm);
    font-size: var(--motiva-font-size-sm, 13px);
}
/* /Pages/Management/Integrations/AirtableManagement.razor.rz.scp.css */

/* ──────────────────────────────────────────────────────────────────────
   Preview modal — 4 color-coded buckets (New/Update/Warning/Error),
   summary tiles at the top, expandable per-bucket lists below.
   ────────────────────────────────────────────────────────────────────── */

.atm-preview-loading[b-o0mwu5umi5] {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 18px;
    color: var(--g-text-muted);
    font-size: var(--motiva-font-size-sm, 13px);
}

.atm-spinner-inline[b-o0mwu5umi5] {
    width: 14px; height: 14px;
    border: 2px solid transparent;
    border-top-color: var(--g-accent);
    border-radius: 50%;
    display: inline-block;
    animation: atm-spin-b-o0mwu5umi5 0.7s linear infinite;
}
@keyframes atm-spin-b-o0mwu5umi5 { to { transform: rotate(360deg); } }

.atm-preview-summary[b-o0mwu5umi5] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--g-border-light);
}
.atm-preview-tile[b-o0mwu5umi5] {
    border-radius: var(--g-radius-md, 8px);
    padding: 10px 12px;
    text-align: center;
    border: 1px solid;
}
.atm-preview-tile-num[b-o0mwu5umi5] { font-size: 1.4rem; font-weight: 700; line-height: 1; }
.atm-preview-tile-lbl[b-o0mwu5umi5] { font-size: var(--motiva-font-size-caption, 11px); margin-top: 4px; opacity: 0.85; }

.atm-preview-tile--new[b-o0mwu5umi5]    { background: #dcfce7; border-color: #6ee7b7; color: #065f46; }
.atm-preview-tile--update[b-o0mwu5umi5] { background: #dbeafe; border-color: #93c5fd; color: #1e40af; }
.atm-preview-tile--warn[b-o0mwu5umi5]   { background: #fef3c7; border-color: #fcd34d; color: #78350f; }
.atm-preview-tile--err[b-o0mwu5umi5]    { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.atm-preview-tile--total[b-o0mwu5umi5]  { background: var(--g-bg-hover); border-color: var(--g-border-light); color: var(--g-text-muted); }

.atm-preview-section[b-o0mwu5umi5] {
    margin: 12px 18px;
    border: 1px solid var(--g-border-light);
    border-radius: var(--g-radius-sm, 6px);
    padding: 8px 12px;
}
.atm-preview-summary-row[b-o0mwu5umi5] {
    cursor: pointer;
    font-weight: 600;
    color: var(--g-text-primary);
    display: flex; align-items: center; gap: 8px;
}
.atm-preview-count[b-o0mwu5umi5] {
    background: var(--g-bg-hover);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: var(--motiva-font-size-count, 11px);
    color: var(--g-text-muted);
    margin-inline-start: auto;
}

.atm-preview-list[b-o0mwu5umi5] {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 4px;
}
.atm-preview-list li[b-o0mwu5umi5] {
    padding: 6px 10px;
    border-radius: var(--g-radius-sm, 6px);
    border-inline-start: 3px solid transparent;
    background: var(--g-bg-hover);
}
.atm-preview-row--new[b-o0mwu5umi5]    { border-inline-start-color: #16a34a; }
.atm-preview-row--update[b-o0mwu5umi5] { border-inline-start-color: #2563eb; }
.atm-preview-row--warn[b-o0mwu5umi5]   { border-inline-start-color: #f59e0b; }
.atm-preview-row--err[b-o0mwu5umi5]    { border-inline-start-color: #dc2626; }

.atm-preview-row-title[b-o0mwu5umi5] {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--g-text-primary);
}
.atm-preview-row-num[b-o0mwu5umi5] { color: var(--g-text-muted); font-variant-numeric: tabular-nums; font-size: var(--motiva-font-size-caption, 12px); }
.atm-preview-row-org[b-o0mwu5umi5] { color: var(--g-text-muted); font-size: var(--motiva-font-size-caption, 12px); }
.atm-preview-row-detail[b-o0mwu5umi5] {
    font-size: var(--motiva-font-size-caption, 11px);
    color: var(--g-text-muted);
    margin-top: 2px;
}
.atm-preview-more[b-o0mwu5umi5] {
    text-align: center;
    font-size: var(--motiva-font-size-caption, 11px);
    color: var(--g-text-muted);
    background: transparent !important;
    border: 0 !important;
}

/* ──────────────────────────────────────────────────────────────────────
   Import history modal — small table of past runs.
   ────────────────────────────────────────────────────────────────────── */

.atm-runs-table[b-o0mwu5umi5] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--motiva-font-size-caption, 12px);
    margin: 8px 18px;
    width: calc(100% - 36px);
}
.atm-runs-table thead th[b-o0mwu5umi5] {
    text-align: right;
    padding: 8px 6px;
    border-bottom: 1px solid var(--g-border-light);
    background: var(--g-bg-hover);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 600;
    color: var(--g-text-muted);
}
.atm-runs-table tbody td[b-o0mwu5umi5] {
    padding: 6px;
    border-bottom: 1px solid var(--g-border-light);
    vertical-align: top;
}
.atm-runs-summary[b-o0mwu5umi5] { max-width: 280px; color: var(--g-text-muted); }

.atm-run-status[b-o0mwu5umi5] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 700;
}
.atm-run-status--success[b-o0mwu5umi5]        { background: #dcfce7; color: #166534; }
.atm-run-status--partialfailure[b-o0mwu5umi5] { background: #fef3c7; color: #78350f; }
.atm-run-status--failure[b-o0mwu5umi5]        { background: #fee2e2; color: #991b1b; }
.atm-run-status--inprogress[b-o0mwu5umi5]     { background: #e0e7ff; color: #1e3a8a; }

.atm-import-empty[b-o0mwu5umi5] {
    text-align: center;
    padding: 24px;
    color: var(--g-text-muted);
    font-size: var(--motiva-font-size-sm, 13px);
}

/* ──────────────────────────────────────────────────────────────────────
   Preview clarity — explainer banner + "no suspicious dups" callout.
   ────────────────────────────────────────────────────────────────────── */

.atm-preview-explainer[b-o0mwu5umi5] {
    display: flex; gap: 10px;
    padding: 12px 18px;
    background: #eef2ff;
    border-bottom: 1px solid #c7d2fe;
    color: #1e3a8a;
    font-size: var(--motiva-font-size-meta, 12.5px);
    line-height: 1.55;
}
.atm-preview-explainer-icon[b-o0mwu5umi5] {
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    color: #4338ca;
}
.atm-preview-explainer strong[b-o0mwu5umi5] { font-weight: 700; color: #312e81; }
.atm-preview-explainer em[b-o0mwu5umi5] { font-style: normal; font-weight: 600; color: #b45309; }

.atm-preview-clean[b-o0mwu5umi5] {
    display: flex; align-items: center; gap: 8px;
    margin: 12px 18px 0;
    padding: 10px 14px;
    background: #dcfce7;
    border: 1px solid #6ee7b7;
    border-radius: var(--g-radius-sm, 6px);
    color: #065f46;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: 600;
}
.atm-preview-clean .oi[b-o0mwu5umi5] { font-size: var(--motiva-font-size-body, 14px); color: #16a34a; }

/* ──────────────────────────────────────────────────────────────────────
   History button — clearly distinguished from the other secondary
   row actions so admins can find it post-import.
   ────────────────────────────────────────────────────────────────────── */

.atm-btn-history[b-o0mwu5umi5] {
    background: #fff7ed;
    border: 1px solid #fdba74;
    color: #9a3412;
    font-weight: 600;
}
.atm-btn-history:hover:not(:disabled)[b-o0mwu5umi5] {
    background: #ffedd5;
    border-color: #f97316;
}
.atm-btn-history .oi[b-o0mwu5umi5] { color: #c2410c; }

/* ──────────────────────────────────────────────────────────────────────
   Decision workflow — plain-language sentence block at top + per-row
   include/skip checkboxes + bulk-toggle toolbar for the warning bucket.
   ────────────────────────────────────────────────────────────────────── */

.atm-preview-sentences[b-o0mwu5umi5] {
    padding: 14px 18px;
    background: var(--g-bg-surface, #fff);
    border-bottom: 1px solid var(--g-border-light, rgba(15,23,42,0.08));
    font-size: var(--motiva-font-size-body, 14px);
    line-height: 1.7;
    color: var(--g-text-primary, #0f172a);
}
.atm-preview-sentences p[b-o0mwu5umi5] {
    margin: 0;
    padding: 2px 0;
}
.atm-preview-sentences strong[b-o0mwu5umi5] {
    font-weight: 700;
    color: #1d4ed8;
    font-variant-numeric: tabular-nums;
}
.atm-preview-sentences-hint[b-o0mwu5umi5] {
    margin-inline-start: 8px;
    font-size: var(--motiva-font-size-caption, 12px);
    color: #b45309;
    font-style: italic;
}
.atm-preview-sentences-err[b-o0mwu5umi5] {
    color: #991b1b;
    margin-top: 2px;
}
.atm-preview-sentences-err strong[b-o0mwu5umi5] { color: #991b1b; }

.atm-preview-bulk[b-o0mwu5umi5] {
    display: flex; align-items: center; gap: 8px;
    margin: 8px 18px 0;
    padding: 6px 10px;
    background: #fff7ed;
    border: 1px dashed #fdba74;
    border-radius: var(--g-radius-sm, 6px);
    font-size: var(--motiva-font-size-caption, 12px);
    color: #9a3412;
}
.atm-preview-bulk-label[b-o0mwu5umi5] { font-weight: 600; }
.atm-bulk-btn[b-o0mwu5umi5] {
    background: var(--g-bg-surface, #fff);
    border: 1px solid #fdba74;
    color: #9a3412;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.atm-bulk-btn:hover[b-o0mwu5umi5] { background: #fed7aa; }

/* Per-row layout: checkbox on the inline-start, body on the inline-end. */
.atm-preview-list li[b-o0mwu5umi5] {
    padding: 0;
}
.atm-preview-row-label[b-o0mwu5umi5] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 10px;
    cursor: pointer;
}
.atm-preview-row-label:hover[b-o0mwu5umi5] { background: rgba(15, 23, 42, 0.03); }

.atm-preview-row-check[b-o0mwu5umi5] {
    margin-top: 2px;
    width: 16px; height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}
.atm-preview-row-body[b-o0mwu5umi5] { flex: 1; min-width: 0; }

.atm-preview-row-locked[b-o0mwu5umi5] {
    margin-top: 2px;
    width: 16px; height: 16px;
    color: #b91c1c;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* Per-bucket included-count badge in the summary row. */
.atm-preview-include-count[b-o0mwu5umi5] {
    margin-inline-start: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: var(--motiva-font-size-count, 11px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────────────────────────────
   History discoverability — meta-value as a clickable link, and the
   per-row summary turns into a button so admins can jump to history
   without hunting for the dedicated button.
   ────────────────────────────────────────────────────────────────────── */

.atm-meta-link[b-o0mwu5umi5] {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--g-accent, #2563eb);
    font: inherit;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
    text-decoration: underline dotted;
}
.atm-meta-link:hover[b-o0mwu5umi5] { color: #1d4ed8; }
.atm-meta-link-icon[b-o0mwu5umi5] { font-size: var(--motiva-font-size-caption, 10px); opacity: 0.8; }

.atm-card-summary--clickable[b-o0mwu5umi5] {
    cursor: pointer;
    background: transparent;
    border: 0;
    text-align: inherit;
    width: 100%;
    font: inherit;
    color: inherit;
    padding: 0;
}
.atm-card-summary--clickable:hover[b-o0mwu5umi5] { text-decoration: underline; }
.atm-card-summary-cta[b-o0mwu5umi5] {
    color: var(--g-accent, #2563eb);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 600;
    margin-inline-start: 6px;
}
/* /Pages/Management/Integrations/IntegrationsManagement.razor.rz.scp.css */
/* ============================================================
   IntegrationsManagement — אינטגרציות (Admin)
   Prefix: im-

   Visual source:
       Client/Pages/Management/Milestones/MilestonesManagement.razor.css
       Client/Pages/Management/Cycles/CyclesManagement.razor.css

   The finished Admin recipe applied to a landing page: same header rhythm,
   card border/radius, status treatment, form controls and button language
   as the list screens.

   Design tokens: motiva-tokens.css. The page renders inside the canvas
   shell (.motiva .motiva-final .motiva-lecturer), so every --motiva-*
   token already resolves to the finished design's value. The var()
   fallbacks exist only so the page still renders sanely outside it.

   The previous version of this file was written against the legacy --g-*
   ramp, which inside .motiva-final yields the right colours with the wrong
   geometry — hence a replacement rather than a patch.

   Layout:
       header (back · title · info tip)
       ↓ 14px
       section heading + sub · 2-up card grid     ×2
   ============================================================ */

/* ── Page shell ────────────────────────────────────────────── */
.im-page[b-e2m5b71sbd] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
    padding-block-end: 40px;
}

/* ── Header ────────────────────────────────────────────────── */
/* The page header is now <MPageHeaderCard> (shared .motiva-panel surface):
   MAdminBack in Leading, MInfoTip in TitleTrailing. The old floating
   .im-head / .im-head-main / .im-head-line / .im-h1 rules are gone. */

/* `.im-subtitle` and the `.im-strip` block used to live here. Both were
   page-level explanatory text under the h1; the strip's sentence is now the
   header's MInfoTip and the subtitle rule had no markup left at all, so the
   rules that painted them are gone. */

/* ── Integrations surface ────────────────────────────────────
   ONE white Motiva surface holds both groups — the same paper as the
   page-header card (.motiva-panel, worn in the markup: white, existing
   radius, subtle violet hairline + lift). The groups inside carry NO
   background of their own; separation is spacing + a hairline divider, so
   the hierarchy reads page-header → surface → group → card with no nested
   boxes. */
.im-surface[b-e2m5b71sbd] {
    display: flex;
    flex-direction: column;
    padding: 20px 22px;
    min-width: 0;
}

/* A group is now a bare layout wrapper — title row + card grid, no fill.
   The heading is a compact TITLE + MInfoTip row; the help copy that used to
   sit under it as a permanent subtitle now lives in the tip. */
.im-group[b-e2m5b71sbd] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* The second group is set off from the first by breathing room and a very
   subtle hairline — not by a background block. */
.im-group--divided[b-e2m5b71sbd] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--motiva-panel-border, rgba(109, 40, 245, 0.08));
}

.im-group-head[b-e2m5b71sbd] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0 2px;
}

/* Same size the heading already rendered at inside .motiva-final
   (--motiva-font-size-h2, bold, primary ink): the heading size is
   unchanged — only its container and its info affordance are new. */
.im-group-title[b-e2m5b71sbd] {
    margin: 0;
    font-size: var(--motiva-font-size-h2, 20px);
    font-weight: var(--motiva-font-weight-bold, 700);
    letter-spacing: var(--motiva-letter-spacing-section, -0.02em);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
}

/* ── Card grid ───────────────────────────────────────────────
   Two up on the canvas.

   EQUAL HEIGHTS PER ROW. Grid's default `align-items: stretch` is what
   does it: each card fills its row track, so the two cards in a row run
   from the same top edge to the same bottom edge however much content
   each holds. An earlier `align-items: start` here was letting every card
   size to its own content, which is why Airtable (facts list + three
   actions) stood taller than the webhook card beside it.

   No height is stated anywhere — the row is as tall as its tallest card,
   and `.im-card-actions { margin-top: auto }` is what keeps each card's
   buttons on the shared bottom edge instead of floating mid-card.

   The trade this accepts: expanding Slack's OAuth block stretches the
   card beside it. That is the same rule working as asked, the neighbour's
   action stays pinned to the bottom, and it lasts only while the block is
   open.

   Below the single-column breakpoint a row holds one card, so stretch
   resolves to content height and the responsive behaviour is unchanged. */
.im-grid[b-e2m5b71sbd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 14px;
}

.im-card[b-e2m5b71sbd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px 18px;
    /* The same paper, hairline and haze MDataTable gives the list screens —
       one surface language across the Admin area. */
    background: var(--motiva-panel-surface, #fff);
    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(26, 24, 32, 0.04),
                    0 14px 34px -28px rgba(26, 24, 32, 0.22));
    min-width: 0;
}

.im-card-head[b-e2m5b71sbd] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

/* A tint of the sweep, not the sweep itself — a full gradient on a 38px
   chip reads as a button rather than an emblem. */
.im-card-glyph[b-e2m5b71sbd] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--motiva-radius-sm, 10px);
    background:
        linear-gradient(140deg,
            color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 13%, transparent),
            color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 11%, transparent)),
        var(--motiva-surface-primary, #fff);
    color: var(--motiva-color-violet, #4F46E5);
}

/* Title + its MInfoTip on one line (the card's help copy moved into the
   tip). align-items:center sits the small ⓘ against the title. */
.im-card-titles[b-e2m5b71sbd] {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.im-card-title[b-e2m5b71sbd] {
    margin: 0;
    font-size: var(--motiva-font-size-h3, 15px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.3;
    color: var(--motiva-text-primary, #1A1820);
}

/* ── Status ──────────────────────────────────────────────────
   Dot + text, no filled pill — the treatment every finished Admin table
   uses. "מושבת" / "לא הוגדר" are neutral, never rose: nothing has failed. */
.im-status[b-e2m5b71sbd] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
}

.im-status-dot[b-e2m5b71sbd] {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.im-status--on[b-e2m5b71sbd]  { color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 88%, #000); }
.im-status--off[b-e2m5b71sbd] { color: var(--motiva-text-muted, #8B8698); }

/* Not a status — a statement about WHERE the integration is configured.
   The two screens it labels have no connection handshake to report. */
.im-tag[b-e2m5b71sbd] {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.04));
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.3;
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
}

/* ── Facts list ──────────────────────────────────────────────
   Airtable's real numbers. A definition list, not three KPI cards: they
   are attributes of one integration, not four dashboards. */
.im-facts[b-e2m5b71sbd] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--motiva-radius-md, 14px);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
}

.im-fact[b-e2m5b71sbd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
}

.im-fact dt[b-e2m5b71sbd] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.3;
    color: var(--motiva-text-muted, #8B8698);
}

.im-fact dd[b-e2m5b71sbd] {
    margin: 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.3;
    color: var(--motiva-text-primary, #1A1820);
    font-variant-numeric: tabular-nums;
    unicode-bidi: isolate;
}

/* ── Card actions ────────────────────────────────────────── */
.im-card-actions[b-e2m5b71sbd] {
    display: flex;
    align-items: center;
    /* RTL flex-end = physical LEFT: the action cluster sits on the left of
       the card while each button keeps its RTL order within the cluster. */
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
}

/* Geometry shared by both button roles. The gradient FILL (primary, via
   .motiva-cta) and gradient OUTLINE (secondary, via .motiva-cta-outline) come
   entirely from the shared treatments in motiva-base.css — the same the
   dashboard and the corrected Airtable detail page use. Only geometry lives
   here, and it mirrors that page's `.atm-btn` (7px/14px, pill radius) so the
   two integration pages read as ONE button family. */
.im-btn-primary[b-e2m5b71sbd],
.im-btn-secondary[b-e2m5b71sbd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Reset the native <button> border. The SECONDARY re-applies a 1px
       gradient edge via .motiva-cta-outline (higher specificity); the filled
       PRIMARY (.motiva-cta) intentionally has none, so its gradient meets a
       clean edge with no leftover default/gray ring. */
    border: none;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--motiva-radius-full, 999px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    white-space: nowrap;
    cursor: pointer;
}

/* SURFACE / EDGE / HOVER / FOCUS come from the shared treatments in
   motiva-base.css: the PRIMARY carries `.motiva-cta` (full gradient fill,
   white text, clean edge) and the SECONDARIES carry `.motiva-cta-outline`
   (white interior, 1px violet→teal edge, soft focus halo). Only geometry
   lives here; disabled dimming comes from the global button:disabled rule. */

/* Inline save feedback beside the Slack button. */
.im-msg[b-e2m5b71sbd] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.35;
}

.im-msg--ok[b-e2m5b71sbd]  { color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 84%, #000); }
.im-msg--err[b-e2m5b71sbd] { color: var(--motiva-color-rose-ink, #B23256); }

/* ── Collapsible OAuth block ─────────────────────────────────
   Set-once credentials. Collapsed, the Slack card is the same height as
   the other three; expanded, it is an ordinary Motiva form. */
.im-collapse[b-e2m5b71sbd] {
    border-radius: var(--motiva-radius-md, 14px);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
}

.im-collapse-summary[b-e2m5b71sbd] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    list-style: none;
    cursor: pointer;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
    border-radius: inherit;
}

.im-collapse-summary[b-e2m5b71sbd]::-webkit-details-marker { display: none; }

.im-collapse-summary:hover[b-e2m5b71sbd] { background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035)); }

.im-collapse-summary:focus-visible[b-e2m5b71sbd] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: -2px;
}

.im-collapse-label[b-e2m5b71sbd] { flex: 1 1 auto; min-width: 0; }

.im-collapse-hint[b-e2m5b71sbd] {
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
}

.im-collapse-chev[b-e2m5b71sbd] {
    flex: 0 0 auto;
    color: var(--motiva-text-muted, #8B8698);
    transition: transform var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.im-collapse[open] .im-collapse-chev[b-e2m5b71sbd] { transform: rotate(180deg); }

.im-form[b-e2m5b71sbd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 13px 14px;
}

/* ── Form controls ─────────────────────────────────────────── */
.im-field[b-e2m5b71sbd] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.im-label[b-e2m5b71sbd] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
}

.im-req[b-e2m5b71sbd] { color: var(--motiva-color-rose-ink, #B23256); }

.im-optional[b-e2m5b71sbd] {
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-subtle, #B7B2C2);
}

.im-input[b-e2m5b71sbd] {
    width: 100%;
    box-sizing: border-box;
    padding: 0 12px;
    height: var(--motiva-control-height-md, 38px);
    border-radius: var(--motiva-radius-sm, 10px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-primary, #1A1820);
    transition: border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

/* Latin values inside a Hebrew page — isolated so a URL or a scope list
   cannot reorder the label line around it. */
.im-input--ltr[b-e2m5b71sbd] { text-align: start; unicode-bidi: isolate; }

.im-input[b-e2m5b71sbd]::placeholder { color: var(--motiva-text-subtle, #B7B2C2); }

.im-input:focus[b-e2m5b71sbd] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: -1px;
    border-color: var(--motiva-color-focus-ring, #4F46E5);
}

.im-input:disabled[b-e2m5b71sbd] { opacity: 0.6; cursor: default; }

.im-hint[b-e2m5b71sbd] {
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.4;
    color: var(--motiva-text-muted, #8B8698);
}

/* ── Switch row ────────────────────────────────────────────── */
.im-switch-row[b-e2m5b71sbd] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--motiva-radius-md, 14px);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-surface-primary, #fff);
}

.im-switch-copy[b-e2m5b71sbd] { min-width: 0; flex: 1 1 auto; }

.im-switch-title[b-e2m5b71sbd] {
    display: block;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
}

.im-switch-note[b-e2m5b71sbd] {
    display: block;
    margin-top: 4px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    color: var(--motiva-text-muted, #8B8698);
}

/* ── Narrow Management viewports ───────────────────────────── */
@media (max-width: 900px) {
    .im-grid[b-e2m5b71sbd] { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .im-btn-secondary[b-e2m5b71sbd],
    .im-collapse-chev[b-e2m5b71sbd],
    .im-input[b-e2m5b71sbd] { transition: none; }
}
/* /Pages/Management/LecturerManagementPage.razor.rz.scp.css */
/* ============================================================
   LecturerManagementPage — ניהול (Lecturer)
   Prefix: lmg-

   Visual source:
       Motiva Lecturer Management.dc.html
       ניהול מרצה 268.pdf

   Page layout:
       title row (14px top pad)
       ↓  22px
       overview: 2 × 2 card grid   — or —
       section panel (soft frosted surface)

   Design tokens: motiva-tokens.css
   Typography / spacing / radii: identical to Teams/Submissions/Requests/Resources
   ============================================================ */

/* ── Page shell ──────────────────────────────────────────────
   FULL CONTENT WIDTH, like the Resources workspace. The canvas shell already
   owns the page's side inset (--motiva-canvas-padding-inline), so this element
   simply fills what it is given and adds nothing of its own.

   THE 1180px CENTRED COLUMN IS GONE. It was introduced to pull six short lists
   out of a 1600px void, but it treated a symptom: the void came from the cards
   being laid out by row, not from the page being wide. The hub's three-track
   grid uses every pixel it is given — a wider viewport buys wider tiles, not
   emptier margins — so capping it would only throw desktop space away. Nothing
   else on this shell centres itself.

   No max-width at all, deliberately — a cap here is the thing being removed,
   and the internal row composition is what keeps a wide card readable. */
/* The 40px foot was for a page that scrolls; the curated hub ends where its
   last group ends, and 40px of nothing after it was the difference between
   fitting a 800px viewport and not. */
.lmg-page[b-0ssho6hogy] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    padding-block-end: 16px;
    min-width: 0;
}

/* ── Title row ───────────────────────────────────────────── */
/* The page title is now the shared white <MPageHeaderCard Scale="Core">; the
   old floating .lmg-title-row / .lmg-title-block / .lmg-title-line / .lmg-h1 /
   .lmg-subtitle rules are gone (the card draws the title, the live subtitle and
   the trailing MInfoTip). Only .lmg-back survives — it is the panel-close
   affordance, now carried in the card's Leading slot. */

/* "חזרה לניהול" panel-close button — rides the header card's Leading slot when
   a section panel is open. */
.lmg-back[b-0ssho6hogy] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: none;
    background: none;
    color: var(--motiva-text-subtle, #9B96A8);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    cursor: pointer;
    transition: color 0.12s ease;
}

.lmg-back:hover[b-0ssho6hogy] { color: var(--motiva-color-violet, #6D28F5); }
.lmg-back:focus-visible[b-0ssho6hogy] {
    outline: 2px solid var(--motiva-color-focus-ring, #6D28F5);
    outline-offset: 2px;
    border-radius: 4px;
}

/* .lmg-h1 and .lmg-subtitle removed — the title and live subtitle are now
   drawn by MPageHeaderCard (Core title scale + its own subtitle line). */

/* ── Loading ─────────────────────────────────────────────── */
.lmg-loading[b-0ssho6hogy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 56px 0;
    justify-content: center;
    color: var(--motiva-text-subtle, #9B96A8);
    font-size: var(--motiva-font-size-body, 14px);
}

.lmg-spinner[b-0ssho6hogy] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(109, 40, 245, 0.15);
    border-top-color: var(--motiva-color-violet, #6D28F5);
    border-radius: 50%;
    animation: lmg-spin-b-0ssho6hogy 0.7s linear infinite;
}

@keyframes lmg-spin-b-0ssho6hogy { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════
   OVERVIEW — the management hub

   Source: design/design-system/Motiva Admin Home.dc.html

   WHAT REPLACED WHAT. The overview was six MCards in two independently
   balanced columns, each card a head glyph over a run of borderless rows.
   The reference's composition inverts that: the SECTION groups and the TILE
   is the object you press. Which means:

     · nothing has to be balanced. Sections run full width in reading order,
       so the exhaustive column split, the six `order` overrides behind it and
       the ::deep reach into MCard all go away with it;
     · the surface appears where the target is. A tile you can press is the
       only lifted thing on the page, so "pressable" needs no hover reveal;
     · ONE mat under all of it, not one per section. The hub was bare
       headings on the canvas at first and read as a long drift of cards
       with occasional labels; the fix for that is a single workspace
       (borrowed value-for-value from ResourcesLibrary's `.lrs-workspace`),
       not a box per section — four of those made the page four slabs and
       put a card inside a card;
     · one section is one <section> with one aria-labelledby. The document
       outline now matches what the eye is grouping.

   The tile itself is MManagementTile — this file lays out the grid and the
   section head, and owns none of the card's own drawing.
   ══════════════════════════════════════════════════════════ */

/* ── THE MANAGEMENT WORKSPACE — one surface, not four ────────
   ONE ground under the whole hub. The previous pass gave each of the four
   sections its own bordered, rounded, shadowed box, and the page stopped
   reading as a hub: four large slabs stacked down the canvas, each one
   competing with the white tiles it was supposed to be holding. Two levels
   of card is one level too many.

   The hierarchy is now exactly four steps, and the surface only appears at
   one of them:

       page canvas
         └─ THIS — one quiet workspace
              └─ section label + muted line   (type only, no box)
                   └─ white tiles            (the objects you press)

   Same quiet language as ResourcesLibrary's `.lrs-workspace`, which is the
   product's existing answer to "one coherent workspace": hairline edge,
   translucent near-white fill, `--motiva-shadow-sm` — 0 1px 2px at 4%, an
   order of magnitude below the lift the tiles carry. A mat does not
   out-rank what is laid on it.

   The fill is .62 rather than the .55 the four boxes used. That number was
   low precisely BECAUSE there were four of them and .74 four times over
   striped the canvas; one surface can carry the value the rest of the
   product uses. */
.lmg-sections[b-0ssho6hogy] {
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 20px 22px 24px;
    /* THE SURFACE IS `.motiva-panel`, worn in the markup. The "mat" reading
       (a recessed ground so the MManagementTiles read as objects on it) is
       withdrawn for the same reason as the Knowledge Center's: the tiles
       carry their own edge and lift, and a translucent page-sized container
       reads as a different, greyer white than every other shell. */
    min-width: 0;
}

/* ── A section is TYPE AND SPACING, and nothing else ─────────
   No background, no border, no shadow, no radius. Deliberately not a box:
   the 26px between sections plus a bold label is what separates them, and
   anything more competes with the tiles.

   NO DIVIDER RULE EITHER. It was allowed as a fallback if the spacing
   alone did not hold, and it does not need to — the label is 15.5/700
   against a 12px muted line, which is already a strong enough start-of-
   section signal on a plain ground. A hairline would have been a fifth
   drawn edge on a page whose whole point is to have one. */
.lmg-sec[b-0ssho6hogy] {
    min-width: 0;
}

/* ── Section head ────────────────────────────────────────────
   Title and descriptor on one baseline, at the reference's metrics. The
   padding below is what makes the head read as the section's label rather
   than as its first row. */
.lmg-sec-head[b-0ssho6hogy] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0 2px 11px;
}

.lmg-sec-title[b-0ssho6hogy] {
    margin: 0;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-item, 15.5px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--motiva-text-primary, #1B1A22);
}

.lmg-sec-note[b-0ssho6hogy] {
    margin: 0;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-subtle, #9B96A8);
}

/* ── Section grid ────────────────────────────────────────────
   AUTO-FIT WITH A CAPPED TRACK. Two requirements pull against each other
   here and this is the line between them:

     · auto-fit collapses the tracks nothing occupies, so a two-tile
       section never leaves a hole where a third card would be. That is
       the behaviour kept from the previous pass;
     · a bare `1fr` max then lets those two tiles absorb the whole row —
       756px each against 500px in the three-tile sections, a 50%
       difference in card width between two sections of one workspace.
       On four separate surfaces that was invisible. On one shared ground
       it reads as two different grids.

   Capping the max at --lmg-tile-max holds the widths together: a track can
   never grow past the cap, so a two-tile section cannot stretch. Measured
   on this hub, every tile in every section then comes out at exactly the
   same width.

   480 IS A CEILING, AND IT HAS TO STAY UNDER THE THREE-UP WIDTH. At a
   normal desktop the workspace's inner box is ~1517px, so three tiles and
   their two gaps resolve to ~497 each. A cap above that — 520 was tried —
   stops three tiles fitting on one line and wraps the third onto a row of
   its own, which costs a whole row of height and breaks the section's
   shape. Staying under it leaves ~50px unused at the end of a three-up
   line (3% of the row); wrapping costs 90. The smaller error wins.

   THE TRADE-OFF, STATED. Sections hold different numbers of tiles, so
   "every card the same width" and "every row ends flush" cannot both be
   true — a two-tile section has to leave the rest of its line empty. Equal
   widths is the one worth having on a SHARED surface: four different card
   widths under one ground reads as four grids, whereas a short row that
   stops early reads as a section that happens to hold two things. It is
   also what the reference does — its own first section draws two cards on
   a three-up line.

   `justify-content: start` because a capped track no longer fills the row:
   a short section's tiles align to the reading start, under their own
   heading, rather than centring in a gap.

   `min(300px, 100%)` on the floor is what stops the track minimum from
   exceeding the container on a narrow viewport; without it the grid
   becomes a horizontal scroller below 300px + padding. It is also why this
   file carries no column breakpoints — the track count follows the
   workspace's own width, so it is right at every viewport rather than at
   the two a media query would name. */
.lmg-sec-grid[b-0ssho6hogy] {
    --lmg-tile-max: 480px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), var(--lmg-tile-max)));
    justify-content: start;
    gap: 12px;
    align-items: stretch;
}

.lmg-sec-grid > *[b-0ssho6hogy] { min-width: 0; }

/* ── Narrow widths ───────────────────────────────────────────
   The grid needs no help — see above. Only the workspace's own inset
   tightens: 22px of side padding is comfortable around three tiles and
   wasteful around one. */
@media (max-width: 800px) {
    .lmg-sections[b-0ssho6hogy] {
        gap: 20px;
        padding: 16px 14px 18px;
    }
}

/* ══════════════════════════════════════════════════════════
   CATEGORY DETAIL PANEL  (shared container)
   ══════════════════════════════════════════════════════════ */

/* The shared Motiva panel — the same recipe MCard, MDataTable, the dashboards
   and the request queues resolve. It had already been pulled back from four
   drifting literals onto the section tokens; the section fill is translucent,
   which is what kept this detail view a shade greyer than the tables it opens
   over. */
.lmg-panel[b-0ssho6hogy] {
    padding: 16px 20px 20px;
    border: 1px solid var(--motiva-panel-border, rgba(109, 40, 245, 0.08));
    border-radius: var(--motiva-panel-radius, 24px);
    background: var(--motiva-panel-surface, #FFFFFF);
    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));
}

/* Panel header row */
.lmg-panel-head[b-0ssho6hogy] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-block-end: 12px;
    border-bottom: 1px solid var(--motiva-border-card, rgba(27, 26, 34, 0.07));
    margin-block-end: 6px;
}

.lmg-panel-title[b-0ssho6hogy] {
    margin: 0;
    font-size: var(--motiva-font-size-h3, 17px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: var(--motiva-letter-spacing-section, -0.02em);
    color: var(--motiva-text-primary, #1B1A22);
}

/* Count / chip next to the section title */
/* .lmg-head-chip was a flat violet pill. It is now .motiva-tag — the shared
   gradient-EDGE treatment — and this rule only trims it to head size. The flat
   violet fill is a regression that keeps reappearing; --motiva-tag-brand-surface
   exists precisely to stop it. */
.lmg-head-tag[b-0ssho6hogy] {
    border: 1px solid transparent;
    color: var(--motiva-text-primary, #1B1A22);
    padding: 4px 10px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: 600;
}

/* Muted note on opposite (left in RTL) side */
.lmg-head-note[b-0ssho6hogy] {
    margin-inline-start: auto;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 400;
    color: #9B96A8;
    white-space: nowrap;
}

/* "+ הוספת משאב" link-button in the resources header */
.lmg-add-link[b-0ssho6hogy] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-inline-start: auto;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid rgba(109, 40, 245, 0.20);
    background: transparent;
    color: var(--motiva-color-violet, #6D28F5);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.12s ease;
}

.lmg-add-link:hover[b-0ssho6hogy] { background: rgba(109, 40, 245, 0.07); }

/* Empty state messages */
.lmg-empty-msg[b-0ssho6hogy] {
    margin: 0;
    padding: 28px 4px;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: 500;
    color: #9B96A8;
    text-align: center;
}

.lmg-empty-link[b-0ssho6hogy] { color: var(--motiva-color-violet, #6D28F5); text-decoration: none; }
.lmg-empty-link:hover[b-0ssho6hogy] { text-decoration: underline; }

/* ── Rows — shared compact row layout ────────────────────── */
.lmg-rows[b-0ssho6hogy] { display: flex; flex-direction: column; }

.lmg-row[b-0ssho6hogy] {
    border-bottom: 1px solid rgba(27, 26, 34, 0.055);
}

.lmg-row:last-child[b-0ssho6hogy] { border-bottom: none; }

/* Main row content — single horizontal line */
.lmg-row-body[b-0ssho6hogy] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 4px;
    min-width: 0;
}

/* Health-bucket colour dot */
.lmg-dot[b-0ssho6hogy] {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

/* Order index for milestones */
.lmg-ms-index[b-0ssho6hogy] {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(27, 26, 34, 0.055);
    color: #6B6779;
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 600;
}

/* Primary + secondary text inside a row */
.lmg-row-text[b-0ssho6hogy] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lmg-row-name[b-0ssho6hogy] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-body, 14.5px);
    font-weight: 700;
    line-height: 1.3;
    color: #1B1A22;
}

.lmg-row-sub[b-0ssho6hogy] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: 500;
    color: #6B6779;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mentor info section (teams row) */
.lmg-mentor-info[b-0ssho6hogy] {
    flex: 0 0 160px;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.lmg-avatar[b-0ssho6hogy] {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(46, 99, 232, 0.12);
    color: #2E63E8;
    font-size: 9.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lmg-mentor-name[b-0ssho6hogy] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: 500;
    color: #6B6779;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status pill (milestones) */
.lmg-status-pill[b-0ssho6hogy] {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.lmg-s-current[b-0ssho6hogy] { background: rgba(109, 40, 245, 0.10); color: #6D28F5; }
.lmg-s-next[b-0ssho6hogy]    { background: rgba(46, 99, 232, 0.10);  color: #2E63E8; }
.lmg-s-done[b-0ssho6hogy]    { background: rgba(15, 168, 194, 0.10); color: #0D9C9A; }
.lmg-s-active[b-0ssho6hogy]  { background: rgba(16, 185, 129, 0.10); color: #059669; }
.lmg-s-planned[b-0ssho6hogy] { background: rgba(27, 26, 34, 0.06);   color: #6B6779; }

/* Date range text (milestones) */
.lmg-date-range[b-0ssho6hogy] {
    flex: 0 0 140px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: 500;
    color: #9B96A8;
    white-space: nowrap;
}

/* Small action button ("שינוי שיוך", "עריכת מועד") */
.lmg-inline-btn[b-0ssho6hogy] {
    flex: 0 0 auto;
    margin-inline-start: auto;
    padding: 7px 14px;
    border: 1px solid rgba(27, 26, 34, 0.10);
    border-radius: 999px;
    background: rgba(27, 26, 34, 0.032);
    color: #4A4657;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 12px);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.lmg-inline-btn:hover[b-0ssho6hogy] {
    background: rgba(109, 40, 245, 0.08);
    border-color: rgba(109, 40, 245, 0.22);
    color: var(--motiva-color-violet, #6D28F5);
}

.lmg-inline-btn:focus-visible[b-0ssho6hogy] {
    outline: 2px solid var(--motiva-color-focus-ring, #6D28F5);
    outline-offset: 2px;
}

/* Expanded editing area inside a row */
.lmg-row-open .lmg-row-body[b-0ssho6hogy] { background: rgba(109, 40, 245, 0.025); border-radius: 10px; }

.lmg-row-expand[b-0ssho6hogy] {
    padding: 14px 6px 18px;
    border-top: 1px solid rgba(27, 26, 34, 0.045);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lmg-edit-loading[b-0ssho6hogy] {
    font-size: var(--motiva-font-size-sm, 13px);
    color: #9B96A8;
    padding: 4px 0;
}

/* ── Teams — mentor chips ─────────────────────────────────── */
.lmg-mentor-current[b-0ssho6hogy],
.lmg-mentor-add[b-0ssho6hogy] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lmg-expand-label[b-0ssho6hogy] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 600;
    color: #9B96A8;
    letter-spacing: 0.02em;
    text-transform: none;
}

.lmg-chips-row[b-0ssho6hogy] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.lmg-mentor-chip[b-0ssho6hogy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 12px;
    border-radius: 999px;
    background: rgba(27, 26, 34, 0.055);
    color: #1B1A22;
    font-size: var(--motiva-font-size-caption, 12.5px);
    font-weight: 500;
}

.lmg-chip-avatar[b-0ssho6hogy] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(109, 40, 245, 0.12);
    color: #6D28F5;
    font-size: 9px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lmg-chip-remove[b-0ssho6hogy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #9B96A8;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    padding: 0;
}

.lmg-chip-remove:hover[b-0ssho6hogy] {
    background: rgba(224, 51, 95, 0.12);
    color: #C42B52;
}

/* Candidate add list */
/* Bounded on both axes: a project with 20 candidate mentors must not push the
   expanded body past the rows it belongs to. */
.lmg-candidates[b-0ssho6hogy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 232px;
    overflow-y: auto;
    overflow-x: hidden;
    /* The page's scrollbar convention: flip the SCROLL BOX to ltr so the bar
       renders on the physical right, and put the direct children back to rtl.
       Nothing inside scrolls sideways, so the x axis is clipped outright. */
    direction: ltr;
}

.lmg-candidates > *[b-0ssho6hogy] { direction: rtl; }

.lmg-expand-empty[b-0ssho6hogy] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    color: #9B96A8;
}

.lmg-candidate[b-0ssho6hogy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #1B1A22;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    text-align: start;
    cursor: pointer;
    transition: background 0.10s ease;
}

.lmg-candidate:hover[b-0ssho6hogy] { background: rgba(109, 40, 245, 0.07); }

.lmg-cand-avatar[b-0ssho6hogy] {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(46, 99, 232, 0.10);
    color: #2E63E8;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lmg-cand-name[b-0ssho6hogy] {
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lmg-cand-role[b-0ssho6hogy] {
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: 500;
    color: #9B96A8;
    white-space: nowrap;
}

.lmg-cand-plus[b-0ssho6hogy] {
    flex: 0 0 auto;
    margin-inline-start: auto;
    color: #9B96A8;
    transition: color 0.12s ease;
}

.lmg-candidate:hover .lmg-cand-plus[b-0ssho6hogy] { color: var(--motiva-color-violet, #6D28F5); }

/* ── Milestones — date editing ───────────────────────────── */
.lmg-date-fields[b-0ssho6hogy] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* A fixed measure so the three fields form one even row and a fourth control
   can never stretch to the body's full width. */
.lmg-date-field[b-0ssho6hogy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 0 168px;
    min-width: 0;
}

.lmg-field-label[b-0ssho6hogy] {
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: 600;
    color: #9B96A8;
}

.lmg-date-input[b-0ssho6hogy] {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid var(--g-border, rgba(27, 26, 34, 0.12));
    border-radius: var(--motiva-radius-sm, 12px);
    background: var(--motiva-surface-solid, #fff);
    color: #1B1A22;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: 500;
    outline: none;
    transition: border-color 0.12s ease;
}

.lmg-date-input:focus[b-0ssho6hogy] {
    border-color: var(--motiva-color-violet, #6D28F5);
    box-shadow: 0 0 0 3px rgba(109, 40, 245, 0.12);
}

.lmg-expand-actions[b-0ssho6hogy] {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Bottom-aligned with the date inputs beside it, not with their labels. */
    padding-block-end: 1px;
}

/* Geometry only. The flat violet fill was the pre-`.motiva-cta` primary; the
   product's primary action is the violet→teal sweep at radius-sm, and the
   shared class owns the fill, the brightness hover/press and the focus ring. */
.lmg-save-btn[b-0ssho6hogy] {
    height: var(--motiva-control-height-sm, 34px);
    padding-inline: 18px;
    border: none;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: 600;
    line-height: 1;
}

.lmg-save-btn:disabled[b-0ssho6hogy] { opacity: 0.55; cursor: default; filter: none; }

.lmg-error-msg[b-0ssho6hogy] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: 500;
    color: #C42B52;
}

/* ── Resources — compact rows with toggles ───────────────── */
.lmg-res-header[b-0ssho6hogy] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(27, 26, 34, 0.06);
    margin-bottom: 2px;
}

.lmg-res-col-main[b-0ssho6hogy] {
    flex: 1 1 0;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: 600;
    color: #9B96A8;
}

.lmg-res-col-toggle[b-0ssho6hogy] {
    flex: 0 0 80px;
    text-align: center;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: 600;
    color: #9B96A8;
}

.lmg-res-row[b-0ssho6hogy] {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Re-use lmg-row-body for res-row but without bottom border-top */
.lmg-res-row .lmg-row-body[b-0ssho6hogy] { display: contents; }

.lmg-res-icon[b-0ssho6hogy] {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(27, 26, 34, 0.045);
    color: #6B6779;
    margin: 14px 0 14px 4px;
}

.lmg-res-row .lmg-row-text[b-0ssho6hogy] { padding: 14px 0; }

.lmg-toggle-cell[b-0ssho6hogy] {
    flex: 0 0 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 0;
}

/* ── Settings — setting rows ─────────────────────────────── */
.lmg-settings-group[b-0ssho6hogy] {
    margin-top: 6px;
}

.lmg-settings-group + .lmg-settings-group[b-0ssho6hogy] {
    margin-top: 4px;
    padding-top: 18px;
    border-top: 1px solid rgba(27, 26, 34, 0.06);
}

.lmg-settings-group-label[b-0ssho6hogy] {
    padding: 10px 4px 6px;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #9B96A8;
    text-transform: uppercase;
}

.lmg-setting-row[b-0ssho6hogy] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(27, 26, 34, 0.05);
}

.lmg-setting-row:last-child[b-0ssho6hogy] { border-bottom: none; }

.lmg-setting-text[b-0ssho6hogy] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lmg-setting-name[b-0ssho6hogy] {
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: 600;
    color: #1B1A22;
}

.lmg-setting-desc[b-0ssho6hogy] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: 400;
    color: #9B96A8;
}

/* ══════════════════════════════════════════════════════════
   TOGGLE SWITCH — shared by resources and settings
   ══════════════════════════════════════════════════════════ */

.lmg-toggle[b-0ssho6hogy] {
    position: relative;
    flex: 0 0 auto;
    width: 36px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(27, 26, 34, 0.15);
    cursor: pointer;
    transition: background 0.18s ease;
}

.lmg-toggle:focus-visible[b-0ssho6hogy] {
    outline: 2px solid var(--motiva-color-focus-ring, #6D28F5);
    outline-offset: 2px;
}

.lmg-toggle-on[b-0ssho6hogy] {
    background: linear-gradient(135deg, #6D28F5, #2E63E8);
}

.lmg-toggle-thumb[b-0ssho6hogy] {
    position: absolute;
    top: 3px;
    /* RTL: thumb starts at right when off */
    inset-inline-end: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(27, 26, 34, 0.20);
    transition: inset-inline-end 0.18s ease, inset-inline-start 0.18s ease;
}

/* When on, thumb moves to the other end */
.lmg-toggle-on .lmg-toggle-thumb[b-0ssho6hogy] {
    inset-inline-end: auto;
    inset-inline-start: 3px;
}


/* ══════════════════════════════════════════════════════════
   ACCORDION LISTS  (teams, milestones)
   The item boundary belongs to MAccordionItem; this only spaces them and
   lays out what goes INSIDE the expanded body.
   ══════════════════════════════════════════════════════════ */

.lmg-acc-list[b-0ssho6hogy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin-block-start: 8px;
}

/* The expanded body's own layout — deliberately not the head's columns, and
   width-capped so date fields and mentor chips do not stretch across a 1440px
   desktop with nothing between them. */
/* THE BODY IS A PANEL, NOT A COLUMN OF CONTROLS.
   Capping the content at a fixed measure inside a full-width body just moved
   the empty space inside the white surface — a ~400px blank half of the very
   panel that is supposed to read as "this belongs to that row". Each body
   instead lays its own content out to fill the width it has, and the two
   layouts below are the only two shapes this page has. */
.lmg-expand-inner[b-0ssho6hogy] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* Teams — two peers, side by side: what is assigned now, and what can be
   added. Equal tracks, so neither column is the leftover of the other. */
.lmg-expand-teams[b-0ssho6hogy] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 14px 20px;
}

/* Milestones — the three dates and the control that saves them are one
   cluster on one row, not a stack with the button orphaned under it.
   The body is capped to that cluster (the teams body fills its width with two
   real columns and is not), so a 520px form does not sit inside a 960px white
   panel with an empty half — the item's open tint carries the rest, which is
   what makes the panel read as attached to the row above it. */
.lmg-acc-list[b-0ssho6hogy]  .m-acc-body:has(.lmg-expand-ms) {
    /* Wide enough for the three fields AND the save control on one line
       (3 x 168 + gaps + the 34px pill), so the cluster never breaks in two. */
    max-width: 690px;
}

.lmg-expand-ms[b-0ssho6hogy] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

@media (max-width: 760px) {
    .lmg-expand-teams[b-0ssho6hogy] { grid-template-columns: minmax(0, 1fr); }
}
/* /Pages/Management/Management.razor.rz.scp.css */
/* ============================================================
   Management (/management/admin) — ניהול המערכת
   Prefix: mgh-

   Visual source:
       Pages/Management/LecturerManagementPage.razor.css (.lmg-title-row / .lmg-h1)
       — the sibling ניהול page, so the two title rows are identical.

   Page layout:
       title row (14px top pad) + registration link at the end
       ↓  22px
       grouped card grid (ManagementCardsGrid)
   ============================================================ */

/* ── Page shell ──────────────────────────────────────────── */
.mgh-page[b-0bkyna6rhv] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-block-end: 48px;
    min-width: 0;
}

/* ── Title row ───────────────────────────────────────────── */
.mgh-title-row[b-0bkyna6rhv] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 14px 4px 0;
}

.mgh-title-block[b-0bkyna6rhv] {
    min-width: 0;
}

/* PAGE TITLE — the shared h1 step. Values live in motiva-tokens.css; never restate them here. */
.mgh-h1[b-0bkyna6rhv] {
    margin: 0;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-h1, 38px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: var(--motiva-line-height-tight, 1.1);
    letter-spacing: var(--motiva-letter-spacing-page, -0.035em);
    color: var(--motiva-text-primary, #1B1A22);
}

/* ── Registration link ───────────────────────────────────── */
/* Sits on the title row's baseline rather than in a banner of its own, so it
   reads as a utility belonging to this page and not as an alert. */
.mgh-reg[b-0bkyna6rhv] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 9px 10px 9px 16px;
    /* Panel fill and edge; the pill radius and its flatter shadow stay,
       because this is a utility strip on the title row rather than a card. */
    border: 1px solid var(--motiva-panel-border, rgba(109, 40, 245, 0.08));
    border-radius: var(--motiva-radius-full, 9999px);
    background: var(--motiva-panel-surface, #FFFFFF);
    box-shadow: var(--motiva-shadow-pill, 0 1px 2px rgba(27, 26, 34, 0.08));
}

.mgh-reg-text[b-0bkyna6rhv] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.mgh-reg-label[b-0bkyna6rhv] {
    flex-shrink: 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: 600;
    line-height: 1;
    color: var(--motiva-text-muted, #6B6779);
}

.mgh-reg-url[b-0bkyna6rhv] {
    min-width: 0;
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--motiva-text-subtle, #9B96A8);
}

.mgh-reg-btn[b-0bkyna6rhv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: var(--motiva-control-height-sm, 34px);
    padding-inline: 16px;
    border: none;
    border-radius: var(--motiva-radius-full, 9999px);
    background: var(--motiva-gradient-signature,
                linear-gradient(to left, #6D28F5, #2E63E8 60%, #0FA8C2));
    color: #fff;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 12.5px);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: filter 0.12s ease;
}

.mgh-reg-btn:hover[b-0bkyna6rhv]  { filter: brightness(1.08); }
.mgh-reg-btn:active[b-0bkyna6rhv] { filter: brightness(0.94); }

.mgh-reg-btn:focus-visible[b-0bkyna6rhv] {
    outline: 2px solid var(--motiva-color-focus-ring, rgba(109, 40, 245, 0.35));
    outline-offset: 2px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .mgh-title-row[b-0bkyna6rhv]  { align-items: flex-start; }
    .mgh-reg[b-0bkyna6rhv]        { width: 100%; }
    .mgh-reg-text[b-0bkyna6rhv]   { flex: 1; }
    .mgh-reg-url[b-0bkyna6rhv]    { max-width: none; }
}
/* /Pages/Management/ManagementCardsGrid.razor.rz.scp.css */
/* ============================================================
   ManagementCardsGrid — /management/admin
   Prefix: mgh-

   The card SURFACE comes from MCard (.motiva-final .m-card): the shared
   Motiva panel — solid white, the violet hairline, --motiva-panel-radius and
   the panel drop — plus the interactive hover that deepens the edge and the
   drop instead of moving the card. Nothing here re-declares any of that;
   this file only lays out the grid and the content inside each card.

   MCard's root carries ITS OWN scope attribute, not this component's, so the
   two rules that reach it are written with ::deep from .mgh-grid (which does
   carry this file's scope). Everything else is markup written in this file
   and is styled directly.
   ============================================================ */

/* ── Groups ──────────────────────────────────────────────── */
.mgh-groups[b-atckcmcwd2] {
    display: flex;
    flex-direction: column;
    gap: 26px;
    min-width: 0;
}

.mgh-group[b-atckcmcwd2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* ── Grid ────────────────────────────────────────────────── */
.mgh-grid[b-atckcmcwd2] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

/* MCard root — reached through ::deep because it belongs to MCard's scope.
   Fill="true" already makes it a full-height flex column; this only sets the
   rhythm between the icon row, the title and the description. */
.mgh-grid[b-atckcmcwd2]  .mgh-card {
    gap: 9px;
    cursor: pointer;
}

.mgh-grid[b-atckcmcwd2]  .mgh-card:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring, rgba(109, 40, 245, 0.35));
    outline-offset: 2px;
}

/* ── Card content ────────────────────────────────────────── */
.mgh-card-top[b-atckcmcwd2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

/* Icon chip. The glyph is stroked with the shared #motivaIconGradient paint
   server; the chip behind it is the flat brand tint, never a gradient fill. */
.mgh-card-icon[b-atckcmcwd2] {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--motiva-radius-chip, 11px);
    background: var(--motiva-color-brand-bg, rgba(109, 40, 245, 0.09));
}

/* RTL: a left-pointing chevron reads as "forward". */
.mgh-card-chevron[b-atckcmcwd2] {
    display: inline-flex;
    align-items: center;
    margin-top: 3px;
    color: var(--motiva-text-faint, #B4B0BF);
    transition: color 0.12s ease, transform 0.12s ease;
}

.mgh-grid[b-atckcmcwd2]  .mgh-card:hover .mgh-card-chevron {
    color: var(--motiva-color-violet, #6D28F5);
    transform: translateX(-3px);
}

.mgh-card-title[b-atckcmcwd2] {
    margin: 0;
    font-size: var(--motiva-font-size-item, 16px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--motiva-text-primary, #1B1A22);
}

.mgh-card-desc[b-atckcmcwd2] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: 400;
    line-height: 1.45;
    color: var(--motiva-text-muted, #6B6779);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
    .mgh-grid[b-atckcmcwd2] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .mgh-grid[b-atckcmcwd2] { grid-template-columns: minmax(0, 1fr); }
}
/* /Pages/Management/ManagementTopBar.razor.rz.scp.css */
/* =========================================================
   ManagementTopBar — Scoped styles
   ========================================================= */

.topbar[b-fiqk1agrnl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: var(--g-bg-surface);
    border-radius: var(--g-radius-md);
    box-shadow: var(--g-shadow-sm);
    margin-bottom: 16px;
    flex-shrink: 0;
}

.topbar-title[b-fiqk1agrnl] {
    font-size: var(--g-font-size-xl);
    font-weight: 700;
    color: var(--g-text-primary);
    margin: 0;
    letter-spacing: -0.3px;
}

/* ---- Search ---- */

.topbar-search[b-fiqk1agrnl] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input[b-fiqk1agrnl] {
    width: 270px;
    padding: 9px 16px 9px 40px;  /* left padding reserves space for icon */
    border: 1.5px solid var(--g-border);
    border-radius: var(--g-radius-full);
    font-size: var(--g-font-size-md);
    font-family: var(--g-font-base);
    color: var(--g-text-primary);
    background: var(--g-bg-input);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    direction: rtl;
}

.search-input:focus[b-fiqk1agrnl] {
    border-color: var(--g-accent);
    background: var(--g-bg-surface);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.search-input[b-fiqk1agrnl]::placeholder {
    color: var(--g-text-muted);
}

/* Icon sits on the left side of the input (end in RTL) */
.search-icon[b-fiqk1agrnl] {
    position: absolute;
    left: 14px;
    color: var(--g-text-muted);
    font-size: 13px;
    pointer-events: none;
}
/* /Pages/Management/Milestones/MilestonesManagement.razor.rz.scp.css */
/* ============================================================
   MilestonesManagement — ניהול אבני דרך (Admin)
   Prefix: ms-

   Visual source:
       design/design-system/Motiva Admin Milestones.dc.html
       Client/Pages/Management/Users/UsersManagement.razor.css

   This and TaskTemplates (tt-) are deliberately the same stylesheet applied
   to two different sets of cells: same page shell, header rhythm, strip,
   toolbar, popup-menu recipe, table treatment and modal. They are two views
   of one relationship and must not drift into two products.

   Design tokens: motiva-tokens.css. The page renders inside the canvas
   shell (.motiva .motiva-final .motiva-lecturer), so every --motiva-*
   token already resolves to the finished design's value — 18px card
   radius, 38px controls, the warm ink ramp, violet/teal/rose. The var()
   fallbacks exist only so the page still renders sanely outside it.

   The previous version of this file was written against the legacy --g-*
   ramp, which inside .motiva-final yields the right colours with the wrong
   geometry. That is why it is replaced rather than patched.

   Layout:
       header (eyebrow / title + subtitle · new milestone)
       ↓ 14px
       strip  (explainer · 3 summary pills)
       ↓ 14px
       toolbar (search · 2 filter pills · clear · count)
       ↓ 14px
       MDataTable, full canvas width
   ============================================================ */

/* ── Page shell ────────────────────────────────────────────── */
.ms-page[b-dnqeeyqwro] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
    padding-block-end: 40px;
}

/* ── Header ────────────────────────────────────────────────── */
/* The page header is now <MPageHeaderCard> (shared .motiva-panel surface):
   MAdminBack in Leading, MInfoTip + MSummaryTag in TitleTrailing, the "new
   milestone" CTA in Actions. The old floating .ms-head / .ms-head-main /
   .ms-head-line / .ms-h1 / .ms-head-actions rules are gone. */

.ms-subtitle[b-dnqeeyqwro] {
    margin: 0;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
}

/* ── Buttons ─────────────────────────────────────────────────
   The primary's gradient, radius, hover and press come from the shared
   .motiva-cta in motiva-base.css — only geometry lives here. */
.ms-btn-primary[b-dnqeeyqwro] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    padding: 0 16px;
    height: var(--motiva-control-height-md, 38px);
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.ms-btn-primary--lg[b-dnqeeyqwro] { padding: 0 18px; font-size: var(--motiva-font-size-control, 13.5px); }
.ms-btn-primary:disabled[b-dnqeeyqwro] { opacity: 0.55; cursor: default; }

.ms-btn-ghost[b-dnqeeyqwro] {
    padding: 0 14px;
    height: var(--motiva-control-height-md, 38px);
    border: 0;
    background: none;
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-secondary, #5B5568);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.ms-btn-ghost:hover[b-dnqeeyqwro] { background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035)); }
.ms-btn-ghost:disabled[b-dnqeeyqwro] { opacity: 0.5; cursor: default; }

.ms-btn-primary:focus-visible[b-dnqeeyqwro],
.ms-btn-ghost:focus-visible[b-dnqeeyqwro] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* A text action inside the modal — "משימה חדשה". Violet, no chrome: it
   leaves the page, so it must not read as a form control. */
.ms-link[b-dnqeeyqwro] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-inline-start: auto;
    padding: 4px 2px;
    border: 0;
    background: none;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-color-violet, #4F46E5);
    white-space: nowrap;
    cursor: pointer;
}

.ms-link:hover[b-dnqeeyqwro] { text-decoration: underline; text-underline-offset: 3px; }

.ms-link:focus-visible[b-dnqeeyqwro] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
    border-radius: 4px;
}

/* The `ms-strip` row and its three-pill `ms-stat*` recipe used to live
   here. The page's counts are now one MSummaryTag on the header line, so
   every rule that painted those separate pills is dead. */

/* ── Popup menus — one recipe, two callers ─────────────────── */
.ms-filter[b-dnqeeyqwro],
.ms-actions[b-dnqeeyqwro] {
    position: relative;
    display: flex;
}

.ms-menu[b-dnqeeyqwro] {
    position: absolute;
    top: calc(100% + 6px);
    z-index: var(--motiva-z-dropdown, 500);
    min-width: 186px;
    padding: 6px;
    border-radius: var(--motiva-radius-md, 14px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    box-shadow: var(--motiva-shadow-md, 0 16px 36px rgba(30, 20, 60, 0.14));
}

/* The filter pills sit mid-toolbar, so their menu hangs from the reading
   start. Logical, so an LTR build needs no second rule. */
.ms-menu--filter[b-dnqeeyqwro] { inset-inline-start: 0; }

/* The kebab sits at the row's INLINE END — the far left in RTL — so its
   menu anchors its own end edge there and grows inward. `inset-inline-start`
   would push its width off the viewport and give the page a horizontal
   scrollbar. */
.ms-menu--row[b-dnqeeyqwro] {
    inset-inline-end: 0;
    top: calc(100% + 4px);
    min-width: 190px;
}

.ms-menu-item[b-dnqeeyqwro] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    background: none;
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.ms-menu-item:hover:not(:disabled)[b-dnqeeyqwro] { background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035)); }

.ms-menu-item:focus-visible[b-dnqeeyqwro] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: -2px;
}

.ms-menu-item:disabled[b-dnqeeyqwro] { color: var(--motiva-text-subtle, #B7B2C2); cursor: default; }
.ms-menu-item svg[b-dnqeeyqwro] { flex: 0 0 auto; color: var(--motiva-text-muted, #8B8698); }
.ms-menu-item-label[b-dnqeeyqwro] { flex: 1 1 auto; }

.ms-menu-item--on[b-dnqeeyqwro] { font-weight: var(--motiva-font-weight-semibold, 600); }
.ms-menu-check[b-dnqeeyqwro] { color: var(--motiva-color-violet, #4F46E5); }

/* Rose for the one destructive item. */
.ms-menu-item--danger[b-dnqeeyqwro] { color: var(--motiva-color-rose-ink, #B23256); }
.ms-menu-item--danger svg[b-dnqeeyqwro] { color: currentColor; }

.ms-menu-item--danger:hover:not(:disabled)[b-dnqeeyqwro] {
    background: color-mix(in srgb, var(--motiva-color-rose, #D93864) 8%, transparent);
}

/* "בשימוש" beside מחיקה. The action stays available — the dialog explains
   why it will be refused — but the row says so before the click. */
.ms-menu-item-note[b-dnqeeyqwro] {
    margin-inline-start: auto;
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #8B8698);
}

.ms-menu-sep[b-dnqeeyqwro] {
    height: 1px;
    margin: 5px 8px;
    background: var(--motiva-border-subtle, #F0EEF9);
}

/* ── Toolbar ─────────────────────────────────────────────────
   align-items: stretch so the filter pills adopt whatever height
   MSearchField resolves to — the row is aligned by construction rather
   than by a hardcoded number that silently drifts. */
.ms-toolbar[b-dnqeeyqwro] {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 2px;
}

/* ::deep because MSearchField renders its own root, which carries ITS
   isolation attribute and not this page's. A flex-basis alone leaves the
   wrapper at ~190px — the width has to be stated. */
.ms-toolbar[b-dnqeeyqwro]  .ms-search {
    flex: 1 1 320px;
    max-width: 520px;
}

.ms-filter-btn[b-dnqeeyqwro] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 15px;
    border-radius: var(--motiva-radius-full, 999px);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    color: var(--motiva-text-primary, #1A1820);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.ms-filter-btn:hover[b-dnqeeyqwro] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 22%, transparent);
}

.ms-filter-btn:focus-visible[b-dnqeeyqwro] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* Applied filter — the brand EDGE, not a violet tint. The prototype draws
   a violet wash here; in this system that reads as a pressed button and
   puts a second accent on a toolbar that already has one.
   --motiva-tag-brand-surface only shows if the border is transparent,
   which is why border-color is reset. Geometry is untouched, so nothing
   in the row moves when a filter becomes active. */
.ms-filter-btn--on[b-dnqeeyqwro] {
    background: var(--motiva-tag-brand-surface);
    border-color: transparent;
    color: var(--motiva-text-primary, #1A1820);
}

.ms-filter-btn--on:hover[b-dnqeeyqwro] {
    border-color: transparent;
    filter: brightness(0.99) saturate(1.08);
}

.ms-filter-btn--on .ms-filter-name[b-dnqeeyqwro] { color: var(--motiva-text-muted, #8B8698); }

.ms-filter-name[b-dnqeeyqwro] {
    font-size: var(--motiva-font-size-control, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #8B8698);
}

.ms-filter-value[b-dnqeeyqwro] {
    font-size: var(--motiva-font-size-control, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
}

.ms-filter-chev[b-dnqeeyqwro] {
    color: var(--motiva-text-muted, #8B8698);
    transition: transform var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.ms-filter-chev--open[b-dnqeeyqwro] { transform: rotate(180deg); }

.ms-clear[b-dnqeeyqwro] {
    align-self: center;
    padding: 8px 4px;
    border: 0;
    background: none;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-color-violet, #4F46E5);
    white-space: nowrap;
    cursor: pointer;
}

.ms-clear:hover[b-dnqeeyqwro] { text-decoration: underline; }

.ms-clear:focus-visible[b-dnqeeyqwro] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
    border-radius: 4px;
}

.ms-result[b-dnqeeyqwro] {
    align-self: center;
    margin-inline-start: auto;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
}

/* ============================================================
   TABLE
   Surface, head rhythm, dividers and hover come from MDataTable.
   ============================================================ */

.ms-col-num[b-dnqeeyqwro]     { width: 52px; }
.ms-col-type[b-dnqeeyqwro]    { width: 118px; }
.ms-col-dates[b-dnqeeyqwro]   { width: 122px; }
.ms-col-tasks[b-dnqeeyqwro]   { width: 82px; }
.ms-col-req[b-dnqeeyqwro]     { width: 86px; }
.ms-col-status[b-dnqeeyqwro]  { width: 96px; }
.ms-col-actions[b-dnqeeyqwro] { width: 48px; }

/* An inactive template stays legible but recedes — it is still library
   content, just not offered to new cycles. */
.ms-row--off[b-dnqeeyqwro] { opacity: 0.62; }

/* The order number. Quiet by design: unlike the cycle program, the library's
   order is a sorting hint rather than a sequence anyone walks, so it does
   not get the gradient disc the Cycle Detail rows use. */
.ms-num[b-dnqeeyqwro] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
    font-variant-numeric: tabular-nums;
}

.ms-cell-name[b-dnqeeyqwro] { min-width: 0; }

.ms-name[b-dnqeeyqwro] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.25;
    color: var(--motiva-text-primary, #1A1820);
}

.ms-desc[b-dnqeeyqwro] {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    color: var(--motiva-text-muted, #8B8698);
}

/* ── Project-type chip ───────────────────────────────────────
   CATEGORICAL, NOT SEMANTIC. A project type means neither progress nor
   attention, so these stay low-alpha tints and rose is not used here at
   all. "שניהם" takes the brand EDGE rather than a fourth invented hue. */
.ms-type[b-dnqeeyqwro] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-full, 999px);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
}

.ms-type-dot[b-dnqeeyqwro] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: currentColor;
}

.ms-type--tech[b-dnqeeyqwro] {
    background: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 8%, transparent);
    color: var(--motiva-color-violet, #4F46E5);
}

.ms-type--method[b-dnqeeyqwro] {
    background: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 10%, transparent);
    /* The teal token is too light for 11px text on its own tint. */
    color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 82%, #000);
}

.ms-type--both[b-dnqeeyqwro] {
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary, #1A1820);
}

/* The "both" dot cannot be currentColor — the chip's ink is neutral. */
.ms-type--both .ms-type-dot[b-dnqeeyqwro] { background: var(--motiva-color-violet, #4F46E5); }

/* ── Values ──────────────────────────────────────────────── */
.ms-cell-dates[b-dnqeeyqwro] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.2;
    white-space: nowrap;
    color: var(--motiva-text-secondary, #5B5568);
}

.ms-cell-num[b-dnqeeyqwro] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
    font-variant-numeric: tabular-nums;
}

.ms-cell-empty[b-dnqeeyqwro] {
    color: var(--motiva-text-subtle, #B7B2C2);
    font-weight: var(--motiva-font-weight-medium, 500);
}

/* ── Required / optional ─────────────────────────────────────
   Violet for חובה, quiet grey for רשות. Required is a property of the
   curriculum, not a warning, so it never takes rose. */
.ms-req-yes[b-dnqeeyqwro] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-color-violet, #4F46E5);
    white-space: nowrap;
}

.ms-req-no[b-dnqeeyqwro] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
}

/* ── Status ──────────────────────────────────────────────────
   Dot + text, no filled pill — the same treatment the Users, Cycles and
   Cycle Detail tables use. Inactive is neutral, never rose: retiring a
   template is a normal editorial act, not a fault. */
.ms-status[b-dnqeeyqwro] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--motiva-font-size-caption, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
}

.ms-status-dot[b-dnqeeyqwro] {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.ms-status--on[b-dnqeeyqwro]  { color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 88%, #000); }
.ms-status--off[b-dnqeeyqwro] { color: var(--motiva-text-muted, #8B8698); }

/* ── Row actions ───────────────────────────────────────────── */
.ms-cell-actions[b-dnqeeyqwro] { position: relative; }

/* An open menu has to paint over the rows BELOW it. Every actions cell is
   positioned, so without this the next row's cell — later in tree order —
   paints on top of the popup. */
.ms-page tr.m-dt-row-active .ms-cell-actions[b-dnqeeyqwro] { z-index: 20; }

.ms-actions[b-dnqeeyqwro] { justify-content: flex-end; }

.ms-kebab[b-dnqeeyqwro] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--motiva-text-muted, #8B8698);
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.ms-kebab:hover[b-dnqeeyqwro],
.ms-kebab--on[b-dnqeeyqwro] {
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035));
    color: var(--motiva-text-primary, #1A1820);
}

.ms-kebab:focus-visible[b-dnqeeyqwro] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 1px;
}

.ms-sr[b-dnqeeyqwro] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   MODAL
   ============================================================ */

.ms-modal-overlay[b-dnqeeyqwro] {
    position: fixed;
    inset: 0;
    z-index: var(--motiva-z-modal, 1000);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(26, 24, 32, 0.36);
    backdrop-filter: blur(2px);
}

.ms-modal-box[b-dnqeeyqwro] {
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    border-radius: var(--motiva-radius-xl, 24px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    box-shadow: var(--motiva-shadow-lg, 0 32px 70px rgba(30, 20, 60, 0.28));
    overflow: hidden;
}

.ms-modal-box--lg[b-dnqeeyqwro] { max-width: 660px; }

.ms-modal-header[b-dnqeeyqwro] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 22px 14px;
}

/* A tint of the sweep, not the sweep itself — a full gradient on a 38px
   chip reads as a button rather than an emblem. */
.ms-modal-glyph[b-dnqeeyqwro] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--motiva-radius-sm, 10px);
    background:
        linear-gradient(140deg,
            color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 13%, transparent),
            color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 11%, transparent)),
        var(--motiva-surface-primary, #fff);
    color: var(--motiva-color-violet, #4F46E5);
}

.ms-modal-titles[b-dnqeeyqwro] { min-width: 0; flex: 1 1 auto; }

.ms-modal-title[b-dnqeeyqwro] {
    font-size: var(--motiva-font-size-h2, 18px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.3;
    color: var(--motiva-text-primary, #1A1820);
}

.ms-modal-subtitle[b-dnqeeyqwro] {
    margin-top: 4px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.3;
    color: var(--motiva-text-muted, #8B8698);
}

.ms-modal-close[b-dnqeeyqwro] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--motiva-text-muted, #8B8698);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.ms-modal-close:hover[b-dnqeeyqwro] {
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035));
    color: var(--motiva-text-primary, #1A1820);
}

.ms-modal-body[b-dnqeeyqwro] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 22px 18px;
    overflow-y: auto;
}

/* Modal-body children never shrink.
 *
 * The body is a scrolling COLUMN flex container, and a flex item's automatic
 * minimum size resolves to 0 as soon as it carries `overflow: hidden` — which
 * .ms-assoc-list does, to clip its rows to the rounded corner. The result was a
 * two-row list crushed from 89px to 2px while its content was still in the DOM:
 * present to a screen reader, invisible to everyone else.
 *
 * Declared on the child axis rather than on each element so the next section
 * added to this modal cannot reintroduce the same bug. The body keeps its own
 * scrollbar; the children keep their natural heights. */
.ms-modal-body > *[b-dnqeeyqwro] { flex-shrink: 0; }

.ms-modal-footer[b-dnqeeyqwro] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 22px 20px;
    border-top: 1px solid var(--motiva-border-subtle, #F0EEF9);
}

.ms-footer-note[b-dnqeeyqwro] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
}

.ms-footer-actions[b-dnqeeyqwro] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
}

/* ── Form controls ───────────────────────────────────────── */

/* The reference's small group label. It separates the modal's sections
   without five rules across it. */
.ms-form-section[b-dnqeeyqwro] {
    margin: 10px 0 -2px;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1;
    letter-spacing: 0.03em;
    color: var(--motiva-text-muted, #8B8698);
}

.ms-form-section:first-child[b-dnqeeyqwro] { margin-top: 4px; }
.ms-form-section--inline[b-dnqeeyqwro] { margin: 0; }

.ms-form-section-note[b-dnqeeyqwro] {
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-subtle, #B7B2C2);
}

.ms-form-grid[b-dnqeeyqwro] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Name takes the room; the order field needs only its digits. */
.ms-form-grid--name[b-dnqeeyqwro] { grid-template-columns: 1fr 110px; }

.ms-form-field[b-dnqeeyqwro] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ms-form-label[b-dnqeeyqwro] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
}

.ms-req[b-dnqeeyqwro] { color: var(--motiva-color-rose-ink, #B23256); }

.ms-form-input[b-dnqeeyqwro],
.ms-form-textarea[b-dnqeeyqwro] {
    width: 100%;
    box-sizing: border-box;
    padding: 0 12px;
    height: var(--motiva-control-height-md, 38px);
    border-radius: var(--motiva-radius-sm, 10px);
    background: var(--motiva-surface-secondary, #FAF9F7);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-primary, #1A1820);
    transition: border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.ms-form-input--num[b-dnqeeyqwro] {
    text-align: center;
    font-weight: var(--motiva-font-weight-semibold, 600);
    font-variant-numeric: tabular-nums;
}

.ms-form-textarea[b-dnqeeyqwro] {
    height: auto;
    min-height: 74px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
}

.ms-form-input[b-dnqeeyqwro]::placeholder,
.ms-form-textarea[b-dnqeeyqwro]::placeholder { color: var(--motiva-text-subtle, #B7B2C2); }

.ms-form-input:focus[b-dnqeeyqwro],
.ms-form-textarea:focus[b-dnqeeyqwro] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: -1px;
    border-color: var(--motiva-color-focus-ring, #4F46E5);
}

/* ── Type choice — three bordered cards ────────────────────── */
.ms-choice-grid[b-dnqeeyqwro] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.ms-choice[b-dnqeeyqwro] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    border-radius: var(--motiva-radius-md, 14px);
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
    border: 1.5px solid var(--motiva-border-card, #EFEDF4);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    color: var(--motiva-text-primary, #1A1820);
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.ms-choice:hover[b-dnqeeyqwro] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 26%, transparent);
}

/* The picked card is one of the few places a violet wash is right: it is a
   selected control, not a status, and the border carries the commitment. */
.ms-choice--on[b-dnqeeyqwro] {
    background: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 7%, transparent);
    border-color: var(--motiva-color-violet, #4F46E5);
}

.ms-choice:focus-visible[b-dnqeeyqwro] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

.ms-choice-label[b-dnqeeyqwro] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
}

.ms-choice-dot[b-dnqeeyqwro] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.ms-choice-dot--tech[b-dnqeeyqwro]   { background: var(--motiva-color-violet, #4F46E5); }
.ms-choice-dot--method[b-dnqeeyqwro] { background: var(--motiva-color-teal, #0D9C9A); }

/* At 9px the sweep still resolves, and this is the "both" case — which is
   exactly what the sweep means. */
.ms-choice-dot--both[b-dnqeeyqwro] {
    background: linear-gradient(120deg,
        var(--motiva-color-violet, #4F46E5),
        var(--motiva-color-teal, #0D9C9A));
}

/* ── Switch rows ───────────────────────────────────────────── */
.ms-switch-row[b-dnqeeyqwro] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--motiva-radius-md, 14px);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
}

.ms-switch-copy[b-dnqeeyqwro] { min-width: 0; flex: 1 1 auto; }

.ms-switch-title[b-dnqeeyqwro] {
    display: block;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
}

.ms-switch-note[b-dnqeeyqwro] {
    display: block;
    margin-top: 4px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    color: var(--motiva-text-muted, #8B8698);
}

/* ============================================================
   ASSOCIATED TASK TEMPLATES
   The Milestone → Task relationship, edited in place. Every control here
   writes through to TaskTemplates.MilestoneTemplateId immediately.
   ============================================================ */

.ms-assoc-head[b-dnqeeyqwro] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.ms-assoc-count[b-dnqeeyqwro] {
    font-size: var(--motiva-font-size-count, 11px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-text-subtle, #B7B2C2);
}

.ms-assoc-list[b-dnqeeyqwro] {
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    border-radius: var(--motiva-radius-md, 14px);
    overflow: hidden;
}

.ms-assoc-row[b-dnqeeyqwro] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}

.ms-assoc-row + .ms-assoc-row[b-dnqeeyqwro] { border-top: 1px solid var(--motiva-border-subtle, #F0EEF9); }

.ms-assoc-name[b-dnqeeyqwro] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.3;
    color: var(--motiva-text-primary, #1A1820);
}

/* Submission marker. Violet rather than a fourth hue — a submission is a
   property of the task, and the palette already spends teal on "active". */
.ms-assoc-flag[b-dnqeeyqwro] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-color-violet, #4F46E5);
    white-space: nowrap;
}

.ms-assoc-muted[b-dnqeeyqwro] {
    flex: 0 0 auto;
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
}

/* Detach. Quiet until hovered, then rose — it is a removal, even though
   nothing is destroyed by it. */
.ms-assoc-remove[b-dnqeeyqwro] {
    flex: 0 0 auto;
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--motiva-text-muted, #8B8698);
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.ms-assoc-remove:hover:not(:disabled)[b-dnqeeyqwro] {
    background: color-mix(in srgb, var(--motiva-color-rose, #D93864) 9%, transparent);
    color: var(--motiva-color-rose-ink, #B23256);
}

.ms-assoc-remove:disabled[b-dnqeeyqwro] { opacity: 0.4; cursor: default; }

.ms-assoc-remove:focus-visible[b-dnqeeyqwro] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 1px;
}

/* Empty state — dashed, so it reads as a slot waiting to be filled rather
   than a failure. */
.ms-assoc-empty[b-dnqeeyqwro] {
    margin: 0;
    padding: 14px;
    border: 1px dashed var(--motiva-border-strong, #DCD8E6);
    border-radius: var(--motiva-radius-md, 14px);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.4;
    color: var(--motiva-text-muted, #8B8698);
    text-align: center;
}

.ms-assoc-picker[b-dnqeeyqwro] { position: relative; }

.ms-assoc-search[b-dnqeeyqwro] {
    display: flex;
    align-items: center;
    gap: 9px;
    height: var(--motiva-control-height-md, 38px);
    padding: 0 12px;
    border-radius: var(--motiva-radius-sm, 10px);
    background: var(--motiva-surface-secondary, #FAF9F7);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    color: var(--motiva-text-muted, #8B8698);
    transition: border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.ms-assoc-search:focus-within[b-dnqeeyqwro] { border-color: var(--motiva-color-focus-ring, #4F46E5); }

.ms-assoc-input[b-dnqeeyqwro] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-primary, #1A1820);
}

.ms-assoc-input[b-dnqeeyqwro]::placeholder { color: var(--motiva-text-subtle, #B7B2C2); }

/* Opens UPWARD. The picker sits low in a scrolling modal body, and a
   downward menu would be clipped by the body's own overflow. */
.ms-assoc-menu[b-dnqeeyqwro] {
    position: absolute;
    bottom: calc(100% + 6px);
    inset-inline: 0;
    z-index: var(--motiva-z-dropdown, 500);
    max-height: 200px;
    overflow-y: auto;
    padding: 6px;
    border-radius: var(--motiva-radius-md, 14px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    box-shadow: var(--motiva-shadow-md, 0 16px 36px rgba(30, 20, 60, 0.14));
}

.ms-assoc-option[b-dnqeeyqwro] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    background: none;
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    text-align: start;
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.ms-assoc-option:hover:not(:disabled)[b-dnqeeyqwro] { background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035)); }
.ms-assoc-option:disabled[b-dnqeeyqwro] { opacity: 0.5; cursor: default; }

.ms-assoc-option:focus-visible[b-dnqeeyqwro] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: -2px;
}

.ms-assoc-option-name[b-dnqeeyqwro] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.2;
    color: var(--motiva-text-primary, #1A1820);
}

.ms-assoc-option-note[b-dnqeeyqwro] {
    margin-inline-start: auto;
    flex: 0 0 auto;
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
}

/* Picking this option MOVES the task off another milestone. Violet, so the
   consequence is visible before the click rather than after it. */
.ms-assoc-option-note--move[b-dnqeeyqwro] { color: var(--motiva-color-violet, #4F46E5); }

.ms-assoc-menu-empty[b-dnqeeyqwro] {
    margin: 0;
    padding: 12px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #8B8698);
    text-align: center;
}

.ms-assoc-hint[b-dnqeeyqwro] {
    margin: 0;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.4;
    color: var(--motiva-text-muted, #8B8698);
}

/* ── Inline feedback ─────────────────────────────────────────
   Rose for the failure, quiet paper for the advisory — the same roles the
   rest of the page uses. */
.ms-form-note[b-dnqeeyqwro],
.ms-form-error[b-dnqeeyqwro] {
    padding: 10px 12px;
    border-radius: var(--motiva-radius-sm, 10px);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.45;
}

.ms-form-note[b-dnqeeyqwro] {
    margin: 0;
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
    color: var(--motiva-text-secondary, #5B5568);
}

.ms-form-error[b-dnqeeyqwro] {
    background: color-mix(in srgb, var(--motiva-color-rose, #D93864) 8%, transparent);
    color: var(--motiva-color-rose-ink, #B23256);
}

.ms-spinner[b-dnqeeyqwro] {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ms-spin-b-dnqeeyqwro 0.7s linear infinite;
}

@keyframes ms-spin-b-dnqeeyqwro { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .ms-spinner[b-dnqeeyqwro] { animation-duration: 2.4s; }
    .ms-filter-chev[b-dnqeeyqwro],
    .ms-menu-item[b-dnqeeyqwro],
    .ms-choice[b-dnqeeyqwro],
    .ms-assoc-option[b-dnqeeyqwro],
    .ms-assoc-remove[b-dnqeeyqwro],
    .ms-kebab[b-dnqeeyqwro] { transition: none; }
}

/* ── Narrow Management viewports ─────────────────────────────
   The table's own scroller takes over below ~1000px (MDataTable). Here
   the page furniture stops trying to hold single lines. */
@media (max-width: 900px) {
    .ms-stats[b-dnqeeyqwro] { margin-inline-start: 0; }

    .ms-toolbar[b-dnqeeyqwro]  .ms-search { flex: 1 1 100%; max-width: none; }
    .ms-result[b-dnqeeyqwro] { margin-inline-start: 0; }

    .ms-form-grid[b-dnqeeyqwro],
    .ms-form-grid--name[b-dnqeeyqwro] { grid-template-columns: 1fr; }

    .ms-choice-grid[b-dnqeeyqwro] { grid-template-columns: 1fr; }

    .ms-modal-footer[b-dnqeeyqwro] { align-items: stretch; }
    .ms-footer-actions[b-dnqeeyqwro] { margin-inline-start: 0; justify-content: flex-end; }
}
/* /Pages/Management/Projects/ProjectsManagement.razor.rz.scp.css */
/* =========================================================
   ProjectsManagement — Scoped styles
   Prefix: pm-
   Mirrors UsersManagement visual language exactly.
   ========================================================= */

/* ─────────────────────────────────────────────────────────
   PAGE WRAPPER
   ───────────────────────────────────────────────────────── */

.pm-page[b-6plv5tuuli] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}

/* ─────────────────────────────────────────────────────────
   TOP BAR
   ───────────────────────────────────────────────────────── */

/* Header moved to the shared MPageHeaderCard + MAdminBack; dead topbar/topbar-start/back/breadcrumb/title rules removed. The kept .pm-topbar-end (add + import) now lives inside the header card's Actions slot. */

/* ── Top-bar end: add + import ── */

.pm-topbar-end[b-6plv5tuuli] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pm-add-btn[b-6plv5tuuli] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--g-accent);
    color: #fff;
    border: none;
    border-radius: var(--g-radius-full);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-control, 15px);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.pm-add-btn:hover:not(:disabled)[b-6plv5tuuli] {
    background: var(--g-accent-hover);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
    transform: translateY(-1px);
}

.pm-add-btn:active[b-6plv5tuuli] { transform: translateY(0); }
.pm-add-btn:disabled[b-6plv5tuuli] { opacity: 0.55; cursor: not-allowed; }

.pm-add-btn--save[b-6plv5tuuli] {
    border-radius: var(--g-radius-sm);
    padding: 9px 18px;
    font-size: var(--motiva-font-size-control, 14px);
    gap: 6px;
}

.pm-import-wrap[b-6plv5tuuli] { position: relative; }

.pm-import-btn[b-6plv5tuuli] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: transparent;
    color: var(--g-text-secondary);
    border: 1.5px solid var(--g-border);
    border-radius: var(--g-radius-full);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-control, 14px);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pm-import-btn:hover[b-6plv5tuuli] {
    background: var(--g-bg-hover);
    border-color: var(--g-accent);
    color: var(--g-accent);
}

.pm-import-dropdown[b-6plv5tuuli] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    background: var(--g-bg-surface);
    border: 1px solid var(--g-border-light);
    border-radius: var(--g-radius-md);
    box-shadow: var(--g-shadow-lg);
    z-index: 200;
    padding: 8px 0;
    animation: pm-fade-in-b-6plv5tuuli 0.1s ease;
}

@keyframes pm-fade-in-b-6plv5tuuli {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pm-import-section-label[b-6plv5tuuli] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--g-text-muted);
    padding: 6px 16px 4px;
}

.pm-import-sep[b-6plv5tuuli] {
    height: 1px;
    background: var(--g-border-light);
    margin: 6px 0;
}

.pm-import-option[b-6plv5tuuli] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 16px;
    background: none;
    border: none;
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-body, 14px);
    color: var(--g-text-primary);
    cursor: pointer;
    text-align: right;
    transition: background 0.12s ease;
}

.pm-import-option:hover:not(:disabled)[b-6plv5tuuli] {
    background: var(--g-bg-hover);
    color: var(--g-accent);
}

.pm-import-option--soon[b-6plv5tuuli] { color: var(--g-text-muted); cursor: default; }

.pm-soon-badge[b-6plv5tuuli] {
    margin-right: auto;
    font-size: var(--motiva-font-size-caption, 10px);
    font-weight: 600;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────
   ADD PROJECT PANEL
   ───────────────────────────────────────────────────────── */

.pm-add-panel[b-6plv5tuuli] {
    background: var(--g-bg-surface);
    border-radius: var(--g-radius-md);
    box-shadow: var(--g-shadow-sm);
    border: 1.5px solid var(--g-accent);
    padding: 24px 28px;
    flex-shrink: 0;
}

.pm-add-panel-header[b-6plv5tuuli] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-item, 16px);
    font-weight: 700;
    color: var(--g-text-primary);
    margin-bottom: 20px;
}

.pm-add-panel-header .oi[b-6plv5tuuli] {
    color: var(--g-accent);
}

.pm-add-grid[b-6plv5tuuli] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.pm-field-full[b-6plv5tuuli] { grid-column: 1 / -1; }

.pm-label[b-6plv5tuuli] {
    display: block;
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: 600;
    color: var(--g-text-secondary);
    margin-bottom: 6px;
}

.pm-required[b-6plv5tuuli] { color: var(--g-danger); margin-inline-start: 2px; }
.pm-optional[b-6plv5tuuli] { color: var(--g-text-muted); font-weight: 400; font-size: var(--motiva-font-size-caption, 12px); }

.pm-input[b-6plv5tuuli] {
    width: 100%;
    padding: 9px 12px;
    background: var(--g-bg-input);
    border: 1.5px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-control, 14px);
    color: var(--g-text-primary);
    box-sizing: border-box;
    direction: rtl;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pm-input:focus[b-6plv5tuuli] {
    border-color: var(--g-accent);
    background: var(--g-bg-surface);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.pm-form-error[b-6plv5tuuli] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: var(--g-radius-sm);
    color: #b91c1c;
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-sm, 13px);
    margin-bottom: 14px;
}

.pm-add-panel-actions[b-6plv5tuuli] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.pm-ghost-btn[b-6plv5tuuli] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: transparent;
    color: var(--g-text-secondary);
    border: 1.5px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-control, 14px);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.pm-ghost-btn:hover:not(:disabled)[b-6plv5tuuli] { background: var(--g-bg-hover); }
.pm-ghost-btn:disabled[b-6plv5tuuli]             { opacity: 0.55; cursor: not-allowed; }

.pm-spinner-sm[b-6plv5tuuli] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pm-spin-b-6plv5tuuli 0.75s linear infinite;
    flex-shrink: 0;
}

@keyframes pm-spin-b-6plv5tuuli { to { transform: rotate(360deg); } }

/* ─────────────────────────────────────────────────────────
   FILTERS BAR
   ───────────────────────────────────────────────────────── */

.pm-filters-bar[b-6plv5tuuli] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--g-bg-surface);
    border-radius: var(--g-radius-md);
    box-shadow: var(--g-shadow-sm);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.pm-search-wrap[b-6plv5tuuli] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
}

.pm-search-icon[b-6plv5tuuli] {
    position: absolute;
    right: 14px;
    font-size: 13px;
    color: var(--g-text-muted);
    pointer-events: none;
}

.pm-search[b-6plv5tuuli] {
    width: 100%;
    padding: 9px 38px 9px 14px;
    border: 1.5px solid var(--g-border);
    border-radius: var(--g-radius-full);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-body, 14px);
    color: var(--g-text-primary);
    background: var(--g-bg-input);
    direction: rtl;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pm-search:focus[b-6plv5tuuli] {
    border-color: var(--g-accent);
    background: var(--g-bg-surface);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.pm-search[b-6plv5tuuli]::placeholder { color: var(--g-text-muted); }

.pm-filters[b-6plv5tuuli] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pm-filter-select[b-6plv5tuuli] {
    padding: 8px 14px;
    border: 1.5px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-control, 14px);
    color: var(--g-text-primary);
    background: var(--g-bg-input);
    direction: rtl;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    appearance: auto;
}

.pm-filter-select:focus[b-6plv5tuuli] {
    border-color: var(--g-accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

/* ─────────────────────────────────────────────────────────
   TABLE PANEL
   ───────────────────────────────────────────────────────── */

.pm-table-panel[b-6plv5tuuli] {
    /* Surface from the shared `.motiva-panel` class (motiva-base.css),
       worn in the markup. This block used to restate it as --g-bg-surface at
       --g-radius-md behind --g-border-light with --g-shadow-sm: the same white,
       but a 16px corner, a grey hairline and no lift, against the 24px violet-
       edged lifted panel every migrated screen renders. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pm-table-wrap[b-6plv5tuuli] {
    overflow-x: auto;
    flex: 1;
}

.pm-table[b-6plv5tuuli] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--g-font-base);
    direction: rtl;
    text-align: right;
}

.pm-table thead tr[b-6plv5tuuli] {
    border-bottom: 1.5px solid var(--g-border-light);
}

.pm-table th[b-6plv5tuuli] {
    padding: 13px 18px;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: 600;
    color: var(--g-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    background: var(--g-bg-surface);
}

.pm-th-actions[b-6plv5tuuli] { width: 60px; text-align: center; }

.pm-row[b-6plv5tuuli] {
    border-bottom: 1px solid var(--g-border-light);
    transition: background 0.12s ease;
}

.pm-row:last-child[b-6plv5tuuli] { border-bottom: none; }

.pm-row:hover[b-6plv5tuuli] { background: #fafbff; }

.pm-table td[b-6plv5tuuli] {
    padding: 14px 18px;
    font-size: var(--motiva-font-size-body, 14px);
    color: var(--g-text-primary);
    vertical-align: middle;
    white-space: nowrap;
}

.pm-cell-number[b-6plv5tuuli] {
    font-weight: 700;
    color: var(--g-text-muted);
    font-size: var(--motiva-font-size-sm, 13px);
    width: 60px;
}

.pm-cell-secondary[b-6plv5tuuli] {
    color: var(--g-text-secondary);
    font-size: var(--motiva-font-size-sm, 13px);
}

/* Name cell */
.pm-name-cell[b-6plv5tuuli] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* When the name cell is wrapped in a <button> for clickability, reset the
   native button chrome so it looks identical to the original <div>. */
.pm-name-cell--button[b-6plv5tuuli] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: start;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* Row-level clickability — keep the existing hover/border styles but
   pair them with a pointer cursor so it reads as actionable. */
.pm-row--clickable[b-6plv5tuuli] { cursor: pointer; }

/* Underline-on-hover affordance for the title when used as a link. */
.pm-project-title--link[b-6plv5tuuli] {
    transition: color 0.13s;
}
.pm-name-cell--button:hover .pm-project-title--link[b-6plv5tuuli],
.pm-row--clickable:hover  .pm-project-title--link[b-6plv5tuuli] {
    color: var(--g-accent);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

.pm-project-icon[b-6plv5tuuli] {
    width: 34px;
    height: 34px;
    border-radius: var(--g-radius-sm);
    background: var(--g-accent-active-bg);
    color: var(--g-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.pm-project-title[b-6plv5tuuli] {
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: 600;
    color: var(--g-text-primary);
    line-height: 1.3;
}

.pm-project-desc[b-6plv5tuuli] {
    font-size: var(--motiva-font-size-caption, 12px);
    color: var(--g-text-muted);
    margin-top: 2px;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* No-team marker */
.pm-no-team[b-6plv5tuuli] {
    font-style: italic;
    color: var(--g-text-muted);
    font-size: var(--motiva-font-size-caption, 12px);
}

/* Type badge */
.pm-type-badge[b-6plv5tuuli] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--g-radius-full);
    background: #eef2ff;
    color: #6366f1;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 600;
    white-space: nowrap;
}

/* Status badges */
.pm-status-badge[b-6plv5tuuli] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--g-radius-full);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 600;
    white-space: nowrap;
}

.pm-status--active[b-6plv5tuuli]   { background: #f0fdf4; color: #16a34a; }
.pm-status--inactive[b-6plv5tuuli] { background: #fef2f2; color: #dc2626; }
.pm-status--other[b-6plv5tuuli]    { background: var(--g-bg-hover); color: var(--g-text-muted); }

/* ── Actions cell ── */
.pm-cell-actions[b-6plv5tuuli] {
    text-align: center;
    width: 60px;
}

.pm-actions-wrap[b-6plv5tuuli] {
    position: relative;
    display: inline-block;
}

.pm-dots-btn[b-6plv5tuuli] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--g-radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--g-text-muted);
    cursor: pointer;
    font-size: var(--motiva-font-size-lg, 16px);
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.pm-dots-btn:hover[b-6plv5tuuli] {
    background: var(--g-bg-hover);
    color: var(--g-accent);
    border-color: var(--g-border);
}

.pm-row-menu[b-6plv5tuuli] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 180px;
    background: var(--g-bg-surface);
    border: 1px solid var(--g-border-light);
    border-radius: var(--g-radius-md);
    box-shadow: var(--g-shadow-lg);
    z-index: 200;
    padding: 6px 0;
    animation: pm-fade-in-b-6plv5tuuli 0.1s ease;
}

.pm-row-menu-sep[b-6plv5tuuli] {
    height: 1px;
    background: var(--g-border-light);
    margin: 4px 0;
}

.pm-row-action[b-6plv5tuuli] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 16px;
    background: none;
    border: none;
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--g-text-primary);
    text-align: right;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.pm-row-action:hover[b-6plv5tuuli] {
    background: var(--g-bg-hover);
    color: var(--g-accent);
}

.pm-row-action .oi[b-6plv5tuuli] {
    font-size: 12px;
    color: var(--g-text-muted);
    flex-shrink: 0;
}

.pm-row-action:hover .oi[b-6plv5tuuli] { color: var(--g-accent); }

.pm-row-action--danger:hover[b-6plv5tuuli] {
    color: var(--g-danger);
    background: #fef2f2;
}

.pm-row-action--danger:hover .oi[b-6plv5tuuli] { color: var(--g-danger); }

/* ── Empty / loading states ── */
.pm-empty[b-6plv5tuuli] {
    text-align: center;
    padding: 48px 24px;
    color: var(--g-text-muted);
    font-size: var(--motiva-font-size-lg, 15px);
}

.pm-empty .oi[b-6plv5tuuli] { font-size: var(--motiva-font-size-h3, 18px); opacity: 0.4; margin-left: 8px; }
.pm-empty--error[b-6plv5tuuli] { color: var(--g-danger); }

.pm-spinner-inline[b-6plv5tuuli] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--g-border);
    border-top-color: var(--g-accent);
    border-radius: 50%;
    animation: pm-spin-b-6plv5tuuli 0.75s linear infinite;
    vertical-align: middle;
    margin-left: 8px;
}

/* ── Table footer ── */
.pm-table-footer[b-6plv5tuuli] {
    padding: 12px 20px;
    border-top: 1px solid var(--g-border-light);
    flex-shrink: 0;
}

.pm-count[b-6plv5tuuli] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--g-text-muted);
}

.pm-count-note[b-6plv5tuuli] {
    margin-right: 6px;
    font-size: var(--motiva-font-size-count, 12px);
    opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────
   PROJECT DETAIL / EDIT MODAL
   ───────────────────────────────────────────────────────── */

.pm-modal-overlay[b-6plv5tuuli] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    z-index: 400;
    overflow-y: auto;
    animation: pm-fade-in-b-6plv5tuuli 0.15s ease;
}

.pm-modal-box[b-6plv5tuuli] {
    width: 100%;
    max-width: 860px;
    background: var(--g-bg-surface);
    border-radius: var(--g-radius-md);
    box-shadow: var(--g-shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: pm-modal-in-b-6plv5tuuli 0.18s ease;
    margin: auto;
}

@keyframes pm-modal-in-b-6plv5tuuli {
    from { opacity: 0; transform: scale(0.97) translateY(-10px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);     }
}

/* ── Modal header ── */

.pm-modal-header[b-6plv5tuuli] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: var(--g-bg-subtle);
    border-bottom: 1px solid var(--g-border-light);
    flex-shrink: 0;
}

.pm-modal-header-info[b-6plv5tuuli] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.pm-modal-number[b-6plv5tuuli] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    background: var(--g-accent);
    color: #fff;
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-lg, 15px);
    font-weight: 700;
    flex-shrink: 0;
    padding: 0 8px;
}

.pm-modal-title[b-6plv5tuuli] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-h3, 18px);
    font-weight: 700;
    color: var(--g-text-primary);
    line-height: 1.3;
    word-break: break-word;
}

.pm-modal-header-label[b-6plv5tuuli] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-h3, 18px);
    font-weight: 700;
    color: var(--g-text-primary);
    line-height: 48px;      /* vertically center with the number badge */
}

.pm-modal-meta[b-6plv5tuuli] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.pm-modal-header-actions[b-6plv5tuuli] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pm-modal-edit-btn[b-6plv5tuuli] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    background: var(--g-accent);
    color: #fff;
    border: none;
    border-radius: var(--g-radius-full);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-control, 14px);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
    white-space: nowrap;
}

.pm-modal-edit-btn:hover[b-6plv5tuuli] { background: var(--g-accent-hover); }

.pm-modal-save-btn[b-6plv5tuuli] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 20px;
    background: var(--g-accent);
    color: #fff;
    border: none;
    border-radius: var(--g-radius-full);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-control, 14px);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
}

.pm-modal-save-btn:hover:not(:disabled)[b-6plv5tuuli] { background: var(--g-accent-hover); }
.pm-modal-save-btn:disabled[b-6plv5tuuli] { opacity: 0.6; cursor: default; }

.pm-modal-cancel-btn[b-6plv5tuuli] {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: transparent;
    color: var(--g-text-secondary);
    border: 1.5px solid var(--g-border);
    border-radius: var(--g-radius-full);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-control, 14px);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    white-space: nowrap;
}

.pm-modal-cancel-btn:hover:not(:disabled)[b-6plv5tuuli] {
    background: var(--g-bg-hover);
    color: var(--g-text-primary);
}

.pm-modal-cancel-btn:disabled[b-6plv5tuuli] { opacity: 0.5; cursor: default; }

.pm-modal-close[b-6plv5tuuli] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--g-radius-sm);
    border: 1px solid var(--g-border);
    background: transparent;
    color: var(--g-text-muted);
    cursor: pointer;
    font-size: var(--motiva-font-size-caption, 12px);
    flex-shrink: 0;
    transition: background 0.12s ease, color 0.12s ease;
}

.pm-modal-close:hover[b-6plv5tuuli] {
    background: var(--g-bg-hover);
    color: var(--g-text-primary);
}

/* ── Modal body ── */

.pm-modal-body[b-6plv5tuuli] {
    padding: 0 0 24px;
    overflow-y: auto;
    max-height: calc(90vh - 90px);
}

/* Error banner */
.pm-modal-error[b-6plv5tuuli] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 24px 0;
    padding: 11px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--g-radius-sm);
    color: #dc2626;
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-sm, 13px);
}

/* ── Sections ── */

.pm-modal-section[b-6plv5tuuli] {
    padding: 20px 24px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pm-modal-section + .pm-modal-section[b-6plv5tuuli] {
    border-top: 1px solid var(--g-border-light);
    margin-top: 20px;
}

.pm-modal-section-title[b-6plv5tuuli] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--g-text-muted);
}

/* ── Field grid ── */

.pm-modal-grid[b-6plv5tuuli] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
}

.pm-modal-field[b-6plv5tuuli] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pm-modal-field-full[b-6plv5tuuli] {
    grid-column: 1 / -1;
}

.pm-modal-label[b-6plv5tuuli] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 600;
    color: var(--g-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pm-modal-value[b-6plv5tuuli] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-body, 14px);
    color: var(--g-text-primary);
    line-height: 1.5;
}

.pm-modal-value-prominent[b-6plv5tuuli] {
    font-size: var(--motiva-font-size-lg, 16px);
    font-weight: 600;
}

.pm-modal-value-multiline[b-6plv5tuuli] {
    white-space: pre-wrap;
    color: var(--g-text-secondary);
}

.pm-modal-value-empty[b-6plv5tuuli] {
    color: var(--g-text-muted);
    font-style: italic;
}

/* ── Edit inputs ── */

.pm-modal-input[b-6plv5tuuli] {
    padding: 8px 12px;
    border: 1.5px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-control, 14px);
    color: var(--g-text-primary);
    background: var(--g-bg-input);
    direction: rtl;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pm-modal-input:focus[b-6plv5tuuli] {
    border-color: var(--g-accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
    background: var(--g-bg-surface);
}

.pm-modal-textarea[b-6plv5tuuli] {
    padding: 8px 12px;
    border: 1.5px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-body, 14px);
    color: var(--g-text-primary);
    background: var(--g-bg-input);
    direction: rtl;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pm-modal-textarea:focus[b-6plv5tuuli] {
    border-color: var(--g-accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
    background: var(--g-bg-surface);
}

/* ── Extra status classes used in detail view ── */
.pm-status--available[b-6plv5tuuli]   { background: #ecfdf5; color: #059669; }
.pm-status--unavailable[b-6plv5tuuli] { background: #fef9c3; color: #a16207; }

/* ─────────────────────────────────────────────────────────
   MODAL ALIASES — Task D class names
   (the Razor rewrite uses these names; they map to the
   same visuals as the earlier pm-modal-* equivalents)
   ───────────────────────────────────────────────────────── */

/* Wide modal variant */
.pm-modal-box--wide[b-6plv5tuuli] { max-width: 960px; }

/* Number badge (replaces pm-modal-number) */
.pm-modal-number-badge[b-6plv5tuuli] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    background: var(--g-accent);
    color: #fff;
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-lg, 15px);
    font-weight: 700;
    flex-shrink: 0;
    padding: 0 8px;
}

/* Close button (replaces pm-modal-close) */
.pm-modal-close-btn[b-6plv5tuuli] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--g-radius-sm);
    border: 1px solid var(--g-border);
    background: transparent;
    color: var(--g-text-muted);
    cursor: pointer;
    font-size: var(--motiva-font-size-control, 12px);
    flex-shrink: 0;
    transition: background 0.12s ease, color 0.12s ease;
}

.pm-modal-close-btn:hover:not(:disabled)[b-6plv5tuuli] {
    background: var(--g-bg-hover);
    color: var(--g-text-primary);
}

.pm-modal-close-btn:disabled[b-6plv5tuuli] { opacity: 0.5; cursor: default; }

/* Error bar (replaces pm-modal-error) */
.pm-modal-error-bar[b-6plv5tuuli] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 24px 0;
    padding: 11px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--g-radius-sm);
    color: #dc2626;
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-sm, 13px);
}

/* Modal footer */
.pm-modal-footer[b-6plv5tuuli] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--g-border-light);
    background: var(--g-bg-subtle);
    flex-shrink: 0;
    flex-direction: row-reverse;    /* RTL: save on the right */
}

/* Success message inside footer */
.pm-modal-success-msg[b-6plv5tuuli] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: 600;
    color: #16a34a;
    margin-right: auto;             /* push to the opposite end */
    animation: pm-fade-in-b-6plv5tuuli 0.2s ease;
}

/* View-modal header text */
.pm-modal-view-title[b-6plv5tuuli] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-h3, 18px);
    font-weight: 700;
    color: var(--g-text-primary);
    line-height: 1.3;
    word-break: break-word;
}

.pm-modal-view-meta[b-6plv5tuuli] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

/* ── Edit section (replaces pm-modal-section) ── */

.pm-edit-section[b-6plv5tuuli] {
    padding: 20px 24px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pm-edit-section + .pm-edit-section[b-6plv5tuuli] {
    border-top: 1px solid var(--g-border-light);
    margin-top: 20px;
}

.pm-edit-section-title[b-6plv5tuuli] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--g-text-muted);
}

.pm-edit-section-hint[b-6plv5tuuli] {
    font-size: var(--motiva-font-size-caption, 12px);
    color: var(--g-text-muted);
    line-height: 1.5;
    margin-top: -4px;
    margin-bottom: 4px;
}

/* ── Edit grid & fields (replaces pm-modal-grid / pm-modal-field) ── */

.pm-edit-grid[b-6plv5tuuli] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
}

.pm-edit-field[b-6plv5tuuli] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pm-edit-label[b-6plv5tuuli] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 600;
    color: var(--g-text-secondary);
}

/* ── Edit inputs (aliases for pm-modal-input / pm-modal-textarea) ── */

.pm-edit-input[b-6plv5tuuli] {
    padding: 8px 12px;
    border: 1.5px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-control, 14px);
    color: var(--g-text-primary);
    background: var(--g-bg-input);
    direction: rtl;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pm-edit-input:focus[b-6plv5tuuli] {
    border-color: var(--g-accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
    background: var(--g-bg-surface);
}

.pm-edit-textarea[b-6plv5tuuli] {
    padding: 8px 12px;
    border: 1.5px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-body, 14px);
    color: var(--g-text-primary);
    background: var(--g-bg-input);
    direction: rtl;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pm-edit-textarea:focus[b-6plv5tuuli] {
    border-color: var(--g-accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
    background: var(--g-bg-surface);
}

/* ── Detail view grid & fields ── */

.pm-detail-grid[b-6plv5tuuli] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 24px;
}

@media (max-width: 640px) {
    .pm-detail-grid[b-6plv5tuuli] { grid-template-columns: 1fr 1fr; }
}

.pm-detail-field[b-6plv5tuuli] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pm-detail-label[b-6plv5tuuli] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--g-text-muted);
}

.pm-detail-value[b-6plv5tuuli] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-body, 14px);
    color: var(--g-text-primary);
    line-height: 1.5;
}

.pm-detail-value--prominent[b-6plv5tuuli] {
    font-size: var(--motiva-font-size-lg, 16px);
    font-weight: 600;
}

.pm-detail-value--multiline[b-6plv5tuuli] {
    white-space: pre-wrap;
    color: var(--g-text-secondary);
}

/* ── Inline edit button on table rows ── */

.pm-edit-inline-btn[b-6plv5tuuli] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--g-radius-sm);
    border: 1px solid var(--g-border);
    background: transparent;
    color: var(--g-text-muted);
    cursor: pointer;
    font-size: var(--motiva-font-size-control, 12px);
    margin-left: 4px;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.pm-edit-inline-btn:hover[b-6plv5tuuli] {
    background: var(--g-accent-active-bg);
    color: var(--g-accent);
    border-color: var(--g-accent);
}

/* ── pm-cell-actions: flex to hold inline button + dots ── */
.pm-cell-actions[b-6plv5tuuli] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: auto;
    min-width: 80px;
}

/* ─────────────────────────────────────────────────────────
   AIRTABLE SYNC NOTIFICATION BAR
   ───────────────────────────────────────────────────────── */

.pm-sync-bar[b-6plv5tuuli] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-body, 14px);
    flex-shrink: 0;
    direction: rtl;
    animation: pm-fade-in-b-6plv5tuuli 0.2s ease;
}

.pm-sync-bar--info[b-6plv5tuuli] {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.pm-sync-bar--error[b-6plv5tuuli] {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}
/* ──────────────────────────────────────────────────────────────────────
   Mentor-assignment cell + "no mentor" warning, KPI chip on filter bar.
   Drives the new "ללא מנחה משויך" badge and quick-action that opens
   the dedicated mentor-only modal (reuses ProjectMentorsEditor).
   ────────────────────────────────────────────────────────────────────── */

.pm-cell-mentor[b-6plv5tuuli] { white-space: nowrap; }

.pm-mentor-warn[b-6plv5tuuli] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.13s, border-color 0.13s, transform 0.13s;
    font-family: inherit;
}
.pm-mentor-warn:hover[b-6plv5tuuli] {
    background: #fee2e2;
    border-color: #f87171;
    transform: translateY(-1px);
}
.pm-mentor-warn .oi[b-6plv5tuuli] { font-size: var(--motiva-font-size-caption, 11px); }

.pm-mentor-ok[b-6plv5tuuli] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    color: #065f46;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.13s;
    font-family: inherit;
}
.pm-mentor-ok:hover[b-6plv5tuuli] { background: #d1fae5; }
.pm-mentor-ok .oi[b-6plv5tuuli] { font-size: var(--motiva-font-size-caption, 11px); }

/* Filter chip on the toolbar — toggleable scope to "no mentor" projects */
.pm-no-mentor-chip[b-6plv5tuuli] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.13s, color 0.13s, border-color 0.13s;
    font-family: inherit;
}
.pm-no-mentor-chip:hover[b-6plv5tuuli] {
    background: #fee2e2;
    border-color: #f87171;
}
.pm-no-mentor-chip--active[b-6plv5tuuli] {
    background: #dc2626;
    border-color: #dc2626;
    color: white;
}
.pm-no-mentor-chip--active:hover[b-6plv5tuuli] {
    background: #b91c1c;
    border-color: #b91c1c;
}
.pm-no-mentor-chip .oi[b-6plv5tuuli] { font-size: var(--motiva-font-size-caption, 11px); }
/* /Pages/Management/Requests/RequestsManagement.razor.rz.scp.css */
/* ============================================================
   Lecturer / Staff Request Queue — בקשות
   Prefix: lrq-
   Visual source: Motiva Lecturer Requests New.dc.html
                  בקשות מרצה 308 חדש.pdf
   ============================================================

   ALMOST NOTHING OF THE SCREEN IS HERE ANY MORE. The height chain,
   the two columns and their 30/70 ratio, the queue's scroll box, the
   filter bar, the type dropdown, the row and its divider, the
   selected-row treatment, the row's own ANATOMY, the empty state,
   the workspace card and the RECORD's head band, badges, section
   labels, description, dates, file chips and history all come from
   the shared `rqw-*` stylesheet at
   wwwroot/css/motiva-request-workspace.css — the same one the
   student and mentor queues draw from. Blazor's scoped CSS cannot be
   imported across components, so sharing means a global stylesheet
   or a verbatim copy per page.

   Those recipes were the STUDENT queue's, which is the approved
   reference for the feature; this page used to carry near-copies of
   them that had drifted on radius, ink and chip position. It now
   resolves the same declarations.

   WHAT IS LEFT HERE IS WHAT IS GENUINELY THE LECTURER'S — the two
   blocks no other role has:
     * the mentor's recommendation, read by the person who decides;
     * the decision workspace itself: אישור / דחייה / החזרה להשלמה,
       the note to the team, and the two after-the-fact states.

   The buckets, the counts, the decision POSTs and every permission
   are untouched by this file — it paints them, it does not choose
   them.
   ============================================================ */


/* ── The type dropdown, inside the shared filter bar ─────────
   The control itself (wrapper, button, caret, backdrop, panel and
   options) is the shared `rqw-type-*` one; every element still
   carries its `lrq-` class so nothing here has to be renamed, but
   the declarations are gone.

   The margin goes with them: `.rqw-filters` now owns the gap between
   the pills and the dropdown and the inset both hang off, and a
   leftover `0 10px 8px` here put the dropdown 4px inside the tabs
   above it. */
.lrq-type-wrap[b-sbrwyggy1m] {
    margin: 0;
}


/* ── THE ROW'S STATE SLOT IS GONE, AND SO ARE ITS TONES ──────
   `.lrq-row-state-*` used to colour a state sentence under every
   title — rose for "ממתינה להחלטתך", violet for "עדכון חדש" and
   "עודכנה 15.07". The queue is already filtered to ONE bucket by the
   pills above it, so that sentence repeated the selected tab on every
   row, in the loudest ink on the row.

   The tones were not moved anywhere: the record's own badge has always
   painted the same four roles through the shared `.rqw-ws-state-*`
   (StateTone), and it is read once, about the one request that is
   open. Nothing here is needed to say it. */


/* ── Detail loading, inside the workspace card ───────────────
   MLoadingState draws the spinner and the label; this only gives it
   the record's own vertical room so the card does not collapse to a
   strip while a request is fetched. */
.lrq-detail-loading[b-sbrwyggy1m] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
}


/* ══════════════════════════════════════════════════════════
   THE MENTOR'S RECOMMENDATION
   ══════════════════════════════════════════════════════════
   Advice, not a decision — so it is a quiet tinted note above the
   decision panel rather than a second panel competing with it. The
   verdict chip inside it uses the workspace's own four colour roles:
   teal for recommended, rose for not, violet while pending. */
.lrq-mentor-rec[b-sbrwyggy1m] {
    margin: 4px 0 20px;
    padding: 16px 20px;
    border-radius: 16px;
    background: var(--motiva-color-brand-bg);
    border: 1px solid rgba(109, 40, 245, 0.12);
}

.lrq-mentor-rec-head[b-sbrwyggy1m] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lrq-mentor-rec-label[b-sbrwyggy1m] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: 0.02em;
    color: var(--motiva-color-violet);
}

.lrq-mentor-rec-decision[b-sbrwyggy1m] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--motiva-radius-full);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1.35;
}

.lrq-mentor-dec-recommended[b-sbrwyggy1m]    { background: rgba(15, 168, 194, 0.12); color: #0FA8C2; }
.lrq-mentor-dec-notrecommended[b-sbrwyggy1m] { background: rgba(224, 51, 95, 0.10);  color: #C42B52; }
.lrq-mentor-dec-pending[b-sbrwyggy1m]        { background: rgba(109, 40, 245, 0.08); color: #6D28F5; }
.lrq-mentor-dec-approved[b-sbrwyggy1m]       { background: rgba(15, 168, 194, 0.12); color: #0FA8C2; }
.lrq-mentor-dec-rejected[b-sbrwyggy1m]       { background: rgba(224, 51, 95, 0.10);  color: #C42B52; }
.lrq-mentor-dec-escalated[b-sbrwyggy1m]      { background: rgba(109, 40, 245, 0.08); color: #6D28F5; }

.lrq-mentor-rec-by[b-sbrwyggy1m] {
    font-size: var(--motiva-font-size-caption, 11.5px);
    color: var(--motiva-text-subtle);
    margin-inline-start: auto;
}

.lrq-mentor-rec-note[b-sbrwyggy1m] {
    margin: 8px 0 0;
    font-size: var(--motiva-font-size-body, 14px);
    line-height: 1.5;
    color: var(--motiva-text-secondary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


/* ══════════════════════════════════════════════════════════
   THE DECISION WORKSPACE — the lecturer's one move
   ══════════════════════════════════════════════════════════
   The emphasised surface on the record, because it is the thing the
   reader came to do.

   SOLID. This was rgba(255,255,255,0.80) sitting on a white card that
   is itself on the canvas's violet radial, so the panel read as a
   faded grey patch rather than a raised one — the same translucency
   that had already been taken out of the queue and the empty state.
   `--motiva-panel-surface` with the shared panel edge makes it the
   one object it is meant to be. */
.lrq-decision[b-sbrwyggy1m] {
    margin: 4px 0 20px;
    padding: 20px 22px;
    border-radius: 18px;
    background: var(--motiva-panel-surface, #FFFFFF);
    border: 1px solid var(--motiva-panel-border, rgba(109, 40, 245, 0.08));
    box-shadow: 0 1px 3px rgba(27, 26, 34, 0.04);
}

.lrq-decision-title[b-sbrwyggy1m] {
    margin: 0 0 14px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--motiva-text-muted);
}

.lrq-choices[b-sbrwyggy1m] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Three outcomes, each in the tone it means: teal for approval, rose
   for refusal, violet for handing it back to the team. Unselected they
   are all one neutral outline, so the panel does not shout three
   colours at a reader who has not chosen yet. */
.lrq-choice[b-sbrwyggy1m] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: var(--motiva-radius-full);
    border: 1.5px solid var(--motiva-border-strong, #E2E0E8);
    background: var(--motiva-panel-surface, #FFFFFF);
    font-family: inherit;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-secondary);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.lrq-choice:hover:not(:disabled)[b-sbrwyggy1m] {
    border-color: var(--motiva-text-faint, #B7B2C2);
    color: var(--motiva-text-primary);
}

.lrq-choice:disabled[b-sbrwyggy1m] {
    opacity: 0.5;
    cursor: not-allowed;
}

.lrq-choice-mark[b-sbrwyggy1m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--motiva-text-faint, #B7B2C2);
    flex-shrink: 0;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.lrq-choice-approved[b-sbrwyggy1m] {
    border-color: var(--motiva-color-teal);
    color: var(--motiva-color-teal);
    background: rgba(15, 168, 194, 0.06);
}
.lrq-choice-approved .lrq-choice-mark[b-sbrwyggy1m] {
    border-color: var(--motiva-color-teal);
    background: var(--motiva-color-teal);
    color: #fff;
}

.lrq-choice-rejected[b-sbrwyggy1m] {
    border-color: var(--motiva-color-rose);
    color: var(--motiva-color-rose-ink, #C42B52);
    background: rgba(224, 51, 95, 0.06);
}
.lrq-choice-rejected .lrq-choice-mark[b-sbrwyggy1m] {
    border-color: var(--motiva-color-rose);
    background: var(--motiva-color-rose);
    color: #fff;
}

.lrq-choice-return[b-sbrwyggy1m] {
    border-color: var(--motiva-color-violet);
    color: var(--motiva-color-violet);
    background: rgba(109, 40, 245, 0.06);
}
.lrq-choice-return .lrq-choice-mark[b-sbrwyggy1m] {
    border-color: var(--motiva-color-violet);
    background: var(--motiva-color-violet);
    color: #fff;
}

/* ── The note to the team ────────────────────────────────────
   Same control language as the student's reply composer: a hairline
   box on the tinted input surface that goes white and violet-edged on
   focus. Only the corner differs, and deliberately — this is a
   multi-line field the writer can drag, not a one-line pill. */
.lrq-decision-note-wrap[b-sbrwyggy1m] {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.lrq-decision-note-lbl[b-sbrwyggy1m] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-muted);
}

.lrq-decision-note[b-sbrwyggy1m] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--motiva-border-strong, #E2E0E8);
    border-radius: var(--motiva-radius-md, 12px);
    background: var(--motiva-surface-secondary, #FAF9F7);
    font-family: inherit;
    font-size: var(--motiva-font-size-body, 14px);
    line-height: 1.5;
    color: var(--motiva-text-primary);
    padding: 10px 16px;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.lrq-decision-note:focus[b-sbrwyggy1m] {
    border-color: var(--motiva-color-violet);
    background: var(--motiva-panel-surface, #FFFFFF);
}

.lrq-decision-note[b-sbrwyggy1m]::placeholder { color: var(--motiva-text-muted); }
.lrq-decision-note:disabled[b-sbrwyggy1m]     { opacity: 0.6; cursor: not-allowed; }

.lrq-decision-error[b-sbrwyggy1m] {
    margin: 8px 0 0;
    font-size: var(--motiva-font-size-caption, 12px);
    color: var(--motiva-color-rose-ink, var(--motiva-color-rose));
}


/* ── "שליחת ההחלטה" ──────────────────────────────────────────
   `.motiva-cta` (motiva-base.css) supplies the signature gradient,
   the white ink, the pill radius, the hover and the flat neutral
   disabled chip; only geometry is set here, per that file's contract.
   This used to retype the gradient — with a 55% midpoint against the
   token's 60% — and dim itself to 45% when disabled, which is the one
   state the shared recipe deliberately does differently. */
.lrq-decision-actions[b-sbrwyggy1m] {
    margin-top: 16px;
    display: flex;
    justify-content: flex-start;
}

.lrq-send-btn[b-sbrwyggy1m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    padding: 12px 32px;
    font-family: inherit;
    font-size: var(--motiva-font-size-control, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}

.lrq-send-spinner[b-sbrwyggy1m] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lrq-spin-b-sbrwyggy1m 0.7s linear infinite;
}

/* Reduced motion is handled globally by motiva-base.css, which collapses
   every animation-duration — no local override needed. */
@keyframes lrq-spin-b-sbrwyggy1m { to { transform: rotate(360deg); } }


/* ── After the fact: decided, or waiting on the mentor ───────
   Two read-only states in place of the panel, in the same two roles
   the badge above the record uses: teal for a request nobody has to
   move, violet for one in flight with someone else. Neither is rose —
   neither is the lecturer's move. */
.lrq-decision-done[b-sbrwyggy1m] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 20px;
    padding: 14px 18px;
    border-radius: 16px;
    background: rgba(15, 168, 194, 0.06);
    border: 1px solid rgba(15, 168, 194, 0.15);
}

.lrq-decision-done-label[b-sbrwyggy1m] { font-size: var(--motiva-font-size-sm, 13px); font-weight: var(--motiva-font-weight-semibold); color: var(--motiva-text-muted); }
.lrq-decision-done-val[b-sbrwyggy1m]   { font-size: var(--motiva-font-size-sm, 13px); font-weight: var(--motiva-font-weight-bold);     color: var(--motiva-color-teal); }
.lrq-decision-done-dec[b-sbrwyggy1m]   { font-size: var(--motiva-font-size-caption, 12px); color: var(--motiva-text-subtle); }

.lrq-decision-waiting[b-sbrwyggy1m] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 20px;
    padding: 14px 18px;
    border-radius: 16px;
    background: var(--motiva-color-brand-bg);
    border: 1px solid rgba(109, 40, 245, 0.12);
    color: var(--motiva-color-violet);
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.4;
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════
   The record's own paddings and the badge stack at one column moved
   into the shared file with the head and body they belong to. What is
   left is the decision panel, which only this screen has. */

@media (max-width: 720px) {
    .lrq-choices[b-sbrwyggy1m]  { gap: 6px; }
    .lrq-choice[b-sbrwyggy1m]   { padding: 8px 14px; font-size: 13px; }
    .lrq-send-btn[b-sbrwyggy1m] { padding: 11px 22px; }
}
/* /Pages/Management/RequestTypes/RequestTypesManagement.razor.rz.scp.css */
/* ============================================================
   RequestTypesManagement — ניהול סוגי בקשות (Admin)
   Prefix: rtm-

   Visual source:
       Client/Pages/Management/Milestones/MilestonesManagement.razor.css
       Client/Pages/Management/Users/UsersManagement.razor.css

   Same stylesheet applied to a different set of cells: page shell, header
   rhythm, strip, toolbar, popup-menu recipe, table treatment and modal are
   the finished Admin list recipe, not a second language.

   Design tokens: motiva-tokens.css. The page renders inside the canvas
   shell (.motiva .motiva-final .motiva-lecturer), so every --motiva-*
   token already resolves to the finished design's value — 18px card
   radius, 38px controls, the warm ink ramp, violet/teal/rose. The var()
   fallbacks exist only so the page still renders sanely outside it.

   The previous version of this file was written against the legacy --g-*
   ramp, which inside .motiva-final yields the right colours with the wrong
   geometry. That is why it is replaced rather than patched.

   Layout:
       header  (crumb / title + subtitle · new type)
       ↓ 14px
       strip   (explainer · 3 summary pills)
       ↓ 14px
       toast   (only after an action)
       ↓ 14px
       toolbar (search · 2 filter pills · clear · count)
       ↓ 14px
       MDataTable, full canvas width
   ============================================================ */

/* ── Page shell ────────────────────────────────────────────── */
.rtm-page[b-y5oprcsgyu] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
    padding-block-end: 40px;
}

/* ── Header ────────────────────────────────────────────────── */
/* The page header is now <MPageHeaderCard>: MAdminBack in Leading,
   MInfoTip + MSummaryTag in TitleTrailing, the "new request type" CTA in
   Actions. The old floating .rtm-head / .rtm-head-main / .rtm-head-line /
   .rtm-h1 / .rtm-head-actions rules are gone. */

.rtm-subtitle[b-y5oprcsgyu] {
    margin: 0;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
}

/* ── Buttons ─────────────────────────────────────────────────
   The primary's gradient, radius, hover and press come from the shared
   .motiva-cta in motiva-base.css — only geometry lives here. */
.rtm-btn-primary[b-y5oprcsgyu] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    padding: 0 16px;
    height: var(--motiva-control-height-md, 38px);
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.rtm-btn-primary--lg[b-y5oprcsgyu] { padding: 0 18px; font-size: var(--motiva-font-size-control, 13.5px); }
.rtm-btn-primary:disabled[b-y5oprcsgyu] { opacity: 0.55; cursor: default; }

.rtm-btn-ghost[b-y5oprcsgyu] {
    padding: 0 14px;
    height: var(--motiva-control-height-md, 38px);
    border: 0;
    background: none;
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-secondary, #5B5568);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.rtm-btn-ghost:hover[b-y5oprcsgyu] { background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035)); }
.rtm-btn-ghost:disabled[b-y5oprcsgyu] { opacity: 0.5; cursor: default; }

.rtm-btn-primary:focus-visible[b-y5oprcsgyu],
.rtm-btn-ghost:focus-visible[b-y5oprcsgyu] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* A text action inside the modal — "הוספת שדה". Violet, no chrome. */
.rtm-link[b-y5oprcsgyu] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-inline-start: auto;
    padding: 4px 2px;
    border: 0;
    background: none;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-color-violet, #4F46E5);
    white-space: nowrap;
    cursor: pointer;
}

.rtm-link:hover[b-y5oprcsgyu] { text-decoration: underline; text-underline-offset: 3px; }
.rtm-link:disabled[b-y5oprcsgyu] { color: var(--motiva-text-subtle, #B7B2C2); cursor: default; text-decoration: none; }

.rtm-link:focus-visible[b-y5oprcsgyu] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
    border-radius: 4px;
}

/* The `rtm-strip` row and its three-pill `rtm-stat*` recipe used to live
   here. The page's counts are now one MSummaryTag on the header line, so
   every rule that painted those separate pills is dead. */

/* ── Toast ───────────────────────────────────────────────────
   One line, card-radius, dismissible. Success is teal, failure rose —
   rose appears here and in the delete menu item, nowhere else. */
.rtm-toast[b-y5oprcsgyu] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    border-radius: var(--motiva-radius-md, 14px);
    border: 1px solid transparent;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
}

.rtm-toast svg[b-y5oprcsgyu] { flex: 0 0 auto; }

.rtm-toast--ok[b-y5oprcsgyu] {
    background: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 8%, transparent);
    border-color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 24%, transparent);
    color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 84%, #000);
}

.rtm-toast--err[b-y5oprcsgyu] {
    background: color-mix(in srgb, var(--motiva-color-rose, #D93864) 8%, transparent);
    border-color: color-mix(in srgb, var(--motiva-color-rose, #D93864) 24%, transparent);
    color: var(--motiva-color-rose-ink, #B23256);
}

.rtm-toast-text[b-y5oprcsgyu] { flex: 1 1 auto; min-width: 0; }

.rtm-toast-close[b-y5oprcsgyu] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
}

.rtm-toast-close:hover[b-y5oprcsgyu] { opacity: 1; background: rgba(255, 255, 255, 0.5); }

.rtm-toast-close:focus-visible[b-y5oprcsgyu] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 1px;
}

/* ── Popup menus — one recipe, two callers ─────────────────── */
.rtm-filter[b-y5oprcsgyu],
.rtm-actions[b-y5oprcsgyu] {
    position: relative;
    display: flex;
}

.rtm-menu[b-y5oprcsgyu] {
    position: absolute;
    top: calc(100% + 6px);
    z-index: var(--motiva-z-dropdown, 500);
    min-width: 186px;
    padding: 6px;
    border-radius: var(--motiva-radius-md, 14px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    box-shadow: var(--motiva-shadow-md, 0 16px 36px rgba(30, 20, 60, 0.14));
}

/* The filter pills sit mid-toolbar, so their menu hangs from the reading
   start. Logical, so an LTR build needs no second rule. */
.rtm-menu--filter[b-y5oprcsgyu] { inset-inline-start: 0; }

/* The kebab sits at the row's INLINE END — the far left in RTL — so its
   menu anchors its own end edge there and grows inward. `inset-inline-start`
   would push its width off the viewport and give the page a horizontal
   scrollbar. */
.rtm-menu--row[b-y5oprcsgyu] {
    inset-inline-end: 0;
    top: calc(100% + 4px);
    min-width: 196px;
}

.rtm-menu-item[b-y5oprcsgyu] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    background: none;
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.rtm-menu-item:hover:not(:disabled)[b-y5oprcsgyu] { background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035)); }

.rtm-menu-item:focus-visible[b-y5oprcsgyu] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: -2px;
}

.rtm-menu-item:disabled[b-y5oprcsgyu] { color: var(--motiva-text-subtle, #B7B2C2); cursor: default; }
.rtm-menu-item svg[b-y5oprcsgyu] { flex: 0 0 auto; color: var(--motiva-text-muted, #8B8698); }
.rtm-menu-item:disabled svg[b-y5oprcsgyu] { color: var(--motiva-text-subtle, #B7B2C2); }
.rtm-menu-item-label[b-y5oprcsgyu] { flex: 1 1 auto; }

.rtm-menu-item--on[b-y5oprcsgyu] { font-weight: var(--motiva-font-weight-semibold, 600); }
.rtm-menu-check[b-y5oprcsgyu] { color: var(--motiva-color-violet, #4F46E5); }

/* Rose for the one destructive item. */
.rtm-menu-item--danger[b-y5oprcsgyu] { color: var(--motiva-color-rose-ink, #B23256); }
.rtm-menu-item--danger svg[b-y5oprcsgyu] { color: currentColor; }

.rtm-menu-item--danger:hover:not(:disabled)[b-y5oprcsgyu] {
    background: color-mix(in srgb, var(--motiva-color-rose, #D93864) 8%, transparent);
}

/* "מובנה" / "בשימוש" beside מחיקה — the row says why the action is refused
   before the click rather than after it. */
.rtm-menu-item-note[b-y5oprcsgyu] {
    margin-inline-start: auto;
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #8B8698);
}

.rtm-menu-sep[b-y5oprcsgyu] {
    height: 1px;
    margin: 5px 8px;
    background: var(--motiva-border-subtle, #F0EEF9);
}

/* ── Toolbar ───────────────────────────────────────────────── */
.rtm-toolbar[b-y5oprcsgyu] {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 2px;
}

/* ::deep because MSearchField renders its own root, which carries ITS
   isolation attribute and not this page's. A flex-basis alone leaves the
   wrapper at ~190px — the width has to be stated. */
.rtm-toolbar[b-y5oprcsgyu]  .rtm-search {
    flex: 1 1 320px;
    max-width: 520px;
}

.rtm-filter-btn[b-y5oprcsgyu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 15px;
    border-radius: var(--motiva-radius-full, 999px);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    color: var(--motiva-text-primary, #1A1820);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.rtm-filter-btn:hover[b-y5oprcsgyu] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 22%, transparent);
}

.rtm-filter-btn:focus-visible[b-y5oprcsgyu] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* Applied filter — the brand EDGE, not a violet wash. */
.rtm-filter-btn--on[b-y5oprcsgyu] {
    background: var(--motiva-tag-brand-surface);
    border-color: transparent;
    color: var(--motiva-text-primary, #1A1820);
}

.rtm-filter-btn--on:hover[b-y5oprcsgyu] {
    border-color: transparent;
    filter: brightness(0.99) saturate(1.08);
}

.rtm-filter-btn--on .rtm-filter-name[b-y5oprcsgyu] { color: var(--motiva-text-muted, #8B8698); }

.rtm-filter-name[b-y5oprcsgyu] {
    font-size: var(--motiva-font-size-control, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #8B8698);
}

.rtm-filter-value[b-y5oprcsgyu] {
    font-size: var(--motiva-font-size-control, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
}

.rtm-filter-chev[b-y5oprcsgyu] {
    color: var(--motiva-text-muted, #8B8698);
    transition: transform var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.rtm-filter-chev--open[b-y5oprcsgyu] { transform: rotate(180deg); }

.rtm-clear[b-y5oprcsgyu] {
    align-self: center;
    padding: 8px 4px;
    border: 0;
    background: none;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-color-violet, #4F46E5);
    white-space: nowrap;
    cursor: pointer;
}

.rtm-clear:hover[b-y5oprcsgyu] { text-decoration: underline; }

.rtm-clear:focus-visible[b-y5oprcsgyu] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
    border-radius: 4px;
}

.rtm-result[b-y5oprcsgyu] {
    align-self: center;
    margin-inline-start: auto;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
}

/* ============================================================
   TABLE
   Surface, head rhythm, dividers and hover come from MDataTable.
   ============================================================ */

.rtm-col-desc[b-y5oprcsgyu]    { width: 240px; }
.rtm-col-handler[b-y5oprcsgyu] { width: 168px; }
.rtm-col-files[b-y5oprcsgyu]   { width: 96px; }
.rtm-col-notes[b-y5oprcsgyu]   { width: 108px; }
.rtm-col-fields[b-y5oprcsgyu]  { width: 72px; }
.rtm-col-status[b-y5oprcsgyu]  { width: 100px; }
.rtm-col-actions[b-y5oprcsgyu] { width: 48px; }

/* A disabled type stays legible but recedes — it is still catalogue
   content, just not offered for new requests. */
.rtm-row--off[b-y5oprcsgyu] { opacity: 0.62; }

.rtm-cell-name[b-y5oprcsgyu] { min-width: 0; }

.rtm-name-line[b-y5oprcsgyu] {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.rtm-name[b-y5oprcsgyu] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.25;
    color: var(--motiva-text-primary, #1A1820);
}

/* The stable English identifier. Isolated so the Latin code cannot reorder
   the Hebrew line around it. */
.rtm-code[b-y5oprcsgyu] {
    display: block;
    unicode-bidi: isolate;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    color: var(--motiva-text-subtle, #B7B2C2);
}

/* ── Row tags ────────────────────────────────────────────────
   CATEGORICAL, NOT SEMANTIC. "מובנה" is an origin and "N בקשות" is a count;
   neither is a status, so neither takes a status colour. */
.rtm-tag[b-y5oprcsgyu] {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: var(--motiva-radius-full, 999px);
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.3;
    white-space: nowrap;
}

.rtm-tag--builtin[b-y5oprcsgyu] {
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary, #1A1820);
}

.rtm-tag--usage[b-y5oprcsgyu] {
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.04));
    color: var(--motiva-text-muted, #8B8698);
}

.rtm-cell-desc[b-y5oprcsgyu] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    color: var(--motiva-text-secondary, #5B5568);
}

/* ── Handler roles ───────────────────────────────────────────
   A type is routed to one or more roles. Low-alpha tints, same three hues
   the rest of the Admin surface uses for מנהל / מרצה / מנחה. */
.rtm-cell-handler[b-y5oprcsgyu] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.rtm-role[b-y5oprcsgyu] {
    padding: 4px 9px;
    border-radius: var(--motiva-radius-full, 999px);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.25;
    white-space: nowrap;
}

.rtm-role--admin[b-y5oprcsgyu] {
    background: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 8%, transparent);
    color: var(--motiva-color-violet, #4F46E5);
}

.rtm-role--staff[b-y5oprcsgyu] {
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.04));
    color: var(--motiva-text-secondary, #5B5568);
}

/* The teal token is too light for 11px text on its own tint. */
.rtm-role--mentor[b-y5oprcsgyu] {
    background: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 10%, transparent);
    color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 82%, #000);
}

/* ── Values ──────────────────────────────────────────────── */
.rtm-cell-value[b-y5oprcsgyu] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.2;
    white-space: nowrap;
    color: var(--motiva-text-secondary, #5B5568);
}

.rtm-cell-num[b-y5oprcsgyu] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
    font-variant-numeric: tabular-nums;
}

.rtm-cell-empty[b-y5oprcsgyu] {
    color: var(--motiva-text-subtle, #B7B2C2);
    font-weight: var(--motiva-font-weight-medium, 500);
}

/* ── Internal-notes flag ─────────────────────────────────────
   Violet for on, quiet grey for off. Off is a configuration choice, never
   a fault, so it does not take rose. */
.rtm-flag-on[b-y5oprcsgyu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-color-violet, #4F46E5);
    white-space: nowrap;
}

.rtm-flag-off[b-y5oprcsgyu] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
}

/* ── Status ──────────────────────────────────────────────────
   Dot + text, no filled pill — the same treatment the Users, Cycles and
   Milestones tables use. Disabled is neutral, never rose. */
.rtm-status[b-y5oprcsgyu] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--motiva-font-size-caption, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
}

.rtm-status-dot[b-y5oprcsgyu] {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.rtm-status--on[b-y5oprcsgyu]  { color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 88%, #000); }
.rtm-status--off[b-y5oprcsgyu] { color: var(--motiva-text-muted, #8B8698); }

/* ── Row actions ───────────────────────────────────────────── */
.rtm-cell-actions[b-y5oprcsgyu] { position: relative; }

/* An open menu has to paint over the rows BELOW it. Every actions cell is
   positioned, so without this the next row's cell — later in tree order —
   paints on top of the popup. */
.rtm-page tr.m-dt-row-active .rtm-cell-actions[b-y5oprcsgyu] { z-index: 20; }

.rtm-actions[b-y5oprcsgyu] { justify-content: flex-end; }

.rtm-kebab[b-y5oprcsgyu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--motiva-text-muted, #8B8698);
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.rtm-kebab:hover[b-y5oprcsgyu],
.rtm-kebab--on[b-y5oprcsgyu] {
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035));
    color: var(--motiva-text-primary, #1A1820);
}

.rtm-kebab:focus-visible[b-y5oprcsgyu] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 1px;
}

.rtm-sr[b-y5oprcsgyu] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   MODAL
   ============================================================ */

.rtm-modal-overlay[b-y5oprcsgyu] {
    position: fixed;
    inset: 0;
    z-index: var(--motiva-z-modal, 1000);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(26, 24, 32, 0.36);
    backdrop-filter: blur(2px);
}

.rtm-modal-box[b-y5oprcsgyu] {
    width: 100%;
    max-width: 660px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    border-radius: var(--motiva-radius-xl, 24px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    box-shadow: var(--motiva-shadow-lg, 0 32px 70px rgba(30, 20, 60, 0.28));
    overflow: hidden;
}

.rtm-modal-header[b-y5oprcsgyu] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 22px 14px;
}

/* A tint of the sweep, not the sweep itself — a full gradient on a 38px
   chip reads as a button rather than an emblem. */
.rtm-modal-glyph[b-y5oprcsgyu] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--motiva-radius-sm, 10px);
    background:
        linear-gradient(140deg,
            color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 13%, transparent),
            color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 11%, transparent)),
        var(--motiva-surface-primary, #fff);
    color: var(--motiva-color-violet, #4F46E5);
}

.rtm-modal-titles[b-y5oprcsgyu] { min-width: 0; flex: 1 1 auto; }

.rtm-modal-title[b-y5oprcsgyu] {
    font-size: var(--motiva-font-size-h2, 18px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.3;
    color: var(--motiva-text-primary, #1A1820);
}

.rtm-modal-subtitle[b-y5oprcsgyu] {
    margin-top: 4px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.3;
    color: var(--motiva-text-muted, #8B8698);
}

.rtm-modal-close[b-y5oprcsgyu] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--motiva-text-muted, #8B8698);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.rtm-modal-close:hover[b-y5oprcsgyu] {
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035));
    color: var(--motiva-text-primary, #1A1820);
}

.rtm-modal-body[b-y5oprcsgyu] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 22px 18px;
    overflow-y: auto;
}

/* Modal-body children never shrink — a flex item's automatic minimum size
   resolves to 0 in a scrolling column flex container as soon as it carries
   `overflow: hidden`, which crushes a list to a couple of pixels while its
   content is still in the DOM. */
.rtm-modal-body > *[b-y5oprcsgyu] { flex-shrink: 0; }

.rtm-modal-footer[b-y5oprcsgyu] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 22px 20px;
    border-top: 1px solid var(--motiva-border-subtle, #F0EEF9);
}

.rtm-footer-actions[b-y5oprcsgyu] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
}

/* ── Form controls ───────────────────────────────────────── */
.rtm-form-section[b-y5oprcsgyu] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 -2px;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1;
    letter-spacing: 0.03em;
    color: var(--motiva-text-muted, #8B8698);
}

.rtm-form-section:first-child[b-y5oprcsgyu] { margin-top: 4px; }
.rtm-form-section--row[b-y5oprcsgyu] { margin-bottom: 2px; }

.rtm-form-grid[b-y5oprcsgyu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* The Hebrew name takes the room; the code needs only its identifier. */
.rtm-form-grid--head[b-y5oprcsgyu] { grid-template-columns: 1fr 210px; }

.rtm-form-field[b-y5oprcsgyu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.rtm-form-field--grow[b-y5oprcsgyu] { flex: 1 1 auto; }
.rtm-form-field--type[b-y5oprcsgyu] { flex: 0 0 150px; }

.rtm-form-label[b-y5oprcsgyu] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
}

.rtm-form-label--sm[b-y5oprcsgyu] { font-size: var(--motiva-font-size-caption, 11.5px); color: var(--motiva-text-muted, #8B8698); }

.rtm-req[b-y5oprcsgyu] { color: var(--motiva-color-rose-ink, #B23256); }

.rtm-form-hint[b-y5oprcsgyu] {
    margin: -4px 0 0;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.4;
    color: var(--motiva-text-muted, #8B8698);
}

.rtm-form-empty[b-y5oprcsgyu] {
    margin: 0;
    padding: 14px;
    border-radius: var(--motiva-radius-md, 14px);
    border: 1px dashed var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.45;
    color: var(--motiva-text-muted, #8B8698);
}

.rtm-form-input[b-y5oprcsgyu],
.rtm-form-textarea[b-y5oprcsgyu],
.rtm-form-select[b-y5oprcsgyu] {
    width: 100%;
    box-sizing: border-box;
    padding: 0 12px;
    height: var(--motiva-control-height-md, 38px);
    border-radius: var(--motiva-radius-sm, 10px);
    background: var(--motiva-surface-secondary, #FAF9F7);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-primary, #1A1820);
    transition: border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.rtm-form-input--ltr[b-y5oprcsgyu] { text-align: start; unicode-bidi: isolate; }

.rtm-form-select[b-y5oprcsgyu] { cursor: pointer; }

.rtm-form-textarea[b-y5oprcsgyu] {
    height: auto;
    min-height: 74px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
}

.rtm-form-input[b-y5oprcsgyu]::placeholder,
.rtm-form-textarea[b-y5oprcsgyu]::placeholder { color: var(--motiva-text-subtle, #B7B2C2); }

.rtm-form-input:focus[b-y5oprcsgyu],
.rtm-form-textarea:focus[b-y5oprcsgyu],
.rtm-form-select:focus[b-y5oprcsgyu] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: -1px;
    border-color: var(--motiva-color-focus-ring, #4F46E5);
}

.rtm-form-input:disabled[b-y5oprcsgyu],
.rtm-form-textarea:disabled[b-y5oprcsgyu],
.rtm-form-select:disabled[b-y5oprcsgyu] { opacity: 0.6; cursor: default; }

.rtm-form-error[b-y5oprcsgyu] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--motiva-radius-sm, 10px);
    background: color-mix(in srgb, var(--motiva-color-rose, #D93864) 8%, transparent);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.35;
    color: var(--motiva-color-rose-ink, #B23256);
}

.rtm-form-error svg[b-y5oprcsgyu] { flex: 0 0 auto; }

/* A note inside the confirm dialog when the server will refuse. */
.rtm-confirm-note[b-y5oprcsgyu] {
    display: block;
    margin-top: 8px;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.45;
    color: var(--motiva-text-muted, #8B8698);
}

/* ── Handler choice — three bordered cards ─────────────────── */
.rtm-choice-grid[b-y5oprcsgyu] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.rtm-choice[b-y5oprcsgyu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    border-radius: var(--motiva-radius-md, 14px);
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
    border: 1.5px solid var(--motiva-border-card, #EFEDF4);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    color: var(--motiva-text-primary, #1A1820);
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.rtm-choice:hover:not(:disabled)[b-y5oprcsgyu] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 26%, transparent);
}

/* The picked card is one of the few places a violet wash is right: it is a
   selected control, not a status, and the border carries the commitment. */
.rtm-choice--on[b-y5oprcsgyu] {
    background: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 7%, transparent);
    border-color: var(--motiva-color-violet, #4F46E5);
}

.rtm-choice:disabled[b-y5oprcsgyu] { opacity: 0.6; cursor: default; }

.rtm-choice:focus-visible[b-y5oprcsgyu] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

.rtm-choice-label[b-y5oprcsgyu] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
}

.rtm-choice-dot[b-y5oprcsgyu] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.rtm-choice-dot--admin[b-y5oprcsgyu]  { background: var(--motiva-color-violet, #4F46E5); }
.rtm-choice-dot--staff[b-y5oprcsgyu]  { background: var(--motiva-text-muted, #8B8698); }
.rtm-choice-dot--mentor[b-y5oprcsgyu] { background: var(--motiva-color-teal, #0D9C9A); }

/* ── Switch rows ───────────────────────────────────────────── */
.rtm-switch-row[b-y5oprcsgyu] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--motiva-radius-md, 14px);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
}

.rtm-switch-copy[b-y5oprcsgyu] { min-width: 0; flex: 1 1 auto; }

.rtm-switch-title[b-y5oprcsgyu] {
    display: block;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
}

.rtm-switch-note[b-y5oprcsgyu] {
    display: block;
    margin-top: 4px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    color: var(--motiva-text-muted, #8B8698);
}

/* ── Field builder rows ────────────────────────────────────── */
.rtm-fields-list[b-y5oprcsgyu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rtm-field-card[b-y5oprcsgyu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--motiva-radius-md, 14px);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
}

.rtm-field-card-row[b-y5oprcsgyu] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.rtm-field-card-req[b-y5oprcsgyu] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--motiva-control-height-md, 38px);
    flex: 0 0 auto;
}

.rtm-field-card-req-label[b-y5oprcsgyu] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
}

.rtm-icon-danger[b-y5oprcsgyu] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: var(--motiva-control-height-md, 38px);
    border: 0;
    border-radius: var(--motiva-radius-sm, 10px);
    background: none;
    color: var(--motiva-color-rose-ink, #B23256);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.rtm-icon-danger:hover:not(:disabled)[b-y5oprcsgyu] {
    background: color-mix(in srgb, var(--motiva-color-rose, #D93864) 8%, transparent);
}

.rtm-icon-danger:disabled[b-y5oprcsgyu] { opacity: 0.5; cursor: default; }

.rtm-icon-danger:focus-visible[b-y5oprcsgyu] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 1px;
}

/* ── Narrow Management viewports ─────────────────────────────
   The table's own scroller takes over below ~1000px (MDataTable). Here
   the page furniture stops trying to hold single lines. */
@media (max-width: 900px) {
    .rtm-stats[b-y5oprcsgyu] { margin-inline-start: 0; }
    .rtm-result[b-y5oprcsgyu] { margin-inline-start: 0; }

    .rtm-form-grid[b-y5oprcsgyu],
    .rtm-form-grid--head[b-y5oprcsgyu] { grid-template-columns: 1fr; }
    .rtm-choice-grid[b-y5oprcsgyu] { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .rtm-menu-item[b-y5oprcsgyu],
    .rtm-filter-btn[b-y5oprcsgyu],
    .rtm-choice[b-y5oprcsgyu],
    .rtm-kebab[b-y5oprcsgyu],
    .rtm-modal-close[b-y5oprcsgyu],
    .rtm-icon-danger[b-y5oprcsgyu] { transition: none; }
}
/* /Pages/Management/RoleSettings/RoleSettingsManagement.razor.rz.scp.css */
/* ============================================================
   RoleSettingsManagement — הרשאות לפי תפקיד (Admin)
   Prefix: rs-

   Visual source:
       Client/Pages/Management/Milestones/MilestonesManagement.razor.css
       Client/Pages/Management/Users/UsersManagement.razor.css

   The same finished Admin recipe — header rhythm, strip, MDataTable
   treatment, button language — applied to a matrix instead of a list.

   Design tokens: motiva-tokens.css. The page renders inside the canvas
   shell (.motiva .motiva-final .motiva-lecturer), so every --motiva-*
   token already resolves to the finished design's value. The var()
   fallbacks exist only so the page still renders sanely outside it.

   The previous version of this file was written against the legacy --g-*
   ramp, which inside .motiva-final yields the right colours with the wrong
   geometry — hence a replacement rather than a patch.

   Layout:
       header (crumb / title + subtitle · unsaved note)
       ↓ 14px
       strip  (explainer · 2 summary pills)
       ↓ 14px
       MDataTable — 5 roles × 9 flags + a per-row save
       ↓ 14px
       legend (the two column families)
   ============================================================ */

/* ── Page shell ────────────────────────────────────────────── */
.rs-page[b-msfpzvenrs] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
    padding-block-end: 40px;
}

/* Page header is now <MPageHeaderCard>; old .rs-head* rows removed. */

.rs-subtitle[b-msfpzvenrs] {
    margin: 0;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
}

/* "שינויים שלא נשמרו" — an ATTENTION note, not an error. It says work is
   pending, and nothing has failed, so it takes the brand tag surface
   rather than rose. */
.rs-dirty-note[b-msfpzvenrs] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-tag-brand-surface);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
    white-space: nowrap;
}

.rs-dirty-dot[b-msfpzvenrs] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--motiva-color-violet, #4F46E5);
}

/* The `rs-strip` row and its three-pill `rs-stat*` recipe used to live
   here. The page's counts are now one MSummaryTag on the header line, so
   every rule that painted those separate pills is dead. */

/* ============================================================
   THE MATRIX
   Surface, head rhythm, dividers and hover come from MDataTable.
   ============================================================ */

.rs-col-role[b-msfpzvenrs]    { width: 168px; }
.rs-col-flag[b-msfpzvenrs]    { width: 92px; }
.rs-col-actions[b-msfpzvenrs] { width: 96px; }

/* Flag headers are the one place a Management table wants a wrapping,
   centred head cell: nine Hebrew capability names cannot each hold a
   single nowrap line inside 92px. The element selector is what beats
   MDataTable's own `.m-dt-head ::deep th`. */
.rs-page[b-msfpzvenrs]  th.rs-th-flag,
.rs-page[b-msfpzvenrs]  th.rs-th-actions {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    padding-inline: 6px;
    vertical-align: bottom;
}

.rs-page[b-msfpzvenrs]  th.rs-th-role { white-space: nowrap; }

/* The band change between the five ניהול flags and the four שימוש flags.
   A hairline, not a colour: the two families are a reading aid, not a
   status distinction. */
.rs-page[b-msfpzvenrs]  th.rs-th-flag--band,
.rs-page[b-msfpzvenrs]  td.rs-cell-flag--band {
    border-inline-start: 1px solid var(--motiva-border-subtle, #F0EEF9);
}

.rs-cell-flag[b-msfpzvenrs] { text-align: center; }

.rs-cell-role[b-msfpzvenrs] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* A row with pending edits takes the brand breath — the same "something is
   waiting on you" surface the header note uses. */
.rs-row--dirty[b-msfpzvenrs] { background: var(--motiva-tag-brand-surface); }

/* ── Role chip ───────────────────────────────────────────────
   CATEGORICAL, NOT SEMANTIC — a role is neither progress nor attention, so
   these stay low-alpha tints and rose is not used here at all. */
.rs-role[b-msfpzvenrs] {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: var(--motiva-radius-full, 999px);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.25;
    white-space: nowrap;
}

.rs-role--admin[b-msfpzvenrs] {
    background: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 9%, transparent);
    color: var(--motiva-color-violet, #4F46E5);
}

.rs-role--staff[b-msfpzvenrs] {
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary, #1A1820);
}

/* The teal token is too light for 12px text on its own tint. */
.rs-role--mentor[b-msfpzvenrs] {
    background: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 11%, transparent);
    color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 82%, #000);
}

.rs-role--student[b-msfpzvenrs] {
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.04));
    color: var(--motiva-text-secondary, #5B5568);
}

.rs-role--user[b-msfpzvenrs] {
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.04));
    color: var(--motiva-text-muted, #8B8698);
}

.rs-unsaved[b-msfpzvenrs] {
    flex: 0 0 auto;
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-color-violet, #4F46E5);
    white-space: nowrap;
}

/* ── Checkbox ────────────────────────────────────────────────
   The matrix's own control. A toggle per cell would be 45 switches on one
   screen; at this density a box that is either filled or empty is what can
   actually be scanned column-wise. */
.rs-check[b-msfpzvenrs] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border-radius: 6px;
    border: 1.5px solid var(--motiva-border-strong, #DEDBE8);
    background: var(--motiva-surface-primary, #fff);
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.rs-check:hover[b-msfpzvenrs] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 45%, transparent);
}

.rs-check:checked[b-msfpzvenrs] {
    background-color: var(--motiva-color-violet, #4F46E5);
    border-color: var(--motiva-color-violet, #4F46E5);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
    background-size: 13px 13px;
    background-position: center;
    background-repeat: no-repeat;
}

.rs-check:focus-visible[b-msfpzvenrs] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* ── Per-row save ────────────────────────────────────────────
   Quiet until there is something to save, then the shared gradient CTA —
   the same primary language as every other Management action. Green is
   not a colour this system uses. */
.rs-cell-actions[b-msfpzvenrs] { text-align: center; }

/* GEOMETRY ONLY on the base rule. The dirty button carries .motiva-cta,
   whose gradient is declared at specificity (0,1,0); anything this scoped
   sheet paints here would be (0,2,0) and would silently outrank it — the
   quiet state therefore lives on its own class instead. */
.rs-save[b-msfpzvenrs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    height: var(--motiva-control-height-sm, 32px);
    border: 0;
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.rs-save--off[b-msfpzvenrs] {
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
    color: var(--motiva-text-subtle, #B7B2C2);
}

.rs-save:disabled[b-msfpzvenrs] { cursor: default; }

.rs-save:focus-visible[b-msfpzvenrs] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* ── Save error ──────────────────────────────────────────────
   Rose, and only here: a failed PUT is the one genuine fault state on
   this page. */
.rs-error[b-msfpzvenrs] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 11px 14px;
    border-radius: var(--motiva-radius-md, 14px);
    background: color-mix(in srgb, var(--motiva-color-rose, #D93864) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--motiva-color-rose, #D93864) 24%, transparent);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.35;
    color: var(--motiva-color-rose-ink, #B23256);
}

.rs-error svg[b-msfpzvenrs] { flex: 0 0 auto; }

/* ── Legend ──────────────────────────────────────────────── */
.rs-legend[b-msfpzvenrs] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0 2px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.4;
    color: var(--motiva-text-muted, #8B8698);
}

.rs-legend-item[b-msfpzvenrs] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.rs-legend-dot[b-msfpzvenrs] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.rs-legend-dot--manage[b-msfpzvenrs] { background: var(--motiva-color-violet, #4F46E5); }
.rs-legend-dot--use[b-msfpzvenrs]    { background: var(--motiva-color-teal, #0D9C9A); }

.rs-sr[b-msfpzvenrs] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Narrow Management viewports ─────────────────────────────
   The matrix is 1080px wide, so its scroller has to engage well before
   MDataTable's own 1000px default. */
.rs-page[b-msfpzvenrs]  .m-dt-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

@media (max-width: 900px) {
    .rs-stats[b-msfpzvenrs] { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .rs-check[b-msfpzvenrs] { transition: none; }
}
/* /Pages/Management/Tasks/TasksManagement.razor.rz.scp.css */
/* ============================================================
   TasksManagement — ניהול תבניות משימות (Admin)
   Prefix: tt-

   Visual source:
       design/design-system/Motiva Admin Task Templates.dc.html
       Client/Pages/Management/Milestones/MilestonesManagement.razor.css

   THE SIBLING RULE
   This file and MilestonesManagement (ms-) are deliberately the same
   stylesheet with different cells. Page shell, header rhythm, summary
   pills, toolbar, popup-menu recipe, table treatment, modal shell, type
   chips and status language are identical by construction — the two pages
   are two views of one relationship, and a reader moving between them
   should not feel a seam. What differs is only what the entities differ
   in: this page has no order column, and it has a submission policy.

   Design tokens: motiva-tokens.css. The page renders inside the canvas
   shell (.motiva .motiva-final .motiva-lecturer), so every --motiva-*
   token already resolves to the finished design's value. The var()
   fallbacks exist only so the page still renders sanely outside it.

   The previous version of this file used the legacy --g-* ramp and the
   `tk-` prefix; it is replaced rather than patched.
   ============================================================ */

/* ── Page shell ────────────────────────────────────────────── */
.tt-page[b-w4qqnd3x8r] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
    padding-block-end: 40px;
}

/* ── Header ────────────────────────────────────────────────── */
/* The page header is now <MPageHeaderCard>: MAdminBack in Leading,
   MInfoTip in TitleTrailing, the "new task template" CTA in Actions. The
   old floating .tt-head / .tt-head-main / .tt-head-line / .tt-h1 /
   .tt-head-actions rules are gone. */

.tt-subtitle[b-w4qqnd3x8r] {
    margin: 0;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
}

/* ── Buttons ───────────────────────────────────────────────── */
.tt-btn-primary[b-w4qqnd3x8r] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    padding: 0 16px;
    height: var(--motiva-control-height-md, 38px);
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.tt-btn-primary--lg[b-w4qqnd3x8r] { padding: 0 18px; font-size: var(--motiva-font-size-control, 13.5px); }
.tt-btn-primary:disabled[b-w4qqnd3x8r] { opacity: 0.55; cursor: default; }

.tt-btn-ghost[b-w4qqnd3x8r] {
    padding: 0 14px;
    height: var(--motiva-control-height-md, 38px);
    border: 0;
    background: none;
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-secondary, #5B5568);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.tt-btn-ghost:hover[b-w4qqnd3x8r] { background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035)); }
.tt-btn-ghost:disabled[b-w4qqnd3x8r] { opacity: 0.5; cursor: default; }

.tt-btn-primary:focus-visible[b-w4qqnd3x8r],
.tt-btn-ghost:focus-visible[b-w4qqnd3x8r] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* ── Summary pills ─────────────────────────────────────────── */
.tt-stats[b-w4qqnd3x8r] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 2px;
}

.tt-stat[b-w4qqnd3x8r] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: var(--motiva-radius-full, 999px);
    /* Panel fill — was .7 white, which reads grey over the canvas wash. */
    background: var(--motiva-panel-surface, #FFFFFF);
    border: 1px solid var(--motiva-panel-border, rgba(109, 40, 245, 0.08));
    white-space: nowrap;
}

.tt-stat-dot[b-w4qqnd3x8r] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* Solid fills, not the sweep: below ~12px the violet→teal gradient renders
   as its blue midpoint and stops reading as the brand. */
.tt-stat-dot--total[b-w4qqnd3x8r]      { background: var(--motiva-color-violet, #4F46E5); }
.tt-stat-dot--active[b-w4qqnd3x8r]     { background: var(--motiva-color-teal, #0D9C9A); }
.tt-stat-dot--submission[b-w4qqnd3x8r] { background: var(--motiva-text-muted, #8B8698); }

/* The unassigned pool. Rose-inked, because an unassigned template is the
   one state on this page that will silently do nothing at rollout — it is
   the closest thing here to something needing attention. */
.tt-stat-dot--unassigned[b-w4qqnd3x8r] { background: var(--motiva-color-rose-ink, #B23256); }

.tt-stat-value[b-w4qqnd3x8r] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
    font-variant-numeric: tabular-nums;
}

.tt-stat-label[b-w4qqnd3x8r] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
}

/* ── Popup menus — one recipe, two callers ─────────────────── */
.tt-filter[b-w4qqnd3x8r],
.tt-actions[b-w4qqnd3x8r] {
    position: relative;
    display: flex;
}

.tt-menu[b-w4qqnd3x8r] {
    position: absolute;
    top: calc(100% + 6px);
    z-index: var(--motiva-z-dropdown, 500);
    min-width: 186px;
    padding: 6px;
    border-radius: var(--motiva-radius-md, 14px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    box-shadow: var(--motiva-shadow-md, 0 16px 36px rgba(30, 20, 60, 0.14));
}

/* Filter pills sit mid-toolbar, so their menu hangs from the reading start.
   The milestone filter can hold long Hebrew titles, hence the wider min. */
.tt-menu--filter[b-w4qqnd3x8r] {
    inset-inline-start: 0;
    min-width: 210px;
    max-height: 280px;
    overflow-y: auto;
}

/* The kebab sits at the row's INLINE END — the far left in RTL — so its
   menu anchors its own end edge there and grows inward. `inset-inline-start`
   would push its width off the viewport and give the page a horizontal
   scrollbar. */
.tt-menu--row[b-w4qqnd3x8r] {
    inset-inline-end: 0;
    top: calc(100% + 4px);
    min-width: 200px;
}

.tt-menu-item[b-w4qqnd3x8r] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    background: none;
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.tt-menu-item:hover:not(:disabled)[b-w4qqnd3x8r] { background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035)); }

.tt-menu-item:focus-visible[b-w4qqnd3x8r] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: -2px;
}

.tt-menu-item:disabled[b-w4qqnd3x8r] { color: var(--motiva-text-subtle, #B7B2C2); cursor: default; }
.tt-menu-item svg[b-w4qqnd3x8r] { flex: 0 0 auto; color: var(--motiva-text-muted, #8B8698); }
.tt-menu-item-label[b-w4qqnd3x8r] { flex: 1 1 auto; }

.tt-menu-item--on[b-w4qqnd3x8r] { font-weight: var(--motiva-font-weight-semibold, 600); }
.tt-menu-check[b-w4qqnd3x8r] { color: var(--motiva-color-violet, #4F46E5); }

.tt-menu-item--danger[b-w4qqnd3x8r] { color: var(--motiva-color-rose-ink, #B23256); }
.tt-menu-item--danger svg[b-w4qqnd3x8r] { color: currentColor; }

.tt-menu-item--danger:hover:not(:disabled)[b-w4qqnd3x8r] {
    background: color-mix(in srgb, var(--motiva-color-rose, #D93864) 8%, transparent);
}

.tt-menu-sep[b-w4qqnd3x8r] {
    height: 1px;
    margin: 5px 8px;
    background: var(--motiva-border-subtle, #F0EEF9);
}

/* ── Toolbar ─────────────────────────────────────────────────
   Four filters here against the milestone page's two, so the search gets a
   smaller basis — otherwise the pills wrap to a second line at widths
   where they would still have fitted. */
.tt-toolbar[b-w4qqnd3x8r] {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 2px;
}

/* ::deep because MSearchField renders its own root, which carries ITS
   isolation attribute and not this page's. A flex-basis alone leaves the
   wrapper at ~190px — the width has to be stated. */
.tt-toolbar[b-w4qqnd3x8r]  .tt-search {
    flex: 1 1 260px;
    max-width: 420px;
}

.tt-filter-btn[b-w4qqnd3x8r] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 15px;
    border-radius: var(--motiva-radius-full, 999px);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    color: var(--motiva-text-primary, #1A1820);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.tt-filter-btn:hover[b-w4qqnd3x8r] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 22%, transparent);
}

.tt-filter-btn:focus-visible[b-w4qqnd3x8r] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* Applied filter — the brand EDGE, not the prototype's violet wash. */
.tt-filter-btn--on[b-w4qqnd3x8r] {
    background: var(--motiva-tag-brand-surface);
    border-color: transparent;
    color: var(--motiva-text-primary, #1A1820);
}

.tt-filter-btn--on:hover[b-w4qqnd3x8r] {
    border-color: transparent;
    filter: brightness(0.99) saturate(1.08);
}

.tt-filter-btn--on .tt-filter-name[b-w4qqnd3x8r] { color: var(--motiva-text-muted, #8B8698); }

.tt-filter-name[b-w4qqnd3x8r] {
    font-size: var(--motiva-font-size-control, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #8B8698);
}

/* The milestone filter can carry a long Hebrew title; it truncates rather
   than letting one pill push the rest of the toolbar onto a new line. */
.tt-filter-value[b-w4qqnd3x8r] {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-control, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
}

.tt-filter-chev[b-w4qqnd3x8r] {
    flex: 0 0 auto;
    color: var(--motiva-text-muted, #8B8698);
    transition: transform var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.tt-filter-chev--open[b-w4qqnd3x8r] { transform: rotate(180deg); }

.tt-clear[b-w4qqnd3x8r] {
    align-self: center;
    padding: 8px 4px;
    border: 0;
    background: none;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-color-violet, #4F46E5);
    white-space: nowrap;
    cursor: pointer;
}

.tt-clear:hover[b-w4qqnd3x8r] { text-decoration: underline; }

.tt-clear:focus-visible[b-w4qqnd3x8r] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
    border-radius: 4px;
}

.tt-result[b-w4qqnd3x8r] {
    align-self: center;
    margin-inline-start: auto;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
}

/* ============================================================
   TABLE
   ============================================================ */

.tt-col-ms[b-w4qqnd3x8r]      { width: 168px; }
.tt-col-type[b-w4qqnd3x8r]    { width: 118px; }
.tt-col-dates[b-w4qqnd3x8r]   { width: 132px; }
.tt-col-sub[b-w4qqnd3x8r]     { width: 82px; }
.tt-col-status[b-w4qqnd3x8r]  { width: 96px; }
.tt-col-actions[b-w4qqnd3x8r] { width: 48px; }

.tt-row--off[b-w4qqnd3x8r] { opacity: 0.62; }

.tt-cell-name[b-w4qqnd3x8r] { min-width: 0; }

.tt-name[b-w4qqnd3x8r] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.25;
    color: var(--motiva-text-primary, #1A1820);
}

.tt-desc[b-w4qqnd3x8r] {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    color: var(--motiva-text-muted, #8B8698);
}

/* ── Milestone cell ──────────────────────────────────────────
   The mirror of the Milestones page's משימות count — the other half of the
   same relationship, named rather than counted because a task has at most
   one milestone. */
.tt-cell-ms[b-w4qqnd3x8r] { min-width: 0; }

.tt-ms-name[b-w4qqnd3x8r] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.3;
    color: var(--motiva-text-secondary, #5B5568);
}

/* Unassigned. Rose ink on paper, no fill: it is not an error, but it is the
   one row state that means "this will not reach any project", and a reader
   scanning the column should be able to find those without reading. */
.tt-unassigned[b-w4qqnd3x8r] {
    display: inline-flex;
    align-items: center;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-color-rose-ink, #B23256);
    white-space: nowrap;
}

/* ── Project-type chip — inherited from the milestone ────────
   Same recipe as the Milestones page, plus a fourth "none" tone for
   unassigned templates, which have no type to inherit. */
.tt-type[b-w4qqnd3x8r] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-full, 999px);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
}

.tt-type-dot[b-w4qqnd3x8r] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: currentColor;
}

.tt-type--tech[b-w4qqnd3x8r] {
    background: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 8%, transparent);
    color: var(--motiva-color-violet, #4F46E5);
}

.tt-type--method[b-w4qqnd3x8r] {
    background: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 10%, transparent);
    /* The teal token is too light for 11px text on its own tint. */
    color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 82%, #000);
}

.tt-type--both[b-w4qqnd3x8r] {
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary, #1A1820);
}

.tt-type--both .tt-type-dot[b-w4qqnd3x8r] { background: var(--motiva-color-violet, #4F46E5); }

/* No milestone, so no inherited type. Neutral — an absence, not a category. */
.tt-type--none[b-w4qqnd3x8r] {
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
    color: var(--motiva-text-subtle, #B7B2C2);
}

/* ── Values ──────────────────────────────────────────────── */
.tt-cell-dates[b-w4qqnd3x8r] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.2;
    white-space: nowrap;
    color: var(--motiva-text-secondary, #5B5568);
}

.tt-cell-empty[b-w4qqnd3x8r] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-subtle, #B7B2C2);
}

/* Submission marker — violet, matching the same flag in the milestone
   editor's task list so one concept has one colour across both pages. */
.tt-sub-yes[b-w4qqnd3x8r] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-color-violet, #4F46E5);
    white-space: nowrap;
}

/* ── Status ──────────────────────────────────────────────── */
.tt-status[b-w4qqnd3x8r] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--motiva-font-size-caption, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
}

.tt-status-dot[b-w4qqnd3x8r] {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.tt-status--on[b-w4qqnd3x8r]  { color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 88%, #000); }
.tt-status--off[b-w4qqnd3x8r] { color: var(--motiva-text-muted, #8B8698); }

/* ── Row actions ───────────────────────────────────────────── */
.tt-cell-actions[b-w4qqnd3x8r] { position: relative; }

/* An open menu has to paint over the rows BELOW it. */
.tt-page tr.m-dt-row-active .tt-cell-actions[b-w4qqnd3x8r] { z-index: 20; }

.tt-actions[b-w4qqnd3x8r] { justify-content: flex-end; }

.tt-kebab[b-w4qqnd3x8r] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--motiva-text-muted, #8B8698);
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.tt-kebab:hover[b-w4qqnd3x8r],
.tt-kebab--on[b-w4qqnd3x8r] {
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035));
    color: var(--motiva-text-primary, #1A1820);
}

.tt-kebab:focus-visible[b-w4qqnd3x8r] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 1px;
}

.tt-sr[b-w4qqnd3x8r] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   MODAL
   ============================================================ */

.tt-modal-overlay[b-w4qqnd3x8r] {
    position: fixed;
    inset: 0;
    z-index: var(--motiva-z-modal, 1000);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(26, 24, 32, 0.36);
    backdrop-filter: blur(2px);
}

.tt-modal-box[b-w4qqnd3x8r] {
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    border-radius: var(--motiva-radius-xl, 24px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    box-shadow: var(--motiva-shadow-lg, 0 32px 70px rgba(30, 20, 60, 0.28));
    overflow: hidden;
}

.tt-modal-box--lg[b-w4qqnd3x8r] { max-width: 660px; }

.tt-modal-header[b-w4qqnd3x8r] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 22px 14px;
}

.tt-modal-glyph[b-w4qqnd3x8r] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--motiva-radius-sm, 10px);
    background:
        linear-gradient(140deg,
            color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 13%, transparent),
            color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 11%, transparent)),
        var(--motiva-surface-primary, #fff);
    color: var(--motiva-color-violet, #4F46E5);
}

.tt-modal-titles[b-w4qqnd3x8r] { min-width: 0; flex: 1 1 auto; }

.tt-modal-title[b-w4qqnd3x8r] {
    font-size: var(--motiva-font-size-h2, 18px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.3;
    color: var(--motiva-text-primary, #1A1820);
}

.tt-modal-subtitle[b-w4qqnd3x8r] {
    margin-top: 4px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.3;
    color: var(--motiva-text-muted, #8B8698);
}

.tt-modal-close[b-w4qqnd3x8r] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--motiva-text-muted, #8B8698);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.tt-modal-close:hover[b-w4qqnd3x8r] {
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035));
    color: var(--motiva-text-primary, #1A1820);
}

.tt-modal-body[b-w4qqnd3x8r] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 22px 18px;
    overflow-y: auto;
}

/* Modal-body children never shrink — see the matching note on the Milestones
 * stylesheet. The body is a scrolling column flex container, and any child with
 * `overflow: hidden` (here .tt-res-list) would otherwise have its automatic
 * minimum size resolve to 0 and be crushed to a sliver while still in the DOM. */
.tt-modal-body > *[b-w4qqnd3x8r] { flex-shrink: 0; }

.tt-modal-footer[b-w4qqnd3x8r] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 22px 20px;
    border-top: 1px solid var(--motiva-border-subtle, #F0EEF9);
}

.tt-footer-note[b-w4qqnd3x8r] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
}

.tt-footer-actions[b-w4qqnd3x8r] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
}

/* ── Form controls ───────────────────────────────────────── */
.tt-form-section[b-w4qqnd3x8r] {
    margin: 10px 0 -2px;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1;
    letter-spacing: 0.03em;
    color: var(--motiva-text-muted, #8B8698);
}

.tt-form-section:first-child[b-w4qqnd3x8r] { margin-top: 4px; }
.tt-form-section--inline[b-w4qqnd3x8r] { margin: 0 0 2px; }

.tt-form-grid[b-w4qqnd3x8r] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.tt-form-field[b-w4qqnd3x8r] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tt-form-label[b-w4qqnd3x8r] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
}

.tt-req[b-w4qqnd3x8r]      { color: var(--motiva-color-rose-ink, #B23256); }
.tt-optional[b-w4qqnd3x8r] { font-weight: var(--motiva-font-weight-medium, 500); color: var(--motiva-text-subtle, #B7B2C2); }

.tt-form-input[b-w4qqnd3x8r],
.tt-form-select[b-w4qqnd3x8r],
.tt-form-textarea[b-w4qqnd3x8r] {
    width: 100%;
    box-sizing: border-box;
    padding: 0 12px;
    height: var(--motiva-control-height-md, 38px);
    border-radius: var(--motiva-radius-sm, 10px);
    background: var(--motiva-surface-secondary, #FAF9F7);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-primary, #1A1820);
    transition: border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.tt-form-input--num[b-w4qqnd3x8r] {
    text-align: center;
    font-weight: var(--motiva-font-weight-semibold, 600);
    font-variant-numeric: tabular-nums;
}

.tt-form-textarea[b-w4qqnd3x8r] {
    height: auto;
    min-height: 66px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
}

.tt-form-input[b-w4qqnd3x8r]::placeholder,
.tt-form-textarea[b-w4qqnd3x8r]::placeholder { color: var(--motiva-text-subtle, #B7B2C2); }

.tt-form-input:focus[b-w4qqnd3x8r],
.tt-form-select:focus[b-w4qqnd3x8r],
.tt-form-textarea:focus[b-w4qqnd3x8r] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: -1px;
    border-color: var(--motiva-color-focus-ring, #4F46E5);
}

/* ── Inherited-value row ─────────────────────────────────────
   Reads as a fact, not a field: no input chrome, no focus ring. The
   prototype makes this editable; the engine never reads a task-level type,
   so showing it as read-only is the honest form. */
.tt-inherit[b-w4qqnd3x8r] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 11px 14px;
    border-radius: var(--motiva-radius-md, 14px);
    border: 1px dashed var(--motiva-border-strong, #DCD8E6);
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
}

.tt-inherit-label[b-w4qqnd3x8r] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
}

.tt-inherit-note[b-w4qqnd3x8r] {
    margin-inline-start: auto;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    color: var(--motiva-text-muted, #8B8698);
}

/* ── Switch rows ───────────────────────────────────────────── */
.tt-switch-row[b-w4qqnd3x8r] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--motiva-radius-md, 14px);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
}

.tt-switch-copy[b-w4qqnd3x8r] { min-width: 0; flex: 1 1 auto; }

.tt-switch-title[b-w4qqnd3x8r] {
    display: block;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
}

.tt-switch-note[b-w4qqnd3x8r] {
    display: block;
    margin-top: 4px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    color: var(--motiva-text-muted, #8B8698);
}

/* ── Submission policy panel ─────────────────────────────────
   Revealed by the toggle. Inset on a tinted surface so it reads as
   belonging to the switch above it rather than as a new top-level section. */
.tt-subpanel[b-w4qqnd3x8r] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: var(--motiva-radius-md, 14px);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
}

/* Extension allow-list. Small toggling chips rather than checkboxes: seven
   of them in a checkbox column would dominate the panel. */
.tt-chip-row[b-w4qqnd3x8r] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.tt-chip[b-w4qqnd3x8r] {
    padding: 6px 12px;
    border-radius: var(--motiva-radius-full, 999px);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-surface-primary, #fff);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.tt-chip:hover[b-w4qqnd3x8r] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 26%, transparent);
}

.tt-chip--on[b-w4qqnd3x8r] {
    background: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 7%, transparent);
    border-color: var(--motiva-color-violet, #4F46E5);
    color: var(--motiva-color-violet, #4F46E5);
}

.tt-chip:focus-visible[b-w4qqnd3x8r] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* Linked resource files. Same row recipe as the milestone editor's task
   picker, so "a list of things you tick" looks the same on both pages. */
.tt-res-list[b-w4qqnd3x8r] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 180px;
    overflow-y: auto;
    padding-inline-end: 2px;
}

.tt-res-row[b-w4qqnd3x8r] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    border-radius: var(--motiva-radius-sm, 10px);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-surface-primary, #fff);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    text-align: start;
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.tt-res-row:hover[b-w4qqnd3x8r] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 26%, transparent);
}

.tt-res-row--on[b-w4qqnd3x8r] {
    background: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 5%, transparent);
    border-color: var(--motiva-color-violet, #4F46E5);
}

.tt-res-row:focus-visible[b-w4qqnd3x8r] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

.tt-res-check[b-w4qqnd3x8r] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--motiva-border-strong, #DCD8E6);
    background: var(--motiva-surface-primary, #fff);
    color: #fff;
}

.tt-res-check--on[b-w4qqnd3x8r] {
    background: var(--motiva-color-violet, #4F46E5);
    border-color: var(--motiva-color-violet, #4F46E5);
}

.tt-res-name[b-w4qqnd3x8r] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.3;
    color: var(--motiva-text-primary, #1A1820);
}

/* ── Inline feedback ─────────────────────────────────────── */
.tt-form-note[b-w4qqnd3x8r],
.tt-form-error[b-w4qqnd3x8r] {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--motiva-radius-sm, 10px);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.45;
}

.tt-form-note[b-w4qqnd3x8r] {
    background: var(--motiva-color-neutral-bg, rgba(26, 24, 32, 0.02));
    color: var(--motiva-text-secondary, #5B5568);
}

/* The one notice that says "this will write to live project data". Brand
   edge rather than rose — it is a consequence to read, not a failure. */
.tt-form-note--reach[b-w4qqnd3x8r] {
    background: var(--motiva-tag-brand-surface);
    border: 1px solid transparent;
}

.tt-form-error[b-w4qqnd3x8r] {
    background: color-mix(in srgb, var(--motiva-color-rose, #D93864) 8%, transparent);
    color: var(--motiva-color-rose-ink, #B23256);
}

.tt-spinner[b-w4qqnd3x8r] {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tt-spin-b-w4qqnd3x8r 0.7s linear infinite;
}

@keyframes tt-spin-b-w4qqnd3x8r { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .tt-spinner[b-w4qqnd3x8r] { animation-duration: 2.4s; }
    .tt-filter-chev[b-w4qqnd3x8r],
    .tt-menu-item[b-w4qqnd3x8r],
    .tt-chip[b-w4qqnd3x8r],
    .tt-res-row[b-w4qqnd3x8r],
    .tt-kebab[b-w4qqnd3x8r] { transition: none; }
}

/* ── Narrow Management viewports ───────────────────────────── */
@media (max-width: 900px) {
    .tt-toolbar[b-w4qqnd3x8r]  .tt-search { flex: 1 1 100%; max-width: none; }
    .tt-result[b-w4qqnd3x8r] { margin-inline-start: 0; }

    .tt-form-grid[b-w4qqnd3x8r] { grid-template-columns: 1fr; }

    .tt-inherit-note[b-w4qqnd3x8r] { margin-inline-start: 0; width: 100%; }

    .tt-modal-footer[b-w4qqnd3x8r] { align-items: stretch; }
    .tt-footer-actions[b-w4qqnd3x8r] { margin-inline-start: 0; justify-content: flex-end; }
}

/* ============================================================
   MODAL FORM HIERARCHY — refined
   The create/edit form read as one continuous list of controls: its
   group headings were 12px muted captions, indistinguishable from a
   field label, so nothing said where one decision ended and the next
   began. Grouping is carried by HEADING WEIGHT AND SPACING here, not
   by adding boxes — the form already had three kinds of bordered
   container and did not need a fourth.
   ============================================================ */

/* A real section heading: primary ink at label weight, with air above
   it. Was 12px/700 muted with 0.03em tracking — caption geometry doing
   a heading's job. */
.tt-modal-body .tt-form-section[b-w4qqnd3x8r] {
    margin: 20px 0 2px;
    font-size: var(--motiva-font-size-lg, 15px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.3;
    letter-spacing: normal;
    color: var(--motiva-text-primary, #1B1A22);
}

.tt-modal-body .tt-form-section:first-child[b-w4qqnd3x8r] { margin-top: 0; }

/* The revealed submission group's own heading sits inside its block, so
   it keeps the tighter inset. */
.tt-modal-body .tt-form-section--inline[b-w4qqnd3x8r] { margin: 0 0 4px; }

/* Field labels move off caption size too — they name the thing being
   typed into and are read on every pass through the form. */
.tt-modal-body .tt-form-label[b-w4qqnd3x8r] {
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-text-secondary, #5B5568);
}

/* ── הגדרות הגשה — a section, not a card ─────────────────────
   Was a bordered, gray-filled panel: a box inside a modal, with its own
   outline competing against the switch rows and the inherit strip. It
   keeps its grouping through a reading-edge and an inset instead, which
   also says the right thing — this content is conditional on the switch
   directly above it. */
.tt-modal-body .tt-subpanel[b-w4qqnd3x8r] {
    gap: 14px;
    padding: 2px 14px 2px 0;
    border: 0;
    border-inline-start: 3px solid var(--motiva-color-violet, #6D28F5);
    border-radius: 0;
    background: none;
    margin-block: 4px 2px;
}

/* Stacked switches. The two used to share a 1fr/1fr grid, which put an
   unrelated toggle beside the one that reveals a whole section. */
.tt-switch-stack[b-w4qqnd3x8r] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Helper text ─────────────────────────────────────────────
   One quiet line under the control it qualifies. This replaces the
   full-width gray `.tt-form-note` panel for the two cases that are
   guidance rather than announcements: they read like a step of the form
   when they are a footnote to one field. `.tt-form-note` itself is
   unchanged and still carries the live-project reach warning, which IS
   an announcement. */
.tt-form-hint[b-w4qqnd3x8r] {
    margin: 2px 0 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-regular, 400);
    line-height: 1.5;
    color: var(--motiva-text-muted, #8B8698);
}

/* The one hint that is a consequence rather than an explanation. */
.tt-form-hint--warn[b-w4qqnd3x8r] {
    color: var(--motiva-color-rose-ink, #B3234A);
    font-weight: var(--motiva-font-weight-medium, 500);
}
/* /Pages/Management/Users/UsersManagement.razor.rz.scp.css */
/* ============================================================
   UsersManagement — ניהול משתמשים (Admin)
   Prefix: um-

   Visual source:
       design-reference/Motiva Admin Users.dc.html

   Design tokens: motiva-tokens.css. The page renders inside the canvas
   shell (.motiva .motiva-final .motiva-lecturer), so every --motiva-*
   token below already resolves to the FINISHED design's value — 18px card
   radius, 38px controls, the warm ink ramp, violet/teal/rose. The var()
   fallbacks exist only so the page still renders sanely if it is ever
   viewed outside that scope.

   The previous version of this file was written against the legacy --g-*
   ramp, which inside .motiva-final yields the right colours with the wrong
   geometry (26px radii, 40px controls). That is why it is replaced rather
   than patched.

   Layout:
       header row (title + summary · import + add)
       ↓ 16px
       toolbar  (search · 3 filter pills · clear · count)
       ↓ 14px
       MDataTable, full canvas width
   ============================================================ */

/* ── Page shell ──────────────────────────────────────────────
   No max-width. The canvas shell already owns the side inset
   (--motiva-canvas-padding-inline); an Admin table wants every pixel of
   what it is given, and a centred column here would only throw desktop
   width away. min-width:0 keeps the table's min-width from propagating
   out and turning into PAGE-level horizontal scroll. */
.um-page[b-8lirmji6e8] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
    padding-block-end: 40px;
}

/* ── Header ──────────────────────────────────────────────────
   The page header is now <MPageHeaderCard> (shared .motiva-panel surface):
   MAdminBack in Leading, MInfoTip + MSummaryTag in TitleTrailing, the import
   and create actions in Actions. The old floating .um-head / .um-head-main /
   .um-head-title / .um-h1 / .um-head-actions rules are gone. */

/* ── Buttons ─────────────────────────────────────────────────
   One primary on the page. The gradient, radius, hover and press all come
   from the shared .motiva-cta in motiva-base.css — everything here is
   geometry, per that file's contract. */
.um-btn-primary[b-8lirmji6e8] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    padding: 0 16px;
    height: var(--motiva-control-height-md, 38px);
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.um-btn-primary--lg[b-8lirmji6e8] { padding: 0 18px; font-size: var(--motiva-font-size-control, 13.5px); }

.um-btn-primary:disabled[b-8lirmji6e8] { opacity: 0.6; cursor: default; }

/* Secondary — translucent paper with a hairline, warming to brand on
   hover. Never a second filled button: the reference gives the page one
   emphasis and one alternative. */
.um-btn-secondary[b-8lirmji6e8] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
    height: var(--motiva-control-height-md, 38px);
    border-radius: var(--motiva-radius-sm, 10px);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    color: var(--motiva-text-primary, #1A1820);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.um-btn-secondary:hover[b-8lirmji6e8] {
    background: #fff;
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 28%, transparent);
}

/* Ghost — modal cancel. Text weight only; a bordered cancel next to a
   gradient save reads as a second choice of equal standing. */
.um-btn-ghost[b-8lirmji6e8] {
    padding: 0 14px;
    height: var(--motiva-control-height-md, 38px);
    border: 0;
    background: none;
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-secondary, #5B5568);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.um-btn-ghost:hover[b-8lirmji6e8] { background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035)); }
.um-btn-ghost:disabled[b-8lirmji6e8] { opacity: 0.5; cursor: default; }

.um-btn-primary:focus-visible[b-8lirmji6e8],
.um-btn-secondary:focus-visible[b-8lirmji6e8],
.um-btn-ghost:focus-visible[b-8lirmji6e8] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* ── Popup menus — one recipe, two callers ───────────────────
   Filter menus and row menus are the same object: a floating white card of
   compact rows. Declared once so they cannot drift. (The import menu was the
   third caller until import became a wizard.) */
.um-filter[b-8lirmji6e8],
.um-actions[b-8lirmji6e8] {
    position: relative;
    display: flex;
}

.um-menu[b-8lirmji6e8] {
    position: absolute;
    top: calc(100% + 6px);
    z-index: var(--motiva-z-dropdown, 500);
    min-width: 180px;
    padding: 6px;
    border-radius: var(--motiva-radius-md, 14px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    box-shadow: var(--motiva-shadow-md, 0 16px 36px rgba(30, 20, 60, 0.14));
}

/* Anchored to the reading start of its trigger. `inset-inline-start: 0`
   rather than a physical side, so an LTR build needs no second rule. */
.um-menu--filter[b-8lirmji6e8] { inset-inline-start: 0; }

/* The kebab sits at the row's far end, so its menu hangs inward — the one
   direction with room. */
.um-menu--row[b-8lirmji6e8] {
    inset-inline-end: 0;
    top: calc(100% + 4px);
    min-width: 176px;
}

.um-menu-item[b-8lirmji6e8] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    background: none;
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.um-menu-item:hover:not(:disabled)[b-8lirmji6e8] { background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035)); }

.um-menu-item:focus-visible[b-8lirmji6e8] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: -2px;
}

.um-menu-item svg[b-8lirmji6e8] { flex: 0 0 auto; color: var(--motiva-text-muted, #8B8698); }

.um-menu-item-label[b-8lirmji6e8] { flex: 1 1 auto; }

/* Selected option — weight and a violet check, no filled row. */
.um-menu-item--on[b-8lirmji6e8] { font-weight: var(--motiva-font-weight-semibold, 600); }
.um-menu-check[b-8lirmji6e8] { color: var(--motiva-color-violet, #4F46E5); }

.um-menu-item:disabled[b-8lirmji6e8] {
    color: var(--motiva-text-subtle, #B7B2C2);
    cursor: default;
}

/* ── Toolbar ─────────────────────────────────────────────────
   align-items: stretch is doing real work. MSearchField owns its own
   height, and hardcoding a matching number on the filter pills would
   silently misalign the row the day that component's padding changes.
   Stretching makes the pills adopt whatever the search line resolves to,
   so the row is aligned by construction. */
.um-toolbar[b-8lirmji6e8] {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 2px;
}

/* The shared search control. ::deep because MSearchField renders its own
   root, which carries ITS isolation attribute and not this page's. */
.um-toolbar[b-8lirmji6e8]  .um-search {
    flex: 1 1 300px;
    max-width: 440px;
}

/* Filter pill — "name: value ⌄". The label stays quiet and the value
   carries the weight, so a row of three pills scans as three answers
   rather than three questions. */
.um-filter-btn[b-8lirmji6e8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 15px;
    border-radius: var(--motiva-radius-full, 999px);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    color: var(--motiva-text-primary, #1A1820);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.um-filter-btn:hover[b-8lirmji6e8] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 22%, transparent);
}

.um-filter-btn:focus-visible[b-8lirmji6e8] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* Applied filter — THE BRAND EDGE, not a violet tint.
 *
 * This was a violet-washed pill with a violet border. That is the flat-fill
 * mistake the system has a token specifically to prevent: in the Motiva
 * language an emphasised-but-not-actioned control is white paper with the
 * signature gradient showing as a 1px rule around it, and its ink stays dark.
 * A purple wash reads as a pressed button and puts a second accent colour on a
 * toolbar that already has one (the primary CTA).
 *
 * --motiva-tag-brand-surface is that treatment, declared once in
 * motiva-tokens.css and shared with every other brand-edged chip in the
 * product — three background layers: an opaque surface clipped to the padding
 * box, a translucent white softener, and the violet→teal sweep clipped to the
 * border box. It only shows if the border itself is transparent, which is why
 * the border-color is reset rather than left at the neutral hairline.
 *
 * Geometry is untouched: same height, radius, padding and gap as the resting
 * pill, so nothing in the toolbar row moves when a filter becomes active. */
.um-filter-btn--on[b-8lirmji6e8] {
    background: var(--motiva-tag-brand-surface);
    border-color: transparent;
    color: var(--motiva-text-primary, #1A1820);
}

/* Hover must not put the neutral/violet hairline back over the gradient —
 * `.um-filter-btn:hover` above would otherwise repaint border-color and the
 * sweep would vanish on pointer-over. The active pill's hover is the same
 * brightness step the CTA uses, so the feedback survives without a new colour. */
.um-filter-btn--on:hover[b-8lirmji6e8] {
    border-color: transparent;
    filter: brightness(0.99) saturate(1.08);
}

/* The label inside an active pill stays quiet — the gradient rule is what
   marks the pill as applied, so the "תפקיד"/"מחזור" caption does not also
   need to darken. */
.um-filter-btn--on .um-filter-name[b-8lirmji6e8] { color: var(--motiva-text-muted, #8B8698); }

.um-filter-name[b-8lirmji6e8] {
    font-size: var(--motiva-font-size-control, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #8B8698);
}

.um-filter-value[b-8lirmji6e8] {
    font-size: var(--motiva-font-size-control, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
}

.um-filter-chev[b-8lirmji6e8] {
    color: var(--motiva-text-muted, #8B8698);
    transition: transform var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.um-filter-chev--open[b-8lirmji6e8] { transform: rotate(180deg); }

.um-clear[b-8lirmji6e8] {
    align-self: center;
    padding: 8px 4px;
    border: 0;
    background: none;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-color-violet, #4F46E5);
    white-space: nowrap;
    cursor: pointer;
}

.um-clear:hover[b-8lirmji6e8] { text-decoration: underline; }

.um-clear:focus-visible[b-8lirmji6e8] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Pushed to the far end of the toolbar — the count answers the toolbar,
   so it belongs on the same line, at the end of it. */
.um-result[b-8lirmji6e8] {
    align-self: center;
    margin-inline-start: auto;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
}

/* ============================================================
   TABLE
   Surface, head rhythm, dividers and hover come from MDataTable.
   Everything below is what a Users cell specifically contains.
   ============================================================ */

/* Fixed columns. Name and email carry no width and share the remainder —
   see the <col> comment in the .razor. Sized so the seven columns total
   just under the 920px MinWidth the table declares. */
.um-col-role[b-8lirmji6e8]    { width: 112px; }
.um-col-cycle[b-8lirmji6e8]   { width: 104px; }
.um-col-phone[b-8lirmji6e8]   { width: 132px; }
.um-col-status[b-8lirmji6e8]  { width: 120px; }
.um-col-actions[b-8lirmji6e8] { width: 52px; }

/* ── Identity ────────────────────────────────────────────────
   The one place on the row that carries weight: a 34px initials disc and
   the name at 600. Everything else in the row is deliberately quieter, so
   a column of 28 rows scans by person. */
.um-identity[b-8lirmji6e8] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.um-avatar[b-8lirmji6e8] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    /* A tint of the signature sweep, not the sweep itself — at 34px a full
       violet→teal gradient would make every row shout. */
    background:
        linear-gradient(140deg,
            color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 12%, transparent),
            color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 12%, transparent)),
        var(--motiva-surface-primary, #fff);
    border: 1px solid color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 12%, transparent);
    font-size: 12px;
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
    user-select: none;
}

.um-name[b-8lirmji6e8] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.2;
    color: var(--motiva-text-primary, #1A1820);
}

/* ── Secondary values ────────────────────────────────────────
   dir="ltr" is on the cells themselves (email, phone); text-align:start
   would then flip them, so these two are explicitly ended-aligned to stay
   in the RTL column flow while reading left-to-right internally. */
.um-cell-email[b-8lirmji6e8] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.2;
    color: var(--motiva-text-secondary, #5B5568);
}

.um-cell-quiet[b-8lirmji6e8] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.2;
    white-space: nowrap;
    color: var(--motiva-text-secondary, #5B5568);
}

.um-cell-phone[b-8lirmji6e8] { text-align: right; }

/* ── Role tags ───────────────────────────────────────────────
   CATEGORICAL, NOT SEMANTIC. The Master's violet/teal/rose set means
   progress and attention; a role means neither, so these stay low-alpha
   tints, rose is not used here at all, and Admin gets the system's brand
   EDGE rather than a fourth invented hue. */
.um-role[b-8lirmji6e8] {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-full, 999px);
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
}

.um-role--student[b-8lirmji6e8] {
    background: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 8%, transparent);
    color: var(--motiva-color-violet, #4F46E5);
}

.um-role--mentor[b-8lirmji6e8] {
    background: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 10%, transparent);
    /* The teal token itself is too light for 11.5px text on its own tint. */
    color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 82%, #000);
}

.um-role--staff[b-8lirmji6e8] {
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035));
    color: var(--motiva-text-secondary, #5B5568);
}

/* AWAITING APPROVAL — an empty slot, not a category. It used to share the
   lecturer tint above, which made the one row where the distinction matters
   look exactly like the role it must not be mistaken for. No fill and a
   dashed edge instead: nothing has been assigned yet, and it reads that way
   at a glance down the column. No new hue — the same secondary ink. */
.um-role--none[b-8lirmji6e8] {
    background: transparent;
    border-style: dashed;
    border-color: var(--motiva-border-subtle, rgba(26, 24, 32, 0.12));
    color: var(--motiva-text-muted, #8A8394);
    font-weight: var(--motiva-font-weight-regular, 400);
}

/* The brand tag is an EDGE — a gradient hairline around paper. A flat
   violet fill is the recurring bug this token exists to prevent. */
.um-role--admin[b-8lirmji6e8] {
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary, #1A1820);
}

/* ── Status ──────────────────────────────────────────────────
   Dot + text, no filled pill. Two values across 28 rows: chips would
   become the loudest column on the screen and say the least.

   TWO STATES, NOT THE PROTOTYPE'S THREE. UserForAdmin exposes IsActive
   and nothing else — no verification/pending flag is returned by
   GET api/Admin — so "ממתין להפעלה" is absent rather than faked. */
.um-status[b-8lirmji6e8] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--motiva-font-size-caption, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
}

.um-status-dot[b-8lirmji6e8] {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.um-status--on[b-8lirmji6e8]  { color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 88%, #000); }
.um-status--off[b-8lirmji6e8] { color: var(--motiva-color-rose-ink, #B23256); }

/* ── Row actions ─────────────────────────────────────────────
   The kebab is quiet until hovered or opened: 28 dark glyphs down the
   last column would compete with the names. */
.um-cell-actions[b-8lirmji6e8] { position: relative; }

/* An open menu has to paint over the rows BELOW it. Every actions cell is
   positioned, so without this the next row's cell — later in tree order —
   paints on top of the popup. Raising only the active row is enough:
   at most one menu is open at a time. */
.um-page tr.m-dt-row-active .um-cell-actions[b-8lirmji6e8] { z-index: 20; }

.um-actions[b-8lirmji6e8] { justify-content: flex-end; }

.um-kebab[b-8lirmji6e8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--motiva-text-muted, #8B8698);
    cursor: pointer;
    transition:
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.um-kebab:hover[b-8lirmji6e8],
.um-kebab--on[b-8lirmji6e8] {
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035));
    color: var(--motiva-text-primary, #1A1820);
}

.um-kebab:focus-visible[b-8lirmji6e8] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 1px;
}

/* Visually hidden but announced — the actions column has no visible
   header in the reference, and an unlabelled <th> is a gap for anyone
   navigating the table by column. */
.um-sr[b-8lirmji6e8] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   MODALS — create / edit / reset password
   Restyled onto the Motiva ramp (they were on the legacy --g-* one), but
   structurally and behaviourally unchanged.
   ============================================================ */

.um-modal-overlay[b-8lirmji6e8] {
    position: fixed;
    inset: 0;
    z-index: var(--motiva-z-modal, 1000);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(26, 24, 32, 0.36);
    backdrop-filter: blur(2px);
}

.um-modal-box[b-8lirmji6e8] {
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    border-radius: var(--motiva-radius-xl, 24px);
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    box-shadow: var(--motiva-shadow-lg, 0 32px 70px rgba(30, 20, 60, 0.28));
    overflow: hidden;
}

.um-modal-box--sm[b-8lirmji6e8] { max-width: 420px; }

.um-modal-header[b-8lirmji6e8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 14px;
}

.um-modal-title[b-8lirmji6e8] {
    font-size: var(--motiva-font-size-h2, 18px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.3;
    color: var(--motiva-text-primary, #1A1820);
}

.um-modal-subtitle[b-8lirmji6e8] {
    margin-top: 4px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.3;
    color: var(--motiva-text-muted, #8B8698);
    overflow-wrap: anywhere;
}

.um-modal-close[b-8lirmji6e8] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--motiva-text-muted, #8B8698);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.um-modal-close:hover[b-8lirmji6e8] {
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.035));
    color: var(--motiva-text-primary, #1A1820);
}

.um-modal-body[b-8lirmji6e8] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 22px 18px;
    overflow-y: auto;
}

.um-modal-text[b-8lirmji6e8] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-regular, 400);
    line-height: var(--motiva-line-height-body, 1.6);
    color: var(--motiva-text-secondary, #5B5568);
}

.um-modal-email[b-8lirmji6e8] {
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-text-primary, #1A1820);
    overflow-wrap: anywhere;
}

.um-modal-footer[b-8lirmji6e8] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px 20px;
    border-top: 1px solid var(--motiva-border-subtle, #F0EEF9);
}

/* ── Form controls ───────────────────────────────────────── */
.um-form-row[b-8lirmji6e8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.um-form-field[b-8lirmji6e8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.um-form-label[b-8lirmji6e8] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
}

.um-form-input[b-8lirmji6e8],
.um-form-select[b-8lirmji6e8] {
    width: 100%;
    box-sizing: border-box;
    height: var(--motiva-control-height-md, 38px);
    padding: 0 12px;
    border-radius: var(--motiva-radius-sm, 10px);
    background: var(--motiva-surface-secondary, #FAF9F7);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 13.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-primary, #1A1820);
    transition: border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.um-form-input[b-8lirmji6e8]::placeholder { color: var(--motiva-text-subtle, #B7B2C2); }

.um-form-input:focus[b-8lirmji6e8],
.um-form-select:focus[b-8lirmji6e8] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: -1px;
    border-color: var(--motiva-color-focus-ring, #4F46E5);
}

/* ── Inline feedback ─────────────────────────────────────────
   Rose for the failure, teal for the confirmation — the same two roles
   the status column uses, so the page has one colour vocabulary. */
.um-form-error[b-8lirmji6e8],
.um-form-success[b-8lirmji6e8] {
    padding: 10px 12px;
    border-radius: var(--motiva-radius-sm, 10px);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.45;
}

.um-form-error[b-8lirmji6e8] {
    background: color-mix(in srgb, var(--motiva-color-rose, #D93864) 8%, transparent);
    color: var(--motiva-color-rose-ink, #B23256);
}

.um-form-success[b-8lirmji6e8] {
    background: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 9%, transparent);
    color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 82%, #000);
}

.um-spinner-sm[b-8lirmji6e8] {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: um-spin-b-8lirmji6e8 0.7s linear infinite;
}

@keyframes um-spin-b-8lirmji6e8 { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .um-spinner-sm[b-8lirmji6e8] { animation-duration: 2.4s; }
    .um-filter-chev[b-8lirmji6e8],
    .um-btn-secondary[b-8lirmji6e8],
    .um-menu-item[b-8lirmji6e8],
    .um-kebab[b-8lirmji6e8] { transition: none; }
}

/* ── Narrow Management viewports ─────────────────────────────
   The table's own scroller takes over below ~1000px (MDataTable). Here
   the page furniture stops trying to hold a single line: the header
   actions wrap under the title and the toolbar's count drops its
   auto-margin so it does not sit alone on a line of its own. */
@media (max-width: 900px) {
    .um-toolbar[b-8lirmji6e8]  .um-search { flex: 1 1 100%; max-width: none; }
    .um-result[b-8lirmji6e8] { margin-inline-start: 0; }

    .um-form-row[b-8lirmji6e8] { grid-template-columns: 1fr; }
}
/* /Pages/Mentor/MentorCalendarPage.razor.rz.scp.css */
/* =========================================================
   MentorCalendarPage — scoped overrides only.

   All non-::deep mcal-* rules live in
   wwwroot/css/motiva-calendar.css (global), loaded in index.html
   before AuthWithAdmin.Client.styles.css.

   The five ::deep rules MUST stay here: they target child
   component internals (MCard, MPageHeader, MEmptyState,
   MentorPersonalTaskModal). When compiled by Blazor they become
   e.g. `.mcal-body[b-xxxx] .mcal-card` (specificity 030),
   which beats the equivalent global selector (020). Moving them
   global would let MCard's own scoped styles win the tie, since
   AuthWithAdmin.Client.styles.css loads after motiva-calendar.css.
   ========================================================= */

/* The inline task editor's `flex: 0 0 auto` used to live here. This page now
   opens the editor as a centred MModal — a fixed-position overlay, not a flex
   item of .mcal-body — so the rule matched nothing. */

/* ── Convert side drawer to a centred viewport modal ─────────────
   The global motiva-calendar.css rules (.mcal-scrim z-index:40,
   .mcal-drawer edge-anchored at inset-inline-end:26px) were written for
   a side drawer. They have two problems on the Mentor calendar:
   1. z-index 40/41 is BELOW the sticky nav (100), so the backdrop never
      covers the navigation bar.
   2. The panel is pinned to the reading-end edge rather than centred.

   These scoped rules have higher specificity than the global ones
   (Blazor appends `[b-xxxx]` → attribute selector → 0,2,0 vs 0,1,0),
   so they win for elements rendered by this component without touching
   the Lecturer calendar at all.

   Three changes:
   a. Scrim raised to --motiva-z-overlay (900) → covers the nav.
   b. Scrim darkened to the standard 48% black → visually communicates
      that the page is blocked.
   c. Scrim becomes a flex container → centres the drawer in the viewport
      without any transform/top/left math that could go wrong in RTL.
   d. Drawer released from edge anchoring → position:relative inside
      the centring flex parent, capped at 440px wide and tall-viewport
      height so long content scrolls inside the panel.
   e. Animation swapped from a horizontal slide to a subtle fade+scale
      that reads as a centred dialog, not a drawer entering from the side.

   The global mobile bottom-sheet rule (@media max-width:720px) is also
   countered so the panel stays centred on narrow viewports instead of
   snapping to the bottom. ────────────────────────────────────────────── */

.mcal-scrim[b-n7607p21hy] {
    z-index: var(--motiva-z-overlay); /* 900 — covers sticky nav (100) */
    background: rgba(0, 0, 0, 0.48); /* standard modal scrim, up from rgba 0.16 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.mcal-drawer[b-n7607p21hy] {
    /* Release from edge-anchoring; become a flow child of the flex scrim. */
    position: relative;
    top: auto;
    bottom: auto;
    inset-inline-end: auto;
    /* Width stays close to the original 360px but gets a comfortable cap. */
    width: min(440px, 100%);
    max-height: calc(100dvh - 48px);
    /* Swap the horizontal-slide animation for a centred-dialog enter. */
    animation: mcal-modal-in-b-n7607p21hy 200ms var(--motiva-motion-easing-entrance, ease) both;
}

@keyframes mcal-modal-in-b-n7607p21hy {
    from { opacity: 0; transform: scale(0.97) translateY(6px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mcal-drawer[b-n7607p21hy] { animation: none; }
}

/* Counter the global mobile bottom-sheet that snaps mcal-drawer to the bottom.
   On narrow screens we keep the centred modal — it never edge-attaches. */
@media (max-width: 720px) {
    .mcal-scrim[b-n7607p21hy] {
        align-items: center;
        padding: 16px;
    }
    .mcal-drawer[b-n7607p21hy] {
        top: auto;
        bottom: auto;
        inset-inline: auto;
        width: min(440px, 100%);
        max-width: 100%;
        max-height: calc(100dvh - 32px);
        border-radius: var(--motiva-radius-xl);
    }
}

/* 2. The MCard that wraps the month/week grid. */
.mcal-body[b-n7607p21hy]  .mcal-card {
    margin-block-end: 0;
    flex: 1;
    min-height: 584px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Calendar toolbar ────────────────────────────────────────
   The view tabs + date navigation + create action, now a sibling
   BENEATH the white MPageHeaderCard and above the grid — not part
   of the header card. `flex: 0 0 auto` keeps it a fixed cost above
   the viewport-filling grid, exactly as the header bleed was, so
   the grid still fills the rest of .mcal-body. A top gap separates
   it from the page-header card, and a bottom gap from the grid. */
.mcal-toolbar[b-n7607p21hy] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-block: var(--motiva-space-md, 16px) 12px;
}

/* The create action pushes to the reading end of the toolbar row. */
.mcal-toolbar .mcal-create[b-n7607p21hy] { margin-inline-start: auto; }

/* 3. MEmptyState inside the body gets the XL vertical rhythm.
   The old `::deep .mcal-header.m-page-header` compact-header override is
   gone — the title is the shared white Core page-header now. */
[b-n7607p21hy] .mcal-empty { padding-block: var(--motiva-space-xl); }

/* 5. Both views (month grid / week grid) fill the card column. */
[b-n7607p21hy] .mcal-card > * {
    flex: 1;
    min-height: 0;
    padding: 12px 20px 14px;
}

/* ── In-place edit form (inside .mcal-drawer, edit mode only) ─────────── */

.mcal-edit-form[b-n7607p21hy] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-block-start: 18px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.mcal-edit-field[b-n7607p21hy] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mcal-edit-label[b-n7607p21hy] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: 700;
    color: var(--motiva-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mcal-edit-input[b-n7607p21hy],
.mcal-edit-select[b-n7607p21hy],
.mcal-edit-textarea[b-n7607p21hy] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--motiva-border-strong);
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-primary);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-body, 14px);
    line-height: 1.4;
    box-sizing: border-box;
    transition: border-color 0.13s;
}

.mcal-edit-input:focus[b-n7607p21hy],
.mcal-edit-select:focus[b-n7607p21hy],
.mcal-edit-textarea:focus[b-n7607p21hy] {
    outline: none;
    border-color: var(--motiva-color-indigo, #4f46e5);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.mcal-edit-textarea[b-n7607p21hy] {
    resize: vertical;
    min-height: 72px;
}

.mcal-edit-select[b-n7607p21hy] {
    appearance: auto;
}

/* Side-by-side start/end time inputs */
.mcal-edit-times[b-n7607p21hy] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mcal-edit-times .mcal-edit-input[b-n7607p21hy] {
    flex: 1;
    min-width: 0;
}

.mcal-edit-times-sep[b-n7607p21hy] {
    color: var(--motiva-text-muted);
    font-size: var(--motiva-font-size-sm, 13.5px);
    flex: 0 0 auto;
}

.mcal-edit-error[b-n7607p21hy] {
    margin: 0;
    padding: 8px 12px;
    border-radius: var(--motiva-radius-sm);
    background: rgba(220, 53, 69, 0.08);
    color: var(--motiva-color-danger, #dc3545);
    font-size: var(--motiva-font-size-sm, 13.5px);
    line-height: 1.4;
}
/* /Pages/Mentor/MentorGlyph.razor.rz.scp.css */
/* Same 15px box RequestsKpiRow gives its own chip icons, so a mentor
   KPI card and a student KPI card read at identical optical weight. */
.m-glyph[b-arvflije6i] {
    width: 15px;
    height: 15px;
    display: block;
}
/* /Pages/Mentor/MentorPreferencesCard.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────
   Mentor Preferences card — component-scoped styles.

   IMPORTANT: every Blazor `.razor.css` file is auto-scoped to a unique
   attribute selector. Rules in StudentProfilePage.razor.css therefore do
   NOT reach this child component. The `.spp-*` chrome rules below are a
   verbatim copy of the same rules in StudentProfilePage.razor.css so the
   card matches the Personal Details / Notification Preferences chrome
   1:1. If the chrome ever changes, update both files.

   The `.mp-*` block at the bottom covers form primitives that don't have
   a matching `.spp-*` equivalent (sections, radios, textarea, footer).
   ───────────────────────────────────────────────────────────────────── */

/* ── Card chrome ──────────────────────────────────────────────────────── */
.spp-card[b-uv348pgwr9] {
    /* Surface from the shared `.motiva-panel` class (motiva-base.css),
       worn in the markup. This block used to restate it as --g-bg-surface at
       --g-radius-md behind --g-border-light with --g-shadow-sm: the same white,
       but a 16px corner, a grey hairline and no lift, against the 24px violet-
       edged lifted panel every migrated screen renders. */
    padding: var(--g-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--g-space-md);
}

.spp-card-header[b-uv348pgwr9] {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--g-space-sm);
}

.spp-card-title[b-uv348pgwr9] {
    display:     inline-flex;
    align-items: center;
    gap:         var(--g-space-sm);
    font-size:   var(--g-type-subtitle);
    font-weight: 700;
    color:       var(--g-text-primary);
}

.spp-card-subtitle[b-uv348pgwr9] {
    margin:    0;
    font-size: var(--g-type-secondary);
    color:     var(--g-text-muted);
}

/* ── Field rows (label/value summary) ─────────────────────────────────── */
.spp-fields[b-uv348pgwr9] {
    display:        flex;
    flex-direction: column;
}

.spp-field[b-uv348pgwr9] {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             var(--g-space-sm);
    padding:         10px 0;
    border-bottom:   1px solid var(--g-border-light);
}

.spp-field:last-child[b-uv348pgwr9] { border-bottom: none; }

.spp-field-label[b-uv348pgwr9] {
    font-size:   var(--g-type-secondary);
    font-weight: 600;
    color:       var(--g-text-secondary);
    flex-shrink: 0;
    min-width:   80px;
}

.spp-field-val[b-uv348pgwr9] {
    font-size:  var(--g-type-body);
    color:      var(--g-text-primary);
    text-align: start;
    flex:       1;
}

.spp-field-edit[b-uv348pgwr9] { flex-wrap: wrap; }

.spp-field-edit-row[b-uv348pgwr9] {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--g-space-sm);
    flex:            1;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.spp-btn-save[b-uv348pgwr9] {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       6px var(--g-space-md);
    background:    var(--g-accent);
    color:         #fff;
    border:        none;
    border-radius: var(--g-radius-sm);
    font-size:     var(--g-type-secondary);
    font-family:   var(--g-font-base);
    font-weight:   600;
    cursor:        pointer;
    white-space:   nowrap;
    transition:    background 0.15s;
}
.spp-btn-save:hover:not(:disabled)[b-uv348pgwr9] { background: var(--g-accent-hover); }
.spp-btn-save:disabled[b-uv348pgwr9]             { opacity: 0.6; cursor: default; }

.spp-btn-ghost[b-uv348pgwr9] {
    padding:       6px var(--g-space-sm);
    background:    transparent;
    color:         var(--g-text-secondary);
    border:        1px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    font-size:     var(--g-type-secondary);
    font-family:   var(--g-font-base);
    cursor:        pointer;
    white-space:   nowrap;
    transition:    border-color 0.15s, color 0.15s;
}
.spp-btn-ghost:hover:not(:disabled)[b-uv348pgwr9] { border-color: var(--g-accent); color: var(--g-accent); }
.spp-btn-ghost:disabled[b-uv348pgwr9]             { opacity: 0.5; cursor: default; }

.spp-btn-edit[b-uv348pgwr9] {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    padding:       4px var(--g-space-sm);
    background:    transparent;
    color:         var(--g-accent);
    border:        1px solid var(--g-accent-light);
    border-radius: var(--g-radius-sm);
    font-size:     var(--g-type-secondary);
    font-family:   var(--g-font-base);
    cursor:        pointer;
    white-space:   nowrap;
    transition:    background 0.15s;
}
.spp-btn-edit:hover[b-uv348pgwr9] { background: var(--g-accent-light); }

/* ── Inline messages + spinner ────────────────────────────────────────── */
.spp-inline-success[b-uv348pgwr9] {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   var(--g-type-secondary);
    /* Teal is the completion role in the four-role palette; the emerald
       this used has no other home in the product. */
    color:       var(--motiva-color-teal-ink, var(--motiva-color-success));
    margin:      4px 0 0;
}

.spp-inline-error[b-uv348pgwr9] {
    font-size: var(--g-type-secondary);
    color:     var(--g-danger);
    margin:    4px 0 0;
}

.spp-loading-row[b-uv348pgwr9] { padding: 12px; color: var(--g-text-muted); font-size: 0.9rem; }

.spp-spinner-sm[b-uv348pgwr9] {
    display:        inline-block;
    width:          12px;
    height:         12px;
    margin-inline-end: 6px;
    border:         2px solid var(--g-border);
    border-top-color: var(--g-accent);
    border-radius:  50%;
    vertical-align: -2px;
    animation:      mp-spin-b-uv348pgwr9 0.8s linear infinite;
}
@keyframes mp-spin-b-uv348pgwr9 { to { transform: rotate(360deg); } }

/* ─────────────────────────────────────────────────────────────────────
   Form primitives (edit mode only) — no .spp-* equivalent in the host
   page; these are local to the mentor card.
   ───────────────────────────────────────────────────────────────────── */

.mp-sections[b-uv348pgwr9] {
    display:        flex;
    flex-direction: column;
    gap:            var(--g-space-md);
    margin-top:     var(--g-space-sm);
}

.mp-section[b-uv348pgwr9] {
    border-top:  1px solid var(--g-border-light);
    padding-top: var(--g-space-md);
}
.mp-section:first-child[b-uv348pgwr9] {
    border-top:  0;
    padding-top: 0;
}

.mp-section-title[b-uv348pgwr9] {
    margin:      0 0 var(--g-space-sm);
    font-size:   var(--g-type-secondary);
    font-weight: 700;
    color:       var(--g-text-primary);
}

.mp-label[b-uv348pgwr9] {
    display:     block;
    margin:      var(--g-space-sm) 0 4px;
    font-size:   var(--g-type-secondary);
    font-weight: 600;
    color:       var(--g-text-secondary);
}

.mp-input[b-uv348pgwr9],
.mp-textarea[b-uv348pgwr9] {
    width:         100%;
    border:        1px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    padding:       8px 10px;
    font-family:   var(--g-font-base);
    font-size:     var(--g-type-secondary);
    background:    var(--g-bg-input);
    color:         var(--g-text-primary);
    direction:     rtl;
}
.mp-textarea[b-uv348pgwr9] { resize: vertical; }
.mp-input:focus[b-uv348pgwr9],
.mp-textarea:focus[b-uv348pgwr9] {
    outline:        2px solid var(--g-accent);
    outline-offset: -1px;
}

.mp-radio-row[b-uv348pgwr9] {
    display:     flex;
    flex-wrap:   wrap;
    gap:         12px 16px;
    align-items: center;
}
.mp-radio[b-uv348pgwr9],
.mp-checkbox[b-uv348pgwr9] {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    font-size:   var(--g-type-secondary);
    color:       var(--g-text-primary);
    cursor:      pointer;
    user-select: none;
}
.mp-radio input[b-uv348pgwr9],
.mp-checkbox input[b-uv348pgwr9] {
    accent-color: var(--g-accent);
    width:        16px;
    height:       16px;
}

.mp-actions[b-uv348pgwr9] {
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    gap:             var(--g-space-sm);
    margin-top:      var(--g-space-md);
    padding-top:     var(--g-space-md);
    border-top:      1px solid var(--g-border-light);
    flex-wrap:       wrap;
}
/* /Pages/Mentor/MentorProfilePage.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────
   Mentor Profile Page — read-only view of a mentor's preferences.

   Same Blazor CSS-isolation note as the rest of the mentor area: the
   .spp-* chrome rules live in StudentProfilePage.razor.css and don't
   reach this page, so the relevant subset is duplicated below. Update
   both files in lockstep when the chrome changes.
   ───────────────────────────────────────────────────────────────────── */

.mpp-page[b-qywwr4u0e6] {
    padding:    24px 28px;
    direction:  rtl;
    max-width:  720px;
}

/* ── Back control (in the white header's Leading slot) ─────────────────────
   The neutral back disc, styled to the SAME metrics as the shared MAdminBack
   arrow (motiva-tokens: 34px disc, secondary ink, a violet breath on hover) so
   the back affordance reads identically across the system — but this page keeps
   its own history-based GoBack handler on the button rather than MAdminBack's
   fixed parent route, because it is reached from many contexts. */
.mpp-back-btn[b-qywwr4u0e6] {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           34px;
    height:          34px;
    flex:            0 0 auto;
    border:          0;
    border-radius:   50%;
    background:      var(--motiva-surface-hover, rgba(26, 24, 32, 0.045));
    color:           var(--motiva-text-secondary, #5B5568);
    cursor:          pointer;
    transition:      background 120ms ease-out, color 120ms ease-out;
}
.mpp-back-btn:hover[b-qywwr4u0e6] {
    background: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 10%, transparent);
    color:      var(--motiva-color-violet, #4F46E5);
}
.mpp-back-btn:focus-visible[b-qywwr4u0e6] {
    outline:        2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* Standard Motiva gap between the white Core page-header card and the profile
   details card below it. */
.mpp-card[b-qywwr4u0e6] {
    margin-block-start: 16px;
}

.mpp-empty[b-qywwr4u0e6] {
    margin-top: 4px;
}

/* ── Card chrome (scoped copy of StudentProfilePage.razor.css rules) ───── */
.spp-card[b-qywwr4u0e6] {
    /* Surface from the shared `.motiva-panel` class (motiva-base.css),
       worn in the markup. This block used to restate it as --g-bg-surface at
       --g-radius-md behind --g-border-light with --g-shadow-sm: the same white,
       but a 16px corner, a grey hairline and no lift, against the 24px violet-
       edged lifted panel every migrated screen renders. */
    padding: var(--g-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--g-space-md);
}

.spp-card-header[b-qywwr4u0e6] {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--g-space-sm);
}

.spp-card-title[b-qywwr4u0e6] {
    display:     inline-flex;
    align-items: center;
    gap:         var(--g-space-sm);
    font-size:   var(--g-type-subtitle);
    font-weight: 700;
    color:       var(--g-text-primary);
}

.spp-card-subtitle[b-qywwr4u0e6] {
    margin:    0;
    font-size: var(--g-type-secondary);
    color:     var(--g-text-muted);
}

/* ── Field rows ────────────────────────────────────────────────────────── */
.spp-fields[b-qywwr4u0e6] {
    display:        flex;
    flex-direction: column;
}

.spp-field[b-qywwr4u0e6] {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             var(--g-space-sm);
    padding:         10px 0;
    border-bottom:   1px solid var(--g-border-light);
}
.spp-field:last-child[b-qywwr4u0e6] { border-bottom: none; }

.spp-field-label[b-qywwr4u0e6] {
    font-size:   var(--g-type-secondary);
    font-weight: 600;
    color:       var(--g-text-secondary);
    flex-shrink: 0;
    min-width:   110px;
}

.spp-field-val[b-qywwr4u0e6] {
    font-size:  var(--g-type-body);
    color:      var(--g-text-primary);
    text-align: start;
    flex:       1;
}

/* ── Inline messages + spinner ─────────────────────────────────────────── */
.spp-inline-error[b-qywwr4u0e6] {
    font-size: var(--g-type-secondary);
    color:     var(--g-danger);
    margin:    4px 0 0;
}

.spp-loading-row[b-qywwr4u0e6] {
    padding:   12px;
    color:     var(--g-text-muted);
    font-size: 0.9rem;
}

.spp-spinner-sm[b-qywwr4u0e6] {
    display:           inline-block;
    width:             12px;
    height:            12px;
    margin-inline-end: 6px;
    border:            2px solid var(--g-border);
    border-top-color:  var(--g-accent);
    border-radius:     50%;
    vertical-align:    -2px;
    animation:         mpp-spin-b-qywwr4u0e6 0.8s linear infinite;
}
@keyframes mpp-spin-b-qywwr4u0e6 { to { transform: rotate(360deg); } }
/* /Pages/Mentor/MentorProjectDetailPage.razor.rz.scp.css */
/* ============================================================
   MentorProjectDetailPage — מרחב הפרויקט
   Prefixes: mpw- (what is left of the page) · mpd- (the drawer)

   THE mpw- HALF IS ALMOST GONE, and that is the point. Every
   surface it declared — the header, the four overview tiles, the
   card fill, the roadmap strip, the two card pairs, the shared
   rows, the attention list, the work tabs, the dates and the
   activity list, ~900 lines of it — is now
   Components/ProjectWorkspace/ProjectWorkspace.razor.css, which
   the lecturer's מרחב הפרויקט draws from too. The geometry did
   not change in the move; it stopped being one page's private
   copy of it.

   What still belongs to this page is what only this page has:
   the back link, the "קביעת פגישת הנחיה" button and its caption
   in the shared dates-footer slot, and the review drawer.

   THE mpd- HALF IS THE REVIEW DRAWER, UNTOUCHED. Its flow,
   markup, behaviour and surface are exactly what they were: the
   real review — GET api/mentor/submissions/{id}/context and
   PATCH api/task-submissions/{id}/mentor-review — with its round
   history, its files and its return-requires-a-note rule.

   It reads the --g-* tokens throughout, and that is correct
   rather than legacy: `:root .motiva.motiva-final` re-declares
   every one of them at the finished design's value.
   ============================================================ */

.mpw-page[b-bfb65kbob5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Fill the canvas shell's .app-content (flex:1 inside the min-height:100vh
       shell) so the shared workspace can grow its lower cards to the viewport's
       bottom margin instead of leaving a large empty region — the same fill the
       lecturer review uses via .lpw-page. Only the mentor page root; the shell
       and other pages are untouched. */
    flex: 1;
    min-height: 0;
}

/* ── Back to פרויקטים בהנחייתי ─────────────────────────────
   The control itself is the shared MAdminBack — the icon-only circular arrow
   the lecturer review uses, self-styled in MAdminBack.razor.css. The
   "פרויקטים בהנחייתי" text beside it is gone. This file only owns the standalone
   row's placement: above the loading / not-found state, a clear step below the
   trail, tightened on short viewports — the same rhythm as the lecturer's
   .lpw-back-row. In the header's leading slot the .pw-head-top flow lays the
   control out beside the title and no wrapper is needed. */
.mpw-back-row[b-bfb65kbob5] {
    display: flex;
    align-items: center;
    align-self: flex-start;
    margin-block-end: clamp(6px, 1.1vh, 16px);
}

/* ── קביעת פגישת הנחיה — a HEADER control ────────────────────
   It sat under מועדים קרובים until that card was removed, and it
   is a project-level action, so it moved into the header's facts
   line beside the project's other controls. Same button, same
   modal, same POST — only the padding came down, from the card
   footer's 11px/20px to the header line's shared 28px band, so it
   sits level with the chips and the member pills rather than
   towering over them. */

/* Staff who opened a mentor route for a project they do not mentor.
   Quiet, not an alarm: nothing is broken, they are simply in the other
   role's workspace. */
.mpw-not-mentor[b-bfb65kbob5] {
    font-size: var(--motiva-font-size-sm, 13.5px);
    color: var(--motiva-text-subtle);
    white-space: nowrap;
}

.mpw-to-lecturer[b-bfb65kbob5] {
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    text-decoration: none;
    white-space: nowrap;
}

.mpw-to-lecturer:hover[b-bfb65kbob5] { text-decoration: underline; }

.mpw-to-lecturer:focus-visible[b-bfb65kbob5] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 3px;
    border-radius: var(--motiva-radius-sm);
}

.mpw-schedule.motiva-cta[b-bfb65kbob5] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border: 0;
    border-radius: var(--motiva-radius-full);
    font-family: inherit;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    cursor: pointer;
}

.mpw-schedule.motiva-cta:focus-visible[b-bfb65kbob5] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

/* ── THE REVIEW DRAWER'S STYLESHEET IS GONE ──────────────────
   ~540 lines lived here: a backdrop, an edge-attached panel, its
   own header, section rules, file rows, a round accordion, a
   feedback textarea and two filled buttons — most of it written
   against the legacy `--g-*` tokens rather than the Motiva ones.

   The submission review now opens in PwDetail, the same surface a
   request opens in, and the vocabulary it draws with
   (`.pwd-sec`, `.pwd-files`, `.pwd-round`, `.pwd-btn`) is declared
   once in PwDetail.razor.css for both. Keeping a second copy here
   is how one of the two would have drifted.

   What is left in this file is the PAGE's own chrome: the back
   link, the scheduler button, the last-meeting line, and the state
   tones the workspace view model reads back through ToneOf(). */
/* /Pages/Mentor/MentorProjectQuickView.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────
   Quick View — the mentor experience's shared project inspection
   popup: the stage/signal chips, the team name, the member list, the
   fact table and the two buttons.

   THE BOX IS NOT HERE. Positioning, scrim, surface, radius, shadow,
   width, max-height, internal scroll, the close control, the header
   row and the ruled footer all come from MModal's QuickView variant.
   The rail this file used to draw — a 380px panel pinned to the
   reading end, with its own scrim, entrance and bottom-sheet
   breakpoint — was deleted rather than overridden, so there is
   exactly one description of an inspection popup in the product.

   What remains below is content, and content only.
   ───────────────────────────────────────────────────────────── */




/* The stage chip is the panel's one branded element, and it says so with
   an edge rather than a tinted block — a violet fill carrying violet type
   makes the whole object one colour and reads as a button. */
.mpq-drawer-stage[b-468knajgj7] {
    display: inline-flex;
    padding: 5px 12px;
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-tag-brand-surface);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1;
    color: var(--motiva-text-primary);
}

.mpq-drawer-alert[b-468knajgj7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--motiva-radius-full);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
}

.mpq-drawer-alert.mpq-tone-rose[b-468knajgj7]   { background: var(--motiva-color-danger-bg); }
.mpq-drawer-alert.mpq-tone-violet[b-468knajgj7] { background: var(--motiva-color-brand-bg); }

.mpq-drawer-alert-dot[b-468knajgj7] {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: currentColor;
}


.mpq-drawer-alt:focus-visible[b-468knajgj7],
.mpq-drawer-go:focus-visible[b-468knajgj7],
.mpq-fact-link:focus-visible[b-468knajgj7] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.mpq-drawer-title[b-468knajgj7] {
    margin: 0;
    font-size: var(--motiva-font-size-h2, 22px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1.3;
    letter-spacing: var(--motiva-letter-spacing-section);
    color: var(--motiva-text-primary);
}

.mpq-drawer-sub[b-468knajgj7] {
    margin: 6px 0 0;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.4;
    color: var(--motiva-text-secondary);
}

/* ── Members ─────────────────────────────────────────────────
   The team, as it actually is: the StudentNames the projects endpoint
   already returns. Named rather than counted — the panel exists to tell
   the mentor who they are about to talk to. */
.mpq-members[b-468knajgj7] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-block-start: 14px;
}

.mpq-member[b-468knajgj7] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 15px 6px 13px;
    border-radius: var(--motiva-radius-full);
    background: rgba(27, 26, 34, 0.04);
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1;
    color: var(--motiva-text-secondary);
}

.mpq-member-initials[b-468knajgj7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 50%;
    background: var(--motiva-color-info-bg);
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-color-blue, var(--motiva-color-info));
}

/* ── Facts ───────────────────────────────────────────────────
   A fixed 92px key column, so the values line up down the panel — the
   same "make it a table" move the mentor row lists make. */
.mpq-facts[b-468knajgj7] {
    display: flex;
    flex-direction: column;
    margin-block-start: 16px;
}

.mpq-fact[b-468knajgj7] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-block: 11px;
    border-block-end: 1px solid rgba(27, 26, 34, 0.06);
}

.mpq-fact:last-child[b-468knajgj7] { border-block-end: 0; }

.mpq-fact-k[b-468knajgj7] {
    width: 92px;
    flex: 0 0 92px;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-subtle);
}

.mpq-fact-v[b-468knajgj7] {
    min-width: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.3;
    color: var(--motiva-text-primary);
}

.mpq-fact-v-stage[b-468knajgj7] { color: var(--motiva-color-violet, var(--motiva-color-indigo)); }

.mpq-fact-stack[b-468knajgj7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mpq-fact-link[b-468knajgj7] {
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.4;
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    text-decoration: none;
}

.mpq-fact-link:hover[b-468knajgj7] { color: var(--motiva-text-primary); }

/* The waiting phrase under a queued item — the attention model's own
   wording, so this panel, המשימות שלי and the digest cannot disagree. */
.mpq-fact-note[b-468knajgj7] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.3;
    color: var(--motiva-text-muted);
}


.mpq-drawer-alt[b-468knajgj7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1.5px solid rgba(27, 26, 34, 0.12);
    border-radius: var(--motiva-radius-full);
    background: transparent;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-secondary);
    text-decoration: none;
    transition:
        border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
        color        var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mpq-drawer-alt:hover[b-468knajgj7] {
    border-color: rgba(27, 26, 34, 0.3);
    color: var(--motiva-text-primary);
}

.mpq-drawer-go.motiva-cta[b-468knajgj7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border: 0;
    border-radius: var(--motiva-radius-full);
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    text-decoration: none;
}

/* Pin the primary CTA to the PHYSICAL LEFT of the footer.

   The shell's QuickView footer means to push the navigating CTA to the far end
   with `.m-modal-footer > :last-child { margin-inline-start: auto }`, but under
   CSS isolation that rule is scoped to MModal's own elements — this <a> is
   authored here and carries THIS component's scope, so the rule never matched
   it and the button stayed at the footer's flex-start (physical RIGHT in the
   RTL shell). `margin-right: auto` is an explicit PHYSICAL rule: it absorbs the
   free space to the button's right, pinning it to the left edge regardless of
   writing direction. Works for both the lone-CTA case and the two-button case
   (the secondary keeps the reading start, the CTA goes to the physical left). */
.mpq-drawer-go[b-468knajgj7] {
    margin-right: auto;
}

/* /Pages/Mentor/MentorProjectsPage.razor.rz.scp.css */
/* ============================================================
   MentorProjectsPage — פרויקטים בהנחייתי
   Prefix: mpj-

   VISUAL SOURCE OF TRUTH: Motiva Mentor Teams.dc.html (Claude
   Design). Every number below is read off that file. Where the
   shared `.motiva-final` tokens already ARE that number — the
   list card's fill, hairline and radius, the filter track, the
   row divider, the CTA gradient — the token is used and nothing
   is redeclared here.

   WHAT THE SHARED COMPONENTS ALREADY DRAW
     title 38/700/-.035em   MPageHeader   (.motiva-final)
     filter pills           MFilterTabs   (tinted track, white
                                           pill, violet count)
     list card              MCard         (.66 fill, .85 hairline,
                                           radius 24, shadow-md)
     rows + divider         MRow / MRowList
     the 7px semantic dot   MStatusDot
     CTA fill + hover       .motiva-cta   (motiva-base.css)

   WHAT IS DECLARED HERE
   This screen's own geometry: the reference's 14/22 title rhythm,
   the pill search, the 20/26/14 card inset, the row track
   (identity 1.3 / 128px stage / 1.1 status-end — the milestone
   column was dropped as it duplicated the stage and delay), and
   the 380px detail rail — which is the same object as the יומן
   drawer, at the same inset, so the two mentor drawers read as one
   component.
   ============================================================ */

/* The title is now the shared white Core page-header (MPageHeaderCard),
   which aligns to the page CONTENT width and carries its own surface,
   padding and title scale. The old `.mpj-header-bleed` shell-edge bleed,
   the `::deep .mpj-header.m-page-header` padding override and the
   `::deep .mpj-search.m-search` pill styling all only dressed the ambient
   compact header and are gone; MSearchField keeps its own default field
   styling in the card's Actions slot. */

.mpj-body[b-uveejqkoi5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Gap from the Core page-header card above. */
    margin-block-start: 16px;
}

/* ── List card ───────────────────────────────────────────────
   THIS CLASS IS NOT THE SURFACE — it is the MCard's inner box. The card
   itself is `<MCard Padding="None">`, whose `.m-card` resolves the Motiva
   panel (solid white, violet hairline, --motiva-panel-radius). All this
   element states is the inset the reference's section carries.

   Worth saying out loud, because measuring `.mpj-card` in devtools reports
   a transparent background with no border and reads like a missed
   migration. Measure `.m-card`. */
.mpj-card[b-uveejqkoi5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 20px 26px 14px;
}

.mpj-controls[b-uveejqkoi5] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-block-end: 10px;
}

/* Pushed to the reading end of the control row, and deliberately quiet:
   it reports the filter's effect, it is not a statistic. */
.mpj-count[b-uveejqkoi5] {
    margin-inline-start: auto;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1;
    color: var(--motiva-text-subtle);
}

/* ── Rows ────────────────────────────────────────────────────
   The reference's row is `padding:16px 4px; gap:16px` over a
   rgba(27,26,34,.06) rule. The shared row is 14px/2px at gap 12 — right
   for a dashboard card packed with four lists, one notch too tight for a
   screen whose rows ARE the content.

   Specificity: `.motiva-final .m-row` is (0,2,0); the compiled selector
   below is (0,3,0) plus the scope attribute, so this wins deterministically
   rather than by stylesheet bundling order. */
.mpj-card[b-uveejqkoi5]  .mpj-rows .m-row {
    gap: 16px;
    padding: 16px 4px;
}

/* The reference's row is a five-column TRACK, not the shared row's
   stacked primary/secondary block — a mentor scans this list down each
   column, so every row must put the same fact in the same place. */
.mpj-card[b-uveejqkoi5]  .mpj-rows .m-row .m-row-main {
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.mpj-card[b-uveejqkoi5]  .mpj-rows .m-row .m-row-end {
    gap: 0;
}

/* Column 1 — identity. The widest track, because it is what the mentor
   recognises the project by. */
.mpj-id[b-uveejqkoi5] {
    display: block;
    flex: 1.3 1 0;
    min-width: 0;
}

.mpj-name[b-uveejqkoi5] {
    display: block;
    font-size: var(--motiva-font-size-item, 16px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1.3;
    color: var(--motiva-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mpj-project[b-uveejqkoi5] {
    display: block;
    margin-block-start: 4px;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1;
    color: var(--motiva-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Column 2 — the stage, as a neutral chip. Fixed width so the chips form
   a column rather than drifting with their own text length. */
.mpj-stage-cell[b-uveejqkoi5] {
    display: inline-flex;
    flex: 0 0 128px;
    min-width: 0;
}

/* inline-block, not inline-flex: a flex container's text is an anonymous
   flex item, and `text-overflow: ellipsis` never applies to one — a long
   stage name clipped mid-word with no ellipsis instead of truncating. The
   box is identical either way, since line-height 1 + the same padding is
   what gives the chip its height. */
.mpj-stage[b-uveejqkoi5] {
    display: inline-block;
    max-width: 100%;
    padding: 5px 12px;
    border-radius: var(--motiva-radius-full);
    background: rgba(27, 26, 34, 0.05);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Column 3 — what this project needs, at the reading end. The column is a
   flex box aligned to the end so its content (a status chip when overdue, or a
   plain status phrase otherwise) sits at the row's physical-left edge, just
   before the chevron. (The old "next milestone" column was removed: its text
   duplicated the stage chip and repeated the delay already shown here.) */
.mpj-note[b-uveejqkoi5] {
    flex: 1.1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* The non-overdue status phrase — the plain-text states (submission, request,
   nothing waiting), in the state's own colour. */
.mpj-note-text[b-uveejqkoi5] {
    min-width: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Overdue → a compact semantic danger chip: light-red fill, red ink, the
   product chip radius, and the same 5/12 padding rhythm as the stage chip.
   No arrow inside — the row's own chevron stays separate. */
.mpj-late-chip[b-uveejqkoi5] {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-color-danger-bg);
    font-size: var(--motiva-font-size-caption, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    white-space: nowrap;
}

/* The Master's three semantics, and no fourth. Rose = overdue or queued
   on this mentor; violet = a request someone else may still be holding;
   quiet = nothing is waiting, which should not shout. */
.mpj-tone-rose[b-uveejqkoi5]   { color: var(--motiva-color-rose-ink, var(--motiva-color-danger)); }
.mpj-tone-violet[b-uveejqkoi5] { color: var(--motiva-color-violet, var(--motiva-color-indigo)); }
.mpj-tone-quiet[b-uveejqkoi5]  { color: var(--motiva-text-muted); font-weight: var(--motiva-font-weight-medium); }

.mpj-chevron[b-uveejqkoi5] {
    display: flex;
    align-items: center;
    color: var(--motiva-text-subtle);
}

.mpj-card[b-uveejqkoi5]  .mpj-rows .m-row:hover .mpj-chevron {
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

/* ── No matches ──────────────────────────────────────────────
   The reference answers an empty filter inside the list rather than with a
   full empty state — the tabs and the search box above it are the way out,
   and a centred illustration would push them off the fold. */
.mpj-empty[b-uveejqkoi5] {
    margin: 0;
    padding: 24px 4px 18px;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1;
    color: var(--motiva-text-subtle);
}

.mpj-clear[b-uveejqkoi5] {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
    cursor: pointer;
}

.mpj-clear:hover[b-uveejqkoi5] { color: var(--motiva-color-violet, var(--motiva-color-indigo)); }

.mpj-clear:focus-visible[b-uveejqkoi5] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
    border-radius: var(--motiva-radius-sm);
}

/* ── Narrow ──────────────────────────────────────────────────
   Below the reference's own breakpoint the five-column track stops being
   scannable, so it folds back into the shared row's stacked block and the
   two least urgent columns drop. The note never drops: it is the one thing
   the row exists to say. */
@media (max-width: 900px) {
    .mpj-card[b-uveejqkoi5] { padding-inline: 16px; }

    .mpj-card[b-uveejqkoi5]  .mpj-rows .m-row .m-row-main {
        flex-wrap: wrap;
        gap: 4px 12px;
    }

    .mpj-id[b-uveejqkoi5] { flex: 1 1 100%; }
    .mpj-stage-cell[b-uveejqkoi5] { flex: 0 0 auto; }
    .mpj-note[b-uveejqkoi5] { flex: 1 1 auto; justify-content: flex-start; }
}
/* /Pages/Mentor/MentorRequestDetail.razor.rz.scp.css */
/* =========================================================
   MentorRequestDetail — scoped styles

   The body of one request, rendered identically whether it sits in
   a modal (המשימות שלי) or inline in an expanded accordion row
   (בקשות). Its host owns the shell; this owns the rhythm, and every
   value comes from a token — no literal colours, sizes or radii.

   THREE SURFACE LEVELS, AND NOTHING ELSE
     · flat            — identity, content, type facts, history. No
                         boxes: they are text, and a frame around text
                         only adds height.
     · hairline card   — the two blocks that are genuinely tabular:
                         the date move, and a decision already made.
     · gradient edge   — החלטת המנחה while it is still open. The
                         Motiva ambient hairline (the same 1px sweep
                         MCard AmbientEdge draws, by the same
                         technique) marks the one thing on screen the
                         mentor is here to do.

   Both hosts sit on their own background — the accordion row is
   --motiva-surface-secondary — so every card here is drawn on
   --motiva-surface-primary and would otherwise disappear into it.
   ========================================================= */

/* ── Rhythm ───────────────────────────────────────────────────
   One gap value between blocks. The screen this replaced mixed 24px
   block gaps with 9px table rows, which is what made a four-fact
   request read as a full page. */

.mrd > * + *[b-cp7a9l2psf] { margin-block-start: var(--motiva-space-md); }

/* ── 1. Identity ─────────────────────────────────────────────
   Rendered only where the host does not already show it. */

.mrd-id[b-cp7a9l2psf] {
    padding-block-end: var(--motiva-space-sm);
    border-block-end: 1px solid var(--motiva-border-subtle);
}

.mrd-id-line[b-cp7a9l2psf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--motiva-space-sm);
    margin-block-end: 6px;
}

/* Waiting time qualifies the status — secondary text beside it, never
   a fact row of its own. */
.mrd-id-wait[b-cp7a9l2psf] {
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-muted);
}

.mrd-id-wait[b-cp7a9l2psf]::before {
    content: "·";
    margin-inline-end: 6px;
}

.mrd-id-title[b-cp7a9l2psf] {
    margin: 0;
    font-size: var(--motiva-font-size-h3);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: var(--motiva-line-height-heading);
    color: var(--motiva-text-primary);
}

/* "פרויקט · צוות · מגיש" — the queue row's own second line, at the
   queue row's own size and tone. */
.mrd-id-context[b-cp7a9l2psf] {
    margin: 3px 0 0;
    font-size: var(--motiva-font-size-caption);
    line-height: var(--motiva-line-height-caption);
    color: var(--motiva-text-muted);
}

/* ── 2. Sections ─────────────────────────────────────────────
   A label and its content. No surface, no separator: the 16px gap is
   the separation. */

.mrd-label[b-cp7a9l2psf] {
    margin: 0 0 5px;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    letter-spacing: 0.06em;
    color: var(--motiva-text-secondary);
}

.mrd-text[b-cp7a9l2psf] {
    margin: 0;
    font-size: var(--motiva-font-size-body);
    line-height: var(--motiva-line-height-body);
    color: var(--motiva-text-primary);
    white-space: pre-wrap;
}

/* ── 3. The date move ────────────────────────────────────────
   An extension is one fact — "this date becomes that date" — so it is
   drawn as one object. In RTL the first child sits on the right, so
   the row reads current → requested with the arrow pointing the way
   the eye already travels. */

.mrd-shift[b-cp7a9l2psf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--motiva-space-md);
    padding: 10px var(--motiva-space-md);
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-primary);
}

.mrd-shift-side[b-cp7a9l2psf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mrd-shift-k[b-cp7a9l2psf] {
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-muted);
}

.mrd-shift-v[b-cp7a9l2psf] {
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* The requested date is the ask — the one value the mentor is being
   asked to accept, so it carries the weight and the brand ink. */
.mrd-shift-to .mrd-shift-v[b-cp7a9l2psf] {
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    font-weight: var(--motiva-font-weight-bold);
}

.mrd-shift-arrow[b-cp7a9l2psf] {
    font-size: var(--motiva-font-size-md);
    color: var(--motiva-text-subtle, var(--motiva-text-muted));
    line-height: 1;
}

/* The size of the move, so nobody has to subtract two dates by eye. */
.mrd-shift-delta[b-cp7a9l2psf] {
    margin-inline-start: auto;
    padding: 3px 10px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-color-brand-bg, var(--motiva-surface-secondary));
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    white-space: nowrap;
}

.mrd-shift-target[b-cp7a9l2psf] {
    margin: 6px 0 0;
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-muted);
}

/* ── 4. החלטת המנחה ──────────────────────────────────────────
   The 1px gradient sweep behind an inset surface — MCard's AmbientEdge
   technique, applied to the one block that earns the system's highest
   emphasis. Drawn this way rather than with border-image so the
   corners stay properly rounded. */

.mrd-act[b-cp7a9l2psf] {
    padding: 1px;
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-gradient-edge, var(--motiva-border-card));
}

.mrd-act-inner[b-cp7a9l2psf] {
    padding: var(--motiva-space-md);
    border-radius: calc(var(--motiva-radius-md) - 1px);
    background: var(--motiva-surface-primary);
}

/* A decision already recorded is reference, not an action — same
   layout, no emphasis. */
.mrd-act-done[b-cp7a9l2psf] {
    padding: 0;
    background: none;
}

.mrd-act-done .mrd-act-inner[b-cp7a9l2psf] {
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-md);
}

.mrd-act-title[b-cp7a9l2psf] {
    margin: 0;
    font-size: var(--motiva-font-size-md);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
}

.mrd-act-hint[b-cp7a9l2psf] {
    margin: 4px 0 0;
    font-size: var(--motiva-font-size-caption);
    line-height: var(--motiva-line-height-caption);
    color: var(--motiva-text-muted);
}

/* ── The two-way choice ──────────────────────────────────────
   Not two actions: both sit at rest until one is picked, and the
   picked one takes the semantic tone of what it means (teal =
   recommend, rose = don't) plus an inset ring and a mark — so the
   selection survives colour blindness and a greyscale screenshot.
   No gradient here: the gradient belongs to the CTA below. */

.mrd-choice[b-cp7a9l2psf] {
    display: flex;
    gap: var(--motiva-space-sm);
    margin-block: 12px;
}

.mrd-choice-btn[b-cp7a9l2psf] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--motiva-control-height-md);
    padding-inline: var(--motiva-space-md);
    border: 1px solid var(--motiva-border-strong);
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-primary);
    font-family: inherit;
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
    cursor: pointer;
    transition:
        border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
        background   var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
        box-shadow   var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
        color        var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mrd-choice-btn:hover:not(:disabled)[b-cp7a9l2psf] { border-color: var(--motiva-text-muted); }

.mrd-choice-btn:focus-visible[b-cp7a9l2psf] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.mrd-choice-btn:disabled[b-cp7a9l2psf] { cursor: default; }

/* The mark exists only on the picked side. */
.mrd-choice-mark[b-cp7a9l2psf] { display: none; }

.mrd-choice-on .mrd-choice-mark[b-cp7a9l2psf],
.mrd-choice-off .mrd-choice-mark[b-cp7a9l2psf] {
    display: inline-flex;
    align-items: center;
}

.mrd-choice-on[b-cp7a9l2psf] {
    border-color: var(--motiva-color-teal);
    background: var(--motiva-color-success-bg);
    color: var(--motiva-color-teal);
    box-shadow: inset 0 0 0 1px currentColor;
}

.mrd-choice-off[b-cp7a9l2psf] {
    border-color: var(--motiva-color-rose, var(--motiva-color-danger));
    background: var(--motiva-color-danger-bg);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    box-shadow: inset 0 0 0 1px currentColor;
}

/* ── The note ────────────────────────────────────────────────
   A real label, not a placeholder standing in for one: the placeholder
   disappears the moment there is text in the field. */

.mrd-notes-label[b-cp7a9l2psf] {
    display: block;
    margin-block-end: 5px;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
}

.mrd-notes[b-cp7a9l2psf] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid var(--motiva-border-strong);
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-primary);
    font-family: inherit;
    font-size: var(--motiva-font-size-sm);
    line-height: var(--motiva-line-height-body);
    resize: vertical;
}

.mrd-notes:focus-visible[b-cp7a9l2psf] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 1px;
}

.mrd-error[b-cp7a9l2psf] {
    margin: var(--motiva-space-sm) 0 0;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
}

/* The submit button, when this component renders its own actions —
   i.e. inline in בקשות. In the modal the footer owns them instead. */
.mrd-actions[b-cp7a9l2psf] {
    display: flex;
    justify-content: flex-end;
    margin-block-start: 12px;
}

/* ── A recommendation already on record ──────────────────────── */

.mrd-done-line[b-cp7a9l2psf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--motiva-space-sm);
    margin-block-start: var(--motiva-space-sm);
}

.mrd-done-meta[b-cp7a9l2psf] {
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-muted);
}

.mrd-done-note[b-cp7a9l2psf] {
    margin-block-start: 8px;
    font-size: var(--motiva-font-size-sm);
    color: var(--motiva-text-secondary);
}

/* ── Nothing to do here ──────────────────────────────────────
   One quiet line. It used to be a filled block the size of the
   decision form, which gave "אין פעולה שנדרשת ממך" the same visual
   weight as the action it replaces. */

.mrd-readonly[b-cp7a9l2psf] {
    margin: 0;
    padding: 10px var(--motiva-space-md);
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-primary);
    font-size: var(--motiva-font-size-sm);
    line-height: var(--motiva-line-height-body);
    color: var(--motiva-text-secondary);
}

/* ── History ─────────────────────────────────────────────────
   Reference material: smallest type, muted, last on the page. */

.mrd-history[b-cp7a9l2psf] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.mrd-history-row[b-cp7a9l2psf] {
    display: flex;
    align-items: baseline;
    gap: var(--motiva-space-sm);
    padding-block: 5px;
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-muted);
    line-height: var(--motiva-line-height-caption);
}

.mrd-history-when[b-cp7a9l2psf] {
    flex-shrink: 0;
    width: 40px;
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
    font-variant-numeric: tabular-nums;
}

.mrd-history-what[b-cp7a9l2psf] { min-width: 0; }

/* ── Loading ─────────────────────────────────────────────────── */

.mrd-state[b-cp7a9l2psf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--motiva-space-sm);
    padding-block: var(--motiva-space-lg);
    font-size: var(--motiva-font-size-body);
    color: var(--motiva-text-muted);
}

.mrd-spinner[b-cp7a9l2psf] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--motiva-border-strong);
    border-top-color: var(--motiva-color-violet, var(--motiva-color-indigo));
    border-radius: var(--motiva-radius-full);
    animation: mrd-spin-b-cp7a9l2psf 0.7s linear infinite;
}

@keyframes mrd-spin-b-cp7a9l2psf { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .mrd-spinner[b-cp7a9l2psf] { animation-duration: 1.6s; }
    .mrd-choice-btn[b-cp7a9l2psf] { transition: none; }
}

/* ============================================================
   INLINE — the finalized design's expanded card
   Prefix: mrd-i-

   Source: Motiva Mentor Requests.dc.html. Nothing above this line
   is touched: the record view is what המשימות שלי's modal draws,
   and that screen is not in this pass.

   The card itself — its white fill, its 20px radius and its
   18/24/14 inset — belongs to the page, which owns the row it
   replaced. This owns everything inside it.
   ============================================================ */

.mrd-i[b-cp7a9l2psf] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* The student's words, at the largest body size in the product. The
   measure is capped so a long explanation stays readable across the
   full-width card. */
.mrd-i-text[b-cp7a9l2psf] {
    margin: 14px 0 0;
    max-width: 760px;
    font-size: var(--motiva-font-size-h3, 16.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: var(--motiva-line-height-body);
    color: var(--motiva-text-primary);
    text-wrap: pretty;
}

.mrd-i-text-more[b-cp7a9l2psf] { margin-block-start: 10px; }

/* ── The facts line ──────────────────────────────────────────
   One row, whatever this request type happens to carry: the date
   move, its target, and any files the team attached. */

.mrd-i-facts[b-cp7a9l2psf] {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-block-start: 14px;
}

/* An extension is a date move, so it reads as one — the pair inside a
   single brand-tinted chip instead of two label-value rows a mentor has
   to subtract in their head. */
.mrd-i-dates[b-cp7a9l2psf] {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 10px 18px;
    border-radius: var(--motiva-radius-row);
    background: rgba(109, 40, 245, 0.05);
}

.mrd-i-date[b-cp7a9l2psf] { text-align: center; }

.mrd-i-date-v[b-cp7a9l2psf] {
    display: block;
    font-size: var(--motiva-font-size-h3, 17px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1;
    letter-spacing: var(--motiva-letter-spacing-section);
    color: var(--motiva-text-muted);
}

.mrd-i-date-k[b-cp7a9l2psf] {
    display: block;
    margin-block-start: 5px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1;
    color: var(--motiva-text-subtle);
}

/* Only the requested date is violet — it is the thing being asked for. */
.mrd-i-date-to .mrd-i-date-v[b-cp7a9l2psf],
.mrd-i-date-to .mrd-i-date-k[b-cp7a9l2psf] { color: var(--motiva-color-violet); }

/* RTL: the current date sits first, on the right, so the arrow points
   with the reading direction and needs no flip. */
.mrd-i-date-arrow[b-cp7a9l2psf] {
    flex: 0 0 auto;
    color: var(--motiva-color-violet);
}

/* WHICH deadline is moving. Not in the reference's mock — which only
   ever files an unattached extension — but the two dates above are
   about nothing without it, so it rides the same line at the file
   link's weight rather than becoming a block of its own. */
.mrd-i-target[b-cp7a9l2psf] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-secondary);
}

.mrd-i-file[b-cp7a9l2psf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-secondary);
    text-decoration: none;
    transition: color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mrd-i-file:hover[b-cp7a9l2psf] { color: var(--motiva-color-violet); }

.mrd-i-file:focus-visible[b-cp7a9l2psf] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
    border-radius: var(--motiva-radius-sm);
}

/* ── The footer ──────────────────────────────────────────────
   One hairline, then either the recommendation form or the sentence
   that says where the request is — and the history disclosure pushed
   to the reading end of whichever it is. */

.mrd-i-foot[b-cp7a9l2psf] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-block-start: 16px;
    padding-block-start: 13px;
    border-block-start: 1px solid var(--motiva-border-card);
}

/* The form is taller than its disclosure, so the two align on their
   baselines rather than on their centres. */
.mrd-i-foot-act[b-cp7a9l2psf] { align-items: flex-end; }

.mrd-i-rec[b-cp7a9l2psf] { min-width: 0; }

.mrd-i-rec-title[b-cp7a9l2psf] {
    margin: 0 0 10px;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1;
    color: var(--motiva-text-primary);
}

.mrd-i-rec-row[b-cp7a9l2psf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ממליץ לאשר / לא ממליץ — an outlined pair, not a filled one. The mentor
   advises; the lecturer decides, and a solid brand fill here would read
   as the decision itself. */
.mrd-i-pill[b-cp7a9l2psf] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border: 1.5px solid rgba(27, 26, 34, 0.12);
    border-radius: var(--motiva-radius-full);
    background: transparent;
    color: var(--motiva-text-muted);
    font-family: inherit;
    font-size: var(--motiva-font-size-caption, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    cursor: pointer;
    transition:
        background   var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
        border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
        color        var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mrd-i-pill:hover:not(:disabled)[b-cp7a9l2psf] { border-color: rgba(27, 26, 34, 0.2); }

.mrd-i-pill-on[b-cp7a9l2psf],
.mrd-i-pill-on:hover:not(:disabled)[b-cp7a9l2psf] {
    background: rgba(109, 40, 245, 0.08);
    border-color: var(--motiva-color-violet);
    color: var(--motiva-color-violet);
    font-weight: var(--motiva-font-weight-bold);
}

.mrd-i-pill:focus-visible[b-cp7a9l2psf] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.mrd-i-pill:disabled[b-cp7a9l2psf] { cursor: not-allowed; opacity: 0.6; }

.mrd-i-note[b-cp7a9l2psf] {
    width: 250px;
    max-width: 100%;
    padding: 11px 16px;
    border: 1px solid rgba(27, 26, 34, 0.1);
    border-radius: var(--motiva-radius-full);
    background: rgba(27, 26, 34, 0.02);
    font-family: inherit;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-regular);
    line-height: 1;
    color: var(--motiva-text-primary);
}

.mrd-i-note:focus-visible[b-cp7a9l2psf] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 1px;
    border-color: transparent;
}

/* Geometry only — the gradient fill, the brightness hover, the press and
   the disabled treatment all come from the shared `.motiva-cta`
   (motiva-base.css). The compound selector is what lets the reference's
   pill radius beat that file's --motiva-radius-sm. */
.mrd-i-send.motiva-cta[b-cp7a9l2psf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: 0;
    border-radius: var(--motiva-radius-full);
    font-family: inherit;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
}

.mrd-i-error[b-cp7a9l2psf] {
    margin: 10px 0 0;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
}

/* Where the request is now, in the tone that state carries. */
.mrd-i-state[b-cp7a9l2psf] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
}

.mrd-i-state-blue[b-cp7a9l2psf]  { color: var(--motiva-color-blue); }
.mrd-i-state-teal[b-cp7a9l2psf]  { color: var(--motiva-color-teal-ink, var(--motiva-color-teal)); }
.mrd-i-state-muted[b-cp7a9l2psf] { color: var(--motiva-text-muted); }

/* ── History ─────────────────────────────────────────────────
   Reference, not reading — the quietest control on the card, and
   closed until it is asked for. */

.mrd-i-hist-btn[b-cp7a9l2psf] {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    border-radius: var(--motiva-radius-sm);
    background: transparent;
    font-family: inherit;
    font-size: var(--motiva-font-size-control, 12.5px);
    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);
}

/* Beside the form, the disclosure sits on the pills' baseline rather
   than on the bottom of the block. */
.mrd-i-hist-btn-act[b-cp7a9l2psf] { padding-block-end: 11px; }

.mrd-i-hist-btn:hover[b-cp7a9l2psf] { color: var(--motiva-text-secondary); }

.mrd-i-hist-btn:focus-visible[b-cp7a9l2psf] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.mrd-i-hist-chev[b-cp7a9l2psf] {
    display: inline-flex;
    transition: transform var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard);
}

.mrd-i-hist-chev-open[b-cp7a9l2psf] { transform: rotate(180deg); }

.mrd-i-hist[b-cp7a9l2psf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-block-start: 12px;
    padding-block-start: 12px;
    border-block-start: 1px solid rgba(27, 26, 34, 0.06);
}

.mrd-i-hist-row[b-cp7a9l2psf] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mrd-i-hist-dot[b-cp7a9l2psf] {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-journey-dot-future);
}

.mrd-i-hist-text[b-cp7a9l2psf] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-regular);
    line-height: 1.5;
    color: var(--motiva-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .mrd-i-pill[b-cp7a9l2psf],
    .mrd-i-file[b-cp7a9l2psf],
    .mrd-i-hist-btn[b-cp7a9l2psf],
    .mrd-i-hist-chev[b-cp7a9l2psf] { transition: none; }
}

@media (max-width: 720px) {
    .mrd-i-note[b-cp7a9l2psf] { width: 100%; }
    .mrd-i-hist-btn[b-cp7a9l2psf] { margin-inline-start: 0; }
}

/* ── The final-decision block (shared with the lecturer workspace) ──
   Same footer object as the recommendation row above it: the fields
   and the two actions on one line. The reject action is a quiet
   outline rather than a second gradient — one primary per row. */

.mrd-i-combined[b-cp7a9l2psf] {
    display: block;
    margin-block-start: 3px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-subtle);
}

.mrd-i-date[b-cp7a9l2psf] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    font-size: var(--motiva-font-size-caption, 12px);
    color: var(--motiva-text-secondary);
}

.mrd-i-date-lbl[b-cp7a9l2psf] { white-space: nowrap; }

.mrd-i-date input[b-cp7a9l2psf] {
    font: inherit;
    padding: 6px 10px;
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-primary, #fff);
    color: var(--motiva-text-primary);
}

.mrd-i-date input:focus-visible[b-cp7a9l2psf] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 1px;
}

.mrd-i-reject[b-cp7a9l2psf] {
    flex: 0 0 auto;
    padding: 8px 16px;
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-full);
    background: none;
    font-family: inherit;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-secondary);
    cursor: pointer;
    transition: color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mrd-i-reject:hover:not(:disabled)[b-cp7a9l2psf] {
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    border-color: var(--motiva-color-rose, var(--motiva-color-danger));
}

.mrd-i-reject:disabled[b-cp7a9l2psf] { opacity: 0.55; cursor: default; }

.mrd-i-reject:focus-visible[b-cp7a9l2psf] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}
/* /Pages/Mentor/MentorRequestsPage.razor.rz.scp.css */
/* ============================================================
   MentorRequestsPage — בקשות
   Prefix: mrq-

   THE SPLIT WORKSPACE IS NOT HERE, AND NEITHER IS THE ROW OR THE
   RECORD HEAD ANY MORE. The page header, the two columns, the
   internally-scrolling queue with its scrollbar on the right, the
   row and its divider, the selected-row treatment, the filter bar,
   the type dropdown, the empty state, the detail card and — since
   the student queue became the reference for all three roles — the
   ROW'S OWN ANATOMY (`rqw-row-head` / `-title` / `-type` / `-meta`)
   and the RECORD'S HEAD BAND (`rqw-ws-head` / `-ident` / `-badges`
   / `rqw-type-pill` / `rqw-ws-state`) all come from the shared
   `rqw-*` skeleton in wwwroot/css/motiva-request-workspace.css.
   Blazor's scoped CSS cannot be imported across components, so
   sharing that skeleton means a global stylesheet or a verbatim copy
   per page — and this file used to be the copy.

   WHAT IS LEFT HERE IS ONE THING: re-pointing the hosted
   MentorRequestDetail's section labels onto the workspace's, and
   only inside this page.

   THE ROW'S OWN VOCABULARY IS GONE FROM THIS FILE. It used to hold
   `.mrq-dot` in four tones and `.mrq-row-time-rose`, and both went
   with the markup that carried them: the dot painted the BUCKET,
   which is now the pill the mentor selected to get the list, and the
   rose painted the attention threshold on a waiting phrase the row
   no longer prints. Neither signal is lost — the record's meta line
   still carries the shared attention model's own waiting words, and
   its status badge still names the bucket exactly. What is gone is
   the second, colour-coded copy of them, once per row.

   That leaves the mentor queue with NO row rule of its own, which is
   the point: its rows are `rqw-row` and nothing else, the same
   elements the lecturer and student queues draw.

   VISUAL SOURCE for the vocabulary below: Motiva Mentor Requests.dc.html.
   Its section cards, its expand-in-place card, its ↑/↓ stepper and its
   "כל הבקשות שטופלו" footer link went with the layout they belonged
   to, and their rules went with them.
   ============================================================ */


/* ── The hosted record's body ────────────────────────────────
   MentorRequestDetail is drawn in four places — this queue, the
   modal on המשימות שלי and two project workspaces — so its own
   stylesheet is not the place to answer "what does a section label
   look like in the request workspace". These rules re-point only
   the copy INSIDE this page, through the page's scope, and every
   other host keeps exactly what it had.

   The component's root already spaces its own sections; the head
   band and `.rqw-ws-body` now supply the inset `.mrq-record` used
   to, so nothing here touches the layout. */

/* The workspace's section label — 11.5px, uppercase, tracked, muted —
   so a mentor's "מה מבקשים?" and a student's "תיאור הבקשה" are the
   same object. */
.mrq-ws-body[b-m3jpub4bu7]  .mrd-label {
    margin: 0 0 8px;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--motiva-text-muted);
}

/* Body copy at the record's own reading size, matching `.rqw-desc`. */
.mrq-ws-body[b-m3jpub4bu7]  .mrd-text {
    font-size: var(--motiva-font-size-lg, 15.5px);
    line-height: 1.7;
}
/* /Pages/Mentor/MentorRoadmapOverviewPage.razor.rz.scp.css */
/* ──────────────────────────────────────────────────────────────────────
   MentorRoadmapOverviewPage — ציר התקדמות פרויקטים  (mro-* prefix)

   Cross-team progress overview. Withdrawn from the mentor rail
   (NavDefinitions.cs:108) but still resolving, and it had drifted the
   furthest of any mentor screen: eighteen off-palette hues — Tailwind's
   amber, emerald, indigo and red — a 1.25rem h1 under an uppercase
   breadcrumb, and its own page gutter on top of the shell's.

   WHAT THIS PASS CHANGED, AND ONLY THIS
     · the eighteen hues → the four semantic roles. The mapping is the
       product's, not a colour translation: ontrack → teal (done/on-track),
       behind → rose (attention), ahead → blue (in progress),
       noschedule → the inert grey the journey stepper uses for a step
       that will not light up.
     · the card surface → the shared section card, so a card here has the
       same fill, hairline, radius and shadow as one on פרויקטים בהנחייתי
     · the title block → MPageHeader, at the 38px every other mentor
       title is
     · the double gutter → removed; the canvas shell already pads

   The status stripe on the card's inline-start edge is KEPT: it is the
   dashboard's own attention-bar pattern, already drawn correctly here —
   it only ever had the wrong hues.

   No data, route, permission or copy changed.
   ────────────────────────────────────────────────────────────────────── */

/* The canvas shell already supplies the page gutter
   (--motiva-canvas-padding-*, AppLayout.razor.css:99) — this page was
   adding a second 28px on top of it, so its content sat inset from every
   other mentor screen's. */
.mro-page[b-oqdehilnmh] {
    display: flex; flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* The title is now the shared white Core page-header (MPageHeaderCard),
   which carries its own surface and padding; the `.mro-page` flex column's
   16px gap spaces it from the content below. The old
   `::deep .mro-header.m-page-header` padding override dressed the ambient
   compact header and is gone. */

/* ── State rows (loading / error / empty) ─────────────────────────── */
.mro-state[b-oqdehilnmh] {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    background: var(--motiva-panel-surface);
    border: 1px solid var(--motiva-panel-border);
    border-radius: var(--motiva-radius-card);
    color: var(--g-text-secondary);
    font-size: var(--motiva-font-size-body, 14px);
}
.mro-state--err[b-oqdehilnmh]   { color: var(--motiva-color-rose-ink);
                    border-color: color-mix(in srgb, var(--motiva-color-rose) 30%, transparent);
                    background: var(--motiva-color-danger-bg); }
.mro-state--empty[b-oqdehilnmh] { color: var(--g-text-muted); }

/* ── Empty-state banner (stages exist, no milestones linked) ───── */
/* An incomplete configuration is an attention state, so it takes the rose
   role rather than an amber this product has nowhere else. */
.mro-banner[b-oqdehilnmh] {
    display: flex; gap: 12px;
    padding: 12px 14px;
    border-radius: var(--motiva-radius-card);
    background: var(--motiva-color-danger-bg);
    border: 1px solid color-mix(in srgb, var(--motiva-color-rose) 30%, transparent);
    color: var(--motiva-color-rose-ink);
}
.mro-banner .oi[b-oqdehilnmh] { font-size: var(--motiva-font-size-h3, 18px); margin-top: 2px; }
.mro-banner-title[b-oqdehilnmh] { font-size: var(--motiva-font-size-sm, 13px); font-weight: 700; margin-bottom: 4px; }
.mro-banner-body[b-oqdehilnmh]  { font-size: var(--motiva-font-size-caption, 12px); line-height: 1.5; }
.mro-banner-body strong[b-oqdehilnmh] { color: var(--motiva-color-rose-ink); }

/* ── Card grid ─────────────────────────────────────────────────── */
.mro-grid[b-oqdehilnmh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 14px;
}

.mro-card[b-oqdehilnmh] {
    text-align: start;
    background: var(--motiva-panel-surface);
    border: 1px solid var(--motiva-panel-border);
    border-inline-start: 4px solid var(--motiva-journey-dot-future);
    border-radius: var(--motiva-radius-card);
    box-shadow: var(--motiva-panel-shadow);
    padding: 14px 16px;
    display: flex; flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: background 0.13s, border-color 0.13s;
    font-family: inherit;
}

/* Brightens toward opaque rather than lifting — the finished design has no
   transform anywhere, which is why MCard's own interactive hover is written
   the same way. */
.mro-card:hover[b-oqdehilnmh] { background: rgba(255, 255, 255, 0.82); }

/* Schedule-status colored stripe on the inline-start edge */
.mro-card--ontrack[b-oqdehilnmh]    { border-inline-start-color: var(--motiva-color-teal); }
.mro-card--behind[b-oqdehilnmh]     { border-inline-start-color: var(--motiva-color-rose); }
.mro-card--ahead[b-oqdehilnmh]      { border-inline-start-color: var(--motiva-color-blue); }
.mro-card--noschedule[b-oqdehilnmh] { border-inline-start-color: var(--motiva-journey-dot-future); }

.mro-card-head[b-oqdehilnmh] {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 10px;
}
.mro-card-head-text[b-oqdehilnmh] { flex: 1; }
.mro-proj-num[b-oqdehilnmh] {
    display: inline-block;
    font-size: var(--motiva-font-size-caption, 11px); font-weight: 700;
    color: var(--g-text-muted);
    margin-bottom: 4px;
}
.mro-card-title[b-oqdehilnmh] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--g-text-primary);
}
.mro-card-team[b-oqdehilnmh] {
    margin-top: 4px;
    font-size: var(--motiva-font-size-caption, 12px);
    color: var(--g-text-secondary);
    display: inline-flex; align-items: center; gap: 6px;
}

/* ── Schedule pill ─────────────────────────────────────────────── */
.mro-schedule-pill[b-oqdehilnmh] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--motiva-font-size-caption, 11px); font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
.mro-schedule-ontrack[b-oqdehilnmh]    { background: var(--motiva-color-success-bg); color: var(--motiva-color-teal-ink); }
.mro-schedule-behind[b-oqdehilnmh]     { background: var(--motiva-color-danger-bg);  color: var(--motiva-color-rose-ink); }
.mro-schedule-ahead[b-oqdehilnmh]      { background: var(--motiva-color-info-bg);    color: var(--motiva-color-blue); }
.mro-schedule-noschedule[b-oqdehilnmh] { background: var(--g-bg-hover); color: var(--g-text-muted); }

/* ── Current-stage line ────────────────────────────────────────── */
.mro-current-line[b-oqdehilnmh] {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
    font-size: var(--motiva-font-size-sm, 13px);
}
.mro-current-label[b-oqdehilnmh] { color: var(--g-text-muted); font-weight: 600; }
.mro-current-name[b-oqdehilnmh]  { color: var(--g-text-primary); font-weight: 700; }
.mro-current-name--done[b-oqdehilnmh] { color: var(--motiva-color-teal-ink); }
.mro-current-date[b-oqdehilnmh]  { color: var(--g-text-muted); font-size: var(--motiva-font-size-caption, 12px); direction: ltr; margin-inline-start: auto; }

/* ── Stage strip (mini timeline) ───────────────────────────────── */
.mro-strip[b-oqdehilnmh] {
    display: flex;
    gap: 4px;
    align-items: stretch;
}
.mro-stage[b-oqdehilnmh] {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: var(--g-bg-hover);
    border: 1px solid var(--g-border-light);
}
.mro-stage--completed[b-oqdehilnmh]     { background: var(--motiva-color-teal); border-color: var(--motiva-color-teal); }
.mro-stage--current[b-oqdehilnmh]       { background: var(--g-accent); border-color: var(--g-accent); }
.mro-stage--future[b-oqdehilnmh]        { background: var(--g-bg-hover); }
.mro-stage--notapplicable[b-oqdehilnmh] { background: transparent; border-style: dashed; }

/* ── Card footer (progress bar + mini callout) ─────────────────── */
.mro-card-foot[b-oqdehilnmh] {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
}
.mro-prog[b-oqdehilnmh] {
    flex: 1;
    display: flex; align-items: center; gap: 8px;
    min-width: 140px;
}
.mro-prog-bar[b-oqdehilnmh] {
    flex: 1;
    height: 6px;
    background: var(--g-bg-hover);
    border-radius: 999px;
    overflow: hidden;
}
.mro-prog-fill[b-oqdehilnmh] {
    height: 100%;
    background: var(--g-accent);
    transition: width 0.25s;
}
.mro-prog-pct[b-oqdehilnmh] {
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 700;
    color: var(--g-text-muted);
    font-variant-numeric: tabular-nums;
}

.mro-mini[b-oqdehilnmh] {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px;
    border-radius: var(--g-radius-sm);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 600;
    max-width: 180px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mro-mini--overdue[b-oqdehilnmh]  { background: var(--motiva-color-danger-bg); color: var(--motiva-color-rose-ink);
                      border: 1px solid color-mix(in srgb, var(--motiva-color-rose) 30%, transparent); }
.mro-mini--upcoming[b-oqdehilnmh] { background: var(--motiva-color-info-bg);   color: var(--motiva-color-blue);
                      border: 1px solid color-mix(in srgb, var(--motiva-color-blue) 28%, transparent); }

/* ── Card CTA (footer link to detail page) ─────────────────────── */
.mro-card-cta[b-oqdehilnmh] {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px dashed var(--g-border-light);
    display: flex; align-items: center; justify-content: space-between;
    color: var(--g-accent);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 600;
}
.mro-card-cta .oi[b-oqdehilnmh] { font-size: var(--motiva-font-size-caption, 12px); }

/* Stages-not-configured fallback inside a card */
.mro-card-empty[b-oqdehilnmh] {
    display: flex; align-items: center; gap: 8px;
    padding: 12px;
    background: var(--g-bg-hover);
    border-radius: var(--g-radius-sm);
    color: var(--g-text-muted);
    font-size: var(--motiva-font-size-caption, 12px);
}
.mro-card-empty .oi[b-oqdehilnmh] { font-size: var(--motiva-font-size-body, 14px); }

/* ── Inline spinner ───────────────────────────────────────────── */
.mro-spinner-inline[b-oqdehilnmh] {
    width: 14px; height: 14px;
    border: 2px solid transparent;
    border-top-color: var(--g-accent);
    border-radius: 50%;
    display: inline-block;
    animation: mro-spin-b-oqdehilnmh 0.7s linear infinite;
}
@keyframes mro-spin-b-oqdehilnmh { to { transform: rotate(360deg); } }
/* CTA button inside the "stages exist, no milestones linked" banner.
   Only rendered for Admin/Staff so mentor-only users don't see a
   dead-end link they can't act on. */
.mro-banner-body-wrap[b-oqdehilnmh] { display: flex; flex-direction: column; gap: 6px; }
.mro-banner-cta[b-oqdehilnmh] {
    align-self: flex-start;
    margin-top: 4px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: var(--g-radius-sm);
    background: var(--motiva-gradient-signature);
    border: none;
    color: #fff;   /* approved exception: ink on a filled brand surface */
    font-size: var(--motiva-font-size-caption, 12px); font-weight: 700;
    cursor: pointer;
    transition: filter 0.13s;
}
.mro-banner-cta:hover[b-oqdehilnmh] { filter: brightness(0.93); }
.mro-banner-cta .oi[b-oqdehilnmh] { font-size: var(--motiva-font-size-caption, 12px); }
/* /Pages/Mentor/MentorSubmissionsPage.razor.rz.scp.css */
/* =========================================================
   MentorSubmissionsPage — הגשות
   Prefix: msu-

   THIS SCREEN IS OUT OF THE MENTOR RAIL (NavDefinitions.cs:108-118
   lists it as withdrawn-not-deleted) BUT STILL RESOLVES, and a
   notification can land a mentor on it. It was carrying a palette
   from before the Motiva system existed — Tailwind's amber / green /
   red — beside pages drawing the four semantic roles, so the same
   "אושר" was green here and teal two clicks away.

   WHAT THIS PASS CHANGED, AND ONLY THIS
     · the eight off-palette hues → the four semantic roles
       (pending → blue "waiting", approved → teal "done",
        returned / escalation → rose "attention")
     · the two section surfaces → the shared section card, so a list
       here has the same fill, hairline, radius and shadow as an
       MCard on every other mentor screen
     · physical left/right → logical inline-start/end

   Nothing about the review flow, its data, its permissions or its
   copy was touched. The --g-* tokens throughout are NOT legacy in
   this shell: `:root .motiva.motiva-final` re-declares every one of
   them at the finished design's value, which is why they are read
   rather than replaced.
   ========================================================= */

/* ── The four roles, named once for this screen ──────────────
   Each of the three review states gets an ink and its own wash,
   both from the shared tokens. Declared as custom properties so a
   badge, a button and a history chip that mean the same thing
   cannot drift to three different mixes of the same hue. */
.msu-page[b-dwkd0uknjs] {
    --msu-pending-ink:    var(--motiva-color-blue);
    --msu-pending-wash:   var(--motiva-color-info-bg);
    --msu-approved-ink:   var(--motiva-color-teal-ink);
    --msu-approved-wash:  var(--motiva-color-success-bg);
    --msu-returned-ink:   var(--motiva-color-rose-ink);
    --msu-returned-wash:  var(--motiva-color-danger-bg);
}

/* ── Page wrapper ── */
.msu-page[b-dwkd0uknjs] {
    display:        flex;
    flex-direction: column;
    gap:            14px;
    height:         100%;
}

/* ── Title row ──
   The screen's name is the shared white Core page-header (MPageHeaderCard)
   now, like every other mentor screen's. It carries its own surface and
   padding; the `.msu-page` flex column's 14px gap spaces it from the list.
   The old `::deep .msu-header.m-page-header` padding override dressed the
   ambient compact header and is gone. */

/* "N ממתינות" — a waiting count, so it takes the blue role rather
   than the amber it used to. Rose is reserved for what has escalated. */
.msu-count-badge[b-dwkd0uknjs] {
    padding:       4px 14px;
    border-radius: var(--g-radius-full);
    background:    var(--msu-pending-wash);
    color:         var(--msu-pending-ink);
    font-size: var(--motiva-font-size-caption, 13px);
    font-weight:   700;
}

/* ── Loading / empty ── */
.msu-loading[b-dwkd0uknjs] {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    padding:         60px;
    color:           var(--g-text-secondary);
    font-size:       var(--g-type-secondary);
}

.msu-spinner[b-dwkd0uknjs] {
    width:         28px;
    height:        28px;
    border:        3px solid var(--g-border);
    border-top:    3px solid var(--g-accent);
    border-radius: var(--g-radius-full);
    animation:     msu-spin-b-dwkd0uknjs 0.8s linear infinite;
}

@keyframes msu-spin-b-dwkd0uknjs { to { transform: rotate(360deg); } }

.msu-empty[b-dwkd0uknjs] {
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    gap:              14px;
    padding:          80px;
    color:            var(--g-text-muted);
    font-size:        var(--g-type-secondary);
}

.msu-empty-icon[b-dwkd0uknjs] { font-size: 36px; color: var(--motiva-color-teal); }

/* ── Submissions list ── */
/* The list card — the shared Motiva panel, same as every other role's
   primary list surface. It was the translucent section fill behind a
   white hairline, which is what made this page a shade greyer than the
   mentor Home cards beside it in the same nav. */
.msu-list[b-dwkd0uknjs] {
    background:    var(--motiva-panel-surface);
    border:        1px solid var(--motiva-panel-border);
    border-radius: var(--motiva-panel-radius);
    box-shadow:    var(--motiva-panel-shadow);
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
}

.msu-row[b-dwkd0uknjs] {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    gap:              16px;
    padding:          14px 20px;
    border-block-end:   1px solid var(--g-border-light);
    background:         none;
    border-inline:      none;
    border-block-start: none;
    cursor:             pointer;
    text-align:         start;
    font-family:      var(--g-font-base);
    transition:       background 0.12s;
}

.msu-row:last-child[b-dwkd0uknjs] { border-block-end: none; }
.msu-row:hover[b-dwkd0uknjs]      { background: var(--g-bg-hover); }

.msu-row-start[b-dwkd0uknjs] {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    flex:           1;
    min-width:      0;
}

.msu-row-project[b-dwkd0uknjs] {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size: var(--motiva-font-size-meta);
    color:       var(--g-text-muted);
    font-weight: 600;
}

.msu-project-num[b-dwkd0uknjs] {
    color:       var(--g-accent);
    font-weight: 700;
}

.msu-row-task[b-dwkd0uknjs] {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
}

.msu-milestone-label[b-dwkd0uknjs] {
    font-size: var(--motiva-font-size-meta);
    color:       var(--g-text-muted);
    background:  var(--g-bg-input);
    padding:     1px 7px;
    border-radius: var(--g-radius-full);
}

.msu-task-title[b-dwkd0uknjs] {
    font-size:   var(--g-type-secondary);
    font-weight: 600;
    color:       var(--g-text-primary);
}

.msu-row-meta[b-dwkd0uknjs] {
    display:     flex;
    align-items: center;
    gap:         14px;
    flex-wrap:   wrap;
}

.msu-submitter[b-dwkd0uknjs],
.msu-submitted-date[b-dwkd0uknjs] {
    display:     flex;
    align-items: center;
    gap:         4px;
    font-size: var(--motiva-font-size-meta);
    color:       var(--g-text-muted);
}

.msu-submitter .oi[b-dwkd0uknjs],
.msu-submitted-date .oi[b-dwkd0uknjs] { font-size: var(--motiva-font-size-caption, 11px); }

.msu-row-end[b-dwkd0uknjs] {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-shrink: 0;
}

.msu-pending-badge[b-dwkd0uknjs] {
    padding:       3px 10px;
    border-radius: var(--g-radius-full);
    font-size: var(--motiva-font-size-caption);
    font-weight:   600;
    background:    var(--msu-pending-wash);
    color:         var(--msu-pending-ink);
}

.msu-row-arrow[b-dwkd0uknjs] {
    font-size: 11px;
    color:     var(--g-text-muted);
}

/* ── Backdrop ── */
.msu-backdrop[b-dwkd0uknjs] {
    position:   fixed;
    inset:      0;
    background: var(--motiva-scrim, rgba(0,0,0,0.30));
    z-index:    400;
}

/* ── Drawer ──
   THE SAME OBJECT AS THE OTHER TWO MENTOR DRAWERS. פרויקטים בהנחייתי and
   יומן ותכנון both draw a floating panel inset 26px from the viewport at
   --motiva-radius-xl over --motiva-shadow-popover; this one was a flush
   full-height slab with square corners, which is the single biggest
   "different product" tell on the screen.

   Only the frame changed. The width stays 480px — this drawer carries a
   whole review flow, not a summary rail — and everything inside it is
   untouched.

   `left: 0` became `inset-inline-end`, which is the SAME edge: this app
   sets direction in CSS, so the reading end is the viewport's left. It is
   written logically now so it cannot silently flip if that ever changes. */
.msu-drawer[b-dwkd0uknjs] {
    position:       fixed;
    top:            26px;
    bottom:         26px;
    inset-inline-end: 26px;
    width:          480px;
    max-width:      calc(100vw - 52px);
    background:     var(--motiva-surface-primary, var(--g-bg-surface));
    border-radius:  var(--motiva-radius-xl);
    box-shadow:     var(--motiva-shadow-popover);
    z-index:        500;
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
}

/* Below the inset the panel would be all frame and no content, so it
   goes back to filling the viewport edge to edge. */
@media (max-width: 640px), (max-height: 560px) {
    .msu-drawer[b-dwkd0uknjs] {
        top: 0;
        bottom: 0;
        inset-inline-end: 0;
        max-width: 100vw;
        border-radius: 0;
    }
}

.msu-drawer-header[b-dwkd0uknjs] {
    flex-shrink:   0;
    padding:       20px 22px 16px;
    border-bottom: 1px solid var(--g-border-light);
}

.msu-drawer-header-row[b-dwkd0uknjs] {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             12px;
    margin-bottom:   10px;
}

.msu-drawer-milestone[b-dwkd0uknjs] {
    font-size: var(--motiva-font-size-caption, 12px);
    color:         var(--g-text-muted);
    margin-bottom: 3px;
}

.msu-drawer-title[b-dwkd0uknjs] {
    font-size:   var(--g-type-subtitle);
    font-weight: 700;
    color:       var(--g-text-primary);
    line-height: 1.3;
}

.msu-drawer-close[b-dwkd0uknjs] {
    flex-shrink:     0;
    width:           32px;
    height:          32px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   var(--g-radius-sm);
    border:          1px solid var(--g-border);
    background:      var(--g-bg-input);
    color:           var(--g-text-muted);
    cursor:          pointer;
    font-size: var(--motiva-font-size-caption, 12px);
    transition:      background 0.12s;
}

.msu-drawer-close:hover[b-dwkd0uknjs] { background: var(--g-bg-hover); color: var(--g-text-primary); }

.msu-drawer-meta[b-dwkd0uknjs] {
    display:       flex;
    flex-wrap:     wrap;
    gap:           10px;
    font-size: var(--motiva-font-size-sm, 13px);
    color:         var(--g-text-secondary);
    margin-bottom: 12px;
}

.msu-drawer-meta-item[b-dwkd0uknjs] {
    display:     flex;
    align-items: center;
    gap:         5px;
}

.msu-drawer-meta-item .oi[b-dwkd0uknjs] { font-size: var(--motiva-font-size-caption, 12px); color: var(--g-text-muted); }

.msu-drawer-status-row[b-dwkd0uknjs] { margin-top: 4px; }

.msu-drawer-status-badge[b-dwkd0uknjs] {
    display:       inline-block;
    padding:       4px 12px;
    border-radius: var(--g-radius-full);
    font-size: var(--motiva-font-size-caption, 13px);
    font-weight:   600;
}

.msu-badge-pending[b-dwkd0uknjs]  { background: var(--msu-pending-wash);  color: var(--msu-pending-ink); }
.msu-badge-approved[b-dwkd0uknjs] { background: var(--msu-approved-wash); color: var(--msu-approved-ink); }
.msu-badge-returned[b-dwkd0uknjs] { background: var(--msu-returned-wash); color: var(--msu-returned-ink); }

/* Drawer body */
.msu-drawer-body[b-dwkd0uknjs] {
    flex:       1;
    overflow-y: auto;
    padding:    0 22px 24px;
}

.msu-drawer-loading[b-dwkd0uknjs] {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    padding:         48px;
    color:           var(--g-text-secondary);
    font-size:       var(--g-type-secondary);
}

.msu-drawer-spinner[b-dwkd0uknjs] {
    width:         24px;
    height:        24px;
    border:        3px solid var(--g-border);
    border-top:    3px solid var(--g-accent);
    border-radius: var(--g-radius-full);
    animation:     msu-spin-b-dwkd0uknjs 0.8s linear infinite;
}

.msu-drawer-section[b-dwkd0uknjs] {
    padding:       16px 0;
    border-bottom: 1px solid var(--g-border-light);
}

.msu-drawer-section:last-child[b-dwkd0uknjs] { border-bottom: none; }

.msu-drawer-section-title[b-dwkd0uknjs] {
    font-size:     var(--g-type-secondary);
    font-weight:   700;
    color:         var(--g-text-secondary);
    margin-bottom: 10px;
    display:       flex;
    align-items:   center;
    gap:           8px;
}

.msu-drawer-file-count[b-dwkd0uknjs] {
    padding:       1px 7px;
    border-radius: var(--g-radius-full);
    background:    var(--g-border-light);
    color:         var(--g-text-muted);
    font-size: var(--motiva-font-size-count, 12px);
    font-weight:   500;
}

.msu-drawer-text[b-dwkd0uknjs] {
    font-size:   var(--g-type-secondary);
    color:       var(--g-text-primary);
    line-height: 1.6;
}

.msu-drawer-notes[b-dwkd0uknjs] {
    padding:      10px 12px;
    background:   var(--g-bg-input);
    border-radius: var(--g-radius-sm);
    border-inline-start:  3px solid var(--g-accent);
}

.msu-drawer-empty[b-dwkd0uknjs] {
    font-size: var(--g-type-secondary);
    color:     var(--g-text-muted);
}

.msu-drawer-file-list[b-dwkd0uknjs] {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.msu-drawer-file-item[b-dwkd0uknjs] {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       8px 10px;
    background:    var(--g-bg-input);
    border-radius: var(--g-radius-sm);
}

.msu-drawer-file-icon[b-dwkd0uknjs] { flex-shrink: 0; font-size: var(--motiva-font-size-lg, 16px); color: var(--g-text-muted); }

.msu-drawer-file-info[b-dwkd0uknjs] {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
}

.msu-drawer-file-name[b-dwkd0uknjs] {
    font-size:     var(--g-type-secondary);
    font-weight:   500;
    color:         var(--g-text-primary);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.msu-drawer-file-size[b-dwkd0uknjs] { font-size: var(--motiva-font-size-caption, 12px); color: var(--g-text-muted); }

.msu-drawer-file-dl[b-dwkd0uknjs] {
    flex-shrink:     0;
    width:           32px;
    height:          32px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   var(--g-radius-sm);
    border:          1px solid var(--g-border);
    background:      var(--g-bg-surface);
    color:           var(--g-text-secondary);
    text-decoration: none;
    transition:      background 0.12s;
}

.msu-drawer-file-dl:hover[b-dwkd0uknjs] { background: var(--g-accent); color: #fff; border-color: var(--g-accent); }

/* ── History accordions ── */
.msu-history-list[b-dwkd0uknjs] {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.msu-history-round[b-dwkd0uknjs] {
    background:    var(--g-bg-input);
    border-radius: var(--g-radius-sm);
    border-inline-start:  3px solid var(--g-border);
    overflow:      hidden;
}

.msu-history-current[b-dwkd0uknjs] { border-inline-start-color: var(--g-accent); }

.msu-history-round-btn[b-dwkd0uknjs] {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    width:            100%;
    padding:          10px 12px;
    background:       none;
    border:           none;
    cursor:           pointer;
    font-family:      var(--g-font-base);
    gap:              8px;
    text-align:       start;
    transition:       background 0.1s;
}

.msu-history-round-btn:hover[b-dwkd0uknjs] { background: rgba(0,0,0,0.03); }

.msu-history-round-start[b-dwkd0uknjs] {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex:        1;
    min-width:   0;
}

.msu-history-round-end[b-dwkd0uknjs] {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-shrink: 0;
}

.msu-history-round-num[b-dwkd0uknjs] { font-size: var(--motiva-font-size-sm, 13px); font-weight: 700; color: var(--g-text-primary); }
.msu-history-date[b-dwkd0uknjs]      { font-size: var(--motiva-font-size-meta); color: var(--g-text-muted); }
.msu-history-chevron[b-dwkd0uknjs]   { font-size: var(--motiva-font-size-caption, 11px); color: var(--g-text-muted); }

.msu-history-current-tag[b-dwkd0uknjs] {
    padding:       1px 7px;
    border-radius: var(--g-radius-full);
    background:    rgba(99,102,241,0.12);
    color:         var(--g-accent);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight:   700;
}

.msu-history-mentor-badge[b-dwkd0uknjs] {
    padding:       2px 8px;
    border-radius: var(--g-radius-full);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight:   600;
}

.msu-hbadge-pending[b-dwkd0uknjs]  { background: var(--msu-pending-wash);  color: var(--msu-pending-ink); }
.msu-hbadge-approved[b-dwkd0uknjs] { background: var(--msu-approved-wash); color: var(--msu-approved-ink); }
.msu-hbadge-returned[b-dwkd0uknjs] { background: var(--msu-returned-wash); color: var(--msu-returned-ink); }

.msu-history-round-body[b-dwkd0uknjs] {
    padding:        0 12px 12px;
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.msu-history-block[b-dwkd0uknjs] { display: flex; flex-direction: column; gap: 5px; }

.msu-history-block-label[b-dwkd0uknjs] {
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color:          var(--g-text-muted);
}

.msu-history-note-text[b-dwkd0uknjs] {
    font-size: var(--motiva-font-size-sm, 13px);
    color:         var(--g-text-primary);
    padding:       7px 10px;
    background:    var(--g-bg-surface);
    border-radius: var(--g-radius-sm);
    border-inline-start:  3px solid var(--g-accent);
}

.msu-history-feedback[b-dwkd0uknjs] {
    padding:       8px 10px;
    border-radius: var(--g-radius-sm);
}

.msu-history-feedback-header[b-dwkd0uknjs] {
    display:       flex;
    align-items:   center;
    gap:           6px;
    font-size: var(--motiva-font-size-caption, 12px);
    margin-bottom: 4px;
}

.msu-history-feedback-header .oi[b-dwkd0uknjs] { font-size: var(--motiva-font-size-caption, 11px); }

.msu-history-review-date[b-dwkd0uknjs] {
    font-size: var(--motiva-font-size-caption, 11px);
    color:        var(--g-text-muted);
    font-weight:  400;
    margin-inline-start: auto;
}

.msu-history-feedback-text[b-dwkd0uknjs] { font-size: var(--motiva-font-size-sm, 13px); margin: 0; line-height: 1.5; }

/* Two authors, two hues — blue for the mentor's own note, violet for
   the lecturer's, which is the same violet `--g-accent` already was. */
.msu-feedback-mentor[b-dwkd0uknjs]   { background: var(--motiva-color-info-bg);  color: var(--motiva-color-blue); }
.msu-feedback-reviewer[b-dwkd0uknjs] { background: var(--motiva-color-brand-bg); color: var(--g-accent); }

/* ── Review action section ── */
.msu-drawer-review-section[b-dwkd0uknjs] {
    background:    var(--g-bg-input);
    border-radius: var(--g-radius-sm);
    padding:       14px 16px;
}

.msu-review-feedback-wrap[b-dwkd0uknjs] {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    margin-bottom:  14px;
}

.msu-review-feedback-label[b-dwkd0uknjs] { font-size: var(--g-type-secondary); font-weight: 600; color: var(--g-text-primary); }

.msu-review-feedback[b-dwkd0uknjs] {
    width:         100%;
    padding:       8px 10px;
    background:    var(--g-bg-surface);
    border:        1px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    color:         var(--g-text-primary);
    font-family:   var(--g-font-base);
    font-size:     var(--g-type-secondary);
    resize:        vertical;
    outline:       none;
    direction:     rtl;
    transition:    border-color 0.12s;
    box-sizing:    border-box;
}

.msu-review-feedback:focus[b-dwkd0uknjs] { border-color: var(--g-accent); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.msu-review-feedback:disabled[b-dwkd0uknjs] { opacity: 0.6; }

.msu-review-error[b-dwkd0uknjs] {
    display:       flex;
    align-items:   center;
    gap:           6px;
    font-size:     var(--g-type-secondary);
    font-weight:   600;
    color:         var(--g-danger);
    margin-bottom: 10px;
}

.msu-review-actions[b-dwkd0uknjs] { display: flex; gap: 10px; }

.msu-btn-approve[b-dwkd0uknjs],
.msu-btn-return[b-dwkd0uknjs] {
    flex:            1;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             7px;
    padding:         9px 16px;
    border:          none;
    border-radius:   var(--g-radius-sm);
    font-family:     var(--g-font-base);
    font-size:       var(--g-type-secondary);
    font-weight:     600;
    cursor:          pointer;
    transition:      background 0.15s, opacity 0.15s;
}

/* The decision pair. Teal = the completion role, rose = the attention
   role, both filled — the same two hues an approved and a returned chip
   wear three lines above, so the button and the state it produces read
   as one thing. `#fff` is the approved exception every filled brand
   surface in this system carries (see MButton). */
.msu-btn-approve[b-dwkd0uknjs]                      { background: var(--motiva-color-teal-ink); color: #fff; }
.msu-btn-approve:hover:not(:disabled)[b-dwkd0uknjs] { filter: brightness(1.08); }
.msu-btn-return[b-dwkd0uknjs]                       { background: var(--g-danger); color: #fff; }
.msu-btn-return:hover:not(:disabled)[b-dwkd0uknjs]  { filter: brightness(1.08); }
.msu-btn-approve:disabled[b-dwkd0uknjs],
.msu-btn-return:disabled[b-dwkd0uknjs]           { opacity: 0.6; cursor: default; }

/* ── Escalation block (mentor → lecturer attention) ───────────────────── */
.msu-escalate-section[b-dwkd0uknjs] {
    border-top: 1px dashed var(--g-border-light);
    margin-top: 14px;
    padding-top: 12px;
}

.msu-escalate-help[b-dwkd0uknjs] {
    margin: 0 0 8px;
    font-size: var(--motiva-font-size-caption, 12px);
    color: var(--g-text-muted);
    line-height: 1.5;
}

.msu-btn-escalate[b-dwkd0uknjs],
.msu-btn-escalate-cancel[b-dwkd0uknjs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--g-radius-sm);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.13s, color 0.13s;
}

/* Escalating to the lecturer IS the attention role — the same rose the
   dashboard's escalated bar and pill use, not a fifth amber. */
.msu-btn-escalate[b-dwkd0uknjs] {
    background: var(--motiva-color-danger-bg);
    color: var(--motiva-color-rose-ink);
    border-color: color-mix(in srgb, var(--motiva-color-rose) 35%, transparent);
}
.msu-btn-escalate:hover:not(:disabled)[b-dwkd0uknjs] {
    background: color-mix(in srgb, var(--motiva-color-rose) 16%, transparent);
}
.msu-btn-escalate:disabled[b-dwkd0uknjs] { opacity: 0.55; cursor: default; }

.msu-btn-escalate-cancel[b-dwkd0uknjs] {
    background: var(--g-bg-surface);
    color: var(--g-text-secondary);
    border-color: var(--g-border);
}
.msu-btn-escalate-cancel:hover[b-dwkd0uknjs] { background: var(--g-bg-hover); }

.msu-escalate-reason[b-dwkd0uknjs] {
    width: 100%;
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    background: var(--g-bg-surface);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-sm, 13px);
    box-sizing: border-box;
    resize: vertical;
}

.msu-escalate-actions[b-dwkd0uknjs] {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.msu-escalate-done[b-dwkd0uknjs] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--motiva-color-success-bg);
    border-radius: var(--g-radius-sm);
    color: var(--motiva-color-teal-ink);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: 600;
}
.msu-escalate-done .oi[b-dwkd0uknjs] { font-size: var(--motiva-font-size-body, 14px); color: var(--motiva-color-teal); }

/* ── Drive-link button (replaces files for post-2026-05-19 submissions) ── */
.msu-drive-btn[b-dwkd0uknjs] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--g-accent);
    color: #fff;
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-control, 14px);
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
    max-width: 100%;
}
.msu-drive-btn:hover[b-dwkd0uknjs] { opacity: 0.9; color: #fff; }
.msu-drive-btn .oi[b-dwkd0uknjs] { font-size: var(--motiva-font-size-control, 12px); }

.msu-btn-spinner[b-dwkd0uknjs] {
    width:         14px;
    height:        14px;
    border:        2px solid rgba(255,255,255,0.4);
    border-top:    2px solid #fff;
    border-radius: var(--g-radius-full);
    animation:     msu-spin-b-dwkd0uknjs 0.8s linear infinite;
    display:       inline-block;
    flex-shrink:   0;
}

.msu-review-done-banner[b-dwkd0uknjs] {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       10px 14px;
    border-radius: var(--g-radius-sm);
    font-size:     var(--g-type-secondary);
    font-weight:   600;
}

.msu-review-done-approved[b-dwkd0uknjs] { background: var(--msu-approved-wash); color: var(--msu-approved-ink); }
.msu-review-done-returned[b-dwkd0uknjs] { background: var(--msu-returned-wash); color: var(--msu-returned-ink); }
.msu-review-done-feedback[b-dwkd0uknjs] { font-weight: 400; color: var(--g-text-secondary); }

@media (max-width: 600px) {
    .msu-drawer[b-dwkd0uknjs] { width: 100vw; }
}
/* /Pages/Mentor/MentorTasksPage.razor.rz.scp.css */
/* ============================================================
   MentorTasksPage — משימות לבדיקה
   Prefix: mt-

   Composition source: Motiva Mentor Tasks.dc.html (Claude Design).
   VISUAL source:      the finalized Student experience.

   Almost nothing is declared here. The reference's surfaces are the
   ones the shared components already draw under `.motiva-final`:

     page title    MPageHeader          (38px/700, controls on the row)
     filters       MFilterTabs          (tinted track, raised white pill)
     section card  MCard                (.66 fill, .85 hairline, radius-lg)
     heading       MSectionHeading      (row layout, link, trailing slot)
     row           MRow / MRowList      (13px 6px, -6px, radius-row, hairline)
     urgency       MStatusBar           (4×40 bar, the dashboard's own)
     empty         MEmptyState
     loading       MLoadingState

   What is left below is the card's own inset, the reference's coloured
   group label (the one place a shared component is re-based, and only on
   its size and colour), and the three controls this page owns: the overdue
   annotation, the completion checkbox and the "+" button.
   ============================================================ */

/* The compact header bleeds to the shell edge. Under `.motiva-final` the
   inset token is 0, so this collapses to nothing for a mentor; it still
   does its job for an Admin/Staff account reaching this route inside the
   legacy rail shell, where the inset is 40px. */
/* ── The workspace ───────────────────────────────────────────
   The three sections used to run DOWN the page, so משימות אישיות was
   below the fold on any laptop and a screen built for scanning had
   become a screen for scrolling.

   The composition below is the finalized Student Tasks screen's,
   taken whole from StudentTasksPage.razor.css: a viewport-height page
   root, one two-column stretch row inside it, and every panel
   scrolling inside ITSELF so the page never does. What carries over
   is the principle that file states — "one shared boundary, one
   rhythm, one surface" — with the wide column holding the incoming
   queue and the rail holding the mentor's own work.

   Every height here is DERIVED. There is not a single hand-measured
   "how much chrome is above this panel" constant, which is the trap
   the student file documents having climbed out of.
   ============================================================ */

/* One rhythm, declared once — the row's column gap and the gap between
   the two stacked panels are the same value, and it is the reference's
   18px. The title is now the shared white Core page-header
   (MPageHeaderCard), which carries its own surface, block padding and
   title scale, so the old compact-header ::deep overrides and the
   .mt-header-bleed shell-edge bleed are gone. */
.mt-body[b-xokmpezb0x] {
    --mt-gap: 18px;
}

/* ── .mt-body — a viewport-height column ─────────────────────
   AppLayout puts the mentor on the SAME `app-shell-student` branch as
   the student (AppLayout.razor:112), so the chain this depends on is
   already there: the shell is `min-height:100vh` + flex column and
   .app-content is `flex:1` + flex column. This page root claims what
   is left with flex:1/min-height:0 and hands it down.

   `contain: size` is load-bearing, not an optimisation. The shell
   takes whichever is TALLER, the viewport or its content, and a flex
   container's intrinsic height is driven by its growing items — so
   this page's own natural height (every row of every section) was
   what the shell reported. flex:1 grows a box; nothing was capping
   it. Size containment says "do not derive this element's size from
   its contents": the shell then measures 100vh, flex:1 grows this
   into exactly what is left, and the overflow lands where it belongs,
   inside each panel's scroll box. Nothing is clipped — size
   containment is not paint containment. */
.mt-body[b-xokmpezb0x] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    contain: size;
    /* Gap from the Core page-header card above — the same rhythm the
       student tasks page spaces its header from its workspace with. */
    margin-block-start: var(--mt-gap);
}

/* The row. It takes every pixel the header did not, and it STRETCHES —
   the two columns share a top edge and a bottom edge, which is the
   whole difference between "one workspace" and "some cards".

   1.85fr / 1fr is the reference's own split. minmax(0, …) and never a
   bare `fr`: `1.85fr` is shorthand for minmax(auto, …), and that auto
   floor is the track's min-content width, so on a narrow viewport the
   panels would refuse to shrink and overflow the row instead of
   fitting it.

   min-height is the floor, and the only height typed on this page.
   Below it the row stops giving space back and the page is allowed to
   scroll instead — a workspace crushed to 300px is worse than a page
   that scrolls, and this is the one place that trade is made. */
.mt-workspace[b-xokmpezb0x] {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    gap: var(--mt-gap);
    align-items: stretch;
    min-height: 460px;

    /* THE ROW TAKES THE CONTAINER'S HEIGHT, not its content's. The student
       page reaches the same place from the identical rules, but only because
       its panel always OVERFLOWS the row. A mentor's two queues are usually
       shorter, so the auto row collapsed to its content and left a band of
       bare canvas under both columns. */
    grid-auto-rows: minmax(0, 1fr);
}

/* Under a filter exactly one column survives, and a two-track grid
   with one empty track is a half-width panel beside bare canvas. */
.mt-workspace-solo[b-xokmpezb0x] {
    grid-template-columns: minmax(0, 1fr);
}

/* ── .mt-primary — the review queue ──────────────────────────
   ONE subject, filtered three ways: submissions this mentor still owes a
   decision on, and submissions they have already approved. בקשות used to be
   the third tab and left with the markup that drew it — requests have their
   own workspace, and mixing them in made one list answer two questions. */
.mt-primary[b-xokmpezb0x] {
    display: flex;
    flex-direction: column;
    gap: var(--mt-gap);
    min-height: 0;
    min-width: 0;
}

/* ── .mt-rail — the mentor's own work, full height ───────────
   A column rather than a third block in the stack because a personal
   task is a different KIND of work, and full height rather than
   content height because a panel that stops halfway down the row is
   what made it read as an afterthought. */
.mt-rail[b-xokmpezb0x] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

/* ── The card, as a flex item of its column ──────────────────
   `.mt-pane` is gone with the two-card composition it existed to split.
   Each column now holds exactly ONE MCard, addressed directly — which is
   also how the student's columns address theirs.

   `flex: 1 1 auto`, not `flex: 1`. The latter is `1 1 0%`, and a 0% basis
   contributes nothing to an auto-height parent's intrinsic size. An `auto`
   basis grows into a definite column and reports a real height in an auto
   one. Fill="true" supplies height:100% + the inner flex column; this
   supplies the flex-item behaviour its parent needs. */
.mt-primary[b-xokmpezb0x]  > .m-card,
.mt-rail[b-xokmpezb0x]     > .m-card {
    flex: 1 1 auto;
    min-height: 0;
}

/* ── The card surface carries the brand ──────────────────────
   A 2% violet wash falling away over the top of the panel: brand moved
   somewhere it cannot compete with the accents that sit ON it. At 0.022
   over the section's translucent white it is below the threshold where the
   eye names a hue, and the 140px fade means it never reaches the rows.

   Layered over --motiva-panel-surface rather than replacing it, so the
   card keeps the one panel treatment the system defines — the same solid
   white, 24px radius and violet hairline the student's task panels
   render. (It was --motiva-surface-section, the translucent .66 white,
   which is what made this screen read a shade greyer than the mentor Home
   cards one nav item away.) */
.mt-primary[b-xokmpezb0x]  > .m-card,
.mt-rail[b-xokmpezb0x]     > .m-card {
    background:
        linear-gradient(180deg,
            rgba(109, 40, 245, 0.022),
            rgba(109, 40, 245, 0) 140px),
        var(--motiva-panel-surface);
}

/* ============================================================
   THE PANEL, THE GROUPS AND THE ROWS — TRANSCRIBED FROM THE
   STUDENT TASKS PAGE.

   Source, rule for rule: Client/Pages/Tasks/ProjectTasksSection.razor.css
   and TeamTasksSection.razor.css, as they render today. Every value below
   is theirs. Blazor scoped CSS cannot be imported across components, so
   the rules are transcribed rather than referenced; where a shared token
   or a shared component could carry it (MCard, MScrollArea, MEmptyState,
   .motiva-cta, --motiva-*) it does, and the transcription covers only what
   is left.

   WHAT THIS REPLACED: this page's own panel language — a 14/24/12 card
   body, MSectionHeading with a gradient glyph and a count bubble, MRow
   two-line flex rows at 62px, and a footer link per card. None of it was
   wrong; all of it was a second design of the same objects, which is what
   made the two screens read as two applications.
   ============================================================ */

/* ── .pts-body / .tts-body — the panel inside the card ─────── */
.mt-panel[b-xokmpezb0x] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    padding: 10px 20px 14px;
    box-sizing: border-box;
}

/* MScrollArea renders its own root with ITS scope id, so a plain descendant
   selector compiled into this file would match nothing. `::deep` compiles to
   `.mt-panel[b-…] .m-scroll`, which does. */
.mt-panel[b-xokmpezb0x]  .m-scroll { flex: 1 1 auto; }

/* ── .pts-header / .tts-header — title · "· N" · action ────── */
.mt-panel-head[b-xokmpezb0x] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-shrink: 0;
    margin-bottom: 2px;
    padding: 10px 0 10px;
    border-bottom: 1px solid var(--motiva-border-card);
}

.mt-panel-title[b-xokmpezb0x] {
    margin: 0;
    font-size: var(--motiva-font-size-h3, 18px);
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: var(--motiva-letter-spacing-section, normal);
    line-height: var(--motiva-line-height-heading);
    color: var(--motiva-text-primary);
    white-space: nowrap;
}

.mt-panel-count[b-xokmpezb0x] {
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-subtle, var(--motiva-text-muted));
}

/* The rail's header carries an action, so its count pushes it to the end —
   .tts-count's own rule. */
.mt-rail .mt-panel-count[b-xokmpezb0x] { margin-inline-end: auto; }

.mt-rail .mt-panel-head[b-xokmpezb0x] { align-items: center; }

/* ── .pts-milestone — the group block ──────────────────────── */
.mt-group[b-xokmpezb0x] {
    border-radius: var(--motiva-radius-md);
    overflow: hidden;
    margin-bottom: 6px;
}

/* The panel's focal point, and it is this page's own priority order said in
   the student's grammar: a decision only this person can make comes before a
   review somebody else is holding. Same wash, same violet reading-side edge. */
.mt-group-current[b-xokmpezb0x] {
    background: var(--motiva-gradient-wash, transparent);
    margin: 0 0 8px;
    border-inline-start: 3px solid var(--motiva-color-violet, var(--motiva-color-indigo));
}

.mt-group-head[b-xokmpezb0x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 13px 12px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--motiva-font-family);
    text-align: start;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mt-group-head:hover[b-xokmpezb0x] { background: var(--motiva-color-brand-bg); }

.mt-group-head:focus-visible[b-xokmpezb0x] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

.mt-group-lead[b-xokmpezb0x] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.mt-chevron[b-xokmpezb0x] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--motiva-radius-full);
    color: var(--motiva-text-muted);
    transition: transform var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mt-chevron svg[b-xokmpezb0x] { width: 14px; height: 14px; }

.mt-group-head:hover .mt-chevron[b-xokmpezb0x] {
    background: rgba(27, 26, 34, 0.06);
    color: var(--motiva-text-primary);
}

.mt-chevron-open[b-xokmpezb0x] { transform: rotate(180deg); }

/* .pts-dot at 14px. Current takes the student's violet ring and pulse.
   The second group takes a NEUTRAL filled disc rather than the student's
   teal one: teal means "completed" everywhere in this product, and a queue
   of submissions waiting on somebody is not that. */
.mt-dot[b-xokmpezb0x] {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border-radius: var(--motiva-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.mt-dot-current[b-xokmpezb0x] {
    background: var(--motiva-surface-primary);
    border: 3.5px solid var(--motiva-color-violet, var(--motiva-color-indigo));
    animation: mt-ms-pulse-b-xokmpezb0x 2s ease-out infinite;
}

.mt-dot-plain[b-xokmpezb0x] { background: var(--motiva-border-strong, rgba(27, 26, 34, 0.22)); }

@keyframes mt-ms-pulse-b-xokmpezb0x {
    0%   { box-shadow: 0 0 0 0 rgba(109, 40, 245, 0.45); }
    70%  { box-shadow: 0 0 0 9px rgba(109, 40, 245, 0); }
    100% { box-shadow: 0 0 0 0 rgba(109, 40, 245, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .mt-dot-current[b-xokmpezb0x] { animation: none; }
}

.mt-group-title[b-xokmpezb0x] {
    font-size: var(--motiva-font-size-item, 15px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mt-group-current .mt-group-title[b-xokmpezb0x] {
    font-weight: var(--motiva-font-weight-bold);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

/* .pts-mile-trail. The student spends this slot on a progress bar and a
   done/total count; there is no progress on an incoming queue, so it carries
   the queue's size and the link to its full module — the same two objects
   this page's card footers used to carry, moved onto the head that owns them. */
.mt-group-trail[b-xokmpezb0x] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.mt-group-count[b-xokmpezb0x] {
    min-width: 38px;
    text-align: end;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--motiva-text-secondary);
    white-space: nowrap;
}

.mt-group-link[b-xokmpezb0x] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-muted);
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--motiva-radius-sm);
}

.mt-group-link:hover[b-xokmpezb0x] { color: var(--motiva-color-violet, var(--motiva-color-indigo)); }

.mt-group-link:focus-visible[b-xokmpezb0x] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

/* ── .pts-mile-body / .pts-task — the rows ─────────────────── */
.mt-group-body[b-xokmpezb0x] { padding: 0 10px 8px; }

.mt-group-empty[b-xokmpezb0x] {
    margin: 0;
    padding: 8px 16px 10px;
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--motiva-text-muted);
}

/* A GRID, not flex, and that is the row's whole point: titles read down one
   column, context down the next, states down the last. The rows were MRow —
   flex, two lines, 62px — which sized the state block to its content, so no
   two states began at the same place. Four tracks, 52px, exactly .pts-task. */
.mt-task[b-xokmpezb0x] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 116px 30px;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding-block: 11px;
    padding-inline: 10px 6px;
    margin-inline-start: 16px;
    border-bottom: 1px solid var(--motiva-border-subtle);
    background: none;
    border: 0;
    border-radius: var(--motiva-radius-sm);
    cursor: pointer;
    font-family: var(--motiva-font-family);
    text-align: start;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mt-task:last-child[b-xokmpezb0x] { border-bottom: 0; }

.mt-task:hover[b-xokmpezb0x] { background: var(--motiva-color-brand-bg); }

.mt-task:focus-visible[b-xokmpezb0x] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

.mt-task-title[b-xokmpezb0x] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-item, 15px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.35;
    color: var(--motiva-text-primary);
}

.mt-task-meta[b-xokmpezb0x] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.mt-task-due[b-xokmpezb0x] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-regular);
    color: var(--motiva-text-muted);
    white-space: nowrap;
}

/* .pts-task-status: a filled pill, centred in its own fixed track so a column
   of them resolves as one shape whatever the label length. */
.mt-task-status[b-xokmpezb0x] {
    justify-self: center;
    text-align: center;
    font-size: var(--motiva-font-size-caption, 12.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    padding: 6px 12px;
    border-radius: var(--motiva-radius-full);
    white-space: nowrap;
}

/* The three the student row has, and only those. The waiting-age THRESHOLD is
   untouched — MentorAttentionRows.AgeVariant, the product's one shared ladder;
   this is where each rung lands in the student's palette. */
.mt-status-quiet[b-xokmpezb0x] {
    color: var(--motiva-text-secondary);
    background: var(--motiva-color-neutral-bg);
}

/* "Open" is a fact about the row, not a call to action — it takes the
   default tag surface. `.mt-task-status` is 6px/12px, so the edge is paid
   for at 5px/11px and the column of pills keeps its width. Attention
   below is untouched and stays rose. */
.mt-status-open[b-xokmpezb0x] {
    padding: 5px 11px;
    border: 1px solid transparent;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
}

.mt-status-attention[b-xokmpezb0x] {
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    background: rgba(224, 51, 95, 0.10);
}

.mt-task-go[b-xokmpezb0x] {
    width: 30px;
    height: 30px;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--motiva-radius-full);
    color: var(--motiva-text-subtle, var(--motiva-text-muted));
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mt-task-go svg[b-xokmpezb0x] { width: 14px; height: 14px; }

.mt-task:hover .mt-task-go[b-xokmpezb0x] {
    background: rgba(109, 40, 245, 0.10);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

/* ── The rail's rows — TeamTasksSection's .tts-row ─────────── */
.mt-row[b-xokmpezb0x] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 6px;
    border-bottom: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-sm);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mt-row:last-of-type[b-xokmpezb0x] { border-bottom: 0; }

.mt-row:hover[b-xokmpezb0x] { background: var(--motiva-color-brand-bg); }

.mt-row:focus-visible[b-xokmpezb0x] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

.mt-check[b-xokmpezb0x] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--motiva-border-strong);
    border-radius: 6px;
    background: var(--motiva-surface-primary);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                transform var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mt-check:hover[b-xokmpezb0x] {
    border-color: var(--motiva-color-violet, var(--motiva-color-indigo));
    transform: scale(1.06);
}

.mt-check:focus-visible[b-xokmpezb0x] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.mt-check-on[b-xokmpezb0x] {
    background: var(--motiva-color-teal);
    border-color: var(--motiva-color-teal);
}

.mt-check-mark[b-xokmpezb0x] {
    color: #fff;
    font-size: 12px;
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
}

.mt-row-title[b-xokmpezb0x] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-item, 16px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.35;
    color: var(--motiva-text-primary);
}

.mt-row-done .mt-row-title[b-xokmpezb0x] {
    color: var(--motiva-text-muted);
    text-decoration: line-through;
}

/* `.mt-row-meta` — the personal row's project chip — is GONE with the markup
   that drew it. It printed the same project name on every row of a project and
   competed with the due date for the row's one trailing slot; the association
   is untouched in the data and still shown in MentorPersonalTaskModal, which
   the row opens. */

.mt-row-due[b-xokmpezb0x] {
    flex: 0 0 auto;
    font-size: var(--motiva-font-size-sm, 13.5px);
    color: var(--motiva-text-muted);
    white-space: nowrap;
}

.mt-row-due-late[b-xokmpezb0x] {
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    font-weight: var(--motiva-font-weight-medium);
}

/* The student's `.tts-add`: a labelled create pill, geometry only — the fill,
   hover, press and focus ring come from the shared `.motiva-cta`. */
.mt-add[b-xokmpezb0x] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    padding: 8px 14px;
    border-radius: 9px;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}

.mt-add-glyph[b-xokmpezb0x] { font-size: var(--motiva-font-size-lg, 15px); line-height: 1; }


/* The rail's expander, unchanged in behaviour. */
.mt-expand[b-xokmpezb0x] {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    padding: 6px 0 2px;
}

.mt-expand-btn[b-xokmpezb0x] {
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-control, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-muted);
}

.mt-expand-btn:hover[b-xokmpezb0x] { color: var(--motiva-color-violet, var(--motiva-color-indigo)); }

/* The student's own narrow-panel fallback for the row grid. */
@media (max-width: 820px) {
    .mt-task[b-xokmpezb0x] {
        grid-template-columns: minmax(0, 1fr) 116px 30px;
        margin-inline-start: 10px;
        row-gap: 2px;
    }
    .mt-task-title[b-xokmpezb0x] { grid-column: 1; }
    .mt-task-meta[b-xokmpezb0x]  { grid-column: 1; grid-row: 2; margin-top: 3px; }
    .mt-task-status[b-xokmpezb0x] { grid-column: 2; grid-row: 1 / span 2; }
    .mt-task-go[b-xokmpezb0x]     { grid-column: 3; grid-row: 1 / span 2; }
}


@media (max-width: 1180px) {
    .mt-body[b-xokmpezb0x] {
        flex: 0 0 auto;
        contain: none;
    }

    .mt-workspace[b-xokmpezb0x] {
        flex: 0 0 auto;
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    /* Nothing is competing for the fold any more: the panels stop
       claiming leftover height (there is none to claim) and are capped at a
       comfortable reading height of their own instead. */
    .mt-primary[b-xokmpezb0x]  > .m-card,
    .mt-rail[b-xokmpezb0x]     > .m-card {
        flex: 0 0 auto;
    }

    .mt-workspace[b-xokmpezb0x]  .m-card {
        max-height: 68vh;
    }
}

@media (max-width: 720px) {
    .mt-panel[b-xokmpezb0x] { padding-inline: 16px; }
}

/* ── Work-queue scrollbar on the RIGHT in RTL ────────────────
   MOVED TO THE PRIMITIVE. This page used to flip `.m-scroll` to
   `direction: ltr` here, scoped to .mt-primary so the personal rail
   kept the platform-native RTL scrollbar. Both boxes now want the
   bar on the physical right, and so does every other MScrollArea in
   the app, so the flip and its `> * { direction: rtl }` restore live
   in MScrollArea.razor.css — the same rules, one copy. Nothing about
   this page's rendering changed when they moved. */

/* ============================================================
   REVIEW QUEUE — SEGMENTED FILTER TABS  (הכל · לבדיקה · אושרו)
   Rendered by the shared MFilterTabs component; its own stylesheet
   (MFilterTabs.razor.css) supplies the gray pill-track container,
   white raised active pill and motiva-count badge — nothing needs
   to be restated here.
   ============================================================ */

/* ============================================================
   REVIEW QUEUE ITEMS
   Flat scrollable list of submissions. Each item is a collapsed header
   (state · title · team chip · review time · chevron) plus an inline
   expansion holding the submission's own details and, on the visual
   LEFT in RTL, the mentor's actions.
   ============================================================ */

.mt-qitem[b-xokmpezb0x] {
    border-bottom: 1px solid var(--motiva-border-subtle);
}

.mt-qitem:last-child[b-xokmpezb0x] { border-bottom: 0; }

/* The item is open (expanded).
   Uses a hand-mixed rgba instead of --motiva-color-brand-bg (which resolves to
   rgba(109,14,230,0.08) — visible enough to reduce text contrast). Half that
   opacity keeps the Motiva purple tint airy and lets the text read clearly. */
.mt-qitem-open[b-xokmpezb0x] {
    background: rgba(109, 40, 245, 0.04);
    border-radius: var(--motiva-radius-md);
    border-bottom: 0;
    margin-bottom: 2px;
}

/* ============================================================
   SCALE — ONE STEP UP, TO THE STUDENT ROWS.
   The tokens here were already the student page's (15px title, 13px meta,
   12.5px pills), but this row spends them differently: the student's
   `.pts-task` is ONE line with a single 12.5px status pill in a 116px
   column, whereas this row stacks two lines and hangs three small objects
   — type badge, review time, team chip — around the title. Three pieces of
   11.5–12.5px text per row is what made the queue read a size smaller than
   the rest of Motiva even though no single value was.

   So every secondary object goes up one step and the row gets a little more
   air. The title moves 15px → 16px, which is the only value here that is
   NOT the student's — it is what keeps the title dominant now that the
   things around it are bigger. Nothing is oversized: the row lands at ~80px
   against the student row's 52px for two lines instead of one.
   ============================================================ */

/* ── THE COLLAPSED HEADER ─────────────────────────────────────
   A positioning context for the overlay trigger below, and a two-line
   stack: state + review time on line 1, task title + team chip on line 2.
   It used to BE the <button>; it cannot be one any more, because the team
   chip inside it is a link and an <a> nested in a <button> is invalid and
   unclickable. See .mt-qitem-trigger. */
.mt-qitem-head[b-xokmpezb0x] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 14px 16px 14px 12px;
    border-radius: var(--motiva-radius-sm);
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

/* THE ACCORDION TRIGGER IS AN OVERLAY, NOT A WRAPPER.
   An invisible button stretched over the whole header: the entire row area
   toggles, and the native button affordances come for free — pointer cursor,
   Enter/Space, a real focus ring, aria-expanded. It carries no content, so its
   accessible name is the aria-label the markup builds (RowAriaLabel). The team
   chip is raised above it with position/z-index, so it stays a separately
   focusable link and its click never toggles the row. */
.mt-qitem-trigger[b-xokmpezb0x] {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: inherit;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.mt-qitem-trigger:focus-visible[b-xokmpezb0x] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

/* Hover belongs to the HEADER, not to the invisible overlay — the mentor is
   pointing at the row. Suppressed while the item is open so the expanded
   container's own rgba(109,40,245,0.04) shows through unaffected: one uniform
   surface, no two-tone overlay. */
.mt-qitem:not(.mt-qitem-open) .mt-qitem-head:hover[b-xokmpezb0x] {
    background: var(--motiva-surface-chip, rgba(27, 26, 34, 0.045));
}

/* The chevron answers the hover as well, so the row reads as expandable
   before it is clicked. */
.mt-qitem-head:hover .mt-qitem-chevron[b-xokmpezb0x] { color: var(--motiva-text-primary); }

/* Line 1: type badge on one side, [review time + chevron] group on the other. */
.mt-qitem-top[b-xokmpezb0x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Trailing group: review time and chevron sit side-by-side on the same line.
   The chevron is not absolutely positioned — it lives in this inline-flex
   wrapper so it always aligns with the time chip regardless of how many
   text lines the row below it has. */
.mt-qitem-top-trail[b-xokmpezb0x] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Type badge — filled pill. */
.mt-qbadge[b-xokmpezb0x] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--motiva-radius-full);
    font-size: var(--motiva-font-size-caption, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}

/* PENDING badge: softer version of the signature gradient.
   A 20% white layer is placed on top of --motiva-gradient-signature (same
   token, same direction) using CSS background layering. This lightens each
   stop uniformly — the gradient identity is preserved, visual intensity drops
   noticeably. text-shadow adds a hair of depth on the lighter teal end. */
.mt-qbadge-sub[b-xokmpezb0x] {
    background:
        linear-gradient(rgba(255,255,255,0.20), rgba(255,255,255,0.20)),
        var(--motiva-gradient-signature);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

/* APPROVED badge: the product's completed pair — teal ink on the teal-tinted
   success surface, which is what teal means on every other Motiva screen.
   Tinted rather than filled: the gradient fill is reserved for the one state
   that still wants the mentor. It replaced .mt-qbadge-req, the neutral pill the
   בקשה rows used, which left with them. */
.mt-qbadge-done[b-xokmpezb0x] {
    background: var(--motiva-color-success-bg, rgba(13, 156, 154, 0.10));
    color: var(--motiva-color-teal-ink, var(--motiva-color-teal));
}

/* Review-time label — trailing end of the top line.
   SECONDARY badge: gradient outline only, white interior.
   CSS does not allow gradient values on `border-color`, so the technique is
   a double-background:
     layer 1 (padding-box) — opaque white fills the interior;
     layer 2 (border-box)  — the signature gradient fills the whole box
                              including the 1.5px border area.
   `border: 1.5px solid transparent` creates the border area without a colour
   of its own, so only the gradient shows there. This works with border-radius
   and does not affect layout because the border width is the same as before. */
.mt-qitem-timing[b-xokmpezb0x] {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: var(--motiva-radius-full);
    border: 1.5px solid transparent;
    background:
        linear-gradient(var(--motiva-surface-primary, #fff),
                        var(--motiva-surface-primary, #fff)) padding-box,
        /* Softened outline: same teal→violet direction as --motiva-gradient-signature
           but at 60% opacity, so the 1.5px stroke reads as a gentle tint rather
           than a vivid stripe. */
        linear-gradient(90deg,
            rgba(13, 156, 154, 0.60),
            rgba(79, 70, 229, 0.60)) border-box;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium);
    white-space: nowrap;
    line-height: 1.15;
}

/* Both attention states use dark text; escalated items are slightly bolder. */
.mt-qitem-timing.mt-status-open[b-xokmpezb0x] {
    color: var(--motiva-text-primary);
    font-weight: var(--motiva-font-weight-semibold);
}

.mt-qitem-timing.mt-status-quiet[b-xokmpezb0x] {
    color: var(--motiva-text-secondary);
}

/* A SETTLED round loses the brand outline. The gradient stroke says "live";
   an approved submission is a record, so it keeps the same geometry and drops
   back to the card hairline. Declared after .mt-qitem-timing — same
   specificity, later wins — so only the two paint properties change. */
.mt-qitem-timing-done[b-xokmpezb0x] {
    border-color: var(--motiva-border-card);
    background: var(--motiva-surface-primary, #fff);
}

/* Chevron — inline member of .mt-qitem-top-trail, immediately to the left of
   the time chip in RTL. */
.mt-qitem-chevron[b-xokmpezb0x] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--motiva-text-muted);
    transition: transform var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mt-qitem-chevron svg[b-xokmpezb0x] { width: 16px; height: 16px; }

.mt-qitem-chevron-open[b-xokmpezb0x] { transform: rotate(180deg); }

/* ── Line 2: title + team chip ────────────────────────────────
   The long project-title subtitle that used to sit under every title is gone:
   it printed the same sentence on every row of a team, and the chip beside the
   title now carries that identity and navigates to it. */
.mt-qitem-main[b-xokmpezb0x] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* `flex: 0 1 auto`, NOT `1 1 auto`. A growing title pushed the chip to the far
   inline end, where it landed in the same column as the expanded row's action
   button and stopped reading as the title's own context. Shrink-to-fit keeps
   the pair together at the reading edge, and the title is still the half that
   gives way when the row is narrow. */
.mt-qitem-title[b-xokmpezb0x] {
    flex: 0 1 auto;
    min-width: 0;
    font-size: var(--motiva-font-size-item, 16px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── THE TEAM CHIP — METADATA THAT NAVIGATES ──────────────────
   It replaced the expansion's "למרחב הפרויקט" button and points at the
   identical route, so the destination is unchanged and the team identity is
   itself the way in. It must keep reading as metadata: chip geometry, chip
   type scale, a hairline rather than a fill, and no emphasis until hover.

   position/z-index raise it above .mt-qitem-trigger, the absolutely-positioned
   overlay that covers the rest of the header — without them the chip would be
   underneath the toggle and un-clickable. */
.mt-qitem-team[b-xokmpezb0x] {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    max-width: 45%;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border: 1px solid var(--motiva-border-card);
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-surface-primary, #fff);
    color: var(--motiva-text-secondary);
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mt-qitem-team:hover[b-xokmpezb0x] {
    border-color: var(--motiva-color-violet, var(--motiva-color-indigo));
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

.mt-qitem-team:focus-visible[b-xokmpezb0x] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.mt-qitem-team-name[b-xokmpezb0x] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 11px and currentColor. Deliberately not the signature gradient: below about
   12px a gradient stroke resolves to its blue midpoint and reads as a flat
   wrong hue, so a glyph this size is always solid. */
.mt-qitem-team-go[b-xokmpezb0x] {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    opacity: 0.7;
    transition: opacity var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mt-qitem-team:hover .mt-qitem-team-go[b-xokmpezb0x] { opacity: 1; }

/* No project id on the row — the same chip, without a promise it cannot keep. */
.mt-qitem-team-flat[b-xokmpezb0x] {
    cursor: default;
    color: var(--motiva-text-muted);
}

/* ── INLINE EXPANSION BODY ────────────────────────────────────
   ONE FLEX ROW: the submission's details at the reading edge, the mentor's
   actions at the far edge — the visual LEFT in an RTL interface, which is
   where a decision belongs when the description is on the right.

   `flex-wrap` is the entire responsive story: below the wrap point the action
   group drops under the content on its own, with no media query needed to say
   so. Content and actions are plain blocks, not cards — the expanded item is
   already a surface, and a card inside it would be a second border for the
   same object. */
.mt-qitem-body[b-xokmpezb0x] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px 20px;
    padding: 0 16px 16px;
}

.mt-qitem-detail[b-xokmpezb0x] {
    flex: 1 1 280px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.mt-qitem-loading[b-xokmpezb0x] {
    font-size: var(--motiva-font-size-sm, 13.5px);
    color: var(--motiva-text-muted);
}

/* אבן דרך · גרסה · הוגש, in ONE line rather than a stack of labelled
   micro-rows. Rendered for a PENDING round only — see the markup. Each fact is
   unique to the submission; the team and the state are already said on the
   collapsed row above, and the submitter's name is deliberately not here. */
.mt-qitem-facts[b-xokmpezb0x] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    line-height: 1.55;
    color: var(--motiva-text-muted);
}

/* The key half of each pair. A shade darker and a weight heavier than its
   value, so "אבן דרך: / גרסה: / הוגש:" scan as labels without needing a
   second line or a second colour. */
.mt-qitem-facts-key[b-xokmpezb0x] {
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
}

.mt-qitem-ctx-sep[b-xokmpezb0x] { opacity: 0.5; }

/* ── הודעת הצוות — WRITTEN BY A PERSON ────────────────────────
   The one block in the expansion that is not system metadata, so it is the
   one block that gets a surface of its own. A tinted panel with a brand
   reading-side edge: the same device the approved row's verdict uses, in the
   brand hue rather than the completed teal, because this is the team talking
   TO the mentor rather than a decision already taken.

   Not a card — no border, no shadow, no second radius ring — for the same
   reason the rest of the expansion has none: the open row is already a
   surface. */
.mt-qitem-message[b-xokmpezb0x] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 13px;
    border-inline-start: 3px solid var(--motiva-color-violet, var(--motiva-color-indigo));
    /* Rounded on the far side, flat against its own edge — stated with the
       LOGICAL corner properties, so the flat pair follows the edge under either
       direction. A `border-radius` shorthand here would need a [dir] override,
       and this app sets direction in CSS rather than with a dir attribute, so
       such a selector would match nothing. */
    border-start-end-radius: var(--motiva-radius-sm);
    border-end-end-radius: var(--motiva-radius-sm);
    background: rgba(109, 40, 245, 0.05);
}

.mt-qitem-message-label[b-xokmpezb0x] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

/* The body of anything a person wrote — the team's message and the mentor's
   own recorded feedback both use it, so the two read at one size. */
.mt-qitem-message-body[b-xokmpezb0x] {
    margin: 0;
    font-size: var(--motiva-font-size-lg, 15px);
    line-height: 1.6;
    color: var(--motiva-text-primary);
}

/* Drive / resource link — shown as a file-icon pill. */
.mt-qitem-resource[b-xokmpezb0x] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-border-card);
    border-radius: var(--motiva-radius-md);
    text-decoration: none;
    color: var(--motiva-text-secondary);
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium);
    width: fit-content;
    max-width: 100%;
    transition: border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mt-qitem-resource:hover[b-xokmpezb0x] {
    border-color: var(--motiva-color-violet, var(--motiva-color-indigo));
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

.mt-qitem-resource-icon[b-xokmpezb0x] { flex: 0 0 auto; }

.mt-qitem-resource-label[b-xokmpezb0x] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 260px;
}

/* The decision that closed an approved round — the SAME object as הודעת הצוות
   above, in the mentor's own voice instead of the team's. Identical geometry so
   the two read as one kind of thing, and the completed teal instead of the
   brand hue so it reads as a decision already taken rather than something
   waiting to be answered. Still not a card. */
.mt-qitem-verdict[b-xokmpezb0x] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 13px;
    border-inline-start: 3px solid var(--motiva-color-teal);
    border-start-end-radius: var(--motiva-radius-sm);
    border-end-end-radius: var(--motiva-radius-sm);
    background: var(--motiva-color-success-bg, rgba(13, 156, 154, 0.08));
}

.mt-qitem-verdict-label[b-xokmpezb0x] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-color-teal-ink, var(--motiva-color-teal));
}

/* ── The action group ─────────────────────────────────────────
   `margin-inline-start: auto` pins it to the inline END — the visual left in
   RTL — even when the details column is short, so the actions do not drift
   inward next to a one-line submission. A column so a second action, if one is
   ever added, stacks under the primary instead of competing with it on a row. */
.mt-qitem-actions[b-xokmpezb0x] {
    flex: 0 0 auto;
    margin-inline-start: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

/* "לבדיקת ההגשה" — the primary action. Geometry only; the gradient fill,
   hover, press and focus ring all come from the shared .motiva-cta. */
.mt-qitem-review[b-xokmpezb0x] {
    border: 0;
    padding: 10px 20px;
    border-radius: var(--motiva-radius-md);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-body, 14.5px);
    font-weight: var(--motiva-font-weight-semibold);
    white-space: nowrap;
    cursor: pointer;
}

/* ── FAILED LOAD ──────────────────────────────────────────────
   Deliberately NOT MEmptyState. An empty state says "there is nothing here",
   which is the one thing this must not say: the queue may be full and the
   request simply did not land. Same panel inset and type scale as the empty
   state so it does not read as a different kind of screen. */
.mt-qerror[b-xokmpezb0x] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 26px 16px 24px;
}

.mt-qerror-title[b-xokmpezb0x] {
    margin: 0;
    font-size: var(--motiva-font-size-item, 15.5px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
}

.mt-qerror-body[b-xokmpezb0x] {
    margin: 0 0 6px;
    font-size: var(--motiva-font-size-sm, 13.5px);
    line-height: 1.55;
    color: var(--motiva-text-muted);
}

/* Geometry only; .motiva-cta supplies the gradient, hover, press and ring. */
.mt-qerror-retry[b-xokmpezb0x] {
    border: 0;
    padding: 9px 20px;
    border-radius: var(--motiva-radius-md);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    cursor: pointer;
}

/* Narrow: the action group stops hugging the left edge and spans the row, which
   is the only place a stacked CTA should be full width. */
@media (max-width: 560px) {
    .mt-qitem-actions[b-xokmpezb0x] {
        margin-inline-start: 0;
        width: 100%;
    }

    .mt-qitem-team[b-xokmpezb0x] { max-width: 100%; }
}

/* ============================================================
   REVIEW MODAL (State 3)
   Centred dialog over a dimmed backdrop.
   ============================================================ */

/* The backdrop covers the full viewport and centers its single child (the modal)
   with flexbox. This replaces the position:fixed + top/left/translate approach,
   which was unreliable in RTL (inset-inline-start resolves to `right` and the
   translate math produces the wrong offset). Flexbox centering has no such
   direction dependency. */
.mt-modal-backdrop[b-xokmpezb0x] {
    position: fixed;
    inset: 0;
    background: rgba(15, 10, 30, 0.45);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Prevent interaction with the page while modal is open. */
    overflow-y: auto;
}

.mt-modal[b-xokmpezb0x] {
    /* position:relative — the backdrop's flex layout does the centering. */
    position: relative;
    width: min(600px, 92vw);
    max-height: 88vh;
    overflow-y: auto;
    background: var(--motiva-surface-primary, #fff);
    border-radius: var(--motiva-radius-lg);
    box-shadow: 0 24px 60px rgba(15, 10, 30, 0.22), 0 4px 16px rgba(15, 10, 30, 0.10);
    padding: 24px 28px 28px;
    z-index: 910;
    box-sizing: border-box;
    /* Give the modal a small vertical margin so it never touches the viewport
       edge on short screens, and so the backdrop's own overflow-y can scroll
       it into view if necessary. */
    margin: 24px;
}

/* Header: badge at start, close at end. */
.mt-modal-header[b-xokmpezb0x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.mt-modal-badge[b-xokmpezb0x] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-color-brand-bg, rgba(109, 40, 245, 0.08));
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold);
}

.mt-modal-close[b-xokmpezb0x] {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    border-radius: var(--motiva-radius-full);
    font-size: var(--motiva-font-size-h3, 18px);
    line-height: 1;
    color: var(--motiva-text-muted);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mt-modal-close:hover[b-xokmpezb0x] { background: rgba(27, 26, 34, 0.07); }

.mt-modal-close:focus-visible[b-xokmpezb0x] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.mt-modal-title[b-xokmpezb0x] {
    margin: 0 0 4px;
    font-size: var(--motiva-font-size-h2, 20px);
    font-weight: var(--motiva-font-weight-bold);
    color: var(--motiva-text-primary);
    line-height: 1.3;
}

.mt-modal-version[b-xokmpezb0x] {
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-secondary);
}

.mt-modal-ctx[b-xokmpezb0x] {
    margin: 0 0 14px;
    font-size: var(--motiva-font-size-body, 14px);
    color: var(--motiva-text-muted);
    line-height: 1.5;
}

.mt-modal-ctx-sep[b-xokmpezb0x] { opacity: 0.5; }

/* Metadata row — version · date · previous version. */
.mt-modal-meta[b-xokmpezb0x] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px 0;
    border-block: 1px solid var(--motiva-border-subtle);
    margin-bottom: 16px;
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--motiva-text-secondary);
}

.mt-modal-meta-item[b-xokmpezb0x] { white-space: nowrap; }
.mt-modal-meta-sep[b-xokmpezb0x]  { color: var(--motiva-text-subtle, var(--motiva-text-muted)); }

/* Resource link row. */
.mt-modal-resource[b-xokmpezb0x] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--motiva-border-card);
    border-radius: var(--motiva-radius-md);
    margin-bottom: 16px;
    background: var(--motiva-color-neutral-bg, rgba(27, 26, 34, 0.03));
}

.mt-modal-resource-icon[b-xokmpezb0x] {
    flex: 0 0 auto;
    color: var(--motiva-text-muted);
}

.mt-modal-resource-label[b-xokmpezb0x] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-body, 14px);
    color: var(--motiva-text-secondary);
}

.mt-modal-resource-open[b-xokmpezb0x] {
    flex: 0 0 auto;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    text-decoration: none;
    border-radius: var(--motiva-radius-sm);
}

.mt-modal-resource-open:hover[b-xokmpezb0x] { text-decoration: underline; }

/* Content sections. */
.mt-modal-section[b-xokmpezb0x] {
    margin-bottom: 16px;
}

.mt-modal-section-title[b-xokmpezb0x] {
    margin: 0 0 6px;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mt-modal-section-body[b-xokmpezb0x] {
    margin: 0;
    font-size: var(--motiva-font-size-body, 14.5px);
    line-height: 1.65;
    color: var(--motiva-text-secondary);
}

/* Previous round feedback — light purple tint block. */
.mt-modal-prev-feedback .mt-modal-section-title[b-xokmpezb0x] {
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

.mt-modal-prev-feedback .mt-modal-section-body[b-xokmpezb0x] {
    background: rgba(109, 40, 245, 0.06);
    border-radius: var(--motiva-radius-md);
    padding: 10px 14px;
}

/* Mentor review textarea. */
.mt-modal-textarea[b-xokmpezb0x] {
    width: 100%;
    min-height: 90px;
    padding: 10px 12px;
    border: 1.5px solid var(--motiva-border-card);
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-primary, #fff);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-body, 14px);
    line-height: 1.6;
    color: var(--motiva-text-primary);
    resize: vertical;
    box-sizing: border-box;
    direction: rtl;
    transition: border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mt-modal-textarea:focus[b-xokmpezb0x] {
    outline: none;
    border-color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

.mt-modal-field-error[b-xokmpezb0x] {
    margin: 6px 0 0;
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
}

.mt-modal-error[b-xokmpezb0x] {
    margin: 0 0 12px;
    font-size: var(--motiva-font-size-sm, 13.5px);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
}

/* Footer — approve (gradient) + return (outline). */
.mt-modal-footer[b-xokmpezb0x] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--motiva-border-subtle);
    flex-direction: row-reverse; /* approve at inline-start in RTL = visual right */
}

/* Approve button: geometry only, .motiva-cta supplies gradient. */
.mt-modal-approve[b-xokmpezb0x] {
    border: 0;
    padding: 10px 22px;
    border-radius: var(--motiva-radius-md);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-body, 14.5px);
    font-weight: var(--motiva-font-weight-semibold);
    cursor: pointer;
}

.mt-modal-approve:disabled[b-xokmpezb0x] { opacity: 0.6; cursor: default; }

/* Return button: outlined secondary. */
.mt-modal-return[b-xokmpezb0x] {
    padding: 10px 22px;
    border: 1.5px solid var(--motiva-border-strong, rgba(27, 26, 34, 0.2));
    border-radius: var(--motiva-radius-md);
    background: none;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-body, 14.5px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
    cursor: pointer;
    transition: border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.mt-modal-return:hover[b-xokmpezb0x] {
    border-color: var(--motiva-text-secondary);
    color: var(--motiva-text-primary);
}

.mt-modal-return:disabled[b-xokmpezb0x] { opacity: 0.6; cursor: default; }

/* Responsive — modal becomes a bottom sheet on narrow viewports. */
@media (max-width: 640px) {
    .mt-modal-backdrop[b-xokmpezb0x] {
        align-items: flex-end;
    }

    .mt-modal[b-xokmpezb0x] {
        width: 100%;
        max-height: 90vh;
        margin: 0;
        border-radius: var(--motiva-radius-lg) var(--motiva-radius-lg) 0 0;
    }

    .mt-modal-footer[b-xokmpezb0x] { flex-direction: column; }
    .mt-modal-approve[b-xokmpezb0x],
    .mt-modal-return[b-xokmpezb0x]  { width: 100%; justify-content: center; }
}

/* ============================================================
   THE HEADER SCALE was re-based to the student page in an earlier pass and
   the rules that carried it are gone with MSectionHeading: this panel's head
   is `.mt-panel-head` above — the student's own `.pts-header` — so the label
   size, the tracking, the 8px pairing gap and the hairline are that rule's,
   not a set of overrides on a component this page no longer renders here.
   The compact-header rules at the top of this file (17px/500 subtitle,
   10px/16px block inset) stay: they style MPageHeader, which is unchanged.
   ============================================================ */

/* ── הנחיות הגשה — the requirement, read-only ─────────────────
   Same block geometry as הודעת הצוות so the expansion reads as one
   rhythm, but a NEUTRAL edge and surface rather than the brand tint:
   that tint means "a person wrote this to you", and the assignment is
   not that. It is what the team was asked for, and it sits above their
   answer to it. The mentor has no edit affordance here — Lecturer/Admin
   owns this text on the project task. */
.mt-qitem-brief[b-xokmpezb0x] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 13px;
    border-inline-start: 3px solid var(--motiva-border-strong, rgba(27, 26, 34, 0.22));
    border-start-end-radius: var(--motiva-radius-sm);
    border-end-end-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-chip, rgba(27, 26, 34, 0.045));
}

.mt-qitem-brief-label[b-xokmpezb0x] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
}
/* /Pages/Milestones/Overview/MilestonesOverviewPage.razor.rz.scp.css */
/* ============================================================
   MilestonesOverviewPage — scoped styles
   Prefix: mov-
   Mirrors the visual language of the lecturer dashboard / management pages.
   ============================================================ */

.mov-page[b-sz4xrelqtd] {
    padding: 24px;
    display: flex; flex-direction: column; gap: 16px;
    max-width: 1320px; margin: 0 auto;
}

/* Header — the shared white Core page-header card (MPageHeaderCard). The page
   title and its Core scale live in the shared component; only the leading icon
   chip is styled here, since it is passed into the card's Leading slot. */
.mov-page-icon[b-sz4xrelqtd] {
    width: 44px; height: 44px; border-radius: 12px;
    background: rgba(37,99,235,0.10); color: var(--g-accent, #2563eb);
    display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
}
/* Loading / empty / error */
.mov-empty[b-sz4xrelqtd] {
    background: var(--g-surface, #fff);
    border: 1px solid var(--g-border, rgba(15,23,42,0.08));
    border-radius: var(--g-radius-md, 12px);
    padding: 32px; text-align: center;
    color: var(--g-text-muted, #64748b);
}
.mov-empty .oi[b-sz4xrelqtd] { margin-inline-end: 8px; }
.mov-empty--error[b-sz4xrelqtd] { color: #991b1b; }
.mov-spinner-inline[b-sz4xrelqtd] {
    display: inline-block; width: 14px; height: 14px; margin-inline-end: 8px;
    border: 2px solid rgba(37,99,235,0.30); border-top-color: var(--g-accent, #2563eb);
    border-radius: 50%; vertical-align: -2px;
    animation: mov-spin-b-sz4xrelqtd 0.8s linear infinite;
}
@keyframes mov-spin-b-sz4xrelqtd { to { transform: rotate(360deg); } }

/* KPI cards */
.mov-kpi-row[b-sz4xrelqtd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.mov-kpi-card[b-sz4xrelqtd] {
    background: var(--g-surface, #fff);
    border: 1px solid var(--g-border, rgba(15,23,42,0.08));
    border-radius: var(--g-radius-md, 12px);
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 4px;
}
.mov-kpi-value[b-sz4xrelqtd] { font-size: 1.6rem; font-weight: 700; color: var(--g-text-strong, #0f172a); }
.mov-kpi-label[b-sz4xrelqtd] { color: var(--g-text-muted, #64748b); font-size: 0.85rem; }
.mov-kpi--ok[b-sz4xrelqtd]     { border-color: rgba(16,185,129,0.25); background: rgba(16,185,129,0.04); }
.mov-kpi--warn[b-sz4xrelqtd]   { border-color: rgba(245,158,11,0.30); background: rgba(245,158,11,0.05); }
.mov-kpi--danger[b-sz4xrelqtd] { border-color: rgba(239,68,68,0.25);  background: rgba(239,68,68,0.04); }
.mov-kpi--info[b-sz4xrelqtd]   { border-color: rgba(168,85,247,0.25); background: rgba(168,85,247,0.04); }

/* Filters */
.mov-filters-bar[b-sz4xrelqtd] { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.mov-search-wrap[b-sz4xrelqtd] { position: relative; flex: 1 1 280px; max-width: 480px; }
.mov-search-icon[b-sz4xrelqtd] { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--g-text-muted, #64748b); }
.mov-search[b-sz4xrelqtd] {
    width: 100%; height: 38px;
    padding-inline-start: 36px; padding-inline-end: 12px;
    border: 1px solid var(--g-border, rgba(15,23,42,0.12));
    border-radius: var(--g-radius-sm, 8px);
    background: var(--g-surface, #fff);
    font-size: 0.92rem;
}
.mov-filter-group[b-sz4xrelqtd]  { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mov-filter-select[b-sz4xrelqtd] {
    height: 38px; padding: 0 12px;
    border: 1px solid var(--g-border, rgba(15,23,42,0.12));
    border-radius: var(--g-radius-sm, 8px);
    background: var(--g-surface, #fff);
    font-size: 0.92rem; min-width: 160px;
}
.mov-toggle[b-sz4xrelqtd] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: var(--g-radius-sm, 8px);
    font-size: 0.88rem; color: var(--g-text-strong, #0f172a);
    cursor: pointer;
}
.mov-toggle input[b-sz4xrelqtd] { accent-color: var(--g-accent, #2563eb); }

/* Table */
.mov-table-panel[b-sz4xrelqtd] {
    background: var(--g-surface, #fff);
    border: 1px solid var(--g-border, rgba(15,23,42,0.08));
    border-radius: var(--g-radius-md, 12px);
    overflow: hidden;
}
.mov-table-wrap[b-sz4xrelqtd] { overflow-x: auto; }
.mov-table[b-sz4xrelqtd] { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9rem; }
.mov-table thead th[b-sz4xrelqtd] {
    text-align: start; font-weight: 600; color: var(--g-text-muted, #64748b);
    padding: 12px 14px;
    border-bottom: 1px solid var(--g-border, rgba(15,23,42,0.08));
    background: rgba(15,23,42,0.02);
    white-space: nowrap;
}
.mov-table tbody td[b-sz4xrelqtd] {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(15,23,42,0.05);
    vertical-align: middle;
}
.mov-cell-num[b-sz4xrelqtd]    { white-space: nowrap; width: 110px; text-align: center; }
.mov-cell-action[b-sz4xrelqtd] { width: 140px; text-align: end; }
.mov-empty-row[b-sz4xrelqtd]   { padding: 32px 16px; text-align: center; color: var(--g-text-muted, #64748b); }
.mov-dash[b-sz4xrelqtd]        { color: var(--g-text-muted, #64748b); }
.mov-date-cell[b-sz4xrelqtd]   { white-space: nowrap; }

.mov-project-cell[b-sz4xrelqtd]  { display: flex; flex-direction: column; gap: 2px; }
.mov-project-num[b-sz4xrelqtd]   { font-size: 0.78rem; color: var(--g-text-muted, #64748b); }
.mov-project-title[b-sz4xrelqtd] { font-weight: 500; color: var(--g-text-strong, #0f172a); }

.mov-type-chip[b-sz4xrelqtd] {
    display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px;
    font-size: 0.78rem; font-weight: 600;
    background: rgba(15,23,42,0.06); color: var(--g-text-strong, #0f172a);
}
.mov-type-tech[b-sz4xrelqtd]  { background: rgba(59,130,246,0.10); color: #1e40af; }
.mov-type-meth[b-sz4xrelqtd]  { background: rgba(168,85,247,0.10); color: #6b21a8; }
.mov-type-other[b-sz4xrelqtd] { background: rgba(15,23,42,0.06); }

.mov-progress-pill[b-sz4xrelqtd] {
    display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px;
    background: rgba(15,23,42,0.06); color: var(--g-text-strong, #0f172a);
    font-weight: 700; font-size: 0.82rem;
}
.mov-progress-pill-done[b-sz4xrelqtd] { background: rgba(16,185,129,0.12); color: #065f46; }

.mov-num-pill[b-sz4xrelqtd] {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; padding: 2px 10px; border-radius: 999px;
    font-weight: 700; font-size: 0.82rem;
    background: rgba(15,23,42,0.06); color: var(--g-text-muted, #64748b);
}
.mov-num-pill-warn[b-sz4xrelqtd] { background: rgba(245,158,11,0.14); color: #92400e; }

.mov-status-badge[b-sz4xrelqtd] {
    display: inline-flex; align-items: center; padding: 2px 12px; border-radius: 999px;
    font-size: 0.82rem; font-weight: 600;
}
.mov-status-healthy[b-sz4xrelqtd]        { background: rgba(16,185,129,0.12); color: #065f46; }
.mov-status-overdue[b-sz4xrelqtd]        { background: rgba(239,68,68,0.12);  color: #991b1b; }
.mov-status-needsattention[b-sz4xrelqtd] { background: rgba(245,158,11,0.14); color: #92400e; }

.mov-open-btn[b-sz4xrelqtd] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: var(--g-radius-sm, 8px);
    border: 1px solid var(--g-border, rgba(15,23,42,0.12));
    background: var(--g-surface, #fff);
    color: var(--g-text-strong, #0f172a);
    cursor: pointer; font-weight: 500; font-size: 0.85rem;
}
.mov-open-btn:hover[b-sz4xrelqtd] { background: rgba(37,99,235,0.06); border-color: rgba(37,99,235,0.30); }
/* /Pages/Milestones/StudentMilestonesPage.razor.rz.scp.css */
/* ============================================================
   StudentMilestonesPage — scoped styles
   Prefix: msp-
   Follows the same design language as Dashboard and Tasks pages.
   ============================================================ */

/* ── Page wrapper ─────────────────────────────────────────── */

.msp-page[b-al9csqp0r1] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Loading / error states ───────────────────────────────── */

.msp-loading[b-al9csqp0r1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 80px 0;
    color: var(--g-text-muted);
    font-family: var(--g-font-base);
    font-size: var(--g-type-secondary);
}

.msp-spinner[b-al9csqp0r1] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--g-border);
    border-top-color: var(--g-accent);
    border-radius: var(--g-radius-full);
    animation: msp-spin-b-al9csqp0r1 0.75s linear infinite;
}

@keyframes msp-spin-b-al9csqp0r1 {
    to { transform: rotate(360deg); }
}

.msp-state-msg[b-al9csqp0r1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 0;
    font-family: var(--g-font-base);
    font-size: var(--g-type-secondary);
    color: var(--g-text-muted);
    text-align: center;
}

.msp-state-msg .oi[b-al9csqp0r1] {
    font-size: 28px;
}

.msp-error[b-al9csqp0r1] {
    color: var(--g-danger);
}

/* ── Page header card ─────────────────────────────────────── */

.msp-header-card[b-al9csqp0r1] {
    /* Surface from the shared `.motiva-panel` class (motiva-base.css),
       worn in the markup. This block used to restate it as --g-bg-surface at
       --g-radius-md behind --g-border-light with --g-shadow-sm: the same white,
       but a 16px corner, a grey hairline and no lift, against the 24px violet-
       edged lifted panel every migrated screen renders. */
    padding: 22px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.msp-header-start[b-al9csqp0r1] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.msp-page-icon[b-al9csqp0r1] {
    width: 46px;
    height: 46px;
    border-radius: var(--g-radius-sm);
    background: var(--g-accent-active-bg);
    color: var(--g-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

/* PAGE TITLE — the shared h1 step. Values live in motiva-tokens.css; never restate them here. */
.msp-page-title[b-al9csqp0r1] {
    margin: 0;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-h1, 38px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: var(--motiva-line-height-tight, 1.1);
    letter-spacing: var(--motiva-letter-spacing-page, -0.035em);
    color: var(--motiva-text-primary, #1B1A22);
}

/* ── Summary cards row ────────────────────────────────────── */

.msp-summary-row[b-al9csqp0r1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.msp-summary-card[b-al9csqp0r1] {
    /* Surface from the shared `.motiva-panel` class (motiva-base.css),
       worn in the markup. This block used to restate it as --g-bg-surface at
       --g-radius-md behind --g-border-light with --g-shadow-sm: the same white,
       but a 16px corner, a grey hairline and no lift, against the 24px violet-
       edged lifted panel every migrated screen renders. */
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.msp-summary-icon[b-al9csqp0r1] {
    width: 44px;
    height: 44px;
    border-radius: var(--g-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.msp-icon-total[b-al9csqp0r1] {
    background: #ede9fe;
    color: #7c3aed;
}

.msp-icon-completed[b-al9csqp0r1] {
    background: #dcfce7;
    color: #15803d;
}

.msp-icon-current[b-al9csqp0r1] {
    background: #dbeafe;
    color: #1d4ed8;
}

.msp-summary-body[b-al9csqp0r1] {
    min-width: 0;
}

.msp-summary-value[b-al9csqp0r1] {
    font-family: var(--g-font-base);
    font-size: 28px;
    font-weight: 800;
    color: var(--g-text-primary);
    line-height: 1.1;
}

.msp-summary-current-name[b-al9csqp0r1] {
    font-size: var(--motiva-font-size-item, 15px);
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.msp-summary-label[b-al9csqp0r1] {
    font-family: var(--g-font-base);
    font-size: var(--g-type-secondary);
    font-weight: 400;
    color: var(--g-text-muted);
    margin-top: 3px;
}

/* ── Milestones list ──────────────────────────────────────── */

.msp-list[b-al9csqp0r1] {
    display: flex;
    flex-direction: column;
    gap: 0;       /* gap managed by connector line design */
    padding-bottom: 12px;
}

/* ── Individual milestone card ────────────────────────────── */

.msp-card[b-al9csqp0r1] {
    /* Surface from the shared `.motiva-panel-tile` class (motiva-base.css),
       worn in the markup. This block used to restate it as --g-bg-surface at
       --g-radius-md behind --g-border-light with --g-shadow-sm: the same white,
       but a 16px corner, a grey hairline and no lift, against the 24px violet-
       edged lifted panel every migrated screen renders. */
    padding: 0;
    margin-bottom: 0;
    transition: box-shadow 0.15s ease;
}

/* Current milestone — strong accent emphasis */
.msp-card-current[b-al9csqp0r1] {
    background: linear-gradient(to left, var(--g-bg-surface) 60%, rgba(79, 70, 229, 0.03) 100%);
    border-inline-start: 4px solid var(--g-accent);
    box-shadow: var(--g-shadow-md), 0 0 0 1px rgba(79, 70, 229, 0.1);
}

/* Completed — light purple tint background, purple left border */
.msp-card-done[b-al9csqp0r1] {
    background: #f5f3ff;
    border-inline-start: 3px solid #c4b5fd;
}

/* Delayed — red left border */
.msp-card-delayed[b-al9csqp0r1] {
    border-inline-start: 3px solid var(--g-danger);
}

/* NotStarted — reduced opacity on content */
.msp-card-pending[b-al9csqp0r1] {
    opacity: 0.75;
}

/* ── Card top layout (step column + body) ─────────────────── */

.msp-card-top[b-al9csqp0r1] {
    display: flex;
    gap: 0;
}

/* ── Step column (circle + connector) ────────────────────── */

.msp-step-col[b-al9csqp0r1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 56px;
    padding-top: 22px;
}

.msp-step-circle[b-al9csqp0r1] {
    width: 36px;
    height: 36px;
    border-radius: var(--g-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
    z-index: 1;
    position: relative;
}

.msp-step-completed[b-al9csqp0r1] {
    background: #ede9fe;
    color: #7c3aed;
    border: 2px solid #c4b5fd;
}

.msp-step-inprogress[b-al9csqp0r1] {
    background: var(--g-accent);
    color: #fff;
    border: 2px solid var(--g-accent);
    box-shadow: 0 0 0 4px var(--g-accent-active-bg);
}

.msp-step-delayed[b-al9csqp0r1] {
    background: #fee2e2;
    color: #b91c1c;
    border: 2px solid #fca5a5;
}

.msp-step-notstarted[b-al9csqp0r1] {
    background: var(--g-bg-surface);
    color: var(--g-text-muted);
    border: 2px solid var(--g-border);
}

.msp-step-attention[b-al9csqp0r1] {
    background: #fff7ed;
    color: #ea580c;
    border: 2px solid #fdba74;
}

/* Connector line between cards */
.msp-connector[b-al9csqp0r1] {
    width: 2px;
    flex: 1;
    min-height: 24px;
    background: var(--g-border-light);
    margin: 4px 0;
}

.msp-connector-done[b-al9csqp0r1] {
    background: #c4b5fd;
}

/* ── Card body (title, dates, progress) ───────────────────── */

.msp-card-body[b-al9csqp0r1] {
    flex: 1;
    min-width: 0;
    padding: 20px 24px 20px 0;
}

.msp-card-header[b-al9csqp0r1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.msp-card-title-group[b-al9csqp0r1] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

/* CARD TITLE — the shared h3 step (16px/700). Was a per-page literal. */
.msp-card-title[b-al9csqp0r1] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-h3, 16px);
    font-weight: 700;
    color: var(--g-text-primary);
    line-height: 1.3;
}

.msp-card-done .msp-card-title[b-al9csqp0r1] {
    color: #6d28d9;
    font-weight: 600;
}

.msp-card-pending .msp-card-title[b-al9csqp0r1] {
    color: var(--g-text-muted);
}

/* "שלב נוכחי" inline tag */
/* Default tag: white paper under the Motiva gradient edge, dark ink.
   `--motiva-tag-brand-surface`, the product's one tag recipe. The edge is
   paid for out of the padding so the pill's outer box does not move. */
.msp-current-tag[b-al9csqp0r1] {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid transparent;
    border-radius: 20px;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 600;
    white-space: nowrap;
}

/* ── Status badge ─────────────────────────────────────────── */

.msp-status-badge[b-al9csqp0r1] {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Both were violet fills — "completed" here was never teal, so nothing
   green is being given up. `.msp-status-badge` is 3px/12px, so the edge is
   paid for at 2px/11px. Delayed (rose) and attention (amber) below are
   untouched. */
.msp-badge-completed[b-al9csqp0r1],
.msp-badge-inprogress[b-al9csqp0r1] {
    padding: 2px 11px;
    border: 1px solid transparent;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
}

.msp-badge-delayed[b-al9csqp0r1] {
    background: #fee2e2;
    color: #b91c1c;
}

.msp-badge-notstarted[b-al9csqp0r1] {
    background: var(--g-bg-hover);
    color: var(--g-text-muted);
}

.msp-badge-attention[b-al9csqp0r1] {
    background: #fff7ed;
    color: #ea580c;
}

.msp-card-attention[b-al9csqp0r1] {
    border-inline-start: 4px solid #ea580c;
    background: rgba(234,88,12,0.02);
}

/* ── Dates row ────────────────────────────────────────────── */

.msp-card-dates[b-al9csqp0r1] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.msp-date-item[b-al9csqp0r1] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--g-text-muted);
}

.msp-date-item .oi[b-al9csqp0r1] {
    font-size: 11px;
}

.msp-date-done[b-al9csqp0r1] {
    color: #7c3aed;
}

/* ── Progress bar ─────────────────────────────────────────── */

.msp-progress-row[b-al9csqp0r1] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.msp-progress-track[b-al9csqp0r1] {
    flex: 1;
    height: 9px;
    background: #e5e7eb;
    border-radius: var(--g-radius-full);
    overflow: hidden;
}

.msp-progress-fill[b-al9csqp0r1] {
    height: 100%;
    border-radius: var(--g-radius-full);
    transition: width 0.4s ease;
    min-width: 0;
}

.msp-fill-completed[b-al9csqp0r1] {
    background: #7c3aed;
}

.msp-fill-inprogress[b-al9csqp0r1] {
    background: var(--g-accent);
}

.msp-fill-delayed[b-al9csqp0r1] {
    background: var(--g-danger);
}

.msp-fill-notstarted[b-al9csqp0r1] {
    background: var(--g-border);
}

.msp-progress-pct[b-al9csqp0r1] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 700;
    color: var(--g-text-secondary);
    min-width: 34px;
    text-align: start;
    flex-shrink: 0;
}

.msp-pct-completed[b-al9csqp0r1]  { color: #7c3aed; }
.msp-pct-inprogress[b-al9csqp0r1] { color: var(--g-accent); }
.msp-pct-delayed[b-al9csqp0r1]    { color: var(--g-danger); }
.msp-pct-notstarted[b-al9csqp0r1] { color: var(--g-text-muted); }

/* ── Task count ───────────────────────────────────────────── */

.msp-task-count[b-al9csqp0r1] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-count, 12px);
    color: var(--g-text-muted);
}

.msp-task-count .oi[b-al9csqp0r1] {
    font-size: 11px;
}

.msp-no-tasks[b-al9csqp0r1] {
    font-style: italic;
}

/* ── Current milestone — enlarged step circle + pulse ────── */

.msp-card-current .msp-step-col[b-al9csqp0r1] {
    width: 62px;
}

.msp-card-current .msp-step-circle[b-al9csqp0r1] {
    width: 42px;
    height: 42px;
    font-size: var(--motiva-font-size-lg, 15px);
}

/* Subtle pulse ring on the active step — draws the eye without being distracting */
.msp-card-current .msp-step-inprogress[b-al9csqp0r1] {
    animation: msp-pulse-b-al9csqp0r1 2.4s ease-in-out infinite;
}

.msp-card-current .msp-step-delayed[b-al9csqp0r1] {
    animation: msp-pulse-red-b-al9csqp0r1 2.4s ease-in-out infinite;
}

@keyframes msp-pulse-b-al9csqp0r1 {
    0%, 100% { box-shadow: 0 0 0 4px var(--g-accent-active-bg); }
    50%       { box-shadow: 0 0 0 8px var(--g-accent-active-bg); }
}

@keyframes msp-pulse-red-b-al9csqp0r1 {
    0%, 100% { box-shadow: 0 0 0 4px #fee2e2; }
    50%       { box-shadow: 0 0 0 8px #fee2e2; }
}

/* Current card title — slightly larger for emphasis */
.msp-card-current .msp-card-title[b-al9csqp0r1] {
    font-size: var(--motiva-font-size-h3, 17px);
}

/* Current card body — more breathing room */
.msp-card-current .msp-card-body[b-al9csqp0r1] {
    padding-top: 24px;
    padding-bottom: 24px;
}

.msp-card-current .msp-step-col[b-al9csqp0r1] {
    padding-top: 28px;
}

/* Completed fill — already defined above; track gets a purple tint so the filled bar looks intentional */
.msp-card-done .msp-progress-track[b-al9csqp0r1] {
    background: #ede9fe;
}

.msp-card-done .msp-task-count[b-al9csqp0r1] {
    color: #7c3aed;
}

/* Notstarted card — dim both icon and text, not just opacity */
.msp-card-pending .msp-card-title[b-al9csqp0r1] {
    font-weight: 600;
}

.msp-card-pending .msp-progress-track[b-al9csqp0r1] {
    background: #f3f4f6;
}

/* Delayed card — red tint on progress bar track for extra urgency signal */
.msp-card-delayed .msp-progress-track[b-al9csqp0r1] {
    background: #fef2f2;
}
/* /Pages/Motiva/MotivaChangelogPage.razor.rz.scp.css */
code[b-c2ljjbd65f] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    direction: ltr;
    unicode-bidi: isolate;
}

h3[b-c2ljjbd65f] {
    font-size: var(--motiva-font-size-h4);
    margin: var(--motiva-space-sm) 0 var(--motiva-space-xs);
}

p[b-c2ljjbd65f] {
    margin: 0;
    color: var(--motiva-text-secondary);
    line-height: var(--motiva-line-height-body);
}

/* ── Visual timeline ──────────────────────────────────────────────────
   A single continuous rail (::before on the list) with one dot per entry;
   the current phase gets a filled/brand dot and a subtle highlighted card,
   completed phases get a plain outline dot — chronology reads at a glance
   without needing to parse dates first. ── */

.changelog-timeline[b-c2ljjbd65f] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-lg);
}

.changelog-entry[b-c2ljjbd65f] {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: var(--motiva-space-md);
}

.changelog-rail[b-c2ljjbd65f] {
    position: relative;
    display: flex;
    justify-content: center;
}

.changelog-rail[b-c2ljjbd65f]::before {
    content: "";
    position: absolute;
    top: 32px;
    bottom: calc(-1 * var(--motiva-space-lg));
    inset-inline-start: 50%;
    width: 2px;
    background: var(--motiva-border-strong);
    transform: translateX(-1px);
}

.changelog-entry-last .changelog-rail[b-c2ljjbd65f]::before {
    display: none;
}

/* Each dot carries the phase's own icon — the timeline reads as a product
   roadmap (what kind of work happened) rather than a plain bullet list. */
.changelog-dot[b-c2ljjbd65f] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-surface-primary);
    border: 2px solid var(--motiva-border-strong);
    color: var(--motiva-text-muted);
    font-size: 12px;
    z-index: 1;
}

.changelog-entry-current .changelog-dot[b-c2ljjbd65f] {
    background: var(--motiva-gradient-signature);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 0 4px var(--motiva-color-info-bg);
}

.changelog-entry-body[b-c2ljjbd65f] {
    min-width: 0;
    padding-bottom: var(--motiva-space-xs);
}

.changelog-entry-current .changelog-entry-body[b-c2ljjbd65f] {
    background: var(--motiva-surface-primary);
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-md);
    padding: var(--motiva-space-md);
    box-shadow: var(--motiva-shadow-sm);
    transition: box-shadow var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard);
}

.changelog-entry-current .changelog-entry-body:hover[b-c2ljjbd65f] {
    box-shadow: var(--motiva-shadow-md);
}

.changelog-entry-head[b-c2ljjbd65f] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--motiva-space-sm);
    margin-bottom: var(--motiva-space-xs);
}

.changelog-date[b-c2ljjbd65f] {
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    direction: ltr;
    unicode-bidi: isolate;
}

@media (max-width: 390px) {
    .changelog-entry[b-c2ljjbd65f] {
        grid-template-columns: 24px 1fr;
        gap: var(--motiva-space-sm);
    }

    .changelog-dot[b-c2ljjbd65f] {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }

    .changelog-rail[b-c2ljjbd65f]::before {
        top: 28px;
    }
}
/* /Pages/Motiva/MotivaComponentBadgePage.razor.rz.scp.css */
/* Shared "doc-*" pattern — identical across all five component pages
   (Button/Card/StatusBadge/ProgressBar/Modal) by design, per the Phase 4.1
   visual-consistency pass. The title/subtitle/purpose header itself was
   extracted into DocPageHeader (Phase 4.2) to remove that duplication;
   the smaller rules below (note/do-dont/lists/headings) still live per
   page, matching this project's existing CSS-isolation convention. */

.doc-note[b-rv1wzvjq95] {
    color: var(--motiva-text-muted);
    font-size: var(--motiva-font-size-sm);
    line-height: var(--motiva-line-height-body);
    margin: var(--motiva-space-sm) 0 0;
}

.doc-do-dont[b-rv1wzvjq95] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--motiva-space-md);
}

code[b-rv1wzvjq95] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    direction: ltr;
    unicode-bidi: isolate;
}

ul[b-rv1wzvjq95] {
    margin: 0;
    padding-inline-start: var(--motiva-space-lg);
    color: var(--motiva-text-secondary);
    line-height: var(--motiva-line-height-body);
}

li[b-rv1wzvjq95] {
    margin-bottom: var(--motiva-space-xs);
}

h3[b-rv1wzvjq95] {
    font-size: var(--motiva-font-size-h4);
    margin: 0 0 var(--motiva-space-sm);
}

p[b-rv1wzvjq95] {
    margin: 0;
    color: var(--motiva-text-secondary);
    line-height: var(--motiva-line-height-body);
}

p + p[b-rv1wzvjq95] {
    margin-top: var(--motiva-space-sm);
}

@media (max-width: 768px) {
    .doc-do-dont[b-rv1wzvjq95] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Motiva/MotivaComponentButtonPage.razor.rz.scp.css */
/* Shared "doc-*" pattern — identical across all five component pages
   (Button/Card/StatusBadge/ProgressBar/Modal) by design, per the Phase 4.1
   visual-consistency pass. The title/subtitle/purpose header itself was
   extracted into DocPageHeader (Phase 4.2) to remove that duplication;
   the smaller rules below (note/do-dont/lists/headings) still live per
   page, matching this project's existing CSS-isolation convention. */

.doc-note[b-ju9vatw7d7] {
    color: var(--motiva-text-muted);
    font-size: var(--motiva-font-size-sm);
    line-height: var(--motiva-line-height-body);
    margin: var(--motiva-space-sm) 0 0;
}

.doc-do-dont[b-ju9vatw7d7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--motiva-space-md);
}

code[b-ju9vatw7d7] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    direction: ltr;
    unicode-bidi: isolate;
}

ul[b-ju9vatw7d7] {
    margin: 0;
    padding-inline-start: var(--motiva-space-lg);
    color: var(--motiva-text-secondary);
    line-height: var(--motiva-line-height-body);
}

li[b-ju9vatw7d7] {
    margin-bottom: var(--motiva-space-xs);
}

h3[b-ju9vatw7d7] {
    font-size: var(--motiva-font-size-h4);
    margin: 0 0 var(--motiva-space-sm);
}

p[b-ju9vatw7d7] {
    margin: 0;
    color: var(--motiva-text-secondary);
    line-height: var(--motiva-line-height-body);
}

p + p[b-ju9vatw7d7] {
    margin-top: var(--motiva-space-sm);
}

@media (max-width: 768px) {
    .doc-do-dont[b-ju9vatw7d7] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Motiva/MotivaComponentCardPage.razor.rz.scp.css */
/* Shared "doc-*" pattern — identical across all five component pages
   (Button/Card/StatusBadge/ProgressBar/Modal) by design, per the Phase 4.1
   visual-consistency pass. The title/subtitle/purpose header itself was
   extracted into DocPageHeader (Phase 4.2) to remove that duplication;
   the smaller rules below (note/do-dont/lists/headings) still live per
   page, matching this project's existing CSS-isolation convention. */

.doc-note[b-w83xhjcfk8] {
    color: var(--motiva-text-muted);
    font-size: var(--motiva-font-size-sm);
    line-height: var(--motiva-line-height-body);
    margin: var(--motiva-space-sm) 0 0;
}

.doc-do-dont[b-w83xhjcfk8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--motiva-space-md);
}

code[b-w83xhjcfk8] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    direction: ltr;
    unicode-bidi: isolate;
}

ul[b-w83xhjcfk8] {
    margin: 0;
    padding-inline-start: var(--motiva-space-lg);
    color: var(--motiva-text-secondary);
    line-height: var(--motiva-line-height-body);
}

li[b-w83xhjcfk8] {
    margin-bottom: var(--motiva-space-xs);
}

h3[b-w83xhjcfk8] {
    font-size: var(--motiva-font-size-h4);
    margin: 0 0 var(--motiva-space-sm);
}

p[b-w83xhjcfk8] {
    margin: 0;
    color: var(--motiva-text-secondary);
    line-height: var(--motiva-line-height-body);
}

p + p[b-w83xhjcfk8] {
    margin-top: var(--motiva-space-sm);
}

@media (max-width: 768px) {
    .doc-do-dont[b-w83xhjcfk8] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Motiva/MotivaComponentModalPage.razor.rz.scp.css */
/* Shared "doc-*" pattern — identical across all five component pages
   (Button/Card/StatusBadge/ProgressBar/Modal) by design, per the Phase 4.1
   visual-consistency pass. The title/subtitle/purpose header itself was
   extracted into DocPageHeader (Phase 4.2) to remove that duplication;
   the smaller rules below (note/do-dont/lists/headings) still live per
   page, matching this project's existing CSS-isolation convention. */

.doc-note[b-5ri8h5lml9] {
    color: var(--motiva-text-muted);
    font-size: var(--motiva-font-size-sm);
    line-height: var(--motiva-line-height-body);
    margin: var(--motiva-space-sm) 0 0;
}

.doc-do-dont[b-5ri8h5lml9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--motiva-space-md);
}

code[b-5ri8h5lml9] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    direction: ltr;
    unicode-bidi: isolate;
}

ul[b-5ri8h5lml9] {
    margin: 0;
    padding-inline-start: var(--motiva-space-lg);
    color: var(--motiva-text-secondary);
    line-height: var(--motiva-line-height-body);
}

li[b-5ri8h5lml9] {
    margin-bottom: var(--motiva-space-xs);
}

h3[b-5ri8h5lml9] {
    font-size: var(--motiva-font-size-h4);
    margin: 0 0 var(--motiva-space-sm);
}

p[b-5ri8h5lml9] {
    margin: 0;
    color: var(--motiva-text-secondary);
    line-height: var(--motiva-line-height-body);
}

p + p[b-5ri8h5lml9] {
    margin-top: var(--motiva-space-sm);
}

@media (max-width: 768px) {
    .doc-do-dont[b-5ri8h5lml9] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Motiva/MotivaComponentPrimitivesPage.razor.rz.scp.css */
/* ============================================================
   MotivaComponentPrimitivesPage — gallery-only styling.

   Nothing here belongs to the design system: these rules exist to give
   the Phase 3 primitives a realistic stage inside the gallery shell.
   The .motiva class on each stage is what makes the previews
   render with System Master tokens (the gallery itself is outside that
   scope) — see the "scope" section on the page.
   ============================================================ */

.sp-stage[b-6mbglxvwc0] {
    width: 100%;
    background: var(--motiva-surface-app-bg);
    border-radius: var(--motiva-radius-md);
    padding: var(--motiva-space-md);
}

/* MPageHeader carries its own 40px inline padding and is meant to bleed
   to the shell edge — the stage removes its own inset so the header is
   previewed at its true geometry. */
.sp-stage-bleed[b-6mbglxvwc0] {
    padding: 0;
    overflow: hidden;
}

.sp-stage-inline[b-6mbglxvwc0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--motiva-space-md);
}

.sp-stage-split[b-6mbglxvwc0] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--motiva-space-md);
}

/* Stacks the empty/filled MSearchField previews so both states are visible
   at once without either one stretching to the stage's full width. */
.sp-search-stack[b-6mbglxvwc0] {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-md);
}

@media (max-width: 720px) {
    .sp-stage-split[b-6mbglxvwc0] { grid-template-columns: minmax(0, 1fr); }
}

/* Placeholder for MPageHeader's ChildContent slot in the Hero demo. */
.sp-hero-slot[b-6mbglxvwc0] {
    border: 1px dashed var(--motiva-border-strong);
    border-radius: var(--motiva-radius-md);
    padding: var(--motiva-space-md);
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-muted);
    line-height: var(--motiva-line-height-body);
}

/* The Master's hero supporting line is a two-ended row, not plain text —
   this is what a real page would pass as SubtitleContent. */
.sp-hero-row[b-6mbglxvwc0] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--motiva-space-md);
}
/* /Pages/Motiva/MotivaComponentProgressPage.razor.rz.scp.css */
/* Shared "doc-*" pattern — identical across all five component pages
   (Button/Card/StatusBadge/ProgressBar/Modal) by design, per the Phase 4.1
   visual-consistency pass. The title/subtitle/purpose header itself was
   extracted into DocPageHeader (Phase 4.2) to remove that duplication;
   the smaller rules below (note/do-dont/lists/headings) still live per
   page, matching this project's existing CSS-isolation convention. */

.doc-note[b-l6ssdmrjfs] {
    color: var(--motiva-text-muted);
    font-size: var(--motiva-font-size-sm);
    line-height: var(--motiva-line-height-body);
    margin: var(--motiva-space-sm) 0 0;
}

.doc-do-dont[b-l6ssdmrjfs] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--motiva-space-md);
}

code[b-l6ssdmrjfs] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    direction: ltr;
    unicode-bidi: isolate;
}

ul[b-l6ssdmrjfs] {
    margin: 0;
    padding-inline-start: var(--motiva-space-lg);
    color: var(--motiva-text-secondary);
    line-height: var(--motiva-line-height-body);
}

li[b-l6ssdmrjfs] {
    margin-bottom: var(--motiva-space-xs);
}

h3[b-l6ssdmrjfs] {
    font-size: var(--motiva-font-size-h4);
    margin: 0 0 var(--motiva-space-sm);
}

.progress-stack[b-l6ssdmrjfs] {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-md);
    width: 100%;
}

.progress-live-demo[b-l6ssdmrjfs] {
    display: flex;
    align-items: center;
    gap: var(--motiva-space-md);
    width: 100%;
    flex-wrap: wrap;
}

.progress-range[b-l6ssdmrjfs] {
    flex: 1;
    min-width: 160px;
    accent-color: var(--motiva-color-indigo);
}

.progress-live-value[b-l6ssdmrjfs] {
    font-weight: var(--motiva-font-weight-bold);
    min-width: 3ch;
    text-align: center;
}

.progress-live-demo > :last-child[b-l6ssdmrjfs] {
    flex-basis: 100%;
}

@media (max-width: 768px) {
    .doc-do-dont[b-l6ssdmrjfs] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Motiva/MotivaFoundationsPage.razor.rz.scp.css */
.foundations-title[b-uv6zoyms06] {
    font-size: var(--motiva-font-size-h1);
    margin: 0 0 var(--motiva-space-sm);
}

.foundations-intro[b-uv6zoyms06] {
    max-width: 72ch;
    color: var(--motiva-text-secondary);
    line-height: var(--motiva-line-height-body);
    margin: 0 0 var(--motiva-space-lg);
}

.foundations-intro code[b-uv6zoyms06] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    direction: ltr;
    unicode-bidi: isolate;
}

.foundations-grid[b-uv6zoyms06] {
    display: grid;
    gap: var(--motiva-space-md);
    margin-bottom: var(--motiva-space-md);
}

.foundations-grid-2[b-uv6zoyms06] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foundations-grid-3[b-uv6zoyms06] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.foundations-grid-4[b-uv6zoyms06] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.foundations-grid-5[b-uv6zoyms06] { grid-template-columns: repeat(5, minmax(0, 1fr)); }

h3[b-uv6zoyms06] {
    font-size: var(--motiva-font-size-h4);
    margin: var(--motiva-space-md) 0 var(--motiva-space-sm);
}

h3:first-child[b-uv6zoyms06] {
    margin-top: 0;
}

ul[b-uv6zoyms06] {
    margin: 0;
    padding-inline-start: var(--motiva-space-lg);
    color: var(--motiva-text-secondary);
    line-height: var(--motiva-line-height-body);
}

li[b-uv6zoyms06] {
    margin-bottom: var(--motiva-space-xs);
}

code[b-uv6zoyms06] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    direction: ltr;
    unicode-bidi: isolate;
}

/* ── Colors: same bordered "sheet" family as the Typography spec sheet
   below, so the two most important Foundations sections read as one
   considered layout instead of Typography looking designed and Colors
   looking like a flat grid dump. ── */

.foundations-color-sheet[b-uv6zoyms06] {
    background: var(--motiva-surface-primary);
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-lg);
    padding: var(--motiva-space-lg);
}

.foundations-color-group[b-uv6zoyms06] {
    padding-top: var(--motiva-space-lg);
    border-top: 1px solid var(--motiva-border-subtle);
}

.foundations-color-group:first-child[b-uv6zoyms06] {
    padding-top: 0;
    border-top: none;
}

/* ── Typography spec sheet ───────────────────────────────────────────── */

.type-spec-sheet[b-uv6zoyms06] {
    background: var(--motiva-surface-primary);
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-lg);
    padding: 0 var(--motiva-space-lg);
}

.type-spec-row[b-uv6zoyms06] {
    display: grid;
    grid-template-columns: 64px 200px 1fr;
    align-items: center;
    gap: var(--motiva-space-md);
    padding: var(--motiva-space-md) 0;
    border-bottom: 1px solid var(--motiva-border-subtle);
}

.type-spec-row:last-child[b-uv6zoyms06] {
    border-bottom: none;
}

.type-spec-glyph[b-uv6zoyms06] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-secondary);
    color: var(--motiva-text-primary);
}

.type-spec-meta[b-uv6zoyms06] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.type-spec-meta strong[b-uv6zoyms06] {
    font-size: var(--motiva-font-size-sm);
    color: var(--motiva-text-primary);
}

.type-spec-meta code[b-uv6zoyms06] {
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-color-indigo);
}

.type-spec-facts[b-uv6zoyms06] {
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-muted);
}

.type-spec-example[b-uv6zoyms06] {
    margin: 0;
    color: var(--motiva-text-primary);
    overflow-wrap: break-word;
}

.type-weight-row[b-uv6zoyms06] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--motiva-space-md);
    margin-top: var(--motiva-space-md);
    padding: var(--motiva-space-sm) var(--motiva-space-md);
    background: var(--motiva-surface-secondary);
    border-radius: var(--motiva-radius-md);
    font-size: var(--motiva-font-size-sm);
}

.type-weight-row > span:first-child[b-uv6zoyms06] {
    color: var(--motiva-text-muted);
    font-size: var(--motiva-font-size-caption);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Spacing ──────────────────────────────────────────────────────────── */

.foundations-spacing-list[b-uv6zoyms06] {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-sm);
}

.foundations-spacing-row[b-uv6zoyms06] {
    display: flex;
    align-items: center;
    gap: var(--motiva-space-md);
}

.foundations-spacing-name[b-uv6zoyms06] {
    width: 3ch;
    font-weight: var(--motiva-font-weight-semibold);
}

.foundations-spacing-bar[b-uv6zoyms06] {
    height: var(--motiva-space-md);
    background: var(--motiva-gradient-signature);
    border-radius: var(--motiva-radius-sm);
}

/* ── Shadows ──────────────────────────────────────────────────────────── */

.foundations-shadow-card[b-uv6zoyms06] {
    background: var(--motiva-surface-primary);
    border-radius: var(--motiva-radius-lg);
    padding: var(--motiva-space-lg);
    text-align: center;
    font-weight: var(--motiva-font-weight-semibold);
    transition: transform var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard);
}

.foundations-shadow-card:hover[b-uv6zoyms06] {
    transform: translateY(-3px);
}

/* ── Motion ───────────────────────────────────────────────────────────── */

.foundations-motion-demo[b-uv6zoyms06] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--motiva-space-sm);
    background: var(--motiva-surface-primary);
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-md);
    padding: var(--motiva-space-md);
}

.foundations-motion-box[b-uv6zoyms06] {
    width: 100%;
    height: 40px;
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-gradient-signature);
    transform: scaleX(0.05);
    transform-origin: center;
    transition-property: transform;
    transition-timing-function: var(--motiva-motion-easing-standard);
}

.foundations-motion-box.is-active[b-uv6zoyms06] {
    transform: scaleX(1);
}

/* ── RTL demo ─────────────────────────────────────────────────────────── */

.foundations-rtl-row[b-uv6zoyms06] {
    display: flex;
    align-items: center;
    gap: var(--motiva-space-sm);
    margin-bottom: var(--motiva-space-md);
}

.foundations-rtl-row > span:nth-child(2)[b-uv6zoyms06] {
    flex: 1;
}

@media (max-width: 1024px) {
    .foundations-grid-4[b-uv6zoyms06],
    .foundations-grid-5[b-uv6zoyms06] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .type-spec-row[b-uv6zoyms06] {
        grid-template-columns: 56px 160px 1fr;
    }
}

@media (max-width: 768px) {
    .foundations-grid-2[b-uv6zoyms06],
    .foundations-grid-3[b-uv6zoyms06],
    .foundations-grid-4[b-uv6zoyms06],
    .foundations-grid-5[b-uv6zoyms06] {
        grid-template-columns: 1fr;
    }

    .type-spec-row[b-uv6zoyms06] {
        grid-template-columns: 48px 1fr;
    }

    .type-spec-example[b-uv6zoyms06] {
        grid-column: 1 / -1;
    }
}
/* /Pages/Motiva/MotivaIndexPage.razor.rz.scp.css */
/* Note on scoping: MCard/MStatusBadge/MButton/MProgressBar are child
   components, but the headings/paragraphs/links below are authored
   directly in this page's ChildContent — Blazor's CSS isolation
   attributes the *target* element of each selector to the component that
   literally wrote it in markup, so these plain (non ::deep) descendant
   selectors correctly reach content projected into MCard without needing
   ::deep. ::deep is only required when the target element itself belongs
   to another component's own template (e.g. NavLink's <a>). */

.motiva-hero-grid[b-ojek9kmx31] {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--motiva-space-lg);
    align-items: stretch;
    margin-bottom: var(--motiva-space-lg);
}

.motiva-hero-grid > *[b-ojek9kmx31] {
    display: flex;
    flex-direction: column;
}

.motiva-index-hero h1[b-ojek9kmx31] {
    font-size: var(--motiva-font-size-h1);
    line-height: var(--motiva-line-height-tight);
    letter-spacing: -0.02em;
    margin: var(--motiva-space-sm) 0;
}

.motiva-index-hero p[b-ojek9kmx31] {
    max-width: 56ch;
    font-size: var(--motiva-font-size-md);
    color: var(--motiva-text-secondary);
    line-height: var(--motiva-line-height-body);
    margin: 0 0 var(--motiva-space-md);
}

.motiva-hero-links[b-ojek9kmx31] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--motiva-space-sm);
    margin-top: auto;
    padding-top: var(--motiva-space-sm);
}

/* ── Hero showcase card: a composed, realistic mini-widget built entirely
   from real MButton/MStatusBadge/MProgressBar instances — the gallery's
   own "this is the design system" proof, not a fabricated mockup. ── */

.hero-showcase[b-ojek9kmx31] {
    justify-content: flex-start;
}

.hero-showcase-eyebrow[b-ojek9kmx31] {
    display: block;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--motiva-text-muted);
    margin-bottom: var(--motiva-space-md);
}

.hero-showcase-buttons[b-ojek9kmx31] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--motiva-space-sm);
}

.hero-showcase-divider[b-ojek9kmx31] {
    height: 1px;
    background: var(--motiva-border-subtle);
    margin: var(--motiva-space-md) 0;
}

.hero-showcase-head[b-ojek9kmx31] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--motiva-space-xs);
    margin-bottom: var(--motiva-space-sm);
}

.hero-showcase-meta[b-ojek9kmx31] {
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-muted);
}

.hero-showcase h3[b-ojek9kmx31] {
    margin: 0 0 var(--motiva-space-xs);
    font-size: var(--motiva-font-size-h4);
}

.hero-showcase p[b-ojek9kmx31] {
    margin: 0 0 var(--motiva-space-md);
    color: var(--motiva-text-secondary);
}

.hero-showcase-footer[b-ojek9kmx31] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--motiva-space-xs);
    margin-top: var(--motiva-space-md);
}

/* ── System Overview: compact, real-data stat tiles under the hero ── */

.system-overview[b-ojek9kmx31] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--motiva-space-sm);
    margin-bottom: var(--motiva-space-lg);
}

.stat-tile[b-ojek9kmx31] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
}

/* Every tile — numeric or qualitative — shares the same icon + value +
   label shape, so the row reads as one designed unit instead of two
   numbers next to three unrelated badges. */
.stat-icon[b-ojek9kmx31] {
    font-size: 20px;
    color: var(--motiva-color-indigo);
    margin-bottom: var(--motiva-space-xs);
}

.stat-value[b-ojek9kmx31] {
    font-size: var(--motiva-font-size-h3);
    font-weight: var(--motiva-font-weight-bold);
    color: var(--motiva-text-primary);
    line-height: 1;
    direction: ltr;
    unicode-bidi: isolate;
}

.stat-label[b-ojek9kmx31] {
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-muted);
}

/* ── Below-the-fold nav grid + recommended path ── */

.motiva-index-grid[b-ojek9kmx31] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--motiva-space-md);
    margin-bottom: var(--motiva-space-xl);
}

.motiva-index-grid h3[b-ojek9kmx31] {
    margin: 0 0 var(--motiva-space-xs);
}

.motiva-index-grid p[b-ojek9kmx31] {
    color: var(--motiva-text-secondary);
    margin: 0 0 var(--motiva-space-sm);
}

.motiva-index-grid a[b-ojek9kmx31] {
    color: var(--motiva-color-indigo);
    font-weight: var(--motiva-font-weight-semibold);
    text-decoration: none;
}

.motiva-index-grid a:hover[b-ojek9kmx31] {
    text-decoration: underline;
}

.motiva-index-about-grid[b-ojek9kmx31] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--motiva-space-md);
    align-items: start;
}

.motiva-index-about-grid h3[b-ojek9kmx31] {
    margin: 0 0 var(--motiva-space-sm);
}

.motiva-index-steps[b-ojek9kmx31] {
    margin: 0;
    padding-inline-start: var(--motiva-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-sm);
    color: var(--motiva-text-secondary);
    line-height: var(--motiva-line-height-body);
}

.motiva-index-steps a[b-ojek9kmx31] {
    color: var(--motiva-color-indigo);
    font-weight: var(--motiva-font-weight-semibold);
}

p[b-ojek9kmx31] {
    margin: 0;
    color: var(--motiva-text-secondary);
    line-height: var(--motiva-line-height-body);
}

p + p[b-ojek9kmx31] {
    margin-top: var(--motiva-space-sm);
}

code[b-ojek9kmx31] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    direction: ltr;
    unicode-bidi: isolate;
}

@media (max-width: 1024px) {
    .motiva-hero-grid[b-ojek9kmx31] {
        grid-template-columns: 1fr;
    }

    .motiva-index-grid[b-ojek9kmx31] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .system-overview[b-ojek9kmx31] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .motiva-index-grid[b-ojek9kmx31] {
        grid-template-columns: 1fr;
    }

    .system-overview[b-ojek9kmx31] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .motiva-index-about-grid[b-ojek9kmx31] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .system-overview[b-ojek9kmx31] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Motiva/MotivaPlaygroundPage.razor.rz.scp.css */
.doc-note[b-lgnmkxx5a8] {
    color: var(--motiva-text-muted);
    font-size: var(--motiva-font-size-sm);
    margin: var(--motiva-space-sm) 0 0;
}

.playground-picker[b-lgnmkxx5a8] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--motiva-space-sm);
    margin-bottom: var(--motiva-space-md);
}

.playground-layout[b-lgnmkxx5a8] {
    display: grid;
    /* Narrower, quieter controls column vs. Phase 4's 300px — the preview
       on the right is the star of this page, not the form beside it. */
    grid-template-columns: 240px 1fr;
    gap: var(--motiva-space-lg);
    align-items: start;
}

.playground-controls[b-lgnmkxx5a8] {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-md);
    /* Deliberately flat/quiet — no card border or shadow, so it recedes
       behind the emphasized preview stage instead of competing with it. */
    background: transparent;
    padding-inline-end: var(--motiva-space-sm);
    border-inline-end: 1px solid var(--motiva-border-subtle);
    position: sticky;
    top: var(--motiva-space-lg);
}

.playground-controls-label[b-lgnmkxx5a8] {
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--motiva-text-muted);
}

/* Groups controls by intent (appearance / state / content) so the panel
   reads as a short form, not a flat pile of fields. <fieldset>/<legend>
   give this real semantic grouping for assistive tech, not just a visual
   divider — reset to remove the browser's default fieldset chrome. */
.playground-group[b-lgnmkxx5a8] {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-xs);
    margin: 0;
    padding: var(--motiva-space-xs) 0 0;
    border: none;
    border-top: 1px solid var(--motiva-border-subtle);
    min-width: 0;
}

.playground-group:first-of-type[b-lgnmkxx5a8] {
    border-top: none;
    padding-top: 0;
}

.playground-group-label[b-lgnmkxx5a8] {
    display: block;
    padding: 0;
    margin: 0 0 var(--motiva-space-xs);
    font-size: var(--motiva-font-size-caption, 10px);
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--motiva-color-indigo);
    opacity: 0.75;
}

.playground-controls label[b-lgnmkxx5a8] {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-xs);
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-muted);
}

.playground-controls select[b-lgnmkxx5a8],
.playground-controls input[type="text"][b-lgnmkxx5a8],
.playground-controls input[type="number"][b-lgnmkxx5a8] {
    height: var(--motiva-control-height-sm);
    padding-inline: var(--motiva-space-sm);
    border-radius: var(--motiva-radius-sm);
    border: 1px solid var(--motiva-border-subtle);
    background: var(--motiva-surface-secondary);
    color: var(--motiva-text-primary);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-regular);
}

.playground-controls input[type="range"][b-lgnmkxx5a8] {
    accent-color: var(--motiva-color-indigo);
}

.playground-controls select:focus-visible[b-lgnmkxx5a8],
.playground-controls input:focus-visible[b-lgnmkxx5a8] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.playground-checkbox[b-lgnmkxx5a8] {
    flex-direction: row !important;
    align-items: center;
    gap: var(--motiva-space-sm) !important;
}

.playground-preview[b-lgnmkxx5a8] {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-md);
    min-width: 0;
}

@media (max-width: 1024px) {
    .playground-layout[b-lgnmkxx5a8] {
        grid-template-columns: 220px 1fr;
    }
}

@media (max-width: 768px) {
    .playground-layout[b-lgnmkxx5a8] {
        grid-template-columns: 1fr;
    }

    .playground-controls[b-lgnmkxx5a8] {
        position: static;
        border-inline-end: none;
        border-bottom: 1px solid var(--motiva-border-subtle);
        padding-inline-end: 0;
        padding-bottom: var(--motiva-space-md);
    }
}
/* /Pages/Notifications/NotificationsPage.razor.rz.scp.css */
/* ============================================================
   Notifications placeholder page — scoped (ntf-* prefix)
   Sprint-1 scope: header + empty state only. Reuses gradify
   theme tokens for visual consistency with other student pages.
   ============================================================ */

.ntf-page[b-jnw0djv4hd] {
    padding: 24px 28px 48px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Header ──────────────────────────────────────────────── */
/* The header SURFACE + subtitle are now <MPageHeaderCard> (the shared
   .motiva-panel card). Only the leading icon chip stays page-scoped — it is
   passed into the component's Leading slot. */

.ntf-header-icon[b-jnw0djv4hd] {
    width: 48px;
    height: 48px;
    border-radius: var(--g-radius-md);
    background: var(--g-accent-light);
    color: var(--g-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

/* ── Empty / coming-soon state ──────────────────────────────── */

.ntf-state[b-jnw0djv4hd] {
    padding: 40px 32px;
    text-align: center;
    background: var(--g-bg-surface);
    border: 1px solid var(--g-border-light);
    border-radius: var(--g-radius-md);
    color: var(--g-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.ntf-state .oi[b-jnw0djv4hd] {
    font-size: 28px;
    color: var(--g-text-muted);
}
/* /Pages/Planning/MilestoneDetailPopover.razor.rz.scp.css */
/* ── MilestoneDetailPopover ────────────────────────────────────────────────
   The Design's detail popover body (Motiva Calendar.dc.html:303–330):
   a type badge, then a label/value grid on hairline separators.
   ────────────────────────────────────────────────────────────────────────── */

.pl-md[b-w9vecrxw3g] {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-sm);
}

.pl-md-badge[b-w9vecrxw3g] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold);
    padding: 5px 10px;
    border-radius: var(--motiva-radius-full);
    color: var(--pl-st);
    background: var(--pl-st-bg);
}

.pl-md-done[b-w9vecrxw3g]    { --pl-st: var(--motiva-color-success); --pl-st-bg: var(--motiva-color-success-bg); }
.pl-md-active[b-w9vecrxw3g]  { --pl-st: var(--motiva-color-indigo);  --pl-st-bg: var(--motiva-color-brand-bg); }
.pl-md-late[b-w9vecrxw3g]    { --pl-st: var(--motiva-color-danger);  --pl-st-bg: var(--motiva-color-danger-bg); }
.pl-md-pending[b-w9vecrxw3g] { --pl-st: var(--motiva-text-muted);    --pl-st-bg: var(--motiva-surface-secondary); }

.pl-md-dot[b-w9vecrxw3g] {
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: var(--pl-st);
}

.pl-md-rows[b-w9vecrxw3g] {
    margin: 0;
    border-block-start: 1px solid var(--motiva-border-subtle);
}

.pl-md-row[b-w9vecrxw3g] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-block: 9px;
    border-block-end: 1px solid var(--motiva-border-subtle);
}

.pl-md-row dt[b-w9vecrxw3g] {
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-muted);
    inline-size: 92px;
    flex-shrink: 0;
}

.pl-md-row dd[b-w9vecrxw3g] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-primary);
    min-inline-size: 0;
    unicode-bidi: plaintext;
}

.pl-md-muted[b-w9vecrxw3g] {
    color: var(--motiva-text-muted) !important;
    font-weight: var(--motiva-font-weight-regular) !important;
}

.pl-md-items[b-w9vecrxw3g] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-block-start: var(--motiva-space-xs);
}

.pl-md-itemshead[b-w9vecrxw3g] {
    margin: 0 0 2px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-muted);
}

.pl-md-none[b-w9vecrxw3g] {
    margin: 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
    color: var(--motiva-text-muted);
}
/* /Pages/Planning/PersonalTaskPopover.razor.rz.scp.css */
/* ── PersonalTaskPopover ───────────────────────────────────────────────────
   Same row grid as MilestoneDetailPopover so the two detail surfaces read as
   one pattern. Kept neutral throughout — personal tasks are the workspace's
   quietest type and their detail view should not shout either.
   ────────────────────────────────────────────────────────────────────────── */

.pl-pt[b-8kdtktjlcw] {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-sm);
}

.pl-pt-badge[b-8kdtktjlcw] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold);
    padding: 5px 10px;
    border-radius: var(--motiva-radius-full);
    color: var(--motiva-text-secondary);
    background: var(--motiva-surface-secondary);
}

.pl-pt-rows[b-8kdtktjlcw] {
    margin: 0;
    border-block-start: 1px solid var(--motiva-border-subtle);
}

.pl-pt-row[b-8kdtktjlcw] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-block: 9px;
    border-block-end: 1px solid var(--motiva-border-subtle);
}

.pl-pt-row dt[b-8kdtktjlcw] {
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-muted);
    inline-size: 92px;
    flex-shrink: 0;
}

.pl-pt-row dd[b-8kdtktjlcw] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-primary);
    unicode-bidi: plaintext;
}

.pl-pt-note[b-8kdtktjlcw] {
    margin: 0;
    font-size: var(--motiva-font-size-caption, 12px);
    line-height: var(--motiva-line-height-body);
    color: var(--motiva-text-muted);
}

.pl-pt-error[b-8kdtktjlcw] {
    margin: 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-color-danger);
}
/* /Pages/Planning/PlanningAgendaList.razor.rz.scp.css */
/* ── PlanningAgendaList ────────────────────────────────────────────────────
   Mobile presentation. Uses the same chips and the same type palette as the
   grids, so nothing about an item reads differently on a phone.
   ────────────────────────────────────────────────────────────────────────── */

.pl-agenda[b-9z4vmhhvq3] {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-md);
}

.pl-agenda-day[b-9z4vmhhvq3] {
    background: var(--motiva-surface-primary);
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-md);
    padding: 10px 12px 12px;
}

/* Today gets the same brand wash the grids give its cell/column, so the
   "you are here" cue survives the layout change. */
.pl-agenda-day-today[b-9z4vmhhvq3] {
    background: var(--motiva-color-brand-bg);
    border-color: var(--motiva-color-indigo);
}

.pl-agenda-head[b-9z4vmhhvq3] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-block-end: 8px;
    margin-block-end: 8px;
    border-block-end: 1px solid var(--motiva-border-subtle);
}

.pl-agenda-date[b-9z4vmhhvq3] {
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-bold);
    color: var(--motiva-text-primary);
    letter-spacing: -0.2px;
}

.pl-agenda-name[b-9z4vmhhvq3] {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-muted);
}

.pl-agenda-day-today .pl-agenda-name[b-9z4vmhhvq3] {
    color: var(--motiva-color-indigo);
}

.pl-agenda-count[b-9z4vmhhvq3] {
    margin-inline-start: auto;
    font-size: var(--motiva-font-size-count, 11px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-muted);
    background: var(--motiva-surface-secondary);
    border-radius: var(--motiva-radius-full);
    padding: 1px 7px;
}

.pl-agenda-items[b-9z4vmhhvq3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* /Pages/Planning/PlanningFilterChips.razor.rz.scp.css */
/* ── PlanningFilterChips ───────────────────────────────────────────────────
   The final Calendar's legend row, at its own values
   (Motiva Student Calendar final.dc.html, LEGEND):

     row   flex · align center · gap 18px · wrap · padding 16px 8px 0
     item  inline-flex · gap 7px · 500 12px/1 · muted ink
     dot   8px circle in the type's ink

   THE REFERENCE'S LEGEND IS A CAPTION; THIS ONE IS THE PAGE'S TYPE FILTER.
   It is drawn as the legend and behaves as the control it already was:
   pressing an item scopes the grid to that type, pressing it again clears it.
   Demoting it to a caption would remove working behaviour, and adding a second
   row of filter chips beside it would say the same thing twice.

   The pressed state is the only thing the reference does not specify, so it
   reuses the system's own chip recipe: the type's tint at r999 with its ink,
   which is the same pairing the create form's type chips use.
   ────────────────────────────────────────────────────────────────────────── */

.pl-filters[b-vyo8ztnjsy] {
    padding: 16px 8px 0;
}

.pl-filters-track[b-vyo8ztnjsy] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.pl-fchip[b-vyo8ztnjsy] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: transparent;
    padding: 6px 2px;
    border-radius: var(--motiva-radius-full, 999px);
    font-family: inherit;
    font-size: var(--motiva-font-size-caption, 12px);
    line-height: 1;
    font-weight: var(--motiva-font-weight-medium);
    color: var(--g-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color      var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.pl-fchip:hover[b-vyo8ztnjsy] {
    color: var(--g-text-primary);
}

/* Pressed: the type's own tint and ink, padded out into a pill so the fill has
   something to sit in. The dot stays — it is what ties the row to the chips in
   the grid above it. */
.pl-fchip-on[b-vyo8ztnjsy] {
    padding-inline: 12px;
    background: var(--pl-tint, var(--motiva-surface-chip));
    color: var(--pl-ink, var(--g-text-primary));
    font-weight: var(--motiva-font-weight-semibold);
}

.pl-fchip:focus-visible[b-vyo8ztnjsy] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.pl-fdot[b-vyo8ztnjsy] {
    inline-size: 8px;
    block-size: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--pl-ink);
}

/* The count is metadata about the legend item, so it never outweighs it. */
.pl-fcount[b-vyo8ztnjsy] {
    font-size: var(--motiva-font-size-count, 11px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-subtle);
    font-variant-numeric: tabular-nums;
}

.pl-fchip-on .pl-fcount[b-vyo8ztnjsy] {
    color: inherit;
    opacity: 0.7;
}

@media (max-width: 767px) {
    .pl-filters[b-vyo8ztnjsy] {
        padding: 14px 0 0;
    }

    .pl-filters-track[b-vyo8ztnjsy] {
        gap: 12px;
        overflow-x: auto;
        flex-wrap: nowrap;
        /* The row is a horizontal scroller on a narrow column rather than a
           four-line stack — it is secondary chrome and must not push the
           agenda below the fold. */
        scrollbar-width: none;
    }

    .pl-filters-track[b-vyo8ztnjsy]::-webkit-scrollbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pl-fchip[b-vyo8ztnjsy] { transition: none; }
}
/* /Pages/Planning/PlanningItemChip.razor.rz.scp.css */
/* ── PlanningItemChip ──────────────────────────────────────────────────────
   The final Calendar's event chip, at its own values:
     padding 3px 6px · radius 7px · type tint fill · 600 11px/1.35 in type ink
     dot     5px circle of the same ink, flex:0 0 5px so it never squeezes
   (Motiva Student Calendar final.dc.html, `chip()`.)

   --pl-ink / --pl-tint are supplied inline by PlanningKinds.PaletteStyle so
   one palette serves every Planning component across CSS-isolation
   boundaries. See that method for the mapping and why it uses literals.
   ────────────────────────────────────────────────────────────────────────── */

.pl-chip[b-rtvymvpm0m] {
    position: relative;   /* anchors the overdue bar */
    inline-size: 100%;
    min-inline-size: 0;
    text-align: start;
    border: 0;
    border-radius: var(--motiva-radius-tag, 7px);
    padding: 2px 5px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--motiva-font-size-caption, 10.5px);
    line-height: 1.3;
    font-weight: var(--motiva-font-weight-semibold);
    /* The label carries the type, which is why the reference tints the text
       and not just the fill. */
    color: var(--pl-ink);
    background: var(--pl-tint);
    transition: filter var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

/* The reference's own hover: darken the whole chip rather than add an edge.
   A border would change the chip's box and shift every sibling by a pixel. */
.pl-chip:hover[b-rtvymvpm0m] {
    filter: brightness(0.96);
}

.pl-chip:focus-visible[b-rtvymvpm0m] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 1px;
}

.pl-chip-dot[b-rtvymvpm0m] {
    inline-size: 4px;
    block-size: 4px;
    flex: 0 0 4px;
    border-radius: 50%;
    background: var(--pl-ink);
}

.pl-chip-text[b-rtvymvpm0m] {
    min-inline-size: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pl-chip-title[b-rtvymvpm0m] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* dir=ltr on the span keeps 09:00 from being reordered by the RTL context;
   unicode-bidi:isolate stops it from dragging the separator with it. */
.pl-chip-time[b-rtvymvpm0m] {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}

.pl-chip-meta[b-rtvymvpm0m] {
    font-size: var(--motiva-font-size-caption, 10px);
    font-weight: var(--motiva-font-weight-regular);
    color: var(--motiva-text-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Relaxed (mobile agenda) ── */
.pl-chip-relaxed[b-rtvymvpm0m] {
    padding: 6px 8px;
    align-items: flex-start;
}

.pl-chip-relaxed .pl-chip-dot[b-rtvymvpm0m] {
    margin-block-start: 5px;
}

/* ── Completed ──
   Strikethrough on the title only, never on the metadata line: the type and
   status stay legible so a done item is still identifiable at a glance. */
.pl-chip-done .pl-chip-title[b-rtvymvpm0m] {
    text-decoration: line-through;
}

.pl-chip-done[b-rtvymvpm0m] {
    opacity: 0.55;
}

.pl-chip-check[b-rtvymvpm0m] {
    inline-size: 11px;
    block-size: 11px;
    flex-shrink: 0;
    color: var(--pl-ink);
}

/* ── Overdue ──
   An inline-start rule rather than a fill: the type tint already owns the
   chip's background, and overlaying danger on it would lose the type.

   Drawn as a pseudo-element, NOT as border-inline-start. A border participates
   in the chip's radius, so it renders as a curved arc that reads as a stray
   glyph. A positioned bar is immune to that. */
.pl-chip-overdue[b-rtvymvpm0m]::before {
    content: "";
    position: absolute;
    inset-block: 2px;
    inset-inline-start: 0;
    inline-size: 2.5px;
    border-radius: 2px;
    background: var(--motiva-color-rose);
}

.pl-chip-overdue[b-rtvymvpm0m] {
    padding-inline-start: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .pl-chip[b-rtvymvpm0m] { transition: none; }
}
/* /Pages/Planning/PlanningMonthGrid.razor.rz.scp.css */
/* ── PlanningMonthGrid ─────────────────────────────────────────────────────
   The final Calendar's month view, at its own values
   (Motiva Student Calendar final.dc.html, MONTH VIEW + `monthCells`):

     section padding  18px 20px 20px
     day names        600 12px/1 · subtle ink · centred · 10px below · no rules
     grid             block-start + inline-start rule at 7% ink
     cell             min-height 104px · padding 7px 7px 9px
                      block-end + inline-end rule at 7% ink
     out of month     rgba(27,26,34,.015)
     today            rgba(109,40,245,.035)
     date             600 12px/1 · #4A4657 (out of month: faint) · padding 4px 2px
     today's date     24px violet pill · 700 12px/1 · white
     items            column · gap 3px · 6px below the date
   ────────────────────────────────────────────────────────────────────────── */

/* A column, so that when the PAGE hands this section a height (see
   .pl-page-fill in StudentPlanningPage.razor.css) the day-name strip keeps
   its own size and the grid takes everything left over. With no height
   handed down it is identical to the block it used to be. */
.pl-month[b-fv8k52ns2z] {
    display: flex;
    flex-direction: column;
    padding: 14px 16px 16px;
}

.pl-month-head[b-fv8k52ns2z],
.pl-month-body[b-fv8k52ns2z] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* The reference's day-name strip carries no rules — it sits above the grid,
   not inside it, which is what lets the grid's own border close cleanly. */
.pl-month-head[b-fv8k52ns2z] {
    padding-block-end: 8px;
}

.pl-month-dayname[b-fv8k52ns2z] {
    font-size: var(--motiva-font-size-caption, 11.5px);
    line-height: 1;
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-subtle);
    text-align: center;
}

/* The grid closes its top and reading-start edge; every cell then draws only
   its block-end and inline-end rule, so no line is ever painted twice. */
.pl-month-body[b-fv8k52ns2z] {
    border-block-start: 1px solid var(--motiva-border-card);
    border-inline-start: 1px solid var(--motiva-border-card);
}

.pl-daycell[b-fv8k52ns2z] {
    position: relative;
    min-block-size: 88px;
    padding: 6px 6px 8px;
    border-block-end: 1px solid var(--motiva-border-card);
    border-inline-end: 1px solid var(--motiva-border-card);
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.pl-daycell:hover[b-fv8k52ns2z] {
    background: var(--g-bg-hover);
}

/* Neighbouring-month days: present for grid continuity, never carrying items. */
.pl-daycell-dim[b-fv8k52ns2z] {
    background: rgba(27, 26, 34, 0.015);
}

.pl-daycell-today[b-fv8k52ns2z],
.pl-daycell-today:hover[b-fv8k52ns2z] {
    background: rgba(109, 40, 245, 0.035);
}

/* The reference leaves the date at the cell's reading start — an inline-block
   at the top of the box, not pushed to the far edge. */
.pl-daynum[b-fv8k52ns2z] {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 3px 2px;
    font-size: var(--motiva-font-size-caption, 12px);
    line-height: 1;
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--g-text-secondary);
}

.pl-daycell-dim .pl-daynum[b-fv8k52ns2z] {
    color: var(--motiva-text-faint);
}

.pl-daynum-today[b-fv8k52ns2z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 21px;
    block-size: 21px;
    padding: 0 4px;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-color-violet);
    color: #fff;
    font-weight: var(--motiva-font-weight-bold);
}

/* z-index 1 lifts the real content above the full-cell create button, so a
   chip click reaches the chip and only bare space reaches the button. */
.pl-daycell-items[b-fv8k52ns2z] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-block-start: 4px;
}

/* ── Click-to-create ──
   Fills the cell behind its content. Invisible by default — the affordance is
   the cell's own hover wash, which this button is what triggers — and it shows
   a focus ring when tabbed to, so keyboard users can see where they are. */
.pl-daycell-add[b-fv8k52ns2z] {
    position: absolute;
    inset: 0;
    z-index: 0;
    inline-size: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    border-radius: 0;
}

.pl-daycell-add:focus-visible[b-fv8k52ns2z] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

/* The reference's overflow control is a quiet text link, not a filled chip —
   it must not compete with the items it is hiding. */
.pl-more[b-fv8k52ns2z] {
    align-self: flex-start;
    border: 0;
    background: transparent;
    padding: 2px 4px;
    font-family: inherit;
    font-size: var(--motiva-font-size-caption, 11px);
    line-height: 1.2;
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-subtle);
    cursor: pointer;
    transition: color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.pl-more:hover[b-fv8k52ns2z] {
    color: var(--motiva-color-violet);
}

.pl-more:focus-visible[b-fv8k52ns2z] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 1px;
    border-radius: 4px;
}

/* ── Responsive ──
   The seven columns are minmax(0,1fr) at every width, so they always divide
   the container rather than claiming a width of their own — the grid never
   contributes to page overflow, and what follows only tunes density.

   The grid holds its 7 columns down to 768px, shedding cell height on the way.
   Below that the page swaps to PlanningAgendaList entirely — seven columns
   under ~110px each cannot hold a Hebrew task title, and shrinking the type to
   make them fit is explicitly out of bounds. */
@media (max-width: 1439px) {
    .pl-month[b-fv8k52ns2z] { padding: 12px 12px 14px; }

    .pl-daycell[b-fv8k52ns2z] {
        min-block-size: 80px;
        padding: 5px 5px 7px;
    }
}

@media (max-width: 1279px) {
    .pl-daycell[b-fv8k52ns2z] {
        min-block-size: 74px;
    }
}

@media (max-width: 1023px) {
    .pl-month[b-fv8k52ns2z] { padding: 10px 8px 12px; }

    .pl-daycell[b-fv8k52ns2z] {
        min-block-size: 68px;
        padding: 4px 4px 6px;
    }

    .pl-month-dayname[b-fv8k52ns2z] { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .pl-daycell[b-fv8k52ns2z] { transition: none; }
    .pl-more[b-fv8k52ns2z]    { transition: none; }
}
/* /Pages/Planning/PlanningTimeline.razor.rz.scp.css */
/* ── PlanningTimeline ──────────────────────────────────────────────────────
   Design values (Motiva Calendar.dc.html:230–292):
     rail        230px, sticky at inline-start, own background, z-index 2
     group row   #FCFBFC fill, 40px min-height, 13px/600 title
     item row    38px min-height, 12.5px/500 title, hairline separator
     band        22px, pill, violet→teal gradient at 14/12% with a 14% edge
     diamond     13px square rotated 45°, 3px radius
     ring        11px, 2.5px border, white fill
   ────────────────────────────────────────────────────────────────────────── */

/* Same reason as .pl-week / .pl-month: a column so a height handed down from
   the page reaches .pl-tl-scroll, which is the element that already owns
   overflow here. Identical to the block it was when no height is handed down. */
.pl-clip[b-ainmslah8w] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: calc(var(--motiva-radius-lg) - 1px);
}

/* ── The scrolling track ──
   `direction: ltr` puts the vertical scrollbar on the PHYSICAL RIGHT edge —
   the same flip .rqw-list / .pws-body / .m-scroll use — and .pl-tl-inner
   restores `rtl` immediately, so the rail, the ticks, the bands and every
   marker are laid out exactly as before.

   THE ONE THING THIS ALSO MOVES is the horizontal scroll ORIGIN: a container's
   direction decides which end `scrollLeft: 0` means. That is harmless here
   because the track is sized never to overflow at a desktop width — the
   default "כל הפרויקט" scope is `inline-size: 100%` (see TrackSizing) and the
   month scope is a 900px floor inside a ~1500px card. The case where it would
   matter is exactly the case TrackSizing already exists to prevent: a
   scrollable full-project track opening parked at one end of the project. */
.pl-tl-scroll[b-ainmslah8w] {
    overflow-x: auto;
    overflow-y: hidden;
    direction: ltr;
}

.pl-tl-inner[b-ainmslah8w] {
    /* min-inline-size is set inline from the computed span. */
    direction: rtl;
    display: flex;
    flex-direction: column;
}

.pl-tl-row[b-ainmslah8w] {
    display: flex;
    align-items: stretch;
}

/* ── Rail ──
   position:sticky + inset-inline-start:0 keeps the label column pinned while
   the track scrolls. Under RTL this pins to the right, which is where the
   Design draws it. */
.pl-tl-rail[b-ainmslah8w] {
    inline-size: 200px;
    flex-shrink: 0;
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    min-inline-size: 0;
    background: var(--motiva-surface-primary);
    font-family: inherit;
    text-align: start;
    border: 0;
    padding: 7px 13px;
}

.pl-tl-rail-head[b-ainmslah8w] {
    align-items: flex-end;
    padding: 8px 13px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-muted);
}

.pl-tl-rail-group[b-ainmslah8w] {
    background: var(--motiva-surface-secondary);
    padding: 9px 13px;
    cursor: pointer;
}

.pl-tl-rail-item[b-ainmslah8w] {
    cursor: pointer;
    padding-inline-start: 30px; /* indent under the group above it */
}

.pl-tl-rail-item:hover[b-ainmslah8w],
.pl-tl-rail-group:hover[b-ainmslah8w] {
    background: var(--motiva-surface-hover);
}

.pl-tl-rail-item:focus-visible[b-ainmslah8w],
.pl-tl-rail-group:focus-visible[b-ainmslah8w],
.pl-tl-band:focus-visible[b-ainmslah8w],
.pl-tl-marker:focus-visible[b-ainmslah8w] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 1px;
}

.pl-tl-gdot[b-ainmslah8w] {
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pl-tl-gtitle[b-ainmslah8w] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Default tag: white paper under the Motiva gradient edge, dark ink.
   `--motiva-tag-brand-surface`, the product's one tag recipe. The edge is
   paid for out of the padding so the pill's outer box does not move. */
.pl-tl-nowtag[b-ainmslah8w] {
    font-size: var(--motiva-font-size-caption, 10px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
    background: var(--motiva-tag-brand-surface);
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-full);
    padding: 0 5px;
    flex-shrink: 0;
}

/* States the ungrouped sections honestly rather than leaving the reader to
   wonder why these rows sit outside every band. */
.pl-tl-loosenote[b-ainmslah8w] {
    font-size: var(--motiva-font-size-caption, 10px);
    color: var(--motiva-text-muted);
    white-space: nowrap;
    margin-inline-start: auto;
    flex-shrink: 0;
}

.pl-tl-icon[b-ainmslah8w] {
    inline-size: 12px;
    block-size: 12px;
    flex-shrink: 0;
    color: var(--pl-ink);
}

.pl-tl-ititle[b-ainmslah8w] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pl-tl-ititle-done[b-ainmslah8w] {
    text-decoration: line-through;
    color: var(--motiva-text-muted);
}

/* ── Track ── */
.pl-tl-track[b-ainmslah8w] {
    position: relative;
    flex: 1;
    min-inline-size: 0;
    min-block-size: 32px;
}

.pl-tl-headrow  .pl-tl-track[b-ainmslah8w],
.pl-tl-grouprow .pl-tl-track[b-ainmslah8w] {
    min-block-size: 34px;
}

.pl-tl-headrow[b-ainmslah8w] {
    border-block-end: 1px solid var(--motiva-border-subtle);
}

.pl-tl-grouprow[b-ainmslah8w] {
    background: var(--motiva-surface-secondary);
    border-block-end: 1px solid var(--motiva-border-subtle);
}

.pl-tl-itemrow[b-ainmslah8w] {
    border-block-end: 1px solid var(--motiva-border-subtle);
}

.pl-tl-gridline[b-ainmslah8w] {
    position: absolute;
    inset-block: 0;
    inline-size: 1px;
    background: var(--motiva-border-subtle);
    opacity: 0.55;
}

/* ── Today ──
   Net new. The Design tints a day number, which cannot survive a span of
   several months; a rule reads at every scale and is what actually answers
   "איפה אני נמצאת בציר הזמן". */
.pl-tl-todayline[b-ainmslah8w] {
    position: absolute;
    inset-block: 0;
    inline-size: 1.5px;
    background: var(--motiva-color-indigo);
    opacity: 0.42;
    z-index: 1;
}

.pl-tl-today[b-ainmslah8w] {
    position: absolute;
    inset-block-end: 4px;
    margin-inline-start: -4px;
}

.pl-tl-todaydot[b-ainmslah8w] {
    display: block;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--motiva-color-indigo);
}

/* ── Header ticks ── */
.pl-tl-tick[b-ainmslah8w] {
    position: absolute;
    inset-block-start: 8px;
}

.pl-tl-ticklabel[b-ainmslah8w] {
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-muted);
    white-space: nowrap;
    padding-inline-start: 5px;
}

/* ── Milestone band ──
   The Design's violet→teal pill. The progress fill is net new: the domain has
   a real DoneCount/TotalCount per milestone, and a band that shows only a
   date range would waste it. */
.pl-tl-band[b-ainmslah8w] {
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
    block-size: 18px;
    border-radius: var(--motiva-radius-full);
    display: flex;
    align-items: center;
    background: linear-gradient(92deg, rgba(124, 58, 237, 0.14), rgba(13, 156, 154, 0.12));
    border: 1px solid rgba(124, 58, 237, 0.14);
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    min-inline-size: 6px;
}

.pl-tl-bandfill[b-ainmslah8w] {
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0;
    background: rgba(124, 58, 237, 0.16);
    pointer-events: none;
}

.pl-tl-bandcap[b-ainmslah8w] {
    position: relative;
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
    padding-inline: 8px;
    white-space: nowrap;
}

/* Milestone status recolours the band edge only — the fill stays the Design's
   signature gradient so the timeline reads as one family. */
.pl-tl-st-done[b-ainmslah8w]    { --pl-st: var(--motiva-color-success); }
.pl-tl-st-active[b-ainmslah8w]  { --pl-st: var(--motiva-color-indigo); }
.pl-tl-st-late[b-ainmslah8w]    { --pl-st: var(--motiva-color-danger); }
/* text-muted, not border-strong. A NotStarted milestone that degraded to a
   marker (no OpenDate) is a lone 11px ring on a white track — at border-strong
   it was effectively invisible, which is the worst outcome for the one case
   that most needs to be noticed. */
.pl-tl-st-pending[b-ainmslah8w] { --pl-st: var(--motiva-text-muted); }

.pl-tl-gdot.pl-tl-st-done[b-ainmslah8w],
.pl-tl-gdot.pl-tl-st-active[b-ainmslah8w],
.pl-tl-gdot.pl-tl-st-late[b-ainmslah8w],
.pl-tl-gdot.pl-tl-st-pending[b-ainmslah8w] {
    background: var(--pl-st);
}

.pl-tl-band.pl-tl-st-done[b-ainmslah8w]    { border-color: var(--motiva-color-success); }
.pl-tl-band.pl-tl-st-active[b-ainmslah8w]  { border-color: var(--motiva-color-indigo); }
.pl-tl-band.pl-tl-st-late[b-ainmslah8w]    { border-color: var(--motiva-color-danger); }

/* ── Markers ──
   margin-inline-start:-N centres the glyph on its date under both directions;
   a transform would need mirroring under RTL, a logical margin does not. */
.pl-tl-marker[b-ainmslah8w] {
    position: absolute;
    inset-block-start: 50%;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.pl-tl-marker-diamond[b-ainmslah8w] {
    inline-size: 13px;
    block-size: 13px;
    margin-block-start: -6.5px;
    margin-inline-start: -6.5px;
    background: var(--pl-ink);
    transform: rotate(45deg);
    border-radius: 3px;
}

.pl-tl-marker-ring[b-ainmslah8w] {
    inline-size: 11px;
    block-size: 11px;
    margin-block-start: -5.5px;
    margin-inline-start: -5.5px;
    background: var(--motiva-surface-primary);
    border: 2.5px solid var(--pl-ink);
    border-radius: 50%;
}

/* A milestone degraded to a marker (no OpenDate) uses its status colour, not
   a type colour — it is not a task. */
.pl-tl-marker-ring.pl-tl-st-done[b-ainmslah8w],
.pl-tl-marker-ring.pl-tl-st-active[b-ainmslah8w],
.pl-tl-marker-ring.pl-tl-st-late[b-ainmslah8w],
.pl-tl-marker-ring.pl-tl-st-pending[b-ainmslah8w] {
    border-color: var(--pl-st);
}

.pl-tl-marker-done[b-ainmslah8w] {
    opacity: 0.45;
}

.pl-tl-marker-late[b-ainmslah8w] {
    box-shadow: 0 0 0 3px var(--motiva-color-danger-bg);
}

.pl-tl-empty[b-ainmslah8w] {
    padding: var(--motiva-space-xl) var(--motiva-space-lg);
}

/* ── Legend ── */
.pl-tl-legend[b-ainmslah8w] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-block-start: 12px;
}

.pl-tl-lg[b-ainmslah8w] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    color: var(--motiva-text-muted);
}

.pl-tl-lg-diamond[b-ainmslah8w] {
    inline-size: 12px;
    block-size: 12px;
    background: var(--motiva-color-indigo);
    transform: rotate(45deg);
    border-radius: 3px;
}

.pl-tl-lg-ring[b-ainmslah8w] {
    inline-size: 11px;
    block-size: 11px;
    background: var(--motiva-surface-primary);
    border: 2.5px solid var(--motiva-color-periwinkle);
    border-radius: 50%;
}

.pl-tl-lg-band[b-ainmslah8w] {
    inline-size: 26px;
    block-size: 12px;
    border-radius: var(--motiva-radius-full);
    border: 1px solid rgba(124, 58, 237, 0.35);
    background: linear-gradient(92deg, rgba(124, 58, 237, 0.14), rgba(13, 156, 154, 0.12));
}

/* The sentence that keeps the visualization honest about what it is. */
.pl-tl-lg-note[b-ainmslah8w] {
    font-size: var(--motiva-font-size-caption, 11.5px);
    color: var(--motiva-color-disabled-text);
}

/* ── Responsive ──
   The rail narrows before the track does; below 768px the page swaps to
   PlanningTimelineCards entirely rather than asking for horizontal drag on a
   phone. */
/* The rail is a fixed track in front of a track that has to fit the card, so
   narrowing it is what buys the whole-project scope its width back. */
@media (max-width: 1439px) {
    .pl-tl-rail[b-ainmslah8w] {
        inline-size: 172px;
        padding-inline: 11px;
    }
}

@media (max-width: 1023px) {
    .pl-tl-rail[b-ainmslah8w] {
        inline-size: 156px;
        padding-inline: 10px;
    }

    .pl-tl-rail-item[b-ainmslah8w] {
        padding-inline-start: 22px;
    }

    .pl-tl-loosenote[b-ainmslah8w] {
        display: none;
    }
}
/* /Pages/Planning/PlanningTimelineCards.razor.rz.scp.css */
/* ── PlanningTimelineCards ─────────────────────────────────────────────────
   Mobile ציר זמן. Card language matches the agenda list so the three views
   feel like one workspace on a phone.
   ────────────────────────────────────────────────────────────────────────── */

.pl-tlc[b-2q2z88j2iq] {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-md);
}

.pl-tlc-card[b-2q2z88j2iq] {
    background: var(--motiva-surface-primary);
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-md);
    padding: 12px 14px 14px;
    /* The status rule that the desktop band carries on its edge. */
    border-inline-start: 3px solid var(--pl-st, var(--motiva-border-strong));
}

.pl-tlc-done[b-2q2z88j2iq]    { --pl-st: var(--motiva-color-success); }
.pl-tlc-active[b-2q2z88j2iq]  { --pl-st: var(--motiva-color-indigo); }
.pl-tlc-late[b-2q2z88j2iq]    { --pl-st: var(--motiva-color-danger); }
.pl-tlc-pending[b-2q2z88j2iq] { --pl-st: var(--motiva-text-muted); }
.pl-tlc-loose[b-2q2z88j2iq]   { --pl-st: var(--motiva-border-subtle); }

.pl-tlc-head[b-2q2z88j2iq] {
    display: flex;
    align-items: center;
    gap: 8px;
    inline-size: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    font-family: inherit;
    text-align: start;
    cursor: pointer;
}

.pl-tlc-head-static[b-2q2z88j2iq] {
    cursor: default;
}

.pl-tlc-head:focus-visible[b-2q2z88j2iq] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.pl-tlc-dot[b-2q2z88j2iq] {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--pl-st);
    flex-shrink: 0;
}

.pl-tlc-title[b-2q2z88j2iq] {
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pl-tlc-now[b-2q2z88j2iq] {
    font-size: var(--motiva-font-size-caption, 10px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-color-indigo);
    background: var(--motiva-color-brand-bg);
    border-radius: var(--motiva-radius-full);
    padding: 1px 6px;
    flex-shrink: 0;
    margin-inline-start: auto;
}

.pl-tlc-range[b-2q2z88j2iq] {
    margin: 6px 0 10px;
    font-size: var(--motiva-font-size-caption, 12px);
    color: var(--motiva-text-secondary);
    /* Date ranges read left-to-right even inside RTL text. */
    unicode-bidi: plaintext;
}

.pl-tlc-nostart[b-2q2z88j2iq] {
    color: var(--motiva-text-muted);
}

.pl-tlc-counts[b-2q2z88j2iq] {
    margin: 6px 0 0;
    font-size: var(--motiva-font-size-count, 11.5px);
    color: var(--motiva-text-muted);
}

.pl-tlc-items[b-2q2z88j2iq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-block-start: 10px;
    padding-block-start: 10px;
    border-block-start: 1px solid var(--motiva-border-subtle);
}
/* /Pages/Planning/PlanningToolbar.razor.rz.scp.css */
/* ── PlanningToolbar ───────────────────────────────────────────────────────
   Values taken from the final Calendar's TITLE + CONTROLS row
   (Motiva Student Calendar final.dc.html):

     view tabs      track rgba(27,26,34,.045) · r999 · padding 4px · gap 2px
                    active  8px 16px · #fff · 700 13px · pill shadow
                    idle    8px 15px · muted ink · 500 13px
     period cluster rgba(255,255,255,.75) · 1px rgba(255,255,255,.9) · r999
                    padding 4px 6px · gap 6px
     nav button     30px circle · muted ink · hover 5% ink wash
     period label   dir=ltr · min-width 120px · centred · 700 13.5px
     divider        1px × 16px at 10% ink
     היום           7px 12px · r999 · 600 12.5px · hover violet
   ────────────────────────────────────────────────────────────────────────── */

.pl-toolbar[b-anjyrgbosx] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Segmented view switch ── */
.pl-seg[b-anjyrgbosx] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: var(--motiva-surface-chip);
    border-radius: var(--motiva-radius-full, 999px);
}

.pl-seg-btn[b-anjyrgbosx] {
    padding: 8px 15px;
    border-radius: var(--motiva-radius-full, 999px);
    border: 0;
    font-family: inherit;
    font-size: var(--motiva-font-size-control, 13px);
    line-height: 1;
    font-weight: var(--motiva-font-weight-medium);
    cursor: pointer;
    background: transparent;
    color: var(--g-text-muted);
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color      var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
    white-space: nowrap;
}

.pl-seg-btn:hover[b-anjyrgbosx] {
    color: var(--g-text-primary);
}

.pl-seg-on[b-anjyrgbosx],
.pl-seg-on:hover[b-anjyrgbosx] {
    padding-inline: 16px;
    background: var(--g-bg-surface);
    color: var(--g-text-primary);
    font-weight: var(--motiva-font-weight-bold);
    box-shadow: var(--motiva-shadow-pill);
}

/* ── Period cluster ── */
.pl-period-cluster[b-anjyrgbosx] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--motiva-radius-full, 999px);
}

/* With no arrows to sit between, the label needs no reserved width. */
.pl-period-cluster-static[b-anjyrgbosx] {
    padding-inline: 14px;
}

.pl-navbtn[b-anjyrgbosx] {
    inline-size: 30px;
    block-size: 30px;
    flex: 0 0 30px;
    border: 0;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--g-text-muted);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color      var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.pl-navbtn svg[b-anjyrgbosx] {
    inline-size: 13px;
    block-size: 13px;
}

.pl-navbtn:hover[b-anjyrgbosx] {
    background: var(--g-bg-hover);
    color: var(--g-text-primary);
}

.pl-navbtn:focus-visible[b-anjyrgbosx],
.pl-todaybtn:focus-visible[b-anjyrgbosx],
.pl-seg-btn:focus-visible[b-anjyrgbosx] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 1px;
}

/* min-inline-size holds the cluster's width steady as the label changes, so
   the arrows do not shuffle between "מרץ 2026" and "אוקטובר 2026". It is a
   RESERVATION, not a floor — the ch unit lets it give way on a narrow canvas
   rather than pinning the cluster at a width the row cannot afford. */
.pl-period[b-anjyrgbosx] {
    min-inline-size: min(120px, 14ch);
    text-align: center;
    font-size: var(--motiva-font-size-sm, 13.5px);
    line-height: 1;
    font-weight: var(--motiva-font-weight-bold);
    color: var(--g-text-primary);
    white-space: nowrap;
    unicode-bidi: isolate;
}

.pl-period-div[b-anjyrgbosx] {
    inline-size: 1px;
    block-size: 16px;
    flex: 0 0 1px;
    background: rgba(27, 26, 34, 0.1);
}

.pl-todaybtn[b-anjyrgbosx] {
    padding: 7px 12px;
    border: 0;
    background: transparent;
    border-radius: var(--motiva-radius-full, 999px);
    font-family: inherit;
    font-size: var(--motiva-font-size-control, 12.5px);
    line-height: 1;
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--g-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.pl-todaybtn:hover[b-anjyrgbosx] {
    color: var(--motiva-color-violet);
}

/* ── Timeline scope switch ──
   Secondary to the view switch beside it: same mechanism, quieter presence,
   so the two never compete for the same glance. */
.pl-seg-quiet .pl-seg-btn[b-anjyrgbosx] {
    padding: 7px 12px;
    font-size: var(--motiva-font-size-control, 12px);
}

.pl-seg-quiet .pl-seg-on[b-anjyrgbosx] {
    padding-inline: 13px;
}

.pl-scope[b-anjyrgbosx] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.pl-scope-label[b-anjyrgbosx] {
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-subtle);
    white-space: nowrap;
}

.pl-plus[b-anjyrgbosx] {
    font-size: var(--motiva-font-size-lg, 15px);
    line-height: 1;
    margin-inline-end: 5px;
}

/* ── Responsive ──
   Three steps, tightest last.

   1440 → the row sheds padding before it sheds anything else. This is the
   band where a 1280–1440 laptop lives, and it is what keeps the controls
   beside the title instead of wrapping under it.

   In the header's Actions slot the cluster wraps under the title once even
   the tightened row will not fit — that is the slot's own doing, and it is
   the reference's fallback order.

   768 → the groups go full-width and the action last, so nothing strands
   itself against an edge. */
@media (max-width: 1439px) {
    .pl-toolbar[b-anjyrgbosx] {
        gap: 8px;
    }

    .pl-seg-btn[b-anjyrgbosx] {
        padding-inline: 12px;
        font-size: 12.5px;
    }

    .pl-seg-on[b-anjyrgbosx] {
        padding-inline: 13px;
    }

    .pl-period-cluster[b-anjyrgbosx] {
        gap: 4px;
        padding-inline: 4px;
    }

    .pl-period[b-anjyrgbosx] {
        min-inline-size: min(104px, 13ch);
        font-size: 13px;
    }

    .pl-todaybtn[b-anjyrgbosx] {
        padding-inline: 10px;
    }
}

@media (max-width: 767px) {
    .pl-toolbar[b-anjyrgbosx] {
        gap: 10px;
        inline-size: 100%;
    }

    .pl-seg[b-anjyrgbosx],
    .pl-period-cluster[b-anjyrgbosx] {
        inline-size: 100%;
        justify-content: center;
    }

    .pl-seg-btn[b-anjyrgbosx] {
        flex: 1;
        padding-inline: 8px;
    }

    .pl-period[b-anjyrgbosx] {
        flex: 1;
        min-inline-size: 0;
    }

    .pl-toolbar-end[b-anjyrgbosx] {
        inline-size: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pl-navbtn[b-anjyrgbosx],
    .pl-todaybtn[b-anjyrgbosx],
    .pl-seg-btn[b-anjyrgbosx] { transition: none; }
}
/* /Pages/Planning/PlanningWeekView.razor.rz.scp.css */
/* ── PlanningWeekView ──────────────────────────────────────────────────────
   The final Calendar's week view, at its own values
   (Motiva Student Calendar final.dc.html, WEEK VIEW + `weekCols`):

     tracks        52px gutter + 7 equal columns, on all three bands
     day head      name 600 12px/1 subtle · date 700 13px/1 · gap 5px
     today's date  26px violet pill · 700 13px/1 · white
     כל היום       gutter label 500 10.5px/1 faint · cells min-height 30px
                   padding 3px 3px 6px · inline-start rule at 5% ink
                   band closed with a block-end rule at 7% ink
     hour scale    56px rows · 500 11px/1 subtle · end-aligned · nudged -5px
     column        inline-start rule at 6% ink · today rgba(109,40,245,.03)
     hour line     56px · block-start rule at 5% ink
     event block   r10 · padding 5px 8px · inset-inline 4px · type tint fill
                   3px inline-start bar in the type's ink · z 2
     now line      2px rose across the column · 8px dot at the start · z 4
   ────────────────────────────────────────────────────────────────────────── */

/* A column, so that when the PAGE hands this section a height the day head
   and the כל היום band keep their own size and the hour grid takes what is
   left (and scrolls inside itself). With no height handed down it is
   identical to the block it used to be. */
.pl-week[b-i6jq64h11j] {
    display: flex;
    flex-direction: column;
    padding: 14px 16px 16px;
}

.pl-week-head[b-i6jq64h11j],
.pl-week-allday[b-i6jq64h11j],
.pl-week-hours[b-i6jq64h11j] {
    display: grid;
    grid-template-columns: 44px repeat(7, minmax(0, 1fr));
}

/* ── Day head ── */
.pl-week-head[b-i6jq64h11j] {
    padding-block-end: 6px;
}

.pl-week-headcell[b-i6jq64h11j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.pl-week-dayname[b-i6jq64h11j] {
    font-size: var(--motiva-font-size-caption, 12px);
    line-height: 1;
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-subtle);
}

.pl-week-daynum[b-i6jq64h11j] {
    padding: 4px 2px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    line-height: 1;
    font-weight: var(--motiva-font-weight-bold);
    color: var(--g-text-secondary);
}

.pl-week-daynum-today[b-i6jq64h11j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 22px;
    block-size: 22px;
    padding: 0 4px;
    border-radius: var(--motiva-radius-full, 999px);
    background: var(--motiva-color-violet);
    color: #fff;
}

/* היום / מחר — the two labels that let the view answer "מה קורה לי השבוע"
   without the student parsing dates. Only ever two of the seven carry one. */
.pl-week-rel[b-i6jq64h11j] {
    font-size: var(--motiva-font-size-caption, 10.5px);
    line-height: 1;
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-color-violet);
}

/* ── Gutter ──
   One rule for all three bands so the hour scale, the כל היום label and the
   head's empty corner stay on the same 52px track. */
.pl-week-gutter[b-i6jq64h11j] {
    text-align: end;
    padding-inline-end: 8px;
}

.pl-week-gutter-label[b-i6jq64h11j] {
    align-self: center;
    font-size: var(--motiva-font-size-caption, 10.5px);
    line-height: 1;
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-faint);
}

/* ── כל היום band ── */
.pl-week-allday[b-i6jq64h11j] {
    border-block-end: 1px solid var(--motiva-border-card);
}

.pl-week-allday-cell[b-i6jq64h11j] {
    min-block-size: 26px;
    padding: 2px 2px 4px;
    border-inline-start: 1px solid rgba(27, 26, 34, 0.05);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* The scroll box around the hour grid. It owns the SCROLLBAR, which is why
   the grid itself could not — see the note in the .razor.

   The one thing it does own visually is 6px of head room. Every hour label is
   lifted `translateY(-5px)` so it sits ON its own gridline rather than under
   it, which means the FIRST label overhangs the top of the grid — and at
   scrollTop 0 a scroll box clips exactly that. Six pixels of padding inside
   the scroller puts 07:00 fully in view at the top of the scroll, and scrolls
   away with the content like any other padding. */
.pl-week-hoursbox[b-i6jq64h11j] {
    min-inline-size: 0;
    padding-block-start: 6px;
}

/* ── Hour grid ── */
.pl-week-hourlabel[b-i6jq64h11j] {
    block-size: 44px;
    font-size: var(--motiva-font-size-caption, 11px);
    line-height: 1;
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-subtle);
    /* Lifts the label onto its own gridline rather than under it. */
    transform: translateY(-5px);
    font-variant-numeric: tabular-nums;
}

.pl-week-col[b-i6jq64h11j] {
    position: relative;
    border-inline-start: 1px solid var(--g-border-light);
}

.pl-week-col-today[b-i6jq64h11j] {
    background: rgba(109, 40, 245, 0.03);
}

/* ── Hour slot ──
   Both the gridline and the click-to-create target. border-box is what keeps
   the row exactly 44px INCLUDING its rule — the event blocks are positioned
   against that number in C#, so a content-box row would drift a pixel per hour
   down the column and float every block off its slot. */
.pl-week-hourline[b-i6jq64h11j] {
    box-sizing: border-box;
    display: block;
    inline-size: 100%;
    block-size: 44px;
    padding: 0;
    border: 0;
    border-block-start: 1px solid rgba(27, 26, 34, 0.05);
    background: transparent;
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.pl-week-hourline:hover[b-i6jq64h11j] {
    background: rgba(109, 40, 245, 0.05);
}

.pl-week-hourline:focus-visible[b-i6jq64h11j] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

/* ── Event block ── */
.pl-week-event[b-i6jq64h11j] {
    position: absolute;
    inset-inline: 4px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    text-align: start;
    border: 0;
    border-inline-start: 3px solid var(--pl-ink);
    border-radius: 10px;
    padding: 4px 6px;
    background: var(--pl-tint);
    color: var(--pl-ink);
    font-family: inherit;
    cursor: pointer;
    transition: filter var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.pl-week-event:hover[b-i6jq64h11j] {
    filter: brightness(0.97);
}

.pl-week-event:focus-visible[b-i6jq64h11j] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 1px;
    z-index: 3;
}

.pl-week-event-time[b-i6jq64h11j] {
    align-self: flex-start;
    font-size: var(--motiva-font-size-caption, 10.5px);
    line-height: 1.2;
    font-weight: var(--motiva-font-weight-semibold);
    opacity: 0.75;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}

.pl-week-event-title[b-i6jq64h11j] {
    font-size: var(--motiva-font-size-caption, 11.5px);
    line-height: 1.2;
    font-weight: var(--motiva-font-weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
}

.pl-week-event-done[b-i6jq64h11j] {
    opacity: 0.55;
}

.pl-week-event-done .pl-week-event-title[b-i6jq64h11j] {
    text-decoration: line-through;
}

/* ── Now line ──
   Positioned once at render. It does not tick: a timer would need disposing on
   every navigation and the line is read as "roughly now", not as a clock. */
.pl-week-now[b-i6jq64h11j] {
    position: absolute;
    inset-inline: 0;
    z-index: 4;
    pointer-events: none;
    block-size: 2px;
    background: var(--motiva-color-rose);
}

.pl-week-now-dot[b-i6jq64h11j] {
    position: absolute;
    inset-inline-start: -3px;
    top: -3px;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--motiva-color-rose);
}

/* ── Responsive ──
   Seven columns hold to 768px; below that the page swaps to the agenda list.
   The gutter narrows first — the hour scale is the least information-dense
   thing on the row, so it gives before the columns do. */
/* The gutter is the first thing to give: it is a fixed track, so every pixel
   it releases goes straight to the seven fluid columns beside it. */
@media (max-width: 1439px) {
    .pl-week[b-i6jq64h11j] { padding: 12px 12px 14px; }

    .pl-week-head[b-i6jq64h11j],
    .pl-week-allday[b-i6jq64h11j],
    .pl-week-hours[b-i6jq64h11j] {
        grid-template-columns: 38px repeat(7, minmax(0, 1fr));
    }

    .pl-week-gutter[b-i6jq64h11j] { padding-inline-end: 5px; }

    .pl-week-event[b-i6jq64h11j] {
        inset-inline: 3px;
        padding: 3px 5px;
    }
}

@media (max-width: 1023px) {
    .pl-week[b-i6jq64h11j] { padding: 10px 8px 12px; }

    .pl-week-head[b-i6jq64h11j],
    .pl-week-allday[b-i6jq64h11j],
    .pl-week-hours[b-i6jq64h11j] {
        grid-template-columns: 34px repeat(7, minmax(0, 1fr));
    }

    .pl-week-gutter[b-i6jq64h11j] { padding-inline-end: 5px; }

    .pl-week-dayname[b-i6jq64h11j]   { font-size: 11px; }
    .pl-week-hourlabel[b-i6jq64h11j] { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .pl-week-event[b-i6jq64h11j],
    .pl-week-hourline[b-i6jq64h11j] { transition: none; }
}
/* /Pages/Planning/StudentPlanningPage.razor.rz.scp.css */
/* ── StudentPlanningPage ───────────────────────────────────────────────────
   Density budget on a 1440×900 laptop (~800px of content height):
       hero band          ~112px   (MPageHeader/Compact, controls in Actions)
       hero→content gap     16px
       legend (below grid)  ~28px
       ────────────────────────────────────
       chrome              ~156px  →  ~640px left for the calendar

   The controls no longer cost a row of their own: the final Calendar puts the
   view tabs, the period cluster and the primary action on the TITLE row, and
   MPageHeader's Actions slot is that position — which is what buys the month
   grid its 104px cells. A 6-row month at 104px plus the day-name strip is
   ~650px, so a full month lands inside the fold without shrinking type.

   That is also why the hero carries no KPI row here: the Tasks page spends
   ~90px on one, and that is exactly the budget the calendar needs.
   ────────────────────────────────────────────────────────────────────────── */

/* The white Core header card aligns to the page CONTENT width (no bleed); the
   toolbar bar and the calendar follow as siblings, each carrying its own gap. */
.pl-header[b-xpsgh6xizc] {
    margin-block-end: var(--motiva-space-md);
}

/* The planning toolbar — view tabs, period cluster and the primary action —
   sits directly beneath the header card, above the calendar. It was moved out
   of the header's Actions slot: a control cluster this wide belongs on its own
   row, not crammed into the title card. */
.pl-toolbar-bar[b-xpsgh6xizc] {
    margin-block-end: var(--motiva-space-md);
}

.pl-hero-ms[b-xpsgh6xizc] {
    color: var(--motiva-text-secondary);
    font-weight: var(--motiva-font-weight-semibold);
}

/* min-inline-size:0 at every level of the column. Without it a wide
   descendant — the Timeline's scrolling track most of all — contributes its
   own min-content width to the column and widens the shell, instead of
   scrolling inside its own container. */
.pl-page[b-xpsgh6xizc] {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

.pl-wide[b-xpsgh6xizc],
.pl-narrow[b-xpsgh6xizc] {
    min-inline-size: 0;
}

/* ── Viewport swap ──
   Both trees render; CSS picks one. Chosen over a measured breakpoint because
   Blazor would need JS interop plus a resize listener to know the width, and
   the first paint would flash the wrong layout until that resolved. */
.pl-narrow[b-xpsgh6xizc] { display: none; }

@media (max-width: 767px) {
    .pl-wide[b-xpsgh6xizc]   { display: none; }
    .pl-narrow[b-xpsgh6xizc] { display: block; }
}

/* ── Footnote ──
   Motiva's own, not the reference's: it names where team tasks are edited and
   why the official rows are read-only here. The reference has no equivalent —
   its items are all mock and all editable. */
.pl-foot[b-xpsgh6xizc] {
    margin: 14px 0 0;
    font-size: var(--motiva-font-size-caption, 11.5px);
    color: var(--motiva-color-disabled-text);
    line-height: var(--motiva-line-height-body);
}

.pl-foot a[b-xpsgh6xizc] {
    color: var(--motiva-text-secondary);
    text-decoration: underline;
}

.pl-foot a:hover[b-xpsgh6xizc] {
    color: var(--motiva-color-indigo);
}

/* ── Loading ──
   Mirrors the Tasks page's loading treatment so the two student pages settle
   identically. */
.pl-loading[b-xpsgh6xizc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: var(--motiva-space-2xl) 0;
    color: var(--motiva-text-muted);
    font-size: var(--motiva-font-size-sm);
}

.pl-spinner[b-xpsgh6xizc] {
    inline-size: 18px;
    block-size: 18px;
    border: 2px solid var(--motiva-border-subtle);
    border-block-start-color: var(--motiva-color-indigo);
    border-radius: 50%;
    animation: pl-spin-b-xpsgh6xizc 0.7s linear infinite;
}

@keyframes pl-spin-b-xpsgh6xizc {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .pl-spinner[b-xpsgh6xizc] { animation: none; }
}

/* ── The calendar takes the height the page is already given ───────────────
   WHAT USED TO OWN THE HEIGHT: nothing. `.app-shell-student` is a border-box
   flex column at min-height:100vh and `.app-shell-student .app-content` is
   already `flex: 1`, so the height was arriving at this page — but `.pl-page`
   and `.pl-wide` are both `flex: 0 1 auto`, so they sized to their content
   and handed the surplus back. The month grid's rows were then sized by one
   number, `.pl-daycell`'s min-block-size, and a 5-row month sat at 5×88px
   with the rest of the viewport unused below the footnote.

   The fix is the chain, not a height: page → wide → card → section → grid
   each grow, and `grid-auto-rows: minmax(min-content, 1fr)` divides whatever
   arrives EQUALLY between the rows. min-content as the floor rather than a
   literal keeps `.pl-daycell` the single source of truth for how short a row
   may get, including its own responsive steps — so this only ever adds
   height, never removes it, and a cell can never be squashed below what it
   is already allowed to be.

   ALL THREE VIEWS TAKE THE HEIGHT — but they spend it differently, and that
   difference is the one class `.pl-page-fit` carries.

     • MONTH grows into the surplus and never shrinks: its rows have a floor
       (`.pl-daycell`) and there is nothing to scroll inside a month, so on a
       viewport too short for the grid the PAGE scrolls, exactly as before.
       Month therefore does NOT get `.pl-page-fit`, and every rule below that
       is keyed to `.pl-month*` is untouched from the version that shipped.

     • WEEK and TIMELINE have a body that is naturally taller than any
       viewport — 12 hour rows at a fixed 44px, or one row per item — so they
       get `.pl-page-fit`, which lets every level of the column shrink
       (`min-block-size: 0`, the missing piece that makes a flex child refuse
       to go below its content) down to the viewport. The overflow then lands
       on ONE element inside the card: `.pl-week-hours` / `.pl-tl-scroll`.
       Nothing above it moves — not the shell, not the hero, not the toolbar,
       not the week's day head or its כל היום band — and no hour row is
       compressed to buy the fit.

   THE GATE. Below 1024px wide the page swaps to the agenda list anyway, and
   below 700px tall there is no surplus to hand out on any month — so the
   whole mechanism is skipped and the layout is byte-for-byte what it was.
   For month it is also a no-op, not a regression, at any height where the
   content already exceeds the viewport: flex only ever distributes FREE
   space. */

@media (min-width: 1024px) and (min-height: 700px) {
    .pl-page-fill[b-xpsgh6xizc] {
        flex: 1 1 auto;
        /* 8px + the shell's 20px canvas padding = a 28px bottom gutter, the
           same inset the shell uses left and right. */
        padding-block-end: 8px;
    }

    .pl-page-fill .pl-wide[b-xpsgh6xizc] {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    /* MCard is the section surface, so it is part of the chain: without it
       the card sizes to its content and `.pl-month` has nothing to fill. */
    .pl-page-fill .pl-wide[b-xpsgh6xizc]  .m-card {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    .pl-page-fill .pl-wide[b-xpsgh6xizc]  .pl-month {
        flex: 1 1 auto;
    }

    .pl-page-fill .pl-wide[b-xpsgh6xizc]  .pl-month-body {
        flex: 1 1 auto;
        grid-auto-rows: minmax(min-content, 1fr);
    }

    /* ── Week + timeline: fit the viewport, scroll inside the body ──
       min-block-size:0 at EVERY level. A flex child's automatic minimum is
       its content, so without this the hour grid pushes the card, the card
       pushes the page and the page pushes the shell past 100vh — which is
       exactly the outer scrollbar being removed here. Month deliberately does
       not carry this class and so keeps its content-based floor. */
    .pl-page-fit[b-xpsgh6xizc] {
        /* THE PIECE min-block-size:0 CANNOT DO.
           `.app-shell-student` is min-height:100vh, not height:100vh — it
           GROWS with its content, so letting the column shrink is not enough:
           nothing was asking it to. Size containment makes this element's
           intrinsic height 0 for its ancestors, so the shell stops measuring
           the hour grid, settles at 100vh, and hands the leftover back down
           through `flex: 1`. That is what removes the OUTER scrollbar; the
           rules below then decide which single element inside gets it.

           Only size is contained — not layout or paint — so absolutely
           positioned descendants (the event blocks, the now line, the
           timeline's sticky rail) keep the containing block they had. */
        contain: size;
        min-block-size: 0;
    }

    .pl-page-fit .pl-wide[b-xpsgh6xizc] {
        min-block-size: 0;
    }

    .pl-page-fit .pl-wide[b-xpsgh6xizc]  .m-card {
        min-block-size: 0;
    }

    /* Week: head and כל היום hold their natural height, the hour grid takes
       the rest and is the only thing that scrolls. Hour rows stay 44px — the
       block positions are computed in C# against that number. */
    .pl-page-fit .pl-wide[b-xpsgh6xizc]  .pl-week {
        flex: 1 1 auto;
        min-block-size: 0;
    }

    /* scrollbar-gutter on ALL THREE bands, not just the scroller.
       The head, the כל היום band and the hour grid are three separate grids
       on the same 44px + 7×1fr track definition, so they only line up while
       they are the same width — and giving one of them a classic scrollbar
       took 16px out of that one alone and walked the day columns off the
       hour columns by up to 16px. `overflow: hidden` makes the two static
       bands scroll containers too, purely so the gutter reserves on them too.

       BOTH-EDGES, not plain `stable`. The scroll box below is `direction:
       ltr` (that is what puts its bar on the physical right) while these two
       bands stay rtl, so a one-sided reservation would land on opposite
       physical edges and re-introduce the very drift it is here to remove.
       Reserving on both edges is the only value that is side-agnostic.
       Where scrollbars are overlays (macOS) it reserves nothing either way. */
    .pl-page-fit .pl-wide[b-xpsgh6xizc]  .pl-week-head,
    .pl-page-fit .pl-wide[b-xpsgh6xizc]  .pl-week-allday {
        flex: 0 0 auto;
        overflow: hidden;
        scrollbar-gutter: stable both-edges;
    }

    /* The BOX scrolls and carries the flip; the grid inside it stays rtl so
       the seven days keep their order. */
    .pl-page-fit .pl-wide[b-xpsgh6xizc]  .pl-week-hoursbox {
        flex: 1 1 auto;
        min-block-size: 0;
        overflow-y: auto;
        direction: ltr;
        scrollbar-gutter: stable both-edges;
    }

    .pl-page-fit .pl-wide[b-xpsgh6xizc]  .pl-week-hoursbox > .pl-week-hours {
        direction: rtl;
    }

    /* Timeline: .pl-tl-scroll already owns overflow-x for the track; it takes
       overflow-y too rather than a new wrapper. Its `overflow-y: hidden`
       default would CLIP the rows once the height is constrained, so it is
       explicitly auto here. The legend is a sibling of the card and keeps its
       own height. */
    .pl-page-fit .pl-wide[b-xpsgh6xizc]  .pl-clip {
        flex: 1 1 auto;
        min-block-size: 0;
    }

    .pl-page-fit .pl-wide[b-xpsgh6xizc]  .pl-tl-scroll {
        flex: 1 1 auto;
        min-block-size: 0;
        overflow-y: auto;
    }

    .pl-page-fit .pl-wide[b-xpsgh6xizc]  .pl-tl-legend {
        flex: 0 0 auto;
    }
}

/* Tighten the hero gap on short viewports — the one vertical value here that
   the Master does not fix, so the one that gives when height is scarce. */
@media (max-height: 820px) {
    .pl-header[b-xpsgh6xizc],
    .pl-toolbar-bar[b-xpsgh6xizc] {
        margin-block-end: var(--motiva-space-sm);
    }
}

@media (max-width: 767px) {
    .pl-foot[b-xpsgh6xizc] {
        margin-block-start: 12px;
    }
}
/* /Pages/ProjectHealth/ProjectHealthPage.razor.rz.scp.css */
/* Project Health — internal traffic-light overview for mentors / lecturers /
   admins. Visual language matches the management area (RTL, Hebrew). */

.ph-page[b-xfxpq4ryob] {
    /* No inline padding — the canvas shell's --motiva-canvas-padding-inline is
       the only left/right margin, matching the other core/Management pages.
       Flex column + gap gives the approved rhythm: white header → filter bar
       → table, none attached to the next. */
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 0;
    direction: rtl;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
/* Title is now the shared <MPageHeader Variant="Compact"> (approved 25px
   hierarchy). The filter chips are a control BAR directly beneath it. The old
   floating .ph-header / .ph-title rules are gone. */
.ph-summary[b-xfxpq4ryob] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* Spacing to the table is the .ph-page flex gap now — no own margin. */
}
.ph-chip[b-xfxpq4ryob] {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--g-bg-input, #fff);
    border: 1px solid var(--g-border-light, rgba(15,23,42,0.1));
    font-size: 0.85rem;
    color: var(--g-text, #0f172a);
}
.ph-chip strong[b-xfxpq4ryob] { font-weight: 700; }
.ph-chip-green[b-xfxpq4ryob]  { border-color: #bbf7d0; }
.ph-chip-orange[b-xfxpq4ryob] { border-color: #fed7aa; }
.ph-chip-red[b-xfxpq4ryob]    { border-color: #fecaca; }

/* ── Traffic-light dot + label ──────────────────────────────────────────── */
.ph-dot[b-xfxpq4ryob] {
    width: 10px; height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.ph-dot-green[b-xfxpq4ryob]  { background: #16a34a; }
.ph-dot-orange[b-xfxpq4ryob] { background: #f97316; }
.ph-dot-red[b-xfxpq4ryob]    { background: #dc2626; }

.ph-light[b-xfxpq4ryob] {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
}
.ph-light-dot[b-xfxpq4ryob] {
    width: 10px; height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.ph-status-green[b-xfxpq4ryob] {
    background: #ecfdf5;
    color: #166534;
}
.ph-status-green .ph-light-dot[b-xfxpq4ryob] { background: #16a34a; }

.ph-status-orange[b-xfxpq4ryob] {
    background: #fff7ed;
    color: #9a3412;
}
.ph-status-orange .ph-light-dot[b-xfxpq4ryob] { background: #f97316; }

.ph-status-red[b-xfxpq4ryob] {
    background: #fef2f2;
    color: #991b1b;
}
.ph-status-red .ph-light-dot[b-xfxpq4ryob] { background: #dc2626; }

/* ── State views ───────────────────────────────────────────────────────── */
.ph-loading[b-xfxpq4ryob], .ph-empty[b-xfxpq4ryob], .ph-error[b-xfxpq4ryob] {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; padding: 60px 24px;
    color: var(--g-text-muted, #64748b);
    font-size: 0.95rem;
}
.ph-empty-icon[b-xfxpq4ryob] { font-size: 28px; color: #16a34a; }
.ph-error[b-xfxpq4ryob]      { color: #b91c1c; }
.ph-spinner[b-xfxpq4ryob] {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 3px solid var(--g-border-light, rgba(15,23,42,0.12));
    border-top-color: var(--g-accent, #2563eb);
    animation: ph-spin-b-xfxpq4ryob 0.8s linear infinite;
}
@keyframes ph-spin-b-xfxpq4ryob { to { transform: rotate(360deg); } }

/* ── Table ──────────────────────────────────────────────────────────────── */
.ph-table-wrap[b-xfxpq4ryob] {
    overflow-x: auto;
    border: 1px solid var(--g-border-light, rgba(15,23,42,0.08));
    border-radius: var(--g-radius-md, 10px);
    background: var(--g-bg-input, #fff);
}
.ph-table[b-xfxpq4ryob] {
    width: 100%;
    border-collapse: collapse;
    direction: rtl;
}
.ph-table th[b-xfxpq4ryob], .ph-table td[b-xfxpq4ryob] {
    padding: 12px 14px;
    text-align: right;
    vertical-align: top;
    font-size: 0.92rem;
    color: var(--g-text, #0f172a);
    border-bottom: 1px solid var(--g-border-light, rgba(15,23,42,0.06));
}
.ph-table thead th[b-xfxpq4ryob] {
    font-weight: 600;
    color: var(--g-text-muted, #475569);
    background: var(--g-bg-soft, #f8fafc);
    white-space: nowrap;
}
.ph-table tbody tr:hover[b-xfxpq4ryob] { background: var(--g-bg-hover, #f1f5f9); }

.ph-status-col[b-xfxpq4ryob] { width: 1%; white-space: nowrap; }
.ph-delay-col[b-xfxpq4ryob]  { width: 1%; white-space: nowrap; text-align: center; }

.ph-project-num[b-xfxpq4ryob]   { font-weight: 700; }
.ph-project-title[b-xfxpq4ryob] { color: var(--g-text-muted, #475569); font-size: 0.85rem; }
.ph-students[b-xfxpq4ryob]      { color: var(--g-text-muted, #64748b); font-size: 0.8rem; margin-top: 2px; }
.ph-not-submitted[b-xfxpq4ryob] { color: var(--g-text-muted, #64748b); font-style: italic; font-size: 0.85rem; }

.ph-delay-badge[b-xfxpq4ryob] {
    display: inline-block;
    min-width: 36px;
    padding: 2px 10px;
    text-align: center;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
}
.ph-delay-zero[b-xfxpq4ryob] { color: var(--g-text-muted, #94a3b8); }

/* ──────────────────────────────────────────────────────────────────────
   Health filter chips — repurposed from read-only summary spans into
   toggleable buttons. Each chip filters the table to its own status;
   re-clicking the active chip (or the "ניקוי סינון" button) clears.
   ────────────────────────────────────────────────────────────────────── */

.ph-chip[b-xfxpq4ryob] {
    background: var(--g-bg-input, #fff);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.13s, border-color 0.13s, box-shadow 0.13s, transform 0.13s;
}
.ph-chip:hover[b-xfxpq4ryob] { background: var(--g-bg-hover, #f1f5f9); transform: translateY(-1px); }

/* Neutral "הכל" pill — first one in the row. */
.ph-chip-all[b-xfxpq4ryob] { border-color: var(--g-border-light, rgba(15,23,42,0.12)); color: var(--g-text-muted, #475569); }

/* Active state: bold border + matching tint background. */
.ph-chip--active[b-xfxpq4ryob] {
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.05);
    font-weight: 700;
}
.ph-chip-all.ph-chip--active[b-xfxpq4ryob]    { background: #e0e7ff; border-color: #6366f1; color: #312e81; }
.ph-chip-green.ph-chip--active[b-xfxpq4ryob]  { background: #dcfce7; border-color: #16a34a; color: #14532d; }
.ph-chip-orange.ph-chip--active[b-xfxpq4ryob] { background: #ffedd5; border-color: #f97316; color: #7c2d12; }
.ph-chip-red.ph-chip--active[b-xfxpq4ryob]    { background: #fee2e2; border-color: #dc2626; color: #7f1d1d; }

/* Clear-filter button — only shown when a filter is active. */
.ph-clear-btn[b-xfxpq4ryob] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: transparent;
    border: 1px dashed var(--g-border-light, rgba(15,23,42,0.2));
    color: var(--g-text-muted, #64748b);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.13s, color 0.13s;
}
.ph-clear-btn:hover[b-xfxpq4ryob] { background: var(--g-bg-hover, #f1f5f9); color: var(--g-text-primary, #0f172a); }
.ph-clear-btn .oi[b-xfxpq4ryob] { font-size: var(--motiva-font-size-caption, 10px); }

/* "Showing X of Y" scope line below the chip row when a filter is active. */
.ph-scope-line[b-xfxpq4ryob] {
    margin-bottom: 12px;
    padding: 8px 12px;
    background: var(--g-bg-hover, #f8fafc);
    border-radius: var(--g-radius-sm, 6px);
    font-size: 0.85rem;
    color: var(--g-text-muted, #475569);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ph-scope-line strong[b-xfxpq4ryob] { color: var(--g-text-primary, #0f172a); font-variant-numeric: tabular-nums; }
.ph-scope-status[b-xfxpq4ryob] {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
}
.ph-scope-status.ph-status-green[b-xfxpq4ryob]  { background: #dcfce7; color: #14532d; }
.ph-scope-status.ph-status-orange[b-xfxpq4ryob] { background: #ffedd5; color: #7c2d12; }
.ph-scope-status.ph-status-red[b-xfxpq4ryob]    { background: #fee2e2; color: #7f1d1d; }

/* Inline "הצג הכל" link inside the "no results" empty state. */
.ph-inline-link[b-xfxpq4ryob] {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--g-accent, #2563eb);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}
.ph-inline-link:hover[b-xfxpq4ryob] { color: var(--g-text-primary, #0f172a); }
/* /Pages/Projects/LecturerProjectsPage.razor.rz.scp.css */
/* ============================================================
   LecturerProjectsPage — הצוותים שלי
   Prefix: ltp-

   Visual source: הצוותים שלי מרצה 268.pdf (primary)
                  Motiva Lecturer Teams.dc.html (implementation)

   All spacing/color values are transcribed directly from the
   reference HTML or copied from motiva-tokens.css. No
   arbitrary values introduced.

   COLOUR — THREE ROLES, and they are המשימות שלי's
   ------------------------------------------------
   This page is the lecturer's other screen, and the two have to read
   as one product. LecturerTasksPage settled the vocabulary:

     Motiva gradient   brand identity, active state, restrained emphasis
     neutral / dark    ordinary workflow — the default for everything
     rose              a genuine exception: late, blocked, failed

   What was here instead was a FOURTH use of colour — category coding.
   The dot ran rose / blue / violet / teal down four states, the note
   repeated the same four on its ink, and the panel painted every
   pending item rose. Four hues for four categories is decoration: it
   tells a reader that two rows differ without telling them which one
   matters, and it spends rose — the only colour that can say "act on
   this" — on the two states that arrive every single day.

   So: rose survives on משימות באיחור, on נדרש תיקון and on the load
   error, because each names a real problem. Everything pending takes
   ONE restrained brand mark. Everything else is dark ink.
   ============================================================ */

/* ── Page shell ──────────────────────────────────────────── */

.ltp-page[b-ctboezugl6] {
    /* Flex column + gap is the approved Management/Tier rhythm: it puts a real,
       visible external gap between the white MPageHeaderCard and the content
       card below it (the header card previously sat flush against the list). */
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-block-end: 40px;
}

/* ── Title row ───────────────────────────────────────────── */
/* The title is now the shared <MPageHeader Variant="Compact"> (approved 25px
   core hierarchy); the old floating .ltp-title-row / .ltp-title-group / .ltp-h1
   rules are gone. The search pill below is kept — it now lives in the header's
   Actions slot. */

/* ── Search ──────────────────────────────────────────────── */

/* Pushed to the inline-end by auto margin — in RTL this is
   the left side (the reading end), matching the reference. */
.ltp-search-wrap[b-ctboezugl6] {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.90);
    border-radius: var(--motiva-radius-full);
    padding: 6px 8px 6px 6px;
}

.ltp-search-icon[b-ctboezugl6] {
    flex: 0 0 auto;
    color: #9B96A8;
}

.ltp-search-input[b-ctboezugl6] {
    border: none;
    background: transparent;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-md);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1;
    color: var(--motiva-text-primary);
    width: 220px;
    padding: 6px 0;
    /* remove native search chrome */
    -webkit-appearance: none;
    appearance: none;
}

.ltp-search-input[b-ctboezugl6]::placeholder { color: #9B96A8; }

.ltp-search-input:focus[b-ctboezugl6] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 0;
    border-radius: 2px;
}

/* ── List surface ──────────────────────────────────────────
   THE SURFACE IS `.motiva-panel` (motiva-base.css), worn in the markup.
   This element is not an MCard, so the previous pass's migration of
   MCard could never reach it and it kept the pre-panel recipe —
   rgba(255,255,255,.66) behind a white hairline, i.e. the grey-white
   this whole effort exists to remove. Only the inset is stated here. */
.ltp-list[b-ctboezugl6] {
    padding: 20px 26px 14px;
}

/* ── Filter bar ──────────────────────────────────────────── */

.ltp-filter-row[b-ctboezugl6] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0 0 10px;
}

/* Pill-track container — same visual as the nav pill track */
.ltp-chips[b-ctboezugl6] {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--motiva-surface-chip, rgba(27, 26, 34, 0.045));
    border-radius: var(--motiva-radius-full);
    padding: 4px;
    flex-wrap: wrap;
}

.ltp-chip[b-ctboezugl6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    border-radius: var(--motiva-radius-full);
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-caption, 13px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1;
    color: #6B6779;
    white-space: nowrap;
    transition: color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.ltp-chip:hover[b-ctboezugl6] { color: #1B1A22; }

.ltp-chip-active[b-ctboezugl6] {
    padding-inline: 16px;
    background: var(--motiva-surface-primary, #fff);
    color: #1B1A22;
    font-weight: var(--motiva-font-weight-bold);
    box-shadow: var(--motiva-shadow-pill, 0 1px 2px rgba(27, 26, 34, 0.08));
}

/* NO `.ltp-chip-badge` RULE. The badge on "דורש תשומת לב" is
   `.motiva-count` from motiva-base.css — the product-wide bubble: a
   translucent sweep of the signature gradient carrying DARK ink.

   The private rule that stood here was the fifth copy of the recipe
   motiva-base.css was written to end, and it was the OLD recipe: solid
   violet, white number. That reads as a notification badge — something
   you must clear — when the number only ever answers "how many are in
   here". MFilterTabs already reaches המשימות שלי through the shared
   class; this reaches it directly, and the two can no longer drift. */

.ltp-count[b-ctboezugl6] {
    margin-inline-start: auto;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-meta);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1;
    color: #9B96A8;
}

/* ── Team rows ───────────────────────────────────────────── */

.ltp-row[b-ctboezugl6] {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px 4px;
    border: none;
    border-bottom: 1px solid rgba(27, 26, 34, 0.06);
    background: transparent;
    cursor: pointer;
    text-align: start;
    color: #1B1A22;

    margin-inline: -6px;
    padding-inline: 10px;
    border-radius: var(--motiva-radius-row, var(--motiva-radius-md));
    scroll-margin-top: 80px;
    transition:
            background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
            box-shadow var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

/* ── Hover is AMBIENT, and repaints no text ──────────────────
   The row used to turn every word in it violet. That is the loudest
   thing colour can do on this page, spent on the cheapest event —
   moving a pointer — and it put brand hue on a team name, a mentor
   name and a status phrase all at once, none of which is a brand
   object.

   This is המשימות שלי's row hover, taken whole: the brand hue at .038
   as a wash and at .07 as a hairline, both drawn with inset box-shadow
   so the row does not shift by a pixel. The surface says
   "interactive"; the words say what they said at rest. */
.ltp-row:hover[b-ctboezugl6] {
    background: rgba(109, 40, 245, 0.038);
    box-shadow: inset 0 0 0 1px rgba(109, 40, 245, 0.07);
}

.ltp-row:focus-visible[b-ctboezugl6] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

.ltp-row-last[b-ctboezugl6] { border-bottom: none; }

/* ── 1. Status dot — SEVERITY, three rungs ───────────────────
   The dot does carry a real state (DotClass reads the same overdue >
   pending > ok priority the note does), so it is mapped rather than
   flattened — but onto three rungs, not four categories.

     late   rose, and only here on a row
     attn   the signature gradient — "waiting on you", not a problem
     ok     a neutral tick, present so the column still scans

   Blue-for-submission and violet-for-request are gone: they were two
   hues for one meaning, and the note column already says which. */
.ltp-dot[b-ctboezugl6] {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
}

.ltp-dot-late[b-ctboezugl6] { background: var(--motiva-color-rose); }
/* Solid violet, not the gradient. Measured on the census dot this rule
   is twinned with: the signature gradient's middle stop is #2E63E8 and
   an 8px box shows little else, so the "brand" rung rendered blue — a
   fourth hue, on a page whose whole point is that there are three. */
.ltp-dot-attn[b-ctboezugl6] { background: var(--motiva-color-violet); }

/* Quiet, not invisible. A healthy team is the majority of the list, so
   this is the colour the column mostly IS — faint enough that the two
   rungs above it are what the eye finds. */
.ltp-dot-ok[b-ctboezugl6]   { background: var(--motiva-text-faint, #B4B0BF); }

/* 2. Team + project */
.ltp-team-col[b-ctboezugl6] {
    flex: 1.2 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ltp-team-name[b-ctboezugl6] {
    display: block;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-item);
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ltp-team-project[b-ctboezugl6] {
    display: block;
    margin-top: 4px;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1;
    color: #6B6779;
}

/* 3. Mentor */
.ltp-mentor-col[b-ctboezugl6] {
    flex: 0 0 130px;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-meta);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1;
    color: #6B6779;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 4. Stage pill */
.ltp-stage-col[b-ctboezugl6] {
    flex: 0 0 118px;
    display: inline-flex;
}

.ltp-stage-pill[b-ctboezugl6] {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: var(--motiva-radius-full);
    background: rgba(27, 26, 34, 0.05);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: #4A4657;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 118px;
}

.ltp-stage-empty[b-ctboezugl6] {
    color: #9B96A8;
    background: transparent;
}

/* ── 5. Status note ──────────────────────────────────────────
   Ink follows the dot beside it. "משימות באיחור · 2" keeps rose because
   the colour is carrying information there; the two pending phrases go
   dark, where the note's own semibold weight is already enough to hold
   them against the muted metadata around it; and "מתקדם כרגיל" — the
   line that means nothing needs doing — recedes. */
.ltp-note-col[b-ctboezugl6] {
    flex: 1.2 1 0;
    min-width: 0;
    text-align: left;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ltp-note-late[b-ctboezugl6] { color: var(--motiva-color-rose-ink); }
.ltp-note-attn[b-ctboezugl6] { color: var(--motiva-text-primary); }
.ltp-note-ok[b-ctboezugl6]   { color: var(--motiva-text-muted); }

/* 6. Chevron */
.ltp-chevron[b-ctboezugl6] {
    flex: 0 0 auto;
    color: #B4B0C0;
    transition: color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

/* Darkens rather than tints. It is the row's only glyph, so it can carry
   the hover on its own — and a violet chevron beside dark text was the
   page contradicting itself about whether hovering recolours things. */
.ltp-row:hover .ltp-chevron[b-ctboezugl6] { color: var(--motiva-text-primary); }

/* ── Empty / loading / error ─────────────────────────────── */

.ltp-empty-msg[b-ctboezugl6] {
    margin: 0;
    padding: 24px 4px 18px;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1;
    color: #9B96A8;
}

.ltp-clear-btn[b-ctboezugl6] {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-control, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    color: #4A4657;
    text-decoration: underline;
}

.ltp-loading[b-ctboezugl6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-block: 80px;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-lg, 15px);
    color: #6B6779;
}

.ltp-spinner[b-ctboezugl6] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(27, 26, 34, 0.12);
    border-top-color: var(--motiva-color-violet);
    border-radius: 50%;
    flex-shrink: 0;
    animation: ltp-spin-b-ctboezugl6 0.7s linear infinite;
}

.ltp-spinner-sm[b-ctboezugl6] {
    width: 14px;
    height: 14px;
}

@keyframes ltp-spin-b-ctboezugl6 { to { transform: rotate(360deg); } }

.ltp-error[b-ctboezugl6] {
    padding: 40px 0;
    text-align: center;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-lg, 15px);
    color: var(--motiva-color-rose);
}

/* ── Overlay ─────────────────────────────────────────────── */

/*
   z-index 110 > nav bar z-index 100 — nav is covered and
   non-interactive while the panel is open.
*/
.ltp-overlay[b-ctboezugl6] {
    position: fixed;
    inset: 0;
    background: rgba(27, 26, 34, 0.16);
    z-index: 110;
    pointer-events: auto;
}

/* ── Detail panel ────────────────────────────────────────── */

/*
   Centered modal — same pattern as Motiva detail popups elsewhere.
   Sits above the overlay (z-index 111).
   max-height + overflow-y: auto give internal scrolling for long content.
*/
.ltp-panel[b-ctboezugl6] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(480px, 92vw);
    max-height: 85vh;
    z-index: 111;
    /* A MODAL, not a page panel — position:fixed above a scrim — so it keeps
       the deeper modal lift rather than the panel drop. Only the two literals
       move onto tokens: --motiva-radius-xl IS 26px in this scope (the modal /
       side-panel step) and the fill is the one white. */
    border-radius: var(--motiva-radius-xl, 26px);
    background: var(--motiva-panel-surface, #fff);
    box-shadow: var(--motiva-shadow-lg,
                    0 2px 4px rgba(27, 26, 34, 0.06),
                    0 30px 60px -30px rgba(27, 26, 34, 0.50));
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* ── Panel header ────────────────────────────────────────── */

.ltp-panel-head[b-ctboezugl6] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── The stage chip — the same object as the row's stage pill ─
   It is the team's current milestone, which is exactly what
   `.ltp-stage-pill` shows in the list, so it takes the list's own
   treatment: neutral fill, secondary ink. It was violet-on-violet, and
   that put brand colour on an ordinary workflow value AND made it
   compete with the alert chip 8px to its left — the one element in the
   header that is meant to be the thing you see first.

   One accent per header. The stage says where the team is; the chip
   beside it says whether that is a problem. */
.ltp-panel-stage-chip[b-ctboezugl6] {
    display: inline-flex;
    padding: 6px 13px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-color-neutral-bg);
    color: var(--motiva-text-secondary);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 700;
    line-height: 1;
}

/* ── The alert chip — TWO chips, because there are two facts ──
   One rose chip served all three of PanelAlert's states, so a team with
   an unread request looked exactly like a team that had missed a
   deadline. Red on a screen where most teams show it is not a warning,
   it is wallpaper.

   `-late` is the real one and keeps the rose. `-attn` is the two
   ordinary pending states, and takes MStatusBadge's own `Attention`
   recipe verbatim — the signature gradient at a wash alpha, dark ink,
   a faint brand ring. That is the treatment המשימות שלי already uses
   for "this has been waiting and is still not late", and the reason it
   exists there is the reason it is needed here: a submission and a
   request have no deadline in this product, so red asserts something
   the data does not say. */
.ltp-panel-alert-chip[b-ctboezugl6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--motiva-radius-full);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
}

.ltp-panel-alert-late[b-ctboezugl6] {
    background: var(--motiva-color-danger-bg);
    color: var(--motiva-color-rose-ink);
}

.ltp-panel-alert-attn[b-ctboezugl6] {
    background: linear-gradient(to left,
        rgba(109, 40, 245, 0.10),
        rgba(46, 99, 232, 0.07) 60%,
        rgba(15, 168, 194, 0.10));
    color: var(--motiva-text-primary);
    box-shadow: inset 0 0 0 1px rgba(109, 40, 245, 0.13);
}

.ltp-panel-alert-dot[b-ctboezugl6] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ltp-panel-alert-late .ltp-panel-alert-dot[b-ctboezugl6] { background: var(--motiva-color-rose); }
.ltp-panel-alert-attn .ltp-panel-alert-dot[b-ctboezugl6] { background: var(--motiva-color-violet); }

.ltp-panel-close[b-ctboezugl6] {
    margin-inline-start: auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(27, 26, 34, 0.06);
    color: #9B96A8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.ltp-panel-close:hover[b-ctboezugl6] {
    background: rgba(27, 26, 34, 0.12);
    color: #1B1A22;
}

/* ── Panel identity ──────────────────────────────────────── */

.ltp-panel-name[b-ctboezugl6] {
    margin: 16px 0 0;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-h2, 22px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #1B1A22;
}

.ltp-panel-project[b-ctboezugl6] {
    margin: 6px 0 0;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.4;
    color: #6B6779;
}

/* ── Panel detail rows ───────────────────────────────────── */

.ltp-panel-rows[b-ctboezugl6] {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(27, 26, 34, 0.06);
}

.ltp-panel-row[b-ctboezugl6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(27, 26, 34, 0.06);
}

.ltp-panel-row-last[b-ctboezugl6] { border-bottom: none; }

.ltp-panel-row-loading[b-ctboezugl6] {
    justify-content: center;
    padding-block: 14px;
}

.ltp-panel-label[b-ctboezugl6] {
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: #9B96A8;
    width: 92px;
    flex: 0 0 92px;
}

.ltp-panel-val[b-ctboezugl6] {
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.4;
    color: #1B1A22;
}

.ltp-panel-muted[b-ctboezugl6] { color: #9B96A8; }

/* Mentor row with inline avatar */
.ltp-panel-mentor-val[b-ctboezugl6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Identity, so it is genuinely brand — and therefore the brand's own
   avatar gradient, which is what MotivaTopNav and the student profile
   already draw. A violet-tinted disc with violet initials was a third
   flavour of "some violet", indistinguishable at 24px from the status
   tints it sits under. */
.ltp-mentor-avatar[b-ctboezugl6] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--motiva-gradient-avatar);
    color: #fff;   /* the approved exception: no token means "on brand gradient" */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--motiva-font-family);
    font-size: 10px;
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    flex-shrink: 0;
}

/* Stage row. A milestone name is a value, not an action — it reads in
   the same ink as every other value in this column. */
.ltp-panel-stage-val[b-ctboezugl6] {
    color: var(--motiva-text-primary);
    font-weight: var(--motiva-font-weight-semibold);
}

.ltp-panel-pct[b-ctboezugl6] { color: var(--motiva-text-muted); font-weight: var(--motiva-font-weight-medium); }

/* Submission row */
.ltp-panel-sub[b-ctboezugl6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ltp-panel-sub-title[b-ctboezugl6] {
    display: block;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.4;
}

/* One rose, for the one state that names a problem. ממתין לאישורך was
   blue and אושר teal; both are the process working, and colouring each
   outcome separately made the hue a second copy of the label. */
.ltp-panel-sub-state[b-ctboezugl6] {
    display: block;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.3;
}

.ltp-panel-sub-late[b-ctboezugl6]   { color: var(--motiva-color-rose-ink); }
.ltp-panel-sub-normal[b-ctboezugl6] { color: var(--motiva-text-secondary); }

/* Request link */
.ltp-panel-req-link[b-ctboezugl6] {
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.4;
    color: var(--motiva-color-violet);
    text-decoration: underline;
}

/* Underline on hover, not a colour change. The link is the one element
   in the panel that is legitimately brand-coloured at rest — it is an
   affordance, the same call `.m-section-heading-link` makes on המשימות
   שלי — so hover reinforces it rather than repainting it dark. */
.ltp-panel-req-link:hover[b-ctboezugl6] {
    color: var(--motiva-color-violet);
    text-decoration: underline;
}

/* ── Panel footer ────────────────────────────────────────── */

.ltp-panel-footer[b-ctboezugl6] {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* RTL: flex-end = physical left */
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 20px;
}

.ltp-panel-btn-outline[b-ctboezugl6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--motiva-radius-full);
    border: 1.5px solid rgba(27, 26, 34, 0.12);
    color: #4A4657;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    text-decoration: none;
    transition: border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.ltp-panel-btn-outline:hover[b-ctboezugl6] {
    border-color: rgba(27, 26, 34, 0.30);
    color: #1B1A22;
}

.ltp-panel-cta[b-ctboezugl6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--motiva-gradient-signature);
    color: #fff;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    padding: 11px 20px;
    border-radius: var(--motiva-radius-full);
    text-decoration: none;
    transition: filter var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.ltp-panel-cta:hover[b-ctboezugl6] { filter: brightness(1.08); color: #fff; }

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 900px) {
    /* Collapse the flexible columns on narrow viewports */
    .ltp-mentor-col[b-ctboezugl6],
    .ltp-stage-col[b-ctboezugl6] { display: none; }

    .ltp-note-col[b-ctboezugl6] { flex: 0 0 auto; }
}

@media (max-width: 600px) {
    .ltp-search-wrap[b-ctboezugl6] { display: none; }

    /* Allow more of the viewport height on small screens */
    .ltp-panel[b-ctboezugl6] { max-height: 92vh; }
}
/* /Pages/Projects/Overview/AddMentorModal.razor.rz.scp.css */
/* ============================================================
   AddMentorModal — scoped styles (amm-* prefix)
   Mirrors the existing modal language (pdc-* / exf-*) so it
   feels native next to other lecturer/admin modals. RTL.
   ============================================================ */

.amm-overlay[b-ufy83mhvci] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    z-index: var(--motiva-z-overlay); /* 900 — aligned with the Motiva token system */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: amm-fade-in-b-ufy83mhvci 0.14s ease;
}
@keyframes amm-fade-in-b-ufy83mhvci { from { opacity: 0; } to { opacity: 1; } }

.amm-modal[b-ufy83mhvci] {
    background: var(--g-bg-surface);
    border-radius: var(--g-radius-md);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
    width: 100%;
    max-width: 520px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: amm-slide-in-b-ufy83mhvci 0.18s ease;
}
@keyframes amm-slide-in-b-ufy83mhvci {
    from { transform: translateY(-16px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

.amm-head[b-ufy83mhvci] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--g-border-light);
    gap: 10px;
}

.amm-title[b-ufy83mhvci] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--g-text-primary);
}

.amm-close[b-ufy83mhvci] {
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--g-text-muted);
    border-radius: var(--g-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.amm-close:hover[b-ufy83mhvci] { background: var(--g-bg-hover); color: var(--g-text-primary); }

.amm-body[b-ufy83mhvci] {
    padding: 14px 20px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.amm-search[b-ufy83mhvci] {
    position: relative;
}

.amm-search-icon[b-ufy83mhvci] {
    position: absolute;
    top: 50%;
    inset-inline-start: 12px;
    transform: translateY(-50%);
    color: var(--g-text-muted);
    font-size: 12px;
    pointer-events: none;
}

.amm-search-input[b-ufy83mhvci] {
    width: 100%;
    padding: 8px 12px 8px 34px;
    /* the icon sits on the start side in RTL → push padding accordingly */
    padding-inline-start: 34px;
    padding-inline-end:   12px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    background: var(--g-bg-surface);
    color: var(--g-text-primary);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-control, 14px);
    box-sizing: border-box;
}

.amm-state[b-ufy83mhvci] {
    padding: 18px;
    text-align: center;
    color: var(--g-text-muted);
    background: var(--g-bg-hover);
    border-radius: var(--g-radius-sm);
    font-size: var(--motiva-font-size-sm, 13px);
}

.amm-error[b-ufy83mhvci] {
    padding: 8px 12px;
    background: rgba(220, 53, 69, 0.10);
    color: var(--g-danger);
    border-radius: var(--g-radius-sm);
    font-size: var(--motiva-font-size-sm, 13px);
}

.amm-list[b-ufy83mhvci] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.amm-row[b-ufy83mhvci] {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: var(--g-bg-surface);
    border: 1px solid var(--g-border-light);
    border-radius: var(--g-radius-sm);
    cursor: pointer;
    text-align: start;
    transition: background 0.13s, border-color 0.13s, color 0.13s;
    color: var(--g-text-primary);
}
.amm-row:hover[b-ufy83mhvci] {
    border-color: var(--g-accent);
    background: var(--g-bg-hover);
}
.amm-row-active[b-ufy83mhvci] {
    border-color: var(--g-accent);
    background: var(--g-accent-light);
    box-shadow: 0 0 0 2px var(--g-accent-light) inset;
}

.amm-row-main[b-ufy83mhvci] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.amm-row-name[b-ufy83mhvci] {
    font-weight: 600;
    font-size: var(--motiva-font-size-body, 14px);
    color: var(--g-text-primary);
}

.amm-row-email[b-ufy83mhvci] {
    font-size: var(--motiva-font-size-caption, 12px);
    color: var(--g-text-muted);
    word-break: break-all;
}

.amm-row-roles[b-ufy83mhvci] {
    font-size: var(--motiva-font-size-caption, 12px);
    color: var(--g-text-secondary);
    padding: 2px 10px;
    background: var(--g-bg-hover);
    border-radius: 20px;
    white-space: nowrap;
}
.amm-row-active .amm-row-roles[b-ufy83mhvci] {
    background: var(--g-bg-surface);
    color: var(--g-accent);
}

.amm-foot[b-ufy83mhvci] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--g-border-light);
}

.amm-btn[b-ufy83mhvci] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: opacity 0.15s, background 0.13s;
}
.amm-btn:disabled[b-ufy83mhvci] { opacity: 0.55; cursor: not-allowed; }
.amm-btn-primary[b-ufy83mhvci]  { background: var(--g-accent); color: #fff; }
.amm-btn-primary:hover:not(:disabled)[b-ufy83mhvci] { opacity: 0.9; }
.amm-btn-secondary[b-ufy83mhvci] {
    background: var(--g-bg-surface);
    color: var(--g-text-secondary);
    border-color: var(--g-border);
}
.amm-btn-secondary:hover:not(:disabled)[b-ufy83mhvci] {
    background: var(--g-bg-hover);
    color: var(--g-text-primary);
}
/* /Pages/Projects/Overview/ProjectOverviewPage.razor.rz.scp.css */
/* ============================================================
   ProjectOverviewPage — מרחב הפרויקט (Lecturer)
   Prefix: lpw-

   ALMOST NOTHING LIVES HERE. The page is <ProjectWorkspace/>,
   which owns the whole composition and its stylesheet. What
   remains is the back link and the two controls that exist for
   this role only — the Moodle status chip and add-mentor.

   This file replaced a 212-line `pov-` stylesheet that predated
   the design system: it painted its own card, its own chips and
   its own six-state palette out of --g-* fallbacks and literal
   hexes (#1e40af, #92400e, #065f46 …), so a lecturer's project
   page was the one screen in the app still drawing 2024 blue.
   Every one of those rules is gone rather than ported; the
   surfaces they described are now shared components.
   ============================================================ */

.lpw-page[b-zmrzpmd7n6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Fill the canvas shell's .app-content (which is flex:1 inside the
       min-height:100vh shell) so the workspace below can grow its lower cards
       down to the viewport's normal bottom margin instead of ending early and
       leaving a large empty region. min-height:0 lets the flex children size
       correctly rather than being floored at their content height. This is the
       lecturer page root only; no other page or the shell is touched. */
    flex: 1;
    min-height: 0;
}

/* ── Back to הצוותים שלי ───────────────────────────────────
   Item 1: the control itself is the shared <MAdminBack/> (its own
   circular disc, arrow, hover and focus live in MAdminBack.razor.css).
   This wrapper only owns the row's placement and the step of air
   between the back control and the page's own title.

   Item 8: the bottom step scales with viewport height — a full
   space-lg on a tall screen, tightened toward 8px on a short one — so
   the header starts higher when vertical room is scarce. clamp(), not
   a fixed value, so no single monitor is privileged. */
.lpw-back-row[b-zmrzpmd7n6] {
    display: flex;
    align-items: center;
    align-self: flex-start;
    /* Tighter on short viewports so the header starts higher; still a clear
       step below the back control on a tall one. */
    margin-block-end: clamp(6px, 1.1vh, 16px);
}

/* ── Moodle status ───────────────────────────────────────── */

/* A real state, so it is allowed a colour — but only three, and
   they are the product's own semantics rather than a fourth
   palette: teal for submitted, rose for a miss, quiet for
   everything in between and for "not tracked". */
.lpw-moodle[b-zmrzpmd7n6] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-surface-muted);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-secondary);
    white-space: nowrap;
}

/* MoodleSubmissionStatuses.Bucket(): ok | warn | neutral | muted. */
.lpw-moodle-ok[b-zmrzpmd7n6]   { color: var(--motiva-color-teal-ink, var(--motiva-color-teal)); }
.lpw-moodle-warn[b-zmrzpmd7n6] { color: var(--motiva-color-rose-ink, var(--motiva-color-danger)); }

/* The select covers the chip and carries the interaction, so the
   chip itself needs no second affordance — the same trick the
   page this replaces used, kept because it works. */
.lpw-moodle-select[b-zmrzpmd7n6] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font: inherit;
}

.lpw-moodle-select:disabled[b-zmrzpmd7n6] { cursor: progress; }

.lpw-moodle:focus-within[b-zmrzpmd7n6] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

/* ── Add mentor ──────────────────────────────────────────── */

/* Dashed, so it reads as "add one" beside the solid chips that
   state what is already true. */
.lpw-add-mentor[b-zmrzpmd7n6] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px dashed var(--motiva-color-violet, var(--motiva-color-indigo));
    border-radius: var(--motiva-radius-full);
    background: none;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.lpw-add-mentor:hover[b-zmrzpmd7n6] { background: var(--motiva-surface-muted); }

.lpw-add-mentor:focus-visible[b-zmrzpmd7n6] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

/* ============================================================
   עריכת משימה — the Lecturer/Admin task authoring modal
   Prefix: pov-edit-

   AUTHORING, NOT CONSOLE. This is the one surface on the lecturer
   review where somebody types rather than scans, so it takes the
   comfortable end of the type scale — 15px inputs, 14px labels — and
   generous field spacing. Everything else here is the shared MModal:
   the surface, the header, the footer row and the close control are
   the primitive's, so nothing about the management visual language is
   restated or forked.
   ============================================================ */
.pov-edit[b-zmrzpmd7n6] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Section heading inside the form — "פרטי המשימה", "הגדרות הגשה".
   The second one is what tells a lecturer the fields below it are the
   ones a student will read, so it is a real heading rather than a
   caption. Extra top space on a following section separates the two
   groups without a rule or a nested card. */
.pov-edit-sec[b-zmrzpmd7n6] {
    margin: 0;
    font-size: var(--motiva-font-size-lg, 16px);
    font-weight: var(--motiva-font-weight-bold);
    color: var(--motiva-text-primary);
}

.pov-edit-sec + *[b-zmrzpmd7n6] { margin-top: -4px; }
.pov-edit-field + .pov-edit-sec[b-zmrzpmd7n6],
.pov-edit-grid  + .pov-edit-sec[b-zmrzpmd7n6] { margin-top: 6px; }

.pov-edit-field[b-zmrzpmd7n6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pov-edit-label[b-zmrzpmd7n6] {
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
}

/* The task's own title, shown for orientation and not editable here:
   renaming a task is a different operation with different consequences
   (it is the key template propagation matches on). */
.pov-edit-readonly-label[b-zmrzpmd7n6] {
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-muted);
}

.pov-edit-readonly[b-zmrzpmd7n6] {
    margin: 0;
    font-size: var(--motiva-font-size-lg, 15px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
}

.pov-edit-input[b-zmrzpmd7n6],
.pov-edit-textarea[b-zmrzpmd7n6] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1.5px solid var(--motiva-border-card);
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-primary, #fff);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-lg, 15px);
    line-height: 1.5;
    color: var(--motiva-text-primary);
    direction: rtl;
    transition: border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.pov-edit-textarea[b-zmrzpmd7n6] { resize: vertical; min-height: 76px; }

.pov-edit-input:focus[b-zmrzpmd7n6],
.pov-edit-textarea:focus[b-zmrzpmd7n6] {
    outline: none;
    border-color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

/* The one line of guidance, and it earns its place: it is the answer to
   "who sees what I type here". Deliberately a single sentence under the
   field it describes rather than an explanatory panel. */
.pov-edit-help[b-zmrzpmd7n6] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    line-height: 1.5;
    color: var(--motiva-text-muted);
}

/* Two numeric settings side by side; they stack on a narrow modal. */
.pov-edit-grid[b-zmrzpmd7n6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.pov-edit-error[b-zmrzpmd7n6] {
    margin: 0;
    font-size: var(--motiva-font-size-body, 14px);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
}

/* Footer controls — geometry only; .motiva-cta supplies the primary fill. */
.pov-edit-save[b-zmrzpmd7n6] {
    border: 0;
    padding: 10px 22px;
    border-radius: var(--motiva-radius-md);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-body, 14.5px);
    font-weight: var(--motiva-font-weight-semibold);
    cursor: pointer;
}

.pov-edit-save:disabled[b-zmrzpmd7n6] { opacity: 0.6; cursor: default; }

.pov-edit-cancel[b-zmrzpmd7n6] {
    padding: 10px 20px;
    border: 1.5px solid var(--motiva-border-strong, rgba(27, 26, 34, 0.2));
    border-radius: var(--motiva-radius-md);
    background: none;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-body, 14.5px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
    cursor: pointer;
}

.pov-edit-cancel:hover[b-zmrzpmd7n6] { border-color: var(--motiva-text-secondary); color: var(--motiva-text-primary); }
.pov-edit-cancel:disabled[b-zmrzpmd7n6] { opacity: 0.6; cursor: default; }

/* The editor entry point on the drawer's הנחיות הגשה heading. A quiet
   inline control on the heading row — authoring, not the reviewer's
   primary action, which is the approve/return pair further down. */
.pov-inst-edit[b-zmrzpmd7n6] {
    margin-inline-start: auto;
    border: 0;
    background: none;
    padding: 0;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    cursor: pointer;
}

.pov-inst-edit:hover[b-zmrzpmd7n6] { text-decoration: underline; }
/* /Pages/ProjectWorkspace/ProjectIdentityCard.razor.rz.scp.css */
/* ============================================================
   ProjectIdentityCard — scoped styles
   Prefix: pwi-

   Structure from design-reference/.../Motiva Project Details.dc.html:93-152;
   every value below is a Motiva token or a value the already-shipped student
   cards use. No literal from the design export is copied.
   ============================================================ */

/* MCard is rendered with Padding.None, so the inset lives here — the same
   arrangement StudentProfilePersonalCard uses, and the reason its head/body
   wrappers exist: a child component's scoped CSS can never reach MCard's own
   root element. */
.pwi-inner[b-3i7lqish23] {
    /* 20/18 on the block axis, matching תוצרי ההגשה's card exactly — the three
       cards of this page share ONE inset, and a difference between them shows
       up as a misaligned first line. The inline 26px is untouched. */
    padding: 20px 26px 18px;
    /* THE CARD IS STRETCHED, AND THIS IS THE CHILD THAT TAKES THE HEIGHT.
       MCard's `Fill` makes the card a full-height flex column (see the note on
       <MCard> in the .razor); `flex: 1` + `min-height: 0` is what carries that
       height down to the content instead of leaving it in the card's own box.

       `overflow-y: auto` is the other half of the deal the workspace row makes:
       the card is exactly half its column and its column is exactly תוצרי
       ההגשה's height, so a card whose content does not fit — edit mode opens a
       name field, a description textarea and two buttons where a paragraph
       was — scrolls INSIDE itself rather than pushing the row taller and moving
       everything else on the page. In the read state it never engages: the
       branding lockup, the description and the team strip are well under the
       half they are given.

       Stacked (the page's container step), the card has no definite height at
       all, so this resolves to the content's own height and nothing scrolls. */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* ── Branding row ─────────────────────────────────────────────
   Mark + name + system line + the card's one action, as one lockup.

   `align-items: center` against a 56px tile, not flex-start: with the name at
   20px and the meta line under it, the text block is close enough to the
   tile's own height that top-aligning it leaves the mark visibly high. */

.pwi-brand[b-3i7lqish23] {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* THE PROJECT'S MARK.

   The brand tag surface, which is a 1px signature gradient EDGE over the card
   surface — never a flat violet fill. That distinction is a standing rule in
   this design system and the flat fill is the mistake it keeps having to
   correct; `--motiva-tag-brand-surface` is the token that draws it correctly,
   and it needs `border: 1px solid transparent` to have an edge to paint into.

   Fixed 56px square at the card radius' inner step. It never shrinks: a mark
   that changes size with its neighbour's content stops being a mark. */
.pwi-logo[b-3i7lqish23] {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    border: 1px solid transparent;
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-tag-brand-surface);
}

/* A real uploaded logo, when one can exist. `cover` rather than `contain`:
   the tile is the mark's shape, and letterboxing an image inside it would put
   two different silhouettes on the same screen depending on what was
   uploaded. */
.pwi-logo-img[b-3i7lqish23] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* THE EMPTY SLOT. An outline glyph in violet ink on the gradient-edged tile —
   the same brand pairing the monogram used, so a project without a logo still
   reads as having an identity rather than as a grey hole. What it is NOT is
   initials: those are generated content, and a team that has not chosen a mark
   should be looking at an invitation, not at something to undo. */
.pwi-logo-ph[b-3i7lqish23] {
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    opacity: 0.55;
}

.pwi-brandtext[b-3i7lqish23] {
    flex: 1;
    min-width: 0;
}

/* The card's own headline.

   AT THE SECTION STEP, NOT THE PAGE-TITLE STEP. It used to be
   --motiva-font-size-h1, which is 38px inside the student scope: correct when
   this card ran the full shell width and was the largest thing under the page
   header, wrong now that it is half of a two-column row — at 38px a two-word
   project name wraps in a ~600px card before it has said anything.

   The page header above still prints the same name in gradient text at 18px;
   this is the version that belongs to the card, so it sits one step above it
   rather than competing at the same size.

   `overflow-wrap` rather than a clamp: a long project name must stay
   readable, and this card has no fixed height to protect. */
.pwi-name[b-3i7lqish23] {
    margin: 0;
    font-size: var(--motiva-font-size-h2);
    font-weight: var(--motiva-font-weight-bold);
    line-height: var(--motiva-line-height-tight);
    letter-spacing: var(--motiva-letter-spacing-section, -0.2px);
    color: var(--motiva-text-primary);
    overflow-wrap: anywhere;
}

/* System information: project number · type · year. The Master's meta/caption
   step, same treatment as the profile hero's context line — this is the same
   kind of line in a second place, so it gets no second style. */
.pwi-meta[b-3i7lqish23] {
    margin: 5px 0 0;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-medium);
    line-height: var(--motiva-line-height-caption);
    color: var(--motiva-text-muted);
}

/* The action end of the branding row. Never shrinks and never wraps under the
   name — it is the card's one action and has to stay findable at the same
   place regardless of how long the project's name is. */
.pwi-headend[b-3i7lqish23] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--motiva-space-sm);
}

/* Save confirmation, in the head rather than beside a field — the same place
   (and the same 2.2s) the profile cards report a save. It holds its own width
   so the button does not shift when the word appears. */
.pwi-status[b-3i7lqish23] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 34px;
}

.pwi-saved[b-3i7lqish23] {
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-color-teal);
}

/* ── Description ──────────────────────────────────────────── */

.pwi-desc[b-3i7lqish23] {
    margin-block-start: 12px;
}

/* Prose is capped independently of the card, which runs the full shell width:
   the card is a surface, but a 1400px measure is unreadable. This is the same
   reasoning StudentProfilePage applied when it raised the Master's page-wide
   920px cap and moved readability onto the content instead. */
.pwi-desc-text[b-3i7lqish23] {
    margin: 0;
    max-width: 68ch;
    font-size: var(--motiva-font-size-body);
    line-height: var(--motiva-line-height-body);
    color: var(--motiva-text-secondary);
    overflow-wrap: anywhere;
}

.pwi-desc-empty[b-3i7lqish23] {
    margin: 0;
    max-width: 62ch;
    font-size: var(--motiva-font-size-body);
    line-height: var(--motiva-line-height-body);
    color: var(--motiva-text-subtle, var(--motiva-text-muted));
}

/* ── Team strip ───────────────────────────────────────────── */

/* THE STRIP'S AIR IS PART OF THE ROW'S HEIGHT BUDGET.
   This card is half of a column whose height comes from תוצרי ההגשה, so its
   content has to fit that half without a scrollbar — and when the row was
   trimmed, the card's own slack (a couple of pixels) could not absorb it. The
   14/12 above the rule is where that came from: it is the largest single piece
   of vertical air in the card and it still separates the roster from the
   description more than any gap inside either. Nothing here got smaller — not
   the chips, not the label, not the avatars. */
.pwi-team[b-3i7lqish23] {
    margin-block-start: 14px;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--motiva-border-subtle);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.pwi-team-label[b-3i7lqish23] {
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-muted);
}

.pwi-team-list[b-3i7lqish23] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Read-only member chips. Pill radius, hairline outline, secondary surface —
   the same three tokens every other quiet chip in the student scope uses. */
.pwi-chip[b-3i7lqish23] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px 4px 5px;
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-surface-secondary);
    max-width: 100%;
}

/* Mirrors the profile hero's neutral avatar chip, scaled to chip size. */
.pwi-chip-avatar[b-3i7lqish23] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--motiva-surface-hover);
    color: var(--motiva-text-secondary);
    font-size: 10.5px;
    font-weight: var(--motiva-font-weight-semibold);
    user-select: none;
}

.pwi-chip-name[b-3i7lqish23] {
    font-size: var(--motiva-font-size-caption, 12.5px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-secondary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Responsive ───────────────────────────────────────────────
   Reuses the student scope's existing 700px step (the profile hero's own
   breakpoint). Sizing only — no recomposition. */

@media (max-width: 700px) {
    .pwi-inner[b-3i7lqish23] { padding: 20px 18px 18px; }

    /* At this width the branding row cannot hold a mark, a long name and a
       button side by side without ellipsising one of them. It wraps instead:
       the mark and the name stay together on the first line (.pwi-brandtext
       keeps a flex-basis that forbids a third), and the action drops to its
       own line under them — still the last thing in the block, still one tap
       away. */
    .pwi-brand[b-3i7lqish23] {
        flex-wrap: wrap;
        gap: 12px 14px;
    }

    .pwi-brandtext[b-3i7lqish23] {
        flex-basis: 60%;
    }

    .pwi-logo[b-3i7lqish23] {
        width: 48px;
        height: 48px;
    }

    .pwi-logo-ph[b-3i7lqish23] {
        width: 19px;
        height: 19px;
    }
}
/* /Pages/ProjectWorkspace/ProjectIdentityEditModal.razor.rz.scp.css */
/* ============================================================
   ProjectIdentityEditModal — עריכת פרטי הפרויקט

   THE SHELL IS NOT STYLED HERE. Width, radius, scrim, the 26/28px pad, the
   pinned header and the footer's action alignment all come from MModal and
   from the `.motiva-final` block inside MModal.razor.css. This file owns the
   dialog's own CONTENT and nothing else, which is why there is not a single
   `.m-modal-*` selector in it.

   The field rules below are transcribed from ProjectIdentityCard's inline
   form, which they replace — same tokens, same measures — so the controls a
   student edits are the ones they have always seen, just in a dialog.
   ============================================================ */

/* Every direct child of the modal body keeps its height.

   A Motiva modal body is `display:flex; flex-direction:column; overflow-y:auto`,
   and a child carrying `overflow: hidden` — the logo tile does — has its
   automatic minimum size resolve to 0. Flex then crushes it to a couple of
   pixels while `scrollHeight` still reports the full content, so the element is
   present, queryable and read by a screen reader while being invisible on
   screen.

   IT HAS TO BE DECLARED ON THESE ELEMENTS, not on the body's child axis.
   `.m-modal-body` is rendered by MModal, so it never carries THIS component's
   CSS-isolation attribute — a `.m-modal-body > *` rule written here compiles to
   `.m-modal-body > *[b-thisfile]` and matches nothing, and `::deep` cannot help
   either because this component's root is a COMPONENT tag rather than an
   element. Everything below is markup from this file, so these do match. Any
   new direct child of ChildContent needs adding here. */
.pwe-logo-row[b-kabrqym5vy],
.pwe-field[b-kabrqym5vy],
.pwe-error[b-kabrqym5vy] { flex-shrink: 0; }

/* ── Logo row ─────────────────────────────────────────────────────────────
   Tile + verbs on one line. Compact on purpose: this is one control among
   three, not the subject of the dialog. */
.pwe-logo-row[b-kabrqym5vy] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-block-end: 18px;
    margin-block-end: 18px;
    border-block-end: 1px solid var(--motiva-border-subtle);
}

.pwe-logo-wrap[b-kabrqym5vy] {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
}

/* The brand tag surface: a 1px signature gradient EDGE over the card surface,
   never a flat violet fill. `--motiva-tag-brand-surface` is the token that
   draws it, and it needs `border: 1px solid transparent` to have an edge to
   paint into. Same tile as the card's, one step smaller. */
.pwe-logo[b-kabrqym5vy] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    border: 1px solid transparent;
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-tag-brand-surface);
}

.pwe-logo-img[b-kabrqym5vy] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The empty slot — an outline glyph in violet ink, so a project without a logo
   still reads as having an identity rather than as a grey hole. What it is NOT
   is initials; see the component's own note. */
.pwe-logo-ph[b-kabrqym5vy] {
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    opacity: 0.55;
}

.pwe-logo-busy[b-kabrqym5vy] {
    position: absolute;
    inset: 0;
    border-radius: var(--motiva-radius-md);
    background: rgba(255, 255, 255, 0.6);
}

.pwe-logo-side[b-kabrqym5vy] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.pwe-logo-label[b-kabrqym5vy] {
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
}

.pwe-logo-verbs[b-kabrqym5vy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Quiet text buttons, not MButtons: these sit inside a field group and a pair
   of filled buttons here would outweigh the dialog's own footer actions. */
.pwe-logo-btn[b-kabrqym5vy] {
    padding: 4px 10px;
    border: 1px solid var(--motiva-border-strong);
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-secondary);
    font-family: inherit;
    font-size: var(--motiva-font-size-control, 12.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.6;
    cursor: pointer;
    transition: border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color        var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.pwe-logo-btn:hover[b-kabrqym5vy] {
    border-color: var(--motiva-color-violet, var(--motiva-color-indigo));
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

.pwe-logo-btn-danger:hover[b-kabrqym5vy] {
    border-color: var(--motiva-color-rose-ink, var(--motiva-color-rose));
    color: var(--motiva-color-rose-ink, var(--motiva-color-rose));
}

.pwe-logo-btn:disabled[b-kabrqym5vy] {
    opacity: 0.5;
    cursor: default;
}

/* The native control never renders; the label above is the trigger. Hidden on
   the WRAPPER because InputFile's own <input> root carries no scope attribute
   of this component — a class handed to InputFile would match nothing. */
.pwe-logo-input-wrap[b-kabrqym5vy] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.pwe-logo-note[b-kabrqym5vy] {
    font-size: var(--motiva-font-size-caption, 11.5px);
    color: var(--motiva-text-muted);
}

/* ── Fields ───────────────────────────────────────────────────────────────
   Transcribed from the card's inline form. */

.pwe-field + .pwe-field[b-kabrqym5vy] { margin-block-start: 16px; }

/* Its MInfoTip + the label on one line, tip first. The tip's bubble is absolutely positioned
   out of flow, so this row is exactly as tall as the label alone. */
.pwe-labelrow[b-kabrqym5vy] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-block-end: 6px;
}

.pwe-labelrow .pwe-label[b-kabrqym5vy] { margin-block-end: 0; }

.pwe-label[b-kabrqym5vy] {
    display: block;
    margin-block-end: 6px;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
}

/* ONE FIELD TREATMENT FOR BOTH CONTROLS.
   The border is painted as a padding-box/border-box PAIR from the start, not
   only on focus. That is MSelect's rule and its reason applies here verbatim:
   swapping border-color for a gradient border-image on focus would change the
   box's paint model mid-interaction and shift the text by a subpixel. Painting
   both states the same way keeps it still, and the rest state looks exactly as
   it did — the border-box layer is the same solid --motiva-border-strong. */
.pwe-input[b-kabrqym5vy],
.pwe-textarea[b-kabrqym5vy] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-md);
    background:
        linear-gradient(var(--motiva-surface-primary), var(--motiva-surface-primary)) padding-box,
        linear-gradient(var(--motiva-border-strong), var(--motiva-border-strong)) border-box;
    color: var(--motiva-text-primary);
    font-family: inherit;
    outline: none;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.pwe-input[b-kabrqym5vy] {
    padding: 10px 12px;
    font-size: var(--motiva-font-size-lg);
    font-weight: var(--motiva-font-weight-semibold);
}

.pwe-textarea[b-kabrqym5vy] {
    padding: 12px 13px;
    font-size: var(--motiva-font-size-body);
    line-height: var(--motiva-line-height-body);
    resize: vertical;
}

/* FOCUS — the signature gradient edge plus a soft brand halo, which is the
   treatment MSelect's trigger already uses (.m-sel-trigger:focus-visible in
   MSelect.razor.css). Reused rather than re-invented so a text field and the
   dropdown beneath it show the same thing.

   IT REPLACES A 2px SOLID OUTLINE in --motiva-color-focus-ring, which resolves
   to rgba(109,40,245,0.35) inside .motiva-final: a hard purple ring standing
   1px off the control, and the only thing in these dialogs still drawing focus
   that way. Transcribed here from the inline forms this modal replaced, so it
   predates the dialogs — it was never the refined recipe.

   Still clearly visible to a keyboard user: the edge is the full width of the
   control and the halo is a 3px spread outside it. `outline: none` is safe
   only BECAUSE both of those are present. */
.pwe-input:focus-visible[b-kabrqym5vy],
.pwe-textarea:focus-visible[b-kabrqym5vy] {
    outline: none;
    background:
        linear-gradient(var(--motiva-surface-primary), var(--motiva-surface-primary)) padding-box,
        var(--motiva-gradient-signature) border-box;
    box-shadow: 0 0 0 3px var(--motiva-color-brand-bg);
}

/* Disabled keeps the two-layer paint so the box does not change model here
   either — only the padding-box fill goes flat. */
.pwe-input:disabled[b-kabrqym5vy],
.pwe-textarea:disabled[b-kabrqym5vy] {
    background:
        linear-gradient(var(--motiva-color-disabled-bg), var(--motiva-color-disabled-bg)) padding-box,
        linear-gradient(var(--motiva-border-strong), var(--motiva-border-strong)) border-box;
    color: var(--motiva-color-disabled-text);
}

.pwe-error[b-kabrqym5vy] {
    margin: 12px 0 0;
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-color-rose-ink, var(--motiva-color-rose));
}

/* ── Narrow viewports ─────────────────────────────────────────────────────
   The shell already handles the dialog's own width and the body's scroll. The
   only thing that needs re-basing is the logo row, which runs out of room for
   a tile plus two verbs plus a note on one line. */
@media (max-width: 420px) {
    .pwe-logo-row[b-kabrqym5vy] {
        align-items: flex-start;
        gap: 12px;
    }

    /* The textarea's `rows` is an attribute, not a property — it cannot be
       re-based in CSS. A height cap is the equivalent that works here. */
    .pwe-textarea[b-kabrqym5vy] { max-height: 34vh; }
}
/* /Pages/ProjectWorkspace/ProjectResourcesSection.razor.rz.scp.css */
/* ============================================================
   ProjectResourcesSection — "משאבי הפרויקט"
   Prefix: pwr-

   ONE card, holding an APPLICATION-FOLDER GRID of small tiles. The marks are
   the product's shared gradient treatment (.motiva-ico-gradient +
   #motivaIconGradient, both defined outside this component); everything else
   is a Motiva token. See the note beside .pwr-grid.
   ============================================================ */

/* MCard is rendered with Padding.None, so the inset lives here — and it is
   the SAME inset ProjectIdentityCard's .pwi-inner uses, because the two cards
   are the surfaces of one page and any difference between them shows up as a
   misaligned first line.

   `flex: 1` + `min-height: 0`: the card is stretched again — it is the bottom
   half of the workspace's right column, and MCard's `Fill` makes it a
   full-height flex column — so this is the child that has to take that height
   and pass it down to the grid below the head. */
.pwr[b-dgkvzsswfy] {
    display: flex;
    flex-direction: column;
    /* The page's one shared card inset — 20/18 on the block axis, 26 inline;
       see .pws and .pwi-inner, which carry the same three numbers and the
       reason they were trimmed. */
    padding: 20px 26px 18px;
    flex: 1;
    min-height: 0;
}

/* Section heading rhythm: the hairline-ruled head the dashboard's
   "חומרים מומלצים" block already uses, so the two sections of this page and
   the dashboard's read as one system. */
/* THE HAIRLINE RULE IS GONE. It was what made this block read as a section
   on the page; inside a card it would be a second edge one line below the
   card's own, and the card beside it draws no such rule under its name. The
   separation is now the card boundary plus the gap. */
.pwr-head[b-dgkvzsswfy] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    /* Wrap rather than squeeze: a heading forced to share a line with a button
       it cannot fit beside reads as two broken columns. Below that width the
       action drops to its own
       line under the heading. */
    flex-wrap: wrap;
    gap: 10px var(--motiva-space-md);
    margin-block-end: 14px;
}

.pwr-headtext[b-dgkvzsswfy] {
    min-width: 0;
}

/* Same step as .pwi-name in the project card beside it: these are the two
   titles of one row, and setting them at different sizes would make one of
   the halves read as subordinate to the other. */
.pwr-heading[b-dgkvzsswfy] {
    margin: 0;
    font-size: var(--motiva-font-size-h2);
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: var(--motiva-letter-spacing-section, normal);
    line-height: var(--motiva-line-height-heading);
    color: var(--motiva-text-primary);
}

.pwr-sub[b-dgkvzsswfy] {
    margin: 4px 0 0;
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-muted);
}

/* The removal action is destructive AND secondary to the save it sits beside,
   so it is pushed away from the two primary buttons and tinted only on hover —
   it should be findable, never the thing the eye lands on first. */
[b-dgkvzsswfy] .pwr-remove {
    margin-inline-start: 4px;
    color: var(--motiva-text-muted);
}

[b-dgkvzsswfy] .pwr-remove:hover:not(:disabled) {
    color: var(--motiva-color-rose);
}

/* The derived-kind hint. Full-width under the fields (flex-basis 100%), so it
   reads as a note about the form rather than as a fourth control in it. */
/* Under the field it describes, inside the dialog. `flex-basis: 100%` went
   with .pwr-formfields — the inline form's wrapping flex row it used to have
   to break out of. */
.pwr-kindhint[b-dgkvzsswfy] {
    margin: 6px 0 0;
    font-size: var(--motiva-font-size-caption, 11.5px);
    color: var(--motiva-text-muted);
}

.pwr-kindhint strong[b-dgkvzsswfy] {
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
}

/* ── DIALOG FIELDS ────────────────────────────────────────────────────────
   These used to be flex items inside .pwr-formfields, sharing one row of the
   card and carrying their own flex bases. Inside the dialog each field is a
   full-width block in a stack, which is why the bases are gone and `width`
   arrived. Every other property is unchanged, so the controls are the ones
   the student has always used. */
.pwr-input[b-dgkvzsswfy] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    padding: 9px 12px;
    /* Padding-box/border-box PAIR from the start — see the focus rule below
       and MSelect's own note for why the paint model must not change on
       focus. The rest state is unchanged: the border-box layer paints the
       same solid --motiva-border-strong the border used to. */
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-sm);
    background:
        linear-gradient(var(--motiva-surface-primary), var(--motiva-surface-primary)) padding-box,
        linear-gradient(var(--motiva-border-strong), var(--motiva-border-strong)) border-box;
    color: var(--motiva-text-primary);
    font-family: inherit;
    font-size: var(--motiva-font-size-sm);
    outline: none;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}
/* FOCUS — the signature gradient edge plus the soft brand halo, copied from
   .m-sel-trigger:focus-visible in MSelect.razor.css. The dropdown in this same
   dialog IS an MSelect, so reusing its recipe is what makes the text field and
   the control under it show one focus treatment instead of two.

   It replaces a 2px solid outline in --motiva-color-focus-ring — inside
   .motiva-final that resolves to rgba(109,40,245,0.35), the hard purple ring.
   Keyboard focus stays obvious: a full-width gradient edge plus a 3px halo. */
.pwr-input:focus-visible[b-dgkvzsswfy] {
    outline: none;
    background:
        linear-gradient(var(--motiva-surface-primary), var(--motiva-surface-primary)) padding-box,
        var(--motiva-gradient-signature) border-box;
    box-shadow: 0 0 0 3px var(--motiva-color-brand-bg);
}

.pwr-input:disabled[b-dgkvzsswfy] {
    background:
        linear-gradient(var(--motiva-color-disabled-bg), var(--motiva-color-disabled-bg)) padding-box,
        linear-gradient(var(--motiva-border-strong), var(--motiva-border-strong)) border-box;
    color: var(--motiva-color-disabled-text);
}

.pwr-fieldlabel[b-dgkvzsswfy] {
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
}

/* THE DELIVERABLE PICKER IS NOT STYLED HERE, AND CANNOT BE.
   It is an <MSelectField>, and the `Class="pwr-select"` handed to it lands on
   MSelect's own root element — which carries MSelect's CSS-isolation attribute,
   not this component's. Verified in the running app: the element is
   `class="m-sel pwr-select"` with the attribute b-r5iiib58w1 while this file
   compiles to b-ayey3a8hiu, so every `.pwr-select` rule matched NOTHING.

   A `.pwr-select` block used to sit here — width, padding, border, and a
   `:focus-visible` copy of the old purple outline. All of it was dead, and it
   was actively misleading: it read as though this dialog styled its dropdown
   and gave it the same hard focus ring as the inputs. The control has always
   taken MSelect's own gradient-edge focus treatment, which is the treatment the
   inputs above now use too. Removed rather than corrected, because there is
   nothing here to correct — MSelect.razor.css owns it. */


/* Section-level error (a failed DELETE reported on the card itself). */
.pwr-error[b-dgkvzsswfy] {
    margin: 0 0 12px;
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-color-rose-ink, var(--motiva-color-rose));
}

/* ── The dialog's own body ────────────────────────────────────────────────
   Every DIRECT child of the modal body keeps its height.

   A Motiva modal body is `display:flex; flex-direction:column; overflow-y:auto`,
   and a child whose automatic minimum size resolves to 0 gets crushed to a
   sliver while `scrollHeight` still reports the full content — present and
   queryable, invisible on screen.

   It has to be declared on THESE elements, not on the body's child axis:
   `.m-modal-body` is rendered by MModal, so a `.m-modal-body > *` rule written
   here would compile to `… > *[b-thisfile]` and match nothing. Any new direct
   child of the dialog needs adding to this list. */
.pwr-field[b-dgkvzsswfy],
.pwr-formerror[b-dgkvzsswfy],
.pwr-danger[b-dgkvzsswfy] { flex-shrink: 0; }

.pwr-field + .pwr-field[b-dgkvzsswfy] { margin-block-start: 16px; }

.pwr-fieldlabel[b-dgkvzsswfy] {
    display: block;
    margin-block-end: 6px;
}

/* Its MInfoTip + the label on one line, tip first. The tip's bubble is absolutely positioned
   out of flow, so this row is exactly as tall as the label alone. */
.pwr-labelrow[b-dgkvzsswfy] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-block-end: 6px;
}

.pwr-labelrow .pwr-fieldlabel[b-dgkvzsswfy] { margin-block-end: 0; }

.pwr-formerror[b-dgkvzsswfy] {
    margin: 14px 0 0;
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-color-rose-ink, var(--motiva-color-rose));
}

/* The destructive action, ruled off from the fields and deliberately NOT in
   the footer — see the note beside it in the .razor. */
.pwr-danger[b-dgkvzsswfy] {
    margin-block-start: 18px;
    padding-block-start: 14px;
    border-block-start: 1px solid var(--motiva-border-subtle);
}

.pwr-note[b-dgkvzsswfy] {
    margin: 0;
    padding-block: 8px;
    font-size: var(--motiva-font-size-body);
    color: var(--motiva-text-muted);
}

.pwr-note-error[b-dgkvzsswfy] {
    color: var(--motiva-color-rose-ink, var(--motiva-color-rose));
}

/* ── The application-folder grid ──────────────────────────────
   A WALL OF SMALL TILES, mark over label, the arrangement an OS uses for a
   folder of apps.

   `auto-fill` with a 104px floor rather than a fixed column count, because the
   number of links a team keeps is unknown and the panel's width changes with
   the page's own breakpoint: inside the half-width panel that resolves to five
   or six columns, and it degrades to two on a phone without a second rule. It
   is the same reason the grid reads correctly with ONE resource (a single tile
   at its natural size, not a stretched banner) and with twenty (a wall that
   wraps).

   104px is chosen so the tile is roughly square-ish rather than a rectangle
   with a mark bolted to one end — small enough that six fit, wide enough for
   a two-word Hebrew label at 12.5px.

   `align-items: stretch` equalises tiles WITHIN a row, so a two-line label
   next to a one-line label does not leave a short tile beside a tall one.

   THE GRID IS THE CARD'S SCROLL REGION. It is the last child of a card whose
   height comes from the workspace row, so `flex: 1 1 auto` + `min-height: 0`
   hands it everything the head leaves over, and `overflow-y: auto` keeps a
   wall of twenty tiles inside the card instead of spilling past its edge —
   the head, with its "+ הוספת משאב", stays put above it.

   `align-content: start` is what preserves the old promise while the box
   grows: a grid with room to spare distributes it into `auto` rows by
   default, which would inflate the tiles. Anchored at the start, the slack
   stays at the card's foot where it belongs and a tile is the same size
   whether the team keeps three resources or thirty. */

.pwr-grid[b-dgkvzsswfy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    align-items: stretch;
    align-content: start;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Two columns once the panel is narrow enough that a 104px track would leave
   the label no room — never one, because a single column of centred tiles is
   the vertical list this arrangement exists to stop being. */
@media (max-width: 380px) {
    .pwr-grid[b-dgkvzsswfy] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The cell exists so the edit button has something to position against. */
.pwr-cell[b-dgkvzsswfy] {
    position: relative;
    min-width: 0;
}

/* THE TILE. Mark, label, type — centred, stacked, hairline, inner radius.
   `height: 100%` is what lets the grid's stretch reach the anchor rather than
   stopping at the cell. */
.pwr-hit[b-dgkvzsswfy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 14px 8px 12px;
    border: 1px solid var(--motiva-border-card, var(--motiva-border-subtle));
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-primary);
    text-align: center;
    text-decoration: none;
    transition: border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                background   var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

/* A hairline that firms up plus the neutral hover surface. NOT a brand ring
   and NOT a tinted fill: the mark already carries the brand, and a violet wash
   behind twenty tiles would be the loudest thing on the page. */
.pwr-hit:hover[b-dgkvzsswfy],
.pwr-hit:focus-visible[b-dgkvzsswfy] {
    border-color: var(--motiva-border-strong);
    background: var(--motiva-surface-hover);
    color: var(--motiva-text-primary);
}

.pwr-hit:focus-visible[b-dgkvzsswfy] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

/* NO CHIP BEHIND THE MARK. .motiva-ico-gradient (motiva-base.css) supplies the
   inline-flex box and the fallback ink; this rule only reserves the mark's
   line so tiles line up whether or not an icon path renders. The old 28px
   `--motiva-color-brand-bg` square is gone with the flat violet stroke it was
   built to sit behind. */
.pwr-icon[b-dgkvzsswfy] {
    width: 26px;
    height: 26px;
}

.pwr-text[b-dgkvzsswfy] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    width: 100%;
}

/* Two lines, then ellipsis. A tile label is a NAME: truncating "מסמך האפיון
   של הצוות" to one line loses the half that identifies it, and letting it run
   to four lines makes one tile twice its neighbours' height. */
.pwr-title[b-dgkvzsswfy] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.35;
    color: var(--motiva-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.pwr-type[b-dgkvzsswfy] {
    font-size: var(--motiva-font-size-caption, 11px);
    color: var(--motiva-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── "belongs to דף מידע" ─────────────────────────────────────
   A DOT AND A WORD, not a filled chip. Twenty tiles each carrying a violet
   pill would make the association the loudest thing in the grid, for a fact
   that is secondary to the tile's own name; and a flat brand fill is the
   mistake this codebase keeps having to undo. The dot is solid violet rather
   than the gradient on purpose — below ~12px the sweep collapses to its blue
   midpoint. */
.pwr-tag[b-dgkvzsswfy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    max-width: 100%;
    margin-block-start: 3px;
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pwr-tag-dot[b-dgkvzsswfy] {
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-color-violet, var(--motiva-color-indigo));
}

/* ── Edit ─────────────────────────────────────────────────────
   The tile's ONE layered control, and deliberately the only one: opening the
   resource stays the tile's job, and this must not compete with it.

   A sibling of the anchor, not a child (a button inside a link is invalid and
   unreachable by keyboard). It sits in the tile's top corner, clear of the
   centred mark and label, so it never covers either. Revealed on hover / focus-within — the same
   affordance pattern the profile hero uses for its avatar controls — so the
   resting tile is a clean link and nothing more.

   focus-visible keeps it reachable for keyboard users, who never hover. */

.pwr-edit[b-dgkvzsswfy] {
    position: absolute;
    /* The tile's top corner at the reading start, clear of the centred mark
       and label — so unlike the row it replaces, the tile needs no reserved
       gutter and loses no width to a control that is invisible at rest. */
    inset-inline-start: 5px;
    inset-block-start: 5px;

    width: 22px;
    height: 22px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-muted);
    cursor: pointer;

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

.pwr-cell:hover .pwr-edit[b-dgkvzsswfy],
.pwr-cell:focus-within .pwr-edit[b-dgkvzsswfy] {
    opacity: 1;
}

/* Its own hover is one step past merely being visible, so a student who has
   found it can tell the button apart from the tile underneath it. */
.pwr-edit:hover[b-dgkvzsswfy] {
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    border-color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

.pwr-edit:focus-visible[b-dgkvzsswfy] {
    opacity: 1;
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 1px;
}

/* pwr-fade-up went with .pwr-form: the inline form was the only thing that
   used it, and the dialog gets its entrance from MModal. */

@media (prefers-reduced-motion: reduce) {
    .pwr-hit[b-dgkvzsswfy],
    .pwr-edit[b-dgkvzsswfy],
    .pwr-input[b-dgkvzsswfy] { transition: none; }
}
/* /Pages/ProjectWorkspace/ProjectWorkspacePage.razor.rz.scp.css */
/* ============================================================
   מרחב הפרויקט — page shell
   Prefix: pw-

   The page opens on the finalized white MPageHeaderCard (Core scale) — the
   same contained page-header surface every other Student page and the
   Lecturer/Mentor screens wear — over the pw-body stack below it.
   ============================================================ */

/* The shell already supplies the 40px inline / 60px bottom content padding,
   so the body adds none of its own. The gap is the rhythm between the areas of
   the page, and it is declared ONCE — at the foot of this file, under Density.
   It used to be set here as well, at a different value, so reading this rule
   told you the wrong answer. */

/* ── Loading ─────────────────────────────────────────────────
   The Knowledge Center's loading line and ring, reused verbatim so the two
   student screens do not wait in two different ways. */

.pw-loading[b-fo5lbh43j9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--motiva-space-sm);
    padding-block: 64px;
    font-size: var(--motiva-font-size-body);
    color: var(--motiva-text-muted);
}

.pw-spinner[b-fo5lbh43j9] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--motiva-border-subtle);
    border-block-start-color: var(--motiva-color-violet, var(--motiva-color-focus-ring));
    animation: pw-spin-b-fo5lbh43j9 700ms linear infinite;
}

@keyframes pw-spin-b-fo5lbh43j9 {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .pw-spinner[b-fo5lbh43j9] { animation: none; }
}

/* ── Journey card ──
   One step of extra air under מסע הפרויקט, on top of the page gap: it is the
   only card that states where the whole project stands, so the blocks that
   follow it read as a new group rather than as its continuation. 8px on top of
   the 22px base, not the old 14 on top of 14 — the base now carries most of
   the separation, so the accent only has to be a nudge. */
.pw-body[b-fo5lbh43j9]  .pw-journey { margin-block-end: 8px; }

/* The journey count's own type and hover now come from
   `.motiva-journey-open` in motiva-base.css, shared with the student
   dashboard's identical count so both entry points read the same.

   THE RULE THAT WAS HERE IS DELETED RATHER THAN TRIMMED, and that is
   deliberate: a scoped rule compiles to `.pw-journey-count[b-hash]`,
   (0,2,0), which TIES with `.motiva-journey-open:hover`; scoped styles
   load after motiva-base.css, so on a tie the scoped rule wins and the
   shared hover colour would silently never apply. Restating colour here
   would break the shared affordance, not reinforce it. MSectionHeading's
   own Trailing slot already handles placement. */

/* ── Density ──
   The sections stacked at the shell's own rhythm left the page at roughly twice
   a laptop viewport, so it was pulled in to 14px. That went one step too far:
   מסע הפרויקט, פרטי הפרויקט, משאבי הפרויקט and תוצרי ההגשה are four DIFFERENT
   subjects, and at 14px the gap between two of them was no larger than the gap
   between a heading and its own content — so the page read as one long column of
   rows rather than as four blocks.

   22px is the same step the header bleed already puts under MPageHeader, so the
   whole page now separates its subjects at one measure. Nothing INSIDE a
   section changed; the air is spent only on the boundaries, which is what the
   hierarchy needs it for. */
.pw-body[b-fo5lbh43j9] {
    display: flex;
    flex-direction: column;
    /* THIS PAGE IS THE REFERENCE, NOT THE THING BEING CHANGED. 22px is the
       measure the Lecturer/Mentor workspace was brought UP to — it is the
       >=1440 rung of the shared ladder in motiva-tokens.css. `max()` is what
       keeps that true in both directions: below 1920 every rung resolves to
       22px or less, so this page renders exactly as it always has, and only
       the >=1920 rung (26px) can move it. A very wide monitor loosens all
       three roles together instead of leaving this one pinned. */
    gap: max(22px, var(--motiva-ws-band-gap, 22px));

    /* The header is now the finalized white MPageHeaderCard (a contained card,
       not the old edge-bleeding ambient band). It no longer supplies the space
       beneath itself, so the body carries it — at the page's own 22px rhythm,
       the same measure separating the blocks inside the body. */
    margin-block-start: 22px;

    /* THE BREAKPOINT BELOW MEASURES THIS ELEMENT, NOT THE WINDOW.
       The workspace row lives inside a shell whose sidebar and content inset
       change with the viewport, so a viewport media query answers a question
       nobody asked: what decides whether two columns still fit is how wide the
       CONTENT COLUMN is. Declaring the container here and querying it below is
       the same mechanism StudentProfilePersonalCard already uses.

       `inline-size` only — block-axis containment would fix this element's
       height, and the page's height is exactly what has to stay content-driven.
       Nothing inside is `position: fixed` any more (the deliverables drawer,
       which was, is gone), so nothing is re-parented by the containment this
       implies. */
    container-type: inline-size;
    container-name: pw-body;
}

/* ============================================================
   THE WORKSPACE — ≈57 / 43, two columns

   Right column   הפרויקט  →  משאבי הפרויקט   (one vertical stack)
   Left  column   תוצרי ההגשה

   RTL COMES FROM THE SHELL, NOT FROM A RULE HERE. `direction: rtl` is set on
   body / .app-main (app.css:5, AppLayout.razor.css:12) and CSS Grid places
   its columns along the inline axis, so the FIRST child lands on the RIGHT
   with no `[dir=rtl]` selector and no `order` involved. That matters in this
   codebase specifically: a `[dir=rtl]` rule would match nothing, because the
   attribute is never set.

   57 / 43, not 50 / 50: the project card holds prose (a description, a team
   strip) and wants the wider measure; the deliverables panel holds short rows
   and reads better narrow. Both tracks are `minmax(0, …fr)`, never a bare
   `…fr`: a grid track's default minimum is `auto`, so one long unbroken
   project name would push its column past its share and break the ratio.

   WHY TWO COLUMN WRAPPERS AND NOT THREE PLACED CELLS. The first attempt put
   the three cells straight into the grid — identity at (1,1), resources at
   (1,2), deliverables spanning (2, 1/-1) — because that keeps the DOM in the
   order the narrow layout wants. It cannot hold the spacing: a spanning item
   distributes its surplus height into EVERY intrinsic row it crosses, and
   `auto`, `min-content` and `max-content` are all intrinsic, so row 1 grew
   past the project card and the gap under it measured 63px instead of 22.
   Only a definite or flexible track escapes that, and neither can be written
   for a card whose height is its content. A real flex column simply cannot
   have the problem — see the narrow step below for how the source order is
   then reconciled.

   NOTHING RESIZES WHEN A DELIVERABLE IS SELECTED. That is not this file's
   doing — the deliverables panel keeps a fixed-height body that scrolls
   (.pws-body), so its intrinsic height is the same in both of its states.
   ============================================================ */

.pw-workspace[b-fo5lbh43j9] {
    display: grid;
    grid-template-columns: minmax(0, 57fr) minmax(0, 43fr);
    /* The same measure the page separates its subjects at — see .pw-body. */
    gap: max(22px, var(--motiva-ws-band-gap, 22px));
    /* STRETCH — the grid default, and now stated by omission rather than
       overridden. It used to say `align-items: start`, which let each column
       take its own height and left the right column ending well above תוצרי
       ההגשה, with the leftover height showing as canvas under it. Both columns
       are items of ONE row now, so both are as tall as the row, and the row is
       as tall as its tallest content — which is תוצרי ההגשה, by construction
       (see .pws-body's clamp). */
}

/* A column is a stack of cards at the page's own card step, so the two
   sections on the right read as one vertical run rather than as two things
   that happen to share a track. */
.pw-col[b-fo5lbh43j9] {
    display: flex;
    flex-direction: column;
    gap: max(22px, var(--motiva-ws-band-gap, 22px));
    /* A grid item's `auto` minimum would let a long URL inside a resource tile
       hold its track open past its share. */
    min-width: 0;
    /* The block-axis twin of the line above: without it a stretched column
       refuses to be shorter than its own content, and a card that has more
       than its half would push the row taller instead of scrolling inside
       itself. */
    min-height: 0;
}

/* ── THE RIGHT COLUMN TAKES THE ROW'S HEIGHT, AND NEVER SETS IT ──
   `contain: size` is the whole mechanism, and it is the same one
   StudentDashboard's viewport-filling shell uses: it zeroes this element's
   INTRINSIC size, so the auto-sized grid row is measured from תוצרי ההגשה
   alone. The column's used height then comes back from the stretch above.

   Without it the row would be `max(left, right)` and the two halves would
   trade places the moment the project card is opened for editing or a team
   keeps enough resources to wrap a third row of tiles — the page would grow
   and תוצרי ההגשה would stretch to follow. With it the row is exactly תוצרי
   ההגשה's height in every state, and content that does not fit its half
   scrolls inside its own card (.pwi-inner / .pwr-grid).

   It is safe on the width because both tracks are `fr`: a flexible track is
   sized from the available space, never from its content, so zeroing this
   item's intrinsic size cannot collapse the column. Nothing here is
   `position: fixed`, so the containing-block change size containment implies
   re-parents nothing. */
.pw-col-project[b-fo5lbh43j9] {
    contain: size;
}

.pw-cell[b-fo5lbh43j9] {
    min-width: 0;
    min-height: 0;
}

/* ── THE TWO RIGHT CARDS SPLIT THE COLUMN IN HALF ──
   `flex: 1 1 0` — basis ZERO, not `auto`: with an auto basis the free space
   left over after the two cards' own content would be split evenly, which
   makes them differ by exactly the difference between their contents. From a
   zero basis the whole column is the free space, so each card is
   (column − 22px gap) / 2 whatever it holds inside.

   `min-height: 0` is what lets that hold when a card's content is taller than
   its half: without it a flex item cannot be shorter than its content, the
   halves become unequal and the column overflows. With it the card keeps its
   half and its own scroll region takes over. */
.pw-cell-identity[b-fo5lbh43j9],
.pw-cell-resources[b-fo5lbh43j9] {
    flex: 1 1 0;
}

/* ── THE STACK STEP, measured on .pw-body rather than on the window ──
   1000px of CONTENT WIDTH is where the narrower (43%) column drops to ~410px —
   about where a deliverable row's title and its status stop coexisting on one
   line.

   THE ORDER CHANGES HERE, and this is the one place it does. Stacked, the page
   must read פרטי הפרויקט → תוצרי ההגשה → משאבי הפרויקט, and the markup nests
   the first and third together inside the right column. `display: contents`
   drops both wrappers out of the box tree, so all three cells become direct
   children of one flex column and `order` can sequence them. The wrappers'
   own gap goes with them, which is why .pw-workspace carries the 22px here
   too. */
@container pw-body (max-width: 1000px) {
    .pw-workspace[b-fo5lbh43j9] {
        display: flex;
        flex-direction: column;
        gap: 22px;
        /* STRETCH, and it has to be said. `align-items: start` above is a
           GRID rule about block-axis alignment inside a row; in a column flex
           container the same property is the CROSS axis, i.e. the horizontal
           one, so leaving it inherited shrank each stacked card to its own
           content width (measured 972 / 660 / 578 in a 1527px column). */
        align-items: stretch;
    }

    .pw-col[b-fo5lbh43j9] {
        /* This also drops .pw-col-project's size containment with the box it
           was declared on — an element that generates no box contains nothing —
           so the stacked column is measured from its content again, which is
           what it wants. */
        display: contents;
    }

    /* BACK TO CONTENT-DRIVEN HEIGHTS. The cells are items of .pw-workspace
       itself here, and the equal-halves rule above would follow them into the
       stack: a column flex container with zero-basis items sizes every one of
       them to the tallest, so three cards of different lengths would become
       three cards of one length with air in two of them. Stacked, each card is
       its own content again — and with no definite height above them, neither
       inner scroll region can engage. */
    .pw-cell[b-fo5lbh43j9] {
        flex: 0 0 auto;
    }

    .pw-cell-identity[b-fo5lbh43j9]     { order: 1; }
    .pw-cell-deliverables[b-fo5lbh43j9] { order: 2; }
    .pw-cell-resources[b-fo5lbh43j9]    { order: 3; }
}

/* ── Overall project progress, on the title line ─────────────
   Replaces the `.pw-journey-pct` rule that painted "· 42% מהמסע" inside the
   journey head. That measure moved to the page header; this is its badge.

   A BRAND-TINTED PILL, not a KPI. It carries the signature violet at a
   fraction of its strength so it reads as belonging to the product rather
   than as a status, and it is sized to sit under the h1's cap height —
   a title annotation, never a second headline. The number is the only
   thing at full ink. */
.pw-progress-badge[b-fo5lbh43j9] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;

    padding: 4px 11px;
    border-radius: var(--motiva-radius-full);
    background: rgba(79, 70, 229, 0.07);

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

/* Latin digits and a percent sign inside an RTL line — <bdi> in the markup
   isolates them; tabular figures stop the badge resizing as progress moves. */
.pw-progress-num[b-fo5lbh43j9] {
    font-variant-numeric: tabular-nums;
    font-weight: var(--motiva-font-weight-bold);
}

/* The word is the quieter half: the number is the measure, "התקדמות" only
   says which measure it is. */
.pw-progress-word[b-fo5lbh43j9] {
    font-weight: var(--motiva-font-weight-medium);
    opacity: 0.8;
}

/* On a phone the badge drops under the title rather than squeezing it — the
   header is already a column at this width. */
@media (max-width: 560px) {
    .pw-progress-badge[b-fo5lbh43j9] { font-size: 12px; padding: 3px 9px; }
}
/* /Pages/ProjectWorkspace/SubmissionDeliverableDetail.razor.rz.scp.css */
/* ============================================================
   SubmissionDeliverableDetail — one deliverable, in place of the list
   Prefix: pwv-

   It draws NO surface of its own: no border, no radius, no background, no
   padding. It occupies .pws-body inside a card that already supplies all four,
   and a panel inside a panel one pixel in from its edge is the classic double
   card. Earlier versions carried a card of their own because they were a
   separate block below a grid, and then a drawer's contents; both are gone.

   ONE COLUMN. The two-column arrangement (`.pwv-cols` / `.pwv-main` /
   `.pwv-side`, with a `@container pwv (min-width: 700px)` step) existed for a
   full-width panel where the content ran down a 1560px surface with most of it
   empty. In a 43% column there is no second column to have, so the container
   query, the two tracks and the aside are removed rather than left to match
   nothing.
   ============================================================ */

.pwv[b-zlb63ha04m] {
    display: flex;
    flex-direction: column;
    /* A short fade, so the swap from the list reads as a change of content
       rather than as a repaint. No slide: the region does not move. */
    animation: pwv-appear-b-zlb63ha04m 160ms var(--motiva-motion-easing-standard) both;
}

@keyframes pwv-appear-b-zlb63ha04m {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── The way back ─────────────────────────────────────────────
   A quiet text control at the top of the panel, in the same place for every
   deliverable. Not an MButton: the smallest of those is a labelled pill, and a
   pill here would compete with "סימון כהושלם" at the foot — the one action on
   this panel that should look like an action. */
.pwv-back[b-zlb63ha04m] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    /* GEOMETRY ONLY. The surface, the edge, the ink, the hover and the focus
       halo all come from `.motiva-cta-outline` on the element — the shared
       secondary-action treatment "עריכת פרטים" and "העלאת לוגו" use, defined
       once in motiva-base.css. This is the same KIND of action, so it takes
       the same language rather than a third one.

       It used to be transparent, borderless, 11.5px and --motiva-text-muted:
       a control that read as helper text and was the easiest thing on the
       panel to miss, on a view whose ONLY way back it is. The negative margin
       went with the borderless treatment — a real bordered control should not
       hang outside the panel's own inset. */
    margin: 0 0 14px;
    padding: 5px 11px;
    border-radius: var(--motiva-radius-full);
    font-family: inherit;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.6;
}

/* ── Head ─────────────────────────────────────────────────────
   The same mark the row carries, at the same treatment, beside the title —
   which is what identifies WHICH deliverable replaced the list. */
.pwv-head[b-zlb63ha04m] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-block-end: 14px;
    padding-block-end: 12px;
    border-block-end: 1px solid var(--motiva-border-card, var(--motiva-border-subtle));
}

.pwv-icon[b-zlb63ha04m] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-block-start: 1px;
}

.pwv-headtext[b-zlb63ha04m] {
    min-width: 0;
}

/* THE PANEL'S SUBJECT, and it has to outrank the prose under it.
   --motiva-font-size-h4 resolves to 13px in this scope while the requirement
   text below resolved to 16px — the title was rendering SMALLER than the body
   it introduces, which is most of why this view read as weak. Stated in px so
   the relationship cannot invert again when a token moves, and dropped from
   bold to semibold: at 15.5px the extra weight was doing the work size should. */
.pwv-title[b-zlb63ha04m] {
    margin: 0;
    font-size: var(--motiva-font-size-item, 15.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.35;
    color: var(--motiva-text-primary);
}

.pwv-meta[b-zlb63ha04m] {
    margin: 3px 0 0;
    font-size: var(--motiva-font-size-caption, 12px);
    line-height: 1.5;
    color: var(--motiva-text-muted);
}

/* ── Content blocks ───────────────────────────────────────── */

/* The per-deliverable empty line. Deliberately the quietest thing in the
   panel: same caption step and muted ink as the other secondary lines in the
   student scope, no surface, no border, no icon. It reports an absence — it is
   not a warning, and it must not look like the callout below it. */
.pwv-empty[b-zlb63ha04m] {
    margin: 0;
    /* Still the quietest line in the panel — it reports an absence — but no
       longer 11.5px in the SUBTLE ink, which is the placeholder step and made
       a real sentence look like disabled chrome. One step under the body, in
       the muted ink. */
    font-size: var(--motiva-font-size-sm, 13px);
    line-height: 1.6;
    color: var(--motiva-text-muted);
}

/* BODY. One step for every prose block in the panel — intro, requirement and
   note all read at 13.5/1.65 in the secondary ink. They used to resolve to
   14.5px, 16px and 11.5px respectively from three different tokens, which is
   the inconsistency this view was showing: the requirements were the largest
   text on screen and the notes the smallest, with no meaning behind either. */
.pwv-intro[b-zlb63ha04m] {
    margin: 0;
    max-width: 68ch;
    font-size: var(--motiva-font-size-sm, 13.5px);
    line-height: 1.65;
    color: var(--motiva-text-secondary);
}

/* 16px between blocks. `:first-child` zeroes it — a category with no intro
   opens on its requirements, and a leading gap there is dead space at the top
   of the panel. */
.pwv-block[b-zlb63ha04m] {
    margin-block-start: 16px;
}

.pwv > :first-child[b-zlb63ha04m] {
    margin-block-start: 0;
}

/* SECTION HEADINGS — "מה כולל…", "לרשותכם", "חומרי העבודה של הצוות".
   These name the panel's real sections, so they are read as structure rather
   than as micro-labels. They were the Master's smallest label step: 11px, bold,
   tracked, --motiva-text-muted — which at that size reads as a caption for the
   thing above it rather than a heading for the thing below, and it made every
   section look faded before its content was even reached.

   13px semibold in the SECONDARY ink: one clear step under the 15.5px title and
   one clear step over the 13.5px body, with the letter-spacing dropped because
   tracking is a device for small caps-like labels, not for a heading at reading
   size. */
.pwv-blocklabel[b-zlb63ha04m] {
    margin: 0 0 8px;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.45;
    color: var(--motiva-text-secondary);
}

.pwv-reqs[b-zlb63ha04m] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pwv-req[b-zlb63ha04m] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.pwv-bullet[b-zlb63ha04m] {
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    margin-block-start: 8px;
    border-radius: 50%;
    background: var(--motiva-text-subtle, var(--motiva-text-muted));
}

.pwv-reqtext[b-zlb63ha04m] {
    max-width: 68ch;
    font-size: var(--motiva-font-size-sm, 13.5px);
    line-height: 1.65;
    color: var(--motiva-text-secondary);
}

/* ── Informational callout ────────────────────────────────────
   NEUTRAL by decision: amber would be a fourth semantic colour, and rose reads
   as an error on what is an ordinary note. Hierarchy comes from the quiet
   fill, the leading hairline and the label's weight — not from hue. Kept
   component-scoped rather than promoted to a shared component: this is its
   only consumer today. */

.pwv-callout[b-zlb63ha04m] {
    margin-block-start: 16px;
    padding: 13px 15px;
    border-radius: var(--motiva-radius-sm);
    border-inline-start: 2px solid var(--motiva-border-strong);
    background: var(--motiva-surface-secondary);
}

/* The callout's label is a section heading too — same step, so "לתשומת לבכם"
   does not read as a smaller class of thing than "מה כולל…" beside it. */
.pwv-calloutlabel[b-zlb63ha04m] {
    margin: 0 0 7px;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.45;
    color: var(--motiva-text-secondary);
}

.pwv-note[b-zlb63ha04m] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    line-height: 1.65;
    color: var(--motiva-text-secondary);
}

.pwv-note + .pwv-note[b-zlb63ha04m] { margin-block-start: 7px; }

/* ── Course documents ─────────────────────────────────────────
   Small chips, one per resolved Knowledge Center resource. The mark stays flat
   ink rather than the gradient: at 13px the sweep collapses to its blue
   midpoint. */

.pwv-docs[b-zlb63ha04m] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.pwv-doc[b-zlb63ha04m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--motiva-border-card, var(--motiva-border-subtle));
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-secondary);
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-medium);
    text-decoration: none;
    transition: border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                background   var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.pwv-doc:hover[b-zlb63ha04m] {
    border-color: var(--motiva-border-strong);
    background: var(--motiva-surface-hover);
    color: var(--motiva-text-primary);
}

.pwv-doc:focus-visible[b-zlb63ha04m] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 1px;
}

.pwv-doclabel[b-zlb63ha04m] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── The team's own work ──────────────────────────────────────
   ROWS, not chips: unlike a course document, an artifact carries a name the
   team chose plus the kind of thing it is, and those two facts want a line
   each. They are also the evidence behind the state below them, so they are
   worth more weight than a chip gives.

   The whole row is a real <a>, so opening it is the browser's job. */

.pwv-arts[b-zlb63ha04m] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pwv-art[b-zlb63ha04m] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid var(--motiva-border-card, var(--motiva-border-subtle));
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-primary);
    text-decoration: none;
    transition: border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                background   var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.pwv-art:hover[b-zlb63ha04m] {
    border-color: var(--motiva-border-strong);
    background: var(--motiva-surface-hover);
}

.pwv-art:focus-visible[b-zlb63ha04m] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

.pwv-art-icon[b-zlb63ha04m] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.pwv-art-text[b-zlb63ha04m] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.pwv-art-label[b-zlb63ha04m] {
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pwv-art-kind[b-zlb63ha04m] {
    font-size: var(--motiva-font-size-caption, 11px);
    color: var(--motiva-text-muted);
}

/* The "no artifacts yet" line — the only place on this panel that says where
   the association is made, which is the one actionable thing about it. */
.pwv-hint[b-zlb63ha04m] {
    margin: 0;
    max-width: 60ch;
    font-size: var(--motiva-font-size-caption);
    line-height: var(--motiva-line-height-body);
    color: var(--motiva-text-muted);
}

/* ── Where it stands ──────────────────────────────────────────
   A DERIVED state and ONE act. This replaces the three-position segmented
   control (`.pwv-seg` / `.pwv-seg-btn` / `.pwv-seg-on`, borrowed from
   PlanningToolbar) that used to let a student set "בעבודה" by hand — a value
   the system now reads from the artifacts above.

   The block is set apart by a top rule rather than by a filled panel: it is
   the foot of the panel's reading order, not a second subject. */
.pwv-state[b-zlb63ha04m] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-block-start: 18px;
    padding-block-start: 14px;
    border-block-start: 1px solid var(--motiva-border-card, var(--motiva-border-subtle));
}

.pwv-statetext[b-zlb63ha04m] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.pwv-statelabel[b-zlb63ha04m] {
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: 0.06em;
    color: var(--motiva-text-muted);
}

/* The same dot-and-word pattern the list row draws, at the same values, so a
   deliverable's state looks identical in both states of the panel. */
.pwv-status[b-zlb63ha04m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pwv-dot[b-zlb63ha04m] {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: var(--motiva-radius-full);
    background: var(--pwv-dot-color);
}

.pwv-statustext[b-zlb63ha04m] {
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--pwv-status-ink);
}

.pwv-status-idle[b-zlb63ha04m] {
    --pwv-dot-color:  var(--motiva-border-strong);
    --pwv-status-ink: var(--motiva-text-muted);
}

.pwv-status-progress[b-zlb63ha04m] {
    --pwv-dot-color:  var(--motiva-color-violet, var(--motiva-color-indigo));
    --pwv-status-ink: var(--motiva-text-secondary);
}

.pwv-status-done[b-zlb63ha04m] {
    --pwv-dot-color:  var(--motiva-color-teal);
    --pwv-status-ink: var(--motiva-color-teal);
}

/* Why the state is what it is — one quiet line, so nothing about a derived
   value is mysterious. */
.pwv-statewhy[b-zlb63ha04m] {
    margin: 0;
    max-width: 46ch;
    font-size: var(--motiva-font-size-caption, 11.5px);
    line-height: var(--motiva-line-height-body);
    color: var(--motiva-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .pwv[b-zlb63ha04m]      { animation: none; }
    .pwv-back[b-zlb63ha04m],
    .pwv-doc[b-zlb63ha04m],
    .pwv-art[b-zlb63ha04m]  { transition: none; }
}
/* /Pages/ProjectWorkspace/SubmissionDeliverableRow.razor.rz.scp.css */
/* ============================================================
   SubmissionDeliverableRow — one master-list row
   Prefix: pwd-

   ~52px, four facts on one line: mark · title + meta · status · chevron.

   WHAT THIS REPLACES. A ~120px card in a four-column grid, with the mark on
   its own line, a foot row and a selected state (`.pwd-selected`) that firmed
   the border while a drawer showed its content. None of that survives: there
   is no grid, no tile height to stretch to, no expanded state and no selected
   state — clicking a row replaces the whole list with the deliverable's
   details, so the row that was clicked is not on screen to be marked.
   ============================================================ */

/* ONE <button>, laid out as a row. The whole strip is the control, so the
   click target, the keyboard activation and the focus ring are the browser's.

   `width: 100%` + `box-sizing` because a button does not fill its flex parent
   on its own, and a row that is narrower than its neighbours reads as broken
   rather than as compact. */
.pwd[b-p4w8uob5md] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;

    border: 1px solid var(--motiva-border-card, var(--motiva-border-subtle));
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-primary);
    cursor: pointer;
    font-family: inherit;
    text-align: start;
    transition: border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                background    var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

/* A hairline that firms up plus the neutral hover surface. NOT a brand fill:
   eight rows, one of them washed violet, would be the loudest thing on the
   page for a state that only means "the pointer is here". */
.pwd:hover[b-p4w8uob5md] {
    border-color: var(--motiva-border-strong);
    background: var(--motiva-surface-hover);
}

.pwd:focus-visible[b-p4w8uob5md] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

/* No chip: .motiva-ico-gradient (motiva-base.css) supplies the box and the
   fallback ink, #motivaIconGradient (AppLayout) paints the stroke. */
.pwd-icon[b-p4w8uob5md] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

/* The text column takes the slack, and `min-width: 0` is what actually lets
   its children ellipsise instead of pushing the status off the row. */
.pwd-text[b-p4w8uob5md] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

/* ONE LINE, ellipsised. A title that wraps makes its row taller than its
   neighbours, and eight rows of two different heights stop reading as a list. */
.pwd-title[b-p4w8uob5md] {
    font-size: var(--motiva-font-size-item, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.3;
    color: var(--motiva-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pwd-meta[b-p4w8uob5md] {
    font-size: var(--motiva-font-size-caption);
    line-height: 1.3;
    color: var(--motiva-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Status: a dot and a word, never a pill ───────────────────
   MStatusDot's inline pattern at its own measurements (7px circle, 6px to the
   label, caption step, semibold). See the .razor for why the neutral tone
   means this is drawn here rather than with that component. */

.pwd-status[b-p4w8uob5md] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.pwd-dot[b-p4w8uob5md] {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: var(--motiva-radius-full);
    background: var(--pwd-dot-color);
}

.pwd-statustext[b-p4w8uob5md] {
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: var(--motiva-line-height-caption);
    color: var(--pwd-status-ink);
    white-space: nowrap;
}

/* Not started — the absence of a status, so neutral on both halves. */
.pwd-status-idle[b-p4w8uob5md] {
    --pwd-dot-color:  var(--motiva-border-strong);
    --pwd-status-ink: var(--motiva-text-muted);
}

/* בעבודה — the dot carries the brand tone; the LABEL stays ordinary ink. A
   violet word repeated down the list would put brand colour on text that is
   only telling you where something stands. */
.pwd-status-progress[b-p4w8uob5md] {
    --pwd-dot-color:  var(--motiva-color-violet, var(--motiva-color-indigo));
    --pwd-status-ink: var(--motiva-text-secondary);
}

/* הושלם — the one state worth reading in colour, so both halves take teal. */
.pwd-status-done[b-p4w8uob5md] {
    --pwd-dot-color:  var(--motiva-color-teal);
    --pwd-status-ink: var(--motiva-color-teal);
}

/* ── The open affordance ──────────────────────────────────────
   SECONDARY, and sized like it: the whole row is the control, so this is a
   bare 14px caret in muted ink with no hit box and no border of its own. It
   points along the reading direction (left, in this RTL shell) the way a
   navigation row's does, and it nudges on hover — the one bit of motion that
   says "this goes somewhere" without animating the row itself. */
.pwd-chevron[b-p4w8uob5md] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: var(--motiva-text-subtle, var(--motiva-text-muted));
    transition: transform var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

/* A PHYSICAL translate, matched to the arrow it moves: transforms are not
   flipped by `direction`, and this caret points left (the reading end in this
   RTL shell), so -2px is the direction it is already pointing. */
.pwd:hover .pwd-chevron[b-p4w8uob5md] {
    transform: translateX(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .pwd[b-p4w8uob5md],
    .pwd-chevron[b-p4w8uob5md] { transition: none; }

    .pwd:hover .pwd-chevron[b-p4w8uob5md] { transform: none; }
}
/* /Pages/ProjectWorkspace/SubmissionDeliverablesSection.razor.rz.scp.css */
/* ============================================================
   SubmissionDeliverablesSection — "תוצרי ההגשה"
   Prefix: pws-

   ONE CARD, holding a head that never changes and a body that swaps between
   the list of eight deliverables and one deliverable's details.

   THE DRAWER IS GONE. This file used to carry a `position: fixed`
   `.pws-drawer` — a floating panel docked to the viewport's reading end, with
   a bottom-sheet variant under 760px and two entrance keyframes. It existed
   for one reason: to open a deliverable's details without the grid behind it
   moving. Swapping the content inside a fixed-height region achieves that
   without an overlay, without a surface that scrolls away from the list it
   belongs to, and without a second responsive shape to maintain. Nothing
   `position: fixed` remains in this component.
   ============================================================ */

/* MCard is rendered with Padding.None, so the inset lives here — the SAME
   inset ProjectIdentityCard's .pwi-inner and .pwr use, because these cards sit
   side by side and any difference shows up as a misaligned first line.

   `flex: 1` + `min-height: 0`: MCard `Fill` makes the card a full-height flex
   column so it matches the identity card beside it in the workspace row, and
   this is the child that has to take that height.

   NOT a size container. It carried `container-type: inline-size` for the old
   62/38 split; besides being unused, `container-type` implies `contain:
   layout`, which makes this element the containing block for any fixed
   descendant. The page's own container (.pw-body) is declared where the
   breakpoint that reads it lives. */
/* THE BLOCK INSET IS 20/18, NOT 24/22, AND ALL THREE CARDS MOVED TOGETHER.
   This card is the one that SETS the workspace row's height, so every pixel
   of block padding here is a pixel of page scroll; 4px off the top and the
   foot is below the threshold where the head stops reading as inset, and it
   is the cheapest height on the page. The INLINE inset is untouched at 26px —
   that is what gives the content its measure. 20/18 have no token (the scale
   goes 16 → 24), the same reason 26 and 22 were already literals here. */
.pws[b-g4v38oln8n] {
    display: flex;
    flex-direction: column;
    padding: 20px 26px 18px;
    flex: 1;
    min-height: 0;
}

.pws-head[b-g4v38oln8n] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    /* Wrap rather than squeeze: in the narrower column the count drops under
       the heading instead of forcing it to wrap around it. */
    flex-wrap: wrap;
    gap: var(--motiva-space-md);
    /* Two pixels off each side of the rule, for the same reason as the card's
       inset above: this is head rhythm, not content, and it is spent four
       times over in the row's total height. */
    margin-block-end: 10px;
    padding-block-end: 6px;
    border-block-end: 1px solid var(--motiva-border-card, var(--motiva-border-subtle));
}

/* Heading + its MInfoTip on one line. The tip's bubble is absolutely
   positioned out of flow, so this row is exactly as tall as the heading was
   on its own — which is the whole point of moving the sentence into it. */
.pws-headtext[b-g4v38oln8n] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pws-heading[b-g4v38oln8n] {
    margin: 0;
    font-size: var(--motiva-font-size-h3);
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: var(--motiva-letter-spacing-section, normal);
    line-height: var(--motiva-line-height-heading);
    color: var(--motiva-text-primary);
}

/* "3 מתוך 8 הושלמו". Never wraps — a summary that breaks across two lines
   stops reading as one fact. */
.pws-count[b-g4v38oln8n] {
    flex-shrink: 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
    white-space: nowrap;
}

/* MProgressBar owns the track, the fill and the ARIA; only the gap under it
   belongs to this section. ::deep because the bar's root carries MProgressBar's
   scope, never this one's. */
[b-g4v38oln8n] .pws-progress {
    margin-block-end: 10px;
}

/* ============================================================
   THE SWAPPING REGION

   THIS IS THE RULE THAT KEEPS THE PAGE STILL. The body's height comes from
   `block-size`, not from its content, so it is identical whether it holds
   eight rows or one deliverable's details — which means selecting a
   deliverable cannot change this card's intrinsic height, the workspace row's
   height, the identity card beside it, or the position of משאבי הפרויקט below.
   Everything the three earlier attempts (in-tile accordion, 62/38 split,
   floating drawer) were built to protect falls out of one declaration.

   `clamp(300px, 48vh, 480px)`: this declaration IS the workspace row's height
   — the right column is measured from this card (see .pw-col-project) — so it
   is also the page's one real scroll knob, and it was trimmed by one step at
   each stop (from 320 / 52vh / 520). The middle term is what does the work:
   48vh is the point at which the whole page — top bar, title, מסע הפרויקט and
   this row — lands inside a ~795px viewport instead of running ~60px past it,
   which is the scroll this trim exists to remove. 300px is still the floor at
   which a deliverable's details are worth scrolling rather than peeping at,
   and 480px still exceeds what the middle term yields on any laptop.

   HOW FAR IT CAN GO IS SET BY THE OTHER COLUMN, NOT BY THIS LIST. The two
   cards on the right split this height in half, and the taller of them needs
   ~198px of content; at 48vh each half is ~235px, so neither of them gains a
   scrollbar. Going much below this would start putting one there, which is the
   line this value sits above deliberately.

   THE LIST ITSELF SCROLLED BEFORE THE TRIM AND STILL DOES. The eight rows want
   ~487px, which is more than 52vh yielded on a laptop either, so the panel has
   always shown ~7 of them and scrolled for the last; at 48vh it shows ~6.5.
   That is a property of the row count, not of this value — the only way to fit
   all eight would be a row taller than the viewport it has to fit inside.

   `flex: 1 1 auto` on top of that basis: when the identity card beside it is
   TALLER, the stretched card hands this body the extra height and the list
   simply shows more of itself. It grows only from the row — never from what
   is inside it — so the no-jump promise is unaffected.
   ============================================================ */
.pws-body[b-g4v38oln8n] {
    flex: 1 1 auto;
    block-size: clamp(300px, 48vh, 480px);
    min-block-size: 0;
    overflow-y: auto;

    /* VERTICAL ONLY, AND IT HAS TO BE SAID OUT LOUD. `overflow-y: auto` alone
       computes the other axis to `auto` as well, and the detail view's
       "חזרה לתוצרי ההגשה" button hangs 6px past the content box on purpose
       (.pwv-back's -6px margin, so its label lines up with the text under it).
       Under `direction: rtl` that overhang sat on the START edge, where a
       scroller cannot reach — it was simply clipped. The flip below turns the
       same edge into the END one, which made those 6px scrollable and put a
       17px horizontal bar across the foot of the card. Clipping it again is
       exactly the old rendering, minus the bar. */
    overflow-x: hidden;

    /* THE SCROLLBAR GOES ON THE PHYSICAL RIGHT EDGE.
       A scroll box puts its scrollbar on the inline-end edge, which under this
       app's `direction: rtl` is the LEFT one — so the bar was landing between
       the list and the card's inner edge, on the side the rows' status column
       reads down. Flipping ONLY this box to `ltr` moves the bar to the right
       edge; the two things that can render inside it restore `rtl` immediately
       below, so every row's text, alignment, padding and order are computed
       exactly as before.

       This is the pattern the lecturer/mentor request queue already uses for
       the same problem — see .rqw-list / .rqw-list-inner in
       motiva-request-workspace.css, whose thin-bar declarations are copied
       below with it. Nothing else about the box changes: no height, no width,
       no card spacing. */
    direction: ltr;

    /* THE BAR IS THIN BECAUSE THE GUTTER IS SPACING. A space-taking scrollbar
       is subtracted from the content box, so the list sits inset by exactly
       its width on whichever edge it lands — and now that the bar is on the
       reading edge, a system-width one would leave the rows visibly short of
       where the heading and the progress bar above them end. The bar's own
       width is therefore part of this fix, not a restyle for its own sake.
       Same 4px and same colours as .rqw-list; see the rules under the list. */

    /* Room for the scrollbar so a scrolling list does not sit under it, and
       for the focus ring of the last row. It is inline-end OF THIS BOX, so it
       follows the flip above and stays on the scrollbar's own side. */
    padding-inline-end: 2px;
}

/* ── RTL restored, one step in ────────────────────────────────────────────
   The two states .pws-body can hold, and the reason the flip above is invisible
   to everything except the scrollbar. `.pws-list` is this component's own
   element; `.pwv` is SubmissionDeliverableDetail's root, which carries ITS
   scope and not this file's — hence `::deep`, the same way .pws-progress is
   reached above. */
.pws-list[b-g4v38oln8n],
[b-g4v38oln8n] .pwv {
    direction: rtl;
}

/* ── The 4px bar ─────────────────────────────────────────────────────────
   Measured in place, on this box: 4px with these rules alone, 12.5px the
   moment `scrollbar-width: thin` is added, 16.5px native. That is not a
   contradiction — Chromium ignores ::-webkit-scrollbar entirely as soon as
   EITHER standard property (`scrollbar-width` / `scrollbar-color`) is set, and
   falls back to a system bar. So the standard properties are declared only
   for engines that have no ::-webkit-scrollbar to begin with, which is what
   the @supports guard below tests for. .rqw-list sets both unconditionally and
   therefore runs at the wider bar in Chrome; it can absorb it inside its own
   10px inline padding, and this list — flush to the card's measure — cannot. */
.pws-body[b-g4v38oln8n]::-webkit-scrollbar       { width: 4px; }
.pws-body[b-g4v38oln8n]::-webkit-scrollbar-track { background: transparent; }
.pws-body[b-g4v38oln8n]::-webkit-scrollbar-thumb {
    background: rgba(27, 26, 34, 0.15);
    border-radius: 2px;
}

@supports not selector(::-webkit-scrollbar) {
    .pws-body[b-g4v38oln8n] {
        scrollbar-width: thin;
        scrollbar-color: rgba(27, 26, 34, 0.15) transparent;
    }
}

/* ── The list ─────────────────────────────────────────────────
   A VERTICAL STACK, not a grid. The eight deliverables were a four-column wall
   of ~120px tiles while this section was full width; in a 43% column that same
   grid is two columns of tall cards and only three of them fit in the body.
   Rows of ~52px put all eight on screen at once, which is what a master list
   is for. */
.pws-list[b-g4v38oln8n] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pws-note[b-g4v38oln8n] {
    margin: 12px 0 0;
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-muted);
}

.pws-note-error[b-g4v38oln8n] {
    color: var(--motiva-color-rose-ink, var(--motiva-color-rose));
}

/* The failure line replaces the progress bar, so it needs the bar's own gap. */
.pws-note-error:first-of-type[b-g4v38oln8n] {
    margin-block-end: 14px;
}
/* /Pages/Requests/NewRequestModal.razor.rz.scp.css */
/* ============================================================
   NewRequestModal — Motiva final design single-step form.
   Reference: Motiva Student Requests final.dc.html (createOpen overlay).

   460px wide compact modal centered over the page.
   Below 720px becomes a bottom sheet.
   ============================================================ */

.nrm-overlay[b-q7aj0wm6js] {
    position: fixed;
    inset: 0;
    z-index: var(--motiva-z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
    background: rgba(0, 0, 0, 0.48); /* standard scrim — same as MModal and SubmissionModal */
}

.nrm-sheet[b-q7aj0wm6js] {
    position: relative;
    z-index: var(--motiva-z-modal);
    /* 460px was a phone form standing on a desktop: the type chips wrapped
       to three or four rows, and "פירוט" got a measure narrower than the
       hint text under it. 560px lets the chips settle into far fewer rows
       and gives the subject and description a real line length, while
       staying a compact work surface — deliberately nowhere near the 720px
       the reading-surface modals take.

       The height ceiling moves with it: at 700px the form scrolled almost
       immediately once an extension was picked, which is what made it read
       as crowded rather than merely tall.

       Both caps are unchanged in kind — `calc(100vw - 52px)` still governs
       every narrow viewport above the breakpoint, and the ≤720px rule below
       still takes the sheet full-width. 560 + 52 = 612 < 720, so the two
       never disagree. */
    width: 560px;
    max-width: calc(100vw - 52px);
    max-height: min(90vh, 760px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: 26px;
    box-shadow: 0 2px 4px rgba(27, 26, 34, 0.06),
                0 30px 60px -30px rgba(27, 26, 34, 0.5);
}

/* ── Header ── */

.nrm-head[b-q7aj0wm6js] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    /* 4px off the top and the bottom. Empty space above a one-line title is
       the cheapest thing in this sheet to give back, and it is what pays for
       the wider gap between the fields below. */
    padding: 22px 28px 14px;
}

.nrm-title[b-q7aj0wm6js] {
    flex: 1;
    display: block;
    font-size: var(--motiva-font-size-h3, 18px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--motiva-text-primary);
}

.nrm-x[b-q7aj0wm6js] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #9B96A8;
    font-size: var(--motiva-font-size-h3, 18px);
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nrm-x:hover:not(:disabled)[b-q7aj0wm6js] { background: rgba(27, 26, 34, 0.05); color: #1B1A22; }

/* ── Body ── */

.nrm-body[b-q7aj0wm6js] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 28px 10px;
    display: flex;
    flex-direction: column;
    /* The one gap between the form's subjects — type, נושא, פירוט,
       מסמכים. At 14px it was barely more than the 7px a label already
       leaves above its own control, so a field and its neighbour separated
       about as much as a label and its input: the form read as one column
       of rows rather than as four questions. */
    gap: 20px;
}

/* ── Fields ── */

.nrm-field[b-q7aj0wm6js] { display: block; }

.nrm-label[b-q7aj0wm6js] {
    display: block;
    margin: 0 0 7px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: 600;
    color: #6B6779;
}

.nrm-input[b-q7aj0wm6js],
.nrm-textarea[b-q7aj0wm6js] {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    border: 1px solid rgba(27, 26, 34, 0.12);
    border-radius: 12px;
    background: #FBFBFD;
    font-family: inherit;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: 500;
    color: var(--motiva-text-primary);
    outline: none;
}

.nrm-textarea[b-q7aj0wm6js] {
    resize: vertical;
    line-height: 1.5;
}

.nrm-input:focus-visible[b-q7aj0wm6js],
.nrm-textarea:focus-visible[b-q7aj0wm6js] {
    border-color: #6D28F5;
    outline: 2px solid rgba(109, 40, 245, 0.2);
    outline-offset: 1px;
}

.nrm-invalid[b-q7aj0wm6js] { border-color: var(--motiva-color-rose, var(--motiva-color-danger)); }

.nrm-err[b-q7aj0wm6js] {
    margin: 6px 0 0;
    font-size: var(--motiva-font-size-caption, 11.5px);
    color: var(--motiva-color-rose, var(--motiva-color-danger));
}

.nrm-err-banner[b-q7aj0wm6js] {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-color-danger-bg);
    font-size: var(--motiva-font-size-caption);
}

.nrm-hint[b-q7aj0wm6js] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    font-size: var(--motiva-font-size-caption, 11.5px);
    color: var(--motiva-text-muted);
}

.nrm-readonly[b-q7aj0wm6js] {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-hover);
    font-size: var(--motiva-font-size-body);
    color: var(--motiva-text-primary);
}

/* ── Extension target details ── */

.nrm-target-info[b-q7aj0wm6js] {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-sm);
    padding: 12px 14px;
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-hover);
}

.nrm-info-row[b-q7aj0wm6js] {
    display: flex;
    justify-content: space-between;
    gap: var(--motiva-space-md);
}

.nrm-info-k[b-q7aj0wm6js] {
    flex-shrink: 0;
    font-size: var(--motiva-font-size-caption, 11.5px);
    color: var(--motiva-text-muted);
}

.nrm-info-v[b-q7aj0wm6js] {
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-primary);
    text-align: end;
}

.nrm-banner[b-q7aj0wm6js] {
    margin: 0;
    padding: 9px 11px;
    border-radius: var(--motiva-radius-sm);
    font-size: var(--motiva-font-size-caption, 11.5px);
    line-height: var(--motiva-line-height-body);
}

.nrm-banner-warn[b-q7aj0wm6js] {
    background: var(--motiva-color-danger-bg);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
}

/* ── Attachments ── */

.nrm-files[b-q7aj0wm6js] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.nrm-chip[b-q7aj0wm6js] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-hover);
    font-size: var(--motiva-font-size-caption, 11.5px);
    color: var(--motiva-text-secondary);
}

.nrm-chip-size[b-q7aj0wm6js] { color: var(--motiva-text-muted); }

.nrm-chip-x[b-q7aj0wm6js] {
    border: 0;
    background: transparent;
    padding: 0;
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    color: var(--motiva-text-muted);
    cursor: pointer;
}

.nrm-chip-x:hover:not(:disabled)[b-q7aj0wm6js] { color: var(--motiva-text-primary); }

.nrm-attach[b-q7aj0wm6js] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--motiva-border-strong);
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-secondary);
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    cursor: pointer;
}

.nrm-attach:hover[b-q7aj0wm6js] { background: var(--motiva-surface-hover); }

.nrm-attach-off[b-q7aj0wm6js] { cursor: not-allowed; opacity: 0.55; }

.nrm-file-hidden[b-q7aj0wm6js] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

/* ── Footer ── */

.nrm-foot[b-q7aj0wm6js] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 28px 24px;
    justify-content: flex-end;
}

.nrm-foot-form[b-q7aj0wm6js] { justify-content: flex-end; }

/* "ביטול" plain text action */
.nrm-cancel-btn[b-q7aj0wm6js] {
    border: 0;
    background: transparent;
    padding: 0;
    font-family: inherit;
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: 600;
    line-height: 1;
    color: #6B6779;
    cursor: pointer;
}

.nrm-cancel-btn:hover:not(:disabled)[b-q7aj0wm6js] { color: #1B1A22; }
.nrm-cancel-btn:disabled[b-q7aj0wm6js] { opacity: 0.55; cursor: not-allowed; }

/* "שליחת הבקשה" gradient pill */
.nrm-submit-btn[b-q7aj0wm6js] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(to left, #6D28F5, #2E63E8 60%, #0FA8C2);
    color: #fff;
    font-family: inherit;
    font-size: var(--motiva-font-size-control, 13.5px);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: filter var(--motiva-motion-duration-fast) ease;
}

.nrm-submit-btn:hover:not(:disabled)[b-q7aj0wm6js] { filter: brightness(1.08); }

.nrm-submit-btn:disabled[b-q7aj0wm6js] {
    background: rgba(27, 26, 34, 0.08);
    color: #9B96A8;
    cursor: not-allowed;
    filter: none;
}

/* ── Done state ── */

.nrm-done[b-q7aj0wm6js] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--motiva-space-sm);
    padding: 36px 28px;
    text-align: center;
}

.nrm-done-ic[b-q7aj0wm6js] {
    width: 38px;
    height: 38px;
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-color-success-bg);
    color: var(--motiva-color-teal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nrm-done-ic svg[b-q7aj0wm6js] { width: 19px; height: 19px; }

.nrm-done-title[b-q7aj0wm6js] {
    font-size: var(--motiva-font-size-lg);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
}

.nrm-done-body[b-q7aj0wm6js] {
    margin: 0 0 6px;
    font-size: var(--motiva-font-size-sm);
    line-height: var(--motiva-line-height-body);
    color: var(--motiva-text-muted);
}

/* ── Spinner ── */

.nrm-spinner-sm[b-q7aj0wm6js] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: var(--motiva-radius-full);
    animation: nrm-spin-b-q7aj0wm6js 0.7s linear infinite;
}

/* When spinner appears inside the hint text (not the submit button) */
.nrm-hint .nrm-spinner-sm[b-q7aj0wm6js] {
    border-color: var(--motiva-border-subtle);
    border-top-color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

@keyframes nrm-spin-b-q7aj0wm6js {
    to { transform: rotate(360deg); }
}

/* ── Mobile: bottom sheet ── */
@media (max-width: 720px) {
    .nrm-overlay[b-q7aj0wm6js] {
        align-items: flex-end;
        padding: 0;
    }

    .nrm-sheet[b-q7aj0wm6js] {
        width: 100%;
        max-width: 100%;
        height: 96vh;
        max-height: 96vh;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -10px 40px rgba(30, 20, 60, 0.24);
    }

    .nrm-head[b-q7aj0wm6js] { padding-inline: 16px; }
    .nrm-body[b-q7aj0wm6js] { padding-inline: 16px; }
    .nrm-foot[b-q7aj0wm6js] { padding-inline: 16px; }
}
/* /Pages/Requests/RequestFilterBar.razor.rz.scp.css */
/* ============================================================
   RequestFilterBar — Motiva Requests.dc.html, the filter row.

   Design values kept literal where no token lands on them (the pill's
   6/13 padding, the 18px separator, the 212px menu). Everything with a
   token peer — surfaces, ink ramp, line ramp, radii, shadow, motion —
   goes through the token so the bar follows the theme.
   ============================================================ */

.rfb[b-bvcxdwg3tk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--motiva-space-sm);
    margin-block-end: 18px;
    padding-block-end: var(--motiva-space-md);
    border-block-end: 1px solid var(--motiva-border-subtle);
}

/* ── "הכל" reset chip ───────────────────────────────────────── */

.rfb-all[b-bvcxdwg3tk] {
    padding: 6px 13px;
    border: 0;
    border-radius: var(--motiva-radius-full);
    font-family: inherit;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    background: transparent;
    color: var(--motiva-text-muted);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.rfb-all:hover[b-bvcxdwg3tk] { color: var(--motiva-text-primary); }

/* Filled while nothing is filtered — "everything is showing". */
.rfb-all-on[b-bvcxdwg3tk] {
    background: var(--motiva-surface-hover);
    color: var(--motiva-text-primary);
}

.rfb-sep[b-bvcxdwg3tk] {
    width: 1px;
    height: 18px;
    background: var(--motiva-border-card, var(--motiva-border-subtle));
}

/* ── Dropdown triggers ──────────────────────────────────────── */

.rfb-menus[b-bvcxdwg3tk] {
    display: flex;
    align-items: center;
    gap: var(--motiva-space-sm);
}

.rfb-menu-wrap[b-bvcxdwg3tk] { position: relative; }

.rfb-trigger[b-bvcxdwg3tk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--motiva-border-card, var(--motiva-border-subtle));
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-secondary);
    font-family: inherit;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    cursor: pointer;
    transition: border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

/* Design: the border strengthens both when the menu is open AND when the
   axis has a selection, so a closed-but-filtered axis still reads as live. */
.rfb-trigger-open[b-bvcxdwg3tk],
.rfb-trigger-active[b-bvcxdwg3tk] { border-color: var(--motiva-border-strong); }
.rfb-trigger-open[b-bvcxdwg3tk]   { background: var(--motiva-surface-hover); }

.rfb-count[b-bvcxdwg3tk] {
    min-width: 16px;
    height: 16px;
    padding-inline: 4px;
    border-radius: 8px;
    background: var(--motiva-surface-hover);
    color: var(--motiva-text-secondary);
    font-size: var(--motiva-font-size-count, 10.5px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rfb-caret[b-bvcxdwg3tk] {
    font-size: 9px;
    color: var(--motiva-text-muted);
    display: inline-block;
    transition: transform var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.rfb-caret-open[b-bvcxdwg3tk] { transform: rotate(180deg); }

/* ── Menu panel ─────────────────────────────────────────────── */

/* Transparent full-viewport catcher: one outside click closes the menu with
   no document listener and no JS interop. Sits under the panel only. */
.rfb-backdrop[b-bvcxdwg3tk] {
    position: fixed;
    inset: 0;
    z-index: calc(var(--motiva-z-dropdown) - 1);
}

.rfb-panel[b-bvcxdwg3tk] {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 0;
    z-index: var(--motiva-z-dropdown);
    width: 212px;
    padding: var(--motiva-space-sm);
    background: var(--motiva-surface-primary);
    border-radius: var(--motiva-radius-md);
    box-shadow: var(--motiva-shadow-md);
}

.rfb-panel-empty[b-bvcxdwg3tk] {
    margin: 0;
    padding: var(--motiva-space-sm);
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-muted);
}

.rfb-option[b-bvcxdwg3tk] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: var(--motiva-space-sm);
    border: 0;
    border-radius: 9px;
    background: transparent;
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.rfb-option:hover[b-bvcxdwg3tk] { background: var(--motiva-surface-hover); }

.rfb-box[b-bvcxdwg3tk] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 1.5px solid var(--motiva-border-strong);
    border-radius: 5px;
    background: var(--motiva-surface-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.rfb-box-on[b-bvcxdwg3tk] {
    border-color: var(--motiva-text-primary);
    background: var(--motiva-text-primary);
}

.rfb-check[b-bvcxdwg3tk] {
    font-size: var(--motiva-font-size-caption, 10px);
    line-height: 1;
    color: var(--motiva-surface-primary);
}

.rfb-option-label[b-bvcxdwg3tk] {
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-secondary);
}

.rfb-option-label-on[b-bvcxdwg3tk] { font-weight: var(--motiva-font-weight-semibold); }

/* ── Active chips ───────────────────────────────────────────── */

.rfb-chip[b-bvcxdwg3tk] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-block: 6px;
    padding-inline: 11px 9px;
    border: 1px solid var(--motiva-border-strong);
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-surface-primary);
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
}

.rfb-chip-dot[b-bvcxdwg3tk] {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: var(--motiva-radius-full);
}

/* The status chips carry their bucket's semantic tone; the type chips are
   an axis with no status meaning, so they stay neutral — the Design draws
   them on the same #D9D5E0 hairline grey. */
.rfb-dot-neutral[b-bvcxdwg3tk] { background: var(--motiva-border-strong); }
.rfb-dot-waiting[b-bvcxdwg3tk] { background: var(--motiva-color-rose, var(--motiva-color-danger)); }
.rfb-dot-lecturer[b-bvcxdwg3tk] { background: var(--motiva-color-violet, var(--motiva-color-indigo)); }
.rfb-dot-done[b-bvcxdwg3tk] { background: var(--motiva-color-teal); }

.rfb-chip-x[b-bvcxdwg3tk] {
    border: 0;
    background: transparent;
    padding: 0;
    font-family: inherit;
    font-size: var(--motiva-font-size-lg, 15px);
    line-height: 1;
    color: var(--motiva-text-muted);
    cursor: pointer;
}

.rfb-chip-x:hover[b-bvcxdwg3tk] { color: var(--motiva-text-primary); }

/* ── Narrow viewports ───────────────────────────────────────
   The bar already wraps; below the Design's 720px break the two triggers
   take the full row so their labels never truncate against a chip. */
@media (max-width: 720px) {
    .rfb-menus[b-bvcxdwg3tk] { flex: 1 1 100%; }
    .rfb-trigger[b-bvcxdwg3tk] { flex: 1 1 0; justify-content: center; }
    .rfb-panel[b-bvcxdwg3tk] { width: 100%; }
}
/* /Pages/Requests/StudentExternalRequests.razor.rz.scp.css */
/* ============================================================
   Student External Requests — scoped (ser-* prefix)
   Two stacked sections: active iframe form, then status list.
   Reuses gradify theme tokens. RTL.
   ============================================================ */

.ser-page[b-zcyfkttf4s] {
    padding: 24px 28px 48px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Header ──────────────────────────────────────────────── */
/* The header SURFACE is now <MPageHeaderCard> (the shared .motiva-panel
   card). Only the leading icon chip stays page-scoped — it is passed into
   the component's Leading slot. */

.ser-header-icon[b-zcyfkttf4s] {
    width: 48px;
    height: 48px;
    border-radius: var(--g-radius-md);
    background: var(--g-accent-light);
    color: var(--g-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

/* ── States ──────────────────────────────────────────────── */

.ser-state[b-zcyfkttf4s] {
    padding: 32px;
    text-align: center;
    background: var(--g-bg-surface);
    border-radius: var(--g-radius-md);
    color: var(--g-text-muted);
    border: 1px dashed var(--g-border);
}
.ser-state-error[b-zcyfkttf4s] { color: var(--g-danger); }

.ser-empty[b-zcyfkttf4s] {
    padding: 18px;
    background: var(--g-bg-hover);
    border-radius: var(--g-radius-sm);
    color: var(--g-text-muted);
    text-align: center;
    font-size: var(--motiva-font-size-sm, 13px);
}

/* ── Section ─────────────────────────────────────────────── */

.ser-section[b-zcyfkttf4s] {
    /* Surface from the shared `.motiva-panel` class (motiva-base.css),
       worn in the markup. This block used to restate it as --g-bg-surface at
       --g-radius-md behind --g-border-light with --g-shadow-sm: the same white,
       but a 16px corner, a grey hairline and no lift, against the 24px violet-
       edged lifted panel every migrated screen renders. */
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* CARD TITLE — the shared h3 step (16px/700). Was a per-page literal. */
.ser-section-title[b-zcyfkttf4s] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--motiva-font-size-h3, 16px);
    font-weight: 700;
    color: var(--g-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ser-section-title .oi[b-zcyfkttf4s] { color: var(--g-accent); }

/* ── Form cards (one per active external form) ───────────── */

.ser-form-grid[b-zcyfkttf4s] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.ser-form-card[b-zcyfkttf4s] {
    /* Surface from the shared `.motiva-panel-tile` class (motiva-base.css),
       worn in the markup. This block used to restate it as --g-bg-surface at
       --g-radius-md behind --g-border-light with --g-shadow-sm: the same white,
       but a 16px corner, a grey hairline and no lift, against the 24px violet-
       edged lifted panel every migrated screen renders. */
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    transition: border-color 0.13s, box-shadow 0.13s;
}
.ser-form-card:hover[b-zcyfkttf4s] {
    border-color: var(--g-accent);
    box-shadow: var(--g-shadow-sm);
}

.ser-form-card-head[b-zcyfkttf4s] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ser-form-card-icon[b-zcyfkttf4s] {
    width: 36px;
    height: 36px;
    border-radius: var(--g-radius-sm);
    background: var(--g-accent-light);
    color: var(--g-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.ser-form-card-headtext[b-zcyfkttf4s] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ser-form-name[b-zcyfkttf4s] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--g-text-primary);
    line-height: 1.3;
}

.ser-form-pills[b-zcyfkttf4s] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Default tag: white paper under the Motiva gradient edge, dark ink.
   `--motiva-tag-brand-surface`, the product's one tag recipe. The edge is
   paid for out of the padding so the pill's outer box does not move. */
.ser-form-pill[b-zcyfkttf4s] {
    display: inline-block;
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 1px 9px;
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 600;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
    white-space: nowrap;
}
.ser-form-pill--year[b-zcyfkttf4s] {
    background: var(--g-bg-hover);
    color: var(--g-text-secondary);
    border: 1px solid var(--g-border-light);
}

.ser-form-desc[b-zcyfkttf4s] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--g-text-secondary);
    line-height: 1.5;
}

/* Primary CTA — opens the form in a new tab. */
.ser-form-cta[b-zcyfkttf4s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding: 10px 16px;
    background: var(--g-accent);
    color: #fff;
    border-radius: var(--g-radius-sm);
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
}
.ser-form-cta:hover[b-zcyfkttf4s] { opacity: 0.9; }
.ser-form-cta .oi[b-zcyfkttf4s] { font-size: var(--motiva-font-size-caption, 12px); }

.ser-form-note[b-zcyfkttf4s] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--motiva-font-size-caption, 12px);
    color: var(--g-text-muted);
}
.ser-form-note .oi[b-zcyfkttf4s] { font-size: var(--motiva-font-size-caption, 11px); }

.ser-form-card-error[b-zcyfkttf4s] {
    margin-top: auto;
    text-align: center;
    color: var(--g-danger);
    background: rgba(220, 53, 69, 0.08);
}

/* ── Status list ─────────────────────────────────────────── */

.ser-req-list[b-zcyfkttf4s] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ser-req-card[b-zcyfkttf4s] {
    background: var(--g-bg-hover);
    border: 1px solid var(--g-border-light);
    border-radius: var(--g-radius-sm);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ser-req-head[b-zcyfkttf4s] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.ser-req-head-main[b-zcyfkttf4s] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ser-req-type[b-zcyfkttf4s] {
    font-weight: 700;
    color: var(--g-text-primary);
}

.ser-req-ref[b-zcyfkttf4s] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-caption, 12px);
    color: var(--g-text-muted);
    direction: ltr;
}

.ser-req-status[b-zcyfkttf4s] {
    border-radius: 20px;
    padding: 3px 12px;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 700;
    white-space: nowrap;
}

.ser-status-pending[b-zcyfkttf4s] {
    background: rgba(255, 193, 7, 0.18);
    color: #8a5a00;
}
/* `.ser-req-status` is 3px/12px; the edge is paid for at 2px/11px.
   Pending (amber), done (green) and rejected (red) are untouched. */
.ser-status-progress[b-zcyfkttf4s] {
    padding: 2px 11px;
    border: 1px solid transparent;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
}
.ser-status-done[b-zcyfkttf4s] {
    background: rgba(40, 167, 69, 0.14);
    color: #1f7a3a;
}
.ser-status-rejected[b-zcyfkttf4s] {
    background: rgba(220, 53, 69, 0.14);
    color: var(--g-danger);
}
.ser-status-neutral[b-zcyfkttf4s] {
    background: var(--g-bg-hover);
    color: var(--g-text-muted);
}

.ser-req-meta[b-zcyfkttf4s] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: var(--motiva-font-size-caption, 12px);
    color: var(--g-text-muted);
}

.ser-req-meta-item[b-zcyfkttf4s] {
    display: inline-flex;
    gap: 4px;
}

.ser-req-meta-label[b-zcyfkttf4s] { font-weight: 600; }

.ser-req-notes[b-zcyfkttf4s] {
    margin: 0;
    padding-top: 6px;
    border-top: 1px dashed var(--g-border-light);
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--g-text-secondary);
    line-height: 1.5;
    white-space: pre-line;
}
/* /Pages/Requests/StudentRequestsPage.razor.rz.scp.css */
/* ============================================================
   StudentRequestsPage — בקשות
   Prefix: sreq-

   ALMOST NOTHING OF THE WORKSPACE IS HERE. The page's height chain,
   its header row, the two columns, the internally scrolling queue
   with its scrollbar on the physical right, the row and its divider,
   the selected-row lavender block, the filter bar, the type
   dropdown, the "nothing selected" empty state, the detail card and
   — since this screen became the reference for all three roles —
   the ROW'S OWN ANATOMY and the RECORD's head, sections, dates,
   file chips and history all come from the shared `rqw-*` skeleton
   in wwwroot/css/motiva-request-workspace.css. Blazor's scoped CSS
   cannot be imported across components, so sharing means a global
   stylesheet or a verbatim copy per page.

   Those recipes were written here first and moved out unchanged, so
   this screen looks exactly as it did; what changed is that the
   lecturer and mentor queues now resolve the same declarations
   instead of near-copies of them.

   WHAT IS LEFT HERE IS WHAT IS GENUINELY THE STUDENT'S — and every
   one of these exists because only a student creates and answers a
   request:
     * the create action on the header row, and the zero-request
       state that is the reason this screen has two layouts at all;
     * the academic side's latest word, lifted out of the history;
     * the reply composer — the student's one move on an existing
       request.
   ============================================================ */


/* ── Header end: summary, then the create action ─────────────
   .rqw-header is space-between with the title, so this single
   child lands at the far (left) edge and carries both. The button
   sits after the chips: last in the reading order, which is where
   an action belongs, and it never separates the title from its
   own numbers. */
.sreq-header-end[b-kujbl2cdzw] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* The create action. `.motiva-cta` (motiva-base.css) supplies the
   signature gradient, the white ink and --motiva-radius-sm; only
   geometry is set here, per that file's contract. Compact on
   purpose — it must read as primary beside a 38px title without
   becoming the loudest thing in the header. */
.sreq-new[b-kujbl2cdzw] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    border: 0;
    padding: 9px 16px;
    font-family: inherit;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}

.sreq-new-plus[b-kujbl2cdzw] { flex-shrink: 0; }

/* Below the shared skeleton's own 900px step the header is tight;
   the label drops and the control becomes the square "+" the
   Design draws — in CSS rather than by measuring in script. */
@media (max-width: 720px) {
    .sreq-new[b-kujbl2cdzw]       { padding: 9px 11px; }
    .sreq-new-label[b-kujbl2cdzw] { display: none; }
}


/* ══════════════════════════════════════════════════════════
   STATE A — the zero-request screen
   ══════════════════════════════════════════════════════════
   Full width, no split, no queue. `flex: 1` inside .rqw-page's
   contained height chain means it fills exactly what is left below
   the header and the page still does not scroll.

   Not MEmptyState: that component's API deliberately forbids an
   illustration, and this is the whole screen rather than a hole in
   one — it carries the same document mark the shared empty
   workspace uses, painted with the app's one icon gradient. */
.sreq-zero[b-kujbl2cdzw] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 40px;
    text-align: center;
    /* Surface from `.motiva-panel` in the markup. This was .55 white — the
       faintest surface in the product — on a screen that IS the whole page
       when a student has no requests, so it read as a grey hole rather than
       as the workspace it replaces. */
}

.sreq-zero-icon[b-kujbl2cdzw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(109, 40, 245, 0.06);
}

.sreq-zero-title[b-kujbl2cdzw] {
    margin: 0;
    font-size: 19px;
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: -0.02em;
    color: var(--motiva-text-primary);
}

.sreq-zero-sub[b-kujbl2cdzw] {
    margin: 0;
    max-width: 380px;
    font-size: var(--motiva-font-size-body, 14px);
    line-height: 1.55;
    color: var(--motiva-text-muted);
}

.sreq-zero-cta[b-kujbl2cdzw] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    border: 0;
    padding: 12px 24px;
    font-family: inherit;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════
   STATE B — queue column
   ══════════════════════════════════════════════════════════ */

/* ── Reset ───────────────────────────────────────────────────
   Subordinate to the three buckets on purpose: text, not a fourth
   pill, and only while a bucket is actually selected. It clears the
   bucket and leaves the type filter alone — the two are
   independent. */
.sreq-reset[b-kujbl2cdzw] {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 4px;
    border: 0;
    background: transparent;
    color: var(--motiva-text-muted);
    font-family: inherit;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1;
    cursor: pointer;
    transition: color 0.12s ease;
}

.sreq-reset:hover[b-kujbl2cdzw] { color: var(--motiva-color-violet); }

.sreq-reset:focus-visible[b-kujbl2cdzw] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
    border-radius: 6px;
}


/* ══════════════════════════════════════════════════════════
   STATE B — the record, inside the shared .rqw-card
   ══════════════════════════════════════════════════════════ */

/* WHO OPENED IT. Same ink as the recipient it sits beside — it is a fact about
   the record, not a state, so it must not compete with the badge opposite.

   It continues the "נפתחה <date>" item rather than being a separate one, so its
   leading space is this margin. It cannot be a literal space in the markup:
   Razor trims the whitespace around the block-level @if that renders it.
   margin-inline-start, not margin-left — the line is RTL. */
.sreq-meta-origin[b-kujbl2cdzw] {
    margin-inline-start: 0.32em;
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
}

/* ── The academic side's latest word ─────────────────────── */
.sreq-resp[b-kujbl2cdzw] {
    margin: 0 0 20px;
    padding: 16px 20px;
    border-radius: 16px;
    background: #F3F7FD;
}

.sreq-resp-done[b-kujbl2cdzw] { background: var(--motiva-color-neutral-bg, #F6F5F8); }

.sreq-resp-header[b-kujbl2cdzw] {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 6px;
}

.sreq-resp-meta[b-kujbl2cdzw] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: #2563EB;
}

.sreq-resp-done .sreq-resp-meta[b-kujbl2cdzw] { color: var(--motiva-text-muted); }

.sreq-resp-text[b-kujbl2cdzw] {
    margin: 0;
    font-size: var(--motiva-font-size-lg, 15px);
    line-height: 1.6;
    color: var(--motiva-text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


/* ══════════════════════════════════════════════════════════
   THE STUDENT'S ONE ACTION — the reply composer
   ══════════════════════════════════════════════════════════ */

.sreq-composer[b-kujbl2cdzw] { margin-bottom: 8px; }

.sreq-composer-row[b-kujbl2cdzw] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sreq-attach[b-kujbl2cdzw] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 10px 18px;
    border: 1px solid #E2E0E8;
    border-radius: var(--motiva-radius-full);
    background: #ffffff;
    color: var(--motiva-text-primary);
    font-family: inherit;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.sreq-attach:hover[b-kujbl2cdzw] {
    border-color: #B7B2C2;
    background: #FAF9F7;
}

.sreq-attach-off[b-kujbl2cdzw] {
    cursor: not-allowed;
    opacity: 0.55;
}

.sreq-attach-ic[b-kujbl2cdzw] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Visually hidden file input */
.sreq-file-hidden[b-kujbl2cdzw] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

.sreq-input[b-kujbl2cdzw] {
    flex: 1;
    min-width: 0;
    border: 1px solid #E2E0E8;
    border-radius: var(--motiva-radius-full);
    background: #FAF9F7;
    outline: none;
    font-family: inherit;
    font-size: var(--motiva-font-size-control, 13.5px);
    line-height: 1.3;
    color: var(--motiva-text-primary);
    padding: 10px 20px;
    resize: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.sreq-input:focus[b-kujbl2cdzw] {
    border-color: var(--motiva-color-violet);
    background: #ffffff;
}

.sreq-input[b-kujbl2cdzw]::placeholder { color: var(--motiva-text-muted); }

/* `.motiva-cta` carries the gradient and the radius; only geometry here. */
.sreq-send-btn[b-kujbl2cdzw] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    padding: 11px 26px;
    font-family: inherit;
    font-size: var(--motiva-font-size-control, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}

.sreq-send-spinner[b-kujbl2cdzw] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sreq-spin-b-kujbl2cdzw 0.7s linear infinite;
}

/* Reduced motion is handled globally by motiva-base.css, which collapses
   every animation-duration — no local override needed. */
@keyframes sreq-spin-b-kujbl2cdzw { to { transform: rotate(360deg); } }

.sreq-drafts[b-kujbl2cdzw] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 8px;
}

.sreq-draft[b-kujbl2cdzw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(27, 26, 34, 0.05);
    font-size: var(--motiva-font-size-caption, 11.5px);
    color: var(--motiva-text-secondary);
}

.sreq-draft-size[b-kujbl2cdzw] { color: var(--motiva-text-muted); }

.sreq-draft-x[b-kujbl2cdzw] {
    border: 0;
    background: transparent;
    padding: 0;
    font-family: inherit;
    font-size: var(--motiva-font-size-body, 14px);
    line-height: 1;
    color: var(--motiva-text-muted);
    cursor: pointer;
}

.sreq-draft-x:hover[b-kujbl2cdzw] { color: var(--motiva-text-primary); }

.sreq-error[b-kujbl2cdzw] {
    margin: 0 0 6px;
    font-size: var(--motiva-font-size-caption, 12px);
    color: var(--motiva-color-rose-ink, var(--motiva-color-rose));
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════

   The record's own paddings, the badge stack at one column and the
   centred dates block all moved into the shared file with the head
   and body they belong to — every request queue re-bases them the
   same way. What is left here is the composer, which only this
   screen has, and the zero-request state. */

@media (max-width: 720px) {
    .sreq-composer-row[b-kujbl2cdzw] { flex-wrap: wrap; gap: 8px; }
    .sreq-input[b-kujbl2cdzw]        { min-width: 140px; }
    .sreq-send-btn[b-kujbl2cdzw]     { padding: 10px 18px; }
    .sreq-zero[b-kujbl2cdzw]         { padding: 28px 20px; }
}
/* /Pages/ResourceFiles/ResourceFilesPage.razor.rz.scp.css */
/* ============================================================
   ResourceFilesPage — scoped styles
   Prefix: rfp-
   Follows the same design language as Dashboard, Tasks, and Milestones pages.
   ============================================================ */

/* ── Page wrapper ─────────────────────────────────────────── */

.rfp-page[b-oxtxfx9wd0] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Loading / error / empty states ──────────────────────── */

.rfp-loading[b-oxtxfx9wd0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 80px 0;
    color: var(--g-text-muted);
    font-family: var(--g-font-base);
    font-size: var(--g-type-secondary);
}

.rfp-spinner[b-oxtxfx9wd0] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--g-border);
    border-top-color: var(--g-accent);
    border-radius: var(--g-radius-full);
    animation: rfp-spin-b-oxtxfx9wd0 0.75s linear infinite;
}

@keyframes rfp-spin-b-oxtxfx9wd0 {
    to { transform: rotate(360deg); }
}

.rfp-state-msg[b-oxtxfx9wd0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 0;
    font-family: var(--g-font-base);
    font-size: var(--g-type-secondary);
    color: var(--g-text-muted);
    text-align: center;
}

.rfp-state-msg .oi[b-oxtxfx9wd0] { font-size: 28px; }
.rfp-error[b-oxtxfx9wd0]         { color: var(--g-danger); }

.rfp-empty[b-oxtxfx9wd0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 60px 0;
    color: var(--g-text-muted);
    font-family: var(--g-font-base);
    font-size: var(--g-type-secondary);
    text-align: center;
    background: var(--g-bg-surface);
    border-radius: var(--g-radius-md);
    border: 1px dashed var(--g-border);
}

.rfp-empty .oi[b-oxtxfx9wd0] { font-size: 32px; opacity: 0.5; }

/* ── Page header card ─────────────────────────────────────── */

.rfp-header-card[b-oxtxfx9wd0] {
    /* Surface from the shared `.motiva-panel` class (motiva-base.css),
       worn in the markup. This block used to restate it as --g-bg-surface at
       --g-radius-md behind --g-border-light with --g-shadow-sm: the same white,
       but a 16px corner, a grey hairline and no lift, against the 24px violet-
       edged lifted panel every migrated screen renders. */
    padding: 22px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.rfp-header-start[b-oxtxfx9wd0] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rfp-page-icon[b-oxtxfx9wd0] {
    width: 46px;
    height: 46px;
    border-radius: var(--g-radius-sm);
    background: var(--g-accent-active-bg);
    color: var(--g-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

/* Title + the shared MInfoTip on one row. The page's permanent subtitle
   moved into that tooltip in the Admin-wide consistency pass, so the block
   that used to stack two lines now holds one line and a 20px glyph. */
.rfp-page-titles[b-oxtxfx9wd0] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* PAGE TITLE — the shared h1 step. Values live in motiva-tokens.css; never restate them here. */
.rfp-page-title[b-oxtxfx9wd0] {
    margin: 0;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-h1, 38px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: var(--motiva-line-height-tight, 1.1);
    letter-spacing: var(--motiva-letter-spacing-page, -0.035em);
    color: var(--motiva-text-primary, #1B1A22);
}

/* ── Buttons ──────────────────────────────────────────────── */

.rfp-btn-primary[b-oxtxfx9wd0] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: var(--g-accent);
    color: #fff;
    border: none;
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-control, 14px);
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease;
    white-space: nowrap;
}

.rfp-btn-primary:hover:not(:disabled)[b-oxtxfx9wd0] { opacity: 0.88; }
.rfp-btn-primary:disabled[b-oxtxfx9wd0]             { opacity: 0.55; cursor: not-allowed; }

.rfp-btn-ghost[b-oxtxfx9wd0] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: transparent;
    color: var(--g-text-secondary);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-control, 14px);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.rfp-btn-ghost:hover:not(:disabled)[b-oxtxfx9wd0] { background: var(--g-bg-hover); }
.rfp-btn-ghost:disabled[b-oxtxfx9wd0]             { opacity: 0.55; cursor: not-allowed; }

/* ── Upload card ──────────────────────────────────────────── */

.rfp-upload-card[b-oxtxfx9wd0] {
    /* Surface from the shared `.motiva-panel` class (motiva-base.css),
       worn in the markup. This block used to restate it as --g-bg-surface at
       --g-radius-md behind --g-border-light with --g-shadow-sm: the same white,
       but a 16px corner, a grey hairline and no lift, against the 24px violet-
       edged lifted panel every migrated screen renders. */
    padding: 28px;
}

.rfp-upload-title[b-oxtxfx9wd0] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-h3, 17px);
    font-weight: 700;
    color: var(--g-text-primary);
    margin: 0 0 24px;
}

.rfp-upload-title .oi[b-oxtxfx9wd0] {
    color: var(--g-accent);
    font-size: 18px;
}

/* ── Form grid ────────────────────────────────────────────── */

.rfp-form-grid[b-oxtxfx9wd0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 20px;
}

.rfp-field-full[b-oxtxfx9wd0] { grid-column: 1 / -1; }

.rfp-label[b-oxtxfx9wd0] {
    display: block;
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: 600;
    color: var(--g-text-secondary);
    margin-bottom: 6px;
}

.rfp-required[b-oxtxfx9wd0] { color: var(--g-danger); margin-inline-start: 2px; }
.rfp-optional[b-oxtxfx9wd0] { color: var(--g-text-muted); font-weight: 400; font-size: var(--motiva-font-size-caption, 12px); }

.rfp-input[b-oxtxfx9wd0],
.rfp-select[b-oxtxfx9wd0] {
    width: 100%;
    padding: 9px 12px;
    background: var(--g-bg-surface);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-control, 14px);
    color: var(--g-text-primary);
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.rfp-input:focus[b-oxtxfx9wd0],
.rfp-select:focus[b-oxtxfx9wd0] {
    outline: none;
    border-color: var(--g-accent);
}

.rfp-select:disabled[b-oxtxfx9wd0] {
    background: var(--g-bg-hover);
    color: var(--g-text-muted);
    cursor: not-allowed;
}

/* ── (file picker styles moved to .rfp-file-btn section below) ── */

/* ── Form messages ────────────────────────────────────────── */

.rfp-form-error[b-oxtxfx9wd0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: var(--g-radius-sm);
    color: #b91c1c;
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-sm, 13px);
    margin-bottom: 16px;
}

/* ── Form actions ─────────────────────────────────────────── */

.rfp-form-actions[b-oxtxfx9wd0] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.rfp-spinner-sm[b-oxtxfx9wd0] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: var(--g-radius-full);
    animation: rfp-spin-b-oxtxfx9wd0 0.75s linear infinite;
    flex-shrink: 0;
}

/* ── Table card ───────────────────────────────────────────── */

/* `.rfp-table-card` was removed here: the class is not used by
   ResourceFilesPage.razor at all, and the only thing it carried was a copy of
   the legacy surface. A dead rule holding a legacy value is how that value
   comes back. */

.rfp-table-header[b-oxtxfx9wd0] {
    padding: 14px 20px;
    border-bottom: 1px solid var(--g-border-light);
}

.rfp-table-count[b-oxtxfx9wd0] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: 600;
    color: var(--g-text-muted);
}

.rfp-table-wrap[b-oxtxfx9wd0] {
    overflow-x: auto;
}

.rfp-table[b-oxtxfx9wd0] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-body, 14px);
}

.rfp-table thead tr[b-oxtxfx9wd0] {
    border-bottom: 1px solid var(--g-border-light);
}

.rfp-table th[b-oxtxfx9wd0] {
    padding: 12px 16px;
    text-align: start;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 600;
    color: var(--g-text-muted);
    white-space: nowrap;
    background: var(--g-bg-surface);
}

.rfp-table td[b-oxtxfx9wd0] {
    padding: 14px 16px;
    color: var(--g-text-primary);
    border-bottom: 1px solid var(--g-border-light);
    vertical-align: middle;
}

.rfp-table tbody tr:last-child td[b-oxtxfx9wd0] {
    border-bottom: none;
}

.rfp-table tbody tr:hover td[b-oxtxfx9wd0] {
    background: var(--g-bg-hover);
}

.rfp-row-deleting td[b-oxtxfx9wd0] {
    background: #fef2f2 !important;
}

/* ── File cell ────────────────────────────────────────────── */

.rfp-file-cell[b-oxtxfx9wd0] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.rfp-file-icon[b-oxtxfx9wd0] {
    color: var(--g-accent);
    font-size: 14px;
    flex-shrink: 0;
}

.rfp-file-label[b-oxtxfx9wd0] {
    font-weight: 500;
    word-break: break-word;
    max-width: 220px;
}

.rfp-desc-cell[b-oxtxfx9wd0] {
    max-width: 200px;
    color: var(--g-text-secondary);
    font-size: var(--motiva-font-size-sm, 13px);
}

.rfp-date-cell[b-oxtxfx9wd0] {
    white-space: nowrap;
    color: var(--g-text-muted);
    font-size: var(--motiva-font-size-sm, 13px);
}

.rfp-no-value[b-oxtxfx9wd0] {
    color: var(--g-text-muted);
}

/* ── Badges ───────────────────────────────────────────────── */

/* Default tag: white paper under the Motiva gradient edge, dark ink.
   `--motiva-tag-brand-surface`, the product's one tag recipe. The edge is
   paid for out of the padding so the pill's outer box does not move. */
.rfp-ms-badge[b-oxtxfx9wd0] {
    display: inline-block;
    padding: 2px 9px;
    border: 1px solid transparent;
    border-radius: 20px;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 600;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rfp-task-badge[b-oxtxfx9wd0] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    background: #f0fdf4;
    color: #15803d;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 600;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Accordion ────────────────────────────────────────────── */

.rfp-accordion[b-oxtxfx9wd0] {
    background: var(--g-bg-surface);
    border-radius: var(--g-radius-md);
    box-shadow: var(--g-shadow-sm);
    border: 1px solid var(--g-border-light);
    overflow: hidden;
}

.rfp-accordion-head[b-oxtxfx9wd0] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--g-font-base);
    text-align: start;
    transition: background 0.15s ease;
    direction: rtl;
}

.rfp-accordion-head:hover[b-oxtxfx9wd0] {
    background: var(--g-bg-hover);
}

.rfp-accordion-chevron[b-oxtxfx9wd0] {
    font-size: 11px;
    color: var(--g-text-muted);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.rfp-accordion-title[b-oxtxfx9wd0] {
    font-size: var(--motiva-font-size-item, 15px);
    font-weight: 700;
    color: var(--g-text-primary);
    flex: 1;
}

.rfp-accordion-count[b-oxtxfx9wd0] {
    font-size: var(--motiva-font-size-count, 12px);
    font-weight: 600;
    color: var(--g-text-muted);
    background: var(--g-bg-hover);
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.rfp-accordion-body[b-oxtxfx9wd0] {
    border-top: 1px solid var(--g-border-light);
    overflow-x: auto;
}

/* ── Item type toggle (File / Video) ────────────────────────── */

.rfp-type-toggle[b-oxtxfx9wd0] {
    display: flex;
    gap: 0;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    overflow: hidden;
    margin-bottom: 24px;
    width: fit-content;
}

.rfp-type-tab[b-oxtxfx9wd0] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    background: var(--g-bg-surface);
    color: var(--g-text-secondary);
    border: none;
    border-left: 1px solid var(--g-border);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-control, 14px);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.rfp-type-tab:first-child[b-oxtxfx9wd0] { border-left: none; }

.rfp-type-tab:hover:not(.rfp-type-tab--active)[b-oxtxfx9wd0] {
    background: var(--g-bg-hover);
    color: var(--g-text-primary);
}

.rfp-type-tab--active[b-oxtxfx9wd0] {
    background: var(--g-accent);
    color: #fff;
    font-weight: 600;
}

/* ── Item-type column badge (File / Video in table) ──────────── */

.rfp-item-type-badge[b-oxtxfx9wd0] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 600;
    white-space: nowrap;
}

.rfp-item-type-badge--file[b-oxtxfx9wd0] {
    background: var(--g-bg-hover);
    color: var(--g-text-secondary);
}

.rfp-item-type-badge--video[b-oxtxfx9wd0] {
    background: #fef3c7;
    color: #92400e;
}

/* ── Styled file picker button ─────────────────────────────── */

.rfp-file-btn[b-oxtxfx9wd0] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: var(--g-bg-surface);
    border: 1.5px dashed var(--g-border);
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-control, 14px);
    color: var(--g-text-muted);
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background 0.15s ease;
    user-select: none;
}

.rfp-file-btn:hover[b-oxtxfx9wd0] {
    border-color: var(--g-accent);
    background: var(--g-accent-active-bg);
    color: var(--g-accent);
}

.rfp-file-btn--selected[b-oxtxfx9wd0] {
    border-color: #16a34a;
    background: #f0fdf4;
    color: #15803d;
}

.rfp-file-btn--selected:hover[b-oxtxfx9wd0] {
    border-color: #15803d;
    background: #dcfce7;
    color: #15803d;
}

.rfp-file-btn-icon[b-oxtxfx9wd0] {
    font-size: 18px;
    flex-shrink: 0;
}

.rfp-file-btn-info[b-oxtxfx9wd0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rfp-file-btn-name[b-oxtxfx9wd0] {
    font-weight: 600;
    font-size: var(--motiva-font-size-control, 14px);
    word-break: break-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
}

.rfp-file-btn-hint[b-oxtxfx9wd0] {
    font-size: var(--motiva-font-size-control, 12px);
    opacity: 0.75;
}

.rfp-file-btn-placeholder[b-oxtxfx9wd0] {
    font-size: var(--motiva-font-size-control, 14px);
}

/* ── Project-type checkboxes ────────────────────────────────── */

.rfp-checkboxes[b-oxtxfx9wd0] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding: 10px 14px;
    background: var(--g-bg-hover);
    border: 1px solid var(--g-border-light);
    border-radius: var(--g-radius-sm);
}

.rfp-checkbox-item[b-oxtxfx9wd0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-body, 14px);
    color: var(--g-text-primary);
    cursor: pointer;
    user-select: none;
}

.rfp-checkbox-item input[type="checkbox"][b-oxtxfx9wd0] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--g-accent);
}

/* ── Project-type badges ───────────────────────────────────── */

.rfp-type-badges[b-oxtxfx9wd0] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.rfp-type-badge[b-oxtxfx9wd0] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 600;
    white-space: nowrap;
}

.rfp-type-badge--tech[b-oxtxfx9wd0] {
    background: #eff6ff;
    color: #1d4ed8;
}

.rfp-type-badge--method[b-oxtxfx9wd0] {
    background: #f5f3ff;
    color: #6d28d9;
}

/* ── Row highlight when editing ─────────────────────────────── */

.rfp-row-editing td[b-oxtxfx9wd0] {
    background: #faf5ff !important;
}

/* ── Action buttons ───────────────────────────────────────── */

.rfp-actions[b-oxtxfx9wd0] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rfp-action-btn[b-oxtxfx9wd0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--g-radius-sm);
    border: 1px solid var(--g-border);
    background: var(--g-bg-surface);
    color: var(--g-text-muted);
    cursor: pointer;
    font-size: var(--motiva-font-size-control, 13px);
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    text-decoration: none;
}

.rfp-action-download:hover[b-oxtxfx9wd0] {
    color: var(--g-accent);
    border-color: var(--g-accent);
    background: var(--g-accent-active-bg);
}

.rfp-action-edit:hover[b-oxtxfx9wd0] {
    color: #0369a1;
    border-color: #0369a1;
    background: #eff6ff;
}

.rfp-action-delete:hover[b-oxtxfx9wd0] {
    color: var(--g-danger);
    border-color: var(--g-danger);
    background: #fef2f2;
}

.rfp-action-confirm[b-oxtxfx9wd0] {
    color: #fff;
    background: var(--g-danger);
    border-color: var(--g-danger);
}

.rfp-action-confirm:hover[b-oxtxfx9wd0] {
    opacity: 0.85;
    color: #fff;
}

.rfp-action-cancel-del:hover[b-oxtxfx9wd0] {
    color: var(--g-text-secondary);
    background: var(--g-bg-hover);
}
/* /Pages/Settings/ProfileIntegrationsCard.razor.rz.scp.css */
/* ============================================================
   StudentProfileIntegrationsCard — "שירותים מחוברים"

   Visual source: Motiva Student Profile final.dc.html:142-164.
   The reference's own numbers: 22/24/20 section inset, a 14px rule under
   the title, a 13px gap, a 38px white icon chip at a 12px radius, a
   14px/600 service name, a 12px status line with a 7px dot, and a 999px
   pill on the action.
   ============================================================ */

.spf-int[b-ol8p6qmte6] {
    padding: 22px 24px 20px;
    min-width: 0;
}

.spf-int-title[b-ol8p6qmte6] {
    margin: 0 0 14px;
    font-size: var(--motiva-font-size-h3, 17px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1;
    letter-spacing: var(--motiva-letter-spacing-section);
    color: var(--motiva-text-primary);
}

.spf-int-row[b-ol8p6qmte6] {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.spf-int-icon[b-ol8p6qmte6] {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(27, 26, 34, .08);
    border-radius: var(--motiva-radius-chip);
    background: var(--motiva-surface-primary, #fff);
    color: var(--motiva-text-secondary);
}

/* The one filled square in the glyph — a CSS var cannot be used in an SVG
   presentation attribute, so the token is applied from here instead. */
.spf-int-icon-mark[b-ol8p6qmte6] { fill: var(--motiva-color-blue); }

.spf-int-text[b-ol8p6qmte6] {
    flex: 1;
    min-width: 0;
}

.spf-int-name[b-ol8p6qmte6] {
    margin: 0;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.3;
    color: var(--motiva-text-primary);
}

/* The status line has to shrink: the account address can be longer than the
   card, and it is the only part of the line that may be truncated. */
.spf-int-status[b-ol8p6qmte6] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 3px 0 0;
    min-width: 0;

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

.spf-int-status-off[b-ol8p6qmte6] { color: var(--motiva-text-subtle); }

.spf-int-status > span:not(.spf-int-account)[b-ol8p6qmte6] { flex: 0 0 auto; }

.spf-int-account[b-ol8p6qmte6] {
    direction: ltr;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spf-int-dot[b-ol8p6qmte6] {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--motiva-text-faint);
}

.spf-int-dot-on[b-ol8p6qmte6] { background: var(--motiva-color-online); }

/* ── Actions ──────────────────────────────────────────────────
   Disconnect is the quiet outline pill; connect is the signature CTA.
   Fill, radius and hover for the CTA come from the global .motiva-cta
   rule it also carries — only geometry is declared here. */

.spf-int-btn-ghost[b-ol8p6qmte6],
.spf-int-btn-connect[b-ol8p6qmte6] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;

    border-radius: var(--motiva-radius-full);
    font-family: inherit;
    font-size: var(--motiva-font-size-control, 12px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    cursor: pointer;

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

.spf-int-btn-ghost[b-ol8p6qmte6] {
    padding: 8px 15px;
    border: 1.5px solid var(--motiva-border-strong);
    background: none;
    color: var(--motiva-text-muted);
}

.spf-int-btn-ghost:hover:not(:disabled)[b-ol8p6qmte6] {
    border-color: rgba(224, 51, 95, .45);
    color: var(--motiva-color-rose-ink);
}

.spf-int-btn-ghost:disabled[b-ol8p6qmte6] { cursor: default; opacity: .55; }

.spf-int-btn-connect[b-ol8p6qmte6] {
    padding: 9px 17px;
    border: 0;
}

.spf-int-spinner[b-ol8p6qmte6] {
    width: 11px;
    height: 11px;
    box-sizing: border-box;
    border: 2px solid var(--motiva-color-neutral-bg);
    border-top-color: var(--motiva-text-muted);
    border-radius: 50%;
    animation: spf-int-spin-b-ol8p6qmte6 .8s linear infinite;
}

.spf-int-spinner-on-fill[b-ol8p6qmte6] {
    border-color: rgba(255, 255, 255, .45);
    border-top-color: #fff;
}

@keyframes spf-int-spin-b-ol8p6qmte6 { to { transform: rotate(360deg); } }

/* ── Notes ────────────────────────────────────────────────── */

.spf-int-note[b-ol8p6qmte6] {
    margin: 12px 0 0;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.4;
    color: var(--motiva-text-muted);
}

.spf-int-note-error[b-ol8p6qmte6] { color: var(--motiva-color-rose-ink); }
.spf-int-note-ok[b-ol8p6qmte6]    { color: var(--motiva-color-teal-ink); }

@media (max-width: 700px) {
    .spf-int[b-ol8p6qmte6] { padding: 18px 18px 18px; }
}
/* /Pages/Settings/ProfileNotificationsCard.razor.rz.scp.css */
/* ============================================================
   StudentProfileNotificationsCard — "העדפות"

   Visual source: Motiva Student Profile final.dc.html:104-115.

   One row = one 14px/600 title and its switch, nothing else. The
   reference draws a second explanatory line under every title; with
   seven real preferences instead of its four that read as a wall of
   grey text, so the descriptions are dropped and the row rhythm is
   compacted with them — 10px block padding instead of the reference's
   15px, which is what a single-line row wants. The section inset
   tightens to 18/24/8 for the same reason. Everything else is the
   reference's: the 14px gap to the switch, the hairline between rows
   and none after the last.

   Seven rows make this the tallest single element on the profile, so it
   is also where the page's height budget is decided: at 11px the four
   cards missed one laptop viewport by a few pixels and the whole screen
   scrolled for them. 10px keeps a 24px switch on a 44px row — the switch,
   the type and the hairline rhythm are all untouched.
   ============================================================ */

.spf-pr[b-9q439jtae8] {
    padding: 18px 24px 8px;
    min-width: 0;
}

/* ── Head ─────────────────────────────────────────────────────
   The title alone, as the reference draws it. The save/failure status
   is the only other thing in the row, pinned to the inline end. */

.spf-pr-head[b-9q439jtae8] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 2px;
    min-width: 0;
}

.spf-pr-title[b-9q439jtae8] {
    margin: 0;
    font-size: var(--motiva-font-size-h3, 17px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1;
    letter-spacing: var(--motiva-letter-spacing-section);
    color: var(--motiva-text-primary);
}

/* One fixed place per card for the outcome of a write, so a switch never
   has to reserve space beside itself for a message that is usually absent. */
.spf-pr-status[b-9q439jtae8] {
    margin-inline-start: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;

    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
}

.spf-pr-saved[b-9q439jtae8]  { color: var(--motiva-color-teal-ink); }
.spf-pr-failed[b-9q439jtae8] { color: var(--motiva-color-rose-ink); }

.spf-pr-spinner[b-9q439jtae8] {
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    border: 2px solid var(--motiva-color-brand-bg);
    border-top-color: var(--motiva-color-violet);
    border-radius: 50%;
    animation: spf-pr-spin-b-9q439jtae8 .8s linear infinite;
}

@keyframes spf-pr-spin-b-9q439jtae8 { to { transform: rotate(360deg); } }

/* ── Rows ─────────────────────────────────────────────────────
   The switch is pushed to the row's end by the title taking the
   remaining space — not by a margin on the switch, which is a child
   component this file cannot style.

   10px block padding keeps a 24px switch on a 44px row: enough air to
   read as a list, tight enough that seven of them do not out-run the
   two cards beside them — or the viewport. */

.spf-pr-row[b-9q439jtae8] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--motiva-border-light);
}

.spf-pr-row:last-child[b-9q439jtae8] { border-bottom: none; }

.spf-pr-row-title[b-9q439jtae8] {
    flex: 1;
    margin: 0;
    min-width: 0;

    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.3;
    color: var(--motiva-text-primary);
}

/* ── States ───────────────────────────────────────────────── */

.spf-pr-note[b-9q439jtae8] {
    margin: 0;
    padding-block: 10px 18px;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-muted);
}

.spf-pr-note-error[b-9q439jtae8] { color: var(--motiva-color-rose-ink); }

@media (max-width: 700px) {
    .spf-pr[b-9q439jtae8] { padding: 16px 18px 6px; }
}
/* /Pages/Settings/StaffProfilePage.razor.rz.scp.css */
/* ============================================================
   StaffProfilePage — page composition
   Prefix: stf-

   Structural source: StudentProfilePage.razor.css. Same 1.6fr / 1fr grid,
   same 16px column gap, same 14px stack rhythm inside a column, same
   breakpoints, same last-card stretch. The two screens are one screen with
   two audiences and their frames must not be told apart.

   No page-level max-width. The canvas shell is full-bleed with its own
   28px inline inset (--motiva-canvas-padding-inline); what keeps the page
   readable is the 1.6/1 split, which tops the wide column out at ~62% of
   the content width — a comfortable measure for a two-column field grid
   even on a 27" display.
   ============================================================ */

/* ── Below the white page-header card ─────────────────────────
   Standard Motiva gap between the shared Core page-header (MPageHeaderCard)
   and the profile content — the same 16px the student screen leaves below its
   header.

   It also GROWS into the viewport height the shell hands down, exactly as the
   student screen does: `.app-content` is a flex column that fills the canvas
   (AppLayout.razor.css), the header takes its natural height and this region
   takes the rest, so the grid reaches near the foot of the viewport instead of
   leaving an empty band. No `vh` — the height comes through the shell's existing
   flex chain, so a short viewport still grows and scrolls naturally. */
.stf-content[b-yvqvjxscc8] {
    margin-block-start: 16px;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.stf-grid[b-yvqvjxscc8] {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 16px;
    min-width: 0;

    /* Fill the height .stf-content grew into: the single grid row stretches,
       both columns stretch to it, and each column hands its slack to its last
       card via the `:last-child` rule below — so the two columns end on one
       baseline near the foot of the viewport. min-height:0 keeps this correct
       when content is taller than the viewport: it scrolls instead of clipping. */
    flex: 1 1 auto;
    min-height: 0;
}

.stf-col[b-yvqvjxscc8] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* ── The two columns finish on one baseline ───────────────────
   The columns stretch (the grid default), so both are as tall as the
   taller one; this rule hands the extra height to the LAST card in each
   column, whichever column is short. Only the card's box grows — its
   content is a plain block at the top of it, so nothing is ever centred
   into the space the card gained.

   IT IS A TRIM HERE, NOT THE LAYOUT. Three cards over two columns cannot
   come out even by construction, so the page pairs the two SHORT ones —
   פרטים אישיים (~230px) over שירותים מחוברים (~120px) — against the tall
   one, העדפות (~330px), and the columns land within about twenty pixels
   of each other before this rule does anything at all. Stacked the
   student's way instead (the two preference cards together, the service
   row alone) the split would be ~560 against ~120, and this rule would be
   asked to absorb four hundred pixels by inflating a single Google
   Calendar row into an almost empty card — which is not a balance, it is
   the ragged foot with a border around it. See the page's own header for
   the arithmetic.

   `flex: 1 1 auto`, not `flex: 1`: a 0% basis contributes nothing to an
   auto-height parent's intrinsic size, which is what the column is in the
   stacked layout below. An `auto` basis grows into a definite column and
   still reports a real height in an indefinite one — so the same rule is
   correct on both sides of the breakpoint and no media query has to switch
   it off.

   `::deep` because the target is MCard's root element, which carries that
   component's scope id and not this page's. */
.stf-col[b-yvqvjxscc8]  > .m-card:last-child {
    flex: 1 1 auto;
    min-height: 0;
}

/* ── Responsive ───────────────────────────────────────────────
   One column below 1080px. The break is set by the WIDE column, not by
   the viewport: under ~1080px of shell the 1.6fr track drops below the
   ~560px the personal-details grid needs, and that grid would collapse to
   one column while still sitting in a half-width track — a tall thin card
   beside a tall thin card. Stacking gives both their full measure back, in
   the DOM order of the two columns.

   `min-width: 0` on the tracks above is what stops a long email address
   from holding a track open and pushing the page into horizontal overflow
   before the break is reached. */

@media (max-width: 1080px) {
    .stf-grid[b-yvqvjxscc8] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Load / error states ─────────────────────────────────────
   Inline inset comes from the shell; only the vertical rhythm is this
   page's business. */

.stf-page-state[b-yvqvjxscc8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--motiva-space-sm);
    padding-block: 64px;

    font-size: var(--motiva-font-size-body);
    color: var(--motiva-text-muted);
}

.stf-page-spinner[b-yvqvjxscc8] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--motiva-color-brand-bg);
    border-top-color: var(--motiva-color-violet);
    border-radius: 50%;
    box-sizing: border-box;
    animation: stf-page-spin-b-yvqvjxscc8 .8s linear infinite;
}

@keyframes stf-page-spin-b-yvqvjxscc8 { to { transform: rotate(360deg); } }

@media (max-width: 700px) {
    .stf-grid[b-yvqvjxscc8]       { gap: 14px; }
    .stf-col[b-yvqvjxscc8]        { gap: 14px; }
    .stf-page-state[b-yvqvjxscc8] { padding-block: 48px; }
}

/* A short viewport is a different problem from a narrow one: the page still
   fits side by side, there is just less room above and below it. Nothing is
   clipped and nothing is hidden — the shell scrolls normally, and this only
   stops the cards spending height on gutters they cannot afford. */

@media (max-height: 780px) and (min-width: 1081px) {
    .stf-grid[b-yvqvjxscc8] { gap: 14px; }
    .stf-col[b-yvqvjxscc8]  { gap: 14px; }
}
/* /Pages/Settings/StaffProfilePersonalCard.razor.rz.scp.css */
/* ============================================================
   StaffProfilePersonalCard — "פרטים אישיים"
   Prefix: stf-pd-

   StudentProfilePersonalCard.razor.css's recipe, value for value: the
   20/24/18 section inset, a 12px head rule measured off the title's own
   baseline box, a 1fr 1fr field grid on a 28px column gutter with NO row
   gutter (the hairline under each field is the row rhythm), 999px pills on
   every action, an 11px input radius, and the container query that
   collapses the grid on the CARD's width rather than the viewport's.

   A second file rather than a shared one because Blazor scopes every
   .razor.css to the component that owns it. The tokens are what keep the
   two in step; the numbers between them are the contract.
   ============================================================ */

.stf-pd[b-vjhkisokvd] {
    padding: 20px 24px 18px;
    min-width: 0;

    /* The field grid collapses on the CARD's width: this card is ~62% of
       the page while the grid is two columns, and full width once the page
       stacks, so one viewport size means two very different card widths.
       `container-type` has to sit on an element this file writes — MCard's
       root carries another component's scope id. */
    container-type: inline-size;
    container-name: stf-pd;
}

/* ── Head ─────────────────────────────────────────────────────
   The title, alone. The action sits at the card's bottom-left — see
   .stf-pd-foot at the end of this file. */

.stf-pd-head[b-vjhkisokvd] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
}

.stf-pd-title[b-vjhkisokvd] {
    margin: 0;
    font-size: var(--motiva-font-size-h3, 17px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1;
    letter-spacing: var(--motiva-letter-spacing-section);
    color: var(--motiva-text-primary);
}

/* ── Footer action slot ───────────────────────────────────────
   Bottom-left. The slot is a flex row and its single child carries
   `margin-inline-start: auto`, so whichever state is rendered — the lone
   עריכה pill, or the ביטול / שמירה pair — lands against the inline end,
   i.e. the LEFT edge under RTL. Logical axis, so the LTR mirror keeps the
   action opposite the reading edge instead of tucked under the fields.

   12px: the last field row already closes on its own 13px block padding,
   so the action reads as separated at 25px of real gap. Same number as
   the student card's — they are the same slot in two cards and must not
   drift apart. */

.stf-pd-foot[b-vjhkisokvd] {
    display: flex;
    align-items: center;
    margin-top: 12px;
}

.stf-pd-actions[b-vjhkisokvd] {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Shared geometry for the three actions. Fill, radius and states come from
   each button's own rule (or from .motiva-cta, globally, for the save) —
   this is only the shape they have in common. */
.stf-pd-btn-edit[b-vjhkisokvd],
.stf-pd-btn-ghost[b-vjhkisokvd],
.stf-pd-btn-save[b-vjhkisokvd] {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    border-radius: var(--motiva-radius-full);
    font-size: var(--motiva-font-size-control, 12.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    font-family: inherit;
    cursor: pointer;

    /* Only the ink transitions. The edge is a background-image layer, and
       background-image does not interpolate. */
    transition: color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

/* ── The gradient edge ────────────────────────────────────────
   White paper under a Motiva gradient hairline — the EDGE only, never a
   fill. `--motiva-tag-brand-surface` is the product's one gradient-edge
   recipe, so this button cannot drift into a second gradient. The recipe
   requires the consumer to state the transparent border (the ramp is a
   border-box layer, so with no border box there is no edge to show it in)
   and the ink; 1.5px is exactly what a neutral border would have been, so
   the button's outer box does not move by a pixel. */
.stf-pd-btn-edit[b-vjhkisokvd] {
    margin-inline-start: auto;
    padding: 8px 15px;
    border: 1.5px solid transparent;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-secondary);
}

/* Hover / keyboard focus: the same ramp with the white veil taken off —
   one notch up on the edge the button already wears, not a new colour and
   not a border-color, which would paint an opaque line straight over the
   gradient it is meant to strengthen. The focus RING stays the shell's
   (`.motiva-final :focus-visible`, motiva-base.css). */
.stf-pd-btn-edit:hover[b-vjhkisokvd],
.stf-pd-btn-edit:focus-visible[b-vjhkisokvd] {
    background:
        linear-gradient(var(--motiva-surface-solid), var(--motiva-surface-solid)) padding-box,
        var(--motiva-gradient-signature) border-box;
    color: var(--motiva-text-primary);
}

.stf-pd-btn-ghost[b-vjhkisokvd] {
    padding: 9px 16px;
    border: 0;
    background: none;
    color: var(--motiva-text-muted);
}

.stf-pd-btn-ghost:hover:not(:disabled)[b-vjhkisokvd] { color: var(--motiva-text-primary); }
.stf-pd-btn-ghost:disabled[b-vjhkisokvd]             { cursor: default; opacity: .55; }

/* Fill + radius + hover come from the global .motiva-cta rule this button
   also carries (motiva-base.css); only geometry is declared here. */
.stf-pd-btn-save[b-vjhkisokvd] {
    padding: 9px 18px;
    border: 0;
}

.stf-pd-spinner[b-vjhkisokvd] {
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: stf-pd-spin-b-vjhkisokvd .8s linear infinite;
}

@keyframes stf-pd-spin-b-vjhkisokvd { to { transform: rotate(360deg); } }

/* ── Save / error flash ───────────────────────────────────────
   The teal confirmation strip, and the same strip in the system's one
   attention colour for the failure the design file has no state for. */

.stf-pd-flash[b-vjhkisokvd] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    padding: 10px 15px;

    border-radius: var(--motiva-radius-row);
    background: var(--motiva-color-success-bg);
    color: var(--motiva-color-teal-ink);

    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.3;
}

.stf-pd-flash-error[b-vjhkisokvd] {
    background: var(--motiva-color-danger-bg);
    color: var(--motiva-color-rose-ink);
}

.stf-pd-flash svg[b-vjhkisokvd] { flex: 0 0 auto; }

/* ── Fields ───────────────────────────────────────────────────
   Two equal columns with a 28px gutter and no row gap: the hairline under
   each field IS the row rhythm, which is what makes the grid read as a
   continuous list rather than as four boxes. */

.stf-pd-fields[b-vjhkisokvd] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 28px;
}

.stf-pd-field[b-vjhkisokvd] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    padding: 13px 0;
    border-bottom: 1px solid var(--motiva-border-light);
}

/* The hairline is the rhythm BETWEEN rows, so the last row does not draw
   one — a rule with nothing beneath it would close the card on an empty
   edge. Two fields per row, so the last ROW is the last two fields; inside
   the container query below the grid is one column and the last row is one
   field, which is why the rule is restated there.

   Same measured note as the student card's: --motiva-border-light is not
   declared anywhere in the app today, so this declaration is invalid at
   computed-value time and NO field hairline renders — here or there. That
   is a pre-existing token gap, not this screen's, and the rule is what
   keeps both cards correct on the day it is filled. */
.stf-pd-field:nth-last-child(-n + 2)[b-vjhkisokvd] { border-bottom: none; }

.stf-pd-label[b-vjhkisokvd] {
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-subtle);
}

.stf-pd-value[b-vjhkisokvd] {
    font-size: var(--motiva-font-size-body, 14.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.3;
    color: var(--motiva-text-primary);

    /* A long address must ellipsise inside its own column rather than
       widen the track — the grid is minmax(0,1fr) for the same reason. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stf-pd-value-empty[b-vjhkisokvd] { color: var(--motiva-text-subtle); }

/* An email or a phone number is an LTR string and must render as one, but
   it still belongs under its label at the RTL reading edge.
   `text-align: right` is what puts it there: `direction: ltr` redefines
   what `start` means for this element, so `text-align: start` would push
   the value to the far side of its column, away from the label naming it. */
.stf-pd-ltr[b-vjhkisokvd] {
    direction: ltr;
    text-align: right;
}

.stf-pd-input[b-vjhkisokvd] {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 13px;

    border: 1.5px solid var(--motiva-border-strong);
    border-radius: 11px;
    background: var(--motiva-surface-primary, #fff);

    font-family: inherit;
    font-size: var(--motiva-font-size-control, 14px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.3;
    color: var(--motiva-text-primary);
}

.stf-pd-input:disabled[b-vjhkisokvd] { opacity: .6; cursor: default; }

/* ── Responsive ───────────────────────────────────────────────
   One field column under 560px of CARD width — a container query, not a
   viewport one, because this card is ~62% of the page on a wide screen
   and full width when the page stacks. */

@container stf-pd (max-width: 560px) {
    .stf-pd-fields[b-vjhkisokvd] { grid-template-columns: minmax(0, 1fr); }

    .stf-pd-field:nth-last-child(-n + 2)[b-vjhkisokvd] {
        border-bottom: 1px solid var(--motiva-border-light);
    }

    .stf-pd-field:last-child[b-vjhkisokvd] { border-bottom: none; }
}

@media (max-width: 700px) {
    .stf-pd[b-vjhkisokvd] { padding: 16px 18px 16px; }
}
/* /Pages/Settings/StaffSettingsPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   Notification preferences card
   ═══════════════════════════════════════════════════════════ */
.spp-card-notifications[b-owv3wmdgvv]  { display: flex; flex-direction: column; gap: 10px; }
.spp-loading-row[b-owv3wmdgvv]         { padding: 12px; color: #64748b; font-size: 0.9rem; }
.spp-spinner-sm[b-owv3wmdgvv] {
    display: inline-block; width: 12px; height: 12px; margin-inline-end: 6px;
    border: 2px solid rgba(15,23,42,0.20); border-top-color: #0f172a;
    border-radius: 50%; vertical-align: -2px;
    animation: spp-spin-b-owv3wmdgvv 0.8s linear infinite;
}
@keyframes spp-spin-b-owv3wmdgvv { to { transform: rotate(360deg); } }
.spp-notifs-table[b-owv3wmdgvv]        { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9rem; }
.spp-notifs-table thead th[b-owv3wmdgvv] {
    text-align: start; font-weight: 600; color: #64748b;
    padding: 10px 12px; border-bottom: 1px solid rgba(15,23,42,0.08);
    background: rgba(15,23,42,0.02);
}
.spp-notifs-toggle-col[b-owv3wmdgvv]   { width: 130px; text-align: center; }
.spp-notifs-table tbody td[b-owv3wmdgvv] {
    padding: 9px 12px; border-bottom: 1px solid rgba(15,23,42,0.05);
    vertical-align: middle;
}
.spp-notifs-group-row td[b-owv3wmdgvv] {
    background: rgba(37,99,235,0.05); color: #1e40af;
    font-weight: 700; font-size: 0.82rem; padding: 6px 12px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.spp-check[b-owv3wmdgvv]               { accent-color: #2563eb; width: 16px; height: 16px; cursor: pointer; }
.spp-notifs-actions[b-owv3wmdgvv] {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap; padding-top: 8px;
}
.spp-notifs-hint[b-owv3wmdgvv]         { color: #92400e; font-size: 0.85rem; }
.spp-btn-save[b-owv3wmdgvv] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 8px;
    border: 1px solid #16a34a; background: #16a34a; color: #fff;
    cursor: pointer; font-weight: 600; font-size: 0.88rem;
    margin-inline-start: auto;
}
.spp-btn-save:hover:not(:disabled)[b-owv3wmdgvv] { background: #15803d; }
.spp-btn-save:disabled[b-owv3wmdgvv] {
    background: rgba(15,23,42,0.06);
    border-color: rgba(15,23,42,0.06);
    color: #64748b; cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════
   Student Profile / Personal Settings Page  (spp- prefix)
   RTL · --g-* design tokens
   ═══════════════════════════════════════════════════════════ */

/* ── Loading / Error states ───────────────────────────────── */
.spp-loading[b-owv3wmdgvv],
.spp-error[b-owv3wmdgvv] {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--g-space-sm);
    padding:         var(--g-space-xl);
    color:           var(--g-text-secondary);
    font-size:       var(--g-type-body);
}

.spp-error[b-owv3wmdgvv] {
    flex-direction: column;
    color:          var(--g-danger);
}

/* ── Spinners ─────────────────────────────────────────────── */
.spp-spinner[b-owv3wmdgvv] {
    width:         40px;
    height:        40px;
    border:        3px solid var(--g-border);
    border-top:    3px solid var(--g-accent);
    border-radius: var(--g-radius-full);
    animation:     spp-spin-b-owv3wmdgvv 0.8s linear infinite;
}

.spp-spinner-sm[b-owv3wmdgvv] {
    width:         16px;
    height:        16px;
    border:        2px solid var(--g-border);
    border-top:    2px solid var(--g-accent);
    border-radius: var(--g-radius-full);
    animation:     spp-spin-b-owv3wmdgvv 0.8s linear infinite;
    display:       inline-block;
    flex-shrink:   0;
}

@keyframes spp-spin-b-owv3wmdgvv {
    to { transform: rotate(360deg); }
}

/* ── Page wrapper ─────────────────────────────────────────── */
.spp-page[b-owv3wmdgvv] {
    direction:      rtl;
    padding:        var(--g-space-lg);
    max-width:      1100px;
    display:        flex;
    flex-direction: column;
    gap:            var(--g-space-lg);
}

/* PAGE TITLE — the shared h1 step. Values live in motiva-tokens.css; never restate them here. */
.spp-page-title[b-owv3wmdgvv] {
    margin: 0;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-h1, 38px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: var(--motiva-line-height-tight, 1.1);
    letter-spacing: var(--motiva-letter-spacing-page, -0.035em);
    color: var(--motiva-text-primary, #1B1A22);
}

/* ── Profile strip ────────────────────────────────────────── */
.spp-profile-strip[b-owv3wmdgvv] {
    display:       flex;
    align-items:   center;
    gap:           var(--g-space-lg);
    background:    var(--g-bg-surface);
    border:        1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    padding:       var(--g-space-lg);
    box-shadow:    var(--g-shadow-sm);
    flex-wrap:     wrap;
}

/* Avatar */
.spp-avatar-wrap[b-owv3wmdgvv] {
    position:    relative;
    flex-shrink: 0;
    width:       80px;
    height:      80px;
}

.spp-avatar-img[b-owv3wmdgvv],
.spp-avatar-initials[b-owv3wmdgvv] {
    width:         80px;
    height:        80px;
    border-radius: var(--g-radius-full);
    display:       flex;
    align-items:   center;
    justify-content: center;
}

.spp-avatar-img[b-owv3wmdgvv] {
    object-fit: cover;
}

.spp-avatar-initials[b-owv3wmdgvv] {
    background:  var(--g-accent-light);
    color:       var(--g-accent);
    font-size:   26px;
    font-weight: 700;
    user-select: none;
}

.spp-avatar-overlay[b-owv3wmdgvv] {
    position:        absolute;
    inset:           0;
    border-radius:   var(--g-radius-full);
    background:      rgba(0, 0, 0, 0.42);
    color:           #fff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       22px;
    opacity:         0;
    transition:      opacity 0.15s;
    cursor:          pointer;
}

.spp-avatar-wrap:hover .spp-avatar-overlay[b-owv3wmdgvv] {
    opacity: 1;
}

.spp-avatar-file-input[b-owv3wmdgvv] {
    display: none;
}

/* Strip info */
.spp-profile-strip-info[b-owv3wmdgvv] {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    flex:           1;
    min-width:      0;
}

.spp-strip-name[b-owv3wmdgvv] {
    font-size:     var(--g-type-subtitle);
    font-weight:   700;
    color:         var(--g-text-primary);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.spp-strip-badges[b-owv3wmdgvv] {
    display:     flex;
    align-items: center;
    gap:         var(--g-space-sm);
    flex-wrap:   wrap;
}

/* Default tag: white paper under the Motiva gradient edge, dark ink.
   `--motiva-tag-brand-surface`, the product's one tag recipe. The edge is
   paid for out of the padding so the pill's outer box does not move. */
.spp-role-badge[b-owv3wmdgvv] {
    display:       inline-flex;
    align-items:   center;
    background:    var(--motiva-tag-brand-surface);
    color:         var(--motiva-text-primary);
    border:        1px solid transparent;
    font-size:     var(--g-type-secondary);
    font-weight:   600;
    padding:       1px 9px;
    border-radius: var(--g-radius-full);
}

.spp-strip-year[b-owv3wmdgvv],
.spp-strip-project[b-owv3wmdgvv] {
    display:     inline-flex;
    align-items: center;
    gap:         4px;
    font-size:   var(--g-type-secondary);
    color:       var(--g-text-secondary);
}

.spp-strip-meta[b-owv3wmdgvv] {
    display:     flex;
    align-items: center;
    gap:         var(--g-space-md);
    font-size:   var(--g-type-secondary);
    color:       var(--g-text-secondary);
    flex-wrap:   wrap;
}

.spp-strip-meta span[b-owv3wmdgvv] {
    display:     inline-flex;
    align-items: center;
    gap:         4px;
}

.spp-remove-avatar-btn[b-owv3wmdgvv] {
    background:      none;
    border:          none;
    padding:         0;
    font-size:       var(--g-type-secondary);
    color:           var(--g-danger);
    cursor:          pointer;
    text-decoration: underline;
    align-self:      flex-start;
    font-family:     var(--g-font-base);
    transition:      opacity 0.12s;
}

.spp-remove-avatar-btn:hover[b-owv3wmdgvv]    { opacity: 0.75; }
.spp-remove-avatar-btn:disabled[b-owv3wmdgvv] { opacity: 0.45; cursor: default; }

/* Avatar upload status */
.spp-avatar-status[b-owv3wmdgvv] {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   var(--g-type-secondary);
    color:       var(--g-text-secondary);
}

/* ── Main grid ────────────────────────────────────────────── */
.spp-grid[b-owv3wmdgvv] {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--g-space-lg);
    align-items:           start;
}

/* Collapses to one column for roles that have nothing to show on the
   secondary side (lecturer / admin without a mentor row). Caps the width so
   the lone column doesn't stretch across the whole page on wide screens. */
.spp-grid.spp-grid-single[b-owv3wmdgvv] {
    grid-template-columns: 1fr;
    max-width:             720px;
}

.spp-col[b-owv3wmdgvv] {
    display:        flex;
    flex-direction: column;
    gap:            var(--g-space-lg);
}

/* ── Card ─────────────────────────────────────────────────── */
.spp-card[b-owv3wmdgvv] {
    /* Surface from the shared `.motiva-panel` class (motiva-base.css),
       worn in the markup. This block used to restate it as --g-bg-surface at
       --g-radius-md behind --g-border-light with --g-shadow-sm: the same white,
       but a 16px corner, a grey hairline and no lift, against the 24px violet-
       edged lifted panel every migrated screen renders. */
    padding: var(--g-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--g-space-md);
}

.spp-card-header[b-owv3wmdgvv] {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--g-space-sm);
}

/* CARD TITLE — the shared h3 step (16px/700). Was a per-page literal. */
.spp-card-title[b-owv3wmdgvv] {
    display:     inline-flex;
    align-items: center;
    gap:         var(--g-space-sm);
    font-size: var(--motiva-font-size-h3, 16px);
    font-weight: 700;
    color:       var(--g-text-primary);
}

/* Small muted line that may sit under .spp-card-title or inside
   .spp-card-header. Used by Notification Preferences and Mentor Preferences. */
.spp-card-subtitle[b-owv3wmdgvv] {
    margin:    0;
    font-size: var(--g-type-secondary);
    color:     var(--g-text-muted);
}

/* ── Field rows (personal details) ───────────────────────── */
.spp-fields[b-owv3wmdgvv] {
    display:        flex;
    flex-direction: column;
}

.spp-field[b-owv3wmdgvv] {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             var(--g-space-sm);
    padding:         10px 0;
    border-bottom:   1px solid var(--g-border-light);
}

.spp-field:last-child[b-owv3wmdgvv] { border-bottom: none; }

.spp-field-label[b-owv3wmdgvv] {
    font-size:   var(--g-type-secondary);
    font-weight: 600;
    color:       var(--g-text-secondary);
    flex-shrink: 0;
    min-width:   80px;
}

.spp-field-val[b-owv3wmdgvv] {
    font-size:  var(--g-type-body);
    color:      var(--g-text-primary);
    text-align: start;
    flex:       1;
}

/* Phone editable row */
.spp-field-edit[b-owv3wmdgvv] { flex-wrap: wrap; }

.spp-field-edit-row[b-owv3wmdgvv] {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--g-space-sm);
    flex:            1;
}

.spp-inline-edit[b-owv3wmdgvv] {
    display:     flex;
    align-items: center;
    gap:         var(--g-space-sm);
    flex:        1;
}

.spp-inline-input[b-owv3wmdgvv] {
    flex:          1;
    min-width:     120px;
    padding:       6px var(--g-space-sm);
    font-size:     var(--g-type-secondary);
    font-family:   var(--g-font-base);
    color:         var(--g-text-primary);
    background:    var(--g-bg-input);
    border:        1px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    outline:       none;
    direction:     ltr;
    text-align:    left;
    transition:    border-color 0.12s, box-shadow 0.12s;
}

.spp-inline-input:focus[b-owv3wmdgvv] {
    border-color: var(--g-accent);
    box-shadow:   0 0 0 3px rgba(99, 102, 241, 0.12);
}

.spp-inline-input:disabled[b-owv3wmdgvv] { opacity: 0.6; }

/* ── Buttons ──────────────────────────────────────────────── */
.spp-btn-save[b-owv3wmdgvv] {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       6px var(--g-space-md);
    background:    var(--g-accent);
    color:         #fff;
    border:        none;
    border-radius: var(--g-radius-sm);
    font-size:     var(--g-type-secondary);
    font-family:   var(--g-font-base);
    font-weight:   600;
    cursor:        pointer;
    white-space:   nowrap;
    transition:    background 0.15s;
}

.spp-btn-save:hover:not(:disabled)[b-owv3wmdgvv]   { background: var(--g-accent-hover); }
.spp-btn-save:disabled[b-owv3wmdgvv]               { opacity: 0.6; cursor: default; }

.spp-btn-ghost[b-owv3wmdgvv] {
    padding:       6px var(--g-space-sm);
    background:    transparent;
    color:         var(--g-text-secondary);
    border:        1px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    font-size:     var(--g-type-secondary);
    font-family:   var(--g-font-base);
    cursor:        pointer;
    white-space:   nowrap;
    transition:    border-color 0.15s, color 0.15s;
}

.spp-btn-ghost:hover:not(:disabled)[b-owv3wmdgvv]  { border-color: var(--g-accent); color: var(--g-accent); }
.spp-btn-ghost:disabled[b-owv3wmdgvv]              { opacity: 0.5; cursor: default; }

.spp-btn-edit[b-owv3wmdgvv] {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    padding:       4px var(--g-space-sm);
    background:    transparent;
    color:         var(--g-accent);
    border:        1px solid var(--g-accent-light);
    border-radius: var(--g-radius-sm);
    font-size:     var(--g-type-secondary);
    font-family:   var(--g-font-base);
    cursor:        pointer;
    white-space:   nowrap;
    transition:    background 0.15s;
}

.spp-btn-edit:hover[b-owv3wmdgvv] { background: var(--g-accent-light); }

/* ── Theme selector ───────────────────────────────────────── */
.spp-theme-group[b-owv3wmdgvv] {
    display:       flex;
    border:        1px solid var(--g-border);
    border-radius: var(--g-radius-sm);
    overflow:      hidden;
}

.spp-theme-btn[b-owv3wmdgvv] {
    flex:            1;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         10px var(--g-space-sm);
    background:      var(--g-bg-input);
    color:           var(--g-text-secondary);
    border:          none;
    border-left:     1px solid var(--g-border);
    font-size:       var(--g-type-secondary);
    font-family:     var(--g-font-base);
    font-weight:     500;
    cursor:          pointer;
    transition:      background 0.15s, color 0.15s;
}

.spp-theme-btn:first-child[b-owv3wmdgvv] { border-left: none; }

.spp-theme-btn:hover:not(.spp-theme-active)[b-owv3wmdgvv] {
    background: var(--g-bg-hover);
    color:      var(--g-text-primary);
}

.spp-theme-active[b-owv3wmdgvv] {
    background: var(--g-accent) !important;
    color:      #fff !important;
}

/* ── Toggle switches (notifications) ─────────────────────── */
.spp-toggles[b-owv3wmdgvv] {
    display:        flex;
    flex-direction: column;
}

.spp-toggle-row[b-owv3wmdgvv] {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--g-space-md);
    padding:         10px 0;
    border-bottom:   1px solid var(--g-border-light);
}

.spp-toggle-row:last-child[b-owv3wmdgvv] { border-bottom: none; }

.spp-toggle-text[b-owv3wmdgvv] {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    flex:           1;
    min-width:      0;
}

.spp-toggle-title[b-owv3wmdgvv] {
    font-size:   var(--g-type-secondary);
    font-weight: 600;
    color:       var(--g-text-primary);
}

.spp-toggle-sub[b-owv3wmdgvv] {
    font-size: var(--motiva-font-size-control, 13px);
    color:     var(--g-text-muted);
}

/* Toggle pill */
.spp-toggle[b-owv3wmdgvv] {
    position:      relative;
    flex-shrink:   0;
    width:         44px;
    height:        24px;
    background:    #94a3b8;   /* solid mid-gray — visible on any background */
    border:        none;
    border-radius: var(--g-radius-full);
    cursor:        pointer;
    padding:       0;
    transition:    background 0.2s;
}

.spp-toggle-on[b-owv3wmdgvv] { background: var(--g-accent); }

.spp-toggle-thumb[b-owv3wmdgvv] {
    position:      absolute;
    top:           3px;
    right:         3px;
    width:         18px;
    height:        18px;
    border-radius: var(--g-radius-full);
    background:    #fff;
    box-shadow:    0 1px 4px rgba(0, 0, 0, 0.30);
    transition:    transform 0.2s;
    display:       block;
}

.spp-toggle-on .spp-toggle-thumb[b-owv3wmdgvv] {
    transform: translateX(-20px);
}

/* ── Integrations ─────────────────────────────────────────── */
.spp-integration-row[b-owv3wmdgvv] {
    display:       flex;
    align-items:   center;
    gap:           var(--g-space-md);
    padding:       var(--g-space-md) 0;
    border-bottom: 1px solid var(--g-border-light);
}

.spp-integration-row:last-child[b-owv3wmdgvv] { border-bottom: none; }

.spp-int-icon[b-owv3wmdgvv] {
    flex-shrink:     0;
    width:           44px;
    height:          44px;
    border-radius:   var(--g-radius-md);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       20px;
}

.spp-int-slack[b-owv3wmdgvv]  { background: #4a154b; color: #fff; }
.spp-int-google[b-owv3wmdgvv] { background: #fff; color: #4285f4; border: 1px solid var(--g-border); }

.spp-int-info[b-owv3wmdgvv] {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    flex:           1;
    min-width:      0;
}

.spp-int-name[b-owv3wmdgvv] {
    font-size:   var(--g-type-secondary);
    font-weight: 700;
    color:       var(--g-text-primary);
}

.spp-int-desc[b-owv3wmdgvv] {
    font-size: var(--motiva-font-size-sm, 13px);
    color:     var(--g-text-muted);
}

.spp-int-status[b-owv3wmdgvv] {
    display:     inline-flex;
    align-items: center;
    gap:         4px;
    font-size: var(--motiva-font-size-caption, 13px);
    color:       var(--g-text-secondary);
}

.spp-int-status-ok[b-owv3wmdgvv] { color: #22c55e; }

.spp-int-action[b-owv3wmdgvv] {
    flex-shrink: 0;
    display:     flex;
    align-items: center;
}

.spp-int-dimmed[b-owv3wmdgvv] { opacity: 0.6; }

.spp-btn-connect[b-owv3wmdgvv] {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       7px var(--g-space-md);
    background:    var(--g-accent);
    color:         #fff;
    border:        none;
    border-radius: var(--g-radius-sm);
    font-size:     var(--g-type-secondary);
    font-family:   var(--g-font-base);
    font-weight:   600;
    cursor:        pointer;
    white-space:   nowrap;
    transition:    background 0.15s;
}

.spp-btn-connect:hover[b-owv3wmdgvv] { background: var(--g-accent-hover); }

.spp-btn-danger-sm[b-owv3wmdgvv] {
    padding:       7px var(--g-space-md);
    background:    transparent;
    color:         var(--g-danger);
    border:        1px solid var(--g-danger);
    border-radius: var(--g-radius-sm);
    font-size:     var(--g-type-secondary);
    font-family:   var(--g-font-base);
    font-weight:   600;
    cursor:        pointer;
    white-space:   nowrap;
    transition:    background 0.15s, color 0.15s;
}

.spp-btn-danger-sm:hover[b-owv3wmdgvv] {
    background: var(--g-danger);
    color:      #fff;
}

.spp-coming-soon[b-owv3wmdgvv] {
    display:       inline-block;
    padding:       3px 10px;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight:   600;
    color:         var(--g-text-muted);
    background:    var(--g-border-light);
    border-radius: var(--g-radius-full);
    white-space:   nowrap;
}

/* ── Feedback chips & messages ────────────────────────────── */
.spp-saved-chip[b-owv3wmdgvv] {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    padding:       3px 10px;
    font-size: var(--motiva-font-size-caption, 13px);
    font-weight:   600;
    color:         #22c55e;
    background:    rgba(34, 197, 94, 0.1);
    border-radius: var(--g-radius-full);
    animation:     spp-fade-in-b-owv3wmdgvv 0.18s ease;
}

.spp-inline-success[b-owv3wmdgvv] {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   var(--g-type-secondary);
    color:       #22c55e;
    margin:      4px 0 0;
}

.spp-inline-error[b-owv3wmdgvv] {
    font-size: var(--g-type-secondary);
    color:     var(--g-danger);
    margin:    4px 0 0;
}

@keyframes spp-fade-in-b-owv3wmdgvv {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1);   }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 680px) {
    .spp-page[b-owv3wmdgvv] { padding: var(--g-space-md); }

    .spp-grid[b-owv3wmdgvv] {
        grid-template-columns: 1fr;
    }

    .spp-profile-strip[b-owv3wmdgvv] {
        flex-direction: column;
        align-items:    flex-start;
    }

    .spp-strip-meta[b-owv3wmdgvv] {
        flex-direction: column;
        align-items:    flex-start;
        gap:            4px;
    }

    .spp-theme-btn[b-owv3wmdgvv] {
        flex-direction: column;
        padding:        8px 4px;
        gap:            2px;
        font-size:      12px;
    }
}
/* /Pages/Student/StudentAssignmentPage.razor.rz.scp.css */
/* ============================================================
   Assignment form (טופס בחירת פרויקט) — scoped page styles
   Prefix: sap-

   Rewritten with the student migration. The page header, the five section
   cards, the readiness badges, the own-project toggle, the partner search
   and the loading / error / gate states are shared Motiva primitives now,
   so this file keeps only what they do not own: the page bleed, the form
   rhythm, and the controls the design system has no component for yet
   (priority selects, strength chips, partner rows, validation hints).
   ============================================================ */

/* The white Core page-header card aligns to the page CONTENT width (no bleed);
   it carries the gap down to the form below. */
.sap-header[b-ae6vpi6pgc] {
    margin-block-end: 22px;
}

.sap-page[b-ae6vpi6pgc] {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-md);
}

/* ── Back link (header Actions slot) ── */
.sap-back-btn[b-ae6vpi6pgc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--motiva-control-height-sm);
    padding: 0 14px;
    border-radius: var(--motiva-radius-sm);
    border: 1px solid var(--motiva-border-strong);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-secondary);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color      var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.sap-back-btn:hover[b-ae6vpi6pgc] { background: var(--motiva-surface-hover); color: var(--motiva-text-primary); }
.sap-back-btn .oi[b-ae6vpi6pgc]   { font-size: var(--motiva-font-size-caption, 10px); }

/* ── Banners ──
   Three tones, on the Master's three semantics: teal = it worked, violet =
   informational/in-flight, rose is deliberately NOT used here (nothing on
   this page is an attention state the student has to fix). */
.sap-success-banner[b-ae6vpi6pgc],
.sap-info-banner[b-ae6vpi6pgc],
.sap-edit-mode-banner[b-ae6vpi6pgc] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--motiva-radius-md);
    font-size: var(--motiva-font-size-body);
    line-height: var(--motiva-line-height-body);
}

.sap-success-banner[b-ae6vpi6pgc] {
    background: var(--motiva-color-success-bg);
    color: var(--motiva-color-teal);
    border: 1px solid rgba(13, 156, 154, 0.30);
    border-color: color-mix(in srgb, var(--motiva-color-teal) 30%, transparent);
}

.sap-info-banner[b-ae6vpi6pgc] {
    background: var(--motiva-surface-secondary);
    color: var(--motiva-text-secondary);
    border: 1px solid var(--motiva-border-subtle);
}

.sap-edit-mode-banner[b-ae6vpi6pgc] {
    background: var(--motiva-color-brand-bg);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    border: 1px solid var(--motiva-border-subtle);
}

.sap-cancel-edit-btn[b-ae6vpi6pgc] {
    margin-inline-start: auto;
    padding: 4px 12px;
    border-radius: var(--motiva-radius-sm);
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
    cursor: pointer;
}

/* ── Form + sections (MCard owns each section's surface) ── */
.sap-form[b-ae6vpi6pgc] {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-md);
}

.sap-section-head[b-ae6vpi6pgc] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-block-end: var(--motiva-space-md);
}

/* The step number is the one place a filled brand surface appears in the
   form — it is a wayfinding marker, not a status. */
.sap-section-num[b-ae6vpi6pgc] {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-color-violet, var(--motiva-color-indigo));
    color: #fff; /* approved exception: ink on a filled brand surface */
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-bold);
}

/* The title carries the required marker AND the info tip that replaced the
   subtitle under it, so it has to be a flex line rather than a block of text.
   The tip is inline-flex and sized to its 20px button, so it adds no height. */
.sap-section-title[b-ae6vpi6pgc] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: var(--motiva-font-size-h3);
    font-weight: var(--motiva-font-weight-bold);
    line-height: var(--motiva-line-height-heading);
    color: var(--motiva-text-primary);
}

/* WHY THE SUBTITLE IS GONE.
   Every section printed a sentence of instruction under its heading, and the
   admin's own questions printed another under each of theirs. Read once,
   permanent thereafter — six paragraphs of standing text between a student and
   the controls they came to use. The sentences moved into MInfoTip beside the
   titles; nothing was deleted, and validation and error copy stay on the page
   where they have to be seen without being asked for. */

/* The readiness badge is the head's trailing element. It belongs to
   MStatusBadge, so it needs ::deep to be reachable from this stylesheet. */
.sap-section-head[b-ae6vpi6pgc]  .m-badge { margin-inline-start: auto; }

/* ── Team ── */
.sap-member-list[b-ae6vpi6pgc],
.sap-team-preview[b-ae6vpi6pgc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.sap-member-chip[b-ae6vpi6pgc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--motiva-radius-full);
    border: 1px solid var(--motiva-border-strong);
    background: var(--motiva-surface-primary);
    font-size: var(--motiva-font-size-sm);
    color: var(--motiva-text-primary);
}

.sap-member-chip .oi[b-ae6vpi6pgc] { font-size: var(--motiva-font-size-caption, 11px); color: var(--motiva-text-muted); }

.sap-chip-me[b-ae6vpi6pgc] {
    border-color: var(--motiva-color-violet, var(--motiva-color-indigo));
    background: var(--motiva-color-brand-bg);
}

.sap-chip-you[b-ae6vpi6pgc] {
    padding: 1px 7px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-color-violet, var(--motiva-color-indigo));
    color: #fff; /* approved exception, as above */
    font-size: var(--motiva-font-size-caption, 10px);
    font-weight: var(--motiva-font-weight-bold);
}

.sap-chip-remove[b-ae6vpi6pgc] {
    border: none;
    background: none;
    color: var(--motiva-text-muted);
    cursor: pointer;
    font-size: var(--motiva-font-size-caption, 11px);
    padding: 0 0 0 2px;
}

.sap-chip-remove:hover[b-ae6vpi6pgc] { color: var(--motiva-color-rose, var(--motiva-color-danger)); }

.sap-team-plus[b-ae6vpi6pgc] { color: var(--motiva-text-muted); font-size: var(--motiva-font-size-sm); }

.sap-team-plus--empty[b-ae6vpi6pgc] {
    padding: 6px 12px;
    border-radius: var(--motiva-radius-full);
    border: 1px dashed var(--motiva-border-strong);
}

.sap-no-partners[b-ae6vpi6pgc] {
    margin: 12px 0 0;
    font-size: var(--motiva-font-size-sm);
    color: var(--motiva-text-muted);
}

.sap-partner-search[b-ae6vpi6pgc] { margin-block-start: 12px; }

.sap-partner-list[b-ae6vpi6pgc] {
    margin-block-start: 10px;
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sap-partner-row[b-ae6vpi6pgc] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--motiva-radius-sm);
    cursor: pointer;
    font-size: var(--motiva-font-size-body);
    color: var(--motiva-text-primary);
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.sap-partner-row:hover[b-ae6vpi6pgc] { background: var(--motiva-surface-hover); }

.sap-partner-row--selected[b-ae6vpi6pgc] {
    background: var(--motiva-color-brand-bg);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    font-weight: var(--motiva-font-weight-semibold);
}

.sap-partner-row--disabled[b-ae6vpi6pgc] { opacity: 0.45; cursor: not-allowed; }

.sap-partner-cb[b-ae6vpi6pgc] { accent-color: var(--motiva-color-violet, var(--motiva-color-indigo)); }
.sap-partner-name[b-ae6vpi6pgc] { flex: 1; }
.sap-chip-selected-tick[b-ae6vpi6pgc] { color: var(--motiva-color-teal); font-weight: var(--motiva-font-weight-bold); }

/* ── Strengths ── */
.sap-strengths-grid-outer[b-ae6vpi6pgc] {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-md);
}

.sap-strengths-member[b-ae6vpi6pgc] {
    padding: 12px;
    border-radius: var(--motiva-radius-md);
    border: 1px solid var(--motiva-border-subtle);
    background: var(--motiva-surface-secondary);
}

.sap-strengths-member-name[b-ae6vpi6pgc] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-block-end: 10px;
    font-size: var(--motiva-font-size-item, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
}

.sap-strengths-member-name .oi[b-ae6vpi6pgc] { font-size: var(--motiva-font-size-caption, 11px); color: var(--motiva-text-muted); }

.sap-strengths-chips[b-ae6vpi6pgc] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sap-strength-chip[b-ae6vpi6pgc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--motiva-radius-full);
    border: 1px solid var(--motiva-border-strong);
    background: var(--motiva-surface-primary);
    font-size: var(--motiva-font-size-sm);
    color: var(--motiva-text-secondary);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color      var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.sap-strength-chip:hover[b-ae6vpi6pgc] { background: var(--motiva-surface-hover); }

.sap-strength-chip--active[b-ae6vpi6pgc] {
    background: var(--motiva-color-brand-bg);
    border-color: var(--motiva-color-violet, var(--motiva-color-indigo));
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

.sap-strength-icon[b-ae6vpi6pgc] { font-size: var(--motiva-font-size-caption, 13px); line-height: 1; }
.sap-hidden-cb[b-ae6vpi6pgc] { position: absolute; opacity: 0; width: 0; height: 0; }

/* ── Preferences ── */
.sap-prefs-list[b-ae6vpi6pgc] {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-md);
}

.sap-pref-header[b-ae6vpi6pgc] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block-end: 6px;
}

.sap-pref-num[b-ae6vpi6pgc] {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--motiva-radius-full);
    border: 1px solid var(--motiva-border-strong);
    color: var(--motiva-text-secondary);
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-bold);
}

.sap-pref-label[b-ae6vpi6pgc] {
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
}

.sap-pref-select[b-ae6vpi6pgc],
.sap-textarea[b-ae6vpi6pgc] {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--motiva-radius-md);
    border: 1px solid var(--motiva-border-strong);
    background: var(--motiva-surface-secondary);
    color: var(--motiva-text-primary);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-body);
    line-height: var(--motiva-line-height-body);
}

.sap-pref-select[b-ae6vpi6pgc] { cursor: pointer; }
.sap-textarea[b-ae6vpi6pgc]    { resize: vertical; margin-block-start: 12px; }

.sap-pref-select:focus-visible[b-ae6vpi6pgc],
.sap-textarea:focus-visible[b-ae6vpi6pgc] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.sap-pref-desc[b-ae6vpi6pgc] {
    margin: 6px 0 0;
    font-size: var(--motiva-font-size-sm);
    color: var(--motiva-text-muted);
    line-height: var(--motiva-line-height-body);
}

/* ── Own project ── */
.sap-own-toggle[b-ae6vpi6pgc] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sap-toggle-label[b-ae6vpi6pgc] {
    font-size: var(--motiva-font-size-body);
    color: var(--motiva-text-secondary);
}

/* ── Footer ── */
.sap-footer[b-ae6vpi6pgc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-block-start: var(--motiva-space-md);
}

.sap-validation-hints[b-ae6vpi6pgc] {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: var(--motiva-font-size-sm);
}

.sap-hint--ok[b-ae6vpi6pgc]      { color: var(--motiva-color-teal); font-weight: var(--motiva-font-weight-semibold); }
.sap-hint--missing[b-ae6vpi6pgc] { color: var(--motiva-text-muted); }

.sap-error-msg[b-ae6vpi6pgc] {
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
}

/* Geometry only — the fill comes from the shared `.motiva-cta`. */
.sap-submit-btn[b-ae6vpi6pgc] {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 26px;
    border: none;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-md);
    font-weight: var(--motiva-font-weight-semibold);
    white-space: nowrap;
}

.sap-btn-spinner[b-ae6vpi6pgc] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-block-start-color: #fff;
    border-radius: var(--motiva-radius-full);
    animation: sap-spin-b-ae6vpi6pgc 0.65s linear infinite;
}

@keyframes sap-spin-b-ae6vpi6pgc { to { transform: rotate(360deg); } }

/* ── Summary view ── */
.sap-summary[b-ae6vpi6pgc] {
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-md);
}

.sap-summary-section-head[b-ae6vpi6pgc] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block-end: var(--motiva-space-md);
}

.sap-summary-icon[b-ae6vpi6pgc] { font-size: var(--motiva-font-size-item, 16px); line-height: 1; }

.sap-summary-title[b-ae6vpi6pgc] {
    margin: 0;
    font-size: var(--motiva-font-size-h3);
    font-weight: var(--motiva-font-weight-bold);
    color: var(--motiva-text-primary);
}

.sap-summary-members[b-ae6vpi6pgc],
.sap-summary-prefs[b-ae6vpi6pgc] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sap-summary-member-name[b-ae6vpi6pgc] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--motiva-font-size-item, 14px);
    color: var(--motiva-text-primary);
}

.sap-summary-member-name .oi[b-ae6vpi6pgc] { font-size: var(--motiva-font-size-caption, 11px); color: var(--motiva-text-muted); }

.sap-summary-strengths[b-ae6vpi6pgc] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-block-start: 6px;
}

.sap-summary-strength-tag[b-ae6vpi6pgc] {
    padding: 3px 10px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-surface-secondary);
    border: 1px solid var(--motiva-border-subtle);
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-secondary);
}

.sap-summary-none[b-ae6vpi6pgc] {
    font-size: var(--motiva-font-size-sm);
    color: var(--motiva-text-muted);
    font-style: italic;
}

.sap-summary-pref-row[b-ae6vpi6pgc] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.sap-summary-pref-num[b-ae6vpi6pgc] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-color-brand-bg);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-bold);
}

.sap-summary-pref-text[b-ae6vpi6pgc] { display: flex; flex-direction: column; gap: 2px; }

.sap-summary-pref-title[b-ae6vpi6pgc] {
    font-size: var(--motiva-font-size-item, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
}

.sap-summary-pref-desc[b-ae6vpi6pgc] {
    font-size: var(--motiva-font-size-sm);
    color: var(--motiva-text-muted);
    line-height: var(--motiva-line-height-body);
}

.sap-summary-own-yes[b-ae6vpi6pgc] { display: flex; align-items: flex-start; gap: 10px; }

.sap-summary-own-badge[b-ae6vpi6pgc] {
    padding: 3px 12px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-color-success-bg);
    color: var(--motiva-color-teal);
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-bold);
}

.sap-summary-own-text[b-ae6vpi6pgc],
.sap-summary-notes[b-ae6vpi6pgc] {
    margin: 0;
    font-size: var(--motiva-font-size-body);
    line-height: var(--motiva-line-height-body);
    color: var(--motiva-text-secondary);
    white-space: pre-line;
}

.sap-summary-footer[b-ae6vpi6pgc] {
    display: flex;
    justify-content: flex-end;
}

.sap-edit-btn[b-ae6vpi6pgc] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: var(--motiva-radius-sm);
    border: 1px solid var(--motiva-border-strong);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-secondary);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.sap-edit-btn:hover[b-ae6vpi6pgc] { background: var(--motiva-surface-hover); color: var(--motiva-text-primary); }
.sap-edit-btn .oi[b-ae6vpi6pgc]   { font-size: var(--motiva-font-size-caption, 11px); }

/* ── Responsive ── */
@media (max-width: 720px) {
    .sap-footer[b-ae6vpi6pgc] { flex-direction: column; align-items: stretch; }
    .sap-submit-btn[b-ae6vpi6pgc] { margin-inline-start: 0; justify-content: center; }
    .sap-section-head[b-ae6vpi6pgc] { flex-wrap: wrap; }
}

/* ============================================================
   Admin-configured questions
   ------------------------------------------------------------
   The assignment form is a hybrid: three system blocks whose answers are
   real business records, plus any number of ordinary questions the admin
   added in the form editor. These render in the SAME form and the same
   submit, so they deliberately reuse this page's own section rhythm rather
   than importing the generic form page's look — a student should not be
   able to tell where the domain half stops.
   ============================================================ */

/* The required marker is its own element, never glued to the title text:
   an RTL bidi run drags a trailing asterisk to the wrong end. */
.sap-req[b-ae6vpi6pgc] {
    display: inline-block;
    margin-inline-start: 4px;
    color: var(--motiva-color-rose, #C2506D);
    font-weight: var(--motiva-font-weight-bold, 700);
}

.sap-extra-list[b-ae6vpi6pgc] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* An information block is a break in the list, not a question: no card,
   no number, no required marker. */
.sap-extra-info[b-ae6vpi6pgc] {
    padding-block: 2px;
}

.sap-extra-info-title[b-ae6vpi6pgc] {
    margin: 0 0 5px;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-item, 15px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.3;
    color: var(--motiva-text-primary, #1A1820);
}

.sap-extra-info-text[b-ae6vpi6pgc] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.65;
    color: var(--motiva-text-secondary, #5B5568);
    white-space: pre-wrap;
}

.sap-extra-q[b-ae6vpi6pgc] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.sap-extra-q-title[b-ae6vpi6pgc] {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin: 0;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.45;
    color: var(--motiva-text-primary, #1A1820);
}

.sap-extra-q-help[b-ae6vpi6pgc] {
    margin: 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.5;
    color: var(--motiva-text-muted, #8B8698);
}

.sap-extra-choices[b-ae6vpi6pgc] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.sap-extra-choice[b-ae6vpi6pgc] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--motiva-radius-sm, 11px);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-color-neutral-bg, rgba(27, 26, 34, 0.015));
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.4;
    color: var(--motiva-text-primary, #1A1820);
    cursor: pointer;
    transition:
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.sap-extra-choice:hover[b-ae6vpi6pgc] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 26%, transparent);
}

/* Selected — brand edge on white, never a filled violet row. */
.sap-extra-choice--on[b-ae6vpi6pgc] {
    background: #fff;
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 45%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 12%, transparent);
    font-weight: var(--motiva-font-weight-semibold, 600);
}

.sap-extra-choice input[b-ae6vpi6pgc] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    accent-color: var(--motiva-color-violet, #4F46E5);
    cursor: pointer;
}

.sap-extra-choice:focus-within[b-ae6vpi6pgc] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

/* Wraps rather than scrolls: a 1–10 scale on a narrow screen folds to two
   rows instead of hiding half its buttons behind a scroller. */
.sap-extra-scale[b-ae6vpi6pgc] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.sap-extra-scale-btn[b-ae6vpi6pgc] {
    width: 40px;
    height: 40px;
    border-radius: var(--motiva-radius-sm, 11px);
    border: 1px solid var(--motiva-border-card, #EFEDF4);
    background: var(--motiva-color-neutral-bg, rgba(27, 26, 34, 0.015));
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-control, 14px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-primary, #1A1820);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition:
        border-color var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out),
        background var(--motiva-motion-duration-fast, 120ms) var(--motiva-motion-easing-standard, ease-out);
}

.sap-extra-scale-btn:hover[b-ae6vpi6pgc] {
    border-color: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 30%, transparent);
    background: #fff;
}

/* A single chosen rung earns the one filled control here. */
.sap-extra-scale-btn--on[b-ae6vpi6pgc] {
    background: var(--motiva-color-violet, #4F46E5);
    border-color: var(--motiva-color-violet, #4F46E5);
    color: #fff;
    font-weight: var(--motiva-font-weight-bold, 700);
}

.sap-extra-scale-btn:focus-visible[b-ae6vpi6pgc] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

.sap-extra-scale-labels[b-ae6vpi6pgc] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-muted, #8B8698);
}



/* ── Choosing the three projects ──────────────────────────────
   The section that used to review three projects ranked elsewhere is where
   they are chosen now. One row per rank: the number, a select over the live
   catalogue, and — once a project is in the slot — the way to read about it
   without leaving the form. */
.sap-pref-block[b-ae6vpi6pgc] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sap-pref-pick[b-ae6vpi6pgc] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

/* MSelect renders its own root with its own isolation attribute, so ::deep is
   what makes this reachable. It takes the row's spare width; the read link
   beside it keeps its natural size. */
.sap-pref-pick[b-ae6vpi6pgc]  .sap-pref-select {
    flex: 1 1 auto;
    min-width: 0;
}

.sap-pref-view[b-ae6vpi6pgc] {
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-color-violet, #4F46E5);
    white-space: nowrap;
    cursor: pointer;
}

.sap-pref-view:hover[b-ae6vpi6pgc] { text-decoration: underline; text-underline-offset: 3px; }

.sap-pref-view:focus-visible[b-ae6vpi6pgc] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (max-width: 640px) {
    .sap-pref-pick[b-ae6vpi6pgc] { flex-wrap: wrap; }
}
/* /Pages/Student/StudentCatalogBoard.razor.rz.scp.css */
/* ============================================================
   Project catalog (קטלוג פרויקטים) — scoped styles for the shared
   browse-and-rank surface
   Prefix: sc-

   MOVED HERE FROM StudentCatalog.razor.css when the surface was extracted
   into StudentCatalogBoard so the lecturer's preview could render the real
   catalogue instead of a copy of it. Scoped CSS follows the markup: these
   rules match nothing from the page any more, because the page no longer
   draws any of it. Not one value changed in the move.

   Rewritten with the student migration. Every surface that had a
   hand-rolled equivalent here — header, search field, cards, badges,
   modal, empty/loading states — is now a shared Motiva primitive, so
   this file holds only what those primitives do not own: the page
   bleed, the toolbar row, and the few card/modal internals.
   ============================================================ */

/* ── Header ───────────────────────────────────────────────────
   The white Core page-header card aligns to the page CONTENT width (no bleed).
   The catalog toolbar follows as its own strip; the card carries the gap to it. */
.sc-header[b-mlsnzb1zkx] {
    margin-block-end: 18px;
}

/* The catalog toolbar strip — sits between the header card and the card grid. */
.sc-toolbar-strip[b-mlsnzb1zkx] {
    margin-block-end: 22px;
}

.sc-body[b-mlsnzb1zkx] {
    display: flex;
    flex-direction: column;
}

/* Was a two-column grid with a 280px ranking rail beside the results. The rail
   is gone — choosing moved into the assignment form — so the results are the
   whole width again. The class stays because both hosts name it and because
   "the browse surface" is still a thing worth having a hook for. */
.sc-body--picking[b-mlsnzb1zkx] { display: block; }

.sc-results[b-mlsnzb1zkx] { min-width: 0; }

/* ── Header CTA ──
   Geometry only: the fill, radius and states come from the shared
   `.motiva-cta` treatment in motiva-base.css. */
.sc-assignment-btn[b-mlsnzb1zkx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
}

.sc-arrow[b-mlsnzb1zkx] { font-size: var(--motiva-font-size-control, 15px); line-height: 1; }

/* ── Toolbar (inside the ambient band) ── */
.sc-toolbar[b-mlsnzb1zkx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.sc-filter[b-mlsnzb1zkx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--motiva-font-size-sm);
    color: var(--motiva-text-secondary);
}

.sc-filter-label[b-mlsnzb1zkx] { font-weight: var(--motiva-font-weight-semibold); }

.sc-filter-select[b-mlsnzb1zkx] {
    height: var(--motiva-control-height-sm);
    padding: 0 10px;
    border-radius: var(--motiva-radius-sm);
    border: 1px solid var(--motiva-border-strong);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-primary);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm);
    cursor: pointer;
}

.sc-filter-select:focus-visible[b-mlsnzb1zkx] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.sc-fav-toggle[b-mlsnzb1zkx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--motiva-control-height-sm);
    padding: 0 14px;
    border-radius: var(--motiva-radius-full);
    border: 1px solid var(--motiva-border-strong);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-secondary);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color      var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.sc-fav-toggle:hover[b-mlsnzb1zkx] { background: var(--motiva-surface-hover); }

/* Pressed filter = violet, the Master's focus/action colour — the same
   treatment MKpiCard uses for a pressed filter card. */
.sc-fav-toggle--active[b-mlsnzb1zkx] {
    background: var(--motiva-color-brand-bg);
    border-color: var(--motiva-color-violet, var(--motiva-color-indigo));
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

.sc-star-icon[b-mlsnzb1zkx] { font-size: var(--motiva-font-size-control, 13px); line-height: 1; }

.sc-fav-count[b-mlsnzb1zkx] {
    min-width: 18px;
    padding: 0 5px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-color-violet, var(--motiva-color-indigo));
    color: #fff; /* approved exception: ink on a filled brand surface */
    font-size: var(--motiva-font-size-caption);
    line-height: 18px;
    text-align: center;
}

.sc-count[b-mlsnzb1zkx] {
    margin-inline-start: auto;
    font-size: var(--motiva-font-size-sm);
    color: var(--motiva-text-muted);
    white-space: nowrap;
}

/* ── Card grid ──
   The Master's KPI breakpoints (1060 / 520), reused rather than invented,
   so the catalog steps 3 -> 2 -> 1 on the same widths as every other
   student grid. */
.sc-grid[b-mlsnzb1zkx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

@media (max-width: 1060px) {
    .sc-grid[b-mlsnzb1zkx] { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

@media (max-width: 520px) {
    .sc-grid[b-mlsnzb1zkx] { grid-template-columns: 1fr; }
}

/* ── Card internals (MCard owns the surface, radius, edge and hover) ── */
.sc-card-head[b-mlsnzb1zkx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-block-end: 10px;
}

.sc-card-num[b-mlsnzb1zkx] {
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-bold);
    color: var(--motiva-text-muted);
}

.sc-fav-btn[b-mlsnzb1zkx] {
    margin-inline-start: auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: var(--motiva-radius-sm);
    color: var(--motiva-text-muted);
    font-size: var(--motiva-font-size-lg, 16px);
    line-height: 1;
    cursor: pointer;
    transition: color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.sc-fav-btn:hover[b-mlsnzb1zkx] { background: var(--motiva-surface-hover); color: var(--motiva-text-secondary); }

/* Favourite is a saved-for-later marker, not a status — violet (action),
   never teal or rose, which are reserved for progress and attention. */
.sc-fav-btn--active[b-mlsnzb1zkx],
.sc-fav-btn--active:hover[b-mlsnzb1zkx] { color: var(--motiva-color-violet, var(--motiva-color-indigo)); }

.sc-card-title[b-mlsnzb1zkx] {
    margin: 0 0 6px;
    font-size: var(--motiva-font-size-h3);
    font-weight: var(--motiva-font-weight-bold);
    line-height: var(--motiva-line-height-heading);
    color: var(--motiva-text-primary);
}

.sc-card-desc[b-mlsnzb1zkx] {
    margin: 0 0 10px;
    font-size: var(--motiva-font-size-body);
    line-height: var(--motiva-line-height-body);
    color: var(--motiva-text-secondary);
}

.sc-card-org[b-mlsnzb1zkx] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--motiva-font-size-sm);
    color: var(--motiva-text-muted);
}

.sc-card-org .oi[b-mlsnzb1zkx] { font-size: var(--motiva-font-size-caption, 11px); }

.sc-card-footer[b-mlsnzb1zkx] {
    margin-block-start: 12px;
    padding-block-start: 10px;
    border-block-start: 1px solid var(--motiva-border-subtle);
}

.sc-card-open-hint[b-mlsnzb1zkx] {
    font-size: var(--motiva-font-size-caption);
    color: var(--motiva-text-muted);
}

/* ── Modal internals (MModal owns overlay, radius, header and footer) ── */
.sc-modal-meta[b-mlsnzb1zkx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-end: var(--motiva-space-md);
}

.sc-modal-num[b-mlsnzb1zkx] {
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-bold);
    color: var(--motiva-text-muted);
}

.sc-modal-fav[b-mlsnzb1zkx] {
    margin-inline-start: auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--motiva-border-strong);
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-muted);
    font-size: var(--motiva-font-size-lg, 16px);
    line-height: 1;
    cursor: pointer;
}

.sc-modal-fav--active[b-mlsnzb1zkx] {
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    border-color: var(--motiva-color-violet, var(--motiva-color-indigo));
    background: var(--motiva-color-brand-bg);
}

.sc-modal-section + .sc-modal-section[b-mlsnzb1zkx] { margin-block-start: var(--motiva-space-lg); }

.sc-modal-text[b-mlsnzb1zkx] {
    margin: 8px 0 0;
    font-size: var(--motiva-font-size-body);
    line-height: var(--motiva-line-height-body);
    color: var(--motiva-text-secondary);
    white-space: pre-line;
}

.sc-modal-info-grid[b-mlsnzb1zkx] {
    margin-block-start: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sc-modal-info-row[b-mlsnzb1zkx] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: var(--motiva-font-size-body);
}

.sc-modal-info-label[b-mlsnzb1zkx] {
    flex: 0 0 88px;
    color: var(--motiva-text-muted);
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
}

.sc-modal-info-val[b-mlsnzb1zkx] { color: var(--motiva-text-primary); }

.sc-modal-info-sub[b-mlsnzb1zkx] {
    color: var(--motiva-text-muted);
    font-size: var(--motiva-font-size-sm);
    margin-inline-start: 4px;
}

.sc-modal-link[b-mlsnzb1zkx] { color: var(--motiva-color-violet, var(--motiva-color-indigo)); text-decoration: none; }
.sc-modal-link:hover[b-mlsnzb1zkx] { text-decoration: underline; }

.sc-modal-fav-btn[b-mlsnzb1zkx] {
    margin-inline-end: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--motiva-radius-sm);
    border: 1px solid var(--motiva-border-strong);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-secondary);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
    cursor: pointer;
}

.sc-modal-fav-btn--active[b-mlsnzb1zkx] {
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    border-color: var(--motiva-color-violet, var(--motiva-color-indigo));
    background: var(--motiva-color-brand-bg);
}

/* ── Responsive ── */
@media (max-width: 720px) {
    .sc-toolbar[b-mlsnzb1zkx] { align-items: stretch; }
    .sc-count[b-mlsnzb1zkx] { margin-inline-start: 0; }
    .sc-modal-info-row[b-mlsnzb1zkx] { flex-direction: column; gap: 2px; }
    .sc-modal-info-label[b-mlsnzb1zkx] { flex: none; }
}

/* The card foot. It held the rank control beside the hint; with choosing
   moved into the assignment form the hint is all that is left, and
   .sc-card-footer--read below takes the row down to it. */
.sc-card-footer[b-mlsnzb1zkx] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }


/* ── Toolbar without a page header ────────────────────────────
   The preview has no MPageHeader for the toolbar to sit inside, and the
   toolbar is the first thing a student meets, so it keeps that position and
   loses only the band behind it. */
.sc-toolbar-bare[b-mlsnzb1zkx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-block-end: 18px;
}


/* Read-only card foot. With the rank control gone the row holds one muted
   hint, so it stops being a control row and stops reserving a control's
   height. */
.sc-card-footer--read[b-mlsnzb1zkx] {
    justify-content: flex-start;
    padding-block-start: 8px;
}
/* /Pages/Student/StudentProfileIdentityHero.razor.rz.scp.css */
/* ============================================================
   StudentProfileIdentityHero — identity row

   Visual source: Motiva Student Profile final.dc.html:52-58.
   The reference's own numbers: 18px gap, a 64px gradient chip, a 32px/1.15
   title at -.03em, and a 14px muted line 7px under it. No surface, no
   border, no shadow — the canvas shows through.

   The block inset is 10/12 rather than the reference's 14/24. The reference
   draws this row on a canvas card of its own choosing; here it sits between
   a nav bar that already ends on 18px of its own padding and a grid of four
   cards that has to finish inside one laptop viewport. 16px of pure gutter
   is the cheapest height on the page — nothing about the row itself
   changes.
   ============================================================ */

.spf-hero[b-r7m4tx15uu] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 4px 12px;
    min-width: 0;
}

/* ── Avatar ───────────────────────────────────────────────────
   64px, and `position: relative` because the upload overlay, the remove
   button and the busy ring all stack on it. */

.spf-avatar-wrap[b-r7m4tx15uu] {
    position: relative;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.spf-avatar-img[b-r7m4tx15uu],
.spf-avatar-initials[b-r7m4tx15uu] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: block;
}

.spf-avatar-img[b-r7m4tx15uu] {
    object-fit: cover;
}

.spf-avatar-initials[b-r7m4tx15uu] {
    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--motiva-gradient-avatar);
    color: #fff;
    font-size: 22px;
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1;
}

/* ── Upload overlay ───────────────────────────────────────────
   Invisible at rest so the row reads exactly as the reference draws it,
   and revealed on hover or when the hidden file input takes keyboard
   focus — which is what keeps the control reachable without a mouse. */

.spf-avatar-overlay[b-r7m4tx15uu] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: var(--motiva-scrim);
    color: #fff;
    cursor: pointer;

    opacity: 0;
    transition: opacity var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.spf-avatar-wrap:hover .spf-avatar-overlay[b-r7m4tx15uu],
.spf-avatar-wrap:focus-within .spf-avatar-overlay[b-r7m4tx15uu] {
    opacity: 1;
}

/* The wrapper, not the InputFile itself — a class passed to a child
   component lands on nothing, because scope attributes only attach to
   elements this file writes. */
.spf-avatar-input-wrap[b-r7m4tx15uu] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.spf-avatar-remove[b-r7m4tx15uu] {
    position: absolute;
    inset-block-start: -2px;
    inset-inline-start: -2px;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;

    border: 1px solid var(--motiva-surface-section-border);
    border-radius: 50%;
    background: var(--motiva-surface-solid);
    color: var(--motiva-text-muted);
    cursor: pointer;

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

.spf-avatar-wrap:hover .spf-avatar-remove[b-r7m4tx15uu],
.spf-avatar-wrap:focus-within .spf-avatar-remove[b-r7m4tx15uu],
.spf-avatar-remove:focus-visible[b-r7m4tx15uu] {
    opacity: 1;
}

.spf-avatar-remove:hover:not(:disabled)[b-r7m4tx15uu] { color: var(--motiva-color-rose-ink); }
.spf-avatar-remove:disabled[b-r7m4tx15uu]             { cursor: default; }

.spf-avatar-busy[b-r7m4tx15uu] {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: 50% -50%;

    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spf-avatar-spin-b-r7m4tx15uu .8s linear infinite;
}

@keyframes spf-avatar-spin-b-r7m4tx15uu { to { transform: rotate(360deg); } }

/* ── Identity text ────────────────────────────────────────────
   `min-width: 0` so a long name ellipsises instead of pushing the row
   past the shell's inline inset. */

.spf-hero-body[b-r7m4tx15uu] {
    min-width: 0;
}

.spf-hero-name[b-r7m4tx15uu] {
    margin: 0;
    font-size: var(--motiva-font-size-title);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1.15;
    letter-spacing: var(--motiva-letter-spacing-title);
    color: var(--motiva-text-primary);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spf-hero-context[b-r7m4tx15uu] {
    margin: 7px 0 0;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1;
    color: var(--motiva-text-muted);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spf-hero-error[b-r7m4tx15uu] {
    margin: 8px 0 0;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.4;
    color: var(--motiva-color-rose-ink);
}

.spf-sr-only[b-r7m4tx15uu] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 700px) {
    .spf-hero[b-r7m4tx15uu] {
        gap: 14px;
        padding: 10px 0 18px;
    }

    .spf-avatar-wrap[b-r7m4tx15uu],
    .spf-avatar-img[b-r7m4tx15uu],
    .spf-avatar-initials[b-r7m4tx15uu] { flex-basis: 52px; width: 52px; height: 52px; }

    .spf-avatar-initials[b-r7m4tx15uu] { font-size: 18px; }

    .spf-hero-name[b-r7m4tx15uu] { font-size: 25px; }
}
/* /Pages/Student/StudentProfilePage.razor.rz.scp.css */
/* ============================================================
   StudentProfilePage — page composition
   Prefix: spf-

   Visual source: design-reference/motiva-student-final/
                  Motiva Student Profile final.dc.html

   The page frame is two things and nothing else: the white Core page-header
   (MPageHeaderCard, "הפרופיל שלי") and the 1.6fr / 1fr content grid below it.
   The identity hero (avatar · name · role) was removed as redundant — the
   header states whose page this is — matching the Lecturer/Mentor profile.
   Every surface, every row and every control belongs to the card that draws it.

   No page-level max-width. The student shell is full-bleed with its own
   28px inline inset (--motiva-canvas-padding-inline), and the reference's
   1460px canvas card is the frame AppLayout deliberately does not
   reproduce. What kept the old build readable was a 1440px cap; what keeps
   THIS one readable is the 1.6/1 split — the wide column tops out at ~62%
   of the content width, which is a comfortable measure for a two-column
   field grid even on a 27" display.
   ============================================================ */

.spf-grid[b-1wiaftxk7y] {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 16px;
    min-width: 0;

    /* Gap from the white page-header above, mirroring the Staff profile's
       .stf-content. Replaces the separation the removed identity hero used to
       carry. */
    margin-block-start: 16px;
}

.spf-col[b-1wiaftxk7y] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* ── The two columns finish on one baseline ───────────────────
   The grid used to be `align-items: start`, so each column ended wherever
   its own content did — and since the wide column carries seven preference
   rows and the narrow one carries a single service row, "שירותים מחוברים"
   stopped a long way above "העדפות" and left a ragged foot to the page.

   Stretch (the default, restored by dropping that line) makes both columns
   as tall as the taller one; this rule hands that extra height to the LAST
   card in each column, whichever column is short. Only the card's box
   grows — its content is a plain block at the top of it, so the Google
   Calendar row stays exactly where it sits today and is never centred into
   the space the card gained.

   `flex: 1 1 auto`, not `flex: 1`: a 0% basis contributes nothing to an
   auto-height parent's intrinsic size, which is what the column is in the
   stacked layout below. An `auto` basis grows into a definite column and
   still reports a real height in an indefinite one — so the same rule is
   correct on both sides of the breakpoint and no media query has to switch
   it off. Below 1080px each column is its own grid row, sized to its own
   content, and there is no spare height to hand out at all.

   `::deep` because the target is MCard's root element, which carries that
   component's scope id and not this page's. Same idiom as
   LecturerTasksPage's `.lt-rail ::deep > .m-card`. */
.spf-col[b-1wiaftxk7y]  > .m-card:last-child {
    flex: 1 1 auto;
    min-height: 0;
}

/* ── Responsive ───────────────────────────────────────────────
   One column below 1080px. The break is set by the WIDE column, not by
   the viewport: under ~1080px of shell the 1.6fr track drops below the
   ~560px its two field columns need, and the personal-details grid would
   collapse to one column while still sitting in a half-width track — a
   tall thin card beside a tall thin card. Stacking instead gives both
   their full measure back, in the reference's own reading order
   (personal → preferences → team → services follows from the DOM order
   of the two columns).

   `min-width: 0` on the tracks above is what stops a long email address
   or a long project title from holding a track open and pushing the page
   into horizontal overflow before the break is reached. */

@media (max-width: 1080px) {
    .spf-grid[b-1wiaftxk7y] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Load / error states ─────────────────────────────────────
   Inline inset comes from the shell; only the vertical rhythm is this
   page's business. */

.spf-page-state[b-1wiaftxk7y] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--motiva-space-sm);
    padding-block: 64px;

    font-size: var(--motiva-font-size-body);
    color: var(--motiva-text-muted);
}

.spf-page-spinner[b-1wiaftxk7y] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--motiva-color-brand-bg);
    border-top-color: var(--motiva-color-violet);
    border-radius: 50%;
    box-sizing: border-box;
    animation: spf-page-spin-b-1wiaftxk7y .8s linear infinite;
}

@keyframes spf-page-spin-b-1wiaftxk7y { to { transform: rotate(360deg); } }

@media (max-width: 700px) {
    .spf-grid[b-1wiaftxk7y]      { gap: 14px; }
    .spf-col[b-1wiaftxk7y]       { gap: 14px; }
    .spf-page-state[b-1wiaftxk7y] { padding-block: 48px; }
}

/* A short viewport is a genuinely different problem from a narrow one: the
   page still fits side by side, there is just less room above and below it.
   Nothing is clipped and nothing is hidden — the shell scrolls normally, and
   this only stops the four cards spending height on gutters they cannot
   afford. */

@media (max-height: 780px) and (min-width: 1081px) {
    .spf-grid[b-1wiaftxk7y] { gap: 14px; }
    .spf-col[b-1wiaftxk7y]  { gap: 14px; }
}
/* /Pages/Student/StudentProfilePersonalCard.razor.rz.scp.css */
/* ============================================================
   StudentProfilePersonalCard — "פרטים אישיים"

   Visual source: Motiva Student Profile final.dc.html:67-101.
   The reference's own numbers: a 14px head rule (its 16px, one notch), a 1fr 1fr field grid with
   a 28px column gutter and no row gutter (each field carries its own 13px
   block padding and hairline), a 999px pill on every head action, and an
   11px input radius.

   The section inset is 20/24/18 rather than the reference's 22/24/24: its
   card closed on an explanatory footnote, which is gone, and a card that
   now ends on a field row wants a slightly tighter block inset than one
   that ended on a paragraph.
   ============================================================ */

.spf-pd[b-rdwcf78erc] {
    padding: 20px 24px 18px;
    min-width: 0;

    /* The field grid collapses on the CARD's width, not the viewport's —
       this card is ~62% of the page while the grid is two columns and full
       width once the page stacks, so one viewport size means two very
       different card widths. `container-type` has to sit on an element this
       file writes: MCard's root carries another component's scope id and no
       rule here can reach it. */
    container-type: inline-size;
    container-name: spf-pd;
}

/* ── Head ─────────────────────────────────────────────────────
   The title, alone. The action that used to share this row now sits at
   the card's bottom-left — see .spf-pd-foot at the end of this file.

   With no second item the row no longer needs to reserve a control's
   height, so the rule under it comes in at 12px measured from the title's
   own baseline box rather than from a 31px pill. */

.spf-pd-head[b-rdwcf78erc] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
}

.spf-pd-title[b-rdwcf78erc] {
    margin: 0;
    font-size: var(--motiva-font-size-h3, 17px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1;
    letter-spacing: var(--motiva-letter-spacing-section);
    color: var(--motiva-text-primary);
}

/* ── Footer action slot ───────────────────────────────────────
   Bottom-left, the same position and the same 16px lead-in as
   "לפרויקט שלי" in הצוות שלי — the two cards in this column now end the
   same way, which is the whole reason the button came down here.

   The slot is a flex row and its single child carries
   `margin-inline-start: auto`, so whichever state is rendered — the lone
   עריכה pill, or the ביטול / שמירה pair — lands against the inline end,
   i.e. the LEFT edge under RTL. Logical axis, so the LTR mirror keeps the
   action opposite the reading edge instead of tucked under the fields.

   The fields above already close on their own 13px block padding and the
   card on its 20px inset, so this adds one gap and one control and
   nothing else. */

.spf-pd-foot[b-rdwcf78erc] {
    display: flex;
    align-items: center;
    /* 12px, not the team card's original 16: the last field row already
       closes on its own 13px block padding, so the action reads as
       separated at 25px of real gap. Both cards' footers use this number —
       they are the same slot in two cards and must not drift apart. */
    margin-top: 12px;
}

.spf-pd-actions[b-rdwcf78erc] {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Shared geometry for the three head buttons. Fill, radius and states
   come from the button's own rule (or from .motiva-cta, globally, for
   the save action) — this is only the shape they have in common. */
.spf-pd-btn-edit[b-rdwcf78erc],
.spf-pd-btn-ghost[b-rdwcf78erc],
.spf-pd-btn-save[b-rdwcf78erc] {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    border-radius: var(--motiva-radius-full);
    font-size: var(--motiva-font-size-control, 12.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    font-family: inherit;
    cursor: pointer;

    /* Only the ink transitions. The edge is a background-image layer, and
       background-image does not interpolate — listing border-color here
       would animate a property that no longer changes. */
    transition: color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

/* ── The gradient edge ────────────────────────────────────────
   White paper under a Motiva gradient hairline — the EDGE only, never a
   fill. The surface is `--motiva-tag-brand-surface` (motiva-tokens.css),
   the product's one gradient-edge recipe, so this button cannot drift
   into a second gradient: it reads the same three layers MStatusBadge and
   every category pill read, resolved in the `.motiva-final` scope.

   Three things the recipe requires the consumer to state, and the reason
   each one is here rather than in the token:
     · `border: … solid transparent` — the ramp is a border-box layer, so
       with no border box there is no edge to show it in. The width stays
       1.5px, exactly what the neutral border was, which is why the
       button's outer box does not move by a pixel.
     · the ink — the label is a label. The existing --motiva-text-secondary
       is kept: violet type inside a violet edge makes the control one
       colour.
     · nothing about padding — the token's note asks a consumer to pay for
       the border out of its padding, but that is for a tag that had NO
       border before. This button is swapping a 1.5px border for a 1.5px
       border, so its metrics are already paid for.

   `background-clip` follows `border-radius`, so the ramp rounds with the
   999px pill — no square corners, no corner artefact. */
.spf-pd-btn-edit[b-rdwcf78erc] {
    margin-inline-start: auto;
    padding: 8px 15px;
    border: 1.5px solid transparent;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-secondary);
}

/* Hover / keyboard focus: the same ramp with the white veil taken off,
   i.e. the recipe's own middle layer dropped. One notch up on the edge
   the button already wears — not a new colour, not a fill, and not a
   border-color, which would paint an opaque line straight over the
   gradient it is meant to strengthen. The focus RING itself stays the
   shell's (`.motiva-final :focus-visible`, motiva-base.css). */
.spf-pd-btn-edit:hover[b-rdwcf78erc],
.spf-pd-btn-edit:focus-visible[b-rdwcf78erc] {
    background:
        linear-gradient(var(--motiva-surface-solid), var(--motiva-surface-solid)) padding-box,
        var(--motiva-gradient-signature) border-box;
    color: var(--motiva-text-primary);
}

.spf-pd-btn-ghost[b-rdwcf78erc] {
    padding: 9px 16px;
    border: 0;
    background: none;
    color: var(--motiva-text-muted);
}

.spf-pd-btn-ghost:hover:not(:disabled)[b-rdwcf78erc] { color: var(--motiva-text-primary); }
.spf-pd-btn-ghost:disabled[b-rdwcf78erc]             { cursor: default; opacity: .55; }

/* Fill + radius + hover come from the global .motiva-cta rule this button
   also carries (motiva-base.css); only geometry is declared here, which is
   the division of labour that rule documents. */
.spf-pd-btn-save[b-rdwcf78erc] {
    padding: 9px 18px;
    border: 0;
}

.spf-pd-spinner[b-rdwcf78erc] {
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spf-pd-spin-b-rdwcf78erc .8s linear infinite;
}

@keyframes spf-pd-spin-b-rdwcf78erc { to { transform: rotate(360deg); } }

/* ── Save / error flash ───────────────────────────────────────
   The reference's teal confirmation strip. The error state is the same
   strip in the system's one attention colour — the reference has no
   failure state to copy, and a save that fails must not be silent. */

.spf-pd-flash[b-rdwcf78erc] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    padding: 10px 15px;

    border-radius: var(--motiva-radius-row);
    background: var(--motiva-color-success-bg);
    color: var(--motiva-color-teal-ink);

    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.3;
}

.spf-pd-flash-error[b-rdwcf78erc] {
    background: var(--motiva-color-danger-bg);
    color: var(--motiva-color-rose-ink);
}

.spf-pd-flash svg[b-rdwcf78erc] { flex: 0 0 auto; }

/* ── Fields ───────────────────────────────────────────────────
   Two equal columns with a 28px gutter and no row gap: the hairline
   under each field IS the row rhythm, which is what makes the grid read
   as a continuous list rather than as four boxes. */

.spf-pd-fields[b-rdwcf78erc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 28px;
}

.spf-pd-field[b-rdwcf78erc] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    padding: 13px 0;
    border-bottom: 1px solid var(--motiva-border-light);
}

/* The hairline is the rhythm BETWEEN rows, so the last row does not draw
   one: the footnote that used to sit under that rule is gone, and a rule
   with nothing beneath it would close the card on exactly the empty edge
   removing the paragraph was meant to avoid.

   Two fields per row, so the last ROW is the last two fields; inside the
   container query below the grid is one column and the last row is one
   field, which is why the rule is restated there.

   NOTE, measured in the browser: --motiva-border-light is not defined
   anywhere in the app today, so `1px solid var(--motiva-border-light)` is
   invalid at computed-value time and NO field hairline renders — here, in
   העדפות, or in הצוות שלי. That is a pre-existing token gap, not this
   change's, and fixing it is a system-wide decision rather than a profile
   one. This rule is what keeps the card correct on the day it is fixed. */
.spf-pd-field:nth-last-child(-n + 2)[b-rdwcf78erc] { border-bottom: none; }

.spf-pd-label[b-rdwcf78erc] {
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-subtle);
}

.spf-pd-value[b-rdwcf78erc] {
    font-size: var(--motiva-font-size-body, 14.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.3;
    color: var(--motiva-text-primary);

    /* A long address must ellipsise inside its own column rather than
       widen the track — the grid is minmax(0,1fr) for the same reason. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spf-pd-value-empty[b-rdwcf78erc] { color: var(--motiva-text-subtle); }

/* An email or a phone number is an LTR string and must render as one, but
   it still belongs under its label at the RTL reading edge.
   `text-align: right` is what puts it there: `direction: ltr` redefines
   what `start` means for this element, so the reference's own
   `text-align: start` would push the value to the far side of its column,
   away from the label naming it. Same intent as the reference, corrected
   for the bidi rule its prototype ran into. */
.spf-pd-ltr[b-rdwcf78erc] {
    direction: ltr;
    text-align: right;
}

.spf-pd-input[b-rdwcf78erc] {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 13px;

    border: 1.5px solid var(--motiva-border-strong);
    border-radius: 11px;
    background: var(--motiva-surface-primary, #fff);

    font-family: inherit;
    font-size: var(--motiva-font-size-control, 14px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.3;
    color: var(--motiva-text-primary);
}

.spf-pd-input:disabled[b-rdwcf78erc] { opacity: .6; cursor: default; }

/* ── Responsive ───────────────────────────────────────────────
   One field column under 560px of CARD width — a container query, not a
   viewport one, because this card is ~62% of the page on a wide screen
   and full width when the page stacks: the same viewport means two very
   different card widths. */

@container spf-pd (max-width: 560px) {
    .spf-pd-fields[b-rdwcf78erc] { grid-template-columns: minmax(0, 1fr); }

    .spf-pd-field:nth-last-child(-n + 2)[b-rdwcf78erc] {
        border-bottom: 1px solid var(--motiva-border-light);
    }

    .spf-pd-field:last-child[b-rdwcf78erc] { border-bottom: none; }
}

@media (max-width: 700px) {
    .spf-pd[b-rdwcf78erc] { padding: 16px 18px 16px; }
}
/* /Pages/Student/StudentProfileTeamCard.razor.rz.scp.css */
/* ============================================================
   StudentProfileTeamCard — "הצוות שלי"

   Visual source: Motiva Student Profile final.dc.html:122-139.
   The reference's own numbers: a 14px head rule,
   36px avatar chips, 12px block padding per row with a hairline between,
   a 13.5px/600 name with an 11.5px/500 subtle role beside it, a 12px
   contact line 3px under it, and a 999px outline pill 16px below the
   list.
   ============================================================ */

/* Block-end is 18px, not the reference's 20: this card and פרטים אישיים now
   end on the same footer slot, so they have to close on the same gutter —
   24px inline, 18px block, 12px above the action. Free, height-wise: this
   card is the first in the column that stretches, so what it gives up here
   goes straight to שירותים מחוברים below it. */
.spf-tm[b-mt92kq8gob] {
    padding: 22px 24px 18px;
    min-width: 0;
}

/* ── Head ─────────────────────────────────────────────────── */

.spf-tm-head[b-mt92kq8gob] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 14px;
    min-width: 0;
}

.spf-tm-title[b-mt92kq8gob] {
    margin: 0;
    flex: 0 0 auto;
    font-size: var(--motiva-font-size-h3, 17px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1;
    letter-spacing: var(--motiva-letter-spacing-section);
    color: var(--motiva-text-primary);
}

.spf-tm-subtitle[b-mt92kq8gob] {
    min-width: 0;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.3;
    color: var(--motiva-text-subtle);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Rows ─────────────────────────────────────────────────── */

.spf-tm-row[b-mt92kq8gob] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--motiva-border-light);
}

.spf-tm-chip[b-mt92kq8gob] {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: var(--motiva-color-neutral-bg);
    color: var(--motiva-text-secondary);

    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
}

/* The signed-in student is the one gradient chip in the list — the same
   mark the identity row and the nav avatar carry, so "this row is me" is
   said the way the rest of the shell already says it. */
.spf-tm-chip-me[b-mt92kq8gob] {
    background: var(--motiva-gradient-avatar);
    color: #fff;
}

.spf-tm-text[b-mt92kq8gob] {
    flex: 1;
    min-width: 0;
}

.spf-tm-name[b-mt92kq8gob] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.3;
    color: var(--motiva-text-primary);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spf-tm-role[b-mt92kq8gob] {
    margin-inline-start: 6px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-subtle);
}

/* An address is an LTR string that still belongs at the RTL reading edge,
   under the name it goes with — which is what `text-align: end` means once
   `direction: ltr` has flipped the axis for this element. The reference
   writes exactly this pair on its own contact line. */
.spf-tm-contact[b-mt92kq8gob] {
    margin: 3px 0 0;
    direction: ltr;
    text-align: end;

    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-regular);
    line-height: 1.4;
    color: var(--motiva-text-muted);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Copy control ─────────────────────────────────────────────
   Not in the reference, and kept quiet because of it: invisible at rest,
   revealed on row hover or when the button itself is focused, so the list
   reads as the reference draws it until someone reaches for the address. */

.spf-tm-copy[b-mt92kq8gob] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;

    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--motiva-text-subtle);
    cursor: pointer;

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

.spf-tm-row:hover .spf-tm-copy[b-mt92kq8gob],
.spf-tm-copy:focus-visible[b-mt92kq8gob],
.spf-tm-copy-done[b-mt92kq8gob] {
    opacity: 1;
}

.spf-tm-copy:hover[b-mt92kq8gob] {
    background: var(--motiva-color-neutral-bg);
    color: var(--motiva-text-secondary);
}

.spf-tm-copy-done[b-mt92kq8gob],
.spf-tm-copy-done:hover[b-mt92kq8gob] {
    background: var(--motiva-color-success-bg);
    color: var(--motiva-color-teal-ink);
}

/* ── Footer action ──────────────────────────────────────────
   AT THE CARD'S BOTTOM-LEFT, alone. The roster above it is RTL and stays
   RTL — every name, role and address keeps the right reading edge. Only
   this one action crosses to the far side, which is what separates "the
   list" from "the way out of the list": an action sharing the reading edge
   with the last row reads as a fifth row.

   `margin-inline-start: auto` is what moves it, and it needs the box to be
   block-level and content-sized to work — hence `display: flex` +
   `width: fit-content` in place of the previous `inline-flex`. An inline
   box cannot take an auto margin, so the earlier `inline-flex` simply sat
   wherever the RTL text flow put it, i.e. hard against the right edge.

   Written on the logical axis, not as `margin-left`/`float`, so the LTR
   mirror of this screen keeps the same relationship — the action opposite
   the reading edge — rather than landing back under the last row.

   The inline gutter is the card's own 24px padding, so it clears the left
   edge by exactly what every other element here clears its own. */

.spf-tm-link[b-mt92kq8gob] {
    /* Matches .spf-pd-foot in פרטים אישיים — the two cards in this screen
       now end on the same slot and must share its rhythm. The last roster
       row already closes on 12px of its own block padding. */
    margin-top: 12px;
    margin-inline-start: auto;

    display: flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    padding: 9px 17px;

    /* The same gradient-edge recipe as "עריכה" in פרטים אישיים — see the
       block over .spf-pd-btn-edit in StudentProfilePersonalCard.razor.css
       for what each layer does and why the consumer states the transparent
       border. The two outlined actions on this page are one treatment, and
       both read `--motiva-tag-brand-surface` rather than either of them
       spelling a gradient of its own. */
    border: 1.5px solid transparent;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-secondary);
    text-decoration: none;

    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;

    /* Ink only: the edge is a background-image layer and does not
       interpolate. */
    transition: color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

/* The ramp with its white veil taken off — one notch up on the edge the
   button already wears, never a border-color, which would paint an opaque
   line over the gradient it is meant to strengthen. */
.spf-tm-link:hover[b-mt92kq8gob],
.spf-tm-link:focus-visible[b-mt92kq8gob] {
    background:
        linear-gradient(var(--motiva-surface-solid), var(--motiva-surface-solid)) padding-box,
        var(--motiva-gradient-signature) border-box;
    color: var(--motiva-text-primary);
}

/* ── States ───────────────────────────────────────────────── */

.spf-tm-note[b-mt92kq8gob] {
    margin: 0;
    padding-block: 6px 14px;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-muted);
}

@media (max-width: 700px) {
    .spf-tm[b-mt92kq8gob] { padding: 18px 18px 18px; }
}
/* /Pages/Submissions/LecturerSubmissionsPage.razor.rz.scp.css */
/* ============================================================
   Lecturer Submissions — deprecation card (2026-05-17)
   The full review-queue styling was retired with the flow; this
   stylesheet now only powers the "tehilich hosar" notice card.
   ============================================================ */

.lsub-deprecated-wrap[b-t5do2gx8fy] {
    padding: 32px 28px;
    display: flex;
    justify-content: center;
}

.lsub-deprecated-card[b-t5do2gx8fy] {
    background: var(--g-bg-surface, #fff);
    border: 1px solid var(--g-border-light, rgba(15, 23, 42, 0.10));
    border-radius: var(--g-radius-md, 12px);
    box-shadow: var(--g-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
    padding: 28px 32px;
    max-width: 640px;
    width: 100%;
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.lsub-deprecated-icon[b-t5do2gx8fy] {
    width: 48px;
    height: 48px;
    border-radius: var(--g-radius-md, 12px);
    background: var(--g-accent-light, rgba(37, 99, 235, 0.10));
    color: var(--g-accent, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.lsub-deprecated-body[b-t5do2gx8fy] { min-width: 0; }

/* PAGE TITLE — the shared h1 step. Values live in motiva-tokens.css; never restate them here. */
.lsub-deprecated-title[b-t5do2gx8fy] {
    margin: 0;
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-h1, 38px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: var(--motiva-line-height-tight, 1.1);
    letter-spacing: var(--motiva-letter-spacing-page, -0.035em);
    color: var(--motiva-text-primary, #1B1A22);
}

.lsub-deprecated-lead[b-t5do2gx8fy] {
    margin: 0 0 10px;
    font-size: var(--motiva-font-size-body, 14px);
    line-height: 1.6;
    color: var(--g-text-secondary, #475569);
}

.lsub-deprecated-actions[b-t5do2gx8fy] {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.lsub-deprecated-btn[b-t5do2gx8fy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--g-radius-sm, 8px);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: opacity 0.15s, background 0.13s, color 0.13s;
}

.lsub-deprecated-btn-primary[b-t5do2gx8fy] {
    background: var(--g-accent, #2563eb);
    color: #fff;
}
.lsub-deprecated-btn-primary:hover[b-t5do2gx8fy] { opacity: 0.9; }

.lsub-deprecated-btn-secondary[b-t5do2gx8fy] {
    background: var(--g-bg-surface, #fff);
    color: var(--g-text-secondary, #475569);
    border-color: var(--g-border, rgba(15, 23, 42, 0.15));
}
.lsub-deprecated-btn-secondary:hover[b-t5do2gx8fy] {
    background: var(--g-bg-hover, rgba(15, 23, 42, 0.05));
    color: var(--g-text-primary, #0f172a);
}
/* /Pages/Submissions/StudentSubmissionForm.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   StudentSubmissionForm — the submission form's styles.

   MOVED, NOT COPIED. These rules were SubmissionModal.razor.css. Blazor scopes
   a stylesheet to its own component with a generated attribute, so markup that
   moves to a new component takes its CSS with it or it silently loses every
   rule. Only the overlay and the dialog box stayed behind, because only those
   belong to the standalone modal — everything here renders the same whether
   the host is that modal or TaskDetailModal's inline submission state.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ============================================================
   SubmissionModal — scoped styles
   Prefix: smo-

   Migrated with the student side, the same two-part change TaskDetailModal
   documents: --g-* -> --motiva-* (visually inert inside the student shell),
   and the legacy five-hue status palette folded onto the Master's three —
   green -> teal, red -> rose, blue -> violet, no fourth. Layout, form
   behaviour, the Drive-link validation states and every service call are
   untouched.
   ============================================================ */

/* ── Overlay ── */


/* ── Box ── */


/* ── Loading / error ──
   The spinner is <MLoadingState> now; only the wrapper padding stays. */
.smo-loading[b-v1ku6b0ka7] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
}

@keyframes smo-spin-b-v1ku6b0ka7 { to { transform: rotate(360deg); } }

/* The error itself is <MEmptyState>; this only centres it. */
.smo-load-error[b-v1ku6b0ka7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 0;
}

/* ── Header ── */
.smo-header[b-v1ku6b0ka7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.smo-header-start[b-v1ku6b0ka7] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.smo-task-icon[b-v1ku6b0ka7] {
    width: 42px;
    height: 42px;
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-color-brand-bg);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.smo-milestone-label[b-v1ku6b0ka7] {
    font-size: var(--motiva-font-size-caption, 12px);
    color: var(--motiva-text-muted);
    margin: 0 0 4px;
    font-family: var(--motiva-font-family);
}

.smo-title[b-v1ku6b0ka7] {
    font-size: var(--motiva-font-size-h3, 17px);
    font-weight: 700;
    color: var(--motiva-text-primary);
    margin: 0;
    line-height: 1.3;
    font-family: var(--motiva-font-family);
}

.smo-close-btn[b-v1ku6b0ka7] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--motiva-radius-sm);
    border: 1px solid var(--motiva-border-strong);
    background: var(--motiva-surface-secondary);
    color: var(--motiva-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    font-size: var(--motiva-font-size-control, 12px);
    transition: background 0.12s ease, color 0.12s ease;
}

.smo-close-btn:hover[b-v1ku6b0ka7] { background: var(--motiva-surface-hover); color: var(--motiva-text-primary); }

/* ── Meta row ── */
.smo-meta-row[b-v1ku6b0ka7] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.smo-due[b-v1ku6b0ka7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--motiva-text-secondary);
    font-family: var(--motiva-font-family);
}
.smo-due .oi[b-v1ku6b0ka7] { font-size: var(--motiva-font-size-caption, 12px); color: var(--motiva-text-muted); }
.smo-due strong[b-v1ku6b0ka7] { color: var(--motiva-text-primary); font-weight: 700; }

.smo-due-overdue[b-v1ku6b0ka7] { color: var(--motiva-color-rose, var(--motiva-color-danger)); }
.smo-due-overdue .oi[b-v1ku6b0ka7] { color: var(--motiva-color-rose, var(--motiva-color-danger)); }
.smo-overdue-label[b-v1ku6b0ka7] { font-weight: 600; color: var(--motiva-color-rose, var(--motiva-color-danger)); }

.smo-submission-badge[b-v1ku6b0ka7] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--motiva-radius-full);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 600;
    white-space: nowrap;
    font-family: var(--motiva-font-family);
}
/* Two informational fills — a blue one and a violet one — on a dialog
   whose only other badge is the rose "needs revision". Both take the
   default edge so the rose one is the only chip that raises its voice.
   `.smo-submission-badge` is 3px/10px; the edge is paid for at 2px/9px. */
.smo-badge-submitted[b-v1ku6b0ka7],
.smo-badge-reviewed[b-v1ku6b0ka7] {
    padding: 2px 9px;
    border: 1px solid transparent;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
}
.smo-badge-needsrevision[b-v1ku6b0ka7] { background: var(--motiva-color-danger-bg); color: var(--motiva-color-rose-ink, var(--motiva-color-danger)); }

/* ── Description ── */
.smo-description[b-v1ku6b0ka7] {
    font-size: var(--motiva-font-size-body, 14px);
    color: var(--motiva-text-secondary);
    line-height: 1.6;
    margin: 0;
    font-family: var(--motiva-font-family);
}

/* ── Submission instructions — now a tooltip, not a block ─────────────────
   The instructions were a full-width slab above the form. They are secondary
   help, so they hang off an info trigger on the field's own label row.

   REVEALED THREE WAYS, and all three are CSS: pointer hover on the wrapper,
   keyboard focus anywhere inside it (:focus-within, which the trigger button
   satisfies on Tab), and a click/tap that pins it open via .is-pinned. The
   pop is never removed from the DOM — a :hover rule cannot reveal a node that
   was never rendered, and aria-describedby must resolve to a real element. */
.smo-label-row[b-v1ku6b0ka7] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.smo-help[b-v1ku6b0ka7] {
    position: relative;
    display: inline-flex;
    /* The pop is absolutely positioned against this, and it must not be
       clipped or stretched by the label row. */
    flex: 0 0 auto;
}

.smo-help-trigger[b-v1ku6b0ka7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: var(--motiva-radius-full);
    background: transparent;
    color: var(--motiva-text-muted);
    cursor: pointer;
    transition: background 0.13s, color 0.13s;
}

.smo-help-trigger .oi[b-v1ku6b0ka7] { font-size: var(--motiva-font-size-caption, 11px); }

.smo-help-trigger:hover[b-v1ku6b0ka7],
.smo-help-trigger.is-pinned[b-v1ku6b0ka7] {
    background: var(--motiva-color-neutral-bg);
    color: var(--motiva-text-primary);
}

.smo-help-trigger:focus-visible[b-v1ku6b0ka7] {
    outline: 2px solid var(--motiva-color-focus-ring, var(--motiva-color-violet));
    outline-offset: 1px;
}

/* The popover surface. Same recipe as the workspace's materials popover:
   the solid fill, an inner radius and the popover shadow — no border, no
   brand fill. Neutral ink on a neutral surface. */
.smo-help-pop[b-v1ku6b0ka7] {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    /* RTL-correct: logical inset, so the pop hangs from the trigger's start
       edge in both directions without a [dir] selector (this app sets CSS
       `direction` and never a dir attribute, so [dir=rtl] would match
       nothing). */
    inset-inline-start: 0;
    z-index: 40;
    width: max-content;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 11px;
    border-radius: var(--motiva-radius-md);
    background: var(--motiva-surface-solid, #fff);
    box-shadow: var(--motiva-shadow-popover);
    text-align: start;

    /* Hidden but present. visibility (not display) so it can transition, and
       so the node stays addressable by aria-describedby. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2px);
    transition: opacity 0.13s, transform 0.13s, visibility 0.13s;
    pointer-events: none;
}

.smo-help:hover .smo-help-pop[b-v1ku6b0ka7],
.smo-help:focus-within .smo-help-pop[b-v1ku6b0ka7],
.smo-help-trigger.is-pinned + .smo-help-pop[b-v1ku6b0ka7] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.smo-help-pop-title[b-v1ku6b0ka7] {
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: 700;
    color: var(--motiva-text-primary);
    font-family: var(--motiva-font-family);
}

.smo-help-pop-body[b-v1ku6b0ka7] {
    font-size: var(--motiva-font-size-meta, 12.5px);
    line-height: 1.55;
    color: var(--motiva-text-secondary);
    font-family: var(--motiva-font-family);
    white-space: normal;
}

/* ── Policy row ── */
.smo-policy-row[b-v1ku6b0ka7] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.smo-policy-item[b-v1ku6b0ka7] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--motiva-font-size-caption, 12px);
    color: var(--motiva-text-muted);
    background: var(--motiva-surface-secondary);
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-full);
    padding: 3px 10px;
    font-family: var(--motiva-font-family);
}
.smo-policy-item .oi[b-v1ku6b0ka7] { font-size: var(--motiva-font-size-caption, 11px); }

/* ── Prev submission banner ── */
.smo-prev-submission[b-v1ku6b0ka7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--motiva-color-teal);
    background: var(--motiva-color-success-bg);
    border: 1px solid rgba(13, 156, 154, 0.30);
    border-color: color-mix(in srgb, var(--motiva-color-teal) 30%, transparent);
    border-radius: var(--motiva-radius-sm);
    padding: 10px 14px;
    font-family: var(--motiva-font-family);
}
.smo-prev-submission .oi[b-v1ku6b0ka7] { font-size: var(--motiva-font-size-body, 14px); flex-shrink: 0; }

/* ── Form fields ── */
.smo-field[b-v1ku6b0ka7] { display: flex; flex-direction: column; gap: 6px; }

.smo-label[b-v1ku6b0ka7] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: 600;
    color: var(--motiva-text-secondary);
    font-family: var(--motiva-font-family);
    display: flex;
    align-items: center;
    gap: 6px;
}

.smo-label-hint[b-v1ku6b0ka7] {
    font-weight: 400;
    color: var(--motiva-text-muted);
    font-size: var(--motiva-font-size-caption, 12px);
}

.smo-required[b-v1ku6b0ka7] { color: var(--motiva-color-rose, var(--motiva-color-danger)); }

.smo-textarea[b-v1ku6b0ka7] {
    width: 100%;
    padding: 9px 12px;
    background: var(--motiva-surface-secondary);
    border: 1.5px solid var(--motiva-border-strong);
    border-radius: var(--motiva-radius-sm);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-body, 14px);
    color: var(--motiva-text-primary);
    box-sizing: border-box;
    direction: rtl;
    outline: none;
    resize: none;
    transition: border-color 0.15s ease;
}
.smo-textarea:focus[b-v1ku6b0ka7] { border-color: var(--motiva-color-violet, var(--motiva-color-indigo)); }

/* Default tag: white paper under the Motiva gradient edge, dark ink.
   `--motiva-tag-brand-surface`, the product's one tag recipe. The edge is
   paid for out of the padding so the pill's outer box does not move. */
.smo-mode-tag[b-v1ku6b0ka7] {
    display: inline-block;
    margin-inline-start: 6px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 700;
}

/* ── Drive-link input + helper (2026-05-19) ─────────────────────────────── */
.smo-input[b-v1ku6b0ka7] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--motiva-border-strong);
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--motiva-font-size-control, 14px);
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s ease;
}
.smo-input:focus[b-v1ku6b0ka7] { border-color: var(--motiva-color-violet, var(--motiva-color-indigo)); }
.smo-drive-input[b-v1ku6b0ka7]::placeholder { color: var(--motiva-text-muted); opacity: 0.6; }

/* Border color reflects the live link state. */
.smo-drive-input--idle[b-v1ku6b0ka7]      { border-color: var(--motiva-border-strong); }
.smo-drive-input--checking[b-v1ku6b0ka7]  { border-color: var(--motiva-color-violet, var(--motiva-color-indigo)); }
.smo-drive-input--ok[b-v1ku6b0ka7]        { border-color: var(--motiva-color-teal); }
.smo-drive-input--bad[b-v1ku6b0ka7]       { border-color: var(--motiva-color-rose, var(--motiva-color-danger)); }
.smo-drive-input--ok:focus[b-v1ku6b0ka7]  { border-color: var(--motiva-color-teal); box-shadow: 0 0 0 3px rgba(13, 156, 154, 0.18); }
.smo-drive-input--bad:focus[b-v1ku6b0ka7] { border-color: var(--motiva-color-rose, var(--motiva-color-danger)); box-shadow: 0 0 0 3px rgba(217, 56, 100, 0.18); }

/* Live status row beneath the input. */
.smo-drive-status[b-v1ku6b0ka7] {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--motiva-radius-sm);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-caption, 13px);
    font-weight: 600;
    line-height: 1.4;
}
.smo-drive-status .oi[b-v1ku6b0ka7] { font-size: var(--motiva-font-size-caption, 13px); }
.smo-drive-status--idle[b-v1ku6b0ka7] {
    background: var(--motiva-surface-hover);
    color: var(--motiva-text-muted);
    font-weight: 500;
}
.smo-drive-status--checking[b-v1ku6b0ka7] {
    background: var(--motiva-color-brand-bg);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}
.smo-drive-status--ok[b-v1ku6b0ka7] {
    background: var(--motiva-color-success-bg);
    color: var(--motiva-color-teal);
    border: 1px solid rgba(13, 156, 154, 0.30);
    border-color: color-mix(in srgb, var(--motiva-color-teal) 30%, transparent);
}
.smo-drive-status--bad[b-v1ku6b0ka7] {
    background: var(--motiva-color-danger-bg);
    color: var(--motiva-color-rose, var(--motiva-color-danger));
    border: 1px solid rgba(220, 53, 69, 0.30);
}
.smo-drive-status--checking .smo-spinner-sm[b-v1ku6b0ka7] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(37, 99, 235, 0.25);
    border-top-color: var(--motiva-color-violet, var(--motiva-color-indigo));
    border-radius: 50%;
    animation: smo-spin-b-v1ku6b0ka7 0.75s linear infinite;
}
@keyframes smo-spin-b-v1ku6b0ka7 { to { transform: rotate(360deg); } }

/* ── "איך לשתף נכון בדרייב?" — a disclosure, not a section ────────────────
   Collapsed, this is ONE row: icon, label, chevron. It reads as optional help
   sitting under the field rather than as a second block of the form. */
.smo-help-acc[b-v1ku6b0ka7] {
    margin-top: 10px;
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-hover);
    overflow: hidden;
}

.smo-help-acc-head[b-v1ku6b0ka7] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--motiva-font-family);
    text-align: start;
    transition: background 0.13s;
}

.smo-help-acc-head:hover[b-v1ku6b0ka7] { background: var(--motiva-color-neutral-bg); }

.smo-help-acc-head:focus-visible[b-v1ku6b0ka7] {
    outline: 2px solid var(--motiva-color-focus-ring, var(--motiva-color-violet));
    outline-offset: -2px;
}

.smo-help-acc-icon[b-v1ku6b0ka7] {
    font-size: 12px;
    color: var(--motiva-text-muted);
    flex-shrink: 0;
}

.smo-help-acc-title[b-v1ku6b0ka7] {
    flex: 1 1 auto;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: 600;
    color: var(--motiva-text-secondary);
}

/* The chevron is the affordance — it, not a colour, says "there is more". */
.smo-help-acc-chevron[b-v1ku6b0ka7] {
    font-size: 9px;
    color: var(--motiva-text-muted);
    flex-shrink: 0;
}

.smo-help-acc.is-open .smo-help-acc-title[b-v1ku6b0ka7] { color: var(--motiva-text-primary); }

.smo-help-acc-body[b-v1ku6b0ka7] {
    padding: 0 12px 10px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    color: var(--motiva-text-secondary);
    line-height: 1.6;
}

/* Belt and braces: some resets drop the UA [hidden] rule. */
.smo-help-acc-body[hidden][b-v1ku6b0ka7] { display: none; }

.smo-drive-help-list[b-v1ku6b0ka7] {
    margin: 6px 0;
    padding-inline-start: 18px;
}
.smo-drive-help-list li[b-v1ku6b0ka7] { margin-bottom: 2px; }
.smo-drive-help-note[b-v1ku6b0ka7] {
    margin: 8px 0 0;
    color: var(--motiva-text-muted);
    font-size: var(--motiva-font-size-caption, 11.5px);
}
.smo-drive-help-note code[b-v1ku6b0ka7] {
    direction: ltr;
    display: inline-block;
    padding: 0 4px;
    border-radius: 3px;
    background: var(--motiva-surface-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--motiva-font-size-caption, 11px);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

/* ── File drop zone ── */
.smo-file-drop[b-v1ku6b0ka7] {
    position: relative;
    border: 2px dashed var(--motiva-border-strong);
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-secondary);
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.smo-file-drop:hover[b-v1ku6b0ka7],
.smo-file-drop-filled[b-v1ku6b0ka7] {
    border-color: var(--motiva-color-violet, var(--motiva-color-indigo));
    background: var(--motiva-color-brand-bg);
}

.smo-file-input[b-v1ku6b0ka7] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.smo-file-drop-inner[b-v1ku6b0ka7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

.smo-upload-icon[b-v1ku6b0ka7] {
    font-size: 22px;
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    opacity: 0.7;
}

.smo-drop-label[b-v1ku6b0ka7] {
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--motiva-text-muted);
    font-family: var(--motiva-font-family);
}

/* ── Files list ── */
.smo-files-list[b-v1ku6b0ka7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.smo-file-row[b-v1ku6b0ka7] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--motiva-surface-hover);
    border-radius: var(--motiva-radius-sm);
    border: 1px solid var(--motiva-border-subtle);
}

.smo-file-invalid[b-v1ku6b0ka7] {
    background: var(--motiva-color-danger-bg);
    border-color: rgba(217, 56, 100, 0.40);
    border-color: color-mix(in srgb, var(--motiva-color-rose, var(--motiva-color-danger)) 40%, transparent);
}

.smo-file-icon[b-v1ku6b0ka7] {
    font-size: 14px;
    color: var(--motiva-text-muted);
    flex-shrink: 0;
}
.smo-file-invalid .smo-file-icon[b-v1ku6b0ka7] { color: var(--motiva-color-rose, var(--motiva-color-danger)); }

.smo-file-info[b-v1ku6b0ka7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.smo-file-name[b-v1ku6b0ka7] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: 500;
    color: var(--motiva-text-primary);
    font-family: var(--motiva-font-family);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.smo-file-size[b-v1ku6b0ka7] {
    font-size: var(--motiva-font-size-caption, 11px);
    color: var(--motiva-text-muted);
    font-family: var(--motiva-font-family);
}

.smo-file-error[b-v1ku6b0ka7] {
    font-size: var(--motiva-font-size-caption, 11px);
    color: var(--motiva-color-rose, var(--motiva-color-danger));
    font-weight: 600;
    font-family: var(--motiva-font-family);
}

.smo-file-remove[b-v1ku6b0ka7] {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--motiva-text-muted);
    cursor: pointer;
    border-radius: var(--motiva-radius-sm);
    flex-shrink: 0;
    font-size: var(--motiva-font-size-caption, 11px);
    transition: background 0.12s ease, color 0.12s ease;
}
.smo-file-remove:hover[b-v1ku6b0ka7] { background: var(--motiva-color-danger-bg); color: var(--motiva-color-rose, var(--motiva-color-danger)); }

/* ── Error message ── */
.smo-error-msg[b-v1ku6b0ka7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--motiva-color-danger-bg);
    border: 1px solid rgba(217, 56, 100, 0.40);
    border-color: color-mix(in srgb, var(--motiva-color-rose, var(--motiva-color-danger)) 40%, transparent);
    border-radius: var(--motiva-radius-sm);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    font-size: var(--motiva-font-size-sm, 13px);
    font-family: var(--motiva-font-family);
}
.smo-error-msg .oi[b-v1ku6b0ka7] { font-size: var(--motiva-font-size-sm, 13px); flex-shrink: 0; }

/* ── Actions ── */
.smo-actions[b-v1ku6b0ka7] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.smo-ghost-btn[b-v1ku6b0ka7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: transparent;
    color: var(--motiva-text-secondary);
    border: 1.5px solid var(--motiva-border-strong);
    border-radius: var(--motiva-radius-sm);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-control, 14px);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}
.smo-ghost-btn:hover:not(:disabled)[b-v1ku6b0ka7] { background: var(--motiva-surface-hover); }
.smo-ghost-btn:disabled[b-v1ku6b0ka7]             { opacity: 0.55; cursor: not-allowed; }

.smo-submit-btn[b-v1ku6b0ka7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Geometry only — the submit action takes the shared `.motiva-cta`
       treatment. The old flat fill and its blue drop-shadow on hover are gone;
       they were this modal's own invention. */
    padding: 10px 22px;
    border: none;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-control, 14px);
    font-weight: 600;
    transition: filter 0.15s ease;
}
.smo-submit-btn:disabled[b-v1ku6b0ka7] { opacity: 0.55; cursor: not-allowed; }

.smo-spinner-sm[b-v1ku6b0ka7] {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: smo-spin-b-v1ku6b0ka7 0.7s linear infinite;
}

/* ── Success ── */
.smo-success[b-v1ku6b0ka7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 20px 0;
    text-align: center;
}

.smo-success-icon[b-v1ku6b0ka7] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--motiva-color-success-bg);
    color: var(--motiva-color-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.smo-success-title[b-v1ku6b0ka7] {
    font-size: var(--motiva-font-size-h3, 18px);
    font-weight: 700;
    color: var(--motiva-text-primary);
    margin: 0;
    font-family: var(--motiva-font-family);
}

.smo-success-body[b-v1ku6b0ka7] {
    font-size: var(--motiva-font-size-body, 14px);
    color: var(--motiva-text-secondary);
    margin: 0;
    font-family: var(--motiva-font-family);
}
/* ── Correction, final-design pass ───────────────────────────────────
   An earlier pass in this migration folded the legacy BLUE "submitted /
   in review" states onto violet or neutral, following the superseded
   "three semantic colours only" rule. The finalized student design
   keeps blue as its own role — in progress / assigned / awaiting review
   — alongside violet for action. The `-submitted` states above are
   restored to blue accordingly. (README.md §3.)
   ── */

/* ═══════════════════════════════════════════════════════════════════════════
   MOTIVA REFINEMENT PASS — `.motiva-final`

   Same pass as TaskDetailModal.razor.css. This modal is now opened directly
   from the Student dashboard (previously the dashboard threw the task id away
   and navigated to /tasks instead), so the two dialogs appear back to back and
   have to read as one system.

   Structure, fields, validation states and copy are unchanged — colour only.

   NOT DONE HERE, DELIBERATELY: this modal still draws its own overlay and box
   (`.smo-overlay` / `.smo-box`) rather than composing <MModal>, which is what
   TaskDetailModal migrated to. Migrating the shell would also hand it
   Escape-to-close and the shared responsive breakpoint, but it is a structural
   change to a working dialog and is not part of a colour pass. The one thing
   fixed below is the scrim, because a 0.48 black behind this modal directly
   after MModal's much lighter scrim is visible as a flash.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Chrome parity with MModal ────────────────────────────────────────────── */

/* ── The header identity tile ─────────────────────────────────────────────
   A 42px flat 9%-violet tile with a violet glyph. The brand edge says the
   same thing without a coloured block. */
.motiva-final .smo-task-icon[b-v1ku6b0ka7] {
    background: var(--motiva-tag-brand-surface);
    border: 1px solid transparent;
    color: var(--motiva-color-violet);
    border-radius: var(--motiva-radius-md);
}

/* ── The instructions callout is GONE from the flow ───────────────────────
   It was the heaviest block in the file — a 9% violet fill inside a hardcoded
   `rgba(99, 102, 241, 0.2)` indigo ring that was not a token and did not even
   match the brand violet. The refinement pass had lightened it; it has since
   moved into the `.smo-help-pop` tooltip, which is neutral by construction
   (solid surface, popover shadow, ink text), so there is nothing left here to
   de-escalate. The `.smo-instructions*` rules are deleted rather than left
   dead — no markup renders them any more. */

/* ── The "how to share" disclosure ────────────────────────────────────────
   Collapsed to one row, so the only thing left to correct is the inline
   <code>, which painted body text brand violet. */
.motiva-final .smo-help-acc[b-v1ku6b0ka7] {
    background: var(--motiva-color-neutral-bg);
    border-color: transparent;
    border-radius: var(--motiva-radius-md);
}

.motiva-final .smo-drive-help-note code[b-v1ku6b0ka7] {
    background: var(--motiva-surface-solid);
    color: var(--motiva-text-primary);
}

/* ── Link validation states — semantic, and legible ───────────────────────
   "checking" is genuinely in-progress, not branded, so it goes neutral. The
   ok/bad rings carried two stale literals: a Bootstrap red (#dc3545 at 30%)
   and, on the spinner, a leftover BLUE ring around a violet spinner. */
.motiva-final .smo-drive-status--checking[b-v1ku6b0ka7] {
    background: var(--motiva-color-neutral-bg);
    color: var(--motiva-text-secondary);
}

.motiva-final .smo-drive-status--ok[b-v1ku6b0ka7]  { color: var(--motiva-color-teal-ink, var(--motiva-color-teal)); }

.motiva-final .smo-drive-status--bad[b-v1ku6b0ka7] {
    color: var(--motiva-color-rose-ink, var(--motiva-color-rose));
    border-color: color-mix(in srgb, var(--motiva-color-rose) 30%, transparent);
}

.motiva-final .smo-drive-status--checking .smo-spinner-sm[b-v1ku6b0ka7] {
    border-color: var(--motiva-border-strong);
    border-top-color: var(--motiva-text-secondary);
}

/* ── "פתיחת הקישור לבדיקה" ────────────────────────────────────────────────
   A quiet secondary action under the field. The student can only confirm the
   link points at the RIGHT file by opening it — the server probe can confirm
   that a stranger can open it, which is a different fact. */
.smo-drive-preview[b-v1ku6b0ka7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 11px;
    border: 1px solid var(--motiva-border-strong);
    border-radius: var(--motiva-radius-full);
    background: transparent;
    color: var(--motiva-text-secondary);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.13s, color 0.13s;
}

.smo-drive-preview:hover[b-v1ku6b0ka7] {
    background: var(--motiva-color-neutral-bg);
    color: var(--motiva-text-primary);
}

.smo-drive-preview .oi[b-v1ku6b0ka7] { font-size: var(--motiva-font-size-caption, 11px); }

/* ── Edit-mode tag ────────────────────────────────────────────────────────
   Brand edge instead of a violet fill, and the hardcoded 999px becomes the
   token it was always meant to be. */
/* The mode tag's edge recipe moved to its base rule above — it is the
   product default now, not this scope's exception. */

/* ── Invisible neutrals ───────────────────────────────────────────────────
   --motiva-surface-secondary is #FBFBFD against a white dialog. */
.motiva-final .smo-close-btn[b-v1ku6b0ka7],
.motiva-final .smo-textarea[b-v1ku6b0ka7] { background: var(--motiva-color-neutral-bg); }


/* ── Sibling parity with the submit button ────────────────────────────────
   This form now renders INSIDE TaskDetailModal's submission state, where its
   cancel/back button sits directly beside `.smo-submit-btn` — a pill at
   semibold, because it carries the shared `.motiva-cta`. The ghost was a 12px
   rectangle at weight 500, which is the exact "one sibling rounder than the
   other" mismatch the modal was just corrected for. Same token, same weight,
   so the pair reads as one control group in both hosts. */
.smo-ghost-btn[b-v1ku6b0ka7] {
    border-radius: var(--motiva-radius-full);
    font-weight: var(--motiva-font-weight-semibold, 600);
}
/* /Pages/Submissions/SubmissionModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   SubmissionModal — dialog chrome ONLY.

   The form's styles moved to StudentSubmissionForm.razor.css along with its
   markup (Blazor scopes CSS per component, so they had to travel together).
   What is left is what a standalone dialog owns and an inline host does not:
   the scrim and the box.
   ═══════════════════════════════════════════════════════════════════════════ */
.smo-overlay[b-2904ar800q] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.48); /* the one scrim literal, shared with MModal */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--motiva-z-modal);
    padding: 16px;
    animation: smo-fade-in-b-2904ar800q 0.15s ease;
}
@keyframes smo-fade-in-b-2904ar800q {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.smo-box[b-2904ar800q] {
    background: var(--motiva-surface-primary);
    border-radius: var(--motiva-radius-xl); /* Master: modals only, 24px */
    box-shadow: var(--motiva-shadow-lg);
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px;
    direction: rtl;
    animation: smo-slide-in-b-2904ar800q 0.18s ease;
}
@keyframes smo-slide-in-b-2904ar800q {
    from { transform: translateY(-8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

/* Chrome parity with MModal. */
.motiva-final .smo-overlay[b-2904ar800q] { background: var(--motiva-scrim, rgba(27, 26, 34, 0.16)); }
.motiva-final .smo-box[b-2904ar800q]     { border-radius: var(--motiva-radius-xl); }
/* /Pages/Submissions/SubmissionsPage.razor.rz.scp.css */
/* ============================================================
   SubmissionsPage — scoped styles
   Prefix: sub-
   ============================================================ */

.sub-page[b-beksekq0ob] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 40px;
}

/* ── Loading / states ── */

.sub-loading[b-beksekq0ob] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 24px;
    color: var(--g-text-secondary);
    font-size: var(--motiva-font-size-lg, 15px);
    font-family: var(--g-font-base);
}

.sub-spinner[b-beksekq0ob] {
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--g-border);
    border-top-color: var(--g-accent);
    border-radius: 50%;
    animation: sub-spin-b-beksekq0ob 0.7s linear infinite;
}

@keyframes sub-spin-b-beksekq0ob { to { transform: rotate(360deg); } }

.sub-state-msg[b-beksekq0ob] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 24px;
    color: var(--g-text-muted);
    font-size: var(--motiva-font-size-lg, 15px);
    font-family: var(--g-font-base);
    text-align: center;
}

.sub-state-msg .oi[b-beksekq0ob] { font-size: 24px; opacity: 0.5; }
.sub-state-msg p[b-beksekq0ob]   { margin: 0; }
.sub-error[b-beksekq0ob]         { color: var(--g-danger); }

/* ── Header card ── */
/* The header SURFACE is now <MPageHeaderCard> (the shared .motiva-panel
   card). Only the leading icon chip stays page-scoped — it is passed into
   the component's Leading slot. */

.sub-page-icon[b-beksekq0ob] {
    width: 44px;
    height: 44px;
    border-radius: var(--g-radius-sm);
    background: var(--g-accent-active-bg);
    color: var(--g-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

/* ── Summary pills ── */

.sub-summary-row[b-beksekq0ob] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.sub-summary-pill[b-beksekq0ob] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 14px 22px;
    background: var(--g-bg-surface);
    border-radius: var(--g-radius-md);
    box-shadow: var(--g-shadow-sm);
    border: 1px solid var(--g-border-light);
    flex: 1;
    min-width: 100px;
}

.sub-summary-value[b-beksekq0ob] {
    font-size: var(--motiva-font-size-h2, 22px);
    font-weight: 700;
    color: var(--g-text-primary);
    font-family: var(--g-font-base);
    line-height: 1;
}

.sub-summary-pill--done .sub-summary-value[b-beksekq0ob]   { color: #16a34a; }
.sub-summary-pill--pending .sub-summary-value[b-beksekq0ob] { color: #b45309; }

.sub-summary-label[b-beksekq0ob] {
    font-size: var(--motiva-font-size-caption, 12px);
    color: var(--g-text-muted);
    font-family: var(--g-font-base);
    white-space: nowrap;
}

/* ── Task cards grid ── */

.sub-cards-grid[b-beksekq0ob] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 18px;
}

/* ── Task card ── */

.sub-card[b-beksekq0ob] {
    /* Surface from the shared `.motiva-panel-tile` class (motiva-base.css),
       worn in the markup. This block used to restate it as --g-bg-surface at
       --g-radius-md behind --g-border-light with --g-shadow-sm: the same white,
       but a 16px corner, a grey hairline and no lift, against the 24px violet-
       edged lifted panel every migrated screen renders. */
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow 0.15s ease;
}

.sub-card:hover[b-beksekq0ob] {
    box-shadow: var(--g-shadow-md, 0 4px 16px rgba(0,0,0,0.1));
}

.sub-card-overdue[b-beksekq0ob]   { border-inline-start: 3px solid #b45309;  }
.sub-card-submitted[b-beksekq0ob] { border-inline-start: 3px solid #22c55e;  }
.sub-card-returned[b-beksekq0ob]  { border-inline-start: 3px solid #ea580c; background: rgba(234,88,12,0.02); }

/* ── Card header ── */

.sub-card-header[b-beksekq0ob] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.sub-card-info[b-beksekq0ob] { flex: 1; min-width: 0; }

.sub-card-milestone[b-beksekq0ob] {
    font-size: var(--motiva-font-size-caption, 11px);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--g-text-muted);
    font-family: var(--g-font-base);
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

/* CARD TITLE — the shared h3 step (16px/700). Was a per-page literal. */
.sub-card-title[b-beksekq0ob] {
    font-size: var(--motiva-font-size-h3, 16px);
    font-weight: 700;
    color: var(--g-text-primary);
    margin: 0;
    line-height: 1.3;
    font-family: var(--g-font-base);
}

/* ── Status badge ── */

.sub-status-badge[b-beksekq0ob] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--g-radius-full);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: var(--g-font-base);
}

.sub-badge-submitted[b-beksekq0ob]        { background: #f0fdf4;                color: #16a34a;        }
/* `.sub-status-badge` is 3px/10px; the edge is paid for at 2px/9px. */
.sub-badge-reviewed[b-beksekq0ob]         {
    padding: 2px 9px;
    border: 1px solid transparent;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
}
.sub-badge-needsrevision[b-beksekq0ob]    { background: #fffbeb;               color: #b45309;        }
.sub-badge-returned-mentor[b-beksekq0ob]  { background: #fff7ed;               color: #ea580c;        }
.sub-badge-none[b-beksekq0ob]             { background: var(--g-bg-hover);     color: var(--g-text-muted); }

/* ── Due date ── */

.sub-card-due[b-beksekq0ob] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--g-text-secondary);
    font-family: var(--g-font-base);
}
.sub-card-due .oi[b-beksekq0ob] { font-size: var(--motiva-font-size-caption, 12px); color: var(--g-text-muted); }
.sub-card-due strong[b-beksekq0ob] { color: var(--g-text-primary); font-weight: 700; }
.sub-due-overdue[b-beksekq0ob] { color: var(--g-danger); }
.sub-due-overdue .oi[b-beksekq0ob] { color: var(--g-danger); }
.sub-overdue-label[b-beksekq0ob] { font-weight: 600; }

/* ── Returned banner ── */

.sub-card-returned-banner[b-beksekq0ob] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: var(--g-radius-sm);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: 600;
    color: #ea580c;
    font-family: var(--g-font-base);
}
.sub-card-returned-banner .oi[b-beksekq0ob] { font-size: var(--motiva-font-size-caption, 12px); }

/* ── Last submission info ── */

.sub-card-prev[b-beksekq0ob] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--motiva-font-size-caption, 12px);
    color: #16a34a;
    font-family: var(--g-font-base);
}
.sub-card-prev .oi[b-beksekq0ob] { font-size: var(--motiva-font-size-caption, 11px); }
.sub-card-prev-returned[b-beksekq0ob] { color: #ea580c; }

/* ── Action button ── */

.sub-card-actions[b-beksekq0ob] { margin-top: 4px; }

.sub-card-btn[b-beksekq0ob] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 10px 18px;
    background: var(--g-accent);
    color: #fff;
    border: none;
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-base);
    font-size: var(--g-type-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.sub-card-btn:hover[b-beksekq0ob] {
    background: var(--g-accent-hover);
    box-shadow: 0 3px 10px rgba(99, 102, 241, 0.3);
}

.sub-card-btn-secondary[b-beksekq0ob] {
    background: transparent;
    color: var(--g-accent);
    border: 1.5px solid var(--g-accent);
}

.sub-card-btn-secondary:hover[b-beksekq0ob] {
    background: var(--g-accent-active-bg);
    box-shadow: none;
}

.sub-card-btn-returned[b-beksekq0ob] {
    background: #ea580c;
    color: #fff;
}

.sub-card-btn-returned:hover[b-beksekq0ob] {
    background: #c2410c;
    box-shadow: 0 3px 10px rgba(234,88,12,0.3);
}

.sub-card-btn-course[b-beksekq0ob] {
    display:      inline-flex;
    align-items:  center;
    justify-content: center;
    gap:          7px;
    width:        100%;
    padding:      10px 18px;
    background:   #16a34a;
    color:        #fff;
    border:       none;
    border-radius: var(--g-radius-sm);
    font-family:  var(--g-font-base);
    font-size:    var(--g-type-secondary);
    font-weight:  600;
    cursor:       pointer;
    transition:   background 0.15s ease, box-shadow 0.15s ease;
}

.sub-card-btn-course:hover[b-beksekq0ob] {
    background:  #15803d;
    box-shadow:  0 3px 10px rgba(22,163,74,0.3);
}

.sub-card-course-done[b-beksekq0ob] {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size: var(--motiva-font-size-caption, 12px);
    color:       #16a34a;
    font-family: var(--g-font-base);
    font-weight: 500;
}

.sub-card-course-done .oi[b-beksekq0ob] { font-size: var(--motiva-font-size-caption, 11px); }

/* ── Drive-link "open" button (2026-05-19) ─────────────────────────────── */
.sub-drive-row[b-beksekq0ob] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    align-items: center;
}
.sub-drive-btn[b-beksekq0ob] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--g-accent-light);
    color: var(--g-accent);
    border: 1px solid var(--g-accent);
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.sub-drive-btn:hover[b-beksekq0ob] { background: var(--g-accent); color: #fff; }
.sub-drive-btn .oi[b-beksekq0ob] { font-size: var(--motiva-font-size-caption, 11px); }

/* Edit + delete (only while MentorStatus='Pending') */
.sub-edit-btn[b-beksekq0ob],
.sub-delete-btn[b-beksekq0ob] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-control, 12px);
    font-weight: 600;
    cursor: pointer;
    background: var(--g-bg-surface);
    border: 1px solid var(--g-border);
    color: var(--g-text-secondary);
    transition: background 0.13s, color 0.13s, border-color 0.13s;
}
.sub-edit-btn .oi[b-beksekq0ob],
.sub-delete-btn .oi[b-beksekq0ob] { font-size: var(--motiva-font-size-caption, 10px); }
.sub-edit-btn:hover[b-beksekq0ob] { background: var(--g-bg-hover); color: var(--g-accent); border-color: var(--g-accent); }
.sub-delete-btn[b-beksekq0ob] { color: var(--g-danger); }
.sub-delete-btn:hover[b-beksekq0ob] { background: rgba(220, 53, 69, 0.08); border-color: var(--g-danger); }

/* ── Delete-confirm modal ──────────────────────────────────────────────── */
.sub-confirm-overlay[b-beksekq0ob] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    z-index: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.sub-confirm-modal[b-beksekq0ob] {
    background: var(--g-bg-surface);
    border-radius: var(--g-radius-md);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
    width: 100%;
    max-width: 440px;
    padding: 20px 22px;
}
.sub-confirm-head[b-beksekq0ob] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.sub-confirm-icon[b-beksekq0ob] {
    color: var(--g-danger);
    font-size: 20px;
}
.sub-confirm-title[b-beksekq0ob] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--g-text-primary);
}
.sub-confirm-body[b-beksekq0ob] {
    margin: 6px 0 14px;
    font-size: var(--motiva-font-size-body, 14px);
    color: var(--g-text-secondary);
    line-height: 1.6;
}
.sub-confirm-error[b-beksekq0ob] {
    margin: 0 0 12px;
    padding: 8px 10px;
    background: rgba(220, 53, 69, 0.10);
    color: var(--g-danger);
    border-radius: var(--g-radius-sm);
    font-size: var(--motiva-font-size-sm, 13px);
}
.sub-confirm-actions[b-beksekq0ob] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.sub-confirm-cancel[b-beksekq0ob],
.sub-confirm-delete[b-beksekq0ob] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}
.sub-confirm-cancel[b-beksekq0ob] {
    background: var(--g-bg-surface);
    color: var(--g-text-secondary);
    border-color: var(--g-border);
}
.sub-confirm-cancel:hover:not(:disabled)[b-beksekq0ob] {
    background: var(--g-bg-hover);
    color: var(--g-text-primary);
}
.sub-confirm-delete[b-beksekq0ob] {
    background: var(--g-danger);
    color: #fff;
}
.sub-confirm-delete:hover:not(:disabled)[b-beksekq0ob] { opacity: 0.9; }
.sub-confirm-cancel:disabled[b-beksekq0ob],
.sub-confirm-delete:disabled[b-beksekq0ob] { opacity: 0.55; cursor: default; }
.sub-confirm-delete .oi[b-beksekq0ob] { font-size: var(--motiva-font-size-caption, 11px); }

.sub-spinner-sm[b-beksekq0ob] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sub-spinner-spin-b-beksekq0ob 0.7s linear infinite;
}
@keyframes sub-spinner-spin-b-beksekq0ob { to { transform: rotate(360deg); } }

/* ── Mentor-approved → "submit on Moodle" reminder + CTA ──────────────── */
.sub-card-moodle-reminder[b-beksekq0ob] {
    margin-top: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(22, 163, 74, 0.08);
    border: 1px solid rgba(22, 163, 74, 0.30);
    border-radius: var(--g-radius-md);
    color: #166534;
    font-family: var(--g-font-base);
    flex-wrap: wrap;
}
.sub-card-moodle-reminder > .oi[b-beksekq0ob] {
    font-size: 18px;
    color: #16a34a;
    flex-shrink: 0;
}
.sub-moodle-reminder-body-wrap[b-beksekq0ob] {
    flex: 1;
    min-width: 200px;
}
.sub-moodle-reminder-title[b-beksekq0ob] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: 700;
    margin-bottom: 2px;
}
.sub-moodle-reminder-body[b-beksekq0ob] {
    font-size: var(--motiva-font-size-caption, 12px);
    color: #166534;
    line-height: 1.5;
}

.sub-moodle-cta[b-beksekq0ob] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: #16a34a;
    color: #fff;
    border: none;
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.13s, transform 0.13s;
    flex-shrink: 0;
}
.sub-moodle-cta:hover[b-beksekq0ob] { background: #15803d; }
.sub-moodle-cta:active[b-beksekq0ob] { transform: translateY(1px); }
.sub-moodle-cta .oi[b-beksekq0ob] { font-size: var(--motiva-font-size-caption, 12px); }

/* Post-confirmation done state */
.sub-moodle-done[b-beksekq0ob] {
    margin-top: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(22, 163, 74, 0.14);
    border: 1px solid rgba(22, 163, 74, 0.45);
    border-radius: var(--g-radius-md);
    color: #14532d;
    font-family: var(--g-font-base);
}
.sub-moodle-done-icon[b-beksekq0ob] {
    font-size: 22px;
    color: #16a34a;
    flex-shrink: 0;
}
.sub-moodle-done-text[b-beksekq0ob] { display: flex; flex-direction: column; gap: 2px; }
.sub-moodle-done-title[b-beksekq0ob] {
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: 700;
}
.sub-moodle-done-meta[b-beksekq0ob] {
    font-size: var(--motiva-font-size-caption, 12px);
    color: #166534;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

/* Confirm-modal: positive (green) variant for the Moodle-mark prompt */
.sub-confirm-icon-ok[b-beksekq0ob] { color: #16a34a !important; }
.sub-confirm-ok[b-beksekq0ob] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    background: #16a34a;
    color: #fff;
}
.sub-confirm-ok:hover:not(:disabled)[b-beksekq0ob] { background: #15803d; }
.sub-confirm-ok:disabled[b-beksekq0ob] { opacity: 0.55; cursor: default; }
.sub-confirm-ok .oi[b-beksekq0ob] { font-size: var(--motiva-font-size-caption, 11px); }

/* ── Student-side: published lecturer feedback block (legacy) ──────────── */
.sub-card-lecturer-feedback[b-beksekq0ob] {
    margin-top: 10px; padding: 10px 12px;
    background: rgba(124,58,237,0.08);
    border: 1px solid rgba(124,58,237,0.30);
    border-radius: var(--g-radius-md);
}
.sub-card-lecturer-head[b-beksekq0ob] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin-bottom: 6px; font-size: 0.82rem; color: var(--g-accent);
}
.sub-card-lecturer-title[b-beksekq0ob] { font-weight: 700; }
.sub-card-lecturer-date[b-beksekq0ob] {
    margin-inline-start: auto; color: var(--g-text-muted);
    font-size: 0.74rem; font-weight: 500;
}
.sub-card-lecturer-text[b-beksekq0ob] {
    font-size: 0.86rem; line-height: 1.55;
    color: var(--g-text-primary); white-space: pre-wrap; word-break: break-word;
}
.sub-card-lecturer-files[b-beksekq0ob] {
    margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed rgba(124,58,237,0.30);
    display: flex; flex-direction: column; gap: 6px;
}
.sub-card-lecturer-files-title[b-beksekq0ob] {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.78rem; font-weight: 700; color: var(--g-accent);
}
.sub-lecturer-file[b-beksekq0ob] {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; background: #fff;
    border: 1px solid rgba(124,58,237,0.25);
    border-radius: var(--g-radius-sm);
    color: var(--g-text-primary); text-decoration: none;
    font-size: 0.84rem; transition: background 0.12s, border-color 0.12s;
}
.sub-lecturer-file:hover[b-beksekq0ob] {
    background: rgba(124,58,237,0.06); border-color: var(--g-accent);
    text-decoration: none;
}
.sub-lecturer-file-icon[b-beksekq0ob] { color: var(--g-accent); flex-shrink: 0; }
.sub-lecturer-file-name[b-beksekq0ob] {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sub-lecturer-file-size[b-beksekq0ob] {
    flex-shrink: 0; font-size: 0.74rem; color: var(--g-text-muted);
}
.sub-lecturer-file-dl[b-beksekq0ob] { flex-shrink: 0; color: var(--g-accent); }

.sub-lec-rstatus[b-beksekq0ob] {
    display: inline-flex; padding: 2px 8px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600; border: 1px solid transparent;
}
.sub-lec-rstatus-pendingreview[b-beksekq0ob]    { background: rgba(251,191,36,0.14); color: #b45309; border-color: rgba(251,191,36,0.45); }
.sub-lec-rstatus-inreview[b-beksekq0ob]         { background: rgba(59,130,246,0.14); color: #1d4ed8; border-color: rgba(59,130,246,0.45); }
.sub-lec-rstatus-feedbackreturned[b-beksekq0ob] { background: rgba(244,114,182,0.14); color: #be185d; border-color: rgba(244,114,182,0.45); }
.sub-lec-rstatus-finalapproved[b-beksekq0ob]    { background: rgba(34,197,94,0.14); color: #15803d; border-color: rgba(34,197,94,0.45); }
/* /Pages/Tasks/LecturerItemQuickView.razor.rz.scp.css */
/* ============================================================
   LecturerItemQuickView — המשימות שלי's item-inspection popup
   Prefix: lqv-

   THE SHELL IS NOT HERE. The centred box, its 480px cap, the header lead
   row, the ruled footer and the rule that pushes the footer's last child
   to the far end all belong to MModal's QuickView variant. This file
   styles the panel's own contents and nothing else — the same division
   MentorProjectQuickView.razor.css keeps.

   EVERY VALUE BELOW IS THAT FILE'S. `.lqv-*` and `.mpq-*` are the same
   object at the same numbers, transcribed rather than reinvented so a
   lecturer's panel and a mentor's cannot drift into two dialects. That
   also means this is the SECOND COPY of the fact-row layout: extracting
   it into a shared MFactList is the right end state, and is deliberately
   not done in the pass that introduces the second copy — see the note in
   the .razor. A third copy should force it.
   ============================================================ */

/* ── The header chips ────────────────────────────────────────
   Two, always, in this order: what this IS, then what state it is in.
   The pair is what makes three different contents read as one interface —
   a reader learns the shape once and then only reads the words. */
.lqv-kind[b-v6450nyh64] {
    display: inline-flex;
    padding: 6px 13px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-color-brand-bg);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1;
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

.lqv-state[b-v6450nyh64] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-color-neutral-bg);
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-secondary);
}

/* Rose only for a genuine escalation — a submission past the shared 3-day
   threshold, or a team the server scored at risk. Same budget the board
   outside spends. */
/* The middle rung, matching MStatusBadge's own Approaching variant so the
   chip in the panel and the chip on the row behind it are the same object. */
.lqv-state-approaching[b-v6450nyh64] {
    background: var(--motiva-color-neutral-bg);
    color: var(--motiva-text-secondary);
    box-shadow: inset 0 0 0 1px rgba(27, 26, 34, 0.07);
}

/* The top waiting rung — stronger than approaching, and deliberately not
   red: nothing measured by a waiting age has a deadline to be past. */
.lqv-state-attention[b-v6450nyh64] {
    background: linear-gradient(to left,
        rgba(109, 40, 245, 0.10),
        rgba(46, 99, 232, 0.07) 60%,
        rgba(15, 168, 194, 0.10));
    color: var(--motiva-text-primary);
    box-shadow: inset 0 0 0 1px rgba(109, 40, 245, 0.13);
}

.lqv-state-rose[b-v6450nyh64] {
    background: var(--motiva-color-danger-bg);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
}

.lqv-state-dot[b-v6450nyh64] {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ── Identity ────────────────────────────────────────────────
   The title heads the BODY rather than the shell's header row, which
   carries the chips — so the dialog is pointed at it with
   aria-labelledby rather than left unnamed. */
.lqv-title[b-v6450nyh64] {
    margin: 0;
    font-size: var(--motiva-font-size-h2, 22px);
    font-weight: var(--motiva-font-weight-bold);
    line-height: 1.3;
    letter-spacing: var(--motiva-letter-spacing-section);
    color: var(--motiva-text-primary);
}

.lqv-sub[b-v6450nyh64] {
    margin: 6px 0 0;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.4;
    color: var(--motiva-text-secondary);
}

/* ── The facts ───────────────────────────────────────────────
   A fixed key column and a value beside it, hairline-separated. The
   fixed 92px is what makes three different fact sets read as one table:
   the values line up down the same edge whether the panel is describing
   a request, a submission or a team. */
.lqv-facts[b-v6450nyh64] {
    display: flex;
    flex-direction: column;
    margin-block-start: 16px;
}

.lqv-fact[b-v6450nyh64] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-block: 11px;
    border-block-end: 1px solid rgba(27, 26, 34, 0.06);
}

.lqv-fact:last-child[b-v6450nyh64] { border-block-end: 0; }

.lqv-fact-k[b-v6450nyh64] {
    width: 92px;
    flex: 0 0 92px;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-subtle);
}

.lqv-fact-v[b-v6450nyh64] {
    min-width: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.3;
    color: var(--motiva-text-primary);
}

/* ── The action's result ─────────────────────────────────────
   In the panel, under the facts, where the button that caused it is
   still on screen. A toast would put the answer somewhere the reader is
   not looking. */
.lqv-msg[b-v6450nyh64] {
    margin: 14px 0 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.4;
    color: var(--motiva-color-teal-ink, var(--motiva-color-teal));
}

.lqv-msg-bad[b-v6450nyh64] { color: var(--motiva-color-rose-ink, var(--motiva-color-danger)); }

/* ── The two buttons ─────────────────────────────────────────
   Placement is ordering: the shell's footer pushes its LAST child to the
   far end, so the CTA is always written last. */
.lqv-alt[b-v6450nyh64] {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border: 1px solid var(--g-border);
    border-radius: var(--motiva-radius-full);
    background: transparent;
    font-family: inherit;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition:
        border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
        color        var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.lqv-alt:hover[b-v6450nyh64] {
    border-color: rgba(27, 26, 34, 0.3);
    color: var(--motiva-text-primary);
}

/* `.motiva-cta` supplies the gradient fill; this supplies the metrics,
   exactly as the mentor panel's own CTA does. */
.lqv-go.motiva-cta[b-v6450nyh64] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border: 0;
    border-radius: var(--motiva-radius-full);
    font-family: inherit;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.lqv-go:disabled[b-v6450nyh64] {
    opacity: 0.6;
    cursor: default;
}

.lqv-alt:focus-visible[b-v6450nyh64],
.lqv-go:focus-visible[b-v6450nyh64] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}
/* /Pages/Tasks/LecturerTasksPage.razor.rz.scp.css */
/* ============================================================
   LecturerTasksPage — המשימות שלי (Lecturer)
   Prefix: lt-

   THIS FILE IS MentorTasksPage.razor.css, RE-PORTED.
   It began as that stylesheet, diverged through a Kanban board and then a
   Bento grid, and has been taken again whole — every rule below is the
   mentor sheet's with `mt-` → `lt-`, because the lecturer's work centre is
   meant to BE the mentor's screen with different feeds in it: same
   workspace geometry, same pane and card shells, same personal-task
   controls, same scroll behaviour, same breakpoints.

   THE THREE DELIBERATE DIVERGENCES, and each is a standing instruction
   from an earlier pass rather than a preference:

     1. HEADINGS ARE DARK. The mentor sheet tints its three group labels
        blue / violet / quiet. Dark ink for section titles was asked for
        explicitly and is kept.
     2. NO LEADING STATUS BAR. The mentor's rows carry a 4×40 MStatusBar at
        the reading start. "Avoid large colored vertical bars on every row"
        was explicit; the row's state lives in its end chip instead.
     3. COUNT BUBBLES are `.motiva-count` (motiva-base.css) — the shared
        gradient-tint badge with dark ink, which is now the product-wide
        rule and reaches this page through MFilterTabs.

   Everything else is the mentor's, unchanged. Any future change to the
   mentor's tasks stylesheet has to be mirrored here until the workspace is
   extracted into a component both pages render.
   ============================================================ */

/* ── The workspace ───────────────────────────────────────────
   The three sections used to run DOWN the page, so משימות אישיות was
   below the fold on any laptop and a screen built for scanning had
   become a screen for scrolling.

   The composition below is the finalized Student Tasks screen's,
   taken whole from StudentTasksPage.razor.css: a viewport-height page
   root, one two-column stretch row inside it, and every panel
   scrolling inside ITSELF so the page never does. What carries over
   is the principle that file states — "one shared boundary, one
   rhythm, one surface" — with the wide column holding the incoming
   queue and the rail holding the mentor's own work.

   Every height here is DERIVED. There is not a single hand-measured
   "how much chrome is above this panel" constant, which is the trap
   the student file documents having climbed out of.
   ============================================================ */

/* One rhythm, declared once — the row's column gap and the gap between
   the two stacked panels are the same value, and it is the reference's
   18px. The title is now the shared white Core page-header
   (MPageHeaderCard), which carries its own surface, block padding and
   title scale, so the old compact-header `::deep` overrides and the
   `.lt-header-bleed` shell-edge bleed are gone. */
.lt-body[b-d1pl94fbix] {
    --lt-gap: 18px;
}

/* ── .lt-body — VIEWPORT-BOUND, AND MEASURED ─────────────────
   The mentor sheet's binding, restored — and it turns out to be load-
   bearing for a reason that has nothing to do with panel scrolling.

   MEASURED: the shell is `min-height: 100vh` PLUS its own 20px bottom
   padding, so with an ordinary block child it reports 821px against an
   810px viewport and the page carries an 11px scrollbar no matter how
   short this page's content is. `contain: size` is what stops the shell
   deriving its height from this element, which lets .app-content settle
   into its real share — it is why /mentor/tasks does not scroll and why,
   without it, this page could not stop scrolling by trimming rows.

   The trade is the one documented before: containment means the page will
   NOT grow if the workspace ever outruns the fold. That is why the preview
   is capped at three rows (PreviewCount) — the content is kept
   comfortably inside the budget rather than allowed to approach it. */
.lt-body[b-d1pl94fbix] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    contain: size;
    /* Gap from the Core page-header card above — the same rhythm the
       workspace spaces its own columns and panels with, and the same
       approach the sibling MentorTasksPage uses. */
    margin-block-start: var(--lt-gap);
}

/* The row. It takes every pixel the header did not, and it STRETCHES —
   the two columns share a top edge and a bottom edge, which is the
   whole difference between "one workspace" and "some cards".

   1.85fr / 1fr is the reference's own split. minmax(0, …) and never a
   bare `fr`: `1.85fr` is shorthand for minmax(auto, …), and that auto
   floor is the track's min-content width, so on a narrow viewport the
   panels would refuse to shrink and overflow the row instead of
   fitting it.

   min-height is the floor, and the only height typed on this page.
   Below it the row stops giving space back and the page is allowed to
   scroll instead — a workspace crushed to 300px is worse than a page
   that scrolls, and this is the one place that trade is made. */
.lt-workspace[b-d1pl94fbix] {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    gap: var(--lt-gap);

    /* Both tracks reach the same bottom edge — the rail is as tall as the
       incoming column, which is the composition. */
    align-items: stretch;

    /* THE ROW KEEPS ITS CONTENT HEIGHT. Without this the single auto row
       would stretch to fill the viewport-bound container, and the rail
       (which stretches to the ROW) would run 86px past the last card in
       the incoming column — a shared bottom edge on paper and a ragged one
       on screen. `start` pins the row to its contents and both sides end
       together. */
    align-content: start;

    min-height: 460px;

    /* THE ROW TAKES THE CONTAINER'S HEIGHT, not its content's.

       The student page reaches the same place from the identical rule set,
       but only because its panel is always LONGER than the row — a project's
       milestones overflow, so the card is capped by the row and fills it. The
       lecturer's two queues are capped at PreviewCount and are usually
       SHORTER, so the auto row collapsed to ~524px inside a 597px workspace
       and left a band of bare canvas under both columns. Stating the track
       explicitly makes the short case render like the long one: one top edge,
       one bottom edge, and the slack inside the panels where the student's
       is. */
    grid-auto-rows: minmax(0, 1fr);
}

/* Under a filter exactly one column survives, and a two-track grid
   with one empty track is a half-width panel beside bare canvas. */
.lt-workspace-solo[b-d1pl94fbix] {
    grid-template-columns: minmax(0, 1fr);
}

/* ── .lt-primary — the incoming queue ────────────────────────
   הגשות לבדיקה over בקשות הדורשות פעולה: two views of the same
   obligation, stacked in the column they both describe. */
.lt-primary[b-d1pl94fbix] {
    display: flex;
    flex-direction: column;
    /* The page's ONE rhythm, not a second one two pixels off it. The
       student tasks page spaces its stacked panels with the same
       --tsk-gap that spaces its columns; this stack was on a separate
       16px literal. */
    gap: var(--lt-gap);
    min-height: 0;
    min-width: 0;
}

/* ── .lt-rail — the mentor's own work, full height ───────────
   A column rather than a third block in the stack because a personal
   task is a different KIND of work, and full height rather than
   content height because a panel that stops halfway down the row is
   what made it read as an afterthought. */
.lt-rail[b-d1pl94fbix] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

/* ── The card, as a flex item of its column ──────────────────
   `.lt-pane` is gone with the two-card composition it existed to split.
   Each column now holds exactly ONE MCard, addressed directly — which is
   also how the student's columns address theirs.

   `flex: 1 1 auto`, not `flex: 1`. The latter is `1 1 0%`, and a 0% basis
   contributes nothing to an auto-height parent's intrinsic size. An `auto`
   basis grows into a definite column and reports a real height in an auto
   one. Fill="true" supplies height:100% + the inner flex column; this
   supplies the flex-item behaviour its parent needs. */
.lt-primary[b-d1pl94fbix]  > .m-card,
.lt-rail[b-d1pl94fbix]     > .m-card {
    flex: 1 1 auto;
    min-height: 0;
}

/* ── The card surface carries the brand ──────────────────────
   A 2% violet wash falling away over the top of the panel: brand moved
   somewhere it cannot compete with the accents that sit ON it. At 0.022
   over the section's translucent white it is below the threshold where the
   eye names a hue, and the 140px fade means it never reaches the rows.

   Layered over --motiva-panel-surface rather than replacing it, so the
   card keeps the one panel treatment the system defines — the same solid
   white, 24px radius and violet hairline the student's task panels
   render. (It was --motiva-surface-section, the translucent .66 white,
   which is what made this screen read a shade greyer than the Student
   Tasks page it was modelled on.) */
.lt-primary[b-d1pl94fbix]  > .m-card,
.lt-rail[b-d1pl94fbix]     > .m-card {
    background:
        linear-gradient(180deg,
            rgba(109, 40, 245, 0.022),
            rgba(109, 40, 245, 0) 140px),
        var(--motiva-panel-surface);
}

/* ============================================================
   THE PANEL, THE GROUPS AND THE ROWS — TRANSCRIBED FROM THE
   STUDENT TASKS PAGE.

   Source, rule for rule: Client/Pages/Tasks/ProjectTasksSection.razor.css
   and TeamTasksSection.razor.css, as they render today. Every value below
   is theirs. Blazor scoped CSS cannot be imported across components, so
   the rules are transcribed rather than referenced; where a shared token
   or a shared component could carry it (MCard, MScrollArea, MEmptyState,
   .motiva-cta, --motiva-*) it does, and the transcription covers only what
   is left.

   WHAT THIS REPLACED: this page's own panel language — a 14/24/12 card
   body, MSectionHeading with a gradient glyph and a count bubble, MRow
   two-line flex rows at 62px, and a footer link per card. None of it was
   wrong; all of it was a second design of the same objects, which is what
   made the two screens read as two applications.
   ============================================================ */

/* ── .pts-body / .tts-body — the panel inside the card ─────── */
.lt-panel[b-d1pl94fbix] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    padding: 10px 20px 14px;
    box-sizing: border-box;
}

/* MScrollArea renders its own root with ITS scope id, so a plain descendant
   selector compiled into this file would match nothing. `::deep` compiles to
   `.lt-panel[b-…] .m-scroll`, which does. */
.lt-panel[b-d1pl94fbix]  .m-scroll { flex: 1 1 auto; }

/* ── .pts-header / .tts-header — title · "· N" · action ────── */
.lt-panel-head[b-d1pl94fbix] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-shrink: 0;
    margin-bottom: 2px;
    padding: 10px 0 10px;
    border-bottom: 1px solid var(--motiva-border-card);
}

.lt-panel-title[b-d1pl94fbix] {
    margin: 0;
    font-size: var(--motiva-font-size-h3, 17px);
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: var(--motiva-letter-spacing-section, normal);
    line-height: var(--motiva-line-height-heading);
    color: var(--motiva-text-primary);
    white-space: nowrap;
}

.lt-panel-count[b-d1pl94fbix] {
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-subtle, var(--motiva-text-muted));
}

/* The rail's header carries an action, so its count pushes it to the end —
   .tts-count's own rule. */
.lt-rail .lt-panel-count[b-d1pl94fbix] { margin-inline-end: auto; }

.lt-rail .lt-panel-head[b-d1pl94fbix] { align-items: center; }

/* ── .pts-milestone — the group block ──────────────────────── */
.lt-group[b-d1pl94fbix] {
    border-radius: var(--motiva-radius-md);
    overflow: hidden;
    margin-bottom: 6px;
}

/* The panel's focal point, and it is this page's own priority order said in
   the student's grammar: a decision only this person can make comes before a
   review somebody else is holding. Same wash, same violet reading-side edge. */
.lt-group-current[b-d1pl94fbix] {
    background: var(--motiva-gradient-wash, transparent);
    margin: 0 0 8px;
    border-inline-start: 3px solid var(--motiva-color-violet, var(--motiva-color-indigo));
}

.lt-group-head[b-d1pl94fbix] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 13px 12px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--motiva-font-family);
    text-align: start;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.lt-group-head:hover[b-d1pl94fbix] { background: var(--motiva-color-brand-bg); }

.lt-group-head:focus-visible[b-d1pl94fbix] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

.lt-group-lead[b-d1pl94fbix] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.lt-chevron[b-d1pl94fbix] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--motiva-radius-full);
    color: var(--motiva-text-muted);
    transition: transform var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.lt-chevron svg[b-d1pl94fbix] { width: 14px; height: 14px; }

.lt-group-head:hover .lt-chevron[b-d1pl94fbix] {
    background: rgba(27, 26, 34, 0.06);
    color: var(--motiva-text-primary);
}

.lt-chevron-open[b-d1pl94fbix] { transform: rotate(180deg); }

/* .pts-dot at 14px. Current takes the student's violet ring and pulse.
   The second group takes a NEUTRAL filled disc rather than the student's
   teal one: teal means "completed" everywhere in this product, and a queue
   of submissions waiting on somebody is not that. */
.lt-dot[b-d1pl94fbix] {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border-radius: var(--motiva-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.lt-dot-current[b-d1pl94fbix] {
    background: var(--motiva-surface-primary);
    border: 3.5px solid var(--motiva-color-violet, var(--motiva-color-indigo));
    animation: lt-ms-pulse-b-d1pl94fbix 2s ease-out infinite;
}

.lt-dot-plain[b-d1pl94fbix] { background: var(--motiva-border-strong, rgba(27, 26, 34, 0.22)); }

@keyframes lt-ms-pulse-b-d1pl94fbix {
    0%   { box-shadow: 0 0 0 0 rgba(109, 40, 245, 0.45); }
    70%  { box-shadow: 0 0 0 9px rgba(109, 40, 245, 0); }
    100% { box-shadow: 0 0 0 0 rgba(109, 40, 245, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .lt-dot-current[b-d1pl94fbix] { animation: none; }
}

.lt-group-title[b-d1pl94fbix] {
    font-size: var(--motiva-font-size-item, 15px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lt-group-current .lt-group-title[b-d1pl94fbix] {
    font-weight: var(--motiva-font-weight-bold);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

/* .pts-mile-trail. The student spends this slot on a progress bar and a
   done/total count; there is no progress on an incoming queue, so it carries
   the queue's size and the link to its full module — the same two objects
   this page's card footers used to carry, moved onto the head that owns them. */
.lt-group-trail[b-d1pl94fbix] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.lt-group-count[b-d1pl94fbix] {
    min-width: 38px;
    text-align: end;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--motiva-text-secondary);
    white-space: nowrap;
}

.lt-group-link[b-d1pl94fbix] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-muted);
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--motiva-radius-sm);
}

.lt-group-link:hover[b-d1pl94fbix] { color: var(--motiva-color-violet, var(--motiva-color-indigo)); }

.lt-group-link:focus-visible[b-d1pl94fbix] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

/* ── .pts-mile-body / .pts-task — the rows ─────────────────── */
.lt-group-body[b-d1pl94fbix] { padding: 0 10px 8px; }

.lt-group-empty[b-d1pl94fbix] {
    margin: 0;
    padding: 8px 16px 10px;
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--motiva-text-muted);
}

/* A GRID, not flex, and that is the row's whole point: titles read down one
   column, context down the next, states down the last. The rows were MRow —
   flex, two lines, 62px — which sized the state block to its content, so no
   two states began at the same place. Four tracks, 52px, exactly .pts-task. */
.lt-task[b-d1pl94fbix] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 116px 30px;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding-block: 11px;
    padding-inline: 10px 6px;
    margin-inline-start: 16px;
    border-bottom: 1px solid var(--motiva-border-subtle);
    background: none;
    border: 0;
    border-radius: var(--motiva-radius-sm);
    cursor: pointer;
    font-family: var(--motiva-font-family);
    text-align: start;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.lt-task:last-child[b-d1pl94fbix] { border-bottom: 0; }

.lt-task:hover[b-d1pl94fbix] { background: var(--motiva-color-brand-bg); }

.lt-task:focus-visible[b-d1pl94fbix] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

.lt-task-title[b-d1pl94fbix] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-item, 15px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.35;
    color: var(--motiva-text-primary);
}

.lt-task-meta[b-d1pl94fbix] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.lt-task-due[b-d1pl94fbix] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-regular);
    color: var(--motiva-text-muted);
    white-space: nowrap;
}

/* .pts-task-status: a filled pill, centred in its own fixed track so a column
   of them resolves as one shape whatever the label length. */
.lt-task-status[b-d1pl94fbix] {
    justify-self: center;
    text-align: center;
    font-size: var(--motiva-font-size-caption, 12.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    padding: 6px 12px;
    border-radius: var(--motiva-radius-full);
    white-space: nowrap;
}

/* The three the student row has, and only those. The waiting-age THRESHOLD is
   untouched — MentorAttentionRows.AgeVariant, the product's one shared ladder;
   this is where each rung lands in the student's palette. */
.lt-status-quiet[b-d1pl94fbix] {
    color: var(--motiva-text-secondary);
    background: var(--motiva-color-neutral-bg);
}

/* "Open" is a fact about the row, not a call to action — it takes the
   default tag surface. `.lt-task-status` is 6px/12px, so the edge is paid
   for at 5px/11px and the column of pills keeps its width. Attention
   below is untouched and stays rose. */
.lt-status-open[b-d1pl94fbix] {
    padding: 5px 11px;
    border: 1px solid transparent;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
}

.lt-status-attention[b-d1pl94fbix] {
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    background: rgba(224, 51, 95, 0.10);
}

.lt-task-go[b-d1pl94fbix] {
    width: 30px;
    height: 30px;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--motiva-radius-full);
    color: var(--motiva-text-subtle, var(--motiva-text-muted));
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.lt-task-go svg[b-d1pl94fbix] { width: 14px; height: 14px; }

.lt-task:hover .lt-task-go[b-d1pl94fbix] {
    background: rgba(109, 40, 245, 0.10);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

/* ── The rail's rows — TeamTasksSection's .tts-row ─────────── */
.lt-row[b-d1pl94fbix] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 6px;
    border-bottom: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-sm);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.lt-row:last-of-type[b-d1pl94fbix] { border-bottom: 0; }

.lt-row:hover[b-d1pl94fbix] { background: var(--motiva-color-brand-bg); }

.lt-row:focus-visible[b-d1pl94fbix] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

.lt-check[b-d1pl94fbix] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--motiva-border-strong);
    border-radius: 6px;
    background: var(--motiva-surface-primary);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                transform var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.lt-check:hover[b-d1pl94fbix] {
    border-color: var(--motiva-color-violet, var(--motiva-color-indigo));
    transform: scale(1.06);
}

.lt-check:focus-visible[b-d1pl94fbix] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.lt-check-on[b-d1pl94fbix] {
    background: var(--motiva-color-teal);
    border-color: var(--motiva-color-teal);
}

.lt-check-mark[b-d1pl94fbix] {
    color: #fff;
    font-size: 12px;
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
}

.lt-row-title[b-d1pl94fbix] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-item, 15px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.35;
    color: var(--motiva-text-primary);
}

.lt-row-done .lt-row-title[b-d1pl94fbix] {
    color: var(--motiva-text-muted);
    text-decoration: line-through;
}

.lt-row-meta[b-d1pl94fbix] {
    flex: 0 0 auto;
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--motiva-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.lt-row-due[b-d1pl94fbix] {
    flex: 0 0 auto;
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--motiva-text-muted);
    white-space: nowrap;
}

.lt-row-due-late[b-d1pl94fbix] {
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    font-weight: var(--motiva-font-weight-medium);
}

/* The overdue counter on the rail's header — quiet ink, not a chip. */
.lt-overdue[b-d1pl94fbix] {
    flex: 0 0 auto;
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    white-space: nowrap;
}

/* The student's `.tts-add`: a labelled create pill, geometry only — the fill,
   hover, press and focus ring come from the shared `.motiva-cta`. */
.lt-add[b-d1pl94fbix] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    padding: 8px 14px;
    border-radius: 9px;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}

.lt-add-glyph[b-d1pl94fbix] { font-size: var(--motiva-font-size-lg, 15px); line-height: 1; }

/* .tts-addrow — quiet by default, warming to brand on hover, so it closes the
   list without competing with the header's primary. */
.lt-addrow[b-d1pl94fbix] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: 8px;
    padding: 12px 6px;
    border: 1.5px dashed var(--motiva-border-card);
    border-radius: var(--motiva-radius-md);
    background: none;
    color: var(--motiva-text-subtle, var(--motiva-text-muted));
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    cursor: pointer;
    transition: color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.lt-addrow:hover[b-d1pl94fbix] {
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    border-color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

.lt-addrow:focus-visible[b-d1pl94fbix] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.lt-addrow-glyph[b-d1pl94fbix] { font-size: var(--motiva-font-size-lg, 15px); line-height: 1; }

/* The rail's expander, unchanged in behaviour. */
.lt-expand[b-d1pl94fbix] {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    padding: 6px 0 2px;
}

.lt-expand-btn[b-d1pl94fbix] {
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-muted);
}

.lt-expand-btn:hover[b-d1pl94fbix] { color: var(--motiva-color-violet, var(--motiva-color-indigo)); }

.lt-more-n[b-d1pl94fbix] {
    display: inline-block;
    margin-inline-start: 6px;
    font-variant-numeric: tabular-nums;
}

/* The student's own narrow-panel fallback for the row grid. */
@media (max-width: 820px) {
    .lt-task[b-d1pl94fbix] {
        grid-template-columns: minmax(0, 1fr) 116px 30px;
        margin-inline-start: 10px;
        row-gap: 2px;
    }
    .lt-task-title[b-d1pl94fbix] { grid-column: 1; }
    .lt-task-meta[b-d1pl94fbix]  { grid-column: 1; grid-row: 2; margin-top: 3px; }
    .lt-task-status[b-d1pl94fbix] { grid-column: 2; grid-row: 1 / span 2; }
    .lt-task-go[b-d1pl94fbix]     { grid-column: 3; grid-row: 1 / span 2; }
}

/* /Pages/Tasks/ProjectTasksSection.razor.rz.scp.css */
/* ============================================================
   ProjectTasksSection — scoped (pts-* prefix)
   Values from design-reference/motiva/project/Motiva Tasks.dc.html,
   first child of #task-sections.
   ============================================================ */

/* Design inner inset (reference: 8px 26px 14px), column layout, clipped so the
   scroll region cannot paint over the card's rounded corners.

   flex:1 + min-height:0 is the middle link of the height chain: the row gives
   the card its height, .m-card-fill hands it to this body, and this body hands
   what is left of it to the scroll box below. Break any one of the three and
   the panel silently falls back to content height. */
.pts-body[b-josj7b02ju] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    /* 20px, down from 26px. The task rows carry their own milestone indent on
       top of this, so 26px here put the row content ~50px off the reading edge
       while ending 30px from the other — an asymmetry that read as the list
       being adrift inside the panel. */
    padding: 10px 20px 14px;
    box-sizing: border-box;
}

/* The scroll box takes the rest of the panel.

   ::deep is how the parent reaches it: MScrollArea's root is a child
   component's root element, so Blazor never stamps this component's scope
   attribute on it, and a plain `.m-scroll` rule here would compile to
   `.m-scroll[b-…]` and match nothing. `.pts-body ::deep .m-scroll` compiles to
   `.pts-body[b-…] .m-scroll`, which does — and cannot leak, because it is
   anchored to this component's own element. */
.pts-body[b-josj7b02ju]  .m-scroll {
    flex: 1;
}

.pts-header[b-josj7b02ju] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-shrink: 0;
    margin-bottom: 2px;
    padding: 10px 0 10px;
    border-bottom: 1px solid var(--motiva-border-card);
}

/* Reference: the section count is muted and a couple of steps down from the
   title — a caption on the heading, never a second heading. */
.pts-count[b-josj7b02ju] {
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-subtle, var(--motiva-text-muted));
}

.pts-title[b-josj7b02ju] {
    margin: 0;
    font-size: var(--motiva-font-size-h3, 17px);
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: var(--motiva-letter-spacing-section, normal);
    line-height: var(--motiva-line-height-heading);
    color: var(--motiva-text-primary);
    white-space: nowrap;
}

/* ── Milestone block ──────────────────────────────────────────
   Design: radius 14px, margin 10px 0 for the current one, 10px bottom
   gap between completed ones. The current milestone carries the
   Master's soft gradient wash; completed ones stay plain. */

.pts-milestone[b-josj7b02ju] {
    border-radius: var(--motiva-radius-md);
    overflow: hidden;
    margin-bottom: 6px;
}

/* The current milestone is the panel's focal point: the wash it already had,
   plus a violet edge on the reading side so it is findable at a glance in a
   list where every other block is flat. */
.pts-milestone-current[b-josj7b02ju] {
    background: var(--motiva-gradient-wash, transparent);
    margin: 0 0 8px;
    border-inline-start: 3px solid var(--motiva-color-violet, var(--motiva-color-indigo));
}

/* Design milestone header row: 13px 14px, gap 12px, no divider. */
.pts-mile-head[b-josj7b02ju] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 13px 12px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--motiva-font-family);
    text-align: start;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

/* Design .milerow hover — a violet tint at 3.5%. */
.pts-mile-head:hover[b-josj7b02ju] {
    background: var(--motiva-color-brand-bg);
}

.pts-mile-head:focus-visible[b-josj7b02ju] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

.pts-mile-lead[b-josj7b02ju] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.pts-chevron[b-josj7b02ju] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--motiva-radius-full);
    color: var(--motiva-text-muted);
    transition: transform var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.pts-chevron svg[b-josj7b02ju] { width: 14px; height: 14px; }

.pts-mile-head:hover .pts-chevron[b-josj7b02ju] {
    background: rgba(27, 26, 34, 0.06);
    color: var(--motiva-text-primary);
}

.pts-chevron-open[b-josj7b02ju] {
    transform: rotate(180deg);
}

/* Reference marker: 14px. Current is a white disc with a 3.5px violet ring
   and a slow pulse; completed is a filled teal disc carrying a white check.
   The old 8px/2px pair was a bullet — at this size the marker actually
   reports the milestone's state on its own. */
.pts-dot[b-josj7b02ju] {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border-radius: var(--motiva-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.pts-dot svg[b-josj7b02ju] { width: 8px; height: 8px; }

.pts-dot-current[b-josj7b02ju] {
    background: var(--motiva-surface-primary);
    border: 3.5px solid var(--motiva-color-violet, var(--motiva-color-indigo));
    animation: pts-ms-pulse-b-josj7b02ju 2s ease-out infinite;
}

.pts-dot-done[b-josj7b02ju] {
    background: var(--motiva-color-teal);
    color: #fff;
}

@keyframes pts-ms-pulse-b-josj7b02ju {
    0%   { box-shadow: 0 0 0 0 rgba(109, 40, 245, 0.45); }
    70%  { box-shadow: 0 0 0 9px rgba(109, 40, 245, 0); }
    100% { box-shadow: 0 0 0 0 rgba(109, 40, 245, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .pts-dot-current[b-josj7b02ju] { animation: none; }
}

/* Design: current 14px/600 ink; completed 14px/500 ink-2. */
.pts-mile-title[b-josj7b02ju] {
    font-size: var(--motiva-font-size-item, 15px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pts-milestone-current .pts-mile-title[b-josj7b02ju] {
    font-weight: var(--motiva-font-weight-bold);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

/* Milestone due date — sits with the title, not with the progress, because it
   qualifies the milestone rather than measuring it. */
.pts-mile-due[b-josj7b02ju] {
    flex-shrink: 0;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-regular);
    color: var(--motiva-text-muted);
    white-space: nowrap;
}

/* ── Per-milestone progress ───────────────────────────────────
   A short bar and a done/total count, both from the group's own counts. The
   bar is capped at 116px so the milestone titles keep the width they need and
   the progress column lines up down the list. */

.pts-mile-trail[b-josj7b02ju] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.pts-mile-bar[b-josj7b02ju] {
    display: block;
    width: 132px;
    height: 6px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-journey-track-future, rgba(27, 26, 34, 0.08));
    overflow: hidden;
}

.pts-mile-bar-fill[b-josj7b02ju] {
    display: block;
    height: 100%;
    border-radius: var(--motiva-radius-full);
    transition: width var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard);
}

/* to left = toward the reading end in RTL, so the ramp runs with the fill. */
.pts-mile-bar-part[b-josj7b02ju] { background: linear-gradient(to left, var(--motiva-journey-4, var(--motiva-color-violet)), var(--motiva-journey-5, var(--motiva-color-teal))); }
.pts-mile-bar-done[b-josj7b02ju] { background: var(--motiva-color-teal); }
.pts-mile-bar-empty[b-josj7b02ju] { background: transparent; }

.pts-mile-count[b-josj7b02ju] {
    min-width: 38px;
    text-align: end;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--motiva-text-secondary);
    white-space: nowrap;
}

.pts-mile-count-done[b-josj7b02ju] {
    color: var(--motiva-color-teal);
}

/* These two breakpoints used to be 1180px / 1100px, back when this panel was
   2.2fr of the viewport and its width tracked the viewport's closely. It no
   longer does: below 1180px the workspace stacks and this panel becomes FULL
   width, so the old numbers fired exactly where the panel had just got wider.
   Re-pitched to where a stacked, full-width panel genuinely runs out of room. */
@media (max-width: 860px) {
    /* The bar is the first thing to go when the panel narrows — the count
       still carries the whole fact. */
    .pts-mile-bar[b-josj7b02ju] { display: none; }
}

@media (max-width: 820px) {
    /* Too narrow for three tracks: the meta drops under the title and the
       status keeps its column. */
    .pts-task[b-josj7b02ju] {
        grid-template-columns: minmax(0, 1fr) 116px 30px;
        margin-inline-start: 10px;
        row-gap: 2px;
    }

    .pts-task-title[b-josj7b02ju] { grid-column: 1; }

    .pts-task-meta[b-josj7b02ju] {
        grid-column: 1;
        grid-row: 2;
        margin-top: 3px;
    }

    .pts-task-status[b-josj7b02ju] {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .pts-task-go[b-josj7b02ju] {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}

/* ── Tasks inside a milestone ─────────────────────────────────
   Design: padding 10px 2px 10px 22px (the extra inline-start inset
   indents the task under its milestone), radius 10px, gap 14px. */

.pts-mile-body[b-josj7b02ju] {
    padding: 0 10px 8px;
}

/* Reference: rows are separated by a hairline, and the last one closes the
   group rather than trailing a rule into the gap below. */
.pts-task:last-child[b-josj7b02ju] { border-bottom: 0; }

/* A grid, not space-between. The panel is wide, so space-between pushed the
   status pill to the far edge — ~750px from the title it belonged to — and
   nothing lined up from one row to the next. Three tracks turn the list into a
   table: titles read down one column, dates down the next, statuses down the
   last, which is what makes the row scannable at a glance. */
.pts-task[b-josj7b02ju] {
    display: grid;
    /* Title absorbs the leftover; meta HUGS its content so date and tags sit
       against the status pill instead of floating in the middle of a 490px
       track. Status and chevron stay fixed so they align down the list — the
       reference packs the same three at the reading end. */
    grid-template-columns: minmax(0, 1fr) auto 116px 30px;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding-block: 11px;
    /* The task rows are the one thing on this page that has to line up as a
       column of columns, so their inset is measured from the panel edge, not
       piled on top of every wrapper's own padding. Net of .pts-body (20px) and
       .pts-mile-body (10px), a task starts 56px in and ends 36px from the other
       edge — a 24px indent under its milestone head, which is the nesting the
       indent exists to show, and no more. It used to come to 66/36, and the
       extra 10px of one-sided air is what read as a table adrift in its box. */
    padding-inline: 10px 6px;
    margin-inline-start: 16px;
    border-bottom: 1px solid var(--motiva-border-subtle);
    background: none;
    border: 0;
    border-radius: var(--motiva-radius-sm);
    cursor: pointer;
    font-family: var(--motiva-font-family);
    text-align: start;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.pts-task:hover[b-josj7b02ju] {
    background: var(--motiva-color-brand-bg);
}

.pts-task:focus-visible[b-josj7b02ju] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

/* The task title is the row's one strong voice — a step up in weight from the
   milestone above it would fight the hierarchy, so it stays at the item size
   and takes semibold instead. */
.pts-task-title[b-josj7b02ju] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--motiva-font-size-item, 15px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.35;
    color: var(--motiva-text-primary);
}

/* One meta line: date, then any tags. Everything on it is caption-sized and
   muted so the title keeps the row. */
.pts-task-meta[b-josj7b02ju] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.pts-task-due[b-josj7b02ju] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-regular);
    color: var(--motiva-text-muted);
    white-space: nowrap;
}

/* An overdue task states it once, on the date — the status pill at the end of
   the row already says באיחור, so colouring both would double the alarm. */
.pts-task-late .pts-task-due[b-josj7b02ju] {
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    font-weight: var(--motiva-font-weight-medium);
}

/* Tags are attributes of the task, not states of it: neutral surface, no
   status colour, so they never compete with the status pill. */
.pts-task-tag[b-josj7b02ju] {
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1;
    padding: 4px 9px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-surface-muted, rgba(27, 26, 34, 0.05));
    color: var(--motiva-text-muted);
    white-space: nowrap;
}

/* `.pts-task-tag` is 4px/9px; the edge is paid for at 3px/8px. */
.pts-task-tag-req[b-josj7b02ju] {
    padding: 3px 8px;
    border: 1px solid transparent;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
}

/* The row's open affordance. A 30px circle so the whole end of the row is a
   visible target, and it warms on hover with the row so the two read as one
   control rather than a row plus a button. */
.pts-task-go[b-josj7b02ju] {
    width: 30px;
    height: 30px;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--motiva-radius-full);
    color: var(--motiva-text-subtle, var(--motiva-text-muted));
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.pts-task-go svg[b-josj7b02ju] { width: 14px; height: 14px; }

.pts-task:hover .pts-task-go[b-josj7b02ju] {
    background: rgba(109, 40, 245, 0.10);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

/* Status as a pill rather than loose text: at a glance the student is
   scanning the end of each row for one shape, and a filled chip resolves
   faster than a coloured word. Centred in its fixed track so the pills stack
   into a clean column whatever their label length. */
.pts-task-status[b-josj7b02ju] {
    justify-self: center;
    text-align: center;
    font-size: var(--motiva-font-size-caption, 12.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    padding: 6px 12px;
    border-radius: var(--motiva-radius-full);
    white-space: nowrap;
}

/* `.pts-task-status` is 6px/12px; the edge is paid for at 5px/11px. Done
   keeps teal below, attention keeps rose. */
.pts-status-open[b-josj7b02ju] {
    padding: 5px 11px;
    border: 1px solid transparent;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
}

.pts-status-done[b-josj7b02ju] {
    color: var(--motiva-color-teal-ink, var(--motiva-color-teal));
    background: rgba(15, 168, 194, 0.10);
}

.pts-status-attention[b-josj7b02ju] {
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    background: rgba(224, 51, 95, 0.10);
}

.pts-mile-empty[b-josj7b02ju] {
    margin: var(--motiva-space-sm) 2px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-regular);
    color: var(--motiva-text-subtle, var(--motiva-text-muted));
}
/* /Pages/Tasks/StudentTasksPage.razor.rz.scp.css */
/* ============================================================
   StudentTasksPage — page-level composition (flat queue layout)
   Mirrors MentorTasksPage.razor.css structure for consistency.
   ============================================================ */

/* ── One rhythm, declared once ────────────────────────────────
   Declared on BOTH roots so var(--tsk-gap) resolves in both
   sibling elements (the header card and .tsk-page). */
.tsk-header[b-c3t24zrutr],
.tsk-page[b-c3t24zrutr] {
    --tsk-gap: 18px;
}

/* The white Core header card aligns to the page CONTENT width (no bleed);
   the gap to the workspace below is the shared rhythm. */
.tsk-header[b-c3t24zrutr] {
    flex: 0 0 auto;
    margin-block-end: var(--tsk-gap);
}

/* ── .tsk-page ────────────────────────────────────────────────
   Always-rendered body container, mirrors mt-body.
   flex:1 + contain:size keeps the workspace from overflowing
   the viewport — panels scroll inside themselves. */
.tsk-page[b-c3t24zrutr] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    contain: size;
}

/* ── .tsk-milestone-name ── */
.tsk-milestone-name[b-c3t24zrutr] {
    font-weight: var(--motiva-font-weight-bold);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

/* ── .tsk-workspace ───────────────────────────────────────────
   Two-column grid: wide primary (task queue) + narrow rail
   (team tasks). Mirrors .mt-workspace. */
.tsk-workspace[b-c3t24zrutr] {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    gap: var(--tsk-gap);
    align-items: stretch;
    scroll-margin-top: 24px;
    min-height: 460px;

    /* THE ROW TAKES THE CONTAINER'S HEIGHT, not its content's. Without this,
       a short task list leaves a band of bare canvas under the shorter column.
       Matches MentorTasksPage.razor.css identical fix. */
    grid-auto-rows: minmax(0, 1fr);
}

/* ── .tsk-primary ─────────────────────────────────────────────
   Wide column: holds the MCard with the flat task queue. */
.tsk-primary[b-c3t24zrutr] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

/* ── .tsk-rail ────────────────────────────────────────────────
   Narrow column: team tasks section, full height. */
.tsk-rail[b-c3t24zrutr] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

/* ── Panel inner layout (mirrors .mt-panel) ─────────────────── */
.tsk-panel[b-c3t24zrutr] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    padding: 10px 20px 14px;
    box-sizing: border-box;
}

.tsk-panel[b-c3t24zrutr]  .m-scroll { flex: 1 1 auto; }

/* Panel head — filter tabs row (mirrors .mt-panel-head) */
.tsk-panel-head[b-c3t24zrutr] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-bottom: 10px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--motiva-border-card);
}

/* RTL scrollbar on the right (mirrors .mt-primary scroll rules) */
.tsk-primary[b-c3t24zrutr]  .m-scroll {
    direction: ltr;
}
.tsk-primary[b-c3t24zrutr]  .m-scroll > * {
    direction: rtl;
}

/* Brand gradient wash on cards.
 *
 * The wash is unchanged; its BASE is not. It used to sit on
 * --motiva-surface-section, which is rgba(255,255,255,0.66) — a section card's
 * surface, correct for a small card resting on a panel and wrong for the panel
 * itself. At queue size the canvas's violet radial came through it and these
 * two columns read grey beside the Dashboard and the Calendar, which are both
 * solid. Re-based on the shared primary-panel tokens, so Tasks, Requests and
 * the Dashboard are one surface.
 *
 * The border and shadow have to be stated too: MCard's own defaults are
 * --motiva-border-subtle and --motiva-shadow-sm, and --motiva-shadow-sm is
 * `none` in this scope, so a panel that only fixed its background would still
 * be the one flat, grey-edged surface on the page. */
.tsk-primary[b-c3t24zrutr]  > .m-card,
.tsk-rail[b-c3t24zrutr]     > .m-card {
    background:
        linear-gradient(180deg,
            rgba(109, 40, 245, 0.022),
            rgba(109, 40, 245, 0) 140px),
        var(--motiva-panel-surface, #FFFFFF);
    border: 1px solid var(--motiva-panel-border, rgba(109, 40, 245, 0.08));
    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));
}

/* ── Queue items — mirror .mt-qitem ─────────────────────────── */
.tsk-qitem[b-c3t24zrutr] {
    border-bottom: 1px solid var(--motiva-border-subtle);
}
.tsk-qitem:last-child[b-c3t24zrutr] { border-bottom: 0; }

.tsk-qitem-open[b-c3t24zrutr] {
    background: rgba(109, 40, 245, 0.04);
    border-radius: var(--motiva-radius-md);
    border-bottom: 0;
    margin-bottom: 2px;
}

.tsk-qitem-row[b-c3t24zrutr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 12px 14px 12px 10px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--motiva-font-family);
    text-align: start;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.tsk-qitem:not(.tsk-qitem-open) .tsk-qitem-row:hover[b-c3t24zrutr] {
    background: var(--motiva-surface-chip, rgba(27, 26, 34, 0.045));
}

/* THE OPEN HEADER IS STILL THE CONTROL, and must still say so. It
   previously had no hover state at all — the rule above excludes the
   open card — so the one header a student actually wants to click
   again, to close it, was the one header that felt inert. That is
   most of why the chevron read as the only target.

   Its own tint rather than the collapsed one: the open card already
   sits on a violet wash (.tsk-qitem-open), so the collapsed grey would
   muddy it. Header only — the body below is not a hit area. */
.tsk-qitem-open .tsk-qitem-row:hover[b-c3t24zrutr] {
    background: rgba(109, 40, 245, 0.05);
    border-radius: var(--motiva-radius-md) var(--motiva-radius-md) 0 0;
}

/* The chevron follows the header's hover, so the indicator and the
   surface it belongs to brighten together instead of the glyph staying
   muted while its row lights up. */
.tsk-qitem-row:hover .tsk-qitem-chevron[b-c3t24zrutr] { color: var(--motiva-text-secondary); }

.tsk-qitem-row:focus-visible[b-c3t24zrutr] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
    border-radius: var(--motiva-radius-sm);
}

/* Top line: badge on one side, [timing + chevron] group on the other */
.tsk-qitem-top[b-c3t24zrutr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* The reading-edge group: status badge, then the type/obligation tags
   that used to be hidden inside the expanded body. Wraps rather than
   squeezing, so a long badge and two tags fold onto a second line
   instead of crushing each other on a narrow column. */
.tsk-qitem-top-lead[b-c3t24zrutr] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.tsk-qitem-top-trail[b-c3t24zrutr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

/* Status badge */
.tsk-qbadge[b-c3t24zrutr] {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--motiva-radius-full);
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}

.tsk-qbadge-open[b-c3t24zrutr] {
    background: var(--motiva-color-neutral-bg, rgba(27, 26, 34, 0.06));
    color: var(--motiva-text-secondary);
}

.tsk-qbadge-attention[b-c3t24zrutr] {
    background: rgba(224, 51, 95, 0.10);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
}

.tsk-qbadge-done[b-c3t24zrutr] {
    background: rgba(13, 156, 154, 0.10);
    color: var(--motiva-color-teal);
}

.tsk-qbadge-approved[b-c3t24zrutr] {
    background: var(--motiva-color-brand-bg, rgba(109, 40, 245, 0.08));
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

/* Timing/countdown badge — gradient outline pill (mirrors .mt-qitem-timing) */
.tsk-qitem-timing[b-c3t24zrutr] {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--motiva-radius-full);
    border: 1.5px solid transparent;
    background:
        linear-gradient(var(--motiva-surface-primary, #fff),
                        var(--motiva-surface-primary, #fff)) padding-box,
        linear-gradient(90deg,
            rgba(13, 156, 154, 0.60),
            rgba(79, 70, 229, 0.60)) border-box;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium);
    white-space: nowrap;
    line-height: 1;
}

.tsk-qitem-timing.tsk-status-open[b-c3t24zrutr] {
    color: var(--motiva-text-primary);
    font-weight: var(--motiva-font-weight-semibold);
}

.tsk-qitem-timing.tsk-status-quiet[b-c3t24zrutr] {
    color: var(--motiva-text-secondary);
}

/* Chevron */
.tsk-qitem-chevron[b-c3t24zrutr] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--motiva-text-muted);
    transition: transform var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.tsk-qitem-chevron svg[b-c3t24zrutr] { width: 14px; height: 14px; }

.tsk-qitem-chevron-open[b-c3t24zrutr] { transform: rotate(180deg); }

/* Task title */
.tsk-qitem-title[b-c3t24zrutr] {
    display: block;
    font-size: var(--motiva-font-size-item, 15px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
    line-height: 1.35;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Context line: milestone · project */
.tsk-qitem-ctx[b-c3t24zrutr] {
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--motiva-text-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Inline expansion body ───────────────────────────────────
   The expanded detail's own breathing room. The INLINE padding stays
   at the header's 14px on purpose — the description has to start on
   the same optical line as the task title above it, and a token step
   to 16px would leave the two off by 2px. The VERTICAL rhythm is the
   spacing scale: --motiva-space-md between sections, and the same
   again under the header before the first one. */
.tsk-qitem-body[b-c3t24zrutr] {
    padding: 0 14px var(--motiva-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--motiva-space-md);
}

.tsk-qitem-tag[b-c3t24zrutr] {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-color-neutral-bg, rgba(27, 26, 34, 0.06));
    color: var(--motiva-text-secondary);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold);
    white-space: nowrap;
    line-height: 1;
}

.tsk-qitem-tag-req[b-c3t24zrutr] {
    background: var(--motiva-color-brand-bg, rgba(109, 40, 245, 0.08));
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

/* Notes / status text */
.tsk-qitem-notes[b-c3t24zrutr] {
    margin: 0;
    font-size: var(--motiva-font-size-body, 14px);
    line-height: 1.6;
    color: var(--motiva-text-primary);
}

/* ══ THE EXPANDED DETAIL ═════════════════════════════════════
   TWO levels, and the label leads. The section label used to sit at
   12.5px muted above 15.5px near-black prose, which inverted the
   hierarchy it was supposed to establish: the heading read as a
   footnote on the paragraph under it.

   Now the label is the stronger of the two — semibold, full reading
   ink — and the prose is larger but lighter and regular. Weight and
   ink carry the hierarchy, size does not have to, so the label can
   stay smaller than the body and still lead it.

   ON THE LITERAL SIZES, because the tokens were tried first and do
   not fit. Motiva re-bases its whole type scale per scope: at :root
   --motiva-font-size-sm/-md are 14/16px, but inside this page they
   resolve to 13/13.5px, and the named role tokens land at h3 16px,
   body 14.5px, h4 13px. None of them gives a label in the 14-15
   band over a body in the 15-16 band — h4 is the 13px that caused
   this inversion in the first place, and h3 means "card title".
   Every other size in this stylesheet is likewise literal
   (.tsk-qitem-title 15px, .tsk-qitem-ctx 13px, .tsk-qitem-tag 12px),
   so these two match the file rather than breaking from it. 16px is
   also what TaskDetailModal's .tdm-desc-text uses for this exact
   content.
   ════════════════════════════════════════════════════════════ */

.tsk-qsec[b-c3t24zrutr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* The section label — "תיאור המשימה", "הנחיות הגשה". NOT uppercase:
   the modal's .tdm-section-title uppercases for its Latin-shaped
   labels, which does nothing to Hebrew and would only catch a stray
   Latin word. */
.tsk-qsec-label[b-c3t24zrutr] {
    margin: 0;
    font-size: var(--motiva-font-size-lg, 15px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.35;
    letter-spacing: 0.1px;
    color: var(--motiva-text-primary);
}

/* The prose. One step LIGHTER than its label, not darker — that is
   what lets a 15px heading lead a 16px paragraph without either of
   them shouting.

   max-width is a READABILITY measure, not decoration: the queue column
   is far wider than a comfortable line, and 68ch stops a description
   running the full width at this size. The column keeps its width; the
   paragraph simply stops wrapping late. */
.tsk-qsec-text[b-c3t24zrutr] {
    margin: 0;
    max-width: 68ch;
    font-size: var(--motiva-font-size-lg, 16px);
    font-weight: var(--motiva-font-weight-regular);
    line-height: 1.65;
    color: var(--motiva-text-secondary);
    white-space: pre-line;    /* honours the line breaks staff typed in */
    overflow-wrap: anywhere;  /* a pasted URL cannot widen the card */
}

/* ── Action area ─────────────────────────────────────────────
   Set apart from the descriptive content by SPACE ONLY — no rule, no
   box, no tinted strip. The body's own --motiva-space-md gap already
   separates the blocks; this adds one step on top of it so the action
   reads as the end of the card rather than as another content row.
   Rounded up from the scale (8px on top of the 16px gap = 24px, the
   lg step) rather than invented. */
.tsk-qitem-actions[b-c3t24zrutr] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-block-start: var(--motiva-space-sm);
}

/* The card's one action — "הגשה ומשוב" / "פעולות המשימה". It was
   "פרטי המשימה" until the details moved into the card above it; the
   button now opens only what a card cannot hold (acting on the task,
   its submission history, its sub-tasks), so it is named for that. */
.tsk-qitem-review[b-c3t24zrutr] {
    border: 0;
    padding: 9px 18px;
    border-radius: var(--motiva-radius-md);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-semibold);
    cursor: pointer;
}

/* Card + flex item rules */
.tsk-primary[b-c3t24zrutr]  > .m-card,
.tsk-rail[b-c3t24zrutr]     > .m-card {
    flex: 1 1 auto;
    min-height: 0;
}

/* ── Responsive: stack columns below 1180px ── */
@media (max-width: 1180px) {
    .tsk-page[b-c3t24zrutr] {
        flex: 0 0 auto;
        contain: none;
    }

    .tsk-workspace[b-c3t24zrutr] {
        flex: 0 0 auto;
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    /* Stacked — panels stop claiming leftover height and cap themselves. */
    .tsk-primary[b-c3t24zrutr]  > .m-card,
    .tsk-rail[b-c3t24zrutr]     > .m-card {
        flex: 0 0 auto;
    }

    .tsk-workspace[b-c3t24zrutr]  .m-card {
        max-height: 68vh;
    }
}
/* /Pages/Tasks/TaskAttentionSection.razor.rz.scp.css */
/* ============================================================
   TaskAttentionSection — scoped (tas-* prefix)
   ============================================================ */

/* ── Width ────────────────────────────────────────────────────
   No cap. An earlier pass held this band at max-width:720px, reasoning that
   one or two short rows do not need 1560px of surface — true of the FULL-BLEED
   band it was then, and the cure was worse than the complaint: a 720px card at
   the reading start with open canvas beside it, belonging to nothing.

   It is no longer full-bleed. It is the first row of .tsk-primary, so its width
   is its column's width — the same boundary as משימות הפרויקט directly beneath
   it, which is the panel these very rows are drawn from. Matching that
   boundary is what makes the two read as one thread instead of two objects,
   and it is the principle the reference is actually built on: three sections,
   one shared inset, nothing at half a width.

   Vertical spacing is the grid's --tsk-gap, not a margin here. One rhythm,
   declared once. */
.tas-section[b-3z9puopolu] {
    width: 100%;
    min-width: 0;
    margin: 0;
    scroll-margin-top: 28px;
}

/* The same inset as its neighbours, so the three panel headers sit on one
   inline boundary down the workspace. */
.tas-body[b-3z9puopolu] {
    padding: 4px 20px 8px;
}

/* Reference: the section title is rose here — the one heading on the page that
   carries the attention colour — at the same size and weight as its
   neighbours. The band's prominence comes from its colour and its position at
   the head of the column, never from a larger heading. */
.tas-header[b-3z9puopolu] {
    display: flex;
    align-items: center;
    gap: var(--motiva-space-sm);
    margin-bottom: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--motiva-border-card);
}

.tas-title[b-3z9puopolu] {
    margin: 0;
    font-size: var(--motiva-font-size-h3, 17px);
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: var(--motiva-letter-spacing-section, normal);
    line-height: var(--motiva-line-height-heading);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
}

.tas-count[b-3z9puopolu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: var(--motiva-radius-full);
    background: rgba(224, 51, 95, 0.10);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    font-size: var(--motiva-font-size-count, 12px);
    font-weight: var(--motiva-font-weight-bold);
    font-variant-numeric: tabular-nums;
}

/* ── Row ──────────────────────────────────────────────────────
   The whole row is the control now, rather than a row with a small button
   parked at the end: a bigger target, and one obvious thing to press. */

.tas-row[b-3z9puopolu] {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 13px 4px;
    border: 0;
    border-bottom: 1px solid var(--motiva-border-subtle);
    background: none;
    border-radius: var(--motiva-radius-sm);
    cursor: pointer;
    font-family: var(--motiva-font-family);
    text-align: start;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.tas-row:last-child[b-3z9puopolu] { border-bottom: 0; }

.tas-row:hover[b-3z9puopolu] { background: rgba(224, 51, 95, 0.045); }

.tas-row:focus-visible[b-3z9puopolu] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

/* Reference: an 8px rose dot with its own slow pulse, per row. */
.tas-row-dot[b-3z9puopolu] {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-color-rose, var(--motiva-color-danger));
    animation: tas-attn-pulse-b-3z9puopolu 2s ease-out infinite;
}

@keyframes tas-attn-pulse-b-3z9puopolu {
    0%   { box-shadow: 0 0 0 0 rgba(224, 51, 95, 0.45); }
    70%  { box-shadow: 0 0 0 8px rgba(224, 51, 95, 0); }
    100% { box-shadow: 0 0 0 0 rgba(224, 51, 95, 0); }
}

.tas-row-title[b-3z9puopolu] {
    flex: 0 1 auto;
    min-width: 0;
    font-size: var(--motiva-font-size-item, 15px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The reason, as a chip. One shape per row to find, instead of a rose
   sentence to read. */
.tas-row-chip[b-3z9puopolu] {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: var(--motiva-radius-full);
    background: rgba(224, 51, 95, 0.09);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}

.tas-row-spacer[b-3z9puopolu] { flex: 1 1 auto; }

.tas-row-due[b-3z9puopolu] {
    flex: 0 0 auto;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    white-space: nowrap;
}

.tas-row-go[b-3z9puopolu] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--motiva-radius-full);
    color: var(--motiva-text-subtle, var(--motiva-text-muted));
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.tas-row-go svg[b-3z9puopolu] { width: 14px; height: 14px; }

.tas-row:hover .tas-row-go[b-3z9puopolu] {
    background: rgba(224, 51, 95, 0.12);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
}

@media (prefers-reduced-motion: reduce) {
    .tas-row-dot[b-3z9puopolu] { animation: none; }
}

@media (max-width: 700px) {
    .tas-row[b-3z9puopolu] { flex-wrap: wrap; }
    .tas-row-spacer[b-3z9puopolu] { display: none; }
}
/* /Pages/Tasks/TaskDetailModal.razor.rz.scp.css */
/* ============================================================
   TaskDetailModal — scoped styles  (tdm- prefix)
   RTL layout · Motiva System Master tokens

   Migrated with the student side. Two kinds of change, no third:

   1. TOKENS. Every --g-* reference became its --motiva-* peer. Inside
      the student shell these resolve to the same value (motiva-tokens.css
      aliases one to the other), so this half is visually inert.

   2. SEMANTIC COLOUR. The pre-Motiva palette carried five hues — blue for
      "submitted", green for "done", amber/orange for "waiting" and mentor
      feedback, red for "returned". The Master permits three and no fourth:
      violet = focus/action, teal = progress/completion, rose = attention.
      So blue -> violet, green -> teal, returned/feedback -> rose, and
      "waiting for the mentor" -> NEUTRAL, deliberately: it is not the
      student's move, and rose there would read as a problem the student
      caused. That is the same call SubmissionDeliverableRow documents.

   Structure, geometry and behaviour are untouched.
   ============================================================ */


/* ── Loading / error states ──
   The spinner is <MLoadingState> and the error is <MEmptyState> now; what
   is left here is only the padding that keeps either one centred inside a
   modal that has no header yet. */
.tdm-loading[b-n9mvpeufjg],
.tdm-error-state[b-n9mvpeufjg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 72px 32px;
    color: var(--motiva-text-secondary);
    font-size: var(--motiva-font-size-caption);
}

.tdm-spinner-sm[b-n9mvpeufjg] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--motiva-border-subtle);
    border-top-color: var(--motiva-color-violet, var(--motiva-color-indigo));
    border-radius: 50%;
    animation: tdm-spin-b-n9mvpeufjg 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes tdm-spin-b-n9mvpeufjg {
    to { transform: rotate(360deg); }
}


.tdm-header-chips[b-n9mvpeufjg] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.tdm-chip[b-n9mvpeufjg] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 600;
    border-radius: var(--motiva-radius-full);
    padding: 3px 10px;
    white-space: nowrap;
}

.tdm-chip .oi[b-n9mvpeufjg] { font-size: var(--motiva-font-size-caption, 10px); }

/* `.tdm-chip` is 3px/10px; the edge is paid for at 2px/9px. */
.tdm-chip-milestone[b-n9mvpeufjg]  {
    padding: 2px 9px;
    border: 1px solid transparent;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
}
.tdm-chip-type[b-n9mvpeufjg]       { background: var(--motiva-surface-secondary); color: var(--motiva-text-muted); border: 1px solid var(--motiva-border-subtle); }
/* `.tdm-chip` is 3px/10px; the edge is paid for at 2px/9px. */
.tdm-chip-submission[b-n9mvpeufjg] {
    padding: 2px 9px;
    border: 1px solid transparent;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
}
.tdm-chip-activity[b-n9mvpeufjg]   { background: var(--motiva-color-success-bg); color: var(--motiva-color-teal); }


.tdm-header-title-row[b-n9mvpeufjg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 28px 0;
    flex-shrink: 0;
}

.tdm-title[b-n9mvpeufjg] {
    font-size: var(--motiva-font-size-h2, 20px);
    font-weight: 700;
    color: var(--motiva-text-primary);
    margin: 0;
    line-height: 1.3;
}

/* ── Compact meta line: open / due dates (single inline row) ── */
.tdm-meta-line[b-n9mvpeufjg] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 6px 28px 0;
    font-size: var(--motiva-font-size-caption, 12px);
    color: var(--motiva-text-secondary);
    flex-shrink: 0;
}

/* The meta item is a plain inline span, so a glyph inside it would sit on the
   text baseline rather than on the text's optical centre. */
.tdm-meta-item[b-n9mvpeufjg] {
    display: inline-flex;
    align-items: center;
}

/* The date glyph. Muted like the key it precedes, sized below the text so it
   annotates the line rather than competing with it, and given a hair of
   inline-end space — a logical property, so it sits correctly at the start of
   the line in RTL without a [dir] selector (this app sets CSS `direction` and
   never a dir attribute). The meta line's own font-size is unchanged, so the
   header does not grow. */
.tdm-meta-icon[b-n9mvpeufjg] {
    font-size: 11px;
    color: var(--motiva-text-muted);
    margin-inline-end: 5px;
    flex-shrink: 0;
}

.tdm-meta-overdue .tdm-meta-icon[b-n9mvpeufjg] { color: inherit; }

.tdm-meta-key[b-n9mvpeufjg] { color: var(--motiva-text-muted); font-weight: 500; margin-inline-end: 4px; }
.tdm-meta-overdue[b-n9mvpeufjg], .tdm-meta-overdue .tdm-meta-key[b-n9mvpeufjg] { color: var(--motiva-color-rose, var(--motiva-color-danger)); }

/* ── Body (scrollable) ── */

/* ════ Two-column info grid ════ */
/* Description — full width, the primary content of the modal */
.tdm-section-desc[b-n9mvpeufjg] {
    padding: 16px 28px;
    border-bottom: 1px solid var(--motiva-border-subtle);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tdm-col-label[b-n9mvpeufjg] {
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 700;
    color: var(--motiva-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 6px;
}

.tdm-col-label-mt[b-n9mvpeufjg] { margin-top: 16px; }

/* Description — plain body text, no card background */
.tdm-desc-text[b-n9mvpeufjg] {
    font-size: var(--motiva-font-size-lg, 16px);
    color: var(--motiva-text-primary);
    line-height: 1.65;
    white-space: pre-line;
    margin: 0;
    padding: 0 0 4px;
}

/* The modal's other empty state ("אין תיאור למשימה זו."). Un-italicised
   alongside the sub-task one — two empty states in one dialog should not
   disagree about whether an empty state is italic. */
.tdm-desc-empty[b-n9mvpeufjg] { font-size: var(--motiva-font-size-body, 14px); color: var(--motiva-text-muted); margin: 0; }


.tdm-overdue-tag[b-n9mvpeufjg] {
    font-size: var(--motiva-font-size-caption, 10px);
    font-weight: 700;
    background: var(--motiva-color-danger-bg);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
    border-radius: var(--motiva-radius-full);
    padding: 1px 7px;
}

/* ── Unified status pill (title row) ──
   Editable mode: a pill-shaped <select> (Open/InProgress only).
   Locked mode: a static colored pill reflecting the mentor/Moodle state. */
.tdm-status-pill-ctrl[b-n9mvpeufjg] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.tdm-status-pill-select[b-n9mvpeufjg] {
    /* direction: rtl places the native dropdown arrow on the physical LEFT.
       Padding is physical (shorthand order: top right bottom left), so:
         right (10px) = text end clearance
         left  (36px) = arrow clearance — extra inset so the chevron glyph
                        sits well inside the pill border rather than crowding it
       width: fit-content prevents the control from growing beyond its longest
       option ("ממתין לביצוע") inside the flex title row. */
    padding: 5px 10px 5px 36px;
    width: fit-content;
    border-radius: var(--motiva-radius-full);
    border: 1px solid var(--motiva-border-strong);
    background: var(--motiva-surface-secondary);
    color: var(--motiva-text-primary);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 700;
    cursor: pointer;
    outline: none;
    direction: rtl;
    transition: border-color 0.12s;
    appearance: auto;
}

.tdm-status-pill-select:focus[b-n9mvpeufjg]    { border-color: var(--motiva-color-violet, var(--motiva-color-indigo)); }
.tdm-status-pill-select:disabled[b-n9mvpeufjg] { opacity: 0.6; cursor: not-allowed; }

.tdm-status-pill[b-n9mvpeufjg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 700;
    padding: 5px 14px;
    border-radius: var(--motiva-radius-full);
    white-space: nowrap;
    flex-shrink: 0;
}

.tdm-status-pill .oi[b-n9mvpeufjg] { font-size: var(--motiva-font-size-caption, 10px); }

.tdm-pill-neutral[b-n9mvpeufjg]  { background: var(--motiva-surface-secondary); color: var(--motiva-text-secondary); border: 1px solid var(--motiva-border-subtle); }
/* `.tdm-status-pill` is 5px/14px; the edge is paid for at 4px/13px. */
.tdm-pill-waiting[b-n9mvpeufjg]  {
    padding: 4px 13px;
    border: 1px solid transparent;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
}
.tdm-pill-returned[b-n9mvpeufjg] { background: var(--motiva-color-danger-bg); color: var(--motiva-color-rose-ink, var(--motiva-color-danger)); }
.tdm-pill-approved[b-n9mvpeufjg] {
    padding: 4px 13px;
    border: 1px solid transparent;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
}
.tdm-pill-done[b-n9mvpeufjg]     { background: var(--motiva-color-success-bg); color: var(--motiva-color-teal); }

.tdm-inline-error-title[b-n9mvpeufjg] { padding: 0 28px; margin-top: 4px; }

.tdm-inline-error[b-n9mvpeufjg] {
    font-size: var(--motiva-font-size-caption, 11px);
    color: var(--motiva-color-rose, var(--motiva-color-danger));
    margin: 4px 0 0;
}

/* ════ Section ════ */
.tdm-section[b-n9mvpeufjg] {
    padding: 18px 28px;
    border-bottom: 1px solid var(--motiva-border-subtle);
}

.tdm-section:last-child[b-n9mvpeufjg] { border-bottom: none; }

.tdm-section-title[b-n9mvpeufjg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: 700;
    color: var(--motiva-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0 0 12px;
}

.tdm-section-title .oi[b-n9mvpeufjg] { font-size: var(--motiva-font-size-sm, 13px); color: var(--motiva-color-violet, var(--motiva-color-indigo)); }

/* ── Submission state — empty ── */
.tdm-submission-empty[b-n9mvpeufjg] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--motiva-text-muted);
    font-size: var(--motiva-font-size-body, 14px);
    font-style: italic;
}

.tdm-submission-empty .oi[b-n9mvpeufjg] { font-size: var(--motiva-font-size-lg, 16px); }

/* ── Compact submission timeline ──
   Lightweight, state-aware: small circular markers + thin connector lines.
   No card backgrounds — each of the 3 fixed steps (submitted / mentor
   decision / Moodle) renders Done (✓ green) / Returned (✕ red) /
   Active (● accent, "current step") / Locked (● muted, not reached yet)
   based on the latest submission's actual state. */
.tdm-timeline[b-n9mvpeufjg] {
    display: flex;
    align-items: flex-start;
    gap: 0;
    overflow-x: auto;
    padding: 6px 2px 2px;
    margin-bottom: 12px;
}

.tdm-timeline-step[b-n9mvpeufjg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    min-width: 92px;
    padding: 0 6px;
    flex-shrink: 0;
}

.tdm-timeline-marker[b-n9mvpeufjg] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--motiva-font-size-caption, 10px);
    flex-shrink: 0;
}

.tdm-timeline-title[b-n9mvpeufjg] { font-size: var(--motiva-font-size-caption, 12px); font-weight: 600; line-height: 1.3; }
.tdm-timeline-sub[b-n9mvpeufjg]   { font-size: var(--motiva-font-size-caption, 10px); color: var(--motiva-text-muted); }

.tdm-timeline-connector[b-n9mvpeufjg] {
    flex: 1;
    height: 1px;
    min-width: 20px;
    margin-top: 10px;
    background: var(--motiva-border-strong);
}

.tdm-tl-done    .tdm-timeline-marker[b-n9mvpeufjg] { background: var(--motiva-color-success-bg); color: var(--motiva-color-teal); }
.tdm-tl-done    .tdm-timeline-title[b-n9mvpeufjg]  { color: var(--motiva-color-teal); }

.tdm-tl-returned .tdm-timeline-marker[b-n9mvpeufjg] { background: var(--motiva-color-danger-bg); color: var(--motiva-color-rose-ink, var(--motiva-color-danger)); }
.tdm-tl-returned .tdm-timeline-title[b-n9mvpeufjg]  { color: var(--motiva-color-rose-ink, var(--motiva-color-danger)); }
.tdm-tl-returned .tdm-timeline-sub[b-n9mvpeufjg]    { color: var(--motiva-color-rose-ink, var(--motiva-color-danger)); }

.tdm-tl-active  .tdm-timeline-marker[b-n9mvpeufjg] { background: var(--motiva-surface-secondary); color: var(--motiva-color-violet, var(--motiva-color-indigo)); border: 1px solid var(--motiva-color-violet, var(--motiva-color-indigo)); }
.tdm-tl-active  .tdm-timeline-title[b-n9mvpeufjg]  { color: var(--motiva-text-primary); }

.tdm-tl-locked  .tdm-timeline-marker[b-n9mvpeufjg] { background: var(--motiva-surface-secondary); color: var(--motiva-text-muted); border: 1px dashed var(--motiva-border-strong); }
.tdm-tl-locked  .tdm-timeline-title[b-n9mvpeufjg]  { color: var(--motiva-text-muted); }

/* The connector is the same semantic colour as the step it leaves, at
   reduced strength so the line never competes with the marker. rgba
   fallback first, for browsers without color-mix. */
.tdm-timeline-connector.tdm-tl-connector-done[b-n9mvpeufjg]     { background: rgba(13, 156, 154, 0.45); background: color-mix(in srgb, var(--motiva-color-teal) 45%, transparent); }
.tdm-timeline-connector.tdm-tl-connector-returned[b-n9mvpeufjg] { background: rgba(217, 56, 100, 0.40); background: color-mix(in srgb, var(--motiva-color-rose, var(--motiva-color-danger)) 40%, transparent); }

/* ── Feedback banners ── */
.tdm-feedback-banner[b-n9mvpeufjg] {
    border-radius: var(--motiva-radius-sm);
    padding: 12px 14px;
    margin-bottom: 10px;
}

.tdm-feedback-returned[b-n9mvpeufjg] { background: var(--motiva-color-danger-bg); border: 1px solid rgba(217, 56, 100, 0.28); border-color: color-mix(in srgb, var(--motiva-color-rose, var(--motiva-color-danger)) 28%, transparent); }

.tdm-feedback-header[b-n9mvpeufjg] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
}

.tdm-feedback-header .oi[b-n9mvpeufjg]  { font-size: var(--motiva-font-size-sm, 13px); color: var(--motiva-color-rose-ink, var(--motiva-color-danger)); }
.tdm-feedback-header strong[b-n9mvpeufjg] { font-size: var(--motiva-font-size-caption, 12px); font-weight: 700; color: var(--motiva-color-rose-ink, var(--motiva-color-danger)); }

.tdm-feedback-date[b-n9mvpeufjg] {
    font-size: var(--motiva-font-size-caption, 11px);
    color: var(--motiva-text-muted);
    margin-right: auto;
}

.tdm-feedback-text[b-n9mvpeufjg] {
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--motiva-text-primary);
    margin: 0;
    line-height: 1.5;
    white-space: pre-line;
}

/* ════ Sub-tasks section ════ */
.tdm-subtask-header[b-n9mvpeufjg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.tdm-subtask-header .tdm-section-title[b-n9mvpeufjg] { margin: 0; }

.tdm-subtask-header-end[b-n9mvpeufjg] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Add / expand button */
.tdm-subtask-toggle-add[b-n9mvpeufjg] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--motiva-radius-full);
    border: 1px solid var(--motiva-color-violet, var(--motiva-color-indigo));
    background: var(--motiva-color-brand-bg);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-control, 12px);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}

.tdm-subtask-toggle-add:hover[b-n9mvpeufjg] {
    background: var(--motiva-color-violet, var(--motiva-color-indigo));
    color: #fff;
}

.tdm-subtask-toggle-add .oi[b-n9mvpeufjg] { font-size: var(--motiva-font-size-caption, 11px); }

/* Expandable add form */
.tdm-subtask-form[b-n9mvpeufjg] {
    background: var(--motiva-surface-secondary);
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-sm);
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tdm-subtask-form-row[b-n9mvpeufjg] {
    display: flex;
    gap: 8px;
}

.tdm-subtask-form-row-meta[b-n9mvpeufjg] {
    gap: 8px;
}

.tdm-subtask-input[b-n9mvpeufjg] {
    flex: 1;
    padding: 7px 12px;
    border: 1px solid var(--motiva-border-strong);
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-primary);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-control, 13px);
    outline: none;
    direction: rtl;
    transition: border-color 0.12s;
}

.tdm-subtask-input-title[b-n9mvpeufjg] { width: 100%; }

.tdm-subtask-input:focus[b-n9mvpeufjg] { border-color: var(--motiva-color-violet, var(--motiva-color-indigo)); outline: none; }
.tdm-subtask-input[b-n9mvpeufjg]::placeholder { color: var(--motiva-text-muted); }

.tdm-subtask-status-select[b-n9mvpeufjg] {
    padding: 6px 10px;
    border: 1px solid var(--motiva-border-strong);
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-primary);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-caption, 12px);
    direction: rtl;
    outline: none;
    cursor: pointer;
    transition: border-color 0.12s;
}

.tdm-subtask-status-select:focus[b-n9mvpeufjg] { border-color: var(--motiva-color-violet, var(--motiva-color-indigo)); }

.tdm-subtask-date-input[b-n9mvpeufjg] {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--motiva-border-strong);
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-primary);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-control, 12px);
    outline: none;
    transition: border-color 0.12s;
}

.tdm-subtask-date-input:focus[b-n9mvpeufjg] { border-color: var(--motiva-color-violet, var(--motiva-color-indigo)); }

.tdm-subtask-notes-input[b-n9mvpeufjg] {
    flex: 1;
    padding: 7px 12px;
    border: 1px solid var(--motiva-border-strong);
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-primary);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-control, 13px);
    outline: none;
    direction: rtl;
    resize: vertical;
    transition: border-color 0.12s;
}

.tdm-subtask-notes-input:focus[b-n9mvpeufjg]  { border-color: var(--motiva-color-violet, var(--motiva-color-indigo)); }
.tdm-subtask-notes-input[b-n9mvpeufjg]::placeholder { color: var(--motiva-text-muted); }

.tdm-subtask-form-actions[b-n9mvpeufjg] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.tdm-subtask-add-btn[b-n9mvpeufjg] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    /* Geometry only — the create action for a subtask takes the shared
       `.motiva-cta` treatment. The disclosure pill that opens this form
       (.tdm-subtask-toggle-add) deliberately stays outlined: it reveals the
       form, it does not create anything. */
    padding: 6px 14px;
    border: none;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: 600;
    transition: filter 0.15s ease;
}

.tdm-subtask-add-btn:disabled[b-n9mvpeufjg] { opacity: 0.5; cursor: not-allowed; }
.tdm-subtask-add-btn .oi[b-n9mvpeufjg]      { font-size: var(--motiva-font-size-caption, 11px); }

.tdm-subtask-cancel-btn[b-n9mvpeufjg] {
    padding: 6px 14px;
    border-radius: var(--motiva-radius-sm);
    border: 1px solid var(--motiva-border-strong);
    background: none;
    color: var(--motiva-text-secondary);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-control, 13px);
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
}

.tdm-subtask-cancel-btn:hover[b-n9mvpeufjg] {
    border-color: var(--motiva-text-muted);
    color: var(--motiva-text-primary);
}

/* Loading/empty */
.tdm-subtask-loading[b-n9mvpeufjg] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--motiva-text-muted);
    font-size: var(--motiva-font-size-sm, 13px);
    padding: 8px 0;
}

.tdm-subtask-empty[b-n9mvpeufjg] {
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--motiva-text-muted);
    margin: 0;
    padding: 4px 0;
}

/* Sub-task list */
.tdm-subtask-list[b-n9mvpeufjg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* direction: rtl ensures flex start = right side; checkbox (first in DOM) appears on the right */
.tdm-subtask-row[b-n9mvpeufjg] {
    display: flex;
    flex-direction: row;
    direction: rtl;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--motiva-radius-sm);
    background: var(--motiva-surface-secondary);
    border: 1px solid var(--motiva-border-subtle);
    transition: background 0.1s;
}

.tdm-subtask-row:hover[b-n9mvpeufjg] { background: var(--motiva-surface-hover); }
.tdm-subtask-row-done[b-n9mvpeufjg]  { background: var(--motiva-color-success-bg); border-color: rgba(13, 156, 154, 0.30); border-color: color-mix(in srgb, var(--motiva-color-teal) 30%, transparent); }

/* Inline edit form inside a row */
.tdm-subtask-edit-form[b-n9mvpeufjg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tdm-subtask-check[b-n9mvpeufjg] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.tdm-subtask-check-box[b-n9mvpeufjg] {
    display: block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--motiva-border-strong);
    border-radius: 3px;
    background: var(--motiva-surface-primary);
    transition: border-color 0.12s, background 0.12s;
    position: relative;
    flex-shrink: 0;
}

.tdm-subtask-check:hover .tdm-subtask-check-box[b-n9mvpeufjg] {
    border-color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

.tdm-subtask-check-done .tdm-subtask-check-box[b-n9mvpeufjg] {
    background: var(--motiva-color-teal);
    border-color: var(--motiva-color-teal);
}

.tdm-subtask-check-done .tdm-subtask-check-box[b-n9mvpeufjg]::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0px;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

/* Sub-task body (title + meta) */
.tdm-subtask-body[b-n9mvpeufjg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tdm-subtask-title[b-n9mvpeufjg] {
    font-size: var(--motiva-font-size-sm, 13px);
    color: var(--motiva-text-primary);
    line-height: 1.4;
}

.tdm-subtask-title-done[b-n9mvpeufjg] {
    color: var(--motiva-text-muted);
    text-decoration: line-through;
}

/* Meta row (status badge + due date + notes icon) */
.tdm-subtask-meta[b-n9mvpeufjg] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.tdm-subtask-status-badge[b-n9mvpeufjg] {
    font-size: var(--motiva-font-size-caption, 10px);
    font-weight: 700;
    border-radius: var(--motiva-radius-full);
    padding: 1px 8px;
    white-space: nowrap;
}

.tdm-ststatus-open[b-n9mvpeufjg]       { background: var(--motiva-surface-primary); color: var(--motiva-text-muted); border: 1px solid var(--motiva-border-strong); }
/* `.tdm-subtask-status-badge` is 1px/8px; the edge is paid for at 0/7px. */
.tdm-ststatus-inprogress[b-n9mvpeufjg] {
    padding: 0 7px;
    border: 1px solid transparent;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
}
.tdm-ststatus-done[b-n9mvpeufjg]       { background: var(--motiva-color-success-bg); color: var(--motiva-color-teal); }

.tdm-subtask-meta-item[b-n9mvpeufjg] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: var(--motiva-font-size-caption, 11px);
    color: var(--motiva-text-muted);
}

.tdm-subtask-meta-item .oi[b-n9mvpeufjg] { font-size: var(--motiva-font-size-caption, 10px); }
.tdm-subtask-meta-overdue[b-n9mvpeufjg]  { color: var(--motiva-color-rose, var(--motiva-color-danger)); font-weight: 600; }

.tdm-subtask-has-notes[b-n9mvpeufjg] {
    color: var(--motiva-text-muted);
    font-size: var(--motiva-font-size-caption, 12px);
    cursor: help;
}

/* Action buttons (edit + delete) */
.tdm-subtask-actions[b-n9mvpeufjg] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.1s;
}

.tdm-subtask-row:hover .tdm-subtask-actions[b-n9mvpeufjg] { opacity: 1; }

.tdm-subtask-edit[b-n9mvpeufjg],
.tdm-subtask-delete[b-n9mvpeufjg] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: none;
    color: var(--motiva-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--motiva-font-size-caption, 12px);
    flex-shrink: 0;
    transition: color 0.12s;
}

.tdm-subtask-edit:hover[b-n9mvpeufjg]   { color: var(--motiva-color-violet, var(--motiva-color-indigo)); }
.tdm-subtask-delete:hover[b-n9mvpeufjg] { color: var(--motiva-color-rose, var(--motiva-color-danger)); }

/* ════ Submission history ════ */
.tdm-history-count[b-n9mvpeufjg] {
    font-size: var(--motiva-font-size-count, 11px);
    font-weight: 700;
    background: var(--motiva-surface-secondary);
    color: var(--motiva-text-muted);
    border-radius: var(--motiva-radius-full);
    padding: 1px 8px;
    margin-right: 4px;
}

.tdm-history-list[b-n9mvpeufjg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tdm-history-item[b-n9mvpeufjg] {
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-sm);
    overflow: hidden;
    background: var(--motiva-surface-primary);
}

.tdm-history-latest[b-n9mvpeufjg] {
    border-color: var(--motiva-color-violet, var(--motiva-color-indigo));
    box-shadow: 0 0 0 1px var(--motiva-color-brand-bg);
}

.tdm-history-header[b-n9mvpeufjg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 12px;
    background: none;
    border: none;
    font-family: var(--motiva-font-family);
    cursor: pointer;
    gap: 10px;
    text-align: right;
    transition: background 0.1s;
}

.tdm-history-header:hover[b-n9mvpeufjg] { background: var(--motiva-surface-hover); }

.tdm-history-header-start[b-n9mvpeufjg] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.tdm-history-header-end[b-n9mvpeufjg] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.tdm-history-number[b-n9mvpeufjg] { font-size: var(--motiva-font-size-sm, 13px); font-weight: 600; color: var(--motiva-text-primary); white-space: nowrap; }
.tdm-history-date[b-n9mvpeufjg]   { font-size: var(--motiva-font-size-caption, 12px); color: var(--motiva-text-muted); white-space: nowrap; }
.tdm-chevron[b-n9mvpeufjg]        { font-size: var(--motiva-font-size-caption, 11px); color: var(--motiva-text-muted); }

/* Submission status badges */
.tdm-submission-badge[b-n9mvpeufjg],
.tdm-mentor-badge[b-n9mvpeufjg] {
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 700;
    border-radius: var(--motiva-radius-full);
    padding: 2px 9px;
    white-space: nowrap;
}

/* `.tdm-submission-badge` is 2px/9px; the edge is paid for at 1px/8px.
   Reviewed keeps teal below; needs-revision keeps rose. */
.tdm-sbadge-submitted[b-n9mvpeufjg]     {
    padding: 1px 8px;
    border: 1px solid transparent;
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
}
.tdm-sbadge-reviewed[b-n9mvpeufjg]      { background: var(--motiva-color-success-bg); color: var(--motiva-color-teal); }
.tdm-sbadge-needsrevision[b-n9mvpeufjg] { background: var(--motiva-color-danger-bg); color: var(--motiva-color-rose-ink, var(--motiva-color-danger)); }

.tdm-mbadge-approved[b-n9mvpeufjg] { background: var(--motiva-color-success-bg); color: var(--motiva-color-teal); }
.tdm-mbadge-returned[b-n9mvpeufjg] { background: var(--motiva-color-danger-bg); color: var(--motiva-color-rose-ink, var(--motiva-color-danger)); }
.tdm-mbadge-pending[b-n9mvpeufjg]  { background: var(--motiva-surface-secondary); color: var(--motiva-text-muted); }

/* History body (expanded) */
.tdm-history-body[b-n9mvpeufjg] {
    padding: 10px 12px 12px;
    border-top: 1px solid var(--motiva-border-subtle);
    background: var(--motiva-surface-secondary);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tdm-history-notes[b-n9mvpeufjg] { display: flex; flex-direction: column; gap: 3px; }
.tdm-notes-label[b-n9mvpeufjg]   { font-size: var(--motiva-font-size-caption, 11px); font-weight: 700; color: var(--motiva-text-muted); text-transform: uppercase; }
.tdm-notes-text[b-n9mvpeufjg]    { font-size: var(--motiva-font-size-sm, 13px); color: var(--motiva-text-primary); margin: 0; line-height: 1.5; white-space: pre-line; }

/* Files */
.tdm-files[b-n9mvpeufjg]       { display: flex; flex-direction: column; gap: 5px; }
.tdm-files-label[b-n9mvpeufjg] { font-size: var(--motiva-font-size-caption, 11px); font-weight: 700; color: var(--motiva-text-muted); text-transform: uppercase; }
.tdm-files-list[b-n9mvpeufjg]  { display: flex; flex-direction: column; gap: 3px; }

.tdm-file-row[b-n9mvpeufjg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--motiva-surface-primary);
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-sm);
    text-decoration: none;
    color: var(--motiva-text-primary);
    transition: background 0.1s, border-color 0.1s;
}

.tdm-file-row:hover[b-n9mvpeufjg]   { background: var(--motiva-color-brand-bg); border-color: var(--motiva-color-violet, var(--motiva-color-indigo)); color: var(--motiva-color-violet, var(--motiva-color-indigo)); }
.tdm-file-icon[b-n9mvpeufjg]        { font-size: var(--motiva-font-size-sm, 13px); color: var(--motiva-color-violet, var(--motiva-color-indigo)); flex-shrink: 0; }
.tdm-file-name[b-n9mvpeufjg]        { flex: 1; font-size: var(--motiva-font-size-sm, 13px); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdm-file-size[b-n9mvpeufjg]        { font-size: var(--motiva-font-size-caption, 11px); color: var(--motiva-text-muted); white-space: nowrap; flex-shrink: 0; }
.tdm-file-dl[b-n9mvpeufjg]          { font-size: var(--motiva-font-size-sm, 13px); color: var(--motiva-text-muted); flex-shrink: 0; }
.tdm-file-row:hover .tdm-file-dl[b-n9mvpeufjg] { color: var(--motiva-color-violet, var(--motiva-color-indigo)); }

/* Drive-link button (new submission flow) */
.tdm-drive-row[b-n9mvpeufjg] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.tdm-drive-btn[b-n9mvpeufjg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Geometry only. Opening the submitted file IS the primary action of a
       submission row — the same "open" verb as פתיחה elsewhere — so it takes
       the shared `.motiva-cta` treatment rather than staying the one filled
       violet button left in the modal. */
    padding: 8px 14px;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: 600;
    text-decoration: none;
    transition: filter 0.15s ease;
}
.tdm-drive-btn:hover[b-n9mvpeufjg] { color: #fff; }
.tdm-drive-btn .oi[b-n9mvpeufjg] { font-size: var(--motiva-font-size-caption, 11px); }

/* Edit + delete (latest pending submission only) */
.tdm-edit-btn[b-n9mvpeufjg],
.tdm-delete-btn[b-n9mvpeufjg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: var(--motiva-radius-sm);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-control, 12px);
    font-weight: 600;
    cursor: pointer;
    background: var(--motiva-surface-primary);
    border: 1px solid var(--motiva-border-strong);
    color: var(--motiva-text-secondary);
    transition: background 0.13s, color 0.13s, border-color 0.13s;
}
.tdm-edit-btn .oi[b-n9mvpeufjg],
.tdm-delete-btn .oi[b-n9mvpeufjg] { font-size: var(--motiva-font-size-caption, 10px); }
.tdm-edit-btn:hover[b-n9mvpeufjg] { background: var(--motiva-surface-hover); color: var(--motiva-color-violet, var(--motiva-color-indigo)); border-color: var(--motiva-color-violet, var(--motiva-color-indigo)); }
.tdm-delete-btn[b-n9mvpeufjg] { color: var(--motiva-color-rose, var(--motiva-color-danger)); }
.tdm-delete-btn:hover[b-n9mvpeufjg] { background: var(--motiva-color-danger-bg); border-color: var(--motiva-color-rose, var(--motiva-color-danger)); }

/* "I submitted in Moodle" CTA — green, lives next to the Drive button. */
.tdm-moodle-btn[b-n9mvpeufjg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--motiva-radius-sm);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: 700;
    cursor: pointer;
    background: var(--motiva-color-teal);
    color: #fff; /* approved exception: no token expresses "ink on a filled brand surface" */
    border: 1px solid var(--motiva-color-teal);
    transition: filter 0.13s;
}
.tdm-moodle-btn:hover[b-n9mvpeufjg] { filter: brightness(0.93); }
.tdm-moodle-btn .oi[b-n9mvpeufjg] { font-size: var(--motiva-font-size-caption, 11px); }

.tdm-moodle-done[b-n9mvpeufjg] {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--motiva-color-success-bg);
    border: 1px solid rgba(13, 156, 154, 0.40);
    border-color: color-mix(in srgb, var(--motiva-color-teal) 40%, transparent);
    border-radius: var(--motiva-radius-sm);
    color: var(--motiva-color-teal);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 600;
}
.tdm-moodle-done .oi[b-n9mvpeufjg] { font-size: var(--motiva-font-size-caption, 12px); color: var(--motiva-color-teal); }

/* ════ Footer ════ */

.tdm-btn-ghost[b-n9mvpeufjg] {
    padding: 7px 20px;
    border-radius: var(--motiva-radius-sm);
    border: 1px solid var(--motiva-border-strong);
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-secondary);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-control, 14px);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}

.tdm-btn-ghost:hover[b-n9mvpeufjg] { background: var(--motiva-surface-hover); }

/* Geometry only — the fill, radius, hover, press and focus ring come from the
   shared `.motiva-cta` treatment in motiva-base.css, which this button carries.
   The old flat --g-accent fill and its blue drop-shadow on hover are gone: they
   were this modal's own invention and the one remaining place a student
   primary looked unlike every other primary. */
.tdm-btn-primary[b-n9mvpeufjg] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 22px;
    border: none;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-control, 14px);
    font-weight: 600;
    transition: filter 0.2s ease;
    white-space: nowrap;
}

.tdm-btn-primary .oi[b-n9mvpeufjg] { font-size: var(--motiva-font-size-control, 12px); }

.tdm-btn-course[b-n9mvpeufjg] {
    display:      inline-flex;
    align-items:  center;
    gap:          7px;
    padding:      7px 22px;
    border-radius: var(--motiva-radius-sm);
    border:       none;
    background:   var(--motiva-color-teal);
    color:        #fff; /* approved exception, as above */
    font-family:  var(--motiva-font-family);
    font-size: var(--motiva-font-size-control, 14px);
    font-weight:  600;
    cursor:       pointer;
    transition:   background 0.15s ease, box-shadow 0.15s ease;
    white-space:  nowrap;
}

.tdm-btn-course:hover:not(:disabled)[b-n9mvpeufjg] {
    filter: brightness(0.93);
}

.tdm-btn-course:disabled[b-n9mvpeufjg] { opacity: 0.7; cursor: default; }
.tdm-btn-course .oi[b-n9mvpeufjg]      { font-size: var(--motiva-font-size-control, 12px); }

/* ── Responsive: collapse to single column on small screens ──
   The dialog's own narrow behaviour (near-full width, safe margin, internal
   scroll) belongs to MModal; what is left here is content reflow. */
@media (max-width: 640px) {
    .tdm-header-title-row[b-n9mvpeufjg] { flex-wrap: wrap; }
}

/* ── Correction, final-design pass ───────────────────────────────────
   An earlier pass in this migration folded the legacy BLUE "submitted /
   in review" states onto violet or neutral, following the superseded
   "three semantic colours only" rule. The finalized student design
   keeps blue as its own role — in progress / assigned / awaiting review
   — alongside violet for action. The `-submitted` states above are
   restored to blue accordingly. (README.md §3.)
   ── */

/* ═══════════════════════════════════════════════════════════════════════════
   MOTIVA REFINEMENT PASS — `.motiva-final`

   Structure, hierarchy, layout and copy above are UNCHANGED. This block only
   re-tunes colour, and it is appended rather than edited in place for the same
   reason MilestoneDetailModal.razor.css:349 does it: the base rules stay
   readable as the thing they were, and the refinement is one reviewable unit.

   Every student surface renders inside `motiva motiva-final motiva-student`
   (AppLayout.razor:207), so these rules always win — `.motiva-final .tdm-x`
   compiles to (0,2,1) against the base rule's (0,1,1).

   THE PROBLEM THIS FIXES
   The modal read as violet because violet was doing four unrelated jobs at
   once: brand, "this is a heading", "you are hovering", and every status that
   was not explicitly red or green. Violet now says exactly one thing — the
   live step of the submission pipeline, and the brand edge on a branded
   container. Status speaks in the semantic ladder, headings and hover speak
   in ink.

   WHY THE ICONS ARE NOT GRADIENT-FILLED
   The finished screens draw their glyphs as inline <svg stroke="url(
   #motivaIconGradient)">. This modal's 28 glyphs are open-iconic FONT
   characters; `.motiva-ico-gradient` needs an SVG paint server and cannot
   apply to them. Converting the icon set is a markup rewrite, not a colour
   pass, so the section icons take the muted ink its closest sibling uses
   (MilestoneDetailModal.razor.css:396) instead of a violet fill.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Headings — ink, not violet, and not shouted ──────────────────────────
   Matches the sibling modal: 15px/700 in primary ink rather than 13px
   uppercase secondary. The icon stops being the loudest thing in the row. */
.motiva-final .tdm-section-title[b-n9mvpeufjg] {
    font-size: var(--motiva-font-size-item, 15px);
    color: var(--motiva-text-primary);
    text-transform: none;
    letter-spacing: -0.01em;
}

.motiva-final .tdm-section-title .oi[b-n9mvpeufjg] { color: var(--motiva-text-muted); }

/* ── The instructions callout is GONE from this modal ─────────────────────
   The task overview answers "what is this task and where does it stand". The
   submission instructions moved to the inline submission state, on the Drive
   field's own info trigger. Its rules are deleted rather than left dead. */

/* The milestone chip's edge recipe moved to the base `.tdm-chip-milestone`
   rule at the top of this file — it is the product default now, not this
   scope's exception, so the override that restated it here is gone. */

/* ── Neutral surfaces that were invisible ─────────────────────────────────
   --motiva-surface-secondary resolves to #FBFBFD, which is a 1.2% difference
   against the modal's white. Every "subtle grey" below was rendering as
   nothing. --motiva-color-neutral-bg is the real neutral tint. */
.motiva-final .tdm-chip-type[b-n9mvpeufjg],
.motiva-final .tdm-pill-neutral[b-n9mvpeufjg],
.motiva-final .tdm-history-count[b-n9mvpeufjg],
.motiva-final .tdm-history-body[b-n9mvpeufjg],
.motiva-final .tdm-subtask-form[b-n9mvpeufjg],
.motiva-final .tdm-status-pill-select[b-n9mvpeufjg],
.motiva-final .tdm-mbadge-pending[b-n9mvpeufjg] {
    background: var(--motiva-color-neutral-bg);
}

/* ── Status speaks semantically ───────────────────────────────────────────
   "יש להגיש במודל" is the one state that is WAITING ON THE STUDENT. That is
   Attention in this product's vocabulary — not violet (which would make it
   look like brand chrome) and not rose (nothing is late; rose asserts a
   passed deadline).

   The tint-plus-ring this used to draw WAS a filled violet block by another
   name. Attention now renders as the product's default tag — white paper
   under the Motiva gradient edge — which says "branded, and a fact about
   this row" without spending a coloured block on it. Same reasoning, same
   recipe, one less violet surface. */
.motiva-final .tdm-pill-approved[b-n9mvpeufjg] {
    background: var(--motiva-tag-brand-surface);
    color: var(--motiva-text-primary);
    box-shadow: none;
}

/* Teal at -ink strength: the plain teal fails contrast on its own 12% tint. */
.motiva-final .tdm-pill-done[b-n9mvpeufjg] { color: var(--motiva-color-teal-ink, var(--motiva-color-teal)); }

.motiva-final .tdm-ststatus-inprogress[b-n9mvpeufjg] {
    background: var(--motiva-color-neutral-bg);
    color: var(--motiva-text-secondary);
}

/* ── Timeline ─────────────────────────────────────────────────────────────
   Violet is KEPT on the active marker: it marks the live step, which is the
   one genuinely meaningful brand accent in the pipeline. Only the invisible
   backdrop behind it is fixed, and the done/locked steps go semantic.

   The markers are ~20px, so the gradient is deliberately NOT used on them —
   below roughly 12-20px it renders as its blue midpoint rather than as a
   sweep. Solid violet is correct here. */
.motiva-final .tdm-tl-active .tdm-timeline-marker[b-n9mvpeufjg] { background: var(--motiva-surface-solid); }
.motiva-final .tdm-tl-locked .tdm-timeline-marker[b-n9mvpeufjg] { background: var(--motiva-color-neutral-bg); }
.motiva-final .tdm-tl-done   .tdm-timeline-title[b-n9mvpeufjg]  { color: var(--motiva-color-teal-ink, var(--motiva-color-teal)); }

/* ── Hover is never violet ────────────────────────────────────────────────
   The brief is explicit: no purple for body or hover text. A hover is a
   surface change; the ink stays ink. */
.motiva-final .tdm-file-row:hover[b-n9mvpeufjg] {
    background: var(--motiva-surface-hover);
    border-color: var(--motiva-border-strong);
    color: var(--motiva-text-primary);
}

.motiva-final .tdm-file-icon[b-n9mvpeufjg]                  { color: var(--motiva-text-muted); }
.motiva-final .tdm-file-row:hover .tdm-file-dl[b-n9mvpeufjg] { color: var(--motiva-text-secondary); }
.motiva-final .tdm-subtask-edit:hover[b-n9mvpeufjg]          { color: var(--motiva-text-primary); }

.motiva-final .tdm-edit-btn:hover[b-n9mvpeufjg] {
    background: var(--motiva-surface-hover);
    color: var(--motiva-text-primary);
    border-color: var(--motiva-border-strong);
}

/* ── The last flat violet fill in the file ────────────────────────────────
   A secondary "add a sub-task" affordance was an outlined violet pill that
   filled SOLID violet on hover — heavier than the modal's own primary CTA. */
.motiva-final .tdm-subtask-toggle-add[b-n9mvpeufjg] {
    border-color: var(--motiva-border-strong);
    background: transparent;
    color: var(--motiva-text-secondary);
}

.motiva-final .tdm-subtask-toggle-add:hover[b-n9mvpeufjg] {
    background: var(--motiva-color-neutral-bg);
    color: var(--motiva-text-primary);
}

/* ── The latest submission ────────────────────────────────────────────────
   Was a violet 1px border PLUS a violet outer ring — a two-layer highlight
   for "this is the most recent row". One brand edge says it, following the
   `.pts-milestone-current` precedent in ProjectTasksSection. */
.motiva-final .tdm-history-latest[b-n9mvpeufjg] {
    border-color: var(--motiva-border-subtle);
    border-inline-start: 3px solid var(--motiva-color-violet);
    box-shadow: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   INLINE SUBMISSION STATE

   The modal's body is replaced by StudentSubmissionForm — the SAME component
   the standalone SubmissionModal hosts. This is a state of this dialog, not a
   second dialog: no new overlay, no navigation, same TaskId.

   The body is FlushBody, so sections supply their own gutter; this pane
   supplies the same one and then lets the form lay itself out.
   ═══════════════════════════════════════════════════════════════════════════ */
.tdm-submit-pane[b-n9mvpeufjg] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 28px 4px;
}

/* The form's own children are direct children of this pane (a Blazor component
   adds no wrapper element), so the column gap above spaces them. */
.tdm-submit-pane .tdm-header-title-row[b-n9mvpeufjg],
.tdm-submit-pane .tdm-meta-line[b-n9mvpeufjg] { padding: 0; }

@media (max-width: 560px) {
    .tdm-submit-pane[b-n9mvpeufjg] { padding: 0 18px 4px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   RADIUS AND WEIGHT CONSISTENCY

   THE RULE THIS SETTLES ON, stated once so it stops drifting:
     · Anything you PRESS — a button, a pill, a chip, a control — is a pill
       (--motiva-radius-full).
     · Anything that CONTAINS things — a banner, a card, a list row, a form,
       a text input — keeps --motiva-radius-sm.

   Why that way round and not the reverse: the shared `.motiva-cta` already
   resolves to --motiva-radius-full inside `.motiva-final` (motiva-base.css),
   and it is not this modal's to change — every student primary in the product
   is a pill. So the primary was a pill while the ghost beside it was a 12px
   rectangle, and the same split ran through every action pair in the modal:
   "פתיחת הקישור בדרייב" against "עריכת הגשה", "שמור" against "ביטול". The
   siblings are brought to the CTA, not the CTA down to the siblings.

   Text inputs and the rows/banners keep radius-sm deliberately: a pill-shaped
   textarea or list row is not the same object as a button, and the design
   language does not draw them that way.

   No new radius value is introduced — every rule below points at a token that
   was already in use elsewhere in this same file.
   ═══════════════════════════════════════════════════════════════════════════ */

.tdm-btn-ghost[b-n9mvpeufjg],
.tdm-subtask-cancel-btn[b-n9mvpeufjg],
.tdm-edit-btn[b-n9mvpeufjg],
.tdm-delete-btn[b-n9mvpeufjg],
.tdm-moodle-btn[b-n9mvpeufjg],
.tdm-btn-course[b-n9mvpeufjg] {
    border-radius: var(--motiva-radius-full);
}

/* Semibold across every pressable thing. The token has existed since the
   Master landed; these rules were spelling 600 and 700 as literals.
   Deliberately NOT applied to: body copy, the read-only status badges
   (.tdm-status-pill, .tdm-mentor-badge, .tdm-subtask-status-badge), which are
   labels rather than actions and keep their heavier weight. */
.tdm-btn-primary[b-n9mvpeufjg],
.tdm-btn-ghost[b-n9mvpeufjg],
.tdm-btn-course[b-n9mvpeufjg],
.tdm-subtask-toggle-add[b-n9mvpeufjg],
.tdm-subtask-add-btn[b-n9mvpeufjg],
.tdm-subtask-cancel-btn[b-n9mvpeufjg],
.tdm-edit-btn[b-n9mvpeufjg],
.tdm-delete-btn[b-n9mvpeufjg],
.tdm-moodle-btn[b-n9mvpeufjg],
.tdm-drive-btn[b-n9mvpeufjg],
.tdm-status-pill-select[b-n9mvpeufjg] {
    font-weight: var(--motiva-font-weight-semibold, 600);
}
/* /Pages/Tasks/TaskFilterPopover.razor.rz.scp.css */
/* ============================================================
   TaskFilterPopover — scoped (tfp-* prefix)
   ============================================================ */

.tfp-wrap[b-gvr2f1yhnc] {
    position: relative;
    flex-shrink: 0;
}

/* Compact + borderless at rest — blends into the shared .tsk-toolbar
   surface; only an active (non-"all") filter or the open state earns
   a visible accent, so search stays the one prominent control. */
.tfp-trigger[b-gvr2f1yhnc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--motiva-control-height-md);
    padding: 0 var(--motiva-space-sm);
    background: none;
    border: none;
    border-radius: var(--motiva-radius-sm);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.tfp-trigger:hover[b-gvr2f1yhnc] {
    background: var(--motiva-surface-hover);
}

.tfp-trigger-open[b-gvr2f1yhnc] {
    background: var(--motiva-surface-hover);
}

/* An active (non-"all") filter stays visible on the trigger itself. */
.tfp-trigger-active[b-gvr2f1yhnc] {
    background: var(--motiva-color-brand-bg);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    font-weight: var(--motiva-font-weight-semibold);
}

.tfp-chevron[b-gvr2f1yhnc] {
    font-size: 9px;
}

/* Transparent full-viewport catcher — closes the popover on outside click
   without dimming the page (this is a lightweight menu, not a modal). */
.tfp-backdrop[b-gvr2f1yhnc] {
    position: fixed;
    inset: 0;
    z-index: var(--motiva-z-dropdown);
    background: transparent;
}

.tfp-panel[b-gvr2f1yhnc] {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    z-index: calc(var(--motiva-z-dropdown) + 1);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 180px;
    background: var(--motiva-surface-primary);
    border: 1px solid var(--motiva-border-card);
    border-radius: var(--motiva-radius-md);
    /* md, not lg: the Master assigns lg to modals and md to dropdowns and
       popovers — this is a popover. */
    box-shadow: var(--motiva-shadow-md);
    padding: 6px;
}

.tfp-option[b-gvr2f1yhnc] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: none;
    border: none;
    border-radius: var(--motiva-radius-sm);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm);
    color: var(--motiva-text-primary);
    text-align: right;
    cursor: pointer;
}

.tfp-option:hover[b-gvr2f1yhnc] {
    background: var(--motiva-surface-hover);
}

.tfp-option-active[b-gvr2f1yhnc] {
    background: var(--motiva-color-brand-bg);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    font-weight: var(--motiva-font-weight-semibold);
}

/* The Master's 7px dot. Kept local rather than swapped for MStatusDot: two
   of these five options ("משימות צוות", "הושלמו") are deliberately neutral
   in the Tasks status language, and MStatusDot's tone set is closed to the
   three semantics on purpose. Colours match the KPI row exactly. */
.tfp-option-dot[b-gvr2f1yhnc] {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: var(--motiva-radius-full);
}

.tfp-dot-action[b-gvr2f1yhnc] { background: var(--motiva-color-violet, var(--motiva-color-indigo)); }
.tfp-dot-submit[b-gvr2f1yhnc] { background: var(--motiva-color-teal); }
.tfp-dot-team[b-gvr2f1yhnc]   { background: var(--motiva-text-muted); }
.tfp-dot-done[b-gvr2f1yhnc]   { background: var(--motiva-text-subtle, var(--motiva-text-muted)); }
/* /Pages/Tasks/TaskStatusTabs.razor.rz.scp.css */
/* ============================================================
   TaskStatusTabs — the reference's segmented pill group.
   Same recipe as the top nav and every other filter track in the
   final design: a tinted track, a raised white pill for the
   selection. (design-reference/motiva-student-final/README.md §5.)
   ============================================================ */

.tst[b-uwir9781cn] {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--motiva-surface-chip);
    border-radius: var(--motiva-radius-full);
    padding: 4px;
}

.tst-tab[b-uwir9781cn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    border: none;
    border-radius: var(--motiva-radius-full);
    background: transparent;
    color: var(--motiva-text-muted);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.tst-tab:hover[b-uwir9781cn] { color: var(--motiva-text-primary); }

.tst-tab-active[b-uwir9781cn],
.tst-tab-active:hover[b-uwir9781cn] {
    padding-inline: 16px;
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-primary);
    font-weight: var(--motiva-font-weight-bold);
    box-shadow: var(--motiva-shadow-pill);
}

/* The bubble is `.motiva-count` in motiva-base.css. This control is the
   hand-rolled predecessor of MFilterTabs and its badge was a byte-identical
   third copy of the same recipe; both now read the one source. */

@media (max-width: 720px) {
    .tst[b-uwir9781cn] { flex-wrap: wrap; }
}
/* /Pages/Tasks/TeamTasksSection.razor.rz.scp.css */
/* ============================================================
   TeamTasksSection — scoped (tts-* prefix)
   Values from design-reference/motiva/project/Motiva Tasks.dc.html,
   section #team-tasks.
   ============================================================ */

/* flex:1 + min-height:0 — the middle link of the height chain the rail hands
   down (row → .m-card-fill → here → the scroll box). Same inset as
   ProjectTasksSection so the two panel headers sit on one line and their
   content shares an inset, which is most of what makes the row read as one
   surface rather than two cards. */
.tts-body[b-5lu1zwaaj0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 10px 20px 14px;
    box-sizing: border-box;
    /* Deep links land here, so the anchor must clear the viewport edge. */
    scroll-margin-top: 28px;
}

/* The list takes the panel's remaining height; the footer keeps its own. See
   the ::deep note in ProjectTasksSection.razor.css for why the parent has to
   reach the scroll box this way. */
.tts-body[b-5lu1zwaaj0]  .m-scroll {
    flex: 1;
}

.tts-header[b-5lu1zwaaj0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
    margin-bottom: 2px;
    padding: 10px 0 10px;
    border-bottom: 1px solid var(--motiva-border-card);
}

.tts-count[b-5lu1zwaaj0] {
    margin-inline-end: auto;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-subtle, var(--motiva-text-muted));
}

.tts-title[b-5lu1zwaaj0] {
    margin: 0;
    font-size: var(--motiva-font-size-h3, 17px);
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: var(--motiva-letter-spacing-section, normal);
    line-height: var(--motiva-line-height-heading);
    color: var(--motiva-text-primary);
    white-space: nowrap;
}

/* The final design's labelled create action. Geometry only — see the matching
   note on .ttc-add: the fill, hover, press and focus ring all come from the
   shared `.motiva-cta` treatment, which is the student primary. */
.tts-add[b-5lu1zwaaj0] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    padding: 8px 14px;
    border-radius: 9px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}

.tts-add-glyph[b-5lu1zwaaj0] {
    font-size: 15px;
    line-height: 1;
}


/* ── Rows ─────────────────────────────────────────────────────
   Mirrors .mt-row from MentorTasksPage: gap 10px, 11px vertical padding,
   brand-bg hover (violet wash, same as mentor personal-task rows). */

.tts-row[b-5lu1zwaaj0] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 6px;
    border-radius: var(--motiva-radius-sm);
    border-bottom: 1px solid var(--motiva-border-subtle);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.tts-row:last-child[b-5lu1zwaaj0] { border-bottom: 0; }

.tts-row:hover[b-5lu1zwaaj0] {
    background: var(--motiva-color-brand-bg);
}

.tts-row:focus-visible[b-5lu1zwaaj0] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

/* ── Assignee disc ────────────────────────────────────────────
   Reference: a 26px initials circle. It answers "who" — the one question the
   row could not previously answer. */
.tts-avatar[b-5lu1zwaaj0] {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--motiva-radius-full);
    background: rgba(46, 99, 232, 0.11);
    color: var(--motiva-color-blue, #2E63E8);
    font-size: 11.5px;
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}

/* A task owned by everyone is not a person — neutral disc, group glyph. */
.tts-avatar-team[b-5lu1zwaaj0] {
    background: rgba(27, 26, 34, 0.06);
    color: var(--motiva-text-muted);
}

.tts-avatar-team svg[b-5lu1zwaaj0] { width: 14px; height: 14px; }

/* ── Meta column ──────────────────────────────────────────────
   Date over calendar state, right-aligned, as the reference stacks them.

   FIXED SLOT: flex-basis is fixed so the column is always the same width
   regardless of whether a due date is present. This keeps the assignee
   avatar in an identical horizontal position on every row — rows with no
   date reserve the same space as rows that have one. */
.tts-row-meta[b-5lu1zwaaj0] {
    flex: 0 0 72px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}


/* Design: 18px box, radius 6px, 1.5px neutral border; checked fills teal
   and the border matches, so the control reads as one solid mark. */
.tts-check[b-5lu1zwaaj0] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--motiva-border-strong);
    border-radius: 6px;
    background: var(--motiva-surface-primary);
    cursor: pointer;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                transform var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.tts-check:hover[b-5lu1zwaaj0] {
    border-color: var(--motiva-color-violet, var(--motiva-color-indigo));
    transform: scale(1.06);
}

.tts-check:focus-visible[b-5lu1zwaaj0] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.tts-check-on[b-5lu1zwaaj0] {
    background: var(--motiva-color-teal);
    border-color: var(--motiva-color-teal);
}

.tts-check-mark[b-5lu1zwaaj0] {
    color: #fff; /* on the solid teal fill */
    font-size: 12px;
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
}

/* The row's one strong voice, and the element that absorbs the leftover
   width — everything after it is fixed-size. A completed row goes muted and
   struck. */
.tts-row-title[b-5lu1zwaaj0] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--motiva-font-size-item, 15px);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tts-row-done .tts-row-title[b-5lu1zwaaj0] {
    color: var(--motiva-text-subtle, var(--motiva-text-muted));
    text-decoration: line-through;
}

/* ── "ביומן Google" marker ────────────────────────────────────
   Metadata, at the same weight as the due date beside it: muted ink,
   11.5px, no fill, no border, no Google colour. It sits after the title
   and shrinks away before the title does, so a long task name is never
   truncated to make room for a note about where it is scheduled. */
.tts-row-gcal[b-5lu1zwaaj0] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-color-teal-ink, var(--motiva-color-teal));
    white-space: nowrap;
}

/* Reference draws this line in the deeper teal — scheduled work is the one
   positive signal on the row, and it earns its own ink. */
.tts-row-gcal svg[b-5lu1zwaaj0] { width: 11px; height: 11px; }

/* Below this the row has no width to spare: the icon alone still says
   "scheduled", and the title keeps the space. */
@media (max-width: 520px) {
    .tts-row-gcal span:last-child[b-5lu1zwaaj0] { display: none; }
    .tts-avatar[b-5lu1zwaaj0] { display: none; }
}

/* Reference labels the date rather than leaving a bare "27.08" to be guessed
   at — see DueLabel, which already produces the wording. */
.tts-row-due[b-5lu1zwaaj0] {
    flex-shrink: 0;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-muted);
    white-space: nowrap;
}

/* ── Expand / collapse ────────────────────────────────────────
   Mirrors .mt-expand / .mt-expand-btn from MentorTasksPage:
   centred wrapper, plain text button, muted → violet on hover. */

.tts-footer[b-5lu1zwaaj0] {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    padding: 6px 0 2px;
}

.tts-expand[b-5lu1zwaaj0] {
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-semibold);
    color: var(--motiva-text-muted);
}

.tts-expand:hover[b-5lu1zwaaj0] {
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

.tts-expand:focus-visible[b-5lu1zwaaj0] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}
/* /Shared/AboutModal.razor.rz.scp.css */
/* ============================================================
   AboutModal — "אודות"

   MOTIVA FIRST, INSTITUTION SECOND. The wordmark opens the dialog,
   the credits sit on one soft group beneath it, and the two
   official marks close it below a single hairline.

   THE ONLY RULE IN THE DIALOG is that hairline. No card inside a
   card, no boxed fields, no heavy borders — depth comes from one
   barely-there tint and MModal's own restrained shadow.

   EVERY IMAGE IS object-fit: contain INSIDE A BOX. The three files
   are wildly different shapes (1566x338, 5310x2104, 4545x3144) and
   each bakes in a different amount of its own whitespace, so each
   box is tuned separately and none is scaled on both axes.

   direction: rtl is inherited from the shell.
   ============================================================ */

/* ── Header ──────────────────────────────────────────────── */

/* Centred, with real air under the mark. The header is the one
   centred block in the dialog — it is identity, not content. */
.abt-head[b-0l7iyqaokn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
    width: 100%;
    padding-block-start: 4px;
}

/* SIZED BY WIDTH, CONTAINED, NEVER STRETCHED. The wordmark is a
   1566x338 lockup — very wide — so a height-only rule made it span
   most of the header. A max-width with `height: auto` and
   object-fit: contain keeps its ratio and gives it a sane footprint
   in a 720px dialog. */
.abt-wordmark[b-0l7iyqaokn] {
    width: 100%;
    max-width: 132px;
    height: auto;
    object-fit: contain;
    display: block;
}

.abt-tagline[b-0l7iyqaokn] {
    margin: 0;
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.5;
    color: var(--motiva-text-secondary);
    text-align: center;
}

/* ── Credits ─────────────────────────────────────────────── */

/* One soft group, two columns. The tint is the product's own raised
   -row violet at a fraction of its strength: enough to read as a
   surface, not enough to become a card. */
.abt-credits[b-0l7iyqaokn] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--motiva-space-md) var(--motiva-space-lg);

    margin: var(--motiva-space-lg) 0 0;
    padding: var(--motiva-space-md) var(--motiva-space-lg);

    border-radius: var(--motiva-radius-md);
    background:
        linear-gradient(180deg,
            rgba(109, 40, 245, 0.045),
            rgba(15, 168, 194, 0.028));
}

.abt-item[b-0l7iyqaokn] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* The field name. Quiet and small — it names the value, it is not
   itself the credit. */
.abt-label[b-0l7iyqaokn] {
    margin: 0;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.3;
    letter-spacing: 0.1px;
    color: var(--motiva-text-muted);
}

/* The credit itself: full reading ink, semibold, and allowed to
   wrap — "הפקולטה לטכנולוגיות למידה – המכון הטכנולוגי חולון" is a
   long line and must never be truncated in a credit. */
.abt-value[b-0l7iyqaokn] {
    margin: 0;
    font-size: var(--motiva-font-size-lg, 15px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.5;
    color: var(--motiva-text-primary);
    overflow-wrap: anywhere;
}

/* ── Institutional strip ─────────────────────────────────── */

.abt-institution[b-0l7iyqaokn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--motiva-space-md);

    margin-block-start: var(--motiva-space-lg);
    padding-block-start: var(--motiva-space-md);
    border-block-start: 1px solid var(--motiva-border-subtle);
}

/* The two marks, paired on one line with a hairline between them so
   they read as one institutional lockup rather than two logos that
   happen to be adjacent. */
.abt-marks[b-0l7iyqaokn] {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    flex: 1 1 auto;
}

/* THE SHARED CONTRACT: fit inside the box, keep your own ratio.
   `width: auto` plus a height box means neither file is stretched on
   both axes; object-fit: contain guarantees it even if a box is ever
   mis-sized. */
.abt-mark[b-0l7iyqaokn] {
    width: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    flex: 0 0 auto;
}

/* THE TWO HEIGHTS ARE DIFFERENT ON PURPOSE — they are what makes the
   marks look the same size.

   Each PNG bakes in its own generous margin, and not the same amount:
   the faculty artwork occupies roughly 42% of its file's height, the
   HIT artwork roughly 36% of its own. Giving both boxes one height
   would therefore render the HIT mark visibly smaller than the
   faculty one. These two values are tuned so the INK matches, which
   is the only balance a reader can see. */
.abt-mark-faculty[b-0l7iyqaokn] { height: 72px; max-width: 260px; }
.abt-mark-hit[b-0l7iyqaokn]     { height: 82px; max-width: 185px; }

.abt-marks-rule[b-0l7iyqaokn] {
    width: 1px;
    height: 30px;
    flex: 0 0 auto;
    background: var(--motiva-border-subtle);
}

/* The link reads as a link — brand ink, an arrow that leaves the
   page — and now sits ON the institutional strip rather than
   stranded under it. A soft brand chip at rest, not a plain purple
   sentence, so it feels part of the block it belongs to. */
.abt-link[b-0l7iyqaokn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;

    padding: 8px 12px;
    border-radius: var(--motiva-radius-full);
    background: rgba(79, 70, 229, 0.06);

    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.3;
    color: var(--motiva-color-violet);
    text-decoration: none;

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

.abt-link:hover[b-0l7iyqaokn] { background: rgba(79, 70, 229, 0.12); }

.abt-link:focus-visible[b-0l7iyqaokn] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

/* The external-link arrow is drawn for LTR. The page sets CSS
   `direction`, so it is mirrored to point away from the reading
   edge rather than back into the text. */
.abt-link-ico[b-0l7iyqaokn] {
    flex: 0 0 auto;
    opacity: 0.85;
    transform: scaleX(-1);
}

@media (prefers-reduced-motion: reduce) {
    .abt-link[b-0l7iyqaokn] { transition: none; }
}

/* Announced, never shown — "opens in a new window" belongs to
   screen readers, not to the visual line. */
.abt-sr[b-0l7iyqaokn] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Narrow ──────────────────────────────────────────────── */

@media (max-width: 620px) {
    /* One column: two credit values side by side at this width each
       wrap to three lines, which is taller than stacking them. */
    .abt-credits[b-0l7iyqaokn] {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--motiva-space-md);
    }

    /* Marks above, link below, everything centred — the strip has no
       room to sit side by side on a phone. */
    .abt-institution[b-0l7iyqaokn] {
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }

    .abt-marks[b-0l7iyqaokn] { justify-content: center; gap: 14px; }

    .abt-mark-faculty[b-0l7iyqaokn] { height: 46px; max-width: 170px; }
    .abt-mark-hit[b-0l7iyqaokn]     { height: 52px; max-width: 118px; }

    .abt-link[b-0l7iyqaokn] { width: auto; }
}
/* /Shared/AppFooter.razor.rz.scp.css */
/* ============================================================
   AppFooter — "MOTIVA · אודות"

   The quietest row in the product. It appears on every
   authenticated screen, so its whole job is to be findable and
   otherwise invisible: muted ink, caption size, no rule above it,
   no background of its own.

   NO TOP BORDER on purpose. Both shells already end in a surface
   edge, and a hairline spanning the viewport under every page
   would read as a second chrome the design does not have.

   direction: rtl is inherited from the shell.
   ============================================================ */

.app-footer[b-h8alrdhvek] {
    flex: 0 0 auto;          /* never absorbs the space .app-content wants */
    display: flex;
    justify-content: center;

    padding-block: 14px 4px;
    /* Nothing horizontal: the shells own their own insets, and the
       line is centred anyway. */
}

.app-footer-line[b-h8alrdhvek] {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    font-size: var(--motiva-font-size-caption, 12px);
    line-height: 1;
    color: var(--motiva-text-muted, #94a3b8);
}

/* The wordmark as text, at the footer's own size — not the logo
   image. A second rendering of the mark on every page would
   compete with the one in the top bar. */
.app-footer-brand[b-h8alrdhvek] {
    font-weight: var(--motiva-font-weight-semibold, 600);
    letter-spacing: 0.4px;
}

.app-footer-sep[b-h8alrdhvek] { opacity: 0.55; }

/* A real <button> — it opens a dialog, it does not navigate, so it
   must not be an <a href="#">. Reset to look like the text beside
   it and lifted to reading ink on hover, which is the same feedback
   every other quiet control in this product gives. */
.app-footer-about[b-h8alrdhvek] {
    padding: 2px 4px;
    margin: -2px -4px;

    border: 0;
    border-radius: var(--motiva-radius-sm, 8px);
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;

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

.app-footer-about:hover[b-h8alrdhvek] {
    color: var(--motiva-text-primary, #1b1a22);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.app-footer-about:focus-visible[b-h8alrdhvek] {
    outline: 2px solid var(--motiva-color-focus-ring, #4F46E5);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .app-footer-about[b-h8alrdhvek] { transition: none; }
}
/* /Shared/AppLayout.razor.rz.scp.css */
/* =========================================================
   AppLayout — Scoped styles
   Outer shell: page background + sidebar + main content area.
   Padding around all elements creates the "floating panel" feel
   where the sidebar and content appear lifted above the background.
   ========================================================= */

.app-shell[b-rcijt7zwd4] {
    display: flex;
    min-height: 100vh;
    background-color: var(--g-bg-page);
    direction: rtl;
    font-family: var(--g-font-base);
    padding: var(--g-shell-padding);
    gap: var(--g-shell-padding);
    box-sizing: border-box;
}

/* Wrapper column: top bar sits above the scrollable page area */
.app-main[b-rcijt7zwd4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-content[b-rcijt7zwd4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* No background here — individual page sections own their own surfaces */
}

/* =========================================================
   MOTIVA SYSTEM MASTER — student shell content boundary

   The Master: "main content is fluid full-bleed, 40px side padding
   and 60px bottom padding — no centered max-width column inside the
   app shell ... the ambient header and everything below it share the
   same left/right boundaries."

   Everything else the Master specifies about the shell (248px sidebar,
   zero outer padding/gap, full-height non-floating sidebar) is already
   handled by the --g-sidebar-width / --g-shell-padding overrides in
   motiva-tokens.css's .motiva block — the rules above and in
   AppSideNav.razor.css read those tokens already, so no rule needed
   changing for it.

   WHY .app-main AND NOT .app-content
   ----------------------------------
   AppTopBar and the page body are siblings inside .app-main. Padding
   the shared parent keeps them on ONE left/right boundary, which is
   what preserves the existing .atb-dash-merge <-> .sdh-hero alignment
   on /dashboard. Padding .app-content alone would inset the page body
   by 40px while leaving the bar full-bleed, visibly breaking that
   merge — a Dashboard regression this phase must not cause.

   INTERIM, BY DESIGN: the Master actually gives each SECTION its own
   40px inset so an ambient page header's background can bleed to the
   shell edge. That needs real page headers, which is Phase 3/4 work.
   Until then this reproduces the Master's content boundaries exactly
   without touching a single page.
   ========================================================= */

.motiva .app-main[b-rcijt7zwd4] {
    padding-inline:     var(--motiva-content-padding-inline);
    padding-block-end:  var(--motiva-content-padding-block-end);
}

/* =========================================================
   THE FINALIZED STUDENT SHELL

   Full-viewport, no outer frame. The reference draws every screen
   inside a centred rounded canvas card on a darker page; that frame
   is the one intentional deviation and is not reproduced here.

   So the canvas's soft wash — the three radials over the
   #F7F7FB→#F3F4F9 vertical gradient — becomes the PAGE background,
   and nothing else paints a surface behind the workspace. There is
   no max-width, no outer radius, no outer shadow, and no second
   background ringing the app.

   Only `.app-shell-student` carries these rules, and only AppLayout's
   student branch renders that class — the sidebar shell above is
   untouched for every other role.
   ========================================================= */

.app-shell-student[b-rcijt7zwd4] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    /* One surface for the whole viewport. `fixed` keeps the wash still
       while the page scrolls, which is what stops the radials sliding
       out of frame on a long dashboard. */
    background: var(--motiva-gradient-canvas);
    background-attachment: fixed;
    padding: var(--motiva-canvas-padding-block-start)
             var(--motiva-canvas-padding-inline)
             var(--motiva-canvas-padding-block-end);
    box-sizing: border-box;
}

.app-shell-student .app-content[b-rcijt7zwd4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* The shell owns the content inset now, so the `.motiva` rule that padded
   .app-main must not also apply — it never can, because the student branch
   renders no .app-main at all. Stated here so the next reader does not go
   looking for a conflict that cannot occur. */

@media (max-width: 700px) {
    .app-shell-student[b-rcijt7zwd4] { padding-inline: 16px; }
}
/* /Shared/AppSideNav.razor.rz.scp.css */
/* =========================================================
   AppSideNav — Scoped styles
   Floating sidebar panel that matches the Gradify design system.
   Font: Assistant. Type scale from gradify-theme.css tokens.

   NOTE ON ::deep
   NavLink is a child Blazor component — its rendered <a> does NOT
   receive the parent's CSS scope attribute automatically.
   All selectors that target NavLink output (snav-item and its
   children/states) must use ::deep so Blazor compiles them as:
       [b-xxxxxxxx] .snav-item { ... }
   rather than:
       .snav-item[b-xxxxxxxx] { ... }
   The former matches descendants of scoped parent elements; the
   latter requires the attribute to sit on the element itself.
   ========================================================= */

/* =====================================================
   OUTER WRAPPER
   Reserves sidebar width in the flex row.
   ===================================================== */

.sidenav-wrapper[b-cbfgbatv2r] {
    width: var(--g-sidebar-width);       /* 280px */
    min-width: var(--g-sidebar-width);
    display: flex;
    flex-direction: column;
}

/* =====================================================
   FLOATING PANEL
   The visible white card that sits above the page background.
   Large border-radius + shadow creates the "floating" look.
   ===================================================== */

.sidenav-panel[b-cbfgbatv2r] {
    background: var(--g-bg-surface);
    border-radius: 22px;
    box-shadow: var(--g-shadow-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* Sticky: stays in view while main content scrolls.
       top = shell padding so it never overlaps the outer gap. */
    position: sticky;
    top: var(--g-shell-padding);                /* 16px */
    height: calc(100vh - (var(--g-shell-padding) * 2)); /* 100vh - 32px */
    overflow-y: auto;
    scrollbar-width: none;                       /* Firefox */
}

.sidenav-panel[b-cbfgbatv2r]::-webkit-scrollbar {
    display: none;                               /* Chrome / Safari */
}

/* =====================================================
   USER HEADER
   Avatar + name + role + bell. Bottom border separates
   the user info from the navigation items.
   ===================================================== */

.snav-header[b-cbfgbatv2r] {
    padding: 20px 16px 18px;
    border-bottom: 1px solid var(--g-border-light);
    flex-shrink: 0;
}

.snav-user-row[b-cbfgbatv2r] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* =====================================================
   HEADER ACTION BUTTONS (settings + bell)
   Grouped at the end of the user row.
   ===================================================== */

.snav-header-actions[b-cbfgbatv2r] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    align-self: flex-start;
    padding-top: 4px;
}

/* Mode-switch row — appears only for dual-role users; sits between the
   user header and the main nav so it's always visible. */
.snav-mode-row[b-cbfgbatv2r] {
    padding: 8px 12px 0;
}

/* Settings icon — NavLink renders an <a>, so ::deep is required */
[b-cbfgbatv2r] .snav-action-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--g-radius-sm);
    background: var(--g-bg-input);
    color: var(--g-text-muted);
    border: 1px solid var(--g-border-light);
    text-decoration: none;
    cursor: pointer;
    font-size: var(--motiva-font-size-control, 14px);
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

[b-cbfgbatv2r] .snav-action-btn:hover {
    background: var(--g-bg-hover);
    color: var(--g-accent);
    text-decoration: none;
}

[b-cbfgbatv2r] .snav-action-btn.active {
    background: var(--g-accent-active-bg);
    color: var(--g-accent);
    border-color: transparent;
}

.snav-avatar[b-cbfgbatv2r] {
    width: 52px;
    height: 52px;
    border-radius: var(--g-radius-full);
    background: linear-gradient(135deg, var(--g-accent) 0%, #8b5cf6 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--g-font-base);
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}

.snav-user-text[b-cbfgbatv2r] {
    flex: 1;
    min-width: 0;
}

.snav-user-name[b-cbfgbatv2r] {
    font-family: var(--g-font-base);
    font-size: var(--g-type-body);              /* 20px */
    font-weight: 700;
    color: var(--g-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.snav-user-role[b-cbfgbatv2r] {
    font-family: var(--g-font-base);
    font-size: var(--g-type-secondary);         /* 16px */
    font-weight: 400;
    color: var(--g-text-muted);
    margin-top: 5px;
    line-height: 1.2;
}

.snav-project-info[b-cbfgbatv2r] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--g-border-light);
}

/* Team identifier line + the "פרטי צוות" info-popover trigger.
   Flex row keeps them on one line; gap separates them. RTL is inherited
   from the parent layout, so source order [identifier, button] places
   the button on the LEFT visually. */
.snav-project-number-row[b-cbfgbatv2r] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.snav-project-number[b-cbfgbatv2r] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: 700;
    color: var(--g-accent);
    line-height: 1.3;
}

.snav-team-info-btn[b-cbfgbatv2r] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid var(--g-accent);
    background: var(--g-accent);
    color: #ffffff;
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(124, 58, 237, 0.30);
    transition: background 0.12s, transform 0.06s, box-shadow 0.12s;
    white-space: nowrap;
}

.snav-team-info-btn .oi[b-cbfgbatv2r] {
    font-size: 9px;
    line-height: 1;
}

.snav-team-info-btn-label[b-cbfgbatv2r] {
    font-family: inherit;
}

.snav-team-info-btn:hover[b-cbfgbatv2r] {
    background: var(--g-accent-strong, #6d28d9);
    border-color: var(--g-accent-strong, #6d28d9);
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.40);
}

.snav-team-info-btn:active[b-cbfgbatv2r] { transform: scale(0.96); }

.snav-team-info-btn:focus-visible[b-cbfgbatv2r] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.35);
}

.snav-project-number .oi[b-cbfgbatv2r] {
    font-size: 11px;
    flex-shrink: 0;
}

/* Project title is the primary identifier the user reads at a glance,
   so it gets stronger visual weight than the "צוות N" line above it.
   Allows up to two lines so long Hebrew names are not chopped. */
.snav-project-title[b-cbfgbatv2r] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: 600;
    color: var(--g-text-primary);
    margin-top: 3px;
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Bell button — styles live in NotificationBell.razor.css */

/* =====================================================
   NAV SECTIONS
   Group 1 (project nav) grows to fill space.
   Group 2 (system nav) stays at the bottom.
   Both have identical horizontal padding so icons align.
   ===================================================== */

.snav-section[b-cbfgbatv2r] {
    padding: 24px 12px 12px;
}

.snav-section-main[b-cbfgbatv2r] {
}

.snav-section-main[b-cbfgbatv2r] {
    flex: 1;
}

.snav-section-bottom[b-cbfgbatv2r] {
    padding-top: 8px;
    padding-bottom: 0;
    flex-shrink: 0;
}

.snav-section-logout[b-cbfgbatv2r] {
    padding: 4px 12px 24px;
    flex-shrink: 0;
}

/* =====================================================
   DIVIDER — separates the two nav groups
   Has vertical breathing room on both sides.
   ===================================================== */

.snav-divider[b-cbfgbatv2r] {
    height: 1px;
    background: var(--g-border);
    margin: 18px 20px;
    flex-shrink: 0;
}

/* =====================================================
   NAV ITEMS  (::deep — targets NavLink-rendered <a>)
   Fixed height keeps every row identical.
   The page has direction: rtl globally, so a normal flex
   row already flows right → left: first child (icon) on
   the RIGHT, second child (label) to its left.
   ===================================================== */

[b-cbfgbatv2r] .snav-item {
    display: flex;
    flex-direction: row;                         /* direction: rtl (inherited) puts first child on RIGHT */
    align-items: center;
    gap: 14px;

    height: var(--g-nav-item-height);           /* 48px */
    padding: 0 16px;

    border-radius: var(--g-radius-sm);           /* 8px */
    color: var(--g-text-secondary);
    text-decoration: none;

    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-h3, 18px);
    font-weight: 500;

    transition: background 0.15s ease, color 0.15s ease;
    margin-bottom: 10px;
    cursor: pointer;
    user-select: none;
}

/* Cover every pseudo-class state Bootstrap or the UA might target */
[b-cbfgbatv2r] .snav-item:link,
[b-cbfgbatv2r] .snav-item:visited {
    color: var(--g-text-secondary);
    text-decoration: none;
}

[b-cbfgbatv2r] .snav-item:hover,
[b-cbfgbatv2r] .snav-item:focus,
[b-cbfgbatv2r] .snav-item:active {
    text-decoration: none;
}

[b-cbfgbatv2r] .snav-item:hover {
    background: var(--g-bg-hover);
    color: var(--g-text-primary);
}

/* =====================================================
   ACTIVE STATE  (::deep — NavLink adds .active on <a>)
   Light indigo block — NOT dark fill.
   ===================================================== */

[b-cbfgbatv2r] .snav-item.active {
    background: var(--g-accent-active-bg);      /* #d4d8fa — semi-transparent indigo */
    color: var(--g-accent);
    font-weight: 700;
    border-radius: var(--g-radius-sm);
}

[b-cbfgbatv2r] .snav-item.active:hover {
    background: #c7ccf7;
    color: var(--g-accent-hover);
}

/* =====================================================
   ICON SLOT  (::deep — inside NavLink-rendered <a>)
   ===================================================== */

[b-cbfgbatv2r] .snav-item .snav-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: inherit;
}

[b-cbfgbatv2r] .snav-item.active .snav-icon {
    color: var(--g-accent);
}

/* =====================================================
   LABEL  (::deep — inside NavLink-rendered <a>)
   ===================================================== */

[b-cbfgbatv2r] .snav-item .snav-label {
    flex: 1;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

/* =====================================================
   LOGOUT BUTTON
   Visually identical to snav-item in its normal state.
   Full browser/Bootstrap reset so no default border,
   outline, or background bleeds through.
   Turns soft-red on hover to signal a destructive action.
   Not a NavLink so never gets .active class.
   ===================================================== */

.snav-logout-btn[b-cbfgbatv2r] {
    /* Layout — mirrors snav-item exactly */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    width: 100%;
    height: var(--g-nav-item-height);
    padding: 0 16px;
    margin-bottom: 0;

    /* Reset ALL browser & Bootstrap button defaults */
    -webkit-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
    text-align: right;

    /* Typography — mirrors snav-item */
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-h3, 18px);
    font-weight: 500;
    color: var(--g-text-secondary);
    text-decoration: none;

    /* Shape */
    border-radius: var(--g-radius-sm);
    cursor: pointer;
    user-select: none;

    transition: background 0.15s ease, color 0.15s ease;
}

.snav-logout-btn:focus[b-cbfgbatv2r],
.snav-logout-btn:focus-visible[b-cbfgbatv2r] {
    outline: none;
    box-shadow: none;
}

.snav-logout-btn:hover[b-cbfgbatv2r] {
    background: #fef2f2;
    color: var(--g-danger);
}

.snav-logout-btn .snav-icon[b-cbfgbatv2r] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: inherit;
}

.snav-logout-btn .snav-label[b-cbfgbatv2r] {
    flex: 1;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =====================================================
   PROJECT STATUS WIDGET
   Sits between the main nav and logout for students.
   Soft card — 2-3 rotating content cards + dot nav.
   ===================================================== */

.snav-widget[b-cbfgbatv2r] {
    margin: 0 12px;
    background: var(--g-bg-input);
    border-radius: var(--g-radius-sm);
    border: 1px solid var(--g-border-light);
    padding: 14px 16px 10px;
    flex-shrink: 0;
}

/* ── Card body ──────────────────────────────────────── */

.snav-wcard-label[b-cbfgbatv2r] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-caption, 10px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--g-text-muted);
    margin-bottom: 7px;
}

.snav-wcard-value[b-cbfgbatv2r] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: 600;
    color: var(--g-text-primary);
    line-height: 1.35;
    margin-bottom: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.snav-wcard-empty[b-cbfgbatv2r] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-caption, 12px);
    color: var(--g-text-muted);
    font-style: italic;
}

.snav-wcard-meta[b-cbfgbatv2r] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.snav-wcard-due[b-cbfgbatv2r] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-caption, 11px);
    color: var(--g-text-muted);
}

.snav-wcard-due .oi[b-cbfgbatv2r] {
    font-size: 10px;
}

/* ── Milestone status badge (inside widget) ─────────── */

.snav-ms-badge[b-cbfgbatv2r] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-caption, 10px);
    font-weight: 600;
}

.snav-ms-inprogress[b-cbfgbatv2r] {
    background: #dbeafe;
    color: #1d4ed8;
}

.snav-ms-delayed[b-cbfgbatv2r] {
    background: #fee2e2;
    color: #b91c1c;
}

.snav-ms-completed[b-cbfgbatv2r] {
    background: #dcfce7;
    color: #15803d;
}

.snav-ms-notstarted[b-cbfgbatv2r] {
    background: var(--g-bg-hover);
    color: var(--g-text-muted);
}

/* ── Progress card ──────────────────────────────────── */

.snav-progress-row[b-cbfgbatv2r] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.snav-progress-track[b-cbfgbatv2r] {
    flex: 1;
    height: 6px;
    background: var(--g-bg-surface);
    border-radius: var(--g-radius-full);
    overflow: hidden;
    border: 1px solid var(--g-border-light);
}

.snav-progress-fill[b-cbfgbatv2r] {
    height: 100%;
    background: var(--g-accent);
    border-radius: var(--g-radius-full);
    transition: width 0.35s ease;
    min-width: 4px;
}

.snav-progress-pct[b-cbfgbatv2r] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 700;
    color: var(--g-accent);
    flex-shrink: 0;
    min-width: 28px;
    text-align: start;
}

.snav-progress-detail[b-cbfgbatv2r] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-caption, 11px);
    color: var(--g-text-muted);
}

.snav-detail-icon[b-cbfgbatv2r] {
    font-size: 10px;
    margin-left: 3px;
}

/* ── Dot indicator ──────────────────────────────────── */

.snav-widget-dots[b-cbfgbatv2r] {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--g-border-light);
}

.snav-dot[b-cbfgbatv2r] {
    width: 6px;
    height: 6px;
    border-radius: var(--g-radius-full);
    background: var(--g-border);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    flex-shrink: 0;
}

.snav-dot:hover[b-cbfgbatv2r] {
    background: var(--g-text-muted);
}

.snav-dot-active[b-cbfgbatv2r] {
    background: var(--g-accent);
    transform: scale(1.4);
}

/* =====================================================
   LOGO AREA
   Top of sidebar.
   ===================================================== */

.snav-logo[b-cbfgbatv2r] {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--g-border-light);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    min-height: 56px;   /* stable height so the logo image never shifts nav items */
}

.snav-logo-img[b-cbfgbatv2r] {
    height: 28px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* =====================================================
   PROJECT WORKSPACE HEADER (students only)
   Shows team name + project name instead of user identity,
   because the user's name is already in the top app bar
   and in the profile footer at the bottom of the sidebar.
   ===================================================== */

/* ── Project section ─────────────────────────────────────────
   "הפרויקט שלי" over the project's own name, which is the entry point to
   מרחב הפרויקט (/project).

   NO CONTAINER, NO CARET. The name is not dressed as a form control; it is
   made to read as interactive the way a link does — accent ink at a heavier
   weight than anything around it, a hit area padded well past the glyphs, a
   fill on hover, and a hint that appears with it. A bordered box read as an
   input, and a caret promised a menu.

   The "צוות N" label that used to sit above this was removed — it named the
   same thing twice, and the team is already named on the workspace page.

   Geometry only here; the accent, wash and motion live in the .snav-motiva
   block further down, so this stays a student-only treatment even though the
   block only renders for students today. */

/* The project row's own padding. It mirrors the profile footer directly below
   it — same inline inset, same icon-then-two-lines shape — so the two context
   rows at the foot of the rail read as one band with two levels. */
.snav-project[b-cbfgbatv2r] {
    padding: 10px 16px 4px;
    flex-shrink: 0;
}

/* Icon + text, laid out exactly like the profile row's avatar + text. No
   border, no fill, no caret at rest: this is context, not a control panel. */
.snav-project-link[b-cbfgbatv2r] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--g-radius-sm);
    text-decoration: none;
    cursor: pointer;
}

.snav-project-icon[b-cbfgbatv2r] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: var(--g-text-muted);
}

.snav-project-icon svg[b-cbfgbatv2r] {
    display: block;
}

.snav-project-text[b-cbfgbatv2r] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* The project's name is the row's primary information — one step heavier and
   larger than the line under it, and clamped rather than truncated so a long
   name stays readable. */
.snav-project-name[b-cbfgbatv2r] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* Where the row goes. Deliberately the quieter half — it names the
   destination, it is not the thing you are looking for. */
.snav-project-sub[b-cbfgbatv2r] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: 500;
    line-height: 1.3;
    margin-block-start: 2px;
    color: var(--g-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The break between the navigation and the project context. The separation is
   carried by the space around it; the hairline only marks where it falls. The
   second break — project to profile — is the profile footer's own border-top,
   which was already there. */
.snav-project-divider[b-cbfgbatv2r] {
    height: 1px;
    background: var(--g-border-light);
    margin: 14px 20px 0;
    flex-shrink: 0;
}

/* =====================================================
   PROFILE FOOTER
   Compact user identity + quick profile link + logout.
   Replaces the old project-status widget + logout row.
   ===================================================== */

.snav-profile-footer[b-cbfgbatv2r] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--g-border-light);
    flex-shrink: 0;
}

.snav-profile-link[b-cbfgbatv2r] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    border-radius: var(--g-radius-sm);
    padding: 6px 8px;
    transition: background 0.15s;
}

.snav-profile-link:hover[b-cbfgbatv2r] {
    background: var(--g-bg-hover);
    text-decoration: none;
}

.snav-profile-avatar[b-cbfgbatv2r] {
    width: 36px;
    height: 36px;
    border-radius: var(--g-radius-full);
    background: linear-gradient(135deg, var(--g-accent) 0%, #8b5cf6 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--g-font-base);
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}

.snav-profile-text[b-cbfgbatv2r] {
    flex: 1;
    min-width: 0;
}

.snav-profile-name[b-cbfgbatv2r] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-body, 14px);
    font-weight: 600;
    color: var(--g-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.snav-profile-action[b-cbfgbatv2r] {
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-caption, 12px);
    color: var(--g-accent);
    margin-top: 1px;
    line-height: 1.2;
}

.snav-logout-icon-btn[b-cbfgbatv2r] {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--g-radius-sm);
    border: 1px solid var(--g-border-light);
    background: transparent;
    color: var(--g-text-muted);
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.snav-logout-icon-btn:hover[b-cbfgbatv2r] {
    background: #fef2f2;
    color: var(--g-danger);
    border-color: var(--g-danger);
}

.snav-logout-icon-btn:focus[b-cbfgbatv2r],
.snav-logout-icon-btn:focus-visible[b-cbfgbatv2r] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* =====================================================
   MOTIVA VISUAL LANGUAGE — override layer

   Everything above this point is untouched legacy styling and
   still governs the Lecturer / Staff / Admin nav exactly as
   before. These rules apply only when the root carries
   .snav-motiva (see AppSideNav.razor's IsMotivaNav gate), and
   bring the sidebar onto the same token language as the
   dashboard Hero: Motiva type scale, motion tokens, a soft
   brand-tinted active state instead of a filled block, and
   hierarchy expressed through spacing/rhythm rather than only
   the divider line. Layout dimensions (heights, icon slot) are
   preserved so nothing reflows.

   SHARED BY STUDENT AND MENTOR (Epic 1). This layer was
   originally gated on IsStudentNav. Nothing in it was ever
   student-SPECIFIC — it is the rail's visual language, and both
   Motiva experiences speak it. The handful of rules below that
   do describe single-project student furniture
   (.snav-project-*) stay here rather than moving to a
   student-only selector, because the ELEMENTS they style are
   rendered only for students; the mentor rail never emits them,
   so the rules can never reach it.
   ===================================================== */

.snav-motiva .snav-divider[b-cbfgbatv2r] {
    background: var(--motiva-border-subtle);
    margin: var(--motiva-space-lg) 20px;
}

.snav-motiva .snav-section[b-cbfgbatv2r] {
    padding: var(--motiva-space-xl) 12px 12px;
}

.snav-motiva .snav-section-bottom[b-cbfgbatv2r] {
    padding-top: var(--motiva-space-md);
}

/* ── Nav items: type scale, spacing rhythm, motion tokens ── */

/* Master ".navi": 14px/500, --ink-3 label, 10px radius, 10px gap.
   The item's 48px fixed height is left alone — it is layout, not
   typography, and changing it would reflow the whole rail. */
.snav-motiva[b-cbfgbatv2r]  .snav-item {
    position: relative;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-item);
    font-weight: var(--motiva-font-weight-medium);
    color: var(--motiva-text-muted);
    gap: var(--motiva-space-sm);
    padding-inline: var(--motiva-space-md);
    border-radius: var(--motiva-radius-sm);
    margin-bottom: var(--motiva-space-xs);
    transition: background var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard),
                color var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard),
                box-shadow var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard);
}

.snav-motiva[b-cbfgbatv2r]  .snav-item:link,
.snav-motiva[b-cbfgbatv2r]  .snav-item:visited {
    color: var(--motiva-text-muted);
}

.snav-motiva[b-cbfgbatv2r]  .snav-item:hover {
    background: var(--motiva-surface-hover);
    color: var(--motiva-text-primary);
}

.snav-motiva[b-cbfgbatv2r]  .snav-item:focus-visible {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

/* Active: the System Master's Ambient gradient wash as a soft fill —
   a 92deg violet>transparent>teal sweep at low alpha, ink-colored
   label at semibold. The Master shows no accent bar and no elevation
   on the active item, so the previous 3px signature bar and shadow
   are removed rather than restyled. */
.snav-motiva[b-cbfgbatv2r]  .snav-item.active {
    background: var(--motiva-gradient-wash);
    color: var(--motiva-text-primary);
    font-weight: var(--motiva-font-weight-semibold);
    box-shadow: none;
}

.snav-motiva[b-cbfgbatv2r]  .snav-item.active::before {
    content: none;
}

.snav-motiva[b-cbfgbatv2r]  .snav-item.active:hover {
    background: var(--motiva-gradient-wash);
    color: var(--motiva-text-primary);
}

/* ── Icons: unified sizing, tied to the label via shared motion ── */

.snav-motiva[b-cbfgbatv2r]  .snav-item .snav-icon {
    width: 20px;
    height: 20px;
    font-size: 14px;
    transition: color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

/* The stroked student icons (see NavIcons). The slot geometry above is
   unchanged, so nothing reflows; this only guarantees the drawing fills it
   consistently. Every dimension that could make one glyph look heavier than
   another — box, stroke, colour — is set once on the slot and the svg, never
   per icon. */
.snav-motiva[b-cbfgbatv2r]  .snav-item .snav-icon-svg svg {
    display: block;
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.snav-motiva[b-cbfgbatv2r]  .snav-item.active .snav-icon {
    color: var(--motiva-text-primary);
}

/* ── Footer controls: same motion/focus language as nav items ── */

.snav-motiva .snav-profile-link[b-cbfgbatv2r] {
    transition: background var(--motiva-motion-duration-standard) var(--motiva-motion-easing-standard);
}

.snav-motiva .snav-profile-link:focus-visible[b-cbfgbatv2r] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

.snav-motiva .snav-logout-icon-btn[b-cbfgbatv2r],
.snav-motiva[b-cbfgbatv2r]  .snav-action-btn {
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                border-color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.snav-motiva .snav-logout-icon-btn:focus-visible[b-cbfgbatv2r] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
    box-shadow: none;
}

/* ── Panel surface: the System Master's sidebar is a FLAT WHITE RAIL,
   not a floating card and not an ambient-gradient surface — plain
   #fff, no radius, no shadow, and exactly one hairline on its
   reading-end edge separating it from the paper canvas.

   This replaces the previous ambient-gradient/radius/shadow treatment
   outright. The width (280 -> 248px) and the removal of the outer
   floating gap come for free from the --g-sidebar-width and
   --g-shell-padding overrides in motiva-tokens.css's .motiva
   block: the base rules above already read both tokens, including
   `top: var(--g-shell-padding)` and
   `height: calc(100vh - (var(--g-shell-padding) * 2))`, which now
   resolve to 0 and a true full-viewport rail.

   Base .snav-section-main's flex: 1 still pushes the profile footer
   to the bottom edge, and base overflow-y: auto remains the fallback
   for viewports too short to fit everything. ── */

.snav-motiva .sidenav-panel[b-cbfgbatv2r] {
    background: var(--motiva-surface-primary);
    border: 0;
    border-inline-end: 1px solid var(--motiva-border-strong);
    border-radius: 0;
    box-shadow: none;
}

/* ── Internal borders: the Master's sidebar has no rule under the
   wordmark and none under the project line — the only divider in the
   whole rail is the one above the profile footer, which the base
   .snav-profile-footer rule already provides. The unconditional
   .snav-divider is redundant against that footer border here (students
   have no bottom nav group), so it is hidden rather than restyled. ── */

/* The divider IS a 1px element, so `background` paints its hairline. The logo
   header is a CONTAINER — the same declaration there floods the whole brand
   block with the line colour, which is what it used to do. Its rule below the
   line ramp belongs on the border, never on the surface: the header merges
   into the flat white rail with nothing drawn behind the wordmark. */
.snav-motiva .snav-project-divider[b-cbfgbatv2r] {
    background: var(--motiva-border-subtle);
}

.snav-motiva .snav-logo[b-cbfgbatv2r] {
    background: transparent;
    border-bottom-color: var(--motiva-border-subtle);
}

.snav-motiva .snav-project-name[b-cbfgbatv2r] {
    font-family: var(--motiva-font-family);
}

.snav-motiva .snav-project-sub[b-cbfgbatv2r] {
    font-family: var(--motiva-font-family);
    color: var(--motiva-text-muted);
}

/* ── Mentor context line: "N פרויקטים בהנחיה" ──────────────────
   The design reference's sidebar subtitle, sitting directly under the
   wordmark (Motiva Mentor Calendar.dc.html:34).

   Everything about this rule is chosen so the line cannot be mistaken
   for a navigation item. It has no background, no border, no radius, no
   hover, no transition and no hit area; it is set at the caption step in
   the muted ink, one step quieter than the nav labels above it, which is
   the same weight the rail already gives the profile footer's role line.

   Its inline padding matches .snav-item's 14px so the text starts on the
   rail's own left/right boundary rather than floating between the
   wordmark's 20px and the nav's 14px. Logical properties throughout, so
   it reads from the correct edge under RTL with no extra rule.

   Mentor-only by markup, not by selector: AppSideNav renders the element
   only when the shell is Mentor, so this rule can never reach the
   student rail even though it lives in the shared .snav-motiva layer. ── */

.snav-motiva .snav-mentor-context[b-cbfgbatv2r] {
    padding: var(--motiva-space-sm) 14px 0;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-caption);
    font-weight: var(--motiva-font-weight-medium);
    line-height: var(--motiva-line-height-caption);
    color: var(--motiva-text-muted);
    flex-shrink: 0;
}

/* ── Project name → מרחב הפרויקט ─────────────────────────────
   The same interaction vocabulary the rest of this rail already speaks: the
   accent tint on hover (the nav items' own hover fill) and the violet→teal
   wash when the workspace IS the current page — identical to
   .snav-profile-link-active two blocks below, so the sidebar has exactly one
   way of saying "you are here".

   QUIET AT REST, AMBIENT ON HOVER
   Nothing is drawn around the row at rest — no card, no fill, no border. The
   whole affordance is the padded target and what happens on hover: the
   Master's low-alpha violet→teal ambient wash fills it at the rail's small
   radius, and the project's name warms to the accent. Nothing moves, scales or
   lifts.

   Current page keeps that same wash visible, which is exactly how the active
   nav item and the profile footer already say "you are here" — so the row is
   legible as part of the rail's state language while still reading as the
   bottom context band rather than a sixth nav item. */

.snav-motiva .snav-project-link[b-cbfgbatv2r] {
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.snav-motiva .snav-project-name[b-cbfgbatv2r] {
    color: var(--motiva-text-primary);
    transition: color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.snav-motiva .snav-project-icon[b-cbfgbatv2r] {
    color: var(--motiva-text-muted);
    transition: color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

/* :not(...-active) is load-bearing, exactly as on the profile link below: the
   current-page rule that follows carries the same specificity, so without this
   guard hovering the CURRENT page's row would repaint its wash with the same
   value for no reason — and any future divergence between the two would flip
   the wrong way. */
.snav-motiva .snav-project-link:not(.snav-project-link-active):hover[b-cbfgbatv2r] {
    background: var(--motiva-gradient-wash);
}

.snav-motiva .snav-project-link:hover .snav-project-name[b-cbfgbatv2r],
.snav-motiva .snav-project-link:focus-visible .snav-project-name[b-cbfgbatv2r] {
    color: var(--motiva-color-indigo);
}

.snav-motiva .snav-project-link:hover .snav-project-icon[b-cbfgbatv2r],
.snav-motiva .snav-project-link:focus-visible .snav-project-icon[b-cbfgbatv2r] {
    color: var(--motiva-color-indigo);
}

/* Pressed — one step past hover, so the row acknowledges the click on a route
   change the eye would otherwise miss. */
.snav-motiva .snav-project-link:active[b-cbfgbatv2r] {
    background: var(--g-accent-active-bg);
}

/* Current page: the same low-alpha violet→teal sweep the active nav item and
   the profile footer use, kept visible at rest. */
.snav-motiva .snav-project-link-active[b-cbfgbatv2r] {
    background: var(--motiva-gradient-wash);
}

.snav-motiva .snav-project-link-active .snav-project-name[b-cbfgbatv2r],
.snav-motiva .snav-project-link-active .snav-project-icon[b-cbfgbatv2r] {
    color: var(--motiva-color-indigo);
}

.snav-motiva .snav-project-link:focus-visible[b-cbfgbatv2r] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .snav-motiva .snav-project-link[b-cbfgbatv2r],
    .snav-motiva .snav-project-name[b-cbfgbatv2r],
    .snav-motiva .snav-project-icon[b-cbfgbatv2r] { transition: none; }
}

.snav-motiva .snav-divider[b-cbfgbatv2r] {
    display: none;
}

/* ── Sidebar header row: wordmark at the reading start, notification
   bell at the reading end, per the Master. Logical properties only, so
   RTL keeps the bell on the left edge of the rail as designed. ── */

.snav-motiva .snav-logo[b-cbfgbatv2r] {
    justify-content: space-between;
    gap: var(--motiva-space-sm);
    padding: var(--motiva-space-lg) 14px var(--motiva-space-md);
}

/* ── Relocated NotificationBell.
   Styled from here via ::deep rather than by editing
   NotificationBell.razor.css, so the component keeps its existing
   appearance inside AppTopBar for every other role and its logic is
   untouched. `.snav-motiva ::deep .nbell-*` compiles to
   `.snav-motiva[b-…] .nbell-*` (0,3,0), which outranks the component's
   own `.nbell-*[b-…]` (0,2,0) deterministically — not a bundle-order
   coin flip. ── */

.snav-motiva[b-cbfgbatv2r]  .nbell-btn {
    width: 32px;
    height: 32px;
    background: transparent;
    border: 0;
    border-radius: var(--motiva-radius-sm);
    color: var(--motiva-text-secondary);
}

.snav-motiva[b-cbfgbatv2r]  .nbell-btn:hover {
    background: var(--motiva-surface-hover);
    color: var(--motiva-text-primary);
}

.snav-motiva[b-cbfgbatv2r]  .nbell-btn-active {
    background: var(--motiva-surface-hover);
    color: var(--motiva-text-primary);
    border-color: transparent;
}

/* The Master's audit closed "notification badge color" as FIXED:
   always violet (#4F46E5), never ink and never the danger red this
   badge used. 15px pill, no white ring. Explicitly violet rather than
   --motiva-color-danger, which resolves to rose inside this scope. */
.snav-motiva[b-cbfgbatv2r]  .nbell-badge {
    top: 2px;
    inset-inline-end: 2px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    background: var(--motiva-color-violet);
    border: 0;
    border-radius: var(--motiva-radius-full);
    font-size: var(--motiva-font-size-caption, 9.5px);   /* micro-numeral; below the type scale's floor */
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    box-sizing: border-box;
}

/* The dropdown stays position: fixed (it must escape .sidenav-panel's
   overflow), but its coordinates were derived from the old floating
   shell. Re-anchored under the bell's new home: the rail is flush to
   the viewport edge now that --g-shell-padding is 0, and the bell sits
   ~26px down inside a 32px box, so ~8px below it lands at 66px.
   Physical `right` is deliberate and matches the base rule — in this
   RTL layout the sidebar is the right-hand edge. */
.snav-motiva[b-cbfgbatv2r]  .nbell-panel {
    top: 66px;
    right: 14px;
}

/* ── Profile footer: brand gradient instead of a hardcoded
   purple, and the same indigo used by the active nav item so the
   "current user" affordance reads as one family with navigation
   rather than a bolted-on block. ── */

.snav-motiva .snav-profile-avatar[b-cbfgbatv2r] {
    background: var(--motiva-gradient-signature);
}

/* ── Profile entry: aligned to the finalized Profile screen ──
   The Master's footer row is the Profile entry point itself
   (Motiva Profile.dc.html:80-86). Three things follow from that:
   the sub-line is the student's ROLE, not a "view profile" CTA; a
   gear sits at the row's end; and the whole row carries the ambient
   wash while Profile is the current page.

   All of it is inside .snav-motiva, so Mentor / Lecturer / Admin
   footers keep the indigo "הצג פרופיל" line and no gear. */

/* Master: 13px name over an 11px muted role label (Motiva Profile.dc.html:83).
   The 13px is also what makes the row fit: at the legacy 14px, adding the
   gear leaves 77px for a name that needs 80, so "נועה טננבאום" — a short
   name — ellipsised. */
.snav-motiva .snav-profile-name[b-cbfgbatv2r] {
    font-size: var(--motiva-font-size-sm, 13px);
}

.snav-motiva .snav-profile-action[b-cbfgbatv2r] {
    /* Master: 11px muted role label under the name — a statement of who
       the student is, not an action. The indigo CTA colour would make it
       compete with the active nav item two rows above. */
    font-size: var(--motiva-font-size-caption, 11px);
    color: var(--motiva-text-muted);
}

.snav-motiva .snav-profile-cog[b-cbfgbatv2r] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--g-radius-sm);
    color: var(--motiva-text-muted);
    transition: color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

/* Current page: the Master fills the row with the same low-alpha
   violet->teal sweep it uses for the active nav item, and turns the
   gear violet. */
.snav-motiva .snav-profile-link-active[b-cbfgbatv2r] {
    background: var(--motiva-gradient-wash);
}

.snav-motiva .snav-profile-link-active .snav-profile-cog[b-cbfgbatv2r] {
    color: var(--motiva-color-indigo);
}

/* :not(.snav-profile-link-active) is load-bearing, not decoration: :hover
   adds a class-level weight, so without it this rule outranks the active
   rule above and hovering the CURRENT page's row would fade its gear from
   violet back to grey — the one row that should never de-emphasize. */
.snav-motiva .snav-profile-link:not(.snav-profile-link-active):hover .snav-profile-cog[b-cbfgbatv2r] {
    color: var(--motiva-text-secondary);
}

/* ── Logout: kept, but subordinate ───────────────────────────
   The Master draws no logout control at all, so it cannot be removed
   from the design and re-derived — but a student with no way to sign
   out is a functional regression, so it stays. What changes is weight:
   the boxed, bordered button read as the footer's primary control and
   out-competed the Profile entry beside it. Dropping the border and
   resting fill leaves a quiet glyph that only resolves into a button
   on hover / focus. Behaviour, hit area and the rose destructive
   hover are all unchanged. */

.snav-motiva .snav-logout-icon-btn[b-cbfgbatv2r] {
    border-color: transparent;
    color: var(--motiva-text-subtle);
}

.snav-motiva .snav-logout-icon-btn:hover[b-cbfgbatv2r] {
    background: var(--motiva-color-danger-bg);
    border-color: transparent;
    color: var(--motiva-color-rose);
}
/* /Shared/AppTopBar.razor.rz.scp.css */
/* ============================================================
   AppTopBar — shell-level bar above every page (atb- prefix)
   Height is defined by content + padding (no fixed height).
   ============================================================ */

.atb-bar[b-2lm9q9vuva] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 2px 20px;
    flex-shrink: 0;
}

/* ── Greeting + role ── */

.atb-start[b-2lm9q9vuva] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.atb-greeting[b-2lm9q9vuva] {
    font-size: 30px;
    font-weight: 700;
    color: var(--g-text-primary);
    line-height: 1.2;
}

/* ── Icon buttons ── */

.atb-end[b-2lm9q9vuva] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.atb-icon-btn[b-2lm9q9vuva] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--g-bg-surface);
    border: 1px solid var(--g-border-light);
    border-radius: var(--g-radius-sm);
    color: var(--g-text-secondary);
    cursor: pointer;
    font-size: 14px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.atb-icon-btn:hover[b-2lm9q9vuva] {
    background: var(--g-accent-light);
    color: var(--g-accent);
    border-color: var(--g-accent);
}

/* The student-only /dashboard "ambient merge" treatment was retired in
   Phase 4D. It existed to blend this bar into StudentDashboardHero's own
   ambient panel; Motiva Student Dashboard V4 has no top bar, so the bar is
   now hidden on /dashboard (see BarlessStudentRoutes in AppTopBar.razor)
   and the merge has nothing left to merge with. */
/* /Shared/MainLayout.razor.rz.scp.css */
.content[b-hayi2zqy46] {
    padding: 1rem;
    margin: 0 auto;
    background-color: white;
}

.page[b-hayi2zqy46] {
    background-color: lightgray;
}
/* /Shared/MentorProfileModal.razor.rz.scp.css */
/* ============================================================
   MentorProfileModal — scoped styles
   Prefix: mpm-
   Mirrors the pdc-modal look (centred overlay, RTL card) so the
   read-only mentor popup feels native next to the project details
   modal. All colours / radii / shadows come from gradify-theme tokens.
   ============================================================ */

/* ── Overlay ──────────────────────────────────────────────── */

.mpm-overlay[b-dy4lddtr6l] {
    position:        fixed;
    inset:           0;
    background:      rgba(0, 0, 0, 0.48);
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         var(--motiva-z-overlay); /* 900 — Motiva system token; still above project-details (≤600) */
    padding:         20px;
    animation:       mpm-fade-in-b-dy4lddtr6l 0.15s ease;
    outline:         none;            /* tabindex="-1" focus ring is unwanted */
}

@keyframes mpm-fade-in-b-dy4lddtr6l {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Modal card ───────────────────────────────────────────── */

.mpm-modal[b-dy4lddtr6l] {
    background:     var(--motiva-surface-primary);
    border-radius:  var(--motiva-radius-md);
    box-shadow:     0 20px 60px rgba(0, 0, 0, 0.22);
    width:          100%;
    max-width:      560px;
    max-height:     90vh;
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    direction:      rtl;
    animation:      mpm-slide-in-b-dy4lddtr6l 0.18s ease;
}

@keyframes mpm-slide-in-b-dy4lddtr6l {
    from { transform: translateY(-16px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* ── Header ───────────────────────────────────────────────── */

.mpm-header[b-dy4lddtr6l] {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    padding:         20px 24px 16px;
    border-bottom:   1px solid var(--motiva-border-subtle);
    gap:             12px;
    flex-shrink:     0;
}

.mpm-header-start[b-dy4lddtr6l] {
    display:     flex;
    align-items: center;
    gap:         12px;
    min-width:   0;
}

.mpm-icon[b-dy4lddtr6l] {
    width:           42px;
    height:          42px;
    background:      var(--motiva-color-brand-bg);
    border-radius:   var(--motiva-radius-sm);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--motiva-color-violet, var(--motiva-color-indigo));
    font-size:       18px;
    flex-shrink:     0;
}

.mpm-header-text[b-dy4lddtr6l] { min-width: 0; }

.mpm-eyebrow[b-dy4lddtr6l] {
    font-family:    var(--motiva-font-family);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight:    700;
    color:          var(--motiva-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom:  2px;
}

.mpm-title[b-dy4lddtr6l] {
    font-family: var(--motiva-font-family);
    font-size:   1.1rem;
    font-weight: 700;
    color:       var(--motiva-text-primary);
    margin:      0;
    line-height: 1.3;
    overflow:    hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mpm-close[b-dy4lddtr6l] {
    width:           32px;
    height:          32px;
    border-radius:   var(--motiva-radius-sm);
    background:      none;
    border:          none;
    cursor:          pointer;
    color:           var(--motiva-text-muted);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size: var(--motiva-font-size-sm, 13px);
    flex-shrink:     0;
    transition:      background 0.13s, color 0.13s;
}

.mpm-close:hover[b-dy4lddtr6l] {
    background: var(--motiva-surface-hover);
    color:      var(--motiva-text-primary);
}

/* ── Body ─────────────────────────────────────────────────── */

.mpm-body[b-dy4lddtr6l] {
    padding:    4px 24px 8px;
    overflow-y: auto;
    flex:       1;
}

/* ── Loading / error states ───────────────────────────────── */

.mpm-loading[b-dy4lddtr6l],
.mpm-error[b-dy4lddtr6l] {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    gap:            12px;
    padding:        56px 0;
    color:          var(--motiva-text-muted);
    font-family:    var(--motiva-font-family);
    font-size:      var(--motiva-font-size-caption);
    text-align:     center;
}

.mpm-spinner[b-dy4lddtr6l] {
    width:         30px;
    height:        30px;
    border:        3px solid var(--motiva-border-strong);
    border-top-color: var(--motiva-color-violet, var(--motiva-color-indigo));
    border-radius: 50%;
    animation:     mpm-spin-b-dy4lddtr6l 0.75s linear infinite;
}

@keyframes mpm-spin-b-dy4lddtr6l { to { transform: rotate(360deg); } }

.mpm-error .oi[b-dy4lddtr6l] {
    font-size: 26px;
    color:     var(--motiva-color-rose, var(--motiva-color-danger));
}

.mpm-error p[b-dy4lddtr6l] { margin: 0; max-width: 320px; line-height: 1.6; }

/* ── Sections ─────────────────────────────────────────────── */

.mpm-section[b-dy4lddtr6l] {
    padding:       16px 0;
    border-bottom: 1px solid var(--motiva-border-subtle);
}

.mpm-section:last-child[b-dy4lddtr6l] { border-bottom: none; }

.mpm-section-title[b-dy4lddtr6l] {
    display:        flex;
    align-items:    center;
    gap:            8px;
    font-family:    var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight:    700;
    color:          var(--motiva-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin:         0 0 10px;
}

.mpm-section-title .oi[b-dy4lddtr6l] {
    font-size: 13px;
    color:     var(--motiva-color-violet, var(--motiva-color-indigo));
}

.mpm-section-text[b-dy4lddtr6l] {
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-body, 14px);
    color:       var(--motiva-text-secondary);
    line-height: 1.7;
    margin:      0;
    white-space: pre-line;
}

/* ── Detail grid (key/value rows) ─────────────────────────── */

.mpm-detail-grid[b-dy4lddtr6l] {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.mpm-detail-row[b-dy4lddtr6l] {
    display:     flex;
    gap:         12px;
    align-items: baseline;
}

.mpm-detail-label[b-dy4lddtr6l] {
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 600;
    color:       var(--motiva-text-muted);
    white-space: nowrap;
    min-width:   100px;
    flex-shrink: 0;
}

.mpm-detail-value[b-dy4lddtr6l] {
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-body, 14px);
    color:       var(--motiva-text-primary);
    word-break:  break-word;
}

.mpm-muted[b-dy4lddtr6l] { color: var(--motiva-text-muted); }

/* ── Sub-blocks (used inside the expectations section) ────── */

.mpm-block[b-dy4lddtr6l] { margin-top: 8px; }
.mpm-block:first-child[b-dy4lddtr6l] { margin-top: 0; }

.mpm-block-label[b-dy4lddtr6l] {
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 600;
    color:       var(--motiva-text-muted);
    margin-bottom: 4px;
}

/* ── Chip list (focus-area tokens) ────────────────────────── */

.mpm-chips[b-dy4lddtr6l] {
    display:   flex;
    flex-wrap: wrap;
    gap:       6px;
}

/* Default tag: white paper under the Motiva gradient edge, dark ink.
   `--motiva-tag-brand-surface`, the product's one tag recipe. The edge is
   paid for out of the padding so the pill's outer box does not move. */
.mpm-chip[b-dy4lddtr6l] {
    display:       inline-block;
    background:    var(--motiva-tag-brand-surface);
    color:         var(--motiva-text-primary);
    border:        1px solid transparent;
    border-radius: 20px;
    padding:       3px 11px;
    font-family:   var(--motiva-font-family);
    font-size:     var(--motiva-font-size-caption);
    font-weight:   500;
    white-space:   nowrap;
}

/* ── Empty state ──────────────────────────────────────────── */

.mpm-empty[b-dy4lddtr6l] {
    margin:      0;
    padding:     12px;
    background:  var(--motiva-surface-hover);
    border-radius: var(--motiva-radius-sm);
    color:       var(--motiva-text-muted);
    font-size: var(--motiva-font-size-sm, 13px);
    text-align:  center;
}

/* ── Footer ───────────────────────────────────────────────── */

.mpm-footer[b-dy4lddtr6l] {
    padding:         14px 24px;
    border-top:      1px solid var(--motiva-border-subtle);
    display:         flex;
    justify-content: flex-end;
    flex-shrink:     0;
}

.mpm-btn-ghost[b-dy4lddtr6l] {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    padding:        8px 18px;
    background:     none;
    color:          var(--motiva-text-secondary);
    border:         1px solid var(--motiva-border-strong);
    border-radius:  var(--motiva-radius-sm);
    font-family:    var(--motiva-font-family);
    font-size: var(--motiva-font-size-control, 13px);
    font-weight:    500;
    cursor:         pointer;
    transition:     background 0.13s, color 0.13s, border-color 0.13s;
}

.mpm-btn-ghost:hover[b-dy4lddtr6l] {
    background: var(--motiva-surface-hover);
    color:      var(--motiva-text-primary);
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 640px) {
    .mpm-overlay[b-dy4lddtr6l] { padding: 0; align-items: flex-end; }
    .mpm-modal[b-dy4lddtr6l]   { max-height: 100vh; border-radius: 0; }
}
/* /Shared/MotivaGalleryLayout.razor.rz.scp.css */
/* ============================================================
   MotivaGalleryLayout — dev-only design-system gallery shell.
   All visual values come from --motiva-* tokens.
   ============================================================ */

.motiva-gallery-shell[b-cg2o2nlibp] {
    display: grid;
    grid-template-columns: 272px 1fr;
    min-height: 100vh;
    background: var(--motiva-surface-app-bg);
}

.motiva-gallery-main[b-cg2o2nlibp] {
    min-width: 0;
    max-height: 100vh;
    overflow-y: auto;
}

.motiva-gallery-content[b-cg2o2nlibp] {
    max-width: var(--motiva-container-xl);
    margin-inline: auto;
    padding: var(--motiva-space-xl);
}

.motiva-gallery-blocked[b-cg2o2nlibp] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--motiva-space-xl);
    background: var(--motiva-surface-app-bg);
}

.motiva-gallery-blocked-card[b-cg2o2nlibp] {
    max-width: var(--motiva-container-sm);
    background: var(--motiva-surface-primary);
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-lg);
    box-shadow: var(--motiva-shadow-md);
    padding: var(--motiva-space-xl);
    text-align: center;
}

.motiva-gallery-blocked-card h1[b-cg2o2nlibp] {
    font-size: var(--motiva-font-size-h3);
    margin: 0 0 var(--motiva-space-sm);
}

.motiva-gallery-blocked-card p[b-cg2o2nlibp] {
    color: var(--motiva-text-secondary);
    line-height: var(--motiva-line-height-body);
    margin: 0;
}

@media (max-width: 1024px) {
    .motiva-gallery-shell[b-cg2o2nlibp] {
        grid-template-columns: 232px 1fr;
    }

    .motiva-gallery-content[b-cg2o2nlibp] {
        padding: var(--motiva-space-lg);
    }
}

@media (max-width: 768px) {
    .motiva-gallery-shell[b-cg2o2nlibp] {
        grid-template-columns: 1fr;
    }

    .motiva-gallery-main[b-cg2o2nlibp] {
        max-height: none;
        overflow-y: visible;
    }
}

@media (max-width: 390px) {
    .motiva-gallery-content[b-cg2o2nlibp] {
        padding: var(--motiva-space-md);
    }
}
/* /Shared/MotivaTopNav.razor.rz.scp.css */
/* ============================================================
   MotivaTopNav — the finished experiences' chrome
   Prefix: stn- ("shell top nav" — kept through the rename from
   StudentTopNav, since it is what every rule below and two ::deep
   blocks in NotificationBell.razor.css hang off)

   Every value is transcribed from the `… final.dc.html` student
   screens (design-reference/motiva-student-final/README.md §1) and
   holds unchanged for Mentor: every `Motiva Mentor *.dc.html` screen
   draws this identical bar. Nothing here is interpreted.
   ============================================================ */

.stn-bar[b-xgzawz4nhz] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 2px 0 18px;
    position: relative;
    z-index: var(--motiva-z-sticky);
}

/* ── Logo ── */
.stn-logo[b-xgzawz4nhz] {
    flex: 0 0 auto;
    display: block;
    line-height: 0;
}

.stn-logo-img[b-xgzawz4nhz] {
    height: 26px;
    width: auto;
    display: block;
}

/* ── Pill nav ──
   One track, centred by auto inline margins — which is what keeps the bar
   balanced no matter how wide the action cluster grows. */
.stn-nav[b-xgzawz4nhz] {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-inline: auto;
    background: var(--motiva-surface-chip);
    border-radius: var(--motiva-radius-full);
    padding: 4px;
}

/* NavLink renders its own root, so these rules need ::deep to reach it. */
[b-xgzawz4nhz] .stn-nav-item {
    display: flex;
    align-items: center;
    gap: 7px;

    /* 8px/15px, and a 1px transparent border, where this used to be 9px/16px
       with none. THE ACTIVE ITEM WEARS A GRADIENT EDGE and that edge is a
       border-box paint layer, so the border has to exist on EVERY item or the
       pill would grow by 2px in each axis the moment it became current and
       shove the rest of the bar sideways on every navigation. Paying for it
       out of the padding is the rule --motiva-tag-brand-surface states for
       every consumer: same outer box, one px of it now belongs to the edge.
       An inactive item's border is transparent, so nothing about it moved. */
    padding: 8px 15px;
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-full);
    color: var(--motiva-text-muted);
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-md);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

[b-xgzawz4nhz] .stn-nav-item:hover {
    color: var(--motiva-text-primary);
}

/* Active is a raised white pill — the only lift in the bar. */
/* ── The current location ─────────────────────────────────────────────────
   WHITE INTERIOR, MOTIVA GRADIENT EDGE, and none of it declared here.

   The surface, the edge and the ink come from `.motiva-cta-outline`, which
   the NavLink carries alongside this class (see the markup). That rule is
   `.motiva.motiva-final .motiva-cta-outline` — (0,3,0), against this file's
   scoped (0,2,0) — so it wins on specificity rather than on link order, which
   is the ladder motiva-base.css documents for exactly this case. All three
   shells wear `.motiva.motiva-final`, so all three resolve it.

   WHAT THIS RULE STILL OWNS is only what is true of a nav item and of
   nothing else: it is BOLD when current, and it is 2px wider on each side
   than a resting item so the label has room to gain that weight without the
   text reflowing.

   `color` is kept even though the shared class sets the same value. It costs
   nothing, and it means an active item is still legibly dark if this bar is
   ever rendered outside the `.motiva-final` scope — a muted current item
   would be a worse failure than a missing edge.

   WHAT IT NO LONGER OWNS: `background: var(--motiva-surface-primary)` and
   `box-shadow: var(--motiva-shadow-pill)` — together, the plain white pill.
   That treatment said "selected" in a vocabulary the rest of the product does
   not use for anything; a raised white chip is what a segmented control's
   thumb looks like, not what Motiva's current location looks like. It is not
   replaced by a violet FILL either, which is the recurring bug the edge token
   exists to prevent. */
[b-xgzawz4nhz] .stn-nav-item-active,
[b-xgzawz4nhz] .stn-nav-item-active:hover {
    padding-inline: 17px;
    color: var(--motiva-text-primary);
    font-weight: var(--motiva-font-weight-bold);
}

/* The בקשות count. Violet, not rose: the design reserves rose for the bell,
   where the number is genuinely unread; a request awaiting your reply is an
   action, which is violet's role. */
/* The bubble itself is `.motiva-count` in motiva-base.css — one recipe for
   every numeric count in the product. This file keeps only what is true
   HERE: the gap that separates it from the nav item's label. */
[b-xgzawz4nhz] .stn-nav-count {
    margin-inline-start: 6px;
}

/* ── Action cluster ── */
.stn-actions[b-xgzawz4nhz] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* THE MODE CONTROL STYLES ITSELF NOW, and this file no longer reaches
   into it. There were ~60 lines here re-dressing UserModeToggle's
   segmented pill track for the bar, written as `.stn-actions ::deep
   .umt-*` at (0,3,0) purely to out-rank the component's own rules on
   specificity rather than on bundle order.

   The bar renders UserModeToggle's Menu variant instead, whose classes
   (`umt-chip`, `umt-menu-*`) exist only in that variant and are styled in
   UserModeToggle.razor.css beside the markup that emits them. No ::deep,
   no cross-file specificity contest, and the sidebar's segmented copy is
   untouched — see the note at the top of that block. */

.stn-icon-btn[b-xgzawz4nhz] {
    width: var(--motiva-control-height-md);
    height: var(--motiva-control-height-md);
    flex: 0 0 auto;
    border: none;
    border-radius: var(--motiva-radius-full);
    background: rgba(255, 255, 255, 0.7);
    color: var(--motiva-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard),
                color var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.stn-icon-btn:hover[b-xgzawz4nhz] {
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-primary);
}

.stn-logout:hover[b-xgzawz4nhz] {
    color: var(--motiva-color-rose-ink);
}

/* ── Avatar ── */
.stn-avatar[b-xgzawz4nhz] {
    width: var(--motiva-control-height-md);
    height: var(--motiva-control-height-md);
    flex: 0 0 auto;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-gradient-avatar);
    color: #fff; /* approved exception, as above */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--motiva-font-family);
    font-size: var(--motiva-font-size-sm);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    text-decoration: none;
    transition: filter var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.stn-avatar:hover[b-xgzawz4nhz] { filter: brightness(1.08); color: #fff; }

/* On /settings the avatar is the active destination — a white ring, the
   design's own treatment for "you are here" on a gradient chip. */
.stn-avatar-active[b-xgzawz4nhz] { box-shadow: 0 0 0 2px var(--motiva-surface-primary); }

/* ── NotificationBell, restyled for the bar ──
   The bell's own stylesheet stays valid for AppTopBar and AppSideNav; these
   rules only re-dress it inside this component. Nothing about the panel's
   content, its polling, its scrolling or its mark-all-read action is touched
   here — this block is geometry and state colour only.

   The wrapper is the popover's positioning context, so it has to be exactly
   the bell's own box: a flex item the size of the button, with the panel and
   the backdrop taken out of flow on top of it. Without `display: flex` the
   wrap is a block whose height happens to match; making it explicit is what
   lets `top: 46px` below mean "8px under the bell" and keeps the bell on the
   same baseline as the calendar, avatar and logout controls beside it. */
[b-xgzawz4nhz] .nbell-wrap {
    position: relative;
    display: flex;
    flex: 0 0 auto;
}

/* ── SPECIFICITY, NOT ORDER ───────────────────────────────────
   Every rule below names `.nbell-wrap` as well as its target. The bell's
   own stylesheet declares `.nbell-btn[b-nbell]` at (0,2,0); a plain
   `::deep .nbell-btn` here compiles to `[b-stn] .nbell-btn`, which is ALSO
   (0,2,0) — so which one won came down to the two files' order in the
   scoped-CSS bundle, and that order is alphabetical by filename. Renaming
   this file from StudentTopNav to MotivaTopNav moved it in front of
   NotificationBell and silently reverted the bell to its 34px/12px base
   look. Naming the wrapper takes these to (0,3,0) and settles it on
   specificity, where it belongs. */
[b-xgzawz4nhz] .nbell-wrap .nbell-btn {
    width: var(--motiva-control-height-md);
    height: var(--motiva-control-height-md);
    border: none;
    border-radius: var(--motiva-radius-full);
    background: rgba(255, 255, 255, 0.7);
    color: var(--motiva-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-xgzawz4nhz] .nbell-wrap .nbell-btn:hover {
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-primary);
}

/* ── Open state ───────────────────────────────────────────────
   The SAME 38px circle, in the bar's own "you are here" treatment: the
   opaque white fill its hover already uses, violet ink, and the raised
   pill shadow the active nav item carries. No ring, no outline, no size
   change — the bell must not move or grow when the panel opens.

   Written `.nbell-btn.nbell-btn-active` (0,3,0) rather than
   `.nbell-btn-active` (0,2,0) on purpose: the bell's own stylesheet
   declares `.nbell-btn-active` at (0,2,0) with a border-colour and a
   tinted fill meant for the sidebar shell, and a plain single class here
   would only be winning that tie on bundle order. Restating the base
   class outranks it outright. */
[b-xgzawz4nhz] .nbell-wrap .nbell-btn.nbell-btn-active,
[b-xgzawz4nhz] .nbell-wrap .nbell-btn.nbell-btn-active:hover {
    width: var(--motiva-control-height-md);
    height: var(--motiva-control-height-md);
    border: none;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-surface-primary);
    color: var(--motiva-color-violet);
    box-shadow: var(--motiva-shadow-pill);
}

/* ── Unread badge ─────────────────────────────────────────────
   Absolutely positioned, so it never contributes to the bell's box — the
   circle is 38px whether the badge is there or not.

   PHYSICAL `left`, not `inset-inline-end`. The badge sets its own
   `direction: ltr` (so "99+" reads in the conventional order), and a
   logical inset resolves against the ELEMENT'S OWN direction — which
   flipped the badge to the bell's right-hand corner, on top of the gap it
   shares with the calendar button. The reference pins it to the outer
   corner (`top:-2px; left:-2px`), which is what these two lines restore.

   `box-sizing: border-box` for the same reason: the base rule is
   content-box, so the 2px ring was added OUTSIDE the 17px chip and the
   badge rendered as a 21px oval instead of the reference's 17px circle. */
[b-xgzawz4nhz] .nbell-wrap .nbell-badge {
    box-sizing: border-box;
    top: -2px;
    left: -2px;
    right: auto;
    inset-inline-end: auto;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--motiva-radius-full);
    background: var(--motiva-color-rose);
    color: #fff;
    font-size: var(--motiva-font-size-caption, 10px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    border: 2px solid #F7F7FB;
}

/* The popover's own anchoring lives in NotificationBell.razor.css, in the
   `.motiva-student` block that already owns its width, radius and fill —
   those rules are (0,3,0) and a `::deep` rule here is (0,2,0), so a
   responsive override written in this file would silently lose to them.
   All of the student popover's geometry is in one place for that reason. */

/* ── Responsive ──
   The design is drawn desktop-only. Below the width where the centred track
   would collide with the action cluster, the nav drops to its own row and
   scrolls horizontally rather than wrapping into two ragged lines. */
@media (max-width: 1080px) {
    .stn-bar[b-xgzawz4nhz] {
        flex-wrap: wrap;
        gap: 12px;
    }

    .stn-nav[b-xgzawz4nhz] {
        order: 3;
        width: 100%;
        margin-inline: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .stn-nav[b-xgzawz4nhz]::-webkit-scrollbar { display: none; }

    .stn-actions[b-xgzawz4nhz] { margin-inline-start: auto; }
}

/* ============================================================
   THE PROFILE MENU

   The avatar became a menu trigger and the separate logout button
   folded into the list beneath it, so the action cluster now ends
   in ONE control rather than two. Geometry, ink and radii are the
   bar's own — nothing here introduces a second popover language,
   and NotificationBell's panel above is the reference.
   ============================================================ */

/* The positioning context for the panel, sized exactly to the
   avatar so `top` below means "under the avatar" and the avatar
   stays on the cluster's baseline. */
.stn-profile[b-xgzawz4nhz] {
    position: relative;
    display: flex;
    flex: 0 0 auto;
}

/* The trigger is a <button> now, not an <a>. Everything visual is
   inherited from .stn-avatar above; these are only the resets a
   button brings that a link did not. */
.stn-avatar[b-xgzawz4nhz] {
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

.stn-avatar:focus-visible[b-xgzawz4nhz] {
    outline: 2px solid var(--motiva-surface-primary);
    outline-offset: 2px;
}

/* Open reads like active — the same white ring /settings gets — so
   the trigger stays visibly engaged while its panel is showing. */
.stn-avatar-open[b-xgzawz4nhz] { box-shadow: 0 0 0 2px var(--motiva-surface-primary); }

/* Closes the menu on any outside click. Transparent and beneath the
   panel; no document listener, no interop. */
.stn-menu-backdrop[b-xgzawz4nhz] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.stn-menu[b-xgzawz4nhz] {
    position: absolute;
    top: 46px;
    /* HANGS FROM THE INLINE-END EDGE, and that is not interchangeable with
       inline-start. The bar is RTL and this action cluster sits at the
       VISUAL LEFT of the viewport, so `inset-inline-start: 0` pinned the
       panel's right edge to the avatar and grew it leftward — measured at
       left: -146px, i.e. 146px off the side of the screen. Anchoring the
       other edge grows it back into the page instead. */
    inset-inline-end: 0;
    z-index: 41;

    min-width: 212px;
    padding: 6px;
    box-sizing: border-box;

    background: var(--motiva-surface-primary, #fff);
    border: 1px solid var(--motiva-panel-border, rgba(109, 40, 245, 0.08));
    border-radius: var(--motiva-radius-md);
    box-shadow: 0 1px 2px rgba(27, 26, 34, 0.04),
                0 14px 34px -18px rgba(27, 26, 34, 0.30);
}

/* Whose menu this is. Quiet, and separated from the items by the
   same hairline the list uses. */
.stn-menu-id[b-xgzawz4nhz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px 10px;
    margin-block-end: 4px;
    border-block-end: 1px solid var(--motiva-border-subtle);
    min-width: 0;
}

.stn-menu-name[b-xgzawz4nhz] {
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.3;
    color: var(--motiva-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stn-menu-role[b-xgzawz4nhz] {
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.2;
    color: var(--motiva-text-muted);
}

/* One row recipe for the link and both buttons, so a menu made of
   three different elements reads as one list. */
.stn-menu-item[b-xgzawz4nhz] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    box-sizing: border-box;

    padding: 9px 10px;
    border: 0;
    border-radius: var(--motiva-radius-sm);
    background: none;

    font: inherit;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.2;
    color: var(--motiva-text-secondary);
    text-align: start;
    text-decoration: none;
    cursor: pointer;

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

/* Structural hover — the row's box and its ink one step up. */
.stn-menu-item:hover[b-xgzawz4nhz] {
    background: rgba(109, 40, 245, 0.05);
    color: var(--motiva-text-primary);
}

.stn-menu-item:focus-visible[b-xgzawz4nhz] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

.stn-menu-ico[b-xgzawz4nhz] {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    opacity: 0.85;
}

.stn-menu-rule[b-xgzawz4nhz] {
    height: 1px;
    margin: 4px 6px;
    background: var(--motiva-border-subtle);
}

/* Leaving is the one destructive row here, so it takes the rose on
   hover only — at rest it is as quiet as its neighbours. */
.stn-menu-item-exit:hover[b-xgzawz4nhz] {
    background: rgba(224, 51, 95, 0.07);
    color: var(--motiva-color-rose-ink, var(--motiva-color-danger));
}

@media (prefers-reduced-motion: reduce) {
    .stn-avatar[b-xgzawz4nhz],
    .stn-menu-item[b-xgzawz4nhz] { transition: none; }
}
/* /Shared/NavMenu.razor.rz.scp.css */
.navbar-dark[b-gnj43v0dug] {
    background-color: gray;
}

[b-gnj43v0dug] a.nav-link, button[b-gnj43v0dug] {
    color: white;
}

    [b-gnj43v0dug] a.nav-link:hover, button:hover[b-gnj43v0dug] {
        text-decoration: underline;
        color: white;
    }
/* /Shared/NotificationBell.razor.rz.scp.css */
/* =========================================================
   NotificationBell — scoped styles
   Prefix: nbell-
   ========================================================= */

/* ── Wrapper (positioning context) ── */
.nbell-wrap[b-usnf3w89h2] {
    position: relative;
}

/* ── Bell trigger button ── */
.nbell-btn[b-usnf3w89h2] {
    position:        relative;
    width:           34px;
    height:          34px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   var(--motiva-radius-sm);
    background:      var(--motiva-surface-secondary);
    color:           var(--motiva-text-muted);
    cursor:          pointer;
    flex-shrink:     0;
    border:          1px solid var(--motiva-border-subtle);
    transition:      background 0.15s, color 0.15s;
    font-size: var(--motiva-font-size-control, 14px);
}

.nbell-btn:hover[b-usnf3w89h2]      { background: var(--motiva-surface-hover); color: var(--motiva-color-violet, var(--motiva-color-indigo)); }
.nbell-btn-active[b-usnf3w89h2]     { background: var(--motiva-color-brand-bg); color: var(--motiva-color-violet, var(--motiva-color-indigo)); border-color: transparent; }

/* Unread-count badge on the bell.
   Numbers render LTR even inside the dir="rtl" parent so "99+" stays in
   the conventional reading order. The badge is anchored to the upper-left
   of the icon in RTL layout (visually equivalent to the upper-right in
   LTR), tracking the standard notification-icon convention. */
.nbell-badge[b-usnf3w89h2] {
    position:        absolute;
    top:             -4px;
    inset-inline-end: -4px;
    min-width:       18px;
    height:          18px;
    padding:         0 5px;
    background:      var(--motiva-color-rose, var(--motiva-color-danger));
    color:           #fff; /* approved exception: ink on a filled brand surface */
    border-radius:   var(--motiva-radius-full);
    border:          2px solid var(--motiva-surface-primary);
    font-size: var(--motiva-font-size-caption, 10px);
    font-weight:     700;
    line-height:     14px;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    direction:       ltr;
    box-sizing:      content-box;
    pointer-events:  none;
}

/* ── Backdrop (full-screen click trap) ── */
.nbell-backdrop[b-usnf3w89h2] {
    position: fixed;
    inset:    0;
    z-index:  999;
}

/* ── Floating panel ──
   position: fixed so it escapes .sidenav-panel's overflow: hidden and
   sticky stacking context. Coordinates are based on known layout tokens:
   the sidebar sits at shell-padding from the right in the RTL layout,
   and the bell is near the top of the sidebar header (~80px from viewport top).
── */
.nbell-panel[b-usnf3w89h2] {
    position:       fixed;
    top:            80px;
    right:          var(--g-shell-padding, 16px);
    width:          340px;
    max-height:     480px;
    background:     var(--motiva-surface-primary);
    border:         1px solid var(--motiva-border-subtle);
    border-radius:  var(--motiva-radius-md);
    box-shadow:     var(--motiva-shadow-md);
    z-index:        1000;
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
}

/* ── Panel header ── */
.nbell-panel-header[b-usnf3w89h2] {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          14px 16px;
    border-bottom:    1px solid var(--motiva-border-subtle);
    flex-shrink:      0;
}

.nbell-panel-title[b-usnf3w89h2] {
    font-size:   var(--motiva-font-size-caption);
    font-weight: 700;
    color:       var(--motiva-text-primary);
}

.nbell-mark-all-btn[b-usnf3w89h2] {
    font-size:     12px;
    color:         var(--motiva-color-violet, var(--motiva-color-indigo));
    background:    none;
    border:        none;
    cursor:        pointer;
    padding:       0;
    font-family:   var(--motiva-font-family);
    font-weight:   500;
    transition:    color 0.12s;
}

.nbell-mark-all-btn:hover[b-usnf3w89h2] { color: var(--motiva-color-indigo); text-decoration: underline; }

/* ── Loading state ── */
.nbell-loading[b-usnf3w89h2] {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    padding:         32px;
    color:           var(--motiva-text-secondary);
    font-size:       var(--motiva-font-size-caption);
}

.nbell-spinner[b-usnf3w89h2] {
    width:         20px;
    height:        20px;
    border:        2.5px solid var(--motiva-border-strong);
    border-top:    2.5px solid var(--motiva-color-violet, var(--motiva-color-indigo));
    border-radius: var(--motiva-radius-full);
    animation:     nbell-spin-b-usnf3w89h2 0.7s linear infinite;
    flex-shrink:   0;
}

@keyframes nbell-spin-b-usnf3w89h2 { to { transform: rotate(360deg); } }

/* ── Empty state ── */
.nbell-empty[b-usnf3w89h2] {
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    gap:              10px;
    padding:          36px 24px;
    color:            var(--motiva-text-muted);
    font-size:        var(--motiva-font-size-caption);
}

.nbell-empty-icon[b-usnf3w89h2] { font-size: 28px; opacity: 0.4; }

/* ── Notification list ── */
.nbell-list[b-usnf3w89h2] {
    overflow-y: auto;
    flex:       1;
}

/* ── Single notification item ── */
.nbell-item[b-usnf3w89h2] {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
    padding:     12px 14px;
    border-bottom: 1px solid var(--motiva-border-subtle);
    cursor:      pointer;
    transition:  background 0.1s;
    position:    relative;
}

.nbell-item:last-child[b-usnf3w89h2]  { border-bottom: none; }
.nbell-item:hover[b-usnf3w89h2]       { background: var(--motiva-surface-hover); }
.nbell-item-unread[b-usnf3w89h2]      { background: rgba(99,102,241,0.04); }
.nbell-item-unread:hover[b-usnf3w89h2] { background: rgba(99,102,241,0.08); }

/* Icon circle */
.nbell-item-icon[b-usnf3w89h2] {
    flex-shrink:     0;
    width:           32px;
    height:          32px;
    border-radius:   var(--motiva-radius-full);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       13px;
    margin-top:      1px;
}

.nbell-icon-received[b-usnf3w89h2] { background: var(--motiva-color-brand-bg); color: var(--motiva-color-violet, var(--motiva-color-indigo)); }
.nbell-icon-returned[b-usnf3w89h2] { background: var(--motiva-color-danger-bg);  color: var(--motiva-color-rose-ink, var(--motiva-color-danger)); }
.nbell-icon-general[b-usnf3w89h2]  { background: var(--motiva-surface-secondary);     color: var(--motiva-text-muted); }

/* Item text */
.nbell-item-body[b-usnf3w89h2] {
    flex:    1;
    min-width: 0;
}

.nbell-item-title[b-usnf3w89h2] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: 600;
    color:       var(--motiva-text-primary);
    line-height: 1.3;
    margin-bottom: 2px;
}

.nbell-item-msg[b-usnf3w89h2] {
    font-size: var(--motiva-font-size-caption, 12px);
    color:       var(--motiva-text-secondary);
    line-height: 1.4;
    margin-bottom: 4px;
    overflow:    hidden;
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.nbell-item-time[b-usnf3w89h2] {
    font-size: var(--motiva-font-size-caption, 11px);
    color:     var(--motiva-text-muted);
}

/* Unread indicator dot */
.nbell-unread-dot[b-usnf3w89h2] {
    position:      absolute;
    left:          10px;
    top:           50%;
    transform:     translateY(-50%);
    width:         6px;
    height:        6px;
    border-radius: var(--motiva-radius-full);
    background:    var(--motiva-color-violet, var(--motiva-color-indigo));
    flex-shrink:   0;
}

/* ============================================================
   STUDENT EXPERIENCE, FINAL — the notifications popover

   Geometry from the reference (design-reference/motiva-student-final,
   Motiva Notifications Popover final): 392px wide, radius 22, an
   opaque near-white fill with a hairline, r14 rows, a 32px r10 icon
   chip, and NO tinted unread row — unread is the dot and the bold
   title; read rows are dimmed instead.
   ============================================================ */

/* ── Anchoring ────────────────────────────────────────────────
   README §"Notifications popover": "anchored under the bell,
   top:46px; left:0, w392, r22."

   The base rule above positions this panel `fixed` at
   `top: 80px; right: var(--g-shell-padding, 16px)` — coordinates derived
   from the SIDEBAR shell, where the bell sits in the rail header. In the
   student shell that is wrong twice over: this scope zeroes
   `--g-shell-padding`, so the panel pinned itself to the far edge of the
   viewport, ~750px away from a bell that lives in the top bar; and being
   `fixed` it stayed at y=80 while the (non-sticky) top bar scrolled away.

   Absolute against `.nbell-wrap` instead, so the panel is attached to the
   bell and travels with it. `top: 46px` is the 38px button plus an 8px
   gap. `left: 0` is PHYSICAL, and it is what makes the panel open inward
   over the page: the action cluster sits at the bar's inline end, i.e. the
   left of an RTL viewport, so a panel aligned to the bell's right edge
   would run ~230px off-screen. Aligning its left edge to the bell's and
   letting it grow rightward is the "opens toward the page" behaviour the
   reference draws.

   `right: auto` cancels the base rule's `right`: with both set the width
   is ignored and the panel stretches the whole bar.

   These rules live HERE rather than in MotivaTopNav.razor.css because
   this block is (0,3,0) and a `::deep` rule over there is (0,2,0) — the
   width/max-width below would beat any responsive override written in
   that file. All of the student popover's geometry is in one place. */
.motiva-final .nbell-panel[b-usnf3w89h2] {
    position: absolute;
    top: 46px;
    left: 0;
    right: auto;

    width: 392px;
    max-width: calc(100vw - 32px);
    /* Never taller than the room under the bar. 480px is the design's own
       cap; the second term is the viewport less the bar and a bottom
       margin, so a short laptop window clips the LIST (which already
       scrolls) instead of pushing the panel off-screen. */
    max-height: min(480px, calc(100vh - 120px));

    border-radius: var(--motiva-radius-popover);
    background: var(--motiva-surface-solid);
    border: 1px solid var(--motiva-border-card);
    box-shadow: var(--motiva-shadow-popover);
    overflow: hidden;
}

/* ── Lecturer shell — anchor the panel under the bell ─────────
   The lecturer shell uses `motiva motiva-lecturer` (no `motiva-final`),
   so the override above does not apply and the base `fixed; right:…`
   rule would pin the panel to the viewport's physical right — the
   opposite edge from the bell. This block mirrors the same
   `position: absolute` anchor, so the panel opens directly below the
   bell regardless of shell class.

   `left: 0; right: auto` works for the same reason it does in the
   student block: the bell is at the inline-end (physical left in RTL)
   of the top bar, so a panel anchored to its left edge grows into the
   visible page area rather than off-screen. */
.motiva-lecturer .nbell-panel[b-usnf3w89h2] {
    position: absolute;
    top: 46px;
    left: 0;
    right: auto;

    width: 340px;
    max-width: calc(100vw - 32px);
    max-height: min(480px, calc(100vh - 120px));
}

/* Below ~560px the 392px panel no longer fits between the bell and the
   opposite edge, so it stops hanging off the bell and becomes a sheet
   inset from both viewport edges — still under the bar, still the same
   panel. This is the only width at which the anchor is dropped, and it is
   dropped because honouring it would push content out of the viewport. */
@media (max-width: 560px) {
    .motiva-final .nbell-panel[b-usnf3w89h2] {
        position: fixed;
        top: calc(var(--motiva-canvas-padding-block-start) + 48px);
        left: 16px;
        /* `right: auto`, not `right: 16px`. Setting both would over-constrain
           the box, and the panel inherits `dir="rtl"` from .nbell-wrap — so
           the browser would drop `left` and pin the sheet to the RIGHT edge,
           i.e. the far side of the viewport from the bell. The width term
           does the fitting instead, and keeps the design's 392px whenever
           there is room for it rather than stretching edge to edge. */
        right: auto;
        width: min(392px, calc(100vw - 32px));
        max-width: none;
    }

    .motiva-lecturer .nbell-panel[b-usnf3w89h2] {
        position: fixed;
        top: 72px;
        left: 16px;
        right: auto;
        width: min(340px, calc(100vw - 32px));
        max-width: none;
    }
}

.motiva-final .nbell-panel-header[b-usnf3w89h2] {
    padding: 16px 20px 12px;
    border-bottom: none;
}

.motiva-final .nbell-panel-title[b-usnf3w89h2] {
    font-size: var(--motiva-font-size-item, 15px);
    font-weight: var(--motiva-font-weight-bold);
    letter-spacing: var(--motiva-letter-spacing-section);
}

.motiva-final .nbell-item[b-usnf3w89h2] {
    gap: 11px;
    padding: 12px;
    margin-inline: 8px;
    border-bottom: none;
    border-radius: var(--motiva-radius-row);
}

/* Unread is the dot + the bold title. A filled row is V4's treatment and
   reads as an alert state when three of them stack. */
.motiva-final .nbell-item-unread[b-usnf3w89h2] { background: transparent; }
.motiva-final .nbell-item:not(.nbell-item-unread)[b-usnf3w89h2] { opacity: 0.62; }

.motiva-final .nbell-item:hover[b-usnf3w89h2],
.motiva-final .nbell-item-unread:hover[b-usnf3w89h2] {
    background: rgba(27, 26, 34, 0.035);
    opacity: 1;
}

.motiva-final .nbell-item-icon[b-usnf3w89h2] {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
}
/* /Shared/ProjectMentorsEditor.razor.rz.scp.css */
/* ============================================================
   ProjectMentorsEditor — scoped styles (pme-* prefix)
   Compact inline mentor manager used inside the projects-mgmt
   edit modal. RTL, matches the existing theme tokens.
   ============================================================ */

.pme-wrap[b-sq3rarcx1e] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── States ───────────────────────────────────────────────── */

.pme-state[b-sq3rarcx1e] {
    padding: 10px 12px;
    background: var(--g-bg-hover);
    border-radius: var(--g-radius-sm);
    color: var(--g-text-muted);
    font-size: var(--motiva-font-size-sm, 13px);
    text-align: center;
}
.pme-state-error[b-sq3rarcx1e] { color: var(--g-danger); }

.pme-debug[b-sq3rarcx1e] {
    margin-top: 6px;
    padding: 6px 8px;
    background: var(--g-bg-surface);
    border-radius: var(--g-radius-sm);
    color: var(--g-text-muted);
    font-size: var(--motiva-font-size-caption, 11px);
    direction: ltr;
    word-break: break-word;
}

.pme-empty[b-sq3rarcx1e] {
    padding: 10px 12px;
    background: var(--g-bg-hover);
    border-radius: var(--g-radius-sm);
    color: var(--g-text-muted);
    font-size: var(--motiva-font-size-sm, 13px);
    text-align: center;
}

/* ── Current-mentor chips ─────────────────────────────────── */

.pme-chips[b-sq3rarcx1e] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pme-chip[b-sq3rarcx1e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--g-bg-hover);
    border: 1px solid var(--g-border-light);
    border-radius: var(--g-radius-sm);
    padding: 8px 12px;
}

.pme-chip-main[b-sq3rarcx1e] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.pme-chip-name[b-sq3rarcx1e] {
    font-weight: 600;
    font-size: 14px;
    color: var(--g-text-primary);
}

.pme-chip-email[b-sq3rarcx1e] {
    font-size: var(--motiva-font-size-caption, 12px);
    color: var(--g-text-muted);
    word-break: break-all;
}

/* Default tag: white paper under the Motiva gradient edge, dark ink.
   `--motiva-tag-brand-surface`, the product's one tag recipe. The edge is
   paid for out of the padding so the pill's outer box does not move. */
.pme-chip-roles[b-sq3rarcx1e] {
    font-size: var(--motiva-font-size-caption, 11px);
    color: var(--motiva-text-primary);
    background: var(--motiva-tag-brand-surface);
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 0 7px;
}

.pme-chip-remove[b-sq3rarcx1e] {
    width: 28px;
    height: 28px;
    border-radius: var(--g-radius-sm);
    background: transparent;
    border: 1px solid transparent;
    color: var(--g-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.13s, color 0.13s, border-color 0.13s;
}
.pme-chip-remove:hover:not(:disabled)[b-sq3rarcx1e] {
    background: rgba(220, 53, 69, 0.10);
    color: var(--g-danger);
    border-color: rgba(220, 53, 69, 0.25);
}
.pme-chip-remove:disabled[b-sq3rarcx1e] { opacity: 0.5; cursor: not-allowed; }

/* ── Picker (add) ─────────────────────────────────────────── */

.pme-picker[b-sq3rarcx1e] {
    position: relative;
}

.pme-picker-input-wrap[b-sq3rarcx1e] {
    position: relative;
}

.pme-picker-icon[b-sq3rarcx1e] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-start: 12px;
    color: var(--g-accent);
    font-size: 11px;
    pointer-events: none;
}

.pme-picker-input[b-sq3rarcx1e] {
    width: 100%;
    padding: 9px 12px;
    padding-inline-start: 34px;
    border: 1px dashed var(--g-accent);
    border-radius: var(--g-radius-sm);
    background: var(--g-bg-surface);
    color: var(--g-text-primary);
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-control, 13px);
    box-sizing: border-box;
}
.pme-picker-input:focus[b-sq3rarcx1e] {
    outline: none;
    border-style: solid;
    box-shadow: 0 0 0 2px var(--g-accent-light);
}

.pme-picker-results[b-sq3rarcx1e] {
    margin-top: 6px;
    max-height: 240px;
    overflow-y: auto;
    background: var(--g-bg-surface);
    border: 1px solid var(--g-border-light);
    border-radius: var(--g-radius-sm);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.pme-list[b-sq3rarcx1e] {
    list-style: none;
    margin: 0;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pme-list-row[b-sq3rarcx1e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: var(--g-radius-sm);
    cursor: pointer;
    text-align: start;
    color: var(--g-text-primary);
    transition: background 0.13s;
}
.pme-list-row:hover:not(:disabled)[b-sq3rarcx1e] { background: var(--g-bg-hover); }
.pme-list-row:disabled[b-sq3rarcx1e] { opacity: 0.5; cursor: not-allowed; }

.pme-list-row-main[b-sq3rarcx1e] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.pme-list-row-name[b-sq3rarcx1e] {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: 600;
    color: var(--g-text-primary);
}

.pme-list-row-email[b-sq3rarcx1e] {
    font-size: var(--motiva-font-size-caption, 11px);
    color: var(--g-text-muted);
    word-break: break-all;
}

.pme-list-row-roles[b-sq3rarcx1e] {
    font-size: var(--motiva-font-size-caption, 11px);
    color: var(--g-text-secondary);
    background: var(--g-bg-hover);
    border-radius: 20px;
    padding: 1px 8px;
    white-space: nowrap;
}

/* ── Toast ────────────────────────────────────────────────── */

.pme-toast[b-sq3rarcx1e] {
    padding: 8px 12px;
    border-radius: var(--g-radius-sm);
    background: var(--g-accent-light);
    color: var(--g-accent);
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: 600;
}
.pme-toast-error[b-sq3rarcx1e] { background: rgba(220, 53, 69, 0.10); color: var(--g-danger); }
/* /Shared/ProjectQuickView.razor.rz.scp.css */
/* ============================================================
   ProjectQuickView — inspect a project without leaving the decision
   Prefix: pqv-

   The shell (centred popup, 480px cap, header lead row, ruled footer)
   is MModal's QuickView variant and is NOT restyled here. This file
   dresses only the facts inside it.

   The fact-row shape is the mentor quick view's, deliberately: a
   lecturer who has met that panel should recognise this one instantly.
   It is not shared as CSS because the two live in different scopes and
   the row is nine declarations — the vocabulary that MATTERS here
   (tags, availability colour, muted notes) comes from the tokens, which
   are shared.

   Tokens: motiva-tokens.css.
   ============================================================ */

/* ── Header lead ─────────────────────────────────────────────  */
.pqv-num[b-u54u4v3tv6] {
    unicode-bidi: isolate;
    direction: ltr;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.2;
    color: var(--motiva-text-faint, #B4AFC0);
    font-variant-numeric: tabular-nums;
}

.pqv-type[b-u54u4v3tv6] {
    padding: 2px 8px;
    border-radius: var(--motiva-radius-pill, 999px);
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.05));
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    white-space: nowrap;
    color: var(--motiva-text-secondary, #5B5568);
}

/* ── Body ────────────────────────────────────────────────────  */
.pqv-title[b-u54u4v3tv6] {
    margin: 0 0 6px;
    font-size: var(--motiva-font-size-h3, 17px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.3;
    color: var(--motiva-text-primary, #1A1820);
}

.pqv-desc[b-u54u4v3tv6] {
    margin: 0 0 12px;
    font-size: var(--motiva-font-size-meta, 12.5px);
    line-height: 1.6;
    color: var(--motiva-text-secondary, #5B5568);
}

/* Label over value, not label beside value: the values here are phrases
   of very different lengths — a mentor name, a sentence of goals — and a
   two-column grid would leave the short ones stranded beside the long. */
.pqv-facts[b-u54u4v3tv6] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--motiva-border-subtle, rgba(26, 24, 32, 0.08));
}

/* ── The fact recipe reaches SLOTTED facts too ─────────────────────
   Every rule below is written `.pqv-facts ::deep …` rather than as a plain
   class, and the prefix is load-bearing — do not "simplify" it away.

   `<ExtraFacts>` is a RenderFragment: the נושא and תוכן הפרויקט rows in the
   student catalogue are authored in StudentCatalogBoard.razor, so Blazor
   stamps THAT file's scope attribute on them, not this one's. A plain
   `.pqv-fact-k` compiles to `.pqv-fact-k[b-<this file>]` and therefore matched
   nothing on those two rows: they rendered as bare <dt>/<dd>, inheriting the
   modal body's 16px/700 and the UA stylesheet's 40px <dd> indent, which read
   as two page headings dropped into a panel of 11px labels.

   `.pqv-facts` IS this component's own element, so `.pqv-facts ::deep .x`
   compiles to `.pqv-facts[b-<this file>] .x` — unscoped on the right-hand
   side, and so matching the component's own facts and the caller's alike.
   One recipe, one place, whoever wrote the markup.
   See also MScrollArea, which flips its scrollbar side the same way. */

.pqv-facts[b-u54u4v3tv6]  .pqv-fact {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pqv-facts[b-u54u4v3tv6]  .pqv-fact-k {
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.2;
    color: var(--motiva-text-muted, #8B8698);
}

.pqv-facts[b-u54u4v3tv6]  .pqv-fact-v {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin: 0;
    min-width: 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.5;
    color: var(--motiva-text-primary, #1A1820);
}

.pqv-facts[b-u54u4v3tv6]  .pqv-fact-tags { gap: 5px; }

/* A qualifier on the value beside it — one step down in colour, never a
   second line the eye has to pair back up. */
.pqv-facts[b-u54u4v3tv6]  .pqv-fact-note { color: var(--motiva-text-faint, #B4AFC0); }

/* Internal notes are a paragraph, not a chip row: they get a surface so
   they read as somebody's written remark rather than as another fact. */
.pqv-facts[b-u54u4v3tv6]  .pqv-fact-note-block {
    display: block;
    padding: 8px 10px;
    border-radius: var(--motiva-radius-sm, 10px);
    background: color-mix(in srgb, var(--motiva-text-primary, #1A1820) 2.5%, #fff);
    box-shadow: inset 0 0 0 1px var(--motiva-border-subtle, rgba(26, 24, 32, 0.08));
    font-size: var(--motiva-font-size-caption, 12px);
    line-height: 1.55;
    white-space: pre-wrap;
    color: var(--motiva-text-secondary, #5B5568);
}

/* The product's one tag recipe — the gradient edge, not a filled block. */
.pqv-tag[b-u54u4v3tv6] {
    padding: 1px 7px;
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-pill, 999px);
    background: var(--motiva-tag-brand-surface);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.35;
    white-space: nowrap;
    color: var(--motiva-text-primary, #1A1820);
}

/* Same two colours the assignment surfaces use for the same two states, so
   "פנוי" means one thing across the whole flow. */
.pqv-free[b-u54u4v3tv6]  {
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 88%, #000);
}

.pqv-taken[b-u54u4v3tv6] {
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-color-violet, #4F46E5);
}

.pqv-quiet[b-u54u4v3tv6] {
    margin: 0;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.5;
    color: var(--motiva-text-faint, #B4AFC0);
}

/* ── Footer ──────────────────────────────────────────────────
   The footer ROW is MModal's; this is the one control inside it. */
.pqv-go[b-u54u4v3tv6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 16px;
    border-radius: var(--motiva-radius-sm, 10px);
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}

.pqv-go:hover[b-u54u4v3tv6] { text-decoration: none; }
/* /Shared/StudentWaiting.razor.rz.scp.css */
/* ============================================================
   StudentWaiting — ממתינים לשיבוץ
   Prefix: swt-

   One centred card on the student canvas. The page it replaces was a
   grid of 117 selectable projects, so the contrast is the message: there
   is nothing to choose here any more.

   Tokens: motiva-tokens.css.
   ============================================================ */

.swt-wrap[b-3y9tipkk0a] {
    display: flex;
    justify-content: center;
    padding-block: clamp(16px, 4vw, 40px);
}

.swt-card[b-3y9tipkk0a] {
    width: 100%;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: clamp(20px, 4vw, 32px);
    border-radius: var(--motiva-radius-lg, 18px);
    background: var(--motiva-surface-primary, #fff);
    box-shadow: inset 0 0 0 1px var(--motiva-border-subtle, rgba(26, 24, 32, 0.08));
}

.swt-head[b-3y9tipkk0a] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.swt-title[b-3y9tipkk0a] {
    margin: 0;
    font-size: 24px;
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--motiva-text-primary, #1A1820);
}

.swt-lead[b-3y9tipkk0a] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    line-height: 1.65;
    color: var(--motiva-text-secondary, #5B5568);
}

/* Same white outlined stamp the assignment surfaces use, so a submission
   time looks identical wherever it is met. */
.swt-stamp[b-3y9tipkk0a] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--motiva-radius-pill, 999px);
    background: var(--motiva-surface-primary, #fff);
    box-shadow: inset 0 0 0 1px var(--motiva-border, rgba(26, 24, 32, 0.14));
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    color: var(--motiva-text-secondary, #5B5568);
    font-variant-numeric: tabular-nums;
}

.swt-section[b-3y9tipkk0a] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--motiva-border-subtle, rgba(26, 24, 32, 0.08));
}

.swt-section-head[b-3y9tipkk0a] { display: flex; align-items: baseline; gap: 10px; }

.swt-section-title[b-3y9tipkk0a] {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-text-primary, #1A1820);
}

.swt-prefs[b-3y9tipkk0a] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The same preference row the lecturer reads on טופס שיבוץ — one object,
   one shape, whichever side of the flow you are on. */
.swt-pref[b-3y9tipkk0a] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border-radius: var(--motiva-radius-sm, 10px);
    background: color-mix(in srgb, var(--motiva-text-primary, #1A1820) 2.5%, #fff);
}

.swt-rank[b-3y9tipkk0a] {
    flex: 0 0 auto;
    unicode-bidi: isolate;
    direction: ltr;
    padding: 3px 8px;
    border-radius: var(--motiva-radius-pill, 999px);
    background: var(--motiva-color-violet, #4F46E5);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.2;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.swt-pref-name[b-3y9tipkk0a] {
    min-width: 0;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.3;
    color: var(--motiva-text-primary, #1A1820);
}

.swt-note[b-3y9tipkk0a] {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--motiva-radius-sm, 10px);
    background: color-mix(in srgb, var(--motiva-text-primary, #1A1820) 2%, #fff);
    box-shadow: inset 0 0 0 1px var(--motiva-border-subtle, rgba(26, 24, 32, 0.08));
    font-size: var(--motiva-font-size-meta, 12.5px);
    line-height: 1.6;
    white-space: pre-wrap;
    color: var(--motiva-text-secondary, #5B5568);
}

.swt-foot[b-3y9tipkk0a] {
    display: flex;
    align-items: center;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--motiva-border-subtle, rgba(26, 24, 32, 0.08));
}

.swt-edit[b-3y9tipkk0a] {
    height: 36px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--motiva-radius-sm, 10px);
    font-family: inherit;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    cursor: pointer;
}

/* Not an error — a rule. Stated in the same quiet ink as the rest of the
   explanatory copy, because a locked form is the normal end of this flow. */
.swt-locked[b-3y9tipkk0a],
.swt-quiet[b-3y9tipkk0a] {
    margin: 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.55;
    color: var(--motiva-text-muted, #8B8698);
}
/* /Shared/TeamQuickInfoPopover.razor.rz.scp.css */
/* ── TeamQuickInfoPopover ──────────────────────────────────────────────────
   Click-to-open contact card. Uses position: fixed (anchor coords computed
   in C# from getBoundingClientRect) so the popover floats above ancestor
   `overflow: auto / hidden` containers. A transparent backdrop covers the
   viewport so any outside click closes it.
*/

.tqp-anchor[b-v24cpkqp17] {
    display: inline-block;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.12s, box-shadow 0.12s;
}

.tqp-anchor:hover[b-v24cpkqp17] {
    background: var(--motiva-surface-hover);
    box-shadow: inset 0 -1px 0 rgba(124, 58, 237, 0.35);
}

/* Portal host — Blazor renders this inline, then JS moves it under <body>
   so the popover escapes any sticky/overflow-clipping ancestor. The host
   itself contributes no layout. */
.tqp-portal-host[b-v24cpkqp17] {
    display: contents;
}

.tqp-backdrop[b-v24cpkqp17] {
    position: fixed;
    inset: 0;
    background: transparent;
    /* Above every dashboard z-index in the project (the highest existing
       value is 600 on ProjectDetailsCard). Stays below the popover card. */
    z-index: 9998;
}

.tqp-popover[b-v24cpkqp17] {
    position: fixed;
    z-index: 9999;
    width: 320px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 24px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-primary);
    border: 1px solid var(--motiva-border-strong);
    border-radius: var(--motiva-radius-lg);
    box-shadow: var(--motiva-shadow-lg);
    direction: rtl;
    text-align: right;
    font-size: 0.85rem;
    line-height: 1.45;
    animation: tqp-fade-b-v24cpkqp17 130ms ease-out;
}

@keyframes tqp-fade-b-v24cpkqp17 {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.tqp-header[b-v24cpkqp17] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(0deg, rgba(124, 58, 237, 0.04), rgba(124, 58, 237, 0.04));
    border-bottom: 1px solid var(--motiva-border-subtle);
}

.tqp-header-text[b-v24cpkqp17] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.tqp-header-icon[b-v24cpkqp17] {
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    font-size: 1rem;
}

.tqp-header-title[b-v24cpkqp17] {
    color: var(--motiva-text-primary);
    font-size: 0.92rem;
}

.tqp-close-btn[b-v24cpkqp17] {
    background: transparent;
    border: 0;
    width: 26px;
    height: 26px;
    border-radius: var(--motiva-radius-sm);
    color: var(--motiva-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
}

.tqp-close-btn:hover[b-v24cpkqp17] {
    background: var(--motiva-color-brand-bg);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

/* ── Body ───────────────────────────────────────────────────────────────── */
.tqp-body[b-v24cpkqp17] {
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tqp-section[b-v24cpkqp17] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tqp-section-title[b-v24cpkqp17] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--motiva-text-primary);
    font-size: 0.82rem;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--motiva-border-subtle);
}

.tqp-section-icon[b-v24cpkqp17] {
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

.tqp-summary-row[b-v24cpkqp17] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.tqp-summary-label[b-v24cpkqp17] {
    flex: 0 0 auto;
    min-width: 56px;
    color: var(--motiva-text-muted);
    font-weight: 500;
}

.tqp-summary-value[b-v24cpkqp17] {
    flex: 1 1 auto;
    color: var(--motiva-text-primary);
    word-break: break-word;
}

.tqp-summary-value--muted[b-v24cpkqp17] {
    color: var(--motiva-text-muted);
    font-style: italic;
}

/* ── People list ────────────────────────────────────────────────────────── */
.tqp-people[b-v24cpkqp17] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tqp-person[b-v24cpkqp17] {
    background: var(--motiva-surface-secondary);
    border: 1px solid var(--motiva-border-subtle);
    border-radius: var(--motiva-radius-sm);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tqp-person-name[b-v24cpkqp17] {
    font-weight: 600;
    color: var(--motiva-text-primary);
    font-size: 0.86rem;
    word-break: break-word;
}

/* Mentor names are buttons that open the read-only profile modal. They look
   like the surrounding text but get an underline + accent color on hover so
   users discover the affordance. */
.tqp-person-link[b-v24cpkqp17] {
    background:    transparent;
    border:        none;
    padding:       0;
    margin:        0;
    color:         inherit;
    font:          inherit;
    cursor:        pointer;
    text-align:    inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    transition:    color 0.12s;
}
.tqp-person-link:hover[b-v24cpkqp17] {
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

.tqp-person-email-row[b-v24cpkqp17] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.tqp-person-email[b-v24cpkqp17] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--motiva-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    direction: ltr;
    text-align: left;
}

.tqp-person-email--muted[b-v24cpkqp17] {
    color: var(--motiva-text-muted);
    font-style: italic;
    direction: rtl;
    text-align: right;
    font-family: inherit;
}

.tqp-copy-btn[b-v24cpkqp17] {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: var(--motiva-radius-sm);
    border: 1px solid var(--motiva-border-strong);
    background: var(--motiva-surface-primary);
    color: var(--motiva-color-violet, var(--motiva-color-indigo));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.tqp-copy-btn:hover[b-v24cpkqp17] {
    background: rgba(124, 58, 237, 0.08);
    border-color: var(--motiva-color-violet, var(--motiva-color-indigo));
}

.tqp-copy-btn--done[b-v24cpkqp17] {
    background: var(--motiva-color-success-bg);
    border-color: rgba(13, 156, 154, 0.50);
    border-color: color-mix(in srgb, var(--motiva-color-teal) 50%, transparent);
    color: var(--motiva-color-teal);
}

.tqp-empty[b-v24cpkqp17] {
    color: var(--motiva-text-muted);
    font-style: italic;
    font-size: 0.82rem;
    padding: 6px 2px;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.tqp-footer[b-v24cpkqp17] {
    padding: 10px 14px;
    border-top: 1px solid var(--motiva-border-subtle);
    background: var(--motiva-surface-secondary);
}

.tqp-copy-all-btn[b-v24cpkqp17] {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--motiva-radius-sm);
    border: 1px solid var(--motiva-color-violet, var(--motiva-color-indigo));
    background: var(--motiva-color-violet, var(--motiva-color-indigo));
    color: #fff; /* approved exception: ink on a filled brand surface */
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.12s, opacity 0.12s, transform 0.06s;
}

.tqp-copy-all-btn:hover:not(:disabled)[b-v24cpkqp17] {
    background: var(--motiva-color-indigo);
    border-color: var(--motiva-color-indigo);
}

.tqp-copy-all-btn:active:not(:disabled)[b-v24cpkqp17] { transform: translateY(1px); }

.tqp-copy-all-btn:disabled[b-v24cpkqp17] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Dark-mode polish */
:global([data-theme="dark"]) .tqp-popover[b-v24cpkqp17] {
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-primary);
    border-color: var(--motiva-border-strong);
}

:global([data-theme="dark"]) .tqp-person[b-v24cpkqp17] {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--motiva-border-strong);
}

:global([data-theme="dark"]) .tqp-copy-btn[b-v24cpkqp17] {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--motiva-border-strong);
}

:global([data-theme="dark"]) .tqp-footer[b-v24cpkqp17] {
    background: rgba(255, 255, 255, 0.03);
}
/* /Shared/UserModeToggle.razor.rz.scp.css */
/* ============================================================
   UserModeToggle — scoped styles (umt-* prefix)
   Pill-group toggle. Sits at the top of the sidebar for dual-role
   users. Matches the existing sidebar palette (g-* tokens) so it
   doesn't introduce a new design language.
   ============================================================ */

.umt-wrap[b-ze6xa78ery] {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--g-bg-hover);
    border: 1px solid var(--g-border-light);
    border-radius: 999px;
    width: 100%;
    box-sizing: border-box;
}

.umt-btn[b-ze6xa78ery] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    background: transparent;
    color: var(--g-text-secondary);
    border: none;
    border-radius: 999px;
    font-family: var(--g-font-base);
    font-size: var(--motiva-font-size-control, 12px);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

.umt-btn:hover[b-ze6xa78ery] {
    color: var(--g-text-primary);
}

.umt-btn-active[b-ze6xa78ery] {
    background: var(--g-bg-surface);
    color: var(--g-accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.umt-icon[b-ze6xa78ery] { font-size: var(--motiva-font-size-caption, 11px); }

/* When the sidebar collapses to icon-only on narrow screens the existing
   layout already hides .snav-label children. Mirror that for our label
   so the toggle stays usable as two icon-only buttons. */
@media (max-width: 1024px) {
    .umt-label[b-ze6xa78ery] { display: none; }
    .umt-btn[b-ze6xa78ery] { padding: 6px 8px; }
}
/* ============================================================
   THE MENU VARIANT — the Motiva top bar's role control
   Prefix: umt-menu-* / umt-chip

   Everything above this line is the SEGMENTED variant and is
   untouched: it is sized in --g-* tokens for the 248px sidebar
   AppSideNav still renders it in.

   These rules read --motiva-* tokens, which resolve only inside
   the `.motiva` scope — i.e. only where this variant is ever
   rendered. Nothing here can reach the sidebar's copy, and
   nothing above can reach this one: the two variants render
   disjoint class names.

   WHY THE STYLING LIVES HERE AND NOT IN MotivaTopNav.razor.css.
   That file documents the trap at length: scoped CSS bundles
   alphabetically, so a `::deep` rule reaching into a foreign
   component ties on specificity with that component's own rules
   and the tie is settled by filename order. A component styling
   its OWN elements has no such contest — `.umt-chip[b-umt]`
   competes with nothing.
   ============================================================ */

.umt-menu-wrap[b-ze6xa78ery] {
    position: relative;
    display: flex;
    flex: 0 0 auto;
}

/* ── The chip ──
   The bar's own 38px control height, so it sits on one baseline with
   the calendar circle, the bell and the avatar beside it. Pill-shaped
   and translucent-white like the icon buttons rather than filled like
   the avatar: it is chrome, not identity. */
.umt-chip[b-ze6xa78ery] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--motiva-control-height-md);
    padding-inline: 14px;

    border: none;
    border-radius: var(--motiva-radius-full);
    background: rgba(255, 255, 255, 0.7);
    color: var(--motiva-text-secondary);
    cursor: pointer;

    font-family: inherit;
    font-size: var(--motiva-font-size-caption, 13px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    white-space: nowrap;

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

.umt-chip:hover[b-ze6xa78ery] {
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-primary);
}

/* Open is the nav's own "you are here" treatment — opaque white and the
   raised pill shadow — so the control reads as active while its menu is
   showing, the same way the bell does. No size change: nothing in the
   cluster may move when something opens. */
.umt-chip-open[b-ze6xa78ery],
.umt-chip-open:hover[b-ze6xa78ery] {
    background: var(--motiva-surface-primary);
    color: var(--motiva-text-primary);
    box-shadow: var(--motiva-shadow-pill);
}

.umt-chip:focus-visible[b-ze6xa78ery] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: 2px;
}

.umt-chip-caret[b-ze6xa78ery] {
    display: flex;
    flex: 0 0 auto;
    color: var(--motiva-text-subtle);
    transition: transform var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.umt-chip-open .umt-chip-caret[b-ze6xa78ery] { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .umt-chip[b-ze6xa78ery],
    .umt-chip-caret[b-ze6xa78ery] { transition: none; }
}

/* ── The menu ──
   `inset-inline-end: 0` pins the menu's END edge to the chip's, which in
   this RTL bar is the LEFT one — so the menu grows rightward, into the
   page. That direction is the whole reason for the choice: the chip sits
   a few dozen pixels from the viewport's left edge, and a 208px menu
   anchored the other way would run straight off it. */
.umt-backdrop[b-ze6xa78ery] {
    position: fixed;
    inset: 0;
    z-index: 998;
}

.umt-menu[b-ze6xa78ery] {
    position: absolute;
    inset-block-start: calc(var(--motiva-control-height-md) + 8px);
    inset-inline-end: 0;
    z-index: 999;

    min-width: 208px;
    padding: 6px;

    border-radius: var(--motiva-radius-popover);
    background: var(--motiva-surface-solid);
    box-shadow: var(--motiva-shadow-popover);
}

.umt-menu-head[b-ze6xa78ery] {
    margin: 0;
    padding: 6px 10px 8px;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1;
    color: var(--motiva-text-subtle);
}

.umt-menu-item[b-ze6xa78ery] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;

    border: none;
    border-radius: var(--motiva-radius-sm);
    background: none;
    cursor: pointer;
    text-align: start;

    font-family: inherit;
    transition: background var(--motiva-motion-duration-fast) var(--motiva-motion-easing-standard);
}

.umt-menu-item:hover[b-ze6xa78ery] { background: var(--motiva-color-neutral-bg); }

/* The active item is marked by its check and its violet label, not by a
   fill: a filled row plus a check is the same fact twice, and the fill
   would fight the hover state on the row beside it. */
.umt-menu-item-active .umt-menu-item-label[b-ze6xa78ery] { color: var(--motiva-color-violet); }

.umt-menu-item:focus-visible[b-ze6xa78ery] {
    outline: 2px solid var(--motiva-color-focus-ring);
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .umt-menu-item[b-ze6xa78ery] { transition: none; }
}

.umt-menu-item-text[b-ze6xa78ery] {
    flex: 1 1 auto;
    min-width: 0;
}

.umt-menu-item-label[b-ze6xa78ery] {
    display: block;
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold);
    line-height: 1.2;
    color: var(--motiva-text-primary);
}

.umt-menu-item-desc[b-ze6xa78ery] {
    display: block;
    margin-block-start: 3px;
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium);
    line-height: 1.3;
    color: var(--motiva-text-subtle);
}

/* The slot is held whether or not it holds a mark, so the two labels
   line up and the menu does not reflow as the choice moves. */
.umt-menu-item-check[b-ze6xa78ery] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    width: 16px;
    color: var(--motiva-color-violet);
}