/* ==========================================================================
   OUR WORK — the band's finish   ·   LIVE on index.html since 2026-08-31
   --------------------------------------------------------------------------
   Applied with the hero. Edit it here, not in a lab copy — /home-hero-g7,
   /home-hero-hi9 and /home-hero-ten all link this same file.
   --------------------------------------------------------------------------
   UI, colour and rhythm only. Every rule is scoped to `.tail.show`, so it
   repaints what the band already draws and reaches nothing else on the page.
   No markup, no tabs, no cards, no words are added, moved or taken away.

   What it fixes, in the order the eye finds it:

     1  the selected tab was a pale blue chip on a pale blue strip — two tints
        four steps apart. It is now a white tab cut into the strip, with the
        blue rule under it landing on the strip's own hairline.
     2  every tab's label sat on its own baseline, because one of the six
        carries a second line. One block height, one baseline, all six.
     3  four card families — the doors, the client rows, the previews and the
        rail's own row card — each had their own radius, hairline and hover.
        One shape now: 12px, one hairline, one lift.
     4  the gaps. The door card's arrow floated at whatever distance the copy
        left it; the preview captions were one or two lines depending on the
        client; the strip's floor sat at a different distance under each tab.
   ========================================================================== */

.tail.show{
  --wk-face:      #FFFFFF;
  --wk-strip:     #F2F6FD;   /* the pale strip, very slightly warmer */
  --wk-strip-edge:#DFE7F6;
  --wk-edge:      #E1E8F5;   /* the card hairline that reads on the strip */
  --wk-edge-hi:   #B9D3F8;
  --wk-r:         12px;
  --wk-rest:      0 1px 2px rgba(11,13,18,.05);
  --wk-hover:     0 2px 4px rgba(11,13,18,.05), 0 16px 30px -18px rgba(11,13,18,.6);
}

/* ==========================================================================
   1 · THE STRIP
   ========================================================================== */
.tail.show .stage{
  background: var(--wk-strip);
  border-top: 1px solid var(--wk-strip-edge);
  border-bottom: 1px solid var(--wk-strip-edge);
}

/* ==========================================================================
   2 · THE DOCK — a selected tab you cannot miss
   The tab is the top edge of the canvas, not a chip floating above it: it
   takes the canvas's own white, its outer corners round, and its blue rule
   sits ON the strip's hairline rather than above it.
   ========================================================================== */
.tail.show .tabs{
  gap: 2px;
  align-items: stretch;
  border-bottom: 1px solid var(--wk-strip-edge);
}
.tail.show .tabs button{
  position: relative;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 15px 11px;
  border-radius: 10px 10px 0 0;
  color: var(--ink-2); font-weight: 600;
  transition: color .16s ease, background .16s ease;
}
.tail.show .tabs button:hover{ background: rgba(26,115,232,.06); color: var(--ink); }
.tail.show .tabs button svg{ opacity: .62; transition: opacity .16s ease, stroke .16s ease; }
.tail.show .tabs button:hover svg{ opacity: .85; }

.tail.show .tabs button[aria-selected="true"]{
  background: var(--wk-face);
  color: var(--g-blue);
  font-weight: 750;
  box-shadow: 0 -1px 2px rgba(11,13,18,.04);
}
.tail.show .tabs button[aria-selected="true"] svg{ opacity: 1; stroke: var(--g-blue); }
/* the blue rule, sitting on the strip's hairline so the tab reads as the top
   edge of what is underneath it rather than a button above it */
.tail.show .tabs button[aria-selected="true"]::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--g-blue);
}

/* one block height for all six */
.tail.show .tabs button > span,
.tail.show .tabs button{ line-height: 1.25; }

/* The Google Ads tab is the only one in the row whose label is markup rather
   than a bare text node: gah-panel.js splits it into "Google Ads" + "Success
   Stories" so the tab can name what is under it. This used to set that second
   half as a much smaller stacked line — 11.5px/500 in --ink-3, and because the
   selector catches the wrapper span too, the NAME was shrunk to 11.5px along
   with it. The one tab that carried two words was therefore the only tab
   drawn over two lines and at two sizes, both of them smaller than its five
   neighbours' single 16px label.

   The spans now carry no type of their own. The label inherits the button's
   size, weight, letter-spacing and colour like every other tab's — including
   hover and selected, which is why the selected-state colour rule that used
   to sit here is gone — and gah.css sets the two words on one line. Nothing
   else in the row matches this selector, so no other tab moves. */
.tail.show .tabs button span{
  font: inherit; letter-spacing: inherit; color: inherit;
}

/* ==========================================================================
   3 · ONE CARD SHAPE — for all four families in the band
   ========================================================================== */
.tail.show .card,
.tail.show .gah .mp-i{
  border-radius: var(--wk-r);
  background: var(--wk-face);
  border: 1px solid var(--wk-edge);
  box-shadow: var(--wk-rest);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.tail.show .card:hover,
.tail.show .gah .mp-i:hover{
  border-color: var(--wk-edge-hi);
  box-shadow: var(--wk-hover);
}
/* only the cards that are actually controls lift */
.tail.show button.card:hover,
.tail.show a.card:hover,
.tail.show .gah a.mp-i:hover,
.tail.show .gah button.mp-i:hover{ transform: translateY(-2px); }
.tail.show .card.wt-flat:hover{ transform: none; box-shadow: var(--wk-rest); border-color: var(--wk-edge); }

/* ---- the five doors ---------------------------------------------------- */
.tail.show .door{ padding: 15px 15px 13px; gap: 7px; }
.tail.show .door .ic{
  width: 40px; height: 40px; border-radius: 11px;
  background: #EAF1FE; box-shadow: inset 0 0 0 1px #D6E4FB;
}
.tail.show .door h3{ font-size: 15.5px; letter-spacing: -.028em; }
.tail.show .door h3 span{ margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.tail.show .door .say{ font-size: 12.8px; line-height: 1.45; color: var(--ink-2); }
/* the arrow was floating at whatever distance the copy left it — one card had
   two lines of copy, the next had one. A footer rule puts it in the same place
   in all five and turns the leftover into air inside the card. */
.tail.show .door .go{
  display: block; width: 100%; margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--line-2);
  font-size: 15px; line-height: 1; color: var(--ink-4);
}
.tail.show .door:hover .go{ color: var(--g-blue); transform: none; }
.tail.show .door:hover .ic{ background: #E1EBFD; }

/* ---- the client wall --------------------------------------------------- */
.tail.show .name{ padding: 15px 14px; gap: 12px; }
.tail.show .name .chip{
  width: 36px; height: 36px; border-radius: 10px;
  font-size: 12px; font-weight: 800; letter-spacing: -.02em;
}
.tail.show .name b{ font-size: 14.5px; letter-spacing: -.024em; }
.tail.show .name i{ font-size: 12.4px; color: var(--ink-3); }

/* ---- the previews: pages, sites and creatives -------------------------- */
.tail.show .piece{ padding: 0; overflow: hidden; }
.tail.show .piece .win{ border-bottom: 1px solid var(--wk-edge); background: #F7F9FD; }
.tail.show .piece .cap{ padding: 11px 14px 13px; }
.tail.show .piece .cap b{ font-size: 14.5px; letter-spacing: -.024em; }
/* one client's line is a sentence and the next one's is three words, which
   left the strip's floor at a different height under each card */
.tail.show .piece .cap i{
  display: block; min-height: 2.6em; font-size: 12.4px; line-height: 1.35;
  color: var(--ink-3); white-space: normal;
}
.tail.show .piece .cap i b{ font-size: 12.4px; color: var(--g-green); font-weight: 700; }

/* ---- the rail's own row card, on the Google Ads tab --------------------
   A little more air in the card and between the two rows. This is also the
   only lever the two short tabs have: the Google Ads rail closed 90px above
   the fold where every other tab closes on it, because a row card is genuinely
   half the height of a preview card. It does not close the gap — a floor tall
   enough to do that pads the short tabs with dead recess, which was measured
   and rejected once already — but it takes the swing between the tallest and
   shortest tab from 73px down to about 45. */
.tail.show .gah .mp-i{ padding: 15px 14px; }
.tail.show .gah .cc.d5 .mp-row{ gap: 14px; }

/* ==========================================================================
   4 · THE EDGE CONTROL
   A round white control with the band's own hairline, so it reads as a
   control over the row rather than a disc dropped on top of it.
   ========================================================================== */
.tail.show .dk-btn{
  background: var(--wk-face);
  border: 1px solid var(--wk-edge);
  color: var(--ink-2);
  box-shadow: 0 2px 6px rgba(11,13,18,.06), 0 10px 22px -14px rgba(11,13,18,.55);
}
.tail.show .dk-btn:hover{
  border-color: var(--g-blue); color: var(--g-blue); background: #F7FAFF;
}

/* ==========================================================================
   5 · THE FLOOR
   The strip closed a different distance under each tab's last card. One
   value, so the band's bottom edge lands in the same place whichever tab
   is open.
   ========================================================================== */
@media (min-width: 761px){
  .tail.show .drawer{
    padding-top: clamp(14px, 2vh, 20px);
    padding-bottom: clamp(16px, 2.3vh, 24px);
  }
}

/* ==========================================================================
   6 · PHONES — the same finish at phone proportions
   ========================================================================== */
@media (max-width: 760px){
  .tail.show .tabs button{ padding: 9px 12px 10px; }
  .tail.show .door{ padding: 13px 13px 12px; }
  .tail.show .piece .cap i{ min-height: 0; }
}

/* ==========================================================================
   7 · THE PREVIEW WELL
   The three preview tabs closed 35px past the fold on a 1440x900 screen, so
   the last row of cards was cut by the bottom of the window. The well is the
   only part of that card with room to give: 150px -> 114px takes the card
   from 226 to 190 and lands the band on the fold at 899 instead of 935. The wire drawing
   inside it is proportional and re-flows on its own.
   ========================================================================== */
@media (min-width: 761px){
  .tail.show .piece .win{ min-height: 114px; }
  .tail.show .drawer{ padding-bottom: clamp(14px, 2vh, 20px); }
}