@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: Inter, 'Avenir Next', 'Segoe UI', 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: 6px; padding: 0.48rem 0.7rem; background: #ffffff; color: var(--accent-strong); font-size: 0.84rem; font-weight: 800; 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: 6px; padding: 0.52rem 0.78rem; background: linear-gradient(180deg, #ffffff, #edf5f1); color: var(--text); cursor: pointer; font-weight: 650; 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: 6px; padding: 0.52rem 0.62rem; background: #ffffff; 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: 650; } 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: 8px; padding: 1rem; background: rgba(255, 255, 255, 0.96); 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: #b8c9c0; } .error { border: 1px solid #fecaca; border-radius: 8px; padding: 0.7rem 0.85rem; background: #fff1f2; color: var(--danger); font-weight: 650; } .muted { color: var(--muted); } .eyebrow { margin: 0 0 0.25rem; color: var(--muted); font-size: 0.72rem; font-weight: 800; 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: 8px; background: var(--panel-soft); } .summary-grid > div { padding: 0.7rem; } .workbench-status-strip { margin: 1rem 0; border-color: #bdd0c5; padding: 0.9rem; background: linear-gradient(180deg, #ffffff, #f7fbf8); box-shadow: 0 8px 22px rgba(33, 48, 41, 0.05); } .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: 800; letter-spacing: 0.04em; text-transform: uppercase; } .status-pill { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 0.12rem 0.46rem; background: #ffffff; color: #334155; font-size: 0.72rem; text-transform: lowercase; } .metric { display: block; font-size: 1.35rem; font-weight: 850; } .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: 8px; background: #dbe7e2; } .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: 8px; padding: 0.85rem; background: #0b1411; color: #d7f7e8; font-size: 0.82rem; line-height: 1.48; } section div { min-width: 0; } section strong { font-weight: 800; } 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: #eef4f1; } .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: 7px; padding: 0.44rem 0.58rem; background: var(--surface-raised); } .context-bar span { display: block; color: var(--muted); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } .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: #ffffff; } .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: 550; line-height: 1.3; } .nav-item-active { border-color: rgba(15, 118, 110, 0.34); background: #ffffff; 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: 7px; 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: 7px; padding: 0.48rem; background: rgba(255, 255, 255, 0.74); } .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: 7px; 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, #ffffff, #f7fbf8); } .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: #ffffff; 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: #f2fbf5; } .workflow-step-status { color: var(--muted); font-size: 0.68rem; font-weight: 850; letter-spacing: 0.05em; line-height: 1.2; text-transform: uppercase; } .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), rgba(255, 255, 255, 0.82)); box-shadow: 0 8px 20px rgba(33, 48, 41, 0.045); } .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) { display: grid; gap: 0.55rem; } .panel-title-row { display: flex; } 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.05em; text-transform: uppercase; } .table-scroll { width: 100%; max-height: 22rem; overflow: auto; margin-top: 0.75rem; border: 1px solid var(--line); border-radius: 7px; background: #ffffff; } .table-scroll table { min-width: 42rem; margin-top: 0; } .table-scroll thead th { position: sticky; top: 0; z-index: 1; background: #f8fbf9; } .table-scroll th, .table-scroll td { max-width: 18rem; overflow-wrap: anywhere; } .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: #f8fbf9; } .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: 999px; padding: 0.18rem 0.52rem; background: #ffffff; color: #334155; font-size: 0.74rem; font-weight: 800; line-height: 1.2; } .status-badge-ready { border-color: rgba(21, 128, 61, 0.28); background: #ecfdf3; color: #166534; } .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: #ffffff; } .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: 8px; padding: 0.68rem 0.75rem; background: linear-gradient(180deg, #ffffff, #f7fbf8); 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: 850; letter-spacing: 0.04em; line-height: 1.2; text-transform: uppercase; } .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: 8px; padding: 0.72rem; background: var(--panel-soft); } .data-panel-list-block { background: #ffffff; } .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: 7px; padding: 0.55rem; background: #ffffff; } .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: 8px; padding: 0.65rem; background: #ffffff; } .dataset-role-summary span, .dataset-role-summary small { color: var(--muted); font-size: 0.76rem; font-weight: 800; text-transform: uppercase; } .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: #f1f5f9; color: #0f172a; } .dataset-role-reference { border-color: rgba(15, 118, 110, 0.28); background: #ecfdf5; color: #115e59; } .dataset-role-candidate { border-color: rgba(37, 99, 235, 0.24); background: #eff6ff; color: #1d4ed8; } .dataset-role-source { border-color: rgba(100, 116, 139, 0.22); background: #f8fafc; color: #334155; } .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: 8px; 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: #ffffff; 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: 800; text-transform: uppercase; } .dataset-role-badge { display: inline-flex; align-items: center; max-width: 100%; min-height: 1.45rem; border: 1px solid currentColor; border-radius: 999px; 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: #36524b; 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: 850; } .dataset-action-button small { font-size: 0.73rem; font-weight: 750; 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: 7px; padding: 0.72rem; background: var(--accent-soft); } .result-summary-card p { min-width: 0; margin: 0; color: #23423b; 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: 8px; padding: 0.72rem; background: #ffffff; } .quality-summary-surface { background: linear-gradient(180deg, #ffffff, #f7fbf8); } .quality-evidence-surface { background: #f8fbf9; } .quality-drilldown-surface { display: grid; gap: 0.72rem; background: linear-gradient(180deg, #ffffff, #f7fbf8); } .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: 8px; padding: 0.72rem; background: #ffffff; } .change-detection-input-surface { background: linear-gradient(180deg, #ffffff, #f7fbf8); } .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: #92400e; 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: 8px; padding: 0.72rem; background: #ffffff; } .quality-handoff-grid > div { min-width: 0; border: 1px solid rgba(15, 118, 110, 0.18); border-radius: 8px; padding: 0.72rem; background: #ffffff; } .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: 8px; padding: 0.68rem; background: #ffffff; } .quality-evidence-token-grid > div { border-color: rgba(15, 118, 110, 0.22); background: linear-gradient(180deg, #f8fcfa, #ffffff); } .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: 800; letter-spacing: 0.05em; text-transform: uppercase; } .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: 7px; 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: 8px; padding: 0.55rem; background: #ffffff; } .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: 800; letter-spacing: 0.05em; text-transform: uppercase; } .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: 8px; padding: 0.58rem; background: #f8fbf9; } .quality-metric-card-critical { border-color: rgba(185, 28, 28, 0.18); background: #fff7ed; } .quality-metric-card span { display: block; color: var(--muted); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .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: 8px; padding: 0.58rem; background: #ffffff; } .metric-list strong { font-size: 0.95rem; } .empty-state { display: grid; gap: 0.25rem; margin-top: 0.75rem; background: #ffffff; 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: 650; } .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: 8px; padding: 0.78rem; background: linear-gradient(180deg, #ffffff, #f7fbf8); box-shadow: 0 1px 0 rgba(19, 32, 24, 0.03); } .export-history-surface, .system-provider-capability-surface { background: #ffffff; } .latest-artifact-surface { background: #ffffff; } .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: 8px; padding: 0.85rem; background: linear-gradient(180deg, #f5fbf8, #ffffff); } .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: 7px; padding: 0.62rem; background: #ffffff; } .handoff-readiness-grid span, .handoff-action-card span { display: block; color: var(--muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } .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: 8px; padding: 0.72rem; background: #ffffff; } .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: 8px; padding: 0.72rem; background: linear-gradient(180deg, #f8fcfa, #ffffff); } .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: 850; letter-spacing: 0.05em; text-transform: uppercase; } .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: 999px; padding: 0.18rem 0.54rem; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.74rem; font-weight: 850; 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: 8px; padding: 0.72rem; background: #ffffff; } .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: 8px; padding: 0.62rem 0.72rem; background: #ffffff; } .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: 8px; 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: 7px; padding: 0.55rem; background: #ffffff; } .system-provider-grid span { display: block; color: var(--muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } .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: 999px; padding: 0.16rem 0.5rem; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.74rem; font-weight: 800; } .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: 7px; padding: 0.55rem; background: #ffffff; } .provider-provenance-card span { display: block; color: var(--muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } .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: 8px; padding: 0.62rem; background: #ffffff; } .export-preview-summary-card span { color: var(--muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } .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: 8px; 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: 800; } .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: 8px; padding: 0.68rem 0.78rem; background: linear-gradient(180deg, #ffffff, #f7fbf8); } .map-context-summary span, .map-context-summary small { display: block; } .map-context-summary span { color: var(--muted); font-size: 0.68rem; font-weight: 850; letter-spacing: 0.05em; text-transform: uppercase; } .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: 8px; padding: 0.72rem; background: #ffffff; } .map-control-surface { display: grid; gap: 0.68rem; } .map-frame-surface { padding: 0.52rem; background: #f7fbf8; } .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: 8px; padding: 0.62rem 0.72rem; background: var(--panel-soft); } .map-status span { color: var(--muted); font-size: 0.84rem; } .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 #bfdbfe; border-left: 4px solid #2563eb; border-radius: 8px; padding: 0.72rem; background: #eff6ff; } .qa-evidence-map-status span, .qa-evidence-map-status strong { display: block; } .qa-evidence-map-status > div:first-child span { color: #1d4ed8; font-size: 0.68rem; font-weight: 850; letter-spacing: 0.05em; text-transform: uppercase; } .qa-evidence-map-status > div:first-child strong { margin-top: 0.18rem; color: #172554; } .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: #1e3a8a; font-size: 0.78rem; font-weight: 750; } .qa-evidence-swatch { display: inline-block; width: 0.72rem; height: 0.72rem; border-radius: 999px; border: 2px solid #ffffff; 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: 7px; padding: 0.58rem 0.68rem; background: #ffffff; } .layer-provenance-rail span, .feature-property-chip span { display: block; color: var(--muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } .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: 8px; padding: 0.72rem; background: linear-gradient(180deg, #ffffff, #f6fbff); } .bbox-select-surface .panel-title-row { margin-bottom: 0; } .bbox-select-status { display: grid; gap: 0.22rem; border: 1px solid var(--line); border-radius: 7px; padding: 0.58rem 0.66rem; background: #ffffff; } .bbox-select-status span { color: var(--muted); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.05em; text-transform: uppercase; } .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: 8px; padding: 0.68rem; background: #ffffff; } .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: 850; letter-spacing: 0.05em; text-transform: uppercase; } .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: 6px; padding: 0.62rem; background: #ffffff; box-shadow: none; } .quality-summary-surface, .export-summary-surface { background: #f8fbf9; } .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: 6px; padding: 0.5rem 0.56rem; background: #ffffff; 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: 5px; padding: 0.48rem; font-size: 0.68rem; } .quality-history-controls, .export-history-controls { margin-top: 0; border-radius: 6px; 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: 5px; 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: 6px; 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: 8px; padding: 0.72rem; background: linear-gradient(180deg, #ffffff, #f7fbf8); } .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: 7px; padding: 0.55rem 0.62rem; background: #ffffff; } .feature-extract-grid span { display: block; color: var(--muted); font-size: 0.68rem; font-weight: 850; letter-spacing: 0.05em; text-transform: uppercase; } .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: 8px; padding: 0.68rem 0.72rem; background: #ffffff; } .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: 8px; padding: 0.78rem; background: linear-gradient(180deg, #ffffff, #f7fbf8); box-shadow: 0 1px 0 rgba(19, 32, 24, 0.03); } .ai-lab-results-surface { background: #ffffff; } .calibration-comparison-surface { border-color: #d6dfda; background: #fbfdfb; } .guided-calibration-surface { border-color: #d9e4dd; background: linear-gradient(180deg, #ffffff, #f8fcf9); } .calibration-progress-panel { display: grid; gap: 0.55rem; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 0.68rem; background: #ffffff; } .table-action { min-height: 2rem; padding: 0.35rem 0.6rem; white-space: nowrap; } .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: 8px; padding: 0.64rem; background: #ffffff; } .calibration-summary-card-ready { border-color: #b8d8c5; background: #f7fcf8; } .calibration-summary-card span { color: var(--muted); font-size: 0.76rem; font-weight: 800; text-transform: uppercase; } .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 #c9d8d1; border-radius: 8px; padding: 0.64rem 0.68rem; background: #f8fbf9; } .lab-readiness-panel-ready { border-left-color: #2f7d56; background: #f5fbf6; } .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 #d8e3de; border-radius: 7px; padding: 0.52rem 0.58rem; background: #ffffff; } .lab-readiness-item-ready { border-color: #b8dcc9; background: #fbfffc; } .lab-readiness-item span { color: var(--muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; } .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 #d8e3de; border-left: 4px solid #315a92; border-radius: 8px; padding: 0.58rem 0.68rem; background: #f8fbff; } .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; } .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 #d8e3de; border-radius: 8px; padding: 0.52rem 0.62rem; background: #ffffff; } .lab-action-guardrail-ready { border-color: #b8dcc9; background: #f8fff9; } .lab-action-guardrail span { flex: 0 0 auto; color: var(--muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; } .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: #f8fbf9; } .inspector-tab { min-width: 0; min-height: 2.2rem; padding: 0.38rem 0.42rem; background: #ffffff; 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: 8px; padding: 0.45rem; background: #ffffff; } .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: 8px; padding: 0.7rem; background: #ffffff; } .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: 800; letter-spacing: 0.05em; text-transform: uppercase; } .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: 8px; padding: 0.72rem; background: linear-gradient(180deg, #f8fbfa 0%, #ffffff 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: 8px; padding: 0.58rem; background: #ffffff; } .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 #d8e3de; border-radius: 6px; padding: 0.42rem 0.48rem; background: #f8fbf9; } .raster-manifest-details dt { color: var(--muted); font-size: 0.7rem; font-weight: 850; text-transform: uppercase; } .raster-manifest-details dd { min-width: 0; margin: 0.12rem 0 0; color: var(--text); font-size: 0.86rem; font-weight: 750; 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: 7px; padding: 0.6rem 0.65rem; background: #f5fbf6; } .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; } .raster-readiness-item span, .raster-manifest-handoff span { color: var(--muted); font-size: 0.74rem; font-weight: 850; line-height: 1.2; text-transform: uppercase; } .raster-readiness-item strong, .raster-readiness-state { color: var(--text); font-size: 0.86rem; font-weight: 850; 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: 8px; padding: 0.62rem; background: #ffffff; } .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: 800; 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: 8px; padding: 0.52rem 0.62rem; background: rgba(153, 27, 27, 0.07); color: var(--danger); font-size: 0.82rem; font-weight: 750; 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: #ffffff; 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: rgba(255, 255, 255, 0.98); 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: rgba(255, 255, 255, 0.96); 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: 6px; padding: 0.28rem 0.52rem; background: #f8fbf9; } .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: #f8faf8; } .workbench-sidebar { padding: 0.58rem; } .workbench-sidebar nav { gap: 0.28rem; } .nav-item { min-height: 2.55rem; border-radius: 6px; 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: 6px; 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: 6px; } .status-tile-topline { gap: 0.28rem; } .status-tile strong { margin-top: 0.25rem; font-size: 0.84rem; line-height: 1.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: 999px; padding: 0.16rem 0.38rem; font-size: 0.62rem; } .workflow-guidance-panel { border-left: 0; background: #ffffff; } .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: #ffffff; } .data-selection-summary strong { font-size: 0.9rem; } .data-panel-form-block, .data-panel-list-block { border-radius: 6px; padding: 0.62rem; background: #ffffff; } .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: 6px; 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: 6px; padding: 0.65rem; background: #ffffff; } .dataset-card-active { background: #f8fbf9; 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: 5px; padding: 0.32rem 0.42rem; background: #f8fafc; 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: 6px; padding: 0.5rem 0.58rem; background: #ffffff; } .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: #eef4f1; } .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(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; } .layer-control-card, .map-status { border-radius: 6px; 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: 6px; 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: 6px; 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: 6px; 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: #f8fbf9; } .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: 5px; padding: 0.42rem 0.48rem; background: #ffffff; } .gis-test-run-grid span { display: block; color: var(--muted); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.055em; text-transform: uppercase; } .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 #fde68a; border-radius: 6px; padding: 0.46rem 0.58rem; background: #fffbeb; color: #713f12; font-size: 0.76rem; } .basemap-policy-notice strong { font-size: 0.72rem; letter-spacing: 0.045em; text-transform: uppercase; } .basemap-policy-notice span { color: #854d0e; } .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: 6px; padding: 0.4rem 0.44rem; background: #ffffff; } .guided-gis-steps > div.complete { border-color: rgba(15, 118, 110, 0.26); background: #f0fdfa; } .guided-gis-steps span { display: inline-grid; place-items: center; grid-row: span 2; width: 1.35rem; height: 1.35rem; border-radius: 999px; background: var(--panel-soft); color: var(--muted); font-size: 0.68rem; font-weight: 850; } .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: 6px; padding: 0.44rem 0.52rem; background: #f8fbf9; } .guided-gis-batch-status strong { overflow: hidden; color: #0f766e; font-size: 0.68rem; font-weight: 850; letter-spacing: 0.045em; text-overflow: ellipsis; text-transform: uppercase; 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: #ffffff; } .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: 5px; padding: 0.42rem 0.48rem; } .feature-extract-grid span { font-size: 0.62rem; } .feature-extract-grid strong { font-size: 0.82rem; } @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; } }