/* ==========================================================================
   PROJECT SHARE — styles for the accessible sharing controls (project-share.js)
   Uses the shared Storm Bolt Roofing design tokens so it reads as native chrome.
   Scoped entirely under .pshare — adds no global rules.
   ========================================================================== */
.pshare {
  border: 1px solid var(--line, #E6EBF1);
  background: var(--paper, #fff);
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  max-width: 820px;
  margin-inline: auto;
}
.pshare__title {
  font-size: 1.05rem;
  margin: 0 0 14px;
  color: var(--ink, #0E1B38);
}
.pshare__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}
.pshare__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;            /* WCAG 2.2 target size */
  padding: 10px 14px;
  border-radius: var(--radius-sm, 9px);
  border: 1px solid var(--line, #E6EBF1);
  background: #fff;
  color: var(--navy-800, #173064);
  font: inherit;
  font-weight: 600;
  font-size: .92rem;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.pshare__btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.pshare__btn:hover { background: #F5F8FC; border-color: #C9D6E4; }
.pshare__btn:active { transform: translateY(1px); }
.pshare__btn:focus-visible {
  outline: 3px solid var(--gold-500, #D2B24C);
  outline-offset: 2px;
}
/* Primary native-share button — filled navy to signal the recommended action. */
.pshare__btn--native {
  background: var(--navy-800, #173064);
  color: #fff;
  border-color: var(--navy-800, #173064);
}
.pshare__btn--native:hover { background: var(--navy-700, #1A437F); border-color: var(--navy-700, #1A437F); }
/* Copy-confirmed state */
.pshare__btn--copy.is-copied {
  background: #E9F7EF;
  border-color: #38A169;
  color: #1F6B42;
}
.pshare__status {
  display: block;
  margin-top: 10px;
  min-height: 1.1em;
  font-size: .85rem;
  color: var(--ink-soft, #5A6B7B);
  word-break: break-all;
}

@media (max-width: 520px) {
  .pshare__list { gap: 8px; }
  .pshare__btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pshare__btn { transition: none; }
  .pshare__btn:active { transform: none; }
}
@media (prefers-color-scheme: dark) {
  /* The public site is light-only; guard anyway so the widget never renders
     invisible if a project page ever opts into a dark surface. */
  .pshare { background: var(--paper, #fff); }
}