/* ---- Dark theme: black background, softer text and accents ---- */
html[data-color-scheme="dark"],
html:not([data-color-scheme]) {
    --base-color-bg: #000;            /* main background (was dark indigo) */
    --base-color-bg-desktop: #000;    /* area behind the columns (was #0e0a1f purple) */
    --base-color-fg: #c8c8cc;         /* body text: soft grey instead of near-white */
    --base-color-accent: #8a8fbf;     /* links, buttons, highlights: muted periwinkle */
    --color-border-brand-soft: #2a2a33;
}

/* Fallback for "auto" users whose OS is in dark mode */
@media (prefers-color-scheme: dark) {
    html[data-color-scheme="auto"] {
        --base-color-bg: #000;
        --base-color-bg-desktop: #000;
        --base-color-fg: #c8c8cc;
        --base-color-accent: #8a8fbf;
        --color-border-brand-soft: #2a2a33;
    }
}

div.column {
 -webkit-box-flex:1;
 -ms-flex-positive:1;
 flex-grow:1
}
.account__header__fields dl {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    line-height: 15px;
}

/* Make property fields inline-blocks instead of blocks, allowing them
   to sit next to each other instead of line breaking between them. */
.account__header__fields dl dt,
.account__header__fields dl dd {
    display: inline-block;
}

/* Make header mixed-case and cap the max width at 40%  */
.account__header__fields dl dt {
    text-transform: none !important;
    min-width: 40%; 
}

/* Add a ":" after the header */
.account__header__fields dl dt:after {
    content: ":";
    padding-right: 0.5em;
}