/* ============================================================
   /new/ Public Pages — Shared shell
   נשמר רזה — רק primitives לדפים ציבוריים (quote/track/share/client/widget).
   landing/gallery/help מקבלים stylesheet משלהם.
   ============================================================ */

/* ה-base של /new/ קובע overflow:hidden על body — לדפים ציבוריים אנחנו רוצים scroll רגיל.
   ⚠️ קריטי: ה-scroll חייב להיות על html בלבד. אם גם ל-body יש overflow:auto,
   זה שובר את ה-header הדביק (position:sticky) — ה-header נגלל למעלה במקום להישאר נעוץ,
   כי sticky נמדד מול ה-scroll-container הקרוב (body) שבעצמו לא נגלל. */
html {
  overflow-y: auto;
  height: 100%;
}
body {
  overflow: visible;
  height: auto;
  min-height: 100%;
}
body {
  background: var(--surface-1);
}

/* ===== Header ===== */
.pp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface-0);
  border-bottom: 1px solid var(--stroke);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}
.pp-header__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--s-3) var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 56px;
}
.pp-brand {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 20.74px;
  letter-spacing: -0.04em;
  color: var(--ink-1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  direction: ltr;
}
.pp-brand .dot {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--accent);
}
.pp-brand .ai { font-weight: 700; }
.pp-header__divider {
  color: var(--ink-4);
  margin: 0 var(--s-2);
}
.pp-header__title {
  font-size: var(--t-h4);
  color: var(--ink-2);
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}

/* ===== Layout ===== */
.pp-main {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-5) var(--s-10);
}
.pp-main--narrow { max-width: 640px; }
.pp-main--wide   { max-width: 1080px; }

/* ===== Card primitive ===== */
.pp-card {
  background: var(--surface-0);
  border: 1px solid var(--stroke);
  border-radius: var(--r-5);
  padding: var(--s-6);
  box-shadow: var(--sh-1);
  margin-bottom: var(--s-5);
}
.pp-card--accent {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--surface-0) 60%);
}
.pp-card__title {
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--ink-1);
  margin: 0 0 var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.pp-card__sub {
  font-size: var(--t-small);
  color: var(--ink-3);
  margin: 0 0 var(--s-4);
}
.pp-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--stroke);
  gap: var(--s-3);
}
.pp-card__row:last-child { border-bottom: none; }
.pp-card__row-label {
  font-size: var(--t-small);
  color: var(--ink-3);
}
.pp-card__row-value {
  font-size: var(--t-body);
  color: var(--ink-1);
  font-weight: 500;
}

/* ===== Buttons ===== */
.pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 10px 18px;
  border-radius: var(--r-3);
  border: 1px solid var(--stroke-strong);
  background: var(--surface-0);
  color: var(--ink-1);
  font-size: var(--t-body);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-smooth);
  text-decoration: none;
  min-height: 40px;
  font-family: var(--font-ui);
}
.pp-btn:hover {
  background: var(--surface-2);
  transform: translateY(-1px);
  box-shadow: var(--sh-2);
}
.pp-btn:active { transform: translateY(0); }
.pp-btn--primary {
  background: var(--accent);
  color: var(--surface-0);
  border-color: var(--accent);
}
.pp-btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.pp-btn--ok {
  background: var(--ok);
  color: var(--surface-0);
  border-color: var(--ok);
}
.pp-btn--err {
  background: var(--err);
  color: var(--surface-0);
  border-color: var(--err);
}
.pp-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-3);
}
.pp-btn--ghost:hover { color: var(--ink-1); background: var(--surface-2); }
.pp-btn--lg {
  padding: 14px 26px;
  font-size: var(--t-h4);
  min-height: 48px;
}
.pp-btn--block { width: 100%; }
.pp-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ===== States (loading / error / empty) ===== */
.pp-state {
  display: none;
  text-align: center;
  padding: var(--s-10) var(--s-5);
}
.pp-state.is-active { display: block; }
.pp-state__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--s-4);
  color: var(--ink-4);
}
.pp-state__title {
  font-size: var(--t-h2);
  color: var(--ink-1);
  margin: 0 0 var(--s-2);
  font-weight: 600;
}
.pp-state__text {
  font-size: var(--t-body);
  color: var(--ink-3);
  margin: 0 auto var(--s-5);
  max-width: 420px;
}

/* Spinner */
.pp-spinner {
  width: 44px;
  height: 44px;
  margin: 0 auto var(--s-4);
  border: 3px solid var(--surface-3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: pp-spin 0.8s linear infinite;
}
@keyframes pp-spin { to { transform: rotate(360deg); } }

/* ===== Status banner ===== */
.pp-banner {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-3);
  font-size: var(--t-body);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  border: 1px solid transparent;
}
.pp-banner--ok   { background: var(--ok-soft);   color: var(--ok);   border-color: color-mix(in oklch, var(--ok) 25%, transparent); }
.pp-banner--err  { background: var(--err-soft);  color: var(--err);  border-color: color-mix(in oklch, var(--err) 25%, transparent); }
.pp-banner--warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in oklch, var(--warn) 25%, transparent); }
.pp-banner--info { background: var(--info-soft); color: var(--info); border-color: color-mix(in oklch, var(--info) 25%, transparent); }

/* ===== Footer ===== */
.pp-footer {
  border-top: 1px solid var(--stroke);
  background: var(--surface-1);
  padding: var(--s-6) var(--s-5);
  text-align: center;
}
.pp-footer__inner {
  max-width: 880px;
  margin: 0 auto;
  font-size: var(--t-small);
  color: var(--ink-3);
}
.pp-footer a {
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 500;
}
.pp-footer a:hover { color: var(--accent); }
.pp-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-4);
  margin-bottom: var(--s-3);
}

/* ===== Toast ===== */
.pp-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  background: var(--ink-1);
  color: var(--surface-0);
  border-radius: var(--r-3);
  font-size: var(--t-small);
  box-shadow: var(--sh-3);
  z-index: 9999;
  animation: pp-toast-in 0.25s var(--ease-smooth);
  max-width: 90vw;
}
.pp-toast--ok  { background: var(--ok);  }
.pp-toast--err { background: var(--err); }
@keyframes pp-toast-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ===== Mobile ===== */
@media (max-width: 640px) {
  .pp-header__inner { padding: var(--s-3) var(--s-4); }
  .pp-header__title { font-size: var(--t-body); }
  .pp-main { padding: var(--s-4) var(--s-3) var(--s-8); }
  .pp-card { padding: var(--s-4); border-radius: var(--r-4); }
  .pp-card__title { font-size: var(--t-h4); }
  .pp-btn { min-height: var(--touch-min); }
  .pp-btn--lg { padding: 14px 20px; }
}

/* ===== Print ===== */
@media print {
  .pp-header, .pp-footer, .pp-no-print { display: none !important; }
  body { background: white; }
  .pp-card { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; }
}