@layer legacy {
/*
 * Forovanta Community Software
 * Copyright (c) 2026 Zovanta Software Co. <sales@zovanta.dev> - https://zovanta.dev
 * Licensed under the Forovanta Free License Agreement. See LICENSE for details.
 *
 * The appearance layer.
 *
 * Two jobs, and they belong together: what a **style** is allowed to change, and the screen
 * you change it on.
 *
 *  1. The header's icon controls, and the design tokens the style properties write to. The
 *     board's own stylesheet (`assets/forum.css`) is the board; this sheet is the layer a
 *     style paints on. It is loaded straight after that one so a style's variables win, and
 *     the tokens in `:root` below are the shipped values for every knob on the Style
 *     properties tab — so a property that sets nothing draws exactly what the board drew
 *     before styles existed.
 *
 *  2. **Admin → Appearance → Themes**, drawn by `admin/themes.php`: the style cards, the
 *     how-to card and the tabbed editor.
 *
 * It is a file of its own rather than more of `assets/forum.css` because the board's own
 * sheet is already the largest file in the archive, and because this half is *new*: a style
 * at its defaults is invisible without it, and a board that loses the file loses nothing but
 * the appearance screen.
 */

/* ------------------------------------------------------------------ */
/* 1. The style property tokens                                        */
/* ------------------------------------------------------------------ */

/*
 * Every one of these is what a row on the Style properties tab writes. They are declared
 * here rather than in the board's sheet so that the board keeps working unchanged when no
 * style sets anything — which is the whole contract: a style is a layer, not a fork.
 */
:root {
  --fv-font-size: 100%;
  --fv-line-height: 1.55;
  --fv-heading-font: inherit;
  --fv-heading-tracking: -0.01em;
  --fv-content-width: 1400px;
  --fv-scrollbar: color-mix(in srgb, var(--text) 32%, transparent);
  --fv-selection: color-mix(in srgb, var(--accent) 35%, transparent);
  --focus-ring: var(--accent);
  --nav-text: var(--muted);
  --nav-active-surface: var(--accent-soft);
  --nav-active-text: var(--accent-soft-fg);
}

html { font-size: var(--fv-font-size); scrollbar-color: var(--fv-scrollbar) transparent; }
body { line-height: var(--fv-line-height); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fv-heading-font);
  letter-spacing: var(--fv-heading-tracking);
}
::selection { background: var(--fv-selection); }
*::-webkit-scrollbar-thumb { background: var(--fv-scrollbar); }

/*
 * Content width.
 *
 * `html.layout-fluid` is the reader's own "fluid width" choice and must keep winning, so the
 * capped rule is written for the state that is *not* fluid — the same pair the board's own
 * sheet uses, one step more specific so a style's width actually applies.
 */
html:not(.layout-fluid) .app-shell { max-width: var(--fv-content-width); }

/*
 * Navigation.
 *
 * The sidebar and its links live in the board's sheet, where a link borrows the muted caption
 * colour and a selected one wears the accent wash. These two rules put that pair on the
 * navigation's own tokens, so the Style properties tab can tint the sidebar without
 * repainting every timestamp on the board.
 */
.app-sidebar .nav-link { color: var(--nav-text); }
.app-sidebar .nav-link.active { background: var(--nav-active-surface); color: var(--nav-active-text); }

/* The keyboard focus ring follows the style's accent, on every focusable control. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* 2. The header's icon controls                                       */
/* ------------------------------------------------------------------ */

/*
 * `.icon-btn` is declared twice in the board's sheet — once for the shell's round header
 * controls (2.25rem, transparent, no border) and once, much later, for the admin area's small
 * round bin (1.6rem, red on hover). Same class, same specificity, so the later one won on
 * every page: the header drew its magnifier, its light/dark switch and its bell at the admin's
 * size and flushed all three red under the pointer.
 *
 * These rules put the shell's controls back on their own class. Counting two classes, they
 * outrank the admin rule wherever the two meet, so the header no longer depends on which half
 * of the sheet happens to be read last.
 */
.site-header .header-icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
}
.site-header .header-icon-btn:hover {
  background: var(--surface-2);
  border-color: transparent;
  text-decoration: none;
}

/*
 * One hover colour per control, because the three glyphs do three different jobs: the
 * magnifier and the moon answer in white, the sun — the one that only ever means "back to the
 * light" — in yellow, and the bell, which only ever means something happened, in the board's
 * danger tone.
 */
.site-header .header-icon-btn[data-icon="search"]:hover,
.site-header .header-icon-btn[data-icon="moon"]:hover { color: #ffffff; }
.site-header .header-icon-btn[data-icon="sun"]:hover { color: #ffd400; }
.site-header .header-icon-btn[data-icon="bell"]:hover { color: var(--danger); }

/*
 * ---------- an address box and the picker beside it ----------
 *
 * `assets/branding.js` puts a picker beside each address box on the admin router's own inline
 * forms — the Branding card, a plan's icon on Subscriptions, a category's icon on Forum
 * categories — and tells each form to post as `multipart/form-data`. These rules are what make
 * the box and its picker read as one control — the React build's "URL or file upload" — instead
 * of as two fields on two lines, and what draws the preview of the picture the pair currently
 * means.
 */
.brand-asset { display: flex; align-items: center; gap: 0.5rem; }
.brand-preview {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  object-fit: cover;
  background: var(--surface-2);
}
.brand-asset > input[type="text"],
.brand-asset > input:not([type]) { flex: 1 1 auto; min-width: 0; }
.brand-picker-file {
  flex: 0 0 auto;
  width: auto;
  max-width: 13rem;
  height: auto;
  padding: 0.35rem 0.45rem;
  font-size: 0.78rem;
  color: var(--muted);
}

/* ------------------------------------------------------------------ */
/* 3. Admin → Appearance → Themes                                      */
/* ------------------------------------------------------------------ */

.styles-intro { margin: 0 0 1.1rem; max-width: 62rem; }
/* The visitor style chooser: a switch and one checkbox per style, in two tidy columns. */
.styles-chooser-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.5rem 1rem; margin: 0.75rem 0;
}
.styles-chooser .check { display: flex; align-items: center; gap: 0.45rem; }
.styles-heading-icon { font-size: 0.9rem; opacity: 0.75; margin-right: 0.15rem; }
.styles-inline-icon { font-size: 0.8rem; }
.styles-button-icon { font-size: 0.85rem; }
.styles-footnote { margin-top: 1.1rem; }

/* The layout is the React screen's: a two-column toolbar, then a grid of style cards. */
.styles-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  margin: 1.1rem 0;
}

/* ---------- add a style ---------- */
.styles-add-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
}
.styles-import, .styles-child { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin: 0; }
.styles-import .field, .styles-child .field { margin: 0; }
.styles-child input { width: 12rem; }
.styles-child select { width: 14rem; }
.styles-add-action { padding-bottom: 0.05rem; }
.styles-or { padding-bottom: 0.6rem; }
.styles-import input[type="file"] {
  width: 100%;
  max-width: 20rem;
  padding: 0.35rem 0.5rem;
  height: auto;
  font-size: 0.82rem;
}

/* ---------- how to create a style ---------- */
.styles-steps { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.styles-steps li { display: flex; gap: 0.55rem; align-items: flex-start; color: var(--muted); font-size: 0.875rem; line-height: 1.6; }
.styles-steps strong { color: var(--text); font-weight: 600; }
.styles-step-n { color: var(--text); font-weight: 700; }

.styles-requirements {
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  padding: 0.8rem 0.95rem;
}
.styles-requirements-title {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.styles-requirements ul { margin: 0.55rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.styles-requirements li { font-size: 0.78rem; color: var(--muted); line-height: 1.55; }
.styles-requirements code, .styles-example, .styles-hex, .styles-mono { font-family: var(--mono); }

.styles-example-title { margin: 1.1rem 0 0.4rem; font-weight: 600; font-size: 0.9rem; }
.styles-example {
  margin: 0;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  background: color-mix(in srgb, var(--surface-2) 45%, transparent);
  font-size: 0.75rem;
  line-height: 1.65;
  overflow-x: auto;
  color: var(--text);
}

.styles-notes {
  display: grid;
  gap: 0.6rem 1.4rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.1rem;
}
.styles-notes p { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0; font-size: 0.78rem; color: var(--muted); line-height: 1.55; }
.styles-notes strong { color: var(--text); }
.styles-note-icon { margin-top: 0.15rem; font-size: 0.8rem; flex: 0 0 auto; }

/* ---------- one style card ---------- */
.styles-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.95rem 1rem; }
.styles-card.is-active { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.styles-card.is-open { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, var(--border)); }
.styles-card-head { display: flex; align-items: center; gap: 0.55rem; }
.styles-page-swatch, .styles-swatch {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  flex: 0 0 auto;
}
.styles-card-name { font-weight: 600; font-size: 0.9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.styles-badge {
  margin-left: auto;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.styles-badge--active { background: var(--accent); color: var(--accent-fg); }
.styles-card-key { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.7rem; color: var(--muted); }
.styles-card-key code {
  background: var(--surface-2);
  border-radius: 0.25rem;
  padding: 0.05rem 0.35rem;
  font-size: 0.7rem;
}
.styles-card-inherits { display: inline-flex; align-items: center; gap: 0.15rem; }
.styles-card-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.styles-card-pills span {
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.68rem;
}
.styles-card-description { margin: 0; }
/*
 * A commercial style's licence block, inside its card.
 *
 * It holds a status line, the licence scope (never the key), a write-only replacement box and
 * the two buttons. Nothing here prints a stored value: the input always draws empty.
 */
.styles-licence {
  border: 1px solid var(--border);
  border-radius: var(--radius, 0.5rem);
  background: var(--surface-2);
  padding: 0.6rem 0.7rem;
  display: grid;
  gap: 0.45rem;
}
.styles-licence-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; }
.styles-licence-status .styles-badge { margin-left: 0; }
.styles-licence-scope { margin: 0; }
.styles-licence-scope code { background: var(--surface); border-radius: 0.25rem; padding: 0.05rem 0.35rem; font-size: 0.7rem; }
.styles-licence-form { margin: 0; display: grid; gap: 0.4rem; }
.styles-licence-form .field { margin: 0; }
.styles-licence-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.styles-card-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-top: auto; }
.styles-card-actions form { margin: 0; display: inline-flex; }
.styles-pill-button { border-radius: 999px; }
.styles-icon-action { width: 2rem; height: 2rem; }
.styles-icon-action:hover { color: var(--text); }
.styles-icon-action--danger:hover { color: var(--danger); }

/* ---------- the editor ---------- */
/*
 * The editor is drawn below every style card, and **Edit** lands on it by fragment
 * (`#styles-editor`). Two rules make that jump land where it should: the scroll margin keeps the
 * card's heading clear of the board's sticky header (3.5rem, plus a little air), and the outline
 * is what a keyboard user sees when the fragment moves focus into the card — a jump nobody can
 * see from the keyboard is only half a jump.
 */
.styles-editor { margin-top: 1.1rem; scroll-margin-top: 4.25rem; }
.styles-editor:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
.styles-editor-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.8rem; }
.styles-editor-head-actions { display: flex; gap: 0.4rem; align-items: center; }
.styles-readonly {
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px dashed var(--border);
  border-radius: calc(var(--radius) - 4px);
  color: var(--muted);
  font-size: 0.875rem;
}
.styles-editor-form { margin-top: 0.9rem; }
.styles-editor-foot { display: flex; gap: 0.5rem; margin-top: 1.1rem; }

/*
 * The tab strip, with no scripting at all.
 *
 * Five radio inputs sit first in `.styles-tabs` and are hidden; each one's panel and each
 * one's label are found by the general sibling combinator. A browser that runs no script
 * still switches tabs, a keyboard can move between them with the arrow keys, and the strip
 * needs no `hidden` attribute to be kept in step with anything.
 */
.styles-tabs { position: relative; }
.styles-tab-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.styles-tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.55rem;
  margin: 0.2rem 0 1.15rem;
}
.styles-tab-list label {
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
}
.styles-tab-list label:hover { background: var(--surface-2); color: var(--text); }
.styles-tab-panel { display: none; }

#style-tab-scheme:checked ~ .styles-panel-scheme,
#style-tab-properties:checked ~ .styles-panel-properties,
#style-tab-templates:checked ~ .styles-panel-templates,
#style-tab-modifications:checked ~ .styles-panel-modifications,
#style-tab-advanced:checked ~ .styles-panel-advanced { display: block; }

#style-tab-scheme:checked ~ .styles-tab-list label[for="style-tab-scheme"],
#style-tab-properties:checked ~ .styles-tab-list label[for="style-tab-properties"],
#style-tab-templates:checked ~ .styles-tab-list label[for="style-tab-templates"],
#style-tab-modifications:checked ~ .styles-tab-list label[for="style-tab-modifications"],
#style-tab-advanced:checked ~ .styles-tab-list label[for="style-tab-advanced"] {
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
}

#style-tab-scheme:focus-visible ~ .styles-tab-list label[for="style-tab-scheme"],
#style-tab-properties:focus-visible ~ .styles-tab-list label[for="style-tab-properties"],
#style-tab-templates:focus-visible ~ .styles-tab-list label[for="style-tab-templates"],
#style-tab-modifications:focus-visible ~ .styles-tab-list label[for="style-tab-modifications"],
#style-tab-advanced:focus-visible ~ .styles-tab-list label[for="style-tab-advanced"] {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- colour scheme ---------- */
.styles-scheme-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.5rem; margin-bottom: 1.1rem; }
.styles-scheme-row .field { margin: 0; }
.styles-accent { display: flex; align-items: center; gap: 0.5rem; }
.styles-accent input[type="color"] {
  width: 3rem;
  height: 2.25rem;
  padding: 0.15rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  background: var(--surface-2);
  cursor: pointer;
}
.styles-hex { width: 8rem; }
.styles-dark-toggle { padding-bottom: 0.6rem; }

/* ---------- style properties ---------- */
.styles-group-title {
  margin: 1.1rem 0 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.styles-group-title:first-child { margin-top: 0; }
.styles-property-list {
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
}
.styles-property {
  display: grid;
  gap: 0.6rem 1.2rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--border);
}
.styles-property:last-child { border-bottom: 0; }
.styles-property.is-inherited { background: color-mix(in srgb, var(--surface-2) 30%, transparent); }
.styles-property-name { margin: 0; font-size: 0.86rem; font-weight: 600; }
.styles-property-help { margin: 0.1rem 0 0; font-size: 0.7rem; color: var(--muted); line-height: 1.5; }
.styles-property-note { font-style: italic; }
.styles-property-control { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.styles-stroke { display: flex; align-items: center; gap: 0.3rem; }
.styles-stroke input[type="color"] {
  width: 2.4rem;
  height: 2.1rem;
  padding: 0.12rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 5px);
  background: var(--surface-2);
  cursor: pointer;
}
.styles-property-input { width: 14rem; }
.styles-inherit { font-size: 0.72rem; white-space: nowrap; }

/* ---------- templates ---------- */
.styles-template { border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); padding: 0.75rem 0.85rem; margin-bottom: 0.6rem; }
.styles-template.is-customized { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.styles-template-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.styles-template-title { margin: 0; font-size: 0.86rem; font-weight: 600; }
.styles-template-customize { font-size: 0.75rem; white-space: nowrap; }
.styles-template-body { margin-top: 0.55rem; font-size: 0.78rem; }

/* ---------- modifications ---------- */
.styles-modifications-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.8rem; }
.styles-modification { display: flex; flex-direction: column; gap: 0.55rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); padding: 0.75rem 0.85rem; margin-bottom: 0.6rem; }
.styles-modification.is-new { border-style: dashed; }
.styles-modification-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; }
.styles-modification-head select { width: 15rem; }
.styles-modification-head .check { font-size: 0.75rem; }
.styles-modification-remove { margin-left: auto; }
.styles-modification-description { font-size: 0.84rem; }
.styles-modification-pair { display: grid; gap: 0.55rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.styles-modification-pair textarea { font-size: 0.78rem; }
.styles-nomatch {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent);
  border-radius: 999px;
  color: #f59e0b;
  font-size: 0.68rem;
  font-weight: 600;
}
.styles-empty {
  margin: 0 0 0.6rem;
  padding: 0.75rem 0.85rem;
  border: 1px dashed var(--border);
  border-radius: calc(var(--radius) - 4px);
  color: var(--muted);
  font-size: 0.84rem;
}

/* ---------- tokens & CSS ---------- */
.styles-tokens-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.7rem; }
.styles-token { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.styles-token input:first-child { width: 14rem; font-size: 0.78rem; }
.styles-token input:last-child { flex: 1 1 12rem; font-size: 0.78rem; }
.styles-css { margin-top: 1.2rem; }
.styles-css-body { font-size: 0.78rem; line-height: 1.6; }

@media (max-width: 900px) {
  .styles-notes { grid-template-columns: minmax(0, 1fr); }
  .styles-property { grid-template-columns: minmax(0, 1fr); }
  .styles-modification-pair { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ */
/* 4. Pictures the board uploads rather than links to                  */
/* ------------------------------------------------------------------ */

/*
 * A cover a member or a moderator uploaded, shown above the picker that replaces it.
 *
 * `profile_image_url()` returns an absolute address untouched and prefixes a stored path, so
 * both a picture this board holds and one an administrator once pasted in are drawn the same
 * way here.
 */
.blog-cover-preview {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  margin-bottom: 0.5rem;
}

/* An `image` field on a described admin screen: the picture it holds, then the picker. */
.admin-image-field { display: flex; flex-direction: column; gap: 0.45rem; align-items: flex-start; }
.admin-image-field img {
  max-width: 14rem;
  max-height: 5rem;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 5px);
  background: var(--surface-2);
  padding: 0.25rem;
}
.admin-image-field input[type="file"] { width: 100%; max-width: 22rem; padding: 0.3rem 0.45rem; height: auto; font-size: 0.8rem; }
/* Admin → Appearance → Socials: one row per link, and a preview of the sidebar widget. */
.socials-preview {
  margin: 1rem 0 0; padding: 0.85rem 1rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
}
.socials-preview .rail-socials { margin-top: 0.5rem; }
.social-edit-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin-top: 0.6rem; padding: 0.6rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
}
.social-edit-row select { flex: 0 1 10rem; }
.social-edit-row input[type="text"] { flex: 1 1 14rem; min-width: 0; }
.social-edit-row input[type="file"] { flex: 1 1 14rem; min-width: 0; height: auto; font-size: 0.8rem; }
.social-edit-row--custom .social-icon-preview {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; flex: 0 0 auto; overflow: hidden;
  border-radius: 999px; background: var(--accent); color: var(--accent-fg);
}
.social-icon-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The Footer menu editor's own logo preview, so the box next to it is not a huge picture. */
.footer-brand-preview { margin: 0.35rem 0 0.6rem; }
.footer-brand-preview img {
  max-width: 14rem;
  max-height: 5rem;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 5px);
  background: var(--surface-2);
  padding: 0.25rem;
}

/* ---------- Branding ---------- */
.brand-asset { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.15rem; max-width: 34rem; }
.brand-asset-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: stretch; }
.brand-asset-row input[type="text"] { flex: 1 1 16rem; min-width: 0; }
.brand-asset-row input[type="file"] {
  flex: 1 1 16rem;
  min-width: 0;
  height: auto;
  padding: 0.4rem 0.5rem;
  font-size: 0.8rem;
}
.brand-preview {
  width: auto;
  height: auto;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 5px);
  background: var(--surface-2);
  padding: 0.25rem;
}
.brand-preview--logo { max-height: 3rem; max-width: 14rem; object-fit: contain; object-position: left center; }
.brand-preview--icon { max-height: 2.5rem; max-width: 2.5rem; object-fit: contain; }
.brand-preview--share { max-height: 5.5rem; max-width: 14rem; object-fit: cover; }
}