/* Profile cards (/u/<username>) and the card section of the Post yourself form. */
.cardpage{position:relative;display:flex;justify-content:center;padding:56px 16px 80px;min-height:calc(100vh - 160px)}
.cardpage::before{content:"";position:absolute;inset:0 0 auto;height:360px;pointer-events:none;
  background:linear-gradient(180deg,#F2F4F7,transparent)}
.lcard{position:relative;width:min(520px,100%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;animation:cardIn .55s var(--ease,ease) both}
.lcard .pic{width:112px;height:112px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px var(--bg),0 0 0 6px var(--line)}
.lcard.pro .pic{box-shadow:0 0 0 4px var(--bg),0 0 0 7px var(--gold)}
.lcard h1{font-size:clamp(28px,7vw,40px);line-height:1.05;overflow-wrap:anywhere}
.lcard .handle{font-family:var(--f-mono);color:var(--muted);font-size:14px;margin-top:6px}
.lcard .handle .card-edit{margin-left:10px;vertical-align:middle;font-family:var(--f-body,inherit)}
.lcard .hl{font-size:18px;font-weight:500;max-width:40ch;margin:0}
.lcard .meta{font-size:14px;margin:0}
.socials{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.socials a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);color:var(--ink);transition:transform .2s var(--ease,ease),border-color .2s}
.socials a:hover{transform:translateY(-2px);border-color:var(--ink)}
.socials svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lbtns{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:6px}
.lbtns:empty{display:none}
.lbtn{display:flex;align-items:center;gap:12px;width:100%;padding:17px 20px;border-radius:14px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);
  text-decoration:none;color:var(--ink);font-weight:600;transition:transform .2s var(--ease,ease),border-color .2s;animation:cardIn .5s var(--ease,ease) both;animation-delay:calc(var(--i,0) * 55ms + 120ms)}
.lbtn:hover{transform:translateY(-2px);border-color:var(--ink)}
.lbtn .t{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbtn .h{font-family:var(--f-mono);font-size:12px;color:var(--muted);font-weight:400;white-space:nowrap}
.lcard .cta{justify-content:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.lcard .about{width:100%;text-align:left;display:flex;flex-direction:column;gap:10px;margin-top:10px}
.lcard .about .prose{white-space:pre-line;margin:0}
/* Header card: who they are, facts and Hire/Share on the left; About, specialties and software on the right.
   Past work runs full width underneath. Stacks when narrow. */
.cardpage{container-type:inline-size}
.lcard:not(.loading){width:min(1080px,100%);align-items:stretch;gap:36px}
.lc-head{display:grid;grid-template-columns:1fr;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);text-align:left;overflow:hidden}
.lc-side,.lc-main{display:flex;flex-direction:column;gap:16px;padding:24px;min-width:0}
.lc-main{border-top:1px solid var(--line);background:var(--bg)}
.lc-id{display:flex;align-items:center;gap:18px}
.lcard .lc-id .pic{width:88px;height:88px;flex:none;box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--line)}
.lcard.pro .lc-id .pic{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--gold)}
.lc-name{min-width:0;display:flex;flex-direction:column;gap:6px}
.lcard .lc-name h1{font-size:clamp(24px,6vw,32px)}
.lcard .lc-name .handle{margin-top:0}
.lc-name .chips{gap:6px}
.lcard .lc-head .hl{font-size:16px;max-width:none}
.lc-facts{display:flex;flex-wrap:wrap;margin:0;border:1px solid var(--line);border-radius:12px;background:var(--bg);overflow:hidden}
/* Cells wrap onto more rows when there are many; the shadows draw the dividers (the outer edge ones are clipped). */
.lc-facts>div{flex:1 1 110px;padding:10px 12px;min-width:0;box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line)}
.lc-facts dt{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-facts dd{margin:3px 0 0;font-size:14px;font-weight:600;overflow-wrap:break-word}
.lcard .lc-head .cta{justify-content:flex-start;margin:0}
.lc-head .cta .btn{flex:1;justify-content:center}
.lc-head .socials{justify-content:flex-start}
.lc-head .socials a{width:40px;height:40px}
.lc-head .socials svg{width:18px;height:18px}
.lc-main h3{font-size:17px;margin:0}
.lc-main .prose{white-space:pre-line;margin:0;line-height:1.6}
.lc-tags{display:flex;flex-direction:column;gap:8px}
.lc-tags h4{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0}
.lc-tags .chips{gap:6px}
.lc-foot{display:flex;flex-direction:column;align-items:center;gap:14px}
.lc-foot:not(:has(*)){display:none}
@container (min-width:760px){
  .lc-head{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .lc-side,.lc-main{padding:32px}
  .lc-main{border-top:0;border-left:1px solid var(--line)}
}
.madewith{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);text-decoration:none;margin-top:14px}
.madewith:hover{color:var(--ink)}
.lcard .skl{display:block;height:14px;border-radius:7px;background:var(--sunk)}
.lcard .btnsk{width:100%;height:56px;border-radius:14px}
.lcard .pic.sk{background:var(--sunk)}
@keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:560px){.lbtn .h{display:none}.cardpage{padding-top:36px}}

.mark.avimg{object-fit:cover;background:var(--sunk);padding:0}
.cf-av{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cf-av .mark{border-radius:50%}
.prefix{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}
.prefix>span{display:flex;align-items:center;flex:none;padding:0 2px 0 12px;font-family:var(--f-mono);font-size:13px;color:var(--muted);white-space:nowrap}
.prefix>span i{font-style:normal}
@media (max-width:480px){.prefix>span i{display:none}}
.prefix input[type=text]{border:0;border-radius:0;padding-left:2px;min-width:0}
.prefix:focus-within{outline:2px solid var(--ink);outline-offset:1px}
#cf-uhint.good{color:var(--a1)}
#cf-uhint.bad{color:var(--danger)}
.uhint.good{color:var(--a1)}
.uhint.bad{color:var(--danger)}
.cf-check{display:flex;gap:10px;align-items:center;font-size:14px;cursor:pointer}
.cf-check input{width:18px;height:18px;accent-color:var(--accent);flex:none}

/* Your own page when signed in: the card is the Profile tab of your dashboard. */
.owncard{min-height:0;padding:28px 0 8px}
.owncard::before{height:260px}
.ownextra{width:min(520px,100%);margin:0 auto}
.ownrec{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:36px 0}
.ownrec .mark{border-radius:50%}
.ownrec p{margin:4px 0 0}
.ownrec .row{justify-content:center;gap:10px;flex-wrap:wrap}

/* Signed-out nudge on someone's card: "Are you an editor? Make your own free card". */
.cardpop{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));width:320px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 2px 6px rgba(0,0,0,.05),0 12px 32px rgba(0,0,0,.08);padding:18px;z-index:40;animation:cpin .5s var(--ease,ease) both}
.cardpop h3{font-size:17px;margin:14px 0 4px;padding-right:28px}
.cardpop p{font-size:14px;line-height:1.45;margin:0 0 14px}
.cardpop .close{top:10px;right:10px;width:30px;height:30px;font-size:16px}
.cardpop .row{gap:8px;flex-wrap:wrap}
.cp-mini{display:flex;align-items:center;gap:10px;margin-right:34px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.cp-av{flex:none;width:30px;height:30px;border-radius:50%;background:var(--sunk);box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--line)}
.cp-lines{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.cp-lines i{display:block;height:7px;border-radius:4px;background:var(--sunk);width:80%}
.cp-lines i+i{width:52%}
.cp-url{flex:none;font-size:11px;color:var(--muted);white-space:nowrap}
.cp-url b{color:var(--ink);font-weight:500}
@keyframes cpin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* Phones: one slim line pinned to the bottom instead of the card. */
.cardpop-bar{left:12px;right:12px;width:auto;max-width:none;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:0;display:flex;align-items:center;border-radius:999px;box-shadow:0 1px 3px rgba(0,0,0,.06),0 8px 20px rgba(0,0,0,.08);animation-duration:.35s}
.cardpop-bar a{flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding:10px 4px 10px 16px;color:var(--ink);text-decoration:none;font-size:13.5px;white-space:nowrap}
.cardpop-bar a b{font-weight:600}
.cardpop-bar a span{color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.cardpop-bar svg{flex:none;width:15px;height:15px;margin-left:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cpb-x{flex:none;width:40px;height:40px;margin-right:2px;border:0;border-radius:50%;background:none;color:var(--muted);font-size:18px;line-height:1;cursor:pointer}
.cpb-x:hover{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.cardpop{animation:none}}

/* Past work: heading + Long form / Shorts tabs, a page of cards, then page numbers (workSection in card.js). */
.lc-work{width:100%;display:flex;flex-direction:column;align-items:center;gap:18px;scroll-margin-top:90px}
.lc-workhead{display:flex;flex-direction:column;align-items:center;gap:12px}
.lc-workhead h2{font-size:24px;margin:0}
.lw-empty{width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:28px 20px;border:1px dashed var(--line);border-radius:16px}
.lw-empty p{margin:0;font-size:14px}
.lw-tip{width:100%;max-width:640px;display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;background:var(--gold-soft)}
.lw-tip p{margin:0;flex:1;font-size:14px;line-height:1.45}
.lw-tip .btn{flex:none}
@media (max-width:560px){.lw-tip{flex-direction:column;align-items:stretch;text-align:left}}
.wtabs{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.wtab{padding:8px 16px;border:0;border-radius:999px;background:none;color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
.wtab span{font-weight:500;opacity:.7;margin-left:2px}
.wtab:hover{color:var(--ink)}
.wtab.on{background:var(--ink);color:var(--bg)}
.wtab:focus-visible,.wpg:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.lc-work .lwork{margin-top:0;align-items:start}
.lc-work .lwork:has(>.lw:only-child){max-width:640px}
.lc-work .lwork>.lw:not(.vc){grid-column:1/-1}
/* Shorts: vertical players fill their card. */
.wl-short{grid-template-columns:repeat(2,minmax(0,1fr))}
.lwork.wl-short>.vc>.emb-tall,.lwork.wl-short>.vc>.emb-vid.tall{height:auto;aspect-ratio:9/16}
.lwork.wl-short>.vc>.emb-tall>iframe,.lwork.wl-short>.vc>.emb-vid.tall>:not(.emb-open){width:100%}
.wl-short .vc-stats{grid-template-columns:1fr;margin-inline:10px}
.wl-short .vc-stats>div+div{border-left:0;border-top:1px solid var(--line)}
.wl-short .vc-body{padding:10px 10px 0}
.wl-short .vc-av{display:none}
.lwork.wl-long>.vc>.emb-vid.tall{height:min(520px,120vw)}
@container (min-width:620px){.lc-work .wl-long:has(.vc+.vc){grid-template-columns:repeat(2,minmax(0,1fr))}.lc-work .wl-short{grid-template-columns:repeat(auto-fit,minmax(180px,240px));justify-content:center}}
@container (min-width:960px){.lc-work .wl-long:has(.vc+.vc+.vc){grid-template-columns:repeat(3,minmax(0,1fr))}}
.wpager{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.wpg{min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums}
.wpg:hover:not(:disabled){border-color:var(--ink)}
.wpg.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.wpg:disabled{opacity:.35;cursor:default}

/* Hire popup (hireSheet in card.js): Contact via Editorlane (preferred) or Other contact details. */
.hire-sheet{display:flex;flex-direction:column;gap:14px}
.hire-sheet h2{font-size:22px;margin:0}
.hire-who{display:flex;align-items:center;gap:14px}
.hire-who .mark{border-radius:50%;flex:none}
.hire-who p{margin:4px 0 0;font-size:14px}
.hire-btns{display:flex;gap:10px;flex-wrap:wrap}
.hire-col{flex:1 1 220px;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.hire-col .btn{width:100%;justify-content:center;gap:8px}
.hire-reach{font-size:12px;color:var(--muted);text-align:center}
.hire-pref{padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.18);font-size:11px;font-weight:600;letter-spacing:.02em}
.hire-back{align-self:flex-start;margin-left:-8px}
.hire-rows{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.hire-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface)}
.hire-row+.hire-row{border-top:1px solid var(--line)}
.hire-ic{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--sunk);color:var(--ink)}
.hire-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hire-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.hire-txt small{font-size:12px;color:var(--muted)}
.hire-txt b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hire-note{font-size:13px;margin:0}

/* Claim card on a card made for an editor to claim (card.js cardClaimSync; .claimcard styles are in forms.css). */
@media (max-width:560px){body.has-cardclaim #cardpage{padding-bottom:160px}body.has-cardclaim .cardpop{display:none}}