/* Dibs sharing: /d/<code> collection page, /c/<id> crew page, and the share
   sheet / toast used by dibs-share.js. Tokens come from yinzider.css. */

.share-page main{background:var(--cream);min-height:60vh}
.share-wrap{max-width:760px;padding-block:clamp(24px,5vw,48px) 64px}

.share-head{margin-bottom:22px}
.share-kicker{font-weight:700;font-size:14px;color:var(--kielbasa-text);margin-bottom:6px}
.share-head h1,.crew-join h1,.crew-home h1{font-family:var(--display);font-weight:400;
  font-size:clamp(28px,6vw,44px);line-height:1.08;margin:0 0 10px;overflow-wrap:anywhere;text-wrap:balance}
.share-lede{color:var(--ink-soft);font-size:16.5px;margin-bottom:16px;max-width:52ch}
.share-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 6px}
.share-page .btn{min-height:44px;justify-content:center}
.share-page .btn.danger{border-color:var(--kielbasa);color:var(--kielbasa-text)}
.share-page .btn.danger:hover{background:var(--kielbasa);color:var(--cream-fixed)}
.share-page .btn[disabled]{opacity:.5;cursor:not-allowed}
.share-status{min-height:1.4em;font-weight:700;font-size:15px;color:var(--pickle)}
.share-fine{font-size:14px;color:var(--ink-soft);margin:10px 0;max-width:60ch}
.share-fine a,.nowt a{color:var(--kielbasa-text);font-weight:700}
.share-note{background:var(--cream-2);border:2px dashed var(--line);border-radius:var(--r-md);
  padding:14px 16px;margin:14px 0;font-weight:600}
.share-error{color:var(--kielbasa-deep);font-weight:700;font-size:15px;margin-top:10px}
.share-error:empty{display:none}

/* ---------- event rows ---------- */
.share-list{list-style:none;display:grid;gap:12px;margin:18px 0}
.share-row{display:grid;grid-template-columns:76px 1fr auto;gap:6px 14px;align-items:center;
  background:var(--cream);border:2px solid var(--line);border-radius:var(--r-md);padding:12px}
.share-row.is-new{border-color:var(--mustard-deep);box-shadow:0 0 0 3px var(--mustard)}
.share-thumb{display:block;width:76px;height:76px;border-radius:var(--r-sm);overflow:hidden;background:var(--cream-3)}
.share-thumb img{width:100%;height:100%;object-fit:cover}
.share-thumb-blank{display:block;width:100%;height:100%;
  background:repeating-linear-gradient(135deg,var(--cream-2) 0 8px,var(--cream-3) 8px 16px)}
.share-info{min-width:0}
.share-info h2{font-family:var(--display);font-weight:400;font-size:19px;line-height:1.2;margin:0 0 4px;overflow-wrap:anywhere}
.share-info h2 a{color:inherit;text-decoration:none}
.share-info h2 a:hover{color:var(--kielbasa-text);text-decoration:underline}
.share-when{font-weight:700;font-size:15px}
.share-venue{font-size:14.5px;color:var(--ink-soft)}
.share-with{font-size:14px;font-weight:700;color:var(--kielbasa-text);margin-top:2px}
.share-save{white-space:nowrap}
.share-save svg{width:20px;height:20px;flex:none}
.share-save[aria-pressed="true"]{background:var(--chair);border-color:var(--chair);color:var(--cream-fixed)}

/* ---------- crew ---------- */
.crew-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.crew-chip{background:var(--cream-2);border:2px solid var(--line);border-radius:var(--r-pill);
  padding:5px 14px;font-weight:700;font-size:15px;overflow-wrap:anywhere}
.crew-chip small{font-weight:600;color:var(--ink-soft);margin-left:6px}
.crew-chip.is-me{border-color:var(--mustard-deep);background:var(--mustard-light)}
.crew-form{display:grid;gap:8px;max-width:420px;margin:16px 0 8px}
.crew-form label,.crew-phones label{font-weight:700;font-size:15px}
.crew-form input,.crew-phones input{font:inherit;min-height:44px;padding:9px 12px;border:2px solid var(--ink);
  border-radius:var(--r-sm);background:var(--cream);color:var(--ink);width:100%}
.crew-form input:focus-visible,.crew-phones input:focus-visible{outline:3px solid var(--kielbasa);outline-offset:2px}
.crew-sub{font-family:var(--display);font-weight:400;font-size:22px;margin:22px 0 6px}
.crew-phones{margin:20px 0;border-top:2px solid var(--line);padding-top:14px}
.crew-phones summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.crew-phones .btn{margin-top:10px}
.crew-leave{margin-top:26px;padding-top:16px;border-top:2px solid var(--line);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.crew-leave [hidden]{display:none}
.crew-leave > span{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* ---------- share sheet and toast (dibs-share.js) ---------- */
.ysh-backdrop{position:fixed;inset:0;background:color-mix(in oklch,var(--porch-deep) 60%,transparent);z-index:1000;display:flex;align-items:flex-end;justify-content:center}
.ysh-sheet{width:min(100%,460px);background:var(--cream);color:var(--ink);border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:20px 16px calc(20px + env(safe-area-inset-bottom));display:grid;gap:10px;font-family:var(--body)}
.ysh-sheet h2{font-family:var(--display);font-weight:400;font-size:21px;margin-bottom:4px}
.ysh-sheet p{font-size:14.5px;color:var(--ink-soft);overflow-wrap:anywhere}
.ysh-sheet .btn{width:100%;min-height:44px;justify-content:center;font-size:16px}
.ysh-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);
  max-width:calc(100vw - 32px);background:var(--ink);color:var(--cream);font:700 15px/1.3 var(--body);
  padding:12px 18px;border-radius:var(--r-pill);z-index:1001}
@media(min-width:640px){.ysh-backdrop{align-items:center}.ysh-sheet{border-radius:var(--r-lg)}}

/* ---------- phones ---------- */
@media(max-width:520px){
  .share-row{grid-template-columns:64px 1fr}
  .share-thumb{width:64px;height:64px}
  .share-save{grid-column:1 / -1;width:100%}
  .share-actions .btn{flex:1 1 100%}
}