Spaces:
Sleeping
Sleeping
| /* βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ | |
| CLAIMS 2.0 Β· Redesigned styles.css | |
| Drop-in replacement β all original class names preserved | |
| βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap'); | |
| :root { | |
| /* backgrounds */ | |
| --bg: #080c18; | |
| --bg-elevated: #0d1424; | |
| --bg-2: #111827; | |
| /* accent / brand */ | |
| --accent: #3b82f6; | |
| --accent-soft: rgba(59,130,246,0.1); | |
| --accent-strong: rgba(59,130,246,0.3); | |
| /* text */ | |
| --text: #f1f5f9; | |
| --text-muted: #94a3b8; | |
| --text-dim: #64748b; | |
| /* borders */ | |
| --border-subtle: rgba(255,255,255,0.07); | |
| --border-mid: rgba(255,255,255,0.12); | |
| /* semantic: subclaim = teal */ | |
| --teal: #0d9488; | |
| --teal-bg: rgba(13,148,136,0.1); | |
| --teal-border: rgba(13,148,136,0.35); | |
| --teal-text: #5eead4; | |
| /* semantic: superclaim = amber */ | |
| --amber: #d97706; | |
| --amber-bg: rgba(217,119,6,0.1); | |
| --amber-border: rgba(217,119,6,0.35); | |
| --amber-text: #fcd34d; | |
| /* semantic: approved */ | |
| --green: #059669; | |
| --green-bg: rgba(5,150,105,0.12); | |
| --green-border: rgba(5,150,105,0.4); | |
| --green-text: #34d399; | |
| /* semantic: rejected / danger */ | |
| --danger: #dc2626; | |
| --danger-bg: rgba(220,38,38,0.1); | |
| --danger-border: rgba(220,38,38,0.35); | |
| --danger-text: #f87171; | |
| /* radii */ | |
| --radius-lg: 14px; | |
| --radius-md: 9px; | |
| /* shadows (lighter than before) */ | |
| --shadow-soft: 0 12px 32px rgba(0,0,0,0.5); | |
| --shadow-subtle: 0 6px 18px rgba(0,0,0,0.3); | |
| --transition-fast: 150ms ease-out; | |
| } | |
| *, *::before, *::after { box-sizing: border-box; } | |
| body { | |
| margin: 0; | |
| min-height: 100vh; | |
| font-family: 'DM Sans', system-ui, -apple-system, sans-serif; | |
| background: radial-gradient(circle at top, #0d1424 0, #06091a 40%, #000 100%); | |
| color: var(--text); | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* ββ APP SHELL βββββββββββββββββββββββββββββββββββββββββββ */ | |
| .app { | |
| max-width: 1120px; | |
| margin: 28px auto; | |
| padding: 20px; | |
| } | |
| /* ββ HEADER βββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| .app-header { | |
| background: var(--bg-elevated); | |
| border-radius: 20px; | |
| padding: 20px 24px 18px; | |
| border: 1px solid var(--border-mid); | |
| box-shadow: var(--shadow-soft); | |
| position: relative; | |
| overflow: hidden; | |
| margin-bottom: 20px; | |
| } | |
| /* rainbow accent line at very top */ | |
| .app-header::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, var(--teal), var(--accent), var(--amber)); | |
| pointer-events: none; | |
| } | |
| /* subtle glow */ | |
| .app-header::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: | |
| radial-gradient(circle at 0% 0%, rgba(96,165,250,0.12), transparent 55%), | |
| radial-gradient(circle at 90% 0%, rgba(129,140,248,0.12), transparent 55%); | |
| pointer-events: none; | |
| } | |
| .app-header h1, | |
| .app-header p { position: relative; z-index: 1; } | |
| .app-header h1 { | |
| margin: 0 0 5px; | |
| font-size: 22px; | |
| font-weight: 600; | |
| letter-spacing: -0.01em; | |
| } | |
| .app-header p { | |
| margin: 0; | |
| font-size: 13px; | |
| color: var(--text-muted); | |
| } | |
| /* stats chips row (add to your header HTML if desired) */ | |
| .stats-row { | |
| display: flex; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| margin-top: 14px; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .stat-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 4px 12px; | |
| border-radius: 999px; | |
| border: 1px solid var(--border-subtle); | |
| background: var(--bg-2); | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| } | |
| .stat-chip strong { | |
| font-weight: 600; | |
| color: var(--text); | |
| } | |
| .stat-dot { | |
| width: 6px; height: 6px; | |
| border-radius: 50%; | |
| flex-shrink: 0; | |
| } | |
| /* ββ INPUT SECTION ββββββββββββββββββββββββββββββββββββββββ */ | |
| .input-section { | |
| margin-top: 20px; | |
| padding: 16px; | |
| background: var(--bg-elevated); | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--border-subtle); | |
| box-shadow: var(--shadow-subtle); | |
| } | |
| .field-label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| font-weight: 500; | |
| color: var(--text-dim); | |
| } | |
| .text-input { | |
| width: 100%; | |
| resize: vertical; | |
| min-height: 160px; | |
| max-height: 340px; | |
| padding: 12px 14px; | |
| font-size: 14px; | |
| font-family: 'DM Sans', sans-serif; | |
| color: var(--text); | |
| background: rgba(0,0,0,0.3); | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-subtle); | |
| outline: none; | |
| transition: border-color var(--transition-fast), box-shadow var(--transition-fast); | |
| } | |
| .text-input:focus { | |
| border-color: rgba(59,130,246,0.5); | |
| box-shadow: 0 0 0 3px rgba(59,130,246,0.08); | |
| } | |
| .text-input::placeholder { color: var(--text-dim); } | |
| .controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-top: 12px; | |
| } | |
| .primary-btn { | |
| border: none; | |
| border-radius: 999px; | |
| padding: 8px 20px; | |
| font-size: 13px; | |
| font-family: 'DM Sans', sans-serif; | |
| font-weight: 500; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| cursor: pointer; | |
| background: linear-gradient(135deg, #2563eb, #4f46e5); | |
| color: #fff; | |
| box-shadow: 0 4px 18px rgba(37,99,235,0.4); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| transition: transform var(--transition-fast), filter var(--transition-fast); | |
| } | |
| .primary-btn:hover { | |
| transform: translateY(-1px); | |
| filter: brightness(1.08); | |
| } | |
| .primary-btn:active { | |
| transform: translateY(0); | |
| filter: brightness(0.97); | |
| } | |
| .primary-btn:disabled { | |
| opacity: 0.5; | |
| cursor: default; | |
| transform: none; | |
| } | |
| .status-text { | |
| font-size: 12px; | |
| color: var(--text-dim); | |
| } | |
| /* ββ RESULTS SECTION HEADER βββββββββββββββββββββββββββββββ */ | |
| .results-section { margin-top: 24px; } | |
| .results-section h2 { | |
| margin: 0 0 10px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| color: var(--text-dim); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .results-section h2::after { | |
| content: ''; | |
| flex: 1; | |
| height: 1px; | |
| background: var(--border-subtle); | |
| } | |
| /* ββ REVIEWER ROW βββββββββββββββββββββββββββββββββββββββββ */ | |
| .reviewer-row { | |
| display: grid; | |
| grid-template-columns: 140px 1fr; | |
| gap: 12px; | |
| align-items: center; | |
| margin-bottom: 12px; | |
| } | |
| .reviewer-row .field-label { margin: 0; } | |
| .reviewer-input { | |
| min-height: auto; | |
| max-height: none; | |
| height: 40px; | |
| resize: none; | |
| padding: 8px 12px; | |
| } | |
| /* ββ RESULTS CONTAINER ββββββββββββββββββββββββββββββββββββ */ | |
| .results-container { | |
| background: var(--bg-elevated); | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--border-subtle); | |
| box-shadow: var(--shadow-subtle); | |
| padding: 10px 14px 12px; | |
| max-height: 460px; | |
| overflow: auto; | |
| } | |
| #proposals-container.results-container { | |
| padding: 0; | |
| max-height: 400px; | |
| overflow: hidden; | |
| } | |
| /* ββ PENDING PROPOSAL CARD ββββββββββββββββββββββββββββββββ */ | |
| .pending-proposal-card { | |
| margin: 0; | |
| border-bottom: 1px solid var(--border-subtle); | |
| transition: background var(--transition-fast); | |
| } | |
| .pending-proposal-card:last-child { border-bottom: none; } | |
| .pending-proposal-card:hover { background: rgba(255,255,255,0.02); } | |
| .pending-proposal-top { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 12px 16px 0; | |
| } | |
| .pending-proposal-body { | |
| padding: 10px 16px 12px; | |
| font-size: 13px; | |
| line-height: 1.6; | |
| color: var(--text-muted); | |
| background: rgba(0,0,0,0.18); | |
| border-top: 1px solid var(--border-subtle); | |
| border-bottom: 1px solid var(--border-subtle); | |
| margin: 8px 0; | |
| } | |
| .pending-proposal-actions { | |
| display: flex; | |
| gap: 8px; | |
| padding: 0 16px 14px; | |
| } | |
| /* ββ ACTION BUTTONS ββββββββββββββββββββββββββββββββββββββ */ | |
| .action-btn { | |
| border-radius: 999px; | |
| padding: 7px 14px; | |
| font-size: 12px; | |
| font-family: 'DM Sans', sans-serif; | |
| font-weight: 500; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| cursor: pointer; | |
| transition: filter var(--transition-fast), transform var(--transition-fast); | |
| /* default neutral style */ | |
| border: 1px solid var(--border-mid); | |
| background: rgba(255,255,255,0.04); | |
| color: var(--text-muted); | |
| } | |
| .action-btn:hover { | |
| transform: translateY(-1px); | |
| filter: brightness(1.15); | |
| } | |
| .action-btn:active { transform: translateY(0); } | |
| .action-btn:disabled { | |
| opacity: 0.45; | |
| cursor: default; | |
| transform: none; | |
| } | |
| /* approve = green */ | |
| .action-btn:first-child { | |
| border-color: var(--green-border); | |
| background: var(--green-bg); | |
| color: var(--green-text); | |
| } | |
| /* reject = red */ | |
| .action-btn--danger { | |
| border-color: var(--danger-border); | |
| background: var(--danger-bg); | |
| color: var(--danger-text); | |
| } | |
| /* apply = blue */ | |
| .action-btn--accent { | |
| border-color: var(--accent-strong); | |
| background: var(--accent-soft); | |
| color: #93c5fd; | |
| margin-left: auto; | |
| } | |
| .placeholder { | |
| margin: 0; | |
| font-size: 13px; | |
| color: var(--text-dim); | |
| text-align: center; | |
| padding: 16px; | |
| } | |
| /* ββ RESULTS TABLE ββββββββββββββββββββββββββββββββββββββββ */ | |
| .results-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 13px; | |
| } | |
| .results-table thead { | |
| position: sticky; | |
| top: 0; | |
| z-index: 1; | |
| background: var(--bg-elevated); | |
| } | |
| .results-table th, | |
| .results-table td { | |
| padding: 9px 11px; | |
| vertical-align: top; | |
| text-align: left; | |
| } | |
| .results-table th { | |
| font-size: 10px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| color: var(--text-dim); | |
| border-bottom: 1px solid var(--border-subtle); | |
| } | |
| .sentence-cell { | |
| min-width: 220px; | |
| max-width: 320px; | |
| } | |
| /* ββ RESULTS LEDGER βββββββββββββββββββββββββββββββββββββββ */ | |
| .results-ledger { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| } | |
| /* ββ PARAGRAPH RESULT CARD ββββββββββββββββββββββββββββββββ */ | |
| .paragraph-result-card { | |
| margin: 0; | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--border-subtle); | |
| background: var(--bg-elevated); | |
| box-shadow: var(--shadow-subtle); | |
| overflow: hidden; | |
| transition: border-color var(--transition-fast); | |
| } | |
| .paragraph-result-card:hover { border-color: var(--border-mid); } | |
| .paragraph-result-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px 16px; | |
| background: rgba(255,255,255,0.02); | |
| border-bottom: 1px solid var(--border-subtle); | |
| } | |
| .paragraph-result-badge { | |
| flex-shrink: 0; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-width: 32px; | |
| height: 32px; | |
| padding: 0 8px; | |
| border-radius: 9px; | |
| font-size: 13px; | |
| font-weight: 600; | |
| font-family: 'DM Mono', monospace; | |
| color: #93c5fd; | |
| background: var(--accent-soft); | |
| border: 1px solid var(--accent-strong); | |
| } | |
| .paragraph-result-header-text { min-width: 0; flex: 1; } | |
| .paragraph-result-title { | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--text); | |
| } | |
| .paragraph-result-sub { | |
| margin-top: 3px; | |
| font-size: 11px; | |
| color: var(--text-dim); | |
| } | |
| .results-table--in-card { margin: 0; } | |
| .results-table--in-card thead { | |
| background: rgba(0,0,0,0.2); | |
| } | |
| .results-table--in-card th, | |
| .results-table--in-card td { | |
| padding: 10px 14px; | |
| } | |
| /* paragraph text column accent */ | |
| .paragraph-cell { | |
| border-left: 2px solid var(--accent-strong); | |
| padding-left: 12px; | |
| line-height: 1.6; | |
| color: var(--text-muted); | |
| font-size: 13px; | |
| } | |
| /* ββ CLAIM PILLS ββββββββββββββββββββββββββββββββββββββββββ */ | |
| .claims-list { | |
| margin: 0; padding: 0; | |
| list-style: none; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .claim-pill { padding: 0; } | |
| .claim-label { | |
| font-size: 10px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.09em; | |
| color: var(--text-dim); | |
| margin-bottom: 4px; | |
| } | |
| .claim-text { | |
| font-size: 13px; | |
| color: var(--text); | |
| line-height: 1.5; | |
| } | |
| .claim-meta { | |
| margin-top: 4px; | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| } | |
| /* ββ CLAIM ID BADGE βββββββββββββββββββββββββββββββββββββββ */ | |
| .claim-id { | |
| font-family: 'DM Mono', monospace; | |
| font-weight: 500; | |
| color: var(--text-muted); | |
| font-size: 11px; | |
| } | |
| /* Subclaim chip β teal */ | |
| .claim-type-tag { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 2px 8px; | |
| border-radius: 999px; | |
| font-size: 10px; | |
| font-weight: 600; | |
| letter-spacing: 0.07em; | |
| text-transform: uppercase; | |
| margin-bottom: 5px; | |
| } | |
| .claim-type-tag--sub { | |
| background: var(--teal-bg); | |
| border: 1px solid var(--teal-border); | |
| color: var(--teal-text); | |
| } | |
| .claim-type-tag--super { | |
| background: var(--amber-bg); | |
| border: 1px solid var(--amber-border); | |
| color: var(--amber-text); | |
| } | |
| /* ββ SIMILARITY BAR βββββββββββββββββββββββββββββββββββββββ */ | |
| .sim-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-top: 7px; | |
| } | |
| .sim-label { | |
| font-size: 10px; | |
| color: var(--text-dim); | |
| white-space: nowrap; | |
| } | |
| .sim-bar-wrap { | |
| flex: 1; | |
| height: 3px; | |
| background: rgba(255,255,255,0.06); | |
| border-radius: 99px; | |
| overflow: hidden; | |
| } | |
| .sim-bar-fill { | |
| height: 100%; | |
| border-radius: 99px; | |
| background: linear-gradient(90deg, var(--teal), #22d3ee); | |
| } | |
| .sim-bar-fill--amber { | |
| background: linear-gradient(90deg, var(--amber), #fbbf24); | |
| } | |
| .sim-val { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 11px; | |
| font-weight: 500; | |
| color: var(--text-muted); | |
| min-width: 30px; | |
| text-align: right; | |
| } | |
| /* ββ TOPIC CHIPS ββββββββββββββββββββββββββββββββββββββββββ */ | |
| .topic-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 2px 8px; | |
| border-radius: 999px; | |
| font-size: 10px; | |
| font-weight: 600; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| margin-top: 5px; | |
| } | |
| .topic-chip--none { | |
| background: var(--danger-bg); | |
| border: 1px solid var(--danger-border); | |
| color: var(--danger-text); | |
| } | |
| .topic-chip--match { | |
| background: var(--green-bg); | |
| border: 1px solid var(--green-border); | |
| color: var(--green-text); | |
| } | |
| /* ββ COLLAPSE / TAXONOMY WIDGETS βββββββββββββββββββββββββ */ | |
| .collapse-block { margin-top: 8px; } | |
| .collapse-badge { | |
| display: inline-block; | |
| margin-bottom: 4px; | |
| padding: 2px 9px; | |
| border-radius: 999px; | |
| font-size: 10px; | |
| font-weight: 600; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| color: var(--amber-text); | |
| background: var(--amber-bg); | |
| border: 1px solid var(--amber-border); | |
| } | |
| .collapse-badge-quiet { | |
| color: var(--text-dim); | |
| background: rgba(51,65,85,0.4); | |
| border-color: rgba(100,116,139,0.5); | |
| font-weight: 500; | |
| } | |
| .collapse-meta { display: block; line-height: 1.45; } | |
| .collapse-topic-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; } | |
| .collapse-peers { font-size: 12px; color: var(--text); } | |
| .collapse-peers .claim-id { margin-right: 4px; } | |
| .collapse-more { color: var(--text-dim); font-size: 11px; } | |
| .collapse-meta code { font-size: 10px; color: #a5b4fc; font-family: 'DM Mono', monospace; } | |
| .hierarchy-confidence { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| margin-bottom: 8px; | |
| } | |
| .hierarchy-confidence strong { | |
| color: var(--teal-text); | |
| font-weight: 600; | |
| } | |
| .collapse-peer-superclaims { | |
| margin-top: 8px; | |
| padding: 10px 12px 8px; | |
| border-radius: var(--radius-md); | |
| background: rgba(0,0,0,0.25); | |
| border: 1px solid var(--border-subtle); | |
| } | |
| .collapse-peer-superclaims-title { | |
| font-size: 10px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.07em; | |
| color: var(--amber-text); | |
| margin-bottom: 4px; | |
| } | |
| .collapse-peer-superclaims-hint { | |
| margin: 0 0 8px; | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| line-height: 1.4; | |
| } | |
| .collapse-sc-target-list { margin: 0; padding-left: 18px; color: var(--text-muted); } | |
| .collapse-sc-target-item { margin-bottom: 10px; } | |
| .collapse-sc-target-item:last-child { margin-bottom: 4px; } | |
| .collapse-sc-target-line { font-size: 12px; margin-bottom: 2px; } | |
| .collapse-sc-target-text { font-size: 11px; color: #cbd5e1; line-height: 1.35; margin-top: 2px; } | |
| .collapse-sc-target-meta { margin-top: 4px; font-size: 10px; color: var(--text-dim); } | |
| .collapse-peer-superclaims-stale { | |
| margin: 0 0 8px; | |
| font-size: 11px; | |
| color: #fcd34d; | |
| line-height: 1.4; | |
| } | |
| .collapse-peer-superclaims-stale code { | |
| font-size: 10px; | |
| color: #fde68a; | |
| font-family: 'DM Mono', monospace; | |
| } | |
| .collapse-stale-cluster-msg { | |
| margin-top: 8px; | |
| padding: 10px; | |
| font-size: 11px; | |
| line-height: 1.45; | |
| color: #fecaca; | |
| background: rgba(127,29,29,0.18); | |
| border: 1px solid var(--danger-border); | |
| border-radius: var(--radius-md); | |
| } | |
| .collapse-stale-cluster-msg code { | |
| font-size: 10px; | |
| color: #fca5a5; | |
| font-family: 'DM Mono', monospace; | |
| } | |
| .collapse-mapping-badge { | |
| display: inline-block; | |
| margin-left: 6px; | |
| padding: 1px 6px; | |
| border-radius: 4px; | |
| font-size: 9px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| color: var(--green-text); | |
| background: var(--green-bg); | |
| border: 1px solid var(--green-border); | |
| vertical-align: middle; | |
| } | |
| .collapse-peer-superclaims--empty { | |
| font-size: 11px; | |
| color: var(--text-dim); | |
| margin-top: 6px; | |
| } | |
| /* ββ MISC βββββββββββββββββββββββββββββββββββββββββββββββββ */ | |
| .sentence-chip { | |
| display: inline-flex; | |
| padding: 5px 9px; | |
| border-radius: 999px; | |
| background: rgba(0,0,0,0.3); | |
| border: 1px solid var(--border-subtle); | |
| } | |
| .sentence-chip span { font-size: 12px; color: var(--text-muted); } | |
| .no-match { font-size: 12px; color: var(--text-dim); } | |
| .no-match strong { color: var(--text-muted); } | |
| .error-text { color: var(--danger-text); } | |
| .proposal-empty-hint { | |
| margin-top: 0.75rem; | |
| max-width: 52rem; | |
| font-size: 0.875rem; | |
| line-height: 1.45; | |
| opacity: 0.85; | |
| } | |
| .proposal-empty-hint a { color: inherit; text-decoration: underline; } | |
| .proposal-empty-hint code { | |
| font-size: 0.83em; | |
| font-family: 'DM Mono', monospace; | |
| } | |
| /* ββ RESPONSIVE βββββββββββββββββββββββββββββββββββββββββββ */ | |
| @media (max-width: 768px) { | |
| .app { margin: 14px auto; padding: 12px; } | |
| .app-header { border-radius: 16px; padding: 16px 14px; } | |
| .results-ledger { gap: 10px; } | |
| .paragraph-result-header { padding: 10px 12px; } | |
| .results-table--in-card { display: table; width: 100%; } | |
| .results-table--in-card thead { display: table-header-group; } | |
| .results-table--in-card tbody { display: table-row-group; } | |
| .results-table--in-card tr { display: table-row; } | |
| .results-table--in-card th, | |
| .results-table--in-card td { display: table-cell; padding: 8px 10px; } | |
| .results-table--in-card tbody tr { border-bottom: 1px solid var(--border-subtle); } | |
| .results-table--in-card tbody tr:last-child { border-bottom: none; } | |
| } | |