/* Job detail: public share link (2026-11-07).
   The Share button sits in .jdp-actions; when a link is on, .jsh-box shows
   it with Copy / Open / Turn off and the view count. Theme tokens only, so
   it follows Light (default) and Dark. */

.jsh-btn svg { flex: none; }

.jsh-box {
  margin: 0 0 18px;
  padding: 14px 16px 12px;
  border-radius: 10px;
  background: var(--accent-faint, var(--vercel-elevated));
  box-shadow: inset 0 0 0 1px var(--border-accent, var(--vercel-border-strong));
}
.jsh-box[hidden] { display: none; }

.jsh-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.jsh-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--emerald);
  box-shadow: 0 0 0 3px var(--emerald-glow);
}
.jsh-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.jsh-meta { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.jsh-row { display: flex; gap: 6px; align-items: center; }
.jsh-url {
  flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px;
  border: 0; border-radius: var(--radius);
  background: var(--vercel-surface); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--vercel-border-strong);
  font: 400 13px/1 var(--font-mono);
  text-overflow: ellipsis;
}
.jsh-url:focus-visible { outline: none; box-shadow: var(--vercel-focus); }
.jsh-row .btn-secondary, .jsh-row .btn-ghost { flex: none; }

.jsh-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }

@media (max-width: 640px) {
  .jsh-row { flex-wrap: wrap; }
  .jsh-url { flex-basis: 100%; }
  .jsh-row .btn-secondary, .jsh-row .btn-ghost { flex: 1 1 0; }
  .jsh-meta { margin-left: 0; flex-basis: 100%; }
}