/*
 * ===================================================================
 * PDH PROTOTYPE - AESTHETIC COHERENCE STYLESHEET
 * ===================================================================
 * This stylesheet visually aligns the PDH prototype with the "Cognitech Pro"
 * / "NeoEducación Clara" brand identity from the investor landing page.
*/

/* ---------------------------------- */
/* 1. CSS CUSTOM PROPERTIES & RESET   */
/* ---------------------------------- */
:root {
  --color-background-alpha: #0b0e13;
  --color-card-background: rgba(17, 24, 39, 0.8);
  --color-foreground-omega: #ECEFF4;
  --color-foreground-secondary: rgba(236, 239, 244, 0.7);
  --color-cta-primary-vision: #FF7847;
  --color-cta-secondary-system: #5ED3F3;
  --color-progress: #2DD4BF; /* Teal color for progress and recommendations */
  --color-border: rgba(94, 211, 243, 0.2);
  --border-radius: 8px;
  --transition-fast: 0.3s ease-in-out;
  --color-error: #dc3545;
  --color-success: #28a745;
  --color-giver: #28a745;
  --color-finisher: #007bff;
  --color-blocker: #dc3545;

  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Cormorant Garamond', serif;
  --font-accent: 'Cinzel', serif;

  --font-size-lg: 1.75rem;
  --font-size-md: 1.25rem;
  --font-size-base: 1.125rem;
  --font-size-sm: 0.9rem;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; }

/* ---------------------------------- */
/* 2. GLOBAL & APP LAYOUT             */
/* ---------------------------------- */
body {
  background-color: var(--color-background-alpha);
  color: var(--color-foreground-omega);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.7;
  display: flex;
  flex-direction: column;
}

.app-main {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1rem;
}

#app {
  width: 100%;
  display: flex;
  justify-content: center;
}

h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; }
h1 { font-size: 2.5rem; font-family: var(--font-accent); }
h2 { font-size: var(--font-size-lg); }
h3 { font-size: var(--font-size-md); }
p { max-width: 65ch; margin-bottom: 1rem; color: var(--color-foreground-secondary); }
strong { color: var(--color-foreground-omega); font-weight: 700; }

.app-header, .app-footer {
  background-color: var(--color-background-alpha);
  border-bottom: 1px solid var(--color-border);
  padding: 1rem 2rem;
}
.app-header {
    background-color: rgba(10, 10, 10, 0.8);
    border-bottom: 1px solid var(--color-border);
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
}
.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--color-primary);
    font-family: var(--font-display);
    font-size: 1.25rem;
}
.logo-link .logo {
    height: 2.5rem;
    width: auto;
}
.user-info {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}
.app-footer { border-top: 1px solid var(--color-border); border-bottom: none; text-align: center; }
.header-container, .footer-container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; }
.logo-link { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--color-foreground-omega); font-family: var(--font-heading); font-weight: 700; }
.user-info { font-family: var(--font-heading); font-size: var(--font-size-sm); }

/* ---------------------------------- */
/* 3. CORE COMPONENTS                 */
/* ---------------------------------- */
.card {
  width: 100%;
  max-width: 700px;
  padding: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-card-background);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.wide-card { max-width: 1100px; }

/* --- Base Button Style --- */
/* Establishes universal properties like font, padding, and transitions for all buttons. */
.button-primary,
.button-secondary,
.archetype-btn,
.rating-btn,
.value-button {
    padding: 0.75rem 1.75rem;
    border-radius: var(--border-radius);
    font-family: var(--font-heading);
    font-weight: 700;
    text-decoration: none;
    transition: all var(--transition-fast);
    border: 1px solid var(--color-border);
    cursor: pointer;
    background-color: transparent;
    color: var(--color-foreground-omega);
    text-align: center;
}

/* --- Primary Button (Omega/Warmth) --- */
/* For forward-moving, decisive actions: Next, Submit, Accept */
.button-primary {
    background-color: var(--color-cta-primary-vision);
    color: var(--color-background-alpha);
    border-color: var(--color-cta-primary-vision);
    box-shadow: 0 4px 16px rgba(255, 120, 71, 0.15);
}

.button-primary:hover,
.button-primary:focus {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(255, 120, 71, 0.25);
    background-color: #ff8c61; /* Slightly lighter on hover */
    color: var(--color-background-alpha);
    outline: none;
}

/* --- Secondary Button (Alpha/Competence) --- */
/* For analytical choices and alternative paths: Modify, Select, Return */
.button-secondary,
.archetype-btn {
    background: rgba(94, 211, 243, 0.1);
    backdrop-filter: blur(5px);
    color: var(--color-cta-secondary-system);
    border-color: var(--color-cta-secondary-system);
}

.button-secondary:hover,
.archetype-btn:hover,
.button-secondary:focus,
.archetype-btn:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(94, 211, 243, 0.15);
    background: rgba(94, 211, 243, 0.2);
    color: var(--color-foreground-omega);
    outline: none;
}

/* --- High-Value Button Animation --- */
/* A subtle pulse for the most important CTA on the dashboard */
@keyframes pulse-glow {
    0% {
        box-shadow: 0 4px 16px rgba(255, 120, 71, 0.15);
    }
    50% {
        box-shadow: 0 8px 32px rgba(255, 120, 71, 0.35);
    }
    100% {
        box-shadow: 0 4px 16px rgba(255, 120, 71, 0.15);
    }
}

#organize-day {
    animation: pulse-glow 2.5s infinite ease-in-out;
}


/* --- Specialty Buttons (Value & Rating) --- */
/* A consistent, on-brand style for micro-interactions */
.value-button,
.rating-btn {
    background: rgba(94, 211, 243, 0.1);
    color: var(--color-cta-secondary-system);
    border-color: var(--color-border);
    padding: 0.5rem 1rem;
    font-weight: 400;
}

.value-button:hover,
.rating-btn:hover {
    background: rgba(94, 211, 243, 0.2);
    color: var(--color-foreground-omega);
    transform: translateY(-1px);
}

.value-button.selected,
.rating-btn:active {
    background: var(--color-cta-secondary-system);
    color: var(--color-background-alpha);
    border-color: var(--color-cta-secondary-system);
    transform: translateY(0);
}


/* --- Utility Buttons (Close & Feedback) --- */
.close-button,
.feedback-button-container button {
    background: transparent;
    border: none;
    color: var(--color-foreground-omega);
    opacity: 0.7;
    font-size: 1.5rem;
    padding: 0.5rem;
    transition: all var(--transition-fast);
}

.close-button:hover,
.feedback-button-container button:hover {
    opacity: 1;
    transform: scale(1.1);
    cursor: pointer;
}

.form-group, .project-entry { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-family: var(--font-heading); font-size: var(--font-size-sm); }
.form-group input[type="range"] { width: 100%; }
input[type="text"], input[type="date"], textarea, select {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--color-background-alpha);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    color: var(--color-foreground-omega);
    font-family: var(--font-body);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--color-cta-secondary-system); outline-offset: 2px; }


/* ---------------------------------- */
/* 4. ONBOARDING COMPONENTS           */
/* ---------------------------------- */
.progress-bar-container { width: 100%; height: 8px; background-color: var(--color-border); border-radius: 4px; overflow: hidden; }
.progress-bar { height: 100%; background-color: var(--color-progress); transition: width var(--transition-fast); }

.archetype-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem 1.5rem; /* More padding for a premium feel */
    text-align: left;
}

.archetype-btn-content {
    display: flex;
    flex-direction: column;
}

.archetype-btn strong {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.affinity-score {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: var(--font-heading);
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.2);
}

/* --- The new "Recommended" style --- */
.recommended-archetype {
    background-color: var(--color-progress);
    color: var(--color-background-alpha);
    border-color: var(--color-progress);
    transform: scale(1.02); /* Makes it slightly larger */
    box-shadow: 0 8px 32px rgba(45, 212, 191, 0.3);
}

.recommended-archetype .affinity-score {
    background-color: rgba(11, 14, 19, 0.5); /* Darker lozenge for contrast */
    color: #fff;
}

.recommended-archetype:hover {
    background-color: #36e5ca; /* Brighter teal on hover */
    border-color: #36e5ca;
    box-shadow: 0 10px 40px rgba(45, 212, 191, 0.4);
    transform: scale(1.02) translateY(-2px);
    color: var(--color-background-alpha); /* Keep text dark */
}

/* LifePriorities (Radar Chart) */
.radar-chart-container { width: 100%; max-width: 450px; margin: 1rem auto; }
.radar-chart-svg { width: 100%; height: auto; }
.radar-grid { fill: none; stroke: var(--color-border); stroke-width: 1; }
.radar-axis { stroke: var(--color-border); stroke-width: 1; }
.radar-area { fill: rgba(45, 212, 191, 0.3); stroke: var(--color-progress); stroke-width: 2; }
.radar-point { fill: var(--color-progress); cursor: grab; }
.radar-point:active { cursor: grabbing; }
.radar-label { font-family: var(--font-heading); font-size: 10px; fill: var(--color-foreground-secondary); text-anchor: middle; dominant-baseline: middle; }
#priority-list-display { margin-top: 1.5rem; }
.priority-item { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); list-style: none; font-family: var(--font-body); }
.priority-item .rank { color: var(--color-progress); font-weight: 700; }
.priority-item .weight { font-weight: 700; }

/* PersonalValues */
.button-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; }
.value-button { background: transparent; border: 1px solid var(--color-border); color: var(--color-foreground-secondary); padding: 0.5rem 1rem; border-radius: var(--border-radius); cursor: pointer; transition: all var(--transition-fast); }
.value-button.selected, .value-button:hover { background-color: var(--color-cta-secondary-system); color: var(--color-background-alpha); border-color: var(--color-cta-secondary-system); }

/* Narrative & Insight Text */
.narrative-transition, .narrative-synthesis { font-style: italic; color: var(--color-foreground-omega); text-align: center; border-left: 3px solid var(--color-progress); padding-left: 1.5rem; margin: 1.5rem auto; }
.narrative-synthesis { font-weight: 350; }
.ai-rationale { background: rgba(0,0,0,0.2); padding: 1rem; border-radius: var(--border-radius); margin-top: 1rem; }
.ai-rationale p { margin-bottom: 0; font-size: var(--font-size-sm); }
.skill-tag { background: var(--color-cta-secondary-system); color: var(--color-background-alpha); padding: 0.2rem 0.6rem; border-radius: 4px; font-family: var(--font-heading); font-size: 0.8rem; margin: 0.2rem; display: inline-block; }
.analysis-result { text-align: left; }

/* ---------------------------------- */
/* 5. DASHBOARD & SCHEDULE            */
/* ---------------------------------- */
.entity-list ul { list-style: none; }
.entity-list li { padding: 0.5rem; border-bottom: 1px solid var(--color-border); }
.entity-list li span { font-family: var(--font-heading); }

/* Modals */
.modal { position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(5px); display: block; } /* Changed to block for easier JS control */
.modal-content { background-color: var(--color-card-background); margin: 15% auto; padding: 2rem; border: 1px solid var(--color-border); width: 90%; max-width: 500px; border-radius: var(--border-radius); position: relative; }
.close-button { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
.feedback-button-container { position: absolute; top: 1.5rem; right: 1.5rem; }
#feedback-button { background: none; border: none; font-size: 1.5rem; cursor: pointer; }
.rating-buttons { display: flex; justify-content: center; gap: 0.5rem; margin: 1rem 0; }
.rating-btn { width: 40px; height: 40px; border: 1px solid var(--color-border); background: transparent; color: var(--color-foreground-secondary); cursor: pointer; border-radius: 50%; }
.rating-btn:hover { background-color: var(--color-cta-secondary-system); color: var(--color-background-alpha); }

/* Generated Schedule */
.alignment-score-widget { text-align: center; margin-bottom: 1.5rem; }
.alignment-score-widget .score { font-size: 3rem; font-family: var(--font-heading); font-weight: 700; color: var(--color-progress); line-height: 1; }
.schedule-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin: 2rem 0; }
.day-column { background: rgba(0,0,0,0.15); padding: 1rem; border-radius: var(--border-radius); }
.day-column h4 { border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem; margin-bottom: 1rem; color: var(--color-cta-secondary-system); }
.day-events { display: flex; flex-direction: column; gap: 0.5rem; }

/* NEW: Styles for the Golden Thread Link icon */
.golden-thread-link {
  display: inline-block;
  width: 20px;
  height: 20px;
  font-size: 16px;
  text-align: center;
  cursor: help; /* Changes the cursor to a '?' on hover to indicate a tooltip */
  margin-left: 8px; /* Add some space between the text and the icon */
  flex-shrink: 0; /* Prevents the icon from shrinking in a flex container */
}
.schedule-item-small { display: flex; justify-content: space-between; align-items: center; background: var(--color-background-alpha); padding: 0.5rem; border-radius: 4px; font-size: var(--font-size-sm); }
.schedule-item-small strong { font-family: var(--font-heading); color: var(--color-foreground-omega); }

/* ---------------------------------- */
/* 6. LEADER DASHBOARD & ANALYTICS    */
/* ---------------------------------- */
.leader-header { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.tab-buttons { display: flex; border-bottom: 1px solid var(--color-border); margin-bottom: 1.5rem; }
.tab-button { background: none; border: none; color: var(--color-foreground-secondary); padding: 1rem 1.5rem; cursor: pointer; font-family: var(--font-heading); border-bottom: 3px solid transparent; }
.tab-button.active, .tab-button:hover { color: var(--color-cta-secondary-system); border-bottom-color: var(--color-cta-secondary-system); }
.leader-content-area { text-align: left; }
.analytics-stratum .governing-principle { margin-bottom: 2rem; border-left: 3px solid var(--color-cta-secondary-system); padding-left: 1.5rem; }
.system-insight { margin-top: 1.5rem; padding: 1rem; background: rgba(0,0,0,0.2); border-radius: var(--border-radius); }
.chart-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; justify-items: stretch; }
.chart-grid > * { width: 100%; }
.chart-container { display: flex; flex-direction: column; gap: 1rem; justify-items: stretch; }
.chart-container > * { width: 100%; }
.executive-summary { margin-top: 2rem; padding: 1.5rem; border-top: 1px solid var(--color-border); }

/* Actor Fingerprint Chart */
.analytic-item { display: grid; grid-template-columns: 1fr 100px auto 80px; gap: 1rem; align-items: center; margin-bottom: 0.5rem; font-family: var(--font-heading); }
.member-name { font-weight: 700; }
.archetype-tag { color: white; padding: 0.2rem 0.6rem; border-radius: 4px; text-align: center; font-size: 0.8rem; }
.impact-bar-container { width: 100%; background: var(--color-border); height: 10px; border-radius: 5px; }
.impact-bar { height: 100%; background: var(--color-progress); border-radius: 5px; }

/* Translator */
.translator-container { display: flex; flex-direction: column; gap: 1rem; }
.translated-output { padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--border-radius); background: var(--color-background-alpha); font-style: italic; }

/* ---------------------------------- */
/* 7. MERMAID THEME                   */
/* ---------------------------------- */
.mermaid {
  font-family: var(--font-heading) !important;
  text-align: center;
  margin: 1rem auto;
}
.mermaid text {
  fill: var(--color-foreground-omega) !important;
  font-family: var(--font-heading) !important;
}
.mermaid .pieTitleText {
  fill: var(--color-foreground-omega) !important;
  font-weight: 700;
}
.mermaid .label-container, .mermaid .legend-text {
    fill: var(--color-foreground-omega) !important;
}

/* ---------------------------------- */
/* 8. UTILITIES & RESPONSIVE          */
/* ---------------------------------- */
.loader { border: 4px solid var(--color-border); border-top: 4px solid var(--color-progress); border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 2rem auto; }
.loader-small { width: 20px; height: 20px; border-width: 2px; display: inline-block; vertical-align: middle; margin-right: 0.5rem; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.error { color: var(--color-error); font-weight: 700; text-align: center; }

@media (max-width: 768px) {
  .chart-grid, .schedule-grid { grid-template-columns: 1fr; }
  .day-column { min-height: 150px; }
  .card { padding: 1.5rem; }
  .wide-card { padding: 2rem; }
}

/* ============================================= */
/* ENHANCEMENTS FOR ONBOARDING COMPLETE          */
/* ============================================= */

.onboarding-complete-header {
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.insight-container-main {
    padding: 1rem 0;
}

.analysis-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: flex-start;
}

/* --- Main Insight (Left Column) --- */

.main-insight h4 {
    font-size: 1.1rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.main-insight .motivated-pattern {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--gold-color);
    margin-bottom: 1.5rem;
    font-family: 'Georgia', serif; /* Use a serif font for elegance */
}

.main-insight .narrative-synthesis {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-color);
}

/* --- Supporting Evidence (Right Column) --- */

.supporting-evidence {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.evidence-card {
    background-color: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
}

.evidence-card h5 {
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.evidence-card p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-top: 0;
    line-height: 1.5;
}

/* --- Skill Tags --- */

.skill-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.skill-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #e2e8f0; /* Light grey-blue */
    color: #2d3748; /* Dark grey-blue text */
    padding: 0.5rem 0.8rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid #cbd5e0;
}

.skill-icon {
    width: 16px;
    height: 16px;
    color: #4a5568;
}

/* --- Strategic Alignment --- */

.alignment-link {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.8rem 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    text-align: center;
}

/* --- Animation --- */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0; /* Start hidden */
}

.stagger-1 {
    animation-delay: 0.2s;
}

.stagger-2 {
    animation-delay: 0.4s;
}

/* --- Responsive Adjustments --- */
@media (max-width: 900px) {
    .analysis-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .main-insight {
        text-align: center;
    }
    .main-insight .motivated-pattern {
        font-size: 1.75rem;
    }
}

/* ============================================= */
/* == STYLES FOR WORK STYLE CALIBRATION CARDS == */
/* ============================================= */

/* --- Section Container --- */
/* Provides vertical spacing between the three pairs of cards. */
.calibration-section {
    margin-bottom: 2.5rem;
}

.calibration-section h4 {
    margin-bottom: 0.75rem;
    color: #555;
    font-weight: 600;
    text-align: left;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
}

/* --- Card Pair Container --- */
/* This is the flexbox container that holds two choice cards side-by-side. */
.card-pair-container {
    display: flex;
    gap: 20px; /* The space between the two cards */
    justify-content: center;
}

/* --- Individual Choice Card (Default State) --- */
/* This is the core style for the clickable cards. */
.choice-card {
    flex: 1; /* Allows both cards to grow and fill the space equally */
    display: flex; /* Enables vertical centering of content */
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
    min-height: 120px;
    border: 2px solid #dcdcdc; /* A clear but neutral default border */
    border-radius: 12px;
    background-color: #fcfcfc;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
    
    /* Smooth transition for all property changes (border, shadow, transform) */
    transition: all 0.2s ease-in-out;
}

/* --- Card Typography --- */
.choice-card p {
    margin: 0;
    color: #333;
    font-size: 1rem;
    line-height: 1.5;
}

.choice-card p strong {
    font-weight: 600;
    color: #000;
}

/* --- Interactive States --- */

/* Hover State: The card lifts slightly to invite a click. */
.choice-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
    border-color: #a0a0a0;
}

/* Selected State: Provides strong visual feedback that a choice has been made. */
.choice-card.selected {
    border-color: #007bff; /* Primary brand color */
    background-color: #f0f8ff; /* A very light, inviting blue */
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.2);
    transform: translateY(-4px); /* Keeps the lifted effect */
}

/* --- Typography for Selected Card --- */
/* Enhances readability and reinforces the selection. */
.choice-card.selected p {
    color: #004085; /* A darker, more saturated blue for text */
}

.choice-card.selected p strong {
    color: #007bff; /* The primary blue for the bolded text */
}


/* ============================================= */
/* ==          RESPONSIVE STYLES              == */
/* ============================================= */

/* On smaller screens (tablets and mobile), stack the cards vertically 
   instead of side-by-side to ensure readability and easy tapping. */
@media (max-width: 768px) {
    .card-pair-container {
        flex-direction: column; /* Stacks the flex items vertically */
    }

    .choice-card {
        min-height: auto; /* Allow height to be determined by content */
        padding: 20px;
    }

    .calibration-section {
        margin-bottom: 2rem;
    }
}

.project-entry {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-card-background);
  box-sizing: border-box;
  flex-shrink: 0; /* Prevent shrinking below set width */
}

.project-input-name,
.project-input-deadline,
.project-input-goal {
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-card-background);
  box-sizing: border-box; /* Ensures padding doesn't add to width */
  font-family: inherit; /* Inherit from parent for consistent measurement */
  font-size: 1rem; /* Assume 16px; match your app's input font-size */
}

#projects-form {
  justify-content: flex-start; /* Align boxes to left, preventing centering stretch */
}

@media (max-width: 768px) {
  #projects-form {
    flex-direction: column !important;
    gap: 1rem;
  }
  
  .project-entry {
    width: 100% !important;
    min-width: unset;
  }
}

/*# sourceMappingURL=styles.css.map*/