/* ==========================================================================
   Prompt Genie — page-specific adjustments
   Layer 5 of 5. Populated per page as each converts (Phases 3-4).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Home
   -------------------------------------------------------------------------- */

/* Profile / about strip */
.pg-home-profile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  align-items: start;
}
.pg-headshot {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--pg-gold);
  box-shadow: 0 0 0 6px rgb(201 164 92 / 0.15);
}
.pg-home-profile h2 { margin-bottom: 0.25rem; }
.pg-profile-role {
  color: var(--pg-gold-bright);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.pg-social-links {
  display: flex;
  gap: 0.9rem;
  margin-top: 1.25rem;
}
.pg-social-links a {
  color: var(--pg-ink-muted);
  transition: color var(--pico-transition);
}
.pg-social-links a:hover { color: var(--pg-gold-bright); }
.pg-social-links svg { width: 22px; height: 22px; }

@media (max-width: 640px) {
  .pg-home-profile { grid-template-columns: 1fr; text-align: center; }
  .pg-headshot { margin-inline: auto; }
  .pg-social-links { justify-content: center; }
}

/* --------------------------------------------------------------------------
   Vani chatbot — same ids/classes as main.js expects, re-skinned with tokens.
   (Legacy styling lives in style.css for unconverted pages.)
   -------------------------------------------------------------------------- */
#chatbot-popup-button {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--pg-gold);
  color: var(--pg-gold-ink);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--pg-shadow);
  transition: transform 0.3s ease;
  z-index: 1000;
}
#chatbot-popup-button:hover { transform: scale(1.08); }
#chatbot-popup-button svg { width: 26px; height: 26px; }

#chatbot-window {
  position: fixed;
  bottom: 7rem;
  right: 2rem;
  width: 350px;
  max-width: 90vw;
  max-height: 82vh;
  background: var(--pg-surface);
  border: 1px solid var(--pg-border);
  border-radius: 16px;
  box-shadow: var(--pg-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: bottom right;
  z-index: 1000;
}
.hidden-chatbot { transform: scale(0); opacity: 0; }

.chatbot-header {
  background: var(--pg-surface-2);
  border-bottom: 1px solid var(--pg-gold-deep);
  color: var(--pg-ink);
  padding: 0.9rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chatbot-header h3 {
  margin: 0;
  font-family: var(--pg-font-display);
  font-size: 1.05rem;
  color: var(--pg-gold-bright);
}
.chatbot-header button {
  background: none;
  border: none;
  padding: 0;
  color: var(--pg-ink-muted);
  cursor: pointer;
}
.chatbot-header button:hover { color: var(--pg-ink); }
.chatbot-header svg { width: 20px; height: 20px; }

.chatbot-body {
  flex-grow: 1;
  padding: 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.chatbot-message {
  padding: 0.7rem 0.95rem;
  border-radius: 12px;
  max-width: 80%;
  line-height: 1.45;
  font-size: 0.92rem;
}
.user-message {
  background: var(--pg-gold);
  color: var(--pg-gold-ink);
  align-self: flex-end;
}
.bot-message {
  background: var(--pg-surface-2);
  color: var(--pg-ink);
  align-self: flex-start;
}
.bot-message p { margin: 0 0 0.5rem 0; }
.bot-message p:last-child { margin-bottom: 0; }
.bot-message ul { list-style-position: inside; padding-left: 0.5rem; margin: 0; }
.bot-message li { margin-bottom: 0.25rem; }

.chatbot-footer {
  padding: 0.9rem 1rem;
  border-top: 1px solid var(--pg-border);
}
.chatbot-footer form { display: flex; gap: 0.5rem; margin: 0; }
.chatbot-footer input {
  flex-grow: 1;
  margin: 0;
  padding: 0.45rem 0.75rem;
  font-size: 0.9rem;
  height: auto;
}
.chatbot-footer button {
  background: var(--pg-gold);
  color: var(--pg-gold-ink);
  border: none;
  border-radius: var(--pico-border-radius);
  padding: 0.45rem 1rem;
  width: auto;
  margin: 0;
  font-weight: 600;
  cursor: pointer;
}
.chatbot-footer button:hover { background: var(--pico-primary-hover-background); }

.chatbot-predefined-services {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.5rem;
}
.predefined-service-button {
  background: transparent;
  border: 1px solid var(--pg-gold-deep);
  color: var(--pg-gold-bright);
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  width: auto;
  margin: 0;
  cursor: pointer;
  transition: background-color 0.2s;
}
.predefined-service-button:hover { background: rgb(201 164 92 / 0.12); }

.typing-indicator { display: flex; align-items: center; gap: 4px; }
.typing-indicator span {
  height: 8px;
  width: 8px;
  background: var(--pg-gold);
  border-radius: 50%;
  animation: pg-bounce 1.4s infinite ease-in-out both;
}
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
@keyframes pg-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   LinkedIn Optimiser
   The tool's JS (untouched, per QA rule) renders its output with Tailwind
   utility class strings. This scoped shim re-implements exactly the 90
   classes that JS can emit, mapped onto the design tokens — so untouched
   JS renders luxury-styled output. Scope: #app-container only.
   -------------------------------------------------------------------------- */

/* tool page shell */
.pg-tool-header { text-align: center; max-width: 46rem; margin-inline: auto; }
.pg-tool-header h1 { margin-bottom: 0.75rem; }
.pg-steps { list-style: none; margin: 1.25rem 0 0; padding: 0; counter-reset: pg-step; }
.pg-steps li {
  counter-increment: pg-step;
  position: relative;
  padding-left: 3rem;
  margin-bottom: 1.1rem;
  font-size: 0.92rem;
  color: var(--pg-ink-muted);
}
.pg-steps li::before {
  content: counter(pg-step);
  position: absolute;
  left: 0;
  top: -0.15rem;
  width: 2rem; height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pg-gold);
  color: var(--pg-gold-ink);
  font-weight: 700;
  font-size: 0.85rem;
}
.pg-inline-error { color: var(--pg-err); font-size: 0.88rem; margin-top: 1rem; }
.pg-spinner-sm {
  width: 1.4rem; height: 1.4rem;
  border-width: 3px;
  vertical-align: middle;
  margin-right: 0.5rem;
}

/* ---- utility shim (only what linkedin_optimiser.js emits) ---- */
#app-container .hidden { display: none !important; }
#app-container .block { display: block; }
#app-container .flex { display: flex; }
#app-container .inline-flex { display: inline-flex; }
#app-container .grid { display: grid; }
#app-container .flex-1 { flex: 1; }
#app-container .flex-col { flex-direction: column; }
#app-container .flex-wrap { flex-wrap: wrap; }
#app-container .items-center { align-items: center; }
#app-container .justify-center { justify-content: center; }
#app-container .justify-end { justify-content: flex-end; }
#app-container .grid-cols-1 { grid-template-columns: 1fr; }
#app-container .gap-2 { gap: 0.5rem; }
#app-container .gap-3 { gap: 0.75rem; }
#app-container .gap-x-6 { column-gap: 1.5rem; }
#app-container .gap-y-3 { row-gap: 0.75rem; }
#app-container .space-y-1\.5 > * + * { margin-top: 0.375rem; }
#app-container .space-y-3 > * + * { margin-top: 0.75rem; }
#app-container .w-full { width: 100%; }
#app-container .min-h-\[44px\] { min-height: 44px; }
#app-container .overflow-hidden { overflow: hidden; }
#app-container .text-center { text-align: center; }
#app-container .whitespace-pre-wrap { white-space: pre-wrap; }
#app-container .capitalize { text-transform: capitalize; }
#app-container .uppercase { text-transform: uppercase; }
#app-container .tracking-wide { letter-spacing: 0.05em; }
#app-container .list-disc { list-style-type: disc; }
#app-container .pl-5 { padding-left: 1.25rem; }
#app-container .p-3 { padding: 0.75rem; }
#app-container .p-4 { padding: 1rem; }
#app-container .p-5 { padding: 1.25rem; }
#app-container .px-4 { padding-left: 1rem; padding-right: 1rem; }
#app-container .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
#app-container .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
#app-container .mt-1 { margin-top: 0.25rem; }
#app-container .mt-2 { margin-top: 0.5rem; }
#app-container .mt-3 { margin-top: 0.75rem; }
#app-container .mt-4 { margin-top: 1rem; }
#app-container .mb-2 { margin-bottom: 0.5rem; }
#app-container .rounded-lg { border-radius: 10px; }
#app-container .rounded-xl { border-radius: 14px; }
#app-container .border { border: 1px solid var(--pg-border); }
#app-container .border-gray-200,
#app-container .border-gray-300 { border-color: var(--pg-border); }
#app-container .border-blue-100 { border-color: var(--pg-gold-deep); }
#app-container .border-l-amber-500 { border-left: 4px solid var(--pg-warn); }
#app-container .border-l-emerald-500 { border-left: 4px solid var(--pg-ok); }
#app-container .border-l-rose-500 { border-left: 4px solid var(--pg-err); }
#app-container .border-l-gray-400 { border-left: 4px solid var(--pg-border); }
#app-container .shadow-sm,
#app-container .shadow-md { box-shadow: var(--pg-shadow); }
#app-container .font-semibold { font-weight: 600; }
#app-container .font-bold { font-weight: 700; }
#app-container .font-extrabold { font-weight: 700; }
#app-container .leading-5 { line-height: 1.25rem; }
#app-container .leading-6 { line-height: 1.5rem; }
#app-container .leading-none { line-height: 1; }
#app-container .text-xs { font-size: 0.75rem; }
#app-container .text-sm { font-size: 0.875rem; }
#app-container .text-base { font-size: 1rem; }
#app-container .text-lg { font-size: 1.1rem; }
#app-container .text-2xl { font-size: 1.4rem; }
#app-container .text-6xl { font-size: 3.5rem; font-family: var(--pg-font-display); }
#app-container .text-gray-900 { color: var(--pg-ink); }
#app-container .text-gray-700 { color: var(--pg-ink); }
#app-container .text-gray-500 { color: var(--pg-ink-muted); }
#app-container .text-white { color: var(--pg-on-solid); }
#app-container .text-blue-50,
#app-container .text-blue-100 { color: rgb(34 26 7 / 0.75); }
#app-container .text-blue-700,
#app-container .text-blue-800 { color: var(--pg-info); }
#app-container .text-emerald-800 { color: var(--pg-ok); }
#app-container .text-amber-800 { color: var(--pg-warn); }
#app-container .text-rose-800 { color: var(--pg-err); }
#app-container .bg-white,
#app-container .bg-white\/80 { background-color: var(--pg-surface); }
#app-container .bg-gray-100,
#app-container .bg-gray-200 { background-color: var(--pg-surface-2); }
#app-container .bg-blue-600 { background-color: var(--pg-gold); }
#app-container .hover\:bg-blue-700:hover { background-color: var(--pico-primary-hover-background); }
#app-container .bg-blue-100 { background-color: var(--pg-info-bg); }
#app-container .bg-emerald-100 { background-color: var(--pg-ok-bg); }
#app-container .bg-amber-100 { background-color: var(--pg-warn-bg); }
#app-container .bg-rose-100 { background-color: var(--pg-err-bg); }
@media (min-width: 640px) {
  #app-container .sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  #app-container .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  #app-container .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   Portfolio
   -------------------------------------------------------------------------- */
.pg-xp-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem 1rem;
}
.pg-xp-head h3 { margin-bottom: 0.25rem; }
.pg-date {
  color: var(--pg-gold-bright);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.pg-timeline { list-style: none; margin: 1.75rem 0 0 0.5rem; padding: 0; position: relative; }
.pg-timeline::before {
  content: "";
  position: absolute;
  left: 0; top: 0.4rem; bottom: 0.4rem;
  width: 2px;
  background: var(--pg-gold-deep);
}
.pg-timeline li { position: relative; padding: 0 0 1.75rem 2rem; }
.pg-timeline li:last-child { padding-bottom: 0; }
.pg-timeline li::before {
  content: "";
  position: absolute;
  left: -5px; top: 0.4rem;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--pg-gold);
  box-shadow: 0 0 0 4px var(--pg-bg);
}
.pg-timeline h3 { font-size: 1.05rem; margin-bottom: 0.1rem; }
.pg-timeline p { margin: 0.35rem 0 0; font-size: 0.92rem; color: var(--pg-ink-muted); }

/* --------------------------------------------------------------------------
   Contact — shim for the classes contact.js (untouched) assigns at runtime
   (status message styling + submit-button spinner). Scope: #contact-form.
   -------------------------------------------------------------------------- */
#contact-form .mt-6 { margin-top: 1.5rem; }
#contact-form .text-center { text-align: center; }
#contact-form .text-sm { font-size: 0.875rem; }
#contact-form .p-3 { padding: 0.75rem; }
#contact-form .rounded-md { border-radius: 8px; }
#contact-form .opacity-0 { opacity: 0; }
#contact-form .opacity-100 { opacity: 1; }
#contact-form .opacity-25 { opacity: 0.25; }
#contact-form .opacity-75 { opacity: 0.75; }
#contact-form .transition-opacity { transition-property: opacity; }
#contact-form .duration-500 { transition-duration: 0.5s; }
#contact-form .bg-green-100 { background: var(--pg-ok-bg); }
#contact-form .text-green-700 { color: var(--pg-ok); }
#contact-form .bg-red-100 { background: var(--pg-err-bg); }
#contact-form .text-red-700 { color: var(--pg-err); }
#contact-form .animate-spin { animation: pg-spin 0.9s linear infinite; }
#contact-form .h-5 { height: 1.25rem; }
#contact-form .w-5 { width: 1.25rem; }
#contact-form .-ml-1 { margin-left: -0.25rem; }
#contact-form .mr-3 { margin-right: 0.75rem; }
#contact-form .text-white { color: currentColor; }
#contact-form #submitButton svg { display: inline-block; vertical-align: middle; }

/* ---- Phase 4: shared tool shim additions (classes emitted by mail_sentry.js,
   virality.js, recipe.js, meme.js — token-mapped, #app-container scoped) ---- */
#app-container .inline-block { display:inline-block; }
#app-container .relative { position:relative; }
#app-container .sticky { position:sticky; }
#app-container .top-6 { top:1.5rem; }
#app-container .flex-grow { flex-grow:1; }
#app-container .flex-shrink-0 { flex-shrink:0; }
#app-container .min-w-0 { min-width:0; }
#app-container .max-w-full { max-width:100%; }
#app-container .h-full { height:100%; }
#app-container .justify-between { justify-content:space-between; }
#app-container .items-start { align-items:flex-start; }
#app-container .mx-auto { margin-inline:auto; }
#app-container .break-words { overflow-wrap:break-word; }
#app-container .grid-cols-2 { grid-template-columns:repeat(2,1fr); }
#app-container .grid-cols-3 { grid-template-columns:repeat(3,1fr); }
#app-container .h-2 { height:0.5rem; }
#app-container .h-4 { height:1rem; }
#app-container .h-6 { height:1.5rem; }
#app-container .h-8 { height:2rem; }
#app-container .h-10 { height:2.5rem; }
#app-container .h-12 { height:3rem; }
#app-container .h-40 { height:10rem; }
#app-container .w-1 { width:0.25rem; }
#app-container .w-2 { width:0.5rem; }
#app-container .w-4 { width:1rem; }
#app-container .w-6 { width:1.5rem; }
#app-container .w-10 { width:2.5rem; }
#app-container .w-12 { width:3rem; }
#app-container .w-40 { width:10rem; }
#app-container .mb-1 { margin-bottom:0.25rem; }
#app-container .mb-3 { margin-bottom:0.75rem; }
#app-container .mb-4 { margin-bottom:1rem; }
#app-container .mb-6 { margin-bottom:1.5rem; }
#app-container .mb-8 { margin-bottom:2rem; }
#app-container .mb-10 { margin-bottom:2.5rem; }
#app-container .mt-0\.5 { margin-top:0.125rem; }
#app-container .mt-2\.5 { margin-top:0.625rem; }
#app-container .mt-6 { margin-top:1.5rem; }
#app-container .mt-8 { margin-top:2rem; }
#app-container .mt-12 { margin-top:3rem; }
#app-container .mr-2 { margin-right:0.5rem; }
#app-container .mr-3 { margin-right:0.75rem; }
#app-container .p-6 { padding:1.5rem; }
#app-container .pb-6 { padding-bottom:1.5rem; }
#app-container .pb-8 { padding-bottom:2rem; }
#app-container .pt-1 { padding-top:0.25rem; }
#app-container .px-5 { padding-left:1.25rem;padding-right:1.25rem; }
#app-container .px-6 { padding-left:1.5rem;padding-right:1.5rem; }
#app-container .py-4 { padding-top:1rem;padding-bottom:1rem; }
#app-container .gap-4 { gap:1rem; }
#app-container .gap-6 { gap:1.5rem; }
#app-container .gap-8 { gap:2rem; }
#app-container .text-xl { font-size:1.25rem; }
#app-container .text-3xl { font-size:1.7rem; }
#app-container .text-4xl { font-size:2rem; }
#app-container .font-medium { font-weight:500; }
#app-container .italic { font-style:italic; }
#app-container .leading-relaxed { line-height:1.6; }
#app-container .rounded { border-radius:6px; }
#app-container .rounded-md { border-radius:8px; }
#app-container .rounded-full { border-radius:999px; }
#app-container .rounded-r-lg { border-top-right-radius:10px;border-bottom-right-radius:10px; }
#app-container .border-2 { border:2px solid var(--pg-border); }
#app-container .border-4 { border:4px solid var(--pg-border); }
#app-container .border-b { border-bottom:1px solid var(--pg-border); }
#app-container .border-b-2 { border-bottom:2px solid var(--pg-border); }
#app-container .border-l-4 { border-left:4px solid var(--pg-border); }
#app-container .border-white { border-color:var(--pg-bg); }
#app-container .shadow-lg { box-shadow:var(--pg-shadow); }
#app-container .transition-colors { transition:background-color .2s,color .2s,border-color .2s; }
#app-container .transition-shadow { transition:box-shadow .2s; }
#app-container .duration-200 { transition-duration:.2s; }
#app-container .text-gray-800 { color:var(--pg-ink); }
#app-container .text-gray-600 { color:var(--pg-ink-muted); }
#app-container .text-gray-400 { color:var(--pg-ink-muted); }
#app-container .text-gray-200 { color:var(--pg-ink-muted); }
#app-container .text-green-500 { color:var(--pg-ok); }
#app-container .text-green-600 { color:var(--pg-ok); }
#app-container .text-green-700 { color:var(--pg-ok); }
#app-container .text-green-800 { color:var(--pg-ok); }
#app-container .text-green-900 { color:var(--pg-ok); }
#app-container .text-red-500 { color:var(--pg-err); }
#app-container .text-red-600 { color:var(--pg-err); }
#app-container .text-red-700 { color:var(--pg-err); }
#app-container .text-red-800 { color:var(--pg-err); }
#app-container .text-red-900 { color:var(--pg-err); }
#app-container .text-yellow-500 { color:var(--pg-warn); }
#app-container .text-yellow-600 { color:var(--pg-warn); }
#app-container .text-yellow-700 { color:var(--pg-warn); }
#app-container .text-yellow-900 { color:var(--pg-warn); }
#app-container .text-amber-600 { color:var(--pg-warn); }
#app-container .text-amber-950 { color:var(--pg-on-solid); } /* text ON warn-solid (SUSPICIOUS badge) */
#app-container .text-orange-600 { color:var(--pg-warn); }
#app-container .text-orange-700 { color:var(--pg-warn); }
#app-container .text-blue-600 { color:var(--pg-info); }
#app-container .text-blue-900 { color:var(--pg-info); }
#app-container .text-indigo-600 { color:var(--pg-info); }
#app-container .text-indigo-800 { color:var(--pg-info); }
#app-container .text-purple-600 { color:var(--pg-info); }
#app-container .text-purple-900 { color:var(--pg-info); }
#app-container .bg-green-50 { background-color:var(--pg-ok-bg); }
#app-container .bg-green-100 { background-color:var(--pg-ok-bg); }
#app-container .bg-red-50 { background-color:var(--pg-err-bg); }
#app-container .bg-red-100 { background-color:var(--pg-err-bg); }
#app-container .bg-amber-50 { background-color:var(--pg-warn-bg); }
#app-container .bg-orange-50 { background-color:var(--pg-warn-bg); }
#app-container .bg-blue-50 { background-color:var(--pg-info-bg); }
#app-container .bg-indigo-50 { background-color:var(--pg-info-bg); }
#app-container .bg-indigo-100 { background-color:var(--pg-info-bg); }
#app-container .bg-purple-50 { background-color:var(--pg-info-bg); }
#app-container .bg-purple-100 { background-color:var(--pg-info-bg); }
#app-container .bg-gray-700 { background-color:var(--pg-surface-2); }
#app-container .bg-green-500 { background-color:var(--pg-ok-solid); }
#app-container .bg-red-500 { background-color:var(--pg-err-solid); }
#app-container .bg-orange-500 { background-color:var(--pg-warn-solid); }
#app-container .bg-yellow-500 { background-color:var(--pg-warn-solid); }
#app-container .bg-blue-500 { background-color:var(--pg-accent-solid); }
#app-container .bg-indigo-500 { background-color:var(--pg-accent-solid); }
#app-container .border-green-500 { border-color:var(--pg-ok); }
#app-container .border-red-500 { border-color:var(--pg-err); }
#app-container .border-amber-500 { border-color:var(--pg-warn); }
#app-container .border-indigo-500 { border-color:var(--pg-gold); }
#app-container .border-blue-500 { border-color:var(--pg-gold); }
#app-container .border-green-200 { border-color:var(--pg-border); }
#app-container .border-red-200 { border-color:var(--pg-border); }
#app-container .border-blue-200 { border-color:var(--pg-border); }
#app-container .border-blue-300 { border-color:var(--pg-border); }
#app-container .border-orange-200 { border-color:var(--pg-border); }
#app-container .border-purple-200 { border-color:var(--pg-border); }
#app-container .border-yellow-200 { border-color:var(--pg-border); }
#app-container .bg-gradient-to-r { background-image:linear-gradient(to right,var(--pgx-from,transparent),var(--pgx-to,transparent)); }
#app-container .bg-gradient-to-br { background-image:linear-gradient(135deg,var(--pgx-from,transparent),var(--pgx-to,transparent)); }
#app-container .bg-gradient-to-b { background-image:linear-gradient(to bottom,var(--pgx-from,transparent),var(--pgx-to,transparent)); }
#app-container .from-blue-500 { --pgx-from:var(--pg-gold); }
#app-container .from-purple-500 { --pgx-from:var(--pg-gold); }
#app-container .from-green-500 { --pgx-from:var(--pg-ok-solid); }
#app-container .from-slate-700 { --pgx-from:var(--pg-surface-2); }
#app-container .from-blue-50 { --pgx-from:var(--pg-info-bg); }
#app-container .from-green-50 { --pgx-from:var(--pg-ok-bg); }
#app-container .from-orange-50 { --pgx-from:var(--pg-warn-bg); }
#app-container .from-red-50 { --pgx-from:var(--pg-err-bg); }
#app-container .from-yellow-50 { --pgx-from:var(--pg-warn-bg); }
#app-container .from-gray-50 { --pgx-from:var(--pg-surface-2); }
#app-container .to-purple-600 { --pgx-to:var(--pg-gold-deep); }
#app-container .to-pink-600 { --pgx-to:var(--pg-gold-deep); }
#app-container .to-emerald-600 { --pgx-to:var(--pg-gold-deep); }
#app-container .to-slate-900 { --pgx-to:var(--pg-bg); }
#app-container .to-white { --pgx-to:var(--pg-surface); }
#app-container .to-blue-100 { --pgx-to:var(--pg-info-bg); }
#app-container .to-green-100 { --pgx-to:var(--pg-ok-bg); }
#app-container .to-red-100 { --pgx-to:var(--pg-err-bg); }
#app-container .to-yellow-100 { --pgx-to:var(--pg-warn-bg); }
#app-container .to-yellow-50 { --pgx-to:var(--pg-warn-bg); }
#app-container .to-gray-100 { --pgx-to:var(--pg-surface-2); }
#app-container .space-y-1 > * + * { margin-top: 0.25rem; }
#app-container .space-y-2 > * + * { margin-top: 0.5rem; }
#app-container .space-y-4 > * + * { margin-top: 1rem; }
#app-container .space-y-6 > * + * { margin-top: 1.5rem; }
#app-container .hover\:bg-gray-200:hover { background-color:var(--pg-surface-2); }
#app-container .hover\:bg-gray-800:hover { background-color:var(--pg-surface-2); }
#app-container .hover\:bg-indigo-600:hover { background-color:var(--pico-primary-hover-background); }
#app-container .hover\:shadow-md:hover { box-shadow:var(--pg-shadow); }
@media (min-width: 768px) {
  #app-container .md\:grid-cols-1 { grid-template-columns:1fr; }
  #app-container .md\:grid-cols-4 { grid-template-columns:repeat(4,1fr); }
  #app-container .md\:col-span-1 { grid-column:span 1; }
  #app-container .md\:col-span-2 { grid-column:span 2; }
  #app-container .md\:text-5xl { font-size:2.6rem; }
}

/* mail_sentry risk badge solids (JS-assigned) */
#app-container .bg-green-600 { background-color: var(--pg-ok-solid); }
#app-container .bg-red-600 { background-color: var(--pg-err-solid); }
#app-container .bg-red-800 { background-color: var(--pg-err-solid); }
#app-container .hover\:bg-red-900:hover { background-color: var(--pg-err-solid); filter: brightness(1.1); }
#app-container .bg-amber-400 { background-color: var(--pg-warn-solid); }
#app-container .border-green-700 { border-color: var(--pg-ok); }
#app-container .border-amber-600 { border-color: var(--pg-warn); }
#app-container .border-red-800 { border-color: var(--pg-err); }
#app-container .border-gray-400 { border-color: var(--pg-border); }
#app-container .border-gray-300 { border-color: var(--pg-border); }
#app-container .border-dashed { border-style: dashed; }
#app-container .hover\:border-blue-400:hover { border-color: var(--pg-gold); }
#app-container .hover\:bg-blue-50:hover { background-color: var(--pg-info-bg); }
#app-container .divide-y > * + * { border-top: 1px solid var(--pg-border); }
#app-container .divide-gray-100 > * + * { border-top-color: var(--pg-border); }
#app-container .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
#app-container .resize-none { resize: none; }
#app-container .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#app-container .cursor-pointer { cursor: pointer; }
#app-container .min-h-\[200px\] { min-height: 200px; }
#app-container .h-14 { height: 3.5rem; }
#app-container .w-14 { width: 3.5rem; }
#app-container .transition-all { transition: all 0.3s ease; }
#app-container .duration-500 { transition-duration: 0.5s; }
#app-container .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
#app-container .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
#app-container .bg-gray-300 { background-color: var(--pg-surface-2); }
@media (min-width: 640px) {
  #app-container .sm\:flex-row { flex-direction: row; }
  #app-container .sm\:justify-center { justify-content: center; }
  #app-container .sm\:w-auto { width: auto; }
  #app-container .sm\:px-8 { padding-left: 2rem; padding-right: 2rem; }
}
#app-container .animate-spin { animation: pg-spin 0.9s linear infinite; }
#app-container .opacity-25 { opacity: 0.25; }
#app-container .opacity-75 { opacity: 0.75; }
#app-container .text-blue-600 { color: var(--pg-gold); }

#app-container .p-8 { padding: 2rem; }
#app-container .p-12 { padding: 3rem; }
#app-container .absolute { position: absolute; }
#app-container .inset-0 { inset: 0; }
#app-container .pointer-events-none { pointer-events: none; }
#app-container .z-10 { z-index: 10; }