/* ============================================================
   LONG-RANGE OUTLOOK PAGE
   Extracted from known-good harper.css during modular migration.
   Do not merge page-specific rules back into harper-core.css.
   ============================================================ */

/* ============================================================
   LONG-RANGE OUTLOOK — V0.1
   ============================================================ */

.outlook-page {
    max-width: 1180px;
}

.outlook-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.outlook-site-name {
    color: var(--blue-dark);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.055em;
}

.outlook-header h1 {
    margin: 4px 0 2px;
}

.outlook-question {
    margin: 0;
    color: #596b79;
    font-size: 1.05rem;
    font-weight: 700;
}

.outlook-back-link {
    white-space: nowrap;
    color: var(--blue-dark);
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
}

.outlook-back-link:hover {
    text-decoration: underline;
}


.outlook-hero {
    padding: 26px 30px;
    background:
        linear-gradient(135deg, #eef5f8 0%, #f8f4e8 100%);
    border: 1px solid #c9d8e2;
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.outlook-eyebrow {
    color: #567287;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.outlook-hero h2 {
    margin: 7px 0 10px;
    color: var(--blue-dark);
    font-size: 1.65rem;
}

.outlook-hero p {
    max-width: 850px;
    margin: 0;
    line-height: 1.55;
}

.outlook-source-line {
    margin-top: 14px;
    color: #667885;
    font-size: 0.78rem;
    font-weight: 700;
}


.outlook-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.outlook-status-card {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.06);
}

.outlook-status-icon {
    font-size: 1.65rem;
    margin-bottom: 6px;
}

.outlook-status-label {
    color: #617483;
    font-size: 0.73rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.055em;
}

.outlook-status-value {
    margin-top: 4px;
    color: var(--blue-dark);
    font-size: 1.15rem;
    font-weight: 900;
}

.outlook-status-card p {
    margin-bottom: 0;
    color: #536675;
    font-size: 0.86rem;
    line-height: 1.45;
}

.outlook-temp {
    border-top: 5px solid #9a7b58;
}

.outlook-precip {
    border-top: 5px solid #397ba8;
}

.outlook-drought {
    border-top: 5px solid #55905c;
}

.outlook-winter {
    border-top: 5px solid #7d83aa;
}


.ranch-takeaway {
    margin-top: 18px;
    padding: 22px 26px;
    background: #f4f8ee;
    border: 1px solid #cad9bc;
    border-left: 6px solid #668f4e;
    border-radius: 12px;
}

.ranch-takeaway-heading {
    color: #36592f;
    font-size: 1.12rem;
    font-weight: 900;
}

.ranch-takeaway-disclaimer {
    margin-top: 3px;
    color: #62745a;
    font-size: 0.78rem;
    font-style: italic;
    font-weight: 700;
}

.ranch-takeaway p {
    margin-bottom: 0;
    line-height: 1.55;
}


.outlook-details {
    margin-top: 22px;
}

.outlook-section-heading {
    margin-bottom: 10px;
    color: var(--blue-dark);
    font-size: 1.1rem;
    font-weight: 900;
}

.outlook-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.outlook-detail-card {
    padding: 17px 19px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 11px;
}

.outlook-detail-card h3 {
    margin: 0 0 6px;
    color: var(--blue-dark);
    font-size: 1rem;
}

.outlook-detail-card p {
    margin: 0 0 8px;
    color: #566978;
    font-size: 0.86rem;
    line-height: 1.45;
}

.outlook-detail-card a {
    color: var(--blue-dark);
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
}

.outlook-detail-card a:hover {
    text-decoration: underline;
}


.outlook-confidence-note {
    margin-top: 18px;
    padding: 15px 18px;
    background: #f5f6f7;
    border: 1px solid #d7dde2;
    border-radius: 9px;
    color: #566671;
    font-size: 0.82rem;
    line-height: 1.5;
}


.outlook-footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 24px;
    padding: 14px 2px 4px;
    border-top: 1px solid var(--border);
    color: #73818b;
    font-size: 0.76rem;
}


@media (max-width: 850px) {
    .outlook-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .outlook-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 580px) {
    .outlook-status-grid,
    .outlook-detail-grid {
        grid-template-columns: 1fr;
    }

    .outlook-footer {
        flex-direction: column;
    }
}


/* ============================================================
   LONG-RANGE OUTLOOK — V0.2 ICONS
   ============================================================ */

.outlook-status-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 9px;
}

.outlook-status-icon svg {
    display: block;
    width: 52px;
    height: 52px;
}

.outlook-icon-bg {
    stroke: none;
}

.outlook-icon-stroke {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.outlook-icon-fill {
    fill: currentColor;
    stroke: none;
}

.outlook-icon-temp {
    color: #a95a34;
}

.outlook-icon-temp .outlook-icon-bg {
    fill: #f3e5dd;
}

.outlook-icon-rain {
    color: #2679b8;
}

.outlook-icon-rain .outlook-icon-bg {
    fill: #e2eef8;
}

.outlook-icon-drought {
    color: #4f8c50;
}

.outlook-icon-drought .outlook-icon-bg {
    fill: #e5f0e3;
}

.outlook-icon-winter {
    color: #4779b8;
}

.outlook-icon-winter .outlook-icon-bg {
    fill: #e5ebf6;
}


/* ============================================================
   LONG-RANGE OUTLOOK — LIVE STATUS
   ============================================================ */

.outlook-live-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;

    margin-top: 13px;
    padding-top: 11px;

    border-top: 1px solid rgba(90, 115, 132, 0.22);

    color: #5d6f7c;
    font-size: 0.76rem;
    line-height: 1.4;
}

.outlook-live-status strong {
    color: #465d6e;
    font-weight: 900;
}

.outlook-live-status[hidden] {
    display: none !important;
}


/* Long-range outlook subtitle emphasis */
.outlook-question {
    color: #dfeaf4;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}


.ranch-takeaway-update-note {
    margin-top: 12px;
    padding-top: 9px;
    border-top: 1px solid rgba(102, 143, 78, 0.28);
    color: #5f7157;
    font-size: 0.76rem;
    font-weight: 700;
    font-style: italic;
}


/* ============================================================
   OFFICIAL NOAA / CPC OUTLOOK CARD ICONS
   ============================================================ */

.outlook-detail-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 7px;
}

.outlook-detail-heading h3 {
    margin: 0;
}

.outlook-detail-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
}

.outlook-detail-icon svg {
    display: block;
    width: 40px;
    height: 40px;
}

.cpc-icon-bg {
    stroke: none;
}

.cpc-icon-stroke {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cpc-icon-fill {
    fill: currentColor;
    stroke: none;
}

.cpc-icon-temp {
    color: #b45f35;
}

.cpc-icon-temp .cpc-icon-bg {
    fill: #f3e3da;
}

.cpc-icon-rain {
    color: #2578b5;
}

.cpc-icon-rain .cpc-icon-bg {
    fill: #e2eef8;
}

.cpc-icon-drought {
    color: #a06d2d;
}

.cpc-icon-drought .cpc-icon-bg {
    fill: #f3ead8;
}

.cpc-icon-enso {
    color: #4f6fa8;
}

.cpc-icon-enso .cpc-icon-bg {
    fill: #e6ebf5;
}


/* ============================================================
   LONG-RANGE OUTLOOK — WEATHER GEEK DEEP DIVE
   ============================================================ */

.outlook-geek {
    margin-top: 20px;
    border: 1px solid #cbd7e1;
    border-radius: 12px;
    background: #f8fafc;
    overflow: hidden;
}

.outlook-geek summary {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 18px;
    cursor: pointer;
    background: #eef4f8;
    color: var(--blue-dark);
}

.outlook-geek summary:hover {
    background: #e8f0f6;
}

.outlook-geek-title {
    font-size: 1rem;
    font-weight: 900;
}

.outlook-geek-subtitle {
    color: #607486;
    font-size: 0.78rem;
    font-weight: 700;
}

.outlook-geek-body {
    padding: 18px;
}

.outlook-geek-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.outlook-geek-card {
    padding: 14px 16px;
    border: 1px solid #d4dde5;
    border-radius: 10px;
    background: white;
}

.outlook-geek-label {
    color: #607486;
    font-size: 0.71rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.055em;
}

.outlook-geek-value {
    margin-top: 3px;
    color: var(--blue-dark);
    font-size: 1rem;
    font-weight: 900;
}

.outlook-geek-card p,
.outlook-geek-discussion p,
.outlook-geek-change p {
    color: #536675;
    font-size: 0.84rem;
    line-height: 1.5;
}

.outlook-geek-discussion,
.outlook-geek-change {
    margin-top: 15px;
    padding: 14px 16px;
    border-left: 4px solid #6b879c;
    background: #f1f5f8;
    border-radius: 8px;
}

.outlook-geek-discussion h3,
.outlook-geek-change h3 {
    margin: 0 0 5px;
    color: var(--blue-dark);
    font-size: 0.92rem;
}

.outlook-geek-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 15px;
}

.outlook-geek-links a {
    color: var(--blue-dark);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.outlook-geek-links a:hover {
    text-decoration: underline;
}

@media (max-width: 680px) {
    .outlook-geek-grid {
        grid-template-columns: 1fr;
    }
}


/* Weather Geek Deep Dive icon */

.outlook-geek-title {
    display: flex;
    align-items: center;
    gap: 9px;
}

.geek-dive-icon {
    width: 48px;
    height: 27px;
    flex: 0 0 auto;
    overflow: visible;
}

.geek-dive-board {
    fill: none;
    stroke: #52697b;
    stroke-width: 2.4;
    stroke-linecap: round;
}

.geek-dive-person {
    fill: none;
    stroke: #0f568b;
    stroke-width: 2.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

circle.geek-dive-person {
    fill: #0f568b;
    stroke: none;
}

.geek-dive-water {
    fill: none;
    stroke: #2b86c5;
    stroke-width: 2.2;
    stroke-linecap: round;
}


/* ============================================================
   WEATHER GEEK — DATA GRAPHICS
   ============================================================ */

.geek-viz-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 15px;
}

.geek-viz-card {
    padding: 16px 18px;
    background: white;
    border: 1px solid #d4dde5;
    border-radius: 10px;
}

.geek-viz-title {
    margin-bottom: 9px;
    color: var(--blue-dark);
    font-size: 0.9rem;
    font-weight: 900;
}

.geek-ring-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}

.geek-ring {
    width: 145px;
    height: 145px;
    flex: 0 0 auto;
}

.geek-ring-track {
    fill: none;
    stroke: #dce5eb;
    stroke-width: 15;
}

.geek-ring-value {
    fill: none;
    stroke: #277cad;
    stroke-width: 15;
    stroke-linecap: round;

    stroke-dasharray: 364.4;
    stroke-dashoffset: 91.1;
}

.geek-ring-number {
    fill: var(--blue-dark);
    font-size: 30px;
    font-weight: 900;
}

.geek-ring-label {
    fill: #667b89;
    font-size: 11px;
    font-weight: 800;
}

.geek-viz-caption {
    color: #5c6f7d;
    font-size: 0.78rem;
    line-height: 1.45;
}

.precip-probability-viz {
    padding-top: 12px;
}

.precip-scale-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    color: #6b7c89;
    font-size: 0.7rem;
    font-weight: 800;
}

.precip-scale {
    position: relative;
    height: 28px;
}

.precip-scale-base {
    position: absolute;
    left: 0;
    right: 0;
    top: 8px;

    height: 12px;

    background: #e1e8ed;
    border-radius: 8px;
}

.precip-probability-band {
    position: absolute;
    top: 8px;

    left: 26%;
    width: 37%;

    height: 12px;

    background: #4b91bd;
    border-radius: 8px;
}

.precip-probability-mid {
    position: absolute;
    top: 4px;
    left: 44.5%;

    width: 3px;
    height: 20px;

    background: #174d74;
    border-radius: 2px;
}

.precip-probability-number {
    margin: 11px 0 9px;

    color: #465d6e;
    font-size: 0.82rem;
    font-weight: 700;
}

.precip-probability-number span {
    margin-right: 4px;
    color: var(--blue-dark);
    font-size: 1.35rem;
    font-weight: 900;
}

@media (max-width: 680px) {
    .geek-viz-grid {
        grid-template-columns: 1fr;
    }

    .geek-ring-wrap {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ============================================================
   WEATHER GEEK — OFFICIAL CPC SEASONAL MAPS
   ============================================================ */

.cpc-map-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 15px;
}

.cpc-map-card {
    min-width: 0;
    padding: 14px;

    background: white;
    border: 1px solid #d4dde5;
    border-radius: 10px;
}

.cpc-map-title {
    margin-bottom: 9px;

    color: var(--blue-dark);
    font-size: 0.9rem;
    font-weight: 900;
}

.cpc-map-card a {
    display: block;
}

.cpc-map-card img {
    display: block;

    width: 100%;
    height: auto;

    border: 1px solid #d2dbe2;
    border-radius: 6px;

    background: white;
}

.cpc-map-caption {
    margin-top: 8px;

    color: #617380;
    font-size: 0.74rem;
    line-height: 1.4;
}

@media (max-width: 680px) {
    .cpc-map-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   WEATHER GEEK — EL NINO / JET STREAM SCHEMATIC
   ============================================================ */

.jetstream-card {
    margin-top: 14px;
    padding: 16px 18px;

    background: white;
    border: 1px solid #d4dde5;
    border-radius: 10px;
}

.jetstream-title {
    color: var(--blue-dark);
    font-size: 0.95rem;
    font-weight: 900;
}

.jetstream-subtitle {
    margin-top: 2px;
    margin-bottom: 10px;

    color: #738592;
    font-size: 0.72rem;
    font-weight: 700;
}

.jetstream-diagram {
    display: block;
    width: 100%;
    height: auto;

    border-radius: 8px;
    background: #f7fafc;
}

.jet-pacific {
    fill: #e8f2f8;
    stroke: #a8c7da;
    stroke-width: 2;
}

.subtropical-jet {
    fill: none;
    stroke: #377fae;
    stroke-width: 12;
    stroke-linecap: round;
}

.jet-arrow-head {
    fill: #377fae;
}

.storm-arrow-head {
    fill: #5795b8;
}

.rain-arrow {
    stroke: #5795b8;
    stroke-width: 3;
}

.jet-label {
    fill: #315975;
    font-size: 17px;
    font-weight: 800;
}

.jet-big-label {
    fill: #124f7b;
    font-size: 25px;
    font-weight: 900;
}

.jet-small-label {
    fill: #647b8b;
    font-size: 14px;
    font-weight: 700;
}

.harper-dot {
    fill: #b94536;
    stroke: white;
    stroke-width: 3;
}

.harper-label {
    fill: #84362e;
    font-size: 15px;
    font-weight: 900;
}

.storm-system circle {
    fill: #eef3f6;
    stroke: #687e8c;
    stroke-width: 2;
}

.storm-system path {
    fill: none;
    stroke: #687e8c;
    stroke-width: 2;
}

.jet-rain-label {
    fill: #365d75;
    font-size: 15px;
    font-weight: 800;
}

.jetstream-caption {
    margin: 10px 4px 0;

    color: #5d707e;
    font-size: 0.79rem;
    line-height: 1.5;
}

/* ============================================================
   LONG-RANGE OUTLOOK — RETURN TO FORECAST CENTER
   ============================================================ */

.outlook-return {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin: 14px 0 12px;
    padding: 10px 14px;

    background: #e9f2f8;
    border: 1px solid #bfd3e1;
    border-radius: 9px;

    color: var(--blue-dark);
    text-decoration: none;
}

.outlook-return:hover {
    background: #dfeef7;
    border-color: #9fbed2;
}

.outlook-return-arrow {
    font-size: 2.2rem;
    line-height: 1;
    font-weight: 900;
}

.outlook-return strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 900;
}

.outlook-return small {
    display: block;
    margin-top: 1px;

    color: #617887;
    font-size: 0.72rem;
    font-weight: 700;
}


/* === OUTLOOK UPDATE LINE === */
.outlook-update-line {
    margin: -2px 0 14px;
    color: #61788b;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.outlook-update-line span {
    font-weight: 700;
}

/* === TOP WHAT CHANGED SUMMARY === */

.outlook-change-summary {
    margin: 2px 0 18px;
    padding: 12px 15px;
    border-left: 4px solid #6b879c;
    border-radius: 7px;
    background: #f1f5f8;
}

.outlook-change-label {
    margin-bottom: 3px;
    color: var(--blue-dark);
    font-size: 0.84rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.outlook-change-summary p {
    margin: 0;
    color: #344957;
    font-size: 0.9rem;
    line-height: 1.5;
}