/* =====================================================================
   FIGHT POSTER SKIN — the generator cards, in the same language as the
   three product boxes on the home page.

   Approved from the all-steps mockup, 13 Aug 2026.

   WHY "html body" PREFIXES: every template loads its own inline <style>
   AFTER the linked stylesheets, so an appended rule of equal specificity
   loses on source order. The prefix adds two element types of
   specificity, which beats the templates' class-level rules regardless
   of load order — without resorting to !important. Same convention
   David used for the Oswald weight system in smackagram.css.

   WHAT THIS DELIBERATELY DOES NOT TOUCH:
   - Type scale. The pages already ARE the type scale (Inter 12px labels,
     15px inputs, .btn 14px/600). Nothing here changes a font-size that
     David set.
   - The intensity fader. It is already a Brutal-left / Friendly-right
     thermometer with the real level names on it.
   - White input fields. That is a deliberate call on the live pages and
     is not this change's argument to have.
   ===================================================================== */

:root{
  --fp-red:#E10600;
  --fp-hot:#E10600;
  --fp-silver:#C3CAD3;
  --fp-green:#3ddc6b;
}

/* ---------------------------------------------------------------------
   1. THE WEDGE
   The hard diagonal off the home page boxes. A product card is ~430px
   tall; a four-field generator is 700+. Carried at full height the wedge
   runs down the left and puts field labels on red, so it is masked out
   before it reaches the fields. Same angle, same colour, top only.
   --------------------------------------------------------------------- */
html body .fp-frame{position:relative;}
html body .fp-frame::after{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(115deg, var(--fp-red) 0 32%, transparent 32.2%);
  opacity:.9;
  /* Pixels, not percentages. A percentage fade behaves completely
     differently on a 400px card and an 850px one - on Game Day it ran the
     red down over the fader ticks. A fixed distance looks the same on
     every card. */
  -webkit-mask-image:linear-gradient(180deg,#000 0 66px,rgba(0,0,0,.32) 124px,transparent 186px);
          mask-image:linear-gradient(180deg,#000 0 66px,rgba(0,0,0,.32) 124px,transparent 186px);
  border-radius:inherit;
}
/* Silver is far lighter than the red - at .9 a white headline sitting on
   it disappears - so the silver wedge runs at roughly half strength. */
html body .fp-frame.fp-silver::after{
  background:linear-gradient(115deg, var(--fp-silver) 0 32%, transparent 32.2%);
  opacity:.52;
}
/* Everything the card already contains has to sit ON TOP of the wedge.
   The cards are position:static children, so they need a stacking context. */
html body .fp-frame > *{position:relative; z-index:1;}

/* ---------------------------------------------------------------------
   2. THE GHOST WORD
   Not a new element: this is the wordmark the card already had, turned
   from a solid centred word into the outlined one that bleeds off the
   top-right corner. One word per card, exactly like the product boxes.
   --------------------------------------------------------------------- */
/* Sits INSIDE the frame rather than bleeding over the corner: the frames
   contain absolutely-positioned team-search dropdowns, so overflow:hidden -
   which is what clipping a bleeding ghost word would need - is not available
   here without cutting the autocomplete off. */
/* Below the status strip, not at the card's true top: the strip (LINE
   OPEN / WAITING + pips) is an opaque child painted above the ghost, so at
   top:2px it covered the upper third of the word - which read as the word
   being chopped off. */
html body .fp-frame .gen-wordmark{
  position:absolute; top:52px; right:14px; z-index:0;
  margin:0; text-align:right; pointer-events:none;
  font-family:'Oswald',sans-serif; font-weight:700;
  font-size:clamp(52px,9vw,86px); line-height:1; letter-spacing:1px;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,0.15);
  text-shadow:none;
  /* Auto-Smack's wordmark is a silver gradient clipped to the letterforms
     (background-clip:text) - color:transparent alone leaves that gradient
     as a solid chrome fill. The ghost is an OUTLINE: no fill, no glow. */
  background:none;
  -webkit-text-fill-color:transparent;
  filter:none;
}
html body .fp-frame.fp-silver .gen-wordmark{
  /* 0.22 alpha at 50px proved invisible on a real screen. Brighter stroke,
     bigger word - "Auto-Smack" still capped under the red card's 86px
     because it is ten characters to SMACK's five. */
  -webkit-text-stroke:1.5px rgba(195,202,211,0.38);
  font-size:clamp(34px,5.5vw,62px);
}
/* The wordmark was in the flow and held the card's top padding open.
   Pulling it out of the flow collapses that, so the card takes it back. */
html body .fp-frame{padding-top:26px;}

/* Game Day has no wordmark element of its own - give it one. */
html body .fp-frame.fp-ghost-loss::before{
  content:"LOSS";
  /* Game Day's card has no status strip, so the ghost can sit at the top. */
  position:absolute; top:6px; right:14px; z-index:0; pointer-events:none;
  font-family:'Oswald',sans-serif; font-weight:700;
  font-size:clamp(52px,9vw,86px); line-height:1; letter-spacing:1px;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,0.15);
}

/* ---------------------------------------------------------------------
   3. CONDENSED CONSENT ROWS
   19px boxes and 2-3 line sentences turned the last step into a wall of
   small print. 15px boxes, one line each. The copy itself is shortened
   in the templates; this is the box and the metrics.
   --------------------------------------------------------------------- */
html body .consent-row{
  align-items:center;
  gap:9px;
  margin-bottom:9px;
  font-size:12.5px;
  line-height:1.45;
}
html body .consent-row input[type=checkbox]{
  width:15px; height:15px;
}

/* ---------------------------------------------------------------------
   4. THE ANSWER BUTTON
   The final action on every generator becomes the green circle off the
   Incoming Call concept. Green is the only green on the site: it is the
   one control that is not another red button on a red card, and every
   phone on earth has trained people that a green circle with a handset
   means the call goes through. It stays green on Auto-Smack too.

   Rings are animated box-shadow rather than pseudo-elements, because
   ::before is carrying the handset and ::after is not free either.
   --------------------------------------------------------------------- */
html body .fp-call{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  margin-top:6px;
}
html body .fp-call > button,
html body .fp-call > a{
  width:94px; height:94px; min-width:0; padding:0; margin:0;
  border:none; border-radius:50%; cursor:pointer;
  font-size:0; line-height:0; text-indent:0; letter-spacing:0;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 38% 28%,#6df396,var(--fp-green) 44%,#0d8a38);
  box-shadow:0 12px 26px rgba(0,0,0,.7),
             0 0 0 0 rgba(61,220,107,.55),
             0 0 0 0 rgba(61,220,107,.3),
             inset 0 2px 4px rgba(255,255,255,.5),
             inset 0 -7px 13px rgba(0,0,0,.38);
  animation:fp-ring 2s infinite;
  transition:transform .15s ease;
}
@keyframes fp-ring{
  0%  {box-shadow:0 12px 26px rgba(0,0,0,.7),
                  0 0 0 0 rgba(61,220,107,.55),
                  0 0 0 0 rgba(61,220,107,.3),
                  inset 0 2px 4px rgba(255,255,255,.5),
                  inset 0 -7px 13px rgba(0,0,0,.38);}
  100%{box-shadow:0 12px 26px rgba(0,0,0,.7),
                  0 0 0 20px rgba(61,220,107,0),
                  0 0 0 38px rgba(61,220,107,0),
                  inset 0 2px 4px rgba(255,255,255,.5),
                  inset 0 -7px 13px rgba(0,0,0,.38);}
}
/* The handset. Masked so it inherits a flat white regardless of the
   button's own colour rules. */
html body .fp-call > button::before,
html body .fp-call > a::before{
  content:"";
  width:40px; height:40px; display:block; background:#fff;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));
  animation:fp-shake 2s infinite;
  -webkit-mask:var(--fp-handset) center/contain no-repeat;
          mask:var(--fp-handset) center/contain no-repeat;
}
html body .fp-call{
  --fp-handset:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/></svg>");
}
@keyframes fp-shake{
  0%,54%,100%{transform:rotate(0)}
  58%{transform:rotate(-14deg)} 62%{transform:rotate(12deg)}
  66%{transform:rotate(-10deg)} 70%{transform:rotate(8deg)} 74%{transform:rotate(0)}
}
html body .fp-call > button:hover,
html body .fp-call > a:hover{transform:scale(1.05) rotate(0);}
/* Instant press feedback - the circle visibly squashes the moment a
   finger lands on it, before any JS has run at all. */
html body .fp-call > button:active,
html body .fp-call > a:active{transform:scale(.93); transition:transform .06s ease;}
html body .fp-call > button:disabled{
  animation:none; cursor:not-allowed;
  background:radial-gradient(circle at 38% 28%,#5a6b60,#3c4a41 44%,#1d2620);
  box-shadow:0 8px 18px rgba(0,0,0,.6),inset 0 2px 4px rgba(255,255,255,.14);
}
html body .fp-call > button:disabled::before{animation:none; background:#9aa39c;}

/* THE BUSY STATE (Andy, 13 Aug 2026). The old busy feedback wrote text
   INTO the circle button - which fp-call renders at font-size:0, so
   "SENDING..." was literally invisible and a click looked like it did
   nothing. fp-busy on the .fp-call wrapper turns the handset into a
   spinning ring instead: unmissable, works the same on all four pages,
   and the label under the button carries the words. The :disabled
   variants are listed explicitly so the grey disabled skin (above)
   cannot out-rank the busy skin while a request is in flight. */
html body .fp-call.fp-busy > button,
html body .fp-call.fp-busy > button:disabled,
html body .fp-call.fp-busy > a{
  animation:none; cursor:progress; pointer-events:none;
  background:radial-gradient(circle at 38% 28%,#6df396,var(--fp-green) 44%,#0d8a38);
  box-shadow:0 12px 26px rgba(0,0,0,.7),
             0 0 0 8px rgba(61,220,107,.18),
             inset 0 2px 4px rgba(255,255,255,.5),
             inset 0 -7px 13px rgba(0,0,0,.38);
}
html body .fp-call.fp-busy > button::before,
html body .fp-call.fp-busy > button:disabled::before,
html body .fp-call.fp-busy > a::before{
  -webkit-mask:none; mask:none;
  background:transparent; filter:none;
  width:38px; height:38px; border-radius:50%;
  border:4px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:fp-spin .75s linear infinite;
}
@keyframes fp-spin{to{transform:rotate(360deg)}}
/* The label pulses gently while busy so the words read as live, not stuck. */
html body .fp-call.fp-busy .fp-call-lab{animation:fp-busy-lab 1.2s ease-in-out infinite;}
@keyframes fp-busy-lab{0%,100%{opacity:1}50%{opacity:.55}}
html body .fp-call-lab{
  font-family:'Inter',sans-serif; font-weight:700; font-size:14px;
  letter-spacing:.5px; text-transform:uppercase; color:#fff;
  text-align:center; text-shadow:0 2px 8px rgba(0,0,0,.8);
}
html body .fp-call-sub{
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:1px;
  text-transform:uppercase; color:#84dfa0; text-align:center; margin-top:-4px;
}
html body .fp-silver .fp-call-sub{color:#8fd8a6;}

/* ---------------------------------------------------------------------
   5. WORD COUNTER
   Smacky speaks at 135 wpm (services/trash_talk_service.py), so 150
   words is ~67 seconds of call. The generator itself writes 110-125, so
   the counter goes amber past 125 - "you are now longer than anything we
   would have written" - and the JS hard-stops at 150.
   --------------------------------------------------------------------- */
html body .fp-wc{
  display:flex; justify-content:flex-end; gap:6px;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:1px;
  text-transform:uppercase; color:#7d7d86;
  margin:-6px 0 12px;
}
html body .fp-wc.is-long{color:#E10600;}
html body .fp-wc .fp-wc-t{color:#5f5f68;}

@media(prefers-reduced-motion:reduce){
  html body .fp-call > button,
  html body .fp-call > a,
  html body .fp-call > button::before,
  html body .fp-call > a::before{animation:none;}
}

/* ---------------------------------------------------------------------
   6. HEAT ROWS
   The checkbox list that replaced the intensity fader, and the reversed
   meter beneath it. Markup is built by fpHeatRows() in fight-poster.js;
   the pages only provide the container.
   --------------------------------------------------------------------- */
html body .fp-heat{
  border:1px solid #33333b; border-radius:11px; overflow:hidden;
  background:rgba(0,0,0,.35);
}
html body .fp-hrow{
  display:flex; align-items:center; gap:10px; padding:10px 13px;
  border-bottom:1px solid #26262d; cursor:pointer;
}
html body .fp-hrow:last-child{border-bottom:none;}
html body .fp-hbox{
  width:15px; height:15px; border-radius:4px; border:2px solid #4d4d57;
  flex:0 0 auto;
}
html body .fp-hrow.on .fp-hbox{
  border-color:#E10600;
  background:linear-gradient(180deg,#E10600,#E10600);
  box-shadow:0 0 10px rgba(255,30,45,.6);
}
html body .fp-hbody{min-width:0;}
html body .fp-hn{font-family:'Inter',sans-serif; font-weight:700; font-size:13.5px; color:#b6b6be;}
html body .fp-hrow.on .fp-hn{color:#fff;}
html body .fp-hd{font-size:12px; color:#8c8c94; margin-left:7px;}
html body .fp-hrow.on .fp-hd{color:#c2bcbd;}
/* One line per row is the point - Inter at 13.5/12 tips onto a second
   line at 390px, so narrow screens step down. */
@media(max-width:520px){
  html body .fp-hn{font-size:12.5px;}
  html body .fp-hd{font-size:11px; margin-left:6px;}
}

/* The meter: Brutal-red on the LEFT to Friendly-green on the right,
   lighting from the right. The <i> is a dark mask over the left-hand
   side - at Friendly it covers 75% so only the green tip shows, at
   Brutal it covers nothing and the whole run to red is lit. Same
   red-to-green on the silver page: it is a temperature, not a brand
   colour. */
html body .fp-gauge{
  height:7px; border-radius:5px; overflow:hidden; margin-top:10px;
  border:1px solid #2c2c34;
  background:linear-gradient(90deg,#E10600,#E10600 52%,#5bd07a);
}
html body .fp-gauge i{display:block; height:100%; width:0; background:#141419; transition:width .18s ease;}
html body .fp-gscale{
  display:flex; justify-content:space-between;
  font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; color:#7d7d86; margin-top:5px;
}
/* Silver page: the checked box goes chrome, dark tick zone - matches the
   silver Next buttons. */
html body .fp-silver .fp-hrow.on .fp-hbox{
  border-color:#D9DFE7;
  background:linear-gradient(180deg,#EDF1F6,#AFB7C2);
  box-shadow:0 0 10px rgba(217,223,231,.6);
}

/* ---------------------------------------------------------------------
   7. AMBER COLLAPSED STEPS
   A finished step collapses to an amber summary row - amber against the
   red frame (and against the silver one) so a done step is unmistakably
   a different zone from anything still live. Covers Send a Smack's
   .sas-summary and Auto-Smack's .step-summary.
   --------------------------------------------------------------------- */
html body .sas-summary{
  background:linear-gradient(180deg,rgba(225,6,0,.10),rgba(225,6,0,.03));
  border:1px solid rgba(225,6,0,.34);
  border-radius:10px;
  padding:10px 14px;
  margin:0 0 10px;
}
html body .sas-summary:hover{
  background:linear-gradient(180deg,rgba(225,6,0,.16),rgba(225,6,0,.05));
}
html body .sas-tick{
  width:18px; height:18px; border-radius:50%;
  background:transparent; border:1.5px solid #E10600; color:#E10600;
  font-size:11px;
}
html body .sas-summary-label{color:#E10600;}
html body .sas-summary-change{
  color:#E10600; border:1px solid rgba(225,6,0,.4); border-radius:20px;
  padding:4px 9px;
}
html body .step-summary{
  background:linear-gradient(180deg,rgba(225,6,0,.10),rgba(225,6,0,.03));
  border:1px solid rgba(225,6,0,.34);
  border-radius:10px;
  padding:10px 14px;
}
html body .step-summary-text{color:#E8ECF1; font-size:13.5px;}
html body .step-summary-change{
  color:#E10600; border:1px solid rgba(225,6,0,.4); border-radius:20px;
  padding:4px 9px; text-decoration:none;
}

/* The 18+ gate matches the condensed consent rows: small box, one line.
   (.age-gate is Send a Smack's boxed variant; the checkbox itself shrinks
   everywhere.) */
html body .age-gate{
  align-items:center; gap:9px; font-size:12.5px; line-height:1.45;
  padding:10px 13px;
}
html body .age-gate input[type=checkbox]{width:15px; height:15px;}

/* ---------------------------------------------------------------------
   8. DARK FIELDS
   The pages shipped with white input boxes on the black card - a
   deliberate call at the time (a borderless white box reads as "type
   here" fastest). Overruled 13 Aug 2026: the approved Fight Poster
   design has dark inset fields with a red focus ring, and the white
   boxes were the loudest thing left not matching it.

   The :not() form is deliberate - Game Day's inputs carry no type
   attribute at all, so input[type=text] misses them.
   --------------------------------------------------------------------- */
html body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
html body textarea,
html body select{
  background:linear-gradient(180deg,#0c0c0e,#141418);
  border:1px solid #3a3a42;
  color:#F5F5F3;
  border-radius:9px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.85);
}
html body input::placeholder,
html body textarea::placeholder{color:#5f5f68;}
html body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus,
html body textarea:focus,
html body select:focus{
  outline:none;
  border-color:#E10600;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7),
             0 0 0 3px rgba(255,30,45,.16),
             0 0 16px rgba(255,30,45,.4);
}
/* Silver page: the focus ring matches its frame. */
html body .fp-silver input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus,
html body .fp-silver textarea:focus{
  border-color:#D9DFE7;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7),
             0 0 0 3px rgba(195,202,211,.16),
             0 0 16px rgba(217,223,231,.45);
}

/* ---------------------------------------------------------------------
   9. AUTO-SMACK COLLAPSED STEPS = SEND A SMACK'S
   Each Auto-Smack step is its own card, and a completed one kept the
   whole card shell - dark red box, 2px frame, drop shadow, its STEP
   label and aside still showing - around one line of summary. Stacked
   up, that was three tall red boxes of dead air (Andy, 13 Aug 2026).

   Collapsed now means collapsed: the shell disappears entirely and the
   amber summary row IS the step, exactly like the other generator. The
   card's own .collapsed rules (maroon background, hover, padding) are
   out-specificity'd here rather than edited, so the open state keeps
   David's card styling untouched.
   --------------------------------------------------------------------- */
html body #lnlConsole .card.collapsed{
  background:none;
  border:none;
  box-shadow:none;
  padding:0;
  margin:0 0 10px;
  animation:none;
}
html body #lnlConsole .card.collapsed:hover{background:none;}
html body #lnlConsole .card.collapsed .step-label,
html body #lnlConsole .card.collapsed h3,
html body #lnlConsole .card.collapsed .heading-aside,
html body #lnlConsole .card.collapsed .card-sub{display:none;}

/* The summary row itself, matching .sas-summary piece for piece:
   tick, STEP label over the text, CHANGE pill on the right. */
html body .step-summary{
  display:flex; align-items:center; gap:11px;
}
html body .fp-sum-tick{
  width:18px; height:18px; border-radius:50%; flex:0 0 auto;
  border:1.5px solid #E10600; color:#E10600;
  font-size:11px; display:grid; place-items:center;
}
html body .fp-sum-body{flex:1; min-width:0;}
html body .fp-sum-label{
  display:block; font-family:'JetBrains Mono',monospace; font-size:9px;
  letter-spacing:1.5px; text-transform:uppercase; color:#E10600;
}
html body .step-summary-text{
  display:block; font-size:13.5px; font-weight:600; color:#E8ECF1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* =========================================================================
   NO STATIC GLOW — companion to the block in smackagram.css
   (David, 24 Aug 2026)
   This sheet loads AFTER smackagram.css on the generator pages, so the
   removals there lose to anything here on equal specificity. Repeated at
   the end of this file so the result does not depend on load order.
   Same rule as before: a glow stays only if it says which box or field is
   ACTIVE. Focus rings, .selected/.active/[aria-pressed] states and the
   status lamps (.console-led, .lnl-led, .stoday-dot, .live-dot) are all
   untouched.
   ========================================================================= */
html body #wizardCard,
html body #lnlConsole,
html body #lockedShell,
html body .fp-frame,
html body .card.fp-frame{
  box-shadow:none !important;
  animation:none !important;
}
html body .fp-belt:not(:hover):not(:focus-visible),
html body .stype-belt:not(:hover):not(:focus-visible),
html body .gd-play:not(:hover):not(:focus-visible){
  box-shadow:none !important;
}

/* FINAL PASS: round play buttons and CTA halos. Each is a static glow on
   a control that is always on screen, so by David's rule it goes; the
   button's own fill and border still make it read as pressable, and the
   :hover / :focus-visible glow is kept so it still responds to you. */
html body .fp-belt,
html body .stype-belt,
html body .gd-play,
html body .home-mini-play,
html body .fwp-play,
html body .fwc-play,
html body .fwc-thumb,
html body .m-audio-btn,
html body .faq-bottom-cta,
html body .red-cta{
  box-shadow:none !important;
}
html body .fp-belt:hover, html body .stype-belt:hover, html body .gd-play:hover,
html body .home-mini-play:hover, html body .fwp-play:hover, html body .fwc-play:hover,
html body .m-audio-btn:hover, html body .red-cta:hover,
html body .fp-belt:focus-visible, html body .stype-belt:focus-visible,
html body .m-audio-btn:focus-visible, html body .red-cta:focus-visible{
  /* left to each page's own :hover rule - interaction feedback stays */
}