/* ===== BuyWise Home — Custom Styles ===== */

/* PrimarySourceLink component tokens (accent = EPA, warning = FEMA, neutral = other).
   Light source badges tinted with the BuyWise green (#4a635d); retheme here in one place. */
:root {
  --ps-border-accent:  rgba(74,99,93,0.32);  --ps-bg-accent:  #e6efea;  --ps-text-accent:  #3e5751;  --ps-fill-accent:  #4a635d;
  --ps-border-warning: #e2c583;              --ps-bg-warning: #faf1de;  --ps-text-warning: #8a6a1c;  --ps-fill-warning: #b8860b;
  --ps-border:         rgba(74,99,93,0.22);
  --ps-surface-1:      #eef3f1;
  --ps-text-secondary: #5c6d68;
  --ps-text-primary:   #2f4640;
}
.primary-source-link { transition: filter .15s ease, transform .15s ease; }
.primary-source-link:hover { filter: brightness(1.15); transform: translateY(-1px); }

/* ===== Header property switcher ===== */
.property-switcher {
  appearance: none; -webkit-appearance: none;
  font-family: inherit; font-weight: 600; font-size: inherit;
  color: #6B8E23; background: transparent; border: none; cursor: pointer;
  padding: 0 20px 0 0; margin: 0; outline: none; max-width: 320px;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B8E23' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center;
}
.property-switcher:hover { color: #5a7a1d; }
.property-switcher:focus-visible { outline: 2px solid #6B8E23; outline-offset: 3px; border-radius: 3px; }
.property-switcher option { color: #1d2622; font-weight: 500; }

/* ===== Prompt inspector (internal / debug — flag-gated in app.js) ===== */
.bw-pi-host { position: relative; }
.bw-pi-btn {
  position: absolute; top: 6px; right: 6px; z-index: 6;
  display: inline-flex; align-items: center; gap: 3px;
  font-family: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 8px 2px 6px; border-radius: 999px; cursor: pointer;
  color: #7a560c; background: #f6ecd5; border: 1px solid #d9b866;
  opacity: .55; transition: opacity .12s, transform .12s;
}
.bw-pi-host:hover .bw-pi-btn { opacity: 1; }
.bw-pi-btn:hover { transform: translateY(-1px); }
.bw-pi-btn .material-symbols-outlined { line-height: 1; }

.bw-pi-scrim {
  position: fixed; inset: 0; background: rgba(10,14,12,.46); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 90;
}
.bw-pi-scrim.open { opacity: 1; pointer-events: auto; }
.bw-pi-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(560px, 94vw);
  background: #fff; border-left: 1px solid #e2e8e5; box-shadow: -16px 0 40px rgba(0,0,0,.22);
  transform: translateX(100%); transition: transform .24s cubic-bezier(.4,0,.2,1);
  z-index: 91; display: flex; flex-direction: column;
}
.bw-pi-drawer.open { transform: translateX(0); }
.bw-pi-head { padding: 20px 22px 16px; border-bottom: 1px solid #e6ebe8; position: relative; flex: none; }
.bw-pi-tag {
  font-family: ui-monospace, Menlo, monospace; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; background: #f6ecd5; color: #7a560c;
  padding: 3px 9px; border-radius: 6px;
}
.bw-pi-head h3 { margin: 11px 0 3px; font-size: 19px; color: #1d2622; font-weight: 700; }
.bw-pi-sub { margin: 0; font-size: 12px; color: #5d6a63; font-family: ui-monospace, Menlo, monospace; }
.bw-pi-close {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid #e2e8e5; background: #f1f4f2; color: #5d6a63; cursor: pointer;
  font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.bw-pi-close:hover { color: #1d2622; }
.bw-pi-body { padding: 18px 22px 40px; overflow-y: auto; flex: 1; }
.bw-pi-sec { margin-bottom: 22px; }
.bw-pi-lab {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #8a958d; margin-bottom: 9px;
}
.bw-pi-prompt {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.6;
  white-space: pre-wrap; color: #1d2622; background: #f1f4f2; border: 1px solid #e2e8e5;
  border-left: 3px solid #c79a3a; border-radius: 8px; padding: 14px 15px; margin: 0; overflow-x: auto;
}
.bw-pi-io { display: flex; flex-direction: column; gap: 7px; }
.bw-pi-ioitem { display: flex; gap: 9px; font-size: 13px; color: #5d6a63; align-items: baseline; }
.bw-pi-k {
  font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; flex: none;
  padding: 1px 7px; border-radius: 5px;
}
.bw-pi-ioitem.in .bw-pi-k { color: #1d4c70; background: #e0edf6; }
.bw-pi-ioitem.out .bw-pi-k { color: #7a560c; background: #f6ecd5; }

/* Topographic background pattern */
.topographic-bg {
  background-image: url("data:image/svg+xml,%3Csvg width='800' height='800' viewBox='0 0 800 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 100C150 150 250 50 400 100S650 150 800 100' stroke='%23abb3b7' fill='none' opacity='0.08' stroke-width='1'/%3E%3Cpath d='M0 200C100 250 300 150 450 200S700 250 800 200' stroke='%23abb3b7' fill='none' opacity='0.08' stroke-width='1'/%3E%3Cpath d='M0 300C200 350 350 250 500 300S750 350 800 300' stroke='%23abb3b7' fill='none' opacity='0.08' stroke-width='1'/%3E%3C/svg%3E");
}

/* Dot-grid topo pattern */
.topo-dots {
  background-image: radial-gradient(circle at 2px 2px, rgba(77, 97, 80, 0.05) 1px, transparent 0);
  background-size: 24px 24px;
}

/* Material Symbols baseline */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* Navigation group headers */
.nav-group-header {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #737c7f;
  padding: 0.75rem 0.75rem 0.25rem;
  margin-top: 0.25rem;
  user-select: none;
}

/* Noise layer card active state */
.noise-card-active {
  border-color: rgb(74 99 93 / 0.5) !important;
  background-color: rgb(74 99 93 / 0.05) !important;
  box-shadow: 0 0 0 2px rgb(74 99 93 / 0.12) !important;
}

/* Navigation states */
.nav-active {
  background: #ffffff;
  color: #6B8E23 !important;
  font-weight: 700;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.nav-inactive {
  color: #475569;
}
.nav-inactive:hover {
  background: #e8edf0;
}

.nav-icon {
  color: #64748b;
  transition: color 0.18s ease;
}

.nav-link:hover .nav-icon,
.nav-link.nav-active .nav-icon {
  color: #6B8E23;
}

.nav-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: #94a3b8;
  flex-shrink: 0;
  transition: all 0.18s ease;
}

.nav-link:hover .nav-dot {
  background: #4a635d;
}

.nav-link.nav-active .nav-dot {
  background: #4a635d;
  box-shadow: 0 0 0 3px rgba(74, 99, 93, 0.14);
}

.sidebar-aux-link .nav-dot {
  background: #94a3b8;
}

.sidebar-aux-link:hover .nav-dot {
  background: #4a635d;
}

.nav-sublist {
  margin: 0.25rem 0 0.5rem 2rem;
  border-left: 1px solid #cfd8dd;
  padding-left: 0.5rem;
}

.subnav-link {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.28rem 0.5rem;
  border-radius: 0.5rem;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 600;
  transition: all 0.18s ease;
}

.subnav-link:hover {
  background: #e9eff2;
  color: #4a635d;
}

.subnav-link.active {
  background: #ffffff;
  color: #4a635d;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* Chart line animation */
.line-chart-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 3s ease-out forwards;
}
@keyframes dash {
  to { stroke-dashoffset: 0; }
}

/* Glass panel effect */
.glass-panel {
  background: rgba(248, 249, 250, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Map placeholder styling */
.map-placeholder {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 50%, #e2e8f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  color: #64748b;
  border: 2px dashed #94a3b8;
  border-radius: 0.75rem;
}
.map-placeholder .material-symbols-outlined {
  font-size: 3rem;
  opacity: 0.4;
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Selection color */
::selection {
  background: #cde8e1;
  color: #3e5751;
}

/* Section header blocks (AI intro text, source pills, watch items) — hidden globally */
[data-gen="headers"] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Mobile / tablet navigation drawer (< lg = 1024px)
   Desktop (≥ lg) keeps the static sidebar; nothing below changes it.
   ═══════════════════════════════════════════════════════════════════════ */

/* Toggle button + scrim are desktop-hidden by default */
.drawer-toggle-btn { display: none; }
#drawer-scrim { display: none; }

@media (max-width: 1023.98px) {
  /* Show the hamburger only on narrow viewports */
  .drawer-toggle-btn { display: inline-flex; }

  /* Off-canvas by default, slides in when open */
  #app-drawer {
    transform: translateX(-100%);
    transition: transform .28s ease;
    box-shadow: none;
    z-index: 95;
  }
  #app-drawer.is-open {
    transform: translateX(0);
    box-shadow: 0 16px 48px rgba(10, 14, 12, .32);
  }

  /* Dimmed backdrop below the header */
  #drawer-scrim {
    display: block;
    position: fixed;
    inset: 3.5rem 0 0 0;
    background: rgba(10, 14, 12, .46);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
    z-index: 94;
  }
  #drawer-scrim.is-open {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Guarantee desktop layout is untouched at ≥ lg */
@media (min-width: 1024px) {
  #app-drawer { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════   Ask BuyWise — floating assistant (UI only; Gemini wiring comes later)
   ═══════════════════════════════════════════════════════════════════════ */

/* Floating action button — bottom-right, brand gradient */
.bw-ask-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 80;
  display: inline-flex; align-items: center; gap: 0;
  height: 56px; padding: 0; border: none; cursor: pointer;
  border-radius: 9999px; overflow: hidden;
  background: linear-gradient(135deg, #4a635d 0%, #3f5751 100%);
  color: #e2fef6; box-shadow: 0 8px 24px rgba(31, 46, 42, .28), 0 2px 6px rgba(31, 46, 42, .18);
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s, width .24s cubic-bezier(.4,0,.2,1);
  width: 56px;
}
.bw-ask-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(31, 46, 42, .34), 0 3px 8px rgba(31, 46, 42, .22); }
.bw-ask-fab:active { transform: translateY(0); }
.bw-ask-fab:focus-visible { outline: 2px solid #6B8E23; outline-offset: 3px; }
.bw-ask-fab .bw-ask-fab-icon {
  flex: none; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
}
.bw-ask-fab .bw-ask-fab-icon .material-symbols-outlined { font-size: 26px; font-variation-settings: 'FILL' 1, 'wght' 500; }
.bw-ask-fab .bw-ask-fab-label {
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; white-space: nowrap;
  max-width: 0; opacity: 0; overflow: hidden; transition: max-width .24s cubic-bezier(.4,0,.2,1), opacity .18s, padding .24s;
  padding-right: 0;
}
/* Expand to a pill on hover/focus (desktop pointer only) */
@media (hover: hover) {
  .bw-ask-fab:hover { width: auto; }
  .bw-ask-fab:hover .bw-ask-fab-label { max-width: 160px; opacity: 1; padding-right: 22px; }
}
.bw-ask-fab.bw-hidden { transform: translateY(120%) scale(.8); opacity: 0; pointer-events: none; }

/* Soft attention pulse ring (settles after first paint) */
.bw-ask-fab::after {
  content: ''; position: absolute; inset: 0; border-radius: 9999px;
  box-shadow: 0 0 0 0 rgba(74, 99, 93, .45); animation: bw-ask-pulse 2.6s ease-out 3;
}
@keyframes bw-ask-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 99, 93, .40); }
  70%  { box-shadow: 0 0 0 16px rgba(74, 99, 93, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 99, 93, 0); }
}

/* Chat panel */
.bw-ask-panel {
  position: fixed; right: 24px; bottom: 24px; z-index: 82;
  width: min(400px, calc(100vw - 32px)); height: min(620px, calc(100vh - 48px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #ffffff; border: 1px solid #dbe4e7; border-radius: 20px;
  box-shadow: 0 24px 60px rgba(20, 32, 28, .28), 0 6px 16px rgba(20, 32, 28, .16);
  transform: translateY(16px) scale(.96); opacity: 0; pointer-events: none;
  transform-origin: bottom right; transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .18s;
}
.bw-ask-panel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

/* Panel header — brand gradient */
.bw-ask-head {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 16px 18px; color: #e2fef6;
  background: linear-gradient(135deg, #4a635d 0%, #3f5751 100%);
}
.bw-ask-head-avatar {
  flex: none; width: 38px; height: 38px; border-radius: 12px;
  background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center;
}
.bw-ask-head-avatar .material-symbols-outlined { font-size: 22px; font-variation-settings: 'FILL' 1; }
.bw-ask-head-text { flex: 1; min-width: 0; }
.bw-ask-head-title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 15px; line-height: 1.2; }
.bw-ask-head-sub {
  font-size: 11.5px; opacity: .8; margin-top: 2px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.bw-ask-head-close {
  flex: none; width: 32px; height: 32px; border-radius: 9px; border: none; cursor: pointer;
  background: rgba(255,255,255,.12); color: #e2fef6; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.bw-ask-head-close:hover { background: rgba(255,255,255,.24); }

/* Message stream */
.bw-ask-body {
  flex: 1; overflow-y: auto; padding: 18px 16px 8px;
  background: #f8f9fa;
  background-image: radial-gradient(circle at 2px 2px, rgba(77, 97, 80, 0.045) 1px, transparent 0);
  background-size: 22px 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.bw-ask-msg { display: flex; gap: 9px; align-items: flex-end; max-width: 88%; }
.bw-ask-msg-avatar {
  flex: none; width: 26px; height: 26px; border-radius: 8px; margin-bottom: 2px;
  display: flex; align-items: center; justify-content: center;
  background: #cde8e1; color: #3e5751;
}
.bw-ask-msg-avatar .material-symbols-outlined { font-size: 16px; font-variation-settings: 'FILL' 1; }
.bw-ask-bubble {
  font-size: 13.5px; line-height: 1.5; padding: 10px 13px; border-radius: 14px;
  color: #2b3437; background: #ffffff; border: 1px solid #e3e9ec;
  border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(20,32,28,.05);
}
.bw-ask-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.bw-ask-msg.user .bw-ask-bubble {
  color: #e2fef6; background: linear-gradient(135deg, #4a635d 0%, #3f5751 100%);
  border: none; border-radius: 14px; border-bottom-right-radius: 4px;
}

/* Rendered-markdown spacing inside assistant bubbles */
.bw-ask-bubble p { margin: 0 0 8px; }
.bw-ask-bubble p:last-child { margin-bottom: 0; }
.bw-ask-bubble strong { font-weight: 700; color: #1d2622; }
.bw-ask-msg.user .bw-ask-bubble strong { color: #ffffff; }
.bw-ask-bubble code {
  font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  background: #eef3f1; color: #3e5751; padding: 1px 5px; border-radius: 5px;
}
.bw-ask-ul { margin: 4px 0 8px; padding-left: 18px; }
.bw-ask-ul:last-child { margin-bottom: 0; }
.bw-ask-ul li { margin: 3px 0; }

/* Inline API-key prompt (shown only when no credentials are available) */
.bw-ask-keyrow { display: flex; gap: 6px; margin-top: 10px; }
.bw-ask-keyinput {
  flex: 1; min-width: 0; font-family: 'Inter', sans-serif; font-size: 12.5px;
  padding: 7px 10px; border: 1px solid #cde8e1; border-radius: 9px;
  background: #f8f9fa; color: #2b3437; outline: none;
}
.bw-ask-keyinput:focus { border-color: #4a635d; box-shadow: 0 0 0 3px rgba(74,99,93,.12); }
.bw-ask-keysave {
  flex: none; font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 700; cursor: pointer;
  padding: 7px 14px; border: none; border-radius: 9px; color: #e2fef6;
  background: linear-gradient(135deg, #4a635d 0%, #3f5751 100%);
}
.bw-ask-keysave:hover { filter: brightness(1.08); }

/* Suggestion chips */
.bw-ask-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 4px 35px; }
.bw-ask-chip {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 7px 12px; border-radius: 9999px; color: #3f5751;
  background: #ffffff; border: 1px solid #cde8e1; transition: background .14s, border-color .14s, transform .14s;
  display: inline-flex; align-items: center; gap: 6px;
}
.bw-ask-chip:hover { background: #eef5f2; border-color: #4a635d; transform: translateY(-1px); }
.bw-ask-chip .material-symbols-outlined { font-size: 15px; opacity: .8; }

/* Typing indicator */
.bw-ask-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.bw-ask-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: #9db0aa;
  animation: bw-ask-blink 1.2s infinite ease-in-out both;
}
.bw-ask-typing span:nth-child(2) { animation-delay: .18s; }
.bw-ask-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes bw-ask-blink { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Composer */
.bw-ask-foot { flex: none; padding: 12px 12px 14px; background: #ffffff; border-top: 1px solid #e3e9ec; }
.bw-ask-inputwrap {
  display: flex; align-items: flex-end; gap: 8px;
  background: #f1f4f6; border: 1px solid #dbe4e7; border-radius: 16px; padding: 6px 6px 6px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.bw-ask-inputwrap:focus-within { border-color: #4a635d; box-shadow: 0 0 0 3px rgba(74,99,93,.12); }
.bw-ask-input {
  flex: 1; border: none; background: transparent; resize: none; outline: none;
  font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.45; color: #2b3437;
  max-height: 120px; padding: 6px 0; min-height: 22px;
}
.bw-ask-input::placeholder { color: #8a958d; }
.bw-ask-send {
  flex: none; width: 38px; height: 38px; border-radius: 12px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #4a635d 0%, #3f5751 100%); color: #e2fef6;
  display: flex; align-items: center; justify-content: center; transition: opacity .15s, transform .15s;
}
.bw-ask-send:hover { transform: translateY(-1px); }
.bw-ask-send:disabled { opacity: .4; cursor: default; transform: none; }
.bw-ask-send .material-symbols-outlined { font-size: 20px; }
.bw-ask-disclaimer { font-size: 10.5px; color: #8a958d; text-align: center; margin-top: 8px; }

/* Mobile: full-width sheet */
@media (max-width: 520px) {
  .bw-ask-panel {
    right: 8px; left: 8px; bottom: 8px; width: auto;
    height: min(78vh, calc(100vh - 16px));
  }
  .bw-ask-fab { right: 16px; bottom: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   $/sqft distribution chart — click-to-inspect detail card
   ═══════════════════════════════════════════════════════════════════════ */
#ppsf-card {
  position: absolute; z-index: 20; width: 232px; max-width: calc(100% - 8px);
  background: #ffffff; border: 1px solid #dbe4e7; border-radius: 12px;
  box-shadow: 0 12px 30px rgba(20, 32, 28, .18), 0 3px 8px rgba(20, 32, 28, .10);
  padding: 12px 14px 13px; font-family: 'Inter', sans-serif;
}
#ppsf-card.hidden { display: none; }
.ppsf-card-close {
  position: absolute; top: 6px; right: 8px; border: none; background: transparent;
  color: #8a958d; font-size: 18px; line-height: 1; cursor: pointer; padding: 2px;
}
.ppsf-card-close:hover { color: #2b3437; }
.ppsf-card-addr { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 13.5px; color: #1d2622; padding-right: 16px; line-height: 1.25; }
.ppsf-card-figs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; }
.ppsf-card-price { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 15px; color: #3f5751; }
.ppsf-card-ppsf { font-size: 12px; font-weight: 700; color: #4a635d; background: #eef5f2; padding: 2px 8px; border-radius: 9999px; }
.ppsf-card-status { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #586064; background: #eaeff1; padding: 3px 7px; border-radius: 5px; }
.ppsf-card-status--active { color: #8a5a0c; background: #faf1de; }
.ppsf-card-details { font-size: 11.5px; color: #586064; margin-top: 7px; }
.ppsf-card-meta { font-size: 11px; color: #8a958d; margin-top: 4px; }
.ppsf-card-link {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 11px;
  font-size: 12px; font-weight: 700; color: #4a635d; text-decoration: none;
  border: 1px solid #cde8e1; border-radius: 9px; padding: 6px 11px; transition: background .14s;
}
.ppsf-card-link:hover { background: #eef5f2; }
.ppsf-card-link .material-symbols-outlined { line-height: 1; }