/* ProAgri Client Portal - Agri4All advert preview.

   TWO LAYERS, deliberately never blended:

   1. THE REPLICA  (.pa-a4a-mk, .pa-a4a-card and their children)
      agri4all.com's own card and product page. Neutral greys, tight 1px
      hairlines, the marketplace's red on the price, the CLIENT's logo in the
      breadcrumb row, card titles at regular weight because that is how the
      marketplace sets them. This is the CONTENT BEING APPROVED. It carries no
      ProAgriMedia CI at all, and that immovability is the entire point of the
      screen: what the client signs off is what publishes.

      Do not "fix" the 400 weight on .pa-a4a-card-title. It is not the Instrument
      Serif leftover the brief warns about - no display font is set on it, and
      agri4all.com sets its card titles regular. The brief's carve-out beats the
      type rule inside this layer.

   2. PORTAL CHROME  (.pa-a4a-pc, the slot, the stage, the banner, the filters,
      the approval bar, the composer, the history)
      ProAgriMedia CI. Navy is chrome, red is action, yellow is "waiting on you",
      Poppins carries the headings, and depth comes from --pa-shadow rather than
      from an outline. This is the layer the client reads as "us asking you for a
      decision", and it is the ONLY layer that was redesigned.

   The join between the two is a frame, never a re-skin. A replica sits on an
   accent-soft mat inside a big-radius, shadowed panel, with the status carried on
   the frame's header instead of stamped over the creative - so the card reads as
   "a preview of an ad" while every pixel of the ad itself stays where it was.

   No literal colour, radius, shadow or spacing appears below: everything resolves
   through --pa-* so both layers stay honest. */

/* ── View shell ─────────────────────────────────────────────────────────── */
.pa-a4a-view {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-5);
}

.pa-a4a-center {
  display: flex;
  justify-content: center;
  margin-top: var(--pa-space-4);
}

/* Uppercase ProAgriMedia label. Navy, because an eyebrow is chrome and chrome is
   navy - spending red on a label that marks no action would break the 30/30/20/10
   weighting the guideline sets. */
.pa-a4a-eyebrow {
  color: var(--pa-accent-ink);
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-xs);
  font-weight: 600;
  letter-spacing: var(--pa-track-eyebrow);
  line-height: 1.4;
  text-transform: uppercase;
}

/* ── Page head (portal chrome) ──────────────────────────────────────────── */
.pa-a4a-pagehead {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-2);
}

/* ── Filter chips (portal chrome) ───────────────────────────────────────── */
.pa-a4a-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
  margin-top: calc(var(--pa-space-2) * -1);
}

/* Pills, floating on the canvas. Depth from a small shadow, not from a heavy
   outline; the hairline is only there to hold the edge against white cards. */
.pa-a4a-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-2);
  min-height: 44px;
  padding: var(--pa-space-2) var(--pa-space-4);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface);
  box-shadow: var(--pa-shadow-sm);
  color: var(--pa-text-muted);
  font: inherit;
  font-size: var(--pa-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--pa-dur-fast) var(--pa-ease),
    border-color var(--pa-dur-fast) var(--pa-ease),
    box-shadow var(--pa-dur-fast) var(--pa-ease),
    color var(--pa-dur-fast) var(--pa-ease);
}

.pa-a4a-filter:hover {
  border-color: var(--pa-border-strong);
  box-shadow: var(--pa-shadow);
  color: var(--pa-text);
}

/* The active chip is a solid red pill: choosing a filter IS the action on this
   row, and red is the action colour. */
.pa-a4a-filter[aria-pressed='true'] {
  background: var(--pa-brand-primary);
  border-color: var(--pa-brand-primary);
  box-shadow: var(--pa-shadow);
  color: var(--pa-brand-primary-contrast);
}

.pa-a4a-filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  padding: 0 var(--pa-space-1);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface-3);
  color: var(--pa-text-muted);
  font-size: var(--pa-text-xs);
  font-weight: 700;
}

/* A small saturated marker: the count of ads waiting on the client is the one
   number on this screen that has to be noticed, so it takes the yellow. */
.pa-a4a-filter.is-pending .pa-a4a-filter-count {
  background: var(--pa-warning-mark);
  color: var(--pa-black);
}

.pa-a4a-filter[aria-pressed='true'] .pa-a4a-filter-count {
  background: color-mix(in srgb, var(--pa-brand-primary-contrast) 24%, transparent);
  color: var(--pa-brand-primary-contrast);
}

/* The file input is visually hidden, so its focus ring has to be lent to the
   label that stands in for it. Everything else takes the global :focus-visible
   ring from base.css. */
.pa-a4a-file:focus-visible + .pa-a4a-filebtn {
  outline: 2px solid var(--pa-brand-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--pa-surface), 0 0 0 6px var(--pa-brand-ring);
}

/* ── Grid ───────────────────────────────────────────────────────────────── */
/* Three columns at the widest, not four: each ad now travels inside a framed
   panel, and a framed thing needs room around it to read as framed. */
.pa-a4a-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pa-space-5);
}

@media (min-width: 620px) { .pa-a4a-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pa-a4a-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pa-a4a-grid { gap: var(--pa-space-6); } }

/* PORTAL CHROME: the floating panel a replica travels in. */
.pa-a4a-slot {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-3);
  min-width: 0;
  padding: var(--pa-space-3);
  border-radius: var(--pa-radius-xl);
  background: var(--pa-surface);
  box-shadow: var(--pa-shadow);
  color: var(--pa-text);
  text-decoration: none;
  transition: box-shadow var(--pa-dur) var(--pa-ease), transform var(--pa-dur) var(--pa-ease);
}

.pa-a4a-slot:hover {
  box-shadow: var(--pa-shadow-lg);
  transform: translateY(-3px);
}

/* Yellow ring = this one is waiting on the client. Only this state gets it:
   "changes requested" is waiting on US, and approved is settled, so ringing
   either would spend the 10% colour on something that needs no action. */
.pa-a4a-slot.is-pending {
  box-shadow: var(--pa-shadow), inset 0 0 0 2px color-mix(in srgb, var(--pa-warning-mark) 78%, transparent);
}

.pa-a4a-slot.is-pending:hover {
  box-shadow: var(--pa-shadow-lg), inset 0 0 0 2px var(--pa-warning-mark);
}

.pa-a4a-slot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pa-space-2);
  min-height: 24px;
  padding: var(--pa-space-1) var(--pa-space-2) 0;
}

/* The mat. A navy-tinted ground so the white replica sitting on it reads as a
   mounted print rather than as more of the panel. */
.pa-a4a-slot-frame {
  display: flex;
  flex: 1;
  min-width: 0;
  padding: var(--pa-space-3);
  border-radius: var(--pa-radius-lg);
  background: var(--pa-accent-soft);
}

/* The replica fills the frame, so a row of slots ends level and the ad's own
   footer sits on the frame's bottom edge instead of leaving a white gutter. */
.pa-a4a-slot-frame > .pa-a4a-card { flex: 1; }

/* THE REPLICA. Boxy, hairlined, no ProAgriMedia token anywhere below. */
.pa-a4a-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--pa-surface);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-sm);
  overflow: hidden;
  color: var(--pa-text);
  text-decoration: none;
}

.pa-a4a-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--pa-surface-3);
}

.pa-a4a-media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pa-a4a-media-blank {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--pa-text-faint);
}

/* The status pill lives on the frame's header, never over the creative. */
.pa-a4a-pill { flex: none; }

.pa-a4a-strip {
  padding: var(--pa-space-2) var(--pa-space-3);
  border-bottom: 1px solid var(--pa-border);
  background: var(--pa-surface-2);
  color: var(--pa-text-muted);
  font-size: var(--pa-text-xs);
  font-weight: 600;
}

.pa-a4a-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--pa-space-2);
  padding: var(--pa-space-3);
  min-width: 0;
}

.pa-a4a-crumbrow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pa-space-3);
  min-height: 20px;
}

.pa-a4a-crumb {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
  color: var(--pa-text-muted);
  font-size: var(--pa-text-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* The CLIENT's own mark, on the ad being approved. Stays. */
.pa-a4a-brandmark {
  flex: none;
  width: auto;
  height: 20px;
  max-width: 84px;
  object-fit: contain;
  object-position: right center;
}

/* Regular weight on purpose - see the note at the top of this file. */
.pa-a4a-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  color: var(--pa-text);
  font-size: var(--pa-text-md);
  font-weight: 400;
  line-height: 1.35;
}

.pa-a4a-card-price {
  margin: auto 0 0;
  color: var(--pa-text);
  font-size: var(--pa-text-md);
  font-weight: 700;
}

.pa-a4a-cardmeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pa-space-3);
  padding: var(--pa-space-2) var(--pa-space-3);
  border-top: 1px solid var(--pa-border);
  color: var(--pa-text-muted);
  font-size: var(--pa-text-xs);
}

.pa-a4a-ref { font-weight: 600; letter-spacing: 0.02em; }

.pa-a4a-views {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-1);
  color: var(--pa-text-muted);
  white-space: nowrap;
}

.pa-a4a-cardcta {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: var(--pa-space-2) var(--pa-space-3);
  border-top: 1px solid var(--pa-border);
  background: var(--pa-surface-2);
  color: var(--pa-text-muted);
  font-size: var(--pa-text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background var(--pa-dur-fast) var(--pa-ease), color var(--pa-dur-fast) var(--pa-ease);
}

.pa-a4a-slot:hover .pa-a4a-cardcta { background: var(--pa-surface-3); color: var(--pa-text); }

/* ── Detail: preview banner (portal chrome) ─────────────────────────────── */
.pa-a4a-detail { padding-bottom: var(--pa-space-8); }

/* Navy carries the chrome in this CI, so the band that says "you are looking at
   a preview, and here is the way back" is the navy panel. It sits ABOVE the
   replica rather than wrapping it - nothing of ours frames the ad in colour. */
.pa-a4a-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pa-space-3);
  padding: var(--pa-space-4) var(--pa-space-5);
  border-radius: var(--pa-radius-xl);
  background: var(--pa-brand-accent);
  box-shadow: var(--pa-shadow);
  color: var(--pa-on-dark);
}

.pa-a4a-banner-main {
  display: flex;
  flex: 1 1 260px;
  align-items: center;
  gap: var(--pa-space-3);
  min-width: 0;
}

.pa-a4a-banner-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--pa-radius-pill);
  background: color-mix(in srgb, var(--pa-on-dark) 16%, transparent);
  color: var(--pa-on-dark);
}

.pa-a4a-banner-copy {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-1);
  min-width: 0;
}

.pa-a4a-banner-copy .pa-a4a-eyebrow { color: var(--pa-on-dark-muted); }

.pa-a4a-banner-text {
  margin: 0;
  color: var(--pa-on-dark);
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-md);
  font-weight: 600;
  letter-spacing: var(--pa-track-heading);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.pa-a4a-back {
  display: inline-flex;
  order: -1;
  align-items: center;
  gap: var(--pa-space-1);
  min-height: 44px;
  padding: 0 var(--pa-space-4);
  border-radius: var(--pa-radius-pill);
  background: color-mix(in srgb, var(--pa-on-dark) 12%, transparent);
  color: var(--pa-on-dark);
  font-size: var(--pa-text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--pa-dur-fast) var(--pa-ease);
}

.pa-a4a-back:hover { background: color-mix(in srgb, var(--pa-on-dark) 24%, transparent); }

/* ── Detail: the stage the replica sits on (portal chrome) ──────────────── */
.pa-a4a-stage {
  padding: var(--pa-space-3);
  border-radius: var(--pa-radius-xl);
  background: var(--pa-accent-soft);
  box-shadow: var(--pa-shadow);
}

@media (min-width: 768px) {
  .pa-a4a-stage { padding: var(--pa-space-4); }
}

/* ── Detail: the replica ────────────────────────────────────────────────── */
.pa-a4a-mk {
  display: block;
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-sm);
  background: var(--pa-surface);
  overflow: hidden;
}

.pa-a4a-titlebar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pa-space-4);
  padding: var(--pa-space-4);
  border-bottom: 1px solid var(--pa-border);
  background: var(--pa-surface-3);
}

.pa-a4a-titlebar-main {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-1);
  min-width: 0;
  flex: 1 1 260px;
}

.pa-a4a-title {
  margin: 0;
  color: var(--pa-text);
  font-size: var(--pa-text-lg);
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.pa-a4a-titlebar-price {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pa-space-1);
  text-align: left;
}

.pa-a4a-pricelabel {
  color: var(--pa-text-muted);
  font-size: var(--pa-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The marketplace's own red on the price, not ours acting as a button. */
.pa-a4a-price {
  color: var(--pa-danger);
  font-size: var(--pa-text-xl);
  font-weight: 700;
  line-height: 1.1;
}

.pa-a4a-pricenote { color: var(--pa-text-muted); font-size: var(--pa-text-xs); }

@media (min-width: 768px) {
  .pa-a4a-titlebar-price { align-items: flex-end; text-align: right; }
}

/* ── Detail: gallery ────────────────────────────────────────────────────── */
.pa-a4a-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pa-space-3);
  padding: var(--pa-space-4);
}

@media (min-width: 900px) {
  .pa-a4a-gallery { grid-template-columns: 60fr 40fr; }
}

.pa-a4a-hero-cell { min-width: 0; }

.pa-a4a-hero {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-sm);
  background: var(--pa-surface-3);
  overflow: hidden;
  cursor: zoom-in;
}

.pa-a4a-hero-blank {
  display: grid;
  place-items: center;
  color: var(--pa-text-faint);
  cursor: default;
}

.pa-a4a-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--pa-dur-slow) var(--pa-ease);
}

.pa-a4a-hero:hover .pa-a4a-hero-img { transform: scale(1.02); }

.pa-a4a-hero-zoom {
  position: absolute;
  right: var(--pa-space-2);
  bottom: var(--pa-space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-1);
  padding: var(--pa-space-1) var(--pa-space-2);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-sm);
  background: var(--pa-surface);
  color: var(--pa-text);
  font-size: var(--pa-text-xs);
  font-weight: 600;
}

.pa-a4a-thumbs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: min-content;
  gap: var(--pa-space-3);
  min-width: 0;
}

/* Under 900px the 2x2 grid becomes a horizontal scroll rail, so the hero can
   take the full width without squashing the thumbs into stamps. */
@media (max-width: 899px) {
  .pa-a4a-thumbs {
    display: flex;
    gap: var(--pa-space-2);
    overflow-x: auto;
    padding-bottom: var(--pa-space-2);
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .pa-a4a-thumb {
    flex: 0 0 44%;
    scroll-snap-align: start;
  }
}

.pa-a4a-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-sm);
  background: var(--pa-surface-2);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--pa-dur-fast) var(--pa-ease);
}

.pa-a4a-thumb:hover { border-color: var(--pa-border-strong); }

.pa-a4a-thumb.is-active {
  border-color: var(--pa-text);
  border-width: 2px;
}

.pa-a4a-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The real site fills the empty slots with recessed "coming soon" tiles. */
.pa-a4a-thumb-soon {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--pa-space-1);
  border-style: dashed;
  background: var(--pa-surface-3);
  box-shadow: inset 0 1px 3px color-mix(in srgb, var(--pa-navy) 8%, transparent);
  color: var(--pa-text-muted);
  font-size: var(--pa-text-xs);
  font-weight: 600;
  text-align: center;
  cursor: default;
}

/* Beside the hero the four tiles divide the hero's height between them, the way
   the real product page packs its thumb block. The 16:9 ratio is dropped here on
   purpose - object-fit: cover crops the tiles, exactly as the site does. Declared
   after the base .pa-a4a-thumb rule so it actually wins. */
@media (min-width: 900px) {
  .pa-a4a-thumbs {
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    align-self: stretch;
  }
  .pa-a4a-thumb { aspect-ratio: auto; min-height: 0; }
}

/* ── Detail: panels ─────────────────────────────────────────────────────── */
.pa-a4a-panel {
  margin: 0 var(--pa-space-4) var(--pa-space-4);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-sm);
  background: var(--pa-surface);
  overflow: hidden;
}

.pa-a4a-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pa-space-3);
  padding: var(--pa-space-3) var(--pa-space-4);
  border-bottom: 1px solid var(--pa-border);
  background: var(--pa-surface-2);
}

.pa-a4a-panel-title {
  margin: 0;
  color: var(--pa-text);
  font-size: var(--pa-text-md);
  font-weight: 700;
}

.pa-a4a-panel-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pa-space-2);
}

.pa-a4a-panel-tools .pa-btn { min-height: 44px; }

.pa-a4a-panel-body {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-4);
  padding: var(--pa-space-4);
}

/* Bold-label spec lines, as printed on the product page. */
.pa-a4a-specs {
  display: grid;
  gap: var(--pa-space-1);
  margin: 0;
}

.pa-a4a-spec {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
  padding: var(--pa-space-1) 0;
}

.pa-a4a-spec-label {
  color: var(--pa-text);
  font-weight: 700;
  font-size: var(--pa-text-sm);
}

.pa-a4a-spec-value {
  margin: 0;
  color: var(--pa-text-muted);
  font-size: var(--pa-text-sm);
}

.pa-a4a-copy { max-width: var(--pa-reading-max); }

.pa-a4a-block + .pa-a4a-block.is-spaced { margin-top: var(--pa-space-4); }

.pa-a4a-sub {
  margin: var(--pa-space-3) 0 var(--pa-space-1);
  color: var(--pa-text);
  font-size: var(--pa-text-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.pa-a4a-block > .pa-a4a-sub:first-child { margin-top: 0; }

.pa-a4a-para {
  margin: 0 0 var(--pa-space-2);
  color: var(--pa-text);
  font-size: var(--pa-text-base);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.pa-a4a-para:last-child { margin-bottom: 0; }

.pa-a4a-tags {
  margin: 0;
  color: var(--pa-text-muted);
  font-size: var(--pa-text-sm);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.pa-a4a-hint {
  margin: 0;
  color: var(--pa-text-muted);
  font-size: var(--pa-text-xs);
  line-height: 1.5;
}

/* Details table: scrolls inside itself, never widens the page. */
.pa-a4a-tablewrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-sm);
}

.pa-a4a-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pa-text-sm);
}

.pa-a4a-table th,
.pa-a4a-table td {
  padding: var(--pa-space-3) var(--pa-space-4);
  border-bottom: 1px solid var(--pa-border);
  text-align: left;
  vertical-align: top;
}

.pa-a4a-table th {
  width: 38%;
  background: var(--pa-surface-2);
  color: var(--pa-text);
  font-weight: 700;
  white-space: nowrap;
}

.pa-a4a-table td { color: var(--pa-text-muted); }

.pa-a4a-table tr:last-child th,
.pa-a4a-table tr:last-child td { border-bottom: 0; }

@media (max-width: 559px) {
  .pa-a4a-table th,
  .pa-a4a-table td { display: block; width: auto; border-bottom: 0; }
  .pa-a4a-table th { padding-bottom: 0; white-space: normal; background: none; }
  .pa-a4a-table td { padding-top: var(--pa-space-1); }
  .pa-a4a-table tr { display: block; border-bottom: 1px solid var(--pa-border); }
  .pa-a4a-table tr:last-child { border-bottom: 0; }
}

/* ── Description editor (portal chrome inside the replica) ──────────────── */
.pa-a4a-pc-tools .pa-a4a-panel-tools { align-items: center; }

/* "Edited by you" states a fact, it does not ask for an action, so it takes navy
   rather than red. */
.pa-a4a-editmark {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-1);
  padding: var(--pa-space-1) var(--pa-space-3);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-accent-soft-strong);
  color: var(--pa-accent-ink);
  font-size: var(--pa-text-xs);
  font-weight: 700;
}

.pa-a4a-textarea {
  width: 100%;
  min-height: 180px;
  padding: var(--pa-space-3) var(--pa-space-4);
  border: 1px solid var(--pa-border-strong);
  border-radius: var(--pa-radius);
  background: var(--pa-surface);
  color: var(--pa-text);
  font: inherit;
  font-size: var(--pa-text-base);
  line-height: 1.6;
  resize: vertical;
  transition: border-color var(--pa-dur-fast) var(--pa-ease);
}

.pa-a4a-textarea:hover { border-color: var(--pa-accent-ink); }

.pa-a4a-textarea.is-invalid { border-color: var(--pa-danger); }

.pa-a4a-editbar,
.pa-a4a-revert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pa-space-2);
}

.pa-a4a-revert {
  padding: var(--pa-space-3) var(--pa-space-4);
  border-radius: var(--pa-radius);
  background: var(--pa-accent-soft);
  color: var(--pa-text-muted);
  font-size: var(--pa-text-sm);
}

.pa-a4a-link {
  min-height: 44px;
  padding: 0 var(--pa-space-1);
  border: 0;
  background: none;
  color: var(--pa-brand-ink);
  font: inherit;
  font-size: var(--pa-text-sm);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ── Approval bar (portal chrome) ───────────────────────────────────────── */
/* The one decision surface on the page. It floats clear of the viewport edge and
   takes the largest radius and the deepest shadow in the view, because it is the
   thing the whole screen exists to get to. */
.pa-a4a-bar {
  position: sticky;
  bottom: var(--pa-space-3);
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pa-space-4);
  padding: var(--pa-space-4) var(--pa-space-5);
  border-radius: var(--pa-radius-xl);
  background: var(--pa-surface);
  box-shadow: var(--pa-shadow-lg);
}

.pa-a4a-bar-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pa-space-2);
  min-width: 0;
}

.pa-a4a-bar-when {
  color: var(--pa-text-muted);
  font-size: var(--pa-text-sm);
}

/* Rounds exhausted is the one "you are blocked" line on the screen, and blocked
   is red. */
.pa-a4a-bar-when.is-spent { color: var(--pa-brand-ink); font-weight: 600; }

.pa-a4a-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
}

.pa-a4a-bar-actions .pa-btn { min-height: 44px; }

@media (max-width: 767px) {
  .pa-a4a-bar {
    gap: var(--pa-space-3);
    padding: var(--pa-space-3) var(--pa-space-4);
  }
  .pa-a4a-bar-actions { width: 100%; }
  .pa-a4a-bar-actions .pa-btn { flex: 1 1 100%; justify-content: center; }
}

/* ── Change-request history (portal chrome) ─────────────────────────────── */
.pa-a4a-history {
  padding: var(--pa-space-5);
  border-radius: var(--pa-radius-lg);
  background: var(--pa-surface);
  box-shadow: var(--pa-shadow);
}

.pa-a4a-history-title {
  margin: 0 0 var(--pa-space-4);
  color: var(--pa-text);
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-md);
  font-weight: 600;
  letter-spacing: var(--pa-track-heading);
}

.pa-a4a-rounds {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pa-a4a-round {
  padding: var(--pa-space-4);
  border-radius: var(--pa-radius);
  background: var(--pa-accent-soft);
}

.pa-a4a-round-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pa-space-2);
  margin-bottom: var(--pa-space-2);
}

.pa-a4a-round-target,
.pa-a4a-round-time {
  color: var(--pa-text-muted);
  font-size: var(--pa-text-xs);
}

.pa-a4a-round-time { margin-left: auto; }

.pa-a4a-round-note {
  margin: 0;
  color: var(--pa-text);
  font-size: var(--pa-text-sm);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pa-a4a-round-atts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
  margin-top: var(--pa-space-3);
}

.pa-a4a-round-att {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-sm);
  background: var(--pa-surface-3);
  overflow: hidden;
  cursor: zoom-in;
}

.pa-a4a-round-att img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── Change-request composer (portal chrome, inside a modal) ────────────── */
.pa-a4a-composer {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-5);
}

.pa-a4a-composer-head {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-1);
}

.pa-a4a-composer-title {
  margin: 0;
  color: var(--pa-text);
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-xl);
  font-weight: 700;
  letter-spacing: var(--pa-track-tight);
  line-height: 1.15;
}

.pa-a4a-composer-note {
  margin: 0;
  color: var(--pa-text-muted);
  font-size: var(--pa-text-sm);
  overflow-wrap: anywhere;
}

.pa-a4a-targets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
}

/* Segmented control, pill. The chosen half is a solid red pill: picking what to
   change is the first half of the action the modal exists for. */
.pa-a4a-target {
  flex: 1 1 200px;
  min-height: 44px;
  padding: var(--pa-space-2) var(--pa-space-4);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface);
  color: var(--pa-text-muted);
  font: inherit;
  font-size: var(--pa-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--pa-dur-fast) var(--pa-ease),
    border-color var(--pa-dur-fast) var(--pa-ease),
    color var(--pa-dur-fast) var(--pa-ease);
}

.pa-a4a-target:hover { border-color: var(--pa-border-strong); color: var(--pa-text); }

.pa-a4a-target[aria-pressed='true'] {
  border-color: var(--pa-brand-primary);
  background: var(--pa-brand-primary);
  color: var(--pa-brand-primary-contrast);
}

.pa-a4a-composer-field {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-2);
}

.pa-a4a-label {
  color: var(--pa-text);
  font-size: var(--pa-text-sm);
  font-weight: 700;
}

.pa-a4a-inputrow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--pa-space-3);
}

.pa-a4a-inputrow .pa-a4a-textarea { flex: 1 1 260px; min-height: 120px; }

.pa-a4a-error {
  flex: 1 1 180px;
  margin: 0;
  color: var(--pa-brand-ink);
  font-size: var(--pa-text-sm);
  font-weight: 600;
  line-height: 1.5;
}

/* Kept in the accessibility tree and focusable; the label is its visible face. */
.pa-a4a-file {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pa-a4a-filebtn {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-2);
  align-self: flex-start;
  min-height: 44px;
  padding: 0 var(--pa-space-5);
  border: 1px dashed var(--pa-border-strong);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface-2);
  color: var(--pa-text);
  font-size: var(--pa-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--pa-dur-fast) var(--pa-ease), background var(--pa-dur-fast) var(--pa-ease);
}

.pa-a4a-filebtn:hover { border-color: var(--pa-brand-primary); background: var(--pa-brand-soft); }

.pa-a4a-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
}

.pa-a4a-chips:empty { display: none; }

.pa-a4a-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-2);
  max-width: 100%;
  padding: var(--pa-space-1);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-accent-soft);
}

.pa-a4a-chip-img {
  width: 36px;
  height: 36px;
  border-radius: var(--pa-radius-pill);
  object-fit: cover;
}

.pa-a4a-chip-name {
  max-width: 180px;
  overflow: hidden;
  color: var(--pa-text);
  font-size: var(--pa-text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa-a4a-chip-x {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--pa-radius-pill);
  background: none;
  color: var(--pa-text-muted);
  cursor: pointer;
}

.pa-a4a-chip-x:hover { background: var(--pa-danger-soft); color: var(--pa-brand-ink); }

.pa-a4a-composer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
  padding-top: var(--pa-space-4);
  border-top: 1px solid var(--pa-border);
}

.pa-a4a-composer-actions .pa-btn { min-height: 44px; }

@media (max-width: 559px) {
  .pa-a4a-composer-actions .pa-btn { flex: 1 1 100%; justify-content: center; }
  .pa-a4a-panel { margin-inline: var(--pa-space-3); }
  .pa-a4a-gallery,
  .pa-a4a-titlebar { padding: var(--pa-space-3); }
}