@import 'maplibre-gl/dist/maplibre-gl.css'; :root { --bg: #f4f7f5; --panel: #ffffff; --panel-soft: #fafcfb; --surface-raised: #ffffff; --surface-sunken: #f7faf8; --text: #132018; --muted: #5f6f67; --line: #dbe4de; --line-strong: #b8c8bf; --accent: #0f766e; --accent-strong: #115e59; --accent-soft: #e3f4ef; --focus-ring: #0f766e; --focus-ring-soft: rgba(15, 118, 110, 0.2); --warning: #b45309; --danger: #991b1b; --shadow: 0 10px 26px rgba(33, 48, 41, 0.06); --shadow-soft: 0 6px 18px rgba(33, 48, 41, 0.045); color-scheme: light; } * { box-sizing: border-box; } html { overflow-x: hidden; background: var(--bg); } body { overflow-x: hidden; margin: 0; font-family: 'Public Sans', 'Segoe UI', Arial, sans-serif; color: var(--text); background: linear-gradient(180deg, rgba(15, 118, 110, 0.08), rgba(238, 244, 241, 0) 18rem), var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .workbench-shell { max-width: 100vw; overflow-x: clip; } .skip-link { position: fixed; top: 0.45rem; left: 0.75rem; z-index: 100; transform: translateY(-150%); border: 1px solid var(--accent); border-radius: var(--gi-radius-sm); padding: 0.48rem 0.7rem; background: var(--gi-surface); color: var(--accent-strong); font-size: 0.84rem; font-weight: 700; text-decoration: none; box-shadow: var(--shadow-soft); transition: transform 120ms ease; } .skip-link:focus-visible { transform: translateY(0); outline: 3px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus-ring-soft); } button, input, select, textarea { font: inherit; } button { min-height: 2.35rem; border: 1px solid var(--line-strong); border-radius: var(--gi-radius-sm); padding: 0.52rem 0.78rem; background: linear-gradient(180deg, var(--gi-surface), var(--gi-brand-50)); color: var(--text); cursor: pointer; font-weight: 600; transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; } button:hover:not(:disabled) { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12); } button:active:not(:disabled) { transform: translateY(1px); } button:disabled { cursor: not-allowed; opacity: 0.52; } button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .nav-item:focus-visible, .command-chip:focus-visible, .inspector-tab:focus-visible, .dataset-action-button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-color: var(--focus-ring); box-shadow: 0 0 0 5px var(--focus-ring-soft); } input, select, textarea { width: 100%; min-height: 2.35rem; border: 1px solid var(--line-strong); border-radius: var(--gi-radius-sm); padding: 0.52rem 0.62rem; background: var(--gi-surface); color: var(--text); } textarea { min-height: 6.5rem; resize: vertical; font-family: 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace; font-size: 0.84rem; line-height: 1.45; } input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.16); outline: none; } h1, h2, h3, p { overflow-wrap: anywhere; } h1 { margin: 0; max-width: 42rem; font-size: clamp(1.85rem, 2.6vw, 2.7rem); line-height: 1.02; letter-spacing: 0; } h2 { margin: 0 0 0.9rem; font-size: 1.28rem; line-height: 1.15; letter-spacing: 0; } h3 { margin: 1.1rem 0 0.55rem; font-size: 1rem; line-height: 1.2; letter-spacing: 0; } p { line-height: 1.45; } ul { margin: 0.65rem 0 0; padding-left: 1.1rem; } li + li { margin-top: 0.7rem; } label { display: block; margin-top: 0.72rem; color: var(--muted); font-size: 0.88rem; font-weight: 600; } label > input, label > select, label > textarea { margin-top: 0.28rem; } .app-shell { width: min(100%, 1540px); min-height: 100vh; margin: 0 auto; padding: 1.1rem; } .app-shell > header { display: flex; gap: 1rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1rem; padding: 0.8rem 0.1rem 0.2rem; } .app-shell > header p { max-width: 42rem; margin: 0; color: var(--muted); font-size: 0.98rem; text-align: right; } section { min-width: 0; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 1rem; background: color-mix(in srgb, var(--gi-surface) 96%, transparent); box-shadow: var(--shadow-soft); } .workspace-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; align-items: start; margin-top: 1rem; } .workspace-grid > section { grid-column: span 3; max-height: 42rem; overflow: auto; } .workspace-grid > section:nth-child(5), .workspace-grid > section:nth-child(6), .workspace-grid > section:nth-child(7) { grid-column: span 4; } .workspace-grid > section:nth-child(8), .workspace-grid > section:nth-child(9), .workspace-grid > section:nth-child(10) { grid-column: span 4; } .app-shell > section:not(.workbench-status-strip) { margin-top: 1rem; } .app-shell > main + section { margin-top: 1rem; } .app-shell > main + section { border-color: var(--gi-line); } .error { border: 1px solid var(--gi-danger-soft); border-radius: var(--gi-radius-sm); padding: 0.7rem 0.85rem; background: var(--gi-danger-soft); color: var(--danger); font-weight: 600; } .muted { color: var(--muted); } .eyebrow { margin: 0 0 0.25rem; color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .panel-header { display: flex; gap: 0.75rem; align-items: flex-start; justify-content: space-between; } .panel-header button { width: auto; min-width: 8.5rem; } .form-grid, .map-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.72rem; align-items: end; } .checkbox-row { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.72rem; min-width: 0; } .checkbox-row input { flex: 0 0 auto; width: auto; min-height: auto; margin: 0; } .summary-grid, .status-strip-grid { display: grid; gap: 0.7rem; } .summary-grid { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); margin-top: 0.8rem; } .summary-grid > div, .status-tile { border: 1px solid var(--line); border-radius: var(--gi-radius-sm); background: var(--panel-soft); } .summary-grid > div { padding: 0.7rem; } .workbench-status-strip { margin: 1rem 0; border-color: var(--gi-line); padding: 0.9rem; background: linear-gradient(180deg, var(--gi-surface), var(--gi-brand-50)); box-shadow: var(--gi-shadow-md); } .status-strip-header { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; margin-bottom: 0.72rem; } .status-strip-header h2 { margin-bottom: 0; font-size: 1.32rem; line-height: 1.15; } .status-next-action { max-width: 32rem; margin: 0; color: var(--muted); text-align: right; } .status-strip-grid { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0.58rem; } .status-tile { display: grid; align-content: start; min-height: 5.85rem; border-left: 4px solid #64748b; padding: 0.62rem 0.68rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74); } .status-tile strong { display: block; margin-top: 0.36rem; font-size: 0.98rem; line-height: 1.22; } .status-tile p { margin: 0.24rem 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.34; } .status-tile-ready { border-left-color: #15803d; } .status-tile-warning { border-left-color: var(--warning); } .status-tile-waiting { border-left-color: #64748b; } .status-tile-topline { display: flex; gap: 0.5rem; align-items: center; justify-content: space-between; color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0; text-transform: none; } .status-pill { flex: 0 0 auto; border: 1px solid var(--line); border-radius: var(--gi-radius-pill); padding: 0.12rem 0.46rem; background: var(--gi-surface); color: var(--gi-ink-800); font-size: 0.72rem; text-transform: lowercase; } .metric { display: block; font-size: 1.35rem; font-weight: 700; } .compact-list { color: var(--muted); font-size: 0.9rem; } .demo-actions { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--line); } .map-container { width: 100%; height: min(38vh, 440px); min-height: 18rem; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--gi-radius-sm); background: var(--gi-surface-sunken); } .map-controls { margin-bottom: 0.85rem; } .map-status { color: var(--muted); font-size: 0.95rem; } .feature-inspector { margin-top: 0.85rem; border-top: 1px solid var(--line); padding-top: 0.85rem; } .feature-inspector pre, section pre { max-height: 22rem; overflow: auto; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.85rem; background: #0b1411; color: #d7f7e8; font-size: 0.82rem; line-height: 1.48; } section div { min-width: 0; } section strong { font-weight: 700; } section li div { color: var(--muted); font-size: 0.88rem; line-height: 1.35; } section li strong + div { margin-top: 0.2rem; } @media (max-width: 1180px) { .workspace-grid > section, .workspace-grid > section:nth-child(5), .workspace-grid > section:nth-child(6), .workspace-grid > section:nth-child(7), .workspace-grid > section:nth-child(8), .workspace-grid > section:nth-child(9), .workspace-grid > section:nth-child(10) { grid-column: span 6; } .status-strip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .app-shell { padding: 0.75rem; } .app-shell > header, .status-strip-header, .panel-header { display: block; } .app-shell > header p, .status-next-action { margin-top: 0.55rem; text-align: left; } .workspace-grid, .status-strip-grid { grid-template-columns: 1fr; } .workspace-grid > section, .workspace-grid > section:nth-child(n) { grid-column: 1; max-height: none; } .panel-header button { width: 100%; margin-top: 0.6rem; } } .workbench-shell { width: 100%; max-width: 100vw; overflow-x: clip; padding: 0; background: var(--gi-surface-soft); } .workbench-topbar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: minmax(12rem, 17rem) minmax(0, 1fr); gap: 0.9rem; align-items: center; border-bottom: 1px solid var(--line); padding: 0.58rem 1rem; background: rgba(250, 253, 251, 0.97); backdrop-filter: blur(12px); } .brand-block h1 { font-size: 1.18rem; line-height: 1.1; } .brand-block .eyebrow { margin-bottom: 0.12rem; font-size: 0.66rem; } .context-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; } .context-bar > div { min-height: 3rem; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.44rem 0.58rem; background: var(--surface-raised); } .context-bar span { display: block; color: var(--muted); font-size: 0.66rem; font-weight: 700; letter-spacing: 0; text-transform: none; } .context-bar strong { display: block; margin-top: 0.18rem; font-size: 0.84rem; line-height: 1.25; } .workbench-layout { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr) 21rem; gap: 0; height: calc(100vh - 4.35rem); min-height: 42rem; max-width: 100vw; min-width: 0; } .workbench-sidebar, .workbench-inspector { min-width: 0; min-height: 0; overflow: auto; border-color: var(--line); background: var(--surface-sunken); } .workbench-sidebar { border-right: 1px solid var(--line); padding: 0.72rem; } .workbench-sidebar nav { display: grid; gap: 0.45rem; } .nav-item { display: block; width: 100%; min-height: 3.7rem; border-color: transparent; padding: 0.58rem 0.62rem; background: transparent; box-shadow: none; text-align: left; } .nav-item:hover:not(:disabled) { background: var(--gi-surface); } .nav-item span, .nav-item small { display: block; } .nav-item span { font-size: 0.9rem; } .nav-item small { margin-top: 0.22rem; color: var(--muted); font-size: 0.77rem; font-weight: 500; line-height: 1.3; } .nav-item-active { border-color: rgba(15, 118, 110, 0.34); background: var(--gi-surface); box-shadow: inset 4px 0 0 var(--accent); } .workbench-main { min-width: 0; min-height: 0; max-width: 100%; overflow: auto; scroll-margin-top: 8.5rem; padding: 0.9rem 1.05rem 1.15rem; } .workbench-inspector { border-left: 1px solid var(--line); padding: 0.85rem; } .workbench-inspector > section { border: 0; padding: 0; background: transparent; box-shadow: none; } .workspace-heading { display: flex; gap: 1rem; align-items: end; justify-content: space-between; margin-bottom: 0.65rem; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.76rem 0.9rem; background: var(--surface-raised); box-shadow: var(--shadow-soft); } .workspace-heading h2 { margin: 0; } .workspace-heading p:last-child { max-width: 32rem; margin: 0; color: var(--muted); text-align: right; } .workspace-command-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.8rem; align-items: center; margin-bottom: 0.85rem; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.48rem; background: color-mix(in srgb, var(--gi-surface) 74%, transparent); } .workspace-command-bar > span { max-width: 24rem; padding-right: 0.35rem; color: var(--muted); font-size: 0.82rem; line-height: 1.3; text-align: right; } .workspace-nav-cluster { display: flex; flex-wrap: wrap; gap: 0.35rem; } .command-chip { width: auto; min-height: 2.05rem; border-color: transparent; padding: 0.32rem 0.62rem; background: transparent; box-shadow: none; color: var(--muted); font-size: 0.8rem; } .command-chip-active { border-color: rgba(15, 118, 110, 0.34); background: var(--accent-soft); color: var(--accent-strong); } .workspace-stack { display: grid; gap: 1rem; } .workspace-grid { margin-top: 0; } .workspace-grid-data { grid-template-columns: repeat(2, minmax(0, 1fr)); } .workspace-grid-analysis, .workspace-grid-ai, .workspace-grid-exports { grid-template-columns: repeat(2, minmax(0, 1fr)); } .workspace-grid-data > section, .workspace-grid-analysis > section, .workspace-grid-ai > section, .workspace-grid-exports > section, .workspace-grid-data > section:nth-child(n), .workspace-grid-analysis > section:nth-child(n), .workspace-grid-ai > section:nth-child(n), .workspace-grid-exports > section:nth-child(n) { grid-column: auto; max-height: none; overflow: visible; } .workspace-panel { border-radius: var(--gi-radius-sm); background: var(--surface-raised); } .workspace-grid-data > section:nth-child(3) { grid-column: 1 / -1; } .workspace-grid-ai > section { align-self: stretch; } .workflow-guidance-panel { display: grid; gap: 0.72rem; border-left: 4px solid #2563eb; background: linear-gradient(180deg, var(--gi-surface), var(--gi-brand-50)); } .workflow-guidance-panel .panel-title-row { margin-bottom: 0; } .workflow-guidance-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.55rem; } .workflow-guidance-step { display: grid; align-content: start; gap: 0.28rem; min-height: 5.35rem; border-color: var(--line); padding: 0.62rem 0.68rem; background: var(--gi-surface); text-align: left; box-shadow: none; } .workflow-guidance-step small { color: var(--muted); font-size: 0.78rem; font-weight: 600; line-height: 1.3; } .workflow-guidance-step-active { border-color: rgba(15, 118, 110, 0.46); background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.12); } .workflow-guidance-step-ready { border-color: rgba(21, 128, 61, 0.28); background: var(--gi-brand-50); } .workflow-step-status { color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0; line-height: 1.2; text-transform: none; } .overview-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem); gap: 1rem; align-items: center; border-left: 4px solid var(--accent); background: linear-gradient(135deg, rgba(15, 118, 110, 0.08), color-mix(in srgb, var(--gi-surface) 82%, transparent)); box-shadow: var(--gi-shadow-md); } .overview-action-copy { max-width: 46rem; } .overview-actions h2 { max-width: 42rem; margin-bottom: 0.5rem; font-size: 1.22rem; line-height: 1.22; } .quick-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; } .overview-quick-actions { align-self: stretch; } .quick-action-button, .quick-action-grid button { display: grid; align-content: center; min-height: 4.25rem; text-align: center; } section form, section > div:not(.map-controls):not(.feature-inspector):not(.quick-action-grid):not(.geo-explorer-layout) { display: grid; gap: 0.55rem; } .panel-title-row { display: flex; } /* Deze houdt bewust !important. De paneelkop wordt elders naar grid gezet door een regel die niet met specificiteit te verslaan is zonder een selector te bouwen die nog fragieler is dan het probleem. Nagemeten op een productiebuild: zonder !important klapt de kop van elk werkruimtepaneel om naar grid. */ section > .panel-title-row { display: flex !important; } section button + button { margin-top: 0.45rem; } section table { width: 100%; margin-top: 0.75rem; border-collapse: collapse; font-size: 0.86rem; } section th, section td { border-bottom: 1px solid var(--line); padding: 0.5rem; text-align: left; vertical-align: top; } section th { color: var(--muted); font-size: 0.72rem; letter-spacing: 0; text-transform: none; } .table-scroll { width: 100%; max-height: 22rem; overflow: auto; margin-top: 0.75rem; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); background: var(--gi-surface); } .table-scroll table { min-width: 42rem; margin-top: 0; } .table-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--gi-brand-50); } .table-scroll th, .table-scroll td { max-width: 18rem; overflow-wrap: anywhere; } .pagination-toolbar { display: flex; flex-wrap: wrap; gap: 0.65rem 1rem; align-items: center; justify-content: space-between; margin-top: 0.85rem; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.55rem 0.65rem; background: var(--gi-brand-50); } .pagination-summary, .pagination-actions, .pagination-page-size { display: flex; gap: 0.45rem; align-items: center; margin: 0; } .pagination-summary span, .pagination-actions span, .pagination-page-size { color: var(--muted); font-size: 0.82rem; } .pagination-page-size select { width: auto; min-width: 4.5rem; margin: 0; padding: 0.35rem 1.65rem 0.35rem 0.45rem; } .pagination-button { width: 2rem; min-width: 2rem; height: 2rem; padding: 0; font-size: 1rem; line-height: 1; } .source-tile-cell { white-space: nowrap; } .workbench-inspector .job-result, .workbench-inspector pre { max-height: 16rem; } .inspector-header h2 { position: sticky; top: 0; z-index: 2; margin: 0 -1rem 0.8rem; border-bottom: 1px solid var(--line); padding: 0.35rem 1rem 0.75rem; background: var(--gi-brand-50); } .workbench-main .map-container { height: calc(100vh - 23rem); min-height: 28rem; } .panel-title-row { display: flex; gap: 0.75rem; align-items: flex-start; justify-content: space-between; margin-bottom: 0.75rem; } .panel-title-row h2, .panel-title-row h3 { margin: 0; } .count-pill, .status-badge { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--gi-radius-pill); padding: 0.18rem 0.52rem; background: var(--gi-surface); color: var(--gi-ink-800); font-size: 0.74rem; font-weight: 700; line-height: 1.2; } .status-badge-ready { border-color: rgba(21, 128, 61, 0.28); background: var(--gi-brand-50); color: var(--gi-brand-600); } .primary-action { border-color: rgba(15, 118, 110, 0.55); background: linear-gradient(180deg, #0f766e, #115e59); color: #ffffff; } .primary-action:hover:not(:disabled) { border-color: #0f766e; box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.18); } .secondary-action { background: var(--gi-surface); } .compact-form, .dataset-upload-form, .lab-form-grid { display: grid; gap: 0.7rem; } .data-selection-summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.16rem; border: 1px solid rgba(15, 118, 110, 0.26); border-left: 4px solid var(--accent); border-radius: var(--gi-radius-sm); padding: 0.68rem 0.75rem; background: linear-gradient(180deg, var(--gi-surface), var(--gi-brand-50)); box-shadow: 0 1px 0 rgba(19, 32, 24, 0.03); } .data-selection-summary span, .data-selection-summary small, .data-section-label { color: var(--muted); font-size: 0.74rem; font-weight: 700; letter-spacing: 0; line-height: 1.2; text-transform: none; } .data-selection-summary strong { min-width: 0; overflow-wrap: anywhere; font-size: 0.98rem; line-height: 1.24; } .data-selection-summary small { letter-spacing: 0; text-transform: none; } .data-panel-form-block, .data-panel-list-block { display: grid; gap: 0.56rem; min-width: 0; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.72rem; background: var(--panel-soft); } .data-panel-list-block { background: var(--gi-surface); } .data-section-label { margin: 0; } .dataset-upload-form { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); align-items: end; border: 0; padding: 0; background: transparent; } .dataset-upload-form label, .file-input-label { min-width: 0; } .file-input-label input[type='file'] { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .data-density-grid { border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.55rem; background: var(--gi-surface); } .dataset-role-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.55rem; margin-top: 0.75rem; } .dataset-role-summary { display: grid; gap: 0.12rem; min-width: 0; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.65rem; background: var(--gi-surface); } .dataset-role-summary span, .dataset-role-summary small { color: var(--muted); font-size: 0.76rem; font-weight: 700; text-transform: none; } .dataset-role-summary strong { color: var(--ink); font-size: 1.18rem; line-height: 1; } .dataset-role-selected { border-color: rgba(15, 23, 42, 0.24); background: var(--gi-info-soft); color: var(--gi-info); } .dataset-role-reference { border-color: rgba(15, 118, 110, 0.28); background: var(--gi-brand-50); color: var(--gi-brand-600); } .dataset-role-candidate { border-color: rgba(37, 99, 235, 0.24); background: var(--gi-info-soft); color: var(--gi-info); } .dataset-role-source { border-color: rgba(100, 116, 139, 0.22); background: var(--gi-info-soft); color: var(--gi-ink-800); } .entity-list, .dataset-list, .model-list, .quality-check-list, .export-list, .metric-list { display: grid; gap: 0.7rem; padding: 0; list-style: none; } .entity-card, .dataset-card, .model-card, .lab-block, .layer-control-card, .quality-check-card, .export-card, .latest-export-card, .empty-state, .result-state { border: 1px solid var(--line); border-radius: var(--gi-radius-sm); background: var(--panel-soft); } .entity-card { display: grid; width: 100%; gap: 0.25rem; padding: 0.72rem; text-align: left; } button.entity-card { min-height: auto; } .entity-card-active { border-color: rgba(15, 118, 110, 0.48); box-shadow: inset 4px 0 0 var(--accent); } .entity-card span, .entity-meta, .dataset-metrics { color: var(--muted); font-size: 0.84rem; } .entity-meta, .dataset-metrics { display: flex; flex-wrap: wrap; gap: 0.35rem 0.65rem; margin-top: 0.32rem; } .dataset-card, .model-card, .lab-block, .quality-check-card, .export-card, .latest-export-card, .empty-state, .result-state { min-width: 0; padding: 0.85rem; } .result-state { display: grid; gap: 0.18rem; background: var(--gi-surface); overflow-wrap: anywhere; } .result-state strong { font-size: 0.92rem; line-height: 1.25; } .result-state p { margin: 0; color: var(--muted); font-size: 0.84rem; line-height: 1.38; } .result-state-error { border-color: rgba(153, 27, 27, 0.25); background: rgba(153, 27, 27, 0.07); } .result-state-error strong, .result-state-error p { color: var(--danger); } .result-state-empty { border-style: dashed; background: var(--panel-soft); } .result-state-loading { border-color: rgba(180, 83, 9, 0.24); background: rgba(180, 83, 9, 0.08); } .result-state-ready { border-color: rgba(15, 118, 110, 0.28); background: var(--accent-soft); } .dataset-card, .model-card, .quality-check-card, .export-card, .lab-block { box-shadow: 0 1px 0 rgba(19, 32, 24, 0.03); } .dataset-card-active { border-color: rgba(15, 118, 110, 0.5); box-shadow: inset 4px 0 0 var(--accent); } .dataset-card-header, .model-card, .quality-check-header, .export-card-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: start; } .dataset-card-kicker { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-bottom: 0.28rem; color: var(--muted); font-size: 0.75rem; font-weight: 700; text-transform: none; } .dataset-role-badge { display: inline-flex; align-items: center; max-width: 100%; min-height: 1.45rem; border: 1px solid currentColor; border-radius: var(--gi-radius-pill); padding: 0.16rem 0.5rem; font-size: 0.72rem; line-height: 1; } .dataset-card-title { display: block; overflow-wrap: anywhere; line-height: 1.25; } .model-card p { grid-column: 1 / -1; margin: 0.25rem 0 0; } .model-card strong { min-width: 0; overflow-wrap: anywhere; } .model-card-ready { border-color: rgba(21, 128, 61, 0.24); } .dataset-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0.7rem; } .dataset-action-hint { margin: 0.65rem 0 0; color: var(--gi-ink-800); font-size: 0.84rem; line-height: 1.35; } .dataset-card .button-row, .dataset-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr)); gap: 0.5rem; margin-top: 0.7rem; } .dataset-action-button { display: grid; gap: 0.12rem; align-content: center; width: 100%; min-height: 3.25rem; margin-top: 0; text-align: left; touch-action: pan-x; } .dataset-action-button span, .dataset-action-button small { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .dataset-action-button span { font-weight: 700; } .dataset-action-button small { font-size: 0.73rem; font-weight: 600; line-height: 1.2; opacity: 0.78; } .button-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; } .button-row button, .panel-title-row button { width: auto; } .result-summary-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.45rem 0.7rem; margin-top: 0.75rem; border: 1px solid rgba(15, 118, 110, 0.22); border-radius: var(--gi-radius-sm); padding: 0.72rem; background: var(--accent-soft); } .result-summary-card p { min-width: 0; margin: 0; color: var(--gi-brand-600); font-size: 0.86rem; line-height: 1.35; overflow-wrap: anywhere; } .quality-results-shell { display: grid; gap: 0.75rem; } .quality-summary-surface, .quality-evidence-surface, .quality-drilldown-surface, .quality-control-surface, .quality-history-surface { min-width: 0; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.72rem; background: var(--gi-surface); } .quality-summary-surface { background: linear-gradient(180deg, var(--gi-surface), var(--gi-brand-50)); } .quality-evidence-surface { background: var(--gi-brand-50); } .quality-drilldown-surface { display: grid; gap: 0.72rem; background: linear-gradient(180deg, var(--gi-surface), var(--gi-brand-50)); } .quality-drilldown-surface .panel-title-row { align-items: start; } .quality-drilldown-surface .panel-title-row button { width: auto; min-height: 2.35rem; } .quality-control-surface, .quality-history-surface { display: grid; gap: 0.68rem; } .quality-control-surface .button-row, .quality-control-surface .quality-history-controls, .quality-control-surface .list-limit-banner { margin-top: 0; } .quality-result-state-stack { display: grid; gap: 0.55rem; } .quality-results-shell .quality-check-list { margin: 0; } .change-detection-shell { display: grid; gap: 0.75rem; } .change-detection-heading { margin-bottom: 0; } .change-detection-input-surface, .change-detection-result-surface, .change-detection-warning-surface { min-width: 0; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.72rem; background: var(--gi-surface); } .change-detection-input-surface { background: linear-gradient(180deg, var(--gi-surface), var(--gi-brand-50)); } .change-detection-state-stack { display: grid; gap: 0.55rem; } .change-detection-shell .form-grid { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.62rem; margin: 0; } .change-detection-shell .form-grid label { min-width: 0; } .change-detection-shell .form-grid input, .change-detection-shell .form-grid select { width: 100%; min-width: 0; } .change-detection-shell .summary-grid { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.55rem; margin: 0; } .change-detection-warning-surface { border-color: rgba(180, 83, 9, 0.24); background: rgba(180, 83, 9, 0.08); } .change-detection-warning-surface strong { display: block; color: var(--gi-warn); font-size: 0.88rem; } .change-detection-warning-surface .compact-list { margin-top: 0.45rem; } .quality-results-shell .quality-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; margin: 0; } .quality-results-shell .quality-handoff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.65rem; margin: 0; } .quality-drilldown-grid, .quality-evidence-token-grid, .quality-feature-evidence-grid, .quality-provenance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.58rem; } .quality-summary-grid > div { border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.72rem; background: var(--gi-surface); } .quality-handoff-grid > div { min-width: 0; border: 1px solid rgba(15, 118, 110, 0.18); border-radius: var(--gi-radius-sm); padding: 0.72rem; background: var(--gi-surface); } .quality-drilldown-grid > div, .quality-evidence-token-grid > div, .quality-feature-evidence-grid > div, .quality-provenance-grid > div { min-width: 0; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.68rem; background: var(--gi-surface); } .quality-evidence-token-grid > div { border-color: rgba(15, 118, 110, 0.22); background: linear-gradient(180deg, var(--gi-brand-50), var(--gi-surface)); } .quality-evidence-map-handoff, .quality-evidence-token-grid > div:nth-child(3) { background: var(--accent-soft); } .quality-summary-grid span, .quality-handoff-grid span, .quality-drilldown-grid span, .quality-evidence-token-grid span, .quality-feature-evidence-grid span, .quality-provenance-grid span, .quality-score-row span, .latest-export-card span, .metric-list span { display: block; color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0; text-transform: none; } .quality-summary-grid strong { display: block; margin-top: 0.28rem; font-size: 1.02rem; line-height: 1.2; } .quality-handoff-grid strong { display: block; margin-top: 0.26rem; color: var(--ink); font-size: 1rem; line-height: 1.2; } .quality-drilldown-grid strong, .quality-evidence-token-grid strong { display: block; margin-top: 0.22rem; overflow: hidden; color: var(--ink); font-size: 0.9rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .quality-drilldown-grid p, .quality-evidence-token-grid p, .quality-feature-evidence-grid p { margin: 0.24rem 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.35; overflow-wrap: anywhere; } .quality-feature-evidence-grid ul { display: grid; gap: 0.28rem; margin: 0.38rem 0 0; padding-left: 1.1rem; color: var(--text); font-size: 0.78rem; line-height: 1.35; overflow-wrap: anywhere; } .quality-provenance-pre { max-height: 11rem; margin: 0.38rem 0 0; overflow: auto; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.58rem; background: #0f172a; color: #e2e8f0; font-size: 0.75rem; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; } .quality-check-actions { display: flex; justify-content: flex-end; } .quality-check-actions button { width: auto; min-height: 2.15rem; } .quality-dataset-name, .quality-check-dataset-link { overflow-wrap: anywhere; word-break: break-word; } .quality-dataset-name { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.35; } .quality-score-row { display: grid; grid-template-columns: 6rem 5rem minmax(0, 1fr); gap: 0.65rem; margin-top: 0.75rem; } .quality-score-row > div { min-width: 0; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.55rem; background: var(--gi-surface); } .quality-score-row strong { display: block; margin-top: 0.22rem; overflow: hidden; font-size: 0.9rem; line-height: 1.25; text-overflow: ellipsis; white-space: normal; } .quality-score-row strong, .inspector-field strong { overflow-wrap: anywhere; word-break: break-word; } .quality-metric-section { margin-top: 0.75rem; } .metric-list-label, .quality-metric-section > span { display: block; color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0; text-transform: none; } .quality-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.5rem; margin-top: 0.45rem; } .quality-metric-card { min-width: 0; border: 1px solid rgba(15, 118, 110, 0.18); border-radius: var(--gi-radius-sm); padding: 0.58rem; background: var(--gi-brand-50); } .quality-metric-card-critical { border-color: rgba(185, 28, 28, 0.18); background: var(--gi-warn-soft); } .quality-metric-card span { display: block; color: var(--muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0; text-transform: none; } .quality-metric-card strong { display: block; margin-top: 0.24rem; overflow: hidden; color: var(--ink); font-size: 1.08rem; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; } .metric-list-label { margin-top: 0.82rem; } .metric-list { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); margin-top: 0.75rem; } .metric-list li { display: grid; gap: 0.16rem; margin-top: 0; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.58rem; background: var(--gi-surface); } .metric-list strong { font-size: 0.95rem; } .empty-state { display: grid; gap: 0.25rem; margin-top: 0.75rem; background: var(--gi-surface); color: var(--text); } .empty-state p, .latest-export-card p, .export-card p { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.88rem; line-height: 1.4; } .map-empty-state { margin-bottom: 0.85rem; } .map-empty-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.25rem, 1fr)); gap: 0.55rem; margin-top: 0.5rem; } .map-empty-action-grid button { display: grid; min-width: 0; min-height: 4.2rem; gap: 0.18rem; margin-top: 0; text-align: left; touch-action: pan-x; } .map-empty-action-grid span, .map-empty-action-grid strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .map-empty-action-grid span { color: var(--muted); font-size: 0.78rem; font-weight: 600; } .export-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin: 0.8rem 0; } .export-center-shell, .system-provider-shell { display: grid; gap: 0.85rem; min-width: 0; } .export-summary-surface, .export-handoff-surface, .latest-artifact-surface, .export-actions-surface, .export-history-surface, .system-provider-capability-surface { display: grid; gap: 0.68rem; min-width: 0; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.78rem; background: linear-gradient(180deg, var(--gi-surface), var(--gi-brand-50)); box-shadow: 0 1px 0 rgba(19, 32, 24, 0.03); } .export-history-surface, .system-provider-capability-surface { background: var(--gi-surface); } .latest-artifact-surface { background: var(--gi-surface); } .export-center-shell .quality-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.58rem; margin: 0; } .export-handoff-surface .handoff-summary-card { margin-top: 0; border: 0; padding: 0; background: transparent; box-shadow: none; } .export-actions-surface .export-action-grid { margin: 0; } .export-state-stack, .system-provider-state-stack, .provider-detail-stack { display: grid; gap: 0.5rem; min-width: 0; } .export-action-grid button { min-height: 2.8rem; text-align: left; } .export-history-controls input, .export-history-controls select { width: 100%; min-width: 0; } .handoff-summary-card { display: grid; gap: 0.72rem; margin-top: 0.8rem; border: 1px solid rgba(15, 118, 110, 0.24); border-radius: var(--gi-radius-sm); padding: 0.85rem; background: linear-gradient(180deg, var(--gi-brand-50), var(--gi-surface)); } .handoff-summary-card .panel-title-row { margin-bottom: 0; } .handoff-readiness-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem; } .export-center .handoff-readiness-grid { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); } .handoff-readiness-grid > div { min-width: 0; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.62rem; background: var(--gi-surface); } .handoff-readiness-grid span, .handoff-action-card span { display: block; color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0; text-transform: none; } .handoff-readiness-grid strong, .handoff-action-card strong { display: block; margin-top: 0.22rem; overflow: hidden; font-size: 0.88rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .handoff-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.6rem; grid-column: 1 / -1; width: 100%; } .handoff-action-card { display: grid; min-width: 0; gap: 0.35rem; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.72rem; background: var(--gi-surface); } .handoff-action-card-primary { border-color: rgba(15, 118, 110, 0.28); background: var(--accent-soft); } .handoff-action-card p { min-height: 2.55rem; margin: 0; color: var(--muted); font-size: 0.84rem; line-height: 1.36; overflow-wrap: anywhere; } .handoff-action-card button { width: 100%; margin-top: 0; } .latest-artifact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.6rem; } .latest-artifact-card { display: grid; min-width: 0; gap: 0.36rem; border: 1px solid rgba(15, 118, 110, 0.2); border-radius: var(--gi-radius-sm); padding: 0.72rem; background: linear-gradient(180deg, var(--gi-brand-50), var(--gi-surface)); } .latest-artifact-card-empty { border-style: dashed; border-color: var(--line); background: var(--panel-soft); } .latest-artifact-card span { color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0; text-transform: none; } .latest-artifact-card strong { overflow: hidden; font-size: 0.9rem; line-height: 1.24; text-overflow: ellipsis; white-space: nowrap; } .latest-artifact-card p, .latest-artifact-card small { margin: 0; color: var(--muted); font-size: 0.8rem; line-height: 1.35; overflow-wrap: anywhere; } .latest-artifact-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; align-items: center; margin-top: 0.18rem; } .latest-artifact-actions button, .latest-artifact-actions .status-badge { width: 100%; min-height: 2.1rem; justify-content: center; text-align: center; } .export-type-badge { display: inline-flex; max-width: 100%; align-items: center; border: 1px solid rgba(15, 118, 110, 0.22); border-radius: var(--gi-radius-pill); padding: 0.18rem 0.54rem; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.74rem; font-weight: 700; line-height: 1.2; } .latest-export-card { display: grid; gap: 0.2rem; margin-top: 0.75rem; border-color: rgba(15, 118, 110, 0.28); background: var(--accent-soft); } .quality-history-controls, .export-history-controls { display: grid; grid-template-columns: minmax(14rem, 1.2fr) minmax(10rem, 0.9fr) minmax(9rem, 0.8fr) auto; gap: 0.65rem; align-items: end; margin-top: 0.8rem; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.72rem; background: var(--gi-surface); } .quality-history-controls label, .export-history-controls label { margin-top: 0; } .quality-history-controls button, .export-history-controls button { min-height: 2.35rem; width: auto; } .quality-history-controls { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } .quality-history-controls button { width: 100%; } .quality-list-count { overflow-wrap: anywhere; } .list-limit-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.7rem; align-items: center; margin-top: 0.8rem; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.62rem 0.72rem; background: var(--gi-surface); } .list-limit-banner span { color: var(--muted); font-size: 0.86rem; line-height: 1.35; } .list-limit-banner button { width: auto; min-height: 2.15rem; } .export-list { margin-top: 0.8rem; } .export-card p { overflow-wrap: anywhere; } .system-provider-list { display: grid; gap: 0.72rem; padding: 0; list-style: none; } .system-provider-card { display: grid; min-width: 0; gap: 0.62rem; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.85rem; background: var(--panel-soft); } .system-provider-card div { min-width: 0; overflow-wrap: anywhere; } .system-provider-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.65rem; align-items: start; } .system-provider-header strong, .system-provider-header span { display: block; } .system-provider-header span:not(.status-badge) { margin-top: 0.16rem; color: var(--muted); font-size: 0.82rem; } .system-provider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.5rem; } .system-provider-grid > div { border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.55rem; background: var(--gi-surface); } .system-provider-grid span { display: block; color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0; text-transform: none; } .system-provider-grid strong { display: block; margin-top: 0.18rem; font-size: 0.88rem; line-height: 1.25; overflow-wrap: anywhere; } .provider-layer-list { display: flex; flex-wrap: wrap; gap: 0.35rem; } .provider-layer-chip { display: inline-flex; min-height: 1.45rem; align-items: center; border: 1px solid rgba(15, 118, 110, 0.2); border-radius: var(--gi-radius-pill); padding: 0.16rem 0.5rem; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.74rem; font-weight: 700; } .provider-detail-stack { color: var(--muted); font-size: 0.84rem; line-height: 1.36; } .provider-provenance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.5rem; } .provider-provenance-card { min-width: 0; border: 1px solid rgba(15, 118, 110, 0.16); border-radius: var(--gi-radius-sm); padding: 0.55rem; background: var(--gi-surface); } .provider-provenance-card span { display: block; color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0; text-transform: none; } .provider-provenance-card strong { display: block; margin-top: 0.18rem; overflow-wrap: anywhere; font-size: 0.88rem; line-height: 1.25; } .export-preview-panel .job-result { max-height: 38rem; } .export-preview-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.55rem; margin-top: 0.75rem; } .export-preview-summary-card { display: grid; gap: 0.14rem; min-width: 0; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.62rem; background: var(--gi-surface); } .export-preview-summary-card span { color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0; text-transform: none; } .export-preview-summary-card strong { overflow-wrap: anywhere; font-size: 0.92rem; line-height: 1.2; } .export-preview-json-shell { min-width: 0; margin-top: 0.75rem; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); overflow: hidden; background: #0f172a; } .export-preview-json-toolbar { display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: space-between; border-bottom: 1px solid rgba(226, 232, 240, 0.18); padding: 0.55rem 0.68rem; color: #cbd5e1; font-size: 0.78rem; font-weight: 700; } .export-preview-json-body { max-height: 32rem; overflow: auto; } .export-preview-json-body .job-result { max-height: none; margin: 0; border: 0; border-radius: 0; background: #0f172a; color: #e2e8f0; white-space: pre-wrap; overflow-wrap: anywhere; } .map-workspace-shell { display: grid; gap: 0.75rem; } .map-context-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.6rem; } .map-context-summary > div { min-width: 0; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--gi-radius-sm); padding: 0.68rem 0.78rem; background: linear-gradient(180deg, var(--gi-surface), var(--gi-brand-50)); } .map-context-summary span, .map-context-summary small { display: block; } .map-context-summary span { color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0; text-transform: none; } .map-context-summary strong { display: block; margin-top: 0.2rem; overflow: hidden; color: var(--ink); font-size: 0.98rem; line-height: 1.22; text-overflow: ellipsis; white-space: nowrap; } .map-context-summary small { margin-top: 0.25rem; overflow: hidden; color: var(--muted); font-size: 0.78rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .map-control-surface, .map-frame-surface, .map-inspection-surface { min-width: 0; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.72rem; background: var(--gi-surface); } .map-control-surface { display: grid; gap: 0.68rem; } .map-frame-surface { padding: 0.52rem; background: var(--gi-brand-50); } .map-frame-surface .map-container { margin: 0; } .map-inspection-surface .feature-inspector { margin-top: 0; border-top: 0; padding-top: 0; } .map-workspace-shell .map-toolbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; align-items: end; margin-bottom: 0; } .layer-control-card { display: grid; gap: 0.5rem; min-width: 0; padding: 0.58rem 0.65rem; } .layer-control-card input[type='range'] { width: 100%; min-width: 0; min-height: auto; padding: 0; touch-action: pan-x; } .map-status { display: grid; gap: 0.25rem; min-width: 0; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.62rem 0.72rem; background: var(--panel-soft); } .map-status span { color: var(--muted); font-size: 0.84rem; } .map-status .viewport-vector-status { grid-column: 1 / -1; padding: 0.5rem 0.65rem; border: 1px solid var(--gi-info-soft); background: var(--gi-info-soft); color: var(--gi-info); font-weight: 600; } .map-status .viewport-vector-status-ready { border-color: var(--gi-brand-50); background: var(--gi-brand-50); color: var(--gi-brand-600); } .map-status .viewport-vector-status-warning { border-color: var(--gi-warn-soft); background: var(--gi-warn-soft); color: var(--gi-warn); } .map-status .viewport-vector-status-error { border-color: var(--gi-danger-soft); background: var(--gi-danger-soft); color: var(--gi-danger); } .layer-provenance-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.65rem; margin-bottom: 0; } .qa-evidence-map-status { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto; gap: 0.65rem; align-items: center; border: 1px solid var(--gi-info-soft); border-left: 4px solid #2563eb; border-radius: var(--gi-radius-sm); padding: 0.72rem; background: var(--gi-info-soft); } .qa-evidence-map-status span, .qa-evidence-map-status strong { display: block; } .qa-evidence-map-status > div:first-child span { color: var(--gi-info); font-size: 0.68rem; font-weight: 700; letter-spacing: 0; text-transform: none; } .qa-evidence-map-status > div:first-child strong { margin-top: 0.18rem; color: var(--gi-info); } .qa-evidence-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.38rem; } .qa-evidence-legend span { display: inline-flex; align-items: center; gap: 0.38rem; color: var(--gi-info); font-size: 0.78rem; font-weight: 600; } .qa-evidence-swatch { display: inline-block; width: 0.72rem; height: 0.72rem; border-radius: var(--gi-radius-pill); border: 2px solid var(--gi-surface); box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.18); } .qa-evidence-swatch-match-candidate { background: #2563eb; } .qa-evidence-swatch-match-reference { background: #0f766e; } .qa-evidence-swatch-false-positive { background: #dc2626; } .qa-evidence-swatch-false-negative { background: #d97706; } .layer-provenance-rail > div, .feature-property-chip { min-width: 0; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.58rem 0.68rem; background: var(--gi-surface); } .layer-provenance-rail span, .feature-property-chip span { display: block; color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0; text-transform: none; } .layer-provenance-rail strong, .feature-property-chip strong { display: block; margin-top: 0.2rem; overflow: hidden; font-size: 0.84rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .layer-provenance-rail strong { display: -webkit-box; min-height: 2.1rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; } .feature-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.55rem; margin-bottom: 0.75rem; } .bbox-select-surface { display: grid; gap: 0.72rem; min-width: 0; margin-bottom: 0.85rem; border: 1px solid rgba(3, 105, 161, 0.24); border-left: 4px solid #0369a1; border-radius: var(--gi-radius-sm); padding: 0.72rem; background: linear-gradient(180deg, var(--gi-surface), var(--gi-info-soft)); } .bbox-select-surface .panel-title-row { margin-bottom: 0; } .bbox-select-status { display: grid; gap: 0.22rem; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.58rem 0.66rem; background: var(--gi-surface); } .bbox-select-status span { color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0; text-transform: none; } .bbox-select-status strong { overflow-wrap: anywhere; font-size: 0.9rem; line-height: 1.3; } .bbox-select-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.5rem; } .bbox-select-grid label { min-width: 0; } .bbox-select-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .bbox-select-actions button { width: fit-content; max-width: 100%; margin-top: 0; } .bbox-selection-result { display: grid; gap: 0.64rem; min-width: 0; border-top: 1px solid var(--line); padding-top: 0.68rem; } .map-selection-qa-surface { display: grid; grid-template-columns: minmax(11rem, 1fr) auto; gap: 0.58rem; align-items: end; min-width: 0; border-top: 1px solid var(--line); padding-top: 0.68rem; } .map-selection-qa-surface label { min-width: 0; } .map-selection-qa-surface .primary-action { width: fit-content; max-width: 100%; margin-top: 0; } .map-selection-qa-surface .error, .map-selection-qa-surface .map-selection-qa-evidence { grid-column: 1 / -1; } .map-selection-qa-evidence { display: grid; gap: 0.62rem; min-width: 0; border: 1px solid rgba(15, 118, 110, 0.2); border-radius: var(--gi-radius-sm); padding: 0.68rem; background: var(--gi-surface); } .map-selection-qa-evidence .panel-title-row { margin-bottom: 0; } .map-selection-qa-evidence .secondary-action { width: fit-content; max-width: 100%; margin-top: 0; } .map-selection-qa-warnings { display: grid; gap: 0.36rem; min-width: 0; border-top: 1px solid var(--line); padding-top: 0.58rem; } .map-selection-qa-warnings span { color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0; text-transform: none; } .map-selection-qa-warnings ul { display: grid; gap: 0.28rem; margin: 0; padding-left: 1.1rem; color: var(--text); font-size: 0.82rem; line-height: 1.35; } @media (max-width: 720px) { .map-selection-qa-surface { grid-template-columns: 1fr; } } /* Sprint 115 QA/Exports usability pass: calmer evidence review and handoff artifact surfaces. */ .workspace-grid-analysis, .workspace-grid-exports { gap: 0.85rem; } .workspace-grid-analysis { grid-template-columns: minmax(19rem, 0.82fr) minmax(26rem, 1.18fr); } .workspace-grid-exports { grid-template-columns: minmax(28rem, 1.15fr) minmax(20rem, 0.85fr); } .quality-results-shell, .export-center-shell { gap: 0.62rem; } .quality-summary-surface, .quality-evidence-surface, .quality-drilldown-surface, .quality-control-surface, .quality-history-surface, .export-summary-surface, .export-handoff-surface, .latest-artifact-surface, .export-actions-surface, .export-history-surface { border-radius: var(--gi-radius-sm); padding: 0.62rem; background: var(--gi-surface); box-shadow: none; } .quality-summary-surface, .export-summary-surface { background: var(--gi-brand-50); } .quality-results-shell .quality-summary-grid, .export-center-shell .quality-summary-grid { gap: 0.42rem; } .quality-summary-grid > div, .quality-handoff-grid > div, .quality-drilldown-grid > div, .quality-evidence-token-grid > div, .quality-feature-evidence-grid > div, .quality-provenance-grid > div, .handoff-readiness-grid > div, .latest-artifact-card, .handoff-action-card, .export-card, .quality-check-card { border-radius: var(--gi-radius-sm); padding: 0.5rem 0.56rem; background: var(--gi-surface); box-shadow: none; } .quality-results-shell .quality-handoff-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.42rem; } .quality-summary-grid span, .quality-handoff-grid span, .quality-drilldown-grid span, .quality-evidence-token-grid span, .quality-feature-evidence-grid span, .quality-provenance-grid span, .quality-score-row span, .latest-export-card span, .metric-list span, .handoff-readiness-grid span, .handoff-action-card span, .latest-artifact-card span { font-size: 0.6rem; letter-spacing: 0.055em; } .quality-summary-grid strong, .quality-handoff-grid strong, .quality-drilldown-grid strong, .quality-evidence-token-grid strong, .handoff-readiness-grid strong, .handoff-action-card strong, .latest-artifact-card strong { font-size: 0.82rem; } .quality-dataset-name, .quality-drilldown-grid p, .quality-evidence-token-grid p, .quality-feature-evidence-grid p, .handoff-action-card p, .latest-artifact-card p, .latest-artifact-card small, .export-card p { font-size: 0.74rem; line-height: 1.3; } .quality-drilldown-surface .panel-title-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.45rem; } .quality-drilldown-surface .panel-title-row .muted { margin: 0.18rem 0 0; font-size: 0.78rem; } .quality-drilldown-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.42rem; } .quality-evidence-token-grid { grid-template-columns: minmax(9rem, 0.75fr) minmax(9rem, 0.75fr) minmax(14rem, 1.5fr); gap: 0.42rem; } .quality-feature-evidence-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.42rem; } .quality-feature-evidence-grid ul { max-height: 6.5rem; overflow: auto; padding-left: 0.95rem; font-size: 0.72rem; } .quality-provenance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.42rem; } .quality-provenance-pre { max-height: 7.5rem; border-radius: var(--gi-radius-xs); padding: 0.48rem; font-size: 0.68rem; } .quality-history-controls, .export-history-controls { margin-top: 0; border-radius: var(--gi-radius-sm); padding: 0.52rem; gap: 0.45rem; } .quality-history-controls input, .quality-history-controls select, .export-history-controls input, .export-history-controls select { min-height: 2.1rem; } .quality-check-list, .export-list { gap: 0.5rem; } .quality-check-header, .export-card-header { gap: 0.5rem; } .quality-check-actions { gap: 0.38rem; justify-content: flex-start; margin-top: 0.45rem; } .quality-check-actions button, .export-card .button-row button, .latest-artifact-actions button, .handoff-action-card button { min-height: 2.05rem; padding: 0.34rem 0.5rem; font-size: 0.76rem; } .quality-score-row { grid-template-columns: 5rem 4.5rem minmax(0, 1fr); gap: 0.42rem; margin-top: 0.52rem; } .quality-score-row > div, .quality-metric-card, .metric-list li { border-radius: var(--gi-radius-xs); padding: 0.42rem 0.48rem; } .quality-metric-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.36rem; } .quality-metric-card span { font-size: 0.58rem; } .quality-metric-card strong { font-size: 0.88rem; } .metric-list { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.38rem; margin-top: 0.48rem; } .metric-list-label { margin-top: 0.55rem; } .export-center-shell .quality-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .export-handoff-surface .handoff-summary-card { gap: 0.5rem; } .handoff-readiness-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.42rem; } .latest-artifact-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.42rem; } .latest-artifact-card { gap: 0.24rem; } .latest-artifact-actions { grid-template-columns: 1fr; gap: 0.3rem; } .export-action-grid { margin: 0; } .handoff-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.48rem; } .handoff-action-card { gap: 0.24rem; } .handoff-action-card p { min-height: 2.1rem; } .export-state-stack { gap: 0.42rem; } .export-card p { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .export-card .button-row { gap: 0.38rem; margin-top: 0.5rem; } .export-type-badge { padding: 0.12rem 0.42rem; font-size: 0.64rem; } .list-limit-banner { margin-top: 0; border-radius: var(--gi-radius-sm); padding: 0.48rem 0.56rem; } .list-limit-banner span { font-size: 0.76rem; } @media (max-width: 1280px) { .workspace-grid-analysis, .workspace-grid-exports, .quality-drilldown-grid, .quality-evidence-token-grid, .quality-feature-evidence-grid, .quality-provenance-grid, .latest-artifact-grid, .handoff-action-grid { grid-template-columns: 1fr; } .quality-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { .quality-results-shell .quality-summary-grid, .quality-results-shell .quality-handoff-grid, .export-center-shell .quality-summary-grid, .handoff-readiness-grid, .quality-score-row, .quality-metric-grid { grid-template-columns: 1fr; } .quality-drilldown-surface .panel-title-row { grid-template-columns: 1fr; } } .feature-extract-surface { display: grid; gap: 0.7rem; min-width: 0; margin-bottom: 0.85rem; border: 1px solid rgba(15, 118, 110, 0.24); border-left: 4px solid var(--accent); border-radius: var(--gi-radius-sm); padding: 0.72rem; background: linear-gradient(180deg, var(--gi-surface), var(--gi-brand-50)); } .feature-extract-surface .panel-title-row { margin-bottom: 0; } .feature-extract-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.5rem; min-width: 0; } .feature-extract-grid > div { min-width: 0; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.55rem 0.62rem; background: var(--gi-surface); } .feature-extract-grid span { display: block; color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0; text-transform: none; } .feature-extract-grid strong { display: block; margin-top: 0.2rem; overflow-wrap: anywhere; font-size: 0.86rem; line-height: 1.25; } .feature-extract-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .feature-extract-actions button { width: fit-content; max-width: 100%; margin-top: 0; } .feature-property-table { max-height: 18rem; margin-top: 0; } .feature-property-table table { min-width: 32rem; } .feature-extract-empty { display: grid; gap: 0.28rem; border: 1px dashed var(--line-strong); border-radius: var(--gi-radius-sm); padding: 0.68rem 0.72rem; background: var(--gi-surface); } .feature-extract-empty p { margin: 0; color: var(--muted); font-size: 0.84rem; line-height: 1.35; } .lab-block + .lab-block { margin-top: 0.85rem; } .ai-lab-shell { display: grid; gap: 0.85rem; min-width: 0; align-content: start; } .ai-lab-shell > .lab-block { border: 0; padding: 0; background: transparent; box-shadow: none; } .workspace-grid-ai .workspace-panel { min-width: 0; } .ai-lab-model-surface, .ai-lab-run-surface, .ai-lab-results-surface, .ai-lab-qa-surface { display: grid; gap: 0.68rem; min-width: 0; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.78rem; background: linear-gradient(180deg, var(--gi-surface), var(--gi-brand-50)); box-shadow: 0 1px 0 rgba(19, 32, 24, 0.03); } .ai-lab-results-surface { background: var(--gi-surface); } .calibration-comparison-surface { border-color: var(--gi-surface-sunken); background: var(--gi-brand-50); } .guided-calibration-surface { border-color: var(--gi-surface-sunken); background: linear-gradient(180deg, var(--gi-surface), var(--gi-brand-50)); } .calibration-progress-panel { display: grid; gap: 0.55rem; min-width: 0; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.68rem; background: var(--gi-surface); } .table-action { min-height: 2rem; padding: 0.35rem 0.6rem; white-space: nowrap; } .panel-action-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; } .calibration-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.62rem; min-width: 0; } .calibration-summary-card { display: grid; gap: 0.18rem; min-width: 0; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.64rem; background: var(--gi-surface); } .calibration-summary-card-ready { border-color: var(--gi-brand-50); background: var(--gi-brand-50); } .calibration-summary-card span { color: var(--muted); font-size: 0.76rem; font-weight: 700; text-transform: none; } .calibration-summary-card strong { color: var(--ink); font-size: 1.25rem; } .calibration-summary-card p, .table-subtle { margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.35; } .table-subtle { display: block; overflow-wrap: anywhere; } .ai-lab-section-header { display: flex; min-width: 0; align-items: start; justify-content: space-between; gap: 0.65rem; } .ai-lab-section-header h3, .ai-lab-run-surface h3, .ai-lab-qa-surface h3 { margin: 0; } .ai-lab-section-header p, .ai-lab-results-surface .muted { margin: 0.16rem 0 0; color: var(--muted); font-size: 0.84rem; line-height: 1.35; } .ai-lab-state-stack { display: grid; gap: 0.5rem; min-width: 0; } .lab-readiness-panel { display: grid; gap: 0.6rem; min-width: 0; border-left: 4px solid var(--gi-line); border-radius: var(--gi-radius-sm); padding: 0.64rem 0.68rem; background: var(--gi-brand-50); } .lab-readiness-panel-ready { border-left-color: #2f7d56; background: var(--gi-brand-50); } .lab-readiness-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.5rem; min-width: 0; } .lab-readiness-item { display: grid; gap: 0.18rem; min-width: 0; border: 1px solid var(--gi-surface-sunken); border-radius: var(--gi-radius-sm); padding: 0.52rem 0.58rem; background: var(--gi-surface); } .lab-readiness-item-ready { border-color: var(--gi-brand-50); background: var(--gi-brand-50); } .lab-readiness-item span { color: var(--muted); font-size: 0.72rem; font-weight: 600; text-transform: none; } .lab-readiness-item strong { min-width: 0; color: var(--text); font-size: 0.88rem; line-height: 1.28; overflow-wrap: anywhere; } .model-asset-guidance { display: grid; gap: 0.22rem; border: 1px solid var(--gi-surface-sunken); border-left: 4px solid #315a92; border-radius: var(--gi-radius-sm); padding: 0.58rem 0.68rem; background: var(--gi-info-soft); } .model-asset-guidance strong { color: var(--text); font-size: 0.9rem; } .model-asset-guidance p, .field-guidance { margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.35; } .operator-profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.62rem; } .operator-profile-card { display: grid; gap: 0.48rem; min-width: 0; border: 1px solid var(--gi-surface-sunken); border-radius: var(--gi-radius-sm); padding: 0.72rem; background: var(--gi-surface); } .operator-profile-card-selected { border-color: var(--accent); background: var(--gi-brand-50); box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1); } .operator-profile-card-header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 0.6rem; } .operator-profile-card-header strong { min-width: 0; color: var(--text); font-size: 0.94rem; line-height: 1.25; } .operator-profile-card p { margin: 0; color: var(--muted); font-size: 0.8rem; line-height: 1.35; } .operator-profile-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.4rem, 1fr)); gap: 0.36rem; } .operator-profile-metrics span { border: 1px solid var(--gi-surface-sunken); border-radius: var(--gi-radius-sm); padding: 0.34rem 0.42rem; background: var(--gi-surface); color: var(--text); font-size: 0.76rem; font-weight: 600; overflow-wrap: anywhere; } .field-guidance { display: block; margin-top: 0.24rem; } .lab-action-guardrail { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 0.6rem; border: 1px solid var(--gi-surface-sunken); border-radius: var(--gi-radius-sm); padding: 0.52rem 0.62rem; background: var(--gi-surface); } .lab-action-guardrail-ready { border-color: var(--gi-brand-50); background: var(--gi-brand-50); } .lab-action-guardrail span { flex: 0 0 auto; color: var(--muted); font-size: 0.72rem; font-weight: 600; text-transform: none; } .lab-action-guardrail strong { min-width: 0; color: var(--text); font-size: 0.88rem; line-height: 1.28; text-align: right; overflow-wrap: anywhere; } .ai-lab-shell .model-list { grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: 0.55rem; } .ai-lab-shell .model-card { align-content: start; padding: 0.68rem; } .ai-lab-shell .lab-form-grid { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.55rem; } .ai-lab-summary-grid { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); } .ai-lab-shell .result-summary-card { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); } .ai-lab-run-surface label, .ai-lab-results-surface label, .ai-lab-qa-surface label, .lab-block label { min-width: 0; } .ai-lab-run-surface input, .ai-lab-run-surface select, .ai-lab-results-surface input, .ai-lab-results-surface select, .ai-lab-qa-surface input, .ai-lab-qa-surface select, .lab-block input, .lab-block select { width: 100%; min-width: 0; } .ai-lab-run-surface .primary-action, .ai-lab-results-surface .primary-action, .ai-lab-qa-surface .primary-action, .lab-block .primary-action { width: fit-content; max-width: 100%; } .lab-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; } .workspace-grid-ai .lab-form-grid { grid-template-columns: 1fr; } .workbench-inspector-panel { display: grid; gap: 0.68rem; max-width: 100%; min-width: 0; overflow-x: clip; } .inspector-header { display: grid; gap: 0.2rem; max-width: 100%; min-width: 0; overflow-x: clip; } .inspector-header h2 { margin-bottom: 0; } .inspector-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; position: sticky; top: 3.4rem; z-index: 3; border-bottom: 1px solid var(--line); padding-bottom: 0.65rem; background: var(--gi-brand-50); } .inspector-tab { min-width: 0; min-height: 2.2rem; padding: 0.38rem 0.42rem; background: var(--gi-surface); box-shadow: none; font-size: 0.78rem; line-height: 1.2; overflow-wrap: anywhere; } .inspector-tab-active { border-color: rgba(15, 118, 110, 0.46); background: var(--accent-soft); color: var(--accent-strong); } .inspector-tab-panel { display: grid; gap: 0.75rem; } .inspector-action-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; position: sticky; top: 6.3rem; z-index: 2; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.45rem; background: var(--gi-surface); } .inspector-action-bar button { min-height: 2.15rem; padding: 0.34rem 0.42rem; font-size: 0.78rem; } .inspector-card { display: grid; gap: 0.48rem; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.7rem; background: var(--gi-surface); } .inspector-card h3 { margin-top: 0; } .inspector-field { display: grid; gap: 0.16rem; min-width: 0; border-top: 1px solid var(--line); padding-top: 0.5rem; } .inspector-field:first-of-type { border-top: 0; padding-top: 0; } .inspector-field span { color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0; text-transform: none; } .inspector-field strong { min-width: 0; overflow: hidden; font-size: 0.88rem; line-height: 1.28; overflow-wrap: anywhere; text-overflow: ellipsis; } .inspector-card .button-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.42rem; } .inspector-card .button-row button { width: 100%; min-width: 0; min-height: 2.2rem; margin-top: 0; } .workbench-inspector-panel .dataset-detail-panel { border: 0; padding: 0; background: transparent; box-shadow: none; } .dataset-detail-panel > div, .dataset-detail-panel ul { display: grid; gap: 0.55rem; } .dataset-detail-panel p, .dataset-detail-panel li { min-width: 0; overflow-wrap: anywhere; } .dataset-detail-panel .job-result { max-height: 18rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; } .dataset-tool-panel { display: grid; min-width: 0; gap: 0.62rem; } .raster-readiness-surface, .raster-guardrail-surface { display: grid; min-width: 0; gap: 0.65rem; border: 1px solid rgba(31, 92, 71, 0.18); border-radius: var(--gi-radius-sm); padding: 0.72rem; background: linear-gradient(180deg, var(--gi-brand-50) 0%, var(--gi-surface) 100%); } .raster-readiness-surface .panel-title-row, .raster-guardrail-surface .panel-title-row { align-items: start; gap: 0.55rem; margin-bottom: 0; } .raster-readiness-surface h3, .raster-guardrail-surface h3 { margin: 0; font-size: 0.95rem; line-height: 1.2; } .raster-readiness-surface p, .raster-guardrail-surface p { margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.38; overflow-wrap: anywhere; } .raster-readiness-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.5rem; } .raster-readiness-item, .raster-manifest-handoff { display: grid; min-width: 0; gap: 0.22rem; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.58rem; background: var(--gi-surface); } .raster-manifest-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.42rem; min-width: 0; margin: 0.2rem 0 0.35rem; } .raster-manifest-details div { min-width: 0; border: 1px solid var(--gi-surface-sunken); border-radius: var(--gi-radius-sm); padding: 0.42rem 0.48rem; background: var(--gi-brand-50); } .raster-manifest-details dt { color: var(--muted); font-size: 0.7rem; font-weight: 700; text-transform: none; } .raster-manifest-details dd { min-width: 0; margin: 0.12rem 0 0; color: var(--text); font-size: 0.86rem; font-weight: 600; overflow-wrap: anywhere; } .linked-manifest-card { display: grid; gap: 0.22rem; min-width: 0; border: 1px solid rgba(47, 125, 86, 0.24); border-radius: var(--gi-radius-sm); padding: 0.6rem 0.65rem; background: var(--gi-brand-50); } .linked-manifest-card strong { color: var(--text); font-size: 0.88rem; } .linked-manifest-card p, .linked-manifest-card span { min-width: 0; margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.35; overflow-wrap: anywhere; } .guided-raster-input { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(14rem, 0.9fr) auto; gap: 0.75rem; align-items: end; border: 1px solid var(--gi-surface-sunken); border-radius: var(--gi-radius-sm); padding: 0.75rem; background: var(--gi-brand-50); } .guided-raster-input > div, .file-picker-field { display: grid; min-width: 0; gap: 0.25rem; } .guided-raster-input strong, .file-picker-field span { color: var(--text); font-size: 0.86rem; } .guided-raster-input p { margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.4; } .guided-raster-input input[type="file"] { min-height: 2.45rem; padding: 0.42rem; background: var(--gi-surface); font-size: 0.78rem; } .guided-detection-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; } .guided-detection-step { display: flex; min-width: 0; align-items: center; gap: 0.45rem; border: 1px solid var(--gi-surface-sunken); border-radius: var(--gi-radius-sm); padding: 0.52rem 0.6rem; background: var(--gi-surface); color: var(--muted); } .guided-detection-step span { display: grid; width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; place-items: center; border-radius: 50%; background: var(--gi-surface-soft); font-size: 0.72rem; font-weight: 700; } .guided-detection-step strong { min-width: 0; font-size: 0.78rem; line-height: 1.25; overflow-wrap: anywhere; } .guided-detection-step-active { border-color: var(--gi-brand-50); background: var(--gi-brand-50); color: var(--accent-strong); } .guided-detection-step-complete { border-color: var(--gi-brand-50); background: var(--gi-brand-50); color: var(--gi-brand-600); } .guided-detection-step-active span, .guided-detection-step-complete span { background: var(--gi-brand-50); color: var(--gi-brand-600); } .guided-detection-action { min-height: 2.75rem; padding-inline: 1.15rem; } .technical-manifest-surface { margin-top: 0.1rem; } @media (max-width: 900px) { .guided-raster-input { grid-template-columns: 1fr; align-items: stretch; } .guided-detection-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .guided-detection-progress { grid-template-columns: 1fr; } } .raster-readiness-item span, .raster-manifest-handoff span { color: var(--muted); font-size: 0.74rem; font-weight: 700; line-height: 1.2; text-transform: none; } .raster-readiness-item strong, .raster-readiness-state { color: var(--text); font-size: 0.86rem; font-weight: 700; line-height: 1.25; } .raster-guardrail-list { display: grid; gap: 0.4rem; margin: 0; padding-left: 1.05rem; color: var(--text); font-size: 0.84rem; line-height: 1.38; overflow-wrap: anywhere; } .dataset-tool-group { display: grid; min-width: 0; gap: 0.5rem; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.62rem; background: var(--gi-surface); } .dataset-tool-heading { margin: 0; font-size: 0.92rem; line-height: 1.25; } .dataset-tool-helper { margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.38; overflow-wrap: anywhere; } .dataset-tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.52rem; } .dataset-tool-group label { min-width: 0; } .dataset-tool-field { display: grid; gap: 0.22rem; min-width: 0; } .dataset-tool-label { color: var(--text); font-size: 0.78rem; font-weight: 700; line-height: 1.25; } .dataset-tool-group input, .dataset-tool-group select { width: 100%; min-width: 0; } .dataset-tool-error { margin: 0; border: 1px solid rgba(153, 27, 27, 0.24); border-radius: var(--gi-radius-sm); padding: 0.52rem 0.62rem; background: rgba(153, 27, 27, 0.07); color: var(--danger); font-size: 0.82rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; } .dataset-tool-action-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .dataset-tool-group button { width: fit-content; max-width: 100%; min-width: 0; } @media (max-width: 1360px) { .workbench-layout { grid-template-columns: 12rem minmax(0, 1fr); height: auto; min-height: 0; } .workbench-main { overflow: visible; } .workbench-inspector { grid-column: 1 / -1; border-top: 1px solid var(--line); border-left: 0; } .workbench-inspector-panel { max-width: none; } .inspector-tab-panel { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } .workbench-inspector-panel .dataset-detail-panel, .inspector-action-bar { grid-column: 1 / -1; } .inspector-header h2, .inspector-tabs, .inspector-action-bar { position: static; } } @media (max-width: 980px) { .workbench-topbar, .workbench-layout, .workspace-grid-data, .workspace-grid-analysis, .workspace-grid-ai, .workspace-grid-exports, .overview-actions { grid-template-columns: 1fr; } .workbench-layout { height: auto; } .workbench-sidebar { position: sticky; top: 5.8rem; z-index: 10; max-width: 100vw; border-right: 0; border-bottom: 1px solid var(--line); } .workbench-sidebar nav, .quick-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .context-bar { display: grid; grid-template-columns: repeat(4, minmax(6.75rem, 1fr)); max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 0.1rem; } .context-bar > div { min-height: 2.62rem; padding: 0.36rem 0.48rem; scroll-snap-align: start; } .context-bar span, .context-bar strong { white-space: nowrap; } .context-bar strong { overflow: hidden; text-overflow: ellipsis; } .nav-item { min-height: 3.45rem; } .workspace-heading, .workspace-command-bar, .status-strip-header { display: block; } .workspace-heading p:last-child, .workspace-command-bar > span, .status-next-action { margin-top: 0.45rem; text-align: left; } .workbench-main .map-container { height: 28rem; } .dataset-upload-form, .map-toolbar, .layer-provenance-rail, .lab-form-grid, .quality-summary-grid, .handoff-readiness-grid, .quality-score-row, .export-action-grid, .handoff-action-grid, .quality-history-controls, .export-history-controls, .inspector-action-bar, .list-limit-banner { grid-template-columns: 1fr; } .dataset-metrics { grid-template-columns: 1fr; } } @media (max-width: 620px) { .workbench-topbar, .workbench-main, .workbench-inspector, .workbench-sidebar { padding: 0.75rem; } .workbench-inspector { overflow-x: hidden; } .quick-action-grid, .workspace-nav-cluster { grid-template-columns: 1fr; } .workbench-topbar { gap: 0.55rem; } .brand-block h1 { font-size: 1.05rem; } .brand-block .eyebrow { font-size: 0.62rem; } .inspector-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .inspector-card, .dataset-tool-group { padding: 0.58rem; } .inspector-action-bar, .inspector-card .button-row { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); } .dataset-tool-group button { width: 100%; } .workbench-sidebar nav { display: flex; gap: 0.5rem; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 0.2rem; } .workbench-sidebar .nav-item { min-width: 9.5rem; min-height: 3.2rem; scroll-snap-align: start; } .nav-item small { font-size: 0.72rem; line-height: 1.18; } .workspace-nav-cluster { display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 0.1rem; } .command-chip { min-width: 6.75rem; scroll-snap-align: start; } .status-strip-grid { grid-template-columns: 1fr; } .dataset-upload-form { gap: 0.55rem; padding: 0.68rem; } .dataset-action-grid, .map-empty-action-grid { grid-template-columns: repeat(auto-fit, minmax(7.25rem, 1fr)); } .result-summary-card { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); } .workspace-grid-ai .model-list, .workspace-grid-ai .lab-block { gap: 0.55rem; } .workspace-grid-ai .model-card, .workspace-grid-ai .lab-block, .workspace-grid-ai .result-summary-card { padding: 0.68rem; } .workspace-grid-ai .table-scroll table { min-width: 36rem; } .export-action-grid, .handoff-action-grid, .system-provider-grid { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); } .handoff-action-card, .system-provider-card { padding: 0.68rem; } .system-provider-header, .export-card-header { grid-template-columns: minmax(0, 1fr); } .dataset-action-button, .map-empty-action-grid button { min-height: 3rem; padding: 0.48rem 0.56rem; } .map-toolbar { gap: 0.55rem; } .map-workspace-shell .map-context-summary { grid-template-columns: repeat(auto-fit, minmax(8.25rem, 1fr)); gap: 0.5rem; } .map-workspace-shell .map-toolbar { grid-template-columns: repeat(auto-fit, minmax(8.25rem, 1fr)); gap: 0.5rem; } .map-workspace-shell .layer-provenance-rail { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.5rem; } .map-control-surface, .map-frame-surface, .map-inspection-surface { padding: 0.58rem; } .quality-summary-surface, .quality-evidence-surface, .quality-control-surface, .quality-history-surface, .change-detection-input-surface, .change-detection-result-surface, .change-detection-warning-surface { padding: 0.58rem; } .quality-results-shell .quality-summary-grid, .quality-results-shell .quality-history-controls, .change-detection-shell .form-grid { grid-template-columns: repeat(auto-fit, minmax(8.25rem, 1fr)); gap: 0.5rem; } .quality-results-shell .quality-handoff-grid, .quality-results-shell .quality-score-row, .quality-results-shell .quality-metric-grid, .quality-results-shell .metric-list, .change-detection-shell .summary-grid { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.5rem; } .layer-control-card { padding: 0.52rem 0.58rem; } .workbench-main .map-container { height: 22rem; } } /* Sprint 113 calm workbench UX pass: reduce repeated navigation and visual density without changing workflows. */ body { background: var(--bg); } button { background: var(--gi-surface); box-shadow: none; } button:hover:not(:disabled) { box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.08); } section { border-color: var(--line); background: var(--gi-surface); box-shadow: none; } .workbench-shell { background: var(--bg); } .workbench-topbar { grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); min-height: 3.65rem; padding: 0.45rem 0.9rem; background: color-mix(in srgb, var(--gi-surface) 96%, transparent); box-shadow: 0 1px 0 rgba(19, 32, 24, 0.04); } .brand-block h1 { font-size: 1.05rem; } .context-bar { display: flex; justify-content: flex-end; gap: 0.45rem; min-width: 0; } .context-bar > div { min-height: 2.38rem; min-width: 0; max-width: 13rem; border-color: transparent; border-radius: var(--gi-radius-sm); padding: 0.28rem 0.52rem; background: var(--gi-brand-50); } .context-bar span { font-size: 0.58rem; letter-spacing: 0.06em; } .context-bar strong { overflow: hidden; margin-top: 0.1rem; font-size: 0.75rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .workbench-layout { grid-template-columns: 10.25rem minmax(0, 1fr) 18.5rem; height: calc(100vh - 3.65rem); } .workbench-sidebar, .workbench-inspector { background: var(--gi-surface); } .workbench-sidebar { padding: 0.58rem; } .workbench-sidebar nav { gap: 0.28rem; } .nav-item { min-height: 2.55rem; border-radius: var(--gi-radius-sm); padding: 0.42rem 0.52rem; } .nav-item span { font-size: 0.82rem; } .nav-item small { display: none; } .nav-item-active { border-color: rgba(15, 118, 110, 0.22); box-shadow: inset 3px 0 0 var(--accent); } .nav-item-active small { display: block; font-size: 0.68rem; line-height: 1.2; } .workbench-main { padding: 0.82rem 0.95rem 1.05rem; } .workbench-inspector { padding: 0.7rem; } .workspace-heading { margin-bottom: 0.65rem; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0.2rem 0 0.65rem; background: transparent; box-shadow: none; } .workspace-heading .eyebrow { margin-bottom: 0.12rem; } .workspace-heading h2 { font-size: 1.18rem; } .workspace-heading p:last-child { max-width: 25rem; font-size: 0.84rem; } .workspace-command-bar { display: none; } .workspace-stack, .workspace-grid { gap: 0.75rem; } .workspace-panel, .workflow-guidance-panel, .overview-actions, .workbench-status-strip, .quality-summary-surface, .quality-evidence-surface, .quality-control-surface, .quality-history-surface, .change-detection-input-surface, .change-detection-result-surface, .change-detection-warning-surface, .map-control-surface, .map-frame-surface, .map-inspection-surface, .inspector-card, .lab-block, .result-summary-card, .handoff-action-card, .system-provider-card { border-radius: var(--gi-radius-sm); box-shadow: none; } .workbench-status-strip { padding: 0.82rem; } .status-strip-header { gap: 0.65rem; margin-bottom: 0.7rem; } .status-strip-header h2, .workflow-guidance-panel h2, .overview-actions h2, .workspace-panel h2 { font-size: 1rem; } .status-next-action { font-size: 0.86rem; } .status-strip-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.45rem; } .status-tile { min-height: auto; padding: 0.5rem; border-radius: var(--gi-radius-sm); } .status-tile-topline { gap: 0.28rem; } .status-tile strong { margin-top: 0.25rem; font-size: 0.84rem; line-height: 1.2; } .status-tile > strong { display: -webkit-box; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .status-tile p { margin-top: 0.18rem; font-size: 0.72rem; line-height: 1.25; } .status-pill, .workflow-step-status, .status-badge { border-radius: var(--gi-radius-pill); padding: 0.16rem 0.38rem; font-size: 0.62rem; } .workflow-guidance-panel { border-left: 0; background: var(--gi-surface); } .workflow-guidance-steps { gap: 0.45rem; } .workflow-guidance-step { min-height: 4.35rem; padding: 0.5rem 0.55rem; border-color: var(--line); } .workflow-guidance-step small { font-size: 0.7rem; } .inspector-tabs { gap: 0.25rem; } .inspector-tab { min-height: 2rem; padding: 0.34rem 0.45rem; font-size: 0.76rem; } .inspector-card { padding: 0.68rem; } .inspector-field { gap: 0.35rem; } @media (max-width: 1360px) { .workbench-layout { grid-template-columns: 9.5rem minmax(0, 1fr); height: auto; } .workbench-inspector { max-height: none; } } @media (max-width: 980px) { .workbench-topbar { position: sticky; grid-template-columns: 1fr; gap: 0.45rem; min-height: auto; } .context-bar { justify-content: flex-start; overflow-x: auto; padding-bottom: 0.15rem; } .context-bar > div { min-width: 9.25rem; } .workbench-sidebar { top: 5.3rem; } .workspace-command-bar { display: none; } .status-strip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 620px) { .workbench-topbar, .workbench-main, .workbench-inspector, .workbench-sidebar { padding: 0.62rem; } .context-bar > div { min-width: 8.5rem; } .workbench-sidebar .nav-item { min-width: 7.75rem; min-height: 2.75rem; } .nav-item-active small { display: none; } .workspace-heading { display: block; } .workspace-heading p:last-child { margin-top: 0.25rem; text-align: left; } .status-strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Sprint 114 data/map usability pass: make the core select-and-extract flow calmer and map-first. */ .workspace-grid-data { grid-template-columns: minmax(18rem, 0.78fr) minmax(24rem, 1.22fr); gap: 0.85rem; } .workspace-grid-data > section { align-self: start; } .workspace-grid-data .workspace-panel { padding: 0.85rem; } .data-selection-summary { border-left-width: 3px; padding: 0.55rem 0.65rem; background: var(--gi-surface); } .data-selection-summary strong { font-size: 0.9rem; } .data-panel-form-block, .data-panel-list-block { border-radius: var(--gi-radius-sm); padding: 0.62rem; background: var(--gi-surface); } .dataset-upload-form { grid-template-columns: repeat(3, minmax(8rem, 1fr)) minmax(11rem, 1.15fr) auto; gap: 0.55rem; } .dataset-upload-form label { margin-top: 0; } .dataset-upload-form button { min-height: 2.35rem; align-self: end; white-space: nowrap; } .dataset-role-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.42rem; margin-top: 0.6rem; } .dataset-role-summary { min-height: 3.1rem; border-radius: var(--gi-radius-sm); padding: 0.48rem 0.55rem; } .dataset-role-summary strong { font-size: 1rem; } .dataset-role-summary span, .dataset-role-summary small { font-size: 0.66rem; } .dataset-list { gap: 0.52rem; } .dataset-card { border-radius: var(--gi-radius-sm); padding: 0.65rem; background: var(--gi-surface); } .dataset-card-active { background: var(--gi-brand-50); box-shadow: inset 3px 0 0 var(--accent); } .dataset-card-header { gap: 0.5rem; } .dataset-card-kicker { margin-bottom: 0.18rem; font-size: 0.68rem; } .dataset-role-badge { min-height: 1.24rem; padding: 0.12rem 0.42rem; font-size: 0.64rem; } .dataset-card-title { font-size: 0.95rem; } .dataset-card .entity-meta { gap: 0.22rem 0.52rem; font-size: 0.74rem; } .dataset-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; margin-top: 0.5rem; border: 0; padding: 0; background: transparent; font-size: 0.74rem; } .dataset-metrics span { min-width: 0; overflow: hidden; border-radius: var(--gi-radius-xs); padding: 0.32rem 0.42rem; background: var(--gi-info-soft); text-overflow: ellipsis; white-space: nowrap; } .dataset-action-hint { margin-top: 0.48rem; font-size: 0.76rem; } .dataset-action-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.38rem; margin-top: 0.52rem; } .dataset-action-button { min-height: 2.45rem; padding: 0.38rem 0.48rem; } .dataset-action-button span { font-size: 0.78rem; } .dataset-action-button small { display: none; } .map-workspace-shell { gap: 0.62rem; } .map-workspace-shell .panel-title-row { margin-bottom: 0; } .map-context-summary { order: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; } .map-context-summary > div { border-left-width: 3px; border-radius: var(--gi-radius-sm); padding: 0.5rem 0.58rem; background: var(--gi-surface); } .map-context-summary span { font-size: 0.6rem; } .map-context-summary strong { margin-top: 0.12rem; font-size: 0.82rem; } .map-context-summary small { margin-top: 0.12rem; font-size: 0.7rem; } .map-frame-surface { order: 2; padding: 0.35rem; background: var(--gi-surface-soft); } .workbench-main .map-container, .map-frame-surface .map-container { min-height: 34rem; } .map-control-surface { order: 3; gap: 0.5rem; padding: 0.58rem; } .map-workspace-shell .map-toolbar { grid-template-columns: minmax(10rem, 0.9fr) minmax(13rem, 1.25fr) minmax(10rem, 1fr) repeat(2, minmax(8rem, 0.85fr)) minmax(11rem, 1fr); gap: 0.5rem; } .map-workspace-shell .map-toolbar label { margin-top: 0; } .map-layer-mode { display: grid; align-content: start; gap: 0.34rem; min-width: 0; } .map-layer-mode > span { color: var(--muted); font-size: 0.7rem; font-weight: 600; } .map-layer-mode > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--gi-radius-sm); background: var(--panel-soft); } .map-layer-mode button { min-width: 0; min-height: 2.2rem; border: 0; border-radius: 0; padding: 0.36rem 0.42rem; background: transparent; color: var(--muted); font-size: 0.68rem; font-weight: 600; line-height: 1.15; } .map-layer-mode button + button { border-left: 1px solid var(--line-strong); } .map-layer-mode button[aria-pressed='true'] { background: var(--accent-strong); color: #ffffff; } .map-layer-mode button:disabled { cursor: not-allowed; opacity: 0.45; } .layer-control-card, .map-status { border-radius: var(--gi-radius-sm); padding: 0.46rem 0.55rem; } .map-status strong { font-size: 0.82rem; } .map-status span { font-size: 0.72rem; } .layer-provenance-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; } .layer-provenance-rail > div { border-radius: var(--gi-radius-sm); padding: 0.46rem 0.55rem; } .layer-provenance-rail span { font-size: 0.6rem; } .layer-provenance-rail strong { min-height: auto; font-size: 0.74rem; -webkit-line-clamp: 1; } .qa-evidence-map-status { order: 4; border-left-width: 3px; border-radius: var(--gi-radius-sm); padding: 0.58rem; } .map-empty-state { order: 5; } .map-inspection-surface { order: 6; display: grid; grid-template-columns: minmax(18rem, 0.85fr) minmax(18rem, 1fr) minmax(18rem, 1fr); gap: 0.65rem; padding: 0.62rem; } .bbox-select-surface, .gis-test-run-surface, .feature-extract-surface, .map-inspection-surface .feature-inspector { margin: 0; border-radius: var(--gi-radius-sm); padding: 0.62rem; } .gis-test-run-surface { display: grid; gap: 0.58rem; border: 1px solid rgba(15, 118, 110, 0.24); border-left: 3px solid var(--accent); background: var(--gi-brand-50); } .gis-test-run-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.42rem; } .gis-test-run-grid > div { min-width: 0; border: 1px solid var(--line); border-radius: var(--gi-radius-xs); padding: 0.42rem 0.48rem; background: var(--gi-surface); } .gis-test-run-grid span { display: block; color: var(--muted); font-size: 0.6rem; font-weight: 700; letter-spacing: 0; text-transform: none; } .gis-test-run-grid strong { display: block; overflow: hidden; margin-top: 0.16rem; font-size: 0.8rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .basemap-policy-notice { display: flex; flex-wrap: wrap; gap: 0.28rem 0.55rem; align-items: center; border: 1px solid var(--gi-warn-soft); border-radius: var(--gi-radius-sm); padding: 0.46rem 0.58rem; background: var(--gi-warn-soft); color: var(--gi-warn); font-size: 0.76rem; } .basemap-policy-notice strong { font-size: 0.72rem; letter-spacing: 0; text-transform: none; } .basemap-policy-notice span { color: var(--gi-warn); } .guided-gis-flow { display: grid; gap: 0.5rem; border-top: 1px solid var(--line); padding-top: 0.54rem; } .guided-gis-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.38rem; } .guided-gis-steps > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.08rem 0.38rem; align-items: center; min-width: 0; border: 1px solid var(--line); border-radius: var(--gi-radius-sm); padding: 0.4rem 0.44rem; background: var(--gi-surface); } .guided-gis-steps > div.complete { border-color: rgba(15, 118, 110, 0.26); background: var(--gi-brand-50); } .guided-gis-steps span { display: inline-grid; place-items: center; grid-row: span 2; width: 1.35rem; height: 1.35rem; border-radius: var(--gi-radius-pill); background: var(--panel-soft); color: var(--muted); font-size: 0.68rem; font-weight: 700; } .guided-gis-steps .complete span { background: var(--accent); color: #ffffff; } .guided-gis-steps strong, .guided-gis-steps small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .guided-gis-steps strong { font-size: 0.76rem; } .guided-gis-steps small { color: var(--muted); font-size: 0.68rem; } .guided-gis-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.38rem; align-items: end; } .guided-gis-actions label { margin-top: 0; } .guided-gis-actions button { min-height: 2.15rem; padding: 0.38rem 0.55rem; font-size: 0.78rem; } .guided-gis-full-run { grid-column: span 1; } .guided-gis-run-mode { grid-column: span 2; min-width: 0; } .guided-gis-run-mode select { min-height: 2.1rem; } .guided-gis-batch-status { display: grid; gap: 0.12rem; min-width: 0; border: 1px solid rgba(15, 118, 110, 0.22); border-radius: var(--gi-radius-sm); padding: 0.44rem 0.52rem; background: var(--gi-brand-50); } .guided-gis-batch-status strong { overflow: hidden; color: var(--gi-brand-600); font-size: 0.68rem; font-weight: 700; letter-spacing: 0; text-overflow: ellipsis; text-transform: none; white-space: nowrap; } .guided-gis-batch-status span { overflow: hidden; color: var(--muted); font-size: 0.76rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .bbox-select-surface { border-left-width: 3px; } .map-inspection-surface .feature-inspector { border: 1px solid var(--line); background: var(--gi-surface); } .bbox-select-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bbox-select-grid label { margin-top: 0; } .bbox-select-grid input { min-height: 2.1rem; } .bbox-select-actions, .feature-extract-actions { gap: 0.38rem; } .bbox-select-actions button, .feature-extract-actions button { min-height: 2.15rem; padding: 0.38rem 0.55rem; font-size: 0.78rem; } .feature-extract-grid { gap: 0.42rem; } .feature-extract-grid > div { border-radius: var(--gi-radius-xs); padding: 0.42rem 0.48rem; } .feature-extract-grid span { font-size: 0.62rem; } .feature-extract-grid strong { font-size: 0.82rem; } /* Sprint 161 widescreen workbench support: use extra horizontal space without changing workflows. */ @media (min-width: 1800px) { .workbench-topbar { grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr); padding-inline: 1.35rem; } .context-bar > div { max-width: 16rem; } .workbench-layout { grid-template-columns: 14rem minmax(0, 1fr) 24rem; } .workbench-main { padding: 1.1rem 1.35rem 1.35rem; } .workbench-inspector { padding: 1rem; } .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)); } .workspace-grid-data > section:nth-child(3) { grid-column: auto; } .workbench-main .map-container, .map-frame-surface .map-container { height: calc(100vh - 18rem); min-height: 36rem; } .map-context-summary, .dataset-role-summary-grid, .layer-provenance-rail, .guided-gis-steps, .handoff-readiness-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .map-inspection-surface { grid-template-columns: minmax(22rem, 0.8fr) minmax(22rem, 1fr) minmax(22rem, 1fr); } } @media (min-width: 2200px) { .workbench-layout { grid-template-columns: 15rem minmax(0, 1fr) 26rem; } .workbench-main { padding: 1.2rem 1.65rem 1.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)); } .workbench-main .map-container, .map-frame-surface .map-container { height: calc(100vh - 15.5rem); min-height: 42rem; } .map-workspace-shell .map-toolbar { grid-template-columns: minmax(16rem, 1.35fr) minmax(12rem, 1fr) repeat(2, minmax(9rem, 0.85fr)) minmax(12rem, 1fr); } } /* Map-first geographic explorer: one calm path from theme to selection to evidence. */ .geo-explorer { display: grid; gap: 0.75rem; min-width: 0; } .geo-explorer-header { display: flex; gap: 1rem; align-items: end; justify-content: space-between; min-width: 0; border-bottom: 1px solid var(--gi-surface-sunken); padding: 0 0 0.75rem; } .geo-explorer-header h2 { margin: 0.12rem 0 0; color: var(--gi-ink-950); font-size: clamp(1.35rem, 2vw, 1.85rem); letter-spacing: 0; line-height: 1.12; } .geo-explorer-header p:last-child { max-width: 48rem; margin: 0.32rem 0 0; color: var(--gi-ink-600); font-size: 0.88rem; } .geo-explorer-advanced { flex: 0 0 auto; } .geo-analysis-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 0 0 auto; border: 1px solid var(--gi-surface-sunken); border-radius: var(--gi-radius-sm); padding: 0.18rem; background: var(--gi-surface); } .geo-analysis-mode button { min-height: 2.15rem; border: 0; border-radius: var(--gi-radius-xs); padding: 0.38rem 0.68rem; background: transparent; color: var(--gi-ink-600); font-size: 0.7rem; font-weight: 700; } .geo-analysis-mode button.active { background: var(--gi-surface); color: var(--gi-brand-600); box-shadow: var(--gi-shadow-xs); } .geo-explorer-layout { display: grid; grid-template-columns: minmax(15.5rem, 17rem) minmax(30rem, 1fr) minmax(18rem, 20rem); gap: 0.72rem; align-items: stretch; height: clamp(34rem, calc(100dvh - 10rem), 58rem); min-width: 0; min-height: 34rem; } .geo-theme-panel, .geo-results-panel, .geo-map-stage { min-width: 0; border: 1px solid var(--gi-surface-sunken); border-radius: var(--gi-radius-sm); background: var(--gi-surface); box-shadow: var(--gi-shadow-xs); } .geo-theme-panel, .geo-results-panel { display: flex; flex-direction: column; gap: 0.7rem; overflow: hidden; padding: 0.78rem; } /* Het icoon is optioneel. Een vast tweekolommenraster dwong een kop zonder icoon in de 1.65rem-icoonkolom, waardoor de tekst per letter afbrak. Flex laat de tekst altijd de resterende breedte nemen, met of zonder icoon. */ .geo-panel-heading { display: flex; gap: 0.55rem; align-items: flex-start; } .geo-panel-heading > * { min-width: 0; } .geo-panel-heading > div { flex: 1 1 auto; } .geo-panel-heading > span { display: grid; flex: 0 0 auto; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: var(--gi-radius-xs); background: #173e38; color: #ffffff; font-size: 0.76rem; font-weight: 700; } .geo-panel-heading h3, .geo-results-title-row h4 { margin: 0; color: var(--gi-ink-950); font-size: 0.9rem; letter-spacing: 0; line-height: 1.2; } .geo-panel-heading p { margin: 0.16rem 0 0; color: var(--gi-ink-600); font-size: 0.72rem; line-height: 1.35; } .geo-theme-list { display: grid; gap: 0.36rem; min-height: 0; overflow-y: auto; padding-right: 0.18rem; } .geo-results-panel { overflow-y: auto; } .geo-project-scope-select { display: grid; gap: 0.24rem; color: var(--gi-ink-600); font-size: 0.66rem; font-weight: 700; } .geo-project-scope-select select { min-height: 2.25rem; padding: 0.35rem 0.45rem; font-size: 0.72rem; } .geo-theme-option { display: grid; grid-template-columns: 0.72rem minmax(0, 1fr) auto; gap: 0.48rem; align-items: center; width: 100%; min-height: 3.25rem; border: 1px solid var(--gi-surface-sunken); border-radius: var(--gi-radius-sm); padding: 0.48rem 0.52rem; background: var(--gi-surface); color: var(--gi-ink-800); text-align: left; } .geo-theme-option:not(:disabled):hover { border-color: var(--gi-brand-50); background: var(--gi-brand-50); } .geo-theme-option-active { border-color: #397c6e; background: var(--gi-brand-50); box-shadow: inset 3px 0 0 #176a5c; } .geo-theme-option:disabled { cursor: not-allowed; background: var(--gi-surface); color: var(--gi-ink-600); opacity: 0.72; } .geo-theme-option > span:nth-child(2) { display: grid; min-width: 0; } .geo-theme-option strong, .geo-theme-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .geo-theme-option strong { font-size: 0.79rem; } .geo-theme-option small { margin-top: 0.12rem; color: var(--gi-ink-600); font-size: 0.66rem; } .geo-theme-option i { color: var(--gi-brand-600); font-size: 0.58rem; font-style: normal; font-weight: 700; text-transform: none; } .geo-theme-option:disabled i { color: #89938f; } .geo-theme-symbol { display: block; width: 0.6rem; height: 1.85rem; border-radius: var(--gi-radius-xs); background: #5c7c73; } .geo-theme-symbol-buildings { background: #d45f3d; } .geo-theme-symbol-space_occupation { background: #be3e33; } .geo-theme-symbol-open_space { background: #267a46; } .geo-theme-symbol-population { background: #7559a6; } .geo-theme-symbol-forest { background: #347950; } .geo-theme-symbol-nature_value { background: #9a4f64; } .geo-theme-symbol-agriculture { background: #7b8f32; } .geo-theme-symbol-soil { background: #9a7040; } .geo-theme-symbol-water { background: #2676a8; } .geo-theme-symbol-flood_hazard { background: #1597c2; } .geo-theme-symbol-elevation { background: #a57a4b; } .geo-theme-symbol-accessibility { background: #0f766e; } .geo-theme-symbol-services { background: #b66d16; } .geo-theme-symbol-roads { background: #6b7280; } .geo-theme-symbol-parcels { background: #a7792f; } .geo-source-summary { display: grid; gap: 0.18rem; border-top: 1px solid var(--gi-surface-soft); padding-top: 0.65rem; } .geo-source-summary span, .geo-primary-metrics span, .geo-selected-feature > span { color: var(--gi-ink-600); font-size: 0.62rem; font-weight: 700; text-transform: none; } .geo-source-summary strong { overflow: hidden; color: var(--gi-ink-800); font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; } .geo-source-summary small { color: var(--gi-ink-600); font-size: 0.68rem; line-height: 1.35; } .geo-time-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; border-top: 1px solid var(--gi-surface-soft); padding-top: 0.65rem; } .geo-time-controls label { color: var(--gi-ink-600); font-size: 0.66rem; font-weight: 700; } .geo-time-controls select { min-height: 2.25rem; margin-top: 0.24rem; padding: 0.35rem; font-size: 0.68rem; } .geo-time-controls .geo-series-control { grid-column: 1 / -1; } .geo-time-controls button { grid-column: 1 / -1; min-height: 2.25rem; } .geo-scope-select { margin-top: auto; color: var(--gi-ink-600); font-size: 0.7rem; font-weight: 600; } .geo-scope-select select { min-height: 2.35rem; margin-top: 0.28rem; } .geo-map-stage { display: grid; grid-template-rows: auto minmax(30rem, 1fr); overflow: hidden; } .geo-map-toolbar { display: flex; gap: 0.7rem; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--gi-surface-sunken); padding: 0.62rem 0.7rem; background: var(--gi-surface); } .geo-map-step { flex: 1 1 auto; } .geo-map-actions { display: flex; flex: 0 0 auto; gap: 0.35rem; } .geo-map-actions button, .geo-result-actions button { min-height: 2.15rem; padding: 0.4rem 0.58rem; font-size: 0.72rem; } .geo-draw-active { background: #9a4d24; } .geo-map-canvas { position: relative; min-height: 0; background: var(--gi-surface-soft); } .workbench-main .geo-map-canvas .map-container { position: absolute; inset: 0; width: auto; height: auto; min-height: 30rem; border: 0; border-radius: 0; } .geo-map-canvas-drawing .map-container { box-shadow: inset 0 0 0 3px #b5572d; } .geo-map-legend { position: absolute; z-index: 2; right: 0.65rem; bottom: 0.65rem; display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; border: 1px solid rgba(23, 33, 30, 0.18); border-radius: var(--gi-radius-xs); padding: 0.38rem 0.5rem; background: color-mix(in srgb, var(--gi-surface) 94%, transparent); color: var(--gi-ink-600); font-size: 0.64rem; box-shadow: var(--gi-shadow-sm); } .geo-map-legend span { display: inline-flex; gap: 0.3rem; align-items: center; } .geo-map-legend i { display: inline-block; width: 0.9rem; height: 0.55rem; border: 2px solid #176a5c; background: rgba(23, 106, 92, 0.15); } .geo-map-legend .geo-legend-layer { border-color: #d45f3d; background: rgba(212, 95, 61, 0.24); } .geo-map-legend .geo-legend-layer-population { border-color: #5b3f88; background: rgba(117, 89, 166, 0.24); } .geo-map-legend .geo-legend-layer-space_occupation { border-color: #8f2c24; background: rgba(190, 62, 51, 0.28); } .geo-map-legend .geo-legend-layer-open_space { border-color: #175c32; background: rgba(38, 122, 70, 0.26); } .geo-map-legend .geo-legend-layer-forest { border-color: #225f3b; background: rgba(52, 121, 80, 0.24); } .geo-map-legend .geo-legend-layer-water { border-color: #155b85; background: rgba(38, 118, 168, 0.24); } .geo-map-legend .geo-legend-layer-bathymetry { background: #0e7490; border-color: #164e63; } .geo-map-legend .geo-legend-layer-soil { border-color: #6f4c27; background: rgba(154, 112, 64, 0.24); } .geo-map-legend .geo-legend-layer-flood_hazard { border-color: #075985; background: rgba(21, 151, 194, 0.28); } .geo-map-legend .geo-legend-layer-elevation { border-color: #315f59; background: rgba(165, 122, 75, 0.26); } .geo-map-legend .geo-legend-layer-accessibility { border-color: #115e59; background: rgba(15, 118, 110, 0.26); } .geo-map-legend .geo-legend-layer-services { border-color: #854d0e; background: rgba(182, 109, 22, 0.26); } .geo-map-legend .geo-legend-layer-roads { border-color: #4b5563; background: rgba(107, 114, 128, 0.24); } .geo-map-legend .geo-legend-layer-parcels { border-color: #7d571f; background: rgba(167, 121, 47, 0.24); } .geo-map-legend .geo-legend-selection { border-color: #6b4aaa; background: rgba(107, 74, 170, 0.18); } .geo-map-legend .geo-legend-imagery { border-color: #334155; background: linear-gradient(135deg, #7a9b68 0 33%, var(--gi-warn-soft) 33% 66%, var(--gi-info-soft) 66%); } .geo-map-legend .geo-legend-thematic { display: inline-flex; align-items: center; gap: 0.42rem; } .geo-map-legend .geo-legend-thematic small { color: var(--gi-ink-600); font-size: 0.66rem; font-weight: 600; } .geo-map-legend .geo-legend-ramp { display: block; width: 3.4rem; height: 0.62rem; border: 1px solid rgba(23, 39, 34, 0.25); border-radius: var(--gi-radius-xs); } .geo-legend-ramp-space_occupation { background: linear-gradient(90deg, var(--gi-warn-soft), #be3e33); } .geo-legend-ramp-open_space { background: linear-gradient(90deg, #ddeedb, #267a46); } .geo-legend-ramp-population { background: linear-gradient(90deg, #eee7f6, #673a97); } .geo-legend-ramp-accessibility { background: linear-gradient(90deg, var(--gi-info-soft), #0f766e); } .geo-legend-ramp-services { background: linear-gradient(90deg, var(--gi-warn-soft), #b66d16); } .geo-legend-ramp-bathymetry { background: linear-gradient(90deg, var(--gi-info-soft), #0e7490); } .bathymetry-profile-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; margin-bottom: 0.9rem; padding: 0.8rem; border: 1px solid var(--gi-info-soft); border-radius: var(--gi-radius-sm); background: var(--gi-info-soft); } .bathymetry-profile-summary > div { display: grid; gap: 0.2rem; min-width: 0; } .bathymetry-profile-summary span, .bathymetry-profile-summary small { color: var(--gi-ink-600); font-size: 0.75rem; } .bathymetry-profile-summary strong { overflow-wrap: anywhere; color: var(--gi-brand-600); } .bathymetry-profile-summary a, .bathymetry-profile-summary p, .bathymetry-profile-summary small { grid-column: 1 / -1; } .bathymetry-profile-summary a { width: fit-content; color: var(--gi-info); font-weight: 600; } .bathymetry-profile-summary p { margin: 0; color: var(--gi-brand-600); font-size: 0.78rem; line-height: 1.45; } @media (max-width: 760px) { .bathymetry-profile-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .geo-map-legend .geo-legend-added { border-color: #15803d; background: rgba(22, 163, 74, 0.2); } .geo-map-legend .geo-legend-removed { border-color: #b91c1c; background: rgba(220, 38, 38, 0.18); } .geo-map-legend .geo-legend-modified { border-color: #b45309; background: rgba(217, 119, 6, 0.2); } .geo-draw-instruction, .geo-viewport-status { position: absolute; z-index: 3; left: 50%; display: grid; width: min(31rem, calc(100% - 2rem)); transform: translateX(-50%); border-radius: var(--gi-radius-sm); padding: 0.58rem 0.72rem; box-shadow: var(--gi-shadow-md); } .geo-draw-instruction { top: 0.72rem; border: 1px solid var(--gi-warn-soft); background: rgba(255, 248, 242, 0.96); color: var(--gi-warn); } .geo-draw-instruction strong, .geo-draw-instruction span { font-size: 0.75rem; } .geo-viewport-status { bottom: 2.8rem; border: 1px solid var(--gi-line); background: rgba(248, 252, 250, 0.95); color: var(--gi-ink-800); font-size: 0.68rem; text-align: center; } .geo-viewport-status-error { border-color: var(--gi-danger-soft); background: rgba(255, 246, 246, 0.96); color: var(--gi-danger); } .geo-results-empty, .geo-results-loading { display: grid; place-content: center; flex: 1 1 auto; min-height: 15rem; border: 1px dashed var(--gi-surface-sunken); border-radius: var(--gi-radius-sm); padding: 1rem; background: var(--gi-brand-50); text-align: center; } .geo-results-empty strong, .geo-results-loading strong { color: var(--gi-ink-800); font-size: 0.82rem; } .geo-results-empty p { max-width: 15rem; margin: 0.35rem auto 0; color: var(--gi-ink-600); font-size: 0.72rem; line-height: 1.45; } .geo-results-loading span { width: 1.4rem; height: 1.4rem; margin: 0 auto 0.6rem; border: 2px solid var(--gi-line); border-top-color: #176a5c; border-radius: 50%; animation: geo-spin 0.8s linear infinite; } .geo-image-analysis { display: grid; gap: 0.55rem; border: 1px solid var(--gi-line); border-left: 3px solid #176a5c; border-radius: var(--gi-radius-sm); padding: 0.65rem; background: var(--gi-brand-50); } .geo-image-analysis > div { display: grid; gap: 0.14rem; } .geo-image-analysis span { color: var(--gi-ink-600); font-size: 0.61rem; font-weight: 700; text-transform: none; } .geo-image-analysis strong { color: var(--gi-brand-600); font-size: 0.78rem; } .geo-image-analysis small, .geo-image-analysis p { margin: 0; color: var(--gi-ink-600); font-size: 0.65rem; line-height: 1.4; } .geo-image-analysis > button { width: 100%; min-height: 2.35rem; } .geo-orthophoto-product { display: grid; gap: 0.3rem; } .geo-orthophoto-product select { width: 100%; min-height: 2.25rem; border: 1px solid var(--gi-line); border-radius: var(--gi-radius-xs); padding: 0.35rem 0.5rem; background: var(--gi-surface); color: var(--gi-ink-800); font: inherit; font-size: 0.72rem; } .geo-image-analysis-acquiring, .geo-image-analysis-detecting, .geo-image-analysis-validating { border-left-color: #b17a31; background: var(--gi-warn-soft); } .geo-image-analysis-complete { border-left-color: #277749; background: var(--gi-brand-50); } .geo-image-analysis-failed { border-color: var(--gi-danger-soft); border-left-color: #aa3f37; background: var(--gi-danger-soft); } .geo-image-analysis .error { color: var(--gi-danger); } @keyframes geo-spin { to { transform: rotate(360deg); } } .geo-primary-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; } .geo-primary-metrics > div { display: grid; gap: 0.18rem; min-width: 0; border: 1px solid var(--gi-surface-sunken); border-radius: var(--gi-radius-xs); padding: 0.48rem; background: var(--gi-surface); } .geo-primary-metrics strong { overflow: hidden; color: var(--gi-ink-950); font-size: 0.86rem; text-overflow: ellipsis; white-space: nowrap; } .geo-supporting-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.35rem; } .geo-supporting-metrics > div { display: flex; gap: 0.4rem; align-items: baseline; justify-content: space-between; min-width: 0; border-bottom: 1px solid var(--gi-surface-soft); padding: 0.3rem 0.1rem; } .geo-supporting-metrics span { color: var(--gi-ink-600); font-size: 0.64rem; } .geo-supporting-metrics strong { color: var(--gi-ink-800); font-size: 0.72rem; white-space: nowrap; } .geo-temporal-metrics > div.positive { border-color: var(--gi-brand-50); background: var(--gi-brand-50); } .geo-temporal-metrics > div.negative { border-color: var(--gi-danger-soft); background: var(--gi-danger-soft); } .geo-temporal-metrics small { color: var(--gi-ink-600); font-size: 0.62rem; } .geo-temporal-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--gi-surface-sunken); border-radius: var(--gi-radius-xs); background: var(--gi-surface); } .geo-temporal-summary > div { display: grid; gap: 0.15rem; min-width: 0; border-left: 1px solid var(--gi-surface-sunken); padding: 0.45rem; } .geo-temporal-summary > div:first-child { border-left: 0; } .geo-temporal-summary span { color: var(--gi-ink-600); font-size: 0.6rem; font-weight: 700; text-transform: none; } .geo-temporal-summary strong { overflow: hidden; color: var(--gi-ink-800); font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; } .geo-temporal-chart { margin-top: 0.7rem; padding: 0.7rem; border: 1px solid var(--gi-surface-sunken); border-radius: var(--gi-radius-xs); background: var(--gi-surface); } .geo-temporal-chart-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .geo-temporal-chart-heading > div { display: grid; gap: 0.1rem; } .geo-temporal-chart-heading span, .geo-temporal-chart-values span { color: var(--gi-ink-600); font-size: 0.64rem; } .geo-temporal-chart svg { display: block; width: 100%; height: 150px; margin-top: 0.4rem; overflow: visible; } .geo-temporal-chart svg line { stroke: #cbd6d2; stroke-width: 1; } .geo-temporal-chart svg polyline { fill: none; stroke: #2676a8; stroke-width: 3; vector-effect: non-scaling-stroke; } .geo-temporal-chart svg circle { fill: #ffffff; stroke: #2676a8; stroke-width: 3; vector-effect: non-scaling-stroke; } .geo-temporal-chart svg text { fill: #6a7773; font-size: 11px; } .geo-temporal-chart-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 0.35rem; } .geo-temporal-chart-values > div { display: grid; gap: 0.1rem; padding-top: 0.4rem; border-top: 1px solid var(--gi-surface-sunken); } .geo-temporal-chart-values strong { font-size: 0.72rem; } .geo-change-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; } .geo-change-counts span { display: grid; gap: 0.1rem; border: 1px solid var(--gi-surface-sunken); border-radius: var(--gi-radius-xs); padding: 0.4rem; color: var(--gi-ink-600); font-size: 0.64rem; text-align: center; } .geo-change-counts strong { color: var(--gi-ink-800); font-size: 0.85rem; } .geo-theme-results { display: grid; gap: 0; border: 1px solid var(--gi-surface-sunken); border-radius: var(--gi-radius-sm); overflow: hidden; } .geo-results-title-row { display: flex; justify-content: space-between; padding: 0.48rem 0.55rem; background: var(--gi-surface); } .geo-results-title-row span { color: var(--gi-ink-600); font-size: 0.65rem; } .geo-theme-result-row { display: grid; grid-template-columns: 0.55rem minmax(0, 1fr) auto; gap: 0.45rem; align-items: center; min-height: 2.65rem; border-top: 1px solid var(--gi-surface-soft); padding: 0.38rem 0.5rem; } .geo-theme-result-row .geo-theme-symbol { width: 0.45rem; height: 1.5rem; } .geo-theme-result-row > span:nth-child(2) { display: grid; min-width: 0; } .geo-theme-result-row strong { font-size: 0.73rem; } .geo-theme-result-row small { overflow: hidden; color: var(--gi-ink-600); font-size: 0.61rem; text-overflow: ellipsis; white-space: nowrap; } .geo-theme-result-row b { color: var(--gi-ink-800); font-size: 0.7rem; text-align: right; } .geo-theme-result-value { display: grid; justify-items: end; min-width: 8.5rem; text-align: right; } .geo-theme-result-value small { max-width: 13rem; } .geo-data-notice { margin: 0; border-left: 3px solid #b17a31; padding: 0.45rem 0.55rem; background: var(--gi-warn-soft); color: var(--gi-warn); font-size: 0.68rem; line-height: 1.4; } .geo-result-details { border: 1px solid var(--gi-surface-sunken); border-radius: var(--gi-radius-sm); } .geo-result-details summary { padding: 0.5rem 0.55rem; color: var(--gi-ink-600); cursor: pointer; font-size: 0.72rem; font-weight: 600; } .geo-result-details dl { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--gi-surface-soft); } .geo-result-details dl > div { display: grid; grid-template-columns: minmax(6rem, 0.8fr) minmax(0, 1.2fr); gap: 0.5rem; border-top: 1px solid var(--gi-surface-soft); padding: 0.36rem 0.5rem; } .geo-result-details dl > div:first-child { border-top: 0; } .geo-result-details dt, .geo-result-details dd { overflow-wrap: anywhere; font-size: 0.65rem; } .geo-result-details dt { color: var(--gi-ink-600); } .geo-result-details dd { margin: 0; color: var(--gi-ink-800); } .geo-selected-feature { display: grid; gap: 0.16rem; border-left: 3px solid #a7792f; padding: 0.48rem 0.55rem; background: var(--gi-warn-soft); } .geo-selected-feature strong { overflow-wrap: anywhere; color: var(--gi-warn); font-size: 0.75rem; } .geo-selected-feature small { color: var(--gi-ink-600); font-size: 0.65rem; } .geo-result-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; margin-top: auto; } .geo-result-next-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.45rem; align-items: center; border-top: 1px solid var(--gi-surface-sunken); padding-top: 0.65rem; } .geo-result-next-actions > span { display: grid; gap: 0.12rem; min-width: 0; } .geo-result-next-actions small { color: var(--gi-ink-600); font-size: 0.66rem; line-height: 1.35; } .geo-explorer-footer { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; color: var(--gi-ink-600); font-size: 0.68rem; } .geo-explorer-footer strong { color: var(--gi-ink-600); } @media (min-width: 1800px) { .geo-explorer-layout { grid-template-columns: minmax(17rem, 19rem) minmax(38rem, 1fr) minmax(20rem, 23rem); height: clamp(38rem, calc(100dvh - 11rem), 64rem); min-height: 38rem; } .geo-map-canvas .map-container { min-height: 38rem; } } @media (max-width: 1500px) { .geo-explorer-layout { grid-template-columns: minmax(14rem, 16rem) minmax(28rem, 1fr); grid-template-rows: clamp(34rem, calc(100dvh - 10rem), 52rem) auto; height: auto; min-height: 0; } .geo-results-panel { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(12rem, 0.6fr) repeat(2, minmax(15rem, 1fr)); align-items: start; } .geo-results-panel > .geo-panel-heading, .geo-results-panel > .error, .geo-results-panel > .geo-data-notice, .geo-results-panel > .geo-result-actions, .geo-results-panel > .geo-result-next-actions { grid-column: 1 / -1; } .geo-results-empty, .geo-results-loading { grid-column: 2 / -1; min-height: 9rem; } } @media (max-width: 920px) { .geo-explorer-header { flex-wrap: wrap; align-items: start; } .geo-explorer-layout { display: block; min-height: 0; } .geo-theme-panel, .geo-map-stage, .geo-results-panel { margin-bottom: 0.65rem; } .geo-theme-list { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding-right: 0; } .geo-map-toolbar { align-items: start; } .geo-map-actions { flex-wrap: wrap; justify-content: flex-end; } .geo-results-panel { display: flex; overflow: visible; } } @media (max-width: 620px) { .geo-explorer-header { display: grid; } .geo-explorer-advanced { width: 100%; } .geo-analysis-mode { width: 100%; } .geo-theme-list, .geo-primary-metrics, .geo-temporal-summary, .geo-change-counts { grid-template-columns: 1fr; } .geo-theme-list { max-height: 16rem; overflow-y: auto; overscroll-behavior-y: contain; padding-right: 0.18rem; scrollbar-gutter: stable; } .geo-temporal-summary > div { border-top: 1px solid var(--gi-surface-sunken); border-left: 0; } .geo-temporal-summary > div:first-child { border-top: 0; } .geo-map-toolbar { display: grid; } .geo-map-actions, .geo-result-actions, .geo-result-next-actions { display: grid; grid-template-columns: 1fr; } .geo-map-actions button { width: 100%; } .geo-map-canvas .map-container { min-height: 24rem; } .geo-map-legend { right: 0.4rem; bottom: 0.4rem; left: 0.4rem; } } @media (max-width: 1180px) { .workspace-grid-data, .map-inspection-surface { grid-template-columns: 1fr; } .dataset-upload-form, .dataset-action-grid, .map-context-summary, .map-workspace-shell .map-toolbar, .layer-provenance-rail, .guided-gis-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .dataset-upload-form, .dataset-role-summary-grid, .dataset-metrics, .dataset-action-grid, .map-context-summary, .map-workspace-shell .map-toolbar, .layer-provenance-rail, .bbox-select-grid, .guided-gis-steps, .guided-gis-actions { grid-template-columns: 1fr; } .dataset-action-button small { display: block; } .workbench-main .map-container, .map-frame-surface .map-container { min-height: 24rem; } } .source-catalog-panel { grid-column: 1 / -1; } .source-domain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; margin-top: 1rem; } .source-domain-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.42rem 0.7rem; min-width: 0; border: 1px solid var(--gi-surface-sunken); border-left: 3px solid #75968a; border-radius: var(--gi-radius-sm); padding: 0.82rem; background: var(--gi-surface); } .source-domain-card > div { display: grid; min-width: 0; gap: 0.14rem; } .source-domain-card span, .source-domain-card p, .source-domain-card small { margin: 0; color: var(--gi-ink-600); font-size: 0.73rem; line-height: 1.42; } .source-domain-card b { align-self: start; font-size: 0.68rem; } .source-domain-card p, .source-domain-card small { grid-column: 1 / -1; } .source-domain-card small { border-top: 1px solid var(--gi-surface-soft); padding-top: 0.4rem; } .source-status-operational { color: var(--gi-brand-600); } .source-status-planned { color: var(--gi-warn); } .source-theme-coverage, .source-loaded-disclosure, .source-catalog-grid { min-width: 0; } .source-theme-coverage, .source-loaded-disclosure { margin-top: 0.8rem; border-top: 1px solid var(--gi-surface-sunken); padding-top: 0.7rem; } .source-theme-coverage > summary, .source-loaded-disclosure > summary { cursor: pointer; color: var(--gi-ink-800); font-size: 0.82rem; font-weight: 600; } .source-catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; margin-top: 0.7rem; } .source-catalog-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.45rem 0.75rem; min-width: 0; padding: 0.85rem; border: 1px solid var(--gi-surface-sunken); border-radius: var(--gi-radius-sm); background: var(--gi-surface); } .source-catalog-card > div { display: grid; gap: 0.15rem; min-width: 0; } .source-catalog-card span, .source-catalog-card p, .source-opportunity-list span, .source-opportunity-list p { margin: 0; color: var(--gi-ink-600); font-size: 0.74rem; } .source-catalog-card b { color: var(--gi-brand-600); font-size: 0.7rem; } .source-catalog-card p { grid-column: 1 / -1; } .source-catalog-loaded { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-top: 0.7rem; } .source-catalog-loaded article { display: grid; gap: 0.2rem; border-left: 3px solid #287051; padding: 0.6rem 0.75rem; background: var(--gi-brand-50); } .source-catalog-loaded span, .source-catalog-loaded p { margin: 0; color: var(--gi-ink-600); font-size: 0.72rem; } .source-opportunity-list { margin-top: 0.8rem; border-top: 1px solid var(--gi-surface-sunken); padding-top: 0.75rem; } .source-opportunity-list > summary { cursor: pointer; color: var(--gi-ink-800); font-weight: 600; } .source-opportunity-list > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; margin-top: 0.7rem; } .source-opportunity-domain { display: grid; gap: 0.55rem; border: 0; border-top: 1px solid var(--gi-surface-sunken); border-radius: 0; padding: 0.7rem 0 0; background: transparent; box-shadow: none; } .source-opportunity-domain:first-child { border-top: 0; padding-top: 0; } .source-opportunity-domain > header { display: flex; gap: 0.7rem; align-items: baseline; justify-content: space-between; } .source-opportunity-domain > header span { color: var(--gi-ink-600); font-size: 0.7rem; } .source-opportunity-domain > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; } .source-opportunity-list article { position: relative; display: grid; gap: 0.35rem; padding: 0.75rem; border: 1px solid var(--gi-surface-sunken); border-radius: var(--gi-radius-xs); } .source-opportunity-list article > div { display: grid; gap: 0.15rem; } .source-opportunity-list a { width: fit-content; color: var(--gi-info); font-size: 0.72rem; font-weight: 600; } .source-opportunity-list article > small { margin: 0; color: var(--gi-ink-600); font-size: 0.7rem; line-height: 1.4; } .source-priority { position: absolute; top: 0.7rem; right: 0.7rem; border-left: 2px solid #718096; padding-left: 0.38rem; font-size: 0.65rem; font-weight: 700; } .source-opportunity-list article > div { padding-right: 5.5rem; } .source-priority-next { border-left-color: #287051; color: var(--gi-brand-600); } .source-priority-planned { border-left-color: #a66a18; color: var(--gi-warn); } @media (max-width: 980px) { .source-domain-grid, .source-catalog-grid, .source-catalog-loaded, .source-opportunity-domain > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { section.source-catalog-panel > .panel-title-row { display: grid; gap: 0.6rem; } section.source-catalog-panel > .panel-title-row .status-badge { justify-self: start; } .source-domain-grid, .source-catalog-grid, .source-catalog-loaded, .source-opportunity-domain > div { grid-template-columns: 1fr; } .source-opportunity-domain > header { display: grid; gap: 0.15rem; } } .workspace-grid-assistant { grid-template-columns: minmax(0, 1fr); } .geo-assistant-panel { width: min(1120px, 100%); margin: 0 auto; } .assistant-context-strip { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(240px, 1.25fr) auto; gap: 0.75rem; align-items: end; margin-top: 1rem; padding: 0.8rem; border: 1px solid var(--gi-surface-sunken); border-radius: var(--gi-radius-sm); background: var(--gi-brand-50); } .assistant-context-strip > div, .assistant-context-strip label { display: grid; gap: 0.25rem; min-width: 0; } .assistant-context-strip span, .assistant-composer label, .assistant-message > span { color: var(--gi-ink-600); font-size: 0.68rem; font-weight: 600; } .assistant-context-strip select { width: 100%; min-height: 2.5rem; border: 1px solid var(--gi-surface-sunken); border-radius: var(--gi-radius-xs); padding: 0 0.65rem; background: var(--gi-surface); color: var(--gi-ink-800); } .assistant-suggestions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.8rem; } .assistant-suggestions button { min-height: 3.5rem; border: 1px solid var(--gi-surface-sunken); border-radius: var(--gi-radius-xs); padding: 0.65rem; background: var(--gi-surface); color: var(--gi-ink-800); font-size: 0.75rem; font-weight: 600; text-align: left; } .assistant-suggestions button:hover:not(:disabled) { border-color: var(--gi-line); background: var(--gi-brand-50); } .assistant-conversation { display: grid; gap: 0.7rem; min-height: 22rem; max-height: 52vh; margin-top: 0.8rem; overflow-y: auto; border: 1px solid var(--gi-surface-sunken); border-radius: var(--gi-radius-sm); padding: 0.9rem; background: var(--gi-surface); } .assistant-empty-state { align-self: center; justify-self: center; max-width: 34rem; color: var(--gi-ink-600); text-align: center; } .assistant-empty-state p { margin: 0.35rem 0 0; } .assistant-message { display: grid; gap: 0.3rem; width: min(82%, 48rem); padding: 0.8rem 0.9rem; border: 1px solid var(--gi-surface-sunken); border-radius: var(--gi-radius-sm); background: var(--gi-surface); } .assistant-message-user { justify-self: end; border-color: var(--gi-brand-50); background: var(--gi-brand-50); } .assistant-message p { margin: 0; color: var(--gi-ink-800); line-height: 1.55; white-space: pre-wrap; } .assistant-message details { margin-top: 0.3rem; border-top: 1px solid var(--gi-surface-soft); padding-top: 0.45rem; } .assistant-message summary { cursor: pointer; color: var(--gi-ink-600); font-size: 0.7rem; font-weight: 600; } .assistant-evidence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem; margin-top: 0.45rem; } .assistant-evidence-grid span { padding: 0.35rem 0.45rem; border-radius: var(--gi-radius-xs); background: var(--gi-surface-soft); color: var(--gi-ink-600); font-size: 0.68rem; } .assistant-thinking { display: flex; align-items: center; gap: 0.55rem; color: var(--gi-ink-600); font-size: 0.76rem; } .assistant-thinking > span { width: 0.8rem; height: 0.8rem; border: 2px solid var(--gi-line); border-top-color: #347950; border-radius: 50%; animation: assistant-spin 0.8s linear infinite; } @keyframes assistant-spin { to { transform: rotate(360deg); } } .assistant-composer { display: grid; gap: 0.4rem; margin-top: 0.8rem; } .assistant-composer textarea { width: 100%; resize: vertical; border: 1px solid var(--gi-surface-sunken); border-radius: var(--gi-radius-sm); padding: 0.75rem; color: var(--gi-ink-800); font: inherit; line-height: 1.45; } .assistant-composer > div { display: flex; align-items: center; justify-content: flex-end; gap: 0.55rem; } .assistant-composer > div p { margin: 0 auto 0 0; color: var(--gi-ink-600); font-size: 0.68rem; } @media (max-width: 900px) { .assistant-context-strip, .assistant-suggestions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .assistant-context-strip > button { width: fit-content; } } @media (max-width: 640px) { .assistant-context-strip, .assistant-suggestions, .assistant-evidence-grid { grid-template-columns: 1fr; } .assistant-message { width: 100%; } .assistant-composer > div { align-items: stretch; flex-direction: column; } } .workspace-persistent-map[hidden] { display: none; } #workspace-main:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .geo-bootstrap-status { display: flex; gap: 0.7rem; align-items: center; min-height: 3.25rem; border: 1px solid var(--gi-line); border-radius: var(--gi-radius-sm); padding: 0.65rem 0.8rem; background: var(--gi-brand-50); color: var(--gi-brand-600); } .geo-bootstrap-status > div { display: grid; gap: 0.15rem; } .geo-bootstrap-status strong { font-size: 0.8rem; } .geo-bootstrap-status small { color: var(--gi-ink-600); font-size: 0.7rem; } .geo-bootstrap-status-error { border-color: var(--gi-danger-soft); background: var(--gi-warn-soft); color: var(--gi-danger); } .geo-loading-indicator { width: 1rem; height: 1rem; flex: 0 0 1rem; border: 2px solid var(--gi-brand-50); border-top-color: #176a5c; border-radius: 50%; animation: geo-loading-spin 0.8s linear infinite; } @keyframes geo-loading-spin { to { transform: rotate(360deg); } } .geo-performance-status { margin: 0; border-left: 3px solid var(--gi-line); padding: 0.45rem 0.55rem; background: var(--gi-brand-50); color: var(--gi-ink-600); font-size: 0.68rem; line-height: 1.4; } .geo-performance-status-warning { border-left-color: #b36b1e; background: var(--gi-warn-soft); color: var(--gi-warn); } .geo-theme-option strong, .geo-theme-option small { overflow: visible; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; } @media (prefers-reduced-motion: reduce) { .geo-loading-indicator { animation: none; border-top-color: var(--gi-brand-50); background: #176a5c; } } @media (min-width: 2400px) { .geo-explorer-layout { grid-template-columns: minmax(19rem, 21rem) minmax(46rem, 1fr) minmax(23rem, 25rem); height: clamp(42rem, calc(100dvh - 11rem), 70rem); } .geo-theme-panel, .geo-results-panel { padding: 0.9rem; } .geo-map-canvas .map-container { min-height: 42rem; } } @media (max-width: 480px) { .geo-explorer { gap: 0.55rem; } .geo-explorer-header, .geo-theme-panel, .geo-results-panel { padding-inline: 0.65rem; } .geo-theme-list { grid-template-columns: 1fr; } .geo-map-actions { grid-template-columns: 1fr; width: 100%; } .geo-map-actions button { min-height: 2.75rem; } } .coverage-resolution-surface { padding: 18px 20px; border-block: 1px solid var(--line); background: color-mix(in srgb, var(--surface-raised) 94%, var(--accent-soft)); } .coverage-zone-row, .coverage-summary-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .coverage-zone-row span, .coverage-summary-row span { padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--gi-radius-xs); background: var(--surface-raised); color: var(--muted); font-size: 0.78rem; } .coverage-zone-row .coverage-zone-warning { border-color: var(--warning); color: var(--warning); } .coverage-active-theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-top: 12px; } .coverage-status-item { display: grid; gap: 3px; min-height: 76px; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: var(--gi-radius-sm); background: var(--surface-raised); } .coverage-status-item span, .coverage-status-item small { color: var(--muted); } .coverage-status-operational { border-left-color: var(--accent); } .coverage-status-partial { border-left-color: var(--warning); } .coverage-status-not_configured, .coverage-status-unsupported { border-left-color: var(--muted); }