/* ============================================================================
   Wizard navigation — every wizard in the app.
   Served as _content/wPylon.Client.Component/css/wizard.css; link it from each
   host's App.razor (Explorer and B2B both render these pages).

   Scope
     `.ep-wizard.--fullscreen` is set by all 35 wizards via SetClassAttribute and
     by nothing else, so it targets exactly the wizards and nothing around them.

   Layouts
     tiers   — the default; group tabs on one scrolling row, the active group's
               steps below. Written on the base selector so it also applies before
               (or without) WizardHelper.js.
     rail    — a vertical section tree on the left.
     compact — a single 44px bar plus a drawer.

   Colour
     Tokens only. common.css already maps the Kendo palette onto --ep-*, so all
     four themes and dark mode work with no per-theme rules here. For tinted
     backgrounds use the hue-component idiom the framework itself uses for
     --gridCellHoverBG rather than --ep-primary-subtle, which is not redefined
     under .dark-mode.
   ============================================================================ */

/* ── 1. layout resolution ───────────────────────────────────────────────────
   The cascade decides; WizardHelper.js reads the resolved value with
   getComputedStyle and mirrors it onto .k-wizard as wz-tiers/wz-rail/wz-compact.
   Modifiers only ever set --wz-want, so the viewport clamp below can override
   --wz-layout from the same selector without fighting their specificity.        */

.ep-wizard.--fullscreen                                     { --wz-want: tiers; }
:where(html.wizardlayout-tiers)   .ep-wizard.--fullscreen   { --wz-want: tiers; }
:where(html.wizardlayout-rail)    .ep-wizard.--fullscreen   { --wz-want: rail; }
:where(html.wizardlayout-compact) .ep-wizard.--fullscreen   { --wz-want: compact; }

/* A wizard's own modifier outranks the user's setting, because :where() above
   contributes no specificity. To let the user win instead, move :where() onto
   these two selectors — that is the whole change. */
.ep-wizard.--fullscreen.--rail    { --wz-want: rail; }
.ep-wizard.--fullscreen.--compact { --wz-want: compact; }

.ep-wizard.--fullscreen .k-wizard { --wz-layout: var(--wz-want, tiers); }

@media (max-width: 899.98px) {
    /* A 17rem rail cannot work on a phone. This clamps presentation only —
       nothing stored changes, so the choice returns when the window widens. */
    .ep-wizard.--fullscreen .k-wizard { --wz-layout: compact; }
}

/* ── 2. local scale, derived from the appearance tokens ────────────────────── */

.ep-wizard.--fullscreen {
    --wz-rail-width: 17rem;

    /*  Everything below comes from the appearance settings so the stepper tracks them like
        the rest of the app. Font size is a <html> font-size of 12/14/16px, so every rem here
        scales with "Μέγεθος γραμμάτων"; the padding and gap tokens are what "Πυκνότητα"
        swaps between Άνετη and Πυκνή. Hardcoded px or rem here would make the wizard the one
        component that ignores both. */
    --wz-fs:      var(--txtSizeNormal, 1rem);      /* step labels, group titles — body size */
    --wz-fs-sm:   var(--txtSizeSmall, 0.85rem);    /* counts, progress caption */
    --wz-pad:     var(--generalPadding, 1rem);     /* panel padding */
    --wz-gap:     var(--flex-column-gap, 0.75rem); /* indicator ↔ label */
    --wz-gap-sm:  var(--general-gap-sm, 0.5rem);
    --wz-cell-y:  var(--ep-cell-padding-sm, 0.25rem);
    --wz-cell-x:  var(--ep-cell-padding-md, 0.4rem);

    --wz-radius: var(--ep-border-radius, var(--borderRadius, 0.25rem));
    --wz-line: var(--ep-border-color, #d3d3d3);
    --wz-surface: var(--ep-color-surface-alt, #fff);
    --wz-surface-2: var(--ep-color-surface, #f8f9fa);
    --wz-accent: var(--ep-primary, #e143c9);
    --wz-on-accent: var(--ep-on-primary, #fff);
    --wz-done: var(--ep-success, #52c41a);
    --wz-text: var(--textDefault, #67748e);
    --wz-text-strong: var(--textStrong, #252f40);
    --wz-text-dim: var(--textLight, #a1a5a6);
    /* Composited over whatever surface is behind, so it is correct in every
       theme and in dark mode without a second declaration. */
    --wz-tint: hsl(var(--ep-primaryH, 309) var(--ep-primaryS, 72%) var(--ep-primaryL, 57%) / 0.12);
    --wz-ring: hsl(var(--ep-primaryH, 309) var(--ep-primaryS, 72%) var(--ep-primaryL, 57%) / 0.22);
}

/* ── 3. reset what Kendo and common.css assume ─────────────────────────────── */

/*  !important is unavoidable in these two rules: Telerik writes them as INLINE styles on
    every render, and an inline declaration outranks any selector.

      .k-stepper   style="display: grid; grid-template-columns: repeat(2N, 1fr)"
      li.k-step    style="width: 4%"

    Left alone, the stepper is a 2N-column grid: the step row carries its own inline
    grid-column:1/-1 and spans it, but the active group's step row — which this design moves
    up to be a sibling of that list — gets auto-placed into a single 1/48th column and is
    clipped to a sliver. And each step is pinned to 100/N % of the width, so a label like
    "Welcome to Setup Wizard" spills out of a 38px box and lands on top of the group tabs.

    (The <style> blocks removed from the three razor pages were fighting the same inline grid
    with the same !important. That part of them was not dead code — the earlier read of this
    file was wrong about that.) */
.ep-wizard.--fullscreen .k-stepper {
    display: flex !important;
    grid-template-columns: none !important;
}
.ep-wizard.--fullscreen .k-step { width: auto !important; }

/* We draw our own connectors; Kendo's bar cannot follow grouped steps. */
.ep-wizard.--fullscreen .k-stepper .k-progressbar { display: none; }

.ep-wizard.--fullscreen .k-step-list,
.ep-wizard.--fullscreen .k-step-group-steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*  Kendo stacks the indicator over a centred, wrapping label. Undo that for every step,
    NOT just the ones inside .k-step-list-horizontal: in the tier layout the active group's
    row is moved out of that <ol>, so anything scoped to it silently stops applying and
    Kendo's defaults come back — collapsed rows and centred, wrapped labels. */
.ep-wizard.--fullscreen .k-step { flex: 0 0 auto; text-align: start; }

.ep-wizard.--fullscreen .k-step-link {
    margin: 0;
    max-width: none;
    flex-direction: row;
    align-items: center;
    gap: var(--wz-gap);
}

.ep-wizard.--fullscreen .k-step .k-step-indicator + .k-step-label {
    margin: 0;
    padding: 0;
    width: auto;
}

.ep-wizard.--fullscreen .k-step .k-step-label {
    max-width: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
    text-align: start;
}

/*  common.css forces the label text to wrap (white-space:normal; display:block). Every one
    of our layouts wants a single line that ellipsises instead, so this has to out-rank it. */
.ep-wizard.--fullscreen .k-stepper .k-step .k-step-label .k-step-text {
    display: block;
    max-width: 14rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* ── 4. step states — shared by all three layouts ──────────────────────────── */

.ep-wizard.--fullscreen .k-step-indicator {
    margin: 0;
    border-width: 1px;
    border-style: solid;
    border-color: var(--wz-line);
    background-color: var(--wz-surface);
    color: var(--wz-text);
    font-variant-numeric: tabular-nums;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/*  The check mark and the group-local number are written by WizardHelper.js as the
    indicator's text. They cannot be done in CSS: Kendo already uses ::before for the
    filled backdrop and ::after for the focus ring (display:none until :focus), so a
    generated glyph lands on a hidden element and appears as a stray circle when Kendo
    reveals it. Nothing here may touch those two pseudo-elements.

    common.css:4981-4982 paints k-step-done and k-step-current identically, which is why
    you cannot tell where you are in any plain wizard — and why the setup wizard grew a
    hardcoded override. Completed steps get their own colour here instead; the specificity
    has to clear that rule's (0,3,0). */
.ep-wizard.--fullscreen .k-stepper .k-step.k-step-done .k-step-indicator {
    background-color: var(--wz-done);
    border-color: var(--wz-done);
    color: #fff;
}

.ep-wizard.--fullscreen .k-stepper .k-step.k-step-current .k-step-indicator,
.ep-wizard.--fullscreen .k-stepper .k-step.k-step-current.k-step-done .k-step-indicator {
    background-color: var(--wz-accent);
    border-color: var(--wz-accent);
    color: var(--wz-on-accent);
    box-shadow: 0 0 0 3px var(--wz-ring);
}

.ep-wizard.--fullscreen .k-step-label { color: var(--wz-text); min-width: 0; }
.ep-wizard.--fullscreen .k-step.k-step-done .k-step-label { color: var(--wz-text-strong); }
.ep-wizard.--fullscreen .k-step.k-step-current .k-step-label {
    color: var(--wz-accent);
    font-weight: 600;
}

.ep-wizard.--fullscreen .k-step-link { cursor: pointer; border-radius: var(--wz-radius); }
.ep-wizard.--fullscreen .k-step:hover:not(.k-disabled):not(.k-step-disabled) .k-step-link {
    background: var(--wz-tint);
}
.ep-wizard.--fullscreen .k-step-link:focus-visible {
    outline: 2px solid var(--wz-accent);
    outline-offset: -2px;
}

/*  StepperLinear defaults to true, so 32 of the 35 wizards forbid jumping ahead —
    but nothing dimmed those steps, so they read as clickable. */
.ep-wizard.--fullscreen .k-stepper .k-step.k-disabled,
.ep-wizard.--fullscreen .k-stepper .k-step.k-step-disabled {
    opacity: 0.45;
    pointer-events: none;
}
.ep-wizard.--fullscreen .k-stepper .k-step.k-disabled .k-step-indicator,
.ep-wizard.--fullscreen .k-stepper .k-step.k-step-disabled .k-step-indicator {
    background-color: var(--wz-surface);
    border-style: dashed;
}

/* ── 5. group chrome (only present once WizardHelper.js has grouped a wizard) ─ */

.ep-wizard.--fullscreen .k-step-group-header {
    display: flex;
    align-items: center;
    gap: var(--wz-gap-sm);
    font: inherit;
    color: var(--wz-text);
    background: none;
    border: 0;
    text-align: start;
    cursor: pointer;
}
.ep-wizard.--fullscreen .k-step-group-header:focus-visible {
    outline: 2px solid var(--wz-accent);
    outline-offset: -2px;
}
.ep-wizard.--fullscreen .wz-gtitle {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*  Drawn with borders rather than a glyph: ▾ falls back inconsistently across the
    font stacks the themes select, and rendered as a bullet on Windows. */
.ep-wizard.--fullscreen .wz-chev {
    position: relative;
    flex: 0 0 0.8rem;
    width: 0.8rem;
    height: 0.8rem;
    color: var(--wz-text-dim);
    transform: rotate(-90deg);
    transition: transform .18s ease;
}
.ep-wizard.--fullscreen .wz-chev::before {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    width: 0.3rem;
    height: 0.3rem;
    margin-top: -0.22rem;
    margin-inline-start: -0.15rem;
    border-inline-end: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}
.ep-wizard.--fullscreen .k-step-group.expanded > .k-step-group-header .wz-chev { transform: rotate(0); }

.ep-wizard.--fullscreen .wz-count {
    font-size: var(--wz-fs-sm);
    font-variant-numeric: tabular-nums;
    color: var(--wz-text-dim);
}
.ep-wizard.--fullscreen .wz-pips { display: flex; gap: 2px; width: 100%; }
.ep-wizard.--fullscreen .wz-pips i {
    flex: 1;
    min-width: 9px;
    height: 3px;
    border-radius: 2px;
    background: var(--wz-line);
}
.ep-wizard.--fullscreen .wz-pips i.done { background: var(--wz-done); }
.ep-wizard.--fullscreen .wz-pips i.cur { background: var(--wz-accent); }

/* Chrome that only one layout uses is emitted always and hidden by the others. */
.ep-wizard.--fullscreen .wz-head,
.ep-wizard.--fullscreen .wz-cbar { display: none; }

/* ============================================================================
   6. DEFAULT LAYOUT — two tiers
   Written on the base selector, so a wizard renders correctly before the script
   runs and on any page where it never does.
   ============================================================================ */

.ep-wizard.--fullscreen .k-wizard { flex-direction: column; }

.ep-wizard.--fullscreen .k-stepper {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--wz-surface);
    border-bottom: 1px solid var(--wz-line);
}

/*  The active group's step row is reparented to .k-stepper by the script, so it is
    not a descendant of this scroller and cannot be clipped by it. That is what lets
    the tab row stay on one line. */
.ep-wizard.--fullscreen .k-step-list {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--wz-cell-y);
    padding: var(--wz-gap-sm) var(--wz-pad) 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}
.ep-wizard.--fullscreen .k-step-list.is-scrollable {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.15rem, #000 calc(100% - 1.15rem), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 1.15rem, #000 calc(100% - 1.15rem), transparent 100%);
}

/*  scrollbar-width:thin is ignored by Chrome on Windows, which draws a full-height grey
    bar that swallows most of the row. Style it explicitly and keep it out of the flow. */
.ep-wizard.--fullscreen .k-step-list {
    scrollbar-color: var(--wz-line) transparent;
}
.ep-wizard.--fullscreen .k-step-list::-webkit-scrollbar { height: 6px; }
.ep-wizard.--fullscreen .k-step-list::-webkit-scrollbar-track { background: transparent; }
.ep-wizard.--fullscreen .k-step-list::-webkit-scrollbar-thumb {
    background: var(--wz-line);
    border-radius: 3px;
}
.ep-wizard.--fullscreen .k-step-list::-webkit-scrollbar-thumb:hover { background: var(--wz-text-dim); }
.ep-wizard.--fullscreen .k-stepper > .k-step-group-steps::-webkit-scrollbar { height: 6px; }
.ep-wizard.--fullscreen .k-stepper > .k-step-group-steps::-webkit-scrollbar-track { background: transparent; }
.ep-wizard.--fullscreen .k-stepper > .k-step-group-steps::-webkit-scrollbar-thumb {
    background: var(--wz-line);
    border-radius: 3px;
}

/*  A step belonging to no group sits among the tabs — the setup wizard's welcome page is
    one. Without this it inherits the bare step layout and collapses into a narrow column
    of wrapped words next to full-height tabs. Give it a tab's box instead. */
.ep-wizard.--fullscreen .k-wizard:not(.wz-ungrouped) .k-step-list > .k-step {
    display: flex;
    align-items: center;
    align-self: stretch;
    padding: var(--wz-cell-y) var(--wz-gap) calc(var(--wz-cell-y) + 2px);
    border-bottom: 2px solid transparent;
    border-radius: var(--wz-radius) var(--wz-radius) 0 0;
}
.ep-wizard.--fullscreen .k-wizard:not(.wz-ungrouped) .k-step-list > .k-step:hover {
    background: var(--wz-surface-2);
}
.ep-wizard.--fullscreen .k-wizard:not(.wz-ungrouped) .k-step-list > .k-step.k-step-current {
    border-bottom-color: var(--wz-accent);
}
.ep-wizard.--fullscreen .k-wizard:not(.wz-ungrouped) .k-step-list > .k-step .k-step-text {
    max-width: 11rem;
}
/* no connector between a loose step and the first tab */
.ep-wizard.--fullscreen .k-wizard:not(.wz-ungrouped) .k-step-list > .k-step + .k-step {
    margin-inline-start: 0;
}
.ep-wizard.--fullscreen .k-wizard:not(.wz-ungrouped) .k-step-list > .k-step + .k-step::before {
    content: none;
}

.ep-wizard.--fullscreen .k-step-group {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}
.ep-wizard.--fullscreen .k-step-group > .k-step-group-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--wz-cell-y);
    padding: var(--wz-cell-y) var(--wz-gap) calc(var(--wz-cell-y) + 2px);
    border-bottom: 2px solid transparent;
    border-radius: var(--wz-radius) var(--wz-radius) 0 0;
    font-size: var(--wz-fs);
    font-weight: 600;
    white-space: nowrap;
}
.ep-wizard.--fullscreen .k-step-group > .k-step-group-header:hover { background: var(--wz-surface-2); }

/*  Two different states, and they must not look the same:
      .tab-active   — this group's steps are the ones on the row below (you are browsing it)
      .has-current  — this group contains the step you are actually on
    They coincide most of the time, but not when you jump to an ungrouped step such as the
    welcome page. Browsing alone gets a muted rule; only the group you are really in takes
    the accent, so nothing claims to be selected when it is not. */
.ep-wizard.--fullscreen .k-step-group.tab-active > .k-step-group-header {
    border-bottom-color: var(--wz-line);
}
.ep-wizard.--fullscreen .k-step-group.tab-active > .k-step-group-header .wz-gtitle {
    color: var(--wz-text-strong);
}
.ep-wizard.--fullscreen .k-step-group.tab-active.has-current > .k-step-group-header {
    border-bottom-color: var(--wz-accent);
}
.ep-wizard.--fullscreen .k-step-group.tab-active.has-current > .k-step-group-header .wz-gtitle {
    color: var(--wz-accent);
}
.ep-wizard.--fullscreen .k-step-group .wz-chev,
.ep-wizard.--fullscreen .k-step-group .wz-count { display: none; }

/* Nested rows stay hidden; the one lifted to .k-stepper is the visible tier. */
.ep-wizard.--fullscreen .k-step-group .k-step-group-steps { display: none; }
.ep-wizard.--fullscreen .k-stepper > .k-step-group-steps {
    display: flex;
    align-items: center;
    overflow-x: auto;
    padding: var(--wz-pad) var(--wz-pad);
    border-top: 1px solid var(--wz-line);
    background: var(--wz-surface-2);
}

/* Group-local numbering is written into the indicator by WizardHelper.js — see the note in
   section 4 for why it cannot be a CSS counter on ::after. */
.ep-wizard.--fullscreen .k-stepper > .k-step-group-steps > .k-step .k-step-indicator {
    font-size: var(--wz-fs-sm);
    font-weight: 600;
}

/* Connector between consecutive steps on the horizontal row. */
.ep-wizard.--fullscreen .k-stepper > .k-step-group-steps > .k-step + .k-step,
.ep-wizard.--fullscreen .k-step-list > .k-step + .k-step {
    margin-inline-start: 2.5rem;
    position: relative;
}
.ep-wizard.--fullscreen .k-stepper > .k-step-group-steps > .k-step + .k-step::before,
.ep-wizard.--fullscreen .k-step-list > .k-step + .k-step::before {
    content: "";
    position: absolute;
    inset-inline-start: -2.25rem;
    top: 50%;
    width: 1.75rem;
    height: 1px;
    background: var(--wz-line);
}

/* Ungrouped: no tabs, so the step row Kendo rendered is the only row. */
.ep-wizard.--fullscreen .k-wizard.wz-ungrouped .k-step-list {
    padding: var(--wz-pad) var(--wz-pad);
    overflow-x: auto;
}

/* ============================================================================
   7. LAYOUT — vertical rail
   ============================================================================ */

.ep-wizard.--fullscreen .k-wizard.wz-rail { flex-direction: row; align-items: stretch; }

.ep-wizard.--fullscreen .k-wizard.wz-rail .k-stepper {
    flex: 0 0 var(--wz-rail-width);
    border-bottom: 0;
    border-inline-end: 1px solid var(--wz-line);
    overflow: hidden;
}
.ep-wizard.--fullscreen .k-wizard.wz-rail .wz-head {
    display: block;
    padding: var(--wz-pad) var(--wz-pad) var(--wz-gap-sm);
    border-bottom: 1px solid var(--wz-line);
}
.ep-wizard.--fullscreen .k-wizard.wz-rail .wz-head-title {
    font-size: var(--wz-fs);
    font-weight: 600;
    color: var(--wz-text-strong);
}
.ep-wizard.--fullscreen .k-wizard.wz-rail .wz-head-sub {
    margin-top: 2px;
    font-size: var(--wz-fs-sm);
    color: var(--wz-text);
    font-variant-numeric: tabular-nums;
}
.ep-wizard.--fullscreen .k-wizard.wz-rail .wz-bar {
    margin-top: 0.56rem;
    height: 3px;
    border-radius: 2px;
    background: var(--wz-line);
    overflow: hidden;
}
.ep-wizard.--fullscreen .k-wizard.wz-rail .wz-bar > i {
    display: block;
    height: 100%;
    background: var(--wz-accent);
    transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

.ep-wizard.--fullscreen .k-wizard.wz-rail .k-step-list {
    flex: 1;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1px;
    padding: var(--wz-cell-y) var(--wz-gap-sm) var(--wz-pad);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-mask-image: none;
            mask-image: none;
}
.ep-wizard.--fullscreen .k-wizard.wz-rail .k-step-group { display: block; }
.ep-wizard.--fullscreen .k-wizard.wz-rail .k-step-group > .k-step-group-header {
    width: 100%;
    flex-direction: row;
    align-items: center;
    padding: var(--wz-cell-y) var(--wz-cell-x);
    border-bottom: 0;
    border-radius: var(--wz-radius);
    font-size: var(--wz-fs);
    font-weight: 600;
}
.ep-wizard.--fullscreen .k-wizard.wz-rail .k-step-group > .k-step-group-header:hover { background: var(--wz-surface-2); }
.ep-wizard.--fullscreen .k-wizard.wz-rail .k-step-group.has-current > .k-step-group-header { color: var(--wz-text-strong); }
.ep-wizard.--fullscreen .k-wizard.wz-rail .wz-chev { display: inline-block; }
.ep-wizard.--fullscreen .k-wizard.wz-rail .wz-gtitle { flex: 1; }
.ep-wizard.--fullscreen .k-wizard.wz-rail .wz-count {
    display: inline;
    padding: 1px 0.44rem;
    border-radius: 999px;
    background: var(--wz-surface-2);
}
.ep-wizard.--fullscreen .k-wizard.wz-rail .k-step-group.all-done .wz-count {
    color: var(--wz-done);
    background: transparent;
}
.ep-wizard.--fullscreen .k-wizard.wz-rail .wz-pips { display: none; }

.ep-wizard.--fullscreen .k-wizard.wz-rail .k-step-group .k-step-group-steps { display: none; }
.ep-wizard.--fullscreen .k-wizard.wz-rail .k-step-group.expanded > .k-step-group-steps {
    display: block;
    position: relative;
    padding: 2px 0 0.375rem;
}
/* the vertical connector, aligned to the centre of the indicators */
.ep-wizard.--fullscreen .k-wizard.wz-rail .k-step-group-steps::before {
    content: "";
    position: absolute;
    inset-inline-start: 1.75rem;
    top: 0.375rem;
    bottom: 0.75rem;
    width: 1px;
    background: var(--wz-line);
}
.ep-wizard.--fullscreen .k-wizard.wz-rail .k-step {
    display: block;
    margin: 0;
    padding: 0;
    text-align: start;
}
.ep-wizard.--fullscreen .k-wizard.wz-rail .k-step + .k-step { margin-inline-start: 0; }
.ep-wizard.--fullscreen .k-wizard.wz-rail .k-step + .k-step::before { content: none; }
.ep-wizard.--fullscreen .k-wizard.wz-rail .k-step-link {
    padding: var(--wz-cell-y) var(--wz-cell-x) var(--wz-cell-y) 1.31rem;
    gap: var(--wz-gap);
}
/*  The rail is a checklist, not a numbered list: a dot for pending, a check for done.
    The indicator is too small for a number, so the text is scaled away here and the JS
    only ever puts a check in it. */
.ep-wizard.--fullscreen .k-wizard.wz-rail .k-stepper .k-step .k-step-indicator {
    width: 1rem;
    height: 1rem;
    font-size: 0.56rem;
    z-index: 1;
}
.ep-wizard.--fullscreen .k-wizard.wz-rail .k-stepper .k-step:not(.k-step-done) .k-step-indicator {
    color: transparent;
}
.ep-wizard.--fullscreen .k-wizard.wz-rail .k-step-label .k-step-text {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--wz-fs);
}

/* ============================================================================
   8. LAYOUT — compact
   ============================================================================ */

.ep-wizard.--fullscreen .k-wizard.wz-compact { flex-direction: column; }

/*  One line, always. The whole point of this layout is a 44px bar; letting it wrap put the
    "all steps" button on a second row and doubled the chrome. Everything that can lose
    space does so instead — the breadcrumb ellipsises, the meter shrinks. */
.ep-wizard.--fullscreen .k-wizard.wz-compact .wz-cbar {
    display: flex;
    align-items: center;
    gap: var(--wz-pad);
    flex-wrap: nowrap;
    min-height: 2.75rem;
    padding: var(--wz-gap-sm) var(--wz-pad);
}

.ep-wizard.--fullscreen .k-wizard.wz-compact .wz-crumb {
    display: flex;
    align-items: center;
    gap: var(--wz-gap-sm);
    flex: 0 1 auto;
    min-width: 0;
    font-size: var(--wz-fs);
    white-space: nowrap;
}
.ep-wizard.--fullscreen .k-wizard.wz-compact .wz-crumb-g,
.ep-wizard.--fullscreen .k-wizard.wz-compact .wz-crumb-s {
    overflow: hidden;
    text-overflow: ellipsis;
}
.ep-wizard.--fullscreen .k-wizard.wz-compact .wz-crumb-g { flex: 0 1 auto; }
.ep-wizard.--fullscreen .k-wizard.wz-compact .wz-crumb-sep { flex: none; color: var(--wz-text-dim); }
.ep-wizard.--fullscreen .k-wizard.wz-compact .wz-crumb-s {
    flex: 0 1 auto;
    color: var(--wz-accent);
    font-weight: 600;
}

.ep-wizard.--fullscreen .k-wizard.wz-compact .wz-segs {
    display: flex;
    gap: 3px;
    flex: 1 1 6rem;
    min-width: 3rem;
}
/* below this the meter is unreadable anyway and the bar needs the room */
@media (max-width: 560px) {
    .ep-wizard.--fullscreen .k-wizard.wz-compact .wz-segs { display: none; }
}
.ep-wizard.--fullscreen .k-wizard.wz-compact .wz-seg { display: flex; gap: 1.5px; flex: 1; }
.ep-wizard.--fullscreen .k-wizard.wz-compact .wz-seg i {
    flex: 1;
    height: 4px;
    border-radius: 1px;
    background: var(--wz-line);
}
.ep-wizard.--fullscreen .k-wizard.wz-compact .wz-seg i.done { background: var(--wz-done); }
.ep-wizard.--fullscreen .k-wizard.wz-compact .wz-seg i.cur { background: var(--wz-accent); }

.ep-wizard.--fullscreen .k-wizard.wz-compact .wz-cnt {
    font-size: var(--wz-fs-sm);
    color: var(--wz-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ep-wizard.--fullscreen .k-wizard.wz-compact .wz-all {
    flex: none;
    padding: var(--wz-cell-y) var(--wz-gap-sm);
    border: 0;
    border-radius: var(--wz-radius);
    background: var(--wz-tint);
    color: var(--wz-accent);
    font: 600 0.78rem/1 inherit;
    white-space: nowrap;
    cursor: pointer;
}

/* the drawer: the same step tree, laid out in columns */
.ep-wizard.--fullscreen .k-wizard.wz-compact .k-step-list { display: none; }
.ep-wizard.--fullscreen .k-wizard.wz-compact.wz-drawer-open .k-step-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--wz-pad) var(--wz-pad);
    padding: var(--wz-pad) var(--wz-pad);
    border-top: 1px solid var(--wz-line);
    background: var(--wz-surface-2);
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
}
/*  min-width:0 is required: a grid item defaults to min-width:auto and so refuses to shrink
    below its min-content width, which for a nowrap heading like "Charge Accounting
    Categories" means it spills over the next column instead of ellipsising. */
.ep-wizard.--fullscreen .k-wizard.wz-compact .k-step-group {
    display: block;
    min-width: 0;
}
.ep-wizard.--fullscreen .k-wizard.wz-compact .k-step-group > .k-step-group-header {
    /* the header is a <button>, and a button's auto width is fit-content even when it is
       display:flex — without this it grows past its grid column and spills into the next */
    width: 100%;
    flex-direction: row;
    padding: 0 0.375rem 0.31rem;
    border-bottom: 0;
    font-size: var(--wz-fs-sm);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--wz-text-dim);
    cursor: default;
}
.ep-wizard.--fullscreen .k-wizard.wz-compact .wz-chev,
.ep-wizard.--fullscreen .k-wizard.wz-compact .wz-count,
.ep-wizard.--fullscreen .k-wizard.wz-compact .wz-pips { display: none; }
.ep-wizard.--fullscreen .k-wizard.wz-compact .k-step-group .k-step-group-steps { display: block; }
.ep-wizard.--fullscreen .k-wizard.wz-compact .k-step { display: block; margin: 0; }
.ep-wizard.--fullscreen .k-wizard.wz-compact .k-step + .k-step { margin-inline-start: 0; }
.ep-wizard.--fullscreen .k-wizard.wz-compact .k-step + .k-step::before { content: none; }
.ep-wizard.--fullscreen .k-wizard.wz-compact .k-step-link { padding: var(--wz-cell-y) var(--wz-cell-x); gap: var(--wz-gap-sm); }
.ep-wizard.--fullscreen .k-wizard.wz-compact .k-step-indicator {
    width: 0.88rem;
    height: 0.88rem;
    font-size: 0.5rem;
}
.ep-wizard.--fullscreen .k-wizard.wz-compact .k-step:not(.k-step-done) .k-step-indicator {
    color: transparent;
}
.ep-wizard.--fullscreen .k-wizard.wz-compact .k-step-label .k-step-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--wz-fs);
}

/* ── 9. the step content pane ──────────────────────────────────────────────── */

/*  The rail's right border is a divider, not a margin — without this the form starts flush
    against it while the other three sides keep the wizard's own padding. Matches the gap
    common.css already puts on the outside via .ep-wizard .k-wizard { padding-inline }. */
.ep-wizard.--fullscreen .k-wizard.wz-rail .k-wizard-steps {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline-start: var(--wz-pad);
}

@media (prefers-reduced-motion: reduce) {
    .ep-wizard.--fullscreen * { transition: none !important; }
}