/* ============================================================
   York's Jolly Light Installers -- shared brand layer.
   Loaded by every surface: the installer app, the sales portal,
   and any self-test page. Tokens only plus a handful of
   primitives both sides use. No layout decisions live here.
   ============================================================ */

:root{
  /* --- core palette --- */
  --navy:#0E2A47;      --navy-2:#14395E;   --navy-3:#1C4C7C;   --navy-4:#27628F;
  --green:#0F6B34;     --green-2:#17893F;  --green-3:#2AA85A;
  --red:#C1121F;       --red-2:#E03131;    --red-3:#F06565;
  --gold:#E8B44C;      --gold-2:#F7D88A;   --gold-3:#FFF0C4;
  --cream:#FFF8EC;     --snow:#F4F7FA;     --ink:#10202E;
  --grey:#5D6B79;      --line:#D8E0E8;     --card:#FFFFFF;

  /* --- crews --- */
  --c1:#16324F;        --c2:#0F6B34;       --c3:#C9A227;

  /* --- semantic --- */
  --bg:var(--snow);
  --text:var(--ink);
  --muted:var(--grey);

  /* --- bulb glow, used for the lit look everywhere --- */
  --glow-warm:0 0 10px rgba(232,180,76,.70), 0 0 28px rgba(232,180,76,.34);
  --glow-green:0 0 10px rgba(42,168,90,.62), 0 0 26px rgba(42,168,90,.30);
  --glow-red:0 0 10px rgba(224,49,49,.62),  0 0 26px rgba(224,49,49,.30);

  /* --- elevation --- */
  --shadow-1:0 1px 2px rgba(14,42,71,.08), 0 2px 8px rgba(14,42,71,.06);
  --shadow-2:0 2px 6px rgba(14,42,71,.10), 0 10px 26px rgba(14,42,71,.10);
  --shadow-3:0 10px 34px rgba(14,42,71,.22);

  /* --- shape --- */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:26px; --r-pill:999px;

  /* --- motion. Every animation references these so reduced-motion
         only has to zero them out in one place. --- */
  --t-fast:120ms; --t-med:200ms; --t-slow:340ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-pop:cubic-bezier(.34,1.46,.54,1);

  /* --- layout. The single source of truth for centring.
         Everything lives in a column that centres itself and
         stops growing on a desktop monitor. --- */
  --col:min(100%, 620px);
  --pad:16px;

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  font:17px/1.45 var(--font);
  background:var(--bg); color:var(--text);
  overscroll-behavior-y:contain;
  -webkit-font-smoothing:antialiased;
}

/* ---- the centring container. Used by both surfaces. ---- */
.col{width:var(--col);margin-inline:auto;padding-inline:var(--pad)}

/* ---- tabular money/numbers ---- */
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---- the bulb string: a 6px divider of alternating lit bulbs.
        It is the one piece of festive chrome used on every screen. ---- */
.bulbstring{
  height:7px; border:0; margin:0;
  background:
    radial-gradient(circle at 6px 50%,  var(--gold-2) 2.4px, transparent 2.8px),
    radial-gradient(circle at 18px 50%, var(--red-3)  2.4px, transparent 2.8px),
    radial-gradient(circle at 30px 50%, var(--green-3)2.4px, transparent 2.8px),
    radial-gradient(circle at 42px 50%, var(--gold-3) 2.4px, transparent 2.8px);
  background-size:48px 7px; background-repeat:repeat-x;
  filter:drop-shadow(0 0 3px rgba(232,180,76,.55));
}

/* ---- warm bulb-glow header gradient ---- */
.glowbar{
  background:
    radial-gradient(120% 180% at 50% -40%, rgba(232,180,76,.34), transparent 62%),
    linear-gradient(180deg, var(--navy-2), var(--navy));
}

/* ---- screen transition primitives.
        Christmasy but SHORT -- an installer taps these 80 times a day,
        so nothing here is allowed to cost more than a fifth of a second. ---- */
@keyframes yj-in       {from{opacity:0;transform:translate3d(0,14px,0) scale(.985)} to{opacity:1;transform:none}}
@keyframes yj-in-right {from{opacity:0;transform:translate3d(26px,0,0)}             to{opacity:1;transform:none}}
@keyframes yj-in-left  {from{opacity:0;transform:translate3d(-26px,0,0)}            to{opacity:1;transform:none}}
@keyframes yj-pop      {0%{transform:scale(.94);opacity:0} 60%{transform:scale(1.015)} 100%{transform:scale(1);opacity:1}}
@keyframes yj-twinkle  {0%,100%{opacity:.22;transform:scale(.85)} 45%{opacity:1;transform:scale(1.18)}}
@keyframes yj-glowpulse{0%,100%{box-shadow:var(--shadow-1)} 50%{box-shadow:var(--shadow-1),var(--glow-warm)}}
@keyframes yj-chase    {to{background-position:48px 0}}
@keyframes yj-fall     {from{transform:translate3d(0,-10vh,0) rotate(0)} to{transform:translate3d(0,110vh,0) rotate(220deg)}}

.anim-in      {animation:yj-in       var(--t-med)  var(--ease) both}
.anim-in-right{animation:yj-in-right var(--t-med)  var(--ease) both}
.anim-in-left {animation:yj-in-left  var(--t-med)  var(--ease) both}
.anim-pop     {animation:yj-pop      var(--t-slow) var(--ease-pop) both}
.chase        {animation:yj-chase 1.6s linear infinite}

/* staggered children, so a tile grid lands one tile at a time */
.stagger > *{animation:yj-pop var(--t-slow) var(--ease-pop) both}
.stagger > *:nth-child(1){animation-delay:0ms}
.stagger > *:nth-child(2){animation-delay:38ms}
.stagger > *:nth-child(3){animation-delay:76ms}
.stagger > *:nth-child(4){animation-delay:114ms}
.stagger > *:nth-child(5){animation-delay:152ms}
.stagger > *:nth-child(6){animation-delay:190ms}
.stagger > *:nth-child(7){animation-delay:228ms}
.stagger > *:nth-child(8){animation-delay:266ms}

@media (prefers-reduced-motion:reduce){
  :root{--t-fast:1ms;--t-med:1ms;--t-slow:1ms}
  *,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important}
  .stagger > *{animation-delay:0ms !important}
}

/* ---- buttons both surfaces share ---- */
.btn{
  -webkit-appearance:none;appearance:none;
  min-height:56px; padding:0 20px;
  font:700 17px/1.2 var(--font); color:#fff;
  background:var(--navy); border:0; border-radius:var(--r-md);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  cursor:pointer; touch-action:manipulation;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), filter var(--t-fast);
  box-shadow:var(--shadow-1);
}
.btn:active{transform:scale(.97)}
.btn-go{background:linear-gradient(180deg,var(--green-2),var(--green))}
.btn-go:active{box-shadow:var(--shadow-1),var(--glow-green)}
.btn-gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:var(--navy)}
.btn-gold:active{box-shadow:var(--shadow-1),var(--glow-warm)}
.btn-red{background:linear-gradient(180deg,var(--red-2),var(--red))}
.btn-quiet{background:var(--card);color:var(--navy);border:1px solid var(--line);box-shadow:none}
.btn:disabled{filter:grayscale(.55) opacity(.6);cursor:default}

/* ---- inputs: 17px floor, or iOS zooms the page on focus ---- */
input[type=text],input[type=tel],input[type=number],input[type=search],textarea,select{
  width:100%; padding:14px; font:17px/1.35 var(--font);
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:#fff; color:var(--text); -webkit-appearance:none;
}
input:focus-visible,textarea:focus-visible,select:focus-visible,
button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---- surfaces ---- */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-md); padding:14px; box-shadow:var(--shadow-1);
}
.paper{background:var(--cream)}

/* ---- pills ---- */
.tag{
  display:inline-flex;align-items:center;gap:5px;
  font:700 11.5px/1 var(--font);letter-spacing:.02em;text-transform:uppercase;
  border-radius:var(--r-pill);padding:5px 10px;color:#fff;white-space:nowrap;
}

/* ---- scrollers ---- */
.xscroll{
  display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding-bottom:4px;
}
.xscroll::-webkit-scrollbar{display:none}
.xscroll > *{scroll-snap-align:start;flex:none}

/* ---- safe areas ---- */
.safe-t{padding-top:calc(12px + env(safe-area-inset-top))}
.safe-b{padding-bottom:calc(24px + env(safe-area-inset-bottom))}

/* ---- desktop. The column stops growing and everything stays centred,
        but controls get BIGGER rather than stretching into a wide band. ---- */
@media (min-width:700px){
  :root{--col:min(100%, 680px); --pad:24px}
  body{font-size:18px}
  .btn{min-height:60px;font-size:18px}
}
@media (min-width:1100px){
  :root{--col:min(100%, 760px)}
}