/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face {
    font-family: 'Silka';
    src: url('/fonts/silka-regular-webfont.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Silka';
    src: url('/fonts/silka-regularitalic-webfont.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* ==========================================================================
   Base styles
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Light mode (default) */
:root {
    --color-primary: #2a9d8f;
    --color-primary-hover: #287271;
    --color-error: #e76f51;
    --color-success: #2a9d8f;
    --color-text: #1a2e35;
    --color-text-muted: #287271;
    --color-bg: #fdf6ed;
    --color-white: #fffcf8;
    --color-border: var(--color-primary);

    /* Button colors - standard */
    --button-standard-bg: #fffcf8;
    --button-standard-bg-hover: #f0e6dc;
    --button-standard-text: #264653;

    /* Button colors - CTA (call to action) */
    --button-cta-bg: #2a9d8f;
    --button-cta-bg-hover: #287271;
    --button-cta-text: #fffcf8;
    --shadow-sm:
        0.5px 0.5px 0 0 #e8ddd2,
        1px 1px 0 0 #e8ddd2,
        1.5px 1.5px 0 0 #e8ddd2,
        2px 2px 0 0 #e8ddd2,
        2.5px 2.5px 0 0 #e8ddd2,
        3px 3px 0 0 #e8ddd2;
    --shadow-md:
        0.5px 0.5px 0 0 #e8ddd2,
        1px 1px 0 0 #e8ddd2,
        1.5px 1.5px 0 0 #e8ddd2,
        2px 2px 0 0 #e8ddd2,
        2.5px 2.5px 0 0 #e8ddd2,
        3px 3px 0 0 #e8ddd2;
    --shadow-lg:
        0.5px 0.5px 0 0 #e8ddd2,
        1px 1px 0 0 #e8ddd2,
        1.5px 1.5px 0 0 #e8ddd2,
        2px 2px 0 0 #e8ddd2,
        2.5px 2.5px 0 0 #e8ddd2,
        3px 3px 0 0 #e8ddd2;
    --shadow-hero: 0 0 80px 30px rgba(0, 0, 0, 0.15);
    --radius-sm: 2px;
    --radius-md: 2px;
    --radius-lg: 2px;
    --radius-full: 9999px;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1.5rem;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --color-primary: #2a9d8f;
        --color-primary-hover: #8ab17d;
        --color-error: #ee8959;
        --color-success: #8ab17d;
        --color-text: #fdf6ed;
        --color-text-muted: #e9c46a;
        --color-bg: #1a2e35;
        --color-white: #264653;
        --color-border: #287271;

        /* Button colors - standard (matches stat cards) */
        --button-standard-bg: #264653;
        --button-standard-bg-hover: #2d5261;
        --button-standard-text: #fdf6ed;

        /* Button colors - CTA (call to action) */
        --button-cta-bg: #2a9d8f;
        --button-cta-bg-hover: #8ab17d;
        --button-cta-text: #1a2e35;
        --shadow-sm:
            0.5px 0.5px 0 0 #142529,
            1px 1px 0 0 #142529,
            1.5px 1.5px 0 0 #142529,
            2px 2px 0 0 #142529,
            2.5px 2.5px 0 0 #142529,
            3px 3px 0 0 #142529;
        --shadow-md:
            0.5px 0.5px 0 0 #142529,
            1px 1px 0 0 #142529,
            1.5px 1.5px 0 0 #142529,
            2px 2px 0 0 #142529,
            2.5px 2.5px 0 0 #142529,
            3px 3px 0 0 #142529;
        --shadow-lg:
            0.5px 0.5px 0 0 #142529,
            1px 1px 0 0 #142529,
            1.5px 1.5px 0 0 #142529,
            2px 2px 0 0 #142529,
            2.5px 2.5px 0 0 #142529,
            3px 3px 0 0 #142529;
        --shadow-hero: 0 0 40px 20px rgba(0, 0, 0, 0.4);
    }
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    font-family: 'Silka', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.5;
}

/* ==========================================================================
   Button component
   ========================================================================== */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.button:active {
    transform: scale(0.98);
}

/* Standard button (secondary actions) */
.button--standard,
.button--text {
    background-color: var(--button-standard-bg);
    color: var(--button-standard-text);
}

.button--standard:hover,
.button--text:hover {
    background-color: var(--button-standard-bg-hover);
}

/* CTA button (primary actions) */
.button--cta,
.button--primary {
    background-color: var(--button-cta-bg);
    color: var(--button-cta-text);
}

.button--cta:hover,
.button--primary:hover {
    background-color: var(--button-cta-bg-hover);
}

/* Small button */
.button--small {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* ==========================================================================
   Form field component
   ========================================================================== */

.form-field {
    margin-bottom: var(--space-lg);
}

.form-field__label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text);
}

.form-field__input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    text-align: left;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-field__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
}

/* Error state */
.form-field__input--error {
    border-color: var(--color-error);
}

.form-field__input--error:focus {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgb(220 38 38 / 0.1);
}

.form-field__error {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--color-error);
}

/* ==========================================================================
   Auth pages (login/register)
   ========================================================================== */

.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1rem;
}

.auth {
    width: 100%;
    max-width: 24rem;
    padding: var(--space-md);
    background-color: var(--color-white);
    color: var(--color-text);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.auth__logo {
    display: block;
    width: 68px;
    height: 68px;
    margin: 0 auto var(--space-md);
}

.auth__logo img {
    display: block;
    width: 100%;
    height: 100%;
}

.auth__title {
    margin: 0 0 var(--space-lg);
    font-size: 1.5rem;
    font-weight: 400;
    text-align: center;
}

.auth__cta {
    margin-bottom: var(--space-md);
}

.auth__cta .button {
    width: 100%;
}

.auth__divider {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.auth__divider::before,
.auth__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--color-border);
}

.auth__form {
    margin: 0;
}

.auth__form .form-field {
    margin-bottom: var(--space-md);
}

.auth__remember {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    font-size: 0.9375rem;
    cursor: pointer;
}

.auth__remember input {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--color-primary);
}

.auth__back {
    display: block;
    margin-top: var(--space-lg);
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.auth__back:hover {
    color: var(--color-text);
}

/* ==========================================================================
   Home page (public landing)
   ========================================================================== */

.home-page {
    /* Allow scrolling on mobile instead of squishing content */
    min-height: 100vh;
    min-height: 100dvh;
}

.home {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
    gap: var(--space-md);
    max-width: 500px;
    margin: 0 auto;
}

.hero {
    text-align: center;
    width: calc(100% + 5rem);
    padding: 2rem;
    margin: -3rem -1rem;
    background-color: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-hero);
    position: relative;
    z-index: 10;
}

/* Demo tracker grid on home page - always single column */
.tracker-grid--demo {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Demo cards need min-height since they're not in a grid layout */
.tracker-card--demo {
    min-height: 6rem;
}

.hero__logo {
    display: block;
    width: 100%;
    max-width: 12rem;
    aspect-ratio: 61 / 43;
    margin: 0 auto var(--space-md);
    color: var(--color-primary);
    fill: var(--color-primary);
    .faded {
        opacity: 0.2;
    }
}
h1 {
    margin: 0;
    padding: 0;
    line-height: 0;
}

.hero__title {
    margin: -2em 0 var(--space-lg);
    font-size: 1rem;
    font-weight: 400;
}

.hero__tagline {
    margin: 0 0 var(--space-sm);
    font-size: 1.25rem;
}

.hero__description {
    margin: 0 0 var(--space-lg);
}

.hero__actions {
    display: flex;
    gap: var(--space-sm);
}

.hero__actions .button {
    flex: 1;
}

.hero__footer {
    margin: var(--space-md) 0 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    transform: translateY(1em);
}

.hero__footer a {
    color: inherit;
}

.home-footer {
    padding: 2rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.home-footer p {
    margin: 0;
}

.home-footer a {
    color: inherit;
}

.home-footer a:hover {
    color: var(--color-text);
}

/* ==========================================================================
   Dashboard page
   ========================================================================== */

.dashboard-page {
    min-height: 100vh;
}

/* Header */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background-color: var(--color-white);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}

.header__left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 400;
}

.header__logout {
    margin: 0;
}

.header__back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.header__back:hover {
    background-color: var(--color-border);
    color: var(--color-text);
}

.header__back:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.header__back-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* Tracker navigation */
.tracker-nav {
    display: flex;
    gap: 0.25rem;
}

.tracker-nav__link {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.tracker-nav__link:hover {
    background-color: var(--color-border);
    color: var(--color-text);
}

.tracker-nav__link--active {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.tracker-nav__link--active:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-white);
}

/* Dashboard main area */
.dashboard {
    max-width: 48rem;
    margin: 0 auto;
    padding: var(--space-md);
}

/* ==========================================================================
   Track section
   ========================================================================== */

/* ==========================================================================
   Page header (sticky nav with back button)
   ========================================================================== */

.page-header {
    display: flex;
    align-items: stretch;
    gap: var(--space-md);
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--color-bg);
    transition: box-shadow 0.35s ease;
    /* Negate parent padding on mobile */
    padding: var(--space-md);
    margin: calc(-1 * var(--space-md));
    margin-bottom: 0;
}

/* Full-bleed on desktop to extend shadow past max-width container */
@media (min-width: 768px) {
    .page-header {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: 0;
        margin-bottom: 0;
        padding: var(--space-md) calc(50vw - 50%);
    }
}

.page-header--scrolled {
    box-shadow: 0 4px 0 0 rgb(38 70 83 / 0.1);
}

.page-header__back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    background-color: var(--button-standard-bg);
    border-radius: var(--radius-lg);
    color: var(--button-standard-text);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    box-shadow: var(--shadow-sm);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.page-header__back:hover {
    background-color: var(--button-standard-bg-hover);
}

.page-header__back:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.page-header__back-icon {
    width: 1.5rem;
    height: 1.5rem;
}

/* Title box variant */
.page-header__title {
    flex: 1;
    margin: 0;
    padding: var(--space-md);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* Themed title variants */
.page-header__title--theme-1 { background-color: #264653; color: #fffcf8; }
.page-header__title--theme-2 { background-color: #287271; color: #fffcf8; }
.page-header__title--theme-3 { background-color: #2a9d8f; color: #fffcf8; }
.page-header__title--theme-4 { background-color: #8ab17d; color: #264653; }
.page-header__title--theme-5 { background-color: #babb74; color: #264653; }
.page-header__title--theme-6 { background-color: #e9c46a; color: #264653; }
.page-header__title--theme-7 { background-color: #efb366; color: #264653; }
.page-header__title--theme-8 { background-color: #f4a261; color: #264653; }
.page-header__title--theme-9 { background-color: #ee8959; color: #264653; }
.page-header__title--theme-10 { background-color: #e76f51; color: #fffcf8; }

.track-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 10rem;
    height: 10rem;
    padding: 1.5rem;
    font-family: inherit;
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    box-shadow: var(--shadow-lg);
}

.track-button:hover {
    background-color: var(--color-primary-hover);
    transform: scale(1.02);
}

.track-button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

.track-button:active {
    transform: scale(0.98);
}

/* Visual feedback after tracking */
.track-button--success {
    background-color: var(--color-success);
}

.track-button__text {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-white);
}

/* Wide track button for dashboard */
.track-button-wide {
    flex: 1;
    padding: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: inherit;
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
    box-shadow: var(--shadow-lg);
}

.track-button-wide:hover {
    background-color: var(--color-primary-hover);
}

.track-button-wide:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

.track-button-wide:active {
    transform: scale(0.98);
}

.track-button-wide--success {
    background-color: var(--color-success);
}

/* Track button color variants with per-theme contrast */
.track-button-wide--theme-1 { background-color: #264653; color: #fffcf8; }
.track-button-wide--theme-2 { background-color: #287271; color: #fffcf8; }
.track-button-wide--theme-3 { background-color: #2a9d8f; color: #fffcf8; }
.track-button-wide--theme-4 { background-color: #8ab17d; color: #264653; }
.track-button-wide--theme-5 { background-color: #babb74; color: #264653; }
.track-button-wide--theme-6 { background-color: #e9c46a; color: #264653; }
.track-button-wide--theme-7 { background-color: #efb366; color: #264653; }
.track-button-wide--theme-8 { background-color: #f4a261; color: #264653; }
.track-button-wide--theme-9 { background-color: #ee8959; color: #264653; }
.track-button-wide--theme-10 { background-color: #e76f51; color: #fffcf8; }

.track-button-wide__name {
    font-size: 1.25rem;
    font-weight: 400;
    color: inherit;
}

/* Actions section (below track button) */
.actions-section {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.actions-section .button {
    flex: 1;
    padding: 0.75rem 0.5rem;
    font-size: 0.875rem;
    border-radius: var(--radius-md);
    color: var(--color-text);
}


.actions-section .button--danger {
    color: var(--color-error);
}

/* Historical section */
.historical-section {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-md);
}

/* ==========================================================================
   Stats section
   ========================================================================== */

.stats-section {
    margin-bottom: var(--space-md);
}

.stats-section__header {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.stats-section__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text);
}

.stats-section__range {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    color: var(--color-text);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.stats-section__range:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.stat-card {
    padding: var(--space-md);
    background-color: var(--color-white);
    color: var(--color-text);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.stat-card__label {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

.stat-card__value {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-text);
}

/* Trend indicator styles */
.stat-card__value--trend-up {
    color: var(--color-success);
}

.stat-card__value--trend-down {
    color: var(--color-error);
}

/* ==========================================================================
   Chart section
   ========================================================================== */

.chart-section {
    background-color: var(--color-white);
    color: var(--color-text);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-md);
}

.chart-section__header {
    margin-bottom: var(--space-md);
}

.chart-section__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

.chart-container {
    position: relative;
    height: 16rem;
}

/* ==========================================================================
   Entries section
   ========================================================================== */

.entries-section {
    background-color: var(--color-white);
    color: var(--color-text);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.entries-section__title {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

.entries-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.entries-list__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
}

.entries-list__item:last-child {
    border-bottom: none;
}

.entries-list__content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.entries-list__date {
    font-size: 0.875rem;
    color: var(--color-text);
}

.entries-list__time {
    margin-left: 0.5rem;
    color: var(--color-text-muted);
}

.entries-list__comment {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entries-list__delete {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.entries-list__delete:hover {
    color: var(--color-error);
    background-color: rgb(181 74 74 / 0.1);
}

@media (prefers-color-scheme: dark) {
    .entries-list__delete:hover {
        background-color: rgb(224 112 112 / 0.15);
    }
}

.entries-list__delete:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.entries-list__empty {
    padding: 1rem 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* Entries list pagination */
.entries-list__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-md) 0 0;
    margin-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
}

.entries-list__page-btn {
    padding: 0.375rem 0.75rem;
    font-family: inherit;
    font-size: 0.8125rem;
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.entries-list__page-btn:hover:not(:disabled) {
    background-color: var(--button-standard-bg-hover);
    border-color: var(--color-primary);
}

.entries-list__page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.entries-list__page-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.entries-list__page-info {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* ==========================================================================
   Empty state
   ========================================================================== */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    flex: 1;
}

.empty-state__text {
    margin: 0 0 1.5rem;
    font-size: 1.125rem;
    color: var(--color-text-muted);
}

/* ==========================================================================
   Dialog component
   ========================================================================== */

.dialog {
    margin: auto;
    width: calc(100% - 2rem);
    max-width: 24rem;
    padding: 1.5rem;
    background-color: var(--color-white);
    color: var(--color-text);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.dialog::backdrop {
    background-color: rgb(0 0 0 / 0.5);
}

.dialog--wide {
    max-width: 32rem;
}

.dialog__title {
    margin: 0 0 1.5rem;
    font-size: 1.25rem;
    font-weight: 400;
}

.dialog__form {
    margin: 0;
}

.dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

/* Color picker */
.color-picker {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}

.color-picker__option {
    aspect-ratio: 1;
    width: 100%;
    border: 2px solid rgb(255 255 255 / 0.5);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.color-picker__option:hover {
    transform: scale(1.1);
}

.color-picker__option:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

.color-picker__option--selected {
    box-shadow: 0 0 0 3px var(--color-white), 0 0 0 5px var(--color-text);
}

/* Color picker color variants */
.color-picker__option--theme-1 { background-color: #264653; }
.color-picker__option--theme-2 { background-color: #287271; }
.color-picker__option--theme-3 { background-color: #2a9d8f; }
.color-picker__option--theme-4 { background-color: #8ab17d; }
.color-picker__option--theme-5 { background-color: #babb74; }
.color-picker__option--theme-6 { background-color: #e9c46a; }
.color-picker__option--theme-7 { background-color: #efb366; }
.color-picker__option--theme-8 { background-color: #f4a261; }
.color-picker__option--theme-9 { background-color: #ee8959; }
.color-picker__option--theme-10 { background-color: #e76f51; }

/* Trackers list in dialog */
.trackers-list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.trackers-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
}

.trackers-list__item:last-child {
    border-bottom: none;
}

.trackers-list__name {
    font-size: 0.9375rem;
    font-weight: 400;
}

.trackers-list__actions {
    display: flex;
    gap: 0.25rem;
}

/* Add tracker form */
.add-tracker-form {
    display: flex;
    gap: 0.5rem;
}

.add-tracker-form .form-field__input {
    flex: 1;
}

.add-tracker-form .button {
    flex-shrink: 0;
}

/* ==========================================================================
   Landing page
   ========================================================================== */

.landing-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: var(--space-md);
    gap: var(--space-md);
}

.landing-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.landing-footer {
    display: flex;
    gap: var(--space-md);
}

.dashboard .landing-footer {
    margin-top: var(--space-md);
}

.landing-footer__form {
    flex: 1;
    display: flex;
}

.landing-footer__button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    color: var(--button-standard-text);
    text-decoration: none;
    background-color: var(--button-standard-bg);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.landing-footer__button:hover {
    background-color: var(--button-standard-bg-hover);
    color: var(--button-standard-text);
}

.landing-footer__button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.landing-footer__button--cta {
    background-color: var(--color-primary);
    color: #fffcf8;
}

.landing-footer__button--cta:hover {
    background-color: var(--color-primary-hover);
    color: #fffcf8;
}

/* Tracker grid - mobile first */
.tracker-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    flex: 1;
}

@media (min-width: 768px) {
    .tracker-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 425px));
        justify-content: center;
        align-content: start;
    }

    .tracker-card {
        flex: none;
        min-height: 120px;
    }
}

/* Tracker card */
.tracker-card {
    --grid-padding: 0.5rem;
    --grid-gap: 2px;
    position: relative;
    flex: 1;
    min-height: 6rem;
    display: flex;
    align-items: stretch;
    container-type: size;
    container-name: card;
    /* Prevent text selection during drag */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.tracker-card__button {
    position: relative;
    width: 100%;
    min-height: 0;
    padding: 1.5rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: inherit;
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    container-type: size;
    container-name: button;
}

.tracker-card__button:hover {
    background-color: var(--color-primary-hover);
}

.tracker-card__button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

.tracker-card__button:active {
    transform: scale(0.98);
}

/* Tracker color variants with per-theme contrast */
/* Theme 1-3: Dark backgrounds - light text, light overlays */
.tracker-card--theme-1 .tracker-card__button { background-color: #264653; color: #fffcf8; }
.tracker-card--theme-1 .tracker-card__day { background-color: rgb(255 255 255 / 0.05); }
.tracker-card--theme-1 .tracker-card__instance { background-color: rgb(255 255 255 / 0.1); }

.tracker-card--theme-2 .tracker-card__button { background-color: #287271; color: #fffcf8; }
.tracker-card--theme-2 .tracker-card__day { background-color: rgb(255 255 255 / 0.05); }
.tracker-card--theme-2 .tracker-card__instance { background-color: rgb(255 255 255 / 0.1); }

.tracker-card--theme-3 .tracker-card__button { background-color: #2a9d8f; color: #fffcf8; }
.tracker-card--theme-3 .tracker-card__day { background-color: rgb(255 255 255 / 0.05); }
.tracker-card--theme-3 .tracker-card__instance { background-color: rgb(255 255 255 / 0.1); }

/* Theme 4-10: Light/medium backgrounds - dark text, dark overlays */
.tracker-card--theme-4 .tracker-card__button { background-color: #8ab17d; color: #264653; }
.tracker-card--theme-4 .tracker-card__day { background-color: rgb(0 0 0 / 0.1); }
.tracker-card--theme-4 .tracker-card__instance { background-color: rgb(0 0 0 / 0.1); }

.tracker-card--theme-5 .tracker-card__button { background-color: #babb74; color: #264653; }
.tracker-card--theme-5 .tracker-card__day { background-color: rgb(0 0 0 / 0.1); }
.tracker-card--theme-5 .tracker-card__instance { background-color: rgb(0 0 0 / 0.1); }

.tracker-card--theme-6 .tracker-card__button { background-color: #e9c46a; color: #264653; }
.tracker-card--theme-6 .tracker-card__day { background-color: rgb(0 0 0 / 0.1); }
.tracker-card--theme-6 .tracker-card__instance { background-color: rgb(0 0 0 / 0.1); }

.tracker-card--theme-7 .tracker-card__button { background-color: #efb366; color: #264653; }
.tracker-card--theme-7 .tracker-card__day { background-color: rgb(0 0 0 / 0.1); }
.tracker-card--theme-7 .tracker-card__instance { background-color: rgb(0 0 0 / 0.1); }

.tracker-card--theme-8 .tracker-card__button { background-color: #f4a261; color: #264653; }
.tracker-card--theme-8 .tracker-card__day { background-color: rgb(0 0 0 / 0.1); }
.tracker-card--theme-8 .tracker-card__instance { background-color: rgb(0 0 0 / 0.1); }

.tracker-card--theme-9 .tracker-card__button { background-color: #ee8959; color: #264653; }
.tracker-card--theme-9 .tracker-card__day { background-color: rgb(0 0 0 / 0.1); }
.tracker-card--theme-9 .tracker-card__instance { background-color: rgb(0 0 0 / 0.1); }

.tracker-card--theme-10 .tracker-card__button { background-color: #e76f51; color: #fffcf8; }
.tracker-card--theme-10 .tracker-card__day { background-color: rgb(255 255 255 / 0.05); }
.tracker-card--theme-10 .tracker-card__instance { background-color: rgb(255 255 255 / 0.1); }

/* Dashboard and undo icon colors - match button text color */
.tracker-card--theme-1 .tracker-card__dashboard,
.tracker-card--theme-2 .tracker-card__dashboard,
.tracker-card--theme-3 .tracker-card__dashboard,
.tracker-card--theme-10 .tracker-card__dashboard,
.tracker-card--theme-1 .tracker-card__undo,
.tracker-card--theme-2 .tracker-card__undo,
.tracker-card--theme-3 .tracker-card__undo,
.tracker-card--theme-10 .tracker-card__undo { color: #fffcf8; }

.tracker-card--theme-4 .tracker-card__dashboard,
.tracker-card--theme-5 .tracker-card__dashboard,
.tracker-card--theme-6 .tracker-card__dashboard,
.tracker-card--theme-7 .tracker-card__dashboard,
.tracker-card--theme-8 .tracker-card__dashboard,
.tracker-card--theme-9 .tracker-card__dashboard,
.tracker-card--theme-4 .tracker-card__undo,
.tracker-card--theme-5 .tracker-card__undo,
.tracker-card--theme-6 .tracker-card__undo,
.tracker-card--theme-7 .tracker-card__undo,
.tracker-card--theme-8 .tracker-card__undo,
.tracker-card--theme-9 .tracker-card__undo { color: #264653; }

/* Simple scale pop animation on click */
.tracker-card__button--pop {
    animation: pop 0.2s ease-out;
}

@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.tracker-card__name {
    position: relative;
    z-index: 1;
    font-size: clamp(1.25rem, 22cqh, 2rem);
    font-weight: 400;
    text-align: center;
}

.tracker-card__stats {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.375rem;
}

.tracker-card__count {
    position: relative;
    z-index: 1;
    font-size: clamp(0.875rem, 15cqh, 1.5rem);
    font-weight: 400;
    line-height: 1;
}

.tracker-card__label {
    font-size: 0.75rem;
    color: rgb(255 255 255 / 0.7);
    text-transform: lowercase;
}

/* Month day boxes */
.tracker-card__month {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: var(--grid-gap);
    padding: var(--grid-padding);
    pointer-events: none;
}

.tracker-card__day {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-radius: 2px;
}

.tracker-card__day--tracked {
    background-color: transparent;
}

.tracker-card__instance {
    flex: 1;
    border-radius: 1px;
}

/* Horizontal layout for short cards */
@container card (max-height: 70px) {
    .tracker-card__button {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 0.75rem 1rem;
        gap: 1rem;
    }

    .tracker-card__name {
        flex: 1;
        text-align: left;
    }

    .tracker-card__count {
        flex-shrink: 0;
    }

    .tracker-card__month {
        z-index: 0;
    }

    .tracker-card__dashboard,
    .tracker-card__undo {
        width: calc((100% - var(--grid-padding) * 2 - var(--grid-gap) * 6) / 7);
        height: calc(100% - var(--grid-padding) * 2);
    }

    .tracker-card__dashboard {
        top: var(--grid-padding);
        right: var(--grid-padding);
    }

    .tracker-card__undo {
        bottom: var(--grid-padding);
        left: var(--grid-padding);
    }
}

/* Undo button - sized to match day grid (1 col wide, 2 rows tall) */
.tracker-card__undo {
    position: absolute;
    bottom: var(--grid-padding);
    left: var(--grid-padding);
    width: calc((100% - var(--grid-padding) * 2 - var(--grid-gap) * 6) / 7);
    height: calc((100% - var(--grid-padding) * 2 - var(--grid-gap) * 4) / 5 * 2 + var(--grid-gap));
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(128 128 128 / 0.2);
    border: none;
    border-radius: var(--radius-md);
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease;
    animation: fadeIn 0.2s ease-out;
}

.tracker-card__undo:hover {
    background-color: rgb(128 128 128 / 0.3);
}

.tracker-card__undo:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.tracker-card__undo svg {
    width: 1.25rem;
    height: 1.25rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Dragging state */
.tracker-card--dragging {
    opacity: 0.5;
}

.tracker-card--dragging-clone {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    opacity: 0.9;
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
}

/* Dashboard link in corner - sized to match day grid (1 col wide, 2 rows tall) */
.tracker-card__dashboard {
    position: absolute;
    top: var(--grid-padding);
    right: var(--grid-padding);
    width: calc((100% - var(--grid-padding) * 2 - var(--grid-gap) * 6) / 7);
    height: calc((100% - var(--grid-padding) * 2 - var(--grid-gap) * 4) / 5 * 2 + var(--grid-gap));
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(128 128 128 / 0.2);
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.tracker-card__dashboard:hover {
    background-color: rgb(128 128 128 / 0.3);
}

.tracker-card__dashboard:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.tracker-card__icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
    display: flex;
    gap: 1rem;
    padding: 2rem 1rem;
}

.footer .button {
    flex: 1;
}

/* ==========================================================================
   Responsive adjustments
   ========================================================================== */

@media (min-width: 640px) {
    .track-button {
        width: 12rem;
        height: 12rem;
    }

}

@media (min-width: 640px) {
    .track-button__text {
        font-size: 1.75rem;
    }

    .stat-card__value {
        font-size: 2rem;
    }

    .chart-container {
        height: 20rem;
    }
}

@media (max-width: 640px) {
    .header {
        flex-wrap: wrap;
    }

    .header__left {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .tracker-nav {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   Account page
   ========================================================================== */

.account-page {
    min-height: 100vh;
    min-height: 100dvh;
}

.account {
    max-width: 32rem;
    margin: 0 auto;
    padding: var(--space-md);
}

.account-section {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    box-shadow: var(--shadow-sm);
}

.account-section__title {
    margin: 0 0 var(--space-xs);
    font-size: 1rem;
    font-weight: 400;
}

.account-section__description {
    margin: 0 0 var(--space-md);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.account-section--logout {
    background-color: transparent;
    box-shadow: none;
    text-align: center;
    padding: var(--space-lg) var(--space-md);
}

/* Export form */
.export-form__fieldset {
    border: none;
    padding: 0;
    margin: 0 0 var(--space-md);
}

.export-form__option {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    cursor: pointer;
}

.export-form__option--all {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-xs);
    padding-bottom: var(--space-sm);
}

.export-form__checkbox {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.export-form__label {
    font-size: 0.9375rem;
}

.export-form__fieldset--format {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-md);
}

.export-form__legend {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}

.export-form__formats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.export-form__format {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.9375rem;
    cursor: pointer;
}

.export-form__radio {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* Visually hidden utility (screen reader only) */
.visually-hidden,
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Scale picker dialog
   ========================================================================== */

.scale-picker {
    display: flex;
    gap: var(--space-sm);
}

.scale-picker__button {
    flex: 1;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--color-text);
    background-color: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.scale-picker__button:hover {
    background-color: var(--button-standard-bg-hover);
    border-color: var(--color-primary);
}

.scale-picker__button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.scale-picker__button:active {
    transform: scale(0.95);
}

.scale-picker__button--selected {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--button-cta-text);
}

.scale-picker__button--selected:hover {
    background-color: var(--color-primary-hover);
}

/* ==========================================================================
   Activity grid - scale tracker levels (opacity-based)
   ========================================================================== */

/* Scale tracker activity grid - filled cells use opacity levels */
.tracker-card--scale .tracker-card__day--level-1 { opacity: 0.16; }
.tracker-card--scale .tracker-card__day--level-2 { opacity: 0.33; }
.tracker-card--scale .tracker-card__day--level-3 { opacity: 0.50; }
.tracker-card--scale .tracker-card__day--level-4 { opacity: 0.66; }
.tracker-card--scale .tracker-card__day--level-5 { opacity: 0.83; }
.tracker-card--scale .tracker-card__day--level-6 { opacity: 1; }

/* Scale tracker day boxes - filled style instead of instance-based */
.tracker-card--scale .tracker-card__day--tracked {
    background-color: currentColor;
}

/* Dark themes (1-3, 10) - use white fill */
.tracker-card--theme-1.tracker-card--scale .tracker-card__day--tracked,
.tracker-card--theme-2.tracker-card--scale .tracker-card__day--tracked,
.tracker-card--theme-3.tracker-card--scale .tracker-card__day--tracked,
.tracker-card--theme-10.tracker-card--scale .tracker-card__day--tracked {
    background-color: rgb(255 255 255 / 0.3);
}

/* Light themes (4-9) - use dark fill */
.tracker-card--theme-4.tracker-card--scale .tracker-card__day--tracked,
.tracker-card--theme-5.tracker-card--scale .tracker-card__day--tracked,
.tracker-card--theme-6.tracker-card--scale .tracker-card__day--tracked,
.tracker-card--theme-7.tracker-card--scale .tracker-card__day--tracked,
.tracker-card--theme-8.tracker-card--scale .tracker-card__day--tracked,
.tracker-card--theme-9.tracker-card--scale .tracker-card__day--tracked {
    background-color: rgb(0 0 0 / 0.2);
}

/* ==========================================================================
   Type picker in add tracker dialog
   ========================================================================== */

.type-picker {
    display: flex;
    gap: var(--space-sm);
}

.type-picker__option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text);
    background-color: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.type-picker__option:hover {
    background-color: var(--button-standard-bg-hover);
}

.type-picker__option:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.type-picker__option--selected {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--button-cta-text);
}

.type-picker__option--selected:hover {
    background-color: var(--color-primary-hover);
}

/* Entry value display in entries list */
.entries-list__value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.25rem;
    margin-left: var(--space-sm);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-white);
    background-color: var(--color-primary);
    border-radius: var(--radius-sm);
}