/* ── Tasks board ──────────────────────────────────────────────────────────────
   Loads after theme.css, which owns .board / .bcol / .bcard and everything the
   board already had. This file carries what the board grew: hand ordering, a
   keyboard, honest empty states — and the one toolbar control that shipped with
   no rule at all. Palette and spacing come from theme.css tokens; nothing here
   introduces a colour. */

/* The assignee filter was the only toolbar control with no stylesheet rule, so it fell
   through to the blanket `input,textarea,select{width:100%}` — 445px wide and 41px tall
   inside a nowrap toolbar. That pushed "＋ New task", the primary action of the page, out
   to x=1421 on a 1280px screen: entirely off-canvas, behind a scroller with its scrollbar
   hidden. Same rule as its two neighbours, and the toolbar fits again. */
.task-who{
  width:auto;background:var(--bg-base);border:1px solid var(--border);color:var(--text);
  border-radius:var(--radius-sm);padding:5px 8px;font-size:12px;
}

/* The filters scroll; the primary action does not. theme.css puts overflow-x:auto on
   .app-actions so the whole strip slides — including "＋ New task", which is the one control
   that must never slide off. The scroll moves one level in. */
.task-actions{overflow:visible}
/* .btn sets display:inline-flex, which outranks the UA's [hidden] rule — the view hides the
   pinned "New task" on phones (the FAB is the one there) and needs it to actually go. */
.task-actions>.btn[hidden]{display:none!important}
.task-actions>.task-filters{
  display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 0;
}
.task-filters::-webkit-scrollbar{height:0}
.task-filters>*{flex:0 0 auto}
/* A scroller with no scrollbar reads as a full row that simply ends. The fade is the only
   thing telling you a control is parked just out of sight — and it sits on the side the
   controls are actually on. */
.task-filters[data-more="right"]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
.task-filters[data-more="left"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 26px);mask-image:linear-gradient(90deg,transparent,#000 26px)}
.task-filters[data-more="both"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent)}

/* A due date on a card: the drawn calendar, then the words. */
.bcard .t-due{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--text-dim);white-space:nowrap}
.bcard .t-due.soon{color:var(--warning);font-weight:600}
.bcard .t-due.over{color:var(--urgent);font-weight:700}
/* Priority sits at the far end of the line, apart from the due date it would otherwise run into. */
@media (hover:hover) and (pointer:fine){.bcard .t-pri{margin-left:auto}}
.bcard{box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 1px 2px rgba(0,0,0,.25);transition:border-color var(--dur-fast),background var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast)}
.bcard:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 6px 16px rgba(0,0,0,.35)}

/* Filtered count: "12/37" says the other 25 are hidden, not gone. */
.bcol-head .count .c-of{color:var(--text-faint);font-weight:600;opacity:.75}

/* ── Drop slots ──
   Dropping used to mean "somewhere in this column". The line marks the exact gap the card
   lands in — 2px of accent between the two cards it will sit between. */
.bcol-body .bcard.drop-before::after,
.bcol-body.drop-end::after{
  content:'';display:block;position:absolute;height:2px;border-radius:2px;background:var(--accent);
}
.bcol-body .bcard.drop-before::after{left:0;right:0;top:-6px}
.bcol-body.drop-end{position:relative}
/* As the last child of a column flexbox this line is a flex item, and a full column shrinks
   its items — measured 0px tall before the explicit basis. */
.bcol-body.drop-end::after{position:static;flex:0 0 2px;margin:-2px 2px 0}
/* The column already lifts its border on .drop; the body gets the tint so the target reads
   from the middle of a five-screen column, not only from its edges. */
.bcol.drop .bcol-body{background:var(--accent-glow)}
.bcard.dragging{cursor:grabbing}

/* ── Keyboard cursor ──
   theme.css has painted .bcard:focus-visible since before anything on the board could take
   focus; the ring finally has something to sit on. It is drawn 2px outside the card, and
   .bcol-body clips at its padding box, so the card needs a little room reserved when the
   arrow keys scroll it into view. The warmed border carries the cursor down a dense column
   where a 2px ring alone is easy to lose. */
.bcol-body{scroll-padding:8px 0}
.bcard{scroll-margin:8px 0}
.bcard:focus-visible{border-color:var(--accent-dark)}

/* A jump from the command palette lands on a card somewhere down a long column. The flash is
   how you find it once the scroll stops. Written as an outline, not a box-shadow: --shadow-*
   is self-referential in theme.css and resolves to nothing (see integration notes). */
@keyframes task-flash{
  0%,55%{outline:2px solid var(--accent);outline-offset:2px;background:var(--accent-glow)}
  100%{outline:2px solid transparent;outline-offset:2px;background:var(--bg-surface)}
}
.bcard.task-flash{animation:task-flash 1.6s var(--ease) 1}

/* Move announcements for a screen reader. Off-screen rather than display:none — a hidden
   live region is never read. */
.board-live{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ── Empty board ──
   Not the same thing as an empty column: three columns each saying "No tasks" while sixty
   sat behind a search was the board lying about what it holds. */
.board.board-blank{display:flex;align-items:center;justify-content:center;overflow:hidden}
.board-note{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  max-width:340px;padding:24px 16px;text-align:center;
}
.board-note .empty{padding-bottom:14px}
.board-note .btn{flex:0 0 auto}

@media (hover:none){
  /* 12px would zoom iOS on tap. theme.css restates the 16px floor for each toolbar control by
     class because a media query adds no specificity — and this file, loading later, would beat
     that list at equal weight. The assignee filter joins it here. */
  .task-who{font-size:16px}
  /* The 44px floor. The touch board's own controls were under it: the per-card chevrons at
     40px and the column switcher at 36 — the two things a thumb hits most on this page. */
  .bc-nav{width:44px;height:44px}
  .bcard{padding-right:104px}
  .board-switch .seg button{min-height:44px}
}

/* A tap leaves :hover stuck on touch screens; a lifted card would stay lifted. */
@media (pointer:coarse){.bcard:hover{transform:none}}