/* ===== CSS VARIABLES & THEME ===== */

/* automatic/manual light mode */
:root,
:root[data-color-scheme="light"] {
    --accent: var(--r-blue);
    --r-red: rgb(255, 56, 60);
    --r-orange: rgb(255, 141, 40);
    --r-yellow: rgb(255, 204, 0);
    --r-green: rgb(52, 199, 89);
    --r-mint: rgb(0, 200, 179);
    --r-teal: rgb(0, 195, 208);
    --r-cyan: rgb(0, 192, 232);
    --r-blue: rgb(0, 136, 255);
    --r-indigo: rgb(97, 85, 245);
    --r-purple: rgb(203, 48, 224);
    --r-pink: rgb(255, 45, 85);
    --r-brown: rgb(172, 127, 94);
    --r-gray: rgb(142, 142, 147);

    --i-outer-stroke: #000;
    --i-outer-fill:   #000;
    --i-inner-stroke: #000;
    --i-inner-fill:   #000;

    /* ===== System Gray backgrounds (reversed order) ===== */
    --bg: rgb(242, 242, 247);          /* systemGray6 */
    --bg-secondary: rgb(229, 229, 234);/* systemGray5 */
    --bg-tertiary: rgb(209, 209, 214); /* systemGray4 */
    --bg-quaternary: rgb(199, 199, 204);/* systemGray3 */
    --bg-quinary: rgb(174, 174, 178);  /* systemGray2 */

    --bg-secondary-blur: rgba(185, 185, 185, 0.25);

    --divider: rgba(0, 0, 0, 0.08);
    --border: var(--bg-quaternary);

    --dropdown-hover-bg: rgba(60, 60, 67, 0.1);
    --dropdown-active-bg: color-mix(in srgb, var(--dropdown-hover-bg) 95%, black);
    --dropdown-hover-fg: var(--fg);
    --segmented-active-bg: color-mix(in srgb, var(--bg) 25%, white);


    --fg-lm: #1C1C1E;
    --fg-dm: #F2F2F2;

    --fg-inverse: var(--fg-dm);

    --fg: var(--fg-lm);
    --fg-secondary: #737373;
    --fg-tertiary: #bfbfbf;

    --anim-duration: 0.2s;
    --anim-easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* Semantic accent color scale */
    --accent-secondary: color-mix(in srgb, var(--accent) 8%, white);
    --accent-tertiary: color-mix(in srgb, var(--accent) 12%, white);
    --accent-quaternary: color-mix(in srgb, var(--accent) 16%, white);
    --accent-quinary: color-mix(in srgb, var(--accent) 20%, white);

    /* Control defaults */
    --ctrl-padding: 0.5rem 1rem;
    --ctrl-gap: 0.25rem;
    --field-gap: 1rem;

    --font-family: system-ui, Roboto, Helvetica, sans-serif;
    --heading-font-family: var(--font-family);
    --font-weight: 400;

    /* Font sizing */
    --font-size: 1rem;
    --code-font-size: 0.875rem;
    --code-block-font-size: 0.875rem;

    /* Heading sizes */
    --h1-font-size: 2.5rem;
    --h2-font-size: 2rem;
    --h3-font-size: 1.75rem;
    --h4-font-size: 1.5rem;
    --h5-font-size: 1.25rem;
    --h6-font-size: 1rem;

    /* Line heights */
    --body-line-height: 1.5;
    --heading-line-height: 1.2;

    /* Heading weights */
    --heading-font-weight: 600;
}

/* manual dark mode */
[data-color-scheme="dark"] {
    --r-red: rgb(255, 66, 69);
    --r-orange: rgb(255, 146, 48);
    --r-yellow: rgb(255, 214, 0);
    --r-green: rgb(48, 209, 88);
    --r-mint: rgb(0, 218, 195);
    --r-teal: rgb(0, 210, 224);
    --r-cyan: rgb(60, 211, 254);
    --r-blue: rgb(0, 145, 255);
    --r-indigo: rgb(109, 124, 255);
    --r-purple: rgb(219, 52, 242);
    --r-pink: rgb(255, 55, 95);
    --r-brown: rgb(183, 138, 102);
    --r-gray: rgb(142, 142, 147);

    /* ===== System Gray backgrounds (reversed order) ===== */
    --bg: rgb(28, 28, 30);             /* systemGray6 (dark) */
    --bg-secondary: rgb(44, 44, 46);   /* systemGray5 (dark) */
    --bg-tertiary: rgb(58, 58, 60);    /* systemGray4 (dark) */
    --bg-quaternary: rgb(72, 72, 74);  /* systemGray3 (dark) */
    --bg-quinary: rgb(99, 99, 102);    /* systemGray2 (dark) */

    --bg-secondary-blur: rgba(90, 90, 90, 0.25);
    --dropdown-active-bg: color-mix(in srgb, var(--dropdown-hover-bg) 95%, white);

    --divider: rgba(255, 255, 255, 0.12);
    --border: var(--bg-quaternary);
    --segmented-active-bg: var(--bg);
    --dropdown-hover-bg: rgba(255, 255, 255, 0.08);

    --fg-inverse: var(--fg-lm);
    --fg: var(--fg-dm);
    --fg-secondary: #8c8c8c;
    --fg-tertiary: #404040;

    /* Semantic accent color scale - brighter for dark mode */
    --accent-secondary: color-mix(in srgb, var(--accent) 15%, #18181b);
    --accent-tertiary: color-mix(in srgb, var(--accent) 22%, #18181b);
    --accent-quaternary: color-mix(in srgb, var(--accent) 28%, #18181b);
    --accent-quinary: color-mix(in srgb, var(--accent) 35%, #18181b);
}

@supports (color: color(display-p3 1 1 1)) {
  :root,
  :root[data-color-scheme="light"] {
    --r-red: color(display-p3 1 0.219 0.235);
    --r-orange: color(display-p3 1 0.57 0.18);
    --r-yellow: color(display-p3 1 0.84 0);
    --r-green: color(display-p3 0.3 0.78 0.35);
    --r-mint: color(display-p3 0 0.78 0.7);
    --r-teal: color(display-p3 0 0.77 0.81);
    --r-cyan: color(display-p3 0 0.74 0.9);
    --r-blue: color(display-p3 0 0.53 1);
    --r-indigo: color(display-p3 0.38 0.34 0.97);
    --r-purple: color(display-p3 0.85 0.23 0.93);
    --r-pink: color(display-p3 1 0.26 0.45);
    --r-brown: color(display-p3 0.68 0.5 0.37);
    --r-gray: color(display-p3 0.56 0.56 0.58);

    --accent-secondary: color-mix(in display-p3, var(--accent) 8%, white);
    --accent-tertiary: color-mix(in display-p3, var(--accent) 12%, white);
    --accent-quaternary: color-mix(in display-p3, var(--accent) 16%, white);
    --accent-quinary: color-mix(in display-p3, var(--accent) 20%, white);
  }

  :root[data-color-scheme="dark"] {
    --r-red: color(display-p3 1 0.27 0.27);
    --r-orange: color(display-p3 1 0.59 0.21);
    --r-yellow: color(display-p3 1 0.84 0.1);
    --r-green: color(display-p3 0.26 0.82 0.38);
    --r-mint: color(display-p3 0 0.85 0.76);
    --r-teal: color(display-p3 0 0.82 0.88);
    --r-cyan: color(display-p3 0.3 0.84 1);
    --r-blue: color(display-p3 0 0.56 1);
    --r-indigo: color(display-p3 0.44 0.48 1);
    --r-purple: color(display-p3 0.9 0.24 0.95);
    --r-pink: color(display-p3 1 0.28 0.47);
    --r-brown: color(display-p3 0.72 0.54 0.4);
    --r-gray: color(display-p3 0.56 0.56 0.58);

    --accent-secondary: color-mix(in display-p3, var(--accent) 15%, #18181b);
    --accent-tertiary: color-mix(in display-p3, var(--accent) 22%, #18181b);
    --accent-quaternary: color-mix(in display-p3, var(--accent) 28%, #18181b);
    --accent-quinary: color-mix(in display-p3, var(--accent) 35%, #18181b);
  }
}

/* Allow accent variants to regenerate when --accent is overridden */
.menu,
.btn,
button.btn {
    --accent-secondary: color-mix(in srgb, var(--accent) 8%, white);
    --accent-tertiary: color-mix(in srgb, var(--accent) 12%, white);
    --accent-quaternary: color-mix(in srgb, var(--accent) 16%, white);
    --accent-quinary: color-mix(in srgb, var(--accent) 20%, white);
}

[data-color-scheme="dark"] .menu,
[data-color-scheme="dark"] .btn,
[data-color-scheme="dark"] button.btn {
    --accent-secondary: color-mix(in srgb, var(--accent) 15%, #18181b);
    --accent-tertiary: color-mix(in srgb, var(--accent) 22%, #18181b);
    --accent-quaternary: color-mix(in srgb, var(--accent) 28%, #18181b);
    --accent-quinary: color-mix(in srgb, var(--accent) 35%, #18181b);
}

/* =========================================================
 DROPDOWN COLOR TOKENS — Global + Auto-Synced
 ========================================================= */

/* Define mode-dependent variables globally */
:root {
    --dropdown-hover-base: rgba(60, 60, 67, 0.1);
    --dropdown-active-base: black;
}

html[data-color-scheme="dark"] {
    --dropdown-hover-base: rgba(255, 255, 255, 0.08);
    --dropdown-active-base: white;
}

/* Use them locally — this part always recomputes */
.menu-dropdown {
    --dropdown-hover-bg: var(--dropdown-hover-base);
    --dropdown-active-bg: color-mix(in srgb, var(--dropdown-hover-bg) 95%, var(--dropdown-active-base));
}

/* =========================================================
   LIGHT-MODE ONLY: subtle darkening when accent = gray
   ========================================================= */

:root[data-color-scheme="light"]
:is(.menu, .btn, button.btn)[style*="--accent: var(--r-gray)"],
:root:not([data-color-scheme="dark"])
:is(.menu, .btn, button.btn)[style*="--accent: var(--r-gray)"] {
    --accent-secondary:  color-mix(in srgb, var(--r-gray) 20%, white);
    --accent-tertiary:   color-mix(in srgb, var(--r-gray) 24%, white);
    --accent-quaternary: color-mix(in srgb, var(--r-gray) 28%, white);
    --accent-quinary:    color-mix(in srgb, var(--r-gray) 32%, white);
}


/* ===== CSS RESET & BASE STYLES ===== */

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    scrollbar-gutter: stable both-edges;
}

body {
    color: var(--fg);
    background-color: var(--bg);
    padding-top: var(--reserved-space-top, 0);
    padding-bottom: var(--reserved-space-bottom, 0);

    font-size: var(--font-size);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    -webkit-text-size-adjust: none;
    hanging-punctuation: first allow-end last;
}

html, body, main {
    height: 100%;
}

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* 2. Remove default margin and padding */
* {
    margin: 0;
}

i {
    all: unset; /* Remove all inherited/user agent styles */
    color: inherit;
    display: inline-block; /* Give it a predictable box model */
    font-style: normal; /* Remove italic default */
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
    font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
    text-wrap: pretty;
    line-height: var(--body-line-height);
    margin-bottom: var(--paragraph-margin-bottom);
    margin-top: var(--paragraph-margin-top);
    margin-right: var(--paragraph-margin-right);
    margin-left: var(--paragraph-margin-left);
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    font-family: var(--heading-font-family, var(--font-family));
    line-height: var(--heading-line-height);
}

h1 {
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height, var(--headings-line-height, normal));
}

h2 {
    font-size: var(--h2-font-size);
    line-height: var(--h2-line-height, var(--headings-line-height, normal));
}

h3 {
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height, var(--headings-line-height, normal));
}

h4 {
    font-size: var(--h4-font-size);
    line-height: var(--h4-line-height, var(--headings-line-height, normal));
}

h5 {
    font-size: var(--h5-font-size);
    line-height: var(--h5-line-height, var(--headings-line-height, normal));
}

h6 {
    font-size: var(--h6-font-size);
    line-height: var(--h6-line-height, var(--headings-line-height, normal));
}

a {
    color: var(--accent);
    text-decoration: none;
}

:where(
  p, span, em, strong, a, li,
  h1, h2, h3, h4, h5, h6,
  blockquote, figcaption, small
) {
  color: var(--fg, currentColor);
}

/* Code blocks */
code, pre {
    font-size: var(--code-block-font-size, 1em);
    line-height: var(--codeblock-line-height, normal);
    margin: var(--paragraph-margin, 0rem);
    font-weight: inherit;
    font-family: var(--monospace-font-family, ui-monospace, monospace);
}

/* Inline code */
code:not(pre code, pre > code) {
    margin: 0;
}

:focus:not(:focus-visible) {
    outline: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

ul, ol {
    padding: 0;
}

/* Fine-tune Prism’s line highlight alignment so text and line numbers look centered. */
.line-highlight,
.line-numbers-rows > span:before {
    transform: translateY(var(--code-line-highlight-offset, 0));
}

@media (prefers-reduced-motion: no-preference) {
    * {
        transition-property: transform, opacity, background-color;
        transition-duration: var(--anim-duration, 0.25s);
        transition-timing-function: var(--anim-easing, cubic-bezier(0.25, 0.46, 0.45, 0.94));
        transition-behavior: allow-discrete;
    }
}

/* === Backdrop base === */
/* Backdrop */
dialog::backdrop {
    background: oklch(0% 0 0 / 0.3);
}

/* Fade behaviors */
dialog,
[popover],
dialog::backdrop {
    opacity: 0;
    transition:
        opacity var(--anim-duration, 0.25s) var(--anim-easing, ease),
        display var(--anim-duration, 0.25s) allow-discrete,
        overlay var(--anim-duration, 0.25s) allow-discrete;
}

/* When open */
dialog[open],
:popover-open,
dialog[open]::backdrop {
    opacity: 1;
}

/* Entry start */
@starting-style {
    dialog[open],
    :popover-open,
    dialog[open]::backdrop {
        opacity: 0;
    }
}


/* =========================================================
 BUTTON SYSTEM (VARIABLE-DRIVEN & NESTING-SAFE)
 ========================================================= */

/* --- Reset --- */
button {
    appearance: none;
    background: transparent;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    --btn-hover-bg: var(--accent-quaternary);
    --btn-active-bg: var(--accent-quinary);
    --btn-hover-border: 1px solid var(--accent-quaternary);
    --btn-active-border: 1px solid var(--accent-quinary);
}

/* --- Base Button --- */
button.btn {
    font-weight: 500;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);

    background-color: var(--btn-bg, var(--accent-tertiary));
    color: var(--btn-fg, var(--accent));
    border: var(--btn-border, 1px solid transparent);
    border-radius: var(--btn-radius, 0.375rem);
    corner-shape: var(--btn-corner-shape, round);

    font-size: var(--ctrl-font-size, 0.875rem);
    padding: var(--ctrl-padding, 0.5rem 1rem);
}

button.btn > * + * {
    margin-left: var(--ctrl-gap, 0.5rem);
}

/* =========================================================
 TOKENS — VARIANT CONTAINERS
 ========================================================= */

/* --- Plain --- */
.btn-plain {
    --btn-bg: transparent;
    --btn-fg: var(--fg);
    --btn-border: none;
    --btn-hover-bg: transparent;
    --btn-active-bg: transparent;
}

/* --- Filled / Prominent --- */
.btn-prominent,
.btn-prominent .btn,
.btn-prominent .search-button {
    --btn-bg: var(--accent);
    --btn-fg: var(--fg-dm);
    --btn-border: none;
    --btn-hover-bg: color-mix(in srgb, var(--accent) 92%, black);
    --btn-active-bg: color-mix(in srgb, var(--accent) 85%, black);
}

.btn-filled,
.btn-filled .btn,
.btn-filled .search-button {
    --btn-bg: var(--accent-tertiary);
    --btn-fg: var(--accent);
    --btn-border: 1px solid var(--accent-tertiary);
    --btn-hover-bg: var(--accent-quaternary);
    --btn-active-bg: var(--accent-quinary);
    --btn-hover-border: 1px solid var(--accent-quaternary);
    --btn-active-border: 1px solid var(--accent-quinary);
}

/* --- Bordered --- */
.btn-bordered,
.btn-bordered .btn,
.btn-bordered .search-button {
    --btn-bg: transparent;
    --btn-fg: var(--accent);
    --btn-border: 1px solid var(--accent);
    --btn-hover-bg: var(--accent-tertiary);
    --btn-active-bg: var(--accent-quaternary);
    --btn-hover-border: 1px solid color-mix(in srgb, var(--accent) 85%, black);
    --btn-active-border: 1px solid color-mix(in srgb, var(--accent) 70%, black);
}

/* --- Borderless --- */
.btn-borderless,
.btn-borderless .btn,
.btn-borderless .search-button {
    --btn-bg: transparent;
    --btn-fg: var(--accent);
    --btn-border: none;
    --btn-hover-bg: var(--accent-tertiary);
    --btn-active-bg: var(--accent-quaternary);
}

/* =========================================================
 SHAPE & SIZE TOKENS
 ========================================================= */

/* Shapes */
.ctrl-capsule {
    --btn-radius: 9999px;
    --btn-corner-shape: round;
}

.ctrl-rounded {
    --btn-radius: 0.375rem;
    --btn-corner-shape: superellipse(1.25);
}

.ctrl-rect {
    --btn-radius: 0;
    --btn-corner-shape: rect;
}

.ctrl-circle {
    --btn-radius: 50%;
    --btn-corner-shape: round;
}

/* Flexible width */
.btn-flexible,
.btn-flexible button.btn {
    width: 100%;
}

/* =========================================================
 INTERACTION STATES
 ========================================================= */

/* Hover / Active — variable-based */
button.btn:hover,
button.btn:focus-visible {
    background-color: var(--btn-hover-bg, var(--accent-tertiary));
    border: var(--btn-hover-border, var(--btn-border 1px));
}

button.btn:active {
    background-color: var(--btn-active-bg, var(--accent-quaternary));
    border: var(--btn-active-border, var(--btn-border 1px));
}

/* Disabled */
button.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Icon-only */
button.btn.btn-icon {
    padding: 0.5rem;
    aspect-ratio: 1;
}

/* =========================================================
 DARK MODE ADJUSTMENTS
 ========================================================= */

[data-color-scheme="dark"] .btn-prominent {
    --btn-hover-bg: color-mix(in srgb, var(--accent) 92%, white);
    --btn-active-bg: color-mix(in srgb, var(--accent) 85%, white);
}


/* =========================================================
 CONTROL SIZES
 ========================================================= */

.ctrl-xs {
    --ctrl-padding: 0.25rem 0.5rem;
    --ctrl-font-size: 0.75rem;
    --ctrl-line-height: 1rem;
    --ctrl-gap: 0.25rem;
}

.ctrl-sm {
    --ctrl-padding: 0.375rem 0.75rem;
    --ctrl-font-size: 0.8125rem;
    --ctrl-line-height: 1.125rem;
    --ctrl-gap: 0.375rem;
}

.ctrl-md {
    --ctrl-padding: 0.5rem 1rem;
    --ctrl-font-size: 0.875rem;
    --ctrl-line-height: 1.25rem;
    --ctrl-gap: 0.5rem;
}

.ctrl-lg {
    --ctrl-padding: 0.625rem 1.25rem;
    --ctrl-font-size: 0.9375rem;
    --ctrl-line-height: 1.375rem;
    --ctrl-gap: 0.5rem;
}

.ctrl-xl {
    --ctrl-padding: 0.75rem 1.5rem;
    --ctrl-font-size: 1rem;
    --ctrl-line-height: 1.5rem;
    --ctrl-gap: 0.5rem;
}

/* =========================================================
 CONTROL GROUP
 ========================================================= */
.ctrl-group {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
}

/* =========================================================
 INTERACTION STATES — MENU-DROPDOWN
 ========================================================= */

/* Remove hover background on entire group */
.menu-dropdown .ctrl-group:hover {
    background: transparent;
}

/* Focus-visible accessibility consistency */
.menu-dropdown .ctrl-group button.btn:focus-visible {
    outline: 2px solid AccentColor;
    position: relative;
    z-index: 2;
}

/* ===== CONTROL GROUP DIVIDER ===== */
.ctrl-group hr {
    border: none;
    border-left: 1px solid var(--divider);
    margin: 0 0.5rem;
    width: 0;          /* prevents background fill */
    height: auto;      /* stretch vertically */
    align-self: stretch;
}

/* =========================================================
 CONTROL GROUP — BORDER MERGE LOGIC (FINAL CLEAN VERSION)
 ========================================================= */

/* Reset stray borders on wrapper menus */
.ctrl-group > .menu:not(.menu-dropdown) {
    border: none;
    /*  border-radius: 0 !important;*/
}

/* Base: non-first direct children lose left border */
.ctrl-group.btn-bordered > *:not(:first-child) {
    border-left: none;
}

/* Regular menu (single btn-menu) */
.ctrl-group.btn-bordered > .menu:not(:first-child) > .btn-menu {
    border-left: none;
}
.ctrl-group.btn-bordered > .menu:not(:last-child) > .btn-menu {
    border-right: 1px solid var(--accent);
}

/* Menu-group (multi-button) */
.ctrl-group.btn-bordered > .menu:not(:first-child) > .menu-group > *:first-child {
    border-left: none;
}
.ctrl-group.btn-bordered > .menu:not(:last-child) > .menu-group > *:last-child {
    border-right: 1px solid var(--accent);
}
/* Middle menu-groups */
.ctrl-group.btn-bordered > .menu:not(:first-child):not(:last-child) > .menu-group > *:first-child {
    border-left: none;
}
.ctrl-group.btn-bordered > .menu:not(:first-child):not(:last-child) > .menu-group > *:last-child {
    border-right: 1px solid var(--accent);
}

/* Merge continuity between menus and controls */
.ctrl-group.btn-bordered > .menu + * {
    border-left: none;
}


/* =========================================================
 CONTROL GROUP — CORNER RADIUS SYSTEM (FINAL CLEAN VERSION)
 ========================================================= */

/*/* Remove rounding between internal siblings */*/
.ctrl-group:not(.menu-dropdown *) > :not(:first-child):not(:last-child) {
    border-radius: 0;
}

/* Base flattening for single buttons and btn-menus */
.ctrl-group > *:first-child,
.ctrl-group > .menu:first-child > .btn-menu {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.ctrl-group > *:last-child,
.ctrl-group > .menu:last-child > .btn-menu {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Menu-group (multi-button menus) */
.ctrl-group > .menu:first-child > .menu-group > *:last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.ctrl-group > .menu:last-child > .menu-group > *:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* =========================================================
 BASE INPUT RESET
 ========================================================= */
input {
    border: 0;
    border-radius: 0.375rem;
    padding: 0 0.75rem;
    box-sizing: border-box;
}

/* =========================================================
 SHAPE UTILITIES — UNIFIED (BUTTONS + INPUTS + SEARCH)
 ========================================================= */

/* Capsule */
.ctrl-capsule,
.ctrl-capsule input,
.ctrl-capsule button {
    --btn-corner-radius: 9999px;
    --btn-corner-shape: round;
    border-radius: var(--btn-corner-radius);
    corner-shape: var(--btn-corner-shape);
}

/* Rounded Rectangle (default) */
.ctrl-rounded,
.ctrl-rounded input,
.ctrl-rounded button {
    --btn-corner-radius: 0.375rem;
    --btn-corner-shape: superellipse(1.25);
    border-radius: var(--btn-corner-radius);
    corner-shape: var(--btn-corner-shape);
}

/* Square */
.ctrl-rect,
.ctrl-rect input,
.ctrl-rect button {
    --btn-corner-radius: 0;
    --btn-corner-shape: rect;
    border-radius: var(--btn-corner-radius);
    corner-shape: var(--btn-corner-shape);
}

/* Flexible width */
.btn-flexible,
.btn-flexible input,
.btn-flexible button {
    width: 100%;
}

/* =========================================================
 SEARCH FORM SYSTEM — STABLE CLEAN VERSION (organized)
 ========================================================= */

/* --- Base Wrapper --- */
.search-form {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 0 0 auto;
    min-width: 0;
    gap: var(--search-gap, 0.5rem);
}

/* Prevent stretch inside navbars */
.nav-inner > li:has(.search-form) {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

/* --- Input + Button Layout --- */
.search-form input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid transparent;
    border-radius: var(--btn-corner-radius, 0.375rem);
    box-sizing: border-box;
}

.search-form button {
    flex: 0 0 auto;
    white-space: nowrap;
    border-radius: var(--btn-corner-radius, 0.375rem);
}

/* --- Normalize Layout --- */
.search-form,
.search-form * {
    margin: 0;
    border-spacing: 0;
    gap: 0.5rem;
}

/* --- Base Border Reset (scoped) --- */
/* Only flatten when inside joined layouts */
.ctrl-group .search-input,
.ctrl-group .search-button,
.search-form.search-spacing-none .search-input,
.search-form.search-spacing-none .search-button {
    border-radius: 0;
}

/* Otherwise, allow normal inherited radius */
.search-input,
.search-button {
    border-radius: var(--btn-corner-radius, 0.375rem);
    box-sizing: border-box;
}

/* --- Input: rounded left only --- */
.search-input {
    border-top-left-radius: var(--btn-corner-radius, 0.375rem) !important;
    border-bottom-left-radius: var(--btn-corner-radius, 0.375rem) !important;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* --- Button: rounded right only --- */
.search-button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--btn-corner-radius, 0.375rem);
    border-bottom-right-radius: var(--btn-corner-radius, 0.375rem);
}

/* If inside a .btn-bordered parent, force visual continuity */
.btn-bordered .search-button {
    border: 1px solid var(--accent, currentColor);
    box-sizing: border-box;
}

/* When no spacing: join with input */
.search-button {
}

/* --- Control sizing / alignment --- */
.search-form input,
.search-form button {
    font-size: var(--ctrl-font-size, 0.875rem);
    line-height: var(--ctrl-line-height, 1.25rem);
    padding: var(--ctrl-padding, 0.5rem 1rem);
    height: auto;
}

/* Keep visual alignment consistent with .btn and .ctrl-group */
.search-form {
    align-items: center; /* instead of stretch */
}

/* Fix baseline alignment issue inside .ctrl-group */
.ctrl-group .search-form {
    display: flex;
    gap: 0;
    align-items: center;
}

/* Input shouldn’t grow taller than its siblings */
.search-form input {
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
}

/* --- Button theming --- */
.search-form {
    --btn-bg: var(--accent);
    --btn-fg: white;
    --btn-border: none;
    --btn-hover-bg: color-mix(in srgb, var(--accent) 92%, black);
    --btn-active-bg: color-mix(in srgb, var(--accent) 85%, black);
}

.search-form .search-button {
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: var(--btn-border);
}

/* Normalize ctrl-group layout inside navbars */
.navbar .ctrl-group,
.navbar .ctrl-group * {
    align-items: center;
    vertical-align: middle;
    line-height: normal;
    height: auto;
}

/* Prevent flex stretching in nav-inner context */
.nav-inner > li > .ctrl-group {
    align-self: center;
}

/* =========================================================
 CONTROL GROUP — SHAPE ON OUTER CORNERS (buttons + inputs)
 Apply shape class to .ctrl-group (circle intentionally ignored)
 ========================================================= */

/* Radius tokens from shape utilities */
.ctrl-group.ctrl-capsule { --group-radius: 9999px; }
.ctrl-group.ctrl-rounded { --group-radius: 0.375rem; } /* default */
.ctrl-group.ctrl-rect    { --group-radius: 0; }

/* --- Direct children that are controls --- */
.ctrl-group:is(.ctrl-capsule, .ctrl-rounded, .ctrl-rect)
> :is(button, .btn, input, .search-input, .search-button):first-child {
    border-top-left-radius: var(--group-radius) !important;
    border-bottom-left-radius: var(--group-radius) !important;
}
.ctrl-group:is(.ctrl-capsule, .ctrl-rounded, .ctrl-rect)
> :is(button, .btn, input, .search-input, .search-button):last-child {
    border-top-right-radius: var(--group-radius) !important;
    border-bottom-right-radius: var(--group-radius) !important;
}

/* --- Menu wrappers ------------------------------------------------------ */
/* Single-button menu */
.ctrl-group:is(.ctrl-capsule, .ctrl-rounded, .ctrl-rect)
> .menu:first-child > .btn-menu {
    border-top-left-radius: var(--group-radius) !important;
    border-bottom-left-radius: var(--group-radius) !important;
}
.ctrl-group:is(.ctrl-capsule, .ctrl-rounded, .ctrl-rect)
> .menu:last-child > .btn-menu {
    border-top-right-radius: var(--group-radius) !important;
    border-bottom-right-radius: var(--group-radius) !important;
}

/* Multi-button menu-group */
.ctrl-group:is(.ctrl-capsule, .ctrl-rounded, .ctrl-rect)
> .menu:first-child > .menu-group > *:first-child {
    border-top-left-radius: var(--group-radius) !important;
    border-bottom-left-radius: var(--group-radius) !important;
}
.ctrl-group:is(.ctrl-capsule, .ctrl-rounded, .ctrl-rect)
> .menu:last-child > .menu-group > *:last-child {
    border-top-right-radius: var(--group-radius) !important;
    border-bottom-right-radius: var(--group-radius) !important;
}

/* --- Search-form wrappers ---------------------------------------------- */
/* Left outer corner lives on input */
.ctrl-group:is(.ctrl-capsule, .ctrl-rounded, .ctrl-rect)
> .search-form:first-child :is(.search-input, input):first-child {
    border-top-left-radius: var(--group-radius) !important;
    border-bottom-left-radius: var(--group-radius) !important;
}
/* Right outer corner lives on button */
.ctrl-group:is(.ctrl-capsule, .ctrl-rounded, .ctrl-rect)
> .search-form:last-child :is(.search-button, button):last-child {
    border-top-right-radius: var(--group-radius) !important;
    border-bottom-right-radius: var(--group-radius) !important;
}

/* =========================================================
 CTRL-GROUP — FORCE INNER CORNERS FLAT (menus + inputs)
 ========================================================= */

/* Generic flattening */
.ctrl-group > *:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.ctrl-group > *:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* --- Menu wrappers ------------------------------------------------------ */
/* Single-button menu (.btn-menu) */
.ctrl-group > .menu:not(:last-child) > .btn-menu {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.ctrl-group > .menu:not(:first-child) > .btn-menu {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Multi-button menu (.menu-group) */
.ctrl-group > .menu:not(:last-child) > .menu-group > *:last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.ctrl-group > .menu:not(:first-child) > .menu-group > *:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* --- Search-form wrappers ---------------------------------------------- */
/* Flatten right edge when search-form not last */
.ctrl-group > .search-form:not(:last-child)
:is(.search-button, button):last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
/* Flatten left edge when search-form not first */
.ctrl-group > .search-form:not(:first-child)
:is(.search-input, input):first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* =========================================================
 SEARCH BUTTON — CORNER RADIUS INHERITANCE FIX
 ========================================================= */

/* Default rounded rectangle */
.search-button {
    --btn-corner-radius: 0.375rem;
    --btn-corner-shape: superellipse(1.25);
    border-radius: var(--btn-corner-radius);
    corner-shape: var(--btn-corner-shape);
}

/* Capsule */
.search-form.ctrl-capsule .search-button {
    --btn-corner-radius: 9999px;
    --btn-corner-shape: round;
    border-radius: var(--btn-corner-radius);
    corner-shape: var(--btn-corner-shape);
}

/* =========================================================
 SEARCH BUTTON — CORNER RADIUS (CONFIRMED SELECTOR)
 ========================================================= */

.search-form.ctrl-capsule button.search-button.btn {
    border-radius: var(--btn-corner-radius);
    corner-shape: var(--btn-corner-shape);
}

.search-form.ctrl-rounded .search-button {
    --btn-corner-radius: 0.375rem;
    --btn-corner-shape: superellipse(1.25);
    border-radius: var(--btn-corner-radius);
    corner-shape: var(--btn-corner-shape);
}

.search-form.ctrl-rect .search-button {
    --btn-corner-radius: 0;
    --btn-corner-shape: rect;
    border-radius: var(--btn-corner-radius);
    corner-shape: var(--btn-corner-shape);
}

/* Scoped reset for buttons */
.segmented-control button.segment {
    flex: 1;
    text-align: center;
    cursor: pointer;
    padding: 8px 18px;
    border-radius: 18px;
    font-size: inherit;
    font-weight: 400;
    color: var(--fg);
    line-height: 1.2;
    transition: background 0.2s ease, color 0.2s ease; /* no font-weight transition */
    background: transparent;
    white-space: nowrap;
}

/* Segmented control container */
.segmented-control {
    font-weight: 400;
    font-size: var(--font-size);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 20px;
    padding: 2px;
    gap: 2px;
    user-select: none;

    background-color: var(--bg-secondary-blur);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);

    /* Reserve font metrics for both weights */
    font-synthesis: none;
    font-display: swap;
    text-rendering: optimizeLegibility;
}

/* Active button */
.segmented-control button.segment.active {
    background: var(--segmented-active-bg);
    --font-weight: 600;
    font-weight: var(--font-weight);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* Pressed feedback */
.segmented-control button.segment:active {
    background: var(--bg-tertiary);
}

/* Focus-visible for keyboard nav */
.segmented-control button.segment:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}


/* ===== DETAILS / SUMMARY ELEMENT STYLES ===== */

/* Base summary styles */
summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    flex-shrink: 0;
}

summary * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

summary::-webkit-details-marker,
summary::-moz-list-bullet {
    display: none;
}

/* ===== SUMMARY INDICATOR STYLES ===== */

/* Custom disclosure indicator using CSS variable */
summary::after {
    content: var(--disc-indicator, "▶");
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    transition: transform 0.2s;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== SUMMARY CONTENT STYLES ===== */

/* Base inline element styles */
summary {
    transition: all var(--anim-duration, 0.3s) var(--anim-easing, cubic-bezier(0.25, 0.46, 0.45, 0.94));
}

/* Remove focus styles for mouse interactions AND remove default outline */
summary:focus:not(:focus-visible) {
    background-color: inherit;
    color: inherit;
}


/* ------------------------------------------
   Raptor Form Layout — Leading Label Version
   ------------------------------------------ */

/* Form is a simple vertical block */
.form {
    display: block;
    height: max-content;
}

/* Vertical spacing between rows */
/* Only apply vertical spacing in non-grid forms */
.form:not(.grid.form) > * + * {
    margin-top: var(--form-spacing, 1rem);
}

/* ========== FIELD ROW ========== */

/* Only leading-label layout uses 2-column per-field grid */
.form.form-leading .field {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1rem;
    align-items: center;
}

/* Label is right-aligned and doesn't wrap */
.field-label label {
    font-size: 1rem;
    white-space: nowrap;
    text-align: right;
}

/* Input column */
.form input,
.form textarea {
    min-height: 2.5em;
    box-sizing: border-box;
    width: 100%;
}

.form button {
    min-height: 2.5em;
    box-sizing: border-box;
}

/* ========== BUTTON ALIGNMENT ========== */

/* Button aligns with input ONLY in form-leading (flattened grid) */
.form.form-leading > button {
    grid-column: 2;
    justify-self: start;
    width: auto;
}

/* ------------------------------------------
   Leading Form Style (full alignment)
   ------------------------------------------ */

.form.form-leading {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-row-gap: var(--form-spacing, 1rem);
    align-items: center;
}

/* Each .field unwraps its children into the parent grid */
.form.form-leading .field {
    display: contents;
}

/* Label column — right aligned */
.form.form-leading .field-label {
    text-align: right;
}

.form.form-leading .field-label label {
    white-space: nowrap;
    padding-right: 1rem;
}

/* Button aligns with inputs */
.form.form-leading > button {
    grid-column: 2;
    justify-self: start;
    width: auto;
}

/* ------------------------------------------
   Raptor Form Layout — Top Label Version
   ------------------------------------------ */

.form.form-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--form-spacing, 1rem);
}

/* Field block */
.form.form-top .field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-items: stretch;
    width: 100%;
    gap: 0.5rem;
}

/* Label above input */
.form.form-top .field-label label {
    font-size: 1rem;
    white-space: normal;
}

/* Button aligns left with the inputs */
.form.form-top > button {
    align-self: flex-start;
    width: auto;
}

/* ------------------------------------------
   NEW FORM GRID LAYOUT (scoped, non-breaking)
   ------------------------------------------ */

.form.grid .field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Buttons auto-align to their grid cell */
.form.grid > button {
    width: auto;
    height: 100%;
    justify-self: start;
}

/* Hide label visually and from layout */
.field-label-hidden label,
.form-hidden-labels .field-label label {
    display: none;
}

/* Collapse field grid layout */
form.grid.form-hidden-labels .field-label {
    display: none;
}

[data-color-scheme="dark"] {
    input {
        color: var(--fg);
        background-color: var(--bg-secondary);
    }
}


.form-control::placeholder {
    color: gray;
    opacity: 1;
}
/* Removing text syling from a link. */
.link-plain {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.grid {
    display: grid;
    grid-template-columns: var(--grid-template);
    gap: var(--grid-gap, 1rem);
}

.grid > .grid-item {
    min-width: 0;
    width: 100%;
}

@media (max-width: 768px) {
    .grid {
        grid-template-columns: repeat(auto-fit, minmax(var(--adaptive-min), 1fr));
    }
}

.full-width-grid-item {
    grid-column: 1 / -1;
}

.grid-spacer {
    min-height: 0;
    background: transparent;
}

@media (max-width: 768px) {
    .grid-spacer {
        display: none;
    }
}


.icon .fill-primary {
    fill: var(--i-fill-primary);
}

.icon .fill-secondary {
    fill: var(--i-fill-secondary);
}

.icon .stroke-primary {
    stroke: var(--i-stroke-primary);
}

.icon .stroke-secondary {
    stroke: var(--i-stroke-secondary);
}

.icon svg {
    width: 1em;
    height: 1em;
    overflow: visible;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: calc(var(--font-weight, 400) / 100 * 1px);
    paint-order: stroke fill;
}

.icon {
    display: inline-flex;
    align-items: center;
    vertical-align: -0.15em;
    justify-content: center;
    font-size: var(--font-size, 1em);
    font-weight: var(--font-weight, inherit);
    --i-fill-secondary: none;
    --i-stroke-primary: var(--fg);
    --i-stroke-secondary: var(--fg);
}

.icon svg * {
    fill: none;
    stroke: var(--i-stroke-primary, var(--fg));
}

/* OUTLINE MODE */
.icon-outline {
    --i-fill-secondary: none;
    --i-stroke-primary: var(--fg);
    --i-stroke-secondary: var(--fg);
}

/* FILLED MODE */
.icon-filled,
.btn .icon.icon-filled {
    --i-stroke-primary: var(--fg-inverse);
    --i-stroke-secondary: var(--fg);
    --i-fill-primary: var(--fg-inverse);
    --i-fill-secondary: var(--fg);
}

/* TWO-TONE */
.icon-two-tone {
    --i-stroke-primary: var(--accent);
    --i-stroke-secondary: var(--accent);
    --i-fill-primary: color-mix(in srgb, var(--accent) 25%, transparent);
    --i-fill-secondary: color-mix(in srgb, var(--accent) 25%, transparent);
}

/* MULTI COLOR */
.icon-multi-color {
    --i-stroke-primary: var(--fg-inverse);
    --i-stroke-secondary: var(--fg);
    --i-fill-primary: color-mix(in srgb, var(--accent) 35%, var(--fg-inverse));
    --i-fill-secondary: var(--accent);
}


/* Outline icons inside prominent buttons */
.btn .icon {
    --i-stroke-primary: currentcolor;
    --i-stroke-secondary: currentcolor;
    --i-fill-primary: none;
    --i-fill-secondary: none;
}

/* Filled icons inside prominent buttons */
.btn.icon-filled .icon,
.btn .icon-filled .icon {
    --i-stroke-primary: var(--bg);
    --i-stroke-secondary: var(--accent);
    --i-fill-primary: var(--bg);
    --i-fill-secondary: var(--accent);
}

.btn-filled.icon-filled .icon,
.btn-filled .icon-filled .icon {
    --i-stroke-primary: var(--accent-tertiary);
    --i-stroke-secondary: var(--accent);
    --i-fill-primary: var(--accent-tertiary);
    --i-fill-secondary: var(--accent);
}

.btn-borderless.icon-filled:hover .icon,
.btn-borderless:hover .icon-filled .icon {
    --i-stroke-primary: var(--accent-tertiary);
    --i-fill-primary: var(--accent-tertiary);
}

/* Outline icons inside prominent buttons */
.btn-prominent .icon {
    --i-stroke-primary: var(--fg-dm);
    --i-stroke-secondary: var(--fg-dm);
    --i-fill-primary: none;
    --i-fill-secondary: none;
}

/* Filled icons inside prominent buttons */
.btn-prominent.icon-filled .icon,
.btn-prominent .icon-filled .icon {
    --i-stroke-primary: var(--accent);
    --i-stroke-secondary: var(--fg-dm);
    --i-fill-primary: var(--accent);
    --i-fill-secondary: var(--fg-dm);
}

/* Outline icons inside prominent buttons */
.btn-plain .icon {
    --i-stroke-primary: var(--fg);
    --i-stroke-secondary: var(--fg);
    --i-fill-primary: none;
    --i-fill-secondary: none;
}

/* Filled icons inside prominent buttons */
.btn-plain.icon-filled .icon,
.btn-plain .icon-filled .icon {
    --i-stroke-primary: var(--bg);
    --i-stroke-secondary: var(--fg);
    --i-fill-primary: var(--bg);
    --i-fill-secondary: var(--fg);
}


/* ------------------------------------------ */
/* LIST ITEM OUTER CONTAINER (marker layer)   */
/* ------------------------------------------ */
.list li {
    display: block;
    list-style: none;
    position: relative;
    padding-left: 1.75em; /* marker space only */
    border-radius: var(--list-row-radius);
    background: var(--list-row-bg);
    border: var(--list-row-border);
    margin-bottom: var(--list-row-spacing);
}

/* Marker (offset by per-side padding) */
.list li::before {
    position: absolute;
    left: var(--list-row-padding-left, 0);
    top:  var(--list-row-padding-top, 0);
    line-height: var(--body-line-height);
}

/* ------------------------------------------ */
/* INNER ROW WRAPPER — full styling           */
/* ------------------------------------------ */
.list li > .list-row {
    padding-top: var(--list-row-padding-top);
    padding-right: var(--list-row-padding-right);
    padding-bottom: var(--list-row-padding-bottom);
    padding-left: var(--list-row-padding-left);
}

/* ------- ORDERED LISTS ------- */
.list-ordered {
    counter-reset: list-item 1;
}

.list-ordered > li {
    counter-increment: list-item;
}

.list-ordered > li::before {
    content: counter(list-item, var(--list-style-type)) ".";
}

/* ------- UNORDERED LISTS ------- */
.list-unordered > li::before {
    content: var(--list-marker-content, "•");
}

/* ------- CUSTOM MARKERS ------- */
.list-custom > li::before {
    content: var(--list-marker-content);
}

/* --------------------------------------------- */
/* TABLE ROOT                                     */
/* --------------------------------------------- */
.table {
    --table-bg: transparent;
    --table-row-bg: transparent;

    /* Stripe colors are relative to text color */
    --table-stripe-bg: color-mix(in srgb, currentColor 7.5%, transparent);
    --table-separator-color: color-mix(in srgb, currentColor 20%, transparent);

    width: 100%;
    border-collapse: collapse;
    background: var(--table-bg);
}

/* --------------------------------------------- */
/* BASE CELL STYLE                                */
/* --------------------------------------------- */
.table td {
    padding: 0.6rem 0.75rem;
}

.table td,
.table th {
    background: var(--table-row-bg);
    transition: background 0.18s ease;
}

/* Force headers left-aligned */
.table th {
    padding: 0;
    text-align: left;
}

/* Make header content fill the entire cell box */
.table th > * {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0.6rem 0.75rem;
}

/* --------------------------------------------- */
/* SEPARATORS (optional)                          */
/* --------------------------------------------- */
.table-separated td,
.table-separated th {
    border-bottom: 1px solid var(--table-separator-color);
}

/* --------------------------------------------- */
/* STRIPED ROWS — rounded only on row edges      */
/* --------------------------------------------- */
.table-striped-rows tbody tr:nth-of-type(odd) td,
.table-striped-rows tbody tr:nth-of-type(odd) th {
    background: var(--table-stripe-bg);
}

/* Rounded LEFT corners of striped rows */
.table-striped-rows tbody tr:nth-of-type(odd) td:first-child,
.table-striped-rows tbody tr:nth-of-type(odd) th:first-child {
    border-top-left-radius: var(--table-cell-radius);
    border-bottom-left-radius: var(--table-cell-radius);
}

/* Rounded RIGHT corners of striped rows */
.table-striped-rows tbody tr:nth-of-type(odd) td:last-child,
.table-striped-rows tbody tr:nth-of-type(odd) th:last-child {
    border-top-right-radius: var(--table-cell-radius);
    border-bottom-right-radius: var(--table-cell-radius);
}

/* --------------------------------------------- */
/* STRIPED COLUMNS — rounded only on table edges */
/* --------------------------------------------- */

/* Alternating column backgrounds */
.table-striped-columns td:nth-child(even),
.table-striped-columns th:nth-child(even) {
    background: var(--table-stripe-bg);
}

/* ------------------------------------------------------ */
/* CASE 1: TABLE HAS HEADER (.header-table present)       */
/* ------------------------------------------------------ */

/* Rounded TOP corners belong to the header, not the rows */
.header-table.table-striped-columns thead th:nth-child(even) {
    border-top-left-radius: var(--table-cell-radius);
    border-top-right-radius: var(--table-cell-radius);
}

/* Ensure data rows DO NOT receive top rounding */
.header-table.table-striped-columns tbody tr:first-child td:nth-child(even) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Rounded BOTTOM corners still apply to last striped cell */
.header-table.table-striped-columns tbody tr:last-child td:nth-child(even) {
    border-bottom-left-radius: var(--table-cell-radius);
    border-bottom-right-radius: var(--table-cell-radius);
}

/* ------------------------------------------------------ */
/* CASE 2: TABLE HAS NO HEADER (normal table)             */
/* ------------------------------------------------------ */

/* First striped data row should get TOP rounding */
.table-striped-columns:not(.header-table)
tbody tr:first-child td:nth-child(even) {
    border-top-left-radius: var(--table-cell-radius);
    border-top-right-radius: var(--table-cell-radius);
}

/* Last striped data row: bottom corners */
.table-striped-columns:not(.header-table)
tbody tr:last-child td:nth-child(even) {
    border-bottom-left-radius: var(--table-cell-radius);
    border-bottom-right-radius: var(--table-cell-radius);
}

/* Remove last separator */
.table-separated tbody tr:last-child td {
    border-bottom: none;
}

/* --------------------------------------------- */
/* FILTER INPUT                                   */
/* --------------------------------------------- */
.filter-field {
    width: 100%;
    min-height: 2.5em;
    box-sizing: border-box;
}


/* =========================================================
 APPLE MATERIAL (Light-Whitened / Deepened Dark)
 Polished system materials – universal, layout-safe
 ========================================================= */

/* ---------------------------------------------------------
 MATERIAL TOKENS
 --------------------------------------------------------- */
:root {
    /* ---- LIGHT ---- */
    --mat-light-ultra-thin:   rgba(245, 245, 245, 0.35);
    --mat-light-thin:         rgba(245, 245, 245, 0.45);
    --mat-light-regular:      rgba(250, 250, 250, 0.60);
    --mat-light-thick:        rgba(255, 255, 255, 0.72);
    --mat-light-ultra-thick:  rgba(255, 255, 255, 0.80);

    /* ---- DARK (deepened) ---- */
    --mat-dark-ultra-thin:    rgba(15, 15, 15, 0.55);
    --mat-dark-thin:          rgba(18, 18, 18, 0.65);
    --mat-dark-regular:       rgba(20, 20, 20, 0.72);
    --mat-dark-thick:         rgba(23, 23, 23, 0.80);
    --mat-dark-ultra-thick:   rgba(25, 25, 25, 0.88);

    /* ---- ACTIVE MATERIAL CONTEXT (defaults to light) ---- */
    --mat-current-ultra-thin:   var(--mat-light-ultra-thin);
    --mat-current-thin:         var(--mat-light-thin);
    --mat-current-regular:      var(--mat-light-regular);
    --mat-current-thick:        var(--mat-light-thick);
    --mat-current-ultra-thick:  var(--mat-light-ultra-thick);

    /* ---- FILTER SETTINGS ---- */
    --mat-saturation:  saturate(180%);
    --mat-brightness:  brightness(1.06);
    --mat-contrast:    contrast(1.0);
}

/* ---------------------------------------------------------
 DARK MODE VARIABLE SWAP (low specificity)
 --------------------------------------------------------- */

:root[data-color-scheme*="dark"] {
    --mat-current-ultra-thin:   var(--mat-dark-ultra-thin);
    --mat-current-thin:         var(--mat-dark-thin);
    --mat-current-regular:      var(--mat-dark-regular);
    --mat-current-thick:        var(--mat-dark-thick);
    --mat-current-ultra-thick:  var(--mat-dark-ultra-thick);

    --mat-saturation:  saturate(160%);
    --mat-brightness:  brightness(0.91);
    --mat-contrast:    contrast(1.06);
}

/* ---------------------------------------------------------
 MATERIAL CLASSES (single-source, low specificity)
 --------------------------------------------------------- */

.material-ultra-thin {
    background-color: var(--mat-current-ultra-thin);
    backdrop-filter: blur(8px) var(--mat-saturation) var(--mat-brightness) var(--mat-contrast);
}

.material-thin {
    background-color: var(--mat-current-thin);
    backdrop-filter: blur(12px) var(--mat-saturation) var(--mat-brightness) var(--mat-contrast);
}

.material-regular {
    background-color: var(--mat-current-regular);
    backdrop-filter: blur(20px) var(--mat-saturation) var(--mat-brightness) var(--mat-contrast);
}

.material-thick {
    background-color: var(--mat-current-thick);
    backdrop-filter: blur(35px) var(--mat-saturation) var(--mat-brightness) var(--mat-contrast);
}

.material-ultra-thick {
    background-color: var(--mat-current-ultra-thick);
    backdrop-filter: blur(50px) var(--mat-saturation) var(--mat-brightness) var(--mat-contrast);
}


/* =========================================================
 DROPDOWN MENU COMPONENT (TOKEN-COMPATIBLE)
 ========================================================= */

/* --- Base Menu Container --- */
.menu {
    position: relative;
    display: inline-block;
}

.btn-menu {
    height: 100%;
}

.menu-dropdown .btn-icon svg {
    --i-stroke-primary: currentcolor;
    --i-stroke-secondary: currentcolor;
    --i-fill-primary: none;
    --i-fill-secondary: none;
}

/* --- Dropdown Container --- */
.menu-dropdown {
    display: none;
    position: absolute;
    min-width: 200px;
    top: 100%;
    left: 0;
    list-style: none;
    padding-left: 0;
    margin: 0.25rem 0 0 0;
    z-index: 2;
    width: max-content;
    border-radius: 25px;
    border: 1px solid var(--border);
    opacity: 0;
    padding: 0.75rem 0.75rem 0.75rem 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    /* Animation + transforms */
    --alignment-transform: none;
    --anim-transform-hidden: scale(0.95);
    --anim-transform-visible: scale(1);
    --anim-transform-base: var(--anim-transform-hidden);
    --anim-transform-effective: var(--alignment-transform) var(--anim-transform-base);
    transform: var(--anim-transform-effective);
    transform-origin: var(--anim-transform-origin, top center);
    transition: opacity var(--anim-duration, 0.15s) cubic-bezier(0.4, 0, 0.2, 1),
    transform var(--anim-duration, 0.15s) cubic-bezier(0.4, 0, 0.2, 1);

    /* Button variable defaults */
    --btn-bg: transparent;
    --btn-fg: var(--fg);
    --btn-border: none;
    --btn-hover-bg: var(--accent-tertiary);
    --btn-active-bg: var(--accent-quaternary);
}

/* --- Open State --- */
.menu-dropdown[data-show="true"] {
    display: block;
    opacity: 1;
    --anim-transform-base: var(--anim-transform-visible);
    --anim-transform-effective: var(--alignment-transform) var(--anim-transform-base);
    transform: var(--anim-transform-effective);
}

/* =========================================================
 MENU ITEM STRUCTURE
 ========================================================= */

.menu-dropdown,
.menu-dropdown * {
    color: inherit;
}

/* --- Links --- */
.menu-dropdown a {
    display: block;
    text-decoration: none;
}

/*/* --- Generic Children --- */*/
.menu-dropdown > *,
.menu-dropdown li > * {
    display: block;
}

.menu-dropdown > li {
    list-style: none;
}

/* --- Divider --- */
.menu-dropdown hr {
    border: none;
    border-top: 1px solid var(--divider, color-mix(in srgb, var(--fg) 15%, transparent));
    opacity: var(--divider-opacity, 1);
    margin: 0.25rem 0; /* Add vertical spacing */
}

/* =========================================================
 MENU GROUP (SPLIT BUTTON)
 ========================================================= */

.menu-group {
    display: inline-flex;
    height: 100%;
    background: transparent;
    border: none;
}

.menu-group-action {
    flex: 1;
}

.menu-group > .menu-group-action {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    padding-right: 0.2rem ;
}

.menu-group > .menu-group-toggle {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-left: 0.2rem;
    border-left: none;
}

/* --- Focus --- */
.menu-group > button:focus-visible {
    position: relative;
    z-index: 3;
    outline: 2px solid AccentColor;
}

/* =========================================================
 ALIGNMENT VARIANTS (TOP, BOTTOM, LEADING, ETC.)
 ========================================================= */

.menu.dropdown-align-top > .menu-dropdown {
    inset: auto auto 100% 50%;
    --alignment-transform: translateX(-50%);
    margin-bottom: 0.25rem;
}

.menu.dropdown-align-bottom > .menu-dropdown {
    top: 100%;
    left: 50%;
    --alignment-transform: translateX(-50%);
    transform-origin: top center;
    margin-top: 0.25rem;
}

.menu.dropdown-align-leading > .menu-dropdown {
    inset: 50% 100% auto auto;
    --alignment-transform: translateY(-50%);
    margin-right: 0.25rem;
}

.menu.dropdown-align-trailing > .menu-dropdown {
    inset: 50% auto auto 100%;
    --alignment-transform: translateY(-50%);
    margin-left: 0.25rem;
}

.menu.dropdown-align-topLeading > .menu-dropdown {
    inset: auto auto 100% 0;
    margin-bottom: 0.25rem;
}

.menu.dropdown-align-topTrailing > .menu-dropdown {
    inset: auto 0 100% auto;
    margin-bottom: 0.25rem;
}

.menu.dropdown-align-bottomLeading > .menu-dropdown {
    inset: 100% auto auto 0;
    margin-top: 0.25rem;
}

.menu.dropdown-align-bottomTrailing > .menu-dropdown {
    inset: 100% 0 auto auto;
    margin-top: 0.25rem;
}

.menu.dropdown-align-center > .menu-dropdown {
    inset: 50% auto auto 50%;
    --alignment-transform: translate(-50%, -50%);
    margin: 0;
}

/* =========================================================
 NESTED MENUS — ALIGNMENT + CONSISTENCY
 ========================================================= */

.menu-dropdown > li > .menu {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

.menu-dropdown > li > .menu > [data-toggle="dropdown"] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    border: none !important;
    font: inherit;
    text-align: left;
    corner-shape: var(--btn-corner-shape, superellipse(1.25));
}

.menu-dropdown > li > .menu > .menu-dropdown {
    top: 0;
    left: 100%;
    margin-left: 0.25rem;
}

/* =========================================================
 SPLIT MENUS INSIDE DROPDOWN — ITEM STYLING
 ========================================================= */

.menu-dropdown .menu-group > .menu-group-action {
    flex: 3;
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    border: none;
    align-items: center;
    display: flex;
    gap: var(--ctrl-gap, 0.5rem);
}

.menu-dropdown .menu-group > .menu-group-toggle {
    flex: 1;
}

/* =========================================================
 CARET / CARROT ICONS
 ========================================================= */

.menu-dropdown .menu-group > .menu-group-toggle.btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    text-align: center;
    border-left: 1px solid var(--divider, color-mix(in srgb, var(--fg) 15%, transparent));
}

.menu:not(.carrot-up):not(.carrot-left):not(.carrot-right):not(.carrot-down)
.menu-group-toggle::after {
    content: "▾"; /* default caret */
}

/* Direction overrides */
.menu-dropdown .menu.carrot-up .menu-group-toggle::after { content: "▴"; }
.menu-dropdown .menu.carrot-down .menu-group-toggle::after { content: "▾"; }
.menu-dropdown .menu.carrot-left .menu-group-toggle::after { content: "◂"; }
.menu-dropdown .menu.carrot-right .menu-group-toggle::after { content: "▸"; }

.menu.carrot-up .menu-group-toggle::after { content: "▴"; }
.menu.carrot-down .menu-group-toggle::after { content: "▾"; }
.menu.carrot-left .menu-group-toggle::after { content: "◂"; }
.menu.carrot-right .menu-group-toggle::after { content: "▸"; }

/* =========================================================
 MISC — MARGIN ADJUSTMENTS
 ========================================================= */

.menu-dropdown[data-align="left"] {
    margin-left: 0;
    margin-right: 5px; /* gap when flipped */
}

/* =========================================================
 INTELLIGENT FOCUS RING (MATCHES HOVER CORNERS)
 ========================================================= */

.menu-dropdown :is(a, button.btn):focus-visible {
    --focus-outline-width: 2px;
    outline: 2px solid AccentColor;
    outline-offset: -2px;
    background: var(--accent-tertiary);
    position: relative;
    z-index: 2;
    border: 0;
}

/* Minimal visual style update to .menu-dropdown */

.menu-dropdown button,
.menu-dropdown li > button,
.menu-dropdown > li > a {
    display: inline-flex;
    justify-content: flex-start;
    text-align: start;
    width: 100%;

    color: inherit;
    border: none !important;
    border-radius: var(--dropdown-item-corner-radius, 9999px);
    font: inherit;
    corner-shape: var(--btn-corner-shape, superellipse(1.25));

    --btn-bg: transparent;
    --btn-fg: var(--dropdown-hover-fg);
    --btn-hover-bg: var(--dropdown-hover-bg);
    --btn-active-bg: var(--dropdown-hover-bg);
}

.menu-dropdown > li:not(:last-child) {
    margin-bottom: 0.25rem; /* adjust to taste (e.g. 0.2rem–0.4rem) */
}

.menu-dropdown li > *:not(hr) {
    padding: 0.5rem 1rem;
}

/* =========================================================
  CONTROL GROUPS INSIDE DROPDOWNS — ROUNDED RECTS
  ========================================================= */

/* Capsule corners only when menu-group is inside a menu dropdown */
.menu-dropdown .menu-group > .menu-group-action {
  border-top-left-radius: var(--dropdown-item-corner-radius, 9999px);
  border-bottom-left-radius: var(--dropdown-item-corner-radius, 9999px);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.menu-dropdown .menu-group > .menu-group-toggle {
  border-top-right-radius: var(--dropdown-item-corner-radius, 9999px);
  border-bottom-right-radius: var(--dropdown-item-corner-radius, 9999px);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Icon on the right ONLY for .menu-dropdown items NOT in .ctrl-group */
.menu-dropdown button.btn:has(> .btn-icon):not(.ctrl-group .btn),
.menu-dropdown .menu-group-action.btn:has(> .btn-icon):not(.ctrl-group .btn) {
  flex-direction: row-reverse;
  justify-content: space-between;
  gap: var(--ctrl-gap, 0.5rem);
}

.menu-dropdown .ctrl-group {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0; /* edge-to-edge alignment */
    border-radius: 0;
}

/* Control items */
.menu-dropdown .ctrl-group > * {
    flex: 1 1 auto;
    margin: 0;
    border-radius: 15px;
    padding-top: 0.75rem;   /* match dropdown link vertical rhythm */
    padding-bottom: 0.75rem;
}

/* For buttons inside control groups within dropdowns */
.menu-dropdown .ctrl-group .btn {
    display: flex;
    flex-direction: column;   /* icon above label */
    text-align: center;
    line-height: 1.2;
    border-radius: var(--dropdown-item-corner-radius, 0.5rem);
    --btn-bg: transparent;
    --btn-fg: var(--dropdown-hover-fg);
    --btn-hover-bg: var(--dropdown-hover-bg);
    --btn-active-bg: var(--dropdown-hover-bg);
}

.menu-dropdown .menu > button,
.menu-dropdown .menu > .menu-group > button {
    --btn-bg: transparent;
    --btn-fg: var(--dropdown-hover-fg);
    --btn-hover-bg: var(--dropdown-hover-bg);
    --btn-active-bg: var(--dropdown-hover-bg);
}


/* =========================================================
 INTERACTION STATES
 ========================================================= */

/* --- Hover / Active / Focus --- */
.menu-dropdown a:hover,
.menu-dropdown a:focus-visible,
.menu-dropdown button:hover,
.menu-dropdown button:focus-visible {
    background: var(--dropdown-hover-bg);
}

.menu-dropdown a:active,
.menu-dropdown button:active {
    background: var(--dropdown-active-bg);
}

.menu-dropdown a:focus {
    outline: none;
}

.menu-dropdown a:focus-visible {
    outline: 2px solid AccentColor;
}

/* --- Active (Current Page) --- */
.menu-dropdown a[data-active="true"] {
    background: var(--dropdown-hover-bg);
    font-weight: 600;
    color: var(--dropdown-hover-fg, var(--fg));
}

.menu-dropdown .ctrl-group .btn-icon {
    margin-left: 0;
    margin-bottom: 0.35em;
}

.menu-dropdown .ctrl-group .btn-label,
.menu-dropdown .btn-label {
    margin-left: 0;
}

/* Make dropdown menu header stretch across width */
.menu-group,
.menu-group .menu-group-action {
    width: 100%;
}


/* === Base Navbar === */
.navbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: max-content;
}

/* === Inner Layout === */
.navbar > .nav-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start; /* this was the missing piece */
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 1rem;
}

/* Ensure all children behave as inline flex */
.nav-inner > * {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* === Logo === */
.nav-logo {
    flex-shrink: 0;
    font-weight: bold;
    text-decoration: none;
    color: inherit;
    order: var(--nav-logo-order, 0);
}

/* Optional logo positioning */
.nav-logo-leading  { --nav-logo-order: 0; }
.nav-logo-center   { --nav-logo-order: 1; }
.nav-logo-trailing { --nav-logo-order: 2; }

/* === Navigation Items === */
.nav-items,
.nav-item {
    display: flex;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    order: var(--nav-items-order, 1);
}

/* === Toggle Button === */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.25rem;
}

/* === Alignment Helpers === */
.align-leading  { justify-content: flex-start; }
.align-center   { justify-content: center; }
.align-trailing { justify-content: flex-end; }

/* === Mobile Collapse === */
@media (max-width: 768px) {
    .nav-inner {
        flex-wrap: wrap;
    }
    .nav-toggle {
        display: block;
    }
    .nav-items {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    .nav-items[data-open="true"] {
        display: flex;
    }
}

/* === Width Modes === */
.navbar.nav-width-viewport > .nav-inner,
.nav-width-viewport .navbar > .nav-inner {
    width: 100%;
    margin-inline: 0;
    padding-inline: 1rem;
}

/* Full bleed inside constrained parents */
.nav-width-viewport {
    width: 100dvw;
    margin-inline: calc(50% - 50dvw);
}

.navbar > a,
.navbar a {
    text-decoration: none;
    color: var(--fg);
}

.nav-inner,
.nav-inner > li {
    margin: 0 !important;
    padding: 0 !important;
}

nav {
  padding: 10px 18px;
}

.nav-inner {
  display: flex;
  align-items: center;
  width: 100%;
}

/* Make <li> that contains .spacer flex + grow */
.nav-inner > li:has(.spacer) {
  flex: 1 1 auto;
  display: flex;
}

/* Let the spacer itself expand fully */
.nav-inner > li:has(.spacer) > .spacer {
  flex: 1 1 auto;
  min-width: 0;
}

header.fixed-top {
    z-index: 1000;
}

.navbar {
    z-index: 2001;
}

header.fixed-top * {
    position: relative;
    z-index: 1;
}

/* Safari fix: Forces GPU layer for backdrop-filter inside fixed elements to prevent
   rendering artifacts during overscroll bounce */
header.fixed-top > nav.navbar[class*="material-"] {
    transform: translateZ(0);
    will-change: backdrop-filter;
    position: relative;
}


/* ===== DIALOG & POPOVER PRESENTATION COMPONENTS ===== */

/* ===== DIALOG ===== */

dialog {
    border: none;
    background: transparent;
}

dialog::backdrop {
    background-color: var(--presentation-backdrop, rgba(0, 0, 0, 0.25));
    background-image: var(--presentation-backdrop-image, none);
    backdrop-filter: var(--presentation-backdrop-filter, none);
}

/* ===== POPOVER ===== */

/* Base popover styles */
[popover] {
    position: absolute;
    border: none;
    background: none;
}

/* Hide default backdrop */
[popover]::backdrop {
    background-color: var(--presentation-backdrop);
    background-image: var(--presentation-backdrop-image, none);
    backdrop-filter: var(--presentation-backdrop-filter, none);
}

/* ===== PRESENTATION ALIGNMENT (works for both dialog and popover) ===== */

/* Base alignment styles */
[popover],
dialog[open],
[popover]:popover-open {
    position: fixed;
    inset: unset;
    margin: 0;
}

/* Edge alignments - centered on edge */
dialog.presentation-align-top,
dialog.presentation-align-top[open],
[popover].presentation-align-top,
[popover].presentation-align-top:popover-open {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

dialog.presentation-align-bottom,
dialog.presentation-align-bottom[open],
[popover].presentation-align-bottom,
[popover].presentation-align-bottom:popover-open {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

dialog.presentation-align-left,
dialog.presentation-align-left[open],
[popover].presentation-align-left,
[popover].presentation-align-left:popover-open {
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

dialog.presentation-align-right,
dialog.presentation-align-right[open],
[popover].presentation-align-right,
[popover].presentation-align-right:popover-open {
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* Corner alignments */
dialog.presentation-align-topLeading,
dialog.presentation-align-topLeading[open],
[popover].presentation-align-topLeading,
[popover].presentation-align-topLeading:popover-open {
    top: 10px;
    left: 10px;
}

dialog.presentation-align-topTrailing,
dialog.presentation-align-topTrailing[open],
[popover].presentation-align-topTrailing,
[popover].presentation-align-topTrailing:popover-open {
    top: 10px;
    right: 10px;
}

dialog.presentation-align-bottomLeading,
dialog.presentation-align-bottomLeading[open],
[popover].presentation-align-bottomLeading,
[popover].presentation-align-bottomLeading:popover-open {
    bottom: 10px;
    left: 10px;
}

dialog.presentation-align-bottomTrailing,
dialog.presentation-align-bottomTrailing[open],
[popover].presentation-align-bottomTrailing,
[popover].presentation-align-bottomTrailing:popover-open {
    bottom: 10px;
    right: 10px;
}

/* Side alignments - flush to edge */
dialog.presentation-align-leading,
dialog.presentation-align-leading[open],
[popover].presentation-align-leading,
[popover].presentation-align-leading:popover-open {
    left: 10px;
    top: 10px;
}

dialog.presentation-align-trailing,
dialog.presentation-align-trailing[open],
[popover].presentation-align-trailing,
[popover].presentation-align-trailing:popover-open {
    right: 10px;
    top: 10px;
}

/* Center alignment */
dialog.presentation-align-center,
dialog.presentation-align-center[open],
[popover].presentation-align-center,
[popover].presentation-align-center:popover-open {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ===== POPOVER ANCHOR POSITIONING ===== */

[class^="popover-anchor-"] {
    position-anchor: var(--anchor-id);
    position: absolute;
}

.popover-anchor-top {
    bottom: anchor(top);
    position-area: top;
}

.popover-anchor-bottom {
    top: anchor(bottom);
    position-area: bottom;
}

.popover-anchor-left {
    right: anchor(left);
    position-area: left;
}

.popover-anchor-right {
    left: anchor(right);
    position-area: right;
}

.popover-anchor-top-left {
    bottom: anchor(top);
    right: anchor(left);
    position-area: top-start;
}

.popover-anchor-top-right {
    bottom: anchor(top);
    left: anchor(right);
    position-area: top-end;
}

.popover-anchor-bottom-left {
    top: anchor(bottom);
    right: anchor(left);
    position-area: bottom-start;
}

.popover-anchor-bottom-right {
    top: anchor(bottom);
    left: anchor(right);
    position-area: bottom-end;
}

.popover-anchor-center {
    top: anchor(center);
    left: anchor(center);
    position-area: center;
    transform: translate(-50%, -50%);
}


/* ===== SPACING UTILITIES ===== */

/* Margin - All Sides */
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 1rem; }
.m-4 { margin: 1.5rem; }
.m-5 { margin: 3rem; }
.m-auto { margin: auto; }

/* Margin - Top */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.mt-auto { margin-top: auto; }

/* Margin - Bottom */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }
.mb-auto { margin-bottom: auto; }

/* Margin - Start (Left in LTR) */
.ms-0 { margin-left: 0; }
.ms-1 { margin-left: 0.25rem; }
.ms-2 { margin-left: 0.5rem; }
.ms-3 { margin-left: 1rem; }
.ms-4 { margin-left: 1.5rem; }
.ms-5 { margin-left: 3rem; }
.ms-auto { margin-left: auto; }

/* Margin - End (Right in LTR) */
.me-0 { margin-right: 0; }
.me-1 { margin-right: 0.25rem; }
.me-2 { margin-right: 0.5rem; }
.me-3 { margin-right: 1rem; }
.me-4 { margin-right: 1.5rem; }
.me-5 { margin-right: 3rem; }
.me-auto { margin-right: auto; }

/* Margin - Horizontal (Left & Right) */
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-3 { margin-left: 1rem; margin-right: 1rem; }
.mx-4 { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-5 { margin-left: 3rem; margin-right: 3rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Margin - Vertical (Top & Bottom) */
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-3 { margin-top: 1rem; margin-bottom: 1rem; }
.my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-5 { margin-top: 3rem; margin-bottom: 3rem; }
.my-auto { margin-top: auto; margin-bottom: auto; }

/* Padding - All Sides */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }

/* Padding - Top */
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 1rem; }
.pt-4 { padding-top: 1.5rem; }
.pt-5 { padding-top: 3rem; }

/* Padding - Bottom */
.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 1rem; }
.pb-4 { padding-bottom: 1.5rem; }
.pb-5 { padding-bottom: 3rem; }

/* Padding - Start (Left in LTR) */
.ps-0 { padding-left: 0; }
.ps-1 { padding-left: 0.25rem; }
.ps-2 { padding-left: 0.5rem; }
.ps-3 { padding-left: 1rem; }
.ps-4 { padding-left: 1.5rem; }
.ps-5 { padding-left: 3rem; }

/* Padding - End (Right in LTR) */
.pe-0 { padding-right: 0; }
.pe-1 { padding-right: 0.25rem; }
.pe-2 { padding-right: 0.5rem; }
.pe-3 { padding-right: 1rem; }
.pe-4 { padding-right: 1.5rem; }
.pe-5 { padding-right: 3rem; }

/* Padding - Horizontal (Left & Right) */
.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }
.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-5 { padding-left: 3rem; padding-right: 3rem; }

/* Padding - Vertical (Top & Bottom) */
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }


/* ===========================================
   Font Size Utilities (Bootstrap compatible)
   =========================================== */

/* Largest, similar to <h1> */
.text-h1 {
  font-size: calc(1.625rem + 4.5vw);
  line-height: 1.2;
}

/* Slightly smaller, like <h2> */
.text-h2 {
  font-size: calc(1.475rem + 2.7vw);
  line-height: 1.25;
}

/* Medium-large, like <h3> */
.text-h3 {
  font-size: calc(1.325rem + 0.9vw);
  line-height: 1.3;
}

/* Heading-ish */
.text-h4 {
  font-size: 1.5rem;
  line-height: 1.35;
}

/* Subheading */
.text-h5 {
  font-size: 1.25rem;
  line-height: 1.4;
}

/* Body text */
.text-h6 {
  font-size: 1rem;
  line-height: 1.5;
}

.text-small {
    font-size: 0.9rem;
}

.text-xSmall {
    font-size: 0.8rem;
}

.text-xxSmall {
    font-size: 0.7rem;
}

.text-xxxSmall {
    font-size: 0.6rem;
}

.line-clamp {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--max-line-length, 1);
}

.line-clamp-none {
    overflow: visible;
    display: block;
    -webkit-box-orient: horizontal;
    -webkit-line-clamp: unset;
}

.markdown p {
    margin-bottom: var(--paragraph-margin-bottom, 1.2rem);
    margin-top: var(--paragraph-margin-top, 1.2rem);
    margin-right: var(--paragraph-margin-right);
    margin-left: var(--paragraph-margin-left);
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  margin-bottom: var(--heading-margin-bottom, 1.2rem);
  margin-top: var(--heading-margin-top, 1.2rem);
  margin-right: var(--heading-margin-right);
  margin-left: var(--heading-margin-left);
}


/* ===== LAYOUT UTILITIES ===== */

/* ===== CONTAINER ===== */

.container {
    width: 100%;
    margin-inline: auto;
    padding-inline: 1rem;
    max-width: 100%;
}

/* sm */
@media (min-width: 575px) {
    .container {
        max-width: var(--content-max-width, 575px);
        padding-inline: 2rem;
    }
}

/* md */
@media (min-width: 768px) {
    .container {
        max-width: var(--content-max-width, 768px);
        padding-inline: 2rem;
    }
}

/* lg */
@media (min-width: 1024px) {
    .container {
        max-width: var(--content-max-width, 1024px);
        padding-inline: 2rem;
    }
}

/* xl */
@media (min-width: 1440px) {
    .container {
        max-width: var(--content-max-width, 1440px);
        padding-inline: 2rem;
    }
}

/* ===== DIVIDER ===== */

hr {
    border: none;
    border-top: 1px solid var(--divider);
    margin: 0.25rem 0;
}

/* ===== DISPLAY UTILITIES ===== */

.d-none {
    display: none;
}

/* ===== CONTROL SIZE SYSTEM ===== */

/* Control Size Classes */
.ctrl-xs {
    /* Extra small size */
}

.ctrl-sm {
    /* Small size */
}

.ctrl-md {
    /* Medium size - default */
}

.ctrl-lg {
    /* Large size */
}

.ctrl-xl {
    /* Extra large size */
}

.img-resizable {
    max-width: 100%;
    height: auto;
}

/* === Background Extension Effect === */
.extend-bg {
  position: relative;
  z-index: 0;
  overflow: visible;
}

.extend-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100dvw;
  margin-inline: calc(50% - 50dvw);
  background: inherit;
  z-index: -1;
}

/* Fixed & Sticky Positioning (Bootstrap-compatible, no !important) */
:where(.fixed-top) {
  position: fixed;
  top: var(--position-offset, 0);
  left: 0;
  right: 0;
  z-index: var(--z-fixed, 1000);
}

:where(.fixed-bottom) {
  position: fixed;
  bottom: var(--position-offset, 0);
  left: 0;
  right: 0;
  z-index: var(--z-fixed, 1000);
}

:where(.sticky-top) {
  position: sticky;
  top: var(--position-offset, 0);
  z-index: var(--z-sticky, 900);
}

:where(.sticky-bottom) {
  position: sticky;
  bottom: var(--position-offset, 0);
  z-index: var(--z-sticky, 900);
}

nav.fixed-top.nav-width-content {
  left: 50%;
  transform: translateX(-50%);
  max-width: var(--site-max-width, 1200px);
}

nav.fixed-top.nav-width-viewport {
  left: 0;
  transform: none;
  width: 100dvw;
  max-width: 100dvw;
}

.vstack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.no-show-invisibles .token.space:before,
.no-show-invisibles .token.tab:before,
.no-show-invisibles .token.lf:before,
.no-show-invisibles .token.cr:before {
  display: none !important;
}

.tapped {
    cursor: pointer;
}

.container-relative {
    display: grid;
    overflow: hidden;
}

.screen-relative {
  display: flex;
}

.frame-height,
.frame-width {
    display: grid;
    overflow: hidden;
}

.frame-height > img {
    display: block;
    max-height: 100%;
    height: 100%;
    width: auto;
    object-fit: contain;
}

.justify-content-start {
    justify-content: flex-start;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-end {
    justify-content: flex-end;
}

.align-self-start {
    align-self: flex-start;
}

.align-self-center {
    align-self: center;
}

.align-self-end {
    align-self: flex-end;
}

.align-items-start {
    align-items: flex-start;
}

.align-items-center {
    align-items: center;
}

.align-items-end {
    align-items: flex-end;
}

.text-start {
    text-align: start;
}

.text-center {
    text-align: center;
}

.text-end {
    text-align: end;
}

.fs-1 { font-size: clamp(2rem, 1.5rem + 1vw, 2.25rem); }
.fs-2 { font-size: clamp(1.75rem, 1.5rem + 0.5vw, 1.875rem); }
.fs-3 { font-size: clamp(1.375rem, 1.25rem + 0.5vw, 1.5rem); }
.fs-4 { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem); }
.fs-5 { font-size: 1.125rem; }
.fs-6 { font-size: 1rem; }

/* Size */
.w-full { width: 100%; }
.h-full { height: 100%; }

/* Object-fit */
.object-fit-contain { object-fit: contain; }
.object-fit-cover { object-fit: cover; }
.object-fit-fill { object-fit: fill; }
.object-fit-scale-down { object-fit: scale-down; }
.object-fit-none { object-fit: none; }

/* GAP (both axes) */
.g-0 { gap: 0; }
.g-1 { gap: 0.25rem; }
.g-2 { gap: 0.5rem; }
.g-3 { gap: 1rem; }
.g-4 { gap: 1.5rem; }
.g-5 { gap: 3rem; }

/* X-axis gap (columns only) */
.gx-0 { column-gap: 0; }
.gx-1 { column-gap: 0.25rem; }
.gx-2 { column-gap: 0.5rem; }
.gx-3 { column-gap: 1rem; }
.gx-4 { column-gap: 1.5rem; }
.gx-5 { column-gap: 3rem; }

/* Y-axis gap (rows only) */
.gy-0 { row-gap: 0; }
.gy-1 { row-gap: 0.25rem; }
.gy-2 { row-gap: 0.5rem; }
.gy-3 { row-gap: 1rem; }
.gy-4 { row-gap: 1.5rem; }
.gy-5 { row-gap: 3rem; }

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

/* Base badge shape */
.badge {
    display: inline-block;
    font-size: 0.75em;
    line-height: 1;
    padding: 0.35em 0.6em;
    font-weight: 500;
    vertical-align: baseline;
}

/* Shape variants */
.badge-pill { border-radius: 999px; }

/* Automatically uses theme accent colors */
.badge-automatic {
    background-color: var(--accent);
    color: var(--fg-dm);
}

/* Soft background tint of the accent */
.badge-subtle {
    background-color: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
}

/* Outline-style badge based on accent */
.badge-subtle-bordered {
    background-color: color-mix(in srgb, var(--accent) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--accent);
}

.label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}




@font-face {
    font-family: 'Antonia';
    src: url('/fonts/AntoniaText-Regular.woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    ascent-override: normal;
    descent-override: normal;
    line-gap-override: normal;
}

@font-face {
    font-family: 'Antonia';
    src: url('/fonts/AntoniaText-RegularItalic.woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    ascent-override: normal;
    descent-override: normal;
    line-gap-override: normal;
}

@font-face {
    font-family: 'Antonia';
    src: url('/fonts/AntoniaH3-Bold.woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    ascent-override: normal;
    descent-override: normal;
    line-gap-override: normal;
}

[data-theme-id="main-theme"] {
        --font-family: 'Antonia';
    --syntax-highlight-theme: "xcode-light";
    --content-max-width: 700px;
}

[data-theme-id="main-theme"][data-color-scheme="light"] {
        --font-family: 'Antonia';
    --syntax-highlight-theme: "xcode-light";
    --content-max-width: 700px;
}

[data-theme-id="main-theme"][data-color-scheme="dark"] {
        --font-family: 'Antonia';
    --syntax-highlight-theme: "xcode-light";
    --content-max-width: 700px;
}

@media (min-width: 0px) {
    [data-theme-id="main-theme"]   .style-environment-R3j90 {
        font-size: 25px;
}
}

@media (min-width: 575px) {
    [data-theme-id="main-theme"]   .style-environment-R3j90 {
        font-size: 30px;
}
}

@media (min-width: 1024px) {
    [data-theme-id="main-theme"]   .style-environment-R3j90 {
        font-size: 30px;
}
}

@media (min-width: 0px) {
    [data-theme-id="main-theme"]   .style-environment-R3j90 {
        font-size: 25px;
}
}

@media (min-width: 575px) {
    [data-theme-id="main-theme"]   .style-environment-R3j90 {
        font-size: 30px;
}
}

@media (min-width: 1024px) {
    [data-theme-id="main-theme"]   .style-environment-R3j90 {
        font-size: 30px;
}
}