/* Growth MVP — UI styles for the self-propagation panels on sqlformat.htm.
 * Class-scoped under .sqlfmt-growth-* to avoid colliding with legacy CSS.
 * Reserved global symbols in pp.js (do not shadow): AJAX, UTIL, SQLFMT, ProcessBar.
 */

/* Lives inside .site-name between the title and the version banner. The
 * legacy style_screen2024.css clamps .site-name to 360×60px with
 * overflow:hidden — overrides below expand the block so all three lines
 * (title, tagline, version banner) read on one line each, left-aligned
 * to the title. */
.site-name {
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}
.site-name p.subtitle {
  width: auto !important;
}
.sqlfmt-growth-tagline {
  margin: 2px 0 0;
  color: #4A4A4A;
  font-size: 13px;
  font-style: italic;
  font-weight: normal;
  line-height: 1.4;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .sqlfmt-growth-tagline { white-space: normal; }
}

/* Visual styling moved to sqlformat.htm's inline button-tier rules in
 * Ver5.4.12 so .sqlfmt-growth-mdbtn shares one identical treatment with
 * the rest of the toolbar's utility buttons (Clear / Copy To Clipboard /
 * Share link / Copy to Input). The class is preserved for two reasons:
 * (1) test_growth_mvp.py asserts it stays on btn-copy-markdown /
 * btn-export-image / btn-copy-review for visual-parity contract;
 * (2) future growth-flow buttons that aren't in the toolbar can keep
 * piggybacking on the shared tier styling by tagging the class. */

.sqlfmt-growth-panel {
  font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
  background: #FFFFFF;
  border: 1px solid #E8E6E1;
  border-radius: 6px;
  margin: 16px 0;
  padding: 12px 16px;
  color: #1A1A1A;
  font-size: 13px;
  line-height: 1.5;
  max-width: 100%;
  box-sizing: border-box;
}

.sqlfmt-growth-panel[hidden] { display: none !important; }

.sqlfmt-growth-panel h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1A;
}

.sqlfmt-growth-articles ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sqlfmt-growth-articles li {
  padding: 6px 0;
  border-top: 1px solid #F0EEE9;
}

.sqlfmt-growth-articles li:first-child { border-top: 0; }

.sqlfmt-growth-articles a {
  color: #0B5394;
  text-decoration: none;
  font-weight: 600;
}

.sqlfmt-growth-articles a:hover { text-decoration: underline; }

.sqlfmt-growth-articles .sqlfmt-growth-blurb {
  color: #4A4A4A;
  font-size: 12px;
  margin-top: 2px;
}

.sqlfmt-growth-articles .sqlfmt-growth-readtime {
  color: #8A8A8A;
  font-size: 11px;
  margin-left: 6px;
}

.sqlfmt-growth-cta {
  background: #F4F8FC;
  border-color: #C7DDF0;
}

.sqlfmt-growth-cta a,
.sqlfmt-growth-cta button {
  display: inline-block;
  background: #0B5394;
  color: #FFFFFF;
  border: 0;
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  margin-top: 4px;
}

.sqlfmt-growth-cta a:hover,
.sqlfmt-growth-cta button:hover { background: #094078; }

.sqlfmt-growth-privacy {
  color: #6A6A6A;
  font-size: 11px;
  margin: 8px 0 0;
  font-style: italic;
}

@media (max-width: 480px) {
  .sqlfmt-growth-panel { padding: 10px 12px; }
  .sqlfmt-growth-mdbtn { margin-left: 0; margin-top: 4px; }
}

/* Privacy toast — shown on the FIRST Markdown click of the session.
 * Fixed-position bottom-center; auto-fades after 3 s. Safe on mobile (max-width 90vw).
 *
 * !important on the positioning rules because some legacy rule in
 * style_screen2024.css overrides `position: fixed` for body-level divs
 * down to `static`. Toast is a unique single-purpose class, so flagging
 * these specific properties is safe and not a styling smell. */
.sqlfmt-growth-toast {
  position: fixed !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  max-width: 90vw;
  width: 480px;
  background: #2C2C2C;
  color: #FFFFFF;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.25s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  pointer-events: none;
}
.sqlfmt-growth-toast-visible { opacity: 1; }