/* Sprint 180 premium workbench: one coherent presentation layer over the preserved V1 workflows. */ :root { --bg: #f2f5f7; --panel: #ffffff; --panel-soft: #f7f9fa; --surface-raised: #ffffff; --surface-sunken: #f5f7f8; --text: #17212b; --muted: #62707d; --line: #d8e0e5; --line-strong: #b7c3cb; --accent: #08776d; --accent-strong: #065d56; --accent-soft: #e5f3f0; --focus-ring: #08776d; --focus-ring-soft: rgba(8, 119, 109, 0.18); --warning: #a45a08; --danger: #a33434; --info: #2869a8; --shadow: 0 18px 44px rgba(29, 43, 54, 0.12); --shadow-soft: 0 5px 16px rgba(29, 43, 54, 0.07); } html, body { background: var(--bg); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); } body { min-width: 0; color: var(--text); background-image: none; } .workbench-shell, .workbench-shell * { letter-spacing: 0; } .workbench-shell { min-height: 100dvh; background: var(--bg); } .workbench-shell section, .workbench-shell button { background-image: none; } .workbench-shell button { border-color: var(--line-strong); background: var(--gi-surface); box-shadow: none; transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, box-shadow 120ms ease; } .workbench-shell button:hover:not(:disabled) { border-color: var(--gi-line); background: var(--gi-info-soft); box-shadow: 0 0 0 3px rgba(40, 105, 168, 0.08); } .workbench-shell .primary-action { border-color: var(--accent); background: var(--accent); color: #ffffff; } .workbench-shell .primary-action:hover:not(:disabled) { border-color: var(--accent-strong); background: var(--accent-strong); box-shadow: 0 0 0 3px var(--focus-ring-soft); } .workbench-shell input, .workbench-shell select, .workbench-shell textarea { border-color: var(--line-strong); background: var(--gi-surface); box-shadow: none; } .workbench-shell .eyebrow, .workbench-shell .nav-section-label, .workbench-shell .context-bar span, .workbench-shell .status-tile-topline > span:first-child, .workbench-shell .inspector-field > span { color: var(--gi-ink-600); font-size: 0.69rem; font-weight: 600; text-transform: uppercase; } /* Shell */ .app-shell > header.workbench-topbar { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr); min-height: 4.5rem; gap: 1rem; align-items: center; border-bottom: 1px solid var(--line); padding: 0.65rem 1.25rem; background: var(--gi-surface); box-shadow: 0 1px 0 rgba(23, 33, 43, 0.03); backdrop-filter: blur(14px); } .brand-block { display: flex; min-width: 0; gap: 0.7rem; align-items: center; } .brand-mark { display: grid; width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; place-items: center; border-radius: var(--gi-radius-sm); background: #123238; color: #ffffff; font-size: 0.78rem; font-weight: 700; } .brand-block h1 { margin: 0; font-size: 1.05rem; line-height: 1.05; } .app-shell > header.workbench-topbar .brand-block p { margin: 0.18rem 0 0; color: var(--muted); font-size: 0.72rem; font-weight: 600; } .context-bar { display: grid; grid-template-columns: minmax(10rem, 1.25fr) repeat(3, minmax(8rem, 1fr)); min-width: 0; gap: 0; justify-content: stretch; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); background: var(--gi-info-soft); } .context-bar > div { min-width: 0; min-height: 2.9rem; max-width: none; border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 0.45rem 0.7rem; background: transparent; } .context-bar > div:last-child { border-right: 0; } .context-bar span { display: block; font-size: 0.61rem; } .context-bar strong { display: block; overflow: hidden; margin-top: 0.16rem; color: var(--gi-ink-800); font-size: 0.78rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .workbench-layout { display: grid; grid-template-columns: 12.25rem minmax(0, 1fr); min-width: 0; height: calc(100dvh - 4.5rem); min-height: 0; } .workbench-sidebar { min-width: 0; overflow: auto; border-right: 1px solid var(--line); padding: 0.9rem 0.7rem; background: var(--gi-info-soft); } .workbench-sidebar nav { display: grid; gap: 1rem; } .nav-group { display: grid; gap: 0.2rem; } .nav-section-label { margin: 0 0 0.25rem; padding: 0 0.55rem; font-size: 0.63rem; } .nav-item { position: relative; display: block; width: 100%; min-height: 2.7rem; border: 1px solid transparent; border-radius: var(--gi-radius-sm); padding: 0.52rem 0.65rem; background: transparent; color: var(--gi-ink-800); text-align: left; } .nav-item span { font-size: 0.86rem; font-weight: 600; } .nav-item small { display: none; } .nav-item-active { border-color: var(--gi-brand-50); background: var(--accent-soft); color: var(--accent-strong); box-shadow: inset 3px 0 0 var(--accent); } .nav-item-active small { display: block; margin-top: 0.18rem; color: var(--gi-ink-600); font-size: 0.69rem; font-weight: 500; line-height: 1.2; } .workbench-sidebar .nav-item { border-color: transparent; background: transparent; } .workbench-sidebar .nav-item-active { border-color: var(--gi-brand-50); background: var(--accent-soft); } .workbench-main { min-width: 0; min-height: 0; overflow: auto; padding: 1.35rem clamp(1rem, 2vw, 2rem) 2rem; scroll-margin-top: 5rem; } .workbench-main > * { width: min(100%, 105rem); margin-inline: auto; } .workspace-heading { display: flex; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 0 0.9rem; background: transparent; box-shadow: none; } .workspace-heading .eyebrow { margin: 0 0 0.2rem; } .workspace-heading h2 { margin: 0; font-size: 1.55rem; line-height: 1.1; } .workspace-heading-actions { display: flex; min-width: 0; gap: 0.75rem; align-items: center; justify-content: flex-end; } .workspace-heading-actions > p { max-width: 25rem; margin: 0; color: var(--muted); font-size: 0.84rem; line-height: 1.35; text-align: right; } .inspector-toggle, .inspector-close { width: auto; min-height: 2.15rem; flex: 0 0 auto; padding: 0.38rem 0.65rem; font-size: 0.78rem; } .inspector-toggle-active { border-color: var(--accent); color: var(--accent-strong); } .workspace-command-bar { display: none; } .workbench-inspector { position: fixed; top: 4.5rem; right: 0; bottom: 0; z-index: 45; width: min(28rem, 100vw); min-width: 0; overflow: auto; border: 0; border-left: 1px solid var(--line); padding: 1rem; background: var(--gi-surface); box-shadow: var(--gi-shadow-lg); } .inspector-header { position: sticky; top: -1rem; z-index: 2; display: flex; gap: 1rem; align-items: center; justify-content: space-between; margin: -1rem -1rem 0.8rem; border-bottom: 1px solid var(--line); padding: 1rem; background: var(--gi-surface); } .inspector-header h2 { margin: 0; font-size: 1.15rem; } .workbench-inspector-panel .inspector-header { display: flex; grid-template-columns: none; } .workbench-inspector-panel .inspector-header .inspector-close { width: auto; min-width: 4.25rem; margin: 0; } .inspector-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.28rem; border-bottom: 1px solid var(--line); padding-bottom: 0.65rem; } .inspector-tab { min-width: 0; min-height: 2.15rem; padding: 0.35rem 0.4rem; font-size: 0.74rem; } .inspector-tab-active { border-color: var(--gi-brand-50); background: var(--accent-soft); color: var(--accent-strong); } .inspector-card { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0.8rem 0 1rem; background: transparent; } .inspector-card h3 { margin-top: 0; } /* Shared hierarchy */ .workspace-stack, .workspace-grid { gap: 1rem; } .workbench-main section, .workspace-panel, .map-control-surface, .map-frame-surface, .map-inspection-surface, .quality-summary-surface, .quality-control-surface, .quality-evidence-surface, .quality-history-surface, .change-detection-input-surface, .change-detection-result-surface, .lab-block, .handoff-action-card, .system-provider-card { border-color: var(--line); border-radius: var(--gi-radius-sm); background: var(--gi-surface); box-shadow: none; } .panel-title-row { gap: 0.75rem; align-items: center; } .panel-title-row h2, .panel-title-row h3, .workspace-panel h2, .lab-block h3 { margin-bottom: 0; } .count-pill, .status-pill, .status-badge, .workflow-step-status { border-radius: var(--gi-radius-pill); background: var(--gi-info-soft); color: var(--gi-ink-600); font-weight: 600; } .data-panel-form-block, .data-panel-list-block, .result-summary-card, .quality-metric-card, .model-card, .inspector-card, .feature-property-chip, .layer-control-card { box-shadow: none; } .table-scroll { border-color: var(--line); border-radius: var(--gi-radius-sm); } table thead th { background: var(--gi-info-soft); color: var(--gi-ink-600); } table tbody tr:hover { background: var(--gi-info-soft); } .error, .warning-message, .success-message, .demo-message { border-radius: var(--gi-radius-sm); } /* Data workspace */ details.data-panel-form-block { overflow: hidden; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0; background: var(--gi-info-soft); } details.data-panel-form-block > summary { display: flex; min-height: 2.75rem; cursor: pointer; align-items: center; justify-content: space-between; padding: 0.65rem 0.75rem; color: var(--gi-ink-800); font-size: 0.8rem; font-weight: 600; list-style: none; } details.data-panel-form-block > summary::-webkit-details-marker { display: none; } details.data-panel-form-block > summary::after { content: '+'; color: var(--accent-strong); font-size: 1rem; } details.data-panel-form-block[open] > summary { border-bottom: 1px solid var(--line); background: var(--gi-surface); } details.data-panel-form-block[open] > summary::after { content: '-'; } details.data-panel-form-block > form { padding: 0.2rem 0.75rem 0.75rem; } .workspace-grid-data > section { min-width: 0; align-self: start; } .workspace-grid-data .data-selection-summary { border-left: 3px solid var(--accent); background: var(--gi-brand-50); } .workspace-grid-data .data-panel-list-block { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 0.75rem 0 0; background: transparent; } .catalog-browser-toolbar { display: grid; gap: 0.55rem; padding: 0.65rem; border-bottom: 1px solid var(--line); background: var(--gi-info-soft); } .catalog-browser-toolbar-datasets { margin-bottom: 0.65rem; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); } .catalog-search-field { display: grid; gap: 0.3rem; color: var(--gi-ink-600); font-size: 0.74rem; font-weight: 600; } .catalog-search-field input { margin: 0; background: var(--gi-surface); } .catalog-pagination { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; color: var(--muted); font-size: 0.76rem; } .catalog-pagination strong { min-width: 3.5rem; color: var(--ink); text-align: center; } .catalog-pagination .secondary-action { width: auto; min-height: 2rem; padding: 0.35rem 0.6rem; } /* AI and review workspaces */ .ai-lab-shell { display: flex; flex-direction: column; gap: 0.75rem; } .ai-lab-shell > .panel-title-row { order: 0; } .ai-lab-shell > .ai-lab-model-surface[aria-label="Local model asset selection"] { order: 1; } .ai-lab-shell > .lab-block { order: 2; } .ai-lab-shell > .ai-lab-state-stack { order: 3; } .ai-lab-shell > .ai-lab-results-surface { order: 4; } .ai-lab-shell > .ai-lab-qa-surface { order: 5; } .ai-lab-shell > .guided-calibration-surface { order: 6; } .ai-lab-shell > .ai-lab-model-surface { order: 7; } details.ai-lab-model-surface { overflow: hidden; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0; background: var(--gi-info-soft); } details.ai-lab-model-surface > summary { display: flex; min-height: 2.85rem; cursor: pointer; gap: 0.75rem; align-items: center; justify-content: space-between; padding: 0.65rem 0.75rem; color: var(--gi-ink-800); font-size: 0.8rem; font-weight: 600; list-style: none; } details.ai-lab-model-surface > summary::-webkit-details-marker { display: none; } details.ai-lab-model-surface > summary::after { content: '+'; color: var(--accent-strong); font-size: 1rem; } details.ai-lab-model-surface[open] > summary::after { content: '-'; } details.ai-lab-model-surface > summary strong { margin-left: auto; color: var(--muted); font-size: 0.72rem; font-weight: 600; } .ai-lab-disclosure-body { border-top: 1px solid var(--line); padding: 0.75rem; background: var(--gi-surface); } .ai-lab-shell .lab-block, .ai-lab-shell .ai-lab-run-surface, .ai-lab-shell .ai-lab-results-surface, .ai-lab-shell .ai-lab-qa-surface, .ai-lab-shell > .ai-lab-model-surface[aria-label="Local model asset selection"] { border-color: var(--line); border-radius: var(--gi-radius-sm); background: var(--gi-surface); box-shadow: none; } .change-detection-shell .checkbox-row { min-width: 0; align-self: end; white-space: normal; overflow-wrap: anywhere; } @media (min-width: 1100px) { .workspace-grid-data { grid-template-columns: minmax(17rem, 0.85fr) minmax(18rem, 0.95fr) minmax(21rem, 1.2fr); align-items: start; } .workspace-grid-data > section, .workspace-grid-data > section:nth-child(n) { grid-column: auto; max-height: calc(100dvh - 10.5rem); overflow: auto; } .workspace-grid-analysis { grid-template-columns: minmax(20rem, 0.75fr) minmax(28rem, 1.25fr); align-items: start; } .workspace-grid-ai { grid-template-columns: minmax(0, 1fr); align-items: start; } .workspace-grid-exports { grid-template-columns: minmax(28rem, 1.2fr) minmax(22rem, 0.8fr); align-items: start; } .workspace-grid-analysis > section:nth-child(n), .workspace-grid-ai > section:nth-child(n), .workspace-grid-exports > section:nth-child(n) { max-height: calc(100dvh - 10.5rem); overflow: auto; align-self: start; } .workspace-grid-ai > section:nth-child(n) { max-height: none; overflow: visible; } } /* Overview */ .workbench-status-strip { overflow: hidden; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0; background: var(--gi-surface); } .status-strip-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; margin: 0; border-bottom: 1px solid var(--line); padding: 1.1rem 1.2rem; background: var(--gi-surface); } .status-strip-header h2 { margin: 0; max-width: 55rem; font-size: 1.12rem; line-height: 1.25; } .status-next-action { max-width: 46rem; margin: 0.35rem 0 0; color: var(--muted); font-size: 0.84rem; line-height: 1.35; text-align: left; } .status-readiness { display: grid; min-width: 6.5rem; justify-items: end; } .status-readiness strong { color: var(--accent-strong); font-size: 1.65rem; line-height: 1; } .status-readiness span { margin-top: 0.25rem; color: var(--muted); font-size: 0.72rem; font-weight: 600; } .status-strip-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; padding: 0; } .status-tile { min-width: 0; min-height: 6.15rem; border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 0.75rem 0.8rem; background: var(--gi-surface); } .status-tile:last-child { border-right: 0; } .status-tile-ready { box-shadow: inset 0 3px 0 #2d9272; } .status-tile-warning { box-shadow: inset 0 3px 0 #ca7a18; } .status-tile-waiting { box-shadow: inset 0 3px 0 #aab5bc; } .status-tile strong { display: -webkit-box; overflow: hidden; margin-top: 0.4rem; color: var(--gi-ink-800); font-size: 0.87rem; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .status-tile p { display: -webkit-box; overflow: hidden; margin: 0.2rem 0 0; color: var(--muted); font-size: 0.72rem; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .source-freshness-panel { overflow: hidden; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); background: var(--gi-surface); } .source-freshness-header { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; } .source-freshness-header .secondary-action, .source-freshness-header .primary-action { flex: 0 0 auto; width: auto; min-width: 10rem; margin-top: 0; } .source-freshness-actions { display: flex; flex: 0 0 auto; gap: 0.55rem; } .source-freshness-header h2 { margin: 0; font-size: 1.05rem; } .source-freshness-header p:last-child { max-width: 52rem; margin: 0.3rem 0 0; color: var(--muted); font-size: 0.82rem; } .source-freshness-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--gi-info-soft); } .source-freshness-summary span { padding: 0.7rem 1rem; border-right: 1px solid var(--line); color: var(--muted); font-size: 0.75rem; } .source-freshness-summary span:last-child { border-right: 0; } .source-freshness-summary strong { display: block; margin-bottom: 0.15rem; color: var(--gi-ink-800); font-size: 1.05rem; } .source-freshness-attention, .source-freshness-list { display: grid; } .source-freshness-row { padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); } .source-freshness-row:last-child { border-bottom: 0; } .source-freshness-row-review_required { box-shadow: inset 3px 0 0 #b84e4e; } .source-freshness-row-due { box-shadow: inset 3px 0 0 #ca7a18; } .source-freshness-row-current { box-shadow: inset 3px 0 0 #2d9272; } .source-freshness-main { display: flex; gap: 1rem; align-items: start; justify-content: space-between; } .source-freshness-main > div { display: grid; gap: 0.15rem; } .source-freshness-main strong { color: var(--gi-ink-800); font-size: 0.86rem; } .source-freshness-main span, .source-freshness-row p, .source-freshness-meta { color: var(--muted); font-size: 0.75rem; } .source-freshness-row p { margin: 0.4rem 0; } .source-freshness-status { flex: 0 0 auto; color: var(--gi-ink-800); font-weight: 600; } .source-freshness-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; } .source-freshness-ok, .source-freshness-limitation { margin: 0; padding: 0.8rem 1rem; color: var(--muted); font-size: 0.78rem; } .source-freshness-details { border-top: 1px solid var(--line); } .source-catalog-section { border-top: 1px solid var(--line); background: var(--gi-info-soft); } .source-catalog-heading { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 0.8rem 1rem; } .source-catalog-heading > div { display: grid; gap: 0.12rem; } .source-catalog-heading strong { color: var(--gi-ink-800); font-size: 0.84rem; } .source-catalog-heading span, .source-catalog-empty { color: var(--muted); font-size: 0.75rem; } .source-catalog-heading > span { flex: 0 0 auto; font-weight: 600; } .source-catalog-empty { margin: 0; padding: 0 1rem 0.85rem; } .source-catalog-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); } .source-catalog-row { min-width: 0; padding: 0.8rem 1rem; border-right: 1px solid var(--line); box-shadow: inset 0 3px 0 #8a98a3; } .source-catalog-row:last-child { border-right: 0; } .source-catalog-row:last-child:nth-child(odd) { grid-column: 1 / -1; } .source-catalog-row-available { box-shadow: inset 0 3px 0 #2d9272; } .source-catalog-row-degraded { box-shadow: inset 0 3px 0 #ca7a18; } .source-catalog-row-unavailable, .source-catalog-row-disabled { box-shadow: inset 0 3px 0 #b84e4e; } .source-catalog-row p { margin: 0.45rem 0; color: var(--muted); font-size: 0.75rem; } .grb-refresh-plan { border-top: 1px solid var(--line); background: var(--gi-surface); } .grb-refresh-plan-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 1rem; } .grb-refresh-plan-heading > div { display: grid; min-width: 0; gap: 0.15rem; } .grb-refresh-plan-heading strong { color: var(--gi-ink-800); font-size: 0.84rem; } .grb-refresh-plan-heading span { color: var(--muted); font-size: 0.75rem; } .grb-refresh-plan-heading > span { flex: 0 0 auto; font-weight: 600; } .grb-refresh-layer-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); } .grb-refresh-layer { min-width: 0; padding: 0.78rem 1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: inset 3px 0 0 #8a98a3; } .grb-refresh-layer:nth-child(2n) { border-right: 0; } .grb-refresh-layer:nth-last-child(-n + 2) { border-bottom: 0; } .grb-refresh-layer-update_available, .grb-refresh-layer-not_loaded { box-shadow: inset 3px 0 0 #ca7a18; } .grb-refresh-layer-current { box-shadow: inset 3px 0 0 #2d9272; } .grb-refresh-layer-remote_unavailable, .grb-refresh-layer-review_required { box-shadow: inset 3px 0 0 #b84e4e; } .grb-refresh-layer > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .grb-refresh-layer > div:first-child span { color: var(--gi-ink-600); font-size: 0.72rem; font-weight: 600; } .grb-refresh-layer p { margin: 0.4rem 0; color: var(--muted); font-size: 0.75rem; } .source-freshness-details > summary { display: flex; cursor: pointer; gap: 1rem; justify-content: space-between; padding: 0.72rem 1rem; color: var(--gi-ink-800); font-size: 0.78rem; font-weight: 600; } .source-freshness-list { max-height: 30rem; overflow: auto; border-top: 1px solid var(--line); } @media (max-width: 760px) { .source-freshness-header { align-items: stretch; flex-direction: column; } .source-freshness-header .secondary-action, .source-freshness-header .primary-action { width: 100%; } .source-freshness-actions { flex-direction: column; } .source-freshness-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .source-freshness-summary span:nth-child(2) { border-right: 0; } .source-freshness-summary span:nth-child(-n + 2) { border-bottom: 1px solid var(--line); } .source-catalog-list { grid-template-columns: 1fr; } .source-catalog-row { border-right: 0; border-bottom: 1px solid var(--line); } .source-catalog-row:last-child { border-bottom: 0; } .grb-refresh-plan-heading { align-items: flex-start; flex-direction: column; } .grb-refresh-layer-list { grid-template-columns: 1fr; } .grb-refresh-layer, .grb-refresh-layer:nth-child(2n), .grb-refresh-layer:nth-last-child(-n + 2) { border-right: 0; border-bottom: 1px solid var(--line); } .grb-refresh-layer:last-child { border-bottom: 0; } } .workflow-guidance-panel { border: 1px solid var(--line); border-left: 1px solid var(--line); padding: 1rem 1.1rem; background: var(--gi-surface); } .workflow-guidance-panel .panel-title-row { margin-bottom: 0.8rem; } .workflow-guidance-panel h2 { font-size: 1rem; } .workflow-guidance-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; } .workflow-guidance-step { min-width: 0; min-height: 5rem; border: 1px solid transparent; border-radius: var(--gi-radius-sm); padding: 0.65rem; background: var(--gi-surface); text-align: left; } .workflow-guidance-step:hover:not(:disabled) { border-color: var(--gi-line); background: var(--gi-surface-soft); } .workflow-guidance-step-ready { background: var(--gi-brand-50); } .workflow-guidance-step-active { border-color: var(--gi-brand-50); background: var(--accent-soft); } .workflow-guidance-step small { display: -webkit-box; overflow: hidden; margin-top: 0.3rem; color: var(--muted); font-size: 0.71rem; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .overview-actions { display: flex; gap: 1rem; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-left: 1px solid var(--line); padding: 0.8rem 1rem; background: var(--gi-surface); } .overview-action-copy h2 { margin: 0; font-size: 0.95rem; } .overview-quick-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; align-content: initial; } .quick-action-button { width: auto; min-height: 2.25rem; padding: 0.4rem 0.72rem; font-size: 0.78rem; } /* Map-first workbench */ .map-workspace-shell { display: grid; gap: 0.85rem; border: 0; padding: 0; background: transparent; } .map-workspace-shell > .panel-title-row { margin: 0; border: 0; padding: 0; } .map-workspace-shell > .panel-title-row h2 { font-size: 1.08rem; } .map-control-surface { order: 1; border: 1px solid var(--line); padding: 0.75rem; background: var(--gi-surface); } .map-workspace-shell .map-toolbar { display: grid; grid-template-columns: minmax(10rem, 0.85fr) minmax(13rem, 1.3fr) minmax(10rem, 0.9fr) minmax(8rem, 0.65fr) minmax(8rem, 0.65fr); gap: 0.6rem; align-items: end; } .map-workspace-shell .map-toolbar label, .map-workspace-shell .map-toolbar .layer-control-card { margin: 0; } .layer-control-card { min-height: 3.9rem; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.45rem 0.55rem; background: var(--gi-info-soft); } .map-status { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(13rem, 1.35fr) repeat(3, minmax(10rem, 1fr)); gap: 0.25rem 0.85rem; min-height: auto; align-content: center; border-left: 3px solid var(--accent); border-radius: var(--gi-radius-xs); padding: 0.45rem 0.65rem; background: var(--gi-brand-50); } .map-status strong { font-size: 0.8rem; } .map-status span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .map-status .viewport-vector-status { grid-column: 1 / -1; white-space: normal; } .detection-qa-diagnostic { grid-column: 1 / -1; display: grid; gap: 0.2rem; margin-top: 0.35rem; border-left: 3px solid var(--accent); padding: 0.55rem 0.65rem; background: var(--accent-soft); } .detection-qa-diagnostic span { color: var(--muted); font-size: 0.68rem; font-weight: 700; text-transform: none; } .detection-qa-diagnostic strong { font-size: 0.82rem; } .detection-qa-diagnostic p { margin: 0; color: var(--muted); font-size: 0.74rem; } .detection-qa-diagnostic-caution { border-left-color: var(--warning); background: var(--gi-warn-soft); } .basemap-policy-notice { margin-bottom: 0.65rem; border: 0; border-radius: var(--gi-radius-xs); padding: 0.45rem 0.6rem; background: var(--gi-info-soft); } .basemap-policy-notice strong, .basemap-policy-notice span { font-size: 0.72rem; } .map-frame-surface { order: 2; overflow: hidden; border: 1px solid var(--gi-line); border-radius: var(--gi-radius-sm); padding: 0; background: var(--gi-info-soft); box-shadow: var(--gi-shadow-md); } .map-frame-surface .map-container, .workbench-main .map-container { height: clamp(30rem, 60vh, 52rem); min-height: 30rem; border: 0; border-radius: 0; } .map-layer-details, .map-advanced-tools { overflow: hidden; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); background: var(--gi-surface); } .map-layer-details { order: 3; } .qa-evidence-map-status { order: 4; } .map-empty-state { order: 5; } .map-layer-details > summary, .map-advanced-tools > summary { display: flex; min-height: 3rem; cursor: pointer; gap: 1rem; align-items: center; justify-content: space-between; padding: 0.7rem 0.85rem; color: var(--gi-ink-800); font-size: 0.82rem; font-weight: 600; list-style: none; } .map-layer-details > summary::-webkit-details-marker, .map-advanced-tools > summary::-webkit-details-marker { display: none; } .map-layer-details > summary::after, .map-advanced-tools > summary::after { content: '+'; color: var(--accent-strong); font-size: 1rem; } .map-layer-details[open] > summary::after, .map-advanced-tools[open] > summary::after { content: '-'; } .map-layer-details > summary strong, .map-advanced-tools > summary strong { margin-left: auto; color: var(--muted); font-size: 0.74rem; font-weight: 600; } .map-context-summary, .layer-provenance-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); padding: 0; background: transparent; } .map-context-summary > div, .layer-provenance-rail > div { min-width: 0; border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 0.65rem 0.75rem; background: transparent; } .map-context-summary > div:last-child, .layer-provenance-rail > div:last-child { border-right: 0; } .map-context-summary span, .layer-provenance-rail span { font-size: 0.64rem; } .map-context-summary strong, .layer-provenance-rail strong { font-size: 0.78rem; line-height: 1.25; } .map-context-summary small { font-size: 0.69rem; } .map-empty-state { margin: 0; border: 1px dashed var(--gi-line); background: var(--gi-info-soft); } .map-inspection-surface { order: 6; display: grid; grid-template-columns: 1fr; gap: 0.85rem; border: 0; padding: 0; background: transparent; } .gis-test-run-surface { border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 1rem; background: var(--gi-surface); } .gis-test-run-grid, .guided-gis-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .map-advanced-tools-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); } .map-advanced-tools-body > div { border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: var(--gi-surface); } .map-advanced-tools-body > div:nth-child(2n) { border-right: 0; } .qa-evidence-map-status { border: 1px solid var(--line); border-radius: var(--gi-radius-sm); background: var(--gi-surface); } /* Responsive shell */ @media (min-width: 1800px) { .workbench-main > .geo-explorer { width: 100%; max-width: none; } .workbench-main > .workspace-persistent-map { width: 100%; max-width: none; } .workbench-layout { grid-template-columns: 13.25rem minmax(0, 1fr); } .workbench-main { padding: 1.6rem 2rem 2.5rem; } .workspace-grid-data { grid-template-columns: repeat(3, minmax(0, 1fr)); } .workspace-grid-analysis, .workspace-grid-ai, .workspace-grid-exports { grid-template-columns: repeat(2, minmax(0, 1fr)); } .map-frame-surface .map-container, .workbench-main .map-container { height: clamp(38rem, 68vh, 58rem); min-height: 38rem; } } @media (max-width: 1360px) { .workbench-layout { grid-template-columns: 10.75rem minmax(0, 1fr); height: calc(100dvh - 4.5rem); } .workbench-inspector { position: fixed; width: min(27rem, 100vw); max-height: none; } } @media (max-width: 920px) { .app-shell > header.workbench-topbar { position: relative; display: grid; grid-template-columns: 1fr; gap: 0.65rem; min-height: auto; padding: 0.7rem 0.85rem; } .context-bar { display: flex; overflow-x: auto; scroll-snap-type: x proximity; } .context-bar > div { min-width: 10rem; flex: 1 0 10rem; scroll-snap-align: start; } .workbench-layout { display: block; height: auto; min-height: 0; } .workbench-sidebar { position: relative; top: auto; z-index: 15; overflow-x: auto; border: 0; border-bottom: 1px solid var(--line); padding: 0.45rem 0.65rem; background: var(--gi-surface); } .workbench-sidebar nav { display: flex; width: max-content; min-width: 100%; gap: 0.35rem; } .nav-group { display: contents; } .nav-section-label { display: none; } .workbench-sidebar .nav-item { width: auto; min-width: 6.25rem; min-height: 2.5rem; flex: 0 0 auto; padding: 0.45rem 0.62rem; text-align: center; } .nav-item-active { box-shadow: inset 0 -3px 0 var(--accent); } .nav-item-active small { display: none; } .workbench-main { overflow: visible; padding: 1rem; } .workbench-inspector { top: 0; width: 100vw; } .workspace-grid-data > section, .workspace-grid-data > section:nth-child(n) { max-height: none; overflow: visible; } .workspace-grid-analysis > section:nth-child(n), .workspace-grid-ai > section:nth-child(n), .workspace-grid-exports > section:nth-child(n) { max-height: none; overflow: visible; } .workflow-guidance-steps { grid-template-columns: repeat(5, minmax(9.5rem, 1fr)); overflow-x: auto; scroll-snap-type: x proximity; } .workflow-guidance-step { scroll-snap-align: start; } .overview-actions { align-items: flex-start; } .map-context-summary, .layer-provenance-rail, .gis-test-run-grid, .guided-gis-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .map-advanced-tools-body { grid-template-columns: 1fr; } .map-workspace-shell .map-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .map-status { grid-column: 1 / -1; } .map-advanced-tools-body > div, .map-advanced-tools-body > div:nth-child(2n) { border-right: 0; } } @media (max-width: 620px) { .brand-block h1 { font-size: 1rem; } .context-bar > div { min-width: 8.75rem; flex-basis: 8.75rem; } .workbench-main { padding: 0.8rem 0.75rem 1.5rem; } .workspace-heading { display: flex; align-items: flex-end; margin-bottom: 0.8rem; padding-bottom: 0.7rem; } .workspace-heading h2 { font-size: 1.3rem; } .workspace-heading-actions { display: grid; justify-items: end; } .workspace-heading-actions > p { display: none; } .status-strip-header { grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; padding: 0.9rem; } .status-strip-header h2 { font-size: 1rem; } .status-readiness strong { font-size: 1.3rem; } .status-strip-grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(9rem, 1fr); overflow-x: auto; scroll-snap-type: x proximity; } .status-tile, .status-tile:nth-child(3), .status-tile:nth-child(-n + 3) { min-height: 6.3rem; border-right: 1px solid var(--line); border-bottom: 0; scroll-snap-align: start; } .status-tile:last-child { border-right: 0; } .overview-actions { display: grid; gap: 0.7rem; } .overview-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .quick-action-button { width: 100%; } .map-workspace-shell .map-toolbar, .map-context-summary, .layer-provenance-rail, .gis-test-run-grid, .guided-gis-steps, .guided-gis-actions { grid-template-columns: 1fr; } .map-status { grid-column: auto; } .map-frame-surface .map-container, .workbench-main .map-container { height: 28rem; min-height: 28rem; } .map-layer-details > summary, .map-advanced-tools > summary { align-items: flex-start; } .map-layer-details > summary strong, .map-advanced-tools > summary strong { display: none; } } /* End-user workbench simplification */ .geo-loaded-scope { display: grid; gap: 0.2rem; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.65rem 0.7rem; background: var(--gi-brand-50); } .geo-loaded-scope span, .geo-loaded-scope small { color: var(--muted); font-size: 0.72rem; } .geo-loaded-scope strong { color: var(--text); font-size: 0.88rem; } .technical-management-body { display: grid; gap: 0.8rem; border-top: 1px solid var(--line); padding: 0.8rem; background: var(--gi-surface); } .technical-management-body > .compact-form { padding: 0; } .technical-run-list, .area-catalog-disclosure, .dataset-history-disclosure, .dataset-technical-details, .quality-advanced-disclosure, .provider-technical-details, .secondary-analysis-disclosure, .status-details-disclosure, .export-history-disclosure { overflow: hidden; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); background: var(--gi-info-soft); } .technical-run-list > summary, .area-catalog-disclosure > summary, .dataset-history-disclosure > summary, .dataset-technical-details > summary, .quality-advanced-disclosure > summary, .provider-technical-details > summary, .secondary-analysis-disclosure > summary, .status-details-disclosure > summary, .export-history-disclosure > summary { display: flex; min-height: 2.7rem; cursor: pointer; gap: 0.75rem; align-items: center; justify-content: space-between; padding: 0.62rem 0.75rem; color: var(--gi-ink-800); font-size: 0.8rem; font-weight: 600; list-style: none; } .technical-run-list > summary::-webkit-details-marker, .area-catalog-disclosure > summary::-webkit-details-marker, .dataset-history-disclosure > summary::-webkit-details-marker, .dataset-technical-details > summary::-webkit-details-marker, .quality-advanced-disclosure > summary::-webkit-details-marker, .provider-technical-details > summary::-webkit-details-marker, .secondary-analysis-disclosure > summary::-webkit-details-marker, .status-details-disclosure > summary::-webkit-details-marker, .export-history-disclosure > summary::-webkit-details-marker { display: none; } .technical-run-list > summary::after, .area-catalog-disclosure > summary::after, .dataset-history-disclosure > summary::after, .dataset-technical-details > summary::after, .quality-advanced-disclosure > summary::after, .provider-technical-details > summary::after, .secondary-analysis-disclosure > summary::after, .status-details-disclosure > summary::after, .export-history-disclosure > summary::after { content: '+'; margin-left: auto; color: var(--accent-strong); font-size: 1rem; } .technical-run-list[open] > summary::after, .area-catalog-disclosure[open] > summary::after, .dataset-history-disclosure[open] > summary::after, .dataset-technical-details[open] > summary::after, .quality-advanced-disclosure[open] > summary::after, .provider-technical-details[open] > summary::after, .secondary-analysis-disclosure[open] > summary::after, .status-details-disclosure[open] > summary::after, .export-history-disclosure[open] > summary::after { content: '-'; } .technical-run-list .entity-list, .area-catalog-disclosure .entity-list { max-height: 28rem; overflow: auto; border-top: 1px solid var(--line); padding: 0.65rem; background: var(--gi-surface); } .quality-advanced-disclosure { margin-top: 0.75rem; } .quality-summary-grid small, .ai-quality-guidance { display: block; margin-top: 0.22rem; color: var(--muted); font-size: 0.72rem; line-height: 1.35; } .ai-quality-guidance { margin: -0.25rem 0 0.65rem; border-left: 3px solid #b37a2d; padding: 0.45rem 0.65rem; background: var(--gi-warn-soft); color: var(--gi-warn); } .quality-advanced-disclosure > summary strong { margin-right: 0.25rem; color: var(--ink); font-size: 0.76rem; } .quality-advanced-disclosure > div { margin: 0; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 0; } .dataset-technical-details { margin-top: 0.65rem; } .dataset-technical-details > div, .dataset-technical-details > button, .provider-technical-details > div { margin: 0 0.7rem 0.7rem; } .dataset-technical-details > summary, .provider-technical-details > summary { min-height: 2.3rem; padding-block: 0.45rem; } .dataset-card-primary-meta { margin-top: 0.25rem; } .dataset-history-disclosure { margin-top: 0.75rem; } .dataset-history-disclosure > summary strong { margin-right: 0.25rem; color: var(--muted); font-size: 0.75rem; } .dataset-history-list { display: grid; max-height: 24rem; margin: 0; overflow: auto; padding: 0.5rem; list-style: none; background: var(--gi-surface); } .dataset-history-list li { display: flex; min-width: 0; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding: 0.65rem 0.25rem; } .dataset-history-list li:first-child { border-top: 0; } .dataset-history-list li > div:first-child { display: grid; min-width: 0; gap: 0.15rem; } .dataset-history-list li span { color: var(--muted); font-size: 0.76rem; } .detection-technical-evaluation { margin-top: 0.75rem; } .ai-user-summary { order: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; } .ai-user-summary-card { display: grid; min-width: 0; gap: 0.25rem; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.75rem; background: var(--gi-surface); } .ai-user-summary-card-primary { border-color: var(--gi-brand-50); background: var(--accent-soft); } .ai-user-summary-card-ready { border-left: 3px solid var(--success); } .ai-user-summary-card span, .ai-user-summary-card p { margin: 0; color: var(--muted); font-size: 0.72rem; line-height: 1.35; } .ai-user-summary-card strong { overflow-wrap: anywhere; color: var(--text); font-size: 0.95rem; } .secondary-analysis-disclosure { align-self: start; } .secondary-analysis-disclosure > summary strong, .status-details-disclosure > summary strong, .export-history-disclosure > summary strong { margin-left: auto; color: var(--muted); font-size: 0.72rem; } .secondary-analysis-disclosure > section, .secondary-analysis-disclosure > .workspace-panel { border: 0; border-top: 1px solid var(--line); border-radius: 0; } .status-details-disclosure > section { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; } .quality-results-panel-empty .quality-evidence-surface, .quality-results-panel-empty .quality-drilldown-surface, .quality-results-panel-empty .quality-control-surface, .quality-results-panel-empty .quality-history-surface { display: none; } .quality-user-empty-state { margin-top: 0.75rem; } .export-summary-surface, .export-handoff-surface, .handoff-action-card-technical { display: none; } .latest-download-empty { grid-column: 1 / -1; } .export-history-body { display: grid; gap: 0.75rem; border-top: 1px solid var(--line); padding: 0.75rem; background: var(--gi-surface); } .export-history-body > div:first-child { display: none; } @media (min-width: 1100px) { .workspace-grid-analysis { grid-template-columns: minmax(0, 1fr); } .workspace-grid-analysis > section:nth-child(n), .workspace-grid-analysis > details:nth-child(n) { max-height: none; overflow: visible; } } @media (max-width: 1180px) { .ai-user-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .ai-user-summary { grid-template-columns: minmax(0, 1fr); } .context-bar > div:nth-child(n + 3) { display: none; } } @media (min-width: 621px) { .status-strip-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; } .status-tile, .status-tile:nth-child(3), .status-tile:nth-child(-n + 3) { border-right: 1px solid var(--line); border-bottom: 0; } .status-tile:last-child { border-right: 0; } .workflow-guidance-steps { gap: 0.5rem; } .workflow-guidance-steps .workflow-guidance-step { border-color: transparent; background: var(--gi-surface); } .workflow-guidance-steps .workflow-guidance-step-ready { background: var(--gi-brand-50); } .workflow-guidance-steps .workflow-guidance-step-active { border-color: var(--gi-brand-50); background: var(--accent-soft); } } /* Progressive disclosure keeps technical provenance available without competing with the operational workflow. */ .technical-inline-details { min-width: 0; border-top: 1px solid var(--line); padding-top: 0.45rem; color: var(--muted); font-size: 0.75rem; } .technical-inline-details > summary { width: fit-content; cursor: pointer; color: var(--muted); font-weight: 600; } .technical-inline-details[open] > summary { margin-bottom: 0.45rem; color: var(--text); } .technical-inline-details .entity-meta { display: flex; min-width: 0; flex-wrap: wrap; gap: 0.3rem 0.7rem; } .technical-inline-details .entity-meta > * { overflow-wrap: anywhere; } .detection-model-management { display: grid; min-width: 0; gap: 0.75rem; } .project-lifecycle-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; border-top: 1px solid var(--line); padding-top: 0.75rem; } .project-lifecycle-actions p { margin: 0.2rem 0 0; } @media (min-width: 1800px) { .workspace-grid-ai { grid-template-columns: minmax(0, 1fr); } .detection-lab-shell .lab-form-grid, .detection-model-management .lab-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 620px) { .project-lifecycle-actions { grid-template-columns: minmax(0, 1fr); } .project-lifecycle-actions button { width: 100%; } } .geo-image-quality-metrics, .detection-review-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; } .geo-image-quality-metrics { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0.35rem; border-top: 1px solid var(--line); padding-top: 0.65rem; } .geo-image-quality-metrics > div, .detection-review-summary > div { display: grid; min-width: 0; gap: 0.15rem; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.55rem; background: var(--panel-soft); } .geo-image-quality-metrics span, .detection-review-summary span, .detection-review-item-heading span { color: var(--muted); font-size: 0.7rem; } .geo-image-quality-metrics strong, .detection-review-summary strong { color: var(--text); font-size: 0.9rem; } .geo-image-quality-context { margin: 0; border-left: 2px solid var(--gi-brand-50); padding-left: 0.55rem; color: var(--muted); font-size: 0.7rem; line-height: 1.45; } .detection-review-panel { display: grid; gap: 0.75rem; margin-top: 0.85rem; border-top: 1px solid var(--line); padding-top: 0.85rem; } .detection-review-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); } .detection-review-filters, .detection-review-editor, .detection-review-pagination { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 0.65rem; align-items: end; } .detection-review-filters label, .detection-review-editor label { display: grid; min-width: 0; gap: 0.3rem; color: var(--muted); font-size: 0.72rem; } .detection-review-list { display: grid; max-height: 34rem; gap: 0.5rem; margin: 0; overflow: auto; padding: 0; list-style: none; } .detection-review-item { display: grid; gap: 0.6rem; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.7rem; background: var(--gi-surface); } .detection-review-item-heading { display: flex; min-width: 0; gap: 0.75rem; align-items: center; justify-content: space-between; } .detection-review-item-heading > div { display: grid; min-width: 0; gap: 0.15rem; } .detection-review-item-heading strong { overflow-wrap: anywhere; font-size: 0.82rem; } .detection-review-pagination { display: flex; align-items: center; justify-content: flex-end; } .detection-review-pagination span { color: var(--muted); font-size: 0.76rem; } @media (max-width: 900px) { .geo-image-quality-metrics, .detection-review-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } .detection-review-editor, .detection-review-filters { grid-template-columns: 1fr; } } @media (max-width: 560px) { .geo-image-quality-metrics, .detection-review-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* The source inventory is an overview band, not one of the scrollable data tools. */ .workspace-grid-data > section.source-catalog-panel { grid-column: 1 / -1; max-height: none; overflow: visible; }