@layer components {
  .mobile-task-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: none;
    align-items: flex-end;
    background: color-mix(in srgb, var(--ink) 42%, transparent);
  }

  .mobile-task-modal.open {
    display: flex;
  }

  .mobile-task-modal__content {
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: var(--space-4);
    border-radius: var(--r-3) var(--r-3) 0 0;
    background: var(--surface-raised);
  }

  .mobile-task-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
  }

  .mobile-task-modal__title {
    font-size: var(--text-md);
    font-weight: 600;
  }

  .mobile-task-modal__actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .keyboard-hint {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    box-shadow: var(--ring);
    border-radius: var(--r-2);
    background: var(--surface);
    color: var(--muted);
    font-size: var(--text-xs);
  }

  .keyboard-hint kbd {
    padding: 0 0.3rem;
    border: 1px solid var(--border);
    border-radius: var(--r-1);
    background: var(--surface-raised);
  }

  @media (max-width: 700px) {
    .task-actions {
      display: none;
    }

    .keyboard-hint {
      display: none;
    }
  }
}

@layer components {
  .keyboard-shortcuts-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-toast);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
  }

  .keyboard-shortcuts-modal .modal-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .keyboard-shortcuts-modal .modal-content {
    position: relative;
    z-index: 1;
    isolation: isolate;
    width: min(40rem, 100%);
    max-height: 80vh;
    overflow-y: auto;
    padding: var(--space-5);
    box-shadow: var(--ring);
    border-radius: var(--r-3);
    background: var(--surface-raised);
    box-shadow: var(--shadow-3);
  }

  .shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-4);
  }

  .shortcut-group h3 {
    margin-bottom: var(--space-2);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 560;
  }

  .shortcut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-1) 0;
    font-size: var(--text-sm);
  }

  .shortcut-keys {
    display: flex;
    gap: var(--space-1);
  }

  .shortcut-keys kbd,
  kbd {
    padding: 0.05rem 0.35rem;
    border: 1px solid var(--border);
    border-radius: var(--r-1);
    background: var(--surface);
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
  }

  .task-focused,
  .section-item-focused .list-item-content {
    box-shadow: inset 0 0 0 2px var(--accent);
    border-radius: var(--r-2);
  }

  .section-focused {
    border-color: var(--accent);
  }

  .task-edit-input,
  .section-item-edit-input,
  .list-item-form .form-input {
    flex: 1;
    min-width: 0;
  }

  .section-item-row,
  .list-item-content {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--r-2);
  }

  .list-item-content:hover {
    background: var(--inset);
  }

  .section-item-actions {
    display: flex;
    gap: 0.1rem;
    opacity: 0;
    transition: opacity var(--dur-1) var(--ease);
  }

  .list-item:hover .section-item-actions,
  .section-item-row:hover .section-item-actions {
    opacity: 1;
  }

  .cursor-pointer {
    cursor: pointer;
  }
}

@layer components {
  .day-empty {
    padding: var(--space-2) var(--space-2) var(--space-3);
    color: var(--muted);
    font-size: var(--text-xs);
  }

  .task-hours-input {
    width: 3.25rem;
    min-height: 1.85rem;
    padding: var(--space-1);
    border-color: transparent;
    background: transparent;
    font-size: var(--text-xs);
    text-align: right;
  }

  .task-form__input-group:focus-within .task-hours-input {
    border-color: var(--border);
  }

  .section-item-delete {
    opacity: 0;
  }

  .list-item:hover .section-item-delete,
  .list-item:focus-within .section-item-delete {
    opacity: 1;
  }

  .day-section-head .btn-icon-sm {
    color: var(--muted);
    opacity: 0;
    transition: opacity var(--dur-1) var(--ease);
  }

  .day-section:hover .day-section-head .btn-icon-sm,
  .day-section-head:focus-within .btn-icon-sm {
    opacity: 1;
  }

  .day-section-head .btn-icon-sm:hover {
    color: var(--danger);
    background: var(--danger-soft);
  }
}

@layer components {
  .day-section--rest {
    margin-bottom: var(--space-4);
  }

  .day-section--rest > .day-section-head {
    border-bottom: 0;
    list-style: none;
    cursor: pointer;
  }

  .day-section--rest > .day-section-head::marker,
  .day-section--rest > .day-section-head::-webkit-details-marker {
    display: none;
  }

  .day-section--rest > .day-section-head::before {
    content: "›";
    color: var(--muted);
    transition: transform var(--dur-1) var(--ease);
  }

  .day-section--rest:not([open]) > .day-section-head {
    border-bottom: 0;
  }

  .day-section--rest[open] > .day-section-head::before {
    transform: rotate(90deg);
  }

  .day-section--rest > .day-section-head:hover {
    color: var(--ink);
  }

  .day-section--rest .day-section-title {
    color: var(--ink-2);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 560;
    letter-spacing: 0;
    text-transform: none;
  }

  .day-rest-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2);
    border-radius: var(--r-2);
  }

  .day-rest-row:hover,
  .day-rest-row:focus-within {
    background: var(--inset);
  }

  .day-rest-name {
    width: 8rem;
    flex-shrink: 0;
    font-size: var(--text-sm);
    font-weight: 540;
  }

  .day-rest-row .add-row {
    flex: 1;
    min-width: 0;
    padding-left: 0;
  }

  .day-rest-row .add-row:hover,
  .day-rest-row .add-row:focus-within {
    background: transparent;
  }

  .day-note-form {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }

  .day-note-form .form-textarea,
  .day-note-form .form-input {
    flex: 1;
  }

  .day-note + .day-note-form {
    display: none;
  }

  .day-section:hover .day-note + .day-note-form,
  .day-section:focus-within .day-note + .day-note-form {
    display: flex;
  }

  @media (max-width: 640px) {
    .day-rest-row {
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-1);
    }

    .day-rest-name {
      width: auto;
    }
  }
}