/* Public cards: the card page (/@handle), the "not here" page and the publish panel on the profile.
   Loaded after app.css; reuses its colours, .panel, .btn-primary, .btn-ghost, .field, .check and .big-ring parts. */

/* The open card shows at once: no doors on a card page (data-ss-view="card", set by the Worker or by
   card.js for the file preview). The ?full address keeps the doors. */
html[data-ss-view="card"] #intro{display:none}
html[data-ss-view="card"] body{overflow:auto}
html[data-ss-view="card"] #app{filter:none;transform:none}

/* ---------- The card page ---------- */
.card-screen{justify-content:center;gap:18px}
/* the "not here" page: the wordmark right above the panel, the two centred together */
.card-screen>.pc-brand-miss{margin-top:auto}
.card-screen>.pc-brand-miss+.panel{margin:0 auto auto}
.pc-note{max-width:460px;padding:8px 14px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid var(--line);font-size:13px;line-height:1.45;color:var(--muted);text-align:center}
.pc-brand{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(24px,3vw,30px);line-height:1;color:#fbe3ee;letter-spacing:.01em}
.pc-brand em{font-style:italic;font-weight:500;color:var(--pink)}
.pc{width:min(460px,100%);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:clamp(24px,4vw,36px) clamp(18px,4vw,32px);border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(8,4,24,.45),inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pc-medal{position:relative;width:118px;height:118px;margin-bottom:6px}
.pc-medal svg{width:100%;height:100%;transform:rotate(-90deg)}
.pc-medal circle{fill:none;stroke-width:6}
.pc-medal .trk{stroke:rgba(255,255,255,.12)}
.pc-medal .val{stroke:#f5cf8e;stroke-linecap:round}
.pc-medal .br-in b{font-size:46px;font-variant-numeric:lining-nums}
.pc-name{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(32px,5vw,44px);line-height:1.08;color:#fbe3ee;outline:none;overflow-wrap:anywhere}
.pc-title{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:600;font-variant-numeric:lining-nums;color:var(--muted)}
.pc-ttl{color:#f6cfe1}
.pc-points{font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
.pc-adult{margin-top:8px;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:rgba(255,236,246,.62)}
.pc-skills{list-style:none;display:grid;gap:8px;width:100%;margin-top:14px;text-align:left}
.pc-skills li{display:grid;grid-template-columns:30px 1fr auto 22px;align-items:center;gap:10px;padding:8px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.pc-ic{color:var(--c);font-size:19px;display:grid;place-items:center}
.pc-sk{font-weight:700;font-size:14.5px}
.pc-pips{display:flex;gap:4px}
.pc-pips i{width:9px;height:9px;transform:rotate(45deg);border-radius:2px;border:1.5px solid color-mix(in srgb,var(--c) 55%,transparent)}
.pc-pips i.on{background:var(--c);border-color:var(--c);box-shadow:0 0 6px color-mix(in srgb,var(--c) 70%,transparent)}
.pc-sl{text-align:right;color:var(--c);font-variant-numeric:tabular-nums}
.pc-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.pc-actions .btn-primary,.pc-actions .btn-ghost{margin-top:0}
.pc-owner{font-size:14px;color:var(--muted)}
.pc-owner a,.pc-report{color:var(--pink);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(243,195,217,.5)}
.pc-foot{font-size:13px}
.pc-report{display:inline-block;min-height:32px;padding:6px 10px;border-radius:8px;color:var(--muted)}
:is(.pc-owner a,.pc-report,.pub-link,.pub-review):focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:640px){
  .pc-skills li{grid-template-columns:26px 1fr auto 18px;gap:8px;padding:8px 10px}
  .pc-pips{gap:3px}
  .pc-pips i{width:8px;height:8px}
  .pc-actions{flex-direction:column;width:100%;max-width:460px}
}

/* ---------- The publish panel (profile) ---------- */
.pub{display:flex;flex-direction:column;gap:12px;padding:clamp(18px,3vw,28px);border-radius:28px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.pub-status{font-size:16px;line-height:1.55;color:var(--ink);outline:none;overflow-wrap:anywhere}
.pub-link,.pub-review{color:#fbe3ee;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.pub-actions{display:flex;flex-wrap:wrap;gap:10px}
.pub-actions .btn-primary{margin-top:0}
.pub-actions a.btn-ghost{text-decoration:none}
.pub-msg{font-size:14px;font-weight:700;color:#9ff0c4}
.pub-msg:empty{display:none}
.pub-form{display:grid;gap:16px;text-align:left}
.pub-linkset{border:0;display:grid;gap:8px;min-width:0}
.pub-linkset legend{font-weight:700;font-size:14px;margin-bottom:6px}
.radio{display:flex;gap:10px;align-items:center;font-size:15px;cursor:pointer;overflow-wrap:anywhere}
.radio input{width:20px;height:20px;accent-color:#f3b6cf;flex:none}
.pub-handle{display:flex;align-items:center;min-height:48px;margin-left:30px;border-radius:14px;border:1.5px solid rgba(243,195,217,.35);background:rgba(20,12,40,.45);overflow:hidden}
.pub-handle:focus-within{border-color:#f3b6cf;box-shadow:0 0 0 3px rgba(243,182,207,.25)}
.pub-prefix{padding-left:14px;color:var(--muted);font-size:15px;white-space:nowrap}
.pub-handle input{flex:1;min-width:0;min-height:44px;padding:10px 14px 10px 1px;border:0;background:transparent;color:#fff;font-size:16px;outline:none}
.pub-handle input:disabled{opacity:.45}
.pub-handle:has(input[aria-invalid="true"]){border-color:#ff9db0}
.pub-new{margin:0 0 0 30px;justify-self:start}
.pub-linkset .f-hint,.pub-linkset .err{margin-left:30px}
.check .f-hint{display:block;margin-top:2px}
.pub-preview{display:grid;gap:8px;padding:16px;border-radius:20px;background:rgba(20,12,40,.4);border:1px dashed rgba(243,195,217,.35)}
.pub-preview h3{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#f5cf8e}
.pub-pv-label{margin-top:6px;font-size:13px;font-weight:700;color:var(--muted)}
.pub-pv-label::after{content:":"}
.pc-mini{width:100%;padding:18px;gap:4px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.pc-mini .pc-medal{width:84px;height:84px}
.pc-mini .pc-medal .br-in b{font-size:32px}
.pc-mini .pc-name{font-size:28px}
.pc-mini .pc-title{font-size:19px}
.pub-pv-full .pc-skills{margin-top:0}
.pub-pv-none{font-size:14px;color:var(--muted)}
.pub-og{display:grid;grid-template-columns:160px 1fr;align-items:center;gap:12px;padding:10px;border-radius:14px;background:#f7f2fa;color:#2c1c47}
.pub-og img{display:block;width:160px;height:84px;object-fit:cover;border-radius:8px;background:#1b1c46}
.pub-og b{display:block;font-size:14.5px;line-height:1.3;overflow-wrap:anywhere}
.pub-og small{display:block;margin-top:2px;font-size:12.5px;color:#6a5a7e;overflow-wrap:anywhere}
.pub-warn{padding:10px 14px;border-radius:14px;background:rgba(245,207,142,.12);border:1px solid rgba(245,207,142,.35);font-size:14px;font-weight:700;line-height:1.5;color:#fbe9c9}
.pub-note{font-size:13.5px;line-height:1.5;color:var(--muted)}
.pub-buttons{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pub-buttons .btn-primary{margin-top:0}
@media (max-width:640px){
  .pub-handle,.pub-new,.pub-linkset .f-hint,.pub-linkset .err{margin-left:0}
  .pub-og{grid-template-columns:1fr}
  .pub-og img{width:100%;height:auto;aspect-ratio:1200/630}
}

/* ---------- Sign-ups through the card, and the share kit (share.js) ---------- */
.share{display:grid;gap:12px;margin-top:6px;padding-top:18px;border-top:1px solid var(--line)}
.share-title{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;color:#fbe3ee;outline:none}
.share-sub{margin-top:6px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#f5cf8e}
.share-lines{list-style:none;display:grid;gap:8px}
.share-lines li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 12px;padding:10px 12px;border-radius:14px;background:rgba(20,12,40,.45);border:1px solid var(--line)}
.share-line{font-weight:700;font-size:15px;overflow-wrap:anywhere;user-select:all;-webkit-user-select:all}
.share-lines .f-hint{grid-column:1/-1}
.share-off{margin-top:-2px}
.share-image{display:grid;grid-template-columns:minmax(0,240px) 1fr;gap:18px;align-items:start}
.share-canvas{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 14px 40px rgba(8,4,24,.5);background:#1b1c46}
.share-opts{display:grid;gap:12px;align-content:start}
.share-sizes{border:0;display:flex;flex-wrap:wrap;gap:6px 18px;min-width:0}
.share-sizes legend{width:100%;margin-bottom:6px;font-weight:700;font-size:14px}
.share-buttons{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.share-buttons .btn-primary{margin-top:0}
.share-opts .radio,.share-opts .check{min-height:44px;align-items:center}
.share-opts .check input{margin-top:0}
.share-sizes{gap:0 18px}
.share-apps{border-radius:14px;background:rgba(20,12,40,.35);border:1px solid var(--line);padding:4px 14px}
.share-apps summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700;font-size:15px}
.share-apps summary:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:8px}
.share-apps summary{list-style:none;gap:12px}
.share-apps summary::-webkit-details-marker{display:none}
.share-apps summary::after{content:'';margin-left:auto;flex:none;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.share-apps[open] summary::after{transform:rotate(-135deg)}
@media (prefers-reduced-motion:reduce){.share-apps summary::after{transition:none}}
.share-apps p{margin:4px 0 10px;font-size:14px;line-height:1.5;color:var(--muted)}
.share-apps dl{display:grid;gap:8px;margin:6px 0 12px}
.share-apps dl div{display:grid;grid-template-columns:150px 1fr;gap:12px;font-size:14px;line-height:1.45}
.share-apps dt{font-weight:800;color:#fbe3ee}
.share-apps dd{color:var(--muted)}
.share-msg{font-size:14px;font-weight:700;color:#9ff0c4}
.share-msg:empty{display:none}
@media (max-width:640px){
  .share-image{grid-template-columns:1fr}
  .share-canvas{max-width:260px;justify-self:center}
  .share-apps dl div{grid-template-columns:1fr;gap:2px}
}

/* ---------- The once-per-level nudge (profile) ---------- */
.share-nudge{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;padding:14px 18px;border-radius:20px;
  background:linear-gradient(135deg,rgba(245,207,142,.18),rgba(243,182,207,.14));border:1px solid rgba(245,207,142,.45)}
.share-nudge p{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:600;color:#fbe3ee}
.share-nudge-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.share-nudge .btn-primary{margin-top:0}

/* ---------- "You and <name>" on the results screen ---------- */
.cmp{margin-top:28px;padding:18px clamp(12px,3vw,20px);border-radius:20px;background:rgba(20,12,40,.4);border:1px solid var(--line);text-align:left}
.cmp-title{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:600;color:#fbe3ee;text-align:center;overflow-wrap:anywhere}
.cmp-table{width:100%;margin-top:12px;border-collapse:separate;border-spacing:0 6px;font-size:14.5px}
.cmp-table thead th{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 8px;overflow-wrap:anywhere}
.cmp-table tbody th{font-weight:700;text-align:left;padding:8px;white-space:nowrap}
.cmp-table td{padding:8px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cmp-table tbody tr{background:rgba(255,255,255,.04)}
.cmp-table tbody tr>:first-child{border-radius:12px 0 0 12px}
.cmp-table tbody tr>:last-child{border-radius:0 12px 12px 0}
.cmp-main td{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;font-variant-numeric:lining-nums;color:#fbe3ee}
.cmp-ic{display:inline-grid;place-items:center;width:22px;margin-right:8px;color:var(--c);font-size:17px;vertical-align:-3px}
.cmp-skill td{color:var(--c)}
.cmp-skill td b{margin-left:8px}
.cmp-skill .pc-pips{display:inline-flex;vertical-align:1px}
.cmp-note{margin-top:8px;font-size:14px;color:var(--muted);text-align:center}
.cmp-back{display:block;width:max-content;max-width:100%;margin:12px auto 0;padding:6px 10px;border-radius:8px;font-size:14px;font-weight:700;color:var(--pink);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(243,195,217,.5);overflow-wrap:anywhere}
.cmp-back:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:640px){
  .cmp{padding:16px 10px}
  .cmp-table{table-layout:fixed;font-size:13.5px}
  .cmp-table thead th:first-child,.cmp-table tbody th{width:40%}
  .cmp-table tbody th,.cmp-table td{white-space:normal;overflow-wrap:anywhere;padding:8px 6px}
  .cmp-main td{font-size:17px}
  .cmp-ic{display:none}
  .cmp-skill .pc-pips{display:none}
  .cmp-skill td b{margin-left:0}
}

/* Section labels use the same gap in every kit. */
.share{margin-top:32px;padding-top:0;gap:16px}
.share-sub{margin:0 0 var(--space-label)}
.share [data-kit-panel]{min-width:0}
.kit-tabs{margin:0 0 8px;gap:8px}
.share-lines{grid-auto-rows:1fr;gap:12px}
.share-lines li{padding:16px;gap:8px 12px}
.share-lines .f-hint{margin:0}
.share-sizes legend{margin-bottom:var(--space-label)}
.share-buttons{gap:12px}
.pub-actions{gap:12px}
.pub-msg:empty,.link-msg:empty{display:none}
.profile-link-block{display:grid;gap:16px;padding:24px;border:1px solid var(--line);border-radius:20px;background:#ffffff08;margin-bottom:32px;min-width:0}
.profile-link-block h3{font-size:16px;color:var(--muted)}
.profile-link-address{font-size:17px;font-weight:800;line-height:1.5;overflow-wrap:anywhere;color:var(--pink);user-select:all;-webkit-user-select:all}
.profile-link-block .pub-actions{justify-content:flex-start}
.profile-link-block .btn-primary{margin:0}
.link-msg{font-size:13px;line-height:1.5;color:var(--muted)}
.home-card-line .profile-link-block{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;border:0;padding:0;margin:0;background:none;align-items:center}
.home-card-line .profile-link-block h3{display:none}
.home-card-line .profile-link-address{font-size:14px}
.home-card-line .profile-link-block .btn-primary{min-height:44px;padding:8px 16px;font-size:14px}
.home-card-line .link-msg{grid-column:1/-1}
.pc-skills{grid-auto-rows:1fr}
.pc-sk{min-width:0}
@media(max-width:640px){
 .pc-skills li{grid-template-columns:24px minmax(0,1fr) 24px;gap:8px;padding:12px}
 .pc-skills .pc-ic{grid-column:1;grid-row:1}
 .pc-skills .pc-sk{grid-column:2;grid-row:1;white-space:nowrap;font-size:14px}
 .pc-skills .pc-sl{grid-column:3;grid-row:1}
 .pc-skills .pc-pips{grid-column:2;grid-row:2}
 .card-setup-sheet .pub-pv-full .pc-skills li{min-height:40px;padding:8px 2px}
 .share-lines li{grid-template-columns:minmax(0,1fr) auto;padding:12px}
 .profile-link-block{padding:16px}
}
.hub .pub{gap:16px}
.hub .pub>.sec-title{margin:0}
.hub .pub>.profile-link-block{margin:0 0 16px}
.hub .pub>.member-card-preview{margin:0 auto 16px}
.hub .pub>.share{margin-top:16px}
.card-setup-sheet .pub-linkset legend{margin-bottom:16px}
.card-setup-sheet .pub-form{gap:16px}
.share-lines li{align-items:start}
.hub .pub-actions{gap:12px}
@media(min-width:375px) and (max-width:640px){
 .pc-skills li{grid-template-columns:24px minmax(0,1fr) auto 18px;padding:8px 10px}
 .pc-skills :is(.pc-ic,.pc-sk,.pc-pips,.pc-sl){grid-column:auto;grid-row:auto}
}