/*
    Manual Transaction popup (the mobile TransactionDetailPopup): layout and look. Colors come from the shared --tx-*
    tokens (transaction-popups.css) and the --mtx-* tokens below, which port the extra mobile keys this popup uses:

    --mtx-accent              ManualTransactionButtonColor / DefaultTransactionColor (#111111, the same in both themes):
                              the header band, the logo backdrop, the buttons and the switches' on track.
    --mtx-on-accent           White: button text and the close glyph over the band.
    --mtx-close-halo          The close glyph's shadow (PopupHeaderTheme: black, 45%, radius 8).
    --mtx-link                Link (#58BADB, static): Get location and the location link.
    --mtx-icon                BaseIconColor: the dollar glyph, the clear button, a collapsed section's chevron.
    --mtx-accordion-expanded  ContentBackgroundHighlightColor: an open section's header.
    --mtx-switch-thumb-on     The switches' thumb when on (white over the dark track; BaseTextColor in dark).
    --mtx-button-ring         A hairline around the dark buttons in the dark theme, so they keep an edge.

    Dark mode follows data-bs-theme="dark" on <html>.
*/

:root {
    --mtx-accent: #111111;
    --mtx-on-accent: #FFFFFF;
    --mtx-close-halo: rgba(0, 0, 0, .45);
    --mtx-link: #58BADB;
    --mtx-icon: #565973;
    --mtx-accordion-expanded: hsl(calc(247.06deg + var(--ci-accent-shift, 0deg)) 100% 96.67%);
    --mtx-switch-thumb-on: #FFFFFF;
    --mtx-button-ring: transparent;
}

[data-bs-theme="dark"] {
    --mtx-icon: #B4B7C9;
    --mtx-accordion-expanded: #2B3149;
    --mtx-switch-thumb-on: #D9DBE8;
    --mtx-button-ring: rgba(255, 255, 255, .10);
}

/* ------------------------------------------------------------------ Frame */

.mtx-root {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 2rem);
    background: var(--tx-page);
    color: var(--tx-text);
}

@media (max-width: 640px) {
    .mtx-root {
        height: 100dvh;
        max-height: 100dvh;
    }
}

.mtx-scroll {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mtx-hero {
    position: relative;
}

/* The solid header band behind the sheet; it runs past the sheet's top so the rounded corner shows it. */
.mtx-band {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 134px;
    background: var(--mtx-accent);
}

/* The body sheet: the couple glows (user top-left, partner top-right) over the page color, 24px top-left corner. */
.mtx-sheet {
    position: absolute;
    top: 107px;
    left: 0;
    right: 0;
    height: 720px;
    border-top-left-radius: 24px;
    background: var(--tx-glow-user), var(--tx-glow-partner), var(--tx-page);
}

.mtx-content {
    position: relative;
    z-index: 1;
}

.mtx-head-space {
    height: 110px;
}

/* ------------------------------------------------------------------ Header: logo, title, date */

.mtx-logo {
    position: relative;
    z-index: 2;
    width: 84px;
    height: 84px;
    margin: -45px 10px 0 20px;
    overflow: hidden;
    border: 2px solid var(--tx-page);
    border-radius: 44px;
    background: var(--tx-page);
}

.mtx-logo-img {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--mtx-accent);
    object-fit: contain;
}

.mtx-titles {
    min-height: 80px;
    margin: -20px 20px 0 0;
}

.mtx-title-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
    margin: 10px 4px 0 112px;
}

.mtx-title {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--tx-font);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--tx-text);
}

.mtx-partner-pill {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 20px;
    background: var(--tx-pill-bg);
    color: var(--tx-primary);
    font-size: 11px;
}

.mtx-partner-pill .tx-glyph {
    opacity: .7;
}

.mtx-header-date {
    margin: 8px 4px 0 112px;
    text-align: right;
    font-family: var(--tx-font);
    font-size: 14px;
    color: var(--tx-text);
}

/* ------------------------------------------------------------------ Body and cards (TxDetailCardBrush, TxPopupCardStrokeBrush) */

.mtx-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px 16px 16px;
}

.mtx-info {
    margin: 0;
    font-family: var(--tx-font);
    font-size: 13px;
    line-height: 1.45;
    opacity: .85;
    color: var(--tx-text);
}

.mtx-card {
    position: relative;
    padding: 16px;
    border-radius: 14px;
    background: var(--tx-detail-card);
}

.mtx-recurring-card {
    background: var(--tx-recurring-card);
}

/* A 1px gradient stroke that keeps the card translucent (a masked ring over the card's edge). */
.mtx-stroke::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 1px;
    border-radius: inherit;
    background: var(--tx-card-stroke);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.mtx-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.mtx-card-title {
    margin: 0;
    font-family: var(--tx-font-text);
    font-weight: 400;
    font-size: 16px;
    text-transform: uppercase;
    color: var(--tx-text);
}

.mtx-label {
    margin: 0;
    font-family: var(--tx-font);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    opacity: .7;
    color: var(--tx-text);
}

.mtx-caption {
    margin: 0;
    font-family: var(--tx-font);
    font-size: 12px;
    line-height: 1.4;
    opacity: .7;
    color: var(--tx-text);
}

.mtx-caption-small {
    margin: 0;
    font-family: var(--tx-font);
    font-size: 11px;
    line-height: 1.4;
    opacity: .6;
    color: var(--tx-text);
}

/* ------------------------------------------------------------------ Amount */

.mtx-amount-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    padding: 4px 16px 12px;
    --mtx-amount: var(--tx-negative);
}

/* The amount's direction, the transaction lists' red and green (DashboardNegativeColor / DashboardPositiveColor): the field
   and its "$" glyph. */
.mtx-amount-card.mtx-amount-out {
    --mtx-amount: var(--tx-negative);
}

.mtx-amount-card.mtx-amount-in {
    --mtx-amount: var(--tx-positive);
}

.mtx-amount-caption {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: text;
}

.mtx-amount-glyph {
    font-size: 20px;
    color: var(--mtx-amount);
}

.mtx-amount-input {
    width: 100%;
    min-width: 0;
    padding: 8px 0;
    border: 0;
    outline: 0;
    background: transparent;
    text-align: right;
    font-family: var(--tx-font);
    font-weight: 500;
    font-size: 25px;
    color: var(--mtx-amount);
}

.mtx-amount-input::placeholder {
    color: var(--tx-text);
    opacity: 1;
}

/* Money moving between the owner's own accounts (a transfer, a card payment) reads neutral, as on the transaction popup;
   the help pill under the switch says why. */
.mtx-amount-card.mtx-amount-neutral {
    --mtx-amount: var(--tx-neutral);
}

/* The Expense / Income / Other switch (the shared TransactionTypeSwitch, the mobile Scroll SegmentedMenu on its default
   track) and the help pill under it: full width under the amount. The track and the type menu take the segmented menu's
   own track color, which reads on this card's light wash; the menu still floats over the form. */
.mtx-amount-card {
    row-gap: 8px;
}

.mtx-amount-card > .mtx-type,
.mtx-amount-card > .mtx-flow-help {
    grid-column: 1 / -1;
}

.mtx-type .tx-seg.txp-direction {
    background: var(--tx-seg-track);
}

.mtx-type .txp-type-menu {
    background: var(--tx-seg-track);
}

.txp-flow.mtx-flow-help {
    padding: 9px 12px 9px 10px;
    border-radius: 12px;
}

.txp-flow.mtx-flow-help .txp-flow-chip {
    width: 30px;
    height: 30px;
    border-radius: 10px;
}

/* The ring marks typing in the amount, not a click on the switch under it. */
.mtx-amount-card:has(.mtx-amount-input:focus) {
    box-shadow: 0 0 0 2px var(--tx-primary);
}

.tx-root .mtx-amount-input:focus-visible {
    outline: none;
}

/* ------------------------------------------------------------------ Fields (TxPopupInputBackgroundColor, TxPopupTileBorderColor) */

.mtx-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 10px;
}

.mtx-pair.mtx-pair-wide {
    column-gap: 12px;
}

.mtx-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mtx-input-box {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 4px 12px;
    background: var(--tx-input-bg);
    border: 1px solid var(--tx-tile-border);
    border-radius: 8px;
    transition: border-color .15s ease;
}

.mtx-input-box:focus-within {
    border-color: var(--tx-primary);
}

.mtx-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    text-align: right;
    font-family: var(--tx-font);
    font-weight: 400;
    font-size: 14px;
    color: var(--tx-text);
}

.tx-root .mtx-input:focus-visible,
.tx-root .mtx-textarea:focus-visible {
    outline: none;
}

.mtx-input:disabled,
.mtx-textarea:disabled,
.mtx-amount-input:disabled {
    cursor: default;
    opacity: .8;
}

.mtx-textarea-box {
    align-items: flex-start;
    padding: 6px;
}

.mtx-textarea {
    width: 100%;
    min-height: 100px;
    padding: 4px;
    border: 0;
    outline: 0;
    resize: vertical;
    background: transparent;
    font-family: var(--tx-font);
    font-size: 14px;
    line-height: 1.45;
    color: var(--tx-text);
}

.mtx-date-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 15px;
    align-items: start;
}

/* Date Posted and First Date (PopupDatePicker): the mobile 42px box at the 8px corner. */
.e-input-group.e-control-wrapper.e-date-wrapper.tx-date-picker.mtx-date-picker {
    min-height: 42px;
    border-radius: 8px;
    transition: border-color .15s ease;
}

.e-input-group.e-control-wrapper.e-date-wrapper.tx-date-picker.mtx-date-picker:hover:not(.e-disabled) {
    border-color: var(--tx-primary);
}

.e-input-group.e-control-wrapper.e-date-wrapper.tx-date-picker.mtx-date-picker input.e-input {
    min-height: 40px;
    font-family: var(--tx-font);
}

/* The shared category picker's field box, at the mobile 8px corner. */
.tx-field-box.mtx-category {
    min-height: 42px;
    border-radius: 8px;
}

/* ------------------------------------------------------------------ Notes, Location, Recurring (SfAccordion) */

.mtx-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mtx-acc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--tx-text);
    font-family: var(--tx-font-text);
    font-size: 16px;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s ease;
}

.mtx-acc-header[aria-expanded="false"]:hover {
    background: var(--tx-pill-bg);
}

.mtx-acc-header[aria-expanded="true"] {
    background: var(--mtx-accordion-expanded);
    cursor: default;
}

.mtx-acc-chevron {
    font-size: 13px;
    color: var(--mtx-icon);
    transition: transform .2s ease;
}

.mtx-acc-header[aria-expanded="true"] .mtx-acc-chevron {
    color: var(--tx-text);
    transform: rotate(180deg);
}

.mtx-acc-panel {
    margin-top: 12px;
}

/* ------------------------------------------------------------------ Location */

.mtx-loc-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 6px;
}

.mtx-get-location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0 4px 6px;
    border: 0;
    background: transparent;
    color: var(--mtx-link);
    font-family: var(--tx-font);
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    cursor: pointer;
}

.mtx-get-location:disabled {
    cursor: default;
    opacity: .6;
}

.mtx-get-location-glyph {
    width: 25px;
    font-size: 16px;
    color: var(--tx-text);
}

.mtx-address-row {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) auto 35px;
    align-items: center;
    column-gap: 5px;
}

.mtx-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tx-text);
    text-decoration: none;
    cursor: pointer;
}

.mtx-icon-btn:disabled,
.mtx-icon-btn.mtx-icon-off {
    cursor: default;
    opacity: .45;
}

.mtx-clear {
    width: 32px;
    margin: 0 2px;
    font-size: 18px;
    color: var(--mtx-icon);
}

.mtx-clear-slot {
    width: 0;
}

.mtx-search {
    width: 35px;
    font-size: 20px;
}

.mtx-location-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    max-width: 100%;
    color: var(--mtx-link);
    font-family: var(--tx-font);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
}

.mtx-location-link-text {
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.mtx-location-link-glyph {
    font-size: 22px;
    color: var(--tx-text);
}

.mtx-map {
    position: relative;
    height: 200px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--tx-page);
}

.mtx-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ------------------------------------------------------------------ Recurring: switches, lists, Auto recurring, help */

.mtx-switch-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
}

.mtx-auto-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 8px;
}

.mtx-auto-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mtx-switch.e-switch-wrapper .e-switch-inner.e-switch-active,
.mtx-switch.e-switch-wrapper:hover .e-switch-inner.e-switch-active {
    border-color: var(--mtx-accent);
    background-color: var(--mtx-accent);
}

.mtx-switch.e-switch-wrapper .e-switch-handle.e-switch-active {
    background-color: var(--mtx-switch-thumb-on);
}

[data-bs-theme="dark"] .mtx-switch.e-switch-wrapper .e-switch-handle.e-switch-active {
    background-color: var(--mtx-switch-thumb-on);
}

[data-bs-theme="dark"] .mtx-switch.e-switch-wrapper .e-switch-inner.e-switch-active {
    box-shadow: inset 0 0 0 1px var(--mtx-button-ring);
}

.mtx-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 36px;
    min-height: 36px;
    padding: 0 4px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--tx-home-icon);
    font-family: var(--tx-font-text);
    font-size: 12px;
    text-transform: uppercase;
    cursor: pointer;
}

.mtx-help:hover {
    background: var(--tx-tile-bg);
}

.mtx-help-glyph {
    font-size: 18px;
}

/* The Frequency and Flow lists: the mobile bordered box, 8px corner. */
.mtx-root .e-input-group.e-control-wrapper.e-ddl.mtx-dropdown {
    height: 42px;
    margin: 0;
    padding: 0 2px 0 6px;
    border: 1px solid var(--tx-tile-border);
    border-radius: 8px;
    background: var(--tx-input-bg);
    box-shadow: none;
}

.mtx-root .e-input-group.e-control-wrapper.e-ddl.mtx-dropdown.e-input-focus {
    border-color: var(--tx-primary);
}

.mtx-root .e-input-group.e-control-wrapper.e-ddl.mtx-dropdown .e-input,
.mtx-root .e-input-group.e-control-wrapper.e-ddl.mtx-dropdown .e-input-value {
    background: transparent;
    color: var(--tx-text);
    font-family: var(--tx-font);
    font-size: 14px;
}

.mtx-root .e-input-group.e-control-wrapper.e-ddl.mtx-dropdown .e-input-group-icon {
    background: transparent;
    color: var(--tx-text);
}

.e-ddl.e-popup.mtx-dropdown {
    border: 1px solid var(--tx-entry-border);
    border-radius: 10px;
    background: var(--tx-page);
    box-shadow: var(--tx-dialog-shadow);
}

.e-ddl.e-popup.mtx-dropdown .e-list-item {
    background: transparent;
    color: var(--tx-text);
}

.e-ddl.e-popup.mtx-dropdown .e-list-item.e-hover,
.e-ddl.e-popup.mtx-dropdown .e-list-item.e-item-focus {
    background: var(--tx-pill-bg);
    color: var(--tx-text);
}

.e-ddl.e-popup.mtx-dropdown .e-list-item.e-active {
    background: var(--mtx-accordion-expanded);
    color: var(--tx-text);
}

.mtx-option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* The selected value is drawn inside Syncfusion's .e-input-value span: pin it to the box's vertical centre so the glyph and the text share one centre line. */
.mtx-root .e-input-group.e-control-wrapper.e-ddl.mtx-dropdown .e-input-value {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* Popup rows: the same flex row, with a fixed row height so every glyph sits on the text's centre. */
.e-ddl.e-popup.mtx-dropdown .e-list-item {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    line-height: 1;
}

.mtx-option-icon {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 15px;
    line-height: 1;
    color: var(--tx-text);
}

.mtx-option-icon .tx-glyph {
    display: block;
    width: auto;
    margin: 0;
    font-size: inherit;
    line-height: 1;
    text-align: center;
}

/* Flow: Outflow points up and right (money leaving), Inflow down and left (money arriving). */
.mtx-option-icon .mtx-flow-out {
    transform: rotate(-45deg);
}

.mtx-option-icon .mtx-flow-in {
    transform: rotate(-45deg);
}

.mtx-option-badge {
    position: absolute;
    right: -7px;
    bottom: -5px;
    min-width: 14px;
    height: 12px;
    padding: 0 3px;
    border-radius: 6px;
    background: var(--tx-text);
    box-shadow: 0 0 0 1.5px var(--tx-input-bg);
    color: var(--tx-page);
    font-family: var(--tx-font);
    font-weight: 700;
    font-size: 8.5px;
    line-height: 12px;
    text-align: center;
}

.mtx-option-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--tx-font);
    font-size: 14px;
    line-height: 1;
    color: var(--tx-text);
}

/* ------------------------------------------------------------------ Footer buttons (PrimaryButtonStyle on ManualTransactionButtonColor) */

.mtx-footer {
    display: flex;
    flex: 0 0 auto;
    padding: 12px 16px;
    background: var(--tx-page);
}

.mtx-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 50px;
    margin: 0 10px;
    padding: 0 10px;
    border: 0;
    border-radius: 14px;
    background: var(--mtx-accent);
    box-shadow: inset 0 0 0 1px var(--mtx-button-ring);
    color: var(--mtx-on-accent);
    font-family: var(--tx-font);
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter .15s ease, transform .12s ease, opacity .15s ease;
}

.mtx-btn:hover:not(:disabled) {
    filter: brightness(1.25);
}

.mtx-btn:active:not(:disabled) {
    transform: scale(.98);
}

.mtx-btn:disabled {
    cursor: default;
    opacity: .5;
}

/* ------------------------------------------------------------------ Close (the [x] over the band, fixed while the body scrolls) */

.mtx-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 24px;
    background: transparent;
    color: var(--mtx-on-accent);
    cursor: pointer;
}

.mtx-close-glyph {
    width: 36px;
    height: 36px;
    fill: currentColor;
    filter: drop-shadow(0 1px 8px var(--mtx-close-halo));
}

@media (prefers-reduced-motion: reduce) {
    .mtx-acc-chevron,
    .mtx-btn,
    .mtx-acc-header {
        transition: none;
    }
}

/* ------------------------------------------------------------------ Admin header launcher: "(M) Manual Transaction" */
/* The Dashboard and Transactions header button (ManualTransactionButton.razor): the popup's cursive M badge leads the
   label in place of a plus. Styled as an admin header action (css/admin-header-actions.css, the Financial Intelligence
   buttons): flat 36px face in the page color, 1px hairline, 12px radius, accent-soft fill on hover, no shadows. The
   --ci-act-* tokens switch for dark mode, so one rule set covers both themes. */

.e-btn.mtx-launch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0.4rem;
    padding-right: 0.9rem;
}

.mtx-launch-badge {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #111111;
    overflow: hidden;
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Overrides the theme's solid brand primary (app.css, !important) for this button only, on every page. */
button.e-control.e-btn.e-lib.e-primary.mtx-launch,
button.e-control.e-btn.e-lib.e-primary.mtx-launch:focus {
    height: var(--ci-act-height, 36px);
    min-height: var(--ci-act-height, 36px);
    border: 1px solid var(--ci-act-border, hsl(calc(247.66deg + var(--ci-accent-shift, 0deg)) 100% 90.78%)) !important;
    border-radius: var(--ci-act-radius, 12px) !important;
    background-color: var(--ci-act-bg, #ffffff) !important;
    background-image: none !important;
    color: var(--ci-act-text, #0B0F19) !important;
    font-family: var(--ci-act-font);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1;
    text-transform: none;
    box-shadow: none !important;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

button.e-control.e-btn.e-lib.e-primary.mtx-launch:not(:disabled):hover,
button.e-control.e-btn.e-lib.e-primary.mtx-launch:not(:disabled):focus-visible {
    border-color: var(--ci-act-hover-border, hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63%)) !important;
    background-color: var(--ci-act-accent-soft, hsl(calc(246.92deg + var(--ci-accent-shift, 0deg)) 100% 94.9%)) !important;
    color: var(--ci-act-text, #0B0F19) !important;
    box-shadow: none !important;
    outline: none;
}

button.e-control.e-btn.e-lib.e-primary.mtx-launch:not(:disabled):active {
    border-color: var(--ci-act-hover-border, hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63%)) !important;
    background-color: var(--ci-act-accent-soft, hsl(calc(246.92deg + var(--ci-accent-shift, 0deg)) 100% 94.9%)) !important;
    color: var(--ci-act-text, #0B0F19) !important;
    box-shadow: none !important;
    transform: scale(0.97);
}

button.e-control.e-btn.e-lib.e-primary.mtx-launch:disabled {
    border-color: var(--ci-act-border, hsl(calc(247.66deg + var(--ci-accent-shift, 0deg)) 100% 90.78%)) !important;
    background-color: var(--ci-act-bg, #ffffff) !important;
    color: var(--ci-act-muted, #565973) !important;
    box-shadow: none !important;
    opacity: 0.55;
}

/* Dark theme: the black disc gets a faint hairline so it doesn't sink into the dark face. */
[data-bs-theme="dark"] .mtx-launch-badge {
    outline: 1px solid rgba(255, 255, 255, 0.18);
    outline-offset: -1px;
}

/* The glint: a soft highlight across the top-left of the disc. */
.mtx-launch-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
}

.mtx-launch-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
}

.mtx-launch-text {
    line-height: 1;
    letter-spacing: 0.01em;
}

.e-btn.mtx-launch:not(:disabled):hover .mtx-launch-badge,
.e-btn.mtx-launch:not(:disabled):focus-visible .mtx-launch-badge {
    transform: rotate(-8deg);
}

.e-btn.mtx-launch:disabled .mtx-launch-badge {
    filter: grayscale(0.2);
}

@media (prefers-reduced-motion: reduce) {
    .mtx-launch-badge {
        transition: none;
    }

    button.e-control.e-btn.e-lib.e-primary.mtx-launch:not(:disabled):hover,
    button.e-control.e-btn.e-lib.e-primary.mtx-launch:not(:disabled):focus-visible,
    .e-btn.mtx-launch:not(:disabled):hover .mtx-launch-badge,
    .e-btn.mtx-launch:not(:disabled):focus-visible .mtx-launch-badge {
        transform: none;
    }
}