/* Task board. It reads the shared panel tokens; late and due-today tags use
   the theme status colors. */
@layer tokens {
:root {
  --comp-tasks-dialog-shadow: 0 20px 70px #0008;
}
}

@layer legacy {
.tb-panel, .tb-dialog {
  color: var(--comp-panel-fg); background: var(--comp-panel-bg); font: 13px/1.5 var(--sys-font, system-ui); box-sizing: border-box;
}
.tb-panel *, .tb-dialog * { box-sizing: border-box; }
.tb-panel[hidden], .tb-panel [hidden] { display: none !important; }
.tb-panel { position: fixed; z-index: 945; inset: 78px 16px 16px auto; width: min(1080px, calc(100vw - 32px)); display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--comp-panel-line); border-radius: 20px; box-shadow: var(--comp-panel-shadow); }
.tb-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 10px; }
.tb-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .13em; color: var(--comp-panel-muted); }
.tb-heading h2 { margin: 2px 0 0; font-size: 22px; font-weight: 650; letter-spacing: -.03em; }
.tb-heading-actions, .tb-filters, .tb-card-meta, .tb-card-actions, .tb-dialog-actions, .tb-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.tb-filters { padding: 0 20px 12px; gap: 14px; border-bottom: 1px solid var(--comp-panel-line); }
.tb-button, .tb-icon { border: 1px solid var(--comp-panel-line); border-radius: 9px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.tb-button { padding: 6px 12px; font-size: 12px; }
.tb-button.is-primary { background: var(--comp-panel-accent); border-color: transparent; color: var(--comp-button-on-accent); }
.tb-button.is-danger { color: var(--sys-status-danger); border-color: color-mix(in srgb, var(--sys-status-danger) 40%, transparent); margin-right: auto; }
.tb-icon { width: 34px; height: 34px; font-size: 17px; background: var(--comp-panel-soft); }
.tb-icon.is-small { width: 26px; height: 24px; font-size: 13px; border-radius: 7px; }
.tb-button:hover, .tb-icon:hover { background: var(--comp-panel-hover); }
.tb-button.is-primary:hover { background: color-mix(in srgb, var(--comp-panel-accent) 85%, var(--comp-button-on-accent)); }
.tb-select, .tb-input { padding: 7px 9px; border: 1px solid var(--comp-panel-line); border-radius: 9px; background: var(--comp-panel-soft); color: inherit; font: inherit; }
.tb-select option, .tb-input option { background: var(--comp-panel-bg); color: var(--comp-panel-fg); }
.tb-check { display: inline-flex; align-items: center; gap: 6px; color: var(--comp-panel-muted); cursor: pointer; }
.tb-status { margin: 0; padding: 0 20px; font-size: 12px; color: var(--comp-panel-muted); }
.tb-status:not(:empty) { padding-top: 8px; }
.tb-status[data-error="true"] { color: var(--sys-status-danger); }
.tb-board { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 20px 20px; overflow: auto; }
.tb-column { display: flex; flex-direction: column; min-height: 0; border-radius: 14px; background: var(--comp-panel-soft); padding: 10px; border: 1px dashed transparent; }
.tb-column.is-target { border-color: var(--comp-panel-accent); }
.tb-column h3 { display: flex; justify-content: space-between; margin: 0 0 8px; padding: 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--comp-panel-muted); }
.tb-cards { display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.tb-card { padding: 10px 12px; border: 1px solid var(--comp-panel-line); border-radius: 12px; background: var(--comp-panel-bg); cursor: pointer; }
.tb-card:hover, .tb-card:focus-visible { border-color: color-mix(in srgb, var(--comp-panel-accent) 60%, transparent); outline: none; }
.tb-column[data-status="done"] .tb-card-title { text-decoration: line-through; color: var(--comp-panel-muted); }
.tb-card-title { margin: 0 0 6px; font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.tb-tag { padding: 0 7px; border-radius: 999px; border: 1px solid var(--comp-panel-line); font-size: 11px; color: var(--comp-panel-muted); }
.tb-tag.is-me { color: var(--comp-panel-fg); border-color: var(--comp-panel-accent); }
.tb-tag.is-late { color: var(--sys-status-danger); border-color: color-mix(in srgb, var(--sys-status-danger) 53.3%, transparent); }
.tb-tag.is-today { color: var(--sys-status-warning); border-color: color-mix(in srgb, var(--sys-status-warning) 53.3%, transparent); }
.tb-source { display: inline-block; margin-top: 6px; font-size: 11.5px; color: var(--comp-panel-fg); opacity: .85; overflow-wrap: anywhere; }
.tb-note { margin: 4px 0 0; font-size: 11px; color: var(--comp-panel-muted); }
.tb-card-actions { justify-content: flex-end; margin-top: 6px; }
.tb-empty { margin: 8px 4px; color: var(--comp-panel-muted); font-size: 12px; }
.tb-dialog { margin: auto; max-height: calc(100dvh - 24px); overflow: auto; width: min(560px, calc(100vw - 24px)); border: 1px solid var(--comp-panel-line); border-radius: 16px; padding: 20px; box-shadow: var(--comp-tasks-dialog-shadow); }
.tb-dialog::backdrop { background: var(--comp-dialog-backdrop); }
.tb-dialog h3 { margin: 0 0 12px; font-size: 18px; }
.tb-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; flex: 1 1 150px; color: var(--comp-panel-muted); font-size: 12px; }
.tb-field .tb-input { color: var(--comp-panel-fg); font-size: 13px; }
.tb-field textarea { resize: vertical; min-height: 80px; }
.tb-row { align-items: flex-start; gap: 10px; }
.tb-source-line { margin: 0 0 10px; font-size: 12px; color: var(--comp-panel-muted); }
.tb-dialog .tb-status { padding: 0 0 8px; }
.tb-dialog-actions { justify-content: flex-end; margin-top: 4px; }
@media (max-width: 760px) {
  .tb-panel { inset: 0; width: 100vw; border-radius: 0; border: 0; padding-top: env(safe-area-inset-top); }
  /* Stacked columns take the height of their cards and the board scrolls;
     squeezed into the panel height, long lists ran over the next column. */
  .tb-board { grid-template-columns: 1fr; align-content: start; overflow: auto; }
  .tb-column { min-height: auto; }
  .tb-cards { overflow: visible; }
}
}