/* =====================================================================
 * THE OVERNIGHT BATCH'S POLISH, PART C -- item 17 and item 33.
 *
 * WHY A THIRD FILE. Part B was one switch over three items, and Tom's next
 * flip is ITEM 15 ALONE: the ad-banner spacing, without moving the Subscribe
 * box and without the timer. One switch over three items cannot do that, so
 * the two that are not 15 live here, behind their own switch:
 *
 *     ITEM 17  Subscribe on top, and only the advertisement sticky
 *     ITEM 33  the step timer's completion pop-up (a section D FEATURE,
 *              and INERT while static/site/recipe-v3.js is held back --
 *              nothing creates a .tmr-pop element, so these rules paint
 *              nothing until that file ships)
 *
 * NOT ONE DECLARATION IS CHANGED BY THE SPLIT. The blocks are moved verbatim
 * and the move is checked by comparing every selector and every declaration
 * of the three files against the sheet they came from.
 *
 * OFF by default. `TTC_NIGHT_POLISH_C=1` turns it on. It loads AFTER part B,
 * so the cascade is exactly what it was.
 * ===================================================================== */

/* ===================================================================== *
 * ITEM 17 -- Subscribe back on top, and ONLY the ad sticky.
 *
 * WHAT IS THERE NOW, measured in the rail at 1440 with the slot filled:
 *     #floating-sidebar (Subscribe)   order 2   position: sticky   top 98px
 *     .ttc-ad--sidebar  (the ad)      order 1   position: static
 * -- so the AD is on top and the SUBSCRIBE box is the thing that sticks,
 * which is the pair of decisions Tom is asking to put back the other way.
 *
 * THIS IS THE ROLLBACK ad-slots.css ITSELF DESCRIBES. The block at its line
 * 755 ends with "ROLLBACK: delete this block and put `position: sticky` back
 * on `.ttc-ad--sidebar` above". Rather than delete a block in a shipping
 * stylesheet, the two `order`s and the two `position`s are swapped here, in
 * the sheet that loads last, so the whole item is one line to take out again.
 *
 * `!important` IS REQUIRED AND ONLY HERE. The rule being corrected writes
 * `position: sticky !important` and `top: 98px !important` on
 * `#floating-sidebar`; an ordinary declaration cannot beat that however late
 * it loads. Nothing else in this file needs it.
 *
 * WHY THEY CANNOT OVERLAP, which is the half of the item that matters. A
 * sticky element is still in normal flow: it reserves its own box and only
 * its PAINTED position shifts, within the bounds of its containing block. With
 * Subscribe `static` and the ad `sticky`, the ad's travel is bounded by the
 * rail below the Subscribe box it comes after -- it can never be painted above
 * its own flow position, so it cannot ride up over Subscribe. The old pairing
 * had the opposite risk, because the STICKY box was the one ABOVE.
 *
 * THE AD HAS SOMEWHERE TO TRAVEL, and that is not an accident of this item.
 * ad-slots.css keeps `#main-right` OUT OF FLOW (its line 838) precisely
 * because a float is only as tall as its contents -- measured there as 1,344px
 * against a 22,396px article -- and sticky inside a short float moves ZERO
 * pixels. That rule is untouched, so the rail is 22,413px tall and the sticky
 * ad has about 19,000px of runway. Proved by scrolling, not by this paragraph:
 * audit/night/shots/item17-*-scroll-*.png.
 *
 * SCOPE. Both rules sit inside the same `:has(.ttc-ad--sidebar)` and the same
 * >=1201 band as the rules they correct, so a page with no sidebar unit, and
 * every width below 1201 where there is no rail at all, are untouched.
 * ===================================================================== */
@media (min-width: 1201px) {
  main:has(.ttc-ad--sidebar) #floating-sidebar{
    order:1;
    position:static !important;
    top:auto !important;
    bottom:auto !important;
  }
  main:has(.ttc-ad--sidebar) .ttc-ad--sidebar{
    order:2;
    position:sticky;
    top:98px;          /* the theme's fixed menu bar occupies 0..69px (0..89 at 1920) */
    bottom:auto;
    align-self:flex-start;
  }
}

/* ===================================================================== *
 * ITEM 33 -- the timer's completion pop-up.
 *
 * THE TIMER'S OWN LOOK IS NOT TOUCHED, which the item asks for: `.tmr` and
 * `.tmr-run` keep every rule they have. This is the pop-up that did not exist.
 *
 * It uses the recipe's own palette -- --maroon for the ground, --cream for
 * the words -- so it reads as part of this page rather than as a browser
 * dialog. Bottom centre on a phone, bottom right on a desktop: out of the way
 * of the step somebody is reading, and nowhere near the floating bar on the
 * left.
 * ===================================================================== */
.tmr-pop{
  position:fixed;
  z-index:400;             /* above the floating bar (300), below any overlay */
  right:24px;
  /* CLEAR OF THE CONSENT BAR, which is fixed across the foot of every page
     until it is answered -- the first screenshot had the "Got it" button
     sitting underneath "Decline". 110px is the bar's own height plus the gap
     the rest of the page keeps from it. */
  bottom:110px;
  max-width:min(380px, calc(100vw - 32px));
}
.tmr-pop__in{
  background:var(--maroon,#51010e);
  color:var(--cream,#fffeec);
  border-radius:18px;
  padding:18px 20px 16px;
  box-shadow:0 10px 34px rgba(0,0,0,.34);
}
/* EVERY ONE OF THESE STATES ITS OWN COLOUR, and the screenshot is why.
   Inheriting from `.tmr-pop__in` looked right in the markup and rendered the
   body text almost invisible: the recipe page has rules like
   `.ttc-v2 .card.step .sbody > p { color: var(--step-color) }` -- a dark ink
   on a dark ground -- and a two-class selector beats an inherited value every
   time. `opacity` was making it worse rather than softer. Found by LOOKING at
   the pop-up, not by reading the CSS. */
.tmr-pop__t{ display:block; font-size:18px; line-height:1.25;
             color:var(--cream,#fffeec) }
.tmr-pop__h{ margin-top:8px; font-weight:700; font-size:15px;
             color:var(--cream,#fffeec) }
.tmr-pop .tmr-pop__b{ margin:6px 0 0; font-size:14px; line-height:1.5;
                      color:#f3e9d2 }
.tmr-pop__x{
  margin-top:14px;
  appearance:none; border:0; cursor:pointer;
  background:var(--cream,#fffeec); color:var(--maroon,#51010e);
  font:inherit; font-weight:700; font-size:14px;
  padding:8px 18px; border-radius:999px;
}
.tmr-pop__x:focus-visible{ outline:2px solid var(--cream,#fffeec); outline-offset:3px }
@media (max-width:600px){
  .tmr-pop{ right:16px; left:16px; bottom:120px; max-width:none }
}
/* A printed recipe has no timer and no pop-up. */
@media print{ .tmr-pop{ display:none } }