/* ASA OS company branding (request 241B). Loaded after shop.css. The brand's colours and font arrive as custom properties
 * set by shop-branding.js on <html> (and on the settings preview); this file only places the logo, styles the dark sidebar
 * option and lays out the Brand settings screen. Uses the shop.css tokens throughout. */

/* ---------- brand mark: accent when branded, logo image when there is one ---------- */
:root[data-brand-side] .shop-brand-mark, .brand-bar-mark, .bp-mark { background: var(--accent); color: var(--accent-ink); }
.shop-brand-mark.has-logo, .brand-bar-mark.has-logo, .bp-mark.has-logo { background: transparent; overflow: hidden; }
.shop-brand-mark img, .brand-bar-mark img, .bp-mark img, .brand-logo-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- dark sidebar option ---------- */
:root[data-brand-side="dark"] .shop-side, .bp-side[data-side="dark"] {
  --side-ink: #f5f5f7; --side-ink-2: rgba(245, 245, 247, 0.62); --side-ink-3: rgba(245, 245, 247, 0.42); --side-fill: rgba(255, 255, 255, 0.08);
  background: #1d1d1f; color: var(--side-ink); border-right-color: transparent; }
:root[data-brand-side="dark"] .shop-side .shop-brand-name, :root[data-brand-side="dark"] .shop-side .shop-nav-item,
:root[data-brand-side="dark"] .shop-side .shop-me-name { color: var(--side-ink); }
:root[data-brand-side="dark"] .shop-side .shop-brand-store, :root[data-brand-side="dark"] .shop-side .shop-me-role,
:root[data-brand-side="dark"] .shop-side .shop-nav-item .shop-count { color: var(--side-ink-2); }
:root[data-brand-side="dark"] .shop-side .shop-nav-label { color: var(--side-ink-3); }
:root[data-brand-side="dark"] .shop-side .shop-nav-item:hover { background: var(--side-fill); }
:root[data-brand-side="dark"] .shop-side .shop-nav-item[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
:root[data-brand-side="dark"] .shop-side .shop-side-foot { border-top-color: rgba(255, 255, 255, 0.1); }
:root[data-brand-side="dark"] .shop-side .shop-avatar { background: var(--side-fill); color: var(--side-ink-2); }
:root[data-brand-side="dark"] .shop-side .shop-side-foot button { color: var(--side-ink); }


/* ---------- phone: a slim brand row above the page (the sidebar is hidden there) ---------- */
.brand-bar { display: none; }
@media (max-width: 860px) {
  body.shop-on .brand-bar { display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 16px 0; }
  body.shop-on .brand-bar + .main, body.shop-on.focus-app .brand-bar + .main { padding-top: 10px; }
  .brand-bar-mark { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font: 700 12px/1 var(--font-display); flex: none; }
  .brand-bar-name { font: 600 14px/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
body:not(.shop-on) .brand-bar { display: none; }

/* ---------- Brand settings ---------- */
.brand-layout { display: grid; grid-template-columns: minmax(300px, 440px) minmax(0, 1fr); gap: 28px; align-items: start; }
.brand-form { display: flex; flex-direction: column; gap: 22px; padding: 22px 24px; margin: 0; }
.brand-field { display: flex; flex-direction: column; gap: 8px; }
.brand-field > label { color: var(--ink); font-size: 13px; font-weight: 600; }
.brand-field input[type="text"] { width: 100%; box-sizing: border-box; }
.brand-hint { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.brand-hint.is-bad { color: var(--red); }
.brand-field .notice { margin: 0; font-size: 13px; display: flex; gap: 10px; align-items: flex-start; }

.brand-logo-row { display: flex; gap: 14px; align-items: center; }
.brand-logo-thumb { width: 64px; height: 64px; border-radius: 14px; background: var(--fill); display: grid; place-items: center; flex: none; overflow: hidden;
  font-size: 11px; color: var(--ink-3); text-align: center; }
.brand-logo-ctl { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.brand-file { font-size: 13px; border: 0; padding: 0; min-height: 0; background: transparent; max-width: 100%; }
.brand-file::file-selector-button { font: 500 13px/1 var(--font); border: 0; border-radius: 999px; padding: 8px 14px; margin-right: 10px; background: var(--fill); color: var(--ink); cursor: pointer; }
.brand-file::file-selector-button:hover { background: var(--fill-hover); }
.brand-logo-ctl button.quiet { min-height: 26px; padding: 0 2px; font-size: 13px; color: var(--red); }
.brand-logo-ctl button.quiet:hover { background: transparent; text-decoration: underline; }

.brand-accent-row { display: flex; gap: 10px; align-items: center; }
.brand-accent-row input[type="color"] { width: 44px; height: 36px; padding: 3px; border-radius: var(--r-s); cursor: pointer; flex: none; }
.brand-hex { width: 110px; font-family: ui-monospace, "SF Mono", Menlo, monospace; text-transform: lowercase; }
.brand-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.shop-on .brand-swatch { width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 50%; background: var(--sw, var(--fill));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.shop-on .brand-swatch:hover { background: var(--sw, var(--fill)); transform: scale(1.06); }
.shop-on .brand-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--sw, var(--accent)); }
.brand-chip { width: 14px; height: 14px; border-radius: 50%; background: var(--sw, var(--accent)); flex: none; display: inline-block; vertical-align: -2px; margin-right: 6px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.brand-field .notice .brand-chip { margin: 2px 0 0; }

.brand-fonts { display: grid; gap: 2px; border-radius: var(--r-m); box-shadow: 0 0 0 0.5px var(--hair); overflow: hidden; }
.brand-font { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "dot name" "dot note"; column-gap: 12px; align-items: center;
  padding: 10px 14px; background: var(--surface); cursor: pointer; color: var(--ink); font-weight: 400; }
.brand-font + .brand-font { border-top: 1px solid var(--hair); }
.brand-font:hover { background: var(--surface-2); }
.brand-font input { grid-area: dot; margin: 0; }
.brand-font-name { grid-area: name; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.brand-font-note { grid-area: note; font-size: 12px; color: var(--ink-2); }

/* the selected segment must read as raised in dark mode too (iOS dark segmented control) */

.brand-actions { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--hair); padding-top: 18px; }
.brand-actions button { min-width: 88px; }
.brand-facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 0; }
.brand-facts dd { margin: 0; }

/* live preview: a small, faithful copy of the shell using the draft's tokens */
.brand-preview-wrap { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 10px; }
.brand-preview-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
.brand-preview { display: grid; grid-template-columns: 170px minmax(0, 1fr); min-height: 300px; border-radius: var(--r-l); overflow: hidden;
  background: var(--canvas); box-shadow: 0 0 0 0.5px var(--hair-strong), 0 8px 30px rgba(0, 0, 0, 0.06); color: var(--ink); }
.bp-side { background: var(--side); border-right: 1px solid var(--hair); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; color: var(--ink); }
.bp-brand { display: flex; align-items: center; gap: 8px; padding: 2px 6px 14px; min-width: 0; }
.bp-mark { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font: 700 12px/1 var(--font-display); flex: none; }
.bp-name { font: 600 13px/1.2 var(--font-display); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bp-item { font-size: 13px; padding: 6px 8px; border-radius: 7px; }
.bp-item.is-current { background: var(--accent); color: var(--accent-ink); font-weight: 500; }
.bp-side[data-side="dark"] .bp-name, .bp-side[data-side="dark"] .bp-item { color: var(--side-ink); }
.bp-side[data-side="dark"] .bp-item.is-current { color: var(--accent-ink); }
.bp-main { padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bp-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.bp-title { font: 700 22px/1.1 var(--font-display); letter-spacing: -0.02em; }
.bp-actions { display: flex; gap: 6px; }
.bp-actions .btn { min-height: 30px; font-size: 13px; padding: 0 12px; cursor: default; }
.bp-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto auto; gap: 10px; align-items: center; background: var(--surface);
  border-radius: var(--r-m); padding: 10px 12px; box-shadow: 0 0 0 0.5px var(--hair); font-size: 13px; }
.bp-who { display: flex; flex-direction: column; min-width: 0; }
.bp-who strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-who span, .bp-svc { color: var(--ink-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-amt { font-weight: 500; text-align: right; }
.bp-link { margin: 2px 0 0; font-size: 13px; }
.bp-a { color: var(--accent); font-weight: 500; }

@media (max-width: 1100px) {
  .brand-layout { grid-template-columns: minmax(0, 1fr); }
  .brand-preview-wrap { position: static; order: -1; }
}
@media (max-width: 560px) {
  .brand-preview { grid-template-columns: minmax(0, 1fr); }
  .bp-side { flex-direction: row; align-items: center; gap: 4px; padding: 10px; border-right: 0; border-bottom: 1px solid var(--hair); overflow: hidden; }
  .bp-brand { padding: 0 8px 0 2px; }
  .bp-item:not(.is-current) { display: none; }
  .bp-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .bp-actions .btn:not(.primary) { display: none; }
  .bp-svc { display: none; }
  .brand-form { padding: 18px 16px; }
}