/* =============================================================================
   BASE — shared application styles
   ============================================================================= */


/* =============================================================================
   [BASE_00] Design tokens
   ============================================================================= */

:root {
    --accentColor: #00C8D8;
    --mainColor: #2a6aed;
    --my-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
    --my-font-serif: Georgia, "Times New Roman", Times, Arial, Helvetica, serif;
}


/* =============================================================================
   [BASE_10] Document
   ============================================================================= */

html {
    position: relative;
    min-height: 100%;
}

body {
    accent-color: var(--accentColor);
    margin-bottom: 60px;
}


/* =============================================================================
   [BASE_20] Shared action buttons

   .my-button-nice is the canonical button design. Component classes inherit
   the visual layer and override only their layout or color as needed.
   ============================================================================= */

/* === Button Nice === */
/* Has/handles [is-active] flag. this attribute simulates button pressed-held down.
   Sticky: base.js → [is-active] on <a.my-button-nice>. Opt-out: [my-flag-notoggle]. */

/* Raised action button. Fill via vars + ::before; transparent host for focus/outline.
   Box size mirrors Bootstrap .btn (padding / font-size / line-height / radius). */
.my-button-nice {
    /* Cfg - these values can be overriden on implementation */
    --my-button-nice-fill-color: #2a6aed;
    --my-button-nice-fill-dim: 86%;
    --my-button-nice-border-color: color-mix(in srgb, var(--my-button-nice-fill-color) var(--my-button-nice-fill-dim), black);
    --my-button-nice-text-color: #fff;
    /* calculated automatically, according to values above */
    --my-button-nice-fill: linear-gradient(
        180deg,
        var(--my-button-nice-fill-color) 0%,
        color-mix(in srgb, var(--my-button-nice-fill-color) var(--my-button-nice-fill-dim), black) 100%
    );
    /* /Cfg */

    /* Bootstrap .btn sizing */
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;

	/* My */
    border: none;
    border-radius: 8px;
    position: relative;
    isolation: isolate;
    background: transparent;
    color: var(--my-button-nice-text-color);
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    transition: box-shadow 0.1s ease-out;
    user-select: none;
    -webkit-user-drag: none;
}

/* Disabled. Keep the hit target so cursor: not-allowed paints. */
.my-button-nice:disabled,
.my-button-nice[disabled] {
    cursor: not-allowed;
}

/* Link/button text color lock. Keeps ink on hover/focus/visited. */
.my-button-nice:hover,
.my-button-nice:visited {
    color: var(--my-button-nice-text-color);
}

/* Fill layer. Painted border + gradient under content. */
.my-button-nice::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    border: 1px solid var(--my-button-nice-border-color);
    background: var(--my-button-nice-fill);
    box-shadow: var(
        --my-button-nice-inset-shadow,
        inset 0 1px 0 rgba(255, 255, 255, 0.16)
    );
    pointer-events: none;

    transition: filter 0.15s ease-out, box-shadow 0.1s ease-out;
}

/* Idle hover lift. Outer shadow on host (skips disabled/active). */
.my-button-nice:not([disabled]):not([is-active]):not(:active):hover {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

/* Idle hover dim. Darkens ::before fill only. */
.my-button-nice:not([disabled]):not([is-active]):not(:active):hover::before {
    --my-button-nice-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    filter: brightness(0.85);
}

/* Pressed / sticky active. Nudge down + clear outer shadow. */
.my-button-nice:not(:disabled):not([disabled]):active,
.my-button-nice:not(:disabled):not([disabled])[is-active] {
    transform: translateY(1px);
    box-shadow: none;
    filter: brightness(0.9);
}

/* Pressed fill. Deep inset shadows on ::before. */
.my-button-nice:not(:disabled):not([disabled]):active::before,
.my-button-nice:not(:disabled):not([disabled])[is-active]::before {
    box-shadow:
        inset 0 3px 6px rgba(15, 23, 42, 0.42),
        inset 0 1px 2px rgba(0, 0, 0, 0.28);
}
/* === /Nice === */


/* =============================================================================
   [BASE_30] Shared chrome — my-* primitives
   Proportions live here. Page CSS keeps host wiring / PE scale overrides.
   Children: my-block_child (single underscore).
   ============================================================================= */

/* === User chip + menu === */
/* Chip requires .my-user-menu child. Menu may exist without chip.
   Empty menu: :not(:has(*)). Open: .my-user-chip:hover .my-user-menu */

/* User chip root. Pill shell for name + avatar + menu. */
.my-user-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.2rem 0.25rem 0.2rem 0.85rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    background: #ffffffff;
    box-shadow:
        inset 2px 3px 3px rgba(15, 23, 42, 0.15),
        inset 0 1px 1px rgba(15, 23, 42, 0.08),
        inset -1px -1px 2px rgba(255, 255, 255, 0.41),
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 4px 14px rgba(15, 23, 42, 0.05);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    z-index: 40;
}

/* User chip hover. Accent ring + stronger lift. */
.my-user-chip:hover {
    border-color: color-mix(in srgb, var(--accentColor) 45%, rgba(15, 23, 42, 0.12));
    box-shadow:
        inset 2px 3px 6px rgba(15, 23, 42, 0.15),
        inset 0 1px 1px rgba(15, 23, 42, 0.08),
        inset -1px -1px 2px rgba(255, 255, 255, 0.41),
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 8px 20px rgba(15, 23, 42, 0.08),
        0 0 0 3px color-mix(in srgb, var(--accentColor) 22%, transparent);
}

/* Chip display name. Ellipsis when long. */
.my-user-chip_name {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
}

/* Logout form wrapper. Pass-through layout (display: contents). */
.my-user-chip_logout-form {
    display: contents;
}

/* Avatar / logout hit target. Circular monogram button. */
.my-user-chip_avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    color: #0f172a;
    background:
        radial-gradient(circle at 30% 25%, #ffffff60 0%, transparent 42%),
        linear-gradient(145deg, color-mix(in srgb, var(--accentColor) 70%, cyan), color-mix(in srgb, var(--mainColor) 55%, #f8fafc));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
    transition: transform 0.16s ease;
}

/* Avatar hover. Slight scale-up. */
.my-user-chip_avatar:hover {
    transform: scale(1.05);
}

/* Avatar keyboard focus. Accent outline. */
.my-user-chip_avatar:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accentColor) 80%, #0f172a);
    outline-offset: 2px;
}

/* Initials on avatar. Hides on hover for logout icon. */
.my-user-chip_monogram {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: opacity 0.14s ease, transform 0.14s ease;
}

/* Logout glyph overlay. Hidden until avatar hover/focus. */
.my-user-chip_logout {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.14s ease, transform 0.14s ease;
}

/* Logout SVG size. */
.my-user-chip_logout svg {
    width: 0.95rem;
    height: 0.95rem;
}

/* Monogram hide. On avatar hover/focus. */
.my-user-chip_avatar:hover .my-user-chip_monogram,
.my-user-chip_avatar:focus-visible .my-user-chip_monogram {
    opacity: 0;
    transform: scale(0.85);
}

/* Logout show. On avatar hover/focus. */
.my-user-chip_avatar:hover .my-user-chip_logout,
.my-user-chip_avatar:focus-visible .my-user-chip_logout {
    opacity: 1;
    transform: scale(1);
}

/* User menu panel. Dropdown under chip; closed by default. */
.my-user-menu {
    z-index: 50;
    position: absolute;
    transform-origin: top center;
    display: none;
    top: calc(100% - 2px);
    right: 0;
    min-width: 100%;
    padding: 0.35rem;
    border: 1px solid rgba(15, 23, 42, 0.16);
    border-radius: 0.75rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.92));
    xbox-shadow:
        0 1px 2px rgba(15, 53, 102, 0.05),
        0 8px 20px rgba(15, 53, 102, 0.08);
}

/* Empty menu. Force-hide when no children. */
.my-user-menu:not(:has(*)) {
    display: none;
}

/* Open menu. Show on chip hover when menu has items. */
.my-user-chip:hover .my-user-menu:has(*) {
    display: block;
    animation: myUserChipGrowDown 300ms ease-in-out forwards;
}

/* Menu open animation. Scale-Y grow with slight bounce. */
@keyframes myUserChipGrowDown {
    0% { transform: scaleY(0); }
    80% {
        transform: scaleY(1.1);
        box-shadow: 0 1px 2px rgba(15, 53, 102, 0.05),
                    0 8px 20px rgba(15, 53, 102, 0.08);
    }
    100% {
        transform: scaleY(1);
        box-shadow: 0 1px 2px rgba(15, 53, 102, 0.075),
                    0 8px 20px rgba(15, 53, 102, 0.12);
    }
}

/* Menu item. Full-width link/button row. */
.my-user-menu_item {
    display: block;
    padding: 0.45rem 0.75rem;
    margin: 0;
    width: 100%;
    border: none;
    border-radius: 0.45rem;
    background: transparent;
    color: #1e293b;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: right;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

/* Menu item link states. Keep ink (no browser/Bootstrap link blue). */
.my-user-menu_item:hover,
.my-user-menu_item:visited {
    color: #1e293b;
    text-decoration: none;
}

/* Menu item hover/focus. Soft highlight + outline. */
.my-user-menu_item:hover,
.my-user-menu_item:focus-visible {
    background: #0050a010;
    outline: 1px solid color-mix(in srgb, cyan 80%, #0f172a);
}
/* === /User chip + menu === */


/* === Nav butt === */

/* Header nav pill. Link/button chrome for navbar actions. */
.my-nav-butt {
    --my-nav-butt-fill: rgba(15, 23, 42, 0.04);
    --my-nav-butt-fill-hover: rgba(15, 23, 42, 0.08);
    --my-nav-butt-border: rgba(15, 23, 42, 0.12);
    --my-nav-butt-border-hover: color-mix(in srgb, var(--accentColor) 40%, rgba(15, 23, 42, 0.18));
    --my-nav-butt-ink: #1e293b;
    --my-nav-butt-glyph: 1.2rem;

    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin: 0;
    min-width: 8rem;
    min-height: 2.2rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--my-nav-butt-border);
    border-radius: 999px;
    background: var(--my-nav-butt-fill);
    color: var(--my-nav-butt-ink) !important;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        color 0.16s ease;
}

/* Nav pill hover/focus. Fill + accent ring. */
.my-nav-butt:hover,
.my-nav-butt:focus-visible {
    background: var(--my-nav-butt-fill-hover);
    border-color: var(--my-nav-butt-border-hover);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 0 0 3px color-mix(in srgb, var(--accentColor) 18%, transparent);
    outline: none;
}

/* Nav pill with icon. Keeps glyph/text gap. */
.my-nav-butt:has(svg) {
    gap: 0.45rem;
}

/* Nav glyph slot. Fixed box for icon. */
.my-nav-butt_glyph {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: var(--my-nav-butt-glyph);
    height: var(--my-nav-butt-glyph);
}

/* Nav SVG icon. Sized to glyph slot. */
.my-nav-butt_icon {
    width: 1.2rem;
    height: 1.2rem;
    display: block;
    overflow: visible;
}

/* Guide variant. Orange-tinted pill tokens. */
.my-nav-butt--guide {
    --my-nav-butt-fill: color-mix(in srgb, orange 12%, rgba(255, 255, 255, 0.5));
    --my-nav-butt-fill-hover: color-mix(in srgb, orange 22%, rgba(255, 255, 255, 0.4));
    --my-nav-butt-border: color-mix(in srgb, #0f766e 32%, rgba(15, 23, 42, 0.16));
    --my-nav-butt-border-hover: color-mix(in srgb, #0f766e 52%, rgba(15, 23, 42, 0.26));
    --my-nav-butt-ink: #3f3f46;
    font-weight: 500;
}
/* === /Nav butt === */


/* === Nav bar === */

/* Toolbar strip. 3-column grid shell for search / controls / label. */
.my-nav-bar {
    display: grid;
    align-items: center;
}
/* === /Nav bar === */

/* === Panels === */
.my-panel-up-1 {
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid #d7dce2;
    border-radius: 10px;
    background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%);
}
/* === /Panels === */

/* === Input field === */
/* Text field. Inset search/filter input. */
.my-input-field {
    width: 100%;
    height: 34px;
    margin: 0;
    padding: 0 36px 0 10px;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    background: #fefefe;
    color: #0f172a;
    box-shadow:
        inset 2px 3px 6px rgba(15, 23, 42, 0.15),
        inset 0 1px 1px rgba(15, 23, 42, 0.08),
        inset -1px -1px 2px rgba(255, 255, 255, 0.41);
    
    border: 1px solid #00000040;

    transition: border ease-out 50ms;
}
/* === /Input field === */


/* === Input search === */
/* Search/filter override on .my-input-field.
   Glass icon = Kendo searchIcon as background (input has no ::before). */
.my-input-field.my-input-search {
    border: 1px solid #aaa;
    padding-left: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23666' d='M365.3 320h-22.7l-26.7-26.7C338.5 265.7 352 230.4 352 192c0-88.4-71.6-160-160-160S32 103.6 32 192s71.6 160 160 160c38.4 0 73.7-13.5 101.3-36.1l26.7 26.7v22.7L434.7 480l45.3-45.3zM64 192c0-70.7 57.3-128 128-128s128 57.3 128 128-57.3 128-128 128S64 262.7 64 192'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 8px 50%;
    background-size: 18px 18px;
}
/* === /Input search === */


/* === Input clearable === */
/* Host wrapper around .my-input-field. base.js injects .my-input-clearable_btn. */
.my-input-clearable {
    position: relative;
}

.my-input-clearable_btn {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #444;
    cursor: pointer;
    line-height: 0;
    font-weight: normal;
    opacity: 0;
    pointer-events: none;
}

.my-input-clearable_btn.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.my-input-clearable_btn:hover {
    color: #000;
    filter: none;
}

.my-input-clearable_icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* === /Input clearable === */

/* === Responsive Fields === */
.my-nav-datepicker:hover,
.my-input-field:hover {
    border: 1px solid #0050a0f0;
}
/* === /Responsive Fields === */

/* === Nav datepicker === */
/* Date input. Native date control + debounce fill track. */
.my-nav-datepicker {
    --debounce-ms: 0ms;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    padding: 0 10px 0 15px;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #fefefe;
    color: #0f172a;
    background-image: linear-gradient(#2563EB80, #2563EB80);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    box-shadow:
        inset 2px 3px 6px rgba(15, 23, 42, 0.1),
        inset 0 1px 1px rgba(15, 23, 42, 0.05),
        inset -1px -1px 2px rgba(255, 255, 255, 0.28);
    
    transition: background-size var(--debounce-ms) linear,
                border ease-out 50ms;
}

/* Debounce progress. Fills blue track while waiting. */
.my-nav-datepicker.is-debouncing {
    background-size: 100% 100%;
}

/* Date text fields. Text cursor on editable parts. */
.my-nav-datepicker::-webkit-datetime-edit-fields-wrapper {
    cursor: text;
}

/* Calendar icon. Clickable picker affordance. */
.my-nav-datepicker::-webkit-calendar-picker-indicator {
    cursor: pointer;
    border-radius: 50%;
    padding: 5px;
    transition: box-shadow 0.15s ease-out;
}

/* Calendar icon hover. Soft blue glow ring. */
.my-nav-datepicker::-webkit-calendar-picker-indicator:hover {
    outline: 1px solid #00000080;
    box-shadow: 1px 0px 4px #00308060,
                -1px 0px 4px #00308060,
                 0px 1px 4px #00308060,
                 0px -1px 4px #00308060;
}
/* === /Nav datepicker === */


/* === Date label === */

/* Selected-date caption. Bold readout beside toolbar. */
.my-datelabel {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.15px;
    padding-right: 15px;
    color: #1e293b;
}
/* === /Date label === */


/* === Card grid === */

/* Agent/board card. Fixed-width tile shell. */
.my-card-grid {
    width: 280px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid #a7acf290;
    border-radius: 10px;
    background: linear-gradient(343deg, #e8eaff 50%, #f1f5f980 100%);
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

/* Filtered-out card. Hidden by client filter. */
.my-card-grid.is-filtered-out {
    display: none;
}

/* Card hover. Lift + deeper shadow. */
.my-card-grid:hover {
    transform: translate(0px, -3px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

/* Card title. Two-line clamp. */
.my-card-grid_title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    height: calc(2 * 1.25 * 1em);
    overflow: hidden;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Card meta stack. Secondary stats under title. */
.my-card-grid_meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #344054;
    font-size: 13px;
}
/* === /Card grid === */


/* === Panel menu primary === */

/* Primary menu panel. Centered admin-style card shell. */
.my-panel-menu-primary {
    box-sizing: border-box;
    width: min(100%, 500px);
    padding: 24px 28px 28px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 16px;
    background: #00000006;
    box-shadow:
        inset 0 0 12px rgba(15, 23, 42, 0.15),
        inset 2px 3px 6px rgba(15, 23, 42, 0.08),
        inset 0 1px 1px rgba(15, 23, 42, 0.08),
        inset -1px -1px 2px rgba(255, 255, 255, 0.20),
        0 8px 24px rgba(15, 23, 42, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    text-align: center;
}

/* Panel title. Heading above button stack. */
.my-panel-menu-primary_title {
    margin: 0 0 24px;
    font-size: 1.75rem;
    line-height: 1.2;
}

/* Panel button column. Vertical stack of actions. */
.my-panel-menu-primary_buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Panel action button layout. Wide block sized for my-button-nice. */
.my-panel-menu-primary_btn {
    display: block;
    box-sizing: border-box;
    width: 90%;
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
}
/* === /Panel menu primary === */


/* === Card anal fancy === */

/* Analysis summary card. Gradient agent/context card. */
.my-card-anal-fancy {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    padding: 20px 14px;
    background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
}

/* Fancy card title. */
.my-card-anal-fancy_title {
    margin: 0;
    min-width: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.25;
    color: #0f172a;
}

/* Fancy meta list. Bottom-pinned dt/dd stack. */
.my-card-anal-fancy_meta {
    margin: 0;
    margin-top: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
}

/* Fancy meta row. Label / value grid. */
.my-card-anal-fancy_meta-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    align-items: start;
}

/* Title row (direct child). Centers title + refresh control. */
.my-card-anal-fancy > .my-card-anal-fancy_meta-row {
    align-items: center;
    flex-shrink: 0;
    gap: 8px;
}

/* Fancy meta term. Muted label. */
.my-card-anal-fancy_meta .my-card-anal-fancy_meta-row > dt {
    margin: 0;
    min-width: 0;
    font-weight: 500;
    color: #475569;
}

/* Fancy meta value. Right-aligned tabular number/text. */
.my-card-anal-fancy_meta .my-card-anal-fancy_meta-row > dd {
    margin: 0;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
}
/* === /Card anal fancy === */


/* === Files dropzone === */

/* File drop target. Dashed upload hit area. */
.my-files-dropzone {
    position: relative;
    overflow: hidden;
    flex: 1 1 0;
    min-height: 88px;
    width: 100%;
    border: 2px dashed #94a3b8;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    cursor: pointer;
    background: #eff6ff;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Dropzone active. Hover or JS pe-drop-active drag-over. */
.my-files-dropzone:hover,
.my-files-dropzone.pe-drop-active {
    border-color: #2563eb;
    background: #dbeafe;
}

/* Dropzone hint text. Non-interactive centered copy. */
.my-files-dropzone_hint {
    position: relative;
    z-index: 1;
    pointer-events: none;
    text-align: center;
    font-size: 14px;
    color: #475569;
    padding: 0 8px;
}
/* === /Files dropzone === */


/* === Switch butts === */

/* Mode switch stack. Full-height column of toggle buttons. */
.my-switch-butts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
}
/* === /Switch butts === */


/* === Goback butt === */

/* Fixed back control. Anchored via --pe-goback-anchor-* from JS. */
.my-goback-butt {
    --my-goback-size: 48px;
    --my-goback-gap: 12px;
    --my-goback-y: 0px;


    position: fixed;
    top: calc(var(--pe-goback-anchor-y, 100px) + var(--my-goback-y));
    left: calc(var(--pe-goback-anchor-x, 200px) - var(--my-goback-size) - var(--my-goback-gap));
    display: grid;
    place-items: center;
    width: var(--my-goback-size);
    height: var(--my-goback-size);
    padding: 0;
    border: 1px solid #ACB5BF;
    border-radius: 50%;
    background: #F2F7FC;
    box-shadow: none;
    line-height: 0;
    color: #334155;
    cursor: pointer;
    z-index: 30;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Goback hover. Darker fill/border. */
.my-goback-butt:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
    color: #0f172a;
}

/* Goback pressed. Deeper fill. */
.my-goback-butt:active {
    background: #cbd5e1;
    border-color: #64748b;
}

/* Goback keyboard focus. Accent outline. */
.my-goback-butt:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accentColor, #337ab7) 70%, #0f172a);
    outline-offset: 2px;
}
/* === /Goback butt === */


/* === Card anal specs === */

/* Specs panel. Findings / counters card shell. */
.my-card-anal-specs {
    border: 1px solid #3f2f2260;
    border-radius: 2px;
    box-shadow: none;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    background: #77550020;
}

/* Specs title. Panel heading. */
.my-card-anal-specs_title {
    margin: 0;
    flex-shrink: 0;
    font-size: 17.6px;
    font-weight: 400;
    line-height: 1.25;
    color: #0f172a;
    letter-spacing: 0.35px;
    -webkit-text-stroke: 0.1px #000;
}

/* Specs list. Vertically spaced metric rows. */
.my-card-anal-specs_list {
    margin: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-around;
    gap: 0;
    min-height: 0;
    font-size: 13px;
    line-height: 1.25;
}

/* Specs row. Label ····· value grid. */
.my-card-anal-specs_row {
    display: grid;
    grid-template-columns: auto minmax(0.5rem, 1fr) auto;
    column-gap: 6px;
    align-items: baseline;
    flex-shrink: 0;
}

/* Specs leader dots. Fills middle track between dt and dd. */
.my-card-anal-specs_row::after {
    content: "";
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    height: 0.3em;
    min-width: 0;
    background-image: radial-gradient(
        circle closest-side,
        rgb(31 23 10 / 18%) 55%,
        transparent 56%);
    background-size: 0.24em 100%;
    background-repeat: repeat-x;
    background-position: center;
    pointer-events: none;
}

/* Specs term. Left label. */
.my-card-anal-specs_row > dt {
    margin: 0;
    min-width: 0;
    font-weight: 400;
    grid-column: 1;
    color: #1f170a;
    -webkit-text-stroke: 0.1px #1f170a;
}

/* Specs value. Right tabular count/amount. */
.my-card-anal-specs_row > dd {
    margin: 0;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    grid-column: 3;
    color: #1f170a;
    -webkit-text-stroke: 0.1px #1f170a;
}
/* === /Card anal specs === */


/* === Button refresh === */

/* Compact refresh control. Square proportion. */
.my-button-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 1px solid #94a3b8;
    border-radius: 6px;
    background: #f8fafc;
    color: #334155;
    cursor: pointer;
}

/* Refresh hover. Stronger border/fill. */
.my-button-refresh:hover {
    border-color: #64748b;
    background: #e2e8f0;
    color: #0f172a;
}

/* Refresh mouse focus. Suppress default outline. */
.my-button-refresh:focus {
    outline: none;
}

/* Refresh keyboard focus. Visible outline. */
.my-button-refresh:focus-visible {
    outline: 2px solid #64748b;
    outline-offset: 2px;
}

/* Refresh icon SVG. Square glyph. */
.my-button-refresh_icon {
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    display: block;
}
/* === /Button refresh === */


/* =============================================================================
   [BASE_90] Utilities
   ============================================================================= */

/* Raised layer shadow. Same outer lift as .my-nav-bar. */
.my-layer-up-1 {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Recessed layer shadow. Same inset depth as .my-input-field. */
.my-layer-down-1 {
    box-shadow:
        inset 2px 3px 6px rgba(15, 23, 42, 0.15),
        inset 0 1px 1px rgba(15, 23, 42, 0.08),
        inset -1px -1px 2px rgba(255, 255, 255, 0.41);
}

/* Basic floating shadow. Same soft lift as idle .my-card-grid. */
.my-layer-basic {
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.15);
}

/* Force hide. Utility for show/hide toggles. */
.hidden {
    display: none !important;
}

/* Non-interactive text cursor. */
.cursor-default {
    cursor: default;
}

/* === Text === */

/* Page / section heading. Sans, tight. */
.my-text-header {
    margin: 0;
    font-family: var(--my-font-sans);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.35px;
    color: #0f172a;
}

/* Body copy. Georgia block. */
.my-text-primary {
    margin: 0;
    font-family: var(--my-font-serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    color: #0f172a;
}

/* Supporting UI copy. Sans, card-title scale. */
.my-text-secondary {
    margin: 0;
    font-family: var(--my-font-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0;
    color: #1e293b;
}

/* Caption / hint. Same sans as secondary, smaller. */
.my-text-minor {
    margin: 0;
    font-family: var(--my-font-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0;
    color: #475569;
}
/* === /Text === */

/* === Validation text === */
/* Shades from --my-validation-text-color. Pair .my-validation-text-base with -bad / -good. */

.my-validation-text-base {
    --my-validation-text-color: #64748b;
    --my-validation-text-bg: color-mix(in srgb, var(--my-validation-text-color) 8%, white);
    --my-validation-text-border: color-mix(in srgb, var(--my-validation-text-color) 25%, white);
    --my-validation-text-flash: color-mix(in srgb, var(--my-validation-text-color) 55%, white);

    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 10px 0 0;
    padding: 8px 10px;
    border: 1px solid var(--my-validation-text-border);
    border-radius: 0;
    background: var(--my-validation-text-bg);
    color: var(--my-validation-text-color);
    font-weight: 600;
    text-align: center;
    white-space: pre-line;
    word-break: break-word;
    animation: my-validation-text-appear 0.75s ease forwards;
}

.my-validation-text-bad {
    --my-validation-text-color: #991b1b;
}

.my-validation-text-good {
    --my-validation-text-color: #166534;
}

.my-validation-text-base:empty {
    display: none;
}

@keyframes my-validation-text-appear {
    from {
        background-color: var(--my-validation-text-border);
        border-color: var(--my-validation-text-flash);
    }

    to {
        background-color: var(--my-validation-text-bg);
        border-color: var(--my-validation-text-border);
    }
}
/* === /Validation text === */

/* No text selection. Drop targets / chrome controls. */
.drop-box,
.no-selection {
    user-select: none;
}

.my-redist__template {
    position: absolute;
    width: 100%;
    place-self: center;
    text-align: center;

    background: black;
    font-size: 40px;
    font-family: 'Times New Roman';
    font-weight: 800;
    letter-spacing: 0.2px;
    color: red;
}

.my-redist {
    display: none;
}