@layer reset, tokens, base, components, a11y;

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

@layer tokens {
  :root {
    /* Catppuccin Mocha palette */
    --ctp-rosewater: #f5e0dc;
    --ctp-flamingo: #f2cdcd;
    --ctp-pink: #f5c2e7;
    --ctp-mauve: #cba6f7;
    --ctp-red: #f38ba8;
    --ctp-maroon: #eba0ac;
    --ctp-peach: #fab387;
    --ctp-yellow: #f9e2af;
    --ctp-green: #a6e3a1;
    --ctp-teal: #94e2d5;
    --ctp-sky: #89dceb;
    --ctp-sapphire: #74c7ec;
    --ctp-blue: #89b4fa;
    --ctp-lavender: #b4befe;
    --ctp-text: #cdd6f4;
    --ctp-subtext1: #bac2de;
    --ctp-subtext0: #a6adc8;
    --ctp-overlay2: #9399b2;
    --ctp-overlay1: #7f849c;
    --ctp-overlay0: #6c7086;
    --ctp-surface2: #585b70;
    --ctp-surface1: #45475a;
    --ctp-surface0: #313244;
    --ctp-base: #1e1e2e;
    --ctp-mantle: #181825;
    --ctp-crust: #11111b;

    /* Font stacks */
    --font-sans: 'Inter', system-ui, sans-serif;
    --font-mono: 'DM Mono', ui-monospace, 'Cascadia Mono', 'Fira Mono', monospace;

    /* Spacing scale */
    --space-2xs: 0.125rem;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.25rem;
    --space-2xl: 1.5rem;
    --space-3xl: 2rem;
    --space-4xl: 3rem;

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 20px;
    --radius-full: 999px;

    /* Touch target minimum */
    --touch-min: 44px;

    /* Type scale */
    --text-2xs:  0.7rem;                              /* 11.2px — compact data: badges, timestamps, indicators */
    --text-xs:   0.75rem;                             /* 12px   — secondary meta, small UI labels */
    --text-sm:   0.85rem;                             /* 13.6px — body-level UI: buttons, form labels, section headings */
    --text-md:   0.9rem;                              /* 14.4px — inputs, dialog body, create buttons */
    --text-base: 1rem;                                /* 16px   — item titles, dialog titles */
    --text-tab:  clamp(0.78rem, 0.7rem + 0.5vw, 0.85rem); /* fluid tab / toggle button text */
    --text-lg:   clamp(1.5rem, 1.25rem + 1vw, 2rem); /* header h1 */
    --text-xl:   clamp(1.75rem, 1.5rem + 1vw, 2.25rem); /* login title */
    --text-section: 0.75rem;                          /* section headings — DM Mono uppercase */

    color-scheme: dark;
  }
}

@layer base {
  body {
    font-family: var(--font-sans);
    font-optical-sizing: auto;
    background-color: var(--ctp-base);
    color: var(--ctp-text);
    line-height: 1.5;
    letter-spacing: -0.011em;
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
  }

  code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }
}

@layer components {
  /* App shell */
  main.app {
    inline-size: 100%;
    max-inline-size: 32rem;
    padding: var(--space-2xl) var(--space-lg) env(safe-area-inset-bottom, var(--space-2xl));
    overscroll-behavior-y: contain;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
  }

  /* Header */
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    & h1 {
      display: flex;
      align-items: center;
      gap: 0.35em;
      font-size: var(--text-lg);
      font-weight: 700;
      color: var(--ctp-mauve);
      letter-spacing: -0.025em;
      text-wrap: balance;
    }
  }

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

  .task-count {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--ctp-overlay1);
    background: var(--ctp-surface0);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
  }

  /* View navigation tabs */
  .view-nav {
    display: flex;
    gap: var(--space-2xs);
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--ctp-mantle);
    border-radius: var(--radius-lg);
    padding: var(--space-2xs);

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .view-tab {
    flex: 0 0 auto;
    padding-block: var(--space-sm);
    padding-inline: var(--space-md);
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--ctp-subtext0);
    font-family: inherit;
    font-size: var(--text-tab);
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, transform 0.1s;
    min-block-size: var(--touch-min);
    white-space: nowrap;
    display: flex;
    align-items: center;

    &.active {
      background: var(--ctp-surface0);
      color: var(--ctp-text);
      font-weight: 600;
    }

    &:hover:not(.active) {
      background: color-mix(in oklch, var(--ctp-surface0) 60%, transparent);
      color: var(--ctp-subtext0);
    }

    &:active:not(.active) { transform: scale(0.96); }
  }

  /* Create toggle */
  .create-toggle {
    display: flex;
    gap: var(--space-sm);
  }

  .create-btn {
    flex: none;
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid var(--ctp-surface1);
    border-radius: var(--radius-md);
    background: var(--ctp-surface0);
    color: var(--ctp-subtext1);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
    min-block-size: var(--touch-min);

    &:hover {
      background: var(--ctp-surface1);
      border-color: var(--ctp-surface2);
      color: var(--ctp-text);
    }

    &.active {
      border-color: var(--ctp-mauve);
      background: color-mix(in oklch, var(--ctp-mauve) 15%, var(--ctp-surface0));
      color: var(--ctp-mauve);
    }

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

  .create-toggle .create-btn:first-child:not(.active) {
    border-color: color-mix(in oklch, var(--ctp-mauve) 60%, var(--ctp-surface2));
    color: var(--ctp-mauve);
  }

  .create-toggle .create-btn:first-child:hover {
    background: color-mix(in oklch, var(--ctp-mauve) 15%, var(--ctp-surface0));
    border-color: var(--ctp-mauve);
  }

  /* Create / Edit forms */
  .create-form,
  .edit-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-xl);
    background: var(--ctp-surface0);
    border-radius: var(--radius-lg);
    animation: form-in 0.18s ease-out both;
  }

  .create-form input[type="text"],
  .create-form input[type="date"],
  .create-form input[type="datetime-local"],
  .create-form textarea,
  .create-form select,
  .edit-form input[type="text"],
  .edit-form input[type="date"],
  .edit-form input[type="datetime-local"],
  .edit-form textarea,
  .edit-form select {
    inline-size: 100%;
    padding: var(--space-md) var(--space-lg);
    border: 2px solid var(--ctp-surface2);
    border-radius: var(--radius-md);
    background: var(--ctp-mantle);
    color: var(--ctp-text);
    font-family: inherit;
    font-size: var(--text-md);
    line-height: 1.5;
    outline: none;
    transition: border-color 0.2s;
    min-block-size: var(--touch-min);

    &:focus-visible {
      border-color: var(--ctp-mauve);
      outline: 2px solid var(--ctp-mauve);
      outline-offset: 2px;
    }

    &::placeholder {
      color: var(--ctp-overlay0);
    }
  }

  .create-form textarea,
  .edit-form textarea {
    min-block-size: 60px;
    resize: vertical;
  }

  .create-form input[type="date"],
  .create-form input[type="datetime-local"],
  .edit-form input[type="date"],
  .edit-form input[type="datetime-local"] {
    color-scheme: dark;

    &::-webkit-calendar-picker-indicator {
      filter: invert(0.7);
      cursor: pointer;
    }
  }

  .create-form select,
  .edit-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath stroke='%237f849c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-inline-end: var(--space-3xl);
    cursor: pointer;
  }

  .form-row {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;

    & > select,
    & > input {
      flex: 1;
      min-inline-size: 0;
    }

    & > label {
      font-size: var(--text-xs);
      color: var(--ctp-subtext0);
      inline-size: 100%;
      padding-inline-start: var(--space-xs);
    }
  }

  .form-row.conditional {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .allday-row {
    padding-block: var(--space-xs);
  }

  .allday-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--ctp-subtext1);
    cursor: pointer;
    min-block-size: var(--touch-min);

    & input[type="checkbox"] {
      inline-size: 18px;
      block-size: 18px;
      accent-color: var(--ctp-peach);
      cursor: pointer;
    }
  }

  .form-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
    padding-block-start: var(--space-xl);
  }

  .btn-primary,
  .btn-cancel,
  .btn-reopen {
    padding: var(--space-sm) var(--space-lg);
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    min-block-size: var(--touch-min);
    transition: background 0.2s, transform 0.1s;

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

  .btn-primary {
    background: var(--ctp-mauve);
    color: var(--ctp-crust);

    &:hover {
      background: color-mix(in oklch, var(--ctp-mauve), var(--ctp-lavender) 50%);
    }
  }

  .btn-cancel {
    background: var(--ctp-surface1);
    color: var(--ctp-subtext0);

    &:hover {
      background: var(--ctp-surface2);
    }
  }

  .btn-reopen {
    background: var(--ctp-surface1);
    color: var(--ctp-blue);
    padding: var(--space-xs) var(--space-md);
    min-block-size: var(--touch-min);
    flex-shrink: 0;

    &:hover {
      background: var(--ctp-surface2);
    }
  }

  /* Label chips */
  .label-row {
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .label-chip {
    padding: var(--space-xs) var(--space-md);
    border: 1.5px solid var(--ctp-surface2);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--ctp-overlay1);
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.1s;
    min-block-size: var(--touch-min);
    white-space: nowrap;

    &.active {
      background: var(--ctp-surface0);
      color: var(--ctp-teal);
      border-color: var(--ctp-teal);
    }

    &:hover:not(.active) {
      color: var(--ctp-subtext0);
      border-color: var(--ctp-overlay0);
    }

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

  .label-badge {
    cursor: default;
    border: 1px solid var(--ctp-surface1);
    background: transparent;
    color: var(--ctp-overlay1);
    font-size: var(--text-2xs);
    padding: var(--space-2xs) var(--space-sm);
    min-block-size: auto;
  }

  /* Subtasks */
  .subtask-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .subtask-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .subtask-entry {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-block: var(--space-xs);
    padding-inline: var(--space-lg) var(--space-sm);
    border-radius: var(--radius-sm);

    &:hover,
    &:focus-within {
      background: var(--ctp-surface0);

      & .subtask-remove {
        opacity: 1;
      }
    }

    &.done .subtask-text {
      text-decoration: line-through;
      color: var(--ctp-overlay0);
    }

    & input[type="checkbox"] {
      cursor: pointer;
      accent-color: var(--ctp-green);
    }
  }

  .subtask-text {
    flex: 1;
    font-size: var(--text-sm);
  }

  .subtask-remove {
    background: none;
    border: none;
    color: var(--ctp-overlay0);
    cursor: pointer;
    font-size: var(--text-base);
    padding: var(--space-xs) var(--space-sm);
    min-inline-size: var(--touch-min);
    min-block-size: var(--touch-min);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;

    &:hover {
      color: var(--ctp-red);
    }
  }

  .subtask-progress {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--ctp-overlay1);
  }

  .subtask-toggle {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--ctp-overlay1);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    transition: background 0.15s, color 0.15s, transform 0.1s;

    &::after { content: '▸'; font-size: var(--text-2xs); }
    &.expanded::after { content: '▾'; }

    &:hover {
      color: var(--ctp-subtext0);
      background: var(--ctp-surface1);
    }

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

  .card-subtask-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding-block-start: var(--space-sm);
    margin-block-start: var(--space-sm);
    border-block-start: 1px solid var(--ctp-surface1);
  }

  .card-subtask-entry {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);

    & input[type="checkbox"] {
      cursor: pointer;
      accent-color: var(--ctp-green);
      flex-shrink: 0;
    }

    &.done .subtask-text {
      text-decoration: line-through;
      color: var(--ctp-overlay0);
    }

    &:hover {
      background: var(--ctp-surface1);
    }
  }

  /* Week strip (Calendar) */
  .week-strip {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    background: var(--ctp-mantle);
    border-radius: var(--radius-lg);
    padding: var(--space-sm);
  }

  .week-strip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--space-2xs);
  }

  .week-nav-cluster {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .week-strip-label {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--ctp-text);
    min-inline-size: 9rem;
    text-align: center;
  }

  .week-nav {
    inline-size: 30px;
    block-size: 30px;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--ctp-overlay1);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, transform 0.1s;

    &:hover {
      background: var(--ctp-surface0);
      color: var(--ctp-text);
    }

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

  .week-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-block-start: 1px solid var(--ctp-surface1);
    padding-block-start: var(--space-xs);
  }

  .week-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding-block: var(--space-xs);
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--ctp-overlay1);
    cursor: pointer;
    min-block-size: var(--touch-min);
    transition: color 0.15s, background 0.15s, transform 0.1s;
    font-family: inherit;

    &:hover {
      background: color-mix(in oklch, var(--ctp-surface0) 60%, transparent);
    }

    &.today {
      color: var(--ctp-sky);

      & .week-day-num {
        background: color-mix(in oklch, var(--ctp-sky) 20%, transparent);
        color: var(--ctp-sky);
        border-radius: var(--radius-full);
        inline-size: 28px;
        block-size: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    &.selected {
      color: var(--ctp-text);

      & .week-day-num {
        background: var(--ctp-mauve);
        color: var(--ctp-crust);
        border-radius: var(--radius-full);
        inline-size: 28px;
        block-size: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

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

  .week-day-name {
    font-size: var(--text-2xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0;
  }

  .week-day-num {
    font-size: var(--text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .week-today-btn {
    padding-inline: var(--space-sm);
    border: 1px solid var(--ctp-surface2);
    border-radius: var(--radius-md);
    background: var(--ctp-surface0);
    color: var(--ctp-subtext1);
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    min-block-size: 28px;
    transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.1s;
    white-space: nowrap;

    &:hover {
      color: var(--ctp-sky);
      border-color: var(--ctp-sky);
      background: color-mix(in oklch, var(--ctp-sky) 10%, var(--ctp-surface0));
    }

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

  .week-day-dot {
    inline-size: 4px;
    block-size: 4px;
    border-radius: 50%;
    background: color-mix(in oklch, var(--ctp-mauve) 60%, transparent);
  }

  /* Search bar (All view) */
  .search-bar {
    & input {
      inline-size: 100%;
      padding: var(--space-md) var(--space-lg);
      border: 2px solid var(--ctp-surface1);
      border-radius: var(--radius-lg);
      background: var(--ctp-surface0);
      color: var(--ctp-text);
      font-family: inherit;
      font-size: var(--text-md);
      outline: none;
      transition: border-color 0.2s;
      min-block-size: var(--touch-min);

      &:focus-visible {
        border-color: var(--ctp-mauve);
        outline: 2px solid var(--ctp-mauve);
        outline-offset: 2px;
      }

      &::placeholder {
        color: var(--ctp-overlay0);
      }
    }
  }

  /* Item list */
  .item-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);

    & > * {
      animation: card-in 0.16s ease-out both;
    }

    & > *:nth-child(2)  { animation-delay: 30ms; }
    & > *:nth-child(3)  { animation-delay: 60ms; }
    & > *:nth-child(4)  { animation-delay: 90ms; }
    & > *:nth-child(5)  { animation-delay: 120ms; }
    & > *:nth-child(6)  { animation-delay: 150ms; }
    & > *:nth-child(7)  { animation-delay: 180ms; }
    & > *:nth-child(8)  { animation-delay: 210ms; }
    & > *:nth-child(9)  { animation-delay: 240ms; }
    & > *:nth-child(10) { animation-delay: 270ms; }
    & > *:nth-child(11) { animation-delay: 300ms; }
    & > *:nth-child(12) { animation-delay: 330ms; }
  }

  @keyframes card-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes form-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Item cards */
  .item-card {
    --card-accent: transparent;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    background: var(--ctp-surface0);
    border-radius: 12px;
    box-shadow:
      0 2px 6px color-mix(in oklch, var(--ctp-crust) 45%, transparent),
      inset 3px 0 0 0 var(--card-accent);
    transition: background 0.2s, opacity 0.2s, transform 0.1s, box-shadow 0.2s;

    &.completed {
      opacity: 0.5;
      transform: scale(0.99);

      & .item-title {
        text-decoration: line-through;
        color: var(--ctp-overlay0);
      }
    }

    &.editing {
      flex-direction: column;
      align-items: stretch;
      padding: var(--space-sm);
    }

    &:active {
      background: var(--ctp-surface1);
      transform: scale(0.995);
    }
  }

  .event-card { --card-accent: var(--ctp-sapphire); }
  .task-card  { --card-accent: var(--ctp-overlay1); }
  .task-card.overdue {
    --card-accent: var(--ctp-red);
    background: color-mix(in oklch, var(--ctp-red) 8%, var(--ctp-surface0));
  }
  .task-card.due-today {
    --card-accent: var(--ctp-sapphire);
    background: color-mix(in oklch, var(--ctp-sapphire) 8%, var(--ctp-surface0));
  }
  .task-card.waiting {
    opacity: 0.8;
    filter: saturate(0.45);
    --card-accent: var(--ctp-overlay0);
  }

  .item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    overflow: hidden;
    min-inline-size: 0;
  }

  .item-title-row {
    display: flex;
    align-items: center;
  }

  .item-title-row .item-title {
    flex: 1;
    min-inline-size: 0;
  }

  .item-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--ctp-text);
    overflow-wrap: break-word;
    text-wrap: pretty;
  }

  .item-meta {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
  }

  .event-time {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--ctp-sapphire);
  }

  .event-location {
    font-size: var(--text-xs);
    color: var(--ctp-subtext0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-inline-size: 16rem;
  }

  .event-notes {
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--ctp-overlay1);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-inline-size: 100%;
  }

  /* Countdown badges */
  .countdown {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-full);
    letter-spacing: 0;
  }

  .countdown.overdue {
    background: color-mix(in oklch, var(--ctp-red) 15%, transparent);
    color: var(--ctp-red);
  }

  .countdown.due-soon {
    background: color-mix(in oklch, var(--ctp-sapphire) 15%, transparent);
    color: var(--ctp-sapphire);
  }

  .countdown.due-later {
    background: color-mix(in oklch, var(--ctp-green) 15%, transparent);
    color: var(--ctp-green);
  }

  .countdown.due-today {
    background: var(--ctp-sapphire);
    color: var(--ctp-crust);
    font-weight: 600;
  }

  /* Status badges */
  .badge {
    font-size: var(--text-2xs);
    font-weight: 500;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-full);
    letter-spacing: 0;
  }

  .waiting-badge {
    background: color-mix(in oklch, var(--ctp-yellow) 15%, transparent);
    color: var(--ctp-yellow);
  }

  .blocked-badge {
    background: color-mix(in oklch, var(--ctp-maroon) 15%, transparent);
    color: var(--ctp-maroon);
  }

  .stale-badge {
    background: transparent;
    color: var(--ctp-overlay1);
    border: 1px solid var(--ctp-surface2);
  }

  /* Custom checkbox */
  .checkbox {
    position: relative;
    inline-size: var(--touch-min);
    block-size: var(--touch-min);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    & input {
      position: absolute;
      opacity: 0;
      inline-size: 100%;
      block-size: 100%;
      cursor: pointer;
      margin: 0;

      &:disabled {
        cursor: not-allowed;
      }
    }

    & .checkmark {
      inline-size: 22px;
      block-size: 22px;
      border: 2px solid var(--ctp-overlay0);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, border-color 0.2s;
      pointer-events: none;

      & svg {
        inline-size: 14px;
        block-size: 14px;
        fill: none;
        stroke: var(--ctp-crust);
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        opacity: 0;
        transform: scale(0.6);
        transition: opacity 0.15s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
    }

    & input:checked + .checkmark {
      background: var(--ctp-green);
      border-color: var(--ctp-green);

      & svg {
        opacity: 1;
        transform: scale(1);
      }
    }

    & input:disabled + .checkmark {
      opacity: 0.4;
    }

    & input:focus-visible + .checkmark {
      outline: 2px solid var(--ctp-mauve);
      outline-offset: 2px;
    }
  }

  /* Item actions — absolutely positioned so they don't consume flow space */
  .item-actions {
    position: absolute;
    inset-inline-end: var(--space-lg);
    inset-block: 0;
    display: flex;
    align-items: center;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.15s;
  }

  @media (hover: hover) and (pointer: fine) {
    .item-card:not(.editing):hover .item-actions,
    .item-card:not(.editing):focus-within .item-actions {
      opacity: 1;
    }
  }

  @media (hover: none) {
    .item-actions {
      opacity: 0.2;
    }
  }

  .edit-btn,
  .delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    color: var(--ctp-overlay0);
    transition: color 0.2s, background 0.2s, transform 0.1s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    min-inline-size: var(--touch-min);
    min-block-size: var(--touch-min);
    justify-content: center;

    & svg {
      inline-size: 18px;
      block-size: 18px;
    }

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

  .edit-btn:hover {
    color: var(--ctp-blue);
    background: var(--ctp-surface1);
  }

  .delete-btn:hover {
    color: var(--ctp-red);
    background: var(--ctp-surface1);
  }

  /* Section headings */
  .section-heading {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ctp-overlay2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-block: var(--space-sm) var(--space-md);
    padding-inline-start: var(--space-sm);
    border-inline-start: 3px solid currentColor;
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 1;
    background: color-mix(in oklch, var(--ctp-base) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .overdue-heading {
    color: var(--ctp-red);
  }

  .overdue-section {
    margin-block-end: var(--space-2xl);
  }

  .today-section {
    margin-block-end: var(--space-2xl);
  }

  .today-heading {
    color: var(--ctp-sky);
  }

  /* Toast */
  .toast-container {
    position: fixed;
    inset-block-end: env(safe-area-inset-bottom, var(--space-2xl));
    inset-inline: var(--space-md);
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 100;
  }

  .toast {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--ctp-surface1);
    border-radius: var(--radius-lg);
    color: var(--ctp-text);
    font-size: var(--text-sm);
    box-shadow: 0 8px 24px color-mix(in oklch, var(--ctp-crust) 40%, transparent);
    pointer-events: auto;
    animation: toast-in 0.25s ease-out;
    max-inline-size: 25rem;
  }

  .toast.toast-out {
    animation: toast-out 0.2s ease-in forwards;
  }

  .toast-message {
    flex: 1;
  }

  .toast-undo-btn {
    padding: var(--space-xs) var(--space-md);
    border: none;
    border-radius: var(--radius-md);
    background: var(--ctp-mauve);
    color: var(--ctp-crust);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
    min-block-size: var(--touch-min);

    &:hover {
      background: color-mix(in oklch, var(--ctp-mauve), var(--ctp-lavender) 50%);
    }
  }

  @keyframes toast-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes toast-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(12px); }
  }

  /* Create dialog */
  .create-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    inline-size: fit-content;
    block-size: fit-content;
    border: 1px solid var(--ctp-surface2);
    border-radius: var(--radius-lg);
    background: var(--ctp-surface0);
    color: var(--ctp-text);
    padding: var(--space-xl);
    max-inline-size: min(90dvw, 28rem);
    box-shadow: 0 16px 48px color-mix(in oklch, var(--ctp-crust) 50%, transparent);
    font-family: inherit;
    animation: dialog-in 0.2s ease-out;

    &::backdrop {
      background: color-mix(in oklch, var(--ctp-crust) 60%, transparent);
      transition: background 0.25s;
    }
  }

  @starting-style {
    .create-dialog::backdrop {
      background: transparent;
    }
  }

  .create-dialog .create-form {
    padding: 0;
    background: transparent;
    border-radius: 0;
    animation: none;
  }

  /* Delete confirmation dialog */
  .confirm-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    inline-size: fit-content;
    block-size: fit-content;
    border: 1px solid var(--ctp-surface2);
    border-radius: var(--radius-lg);
    background: var(--ctp-surface0);
    color: var(--ctp-text);
    padding: var(--space-2xl);
    max-inline-size: min(90dvw, 24rem);
    box-shadow: 0 16px 48px color-mix(in oklch, var(--ctp-crust) 50%, transparent);
    font-family: inherit;
    animation: dialog-in 0.2s ease-out;

    &::backdrop {
      background: color-mix(in oklch, var(--ctp-crust) 60%, transparent);
      transition: background 0.25s;
    }
  }

  @starting-style {
    .confirm-dialog::backdrop {
      background: transparent;
    }
  }

  .confirm-dialog-title {
    font-size: var(--text-base);
    font-weight: 600;
    margin-block-end: var(--space-sm);
  }

  .confirm-dialog-text {
    font-size: var(--text-md);
    color: var(--ctp-subtext0);
    margin-block-end: var(--space-xl);
  }

  .confirm-dialog-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
  }

  .confirm-dialog-actions button {
    padding: var(--space-sm) var(--space-lg);
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    min-block-size: var(--touch-min);
    transition: background 0.2s, transform 0.1s;

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

  .confirm-cancel-btn {
    background: var(--ctp-surface2);
    color: var(--ctp-text);

    &:hover {
      background: var(--ctp-overlay0);
    }
  }

  .confirm-delete-btn {
    background: var(--ctp-red);
    color: var(--ctp-crust);

    &:hover {
      background: color-mix(in oklch, var(--ctp-red), var(--ctp-maroon) 50%);
    }
  }

  @keyframes dialog-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }

  /* Empty state */
  .empty-state {
    text-align: center;
    padding: var(--space-4xl) var(--space-lg);
    color: var(--ctp-overlay0);

    & p {
      font-size: var(--text-base);
      text-wrap: pretty;
    }
  }

  .empty-state-icon {
    display: block;
    opacity: 0.35;
    margin-block-end: var(--space-md);
    line-height: 1;
  }

  /* Focus outlines for keyboard navigation */
  :focus-visible {
    outline: 2px solid var(--ctp-mauve);
    outline-offset: 2px;
  }

  /* Calendar mode toggle (Day / Agenda) */
  .calendar-mode-toggle {
    display: flex;
    gap: var(--space-2xs);
    background: var(--ctp-mantle);
    border-radius: var(--radius-lg);
    padding: var(--space-2xs);
  }

  .calendar-mode-btn {
    flex: 1;
    padding-block: var(--space-sm);
    padding-inline: var(--space-md);
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--ctp-overlay2);
    font-family: inherit;
    font-size: var(--text-tab);
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, transform 0.1s;
    min-block-size: var(--touch-min);

    &.active {
      background: var(--ctp-surface0);
      color: var(--ctp-text);
      font-weight: 600;
    }

    &:hover:not(.active) {
      background: color-mix(in oklch, var(--ctp-surface0) 60%, transparent);
      color: var(--ctp-subtext0);
    }

    &:active:not(.active) { transform: scale(0.96); }
  }

  /* Agenda view */
  .agenda-view {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xl);
  }

  .agenda-date-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .agenda-date-heading {
    font-family: var(--font-mono);
    font-size: var(--text-section);
    font-weight: 500;
    color: var(--ctp-overlay2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-inline-start: var(--space-xs);

    &.today {
      color: var(--ctp-sky);
    }
  }

  /* All view: keep expanded card actions visible when selected */
  .item-card.reveal-on-interact.selected .item-actions {
    opacity: 1;
  }

  /* Tab count badge */
  .tab-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 18px;
    padding-inline: var(--space-xs);
    block-size: 18px;
    border-radius: var(--radius-full);
    background: color-mix(in oklch, var(--ctp-lavender) 20%, transparent);
    color: var(--ctp-lavender);
    font-size: var(--text-2xs);
    font-weight: 600;
    margin-inline-start: var(--space-xs);
    line-height: 1;
  }

  .view-tab.active .tab-count-badge {
    background: color-mix(in oklch, var(--ctp-lavender) 25%, transparent);
  }

  /* Window toggle row (Active view) */
  .window-toggle-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
  }

  .window-toggle-label {
    font-size: var(--text-xs);
    color: var(--ctp-overlay2);
    white-space: nowrap;
  }

  /* All view: combined controls row */
  .all-controls-row {
    display: flex;
    gap: var(--space-sm);
    align-items: center;

    & > .calendar-mode-toggle {
      flex: 1;
    }
  }

  /* Agenda events-only note */
  .agenda-events-note {
    font-size: var(--text-xs);
    color: var(--ctp-overlay2);
    padding-inline-start: var(--space-xs);
    margin-block-end: var(--space-sm);
  }

  /* Done view cap note */
  .done-cap-note {
    font-size: var(--text-xs);
    color: var(--ctp-overlay2);
    text-align: center;
    padding-block: var(--space-lg);
  }

  /* Recurrence rule badge */
  .recurrence-badge {
    background: color-mix(in oklch, var(--ctp-lavender) 15%, transparent);
    color: var(--ctp-lavender);
  }

  /* "Use without sync" ghost link button on login screen */
  .btn-link {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ctp-overlay1);
    font-family: inherit;
    font-size: var(--text-sm);
    padding: var(--space-xs) 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    align-self: center;
    min-block-size: var(--touch-min);
    transition: color 0.2s;

    &:hover {
      color: var(--ctp-subtext0);
    }
  }

  /* Login screen */
  .login-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-block-size: 60dvh;
    gap: var(--space-2xl);
  }

  .login-form-area,
  .login-sent-area {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    inline-size: 100%;
    max-inline-size: 24rem;
  }

  .login-form-area input[type="email"] {
    inline-size: 100%;
    padding: var(--space-md) var(--space-lg);
    border: 2px solid var(--ctp-surface2);
    border-radius: var(--radius-md);
    background: var(--ctp-mantle);
    color: var(--ctp-text);
    font-family: inherit;
    font-size: var(--text-md);
    line-height: 1.5;
    outline: none;
    transition: border-color 0.2s;
    min-block-size: var(--touch-min);

    &:focus-visible {
      border-color: var(--ctp-mauve);
      outline: 2px solid var(--ctp-mauve);
      outline-offset: 2px;
    }

    &::placeholder {
      color: var(--ctp-overlay0);
    }
  }

  .login-subtitle {
    color: var(--ctp-subtext0);
    font-size: var(--text-md);
  }

  .login-hint {
    color: var(--ctp-overlay1);
    font-size: var(--text-sm);
    min-block-size: 1.2em;
  }

  .login-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--ctp-mauve);
    letter-spacing: -0.025em;
  }

  /* Sync dot */
  .sync-dot {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    display: inline-block;
    transition: background 0.3s, opacity 0.3s;

    &.idle    { opacity: 0; }
    &.syncing { background: var(--ctp-yellow); animation: sync-pulse 1s infinite; }
    &.synced  { background: var(--ctp-green); }
    &.error   { background: var(--ctp-red); }
    &.pending { background: var(--ctp-peach); }
  }

  @keyframes sync-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
  }

  /* Header action button (sign in / sign out) */
  .header-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ctp-overlay1);
    font-family: inherit;
    font-size: var(--text-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    min-block-size: var(--touch-min);
    transition: color 0.2s, background 0.2s;

    &:hover {
      color: var(--ctp-subtext0);
      background: var(--ctp-surface0);
    }
  }

  /* Desktop: wider container + 2-column card grid */
  @media (min-width: 48rem) {
    main.app {
      max-inline-size: 52rem;
      padding: var(--space-3xl) var(--space-xl);
    }

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

    .form-row {
      flex-wrap: nowrap;
    }

    .item-card.editing {
      grid-column: 1 / -1;
    }
  }

  /* Desktop: hover elevation on cards */
  @media (hover: hover) and (pointer: fine) {
    .item-card:hover:not(.editing):not(.completed) {
      box-shadow:
        0 6px 16px color-mix(in oklch, var(--ctp-crust) 55%, transparent),
        inset 3px 0 0 0 var(--card-accent);
      transform: translateY(-2px);
    }
  }
}

@layer a11y {
  .skip-link {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: var(--space-md);
    padding: var(--space-sm) var(--space-lg);
    background: var(--ctp-mauve);
    color: var(--ctp-crust);
    font-weight: 600;
    border-radius: var(--radius-md);
    z-index: 200;
    text-decoration: none;

    &:focus {
      inset-block-start: var(--space-md);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  @media (prefers-contrast: more) {
    .item-card {
      border: 1px solid var(--ctp-overlay0);
    }

    .view-tab.active {
      border-block-end: 3px solid var(--ctp-text);
    }

    .item-card.completed {
      opacity: 0.7;
    }
  }

  /* On very narrow screens, hide Today button to give week-day cells more room */
  @media (max-width: 340px) {
    .week-today-btn { display: none; }
  }
}