/* ============================================================
   AMH PUBLIC PICK CARD — Glass Dossier (perfected)
   CSS ONLY. Markup / class names unchanged.
   Dark galactic · green-neon + gold · glassy blur · thin borders
   ============================================================ */

/* Per-card posture glow — defaults to neutral cool.
   Scoped to .card (not just .pass) so it always applies,
   and recolors via :has() on the tag variant inside. */
.card,
.card.pass{
  --glow:  rgba(120,140,180,.16);
  --glow2: rgba(120,140,180,.05);
}
.card:has(.tag.esc),
.card.pass:has(.tag.esc){   --glow:rgba(62,242,162,.32); }
.card:has(.tag.watch),
.card.pass:has(.tag.watch){ --glow:rgba(232,192,0,.32); }
.card:has(.tag.spec),
.card.pass:has(.tag.spec){  --glow:rgba(239,106,95,.32); }

/* ---- Card shell: frosted galactic glass panel ---- */
.card,
.card.pass{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:0;
  min-width:0;                 /* never blow out the grid track */
  padding:18px 18px 16px;
  border-radius:18px;
  text-decoration:none;
  color:var(--ink);
  isolation:isolate;
  overflow:hidden;

  background:
    linear-gradient(160deg, rgba(28,33,46,.78), rgba(12,15,22,.82)),
    var(--card);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  backdrop-filter:blur(18px) saturate(135%);
  border:1px solid var(--line);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 18px 40px -22px rgba(0,0,0,.85),
    0 0 0 .5px rgba(255,255,255,.02);
  transition:
    transform .28s cubic-bezier(.2,.7,.25,1),
    border-color .28s ease,
    box-shadow .28s ease;
}

/* Posture-tinted corner glow + top sheen */
.card::before,
.card.pass::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:
    radial-gradient(120% 80% at 88% -10%, var(--glow), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 22%);
  opacity:.9;
  transition:opacity .28s ease;
  pointer-events:none;
}

/* Thin luminous masked edge-highlight */
.card::after,
.card.pass::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(150deg, var(--glow), transparent 42%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  opacity:.5;
  transition:opacity .28s ease;
  pointer-events:none;
}

/* ---- Hover: lift + brighten + intensify glow ---- */
.card:hover,
.card.pass:hover{
  transform:translateY(-4px);
  border-color:rgba(150,170,210,.32);
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 30px 60px -26px rgba(0,0,0,.9),
    0 0 32px -10px var(--glow);
}
.card:hover::before,
.card.pass:hover::before{ opacity:1; }
.card:hover::after,
.card.pass:hover::after{ opacity:.95; }

.card:focus-visible,
.card.pass:focus-visible{
  outline:none;
  border-color:var(--mint);
  box-shadow:0 0 0 2px rgba(143,255,224,.35), 0 30px 60px -26px rgba(0,0,0,.9);
}

/* ---- Symbol + price row ---- */
.card .sym,
.card.pass .sym{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}
.card .sym>span:first-child,
.card.pass .sym>span:first-child{
  font-weight:800;
  letter-spacing:.06em;
  font-size:.86rem;
  color:var(--mint);
  text-shadow:0 0 14px rgba(143,255,224,.25);
  white-space:nowrap;
}
.card .px,
.card.pass .px{
  font-size:.78rem;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.card .px span,
.card.pass .px span{ font-weight:700; }

/* ---- Name + sector ---- */
.card .nm,
.card.pass .nm{
  margin-top:10px;
  font-size:1.18rem;
  font-weight:750;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--ink);
  overflow-wrap:anywhere;      /* long names wrap, never overflow */
}
.card .sec,
.card.pass .sec{
  margin-top:3px;
  font-size:.74rem;
  font-weight:500;
  color:var(--mut);
  letter-spacing:.01em;
}

/* Hairline divider before tags */
.card .tagrow,
.card.pass .tagrow{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}

/* ---- Glowing posture chips ---- */
.card .tag,
.card.pass .tag{
  display:inline-flex;
  align-items:center;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:5px 10px;
  border-radius:999px;
  color:var(--mut);
  background:rgba(120,140,180,.10);
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  white-space:nowrap;
}
.card .tag.esc,
.card.pass .tag.esc{
  color:#04130c;
  background:linear-gradient(180deg, var(--green), #21c98a);
  border-color:rgba(62,242,162,.55);
  box-shadow:0 0 16px -3px rgba(62,242,162,.55);
  text-shadow:none;
}
.card .tag.watch,
.card.pass .tag.watch{
  color:#1a1500;
  background:linear-gradient(180deg, var(--gold2), var(--gold));
  border-color:rgba(242,210,74,.6);
  box-shadow:0 0 16px -3px rgba(232,192,0,.5);
}
.card .tag.spec,
.card.pass .tag.spec{
  color:#fff;
  background:linear-gradient(180deg, #ff7d72, var(--down));
  border-color:rgba(239,106,95,.6);
  box-shadow:0 0 16px -3px rgba(239,106,95,.5);
}

/* ---- HERO: thick glowing gold return ---- */
.card .ret,
.card.pass .ret{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
  font-size:2.6rem;
  font-weight:900;
  line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--gold2);                       /* solid fallback */
  background:linear-gradient(180deg, var(--gold2), var(--gold) 70%, #b89400);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 18px rgba(232,192,0,.30));
}
.card .ret span,
.card.pass .ret span{
  -webkit-text-fill-color:initial;
  background:none;
  filter:none;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--mut);
}

/* ---- Verdict ---- */
.card .verdict,
.card.pass .verdict{
  margin-top:12px;
  font-size:.82rem;
  line-height:1.5;
  color:#c3ccdd;
}

/* ---- Copynote: utility row, reveal on hover/focus ---- */
.card .copynote,
.card.pass .copynote{
  margin-top:0;
  font-size:.68rem;
  color:var(--mut);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:0;
  max-height:0;
  cursor:copy;
  transition:opacity .25s ease, max-height .25s ease, margin .25s ease;
}
.card:hover .copynote,
.card:focus-within .copynote,
.card.pass:hover .copynote,
.card.pass:focus-within .copynote{
  opacity:.85;
  max-height:2.4em;
  margin-top:12px;
}

/* ---- Fallbacks & motion safety ---- */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .card .ret, .card.pass .ret{
    color:var(--gold2);
    -webkit-text-fill-color:var(--gold2);
  }
}
@media (prefers-reduced-motion:reduce){
  .card, .card.pass,
  .card::before, .card.pass::before,
  .card::after, .card.pass::after,
  .card .copynote, .card.pass .copynote{ transition:none; }
  .card:hover, .card.pass:hover{ transform:none; }
}