:root {
  --op-font-family: 'Inter', system-ui, sans-serif;
  --op-radius-small: 0;
  --op-radius-medium: 0;
  --op-radius-large: 0;
  --op-radius-x-large: 0;
  --op-radius-2x-large: 0;
  --op-radius-pill: 0;
  --op-radius-circle: 0;
  --op-color-primary-h: 18;
  --op-color-primary-s: 36%;
  --op-color-primary-l: 54%;
  --op-color-neutral-h: 20;
  --op-color-neutral-s: 6%;

  --td-font-body: calc(var(--op-font-scale-unit) * 1.3);
  --td-font-meta: var(--op-font-x-small);
  --td-column-width: calc(70 * var(--op-size-unit));
  --td-header-height: calc(20 * var(--op-size-unit));
  --td-font-display: 'Lora', 'Times New Roman', serif;
  --td-font-masthead: clamp(calc(var(--op-font-scale-unit) * 2.8), 1.8rem + 1.6vw, calc(var(--op-font-scale-unit) * 4));
  --td-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --td-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --td-label-tracking: 0.12em;
  --td-stripe: color-mix(in srgb, var(--op-color-neutral-plus-five) 55%, transparent);
  --td-dot: color-mix(in srgb, var(--op-color-neutral-plus-two) 45%, transparent);
  --td-grid: calc(4 * var(--op-size-unit));

  --td-page: light-dark(var(--op-color-neutral-plus-seven), var(--op-color-neutral-plus-eight));
  --td-surface: var(--op-color-neutral-plus-max);
  --td-hover: var(--op-color-neutral-plus-seven);
  --td-line: var(--op-color-neutral-plus-six);
  --td-line-strong: var(--op-color-neutral-plus-four);
  --td-text: var(--op-color-neutral-on-plus-max);
  --td-muted: var(--op-color-neutral-on-plus-max-alt);
  --td-faint: var(--op-color-neutral-plus-two);
  --td-accent: var(--op-color-primary-original);
  --td-accent-fill: var(--op-color-primary-plus-one);
  --td-accent-fill-hover: var(--op-color-primary-base);
  --td-on-accent: var(--op-color-primary-on-plus-one);
  --td-overdue: var(--op-color-alerts-danger-on-plus-max-alt);
  --td-secondary-h: 150;
  --td-secondary-s: 20%;
  --td-secondary: hsl(var(--td-secondary-h) var(--td-secondary-s) 46%);
  --td-secondary-tint: light-dark(
    hsl(var(--td-secondary-h) var(--td-secondary-s) 93%),
    hsl(var(--td-secondary-h) 14% 19%)
  );
  --td-secondary-text: light-dark(
    hsl(var(--td-secondary-h) 24% 30%),
    hsl(var(--td-secondary-h) 22% 72%)
  );
  --td-on-secondary: var(--op-color-white);
  --td-tag-clay-bg: light-dark(var(--op-color-primary-plus-six), var(--op-color-primary-plus-eight));
  --td-tag-sage-bg: var(--td-secondary-tint);
  --td-tag-clay-ink: light-dark(var(--op-color-primary-minus-two), var(--op-color-primary-on-plus-eight-alt));
  --td-tag-sage-ink: var(--td-secondary-text);

  --td-chrome: light-dark(
    var(--op-color-primary-plus-eight),
    color-mix(in srgb, var(--op-color-neutral-plus-seven), var(--op-color-primary-plus-seven) 35%)
  );
  --td-chrome-line: var(--td-line);
  --td-panel: light-dark(var(--op-color-primary-plus-six), var(--op-color-primary-plus-eight));
  --td-panel-ink: light-dark(var(--op-color-primary-minus-two), var(--op-color-primary-on-plus-eight-alt));
  --td-panel-line: color-mix(in srgb, var(--td-panel-ink) 18%, transparent);
  --td-panel-head: light-dark(var(--op-color-primary-plus-eight), var(--op-color-primary-plus-seven));
  --td-panel-hover: light-dark(var(--op-color-primary-plus-seven), var(--op-color-primary-plus-six));
  --td-date-strong: var(--td-secondary-text);
  --td-date-mid: color-mix(in oklab, var(--td-date-strong) 70%, var(--td-date-soft));
  --td-date-soft: light-dark(
    hsl(var(--td-secondary-h) 14% 52%),
    hsl(var(--td-secondary-h) 12% 56%)
  );
  --td-title: color-mix(in srgb, var(--td-text) 62%, var(--td-muted));
  --td-chrome-hover: var(--td-hover);
}

[hidden] {
  display: none !important;
}

::selection {
  background-color: var(--op-color-primary-plus-five);
  color: var(--td-text);
}

.app {
  caret-color: var(--td-accent);
  scrollbar-color: var(--td-line-strong) transparent;
  display: flex;
  flex-direction: column;
  block-size: 100dvh;
  margin: 0;
  background-color: var(--td-page);
  background-image: repeating-linear-gradient(
    90deg,
    var(--td-stripe) 0 var(--op-border-width),
    transparent var(--op-border-width) var(--op-space-2x-small)
  );
  color: var(--td-text);
  font-family: var(--op-font-family);
  font-size: var(--td-font-body);
  -webkit-font-smoothing: antialiased;

  .icon {
    --__op-icon-font-size: var(--op-font-medium);

    color: var(--td-muted);
  }
}

/* region masthead */

.masthead {
  display: flex;
  flex-direction: column;
  margin: max(var(--op-space-large), env(safe-area-inset-top)) var(--op-space-large) 0;
  background-color: var(--td-page);
  box-shadow: var(--op-border-all) var(--td-line-strong), var(--op-shadow-x-small);

  .masthead__lede {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--op-space-x-large);
    padding: var(--op-space-medium);
  }

  .masthead__title {
    display: flex;
    align-items: center;
    gap: var(--op-space-small);
    margin: 0;
    color: var(--td-date-strong);
    font-family: var(--td-font-display);
    font-size: var(--td-font-masthead);
    font-weight: var(--op-font-weight-medium);
    letter-spacing: -0.025em;
    line-height: 1;
  }

  .masthead__logo {
    inline-size: 1em;
    block-size: 1em;
    box-shadow: var(--op-shadow-x-small);
  }

  .masthead__end {
    display: flex;
    align-items: center;
    gap: var(--op-space-medium);
    margin-inline-start: auto;
  }

  .masthead__dateline {
    padding-block: var(--op-space-3x-small);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
}

.view-tabs {
  display: flex;
  gap: var(--op-space-3x-small);
  font-family: var(--op-font-family);
  letter-spacing: normal;
  text-transform: none;

  .view-tabs__input {
    position: absolute;
    opacity: var(--op-opacity-none);
    pointer-events: none;
  }

  .view-tabs__label {
    padding: var(--op-space-2x-small) var(--op-space-x-small);
    border-radius: var(--op-radius-medium);
    color: var(--td-muted);
    cursor: pointer;
    font-size: var(--td-font-meta);
    font-weight: var(--op-font-weight-medium);
    white-space: nowrap;

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

  .view-tabs__input:checked + .view-tabs__label {
    background-color: var(--td-surface);
    box-shadow: var(--op-border-all) var(--td-line), inset 0 calc(-1 * var(--op-border-width-large)) 0 var(--td-accent);
    color: var(--td-text);
  }

  .view-tabs__input:focus-visible + .view-tabs__label {
    box-shadow: var(--op-border-all) var(--td-accent);
  }
}

.ghost-select {
  display: inline-flex;
  align-items: center;
  gap: var(--op-space-2x-small);
  padding: var(--op-space-2x-small) var(--op-space-x-small);
  border-radius: var(--op-radius-medium);
  color: var(--td-muted);
  cursor: pointer;

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

  .icon {
    --__op-icon-font-size: var(--op-font-small);
  }

  .ghost-select__label {
    font-size: var(--td-font-meta);
    font-weight: var(--op-font-weight-medium);
  }
}

button.ghost-select {
  border: 0;
  background: none;
  font: inherit;

  &:focus-visible {
    outline: none;
    box-shadow: var(--op-border-all) var(--td-accent);
  }

  &[aria-expanded='true'] {
    background-color: var(--td-hover);
    color: var(--td-text);
  }
}

/* region tag-menu */

.task-card__tag,
.tag-chip {
  --__td-tag-ink: color-mix(in oklab, var(--td-tag-clay-ink) var(--td-tag-mix, 50%), var(--td-tag-sage-ink));

  background-color: color-mix(in oklab, var(--td-tag-clay-bg) var(--td-tag-mix, 50%), var(--td-tag-sage-bg));
  box-shadow: inset 0 0 0 var(--op-border-width) color-mix(in srgb, var(--__td-tag-ink) 30%, transparent);
  color: var(--__td-tag-ink);
  font-weight: var(--op-font-weight-medium);
}

.tag-field {
  flex-wrap: wrap;
  row-gap: var(--op-space-3x-small);
  cursor: text;

  .tag-field__chips {
    display: contents;
  }

  .tag-field__input {
    flex: 1;
    min-inline-size: calc(20 * var(--op-size-unit));
  }
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--op-space-3x-small);
  padding: 0 var(--op-space-3x-small) 0 var(--op-space-x-small);
  font-size: var(--td-font-meta);
  line-height: var(--op-line-height-base);

  .tag-chip__remove {
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    opacity: var(--op-opacity-half);

    &:hover,
    &:focus-visible {
      outline: none;
      opacity: var(--op-opacity-full);
    }

    .icon {
      --__op-icon-font-size: var(--op-font-x-small);

      color: inherit;
    }
  }
}

.tag-suggest {
  max-block-size: calc(64 * var(--op-size-unit));
  overflow-y: auto;

  .tag-menu__option[aria-selected='true'] {
    background-color: var(--td-hover);
    font-weight: var(--op-font-weight-normal);
  }

  .tag-suggest__create {
    color: var(--td-muted);

    b {
      color: var(--td-text);
      font-weight: var(--op-font-weight-medium);
    }
  }

  .tag-suggest__empty {
    margin: 0;
    padding: var(--op-space-x-small);
    color: var(--td-muted);
  }
}

.tag-dot {
  flex: none;
  inline-size: var(--op-space-x-small);
  block-size: var(--op-space-x-small);
  border-radius: var(--op-radius-circle);
  background-color: color-mix(in oklab, var(--td-accent) var(--td-tag-mix, 50%), var(--td-secondary));

  &.tag-dot--none {
    background-color: transparent;
    box-shadow: inset 0 0 0 var(--op-border-width) var(--td-faint);
  }
}

.tag-menu__lead {
  display: inline-flex;

  &:empty {
    display: none;
  }
}

.tag-menu__list {
  position: fixed;
  inset: auto;
  min-inline-size: calc(52 * var(--op-size-unit));
  margin: 0;
  padding: var(--op-space-2x-small);
  border: 0;
  border-radius: var(--op-radius-medium);
  background-color: var(--td-surface);
  box-shadow: var(--op-border-all) var(--td-line-strong), var(--op-shadow-medium);
  color: var(--td-text);
  font-family: var(--op-font-family);
  font-size: var(--td-font-meta);

  &:popover-open {
    display: flex;
    flex-direction: column;
    gap: var(--op-space-3x-small);
  }

  .tag-menu__heading {
    margin: 0;
    padding: var(--op-space-x-small) var(--op-space-x-small) var(--op-space-2x-small);
    color: var(--td-muted);
  }

  .tag-menu__divider {
    block-size: var(--op-border-width);
    margin: var(--op-space-2x-small) 0;
    background-color: var(--td-line);
  }

  .tag-menu__option {
    display: flex;
    align-items: center;
    gap: var(--op-space-x-small);
    padding: var(--op-space-x-small);
    border: 0;
    border-radius: var(--op-radius-small);
    background: none;
    color: var(--td-text);
    cursor: pointer;
    font: inherit;
    text-align: start;

    &:hover,
    &:focus-visible {
      outline: none;
      background-color: var(--td-hover);
    }

    &[aria-selected='true'] {
      font-weight: var(--op-font-weight-medium);
    }
  }

  .tag-menu__name {
    flex: 1;
  }

  .tag-menu__count {
    color: var(--td-muted);
    font-family: var(--td-font-mono);
    font-size: var(--op-font-2x-small);
  }

  .tag-menu__check {
    inline-size: var(--op-font-small);

    .icon {
      --__op-icon-font-size: var(--op-font-small);

      color: var(--td-accent);
    }
  }
}

/* region workspace */

.label {
  font-family: var(--td-font-mono);
  font-size: var(--op-font-2x-small);
  font-weight: var(--op-font-weight-medium);
  letter-spacing: var(--td-label-tracking);
  text-transform: uppercase;
}

.panel-bar {
  display: flex;
  align-items: center;
  gap: var(--op-space-medium);
  padding: var(--op-space-x-small) var(--op-space-medium);
  background-color: var(--td-chrome);
  box-shadow: var(--op-border-bottom) var(--td-line-strong);
  color: var(--td-muted);
  font-family: var(--td-font-mono);
  font-size: var(--op-font-2x-small);
  font-weight: var(--op-font-weight-medium);
  letter-spacing: var(--td-label-tracking);
  text-transform: uppercase;
}

.workspace {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-block-size: 0;
  margin: var(--op-space-large);
  background-color: var(--td-page);
  background-image: radial-gradient(circle, var(--td-dot) var(--op-border-width), transparent calc(var(--op-border-width) * 1.5));
  background-size: var(--td-grid) var(--td-grid);
  box-shadow: var(--op-border-all) var(--td-line-strong), var(--op-shadow-x-small);

  .panel-bar {
    position: relative;
    z-index: 2;
    padding-inline: var(--op-space-large);
  }

  .tag-menu {
    margin-inline-start: auto;
    font-family: var(--op-font-family);
    letter-spacing: normal;
    text-transform: none;
  }
}

@keyframes td-blink {
  50% {
    opacity: var(--op-opacity-disabled);
  }
}

.sync-status {
  display: inline-flex;
  align-items: center;
  gap: var(--op-space-x-small);
  padding: var(--op-space-3x-small) var(--op-space-2x-small);
  border: 0;
  border-radius: var(--op-radius-small);
  background: none;
  color: var(--td-muted);
  cursor: pointer;

  &:hover {
    color: var(--td-text);
  }

  &:focus-visible {
    outline: none;
    box-shadow: var(--op-border-all) var(--td-accent);
  }

  i {
    inline-size: calc(1.5 * var(--op-size-unit));
    block-size: calc(1.5 * var(--op-size-unit));
    background-color: var(--td-secondary);
  }

  &[data-state='saving'] i,
  &[data-state='loading'] i {
    background-color: var(--td-accent);
    animation: td-blink 1s steps(2, jump-none) infinite;
  }

  &[data-state='offline'] i {
    background-color: var(--td-faint);
  }

  &[data-state='error'] {
    color: var(--td-overdue);

    i {
      background-color: var(--td-overdue);
    }
  }
}

/* region board */

.board {
  display: flex;
  flex: 1;
  align-items: flex-start;
  min-block-size: 0;
  gap: var(--op-space-small);
  padding: var(--op-space-medium) var(--op-space-large);
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-padding-inline: var(--op-space-large);
  scroll-snap-type: x proximity;
}

.board-column {
  display: flex;
  flex: 0 0 var(--td-column-width);
  flex-direction: column;
  max-block-size: 100%;
  border-radius: var(--op-radius-small);
  background-color: var(--td-panel);
  box-shadow: var(--op-border-all) var(--td-panel-line);
  scroll-snap-align: start;

  &.board-column--drop-target {
    box-shadow: var(--op-border-all) var(--td-accent);
  }

  &.board-column--dragging {
    opacity: var(--op-opacity-half);
  }

  &.board-column--uncategorized {
    .board-column__header {
      cursor: default;
    }

    .board-column__name {
      color: var(--td-muted);
      font-style: italic;
    }
  }

  .board-column__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    cursor: grab;
    align-items: baseline;
    column-gap: var(--op-space-x-small);
    padding: var(--op-space-small) var(--op-space-x-small) var(--op-space-small) var(--op-space-small);
    border-start-start-radius: var(--op-radius-small);
    border-start-end-radius: var(--op-radius-small);
    background-color: var(--td-panel-head);
    box-shadow: var(--op-border-bottom) var(--td-panel-line);
  }

  .board-column__menu-button {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
    opacity: var(--op-opacity-none);
  }

  &:hover .board-column__menu-button,
  .board-column__menu-button:focus-visible,
  .board-column__menu-button[aria-expanded='true'] {
    opacity: var(--op-opacity-full);
  }

  .board-column__rename {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-block-end: var(--op-border-width) solid var(--td-accent);
    background: none;
    color: var(--td-text);
    font-family: var(--td-font-display);
    font-size: var(--op-font-medium);
    font-weight: var(--op-font-weight-medium);
    letter-spacing: -0.015em;
    line-height: var(--op-line-height-dense);

    &:focus {
      outline: none;
    }
  }

  .board-column__name {
    margin: 0;
    color: var(--td-text);
    overflow: hidden;
    font-family: var(--td-font-display);
    font-size: var(--op-font-medium);
    font-weight: var(--op-font-weight-medium);
    letter-spacing: -0.015em;
    line-height: var(--op-line-height-dense);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .board-column__count {
    grid-row: 1;
    grid-column: 3;
    color: var(--td-muted);
    font-family: var(--td-font-display);
    font-size: var(--op-font-medium);
    font-style: italic;
    font-variant-numeric: tabular-nums lining-nums;
    line-height: var(--op-line-height-dense);
  }

  .board-column__done-toggle {
    justify-self: start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--td-muted);
    cursor: pointer;

    &:hover {
      color: var(--td-text);
    }

    &:focus-visible {
      outline: none;
      box-shadow: 0 0 0 var(--op-border-width) var(--td-accent);
    }
  }

  .board-column__sub {
    grid-column: 1 / -1;
    margin-block-start: var(--op-space-3x-small);
    color: var(--td-muted);
  }

  .board-column__cards {
    display: flex;
    flex-direction: column;
    gap: var(--op-space-2x-small);
    min-block-size: var(--op-space-2x-large);
    padding: 0;
    gap: 0;
    overflow-y: auto;
    scrollbar-width: none;

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

  .board-column__empty {
    margin: 0;
    padding: var(--op-space-medium) var(--op-space-small);
    box-shadow: inset 0 calc(-1 * var(--op-border-width)) 0 var(--td-panel-line);
    color: var(--td-muted);
    font-size: var(--td-font-meta);
    text-align: center;
  }

  .board-column__footer:empty {
    display: none;
  }

  .board-column__footer {
    display: flex;
    flex-direction: column;

    .quiet-button {
      justify-content: center;
      padding-block: var(--op-space-small);
      border-radius: 0;
    }
  }

  .board-column__add-form {
    display: flex;
  }

  .board-column__add-input {
    flex: 1;
    padding: var(--op-space-x-small) var(--op-space-small);
    border: 0;
    background-color: var(--td-surface);
    box-shadow: inset 0 calc(-1 * var(--op-border-width)) 0 var(--td-panel-line);
    color: var(--td-text);
    font: inherit;

    &:focus {
      outline: none;
      box-shadow: inset 0 0 0 var(--op-border-width) var(--td-accent);
    }
  }
}

.quiet-button {
  display: inline-flex;
  align-items: center;
  gap: var(--op-space-2x-small);
  padding: var(--op-space-2x-small) var(--op-space-x-small);
  border: 0;
  border-radius: var(--op-radius-medium);
  background: none;
  color: var(--td-muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--td-font-meta);
  font-weight: var(--op-font-weight-medium);

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

  &:focus-visible {
    outline: none;
    box-shadow: var(--op-border-all) var(--td-accent);
  }

  .icon {
    --__op-icon-font-size: var(--op-font-small);

    color: inherit;
  }

  &.quiet-button--icon {
    padding: var(--op-space-3x-small);
  }

  &.quiet-button--primary {
    background-color: var(--td-accent-fill);
    color: var(--td-on-accent);

    &:hover {
      background-color: var(--td-accent-fill-hover);
      color: var(--td-on-accent);
    }
  }

  &.quiet-button--danger:hover {
    color: var(--td-overdue);
  }
}

@media (hover: none) {
  .board-column .board-column__menu-button {
    opacity: var(--op-opacity-full);
  }
}

.board-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--op-space-small);
  inline-size: min(100%, calc(96 * var(--op-size-unit)));
  margin: var(--op-space-3x-large) auto;
  padding: var(--op-space-x-large);
  border-radius: var(--op-radius-small);
  background-color: var(--td-panel);
  box-shadow: var(--op-border-all) var(--td-panel-line);

  .board-empty__title {
    margin: 0;
    color: var(--td-text);
    font-family: var(--td-font-display);
    font-size: var(--op-font-2x-large);
    font-weight: var(--op-font-weight-medium);
    letter-spacing: -0.02em;
  }

  .board-empty__lede {
    margin: 0;
    color: var(--td-muted);
    line-height: var(--op-line-height-base);
  }

  .board-column__add-form {
    inline-size: 100%;
  }
}

/* region task-card */

.task-card {
  display: flex;
  align-items: flex-start;
  gap: var(--op-space-x-small);
  padding: var(--op-space-small);
  background-color: var(--td-panel-head);
  box-shadow: inset 0 calc(-1 * var(--op-border-width)) 0 var(--td-panel-line);
  cursor: default;
  transition: var(--op-transition-input);

  &:hover {
    background-color: var(--td-panel-hover);
  }

  &:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 var(--op-border-width) var(--td-accent);
  }

  &[draggable='true'] {
    cursor: grab;
  }

  &.task-card--dragging {
    opacity: var(--op-opacity-half);
  }

  &.task-card--dimmed {
    opacity: var(--op-opacity-disabled);
  }

  &.task-card--completing {
    overflow: hidden;
    pointer-events: none;

    .task-card__check {
      background-color: var(--td-secondary);
      box-shadow: none;
      animation: td-check-in 360ms var(--td-ease-out);

      .icon {
        color: var(--td-on-secondary);
        opacity: var(--op-opacity-full);
      }
    }

    .task-card__strike {
      background-size: 100% var(--op-border-width);
      color: var(--td-muted);
      transition:
        background-size 380ms var(--td-ease-out) 80ms,
        color 380ms var(--td-ease-out) 80ms;
    }
  }

  &.task-card--done {
    background-color: transparent;

    .task-card__title {
      color: var(--td-muted);
      text-decoration: line-through;
      text-decoration-color: var(--td-faint);
    }
  }

  .task-card__check {
    display: inline-grid;
    flex: none;
    place-items: center;
    inline-size: calc(3.5 * var(--op-size-unit));
    block-size: calc(3.5 * var(--op-size-unit));
    padding: 0;
    margin-block-start: var(--op-space-3x-small);
    border: 0;
    border-radius: var(--op-radius-circle);
    background: none;
    box-shadow: inset 0 0 0 var(--op-border-width) var(--td-faint);
    cursor: pointer;

    .icon {
      --__op-icon-font-size: var(--op-font-x-small);

      color: var(--td-muted);
      opacity: var(--op-opacity-none);
    }

    &:hover {
      box-shadow: inset 0 0 0 var(--op-border-width) var(--td-accent);

      .icon {
        color: var(--td-accent);
        opacity: var(--op-opacity-full);
      }
    }

    &:focus-visible {
      outline: none;
      box-shadow: inset 0 0 0 var(--op-border-width) var(--td-accent);
    }
  }

  &.task-card--done .task-card__check {
    background-color: var(--td-secondary);
    box-shadow: none;

    .icon {
      color: var(--td-on-secondary);
      opacity: var(--op-opacity-full);
    }
  }

  .task-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--op-space-x-small);
    min-inline-size: 0;
  }

  .task-card__strike {
    background: linear-gradient(currentColor, currentColor) no-repeat 0 60% / 0% var(--op-border-width);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .task-card__title {
    margin: 0;
    color: var(--td-title);
    font-size: var(--td-font-body);
    font-weight: var(--op-font-weight-normal);
    line-height: var(--op-line-height-base);
    overflow-wrap: anywhere;
  }

  .task-card__meta {
    font-variant-numeric: tabular-nums;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--op-space-x-small) var(--op-space-small);
    color: var(--td-muted);
    font-size: var(--td-font-meta);

    &:empty {
      display: none;
    }
  }

  .task-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--op-space-2x-small);
    color: inherit;
    text-decoration: none;
    white-space: nowrap;

    .icon {
      --__op-icon-font-size: var(--op-font-small);

      color: inherit;
    }

    &.task-card__meta-item--overdue {
      color: var(--td-overdue);
    }

    &.task-card__meta-item--today {
      color: var(--td-text);
    }
  }

  a.task-card__meta-item:hover {
    color: var(--td-text);
  }

  .task-card__tag {
    padding: 0 var(--op-space-x-small);
    line-height: var(--op-line-height-base);
  }
}

@keyframes td-check-in {
  from {
    transform: scale(0.6);
  }

  to {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .task-card .task-card__strike,
  .task-card.task-card--completing .task-card__check {
    transition: none;
    animation: none;
  }
}

/* region sidebar */

.workspace__body {
  position: relative;
  display: flex;
  flex: 1;
  min-block-size: 0;

  .board {
    flex: 1 1 auto;
    min-inline-size: 0;
  }
}

.sidebar {
  display: flex;
  flex: none;
  flex-direction: column;
  inline-size: calc(66 * var(--op-size-unit));
  overflow-y: auto;
  background-color: var(--td-chrome);
  box-shadow: var(--op-border-right) var(--td-line-strong), inset 0 var(--op-border-width) 0 var(--td-line-strong);

  .sidebar__heading {
    margin: 0;
    padding: var(--op-space-medium) var(--op-space-medium) var(--op-space-x-small);
    color: var(--td-text);
  }

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

  .sidebar__views {
    padding-block-start: var(--op-space-small);

    .icon {
      align-self: center;
      color: var(--td-muted);
    }
  }

  .sidebar__project {
    display: flex;
    align-items: baseline;
    gap: var(--op-space-small);
    inline-size: 100%;
    padding: var(--op-space-2x-small) var(--op-space-medium);
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    text-align: start;

    &:hover {
      background-color: var(--td-chrome-hover);
    }

    &:focus-visible {
      outline: none;
      box-shadow: inset 0 0 0 var(--op-border-width) var(--td-accent);
    }

    &.sidebar__project--active {
      background-color: var(--td-line);

      .sidebar__name {
        color: var(--td-text);
      }
    }

    &.sidebar__project--drop-target {
      box-shadow: inset 0 0 0 var(--op-border-width) var(--td-accent);
    }
  }

  .sidebar__name {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    color: var(--td-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar__project--loose .sidebar__name {
    font-style: italic;
  }

  .sidebar__count {
    color: var(--td-muted);
    font-size: var(--td-font-meta);
    font-variant-numeric: tabular-nums;
  }

  .sidebar__add {
    padding: var(--op-space-x-small) var(--op-space-small);

    .board-column__add-form {
      display: flex;
    }

    .board-column__add-input {
      flex: 1;
      min-inline-size: 0;
      padding: var(--op-space-2x-small) var(--op-space-x-small);
      border: 0;
      background-color: var(--td-surface);
      box-shadow: inset 0 0 0 var(--op-border-width) var(--td-line-strong);
      color: var(--td-text);
      font: inherit;

      &:focus {
        outline: none;
        box-shadow: inset 0 0 0 var(--op-border-width) var(--td-accent);
      }
    }
  }

  .sidebar__new {
    color: var(--td-muted);
  }
}

/* region task-page */

.task-page {
  display: flex;
  flex: 0 1 50%;
  min-inline-size: calc(80 * var(--op-size-unit));
  padding: var(--op-space-medium) var(--op-space-large) var(--op-space-medium) 0;

  .task-page__card {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-inline-size: 0;
    max-inline-size: calc(160 * var(--op-size-unit));
    margin: 0 0 0 auto;
    border-radius: var(--op-radius-small);
    background-color: var(--td-panel);
    box-shadow: var(--op-border-all) var(--td-panel-line);
    overflow: hidden;
  }

  .task-page__header {
    display: flex;
    align-items: center;
    gap: var(--op-space-x-small);
    padding: var(--op-space-x-small) var(--op-space-x-small) var(--op-space-x-small) var(--op-space-medium);
    background-color: var(--td-panel-head);
    box-shadow: var(--op-border-bottom) var(--td-panel-line);
  }

  .task-page__crumb {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    color: var(--td-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .task-page__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--op-space-medium);
    min-block-size: 0;
    padding: var(--op-space-large);
    overflow-y: auto;
  }

  .task-page__title,
  .task-page__notes {
    padding: 0;
    border: 0;
    background: none;
    color: var(--td-text);
    resize: none;

    &:focus {
      outline: none;
    }

    &::placeholder {
      color: var(--td-faint);
    }
  }

  .task-page__title {
    font-family: var(--td-font-display);
    font-size: var(--op-font-2x-large);
    font-weight: var(--op-font-weight-medium);
    letter-spacing: -0.02em;
    line-height: var(--op-line-height-dense);
  }

  .task-page__props {
    display: flex;
    flex-wrap: wrap;
    gap: var(--op-space-2x-small);
  }

  .task-page__source {
    display: flex;
    align-items: center;
    gap: var(--op-space-2x-small);
    margin: 0;
    color: var(--td-muted);
    font-size: var(--td-font-meta);

    a {
      color: inherit;
    }
  }

  .task-page__subtasks {
    display: flex;
    flex-direction: column;
  }

  .task-page__subtasks-heading {
    display: flex;
    gap: var(--op-space-x-small);
    margin: 0 0 var(--op-space-2x-small);
    color: var(--td-muted);
  }

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

  .subtask,
  .subtasks__add {
    display: flex;
    align-items: center;
    gap: var(--op-space-small);
    min-block-size: calc(4.5 * var(--op-size-unit));
  }

  .subtask__check,
  .subtasks__add .icon {
    flex: none;
    inline-size: var(--op-font-medium);
    block-size: var(--op-font-medium);
    margin: 0;
  }

  .subtask__check {
    accent-color: var(--td-secondary);
    cursor: pointer;
  }

  .subtasks__add .icon {
    --__op-icon-font-size: var(--op-font-medium);

    color: var(--td-faint);
  }

  .subtask__title,
  .subtasks__input {
    flex: 1;
    min-inline-size: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--td-text);
    font: inherit;
    font-size: var(--td-font-body);

    &:focus {
      outline: none;
    }

    &::placeholder {
      color: var(--td-faint);
    }
  }

  .subtask--done .subtask__title {
    color: var(--td-muted);
    text-decoration: line-through;
    text-decoration-color: var(--td-faint);
  }

  .subtask__remove {
    opacity: var(--op-opacity-none);
  }

  .subtask:hover .subtask__remove,
  .subtask:focus-within .subtask__remove {
    opacity: var(--op-opacity-full);
  }

  .task-page__notes {
    flex: 1;
    min-block-size: calc(40 * var(--op-size-unit));
    padding-block-start: var(--op-space-medium);
    box-shadow: 0 calc(-1 * var(--op-border-width)) 0 var(--td-panel-line);
    font-family: inherit;
    font-size: var(--td-font-body);
    line-height: var(--op-line-height-loose);
  }

  .task-page__links {
    display: flex;
    flex-direction: column;
    gap: var(--op-space-3x-small);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .task-page__link {
    display: flex;
    align-items: baseline;
    gap: var(--op-space-x-small);
    padding: var(--op-space-3x-small) 0;
    color: var(--td-text);
    font-size: var(--td-font-meta);
    text-decoration: none;

    .icon {
      --__op-icon-font-size: var(--op-font-small);

      align-self: center;
    }

    &:hover .task-page__link-label {
      color: var(--td-accent-fill);
      text-decoration: underline;
    }

    &:focus-visible {
      outline: none;
      box-shadow: 0 0 0 var(--op-border-width) var(--td-accent);
    }
  }

  .task-page__link-label {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .task-page__link-host {
    flex: none;
    color: var(--td-muted);
    font-family: var(--td-font-mono);
    font-size: var(--op-font-2x-small);
  }
}

.task-card.task-card--open {
  background-color: var(--td-panel-hover);
  box-shadow: inset var(--op-border-width-large) 0 0 var(--td-accent), inset 0 calc(-1 * var(--op-border-width)) 0 var(--td-panel-line);
}

/* region category-tabs */

.category-tabs {
  display: none;
  gap: var(--op-space-medium);
  padding-inline: var(--op-space-medium);
  overflow-x: auto;
  background-color: var(--td-chrome);
  box-shadow: var(--op-border-bottom) var(--td-chrome-line);
  scrollbar-width: none;

  .category-tabs__tab {
    flex: none;
    padding: var(--op-space-x-small) 0;
    border: 0;
    background: none;
    color: var(--td-muted);
    cursor: pointer;
    font: inherit;
    font-weight: var(--op-font-weight-medium);

    &.category-tabs__tab--active {
      box-shadow: inset 0 calc(-1 * var(--op-border-width-large)) 0 var(--td-text);
      color: var(--td-text);
    }
  }

  .category-tabs__count {
    margin-inline-start: var(--op-space-2x-small);
    color: var(--td-muted);
  }
}

/* region editor */

.modal-wrapper .modal-wrapper__backdrop {
  --_op-modal-backdrop-active-opacity: var(--op-opacity-overlay);
}

.editor {
  --_op-modal-width: calc(150 * var(--op-size-unit));

  display: flex;
  flex-direction: column;
  max-inline-size: calc(100vw - 2 * var(--op-space-medium));
  border-radius: var(--op-radius-x-large);
  background-color: var(--td-surface);
  box-shadow: var(--op-border-all) var(--td-line), var(--op-shadow-x-large);
  font-size: var(--td-font-body);

  .editor__footer {
    display: flex;
    align-items: center;
    gap: var(--op-space-2x-small);
    padding: var(--op-space-small) var(--op-space-medium) var(--op-space-small) var(--op-space-large);
    box-shadow: var(--op-border-top) var(--td-line);
  }

  .editor__source {
    margin: 0 auto 0 0;
    color: var(--td-muted);
    font-size: var(--td-font-meta);

    a {
      color: inherit;
    }
  }
}

.prop {
  display: inline-flex;
  align-items: center;
  gap: var(--op-space-2x-small);
  padding: var(--op-space-3x-small) var(--op-space-x-small);
  border-radius: var(--op-radius-medium);
  box-shadow: inset 0 0 0 var(--op-border-width) var(--td-line-strong);
  color: var(--td-text);
  cursor: pointer;

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

  &:focus-within {
    box-shadow: inset 0 0 0 var(--op-border-width) var(--td-accent);
  }

  &.prop--grow {
    flex: 1;
    min-inline-size: calc(30 * var(--op-size-unit));
  }

  .icon {
    --__op-icon-font-size: var(--op-font-small);
  }

  .prop__control {
    min-inline-size: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: var(--td-font-meta);
    font-weight: var(--op-font-weight-medium);
    appearance: none;

    &:focus {
      outline: none;
    }

    &::placeholder {
      color: var(--td-muted);
    }

    &::-webkit-calendar-picker-indicator {
      display: none;
    }
  }

  &.prop--grow .prop__control {
    flex: 1;
    cursor: text;
  }
}

/* region dialog */

.dialog {
  --_op-modal-width: calc(120 * var(--op-size-unit));

  .dialog__body {
    display: flex;
    flex-direction: column;
    gap: var(--op-space-medium);
    padding: var(--op-space-large);
  }

  .dialog__title {
    margin: 0;
    color: var(--td-text);
    font-family: var(--td-font-display);
    font-size: var(--op-font-x-large);
    font-weight: var(--op-font-weight-medium);
    letter-spacing: -0.015em;
  }

  .dialog__lede {
    margin: 0;
    color: var(--td-muted);
    line-height: var(--op-line-height-base);

    a {
      color: var(--td-accent-fill);
    }

    code {
      font-family: var(--td-font-mono);
      font-size: 0.92em;
    }
  }

  .dialog__choices {
    display: flex;
    flex-direction: column;
    gap: var(--op-space-x-small);
    margin: 0;
    padding: 0;
    border: 0;

    legend {
      margin-block-end: var(--op-space-x-small);
      color: var(--td-muted);
    }
  }

  .dialog__error {
    margin: 0;
    color: var(--td-overdue);
    font-size: var(--td-font-meta);
  }
}

.choice {
  display: flex;
  align-items: center;
  gap: var(--op-space-x-small);
  cursor: pointer;

  input {
    accent-color: var(--td-accent-fill);
  }

  .choice__select {
    padding: var(--op-space-3x-small) var(--op-space-x-small);
    border: 0;
    border-radius: var(--op-radius-medium);
    background-color: var(--td-surface);
    box-shadow: inset 0 0 0 var(--op-border-width) var(--td-line-strong);
    color: var(--td-text);
    font: inherit;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-2x-small);

  .label {
    color: var(--td-muted);
  }

  .field__input {
    padding: var(--op-space-x-small) var(--op-space-small);
    border: 0;
    border-radius: var(--op-radius-medium);
    background-color: var(--td-surface);
    box-shadow: inset 0 0 0 var(--op-border-width) var(--td-line-strong);
    color: var(--td-text);
    font-family: var(--td-font-mono);
    font-size: var(--td-font-meta);

    &:focus {
      outline: none;
      box-shadow: inset 0 0 0 var(--op-border-width) var(--td-accent);
    }
  }
}

.quiet-button.quiet-button--danger-fill {
  background-color: var(--op-color-alerts-danger-minus-three);
  color: var(--op-color-alerts-danger-on-minus-three);

  &:hover {
    background-color: var(--op-color-alerts-danger-minus-four);
    color: var(--op-color-alerts-danger-on-minus-four);
  }
}

.tag-menu__list .tag-menu__option.tag-menu__option--danger {
  color: var(--td-overdue);

  .icon {
    color: inherit;
  }
}

.column-menu .icon {
  --__op-icon-font-size: var(--op-font-small);
}

/* region toast */

.toast {
  position: fixed;
  inset-block-end: max(var(--op-space-large), env(safe-area-inset-bottom));
  inset-inline-end: var(--op-space-large);
  z-index: var(--op-z-index-alert-group);
  display: flex;
  align-items: center;
  gap: var(--op-space-medium);
  padding: var(--op-space-x-small) var(--op-space-small);
  border-radius: var(--op-radius-large);
  background-color: var(--td-surface);
  box-shadow: var(--op-border-all) var(--td-line), var(--op-shadow-medium);
  font-size: var(--td-font-meta);

  &[hidden] {
    display: none;
  }

  .toast__action {
    padding: 0;
    border: 0;
    background: none;
    color: var(--td-muted);
    cursor: pointer;
    font: inherit;
    font-weight: var(--op-font-weight-semi-bold);

    &:hover {
      color: var(--td-text);
    }
  }
}

/* region fab */

.fab {
  display: none;
  position: fixed;
  inset-block-end: max(var(--op-space-large), env(safe-area-inset-bottom));
  inset-inline-end: var(--op-space-large);
  z-index: var(--op-z-index-footer);
  place-items: center;
  inline-size: 5.6rem;
  block-size: 5.6rem;
  padding: 0;
  border: 0;
  border-radius: var(--op-radius-small);
  background-color: var(--td-accent-fill);
  box-shadow: var(--op-shadow-medium);
  color: var(--td-on-accent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  &:active {
    background-color: var(--td-accent-fill-hover);
  }

  &:focus-visible {
    outline: var(--op-border-width-large) solid var(--td-accent);
    outline-offset: var(--op-border-width-large);
  }

  .icon {
    --__op-icon-font-size: var(--op-font-x-large);

    color: inherit;
  }
}

/* region phone */

@media (width < 768px) {
  :root {
    --op-radius-small: 3px;
    --op-radius-medium: 4px;
    --op-radius-large: 6px;
    --op-radius-x-large: 8px;
    --op-radius-2x-large: 10px;
    --op-radius-pill: 9999px;
    --op-radius-circle: 50%;
  }

  .workspace {
    overflow: clip;
    border-radius: var(--op-radius-large);
  }

  .board-column {
    overflow: clip;
    border-radius: var(--op-radius-medium);
  }

  .task-card__tag,
  .tag-chip {
    border-radius: var(--op-radius-small);
  }

  .task-card .task-card__check {
    border-radius: var(--op-radius-small);
  }

  html {
    overflow: auto;
    scrollbar-width: none;

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

  .app {
    block-size: auto;
    min-block-size: 100dvh;
  }

  .workspace {
    margin: var(--op-space-small);
  }

  .masthead {
    margin: max(var(--op-space-small), env(safe-area-inset-top)) var(--op-space-small) 0;
    overflow: clip;
    border-radius: var(--op-radius-large);

    .masthead__lede {
      padding-inline: var(--op-space-small);
    }
  }

  .workspace .panel-bar {
    flex-wrap: wrap;
    gap: var(--op-space-small);
    padding-inline: var(--op-space-medium);
  }

  .category-tabs {
    display: flex;
  }

  .board {
    padding: var(--op-space-small) var(--op-space-medium);
    overflow-x: visible;
  }

  .board-column {
    flex-basis: 100%;
    max-block-size: none;
  }

  .sidebar {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 1;
    inline-size: min(calc(64 * var(--op-size-unit)), 80%);
    box-shadow:
      var(--op-border-right) var(--td-line-strong),
      inset 0 var(--op-border-width) 0 var(--td-line-strong),
      var(--op-shadow-medium);
  }

  .task-page {
    position: fixed;
    inset: 0;
    z-index: 3;
    padding: max(var(--op-space-small), env(safe-area-inset-top)) var(--op-space-small)
      max(var(--op-space-small), env(safe-area-inset-bottom));
    background-color: color-mix(in srgb, var(--td-page) 70%, transparent);
  }

  .toast {
    inset-inline: var(--op-space-medium);
    inset-block-end: calc(max(var(--op-space-large), env(safe-area-inset-bottom)) + 5.6rem + var(--op-space-small));
  }

  .fab {
    display: grid;
    border-radius: var(--op-radius-large);
  }

  .app:has(.modal-wrapper--active, .task-page:not([hidden])) .fab {
    display: none;
  }

  .board {
    padding-block-end: calc(5.6rem + 2 * var(--op-space-large));
  }

  .board-column .board-column__footer {
    display: none;
  }
}