Spaces:
Sleeping
Sleeping
| /* ───────────────────────────────────────────────────────────────────── | |
| * quality.css — styles for the shared quality panels | |
| * (InstructionQualityPanel + RagQualityPanel) | |
| * | |
| * These panels render on BOTH the admin Instructions tab and the | |
| * analytics Content tab. The classes here live in their own file so | |
| * neither page has to pull in the other's stylesheet. | |
| * | |
| * What belongs here: | |
| * .iq-* — quality-panel layout primitives | |
| * .problem-signal — colored pill for signal names inside the panels | |
| * .version-chip — strategy version label | |
| * .tier-chip, .tier-* — severity badges (CRITICAL/HIGH/MEDIUM/LOW/EXPLORING) | |
| * .col-legend — per-field documentation block used by these panels | |
| * (also used by admin tabs — duplicated there for now) | |
| * ──────────────────────────────────────────────────────────────────── */ | |
| /* ── Panel shell ─────────────────────────────────────────────────────── */ | |
| .iq-panel { | |
| background: var(--surface); | |
| border-left: 3px solid var(--primary); | |
| border-radius: 4px; | |
| padding: 12px 16px; | |
| } | |
| .iq-head { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 18px; | |
| margin-bottom: 6px; | |
| } | |
| .iq-head h2 { | |
| margin: 0 0 4px 0; | |
| } | |
| .iq-controls { | |
| display: flex; | |
| align-items: flex-end; | |
| gap: 8px; | |
| } | |
| .iq-controls label { | |
| font-size: 11.5px; | |
| color: var(--text-secondary); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| } | |
| .iq-summary { | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| padding: 8px 0 12px; | |
| border-bottom: 1px dashed var(--border); | |
| margin-bottom: 12px; | |
| } | |
| .iq-summary .dot-sep { | |
| color: var(--muted); | |
| } | |
| /* ── Cards ───────────────────────────────────────────────────────────── */ | |
| .iq-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .iq-card { | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| background: var(--surface); | |
| transition: border-color 0.15s, box-shadow 0.15s; | |
| } | |
| .iq-card:hover { | |
| border-color: var(--border-strong); | |
| } | |
| .iq-card.open { | |
| border-color: var(--primary); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .iq-card-head { | |
| display: grid; | |
| grid-template-columns: auto auto auto auto auto 1fr auto; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px 14px; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .iq-card-head:hover { | |
| background: var(--bg); | |
| } | |
| .iq-rate { | |
| font-size: 13.5px; | |
| color: var(--text); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .iq-totals { | |
| color: var(--muted); | |
| font-size: 12px; | |
| } | |
| .iq-dominant { | |
| font-size: 11.5px; | |
| color: var(--text-secondary); | |
| } | |
| .iq-dominant code { | |
| background: var(--code-bg); | |
| padding: 1px 6px; | |
| border-radius: 4px; | |
| font-size: 11px; | |
| } | |
| .iq-expand { | |
| color: var(--muted); | |
| font-size: 12px; | |
| } | |
| .iq-card-body { | |
| padding: 0 14px 14px; | |
| border-top: 1px dashed var(--border); | |
| } | |
| /* ── Failure chips and signal pills ─────────────────────────────────── */ | |
| .iq-failures-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| margin: 10px 0 14px; | |
| } | |
| .iq-failure-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 4px 10px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-pill); | |
| background: var(--bg); | |
| font-size: 11.5px; | |
| cursor: help; | |
| } | |
| .iq-failure-chip.active { | |
| background: #fdf3da; | |
| border-color: #e8c879; | |
| } | |
| .iq-failure-count { | |
| font-variant-numeric: tabular-nums; | |
| color: var(--text); | |
| } | |
| .problem-signal { | |
| background: var(--code-bg); | |
| padding: 1px 6px; | |
| border-radius: 3px; | |
| font-size: 11px; | |
| color: var(--text); | |
| margin-right: 3px; | |
| } | |
| /* ── Sample-query table ─────────────────────────────────────────────── */ | |
| .iq-samples { | |
| margin-top: 8px; | |
| } | |
| .iq-samples-head { | |
| font-size: 11.5px; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| font-weight: 600; | |
| margin-bottom: 6px; | |
| } | |
| .iq-samples-tbl { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 12px; | |
| } | |
| .iq-samples-tbl th { | |
| text-align: left; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| padding: 4px 8px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .iq-samples-tbl td { | |
| padding: 4px 8px; | |
| border-bottom: 1px solid var(--border); | |
| vertical-align: top; | |
| } | |
| .iq-query { | |
| color: var(--text); | |
| font-style: italic; | |
| } | |
| .iq-action-hint { | |
| background: var(--accent-soft); | |
| border-left: 3px solid var(--primary); | |
| padding: 8px 12px; | |
| margin-top: 14px; | |
| border-radius: 4px; | |
| font-size: 12.5px; | |
| color: var(--text); | |
| line-height: 1.55; | |
| } | |
| /* ── Strategy version label (used in InstructionQualityPanel) ──────── */ | |
| .version-chip { | |
| background: var(--code-bg); | |
| color: var(--muted); | |
| padding: 1px 6px; | |
| border-radius: 4px; | |
| font-size: 11.5px; | |
| } | |
| /* ── Tier accent strip on the left of each card ────────────────────── */ | |
| .iq-tier-critical { border-left: 4px solid #b03a3a; } | |
| .iq-tier-high { border-left: 4px solid #d4862a; } | |
| .iq-tier-medium { border-left: 4px solid #d4a017; } | |
| .iq-tier-low { border-left: 4px solid #5fa86b; } | |
| .iq-tier-exploring { border-left: 4px solid var(--muted); } | |
| /* ── Tier severity chip (CRITICAL/HIGH/MEDIUM/LOW/EXPLORING) ───────── */ | |
| .tier-chip { | |
| display: inline-block; | |
| padding: 2px 8px; | |
| border-radius: var(--radius-sm); | |
| font-size: 10.5px; | |
| font-weight: 700; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| white-space: nowrap; | |
| } | |
| .tier-chip.tier-critical { background: #efd2d2; color: #5a1a1a; } | |
| .tier-chip.tier-high { background: #f5dfc5; color: #6b4012; } | |
| .tier-chip.tier-medium { background: #fbf0d6; color: #6e530c; } | |
| .tier-chip.tier-low { background: #d8efd2; color: #2c5a1a; } | |
| .tier-chip.tier-exploring { background: var(--secondary); color: var(--muted); } | |
| /* ── Per-field documentation block — used by both admin tabs and | |
| * quality panels. Duplicated from admin.css so this stylesheet | |
| * can stand alone without depending on admin.css being loaded. | |
| * ──────────────────────────────────────────────────────────────────── */ | |
| .col-legend { | |
| list-style: none; | |
| margin: 8px 0 12px; | |
| padding: 10px 14px; | |
| background: var(--accent-soft); | |
| border-left: 3px solid var(--primary); | |
| border-radius: 4px; | |
| font-size: 12px; | |
| line-height: 1.55; | |
| color: var(--text); | |
| } | |
| .col-legend li { | |
| margin: 0; | |
| padding: 2px 0; | |
| } | |
| .col-legend li strong { | |
| color: var(--text); | |
| font-weight: 700; | |
| } | |
| .col-legend li em { | |
| font-style: italic; | |
| color: var(--text-secondary); | |
| font-weight: 400; | |
| } | |