body.yooplr {
  .quick-add {
    flex-shrink: 0;

    input[type="text"] {
      padding: 0.2em 0.5em;
      border: 1px solid var(--secondary);
      border-radius: 0.3em;
      background: var(--bg-light);
      font: inherit;
      font-size: 0.85em;
      width: 5em;
      transition: width 0.2s ease;

      &:focus {
        outline: none;
        border-color: var(--primary);
        width: 14em;
      }

      @media (min-width: 640px) {
        width: 14em;

        &:focus {
          width: 20em;
        }
      }
    }
  }

  .toolbar {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
  }

  .cards {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    align-content: start;
  }

  .card {
    position: relative;
    border: 1px solid var(--secondary);
    border-radius: 0.35em;
    padding: 0.5em 0.7em;
    background: var(--bg-light);
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    font-size: 0.9em;

    &.done {
      opacity: 0.6;

      .text {
        text-decoration: line-through;
      }
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.75em;

      .domain {
        color: var(--secondary);
        letter-spacing: 0.03em;
      }

      .header-right {
        display: flex;
        gap: 0.5em;
        align-items: center;
        margin-left: auto;

        .my-day-toggle {
          all: unset;
          cursor: pointer;
          color: var(--secondary);
          line-height: 1;

          &.my-day-toggle--on {
            color: #f9a825;
          }
        }

        .inbox {
          color: var(--secondary);
          font-style: italic;
        }

        .context {
          color: var(--secondary);
        }

        .badge {
          padding: 0.15em 0.5em;
          border-radius: 0.3em;
          background: var(--primary);
          color: var(--font-color-light);

          &.badge--past { background: #c62828; }
          &.badge--today { background: #2e7d32; }
          &.badge--tomorrow { background: #ef6c00; }
          &.badge--future { background: var(--accent); }
        }
      }
    }

    .text {
      font-size: 1em;
      line-height: 1.4;
      word-break: break-word;
      display: flex;
      align-items: baseline;
      gap: 0.5em;
      cursor: pointer;

      .item-text {
        flex: 1;
      }

      .done-toggle {
        display: inline;
        padding: 0;
        margin: 0;
        border: none;
        background: none;
        line-height: 1;
        cursor: pointer;
        text-decoration: none;

        input[type="checkbox"] {
          pointer-events: none;
          cursor: pointer;
        }
      }
    }

    .actions {
      display: none;
      gap: 0.5em;
      position: absolute;
      right: 1em;
      bottom: 1em;

      button, input[type="submit"], a {
        font-size: 0.8em;
        padding: 0.25em 0.6em;
        background: var(--bg-light);
        text-decoration: none;
      }
    }

    &:hover .actions {
      display: flex;
    }
  }

  .dashboard {
    display: flex;
    overflow-x: auto;
    gap: 1.5rem;
    scroll-snap-type: x mandatory;
    height: calc(100vh - 10rem);
  }

  .dashboard-section {
    width: calc(33.333% - 1rem);
    flex-shrink: 0;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease;

    h2 {
      font-size: 1.1em;
      margin: 0 0 0.75rem;
      padding-bottom: 0.25rem;
      border-bottom: 1px solid var(--secondary);

      .count {
        font-weight: normal;
        font-size: 0.85em;
        opacity: 0.6;
      }
    }

    .fold-toggle {
      all: unset;
      cursor: pointer;
      display: block;

      h2 {
        transition: color 0.15s ease;
      }

      &:hover h2 {
        color: var(--primary);
      }
    }

    .dashboard-section-content {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
    }

    .cards {
      overflow-y: auto;
      flex: 1;
    }

    .empty {
      color: var(--secondary);
      font-size: 0.9em;
      padding: 1em 0;
    }

    .see-all {
      font-size: 0.85em;
      padding: 0.5em 0;
      text-align: center;
    }

    &.dashboard-section--overdue h2 {
      color: #c62828;
    }

    &.dashboard-section--today h2 {
      color: #2e7d32;
    }

    &.folded {
      width: 2.5rem;
      scroll-snap-align: start;

      .fold-toggle {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid var(--secondary);
        min-height: 0;
      }

      h2 {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        margin: 0;
        padding: 0.5rem 0;
        border: none;
        font-size: 0.95em;
      }

      .dashboard-section-content {
        display: none;
      }
    }
  }

  @media (max-width: 640px) {
    .dashboard-section:not(.folded) {
      min-width: 100%;
    }
  }

  .item-tree {
    list-style: none;
    padding-left: 0;

    ul {
      list-style: none;
      padding-left: 1.25rem;
      margin: 0.25rem 0 0;
      border-left: 1px dashed var(--secondary);
    }

    .tree-node {
      padding: 0.2em 0;

      &.tree-node--current > .card {
        border-color: var(--primary);
        box-shadow: 0 0 0 1px var(--primary);
      }
    }
  }

  .breadcrumb {
    margin: 0 0 0.75rem;
    font-size: 0.9em;
    color: var(--secondary);

    a {
      color: var(--primary);
    }

    .breadcrumb-sep {
      margin: 0 0.4em;
    }

    .breadcrumb-current {
      font-weight: 500;
      color: inherit;
    }
  }

  .domain-sub-links {
    list-style: none;
    padding-left: 0;
    margin: 0 0 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;

    li a {
      display: inline-block;
      padding: 0.2em 0.6em;
      background: var(--bg-light);
      border: 1px solid var(--secondary);
      border-radius: 0.3em;
    }
  }

  .domain-tree {
    list-style: none;
    padding-left: 0;

    ul {
      list-style: none;
      padding-left: 1.25rem;
      margin: 0.25rem 0 0;
      border-left: 1px dashed var(--secondary);
    }

    .domain-node {
      padding: 0.25em 0;
    }

    .domain-node-row {
      display: flex;
      align-items: center;
      gap: 0.5em;
    }

    .domain-node-name {
      font-weight: 500;
    }

    .domain-node-meta {
      display: flex;
      align-items: center;
      gap: 0.5em;
      color: var(--secondary);
      font-size: 0.85em;
    }

    .domain-node-count {
      background: var(--bg-light);
      border: 1px solid var(--secondary);
      border-radius: 0.3em;
      padding: 0 0.4em;
    }

    .domain-node-delete, .domain-node-delete input[type="submit"] {
      all: unset;
      cursor: pointer;
      color: var(--secondary);

      &:hover { color: #c62828; }
    }
  }

  .stack-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 1rem;
    pointer-events: none;
  }

  .stack-group {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    min-width: 0;
  }

  .stack {
    pointer-events: auto;
    position: relative;
    display: inline-flex;
    flex-direction: column;

    .stack-pile {
      all: unset;
      cursor: pointer;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      gap: 0.5em;
      padding: 0.6em 0.8em;
      border: 1px solid var(--secondary);
      border-bottom: none;
      border-radius: 0.4em 0.4em 0 0;
      background: var(--bg-light);
      white-space: nowrap;
      /* faux cards peeking out behind the pile */
      box-shadow:
        0 -3px 0 -1px var(--bg-light),
        0 -3px 0 0 var(--secondary),
        0 -6px 0 -1px var(--bg-light),
        0 -6px 0 0 var(--secondary);

      .stack-title {
        font-weight: 600;
      }

      .stack-count {
        font-size: 0.85em;
        color: var(--font-color-light);
        background: var(--primary);
        border-radius: 1em;
        padding: 0.05em 0.55em;
      }

      &:hover .stack-title {
        color: var(--primary);
      }
    }

    /* the expanded panel floats above the pile so collapsed piles stay compact */
    .stack-cards {
      position: absolute;
      bottom: 100%;
      left: 0;
      width: min(20rem, calc(100vw - 2rem));
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.25s ease;
      border: 1px solid var(--secondary);
      border-radius: 0.4em 0.4em 0 0;
      background: var(--bg-light);
      display: flex;
      flex-direction: column;

      .stack-add {
        padding: 0.5em;
        border-bottom: 1px solid var(--secondary);

        input[type="text"] {
          width: 100%;
          box-sizing: border-box;
          padding: 0.3em 0.5em;
          border: 1px solid var(--secondary);
          border-radius: 0.3em;
          background: var(--bg);
          font: inherit;
          font-size: 0.9em;

          &:focus {
            outline: none;
            border-color: var(--primary);
          }
        }
      }

      .cards {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 0.5em;
        margin: 0;
      }

      .empty {
        color: var(--secondary);
        font-size: 0.9em;
        padding: 0.8em;
        margin: 0;
      }

      .see-all {
        font-size: 0.85em;
        text-align: center;
        padding: 0.5em;
        margin: 0;
        border-top: 1px solid var(--secondary);
      }
    }

    &.stack--open .stack-cards {
      max-height: 50vh;
      box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.18);
    }
  }

  /* right-docked stacks: anchor their panel to the right edge */
  .stack-group--right .stack .stack-cards {
    left: auto;
    right: 0;
  }

  .dashboard {
    padding-bottom: 4rem;
  }

  @media (max-width: 640px) {
    .stack-dock {
      padding: 0 0.5rem;
    }

    .stack-group {
      gap: 0.5rem;
    }

    .stack .stack-pile {
      padding: 0.5em 0.6em;
      font-size: 0.9em;
    }

    /* full-width panels on small screens, regardless of dock side */
    .stack .stack-cards,
    .stack-group--right .stack .stack-cards {
      position: fixed;
      left: 0.5rem;
      right: 0.5rem;
      bottom: 2.75rem;
      width: auto;
    }
  }
}