/* ============================================================================
   ProImpact Data Hub design system
   Shared by ComIn, CDS, DestinE, Freva, STAC/Intake, Local and LOCO.
   Keep application-specific CSS here only when a component has unique behavior.
   ============================================================================ */

:root {
    --dh-bg: #f4f7fb;
    --dh-surface: #ffffff;
    --dh-surface-soft: #f8fafc;
    --dh-surface-muted: #f1f5f9;
    --dh-border: #dfe6ef;
    --dh-border-strong: #cbd5e1;
    --dh-text: #14213d;
    --dh-muted: #64748b;
    --dh-primary: #1769e0;
    --dh-primary-dark: #0f56bd;
    --dh-primary-soft: #edf5ff;
    --dh-success: #159447;
    --dh-success-soft: #eaf8ef;
    --dh-warning: #a15c00;
    --dh-warning-soft: #fff7e6;
    --dh-danger: #b42318;
    --dh-danger-soft: #fff0ee;
    --dh-teal: #087f8c;
    --dh-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    --dh-radius: 14px;
    --dh-radius-sm: 9px;

    /* Compatibility for the specialised ComIn workflow components. */
    --comin-bg: var(--dh-bg);
    --comin-surface: var(--dh-surface);
    --comin-surface-soft: var(--dh-surface-soft);
    --comin-border: var(--dh-border);
    --comin-border-strong: var(--dh-border-strong);
    --comin-text: var(--dh-text);
    --comin-muted: var(--dh-muted);
    --comin-primary: var(--dh-primary);
    --comin-primary-dark: var(--dh-primary-dark);
    --comin-primary-soft: var(--dh-primary-soft);
    --comin-success: var(--dh-success);
    --comin-success-soft: var(--dh-success-soft);
    --comin-purple: #7c3aed;
    --comin-shadow: var(--dh-shadow);
    --comin-radius: var(--dh-radius);
}

/* ---- Page shell ---------------------------------------------------------- */
.dh-page,
#page-wrapper {
    min-height: calc(100vh - 44px);
    box-sizing: border-box;
    padding: 28px clamp(18px, 4vw, 56px) 56px;
    background:
        radial-gradient(circle at 88% 4%, rgba(23, 105, 224, 0.055), transparent 24%),
        var(--dh-bg);
    color: var(--dh-text);
    font-family: "Segoe UI", "Inter", Roboto, Arial, sans-serif;
}

.dh-header {
    max-width: 1480px;
    margin: 0 auto 26px;
}

.dh-eyebrow {
    margin-bottom: 7px;
    color: var(--dh-primary);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dh-title {
    margin: 0;
    color: var(--dh-text);
    font-size: clamp(2rem, 3vw, 2.65rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.dh-subtitle {
    max-width: 760px;
    margin: 10px 0 0;
    color: var(--dh-muted);
    font-size: 1rem;
    line-height: 1.65;
}

.dh-layout {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    max-width: 1480px;
    margin: 0 auto;
}

.dh-grid {
    display: grid;
    gap: 22px;
    max-width: 1480px;
    margin: 0 auto;
}

.dh-grid--two {
    grid-template-columns: minmax(300px, 0.9fr) minmax(420px, 1.4fr);
}

.dh-content {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.dh-content--single {
    max-width: 1100px;
    margin: 0 auto;
}

.dh-content-main {
    min-width: 0;
}

.dh-sidebar,
.dh-panel {
    box-sizing: border-box;
    border: 1px solid var(--dh-border);
    border-radius: var(--dh-radius);
    background: var(--dh-surface);
    box-shadow: var(--dh-shadow);
}

.dh-sidebar {
    position: sticky;
    top: 18px;
    padding: 20px;
}

.dh-panel {
    padding: 22px;
}

.dh-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.dh-panel h2,
.dh-sidebar h2,
#content-wrapper h2 {
    margin: 0 0 14px;
    color: var(--dh-text);
    font-size: 1.08rem;
    line-height: 1.35;
}

.dh-panel h3,
.dh-sidebar h3,
#content-wrapper h3 {
    margin: 22px 0 10px;
    color: var(--dh-text);
    font-size: 0.95rem;
}

.dh-panel h4,
#content-wrapper h4,
.dh-panel h5,
#content-wrapper h5 {
    color: var(--dh-text);
}

.dh-hint {
    margin: 6px 0 10px;
    color: var(--dh-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.dh-link {
    display: block;
    margin-top: 10px;
    color: var(--dh-primary);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
}

.dh-link:hover { text-decoration: underline; }

/* ---- Forms --------------------------------------------------------------- */
.dh-sidebar label,
.dh-panel label,
#content-wrapper label {
    display: block;
    margin: 14px 0 6px;
    color: #334155;
    font-size: 0.84rem;
    font-weight: 700;
}

.dh-page input[type="text"],
.dh-page input[type="number"],
.dh-page input[type="password"],
.dh-page textarea,
#page-wrapper input[type="text"],
#page-wrapper input[type="number"],
#page-wrapper input[type="password"],
#page-wrapper textarea {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid var(--dh-border-strong);
    border-radius: 8px;
    background: var(--dh-surface);
    color: var(--dh-text);
    font: inherit;
}

.dh-page input[type="text"],
.dh-page input[type="number"],
.dh-page input[type="password"],
#page-wrapper input[type="text"],
#page-wrapper input[type="number"],
#page-wrapper input[type="password"] {
    min-height: 40px;
    padding: 9px 11px;
}

.dh-page textarea,
#page-wrapper textarea {
    padding: 12px;
    line-height: 1.5;
    resize: vertical;
}

.dh-page input:focus,
.dh-page textarea:focus,
#page-wrapper input:focus,
#page-wrapper textarea:focus {
    outline: 3px solid rgba(23, 105, 224, 0.12);
    border-color: var(--dh-primary);
}

.dh-page .Select-control,
#page-wrapper .Select-control {
    border-color: var(--dh-border-strong);
    border-radius: 8px;
}

.dh-page .Select-menu-outer,
#page-wrapper .Select-menu-outer { z-index: 1100; }

/* ---- Actions ------------------------------------------------------------- */
.dh-inline-actions,
.button-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
}

.dh-button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.dh-button:hover,
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(15, 23, 42, 0.10);
}

.dh-button:disabled,
.btn:disabled {
    cursor: not-allowed;
    opacity: .5;
    transform: none;
    box-shadow: none;
}

.dh-button--primary,
.normal-button {
    background: var(--dh-primary);
    color: #fff;
}
.dh-button--primary:hover,
.normal-button:hover { background: var(--dh-primary-dark); }

.dh-button--secondary {
    border-color: var(--dh-border-strong);
    background: var(--dh-surface);
    color: var(--dh-text);
}
.dh-button--secondary:hover { border-color: #9eb0c4; background: var(--dh-surface-soft); }

.success-button { background: var(--dh-success); color: #fff; }
.danger-button { background: var(--dh-danger); color: #fff; }
.teal-button { background: var(--dh-teal); color: #fff; }

/* ---- Status / output ----------------------------------------------------- */
.dh-status,
.status-message {
    margin: 12px 0;
    font-size: 0.84rem;
    line-height: 1.5;
}
.status-warning { color: var(--dh-danger); }
.status-success { color: var(--dh-success); }
.status-info { color: #1d5f9e; }

.display-box,
.log-box,
.status-box,
#catalog-status-message,
#catalog-preview,
#dataset-output,
#metadata-output {
    margin-top: 12px;
    padding: 13px 14px;
    border: 1px solid var(--dh-border);
    border-radius: 9px;
    background: var(--dh-surface-soft);
    color: #334155;
    font-size: 0.84rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.log-box {
    max-height: 320px;
    overflow-y: auto;
    font-family: "SFMono-Regular", Consolas, monospace;
}
.log-box:empty { display: none; }

/* ---- Tables -------------------------------------------------------------- */
.dh-page .dash-table-container,
#page-wrapper .dash-table-container {
    overflow: hidden;
    border: 1px solid var(--dh-border);
    border-radius: 9px;
}

/* ---- Shared utility components ------------------------------------------ */
.dh-inline-actions code {
    overflow: hidden;
    color: var(--dh-muted);
    font-size: 0.74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checkbox-column-group {
    column-count: 3;
    column-gap: 24px;
    margin-top: 10px;
}
.checkbox-column-group label { break-inside: avoid-column; }

.plot-container { margin-top: 20px; text-align: center; }
.plot-image {
    display: block;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    border-radius: 9px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .10);
}
.plot-caption { margin-top: 8px; color: var(--dh-muted); text-align: center; }

/* ---- Local preview specifics -------------------------------------------- */
.local-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 10px;
}
.local-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--dh-border);
    border-radius: 8px;
    background: var(--dh-surface-soft);
}
.local-metric-label {
    color: var(--dh-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.local-statistics { display: grid; gap: 8px; margin-top: 12px; }
.local-stat-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
    border-bottom: 1px solid var(--dh-border);
    font-size: .84rem;
}
.local-note { color: var(--dh-muted); font-size: .8rem; line-height: 1.5; }
.local-error { color: var(--dh-danger); }
.local-gridlook-button.is-disabled { pointer-events: none; opacity: .5; }

/* ---- LOCO streaming specifics ------------------------------------------- */
.loco-controls label { display: block; margin: 14px 0 6px; font-weight: 700; }
.loco-gridlook-link {
    display: inline-block;
    margin-top: 9px;
    color: var(--dh-teal);
    font-weight: 700;
    text-decoration: none;
}
.loco-gridlook-link:hover { text-decoration: underline; }
.loco-gridlook-link--disabled { pointer-events: none; color: #94a3b8; }
.loco-error { min-height: 20px; margin-top: 12px; color: var(--dh-danger); font-size: .82rem; }
.loco-status-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.loco-status-heading h2 { margin-bottom: 0; }
.loco-badge,
.cds-source-badge {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--dh-surface-muted);
    color: var(--dh-muted);
    font-size: .72rem;
    font-weight: 800;
}
.loco-badge--ok { background: var(--dh-success-soft); color: #18794e; }
.loco-badge--error { background: var(--dh-danger-soft); color: var(--dh-danger); }
.loco-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.loco-metric { padding: 12px; border: 1px solid var(--dh-border); border-radius: 8px; background: var(--dh-surface-soft); min-height: 58px; }
.loco-metric-label { display: block; margin-bottom: 5px; color: var(--dh-muted); font-size: .72rem; }
.loco-metric-value { display: block; overflow-wrap: anywhere; font-size: 1.05rem; }
.loco-history { max-height: 300px; overflow: auto; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--dh-border); color: var(--dh-muted); font-size: .82rem; }
.loco-history ol { margin: 0; padding-left: 24px; }
.loco-history li { padding: 5px 0; }
.loco-history strong { color: var(--dh-text); }

/* ---- CDS workbench specifics -------------------------------------------- */
.cds-request-editor,
.cds-code-editor,
.json-input {
    min-height: 250px;
    font-family: "SFMono-Regular", Consolas, monospace !important;
    font-size: .82rem !important;
}
.cds-code-editor { min-height: 300px; background: #ffffff !important; color: var(--dh-text) !important; border: 1px solid var(--dh-border) !important; }
.cds-inline-status { color: var(--dh-muted); font-size: .82rem; }
.cds-success { color: var(--dh-success); }
.cds-error { color: var(--dh-danger); }
.cds-overview {
    display: grid;
    gap: 14px;
}
.cds-overview-heading {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--dh-border);
}
.cds-overview-title {
    margin: 0 0 8px;
    font-size: 1.06rem;
    line-height: 1.35;
}
.cds-overview-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.cds-description { margin: 0; color: #475569; line-height: 1.65; max-width: 92ch; }
.cds-credential-status { padding: 10px; border-radius: 8px; background: var(--dh-surface-soft); font-size: .82rem; }
.cds-scope { margin-top: 12px; color: #475569; font-size: .84rem; }

/* ---- Freva specifics ----------------------------------------------------- */
.freva-input { max-width: 520px; font-family: "SFMono-Regular", Consolas, monospace !important; }
.freva-radio-items { margin-bottom: 20px; }
.freva-radio-items .dash-radio-items label { display: block; margin-bottom: 6px; }
.upload-box {
    margin-bottom: 1em;
    padding: 1em;
    border: 2px dashed var(--dh-border-strong);
    border-radius: 10px;
    background: var(--dh-surface-soft);
    cursor: pointer;
    text-align: center;
}
.manual-textarea { min-height: 95px; }
.manual-status { margin-top: 15px; color: #334155; font-weight: 700; }

/* ---- DestinE specifics --------------------------------------------------- */
.section-title { margin: 0 0 16px; color: var(--dh-text); font-size: 1.08rem; }
.form-label { display: block; margin: 16px 0 6px; color: #334155; font-size: .84rem; font-weight: 700; }
.json-input { width: 100% !important; height: 300px; }

/* ---- STAC / Intake specifics -------------------------------------------- */
#plugin-panel a { color: var(--dh-primary); font-weight: 700; text-decoration: none; }
#plugin-panel a:hover { text-decoration: underline; }
#plugin-panel ul { margin: 10px 0 0; padding-left: 18px; }
.catalog-entry-item {
    padding: 8px 12px;
    border: 1px solid var(--dh-border);
    border-radius: 7px;
    background: var(--dh-surface-soft);
    text-align: center;
    font-size: .84rem;
}
.dataset-controls-title { margin: 24px 0 12px; color: var(--dh-text); font-size: .95rem; font-weight: 800; }
.input-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; margin-bottom: 10px; }
.input-controls > div { display: flex; min-width: 180px; flex: 1 1 180px; flex-direction: column; }
.frosted-card { margin: 20px 0; padding: 18px; border: 1px solid var(--dh-border); border-radius: 10px; background: var(--dh-surface-soft); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
    .dh-layout,
    .dh-grid--two { grid-template-columns: 1fr; }
    .dh-sidebar { position: static; }
    .checkbox-column-group { column-count: 2; }
}

@media (max-width: 560px) {
    .dh-page,
    #page-wrapper { padding: 22px 14px 42px; }
    .dh-panel,
    .dh-sidebar { padding: 16px; }
    .loco-metrics { grid-template-columns: 1fr; }
    .checkbox-column-group { column-count: 1; }
}


/* ---- ComIn workflow components ------------------------------------------ */
/* ==========================================================================
   ComIn professional workflow layout
   ========================================================================== */


.comin-page {
    min-height: calc(100vh - 44px);
    padding: 28px clamp(20px, 4vw, 64px) 56px;
    background:
        radial-gradient(circle at 85% 5%, rgba(23, 105, 224, 0.06), transparent 25%),
        var(--comin-bg);
    color: var(--comin-text);
}

.comin-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    max-width: 1480px;
    margin: 0 auto 26px;
}

.comin-eyebrow {
    margin-bottom: 7px;
    color: var(--comin-primary);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.comin-page-title {
    margin: 0;
    color: var(--comin-text);
    font-size: clamp(2rem, 3vw, 2.65rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.comin-page-subtitle {
    max-width: 700px;
    margin: 10px 0 0;
    color: var(--comin-muted);
    font-size: 1rem;
    line-height: 1.65;
}

.comin-mode-tabs-wrapper {
    min-width: 380px;
}

.comin-mode-tabs {
    border: 1px solid var(--comin-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--comin-surface);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.comin-mode-tab {
    padding: 15px 22px !important;
    border: 0 !important;
    background: var(--comin-surface) !important;
    color: var(--comin-muted) !important;
    font-weight: 700 !important;
}

.comin-mode-tab--active {
    border-bottom: 3px solid var(--comin-primary) !important;
    background: var(--comin-primary-soft) !important;
    color: var(--comin-primary) !important;
}

.comin-workspace {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    max-width: 1480px;
    margin: 0 auto;
}

.comin-summary-card,
.comin-stepper,
.comin-workflow-card {
    border: 1px solid var(--comin-border);
    border-radius: var(--comin-radius);
    background: var(--comin-surface);
    box-shadow: var(--comin-shadow);
}

.comin-summary-card {
    position: sticky;
    top: 18px;
    overflow: hidden;
}

.comin-card-heading {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.comin-summary-card > .comin-card-heading {
    padding: 20px;
    border-bottom: 1px solid var(--comin-border);
    background: linear-gradient(180deg, #ffffff, #fbfdff);
}

.comin-card-heading h3 {
    margin: 0;
    color: var(--comin-text);
    font-size: 1.08rem;
    line-height: 1.3;
}

.comin-card-heading p {
    margin: 4px 0 0;
    color: var(--comin-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

.comin-heading-icon {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    flex: 0 0 34px;
    border-radius: 9px;
    background: var(--comin-primary-soft);
    color: var(--comin-primary);
    font-size: 1.05rem;
    font-weight: 800;
}

.comin-heading-icon--green {
    background: var(--comin-success-soft);
    color: var(--comin-success);
}

.comin-heading-icon--purple {
    background: #f3edff;
    color: var(--comin-purple);
}

.comin-summary-section {
    padding: 18px 20px;
    border-bottom: 1px solid var(--comin-border);
}

.comin-summary-label {
    display: block;
    margin-bottom: 9px;
    color: var(--comin-text);
    font-size: 0.78rem;
    font-weight: 800;
}

.comin-summary-value,
.comin-summary-dataset {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #334155;
    font-size: 0.84rem;
    line-height: 1.4;
}

.comin-status-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
}

.comin-summary-path {
    overflow-wrap: anywhere;
    color: #334155;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.77rem;
    line-height: 1.55;
}

.comin-summary-file-icon {
    display: inline-grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 8px;
    background: #eef2f7;
    color: #475569;
}

.comin-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 9px;
    color: var(--comin-muted);
    font-size: 0.79rem;
}

.comin-summary-row strong {
    max-width: 145px;
    overflow: hidden;
    color: var(--comin-text);
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comin-ready-panel {
    display: flex;
    gap: 10px;
    margin: 17px;
    padding: 13px;
    border: 1px solid #bde8cb;
    border-radius: 10px;
    background: var(--comin-success-soft);
}

.comin-ready-icon {
    display: inline-grid;
    width: 23px;
    height: 23px;
    place-items: center;
    flex: 0 0 23px;
    border-radius: 50%;
    background: var(--comin-success);
    color: white;
    font-size: 0.74rem;
}

.comin-ready-panel strong {
    color: #166534;
    font-size: 0.8rem;
}

.comin-ready-panel p {
    margin: 3px 0 0;
    color: #398150;
    font-size: 0.7rem;
    line-height: 1.4;
}

.comin-main-column {
    min-width: 0;
}

/* ==========================================================================
   Workflow stepper
   ========================================================================== */
/* Arrange the steps as compact circle-and-label units. */
.comin-stepper {
    display: flex;
    align-items: flex-start;
    padding: 22px 30px;
    margin-bottom: 18px;
}

/* Keep each circle and label group aligned as one step block. */
.comin-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 0 0 auto;
    min-width: 0;
    color: var(--comin-muted);
    text-align: left;
}

/* Use the explicit spacer elements as flexible connector lines. */
.comin-step-line {
    display: block;
    flex: 1;
    align-self: flex-start;

    height: 1px;
    margin: 19px 28px 0;

    background: var(--comin-border);
}

/* Disable legacy pseudo-element connectors to avoid double lines. */
.comin-step:nth-child(1)::after,
.comin-step:nth-child(3)::after {
    display: none;
    content: none;
}

/* Fixed border-box dimensions keep numbers centered in the circles. */
.comin-step-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0;
    margin: 0;

    border: 1px solid var(--comin-border-strong);
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;

    box-sizing: border-box;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1;
}

.comin-step > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 120px;
    padding-top: 1px;
}

.comin-step strong {
    color: #475569;
    font-size: 0.85rem;
    line-height: 1.25;
}

.comin-step div > span {
    margin-top: 3px;
    color: var(--comin-muted);
    font-size: 0.72rem;
    line-height: 1.3;
}

.comin-step--active strong {
    color: var(--comin-primary);
}

.comin-step--active .comin-step-number {
    border-color: var(--comin-primary);
    background: var(--comin-primary);
    color: #ffffff;
    box-shadow: 0 0 0 5px rgba(23, 105, 224, 0.12);
}

.comin-workflow-card {
    padding: 24px;
    margin-bottom: 18px;
}

.comin-workflow-card > .comin-card-heading {
    margin-bottom: 23px;
}

.comin-field-label {
    display: block;
    margin-bottom: 8px;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 800;
}

.comin-source-selector {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 22px;
}

.comin-source-option {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--comin-border-strong);
    border-radius: 9px;
    background: var(--comin-surface);
    color: #475569;
    font-size: 0.82rem;
    font-weight: 750;
    cursor: pointer;
    transition: 160ms ease;
}

.comin-source-option:has(input:checked) {
    border-color: var(--comin-primary);
    background: var(--comin-primary-soft);
    color: var(--comin-primary);
    box-shadow: inset 0 0 0 1px rgba(23, 105, 224, 0.12);
}

.comin-source-radio {
    margin-right: 8px;
    accent-color: var(--comin-primary);
}

.comin-form-grid {
    display: grid;
    gap: 16px;
    align-items: start;
}

.comin-form-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.comin-form-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.comin-form-grid--two .comin-dropdown {
    margin-bottom: 0;
}

/* ==========================================================================
   Dropdowns and current-path display
   ========================================================================== */

.comin-dropdown {
    margin: 0 0 16px;
}

/* Legacy Dash/react-select dropdown structure. */
.comin-dropdown .Select-control {
    height: 48px;
    min-height: 48px;
    border-color: var(--comin-border-strong);
    border-radius: 8px;
    box-shadow: none;
}

/* Newer Dash/react-select dropdown structure. */
.comin-dropdown .Select__control {
    height: 48px;
    min-height: 48px;
    border-color: var(--comin-border-strong);
    border-radius: 8px;
    box-shadow: none;
}

/* Vertically center legacy dropdown values and placeholders. */
.comin-dropdown .Select-placeholder,
.comin-dropdown .Select-value,
.comin-dropdown .Select-input {
    height: 46px;
    line-height: 46px;
}

.comin-dropdown .Select-value-label {
    line-height: 46px;
}

.comin-dropdown .Select-control:hover,
.comin-dropdown .Select__control:hover {
    border-color: #94a3b8;
}

.comin-dropdown.is-focused .Select-control,
.comin-dropdown .Select__control--is-focused {
    border-color: var(--comin-primary);
    box-shadow: 0 0 0 3px rgba(23, 105, 224, 0.1);
}

/* Match the current-folder box height to the dataset-location dropdown. */
.comin-path-box {
    display: flex;
    align-items: center;

    width: 100%;
    height: 64px;
    min-height: 64px;
    margin: 0 0 16px;
    padding: 0 13px;

    overflow: hidden;
    border: 1px solid var(--comin-border-strong);
    border-radius: 8px;
    background: var(--comin-surface);
    color: #475569;

    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.84rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comin-button-cell {
    padding-bottom: 16px;
}

.comin-btn {
    min-height: 43px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform 150ms ease,
        box-shadow 150ms ease,
        background 150ms ease;
}

.comin-btn:hover {
    transform: translateY(-1px);
}

.comin-btn--secondary {
    border-color: var(--comin-primary);
    background: white;
    color: var(--comin-primary);
}

.comin-btn--secondary:hover {
    background: var(--comin-primary-soft);
}

.comin-btn--primary {
    min-width: 166px;
    background: linear-gradient(135deg, #16a34a, #11823c);
    color: white;
    box-shadow: 0 7px 16px rgba(21, 148, 71, 0.2);
}

.comin-btn--primary:hover {
    box-shadow: 0 10px 20px rgba(21, 148, 71, 0.26);
}

.comin-inline-message {
    min-height: 20px;
    margin: 0 0 14px;
    color: var(--comin-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.comin-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 2px;
}

.comin-action-row .comin-inline-message {
    margin: 0;
}

.comin-statistics {
    min-height: 55px;
    margin: 0 0 18px;
    padding: 13px 15px;
    overflow-x: auto;
    border: 1px solid var(--comin-border);
    border-radius: 9px;
    background: var(--comin-surface-soft);
    color: #475569;
    font-size: 0.75rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

.comin-plot-container {
    min-height: 390px;
    overflow: hidden;
    border: 1px solid var(--comin-border);
    border-radius: 11px;
    background:
        linear-gradient(45deg, #f8fafc 25%, transparent 25%),
        linear-gradient(-45deg, #f8fafc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f8fafc 75%),
        linear-gradient(-45deg, transparent 75%, #f8fafc 75%),
        white;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    background-size: 20px 20px;
}

.comin-empty-state {
    display: grid;
    min-height: 390px;
    place-items: center;
    align-content: center;
    padding: 30px;
    text-align: center;
}

.comin-empty-icon {
    display: inline-grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 14px;
    background: var(--comin-primary-soft);
    color: var(--comin-primary);
    font-size: 1.45rem;
}

.comin-empty-state h4 {
    margin: 13px 0 5px;
    color: #334155;
}

.comin-empty-state p {
    margin: 0;
    color: var(--comin-muted);
    font-size: 0.83rem;
}

.comin-plot-container .plot-image {
    display: block;
    width: 100%;
    height: auto;
}

/* Existing callback status classes */
.status-message.status-success,
.comin-inline-message.status-success {
    color: var(--comin-success);
}

.status-message.status-warning,
.comin-inline-message.status-warning {
    color: #b45309;
}

.status-message.status-info,
.comin-inline-message.status-info {
    color: var(--comin-muted);
}

/* Namelist generator compatibility */
#comin-mode-content > .frosted-card {
    max-width: 1480px;
    margin: 0 auto;
    padding: 26px;
    border: 1px solid var(--comin-border);
    border-radius: var(--comin-radius);
    background: var(--comin-surface);
    box-shadow: var(--comin-shadow);
}

#comin-plugin-parameter-fields {
    display: grid;
    grid-template-columns: minmax(180px, 0.5fr) minmax(260px, 1fr);
    gap: 12px 18px;
    align-items: center;
    margin-top: 20px;
}

#comin-plugin-description,
#comin-namelist-preview {
    margin-top: 16px;
    padding: 15px;
    border: 1px solid var(--comin-border);
    border-radius: 9px;
    background: var(--comin-surface-soft);
    white-space: pre-wrap;
}

@media (max-width: 1100px) {
    .comin-page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .comin-mode-tabs-wrapper {
        min-width: 0;
        width: 100%;
    }

    .comin-workspace {
        grid-template-columns: 1fr;
    }

    .comin-summary-card {
        position: static;
    }

    .comin-form-grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .comin-button-cell {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   Mobile layout
   ========================================================================== */

@media (max-width: 720px) {
    /* Convert the horizontal stepper into a vertical timeline. */
    .comin-stepper {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .comin-step {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr);
        align-items: center;
        justify-items: start;
        min-width: 0;
        text-align: left;
    }

    .comin-step:nth-child(1)::after,
    .comin-step:nth-child(3)::after {
        top: 38px;
        left: 18px;
        width: 1px;
        height: 24px;
    }

    .comin-step > div {
        align-items: flex-start;
        margin-left: 12px;
    }

    .comin-step strong,
    .comin-step div > span {
        text-align: left;
    }

    .comin-step-number {
        margin-bottom: 0;
    }

    .comin-step + .comin-step {
        margin-top: 24px;
    }
}

/* ==========================================================================
   Dataset metadata summary
   ========================================================================== */

.comin-dataset-metadata {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--comin-border);
}

.comin-dataset-metadata .comin-summary-row {
    margin-top: 8px;
}

.comin-dataset-metadata .comin-summary-row:first-child {
    margin-top: 0;
}

.comin-dataset-metadata .comin-summary-row strong {
    max-width: 160px;
    color: var(--comin-text);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Form-field guidance
   ========================================================================== */
.comin-field-hint {
    min-height: 20px;
    margin: 6px 0 0;
    color: var(--comin-muted);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.55;
}

/* ---- ComIn namelist editor ---------------------------------------------- */
/* ==========================================================================
   Namelist workspace width
   ========================================================================== */

/*
 * Match the maximum width and horizontal alignment of the ComIn preview
 * workspace. Border-box sizing prevents card padding from increasing the
 * effective page width.
 */
.comin-nl-workspace {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    box-sizing: border-box;
}

.comin-nl-card,
.comin-nl-preview-section {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   Main card and heading
   ========================================================================== */

.comin-nl-card,
.comin-nl-preview-section {
    border: 1px solid var(--comin-border, #d8e2ef);
    border-radius: 14px;
    background: var(--comin-surface, #ffffff);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.comin-nl-card {
    padding: 24px;
}

.comin-nl-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--comin-border, #d8e2ef);
}

.comin-nl-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    background: #f3edff;
    color: #7c3aed;
    font-size: 1rem;
    font-weight: 800;
}

.comin-nl-header-text h3,
.comin-nl-parameters-header h3,
.comin-nl-help-header h3,
.comin-nl-preview-header h3 {
    margin: 0;
    color: var(--comin-text, #0f2445);
}

.comin-nl-header-text p,
.comin-nl-parameters-header p,
.comin-nl-preview-header p {
    margin: 5px 0 0;
    color: var(--comin-muted, #617493);
    line-height: 1.45;
}

/* ==========================================================================
   Two-column workspace
   ========================================================================== */

.comin-nl-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 28px;
    padding-top: 22px;
}

.comin-nl-form-column {
    min-width: 0;
}

.comin-nl-help-column {
    align-self: start;
    min-width: 0;
    padding: 20px;
    border: 1px solid #d7e4f4;
    border-radius: 12px;
    background: #f8fbff;
}

.comin-nl-help-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.comin-nl-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1769e0;
    color: #ffffff;
    font-weight: 800;
}

.comin-nl-help-section {
    padding: 15px 0;
    border-bottom: 1px solid #dce7f3;
}

.comin-nl-help-section h4 {
    margin: 0 0 7px;
    color: #173f79;
    font-size: 0.9rem;
}

.comin-nl-help-section p,
.comin-nl-help-note,
.comin-nl-help-examples {
    color: #45648f;
    font-size: 0.78rem;
    line-height: 1.55;
}

.comin-nl-help-section p {
    margin: 0 0 6px;
}

.comin-nl-help-note {
    margin: 5px 0;
    font-weight: 600;
}

.comin-nl-help-examples {
    margin: 6px 0 0;
    padding-left: 20px;
}

.comin-nl-help-tip {
    margin-top: 18px;
    padding: 13px;
    border: 1px solid #cce0f8;
    border-radius: 9px;
    background: #edf6ff;
    color: #1769e0;
}

.comin-nl-help-tip p {
    margin: 5px 0 0;
    font-size: 0.76rem;
    line-height: 1.45;
}

/* ==========================================================================
   Plugin selection and information
   ========================================================================== */

.comin-nl-field {
    min-width: 0;
    margin-bottom: 16px;
}

.comin-nl-field-label {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-bottom: 8px;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 800;
}

.comin-nl-field-unit {
    color: #64748b;
    font-weight: 700;
}

.comin-nl-dropdown {
    margin: 0;
}

.comin-nl-dropdown .Select-control,
.comin-nl-dropdown .Select__control {
    min-height: 48px;
    border-color: #c9d6e6;
    border-radius: 8px;
    box-shadow: none;
}

.comin-nl-plugin-info {
    margin: 14px 0 20px;
    padding: 15px 16px;
    border: 1px solid #d5e0ed;
    border-radius: 9px;
    background: #f8fafc;
}

.comin-nl-plugin-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    color: #334155;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.75rem;
}

.comin-nl-plugin-description {
    margin: 10px 0 0;
    color: #475569;
    font-size: 0.82rem;
    line-height: 1.55;
}

/* ==========================================================================
   Output-format selector
   ========================================================================== */

.comin-nl-format-block {
    margin: 0 0 22px;
}

.comin-nl-format-options {
    display: flex;
    gap: 10px;
}

.comin-nl-format-option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 110px;
    padding: 11px 15px;
    border: 1px solid #ccd8e8;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    font-weight: 700;
}

.comin-nl-format-option:has(input:checked) {
    border-color: #1769e0;
    background: #eaf3ff;
    color: #075fd3;
}

.comin-nl-format-radio {
    accent-color: #1769e0;
}

/* ==========================================================================
   Parameter controls
   ========================================================================== */

.comin-nl-parameters-header {
    margin: 8px 0 16px;
}

.comin-nl-parameters-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}

.comin-nl-input {
    width: 100%;
    height: 48px;
    padding: 0 12px;
    border: 1px solid #c9d6e6;
    border-radius: 8px;
    background: #ffffff;
    color: #1e293b;
    box-sizing: border-box;
    font-size: 0.88rem;
    outline: none;
}

.comin-nl-input:focus {
    border-color: #1769e0;
    box-shadow: 0 0 0 3px rgba(23, 105, 224, 0.11);
}

.comin-nl-checkbox-field {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid #d7e1ed;
    border-radius: 8px;
    background: #fbfdff;
}

.comin-nl-checkbox label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 650;
}

.comin-nl-checkbox input {
    accent-color: #1769e0;
}

.comin-nl-parameter-group {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid #dce5ef;
}

.comin-nl-parameter-group-title {
    margin: 0 0 14px;
    color: #1e3a5f;
    font-size: 0.9rem;
}

.comin-nl-empty-parameters {
    grid-column: 1 / -1;
    margin: 0;
    padding: 14px;
    border: 1px dashed #cbd8e7;
    border-radius: 8px;
    color: #64748b;
}

/* ==========================================================================
   Actions and status
   ========================================================================== */

.comin-nl-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 22px;
}

.comin-nl-button {
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 7px;
    background: #16a34a;
    color: #ffffff;
    cursor: pointer;
    font-size: 0.83rem;
    font-weight: 800;
    box-shadow: 0 7px 16px rgba(22, 163, 74, 0.22);
}

.comin-nl-button:hover {
    background: #15803d;
}

.comin-nl-status {
    min-height: 18px;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
}

.comin-nl-status--success {
    color: #15803d;
}

.comin-nl-status--warning {
    color: #b91c1c;
}

/* ==========================================================================
   Generated document preview
   ========================================================================== */

.comin-nl-preview-section {
    margin-top: 18px;
    padding: 22px;
}

.comin-nl-preview-section--hidden {
    display: none;
}

.comin-nl-preview-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.comin-nl-preview-header > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #f3edff;
    color: #7c3aed;
}

.comin-nl-preview {
    max-height: 520px;
    margin: 0;
    padding: 17px;
    overflow: auto;
    border: 1px solid #d8e2ed;
    border-radius: 9px;
    background: #f8fafc;
    color: #24364f;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.76rem;
    line-height: 1.55;
    white-space: pre-wrap;
}

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

@media (max-width: 980px) {
    .comin-nl-top-grid {
        grid-template-columns: 1fr;
    }

    .comin-nl-help-column {
        order: 2;
    }
}

@media (max-width: 680px) {
    .comin-nl-card,
    .comin-nl-preview-section {
        padding: 18px;
    }

    .comin-nl-parameters-grid {
        grid-template-columns: 1fr;
    }

    .comin-nl-format-options,
    .comin-nl-action-row {
        flex-direction: column;
        align-items: stretch;
    }

    .comin-nl-button {
        width: 100%;
    }
}

/* ==========================================================================
   Parameter help controls
   ========================================================================== */

.comin-nl-parameter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.comin-nl-parameter-header .comin-nl-field-label {
    margin-bottom: 0;
}

.comin-nl-help-button {
    flex: 0 0 auto;
    padding: 4px 9px;
    border: 1px solid #b9cde7;
    border-radius: 6px;
    background: #f4f8fd;
    color: #1769e0;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.3;
}

.comin-nl-help-button:hover {
    border-color: #1769e0;
    background: #eaf3ff;
}

.comin-nl-help-empty {
    display: flex;
    min-height: 220px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #64748b;
    text-align: center;
}

.comin-nl-help-empty h4 {
    margin: 0 0 7px;
    color: #334155;
}

.comin-nl-help-empty p {
    max-width: 280px;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.55;
}


/* ---- Refined STAC / Intake workspace ------------------------------------ */
.stac-workspace { grid-template-columns: minmax(260px, 315px) minmax(0, 1fr); }
.stac-sidebar { display: flex; flex-direction: column; gap: 4px; }
.stac-full-button { width: 100%; margin-top: 12px; }
.stac-catalog-preview { margin-top: 16px; }
.stac-plugin-list { margin: 8px 0 0; padding-left: 18px; color: var(--dh-muted); font-size: .82rem; }
.stac-entry-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 8px; margin-top: 10px; }
.catalog-entry-item { padding: 9px 11px; border: 1px solid var(--dh-border); border-radius: 8px; background: var(--dh-surface-soft); color: #334155; text-align: left; font-size: .78rem; overflow-wrap: anywhere; }
.stac-subdataset-card { margin-top: 16px; padding: 16px; border: 1px solid var(--dh-border); border-radius: 10px; background: var(--dh-surface-soft); }
.stac-subdataset-card h3 { margin-top: 0; }
.stac-control-grid,
.stac-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.stac-metadata-output,
.stac-dataset-output,
.stac-preview-output { margin-top: 14px; }
.stac-warning { min-height: 20px; margin-top: 8px; color: var(--dh-danger); font-size: .82rem; }
.stac-preview-output:empty,
.stac-metadata-output:empty,
.stac-dataset-output:empty { display: none; }

/* ---- Refined DestinE workspace ------------------------------------------ */
.destine-workspace { align-items: start; }
.destine-request-panel,
.destine-preview-panel { min-width: 0; }
.destine-request-panel .json-input { min-height: 360px; }
.destine-request-panel .log-box { max-height: 260px; }
.destine-preview-panel #main-container,
.destine-request-panel #main-container { min-width: 0; }
.destine-preview-panel .status-box:empty,
.destine-request-panel .log-box:empty { display: none; }
.destine-preview-panel .dash-graph { margin-top: 14px; overflow: hidden; border: 1px solid var(--dh-border); border-radius: 10px; }
.destine-preview-panel .dh-inline-actions,
.destine-request-panel .dh-inline-actions { margin-top: 14px; }

@media (max-width: 1100px) {
    .stac-control-grid,
    .stac-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .stac-control-grid,
    .stac-preview-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Freva workspace
   -------------------------------------------------------------------------- */
.dh-section-kicker {
    margin-bottom: 5px;
    color: var(--dh-primary);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.dh-button--compact {
    min-height: 32px;
    padding: 6px 10px;
    font-size: .76rem;
}

.dh-button--danger {
    border-color: #f2b8b5;
    background: var(--dh-danger-soft);
    color: var(--dh-danger);
}

.dh-button--danger:hover {
    border-color: #e6948e;
    background: #ffe6e3;
}

.dh-codebox {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--dh-border);
    border-radius: 9px;
    background: #0f172a;
    color: #dbeafe;
    font: 12px/1.55 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.freva-workspace {
    align-items: start;
}

.freva-sidebar {
    min-width: 0;
}

.freva-sidebar-block,
.freva-token-tools {
    min-width: 0;
}

.freva-sidebar .freva-input {
    width: 100%;
    max-width: none;
}

.freva-divider {
    height: 1px;
    margin: 20px 0;
    background: var(--dh-border);
}

.freva-token-actions {
    gap: 7px;
}

.freva-token-status {
    margin-top: 12px;
}

.freva-main {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.freva-step-panel {
    min-width: 0;
}

.freva-panel-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.freva-panel-heading-row > div:first-child {
    min-width: 0;
}

.freva-context-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.freva-selection-block:empty {
    display: none;
}

.freva-selection-block:not(:empty) {
    padding: 13px;
    border: 1px solid var(--dh-border);
    border-radius: 9px;
    background: var(--dh-surface-soft);
}

.freva-mode-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 16px;
}

.freva-mode-switch label,
.freva-radio-items label {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    margin: 0 !important;
    padding: 8px 11px;
    border: 1px solid var(--dh-border);
    border-radius: 8px;
    background: var(--dh-surface-soft);
    color: #334155;
    font-size: .8rem;
    cursor: pointer;
}

.freva-mode-switch input,
.freva-radio-items input {
    margin: 0;
}

.freva-search-ui:empty::before {
    content: "Choose a search mode to continue.";
    display: block;
    padding: 16px;
    border: 1px dashed var(--dh-border-strong);
    border-radius: 9px;
    color: var(--dh-muted);
    font-size: .82rem;
}

.freva-search-ui .frosted-card {
    margin: 0;
    padding: 16px;
    border: 1px solid var(--dh-border);
    border-radius: 10px;
    background: var(--dh-surface-soft);
    box-shadow: none;
}

.freva-search-ui .frosted-card > h3:first-child {
    margin-top: 0;
}

.freva-search-ui .button-group,
.freva-search-ui .dh-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.freva-search-ui .btn,
.freva-selection-block .btn {
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

.freva-search-ui .normal-button {
    background: var(--dh-primary);
    color: #fff;
}

.freva-search-ui .success-button,
.freva-selection-block .success-button {
    background: var(--dh-success);
    color: #fff;
}

.freva-search-ui .danger-button {
    background: var(--dh-danger-soft);
    color: var(--dh-danger);
    border-color: #f2b8b5;
}

.freva-search-ui .checkbox-column-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px 10px;
    max-height: 250px;
    overflow: auto;
    padding: 8px;
    border: 1px solid var(--dh-border);
    border-radius: 8px;
    background: #fff;
}

.freva-search-ui .checkbox-column-group label {
    margin: 0 !important;
    padding: 5px 7px;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 500;
}

.freva-search-ui .checkbox-column-group label:hover {
    background: var(--dh-primary-soft);
}

.freva-results-grid {
    align-items: start;
}

.freva-log-box {
    max-height: 250px;
    overflow: auto;
}

.freva-data-output:empty,
.freva-log-box:empty,
.freva-metadata-preview:empty,
.freva-catalog-output:empty,
.freva-response:empty,
.freva-token-status:empty {
    display: none;
}

.freva-preview-panel .Select-control,
.freva-preview-panel input[type="number"] {
    min-height: 38px;
}

.freva-preview-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 12px;
    align-items: end;
    margin: 12px 0;
}

.freva-field {
    min-width: 0;
}

.freva-field--time input {
    width: 100%;
}

.freva-fast-preview {
    margin-top: 14px;
}

.freva-fast-preview .plot-container {
    margin: 0;
    padding: 10px;
    border: 1px solid var(--dh-border);
    border-radius: 10px;
    background: var(--dh-surface-soft);
}

.freva-fast-preview .plot-image {
    display: block;
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    border-radius: 7px;
}

.freva-metadata-preview {
    max-height: 340px;
    overflow: auto;
}

.freva-search-ui .upload-box {
    margin: 12px 0;
    padding: 18px;
    border: 2px dashed var(--dh-border-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--dh-muted);
    text-align: center;
}

.freva-search-ui .manual-textarea {
    width: 100%;
    min-height: 130px;
    resize: vertical;
}

@media (max-width: 1180px) {
    .freva-results-grid,
    .freva-context-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .freva-panel-heading-row {
        flex-direction: column;
    }

    .freva-preview-controls {
        grid-template-columns: 1fr;
    }
}

.freva-search-builder,
.freva-manual-search {
    min-width: 0;
}

.freva-facet-shell {
    margin-top: 12px;
}

.freva-dynamic-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.freva-dynamic-inputs > div {
    min-width: 0;
}

.freva-confirm-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--dh-border);
}

.freva-confirm-row .dh-status {
    flex: 1 1 260px;
}

/* ---- Shared visualization workspace ------------------------------------ */
.dh-gridlook-frame {
    width: 100%;
    min-height: 640px;
    margin-top: 16px;
    border: 1px solid var(--dh-border);
    border-radius: 12px;
    background: #0f172a;
}

.dh-details {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--dh-border);
    border-radius: 10px;
    background: var(--dh-surface-soft);
}

.dh-details > summary {
    cursor: pointer;
    font-weight: 650;
    color: var(--dh-text);
}

.dh-details[open] > summary {
    margin-bottom: 12px;
}

.dh-upload {
    margin-top: 8px;
    padding: 18px;
    border: 2px dashed var(--dh-border-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--dh-muted);
    text-align: center;
    cursor: pointer;
}

.dh-upload:hover {
    border-color: var(--dh-accent);
    background: var(--dh-surface-soft);
}

.dh-code-inline {
    display: block;
    margin-top: 8px;
    padding: 8px 10px;
    overflow-wrap: anywhere;
    border: 1px solid var(--dh-border);
    border-radius: 8px;
    background: #fff;
    font-size: .82rem;
}

.freva-token-filename {
    margin-top: 8px;
    font-size: .86rem;
    font-weight: 600;
    color: var(--dh-text);
    overflow-wrap: anywhere;
}

.stac-preview-readiness {
    margin-bottom: 12px;
}

.comin-gridlook-link {
    display: inline-block;
    margin: 10px 0 0;
}

@media (max-width: 800px) {
    .dh-gridlook-frame {
        min-height: 480px;
    }
}

/* ---- DestinE centralized visualization --------------------------------- */
.destine-preview-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 14px 0 4px;
}
.destine-preview-controls > div { min-width: 0; }
.destine-preview-controls label {
    display: block;
    margin-bottom: 6px;
    color: var(--dh-text);
    font-size: .82rem;
    font-weight: 650;
}
.destine-visual-output { margin-top: 16px; }
.destine-visual-output .dash-graph {
    overflow: hidden;
    border: 1px solid var(--dh-border);
    border-radius: 10px;
    background: #fff;
}
@media (max-width: 800px) {
    .destine-preview-controls { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
 * ComIn visualization mode selector and interactive guidance
 * -------------------------------------------------------------------------- */
.comin-visualization-mode {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap: 8px;
    width: min(420px, 100%);
    margin: 4px 0 6px;
}

.comin-visualization-mode-option {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--dh-border, #d8e2ef);
    border-radius: 10px;
    background: #fff;
    color: var(--dh-text, #0f2445);
    font-size: 0.84rem;
    font-weight: 750;
    cursor: pointer;
    transition: 150ms ease;
}

.comin-visualization-mode-option:hover {
    border-color: #9fb4d0;
    background: var(--dh-surface-soft, #f7f9fc);
}

.comin-visualization-mode-option:has(input:checked) {
    border-color: var(--comin-primary);
    background: var(--comin-primary-soft);
    color: var(--comin-primary);
    box-shadow: inset 0 0 0 1px rgba(23, 105, 224, 0.1);
}

.comin-visualization-mode-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.comin-interactive-panel {
    margin-top: 16px;
    padding: 18px 20px;
    border: 1px solid #cbd9eb;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}

.comin-interactive-panel strong {
    display: block;
    margin-bottom: 3px;
    color: var(--comin-text);
    font-size: 0.98rem;
}

.comin-interactive-steps {
    margin: 12px 0 14px;
    padding-left: 1.3rem;
    color: #42536b;
    font-size: 0.84rem;
    line-height: 1.65;
}

.comin-interactive-steps li + li {
    margin-top: 4px;
}

/* Local visualization choice cards remain available on the Local page. */
.local-visualization-choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 1rem 1.05rem;
    border: 1px solid var(--dh-border, #d8e2ef);
    border-radius: 14px;
    background: var(--dh-surface-soft, #f7f9fc);
}

.local-visualization-choice--primary {
    background: #ffffff;
    border-color: #c8d7ee;
}

.local-visualization-choice > div { width: 100%; }
.local-visualization-choice strong {
    color: var(--dh-text, #0f2445);
    font-size: 0.96rem;
}
.local-visualization-choice .dh-hint { margin: 0.2rem 0 0; }
.local-visualization-choice + .local-visualization-choice { margin-top: 0.85rem; }

@media (max-width: 720px) {
    .comin-visualization-mode {
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
 * ComIn preview mode refinement
 * Keep the preview workflow visually aligned with the shared Data Hub system.
 * -------------------------------------------------------------------------- */
.comin-time-control {
    width: 100%;
    margin-top: 2px;
}

.comin-time-control .comin-dropdown {
    width: 100%;
    max-width: none;
    margin-bottom: 0;
}

.comin-time-control .Select-value-label,
.comin-time-control .Select-placeholder,
.comin-time-control .Select__single-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comin-visualization-mode {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: min(420px, 100%);
    margin: 6px 0 0;
}

/* Dash can render RadioItems with different generated class placement across
   versions. Target both the configured class and the native radio input. */
.comin-visualization-mode input[type="radio"],
.comin-visualization-mode-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.comin-visualization-mode label,
.comin-visualization-mode-option {
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 40px;
    margin: 0 !important;
    padding: 8px 14px;
    border: 1px solid var(--dh-border-strong);
    border-radius: 8px;
    background: var(--dh-surface);
    color: var(--dh-text);
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.comin-visualization-mode label:hover,
.comin-visualization-mode-option:hover {
    border-color: #9eb0c4;
    background: var(--dh-surface-soft);
}

.comin-visualization-mode label:has(input:checked),
.comin-visualization-mode-option:has(input:checked) {
    border-color: var(--dh-primary);
    background: #eef5ff;
    color: var(--dh-primary-dark);
    box-shadow: inset 0 0 0 1px rgba(23, 105, 224, .08);
}

.comin-mode-panel {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--dh-border);
    border-radius: 10px;
    background: var(--dh-surface-soft);
    color: var(--dh-text);
}

.comin-mode-panel strong {
    display: block;
    margin-bottom: 4px;
    color: var(--dh-text);
    font-size: .9rem;
}

.comin-mode-panel p,
.comin-mode-panel li,
.comin-interactive-panel .comin-field-hint {
    color: var(--dh-muted) !important;
    font-weight: 400;
}

.comin-local-data-note {
    margin: 12px 0;
    padding: 12px 14px;
    border-left: 3px solid var(--dh-primary);
    border-radius: 7px;
    background: #f7faff;
}

.comin-local-data-note strong {
    color: var(--dh-text);
}

.comin-local-data-note p {
    margin: 5px 0 0;
    font-size: .82rem;
    line-height: 1.55;
}

.comin-static-help {
    margin-top: 4px;
}

.comin-static-help p {
    margin: 4px 0 0;
    font-size: .82rem;
    line-height: 1.55;
}

.comin-static-actions {
    margin: 12px 0 14px;
}

@media (max-width: 760px) {
    .comin-form-grid--two,
    .comin-visualization-mode {
        grid-template-columns: 1fr;
    }
}

/* ComIN preview refinements ------------------------------------------------ */
.comin-zarr-folder-note {
    color: #c62828 !important;
    font-weight: 600;
}

.comin-preview-mode-block {
    text-align: center;
}

.comin-preview-mode-block > .comin-field-label {
    display: block;
    margin-bottom: 7px;
}

.comin-preview-mode-block .comin-visualization-mode {
    margin: 6px auto 0;
}

.comin-interactive-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.comin-interactive-actions .dh-button {
    min-width: 190px;
    justify-content: center;
    text-align: center;
}