/* RC Greenlight — racing skin for the app pages (rev203, owner 2026-10-06).
   Linked LAST on dashboard.html (coach), owner.html, portal.html (player), review.html and offline.html,
   so it changes shape, type and line only — never a colour. Score, stress, pass/go and every coach-theme
   colour come through untouched, because those carry meaning, not branding.
   Language (owner's favourites from the report mocks): italic display, squarer boxes, dashed/striped
   lines, round buttons → slanted blocks, a kerb under the bar, five lights in the logo. */

:root{--rc-skew:-12deg;--rc-race:'Archivo',sans-serif;}

/* ---------- Buttons: every pill becomes a slanted block. The whole button is skewed (so a border
   survives, which a clip-path would cut); the upright wide face reads as italic once skewed. ---------- */
.btn,.roleswitch,.tag,.pill,.uflag,.age,.tch-opt,.pv-seg,.pv-dg,.pv-st,.ovr-term,.alert .abtn,
.phead .acct .plan,.phead .acct .hdrbuy,.cblink,.upopt .ribbon,.upmini .umsave,.toast,
.coachbar .pendtag,.addcoach .pendtag,td .touchbtn,.codepill button,.mini.refcode .racts button{
  border-radius:0!important;transform:skewX(var(--rc-skew));}
.roleswitch button,.pv-seg button,.phead .acct .hdrbuy .amt{border-radius:0!important;}
.btn,.roleswitch button,.alert .abtn,.phead .acct .hdrbuy,.upmini .umsave,.cblink,.pv-seg button,
td .touchbtn,.codepill button,.mini.refcode .racts button{
  font-family:var(--rc-race)!important;font-stretch:118%;font-weight:800!important;text-transform:uppercase;letter-spacing:.04em!important;}
.btn{position:relative;overflow:hidden;}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transition:left .45s ease;}
.btn:hover::after{left:120%;}
.btn:active,.alert .abtn:active,.cblink:active{transform:skewX(var(--rc-skew)) scale(.97)!important;}
.tag,.pill,.uflag,.age,.pv-dg,.pv-st,.ovr-term,.upopt .ribbon,.coachbar .pendtag,.addcoach .pendtag{
  font-style:normal;letter-spacing:.06em;}
.toast{font-family:var(--rc-race);font-stretch:112%;font-weight:700;}

/* ---------- Racing type: italic, wide, heavy on every display line and big number. ---------- */
.head h1,.phead h1,.login h1,.panel-h h2,.mini h3,.modal-h h3,.ovr-h,.rcard h3,.addcoach h3,.upcard h3,
.pv-mirror h4,.gs-h,.acctcard .acctname,.upbar .ub-h,
.tile .tv,.earn,.mini.income .mv,.legrow .v,.convrow .cv,.pnl .pr .pv,.pv-tv,.pv-bv,.pv-bn,.gr-tot b,
.gsval,.gs-cval,.gt-val,.upopt .uoamt,.upmini .umamt,.rcard.held .hn-h{
  font-family:var(--rc-race)!important;font-style:italic!important;font-stretch:116%;font-weight:900!important;letter-spacing:-.025em!important;}
.head h1,.phead h1,.login h1{text-transform:uppercase;font-stretch:120%;}

/* ---------- Catch-alls (rev203 verifier): any heading or button the named-class lists above miss —
   the owner lock screen, bare <h2> panels, the phone-guide tabs — still gets the racing treatment.
   Checkbox/radio/toggle knobs keep their round shape (they are controls, not buttons). ---------- */
h1,h2,h3{font-style:italic!important;font-stretch:116%;font-weight:900;letter-spacing:-.025em;}
button:not(.mnav-btn):not(.mnav-close):not([role="switch"]):not(.ab-knob):not(.pw-toggle):not([class*="eye"]){border-radius:0!important;}
button[type="submit"],form button:not([type="button"]),#rcgl-app-card button,.lock button,[data-tab],
.view button:not(.rcgl-pw-eye):not(.mnav-btn):not([role="switch"]):not(.ab-knob){
  transform:skewX(var(--rc-skew));font-family:var(--rc-race)!important;font-stretch:118%;font-weight:800!important;text-transform:uppercase;letter-spacing:.04em!important;}
#rcgl-app-card [data-tab],#rcgl-app-card a[class]{border-radius:0!important;}
/* ---------- NOTHING ROUNDED (owner 2026-10-06, rev208). Every corner on these pages is square — boxes,
   inputs, tags, dots, icons, inline-styled cards. Only the native checkbox/radio and the round start
   lights in the logo keep their shape. ---------- */
*:not(input[type="checkbox"]):not(input[type="radio"]):not(.rcgl-lights i),*::before,*::after{border-radius:0!important;}

/* ---------- SLANTED BOXES (rev208). Each card is cut to a parallelogram that leans the same way as the
   buttons. A clip-path would erase the border on the two slanted sides, so those two edges are
   redrawn as 1px diagonal lines: a corner-to-corner gradient in a strip --rc-cut wide at each side
   lands exactly on the cut line whatever the box's height. Background IMAGES on these boxes give way
   to the edge lines; background colours (white, pine, any coach theme) are untouched. ---------- */
:root{--rc-cut:12px;}
.tile,.panel,.mini,.profilecard,.pv-wrap,.modal,.login,.rcard,.addcoach,.upcard,.upopt,.upmini,.acctcard,
.coachbar,.upbar,.msg,#rcgl-app-card > div,#rcgl-app-guide > details,#brand-studio-overlay > div,
.view > div > div[style*="border-radius"],.view > div[style*="border-radius"]{
  clip-path:polygon(var(--rc-cut) 0,100% 0,calc(100% - var(--rc-cut)) 100%,0 100%);
  background-image:
    linear-gradient(to bottom right,transparent calc(50% - .2px),var(--border,rgba(16,25,20,.16)) calc(50% - .2px),var(--border,rgba(16,25,20,.16)) calc(50% + 1.2px),transparent calc(50% + 1.2px)),
    linear-gradient(to bottom right,transparent calc(50% - 1.2px),var(--border,rgba(16,25,20,.16)) calc(50% - 1.2px),var(--border,rgba(16,25,20,.16)) calc(50% + .2px),transparent calc(50% + .2px))!important;
  background-size:var(--rc-cut) 100%,var(--rc-cut) 100%!important;
  background-position:left top,right top!important;
  background-repeat:no-repeat!important;
  background-origin:border-box!important;}
/* Small square bits (status dots, step numbers) lean with everything else. */
.alert .ai,#rcgl-app-guide li > span:first-child{transform:skewX(var(--rc-skew));}
.umeter .ubar span{clip-path:polygon(0 0,100% 0,calc(100% - 4px) 100%,0 100%);}
/* A lime start strip on the top edge of the big panels, like a timing-screen header. */
.panel,.modal,.rcard,.upcard,.acctcard{box-shadow:inset 0 3px 0 var(--lime-500,#B4EA32);}

/* ---------- Dashed and striped lines. ---------- */
.panel-h{border-bottom-style:dashed!important;}
.view td,.view th{border-bottom-style:dashed!important;}
.legrow,.convrow,.pnl .pr{border-bottom-style:dashed!important;}

/* ---------- The bar: a kerb along its bottom edge (background-image only, so the bar keeps its own
   colour and any coach theme on it). ---------- */
.bar,.phead{background-image:repeating-linear-gradient(-60deg,var(--lime-500,#B4EA32) 0 10px,transparent 10px 20px)!important;
  background-size:100% 4px!important;background-position:left bottom!important;background-repeat:no-repeat!important;}

/* ---------- Logo lights run the start once when the app opens (the static fifth-lit state is the
   end frame, so a reduced-motion user simply sees it lit). ---------- */
.rcgl-lights i{animation:1.9s steps(1,end) 1 both;}
.rcgl-lights i:nth-child(1){animation-name:rcglL1;}.rcgl-lights i:nth-child(2){animation-name:rcglL2;}
.rcgl-lights i:nth-child(3){animation-name:rcglL3;}.rcgl-lights i:nth-child(4){animation-name:rcglL4;}
.rcgl-lights i:nth-child(5){animation-name:rcglL5;}
@keyframes rcglL1{0%{opacity:.2}10%,74%{opacity:1;background:#D8503E;box-shadow:0 0 6px rgba(216,80,62,.85)}75%,100%{opacity:.2;box-shadow:none}}
@keyframes rcglL2{0%,24%{opacity:.2}25%,74%{opacity:1;background:#D8503E;box-shadow:0 0 6px rgba(216,80,62,.85)}75%,100%{opacity:.2;box-shadow:none}}
@keyframes rcglL3{0%,39%{opacity:.2}40%,74%{opacity:1;background:#D8503E;box-shadow:0 0 6px rgba(216,80,62,.85)}75%,100%{opacity:.2;box-shadow:none}}
@keyframes rcglL4{0%,54%{opacity:.2}55%,74%{opacity:1;background:#D8503E;box-shadow:0 0 6px rgba(216,80,62,.85)}75%,100%{opacity:.2;box-shadow:none}}
@keyframes rcglL5{0%,59%{opacity:.2;background:currentColor;box-shadow:none}60%,74%{opacity:1;background:#D8503E;box-shadow:0 0 6px rgba(216,80,62,.85)}75%,84%{opacity:.2;background:currentColor;box-shadow:none}85%,100%{opacity:1;background:#B4EA32;box-shadow:0 0 6px rgba(180,234,50,.85)}}

@media(prefers-reduced-motion:reduce){.rcgl-lights i{animation:none!important;}.btn::after{display:none;}}