/**
 * css/account_page.css — the consolidated user page (/account).
 *
 * A NEW file on purpose: css/main.css is append-only and has mixed line
 * endings, and nothing here is needed anywhere else. Loaded only by
 * account/index.php.
 *
 * The vocabulary is the app's own, taken from css/main.css:
 *   surfaces  linear-gradient(165deg, rgba(34,34,34,.95), rgba(12,12,12,.98))
 *   hairlines rgba(255,255,255,.14) / .06 between rows
 *   accent    #ffd9a3 -> #f2b866, dark text on the filled state
 *   pills     999px segmented controls, 8-10px on buttons
 *   type      Outfit, 14px titles / 11px subs, uppercase 11px meta
 */

#nvc-account-page {
    width: 100%;
    max-width: 62rem;
    margin: 0 auto;
    font-family: 'Outfit', system-ui, sans-serif;
    text-align: left;
}

.nvc-ap-intro {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.nvc-ap-lead {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
}

/* ---------------------------------------------------------------- quick nav */

.nvc-ap-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px;
    margin: 0 0 22px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
}

.nvc-ap-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.62);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.nvc-ap-nav-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
}

.nvc-ap-nav-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.6),
        0 0 0 4px rgba(255, 200, 130, 0.28);
}

.nvc-ap-nav-count {
    font-variant-numeric: tabular-nums;
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    padding: 2px 7px;
    line-height: 1.2;
}

/* ----------------------------------------------------------------- sections */

.nvc-ap-section {
    margin: 0 0 26px;
    scroll-margin-top: 16px;
}

.nvc-ap-sec-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 14px;
    padding: 0 2px 9px;
}

.nvc-ap-sec-heading {
    display: flex;
    align-items: baseline;
    gap: 9px;
    min-width: 0;
}

.nvc-ap-sec-title {
    margin: 0;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.nvc-ap-sec-count {
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
}

.nvc-ap-sec-sub {
    margin: -4px 2px 9px;
    font-size: 11.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.42);
}

.nvc-ap-sec-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.nvc-ap-card {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: linear-gradient(165deg, rgba(34, 34, 34, 0.95) 0%, rgba(12, 12, 12, 0.98) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 8px 28px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

/* --------------------------------------------------------------- list rows */

.nvc-ap-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nvc-ap-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 0 8px 0 0;
    transition: background 0.14s ease;
}

.nvc-ap-item + .nvc-ap-item {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.nvc-ap-item:hover {
    background: rgba(255, 255, 255, 0.045);
}

.nvc-ap-row {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 9px 0 9px 14px;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.nvc-ap-row:focus-visible {
    outline: none;
    background: rgba(255, 255, 255, 0.05);
    box-shadow:
        inset 2px 0 0 #f2b866,
        inset 0 0 0 1px rgba(255, 200, 130, 0.35);
}

.nvc-ap-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.nvc-ap-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nvc-ap-sub {
    margin-top: 1px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.42);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nvc-ap-group {
    padding: 8px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.02);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.34);
}

.nvc-ap-empty {
    margin: 0;
    padding: 18px 16px;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.4);
}

/* ------------------------------------------------------------ row controls */

.nvc-ap-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 6px;
}

.nvc-ap-tool {
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.42);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.nvc-ap-tool:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.nvc-ap-tool:focus-visible {
    outline: none;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 200, 130, 0.4);
}

.nvc-ap-tool-heart,
.nvc-ap-tool-star {
    font-size: 15px;
    padding: 0;
}

.nvc-ap-tool-heart.is-on,
.nvc-ap-tool-star.is-on {
    color: #f2b866;
}

.nvc-ap-tool-danger {
    font-size: 17px;
    padding: 0;
}

.nvc-ap-tool-danger:hover {
    color: #ffb4a8;
    background: rgba(255, 120, 100, 0.12);
}

/* --------------------------------------------------------- links & buttons */

.nvc-ap-link {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.15s ease;
}

.nvc-ap-link:hover,
.nvc-ap-link:focus {
    color: #ffd9a3;
    outline: none;
}

.nvc-ap-link-danger:hover,
.nvc-ap-link-danger:focus {
    color: #ffb4a8;
}

.nvc-ap-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px 16px;
}

.nvc-ap-actions-wrap {
    flex-wrap: wrap;
}

.nvc-ap-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    padding: 4px 16px 16px;
}

.nvc-ap-btn {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1;
    padding: 11px 18px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

.nvc-ap-btn:disabled {
    opacity: 0.55;
    cursor: default;
    transform: none;
}

.nvc-ap-btn-primary {
    background: linear-gradient(165deg, #ffd9a3 0%, #f2b866 100%);
    color: #221605;
    border-color: rgba(255, 217, 163, 0.6);
}

.nvc-ap-btn-primary:hover:not(:disabled),
.nvc-ap-btn-primary:focus:not(:disabled) {
    transform: translateY(-1px);
    outline: none;
}

.nvc-ap-btn-ghost {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
}

.nvc-ap-btn-ghost:hover:not(:disabled),
.nvc-ap-btn-ghost:focus:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.34);
    outline: none;
}

.nvc-ap-btn-danger {
    background: rgba(255, 120, 100, 0.14);
    color: #ffb4a8;
    border-color: rgba(255, 120, 100, 0.4);
}

.nvc-ap-btn-danger:hover:not(:disabled),
.nvc-ap-btn-danger:focus:not(:disabled) {
    background: rgba(255, 120, 100, 0.22);
    color: #fff;
    outline: none;
}

/* ----------------------------------------------------------- forms & notes */

.nvc-ap-form {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
}

.nvc-ap-block {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 4px;
    padding-top: 14px;
}

.nvc-ap-input {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 9px;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 1.3;
}

.nvc-ap-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.nvc-ap-input:focus {
    outline: none;
    border-color: rgba(255, 200, 130, 0.5);
    background: rgba(255, 255, 255, 0.06);
}

.nvc-ap-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.nvc-ap-note {
    margin: 0 0 12px;
    padding: 14px 16px 0;
    font-size: 11.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.45);
}

.nvc-ap-form .nvc-ap-note,
.nvc-ap-block .nvc-ap-note {
    padding: 0 0 10px;
}

.nvc-ap-msg {
    margin: 0 16px 12px;
    padding: 10px 13px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 12.5px;
    line-height: 1.45;
    word-break: break-word;
}

.nvc-ap-msg-error {
    color: #ffb4a8;
    background: rgba(255, 120, 100, 0.1);
    border-color: rgba(255, 120, 100, 0.35);
}

.nvc-ap-msg-success {
    color: #ffd9a3;
    background: rgba(255, 200, 130, 0.1);
    border-color: rgba(255, 200, 130, 0.35);
}

/* ---------------------------------------------------------------- summary */

.nvc-ap-summary {
    padding: 6px 16px 2px;
}

.nvc-ap-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 12.5px;
}

.nvc-ap-summary-row:last-child {
    border-bottom: 0;
}

.nvc-ap-summary-label {
    color: rgba(255, 255, 255, 0.45);
}

.nvc-ap-summary-value {
    color: #fff;
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

/* -------------------------------------------------------- segmented groups */

.nvc-ap-segment {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

.nvc-ap-segment-wide {
    display: flex;
    margin: 14px 16px 12px;
}

.nvc-ap-segment-btn {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.58);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease;
}

.nvc-ap-segment-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
}

.nvc-ap-segment-btn.is-active {
    background: linear-gradient(165deg, #ffd9a3 0%, #f2b866 100%);
    color: #221605;
    font-weight: 600;
}

.nvc-ap-segment-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.6),
        0 0 0 4px rgba(255, 200, 130, 0.28);
}

/* --------------------------------------------------------------- settings */

.nvc-ap-setting {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    padding: 14px 16px;
}

.nvc-ap-setting + .nvc-ap-setting {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.nvc-ap-setting-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 14rem;
}

.nvc-ap-setting-label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
}

.nvc-ap-setting-hint {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.4);
}

/* ------------------------------------------------------------ sync scope */
/* Which lists "Make my account match this device" covers. Same hairline /
   pill vocabulary as .nvc-ap-setting, one row per data set. */

.nvc-ap-scope {
    margin: 0 16px 12px;
    padding: 12px 14px 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.nvc-ap-scope-title {
    margin: 0 0 8px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.nvc-ap-scope-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.nvc-ap-scope-option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.78);
    cursor: pointer;
}

.nvc-ap-scope-option input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #f2b866;
    cursor: pointer;
}

.nvc-ap-scope-option input[type="checkbox"]:disabled {
    cursor: default;
}

.nvc-ap-scope-count {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

.nvc-ap-scope-hint {
    margin: 10px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: rgba(255, 200, 130, 0.75);
}

@media (max-width: 620px) {
    .nvc-ap-scope-options {
        flex-direction: column;
        gap: 10px;
    }
}

/* ------------------------------------------------------------- sync plan */

.nvc-ap-plan {
    margin: 0 16px 16px;
    padding: 14px 16px 4px;
    border: 1px solid rgba(255, 120, 100, 0.35);
    border-radius: 12px;
    background: rgba(255, 120, 100, 0.07);
}

.nvc-ap-plan-refused {
    border-color: rgba(255, 200, 130, 0.35);
    background: rgba(255, 200, 130, 0.07);
}

.nvc-ap-plan-title {
    margin: 0 0 6px;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
}

.nvc-ap-plan-text {
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
}

.nvc-ap-plan-group {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin: 8px 0 4px;
}

.nvc-ap-plan-list {
    margin: 0 0 8px;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

.nvc-ap-plan-more {
    color: rgba(255, 255, 255, 0.4);
}

.nvc-ap-plan .nvc-ap-actions {
    padding: 6px 0 12px;
}

/* ------------------------------------------------------------------ phones */

@media (max-width: 620px) {
    .nvc-ap-nav {
        border-radius: 16px;
    }

    .nvc-ap-nav-btn {
        padding: 7px 11px;
        font-size: 11px;
    }

    .nvc-ap-sec-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .nvc-ap-actions {
        flex-wrap: wrap;
    }

    .nvc-ap-btn {
        flex: 1 1 auto;
        padding: 11px 14px;
    }

    .nvc-ap-setting {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    /* In a column flex container `flex: 1 1 14rem` would be a 14rem HEIGHT,
       which tore label and control apart. Let both size to their content. */
    .nvc-ap-setting-text {
        flex: 0 0 auto;
    }

    .nvc-ap-segment {
        justify-content: flex-start;
    }

    .nvc-ap-title {
        font-size: 13.5px;
    }
}

/* ------------------------------------------------------------ song history */
/* The Art. 21 off switch for the song-view recording (#nvc-account-song-history,
   renderSongHistorySection() in js/account_page.js).

   No new visual idiom: the same card, the same hairlines, the same segmented
   amber pill as every other control on this page. The only difference is that
   the card's hairline and its section title carry the accent instead of white,
   so the eye lands on it while scrolling. A control somebody has an absolute
   right to reach has to be findable; it does not have to shout. */

/* A deployment without accounts renders nothing into the container. Without this
   the empty div would still spend its 26px bottom margin. */
.nvc-ap-section:empty {
    margin: 0;
}

.nvc-ap-section-flag .nvc-ap-sec-title {
    color: #ffd9a3;
}

.nvc-ap-section-flag .nvc-ap-sec-sub {
    color: rgba(255, 255, 255, 0.58);
}

.nvc-ap-section-flag .nvc-ap-card {
    border-color: rgba(255, 200, 130, 0.34);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 8px 28px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 200, 130, 0.07);
}

/* The one control the card exists for: a touch larger than a settings row. */
.nvc-ap-setting-lead {
    padding-top: 16px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nvc-ap-setting-lead .nvc-ap-setting-label {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.nvc-ap-setting-lead .nvc-ap-setting-hint {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
}

/* ------------------------------------------------------------- campus */
/* docs/CAMPUSES.md — the "My campus" section, the register fields and the
   campus page (which loads this file first). .nvc-ap-row is the LIST ROW
   above; the side-by-side input layout is .nvc-ap-fields. */

.nvc-ap-fields {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.nvc-ap-fields .nvc-ap-input {
    min-width: 0;
    flex: 1 1 50%;
}

.nvc-ap-fields .nvc-ap-btn {
    flex: 0 0 auto;
    align-self: center;
    margin-top: 8px;
}

.nvc-ap-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.nvc-ap-select option {
    color: #111;
    background: #fff;
}

/* A list row that is not clickable (member rows on the campus page). */
.nvc-ap-row-static,
.nvc-ap-row-static:hover,
.nvc-ap-row-static:focus-visible {
    cursor: default;
    background: transparent;
    box-shadow: none;
}

.nvc-ap-note-success {
    color: #b9f0b0;
}

.nvc-ap-note-error {
    color: #ff9d9d;
}

.nvc-ap-campus-pending {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 217, 163, 0.45);
    border-radius: 12px;
    background: rgba(255, 217, 163, 0.06);
}

.nvc-ap-campus-join,
.nvc-ap-campus-create,
.nvc-ap-campus-location {
    margin-top: 14px;
    padding: 12px 16px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.nvc-ap-tool-warn {
    color: #ff9d9d;
}

.nvc-ap-tool-warn:hover {
    color: #ffb4a8;
    background: rgba(255, 120, 100, 0.12);
}

/* --------------------------------------------------- folded sections */

.nvc-ap-collapsible .nvc-ap-sec-heading {
    border: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}

.nvc-ap-collapsible .nvc-ap-sec-heading:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(242, 184, 102, 0.5);
    border-radius: 8px;
}

.nvc-ap-sec-chevron {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    width: 12px;
}

.nvc-ap-section.is-folded {
    margin-bottom: 6px;
}

.nvc-ap-section.is-folded .nvc-ap-sec-head {
    margin-bottom: 0;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* -- card inner alignment -- everything placed directly in a card keeps the
   16px inset the forms, notes and action rows already use. */

.nvc-ap-card > .nvc-ap-input,
.nvc-ap-card > .nvc-ap-select {
    width: calc(100% - 32px);
    margin-left: 16px;
    margin-right: 16px;
}

.nvc-ap-card > .nvc-ap-fields {
    margin-left: 16px;
    margin-right: 16px;
}

.nvc-ap-card > .nvc-ap-group + .nvc-ap-input,
.nvc-ap-card > .nvc-ap-group + .nvc-ap-fields,
.nvc-ap-card > .nvc-ap-list + .nvc-ap-fields {
    margin-top: 12px;
}

.nvc-ap-card > .nvc-ap-link {
    display: inline-block;
    margin: 12px 16px 12px;
}

.nvc-ap-card > .nvc-ap-link + .nvc-ap-fields,
.nvc-ap-card > .nvc-ap-link + .nvc-ap-input {
    margin-top: 0;
}

.nvc-ap-card > .nvc-ap-campus-pending {
    margin: 12px 16px;
}

.nvc-ap-card > .nvc-ap-note + .nvc-ap-input,
.nvc-ap-card > .nvc-ap-note + .nvc-ap-fields {
    margin-top: 4px;
}

/* Side-by-side input + button: same height, same baseline, same bottom gap. */
.nvc-ap-fields {
    align-items: stretch;
}

.nvc-ap-fields .nvc-ap-input {
    margin-bottom: 9px;
}

.nvc-ap-fields .nvc-ap-btn {
    align-self: stretch;
    margin: 0 0 9px;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
}

/* Blocks that carry their own 16px inset must not double it up. */
.nvc-ap-campus-join .nvc-ap-actions,
.nvc-ap-campus-create .nvc-ap-actions,
.nvc-ap-campus-location .nvc-ap-actions,
.nvc-ap-campus-pending .nvc-ap-actions {
    padding-left: 0;
    padding-right: 0;
}

.nvc-ap-campus-join .nvc-ap-note,
.nvc-ap-campus-create .nvc-ap-note,
.nvc-ap-campus-location .nvc-ap-note,
.nvc-ap-campus-pending .nvc-ap-note {
    padding-left: 0;
    padding-right: 0;
}

.nvc-ap-campus-pending .nvc-ap-note {
    padding-top: 0;
}

.nvc-ap-campus-join .nvc-ap-group {
    padding-left: 0;
    padding-right: 0;
    border-top: 0;
    background: transparent;
}

/* css/setlistcreator.css paints every input[type=text] light gray (#f1f1f1);
   that attribute selector outranks .nvc-ap-input, so restate the dark look
   at higher specificity for the typed inputs used here. */
.nvc-ap-input[type="text"],
.nvc-ap-input[type="search"],
.nvc-ap-input[type="url"],
.nvc-ap-input[type="email"],
.nvc-ap-input[type="password"] {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

.nvc-ap-input[type="text"]:focus,
.nvc-ap-input[type="search"]:focus,
.nvc-ap-input[type="url"]:focus,
.nvc-ap-input[type="email"]:focus,
.nvc-ap-input[type="password"]:focus {
    background: rgba(255, 255, 255, 0.06);
}

/* ------------------------------------------------------------- tabs */

.nvc-ap-nav-btn.is-active {
    color: #0c0c0c;
    background: linear-gradient(165deg, #ffd9a3 0%, #f2b866 100%);
}

.nvc-ap-nav-btn.is-active .nvc-ap-nav-count {
    color: #0c0c0c;
    background: rgba(0, 0, 0, 0.12);
}

.nvc-ap-nav-btn.is-active:hover {
    color: #0c0c0c;
    background: linear-gradient(165deg, #ffe2b8 0%, #f5c27a 100%);
}

.nvc-ap-input[type="date"] {
    color-scheme: dark;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

.nvc-ap-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.55);
    cursor: pointer;
}