/* WeVote redesign — card + card-action styles (comment tap-zones, rich-text
   card bodies, the wv-oa action overlays: share/edit/delete/report/quote/reply,
   and proposal-card pill + tally). Split out of components.css to keep it lean.
   Loaded after components.css + Tailwind. */

/* ---- comment tap zones: the card surface + plain body text open the thread
   (a full-card overlay link in ShellComponent). Inline links AND embedded link
   previews (video iframes) keep their own clicks by sitting above that overlay,
   so they stay interactive instead of triggering the card. (kit comp-comment-tap-zones) */
.wv-comment-body a,
.wv-comment-body iframe { position: relative; z-index: 10; }

/* ---- long unbroken strings (mashed text, URLs) wrap to the next line instead of
   blowing out the card width. Covers every card body (comment/discussion/question/
   repost) and the clamped descriptions (proposal/bill). */
.wv-comment-body,
.desc-clamp { overflow-wrap: break-word; }

/* ---- rich-text card description (election, etc.): inline links sit above the
   card overlay AND look like links (accent + underline). */
.wv-card-richtext a {
  position: relative; z-index: 10;
  color: var(--accent-ink); text-decoration: underline; font-weight: 500;
}
.wv-card-richtext a:hover { color: var(--accent); }

/* ---- action overlay (wv-oa): Share sheet — desktop popup / mobile bottom-sheet.
   Shared modal chassis; Edit & Delete will reuse it. Toggle with `.is-shown`.
   used by: Wevote::Share::ModalComponent (chassis shared with Card::Actions::*ModalComponent) */
.wv-oa { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.wv-oa.is-shown { opacity: 1; pointer-events: auto; }
.wv-oa__scrim { position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 46%, transparent); backdrop-filter: blur(3px); }
.wv-oa__card { position: relative; width: min(460px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--surface); color: var(--ink); border: 1px solid var(--hairline-strong); border-radius: 20px; box-shadow: var(--shadow-pop); overflow: hidden; transform: translateY(10px) scale(.985); opacity: .6; transition: transform .26s cubic-bezier(.22,.61,.36,1), opacity .2s ease; }
.wv-oa.is-shown .wv-oa__card { transform: none; opacity: 1; }
.wv-oa__handle { display: none; }
.wv-oa__head { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 12px; border-bottom: 1px solid var(--hairline); flex: none; }
.wv-oa__title { text-align: center; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 15px; }
.wv-oa__x { width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; border-radius: 10px; color: var(--faint); cursor: pointer; }
.wv-oa__x:hover { background: var(--sunken); color: var(--ink); }
.wv-oa__share-body { padding: 18px 20px 6px; }
.wv-oa__share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 8px; }
.wv-oa__share-opt { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 0; font: inherit; cursor: pointer; text-decoration: none; }
.wv-oa__share-ic { width: 54px; height: 54px; border-radius: 999px; display: grid; place-items: center; box-shadow: var(--shadow-soft); transition: transform .13s ease, box-shadow .13s ease; }
.wv-oa__share-opt:hover .wv-oa__share-ic { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.wv-oa__share-ic svg { width: 24px; height: 24px; }
.wv-oa__share-lbl { font-size: 12px; color: var(--muted); }
.wv-oa__copybar { display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; padding: 7px 7px 7px 14px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--paper); }
.wv-oa__copybar-url { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--muted); font-family: ui-monospace, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wv-oa__copybar-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 15px; border-radius: 10px; border: 0; background: var(--accent); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s ease; }
.wv-oa__copybar-btn:hover { background: var(--accent-hover); }
.wv-oa__copybar-btn:active { transform: translateY(1px); }

/* ---- Edit variant: author header, textarea, image area, footer (kit own-actions).
   used by: Wevote::Card::Actions::EditModalComponent */
.wv-oa--edit .wv-oa__card { width: min(540px, 100%); }
.wv-oa__body { padding: 16px 18px; overflow-y: auto; flex: 1 1 auto; }
.wv-oa__who { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.wv-oa__av { width: 38px; height: 38px; flex: none; border-radius: 999px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; font-size: 13px; overflow: hidden; }
.wv-oa__av img { width: 100%; height: 100%; object-fit: cover; }
.wv-oa__name { font-weight: 600; font-size: 14.5px; line-height: 1.1; }
.wv-oa__sub { font-size: 12.5px; color: var(--faint); margin-top: 1px; }
.wv-oa__ta { width: 100%; resize: none; border: 1px solid var(--hairline); border-radius: 14px; background: var(--paper); color: var(--ink); padding: 13px 14px; font: inherit; font-size: 15px; line-height: 1.55; min-height: 132px; transition: border-color .15s ease, box-shadow .15s ease; }
.wv-oa__ta::placeholder { color: var(--faint); }
.wv-oa__ta:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* image area — kit composer visual language. Button stays put; a small preview
   sits to its right (never a big block, and identical small size on mobile). */
.wv-oa__media { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.wv-oa__thumb { position: relative; width: 64px; height: 64px; flex: none; border-radius: 12px; overflow: hidden; border: 1px solid var(--hairline); }
.wv-oa__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wv-oa__thumb-x { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--ink) 62%, transparent); color: #fff; cursor: pointer; backdrop-filter: blur(2px); }
.wv-oa__thumb-x:hover { background: var(--ink); }
.wv-oa__add-img { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 1px dashed var(--hairline-strong); border-radius: 12px; background: transparent; color: var(--accent); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.wv-oa__add-img:hover { background: var(--accent-soft); border-color: var(--accent); }
.wv-oa__err { margin: 10px 0 0; font-size: 13px; color: var(--st-unres-fg); }
.wv-oa__err:empty { display: none; }
.wv-oa__foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--hairline); background: var(--paper); flex: none; }
.wv-oa__count { font-size: 12px; font-family: ui-monospace, monospace; color: var(--faint); }
.wv-oa__count.over { color: var(--st-unres-fg); }
.wv-oa__spacer { flex: 1 1 auto; }
.wv-oa__btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s ease; }
.wv-oa__btn--ghost { background: transparent; border-color: var(--hairline-strong); color: var(--muted); }
.wv-oa__btn--ghost:hover { background: var(--sunken); color: var(--ink); }
.wv-oa__btn--primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-soft); }
.wv-oa__btn--primary:hover { background: var(--accent-hover); }
.wv-oa__btn--primary:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }
.wv-oa__btn--danger { background: var(--st-unres-dot); color: #fff; box-shadow: var(--shadow-soft); }
.wv-oa__btn--danger:hover { background: color-mix(in srgb, var(--st-unres-dot) 86%, #000); }
.wv-oa__btn:active { transform: translateY(1px); }

/* ---- Confirm variant: destructive two-step delete (kit own-actions).
   used by: Wevote::Card::Actions::DeleteModalComponent */
.wv-oa--confirm .wv-oa__card { width: min(420px, 100%); }
.wv-oa__confirm-body { padding: 24px 22px 20px; text-align: center; }
.wv-oa__warn { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 999px; display: grid; place-items: center; background: var(--st-unres-bg); color: var(--st-unres-fg); }
.wv-oa__confirm-title { font-weight: 600; font-size: 18px; }
.wv-oa__confirm-text { font-size: 14px; line-height: 1.55; color: var(--muted); margin-top: 7px; }
.wv-oa__confirm-quote { margin-top: 14px; text-align: left; font-size: 13px; line-height: 1.5; color: var(--muted); background: var(--paper); border: 1px solid var(--hairline); border-radius: 12px; padding: 10px 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wv-oa__confirm-quote[hidden] { display: none; }
.wv-oa__confirm-foot { display: flex; gap: 10px; padding: 6px 18px 18px; }
.wv-oa__confirm-foot .wv-oa__btn { flex: 1; }

/* ---- Report variant: reason radio list + "Something else" detail (kit own-actions).
   used by: Wevote::Report::ModalComponent */
.wv-oa__report-lede { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0 0 14px; }
.wv-oa__reasons { display: flex; flex-direction: column; gap: 6px; }
.wv-oa__reason { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 13px; border: 1px solid var(--hairline); border-radius: 13px; background: var(--surface); cursor: pointer; font: inherit; transition: border-color .12s ease, background .12s ease; }
.wv-oa__reason:hover { border-color: var(--hairline-strong); background: var(--sunken); }
.wv-oa__reason.is-sel { border-color: var(--accent); background: var(--accent-soft); }
.wv-oa__reason-radio { width: 18px; height: 18px; flex: none; border-radius: 999px; border: 2px solid var(--hairline-strong); display: grid; place-items: center; transition: border-color .12s ease; }
.wv-oa__reason.is-sel .wv-oa__reason-radio { border-color: var(--accent); }
.wv-oa__reason.is-sel .wv-oa__reason-radio::after { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--accent); }
.wv-oa__reason-txt { display: flex; flex-direction: column; min-width: 0; }
.wv-oa__reason-title { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.wv-oa__reason-desc { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.wv-oa__report-detail { margin-top: 12px; }
.wv-oa__report-detail-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }

/* ---- Manage variant: owner lifecycle actions. Portaled to <body> by
   manage_controller so it clears the shell; z-100 + the dark wizard-style scrim
   (the default wv-oa scrim is theme-tinted). used by: petitions/_manage_modal */
.wv-oa--manage { z-index: 100; }
.wv-oa--manage .wv-oa__scrim { background: rgba(8, 10, 12, .52); }
.wv-oa__acts { display: flex; flex-direction: column; gap: 8px; }
.wv-oa__act { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 12px 13px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface); cursor: pointer; font: inherit; transition: border-color .12s ease, background .12s ease, box-shadow .15s ease, transform .12s ease; }
.wv-oa__act:hover { border-color: var(--hairline-strong); background: var(--sunken); box-shadow: var(--shadow-soft); }
.wv-oa__act:active { transform: translateY(1px); }
.wv-oa__act--static { cursor: default; }
.wv-oa__act--static:hover { border-color: var(--hairline); background: var(--surface); box-shadow: none; }
.wv-oa__act-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; }
.wv-oa__act-ic svg { width: 20px; height: 20px; }
.wv-oa__act-ic--accent { background: var(--accent-soft); color: var(--accent-ink); }
.wv-oa__act-ic--open { background: var(--st-open-bg); color: var(--st-open-fg); }
.wv-oa__act-ic--pending { background: var(--st-pending-bg); color: var(--st-pending-fg); }
.wv-oa__act-ic--arch { background: var(--st-arch-bg); color: var(--st-arch-fg); }
.wv-oa__act-ic--resolved { background: var(--st-res-bg); color: var(--st-res-fg); }
.wv-oa__act-tx { display: flex; flex-direction: column; min-width: 0; }
.wv-oa__act-t { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.wv-oa__act-s { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; line-height: 1.4; }

/* ---- Quote variant: compose a repost over a static preview of the source card.
   used by: Wevote::Repost::QuoteModalComponent */
.wv-oa--quote .wv-oa__card { width: min(600px, 100%); }
.wv-oa__quote-preview { margin-top: 14px; pointer-events: none; }
.wv-oa__quote-preview:empty { display: none; }

/* ---- Reply variant: compose a reply over a static preview of the card replied
   to, under a "Replying to" line. used by: Wevote::Reply::ModalComponent */
.wv-oa--reply .wv-oa__card { width: min(560px, 100%); }
.wv-oa--reply .wv-oa__quote-preview { margin-top: 0; margin-bottom: 12px; }
.wv-oa__reply-to { font-size: 13px; color: var(--muted); margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wv-oa__reply-to:empty { display: none; }
.wv-oa__reply-to b, .wv-oa__reply-to a { color: var(--accent-ink); font-weight: 600; }
.wv-oa__reply-to a:hover { text-decoration: underline; }
.wv-oa__reply-row { display: flex; gap: 12px; align-items: flex-start; }
.wv-oa__ta--reply { min-height: 92px; }

@media (max-width: 640px) {
  .wv-oa { place-items: end center; padding: 0; }
  .wv-oa__card { width: 100%; max-width: none; max-height: 92vh; border-radius: 22px 22px 0 0; border-bottom: 0; transform: translateY(100%); opacity: 1; }
  .wv-oa--edit .wv-oa__card { width: 100%; }
  .wv-oa--confirm .wv-oa__card { width: 100%; }
  .wv-oa--report .wv-oa__card { width: 100%; }
  .wv-oa--quote .wv-oa__card { width: 100%; }
  .wv-oa--reply .wv-oa__card { width: 100%; }
  .wv-oa.is-shown .wv-oa__card { transform: none; }
  .wv-oa__handle { display: block; width: 38px; height: 4px; border-radius: 999px; background: var(--hairline-strong); margin: 9px auto 1px; flex: none; }
  .wv-oa__head { padding-top: 6px; }
}

/* ---- proposal card: jurisdiction pill (neutral categorical chip) ----
   used by: Wevote::Proposals::CardComponent */
.juris-pill {
  display: inline-flex; align-items: center; gap: .34em;
  font-size: 11px; font-weight: 600; line-height: 1;
  letter-spacing: .02em;
  padding: .42em .58em .42em .5em; border-radius: 7px;
  background: var(--sunken); color: var(--muted);
  border: 1px solid var(--hairline); white-space: nowrap;
}

/* ---- proposal card: signature tally bar (animated fill driven by the
   generic `progress-bar` Stimulus controller) ---- */
.tally-track {
  position: relative; height: 8px; border-radius: 999px;
  background: var(--sunken); overflow: hidden;
}
.tally-fill {
  position: absolute; inset: 0 auto 0 0; height: 100%;
  width: 0; border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 82%, #fff) 0%, var(--accent) 100%);
  transition: width .9s cubic-bezier(.22,.61,.36,1);
}
.tally-fill.is-success {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 70%, #fff) 0%, var(--accent) 100%);
}
@media (prefers-reduced-motion: reduce) { .tally-fill { transition: none; } }