/* ============================================================
   D8NYT design system  (see docs/STYLEGUIDE.md)
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap");

:root{
  /* surfaces */
  --bg:#faf7f6; --surface:#ffffff; --surface-2:#f4f0ef; --dark:#1a1620;
  /* ink */
  --ink:#1a1620; --muted:#6b6472; --faint:#9a94a2; --faint-2:#b3adb8;
  /* lines */
  --hair:rgba(26,22,32,0.08); --hair-2:rgba(26,22,32,0.14);
  /* brand */
  --pink:#e9376a; --pink-deep:#c22453; --pink-bright:#ff4a7d; --pink-soft:#fff0f4;
  --pink-glow:rgba(233,55,106,0.16);
  /* semantic */
  --ok:#1f7a52; --ok-bg:#e2f6ea; --amber:#ffb15c;
  --blue:#3b46a3; --blue-bg:#eef0fb;
  /* type + shape */
  --font-display:'Schibsted Grotesk', system-ui, sans-serif;
  --font-body:'DM Sans', system-ui, sans-serif;
  --radius:22px; --radius-lg:28px;
  --ring:var(--pink);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body);
  line-height:1.55; min-height:100dvh; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
a{color:var(--pink); text-decoration:none} a:hover{color:var(--pink-deep)}
img{max-width:100%}
@keyframes d8pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}

/* ---------- headers ---------- */
.topbar,.siteheader{position:sticky; top:0; z-index:20; backdrop-filter:blur(14px);
  background:rgba(250,247,246,.82); border-bottom:1px solid var(--hair)}
.topbar-inner,.siteheader-inner{max-width:1120px; margin:0 auto; padding:16px clamp(1rem,4vw,2rem);
  display:flex; align-items:center; justify-content:space-between; gap:20px}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px clamp(1rem,4vw,2rem)}
.logo img{height:26px; width:auto; display:block}
.wordmark{font-family:var(--font-display); font-weight:800; font-size:22px; letter-spacing:-.03em; color:var(--pink)}
.account-link{display:inline-flex; align-items:center; gap:10px; padding:7px 8px 7px 18px;
  border-radius:999px; background:var(--surface); border:1px solid var(--hair);
  box-shadow:0 1px 2px rgba(26,22,32,.04); font-size:14px; font-weight:600; color:var(--ink)}
.account-link:hover{color:var(--ink); box-shadow:0 6px 20px rgba(26,22,32,.09)}
.avatar{width:30px; height:30px; border-radius:999px; background:var(--pink); display:grid; place-items:center; flex:0 0 auto}
.avatar svg{width:15px; height:15px; display:block}
.backlink{display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--ink);
  background:var(--surface); border:1px solid var(--hair); padding:10px 18px; border-radius:999px}
.backlink:hover{color:var(--ink); box-shadow:0 6px 20px rgba(26,22,32,.09)}

/* ---------- layout ---------- */
.wrap{max-width:1120px; margin:0 auto; padding:0 clamp(1rem,4vw,2rem) 96px; position:relative; z-index:1}
.page{max-width:640px; margin:0 auto; width:100%; padding:0 clamp(1rem,4vw,2rem) 72px}
.glow{position:fixed; top:-180px; left:50%; transform:translateX(-50%); width:900px; height:420px;
  background:radial-gradient(ellipse at center, var(--pink-glow), transparent 68%); pointer-events:none; z-index:0}
.screen{width:100%; max-width:460px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column; padding:clamp(1.4rem,5vw,2.2rem)}
.brandbar{display:flex; justify-content:center; padding:clamp(1.2rem,5vh,2.4rem) 0 1.4rem}
.brandbar img{width:min(170px,50vw); height:auto; display:block}

/* ---------- type ---------- */
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--pink)}
.eyebrow .dot{width:7px; height:7px; border-radius:999px; background:var(--pink); animation:d8pulse 2.6s ease-in-out infinite}
h1.hero-h1{font-family:var(--font-display); font-weight:800; font-size:clamp(40px,6vw,62px);
  line-height:1; letter-spacing:-.04em; margin:0; text-wrap:balance}
.lede{font-size:19px; line-height:1.55; color:var(--muted); margin:0; text-wrap:pretty}
h1.title,.title{font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; margin:0; text-wrap:balance}
h1.title{font-size:clamp(30px,5vw,44px); line-height:1.04}
.subtitle{margin:.6rem 0 1.4rem; color:var(--muted); font-size:1.02rem}

/* ---------- cards ---------- */
.card{background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius);
  padding:clamp(1.4rem,5vw,2rem); box-shadow:0 2px 4px rgba(26,22,32,.03)}

/* dark featured card */
.featured{position:relative; overflow:hidden; border-radius:var(--radius-lg); background:var(--dark);
  color:#fff; padding:clamp(1.8rem,5vw,2.5rem); box-shadow:0 24px 60px -24px rgba(26,22,32,.5)}
.featured .fglow{position:absolute; top:-120px; right:-80px; width:380px; height:380px;
  background:radial-gradient(circle at center, rgba(233,55,106,.55), transparent 65%); pointer-events:none}
.featured .inner{position:relative}
.featured .feyebrow{display:flex; align-items:center; gap:9px; font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55)}
.featured h2{font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3.6vw,42px);
  line-height:1.05; letter-spacing:-.035em; margin:14px 0 14px; text-wrap:balance}
.featured .fbody{font-size:17px; line-height:1.6; color:rgba(255,255,255,.7); margin:0 0 24px; text-wrap:pretty}
.featured .fmeta{display:flex; flex-wrap:wrap; gap:14px 24px; margin-bottom:26px; font-size:14px; color:rgba(255,255,255,.62)}
.featured .fmeta span{display:inline-flex; align-items:center; gap:8px}
.featured .factions{display:flex; flex-wrap:wrap; align-items:center; gap:14px}
.chip-status{display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:500;
  color:rgba(255,255,255,.62); padding:11px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.16)}
.chip-status .dot{width:6px; height:6px; border-radius:999px; background:var(--amber); animation:d8pulse 2.2s ease-in-out infinite}

/* partner card */
.avatarstack{display:flex; align-items:center}
.avatarstack .pic{width:76px; height:76px; border-radius:999px; overflow:hidden; border:3px solid #fff;
  box-shadow:0 4px 14px -6px rgba(26,22,32,.4); background:var(--surface-2); flex:none}
.avatarstack .pic img{width:100%; height:100%; object-fit:cover; display:block}
.avatarstack .heart{width:30px; height:30px; border-radius:999px; background:var(--pink); display:grid;
  place-items:center; margin:0 -12px; z-index:1; border:3px solid #fff}
.badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:6px 12px; border-radius:999px; white-space:nowrap}
.badge.yes{background:var(--ok-bg); color:var(--ok)}
.badge.no{background:var(--pink-soft); color:var(--pink-deep)}

/* pills / tags */
.pill{display:inline-block; font-size:.82rem; font-weight:600; padding:.32rem .75rem; border-radius:999px; background:var(--pink-soft); color:var(--pink-deep)}
.pill.plain{background:var(--surface-2); color:var(--muted)}
.pill.state{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; padding:6px 11px}
.pill.dark{background:var(--dark); color:#fff}
.label{font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); display:inline-flex; align-items:center; gap:8px}

/* action cards */
.actiongrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.actioncard{display:flex; flex-direction:column; justify-content:space-between; gap:34px; min-height:150px;
  border-radius:var(--radius); padding:24px; transition:transform .16s ease, box-shadow .16s ease}
.actioncard:hover{transform:translateY(-3px)}
.actioncard span{font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-.03em}
.actioncard.dark{background:var(--dark); color:#fff; box-shadow:0 18px 40px -22px rgba(26,22,32,.6)}
.actioncard.dark:hover{color:#fff}
.actioncard.pink{background:var(--pink); color:#fff; box-shadow:0 18px 40px -22px rgba(233,55,106,.8)}
.actioncard.pink:hover{color:#fff}
.actioncard.plainc{background:var(--surface); color:var(--ink); border:1px solid var(--hair)}
.actioncard.plainc:hover{color:var(--ink); box-shadow:0 18px 40px -26px rgba(26,22,32,.35)}

/* date list + history cards */
.datecard{background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); padding:24px; overflow:hidden}
.thumb{margin:-24px -24px 20px; height:152px; overflow:hidden; background:rgba(26,22,32,.05); display:grid; place-items:center}
.thumb img{width:100%; height:152px; object-fit:cover; display:block}
.thumb .nophoto{font-family:ui-monospace,monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint-2)}
.histrow{display:grid; grid-template-columns:200px 1fr auto; gap:26px; align-items:center; background:var(--surface);
  border:1px solid var(--hair); border-radius:var(--radius); overflow:hidden; padding-right:26px}
.histrow .hthumb{height:132px; background:rgba(26,22,32,.05); display:grid; place-items:center}
.histrow .hthumb img{width:100%; height:132px; object-fit:cover; display:block}
.histrow .hbody{padding:22px 0}
.histrow .hmeta{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--faint)}
.histrow .hmeta .sep{width:4px; height:4px; border-radius:999px; background:#d5cfd9}
.histrow .htitle{font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:-.03em; margin-top:8px}

/* ---------- forms ---------- */
.field{display:flex; flex-direction:column; gap:.4rem; margin:0 0 1rem}
.field label{font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600}
.row{display:flex; gap:.8rem} .row .field{flex:1}
input,select,textarea{width:100%; background:var(--surface); border:1.5px solid var(--hair-2); color:var(--ink);
  padding:.8rem .9rem; border-radius:12px; font:inherit; font-size:1rem}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2.5px solid var(--ring); outline-offset:2px; border-color:transparent}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.hint{font-size:.8rem; color:var(--faint); margin:.1rem 0 0}

/* interests chips */
.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin:.2rem 0 .5rem}
.chip{display:inline-flex; align-items:center; gap:.45rem; background:var(--pink-soft); color:var(--pink-deep);
  border-radius:999px; padding:.35rem .3rem .35rem .8rem; font-size:.9rem; font-weight:600}
.chip button{border:0; background:rgba(201,36,83,.14); color:var(--pink-deep); width:20px; height:20px;
  border-radius:50%; cursor:pointer; font-size:.9rem; line-height:1; display:grid; place-items:center; padding:0}
.chip button:hover{background:rgba(201,36,83,.28)}

/* ---------- buttons ---------- */
.btn{width:100%; font:inherit; font-size:1rem; font-weight:600; padding:.9rem 1.4rem; border-radius:999px;
  cursor:pointer; border:1.5px solid transparent; transition:transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease}
a.btn{display:block; text-align:center; text-decoration:none}
.btn-primary{background:var(--dark); color:#fff; box-shadow:0 12px 28px -14px rgba(26,22,32,.7)}
.btn-primary:hover{transform:translateY(-1px); color:#fff}
.btn-pink{background:var(--pink); color:#fff; box-shadow:0 12px 28px -12px rgba(233,55,106,.7)}
.btn-pink:hover{background:var(--pink-bright); color:#fff}
.btn-secondary,.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--hair-2)}
.btn-secondary:hover,.btn-ghost:hover{border-color:var(--ink); color:var(--ink)}
.btn-danger{background:transparent; color:var(--pink-deep); border-color:rgba(201,36,83,.4)}
.btn-danger:hover{background:var(--pink-soft)}
.btn:disabled{opacity:.55; cursor:default; transform:none}
.btn:focus-visible{outline:2.5px solid var(--ring); outline-offset:3px}
.btnstack{display:flex; flex-direction:column; gap:.6rem; margin-top:.4rem}
.inlinecta{display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:var(--pink)}
.inlinecta:hover{color:var(--pink-deep)}

/* ---------- misc ---------- */
.msg{margin:.9rem 0 0; font-size:.9rem; min-height:1.1em}
.msg.ok{color:var(--ok); font-weight:600} .msg.err{color:var(--pink-deep); font-weight:600}
.altline{text-align:center; margin:1.2rem 0 0; color:var(--muted); font-size:.92rem}
.readrow{display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--hair)}
.readrow .k{color:var(--muted); font-size:.9rem} .readrow .v{font-weight:600; text-align:right}
.divider{height:1px; background:var(--hair); margin:1.6rem 0}
footer.foot{border-top:1px solid var(--hair)}
footer.foot .foot-inner{max-width:1120px; margin:0 auto; padding:24px clamp(1rem,4vw,2rem);
  font-family:var(--font-display); font-weight:800; color:var(--pink); font-size:15px; letter-spacing:-.03em}

@media (max-width:840px){
  .actiongrid{grid-template-columns:1fr}
  .histrow{grid-template-columns:120px 1fr; padding-right:0}
  .histrow .runagain{grid-column:1 / -1; margin:0 22px 22px}
}
@media (prefers-reduced-motion:reduce){ *{animation:none !important} .btn,.actioncard{transition:none} }

/* ---- account hub nav rows ---- */
.idcard{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.idcard .idname{font-family:var(--font-display); font-weight:800; font-size:1.5rem; letter-spacing:-.02em; line-height:1.1}
.idcard .idemail{font-size:.92rem; color:var(--muted); margin-top:4px; display:flex; align-items:center; gap:6px}
.navlist{display:flex; flex-direction:column; border:1px solid var(--hair); border-radius:var(--radius); background:var(--surface); overflow:hidden}
.navrow{display:flex; align-items:center; gap:14px; padding:16px 18px; text-decoration:none; color:inherit; border:0; border-bottom:1px solid var(--hair); cursor:pointer; width:100%; text-align:left; font:inherit; background:none}
.navrow:last-child{border-bottom:0}
.navrow:hover{background:var(--surface-2); color:inherit}
.navrow .nr-main{flex:1; min-width:0}
.navrow .nr-label{font-weight:600; font-size:1rem; letter-spacing:-.01em}
.navrow .nr-sub{font-size:.85rem; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.navrow .nr-chev{color:var(--faint); flex:0 0 auto}
.sectlabel{font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:1.6rem 0 .7rem}