/* Stickwise deck sharing (F12, 3 October 2026): the Share panel on a deck page, "Shared with me" in the deck library and
   the read-only shared deck page. Studio tokens from design.css; tiles, hero and card list reuse assets/decks.css. */
.share-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;margin:0 0 30px}
.share-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.share-badge{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:14px;background:var(--lilac);color:var(--blue)}
.share-head h2{font:500 22px/1.2 var(--display);letter-spacing:-.03em;margin:2px 0 4px;outline:none}
.share-status{font-size:14px;color:var(--mut);margin:0}
.share-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.share-option{display:flex;align-items:flex-start;gap:12px;width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--paper);text-align:left;font:inherit;color:inherit;cursor:pointer}
.share-option:hover:not(:disabled){background:var(--canvas)}
.share-option .deck-ic{color:var(--mut);margin-top:2px;flex:none}
.share-option b{display:block;font-size:15px;font-weight:600}
.share-option small{display:block;font-size:12.5px;color:var(--mut);margin-top:2px}
.share-option.is-on{border-color:var(--blue);background:var(--lilac);box-shadow:inset 0 0 0 1px var(--blue)}
.share-option.is-on .deck-ic{color:var(--blue)}
.share-option:focus-visible,.share-remove:focus-visible,.share-pick input:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.share-msg{font-size:14px;line-height:1.45;background:var(--lilac);color:var(--ink);border-radius:12px;padding:10px 14px;margin:0 0 14px}
.share-msg.is-error{background:#fbe9ea;color:var(--red);font-weight:600}
.share-muted{font-size:13.5px;line-height:1.5;color:var(--mut);margin:0 0 12px}
.share-rules{margin:14px 0 0}
.share-audience{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:8px}
.share-audience li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:14px}
.share-avatar{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;background:var(--lime);color:var(--ink);font:600 15px var(--display)}
.share-avatar.is-class{border-radius:12px;background:#e7e0ff;color:var(--blue)}
.share-avatar .deck-ic{width:18px;height:18px}
.share-who{flex:1;min-width:0}
.share-who b{display:block;font-size:15px;font-weight:600;overflow-wrap:break-word}
.share-who small{display:block;font-size:12px;color:var(--mut)}
.share-perm{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mut);white-space:nowrap}
.share-perm .deck-ic{width:16px;height:16px}
.share-picker{margin:14px 0 4px;padding:18px;border-radius:18px;background:var(--canvas)}
.share-picker h3{font:500 18px/1.25 var(--display);letter-spacing:-.02em;margin:0 0 6px}
.share-group{border:0;margin:0 0 14px;padding:0;display:grid;gap:8px;min-width:0}
.share-group legend{font-size:12px;font-weight:650;letter-spacing:.04em;color:var(--mut);margin:0 0 8px;padding:0}
.share-pick{display:flex;align-items:center;gap:12px;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--paper);cursor:pointer}
.share-pick:hover{border-color:#c9c6f6}
.share-pick:has(input:checked){border-color:var(--blue);background:var(--lilac)}
.share-pick input{width:18px;height:18px;margin:0;accent-color:var(--blue);flex:none}
.share-pick-text{flex:1;min-width:0}
.share-pick-text b{display:block;font-size:15px;font-weight:600;overflow-wrap:break-word}
.share-pick-text small{display:block;font-size:12px;color:var(--mut)}
.share-discover{display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;padding-top:14px;border-top:1px dashed #cfd2db;font-size:13px;line-height:1.5;color:var(--mut)}
.share-discover .deck-ic{flex:none;color:var(--blue);margin-top:1px}

/* "Shared with me" in the deck library */
.share-inbox{margin-top:34px}
.share-inbox-head{margin-bottom:16px}
.share-inbox-head h2{font:500 24px/1.2 var(--display);letter-spacing:-.03em;margin:0 0 4px}
.share-inbox-head h2 span{font:500 15px var(--font);color:var(--mut);margin-left:6px;letter-spacing:0}
.share-inbox-head p{font-size:14px;color:var(--mut);margin:0}
.share-inbox-note{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--mut);padding:16px 18px;border:1px dashed #cfd2db;border-radius:18px;margin:0}
.share-inbox-note p{flex:1;margin:0}
.share-from{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mut);margin:0}
.share-from .deck-ic{width:14px;height:14px;flex:none}
.share-from span{min-width:0;overflow-wrap:anywhere}
.share-from b{color:var(--ink);font-weight:600}

/* the read-only shared deck page */
.share-readonly{display:flex;align-items:center;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px 18px;margin-bottom:20px}
.share-readonly .deck-ic{flex:none;color:var(--blue)}
.share-readonly p{flex:1;font-size:14px;color:var(--ink);margin:0}

@media(max-width:760px){
  .share-panel{padding:18px;border-radius:20px}
  .share-options{grid-template-columns:1fr}
  .share-audience li{flex-wrap:wrap}
  .share-perm{order:3;flex-basis:calc(100% - 48px);margin-left:48px}
  .share-remove{margin-left:auto}
  .share-picker{padding:14px}
  .share-inbox-note .btn{width:100%}
  .share-hero .deck-hero-actions>.btn:nth-child(2){order:1}.share-hero .deck-hero-actions>.deck-more{order:2}   /* Quick quiz and More share a row; */
  .share-hero .deck-hero-actions>.btn:nth-child(3){order:3;grid-column:1 / -1}                                 /* Save a copy gets a row of its own */
}