/* CSS/alt/alt-minimal.css — Minimalist ("Developer Focus"), tasks.html's third presentation.
   Owns the left nav, the grid `order` reassigning the three .a-main tracks, folding the top
   nav, and compacting beyond `.a-compact`. Scope under body.a-minimal, never a bare shared
   class — notes.html and calendar.html style `.a-nav` too. */

/* ---------- the three tracks, reassigned by order alone ----------
   The DOM never moves — CSS grid auto-placement follows `order` for children with no explicit
   grid-column, so each pane keeps the width its TRACK gives it regardless of which node lands
   there. Visual order: nav → its grip → the list → the drawer's grip → the drawer. */
body.a-minimal #altMain > .a-right{ order:0; }
body.a-minimal #altMain > #altGripRight{ order:1; }
body.a-minimal #altMain > .a-centre{ order:2; }
body.a-minimal #altMain > #altGripLeft{ order:3; }
body.a-minimal #altMain > #altLeft{ order:4; }

/* THE BORDER SIDE AND GRIP SIDE (two of the four things a flipped pane owns, besides order and
   drag sign — JS/alt/alt-panels.js) don't apply here: both panes are already fully-bordered
   floating cards on every edge, not edge-attached panels, so there is no side to swap. */

/* ---------- THE NAV'S GRIP MUST STILL OCCUPY ITS GRID CELL WHILE DISABLED ----------
   alt-shell.css:576 hides every disabled grip with `display:none`, which drops it from grid
   auto-placement too — the list then lands in the grip's narrow track. Shown here instead as a
   static, non-interactive divider; two ids beat one class+attribute, so it wins with no
   `!important`. */
body.a-minimal #altMain > #altGripRight[aria-disabled="true"]{
  display:block; cursor:default; pointer-events:none;
}
body.a-minimal #altMain > #altGripRight[aria-disabled="true"]::after{ display:none; }

/* ---------- the nav itself ----------
   #altRail is the same element the utility widgets draw into elsewhere — alt-minimal.js adds
   this class only while it owns the content, and removes it via altMinimalTeardownNav(). */
.a-minimal-nav{ display:flex; }
.a-minimal-nav > nav{
  display:flex; flex-direction:column; gap:2px; width:100%;
  padding:2px; background:var(--a-panel); border:1px solid var(--a-line-soft);
  border-radius:var(--a-r-lg);
}
.a-minimal-nav-item{
  display:flex; align-items:center; gap:10px; height:38px; padding:0 11px;
  border-radius:var(--a-r-sm); border:1px solid transparent; border-left:3px solid transparent;
  background:none; color:var(--a-dim); font:inherit; font-size:13px; font-weight:600;
  text-decoration:none; cursor:pointer; width:100%; text-align:left;
}
.a-minimal-nav-item:hover{ color:var(--a-text); background:var(--a-raised); }
.a-minimal-nav-item:focus-visible{ outline:2px solid var(--a-ring); outline-offset:-2px; }
/* Current is blue and has a bar, the same two signals `.a-nav [aria-current="page"]` gives the
   top bar's own entries — colour is never the only signal (sys_design-system.md §18), and the
   left bar is this list's equivalent of that control's underline. */
.a-minimal-nav-item.on,
.a-minimal-nav-item[aria-current="page"]{
  color:var(--a-blue-text); background:var(--a-blue-soft); border-left-color:var(--a-blue);
  cursor:default;
}
.a-minimal-nav-ico{ display:inline-flex; flex:0 0 auto; }
.a-minimal-nav-ico svg{ width:15px; height:15px; }
.a-minimal-nav-lbl{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- below 1024: the same stack every other presentation already falls into ----------
   alt-responsive.css already forces a single column below 1024, so the three regions stack in
   order-modified order like Comfy/Compact. The one change: seven full-width nav rows above the
   list is a lot of scrolling, so here they wrap as chips instead of a stacked menu. */
@media (max-width:1023px){
  .a-minimal-nav > nav{ flex-direction:row; flex-wrap:wrap; }
  .a-minimal-nav-item{ width:auto; flex:0 0 auto; }
  .a-minimal-nav-lbl{ display:none; }
}

/* ================= PRODUCT-OWNER SCOPE, ROUND TWO ================= */

/* ---------- 1. the universal top nav folds away with the lean left nav ----------
   PRODUCT OWNER: "the top navigation should fold away with the left side navigation. Keep the
   upper right items including 'Create', Today, Focus, refresh, reminders, theme and drop down
   options."
   #altTop has four children: .a-brand, #altNav (the folded destinations), search, and
   .a-top-right (kept per the quote above). Brand and search stay — neither duplicates a
   destination the left nav now carries, and CLAUDE.md core rule 5 requires search stay
   reachable. */
body.a-minimal #altTop #altNav{ display:none; }

/* ---------- 2. Comfy and Compact are untouched, by construction, not by promise ----------
   PRODUCT OWNER: "Going back to comfy or compact should show the universal navigation section."
   Every rule here is scoped under body.a-minimal, which altApplyTasksMode() clears the instant
   the mode is off — see sys_architecture.md "Minimalist Mode" for why that needs no second
   rule. */

/* ---------- 3. "Work at a glance" — the same narrow-row treatment, at any width ----------
   PRODUCT OWNER: "Work at a glance needs to be more compact. It takes too much space."
   Reuses alt-tasks.css's existing compact one-row rendering (its ALT_NARROW_MAX media query)
   unconditionally instead of only below 1280px — same button, filters and population, not a
   second catalogue. Folding both triggers into one selector is alt-tasks.css's owner's call. */
body.a-minimal .a-analytics{
  flex-direction:row; align-items:center; flex-wrap:nowrap;
  gap:var(--a-3); padding:var(--a-2) var(--a-3);
}
body.a-minimal .a-analytics > .a-sec-h{ flex:0 0 auto; margin:0; }
body.a-minimal .a-analytics > .a-glance{ flex:1 1 auto; }
body.a-minimal .a-glance{ display:flex; align-items:center; gap:var(--a-2); }
body.a-minimal .a-glance-part{ flex:1 1 auto; }
body.a-minimal .a-glance-part > .a-sec-h{ display:none; }
body.a-minimal .a-glance .a-stats{ display:flex; gap:var(--a-2); }
body.a-minimal .a-stat{
  flex:1 1 0; flex-direction:row; align-items:baseline; gap:6px;
  min-height:0; padding:3px 9px;
}
body.a-minimal .a-stat b{ font-size:16px; }
body.a-minimal .a-stat span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.a-minimal .a-stat[data-stat="starred"], body.a-minimal .a-stat[data-stat="donewk"],
body.a-minimal .a-glance-part[data-fold]{ display:none; }
/* The "More" button must show at every width in Minimalist, not only ≤1280px — alt-tasks.css
   hides it above that width. Two ids+a class beat one id, so this wins on specificity with no
   `!important`, and the shared rule is untouched for Comfy/Compact. */
body.a-minimal #altStripMore{ display:inline-flex; }

/* ---------- 4. the rows go shorter than `.a-compact` alone makes them ----------
   PRODUCT OWNER: "Make the rows more compact and smaller height wise to optimize what is in
   view."
   Reuses the density mechanism (altApplyDensity() forces body.a-compact during Minimalist) to
   layer --a-row:32px on top — measured: the row's tallest children need 24px plus 2px
   top/bottom padding. Compound-OR selector — sys_design-system.md "The Suite's token layer": a
   page's `.alt-app` is the body itself here, not always a descendant of it. */
body.a-minimal.a-compact.alt-app,
body.a-minimal.a-compact .alt-app{ --a-row:32px; }
body.a-minimal .a-row{ padding-top:2px; padding-bottom:2px; }

/* ---------- 5. Utilities — not this file's rule to write ----------
   PRODUCT OWNER: "Utilities should be hidden as this view is not supported in this mode."
   The region is already gone (section 1, above) — the remaining toolbar TOGGLE BUTTON is
   JS/alt/alt-tasks.js's own markup, not reachable from here without its id. */

/* ---------- 6. the row's own drag handle — the fix for a defect a browser found ----------
   Not `.a-grip` (the splitter) — reusing it would be the one-component-two-definitions
   collision css-class-collision-check.py exists to catch. Never opacity:0 at rest, so it stays
   reachable without a hover. */
.a-minimal-row-grab{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 16px;
  margin-top:3px; color:var(--a-faint); opacity:.55; cursor:grab;
}
.a-minimal-row-grab svg{ width:14px; height:14px; }
body.a-minimal .a-row:hover .a-minimal-row-grab,
body.a-minimal .a-row:focus-within .a-minimal-row-grab{ opacity:1; color:var(--a-dim); }