/* ProAgri Client Portal - requests (material + focus points).
   Owner: Requests agent. Every class is prefixed `pa-req-`; every value is a
   --pa-* token from tokens.css.

   ── The one rule this screen exists to get right ───────────────────────────
   This is the only view in the portal where the client does WORK rather than
   looks at ours, and "we are waiting on you" is its dominant state. In the
   ProAgriMedia palette that state has exactly one colour - yellow, the 10%
   slice - and the first pass spent red on it instead: red cards, red progress
   bars, red step dots, red selected chips. Red in this CI means something is
   wrong. An unanswered question is not wrong, it is pending, and a portal that
   greets a client with a wall of red over work they simply have not got to yet
   is telling them off for nothing.

   So the split here is strict and mechanical:
     yellow  awaiting the client's answers        (status)
     navy    submitted, settled, selected, chrome (state + structure)
     red     the button you press, and overdue    (action + genuinely wrong)

   The colour is never chosen at the point of use. Each card and each detail
   head sets --pa-req-tone once from its state class, and the rule, the bar and
   the pills all read that. Four things cannot disagree if they read one var. */

/* ── Shared layout ─────────────────────────────────────────────────────────── */
/* Two derived inks. --pa-text-muted and --pa-warning both clear 4.5:1 on white,
   but this view sets them on tinted grounds (--pa-surface-3, --pa-bg,
   --pa-warning-soft) where they land at 4.07-4.26 and fail. Darkening them
   toward --pa-text once, here, beats fixing it at eight call sites. */
.pa-req-view {
  --pa-req-muted-ink: color-mix(in srgb, var(--pa-text-muted) 72%, var(--pa-text));
  --pa-req-warn-ink: color-mix(in srgb, var(--pa-warning) 80%, var(--pa-text));
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-6);
}

/* ── State tones ───────────────────────────────────────────────────────────── */
/* Default is "waiting" because that is what a request IS until it is answered.
   `--pa-req-tone` is the saturated marker colour; `-soft` is the tint behind
   text; `-ink` is the darkened version that survives a 4.5:1 check as type. */
.pa-req-card,
.pa-req-head {
  --pa-req-tone: var(--pa-yellow);
  --pa-req-tone-soft: var(--pa-warning-soft);
  --pa-req-tone-ink: var(--pa-warning);
}

.pa-req-card.is-done,
.pa-req-head.is-done {
  --pa-req-tone: var(--pa-navy);
  --pa-req-tone-soft: var(--pa-success-soft);
  --pa-req-tone-ink: var(--pa-success);
}

.pa-req-card.is-overdue,
.pa-req-head.is-overdue {
  --pa-req-tone: var(--pa-red);
  --pa-req-tone-soft: var(--pa-danger-soft);
  --pa-req-tone-ink: color-mix(in srgb, var(--pa-danger) 72%, var(--pa-text));
}

/* ── Filters ───────────────────────────────────────────────────────────────── */
.pa-req-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
}

/* Pill chips, and the selected one is NAVY. It used to be a red fill, which put
   a permanent red block on the page next to every red Answer button and left
   the client with two reds competing for the same eye. A segmented filter is
   chrome - it says where you are, not what to do - and chrome in this CI is
   navy. Red stays on the button. */
.pa-req-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-2);
  min-height: 44px;
  padding: 0 var(--pa-space-3) 0 var(--pa-space-5);
  border: 0;
  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) var(--pa-ease),
              color var(--pa-dur) var(--pa-ease),
              box-shadow var(--pa-dur) var(--pa-ease);
}

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

.pa-req-filter.is-on {
  background: var(--pa-brand-accent);
  color: var(--pa-brand-accent-contrast);
  box-shadow: var(--pa-shadow);
}

.pa-req-filter-n {
  min-width: 24px;
  padding: 0 var(--pa-space-2);
  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;
  line-height: 24px;
  text-align: center;
}

.pa-req-filter.is-on .pa-req-filter-n {
  background: color-mix(in srgb, var(--pa-brand-accent-contrast) 22%, transparent);
  color: var(--pa-brand-accent-contrast);
}

/* ── List ──────────────────────────────────────────────────────────────────── */
.pa-req-list {
  display: grid;
  gap: var(--pa-space-5);
}

/* Floating panel: big radius, real shadow, no outline. Depth comes from the
   shadow against the darker canvas, which is what makes a card read as lifted
   rather than as a boxed-off region of the page. */
.pa-req-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-4);
  padding: var(--pa-space-6);
  overflow: hidden;
  border-radius: var(--pa-radius-lg);
  background: var(--pa-surface);
  box-shadow: var(--pa-shadow);
  transition: box-shadow var(--pa-dur) var(--pa-ease),
              transform var(--pa-dur) var(--pa-ease);
}

.pa-req-card:hover {
  box-shadow: var(--pa-shadow-lg);
  transform: translateY(-2px);
}

.pa-req-card.is-done { background: var(--pa-surface-2); }

/* The state marker: a rule across the head of the panel in the state's colour.
   Running down a column of cards it is the fastest read on the page - a run of
   yellow is a run of work, a red one is a run of late - and it costs no layout.
   The card's own radius clips it into the corners, which is what `overflow`
   below is for; every focusable thing inside sits at least 32px in from the
   edge, so no focus halo is ever clipped by it. */
.pa-req-card-rule,
.pa-req-head .pa-req-card-rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--pa-req-tone);
}

.pa-req-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pa-space-2);
  justify-content: space-between;
}

.pa-req-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-2);
}

.pa-req-restored[hidden] { display: none; }

/* Kind chip - an eyebrow label, not a status. Both kinds sit in the navy family
   on purpose: painting "Focus points" red would say the request is urgent when
   all it says is which of two questionnaires this is. The icon and the word do
   the telling apart; the colour is reserved for state. */
.pa-req-kind {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-2);
  padding: var(--pa-space-1) var(--pa-space-3);
  border-radius: var(--pa-radius-pill);
  font-size: var(--pa-text-xs);
  font-weight: 700;
  letter-spacing: var(--pa-track-eyebrow);
  text-transform: uppercase;
}

.pa-req-kind-material {
  background: var(--pa-accent-soft-strong);
  color: var(--pa-brand-accent);
}

.pa-req-kind-focus {
  background: var(--pa-brand-accent);
  color: var(--pa-brand-accent-contrast);
}

.pa-req-card-title {
  margin: 0;
  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-req-card-link {
  color: var(--pa-text);
  text-decoration: none;
}

/* --pa-brand-ink, not raw red: ProAgri red as TEXT on white is about 3.5:1 and
   fails the 4.5 floor. base.css defines the darkened mix for exactly this. */
.pa-req-card-link:hover {
  color: var(--pa-brand-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pa-req-card-deliv,
.pa-req-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-2);
  margin: 0;
  color: var(--pa-text-muted);
  font-size: var(--pa-text-sm);
}

.pa-req-card-deliv .pa-icon,
.pa-req-meta-item .pa-icon { flex: none; color: var(--pa-text-faint); }

.pa-req-card-note {
  max-width: var(--pa-reading-max);
  margin: var(--pa-space-1) 0 0;
  color: var(--pa-text-muted);
  font-size: var(--pa-text-sm);
  line-height: 1.6;
}

.pa-req-card-prog {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-3);
}

.pa-req-prog-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pa-space-2);
}

.pa-req-prog-text {
  color: var(--pa-text);
  font-size: var(--pa-text-sm);
  font-weight: 600;
}

.pa-req-prog-eyebrow {
  color: var(--pa-text-muted);
  font-size: var(--pa-text-xs);
  font-weight: 700;
  letter-spacing: var(--pa-track-eyebrow);
  text-transform: uppercase;
}

/* Due date. Tone is carried by icon and wording as well as colour, and RED here
   means one thing only: the date has passed. "Due today" and "due in two days"
   are yellow however close they are - being nearly late is not being wrong. */
.pa-req-due {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-2);
  padding: var(--pa-space-1) var(--pa-space-3);
  border-radius: var(--pa-radius-pill);
  font-size: var(--pa-text-xs);
  font-weight: 700;
  white-space: nowrap;
}

.pa-req-due .pa-icon { flex: none; }

.pa-req-due-neutral { background: var(--pa-surface-3); color: var(--pa-text-muted); }

.pa-req-due-warning {
  background: var(--pa-warning-soft);
  color: var(--pa-req-warn-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pa-warning-mark) 55%, transparent);
}

.pa-req-due-danger {
  background: var(--pa-danger-soft);
  color: color-mix(in srgb, var(--pa-danger) 72%, var(--pa-text));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pa-danger) 34%, transparent);
}

.pa-req-due-done { background: var(--pa-success-soft); color: var(--pa-success); }

.pa-req-bar {
  height: 8px;
  overflow: hidden;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface-3);
}

/* The track clips the fill into the pill, so the fill can stay a plain
   full-width rectangle and animate on transform instead of width: no layout
   work per frame, and no distorted corners. */
.pa-req-bar-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-yellow);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--pa-dur-slow) var(--pa-ease),
              background var(--pa-dur) var(--pa-ease);
}

.pa-req-bar-fill.is-waiting { background: var(--pa-yellow); }
.pa-req-bar-fill.is-overdue { background: var(--pa-red); }
.pa-req-bar-fill.is-done { background: var(--pa-navy); }

/* Progress and the action on one line. The card should end on the decision, not
   on a band of white with a button stranded in the corner of it. */
.pa-req-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--pa-space-4) var(--pa-space-5);
  margin-top: var(--pa-space-1);
}

.pa-req-card-foot .pa-req-card-prog,
.pa-req-card-foot .pa-req-card-ext { flex: 1 1 260px; }

.pa-req-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--pa-space-2);
}

.pa-req-card-actions .pa-btn { border-radius: var(--pa-radius-pill); }

/* ── Detail shell ──────────────────────────────────────────────────────────── */
.pa-req-back {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-1);
  align-self: flex-start;
  min-height: 44px;
  padding: 0 var(--pa-space-3) 0 var(--pa-space-2);
  border-radius: var(--pa-radius-pill);
  color: var(--pa-text-muted);
  font-size: var(--pa-text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--pa-dur) var(--pa-ease), color var(--pa-dur) var(--pa-ease);
}

.pa-req-back:hover { background: var(--pa-surface); color: var(--pa-brand-ink); }

.pa-req-detail { gap: var(--pa-space-5); }

/* The head is the same floating panel as the card it was opened from, carrying
   the same state marker, so opening a request does not feel like leaving the
   list for somewhere unrelated. */
.pa-req-head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-4);
  padding: var(--pa-space-6);
  overflow: hidden;
  border-radius: var(--pa-radius-xl);
  background: var(--pa-surface);
  box-shadow: var(--pa-shadow);
}

.pa-req-head-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pa-space-2);
}

/* The one biggest title on the page, so 700. Poppins has the full weight range;
   anything display-faced still sitting at 400 here is a leftover from the
   serif that shipped no bold, and renders the heading limp. */
.pa-req-title {
  margin: 0;
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-2xl);
  font-weight: 700;
  letter-spacing: var(--pa-track-tight);
  line-height: 1.15;
}

.pa-req-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pa-space-3);
}

/* The agency's note to the client. A navy tint marks it as "a message from us".
   It was a red tint, which made every request look like a complaint. */
.pa-req-note {
  display: flex;
  align-items: flex-start;
  gap: var(--pa-space-3);
  margin: 0;
  padding: var(--pa-space-4);
  border-radius: var(--pa-radius);
  background: var(--pa-accent-soft);
  color: var(--pa-text);
  font-size: var(--pa-text-base);
  line-height: 1.6;
}

.pa-req-note-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-brand-accent);
  color: var(--pa-brand-accent-contrast);
}

/* Restored-draft notice */
.pa-req-restored {
  display: flex;
  align-items: center;
  gap: var(--pa-space-3);
  padding: var(--pa-space-4) var(--pa-space-5);
  border-radius: var(--pa-radius);
  background: var(--pa-info-soft);
  color: var(--pa-info);
}

.pa-req-restored-text {
  flex: 1;
  margin: 0;
  color: var(--pa-text);
  font-size: var(--pa-text-sm);
}

/* Progress, at the top of the form where the client asks "how much is left". */
.pa-req-progline {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-3);
  padding: var(--pa-space-5) var(--pa-space-6);
  border-radius: var(--pa-radius-lg);
  background: var(--pa-surface);
  box-shadow: var(--pa-shadow-sm);
}

/* ── Form ──────────────────────────────────────────────────────────────────── */
.pa-req-form {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-5);
}

.pa-req-anchor:focus { outline: none; }

.pa-req-stepbar {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-3);
}

.pa-req-step {
  margin: 0;
  color: var(--pa-req-muted-ink);
  font-size: var(--pa-text-xs);
  font-weight: 700;
  letter-spacing: var(--pa-track-eyebrow);
  text-transform: uppercase;
}

.pa-req-dots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Step chips. Navy, not red: a step indicator says where you are, which is
   chrome. The active step is a navy fill, a finished one a navy tick. */
.pa-req-dot {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-2);
  padding: var(--pa-space-1) var(--pa-space-4) var(--pa-space-1) var(--pa-space-1);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface);
  box-shadow: var(--pa-shadow-sm);
  color: var(--pa-text-muted);
  font-size: var(--pa-text-xs);
  font-weight: 600;
}

.pa-req-dot-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface-3);
  color: var(--pa-text-muted);
  font-weight: 700;
}

.pa-req-dot.is-on {
  background: var(--pa-brand-accent);
  color: var(--pa-brand-accent-contrast);
  box-shadow: var(--pa-shadow);
}

.pa-req-dot.is-on .pa-req-dot-n {
  background: color-mix(in srgb, var(--pa-brand-accent-contrast) 22%, transparent);
  color: var(--pa-brand-accent-contrast);
}

.pa-req-dot.is-done { color: var(--pa-success); }
.pa-req-dot.is-done .pa-req-dot-n { background: var(--pa-success-soft); color: var(--pa-success); }

/* A blocked submit IS an error - the client pressed a thing and it did not
   happen - so this one is red on purpose. */
.pa-req-step-err {
  display: flex;
  align-items: center;
  gap: var(--pa-space-2);
  margin: 0;
  padding: var(--pa-space-4) var(--pa-space-5);
  border-radius: var(--pa-radius);
  background: var(--pa-danger-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pa-danger) 30%, transparent);
  color: color-mix(in srgb, var(--pa-danger) 72%, var(--pa-text));
  font-size: var(--pa-text-sm);
  font-weight: 600;
}

/* display:flex above beats the UA [hidden] rule - restore it explicitly. */
.pa-req-step-err[hidden] { display: none; }

.pa-req-panels { display: block; }

.pa-req-section {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-5);
  padding: var(--pa-space-6);
  border-radius: var(--pa-radius-lg);
  background: var(--pa-surface);
  box-shadow: var(--pa-shadow);
}

.pa-req-section[hidden] { display: none; }

.pa-req-section-head { display: flex; align-items: baseline; gap: var(--pa-space-3); }

.pa-req-section-title {
  margin: 0;
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-lg);
  font-weight: 600;
  letter-spacing: var(--pa-track-heading);
}

.pa-req-rule {
  height: 1px;
  margin: calc(var(--pa-space-3) * -1) 0;
  border: 0;
  background: var(--pa-border);
}

.pa-req-fields {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-6);
}

/* The shared .pa-field primitive stacks label / control / hint; requests only
   need the control to fill the column and the error to sit under it. */
.pa-req-field { position: relative; }

/* The hint is moved above the control in JS; give it a little more room to
   breathe than a caption would get. */
.pa-req-field > .pa-field-hint {
  margin-top: calc(var(--pa-space-1) * -1);
  color: var(--pa-text-muted);
  font-size: var(--pa-text-sm);
  line-height: 1.5;
}

/* Comfortable sizing. A client typing a month of product copy into a 44px box
   with a 12px gap under it is doing data entry; this is meant to feel like
   writing. */
.pa-req-form .pa-input,
.pa-req-form .pa-textarea,
.pa-req-form .pa-select {
  width: 100%;
  max-width: 100%;
  min-height: 52px;
  padding: var(--pa-space-3) var(--pa-space-4);
  border-radius: var(--pa-radius-sm);
  background: var(--pa-surface-2);
}

.pa-req-form .pa-field-label {
  font-size: var(--pa-text-base);
  font-weight: 600;
}

/* A focus ring the client cannot miss: the red border, a surface gap so the
   ring never merges into the control, then the soft halo. */
.pa-req-form .pa-input:focus-visible,
.pa-req-form .pa-textarea:focus-visible,
.pa-req-form .pa-select:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--pa-brand-primary);
  background: var(--pa-surface);
  box-shadow: 0 0 0 2px var(--pa-surface), 0 0 0 5px var(--pa-brand-ring);
}

/* "Required", in words, next to the label. It replaces a red asterisk that was
   aria-hidden and a hint line that repeated the same fact underneath. Red-family
   because it is the one thing on the field that will stop a submit. */
.pa-req-field > .pa-field-label {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pa-space-2);
}

.pa-req-reqmark {
  padding: 2px var(--pa-space-2);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-brand-soft);
  color: var(--pa-brand-ink);
  font-size: var(--pa-text-xs);
  font-weight: 700;
  letter-spacing: var(--pa-track-eyebrow);
  text-transform: uppercase;
}

/* .pa-field is a flex column with its own gap - these children add no margin. */
.pa-req-err {
  display: flex;
  align-items: flex-start;
  gap: var(--pa-space-2);
  margin: 0;
  color: color-mix(in srgb, var(--pa-danger) 72%, var(--pa-text));
  font-size: var(--pa-text-sm);
  font-weight: 600;
  line-height: 1.4;
}

.pa-req-err .pa-icon { flex: none; margin-top: 1px; }

.pa-req-err[hidden] { display: none; }

.pa-req-field.is-invalid .pa-input,
.pa-req-field.is-invalid .pa-textarea,
.pa-req-field.is-invalid .pa-select,
.pa-req-field.is-invalid .pa-req-drop {
  border-color: var(--pa-danger);
}

/* Groups of controls get an outline rather than a border: it needs no layout
   space, so flagging a group never reflows the options inside it. */
.pa-req-field.is-invalid .pa-req-chips,
.pa-req-field.is-invalid .pa-req-radios,
.pa-req-field.is-invalid .pa-req-stars {
  outline: 2px solid var(--pa-danger);
  outline-offset: 6px;
  border-radius: var(--pa-radius);
}

.pa-req-counter {
  display: block;
  margin: 0;
  color: var(--pa-req-muted-ink);
  font-size: var(--pa-text-xs);
  text-align: right;
}

.pa-req-textarea {
  min-height: 120px;
  overflow: hidden;
  resize: vertical;
}

.pa-req-date { min-height: 52px; }

/* ── Multiselect chips ─────────────────────────────────────────────────────── */
.pa-req-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
}

/* Selected is navy. The client picking six topics is not performing six
   actions; it is state, and state is navy. Red here turned the whole form the
   colour of a warning as the client filled it in. */
.pa-req-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-2);
  min-height: 48px;
  padding: 0 var(--pa-space-4);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface);
  color: var(--pa-text);
  font: inherit;
  font-size: var(--pa-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--pa-dur) var(--pa-ease),
              border-color var(--pa-dur) var(--pa-ease),
              color var(--pa-dur) var(--pa-ease);
}

.pa-req-chip:hover { border-color: var(--pa-border-strong); background: var(--pa-surface-2); }

/* Square, not round: these are multi-select. A circle here reads as a radio and
   clients pick one thing when they were meant to pick several. */
.pa-req-chip-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--pa-border-strong);
  border-radius: 6px;
  color: transparent;
  transition: background var(--pa-dur) var(--pa-ease), color var(--pa-dur) var(--pa-ease);
}

.pa-req-chip.is-on {
  border-color: var(--pa-brand-accent);
  background: var(--pa-accent-soft);
  color: var(--pa-brand-accent);
}

.pa-req-chip.is-on .pa-req-chip-tick {
  border-color: var(--pa-brand-accent);
  background: var(--pa-brand-accent);
  color: var(--pa-brand-accent-contrast);
}

.pa-req-selected {
  margin: 0;
  color: var(--pa-text-muted);
  font-size: var(--pa-text-xs);
  font-weight: 600;
}

/* ── Radio cards ───────────────────────────────────────────────────────────── */
.pa-req-radios {
  display: grid;
  gap: var(--pa-space-3);
}

.pa-req-radio {
  display: flex;
  align-items: center;
  gap: var(--pa-space-4);
  min-height: 60px;
  padding: var(--pa-space-4) var(--pa-space-5);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius);
  background: var(--pa-surface);
  cursor: pointer;
  transition: background var(--pa-dur) var(--pa-ease),
              border-color var(--pa-dur) var(--pa-ease),
              box-shadow var(--pa-dur) var(--pa-ease);
}

.pa-req-radio:hover { border-color: var(--pa-border-strong); background: var(--pa-surface-2); }

.pa-req-radio.is-on {
  border-color: var(--pa-brand-accent);
  background: var(--pa-accent-soft);
  box-shadow: var(--pa-shadow-sm);
}

/* The real radio stays in the accessibility tree and keeps arrow-key
   behaviour; it is only visually replaced by .pa-req-radio-dot. */
.pa-req-radio-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pa-req-radio-dot {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--pa-border-strong);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface);
  transition: border-color var(--pa-dur) var(--pa-ease);
}

.pa-req-radio.is-on .pa-req-radio-dot { border-color: var(--pa-brand-accent); }

.pa-req-radio.is-on .pa-req-radio-dot::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-brand-accent);
  content: '';
  transform: translate(-50%, -50%);
}

.pa-req-radio-input:focus-visible + .pa-req-radio-dot {
  outline: 2px solid var(--pa-brand-primary);
  outline-offset: 3px;
}

.pa-req-radio-label {
  font-size: var(--pa-text-base);
  font-weight: 600;
  line-height: 1.35;
}

/* ── File dropzone ─────────────────────────────────────────────────────────── */
.pa-req-filefield {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-3);
}

/* The dropzone is the single most important control on a material request, so
   it is a panel rather than a dashed rectangle: a real surface, a big radius,
   the icon in a navy disc, and the browse button inside it so there is never a
   question about which button attaches a file. The dashed edge stays, because
   dashed is the one convention that says "you may drop something here". */
.pa-req-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pa-space-3);
  padding: var(--pa-space-5);
  border: 2px dashed var(--pa-border-strong);
  border-radius: var(--pa-radius-lg);
  background: var(--pa-surface-2);
  text-align: center;
  transition: background var(--pa-dur) var(--pa-ease),
              border-color var(--pa-dur) var(--pa-ease);
}

.pa-req-drop:hover { border-color: var(--pa-brand-accent); background: var(--pa-surface); }

.pa-req-drop.is-over {
  border-color: var(--pa-brand-accent);
  border-style: solid;
  background: var(--pa-accent-soft);
}

.pa-req-drop-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-brand-accent);
  color: var(--pa-brand-accent-contrast);
  transition: transform var(--pa-dur) var(--pa-ease);
}

.pa-req-drop.is-over .pa-req-drop-icon { transform: translateY(-3px); }

.pa-req-drop-body {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-1);
}

.pa-req-drop-title {
  margin: 0;
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-md);
  font-weight: 600;
  letter-spacing: var(--pa-track-heading);
}

.pa-req-drop-note {
  margin: 0;
  color: var(--pa-req-muted-ink);
  font-size: var(--pa-text-sm);
}

.pa-req-browse {
  margin-top: var(--pa-space-1);
  border-radius: var(--pa-radius-pill);
}

.pa-req-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pa-req-files {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pa-req-file {
  display: flex;
  align-items: center;
  gap: var(--pa-space-3);
  padding: var(--pa-space-2) var(--pa-space-3);
  border-radius: var(--pa-radius);
  background: var(--pa-surface-3);
}

.pa-req-file-thumb {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--pa-radius-sm);
  object-fit: cover;
  background: var(--pa-surface);
}

.pa-req-file-thumb-doc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pa-brand-accent);
}

.pa-req-file-meta {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  text-align: left;
}

.pa-req-file-name {
  overflow: hidden;
  font-size: var(--pa-text-sm);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa-req-file-size {
  color: var(--pa-req-muted-ink);
  font-size: var(--pa-text-xs);
}

.pa-req-file-remove { flex: none; }

.pa-req-file-open {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--pa-space-3);
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--pa-radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.pa-req-file-none {
  padding: var(--pa-space-2) 0;
  color: var(--pa-req-muted-ink);
  font-size: var(--pa-text-sm);
}

/* ── Rating ────────────────────────────────────────────────────────────────── */
.pa-req-starrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pa-space-3);
}

.pa-req-stars { display: flex; gap: var(--pa-space-1); }

/* Navy stars, not gold. Yellow in this CI is spoken for: it means "waiting on
   you", and it is 10% of the palette. Spending it on a decorative star would
   put the portal's one attention colour on a control that is not asking for
   attention, and weaken it everywhere it does matter. */
.pa-req-star-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--pa-radius-sm);
  background: none;
  color: var(--pa-border-strong);
  cursor: pointer;
  transition: color var(--pa-dur) var(--pa-ease), transform var(--pa-dur-fast) var(--pa-ease);
}

.pa-req-star-btn:hover { color: var(--pa-brand-accent); transform: scale(1.08); }

.pa-req-star-btn.is-on { color: var(--pa-brand-accent); }
.pa-req-star-btn.is-on .pa-icon { fill: currentColor; }

.pa-req-star-read {
  color: var(--pa-text-muted);
  font-size: var(--pa-text-sm);
  font-weight: 600;
}

.pa-req-star-clear { border-radius: var(--pa-radius-pill); }

/* ── Nav / autosave / send ─────────────────────────────────────────────────── */
/* On a Next/Back step this is a bare button row: a floating white panel holding
   one button and a save pill is a panel that has not earned itself. It becomes
   a real footer only on the step that sends. */
.pa-req-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pa-space-4);
  padding: 0 var(--pa-space-1);
}

/* The step where the work leaves the client's hands gets more weight than the
   steps that only move them along. */
.pa-req-nav.is-final {
  align-items: flex-end;
  padding: var(--pa-space-5) var(--pa-space-6);
  border-radius: var(--pa-radius-lg);
  background: var(--pa-surface);
  box-shadow: var(--pa-shadow);
}

.pa-req-nav-left,
.pa-req-nav-right {
  display: flex;
  align-items: center;
  gap: var(--pa-space-3);
}

.pa-req-send {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--pa-space-3);
}

.pa-req-send-note {
  max-width: 44ch;
  margin: 0;
  color: var(--pa-text-muted);
  font-size: var(--pa-text-sm);
  line-height: 1.5;
  text-align: right;
}

/* Bigger, pill, and lifted. This is the last thing the client does on the
   screen and it should read that way. */
.pa-req-submit {
  min-height: 56px;
  padding: 0 var(--pa-space-6);
  border-radius: var(--pa-radius-pill);
  box-shadow: var(--pa-shadow);
  font-size: var(--pa-text-base);
}

.pa-req-submit:hover:not(:disabled) { box-shadow: var(--pa-shadow-lg); }

/* Autosave: a live pill, not a whisper. Yellow while the write is in flight -
   the browser is waiting on itself, which is the same weight of "hang on" the
   rest of the screen spends yellow on - then navy once it has landed. */
.pa-req-saved {
  display: inline-flex;
  align-items: center;
  gap: var(--pa-space-2);
  margin: 0;
  padding: var(--pa-space-1) var(--pa-space-3);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-success-soft);
  color: var(--pa-success);
  font-size: var(--pa-text-xs);
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--pa-dur) var(--pa-ease),
              color var(--pa-dur) var(--pa-ease);
}

.pa-req-saved.is-idle {
  background: var(--pa-surface-3);
  color: var(--pa-req-muted-ink);
}

.pa-req-saved.is-idle .pa-req-saved-dot { background: var(--pa-text-faint); }

.pa-req-saved-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-success);
  transition: background var(--pa-dur) var(--pa-ease);
}

.pa-req-saved.is-saving {
  background: var(--pa-warning-soft);
  color: var(--pa-req-warn-ink);
}

.pa-req-saved.is-saving .pa-req-saved-dot {
  background: var(--pa-warning-mark);
  animation: pa-req-pulse 900ms var(--pa-ease) infinite;
}

@keyframes pa-req-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .pa-req-saved.is-saving .pa-req-saved-dot { animation: none; }
}

.pa-req-quota {
  margin: 0;
  padding: var(--pa-space-4) var(--pa-space-5);
  border-radius: var(--pa-radius);
  background: var(--pa-warning-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pa-warning-mark) 55%, transparent);
  color: var(--pa-text);
  font-size: var(--pa-text-sm);
  line-height: 1.55;
}

.pa-req-quota[hidden] { display: none; }

/* ── Review / read-only summary ────────────────────────────────────────────── */
/* Submitted is navy. There is no green in this CI and none gets invented. */
.pa-req-done {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pa-space-4);
  padding: var(--pa-space-6);
  border-radius: var(--pa-radius-lg);
  background: var(--pa-success-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pa-success) 20%, transparent);
}

.pa-req-done-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--pa-radius-pill);
  background: var(--pa-success);
  color: var(--pa-on-dark);
}

.pa-req-done > div { flex: 1; min-width: 200px; }

.pa-req-done-title {
  margin: 0 0 var(--pa-space-1);
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-md);
  font-weight: 600;
  letter-spacing: var(--pa-track-heading);
}

.pa-req-done-note {
  margin: 0;
  color: var(--pa-req-muted-ink);
  font-size: var(--pa-text-sm);
  line-height: 1.55;
}

.pa-req-summary {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-4);
  padding: var(--pa-space-6);
  border-radius: var(--pa-radius-lg);
  background: var(--pa-surface);
  box-shadow: var(--pa-shadow);
}

/* Inside the wizard's review step the summary is already inside a panel. */
.pa-req-review .pa-req-summary {
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.pa-req-summary-title {
  margin: 0;
  font-family: var(--pa-brand-font-display);
  font-size: var(--pa-text-lg);
  font-weight: 600;
  letter-spacing: var(--pa-track-heading);
}

.pa-req-review .pa-req-summary-title { display: none; }

.pa-req-summary-body {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-5);
}

.pa-req-summary-sec-title {
  margin: 0 0 var(--pa-space-3);
  color: var(--pa-text-muted);
  font-size: var(--pa-text-xs);
  font-weight: 700;
  letter-spacing: var(--pa-track-eyebrow);
  text-transform: uppercase;
}

.pa-req-summary-list { margin: 0; }

.pa-req-summary-row {
  display: grid;
  gap: var(--pa-space-1);
  padding: var(--pa-space-4) 0;
  border-top: 1px solid var(--pa-border);
}

.pa-req-summary-row:first-child { border-top: 0; padding-top: 0; }

.pa-req-summary-lbl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pa-space-2);
  color: var(--pa-text-muted);
  font-size: var(--pa-text-sm);
  font-weight: 600;
}

.pa-req-summary-dd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pa-space-3);
  margin: 0;
}

.pa-req-summary-val {
  flex: 1;
  min-width: 0;
  font-size: var(--pa-text-base);
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.pa-req-summary-none {
  flex: 1;
  color: var(--pa-req-muted-ink);
  font-size: var(--pa-text-base);
  font-style: italic;
}

.pa-req-summary-row.is-empty { background: none; }

.pa-req-summary-dd .pa-req-files { flex: 1; min-width: 0; }

/* An action, so the red is right - but as TEXT it has to be --pa-brand-ink. */
.pa-req-editlink {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--pa-space-1);
  min-height: 44px;
  padding: 0 var(--pa-space-4);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-surface);
  color: var(--pa-brand-ink);
  font: inherit;
  font-size: var(--pa-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--pa-dur) var(--pa-ease), border-color var(--pa-dur) var(--pa-ease);
}

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

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .pa-req-view { gap: var(--pa-space-5); }
  .pa-req-card,
  .pa-req-head,
  .pa-req-section,
  .pa-req-summary,
  .pa-req-done { padding: var(--pa-space-5); }
  .pa-req-progline,
  .pa-req-nav { padding: var(--pa-space-4) var(--pa-space-5); }
  .pa-req-card-rule { left: var(--pa-space-5); }
  .pa-req-title { font-size: var(--pa-text-xl); }
  .pa-req-card-title { font-size: var(--pa-text-md); }
  .pa-req-fields { gap: var(--pa-space-5); }

  .pa-req-card-actions .pa-btn,
  .pa-req-nav-right .pa-btn { width: 100%; justify-content: center; }
  .pa-req-card-actions,
  .pa-req-nav-right,
  .pa-req-send { width: 100%; align-items: stretch; }
  .pa-req-send-note { max-width: none; text-align: left; }
  .pa-req-nav { flex-direction: column-reverse; align-items: stretch; }
  .pa-req-nav-left { justify-content: space-between; }

  .pa-req-dot-l { display: none; }
  .pa-req-dot { padding: var(--pa-space-1); }
  .pa-req-summary-dd { flex-direction: column; align-items: stretch; }
  .pa-req-editlink { align-self: flex-start; }
  .pa-req-drop { padding: var(--pa-space-5) var(--pa-space-4); }
}

@media (min-width: 900px) {
  .pa-req-summary-row {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: var(--pa-space-4);
    align-items: start;
  }
  .pa-req-summary-lbl { padding-top: 2px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   EXTERNAL REQUEST - the video request form that lives on the ProAgri site
   ══════════════════════════════════════════════════════════════════════════
   One screen, one link, and the link is the whole point of the screen, so it is
   the only thing on it that carries brand weight. Everything else is quiet. */

.pa-req-card-ext {
  display: flex;
  align-items: center;
  gap: var(--pa-space-2);
  margin: 0;
  font-size: var(--pa-text-sm);
  color: var(--pa-text-muted);
}

.pa-req-card-ext .pa-icon { flex: none; }

.pa-req-ext {
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-4);
  padding: var(--pa-space-6);
  border-radius: var(--pa-radius-lg);
  background: var(--pa-surface);
  box-shadow: var(--pa-shadow);
}

/* Poppins carries a real 600. The 400 that used to sit here was a leftover from
   Instrument Serif, which shipped no bold cut, and it rendered this heading as
   limp body copy in a display face. */
.pa-req-ext-title {
  margin: 0;
  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;
  color: var(--pa-text);
}

.pa-req-ext-note {
  margin: 0;
  max-width: var(--pa-reading-max);
  font-size: var(--pa-text-base);
  line-height: 1.6;
  color: var(--pa-text-muted);
}

.pa-req-ext-actions { display: flex; }

/* An anchor styled as the primary action. It stays an anchor because it opens a
   different site: the client should be able to long-press it, copy it, or send
   it to whoever in the business actually briefs the shoot. */
.pa-req-ext-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pa-space-2);
  min-height: 56px;
  padding: 0 var(--pa-space-6);
  border-radius: var(--pa-radius-pill);
  background: var(--pa-brand-primary);
  box-shadow: var(--pa-shadow);
  color: var(--pa-brand-primary-contrast);
  font-family: inherit;
  font-size: var(--pa-text-base);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--pa-dur-fast) var(--pa-ease),
              box-shadow var(--pa-dur) var(--pa-ease);
}

.pa-req-ext-open .pa-icon { flex: none; }

.pa-req-ext-open:hover {
  background: var(--pa-brand-primary-hover);
  box-shadow: var(--pa-shadow-lg);
}

.pa-req-ext-hint {
  margin: 0;
  font-size: var(--pa-text-xs);
  color: var(--pa-text-muted);
}

@media (max-width: 700px) {
  .pa-req-ext { padding: var(--pa-space-5); }
  .pa-req-ext-actions { display: block; }
  .pa-req-ext-open { width: 100%; }
}

/* ── Focus points: the month as line items ────────────────────────────────── */
/* One row per post, its date beside its wording rather than under it, so the
   client reads down the month instead of down a form. */
.pa-fp-panel {
  padding: var(--pa-space-6);
  border-radius: var(--pa-radius-lg);
  background: var(--pa-surface);
  box-shadow: var(--pa-shadow);
}

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

.pa-fp-title {
  margin: 0;
  font-family: var(--pa-font-display, inherit);
  font-size: var(--pa-text-xl);
  font-weight: 600;
}

.pa-fp-note {
  margin: var(--pa-space-2) 0 0;
  max-width: 56ch;
  color: var(--pa-text-muted);
  font-size: var(--pa-text-sm);
}

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

.pa-fp-row {
  display: flex;
  align-items: flex-start;
  gap: var(--pa-space-4);
  padding: var(--pa-space-4);
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius);
  background: var(--pa-surface-2);
}

/* The post number is the row's anchor: fixed width so every date and every
   description below it lines up down the whole month. */
.pa-fp-num {
  flex: none;
  width: 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: var(--pa-space-5);
}

.pa-fp-num-label {
  font-size: var(--pa-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pa-text-faint);
}

.pa-fp-num-value {
  font-family: var(--pa-font-display, inherit);
  font-size: var(--pa-text-xl);
  font-weight: 700;
  line-height: 1;
  color: var(--pa-text);
}

.pa-fp-fields {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--pa-space-3) var(--pa-space-4);
  align-items: start;
}

.pa-fp-label {
  display: block;
  margin-bottom: var(--pa-space-1);
  font-size: var(--pa-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pa-text-muted);
}

.pa-fp-date,
.pa-fp-desc {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--pa-border-strong);
  border-radius: var(--pa-radius-sm);
  background: var(--pa-surface);
  color: var(--pa-text);
  font: inherit;
  font-size: var(--pa-text-sm);
}

.pa-fp-desc {
  resize: vertical;
  min-height: 64px;
  line-height: 1.5;
  overflow: hidden;
}

.pa-fp-date:focus,
.pa-fp-desc:focus {
  outline: none;
  border-color: var(--pa-brand-primary);
  box-shadow: 0 0 0 3px var(--pa-brand-ring, rgba(0, 0, 0, 0.08));
}

.pa-fp-date.is-error {
  border-color: var(--pa-danger);
  background: var(--pa-danger-soft);
}

.pa-fp-error {
  margin: var(--pa-space-4) 0 0;
  padding: 10px 14px;
  border-radius: var(--pa-radius-sm);
  background: var(--pa-danger-soft);
  color: var(--pa-danger);
  font-size: var(--pa-text-sm);
  font-weight: 600;
}

.pa-fp-actions {
  display: flex;
  align-items: center;
  gap: var(--pa-space-4);
  flex-wrap: wrap;
  margin-top: var(--pa-space-6);
  padding-top: var(--pa-space-5);
  border-top: 1px solid var(--pa-border);
}

.pa-fp-actions-note {
  flex: 1 1 18rem;
  margin: 0;
  color: var(--pa-text-muted);
  font-size: var(--pa-text-sm);
}

/* Approved: the same rows, no controls. */
.pa-fp-list.is-readonly .pa-fp-row { background: var(--pa-surface); }

.pa-fp-ro-date {
  margin: 0;
  font-weight: 600;
  font-size: var(--pa-text-sm);
}

.pa-fp-ro-desc {
  margin: 0;
  color: var(--pa-text-muted);
  font-size: var(--pa-text-sm);
  line-height: 1.55;
}

/* On a phone the date/description columns stack, and the post number moves onto
   its own line as a label rather than eating a third of the width. */
@media (max-width: 700px) {
  .pa-fp-panel { padding: var(--pa-space-4); }
  .pa-fp-row { flex-direction: column; gap: var(--pa-space-2); padding: var(--pa-space-3); }
  .pa-fp-num {
    width: auto;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    padding-top: 0;
  }
  .pa-fp-num-value { font-size: var(--pa-text-lg); }
  .pa-fp-fields { grid-template-columns: 1fr; gap: var(--pa-space-3); }
  .pa-fp-date { max-width: 12rem; }
}