/* =========================================================
   SATAID Web - Forecast 48H Viewer
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    font-family: Arial, "Noto Sans Thai", sans-serif;
    background: #10151c;
    color: #e9eef5;
    overflow: hidden;
}

button,
input {
    font: inherit;
}


/* =========================================================
   Header
   ========================================================= */

.top-header {
    height: 64px;
    padding: 0 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #ffffff;
    border-bottom: 1px solid #d8dde5;
    color: #18202a;
}

.header-brand {
    min-width: 310px;

    display: flex;
    align-items: center;
    gap: 10px;
}

.header-logo {
    width: 46px;
    height: 46px;
    object-fit: contain;
    flex: 0 0 auto;
}

.header-agency {
    display: flex;
    flex-direction: column;
    line-height: 1.18;
    white-space: nowrap;
}

.header-agency strong {
    font-size: 21px;
    font-weight: 700;
}

.header-agency span {
    margin-top: 2px;
    font-size: 13px;
    color: #5c6570;
}

.main-nav {
    min-width: 0;

    display: flex;
    align-items: stretch;

    height: 100%;
    white-space: nowrap;
}

.main-nav a {
    position: relative;

    padding: 0 13px;

    display: flex;
    align-items: center;

    color: #202832;
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
}

.main-nav a:hover {
    background: #f2f5f8;
}

.main-nav a.active {
    color: #075ea8;
}

.main-nav a.active::after {
    content: "";
    position: absolute;

    left: 13px;
    right: 13px;
    bottom: 0;

    height: 3px;
    background: #075ea8;
}


/* =========================================================
   Workspace
   ========================================================= */

.forecast-workspace {
    height: calc(100vh - 64px);

    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);

    overflow: hidden;
}


/* =========================================================
   Product Sidebar
   ========================================================= */

.product-sidebar {
    min-width: 0;

    background: #f5f6f8;
    color: #1d252e;

    border-right: 1px solid #cfd5dc;

    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-heading {
    min-height: 55px;
    padding: 9px 13px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: #e9edf1;
    border-bottom: 1px solid #cfd5dc;
}

.sidebar-heading strong {
    font-size: 16px;
    line-height: 1.2;
}

.sidebar-heading span {
    margin-top: 2px;
    font-size: 12px;
    color: #6b737d;
}

.product-groups {
    padding: 7px;
}

.loading-text {
    padding: 14px 8px;
    font-size: 13px;
    color: #6c747d;
}

.product-group {
    margin-bottom: 8px;
}

.product-group-title {
    padding: 5px 7px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;

    color: #68717c;
    text-transform: uppercase;
}

.product-group-title .group-th {
    display: block;
    color: #343c45;
    font-size: 12px;
    text-transform: none;
}

.product-button {
    width: 100%;
    min-height: 43px;
    margin-bottom: 3px;
    padding: 6px 8px;

    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 5px;

    border: 1px solid transparent;
    border-radius: 4px;

    background: transparent;
    color: #141a20;

    text-align: left;
    cursor: pointer;
}

.product-button:hover {
    background: #e5e9ee;
}

.product-button.active {
    background: #dff3df;
    border-color: #78b987;

    box-shadow:
        inset 3px 0 0 #2f8f46,
        0 1px 3px rgba(20, 70, 38, 0.10);
}

.product-code {
    font-size: 14px;
    font-weight: 800;
    color: #11161b;
}

.product-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.product-level {
    font-size: 12px;
    font-weight: 700;
    color: #252d36;
}

.product-description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 10px;
    color: #737b84;
}


/* =========================================================
   Viewer
   ========================================================= */

.viewer-panel {
    min-width: 0;
    min-height: 0;

    display: grid;

    grid-template-rows:
        48px
        minmax(0, 1fr)
        32px
        42px
        58px;

    background: #111820;
}


/* =========================================================
   Viewer Toolbar
   ========================================================= */

.viewer-toolbar {
    min-width: 0;
    padding: 0 13px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    background: #ffffff;
    color: #18202a;

    border-bottom: 1px solid #d8dde3;
}

.product-title {
    min-width: 0;

    display: flex;
    align-items: baseline;
    gap: 8px;
}

.product-title strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 17px;
}

.product-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 12px;
    color: #727a84;
}

.run-information {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    gap: 17px;
}

.run-item {
    display: flex;
    align-items: baseline;
    gap: 5px;

    white-space: nowrap;
}

.info-label {
    font-size: 10px;
    font-weight: 700;
    color: #7b838c;
}

.run-item strong {
    font-size: 13px;
}

.forecast-hour-item strong {
    min-width: 35px;
    font-size: 18px;
    color: #075ea8;
}


/* =========================================================
   Image Stage
   ========================================================= */

.image-stage {
    position: relative;

    min-width: 0;
    min-height: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #080c11;
}

.forecast-image {
    display: none;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;
}

.forecast-image.visible {
    display: block;
}

.viewer-message {
    position: absolute;
    z-index: 2;

    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    padding: 9px 13px;

    border-radius: 4px;

    background: rgba(10, 15, 21, 0.86);
    color: #dce3ea;

    font-size: 13px;
    text-align: center;
}

.viewer-message.hidden {
    display: none;
}


/* =========================================================
   Valid Time
   ========================================================= */

.time-information {
    min-width: 0;
    padding: 0 13px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #171f28;
    border-top: 1px solid #28323d;

    color: #e7edf3;
}

.valid-time {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 7px;

    white-space: nowrap;
}

.time-label {
    font-size: 10px;
    font-weight: 700;
    color: #8f9aa6;
}

.valid-time strong {
    font-size: 12px;
}

.time-divider {
    color: #68737e;
}

.frame-counter {
    flex: 0 0 auto;
    margin-left: 12px;

    font-size: 11px;
    color: #9ca6b0;
}


/* =========================================================
   Controls
   ========================================================= */

.viewer-controls {
    padding: 4px 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    background: #f4f5f7;
    border-top: 1px solid #d2d7dc;
    border-bottom: 1px solid #d2d7dc;
}

.navigation-controls,
.display-controls {
    display: flex;
    align-items: center;
    gap: 5px;
}

.viewer-controls button {
    height: 32px;
    padding: 0 11px;

    border: 1px solid #bbc3cc;
    border-radius: 4px;

    background: #ffffff;
    color: #202831;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}

.viewer-controls button:hover:not(:disabled) {
    background: #e9edf1;
}

.viewer-controls button:disabled {
    opacity: 0.45;
    cursor: default;
}

#playButton.playing {
    background: #25313d;
    border-color: #25313d;
    color: #ffffff;
}


/* =========================================================
   Timeline
   ========================================================= */

.timeline-panel {
    min-width: 0;
    padding: 5px 14px 4px;

    background: #ffffff;
    color: #202831;
}

.timeline-header {
    height: 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size: 10px;
    color: #737c86;
}

.timeline-header strong {
    color: #075ea8;
    font-size: 12px;
}

#forecastTimeline {
    width: 100%;
    height: 17px;
    margin: 0;

    cursor: pointer;
}

.timeline-scale {
    display: flex;
    justify-content: space-between;

    margin-top: -1px;

    font-size: 9px;
    color: #7d858e;
}


/* =========================================================
   Presentation Mode
   ========================================================= */

body.presentation-mode .top-header,
body.presentation-mode .product-sidebar {
    display: none;
}

body.presentation-mode .forecast-workspace {
    height: 100vh;
    grid-template-columns: minmax(0, 1fr);
}

body.presentation-mode .viewer-panel {
    grid-column: 1;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-height: 800px) and (min-width: 1001px) {

    .top-header {
        height: 60px;
    }

    .header-logo {
        width: 42px;
        height: 42px;
    }

    .header-agency strong {
        font-size: 20px;
    }

    .main-nav a {
        padding-left: 11px;
        padding-right: 11px;
        font-size: 19px;
    }

    .forecast-workspace {
        height: calc(100vh - 60px);
    }

    .viewer-panel {
        grid-template-rows:
            46px
            minmax(0, 1fr)
            30px
            40px
            54px;
    }
}


@media (max-width: 1180px) {

    .header-brand {
        min-width: 270px;
    }

    .main-nav a {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 17px;
    }

    .forecast-workspace {
        grid-template-columns: 210px minmax(0, 1fr);
    }
}


@media (max-width: 900px) {

    body {
        overflow: auto;
    }

    .top-header {
        height: auto;
        min-height: 60px;
        padding: 7px 10px;

        flex-wrap: wrap;
        gap: 5px;
    }

    .header-brand {
        min-width: 0;
    }

    .header-logo {
        width: 40px;
        height: 40px;
    }

    .header-agency strong {
        font-size: 17px;
    }

    .header-agency span {
        font-size: 11px;
    }

    .main-nav {
        width: 100%;
        height: 38px;

        overflow-x: auto;
    }

    .main-nav a {
        flex: 0 0 auto;
        padding: 0 9px;

        font-size: 14px;
    }

    .forecast-workspace {
        height: auto;
        min-height: calc(100vh - 105px);

        display: block;
    }

    .product-sidebar {
        border-right: 0;
        border-bottom: 1px solid #cfd5dc;
    }

    .sidebar-heading {
        min-height: 45px;
    }

    .product-groups {
        display: flex;
        gap: 5px;

        overflow-x: auto;
    }

    .product-group {
        flex: 0 0 auto;
        margin: 0;
    }

    .product-group-title {
        display: none;
    }

    .product-button {
        width: auto;
        min-width: 120px;
    }

    .viewer-panel {
        min-height: 620px;
    }
}


@media (max-width: 620px) {

    .viewer-panel {
        grid-template-rows:
            auto
            minmax(330px, 1fr)
            auto
            auto
            58px;
    }

    .viewer-toolbar {
        padding: 6px 9px;

        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .product-title strong {
        font-size: 15px;
    }

    .run-information {
        width: 100%;
        justify-content: space-between;
    }

    .time-information {
        padding: 6px 9px;

        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .valid-time {
        flex-wrap: wrap;
    }

    .frame-counter {
        margin-left: 0;
    }

    .viewer-controls {
        padding: 5px 7px;
        flex-wrap: wrap;
    }

    .viewer-controls button {
        padding: 0 8px;
        font-size: 12px;
    }

    .display-controls {
        margin-left: auto;
    }
}

/* =========================================================
   DUMMY Information
   ========================================================= */

.dummy-info-button {
    flex: 0 0 auto;
    margin-left: 4px;
    padding: 3px 7px;

    border: 1px solid #b9c3cd;
    border-radius: 4px;

    background: #f5f7f9;
    color: #4b5865;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;

    cursor: pointer;
}

.dummy-info-button:hover,
.dummy-info-button:focus-visible {
    background: #e8edf2;
    color: #075ea8;
    border-color: #9aa8b6;
}

.dummy-info-dialog[hidden] {
    display: none;
}

.dummy-info-dialog {
    position: fixed;
    z-index: 10000;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(5, 10, 16, 0.58);
}

.dummy-info-card {
    width: min(520px, 100%);

    overflow: hidden;

    border: 1px solid #c8d0d8;
    border-radius: 7px;

    background: #ffffff;
    color: #202831;

    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.32);
}

.dummy-info-header {
    min-height: 45px;
    padding: 0 12px 0 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid #dce1e6;
    background: #f4f6f8;
}

.dummy-info-header strong {
    font-size: 16px;
}

.dummy-info-close {
    width: 32px;
    height: 32px;
    padding: 0;

    border: 0;
    border-radius: 4px;

    background: transparent;
    color: #59636e;

    font-size: 25px;
    line-height: 1;

    cursor: pointer;
}

.dummy-info-close:hover,
.dummy-info-close:focus-visible {
    background: #e1e6eb;
    color: #18202a;
}

.dummy-info-body {
    padding: 14px 16px 16px;

    font-size: 14px;
    line-height: 1.65;
}

.dummy-info-body p {
    margin: 0;
}

.dummy-info-body p + p {
    margin-top: 10px;
}

@media (max-width: 620px) {
    .dummy-info-button {
        font-size: 9px;
        padding: 3px 5px;
    }

    .dummy-info-dialog {
        padding: 12px;
    }

    .dummy-info-body {
        font-size: 13px;
    }
}



/* =========================================================
   Forecast Viewer — Satellite Style Harmonization
   ========================================================= */

.viewer-toolbar {
    min-height: 60px;
    padding: 6px 10px;

    display: flex;
    align-items: center;
    gap: 12px;

    background: #f3f6f8;
    border-bottom: 1px solid #c9d2da;
}

.product-information {
    flex: 1 1 auto;
    min-width: 180px;
}

.product-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.product-title strong {
    font-size: 17px;
    font-weight: 800;
    color: #17212b;
}

.product-title #productDescription {
    font-size: 12px;
    color: #687581;
}

.run-information {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    gap: 14px;

    white-space: nowrap;
}

.run-item {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.info-label {
    font-size: 9px;
    font-weight: 800;
    color: #697681;
}

.run-item strong {
    font-size: 11px;
    color: #26333f;
}

.forecast-hour-item strong {
    font-size: 17px;
    color: #075ea8;
}

.viewer-tools {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    gap: 5px;
}

.tool-button {
    min-height: 34px;
    padding: 5px 10px;

    border: 1px solid #bdc8d1;
    border-radius: 5px;

    background: #ffffff;
    color: #23313d;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

.tool-button:hover:not(:disabled) {
    background: #e8f0f6;
}

.tool-button:disabled {
    opacity: 0.42;
    cursor: default;
}

.primary-button {
    background: #087db7;
    border-color: #087db7;
    color: #ffffff;
}

.primary-button:hover:not(:disabled) {
    background: #066b9d;
}

.time-information {
    min-height: 32px;
}

.timeline-panel {
    border-top: 1px solid #c8d0d8;
}


/* Short desktop — preserve image area */
@media (min-width: 901px) and (max-height: 800px) {

    .viewer-toolbar {
        min-height: 48px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .product-title strong {
        font-size: 15px;
    }

    .tool-button {
        min-height: 31px;
        padding: 4px 8px;
        font-size: 12px;
    }

    .forecast-hour-item strong {
        font-size: 15px;
    }
}


/* Tablet / narrow desktop */
@media (max-width: 1150px) {

    .viewer-toolbar {
        flex-wrap: wrap;
    }

    .product-information {
        flex: 1 1 240px;
    }

    .viewer-tools {
        margin-left: auto;
    }
}


/* Mobile */
@media (max-width: 700px) {

    .viewer-toolbar {
        align-items: flex-start;
    }

    .run-information {
        width: 100%;
        justify-content: space-between;
    }

    .viewer-tools {
        width: 100%;
        overflow-x: auto;
        margin-left: 0;
    }

    .tool-button {
        flex: 0 0 auto;
    }
}



/* =========================================================
   Forecast Layout Polish v0.2
   - Compact sidebar
   - Header/menu balance
   - Maximum image area
   ========================================================= */


/* ---------- Institutional Header ---------- */

.top-header {
    min-height: 64px;
    padding-left: 10px;
    padding-right: 14px;
}

.header-brand,
.brand {
    flex: 0 0 auto;
}

.header-agency span,
.brand-subtitle {
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.1;
}


/* ---------- Main Navigation ---------- */

.main-nav {
    margin-left: auto;
    padding-right: 4px;

    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    gap: 0;
}

.main-nav a {
    padding-left: 15px;
    padding-right: 15px;

    color: #0d3f63;
    font-weight: 700;
}

.main-nav a:hover {
    color: #006fae;
}

.main-nav a.active {
    color: #0074b5;
}


/* ---------- Workspace / Sidebar ---------- */

.forecast-workspace {
    grid-template-columns: 198px minmax(0, 1fr);
}

.product-sidebar {
    width: 198px;
    min-width: 198px;
}

.product-sidebar .sidebar-heading {
    padding-left: 10px;
    padding-right: 8px;
}

.product-sidebar button,
.product-sidebar .product-item {
    padding-left: 10px;
    padding-right: 7px;
}


/* ---------- Viewer Height ---------- */

.viewer-panel {
    min-width: 0;
    min-height: 0;
    height: calc(100vh - 64px);

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.viewer-toolbar {
    flex: 0 0 auto;
}

.image-stage {
    flex: 1 1 auto;
    min-height: 0;
}

.forecast-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.time-information {
    flex: 0 0 30px;
    min-height: 30px;
}

.timeline-panel {
    flex: 0 0 58px;
    min-height: 58px;
    padding-top: 4px;
    padding-bottom: 3px;
}


/* ---------- Short Desktop ---------- */

@media (min-width: 901px) and (max-height: 820px) {

    .top-header {
        min-height: 60px;
    }

    .viewer-panel {
        height: calc(100vh - 60px);
    }

    .forecast-workspace {
        grid-template-columns: 190px minmax(0, 1fr);
    }

    .product-sidebar {
        width: 190px;
        min-width: 190px;
    }

    .timeline-panel {
        flex-basis: 52px;
        min-height: 52px;
    }
}


/* ---------- Tablet protection ---------- */

@media (max-width: 1100px) {

    .main-nav a {
        padding-left: 10px;
        padding-right: 10px;
    }

    .forecast-workspace {
        grid-template-columns: 185px minmax(0, 1fr);
    }

    .product-sidebar {
        width: 185px;
        min-width: 185px;
    }
}



/* =========================================================
   Forecast Header/Nav Harmonization with Satellite
   ========================================================= */

.top-header {
    min-height: 64px;

    display: flex;
    align-items: stretch;

    gap: 10px;

    padding-left: 12px;
    padding-right: 28px;

    background:
        linear-gradient(
            100deg,
            #08283f 0%,
            #0b3552 62%,
            #124765 100%
        );

    border-bottom: 3px solid #f0c63f;
}


/* Brand */

.header-brand {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 9px;
}

.header-logo {
    width: 46px;
    height: 46px;

    flex: 0 0 auto;

    object-fit: contain;
}

.header-agency strong {
    color: #ffffff;

    font-size: 22px;
    line-height: 1;

    font-weight: 800;

    white-space: nowrap;
}

.header-agency span {
    margin-top: 4px;

    display: block;

    color: #e4f0f6;

    font-size: 14px !important;
    line-height: 1.1;

    font-weight: 600;

    white-space: nowrap;
}


/* Main navigation */

.main-nav {
    min-width: 0;

    flex: 1 1 auto;

    margin-left: auto;
    padding-right: 0;

    display: flex;
    align-items: stretch;
    justify-content: flex-end;

    gap: 0;

    overflow: hidden;
}

.main-nav a {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding-left: 14px;
    padding-right: 14px;

    color: #ffffff !important;

    text-decoration: none;
    white-space: nowrap;

    font-size: 17px;
    line-height: 1.2;

    font-weight: 700;

    border-bottom: 5px solid transparent;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}

.main-nav a:hover {
    color: #ffffff !important;

    background: rgba(255, 255, 255, 0.11);
}

.main-nav a.active {
    color: #ffffff !important;

    background: rgba(255, 255, 255, 0.15);

    border-bottom-color: #74d2ff;

    font-weight: 800;
}


/* Short desktop */

@media (min-width: 901px) and (max-height: 820px) {

    .top-header {
        min-height: 60px;
    }

    .header-logo {
        width: 42px;
        height: 42px;
    }

    .header-agency strong {
        font-size: 20px;
    }

    .header-agency span {
        font-size: 14px !important;
    }

    .main-nav a {
        padding-left: 12px;
        padding-right: 12px;

        font-size: 16px;
    }
}


/* Large desktop */

@media (min-width: 1800px) {

    .top-header {
        padding-right: 32px;
    }

    .main-nav a {
        padding-left: 17px;
        padding-right: 17px;

        font-size: 18px;
    }
}



/* =========================================================
   Forecast Operational Readability v0.1
   Improve long-distance monitor readability
   without changing layout dimensions
   ========================================================= */


/* ---------- Viewer product secondary text ---------- */

.product-title #productDescription {
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
    color: #536270;
}


/* ---------- Run / Forecast information ---------- */

.info-label {
    font-size: 10px;
    line-height: 1.2;
    font-weight: 800;
}

.run-item strong {
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
}

.forecast-hour-item strong {
    font-size: 17px;
    line-height: 1;
    font-weight: 800;
}


/* ---------- Sidebar secondary information ---------- */

.product-sidebar .group-title,
.product-sidebar .group-title-en {
    line-height: 1.15;
}

.product-sidebar .product-level {
    font-size: 12px;
    line-height: 1.15;
    font-weight: 700;
}

.product-sidebar .product-description {
    font-size: 10.5px;
    line-height: 1.15;
    font-weight: 500;
}


/* ---------- Valid Time ---------- */

.time-label {
    font-size: 10px;
    font-weight: 800;
}

.valid-time strong {
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
}

.frame-counter {
    font-size: 11px;
    font-weight: 700;
}


/* ---------- Forecast Timeline ---------- */

.timeline-header {
    font-size: 10.5px;
    line-height: 1.15;
    font-weight: 600;
}

#timelineForecastHour {
    font-size: 12px;
    font-weight: 800;
}

.timeline-scale {
    font-size: 10.5px;
    line-height: 1.15;
    font-weight: 600;
}


/* ---------- Short desktop protection ---------- */

@media (min-width: 901px) and (max-height: 820px) {

    .product-title #productDescription {
        font-size: 11.5px;
    }

    .run-item strong {
        font-size: 11px;
    }

    .product-sidebar .product-level {
        font-size: 11px;
    }

    .product-sidebar .product-description {
        font-size: 10px;
    }

    .valid-time strong {
        font-size: 11px;
    }

    .timeline-scale {
        font-size: 10px;
    }
}



/* =========================================================
   SATAID WEB - MAIN OPERATIONAL TASKS
========================================================= */

.main-task-menu {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;

    padding: 8px 7px 7px;

    background: #f5f6f8;
    border-bottom: 1px solid #cfd5dc;
}

.main-task-item {
    width: 100%;
    min-height: 42px;

    display: flex;
    align-items: center;

    padding: 6px 9px;

    color: #102b1a;
    background: #e5f6e8;

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

    font-size: 14px;
    line-height: 1.2;
    font-weight: 800;

    text-decoration: none;

    box-sizing: border-box;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.main-task-item:hover {
    color: #102b1a;
    background: #d5efd9;
    border-color: #8bc69a;
}

.main-task-item.active {
    color: #102b1a;
    background: #bfe8c6;

    border-color: #72b984;

    box-shadow:
        inset 4px 0 0 #27844b,
        0 1px 2px rgba(20, 70, 38, 0.14);

    padding-left: 11px;
}

.main-task-item:focus-visible {
    outline: 2px solid #27844b;
    outline-offset: 2px;
}

@media (max-width: 1020px) {

    .main-task-menu {
        padding-left: 6px;
        padding-right: 6px;
    }

    .main-task-item {
        min-height: 39px;
        padding: 5px 7px;
        font-size: 13px;
    }

    .main-task-item.active {
        padding-left: 9px;
    }
}


/* =========================================================
   SATAID WEB
   Forecast Header Typography v0.2

   Match Satellite operational pages.
========================================================= */

@media (min-width: 1350px) {

    .main-nav a {
        font-size: 21px;
        font-weight: 700;
    }

}

/* =========================================================
   Forecast toolbar — next-step instruction
   ========================================================= */
.viewer-toolbar .product-information {
    flex: 0 1 auto;
}

.forecast-next-hint {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #075ea8;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.forecast-next-hint strong {
    font-weight: 800;
}

@media (max-width: 1150px) {
    .forecast-next-hint {
        order: 3;
        flex: 1 0 100%;
        text-align: left;
        white-space: normal;
    }
}

@media (max-width: 700px) {
    .forecast-next-hint {
        order: 0;
        font-size: 12px;
    }
}