/* Styles added to the network page after the meeting: clickable match rows, the "See why" panel, the live marker, the review line,
   the two-score hint, the sources list, and the closing section. Loaded after site.css. */

/* ---- step 3: people check every match ---- */
.say .checked{display:flex;align-items:center;gap:8px;margin-top:10px;font:500 14px var(--head);color:var(--navy)}
.pin .say .checked{font-size:13.5px;margin-top:6px}
.checked i{flex:none;width:16px;height:16px;border:1.5px solid var(--amber);border-radius:50%;position:relative}
.checked i::after{content:"";position:absolute;left:4px;top:1.5px;width:4px;height:7px;border:solid var(--amber-ink);border-width:0 1.5px 1.5px 0;transform:rotate(40deg)}

/* ---- step 4: live marker ---- */
.last > p.live{margin-top:14px;font-size:17px;max-width:46ch}
.pill{display:inline-flex;align-items:center;gap:8px;margin:0 12px 0 0;padding:3px 10px;border:1px solid var(--rule);background:var(--paper);font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--navy);vertical-align:1px}
.pill i{width:8px;height:8px;border-radius:50%;background:#2E9B5B;position:relative}
/* WHY: the ring grows and fades (transform and opacity only), a calm pulse rather than a flash */
.pill i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#2E9B5B;animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(3);opacity:0}}

/* ---- the match list: every row is a button ---- */
.winhint{padding:0 16px 10px;background:var(--paper);font-size:13.5px;color:var(--ink2)}
.win button.m{display:flex;width:100%;margin:0;text-align:left;font:inherit;color:inherit;background:var(--white);border:0;border-top:1px solid var(--rule);cursor:pointer;position:relative;transition:background-color .15s}
.win button.m:hover,.win button.m:focus-visible{background:var(--amber-soft)}
.win button.m:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.win button.m::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--amber);transform:scaleY(0);transition:transform .15s}
.win button.m:hover::before,.win button.m:focus-visible::before{transform:scaleY(1)}
.m .mt{display:block;min-width:0}
.m .srcl1{display:block;margin-top:6px;font:400 11.5px var(--mono);color:var(--ink3)}
.m .see{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font:500 13.5px var(--head);color:var(--blue)}
.m .see i{font-style:normal;font-size:20px;line-height:1;padding:0;color:inherit;transition:transform .15s}
.win button.m:hover .see i,.win button.m:focus-visible .see i{transform:translateX(4px)}
.win button.m:hover .see{text-decoration:underline}

/* ---- the two-score hint ---- */
.twos{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.two{padding:16px 18px;border:1px solid var(--rule);background:var(--white)}
.two small{display:block;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.two .who{display:block;margin-top:8px;font:600 15px/1.35 var(--head)}
.two .num{display:block;margin-top:10px;font:400 34px/1 var(--mark);color:var(--navy)}
.two p{margin-top:8px;font-size:14px;color:var(--ink2)}
/* WHY: the private score is only a blurred shape of a number (it is not a real figure), so nothing can be read out of it */
.two.mine{background:var(--paper);border-style:dashed}
.two .num.lock{filter:blur(8px);user-select:none}
.two.mine small::before{content:"";display:inline-block;width:9px;height:7px;border:1.5px solid currentColor;border-radius:1px;margin-right:8px;vertical-align:1px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- sources ---- */
.srcl{margin-top:28px;border:1px solid var(--rule);padding:14px clamp(14px,1.6vw,22px);background:var(--white)}
.srcl .h{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.list{display:flex;flex-wrap:wrap;gap:6px 18px}
.srcl .list{margin-top:10px;font-size:14px;color:var(--ink2)}
.srcl .list span:last-child{color:var(--ink);font-weight:500}
.srcs .list{display:contents}
.newsrc{margin-top:26px;padding-left:16px;border-left:3px solid var(--amber)}
.newsrc h4{margin:0;font:500 19px/1.3 var(--head)}
.newsrc p{margin-top:4px;font-size:16px;color:var(--ink2);max-width:50ch}

/* ---- the "See why" panel (slides in from the right; full screen on phones) ---- */
.np{position:fixed;inset:0;z-index:20}
.np[hidden]{display:none}
.np-back{position:absolute;inset:0;background:rgba(10,17,34,.55);opacity:0;transition:opacity .25s}
.np-box{position:absolute;top:0;right:0;bottom:0;width:min(580px,100%);background:var(--white);color:var(--ink);overflow-y:auto;overscroll-behavior:contain;transform:translateX(100%);transition:transform .25s ease-out;box-shadow:-30px 0 60px -30px rgba(0,0,0,.5);outline:0}
.np.on .np-back{opacity:1}.np.on .np-box{transform:none}
body.np-lock{overflow:hidden}
.np-x{position:sticky;top:0;float:right;z-index:1;margin:14px 16px 0 0;padding:8px 12px;font:500 14px var(--head);background:var(--paper);color:var(--ink);border:1px solid var(--rule);cursor:pointer}
.np-x:hover{background:var(--amber-soft)}
.np-body{padding:24px clamp(16px,3vw,32px) 40px}
.np-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding-right:84px}
.np small{display:block;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.np h3{margin:8px 0 0;font:500 22px/1.25 var(--head)}
.np h3 i{font-style:normal;color:var(--amber);padding:0 6px}
.np-want{margin-top:4px;font-size:15px;color:var(--ink2)}
.np-tot{text-align:right;flex:none}
.np-tot span{display:block;font:400 40px/1 var(--mark);color:var(--navy)}
.np h4{display:flex;justify-content:space-between;align-items:baseline;margin:28px 0 10px;padding-top:16px;border-top:1px solid var(--rule);font:600 15px var(--head)}
.np h4 span{font:400 12px var(--mono);color:var(--ink3)}
.np-parts{display:grid;gap:12px}
.np-part{display:grid;grid-template-columns:62px minmax(0,1fr) 64px;gap:3px 12px;align-items:center;font-size:14px}
.np-part .bar{height:6px;background:var(--paper);border:1px solid var(--rule)}
.np-part .bar i{display:block;height:100%;width:0;background:var(--amber);transition:width .5s .15s}
.np.on .np-part .bar i{width:var(--w)}
.np-part .pts{font:400 12px var(--mark);color:var(--navy);text-align:right}
.np-part p{grid-column:2/4;margin:0;font-size:13.5px;line-height:1.4;color:var(--ink2)}
.np-list{list-style:none;margin:0;padding:0}
.np-src{padding:14px 0;border-top:1px solid var(--rule)}
.np-list .np-src:first-child{border-top:0;padding-top:0}
.np-st{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.np-src b{display:block;margin-top:4px;font-weight:600;font-size:15px;line-height:1.35}
.np-src p{margin-top:4px;font-size:14px;color:var(--ink2)}
.np-src q{display:block;margin-top:8px;padding:8px 12px;background:var(--amber-soft);font-size:14px;line-height:1.5;quotes:none}
.np-src a{display:inline-block;margin-top:8px;font-size:13.5px;color:var(--blue)}
.np-side{margin:18px 0 6px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
/* WHY: blank grey shapes under a blur stand in for text that is not on the page; only the type and date of a source can be read */
.nb{display:block;height:11px;margin-top:9px;background:rgba(10,17,34,.2);filter:blur(4px)}
.np-lk{filter:blur(5px);user-select:none;pointer-events:none}
.np-lk .nb{filter:none}
.np-rule{grid-column:2/4;margin-top:-4px}
.np-ev{margin-top:12px;padding:10px 12px;border:1px solid var(--rule);background:var(--paper)}
.np-lk svg{display:block;width:100%;height:150px;margin-top:10px;border-left:1px solid var(--rule);border-bottom:1px solid var(--rule);overflow:visible}
.np-lk svg .ln{fill:none;stroke:var(--amber);stroke-width:2.5;vector-effect:non-scaling-stroke}
.np-lk svg .en{fill:none;stroke:var(--ink3);stroke-width:1.5;vector-effect:non-scaling-stroke}
.np-lk svg .tg{fill:none;stroke:var(--blue);stroke-width:1.5;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}
.np-fig .nb{height:30px;width:90px}
/* the login sits over the blurred part and stays in view while the reader scrolls it */
.np-gated{position:relative}
.np-gate{position:sticky;top:26vh;height:0;z-index:3}
.np-gate-in{position:absolute;left:2%;right:2%;top:0;padding:22px 22px 24px;background:var(--white);border:1px solid var(--rule);border-top:3px solid var(--amber);box-shadow:0 18px 40px -18px rgba(10,17,34,.45);text-align:center}
.np-gate-in b{display:block;font:500 19px/1.3 var(--head)}
.np-gate-in span{display:block;margin:6px 0 16px;font-size:14px;color:var(--ink2)}
.np .btn.solid{background:var(--night);color:var(--fg)}.np .btn.solid:hover{background:var(--navy)}

/* ---- teaser: the match block opens the reason ---- */
.tcard .match.go{cursor:pointer}
.tcard .seewhy{display:inline-flex;align-items:center;gap:8px;margin:12px 0 0 16px;padding:8px 14px;font:500 14px var(--head);color:var(--night);background:var(--amberL);border:0;cursor:pointer}
.tcard .seewhy i{font-style:normal;font-size:20px;line-height:1;transition:transform .15s}
.tcard .match.go:hover .seewhy i,.tcard .seewhy:focus-visible i{transform:translateX(4px)}
.tcard .seewhy:hover{background:#fff}
.tcard .match.go:hover{background:rgba(242,169,73,.06)}
.tease .srcs{margin-top:28px}

.tcard .srcn{margin-top:8px;font:400 12px/1.5 var(--mono);color:var(--mute)}
.tcard .lockhint{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid var(--ruleD)}
.tcard .lockhint b{font:500 17px var(--head)}
.tcard .lockhint span{flex:1 1 220px;font-size:14px;color:var(--mute)}
.tcard .lockhint .btn{margin:0;padding:10px 16px;font:500 14px var(--head);color:var(--night)}

/* ---- the close ---- */
.close{background:var(--night);color:var(--fg);padding:72px clamp(20px,4vw,56px) 110px;border-top:1px solid var(--ruleD)}
.cl-in{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:end}
.close h2{font:300 clamp(28px,3.4vw,44px)/1.15 var(--head);letter-spacing:-.02em}
.close h2 span{display:block;margin-top:10px;color:var(--amberL);font-weight:400}
.cl-side{border-left:1px solid rgba(242,169,73,.5);padding-left:22px}
.cl-side b{display:block;font:500 20px var(--head)}
.cl-side > span{display:block;margin-top:4px;font-size:18px;color:var(--mute)}
.cl-side .acts{margin-top:26px}

@media (max-width:980px){
  .twos{grid-template-columns:1fr}
  .cl-in{grid-template-columns:1fr}
  .cl-side{border-left:0;border-top:1px solid rgba(242,169,73,.5);padding:20px 0 0}
  .close{padding:56px 20px 80px}
  .m .fit{flex:none}
  .np-box{width:100%}
}
@media (prefers-reduced-motion:reduce){.pill i::after{animation:none;opacity:0}.np-back,.np-box,.np-part .bar i,.win button.m::before,.m .see i{transition:none}}