/*!
 * MVN client area interface: tokens, shell, components and the Lagom skin.
 * Everything here applies only under html.mvn-ui (set in overwrites/header.tpl).
 * The token block is the single source of values (DESIGN.md); never copy a value
 * out of it. The client area is RTL only; physical left/right appear only where noted.
 *
 * Contents
 *   1. Tokens (and Lagom's variables, mapped to them)
 *   2. Base: page, fonts, icons, links, focus
 *   3. Navigation rail            (unchanged; its active tab takes the page color)
 *   4. Top bar                    (unchanged)
 *   5. Page area (Lagom layout)
 *   6. Footer                     (unchanged)
 *   7. Components: page head, sub-navigation (tabs, filters, actions) and tabs, parts,
 *      framed lists and totals, links and action words, buttons, state, address,
 *      facts and rooms, meter, pager, alerts, forms, disclosure, conversation, prose
 *   8. Lagom and Bootstrap components in the new interface (modals, tooltips, menus …)
 *   9. Responsive: drawer (unchanged), wide screens, phones, touch, motion, print
 *
 * Page groups add their own scoped rules in assets/css/mvn/<group>.css.
 *
 * design-v2/gallery.html in the scratchpad shows every component in every state.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
html.mvn-ui {
    /* Ink: the graphite of the "mvn" wordmark and two quieter steps, all AA on white.
       The rail and the top bar read these; their values do not change. */
    --mvn-ink: #2b2f33;
    --mvn-ink-2: #474c53;
    --mvn-ink-3: #6b7079;

    /* Surfaces. The page is white paper (owner, 2026-10-28). The rail keeps its own
       grey; its active item is a tab cut from the page, so it takes the page color. */
    --mvn-page: #ffffff;
    --mvn-paper: #ffffff;          /* frames, fields and menus: the same sheet */
    --mvn-sunken: #f4f4f6;         /* small recessed fills only: disabled fields, code, quiet tags */
    --mvn-rail: #eaeaee;

    /* Lines: structure comes from hairlines, never from grey fills */
    --mvn-rule: #e2e3e8;           /* frame edges, section rules */
    --mvn-rule-soft: #edeef1;      /* rows inside a frame */
    --mvn-rule-2: #d1d3d9;         /* control borders */

    /* Interaction */
    --mvn-hover: rgba(43, 47, 51, .055);
    --mvn-press: rgba(43, 47, 51, .1);
    --mvn-row-hover: #fdf6f9;      /* a row with an action, under the pointer: a breath of the accent */

    /* The accent, MVN magenta: where the customer acts or is. The primary button,
       the active item, links, focus, selection and "waiting for you". */
    --mvn-accent: #b42e6d;
    --mvn-accent-strong: #93245a;
    --mvn-accent-wash: #fbeff5;
    --mvn-accent-line: rgba(180, 46, 109, .34);   /* a link's resting underline */
    --mvn-on-accent: #ffffff;

    /* Status: a tone and its wash, always with a word */
    --mvn-ok: #17795a;
    --mvn-ok-wash: #e5f4ed;
    --mvn-warn: #925800;
    --mvn-warn-wash: #fdf2dc;
    --mvn-bad: #bd3229;
    --mvn-bad-strong: #9c2820;
    --mvn-bad-wash: #fcebea;
    --mvn-info: #2d64a6;
    --mvn-info-wash: #eaf1f9;

    --mvn-focus: var(--mvn-accent);
    --mvn-scrim: rgba(23, 26, 29, .4);
    /* The one elevation: menus, modals and the phone drawer. Nothing else casts a shadow. */
    --mvn-shadow-pop: 0 18px 44px -14px rgba(43, 47, 51, .28), 0 0 0 1px rgba(43, 47, 51, .06);

    /* Type: one family (owner, 2026-10-28). Mono only for technical values. */
    --mvn-font: "IBM Plex Sans Hebrew", "Noto Sans Hebrew", "Segoe UI", system-ui, sans-serif;
    --mvn-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --mvn-face: var(--mvn-font);   /* inherited: the face of an element and its subtree */

    --mvn-t-micro: 12px;           /* counts in tabs */
    --mvn-t-caption: 13px;         /* column labels, sub-lines, help, state tags */
    --mvn-t-small: 14px;           /* cells, actions, buttons, labels */
    --mvn-t-body: 15px;            /* row titles, values, fields */
    --mvn-t-prose: 16px;           /* articles and messages */
    --mvn-t-lede: 18px;            /* the page's status sentence */
    --mvn-t-total: 18px;           /* totals */
    --mvn-t-part: 20px;            /* section titles */
    --mvn-t-title: clamp(30px, 1.5vw + 18px, 40px);
    --mvn-t-clock: clamp(40px, 2vw + 22px, 56px);
    --mvn-t-icon: 12px;
    --mvn-t-icon-md: 16px;
    --mvn-t-sec: .4em;             /* the clock's seconds */
    --mvn-t-mark: .78em;           /* the mark after a link that leaves the client area */
    --mvn-t-code: .92em;

    --mvn-w-regular: 400;
    --mvn-w-medium: 500;
    --mvn-w-strong: 600;
    --mvn-w-display: 700;          /* page titles */

    --mvn-lh-display: 1.15;
    --mvn-lh-ui: 1.35;
    --mvn-lh-lede: 1.55;
    --mvn-lh-text: 1.6;
    --mvn-lh-prose: 1.75;
    --mvn-track-tight: -.01em;     /* Latin and digits at display sizes */

    /* Space, on a 4px grid */
    --mvn-s-half: 2px;
    --mvn-s-1: 4px;
    --mvn-s-2: 8px;
    --mvn-s-3: 12px;
    --mvn-s-4: 16px;
    --mvn-s-5: 24px;
    --mvn-s-6: 32px;
    --mvn-s-7: 48px;
    --mvn-s-8: 64px;

    /* Lines, rings, marks, motion */
    --mvn-hair: 1px;
    --mvn-line: 2px;               /* the active tab's underline, a hovered link's underline */
    --mvn-ring: 2px;
    --mvn-ring-gap: 2px;
    --mvn-dot: 6px;                /* the dot inside a state tag */
    --mvn-seal: 8px;               /* the dot that opens a status sentence */
    --mvn-halo: 4px;               /* the ring of wash around it */
    --mvn-underline-gap: 4px;
    --mvn-dim: .7;                 /* a quiet mark beside a word */
    --mvn-press-fill: inset 0 0 0 100vmax var(--mvn-press);   /* a pressed filled button */
    --mvn-ease: cubic-bezier(.2, .7, .2, 1);
    --mvn-dur: .15s;
    --mvn-dur-spin: .8s;
    --mvn-busy-delay: .2s;         /* a loading state shows only after about 200 ms */

    /* Radii */
    --mvn-r-shell: 14px;           /* modals, menus */
    --mvn-r-panel: 10px;           /* frames, alerts */
    --mvn-r-ctl: 8px;              /* buttons, fields */
    --mvn-r-sm: 6px;               /* state tags, tooltips */
    --mvn-r-tab: 10px;             /* the rail's items */
    --mvn-r-pill: 999px;           /* counts, meters */

    /* Sizes */
    --mvn-ctl-h: 40px;             /* buttons */
    --mvn-ctl-h-sm: 34px;
    --mvn-field-h: 44px;           /* inputs and selects */
    --mvn-textarea-h: 128px;
    --mvn-touch: 44px;
    --mvn-act-h: 32px;             /* an action word's target */
    --mvn-icon-btn: 28px;
    --mvn-tag-h: 24px;             /* a state tag */
    --mvn-count-h: 20px;           /* a count in a tab */
    --mvn-row-min: 64px;
    --mvn-cols-h: 40px;
    --mvn-foot-min: 56px;
    --mvn-subnav-h: 46px;
    --mvn-frame-pad: 20px;
    --mvn-btn-pad: 16px;
    --mvn-btn-pad-sm: 12px;
    --mvn-check: 18px;
    --mvn-caret: 5px;              /* a select's caret */
    --mvn-spinner: 14px;
    --mvn-meter-h: 6px;
    --mvn-fact-label: 128px;

    /* Layout */
    --mvn-rail-w: 248px;
    --mvn-gutter: 32px;
    --mvn-content-w: 1180px;
    --mvn-page-gap: 48px;          /* between a page's parts */
    --mvn-margin-w: 176px;         /* the column section titles hang in, from 1280px */
    --mvn-margin-gap: 40px;
    --mvn-col-gap: 24px;           /* between a list's columns */
    --mvn-measure: 62ch;           /* the status sentence */
    --mvn-measure-prose: 68ch;
    --mvn-form-w: 560px;
    --mvn-search-w: 280px;
    --mvn-tooltip-w: 280px;
    --mvn-modal-w: 520px;
    --mvn-side-w: 330px;           /* legacy dashboard column */

    /* Minimum column widths, so lists stacked on one page line up */
    --mvn-col-state: 136px;
    --mvn-col-date: 104px;
    --mvn-col-amount: 112px;
    --mvn-col-acts: 96px;
    --mvn-col-meter: 176px;        /* a usage meter in a list */

    /* Lagom's variables, mapped to the tokens above. They sit on <html> next to
       Lagom's own :root block, so every Lagom variable derived from them
       (buttons, states, links, panels) follows. */
    --font-family-base: var(--mvn-font);
    --font-family-monospace: var(--mvn-mono);
    --font-size-base: var(--mvn-t-small);
    --font-weight-light: var(--mvn-w-regular);
    --font-weight-bold: var(--mvn-w-strong);
    --font-weight-black: var(--mvn-w-display);
    --body-bg: var(--mvn-page);
    --gray-darker: var(--mvn-ink);
    --gray-base: var(--mvn-ink-2);
    --gray-lighter: var(--mvn-ink-3);
    --gray-lighter-2: var(--mvn-ink-3);
    --gray-lighter-3: var(--mvn-rule-2);
    --gray-lighter-4: var(--mvn-rule);
    --gray-faded: var(--mvn-sunken);
    --gray-icons: var(--mvn-ink-3);
    --gray-icons-hover: var(--mvn-ink);
    --gray-gradient-start: var(--mvn-page);
    --gray-gradient-end: var(--mvn-page);
    --text-heading-color: var(--mvn-ink);
    --text-body-color: var(--mvn-ink-2);
    --text-lighter-color: var(--mvn-ink-3);
    --text-faded-color: var(--mvn-ink-3);
    --link-color: var(--mvn-accent);
    --link-hover-color: var(--mvn-accent-strong);

    --brand-primary: var(--mvn-accent);
    --brand-primary-lighter: var(--mvn-accent);
    --brand-primary-lighter-2: var(--mvn-accent-wash);
    --brand-primary-lighter-3: var(--mvn-accent-wash);
    --brand-primary-lighter-4: var(--mvn-accent-wash);
    --brand-primary-darker: var(--mvn-accent-strong);
    --brand-primary-gradient-start: var(--mvn-accent);
    --brand-primary-gradient-end: var(--mvn-accent);

    --brand-secondary: var(--mvn-ink);
    --brand-secondary-lighter: var(--mvn-ink-2);
    --brand-secondary-lighter-2: var(--mvn-ink-3);
    --brand-secondary-lighter-3: var(--mvn-ink-2);
    --brand-secondary-darker: var(--mvn-ink);
    --brand-secondary-gradient-start: var(--mvn-ink);
    --brand-secondary-gradient-end: var(--mvn-ink);

    --brand-info: var(--mvn-info);
    --brand-info-lighter: var(--mvn-info);
    --brand-info-lighter-2: var(--mvn-info-wash);
    --brand-info-lighter-3: var(--mvn-info-wash);
    --brand-info-lighter-4: var(--mvn-info-wash);
    --brand-info-darker: var(--mvn-info);
    --brand-info-gradient-start: var(--mvn-info);
    --brand-info-gradient-end: var(--mvn-info);

    --brand-success: var(--mvn-ok);
    --brand-success-lighter: var(--mvn-ok);
    --brand-success-lighter-2: var(--mvn-ok-wash);
    --brand-success-lighter-3: var(--mvn-ok-wash);
    --brand-success-lighter-4: var(--mvn-ok-wash);
    --brand-success-darker: var(--mvn-ok);
    --brand-success-gradient-start: var(--mvn-ok);
    --brand-success-gradient-end: var(--mvn-ok);

    --brand-warning: var(--mvn-warn);
    --brand-warning-lighter: var(--mvn-warn);
    --brand-warning-lighter-2: var(--mvn-warn-wash);
    --brand-warning-lighter-3: var(--mvn-warn-wash);
    --brand-warning-lighter-4: var(--mvn-warn-wash);
    --brand-warning-darker: var(--mvn-warn);
    --brand-warning-gradient-start: var(--mvn-warn);
    --brand-warning-gradient-end: var(--mvn-warn);

    --brand-danger: var(--mvn-bad);
    --brand-danger-lighter: var(--mvn-bad);
    --brand-danger-lighter-2: var(--mvn-bad-wash);
    --brand-danger-lighter-3: var(--mvn-bad-wash);
    --brand-danger-lighter-4: var(--mvn-bad-wash);
    --brand-danger-darker: var(--mvn-bad-strong);
    --brand-danger-gradient-start: var(--mvn-bad);
    --brand-danger-gradient-end: var(--mvn-bad);

    --border-radius-xs: var(--mvn-r-sm);
    --border-radius-sm: var(--mvn-r-sm);
    --border-radius-base: var(--mvn-r-ctl);
    --border-radius-lg: var(--mvn-r-panel);
    --border-radius-xlg: var(--mvn-r-shell);
    --box-shadow-xs: none;
    --box-shadow-sm: none;
    --box-shadow-base: none;
    --box-shadow-lg: var(--mvn-shadow-pop);
    --box-shadow-xlg: var(--mvn-shadow-pop);

    /* Blocks, panels and lists: one hairline frame on the white page, no shadow */
    --ui-block-bg: var(--mvn-paper);
    --ui-block-border: var(--mvn-hair) solid var(--mvn-rule);
    --ui-block-border-color: var(--mvn-rule);
    --ui-block-border-radius: var(--mvn-r-panel);
    --ui-block-divider-color: var(--mvn-rule-soft);
    --ui-block-header-bg: transparent;
    --ui-block-link-hover-bg: var(--mvn-row-hover);
    --ui-block-link-active-bg: var(--mvn-accent-wash);
    --ui-block-shadow: none;
    --ui-block-shadow-lg: none;
    --ui-block-shadow-xlg: none;
    --ui-block-padding-base: var(--mvn-frame-pad);
    --ui-block-padding-base-v: var(--mvn-s-4);
    --ui-nav-link-active-bg: var(--mvn-accent-wash);
    --ui-nav-link-hover-color: var(--mvn-ink);
    --ui-nav-link-icon-color: var(--mvn-ink-3);
    --ui-nav-link-icon-hover-color: var(--mvn-ink);
    --panel-sidebar-link-color: var(--mvn-ink-2);
    --panel-sidebar-link-icon-color: var(--mvn-ink-3);
    --panel-sidebar-link-hover-bg: var(--mvn-hover);
    --panel-sidebar-link-hover-color: var(--mvn-ink);
    --panel-title-color: var(--mvn-ink);
    --panel-title-font-weight: var(--mvn-w-strong);
    --list-group-item-link-color: var(--mvn-ink-2);
    --list-group-item-link-hover-color: var(--mvn-ink);
    --list-group-item-icon-color: var(--mvn-ink-3);

    /* Fields */
    --input-bg: var(--mvn-paper);
    --input-hover-bg: var(--mvn-paper);
    --input-focus-bg: var(--mvn-paper);
    --input-border-color: var(--mvn-rule-2);
    --input-hover-border-color: var(--mvn-ink-3);
    --input-focus-border-color: var(--mvn-accent);
    --input-focus-box-shadow: none;
    --input-btn-focus-box-shadow: none;
    --input-border-radius: var(--mvn-r-ctl);
    --input-color: var(--mvn-ink);
    --input-color-placeholder: var(--mvn-ink-3);
    --input-disabled-bg: var(--mvn-sunken);
    --input-disabled-color: var(--mvn-ink-3);
    --input-label-color: var(--mvn-ink);
    --input-label-font-size: var(--mvn-t-small);
    --input-label-font-weight: var(--mvn-w-medium);
    --input-group-addon-bg: var(--mvn-sunken);
    --icheck-bg: var(--mvn-paper);
    --icheck-border-width: var(--mvn-hair);
    --icheck-border-color: var(--mvn-ink-3);
    --icheck-hover-border-color: var(--mvn-accent);
    --icheck-active-bg: var(--mvn-accent);
    --icheck-active-border-color: var(--mvn-accent);
    --icheck-disabled-bg: var(--mvn-sunken);
    --icheck-disabled-border-color: var(--mvn-rule-2);
    --form-feedback-invalid-color: var(--mvn-bad);
    --form-feedback-valid-color: var(--mvn-ok);

    /* Buttons: the primary is magenta; every other kind is the framed white button.
       WHMCS marks its main form actions "success" (pay, save), so they read as primary. */
    --btn-base-font-weight: var(--mvn-w-medium);
    --btn-sm-font-weight: var(--mvn-w-medium);
    --btn-default-bg: var(--mvn-paper);
    --btn-default-border: var(--mvn-rule-2);
    --btn-default-color: var(--mvn-ink);
    --btn-default-hover-bg: var(--mvn-paper);
    --btn-default-hover-border: var(--mvn-ink);
    --btn-default-hover-color: var(--mvn-ink);
    --btn-default-active-bg: var(--mvn-sunken);
    --btn-default-active-border: var(--mvn-ink);
    --btn-primary-faded-bg: var(--mvn-paper);
    --btn-primary-faded-border: var(--mvn-rule-2);
    --btn-primary-faded-color: var(--mvn-ink);
    --btn-primary-faded-hover-bg: var(--mvn-paper);
    --btn-primary-faded-hover-border: var(--mvn-ink);
    --btn-primary-faded-hover-color: var(--mvn-ink);
    --btn-primary-faded-active-bg: var(--mvn-sunken);
    --btn-primary-faded-active-border: var(--mvn-ink);
    --btn-secondary-bg: var(--mvn-paper);
    --btn-secondary-border: var(--mvn-rule-2);
    --btn-secondary-color: var(--mvn-ink);
    --btn-secondary-hover-bg: var(--mvn-paper);
    --btn-secondary-hover-border: var(--mvn-ink);
    --btn-secondary-hover-color: var(--mvn-ink);
    --btn-secondary-active-bg: var(--mvn-sunken);
    --btn-secondary-active-border: var(--mvn-ink);
    --btn-info-bg: var(--mvn-paper);
    --btn-info-border: var(--mvn-rule-2);
    --btn-info-color: var(--mvn-ink);
    --btn-info-hover-bg: var(--mvn-paper);
    --btn-info-hover-border: var(--mvn-ink);
    --btn-info-hover-color: var(--mvn-ink);
    --btn-info-active-bg: var(--mvn-sunken);
    --btn-info-active-border: var(--mvn-ink);
    --btn-success-bg: var(--mvn-accent);
    --btn-success-border: var(--mvn-accent);
    --btn-success-color: var(--mvn-on-accent);
    --btn-success-hover-bg: var(--mvn-accent-strong);
    --btn-success-hover-border: var(--mvn-accent-strong);
    --btn-success-hover-color: var(--mvn-on-accent);
    --btn-success-active-bg: var(--mvn-accent-strong);
    --btn-success-active-border: var(--mvn-accent-strong);
    --btn-danger-bg: var(--mvn-bad);
    --btn-danger-border: var(--mvn-bad);
    --btn-danger-hover-bg: var(--mvn-bad-strong);
    --btn-danger-hover-border: var(--mvn-bad-strong);
    --btn-disabled-bg: var(--mvn-sunken);
    --btn-disabled-border: var(--mvn-rule);
    --btn-disabled-color: var(--mvn-ink-3);
    --btn-disabled-opacity: 1;

    /* State labels and badges */
    --label-text-transform: none;
    --badge-bg: var(--mvn-sunken);
    --badge-color: var(--mvn-ink-2);
    --badge-border-radius: var(--mvn-r-pill);

    /* Tables (DataTables lists until each page is rewritten) */
    --table-container-border: var(--mvn-hair) solid var(--mvn-rule);
    --table-container-border-radius: var(--mvn-r-panel);
    --table-container-box-shadow: none;
    --table-border-color: var(--mvn-rule-soft);
    --table-th-font-color: var(--mvn-ink-3);
    --table-th-font-size: var(--mvn-t-caption);
    --table-td-font-color: var(--mvn-ink-2);
    --table-bg-hover: var(--mvn-row-hover);
    --table-bg-active: var(--mvn-accent-wash);

    /* In-page tabs read like the sub-navigation bar */
    --nav-tabs-border-color: var(--mvn-rule);
    --nav-tabs-link-color: var(--mvn-ink-2);
    --nav-tabs-link-hover-color: var(--mvn-ink);
    --nav-tabs-link-active-color: var(--mvn-ink);
    --nav-tabs-link-active-border-color: var(--mvn-accent);
    --nav-tabs-link-active-border-width: var(--mvn-line);
    --nav-tabs-link-icon-color: var(--mvn-ink-3);

    /* Pagination: the current page is the accent's wash */
    --pagination-bg: transparent;
    --pagination-border: transparent;
    --pagination-color: var(--mvn-ink-2);
    --pagination-hover-bg: var(--mvn-hover);
    --pagination-hover-border: transparent;
    --pagination-active-bg: var(--mvn-accent-wash);
    --pagination-active-border: transparent;
    --pagination-active-color: var(--mvn-accent);

    /* Overlays: modals, tooltips, popovers and dropdowns */
    --modal-backdrop-bg: var(--mvn-scrim);
    --modal-content-bg: var(--mvn-paper);
    --modal-content-border-color: transparent;
    --modal-content-border-radius: var(--mvn-r-shell);
    --modal-content-box-shadow: var(--mvn-shadow-pop);
    --modal-content-box-shadow-sm-up: var(--mvn-shadow-pop);
    --modal-header-border-color: var(--mvn-rule);
    --modal-footer-border-color: var(--mvn-rule);
    --modal-title-font-size: var(--mvn-t-part);
    --modal-title-font-weight: var(--mvn-w-strong);
    --modal-inner-padding: var(--mvn-s-5);
    --tooltip-bg: var(--mvn-ink);
    --tooltip-color: var(--mvn-paper);
    --tooltip-border-radius: var(--mvn-r-sm);
    --tooltip-box-shadow: none;
    --tooltip-font-size: var(--mvn-t-caption);
    --tooltip-padding-x: var(--mvn-s-3);
    --tooltip-padding-y: var(--mvn-s-2);
    --tooltip-arrow-color: var(--mvn-ink);
    --dropdown-bg: var(--mvn-paper);
    --dropdown-border: 0;
    --dropdown-border-radius: var(--mvn-r-shell);
    --dropdown-box-shadow: var(--mvn-shadow-pop);
    --dropdown-link-color: var(--mvn-ink-2);
    --dropdown-link-hover-bg: var(--mvn-hover);
    --dropdown-link-hover-color: var(--mvn-ink);

    /* Meters */
    --progress-bg: var(--mvn-rule-soft);
    --progress-bar-bg: var(--mvn-ok);
    --progress-height: var(--mvn-meter-h);
    --progress-border-radius: var(--mvn-r-pill);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
html.mvn-ui body.lagom {
    /* The old header was fixed; modern-css-mvn.css pads the page for it with !important. */
    padding-top: 0 !important;
    padding-inline-start: var(--mvn-rail-w);
    background: var(--mvn-page);
    color: var(--mvn-ink-2);
    font-size: var(--mvn-t-small);
    line-height: var(--mvn-lh-text);
    -webkit-font-smoothing: antialiased;
}

/* modern-css-mvn.css forces its font on ".lagom *" with !important, so the face is
   set the same way. Each element takes --mvn-face, which inherits; code sets it to
   mono. Icons keep theirs. */
html.mvn-ui body.lagom *:not(i[class]):not(.lm):not(.ls):not(.fa):not(.fas):not(.far):not(.fal):not(.fad):not(.fab):not(.glyphicon) {
    font-family: var(--mvn-face) !important;
}
html.mvn-ui body.lagom :is(code, pre, kbd, samp, .mvn-mono) {
    --mvn-face: var(--mvn-mono);
    font-size: var(--mvn-t-code);
}
/* The same ".lagom *" rule also hits Font Awesome; give icons their fonts back.
   WHMCS menu icons often carry only "fa-…" classes, without a style class. */
html.mvn-ui body.lagom i[class*="fa-"]:not(.ls):not(.lm),
html.mvn-ui body.lagom :is(.fas, .fa-solid, .fa) {
    font-style: normal;
}
/* Regular ("far"), light and duotone icons render solid: the free Font Awesome
   lacks most of them in those styles, which showed as empty boxes. */
html.mvn-ui body.lagom i[class*="fa-"]:not(.ls):not(.lm):not(.fab):not(.fa-brands),
html.mvn-ui body.lagom :is(.fas, .fa-solid, .fa, .far, .fa-regular, .fal, .fa-light, .fad, .fa-duotone) {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}
html.mvn-ui body.lagom :is(.fab, .fa-brands) {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400;
}
/* Page content: WHMCS and Lagom name Font Awesome 5 Pro icons, regular and light
   styles included, so it uses WHMCS's bundled copy (/assets/css/fontawesome-all.min.css,
   loaded in overwrites/header.tpl). The rail and top bar keep Font Awesome 6 Free names. */
html.mvn-ui body.lagom .app-main i[class*="fa-"]:not(.ls):not(.lm):not(.fab):not(.fa-brands):not(.fad):not(.fa-duotone):not(.far):not(.fa-regular):not(.fal):not(.fa-light),
html.mvn-ui body.lagom .app-main :is(.fa, .fas, .fa-solid) {
    font-family: "Font Awesome 5 Pro" !important;
    font-weight: 900 !important;
}
html.mvn-ui body.lagom .app-main :is(.far, .fa-regular) {
    font-family: "Font Awesome 5 Pro" !important;
    font-weight: 400 !important;
}
html.mvn-ui body.lagom .app-main :is(.fal, .fa-light) {
    font-family: "Font Awesome 5 Pro" !important;
    font-weight: 300 !important;
}
html.mvn-ui body.lagom .app-main :is(.fad, .fa-duotone) {
    font-family: "Font Awesome 5 Duotone" !important;
    font-weight: 900 !important;
}
html.mvn-ui body.lagom .app-main :is(.fab, .fa-brands) {
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: 400 !important;
}
html.mvn-ui bdi {
    unicode-bidi: isolate;
}
html.mvn-ui ::selection {
    background: var(--mvn-accent-wash);
    color: var(--mvn-ink);
}

/* Keyboard focus. Lagom's theme-rtl.css sets "outline: none !important" on links,
   buttons, inputs and divs at :focus-visible, which hid every focus ring, the
   rail's and top bar's included; only !important brings the ring back. Mouse
   users see no change. */
html.mvn-ui body.lagom :focus-visible {
    outline: var(--mvn-ring) solid var(--mvn-focus) !important;
    outline-offset: var(--mvn-ring-gap);
}
html.mvn-ui body.lagom :focus:not(:focus-visible) {
    outline: none;
}

html.mvn-ui .mvn-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ==========================================================================
   3. Navigation rail (unchanged; the active tab takes the page color)
   ========================================================================== */
.mvn-rail {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    width: var(--mvn-rail-w);
    padding-block: 22px 18px;
    /* No end padding: the active item runs into the page. */
    padding-inline: 14px 0;
    background: var(--mvn-rail);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.mvn-rail-logo {
    display: block;
    align-self: flex-start;
    margin-block-end: 26px;
    margin-inline: 10px;
    border-radius: 6px;
}
.mvn-rail-logo img {
    display: block;
    width: 116px;
    height: auto;
}

.mvn-nav-group {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mvn-nav-group + .mvn-nav-group {
    margin-block-start: 14px;
    padding-block-start: 14px;
}
.mvn-nav-group + .mvn-nav-group::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 12px 26px;
    border-block-start: 1px solid var(--mvn-rule-2);
}
.mvn-nav-group li + li {
    margin-block-start: 2px;
}

html.mvn-ui .mvn-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 38px;
    margin-inline-end: 12px;
    padding-inline: 12px 14px;
    border-radius: var(--mvn-r-tab);
    color: var(--mvn-ink-2);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .15s var(--mvn-ease), color .15s var(--mvn-ease);
}
html.mvn-ui .mvn-nav-link:hover,
html.mvn-ui .mvn-nav-link:focus {
    background: var(--mvn-hover);
    color: var(--mvn-ink);
    text-decoration: none;
}
.mvn-nav-link i {
    flex: none;
    width: 18px;
    font-size: 15px;
    text-align: center;
    color: var(--mvn-ink-3);
    transition: color .15s var(--mvn-ease);
}
html.mvn-ui .mvn-nav-link.is-admin,
html.mvn-ui .mvn-nav-link.is-admin i {
    color: var(--mvn-accent);
}
.mvn-nav-badge {
    margin-inline-start: auto;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--mvn-accent);
    color: var(--mvn-on-accent);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

/* The active item is a tab cut from the page: same color, flush with it,
   joined by concave corners. */
html.mvn-ui .mvn-nav-link.is-active {
    margin-inline-end: 0;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    background: var(--mvn-page);
    color: var(--mvn-ink);
    font-weight: 600;
}
.mvn-nav-link.is-active i {
    color: var(--mvn-accent);
}
.mvn-nav-link.is-active::before,
.mvn-nav-link.is-active::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    width: var(--mvn-r-tab);
    height: var(--mvn-r-tab);
    pointer-events: none;
}
/* Physical corners: radial gradients have no logical positions. In RTL the
   tab meets the page on its left, so each arc is centered on the right. */
.mvn-nav-link.is-active::before {
    bottom: 100%;
    background: radial-gradient(circle at 100% 0, transparent calc(var(--mvn-r-tab) - .5px), var(--mvn-page) var(--mvn-r-tab));
}
.mvn-nav-link.is-active::after {
    top: 100%;
    background: radial-gradient(circle at 100% 100%, transparent calc(var(--mvn-r-tab) - .5px), var(--mvn-page) var(--mvn-r-tab));
}
[dir="ltr"] .mvn-nav-link.is-active::before {
    background: radial-gradient(circle at 0 0, transparent calc(var(--mvn-r-tab) - .5px), var(--mvn-page) var(--mvn-r-tab));
}
[dir="ltr"] .mvn-nav-link.is-active::after {
    background: radial-gradient(circle at 0 100%, transparent calc(var(--mvn-r-tab) - .5px), var(--mvn-page) var(--mvn-r-tab));
}

.mvn-rail-foot {
    margin-block-start: auto;
    margin-inline-end: 14px;
    padding-block-start: 20px;
}
html.mvn-ui .mvn-order {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding-inline: 14px;
    border-radius: var(--mvn-r-ctl);
    background: var(--mvn-accent);
    color: var(--mvn-on-accent);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s var(--mvn-ease);
}
html.mvn-ui .mvn-order:hover,
html.mvn-ui .mvn-order:focus {
    background: var(--mvn-accent-strong);
    color: var(--mvn-on-accent);
    text-decoration: none;
}
.mvn-order i {
    font-size: 13px;
}

.mvn-scrim {
    position: fixed;
    inset: 0;
    z-index: 1039;
    background: var(--mvn-scrim);
}
.mvn-scrim[hidden] {
    display: none;
}


/* ==========================================================================
   4. Top bar (unchanged)
   ========================================================================== */
.mvn-top {
    position: relative;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 10px;
    /* Lagom's body is a flex column; without a width, auto margins shrink the bar. */
    width: 100%;
    max-width: calc(var(--mvn-content-w) + 2 * var(--mvn-gutter));
    min-height: 64px;
    margin-inline: auto;
    padding-inline: var(--mvn-gutter);
}
.mvn-top-menu,
.mvn-top-logo {
    display: none;
}
html.mvn-ui .mvn-top-menu {
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-inline-start: -8px;
    border: 0;
    border-radius: var(--mvn-r-ctl);
    background: transparent;
    color: var(--mvn-ink);
    font-size: 18px;
    cursor: pointer;
}
.mvn-top-logo img {
    display: block;
    width: 84px;
    height: auto;
}

.mvn-viewing {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding-block: 5px;
    padding-inline: 12px 6px;
    border-radius: 999px;
    background: var(--mvn-ink);
    color: var(--mvn-paper);
    font-size: 13px;
    line-height: 1.3;
}
.mvn-viewing-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
html.mvn-ui .mvn-viewing a {
    flex: none;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: var(--mvn-paper);
    font-weight: 500;
    text-decoration: none;
}
html.mvn-ui .mvn-viewing a:hover {
    background: rgba(255, 255, 255, .24);
    color: var(--mvn-paper);
}

.mvn-top-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: auto;
}
html.mvn-ui .mvn-top-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding-inline: 12px;
    border-radius: var(--mvn-r-ctl);
    color: var(--mvn-ink-2);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s var(--mvn-ease);
}
html.mvn-ui .mvn-top-btn:hover,
html.mvn-ui .mvn-top-btn:focus {
    background: var(--mvn-hover);
    color: var(--mvn-ink);
    text-decoration: none;
}
.mvn-top-btn i {
    font-size: 16px;
    color: var(--mvn-ink-3);
}
.mvn-count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--mvn-accent);
    color: var(--mvn-on-accent);
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
}

/* Account switcher: the current account; opens a list of the user's other accounts */
.mvn-account {
    position: relative;
}
html.mvn-ui .mvn-account-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    max-width: 300px;
    padding-block: 4px;
    padding-inline: 4px 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--mvn-ink);
    font-size: 14px;
    text-align: start;
    cursor: pointer;
    transition: background-color .15s var(--mvn-ease);
}
html.mvn-ui button.mvn-account-btn:hover,
html.mvn-ui .mvn-account-btn[aria-expanded="true"] {
    background: var(--mvn-hover);
}
html.mvn-ui .mvn-account-btn.is-static {
    cursor: default;
}
.mvn-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mvn-ink);
    color: var(--mvn-paper);
    font-size: 13px;
}
.mvn-account-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}
.mvn-account-name {
    overflow: hidden;
    color: var(--mvn-ink);
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.mvn-account-more {
    color: var(--mvn-ink-3);
    font-size: 12.5px;
}
.mvn-switch-icon {
    flex: none;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--mvn-ink-3);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mvn-menu {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline-end: 0;
    z-index: 1050;
    width: 280px;
    max-height: min(420px, 70vh);
    padding: 6px;
    overflow-y: auto;
    border-radius: 12px;
    background: var(--mvn-paper);
    box-shadow: var(--mvn-shadow-pop);
}
.mvn-menu[hidden] {
    display: none;
}
.mvn-menu form {
    margin: 0;
}
.mvn-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
html.mvn-ui .mvn-menu-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding-inline: 12px;
    border: 0;
    border-radius: var(--mvn-r-ctl);
    background: transparent;
    color: var(--mvn-ink-2);
    font-size: 14px;
    text-align: start;
    cursor: pointer;
}
html.mvn-ui button.mvn-menu-row:hover,
html.mvn-ui button.mvn-menu-row:focus-visible {
    background: var(--mvn-hover);
    color: var(--mvn-ink);
}
html.mvn-ui .mvn-menu-row:disabled {
    color: var(--mvn-ink-3);
    cursor: not-allowed;
}
html.mvn-ui .mvn-menu-row.is-current {
    color: var(--mvn-ink);
    font-weight: 600;
    cursor: default;
}
.mvn-menu-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.mvn-menu-row .fa-check {
    color: var(--mvn-accent);
    font-size: 13px;
}
.mvn-menu-note {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--mvn-sunken);
    color: var(--mvn-ink-3);
    font-size: 12px;
}


/* ==========================================================================
   5. Page area (Lagom's layout: .app-main > .main-header + .main-body)
   The head (includes/overwrites/pageheader.tpl) sits in .main-header; the
   sub-navigation bar and the page's own template sit in .main-body.
   ========================================================================== */
html.mvn-ui body.lagom .app-main {
    margin: 0;
    padding: 0;
    background: transparent;
}
/* mvn-header.css pins the container to 1200px and 30px with !important. */
html.mvn-ui body.lagom .app-main .container {
    max-width: calc(var(--mvn-content-w) + 2 * var(--mvn-gutter)) !important;
    padding-inline: var(--mvn-gutter) !important;
}
html.mvn-ui body.lagom .main-header {
    margin: 0;
    padding-block: var(--mvn-s-5) 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
/* A head file that prints nothing leaves no gap. */
html.mvn-ui body.lagom .main-header:not(:has(.mvn-head)) {
    padding: 0;
}
html.mvn-ui body.lagom .main-body {
    padding-block: var(--mvn-s-6) 0;
    background: transparent;
}
/* No side column: the bar sits above the content. */
html.mvn-ui body.lagom .main-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* The space before the footer is the content's own. !important: modern-css-mvn.css sets
   ".main-content { padding-bottom: 0 !important }" for every page. */
html.mvn-ui body.lagom .main-grid > .main-content,
html.mvn-ui body.lagom .main-body > .container > .main-content {
    flex: none;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 var(--mvn-s-8) !important;
}

/* ==========================================================================
   6. Footer (unchanged)
   ========================================================================== */
.mvn-foot {
    width: 100%;
    max-width: calc(var(--mvn-content-w) + 2 * var(--mvn-gutter));
    margin-inline: auto;
    padding-block: 0 28px;
    padding-inline: var(--mvn-gutter);
    color: var(--mvn-ink-3);
    font-size: 13px;
}
.mvn-foot-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    padding-block-start: 18px;
    border-block-start: 1px solid var(--mvn-rule);
}
html.mvn-ui .mvn-foot a {
    color: var(--mvn-ink-2);
    text-decoration: none;
}
html.mvn-ui .mvn-foot a:hover {
    color: var(--mvn-accent);
}
.mvn-foot-copy {
    margin-inline-start: auto;
}

/* ==========================================================================
   7. Components
   Scoped, mvn- prefixed, tokens only. design-v2/gallery.html shows each one in
   each state; DESIGN.md says when to use which.
   ========================================================================== */

/* --------------------------------------------------------------------------
   7.1 Page and page head
   A page is a column of parts. Its head: an optional back link, the title, one
   sentence that says what is going on, and the action that sentence motivates.
   -------------------------------------------------------------------------- */
.mvn-page {
    display: flex;
    flex-direction: column;
    gap: var(--mvn-page-gap);
    min-width: 0;
    color: var(--mvn-ink-2);
    font-size: var(--mvn-t-body);
    line-height: var(--mvn-lh-text);
}
/* One class of weight: beats Lagom's element rules, loses to every component rule. */
.mvn-page :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, blockquote),
.mvn-head :where(h1, h2, h3, p, ul, dl, dd) {
    margin: 0;
}

.mvn-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--mvn-s-5) var(--mvn-s-7);
}
.mvn-head-main {
    display: flex;
    flex: 1 1 30rem;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}
.mvn-head-aside {
    flex: none;
}
.mvn-head-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-self: flex-end;
    gap: var(--mvn-s-2);
}
html.mvn-ui .mvn-back {
    display: inline-flex;
    align-items: center;
    gap: var(--mvn-s-2);
    min-height: var(--mvn-act-h);
    margin-block-end: var(--mvn-s-1);
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-small);
    font-weight: var(--mvn-w-medium);
    text-decoration: none;
    transition: color var(--mvn-dur) var(--mvn-ease);
}
html.mvn-ui .mvn-back:hover {
    color: var(--mvn-accent);
    text-decoration: none;
}
.mvn-back i {
    font-size: var(--mvn-t-icon);
}
html.mvn-ui .mvn-title {
    margin: 0;
    color: var(--mvn-ink);
    font-size: var(--mvn-t-title);
    font-weight: var(--mvn-w-display);
    line-height: var(--mvn-lh-display);
    overflow-wrap: anywhere;
    text-wrap: balance;
}
/* The status sentence: plain words; each fact may link to where it is handled. */
html.mvn-ui .mvn-lede {
    max-width: var(--mvn-measure);
    margin: var(--mvn-s-3) 0 0;
    color: var(--mvn-ink-2);
    font-size: var(--mvn-t-lede);
    line-height: var(--mvn-lh-lede);
    text-wrap: pretty;
}
html.mvn-ui .mvn-lede strong {
    color: var(--mvn-ink);
    font-weight: var(--mvn-w-strong);
}
/* A sentence with a tone opens with a seal: a dot in the tone, in a ring of its wash.
   ok: all is well; warn and bad: something waits; turn: it waits for the customer. */
.mvn-lede:is(.is-ok, .is-info, .is-warn, .is-bad, .is-turn, .is-accent)::before {
    content: "";
    display: inline-block;
    width: var(--mvn-seal);
    height: var(--mvn-seal);
    margin-inline: var(--mvn-halo) calc(var(--mvn-s-3) + var(--mvn-halo) / 2);
    border-radius: 50%;
    background: var(--mvn-ok);
    box-shadow: 0 0 0 var(--mvn-halo) var(--mvn-ok-wash);
    vertical-align: .1em;
}
.mvn-lede.is-info::before {
    background: var(--mvn-info);
    box-shadow: 0 0 0 var(--mvn-halo) var(--mvn-info-wash);
}
.mvn-lede.is-warn::before {
    background: var(--mvn-warn);
    box-shadow: 0 0 0 var(--mvn-halo) var(--mvn-warn-wash);
}
.mvn-lede.is-bad::before {
    background: var(--mvn-bad);
    box-shadow: 0 0 0 var(--mvn-halo) var(--mvn-bad-wash);
}
.mvn-lede:is(.is-turn, .is-accent)::before {
    background: var(--mvn-accent);
    box-shadow: 0 0 0 var(--mvn-halo) var(--mvn-accent-wash);
}
/* A sentence that opens with a state tag (a service, a domain, a ticket) */
.mvn-lede > .mvn-state:first-child {
    margin-inline-end: var(--mvn-s-2);
    font-size: var(--mvn-t-small);
    vertical-align: .1em;
}
.mvn-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mvn-s-2);
    margin-block-start: var(--mvn-s-5);
}
.mvn-head-actions form {
    display: contents;
}

/* The clock (home): Israel time with the Gregorian and Hebrew dates.
   assets/js/mvn-ui.js fills [data-mvn-clock] every second. */
.mvn-clock {
    text-align: end;
}
.mvn-clock p {
    margin: 0;
}
.mvn-clock .mvn-clock-time {
    color: var(--mvn-ink);
    font-size: var(--mvn-t-clock);
    font-weight: var(--mvn-w-medium);
    line-height: 1;
    letter-spacing: var(--mvn-track-tight);
    font-variant-numeric: tabular-nums;
}
.mvn-clock .mvn-clock-sec {
    margin-inline-start: var(--mvn-s-2);
    color: var(--mvn-accent);
    font-size: var(--mvn-t-sec);
    font-weight: var(--mvn-w-medium);
    letter-spacing: 0;
}
.mvn-clock .mvn-clock-date {
    margin-block-start: var(--mvn-s-3);
    color: var(--mvn-ink-2);
    font-size: var(--mvn-t-small);
}
.mvn-clock .mvn-clock-hebrew {
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-caption);
}

/* A search field (a page head's tool) */
.mvn-search {
    position: relative;
    min-width: min(var(--mvn-search-w), 100%);
}
.mvn-search > i {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--mvn-s-3);
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-small);
    transform: translateY(-50%);
    pointer-events: none;
}
html.mvn-ui .mvn-search :is(input, .form-control) {
    padding-inline-start: calc(var(--mvn-s-3) * 2 + var(--mvn-t-small));
}

/* --------------------------------------------------------------------------
   7.2 Sub-navigation bar and tabs
   WHMCS's side panels, rendered as one bar under the head by
   includes/overwrites/sidebar.tpl inside the layout's <nav class="mvn-subnav">,
   in this order: the page's navigation as tabs (an underline marks where the
   customer is), its status filters (.is-filter: the chosen one is a magenta
   wash), and its actions as buttons at the end (.is-actions). Groups wrap as a
   whole; no rule sits between them, so a wrapped line never starts with one.
   .mvn-tabs is the tab look for a page's own tabs (role="tablist").
   -------------------------------------------------------------------------- */
.mvn-subnav {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--mvn-s-1) var(--mvn-s-7);
    margin-block-end: var(--mvn-s-6);
    /* The rule is drawn inside the bar, so the active tab's line covers it. */
    box-shadow: inset 0 calc(-1 * var(--mvn-hair)) 0 var(--mvn-rule);
}
.mvn-subnav-group {
    display: flex;
    align-items: center;
    gap: var(--mvn-s-2);
    min-width: 0;
    max-width: 100%;
}
/* Lagom's .list-group stays on the container: Bootstrap's tab plugin and WHMCS's
   scripts look for it; its box is not wanted here. */
html.mvn-ui .mvn-subnav .mvn-subnav-links,
.mvn-tabs {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--mvn-s-1);
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    list-style: none;
    scrollbar-width: none;
}
.mvn-tabs {
    box-shadow: inset 0 calc(-1 * var(--mvn-hair)) 0 var(--mvn-rule);
}
html.mvn-ui :is(.mvn-subnav-link, .mvn-tab) {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--mvn-s-2);
    min-height: var(--mvn-subnav-h);
    margin: 0;
    padding-block: 0;
    padding-inline: var(--mvn-s-3);
    border: 0;
    background: none;
    color: var(--mvn-ink-2);
    font-size: var(--mvn-t-small);
    font-weight: var(--mvn-w-medium);
    line-height: var(--mvn-lh-ui);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--mvn-dur) var(--mvn-ease), box-shadow var(--mvn-dur) var(--mvn-ease);
}
html.mvn-ui :is(.mvn-subnav-link, .mvn-tab):hover {
    color: var(--mvn-ink);
    text-decoration: none;
    box-shadow: inset 0 calc(-1 * var(--mvn-line)) 0 var(--mvn-rule-2);
}
html.mvn-ui :is(.mvn-subnav-link.active, .mvn-tab.active, .mvn-tab[aria-selected="true"], .mvn-tab[aria-current]) {
    color: var(--mvn-ink);
    font-weight: var(--mvn-w-strong);
    box-shadow: inset 0 calc(-1 * var(--mvn-line)) 0 var(--mvn-accent);
}
html.mvn-ui :is(.mvn-subnav-link, .mvn-tab):is(.disabled, [aria-disabled="true"], :disabled) {
    color: var(--mvn-ink-3);
    box-shadow: none;
    cursor: not-allowed;
}
/* The links scroll sideways, so the ring is drawn inside them. */
html.mvn-ui body.lagom :is(.mvn-subnav-link, .mvn-tab):focus-visible {
    outline-offset: calc(-1 * var(--mvn-ring));
}
/* A count beside a tab or a filter: a small number in a quiet capsule */
.mvn-subnav-count,
.mvn-tab-count {
    display: inline-grid;
    place-items: center;
    min-width: var(--mvn-count-h);
    height: var(--mvn-count-h);
    padding-inline: var(--mvn-s-1);
    border-radius: var(--mvn-r-pill);
    background: var(--mvn-sunken);
    color: var(--mvn-ink-2);
    font-size: var(--mvn-t-micro);
    font-weight: var(--mvn-w-strong);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
:is(.mvn-subnav-link.active, .mvn-tab.active, .mvn-tab[aria-selected="true"]) :is(.mvn-subnav-count, .mvn-tab-count) {
    background: var(--mvn-accent-wash);
    color: var(--mvn-accent);
}
.mvn-subnav-text {
    display: inline-flex;
    align-items: center;
    min-height: var(--mvn-subnav-h);
    padding-inline: var(--mvn-s-3);
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-small);
    white-space: nowrap;
}
/* Status filters: what the list shows, not where the customer is. The chosen
   filter is a magenta wash; the others are plain words with their counts. */
html.mvn-ui .mvn-subnav-group.is-filter .mvn-subnav-link {
    align-self: center;
    min-height: var(--mvn-ctl-h-sm);
    border-radius: var(--mvn-r-ctl);
    transition: background-color var(--mvn-dur) var(--mvn-ease), color var(--mvn-dur) var(--mvn-ease);
}
html.mvn-ui .mvn-subnav-group.is-filter .mvn-subnav-link:hover {
    background: var(--mvn-hover);
    box-shadow: none;
}
html.mvn-ui .mvn-subnav-group.is-filter .mvn-subnav-link.active {
    background: var(--mvn-accent-wash);
    color: var(--mvn-accent);
    box-shadow: none;
}
html.mvn-ui .mvn-subnav-group.is-filter .mvn-subnav-link.active .mvn-subnav-count {
    background: var(--mvn-paper);
}
html.mvn-ui body.lagom .mvn-subnav-group.is-filter .mvn-subnav-link:focus-visible {
    outline-offset: calc(-1 * var(--mvn-ring));
}
/* The page's actions: buttons at the end of the bar (the first group takes the free space) */
.mvn-subnav-group.is-actions {
    margin-inline-start: auto;
    padding-block: var(--mvn-s-2);
}
.mvn-subnav-group.is-actions ~ .mvn-subnav-group.is-actions {
    margin-inline-start: 0;
}
html.mvn-ui .mvn-subnav-group.is-actions .mvn-subnav-links {
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mvn-s-2);
    overflow: visible;
}
/* A panel's form (a search) and its closing links */
.mvn-subnav-form,
.mvn-subnav-extra {
    display: flex;
    align-items: center;
    gap: var(--mvn-s-2);
    padding-block: var(--mvn-s-2);
}
.mvn-subnav-form form {
    display: flex;
    align-items: center;
    gap: var(--mvn-s-2);
    margin: 0;
}
html.mvn-ui .mvn-subnav-form .form-control {
    min-height: var(--mvn-ctl-h-sm);
    height: var(--mvn-ctl-h-sm);
}
html.mvn-ui .mvn-subnav-extra .btn {
    width: auto;
    min-height: var(--mvn-ctl-h-sm);
}

/* --------------------------------------------------------------------------
   7.3 Parts
   A section: a title, at most two links, and one body (a frame, or
   .mvn-part-body around several blocks). From 1280px the title hangs in a margin
   column at the start side and stays in view beside long lists.
   -------------------------------------------------------------------------- */
.mvn-part {
    display: flex;
    flex-direction: column;
    gap: var(--mvn-s-3);
    min-width: 0;
}
.mvn-part-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--mvn-s-1) var(--mvn-s-4);
    min-width: 0;
}
html.mvn-ui .mvn-part-title {
    margin: 0;
    color: var(--mvn-ink);
    font-size: var(--mvn-t-part);
    font-weight: var(--mvn-w-strong);
    line-height: var(--mvn-lh-ui);
}
.mvn-part-links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--mvn-s-4);
}
.mvn-part-body {
    display: flex;
    flex-direction: column;
    gap: var(--mvn-s-4);
    min-width: 0;
}
.mvn-part-note {
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-caption);
}

/* --------------------------------------------------------------------------
   7.4 Framed lists
   One thin frame, column labels, rows split by soft rules, and the row's next
   step as a word at its end. The frame is the grid; its rows share its columns
   (subgrid), so cells line up like a table. Set the columns with a preset class
   or --mvn-cols (tokens only), first column minmax(0, 1fr).
   Markup: .mvn-frame > .mvn-frame-cols? + ul.mvn-rows > li.mvn-row
           (.mvn-row-main, .mvn-row-cells > .mvn-cell…, .mvn-row-acts) + .mvn-frame-foot?
   -------------------------------------------------------------------------- */
.mvn-frame {
    --mvn-cols: minmax(0, 1fr) auto;
    display: grid;
    grid-template-columns: var(--mvn-cols);
    column-gap: var(--mvn-col-gap);
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: var(--mvn-hair) solid var(--mvn-rule);
    border-radius: var(--mvn-r-panel);
    background: var(--mvn-paper);
    list-style: none;
}
.mvn-frame > * {
    grid-column: 1 / -1;
    min-width: 0;
}
html.mvn-ui .mvn-rows {
    display: grid;
    grid-template-columns: subgrid;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mvn-frame-cols,
html.mvn-ui .mvn-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    padding-inline: var(--mvn-frame-pad);
}
.mvn-frame-cols {
    min-height: var(--mvn-cols-h);
    padding-block: var(--mvn-s-2);
    border-block-end: var(--mvn-hair) solid var(--mvn-rule);
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-caption);
    font-weight: var(--mvn-w-medium);
    line-height: var(--mvn-lh-ui);
}
html.mvn-ui .mvn-row {
    position: relative;
    min-height: var(--mvn-row-min);
    margin: 0;
    padding-block: var(--mvn-s-3);
    border-block-start: var(--mvn-hair) solid var(--mvn-rule-soft);
    color: inherit;
    transition: background-color var(--mvn-dur) var(--mvn-ease);
}
html.mvn-ui .mvn-row:first-child {
    border-block-start: 0;
}
/* A row with a main action is one target: a breath of the accent under the pointer.
   A row without one is information and does not react. */
html.mvn-ui .mvn-row:has(.mvn-act.is-main):hover {
    background: var(--mvn-row-hover);
}
/* A row chosen with its checkbox (invoices to pay together) */
html.mvn-ui .mvn-row:has(.mvn-row-main input[type="checkbox"]:checked) {
    background: var(--mvn-accent-wash);
}
.mvn-row-main {
    display: flex;
    flex-direction: column;
    gap: var(--mvn-s-half);
    min-width: 0;
}
.mvn-row-title {
    overflow: hidden;
    color: var(--mvn-ink);
    font-size: var(--mvn-t-body);
    font-weight: var(--mvn-w-strong);
    line-height: var(--mvn-lh-ui);
    white-space: nowrap;
    text-overflow: ellipsis;
}
.mvn-row-sub {
    overflow: hidden;
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-caption);
    line-height: var(--mvn-lh-ui);
    white-space: nowrap;
    text-overflow: ellipsis;
}
.mvn-row-sub.is-warn {
    color: var(--mvn-warn);
}
.mvn-row-sub.is-bad {
    color: var(--mvn-bad);
}
/* Cells take the middle columns; on phones they wrap into one line. */
.mvn-row-cells {
    display: contents;
}
.mvn-cell {
    min-width: 0;
    color: var(--mvn-ink-2);
    font-size: var(--mvn-t-small);
    line-height: var(--mvn-lh-ui);
}
.mvn-cell small {
    display: block;
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-caption);
}
.mvn-cell.is-strong {
    color: var(--mvn-ink);
    font-weight: var(--mvn-w-strong);
}
.mvn-cell.is-bad {
    color: var(--mvn-bad);
    font-weight: var(--mvn-w-medium);
}
.mvn-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.mvn-row-acts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mvn-s-4);
}
/* A checkbox at the row's start (choosing invoices to pay) */
.mvn-row-main.mvn-check {
    flex-direction: row;
}
/* Rows that are over: cancelled, refunded, closed */
.mvn-row.is-muted :is(.mvn-row-title, .mvn-cell) {
    color: var(--mvn-ink-3);
}
.mvn-row.is-muted .mvn-row-title {
    font-weight: var(--mvn-w-medium);
}
/* Everything clickable in a row sits above the row's main action. */
.mvn-row :is(a, button, input, label, select):not(.is-main) {
    position: relative;
    z-index: 1;
}

/* A frame's closing line: a total, the card on file, more of the same */
.mvn-frame-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mvn-s-2) var(--mvn-s-5);
    min-height: var(--mvn-foot-min);
    padding: var(--mvn-s-3) var(--mvn-frame-pad);
    border-block-start: var(--mvn-hair) solid var(--mvn-rule);
}
.mvn-frame-foot > :last-child:not(:first-child) {
    margin-inline-start: auto;
}
.mvn-sum {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--mvn-s-1) var(--mvn-s-3);
    min-width: 0;
}
.mvn-sum-label {
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-small);
}
.mvn-sum-value {
    color: var(--mvn-ink);
    font-size: var(--mvn-t-body);
    font-weight: var(--mvn-w-strong);
    font-variant-numeric: tabular-nums;
}
.mvn-sum-value.is-total {
    font-size: var(--mvn-t-total);
    font-weight: var(--mvn-w-display);
}

/* Column presets for the lists that recur across pages */
.mvn-frame.is-services,
.mvn-frame.is-domains {
    --mvn-cols: minmax(0, 1fr) minmax(var(--mvn-col-state), auto) minmax(var(--mvn-col-acts), auto);
}
.mvn-frame.is-tickets {
    --mvn-cols: minmax(0, 1fr) minmax(var(--mvn-col-state), auto) minmax(var(--mvn-col-date), auto) minmax(var(--mvn-col-acts), auto);
}
.mvn-frame.is-invoices {
    --mvn-cols: minmax(0, 1fr) minmax(var(--mvn-col-date), auto) minmax(var(--mvn-col-amount), auto) minmax(var(--mvn-col-state), auto) minmax(var(--mvn-col-acts), auto);
}
.mvn-frame.is-addons {
    --mvn-cols: minmax(0, 1fr) minmax(var(--mvn-col-state), auto) minmax(var(--mvn-col-amount), auto) minmax(var(--mvn-col-date), auto);
}
.mvn-frame.is-renewals {
    --mvn-cols: minmax(var(--mvn-col-date), auto) minmax(0, 1fr) minmax(var(--mvn-col-amount), auto);
}
/* A document's items (an invoice, a quote, an order): what, and how much */
.mvn-frame.is-lines {
    --mvn-cols: minmax(0, 1fr) minmax(var(--mvn-col-amount), auto);
}
.mvn-frame.is-lines .mvn-row {
    min-height: var(--mvn-foot-min);
}

/* A document's totals: label and amount pairs at the end side, the last one the total.
   Markup: dl.mvn-totals > div > dt + dd */
.mvn-totals {
    display: grid;
    grid-template-columns: auto minmax(var(--mvn-col-amount), auto);
    justify-content: end;
    row-gap: var(--mvn-s-2);
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.mvn-totals > div {
    display: contents;
}
html.mvn-ui .mvn-totals dt {
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-small);
    font-weight: var(--mvn-w-regular);
}
html.mvn-ui .mvn-totals dd {
    margin: 0;
    padding-inline-start: var(--mvn-s-6);
    color: var(--mvn-ink);
    font-size: var(--mvn-t-body);
    font-weight: var(--mvn-w-medium);
    text-align: end;
    white-space: nowrap;
}
.mvn-totals > div:last-child > * {
    padding-block-start: var(--mvn-s-3);
    border-block-start: var(--mvn-hair) solid var(--mvn-rule);
}
html.mvn-ui .mvn-totals > div:last-child dt {
    color: var(--mvn-ink);
    font-weight: var(--mvn-w-strong);
}
html.mvn-ui .mvn-totals > div:last-child dd {
    font-size: var(--mvn-t-total);
    font-weight: var(--mvn-w-display);
}
.mvn-frame-foot > .mvn-totals {
    margin-inline-start: auto;
    padding-block: var(--mvn-s-2);
}

/* Empty: one framed line with the useful action */
.mvn-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mvn-s-2) var(--mvn-s-5);
    min-height: var(--mvn-row-min);
    margin: 0;
    padding: var(--mvn-s-3) var(--mvn-frame-pad);
    border: var(--mvn-hair) solid var(--mvn-rule);
    border-radius: var(--mvn-r-panel);
    background: var(--mvn-paper);
    color: var(--mvn-ink-2);
    font-size: var(--mvn-t-small);
}
.mvn-frame > .mvn-empty {
    border: 0;
    border-radius: 0;
}

/* --------------------------------------------------------------------------
   7.5 Links and action words
   A link is magenta with a tinted underline that turns solid under the pointer.
   .mvn-act is the word at a row's end that names its next step ("תשלום",
   "תגובה", "חידוש", "ניהול"): the main one (.is-main) is magenta and stretches
   over its row (the row tints and draws the focus ring); the others are graphite.
   .is-out leaves the client area in a new tab.
   -------------------------------------------------------------------------- */
html.mvn-ui :is(.mvn-link, .mvn-part-link, .mvn-lede a, .mvn-prose a, .mvn-empty a:not(.mvn-btn), .mvn-alert-body a, .mvn-help a) {
    color: var(--mvn-accent);
    font-weight: var(--mvn-w-medium);
    text-decoration: underline;
    text-decoration-color: var(--mvn-accent-line);
    text-decoration-thickness: var(--mvn-hair);
    text-underline-offset: var(--mvn-underline-gap);
    transition: color var(--mvn-dur) var(--mvn-ease), text-decoration-color var(--mvn-dur) var(--mvn-ease);
}
html.mvn-ui :is(.mvn-link, .mvn-part-link, .mvn-lede a, .mvn-prose a, .mvn-empty a:not(.mvn-btn), .mvn-alert-body a, .mvn-help a):hover {
    color: var(--mvn-accent-strong);
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: var(--mvn-line);
}
html.mvn-ui .mvn-part-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--mvn-act-h);
    font-size: var(--mvn-t-small);
}

html.mvn-ui .mvn-act {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--mvn-s-1);
    min-height: var(--mvn-act-h);
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--mvn-ink);
    font-size: var(--mvn-t-small);
    font-weight: var(--mvn-w-medium);
    line-height: var(--mvn-lh-ui);
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: var(--mvn-rule-2);
    text-decoration-thickness: var(--mvn-hair);
    text-underline-offset: var(--mvn-underline-gap);
    cursor: pointer;
    transition: color var(--mvn-dur) var(--mvn-ease), text-decoration-color var(--mvn-dur) var(--mvn-ease);
}
html.mvn-ui .mvn-act:hover {
    color: var(--mvn-ink);
    text-decoration: underline;
    text-decoration-color: var(--mvn-ink);
    text-decoration-thickness: var(--mvn-line);
}
html.mvn-ui .mvn-act:active {
    color: var(--mvn-ink-2);
}
html.mvn-ui .mvn-act.is-main {
    color: var(--mvn-accent);
    font-weight: var(--mvn-w-strong);
    text-decoration-color: var(--mvn-accent-line);
}
html.mvn-ui .mvn-act.is-main:hover,
html.mvn-ui .mvn-row:hover .mvn-act.is-main {
    color: var(--mvn-accent-strong);
    text-decoration-color: currentColor;
    text-decoration-thickness: var(--mvn-line);
}
html.mvn-ui .mvn-act.is-main:active {
    color: var(--mvn-accent-strong);
}
html.mvn-ui .mvn-act.is-danger {
    color: var(--mvn-bad);
    text-decoration-color: var(--mvn-bad);
}
html.mvn-ui .mvn-act:is(:disabled, [aria-disabled="true"], .is-disabled) {
    color: var(--mvn-ink-3);
    text-decoration-color: var(--mvn-rule-2);
    text-decoration-thickness: var(--mvn-hair);
    cursor: not-allowed;
}
/* Inside a row the main action stretches over it: the row is one target. */
html.mvn-ui .mvn-row .mvn-act.is-main {
    position: static;
}
html.mvn-ui .mvn-row .mvn-act.is-main::after {
    content: "";
    position: absolute;
    inset: 0;
}
/* The whole row is the target, so the whole row shows the focus. */
html.mvn-ui body.lagom .mvn-row .mvn-act.is-main:focus-visible {
    outline: none !important;
}
html.mvn-ui .mvn-row .mvn-act.is-main:focus-visible::after {
    outline: var(--mvn-ring) solid var(--mvn-focus);
    outline-offset: calc(-1 * var(--mvn-ring));
}
/* Leaves the client area (cPanel, Webmail, the site): a mark after the word.
   It is drawn out of the text flow, so the underline skips it and clicks land
   on the link itself (WHMCS's custom-action script reads the clicked element). */
html.mvn-ui :is(.mvn-act, .mvn-btn).is-out {
    padding-inline-end: calc(1em + var(--mvn-s-1));
}
html.mvn-ui .mvn-btn.is-out {
    padding-inline-end: calc(var(--mvn-btn-pad) + 1em + var(--mvn-s-1));
}
html.mvn-ui :is(.mvn-act, .mvn-btn).is-out::before {
    content: "\f35d";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0;
    font-family: "Font Awesome 5 Pro", "Font Awesome 6 Free";
    font-size: var(--mvn-t-mark);
    font-weight: 900;
    line-height: 1;
    opacity: var(--mvn-dim);
    /* Physical: mirrored, so the arrow points out in the reading direction. */
    transform: translateY(-50%) scaleX(-1);
}
html.mvn-ui .mvn-btn.is-out::before {
    inset-inline-end: var(--mvn-btn-pad);
}

/* Copy a technical value (an IP, a name server, a code): an icon button after it,
   data-mvn-copy holds the value. */
html.mvn-ui .mvn-copy {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: var(--mvn-icon-btn);
    height: var(--mvn-icon-btn);
    margin: 0;
    margin-inline-start: var(--mvn-s-1);
    padding: 0;
    border: 0;
    border-radius: var(--mvn-r-ctl);
    background: none;
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-icon);
    vertical-align: middle;
    cursor: pointer;
    transition: background-color var(--mvn-dur) var(--mvn-ease), color var(--mvn-dur) var(--mvn-ease);
}
html.mvn-ui .mvn-copy:hover {
    background: var(--mvn-accent-wash);
    color: var(--mvn-accent);
}
html.mvn-ui .mvn-copy:active {
    background: var(--mvn-press);
}
html.mvn-ui .mvn-copy.is-done {
    background: var(--mvn-ok-wash);
    color: var(--mvn-ok);
}
.mvn-tech {
    unicode-bidi: plaintext;
}

/* --------------------------------------------------------------------------
   7.6 Buttons
   .mvn-btn is the framed white button; .is-primary is the page's one magenta
   action; .is-quiet is text only; .is-danger confirms a destructive step. The
   label names the outcome, with the amount when it costs: "תשלום ₪310.00".
   States: hover, focus (the global ring), active, disabled (:disabled,
   aria-disabled), loading (aria-busy="true": a spinner after 200 ms).
   -------------------------------------------------------------------------- */
html.mvn-ui .mvn-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mvn-s-2);
    min-height: var(--mvn-ctl-h);
    margin: 0;
    padding-block: 0;
    padding-inline: var(--mvn-btn-pad);
    border: var(--mvn-hair) solid var(--mvn-rule-2);
    border-radius: var(--mvn-r-ctl);
    background: var(--mvn-paper);
    color: var(--mvn-ink);
    font-size: var(--mvn-t-small);
    font-weight: var(--mvn-w-medium);
    line-height: var(--mvn-lh-ui);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--mvn-dur) var(--mvn-ease), background-color var(--mvn-dur) var(--mvn-ease), color var(--mvn-dur) var(--mvn-ease);
}
html.mvn-ui .mvn-btn:hover {
    border-color: var(--mvn-ink);
    color: var(--mvn-ink);
    text-decoration: none;
}
html.mvn-ui .mvn-btn:active {
    background: var(--mvn-sunken);
}
html.mvn-ui :is(.mvn-btn.is-primary, .mvn-btn-primary) {
    border-color: var(--mvn-accent);
    background: var(--mvn-accent);
    color: var(--mvn-on-accent);
    font-weight: var(--mvn-w-strong);
}
html.mvn-ui :is(.mvn-btn.is-primary, .mvn-btn-primary):hover {
    border-color: var(--mvn-accent-strong);
    background: var(--mvn-accent-strong);
    color: var(--mvn-on-accent);
}
html.mvn-ui :is(.mvn-btn.is-primary, .mvn-btn-primary):active {
    border-color: var(--mvn-accent-strong);
    background: var(--mvn-accent-strong);
    box-shadow: var(--mvn-press-fill);
}
html.mvn-ui :is(.mvn-btn.is-quiet, .mvn-btn-quiet) {
    border-color: transparent;
    background: none;
    color: var(--mvn-ink-2);
}
html.mvn-ui :is(.mvn-btn.is-quiet, .mvn-btn-quiet):hover {
    border-color: transparent;
    background: var(--mvn-hover);
    color: var(--mvn-ink);
}
html.mvn-ui :is(.mvn-btn.is-quiet, .mvn-btn-quiet):active {
    background: var(--mvn-press);
}
html.mvn-ui .mvn-btn.is-danger {
    border-color: var(--mvn-bad);
    background: var(--mvn-bad);
    color: var(--mvn-on-accent);
    font-weight: var(--mvn-w-strong);
}
html.mvn-ui .mvn-btn.is-danger:hover,
html.mvn-ui .mvn-btn.is-danger:active {
    border-color: var(--mvn-bad-strong);
    background: var(--mvn-bad-strong);
    color: var(--mvn-on-accent);
}
/* A quiet way out (cancellation): quiet until hovered */
html.mvn-ui .mvn-btn.is-quiet.is-danger {
    border-color: transparent;
    background: none;
    color: var(--mvn-ink-3);
    font-weight: var(--mvn-w-medium);
}
html.mvn-ui .mvn-btn.is-quiet.is-danger:hover,
html.mvn-ui .mvn-btn.is-quiet.is-danger:active {
    border-color: transparent;
    background: var(--mvn-bad-wash);
    color: var(--mvn-bad);
}
html.mvn-ui .mvn-btn.is-small {
    min-height: var(--mvn-ctl-h-sm);
    padding-inline: var(--mvn-btn-pad-sm);
}
html.mvn-ui .mvn-btn.is-small.is-out {
    padding-inline-end: calc(var(--mvn-btn-pad-sm) + 1em + var(--mvn-s-1));
}
html.mvn-ui .mvn-btn.is-small.is-out::before {
    inset-inline-end: var(--mvn-btn-pad-sm);
}
html.mvn-ui .mvn-btn :is(i, svg) {
    font-size: var(--mvn-t-small);
}
html.mvn-ui .mvn-btn bdi {
    font-variant-numeric: tabular-nums;
}
html.mvn-ui .mvn-btn:is(:disabled, [aria-disabled="true"], .disabled, .is-disabled) {
    border-color: var(--mvn-rule);
    background: var(--mvn-sunken);
    color: var(--mvn-ink-3);
    box-shadow: none;
    cursor: not-allowed;
}
html.mvn-ui .mvn-btn:is(:disabled, [aria-disabled="true"], .disabled, .is-disabled).is-quiet {
    background: none;
    border-color: transparent;
}
/* Loading: the label stays; a spinner joins it after about 200 ms. */
html.mvn-ui .mvn-btn[aria-busy="true"] {
    cursor: progress;
}
html.mvn-ui .mvn-btn[aria-busy="true"]::after {
    content: "";
    width: var(--mvn-spinner);
    height: var(--mvn-spinner);
    border: var(--mvn-line) solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    opacity: 0;
    animation: mvn-busy-in 0s linear var(--mvn-busy-delay) forwards, mvn-spin var(--mvn-dur-spin) linear infinite;
}
@keyframes mvn-busy-in {
    to { opacity: 1; }
}
@keyframes mvn-spin {
    to { transform: rotate(1turn); }
}
/* WHMCS's own loader inside a custom action (shown by its script while it signs in) */
html.mvn-ui .mvn-btn .loading .spinner {
    margin: 0;
}
/* A group of buttons in a line (a form's foot, a head's actions) */
.mvn-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mvn-s-2);
}

/* --------------------------------------------------------------------------
   7.7 State: a quiet tag, a wash in its tone, a dot and a word
   is-ok, is-info, is-warn, is-bad, is-turn ("waiting for you": an answered
   ticket, an invoice to pay), is-muted (over: cancelled, closed). One per row,
   in its own column.
   -------------------------------------------------------------------------- */
.mvn-state {
    display: inline-flex;
    align-items: center;
    gap: var(--mvn-s-2);
    min-height: var(--mvn-tag-h);
    padding-inline: var(--mvn-s-2);
    border-radius: var(--mvn-r-sm);
    background: var(--mvn-sunken);
    color: var(--mvn-ink-2);
    font-size: var(--mvn-t-caption);
    font-weight: var(--mvn-w-medium);
    line-height: var(--mvn-lh-ui);
    white-space: nowrap;
}
.mvn-state::before {
    content: "";
    flex: none;
    width: var(--mvn-dot);
    height: var(--mvn-dot);
    border-radius: 50%;
    background: currentColor;
}
.mvn-state.is-ok { background: var(--mvn-ok-wash); color: var(--mvn-ok); }
.mvn-state.is-info { background: var(--mvn-info-wash); color: var(--mvn-info); }
.mvn-state.is-warn { background: var(--mvn-warn-wash); color: var(--mvn-warn); }
.mvn-state.is-bad { background: var(--mvn-bad-wash); color: var(--mvn-bad); }
.mvn-state:is(.is-turn, .is-accent) {
    background: var(--mvn-accent-wash);
    color: var(--mvn-accent);
    font-weight: var(--mvn-w-strong);
}
.mvn-state.is-muted { background: var(--mvn-sunken); color: var(--mvn-ink-3); }

/* --------------------------------------------------------------------------
   7.8 Address: a domain as its name and a quiet public suffix, isolated LTR
   (includes/mvn/addr.tpl renders it)
   -------------------------------------------------------------------------- */
.mvn-addr {
    direction: ltr;
    unicode-bidi: isolate;
    overflow-wrap: anywhere;
}
.mvn-addr-name {
    color: var(--mvn-ink);
    font-weight: var(--mvn-w-strong);
}
.mvn-addr-tld {
    color: var(--mvn-ink-3);
    font-weight: var(--mvn-w-regular);
}
.mvn-title .mvn-addr {
    letter-spacing: var(--mvn-track-tight);
}
.mvn-title .mvn-addr-name {
    font-weight: var(--mvn-w-display);
}
a .mvn-addr-name {
    color: inherit;
}
a .mvn-addr-tld {
    color: inherit;
    opacity: var(--mvn-dim);
}

/* --------------------------------------------------------------------------
   7.9 Facts: label and value pairs in one frame, two to a line (one on
   phones). A technical value may carry a copy button.
   -------------------------------------------------------------------------- */
.mvn-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    overflow: hidden;
    border: var(--mvn-hair) solid var(--mvn-rule);
    border-radius: var(--mvn-r-panel);
    background: var(--mvn-paper);
}
.mvn-fact {
    display: grid;
    grid-template-columns: var(--mvn-fact-label) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--mvn-s-1) var(--mvn-s-4);
    min-height: var(--mvn-foot-min);
    padding: var(--mvn-s-3) var(--mvn-frame-pad);
    border-block-start: var(--mvn-hair) solid var(--mvn-rule-soft);
}
.mvn-fact:nth-child(-n + 2) {
    border-block-start: 0;
}
.mvn-fact:nth-child(odd) {
    border-inline-end: var(--mvn-hair) solid var(--mvn-rule-soft);
}
html.mvn-ui .mvn-fact dt {
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-small);
    font-weight: var(--mvn-w-regular);
}
/* A value reads as one line of text ("₪89.00 לחודש"); a <small> note, a meter or an
   action word goes on its own line under it. */
html.mvn-ui .mvn-fact dd {
    min-width: 0;
    margin: 0;
    color: var(--mvn-ink);
    font-size: var(--mvn-t-body);
    font-weight: var(--mvn-w-medium);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
html.mvn-ui .mvn-fact dd > :is(small, .mvn-meter, .mvn-act) {
    display: flex;
    margin-block-start: var(--mvn-s-1);
}
html.mvn-ui .mvn-fact dd > .mvn-act {
    display: inline-flex;
}
.mvn-fact dd small {
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-caption);
    font-weight: var(--mvn-w-regular);
}
/* One pair to a line: a narrow column, or a short list */
.mvn-facts.is-one {
    grid-template-columns: minmax(0, 1fr);
}
.mvn-facts.is-one .mvn-fact:nth-child(2) {
    border-block-start: var(--mvn-hair) solid var(--mvn-rule-soft);
}
.mvn-facts.is-one .mvn-fact:nth-child(odd) {
    border-inline-end: 0;
}
.mvn-fact-value {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

/* Rooms: a detail page's facts in side-by-side groups (domain, hosting,
   billing), one frame split by walls */
.mvn-rooms {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    overflow: hidden;
    border: var(--mvn-hair) solid var(--mvn-rule);
    border-radius: var(--mvn-r-panel);
    background: var(--mvn-paper);
}
.mvn-room {
    display: flex;
    flex-direction: column;
    gap: var(--mvn-s-3);
    min-width: 0;
    padding: var(--mvn-frame-pad);
}
.mvn-room + .mvn-room {
    border-inline-start: var(--mvn-hair) solid var(--mvn-rule-soft);
}
html.mvn-ui .mvn-room-title {
    margin: 0;
    color: var(--mvn-ink);
    font-size: var(--mvn-t-small);
    font-weight: var(--mvn-w-strong);
    line-height: var(--mvn-lh-ui);
}
.mvn-room dl {
    display: flex;
    flex-direction: column;
    gap: var(--mvn-s-2);
    margin: 0;
}
html.mvn-ui .mvn-room dt {
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-caption);
    font-weight: var(--mvn-w-regular);
}
html.mvn-ui .mvn-room dd {
    margin: 0;
    color: var(--mvn-ink);
    font-size: var(--mvn-t-body);
    font-weight: var(--mvn-w-medium);
    font-variant-numeric: tabular-nums;
}
.mvn-room-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--mvn-s-4);
    margin-block-start: auto;
}

/* --------------------------------------------------------------------------
   7.10 Meter: the words carry the value; the bar shows the share in its state.
   The template sets --mvn-fill (a percentage) and adds is-warn from 80% and
   is-bad from 95%. The bar is decorative (aria-hidden).
   -------------------------------------------------------------------------- */
.mvn-meter {
    display: flex;
    flex-direction: column;
    gap: var(--mvn-s-2);
    min-width: 0;
}
.mvn-meter-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 var(--mvn-s-3);
    color: var(--mvn-ink-2);
    font-size: var(--mvn-t-small);
    font-variant-numeric: tabular-nums;
}
.mvn-meter-head strong {
    color: var(--mvn-ink);
    font-weight: var(--mvn-w-strong);
}
.mvn-meter-bar {
    display: block;
    height: var(--mvn-meter-h);
    overflow: hidden;
    border-radius: var(--mvn-r-pill);
    background: var(--mvn-rule-soft);
}
.mvn-meter-bar > span {
    display: block;
    width: var(--mvn-fill, 0%);
    max-width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--mvn-ok);
}
.mvn-meter.is-warn .mvn-meter-bar > span {
    background: var(--mvn-warn);
}
.mvn-meter.is-bad .mvn-meter-bar > span {
    background: var(--mvn-bad);
}
.mvn-meter.is-warn .mvn-meter-head > :last-child {
    color: var(--mvn-warn);
}
.mvn-meter.is-bad .mvn-meter-head > :last-child {
    color: var(--mvn-bad);
}

/* --------------------------------------------------------------------------
   7.11 Pager: "6 מתוך 24" and the way to the rest
   -------------------------------------------------------------------------- */
.mvn-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mvn-s-2) var(--mvn-s-5);
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-small);
    font-variant-numeric: tabular-nums;
}
.mvn-pager-pages {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mvn-s-1);
    margin: 0;
    padding: 0;
    list-style: none;
}
html.mvn-ui .mvn-pager-page {
    display: inline-grid;
    place-items: center;
    min-width: var(--mvn-ctl-h-sm);
    height: var(--mvn-ctl-h-sm);
    padding-inline: var(--mvn-s-2);
    border-radius: var(--mvn-r-ctl);
    color: var(--mvn-ink-2);
    font-size: var(--mvn-t-small);
    font-weight: var(--mvn-w-medium);
    text-decoration: none;
    transition: background-color var(--mvn-dur) var(--mvn-ease), color var(--mvn-dur) var(--mvn-ease);
}
html.mvn-ui a.mvn-pager-page:hover {
    background: var(--mvn-hover);
    color: var(--mvn-ink);
    text-decoration: none;
}
html.mvn-ui .mvn-pager-page[aria-current="page"] {
    background: var(--mvn-accent-wash);
    color: var(--mvn-accent);
    font-weight: var(--mvn-w-strong);
}
html.mvn-ui .mvn-pager-page:is([aria-disabled="true"], .is-disabled) {
    color: var(--mvn-rule-2);
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   7.12 Alerts: a light wash in the tone, an icon, plain words and at most one action
   -------------------------------------------------------------------------- */
.mvn-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--mvn-s-3);
    margin: 0;
    padding: var(--mvn-s-3) var(--mvn-s-4);
    border-radius: var(--mvn-r-panel);
    background: var(--mvn-info-wash);
    color: var(--mvn-ink);
    font-size: var(--mvn-t-small);
    line-height: var(--mvn-lh-text);
}
.mvn-alert > i:first-child {
    flex: none;
    margin-block-start: .2em;
    color: var(--mvn-info);
    font-size: var(--mvn-t-icon-md);
}
.mvn-alert.is-ok { background: var(--mvn-ok-wash); }
.mvn-alert.is-ok > i:first-child { color: var(--mvn-ok); }
.mvn-alert.is-warn { background: var(--mvn-warn-wash); }
.mvn-alert.is-warn > i:first-child { color: var(--mvn-warn); }
.mvn-alert.is-bad { background: var(--mvn-bad-wash); }
.mvn-alert.is-bad > i:first-child { color: var(--mvn-bad); }
.mvn-alert:is(.is-turn, .is-accent) { background: var(--mvn-accent-wash); }
.mvn-alert:is(.is-turn, .is-accent) > i:first-child { color: var(--mvn-accent); }
.mvn-alert-body {
    flex: 1;
    min-width: 0;
}
.mvn-alert-title {
    display: block;
    font-weight: var(--mvn-w-strong);
}
.mvn-alert > :is(.mvn-act, .mvn-btn) {
    flex: none;
    align-self: center;
}

/* --------------------------------------------------------------------------
   7.13 Forms
   Labels above fields; fields grouped in frames; one primary button at the end.
   Errors sit under the field, in words, with aria-invalid on the control.
   -------------------------------------------------------------------------- */
.mvn-form {
    display: flex;
    flex-direction: column;
    gap: var(--mvn-page-gap);
    min-width: 0;
    margin: 0;
}
.mvn-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.mvn-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mvn-s-5);
    padding: var(--mvn-frame-pad);
    border: var(--mvn-hair) solid var(--mvn-rule);
    border-radius: var(--mvn-r-panel);
    background: var(--mvn-paper);
}
.mvn-fields.is-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mvn-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--mvn-s-2);
    min-width: 0;
    max-width: var(--mvn-form-w);
}
.mvn-field.is-wide {
    grid-column: 1 / -1;
    max-width: none;
}
html.mvn-ui .mvn-label {
    display: block;
    max-width: none;
    margin: 0;
    color: var(--mvn-ink);
    font-size: var(--mvn-t-small);
    font-weight: var(--mvn-w-medium);
    line-height: var(--mvn-lh-ui);
}
.mvn-label-note {
    margin-inline-start: var(--mvn-s-1);
    color: var(--mvn-ink-3);
    font-weight: var(--mvn-w-regular);
}
html.mvn-ui :is(.mvn-input, .mvn-select, .mvn-textarea) {
    display: block;
    width: 100%;
    min-height: var(--mvn-field-h);
    margin: 0;
    padding-block: var(--mvn-s-2);
    padding-inline: var(--mvn-s-3);
    border: var(--mvn-hair) solid var(--mvn-rule-2);
    border-radius: var(--mvn-r-ctl);
    background-color: var(--mvn-paper);
    color: var(--mvn-ink);
    font-size: var(--mvn-t-body);
    line-height: var(--mvn-lh-ui);
    box-shadow: none;
    transition: border-color var(--mvn-dur) var(--mvn-ease);
}
html.mvn-ui :is(.mvn-input, .mvn-select, .mvn-textarea)::placeholder {
    color: var(--mvn-ink-3);
    opacity: 1;
}
html.mvn-ui :is(.mvn-input, .mvn-select, .mvn-textarea):hover {
    border-color: var(--mvn-ink-3);
}
/* Focus: the accent border, and the global ring laid over it */
html.mvn-ui :is(.mvn-input, .mvn-select, .mvn-textarea):focus {
    border-color: var(--mvn-accent);
    box-shadow: none;
}
html.mvn-ui body.lagom :is(.mvn-input, .mvn-select, .mvn-textarea, .form-control):focus-visible {
    outline-offset: calc(-1 * var(--mvn-hair));
}
html.mvn-ui :is(.mvn-input, .mvn-select, .mvn-textarea)[aria-invalid="true"] {
    border-color: var(--mvn-bad);
}
html.mvn-ui body.lagom :is(.mvn-input, .mvn-select, .mvn-textarea)[aria-invalid="true"]:focus-visible {
    outline-color: var(--mvn-bad) !important;
}
html.mvn-ui :is(.mvn-input, .mvn-select, .mvn-textarea):is(:disabled, [readonly]) {
    border-color: var(--mvn-rule);
    background-color: var(--mvn-sunken);
    color: var(--mvn-ink-3);
    cursor: not-allowed;
}
html.mvn-ui .mvn-input[readonly] {
    color: var(--mvn-ink-2);
    cursor: text;
}
html.mvn-ui .mvn-input.is-tech {
    --mvn-face: var(--mvn-mono);
    direction: ltr;
    text-align: start;
}
/* The caret is drawn with the text color: two triangles that meet in a "▼", at the end side.
   Physical: background-position has no logical keywords; the page is RTL. */
html.mvn-ui .mvn-select {
    padding-inline-end: calc(var(--mvn-s-3) * 2 + var(--mvn-s-2));
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: left var(--mvn-s-3) center, left calc(var(--mvn-s-3) + var(--mvn-caret)) center;
    background-size: var(--mvn-caret) var(--mvn-caret), var(--mvn-caret) var(--mvn-caret);
    background-repeat: no-repeat;
    appearance: none;
    cursor: pointer;
}
html.mvn-ui .mvn-textarea {
    min-height: var(--mvn-textarea-h);
    line-height: var(--mvn-lh-text);
    resize: vertical;
}
/* A field with a fixed part beside it (a domain's "@studio-yarden.co.il") */
.mvn-input-group {
    display: flex;
    align-items: stretch;
    min-width: 0;
}
html.mvn-ui .mvn-input-group > .mvn-input {
    flex: 1;
    min-width: 0;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}
.mvn-input-addon {
    display: flex;
    flex: none;
    align-items: center;
    padding-inline: var(--mvn-s-3);
    border: var(--mvn-hair) solid var(--mvn-rule-2);
    border-inline-start: 0;
    border-start-end-radius: var(--mvn-r-ctl);
    border-end-end-radius: var(--mvn-r-ctl);
    background: var(--mvn-sunken);
    color: var(--mvn-ink-2);
    font-size: var(--mvn-t-small);
    white-space: nowrap;
}
.mvn-help {
    margin: 0;
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-caption);
    line-height: var(--mvn-lh-ui);
}
.mvn-error {
    display: flex;
    align-items: baseline;
    gap: var(--mvn-s-2);
    margin: 0;
    color: var(--mvn-bad);
    font-size: var(--mvn-t-caption);
    font-weight: var(--mvn-w-medium);
    line-height: var(--mvn-lh-ui);
}
.mvn-error i {
    font-size: var(--mvn-t-icon);
}
/* Checkboxes and radios: native, in the accent when chosen, the label beside them */
html.mvn-ui .mvn-check {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--mvn-s-3);
    margin: 0;
    color: var(--mvn-ink);
    font-size: var(--mvn-t-body);
    font-weight: var(--mvn-w-regular);
    line-height: var(--mvn-lh-ui);
    cursor: pointer;
}
html.mvn-ui .mvn-check input {
    flex: none;
    width: var(--mvn-check);
    height: var(--mvn-check);
    margin: var(--mvn-s-half) 0 0;
    accent-color: var(--mvn-accent);
    cursor: pointer;
}
html.mvn-ui .mvn-check:has(input:disabled) {
    color: var(--mvn-ink-3);
    cursor: not-allowed;
}
html.mvn-ui .mvn-check:has(input:disabled) input {
    cursor: not-allowed;
}
.mvn-check-text {
    display: flex;
    flex-direction: column;
    gap: var(--mvn-s-half);
    min-width: 0;
}
.mvn-check-text small {
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-caption);
}
.mvn-checks {
    display: flex;
    flex-direction: column;
    gap: var(--mvn-s-3);
    margin: 0;
    padding: 0;
    border: 0;
}
.mvn-checks > legend {
    margin-block-end: var(--mvn-s-2);
    padding: 0;
    border: 0;
    color: var(--mvn-ink);
    font-size: var(--mvn-t-small);
    font-weight: var(--mvn-w-medium);
}
.mvn-form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mvn-s-3) var(--mvn-s-4);
}
.mvn-form-done {
    display: inline-flex;
    align-items: center;
    gap: var(--mvn-s-2);
    color: var(--mvn-ok);
    font-size: var(--mvn-t-small);
    font-weight: var(--mvn-w-medium);
}

/* --------------------------------------------------------------------------
   7.14 Disclosure: details on demand (older years, the rest of a list)
   -------------------------------------------------------------------------- */
.mvn-fold {
    min-width: 0;
}
.mvn-fold > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mvn-s-1) var(--mvn-s-3);
    min-height: var(--mvn-touch);
    color: var(--mvn-ink);
    font-weight: var(--mvn-w-strong);
    list-style: none;
    cursor: pointer;
}
/* The native marker is replaced by the chevron below. */
.mvn-fold > summary::-webkit-details-marker {
    display: none;
}
.mvn-fold > summary::after {
    content: "\f078";
    margin-inline-start: auto;
    color: var(--mvn-ink-3);
    font-family: "Font Awesome 5 Pro", "Font Awesome 6 Free";
    font-size: var(--mvn-t-icon);
    font-weight: 900;
    transition: transform var(--mvn-dur) var(--mvn-ease), color var(--mvn-dur) var(--mvn-ease);
}
.mvn-fold[open] > summary::after {
    transform: rotate(180deg);
}
.mvn-fold > summary:hover::after {
    color: var(--mvn-accent);
}
.mvn-fold-sum {
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-small);
    font-weight: var(--mvn-w-regular);
    font-variant-numeric: tabular-nums;
}
.mvn-fold[open] > summary {
    margin-block-end: var(--mvn-s-2);
}

/* --------------------------------------------------------------------------
   7.15 Conversation: a ticket's messages in one frame, split by rules.
   A message from MVN carries the accent's tag beside the name.
   -------------------------------------------------------------------------- */
.mvn-thread {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: var(--mvn-hair) solid var(--mvn-rule);
    border-radius: var(--mvn-r-panel);
    background: var(--mvn-paper);
    list-style: none;
}
.mvn-msg {
    padding: var(--mvn-s-5) var(--mvn-frame-pad);
}
.mvn-msg + .mvn-msg {
    border-block-start: var(--mvn-hair) solid var(--mvn-rule);
}
.mvn-msg-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mvn-s-1) var(--mvn-s-3);
    margin-block-end: var(--mvn-s-3);
}
.mvn-msg-name {
    color: var(--mvn-ink);
    font-size: var(--mvn-t-body);
    font-weight: var(--mvn-w-strong);
}
.mvn-msg-role {
    display: inline-flex;
    align-items: center;
    min-height: var(--mvn-count-h);
    padding-inline: var(--mvn-s-2);
    border-radius: var(--mvn-r-sm);
    background: var(--mvn-sunken);
    color: var(--mvn-ink-2);
    font-size: var(--mvn-t-micro);
    font-weight: var(--mvn-w-strong);
}
.mvn-msg.is-staff .mvn-msg-role {
    background: var(--mvn-accent-wash);
    color: var(--mvn-accent);
}
.mvn-msg-time {
    margin-inline-start: auto;
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-caption);
    font-variant-numeric: tabular-nums;
}
.mvn-msg-body {
    max-width: var(--mvn-measure-prose);
    color: var(--mvn-ink-2);
    font-size: var(--mvn-t-body);
    line-height: var(--mvn-lh-prose);
    overflow-wrap: anywhere;
}
.mvn-msg-body > * + * {
    margin-block-start: .8em;
}
.mvn-msg-files {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mvn-s-1) var(--mvn-s-5);
    margin: var(--mvn-s-4) 0 0;
    padding: var(--mvn-s-3) 0 0;
    border-block-start: var(--mvn-hair) solid var(--mvn-rule-soft);
    list-style: none;
}
.mvn-msg-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mvn-s-2) var(--mvn-s-4);
    margin-block-start: var(--mvn-s-4);
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-caption);
}

/* --------------------------------------------------------------------------
   7.16 Prose: articles, announcements, an invoice's notes
   -------------------------------------------------------------------------- */
.mvn-prose {
    max-width: var(--mvn-measure-prose);
    color: var(--mvn-ink-2);
    font-size: var(--mvn-t-prose);
    line-height: var(--mvn-lh-prose);
    overflow-wrap: anywhere;
}
.mvn-prose > * + * {
    margin-block-start: 1em;
}
html.mvn-ui .mvn-prose :is(h2, h3) {
    margin-block: 1.6em .4em;
    color: var(--mvn-ink);
    font-size: var(--mvn-t-part);
    font-weight: var(--mvn-w-strong);
    line-height: var(--mvn-lh-ui);
}
html.mvn-ui .mvn-prose h3 {
    font-size: var(--mvn-t-total);
}
html.mvn-ui .mvn-prose a {
    font-weight: var(--mvn-w-regular);
}
.mvn-prose :is(ul, ol) {
    padding-inline-start: 1.25em;
}
.mvn-prose li + li {
    margin-block-start: .35em;
}
.mvn-prose li::marker {
    color: var(--mvn-accent);
}
.mvn-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--mvn-r-ctl);
}
.mvn-prose blockquote {
    margin-inline: 0;
    padding-inline-start: var(--mvn-s-4);
    border-inline-start: var(--mvn-line) solid var(--mvn-rule-2);
    color: var(--mvn-ink-3);
}
.mvn-prose pre {
    overflow-x: auto;
    padding: var(--mvn-s-3) var(--mvn-s-4);
    border-radius: var(--mvn-r-ctl);
    background: var(--mvn-sunken);
    direction: ltr;
    text-align: start;
}
.mvn-prose :not(pre) > code {
    padding: 0 var(--mvn-s-1);
    border-radius: var(--mvn-r-sm);
    background: var(--mvn-sunken);
    color: var(--mvn-ink);
}
.mvn-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mvn-t-small);
}
.mvn-prose :is(th, td) {
    padding: var(--mvn-s-2) var(--mvn-s-3);
    border-block-end: var(--mvn-hair) solid var(--mvn-rule-soft);
    text-align: start;
}
.mvn-prose th {
    color: var(--mvn-ink);
    font-weight: var(--mvn-w-strong);
}
/* Plain links inside text elsewhere in the content: magenta and underlined, so they read as links */
html.mvn-ui .main-content :is(p, li, .alert-body, .help-block) > a:not([class]) {
    color: var(--mvn-accent);
    text-decoration: underline;
    text-decoration-color: var(--mvn-accent-line);
    text-underline-offset: var(--mvn-underline-gap);
}
html.mvn-ui .main-content :is(p, li, .alert-body, .help-block) > a:not([class]):hover {
    color: var(--mvn-accent-strong);
    text-decoration-color: currentColor;
}

/* ==========================================================================
   8. Lagom and Bootstrap components in the new interface
   Most of Lagom follows the variables in the token block. The rules below cover
   what the variables cannot reach, and what modern-css-mvn.css forces with
   !important (its ".panel { … !important }" skin), which only !important beats.
   ========================================================================== */
html.mvn-ui body.lagom :is(.ui-block, .table-container, .well) {
    box-shadow: none;
}
/* Panels WHMCS still prints inside a page: a flat frame like ours. */
html.mvn-ui body.lagom .app-main .panel {
    border: var(--mvn-hair) solid var(--mvn-rule) !important;
    border-radius: var(--mvn-r-panel) !important;
    background: var(--mvn-paper) !important;
    box-shadow: none !important;
}
html.mvn-ui body.lagom .app-main .panel > .panel-heading {
    padding: var(--mvn-s-4) var(--mvn-frame-pad) !important;
    border-block-end: var(--mvn-hair) solid var(--mvn-rule) !important;
}
html.mvn-ui body.lagom .app-main .panel .panel-title {
    color: var(--mvn-ink) !important;
    font-size: var(--mvn-t-total) !important;
    font-weight: var(--mvn-w-strong) !important;
}
html.mvn-ui body.lagom .app-main .panel > .panel-body {
    padding: var(--mvn-frame-pad) !important;
}
html.mvn-ui body.lagom .app-main .panel-heading a,
html.mvn-ui body.lagom .app-main .panel-footer a:not(.btn) {
    color: var(--mvn-accent) !important;
    font-size: var(--mvn-t-small) !important;
    font-weight: var(--mvn-w-medium) !important;
}

/* WordPress widget anchor: the softaculous_sso script inserts its list after the
   first .product-details element; the service page keeps an empty one for it
   (no whitespace inside, or :empty does not match). */
html.mvn-ui body.lagom .product-details:empty {
    display: contents;
}

/* Sections WHMCS prints in pages that keep Lagom markup */
html.mvn-ui body.lagom .section {
    margin-block-end: var(--mvn-s-6);
}
html.mvn-ui body.lagom .section-header {
    margin-block-end: var(--mvn-s-3);
    padding: 0;
    border: 0;
}
html.mvn-ui body.lagom .section-title {
    margin: 0;
    color: var(--mvn-ink);
    font-size: var(--mvn-t-part);
    font-weight: var(--mvn-w-strong);
    line-height: var(--mvn-lh-ui);
}
html.mvn-ui body.lagom .section-desc {
    margin-block-start: var(--mvn-s-1);
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-small);
}

/* Buttons: Lagom's sizes, our weights and radius; the kinds follow the variables. */
html.mvn-ui body.lagom .btn {
    border-radius: var(--mvn-r-ctl);
    font-weight: var(--mvn-w-medium);
    box-shadow: none;
}
html.mvn-ui body.lagom :is(.btn-primary, .btn-success) {
    font-weight: var(--mvn-w-strong);
}
html.mvn-ui body.lagom .btn-link {
    color: var(--mvn-accent);
}

/* Fields */
html.mvn-ui body.lagom .form-control {
    min-height: var(--mvn-field-h);
    border: var(--mvn-hair) solid var(--mvn-rule-2);
    border-radius: var(--mvn-r-ctl);
    background-color: var(--mvn-paper);
    color: var(--mvn-ink);
    box-shadow: none;
    transition: border-color var(--mvn-dur) var(--mvn-ease);
}
html.mvn-ui body.lagom .form-control:hover {
    border-color: var(--mvn-ink-3);
}
html.mvn-ui body.lagom .form-control:focus {
    border-color: var(--mvn-accent);
    box-shadow: none;
}
html.mvn-ui body.lagom .form-control:is(:disabled, [readonly]) {
    background-color: var(--mvn-sunken);
    color: var(--mvn-ink-3);
}
html.mvn-ui body.lagom textarea.form-control {
    min-height: var(--mvn-textarea-h);
}
html.mvn-ui body.lagom :is(.control-label, .form-group > label) {
    color: var(--mvn-ink);
    font-size: var(--mvn-t-small);
    font-weight: var(--mvn-w-medium);
}
html.mvn-ui body.lagom :is(.help-block, .form-text) {
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-caption);
}
html.mvn-ui body.lagom :is(.has-error, .is-invalid) :is(.help-block, .invalid-feedback) {
    color: var(--mvn-bad);
}
html.mvn-ui body.lagom :is(.has-error .form-control, .form-control.is-invalid) {
    border-color: var(--mvn-bad);
}
html.mvn-ui body.lagom :is(input[type="checkbox"], input[type="radio"]):not(.icheck-control) {
    accent-color: var(--mvn-accent);
}

/* Alerts: the tone's wash, ink words, the tone on the icon */
html.mvn-ui body.lagom .alert {
    border: 0;
    border-radius: var(--mvn-r-panel);
    color: var(--mvn-ink);
    font-size: var(--mvn-t-small);
    box-shadow: none;
}
html.mvn-ui body.lagom .alert-success { background: var(--mvn-ok-wash); }
html.mvn-ui body.lagom .alert-info { background: var(--mvn-info-wash); }
html.mvn-ui body.lagom .alert-warning { background: var(--mvn-warn-wash); }
html.mvn-ui body.lagom .alert-danger { background: var(--mvn-bad-wash); }
html.mvn-ui body.lagom .alert-success :is(.alert-icon, .ls, .fas, .far) { color: var(--mvn-ok); }
html.mvn-ui body.lagom .alert-info :is(.alert-icon, .ls, .fas, .far) { color: var(--mvn-info); }
html.mvn-ui body.lagom .alert-warning :is(.alert-icon, .ls, .fas, .far) { color: var(--mvn-warn); }
html.mvn-ui body.lagom .alert-danger :is(.alert-icon, .ls, .fas, .far) { color: var(--mvn-bad); }
/* The e-mail verification and document banners above the page head */
html.mvn-ui body.lagom .verification-banner {
    margin: 0;
    border-radius: 0;
}

/* Status labels read like .mvn-state: a wash, a dot and a word */
html.mvn-ui body.lagom .label {
    display: inline-flex;
    align-items: center;
    gap: var(--mvn-s-2);
    min-height: var(--mvn-tag-h);
    padding: 0 var(--mvn-s-2);
    border: 0;
    border-radius: var(--mvn-r-sm);
    background: var(--mvn-sunken);
    color: var(--mvn-ink-2);
    font-size: var(--mvn-t-caption);
    font-weight: var(--mvn-w-medium);
    line-height: var(--mvn-lh-ui);
    text-transform: none;
}
html.mvn-ui body.lagom .label::before {
    content: "";
    flex: none;
    width: var(--mvn-dot);
    height: var(--mvn-dot);
    border-radius: 50%;
    background: currentColor;
}
html.mvn-ui body.lagom .label-success { background: var(--mvn-ok-wash); color: var(--mvn-ok); }
html.mvn-ui body.lagom .label-info { background: var(--mvn-info-wash); color: var(--mvn-info); }
html.mvn-ui body.lagom .label-warning { background: var(--mvn-warn-wash); color: var(--mvn-warn); }
html.mvn-ui body.lagom .label-danger { background: var(--mvn-bad-wash); color: var(--mvn-bad); }
html.mvn-ui body.lagom .label-primary { background: var(--mvn-accent-wash); color: var(--mvn-accent); }
html.mvn-ui body.lagom .label-default { background: var(--mvn-sunken); color: var(--mvn-ink-3); }
html.mvn-ui body.lagom .badge {
    background: var(--mvn-sunken);
    color: var(--mvn-ink-2);
    font-weight: var(--mvn-w-strong);
}

/* List tables (DataTables) on pages not rewritten yet */
html.mvn-ui body.lagom .table-container {
    overflow: hidden;
    border: var(--mvn-hair) solid var(--mvn-rule);
    border-radius: var(--mvn-r-panel);
    background: var(--mvn-paper);
}
html.mvn-ui body.lagom .table-container .table-top {
    padding: var(--mvn-s-2) var(--mvn-s-4);
    border-block-end: var(--mvn-hair) solid var(--mvn-rule);
    background: none;
}
html.mvn-ui body.lagom :is(.table-list, .table) thead th {
    padding: var(--mvn-s-3) var(--mvn-s-4);
    border-block-end: var(--mvn-hair) solid var(--mvn-rule);
    background: none;
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-caption);
    font-weight: var(--mvn-w-medium);
    letter-spacing: 0;
    text-transform: none;
}
html.mvn-ui body.lagom :is(.table-list, .table) tbody td {
    padding: var(--mvn-s-3) var(--mvn-s-4);
    border-block-start: var(--mvn-hair) solid var(--mvn-rule-soft);
    color: var(--mvn-ink-2);
    font-size: var(--mvn-t-small);
    vertical-align: middle;
}
html.mvn-ui body.lagom .table-list tbody tr:hover > td {
    background: var(--mvn-row-hover);
}
html.mvn-ui body.lagom .table-list tbody td :is(strong, b, .item-name, .table-item-name) {
    color: var(--mvn-ink);
    font-weight: var(--mvn-w-strong);
}
html.mvn-ui body.lagom .dataTables_wrapper :is(.table-bottom, .dataTables_info) {
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-caption);
}
/* Lagom frames a pagination as a box of its own; here it is a quiet line of pages. */
html.mvn-ui body.lagom .pagination {
    gap: var(--mvn-s-1);
    padding: 0;
    border: 0;
    background: none;
}
html.mvn-ui body.lagom .pagination > li > :is(a, span) {
    min-width: var(--mvn-ctl-h-sm);
    height: var(--mvn-ctl-h-sm);
    border: 0;
    border-radius: var(--mvn-r-ctl);
    background: none;
    color: var(--mvn-ink-2);
    font-weight: var(--mvn-w-medium);
}
html.mvn-ui body.lagom .pagination > li > :is(a, span):hover {
    background: var(--mvn-hover);
    color: var(--mvn-ink);
}
html.mvn-ui body.lagom .pagination > .active > :is(a, span) {
    background: var(--mvn-accent-wash);
    color: var(--mvn-accent);
    font-weight: var(--mvn-w-strong);
}
html.mvn-ui body.lagom .pagination > .disabled > :is(a, span) {
    background: none;
    color: var(--mvn-rule-2);
}

/* In-page tabs: an underline, like the sub-navigation bar */
html.mvn-ui body.lagom .nav-tabs {
    gap: var(--mvn-s-1);
    border-block-end: var(--mvn-hair) solid var(--mvn-rule);
}
html.mvn-ui body.lagom .nav-tabs > li > a,
html.mvn-ui body.lagom .nav-tabs .nav-link {
    margin-block-end: calc(-1 * var(--mvn-hair));
    padding: var(--mvn-s-3);
    border: 0;
    border-block-end: var(--mvn-line) solid transparent;
    border-radius: 0;
    background: none;
    color: var(--mvn-ink-2);
    font-weight: var(--mvn-w-medium);
}
html.mvn-ui body.lagom .nav-tabs > li > a:hover,
html.mvn-ui body.lagom .nav-tabs .nav-link:hover {
    border-block-end-color: var(--mvn-rule-2);
    background: none;
    color: var(--mvn-ink);
}
html.mvn-ui body.lagom .nav-tabs > li > a.active,
html.mvn-ui body.lagom .nav-tabs > li.active > a,
html.mvn-ui body.lagom .nav-tabs .nav-link.active {
    border-block-end-color: var(--mvn-accent);
    background: none;
    color: var(--mvn-ink);
    font-weight: var(--mvn-w-strong);
}

/* Key and value lists */
html.mvn-ui body.lagom .list-info-title {
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-small);
}
html.mvn-ui body.lagom .list-info-text {
    color: var(--mvn-ink);
    font-size: var(--mvn-t-body);
}

/* Modals: one task, then close. Title and close in the head, the outcome's
   button first in the foot (it stands at the start, on the right). */
html.mvn-ui body.lagom .modal-dialog {
    max-width: min(var(--mvn-modal-w), calc(100% - 2 * var(--mvn-s-4)));
}
html.mvn-ui body.lagom .modal-dialog.modal-lg {
    max-width: min(calc(var(--mvn-modal-w) * 1.5), calc(100% - 2 * var(--mvn-s-4)));
}
html.mvn-ui body.lagom .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: var(--mvn-r-shell);
    background: var(--mvn-paper);
    box-shadow: var(--mvn-shadow-pop);
}
html.mvn-ui body.lagom .modal-header {
    display: flex;
    align-items: center;
    gap: var(--mvn-s-3);
    padding: var(--mvn-s-4) var(--mvn-s-5);
    border-block-end: var(--mvn-hair) solid var(--mvn-rule);
}
html.mvn-ui body.lagom .modal-header::before,
html.mvn-ui body.lagom .modal-header::after {
    content: none;
}
html.mvn-ui body.lagom .modal-title {
    order: -1;
    margin: 0;
    color: var(--mvn-ink);
    font-size: var(--mvn-t-part);
    font-weight: var(--mvn-w-strong);
    line-height: var(--mvn-lh-ui);
}
html.mvn-ui body.lagom .modal-body {
    padding: var(--mvn-s-5);
    color: var(--mvn-ink-2);
    font-size: var(--mvn-t-body);
    line-height: var(--mvn-lh-text);
}
html.mvn-ui body.lagom .modal-body > p:last-child {
    margin-block-end: 0;
}
html.mvn-ui body.lagom .modal-footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--mvn-s-2);
    padding: var(--mvn-s-4) var(--mvn-s-5);
    border-block-start: var(--mvn-hair) solid var(--mvn-rule);
}
html.mvn-ui body.lagom .modal-footer > * {
    margin: 0;
}
html.mvn-ui body.lagom .modal .close {
    display: inline-grid;
    place-items: center;
    width: var(--mvn-ctl-h-sm);
    height: var(--mvn-ctl-h-sm);
    margin: 0;
    margin-inline-start: auto;
    padding: 0;
    border-radius: var(--mvn-r-ctl);
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-body);
    opacity: 1;
    text-shadow: none;
}
html.mvn-ui body.lagom .modal .close:hover {
    background: var(--mvn-hover);
    color: var(--mvn-ink);
    opacity: 1;
}
/* A destructive modal (Lagom's .modal-danger): the confirm button is red, the frame stays plain. */
html.mvn-ui body.lagom .modal-danger .modal-content {
    border: 0;
}
html.mvn-ui body.lagom .modal-backdrop.show,
html.mvn-ui body.lagom .modal-backdrop.in {
    opacity: 1;
    background: var(--mvn-scrim);
}

/* Tooltips and popovers (the arrow follows --tooltip-arrow-color) */
html.mvn-ui body .tooltip-inner {
    max-width: var(--mvn-tooltip-w);
    padding: var(--mvn-s-2) var(--mvn-s-3);
    border-radius: var(--mvn-r-sm);
    background: var(--mvn-ink);
    color: var(--mvn-paper);
    font-size: var(--mvn-t-caption);
    line-height: var(--mvn-lh-ui);
    text-align: start;
    box-shadow: none;
}
html.mvn-ui body .tooltip.show,
html.mvn-ui body .tooltip.in {
    opacity: 1;
}
html.mvn-ui body .popover {
    border: 0;
    border-radius: var(--mvn-r-panel);
    color: var(--mvn-ink-2);
    font-size: var(--mvn-t-small);
    box-shadow: var(--mvn-shadow-pop);
}
html.mvn-ui body .popover-header {
    border-block-end: var(--mvn-hair) solid var(--mvn-rule);
    background: none;
    color: var(--mvn-ink);
    font-size: var(--mvn-t-small);
    font-weight: var(--mvn-w-strong);
}

/* Dropdown menus inside pages */
html.mvn-ui body.lagom .app-main .dropdown-menu {
    padding: var(--mvn-s-1);
    border: 0;
    border-radius: var(--mvn-r-shell);
    box-shadow: var(--mvn-shadow-pop);
}
html.mvn-ui body.lagom .app-main :is(.dropdown-menu > li > a, .dropdown-item) {
    min-height: var(--mvn-ctl-h);
    padding: var(--mvn-s-2) var(--mvn-s-3);
    border-radius: var(--mvn-r-ctl);
    color: var(--mvn-ink-2);
}
html.mvn-ui body.lagom .app-main :is(.dropdown-menu > li > a, .dropdown-item):hover {
    background: var(--mvn-hover);
    color: var(--mvn-ink);
}
html.mvn-ui body.lagom .app-main :is(.dropdown-menu > .active > a, .dropdown-item.active) {
    background: var(--mvn-accent-wash);
    color: var(--mvn-accent);
}

/* Quoted earlier messages in a ticket: the "•••" toggle (assets/js/mvn/tickets.js) */
html.mvn-ui .mvn-quote-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: calc(var(--mvn-s-6) + var(--mvn-s-1));
    height: calc(var(--mvn-s-5) - var(--mvn-s-1));
    margin-block: var(--mvn-s-2) var(--mvn-s-half);
    padding: 0 var(--mvn-s-2);
    border: var(--mvn-hair) solid var(--mvn-rule-2);
    border-radius: var(--mvn-r-pill);
    background: var(--mvn-paper);
    color: var(--mvn-ink-3);
    font-size: var(--mvn-t-icon);
    line-height: 1;
    letter-spacing: var(--mvn-hair);
    cursor: pointer;
}
html.mvn-ui .mvn-quote-toggle:hover,
html.mvn-ui .mvn-quote-toggle[aria-expanded="true"] {
    border-color: var(--mvn-accent);
    color: var(--mvn-accent);
}

/* ==========================================================================
   9. Responsive
   Mobile: the rail becomes a drawer (unchanged; the sticky top bar takes the page color)
   ========================================================================== */
@media (max-width: 991.98px) {
    html.mvn-ui {
        --mvn-gutter: 16px;
    }
    html.mvn-ui body.lagom {
        padding-inline-start: 0;
    }
    .mvn-rail {
        width: min(300px, 86vw);
        padding-inline-end: 14px;
        visibility: hidden;
        /* Physical: the drawer slides in from the right edge (RTL start). */
        transform: translateX(100%);
        transition: transform .26s var(--mvn-ease), visibility 0s linear .26s;
    }
    [dir="ltr"] .mvn-rail {
        transform: translateX(-100%);
    }
    html.mvn-ui.mvn-nav-open .mvn-rail {
        visibility: visible;
        transform: none;
        box-shadow: var(--mvn-shadow-pop);
        transition: transform .26s var(--mvn-ease);
    }
    /* No page beside the drawer, so the active item is a plain highlight. */
    html.mvn-ui .mvn-nav-link,
    html.mvn-ui .mvn-nav-link.is-active {
        margin-inline-end: 0;
        border-radius: var(--mvn-r-tab);
    }
    html.mvn-ui .mvn-nav-link.is-active {
        background: var(--mvn-paper);
    }
    .mvn-nav-link.is-active::before,
    .mvn-nav-link.is-active::after {
        display: none;
    }
    .mvn-nav-group + .mvn-nav-group::before {
        inset-inline: 12px;
    }
    .mvn-rail-foot {
        margin-inline-end: 0;
    }

    .mvn-top {
        position: sticky;
        top: 0;
        min-height: 56px;
        margin-block-end: 16px;
        background: var(--mvn-page);
        box-shadow: 0 1px 0 var(--mvn-rule);
    }
    html.mvn-ui .mvn-top-menu {
        display: inline-flex;
    }
    .mvn-top-logo {
        display: block;
    }
    .mvn-top-label,
    .mvn-account-text {
        display: none;
    }
    html.mvn-ui .mvn-account-btn {
        gap: 6px;
        padding-inline-end: 6px;
    }
    .mvn-viewing {
        display: none;
    }
    .mvn-foot-copy {
        margin-inline-start: 0;
    }
}

/* Touch screens: 44px targets without changing the desktop density. */
@media (pointer: coarse) {
    html.mvn-ui :is(.mvn-nav-link, .mvn-top-btn, .mvn-account-btn, .mvn-menu a, .mvn-order, .mvn-top-menu) {
        min-height: 44px;
    }
    html.mvn-ui .mvn-top-menu {
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.mvn-ui :is(.mvn-rail, .mvn-nav-link, .mvn-nav-link i, .mvn-top-btn, .mvn-account-btn, .mvn-order) {
        transition: none !important;
    }
}

/* ==========================================================================
   Wide screens: section titles hang in the margin column, beside their body,
   and stay in view beside long lists. Lists keep at least 752px.
   ========================================================================== */
@media (min-width: 1280px) {
    .mvn-part {
        display: grid;
        grid-template-columns: var(--mvn-margin-w) minmax(0, 1fr);
        align-items: start;
        column-gap: var(--mvn-margin-gap);
        row-gap: var(--mvn-s-4);
    }
    .mvn-part > :not(.mvn-part-head) {
        grid-column: 2;
    }
    .mvn-part-head {
        position: sticky;
        top: var(--mvn-s-5);
        grid-row: 1;
        grid-column: 1;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--mvn-s-1);
        /* The title sits on the first line of the body beside it. */
        padding-block-start: var(--mvn-s-2);
    }
    .mvn-part-links {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   Below 992px: the rail is a drawer and the page is one column
   ========================================================================== */
@media (max-width: 991.98px) {
    html.mvn-ui body.lagom .main-header {
        padding-block-start: var(--mvn-s-2);
    }
    html.mvn-ui body.lagom .main-body {
        padding-block-start: var(--mvn-s-5);
    }
    .mvn-rooms {
        grid-auto-flow: row;
    }
    .mvn-room + .mvn-room {
        border-inline-start: 0;
        border-block-start: var(--mvn-hair) solid var(--mvn-rule-soft);
    }
}

/* ==========================================================================
   Phones: smaller steps, and rows reflow into a title line and a detail line
   ========================================================================== */
@media (max-width: 599.98px) {
    html.mvn-ui {
        --mvn-frame-pad: 16px;
        --mvn-page-gap: 32px;
        --mvn-t-title: 28px;
        --mvn-t-lede: 16px;
        --mvn-t-part: 18px;
        --mvn-t-clock: 36px;
        --mvn-fact-label: 112px;
    }
    .mvn-head {
        flex-direction: column;
        align-items: stretch;
        gap: var(--mvn-s-4);
    }
    .mvn-head-main {
        flex-basis: auto;
    }
    .mvn-head-aside {
        order: -1;
    }
    .mvn-head-tools {
        align-self: stretch;
    }
    .mvn-head-tools > * {
        flex: 1 1 100%;
    }
    .mvn-head-actions .mvn-btn {
        flex: 1 1 auto;
    }
    .mvn-clock {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 var(--mvn-s-3);
        text-align: start;
    }
    .mvn-clock .mvn-clock-date {
        margin: 0;
    }
    .mvn-clock .mvn-clock-hebrew {
        flex-basis: 100%;
    }

    /* The bar: each group of tabs scrolls on its own line; actions wrap below. */
    .mvn-subnav-group:not(.is-actions) {
        flex-basis: 100%;
    }
    .mvn-subnav-group.is-actions {
        margin-inline-start: 0;
    }

    .mvn-frame {
        grid-template-columns: minmax(0, 1fr);
    }
    /* The column labels repeat what each row says; a phone row carries its own words. */
    .mvn-frame-cols {
        display: none;
    }
    html.mvn-ui .mvn-rows {
        display: block;
    }
    html.mvn-ui .mvn-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "main acts"
            "cells acts";
        column-gap: var(--mvn-s-4);
        row-gap: var(--mvn-s-2);
    }
    .mvn-row-main {
        grid-area: main;
    }
    .mvn-row-cells {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--mvn-s-1) var(--mvn-s-4);
        grid-area: cells;
    }
    .mvn-row-cells:empty {
        display: none;
    }
    .mvn-row-acts {
        flex-direction: column;
        align-items: flex-end;
        gap: var(--mvn-s-1);
        grid-area: acts;
    }
    .mvn-row-title,
    .mvn-row-sub {
        white-space: normal;
    }
    .mvn-frame-foot .mvn-btn {
        flex: 1 1 100%;
    }

    .mvn-facts {
        grid-template-columns: minmax(0, 1fr);
    }
    .mvn-fact:nth-child(2) {
        border-block-start: var(--mvn-hair) solid var(--mvn-rule-soft);
    }
    .mvn-fact:nth-child(odd) {
        border-inline-end: 0;
    }
    .mvn-fields.is-pair {
        grid-template-columns: minmax(0, 1fr);
    }
    .mvn-form-foot .mvn-btn {
        flex: 1 1 auto;
    }
    .mvn-msg-time {
        flex-basis: 100%;
        margin-inline-start: 0;
    }
    html.mvn-ui body.lagom .modal-footer > .btn {
        flex: 1 1 auto;
    }
}

/* ==========================================================================
   Touch screens: 44px targets without changing the desktop density
   ========================================================================== */
@media (pointer: coarse) {
    html.mvn-ui :is(.mvn-act, .mvn-part-link, .mvn-back, .mvn-subnav-link, .mvn-tab, .mvn-pager-page) {
        min-height: var(--mvn-touch);
    }
    html.mvn-ui .mvn-act {
        justify-content: center;
        min-width: var(--mvn-touch);
    }
    html.mvn-ui .mvn-btn,
    html.mvn-ui .mvn-btn.is-small {
        min-height: var(--mvn-touch);
    }
    html.mvn-ui .mvn-copy {
        width: var(--mvn-touch);
        height: var(--mvn-touch);
    }
    html.mvn-ui .mvn-check {
        min-height: var(--mvn-touch);
        align-items: center;
    }
    html.mvn-ui .mvn-check input {
        margin: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.mvn-ui :is(.mvn-row, .mvn-act, .mvn-btn, .mvn-back, .mvn-copy, .mvn-subnav-link, .mvn-tab, .mvn-part-link, .mvn-link, .mvn-pager-page, .mvn-input, .mvn-select, .mvn-textarea) {
        transition: none;
    }
    .mvn-fold > summary::after {
        transition: none;
    }
    html.mvn-ui .mvn-btn[aria-busy="true"]::after {
        animation: mvn-busy-in 0s linear var(--mvn-busy-delay) forwards;
    }
}

/* ==========================================================================
   Print: the page's content alone (an invoice, a ticket), on white
   ========================================================================== */
@media print {
    html.mvn-ui body.lagom {
        padding: 0 !important;
    }
    html.mvn-ui :is(.mvn-rail, .mvn-top, .mvn-scrim, .mvn-subnav, .mvn-head-actions, .mvn-foot) {
        display: none !important;
    }
    html.mvn-ui .mvn-row:hover {
        background: none;
    }
}