Spaces:
Sleeping
Sleeping
| /* TIDE — palette derived from the reference swatch: | |
| navy R65 G76 B135 · blue R156 G179 B212 · paper R236 G237 B235 · rose R175 G90 B118 */ | |
| :root { | |
| color-scheme: light; | |
| --navy: #414c87; | |
| --navy-deep: #333a68; | |
| --navy-soft: #5a659c; | |
| --blue: #9cb3d4; | |
| --blue-soft: #c7d4e8; | |
| --blue-wash: #eef2f8; | |
| --paper: #eceded; | |
| --paper-2: #f6f7f6; | |
| --white: #ffffff; | |
| --rose: #af5a76; | |
| --rose-deep: #954a63; | |
| --rose-soft: #e7cdd5; | |
| --rose-wash: #f7eef1; | |
| --ink: #232838; | |
| --muted: #6d7488; | |
| --border: #dcdfe6; | |
| --border-soft: #e7e9ee; | |
| --good: #3d7a5a; | |
| --good-wash: #e7f1eb; | |
| --watch: #a5711f; | |
| --watch-wash: #f6eedd; | |
| --shadow: 0 10px 30px rgba(51, 58, 104, 0.10); | |
| --radius: 12px; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| height: 100vh; | |
| overflow: hidden; | |
| background: var(--paper); | |
| color: var(--ink); | |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| font-size: 14px; | |
| line-height: 1.45; | |
| } | |
| /* ---------- header ---------- */ | |
| .topbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| height: 62px; | |
| padding: 0 22px; | |
| background: var(--navy); | |
| color: var(--white); | |
| border-bottom: 4px solid var(--rose); | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 12px; | |
| min-width: 0; | |
| } | |
| .brand h1 { | |
| margin: 0; | |
| font-size: 21px; | |
| font-weight: 780; | |
| letter-spacing: 0.14em; | |
| } | |
| .brand p { | |
| margin: 0; | |
| overflow: hidden; | |
| color: var(--blue-soft); | |
| font-size: 12.5px; | |
| font-weight: 500; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .status-pill { | |
| flex-shrink: 0; | |
| border-radius: 999px; | |
| padding: 6px 14px; | |
| background: rgba(255, 255, 255, 0.12); | |
| color: var(--white); | |
| font-size: 12px; | |
| font-weight: 700; | |
| letter-spacing: 0.02em; | |
| } | |
| .status-pill.error { | |
| background: var(--rose); | |
| } | |
| /* ---------- layout ---------- */ | |
| .workspace { | |
| display: grid; | |
| grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); | |
| gap: 16px; | |
| height: calc(100vh - 62px); | |
| padding: 16px; | |
| } | |
| .panel { | |
| display: flex; | |
| min-width: 0; | |
| min-height: 0; | |
| flex-direction: column; | |
| background: var(--white); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| overflow: hidden; | |
| } | |
| .panel-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 10px; | |
| flex-shrink: 0; | |
| min-height: 54px; | |
| padding: 12px 18px; | |
| border-bottom: 1px solid var(--border-soft); | |
| } | |
| .panel-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin: 0; | |
| color: var(--navy); | |
| font-size: 15px; | |
| font-weight: 750; | |
| } | |
| .accent-dot { | |
| width: 9px; | |
| height: 9px; | |
| border-radius: 50%; | |
| background: var(--rose); | |
| box-shadow: 0 0 0 4px var(--rose-wash); | |
| } | |
| .actions { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .panel-body { | |
| flex: 1; | |
| min-height: 0; | |
| overflow-y: auto; | |
| padding: 18px; | |
| } | |
| /* ---------- buttons ---------- */ | |
| button { | |
| min-height: 36px; | |
| border: 0; | |
| border-radius: 8px; | |
| padding: 8px 14px; | |
| background: var(--navy); | |
| color: var(--white); | |
| cursor: pointer; | |
| font: inherit; | |
| font-size: 13px; | |
| font-weight: 700; | |
| transition: filter 0.12s ease, background 0.12s ease; | |
| } | |
| button:hover { | |
| filter: brightness(1.08); | |
| } | |
| button.primary { | |
| width: 100%; | |
| min-height: 46px; | |
| margin-top: 6px; | |
| background: var(--rose); | |
| font-size: 15px; | |
| letter-spacing: 0.02em; | |
| } | |
| button.primary:hover { | |
| background: var(--rose-deep); | |
| filter: none; | |
| } | |
| button.secondary { | |
| background: var(--blue-wash); | |
| color: var(--navy); | |
| border: 1px solid var(--border); | |
| } | |
| button.secondary:hover { | |
| background: var(--blue-soft); | |
| filter: none; | |
| } | |
| /* ---------- form ---------- */ | |
| .section-title { | |
| margin: 22px 0 10px; | |
| padding-bottom: 6px; | |
| border-bottom: 1px solid var(--border-soft); | |
| color: var(--navy); | |
| font-size: 11.5px; | |
| font-weight: 780; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .section-title:first-child { | |
| margin-top: 0; | |
| } | |
| .grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 12px; | |
| } | |
| label { | |
| display: grid; | |
| gap: 5px; | |
| color: var(--muted); | |
| font-size: 11.5px; | |
| font-weight: 700; | |
| letter-spacing: 0.02em; | |
| } | |
| label.wide, | |
| label.full { | |
| grid-column: 1 / -1; | |
| } | |
| input, | |
| select, | |
| textarea { | |
| min-height: 38px; | |
| width: 100%; | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| background: var(--paper-2); | |
| color: var(--ink); | |
| padding: 8px 10px; | |
| font: inherit; | |
| font-size: 13px; | |
| font-weight: 500; | |
| } | |
| textarea { | |
| min-height: unset; | |
| resize: vertical; | |
| line-height: 1.5; | |
| } | |
| input:focus, | |
| select:focus, | |
| textarea:focus { | |
| outline: none; | |
| border-color: var(--navy-soft); | |
| background: var(--white); | |
| box-shadow: 0 0 0 3px rgba(90, 101, 156, 0.16); | |
| } | |
| .checks { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px 18px; | |
| margin: 16px 0 0; | |
| padding: 12px 14px; | |
| border: 1px solid var(--border-soft); | |
| border-radius: 8px; | |
| background: var(--blue-wash); | |
| } | |
| .checks legend { | |
| padding: 0 6px; | |
| color: var(--navy); | |
| font-size: 11px; | |
| font-weight: 780; | |
| text-transform: uppercase; | |
| } | |
| .checks label { | |
| flex-direction: row; | |
| align-items: center; | |
| gap: 8px; | |
| color: var(--ink); | |
| font-weight: 600; | |
| } | |
| .checks input { | |
| width: auto; | |
| min-height: auto; | |
| accent-color: var(--rose); | |
| } | |
| /* ---------- results: empty ---------- */ | |
| .empty { | |
| display: grid; | |
| place-items: center; | |
| height: 100%; | |
| padding: 40px; | |
| color: var(--muted); | |
| text-align: center; | |
| } | |
| .empty strong { | |
| display: block; | |
| margin-bottom: 6px; | |
| color: var(--navy); | |
| font-size: 16px; | |
| } | |
| .hidden { | |
| display: none ; | |
| } | |
| /* ---------- results: loading ---------- */ | |
| .loading { | |
| display: grid; | |
| place-items: center; | |
| gap: 6px; | |
| height: 100%; | |
| padding: 40px; | |
| text-align: center; | |
| } | |
| .spinner { | |
| width: 40px; | |
| height: 40px; | |
| margin-bottom: 8px; | |
| border: 4px solid var(--blue-soft); | |
| border-top-color: var(--rose); | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| .loading-text { | |
| margin: 0; | |
| color: var(--navy); | |
| font-size: 15px; | |
| font-weight: 750; | |
| } | |
| .loading-sub { | |
| margin: 0; | |
| max-width: 340px; | |
| color: var(--muted); | |
| font-size: 12px; | |
| } | |
| .btn-spinner { | |
| display: inline-block; | |
| width: 14px; | |
| height: 14px; | |
| margin-right: 9px; | |
| vertical-align: -2px; | |
| border: 2px solid rgba(255, 255, 255, 0.5); | |
| border-top-color: #fff; | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| button:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| filter: none; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .spinner, .btn-spinner { animation-duration: 1.6s; } | |
| } | |
| /* ---------- results: tier 1 headline ---------- */ | |
| .report { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 18px; | |
| } | |
| .tier-label { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin: 0 0 10px; | |
| color: var(--muted); | |
| font-size: 10.5px; | |
| font-weight: 800; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| } | |
| .tier-label::before { | |
| content: ""; | |
| width: 16px; | |
| height: 2px; | |
| background: var(--rose); | |
| } | |
| .headline-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 12px; | |
| } | |
| .stat { | |
| position: relative; | |
| padding: 16px 16px 14px; | |
| border: 1px solid var(--border-soft); | |
| border-left: 4px solid var(--muted); | |
| border-radius: 10px; | |
| background: var(--paper-2); | |
| } | |
| .stat .stat-label { | |
| color: var(--muted); | |
| font-size: 11.5px; | |
| font-weight: 700; | |
| } | |
| .stat .stat-value { | |
| margin: 4px 0 2px; | |
| color: var(--navy); | |
| font-size: 34px; | |
| font-weight: 800; | |
| line-height: 1.05; | |
| letter-spacing: -0.02em; | |
| } | |
| .stat .stat-sub { | |
| color: var(--muted); | |
| font-size: 11.5px; | |
| } | |
| .stat .chip { | |
| display: inline-block; | |
| margin-top: 8px; | |
| border-radius: 999px; | |
| padding: 2px 9px; | |
| background: var(--white); | |
| border: 1px solid var(--border); | |
| color: var(--navy); | |
| font-size: 10.5px; | |
| font-weight: 700; | |
| } | |
| .stat.tone-good { border-left-color: var(--good); } | |
| .stat.tone-good .stat-value { color: var(--good); } | |
| .stat.tone-watch { border-left-color: var(--watch); } | |
| .stat.tone-watch .stat-value { color: var(--watch); } | |
| .stat.tone-alert { border-left-color: var(--rose); background: var(--rose-wash); } | |
| .stat.tone-alert .stat-value { color: var(--rose-deep); } | |
| .stat.tone-neutral .stat-value { color: var(--navy-soft); } | |
| /* ---------- results: tier 2 summary + actions ---------- */ | |
| .summary-card { | |
| padding: 16px; | |
| border: 1px solid var(--border-soft); | |
| border-left: 4px solid var(--navy); | |
| border-radius: 10px; | |
| background: var(--blue-wash); | |
| } | |
| .summary-card p { | |
| margin: 0 0 8px; | |
| color: var(--ink); | |
| } | |
| .summary-card p:last-child { | |
| margin-bottom: 0; | |
| } | |
| .summary-card .takeaway { | |
| color: var(--navy-deep); | |
| font-size: 15px; | |
| font-weight: 750; | |
| line-height: 1.4; | |
| } | |
| .summary-card .summary-source { | |
| margin-top: 10px; | |
| color: var(--muted); | |
| font-size: 11px; | |
| font-style: italic; | |
| } | |
| .action-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .action { | |
| display: flex; | |
| gap: 11px; | |
| align-items: flex-start; | |
| padding: 11px 13px; | |
| border: 1px solid var(--border-soft); | |
| border-radius: 9px; | |
| background: var(--paper-2); | |
| } | |
| .action .marker { | |
| flex-shrink: 0; | |
| margin-top: 5px; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--muted); | |
| } | |
| .action .text { | |
| flex: 1; | |
| } | |
| .action.sev-review { border-left: 3px solid var(--rose); } | |
| .action.sev-review .marker { background: var(--rose); } | |
| .action.sev-completeness { border-left: 3px solid var(--blue); } | |
| .action.sev-completeness .marker { background: var(--blue); } | |
| .action.sev-ok { border-left: 3px solid var(--good); } | |
| .action.sev-ok .marker { background: var(--good); } | |
| .action .tag { | |
| flex-shrink: 0; | |
| color: var(--muted); | |
| font-size: 10px; | |
| font-weight: 800; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| } | |
| /* ---------- results: tier 3 detail ---------- */ | |
| .detail-block { | |
| margin-bottom: 16px; | |
| } | |
| .detail-block h3 { | |
| margin: 0 0 10px; | |
| color: var(--navy); | |
| font-size: 13.5px; | |
| font-weight: 750; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 12.5px; | |
| } | |
| th, | |
| td { | |
| padding: 8px 10px; | |
| text-align: left; | |
| border-bottom: 1px solid var(--border-soft); | |
| } | |
| th { | |
| color: var(--muted); | |
| font-size: 10.5px; | |
| font-weight: 800; | |
| letter-spacing: 0.03em; | |
| text-transform: uppercase; | |
| } | |
| td.num, | |
| th.num { | |
| text-align: right; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .compare-table .delta-high { color: var(--rose-deep); font-weight: 700; } | |
| .compare-table .delta-low { color: var(--navy-soft); } | |
| .table-scroll { | |
| overflow-x: auto; | |
| } | |
| .pub-yes { color: var(--good); font-weight: 700; } | |
| .pub-no { color: var(--rose-deep); font-weight: 700; } | |
| /* module / pipeline selection */ | |
| .module-item { | |
| display: grid; | |
| grid-template-columns: 1fr auto; | |
| gap: 2px 10px; | |
| align-items: center; | |
| padding: 10px 12px; | |
| border: 1px solid var(--border-soft); | |
| border-radius: 9px; | |
| margin-bottom: 8px; | |
| } | |
| .module-item strong { | |
| color: var(--navy); | |
| font-size: 12.5px; | |
| } | |
| .module-item .meta { | |
| color: var(--muted); | |
| font-size: 11px; | |
| } | |
| .module-item p { | |
| grid-column: 1 / -1; | |
| margin: 2px 0 0; | |
| color: var(--muted); | |
| font-size: 11.5px; | |
| } | |
| .sel-badge { | |
| border-radius: 999px; | |
| padding: 2px 9px; | |
| font-size: 10px; | |
| font-weight: 800; | |
| letter-spacing: 0.03em; | |
| text-transform: uppercase; | |
| } | |
| .sel-primary { background: var(--good-wash); color: var(--good); } | |
| .sel-superseded { background: var(--watch-wash); color: var(--watch); } | |
| .sel-skipped { background: var(--paper); color: var(--muted); } | |
| details.detail-block > summary { | |
| cursor: pointer; | |
| color: var(--navy); | |
| font-size: 13px; | |
| font-weight: 750; | |
| list-style: none; | |
| } | |
| details.detail-block > summary::-webkit-details-marker { | |
| display: none; | |
| } | |
| details.detail-block > summary::before { | |
| content: "\25B8 "; | |
| color: var(--rose); | |
| } | |
| details.detail-block[open] > summary::before { | |
| content: "\25BE "; | |
| } | |
| pre { | |
| margin: 10px 0 0; | |
| max-height: 320px; | |
| overflow: auto; | |
| padding: 14px; | |
| border-radius: 9px; | |
| background: var(--navy-deep); | |
| color: #e9edf6; | |
| font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; | |
| font-size: 12px; | |
| line-height: 1.5; | |
| } | |
| .provenance-note { | |
| margin-top: 10px; | |
| padding: 10px 12px; | |
| border-left: 3px solid var(--blue); | |
| border-radius: 6px; | |
| background: var(--blue-wash); | |
| color: var(--navy-deep); | |
| font-size: 11.5px; | |
| } | |
| @media (max-width: 960px) { | |
| body { overflow: auto; height: auto; } | |
| .workspace { grid-template-columns: 1fr; height: auto; } | |
| .panel { max-height: none; } | |
| .grid, .headline-grid { grid-template-columns: 1fr; } | |
| } | |