/**
 * UX2 components — the shared building blocks of the revamp, so every page looks and behaves the same:
 * type scale, buttons (main, ghost, AI, danger; small, icon), RAG status pills, toggle chips, selectable cards,
 * segmented filters, tabs, panels, ⋯ menus, form fields (label, red * for required, hint, error, "* Required" legend),
 * links and "nothing here" blocks.
 *
 * Builds on the rest of the UX2 layer and repeats none of it: the font (type.css, IBM Plex Sans), brand colours
 * (brand.css, --sko-*), checkboxes / radios / switches (polish.css: use the form-check markup), drawers (drawer.css),
 * tables (datatables.css or hiring-jobs.css). Text boxes, dropdowns and text areas: the Fields section below styles form-control / form-select themselves.
 * Colours: brand for actions and selection; violet (.ux2-btn-ai) only for buttons that make SKOAI write something;
 * status pills are RAG (Draft grey, Published blue, In progress amber, Done green, Failed red).
 *
 * Pages link it for now (Diskover v2 first); engine/ux2.php will load it on every UX2 page, and older page-only copies
 * (hj-btn, ss-btn, dk-btn…) move over as each page is touched.
 */
:root {
    --ux2k-ink: #181c32;
    --ux2k-ink-2: #3f4254;
    --ux2k-muted: #6b6f85; /* readable.css text-muted, 5.0:1 */
    --ux2k-quiet: #8a8fa3;
    --ux2k-line: #e4e7ec;
    --ux2k-line-2: #eef0f3;
    --ux2k-soft: #f5f7f9;
    --ux2k-brand: var(--sko-primary, #1e5f69);
    --ux2k-brand-dark: var(--sko-primary-dark, #154951);
    --ux2k-tint: var(--sko-secondary-light, #e9f0f1);
    --ux2k-tint-2: var(--sko-primary-light, #d4e0e2);
    --ux2k-ring: rgba(30, 95, 105, .35);
    --ux2k-ai: #7c3aed;
    --ux2k-ai-dark: #6d28d9;
    --ux2k-ai-soft: #f3efff;
    --ux2k-ai-line: #ddd3fe;
    --ux2k-ai-grad: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    --ux2k-blue: #1d5bd8;
    --ux2k-blue-bg: #e8effc;
    --ux2k-amber: #9a5b00;
    --ux2k-amber-bg: #fff4e0;
    --ux2k-green: #147a4b;
    --ux2k-green-bg: #e3f5ec;
    --ux2k-red: #c62828;
    --ux2k-red-bg: #fdecef;
    --ux2k-grey: #5e6278;
    --ux2k-grey-bg: #eef0f3;
    --ux2k-purple: #6b3fc9;
    --ux2k-purple-bg: #f1ebfd;
    --ux2k-shadow: 0 8px 28px rgba(24, 28, 50, .06);
    --ux2k-pop: 0 12px 32px rgba(24, 28, 50, .16);
    /* Type scale — the program form's (learning/courses/program-form.php), so every page reads the same:
       page title 19.5 / section 16 / panel 15, all weight 600; labels 13 / 600; text 13.5; small 12; buttons 14 / 500 */
    --ux2k-fs-xs: 12px;
    --ux2k-fs-sm: 13px;
    --ux2k-fs: 13.5px;
    --ux2k-fs-md: 14px;
    --ux2k-fs-btn: 14px;
    --ux2k-fs-h3: 15px;
    --ux2k-fs-h2: 16px;
    --ux2k-fs-h1: 19.5px;
    --ux2k-fw-head: 600;
    --ux2k-fw-label: 600;
    --ux2k-fw-btn: 500;
}

/* ---------- Type ---------- */
.ux2-h1 {
    margin: 0;
    font-size: var(--ux2k-fs-h1);
    font-weight: var(--ux2k-fw-head);
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--ux2k-ink);
}

.ux2-h2 {
    margin: 0;
    font-size: var(--ux2k-fs-h2);
    font-weight: var(--ux2k-fw-head);
    line-height: 1.3;
    color: var(--ux2k-ink);
}

.ux2-h3 {
    margin: 0;
    font-size: var(--ux2k-fs-h3);
    font-weight: var(--ux2k-fw-head);
    line-height: 1.35;
    color: var(--ux2k-ink);
}

.ux2-lead {
    margin: 0;
    font-size: var(--ux2k-fs);
    line-height: 1.55;
    color: var(--ux2k-muted);
}

.ux2-small {
    font-size: var(--ux2k-fs-sm);
    color: var(--ux2k-muted);
}

.ux2-eyebrow {
    font-size: var(--ux2k-fs-xs);
    font-weight: var(--ux2k-fw-label);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ux2k-muted);
}

/* Visually hidden (screen readers only); .ux2-sr is taken by older pages with other rules */
.ux2-vh {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Buttons ---------- */
.ux2-btn {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: var(--ux2k-fs-btn);
    font-weight: var(--ux2k-fw-btn);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
}

.ux2-btn :is(i.bi, svg.sko-i) {
    font-size: 1em;
    line-height: 1;
    color: inherit;
}

.ux2-btn:disabled,
.ux2-btn[aria-disabled="true"] {
    opacity: .5;
    cursor: default;
}

.ux2-btn:focus-visible,
.ux2-icon-btn:focus-visible,
.ux2-chip:has(input:focus-visible),
.ux2-link:focus-visible {
    outline: 3px solid var(--ux2k-ring);
    outline-offset: 2px;
}

.ux2-btn-main,
a.ux2-btn-main {
    color: #fff;
    background: var(--ux2k-brand);
}

.ux2-btn-main:hover:not(:disabled),
a.ux2-btn-main:hover {
    color: #fff;
    background: var(--ux2k-brand-dark);
}

.ux2-btn-ghost,
a.ux2-btn-ghost {
    color: var(--ux2k-ink-2);
    background: #fff;
    border-color: var(--ux2k-line);
}

.ux2-btn-ghost:hover:not(:disabled),
a.ux2-btn-ghost:hover {
    color: var(--ux2k-ink);
    background: var(--ux2k-soft);
    border-color: #cfd3dc;
}

/* A quieter main action, for one in every row (Score next): the brand tint, solid brand on hover */
.ux2-btn-soft,
a.ux2-btn-soft {
    color: var(--ux2k-brand);
    background: var(--ux2k-tint-2);
}

.ux2-btn-soft:hover:not(:disabled),
a.ux2-btn-soft:hover {
    color: #fff;
    background: var(--ux2k-brand);
}

/* Opt-in: the button's icon tilts and grows a little on hover (app cards); still with Reduce motion */
.ux2-btn-nudge :is(i.bi, svg.sko-i) {
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}

.ux2-btn-nudge:hover:not(:disabled) :is(i.bi, svg.sko-i),
.ux2-btn-nudge:focus-visible :is(i.bi, svg.sko-i) {
    transform: rotate(-14deg) scale(1.18);
}

@media (prefers-reduced-motion: reduce) {
    .ux2-btn-nudge :is(i.bi, svg.sko-i) {
        transition: none;
    }

    .ux2-btn-nudge:hover:not(:disabled) :is(i.bi, svg.sko-i),
    .ux2-btn-nudge:focus-visible :is(i.bi, svg.sko-i) {
        transform: none;
    }
}

.ux2-calm .ux2-btn-nudge :is(i.bi, svg.sko-i) {
    transition: none;
    transform: none !important;
}

/* Makes SKOAI write something — the one colour outside the brand */
.ux2-btn-ai,
a.ux2-btn-ai {
    color: #fff;
    background: var(--ux2k-ai-grad);
    box-shadow: 0 4px 14px rgba(109, 40, 217, .28);
}

.ux2-btn-ai:hover:not(:disabled),
a.ux2-btn-ai:hover {
    color: #fff;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
}

/* Uses something SKOAI wrote (Use 32.5, Use as feedback): violet outline, lighter than .ux2-btn-ai */
.ux2-btn-ai-line,
a.ux2-btn-ai-line {
    color: var(--ux2k-ai-dark);
    background: #fff;
    border-color: var(--ux2k-ai-line);
}

.ux2-btn-ai-line:hover:not(:disabled),
a.ux2-btn-ai-line:hover {
    color: var(--ux2k-ai-dark);
    background: var(--ux2k-ai-soft);
    border-color: var(--ux2k-ai);
}

.ux2-btn-danger {
    color: #fff;
    background: var(--ux2k-red);
}

.ux2-btn-danger:hover:not(:disabled) {
    background: #a51f1f;
}

.ux2-btn-sm {
    min-height: 34px;
    padding: 5px 12px;
    font-size: var(--ux2k-fs-sm);
}

.ux2-btn-block {
    width: 100%;
}

/* Icon-only button: always give it an aria-label */
.ux2-icon-btn {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 16px;
    color: var(--ux2k-muted);
    background: none;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
}

.ux2-icon-btn :is(i.bi, svg.sko-i) {
    color: inherit;
    line-height: 1;
}

.ux2-icon-btn:hover {
    color: var(--ux2k-ink);
    background: var(--ux2k-soft);
}

.ux2-icon-btn.ux2-btn-sm {
    width: 28px;
    height: 28px;
    min-height: 0;
    padding: 0;
    font-size: 14px;
}

/* Icon button in the brand tint (Clear filters on a filters row): a bigger glyph, solid brand on hover */
.ux2-icon-btn.ux2-btn-soft {
    font-size: 18px;
    color: var(--ux2k-brand);
    background: var(--ux2k-tint-2);
}

.ux2-icon-btn.ux2-btn-soft:hover {
    color: #fff;
    background: var(--ux2k-brand);
}

.ux2-link {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 2px 0;
    font-family: inherit;
    font-size: var(--ux2k-fs-sm);
    font-weight: 600;
    color: var(--ux2k-brand);
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
}

.ux2-link:hover {
    color: var(--ux2k-brand-dark);
    text-decoration: underline;
}

/* ---------- Status pills (RAG) ---------- */
.ux2-pill {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    padding: 2px 10px;
    font-size: var(--ux2k-fs-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--ux2k-grey);
    background: var(--ux2k-grey-bg);
    border-radius: 20px;
}

.ux2-pill.is-blue { color: var(--ux2k-blue); background: var(--ux2k-blue-bg); }
.ux2-pill.is-amber { color: var(--ux2k-amber); background: var(--ux2k-amber-bg); }
.ux2-pill.is-green { color: var(--ux2k-green); background: var(--ux2k-green-bg); }
.ux2-pill.is-red { color: var(--ux2k-red); background: var(--ux2k-red-bg); }
.ux2-pill.is-ai { color: var(--ux2k-ai-dark); background: var(--ux2k-ai-soft); }

/* ---------- Toggle chips: <label class="ux2-chip"><input type="checkbox|radio">Text</label> ---------- */
.ux2-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ux2-chip {
    position: relative;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 6px 12px;
    font-size: var(--ux2k-fs-sm);
    font-weight: 500;
    color: var(--ux2k-ink-2);
    background: #fff;
    border: 1px solid var(--ux2k-line);
    border-radius: 999px;
    cursor: pointer;
}

.ux2-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ux2-chip:hover {
    border-color: #c5cdd2;
}

.ux2-chip:has(input:checked) {
    color: var(--ux2k-brand-dark);
    background: var(--ux2k-tint);
    border-color: var(--ux2k-brand);
}

/* A chip that is a button (suggestions, follow-ups) */
button.ux2-chip {
    font-family: inherit;
}

button.ux2-chip:hover {
    color: var(--ux2k-ai-dark);
    background: var(--ux2k-ai-soft);
    border-color: var(--ux2k-ai-line);
}

/* ---------- Selectable cards (form-check inside) ---------- */
.ux2-choices {
    display: grid;
    gap: 8px;
}

.ux2-choice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--ux2k-line);
    border-radius: 11px;
    cursor: pointer;
}

.ux2-choice:has(input:checked) {
    background: var(--ux2k-tint);
    border-color: var(--ux2k-brand);
}

.ux2-choice .form-check {
    min-height: 0;
    margin: 1px 0 0;
}

.ux2-choice b {
    display: block;
    font-size: var(--ux2k-fs);
    color: var(--ux2k-ink);
}

.ux2-choice small {
    display: block;
    margin-top: 2px;
    font-size: var(--ux2k-fs-sm);
    color: #4f5366;   /* 4.5:1+ on white and on the ticked tint (--ux2k-muted is 4.29:1 there) */
}

/* ---------- A list of switches or checkboxes: <div class="ux2-checks"> around form-check rows ----------
   One row each, 12px apart by gap (Metronic's .form-check-custom sets margin 0, so rows spaced by margin touched).
   28px rows; the label is part of the tap area. A row that can't be used yet (is-soon: a disabled input and a
   "Coming soon" pill) stays readable: grey ink instead of Bootstrap's half opacity. */
.ux2-checks {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ux2-checks > .form-check {
    min-height: 28px;
    margin: 0;
    align-items: center;
}

.ux2-checks > .form-check .form-check-label {
    cursor: pointer;
}

.ux2-checks > .form-check.is-soon .form-check-label {
    color: #4f5366;   /* 7.5:1 on white; Bootstrap's 50% opacity left it near 2.5:1 */
    opacity: 1;
    cursor: default;
}

.ux2-checks .ux2-pill {
    margin-left: 6px;
}

/* ---------- Segmented filter: role="radiogroup", buttons role="radio" aria-checked — or, in a form, real radio
   buttons: <div class="ux2-seg" role="radiogroup"><label><input type="radio" name="…"><span>Once</span></label>… ---------- */
.ux2-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--ux2k-soft);
    border: 1px solid var(--ux2k-line);
    border-radius: 10px;
}

.ux2-seg button,
.ux2-seg > label {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 5px 9px;
    font-family: inherit;
    font-size: var(--ux2k-fs-sm);
    font-weight: 600;
    white-space: nowrap;
    color: var(--ux2k-muted);
    background: none;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

.ux2-seg > label > input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* An icon inside the option's <span> keeps the same gap as one directly in the label */
.ux2-seg > label > span {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
.ux2-seg > label:has(input:focus-visible) {
    outline: 2px solid var(--ux2k-ring);
    outline-offset: 1px;
}

.ux2-seg button[aria-checked="true"],
.ux2-seg > label:has(input:checked) {
    color: #fff;
    background: var(--ux2k-brand);
}

/* A count next to the label: <button role="radio">Verified <em>12</em></button> — a light brand circle, bold brand
   number (a pill once it has 3+ digits); in a radio-button group the count is <small> */
.ux2-seg > label small:empty {
    display: none;
}

.ux2-seg button em,
.ux2-seg > label small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: var(--ux2k-fs-xs);
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--ux2k-brand);
    background: var(--ux2k-tint);
    border-radius: 999px;
}

/* ---------- Tabs: role="tablist", buttons role="tab" aria-selected ---------- */
.ux2-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    border-bottom: 1px solid var(--ux2k-line);
}

.ux2-tabs [role="tab"] {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-bottom: -1px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: var(--ux2k-fs);
    font-weight: 600;
    white-space: nowrap;
    color: var(--ux2k-muted);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.ux2-tabs [role="tab"][aria-selected="true"] {
    color: var(--ux2k-brand);
    border-bottom-color: var(--ux2k-brand);
}

/* ---------- Panels ---------- */
.ux2-panel {
    min-width: 0;
    background: #fff;
    border: 1px solid var(--ux2k-line);
    border-radius: 14px;
}

.ux2-panel-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ux2k-line-2);
}

.ux2-panel-body {
    padding: 16px 20px;
}

/* ---------- ⋯ menu: a popover of buttons role="menuitem" ---------- */
.ux2-menu {
    position: fixed;
    z-index: 1060;
    min-width: 200px;
    padding: 6px;
    font-family: var(--ux2-font, inherit);
    background: #fff;
    border: 1px solid var(--ux2k-line);
    border-radius: 12px;
    box-shadow: var(--ux2k-pop);
}

.ux2-menu [role="menuitem"] {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 8px 10px;
    font-family: inherit;
    font-size: var(--ux2k-fs-sm);
    text-align: left;
    color: var(--ux2k-ink-2);
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.ux2-menu [role="menuitem"] :is(i.bi, svg.sko-i) {
    color: inherit;
}

.ux2-menu [role="menuitem"]:hover,
.ux2-menu [role="menuitem"]:focus-visible {
    background: var(--ux2k-soft);
    outline: 0;
}

.ux2-menu [role="menuitem"].is-danger {
    color: var(--ux2k-red);
}

.ux2-menu hr {
    margin: 4px 0;
    border: 0;
    border-top: 1px solid var(--ux2k-line-2);
    opacity: 1;
}

/* ---------- Form fields ---------- */
.ux2-field {
    min-width: 0;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

.ux2-field > label,
.ux2-field > legend,
.ux2-label {
    display: block;
    float: none;
    width: auto;
    margin: 0 0 7px;
    padding: 0;
    font-size: var(--ux2k-fs-sm);
    font-weight: var(--ux2k-fw-label);
    color: var(--ux2k-ink);
}

/* Every required field: a red * after the label, and the legend once per form */
.ux2-req {
    margin-left: 3px;
    font-weight: 700;
    color: var(--ux2k-red);
}

.ux2-req-legend {
    margin: 0;
    font-size: var(--ux2k-fs-xs);
    color: var(--ux2k-muted);
}

.ux2-hint {
    display: block;
    margin-top: 6px;
    font-size: var(--ux2k-fs-xs);
    color: var(--ux2k-muted);
}

.ux2-err {
    margin-top: 6px;
    font-size: var(--ux2k-fs-sm);
    font-weight: 500;
    color: var(--ux2k-red);
}

.ux2-err:empty {
    display: none;
}

/* ---------- Form fields: the one box ----------
   Text boxes, dropdowns, text areas, date / time / number / file, input groups, labels, help and error text — styled
   on the class names pages already use (form-control, form-select, form-label, form-text, invalid-feedback,
   input-group). The box matches the searchable dropdowns and pill fields (picker.css): 42px, 8px corners, 1px line,
   white, 14px text; small 34px, large 48px; buttons are the same heights. Focus (brand border + ring) is polish.css.
   Only mistakes get colour; read-only and disabled are grey. Left alone: select2, form-control-flush / -transparent,
   editor toolbars, the picker's own typing box. */
:root {
    --ux2f-h: 42px;
    --ux2f-h-sm: 34px;
    --ux2f-h-lg: 48px;
    --ux2f-r: 8px;
    --ux2f-pad: 14px;
    --ux2f-line: var(--ux2k-line, #e4e7ec);
    --ux2f-line-hover: #c9ced8;
    --ux2f-bg: #fff;
    --ux2f-bg-off: var(--ux2k-soft, #f5f7f9);
    --ux2f-ink: var(--ux2k-ink, #181c32);
    --ux2f-muted: var(--ux2k-muted, #6b6f85);
    --ux2f-quiet: var(--ux2k-quiet, #8a8fa3);
    --ux2f-red: var(--ux2k-red, #c62828);
}

/* ---------- The box ---------- */
.form-control,
.form-select,
.form-control.form-control-solid,
.form-select.form-select-solid {
    min-height: var(--ux2f-h);
    padding: 0 var(--ux2f-pad);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ux2f-ink);
    background-color: var(--ux2f-bg);
    border: 1px solid var(--ux2f-line);
    border-radius: var(--ux2f-r);
    box-shadow: none;
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}

/* One-line fields are exactly the box; text areas grow */
input.form-control,
.form-select {
    height: var(--ux2f-h);
}

textarea.form-control {
    min-height: 96px;
    padding-top: 10px;
    padding-bottom: 10px;
    resize: vertical;
}

/* Dropdowns: room for the arrow, which sits where the text box's padding ends */
.form-select,
.form-select.form-select-solid {
    padding-right: 40px;
    background-position: right var(--ux2f-pad) center;
    background-size: 12px 12px;
}

.form-select[multiple],
.form-select[size]:not([size="1"]) {
    height: auto;
    padding: 6px var(--ux2f-pad);
    background-image: none;
}

.form-control::placeholder {
    color: var(--ux2f-quiet);
    opacity: 1;
}

.form-control:hover:not(:focus):not(:disabled):not([readonly]),
.form-select:hover:not(:focus):not(:disabled) {
    border-color: var(--ux2f-line-hover);
}

/* Not editable: grey, and the text stays readable */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    color: var(--ux2f-muted);
    background-color: var(--ux2f-bg-off);
    border-color: var(--ux2f-line);
    opacity: 1;
}

.form-control:disabled,
.form-select:disabled {
    cursor: not-allowed;
}

/* Wrong: red border (and a red ring while typing). Right needs no colour — a field that's fine looks normal */
.form-control.is-invalid,
.form-select.is-invalid,
.form-control[aria-invalid="true"],
.form-select[aria-invalid="true"] {
    border-color: var(--ux2f-red) !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.form-control[aria-invalid="true"]:focus,
.form-select[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(198, 40, 40, .18) !important;
}

.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--ux2f-line);
    background-image: none;
    padding-right: var(--ux2f-pad);
}

.form-select.is-valid {
    padding-right: 40px;
}

/* ---------- Sizes ---------- */
.form-control.form-control-sm,
.form-select.form-select-sm {
    min-height: var(--ux2f-h-sm);
    padding-left: 11px;
    font-size: 13px;
    border-radius: 7px;
}

input.form-control.form-control-sm,
.form-select.form-select-sm {
    height: var(--ux2f-h-sm);
}

.form-select.form-select-sm {
    padding-right: 34px;
    background-position: right 11px center;
}

.form-control.form-control-lg,
.form-select.form-select-lg {
    min-height: var(--ux2f-h-lg);
    padding-left: 16px;
    font-size: 15px;
    border-radius: 10px;
}

input.form-control.form-control-lg,
.form-select.form-select-lg {
    height: var(--ux2f-h-lg);
}

/* ---------- Date, time, number, colour, file ---------- */
.form-control[type="date"],
.form-control[type="time"],
.form-control[type="datetime-local"],
.form-control[type="month"] {
    min-width: 0;
}

.form-control::-webkit-calendar-picker-indicator {
    opacity: .55;
    cursor: pointer;
}

.form-control[type="color"] {
    width: 56px;
    padding: 5px;
}

.form-control[type="file"] {
    padding: 0;
    line-height: calc(var(--ux2f-h) - 2px);
    color: var(--ux2f-muted);
    overflow: hidden;
}

.form-control[type="file"]::file-selector-button {
    height: 100%;
    margin: 0 12px 0 0;
    padding: 0 14px;
    font: inherit;
    font-weight: 500;
    color: var(--ux2f-ink);
    background: var(--ux2f-bg-off);
    border: 0;
    border-right: 1px solid var(--ux2f-line);
    cursor: pointer;
}

.form-control[type="file"]:hover::file-selector-button {
    background: var(--ux2k-line-2, #eef0f3);
}

/* ---------- Input groups: one outline, the add-on in grey ---------- */
.input-group > .input-group-text,
.input-group.input-group-solid > .input-group-text {
    min-height: var(--ux2f-h);
    padding: 0 12px;
    font-size: 14px;
    color: var(--ux2f-muted);
    background: var(--ux2f-bg-off);
    border: 1px solid var(--ux2f-line);
    border-radius: var(--ux2f-r);
}

.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child),
.input-group > .input-group-text:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > :not(:last-child):not(.dropdown-menu):not(.invalid-feedback) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* ---------- Words around the box ---------- */
.form-label,
.col-form-label {
    margin-bottom: 7px;
    font-size: var(--ux2k-fs-sm, 13px);
    font-weight: var(--ux2k-fw-label, 600);
    color: var(--ux2f-ink);
}

.col-form-label {
    padding-top: calc((var(--ux2f-h) - 20px) / 2);
    padding-bottom: 0;
}

.form-text {
    margin-top: 6px;
    font-size: var(--ux2k-fs-xs, 12px);
    color: var(--ux2f-muted);
}

.invalid-feedback,
.fv-plugins-message-container.invalid-feedback,
.fv-plugins-message-container .fv-help-block {
    margin-top: 6px;
    font-size: var(--ux2k-fs-sm, 13px);
    font-weight: 500;
    color: var(--ux2f-red);
}

/* ---------- Nothing here ---------- */
.ux2-nothing {
    display: grid;
    gap: 6px;
    justify-items: center;
    padding: 32px 16px;
    font-size: var(--ux2k-fs-sm);
    text-align: center;
    color: var(--ux2k-muted);
}

.ux2-nothing > :is(i.bi, svg.sko-i) {
    font-size: 26px;
    color: var(--ux2k-quiet);
}

.ux2-nothing strong {
    font-size: var(--ux2k-fs);
    color: var(--ux2k-ink);
}

@media (prefers-reduced-motion: reduce) {
    .ux2-btn,
    .ux2-chip {
        transition: none;
    }
}

/* ---------- Depth and motion ----------
   Buttons with depth and feel: a soft top light and a brand-tinted shadow, a 1px lift on hover, a press-in that
   springs back, a light sheen across main / SKOAI / danger, icons that hint at what happens, a lighter flat look while
   busy (data-kt-indicator / aria-busy — csrf.js ignores clicks meanwhile), plain grey when disabled, green "done"
   after a save (is-done: skoBtnDone). 8px corners like the fields. The segmented filter is a white pill on a grey
   track that slides (motion.js); tabs' underline glides; switch knobs spring; checkboxes / radios / chips pop when
   changed; a status pill pulses when it changes. 160–320ms, two curves, transform / shadow / colour only.
   Reduce motion (the OS setting, or Display → Calm: html.ux2-calm): nothing moves; colours and shadows still change. */
:root {
    --ux2k-ease: cubic-bezier(.2, 0, 0, 1);
    --ux2k-pop-ease: cubic-bezier(.34, 1.56, .64, 1);
    --ux2k-dur: .16s;
    --ux2k-btn-r: 8px;
}

/* ---------- Every button ---------- */
.ux2-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--ux2k-btn-r);
     /* A press settles back smoothly, no bounce (LXP-2667) */
    transition: transform .2s var(--ux2k-ease), box-shadow var(--ux2k-dur) var(--ux2k-ease),background-color var(--ux2k-dur) var(--ux2k-ease), border-color var(--ux2k-dur) var(--ux2k-ease), color var(--ux2k-dur) var(--ux2k-ease), filter var(--ux2k-dur) var(--ux2k-ease);
}

.ux2-btn:hover:not(:disabled):not([aria-disabled="true"]):not([data-kt-indicator="on"]) {
    transform: translateY(-1px);
}

.ux2-btn:active:not(:disabled):not([aria-disabled="true"]) {
    transform: scale(.97);
    transition-duration: .06s;
}

/* Not available yet: plain grey whatever the kind, so it never looks like a quiet button that works */
.ux2-btn:disabled:not([data-kt-indicator="on"]),
.ux2-btn[aria-disabled="true"] {
    color: var(--ux2k-quiet) !important;
    background: var(--ux2k-line-2) !important;
    border-color: var(--ux2k-line) !important;
    box-shadow: none !important;
    opacity: 1;
}

.ux2-btn:disabled::after,
.ux2-btn[aria-disabled="true"]::after {
    display: none;
}

/* Busy (data-kt-indicator="on" while something runs): a lighter shade of its own colour, flat, no hover or press —
   it looks as unavailable as it is (csrf.js already ignores every click on it until the work finishes) */
.ux2-btn[data-kt-indicator="on"],
.ux2-btn[aria-busy="true"] {
    cursor: progress;
    box-shadow: none !important;
    transform: none !important;
}

.ux2-btn[data-kt-indicator="on"]::after,
.ux2-btn[aria-busy="true"]::after {
    display: none;
}

.ux2-btn-main[data-kt-indicator="on"],
.ux2-btn-main[aria-busy="true"] {
    background: color-mix(in srgb, var(--ux2k-brand) 55%, #fff) !important;
}

.ux2-btn-danger[data-kt-indicator="on"],
.ux2-btn-danger[aria-busy="true"] {
    background: color-mix(in srgb, var(--ux2k-red) 55%, #fff) !important;
}

.ux2-btn-ai[data-kt-indicator="on"],
.ux2-btn-ai[aria-busy="true"] {
    background: color-mix(in srgb, var(--ux2k-ai) 50%, #fff) !important;
}

.ux2-btn-ghost[data-kt-indicator="on"],
.ux2-btn-soft[data-kt-indicator="on"],
.ux2-btn-ai-line[data-kt-indicator="on"],
.ux2-btn-ghost[aria-busy="true"],
.ux2-btn-soft[aria-busy="true"],
.ux2-btn-ai-line[aria-busy="true"] {
    opacity: .6;
}

/* Icons hint at what the button does */
.ux2-btn :is(i.bi, svg.sko-i) {
    transition: transform .22s var(--ux2k-pop-ease);
}

.ux2-btn:hover:not(:disabled) i.bi-arrow-right,
.ux2-btn:hover:not(:disabled) i.bi-chevron-right,
.ux2-btn:hover:not(:disabled) i.bi-arrow-up-right {
    transform: translateX(3px);
}

.ux2-btn:hover:not(:disabled) i.bi-plus,
.ux2-btn:hover:not(:disabled) i.bi-plus-lg {
    transform: rotate(90deg);
}

.ux2-btn:hover:not(:disabled) i.bi-send,
.ux2-btn:hover:not(:disabled) i.bi-send-fill {
    transform: translate(2px, -2px);
}

.ux2-btn:hover:not(:disabled) i.bi-download {
    transform: translateY(2px);
}

.ux2-btn:hover:not(:disabled) i.bi-check2,
.ux2-btn:hover:not(:disabled) i.bi-check-lg,
.ux2-btn:hover:not(:disabled) svg:has(use[href$="#o-check"]) {
    transform: scale(1.15);
}

.ux2-btn:hover:not(:disabled) i.bi-trash,
.ux2-btn:hover:not(:disabled) i.bi-trash3 {
    transform: rotate(-8deg);
}

.ux2-btn:hover:not(:disabled) i.bi-stars,
.ux2-btn:hover:not(:disabled) i.bi-magic {
    animation: ux2k-twinkle .6s var(--ux2k-ease);
}

@keyframes ux2k-twinkle {
    40% { transform: scale(1.25) rotate(-12deg); }
    70% { transform: scale(.95) rotate(6deg); }
}

/* A light sheen across the button on hover (main, SKOAI, danger) */
.ux2-btn-main::after,
.ux2-btn-ai::after,
.ux2-btn-danger::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
    transform: translateX(-120%);
    pointer-events: none;
}

.ux2-btn-main:hover:not(:disabled)::after,
.ux2-btn-ai:hover:not(:disabled)::after,
.ux2-btn-danger:hover:not(:disabled)::after {
    transform: translateX(120%);
    transition: transform .7s var(--ux2k-ease);
}

/* ---------- Main: depth from a soft top light and a brand-tinted shadow ---------- */
.ux2-btn-main,
a.ux2-btn-main {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ux2k-brand) 86%, #fff) 0%, var(--ux2k-brand) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(16, 24, 40, .12),
        0 3px 8px -3px color-mix(in srgb, var(--ux2k-brand) 55%, transparent);
}

.ux2-btn-main:hover:not(:disabled),
a.ux2-btn-main:hover {
    background: linear-gradient(180deg, var(--ux2k-brand) 0%, var(--ux2k-brand-dark) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 4px rgba(16, 24, 40, .12),
        0 8px 18px -6px color-mix(in srgb, var(--ux2k-brand) 60%, transparent);
}

.ux2-btn-main:active:not(:disabled) {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18), 0 1px 2px rgba(16, 24, 40, .1);
}

/* ---------- Ghost: lifts onto a soft shadow, brand on hover ---------- */
.ux2-btn-ghost,
a.ux2-btn-ghost {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.ux2-btn-ghost:hover:not(:disabled),
a.ux2-btn-ghost:hover {
    color: var(--ux2k-brand-dark);
    background: #fff;
    border-color: color-mix(in srgb, var(--ux2k-brand) 45%, var(--ux2k-line));
    box-shadow: 0 4px 12px -4px rgba(16, 24, 40, .14);
}

/* ---------- Soft: a clear brand tint, never mistaken for switched off ---------- */
.ux2-btn-soft,
a.ux2-btn-soft {
    color: var(--ux2k-brand-dark);
    background: color-mix(in srgb, var(--ux2k-brand) 12%, #fff);
    border-color: color-mix(in srgb, var(--ux2k-brand) 22%, #fff);
}

.ux2-btn-soft:hover:not(:disabled),
a.ux2-btn-soft:hover {
    color: var(--ux2k-brand-dark);
    background: color-mix(in srgb, var(--ux2k-brand) 20%, #fff);
    border-color: color-mix(in srgb, var(--ux2k-brand) 35%, #fff);
    box-shadow: 0 4px 12px -5px color-mix(in srgb, var(--ux2k-brand) 40%, transparent);
}

/* ---------- SKOAI: the gradient drifts on hover ---------- */
.ux2-btn-ai,
a.ux2-btn-ai {
    background: linear-gradient(120deg, color-mix(in srgb, var(--ux2k-ai) 80%, #fff) 0%, var(--ux2k-ai-dark) 50%, color-mix(in srgb, var(--ux2k-ai) 80%, #fff) 100%);
    background-size: 200% 100%;
    background-position: 0% 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 14px -4px color-mix(in srgb, var(--ux2k-ai-dark) 45%, transparent);
    transition: transform var(--ux2k-dur) var(--ux2k-ease), box-shadow var(--ux2k-dur) var(--ux2k-ease),
        background-position .6s var(--ux2k-ease);
}

.ux2-btn-ai:hover:not(:disabled),
a.ux2-btn-ai:hover {
    background: linear-gradient(120deg, color-mix(in srgb, var(--ux2k-ai) 80%, #fff) 0%, var(--ux2k-ai-dark) 50%, color-mix(in srgb, var(--ux2k-ai) 80%, #fff) 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 8px 20px -6px color-mix(in srgb, var(--ux2k-ai-dark) 55%, transparent);
}

.ux2-btn-ai-line:hover:not(:disabled),
a.ux2-btn-ai-line:hover {
    box-shadow: 0 4px 12px -5px color-mix(in srgb, var(--ux2k-ai-dark) 30%, transparent);
}

/* ---------- Danger: the main button's depth, in red ---------- */
.ux2-btn-danger {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ux2k-red) 86%, #fff) 0%, var(--ux2k-red) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(16, 24, 40, .12), 0 3px 8px -3px color-mix(in srgb, var(--ux2k-red) 50%, transparent);
}

.ux2-btn-danger:hover:not(:disabled) {
    background: linear-gradient(180deg, var(--ux2k-red) 0%, color-mix(in srgb, var(--ux2k-red) 82%, #000) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 18px -6px color-mix(in srgb, var(--ux2k-red) 55%, transparent);
}

/* ---------- Done: green for a moment after a save (class is-done, removed after ~1.5s) ---------- */
.ux2-btn.is-done,
.ux2-btn.is-done:hover {
    color: #fff;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ux2k-green) 86%, #fff) 0%, var(--ux2k-green) 100%);
    border-color: transparent;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--ux2k-green) 55%, transparent);
    transform: none;
}

.ux2-btn.is-done :is(i.bi, svg.sko-i) {
    animation: ux2k-pop .4s var(--ux2k-pop-ease);
}

@keyframes ux2k-pop {
    0% { transform: scale(.3); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ---------- Icon buttons: press-in, round hover ---------- */
.ux2-icon-btn {
    border-radius: var(--ux2k-btn-r);
    transition: transform var(--ux2k-dur) var(--ux2k-ease), background-color var(--ux2k-dur) var(--ux2k-ease), color var(--ux2k-dur) var(--ux2k-ease);
}

.ux2-icon-btn:active {
    transform: scale(.9);
    transition-duration: .06s;
}

/* ---------- Chips press in too ---------- */
.ux2-chip {
    transition: transform var(--ux2k-dur) var(--ux2k-ease), background-color var(--ux2k-dur) var(--ux2k-ease),
        border-color var(--ux2k-dur) var(--ux2k-ease), color var(--ux2k-dur) var(--ux2k-ease);
}

.ux2-chip:active {
    transform: scale(.96);
}

/* ---------- Segmented filter: a white pill on a grey track ---------- */
.ux2-seg {
    border-radius: 10px;
}

.ux2-seg button {
    transition: background-color var(--ux2k-dur) var(--ux2k-ease), color var(--ux2k-dur) var(--ux2k-ease), box-shadow var(--ux2k-dur) var(--ux2k-ease);
}

.ux2-seg > label {
    transition: background-color var(--ux2k-dur) var(--ux2k-ease), color var(--ux2k-dur) var(--ux2k-ease), box-shadow var(--ux2k-dur) var(--ux2k-ease);
}

.ux2-seg button:hover:not([aria-checked="true"]),
.ux2-seg > label:hover:not(:has(input:checked)) {
    color: var(--ux2k-ink);
}

.ux2-seg button[aria-checked="true"],
.ux2-seg > label:has(input:checked) {
    color: var(--ux2k-ink);
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 0 0 1px rgba(16, 24, 40, .04);
}

/* Status counts keep their colours (with a dot, so it isn't colour alone): open / published / done green, closed /
   abandoned red, scheduled / upcoming blue, paused / in progress amber, running purple, draft and zero grey */
.ux2-seg button em[class*="is-"] {
    gap: 4px;
}

.ux2-seg button em[class*="is-"]::before {
    width: 6px;
    height: 6px;
    content: "";
    background: currentColor;
    border-radius: 50%;
}

.ux2-seg button em.is-open,
.ux2-seg button em.is-done {
    color: var(--ux2k-green);
    background: var(--ux2k-green-bg);
}

.ux2-seg button em.is-closed {
    color: var(--ux2k-red);
    background: var(--ux2k-red-bg);
}

.ux2-seg button em.is-sched,
.ux2-seg button em.is-upcoming {
    color: var(--ux2k-blue);
    background: var(--ux2k-blue-bg);
}

.ux2-seg button em.is-hold,
.ux2-seg button em.is-going,
.ux2-seg button em.is-progress {
    color: var(--ux2k-amber);
    background: var(--ux2k-amber-bg);
}

.ux2-seg button em.is-running {
    color: var(--ux2k-purple);
    background: var(--ux2k-purple-bg);
}

.ux2-seg button em.is-draft,
.ux2-seg button em.is-zero {
    color: var(--ux2k-grey);
    background: var(--ux2k-grey-bg);
}

.ux2-seg button em.is-zero::before {
    display: none;
}

/* ---------- Sliding pill (segmented filter) and gliding underline (tabs) — placed by motion.js ---------- */
.ux2-seg.has-thumb,
.ux2-tabs.has-ink {
    position: relative;
}

.ux2-seg.has-thumb button,
.ux2-seg.has-thumb > label {
    position: relative;
    z-index: 1;
}

.ux2-seg.has-thumb button[aria-checked="true"],
.ux2-seg.has-thumb > label:has(input:checked) {
    background: none;
    box-shadow: none;
}

.ux2-seg-thumb {
    position: absolute;
    left: 0;
    z-index: 0;
    background: #fff;
    border-radius: 7px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 0 0 1px rgba(16, 24, 40, .04);
    pointer-events: none;
}

.ux2-tabs.has-ink [role="tab"][aria-selected="true"] {
    border-bottom-color: transparent;
}

.ux2-tabs-ink {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    background: var(--ux2k-brand);
    border-radius: 2px 2px 0 0;
    pointer-events: none;
}

.ux2-seg-thumb.is-moving,
.ux2-tabs-ink.is-moving {
    transition: transform .32s var(--ux2k-pop-ease), width .32s var(--ux2k-pop-ease);
}

/* ---------- Switch knob slides with a little spring ---------- */
.form-check.form-switch .form-check-input {
    transition: background-color .16s var(--ux2k-ease), border-color .16s var(--ux2k-ease), box-shadow .16s var(--ux2k-ease),
        background-position .32s var(--ux2k-pop-ease), transform .1s var(--ux2k-ease) !important;
}

/* ---------- A pop when someone changes a checkbox, radio, switch or chip (class added by motion.js) ---------- */
.form-check-input.ux2-pop {
    animation: ux2k-tick .32s var(--ux2k-pop-ease);
}

.form-switch .form-check-input.ux2-pop {
    animation: none;
}

.ux2-chip.ux2-pop {
    animation: ux2k-tick .3s var(--ux2k-pop-ease);
}

@keyframes ux2k-tick {
    0% { transform: scale(.82); }
    60% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

/* ---------- A status pill that just changed pulses once ---------- */
.ux2-pill.ux2-changed {
    animation: ux2k-pill .45s var(--ux2k-pop-ease);
}

@keyframes ux2k-pill {
    0% { transform: scale(.85); box-shadow: 0 0 0 0 currentColor; }
    55% { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(0, 0, 0, 0); }
    100% { transform: scale(1); }
}

/* ---------- Status pills: a touch larger ---------- */
.ux2-pill {
    padding: 3px 10px;
    font-size: var(--ux2k-fs-sm);
}

/* ---------- Reduce motion: nothing moves or sweeps; colours and shadows still fade ---------- */
@media (prefers-reduced-motion: reduce) {
    .ux2-btn,
    .ux2-btn :is(i.bi, svg.sko-i),
    .ux2-icon-btn,
    .ux2-chip,
    .ux2-pill,
    .form-check-input {
        transform: none !important;
        animation: none !important;
    }

    .ux2-seg-thumb,
    .ux2-tabs-ink {
        transition: none !important;
    }

    .ux2-btn::after {
        display: none;
    }
}

html.ux2-calm .ux2-btn,
html.ux2-calm .ux2-btn :is(i.bi, svg.sko-i),
html.ux2-calm .ux2-icon-btn,
html.ux2-calm .ux2-chip,
html.ux2-calm .ux2-pill,
html.ux2-calm .form-check-input {
    transform: none !important;
    animation: none !important;
}

html.ux2-calm .ux2-seg-thumb,
html.ux2-calm .ux2-tabs-ink {
    transition: none !important;
}

html.ux2-calm .ux2-btn::after {
    display: none;
}
html.ux2-calm .form-check.form-switch .form-check-input {
    transition: none !important;
}

/* ---------- Details ----------
   Numbers that don't jiggle, text that wraps evenly, 44px tap areas on touch screens, a soft cross-fade from page to
   page (sidebar and header hold still; off with reduce motion / Calm), skeletons only after 0.3 s, and the blurred
   preview under a loading Cloudflare picture (appjs/common/ux2/imageBlur.js). */
/* ---------- Numbers: one width per digit ---------- */
:where(table, .ux2-pill, .badge, .ux2-num, time, [data-count], [class*="tile"], [class*="-stat"], [class*="-kpi"],
input[type="number"], input[type="time"], input[type="date"], input[type="datetime-local"]) {
    font-variant-numeric: tabular-nums;
}

/* ---------- Text that wraps well ---------- */
:where(h1, h2, h3, h4, .ux2-h1, .ux2-h2, .ux2-h3, .modal-title, .swal2-title) {
    text-wrap: balance;
}

:where(p, li, .ux2-lead, .ux2-hint, .form-text) {
    text-wrap: pretty;
}

/* ---------- Touch: 44px tap areas for small controls (the look doesn't change) ---------- */
@media (pointer: coarse) {
    .ux2-icon-btn,
    .btn-close,
    .ux2-notify-x,
    .ux2-selbar-clear {
        position: relative;
    }

    .ux2-icon-btn::before,
    .btn-close::before,
    .ux2-notify-x::before,
    .ux2-selbar-clear::before,
    .ux2-step-btn::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: max(100%, 44px);
        height: max(100%, 44px);
        transform: translate(-50%, -50%);
    }
}

/* ---------- Page to page: a soft cross-fade ---------- */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .2s;
}

/* The frame holds still while the page content fades */
#kt_aside {
    view-transition-name: ux2-aside;
}

#kt_header {
    view-transition-name: ux2-header;
}

html.ux2-calm::view-transition-group(*),
html.ux2-calm::view-transition-old(*),
html.ux2-calm::view-transition-new(*) {
    animation: none !important;
}

/* ---------- Loading skeletons: only when it takes more than 0.3 s ---------- */
.ux2-skel,
.ux2-skel-row,
.ha-skel,
.dk-skel,
.ds-skel,
.hj-skel-line,
.hj-cell-skel,
.ws-dr-skel,
.cq-pv-skel {
    transition: opacity .15s ease .3s;
}

/* A skeleton starts invisible and shows only if it's still there after 0.3 s (browsers without @starting-style show
   it at once, as today) */
@starting-style {
    .ux2-skel,
    .ux2-skel-row,
    .ha-skel,
    .dk-skel,
    .ds-skel,
    .hj-skel-line,
    .hj-cell-skel,
    .ws-dr-skel,
    .cq-pv-skel {
        opacity: 0;
    }
}

/* ---------- Image placeholders (appjs/common/ux2/imageBlur.js) ---------- */
img.ux2-img-blur {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* ---------- Older pages: primary buttons ----------
   Metronic's primary buttons (btn-skolarli, btn-primary) in the same style as the shared main button (ux2-btn-main,
   e.g. "+ New question"): depth, the sheen on hover, lift, press, icon hints, 42 / 34 / 48px, busy / done / disabled
   looks. Icon-only and in-a-field buttons keep their size; other Metronic buttons are unchanged. Brand tokens only. */
.btn:is(.btn-skolarli, .btn-primary) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    font-weight: var(--ux2k-fw-btn, 500);
    background: linear-gradient(180deg, color-mix(in srgb, var(--ux2k-brand) 86%, #fff) 0%, var(--ux2k-brand) 100%);
    border: 1px solid transparent;
    border-radius: var(--ux2k-btn-r, 8px);
    transition: transform .28s var(--ux2k-pop-ease), box-shadow var(--ux2k-dur) var(--ux2k-ease),
        background-color var(--ux2k-dur) var(--ux2k-ease), color var(--ux2k-dur) var(--ux2k-ease);
}

/* Shadows: Metronic clears every button's shadow with a long !important selector
   (.btn:not(.btn-shadow):not(.shadow):not(.shadow-sm):not(.shadow-lg)); :not(#ux2-shadow) matches every button and
   outranks it */
.btn:is(.btn-skolarli, .btn-primary):not(#ux2-shadow) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(16, 24, 40, .12),
        0 3px 8px -3px color-mix(in srgb, var(--ux2k-brand) 55%, transparent) !important;
}

.btn:is(.btn-skolarli, .btn-primary):not(#ux2-shadow):is(:hover, :focus):not(:disabled):not(.disabled):not(.btn-active):not([data-kt-indicator="on"]) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 4px rgba(16, 24, 40, .12),
        0 8px 18px -6px color-mix(in srgb, var(--ux2k-brand) 60%, transparent) !important;
}

.btn:is(.btn-skolarli, .btn-primary):not(#ux2-shadow):active:not(:disabled):not(.disabled) {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18), 0 1px 2px rgba(16, 24, 40, .1) !important;
}

.btn:is(.btn-skolarli, .btn-primary):not(#ux2-shadow).is-done {
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--ux2k-green) 55%, transparent) !important;
}

.btn:is(.btn-skolarli, .btn-primary):not(#ux2-shadow):is([data-kt-indicator="on"], :disabled, .disabled) {
    box-shadow: none !important;
}

/* Text buttons: the field heights and the shared button's padding */
.btn:is(.btn-skolarli, .btn-primary):not(.btn-icon):not(.input-group > .btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    font-size: var(--ux2k-fs-btn, 14px);
    line-height: 1.2;
}

.btn.btn-sm:is(.btn-skolarli, .btn-primary):not(.btn-icon):not(.input-group > .btn) {
    min-height: 34px;
    padding: 0 12px;
    font-size: var(--ux2k-fs-sm, 13px);
}

.btn.btn-lg:is(.btn-skolarli, .btn-primary):not(.btn-icon):not(.input-group > .btn) {
    min-height: 48px;
    padding: 0 20px;
}

.btn:is(.btn-skolarli, .btn-primary) :is(i, svg) {
    color: inherit;
    transition: transform .22s var(--ux2k-pop-ease);
}

.btn:is(.btn-skolarli, .btn-primary):is(:hover, :focus):not(:disabled):not(.disabled):not(.btn-active):not([data-kt-indicator="on"]) {
    color: #fff;
    background: linear-gradient(180deg, var(--ux2k-brand) 0%, var(--ux2k-brand-dark) 100%);
    border-color: transparent;
}

.btn:is(.btn-skolarli, .btn-primary):not(.btn-icon):hover:not(:disabled):not(.disabled):not([data-kt-indicator="on"]) {
    transform: translateY(-1px);
}

.btn:is(.btn-skolarli, .btn-primary):active:not(:disabled):not(.disabled) {
    transform: scale(.97);
    transition-duration: .06s;
}

.btn:is(.btn-skolarli, .btn-primary):focus-visible {
    outline: 3px solid var(--ux2k-ring);
    outline-offset: 2px;
}

/* The sheen across on hover */
.btn:is(.btn-skolarli, .btn-primary)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
    transform: translateX(-120%);
    pointer-events: none;
}

.btn:is(.btn-skolarli, .btn-primary):hover:not(:disabled):not(.disabled)::after {
    transform: translateX(120%);
    transition: transform .7s var(--ux2k-ease);
}

/* Icons hint at what happens */
.btn:is(.btn-skolarli, .btn-primary):hover:not(:disabled) :is(i.bi-plus, i.bi-plus-lg, i.fa-plus) {
    transform: rotate(90deg);
}

.btn:is(.btn-skolarli, .btn-primary):hover:not(:disabled) :is(i.bi-arrow-right, i.bi-chevron-right, i.bi-arrow-up-right) {
    transform: translateX(3px);
}

.btn:is(.btn-skolarli, .btn-primary):hover:not(:disabled) :is(i.bi-send, i.bi-send-fill) {
    transform: translate(2px, -2px);
}

.btn:is(.btn-skolarli, .btn-primary):hover:not(:disabled) i.bi-download {
    transform: translateY(2px);
}

.btn:is(.btn-skolarli, .btn-primary):hover:not(:disabled) :is(i.bi-check2, i.bi-check-lg) {
    transform: scale(1.15);
}

/* Busy (data-kt-indicator while saving): lighter and flat; csrf.js ignores clicks meanwhile */
.btn:is(.btn-skolarli, .btn-primary)[data-kt-indicator="on"] {
    cursor: progress;
    background: color-mix(in srgb, var(--ux2k-brand) 55%, #fff) !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn:is(.btn-skolarli, .btn-primary)[data-kt-indicator="on"]::after {
    display: none;
}

/* Done: green for a moment after a save (skoBtnDone adds is-done) */
.btn:is(.btn-skolarli, .btn-primary).is-done {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ux2k-green) 86%, #fff) 0%, var(--ux2k-green) 100%) !important;
    transform: none;
}

/* Not available: plain grey */
.btn:is(.btn-skolarli, .btn-primary):is(:disabled, .disabled):not([data-kt-indicator="on"]) {
    color: var(--ux2k-quiet) !important;
    background: var(--ux2k-line-2) !important;
    border-color: var(--ux2k-line) !important;
    box-shadow: none !important;
    opacity: 1;
}

.btn:is(.btn-skolarli, .btn-primary):is(:disabled, .disabled)::after {
    display: none;
}

/* Reduce motion: no lift, press, sheen or icon moves; colours still change */
@media (prefers-reduced-motion: reduce) {
    .btn:is(.btn-skolarli, .btn-primary),
    .btn:is(.btn-skolarli, .btn-primary) :is(i, svg) {
        transform: none !important;
    }

    .btn:is(.btn-skolarli, .btn-primary)::after {
        display: none;
    }
}

html.ux2-calm .btn:is(.btn-skolarli, .btn-primary),
html.ux2-calm .btn:is(.btn-skolarli, .btn-primary) :is(i, svg) {
    transform: none !important;
}

html.ux2-calm .btn:is(.btn-skolarli, .btn-primary)::after {
    display: none;
}
/* ---------- Selection bar: "N selected" pinned to the bottom of the screen ----------
   <div class="ux2-selbar" role="region" aria-label="Selected questions" hidden>
       <div class="ux2-selbar-count"><b>12</b> selected <small>of 250 per add</small></div>
       <div class="ux2-selbar-acts"> the page's buttons (they keep their own styles) </div>
       <button type="button" class="ux2-selbar-clear">Clear</button>
   </div>
   The dark of the notifications (notify.css .ux2-notify), centred on the content beside the sidebar; [hidden] slides it
   away (and out of the tab order). Phones: full width, stacked. Question bank all.php, Coding questions. */
.ux2-selbar {
    position: fixed;
    bottom: 20px;
    left: calc(50% + 132px); /* the middle of the content: the sidebar is 265px */
    z-index: 1050; /* under Bootstrap modals (1055), over the page */
    display: flex;
    gap: 10px 12px;
    align-items: center;
    width: max-content; /* as wide as its contents, up to max-width (positioned from the middle, it would shrink) */
    max-width: calc(100vw - 297px); /* inside the content: never reaches under the 265px sidebar (LXP-2668) */
    padding: 10px 12px 10px 18px;
    font-size: 13.5px;
    line-height: 1.4;
    color: #fff;
    background: #0b0d10; /* the toasts' and the Activities notch's dark */
    border-radius: 12px;
    box-shadow: 0 16px 40px -8px rgba(24, 28, 50, .45), 0 0 0 1px rgba(255, 255, 255, .06);
    transform: translate(-50%, 0);
    transition: transform .2s var(--ux2k-ease), opacity .2s ease, visibility 0s;
}

/* Hidden: slides away; visibility also takes it out of the tab order and screen readers */
.ux2-selbar[hidden] {
    display: flex;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 24px);
    transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
}

body.aside-minimize .ux2-selbar,
body[data-kt-aside-minimize="on"] .ux2-selbar {
    left: calc(50% + 37px);
    max-width: calc(100vw - 107px);
}

/* Docked (LXP-2668): <div class="ux2-selbar is-docked" …>: along the bottom of the content beside the sidebar instead
   of a floating box, for bars with more in them (Talent Intelligence). The same solid dark as the floating bar. */
.ux2-selbar.is-docked {
    right: 0;
    bottom: 0;
    left: 265px;
    width: auto;
    max-width: none;
    padding: 10px 24px;
    border-radius: 0;
    box-shadow: 0 -12px 32px -16px rgba(0, 0, 0, .45), 0 -1px 0 rgba(255, 255, 255, .06);
    transform: none;
}

.ux2-selbar.is-docked[hidden] {
    transform: translateY(100%);
}

body.aside-minimize .ux2-selbar.is-docked,
body[data-kt-aside-minimize="on"] .ux2-selbar.is-docked {
    left: 75px;
    max-width: none;
}

@media (max-width: 991px) {
    body .ux2-selbar.is-docked,
    body.aside-minimize .ux2-selbar.is-docked,
    body[data-kt-aside-minimize="on"] .ux2-selbar.is-docked {
        right: 0;
        left: 0;
    }
}

.ux2-selbar-count {
    margin-right: 6px;
    white-space: nowrap;
}

.ux2-selbar-count b {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Secondary text: white at 65% */
.ux2-selbar-count small {
    display: block;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .65);
}

.ux2-selbar-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Buttons on the dark (LXP-2668): the main one white with dark text (the brand teal on this dark is only 2.7:1), the
   others a white outline, ones not available yet faint. "html" puts these above the richer buttons (btn-rich.css). */
html .ux2-selbar .ux2-btn-main:not(:disabled):not([aria-disabled="true"]) {
    color: #0b0d10;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

html .ux2-selbar .ux2-btn-main:not(:disabled):not([aria-disabled="true"]):hover {
    color: #0b0d10;
    background: #e2e8f0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

html .ux2-selbar .ux2-btn-main:not(:disabled):not([aria-disabled="true"]):active {
    background: #cbd5e1;
}

html .ux2-selbar .ux2-btn-ghost:not(:disabled) {
    color: #fff;
    background: transparent;
    border-color: rgba(255, 255, 255, .3);
    box-shadow: none;
}

html .ux2-selbar .ux2-btn-ghost:not(:disabled):hover {
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .5);
    box-shadow: none;
}

html .ux2-selbar .ux2-btn:disabled:not([data-kt-indicator="on"]),
html .ux2-selbar .ux2-btn[aria-disabled="true"] {
    color: rgba(255, 255, 255, .45) !important;
    background: rgba(255, 255, 255, .08) !important;
    border-color: transparent !important;
}

.ux2-selbar .ux2-btn:focus-visible {
    outline-color: rgba(255, 255, 255, .7);
}

.ux2-selbar-clear {
    padding: 4px 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, .65);
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: color var(--ux2k-dur) var(--ux2k-ease);
}

.ux2-selbar-clear:hover,
.ux2-selbar-clear:focus-visible {
    color: #fff;
}

.ux2-selbar-clear:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .55);
    outline-offset: 1px;
}

/* No sidebar beside the content: across the screen */
@media (max-width: 991px) {
  .ux2-selbar,
    body.aside-minimize .ux2-selbar,
    body[data-kt-aside-minimize="on"] .ux2-selbar {
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
        transform: none;
    }

    .ux2-selbar[hidden] {
        transform: translateY(24px);
    }
}

/* Phones: the count, then the buttons full width, then Clear */
@media (max-width: 767px) {
    .ux2-selbar {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
    }

    .ux2-selbar-count {
        margin: 0;
        white-space: normal;
    }

    .ux2-selbar-acts > * {
        flex: 1 1 auto;
        justify-content: center;
    }

    .ux2-selbar-clear {
        align-self: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ux2-selbar,
    .ux2-selbar[hidden] {
        transition: none;
    }
}

html.ux2-calm .ux2-selbar,
html.ux2-calm .ux2-selbar[hidden] {
    transition: none;
}

/* ============================================
   ROUND ICON BUTTONS (LXP-2654) — any .ux2-btn as a circle with only its icon: <button class="ux2-btn ux2-btn-ghost
    ux2-btn-round" aria-label="…" title="…">. The title is its dark tooltip (appjs/common/ux2/iconButtons.js).
   As high as the text buttons beside it: 42px; with .ux2-btn-sm 34px (LXP-2667).
   ============================================ */
.ux2-btn.ux2-btn-round {
    flex: none;
    gap: 0;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    font-size: 17px;
    border-radius: 50%;
}

.ux2-btn.ux2-btn-round.ux2-btn-sm {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    font-size: 15px;
}

/* Touch screens: a round button is at least 44px, the size a finger needs */
@media (pointer: coarse) {
    .ux2-btn.ux2-btn-round,
    .ux2-btn.ux2-btn-round.ux2-btn-sm {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }
}

/* Download: <button class="ux2-btn ux2-btn-ghost ux2-btn-round ux2-dl" …><i class="bi bi-download"></i></button>.
   On click the arrow fills up in the brand colour from the bottom, then a white tick on green, then back
   (iconButtons.js; data-dl="wait" + skoDownload.start / done for downloads that wait for the server). */
.ux2-btn.ux2-dl > i.bi {
    display: inline-grid;
    line-height: 1;
}

.ux2-btn.ux2-dl > i.bi::before,
.ux2-btn.ux2-dl > i.bi::after {
    grid-area: 1 / 1;
    vertical-align: 0;
}

.ux2-btn.ux2-dl > i.bi::after {
    font-family: bootstrap-icons !important;
    font-style: normal; /* <i> is italic; the icon font only resets its own ::before */
    font-weight: 400 !important;
    line-height: 1;
    color: var(--ux2k-brand);
    content: "\f30a"; /* bi-download, in the brand colour, shown from the bottom up */
    clip-path: inset(100% 0 0 0);
}

.ux2-btn.ux2-dl.is-filling,
.ux2-btn.ux2-dl.is-waiting {
    border-color: var(--ux2k-brand) !important;
}

.ux2-btn.ux2-dl.is-filling > i.bi::after {
    animation: ux2-dl-fill .7s cubic-bezier(.4, 0, .2, 1) forwards;
}

/* Waiting for the server: most of the way up, then it holds until done */
.ux2-btn.ux2-dl.is-waiting > i.bi::after {
    animation: ux2-dl-wait 1.6s cubic-bezier(.2, .8, .2, 1) forwards;
}

.ux2-btn.ux2-dl.is-done,
.ux2-btn.ux2-dl.is-done:hover {
    color: #fff !important;
    background: var(--ux2k-green) !important;
    border-color: var(--ux2k-green) !important;
}

.ux2-btn.ux2-dl.is-done > i.bi::before {
    content: "\f633"; /* bi-check-lg */
    animation: ux2-dl-tick .3s cubic-bezier(.34, 1.56, .64, 1);
}

.ux2-btn.ux2-dl.is-done > i.bi::after {
    content: none;
}

@keyframes ux2-dl-fill {
    to { clip-path: inset(0 0 0 0); }
}

@keyframes ux2-dl-wait {
    to { clip-path: inset(18% 0 0 0); }
}

@keyframes ux2-dl-tick {
    from { opacity: 0; transform: scale(.4); }
}

@media (prefers-reduced-motion: reduce) {
    .ux2-btn.ux2-dl > i.bi::before,
    .ux2-btn.ux2-dl > i.bi::after {
        animation: none !important;
    }
}

html.ux2-calm .ux2-btn.ux2-dl > i.bi::before,
html.ux2-calm .ux2-btn.ux2-dl > i.bi::after {
    animation: none !important;
}

/* ============================================
   ROLLING NUMBERS (LXP-2657) — appjs/common/ux2/rollNumber.js: mark a number <b data-roll>1,234</b> (or a tab count /
   the selection bar's count) and its digits roll to each new value like an odometer. Each digit is a column 0–9 in a
   one-digit window, moved to --d; the number keeps its font, colour and size.
   ============================================ */
.ux2-roll {
    display: inline-flex;
    align-items: flex-start;
    height: 1.2em;
    overflow: hidden;
    line-height: 1.2em;
    font-variant-numeric: tabular-nums;
    white-space: pre;
    vertical-align: -.2em;
}

.ux2-roll-d {
    display: inline-block;
    height: 1.2em;
    overflow: hidden;
}

.ux2-roll-col {
    display: flex;
    flex-direction: column;
    transform: translateY(calc(var(--d, 0) * -1.2em));
    transition: transform .6s cubic-bezier(.2, .9, .25, 1);
}

.ux2-roll-col > span {
    display: block;
    height: 1.2em;
    text-align: center;
}
/* Right-hand digits travel a little later, so a change reads as a roll, not a jump */
.ux2-roll-d:nth-last-child(2) .ux2-roll-col { transition-delay: .04s; }
.ux2-roll-d:nth-last-child(1) .ux2-roll-col { transition-delay: .08s; }

/* Counts that change on every tick or filter (tab counts, the selection bar): quicker, all digits together (LXP-2667) */
.hj-tabs em .ux2-roll-col,
.ux2-selbar-count b .ux2-roll-col {
    transition-duration: .3s;
    transition-delay: 0s !important;
}
@media (prefers-reduced-motion: reduce) {
    .ux2-roll-col {
        transition: none;
    }
}

html.ux2-calm .ux2-roll-col {
    transition: none;
}

/* Analytics headline numbers (.ha-kpi-value, .ha-stat; LXP-2671): the rolling box exactly one line tall and on the
   line's bottom, so a tile is the same height and the number in the same place as without rolling */
:is(.ha-kpi-value, .ha-stat) .ux2-roll {
    height: 1lh;
    line-height: inherit;
    vertical-align: bottom;
}

:is(.ha-kpi-value, .ha-stat) .ux2-roll-d,
:is(.ha-kpi-value, .ha-stat) .ux2-roll-col > span {
    height: 1lh;
}

:is(.ha-kpi-value, .ha-stat) .ux2-roll-col {
    transform: translateY(calc(var(--d, 0) * -1lh));
}