:root {
    --forest-green: #1b4332;
    --cedar-accent: #b05a3e;
    --alert-amber: #d97706;
    --light-bg: #f4f6f4;
    --dark-text: #2d3748;
}

/* .planner-root scopes the tool so it can live standalone or embedded in
   the Shopify theme without restyling theme chrome. */
.planner-root {
    font-family: 'Lato', sans-serif;
    background-color: var(--light-bg);
    color: var(--dark-text);
    margin: 0;
    padding: 0 0 1px 0; /* keeps the light background behind the last card */
}

/* Standalone page (index.html) only; inert inside the theme */
body { margin: 0; padding: 0; }

.planner-hero {
    background-color: var(--forest-green);
    color: white;
    padding: 40px 20px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    position: relative;
}

/* Top-right login for returning users */
.hero-login-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    background: transparent;
    border: 2px solid rgba(255,255,255,0.85);
    color: #fff;
    border-radius: 999px;
    padding: 8px 18px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    font-family: 'Lato', sans-serif;
    transition: background 0.2s;
    z-index: 20;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hero-login-btn:hover { background: rgba(255,255,255,0.12); }
.hero-login-btn[hidden] { display: none; }

.login-panel {
    position: absolute;
    top: 58px;
    right: 18px;
    width: 320px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
    padding: 20px;
    text-align: left;
    z-index: 30;
    color: var(--dark-text);
}
.login-panel[hidden] { display: none; }
.login-blurb { font-size: 13px; color: #4a5568; margin: 0 0 10px 0; line-height: 1.5; }
.login-panel input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 10px;
    transition: border 0.2s;
}
.login-panel input:focus { outline: none; border-color: var(--forest-green); }
.login-btn-full { width: 100%; }
@media (max-width: 600px) {
    .login-panel { position: fixed; top: 66px; left: 12px; right: 12px; width: auto; }
}

.planner-hero-logo {
    display: inline-block;
    background: #fff;
    border-radius: 10px;
    padding: 10px 24px;
    margin-bottom: 22px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.planner-hero-logo img { display: block; height: 56px; width: auto; }

.planner-hero h1 {
    margin: 0 0 10px 0;
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: white;
}

.planner-hero h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 18px;
    opacity: 0.9;
    margin: 0 0 25px 0;
    color: white;
}

.planner-hero .header-intro-box {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.planner-hero .header-intro-box p.intro-p1 {
    margin: 0 0 12px 0;
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.95;
}

.planner-hero .header-intro-box p.intro-emphasis {
    margin: 0 0 25px 0;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 700;
}

.planner-hero .header-intro-box h2.dream-subheader {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: white;
    margin: 0 0 10px 0;
}

.planner-hero .header-intro-box p.intro-p2 {
    margin: 0 0 30px 0;
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.95;
}

/* Auto-scrolling model gallery (Embla vanilla + auto-scroll plugin) */
.planner-hero .hero-models {
    margin: 28px auto 0 auto;
}
.planner-hero .embla__viewport {
    overflow: hidden;
    border-radius: 12px;
}
.planner-hero .embla__container {
    display: flex;
    margin-left: -14px;
    touch-action: pan-y pinch-zoom;
}
.planner-hero .embla__slide {
    flex: 0 0 auto;
    min-width: 0;
    padding-left: 14px;
}
.planner-hero .embla__slide img {
    display: block;
    height: 190px;
    width: auto;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
@media (max-width: 600px) {
    .planner-hero .embla__slide img { height: 130px; }
}

.planner-hero .features-list-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 25px;
    margin-top: 30px;
    text-align: left;
}

.planner-hero .features-list-card h4 {
    font-family: 'Poppins', sans-serif;
    margin: 0 0 15px 0;
    color: white;
    font-size: 18px;
}

.planner-hero .features-list-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 768px) { .planner-hero .features-list-card ul { grid-template-columns: 1fr; } }

.planner-hero .features-list-card li {
    font-size: 14px;
    line-height: 1.5;
    position: relative;
    padding-left: 25px;
}

/* Feature title on its own line, description beneath it */
.planner-hero .features-list-card li strong {
    display: block;
    margin-bottom: 3px;
}

.planner-hero .features-list-card li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--cedar-accent);
    font-weight: bold;
}

.planner-container {
    max-width: 1240px;
    margin: 30px auto;
    padding: 0 20px;
}

.planner-card {
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02), 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 25px;
}

.planner-card h3 {
    margin: 0 0 15px 0;
    color: var(--forest-green);
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    border-bottom: 2px solid #edf2f7;
    padding-bottom: 8px;
}

/* Input Fields Matrix */
.planner-input-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}
@media (min-width: 768px) { .planner-input-grid { grid-template-columns: 1fr 1fr; } }

.planner-form-group { display: flex; flex-direction: column; }
.planner-form-group label { font-size: 13px; font-weight: 700; margin-bottom: 6px; color: #4a5568; text-transform: uppercase; }
.planner-form-group input { padding: 12px; border: 1px solid #cbd5e0; border-radius: 6px; font-size: 14px; transition: border 0.2s; }
.planner-form-group input:focus { outline: none; border-color: var(--forest-green); }

/* Master Progress Display */
.planner-progress-container { text-align: center; }
.planner-progress-bar-container {
    background: #e2e8f0;
    border-radius: 20px;
    height: 24px;
    width: 100%;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 20px;
    border: 1px solid #cbd5e0;
}
.planner-progress-bar {
    background: linear-gradient(90deg, var(--cedar-accent), #d17a5d);
    height: 100%;
    width: 0%;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Adjustment Sliders UI */
.slider-group {
    background: #fdf2f0;
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
    border: 1px solid #fee2e2;
}
.slider-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 800;
    color: var(--cedar-accent);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.phase-slider {
    width: 100%;
    cursor: pointer;
    accent-color: var(--cedar-accent);
}

/* Gantt Visualization Engine */
.gantt-wrapper {
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: white;
    margin-top: 15px;
}
.gantt-chart {
    display: block; /* Switched to block layout to remove CSS grid fragility */
    min-width: 1000px;
}
.gantt-header-row {
    display: flex;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}
.gantt-header-label-cell {
    width: 240px;
    min-width: 240px;
    padding: 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--forest-green);
    box-sizing: border-box;
    border-right: 1px solid #e2e8f0;
}
.gantt-header-timeline-cells {
    display: flex;
    flex-grow: 1;
    position: relative;
}
.gantt-month-cell {
    flex: 1;
    padding: 12px 2px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    border-right: 1px solid #edf2f7;
    color: #64748b;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
}
.gantt-month-cell:last-child { border-right: none; }

.gantt-content-row {
    display: flex;
    border-bottom: 1px solid #edf2f7;
}
.gantt-content-row:last-child { border-bottom: none; }

.gantt-label {
    width: 240px;
    min-width: 240px;
    padding: 15px 12px;
    font-weight: 600;
    font-size: 13px;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
    box-sizing: border-box;
}
.gantt-label span { font-size: 10px; color: #94a3b8; font-weight: normal; margin-top: 2px; }

.timeline-track {
    flex-grow: 1;
    position: relative;
    background: #fafafa;
    height: 56px;
}
.gantt-bar {
    position: absolute;
    top: 15px;
    height: 26px;
    background: rgba(176, 90, 62, 0.15);
    border-radius: 13px;
    border: 1px solid var(--cedar-accent);
    overflow: hidden;
    box-sizing: border-box;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.gantt-fill {
    height: 100%;
    background: var(--forest-green);
    width: 0%;
    transition: width 0.4s ease;
}
.gantt-fill-active {
    background: rgba(27, 67, 50, 0.95) !important;
}

/* Main Architecture Components */
.planner-main-layout { display: grid; grid-template-columns: 1fr; gap: 25px; }
@media (min-width: 992px) { .planner-main-layout { grid-template-columns: 2.5fr 1fr; } }

.task-section {
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02), 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 25px;
    border-left: 5px solid var(--forest-green);
}
.task-section h2 { margin: 0 0 5px 0; color: var(--forest-green); font-size: 19px; font-family: 'Poppins', sans-serif; font-weight: 700; }
.phase-date-projection { font-size: 13px; font-weight: 600; color: var(--cedar-accent); margin-bottom: 15px; border-bottom: 2px solid #edf2f7; padding-bottom: 8px; }

.task-item { display: flex; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid #edf2f7; }
.task-item:last-child { border-bottom: none; }
.task-checkbox { width: 22px; height: 22px; margin-right: 16px; margin-top: 2px; cursor: pointer; accent-color: var(--forest-green); flex-shrink: 0; }
.task-text label { font-weight: 600; font-size: 15px; cursor: pointer; display: block; color: #1a202c; user-select: none; }
.task-desc { font-size: 13px; color: #4a5568; margin-top: 6px; line-height: 1.45; }

.lead-time-banner { background-color: #fffbeb; border-left: 4px solid var(--alert-amber); padding: 15px; border-radius: 0 8px 8px 0; margin-top: 10px; font-size: 13px; color: #92400e; line-height: 1.5; }
.completed label { text-decoration: line-through; color: #a0aec0; }
.completed .task-desc { color: #cbd5e0; }

.notes-group { margin-top: 20px; display: flex; flex-direction: column; }
.notes-group label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #718096; margin-bottom: 6px; }
.notes-input { width: 100%; min-height: 80px; padding: 12px; border: 1px solid #cbd5e0; border-radius: 6px; font-family: inherit; font-size: 13.5px; box-sizing: border-box; background-color: #fcfdfc; resize: vertical; color: var(--dark-text); }

.planner-sidebar-card { background: white; padding: 24px; border-radius: 12px; position: sticky; top: 25px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.02), 0 1px 3px rgba(0,0,0,0.05); }
.planner-cta-btn { display: block; background: var(--cedar-accent); color: white; text-decoration: none; padding: 14px 20px; border-radius: 8px; font-weight: 700; margin-top: 18px; transition: background 0.2s; }
.planner-cta-btn:hover { background: #94462e; }
.planner-reset-btn { background-color: #f7fafc; color: #e53e3e; border: 1px solid #fed7d7; padding: 10px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 15px; display: inline-block; }

/* ==========================================================================
   Cloud save, auth, report and Gantt additions (extends the legacy design;
   everything above this line is the untouched legacy stylesheet)
   ========================================================================== */

/* Save subsection inside the plan card (progress + download + save) */
.save-subsection {
    text-align: left;
    max-width: 560px;
    margin: 0 auto;
}
.save-subsection[hidden] { display: none; }
.save-divider { border-top: 1px solid #edf2f7; margin: 22px 0 18px 0; }
.save-heading {
    font-family: 'Poppins', sans-serif;
    color: var(--forest-green);
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 10px 0;
}

/* Reset row at the very bottom of the page */
.reset-row { text-align: center; margin: 10px 0 40px 0; }
.auth-row { display: flex; gap: 10px; flex-wrap: wrap; }
.auth-row input { flex: 1 1 200px; min-width: 0; padding: 12px; border: 1px solid #cbd5e0; border-radius: 6px; font-size: 14px; transition: border 0.2s; }
.auth-row input:focus { outline: none; border-color: var(--forest-green); }
.auth-btn { background: var(--forest-green); color: #fff; border: none; border-radius: 8px; padding: 12px 22px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: 'Lato', sans-serif; transition: background 0.2s; }
.auth-btn:hover { background: #143726; }
.auth-btn:disabled { opacity: 0.6; cursor: default; }
.auth-link-btn { background: none; border: none; color: var(--cedar-accent); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; font-family: 'Lato', sans-serif; }
.auth-blurb { font-size: 13.5px; color: #4a5568; margin: 0 0 12px 0; line-height: 1.5; }
.auth-msg { font-size: 13px; margin-top: 10px; min-height: 16px; color: #4a5568; }
.auth-msg.error { color: #b91c1c; }
.auth-msg.success { color: var(--forest-green); }
.auth-signedin-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.auth-signedin-row p { margin: 0; font-size: 14px; }
.digest-optin { display: flex; gap: 8px; align-items: center; font-size: 13px; color: #4a5568; margin-top: 14px; cursor: pointer; user-select: none; }
.digest-optin input { width: 16px; height: 16px; accent-color: var(--forest-green); flex-shrink: 0; }

/* Save status chip */
.save-chip { position: fixed; right: 16px; bottom: 16px; background: var(--forest-green); color: #fff; font-size: 12px; font-weight: 700; padding: 8px 14px; border-radius: 999px; box-shadow: 0 4px 10px rgba(0,0,0,0.18); z-index: 60; font-family: 'Lato', sans-serif; }
.save-chip[data-state="offline"] { background: var(--alert-amber); }
.save-chip[data-state="error"] { background: #b91c1c; }
.save-chip[hidden] { display: none; }

/* Toast */
.planner-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 60px; background: #1a202c; color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 13px; z-index: 70; box-shadow: 0 6px 18px rgba(0,0,0,0.25); }

/* Estimated build duration capsule (appears once both dates are set) */
.duration-capsule {
    display: inline-block;
    background: #f0f7f2;
    border: 1px solid #cfe3d6;
    color: var(--forest-green);
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 13.5px;
    font-weight: 600;
    margin-top: 15px;
    margin-right: 10px;
}
.duration-capsule strong { font-weight: 800; }
.duration-capsule[hidden] { display: none; }
.duration-capsule.short {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #92400e;
}

/* Tiered guidance under the capsule */
.duration-advisory {
    font-size: 13px;
    line-height: 1.5;
    margin: 10px 0 0 0;
    max-width: 640px;
}
.duration-advisory[hidden] { display: none; }
.duration-advisory.warn { color: #92400e; }
.duration-advisory.ok { color: var(--forest-green); }
.duration-advisory.info { color: #4a5568; }
.duration-advisory.error { color: #b91c1c; font-weight: 600; }
.advisory-action {
    background: none;
    border: none;
    padding: 0;
    color: var(--cedar-accent);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    font-family: 'Lato', sans-serif;
}
.advisory-action:hover { color: #94462e; }

/* Quick-set duration chips under the end date field */
.quickset-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.quickset-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
    letter-spacing: 0.4px;
}
.quickset-chip {
    background: #f0f7f2;
    border: 1px solid #cfe3d6;
    color: var(--forest-green);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Lato', sans-serif;
    transition: background 0.15s;
}
.quickset-chip:hover { background: #dfeee4; }
.quickset-max {
    font-size: 11px;
    color: #94a3b8;
    font-style: italic;
}

/* Section subtitle */
.info-subtitle {
    font-size: 13px;
    color: #718096;
    margin: -6px 0 15px 0;
}

/* Phase ownership badges (owner-led vs builder-involved) */
.phase-owner-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 5px 14px;
    margin: 2px 0 10px 0;
}
.phase-owner-badge.owner {
    background: #f0f7f2;
    border: 1px solid #cfe3d6;
    color: var(--forest-green);
}
.phase-owner-badge.builder {
    background: #fdf2f0;
    border: 1px solid #f3d4c9;
    color: var(--cedar-accent);
}

/* Construction hand-off divider between phases 4 and 5 */
.construction-divider {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-left: 5px solid var(--alert-amber);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 25px;
    font-size: 14px;
    color: #92400e;
    line-height: 1.55;
}

/* Model report line */
.model-line { margin-top: 15px; background: #f0f7f2; border: 1px solid #cfe3d6; border-radius: 8px; padding: 12px 14px; font-size: 14px; color: var(--forest-green); }
.model-line strong { font-weight: 700; }
.model-line span { color: #4a5568; }
.model-line[hidden] { display: none; }

/* PDF export button */
.pdf-export-btn {
    background-color: var(--cedar-accent);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s, background-color 0.2s;
}
.pdf-export-btn:hover { background-color: #94462e; transform: translateY(-1px); }
.pdf-gate-hint { font-size: 12.5px; color: #94a3b8; margin: 10px 0 0 0; }
.pdf-gate-hint[hidden] { display: none; }

/* Missing required fields flagged after a premature PDF attempt */
.planner-form-group input.field-error {
    border-color: #dc2626;
    background-color: #fef2f2;
}
.info-error-msg { color: #b91c1c; font-size: 13px; font-weight: 600; margin: 0 0 12px 0; }
.info-error-msg[hidden] { display: none; }

/* Today marker on Gantt tracks */
.today-marker { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--alert-amber); z-index: 5; }

/* Month boundary gridlines through the rows (calendar readability) */
.month-gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: #e8edf2; }

/* Weeks hint appended to the phase date projection */
.phase-weeks { color: #94a3b8; font-weight: 400; }

/* Month cells sized proportionally to actual days (inline flex-basis) */
.gantt-month-cell.proportional { flex: 0 0 auto; }

/* Print-only blocks stay hidden on screen */
.print-header, .print-footer, .print-snapshot, .print-gantt-caption,
.print-notes-mirror, .print-signoff { display: none; }

/* Small screens */
@media (max-width: 420px) {
    .auth-btn { width: 100%; }
    .save-chip { right: 10px; bottom: 10px; font-size: 11px; padding: 7px 12px; }
}