/* ==========================================================================
   home-allwork-tabs · tabs.css — THE TAB ROW, REBUILT (LIVE on index.html since 2026-09-22)
   Loaded last, after band.css and frame.css.

   THE IDEA
   The tabs stop being words on the blue sheet and become the sheet's own
   index tabs. They stand in a row on the white hero panel, directly on the
   sheet's top edge, and the selected one is made of the sheet itself: the same
   #C6D9F4, running down without a seam into the cards it opened, with a 3px
   #0760C6 rule across its top. The eye reads "this tab opened this sheet",
   which a dot or a fill colour never said.

   THE ROW
   · Every tab has the same width, and it is the card column's width: the rule
     band.js uses for the rails (220px or more, a 48px peek on a desktop; one
     tab and about half the next on a phone), so at rest the tabs stand over
     the card columns and the next tab shows its icon at the edge — the only
     "there is more" cue, as on the Google Ads rail (no arrows, no fades).
   · 1440: five whole tabs + the sixth's icon. 1280: four. Phones: one and a half.
   · Two lines: the name at 14.5px/700, the second line at 12px/500 in the
     muted ink. Nothing is truncated; every tab is wide enough for its words.
   · Manual only: swipe, trackpad, mouse drag (tabs.js) and the page's own
     arrow keys; nothing slides by itself.

   STATES
   · Unselected: a white tab with a soft 1px #D3DFF0 edge, standing 8px above
     the sheet (6px on phones).
   · Hover: the edge and the name darken, the tab tints #F7FAFE — a lighter
     object than the selected one, never a second "open" tab.
   · Selected: the sheet's blue, full height down into the sheet, the top
     rule, the name in #004594. The old dot and white tile go.
   · Focus: a 2px #003F8A ring inside the tab.

   Selectors carry eleven ids (8 through :has, #tabs ×3) to outrank band.css
   and the page's six-id selected-tab rule.
   ========================================================================== */

html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage.stage{
  --tb-h:56px;        /* the tab                                  */
  --tb-join:8px;      /* the gap a selected tab fills             */
  --tb-gap:10px;      /* = the card rail's gap                     */
  --tb-edge:#D3DFF0;  --tb-edge-h:#9DBCE6;  --tb-rule:#0760C6;  --tb-ring:#003F8A;
  padding:0 !important;
  background:transparent !important; background-color:transparent !important;
}
@media (max-width:900px){
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage.stage{
    --tb-h:54px; --tb-join:6px; --tb-gap:8px;
  }
}

/* ---- the sheet is now the drawer: the tabs stand on its top edge -------- */
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage.stage > .drawer.drawer{
  box-sizing:border-box !important;
  margin:0 !important;
  padding:18px var(--bw-sp) var(--bw-sp) !important;
  background:var(--bw-sheet) !important; background-color:var(--bw-sheet) !important;
}
@media (max-width:900px){
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage.stage > .drawer.drawer{ padding-top:12px !important; }
}

/* ---- the row ------------------------------------------------------------- */
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs{
  display:flex !important; flex-wrap:nowrap !important;
  justify-content:flex-start !important; align-items:stretch !important;
  gap:var(--tb-gap) !important;
  width:auto !important; max-width:none !important;
  height:calc(var(--tb-h) + var(--tb-join)) !important; min-height:0 !important;
  margin:0 var(--bw-sp) !important; padding:0 !important;
  background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  overflow-x:auto !important; overflow-y:hidden !important; overscroll-behavior-x:contain;
  scrollbar-width:none !important; -webkit-mask-image:none !important; mask-image:none !important;
  -webkit-user-select:none; user-select:none;
}
/* the row always comes to rest on whole tabs: selecting a far tab (the page
   centres it) or letting go of a swipe settles on a tab's left edge, so no
   empty sliver of a tab is ever left at the start of the row */
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs{
  scroll-snap-type:x mandatory !important; scroll-padding-inline:0 !important;
}
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button{ scroll-snap-align:start; scroll-snap-stop:normal; }
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button:last-child{ scroll-snap-align:end; }
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs.is-drag{ scroll-snap-type:none !important; }
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs::-webkit-scrollbar{ display:none !important; }
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs.is-drag{ cursor:grabbing; }
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs.is-drag > button{ cursor:grabbing; }

/* ---- a tab ------------------------------------------------------------------ */
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button{
  position:relative !important; isolation:isolate;
  flex:0 0 var(--tw, 228px) !important;
  width:var(--tw, 228px) !important; min-width:0 !important; max-width:none !important;
  height:100% !important; min-height:0 !important;
  display:flex !important; align-items:center !important; justify-content:flex-start !important;
  gap:12px !important;
  margin:0 !important; padding:0 14px var(--tb-join) 16px !important;
  background:transparent !important; background-color:transparent !important; background-image:none !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important; outline:0 !important;
  color:var(--bw-ink) !important; text-align:left !important; white-space:nowrap !important;
  transform:none !important; opacity:1 !important; cursor:pointer;
}
/* the tab's surface: white with a soft edge, standing clear of the sheet */
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button::before{
  content:"" !important; display:block !important;
  position:absolute !important; z-index:-1 !important;
  top:0 !important; left:0 !important; right:0 !important; bottom:var(--tb-join) !important;
  width:auto !important; height:auto !important; margin:0 !important;
  background:#FFFFFF !important; border:0 !important; border-radius:0 !important;
  box-shadow:inset 0 0 0 1px var(--tb-edge) !important;
  opacity:1 !important; transform:none !important;
  transition:background-color .22s ease, box-shadow .22s ease, bottom .22s ease;
}
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button::after{ content:none !important; display:none !important; }

/* icon */
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button svg{
  flex:none !important; width:20px !important; height:20px !important; margin:0 !important;
}

/* the two lines */
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button .gah-tabw{
  display:flex !important; flex-direction:column !important; align-items:flex-start !important;
  gap:2px !important; min-width:0 !important; margin:0 !important; padding:0 !important;
}
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button .gah-tabname{
  display:block !important; margin:0 !important;
  font-family:var(--bw-font) !important; font-size:14.5px !important; line-height:18px !important;
  font-weight:700 !important; letter-spacing:-.015em !important; color:var(--bw-ink) !important;
  transition:color .22s ease;
}
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button .gah-tabsub{
  display:block !important; margin:0 !important; font-style:normal !important;
  font-family:var(--bw-font) !important; font-size:12px !important; line-height:15px !important;
  font-weight:500 !important; letter-spacing:0 !important; color:var(--bw-ink-3) !important; opacity:1 !important;
}

/* ---- selected: the sheet itself, opened into its cards -------------------- */
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button[aria-selected="true"]::before{
  bottom:0 !important;
  background:var(--bw-sheet) !important;
  box-shadow:inset 0 3px 0 var(--tb-rule) !important;
}
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button[aria-selected="true"] .gah-tabname{ color:var(--bw-on) !important; }
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button[aria-selected="true"] .gah-tabsub{ color:var(--bw-ink-2) !important; }

/* ---- hover / pressed / focus ---------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button:not([aria-selected="true"]):hover::before{
    background:#F7FAFE !important; box-shadow:inset 0 0 0 1px var(--tb-edge-h) !important;
  }
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button:not([aria-selected="true"]):hover .gah-tabname{ color:var(--bw-on) !important; }
}
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button:not([aria-selected="true"]):active::before{ background:#EEF4FC !important; }
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button:focus-visible::before{
  box-shadow:inset 0 0 0 2px var(--tb-ring) !important;
}
html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button[aria-selected="true"]:focus-visible::before{
  box-shadow:inset 0 3px 0 var(--tb-rule), inset 0 0 0 2px var(--tb-ring) !important;
}

/* ---- phones ------------------------------------------------------------------ */
@media (max-width:900px){
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button{
    gap:10px !important; padding:0 12px var(--tb-join) 12px !important;
  }
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button svg{ width:18px !important; height:18px !important; }
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button .gah-tabname{ font-size:14px !important; line-height:17px !important; }
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button .gah-tabsub{ font-size:11.5px !important; line-height:14px !important; }
}

@media (prefers-reduced-motion:reduce){
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button::before,
  html body .screen:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .tail.show > .stage > #tabs#tabs#tabs > button .gah-tabname{ transition:none !important; }
}