/* PCS Planner · brand pass (Spruce & Gold, after the Salary Calculator).
   CSS only: this page uses Tailwind utility classes (CDN), so rules are scoped with `body` to outrank them.
   Loaded after the tool's own <style> and /tools/_shared/mfp-tools.css. Delete the <link> to revert. */
body[class], body.main-bg { background-color: var(--mfp-paper) !important; color: var(--mfp-text); }
body .text-main, body .text-gray-700, body .text-gray-600 { color: var(--mfp-muted); }
body .text-heading { color: var(--mfp-text) !important; }
body h1, body h2, body h3, body h4 { font-family: var(--mfp-display); letter-spacing: -0.02em; }

/* first-run dialog */
body #onboarding-modal { background: rgba(var(--mfp-ink-rgb), 0.82) !important; backdrop-filter: blur(4px); }
body #onboarding-modal > div { border-radius: var(--mfp-r-lg); background: var(--mfp-card); box-shadow: var(--mfp-lift); }
body #onboarding-modal h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; }
body #onboarding-modal h3 { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--mfp-muted) !important; font-family: var(--mfp-body); }
body #setup-options button { border: 1px solid var(--mfp-line); border-radius: var(--mfp-r-md); background: var(--mfp-card); padding: 1.25rem; min-height: 6rem; box-shadow: none; transition: border-color .25s var(--mfp-ease), background-color .25s, transform .35s var(--mfp-ease); position: relative; }
body #setup-options button:hover { background: var(--mfp-surface-2); border-color: var(--mfp-ink); transform: translateY(-2px); }
body #setup-options button h4 { font-size: 1.1rem; font-weight: 600; color: var(--mfp-ink) !important; }
body #setup-options button p { color: var(--mfp-muted); font-size: 0.9rem; line-height: 1.5; }

/* app header and task cards */
body #app-container > header { background: var(--mfp-card); border-bottom: 1px solid var(--mfp-line); box-shadow: none; padding: 1rem clamp(1rem, 3vw, 2rem); }
body #app-container > header h1 { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.03em; }
body #reset-planner-btn { color: var(--mfp-muted); min-height: 44px; padding: 0 0.9rem; border-radius: 9999px; }
body #reset-planner-btn:hover { color: var(--mfp-danger); background: var(--mfp-danger-bg); }
body main { max-width: 1100px; }
body main .bg-white, body main .task-item { background: var(--mfp-card); border: 1px solid var(--mfp-line); border-radius: var(--mfp-r-lg); box-shadow: var(--mfp-shadow); }
body main .shadow, body main .shadow-sm, body main .shadow-md { box-shadow: var(--mfp-shadow); }
.status-overdue { border-left: 4px solid var(--mfp-danger); }
.status-upcoming { border-left: 4px solid var(--mfp-signal); }
.completed-task .task-title-text { color: var(--mfp-hint); }

/* forms */
body label { font-weight: 600; color: var(--mfp-text); }
body select, body input[type="text"], body input[type="date"], body input[type="number"], body textarea {
  min-height: 3rem; padding: 0.7rem 0.95rem; border: 1px solid var(--mfp-line); border-radius: var(--mfp-r-sm); background-color: #fff; color: var(--mfp-text);
  font-family: var(--mfp-body); font-size: 1rem; transition: border-color .25s var(--mfp-ease), box-shadow .25s var(--mfp-ease);
}
body select { appearance: none; -webkit-appearance: none; background-image: var(--mfp-chev); background-repeat: no-repeat; background-position: right 0.95rem center; padding-right: 2.5rem; }
body select:hover, body input:hover, body textarea:hover { border-color: var(--mfp-line-strong); }
body select:focus, body input:focus, body textarea:focus { outline: none; border-color: var(--mfp-signal); box-shadow: 0 0 0 4px rgba(var(--mfp-signal-rgb), 0.28); }
body input[type="checkbox"] { accent-color: var(--mfp-ink); width: 1.15rem; height: 1.15rem; }

/* buttons: ink pills (the tool's own teal accent becomes ink) */
.primary-accent, body .bg-green-600, body .bg-teal-600 { background-color: var(--mfp-ink) !important; color: var(--mfp-on-ink) !important; border-radius: 9999px; min-height: 3rem; font-weight: 600; box-shadow: none; transition: transform .35s var(--mfp-ease), box-shadow .35s var(--mfp-ease); }
.primary-accent:hover, body .hover\:bg-green-700:hover { background-color: var(--mfp-ink) !important; transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(var(--mfp-ink-rgb), 0.5); }
body .bg-gray-200 { background: transparent; border: 1px solid var(--mfp-line-strong); color: var(--mfp-ink); border-radius: 9999px; min-height: 3rem; }
body .bg-gray-200:hover { background: var(--mfp-surface-2); }
body .bg-red-600 { background: var(--mfp-danger); border-radius: 9999px; min-height: 3rem; }
/* the PDF export is not a danger action: ghost pill like the other secondary buttons (the red confirm button in the reset dialog stays red) */
body main .bg-red-600 { background: transparent !important; color: var(--mfp-ink) !important; border: 1px solid var(--mfp-line-strong); }
body main .bg-red-600:hover { background: var(--mfp-surface-2) !important; }
.filter-btn { border-radius: 9999px; min-height: 44px; font-weight: 600; }
.filter-btn.active { background-color: var(--mfp-ink) !important; color: var(--mfp-on-ink) !important; }
body .text-teal-600, body .hover\:text-teal-800:hover { color: var(--mfp-ink) !important; }
body button { cursor: pointer; }
body button:active { transform: none; }

::-webkit-scrollbar-thumb { background: var(--mfp-sage-500); }
::-webkit-scrollbar-thumb:hover { background: var(--mfp-ink-2); }
@media (max-width: 640px) { body select, body input[type="text"], body input[type="date"], body input[type="number"] { font-size: 16px; } }