/* 1. Imports & Variables ---------------------------------------------------- */
/*
 * Inter Typeface
 * Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
 *
 * This Font Software is licensed under the SIL Open Font License, Version 1.1.
 * https://openfontlicense.org
 */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(Inter-VariableFont_opsz,wght.ttf) format("truetype");
}

/*
* woff2 file from
* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0&icon_names=account_circle,add,add_circle,add_task,alarm,album,apps,archive,arrow_back,arrow_downward,arrow_drop_down,arrow_drop_up,arrow_forward,arrow_upward,attach_file,autorenew,backspace,bar_chart,bedtime,block,bolt,book,bookmark,brightness_medium,brush,bug_report,build,calculate,calendar_month,call,cancel,casino,cast,category,chat,check,check_circle,checklist,cleaning_services,close,closed_caption,cloud_download,cloud_off,cloud_upload,code,colorize,computer,content_copy,content_cut,content_paste,contrast,cooking,credit_card,crop,crop_free,dark_mode,dashboard,data_array,data_object,dataset,date_range,delete,delete_forever,description,devices,directions_bike,directions_run,directions_walk,done_all,download,drag_indicator,draw,edit,edit_calendar,equalizer,error,event,explore,exposure,extension,family_restroom,fast_forward,fast_rewind,favorite,feedback,filter_alt,filter_list,find_replace,fitness_center,flag,flight,flip,folder,folder_open,format_align_center,format_align_justify,format_align_left,format_align_right,format_bold,format_color_fill,format_color_text,format_italic,format_strikethrough,format_underlined,forward_media,fullscreen,fullscreen_exit,function,functions,globe,grid_on,grid_view,grocery,group,handshake,help,history,home,hourglass,hub,image,info,ink_eraser,input,key,keyboard_arrow_down,keyboard_arrow_left,keyboard_arrow_right,keyboard_arrow_up,keyboard_command_key,keyboard_control_key,keyboard_option_key,keyboard_return,keyboard_tab,label,language,laundry,layers,layers_clear,light_mode,lightbulb,link,list,local_shipping,location_on,lock,lock_open,login,logout,mail,map,memory,menu,menu_open,mic,mic_off,mode_off_on,more_horiz,more_vert,movie,music_note,my_location,notifications,numbers,open_in_new,palette,pan_tool,pause,pause_circle,payments,pending_actions,person,pets,photo_camera,pie_chart,play_arrow,play_circle,playlist_add,playlist_play,print,priority_high,psychology,qr_code,redo,refresh,remove,repeat,repeat_one,replay,reply,restaurant,rocket_launch,rotate_left,rotate_right,rule,save,schedule,school,search,self_improvement,send,sensors,settings,share,shield,shift,shopping_cart,show_chart,shuffle,skip_next,skip_previous,skull,smart_toy,sort,sort_by_alpha,space_bar,speed,sports_esports,star,star_half,stop,stop_circle,subtitles,sync,task_alt,terminal,thumb_down,thumb_up,timer,title,today,translate,trending_up,tune,undo,upcoming,upload,verified,verified_user,vertical_align_bottom,vertical_align_center,vertical_align_top,videocam,view_list,visibility,visibility_off,volume_down,volume_off,volume_up,warning,water_drop,wifi,work,wrap_text,zoom_in,zoom_out
*
* Use like this: <span class="sym">menu</span>
* If you need chevron_right (or ~left), use keyboard_arrow_right (or ~left) instead.
*
* Apache License, Version 2.0
* https://www.apache.org/licenses/LICENSE-2.0.html
*/
@font-face {
    font-family: "Material Symbols Rounded";
    font-style: normal;
    font-weight: 400;
    src: url(material-symbols.woff2) format("woff2");
}

.sym,
.btn-sym,
button.btn-sym {
    vertical-align: middle;
    font-family: "Material Symbols Rounded";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
}

/* Material 3 Design Tokens: Tonal Elevation System */
:root {
    color-scheme: light;

    /* Typography */
    --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
    --font-code: "JetBrains Mono NL", "JetBrains Mono", "Consolas", "Monaco", "Fira Code", "Liberation Mono", monospace;

    /* Dimensions & Spacing */
    --header-height: 64px;
    --aside-width: 360px;
    --radius: 16px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;

    /* Effects (Subtle shadow only when absolutely needed) */
    --trans-std: 250ms cubic-bezier(0.2, 0, 0, 1);
    --trans-interactive: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s, transform 0.1s;

    /* M3 Core Palette */
    --primary: #6750a4;
    --primary-dark: #4f378b;
    --on-primary: #ffffff;
    --secondary: #006a6a;
    --on-secondary: #ffffff;
    --error: #b3261e;
    --on-error: #ffffff;

    /* Surface Hierarchy (Tonal Elevation) */
    --surface: #f7f9f2;
    /* Base background Level 0 */
    --surface-container-low: #f1f3eb;
    /* Sidebar / Secondary Level 1 */
    --surface-container: #ebeee5;
    /* Primary Cards / Header Level 2 */
    --surface-container-high: #e5e9df;
    /* Active / Hover Level 3 */
    --surface-container-highest: #dfe4d9;
    /* Modals / Popups Level 4 */

    /* Typography & UI State */
    --on-surface: #1d1b20;
    --on-surface-variant: #49454f;
    --outline: #79747e;
    --outline-variant: #c4c7c5;

    /* Theme-aware selection */
    --selection-bg: var(--primary);
    --selection-color: var(--on-primary);

    /* Theme-aware pre background */
    --pre-bg: #212121;
    --pre-color: #ffffff;

    /* Theme-aware select dropdown arrow (dark chevron for light backgrounds) */
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath fill='%2349454f' d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --primary: #d0bcff;
        --primary-dark: #b69df8;
        --on-primary: #381e72;
        --secondary: #4fd8d8;
        --on-secondary: #003737;
        --error: #ffb4ab;
        --on-error: #690005;

        --surface: #141218;
        --surface-container-low: #1d1b20;
        --surface-container: #211f26;
        --surface-container-high: #2b2930;
        --surface-container-highest: #36343b;

        --on-surface: #e6e0e9;
        --on-surface-variant: #cac4d0;
        --outline: #938f99;
        --outline-variant: #49454f;

        --pre-bg: #101010;
        --pre-color: #e6e0e9;

        /* Light chevron for dark backgrounds */
        --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath fill='%23cac4d0' d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E");
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --primary: #d0bcff;
    --primary-dark: #b69df8;
    --on-primary: #381e72;
    --secondary: #4fd8d8;
    --on-secondary: #003737;
    --error: #ffb4ab;
    --on-error: #690005;

    --surface: #141218;
    --surface-container-low: #1d1b20;
    --surface-container: #211f26;
    --surface-container-high: #2b2930;
    --surface-container-highest: #36343b;

    --on-surface: #e6e0e9;
    --on-surface-variant: #cac4d0;
    --outline: #938f99;
    --outline-variant: #49454f;

    --pre-bg: #101010;
    --pre-color: #e6e0e9;

    /* Light chevron for dark backgrounds */
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath fill='%23cac4d0' d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E");
}

/* Global reset for box sizing */
* {
    box-sizing: border-box;
    scrollbar-color: var(--outline-variant) var(--surface-container-highest);
    scrollbar-width: thin;
    accent-color: var(--primary);
}

/* Tonal webkit scrollbar */
::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-track {
    background-color: var(--surface-container-highest);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--outline-variant);
    border: 3px solid var(--surface-container-highest);
    border-radius: 8px;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--outline);
}

/* Global Selection Styles */
::selection,
::-moz-selection {
    background-color: var(--selection-bg);
    color: var(--selection-color);
}

/* Global Hidden Reset */
[hidden] {
    display: none !important;
}

/* Base body typography and layout defaults */
body {
    font-family: var(--font-sans);
    background-color: var(--surface);
    color: var(--on-surface);
    margin: 0;
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
    word-break: break-word;
}

p,
ul,
ol,
dl,
pre,
blockquote,
figure,
hr,
table {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

ul,
ol {
    padding-left: 24px;
}

/* Standardize vertical spacing for content blocks */
article > *:last-child,
section > *:last-child,
aside > *:last-child,
details > *:last-child,
footer > *:last-child {
    margin-bottom: 0;
}

hgroup > p,
hgroup > :not(:first-child) {
    color: var(--on-surface-variant);
    font-size: 0.875rem;
    margin-top: 0;
}

abbr {
    cursor: help;
}

a {
    color: var(--primary);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: var(--trans-interactive);
}

a:hover {
    color: var(--primary-dark);
    border-bottom-color: var(--primary-dark);
}

a[href^="mailto:"],
a[href^="tel:"] {
    display: inline-flex;
    align-items: center;
}

a[href^="mailto:"]::before,
a[href^="tel:"]::before {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 1.25em;
    margin-right: 4px;
    -webkit-font-smoothing: antialiased;
}

a[href^="mailto:"]::before {
    content: 'mail';
}

a[href^="tel:"]::before {
    content: 'call';
}

/* 2. Responsive Layout Structure ------------------------------------------- */
/* Base (mobile) uses a single-column CSS Grid */
body {
    display: grid;
    grid-template-areas:
        "header"
        "main"
        "footer";
    grid-template-rows: var(--header-height) 1fr auto;
    grid-template-columns: 1fr;
    transition: grid-template-columns var(--trans-std);
}

/* Area assignments */
header {
    grid-area: header;
}

main {
    grid-area: main;
}

aside {
    grid-area: aside;
}

/* The footer is part of the main grid flow and stays at the bottom. */
footer {
    grid-area: footer;
}

/* Desktop: uses a two-column grid with collapsible sidebar.
           Uses :has() with a checkbox (#aside-state) to toggle layout without JS. */
@media (min-width: 900px) {

    /* Checkbox UNCHECKED = Expanded sidebar (default desktop) */
    body:has(#aside-state:not(:checked)) {
        grid-template-columns: var(--aside-width) 1fr;
        grid-template-areas:
            "header header"
            "aside main"
            "aside footer";
    }

    /* Checkbox CHECKED = Collapsed sidebar */
    body:has(#aside-state:checked) {
        grid-template-columns: 0px 1fr;
        grid-template-areas:
            "header header"
            "aside main"
            "aside footer";
    }
}

/* 3. Header & Navigation --------------------------------------------------- */
/* Top App Bar styling */
header {
    background-color: var(--surface-container);
    color: var(--on-surface);
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-md);
    gap: var(--spacing-sm);
    border-bottom: 1px solid var(--outline-variant);
    z-index: 100;
    /* Above sidebar on mobile */
    position: sticky;
    top: 0;
}

/* Header content layout */
header hgroup {
    flex-grow: 1;
}

h1 {
    margin: 15px 0px;
}

header h1 {
    font-size: 1.25rem;
    margin: 0;
    font-weight: 500;
}

header p {
    margin: 0;
    font-size: 0.875rem;
    opacity: 0.8;
    display: none;
    /* Hide description on very small screens */
}

@media (min-width: 600px) {
    header p {
        display: block;
    }
}

/* Simple nav row */
nav ul {
    list-style: none;
    display: flex;
    gap: var(--spacing-md);
    margin: 0;
    padding: 0;
}

nav a {
    color: var(--on-surface);
    text-decoration: none;
    border-bottom: none;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.875rem;
    padding: 8px 12px;
    border-radius: var(--radius);
    transition: var(--trans-interactive);
}

nav a:hover {
    background-color: var(--surface-container-high);
}

/* 4. Sidebar Toggle Button & Icon Logic ----------------------------------- */
/* Circular icon button used as a label for #aside-state checkbox */
.aside-toggle-btn {
    cursor: pointer;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    transition: var(--trans-interactive);
}

.aside-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Use Material Symbols Rounded font to render icon text via content */
.aside-toggle-btn::before {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    text-transform: none;
    color: var(--on-surface);
    /* Default Mobile State (Collapsed) -> Show menu icon */
    content: 'menu';
}

/* Icon state changes when #aside-state is checked.
           On mobile checked = open -> show menu_open */
#aside-state:checked ~ header .aside-toggle-btn::before {
    content: 'menu_open';
}

/* Desktop overrides (inverted logic: unchecked = expanded -> show menu_open) */
@media (min-width: 900px) {

    /* Desktop: Unchecked (Expanded) -> Show open icon */
    #aside-state:not(:checked) ~ header .aside-toggle-btn::before {
        content: 'menu_open';
    }

    /* Desktop: Checked (Collapsed) -> Show menu icon */
    #aside-state:checked ~ header .aside-toggle-btn::before {
        content: 'menu';
    }
}

/* 5. Sidebar (Aside) Appearance ------------------------------------------- */
/* Visual treatment and slide-in/out behavior */
aside {
    background-color: var(--surface-container-low);
    border-right: 1px solid var(--outline-variant);
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform var(--trans-std), width var(--trans-std);
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);

    /* Mobile Drawer positioning */
    position: fixed;
    top: var(--header-height);
    bottom: 0;
    left: 0;
    width: var(--aside-width);
    z-index: 200;
    transform: translateX(-100%);
    /* Hidden by default on mobile */
}

aside h2 {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-sm);
    margin: 0;
}

aside ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-md) 0;
}

aside li {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.9rem;
    border-bottom: 1px solid var(--outline-variant);
}

aside dfn {
    font-weight: 700;
    font-style: normal;
    color: var(--primary);
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

/* Mobile: when checkbox is checked, slide the drawer into view */
#aside-state:checked ~ aside {
    transform: translateX(0);
}

/* When sidebar is OPEN, create a full-screen overlay using the label's pseudo-element */
#aside-state:checked ~ header .aside-toggle-btn::after {
    content: '';
    position: fixed;
    top: var(--header-height);
    /* Starts exactly below the header */
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    /* Optional: slight blur effect */
    z-index: 150;
    /* Puts the overlay behind the Menu Icon itself */
    cursor: default;
    /* Resets cursor so the whole screen doesn't look like a link */
}

/* Desktop: make aside part of the grid column and support collapse */
@media (min-width: 900px) {
    aside {
        position: relative;
        /* Part of the grid */
        top: 0;
        transform: none;
        /* Reset transform */
        width: 100%;
        /* Fills the grid column */
        box-shadow: none;
        z-index: 1;
    }

    /* When the desktop state is 'collapsed' by the checkbox, shrink the column */
    body:has(#aside-state:checked) aside {
        width: 0;
        opacity: 0;
    }

    /* Ensure backdrop is hidden on desktop */
    #aside-state:checked ~ header .aside-toggle-btn::after {
        display: none;
    }
}

/* Tables */
table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-lg);
}

td,
th {
    word-wrap: break-word;
    overflow-wrap: anywhere;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--outline-variant);
    text-align: left;
}

th {
    font-weight: 600;
    background-color: var(--surface-container-high);
    color: var(--on-surface);
}

/* 6. Main Content & Cards ------------------------------------------------- */
/* Main container constraints and spacing */
main {
    padding: var(--spacing-lg);
    width: 100%;
    margin-inline: auto;
    margin: 0 auto;
}

/* Card-like sections */
section {
    background: var(--surface-container);
    border-radius: var(--radius);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--outline-variant);
}

/* Headings inside content */
h2 {
    display: flex;
    align-items: center;
    margin-top: 0;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--on-surface);
    margin-bottom: var(--spacing-lg);
}

h3 {
    font-size: 1.1rem;
    font-weight: 500;
    margin-top: var(--spacing-lg);
}

/* Footer styling */
footer {
    text-align: center;
    padding: var(--spacing-sm);
    /* Reduced from spacing-md */
    color: var(--on-surface-variant);
    font-size: 0.75rem;
    border-top: 1px solid var(--outline-variant);
}

/* 7. Forms & Inputs ------------------------------------------------------- */
/* Fieldset and legend to group form controls */
fieldset {
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    padding: var(--spacing-md);
    margin: 0 0 var(--spacing-md) 0;
    background-color: var(--surface-container-low);
}

legend {
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-sm);
    color: var(--primary);
    font-weight: 500;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

form label {
    display: block;
    margin-bottom: 0;
    color: var(--on-surface-variant);
    font-size: 0.875rem;
}

/* Input fields styled like Material "filled" fields */
input[type="text"],
input[type="number"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea {
    display: block;
    width: 100%;
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    padding: 12px 16px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--on-surface);
    background-color: var(--surface-container-highest);
    border: none;
    border-bottom: 1px solid var(--outline);
    border-radius: 8px 8px 0 0;
    transition: var(--trans-interactive);
    resize: vertical;
}

input:focus,
textarea:focus {
    outline: none;
    background-color: color-mix(in srgb, var(--surface-container-highest), var(--on-surface) 4%);
    border-bottom: 1px solid var(--primary);
    box-shadow: inset 0 -1px 0 0 var(--primary);
}

/* Style browser spinners for number inputs to fit the theme */
input[type="number"] {
    -moz-appearance: auto;
    appearance: auto;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 100%;
    margin: 0;
    cursor: pointer;
    background-color: var(--on-surface-variant);
    opacity: 0.6;
    transition: var(--trans-interactive);

    /* Unfold More SVG mask to dynamically apply theme color */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.83 15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.83 15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 20px;
    mask-size: 20px;
}

input[type="number"]::-webkit-inner-spin-button:hover,
input[type="number"]::-webkit-outer-spin-button:hover {
    opacity: 1;
    background-color: var(--primary);
}

/* Style date/time picker indicators */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: var(--trans-interactive);
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="week"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Error visual states driven by aria-invalid */
input[aria-invalid="true"] {
    border-bottom-color: var(--error);
    /* Blend the error color with the background for a subtle tint. */
    background-color: color-mix(in srgb, var(--surface-container-highest) 85%, var(--error) 15%);
}

/* Small helper/error text */
small {
    display: block;
    margin-top: 4px;
    margin-bottom: var(--spacing-md);
    font-size: 0.75rem;
    color: var(--on-surface-variant);
}

/* Tighten spacing when following elements with standard bottom margin to maintain a 4px gap */
:is(input, textarea, select, p, ul, ol, dl, pre, blockquote, figure, hr, table) + small {
    margin-top: calc(var(--spacing-md) * -1 + 4px);
}

input[aria-invalid="true"] + small {
    color: var(--error);
}

/* Select elements */
select {
    display: block;
    width: 100%;
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    padding: 12px 16px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--on-surface);
    background-color: var(--surface-container-highest);
    border: none;
    border-bottom: 1px solid var(--outline);
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    appearance: none;
    background-image: var(--select-arrow);
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: var(--trans-interactive);
}

select:focus {
    outline: none;
    background-color: color-mix(in srgb, var(--surface-container-highest), var(--on-surface) 4%);
    border-bottom: 1px solid var(--primary);
    box-shadow: inset 0 -1px 0 0 var(--primary);
}

button:focus-visible,
a:focus-visible,
select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary);
}

/* Color picker — normalize swatch appearance across browsers */
input[type="color"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 40px;
    padding: 3px;
    background-color: var(--surface-container-highest);
    border: none;
    border-bottom: 1px solid var(--outline);
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    transition: var(--trans-interactive);
    margin-bottom: var(--spacing-md);
}

input[type="color"]:focus {
    outline: none;
    background-color: color-mix(in srgb, var(--surface-container-highest), var(--on-surface) 4%);
    border-bottom: 1px solid var(--primary);
    box-shadow: inset 0 -1px 0 0 var(--primary);
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

/* Slider / Range input */
input[type="range"] {
    appearance: none;
    display: block;
    width: 100%;
    height: 4px;
    background: var(--outline-variant);
    border-radius: 2px;
    margin-top: 8px;
    /* Tucking inside label or after label */
    margin-bottom: var(--spacing-md);
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: 2px solid var(--surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transition: var(--trans-interactive);
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

input[type="range"]::-moz-range-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: 2px solid var(--surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transition: var(--trans-interactive);
}

input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.2);
}

/* Firefox range track */
input[type="range"]::-moz-range-track {
    width: 100%;
    height: 4px;
    background: var(--outline-variant);
    border-radius: 2px;
    border: none;
}

/* Keyboard-accessible focus ring on range thumb (WCAG 2.4.11) */
input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary);
}

input[type="range"]:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary);
}


/* Segmented Control */
.segmented-control {
    display: flex;
    background: var(--surface-container-highest);
    border-radius: var(--radius);
    padding: 4px;
    gap: 4px;
    margin-bottom: var(--spacing-md);
}

.segmented-control label {
    flex: 1;
    text-align: center;
    padding: 8px;
    border-radius: calc(var(--radius) - 4px);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: var(--trans-interactive);
    margin: 0;
    display: block;
}

.segmented-control input:checked + label {
    background: var(--primary);
    color: var(--on-primary);
}

.segmented-control input:disabled + label,
.segmented-control label:has(input:disabled) {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.segmented-control input {
    display: none !important;
}

/* Custom Checkboxes and Radio Buttons */
input[type="radio"],
input[type="checkbox"]:not([role="switch"]) {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--outline);
    border-radius: 50%;
    margin: 0;
    display: grid;
    place-content: center;
    background-color: var(--surface-container-highest);
    transition: var(--trans-interactive);
    cursor: pointer;
    flex-shrink: 0;
}

input[type="checkbox"]:not([role="switch"]) {
    border-radius: 4px;
}

input[type="radio"]:hover,
input[type="checkbox"]:not([role="switch"]):hover {
    border-color: var(--primary);
}

input[type="radio"]::before,
input[type="checkbox"]:not([role="switch"])::before {
    content: "";
    transform: scale(0);
    transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
}

input[type="radio"]::before {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--on-primary);
}

input[type="checkbox"]:not([role="switch"])::before {
    width: 12px;
    height: 12px;
    background-color: var(--on-primary);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform-origin: center;
}

input[type="radio"]:checked,
input[type="checkbox"]:not([role="switch"]):checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

input[type="radio"]:checked::before,
input[type="checkbox"]:not([role="switch"]):checked::before {
    transform: scale(1);
}

input[type="radio"]:focus-visible,
input[type="checkbox"]:not([role="switch"]):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary);
}

label:has(input[type="radio"]),
label:has(input[type="checkbox"]:not([role="switch"])) {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    margin-bottom: var(--spacing-sm);
}

label:has(input[type="radio"]):last-child,
label:has(input[type="checkbox"]:not([role="switch"])):last-child,
.group > label:has(input[type="radio"]),
.group > label:has(input[type="checkbox"]:not([role="switch"])) {
    margin-bottom: 0;
}

label:has(input[role="switch"]) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin-bottom: var(--spacing-md);
    padding: 0;
    user-select: none;
    min-height: 32px;
}

label:has(input[role="switch"]):last-child,
.group > label:has(input[role="switch"]) {
    margin-bottom: 0;
}

.input-label-hint {
    display: block;
    font-size: 0.8em;
    color: var(--on-surface-variant);
    margin-top: 4px;
}

input[role="switch"] {
    appearance: none;
    position: relative;
    width: 40px;
    height: 24px;
    background-color: var(--surface-container-highest);
    border: 1.5px solid var(--outline);
    border-radius: 24px;
    cursor: pointer;
    transition: var(--trans-interactive);
    flex-shrink: 0;
    margin: 0;
}

input[role="switch"]::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2.5px;
    top: 2.5px;
    background-color: var(--outline);
    border-radius: 50%;
    transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

input[role="switch"]:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

input[role="switch"]:checked::before {
    transform: translateX(16px);
    background-color: var(--on-primary);
}

input[role="switch"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary);
}

/* File input styling */
input[type="file"] {
    font-family: inherit;
    font-size: 0.875rem;
}

input[type="file"]::file-selector-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    padding: 8px 16px;
    border-radius: var(--radius);
    font-family: inherit;
    font-weight: 500;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: var(--trans-interactive);
    background-color: var(--surface-container-highest);
    color: var(--primary);
    margin-right: var(--spacing-md);
}

input[type="file"]::file-selector-button:hover {
    background-color: color-mix(in srgb, var(--surface-container-highest), var(--on-surface) 4%);
}

input[type="file"]::file-selector-button:active {
    transform: translateY(2px);
}

/* File input drop area styling */
.file-drop-area {
    display: block;
    width: 100%;
    position: relative;
    border: 2px dashed var(--outline);
    border-radius: var(--radius);
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: center;
    background-color: var(--surface-container-low);
    margin-bottom: var(--spacing-md);
    transition: var(--trans-interactive);
}

.file-drop-area input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.file-drop-area::before {
    /* Integrated icon */
    content: "folder_open";
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 32px;
    display: block;
    margin-bottom: var(--spacing-sm);
    color: var(--on-surface-variant);
    pointer-events: none;
    transition: color var(--trans-interactive);
}

.file-drop-area[data-file-name]::before {
    /* Change icon to check when file is selected */
    content: "task_alt";
    color: var(--primary);
}

.file-drop-area::after {
    /* Custom message via attribute or default */
    content: attr(data-file-name) " ";
    /* Space resolves empty string collapse */
    display: block;
    color: var(--on-surface-variant);
    pointer-events: none;
    transition: color var(--trans-interactive);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-drop-area:not([data-file-name])::after {
    content: "Click or Drag file here";
}

.file-drop-area[data-file-name]::after {
    color: var(--on-surface);
    font-weight: 500;
}

.file-drop-area:has(input[type="file"]:hover),
.file-drop-area:has(input[type="file"]:focus-visible),
.file-drop-area.drag-over {
    border-color: var(--primary);
    background-color: color-mix(in srgb, var(--primary) 5%, var(--surface-container-low) 95%);
}

.file-drop-area:has(input[type="file"]:hover)::after,
.file-drop-area:has(input[type="file"]:hover)::before,
.file-drop-area:has(input[type="file"]:focus-visible)::after,
.file-drop-area:has(input[type="file"]:focus-visible)::before {
    color: var(--primary);
}

/* Input Groups */
[role="group"],
[role="search"] {
    display: flex;
    align-items: stretch;
    /* Stretch so input and button share the exact same height. */
    gap: 0;
    margin-bottom: var(--spacing-md);
}

[role="group"] > :is(input, button, select, textarea),
[role="search"] > :is(input, button, select, textarea) {
    margin-top: 0;
    margin-bottom: 0;
}

[role="group"] > button,
[role="search"] > button,
[role="group"] > button[type="button"],
[role="search"] > button[type="button"],
[role="group"] > button[type="submit"],
[role="search"] > button[type="submit"] {
    flex: 0 0 auto;
    padding: 12px 16px;
    border-radius: 8px 8px 0 0;
    border: none;
    border-bottom: 1px solid var(--outline);
    background-color: var(--surface-container-highest);
    color: var(--primary);
    line-height: 1.6;
    /* Match input line-height for vertical consistency */
}

/* Match the hover and active states of standard buttons, but enforce specificity */
[role="group"] > button:not(.btn-danger, .btn-primary, [type="submit"]):not(:disabled):hover,
[role="search"] > button:not(.btn-danger, .btn-primary, [type="submit"]):not(:disabled):hover,
[role="group"] > button[type="button"]:not(.btn-danger, .btn-primary):not(:disabled):hover,
[role="search"] > button[type="button"]:not(.btn-danger, .btn-primary):not(:disabled):hover {
    background-color: color-mix(in srgb, var(--surface-container-highest) 85%, var(--primary) 15%);
    border-bottom-color: var(--primary);
}

[role="group"] > :is(input, button, select, textarea):not(:first-child),
[role="search"] > :is(input, button, select, textarea):not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

[role="group"] > :is(input, button, select, textarea):not(:last-child),
[role="search"] > :is(input, button, select, textarea):not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

[role="group"] > input,
[role="search"] > input {
    flex: 1 1 auto;
}

[role="group"]:focus-within > :is(input, button, select, textarea),
[role="search"]:focus-within > :is(input, button, select, textarea) {
    border-bottom-color: var(--primary);
    box-shadow: inset 0 -1px 0 0 var(--primary);
}

/* Disabled interaction states */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Kill all hover / active / focus animation on disabled buttons */
button:disabled {
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* Re-enable pointer events so tooltips still show; hover styles are suppressed via :not(:disabled) on hover rules */
button:disabled[data-tooltip] {
    pointer-events: auto;
}

/* 8. Buttons & Interactive Elements --------------------------------------- */
/* Base button reset and typography */
button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    /* Ensure consistent height with outlined buttons */
    padding: 10px 24px;
    border-radius: var(--radius);
    font-family: inherit;
    font-weight: 500;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: var(--trans-interactive);
    vertical-align: middle;
    /* Fix baseline alignment issues */
    line-height: normal;
    /* Force consistent content height */
    text-decoration: none;
}

button:active,
.btn:active {
    transform: translateY(2px);
}

/* Secondary / Tonal buttons */
button,
button[type="button"],
button[data-action="cancel"],
button[type="reset"],
.btn {
    background-color: var(--surface-container-highest);
    color: var(--primary);
    border: none;
}

button[type="button"]:not(:disabled):hover,
button[data-action="cancel"]:not(:disabled):hover,
button[type="reset"]:not(:disabled):hover,
.btn:not(:disabled):hover {
    background-color: color-mix(in srgb, var(--surface-container-highest) 85%, var(--primary) 15%);
    border-bottom: none;
}

/* Primary actions - defined after secondary to allow overrides */
button[type="submit"],
button[data-action="confirm"],
button.btn-primary,
.btn-primary {
    background-color: var(--primary);
    color: var(--on-primary);
}

button[type="submit"]:not(:disabled):hover,
button[data-action="confirm"]:not(:disabled):hover,
button.btn-primary:not(:disabled):hover,
.btn-primary:not(:disabled):hover {
    background-color: color-mix(in srgb, var(--primary), var(--on-primary) 15%);
}

/* CSS-only Icon for Reset Button */
button[type="reset"]::before {
    content: 'refresh';
    font-family: 'Material Symbols Rounded';
    font-size: 24px;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
}

/* Danger / destructive action variant */
button.btn-danger,
.btn-danger {
    color: var(--error);
    background-color: transparent;
    border: 1.5px solid var(--error);
}

button.btn-danger:not(:disabled):hover,
.btn-danger:not(:disabled):hover {
    background-color: var(--error);
    color: #fff;
}


/* An icon-only button */
button.btn-sym,
.btn-sym,
button[type="reset"]:empty {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}

/* Details/summary for expandable content */
details {
    background-color: var(--surface-container);
    border: 1px solid var(--outline);
    border-radius: var(--radius);
    margin-bottom: var(--spacing-md);
    overflow: hidden;
    transition: box-shadow var(--trans-std);
}

summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--primary);
    padding: var(--spacing-sm) var(--spacing-md);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    user-select: none;
}

/* Custom marker using Material Symbols */
summary::before {
    content: 'keyboard_arrow_down';
    font-family: 'Material Symbols Rounded';
    font-size: 24px;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
}

details[open] summary::before {
    transform: rotate(-180deg);
}

/* Simple fade & slide for the content */
details[open] > *:not(summary) {
    animation: details-show 0.25s ease-out;
    padding: 0 var(--spacing-md) var(--spacing-md);
}

/* Self-contained block children (own background/border) need margin for
   external spacing — padding would go inside their visual boundary. */
details[open] > .segmented-control {
    padding: 0;
    margin: 0 var(--spacing-md) var(--spacing-md);
}

@keyframes details-show {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

summary::-webkit-details-marker {
    display: none;
}

/* Code/pre blocks */
pre,
code,
kbd {
    font-family: var(--font-code);
    font-size: 0.875rem;
}

kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
    font-size: 0.875rem;
    background-color: var(--surface-container-high);
    border: 1px solid var(--outline-variant);
    /* 3D effect to make it look like a physical key. */
    border-bottom: 2px solid var(--outline);
    border-radius: 4px;
    padding: 2px 4px;
    vertical-align: middle;
    line-height: 1;
}

kbd .sym {
    font-size: 1.1em;
    line-height: 1;
}

pre {
    background-color: var(--pre-bg);
    color: var(--pre-color);
    padding: var(--spacing-sm);
    border-radius: 4px;
    overflow-x: auto;
    margin-top: var(--spacing-sm);
}

code {
    background-color: var(--surface-container-high);
    padding: 2px 4px;
    border-radius: 4px;
}

pre code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

dialog :not(pre) > code {
    background-color: color-mix(in srgb, var(--surface-container-highest), var(--on-surface) 8%);
}

button kbd {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.2);
    border-bottom-color: rgba(0, 0, 0, 0.35);
    color: inherit;
    font-size: 0.75em;
}

/* Progress element styling */
progress {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    border: none;
    background-color: var(--outline-variant);
}

progress::-webkit-progress-bar {
    background-color: var(--outline-variant);
    border-radius: 4px;
}

progress::-webkit-progress-value {
    background-color: var(--primary);
    border-radius: 4px;
}

progress::-moz-progress-bar {
    background-color: var(--primary);
    border-radius: 4px;
}

/* aria-busy indicator with spinner */
[aria-busy="true"] {
    cursor: progress;
}

[aria-busy="true"]::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 0.15em solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    vertical-align: text-bottom;
    margin-right: 0.5em;
}

button[aria-busy="true"]::before {
    width: 0.85em;
    height: 0.85em;
    border-width: 0.1em;
}

article[aria-busy="true"] {
    color: var(--on-surface-variant);
    font-style: italic;
    margin: var(--spacing-md) 0;
    display: flex;
    align-items: center;
}

article[aria-busy="true"]::before {
    color: var(--secondary);
    width: 16px;
    height: 16px;
    border-width: 2px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-up {
    animation: animate-up 0.5s ease-out;
}

@keyframes animate-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 9. Modal Dialog --------------------------------------------------------- */
/* Base dialog appearance: centered surface with backdrop */
dialog {
    border: none;
    border-radius: 28px;
    /* M3 extra large shape */
    padding: 0;
    background-color: var(--surface-container-highest);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 90%;
}

/* Modals with larger content (e.g. documentation) */
dialog.modal-info {
    max-width: 800px;
}

/* Backdrop dim and blur */
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
}

/* Dialog internal layout */
dialog article {
    display: flex;
    flex-direction: column;
    padding: 24px;
}

/* Dialog header overrides */
dialog header {
    background-color: transparent;
    color: var(--on-surface);
    box-shadow: none;
    position: relative;
    padding: 0 0 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: none;
}

dialog h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 400;
}

dialog p {
    padding: 0;
    color: var(--on-surface-variant);
    margin: 0 0 24px;
    line-height: 1.5;
}

dialog footer {
    border-top: none;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: transparent;
}

#close-modal {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    color: var(--on-surface-variant);
    font-size: 1.5rem;
    padding: 4px;
    width: auto;
    min-width: 0;
    line-height: 1;
    border: none;
    box-shadow: none;
}

/* 10. Utilities & Addons ---------------------------------------------------- */
/* Visibility toggle — JS-friendly escape hatch */
.hidden {
    display: none !important;
}

/* Hidden on mobile, visible from the desktop breakpoint up */
.hide-mobile {
    display: none !important;
}

@media (min-width: 900px) {
    .hide-mobile {
        display: contents !important;
    }
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

/* --- Layout Helpers --- */
/* Horizontal flex row: children share equal width by default */
.flex-row {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.w-full {
    width: 100%;
}

.d-block {
    display: block;
}

.flex-1 {
    flex: 1;
}

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

.flex-row > * {
    flex: 1;
}

/* Space-between header-style row (title left, action right) */
.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

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

/* --- Gap Utilities --- */
.gap-1 {
    gap: 4px;
}

.gap-2 {
    gap: var(--spacing-sm);
}

/* 8px  */
.gap-3 {
    gap: 12px;
}

.gap-4 {
    gap: var(--spacing-md);
}

/* 16px */
.gap-5 {
    gap: 20px;
}

.gap-6 {
    gap: var(--spacing-lg);
}

/* 24px */

.mt-0 {
    margin-top: 0 !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mt-1 {
    margin-top: 4px;
}

.mt-2 {
    margin-top: var(--spacing-sm);
}

.mt-3 {
    margin-top: 12px;
}

.mt-4 {
    margin-top: var(--spacing-md);
}

.mt-5 {
    margin-top: 20px;
}

.mt-6 {
    margin-top: var(--spacing-lg);
}

/* --- Margin-bottom Scale (mb-1 … mb-6) --- */
.mb-1 {
    margin-bottom: 4px;
}

.mb-2 {
    margin-bottom: var(--spacing-sm);
}

.mb-3 {
    margin-bottom: 12px;
}

.mb-4 {
    margin-bottom: var(--spacing-md);
}

.mb-5 {
    margin-bottom: 20px;
}

.mb-6 {
    margin-bottom: var(--spacing-lg);
}

/* --- Side Margins --- */
.ml-2 {
    margin-left: var(--spacing-sm);
}

.mr-2 {
    margin-right: var(--spacing-sm);
}

.group {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    align-items: center;
}

/* --- Text Utilities --- */
.text-muted {
    color: var(--on-surface-variant);
    font-size: 0.875rem;
}

.text-sm {
    font-size: 0.875rem;
}

.text-xs {
    font-size: 0.75rem;
}

.font-bold {
    font-weight: 700;
}

.font-medium {
    font-weight: 500;
}

.font-normal {
    font-weight: 400;
}


[data-tooltip] {
    /* Associates a unique local scope per element automatically */
    anchor-name: --local-tooltip-anchor;
    anchor-scope: --local-tooltip-anchor;
    position: relative;
    cursor: help;
}

[data-tooltip]::after {
    /* Extracts the text payload directly from the HTML attribute */
    content: attr(data-tooltip);

    /* Establishes the floater relationship */
    position: fixed;
    position-anchor: --local-tooltip-anchor;

    /* Primary placement attempt */
    position-area: top;
    margin-bottom: 8px;
    margin-inline: 12px;

    /* The fallback evaluation sequence
     * Try top-center.
     * If top overflows, flip to bottom-center.
     * If bottom-center overflows left, try shifting it flush-right.
     * If bottom-center overflows right, try shifting it flush-left.
     * If top-center overflows left, try shifting it flush-right.
     * If top-center overflows right, try shifting it flush-left.
     */
    position-try-fallbacks:
    flip-block,
    --bottom-shift-right,
    --bottom-shift-left,
    --shift-right,
    --shift-left;

    /* Visual styling */
    background-color: var(--on-surface-variant);
    color: var(--surface);
    padding: 6px 10px;
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    z-index: 1000;

    /* Interaction and state management */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s, visibility 0.2s;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

/* --- Steps List --- */
.steps {
    list-style: none;
    counter-reset: steps-counter;
    margin: 0 0 var(--spacing-md) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.steps li {
    counter-increment: steps-counter;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--on-surface);
}

.steps li::before {
    content: counter(steps-counter);
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-container-high);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.75rem;
    margin-top: -1.5px;
    /* centers the 26px element relative to the 1.44rem (approx 23px) first-line height */
}


.note {
    background-color: var(--surface-container);
    border-left: 4px solid var(--primary);
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 0 8px 8px 0;
}

/* 11. Print Styles -------------------------------------------------------- */
@media print {
    body {
        background-color: white;
        color: black;
    }

    aside,
    nav,
    .aside-toggle-btn,
    .form-actions {
        display: none !important;
    }

    main {
        padding: 0;
        margin: 0;
    }

    section,
    fieldset {
        border: none;
        box-shadow: none;
        padding: 0;
    }

    a::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: var(--on-surface-variant);
    }

    a[href^="#"]::after {
        content: "";
        /* Don't append internal anchor links in print */
    }
}

/* --- BLUE THEME --- */
.theme-blue {
    --primary: rgb(60 96 144);
    --primary-dark: rgb(33 72 118);
    --on-primary: rgb(255 255 255);
    --secondary: rgb(188 199 220);
    --on-secondary: rgb(10 28 54);
    --selection-bg: var(--primary);
    --selection-color: var(--on-primary);
    --error: rgb(186 26 26);
    --on-error: rgb(255 255 255);

    --surface: rgb(249 249 255);
    --surface-container-low: rgb(242 243 250);
    --surface-container: rgb(237 237 244);
    --surface-container-high: rgb(231 232 238);
    --surface-container-highest: rgb(225 226 233);

    --on-surface: rgb(25 28 32);
    --on-surface-variant: rgb(67 71 78);
    --outline: rgb(116 119 127);
    --outline-variant: rgb(195 198 207);
}

@media (prefers-color-scheme: dark) {
    .theme-blue:not([data-theme="light"]) {
        --primary: rgb(165 200 255);
        --primary-dark: color-mix(in srgb, var(--primary), var(--on-primary) 20%);
        --on-primary: rgb(0 49 94);
        --secondary: rgb(188 199 220);
        --on-secondary: rgb(10 28 54);
        --selection-bg: var(--primary);
        --selection-color: var(--on-primary);
        --error: rgb(255 180 171);
        --on-error: rgb(105 0 5);

        --surface: rgb(17 19 24);
        --surface-container-low: rgb(25 28 32);
        --surface-container: rgb(29 32 36);
        --surface-container-high: rgb(40 42 47);
        --surface-container-highest: rgb(50 53 58);

        --on-surface: rgb(225 226 233);
        --on-surface-variant: rgb(195 198 207);
        --outline: rgb(141 145 153);
        --outline-variant: rgb(67 71 78);
    }
}

.theme-blue[data-theme="dark"] {
    --primary: rgb(165 200 255);
    --primary-dark: color-mix(in srgb, var(--primary), var(--on-primary) 20%);
    --on-primary: rgb(0 49 94);
    --secondary: rgb(188 199 220);
    --on-secondary: rgb(10 28 54);
    --selection-bg: var(--primary);
    --selection-color: var(--on-primary);
    --error: rgb(255 180 171);
    --on-error: rgb(105 0 5);

    --surface: rgb(17 19 24);
    --surface-container-low: rgb(25 28 32);
    --surface-container: rgb(29 32 36);
    --surface-container-high: rgb(40 42 47);
    --surface-container-highest: rgb(50 53 58);

    --on-surface: rgb(225 226 233);
    --on-surface-variant: rgb(195 198 207);
    --outline: rgb(141 145 153);
    --outline-variant: rgb(67 71 78);
}

/* --- TURQUOISE THEME --- */
.theme-turquoise {
    --primary: rgb(0 104 123);
    --primary-dark: rgb(0 78 93);
    --on-primary: rgb(255 255 255);
    --secondary: rgb(178 203 211);
    --on-secondary: rgb(0 54 65);
    --selection-bg: var(--primary);
    --selection-color: var(--on-primary);
    --error: rgb(186 26 26);
    --on-error: rgb(255 255 255);

    --surface: rgb(245 250 252);
    --surface-container-low: rgb(239 244 247);
    --surface-container: rgb(233 239 241);
    --surface-container-high: rgb(228 233 235);
    --surface-container-highest: rgb(222 227 230);

    --on-surface: rgb(23 28 30);
    --on-surface-variant: rgb(64 72 75);
    --outline: rgb(112 120 124);
    --outline-variant: rgb(191 200 203);
}

@media (prefers-color-scheme: dark) {
    .theme-turquoise:not([data-theme="light"]) {
        --primary: rgb(133 210 232);
        --primary-dark: color-mix(in srgb, var(--primary), var(--on-primary) 20%);
        --on-primary: rgb(0 54 65);
        --secondary: rgb(178 203 211);
        --on-secondary: rgb(0 54 65);
        --selection-bg: var(--primary);
        --selection-color: var(--on-primary);
        --error: rgb(255 180 171);
        --on-error: rgb(105 0 5);

        --surface: rgb(15 20 22);
        --surface-container-low: rgb(23 28 30);
        --surface-container: rgb(27 32 34);
        --surface-container-high: rgb(37 43 45);
        --surface-container-highest: rgb(48 54 56);

        --on-surface: rgb(222 227 230);
        --on-surface-variant: rgb(191 200 203);
        --outline: rgb(137 146 149);
        --outline-variant: rgb(64 72 75);
    }
}

.theme-turquoise[data-theme="dark"] {
    --primary: rgb(133 210 232);
    --primary-dark: color-mix(in srgb, var(--primary), var(--on-primary) 20%);
    --on-primary: rgb(0 54 65);
    --secondary: rgb(178 203 211);
    --on-secondary: rgb(0 54 65);
    --selection-bg: var(--primary);
    --selection-color: var(--on-primary);
    --error: rgb(185 26 26);
    --on-error: rgb(255 255 255);

    --surface: rgb(15 20 22);
    --surface-container-low: rgb(23 28 30);
    --surface-container: rgb(27 32 34);
    --surface-container-high: rgb(37 43 45);
    --surface-container-highest: rgb(48 54 56);

    --on-surface: rgb(222 227 230);
    --on-surface-variant: rgb(191 200 203);
    --outline: rgb(137 146 149);
    --outline-variant: rgb(64 72 75);
}

/* --- GREEN THEME --- */
.theme-green {
    --primary: rgb(73 103 45);
    --primary-dark: rgb(51 78 24);
    --on-primary: rgb(255 255 255);
    --secondary: rgb(191 203 174);
    --on-secondary: rgb(29 55 3);
    --selection-bg: var(--primary);
    --selection-color: var(--on-primary);
    --error: rgb(186 26 26);
    --on-error: rgb(255 255 255);

    --surface: rgb(249 250 239);
    --surface-container-low: rgb(243 245 233);
    --surface-container: rgb(237 239 228);
    --surface-container-high: rgb(232 233 222);
    --surface-container-highest: rgb(226 227 217);

    --on-surface: rgb(26 29 22);
    --on-surface-variant: rgb(68 72 62);
    --outline: rgb(116 121 108);
    --outline-variant: rgb(196 200 186);
}

@media (prefers-color-scheme: dark) {
    .theme-green:not([data-theme="light"]) {
        --primary: rgb(175 209 140);
        --primary-dark: color-mix(in srgb, var(--primary), var(--on-primary) 20%);
        --on-primary: rgb(29 55 3);
        --secondary: rgb(191 203 174);
        --on-secondary: rgb(29 55 3);
        --selection-bg: var(--primary);
        --selection-color: var(--on-primary);
        --error: rgb(255 180 171);
        --on-error: rgb(105 0 5);

        --surface: rgb(17 20 14);
        --surface-container-low: rgb(26 29 22);
        --surface-container: rgb(30 33 26);
        --surface-container-high: rgb(40 43 36);
        --surface-container-highest: rgb(51 54 46);

        --on-surface: rgb(226 227 217);
        --on-surface-variant: rgb(196 200 186);
        --outline: rgb(142 146 133);
        --outline-variant: rgb(68 72 62);
    }
}

.theme-green[data-theme="dark"] {
    --primary: rgb(175 209 140);
    --primary-dark: color-mix(in srgb, var(--primary), var(--on-primary) 20%);
    --on-primary: rgb(29 55 3);
    --secondary: rgb(191 203 174);
    --on-secondary: rgb(29 55 3);
    --selection-bg: var(--primary);
    --selection-color: var(--on-primary);
    --error: rgb(255 180 171);
    --on-error: rgb(105 0 5);

    --surface: rgb(17 20 14);
    --surface-container-low: rgb(26 29 22);
    --surface-container: rgb(30 33 26);
    --surface-container-high: rgb(40 43 36);
    --surface-container-highest: rgb(51 54 46);

    --on-surface: rgb(226 227 217);
    --on-surface-variant: rgb(196 200 186);
    --outline: rgb(142 146 133);
    --outline-variant: rgb(68 72 62);
}

/* --- ORANGE THEME --- */
.theme-orange {
    --primary: rgb(137 81 31);
    --primary-dark: rgb(108 58 8);
    --on-primary: rgb(255 255 255);
    --secondary: rgb(227 192 166);
    --on-secondary: rgb(78 38 0);
    --selection-bg: var(--primary);
    --selection-color: var(--on-primary);
    --error: rgb(186 26 26);
    --on-error: rgb(255 255 255);

    --surface: rgb(255 248 245);
    --surface-container-low: rgb(255 241 233);
    --surface-container: rgb(251 235 225);
    --surface-container-high: rgb(245 229 220);
    --surface-container-highest: rgb(239 223 214);

    --on-surface: rgb(34 26 20);
    --on-surface-variant: rgb(81 68 59);
    --outline: rgb(132 116 105);
    --outline-variant: rgb(214 195 183);
}

@media (prefers-color-scheme: dark) {
    .theme-orange:not([data-theme="light"]) {
        --primary: rgb(255 183 127);
        --primary-dark: color-mix(in srgb, var(--primary), var(--on-primary) 20%);
        --on-primary: rgb(78 38 0);
        --secondary: rgb(227 192 166);
        --on-secondary: rgb(78 38 0);
        --selection-bg: var(--primary);
        --selection-color: var(--on-primary);
        --error: rgb(255 180 171);
        --on-error: rgb(105 0 5);

        --surface: rgb(25 18 13);
        --surface-container-low: rgb(34 26 20);
        --surface-container: rgb(38 30 24);
        --surface-container-high: rgb(49 40 34);
        --surface-container-highest: rgb(60 51 45);

        --on-surface: rgb(239 223 214);
        --on-surface-variant: rgb(214 195 183);
        --outline: rgb(158 141 130);
        --outline-variant: rgb(81 68 59);
    }
}

.theme-orange[data-theme="dark"] {
    --primary: rgb(255 183 127);
    --primary-dark: color-mix(in srgb, var(--primary), var(--on-primary) 20%);
    --on-primary: rgb(78 38 0);
    --secondary: rgb(227 192 166);
    --on-secondary: rgb(78 38 0);
    --selection-bg: var(--primary);
    --selection-color: var(--on-primary);
    --error: rgb(255 180 171);
    --on-error: rgb(105 0 5);

    --surface: rgb(25 18 13);
    --surface-container-low: rgb(34 26 20);
    --surface-container: rgb(38 30 24);
    --surface-container-high: rgb(49 40 34);
    --surface-container-highest: rgb(60 51 45);

    --on-surface: rgb(239 223 214);
    --on-surface-variant: rgb(214 195 183);
    --outline: rgb(158 141 130);
    --outline-variant: rgb(81 68 59);
}

/* --- PURPLE THEME --- */
.theme-purple {
    --primary: rgb(85 90 146);
    --primary-dark: rgb(61 66 121);
    --on-primary: rgb(255 255 255);
    --secondary: rgb(197 196 221);
    --on-secondary: rgb(38 43 96);
    --selection-bg: var(--primary);
    --selection-color: var(--on-primary);
    --error: rgb(186 26 26);
    --on-error: rgb(255 255 255);

    --surface: rgb(251 248 255);
    --surface-container-low: rgb(245 242 250);
    --surface-container: rgb(240 236 244);
    --surface-container-high: rgb(234 231 239);
    --surface-container-highest: rgb(228 225 233);

    --on-surface: rgb(27 27 33);
    --on-surface-variant: rgb(70 70 79);
    --outline: rgb(119 118 128);
    --outline-variant: rgb(199 197 208);
}

@media (prefers-color-scheme: dark) {
    .theme-purple:not([data-theme="light"]) {
        --primary: rgb(190 194 255);
        --primary-dark: color-mix(in srgb, var(--primary), var(--on-primary) 20%);
        --on-primary: rgb(38 43 96);
        --secondary: rgb(197 196 221);
        --on-secondary: rgb(38 43 96);
        --selection-bg: var(--primary);
        --selection-color: var(--on-primary);
        --error: rgb(255 180 171);
        --on-error: rgb(105 0 5);

        --surface: rgb(19 19 24);
        --surface-container-low: rgb(27 27 33);
        --surface-container: rgb(31 31 37);
        --surface-container-high: rgb(42 41 47);
        --surface-container-highest: rgb(52 52 58);

        --on-surface: rgb(228 225 233);
        --on-surface-variant: rgb(199 197 208);
        --outline: rgb(145 144 154);
        --outline-variant: rgb(70 70 79);
    }
}

.theme-purple[data-theme="dark"] {
    --primary: rgb(190 194 255);
    --primary-dark: color-mix(in srgb, var(--primary), var(--on-primary) 20%);
    --on-primary: rgb(38 43 96);
    --secondary: rgb(197 196 221);
    --on-secondary: rgb(38 43 96);
    --selection-bg: var(--primary);
    --selection-color: var(--on-primary);
    --error: rgb(255 180 171);
    --on-error: rgb(105 0 5);

    --surface: rgb(19 19 24);
    --surface-container-low: rgb(27 27 33);
    --surface-container: rgb(31 31 37);
    --surface-container-high: rgb(42 41 47);
    --surface-container-highest: rgb(52 52 58);

    --on-surface: rgb(228 225 233);
    --on-surface-variant: rgb(199 197 208);
    --outline: rgb(145 144 154);
    --outline-variant: rgb(70 70 79);
}

/* --- RED THEME --- */
.theme-red {
    --primary: rgb(144 74 65);
    --primary-dark: rgb(115 52 44);
    --on-primary: rgb(255 255 255);
    --secondary: rgb(231 189 183);
    --on-secondary: rgb(86 30 23);
    --selection-bg: var(--primary);
    --selection-color: var(--on-primary);
    --error: rgb(186 26 26);
    --on-error: rgb(255 255 255);

    --surface: rgb(255 248 247);
    --surface-container-low: rgb(255 240 238);
    --surface-container: rgb(252 234 231);
    --surface-container-high: rgb(247 228 225);
    --surface-container-highest: rgb(241 222 220);

    --on-surface: rgb(35 25 24);
    --on-surface-variant: rgb(83 67 65);
    --outline: rgb(133 115 112);
    --outline-variant: rgb(216 194 190);
}

@media (prefers-color-scheme: dark) {
    .theme-red:not([data-theme="light"]) {
        --primary: rgb(255 180 169);
        --primary-dark: color-mix(in srgb, var(--primary), var(--on-primary) 20%);
        --on-primary: rgb(86 30 23);
        --secondary: rgb(231 189 183);
        --on-secondary: rgb(86 30 23);
        --selection-bg: var(--primary);
        --selection-color: var(--on-primary);
        --error: rgb(255 180 171);
        --on-error: rgb(105 0 5);

        --surface: rgb(26 17 16);
        --surface-container-low: rgb(35 25 24);
        --surface-container: rgb(39 29 28);
        --surface-container-high: rgb(50 40 38);
        --surface-container-highest: rgb(61 50 49);

        --on-surface: rgb(241 222 220);
        --on-surface-variant: rgb(216 194 190);
        --outline: rgb(160 140 137);
        --outline-variant: rgb(83 67 65);
    }
}

.theme-red[data-theme="dark"] {
    --primary: rgb(255 180 169);
    --primary-dark: color-mix(in srgb, var(--primary), var(--on-primary) 20%);
    --on-primary: rgb(86 30 23);
    --secondary: rgb(231 189 183);
    --on-secondary: rgb(86 30 23);
    --selection-bg: var(--primary);
    --selection-color: var(--on-primary);
    --error: rgb(255 180 171);
    --on-error: rgb(105 0 5);

    --surface: rgb(26 17 16);
    --surface-container-low: rgb(35 25 24);
    --surface-container: rgb(39 29 28);
    --surface-container-high: rgb(50 40 38);
    --surface-container-highest: rgb(61 50 49);

    --on-surface: rgb(241 222 220);
    --on-surface-variant: rgb(216 194 190);
    --outline: rgb(160 140 137);
    --outline-variant: rgb(83 67 65);
}

/* --- OCKER THEME --- */
.theme-ocker {
    --primary: rgb(114 92 12);
    --primary-dark: rgb(87 69 0);
    --on-primary: rgb(255 255 255);
    --secondary: rgb(212 197 161);
    --on-secondary: rgb(60 47 0);
    --selection-bg: var(--primary);
    --selection-color: var(--on-primary);
    --error: rgb(186 26 26);
    --on-error: rgb(255 255 255);

    --surface: rgb(255 248 240);
    --surface-container-low: rgb(251 243 229);
    --surface-container: rgb(245 237 223);
    --surface-container-high: rgb(239 231 217);
    --surface-container-highest: rgb(234 226 212);

    --on-surface: rgb(31 27 19);
    --on-surface-variant: rgb(76 70 57);
    --outline: rgb(125 118 103);
    --outline-variant: rgb(207 198 180);
}

@media (prefers-color-scheme: dark) {
    .theme-ocker:not([data-theme="light"]) {
        --primary: rgb(226 196 109);
        --primary-dark: color-mix(in srgb, var(--primary), var(--on-primary) 20%);
        --on-primary: rgb(60 47 0);
        --secondary: rgb(212 197 161);
        --on-secondary: rgb(60 47 0);
        --selection-bg: var(--primary);
        --selection-color: var(--on-primary);
        --error: rgb(255 180 171);
        --on-error: rgb(105 0 5);

        --surface: rgb(22 19 11);
        --surface-container-low: rgb(31 27 19);
        --surface-container: rgb(35 31 23);
        --surface-container-high: rgb(45 42 33);
        --surface-container-highest: rgb(56 52 43);

        --on-surface: rgb(234 226 212);
        --on-surface-variant: rgb(207 198 180);
        --outline: rgb(152 144 128);
        --outline-variant: rgb(76 70 57);
    }
}

.theme-ocker[data-theme="dark"] {
    --primary: rgb(226 196 109);
    --primary-dark: color-mix(in srgb, var(--primary), var(--on-primary) 20%);
    --on-primary: rgb(60 47 0);
    --secondary: rgb(212 197 161);
    --on-secondary: rgb(60 47 0);
    --selection-bg: var(--primary);
    --selection-color: var(--on-primary);
    --error: rgb(255 180 171);
    --on-error: rgb(105 0 5);

    --surface: rgb(22 19 11);
    --surface-container-low: rgb(31 27 19);
    --surface-container: rgb(35 31 23);
    --surface-container-high: rgb(45 42 33);
    --surface-container-highest: rgb(56 52 43);

    --on-surface: rgb(234 226 212);
    --on-surface-variant: rgb(207 198 180);
    --outline: rgb(152 144 128);
    --outline-variant: rgb(76 70 57);
}

/* --- PINK THEME --- */
.theme-pink {
    --primary: rgb(138 74 100);
    --primary-dark: rgb(110 51 77);
    --on-primary: rgb(255 255 255);
    --secondary: rgb(225 189 200);
    --on-secondary: rgb(83 29 54);
    --selection-bg: var(--primary);
    --selection-color: var(--on-primary);
    --error: rgb(186 26 26);
    --on-error: rgb(255 255 255);

    --surface: rgb(255 248 248);
    --surface-container-low: rgb(255 240 243);
    --surface-container: rgb(250 234 237);
    --surface-container-high: rgb(244 228 232);
    --surface-container-highest: rgb(238 223 226);

    --on-surface: rgb(33 25 28);
    --on-surface-variant: rgb(81 67 71);
    --outline: rgb(131 115 120);
    --outline-variant: rgb(213 194 199);
}

@media (prefers-color-scheme: dark) {
    .theme-pink:not([data-theme="light"]) {
        --primary: rgb(255 176 205);
        --primary-dark: color-mix(in srgb, var(--primary), var(--on-primary) 20%);
        --on-primary: rgb(83 29 54);
        --secondary: rgb(225 189 200);
        --on-secondary: rgb(83 29 54);
        --selection-bg: var(--primary);
        --selection-color: var(--on-primary);
        --error: rgb(255 180 171);
        --on-error: rgb(105 0 5);

        --surface: rgb(25 17 20);
        --surface-container-low: rgb(33 25 28);
        --surface-container: rgb(38 29 32);
        --surface-container-high: rgb(48 40 42);
        --surface-container-highest: rgb(60 50 53);

        --on-surface: rgb(238 223 226);
        --on-surface-variant: rgb(213 194 199);
        --outline: rgb(157 140 145);
        --outline-variant: rgb(81 67 71);
    }
}

.theme-pink[data-theme="dark"] {
    --primary: rgb(255 176 205);
    --primary-dark: color-mix(in srgb, var(--primary), var(--on-primary) 20%);
    --on-primary: rgb(83 29 54);
    --secondary: rgb(225 189 200);
    --on-secondary: rgb(83 29 54);
    --selection-bg: var(--primary);
    --selection-color: var(--on-primary);
    --error: rgb(255 180 171);
    --on-error: rgb(105 0 5);

    --surface: rgb(25 17 20);
    --surface-container-low: rgb(33 25 28);
    --surface-container: rgb(38 29 32);
    --surface-container-high: rgb(48 40 42);
    --surface-container-highest: rgb(60 50 53);

    --on-surface: rgb(238 223 226);
    --on-surface-variant: rgb(213 194 199);
    --outline: rgb(157 140 145);
    --outline-variant: rgb(81 67 71);
}

/* =========================================
   CENTERED LAYOUT OVERRIDE
   Activates with <html class="layout-centered">
   ========================================= */
.layout-centered {
    display: flex;
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    align-items: center;
    justify-content: center;
    padding: 24px;
    flex-direction: column;
}

.layout-centered body {
    min-height: auto;
    display: block;
    width: 100%;
}

.layout-centered main {
    max-width: 700px;
    width: 100%;
}