/* PRIMEONE-TOKENS-START */
/* ============================================================================
   PrimeOne v4 — Aura Preset Design Tokens
   ----------------------------------------------------------------------------
   Source: @primeuix/themes/aura (verified against
   github.com/primefaces/primeuix/blob/main/packages/themes/src/presets/aura/base/index.ts)

   Use these CSS variables for ALL color, surface, form-field, content,
   border-radius, focus-ring, and overlay decisions in any HTML/CSS/JSX you
   generate. NEVER hardcode hex/rgb/named colors when there is a token here.

   To enable dark mode: add `class="p-dark"` to the <html> or container element.
============================================================================ */

:root {
  /* ============== PRIMITIVE: BORDER RADIUS ============== */
  --p-border-radius-none: 0;
  --p-border-radius-xs: 2px;
  --p-border-radius-sm: 4px;
  --p-border-radius-md: 6px;
  --p-border-radius-lg: 8px;
  --p-border-radius-xl: 12px;

  /* ============== PRIMITIVE: COLOR PALETTES ============== */
  /* Emerald (default primary in Aura) */
  --p-emerald-50:  #ecfdf5;
  --p-emerald-100: #d1fae5;
  --p-emerald-200: #a7f3d0;
  --p-emerald-300: #6ee7b7;
  --p-emerald-400: #34d399;
  --p-emerald-500: #10b981;
  --p-emerald-600: #059669;
  --p-emerald-700: #047857;
  --p-emerald-800: #065f46;
  --p-emerald-900: #064e3b;
  --p-emerald-950: #022c22;

  /* Green */
  --p-green-50:  #f0fdf4;
  --p-green-100: #dcfce7;
  --p-green-200: #bbf7d0;
  --p-green-300: #86efac;
  --p-green-400: #4ade80;
  --p-green-500: #22c55e;
  --p-green-600: #16a34a;
  --p-green-700: #15803d;
  --p-green-800: #166534;
  --p-green-900: #14532d;
  --p-green-950: #052e16;

  /* Lime */
  --p-lime-50:  #f7fee7;
  --p-lime-100: #ecfccb;
  --p-lime-200: #d9f99d;
  --p-lime-300: #bef264;
  --p-lime-400: #a3e635;
  --p-lime-500: #84cc16;
  --p-lime-600: #65a30d;
  --p-lime-700: #4d7c0f;
  --p-lime-800: #3f6212;
  --p-lime-900: #365314;
  --p-lime-950: #1a2e05;

  /* Red */
  --p-red-50:  #fef2f2;
  --p-red-100: #fee2e2;
  --p-red-200: #fecaca;
  --p-red-300: #fca5a5;
  --p-red-400: #f87171;
  --p-red-500: #ef4444;
  --p-red-600: #dc2626;
  --p-red-700: #b91c1c;
  --p-red-800: #991b1b;
  --p-red-900: #7f1d1d;
  --p-red-950: #450a0a;

  /* Orange */
  --p-orange-50:  #fff7ed;
  --p-orange-100: #ffedd5;
  --p-orange-200: #fed7aa;
  --p-orange-300: #fdba74;
  --p-orange-400: #fb923c;
  --p-orange-500: #f97316;
  --p-orange-600: #ea580c;
  --p-orange-700: #c2410c;
  --p-orange-800: #9a3412;
  --p-orange-900: #7c2d12;
  --p-orange-950: #431407;

  /* Amber */
  --p-amber-50:  #fffbeb;
  --p-amber-100: #fef3c7;
  --p-amber-200: #fde68a;
  --p-amber-300: #fcd34d;
  --p-amber-400: #fbbf24;
  --p-amber-500: #f59e0b;
  --p-amber-600: #d97706;
  --p-amber-700: #b45309;
  --p-amber-800: #92400e;
  --p-amber-900: #78350f;
  --p-amber-950: #451a03;

  /* Yellow */
  --p-yellow-50:  #fefce8;
  --p-yellow-100: #fef9c3;
  --p-yellow-200: #fef08a;
  --p-yellow-300: #fde047;
  --p-yellow-400: #facc15;
  --p-yellow-500: #eab308;
  --p-yellow-600: #ca8a04;
  --p-yellow-700: #a16207;
  --p-yellow-800: #854d0e;
  --p-yellow-900: #713f12;
  --p-yellow-950: #422006;

  /* Teal */
  --p-teal-50:  #f0fdfa;
  --p-teal-100: #ccfbf1;
  --p-teal-200: #99f6e4;
  --p-teal-300: #5eead4;
  --p-teal-400: #2dd4bf;
  --p-teal-500: #14b8a6;
  --p-teal-600: #0d9488;
  --p-teal-700: #0f766e;
  --p-teal-800: #115e59;
  --p-teal-900: #134e4a;
  --p-teal-950: #042f2e;

  /* Cyan */
  --p-cyan-50:  #ecfeff;
  --p-cyan-100: #cffafe;
  --p-cyan-200: #a5f3fc;
  --p-cyan-300: #67e8f9;
  --p-cyan-400: #22d3ee;
  --p-cyan-500: #06b6d4;
  --p-cyan-600: #0891b2;
  --p-cyan-700: #0e7490;
  --p-cyan-800: #155e75;
  --p-cyan-900: #164e63;
  --p-cyan-950: #083344;

  /* Sky */
  --p-sky-50:  #f0f9ff;
  --p-sky-100: #e0f2fe;
  --p-sky-200: #bae6fd;
  --p-sky-300: #7dd3fc;
  --p-sky-400: #38bdf8;
  --p-sky-500: #0ea5e9;
  --p-sky-600: #0284c7;
  --p-sky-700: #0369a1;
  --p-sky-800: #075985;
  --p-sky-900: #0c4a6e;
  --p-sky-950: #082f49;

  /* Blue */
  --p-blue-50:  #eff6ff;
  --p-blue-100: #dbeafe;
  --p-blue-200: #bfdbfe;
  --p-blue-300: #93c5fd;
  --p-blue-400: #60a5fa;
  --p-blue-500: #3b82f6;
  --p-blue-600: #2563eb;
  --p-blue-700: #1d4ed8;
  --p-blue-800: #1e40af;
  --p-blue-900: #1e3a8a;
  --p-blue-950: #172554;

  /* Indigo */
  --p-indigo-50:  #eef2ff;
  --p-indigo-100: #e0e7ff;
  --p-indigo-200: #c7d2fe;
  --p-indigo-300: #a5b4fc;
  --p-indigo-400: #818cf8;
  --p-indigo-500: #6366f1;
  --p-indigo-600: #4f46e5;
  --p-indigo-700: #4338ca;
  --p-indigo-800: #3730a3;
  --p-indigo-900: #312e81;
  --p-indigo-950: #1e1b4b;

  /* Violet */
  --p-violet-50:  #f5f3ff;
  --p-violet-100: #ede9fe;
  --p-violet-200: #ddd6fe;
  --p-violet-300: #c4b5fd;
  --p-violet-400: #a78bfa;
  --p-violet-500: #8b5cf6;
  --p-violet-600: #7c3aed;
  --p-violet-700: #6d28d9;
  --p-violet-800: #5b21b6;
  --p-violet-900: #4c1d95;
  --p-violet-950: #2e1065;

  /* Purple */
  --p-purple-50:  #faf5ff;
  --p-purple-100: #f3e8ff;
  --p-purple-200: #e9d5ff;
  --p-purple-300: #d8b4fe;
  --p-purple-400: #c084fc;
  --p-purple-500: #a855f7;
  --p-purple-600: #9333ea;
  --p-purple-700: #7e22ce;
  --p-purple-800: #6b21a8;
  --p-purple-900: #581c87;
  --p-purple-950: #3b0764;

  /* Fuchsia */
  --p-fuchsia-50:  #fdf4ff;
  --p-fuchsia-100: #fae8ff;
  --p-fuchsia-200: #f5d0fe;
  --p-fuchsia-300: #f0abfc;
  --p-fuchsia-400: #e879f9;
  --p-fuchsia-500: #d946ef;
  --p-fuchsia-600: #c026d3;
  --p-fuchsia-700: #a21caf;
  --p-fuchsia-800: #86198f;
  --p-fuchsia-900: #701a75;
  --p-fuchsia-950: #4a044e;

  /* Pink */
  --p-pink-50:  #fdf2f8;
  --p-pink-100: #fce7f3;
  --p-pink-200: #fbcfe8;
  --p-pink-300: #f9a8d4;
  --p-pink-400: #f472b6;
  --p-pink-500: #ec4899;
  --p-pink-600: #db2777;
  --p-pink-700: #be185d;
  --p-pink-800: #9d174d;
  --p-pink-900: #831843;
  --p-pink-950: #500724;

  /* Rose */
  --p-rose-50:  #fff1f2;
  --p-rose-100: #ffe4e6;
  --p-rose-200: #fecdd3;
  --p-rose-300: #fda4af;
  --p-rose-400: #fb7185;
  --p-rose-500: #f43f5e;
  --p-rose-600: #e11d48;
  --p-rose-700: #be123c;
  --p-rose-800: #9f1239;
  --p-rose-900: #881337;
  --p-rose-950: #4c0519;

  /* Slate (default surface in Aura light) */
  --p-slate-50:  #f8fafc;
  --p-slate-100: #f1f5f9;
  --p-slate-200: #e2e8f0;
  --p-slate-300: #cbd5e1;
  --p-slate-400: #94a3b8;
  --p-slate-500: #64748b;
  --p-slate-600: #475569;
  --p-slate-700: #334155;
  --p-slate-800: #1e293b;
  --p-slate-900: #0f172a;
  --p-slate-950: #020617;

  /* Gray */
  --p-gray-50:  #f9fafb;
  --p-gray-100: #f3f4f6;
  --p-gray-200: #e5e7eb;
  --p-gray-300: #d1d5db;
  --p-gray-400: #9ca3af;
  --p-gray-500: #6b7280;
  --p-gray-600: #4b5563;
  --p-gray-700: #374151;
  --p-gray-800: #1f2937;
  --p-gray-900: #111827;
  --p-gray-950: #030712;

  /* Zinc (default surface in Aura dark) */
  --p-zinc-50:  #fafafa;
  --p-zinc-100: #f4f4f5;
  --p-zinc-200: #e4e4e7;
  --p-zinc-300: #d4d4d8;
  --p-zinc-400: #a1a1aa;
  --p-zinc-500: #71717a;
  --p-zinc-600: #52525b;
  --p-zinc-700: #3f3f46;
  --p-zinc-800: #27272a;
  --p-zinc-900: #18181b;
  --p-zinc-950: #09090b;

  /* Neutral */
  --p-neutral-50:  #fafafa;
  --p-neutral-100: #f5f5f5;
  --p-neutral-200: #e5e5e5;
  --p-neutral-300: #d4d4d4;
  --p-neutral-400: #a3a3a3;
  --p-neutral-500: #737373;
  --p-neutral-600: #525252;
  --p-neutral-700: #404040;
  --p-neutral-800: #262626;
  --p-neutral-900: #171717;
  --p-neutral-950: #0a0a0a;

  /* Stone */
  --p-stone-50:  #fafaf9;
  --p-stone-100: #f5f5f4;
  --p-stone-200: #e7e5e4;
  --p-stone-300: #d6d3d1;
  --p-stone-400: #a8a29e;
  --p-stone-500: #78716c;
  --p-stone-600: #57534e;
  --p-stone-700: #44403c;
  --p-stone-800: #292524;
  --p-stone-900: #1c1917;
  --p-stone-950: #0c0a09;

  /* ============== SEMANTIC: GLOBAL ============== */
  --p-transition-duration: 0.2s;
  --p-disabled-opacity: 0.6;
  --p-icon-size: 1rem;
  --p-anchor-gutter: 2px;

  --p-focus-ring-width: 1px;
  --p-focus-ring-style: solid;
  --p-focus-ring-color: var(--p-primary-color);
  --p-focus-ring-offset: 2px;
  --p-focus-ring-shadow: none;

  /* Primary palette = Emerald by default. Override here to rebrand. */
  --p-primary-50:  var(--p-emerald-50);
  --p-primary-100: var(--p-emerald-100);
  --p-primary-200: var(--p-emerald-200);
  --p-primary-300: var(--p-emerald-300);
  --p-primary-400: var(--p-emerald-400);
  --p-primary-500: var(--p-emerald-500);
  --p-primary-600: var(--p-emerald-600);
  --p-primary-700: var(--p-emerald-700);
  --p-primary-800: var(--p-emerald-800);
  --p-primary-900: var(--p-emerald-900);
  --p-primary-950: var(--p-emerald-950);

  /* Form field global */
  --p-form-field-padding-x: 0.75rem;
  --p-form-field-padding-y: 0.5rem;
  --p-form-field-sm-font-size: 0.875rem;
  --p-form-field-sm-padding-x: 0.625rem;
  --p-form-field-sm-padding-y: 0.375rem;
  --p-form-field-lg-font-size: 1.125rem;
  --p-form-field-lg-padding-x: 0.875rem;
  --p-form-field-lg-padding-y: 0.625rem;
  --p-form-field-border-radius: var(--p-border-radius-md);
  --p-form-field-transition-duration: var(--p-transition-duration);

  /* List */
  --p-list-padding: 0.25rem 0.25rem;
  --p-list-gap: 2px;
  --p-list-header-padding: 0.5rem 1rem 0.25rem 1rem;
  --p-list-option-padding: 0.5rem 0.75rem;
  --p-list-option-border-radius: var(--p-border-radius-sm);
  --p-list-option-group-padding: 0.5rem 0.75rem;
  --p-list-option-group-font-weight: 600;

  /* Content */
  --p-content-border-radius: var(--p-border-radius-md);

  /* Mask */
  --p-mask-transition-duration: 0.3s;

  /* Navigation */
  --p-navigation-list-padding: 0.25rem 0.25rem;
  --p-navigation-list-gap: 2px;
  --p-navigation-item-padding: 0.5rem 0.75rem;
  --p-navigation-item-border-radius: var(--p-border-radius-sm);
  --p-navigation-item-gap: 0.5rem;
  --p-navigation-submenu-label-padding: 0.5rem 0.75rem;
  --p-navigation-submenu-label-font-weight: 600;
  --p-navigation-submenu-icon-size: 0.875rem;

  /* Overlay */
  --p-overlay-select-border-radius: var(--p-border-radius-md);
  --p-overlay-select-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --p-overlay-popover-border-radius: var(--p-border-radius-md);
  --p-overlay-popover-padding: 0.75rem;
  --p-overlay-popover-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --p-overlay-modal-border-radius: var(--p-border-radius-xl);
  --p-overlay-modal-padding: 1.25rem;
  --p-overlay-modal-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --p-overlay-navigation-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);

  /* Typography (PrimeVue inherits from app — set your stack here) */
  --p-font-family: 'Inter var', 'Inter', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* ============== SEMANTIC: LIGHT COLOR SCHEME ============== */
  /* Surface = slate */
  --p-surface-0:   #ffffff;
  --p-surface-50:  var(--p-slate-50);
  --p-surface-100: var(--p-slate-100);
  --p-surface-200: var(--p-slate-200);
  --p-surface-300: var(--p-slate-300);
  --p-surface-400: var(--p-slate-400);
  --p-surface-500: var(--p-slate-500);
  --p-surface-600: var(--p-slate-600);
  --p-surface-700: var(--p-slate-700);
  --p-surface-800: var(--p-slate-800);
  --p-surface-900: var(--p-slate-900);
  --p-surface-950: var(--p-slate-950);

  --p-primary-color: var(--p-primary-500);
  --p-primary-contrast-color: #ffffff;
  --p-primary-hover-color: var(--p-primary-600);
  --p-primary-active-color: var(--p-primary-700);

  --p-highlight-background: var(--p-primary-50);
  --p-highlight-focus-background: var(--p-primary-100);
  --p-highlight-color: var(--p-primary-700);
  --p-highlight-focus-color: var(--p-primary-800);

  --p-mask-background: rgba(0, 0, 0, 0.4);
  --p-mask-color: var(--p-surface-200);

  /* Text */
  --p-text-color: var(--p-surface-700);
  --p-text-hover-color: var(--p-surface-800);
  --p-text-muted-color: var(--p-surface-500);
  --p-text-hover-muted-color: var(--p-surface-600);

  /* Form field */
  --p-form-field-background: var(--p-surface-0);
  --p-form-field-disabled-background: var(--p-surface-200);
  --p-form-field-filled-background: var(--p-surface-50);
  --p-form-field-filled-hover-background: var(--p-surface-50);
  --p-form-field-filled-focus-background: var(--p-surface-50);
  --p-form-field-border-color: var(--p-surface-300);
  --p-form-field-hover-border-color: var(--p-surface-400);
  --p-form-field-focus-border-color: var(--p-primary-color);
  --p-form-field-invalid-border-color: var(--p-red-400);
  --p-form-field-color: var(--p-surface-700);
  --p-form-field-disabled-color: var(--p-surface-500);
  --p-form-field-placeholder-color: var(--p-surface-500);
  --p-form-field-invalid-placeholder-color: var(--p-red-600);
  --p-form-field-icon-color: var(--p-surface-400);
  --p-form-field-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);

  /* Content */
  --p-content-background: var(--p-surface-0);
  --p-content-hover-background: var(--p-surface-100);
  --p-content-border-color: var(--p-surface-200);
  --p-content-color: var(--p-text-color);
  --p-content-hover-color: var(--p-text-hover-color);

  /* Overlay */
  --p-overlay-select-background: var(--p-surface-0);
  --p-overlay-select-border-color: var(--p-surface-200);
  --p-overlay-select-color: var(--p-text-color);
  --p-overlay-popover-background: var(--p-surface-0);
  --p-overlay-popover-border-color: var(--p-surface-200);
  --p-overlay-popover-color: var(--p-text-color);
  --p-overlay-modal-background: var(--p-surface-0);
  --p-overlay-modal-border-color: var(--p-surface-200);
  --p-overlay-modal-color: var(--p-text-color);

  /* List */
  --p-list-option-focus-background: var(--p-surface-100);
  --p-list-option-selected-background: var(--p-highlight-background);
  --p-list-option-selected-focus-background: var(--p-highlight-focus-background);
  --p-list-option-color: var(--p-text-color);
  --p-list-option-focus-color: var(--p-text-hover-color);
  --p-list-option-selected-color: var(--p-highlight-color);
  --p-list-option-selected-focus-color: var(--p-highlight-focus-color);
  --p-list-option-icon-color: var(--p-surface-400);
  --p-list-option-icon-focus-color: var(--p-surface-500);

  /* Navigation */
  --p-navigation-item-focus-background: var(--p-surface-100);
  --p-navigation-item-active-background: var(--p-surface-100);
  --p-navigation-item-color: var(--p-text-color);
  --p-navigation-item-focus-color: var(--p-text-hover-color);
  --p-navigation-item-active-color: var(--p-text-hover-color);
  --p-navigation-item-icon-color: var(--p-surface-400);
  --p-navigation-item-icon-focus-color: var(--p-surface-500);
  --p-navigation-item-icon-active-color: var(--p-surface-500);
  --p-navigation-submenu-icon-color: var(--p-surface-400);
  --p-navigation-submenu-icon-focus-color: var(--p-surface-500);
  --p-navigation-submenu-icon-active-color: var(--p-surface-500);
}

/* ============== SEMANTIC: DARK COLOR SCHEME ============== */
/* Apply with `class="p-dark"` on <html> or container */
.p-dark {
  /* Surface = zinc */
  --p-surface-0:   #ffffff;
  --p-surface-50:  var(--p-zinc-50);
  --p-surface-100: var(--p-zinc-100);
  --p-surface-200: var(--p-zinc-200);
  --p-surface-300: var(--p-zinc-300);
  --p-surface-400: var(--p-zinc-400);
  --p-surface-500: var(--p-zinc-500);
  --p-surface-600: var(--p-zinc-600);
  --p-surface-700: var(--p-zinc-700);
  --p-surface-800: var(--p-zinc-800);
  --p-surface-900: var(--p-zinc-900);
  --p-surface-950: var(--p-zinc-950);

  --p-primary-color: var(--p-primary-400);
  --p-primary-contrast-color: var(--p-surface-900);
  --p-primary-hover-color: var(--p-primary-300);
  --p-primary-active-color: var(--p-primary-200);

  --p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%);
  --p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%);
  --p-highlight-color: rgba(255, 255, 255, 0.87);
  --p-highlight-focus-color: rgba(255, 255, 255, 0.87);

  --p-mask-background: rgba(0, 0, 0, 0.6);
  --p-mask-color: var(--p-surface-200);

  --p-text-color: var(--p-surface-0);
  --p-text-hover-color: var(--p-surface-0);
  --p-text-muted-color: var(--p-surface-400);
  --p-text-hover-muted-color: var(--p-surface-300);

  --p-form-field-background: var(--p-surface-950);
  --p-form-field-disabled-background: var(--p-surface-700);
  --p-form-field-filled-background: var(--p-surface-800);
  --p-form-field-filled-hover-background: var(--p-surface-800);
  --p-form-field-filled-focus-background: var(--p-surface-800);
  --p-form-field-border-color: var(--p-surface-600);
  --p-form-field-hover-border-color: var(--p-surface-500);
  --p-form-field-focus-border-color: var(--p-primary-color);
  --p-form-field-invalid-border-color: var(--p-red-300);
  --p-form-field-color: var(--p-surface-0);
  --p-form-field-disabled-color: var(--p-surface-400);
  --p-form-field-placeholder-color: var(--p-surface-400);
  --p-form-field-invalid-placeholder-color: var(--p-red-400);
  --p-form-field-icon-color: var(--p-surface-400);

  --p-content-background: var(--p-surface-900);
  --p-content-hover-background: var(--p-surface-800);
  --p-content-border-color: var(--p-surface-700);

  --p-overlay-select-background: var(--p-surface-900);
  --p-overlay-select-border-color: var(--p-surface-700);
  --p-overlay-popover-background: var(--p-surface-900);
  --p-overlay-popover-border-color: var(--p-surface-700);
  --p-overlay-modal-background: var(--p-surface-900);
  --p-overlay-modal-border-color: var(--p-surface-700);

  --p-list-option-focus-background: var(--p-surface-800);
  --p-list-option-icon-color: var(--p-surface-500);
  --p-list-option-icon-focus-color: var(--p-surface-400);

  --p-navigation-item-focus-background: var(--p-surface-800);
  --p-navigation-item-active-background: var(--p-surface-800);
  --p-navigation-item-icon-color: var(--p-surface-500);
  --p-navigation-item-icon-focus-color: var(--p-surface-400);
  --p-navigation-item-icon-active-color: var(--p-surface-400);
  --p-navigation-submenu-icon-color: var(--p-surface-500);
  --p-navigation-submenu-icon-focus-color: var(--p-surface-400);
  --p-navigation-submenu-icon-active-color: var(--p-surface-400);
}

/* ============== BASE: minimal component shells ============== */
/* Just enough so that prototypes look right without pulling in the full
   PrimeVue CSS bundle. Real apps should use the actual PrimeVue components. */

body {
  font-family: var(--p-font-family);
  color: var(--p-text-color);
  background: var(--p-content-background);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.p-component { font-family: var(--p-font-family); font-size: 1rem; font-weight: 400; }

/* Button */
.p-button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; cursor: pointer; user-select: none;
  padding: var(--p-form-field-padding-y) var(--p-form-field-padding-x);
  font-size: 1rem; font-weight: 500;
  background: var(--p-primary-color);
  color: var(--p-primary-contrast-color);
  border: 1px solid var(--p-primary-color);
  border-radius: var(--p-border-radius-md);
  transition: background var(--p-transition-duration),
              color var(--p-transition-duration),
              border-color var(--p-transition-duration);
}
.p-button:hover { background: var(--p-primary-hover-color); border-color: var(--p-primary-hover-color); }
.p-button:active { background: var(--p-primary-active-color); border-color: var(--p-primary-active-color); }
.p-button:focus-visible {
  outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
  outline-offset: var(--p-focus-ring-offset);
}
.p-button.p-button-secondary { background: var(--p-surface-100); color: var(--p-surface-700); border-color: var(--p-surface-100); }
.p-button.p-button-secondary:hover { background: var(--p-surface-200); border-color: var(--p-surface-200); }
.p-button.p-button-outlined { background: transparent; color: var(--p-primary-color); border-color: var(--p-primary-color); }
.p-button.p-button-outlined:hover { background: var(--p-primary-50); }
.p-button.p-button-text { background: transparent; color: var(--p-primary-color); border-color: transparent; }
.p-button.p-button-text:hover { background: var(--p-primary-50); }
.p-button.p-button-danger { background: var(--p-red-500); border-color: var(--p-red-500); }
.p-button.p-button-danger:hover { background: var(--p-red-600); border-color: var(--p-red-600); }

/* Input text */
.p-inputtext {
  font-family: inherit; font-size: 1rem;
  padding: var(--p-form-field-padding-y) var(--p-form-field-padding-x);
  background: var(--p-form-field-background);
  color: var(--p-form-field-color);
  border: 1px solid var(--p-form-field-border-color);
  border-radius: var(--p-form-field-border-radius);
  transition: border-color var(--p-form-field-transition-duration);
  width: 100%; box-sizing: border-box;
}
.p-inputtext::placeholder { color: var(--p-form-field-placeholder-color); }
.p-inputtext:hover { border-color: var(--p-form-field-hover-border-color); }
.p-inputtext:focus { outline: none; border-color: var(--p-form-field-focus-border-color); }
.p-inputtext:disabled { background: var(--p-form-field-disabled-background); color: var(--p-form-field-disabled-color); cursor: not-allowed; }

/* Card */
.p-card {
  background: var(--p-content-background);
  color: var(--p-content-color);
  border: 1px solid var(--p-content-border-color);
  border-radius: var(--p-content-border-radius);
  box-shadow: var(--p-overlay-select-shadow);
  padding: 1.25rem;
}
.p-card-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--p-text-color); }
.p-card-subtitle { color: var(--p-text-muted-color); margin-bottom: 1rem; }

/* Dialog / Modal */
.p-dialog-mask { position: fixed; inset: 0; background: var(--p-mask-background); display: flex; align-items: center; justify-content: center; }
.p-dialog {
  background: var(--p-overlay-modal-background);
  color: var(--p-overlay-modal-color);
  border: 1px solid var(--p-overlay-modal-border-color);
  border-radius: var(--p-overlay-modal-border-radius);
  box-shadow: var(--p-overlay-modal-shadow);
  padding: var(--p-overlay-modal-padding);
  min-width: 320px; max-width: 90vw;
}
.p-dialog-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.p-dialog-title { font-size: 1.125rem; font-weight: 600; }

/* Label */
label { color: var(--p-text-color); font-weight: 500; display: inline-block; margin-bottom: 0.25rem; }

/* ============================================================================
   Tenant Evaluation — PrimeOne v4 + Brand Identity Tokens
   ----------------------------------------------------------------------------
   Sources:
     1. Figma file 0cybw6yIKP1Wm5EQsrhFQ9 (PrimeOne v4.0), node 4:2 — UI tokens
     2. TE Branding Guidelines Feb 2025 — brand identity colors, typography,
        gradients

   Load this file AFTER tokens/primeone-aura.css so it overrides the defaults.

   Custom palettes (do not exist in Aura): haiti, crimson, olive, maya
   Semantic mapping in this brand:
     - primary  → haiti     (UI primary: buttons, focus rings, surfaces)
     - surface  → haiti     (warm dark neutrals instead of slate)
     - danger   → crimson   (= "Red Orange Juice" #FF5248 in brand book)
     - success  → olive
     - info     → maya
     - brand    → crimson   (the brand "hero" color for marketing moments)

   IMPORTANT: in TE's design language the UI primary (haiti) is intentionally
   different from the brand identity primary (Red Orange Juice / crimson).
   Use --p-primary-color for UI chrome (buttons, focus, links). Use
   --p-brand-color for marketing-leaning moments: hero CTAs, brand banners,
   illustrations, social media.

   Note on haiti hex: brand book lists Haiti as #2E2939, Figma tokens use
   #2D273B for haiti-800. Functionally identical — Figma values are kept
   as the source of truth for UI tokens.

   Typography: Tenant Evaluation brand uses Roboto (Light/Regular/Medium).
   This file imports Roboto from Google Fonts — falls back gracefully if
   offline.
============================================================================ */

/* External font import omitted to preserve self-hosted CSP. */

:root {
  /* ============== TYPOGRAPHY (BRAND) ============== */
  /* Per brand book: Roboto Medium for titles, Regular for subtitles, Light for body */
  --p-font-family: 'Roboto', 'Inter var', 'Inter', ui-sans-serif, system-ui,
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --p-font-weight-title: 500;     /* Roboto Medium */
  --p-font-weight-subtitle: 400;  /* Roboto Regular */
  --p-font-weight-body: 300;      /* Roboto Light */

  /* ============== CUSTOM PRIMITIVE PALETTES ============== */

  /* Haiti — warm dark neutrals (used for primary AND surface) */
  --p-haiti-50:  #f9fafb;
  --p-haiti-100: #f6f6f6;
  --p-haiti-200: #ededed;
  --p-haiti-300: #dbdbdb;
  --p-haiti-400: #a5a3a9;
  --p-haiti-500: #7c7684;
  --p-haiti-600: #5f586a;
  --p-haiti-700: #4f4559;
  --p-haiti-800: #2d273b;
  --p-haiti-900: #171221;
  --p-haiti-950: #08060e;

  /* Crimson — coral red (danger) */
  --p-crimson-50:  #fef4f2;
  --p-crimson-100: #ffe1da;
  --p-crimson-200: #ffc1b5;
  --p-crimson-300: #ffa091;
  --p-crimson-400: #ff8075;
  --p-crimson-500: #ff5248;
  --p-crimson-600: #db3439;
  --p-crimson-700: #b72430;
  --p-crimson-800: #931627;
  --p-crimson-900: #7a0d1f;
  --p-crimson-950: #450712;

  /* Olive — sage green (success) */
  --p-olive-50:  #f5fce9;
  --p-olive-100: #eaf8ce;
  --p-olive-200: #dbf5b2;
  --p-olive-300: #c6e89c;
  --p-olive-400: #afd586;
  --p-olive-500: #8fbc6a;
  --p-olive-600: #6ea14d;
  --p-olive-700: #4b7d31;
  --p-olive-800: #31621e;
  --p-olive-900: #193f0e;
  --p-olive-950: #081803;

  /* Maya — custom sky blue (info) */
  --p-maya-50:  #ebf6ff;
  --p-maya-100: #d1edff;
  --p-maya-200: #a8e1ff;
  --p-maya-300: #70cfff;
  --p-maya-400: #33baf3;
  --p-maya-500: #009cdb;
  --p-maya-600: #0079bc;
  --p-maya-700: #005594;
  --p-maya-800: #003970;
  --p-maya-900: #001f47;
  --p-maya-950: #001424;

  /* ============== SEMANTIC OVERRIDES — LIGHT ============== */

  /* Primary = haiti (overrides Aura's emerald default) */
  --p-primary-50:  var(--p-haiti-50);
  --p-primary-100: var(--p-haiti-100);
  --p-primary-200: var(--p-haiti-200);
  --p-primary-300: var(--p-haiti-300);
  --p-primary-400: var(--p-haiti-400);
  --p-primary-500: var(--p-haiti-500);
  --p-primary-600: var(--p-haiti-600);
  --p-primary-700: var(--p-haiti-700);
  --p-primary-800: var(--p-haiti-800);
  --p-primary-900: var(--p-haiti-900);
  --p-primary-950: var(--p-haiti-950);

  --p-primary-color: var(--p-haiti-700);            /* #4f4559 */
  --p-primary-contrast-color: #ffffff;
  --p-primary-hover-color: var(--p-haiti-800);      /* #2d273b */
  --p-primary-active-color: var(--p-haiti-900);     /* #171221 */

  /* Surface = haiti (overrides Aura's slate default) */
  --p-surface-0:   #ffffff;
  --p-surface-50:  var(--p-haiti-50);
  --p-surface-100: var(--p-haiti-100);
  --p-surface-200: var(--p-haiti-200);
  --p-surface-300: var(--p-haiti-300);
  --p-surface-400: var(--p-haiti-400);
  --p-surface-500: var(--p-haiti-500);
  --p-surface-600: var(--p-haiti-600);
  --p-surface-700: var(--p-haiti-700);
  --p-surface-800: var(--p-haiti-800);
  --p-surface-900: var(--p-haiti-900);
  --p-surface-950: var(--p-haiti-950);

  /* Text */
  --p-text-color: var(--p-haiti-700);
  --p-text-hover-color: var(--p-haiti-800);
  --p-text-muted-color: var(--p-haiti-500);
  --p-text-hover-muted-color: var(--p-haiti-600);

  /* Highlight uses primary instead of primary-50 (different from Aura default) */
  --p-highlight-background: var(--p-haiti-700);
  --p-highlight-color: var(--p-haiti-50);
  --p-highlight-focus-background: var(--p-haiti-100);
  --p-highlight-focus-color: var(--p-haiti-800);

  /* Content */
  --p-content-background: #ffffff;
  --p-content-hover-background: var(--p-haiti-100);
  --p-content-border-color: var(--p-haiti-300);
  --p-content-color: var(--p-haiti-700);
  --p-content-hover-color: var(--p-haiti-800);

  /* Form field */
  --p-form-field-background: #ffffff;
  --p-form-field-disabled-background: var(--p-haiti-200);
  --p-form-field-filled-background: var(--p-haiti-50);
  --p-form-field-filled-hover-background: var(--p-haiti-50);
  --p-form-field-filled-focus-background: var(--p-haiti-50);
  --p-form-field-border-color: var(--p-haiti-300);
  --p-form-field-hover-border-color: var(--p-haiti-400);
  --p-form-field-focus-border-color: var(--p-haiti-700);
  --p-form-field-color: var(--p-haiti-700);
  --p-form-field-disabled-color: var(--p-haiti-500);
  --p-form-field-placeholder-color: var(--p-haiti-500);
  --p-form-field-icon-color: var(--p-haiti-400);

  /* Focus ring uses primary haiti */
  --p-focus-ring-color: var(--p-haiti-700);

  /* ============== COMPONENT-LEVEL: BUTTONS ============== */
  /* Primary button = haiti */
  --p-button-primary-background: var(--p-haiti-700);
  --p-button-primary-border-color: var(--p-haiti-700);
  --p-button-primary-color: #ffffff;
  --p-button-primary-hover-background: var(--p-haiti-800);
  --p-button-primary-hover-border-color: var(--p-haiti-800);
  --p-button-primary-active-background: var(--p-haiti-900);
  --p-button-primary-active-border-color: var(--p-haiti-900);

  /* Danger button = crimson */
  --p-button-danger-background: var(--p-crimson-500);
  --p-button-danger-border-color: var(--p-crimson-500);
  --p-button-danger-color: #ffffff;
  --p-button-danger-hover-background: var(--p-crimson-600);
  --p-button-danger-hover-border-color: var(--p-crimson-600);
  --p-button-danger-active-background: var(--p-crimson-700);

  /* Success button = olive */
  --p-button-success-background: var(--p-olive-500);
  --p-button-success-border-color: var(--p-olive-500);
  --p-button-success-color: #ffffff;
  --p-button-success-hover-background: var(--p-olive-600);
  --p-button-success-hover-border-color: var(--p-olive-600);
  --p-button-success-active-background: var(--p-olive-700);

  /* Info button = maya */
  --p-button-info-background: var(--p-maya-500);
  --p-button-info-border-color: var(--p-maya-500);
  --p-button-info-color: #ffffff;
  --p-button-info-hover-background: var(--p-maya-600);
  --p-button-info-hover-border-color: var(--p-maya-600);
  --p-button-info-active-background: var(--p-maya-700);

  /* ============== COMPONENT-LEVEL: TAGS / BADGES / MESSAGES ============== */
  --p-tag-primary-background: var(--p-haiti-100);
  --p-tag-primary-color: var(--p-haiti-700);
  --p-tag-success-background: var(--p-olive-100);
  --p-tag-success-color: var(--p-olive-700);
  --p-tag-info-background: var(--p-maya-100);
  --p-tag-info-color: var(--p-maya-700);
  --p-tag-warn-background: #ffedd5;     /* orange/100 — kept from Aura */
  --p-tag-warn-color: #c2410c;          /* orange/700 */
  --p-tag-danger-background: #fee2e2;   /* red/100 — neutral red kept for tags */
  --p-tag-danger-color: #b91c1c;

  --p-badge-primary-background: var(--p-haiti-700);
  --p-badge-success-background: var(--p-olive-500);
  --p-badge-info-background: var(--p-maya-500);
  --p-badge-danger-background: #ef4444;
  --p-badge-warn-background: #f97316;

  /* ============== BRAND IDENTITY (FROM BRAND BOOK) ============== */
  /* Use these for marketing/brand moments — NOT for everyday UI chrome.
     For UI chrome (buttons, focus rings, surfaces), keep using --p-primary-*. */

  /* Red Orange Juice — the brand "hero" color. Identical to crimson-500. */
  --p-brand-color: #ff5248;
  --p-brand-color-hover: #db3439;     /* = crimson-600 */
  --p-brand-color-active: #b72430;    /* = crimson-700 */
  --p-brand-contrast-color: #ffffff;

  /* Forgotten Pink — brand secondary. Soft accent for backgrounds, badges,
     illustration washes. Not in Figma tokens, only in the brand book. */
  --p-forgotten-pink: #ffdad6;
  --p-forgotten-pink-soft: #ffece9;   /* lighter wash, derived */
  --p-forgotten-pink-deep: #ffb3a8;   /* slightly stronger, derived */

  /* Brand gradients — for marketing moments (hero sections, banners, brand
     illustrations). Do not use these on form fields or small UI elements. */
  --p-brand-gradient-1: linear-gradient(135deg, #ffd6cf 0%, #ffffff 100%);
  --p-brand-gradient-2: linear-gradient(135deg, #f3edf7 0%, #f3ced4 100%);
  --p-brand-gradient-3: linear-gradient(135deg, #2e2938 0%, #442d3a 100%);
}

/* Convenience utility classes for brand moments. Optional. */
.te-brand-bg          { background: var(--p-brand-color); color: var(--p-brand-contrast-color); }
.te-brand-bg-pink     { background: var(--p-forgotten-pink); color: var(--p-haiti-800); }
.te-brand-gradient-1  { background: var(--p-brand-gradient-1); color: var(--p-haiti-800); }
.te-brand-gradient-2  { background: var(--p-brand-gradient-2); color: var(--p-haiti-800); }
.te-brand-gradient-3  { background: var(--p-brand-gradient-3); color: #ffffff; }

.p-button.p-button-brand {
  background: var(--p-brand-color);
  border-color: var(--p-brand-color);
  color: var(--p-brand-contrast-color);
}
.p-button.p-button-brand:hover  { background: var(--p-brand-color-hover);  border-color: var(--p-brand-color-hover); }
.p-button.p-button-brand:active { background: var(--p-brand-color-active); border-color: var(--p-brand-color-active); }

/* ============== Quick override for the bundled component shells ============ */
/* Make sure .p-button uses the haiti-based primary */
.p-button {
  background: var(--p-button-primary-background);
  border-color: var(--p-button-primary-border-color);
  color: var(--p-button-primary-color);
}
.p-button:hover {
  background: var(--p-button-primary-hover-background);
  border-color: var(--p-button-primary-hover-border-color);
}
.p-button:active {
  background: var(--p-button-primary-active-background);
  border-color: var(--p-button-primary-active-border-color);
}
.p-button.p-button-danger { background: var(--p-button-danger-background); border-color: var(--p-button-danger-border-color); }
.p-button.p-button-danger:hover { background: var(--p-button-danger-hover-background); border-color: var(--p-button-danger-hover-border-color); }
.p-button.p-button-success { background: var(--p-button-success-background); border-color: var(--p-button-success-border-color); }
.p-button.p-button-success:hover { background: var(--p-button-success-hover-background); border-color: var(--p-button-success-hover-border-color); }
.p-button.p-button-info { background: var(--p-button-info-background); border-color: var(--p-button-info-border-color); }
.p-button.p-button-info:hover { background: var(--p-button-info-hover-background); border-color: var(--p-button-info-hover-border-color); }

/* PRIMEONE-TOKENS-END */
/* Rabbit application styles. Palette and controls use the bundled PrimeOne tokens. */
:root{color-scheme:light;--p-text-muted-color:var(--p-haiti-600);--p-form-field-placeholder-color:var(--p-haiti-600);--p-focus-ring-width:2px}
*{box-sizing:border-box}body{font-family:var(--p-font-family);font-size:16px;line-height:1.5;background:var(--p-surface-50);color:var(--p-text-color);padding-top:env(safe-area-inset-top)}
[hidden]{display:none!important}button,input,select,textarea{font:inherit}button{cursor:pointer;color:var(--p-text-color);border:1px solid transparent;border-radius:var(--p-border-radius-lg);background:none;padding:var(--p-form-field-padding-y) var(--p-form-field-padding-x);min-height:44px;transition:background var(--p-transition-duration)}
button:disabled{cursor:default;opacity:var(--p-disabled-opacity)}button:not(:disabled):hover{background:var(--p-content-hover-background)}:focus-visible{outline:var(--p-focus-ring-width) solid var(--p-focus-ring-color);outline-offset:var(--p-focus-ring-offset)}
.top{max-width:1080px;margin:auto;padding:22px 32px;display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--p-surface-200)}.logo{width:36px;height:36px;border-radius:10px}.tt{display:flex;flex:1;flex-direction:column}.tt b{font-size:21px;letter-spacing:-.04em}.tt span{font-size:13px}.out{color:var(--p-text-muted-color);font-size:14px}.out:hover{color:var(--p-text-color)}
main{max-width:1000px;margin:auto;padding:32px 32px 120px}.page-head{margin:8px 0 28px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;margin:0 0 10px;color:var(--p-text-muted-color)}h1{font-size:clamp(26px,4vw,38px);line-height:1.18;letter-spacing:-.04em;margin:0 0 12px;color:var(--p-haiti-900)}h2{font-size:18px;letter-spacing:-.02em;margin:22px 0 12px}.page-head p:last-child{margin:0}.muted{color:var(--p-text-muted-color)}.small{font-size:13px}.center{text-align:center}.pre{white-space:pre-wrap;overflow-wrap:anywhere}
.sub{display:flex;gap:4px;padding:4px;border:1px solid var(--p-surface-200);border-radius:var(--p-border-radius-xl);background:var(--p-content-background);margin-bottom:24px;width:fit-content;max-width:100%}.sub button{font-size:14px;white-space:nowrap;min-width:110px}.sub button.on{background:var(--p-primary-color);color:var(--p-primary-contrast-color);font-weight:600}
.balance{background:var(--p-brand-gradient-3);color:var(--p-surface-0);border-radius:var(--p-border-radius-xl);padding:32px;margin-bottom:16px;position:relative;overflow:hidden;min-height:190px}.balance .lbl{font-size:13px;color:var(--p-haiti-200)}.balance .amt{font-size:clamp(26px,4vw,42px);font-weight:700;letter-spacing:-.045em;line-height:1.2;margin:14px 0}.bsub{font-size:14px;color:var(--p-haiti-200)}.balance.even{background:var(--p-olive-900)}
.primary{background:var(--p-primary-color);color:var(--p-primary-contrast-color);font-weight:600}.primary:not(:disabled):hover{background:var(--p-primary-hover-color)}.secondary,.ghost{background:var(--p-surface-100);border-color:var(--p-content-border-color)}.secondary{margin-top:12px}.big{min-height:50px}.danger{color:var(--p-crimson-700);margin-top:8px}.section-head{display:flex;align-items:center;justify-content:space-between;margin:28px 0 12px;gap:8px}.section-head h2{margin:0}.text-action{font-size:13px;text-decoration:underline;text-underline-offset:3px}.card{padding:28px;border:1px solid var(--p-content-border-color);border-radius:var(--p-border-radius-xl);background:var(--p-content-background)}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.list>li{min-width:0}.list button{width:100%;display:flex;align-items:center;gap:14px;text-align:left;padding:18px;background:var(--p-content-background);border:1px solid var(--p-surface-200);border-radius:var(--p-border-radius-xl)}.list button:disabled{opacity:1}.av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--p-surface-0)}.av.leo{background:var(--p-maya-700)}.av.sara{background:var(--p-crimson-700)}.av.pay{background:var(--p-olive-800)}.mid{min-width:0;flex:1}.mid .t{font-weight:600;overflow-wrap:anywhere}.s{font-size:12px;color:var(--p-text-muted-color);margin-top:3px}.r{text-align:right;flex-shrink:0}.r .a{font-weight:700;font-variant-numeric:tabular-nums}.r .s{font-size:11px}.empty{padding:40px 20px;text-align:center;color:var(--p-text-muted-color);border:1px dashed var(--p-content-border-color);border-radius:var(--p-border-radius-xl)}.empty .e{font-size:36px;margin-bottom:12px}.empty button{width:auto;display:inline-flex;margin-top:12px}
.filters{display:flex;gap:12px;margin-bottom:16px}.filters input{min-width:0;flex:1}.filters select{max-width:48%}input,select,textarea{color:var(--p-form-field-color);background:var(--p-form-field-background);border:1px solid var(--p-form-field-border-color);border-radius:var(--p-form-field-border-radius);padding:var(--p-form-field-lg-padding-y) var(--p-form-field-lg-padding-x);min-height:44px}input::placeholder,textarea::placeholder{color:var(--p-form-field-placeholder-color)}label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--p-text-color)}label input,textarea,select.sel{width:100%}textarea{resize:vertical}input:disabled,textarea:disabled,select:disabled{background:var(--p-form-field-disabled-background)}
.tabs{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--p-content-background);border-top:1px solid var(--p-content-border-color);z-index:10}.tabs button{flex:1;max-width:180px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;color:var(--p-text-muted-color)}.tabs .on{background:var(--p-surface-100);color:var(--p-primary-color);font-weight:700}.tabs span{font-size:20px}
.sheet{padding:0;border:1px solid var(--p-content-border-color);border-radius:var(--p-overlay-modal-border-radius);background:var(--p-overlay-modal-background);color:var(--p-text-color);width:calc(100% - 32px);max-width:520px;max-height:90dvh;box-shadow:var(--p-overlay-modal-shadow)}.sheet::backdrop{background:var(--p-mask-background)}.sheet form{display:flex;flex-direction:column;gap:14px;padding:var(--p-overlay-modal-padding)}.sheet h2{margin:0;font-size:23px}.sheet p:empty{display:none}.grab{display:none}.row{display:flex;gap:10px}.row>*{min-width:0;flex:1}#edlg{padding:var(--p-overlay-modal-padding)}.seg{display:flex;background:var(--p-surface-100);padding:4px;border-radius:var(--p-border-radius-lg)}.seg label{flex:1;position:relative}.seg input{position:absolute;opacity:0;width:1px;min-height:0}.seg span{padding:var(--p-form-field-lg-padding-y);text-align:center;min-height:44px;border-radius:var(--p-border-radius-md)}.seg input:checked+span{background:var(--p-content-background);box-shadow:var(--p-overlay-select-shadow);font-weight:600}.seg input:focus-visible+span{outline:var(--p-focus-ring-width) solid var(--p-focus-ring-color)}.chk{flex-direction:row;align-items:center}.chk input{width:22px;min-height:22px;accent-color:var(--p-primary-color)}.err{color:var(--p-crimson-700);font-size:14px}.error-card{padding:20px;margin-top:20px;border:1px solid var(--p-crimson-200);background:var(--p-crimson-50);border-radius:var(--p-border-radius-xl);color:var(--p-crimson-800)}.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:var(--p-haiti-900);color:var(--p-surface-0);padding:12px 18px;border-radius:var(--p-border-radius-xl);display:flex;align-items:center;gap:12px;z-index:20;max-width:90%;box-shadow:var(--p-overlay-popover-shadow)}.toast button{color:var(--p-forgotten-pink)}.settleAmt{font-size:40px;font-weight:700;margin:16px 0}
.calbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.calbar b{font-size:21px}.agday{font-size:13px;font-weight:700;margin:24px 0 10px}.ev{display:flex;gap:20px;background:var(--p-content-background);border:1px solid var(--p-content-border-color);padding:18px;margin:8px 0;width:100%;text-align:left}.ev .tm{min-width:70px;font-size:13px;color:var(--p-text-muted-color)}.month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.month .h{text-align:center;font-size:12px;color:var(--p-text-muted-color);padding-bottom:8px}.month .c{min-height:110px;border:1px solid var(--p-surface-200);border-radius:var(--p-border-radius-md);background:var(--p-content-background);padding:5px;font-size:12px;overflow:hidden}.month .o{opacity:.5}.month .t{border:2px solid var(--p-primary-color)}.month .d{font-weight:700}.month .x{display:block;min-height:32px;width:100%;margin-top:4px;padding:4px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;background:var(--p-maya-100);color:var(--p-maya-800);border-radius:var(--p-border-radius-sm)}
.notes .nb{white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;margin:8px 0}.todos li:not(.empty){display:flex;gap:8px;align-items:center;background:var(--p-content-background);padding:8px 12px;border:1px solid var(--p-surface-200);border-radius:var(--p-border-radius-xl)}.todos .ck{flex:none;width:44px;height:44px;padding:0;justify-content:center;border:2px solid var(--p-form-field-border-color);border-radius:50%}.todos .ck.on{background:var(--p-olive-800);color:var(--p-surface-0)}.todos li>button.it{border:0;background:none;padding:10px 4px}.todos .done .t{text-decoration:line-through}.pill{display:inline-block;font-size:10px;font-weight:700;padding:2px 6px;border-radius:var(--p-border-radius-sm);margin-right:5px}.pill.over{color:var(--p-crimson-800);background:var(--p-crimson-100)}.pill.today{color:var(--p-olive-900);background:var(--p-olive-100)}.pill.who{color:var(--p-haiti-700);background:var(--p-haiti-200)}.donebox{margin-top:22px}.donebox summary{cursor:pointer;padding:12px 0;font-weight:600}.skip{position:absolute;top:-100px;left:16px;z-index:30;background:var(--p-content-background);color:var(--p-text-color);padding:12px}.skip:focus{top:8px}
.lg{max-width:440px;margin:8vh auto;padding:32px;text-align:center}.lg img{width:88px;height:88px;border-radius:22px;margin-bottom:20px}.lg h1{font-size:34px}.lg form{margin-top:28px;text-align:left}.lg input,.lg button{width:100%;margin:8px 0}.lg label{font-weight:600}.lg #code{letter-spacing:.4em;text-align:center;font-size:26px}.lnk{color:var(--p-text-muted-color);text-decoration:underline;font-size:13px}
@media(min-width:900px){.tabs{top:105px;bottom:auto;left:max(24px,calc((100vw - 1080px)/2));right:auto;width:180px;flex-direction:column;border:0;background:none;align-items:stretch;padding:16px 0}.tabs button{justify-content:flex-start;min-height:52px}.tabs button.on{background:var(--p-content-background);box-shadow:var(--p-overlay-select-shadow)}main:not(.lg){max-width:1080px;padding-left:240px;padding-top:38px}.toast{bottom:30px}}
@media(max-width:600px){.top{padding:16px 20px}main{padding:24px 20px 115px}.page-head{margin:0 0 24px}.eyebrow{font-size:10px}.sub{width:100%}.sub button{flex:1;min-width:0;padding-inline:8px;font-size:13px}.balance{padding:24px;min-height:180px}.big{width:100%}.list button{gap:10px;padding:14px 12px}.av{width:32px;height:32px}.r .s{max-width:100px}.mid .t{font-size:14px}.tabs{gap:4px;padding-inline:8px}.tabs button{flex-direction:column;gap:2px;font-size:11px;padding:6px}.sheet{margin:auto 0 0;width:100%;max-width:none;max-height:92dvh;border-radius:var(--p-border-radius-xl) var(--p-border-radius-xl) 0 0}.sheet form{padding-bottom:calc(20px + env(safe-area-inset-bottom))}.grab{display:block;width:40px;height:4px;background:var(--p-surface-300);border-radius:var(--p-border-radius-xs);margin:0 auto 8px}.month .c{min-height:90px}.month .x{min-height:44px}.lg{margin-top:3vh}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media(prefers-color-scheme:dark){:root{color-scheme:dark;--p-content-background:var(--p-haiti-900);--p-surface-50:var(--p-haiti-950);--p-surface-100:var(--p-haiti-800);--p-surface-200:var(--p-haiti-700);--p-content-border-color:var(--p-haiti-600);--p-text-color:var(--p-haiti-100);--p-text-muted-color:var(--p-haiti-300);--p-primary-color:var(--p-forgotten-pink);--p-primary-hover-color:var(--p-forgotten-pink-deep);--p-primary-contrast-color:var(--p-haiti-900);--p-form-field-background:var(--p-haiti-950);--p-form-field-color:var(--p-haiti-100);--p-form-field-border-color:var(--p-haiti-600);--p-form-field-placeholder-color:var(--p-haiti-400);--p-form-field-disabled-background:var(--p-haiti-800);--p-overlay-modal-background:var(--p-haiti-900);--p-content-hover-background:var(--p-haiti-800);--p-focus-ring-color:var(--p-forgotten-pink)}h1{color:var(--p-haiti-100)}.err,.danger{color:var(--p-crimson-300)}}
[id="addNote"],[id="addTodo"]{margin-bottom:20px}#sum{margin-bottom:12px}.list[aria-busy=true]{opacity:.65}