| #org-performance { --history-muted: var(--text-secondary); } |
| .history-chart { margin-top: 32px; } |
| .history-chart h3 { font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -.3px; color: var(--text-secondary); margin-bottom: 18px; } |
| .history-chart:first-of-type { margin-top: 0; } |
| body.variant-seven #org-performance .history-chart + .history-chart { padding-top: 28px; border-top: 1px solid var(--border-subtle); } |
| .history-note { color: var(--history-muted); font-size: 12px; line-height: 1.7; margin: 12px 0; } |
| .history-legend { margin-top: 18px; } |
| .history-swatch { flex: 0 0 auto; } |
| .history-frontier-plot { position: relative; height: clamp(300px, 38vw, 430px); } |
| .history-frontier-plot canvas { display: block; } |
| .history-frontier-toggle[aria-pressed="false"] { opacity: .65; } |
| .history-frontier-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; } |
| #history-dominance { --category-width: 56px; --category-gap: 12px; } |
| .history-dominance-rows { position: relative; } |
| .history-dominance-rows::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--category-width) + var(--category-gap) / 2); width: 1px; background: var(--border-strong); } |
| .history-dominance-row { display: grid; grid-template-columns: var(--category-width) minmax(0, 1fr); align-items: center; gap: var(--category-gap); margin: 14px 0; } |
| .history-category-label { font-family: 'Space Mono', monospace; color: var(--history-muted); font-size: 12px; text-align: center; align-self: end; margin-bottom: 24px; } |
| .history-dominance-track { position: relative; height: 84px; } |
| .history-dominance-segment { position: absolute; top: 0; bottom: 0; padding: 0; text-decoration: none; color: var(--text); border-radius: 3px; } |
| .history-dominance-segment::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 62px; background: color-mix(in srgb, var(--org-color) 70%, #fff); border-radius: 3px; } |
| .history-dominance-segment:hover, .history-dominance-segment:focus-visible { color: var(--text); z-index: 1; } |
| .history-dominance-segment:hover::after, .history-dominance-segment:focus-visible::after { background: color-mix(in srgb, var(--org-color) 55%, #fff); } |
| .history-dominance-segment:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } |
| .history-segment-model { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } |
| .history-segment-model { position: absolute; left: 0; right: 0; bottom: 66px; color: #d6d6da; font-size: 13px; font-weight: 500; line-height: 18px; padding-right: 5px; } |
| .history-timeline-axis { margin-left: calc(var(--category-width) + var(--category-gap)); } |
| .history-date-axis { position: relative; height: 24px; color: var(--text-muted); font: 10px/1.6 'Space Mono', monospace; } |
| .history-tick { position: absolute; white-space: nowrap; transform: translateX(-50%); } |
| .history-tick:first-child { transform: none; } |
| .history-tick:last-child { transform: translateX(-100%); } |
| .history-lab-row { display: grid; grid-template-columns: minmax(125px, 180px) minmax(0, 1fr) 56px; gap: 14px; align-items: center; margin: 16px 0; } |
| .history-lab-label { color: #d6d6da; font-size: 14px; font-weight: 500; text-align: right; overflow-wrap: anywhere; text-decoration: none; transition: color .15s; } |
| .history-lab-label:hover { color: var(--accent); } |
| .history-lab-track { height: 26px; display: flex; position: relative; background-image: linear-gradient(to right, var(--border) 1px, transparent 1px); background-size: 20% 100%; } |
| .history-lab-segment, .history-model-segment { background: color-mix(in srgb, var(--history-bar-color) 82%, transparent); border: 1px solid var(--history-bar-color); } |
| .history-lab-segment { height: 100%; flex: 0 0 auto; border-radius: 4px; } |
| .history-day-total { color: var(--text); font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: -.2px; white-space: nowrap; } |
| .history-lab-total { position: absolute; top: 50%; transform: translateY(-50%); margin-left: 9px; } |
| .history-lab-axis { margin: 8px 70px 0 194px; } |
| .history-model-row { margin: 16px 0; } |
| .history-model-label { display: block; color: #d6d6da; font-size: 14px; font-weight: 500; line-height: 18px; text-decoration: none; overflow-wrap: anywhere; transition: color .15s; } |
| .history-model-label:hover { color: var(--accent); } |
| .history-model-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: 14px; margin-top: 4px; } |
| .history-model-track { position: relative; display: flex; height: 24px; background-image: linear-gradient(to right, var(--border) 1px, transparent 1px); background-size: 20% 100%; } |
| .history-model-segment { height: 100%; flex: 0 0 auto; border-radius: 4px; } |
| .history-model-axis { margin: 8px 70px 0 0; } |
| .history-tooltip { position: fixed; z-index: 1000; width: min(330px, calc(100vw - 24px)); padding: 10px; pointer-events: none; color: var(--text-secondary); background: var(--chart-tooltip-background); border: 1px solid var(--chart-tooltip-border); border-radius: 6px; font-size: 12px; line-height: 1.6; } |
| .history-tooltip[hidden] { display: none; } |
| .history-tooltip-name { display: block; color: var(--text); font-size: 12px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; } |
| .history-tooltip-sub { color: var(--text-secondary); display: block; margin-top: 4px; } |
| .history-tooltip dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 16px; margin: 12px 0 0; } |
| .history-tooltip dt { color: var(--text-secondary); } |
| .history-tooltip dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-family: 'Space Mono', monospace; font-size: 11px; } |
| .history-method { margin-top: 24px; color: var(--history-muted); font-size: 12px; line-height: 1.8; } |
| .history-method summary { cursor: pointer; } |
| .history-method p { margin-top: 10px; max-width: 850px; } |
| .history-empty { color: var(--text-secondary); padding: 20px 0; } |
| @media (max-width: 700px) { |
| #history-dominance { --category-width: 52px; --category-gap: 12px; } |
| .history-category-label { font-size: 11px; } |
| .history-dominance-track { height: 62px; } |
| .history-segment-model { display: none; } |
| .history-lab-row { grid-template-columns: 100px minmax(0, 1fr) 48px; gap: 8px; } |
| .history-lab-label { font-size: 12px; } |
| .history-lab-axis { margin-left: 108px; margin-right: 56px; } |
| .history-model-bar-row { grid-template-columns: minmax(0, 1fr) 48px; gap: 8px; } |
| .history-model-axis { margin-right: 56px; } |
| .history-date-axis .history-tick:nth-child(2n):not(:last-child) { display: none; } |
| } |
|
|
