# SLICE 13 — Remove underlines from kanban and matrix cards

> **State-saving rule:** update this file after every completed task and whenever
> work pauses. Keep implementation, automated validation, production packaging,
> and manual Joplin acceptance as separate status boundaries.

## Status

**COMPLETE.** Phases 1–5 are implemented and validated. Automation and package
inspection passed, and the user confirmed manual Joplin acceptance on
2026-07-28.

## Goal

Remove the distracting underline from every kanban and matrix card title while
preserving the visual distinction for completed items and every existing card
interaction.

The change applies equally to:

- ordinary project notes;
- incomplete native to-dos;
- completed native to-dos in Kanban Done;
- completed ordinary notes in Kanban Done;
- cards in both Skeleton and Eisenhower matrices;
- single and notebook-grouped layouts.

## Confirmed diagnosis

Kanban and matrix cards are rendered by the shared `renderCard` function as:

```html
<div class="gtd-kanban-card gtd-calendar-clickable">
  <div class="gtd-kanban-card-title">...</div>
</div>
```

The underline is real and comes from the generic clickable rule:

```css
.gtd-calendar-clickable {
  cursor: pointer;
  text-decoration: underline;
}
```

Calendar items already suppress that decoration through a calendar-scoped
override. Kanban and matrix cards do not, so the parent decoration propagates
through their title text.

Completed-card strikethrough is separate. `renderCard` applies an inline
`line-through` directly to `.gtd-kanban-card-title` when `card.completed` is
true. Removing the parent underline therefore must not remove Done styling.

## Confirmed design

Add a card-scoped override to the existing `.gtd-kanban-card` rule:

```css
.gtd-kanban-card {
  text-decoration: none;
}
```

This selector is deliberately narrow:

- It affects both kanban and matrix because they share `renderCard`.
- It affects both notes and to-dos because both use the same card element.
- It does not change calendar events, unscheduled items, Gantt rows, debug
  output, warnings, or other clickable elements.
- It does not change `cursor: pointer`, card borders, hover borders, custom
  colours, glyphs, recurrence marks, details, pagination, or click navigation.
- It leaves the completed title's inline `line-through` authoritative.

Do not remove `text-decoration: underline` from the generic
`.gtd-calendar-clickable` rule. Other renderers may rely on that default, and a
global change would make this small visual correction unnecessarily broad.

## Visual state table

| Card | Before | After |
|---|---|---|
| Backlog/In Progress note | Underline | No decoration |
| Backlog/In Progress to-do | Underline | No decoration |
| Done ordinary note | Underline + line-through | Line-through only |
| Done native to-do | Underline + line-through | Line-through only |
| Matrix note or to-do | Underline | No decoration |

Custom foreground colours, including intentionally red text, remain unchanged;
only the underline is removed.

## Accessibility and interaction boundary

Cards remain visually identifiable as interactive controls through their card
container, border, hover-border change, glyph, and pointer cursor. Click-to-open
behavior is unchanged.

This slice does not redesign keyboard semantics or convert cards from `div`
elements to buttons/links. That would be a separate accessibility task with a
larger markup, focus, key handling, and styling surface.

## Implementation plan

### Phase 1 — CSS correction

- [x] Add `text-decoration: none` to `.gtd-kanban-card` in
      `src/event-calendar.css`.
- [x] Keep the generic `.gtd-calendar-clickable` underline rule unchanged.
- [x] Keep the existing calendar-scoped decoration override unchanged.
- [x] Make no JavaScript or payload changes.

### Phase 2 — Static and rendering regression audit

- [x] Confirm kanban and matrix still use the shared `.gtd-kanban-card` element.
- [x] Confirm incomplete cards receive no inline text decoration.
- [x] Confirm completed cards still set `line-through` on the title row.
- [x] Confirm custom `fg-colour` and `bg-colour` remain inline card styles.
- [x] Confirm hover details, card-detail modes, click navigation, glyphs, and
      recurrence marks use unchanged code paths.
- [x] Confirm single and notebook-grouped layouts use the same renderer.

### Phase 3 — Documentation

- [x] Add an unreleased CHANGELOG entry describing the visual cleanup.
- [x] Update README or SPEC only if existing text claims cards are underlined;
      otherwise avoid unnecessary documentation churn.
- [x] Record the screenshot-derived acceptance intent in this file.

### Phase 4 — Automated validation and packaging

- [x] Run the complete Jest suite (251 tests across 16 suites).
- [x] Run TypeScript validation and webview JavaScript syntax checking.
- [x] Run CSS/build, whitespace, and prohibited-reference audits.
- [x] Build the production JPL.
- [x] Inspect the packaged `event-calendar.css` and confirm the scoped override
      is present.
- [x] Inspect archive contents; SHA-256:
      final v1.0.0 artifact
      `0b28fb0f5ffcb60d92e017fb0972ecaa456fcc3c24b144891dce7d72dc7d98ef`.

### Phase 5 — Manual Joplin acceptance

- [x] Backlog project-note titles are not underlined.
- [x] In Progress project-note titles are not underlined.
- [x] Backlog and In Progress to-do titles are not underlined.
- [x] Done note titles show line-through without underline.
- [x] Done to-do titles show line-through without underline.
- [x] Skeleton matrix note and to-do titles are not underlined.
- [x] Eisenhower matrix note and to-do titles are not underlined.
- [x] Custom foreground/background colours still render correctly.
- [x] Hover borders and card-detail behavior still work.
- [x] Clicking every card type still opens its source note.
- [x] Single and notebook-grouped views render consistently.
- [x] Record explicit user sign-off separately from automated checks.

## Out of scope

- Changing the generic clickable style globally.
- Changing calendar, Unscheduled, Gantt, warning, or debug decorations.
- Changing completed-item semantics or removing line-through.
- Altering card colours, borders, spacing, typography, glyphs, or pagination.
- Changing card markup, focus behavior, keyboard behavior, or ARIA semantics.
- Changing kanban/matrix filtering, sorting, grouping, or data collection.
- Bumping the plugin version or performing the v1.0.0 release.

## Acceptance criteria

- No kanban or matrix card title is underlined solely because it is clickable.
- Completed kanban notes and to-dos retain line-through styling.
- The change applies identically to notes, to-dos, matrix modes, and grouped
  layouts through the shared card renderer.
- No other clickable view element changes decoration.
- Automated validation, production packaging, and explicit manual acceptance
  are completed and recorded separately.