/* Afterglow layer for the Lightfoot customer panel (panel.lightfoot.cloud).
   This file loads after panel.css and only adds or overrides styles. It carries the same system as
   staticmain !7 and the Discord landing page: the Afterglow tokens, self-hosted Sora (SIL OFL 1.1,
   see fonts/OFL-Sora.txt), glass cards, gradient pill buttons, a teal focus ring, gradient text only
   under @supports, and reduced motion. It is CSP-safe: every asset is same-origin; no imports or inline URIs. */
@font-face{font-family:"Sora";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/sora-latin.woff2") format("woff2")}

body.ag{
  --ag-bg:#0b0816; --ag-ink:#f4f1ff; --ag-mute:#bdb6d9; --ag-body:#d6d1e8;
  --ag-v:#a78bfa; --ag-p:#f472b6; --ag-c:#5eead4; --ag-err:#fda4af;
  --ag-card:rgba(255,255,255,.05); --ag-card-2:rgba(255,255,255,.08); --ag-line:rgba(255,255,255,.12);
  /* re-point the panel.css tokens so every existing rule picks up the palette */
  --night:var(--ag-bg); --fog:var(--ag-ink); --quiet:var(--ag-mute); --iris:var(--ag-v); --signal:var(--ag-c); --ember:var(--ag-err);
  --hair:var(--ag-line); --hair-strong:rgba(167,139,250,.45); --radius:18px;
  --display:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--ag-bg); color:var(--ag-ink); font-family:var(--serif); overflow-x:clip;
}
body.ag ::selection{background:rgba(244,114,182,.35);color:#fff}

/* Ambient gradient mesh (decorative, CSS-only) */
body.ag::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;filter:blur(80px);opacity:.4;
  background:radial-gradient(35% 35% at 20% 25%,#6d28d9 0,transparent 70%),radial-gradient(30% 30% at 80% 20%,#db2777 0,transparent 70%),radial-gradient(35% 35% at 60% 85%,#0e7490 0,transparent 70%)}
@media (prefers-reduced-motion:no-preference){body.ag::before{animation:ag-drift 24s ease-in-out infinite alternate}}
@keyframes ag-drift{to{transform:translate3d(4%,-3%,0) rotate(8deg)}}

/* Focus: 3px teal ring everywhere, including inputs */
body.ag :focus-visible{outline:3px solid var(--ag-c);outline-offset:3px}
body.ag :is(input,select,textarea):focus{border-color:var(--ag-v);box-shadow:0 0 0 3px rgba(94,234,212,.45)}
body.ag a{color:var(--ag-ink);text-decoration-color:rgba(167,139,250,.7)}
body.ag a:hover{color:var(--ag-c)}

/* Type */
body.ag :is(h1,h2){letter-spacing:-.035em}
body.ag .eyebrow{display:inline-block;padding:.3rem .75rem;border:1px solid var(--ag-line);border-radius:999px;background:var(--ag-card);color:var(--ag-mute);font-size:.68rem}
body.ag .lede,body.ag .solo .lede{color:var(--ag-body)}

/* Brand mark + top bar */
body.ag .mark,body.ag .topbar .mark{color:var(--ag-ink);text-shadow:none}
body.ag .topbar{background:rgba(11,8,22,.72);border-bottom-color:var(--ag-line);backdrop-filter:blur(16px)}
body.ag .topbar a{color:var(--ag-mute);border-radius:8px}
body.ag .topbar a:hover,body.ag .topbar a[aria-current="page"]{color:var(--ag-ink)}
body.ag .topbar a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--ag-p)}

/* App rail */
body.ag .rail{background:rgba(11,8,22,.66);border-color:var(--ag-line);backdrop-filter:blur(16px)}
body.ag .rail-nav a{color:var(--ag-mute)}
body.ag .rail-nav a:hover{background:var(--ag-card-2);color:var(--ag-ink)}
body.ag .rail-nav a[aria-current="page"]{color:var(--ag-ink);background:linear-gradient(90deg,rgba(167,139,250,.22),rgba(244,114,182,.12));box-shadow:inset 2px 0 0 var(--ag-p)}
body.ag .avatar{background:linear-gradient(135deg,var(--ag-v),var(--ag-p));color:#14061f}

/* Buttons: gradient pill primary, glass ghost */
body.ag .primary{color:#14061f;background:linear-gradient(90deg,var(--ag-v),var(--ag-p));box-shadow:0 10px 40px -12px var(--ag-p)}
body.ag .primary:hover{color:#14061f;background:linear-gradient(90deg,var(--ag-v),var(--ag-p));box-shadow:0 0 0 6px rgba(244,114,182,.18),0 18px 50px -10px var(--ag-p)}
body.ag .ghost{color:var(--ag-ink);background:var(--ag-card);border-color:var(--ag-line)}
body.ag .ghost:hover{background:var(--ag-card-2);border-color:rgba(167,139,250,.7);color:var(--ag-ink)}
body.ag .reveal{color:var(--ag-mute)}

/* Glass cards: auth card (.solo), dashboard cards, empty state, record sections */
body.ag .solo,body.ag .card,body.ag .record > section{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));border:1px solid var(--ag-line);border-radius:22px;backdrop-filter:blur(14px);
  box-shadow:0 30px 90px -40px rgba(167,139,250,.55),inset 0 1px 0 rgba(255,255,255,.06)}
body.ag .record > section{padding:1.3rem 1.4rem}
body.ag .cards .site-row.card:hover{border-color:rgba(244,114,182,.5);background:var(--ag-card-2);box-shadow:0 20px 60px -30px var(--ag-p)}
body.ag .site-row.is-current{background:linear-gradient(90deg,rgba(167,139,250,.2),rgba(244,114,182,.08))}
body.ag .site-row.is-current .name{color:var(--ag-ink)}
body.ag .pill{background:rgba(94,234,212,.12);color:var(--ag-c);border-color:rgba(94,234,212,.35)}

/* Auth pages: centered glass card on the mesh */
body.ag.is-public .public-main{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 9rem);padding:2.5rem 1.1rem}
body.ag .auth-card{width:100%;max-width:28rem;padding:2.4rem 2.2rem 2rem;border-radius:28px;
  background:linear-gradient(160deg,rgba(167,139,250,.16),rgba(255,255,255,.04) 45%,rgba(94,234,212,.05));
  box-shadow:0 40px 120px -40px rgba(167,139,250,.7),inset 0 1px 0 rgba(255,255,255,.08)}
body.ag .auth-card h1{font-size:clamp(2rem,6vw,2.6rem);font-weight:800;color:var(--ag-ink)}
body.ag .solo.prose{max-width:46rem}
/* .stage .solo has width:100% plus a side margin, which overflowed 390px (pre-existing); keep it inside the viewport */
body.ag .stage .solo{box-sizing:border-box;width:auto;max-width:min(32rem,calc(100% - 2.2rem))}

/* Forms */
body.ag :is(input,select,textarea){background:rgba(11,8,22,.6);border-color:var(--ag-line);color:var(--ag-ink);border-radius:12px}
body.ag :is(input,select,textarea):hover{border-color:rgba(167,139,250,.55)}
body.ag .choice input{accent-color:var(--ag-p)}
body.ag label,body.ag legend{color:var(--ag-ink)}
body.ag .hint,body.ag .aside{color:var(--ag-mute)}

/* States */
body.ag .field-error{color:var(--ag-err)}
body.ag .form-error{background:rgba(253,164,175,.1);border-color:rgba(253,164,175,.45);color:#ffe4e8;border-radius:12px}
body.ag input[aria-invalid="true"]{border-color:var(--ag-err)}
body.ag input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(253,164,175,.35)}
body.ag .notice{background:rgba(94,234,212,.1);border-color:rgba(94,234,212,.4);color:var(--ag-c);border-radius:14px}
body.ag .tick.clear .dot{background:var(--ag-c);box-shadow:0 0 10px rgba(94,234,212,.6)}
body.ag .tick.not .dot{background:var(--ag-err)}

/* Footer */
body.ag .colophon{border-top-color:var(--ag-line);color:var(--ag-mute)}
body.ag .colophon a{color:var(--ag-mute)}
body.ag .colophon a:hover{color:var(--ag-ink)}
body.ag .colophon a{text-decoration-color:rgba(255,255,255,.22);text-underline-offset:3px}
body.ag .colophon a:hover{text-decoration-color:var(--ag-c)}
/* Plain message pages (error.html, the invalid-invite 404, the /admin 403): same glass card and heading as auth pages */
body.ag .solo:not(.auth-card):not(.prose) h1{font-size:clamp(1.8rem,5vw,2.3rem);font-weight:800;color:var(--ag-ink)}
body.ag .solo:not(.auth-card):not(.prose) p{color:var(--ag-body)}

/* Gradient text: solid --ag-ink fallback above; gradient only where clipping is supported */
@supports (background-clip:text) or (-webkit-background-clip:text){
  body.ag :is(.auth-card h1,.page-head h1,.record > h1,.solo:not(.prose) > h1){background:linear-gradient(90deg,var(--ag-ink),var(--ag-v) 55%,var(--ag-p));-webkit-background-clip:text;background-clip:text;color:transparent}
}

/* Status steps: keep each dot clear of its label (the dot sits at left:0 on the horizon line) */
body.ag .staff .tick{padding-left:14px}
body.ag .staff.compact .tick{padding-left:11px}
/* Site form with no sites yet: the "Sites" label is a breadcrumb for the form heading, not an empty
   sidebar. Collapse to one column and sit it directly above the h1. Browsers without :has keep the old layout. */
body.ag .sheet:has(> aside .index):not(:has(> aside .index li)){grid-template-columns:minmax(0,46rem);row-gap:.35rem}
body.ag .sheet:has(> aside .index):not(:has(> aside .index li)) > aside .index-label{margin:0}
body.ag .sheet:has(> aside .index):not(:has(> aside .index li)) > aside .index{display:none}
body.ag .sheet:has(> aside .index):not(:has(> aside .index li)) > .record > h1{margin-top:0}

@media (max-width:860px){
  body.ag .rail{backdrop-filter:blur(16px)}
  body.ag .rail-nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--ag-p)}
}
@media (max-width:560px){
  body.ag.is-public .public-main{justify-content:flex-start;padding:1.4rem 1rem 2.4rem;min-height:0}
  body.ag .auth-card{padding:1.8rem 1.3rem 1.6rem;border-radius:22px}
}
@media (prefers-reduced-motion:reduce){
  body.ag::before{animation:none}
  body.ag .primary,body.ag .cards .site-row.card{transition:none}
}

/* Sora runs wider than Syne: keep the compact status labels on dashboard cards from colliding */
body.ag .staff.compact{font-size:.72rem;letter-spacing:-.01em}
body.ag .staff.compact .tick{min-width:0}
/* Step labels never break mid-word: each column is at least as wide as its label; state text still wraps between words */
body.ag .staff{grid-template-columns:repeat(4,minmax(min-content,1fr))}
body.ag .staff .tick .label{white-space:nowrap;word-break:normal;overflow-wrap:normal}
body.ag .staff.compact{font-size:.7rem;letter-spacing:-.015em;gap:.3rem}
/* Phones: the full status steps on a site page go to two rows of two, each step carrying its own piece of the line */
@media (max-width:560px){
  body.ag .staff:not(.compact){grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.1rem;padding-top:0}
  body.ag .staff:not(.compact)::before{display:none}
  body.ag .staff:not(.compact) .tick{border-top:1px solid rgba(236,232,245,.48);padding-top:.9rem}
}