/* Brand page editors (js/brand-editors.js). Built only from the shared tokens and the Brand page's own (css/brand.css:
 * --blue, --blue-soft, --blue-line, --tile-bg, --tile-line), which css/looks.css re-points for the Volare look, so both
 * looks follow. One spacing rhythm: tiles sit var(--s3) apart and pad var(--s3) var(--s4), like the original tiles. */

/* ---------- page header: "Saved" and Undo ---------- */
.be-head { flex-wrap: wrap; justify-content: flex-end; }
.be-status { font: var(--type-meta); color: var(--muted); min-width: 0; }
.be-status:empty { display: none; }
.be-status.is-saving { color: var(--faint); }
.hero--brand [data-brand-undo][hidden] { display: none; }

/* ---------- one header per tab: title, one line on what it is for, the tab's own action on the right ---------- */
.brand-tabhead { display: flex; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); flex-wrap: wrap; min-width: 0; }
.brand-tabhead-text { display: grid; gap: var(--s1); min-width: 0; flex: 1 1 20rem; }
.brand-tabhead-title { margin: 0; font: var(--type-section); color: var(--ink-strong); }
.brand-tabhead-sub { margin: 0; font: var(--type-body); color: var(--muted); max-width: var(--measure); }
.brand-tabhead-act { flex: none; display: flex; align-items: center; gap: var(--s4); }
/* no references yet: the empty block's own button takes over from the header's */
.brand-panel:has(.be-refs-empty) .brand-tabhead [data-be-head="add-reference"] { display: none; }

/* small buttons inside tiles: same family, a step shorter */
html[data-look] .btn.be-sm, html:not([data-look]) .btn.be-sm { height: 2rem; padding: 0 var(--s3); font-size: var(--fs-meta); border-radius: var(--r-xs); }
html[data-look] .btn.be-sm { border-radius: 10px; }

/* ---------- Look: three cards (Name and logo, Colours and type, Captions), each saving as it goes ---------- */
.be-look { display: grid; gap: var(--gap-card); min-width: 0; }
.brand-panels .be-look > .card.be-card { margin: 0; padding: var(--s5) var(--s6) var(--s6); display: grid; gap: var(--s5); min-width: 0; }
.be-card > .card-head { margin: 0; }
.be-saves { font: var(--type-meta); color: var(--muted); }
.be-sub { display: grid; gap: var(--s3); min-width: 0; }
.be-card > .be-roles + .be-sub { padding-top: var(--s5); border-top: 1px solid var(--line); }
.be-sub-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); flex-wrap: wrap; }
.be-count { font: var(--type-meta); color: var(--muted); }

/* name and logo: the name on the left, one logo preview with a Light / Dark switch on the right */
.be-id-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5) var(--s7); align-items: start; }
.be-name { display: grid; gap: var(--s1); }
.be-logo-field { gap: var(--s2); }
/* the Light / Dark switch and Upload / Remove sit in a row under the preview, never over the logo */
.be-logo-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); }
.be-logo-bg { min-width: 8rem; }
.be-logo-bg .seg-opt { height: 2rem; padding: 0 var(--s3); }
.be-logo {
  position: relative; display: flex; align-items: center; justify-content: center; gap: var(--s2); min-width: 0; height: 8.5rem;
  padding: var(--s4) var(--s5); border-radius: var(--r-sm); background: var(--alabaster); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden;
}
.be-logo--dark { background: var(--ink-900); }
.be-logo-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.be-logo-img--mark { width: 2.75rem; height: auto; flex: none; }
/* the renderer draws the logo as a light silhouette on the picture (autoedit.py render_logo_bug), so the dark preview does too */
.be-logo--dark .be-logo-img { filter: brightness(0) invert(1); opacity: .9; }
.be-logo-word { font: var(--fw-body) var(--fs-section)/1.1 var(--serif); color: var(--ink-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.be-logo--dark .be-logo-word { color: var(--pearl); }
.be-logo-none { font: var(--type-meta); color: var(--muted); text-align: center; }
.be-logo--dark .be-logo-none { color: var(--pearl); opacity: .7; }
/* Upload and Remove: small buttons in the controls row */
.be-logo-acts { display: flex; gap: var(--s1); }
.be-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.be-file { position: relative; overflow: hidden; cursor: pointer; }
.be-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.be-file:focus-within { outline: 2px solid var(--ink-900, currentColor); outline-offset: 2px; }
.be-card .field-note { margin: 0; }

/* palette: the swatches are buttons; the open one is ringed and its editor opens under the row */
.brand-panels .be-swatches { grid-template-columns: repeat(auto-fill, minmax(4.25rem, 5.5rem)); justify-content: start; }
.be-swatch { padding: var(--s1) 0; border-radius: var(--r-sm); background: none; border: 0; cursor: pointer; color: inherit; }
.be-swatch .chipdot { max-width: 3.25rem; transition: box-shadow var(--motion); }
.be-swatch.is-on .chipdot { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--blue-line); }
.be-swatch:focus-visible { outline: 2px solid var(--ink-900, currentColor); outline-offset: 2px; }
/* a pencil on the colour says it can be changed */
.be-swatch .chipdot { position: relative; }
.sw-edit {
  position: absolute; inset: 0; margin: auto; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--card); color: var(--ink-strong); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); opacity: 0; transform: scale(.85);
  transition: opacity var(--motion), transform var(--motion); pointer-events: none;
}
.be-swatch:hover .sw-edit, .be-swatch:focus-visible .sw-edit, .be-swatch.is-on .sw-edit { opacity: 1; transform: none; }
.be-usage { margin: 0; font: var(--type-body); color: var(--ink-strong); }
.be-add-dot {
  display: grid; place-items: center; background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--dashed, var(--line-2)) !important;
  color: var(--muted); font: var(--fw-body) var(--fs-section)/1 var(--font-sans);
}
.be-swatch--add:hover .be-add-dot { box-shadow: inset 0 0 0 1.5px var(--blue-line) !important; color: var(--ink-strong); }

/* The colour editor is a popover over the page, placed under its swatch by js (left / top / --ptr-x), so nothing
   below it moves. The small pointer is a rotated square under the top edge (over the bottom edge when flipped above). */
.be-ced {
  position: fixed; z-index: 60; left: 0; top: 0; width: min(30rem, calc(100vw - 1rem));
  display: grid; gap: var(--s3); padding: var(--s5);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow);
}
.be-ced::before {
  content: ''; position: absolute; top: -6px; left: calc(var(--ptr-x, 50%) - 6px); width: 12px; height: 12px;
  background: inherit; border: inherit; border-right: 0; border-bottom: 0; transform: rotate(45deg); border-radius: 2px 0 0 0;
}
.be-ced.is-above::before { top: auto; bottom: -6px; transform: rotate(225deg); }
/* phones: a sheet along the bottom with the same contents */
.be-ced.is-sheet {
  left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-height: 85vh; overflow-y: auto;
  padding: var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom, 0px)); border-radius: var(--r-sm) var(--r-sm) 0 0;
  border-bottom: 0;
}
.be-ced.is-sheet::before { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .be-ced { animation: be-ced-in var(--motion) var(--ease); }
  .be-ced.is-sheet { animation: be-sheet-in var(--motion) var(--ease); }
}
@keyframes be-ced-in { from { opacity: 0; } }
@keyframes be-sheet-in { from { transform: translateY(100%); } }
html[data-look] .be-ced { border-radius: 12px; }
html[data-look="volare"] .be-ced { background: var(--v-salt); border-color: transparent; box-shadow: var(--v-line), var(--v-shadow); }
html[data-look] .be-ced.is-sheet { border-radius: 12px 12px 0 0; }
html[data-look="volare"] .be-ced::before { box-shadow: -1px -1px 0 var(--v-ink-06); }
.be-ced-fields { display: grid; grid-template-columns: auto minmax(6.5rem, 8rem) minmax(0, 1fr); gap: var(--s3); align-items: end; }
.be-ced-fields .field { display: grid; gap: var(--s1); min-width: 0; }
.be-ced-hex .input { font-variant-numeric: var(--nums-tabular, tabular-nums); text-transform: uppercase; }
.be-ced .input.is-invalid { border-color: var(--st-fail-dot); }
.be-ced-pick { display: block; width: var(--control); height: var(--control); border-radius: 50%; overflow: hidden; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-2); }
.be-ced-pick input { width: 160%; height: 160%; margin: -30%; border: 0; padding: 0; cursor: pointer; background: none; }
.be-ced-pick:focus-within { outline: 2px solid var(--ink-900, currentColor); outline-offset: 2px; }
.be-contrast { margin: 0; font: var(--type-meta); color: var(--muted); max-width: var(--measure); }
.be-contrast:empty { display: none; }
.be-contrast.is-warn { color: var(--dk-tx-st-attn, var(--st-attn)); }
.be-ced-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.be-ced-done { margin-left: auto; }

/* each swatch says what Volare uses it for, as one more quiet line under its code: no pill, no outline.
   The creator's own choice reads in strong ink, so it stands out without a second accent. */
.be-swatch .sw-role {
  max-width: 100%; margin-top: var(--s1); padding-top: var(--s1); border-top: 1px solid var(--line); overflow-wrap: anywhere; text-align: center;
  font: var(--type-meta); color: var(--muted);
}
.be-fontmeta { align-self: start; padding: 0 var(--s2); border-radius: 999px; background: var(--soft); }
.be-swatch .sw-role.is-empty { visibility: hidden; }
.be-swatch .sw-also { max-width: 100%; text-align: center; font: var(--type-meta); color: var(--muted); overflow-wrap: anywhere; }   /* the other names this same colour goes by */
.be-swatch .sw-role.is-pinned { color: var(--ink-strong); font-weight: var(--fw-strong); }

/* "Use as" in the colour editor */
.be-useas { display: grid; gap: var(--s1); }
.be-useas-seg { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(5.75rem, 1fr)); max-width: none; }
.be-useas-seg .seg-opt { height: 2rem; padding: 0 var(--s2); }
.be-useas-said { margin: 0; font: var(--type-meta); color: var(--muted); }
.be-remove-why { margin: 0; font: var(--type-meta); color: var(--dk-tx-st-attn, var(--st-attn)); }
.be-remove-why.is-said { font-weight: var(--fw-strong); }
.be-ced [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* under the palette: one 16:9 frame in the roles in use, with the key beside it */
.be-roles { display: grid; gap: var(--s3); padding-top: var(--s5); border-top: 1px solid var(--line); }
.be-pairs-title { margin: 0; font: var(--type-body-strong); color: var(--ink-strong); }
.be-roles-body { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--s3) var(--s6); align-items: center; }
.be-roles-body > .be-contrast { grid-column: 1 / -1; }
/* the frame is a picture of a video frame in the creator's colours and fonts, so its sizes are the frame's own */
.be-rp {
  position: relative; display: block; width: 100%; max-width: 420px; aspect-ratio: 16 / 9; border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; container-type: inline-size;
}
.be-rp-title { position: absolute; left: 6cqi; top: 6cqi; right: 24cqi; font-size: max(12px, 6.4cqi); font-weight: var(--fw-strong); line-height: 1.1; }
.be-rp-chip { position: absolute; top: 6cqi; right: 6cqi; padding: .6cqi 2.6cqi; border-radius: 999px; font: var(--fw-strong) max(12px, 3.4cqi)/1.5 var(--font-sans); }
.be-rp-chart { position: absolute; right: 6cqi; bottom: 6cqi; width: 28cqi; height: 24cqi; display: flex; align-items: flex-end; gap: 2.4cqi; }
.be-rp-chart span { flex: 1; border-radius: .8cqi .8cqi 0 0; }
.be-rp-cap { position: absolute; left: 6cqi; bottom: 6cqi; max-width: 56cqi; overflow: hidden; text-overflow: ellipsis; padding: 1.8cqi 3cqi; border-radius: 1.8cqi; font-size: max(12px, 3.8cqi); font-weight: var(--fw-strong); line-height: 1.2; white-space: nowrap; }
.be-rp-cap-w { padding: 0 .8cqi; border-radius: .6cqi; }
.be-rp-key { margin: 0; max-width: 26rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
.be-rp-key div { min-width: 0; }
.be-rp-key dt { font: var(--type-meta); color: var(--muted); }
.be-rp-key dd { margin: 0; font: var(--type-body-strong); color: var(--ink-strong); overflow-wrap: anywhere; }   /* a long list (Charts) wraps, never ellipsis */
.be-rp-key small { font: var(--type-meta); color: var(--muted); }
@media (max-width: 860px) { .be-roles-body { grid-template-columns: minmax(0, 1fr); } }

/* fonts: one picker per role, a line in the chosen font under it */
.be-fontpicks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s7); }
.be-fontpick { gap: var(--s2); align-content: start; }
.be-fontsel > svg { position: absolute; right: .75rem; top: 50%; margin-top: -8px; pointer-events: none; color: var(--muted); }
.be-fontprev { font-size: var(--fs-section); line-height: 1.25; color: var(--ink-strong); overflow-wrap: anywhere; }

/* captions: three small live frames in the creator's own colours and fonts, then where they sit */
.be-place-row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.be-touches { display: grid; gap: var(--s3); }
.be-touch { align-items: flex-start; gap: var(--s3); color: var(--ink); font: var(--type-body); }
.be-touch input { flex: none; margin-top: 0.15rem; }
.be-touch-text { display: grid; gap: 2px; }
.be-touch-text small { color: var(--muted); font: var(--type-meta); }
.be-place { min-width: 14rem; }
.be-place .seg-opt { height: 2rem; padding: 0 var(--s3); }
.be-place.is-off { opacity: .5; }
.be-place.is-off .seg-opt { cursor: not-allowed; }
.be-caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); max-width: 54rem; }
.be-cap {
  display: flex; flex-direction: column; gap: var(--s2); min-width: 0; padding: var(--s2); text-align: left;
  background: var(--tile); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; color: inherit;
}
.be-cap:hover { border-color: var(--line-2); }
.be-cap.is-on { background: var(--blue-soft); border-color: var(--blue-line); }
.be-cap-text { display: flex; flex-direction: column; gap: 0; padding: 0 var(--s1) var(--s1); }
.be-cap-text strong { font: var(--type-body-strong); color: var(--ink-strong); }
.be-cap-text small { font: var(--type-meta); color: var(--muted); }
.be-cap-frame {
  position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-xs); overflow: hidden; container-type: inline-size;
  background: linear-gradient(160deg, var(--cap-ground) 0%, color-mix(in srgb, var(--cap-ground) 70%, var(--cap-plate)) 100%);
}
/* a soft silhouette stands in for the speaker */
.be-cap-person {
  position: absolute; right: 14%; bottom: 0; width: 30%; height: 78%; border-radius: 45% 45% 0 0 / 30% 30% 0 0;
  background: color-mix(in srgb, var(--cap-plate) 28%, transparent);
}
.be-cap-person::before { content: ''; position: absolute; left: 50%; top: -24%; width: 46%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); background: inherit; }
.be-cap-plate {
  position: absolute; left: 8%; right: 8%; bottom: 9%; padding: 4cqi 5cqi; border-radius: 3cqi;
  background: color-mix(in srgb, var(--cap-plate) 88%, transparent); color: var(--cap-ink);
  font: 500 max(12px, 6.4cqi)/1.15 var(--cap-font); text-align: center; white-space: nowrap;
}
.be-cap-frame--side .be-cap-plate { right: auto; bottom: auto; top: 16%; width: 44%; white-space: normal; text-align: left; }
.be-cap-frame--side .be-cap-person { right: 10%; }
.be-cap-w { position: relative; display: inline-block; z-index: 0; margin-inline: .06em; }
.be-cap-w.is-accent { font-family: 'Newsreader', Georgia, serif; font-style: italic; margin-inline: .2em; }   /* the italic and the scaled-up word need room either side */
/* sweep: a bar wipes in behind the key word */
.be-cap-frame--sweep .be-cap-w.is-accent::before,
.be-cap-frame--tracked .be-cap-w::before {
  content: ''; position: absolute; z-index: -1; left: -0.12em; right: -0.12em; top: 12%; bottom: 4%; border-radius: 0.12em;
  background: var(--cap-hl); transform-origin: left center; transform: scaleX(1);
}
.be-cap-frame--sweep .be-cap-w.is-accent { color: var(--cap-hl-ink); }
/* rule: a line draws outward from the centre under the phrase */
.be-cap-frame--rule .be-cap-plate::after {
  content: ''; position: absolute; left: 22%; right: 22%; bottom: 1.6cqi; height: 0.9cqi; border-radius: 1cqi;
  background: var(--cap-accent); transform-origin: center; transform: scaleX(1);
}
/* tracked: the highlight rides under each word in turn and settles on the key word */
.be-cap-frame--tracked .be-cap-w::before { opacity: 0; }
.be-cap-frame--tracked .be-cap-w.is-accent::before { opacity: 1; }
.be-cap-frame--tracked .be-cap-w.is-accent { color: var(--cap-hl-ink); }
@media (prefers-reduced-motion: no-preference) {
  .be-cap:hover .be-cap-frame--sweep .be-cap-w.is-accent::before,
  .be-cap.is-on .be-cap-frame--sweep .be-cap-w.is-accent::before { animation: be-sweep 2.4s var(--ease, ease) infinite; }
  .be-cap:hover .be-cap-frame--rule .be-cap-plate::after,
  .be-cap.is-on .be-cap-frame--rule .be-cap-plate::after { animation: be-sweep 2.4s var(--ease, ease) infinite; }
  .be-cap:hover .be-cap-frame--tracked .be-cap-w::before,
  .be-cap.is-on .be-cap-frame--tracked .be-cap-w::before { animation: be-track 2.4s linear infinite; animation-delay: calc(var(--n) * 0.4s); }
}
/* pop: the key word pops in; karaoke: the whole line shows dimmed and the word being said lights */
.be-cap-frame--pop .be-cap-w.is-accent { transform: scale(1.08); }
.be-cap-frame--karaoke .be-cap-w { opacity: 0.5; }
.be-cap-frame--karaoke .be-cap-w.is-accent { opacity: 1; color: var(--cap-ink); transform: scale(1.05); }
@media (prefers-reduced-motion: no-preference) {
  .be-cap:hover .be-cap-frame--pop .be-cap-w,
  .be-cap.is-on .be-cap-frame--pop .be-cap-w { animation: be-pop 2.4s ease infinite; animation-delay: calc(var(--n) * 0.3s); }
  .be-cap:hover .be-cap-frame--karaoke .be-cap-w,
  .be-cap.is-on .be-cap-frame--karaoke .be-cap-w { animation: be-lit 2.4s linear infinite; animation-delay: calc(var(--n) * 0.4s); }
}
@keyframes be-pop { 0% { transform: scale(0.8); opacity: 0; } 12% { transform: scale(1.1); opacity: 1; } 20%, 90% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }
@keyframes be-lit { 0%, 100% { opacity: 0.5; color: var(--cap-ink); transform: none; } 4%, 18% { opacity: 1; color: var(--cap-ink); transform: scale(1.05); } 22% { opacity: 0.5; color: var(--cap-ink); transform: none; } }
@keyframes be-sweep { 0% { transform: scaleX(0); } 35%, 85% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes be-track { 0% { opacity: 0; } 4%, 18% { opacity: 1; } 22%, 100% { opacity: 0; } }

/* ---------- References: one card per link, every part editable where it sits ---------- */
.brand-panels .be-refs { grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); align-items: stretch; }
.brand-panels .be-refs > .ref:last-child { display: flex; }
.be-refs .ref-add { min-height: 9.5rem; cursor: pointer; }
.be-refs .ref-add[disabled] { opacity: .5; cursor: not-allowed; }
/* no references yet: the shared empty block takes the row, and the head's own "Add reference" steps aside for its button */
.be-refs > .be-refs-empty { grid-column: 1 / -1; }
.hero--brand:has(~ .brand-panels .be-refs-empty) [data-be-head="add-reference"] { display: none; }
.be-ref-add-text { display: flex; flex-direction: column; align-items: inherit; }
.be-refs .add-dot { font: var(--fw-body) var(--fs-section)/1 var(--font-sans); }
/* each saved link is a group on the card's surface, a hairline over it, not a box inside the box */
.be-ref { position: relative; padding: var(--s3) 0 var(--s2); gap: var(--s2); min-height: 9.5rem; border-top: 1px solid var(--line-2); }
html[data-look] .be-refs .ref { background: none; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; box-shadow: none; }
html[data-look] .be-refs .be-ref.is-draft { border-top-color: var(--blue-line); }
/* the title wraps to as many lines as it needs instead of being cut off */
.be-ref textarea.be-ref-title { display: block; resize: none; overflow: hidden; field-sizing: content; min-height: 0; border: 1px solid transparent; background: transparent; }
.be-ref textarea.be-ref-title:hover { border-color: var(--line); }
.be-ref textarea.be-ref-title:focus { outline: none; border-color: var(--blue-line); background: var(--card); }
/* tags sit under the link on every card; what was measured sits at the foot */
.be-ref .be-tags { margin-top: 0; }
.be-ref .ref-measure { margin-top: auto; }
.be-ref input { font: inherit; color: inherit; background: transparent; border: 1px solid transparent; border-radius: var(--r-xs); min-width: 0; width: 100%; }
.be-ref input:hover { border-color: var(--line); }
.be-ref input:focus { outline: none; border-color: var(--blue-line); background: var(--card); }
.be-ref-title { padding: var(--s1) var(--s2); margin-left: calc(-1 * var(--s2)); margin-right: 1.75rem; font: var(--type-body-strong) !important; color: var(--ink-strong) !important; width: calc(100% - 1.75rem) !important; }
.be-ref-link { display: flex; align-items: center; gap: var(--s1); }
.be-ref-url { padding: var(--s1) var(--s2); margin-left: calc(-1 * var(--s2)); font: var(--type-meta) !important; color: var(--muted) !important; text-overflow: ellipsis; }
.be-ref-open { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--r-xs); color: var(--muted); text-decoration: none; }
.be-ref-open:hover { background: var(--hover-tile); color: var(--ink-strong); }
.be-tags { align-items: center; margin-top: auto; }
.be-tags .tagpill { gap: 2px; padding-right: 2px; }
.be-tag-x { display: grid; place-items: center; width: 1.125rem; height: 1.125rem; border: 0; border-radius: var(--r-xs); background: none; color: inherit; opacity: .6; cursor: pointer; font: var(--type-body); line-height: 1; }
.be-tag-x:hover { opacity: 1; background: var(--hover-tile); }
.be-tag-in { flex: 1 1 6rem; width: auto !important; height: 1.375rem; padding: 0 var(--s2); font: var(--type-meta) !important; }
.be-ref-x {
  position: absolute; top: var(--s2); right: calc(-1 * var(--s1)); display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  border: 0; border-radius: var(--r-xs); background: none; color: var(--muted); cursor: pointer; font: var(--fw-body) var(--fs-section)/1 var(--font-sans);
}
.be-ref-x:hover { background: var(--hover-tile); color: var(--ink-strong); }

/* ---------- What Volare has learned ---------- */
.mem-count:empty { display: none; }
.be-learned-empty { grid-column: 1 / -1; margin: 0; font: var(--type-body); color: var(--muted); max-width: var(--measure); }
.be-learned-empty .link { margin-left: var(--s1); }
.brand-panels .be-lessons { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--s5) var(--s6); align-items: start; }
.be-lesson { display: flex; align-items: flex-start; gap: var(--s3); min-width: 0; }
.be-lesson .learned-icon { font: var(--type-body-strong); line-height: 1; }
.be-lesson.is-off .learned-icon { opacity: .55; }
.be-lesson-main { flex: 1; min-width: 0; display: grid; gap: var(--s1); }
.be-lesson-text { margin: 0; font: var(--type-body); color: var(--ink); overflow-wrap: anywhere; }
.be-lesson.is-off .be-lesson-text { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-2); }
.be-lesson-meta { margin: 0; font: var(--type-meta); color: var(--muted); }
.be-lesson-meta:empty { display: none; }
.be-lesson-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s4); }
.be-link {
  padding: var(--s1) 0; border: 0; background: none; cursor: pointer; color: var(--ink-strong);
  font: var(--type-meta); font-weight: var(--fw-strong); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px;
}
.be-link:hover { text-decoration-color: currentColor; }
.be-link[disabled] { color: var(--faint); cursor: default; text-decoration: none; }
.be-switch { display: inline-flex; align-items: center; gap: var(--s2); font: var(--type-meta); color: var(--muted); cursor: pointer; }
.be-switch input {
  appearance: none; -webkit-appearance: none; position: relative; width: 1.75rem; height: 1rem; margin: 0; border-radius: 1rem;
  background: var(--line-2); cursor: pointer; transition: background var(--motion);
}
.be-switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--card); transition: transform var(--motion); box-shadow: 0 0 0 1px var(--line-2); }
.be-switch input:checked { background: var(--blue-line); }
.be-switch input:checked::after { transform: translateX(0.75rem); }
.be-switch input:focus-visible { outline: 2px solid var(--ink-900, currentColor); outline-offset: 2px; }
.be-lesson-input { height: auto; min-height: 3.5rem; field-sizing: content; resize: vertical; }
.be-lesson-more { display: grid; gap: var(--s1); padding: var(--s2) 0 0; }
/* an example is a quoted line with a link, indented under its lesson: no box */
.be-example { display: grid; gap: 0; padding: var(--s1) 0 var(--s1) var(--s3); border-left: 2px solid var(--line-2); text-decoration: none; color: inherit; }
.be-example:hover .be-example-text { color: var(--ink-strong); }
.be-example-text { font: var(--type-body); color: var(--ink); }
.be-example small, .be-history small { font: var(--type-meta); color: var(--muted); }
.be-history { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.be-history li { display: grid; gap: 0.125rem; padding-left: var(--s3); border-left: 2px solid var(--line-2); font: var(--type-body); color: var(--ink); }

/* ---------- one rhythm across the five tabs ---------- */
.brand-panels .brand-panel { gap: var(--s4); }
.brand-panels .card.editing,
.brand-panels .card.references,
.brand-panels .card.memory,
.brand-panels .card.channel,
.brand-panels .card.creator { padding: var(--s5) var(--s6) var(--s6); margin: 0; }
.brand-panels .card .card-head { min-height: 1.75rem; }

/* ---------- Both looks: shape; then each look's colours ---------- */
html[data-look] .be-logo { border-radius: 12px; }
html[data-look="volare"] .be-logo { background: var(--v-alabaster); box-shadow: var(--v-line); }
html[data-look="volare"] .be-logo--dark { background: var(--v-charcoal); }
html[data-look="volare"] .be-logo-word { color: var(--v-charcoal); }
html[data-look="volare"] .be-logo--dark .be-logo-word { color: var(--v-salt); }
html[data-look] .be-cap { border: 0; border-radius: 12px; }
html[data-look="volare"] .be-cap { box-shadow: var(--v-line); background: var(--v-salt); }
html[data-look="classic"] .be-cap { box-shadow: inset 0 0 0 1px var(--line); }
html[data-look="classic"] .be-cap:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
html[data-look="volare"] .be-cap.is-on { background: var(--v-peri-12); box-shadow: inset 0 0 0 1px var(--v-periwinkle); }
html[data-look="classic"] .be-cap.is-on { box-shadow: inset 0 0 0 1px var(--blue-line); }
html[data-look="volare"] .be-swatch.is-on .chipdot { box-shadow: 0 0 0 3px var(--v-salt), 0 0 0 5px var(--v-periwinkle); }
html[data-look="volare"] .be-switch input:checked { background: var(--v-periwinkle); }

/* ---------- smaller screens ---------- */
@media (max-width: 900px) {
  .be-id-body, .be-fontpicks { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  /* Saved / Undo float in the header's corner (css/brand.css), so the tabs below never jump */
  .hero--brand .be-head { justify-content: flex-end; min-height: 0; }
  .brand-panels .be-look > .card.be-card,
  .brand-panels .card.editing,
  .brand-panels .card.references,
  .brand-panels .card.memory,
  .brand-panels .card.channel,
  .brand-panels .card.creator,
  .brand-panels .card.brand-empty { padding: var(--s3) var(--s4) var(--s4); }
  .be-ced-fields { grid-template-columns: auto minmax(0, 1fr); }
  .be-ced-name { grid-column: 1 / -1; }
  .be-ced-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .be-ced-done { margin-left: 0; grid-column: 1 / -1; }
  .be-caps { grid-template-columns: minmax(0, 1fr); }
  /* the sample stays above its label, as at desktop width, so the caption is never cut off at the frame's edge */
  .be-cap { flex-direction: column; align-items: stretch; }
  .brand-panels .be-refs { grid-template-columns: minmax(0, 1fr); }
  .be-refs .ref-add { min-height: 5rem; }
}

/* Q2 polish. Palette: 12 swatches fit one row with Add at the end; the name area and role line have a fixed height so every hex sits on one line. */
.brand-panels .be-swatches, .be-swatches { grid-template-columns: repeat(auto-fill, 4.5rem); gap: var(--s4) var(--s2); }
.be-swatch .sw-name { min-height: 2.5em; display: flex; align-items: flex-start; justify-content: center; line-height: 1.25; }
.be-swatch .sw-role { min-height: 1.75em; }
.be-fontmeta { justify-self: start; width: fit-content; max-width: 100%; }
/* A switch that is off is still visible: its track reaches 3:1. */
.be-switch input { background: var(--muted); }
.be-switch input:checked { background: var(--blue-line); }
html[data-look="volare"] .be-switch input:checked { background: var(--v-periwinkle); }