/* ==========================================================================
   FILE        assets/edgelit-backlit.css
   UPLOAD TO   public_html/assets/edgelit-backlit.css
   WHAT IT IS  The backlit look for every customer page (spec 003, FR-13, FR-14, FR-17, FR-21, FR-22,
               FR-25): the style of the CV review's "Assessed by three models" panel (Jace's picture of
               25 October; app/cv/assets/scores.css, the .ats-g rules), restated for the site's own pages,
               because that sheet is AES's and fenced to the CV app.
                 .bl-panel   a navy grid panel in a lit red hairline frame, as the review's; its white edge
                             and spark come from edgelit-edge.js (a canvas.bl-edge), and without
                             JavaScript a plain white edge stands in for them;
                 .bl-card    a section lit from behind in its colour: .bl-blue (what EdgelitCV does),
                             .bl-green (what is traced and kept; sign-in and security), .bl-orange (scores
                             and prices; the Profile Updater), .bl-gold (the offers), .bl-cool (details
                             and emails), .bl-red (delete), .bl-pale (the orbitals);
                 .bl-label   the label above a heading: bold Orbitron, a step larger, white, lit in its
                             card's colour (RFC-0001 answers 19 and 25);
                 .bl-grid    cards two to a row, one on a phone.
               Small faint text is larger and sharper inside a panel. The sweep crosses the panel only
               (FR-14) and stands still for reduced motion (NFR-3). Every colour of text here is checked at
               WCAG AA on its card (tests/t_r19.py).
               Loaded after edgelit.css (and edgelit-account.css where a page has it).
   VERSION     R26  (2026-10-27)
   CHANGES     R26: the mouseover atom's canvas left out of the rule that makes a card's children relative, so it
               no longer takes room at the top of a price card once the mouse has passed over it (Jace's picture
               of 27 October: the cards 882 px tall with the words pushed to the foot).
               R19: new.
   ========================================================================== */

/* The grid ground of the review panel behind the whole page. */
html body{background-color:#0A1220;background-image:
  linear-gradient(rgba(120,150,200,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(120,150,200,.07) 1px,transparent 1px);
  background-size:44px 44px,44px 44px}

/* ---------------- the panel ---------------- */
html body .bl-panel{position:relative;border-radius:14px;padding:clamp(20px,3.2vw,40px) clamp(16px,3vw,40px);
  border:2px solid #D2222B;
  box-shadow:0 0 0 1px rgba(210,34,43,.25),0 0 28px rgba(210,34,43,.30),inset 0 0 22px rgba(210,34,43,.10);
  background:
    linear-gradient(rgba(120,150,200,.06) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg,rgba(120,150,200,.06) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(180deg,rgba(5,12,21,.86),rgba(8,19,33,.92));
  display:flex;flex-direction:column;gap:20px}
html body .bl-panel > *{position:relative}
/* The edge light's canvas (edgelit-edge.js), reaching 24 px past the panel all round. */
html body .bl-panel > canvas.bl-edge{position:absolute;left:-24px;top:-24px;pointer-events:none;z-index:3}
/* Without JavaScript: the white edge along the top from a third of the way across, round the corner. */
html body .bl-panel:not(.js-edge)::after{content:"";position:absolute;top:-2px;left:32%;right:-2px;height:46%;pointer-events:none;
  border-top:3px solid #F2F7FF;border-right:3px solid #F2F7FF;border-top-right-radius:14px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 18%);mask:linear-gradient(90deg,transparent,#000 18%);
  filter:drop-shadow(0 0 6px #A9D2FF)}
/* The slow sweep, across the panel only (FR-14). */
html body .bl-panel > .sweep{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:0}
html body .bl-panel > .sweep::before{content:"";position:absolute;top:0;bottom:0;left:0;width:36%;
  background:linear-gradient(90deg,transparent,rgba(220,232,255,.08),transparent);animation:sweep 5.2s cubic-bezier(.45,0,.25,1) infinite}
@media (prefers-reduced-motion:reduce){html body .bl-panel > .sweep::before{animation:none;opacity:0}}

/* Headings and words inside a panel: the review's ink and steel, the faint text larger and sharper. */
html body .bl-panel h1,html body .bl-panel h2,html body .bl-panel h3{color:#F2F7FD}
html body .bl-panel p,html body .bl-panel li{color:#D3DDEE}
html body .bl-panel .fine,html body .bl-panel .small,html body .bl-panel small{font-size:max(.95rem,15px);color:#C9D8E8}
html body .bl-panel a:not(.btn){color:#BFD8FF}

/* ---------------- the cards ---------------- */
html body .bl-card{position:relative;border-radius:12px;padding:20px 22px 20px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(var(--glow),.20),transparent 58%),
    radial-gradient(90% 80% at 100% 100%,rgba(var(--glow),.10),transparent 60%),
    linear-gradient(180deg,#0C1A2C,#081321);
  border:1px solid rgba(var(--glow),.45);
  box-shadow:0 0 0 1px rgba(var(--glow),.10),0 18px 38px rgba(0,0,0,.38),0 0 44px rgba(var(--glow),.16),inset 0 1px 0 rgba(255,255,255,.04)}
/* The backlight itself: a soft wash of the card's colour from below. */
html body .bl-card::before{content:"";position:absolute;inset:auto -20% -60% -20%;height:90%;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 0%,rgba(var(--glow),.16),transparent 70%);filter:blur(6px)}
/* R26: not the mouseover atom's canvas (aes-atom.js puts one at the start of every a.card and .btn it halos; aes-atom.css
   sets it absolute, and this rule outranked that, so on the price cards the canvas took 227 px of room at the top). */
html body .bl-card > *:not(.aes-atom-cv){position:relative}
html body .bl-blue{--glow:91,108,255;--lit:#B9C2FF}
html body .bl-green{--glow:47,210,126;--lit:#9CF0C3}
html body .bl-orange{--glow:255,138,43;--lit:#FFC48C}
html body .bl-gold{--glow:255,196,64;--lit:#FFE29A}
html body .bl-cool{--glow:169,210,255;--lit:#DCEBFF}
html body .bl-red{--glow:229,56,59;--lit:#FFC2C5}
html body .bl-pale{--glow:140,190,255;--lit:#CFE3FF}

/* The label above a heading: bold Orbitron, a step larger, white, lit in the card's colour. */
html body .bl-label,html body .bl-panel .eyebrow,html body .bl-card .eyebrow{display:block;font:800 .92rem/1.3 var(--f-head);letter-spacing:.12em;
  text-transform:uppercase;color:#FFFFFF;text-shadow:0 0 10px rgba(var(--glow,169,210,255),.75),0 1px 0 rgba(0,0,0,.6)}
/* A figure in a card glows in the card's colour, as the review's scores do. */
html body .bl-card .bl-figure{font-family:var(--f-display);color:var(--lit);text-shadow:0 0 14px rgba(var(--glow),.65),0 0 30px rgba(var(--glow),.3)}

/* A card's own buttons take its colour; the sign-in providers' buttons keep their own brands' styles. */
html body .bl-card .btn:not(.brand-btn){background:rgba(var(--glow),.16);color:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(var(--glow),.85),0 0 16px rgba(var(--glow),.3)}
html body .bl-card .btn:not(.brand-btn):hover{background:rgba(var(--glow),.32)}
html body .bl-card .btn.ghost:not(.brand-btn){background:transparent;color:var(--lit)}
html body .bl-card .btn.danger{color:#FFC2C5}

/* Cards two to a row on a computer; one to a row on a phone (FR-22). */
html body .bl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
html body .bl-grid > .bl-wide{grid-column:1 / -1}
@media (max-width:860px){html body .bl-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------------- the home page's sections (the approved option D pictures) ---------------- */
/* The three figures under "Why you heard nothing back", the four steps, the price levels, the LinkedIn rewrite
   and "Changing your mind" as backlit cards; each price glows in its level's colour (FR-16 keeps the words). */
html body.home .stats li.bl-card,html body.home .steps li.bl-card{padding:20px 22px}
html body.home .tier.card.bl-card{display:flex;flex-direction:column;gap:10px}
html body.home .tier.card.bl-card .eyebrow{font-size:1.15rem}
html body.home .tier.card.bl-card .amount > span:first-child,html body.home .stats li.bl-card b{font-family:var(--f-display);color:var(--lit);
  text-shadow:0 0 14px rgba(var(--glow),.65),0 0 30px rgba(var(--glow),.3)}
html body.home .tier.card.bl-card .pack{background:rgba(var(--glow),.08);border-color:rgba(var(--glow),.35)}
html body.home .lit.bl-card{background:
    radial-gradient(120% 90% at 0% 0%,rgba(var(--glow),.20),transparent 58%),
    radial-gradient(90% 80% at 100% 100%,rgba(var(--glow),.10),transparent 60%),
    linear-gradient(180deg,#0C1A2C,#081321)}

/* ---------------- words inside a card ---------------- */
html body .bl-card{display:flex;flex-direction:column;gap:10px}
html body .bl-card h1{margin:0}
html body .bl-card h2{margin:0;font-size:clamp(1.15rem,1.05rem + .4vw,1.35rem)}
html body .bl-card p{margin:0;max-width:72ch}
html body .bl-card ul,html body .bl-card ol{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:7px}
html body .bl-card .meta{font-size:.95rem;color:#C9D8E8}
html body .bl-head h1{font-size:clamp(1.7rem,1.2rem + 1.8vw,2.6rem)}