/* ── Signup terms modal — the card stack a worker reads before sealing the deal ──
   (interface/templates/app/signup/_signup_terms_modal.html)

   Full-width cards in the opportunity edit drawer's writing order rather than a
   2×2 grid: a sparse role (unpaid, virtual, nothing to hand in) reads as a
   stack of real answers instead of a grid with holes. Tokens only — this file
   holds zero raw hex / radius / shadow / font-weight, and the CSS-standards
   ratchet keeps it that way.

   The classes say assignments- while the file says signup-: the prefix charter
   has no signup- prefix (the guard maps it to assignments-, the app these
   modals belong to), but the file sits beside signup-groups.css and is named
   for the surface it styles, like every other component sheet here. The
   data-testids keep the signup-terms- spelling because tests name the surface
   too, and the guard only charters CSS class prefixes. */

.assignments-terms {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-smd);
    margin-bottom: var(--spacing-md);
}

/* One term: an icon chip beside a labelled value. Top-aligned, because the
   scope card's prose grows and the chip should hold its first line. */
.assignments-terms__card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-card-bg);
}

/* A term that moved since the worker last saw it wears the warning ramp; what
   it used to say sits struck through in __was below the new value. */
.assignments-terms__card--changed {
    border-color: var(--color-warning-border);
    background: var(--color-warning-bg);
}

.assignments-terms__chip {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-card);
    background: var(--brand-primary-alpha-05);
    color: var(--brand-primary-on-card-bg);
    font-size: var(--font-size-xl);
}

.assignments-terms__card--changed .assignments-terms__chip {
    background: color-mix(in srgb, var(--color-warning) 12%, transparent);
    color: var(--color-warning-text);
}

.assignments-terms__main {
    flex: 1;
    min-width: 0;
}

.assignments-terms__label {
    margin-bottom: var(--spacing-2xs);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* 17px, between the lg and xl tokens: lg (15px) reads as body text beside an
   11px label, and xl (20px) on every card shouts over the pay figure. */
.assignments-terms__value {
    font-size: 1.0625rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

/* The number the worker is really here for. */
.assignments-terms__value--big {
    font-size: 1.375rem;
}

/* A real answer that is deliberately not a headline — Unpaid, Virtual, Not set
   yet. Quiet, so the loud values stay the ones that vary. */
.assignments-terms__value--quiet {
    font-weight: var(--font-weight-body);
    color: var(--color-text-secondary);
}

.assignments-terms__sub {
    margin-top: var(--spacing-2xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* The scope of work's own sentences, printed as written. */
.assignments-terms__body {
    margin: var(--spacing-2xs) 0 0;
    font-size: var(--font-size-md);
    line-height: 1.55;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

/* What a moved term used to say — the template strikes it, this colors it. */
.assignments-terms__was {
    margin: var(--spacing-2xs) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-warning-text);
}