/* ProAgri Client Portal - component layer.
   Styles every primitive PA.ui produces (js/ui.js): buttons, badges, fields,
   modals, toasts, empty states, progress, lightbox.

   These pieces appear on every screen, so they carry more of the CI than any
   single view. The shape language is the floating-panel one from
   DESIGN-BRIEF.md: pill controls, big radii, depth from shadow rather than from
   hairlines, generous padding, and accents that are SMALL and saturated.

   Colour discipline (ProagriMedia Brand Guidelines 2025 p.17):
     navy   = chrome, and "done / approved / settled"
     red    = ACTION only - the primary button, destructive confirmation,
              "changes requested", overdue. A red fill that is not marking an
              action is a bug.
     yellow = "waiting on you", and nothing else. It is 10% of the palette; the
              moment a second status borrows it, the one status that matters
              stops standing out.
     black  = ink.
   There is no green. Approved is navy.

   Contrast: a brand FILL is always --pa-brand-primary behind
   --pa-brand-primary-contrast. Brand-coloured TEXT never uses the raw red -
   ProAgri red as text sits near 3.6:1 on white and worse on its own tint - it
   uses --pa-brand-ink / --pa-brand-ink-strong from base.css, which mix toward
   --pa-text until the ratio clears 4.5:1. */

/* ── Buttons ────────────────────────────────────────────────────────────────
   Pill, always. Nothing in this app has a square corner, and a pill is the
   control shape the floating-panel language reads by. 44px is the floor so
   every button is a legal touch target on its own, before any view helps. */
.pa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pa-space-2);
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--pa-space-5);
  border: 1px solid transparent;
  border-radius: var(--pa-radius-pill);
  background: transparent;
  color: var(--pa-text);
  font-family: var(--pa-brand-font);
  font-size: var(--pa-text-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--pa-dur) var(--pa-ease),
    border-color var(--pa-dur) var(--pa-ease),
    color var(--pa-dur) var(--pa-ease),
    box-shadow var(--pa-dur) var(--pa-ease),
    transform var(--pa-dur-fast) var(--pa-ease);
}

.pa-btn > span { min-width: 0; }

/* Icon-only buttons (label omitted) stay circular rather than stretching. */
.pa-btn:not(:has(> span)) { padding: 0 var(--pa-space-3); }

.pa-btn:active:not(:disabled) {
  transform: translateY(1px);
  transition-duration: var(--pa-dur-fast);
}

/* Disabled drops to a flat neutral rather than a faded fill. A red pill at 40%
   opacity is a pale pink pill with white text on it - unreadable, and it still
   looks like the primary action. A grey pill reads as "not yet". */
.pa-btn:disabled {
  cursor: not-allowed;
  background: var(--pa-surface-3);
  border-color: var(--pa-border);
  /* Disabled controls are exempt from WCAG 1.4.3, but --pa-text-faint is
     genuinely hard to read; --pa-text-muted stays clearly "off" at 4.3:1. */
  color: var(--pa-text-muted);
  box-shadow: none;
  transform: none;
}

.pa-btn:disabled .pa-icon { opacity: 0.7; }

/* Primary - the one red fill on a screen. Red is action; this is the action.

   KNOWN CI CONFLICT, left deliberately unresolved here: white on --pa-brand-primary
   measures 4.00:1, under the 4.5:1 this app holds itself to. The guideline red
   cannot carry white body text at any weight this button uses. The only fixes
   are a tokens.css decision - darken --pa-brand-primary, or split out a separate
   "red that white sits on" - and tokens.css is not this file's to change. Doing
   it locally would desync this button's red from the nav pill, the counts and
   every other red in the app, which is worse than the 0.5 shortfall. Raised for
   the team rather than patched. */
.pa-btn-primary {
  background: var(--pa-brand-primary);
  color: var(--pa-brand-primary-contrast);
  box-shadow: var(--pa-shadow-sm);
}

.pa-btn-primary:hover:not(:disabled) {
  background: var(--pa-brand-primary-hover);
  box-shadow: var(--pa-shadow);
  transform: translateY(-1px);
}

.pa-btn-primary:active:not(:disabled) {
  box-shadow: var(--pa-shadow-sm);
  transform: translateY(1px);
}

/* Ghost - the secondary action. Navy-tinted rather than a grey outline: navy is
   the chrome colour, so a secondary control tinted navy sits inside the system
   instead of looking like an unstyled default. */
.pa-btn-ghost {
  background: var(--pa-accent-soft);
  border-color: color-mix(in srgb, var(--pa-brand-accent) 18%, transparent);
  color: var(--pa-accent-ink);
}

.pa-btn-ghost:hover:not(:disabled) {
  background: var(--pa-accent-soft-strong);
  border-color: color-mix(in srgb, var(--pa-brand-accent) 32%, transparent);
  color: var(--pa-brand-accent-hover);
}

/* Quiet - transparent until touched. Toolbars, icon-only actions, close
   buttons. Carries no fill so it never competes with the primary. */
.pa-btn-quiet {
  background: transparent;
  color: var(--pa-text-muted);
  font-weight: 500;
}

.pa-btn-quiet:hover:not(:disabled) {
  background: var(--pa-accent-soft);
  color: var(--pa-accent-ink);
}

/* Approve - the portal's affirmative action, and in this CI that is NAVY.
   There is no green in ProAgriMedia, and inventing one to mean "yes" would be
   the only colour on the screen that came from outside the guideline. */
.pa-btn-approve {
  background: var(--pa-brand-accent);
  color: var(--pa-brand-accent-contrast);
  box-shadow: var(--pa-shadow-sm);
}

.pa-btn-approve:hover:not(:disabled) {
  background: var(--pa-brand-accent-hover);
  box-shadow: var(--pa-shadow);
  transform: translateY(-1px);
}

.pa-btn-approve:active:not(:disabled) {
  box-shadow: var(--pa-shadow-sm);
  transform: translateY(1px);
}

/* Danger - destructive confirmation. Same red as primary because it IS the
   action; it is the label and the placement that make it destructive. */
.pa-btn-danger {
  background: var(--pa-danger);
  color: var(--pa-brand-primary-contrast);
  box-shadow: var(--pa-shadow-sm);
}

.pa-btn-danger:hover:not(:disabled) {
  background: var(--pa-brand-primary-hover);
  box-shadow: var(--pa-shadow);
  transform: translateY(-1px);
}

.pa-btn-danger:active:not(:disabled) {
  box-shadow: var(--pa-shadow-sm);
  transform: translateY(1px);
}

/* Focus. base.css paints a red outline plus a red halo on every focusable
   element - which is invisible against a red fill. On the red buttons the ring
   flips to navy; on the navy button it stays red. Either way the ring is the
   opposite of what it sits on, so it is always visible. */
.pa-btn-primary:focus-visible,
.pa-btn-danger:focus-visible {
  outline-color: var(--pa-brand-accent);
  box-shadow: 0 0 0 4px var(--pa-accent-ring);
}

/* Small modifier - 36px box. Below the 44px floor on purpose, and only used
   inside rows that are themselves comfortably spaced. */
.pa-btn-sm {
  min-height: 36px;
  min-width: 36px;
  padding: 0 var(--pa-space-4);
  font-size: var(--pa-text-xs);
  gap: var(--pa-space-1);
}

.pa-btn-sm:not(:has(> span)) { padding: 0 var(--pa-space-2); }

/* Large modifier - the one hero action on a screen. */
.pa-btn-lg {
  min-height: 52px;
  padding: 0 var(--pa-space-6);
  font-size: var(--pa-text-base);
}

/* Wide modifier - full-width action, used by stacked mobile layouts. */
.pa-btn-block {
  display: flex;
  width: 100%;
}

/* Button clusters. */
.pa-btn-row {
  display: flex;
  align-items: center;
  gap: var(--pa-space-3);
  flex-wrap: wrap;
}

.pa-btn-row-end { justify-content: flex-end; }

/* ── Badges ─────────────────────────────────────────────────────────────────
   The status vocabulary, and it is the same four corporate colours:
     approved / info = navy    - done, settled, informational
     action          = yellow  - WAITING ON YOU, and only that
     danger          = red     - changes requested, overdue, needs attention
     neutral/pending = grey    - a count, or work in progress at our end

   Each tone carries a small saturated dot rather than a large coloured fill:
   the brief's "accents are small and saturated" rule. The dot does the colour
   coding at a glance; the tint behind it stays pale enough that the label keeps
   4.5:1. */
.pa-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-2);
  padding: 5px var(--pa-space-3) 5px var(--pa-space-3);
  border: 1px solid transparent;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface-3);
  color: var(--pa-text-muted);
  font-size: var(--pa-text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The dot. flex:none so an ellipsised label never eats it. */
.pa-badge::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--pa-radius-pill);
  background: currentColor;
  opacity: 0.55;
}

.pa-badge-neutral {
  background: var(--pa-surface-3);
  border-color: var(--pa-border);
  /* --pa-text-muted on --pa-surface-3 lands at 4.3:1, just under AA. Pulled
     toward the ink until it clears. */
  color: color-mix(in srgb, var(--pa-text-muted) 60%, var(--pa-text));
}

.pa-badge-neutral::before { opacity: 0.4; }

/* Action = "this needs the client", and it is YELLOW, not red.

   Red in this palette means something is WRONG: changes requested, overdue,
   rejected. "We are waiting on you" is not wrong, it is pending, and the CI has
   a colour for exactly that weight of attention. Yellow is also the 10% of the
   palette, so spending it on the single most important status in the portal is
   the right place for it - and the reason nothing else in this file is allowed
   to borrow it.

   The label is a dark amber, because ProAgri yellow as TEXT on its own tint is
   nowhere near 4.5:1. --pa-warning on its own is not enough either: measured on
   --pa-warning-soft it lands at 4.07:1, so it is pulled 20% toward the ink,
   which clears 5.2:1 and still reads amber. The DOT is the real --pa-yellow,
   which is where the guideline colour actually gets to show. */
.pa-badge-action {
  background: var(--pa-warning-soft);
  border-color: color-mix(in srgb, var(--pa-warning-mark) 55%, transparent);
  color: color-mix(in srgb, var(--pa-warning) 80%, var(--pa-text));
}

.pa-badge-action::before {
  background: var(--pa-warning-mark);
  opacity: 1;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pa-warning-mark) 26%, transparent);
}

.pa-badge-approved {
  background: var(--pa-success-soft);
  border-color: color-mix(in srgb, var(--pa-success) 24%, transparent);
  color: var(--pa-success);
}

.pa-badge-approved::before {
  background: var(--pa-success);
  opacity: 1;
}

/* Pending = in progress at OUR end. Deliberately NOT yellow: yellow is reserved
   for "waiting on you", and a status the client cannot act on must not shout
   with the same colour as the one they can. */
.pa-badge-pending {
  background: var(--pa-surface-3);
  border-color: var(--pa-border-strong);
  color: color-mix(in srgb, var(--pa-text-muted) 60%, var(--pa-text));
}

.pa-badge-pending::before {
  background: transparent;
  border: 2px solid currentColor;
  width: 8px;
  height: 8px;
  opacity: 0.5;
}

.pa-badge-danger {
  background: var(--pa-danger-soft);
  border-color: color-mix(in srgb, var(--pa-danger) 26%, transparent);
  /* An 88% mix of red toward ink still only reaches 4.2:1 on --pa-danger-soft.
     --pa-brand-ink-strong (52% red) clears 7:1 and still reads as red. */
  color: var(--pa-brand-ink-strong);
}

.pa-badge-danger::before {
  background: var(--pa-danger);
  opacity: 1;
}

.pa-badge-info {
  background: var(--pa-info-soft);
  border-color: color-mix(in srgb, var(--pa-info) 22%, transparent);
  color: var(--pa-info);
}

.pa-badge-info::before { opacity: 0.7; }

/* ── Fields ───────────────────────────────────────────────────────────────── */
.pa-field {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-2);
  min-width: 0;
}

.pa-field-label {
  font-size: var(--pa-text-sm);
  font-weight: 600;
  color: var(--pa-text);
  line-height: 1.3;
}

.pa-field-hint {
  font-size: var(--pa-text-xs);
  color: var(--pa-text-muted);
  line-height: 1.45;
}

.pa-field-row {
  display: grid;
  gap: var(--pa-space-4);
}

@media (min-width: 700px) {
  .pa-field-row { grid-template-columns: 1fr 1fr; }
}

/* Inputs take --pa-radius (18px), a step up from the small-control 12px: the
   canvas is soft and a 12px input inside an 18px card reads as a leftover from
   a different system. Borders stay hairline and calm; the focus ring does the
   talking. */
.pa-input,
.pa-select,
.pa-textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--pa-space-3) var(--pa-space-4);
  background: var(--pa-surface-2);
  color: var(--pa-text);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius);
  font-family: var(--pa-brand-font);
  font-size: var(--pa-text-base);
  line-height: 1.45;
  transition:
    border-color var(--pa-dur) var(--pa-ease),
    box-shadow var(--pa-dur) var(--pa-ease),
    background-color var(--pa-dur) var(--pa-ease);
}

.pa-input:hover:not(:disabled),
.pa-select:hover:not(:disabled),
.pa-textarea:hover:not(:disabled) {
  background: var(--pa-surface);
  border-color: var(--pa-border-strong);
}

/* Focus is carried by a solid brand border plus the ring halo. The transparent
   outline keeps an indicator in Windows high-contrast mode. */
.pa-input:focus-visible,
.pa-select:focus-visible,
.pa-textarea:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  background: var(--pa-surface);
  border-color: var(--pa-brand-primary);
  box-shadow: 0 0 0 4px var(--pa-brand-ring);
}

.pa-input:disabled,
.pa-select:disabled,
.pa-textarea:disabled {
  background: var(--pa-surface-3);
  color: var(--pa-text-muted);
  cursor: not-allowed;
}

/* Native select chevron is kept on purpose: it needs no icon asset and it
   matches the platform the client is actually on. */
.pa-select {
  padding-right: var(--pa-space-3);
  cursor: pointer;
}

.pa-textarea {
  min-height: 120px;
  padding: var(--pa-space-4);
  resize: vertical;
  line-height: 1.55;
}

.pa-input-inline {
  min-height: 40px;
  padding: var(--pa-space-2) var(--pa-space-3);
  border-radius: var(--pa-radius-sm);
  font-size: var(--pa-text-sm);
}

/* Checkbox / radio rows. */
.pa-check {
  display: flex;
  align-items: center;
  gap: var(--pa-space-3);
  min-height: 44px;
  padding: 0 var(--pa-space-1);
  cursor: pointer;
  font-size: var(--pa-text-sm);
}

.pa-check input {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--pa-brand-primary);
  cursor: pointer;
}

/* ── Progress ───────────────────────────────────────────────────────────────
   Shared track for any "n of m done" bar. Navy fill by default, because a
   filling bar is progress toward DONE and done is navy. The red variant is for
   a bar that is counting something wrong or overdue - not for decoration. */
.pa-progress {
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface-3);
  overflow: hidden;
}

.pa-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-brand-accent);
  transition: width var(--pa-dur-slow) var(--pa-ease);
}

.pa-progress-danger .pa-progress-fill { background: var(--pa-brand-primary); }

/* Attention, not alarm: a bar the client still has to finish. */
.pa-progress-action .pa-progress-fill { background: var(--pa-warning-mark); }

/* ── Modal ────────────────────────────────────────────────────────────────── */
.pa-modal-back {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--pa-space-5);
  padding-bottom: calc(var(--pa-space-5) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--pa-navy) 46%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: pa-fade-in var(--pa-dur) var(--pa-ease) both;
}

/* The most floating surface in the app, so it takes the largest corner and
   depth comes from the shadow alone - no outline. */
.pa-modal-panel {
  width: min(560px, 100%);
  max-height: 90dvh;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--pa-space-6);
  background: var(--pa-surface);
  border: 0;
  border-radius: var(--pa-radius-xl);
  box-shadow: var(--pa-shadow-lg);
  animation: pa-pop-in var(--pa-dur) var(--pa-ease) both;
}

.pa-modal-wide { width: min(980px, 100%); }

.pa-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pa-space-3);
  margin-bottom: var(--pa-space-5);
}

/* Display slot: Poppins SemiBold. Never 400 - that weight is a leftover from
   the old Instrument Serif face, which shipped no bold, and it renders a
   heading limp in Poppins. */
.pa-modal-title {
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-xl);
  font-weight: 600;
  letter-spacing: var(--pa-track-tight);
  line-height: 1.2;
}

.pa-modal-note {
  margin-top: var(--pa-space-1);
  font-size: var(--pa-text-sm);
  color: var(--pa-text-muted);
}

.pa-modal-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--pa-space-3);
  flex-wrap: wrap;
  margin-top: var(--pa-space-6);
}

@media (max-width: 599px) {
  .pa-modal-back { padding: var(--pa-space-3); }
  .pa-modal-panel { padding: var(--pa-space-5); max-height: 92dvh; border-radius: var(--pa-radius-lg); }
  .pa-modal-foot > .pa-btn { flex: 1 1 auto; }
}

/* ── Toasts ───────────────────────────────────────────────────────────────── */
.pa-toasts {
  position: fixed;
  z-index: 90;
  left: var(--pa-space-4);
  right: var(--pa-space-4);
  bottom: calc(var(--pa-space-5) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pa-space-2);
  pointer-events: none;
}

@media (min-width: 700px) {
  .pa-toasts {
    left: auto;
    right: var(--pa-space-5);
    align-items: flex-end;
  }
}

/* A floating pill panel. Tone is carried by the icon and a whole-card tint -
   never by a one-sided accent bar, which reads as templated. */
.pa-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--pa-space-3);
  max-width: 420px;
  padding: var(--pa-space-3) var(--pa-space-5);
  background: var(--pa-surface);
  color: var(--pa-text);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-lg);
  box-shadow: var(--pa-shadow-lg);
  font-size: var(--pa-text-sm);
  font-weight: 500;
  animation: pa-pop-in var(--pa-dur) var(--pa-ease) both;
  transition:
    opacity var(--pa-dur) var(--pa-ease),
    transform var(--pa-dur) var(--pa-ease);
}

.pa-toast .pa-icon { color: var(--pa-text-muted); }

.pa-toast-success {
  background: var(--pa-success-soft);
  border-color: color-mix(in srgb, var(--pa-success) 26%, transparent);
  color: color-mix(in srgb, var(--pa-success) 70%, var(--pa-text));
}
.pa-toast-success .pa-icon { color: var(--pa-success); }

.pa-toast-danger {
  background: var(--pa-danger-soft);
  border-color: color-mix(in srgb, var(--pa-danger) 26%, transparent);
  color: var(--pa-brand-ink-strong);
}
.pa-toast-danger .pa-icon { color: var(--pa-danger); }

.pa-toast-info {
  background: var(--pa-info-soft);
  border-color: color-mix(in srgb, var(--pa-info) 22%, transparent);
  color: color-mix(in srgb, var(--pa-info) 70%, var(--pa-text));
}
.pa-toast-info .pa-icon { color: var(--pa-info); }

.pa-toast.is-out {
  opacity: 0;
  transform: translateY(8px);
}

/* ── Empty state ────────────────────────────────────────────────────────────
   A soft panel, not a dashed placeholder box - a dashed outline reads as an
   unfinished drop zone and this is usually the GOOD news ("nothing waiting on
   you"). The icon medallion is navy: it is chrome and a settled state, and
   painting it red would spend the action colour on a screen with no action. */
.pa-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--pa-space-2);
  padding: var(--pa-space-7) var(--pa-space-5);
  background: var(--pa-surface);
  border: 0;
  border-radius: var(--pa-radius-lg);
  box-shadow: var(--pa-shadow-sm);
}

.pa-empty-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--pa-space-2);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-accent-soft-strong);
  color: var(--pa-accent-ink);
}

/* Display slot: Poppins SemiBold. */
.pa-empty-title {
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-lg);
  font-weight: 600;
  letter-spacing: var(--pa-track-heading);
  line-height: 1.25;
}

.pa-empty-note {
  font-size: var(--pa-text-sm);
  color: var(--pa-text-muted);
  max-width: 46ch;
}

/* An empty state sitting INSIDE a .pa-panel must not stack a second shadowed
   card on the first. */
.pa-panel > .pa-empty {
  background: var(--pa-surface-2);
  box-shadow: none;
  padding: var(--pa-space-6) var(--pa-space-5);
}

@media (max-width: 599px) {
  .pa-empty { padding: var(--pa-space-6) var(--pa-space-4); }
}

/* ── Lightbox (rendered inside a wide modal panel) ────────────────────────── */
.pa-lightbox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pa-space-3);
  min-width: 0;
}

.pa-lightbox .pa-btn { flex: none; }

.pa-lightbox-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pa-space-3);
  min-width: 0;
  flex: 1 1 auto;
}

.pa-lightbox-img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--pa-radius);
  background: var(--pa-surface-3);
}

.pa-lightbox-count {
  display: inline-flex;
  padding: var(--pa-space-1) var(--pa-space-3);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface-3);
  font-size: var(--pa-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  /* --pa-text-muted on --pa-surface-3 measures 4.26:1 - under AA. */
  color: color-mix(in srgb, var(--pa-text-muted) 60%, var(--pa-text));
  font-variant-numeric: tabular-nums;
}

@media (max-width: 599px) {
  .pa-lightbox { gap: var(--pa-space-1); }
  .pa-lightbox-img { max-height: 70vh; }
}

/* ── Small shared pieces used across views ────────────────────────────────── */
.pa-meta {
  display: flex;
  align-items: center;
  gap: var(--pa-space-2);
  font-size: var(--pa-text-xs);
  color: var(--pa-text-muted);
  flex-wrap: wrap;
}

/* Callout. A tint on all four sides, not an accent bar down one edge.
   Navy, not red: an informational note is chrome. Red here would tell the
   client something is wrong on a screen where nothing is. */
.pa-note {
  padding: var(--pa-space-4) var(--pa-space-5);
  background: var(--pa-accent-soft);
  border: 1px solid color-mix(in srgb, var(--pa-brand-accent) 18%, transparent);
  border-radius: var(--pa-radius);
  font-size: var(--pa-text-sm);
  line-height: 1.55;
  color: color-mix(in srgb, var(--pa-text-muted) 55%, var(--pa-text));
}

/* The one case where a note IS an alarm - changes requested, overdue. */
.pa-note-danger {
  background: var(--pa-danger-soft);
  border-color: color-mix(in srgb, var(--pa-danger) 24%, transparent);
  color: var(--pa-brand-ink-strong);
}

/* And the one case where it is waiting on the client. Same 80% ink mix as
   .pa-badge-action, for the same 4.5:1 reason. */
.pa-note-action {
  background: var(--pa-warning-soft);
  border-color: color-mix(in srgb, var(--pa-warning-mark) 46%, transparent);
  color: color-mix(in srgb, var(--pa-warning) 80%, var(--pa-text));
}