/**
 * ActRight Shortcode Styles
 *
 * Styles for petition embed and petition list shortcodes.
 * V15.06: Matches block styling for consistent display.
 *
 * @package ActRight
 */

/* CSS Custom Properties */
:root {
  --gs-bg: #ffffff;
  --gs-border: #e5e7eb;
  --gs-border-style: solid;
  --gs-text: #1f2937;
  --gs-text-muted: #6b7280;
  --gs-text-shadow: none;
  --gs-primary: #2563eb;
  --gs-progress-bg: #e5e7eb;
  --gs-progress-fill: #2563eb;
  --gs-button: #2563eb;
  --gs-button-text: #ffffff;
}

/* Petition List Styles */
.actright-petitions-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-family: var(--gs-font-family, inherit);
  /* Inherited by item titles/descriptions; default = no change. */
  font-weight: var(--gs-font-weight, inherit);
  text-align: var(--gs-text-align, inherit);
  text-shadow: var(--gs-text-shadow, none);
}

/* The Petition List block/shortcode exposes a Layout choice. `list` is the
   stacked default above and needs nothing extra. `grid` had no rule at all
   until now, so choosing it changed nothing on a published page. */
.actright-petitions-list.layout-grid {
  display: grid;
  /* min() keeps a single column on narrow screens instead of overflowing. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  align-items: start;
}

/* A grid cell is too narrow for the card's side-by-side image, so the same
   card stacks: image on top, content beneath. No markup change — one card
   template serves both layouts. */
.actright-petitions-list.layout-grid .actright-petition-list-item {
  flex-direction: column;
  height: 100%;
}

.actright-petitions-list.layout-grid .actright-petition-list-item__image {
  width: 100%;
  max-width: none;
  /* Sticky only makes sense beside a long scrolling description. */
  position: static;
}

/* The block editor previews the list with its own React markup
   (.actright-petition-list__items--grid / --list, one .actright-petition-card
   per item) rather than the server template, so it needs its own pair of
   rules. They live here because this is the only plugin stylesheet that is
   actually loaded: it is enqueued on `enqueue_block_assets`, which reaches both
   the front end and the editor iframe. src/blocks/*/style.css is imported by
   nothing and declared in no block.json, so every rule in those files — the
   original home of these two — has never applied anywhere. Without this, the
   Layout control still looked inert while editing. */
.actright-petition-list__items--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1.5rem;
  align-items: start;
}

.actright-petition-list__items--list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.actright-petition-list__item {
  min-width: 0;
}

.actright-petition-list-item {
  display: flex;
  gap: 1.25rem;
  padding: var(--gs-spacing, 1.25rem);
  align-items: flex-start;
  background: var(--gs-bg, #ffffff);
  border: var(--gs-border-width, 1px) var(--gs-border-style, solid) var(--gs-border, #e5e7eb);
  border-radius: var(--gs-radius, 8px);
  box-shadow: var(--gs-shadow, none);
}

.actright-petition-list-item__image {
  flex-shrink: 0;
  width: 38%;
  max-width: 240px;
  /* Stays in view while a long description scrolls past. */
  position: sticky;
  top: 1rem;
}

.actright-petition-list-item__image img {
  display: block;
  width: 100%;
  /* Fixed 4:3 thumbnail, top-anchored, so long content can't stretch it into
     a distorted strip. */
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: center top;
  border-radius: 6px;
}

.actright-petition-list-item__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.actright-petition-list-item__title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.actright-petition-list-item__title a {
  color: var(--gs-text, #1f2937);
  text-decoration: none;
}

.actright-petition-list-item__title a:hover {
  color: var(--gs-primary, #2563eb);
  text-decoration: underline;
}

.actright-petition-list-item .actright-petition-card__description {
  margin: 0 0 0.5rem;
}

.actright-petition-list-item .actright-petition-card__description-content {
  font-size: 0.875rem;
  color: var(--gs-text-muted, #6b7280);
  line-height: 1.5;
}

/* Compact list cards clamp to fewer lines than the large embed. */
.actright-petition-list-item
  .actright-petition-card__description.is-clamped
  .actright-petition-card__description-content {
  -webkit-line-clamp: 3;
}

/* Normalize rich-text headings inside the compact card so an <h2> in the body
   doesn't dominate the card (e.g. a "Call to Action!" heading). */
.actright-petition-list-item
  .actright-petition-card__description-content
  :is(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
}

.actright-petition-list-item
  .actright-petition-card__description-content
  p {
  margin: 0 0 0.4rem;
}

.actright-petition-list-item__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.actright-petition-list-item__avatar {
  width: var(--gs-avatar-size, 20px);
  height: var(--gs-avatar-size, 20px);
  border-radius: 50%;
  object-fit: cover;
}

.actright-petition-list-item__creator {
  font-size: 0.75rem;
  color: var(--gs-text-muted, #6b7280);
}

.actright-petition-list-item__stats {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.actright-petition-list-item__progress {
  flex: 1;
  min-width: 100px;
}

.actright-petition-list-item__progress-bar {
  height: 4px;
  background: var(--gs-progress-bg, #e5e7eb);
  border-radius: 2px;
  overflow: hidden;
}

.actright-petition-list-item__progress-fill {
  height: 100%;
  background: var(--gs-progress-fill, #2563eb);
  border-radius: 2px;
}

.actright-petition-list-item__count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gs-text, #1f2937);
}

.actright-petition-list-item__badge {
  padding: 0.125rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 9999px;
}

.actright-petition-list-item__badge--victory {
  background: #dcfce7;
  color: #166534;
}

.actright-petition-list-item__sign-link {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gs-primary, #2563eb);
  border: var(--gs-border-width, 1px) var(--gs-border-style, solid) var(--gs-primary, #2563eb);
  border-radius: var(--gs-button-radius, 4px);
  text-decoration: none;
  transition: all 0.2s ease;
}

.actright-petition-list-item__sign-link:hover {
  background: var(--gs-primary, #2563eb);
  color: #ffffff;
}

/* Single Petition Embed Styles
   These selectors match the markup emitted by templates/petition-embed.php
   (.actright-petition-card__*) and templates/petition-list.php item cards. */
.actright-petition-embed {
  display: flex;
  flex-direction: column;
  gap: var(--gs-gap, 1rem);
  padding: var(--gs-spacing, 1.5rem);
  background: var(--gs-bg, #ffffff);
  border: var(--gs-border-width, 1px) var(--gs-border-style, solid) var(--gs-border, #e5e7eb);
  border-radius: var(--gs-radius, 8px);
  color: var(--gs-text, #1f2937);
  box-shadow: var(--gs-shadow, none);
  font-family: var(--gs-font-family, inherit);
  /* Inherited by the title, description and counts; default = no change.
     text-align also positions the inline-block image (see __image img). The
     flex-based count/creator rows additionally honour --gs-flex-justify. */
  font-weight: var(--gs-font-weight, inherit);
  text-align: var(--gs-text-align, inherit);
  text-shadow: var(--gs-text-shadow, none);
}

.actright-petition-card__image {
  margin: 0;
}

.actright-petition-card__image img {
  width: var(--gs-image-width, 100%);
  height: var(--gs-image-height, auto);
  /* Defaults to the 400px cap; an explicit image-height raises/lowers it. */
  max-height: var(--gs-image-height, 400px);
  object-fit: cover;
  border-radius: 6px;
  /* inline-block so a sized image (image-width < 100%) follows text-align
     (the wrapper's --gs-text-align cascades here). Full-width is unaffected. */
  display: inline-block;
  vertical-align: top;
}

.actright-petition-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.actright-petition-card__title {
  margin: 0;
  font-size: var(--gs-heading-size, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--gs-text, #1f2937);
}

.actright-petition-card__description {
  margin: 0;
  font-size: var(--gs-font-size, 1rem);
  line-height: var(--gs-line-height, 1.6);
  color: var(--gs-text, #1f2937);
}

/* Rich-text (HTML) description rendered from the petition body.
 *
 * The colour has to be restated on the descendants, not just inherited from the
 * container above. Inheritance only reaches an element that no other rule
 * targets, and practically every theme styles `h2`, `a` and `li` directly — so
 * a "Call to Action!" heading inside the petition body kept the theme's colour
 * while the paragraphs around it followed the Text setting. Naming the
 * descendants (specificity 0,2,1) puts the token back in front of a theme's
 * `h2` (0,0,1) or `.entry-content h2` (0,1,1). */
.actright-petition-card__description
  .actright-petition-card__description-content
  :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, blockquote, figcaption, strong, b, em, i, span, table, thead, tbody, tr, th, td) {
  color: inherit;
}

/* Links are the deliberate exception: they follow the Accent token, which is
   what the settings panel offers them under ("Accent (links, headings,
   progress bar)"). */
.actright-petition-card__description
  .actright-petition-card__description-content
  a {
  color: var(--gs-primary, #2563eb);
}

.actright-petition-card__description-content > :first-child {
  margin-top: 0;
}

.actright-petition-card__description-content > :last-child {
  margin-bottom: 0;
}

.actright-petition-card__description-content img {
  max-width: 100%;
  height: auto;
}

/* Clamped preview: show ~6 lines, revealed by the "Read more" toggle. */
.actright-petition-card__description.is-clamped
  .actright-petition-card__description-content {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.actright-petition-card__description.is-clamped.is-expanded
  .actright-petition-card__description-content {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.actright-petition-card__read-more {
  margin-top: 0.4rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--gs-primary, #2563eb);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.actright-petition-card__read-more:hover {
  text-decoration: underline;
}

/* Inline signing form (rendered inside the card instead of a modal). */
.actright-inline-sign-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gs-border, #e5e7eb);
}

.actright-inline-sign-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.actright-inline-sign-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.actright-inline-sign-form__field label {
  font-size: 0.85rem;
  font-weight: 600;
  /* Sits on the card background, so it follows the Text token like every other
     label on the card. It used to be hardcoded, which is why the form labels
     stayed dark while the text around them changed colour. */
  color: var(--gs-text, #374151);
}

.actright-inline-sign-form__field input[type="text"],
.actright-inline-sign-form__field input[type="email"],
.actright-inline-sign-form__field textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  font-size: 0.95rem;
  color: #1f2937;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-sizing: border-box;
  font-family: inherit;
}

.actright-inline-sign-form__field input:focus,
.actright-inline-sign-form__field textarea:focus {
  outline: none;
  /* Follows the Accent token, like the create form's focus ring already did.
     Hardcoding blue here left a blue halo around a red-accented form. The glow
     is derived from the same colour; a browser without color-mix() drops just
     that line and keeps the border, so focus stays visible either way. */
  border-color: var(--gs-primary, #2563eb);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gs-primary, #2563eb) 20%, transparent);
}

.actright-inline-sign-form__field textarea {
  resize: vertical;
  min-height: 80px;
}

.actright-inline-sign-form__field--checkbox label {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  font-size: 0.9rem;
}

.actright-inline-sign-form__error {
  margin: 0;
  min-height: 1.25rem;
  font-size: 0.85rem;
  color: #b91c1c;
}

.actright-inline-sign-form__success {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 1rem 1.25rem;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
  color: #166534;
  background: #dcfce7;
  border: 1px solid #86efac;
  border-radius: 8px;
}

.actright-inline-sign-form__success::before {
  content: "\2713"; /* check mark */
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}

.actright-inline-sign-form__success p {
  margin: 0;
}

.actright-petition-card__creator {
  display: flex;
  align-items: center;
  justify-content: var(--gs-flex-justify, flex-start);
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--gs-text-muted, #6b7280);
}

.actright-petition-card__avatar {
  width: var(--gs-avatar-size, 24px);
  height: var(--gs-avatar-size, 24px);
  border-radius: 50%;
  object-fit: cover;
}

.actright-petition-card__count {
  display: flex;
  align-items: baseline;
  /* Honour text-align (left/center/right) — flex ignores text-align, so the
     count is positioned via justify-content instead. Default = left. */
  justify-content: var(--gs-flex-justify, flex-start);
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.95rem;
  color: var(--gs-text-muted, #6b7280);
}

.actright-petition-card__count-number {
  /* Defaults to the emphasised 1.25rem and ignores the body --gs-font-size so a
     site-wide font size never shrinks the count. An explicit font-size set on a
     [actright-el type="count"] element is exposed as --gs-count-size (see
     ActRight_Elements::size_vars) so that override does take effect. */
  font-size: var(--gs-count-size, 1.25rem);
  font-weight: 700;
  color: var(--gs-text, #1f2937);
}

.actright-petition-card__sign-button {
  /* Alignment within the card/form (a flex column); "full" sets width:100%. */
  align-self: var(--gs-button-align, flex-start);
  width: var(--gs-button-width, auto);
  display: inline-block;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  color: var(--gs-button-text, #ffffff);
  background: var(--gs-button, var(--gs-primary, #2563eb));
  border: none;
  border-radius: var(--gs-button-radius, 6px);
  cursor: pointer;
  transition:
    filter 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* Outline button style — activates only when the wrapper opts in via the
   --gs-button-style:outline token (set by the styling API). Inert otherwise. */
[style*="--gs-button-style:outline"] .actright-petition-card__sign-button {
  background: transparent;
  color: var(--gs-button, var(--gs-primary, #2563eb));
  border: var(--gs-border-width, 1px) var(--gs-border-style, solid) var(--gs-button, var(--gs-primary, #2563eb));
}

.actright-petition-card__sign-button:hover {
  filter: brightness(0.93);
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.actright-petition-card__sign-button:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Standalone [actright-donate-button] placed directly in page content. */
.actright-donate-button {
  margin: 0.5rem 0;
}

.actright-petition-card__victory,
.actright-petition-card__closed {
  align-self: flex-start;
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 9999px;
}

.actright-petition-card__victory {
  background: #dcfce7;
  color: #166534;
}

.actright-petition-card__closed {
  background: #f3f4f6;
  color: #4b5563;
}

/* Signature progress bar (inside the embed card). */
.actright-signature-progress {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.actright-signature-progress__bar {
  height: 8px;
  background: var(--gs-progress-bg, #e5e7eb);
  border-radius: 4px;
  overflow: hidden;
}

.actright-signature-progress__fill {
  height: 100%;
  background: var(--gs-progress-fill, #2563eb);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.actright-signature-progress__text {
  font-size: 0.875rem;
  color: var(--gs-text-muted, #6b7280);
}

.actright-signature-progress__current,
.actright-signature-progress__goal {
  font-weight: 600;
  color: var(--gs-text, #1f2937);
}

/* Sign modal injected at runtime by frontend/petition-sign.ts. */
.actright-sign-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, var(--gs-overlay-opacity, 0.55));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 100000;
}

.actright-sign-modal {
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: #ffffff;
  color: #1f2937;
  border-radius: 10px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
}

.actright-sign-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
}

.actright-sign-modal__header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}

.actright-sign-modal__close {
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.actright-sign-modal__close:hover {
  background: #f3f4f6;
  color: #1f2937;
}

.actright-sign-modal__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.actright-sign-modal__petition-name {
  margin: 0;
  font-size: 0.95rem;
  color: #4b5563;
  font-style: italic;
}

.actright-sign-modal__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.actright-sign-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.actright-sign-modal__field label {
  font-size: 0.85rem;
  font-weight: 600;
  /* See the note on the inline form's label. The modal is appended to <body>,
     so this reads the site-wide value rather than one widget's override. */
  color: var(--gs-text, #374151);
}

.actright-sign-modal__field input[type="text"],
.actright-sign-modal__field input[type="email"],
.actright-sign-modal__field textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  font-size: 0.95rem;
  color: #1f2937;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-sizing: border-box;
  font-family: inherit;
}

.actright-sign-modal__field input:focus,
.actright-sign-modal__field textarea:focus {
  outline: none;
  border-color: var(--gs-primary, #2563eb);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gs-primary, #2563eb) 20%, transparent);
}

.actright-sign-modal__field textarea {
  resize: vertical;
  min-height: 80px;
}

.actright-sign-modal__field label:has(input[type="checkbox"]) {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  font-size: 0.9rem;
}

.actright-sign-modal__error {
  margin: 0;
  min-height: 1.25rem;
  font-size: 0.85rem;
  color: #b91c1c;
}

.actright-sign-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 0 0 10px 10px;
}

.actright-sign-modal__cancel,
.actright-sign-modal__submit {
  padding: 0.55rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.actright-sign-modal__cancel {
  background: #ffffff;
  color: #374151;
  border-color: #d1d5db;
}

.actright-sign-modal__cancel:hover {
  background: #f3f4f6;
}

.actright-sign-modal__submit {
  /* Same tokens as the card's sign button. Hardcoded blue here meant a site
     with a red Button colour got a red button on the card and a blue one in
     the modal it opens. `filter` matches how the card darkens on hover, so no
     second colour has to be kept in step. */
  background: var(--gs-button, var(--gs-primary, #2563eb));
  color: var(--gs-button-text, #ffffff);
}

.actright-sign-modal__submit:hover {
  filter: brightness(0.93);
}

.actright-sign-modal__submit:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

.actright-sign-modal__success {
  text-align: center;
  padding: 1rem 0;
  font-size: 1.05rem;
}

/* Shortcode error styling */
.actright-shortcode-error {
  padding: 1rem;
  background: #fee2e2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #991b1b;
  font-size: 0.875rem;
}

/* Petition Creation Form
   Server-rendered by class-blocks.php::render_petition_create() for the
   petition-create block and the [actright type="create"] shortcode. Consumes
   the same --gs-* design tokens as the other components (with plugin-default
   fallbacks) so a Style Kit / preset applied to the wrapper actually reaches the
   form. */
.actright-petition-create {
  font-family: var(--gs-font-family, inherit);
  font-size: var(--gs-font-size, 1rem);
  line-height: var(--gs-line-height, 1.6);
  text-shadow: var(--gs-text-shadow, none);
}

.actright-petition-form {
  max-width: 600px;
  padding: var(--gs-spacing, 2rem);
  color: var(--gs-text, #1f2937);
  background: var(--gs-bg, #ffffff);
  border: var(--gs-border-width, 1px) var(--gs-border-style, solid)
    var(--gs-border, #e5e7eb);
  border-radius: var(--gs-radius, 8px);
  box-shadow: var(--gs-shadow, none);
  box-sizing: border-box;
}

.actright-petition-form__title {
  margin: 0 0 1.5rem;
  font-size: var(--gs-heading-size, 1.5rem);
  font-weight: var(--gs-font-weight, 600);
  color: var(--gs-text, #1f2937);
  text-align: var(--gs-text-align, left);
}

.actright-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
}

.actright-form-field label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gs-text, #1f2937);
}

.actright-form-field input,
.actright-form-field textarea,
.actright-form-field select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--gs-text, #1f2937);
  background: var(--gs-bg, #ffffff);
  border: 1px solid var(--gs-border, #d1d5db);
  border-radius: var(--gs-radius, 6px);
  box-sizing: border-box;
}

.actright-form-field textarea {
  min-height: 96px;
  resize: vertical;
}

.actright-form-field input:focus,
.actright-form-field textarea:focus,
.actright-form-field select:focus {
  outline: none;
  border-color: var(--gs-primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.actright-form-field small {
  font-size: 0.8rem;
  color: var(--gs-text-muted, #6b7280);
}

.actright-petition-form__error {
  margin: 0.75rem 0 0;
  min-height: 1.25rem;
  font-size: 0.85rem;
  color: #b91c1c;
}

.actright-petition-form__noscript {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gs-border, #e5e7eb);
  border-radius: 6px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 0.9rem;
}

.actright-petition-form__success {
  padding: 1.5rem 0;
  text-align: center;
}

.actright-petition-form__success p {
  margin: 0 0 0.75rem;
}

.actright-petition-form__actions {
  display: flex;
  justify-content: var(--gs-button-align, flex-start);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gs-border, #e5e7eb);
}

.actright-submit-button {
  width: var(--gs-button-width, auto);
  min-width: 150px;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  color: var(--gs-button-text, #ffffff);
  background: var(--gs-button, var(--gs-primary, #2563eb));
  border: none;
  border-radius: var(--gs-button-radius, 6px);
  cursor: pointer;
  transition:
    filter 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* Outline button style — honours the --gs-button-style:outline token the same
   way the card sign button does. Inert otherwise. */
[style*="--gs-button-style:outline"] .actright-submit-button {
  background: transparent;
  color: var(--gs-button, var(--gs-primary, #2563eb));
  border: var(--gs-border-width, 1px) var(--gs-border-style, solid)
    var(--gs-button, var(--gs-primary, #2563eb));
}

.actright-submit-button:hover {
  filter: brightness(0.93);
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.actright-submit-button:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Dark theme for the creation form when the wrapper opts into auto and the OS is
   in dark mode (theme-dark/theme-light are handled by the shared rules below). */
@media (prefers-color-scheme: dark) {
  .actright-petition-create.theme-auto {
    --gs-bg: #1f2937;
    --gs-border: #374151;
    --gs-text: #f9fafb;
    --gs-text-muted: #9ca3af;
    --gs-primary: #3b82f6;
  }
}

/* Theme Variants */
.theme-dark {
  --gs-bg: #1f2937;
  --gs-border: #374151;
  --gs-text: #f9fafb;
  --gs-text-muted: #9ca3af;
  --gs-primary: #3b82f6;
  --gs-progress-bg: #374151;
  --gs-progress-fill: #3b82f6;
}

.theme-light {
  --gs-bg: #ffffff;
  --gs-border: #e5e7eb;
  --gs-text: #1f2937;
  --gs-text-muted: #6b7280;
  --gs-primary: #2563eb;
  --gs-progress-bg: #e5e7eb;
  --gs-progress-fill: #2563eb;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .actright-petition-list-item {
    flex-direction: column;
  }

  .actright-petition-list-item__image {
    width: 100%;
    max-width: none;
    position: static;
  }

  .actright-petition-list-item__image img {
    aspect-ratio: 16 / 9;
  }

  .actright-petition-card__sign-button {
    align-self: stretch;
    display: block;
    width: 100%;
    text-align: center;
  }

  .actright-sign-modal__row {
    grid-template-columns: 1fr;
  }
}

/* Recent signatures */
.actright-recent-signatures {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gs-border);
}

.actright-recent-signatures__title {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gs-text-muted);
}

/* Honours the Gap control; the previous fixed spacing is the fallback, so an
   untouched element is unchanged. --gs-gap was read by one rule in the whole
   stylesheet before this, which left the control inert on every element. */
.actright-recent-signatures__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gs-gap, 0.5rem);
}

.actright-recent-signatures__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--gs-text);
}

/* Optional signer avatar (opt-in; only rendered when enabled and present). */
.actright-recent-signatures__avatar {
  align-self: center;
  width: var(--gs-avatar-size, 1.5rem);
  height: var(--gs-avatar-size, 1.5rem);
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.actright-recent-signatures__name {
  font-weight: 600;
}

.actright-recent-signatures__location {
  color: var(--gs-text-muted);
}

.actright-recent-signatures__date {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--gs-text-muted);
}

/* Recent signatures — carousel (auto-scrolling ticker) variant.
   Two identical tracks scroll left as one; translating the marquee by -50%
   lands the duplicate exactly where the original began, so the loop is
   seamless. The duplicate track is aria-hidden in the template. */
.actright-recent-signatures__viewport {
  overflow: hidden;
  /* Fade the rows in/out at the edges so items don't pop on/off. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 1.5rem,
    #000 calc(100% - 1.5rem),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 1.5rem,
    #000 calc(100% - 1.5rem),
    transparent
  );
}

.actright-recent-signatures__marquee {
  display: flex;
  width: max-content;
  animation: actright-recent-signatures-scroll var(--gs-carousel-speed, 40s) linear infinite;
}

.actright-recent-signatures__viewport:hover .actright-recent-signatures__marquee,
.actright-recent-signatures__viewport:focus-within .actright-recent-signatures__marquee {
  animation-play-state: paused;
}

.actright-recent-signatures--carousel .actright-recent-signatures__track {
  flex-direction: row;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 0;
}

.actright-recent-signatures--carousel .actright-recent-signatures__item {
  flex-wrap: nowrap;
  flex-shrink: 0;
  padding: 0 1.25rem;
  white-space: nowrap;
}

.actright-recent-signatures--carousel .actright-recent-signatures__item:not(:last-child) {
  border-right: 1px solid var(--gs-border);
}

.actright-recent-signatures--carousel .actright-recent-signatures__date {
  margin-left: 0;
}

@keyframes actright-recent-signatures-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Respect reduced-motion: drop the animation and let the track scroll/wrap. */
@media (prefers-reduced-motion: reduce) {
  .actright-recent-signatures__viewport {
    overflow-x: auto;
  }

  .actright-recent-signatures__marquee {
    animation: none;
  }

  /* The duplicate track is redundant without motion; hide it. */
  .actright-recent-signatures__marquee .actright-recent-signatures__track[aria-hidden="true"] {
    display: none;
  }
}

/* Decision-maker targets */
.actright-targets {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gs-border);
}

.actright-targets__title {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gs-text-muted);
}

.actright-targets__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gs-gap, 0.75rem);
}

.actright-targets__item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.actright-targets__avatar {
  width: var(--gs-avatar-size, 5rem);
  height: var(--gs-avatar-size, 5rem);
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.actright-targets__info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.actright-targets__name {
  font-weight: 600;
  color: var(--gs-text);
}

.actright-targets__role {
  font-size: 0.8125rem;
  color: var(--gs-text-muted);
}

.actright-targets__x {
  font-size: 0.8125rem;
  color: var(--gs-primary);
  text-decoration: none;
}

.actright-targets__x:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Post-signature popups (share + donation)
   Injected at runtime by frontend/petition-sign.ts after a successful sign.
   ========================================================================== */

.actright-postsign-overlay {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, var(--gs-overlay-opacity, 0.6));
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.actright-postsign-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.actright-postsign-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 550px;
  max-height: 90vh;
  overflow: hidden;
  background: #ffffff;
  color: #111827;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: scale(0.9);
  opacity: 0;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.actright-postsign-overlay.is-active .actright-postsign-modal {
  transform: scale(1);
  opacity: 1;
}

.actright-postsign-modal__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.actright-postsign-modal__header {
  padding: 30px 30px 20px;
  text-align: center;
  border-bottom: 1px solid #f3f4f6;
}

.actright-postsign-modal__icon {
  display: block;
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
}

.actright-postsign-modal__icon svg {
  width: 100%;
  height: 100%;
}

.actright-postsign-modal__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: #111827;
}

.actright-postsign-modal__subtitle {
  margin: 8px 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #6b7280;
}

.actright-postsign-modal__body {
  padding: 30px;
}

.actright-postsign-modal__footer {
  padding: 0 30px 30px;
}

.actright-postsign-modal__close {
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: #6b7280;
  background: #f3f4f6;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

.actright-postsign-modal__close:hover {
  color: #374151;
  background: #e5e7eb;
  transform: rotate(90deg);
}

/* Share grid */
.actright-postsign-share-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.actright-postsign-share-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: #111827;
  background: #f9fafb;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.actright-postsign-share-btn svg {
  width: 40px;
  height: 40px;
  fill: currentColor;
}

.actright-postsign-share-btn:hover {
  background: #ffffff;
  border-color: #9ca3af;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.actright-postsign-share-btn--facebook {
  color: #1877f2;
  background: #eff6ff;
  border-color: #1877f2;
}

.actright-postsign-share-btn--twitter {
  color: #1da1f2;
  background: #eff6ff;
  border-color: #1da1f2;
}

.actright-postsign-share-btn--whatsapp {
  color: #25d366;
  background: #f0fdf4;
  border-color: #25d366;
}

.actright-postsign-share-btn--linkedin {
  color: #0a66c2;
  background: #eff6ff;
  border-color: #0a66c2;
}

/* Copy link */
.actright-postsign-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  background: #374151;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.actright-postsign-copy-btn:hover {
  background: #1f2937;
  transform: translateY(-2px);
}

.actright-postsign-copy-btn.is-copied {
  background: #10b981;
}

.actright-postsign-copy-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Skip */
.actright-postsign-modal__skip {
  width: 100%;
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 600;
  color: #6b7280;
  background: transparent;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.actright-postsign-modal__skip:hover {
  color: #374151;
  background: #f9fafb;
  border-color: #9ca3af;
}

/* Donation embed wrapper */
.actright-postsign-donation-embed {
  width: 100%;
}

.actright-postsign-donation-embed iframe {
  width: 100%;
  border: 0;
}

/* Mobile: slide up from the bottom, single-column share grid */
@media (max-width: 768px) {
  .actright-postsign-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .actright-postsign-modal {
    max-height: 95vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }

  .actright-postsign-overlay.is-active .actright-postsign-modal {
    transform: translateY(0);
  }

  .actright-postsign-share-grid {
    grid-template-columns: 1fr;
  }

  .actright-postsign-modal__header {
    padding: 25px 20px 15px;
  }

  .actright-postsign-modal__body {
    padding: 20px;
  }

  .actright-postsign-modal__footer {
    padding: 0 20px 25px;
  }

  .actright-postsign-modal__title {
    font-size: 1.5rem;
  }
}

/* ==========================================================================
   Composable container ([actright-container]) + elements ([actright-el])
   A plain layout box the site owner fills with individual elements. Defaults
   render an invisible, transparent box; style tokens turn it into a card.
   ========================================================================== */
.actright-container {
  display: flex;
  flex-direction: column;
  gap: var(--gs-container-gap, 1rem);
  max-width: var(--gs-container-max, none);
  /* Main-axis distribution (flex) / track alignment (grid). */
  justify-content: var(--gs-container-justify, normal);
  background: var(--gs-bg, transparent);
  color: var(--gs-text, inherit);
  padding: var(--gs-spacing, 0);
  border: var(--gs-border-width, 0) var(--gs-border-style, solid)
    var(--gs-border, transparent);
  border-radius: var(--gs-radius, 0);
  box-shadow: var(--gs-shadow, none);
  text-shadow: var(--gs-text-shadow, none);
  font-family: var(--gs-font-family, inherit);
  font-weight: var(--gs-font-weight, inherit);
  text-align: var(--gs-text-align, inherit);
}

/* Column layout: align-items default stretch (unchanged) but now overridable. */
.actright-container--column {
  align-items: var(--gs-container-align, stretch);
}

.actright-container--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: var(--gs-container-align, flex-start);
}

.actright-container--grid {
  display: grid;
  grid-template-columns: repeat(var(--gs-container-cols, 2), minmax(0, 1fr));
  justify-items: var(--gs-container-align, stretch);
}

/* A standalone element is a box in its own right, so the appearance controls
 * have to land on this wrapper. They used not to: only weight, alignment and
 * margin were read here, and everything else depended on whether the element's
 * inner markup happened to contain a rule using that token — which is why
 * Background did nothing on 13 of the 14 element widgets, Padding and Shadow on
 * all 14, and so on.
 *
 * Two mechanisms, and the difference matters:
 *
 *  - Tokens with no :root declaration (sizes, spacing, radius, shadow) are read
 *    with a var() fallback. Unset means the fallback, which is the value the
 *    element already had, so nothing moves until the author sets something.
 *
 *  - The colour tokens ARE declared on :root, so for them a fallback can never
 *    mean "unset" — var(--gs-bg, transparent) resolves to the :root white and
 *    would paint a box behind every element. Those are gated on the element's
 *    own inline style instead, the same trick this file already uses for
 *    --gs-button-style. */
.actright-el {
  min-width: 0;
  box-sizing: border-box;
  font-family: var(--gs-font-family, inherit);
  font-size: var(--gs-font-size, inherit);
  line-height: var(--gs-line-height, inherit);
  font-weight: var(--gs-font-weight, inherit);
  text-align: var(--gs-text-align, inherit);
  align-self: var(--gs-self-align, auto);
  margin: var(--gs-margin, 0);
  padding: var(--gs-spacing, 0);
  border-radius: var(--gs-radius, 0);
  box-shadow: var(--gs-shadow, none);
}

.actright-el[style*="--gs-text:"] {
  color: var(--gs-text);
}

.actright-el[style*="--gs-bg:"] {
  background: var(--gs-bg);
}

.actright-el[style*="--gs-border:"] {
  border: var(--gs-border-width, 1px) var(--gs-border-style, solid)
    var(--gs-border);
}

.actright-el[style*="--gs-text-shadow:"] {
  text-shadow: var(--gs-text-shadow);
}

/* A filled or outlined box with its text against the edge reads as broken, so
   one is padded unless the author chose their own padding. */
.actright-el[style*="--gs-bg:"],
.actright-el[style*="--gs-border:"] {
  padding: var(--gs-spacing, 1rem);
}

/* Standalone button elements are flex columns so the button's align-self
   (set by the button-align token) takes effect outside a card/form too. */
.actright-el--sign-button,
.actright-el--donation {
  display: flex;
  flex-direction: column;
}

.actright-container--row > .actright-el {
  flex: 1 1 auto;
}

.actright-el-spacer {
  width: 100%;
}

.actright-el-divider {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: var(--gs-border-width, 1px) var(--gs-border-style, solid)
    var(--gs-border, #e5e7eb);
}

/* Inline social share row (independent of the post-signature share popup). */
.actright-social__label {
  margin: 0 0 0.5rem;
  font-weight: 700;
  text-align: center;
  color: var(--gs-text, #1f2937);
}

.actright-social__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--gs-gap, 0.5rem);
}

.actright-social__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: var(--gs-text, #1f2937);
  background: transparent;
  border: 1px solid var(--gs-border, #d1d5db);
  border-radius: 9999px;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.actright-social__btn svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.actright-social__btn:hover {
  transform: translateY(-1px);
  border-color: var(--gs-primary, #2563eb);
  color: var(--gs-primary, #2563eb);
}

.actright-social__btn--copy.is-copied {
  color: #10b981;
  border-color: #10b981;
}

/* Decision-maker targets — card view (grid of bordered cards). The list view
   is unchanged; this only applies under the --card modifier. */
.actright-targets--card .actright-targets__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
}

.actright-targets--card .actright-targets__item {
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  text-align: center;
  background: var(--gs-bg, #ffffff);
  border: var(--gs-border-width, 1px) var(--gs-border-style, solid)
    var(--gs-border, #e5e7eb);
  border-radius: var(--gs-radius, 8px);
}

.actright-targets--card .actright-targets__info {
  align-items: center;
}