/* ==========================================================================
   PostStyleBuilder — styles for the universal mobile Post Styles overlay.
   Warm-paper theme from the Post Styles mobile handoff. Self-contained under
   the .psb-* namespace and always dark/light-theme-independent (hardcoded
   paper hexes), because it's a full-screen overlay invoked only on phones.
   ========================================================================== */

html.psb-locked { overflow: hidden; }

.psb-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: #F5F2EC; color: #1A1A18;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  transform: translateX(100%);
  transition: transform 340ms cubic-bezier(.32, .72, 0, 1);
  will-change: transform;
  overscroll-behavior: none;
}
.psb-overlay.psb-open { transform: translateX(0); }

.psb-screen { display: flex; flex-direction: column; height: 100%; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.psb-head {
  flex-shrink: 0; display: flex; align-items: center; gap: 11px;
  padding: calc(6px + env(safe-area-inset-top)) 14px 12px;
  border-bottom: 1px solid #E6E0D4; background: #F5F2EC;
}
.psb-back {
  width: 34px; height: 34px; border-radius: 50%; background: #FFFFFF; border: 1px solid #DDD8CE;
  color: #6B6B64; font-size: 21px; line-height: 1; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; cursor: pointer;
  transition: transform 130ms ease; -webkit-tap-highlight-color: transparent;
}
.psb-back:active { transform: scale(.9); }
.psb-head-titles { flex: 1; min-width: 0; }
.psb-title { font: 800 19px system-ui; letter-spacing: -.4px; }
.psb-subtitle { font: 500 11px system-ui; color: #888; margin-top: 1px; }

/* ── Body ────────────────────────────────────────────────────────────────── */
.psb-body {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 16px;
}
.psb-field { display: flex; flex-direction: column; }
.psb-label { font: 700 9.5px system-ui; letter-spacing: .06em; color: #9a937f; text-transform: uppercase; }
.psb-label-row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.psb-field > .psb-label { margin-bottom: 7px; }
.psb-req { font: 700 8.5px system-ui; color: #fff; background: #A8843A; border-radius: 5px; padding: 2px 7px; }
.psb-hint { font: 500 10px system-ui; color: #AAAAAA; }

.psb-input {
  width: 100%; box-sizing: border-box;
  background: #FFFFFF; border: 1px solid #E4DDCF; border-radius: 11px;
  padding: 12px 13px; font: 500 13px system-ui; color: #1A1A18;
}
.psb-input::placeholder { color: #AAAAAA; }
.psb-input:focus { outline: none; border-color: #A8843A; }

/* ── Tone cards (2-col, single-select, gold-bordered when selected) ───────── */
.psb-tone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.psb-tone {
  text-align: left; background: #FFFFFF; border: 1px solid #E6E0D4; border-radius: 12px;
  padding: 11px 12px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 130ms ease;
}
.psb-tone:active { transform: scale(.98); }
.psb-tone.is-sel { background: #FBF6EC; border: 2px solid #A8843A; padding: 10px 11px; }
.psb-tone-top { display: flex; align-items: center; gap: 6px; }
.psb-tone-emoji { font-size: 13px; }
.psb-tone-name { font: 700 12.5px system-ui; color: #1A1A18; }
.psb-tone.is-sel .psb-tone-name { color: #A8843A; }
.psb-tone-sample { display: block; font: italic 400 10px system-ui; color: #888; line-height: 1.45; margin-top: 6px; }

/* ── Toggle cards (Vehicle Intelligence + dealer-info toggles) ────────────── */
.psb-toggle-card {
  display: flex; align-items: flex-start; gap: 11px;
  background: #FFFFFF; border: 1px solid #E6E0D4; border-radius: 13px; padding: 13px 14px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.psb-toggle-main { flex: 1; min-width: 0; }
.psb-toggle-title { font: 700 13px system-ui; }
.psb-toggle-desc { font: 500 10.5px system-ui; color: #888; line-height: 1.5; margin-top: 5px; }
.psb-switch {
  width: 42px; height: 24px; border-radius: 13px; background: #DDD6C8; position: relative;
  flex-shrink: 0; margin-top: 2px; transition: background 180ms ease;
}
.psb-switch.is-on { background: #2A7A4F; }
.psb-knob {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform 180ms ease;
}
.psb-switch.is-on .psb-knob { transform: translateX(18px); }

/* ── Chips (emojis / focus / cta / financing / format) ────────────────────── */
.psb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.psb-chips--seg { flex-wrap: nowrap; }
.psb-chip {
  font: 600 12px system-ui; color: #6B6B64; background: #F3EEE6; border: 1px solid #E4DDCF;
  border-radius: 16px; padding: 9px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 130ms ease;
}
.psb-chip:active { transform: scale(.95); }
.psb-chip.is-sel { color: #fff; background: #A8843A; border-color: #A8843A; font-weight: 700; }
.psb-chip--seg { flex: 1; text-align: center; padding: 9px 0; }

/* ── Preview card ─────────────────────────────────────────────────────────── */
.psb-preview { background: #FFFFFF; border: 1px solid #E6E0D4; border-radius: 13px; padding: 14px; }
.psb-preview-head { font: 700 11px system-ui; margin-bottom: 9px; }
.psb-preview-body { font: italic 400 12px system-ui; color: #6B6B64; line-height: 1.55; white-space: pre-wrap; }

.psb-err { font: 600 12px system-ui; color: #C0392B; background: rgba(192,57,43,.08);
  border: 1px solid rgba(192,57,43,.25); border-radius: 10px; padding: 10px 12px; }

/* ── Footer bar ───────────────────────────────────────────────────────────── */
.psb-foot {
  flex-shrink: 0; display: flex; gap: 10px;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid #E6E0D4; background: #FAF8F3;
}
.psb-btn {
  border-radius: 11px; font: 700 13.5px system-ui; padding: 13px; cursor: pointer; border: none;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: transform 130ms ease; -webkit-tap-highlight-color: transparent;
}
.psb-btn:active { transform: scale(.97); }
.psb-btn-ghost { flex: 0 0 auto; background: #FFFFFF; border: 1px solid #DDD8CE; color: #6B6B64; font-weight: 600; padding: 13px 20px; }
.psb-btn-primary { flex: 1; background: #A8843A; color: #fff; }
.psb-btn-block { width: 100%; flex: 1; }
.psb-foot--single { display: block; }

/* ── Presets list ─────────────────────────────────────────────────────────── */
.psb-list-count { font: 700 10px system-ui; letter-spacing: .07em; color: #9a937f; text-transform: uppercase; }
.psb-list { display: flex; flex-direction: column; gap: 11px; }
.psb-preset {
  display: flex; align-items: flex-start; gap: 12px;
  background: #FFFFFF; border: 1px solid #E6E0D4; border-radius: 13px; padding: 13px 14px;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 130ms ease, background 130ms ease;
}
.psb-preset:active { transform: scale(.99); background: #FAF7F0; }
.psb-preset-tile {
  width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 15px;
}
.psb-preset-main { flex: 1; min-width: 0; }
.psb-preset-name { font: 700 13.5px system-ui; line-height: 1.3; }
.psb-preset-recipe { font: 500 11px system-ui; color: #888; margin-top: 3px; line-height: 1.4; }
.psb-preset-menu {
  width: 28px; height: 28px; border-radius: 7px; background: #F5F1E9; border: 1px solid #E6E0D4;
  color: #9a937f; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer;
}
.psb-empty { font: 500 12.5px system-ui; color: #9a937f; padding: 24px 8px; text-align: center; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .psb-overlay, .psb-back, .psb-chip, .psb-tone, .psb-btn, .psb-switch, .psb-knob { transition: none !important; }
}

/* ── Settings mobile launcher — opens the overlay; desktop builder hidden ──── */
.ps-mobile-launch { display: none; }
@media (max-width: 600px) {
  #tab-post-styles .ps-presets-section,
  #tab-post-styles .ps-builder-section { display: none !important; }
  .ps-mobile-launch {
    display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
    background: #FFFFFF; border: 1px solid #E6E0D4; border-radius: 13px; padding: 16px;
    cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  }
  .ps-mobile-launch:active { background: #FAF7F0; }
  .ps-mobile-launch-main { flex: 1; min-width: 0; }
  .ps-mobile-launch-title { display: block; font: 800 15px system-ui; color: #1A1A18; }
  .ps-mobile-launch-sub { display: block; font: 500 11.5px system-ui; color: #888; margin-top: 2px; }
  .ps-mobile-launch-chev { font-size: 22px; color: #C2B79E; flex-shrink: 0; line-height: 1; }
}