.integration-notice {
    padding: .85rem 1rem;
    border-inline-start: .25rem solid var(--brand);
    border-radius: .4rem;
    background: var(--brand-soft);
    color: var(--ink);
}

.integration-notice a { font-weight: 800; }

.secret-copy-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
}

.secret-copy-row code {
    display: block;
    min-width: 0;
    padding: .8rem;
    overflow-wrap: anywhere;
    border-radius: .6rem;
    background: #111827;
    color: #f9fafb;
    user-select: all;
}

.secret-copy-row__button { white-space: nowrap; }

.delivery-table-wrap {
    max-width: 100%;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: .8rem;
    background: var(--panel);
}

.delivery-table {
    width: 100%;
    min-width: 62rem;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: .82rem;
}

.delivery-table th,
.delivery-table td {
    min-width: 0;
    padding: .7rem;
    border-bottom: 1px solid var(--line);
    text-align: start;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.delivery-table th {
    background: color-mix(in srgb, var(--brand-soft) 45%, var(--panel));
    color: var(--muted);
    font-size: .68rem;
    letter-spacing: calc(.05em * var(--track-label));
    text-transform: uppercase;
}

.delivery-table th:nth-child(1) { width: 8.5rem; }
.delivery-table th:nth-child(3) { width: 11rem; }
.delivery-table th:nth-child(4) { width: 6.5rem; }
.delivery-table th:nth-child(5) { width: 5.5rem; }
.delivery-table th:nth-child(7) { width: 7rem; }
/* Those five widths are measured for the English column headers, and
   `table-layout: fixed` means the browser may not widen a column for what is
   in it. German `Zustellungsversuche` then breaks mid-word inside the 5.5rem
   Attempts column, and `Erneut zustellen` - a nowrap button - simply overflows
   the 7rem Action column. So English keeps the fixed layout it was drawn for,
   and every other language gets the automatic one, where the same five widths
   become preferences a column is allowed to exceed.
   Endpoint and Result carry no width at all. Under the automatic layout the
   cells' own `overflow-wrap: anywhere` lets Endpoint collapse to a couple of
   characters per line while Result, holding the response snippet, takes the
   room; so those two state here what the fixed layout was giving them by
   arithmetic. Measured at 1280px the automatic columns land within 8% of the
   fixed ones, and Action grows the 16px the button needs. */
.delivery-table:not(:lang(en)) { table-layout: auto; }
.delivery-table:not(:lang(en)) th:nth-child(2) { width: 14rem; }
.delivery-table:not(:lang(en)) th:nth-child(6) { width: 16rem; }
.delivery-table tr:last-child td { border-bottom: 0; }
.delivery-table td form { display: block !important; margin: 0 !important; }
.delivery-action button { white-space: nowrap; }
.delivery-result > span { display: block; margin-bottom: .35rem; font-weight: 750; }
.delivery-result__snippet {
    max-width: 100%;
    max-height: 7rem;
    margin: 0;
    padding: .55rem;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: .45rem;
    background: color-mix(in srgb, var(--paper) 72%, var(--panel));
    color: var(--ink);
    font: .72rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.integration-form {
    display: grid;
    gap: .8rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.integration-form[disabled] { opacity: .72; }

.webhook-test-action {
    display: grid !important;
    gap: .3rem !important;
    margin: 0 !important;
}

.webhook-test-action small {
    max-width: 15rem;
    color: var(--muted);
    font-size: .72rem;
}

.integration-options {
    display: grid;
    gap: .6rem;
    margin: .4rem 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .7rem;
}

.integration-options legend {
    padding-inline: .35rem;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
}

.account-section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.session-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.25rem 0 1rem;
}

.session-heading-row form,
.session-card form {
    display: block !important;
    margin: 0 !important;
}

.session-list {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.session-card {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .8rem;
    background: color-mix(in srgb, var(--panel) 92%, var(--brand-soft));
}

.session-card__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
}

.session-card__badge {
    display: inline-flex;
    min-height: 1.55rem;
    align-items: center;
    padding: .18rem .48rem;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-deep);
    font-size: .68rem;
    font-weight: 800;
}

.session-card__badge--muted {
    background: color-mix(in srgb, var(--muted) 10%, var(--panel));
    color: var(--muted);
}

/* The raw agent is a supporting detail, not the name of the device. Two lines
   is enough to tell two Firefoxes apart; the title attribute keeps the rest. */
.session-card__browser {
    display: -webkit-box;
    overflow: hidden;
    margin: .35rem 0 .2rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: .78rem;
}

/* An ended session is kept for reference; it should not read like a live one. */
.session-card--revoked { background: var(--panel); opacity: .72; }

.session-card__details {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .75rem;
    color: var(--muted);
    font-size: .78rem;
}

.session-card .button--quiet {
    border: 1px solid var(--line);
    white-space: nowrap;
}

@media (max-width: 34rem) {
    .secret-copy-row { grid-template-columns: minmax(0, 1fr); }
    .secret-copy-row__button { width: 100%; }
    .session-heading-row {
        align-items: stretch;
        flex-direction: column;
    }

    .session-heading-row button,
    .session-card button {
        width: 100%;
    }

    .session-card {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The shell's `width` beats a bare `max-width`, so this page had been
   rendering at the 42rem reading measure its two-column builder was never
   drawn for. Widen it the way the sharing and billing pages do. */
.rule-page { width: min(100% - 2rem, 74rem) !important; padding-bottom: 4rem; }
.rule-panel { margin: 1.5rem 0 2.5rem; padding: clamp(1rem, 3vw, 1.75rem); border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); }
.rule-panel__heading, .rule-card__summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.rule-panel__heading h2, .rule-card__summary h3 { margin: 0; }
.rule-panel__heading > span { padding: .3rem .65rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand-deep); font-weight: 800; }
.rule-builder { margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; }
.rule-builder legend { padding: 0 .4rem; font-weight: 850; }
.rule-builder__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1rem; }
.rule-builder label { display: grid; gap: .3rem; min-width: 0; font-weight: 720; }
.rule-builder label small { color: var(--muted); font-weight: 500; }
.rule-builder input:not([type="checkbox"]), .rule-builder select { width: 100%; min-width: 0; }
.rule-builder__compound { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .4rem; }
.rule-builder__checks { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .75rem; border: 1px solid var(--line); border-radius: .65rem; }
.rule-builder__checks label, .rule-builder__enabled { display: flex !important; align-items: center; gap: .45rem; }
.rule-builder__delete { padding: .75rem; border-inline-start: .2rem solid #b56a00; background: color-mix(in srgb, #b56a00 8%, transparent); }
.rule-preview { margin: 1.5rem 0; padding: clamp(1rem, 3vw, 1.5rem); border: 2px solid var(--brand); border-radius: 1rem; background: var(--brand-soft); }
.rule-preview__messages { max-height: 18rem; overflow: auto; margin: 1rem 0; border: 1px solid var(--line); border-radius: .7rem; background: var(--panel); }
.rule-preview__messages article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem 1rem; padding: .7rem .85rem; border-bottom: 1px solid var(--line); }
.rule-preview__messages article:last-child { border-bottom: 0; }
.rule-preview__messages span { grid-column: 1 / -1; overflow-wrap: anywhere; color: var(--muted); font-size: .78rem; }
.rule-preview__messages time { color: var(--muted); font-size: .75rem; }
.rule-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.rule-card { padding: clamp(1rem, 3vw, 1.35rem); border: 1px solid var(--line); border-radius: .9rem; background: var(--panel); }
.rule-card--inactive { background: color-mix(in srgb, var(--panel) 92%, var(--muted)); }
.rule-card--empty { text-align: center; }
.rule-card__summary > div { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rule-card__summary > p { margin: .25rem 0 0; color: var(--muted); font-size: .78rem; text-align: end; }
.rule-card__position { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: .45rem; background: var(--brand-soft); color: var(--brand-deep); font-size: .78rem; font-weight: 900; }
.rule-card__status { padding: .18rem .45rem; border-radius: 999px; background: color-mix(in srgb, #b56a00 12%, transparent); color: var(--ink); font-size: .68rem; font-weight: 800; }
.rule-card__status--active { background: color-mix(in srgb, #238636 14%, transparent); }
.rule-card__definition { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0; }
.rule-card__definition > div { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.rule-card__definition code { padding: .2rem .4rem; border-radius: .35rem; background: var(--brand-soft); overflow-wrap: anywhere; font-size: .72rem; }
.rule-card__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.rule-card__actions form, .rule-preview form, .rule-card__delete form { display: block !important; margin: 0 !important; }
.rule-card__editor, .rule-card__delete { margin-top: .85rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.rule-card details > summary { cursor: pointer; color: var(--brand-deep); font-weight: 800; }
.rule-card__editor form { margin-top: 1rem; }

@media (max-width: 44rem) {
    .rule-builder__grid, .rule-card__definition { grid-template-columns: minmax(0, 1fr); }
    .rule-panel__heading, .rule-card__summary { align-items: stretch; flex-direction: column; }
    .rule-card__summary > p { text-align: start; }
    .rule-preview__messages article { grid-template-columns: minmax(0, 1fr); }
}

/* The shell sets a 42rem reading measure; the member and grant lists need
   more room, so widen it the way the billing page already does. */
.sharing-page { width: min(100% - 2rem, 64rem) !important; }
.sharing-page h1 { margin: 0 0 .5rem; letter-spacing: calc(-.035em * var(--track-display)); }
.sharing-page > p { max-width: 62ch; }
.sharing-identity { color: var(--muted); font-size: .92rem; }
.sharing-handle, .sharing-address {
    padding: .12rem .38rem;
    border-radius: .35rem;
    background: var(--brand-soft);
    color: var(--brand-deep);
    font: 650 .88rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow-wrap: anywhere;
}

.sharing-section {
    margin: 1.75rem 0;
    padding: clamp(1rem, 3vw, 1.6rem);
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--panel);
}

.sharing-section > h2 { margin: 0 0 .5rem; font-size: 1.28rem; letter-spacing: calc(-.03em * var(--track-display)); }
.sharing-section > p { max-width: 68ch; margin: 0 0 .85rem; color: var(--muted); font-size: .92rem; }
.sharing-section .integration-notice { margin: 0 0 1rem; color: var(--ink); }
.sharing-usage { font-weight: 700; }
.sharing-hint { margin: -.35rem 0 0; color: var(--muted); font-size: .8rem; font-weight: 500; }
.sharing-empty { margin: .5rem 0 0; color: var(--muted); font-size: .9rem; }
.sharing-subheading { margin: 1.25rem 0 .5rem; font-size: .95rem; }

.sharing-token-once .sharing-token-words {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .9rem 0 0;
    padding: 0;
    list-style: none;
}

.sharing-token-words li {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    gap: .45rem;
    padding: .35rem .7rem;
    border: 1px solid var(--line);
    border-radius: .6rem;
    background: var(--panel);
    font: 700 .95rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.sharing-token-words li span { color: var(--muted); font-size: .7rem; }

.sharing-list { display: grid; gap: .7rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.sharing-list--members, .sharing-list--grants { margin-top: .6rem; }

.sharing-card {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem 1rem;
    padding: .9rem 1rem;
    border: 1px solid var(--line);
    border-radius: .8rem;
    background: color-mix(in srgb, var(--panel) 92%, var(--brand-soft));
}

.sharing-card--guest { border-inline-start: .25rem solid var(--brand); }
.sharing-card__body { min-width: 0; }
.sharing-card__title { margin: 0; font-size: .95rem; font-weight: 700; overflow-wrap: anywhere; }
.sharing-card__title code { overflow-wrap: anywhere; font-size: .86rem; }

.sharing-card__details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    margin: .4rem 0 0;
    color: var(--muted);
    font-size: .8rem;
}

.sharing-card__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.sharing-card form { display: block !important; margin: 0 !important; }
.sharing-section .button--quiet, .sharing-card__action { white-space: nowrap; }

.sharing-badge {
    display: inline-flex;
    min-height: 1.6rem;
    align-items: center;
    padding: .18rem .5rem;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-deep);
    font-size: .72rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.sharing-badge--owner { background: color-mix(in srgb, var(--brand) 20%, var(--panel)); color: var(--brand-deep); }
.sharing-badge--guests { background: color-mix(in srgb, var(--success) 16%, var(--panel)); color: var(--success); }
.sharing-badge--new { background: color-mix(in srgb, #b56a00 18%, var(--panel)); color: var(--ink); }
.sharing-badge--muted { background: color-mix(in srgb, var(--muted) 12%, var(--panel)); color: var(--muted); }
.sharing-state { font-weight: 700; }
.sharing-state--accepted { color: var(--success); }

.sharing-mailbox {
    margin: 1rem 0 0;
    padding: clamp(.85rem, 2.5vw, 1.25rem);
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: var(--paper);
}

.sharing-mailbox__heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.sharing-mailbox__heading h3 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.sharing-mailbox__heading .sharing-card__details { margin: 0; }

.sharing-role-form {
    display: flex !important;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem !important;
}

.sharing-role-form select { width: auto; min-width: 9.5rem; }

.sharing-new-grants { display: grid; gap: .5rem; margin: .6rem 0 0; justify-items: start; }
.sharing-new-grants form { display: block !important; margin: 0 !important; }

.sharing-report { margin: 0; }
.sharing-report > summary { min-height: 2.75rem; padding: .68rem .4rem; color: var(--brand-deep); font-size: .88rem; font-weight: 800; cursor: pointer; }
.sharing-report form { display: grid !important; gap: .5rem !important; margin: .5rem 0 0 !important; }
.sharing-report textarea { min-height: 5rem; }

.sharing-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .35rem; color: var(--muted); font-size: .88rem; }
.sharing-footer-links a { display: inline-flex; min-height: 2.5rem; align-items: center; padding-inline: .35rem; }

@media (max-width: 44rem) {
    .sharing-card { grid-template-columns: minmax(0, 1fr); }
    .sharing-card__actions { justify-content: flex-start; }
    .sharing-card__actions > form, .sharing-card__actions > form > button, .sharing-card__action { width: 100%; }
    .sharing-role-form { width: 100%; }
    .sharing-role-form select, .sharing-role-form button { width: 100%; }
    .sharing-report { width: 100%; }
}

/* The webhook page carried its own inline layout and a hardcoded border that
   stayed light in dark mode. It needs more room than the 42rem reading measure
   because the delivery log is a 62rem table. */
.integration-page { width: min(100% - 2rem, 72rem) !important; }

.webhook-card {
    margin: 1rem 0;
    padding: clamp(1rem, 3vw, 1.35rem);
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: var(--panel);
}

.webhook-card > :first-child { margin-top: 0; }
.webhook-card__title { margin: 0 0 .6rem; overflow-wrap: anywhere; }
.webhook-card__title small { color: var(--muted); font-weight: 700; }
.webhook-card__url { overflow-wrap: anywhere; }
.webhook-card summary { color: var(--brand-deep); font-weight: 800; cursor: pointer; }

/* `align-items: start` keeps the test-event form, which carries a hint below
   its button, from stretching that one button taller than the rest of the row. */
.webhook-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: .5rem;
    margin-top: .75rem;
}

/* Only the margin needs resetting: the test-event form is a grid on purpose,
   so its "activate this first" hint sits under its button. */
.webhook-card__actions > form { margin: 0 !important; }

/* A create form is most of a screen; behind a summary the page opens on what
   the account already has. */
.integration-disclosure { margin-block: .75rem 1.5rem; }

.integration-disclosure__summary {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    gap: .5rem;
    padding: .5rem .8rem;
    border: 1px solid var(--line);
    border-radius: .72rem;
    color: var(--ink);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.integration-disclosure__summary::-webkit-details-marker { display: none; }

.integration-disclosure__summary::after {
    width: .5rem;
    height: .5rem;
    margin-inline-start: auto;
    /* Physical on purpose. These two borders are a rotated square's corner,
       not an accent bar: made logical they move to the other corner and the
       45deg below then points the caret sideways instead of down. A
       disclosure caret is vertical and does not mirror. Twin rule:
       .admin-nav-disclosure__summary::after in app.css. */
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-.15rem) rotate(45deg);
    transition: transform .16s ease;
    content: "";
}

.integration-disclosure[open] > .integration-disclosure__summary::after { transform: translateY(.15rem) rotate(-135deg); }
.integration-disclosure__summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Revoking is the destructive end of this list, not its primary action. */
.token-list__revoke { width: auto; justify-self: start; }

/* The export table carries the download link in its last column. At the 42rem
   reading measure that column sat outside the card with no visible scrollbar,
   so a ready archive looked like it had no way to fetch it. */
.account-data-page { width: min(100% - 2rem, 64rem) !important; }

/* The shared table clips a `small` to one nowrap line ending in an ellipsis.
   Here that line is the reason an export failed, which is the point of the row. */
.account-table td small { display: block; max-width: none; overflow: visible; white-space: normal; }

/* A six-column table cannot survive a phone. Below this width each row becomes
   a labelled block, so the status and the download link stay on screen. */
@media (max-width: 44rem) {
    .account-table, .account-table tbody, .account-table tr, .account-table td { display: block; }
    .account-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .account-table tr { padding: .35rem 0; border-bottom: 1px solid var(--line); }
    .account-table tr:last-child { border-bottom: 0; }
    .account-table td { display: grid; grid-template-columns: minmax(6.5rem, 8rem) minmax(0, 1fr); gap: .25rem .75rem; padding: .35rem .75rem; border-bottom: 0; }
    .account-table td::before { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: calc(.04em * var(--track-label)); text-transform: uppercase; content: attr(data-label); }
    .account-table td[colspan] { grid-template-columns: minmax(0, 1fr); }
    /* A status pill is a chip, not a bar the width of the column. */
    .account-table td .billing-status { justify-self: start; }
    /* The coupon code identifies the redemption; stacked there is no room
       to clip it to one line, so let it wrap instead. */
    .account-table td .billing-invoice-id { max-width: none; overflow: visible; overflow-wrap: anywhere; white-space: normal; }
    /* The delivery log carries an explicit min-width for its seven columns;
       stacked it has to give that up or the rows scroll sideways anyway. */
    .delivery-table.account-table { min-width: 0; }
    .delivery-table.account-table td form { display: block !important; margin: 0 !important; }
    /* A delivery that cannot be re-sent should not print an empty Action row. */
    .delivery-table.account-table td.delivery-action:not(:has(form)) { display: none; }
    /* The snippet is part of the result, so keep it in the value column. */
    .delivery-table.account-table .delivery-result__snippet { grid-column: 2; max-width: 100%; }
    .account-table td small { grid-column: 2; }
}

/* The delivery log stays a table: hide its scrollbar and the columns past
   "status" simply vanish with no cue that they are there. */
.delivery-table-wrap { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

/* feedback.js focuses this alert on load, exactly as it does a flash, but only
   the flash had a focus ring of its own to show for it. */
.billing-notice:focus { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; }
.billing-notice--error:focus { outline-color: color-mix(in srgb, #b42318 45%, transparent); }

.recovery-code-actions { margin-block: 1rem 1.5rem; }

.candidate-list { display: grid; gap: .7rem; margin: 1rem 0 1.5rem; padding: 0; list-style: none; }

.candidate {
    padding: .85rem 1rem;
    border: 1px solid var(--line);
    border-radius: .8rem;
    background: var(--panel);
}

.candidate__form { display: block !important; margin: 0 !important; }

.candidate__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1rem;
}

.candidate__address { min-width: 0; overflow-wrap: anywhere; font: 750 1rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.candidate__row button { white-space: nowrap; }
.candidate__extras { margin-top: .6rem; }
/* Keep the default list-item display so the disclosure triangle survives. */
.candidate__extras > summary { padding: .6rem 0; color: var(--brand-deep); font-size: .85rem; font-weight: 800; cursor: pointer; }
.candidate__extras > :not(summary) { margin-top: .5rem; }
.candidate__extras label { display: block; margin-top: .7rem; }
.candidate__extras textarea { min-height: 4.5rem; }

@media (max-width: 34rem) {
    .candidate__row { align-items: stretch; flex-direction: column; }
    .candidate__row button { width: 100%; }
}

/* Inside the narrow current-plan column two feature columns wrap every entry
   into three ragged lines; let the count follow the room there is. */
.billing-feature-list { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }