/* Layer order declaration */
@layer reset, tokens, base, layout, components, themes, utilities;

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

  * {
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-block-size: 100dvh;
    -webkit-font-smoothing: antialiased;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-inline-size: 100%;
  }

  input, button, textarea, select {
    font: inherit;
    color: inherit;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ul, ol {
    list-style: none;
  }
}
}

@layer tokens {
@layer tokens {
  :root {
    /* -- Color values (oklch components) -- */
    --lch-canvas:         98% 0.005 85;
    --lch-ink:            25% 0.02 260;
    --lch-ink-medium:     45% 0.01 260;
    --lch-ink-light:      65% 0.01 260;

    --lch-amber:          72% 0.17 70;
    --lch-amber-dark:     58% 0.17 70;
    --lch-amber-light:    90% 0.06 70;
    --lch-amber-faint:    96% 0.02 70;

    --lch-green:          65% 0.2 145;
    --lch-green-faint:    95% 0.03 145;

    --lch-red:            55% 0.2 25;

    --lch-border:         92% 0.005 85;
    --lch-border-dark:    88% 0.005 85;
    --lch-border-darker:  75% 0.005 85;

    /* -- Semantic colors -- */
    --color-canvas:       oklch(var(--lch-canvas));
    --color-ink:          oklch(var(--lch-ink));
    --color-ink-medium:   oklch(var(--lch-ink-medium));
    --color-ink-light:    oklch(var(--lch-ink-light));

    --color-accent:       oklch(var(--lch-amber));
    --color-accent-dark:  oklch(var(--lch-amber-dark));
    --color-accent-light: oklch(var(--lch-amber-light));
    --color-accent-faint: oklch(var(--lch-amber-faint));

    --color-success:      oklch(var(--lch-green));
    --color-success-faint:oklch(var(--lch-green-faint));

    --color-negative:     oklch(var(--lch-red));

    --color-border:       oklch(var(--lch-border));
    --color-border-dark:  oklch(var(--lch-border-dark));
    --color-border-darker:oklch(var(--lch-border-darker));

    /* -- Typography -- */
    --font-body:          'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --font-mono:          'IBM Plex Mono', ui-monospace, monospace;

    --text-xs:            0.75rem;
    --text-sm:            0.8125rem;
    --text-base:          1rem;
    --text-lg:            clamp(1.125rem, 2.5vw, 1.25rem);
    --text-xl:            clamp(1.25rem, 3vw, 1.5rem);
    --text-2xl:           clamp(1.5rem, 4vw, 2rem);

    --leading-tight:      1.25;
    --leading-normal:     1.5;
    --leading-relaxed:    1.65;

    /* -- Spacing -- */
    --space-xs:           0.25rem;
    --space-sm:           0.5rem;
    --space-md:           1rem;
    --space-lg:           1.5rem;
    --space-xl:           2rem;
    --space-2xl:          3rem;

    /* -- Layout -- */
    --page-max-width:     68rem;
    --page-padding:       clamp(var(--space-md), 4vw, var(--space-xl));
    --nav-height:         3.5rem;

    /* -- Borders & Radius -- */
    --radius-sm:          0.375rem;
    --radius-md:          0.5rem;
    --radius-lg:          0.75rem;
    --radius-full:        99rem;

    /* -- Transitions -- */
    --transition-fast:    120ms ease;
    --transition-normal:  200ms ease;
  }
}
}

@layer base {
@layer base {
  html {
    color-scheme: light;
  }

  body {
    background-color: var(--color-canvas);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
  }

  /* Links */
  a:where(:not(.btn)) {
    color: var(--color-accent-dark);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    transition: color var(--transition-fast);

    @media (any-hover: hover) {
      &:hover {
        color: var(--color-accent);
      }
    }
  }

  /* Headings */
  h1, h2, h3, h4 {
    line-height: var(--leading-tight);
    font-weight: 600;
  }

  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
  h3 { font-size: var(--text-lg); }

  /* Monospace for data */
  .mono {
    font-family: var(--font-mono);
  }

  /* Selection */
  ::selection {
    background-color: var(--color-accent-light);
    color: var(--color-ink);
  }

  /* Focus visible */
  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
}
}

@layer layout {
@layer layout {
  /* Page shell */
  .page {
    display: flex;
    flex-direction: column;
    min-block-size: 100dvh;
  }

  .page__main {
    flex: 1;
    inline-size: 100%;
    max-inline-size: var(--page-max-width);
    margin-inline: auto;
    padding-inline: var(--page-padding);
    padding-block: var(--space-lg);
  }

  /* Dashboard grid */
  .dashboard {
    display: grid;
    gap: var(--space-lg);

    @media (min-width: 700px) {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-xl);
    }
  }

  .dashboard__header {
    @media (min-width: 700px) {
      grid-column: 1 / -1;
    }
  }

  /* Greeting area */
  .greeting {
    padding-block-end: var(--space-md);
    border-block-end: 1px solid var(--color-border);
    margin-block-end: var(--space-lg);

    @media (min-width: 700px) {
      padding-block-end: var(--space-lg);
    }
  }

  .greeting__hello {
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--color-ink);
  }

  .greeting__date {
    font-size: var(--text-sm);
    color: var(--color-ink-medium);
    font-family: var(--font-mono);
    margin-block-start: var(--space-xs);
  }

  .greeting__bookend {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-block-start: var(--space-xs);
  }
}
}

@layer components {
@layer components {
  .nav {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    background-color: var(--color-canvas);
    border-block-end: 1px solid var(--color-border);
    padding-block: var(--space-sm);
    padding-inline: var(--page-padding);

    /* Respect safe area on iOS */
    padding-block-start: calc(var(--space-sm) + env(safe-area-inset-top, 0px));
  }

  .nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-inline-size: var(--page-max-width);
    margin-inline: auto;
    min-block-size: calc(var(--nav-height) - var(--space-md));
  }

  .nav__brand {
    display: inline-flex;

    img {
      block-size: 2.25rem;
      inline-size: auto;
    }
  }

  .nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
  }

  .nav__link {
    font-size: var(--text-sm);
    color: var(--color-ink-medium);
    transition: color var(--transition-fast);
    text-decoration: none;

    @media (any-hover: hover) {
      &:hover {
        color: var(--color-ink);
      }
    }
  }

  .theme-switcher__select {
    appearance: none;
    background: var(--switcher-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 8px center;
    border: 1px solid var(--switcher-border);
    border-radius: var(--radius-full);
    color: var(--color-ink);
    font-size: var(--text-sm);
    padding: 4px 24px 4px 12px;
    cursor: pointer;
  }

  /* ── Avatar Dropdown Menu ── */

  .avatar-menu {
    position: relative;
  }

  .avatar-menu__trigger {
    appearance: none;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: border-color 150ms ease;

    &:hover {
      border-color: var(--color-accent);
    }
  }

  .avatar-menu__img {
    display: block;
    block-size: 2.25rem;
    inline-size: 2.25rem;
    border-radius: 50%;
    object-fit: cover;
  }

  .avatar-menu__fallback {
    display: grid;
    place-items: center;
    block-size: 2.25rem;
    inline-size: 2.25rem;
    border-radius: 50%;
    background: var(--color-accent);
    color: white;
    font-weight: 600;
    font-size: var(--text-sm);
  }

  .avatar-menu__dropdown {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: calc(100% + var(--space-xs));
    inline-size: 14rem;
    background: var(--card-glass-bg);
    border: 1px solid var(--card-glass-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    -webkit-backdrop-filter: blur(var(--card-glass-blur));
    backdrop-filter: blur(var(--card-glass-blur));
    z-index: 100;
    overflow: hidden;
  }

  .avatar-menu__header {
    padding: var(--space-sm) var(--space-md);

    strong {
      display: block;
      font-size: var(--text-sm);
      color: var(--color-ink);
    }

    span {
      display: block;
      font-size: var(--text-xs);
      color: var(--color-ink-light);
    }
  }

  .avatar-menu__divider {
    border: none;
    border-block-start: 1px solid var(--color-border);
    margin: 0;
  }

  .avatar-menu__item {
    display: block;
    inline-size: 100%;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-ink);
    text-decoration: none;
    text-align: start;
    background: transparent;
    border: none;
    cursor: pointer;

    &:hover {
      background: var(--color-amber-faint);
    }
  }

  .avatar-menu__item--danger {
    color: var(--color-red);
  }
}
}

@layer components {
@layer components {
  .btn {
    align-items: center;
    background-color: var(--btn-bg, var(--color-canvas));
    border-radius: var(--btn-radius, var(--radius-md));
    border: 1px solid var(--btn-border, var(--color-border-dark));
    color: var(--btn-color, var(--color-ink));
    cursor: pointer;
    display: inline-flex;
    font-size: var(--btn-font-size, var(--text-sm));
    font-weight: 500;
    gap: var(--space-sm);
    justify-content: center;
    line-height: 1;
    min-block-size: 2.75rem;  /* 44px touch target */
    padding: var(--btn-padding, var(--space-sm) var(--space-lg));
    text-decoration: none;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
    user-select: none;
    -webkit-touch-callout: none;

    @media (any-hover: hover) {
      &:hover {
        --btn-bg: var(--color-accent-faint);
        --btn-border: var(--color-border-darker);
      }
    }

    &:active {
      transform: scale(0.98);
    }

    &[disabled] {
      cursor: not-allowed;
      opacity: 0.4;
    }
  }

  /* Primary (amber) */
  .btn--primary {
    --btn-bg: var(--color-accent);
    --btn-color: white;
    --btn-border: var(--color-accent);

    @media (any-hover: hover) {
      &:hover {
        --btn-bg: var(--color-accent-dark);
        --btn-border: var(--color-accent-dark);
        --btn-color: white;
      }
    }
  }

  /* Subtle / ghost */
  .btn--subtle {
    --btn-border: transparent;
    --btn-bg: transparent;
    --btn-color: var(--color-ink-medium);

    @media (any-hover: hover) {
      &:hover {
        --btn-bg: var(--color-accent-faint);
        --btn-color: var(--color-ink);
      }
    }
  }

  /* Destructive */
  .btn--negative {
    --btn-color: var(--color-negative);
    --btn-border: transparent;
    --btn-bg: transparent;

    @media (any-hover: hover) {
      &:hover {
        --btn-bg: oklch(var(--lch-red) / 0.08);
      }
    }
  }

  /* Full width (mobile forms) */
  .btn--block {
    inline-size: 100%;
  }

  /* Small */
  .btn--sm {
    --btn-padding: var(--space-xs) var(--space-md);
    --btn-font-size: var(--text-xs);
    min-block-size: 2rem;
  }

  /* Google sign-in button */
  .btn--google {
    --btn-bg: white;
    --btn-border: var(--color-border-dark);
    --btn-padding: var(--space-sm) var(--space-xl);
    font-weight: 500;
    gap: var(--space-md);
    min-block-size: 3rem;
    border-radius: var(--radius-full);

    @media (any-hover: hover) {
      &:hover {
        --btn-bg: oklch(97% 0 0);
        box-shadow: 0 1px 3px oklch(0% 0 0 / 0.1);
      }
    }
  }
}
}

@layer components {
@layer components {
  .card {
    background-color: var(--card-bg, var(--color-canvas));
    border: 1px solid var(--card-border, var(--color-border));
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px oklch(0% 0 0 / 0.04), 0 4px 12px oklch(0% 0 0 / 0.03);
    padding: var(--card-padding, var(--space-lg));
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);

    @media (any-hover: hover) {
      &:hover {
        box-shadow: 0 2px 6px oklch(0% 0 0 / 0.06), 0 8px 24px oklch(0% 0 0 / 0.05);
        border-color: var(--color-border-dark);
      }
    }
  }

  .card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--space-md);
  }

  /* Accordion: summary as card header */
  summary.card__header {
    cursor: pointer;
    list-style: none;
    user-select: none;

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

  /* Chevron indicator on title */
  .card__title::after {
    content: "›";
    display: inline-block;
    margin-inline-start: var(--space-sm);
    font-weight: 400;
    color: var(--color-ink-light);
    transition: transform var(--transition-normal);
    transform: rotate(0deg);
  }

  details[open] > summary .card__title::after {
    transform: rotate(90deg);
  }

  /* Animate card body */
  .card__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-normal);
  }

  details[open] > .card__body {
    grid-template-rows: 1fr;
  }

  .card__body > * {
    overflow: hidden;
  }

  /* Collapse header margin when closed */
  details:not([open]) > summary.card__header {
    margin-block-end: 0;
  }

  .card__title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-ink);
  }

  .card__count {
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    color: var(--color-ink-light);
  }

  .card__empty {
    font-size: var(--text-sm);
    color: var(--color-ink-light);
    padding-block: var(--space-sm);
    text-align: center;
  }

  .card__placeholder {
    font-size: var(--text-sm);
    color: var(--color-ink-light);
  }

  .card__date-header {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink-medium);
    margin-block-end: var(--space-sm);
  }

  /* Subtle link in card header */
  .card__action {
    font-size: var(--text-sm);
    color: var(--color-ink-light);
    text-decoration: none;
    transition: color var(--transition-fast);

    @media (any-hover: hover) {
      &:hover {
        color: var(--color-accent-dark);
      }
    }
  }

  /* Fuel stat placeholders */
  .fuel-placeholders {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin-block-start: var(--space-md);
  }

  .fuel-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-sm);
    background-color: var(--color-accent-faint);
    border-radius: var(--radius-md);
  }

  .fuel-stat__value {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-ink-light);
    line-height: var(--leading-tight);
  }

  .fuel-stat__label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-ink-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .fuel-stat__date {
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    margin-block-start: 2px;
  }

  /* ── Health Measurements ── */

  .health-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);

    @media (max-width: 600px) {
      grid-template-columns: 1fr;
    }
  }

  .health-section__title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-ink);
    margin-block-end: var(--space-sm);
  }

  .health-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);

    th {
      text-align: start;
      font-weight: 600;
      color: var(--color-ink-medium);
      padding: var(--space-xs) var(--space-sm);
      border-block-end: 1px solid var(--color-border);
    }

    td {
      padding: var(--space-xs) var(--space-sm);
      color: var(--color-ink);
      border-block-end: 1px solid var(--color-border);
    }
  }

  .health-table__actions {
    inline-size: 1%;
    white-space: nowrap;
    text-align: end;
  }

  .btn-delete {
    appearance: none;
    background: none;
    border: none;
    padding: var(--space-xs);
    color: var(--color-ink-light);
    cursor: pointer;
    border-radius: var(--radius-sm);
    line-height: 1;
    transition: color var(--transition-fast);

    &:hover {
      color: oklch(55% 0.2 25);
    }
  }

  .health-form-tabs {
    margin-block-end: var(--space-lg);
  }

  .health-form-tabs__buttons {
    display: flex;
    gap: var(--space-xs);
    margin-block-end: var(--space-sm);
  }

  .health-form-tabs__btn {
    appearance: none;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-ink-medium);
    cursor: pointer;
    transition: all 150ms ease;

    &:hover {
      border-color: var(--color-accent);
      color: var(--color-ink);
    }
  }

  .health-form-tabs__btn--active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
  }

  /* ── Sync button ── */

  .btn-sync {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    font-size: var(--text-xs);
    color: var(--color-accent-dark);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;

    &:hover {
      color: var(--color-ink);
    }
  }

  .card__footer {
    margin-block-start: var(--space-sm);
    text-align: end;
  }

  /* ── Table scroll ── */

  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Flash messages ── */

  .flash-notice {
    font-size: var(--text-sm);
    color: oklch(45% 0.15 150);
    background: oklch(95% 0.04 150);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    margin-block-end: var(--space-md);
  }

  .flash-alert {
    font-size: var(--text-sm);
    color: oklch(45% 0.15 25);
    background: oklch(95% 0.04 25);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    margin-block-end: var(--space-md);
  }
}
}

@layer components {
@layer components {
  .form-group {
    margin-block-end: var(--space-lg);
  }

  .form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink-medium);
    margin-block-end: var(--space-xs);
  }

  .form-input {
    appearance: none;
    background-color: var(--color-canvas);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-md);
    color: var(--color-ink);
    display: block;
    font-size: var(--text-base);
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding: var(--space-sm) var(--space-md);
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);

    &::placeholder {
      color: var(--color-ink-light);
    }

    &:focus {
      border-color: var(--color-accent);
      box-shadow: 0 0 0 3px var(--color-accent-light);
      outline: none;
    }
  }

  /* Inline form (quick task add, new habit) */
  .form-inline {
    display: flex;
    gap: var(--space-sm);
    align-items: stretch;

    .form-input {
      flex: 1;
    }
  }

  /* Error messages */
  .form-error {
    font-size: var(--text-sm);
    color: var(--color-negative);
    margin-block-start: var(--space-xs);
  }
}
}

@layer components {
@layer components {
  .checklist {
    list-style: none;
  }

  .checklist__item {
    display: flex;
    align-items: center;
    border-block-end: 1px solid var(--color-border);
    position: relative;

    &:last-child {
      border-block-end: none;
    }
  }

  /* button_to wraps in a <form>; the toggle form should fill the row */
  .checklist__item > .button_to:has(.checklist__toggle) {
    flex: 1;
    min-width: 0;
  }

  /* Toggle button (rendered by button_to) */
  .checklist__toggle {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    padding: var(--space-md);
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font-size: var(--text-base);
    color: var(--color-ink);
    min-block-size: 3rem;  /* 48px touch target */
    transition: background-color var(--transition-fast);

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-accent-faint);
      }
    }

    /* Completed state */
    &.is-completed {
      .checklist__label {
        color: var(--color-ink-light);
        text-decoration: line-through;
        text-decoration-color: var(--color-border-darker);
      }
    }
  }

  /* Custom checkbox visual (span-based) */
  .checklist__checkbox {
    display: grid;
    place-content: center;
    flex-shrink: 0;
    block-size: 1.375rem;
    inline-size: 1.375rem;
    border: 2px solid var(--color-border-darker);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast);

    .is-completed & {
      background-color: var(--color-success);
      border-color: var(--color-success);
    }
  }

  .checklist__label {
    font-size: var(--text-base);
    color: var(--color-ink);
    flex: 1;
    transition: color var(--transition-fast);
  }

  /* Completion counter */
  .checklist__progress {
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    color: var(--color-ink-light);
    padding-block: var(--space-sm);
    padding-inline: var(--space-md);
    text-align: end;
  }

  /* Remove button (quick tasks) */
  .checklist__remove {
    position: absolute;
    inset-inline-end: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--color-ink-light);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    line-height: 1;
    opacity: 0;
    transition: opacity var(--transition-fast), color var(--transition-fast);

    @media (any-hover: hover) {
      &:hover {
        color: var(--color-negative);
      }
    }
  }

  .checklist__item:hover .checklist__remove {
    opacity: 1;
  }

  /* Always show remove on touch devices */
  @media (any-hover: none) {
    .checklist__remove {
      opacity: 0.6;
    }
  }

  /* Manage habits link */
  .checklist__footer {
    font-size: var(--text-sm);
    padding-block-start: var(--space-sm);
    padding-inline: var(--space-md);
    border-block-start: 1px solid var(--color-border);
  }

  /* Drag-to-reorder */
  .checklist__item[draggable="true"] {
    cursor: grab;
    touch-action: none;

    &:active { cursor: grabbing; }
  }

  .checklist__item.dragging {
    opacity: 0.4;
    outline: 2px dashed var(--color-border-darker);
  }

  .checklist__item.drag-over {
    border-block-start: 2px solid var(--color-accent);
  }
}
}

@layer components {
@layer components {
  .login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 100dvh;
    padding: var(--space-xl);
  }

  .login-card {
    inline-size: 100%;
    max-inline-size: 20rem;
    text-align: center;
    padding: var(--space-lg);
    margin-inline: auto;
    overflow: hidden;
  }

  .login-card__brand {
    margin-block-end: var(--space-xs);

    img {
      block-size: 5rem;
      inline-size: auto;
      margin-inline: auto;
    }
  }

  .login-card__tagline {
    font-size: var(--text-lg);
    color: var(--color-ink-medium);
    margin-block-end: var(--space-2xl);
  }

  .btn-google {
    display: inline-flex;
    align-items: center;
    background: #e8a840;
    color: white;
    border: none;
    border-radius: 100px;
    box-sizing: border-box;
    padding: 0;
    padding-inline-end: 1rem;
    font-size: var(--text-sm);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 150ms ease;
    text-decoration: none;
    gap: 0.5rem;

    &:hover {
      background: #d49530;
    }
  }

  .btn-google__icon {
    display: grid;
    place-items: center;
    background: white;
    border-radius: 50%;
    block-size: 2.25rem;
    inline-size: 2.25rem;
    flex-shrink: 0;
    margin: 3px;
  }

  .btn-google__text {
    color: white;
    white-space: nowrap;
  }
}
}

@layer components {
  /* ── Sprints ── */

  .sprint-cards {
    display: grid;
    gap: var(--space-md);
  }

  .sprint-card {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: var(--space-lg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  }

  .sprint-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
  }

  .sprint-card__title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-ink);
    margin: 0;
  }

  .sprint-card__week {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-accent-dark);
    background: var(--color-accent-faint);
    padding: 2px var(--space-sm);
    border-radius: var(--radius-full);
    white-space: nowrap;
  }

  .sprint-card__badge {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 2px var(--space-sm);
    border-radius: var(--radius-full);
    white-space: nowrap;
  }

  .sprint-card__badge--completed {
    color: var(--color-success);
    background: var(--color-success-faint);
  }

  .sprint-card__badge--abandoned {
    color: var(--color-ink-light);
    background: var(--color-accent-faint);
  }

  .sprint-card__dates {
    margin-block-start: var(--space-xs);
  }

  .sprint-card__progress {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .sprint-card__percent {
    flex-shrink: 0;
  }

  /* Progress bar */

  .progress-bar {
    flex: 1;
    block-size: 6px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
  }

  .progress-bar--lg {
    block-size: 10px;
  }

  .progress-bar--sm {
    block-size: 4px;
  }

  .progress-bar__fill {
    block-size: 100%;
    background: var(--color-success);
    border-radius: var(--radius-full);
    transition: width 300ms ease;
    min-inline-size: 0;
  }

  /* Sprint show page */

  .sprint-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-lg);
  }

  .sprint-meta__week {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-accent-dark);
  }

  .sprint-week {
    padding: var(--space-lg);
  }

  .sprint-week__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--space-sm);
  }

  .sprint-week__title {
    font-size: var(--text-base);
    font-weight: 600;
  }

  .sprint-progress {
    max-inline-size: 100%;
  }

  .sprint-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .sprint-complete-form__body {
    padding: var(--space-md);
    background: var(--color-accent-faint);
    border-radius: var(--radius-md);
  }

  .sprint-reflection {
    padding: var(--space-lg);
  }

  /* Dashboard sprint item */

  .sprint-dash-item {
    padding-block: var(--space-sm);
    border-block-end: 1px solid var(--color-border);

    &:last-child {
      border-block-end: none;
    }
  }

  .sprint-dash-item__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
  }

  .sprint-dash-item__title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink);
    text-decoration: none;

    &:hover {
      color: var(--color-accent-dark);
    }
  }
}

@layer themes {
/*
 * themes.css — GroovyPlanning 70s Theme System
 *
 * Three themes toggled via data-theme on <html>:
 *   - flower-power  (light, default)
 *   - groovy-flow   (dark, animated rivers)
 *   - roller-disco  (dark, diagonal stripes)
 *
 * Each theme redefines the semantic color tokens from tokens.css.
 * Cards use glassmorphism (backdrop-filter) so the SVG backgrounds
 * bleed through beautifully.
 */


/* ═══════════════════════════════════════════════
   SANDY PLAIN — Light theme (minimal)
   Warm sandy gradient, no decorations
   ═══════════════════════════════════════════════ */

html[data-theme="sandy-plain"] {
  color-scheme: light;

  --lch-canvas:           97% 0.008 80;
  --lch-ink:              22% 0.03 55;
  --lch-ink-medium:       42% 0.02 55;
  --lch-ink-light:        58% 0.015 55;

  --lch-amber:            62% 0.19 45;
  --lch-amber-dark:       52% 0.19 45;
  --lch-amber-light:      88% 0.06 60;
  --lch-amber-faint:      95% 0.02 60;

  --lch-green:            55% 0.18 145;
  --lch-green-faint:      93% 0.03 145;
  --lch-red:              50% 0.2 25;

  --lch-border:           90% 0.008 65;
  --lch-border-dark:      85% 0.01 65;
  --lch-border-darker:    72% 0.01 65;

  --theme-bg:             #fdf8f0;
  --theme-bg-gradient:    linear-gradient(180deg, #fdf8f0 0%, #fcf0e0 50%, #f8e8d0 100%);

  --card-glass-bg:        rgba(255, 255, 255, 0.88);
  --card-glass-border:    rgba(200, 180, 150, 0.25);
  --card-glass-blur:      0px;
  --card-glass-shadow:    0 1px 3px rgba(120, 80, 40, 0.08);

  --nav-glass-bg:         rgba(253, 248, 240, 0.95);
  --nav-glass-border:     rgba(200, 180, 150, 0.2);
  --nav-glass-blur:       0px;

  --switcher-bg:          rgba(255, 255, 255, 0.6);
  --switcher-border:      rgba(200, 180, 150, 0.3);
}

/* ═══════════════════════════════════════════════
   FLOWER POWER — Light theme (default)
   Warm cream background, retro daisies
   ═══════════════════════════════════════════════ */

html[data-theme="flower-power"],
html:not([data-theme]) {
  color-scheme: light;

  /* Canvas & ink */
  --lch-canvas:           97% 0.008 80;
  --lch-ink:              22% 0.03 55;
  --lch-ink-medium:       42% 0.02 55;
  --lch-ink-light:        58% 0.015 55;

  /* Accent — burnt orange */
  --lch-amber:            62% 0.19 45;
  --lch-amber-dark:       52% 0.19 45;
  --lch-amber-light:      88% 0.06 60;
  --lch-amber-faint:      95% 0.02 60;

  /* Status */
  --lch-green:            55% 0.18 145;
  --lch-green-faint:      93% 0.03 145;
  --lch-red:              50% 0.2 25;

  /* Borders */
  --lch-border:           90% 0.008 65;
  --lch-border-dark:      85% 0.01 65;
  --lch-border-darker:    72% 0.01 65;

  /* Theme background (for body) */
  --theme-bg:             #fdf8f0;
  --theme-bg-gradient:    linear-gradient(180deg, #fdf8f0 0%, #fcf0e0 50%, #f8e8d0 100%);

  /* Card glassmorphism */
  --card-glass-bg:        rgba(255, 255, 255, 0.72);
  --card-glass-border:    rgba(255, 255, 255, 0.5);
  --card-glass-blur:      14px;
  --card-glass-shadow:    0 2px 12px rgba(120, 80, 40, 0.06);

  /* Nav glassmorphism */
  --nav-glass-bg:         rgba(253, 248, 240, 0.85);
  --nav-glass-border:     rgba(200, 180, 150, 0.2);
  --nav-glass-blur:       12px;

  /* Theme switcher */
  --switcher-bg:          rgba(255, 255, 255, 0.6);
  --switcher-border:      rgba(200, 180, 150, 0.3);
}


/* ═══════════════════════════════════════════════
   GROOVY FLOW — Dark theme
   Deep warm dark, multicolor flowing rivers
   ═══════════════════════════════════════════════ */

html[data-theme="groovy-flow"] {
  color-scheme: dark;

  /* Canvas & ink (inverted for dark) */
  --lch-canvas:           15% 0.02 55;
  --lch-ink:              92% 0.015 70;
  --lch-ink-medium:       70% 0.02 70;
  --lch-ink-light:        52% 0.015 60;

  /* Accent — warm gold */
  --lch-amber:            78% 0.16 75;
  --lch-amber-dark:       85% 0.12 75;
  --lch-amber-light:      35% 0.06 70;
  --lch-amber-faint:      22% 0.03 60;

  /* Status */
  --lch-green:            72% 0.17 145;
  --lch-green-faint:      22% 0.04 145;
  --lch-red:              65% 0.18 25;

  /* Borders */
  --lch-border:           22% 0.015 55;
  --lch-border-dark:      28% 0.02 55;
  --lch-border-darker:    38% 0.02 55;

  /* Theme background */
  --theme-bg:             #1c1612;
  --theme-bg-gradient:    linear-gradient(180deg, #1c1612 0%, #1a1410 100%);

  /* Card glassmorphism */
  --card-glass-bg:        rgba(28, 22, 18, 0.65);
  --card-glass-border:    rgba(80, 60, 40, 0.25);
  --card-glass-blur:      12px;
  --card-glass-shadow:    0 2px 16px rgba(0, 0, 0, 0.3);

  /* Nav glassmorphism */
  --nav-glass-bg:         rgba(28, 22, 18, 0.8);
  --nav-glass-border:     rgba(80, 60, 40, 0.2);
  --nav-glass-blur:       12px;

  /* Theme switcher */
  --switcher-bg:          rgba(28, 22, 18, 0.6);
  --switcher-border:      rgba(80, 60, 40, 0.3);
}


/* ═══════════════════════════════════════════════
   ROLLER DISCO — Dark theme
   Deep purple, diagonal stripes, twinkling gold
   ═══════════════════════════════════════════════ */

html[data-theme="roller-disco"] {
  color-scheme: dark;

  /* Canvas & ink */
  --lch-canvas:           12% 0.04 300;
  --lch-ink:              90% 0.02 70;
  --lch-ink-medium:       68% 0.025 70;
  --lch-ink-light:        50% 0.02 300;

  /* Accent — warm gold */
  --lch-amber:            80% 0.16 80;
  --lch-amber-dark:       88% 0.12 80;
  --lch-amber-light:      32% 0.06 300;
  --lch-amber-faint:      20% 0.04 300;

  /* Status */
  --lch-green:            72% 0.17 145;
  --lch-green-faint:      20% 0.04 145;
  --lch-red:              65% 0.18 25;

  /* Borders */
  --lch-border:           20% 0.03 300;
  --lch-border-dark:      26% 0.04 300;
  --lch-border-darker:    36% 0.04 300;

  /* Theme background */
  --theme-bg:             #1e1228;
  --theme-bg-gradient:    linear-gradient(180deg, #1e1228 0%, #1a0f24 100%);

  /* Card glassmorphism */
  --card-glass-bg:        rgba(35, 22, 50, 0.6);
  --card-glass-border:    rgba(100, 60, 140, 0.2);
  --card-glass-blur:      12px;
  --card-glass-shadow:    0 2px 16px rgba(0, 0, 0, 0.35);

  /* Nav glassmorphism */
  --nav-glass-bg:         rgba(30, 18, 40, 0.8);
  --nav-glass-border:     rgba(100, 60, 140, 0.2);
  --nav-glass-blur:       12px;

  /* Theme switcher */
  --switcher-bg:          rgba(35, 22, 50, 0.6);
  --switcher-border:      rgba(100, 60, 140, 0.3);
}


/* ═══════════════════════════════════════════════
   GLASSMORPHISM OVERRIDES
   These apply the theme's glass variables to
   existing components from cards.css and nav.css
   ═══════════════════════════════════════════════ */

/* Body background */
body {
  background: var(--theme-bg-gradient, var(--theme-bg));
  min-block-size: 100dvh;
}

/* Cards become glass */
.card {
  background-color: var(--card-glass-bg);
  border-color: var(--card-glass-border);
  box-shadow: var(--card-glass-shadow);
  -webkit-backdrop-filter: blur(var(--card-glass-blur));
  backdrop-filter: blur(var(--card-glass-blur));
}

/* Nav becomes glass */
.nav {
  background-color: var(--nav-glass-bg);
  border-color: var(--nav-glass-border);
  -webkit-backdrop-filter: blur(var(--nav-glass-blur));
  backdrop-filter: blur(var(--nav-glass-blur));
}

/* Login card glass */
.login-card {
  background-color: var(--card-glass-bg);
  border: 1px solid var(--card-glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-glass-shadow);
  -webkit-backdrop-filter: blur(var(--card-glass-blur));
  backdrop-filter: blur(var(--card-glass-blur));
}


/* ═══════════════════════════════════════════════
   THEME BACKGROUND CONTAINER
   The SVG background sits behind everything
   ═══════════════════════════════════════════════ */

.theme-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.theme-background svg {
  inline-size: 100%;
  block-size: 100%;
}


/* ═══════════════════════════════════════════════
   THEME SWITCHER
   Compact pill in the nav area
   ═══════════════════════════════════════════════ */

.theme-switcher {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--switcher-bg);
  border: 1px solid var(--switcher-border);
  border-radius: var(--radius-full);
  padding: 3px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
}

@layer utilities {
@layer utilities {
  /* Display */
  .hidden { display: none; }
  .flex { display: flex; }
  .grid { display: grid; }
  .block { display: block; }

  /* Flex helpers */
  .items-center { align-items: center; }
  .justify-between { justify-content: space-between; }
  .gap-sm { gap: var(--space-sm); }
  .gap-md { gap: var(--space-md); }
  .gap-lg { gap: var(--space-lg); }

  /* Text */
  .text-center { text-align: center; }
  .text-sm { font-size: var(--text-sm); }
  .text-xs { font-size: var(--text-xs); }
  .text-medium { color: var(--color-ink-medium); }
  .text-light { color: var(--color-ink-light); }
  .text-accent { color: var(--color-accent-dark); }

  /* Spacing */
  .mt-sm { margin-block-start: var(--space-sm); }
  .mt-md { margin-block-start: var(--space-md); }
  .mt-lg { margin-block-start: var(--space-lg); }
  .mb-md { margin-block-end: var(--space-md); }

  /* Completed section divider */
  .completed-section {
    margin-block-start: var(--space-md);
    padding-block-start: var(--space-md);
    border-block-start: 1px solid var(--color-border);
  }

  .completed-section__label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-ink-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-block-end: var(--space-xs);
    padding-inline: var(--space-xs);
  }

  /* Manage page list */
  .manage-list {
    list-style: none;
  }

  .manage-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    border-block-end: 1px solid var(--color-border);
    min-block-size: 3rem;
    transition: background-color var(--transition-fast);

    &:last-child {
      border-block-end: none;
    }

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-accent-faint);
      }
    }
  }

  .manage-list__name {
    font-size: var(--text-base);
    color: var(--color-ink);
  }

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

  .manage-list__remove {
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity var(--transition-fast), color var(--transition-fast);

    @media (any-hover: hover) {
      &:hover {
        color: var(--color-negative);
      }
    }
  }

  .manage-list__item:hover .manage-list__remove {
    opacity: 1;
  }

  /* Manage page */
  .manage-page {
    max-inline-size: 40rem;
    margin-inline: auto;
  }

  .manage-page__header {
    margin-block-end: var(--space-xl);
  }

  .manage-page__back {
    font-size: var(--text-sm);
    margin-block-start: var(--space-xs);
  }

  /* Screen reader only */
  .sr-only {
    block-size: 1px;
    clip: rect(0, 0, 0, 0);
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }
}
}