/* ==========================================================================
   QRMagic — brand kit styles.

   Kept in a separate file so css/style.css stays byte-identical to the
   owner-managed theme. Everything here is scoped to the .brand-kit panel and
   reuses the design tokens already defined in style.css.
   ========================================================================== */

.brand-kit {
  margin-top: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 0.85rem;
}

/* --- collapsed header ---------------------------------------------------- */
.bk-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  font-family: inherit;
  text-align: left;
  color: var(--text);
  background: rgba(42, 106, 168, 0.055);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  min-height: 44px;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.bk-header:hover { background: rgba(42, 106, 168, 0.1); border-color: var(--border-strong); }
.bk-header:focus-visible { outline: none; box-shadow: var(--ring); border-color: rgba(42, 106, 168, 0.6); }

.bk-header-text { display: grid; min-width: 0; flex: 1 1 auto; }

.bk-title {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.3;
}
.bk-sub {
  font-size: 0.76rem;
  color: var(--text-faint);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bk-badge {
  flex: none;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.16rem 0.45rem;
  border-radius: 999px;
  color: var(--on-accent);
  background: var(--accent-3);
}

.bk-chevron {
  flex: none;
  color: var(--text-faint);
  transition: transform 0.18s ease;
}
.brand-kit.is-open .bk-chevron { transform: rotate(180deg); }

/* --- body ---------------------------------------------------------------- */
.bk-body {
  display: grid;
  gap: 0.85rem;
  padding: 0.9rem 0.15rem 0.15rem;
  animation: bk-in 0.16s ease-out;
}
@keyframes bk-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}

.bk-group {
  padding-bottom: 0.8rem;
  border-bottom: 1px dashed var(--border);
}
.bk-group-last { padding-bottom: 0; border-bottom: 0; }

.bk-legend {
  margin: 0 0 0.5rem;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.bk-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 0.35rem;
}
.bk-label-inline { margin: 0; text-transform: none; letter-spacing: 0; font-size: 0.82rem; }

.bk-output {
  float: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 700;
}

.bk-note {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-faint);
  word-break: break-word;
}
.bk-note.is-warn { color: var(--danger); font-weight: 600; }

.bk-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.bk-row-end { justify-content: space-between; }

/* --- logo ---------------------------------------------------------------- */

.bk-logo-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0.7rem;
  align-items: center;
  margin-bottom: 0.6rem;
}

.bk-logo-slot {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  border: 1px dashed var(--border-strong);
  background:
    linear-gradient(45deg, rgba(0,0,0,0.03) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.03) 75%),
    linear-gradient(45deg, rgba(0,0,0,0.03) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.03) 75%),
    #fff;
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.bk-logo-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.bk-logo-empty { display: grid; place-items: center; color: var(--text-faint); opacity: 0.75; }

.bk-logo-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  min-width: 0;
}
.bk-logo-actions .bk-note { flex: 1 1 100%; }

/* --- buttons ------------------------------------------------------------- */

.bk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--text-dim);
  background: rgba(255, 253, 247, 0.9);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  min-height: 34px;
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.bk-btn:hover { color: #21547f; background: rgba(42, 106, 168, 0.08); border-color: rgba(42, 106, 168, 0.36); }
.bk-btn:focus-visible { outline: none; box-shadow: var(--ring); }

.bk-btn-solid {
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
}
.bk-btn-solid:hover { color: var(--on-accent); background: linear-gradient(135deg, #2f74b4, var(--accent-2)); }

/* --- range / select / checkbox ------------------------------------------- */

.bk-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.bk-range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(to right, rgba(42, 106, 168, 0.16), rgba(42, 106, 168, 0.45));
  border: 1px solid var(--border);
}
.bk-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  background: #fffdf7;
  border: 2px solid var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}
.bk-range::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(to right, rgba(42, 106, 168, 0.16), rgba(42, 106, 168, 0.45));
  border: 1px solid var(--border);
}
.bk-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fffdf7;
  border: 2px solid var(--accent);
}
.bk-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.bk-select {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0 0.5rem;
  font-family: inherit;
  font-size: 1rem;              /* 16px: no iOS zoom on focus */
  color: var(--text);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
}
.bk-select:focus { outline: none; box-shadow: var(--ring); border-color: rgba(42, 106, 168, 0.6); }

.bk-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-dim);
  cursor: pointer;
  min-height: 36px;
}
.bk-check input {
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* --- colour trigger (reuses .color-field from style.css) ----------------- */

.bk-color { flex: 1 1 130px; min-height: 36px; }

/* --- swatches ------------------------------------------------------------ */

.bk-swatches,
.bk-pairs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.bk-swatch {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid rgba(24, 38, 66, 0.18);
  background: var(--sw, #ffffff);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  transition: transform 0.12s ease;
}
.bk-swatch:hover { transform: scale(1.09); }
.bk-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bk-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #fffdf7, 0 0 0 4px var(--accent); }
.bk-swatch.is-low { border-style: dashed; border-color: var(--danger); }

.bk-pair {
  width: 34px;
  height: 22px;
  padding: 0;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid rgba(24, 38, 66, 0.2);
  background: linear-gradient(135deg, var(--p-fg) 0 52%, var(--p-bg) 52% 100%);
  transition: transform 0.12s ease;
}
.bk-pair:hover { transform: scale(1.06); }
.bk-pair:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bk-pair[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }

/* --- tall preview card --------------------------------------------------- */

/* With the brand kit expanded, the preview card grows taller than the viewport.
   A `position: sticky` element taller than the viewport pins its top edge, which
   leaves the lower controls permanently unreachable. Cap the height and let the
   card scroll internally instead. The class is applied by js/brand-kit.js only
   on desktop widths (>= 981px), where the card is still sticky. */
.preview-card.is-tall {
  max-height: calc(100dvh - 108px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.preview-card.is-tall::-webkit-scrollbar { width: 10px; }
.preview-card.is-tall::-webkit-scrollbar-thumb {
  background: rgba(24, 38, 66, 0.22);
  border-radius: 999px;
}
.preview-card.is-tall::-webkit-scrollbar-track { background: transparent; }

/* --- download row (PNG + SVG) -------------------------------------------- */

.download-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  margin-top: 1.1rem;
}
.download-row .btn-download {
  margin-top: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.btn-vector {
  flex: none;
  height: 52px;
  padding: 0 0.9rem;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.82);
  border-color: var(--border-strong);
}
@media (hover: hover) and (pointer: fine) {
  .btn-vector:hover:not(:disabled) {
    color: #21547f;
    background: rgba(42, 106, 168, 0.08);
    border-color: rgba(42, 106, 168, 0.36);
  }
}
.btn-vector:disabled { cursor: not-allowed; opacity: 0.45; }

/* --- footer generator links --------------------------------------------- */

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.1rem;
  margin: 0.55rem 0 0.15rem;
  font-size: 0.82rem;
}
.footer-nav a {
  color: var(--text-faint);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 0.2rem 0;
}
.footer-nav a:hover { color: #21547f; border-bottom-color: rgba(42, 106, 168, 0.4); }

/* --- touch targets ------------------------------------------------------- */

@media (hover: none), (pointer: coarse) {
  .bk-btn { min-height: 42px; }
  .bk-swatch { width: 34px; height: 34px; }
  .bk-pair { width: 40px; height: 26px; }
  .bk-pair:hover, .bk-swatch:hover { transform: none; }
  .bk-select { height: 42px; }
}

@media (max-width: 400px) {
  .bk-logo-row { grid-template-columns: 48px 1fr; }
  .bk-logo-slot { width: 48px; height: 48px; }
}