/* ProAirs UI kit, styles. Load after tokens.css. Every color falls back to its ProAirs hex,
   so the kit also works in an app that does not load tokens.css. All class names start with pa-. */

:root {
  --pa-ease: cubic-bezier(.32, .72, 0, 1);
  --pa-spring: cubic-bezier(.34, 1.56, .64, 1);
  --pa-fast: 300ms;
  --pa-base: 550ms;
  --pa-slow: 900ms;
  --pa-shadow-core: inset 0 1px 0 rgba(255, 255, 255, .9), 0 20px 44px -28px rgba(30, 46, 86, .45);
  --pa-shadow-lift: 0 22px 40px -22px rgba(18, 28, 56, .55);
  --pa-shadow-float: 0 34px 60px -22px rgba(18, 28, 56, .6);
  --pa-shadow-panel: 0 40px 80px -30px rgba(18, 28, 56, .7);
}

.pa-root { font-family: var(--font-sans, "Archivo", system-ui, sans-serif); color: var(--ink, #141c33); -webkit-font-smoothing: antialiased; }
.pa-root button, .pa-root input, .pa-root select, .pa-root textarea { font-family: inherit; }
.pa-display { font-family: var(--font-display, "Archivo Wide", "Archivo", system-ui, sans-serif); font-weight: 700; letter-spacing: -.02em; }
.pa-num { font-variant-numeric: tabular-nums; }
.pa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Card: double bezel ---------- */
.pa-shell { padding: 6px; border-radius: var(--radius-lg, 24px); background: rgba(30, 46, 86, .05); box-shadow: 0 0 0 1px rgba(30, 46, 86, .06); }
.pa-core { position: relative; box-sizing: border-box; height: 100%; background: var(--surface, #ffffff); border-radius: calc(var(--radius-lg, 24px) - 6px); padding: var(--space-8, 32px); box-shadow: var(--pa-shadow-core); }
.pa-core--sm { padding: var(--space-6, 24px); }

/* ---------- Spotlight border: a ring that lights up under the pointer ---------- */
.pa-spot { position: relative; }
.pa-spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, -400px) var(--my, -400px), rgba(76, 108, 136, .6), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s var(--pa-ease);
}
.pa-spot:hover::before { opacity: 1; }

/* ---------- Surfaces: glass and grain ---------- */
.pa-glass { background: rgba(30, 46, 86, .9); color: var(--surface, #ffffff); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), var(--pa-shadow-lift); }
.pa-glass--light { background: rgba(255, 255, 255, .84); color: var(--ink, #141c33); box-shadow: inset 0 0 0 1px var(--line, #d5dbe3), var(--pa-shadow-lift); }
.pa-grain { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.pa-grain--local { position: absolute; z-index: 1; border-radius: inherit; }

/* ---------- Buttons ---------- */
.pa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; box-sizing: border-box;
  border: 0; border-radius: var(--radius-pill, 999px); padding: 12px 24px; cursor: pointer; text-decoration: none;
  font-size: 17px; line-height: 24px; font-weight: 600;
  transition: transform var(--pa-fast) var(--pa-ease), background-color var(--pa-fast) var(--pa-ease), box-shadow var(--pa-fast) var(--pa-ease);
}
.pa-btn:active { transform: scale(.98); }
.pa-btn:focus-visible { outline: 2px solid var(--steel-deep, #4c6c88); outline-offset: 2px; }
.pa-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.pa-btn--primary { background: var(--navy, #1e2e56); color: var(--surface, #ffffff); }
.pa-btn--primary:active { background: var(--midnight, #121c38); }
.pa-btn--action { background: var(--brass, #c9a13f); color: var(--midnight, #121c38); }
.pa-btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px rgba(30, 46, 86, .3); }
.pa-btn--ghost:hover { background: rgba(30, 46, 86, .05); }
.pa-btn--trail { padding: 8px 8px 8px 24px; }
.pa-btn__ico { width: 36px; height: 36px; flex: none; border-radius: 999px; background: rgba(255, 255, 255, .14); display: inline-flex; align-items: center; justify-content: center; transition: transform var(--pa-base) var(--pa-ease); }
.pa-btn--action .pa-btn__ico, .pa-btn--ghost .pa-btn__ico { background: rgba(18, 28, 56, .1); }
.pa-btn:hover .pa-btn__ico { transform: translate(2px, -1px) scale(1.06); }
.pa-btn--round { width: 44px; height: 44px; padding: 0; }
.pa-on-dark .pa-btn--ghost { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.pa-on-dark .pa-btn--ghost:hover { background: rgba(255, 255, 255, .08); }
.pa-on-dark :focus-visible { outline-color: var(--sky, #a9c1d8) !important; }

/* ---------- KPI tile ---------- */
.pa-kpi__label { margin: 0; font-size: 14px; line-height: 20px; color: var(--slate, #4d586e); }
.pa-kpi__value { margin: 6px 0 0; font-size: 32px; line-height: 36px; color: var(--navy, #1e2e56); }
.pa-kpi__value--hero { font-size: 50px; line-height: 53px; letter-spacing: -.022em; }
.pa-kpi__meta { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--slate, #4d586e); }
.pa-meter { height: 8px; margin-top: 20px; border-radius: 999px; background: var(--mist, #edf2f6); overflow: hidden; }
.pa-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--steel-deep, #4c6c88); transform-origin: left center; transform: scaleX(var(--v, 0)); transition: transform var(--pa-slow) var(--pa-ease); }
.pa-meter--good > span { background: var(--spruce, #46663a); }
.pa-bump { display: inline-block; animation: pa-bump .6s var(--pa-spring); }

/* ---------- Job card, colored by phase ---------- */
.pa-job {
  --pa-bg: var(--surface, #ffffff); --pa-fg: var(--ink, #141c33); --pa-sub: var(--slate, #4d586e); --pa-ring: var(--line, #d5dbe3); --pa-chip: var(--steel-deep, #4c6c88);
  display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; width: 100%;
  padding: 18px 18px 16px; border: 0; border-radius: 16px; text-align: left; cursor: pointer;
  background: var(--pa-bg); color: var(--pa-fg);
  box-shadow: inset 0 0 0 1px var(--pa-ring), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: transform var(--pa-base) var(--pa-ease), box-shadow var(--pa-base) var(--pa-ease);
}
.pa-job:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--pa-ring), var(--pa-shadow-lift); }
.pa-job:active { transform: scale(.98); }
.pa-job:focus-visible { outline: 2px solid var(--steel-deep, #4c6c88); outline-offset: 2px; }
.pa-board .pa-job { cursor: grab; }
.pa-job[data-phase="sold"], .pa-panel[data-phase="sold"] { --pa-bg: var(--sky, #a9c1d8); --pa-fg: var(--midnight, #121c38); --pa-sub: var(--navy, #1e2e56); --pa-ring: rgba(18, 28, 56, .1); --pa-chip: var(--navy, #1e2e56); }
.pa-job[data-phase="permit"], .pa-panel[data-phase="permit"] { --pa-bg: var(--steel-deep, #4c6c88); --pa-fg: #ffffff; --pa-sub: rgba(255, 255, 255, .88); --pa-ring: rgba(255, 255, 255, .1); --pa-chip: var(--navy, #1e2e56); }
.pa-job[data-phase="materials"], .pa-panel[data-phase="materials"] { --pa-bg: var(--sprout, #e8f0e1); --pa-fg: var(--ink, #141c33); --pa-sub: var(--spruce, #46663a); --pa-ring: rgba(70, 102, 58, .18); --pa-chip: var(--spruce, #46663a); }
.pa-job[data-phase="install"], .pa-panel[data-phase="install"] { --pa-bg: var(--navy, #1e2e56); --pa-fg: #ffffff; --pa-sub: var(--sky, #a9c1d8); --pa-ring: rgba(169, 193, 216, .14); --pa-chip: var(--steel-deep, #4c6c88); }
.pa-job[data-phase="inspection"], .pa-panel[data-phase="inspection"] { --pa-bg: var(--spruce, #46663a); --pa-fg: #ffffff; --pa-sub: rgba(255, 255, 255, .88); --pa-ring: rgba(255, 255, 255, .1); --pa-chip: var(--navy, #1e2e56); }
.pa-job[data-phase="closeout"], .pa-panel[data-phase="closeout"] { --pa-bg: var(--surface, #ffffff); --pa-fg: var(--ink, #141c33); --pa-sub: var(--slate, #4d586e); --pa-ring: var(--line, #d5dbe3); --pa-chip: var(--steel-deep, #4c6c88); }
.pa-job[data-phase="permit"]:focus-visible, .pa-job[data-phase="install"]:focus-visible, .pa-job[data-phase="inspection"]:focus-visible { outline-color: var(--navy, #1e2e56); }
.pa-job__top { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; line-height: 20px; color: var(--pa-sub); }
.pa-job__top > :last-child { text-align: right; }
.pa-job__title { margin-top: 6px; font-family: var(--font-display, "Archivo Wide", "Archivo", sans-serif); font-size: 20px; line-height: 25px; font-weight: 700; letter-spacing: -.01em; }
.pa-job__scope { font-size: 16px; line-height: 22px; color: var(--pa-sub); }
.pa-job__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 14px; }
.pa-job__amount { display: block; font-family: var(--font-display, "Archivo Wide", "Archivo", sans-serif); font-size: 26px; line-height: 30px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pa-job__meta { display: block; font-size: 14px; line-height: 20px; color: var(--pa-sub); }
.pa-crew { display: flex; padding-left: 6px; }
.pa-crew > span { width: 30px; height: 30px; margin-left: -6px; border-radius: 10px; background: var(--pa-chip); color: #ffffff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--pa-bg); }
.pa-dot { width: 12px; height: 12px; flex: none; border-radius: 4px; background: var(--line, #d5dbe3); box-shadow: inset 0 0 0 1px rgba(18, 28, 56, .12); }
.pa-dot[data-phase="sold"] { background: var(--sky, #a9c1d8); }
.pa-dot[data-phase="permit"] { background: var(--steel-deep, #4c6c88); }
.pa-dot[data-phase="materials"] { background: var(--sprout, #e8f0e1); box-shadow: inset 0 0 0 1px rgba(70, 102, 58, .4); }
.pa-dot[data-phase="install"] { background: var(--navy, #1e2e56); }
.pa-dot[data-phase="inspection"] { background: var(--spruce, #46663a); }
.pa-dot[data-phase="closeout"] { background: var(--surface, #ffffff); box-shadow: inset 0 0 0 1px var(--line, #d5dbe3); }

/* ---------- Board: columns you drag cards between ---------- */
.pa-board { display: flex; gap: 16px; overflow-x: auto; align-items: flex-start; padding: 8px 4px 24px; }
.pa-col {
  position: relative; flex: 0 0 292px; min-height: 200px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: var(--radius-lg, 24px);
  background: rgba(30, 46, 86, .045); box-shadow: inset 0 0 0 1px rgba(30, 46, 86, .06);
  transition: background-color var(--pa-fast) var(--pa-ease), box-shadow var(--pa-fast) var(--pa-ease);
}
.pa-col.is-over { background: rgba(76, 108, 136, .12); box-shadow: inset 0 0 0 2px rgba(76, 108, 136, .6); }
.pa-col__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 2px; }
.pa-col__name { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink, #141c33); }
.pa-col__count { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--slate, #4d586e); font-variant-numeric: tabular-nums; }
.pa-col__total { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--navy, #1e2e56); font-variant-numeric: tabular-nums; }
.pa-list { position: relative; display: flex; flex-direction: column; gap: 12px; }
.pa-col__empty { margin: 0; padding: 24px 12px; text-align: center; font-size: 14px; line-height: 20px; color: var(--slate, #4d586e); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line, #d5dbe3); }
.pa-list:has([data-pa-card]) .pa-col__empty, .pa-list:has(.pa-slot) .pa-col__empty { display: none; }
.pa-slot { flex: none; box-sizing: border-box; border-radius: 16px; background: rgba(76, 108, 136, .08); border: 2px dashed rgba(76, 108, 136, .55); animation: pa-fade .3s var(--pa-ease) both; }
.pa-ghost { position: fixed; left: 0; top: 0; z-index: 1000; margin: 0; pointer-events: none; will-change: transform; }
.pa-lifted { transform-origin: 30% 20%; animation: pa-lift .35s var(--pa-spring) forwards; box-shadow: inset 0 0 0 1px var(--pa-ring, transparent), var(--pa-shadow-float) !important; }
.pa-dragging, .pa-dragging * { user-select: none; -webkit-user-select: none; cursor: grabbing !important; }
.pa-dock {
  position: fixed; left: 0; right: 0; bottom: 24px; z-index: 999; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 0 16px; pointer-events: none;
  opacity: 0; transform: translateY(48px); transition: opacity var(--pa-fast) var(--pa-ease), transform var(--pa-base) var(--pa-spring);
}
.pa-dock.is-open { opacity: 1; transform: none; }
.pa-dock.is-open .pa-zone { pointer-events: auto; }
.pa-zone {
  min-width: 248px; box-sizing: border-box; display: flex; align-items: center; gap: 14px; padding: 14px 20px 14px 14px; border-radius: 22px;
  background: rgba(255, 255, 255, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--line, #d5dbe3), 0 24px 48px -24px rgba(18, 28, 56, .5);
  transition: transform .35s var(--pa-ease), box-shadow .35s var(--pa-ease);
}
.pa-zone.is-over { transform: scale(1.05); box-shadow: inset 0 0 0 2px var(--steel-deep, #4c6c88), 0 24px 48px -24px rgba(18, 28, 56, .5); }
.pa-zone[data-tone="danger"].is-over { box-shadow: inset 0 0 0 2px var(--brick, #b23a32), 0 24px 48px -24px rgba(18, 28, 56, .5); }
.pa-zone__ico { width: 40px; height: 40px; flex: none; border-radius: 14px; background: var(--steel-deep, #4c6c88); color: #ffffff; display: flex; align-items: center; justify-content: center; }
.pa-zone[data-tone="danger"] .pa-zone__ico { background: var(--brick, #b23a32); }
.pa-zone__name { display: block; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink, #141c33); }
.pa-zone__hint { display: block; font-size: 14px; line-height: 20px; color: var(--slate, #4d586e); }
.pa-arrive { animation: pa-arrive .9s var(--pa-spring) both; }

/* ---------- Morph panel: a card that grows into a panel ---------- */
.pa-scrim { position: fixed; inset: 0; z-index: 900; background: rgba(18, 28, 56, .38); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: opacity .45s var(--pa-ease); }
.pa-scrim.is-open { opacity: 1; pointer-events: auto; }
.pa-panel {
  --pa-bg: var(--surface, #ffffff); --pa-fg: var(--ink, #141c33);
  position: fixed; z-index: 901; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box;
  padding: var(--space-8, 32px); border-radius: 28px; background: var(--pa-bg); color: var(--pa-fg);
  box-shadow: inset 0 0 0 1px rgba(18, 28, 56, .08), var(--pa-shadow-panel);
}
.pa-panel[hidden] { display: none; }
.pa-panel { --pa-sub: var(--slate, #4d586e); transition: background-color var(--pa-base) var(--pa-ease), color var(--pa-base) var(--pa-ease); }
.pa-panel__sub { color: var(--pa-sub); }
.pa-stagger.is-in > * { animation: pa-in .6s var(--pa-ease) both; animation-delay: calc(140ms + var(--i, 0) * 50ms); }

/* ---------- Drawer: a side panel, like an invoice preview ---------- */
.pa-drawer {
  position: fixed; top: 12px; right: 12px; bottom: 12px; z-index: 901; width: min(480px, calc(100vw - 24px)); box-sizing: border-box;
  overflow: auto; padding: var(--space-8, 32px); border-radius: var(--radius-lg, 24px); background: var(--surface, #ffffff); color: var(--ink, #141c33);
  box-shadow: inset 0 0 0 1px var(--line, #d5dbe3), var(--pa-shadow-panel);
  transform: translateX(calc(100% + 24px)); visibility: hidden; transition: transform var(--pa-base) var(--pa-ease), visibility 0s var(--pa-base);
}
.pa-drawer.is-open { transform: none; visibility: visible; transition: transform var(--pa-base) var(--pa-ease), visibility 0s 0s; }

/* ---------- Toast with Undo ---------- */
.pa-toasts { position: fixed; left: 0; right: 0; bottom: 24px; z-index: 1001; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
.pa-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 22px; border-radius: 999px;
  background: var(--midnight, #121c38); color: #ffffff; font-family: var(--font-sans, "Archivo", system-ui, sans-serif); font-size: 16px; line-height: 24px; font-weight: 600;
  box-shadow: 0 18px 40px -18px rgba(18, 28, 56, .7); animation: pa-in .5s var(--pa-spring) both;
  transition: opacity var(--pa-fast) var(--pa-ease), transform var(--pa-fast) var(--pa-ease);
}
.pa-toast--plain { padding-right: 22px; }
.pa-toast > span { padding: 6px 0; }
.pa-toast.is-leaving { opacity: 0; transform: translateY(12px); }
.pa-toast__undo { border: 0; border-radius: 999px; padding: 6px 16px; background: rgba(169, 193, 216, .18); color: #ffffff; font: inherit; cursor: pointer; }
.pa-toast__undo:focus-visible { outline: 2px solid var(--sky, #a9c1d8); outline-offset: 2px; }

/* ---------- Reveal: children enter one after another ---------- */
.pa-reveal > * { opacity: 0; transform: translateY(18px); }
.pa-reveal.is-in > * { opacity: 1; transform: none; transition: opacity var(--pa-slow) var(--pa-ease), transform var(--pa-slow) var(--pa-ease); transition-delay: calc(var(--i, 0) * 60ms); }

/* ---------- Keyframes ---------- */
@keyframes pa-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pa-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pa-bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes pa-lift { from { transform: rotate(0deg) scale(1); } to { transform: rotate(2.5deg) scale(1.04); } }
@keyframes pa-arrive { 0% { transform: scale(.92); box-shadow: 0 0 0 0 rgba(201, 161, 63, 0); } 55% { transform: scale(1.03); box-shadow: 0 0 0 6px rgba(201, 161, 63, .5); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201, 161, 63, 0); } }

@media (prefers-reduced-motion: reduce) {
  [class*="pa-"], [class*="pa-"]::before { animation: none !important; transition: none !important; }
  .pa-reveal > * { opacity: 1; transform: none; }
}