/* Premier Stays — site-wide smooth animations & motion polish.
   Loaded after each page's inline style so it can refine behavior without
   fighting component-specific rules. Respects prefers-reduced-motion. */

/* Voice-to-text mic button (used inside .ai-in-wrap and anywhere psVoice() is wired) */
.ai-in-wrap { position: relative }
.mic-btn {
  position: absolute; right: 8px; bottom: 8px;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1.5px solid var(--bd, #e5e7eb);
  background: #fff; color: var(--tx2, #52525b);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; line-height: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease, box-shadow .2s ease;
}
.mic-btn:hover { color: var(--tx, #09090b); border-color: var(--bd2, #d4d4d8) }
.mic-btn:active { transform: scale(.94) }
.mic-btn svg { width: 18px; height: 18px }
.mic-btn.listening {
  background: var(--tx, #09090b); color: #fff; border-color: var(--tx, #09090b);
  animation: ps-mic-pulse 1.4s infinite;
}
/* Shown on the Whisper fallback path (Firefox, etc) while the clip is
   being uploaded + transcribed. Subtle spin tells the user we didn't
   drop the recording — text will appear once the server responds. */
.mic-btn.transcribing {
  background: #fff; color: var(--tx2, #52525b); border-color: var(--bd2, #d4d4d8);
  animation: ps-mic-spin 0.9s linear infinite;
  pointer-events: none;
}
@keyframes ps-mic-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(9,9,11,.35) }
  70%  { box-shadow: 0 0 0 8px rgba(9,9,11,0) }
  100% { box-shadow: 0 0 0 0 rgba(9,9,11,0) }
}
@keyframes ps-mic-spin {
  0%   { transform: rotate(0deg) }
  100% { transform: rotate(360deg) }
}
/* Reserve room inside the textarea so the mic doesn't overlap text */
.ai-in-wrap textarea { padding-right: 52px !important }

html { scroll-behavior: smooth }
*,*::before,*::after { -webkit-tap-highlight-color: transparent }

body {
  animation: ps-fade-in .45s cubic-bezier(.2,.7,.2,1) both;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@keyframes ps-fade-in {
  0%   { opacity: 0 }
  100% { opacity: 1 }
}

/* Staggered reveal for direct children of main content wrappers */
.wrap > *, main > *, .panel > *, .band > *, .hero > *, .right .form > * {
  animation: ps-rise .55s cubic-bezier(.2,.7,.2,1) both;
}
.wrap > *:nth-child(1), main > *:nth-child(1), .right .form > *:nth-child(1) { animation-delay: .04s }
.wrap > *:nth-child(2), main > *:nth-child(2), .right .form > *:nth-child(2) { animation-delay: .09s }
.wrap > *:nth-child(3), main > *:nth-child(3), .right .form > *:nth-child(3) { animation-delay: .14s }
.wrap > *:nth-child(4), main > *:nth-child(4), .right .form > *:nth-child(4) { animation-delay: .19s }
.wrap > *:nth-child(5), main > *:nth-child(5), .right .form > *:nth-child(5) { animation-delay: .24s }
.wrap > *:nth-child(6), main > *:nth-child(6) { animation-delay: .29s }
.wrap > *:nth-child(7), main > *:nth-child(7) { animation-delay: .34s }

@keyframes ps-rise {
  0%   { opacity: 0; transform: translateY(10px) }
  100% { opacity: 1; transform: translateY(0) }
}

/* Universal smooth transitions on anything interactive */
a, button, .btn, .tab, .pill, .addpill, .kpi, .proj, .ci, .cc, .sc, .opt, .sw,
input, textarea, select, .field, .rb, .tag-chip, .ai-chip, .ai-btn,
.addr, .cbx, .ic, .sb, .badge {
  transition: color .18s ease,
              background-color .18s ease,
              border-color .18s ease,
              box-shadow .22s ease,
              transform .12s cubic-bezier(.2,.7,.2,1),
              opacity .18s ease;
}

/* Subtle press feedback across the board */
a:active:not(:disabled),
button:not(:disabled):active,
.btn:not(:disabled):active,
.pill:active,
.tab:active,
.ai-chip:active { transform: scale(.97) }

/* Input/focus ring tweak for all fields */
input:focus,
textarea:focus,
select:focus {
  outline: none;
}

/* Card/row hover lift */
.proj:hover, .opt:hover, .kpi:hover, .cc:hover {
  transform: translateY(-2px);
}

/* Signed-off items and removed items — smoother opacity */
.ci { transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, opacity .25s ease }
.ci.done .nm, .ci.gone .nm { transition: color .2s ease, text-decoration-color .2s ease }

/* Overlays/modals — smoother backdrop + enter */
.ai-ov, .ov { transition: opacity .25s ease }
.ai-ov.on .ai-box,
.ov[style*="display:flex"] .mo {
  animation: ps-pop .32s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes ps-pop {
  0%   { opacity: 0; transform: translateY(14px) scale(.985) }
  100% { opacity: 1; transform: translateY(0) scale(1) }
}

/* Toast slide-up */
.toast { transition: opacity .25s ease, transform .25s cubic-bezier(.2,.7,.2,1) }
.toast.show { transform: translateY(-2px) }

/* Floating user bar — smooth entry */
#userBar {
  animation: ps-rise .5s cubic-bezier(.2,.7,.2,1) .25s both;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease !important;
}
#userBar a { transition: color .18s ease }

/* Progress bar & counter */
#pf { transition: width .6s cubic-bezier(.2,.7,.2,1) !important }
#pct, .sv { transition: color .2s ease }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Site-wide modern scrollbar ─────────────────────────────────────────
   Chunky default browser scrollbars stand out on the dark hero bands and
   against white cards. Override to a thin, rounded, translucent bar that
   darkens on hover and matches the brand gradient on active thumb drag.
   Firefox uses `scrollbar-*` shorthand; WebKit/Blink uses ::-webkit-*. */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(9, 9, 11, .5) transparent;
}
*::-webkit-scrollbar        { width: 10px; height: 10px }
*::-webkit-scrollbar-track  { background: transparent }
*::-webkit-scrollbar-thumb  {
  background: rgba(9, 9, 11, .55);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
  transition: background .2s ease;
}
*::-webkit-scrollbar-thumb:hover  {
  background: rgba(9, 9, 11, .8);
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:active {
  background: #09090b;
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: transparent }
/* Narrower + lower contrast on mobile so it doesn't steal attention */
@media (max-width: 640px) {
  *::-webkit-scrollbar       { width: 6px; height: 6px }
  *::-webkit-scrollbar-thumb { border-width: 1px }
}

/* ── PWA page-transition (vertical center-out reveal) ───────────────────
   Only mounted by pwa.js when running in standalone mode. On outgoing
   link tap we add .on and the black panel grows from a thin vertical
   slit in the middle outward to cover the whole viewport, then the
   navigation fires. The new page doesn't instantiate the overlay on
   load, so there's no flash on landing. */
.ps-page-swipe {
  position: fixed; inset: 0; z-index: 9999;
  background: #09090b;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path .3s cubic-bezier(.65, 0, .35, 1);
  pointer-events: none;
  will-change: clip-path;
}
.ps-page-swipe.on  { clip-path: inset(0 0 0 0); pointer-events: auto }

/* ── Download PDF button ────────────────────────────────────────────────
   Small floating pill near the top-right of a page. Used on /proposal
   and /agreement to trigger window.print() — the browser's print dialog
   has a "Save as PDF" destination so the client never needs a library. */
.pdf-dl {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: #09090b;
  color: #fff;
  border: none; border-radius: 999px;
  font-family: "Geist","Inter",system-ui,sans-serif;
  font-size: .8rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 4px 14px rgba(9,9,11,.2);
  transition: transform .12s ease, box-shadow .18s ease;
}
.pdf-dl:hover  { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(9,9,11,.28) }
.pdf-dl:active { transform: translateY(0) scale(.97) }
.pdf-dl svg    { width: 14px; height: 14px }
.pdf-dl-wrap   { position: fixed; bottom: 24px; right: 24px; z-index: 50; margin: 0; text-align: right }
@media (max-width: 640px) {
  .pdf-dl-wrap { bottom: 18px; right: 18px }
  .pdf-dl      { padding: 8px 13px; font-size: .76rem }
}

/* ── Print rules ─ make the exported PDF clean ─────────────────────────
   Hide navigation, buttons, TOC, signatures-pad, mic buttons, etc. Keep
   only the document body content. Used by window.print() for PDF export. */
@media print {
  body { background: #fff !important; color: #000 !important }
  header.hdr, footer, nav, .bnav, .cbnav, .pdf-dl-wrap, .return-pill,
  .toc, .abar, .sig-actions, #sigPad, .sig-pad-wrap, .sig-guide,
  .mic-btn, .ai-in-wrap .mic-btn, .toast, #vars {
    display: none !important;
  }
  .band {
    background: #fff !important;
    color: #000 !important;
    border-bottom: 1px solid #ddd !important;
    padding: 24px 32px !important;
  }
  .band-lbl, .band-h, .band-h em, .band-sub { color: #000 !important }
  .shell, .content {
    display: block !important;
    margin: 0 !important;
    padding: 0 24px !important;
    grid-template-columns: none !important;
  }
  .sec {
    page-break-inside: avoid;
    break-inside: avoid;
    border-bottom: 1px solid #eee;
    margin-bottom: 16px; padding-bottom: 12px;
  }
  .v, .v-input {
    background: transparent !important;
    color: #000 !important;
    border: none !important;
    font-weight: 700;
    padding: 0 !important;
  }
  .v-input::placeholder { color: transparent }
  a { color: #000 !important; text-decoration: none !important }
  @page { margin: 18mm }
}

/* ── Site-wide card refinement (wander.com-style elegance) ──────────────
   Applies to every card-like surface across the app: master projects,
   agreement add-on packages, client dashboard project cards, KPI tiles.
   Higher specificity (body prefix) so each page's inline style doesn't
   override it. All monochrome, thin borders, soft shadow, quiet type. */

/* Common card baseline — any class the site uses for a card picks
   these up unless the page explicitly overrides with higher
   specificity. */
body .proj-card,
body .pkg,
body .kpi,
body .empty {
  background: #fff !important;
  border: 1px solid var(--bd, #e5e7eb) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 2px rgba(9, 9, 11, .03), 0 10px 36px rgba(9, 9, 11, .05) !important;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, border-color .2s ease !important;
}
body .proj-card:hover,
body .pkg:hover {
  border-color: var(--bd2, #d4d4d8) !important;
  box-shadow: 0 4px 12px rgba(9, 9, 11, .05), 0 18px 42px rgba(9, 9, 11, .08) !important;
}
/* Card typography: smaller name, looser tracking, lighter weights */
body .proj-card .head h3,
body .pkg-t {
  font-weight: 500 !important;
  letter-spacing: -.005em !important;
  font-size: 1.05rem !important;
  line-height: 1.3 !important;
}
body .pkg-p {
  font-family: var(--mo), ui-monospace, monospace !important;
  font-size: .66rem !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--tx2, #52525b) !important;
}
body .pkg-d {
  font-size: .78rem !important;
  line-height: 1.6 !important;
  color: var(--tx2, #52525b) !important;
}
body .kpi .l {
  font-size: .6rem !important;
  letter-spacing: .2em !important;
  font-weight: 500 !important;
}
body .kpi .v {
  font-weight: 400 !important;
  font-size: 1.7rem !important;
  letter-spacing: -.02em !important;
  font-variant-numeric: tabular-nums !important;
}
/* Empty-state cards — lighter header weight */
body .empty h3 {
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
  font-size: 1.3rem !important;
}
body .empty p {
  font-size: .82rem !important;
  line-height: 1.6 !important;
}

/* Pill buttons — same treatment the client dashboard uses. Apply
   broadly so master, checklist, proposal, agreement share the look. */
body .btn {
  border-radius: 999px !important;
  font-weight: 500 !important;
  letter-spacing: .005em !important;
}
body .btn-sm { font-size: .74rem !important; padding: 8px 14px !important; height: auto !important }
body .btn-primary,
body .btn-dark,
body .btn-blue,
body .btn-gold,
body .btn-agree {
  background: #09090b !important;
  color: #fff !important;
  border: 1px solid #09090b !important;
  font-weight: 500 !important;
}
body .btn-primary:hover,
body .btn-dark:hover,
body .btn-blue:hover,
body .btn-gold:hover,
body .btn-agree:hover {
  background: #18181b !important;
  border-color: #18181b !important;
  filter: none !important;
}
body .btn-ghost {
  background: #fff !important;
  color: #09090b !important;
  border: 1px solid var(--bd, #e5e7eb) !important;
  font-weight: 400 !important;
}
body .btn-ghost:hover {
  background: #fafafa !important;
  border-color: var(--bd2, #d4d4d8) !important;
}

/* Section labels (sec-lbl, band-lbl) — wider tracking, delicate feel */
body .sec-lbl,
body .band-lbl {
  font-weight: 500 !important;
  letter-spacing: .2em !important;
}