/* ==========================================================================
   ALL WORK — the selection module.   LIVE on index.html since 2026-09-08.
   --------------------------------------------------------------------------
   Picked as A1 "Paper Inlay" from allwork-lab-m5 (ten versions; the other
   nine stay runnable at /doctor/allwork-a2.html … allwork-b5.html). This file
   is the lab's `_base.css` + `a1.css` merged into one production stylesheet —
   edit it HERE, and re-run allwork-lab-m5/build.py only when comparing
   against the other nine again.

   THE STRATEGY
   The homepage has exactly two grounds — #FFFFFF and #F4F7FC — and it already
   uses them one way everywhere: Our Services, Industries and Success Stories
   are all #F4F7FC bands holding white cards. There is no third surface on the
   page, and its hierarchy is built from hairlines, not elevation (its two
   most-repeated "shadows" are a 5px/6% blur and a 1px INSET hairline).

   So the module is made of the page's own two-tone and nothing else: the tab
   strip stays the section's tint, and the open tab plus the content canvas are
   PAPER — one sheet pulled out of the tinted ground. The cards then sit on
   white, which is where the rest of the homepage puts them.

   The state is carried by material, not by decoration: the open tab is made of
   the same thing as the content underneath it, and no other tab is. That is
   the whole signal. No invented tint, no gradient, no elevation, no second
   accent — the icon keeps the blue it already had.

   THREE STRUCTURAL FACTS, AND WHY EACH IS LOAD-BEARING

     1 · THE TAB REACHES THE STRIP'S LOWER EDGE.
         `align-items:stretch` does NOT do this — a flex line is only as tall
         as its tallest item, so the strip's bottom padding stays underneath
         the tabs and the open one can never touch the seam. The padding is
         traded instead: everything the strip had below the tabs (8px padding
         + the 1px border) moves to `padding-top`. The strip keeps the exact
         height it had, and the tabs now sit on its lower edge.

     2 · THE SEAM IS DRAWN ON THE STRIP, NOT ON THE CANVAS.
         The hairline under the tabs has to BREAK at the open one, or the tab
         reads as a button parked above a box. Drawn as `inset 0 -1px 0` on the
         strip it paints inside the padding box and BELOW every child
         background, so the open tab's own fill erases it for exactly its
         width. Drawn on the canvas — or as a `border-bottom` on the strip —
         it is outside every child's reach and no amount of colour work joins
         the two. This is also why the module needs no script.

     3 · NO OUTER SHADOW ON THE OPEN TAB, EVER.
         A raised tab throws its shadow onto the first row of cards and slices
         their top edge, which reads as a broken layout rather than as depth.
         Elevation is not asked to carry the connection here; surface is.
         wk-finish.css's `::after` blue rule was the previous answer to the
         same problem and comes off — two marks at one seam is one too many.

   WHAT IT COSTS THE PAGE: nothing. The band measures the same height on every
   tab as it did before this file existed — 304.1 / 254.2 / 259.0 / 303.2 at
   1440x900 and 295.0 / 155.0 / 149.0 / 353.7 / 440.5 at 390x844 — which
   matters because `measure()` pins the hero, so any pixel this module gained
   would fall off the bottom of the first screen. No markup, no script, no tab
   name, no card and no click path is touched.
   ========================================================================== */

.tail.show{
  --aw-section:     #F4F7FC;   /* the band's ground — the page's own tint    */
  --aw-strip:       #F4F7FC;   /* behind the tab row: the same ground        */
  --aw-strip-line:  #E1E8F5;   /* the card hairline, doing the seam          */
  --aw-canvas:      #FFFFFF;   /* paper — the surface the cards sit on       */
  --aw-tab-on:      var(--aw-canvas);   /* the open tab IS the canvas        */
  /* --ink-2, not --ink-3: #767E8B measures 3.5:1 on this strip and fails AA
     for 16px text, and a closed tab is still a control someone has to read.
     The quiet comes from weight (600 against the open tab's 750), from the
     icon's opacity and from the surface — never from contrast the eye has to
     work for. #3A414C measures 9.6:1 here. */
  --aw-ink:         var(--ink-2);
  --aw-ink-on:      var(--ink);
  --aw-accent:      var(--g-blue);
  --aw-hover:       rgba(255,255,255,.66);
  --aw-r:           12px;      /* the page's own card radius */
}

/* ---- 1 · the band ------------------------------------------------------- */
.tail.show .stage{
  background: var(--aw-section);
  /* the paper runs to the band's lower edge, so the sheet is closed off by the
     section's own hairline rather than fading into the page */
  border-bottom-color: var(--aw-strip-line);
}

/* ---- 2 · the strip ------------------------------------------------------ */
.tail.show .tabs{
  /* index.html gives the strip `width:100%`, which is harmless while its
     margins are 0 and a bug the moment they are not. `auto` computes to the
     same box here and to the right one if this ever sits inside a container. */
  width: auto;
  padding-top: 17px;        /* = the 8px it had below the tabs + the 1px border */
  padding-bottom: 0;
  border-bottom: 0;
  background: var(--aw-strip);
  box-shadow: inset 0 -1px 0 var(--aw-strip-line);
}
@media (max-width: 760px){
  .tail.show .tabs{ padding-top: 15px; }   /* 7 + 7 + 1 at phone metrics */
}

/* ---- 3 · the tabs ------------------------------------------------------- */
.tail.show .tabs button{
  border-radius: var(--aw-r) var(--aw-r) 0 0;
  color: var(--aw-ink);
  background: none;
  box-shadow: none;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.tail.show .tabs button svg{ opacity: .6; }
.tail.show .tabs button:hover:not([aria-selected="true"]){
  background: var(--aw-hover);
  color: var(--aw-ink-on);
}
.tail.show .tabs button:hover:not([aria-selected="true"]) svg{ opacity: .85; }
.tail.show .tabs button:focus-visible{
  outline: 2px solid var(--aw-accent);
  outline-offset: -3px;
  border-radius: var(--aw-r) var(--aw-r) 0 0;
}

/* The open tab. `[aria-selected]` is restated on the radius because
   index.html's own late block carries `[aria-selected="true"]{border-radius:10px}`
   at (0,4,1), which out-ranks a plain `.tabs button` rule however late this
   file loads. */
.tail.show .tabs button[aria-selected="true"]{
  border-radius: var(--aw-r) var(--aw-r) 0 0;
  background: var(--aw-tab-on);
  color: var(--aw-ink-on);
  font-weight: 750;
  box-shadow: none;
}
.tail.show .tabs button[aria-selected="true"] svg{ opacity: 1; stroke: var(--aw-accent); }
.tail.show .tabs button[aria-selected="true"]::after{ content: none; }
.tail.show .tabs button[aria-selected="true"]::before{ content: none; }

/* ---- 4 · the canvas ----------------------------------------------------- */
.tail.show .drawer{
  background: var(--aw-canvas);
  box-shadow: none;
  border-radius: 0;
}

@media (prefers-reduced-motion: reduce){
  .tail.show .tabs button{ transition: none; }
}