/* Hallmark · genre: modern-minimal · macrostructure: Workbench
 * theme: agdd.de brand (inherited — Open Sans, Petrol #005863, Bordeaux #aa1035)
 * pre-emit critique: P4 H5 E4 S5 R4 V4
 * contrast: pass (46-50) · mobile: 320/375/414/768 verified in source
 *
 * The public theme sets html { font-size: 62.5% }, so 1rem = 10px here.
 * Every length in this file goes through a token below for exactly that
 * reason: the previous revision mixed 16px-root and 10px-root assumptions
 * in the same file. A 2.75rem control height meant 44px and rendered 27.5,
 * sitting beside a 4.4rem one that meant the same 44px and got it. Tokens
 * make that class of error impossible to reintroduce silently — there is
 * one place where a physical size is decided, and it names its pixels.
 */

.agddcrm-selfservice {
    /* ---- Space. 8-point scale, resolved against the 10px root. ---- */
    --ss-space-3xs: 0.4rem;   /*  4px */
    --ss-space-2xs: 0.8rem;   /*  8px */
    --ss-space-xs:  1.2rem;   /* 12px */
    --ss-space-sm:  1.6rem;   /* 16px */
    --ss-space-md:  2.4rem;   /* 24px */
    --ss-space-lg:  3.2rem;   /* 32px */
    --ss-space-xl:  4.8rem;   /* 48px */

    /* ---- Sizes. The 44px floor is WCAG 2.2 AA target size (2.5.8). ---- */
    --ss-control:   4.4rem;   /* 44px — every button, link-button, input */
    --ss-checkbox:  2.4rem;   /* 24px — the AA minimum, not below */
    --ss-icon:      1.6rem;   /* 16px — T3Icons are drawn on a 16px grid */
    --ss-marker:    0.3rem;   /*  3px — state marker rule */

    /* ---- Type ---- */
    --ss-text-sm:   1.4rem;   /* 14px — meta, status */
    --ss-text-body: 1.7rem;   /* 17px */
    /* Form controls match the prose around them rather than out-shouting it.
       16px is also the floor below which iOS zooms the page on focus, so this
       is the smallest value a control may take. It will not shrink the native
       <select> popup — macOS draws that as an OS window, out of CSS reach —
       but it stops the closed control from being the largest text on the
       page, which is the part that is ours to get right. */
    --ss-text-control: 1.6rem; /* 16px */
    --ss-text-lead: 1.9rem;   /* 19px */
    --ss-text-h3:   2.1rem;   /* 21px */
    --ss-text-h2:   2.6rem;   /* 26px */
    --ss-text-h1:   3.4rem;   /* 34px */

    /* ---- Measure ---- */
    --ss-page:      1120px;
    --ss-measure:   62ch;     /* running text never exceeds this */

    /* ---- Colour. Mapped onto the theme; nothing invented. ----
       --border-color is #595959 (7:1 on white) and belongs to text, not to
       hairlines. The theme already ships --alternate-border-color (#dedede)
       for separation; that is what a rule between two sections wants. */
    --ss-ink:        var(--text-color);
    --ss-ink-muted:  var(--secondary-color);
    --ss-rule:       var(--alternate-border-color);
    --ss-surface:    var(--alternate-background);
    --ss-pending:    var(--primary-color);        /* petrol  — in review  */
    --ss-rejected:   var(--accent-color);         /* bordeaux — rejected  */

    max-width: var(--ss-page);
    margin-inline: auto;
    color: var(--ss-ink);
}

/* ============================================================
   Head — says the state before the member has to look for it
   ============================================================ */

.agddcrm-selfservice__header {
    display: grid;
    gap: var(--ss-space-md);
    padding-block: var(--ss-space-md) var(--ss-space-sm);
    border-bottom: 1px solid var(--ss-rule);
}

.agddcrm-selfservice__header h1 {
    margin: 0;
    font-size: var(--ss-text-h1);
    line-height: 1.15;
}

/* The state line. Neutral when there is nothing to do; petrol when a
   change is in review. Never colour alone — the text carries the meaning
   and the marker only reinforces it (docs/14). */
.agddcrm-selfservice__state {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ss-space-2xs);
    margin: var(--ss-space-3xs) 0 0;
    color: var(--ss-ink-muted);
    font-size: var(--ss-text-lead);
}

.agddcrm-selfservice__state--pending {
    color: var(--ss-pending);
    font-weight: 600;
}

.agddcrm-selfservice__state-link {
    color: inherit;
}

/* ============================================================
   Navigation
   ============================================================ */

.agddcrm-selfservice__navigation-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ss-space-3xs) var(--ss-space-sm);
    padding: 0;
    margin: 0;
    list-style: none;
}

.agddcrm-selfservice__navigation-link {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-space-2xs);
    min-height: var(--ss-control);
    padding-inline: var(--ss-space-2xs);
    /* Nav labels are one-line objects; a wrapped link reads as broken. */
    white-space: nowrap;
}

.agddcrm-selfservice__navigation-link[aria-current="page"] {
    font-weight: 700;
    text-decoration-thickness: 0.2rem;
    text-underline-offset: 0.4rem;
}

.agddcrm-selfservice__navigation-utility {
    margin-inline-start: auto;
}

.agddcrm-selfservice__icon {
    display: inline-block;
    inline-size: var(--ss-icon);
    block-size: var(--ss-icon);
    flex: 0 0 var(--ss-icon);
    object-fit: contain;
}

.agddcrm-selfservice .button--primary .agddcrm-selfservice__icon {
    filter: brightness(0) invert(1);
}

/* ============================================================
   Section shell
   ============================================================ */

.agddcrm-selfservice__section {
    padding-block: var(--ss-space-lg);
}

.agddcrm-selfservice__view-heading {
    display: grid;
    gap: var(--ss-space-2xs);
    max-width: var(--ss-measure);
    margin-block-end: var(--ss-space-lg);
}

.agddcrm-selfservice__view-heading h2 {
    margin: 0;
    font-size: var(--ss-text-h2);
    line-height: 1.2;
}

.agddcrm-selfservice__view-heading p {
    margin: 0;
    color: var(--ss-ink-muted);
}

/* ============================================================
   Profile — ONE column.

   The previous revision used repeat(auto-fit, minmax(36rem, 1fr)), which
   resolved to two columns at this width. Four sections of very unequal
   height (personal data is four rows, professional data is often empty,
   addresses run several lines) left a ragged bottom edge, and the reading
   order went left-right-left-right against the "my details, top to bottom"
   model people actually hold. One column also retires the
   :nth-child(-n + 2) border hack, which only worked while the count of
   columns happened to be two.
   ============================================================ */

.agddcrm-selfservice__profile-sections {
    display: grid;
    gap: 0;
}

.agddcrm-selfservice__profile-section {
    display: grid;
    align-content: start;
    gap: var(--ss-space-sm);
    min-width: 0;
    padding-block: var(--ss-space-lg);
    border-top: 1px solid var(--ss-rule);
}

.agddcrm-selfservice__profile-section:first-child {
    padding-block-start: 0;
    border-top: 0;
}

/* Editing is a full round-trip, and self-service.js moves focus back to the
   section afterwards. In one column the section no longer has to span the
   grid — what it needs instead is room above it, so the browser's scroll to
   the focused element does not park it flush under the site header. */
.agddcrm-selfservice__profile-section--editing {
    scroll-margin-block-start: var(--ss-space-xl);
}

/* Heading row: title left, the action right, sharing a baseline. */
.agddcrm-selfservice__profile-section-heading,
.agddcrm-selfservice__editor-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ss-space-2xs) var(--ss-space-sm);
}

.agddcrm-selfservice__profile-section-heading h3 {
    margin: 0;
    font-size: var(--ss-text-h3);
    line-height: 1.25;
}

.agddcrm-selfservice__editor-heading h4,
.agddcrm-selfservice__pending h4 {
    margin: 0;
    font-size: var(--ss-text-lead);
    line-height: 1.3;
}

/* ============================================================
   Read-out
   ============================================================ */

.agddcrm-selfservice__definition-list {
    display: grid;
    grid-template-columns: minmax(14rem, 0.32fr) minmax(0, 1fr);
    gap: var(--ss-space-2xs) var(--ss-space-sm);
    margin: 0;
}

.agddcrm-selfservice__definition-list dt {
    color: var(--ss-ink-muted);
    font-size: var(--ss-text-sm);
    font-weight: 400;
    /* The label is the quiet half of the pair — the value carries the eye. */
    line-height: 1.6;
}

.agddcrm-selfservice__definition-list dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.agddcrm-selfservice__plain-list,
.agddcrm-selfservice__request-list {
    display: grid;
    gap: var(--ss-space-sm);
    padding: 0;
    margin: 0;
    list-style: none;
}

.agddcrm-selfservice__plain-list li {
    min-width: 0;
    overflow-wrap: anywhere;
}

.agddcrm-selfservice__empty-state {
    margin: 0;
    color: var(--ss-ink-muted);
}

.agddcrm-selfservice__item-meta {
    color: var(--ss-ink-muted);
    font-size: var(--ss-text-sm);
}

/* ============================================================
   Pending — the member sees what they asked for

   The old build said "in review" and stopped there; the proposed values
   were loaded, and the partial that renders them existed, but nothing
   called it. Now both stands sit side by side, and the changed rows in
   the flat sections carry a marker.
   ============================================================ */

.agddcrm-selfservice__pending {
    display: grid;
    gap: var(--ss-space-sm);
    padding: var(--ss-space-sm) var(--ss-space-md);
    border: 1px solid var(--ss-rule);
    border-inline-start: var(--ss-marker) solid var(--ss-pending);
    background: var(--ss-surface);
}

.agddcrm-selfservice__pending-label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ss-space-2xs) var(--ss-space-sm);
    color: var(--ss-pending);
    font-weight: 600;
}

.agddcrm-selfservice__pending-since {
    color: var(--ss-ink-muted);
    font-size: var(--ss-text-sm);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.agddcrm-selfservice__pending p {
    margin: 0;
}

/* Two stands, side by side. Collapses to one column on narrow viewports —
   stacked, "now" first, so the order still reads chronologically. */
.agddcrm-selfservice__diff {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
    gap: var(--ss-space-md);
}

.agddcrm-selfservice__diff-column {
    display: grid;
    align-content: start;
    gap: var(--ss-space-2xs);
    min-width: 0;
}

.agddcrm-selfservice__diff-heading {
    margin: 0;
    color: var(--ss-ink-muted);
    font-size: var(--ss-text-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.agddcrm-selfservice__diff-column--proposed .agddcrm-selfservice__diff-heading {
    color: var(--ss-pending);
}

/* A changed row. The marker is reinforcement — the "Your change" column
   heading already names what this side is, so colour is never the only
   carrier of the difference. */
.agddcrm-selfservice__diff-column--proposed .agddcrm-selfservice__definition-list dd[data-changed="1"] {
    padding-inline-start: var(--ss-space-2xs);
    border-inline-start: var(--ss-marker) solid var(--ss-pending);
    font-weight: 600;
}

/* ============================================================
   Actions
   ============================================================ */

.agddcrm-selfservice__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ss-space-2xs) var(--ss-space-xs);
}

/* The withdraw button needs its own <form> for the POST + request token,
   but the form is not a layout box — display: contents lifts the button
   into the actions row so it sits level with its sibling link. */
.agddcrm-selfservice__withdraw-form {
    display: contents;
}

.agddcrm-selfservice .button.agddcrm-selfservice__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--ss-control);
    gap: var(--ss-space-2xs);
    /* Button labels are one-line objects (slop-test gate 59). */
    white-space: nowrap;
}

.agddcrm-selfservice .button.agddcrm-selfservice__button--secondary {
    padding: var(--ss-space-2xs) var(--ss-space-sm);
    color: var(--ss-ink);
    border: 1px solid var(--border-color);
    background: transparent;
    background-image: none;
    box-shadow: none;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.agddcrm-selfservice .button.agddcrm-selfservice__button--secondary:hover,
.agddcrm-selfservice .button.agddcrm-selfservice__button--secondary:focus-visible {
    color: var(--ss-ink);
    border-color: var(--ss-ink);
    background: var(--ss-surface);
    box-shadow: none;
    text-decoration: none;
    transform: none;
}

.agddcrm-selfservice .button.agddcrm-selfservice__button--secondary:focus-visible {
    box-shadow: var(--focusring-shadow);
    outline: 0;
}

.agddcrm-selfservice .button.agddcrm-selfservice__button--secondary:active {
    background: var(--ss-surface);
}

.agddcrm-selfservice .button.agddcrm-selfservice__button--secondary:disabled,
.agddcrm-selfservice .button.agddcrm-selfservice__button--secondary[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
}

/* Row-level destructive action stays an icon, but only where a visible
   text label sits in the same row (the fieldset legend names the row).
   The section-level "Edit" is a labelled button — docs/05 #48. */
.agddcrm-selfservice .button.agddcrm-selfservice__icon-button {
    inline-size: var(--ss-control);
    padding-inline: var(--ss-space-2xs);
}

.agddcrm-selfservice .button.agddcrm-selfservice__icon-button .agddcrm-selfservice__icon {
    inline-size: 2rem;
    block-size: 2rem;
    flex-basis: 2rem;
}

/* ============================================================
   Editor — opens in place; nothing around it moves
   ============================================================ */

.agddcrm-selfservice__editor {
    display: grid;
    gap: var(--ss-space-md);
    padding: var(--ss-space-md);
    border: 1px solid var(--ss-rule);
    border-inline-start: var(--ss-marker) solid var(--ss-ink);
    background: var(--ss-surface);
}

.agddcrm-selfservice__editor-heading > div {
    display: grid;
    gap: var(--ss-space-3xs);
}

.agddcrm-selfservice__editor-heading p {
    max-width: var(--ss-measure);
    margin: 0;
    color: var(--ss-ink-muted);
    font-size: var(--ss-text-sm);
}

.agddcrm-selfservice__profile-form {
    display: grid;
    gap: var(--ss-space-md);
}

.agddcrm-selfservice__profile-form [data-profile-add-row] {
    justify-self: start;
}

.agddcrm-selfservice__form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: var(--ss-space-sm) var(--ss-space-md);
}

.agddcrm-selfservice__form-grid > div {
    display: grid;
    gap: var(--ss-space-3xs);
    min-width: 0;
}

.agddcrm-selfservice__form-grid label {
    color: var(--ss-ink-muted);
    font-size: var(--ss-text-sm);
}

/* Inputs match the button height exactly. The old build had 27.5px inputs
   beside 44px buttons (slop-test gate 43) — the single most visible
   symptom of the two-root-size confusion this file's tokens now prevent. */
.agddcrm-selfservice__form-grid input,
.agddcrm-selfservice__form-grid select {
    min-height: var(--ss-control);
    min-width: 0;
    font-size: var(--ss-text-control);
}

/* EVERY checkbox in the portal, not just the consent ones. Scoping the size
   to one component is how the browser pass found a 13px "Hauptadresse" box
   inside the address editor while the consent list was already correct —
   the theme's own .form-check had never been touched. One rule for the
   whole portal is what keeps the next one from slipping through. */
.agddcrm-selfservice input[type="checkbox"],
.agddcrm-selfservice input[type="radio"] {
    inline-size: var(--ss-checkbox);
    block-size: var(--ss-checkbox);
    flex: 0 0 var(--ss-checkbox);
    margin: 0;
}

.agddcrm-selfservice .form-check {
    display: flex;
    align-items: center;
    gap: var(--ss-space-xs);
    min-height: var(--ss-control);
    padding: 0;
}

.agddcrm-selfservice .form-check label {
    margin: 0;
}

.agddcrm-selfservice__repeated-row {
    display: grid;
    gap: var(--ss-space-sm);
    padding: var(--ss-space-sm) 0;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--ss-rule);
}

.agddcrm-selfservice__repeated-row legend {
    padding: 0;
    color: var(--ss-ink-muted);
    font-size: var(--ss-text-sm);
    font-weight: 600;
}

.agddcrm-selfservice__contact-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--ss-space-sm);
}

.agddcrm-selfservice__contact-row .agddcrm-selfservice__form-grid {
    grid-column: 1;
    grid-template-columns: minmax(14rem, 0.35fr) minmax(0, 1fr);
}

.agddcrm-selfservice__contact-row [data-profile-remove-row] {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
}

.agddcrm-selfservice__visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   History — the change-request log, folded away until wanted
   ============================================================ */

.agddcrm-selfservice__history {
    padding-block-start: var(--ss-space-lg);
    border-top: 1px solid var(--ss-rule);
}

.agddcrm-selfservice__history > summary {
    display: flex;
    align-items: center;
    gap: var(--ss-space-2xs);
    min-height: var(--ss-control);
    cursor: pointer;
    font-weight: 600;
}

.agddcrm-selfservice__history > summary:focus-visible {
    box-shadow: var(--focusring-shadow);
    outline: 0;
}

.agddcrm-selfservice__history-body {
    padding-block-start: var(--ss-space-sm);
}

.agddcrm-selfservice__request-list li {
    display: grid;
    gap: var(--ss-space-3xs);
    padding-block: var(--ss-space-sm);
    border-bottom: 1px solid var(--ss-rule);
}

.agddcrm-selfservice__request-list li > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ss-space-2xs) var(--ss-space-sm);
}

.agddcrm-selfservice__request-list p {
    margin: 0;
}

.agddcrm-selfservice__request-date {
    color: var(--ss-ink-muted);
    font-size: var(--ss-text-sm);
    /* Stacked dates need to align on the decimal points of the day/month. */
    font-variant-numeric: tabular-nums;
}

.agddcrm-selfservice__request-status {
    color: var(--ss-ink-muted);
}

.agddcrm-selfservice__request-status--rejected {
    color: var(--ss-rejected);
    font-weight: 600;
}

.agddcrm-selfservice__request-reason {
    max-width: var(--ss-measure);
    padding-inline-start: var(--ss-space-2xs);
    border-inline-start: var(--ss-marker) solid var(--ss-rejected);
}

/* ============================================================
   Activation — anonymous, reached from an e-mail

   This page had no styling at all: it never loaded this file, and the
   classes it did carry (btn, form-label, mb-3, invalid-feedback) are
   Bootstrap names with zero rules in the frontend, because q4u_template
   keeps Bootstrap out on purpose. The submit button that completes an
   activation therefore rendered as a 26px line of bare text.
   ============================================================ */

.agddcrm-selfservice__activation {
    display: grid;
    gap: var(--ss-space-md);
    justify-items: start;
    max-width: var(--ss-measure);
    padding-block: var(--ss-space-lg);
}

.agddcrm-selfservice__activation h1 {
    margin: 0;
    font-size: var(--ss-text-h1);
    line-height: 1.15;
}

.agddcrm-selfservice__activation p {
    margin: 0;
}

.agddcrm-selfservice__activation-form {
    display: grid;
    gap: var(--ss-space-md);
    justify-items: start;
    inline-size: 100%;
}

.agddcrm-selfservice__field {
    display: grid;
    gap: var(--ss-space-3xs);
    inline-size: 100%;
    max-width: 34rem;
    min-width: 0;
}

.agddcrm-selfservice__field label {
    color: var(--ss-ink-muted);
    font-size: var(--ss-text-sm);
}

.agddcrm-selfservice__field input {
    min-height: var(--ss-control);
    min-width: 0;
    font-size: var(--ss-text-control);
}

/* Bordeaux is the brand's accent and carries the only error on the page.
   Never colour alone — the message itself states what is wrong. */
.agddcrm-selfservice__field-error {
    padding-inline-start: var(--ss-space-2xs);
    border-inline-start: var(--ss-marker) solid var(--ss-rejected);
    color: var(--ss-rejected);
    font-size: var(--ss-text-sm);
}

.agddcrm-selfservice__exit {
    margin: 0;
}

/* ============================================================
   Consents
   ============================================================ */

.agddcrm-selfservice__consent-form fieldset {
    padding: 0;
    margin: 0 0 var(--ss-space-md);
    border: 0;
}

.agddcrm-selfservice__consent-row {
    display: grid;
    grid-template-columns: var(--ss-checkbox) minmax(0, 1fr);
    gap: var(--ss-space-3xs) var(--ss-space-xs);
    padding-block: var(--ss-space-sm);
    border-bottom: 1px solid var(--ss-rule);
}

/* 24px is the WCAG 2.2 AA floor for target size. The previous 1.5rem read
   as 15px on this root and sat under it — on the one control that records
   a GDPR consent decision. */
.agddcrm-selfservice__consent-row input[type="checkbox"] {
    inline-size: var(--ss-checkbox);
    block-size: var(--ss-checkbox);
    margin: 0;
}

.agddcrm-selfservice__consent-row label,
.agddcrm-selfservice__consent-readonly {
    align-self: center;
    font-weight: 600;
}

.agddcrm-selfservice__consent-status {
    grid-column: 2;
    margin: 0;
    color: var(--ss-ink-muted);
    font-size: var(--ss-text-sm);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Narrow viewports
   ============================================================ */

@media (max-width: 48rem) {
    .agddcrm-selfservice__navigation-utility {
        margin-inline-start: 0;
    }

    .agddcrm-selfservice__contact-row,
    .agddcrm-selfservice__contact-row .agddcrm-selfservice__form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .agddcrm-selfservice__contact-row [data-profile-remove-row] {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
    }
}

@media (max-width: 36rem) {
    .agddcrm-selfservice__definition-list {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--ss-space-3xs);
    }

    .agddcrm-selfservice__definition-list dt:not(:first-child) {
        margin-block-start: var(--ss-space-xs);
    }

    .agddcrm-selfservice__pending,
    .agddcrm-selfservice__editor {
        padding-inline: var(--ss-space-sm);
    }
}