/* Branding page: form on hairline sections (7 columns) + sticky live preview (5 columns). */

.brand-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; padding-block-end: var(--space-7); }
.brand-form { grid-column: span 7; display: grid; gap: 0; background: var(--fm-surface); border: 1px solid var(--fm-border); }
.brand-preview { grid-column: span 5; position: sticky; inset-block-start: calc(var(--topbar-h) + var(--space-5)); display: grid; gap: var(--space-4); }
@media (max-width: 1023px) {
  .brand-layout { grid-template-columns: minmax(0, 1fr); }
  .brand-form, .brand-preview { grid-column: auto; }
  .brand-preview { position: static; order: -1; }
}

.form-section { display: grid; gap: var(--space-4); padding: var(--space-5); border-block-end: 1px solid var(--fm-border); }
.form-section h2 { font: var(--type-h2); }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); padding: var(--space-5); }
@media (max-width: 639px) { .form-section, .form-actions { padding: var(--space-4); } }

.logo-pickers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 639px) { .logo-pickers { grid-template-columns: 1fr 1fr; } }
.logo-pick { display: grid; gap: var(--space-2); cursor: pointer; }
.logo-pick-art { display: grid; place-items: center; height: 96px; padding: var(--space-4); border: 1px solid var(--fm-border-strong); border-radius: var(--fm-radius); }
.logo-pick-art img { max-height: 56px; width: auto; }
.logo-pick--light .logo-pick-art { background: var(--fm-flash); }
.logo-pick--dark .logo-pick-art { background: var(--fm-veil); }
.logo-pick--icon .logo-pick-art { background: var(--fm-surface-raised); }
.logo-pick-label { font: var(--type-small); }
.logo-pick:has(input:focus-visible) .logo-pick-art { outline: 2px solid var(--fm-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .logo-pick:hover .logo-pick-art { border-color: var(--fm-text); } }

/* Colours: token | light | dark */
.colour-table { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 1.4fr) minmax(0, 1.4fr); gap: var(--space-3) var(--space-4); align-items: center; }
.colour-head { font: var(--type-small); font-weight: 600; color: var(--fm-text-secondary); }
.colour-name { font: var(--type-small); font-weight: 600; }
.colour-cell { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: 'swatch hex' 'swatch ratio'; gap: 0 var(--space-2); align-items: center; }
.colour-swatch { grid-area: swatch; width: 44px; height: 44px; padding: 0; border: 1px solid var(--fm-border-strong); border-radius: var(--fm-radius); background: none; cursor: pointer; }
.colour-swatch::-webkit-color-swatch-wrapper { padding: 3px; }
.colour-swatch::-webkit-color-swatch { border: 0; border-radius: 2px; }
.colour-hex { grid-area: hex; min-height: 24px; height: 24px; padding: 0 var(--space-2); font: var(--type-small); direction: ltr; text-align: start; box-shadow: none; }
.colour-ratio { grid-area: ratio; }
.ratio { display: inline-flex; align-items: center; gap: var(--space-1); font: var(--type-small); }
.ratio .icon { width: 16px; height: 16px; }
.ratio--pass { color: var(--fm-online); }
.ratio--warn { color: var(--fm-warning); }
.ratio--fail { color: var(--fm-offline); }
@media (max-width: 639px) {
  .colour-table { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .colour-cell { grid-template-areas: 'swatch hex' 'ratio ratio'; gap: var(--space-1) var(--space-2); }
  .colour-hex { height: 44px; min-height: 44px; }
  .colour-name { grid-column: 1 / -1; padding-block-start: var(--space-2); }
  .colour-head--token { display: none; }
}

.file-pick { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; }
.file-pick .btn { flex: none; }
.file-pick-name { font: var(--type-small); color: var(--fm-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-pick:has(input:focus-visible) .btn { outline: 2px solid var(--fm-focus); outline-offset: 2px; }
.font-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: var(--space-3); align-items: end; }
@media (max-width: 639px) { .font-row { grid-template-columns: 1fr; } }

.segmented { display: inline-flex; justify-self: start; border: 1px solid var(--fm-border-strong); border-radius: var(--fm-radius); padding: 2px; gap: 2px; }
.segmented button { min-height: 40px; padding: 0 var(--space-4); border: 0; border-radius: 2px; background: transparent; color: var(--fm-text-secondary); font: var(--type-label); cursor: pointer; }
@media (max-width: 639px) { .segmented button { min-height: 44px; } }
.segmented button[aria-pressed='true'] { background: var(--fm-primary); color: var(--fm-on-primary); }

/* The preview re-declares the --fm-* tokens inline, so it uses the real components. */
.pv { border: 1px solid var(--fm-border); background: var(--fm-bg); color: var(--fm-text); overflow: hidden; }
.pv-bar { display: flex; align-items: center; gap: var(--space-4); height: 48px; padding-inline: var(--space-4); background: var(--fm-topbar-bg); color: var(--fm-topbar-fg); border-block-end: 1px solid var(--fm-border); font: var(--type-small); font-weight: 600; }
.pv-logo { height: 20px; width: auto; }
.pv[data-theme='light'] .pv-logo--dark, .pv[data-theme='dark'] .pv-logo--light { display: none; }
.pv-tab { color: var(--fm-text-secondary); }
.pv-tab.is-active { color: var(--fm-topbar-fg); box-shadow: inset 0 -2px 0 var(--fm-primary-text); padding-block: 13px; }
.pv-stage { position: relative; isolation: isolate; display: grid; gap: var(--space-2); padding: var(--space-4); background: var(--fm-stage-bg); color: var(--fm-stage-text); }
.pv-stage::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('/stage-light.webp') right center / 100% 100% no-repeat; mix-blend-mode: screen; }
.pv-faces { display: grid; grid-template-columns: 56px 56px; gap: 2px; }
.pv-face { aspect-ratio: 9 / 16; border: 1px solid var(--fm-stage-line); }
.pv-face--playing { background: var(--fm-gradient-light); }
.pv-face--idle { display: grid; place-items: end center; padding-block-end: 10px; background: var(--fm-gradient-dark); }
.pv-face--idle img { width: 60%; }
.pv-stage-name { font: var(--type-small); font-weight: 600; }
.pv-body { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--fm-surface); }
.pv-meta { font: var(--type-small); color: var(--fm-text-secondary); }
.pv-link { font: var(--type-small); font-weight: 600; }
.pv-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pv-buttons .btn { height: 36px; padding: 0 var(--space-3); font: var(--type-small); font-weight: 600; cursor: default; }
.pv-status { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.pv-toast { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; padding: var(--space-2) var(--space-3); border: 1px solid var(--fm-ink-border); border-radius: var(--fm-radius); background: var(--fm-ink); color: var(--fm-ink-text); font: var(--type-small); }
.pv-toast .icon { width: 16px; height: 16px; }
.pv-summary { font: var(--type-small); color: var(--fm-text-secondary); }
.pv-summary.is-fail { color: var(--fm-offline); }