/*
==============================================================
MODAL CLOSE . TurnerLee SST . v1.000 . 2026-08-24
==============================================================
ONE close button for every modal in the estate. Craig, 2026-08-24:
"make sure all 'x' in top right are consistent."

They were not. Measured on the guide's Modals page before this file:

  Modals 1  .sg-modal-close    relative  26.4px  #fff      24x26
  Modals 2  .ct-confirm-close  absolute  28.2px  #9ca3af   32x36
  Modals 3  .ct-modal-close    relative  28.2px  #7f7f7f   36x36
  Modals 4  .egs-close         absolute  28px    #fff      16x28
  Modals 5  .tlcsi-card        — no close button at all —

Four boxes spanning a 4.7x area range, two positioning models, three
inks, and one modal with no way to dismiss it but the backdrop.

GEOMETRY IS SHARED, INK IS LOCAL. That split is the whole design. The
box, the glyph size, the offsets and the hover behavior are identical
everywhere and live only here. The COLOR cannot be shared, because the
button sits on an orange band in Modals 4, a brand band in Modals 1 and
plain white card in Modals 2 and 3 — so each surface sets three custom
properties and nothing else. No surface re-declares geometry, and no
cascade fight decides which modal wins.

Craig has been burned by matched copies before (MongooseSports /reviews,
2026-08-09: two tool pages held their own copy of the same header CSS and
drifted twice). Two modals that show the same control LINK one stylesheet.

40x40 IS A DELIBERATE INCREASE, not a copy of any of the four. The
primaries' 16x28 was the smallest thing on the page you are required to
hit, and it is the one control that has to work when a user wants OUT.
Every other close in the estate was already larger than it.
==============================================================
*/

/* THE FOUR LEGACY NAMES ARE ALIASES, NOT MIGRATION DEBT.
   Markup and runtime-generated HTML across five surfaces still carry .egs-close,
   .ct-modal-close, .ct-confirm-close and .sg-modal-close — including three
   editor JS files that BUILD the button as a string at runtime. If geometry
   only answered to the new class, a browser holding a cached copy of one of
   those scripts would emit a button with no size, no position and no glyph
   box: an invisible close on a modal that has taken the screen.

   So the component answers to all five names. Adding .tlc-modal-close to markup
   is then cosmetic — it says which component you meant — and no cache key
   anywhere is load-bearing for whether the control works. */
.tlc-modal-close,
.egs-close,
.ct-modal-close,
.ct-confirm-close,
.sg-modal-close {
  position: absolute;
  /* CENTRED IN THE HEADER, ALWAYS. Craig, 2026-08-24: "let's always make sure
     the circle-X is ALWAYS center aligned vertically in the header."

     top:50% plus a NEGATIVE MARGIN of half the 40px box — NOT translateY(-50%),
     and that is the whole reason this is written the ugly way. `.hvr-pop` is on
     every one of these buttons and its keyframe is
     `@keyframes hvr-pop{50%{transform:scale(1.1)}}`. An animation replaces the
     whole transform property, so a translate-based centring would be thrown
     away for the length of every hover and the button would drop 20px and come
     back. margin leaves `transform` entirely to hvr-pop.

     The button must be a child of the HEADER for this to mean "in the header" —
     see the position:relative block below. It used to sit on the card at
     top:10px, which is centred only by coincidence and only on one header. */
  top: 50%;
  margin-top: -20px;
  right: 12px;
  z-index: 2;

  /* Flex-centred so the glyph is optically centred in the box rather than
     sitting on the text baseline. A bare button with padding puts an x at
     the top of its own line box and the target reads off-centre. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;

  background: transparent;
  border: 0;
  border-radius: 50%;
  font-family: inherit;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;

  /* Token first, literal second — the sign-in card opens on pages built
     from the Blank template, which declares no brand tokens at all. Same
     reason every color in signin-modal.css carries a fallback. */
  color: var(--tlc-modal-close-ink, var(--gray4, #9ca3af));
  opacity: .9;
  transition: color .12s ease, background-color .12s ease, opacity .12s ease;
}

.tlc-modal-close:hover, .tlc-modal-close:focus-visible,
.egs-close:hover, .egs-close:focus-visible,
.ct-modal-close:hover, .ct-modal-close:focus-visible,
.ct-confirm-close:hover, .ct-confirm-close:focus-visible,
.sg-modal-close:hover, .sg-modal-close:focus-visible {
  opacity: 1;
  color: var(--tlc-modal-close-ink-hover, var(--gray8, #333333));
  background: var(--tlc-modal-close-bg-hover, rgba(0, 0, 0, .06));
}

/* The hover target must never MOVE as a result of being hovered — if :hover
   changed the box, the boundary would oscillate on and off at frame rate.
   Color and background only; the 40x40 is stated once, unconditionally. */

.tlc-modal-close:focus-visible,
.egs-close:focus-visible,
.ct-modal-close:focus-visible,
.ct-confirm-close:focus-visible,
.sg-modal-close:focus-visible {
  outline: 2px solid var(--tlc-modal-close-ink-hover, var(--gray8, #333333));
  outline-offset: 2px;
}

/* THE HEADER IS THE POSITIONING CONTEXT. Every one of these bands now owns its
   own close button, so "centred in the header" is structural rather than a
   number that has to be re-tuned whenever a header gains or loses a line. */
.egs-head,
.swcE-head,
.ct-modal-header,
.sg-modal-header { position: relative; }

/* THE ONE CARD WITH NO HEADER KEEPS ITS X AT THE TOP. .ct-confirm-card is a
   plain white card — icon, title, message, one button — so there is no band to
   centre in, and `top:50%` put the close mark 171px down a 383px card, dead
   centre beside the message. Measured, and it is why this exception exists.
   "Centred in the header" has no meaning without a header; here the rule is
   the corner. */
.ct-confirm-card { position: relative; }
.ct-confirm-card > .tlc-modal-close {
  top: 10px;
  margin-top: 0;
}

/* ON A COLORED HEADER BAND. Set on the CARD, because the ink has to reach the
   button whichever band it sits in. */
.egs-modal,
.sg-modal {
  --tlc-modal-close-ink: rgba(255, 255, 255, .9);
  --tlc-modal-close-ink-hover: #ffffff;
  --tlc-modal-close-bg-hover: rgba(255, 255, 255, .2);
}

/* The review bar keeps its own close button on purpose — `.tlcrb-modal
   .sg-modal-close` is (0,2,0) in review-bar.css and outranks everything here.
   That modal is a fixed bar with its own geometry; it is not one of the five. */

@media (prefers-reduced-motion: reduce) {
  .tlc-modal-close, .egs-close, .ct-modal-close, .ct-confirm-close, .sg-modal-close { transition: none; }
}