/* --- Next up from the pinned To Do list (assets/todo-pin.js) --- */
  .todopin[hidden] { display: none; }
  .todopin h2 { margin-bottom: 10px; }
  .tp-card {
    display: flex; flex-direction: column; gap: 8px;
    color: var(--ink); text-decoration: none;
    border: 1.5px solid color-mix(in srgb, var(--accent) 70%, transparent);
    border-radius: 14px; padding: 12px 14px;
    background: rgba(9, 20, 37, 0.24);
  }
  @media (prefers-color-scheme: dark) {
    .tp-card { background: rgba(0, 0, 0, 0.22); }
  }
  .tp-card:hover { border-color: var(--accent); }
  .tp-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .tp-list {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    font: 700 0.62rem/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent);
  }
  .tp-list-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tp-go { flex-shrink: 0; color: var(--ink-dim); letter-spacing: 0.06em; }
  .tp-t { font: 600 1.1rem/1.3 var(--sans); overflow-wrap: anywhere; }
  .tp-empty { font: 500 0.92rem/1.4 var(--sans); color: var(--ink-soft); }
  .tp-pills { display: flex; flex-wrap: wrap; gap: 6px; }
  .tp-pill {
    font: 600 0.68rem/1 var(--mono); padding: 5px 8px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.08); border: 1px solid var(--panel-brd);
    color: var(--ink-soft); white-space: nowrap;
  }
  .tp-pill.warn { color: #10202e; background: var(--accent); border-color: var(--accent); }
  .tp-pill.late { color: #2a0f0a; background: var(--danger); border-color: var(--danger); }
  /* overdue count beside "open": coral, the warning colour */
  .tp-late {
    flex-shrink: 0; margin-left: auto; padding: 3px 8px; border-radius: 999px; letter-spacing: 0.04em;
    color: #2a0f0a; background: var(--danger); font-weight: 700;
  }
  .tp-list-name { margin-right: auto; }