/*
 * The share panel (template-parts/share-panel.php + js/share.js), 2026-09-25.
 *
 * Without JavaScript: a <details> that opens in the flow of the page.
 * With it (.share.is-js): a popover under the button, and from 600px down a
 * bottom sheet over a veil. Rules are two classes deep on purpose: the panel
 * sits inside the profile's .side-links, whose "a" and "button" rules would
 * otherwise flatten every option into a plain text link.
 *
 * Colour: neutral chips; WhatsApp's green only on the WhatsApp chip (the one
 * place the palette rule allows it). No yellow surface anywhere.
 */

.share{position:relative}
.share summary{list-style:none;cursor:pointer}
.share summary::-webkit-details-marker{display:none}
.share .share-toggle{display:flex;align-items:center;gap:10px;width:100%}
/* The toggle's icon has a size of its own. An inline SVG with only a viewBox
   takes the width of its box: bare, it measured 55px on a news article and
   222px (390) to 712px (1280) on a job and a place (Playwright, 2026-10-01).
   Fixed here, once, for every page that includes the panel. */
.share .share-toggle svg{width:16px;height:16px;flex:none}

/* ---- panel ---- */
.share .share-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px;margin-top:6px;display:grid;gap:12px}
.share .share-panel[hidden]{display:none}
.share .share-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.share .share-title{margin:0;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.01em}
.share .share-close{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  padding:0;border:none;border-radius:var(--r-sm);background:none;color:var(--muted)}
.share .share-close[hidden]{display:none}
.share .share-close:hover{background:var(--bg-2);color:var(--ink)}
.share .share-close svg{width:18px;height:18px}

.share .share-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.share .share-opt{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r-md);
  font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;background:none}
.share .share-opt:hover{background:var(--bg-2);color:var(--ink)}
.share .share-ico{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:50%;background:var(--bg-2);color:var(--ink)}
.share .share-ico svg{width:17px;height:17px}
.share .share-wa .share-ico{background:var(--wa-soft);color:var(--wa-btn)}
.share .share-wa .share-ico svg{width:19px;height:19px}

/* ---- copy ---- */
.share .share-copy{display:grid;gap:6px;border-top:1px solid var(--line);padding-top:12px}
.share .share-copy label{font-size:12.5px;color:var(--faint)}
.share .share-copy-row{display:flex;gap:8px;min-width:0}
.share .share-copy input{flex:1;min-width:0;height:38px;padding:0 10px;font-size:13px;color:var(--muted);
  background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-sm)}
.share [data-share-copy]{display:inline-flex;align-items:center;gap:6px;flex:none;height:38px;padding:0 12px;
  font-size:13.5px;font-weight:600;color:var(--petrol);background:transparent;
  border:1.5px solid var(--line-2);border-radius:var(--r-sm)}
.share [data-share-copy]:hover{border-color:var(--petrol);background:var(--petrol-wash);color:var(--petrol)}
.share [data-share-copy][hidden]{display:none}
.share [data-share-copy] svg{width:16px;height:16px}
.share .share-status{margin:0;font-size:13px;font-weight:600;color:var(--ok)}
.share .share-status:empty{margin:0}

.share .share-more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:9px;
  font-size:14px;font-weight:500;color:var(--ink);background:var(--bg-2);border:none;border-radius:var(--r-md)}
.share .share-more[hidden]{display:none}
.share .share-more:hover{background:var(--line)}
.share .share-more svg{width:16px;height:16px}

.share .share-hint{margin:0;display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--faint)}
.share .share-hint svg{width:15px;height:15px;flex:none;margin-top:2px}

.share-backdrop{display:none}

/* ---- enhanced: popover ---- */
.share.is-js .share-panel{position:absolute;z-index:60;top:calc(100% + 6px);left:0;margin:0;
  width:min(330px,calc(100vw - 32px));box-shadow:var(--shadow-2)}

/* ---- enhanced, phone: bottom sheet ---- */
@media (max-width:600px){
  .share.is-js .share-panel{position:fixed;z-index:310;top:auto;left:0;right:0;bottom:0;width:auto;
    max-height:85vh;overflow-y:auto;border-radius:var(--r-xl) var(--r-xl) 0 0;border-bottom:none;
    padding:16px 16px calc(18px + env(safe-area-inset-bottom))}
  .share.is-js .share-backdrop{display:block;position:fixed;inset:0;z-index:300;background:rgba(7,38,28,.45)}
  .share.is-js .share-backdrop[hidden]{display:none}
  .share .share-opt{padding:10px 8px}
}

@media (prefers-reduced-motion:no-preference){
  .share.is-js .share-panel:not([hidden]){animation:share-in .16s var(--ease)}
  @keyframes share-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}