/* The kanban, at compact density — the override sheet, nothing else. alt-team-kanban.css draws
   the board at comfy; every selector here is scoped to `.a-tb-compact` (altTBApplyDensity()'s
   class on the board's scroll container) or `.a-compact` (the Suite-wide switch). An unscoped
   rule here would repaint the comfortable board from the wrong file. Loads after the comfy
   sheet, so it wins ties on source order alone.

   `.a-tb-compact` is the only spelling used below, deliberately: altTBApplyDensity() reads
   `shared.density` once and paints `body.a-compact`, `body[data-team-density]` AND this class
   from that one answer, so every element inside the board's scroll container is reachable
   through this one class without restating the other two. The exception is Owned/Completed/
   Archived, `.a-row` lists OUTSIDE the board, answered by alt-shell.css's `body.a-compact`.

   The card is a named CSS grid (title/desc/who/meta rows), not a single-line row: the design
   trades density for being able to show the assignee's full name and the full date without
   truncation. `display:contents` on `.a-tb-card-top`/`.a-tb-card-meta` lets their children be
   laid out by that grid directly, the same idiom comfy already uses for `.a-tb-card-meta`. Every
   visible element is placed on a NAMED line rather than auto-placed, so an editable vs read-only
   card, or a described vs undescribed one, still line up with their neighbours. */

/* `--a-tb-lane-w` stays at comfy's own 220px — this design spends card HEIGHT, not lane width,
   so there's no fixed-column budget to argue over; every row but the tick is one
   `minmax(0,1fr)` track. The `<=1023px` block below restates this same 220px on purpose, so a
   narrower viewport is never wider than the desktop one. */
.alt-app .a-tb-compact .a-tb-lane{
  --a-tb-lane-w:220px;
  /* 5px — still a third of comfy's 6px card gap, but enough that a multi-line card reads as a
     separate task from its neighbour. */
  --a-tb-card-gap:5px;
  --a-tb-c-chk:19px;
}

/* ---------- the card ---------- */
.alt-app .a-tb-compact .a-tb-card{
  display:grid;
  grid-template-columns:[chk] var(--a-tb-c-chk) [content] minmax(0,1fr);
  /* `desc` and `who` draw only when the task has one — an empty `auto` track sizes to zero, so a
     card with neither is two rows tall and one with both is four. */
  grid-template-rows:[title] auto [desc] auto [who] auto [meta] auto;
  align-items:start;
  column-gap:8px; row-gap:3px;
  padding:6px 8px;
}
.alt-app .a-tb-compact .a-tb-card-top,
.alt-app .a-tb-compact .a-tb-card-meta{ display:contents; }

/* A default for any future meta child, so a fact added later lands on the meta row rather than
   wherever the grid's auto-placement cursor happens to be. */
.alt-app .a-tb-compact .a-tb-card-meta > *{ grid-column:content; grid-row:meta; }

/* ---------- THE TICK ----------
   Its own reserved column, occupied or not, so a read-only card's content starts at the same x
   as an editable one's. `1 / -1` rather than a counted span, so it always reaches the card's
   real last row regardless of how many optional rows are drawn. `align-self:start`, not
   `center` — a card of one to four lines would float the tick away from the title otherwise. */
.alt-app .a-tb-compact .a-check{
  grid-column:chk; grid-row:1 / -1; justify-self:center; align-self:start; margin-top:2px;
}

/* ---------- THE TITLE ----------
   Two lines, clamped with `-webkit-box`/`-webkit-line-clamp` rather than `nowrap`, since a title
   may now wrap. `max-height` is a real fallback in `em` tied to this rule's own line-height, so a
   browser without line-clamp support cuts the second line visibly instead of hiding it
   unfinished. */
.alt-app .a-tb-compact .a-tb-card-t{
  grid-column:content; grid-row:title; min-width:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:11px; line-height:1.4; max-height:calc(1.4em * 2);
}

/* ---------- THE DESCRIPTION ----------
   Same rule as comfy, one line instead of two, placed on its own grid row. */
.alt-app .a-tb-compact .a-tb-card-desc{
  grid-column:content; grid-row:desc; -webkit-line-clamp:1; align-self:start;
}

/* ---------- THE ASSIGNEE ----------
   Placement only — `.a-tb-card-who`'s flex layout, `.a-av.sm`'s circle and `.nm`'s ellipsis are
   all comfy's own unscoped rules, kept as-is: at this card's ~180-200px of width the full name
   and avatar fit on one line with nothing to override. The ellipsis on `.nm` is a safety net for
   a name this board's fixtures have never produced, not a designed truncation point. */
.alt-app .a-tb-compact .a-tb-card-who{ grid-column:content; grid-row:who; }

/* ---------- THE META LINE: DATE, OKR FLAG, COMMENT COUNT, LANE CONTROL ----------
   One full-width flex row, date first and never shrinking (`flex:0 0 auto`, no flex-shrink) —
   the one fact on this line that must never lose a character. Everything after it shares
   `flex:0 1 auto`/`min-width:0`, so those three give up width first if the line ever overflows;
   `nowrap` clips rather than lets the card silently grow with a second line.

   `margin-right:0` on the date cancels comfy's inherited `.a-tb-due{margin-right:auto}`
   (written for a WRAPPING row, which this row never does) so the left-to-right order stays
   date → flag → count → control.

   `overflow:hidden` is a clipping ancestor for the lane control's own focus ring, which needs
   3px of room past the chip's right edge — `margin-right:-3px`/`padding-right:3px` grows the
   border box into the clip zone while leaving the content box, and every child's position,
   unmoved. */
.alt-app .a-tb-compact .a-tb-card-foot{
  grid-column:content; grid-row:meta; align-self:center;
  display:flex; align-items:center; flex-wrap:nowrap; gap:4px; min-width:0;
  overflow:hidden; margin-right:-3px; padding-right:3px;
}
/* ---------- THE DUE DATE ----------
   No fixed track, no ellipsis — the full day/month/year string draws every time, since this
   line has no shared cluster to fit a date into the way the single-line row design once did. */
.alt-app .a-tb-compact .a-tb-due{
  flex:0 0 auto; margin-right:0; white-space:nowrap; font-size:10px; line-height:1.35;
}
/* Pinned right, so it reads at the same x on every row regardless of what else is on the line. */
.alt-app .a-tb-compact .a-tb-card-foot > .a-tb-lane-btn{ margin-left:auto; }

/* The chips shrink (`flex:0 1 auto`/`min-width:0`) — this meta line has no fixed track sized to
   hold every chip whole, so the OKR flag, comment count and lane control give up width first on
   a rare long-name or triple-digit-count card. Height is untouched: `button.a-chip{min-height:
   24px}` (alt-responsive.css) is the pointer floor and costs nothing in a card this tall. */
.alt-app .a-tb-compact .a-tb-card-foot .a-chip{
  font-size:9px; padding:0 4px; gap:2px; flex:0 1 auto; min-width:0; overflow:hidden;
}
.alt-app .a-tb-compact .a-tb-card-foot .a-chip > svg{ width:11px; height:11px; }
/* The lane control is quiet until pointed at — only the dot shows at rest, the border returns on
   hover/focus/open, the same relationship comfy gives the lane name itself. */
.alt-app .a-tb-compact .a-tb-card .a-chip-st.mini{
  min-width:24px; padding:0 2px; gap:2px;
  background:transparent; border-color:transparent;
}
.alt-app .a-tb-compact .a-tb-card .a-chip-st.mini > svg{ width:10px; height:10px; }
.alt-app .a-tb-compact .a-tb-card button.a-chip-st.mini:hover,
.alt-app .a-tb-compact .a-tb-card button.a-chip-st.mini:focus-visible,
.alt-app .a-tb-compact .a-tb-card .a-chip-st.mini[aria-expanded="true"]{
  background:var(--a-float); border-color:var(--a-st-line);
}
.alt-app .a-tb-compact .a-tb-watch{ width:14px; height:14px; flex:0 0 auto; }
.alt-app .a-tb-compact .a-tb-watch > svg{ width:12px; height:12px; }

/* ---------- WHAT THIS DENSITY STILL DOES NOT DRAW ----------
   The tag row, the All-Boards board-name chip and the watch eye stay `display:none` — a
   variable-width tag row and a chip every row would pay for don't fit this grid's fixed rows,
   and the watch eye duplicates a control already on the task itself. All three still reach the
   card's own `aria-label` (altTBCard()), so nothing here is a fact the card cannot state. */
.alt-app .a-tb-compact .a-tb-card-foot > .a-tb-watch{ display:none; }
.alt-app .a-tb-compact .a-tb-card-tags{ display:none; }
.alt-app .a-tb-compact .a-tb-card-meta > .a-chip.quiet{ display:none; }

/* `.a-tb-cards`' own min-height (comfy sheet) is untouched, so an empty lane is still big enough
   to drop a card into. */
.alt-app .a-tb-compact .a-tb-add > .a-add-row{ padding:4px 8px; font-size:11px; }
.alt-app .a-tb-compact .a-tb-add > .a-add-row > svg{ width:12px; height:12px; }
.alt-app .a-tb-compact .a-tb-lane-more{ padding:4px 8px; font-size:10px; }
.alt-app .a-tb-compact .a-tb-lane-empty{ padding:7px 8px; font-size:10px; }

/* ---------- COMPACT IN A WIDENED LANE ----------
   This file does not touch `.a-tb-lane.wide .a-tb-cards` at all — the widened lane stays comfy's
   two-track grid in both densities, buying a second column of cards at the same width, never a
   wider one. No wrapper is added inside `.a-tb-cards` either: contract §10's
   dragleave-has-no-enter-counter rule needs the cards to stay direct children of it. */

/* ================= COMPACT AT EVERY WIDTH =================
   Compact declares `--a-tb-lane-w` at every breakpoint comfy does, and every value is a
   decision — a media query adds no specificity, so the unconditional rule above would otherwise
   win at every width and silently switch comfy's own breakpoints back on for this density. */
@media (max-width:1023px){
  .alt-app .a-tb-compact .a-tb-lane{ --a-tb-lane-w:220px; }
}
/* alt-responsive.css (loaded after this file) takes `.a-check` from 19px to 24px on a phone, so
   the control outgrows its column rather than the column growing with it. */
@media (max-width:639px){
  .alt-app .a-tb-compact .a-tb-lane{ --a-tb-c-chk:24px; }
}
@media (max-width:479px){
  .alt-app .a-tb-compact .a-tb-lane{ --a-tb-lane-w:calc(100% - 8px); min-width:220px; }
  /* A folded lane is a 38px strip at every width — ties comfy's own phone rule on specificity
     and beats it on source order. */
  .alt-app .a-tb-compact .a-tb-lane.collapsed{ width:38px; min-width:38px; }
}