daveadmin
38683cffc0
- Add sticky navy nav with logo-header.webp, Legal Tools badge, lang switcher, red CTA - Replace showcase-hero with full-bleed dark hero (Crimson Pro, IBM Plex Mono, stat pills) - Redesign tool cards: 3-col grid, 178px illustrated SVG art per card (7 unique illustrations) - Add lt-trust 3-col strip and lt-access navy gate panel - Rebuild footer with 3-col navy layout matching main site - Add Crimson Pro / Roboto / IBM Plex Mono Google Fonts via <link> + @import - CSS: new lt-* variables, all new landing component styles appended to tools.css Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
5014 lines
101 KiB
CSS
5014 lines
101 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600;700&family=Roboto:wght@300;400;500;700&family=IBM+Plex+Mono:wght@400;700&display=swap');
|
||
|
||
:root {
|
||
--bg: #f7f8fb;
|
||
--panel: #ffffff;
|
||
--ink: #1b2330;
|
||
--muted: #667085;
|
||
--line: #d8dde7;
|
||
--teal: #0f766e;
|
||
--teal-dark: #115e59;
|
||
--coral: #c2410c;
|
||
--amber: #b7791f;
|
||
--soft-teal: #e7f5f2;
|
||
--soft-coral: #fff0e8;
|
||
--shadow: 0 18px 45px rgba(25, 35, 52, 0.10);
|
||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
}
|
||
|
||
/* Do Better Norge v1 workbench */
|
||
:root {
|
||
--dbn-paper: #f6f2ea;
|
||
--dbn-ink: #16130f;
|
||
--dbn-blue: #00205b;
|
||
--dbn-red: #ba0c2f;
|
||
--dbn-teal: #0f766e;
|
||
--dbn-line: rgba(22, 19, 15, 0.16);
|
||
}
|
||
|
||
body {
|
||
background:
|
||
linear-gradient(90deg, rgba(0, 32, 91, 0.055) 1px, transparent 1px),
|
||
linear-gradient(180deg, rgba(186, 12, 47, 0.04), transparent 38rem),
|
||
var(--dbn-paper);
|
||
background-size: 44px 44px, auto, auto;
|
||
}
|
||
|
||
.app-shell {
|
||
padding: 18px clamp(14px, 2vw, 28px) 34px;
|
||
}
|
||
|
||
.topbar {
|
||
align-items: flex-start;
|
||
border-bottom: 2px solid rgba(22, 19, 15, 0.14);
|
||
padding-bottom: 16px;
|
||
}
|
||
|
||
.topbar h1 {
|
||
color: var(--dbn-ink);
|
||
font-size: clamp(1.8rem, 2.8vw, 3.2rem);
|
||
line-height: 0.95;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.title-mark {
|
||
color: var(--dbn-red);
|
||
}
|
||
|
||
.case-no {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-top: 9px;
|
||
color: #5d574e;
|
||
font-size: 0.86rem;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.case-sep {
|
||
opacity: 0.45;
|
||
}
|
||
|
||
.pulse {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: var(--dbn-teal);
|
||
box-shadow: 0 0 0 5px rgba(15, 118, 110, 0.12);
|
||
}
|
||
|
||
.shell-lang-switcher {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 4px;
|
||
border: 1px solid var(--dbn-line);
|
||
border-radius: 8px;
|
||
background: rgba(255, 255, 255, 0.64);
|
||
}
|
||
|
||
.shell-lang-switcher a {
|
||
display: inline-flex;
|
||
min-width: 36px;
|
||
min-height: 30px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 6px;
|
||
color: var(--dbn-blue);
|
||
font-size: 0.78rem;
|
||
font-weight: 900;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.shell-lang-switcher a.is-active,
|
||
.shell-lang-switcher a:hover {
|
||
background: var(--dbn-blue);
|
||
color: #fff;
|
||
}
|
||
|
||
.manifesto {
|
||
max-width: 1500px;
|
||
margin: 0 auto 12px;
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
|
||
gap: 14px;
|
||
border: 1px solid rgba(22, 19, 15, 0.18);
|
||
border-radius: 8px;
|
||
background:
|
||
linear-gradient(135deg, rgba(186, 12, 47, 0.14), transparent 44%),
|
||
linear-gradient(90deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.42));
|
||
overflow: hidden;
|
||
}
|
||
|
||
.manifesto-copy {
|
||
padding: clamp(20px, 3vw, 36px);
|
||
}
|
||
|
||
.manifesto-eyebrow {
|
||
margin: 0 0 8px;
|
||
color: var(--dbn-red);
|
||
font-size: 0.78rem;
|
||
font-weight: 900;
|
||
letter-spacing: 0;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.manifesto-title {
|
||
max-width: 780px;
|
||
margin: 0;
|
||
color: var(--dbn-ink);
|
||
font-size: clamp(2rem, 5vw, 5.4rem);
|
||
line-height: 0.92;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.manifesto-sub {
|
||
max-width: 760px;
|
||
margin: 14px 0 0;
|
||
color: #3f3932;
|
||
font-size: clamp(1rem, 1.3vw, 1.18rem);
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.manifesto-stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
border-left: 1px solid rgba(22, 19, 15, 0.16);
|
||
}
|
||
|
||
.manifesto-stat {
|
||
min-height: 120px;
|
||
padding: 20px;
|
||
border: 0 solid rgba(22, 19, 15, 0.13);
|
||
border-bottom-width: 1px;
|
||
border-right-width: 1px;
|
||
background: rgba(255, 255, 255, 0.38);
|
||
}
|
||
|
||
.manifesto-stat strong {
|
||
display: block;
|
||
color: var(--dbn-blue);
|
||
font-size: clamp(1.8rem, 3vw, 3.2rem);
|
||
line-height: 1;
|
||
}
|
||
|
||
.manifesto-stat span {
|
||
display: block;
|
||
margin-top: 8px;
|
||
color: #4b453d;
|
||
font-size: 0.82rem;
|
||
font-weight: 800;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.workspace {
|
||
grid-template-columns: 204px minmax(0, 1fr) 370px;
|
||
}
|
||
|
||
.tool-rail,
|
||
.tool-panel,
|
||
.reasoning-panel,
|
||
.gate-panel,
|
||
.cap-card,
|
||
.dashboard-tool-card {
|
||
border-color: rgba(22, 19, 15, 0.15);
|
||
box-shadow: 0 18px 45px rgba(22, 19, 15, 0.08);
|
||
}
|
||
|
||
.tool-tab {
|
||
position: relative;
|
||
min-height: 74px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.tool-tab em {
|
||
position: absolute;
|
||
right: 10px;
|
||
bottom: 8px;
|
||
color: rgba(0, 32, 91, 0.22);
|
||
font-size: 1.25rem;
|
||
font-style: normal;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.tool-tab.is-active {
|
||
background: #fdf8ef;
|
||
border-color: rgba(186, 12, 47, 0.28);
|
||
color: var(--dbn-ink);
|
||
}
|
||
|
||
.tool-tab.is-active::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0 auto 0 0;
|
||
width: 4px;
|
||
background: var(--dbn-red);
|
||
}
|
||
|
||
.dashboard-shell .disclaimer {
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.tool-dashboard-grid {
|
||
max-width: 1500px;
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 14px;
|
||
}
|
||
|
||
.dashboard-tool-card {
|
||
position: relative;
|
||
min-height: 250px;
|
||
padding: 22px;
|
||
border: 1px solid var(--dbn-line);
|
||
border-radius: 8px;
|
||
background: rgba(255, 255, 255, 0.82);
|
||
color: var(--dbn-ink);
|
||
text-decoration: none;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.dashboard-tool-card:hover {
|
||
transform: translateY(-2px);
|
||
border-color: rgba(186, 12, 47, 0.36);
|
||
}
|
||
|
||
.dashboard-tool-card__icon {
|
||
color: rgba(0, 32, 91, 0.14);
|
||
font-size: 4.8rem;
|
||
font-weight: 900;
|
||
line-height: 1;
|
||
}
|
||
|
||
.dashboard-tool-card__badge {
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 18px;
|
||
color: var(--dbn-red);
|
||
font-size: 0.75rem;
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.dashboard-tool-card h2 {
|
||
margin: 12px 0 8px;
|
||
font-size: 1.45rem;
|
||
}
|
||
|
||
.dashboard-tool-card p {
|
||
color: #514b43;
|
||
line-height: 1.48;
|
||
}
|
||
|
||
.dashboard-tool-card strong {
|
||
position: absolute;
|
||
bottom: 20px;
|
||
color: var(--dbn-blue);
|
||
}
|
||
|
||
.dbn-public-tools {
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.showcase-header {
|
||
background: rgba(255, 255, 255, 0.72);
|
||
border-bottom: 1px solid var(--dbn-line);
|
||
}
|
||
|
||
.showcase-header-inner {
|
||
align-items: flex-start;
|
||
padding-top: 22px;
|
||
padding-bottom: 22px;
|
||
}
|
||
|
||
.showcase-header-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-end;
|
||
gap: 10px;
|
||
}
|
||
|
||
.showcase-title {
|
||
max-width: 980px;
|
||
color: var(--dbn-ink);
|
||
font-size: clamp(2.4rem, 6vw, 6.4rem);
|
||
line-height: 0.9;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.showcase-tagline {
|
||
max-width: 780px;
|
||
color: #403a33;
|
||
font-size: clamp(1.05rem, 1.6vw, 1.32rem);
|
||
}
|
||
|
||
.landing-hero {
|
||
max-width: 1500px;
|
||
margin: 18px auto;
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
|
||
gap: 14px;
|
||
padding: clamp(22px, 4vw, 54px);
|
||
border: 1px solid var(--dbn-line);
|
||
border-radius: 8px;
|
||
background:
|
||
linear-gradient(135deg, rgba(0, 32, 91, 0.12), transparent 34%),
|
||
linear-gradient(315deg, rgba(186, 12, 47, 0.16), transparent 40%),
|
||
#fffaf2;
|
||
}
|
||
|
||
.landing-hero h2 {
|
||
max-width: 840px;
|
||
margin: 0;
|
||
font-size: clamp(2rem, 5vw, 5.3rem);
|
||
line-height: 0.92;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.landing-hero p {
|
||
max-width: 740px;
|
||
color: #403a33;
|
||
font-size: 1.08rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.landing-hero__stats {
|
||
display: grid;
|
||
gap: 10px;
|
||
align-content: center;
|
||
}
|
||
|
||
.landing-hero__stats div {
|
||
padding: 18px;
|
||
border: 1px solid rgba(0, 32, 91, 0.16);
|
||
border-radius: 8px;
|
||
background: rgba(255, 255, 255, 0.7);
|
||
}
|
||
|
||
.landing-hero__stats strong {
|
||
display: block;
|
||
color: var(--dbn-blue);
|
||
font-size: 2.5rem;
|
||
}
|
||
|
||
.landing-hero__stats span {
|
||
color: #514b43;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.cap-grid--six {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
|
||
.evidence-inner {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
|
||
.evidence-inner article {
|
||
padding: 20px;
|
||
border-left: 4px solid rgba(186, 12, 47, 0.45);
|
||
background: rgba(255, 255, 255, 0.58);
|
||
}
|
||
|
||
.google-access-button {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 48px;
|
||
margin: 18px 0;
|
||
border-radius: 8px;
|
||
background: var(--dbn-blue);
|
||
color: #fff;
|
||
font-weight: 900;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.fallback-login {
|
||
margin-top: 16px;
|
||
padding-top: 16px;
|
||
border-top: 1px solid var(--dbn-line);
|
||
}
|
||
|
||
.fallback-login summary {
|
||
cursor: pointer;
|
||
color: #655d53;
|
||
font-weight: 800;
|
||
}
|
||
|
||
@media (max-width: 1120px) {
|
||
.workspace {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.tool-rail {
|
||
flex-direction: row;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.tool-tab {
|
||
min-width: 170px;
|
||
}
|
||
|
||
.manifesto,
|
||
.landing-hero {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.manifesto-stats {
|
||
border-left: 0;
|
||
}
|
||
|
||
.tool-dashboard-grid,
|
||
.cap-grid--six,
|
||
.evidence-inner {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
}
|
||
|
||
@media (max-width: 680px) {
|
||
.topbar,
|
||
.showcase-header-inner {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.topbar-actions,
|
||
.showcase-header-actions {
|
||
width: 100%;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.manifesto-stats,
|
||
.tool-dashboard-grid,
|
||
.cap-grid--six,
|
||
.evidence-inner {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.dashboard-tool-card {
|
||
min-height: 220px;
|
||
}
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
min-height: 100vh;
|
||
background: var(--bg);
|
||
color: var(--ink);
|
||
}
|
||
|
||
button,
|
||
input,
|
||
textarea {
|
||
font: inherit;
|
||
}
|
||
|
||
button {
|
||
border: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
button:disabled {
|
||
cursor: progress;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
button:focus-visible,
|
||
input:focus-visible,
|
||
textarea:focus-visible {
|
||
outline: 3px solid rgba(15, 118, 110, 0.35);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.is-hidden {
|
||
display: none !important;
|
||
}
|
||
|
||
.gate {
|
||
min-height: 100vh;
|
||
display: grid;
|
||
place-items: center;
|
||
padding: 24px;
|
||
background:
|
||
linear-gradient(135deg, rgba(15, 118, 110, 0.10), transparent 36%),
|
||
linear-gradient(315deg, rgba(194, 65, 12, 0.10), transparent 34%),
|
||
var(--bg);
|
||
}
|
||
|
||
.gate-panel {
|
||
width: min(460px, 100%);
|
||
background: var(--panel);
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
box-shadow: var(--shadow);
|
||
padding: 32px;
|
||
}
|
||
|
||
.eyebrow {
|
||
margin: 0 0 6px;
|
||
color: var(--teal);
|
||
font-size: 0.78rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
p {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.gate-panel h1,
|
||
.topbar h1,
|
||
.tool-heading h2,
|
||
.reasoning-head h2 {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.gate-copy {
|
||
color: var(--muted);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.passcode-form label,
|
||
.input-label,
|
||
.control-label {
|
||
display: block;
|
||
font-weight: 700;
|
||
color: var(--ink);
|
||
}
|
||
|
||
.passcode-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr auto;
|
||
gap: 10px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.passcode-row input,
|
||
.tool-form textarea {
|
||
width: 100%;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
background: #fff;
|
||
color: var(--ink);
|
||
}
|
||
|
||
.passcode-row input {
|
||
min-height: 44px;
|
||
padding: 0 12px;
|
||
}
|
||
|
||
.passcode-row button,
|
||
#runButton,
|
||
.secondary-button {
|
||
min-height: 44px;
|
||
border-radius: 8px;
|
||
padding: 0 18px;
|
||
background: var(--teal);
|
||
color: #fff;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.secondary-button {
|
||
background: #263344;
|
||
}
|
||
|
||
.app-shell {
|
||
min-height: 100vh;
|
||
padding: 18px;
|
||
}
|
||
|
||
.topbar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 18px;
|
||
max-width: 1500px;
|
||
margin: 0 auto 12px;
|
||
padding: 10px 2px;
|
||
}
|
||
|
||
.topbar-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.status-pill,
|
||
.tool-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
min-height: 30px;
|
||
padding: 0 10px;
|
||
border-radius: 999px;
|
||
background: var(--soft-teal);
|
||
color: var(--teal-dark);
|
||
font-size: 0.84rem;
|
||
font-weight: 700;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.status-pill.is-warning {
|
||
background: var(--soft-coral);
|
||
color: var(--coral);
|
||
}
|
||
|
||
.disclaimer {
|
||
max-width: 1500px;
|
||
margin: 0 auto 12px;
|
||
padding: 10px 12px;
|
||
border: 1px solid #f0d6bc;
|
||
border-radius: 8px;
|
||
background: #fff9f2;
|
||
color: #68420d;
|
||
font-size: 0.92rem;
|
||
}
|
||
|
||
.workspace {
|
||
max-width: 1500px;
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: 190px minmax(0, 1fr) 370px;
|
||
gap: 14px;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.tool-rail,
|
||
.tool-panel,
|
||
.reasoning-panel {
|
||
background: var(--panel);
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.tool-rail {
|
||
padding: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.tool-tab {
|
||
width: 100%;
|
||
min-height: 68px;
|
||
border-radius: 8px;
|
||
padding: 11px;
|
||
background: transparent;
|
||
color: var(--ink);
|
||
text-align: left;
|
||
border: 1px solid transparent;
|
||
}
|
||
|
||
.tool-tab span {
|
||
display: block;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.tool-tab small {
|
||
display: block;
|
||
margin-top: 4px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.tool-tab.is-active {
|
||
background: var(--soft-teal);
|
||
border-color: rgba(15, 118, 110, 0.30);
|
||
}
|
||
|
||
.tool-panel {
|
||
min-height: 720px;
|
||
padding: 18px;
|
||
}
|
||
|
||
.tool-heading,
|
||
.reasoning-head {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.tool-form {
|
||
display: grid;
|
||
gap: 12px;
|
||
}
|
||
|
||
.control-row {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
min-height: 34px;
|
||
}
|
||
|
||
.control-row label {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
color: var(--muted);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.tool-form textarea {
|
||
resize: vertical;
|
||
min-height: 220px;
|
||
padding: 14px;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.form-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
|
||
.form-status {
|
||
min-height: 22px;
|
||
margin: 0;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.results {
|
||
margin-top: 18px;
|
||
display: grid;
|
||
gap: 12px;
|
||
}
|
||
|
||
.empty-state,
|
||
.result-section {
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
background: #fbfcfe;
|
||
}
|
||
|
||
.empty-state p,
|
||
.result-section p,
|
||
.result-section li {
|
||
color: var(--muted);
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.answer {
|
||
color: var(--ink) !important;
|
||
font-size: 1.03rem;
|
||
}
|
||
|
||
.result-section h3 {
|
||
margin-bottom: 8px;
|
||
font-size: 0.98rem;
|
||
}
|
||
|
||
.source-list {
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
.source-card {
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
background: #fff;
|
||
}
|
||
|
||
.source-card h4,
|
||
.detail-block h4 {
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.source-meta {
|
||
color: var(--teal-dark) !important;
|
||
font-size: 0.84rem;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.detail-block {
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.timeline-list {
|
||
display: grid;
|
||
gap: 10px;
|
||
padding-left: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
.timeline-item {
|
||
padding: 10px 12px 10px 14px;
|
||
border-left: 4px solid var(--line);
|
||
border-radius: 0 6px 6px 0;
|
||
background: var(--bg-card, #fff);
|
||
}
|
||
|
||
.timeline-item.confidence-high { border-left-color: #16a34a; }
|
||
.timeline-item.confidence-medium { border-left-color: #d97706; }
|
||
.timeline-item.confidence-low { border-left-color: #9ca3af; opacity: 0.75; font-style: italic; }
|
||
|
||
.timeline-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.timeline-date {
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.timeline-time {
|
||
margin-left: 6px;
|
||
color: var(--muted);
|
||
font-size: 0.82rem;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.timeline-actor {
|
||
display: block;
|
||
color: var(--teal-dark);
|
||
font-weight: 700;
|
||
font-size: 0.85rem;
|
||
margin-bottom: 3px;
|
||
}
|
||
|
||
.timeline-event {
|
||
margin: 4px 0;
|
||
}
|
||
|
||
.timeline-excerpt {
|
||
display: block;
|
||
margin-top: 5px;
|
||
color: var(--muted);
|
||
font-size: 0.82rem;
|
||
}
|
||
|
||
.confidence-badge {
|
||
font-size: 0.7rem;
|
||
font-weight: 600;
|
||
padding: 1px 6px;
|
||
border-radius: 999px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.03em;
|
||
font-style: normal;
|
||
}
|
||
.confidence-badge--high { background: #dcfce7; color: #15803d; }
|
||
.confidence-badge--medium { background: #fef3c7; color: #b45309; }
|
||
.confidence-badge--low { background: #f3f4f6; color: #6b7280; }
|
||
|
||
.redacted-output {
|
||
max-height: 420px;
|
||
overflow: auto;
|
||
white-space: pre-wrap;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
background: #fff;
|
||
color: var(--ink);
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.pill-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
padding-left: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
.pill-list li {
|
||
border-radius: 999px;
|
||
background: var(--soft-teal);
|
||
color: var(--teal-dark);
|
||
padding: 6px 10px;
|
||
}
|
||
|
||
.result-disclaimer {
|
||
margin: 0;
|
||
color: #68420d;
|
||
}
|
||
|
||
.muted {
|
||
color: var(--muted);
|
||
}
|
||
|
||
.reasoning-panel {
|
||
min-height: 720px;
|
||
padding: 16px;
|
||
}
|
||
|
||
.trace-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
display: grid;
|
||
gap: 12px;
|
||
}
|
||
|
||
.trace-list li {
|
||
display: grid;
|
||
grid-template-columns: 14px 1fr;
|
||
gap: 10px;
|
||
}
|
||
|
||
.trace-list strong {
|
||
display: block;
|
||
margin-bottom: 3px;
|
||
}
|
||
|
||
.trace-list p {
|
||
margin: 0;
|
||
color: var(--muted);
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.trace-status {
|
||
width: 10px;
|
||
height: 10px;
|
||
margin-top: 5px;
|
||
border-radius: 999px;
|
||
background: var(--teal);
|
||
}
|
||
|
||
.trace-status.running {
|
||
background: var(--amber);
|
||
animation: trace-pulse 1.4s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes trace-pulse {
|
||
0%, 100% { opacity: 1; transform: scale(1); }
|
||
50% { opacity: 0.4; transform: scale(0.7); }
|
||
}
|
||
|
||
.trace-status.warning {
|
||
background: var(--coral);
|
||
}
|
||
|
||
.trace-status.waiting {
|
||
background: #98a2b3;
|
||
}
|
||
|
||
@media (max-width: 1120px) {
|
||
.workspace {
|
||
grid-template-columns: 170px minmax(0, 1fr);
|
||
}
|
||
|
||
.reasoning-panel {
|
||
grid-column: 1 / -1;
|
||
min-height: auto;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
.app-shell {
|
||
padding: 12px;
|
||
}
|
||
|
||
.topbar,
|
||
.form-footer {
|
||
align-items: stretch;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.workspace {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.tool-rail {
|
||
flex-direction: row;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.tool-tab {
|
||
min-width: 150px;
|
||
}
|
||
|
||
.tool-panel,
|
||
.reasoning-panel {
|
||
min-height: auto;
|
||
}
|
||
|
||
.passcode-row {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
/* ─── Public showcase landing ──────────────────────────────────────────────── */
|
||
|
||
.showcase-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100vh;
|
||
background: var(--bg);
|
||
}
|
||
|
||
.showcase-header {
|
||
background:
|
||
linear-gradient(135deg, rgba(15, 118, 110, 0.92), rgba(17, 94, 89, 0.97) 70%),
|
||
linear-gradient(315deg, rgba(194, 65, 12, 0.18), transparent 40%);
|
||
color: #fff;
|
||
padding: 64px 24px 72px;
|
||
}
|
||
|
||
.showcase-header-inner {
|
||
max-width: 860px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
gap: 32px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.showcase-brand .eyebrow {
|
||
color: rgba(255,255,255,0.72);
|
||
}
|
||
|
||
.showcase-title {
|
||
margin: 0 0 10px;
|
||
font-size: clamp(2rem, 5vw, 3rem);
|
||
font-weight: 800;
|
||
line-height: 1.1;
|
||
color: #fff;
|
||
}
|
||
|
||
.showcase-tagline {
|
||
margin: 0 0 18px;
|
||
font-size: 1.1rem;
|
||
color: rgba(255,255,255,0.82);
|
||
}
|
||
|
||
.powered-badge {
|
||
display: inline-block;
|
||
background: rgba(255,255,255,0.14);
|
||
border: 1px solid rgba(255,255,255,0.28);
|
||
border-radius: 999px;
|
||
padding: 4px 14px;
|
||
font-size: 0.78rem;
|
||
font-weight: 600;
|
||
color: rgba(255,255,255,0.9);
|
||
text-decoration: none;
|
||
transition: background 0.15s;
|
||
}
|
||
|
||
.powered-badge:hover {
|
||
background: rgba(255,255,255,0.22);
|
||
}
|
||
|
||
.cta-button {
|
||
display: inline-block;
|
||
background: var(--coral);
|
||
color: #fff;
|
||
text-decoration: none;
|
||
padding: 14px 28px;
|
||
border-radius: 8px;
|
||
font-weight: 700;
|
||
font-size: 1rem;
|
||
white-space: nowrap;
|
||
transition: background 0.15s, transform 0.1s;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.cta-button:hover {
|
||
background: #b83a0b;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.section-inner {
|
||
max-width: 860px;
|
||
margin: 0 auto;
|
||
padding: 0 24px;
|
||
}
|
||
|
||
.section-heading {
|
||
margin: 0 0 8px;
|
||
font-size: 1.5rem;
|
||
font-weight: 800;
|
||
color: var(--ink);
|
||
}
|
||
|
||
.section-sub {
|
||
margin: 0 0 36px;
|
||
color: var(--muted);
|
||
font-size: 0.98rem;
|
||
}
|
||
|
||
/* How it works */
|
||
.hiw-section {
|
||
padding: 64px 0;
|
||
background: var(--panel);
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.hiw-steps {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||
gap: 28px;
|
||
}
|
||
|
||
.hiw-step {
|
||
background: var(--bg);
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 24px;
|
||
}
|
||
|
||
.hiw-num {
|
||
font-size: 2rem;
|
||
font-weight: 800;
|
||
color: var(--teal);
|
||
opacity: 0.4;
|
||
margin-bottom: 12px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.hiw-step h3 {
|
||
margin: 0 0 8px;
|
||
font-size: 1rem;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.hiw-step p {
|
||
margin: 0;
|
||
color: var(--muted);
|
||
font-size: 0.9rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Capabilities */
|
||
.cap-section {
|
||
padding: 64px 0;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.cap-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.cap-card {
|
||
background: var(--panel);
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
transition: box-shadow 0.15s;
|
||
}
|
||
|
||
.cap-card:hover {
|
||
box-shadow: 0 4px 16px rgba(15,118,110,0.1);
|
||
}
|
||
|
||
.cap-label {
|
||
display: inline-block;
|
||
background: var(--soft-teal);
|
||
color: var(--teal-dark);
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
border-radius: 999px;
|
||
padding: 3px 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.cap-card h3 {
|
||
margin: 0 0 6px;
|
||
font-size: 0.95rem;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.cap-card p {
|
||
margin: 0;
|
||
color: var(--muted);
|
||
font-size: 0.85rem;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
/* Evidence trail explainer */
|
||
.evidence-section {
|
||
padding: 64px 0;
|
||
background: var(--panel);
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.evidence-inner {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 48px;
|
||
align-items: start;
|
||
}
|
||
|
||
.evidence-copy h2 {
|
||
margin: 0 0 14px;
|
||
font-size: 1.5rem;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.evidence-copy p {
|
||
color: var(--muted);
|
||
line-height: 1.7;
|
||
margin: 0 0 18px;
|
||
}
|
||
|
||
.evidence-list {
|
||
margin: 0;
|
||
padding-left: 20px;
|
||
color: var(--muted);
|
||
font-size: 0.9rem;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.evidence-mock {
|
||
background: var(--bg);
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
}
|
||
|
||
.mock-label {
|
||
margin: 0 0 16px;
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
color: var(--teal);
|
||
}
|
||
|
||
.mock-step {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-bottom: 14px;
|
||
padding-bottom: 14px;
|
||
border-bottom: 1px solid var(--line);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.mock-step:last-child {
|
||
border-bottom: 0;
|
||
margin-bottom: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.mock-step p {
|
||
margin: 3px 0 0;
|
||
color: var(--muted);
|
||
font-size: 0.82rem;
|
||
}
|
||
|
||
.mock-dot {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
background: var(--teal);
|
||
flex-shrink: 0;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.mock-dot--amber {
|
||
background: var(--amber);
|
||
}
|
||
|
||
.mock-done .mock-dot {
|
||
background: var(--teal);
|
||
}
|
||
|
||
/* Access / login gate */
|
||
.access-section {
|
||
padding: 64px 24px;
|
||
display: flex;
|
||
justify-content: center;
|
||
background: var(--bg);
|
||
}
|
||
|
||
/* Showcase footer */
|
||
.showcase-footer {
|
||
padding: 32px 24px;
|
||
text-align: center;
|
||
border-top: 1px solid var(--line);
|
||
color: var(--muted);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.showcase-footer a {
|
||
color: var(--teal);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.showcase-footer a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.footer-disclaimer {
|
||
margin: 6px 0 0;
|
||
font-size: 0.78rem;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.showcase-header-inner {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.evidence-inner {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.cap-grid {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
}
|
||
|
||
/* Source card chunk toggle */
|
||
.chunk-details {
|
||
margin-top: 0.625rem;
|
||
}
|
||
|
||
.chunk-toggle {
|
||
cursor: pointer;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
color: var(--teal);
|
||
user-select: none;
|
||
list-style: none;
|
||
}
|
||
|
||
.chunk-toggle::-webkit-details-marker {
|
||
display: none;
|
||
}
|
||
|
||
.chunk-details[open] .chunk-toggle {
|
||
color: var(--teal-dark);
|
||
}
|
||
|
||
.chunk-text {
|
||
margin-top: 0.5rem;
|
||
font-size: 0.7rem;
|
||
line-height: 1.55;
|
||
background: #f0fdf9;
|
||
border: 1px solid #ccfbf1;
|
||
border-radius: 6px;
|
||
padding: 0.625rem 0.75rem;
|
||
white-space: pre-wrap;
|
||
overflow-x: auto;
|
||
color: #374151;
|
||
}
|
||
|
||
/* ─── Upload zone (Redact tool) ──────────────────────────────────────────── */
|
||
|
||
.upload-zone {
|
||
border: 2px dashed var(--line);
|
||
border-radius: 8px;
|
||
padding: 18px 14px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: border-color 0.15s, background 0.15s;
|
||
position: relative;
|
||
}
|
||
|
||
.upload-zone:hover {
|
||
border-color: var(--teal);
|
||
background: #f7fdfb;
|
||
}
|
||
|
||
.upload-zone.is-drag-over {
|
||
border-color: var(--teal);
|
||
background: var(--soft-teal);
|
||
}
|
||
|
||
#uploadInput {
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.upload-icon {
|
||
display: block;
|
||
font-size: 1.8rem;
|
||
line-height: 1;
|
||
color: var(--teal);
|
||
opacity: 0.55;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.upload-prompt p {
|
||
margin: 4px 0 0;
|
||
color: var(--muted);
|
||
font-size: 0.88rem;
|
||
}
|
||
|
||
.upload-browse {
|
||
color: var(--teal);
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
text-decoration: underline;
|
||
text-underline-offset: 2px;
|
||
}
|
||
|
||
.upload-hint {
|
||
font-size: 0.76rem !important;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.upload-file {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 6px;
|
||
min-height: 48px;
|
||
width: 100%;
|
||
padding: 0.4rem 0;
|
||
}
|
||
|
||
.upload-filename {
|
||
font-size: 0.88rem;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
word-break: break-all;
|
||
}
|
||
|
||
.upload-clear {
|
||
flex-shrink: 0;
|
||
background: transparent;
|
||
color: var(--muted);
|
||
font-size: 1.25rem;
|
||
line-height: 1;
|
||
padding: 2px 7px;
|
||
border-radius: 4px;
|
||
border: 1px solid transparent;
|
||
}
|
||
|
||
.upload-clear:hover {
|
||
background: var(--soft-coral);
|
||
color: var(--coral);
|
||
border-color: #f5c6aa;
|
||
}
|
||
|
||
/* ─── Multi-file list ─────────────────────────────────────────────────────── */
|
||
|
||
.upload-file-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
text-align: left;
|
||
width: 100%;
|
||
}
|
||
|
||
.upload-file-list li {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 0.5rem;
|
||
padding: 2px 0;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.upload-chars {
|
||
color: var(--muted);
|
||
font-size: 0.78rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ─── Name aliases (Redact tool) ──────────────────────────────────────────── */
|
||
|
||
.alias-section {
|
||
margin-top: 0.75rem;
|
||
padding-top: 0.75rem;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
|
||
.alias-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.alias-add-btn {
|
||
background: var(--soft-teal);
|
||
color: var(--teal-dark);
|
||
border: 1px solid transparent;
|
||
border-radius: 6px;
|
||
padding: 3px 10px;
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: background 0.12s;
|
||
}
|
||
|
||
.alias-add-btn:hover {
|
||
background: #c4ece5;
|
||
}
|
||
|
||
.alias-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
margin-bottom: 0.4rem;
|
||
}
|
||
|
||
.alias-original,
|
||
.alias-label {
|
||
flex: 1;
|
||
padding: 0.3rem 0.55rem;
|
||
border: 1px solid var(--line);
|
||
border-radius: 6px;
|
||
font-size: 0.875rem;
|
||
background: var(--panel);
|
||
color: var(--ink);
|
||
min-width: 0;
|
||
}
|
||
|
||
.alias-original:focus,
|
||
.alias-label:focus {
|
||
outline: 3px solid rgba(15, 118, 110, 0.28);
|
||
outline-offset: 1px;
|
||
border-color: var(--teal);
|
||
}
|
||
|
||
.alias-arrow {
|
||
color: var(--muted);
|
||
font-size: 1rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.alias-remove {
|
||
flex-shrink: 0;
|
||
background: transparent;
|
||
color: var(--muted);
|
||
font-size: 1.1rem;
|
||
line-height: 1;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
border: 1px solid transparent;
|
||
}
|
||
|
||
.alias-remove:hover {
|
||
background: var(--soft-coral);
|
||
color: var(--coral);
|
||
border-color: #f5c6aa;
|
||
}
|
||
|
||
.alias-hint {
|
||
font-size: 0.76rem;
|
||
color: var(--muted);
|
||
margin: 0.35rem 0 0;
|
||
}
|
||
|
||
.timeline-sort-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
margin-bottom: 0.75rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
.sort-label {
|
||
font-size: 0.8rem;
|
||
color: var(--muted);
|
||
}
|
||
.sort-btn {
|
||
font-size: 0.78rem;
|
||
font-weight: 500;
|
||
padding: 0.22rem 0.7rem;
|
||
border-radius: 999px;
|
||
border: 1px solid var(--line);
|
||
background: var(--bg);
|
||
color: var(--muted);
|
||
cursor: pointer;
|
||
transition: background 0.12s, color 0.12s, border-color 0.12s;
|
||
}
|
||
.sort-btn:hover { background: var(--soft-teal); color: var(--teal-dark); border-color: var(--teal); }
|
||
.sort-btn.is-active { background: var(--teal); color: #fff; border-color: var(--teal); }
|
||
|
||
.timeline-export { margin-top: 1rem; }
|
||
|
||
.export-csv-btn {
|
||
font-size: 0.8rem;
|
||
padding: 0.35rem 0.9rem;
|
||
border: 1px solid var(--line);
|
||
border-radius: 6px;
|
||
background: transparent;
|
||
color: var(--muted);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.export-csv-btn:hover {
|
||
background: var(--bg);
|
||
color: var(--ink);
|
||
}
|
||
|
||
.date-type-badge {
|
||
display: inline-block;
|
||
font-size: 0.68rem;
|
||
padding: 0.1rem 0.45rem;
|
||
border-radius: 4px;
|
||
background: var(--bg);
|
||
color: var(--muted);
|
||
margin-left: 0.4rem;
|
||
vertical-align: middle;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.03em;
|
||
}
|
||
|
||
/* ── Transcribe tool ─────────────────────────────────────────────── */
|
||
|
||
.num-speakers-input {
|
||
width: 4.5rem;
|
||
padding: 0.25rem 0.5rem;
|
||
border: 1px solid var(--line);
|
||
border-radius: 6px;
|
||
background: #fff;
|
||
color: var(--ink);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.transcript-roles {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.4rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.speaker-tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.3rem;
|
||
font-size: 0.72rem;
|
||
font-weight: 600;
|
||
padding: 0.2rem 0.55rem;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.speaker-tag small {
|
||
font-weight: 400;
|
||
opacity: 0.75;
|
||
}
|
||
|
||
.speaker-tag--0 { background: #dbeafe; color: #1d4ed8; }
|
||
.speaker-tag--1 { background: #ede9fe; color: #6d28d9; }
|
||
.speaker-tag--2 { background: #dcfce7; color: #166534; }
|
||
.speaker-tag--3 { background: #fef9c3; color: #854d0e; }
|
||
.speaker-tag--4 { background: #fee2e2; color: #991b1b; }
|
||
.speaker-tag--5 { background: #e7f5f2; color: #0f766e; }
|
||
|
||
.transcript-box {
|
||
background: var(--bg);
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 1rem;
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.transcript-text {
|
||
white-space: pre-wrap;
|
||
word-break: break-word;
|
||
font-size: 0.875rem;
|
||
line-height: 1.65;
|
||
font-family: inherit;
|
||
margin: 0;
|
||
color: var(--ink);
|
||
}
|
||
|
||
.segment-details {
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.segment-summary {
|
||
font-size: 0.8rem;
|
||
color: var(--muted);
|
||
padding: 0.6rem 1rem;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
|
||
.segment-list {
|
||
padding: 0.25rem 0.75rem 0.75rem;
|
||
max-height: 280px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.segment-row {
|
||
display: flex;
|
||
gap: 0.6rem;
|
||
align-items: baseline;
|
||
padding: 0.2rem 0;
|
||
font-size: 0.78rem;
|
||
border-bottom: 1px solid var(--bg);
|
||
}
|
||
|
||
.segment-time {
|
||
color: var(--muted);
|
||
font-family: ui-monospace, monospace;
|
||
min-width: 7rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.segment-text {
|
||
color: var(--ink);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.transcript-downloads {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
margin-top: 0.75rem;
|
||
}
|
||
|
||
/* ── Transcribe extended controls ─────────────────────────────────────── */
|
||
|
||
.byok-input {
|
||
font-size: 0.82rem;
|
||
padding: 0.3rem 0.6rem;
|
||
border: 1px solid var(--line);
|
||
border-radius: 6px;
|
||
background: var(--bg);
|
||
color: var(--ink);
|
||
width: 22rem;
|
||
max-width: 100%;
|
||
}
|
||
.byok-input--short { width: 9rem; }
|
||
.byok-input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
|
||
|
||
.inline-hint {
|
||
font-size: 0.75rem;
|
||
color: var(--muted);
|
||
margin-left: 0.4rem;
|
||
}
|
||
|
||
.expert-settings {
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 0;
|
||
margin-top: 0.75rem;
|
||
}
|
||
.expert-summary {
|
||
font-size: 0.82rem;
|
||
font-weight: 600;
|
||
color: var(--muted);
|
||
cursor: pointer;
|
||
padding: 0.55rem 0.9rem;
|
||
list-style: none;
|
||
user-select: none;
|
||
}
|
||
.expert-summary::-webkit-details-marker { display: none; }
|
||
.expert-summary::before {
|
||
content: '▶ ';
|
||
font-size: 0.65rem;
|
||
transition: transform 0.15s;
|
||
}
|
||
.expert-settings[open] .expert-summary::before { content: '▼ '; }
|
||
.expert-body {
|
||
padding: 0.6rem 0.9rem 0.9rem;
|
||
border-top: 1px solid var(--line);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.4rem;
|
||
}
|
||
.expert-field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.25rem;
|
||
margin-top: 0.4rem;
|
||
}
|
||
.prompt-textarea {
|
||
font-size: 0.82rem;
|
||
padding: 0.4rem 0.6rem;
|
||
border: 1px solid var(--line);
|
||
border-radius: 6px;
|
||
background: var(--bg);
|
||
color: var(--ink);
|
||
resize: vertical;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
.prompt-textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
|
||
|
||
/* ─── Vocabulary presets ──────────────────────────────────────────────────── */
|
||
|
||
.vocab-presets {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 0.35rem;
|
||
margin-bottom: 0.35rem;
|
||
}
|
||
|
||
/* ─── UI Language switcher ────────────────────────────────────────────────── */
|
||
|
||
.lang-switcher {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.375rem;
|
||
padding-bottom: 0.625rem;
|
||
margin-bottom: 0.25rem;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.lang-btn {
|
||
background: var(--bg);
|
||
border: 1px solid var(--line);
|
||
border-radius: 9999px;
|
||
color: var(--muted);
|
||
cursor: pointer;
|
||
font-size: 0.7rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.03em;
|
||
padding: 0.2rem 0.55rem;
|
||
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
||
}
|
||
|
||
.lang-btn:hover {
|
||
background: var(--soft-teal);
|
||
border-color: var(--teal);
|
||
color: var(--teal);
|
||
}
|
||
|
||
.lang-btn.is-active {
|
||
background: var(--teal);
|
||
border-color: var(--teal);
|
||
color: #fff;
|
||
}
|
||
|
||
.vocab-btn {
|
||
font-size: 0.78rem;
|
||
padding: 0.2rem 0.6rem;
|
||
border: 1px solid var(--line);
|
||
border-radius: 20px;
|
||
background: var(--bg);
|
||
color: var(--ink);
|
||
cursor: pointer;
|
||
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
||
}
|
||
|
||
.vocab-btn:hover {
|
||
background: var(--soft-teal, #e8f7f6);
|
||
border-color: var(--teal);
|
||
color: var(--teal);
|
||
}
|
||
|
||
.vocab-btn.is-active {
|
||
background: var(--teal);
|
||
border-color: var(--teal);
|
||
color: #fff;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* ─── Audio queue list ────────────────────────────────────────────────────── */
|
||
|
||
.audio-queue-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
width: 100%;
|
||
text-align: left;
|
||
}
|
||
|
||
.queue-item {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 0.5rem;
|
||
padding: 3px 0;
|
||
font-size: 0.84rem;
|
||
}
|
||
|
||
.queue-num {
|
||
flex-shrink: 0;
|
||
min-width: 1.4rem;
|
||
font-variant-numeric: tabular-nums;
|
||
color: var(--muted);
|
||
font-size: 0.78rem;
|
||
}
|
||
|
||
.queue-item--processing .queue-num { color: var(--teal); }
|
||
.queue-item--done .queue-num { color: #22a06b; }
|
||
.queue-item--error .queue-num { color: var(--coral, #e05); }
|
||
|
||
.queue-name {
|
||
flex: 1;
|
||
font-weight: 500;
|
||
word-break: break-all;
|
||
color: var(--ink);
|
||
}
|
||
|
||
.queue-item--done .queue-name { color: var(--muted); }
|
||
.queue-item--error .queue-name { color: var(--coral, #e05); }
|
||
|
||
.queue-size {
|
||
flex-shrink: 0;
|
||
font-size: 0.76rem;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.audio-queue-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
margin-top: 0.5rem;
|
||
font-size: 0.82rem;
|
||
}
|
||
|
||
.control-hint { font-size: 0.74rem; color: var(--muted); font-weight: 400; }
|
||
|
||
/* ─── Exempt names section (Redact tool) ──────────────────────────────────── */
|
||
|
||
.exempt-section {
|
||
margin-top: 0.75rem;
|
||
padding-top: 0.75rem;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
|
||
.exempt-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
margin-bottom: 0.4rem;
|
||
}
|
||
|
||
.exempt-name-input {
|
||
flex: 1;
|
||
padding: 0.3rem 0.55rem;
|
||
border: 1px solid var(--line);
|
||
border-radius: 6px;
|
||
font-size: 0.875rem;
|
||
background: var(--panel);
|
||
color: var(--ink);
|
||
min-width: 0;
|
||
}
|
||
|
||
.exempt-name-input:focus {
|
||
outline: 3px solid rgba(15, 118, 110, 0.28);
|
||
outline-offset: 1px;
|
||
border-color: var(--teal);
|
||
}
|
||
|
||
/* ─── Entity type toggles (Redact tool) ───────────────────────────────────── */
|
||
|
||
.entity-toggles {
|
||
flex-wrap: wrap;
|
||
gap: 0.4rem 1.1rem;
|
||
}
|
||
|
||
.entity-toggles label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.3rem;
|
||
font-size: 0.875rem;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
|
||
.entity-toggles input[type="checkbox"] {
|
||
width: 15px;
|
||
height: 15px;
|
||
accent-color: var(--teal);
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* ─── Advanced settings panel (Redact tool) ───────────────────────────────── */
|
||
|
||
.advanced-panel {
|
||
border-top: 1px solid var(--line);
|
||
margin-top: 0.6rem;
|
||
}
|
||
|
||
.advanced-toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
padding: 0.55rem 0;
|
||
font-size: 0.82rem;
|
||
font-weight: 500;
|
||
color: var(--teal);
|
||
cursor: pointer;
|
||
user-select: none;
|
||
list-style: none;
|
||
}
|
||
|
||
.advanced-toggle::-webkit-details-marker { display: none; }
|
||
|
||
.advanced-toggle::before {
|
||
content: '▸';
|
||
font-size: 0.7rem;
|
||
transition: transform 0.18s ease;
|
||
display: inline-block;
|
||
}
|
||
|
||
.advanced-panel[open] .advanced-toggle::before {
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
.advanced-panel[open] .advanced-toggle {
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
/* ─── Redact download buttons ─────────────────────────────────────────────── */
|
||
|
||
.redact-downloads {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.redact-dl-btn {
|
||
padding: 0.38rem 0.9rem;
|
||
border-radius: 6px;
|
||
font-size: 0.82rem;
|
||
font-weight: 500;
|
||
background: var(--soft-teal);
|
||
color: var(--teal-dark);
|
||
border: 1px solid rgba(15, 118, 110, 0.2);
|
||
cursor: pointer;
|
||
transition: background 0.15s, border-color 0.15s;
|
||
}
|
||
|
||
.redact-dl-btn:hover {
|
||
background: #d0ede9;
|
||
border-color: var(--teal);
|
||
}
|
||
|
||
.redact-dl-btn:disabled {
|
||
opacity: 0.55;
|
||
cursor: progress;
|
||
}
|
||
|
||
/* ── Feedback widget ──────────────────────────────────────────── */
|
||
.feedback-widget {
|
||
margin-top: 1.5rem;
|
||
padding: 1rem 1.25rem;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
|
||
.feedback-label {
|
||
font-size: 0.85rem;
|
||
color: var(--muted);
|
||
margin: 0 0 0.6rem;
|
||
}
|
||
|
||
.feedback-btns {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.feedback-thumb {
|
||
background: var(--bg);
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 0.35rem 0.75rem;
|
||
font-size: 1.2rem;
|
||
cursor: pointer;
|
||
transition: background 0.12s, border-color 0.12s;
|
||
line-height: 1;
|
||
}
|
||
|
||
.feedback-thumb:hover { background: var(--soft-teal); border-color: var(--teal); }
|
||
.feedback-thumb.is-active { background: var(--soft-teal); border-color: var(--teal); }
|
||
|
||
.feedback-detail {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.feedback-detail-label {
|
||
font-size: 0.83rem;
|
||
color: var(--ink);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.feedback-optional {
|
||
color: var(--muted);
|
||
font-weight: 400;
|
||
}
|
||
|
||
.feedback-textarea {
|
||
width: 100%;
|
||
border: 1px solid var(--line);
|
||
border-radius: 6px;
|
||
padding: 0.5rem 0.75rem;
|
||
font-size: 0.85rem;
|
||
resize: vertical;
|
||
font-family: inherit;
|
||
color: var(--ink);
|
||
background: var(--panel);
|
||
}
|
||
|
||
.feedback-textarea:focus { outline: 3px solid var(--teal); outline-offset: 1px; }
|
||
|
||
.feedback-detail-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.feedback-submit-btn {
|
||
background: var(--teal);
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 6px;
|
||
padding: 0.4rem 1rem;
|
||
font-size: 0.83rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: background 0.12s;
|
||
}
|
||
|
||
.feedback-submit-btn:hover { background: var(--teal-dark); }
|
||
.feedback-submit-btn:disabled { opacity: 0.55; cursor: progress; }
|
||
|
||
.feedback-status {
|
||
font-size: 0.8rem;
|
||
color: var(--muted);
|
||
margin: 0;
|
||
}
|
||
|
||
.feedback-thanks {
|
||
font-size: 0.85rem;
|
||
color: var(--teal-dark);
|
||
font-weight: 500;
|
||
margin: 0;
|
||
}
|
||
|
||
/* =========================================================================
|
||
Deep Research — agent + rank/rerank RAG surface
|
||
========================================================================= */
|
||
|
||
.deep-research .lang-switcher {
|
||
display: inline-flex;
|
||
gap: 6px;
|
||
}
|
||
|
||
.deep-research .lang-btn {
|
||
padding: 6px 10px;
|
||
border-radius: 999px;
|
||
background: #fff;
|
||
border: 1px solid var(--line);
|
||
color: var(--muted);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.deep-research .lang-btn.is-active {
|
||
background: var(--soft-teal);
|
||
color: var(--teal-dark);
|
||
border-color: rgba(15, 118, 110, 0.30);
|
||
}
|
||
|
||
.dr-slice-section {
|
||
display: grid;
|
||
gap: 8px;
|
||
}
|
||
|
||
.dr-slice-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 10px;
|
||
}
|
||
|
||
.dr-slice {
|
||
text-align: left;
|
||
background: #fbfcfe;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 12px 13px;
|
||
cursor: pointer;
|
||
min-height: 96px;
|
||
display: grid;
|
||
gap: 6px;
|
||
align-content: start;
|
||
transition: border-color 120ms ease, background 120ms ease;
|
||
}
|
||
|
||
.dr-slice:hover {
|
||
border-color: rgba(15, 118, 110, 0.30);
|
||
}
|
||
|
||
.dr-slice.is-on {
|
||
background: var(--soft-teal);
|
||
border-color: rgba(15, 118, 110, 0.45);
|
||
}
|
||
|
||
.dr-slice__head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
}
|
||
|
||
.dr-slice__title {
|
||
font-weight: 800;
|
||
color: var(--ink);
|
||
}
|
||
|
||
.dr-slice__badge {
|
||
background: #fff;
|
||
border: 1px solid var(--line);
|
||
border-radius: 999px;
|
||
color: var(--muted);
|
||
font-size: 0.66rem;
|
||
font-weight: 800;
|
||
letter-spacing: 0.06em;
|
||
padding: 3px 8px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.dr-slice.is-on .dr-slice__badge {
|
||
background: var(--teal);
|
||
border-color: var(--teal);
|
||
color: #fff;
|
||
}
|
||
|
||
.dr-slice__tagline {
|
||
margin: 0;
|
||
color: var(--muted);
|
||
font-size: 0.86rem;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.advanced-panel .dr-control-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||
gap: 8px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.dr-control-card {
|
||
background: #fbfcfe;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
}
|
||
|
||
.dr-control-card label {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
align-items: center;
|
||
font-weight: 800;
|
||
color: var(--ink);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.dr-control-card small {
|
||
display: block;
|
||
margin-top: 8px;
|
||
color: var(--muted);
|
||
font-size: 0.74rem;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.dr-control-card input[type="range"] {
|
||
width: 100%;
|
||
margin-top: 8px;
|
||
accent-color: var(--teal);
|
||
}
|
||
|
||
.dr-control-value {
|
||
color: var(--coral);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
@media (max-width: 980px) {
|
||
.advanced-panel .dr-control-grid {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
.dr-slice-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.deep-research-results {
|
||
display: grid;
|
||
gap: 14px;
|
||
}
|
||
|
||
.dr-result-block {
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
background: #fff;
|
||
}
|
||
|
||
.dr-brief {
|
||
line-height: 1.65;
|
||
color: var(--ink);
|
||
font-size: 1.0rem;
|
||
}
|
||
|
||
.dr-brief p {
|
||
margin: 0 0 12px;
|
||
}
|
||
|
||
.dr-brief code {
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||
background: var(--soft-teal);
|
||
padding: 1px 5px;
|
||
border-radius: 4px;
|
||
font-size: 0.86em;
|
||
}
|
||
|
||
.dr-brief strong { color: var(--ink); }
|
||
.dr-brief em { color: var(--muted); }
|
||
|
||
.dr-cite {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 18px;
|
||
height: 18px;
|
||
margin: 0 1px;
|
||
padding: 0 5px;
|
||
border-radius: 999px;
|
||
background: var(--soft-coral);
|
||
color: var(--coral);
|
||
font-size: 0.72rem;
|
||
font-weight: 800;
|
||
font-variant-numeric: tabular-nums;
|
||
cursor: pointer;
|
||
border: 1px solid rgba(194, 65, 12, 0.25);
|
||
vertical-align: 1px;
|
||
}
|
||
|
||
.dr-cite:hover { background: var(--coral); color: #fff; }
|
||
|
||
.dr-sources-head {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.dr-sources-head h3 {
|
||
margin: 0;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.dr-sources-head small {
|
||
color: var(--muted);
|
||
font-size: 0.82rem;
|
||
}
|
||
|
||
.dr-source-list {
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
.dr-source-card {
|
||
display: grid;
|
||
grid-template-columns: 34px 1fr auto;
|
||
gap: 12px;
|
||
align-items: start;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
background: #fbfcfe;
|
||
cursor: pointer;
|
||
text-align: left;
|
||
width: 100%;
|
||
}
|
||
|
||
.dr-source-card:hover { border-color: rgba(15, 118, 110, 0.40); }
|
||
|
||
.dr-source-card.is-highlight {
|
||
border-color: var(--coral);
|
||
background: var(--soft-coral);
|
||
}
|
||
|
||
.dr-source-number {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 999px;
|
||
background: var(--soft-coral);
|
||
color: var(--coral);
|
||
font-weight: 900;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.dr-source-body {
|
||
min-width: 0;
|
||
}
|
||
|
||
.dr-source-title {
|
||
font-weight: 800;
|
||
color: var(--ink);
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.dr-source-meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.dr-source-tag {
|
||
background: var(--soft-teal);
|
||
color: var(--teal-dark);
|
||
border-radius: 999px;
|
||
font-size: 0.7rem;
|
||
font-weight: 800;
|
||
padding: 3px 8px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.dr-source-tag--upload { background: #fff0e8; color: #8a4524; }
|
||
.dr-source-tag--score { background: #eef3fb; color: #314158; }
|
||
|
||
.dr-source-excerpt {
|
||
color: var(--muted);
|
||
margin-top: 8px;
|
||
line-height: 1.5;
|
||
font-size: 0.92rem;
|
||
}
|
||
|
||
.dr-source-aside {
|
||
align-self: stretch;
|
||
display: grid;
|
||
grid-template-rows: auto auto;
|
||
gap: 6px;
|
||
font-size: 0.78rem;
|
||
color: var(--muted);
|
||
text-align: right;
|
||
min-width: 90px;
|
||
}
|
||
|
||
.dr-source-aside b {
|
||
color: var(--ink);
|
||
font-variant-numeric: tabular-nums;
|
||
font-size: 0.92rem;
|
||
}
|
||
|
||
/* ============================================================
|
||
CORPUS PAGE
|
||
============================================================ */
|
||
|
||
/* Stats bar */
|
||
.corpus-stats-bar {
|
||
display: flex;
|
||
gap: 0;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
margin-bottom: 36px;
|
||
background: var(--panel);
|
||
}
|
||
|
||
.corpus-stat {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 20px 16px;
|
||
border-right: 1px solid var(--line);
|
||
text-align: center;
|
||
}
|
||
.corpus-stat:last-child { border-right: 0; }
|
||
|
||
.corpus-stat__value {
|
||
display: block;
|
||
font-size: 2rem;
|
||
font-weight: 800;
|
||
color: var(--teal);
|
||
line-height: 1;
|
||
font-variant-numeric: tabular-nums;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.corpus-stat__value.is-loading {
|
||
color: var(--line);
|
||
background: linear-gradient(90deg, var(--line) 25%, #e8ecf2 50%, var(--line) 75%);
|
||
background-size: 200% 100%;
|
||
animation: shimmer 1.4s infinite;
|
||
border-radius: 4px;
|
||
min-width: 60px;
|
||
}
|
||
|
||
@keyframes shimmer {
|
||
0% { background-position: 200% 0; }
|
||
100% { background-position: -200% 0; }
|
||
}
|
||
|
||
.corpus-stat__label {
|
||
display: block;
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
color: var(--muted);
|
||
margin-top: 6px;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
/* Section headings */
|
||
.corpus-section {
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.corpus-section__title {
|
||
font-size: 1.05rem;
|
||
font-weight: 700;
|
||
color: var(--ink);
|
||
margin: 4px 0 18px;
|
||
}
|
||
|
||
/* Category cards */
|
||
.corpus-categories {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 14px;
|
||
}
|
||
|
||
.category-card {
|
||
background: var(--panel);
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 18px;
|
||
transition: border-color 0.15s, box-shadow 0.15s;
|
||
}
|
||
|
||
.category-card:hover {
|
||
border-color: var(--teal);
|
||
box-shadow: 0 4px 16px rgba(15, 118, 110, 0.1);
|
||
}
|
||
|
||
.category-card__top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.category-card__icon {
|
||
font-size: 1.5rem;
|
||
line-height: 1;
|
||
}
|
||
|
||
.category-card__count {
|
||
font-size: 0.72rem;
|
||
font-weight: 800;
|
||
background: var(--soft-teal);
|
||
color: var(--teal-dark);
|
||
border-radius: 999px;
|
||
padding: 2px 10px;
|
||
font-variant-numeric: tabular-nums;
|
||
min-width: 28px;
|
||
text-align: center;
|
||
}
|
||
|
||
.category-card__count.is-loading {
|
||
color: transparent;
|
||
background: linear-gradient(90deg, var(--line) 25%, #e8ecf2 50%, var(--line) 75%);
|
||
background-size: 200% 100%;
|
||
animation: shimmer 1.4s infinite;
|
||
}
|
||
|
||
.category-card h4 {
|
||
font-size: 0.88rem;
|
||
font-weight: 700;
|
||
color: var(--ink);
|
||
margin: 0 0 6px;
|
||
}
|
||
|
||
.category-card p {
|
||
font-size: 0.80rem;
|
||
color: var(--muted);
|
||
line-height: 1.5;
|
||
margin: 0;
|
||
}
|
||
|
||
/* Sources table */
|
||
.corpus-table-wrap {
|
||
overflow-x: auto;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.sources-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 0.84rem;
|
||
background: var(--panel);
|
||
}
|
||
|
||
.sources-table th {
|
||
background: var(--bg);
|
||
font-size: 0.70rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--muted);
|
||
padding: 10px 14px;
|
||
text-align: left;
|
||
border-bottom: 1px solid var(--line);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.sources-table td {
|
||
padding: 10px 14px;
|
||
border-bottom: 1px solid var(--line);
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.sources-table tbody tr:last-child td { border-bottom: 0; }
|
||
|
||
.sources-table tbody tr:hover td {
|
||
background: var(--soft-teal);
|
||
}
|
||
|
||
.sources-table a {
|
||
color: var(--teal);
|
||
text-decoration: none;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.sources-table a:hover { text-decoration: underline; }
|
||
|
||
.source-name { max-width: 260px; }
|
||
|
||
.source-badge {
|
||
display: inline-block;
|
||
font-size: 0.68rem;
|
||
font-weight: 800;
|
||
padding: 2px 8px;
|
||
border-radius: 999px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.03em;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.badge--teal { background: var(--soft-teal); color: var(--teal-dark); }
|
||
.badge--amber { background: #fef3cd; color: var(--amber); }
|
||
.badge--coral { background: var(--soft-coral); color: var(--coral); }
|
||
.badge--muted { background: #eef0f5; color: var(--muted); }
|
||
|
||
.source-cat {
|
||
font-size: 0.75rem;
|
||
color: var(--muted);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.status-active { color: #15803d; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
|
||
.status-inactive { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
|
||
|
||
.sources-skeleton td {
|
||
color: var(--muted);
|
||
font-style: italic;
|
||
padding: 16px 14px;
|
||
}
|
||
|
||
/* AI Stack */
|
||
.stack-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 14px;
|
||
}
|
||
|
||
.stack-card {
|
||
background: var(--panel);
|
||
border: 1px solid var(--line);
|
||
border-left: 3px solid var(--teal);
|
||
border-radius: 0 8px 8px 0;
|
||
padding: 18px 20px;
|
||
}
|
||
|
||
.stack-card h3 {
|
||
font-size: 0.70rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
color: var(--muted);
|
||
margin: 0 0 12px;
|
||
}
|
||
|
||
.stack-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0 0 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 7px;
|
||
font-size: 0.84rem;
|
||
color: var(--ink);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.stack-badge {
|
||
display: inline-block;
|
||
font-size: 0.62rem;
|
||
font-weight: 800;
|
||
padding: 1px 6px;
|
||
border-radius: 4px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
vertical-align: middle;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.stack-badge--azure { background: #dbeafe; color: #1d4ed8; }
|
||
.stack-badge--gpu { background: #f3e8ff; color: #7c3aed; }
|
||
.stack-badge--api { background: #fef3cd; color: var(--amber); }
|
||
|
||
.stack-star {
|
||
font-size: 0.70rem;
|
||
font-weight: 700;
|
||
color: var(--amber);
|
||
}
|
||
|
||
.stack-note {
|
||
font-size: 0.75rem;
|
||
color: var(--muted);
|
||
margin: 8px 0 0;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.stack-note code {
|
||
background: var(--bg);
|
||
padding: 1px 5px;
|
||
border-radius: 3px;
|
||
font-size: 0.72rem;
|
||
}
|
||
|
||
/* Pipeline flow */
|
||
.pipeline-flow {
|
||
display: flex;
|
||
align-items: stretch;
|
||
flex-wrap: wrap;
|
||
gap: 0;
|
||
background: var(--panel);
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.pipeline-step {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 18px 14px;
|
||
text-align: center;
|
||
min-width: 90px;
|
||
flex: 1;
|
||
background: var(--panel);
|
||
}
|
||
|
||
.pipeline-step--end {
|
||
background: var(--soft-teal);
|
||
}
|
||
|
||
.pipeline-step__icon {
|
||
font-size: 1.4rem;
|
||
margin-bottom: 6px;
|
||
display: block;
|
||
}
|
||
|
||
.pipeline-step span:not(.pipeline-step__icon) {
|
||
font-size: 0.78rem;
|
||
font-weight: 700;
|
||
color: var(--ink);
|
||
display: block;
|
||
}
|
||
|
||
.pipeline-step small {
|
||
font-size: 0.67rem;
|
||
color: var(--muted);
|
||
display: block;
|
||
margin-top: 3px;
|
||
}
|
||
|
||
.pipeline-arrow {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 2px;
|
||
color: var(--muted);
|
||
font-size: 1.1rem;
|
||
background: var(--bg);
|
||
border-left: 1px solid var(--line);
|
||
border-right: 1px solid var(--line);
|
||
}
|
||
|
||
.pipeline-arrow::after {
|
||
content: '›';
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* Corpus health sidebar */
|
||
.corpus-health-dl {
|
||
margin: 0;
|
||
padding: 16px;
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 6px 12px;
|
||
font-size: 0.80rem;
|
||
}
|
||
|
||
.corpus-health-dl dt {
|
||
font-weight: 700;
|
||
color: var(--muted);
|
||
font-size: 0.70rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
padding-top: 2px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.corpus-health-dl dd {
|
||
color: var(--ink);
|
||
margin: 0;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.corpus-health-dl code {
|
||
background: var(--bg);
|
||
border: 1px solid var(--line);
|
||
border-radius: 3px;
|
||
font-size: 0.70rem;
|
||
padding: 1px 5px;
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 760px) {
|
||
.corpus-stats-bar {
|
||
flex-wrap: wrap;
|
||
}
|
||
.corpus-stat {
|
||
flex: 1 1 50%;
|
||
border-right: 0;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
.corpus-categories {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.pipeline-flow {
|
||
flex-direction: column;
|
||
}
|
||
.pipeline-arrow {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* Method trace — overrides for #traceList rendered in rich mode */
|
||
.trace-list.is-rich {
|
||
display: grid;
|
||
gap: 8px;
|
||
}
|
||
|
||
.trace-list.is-rich .trace-step {
|
||
display: grid;
|
||
grid-template-columns: 28px 1fr;
|
||
gap: 10px;
|
||
align-items: start;
|
||
padding: 10px 12px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
background: #fbfcfe;
|
||
list-style: none;
|
||
}
|
||
|
||
.trace-list.is-rich .trace-step__marker {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 22px;
|
||
height: 22px;
|
||
border-radius: 999px;
|
||
border: 1px solid var(--line);
|
||
background: #fff;
|
||
color: var(--muted);
|
||
font-size: 0.72rem;
|
||
font-weight: 900;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.trace-list.is-rich .trace-step__label {
|
||
display: block;
|
||
font-weight: 800;
|
||
color: var(--ink);
|
||
font-size: 0.94rem;
|
||
}
|
||
|
||
.trace-list.is-rich .trace-step__detail {
|
||
display: block;
|
||
margin-top: 4px;
|
||
color: var(--muted);
|
||
font-size: 0.83rem;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.trace-list.is-rich .trace-step.is-running {
|
||
background: var(--soft-coral);
|
||
}
|
||
.trace-list.is-rich .trace-step.is-running .trace-step__marker {
|
||
background: rgba(194, 65, 12, 0.18);
|
||
border-color: rgba(194, 65, 12, 0.35);
|
||
color: var(--coral);
|
||
animation: drTracePulse 950ms ease-in-out infinite;
|
||
}
|
||
|
||
.trace-list.is-rich .trace-step.is-done .trace-step__marker {
|
||
background: var(--soft-teal);
|
||
border-color: rgba(15, 118, 110, 0.30);
|
||
color: var(--teal-dark);
|
||
}
|
||
|
||
.trace-list.is-rich .trace-step.is-warning .trace-step__marker {
|
||
background: #fff4dc;
|
||
border-color: rgba(183, 121, 31, 0.35);
|
||
color: var(--amber);
|
||
}
|
||
|
||
.trace-list.is-rich .trace-step.is-error {
|
||
background: #fff0e8;
|
||
}
|
||
.trace-list.is-rich .trace-step.is-error .trace-step__marker {
|
||
background: rgba(180, 30, 30, 0.10);
|
||
border-color: rgba(180, 30, 30, 0.30);
|
||
color: #b41e1e;
|
||
}
|
||
|
||
@keyframes drTracePulse {
|
||
0%, 100% { opacity: 0.55; transform: scale(0.92); }
|
||
50% { opacity: 1; transform: scale(1.04); }
|
||
}
|
||
|
||
/* Source modal */
|
||
.dr-source-modal {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(23, 32, 51, 0.62);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 24px;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.dr-source-modal__dialog {
|
||
width: min(960px, 100%);
|
||
max-height: 90vh;
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
box-shadow: 0 28px 92px rgba(0, 0, 0, 0.34);
|
||
overflow: hidden;
|
||
display: grid;
|
||
grid-template-rows: auto 1fr;
|
||
}
|
||
|
||
.dr-source-modal__head {
|
||
display: flex;
|
||
align-items: start;
|
||
justify-content: space-between;
|
||
gap: 14px;
|
||
padding: 16px 18px;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.dr-source-modal__head h3 {
|
||
margin: 0;
|
||
color: var(--ink);
|
||
line-height: 1.25;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.dr-source-modal__body {
|
||
display: grid;
|
||
grid-template-columns: 260px minmax(0, 1fr);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.dr-source-modal__meta,
|
||
.dr-source-modal__text {
|
||
padding: 16px 18px;
|
||
overflow: auto;
|
||
}
|
||
|
||
.dr-source-modal__meta {
|
||
border-right: 1px solid var(--line);
|
||
background: #fbfcfe;
|
||
color: var(--muted);
|
||
font-size: 0.88rem;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.dr-source-modal__meta dt {
|
||
color: var(--ink);
|
||
font-weight: 800;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.dr-source-modal__meta dt:first-of-type { margin-top: 0; }
|
||
|
||
.dr-source-modal__text {
|
||
white-space: normal;
|
||
line-height: 1.7;
|
||
color: var(--ink);
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.dr-source-modal__body { grid-template-columns: 1fr; }
|
||
.dr-source-modal__meta { border-right: 0; border-bottom: 1px solid var(--line); }
|
||
.dr-source-card { grid-template-columns: 32px 1fr; }
|
||
.dr-source-aside { display: none; }
|
||
}
|
||
|
||
/* Per-sub-question agent report cards (v2) */
|
||
.dr-subq-list {
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
.dr-subq-report {
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 12px 13px;
|
||
background: #fbfcfe;
|
||
}
|
||
|
||
.dr-subq-report__head {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr auto;
|
||
gap: 10px;
|
||
align-items: start;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.dr-subq-report__index {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 30px;
|
||
height: 24px;
|
||
padding: 0 8px;
|
||
border-radius: 999px;
|
||
background: var(--soft-teal);
|
||
color: var(--teal-dark);
|
||
font-weight: 800;
|
||
font-variant-numeric: tabular-nums;
|
||
font-size: 0.78rem;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.dr-subq-report__question {
|
||
font-weight: 700;
|
||
color: var(--ink);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.dr-subq-report__rationale {
|
||
margin-top: 4px;
|
||
color: var(--muted);
|
||
font-size: 0.86rem;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.dr-mini-source-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
display: grid;
|
||
gap: 6px;
|
||
}
|
||
|
||
.dr-mini-source {
|
||
display: grid;
|
||
grid-template-columns: 32px 1fr;
|
||
gap: 8px;
|
||
align-items: start;
|
||
padding: 8px 10px;
|
||
background: #fff;
|
||
border: 1px solid var(--line);
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.dr-mini-source--empty {
|
||
display: block;
|
||
color: var(--muted);
|
||
padding: 8px 10px;
|
||
}
|
||
|
||
.dr-mini-source__n {
|
||
font-variant-numeric: tabular-nums;
|
||
color: var(--coral);
|
||
font-weight: 800;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.dr-mini-source__title {
|
||
display: inline-block;
|
||
font-weight: 700;
|
||
color: var(--ink);
|
||
text-decoration: none;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
a.dr-mini-source__title:hover { color: var(--teal-dark); text-decoration: underline; }
|
||
|
||
.dr-mini-source__meta {
|
||
color: var(--muted);
|
||
font-size: 0.78rem;
|
||
margin-top: 3px;
|
||
}
|
||
|
||
.dr-mini-source__excerpt {
|
||
color: var(--muted);
|
||
font-size: 0.86rem;
|
||
line-height: 1.45;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.dr-external-link {
|
||
display: inline-block;
|
||
color: var(--teal);
|
||
font-size: 0.8em;
|
||
margin-left: 3px;
|
||
vertical-align: 1px;
|
||
}
|
||
|
||
a.dr-source-title-link {
|
||
color: var(--ink);
|
||
text-decoration: none;
|
||
}
|
||
|
||
a.dr-source-title-link:hover {
|
||
color: var(--teal-dark);
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* ── Corpus Explorer: Search bar ─────────────────────────────────────── */
|
||
.corpus-search-box {
|
||
padding: 0 0 24px;
|
||
border-bottom: 1px solid var(--line);
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.corpus-search-row {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
.corpus-search-input {
|
||
flex: 1;
|
||
height: 40px;
|
||
padding: 0 12px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 6px;
|
||
font-size: 0.9rem;
|
||
background: var(--panel);
|
||
color: var(--ink);
|
||
outline: none;
|
||
transition: border-color 0.15s;
|
||
}
|
||
.corpus-search-input:focus { border-color: var(--teal); }
|
||
|
||
.corpus-search-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 10px;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.search-modes,
|
||
.lang-pills {
|
||
display: flex;
|
||
gap: 4px;
|
||
}
|
||
|
||
.mode-pill {
|
||
padding: 3px 12px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 999px;
|
||
background: transparent;
|
||
color: var(--muted);
|
||
font-size: 0.8rem;
|
||
cursor: pointer;
|
||
transition: background 0.12s, color 0.12s, border-color 0.12s;
|
||
}
|
||
.mode-pill:hover { border-color: var(--teal); color: var(--teal); }
|
||
.mode-pill.is-active {
|
||
background: var(--teal);
|
||
border-color: var(--teal);
|
||
color: #fff;
|
||
}
|
||
|
||
/* ── Search results ───────────────────────────────────────────────────── */
|
||
.corpus-search-results {
|
||
margin: 0 0 32px;
|
||
}
|
||
|
||
.search-results-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
.search-results-count {
|
||
font-size: 0.8rem;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.search-loading,
|
||
.search-empty,
|
||
.search-error,
|
||
.search-hint {
|
||
font-size: 0.85rem;
|
||
color: var(--muted);
|
||
padding: 12px 0;
|
||
}
|
||
.search-error { color: var(--coral); }
|
||
|
||
.passage-card {
|
||
background: var(--panel);
|
||
border: 1px solid var(--line);
|
||
border-left: 3px solid var(--teal);
|
||
border-radius: 6px;
|
||
padding: 14px 16px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.passage-card__meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 6px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.passage-section {
|
||
font-size: 0.78rem;
|
||
color: var(--muted);
|
||
font-style: italic;
|
||
}
|
||
|
||
.passage-score {
|
||
font-size: 0.75rem;
|
||
background: var(--soft-teal);
|
||
color: var(--teal-dark);
|
||
padding: 1px 7px;
|
||
border-radius: 999px;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.passage-card__title {
|
||
display: block;
|
||
font-size: 0.88rem;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
text-decoration: none;
|
||
margin-bottom: 6px;
|
||
}
|
||
.passage-card__title:hover { color: var(--teal); text-decoration: underline; }
|
||
|
||
.passage-card__excerpt {
|
||
font-size: 0.82rem;
|
||
color: var(--muted);
|
||
line-height: 1.55;
|
||
margin: 0;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 4;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.passage-card mark {
|
||
background: var(--soft-teal);
|
||
color: var(--teal-dark);
|
||
border-radius: 2px;
|
||
padding: 0 1px;
|
||
}
|
||
|
||
/* ── Category card browse button ──────────────────────────────────────── */
|
||
.cat-browse-btn {
|
||
display: inline-block;
|
||
margin-top: 10px;
|
||
padding: 4px 12px;
|
||
background: var(--soft-teal);
|
||
border: 1px solid var(--teal);
|
||
border-radius: 5px;
|
||
color: var(--teal);
|
||
font-size: 0.8rem;
|
||
cursor: pointer;
|
||
transition: background 0.12s, color 0.12s;
|
||
}
|
||
.cat-browse-btn:hover {
|
||
background: var(--teal);
|
||
color: #fff;
|
||
}
|
||
|
||
/* ── Drill-down panel ─────────────────────────────────────────────────── */
|
||
.corpus-drill-panel {
|
||
margin-top: 20px;
|
||
background: var(--panel);
|
||
border: 1px solid var(--line);
|
||
border-top: 3px solid var(--teal);
|
||
border-radius: 0 0 8px 8px;
|
||
padding: 24px;
|
||
}
|
||
|
||
.drill-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 20px;
|
||
}
|
||
.drill-header h3 {
|
||
margin: 4px 0 0;
|
||
font-size: 1.05rem;
|
||
}
|
||
|
||
.drill-close-btn {
|
||
background: transparent;
|
||
border: 1px solid var(--line);
|
||
border-radius: 50%;
|
||
width: 28px;
|
||
height: 28px;
|
||
cursor: pointer;
|
||
color: var(--muted);
|
||
font-size: 0.9rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.drill-close-btn:hover { border-color: var(--teal); color: var(--teal); }
|
||
|
||
.drill-loading,
|
||
.drill-empty,
|
||
.drill-error {
|
||
font-size: 0.85rem;
|
||
color: var(--muted);
|
||
padding: 8px 0;
|
||
}
|
||
.drill-error { color: var(--coral); }
|
||
|
||
.doc-list { display: flex; flex-direction: column; gap: 8px; }
|
||
|
||
.doc-list__item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
padding: 10px 12px;
|
||
background: var(--bg);
|
||
border: 1px solid var(--line);
|
||
border-radius: 5px;
|
||
}
|
||
.doc-list__item:hover { border-color: var(--teal); }
|
||
|
||
.doc-list__info { flex: 1; min-width: 0; }
|
||
|
||
.doc-list__title {
|
||
display: block;
|
||
font-size: 0.88rem;
|
||
font-weight: 500;
|
||
color: var(--ink);
|
||
text-decoration: none;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.doc-list__title:hover { color: var(--teal); text-decoration: underline; }
|
||
|
||
.doc-list__meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-top: 4px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.doc-list__date {
|
||
font-size: 0.78rem;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.doc-list__chunks {
|
||
flex-shrink: 0;
|
||
font-size: 0.75rem;
|
||
background: var(--soft-teal);
|
||
color: var(--teal-dark);
|
||
padding: 2px 8px;
|
||
border-radius: 999px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.doc-list__more-wrap {
|
||
text-align: center;
|
||
margin-top: 16px;
|
||
}
|
||
.doc-list__more {
|
||
padding: 7px 20px;
|
||
border: 1px solid var(--teal);
|
||
border-radius: 5px;
|
||
background: transparent;
|
||
color: var(--teal);
|
||
font-size: 0.85rem;
|
||
cursor: pointer;
|
||
transition: background 0.12s, color 0.12s;
|
||
}
|
||
.doc-list__more:hover { background: var(--teal); color: #fff; }
|
||
|
||
/* ── Sources table expand column ──────────────────────────────────────── */
|
||
.source-expand-cell { width: 32px; padding: 0 4px !important; text-align: center; }
|
||
|
||
.source-expand-btn {
|
||
background: transparent;
|
||
border: 1px solid var(--line);
|
||
border-radius: 4px;
|
||
width: 22px;
|
||
height: 22px;
|
||
font-size: 0.65rem;
|
||
cursor: pointer;
|
||
color: var(--muted);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: border-color 0.12s, color 0.12s;
|
||
}
|
||
.source-expand-btn:hover { border-color: var(--teal); color: var(--teal); }
|
||
|
||
.source-expand-row > td {
|
||
padding: 0 !important;
|
||
background: var(--soft-teal);
|
||
border-top: none;
|
||
}
|
||
|
||
.source-expand-inner {
|
||
padding: 16px 20px;
|
||
}
|
||
|
||
.source-expand-loading,
|
||
.source-expand-error {
|
||
font-size: 0.82rem;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.source-expand-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
}
|
||
|
||
.source-expand-dl {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 4px 12px;
|
||
font-size: 0.82rem;
|
||
margin: 0;
|
||
}
|
||
.source-expand-dl dt { color: var(--muted); white-space: nowrap; }
|
||
.source-expand-dl dd { margin: 0; }
|
||
|
||
.source-expand-url {
|
||
font-size: 0.78rem;
|
||
word-break: break-all;
|
||
margin: 0 0 12px;
|
||
}
|
||
.source-expand-url a { color: var(--teal); }
|
||
|
||
.source-browse-btn {
|
||
font-size: 0.82rem !important;
|
||
padding: 5px 14px !important;
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
.source-expand-grid { grid-template-columns: 1fr; }
|
||
.corpus-search-controls { flex-direction: column; align-items: flex-start; }
|
||
}
|
||
|
||
/* =====================================================================
|
||
Advocate tool (.adv-*)
|
||
===================================================================== */
|
||
|
||
/* Role selector row */
|
||
.adv-role-row {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
padding: 18px 20px;
|
||
background: var(--soft-teal);
|
||
border-radius: 8px;
|
||
border: 1px solid color-mix(in srgb, var(--teal) 20%, transparent);
|
||
margin-bottom: 18px;
|
||
}
|
||
.adv-role-row .control-label {
|
||
font-size: 0.82rem;
|
||
font-weight: 600;
|
||
color: var(--teal-dark, var(--teal));
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
margin: 0;
|
||
}
|
||
.adv-role-select {
|
||
appearance: none;
|
||
background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%23666'/%3E%3C/svg%3E") no-repeat right 14px center;
|
||
border: 1px solid var(--line);
|
||
border-radius: 6px;
|
||
padding: 10px 38px 10px 14px;
|
||
font-size: 0.95rem;
|
||
color: var(--ink);
|
||
cursor: pointer;
|
||
width: 100%;
|
||
max-width: 480px;
|
||
}
|
||
.adv-role-select:focus { outline: 2px solid var(--teal); outline-offset: 2px; }
|
||
.adv-role-custom {
|
||
border: 1px solid var(--line);
|
||
border-radius: 6px;
|
||
padding: 9px 14px;
|
||
font-size: 0.93rem;
|
||
color: var(--ink);
|
||
width: 100%;
|
||
max-width: 480px;
|
||
background: var(--panel);
|
||
}
|
||
.adv-role-custom:focus { outline: 2px solid var(--teal); outline-offset: 2px; }
|
||
|
||
/* Advocate result banner */
|
||
.adv-banner {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 8px 14px;
|
||
padding: 14px 20px;
|
||
background: var(--soft-teal);
|
||
border-radius: 8px;
|
||
border-left: 4px solid var(--teal);
|
||
margin-bottom: 16px;
|
||
}
|
||
.adv-banner__label {
|
||
font-size: 0.75rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
color: var(--teal-dark, var(--teal));
|
||
flex-shrink: 0;
|
||
}
|
||
.adv-banner__role {
|
||
font-size: 1.05rem;
|
||
color: var(--ink);
|
||
}
|
||
.adv-banner__note {
|
||
font-size: 0.8rem;
|
||
color: var(--muted);
|
||
flex-basis: 100%;
|
||
}
|
||
|
||
/* Client strengths card */
|
||
.adv-strengths {
|
||
background: var(--soft-teal);
|
||
border-radius: 8px;
|
||
border: 1px solid color-mix(in srgb, var(--teal) 20%, transparent);
|
||
padding: 16px 20px;
|
||
margin-bottom: 14px;
|
||
}
|
||
.adv-strengths__head {
|
||
font-size: 0.9rem;
|
||
font-weight: 700;
|
||
color: var(--teal-dark, var(--teal));
|
||
margin: 0 0 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
.adv-strengths__list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 7px;
|
||
}
|
||
.adv-strengths__item {
|
||
padding-left: 24px;
|
||
position: relative;
|
||
font-size: 0.88rem;
|
||
color: var(--ink);
|
||
line-height: 1.5;
|
||
}
|
||
.adv-strengths__item::before {
|
||
content: '✓';
|
||
position: absolute;
|
||
left: 0;
|
||
color: var(--teal);
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* Opposing weaknesses card */
|
||
.adv-weaknesses {
|
||
background: color-mix(in srgb, var(--amber, #c87f00) 10%, transparent);
|
||
border-radius: 8px;
|
||
border: 1px solid color-mix(in srgb, var(--amber, #c87f00) 25%, transparent);
|
||
padding: 16px 20px;
|
||
margin-bottom: 14px;
|
||
}
|
||
.adv-weaknesses__head {
|
||
font-size: 0.9rem;
|
||
font-weight: 700;
|
||
color: var(--amber-dark, #8a5700);
|
||
margin: 0 0 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
.adv-weaknesses__list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 7px;
|
||
}
|
||
.adv-weaknesses__item {
|
||
padding-left: 24px;
|
||
position: relative;
|
||
font-size: 0.88rem;
|
||
color: var(--ink);
|
||
line-height: 1.5;
|
||
}
|
||
.adv-weaknesses__item::before {
|
||
content: '⚠';
|
||
position: absolute;
|
||
left: 0;
|
||
font-size: 0.85em;
|
||
color: var(--amber, #c87f00);
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
.adv-role-select, .adv-role-custom { max-width: 100%; }
|
||
.adv-banner { flex-direction: column; align-items: flex-start; }
|
||
}
|
||
|
||
/* ── Branch-from-sub-question panel ──────────────────────────────────────── */
|
||
.branch-panel {
|
||
background: #f0faf8;
|
||
border: 1px solid var(--teal);
|
||
border-left: 4px solid var(--teal);
|
||
border-radius: 8px;
|
||
padding: 14px 16px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.branch-panel__head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.branch-panel__label {
|
||
font-weight: 700;
|
||
font-size: 0.82rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
color: var(--teal-dark);
|
||
}
|
||
|
||
.branch-panel__origin {
|
||
margin: 0 0 8px;
|
||
font-size: 0.88rem;
|
||
color: var(--ink);
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.branch-panel__prior {
|
||
margin-bottom: 10px;
|
||
font-size: 0.87rem;
|
||
}
|
||
|
||
.branch-panel__prior summary {
|
||
cursor: pointer;
|
||
color: var(--teal-dark);
|
||
font-weight: 600;
|
||
user-select: none;
|
||
}
|
||
|
||
.branch-panel__brief {
|
||
margin-top: 6px;
|
||
padding: 8px 10px;
|
||
background: rgba(255,255,255,0.7);
|
||
border-radius: 5px;
|
||
font-size: 0.86rem;
|
||
color: var(--muted);
|
||
line-height: 1.5;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
/* "Branch ↓" button on sub-Q cards */
|
||
.dr-branch-btn {
|
||
align-self: start;
|
||
padding: 4px 10px;
|
||
font-size: 0.78rem;
|
||
font-weight: 700;
|
||
background: transparent;
|
||
border: 1px solid var(--teal);
|
||
border-radius: 5px;
|
||
color: var(--teal-dark);
|
||
white-space: nowrap;
|
||
transition: background 0.12s, color 0.12s;
|
||
}
|
||
|
||
.dr-branch-btn:hover {
|
||
background: var(--teal);
|
||
color: #fff;
|
||
}
|
||
|
||
/* ── Source modal: summary + chunk toggle + all-chunks ───────────────────── */
|
||
.dr-modal-summary {
|
||
font-size: 0.93rem;
|
||
line-height: 1.65;
|
||
color: var(--ink);
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.dr-modal-summary--empty em {
|
||
color: var(--muted);
|
||
font-size: 0.87rem;
|
||
}
|
||
|
||
.dr-modal-chunk-toggle,
|
||
.dr-modal-all-chunks {
|
||
display: inline-block;
|
||
margin-bottom: 8px;
|
||
padding: 4px 10px;
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
background: transparent;
|
||
border: 1px solid var(--line);
|
||
border-radius: 5px;
|
||
color: var(--teal-dark);
|
||
cursor: pointer;
|
||
transition: background 0.12s, border-color 0.12s;
|
||
}
|
||
|
||
.dr-modal-chunk-toggle:hover,
|
||
.dr-modal-all-chunks:hover {
|
||
background: var(--soft-teal);
|
||
border-color: var(--teal);
|
||
}
|
||
|
||
.dr-modal-chunk-text {
|
||
white-space: pre-wrap;
|
||
font-size: 0.87rem;
|
||
line-height: 1.65;
|
||
color: var(--muted);
|
||
background: #f8f9fb;
|
||
border: 1px solid var(--line);
|
||
border-radius: 6px;
|
||
padding: 10px 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.dr-modal-all-chunks {
|
||
display: block;
|
||
width: 100%;
|
||
text-align: left;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.dr-modal-chunks-list {
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.dr-modal-chunks-head {
|
||
font-weight: 700;
|
||
font-size: 0.82rem;
|
||
color: var(--teal-dark);
|
||
padding: 6px 0 8px;
|
||
border-bottom: 1px solid var(--line);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.dr-modal-chunk-item {
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.dr-modal-chunk-item:last-child { border-bottom: 0; }
|
||
|
||
.dr-modal-chunk-idx {
|
||
display: block;
|
||
font-size: 0.78rem;
|
||
font-weight: 700;
|
||
color: var(--coral);
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.dr-modal-chunk-preview {
|
||
margin: 0;
|
||
font-size: 0.86rem;
|
||
line-height: 1.5;
|
||
color: var(--muted);
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
/* ============================================================
|
||
BVJ Analyzer — document meta, parties, timeline, red flags
|
||
============================================================ */
|
||
|
||
.bvj-doc-meta {
|
||
background: var(--panel);
|
||
border: 1px solid var(--line);
|
||
border-radius: 10px;
|
||
padding: 16px 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.bvj-doc-meta__head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.bvj-doc-meta__authority {
|
||
font-weight: 700;
|
||
color: var(--ink);
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.bvj-doc-type-badge {
|
||
display: inline-block;
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
background: var(--soft-teal);
|
||
color: var(--teal-dark);
|
||
border: 1px solid #b2dbd6;
|
||
border-radius: 20px;
|
||
padding: 2px 10px;
|
||
}
|
||
|
||
.bvj-doc-meta__fields {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px 20px;
|
||
}
|
||
|
||
.bvj-doc-meta__field {
|
||
font-size: 0.84rem;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.bvj-doc-meta__field strong {
|
||
color: var(--ink);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* --- Parties grid --- */
|
||
|
||
.bvj-parties-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||
gap: 12px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.bvj-party-card {
|
||
background: var(--panel);
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 12px 14px;
|
||
}
|
||
|
||
.bvj-party-card__name {
|
||
font-weight: 700;
|
||
font-size: 0.92rem;
|
||
color: var(--ink);
|
||
margin: 0 0 4px;
|
||
}
|
||
|
||
.bvj-party-card__org {
|
||
font-size: 0.8rem;
|
||
color: var(--muted);
|
||
margin: 0 0 6px;
|
||
}
|
||
|
||
.bvj-party-card__rel {
|
||
font-size: 0.8rem;
|
||
font-style: italic;
|
||
color: var(--muted);
|
||
margin: 0 0 8px;
|
||
}
|
||
|
||
.bvj-party-role {
|
||
display: inline-block;
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.03em;
|
||
border-radius: 20px;
|
||
padding: 2px 9px;
|
||
}
|
||
|
||
.bvj-party-role--bvv {
|
||
background: #e8f0fe;
|
||
color: #2d5fa6;
|
||
border: 1px solid #c3d4f8;
|
||
}
|
||
|
||
.bvj-party-role--parent {
|
||
background: var(--soft-teal);
|
||
color: var(--teal-dark);
|
||
border: 1px solid #b2dbd6;
|
||
}
|
||
|
||
.bvj-party-role--child {
|
||
background: #ecfdf5;
|
||
color: #166534;
|
||
border: 1px solid #bbf7d0;
|
||
}
|
||
|
||
.bvj-party-role--third {
|
||
background: #f3f4f6;
|
||
color: #4b5563;
|
||
border: 1px solid var(--line);
|
||
}
|
||
|
||
.bvj-party-role--other {
|
||
background: #fafafa;
|
||
color: var(--muted);
|
||
border: 1px solid var(--line);
|
||
}
|
||
|
||
/* --- Timeline --- */
|
||
|
||
.bvj-timeline-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.bvj-timeline-event {
|
||
display: grid;
|
||
grid-template-columns: 130px 1fr;
|
||
border-left: 3px solid var(--line);
|
||
border-radius: 0 6px 6px 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.bvj-timeline-event--high { border-left-color: var(--coral); }
|
||
.bvj-timeline-event--medium { border-left-color: var(--amber); }
|
||
.bvj-timeline-event--low { border-left-color: var(--line); }
|
||
|
||
.bvj-timeline-date {
|
||
font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
|
||
font-size: 0.78rem;
|
||
color: var(--muted);
|
||
background: #f3f4f6;
|
||
border-right: 1px solid var(--line);
|
||
padding: 10px 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
gap: 2px;
|
||
}
|
||
|
||
.bvj-timeline-time {
|
||
font-size: 0.72rem;
|
||
color: var(--muted);
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.bvj-timeline-body {
|
||
background: var(--panel);
|
||
padding: 10px 14px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.bvj-timeline-actor {
|
||
font-size: 0.78rem;
|
||
font-weight: 700;
|
||
color: var(--teal-dark);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.bvj-timeline-action {
|
||
font-size: 0.88rem;
|
||
color: var(--ink);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* --- Red flags --- */
|
||
|
||
.bvj-red-flags {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.bvj-red-flag {
|
||
background: var(--panel);
|
||
border: 1px solid var(--line);
|
||
border-radius: 8px;
|
||
padding: 14px 16px;
|
||
}
|
||
|
||
.bvj-red-flag--high { border-left: 3px solid var(--coral); }
|
||
.bvj-red-flag--medium { border-left: 3px solid var(--amber); }
|
||
.bvj-red-flag--low { border-left: 3px solid var(--line); }
|
||
|
||
.bvj-red-flag__head {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.bvj-red-flag__desc {
|
||
font-weight: 700;
|
||
font-size: 0.9rem;
|
||
color: var(--ink);
|
||
flex: 1;
|
||
margin: 0;
|
||
}
|
||
|
||
.bvj-red-flag__legal {
|
||
display: inline-block;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
background: var(--soft-teal);
|
||
color: var(--teal-dark);
|
||
border: 1px solid #b2dbd6;
|
||
border-radius: 20px;
|
||
padding: 2px 9px;
|
||
white-space: nowrap;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.bvj-red-flag__details {
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.bvj-red-flag__details summary {
|
||
font-size: 0.8rem;
|
||
color: var(--teal);
|
||
cursor: pointer;
|
||
user-select: none;
|
||
}
|
||
|
||
.bvj-red-flag__check {
|
||
font-size: 0.84rem;
|
||
font-style: italic;
|
||
color: var(--muted);
|
||
margin: 6px 0 0;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* --- Severity badges --- */
|
||
|
||
.bvj-severity {
|
||
display: inline-block;
|
||
font-size: 0.72rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
border-radius: 20px;
|
||
padding: 2px 9px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.bvj-severity-high {
|
||
background: var(--soft-coral);
|
||
color: var(--coral);
|
||
border: 1px solid #f9c6ae;
|
||
}
|
||
|
||
.bvj-severity-medium {
|
||
background: #fffbeb;
|
||
color: var(--amber);
|
||
border: 1px solid #fde68a;
|
||
}
|
||
|
||
.bvj-severity-low {
|
||
background: #f3f4f6;
|
||
color: var(--muted);
|
||
border: 1px solid var(--line);
|
||
}
|
||
|
||
/* --- BVJ result banner (role + doc type header) --- */
|
||
|
||
.bvj-banner {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 10px 16px;
|
||
background: var(--soft-teal);
|
||
border: 1px solid #b2dbd6;
|
||
border-radius: 8px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.bvj-banner__label {
|
||
font-size: 0.8rem;
|
||
color: var(--muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.bvj-banner__role {
|
||
font-size: 0.88rem;
|
||
font-weight: 700;
|
||
color: var(--teal-dark);
|
||
}
|
||
|
||
/* --- [DOC] citation inline marker --- */
|
||
|
||
.dr-cite--doc {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.7rem;
|
||
font-weight: 700;
|
||
background: #e8f0fe;
|
||
color: #2d5fa6;
|
||
border: 1px solid #c3d4f8;
|
||
border-radius: 4px;
|
||
padding: 1px 5px;
|
||
margin: 0 1px;
|
||
cursor: default;
|
||
vertical-align: baseline;
|
||
position: relative;
|
||
top: -1px;
|
||
}
|
||
|
||
/* v1 final cascade overrides */
|
||
body {
|
||
background:
|
||
linear-gradient(90deg, rgba(0, 32, 91, 0.055) 1px, transparent 1px),
|
||
linear-gradient(180deg, rgba(186, 12, 47, 0.04), transparent 38rem),
|
||
var(--dbn-paper);
|
||
background-size: 44px 44px, auto, auto;
|
||
color: var(--dbn-ink);
|
||
}
|
||
|
||
.app-shell { padding: 18px clamp(14px, 2vw, 28px) 34px; }
|
||
.topbar { align-items: flex-start; border-bottom: 2px solid rgba(22, 19, 15, 0.14); padding-bottom: 16px; }
|
||
.topbar h1 { color: var(--dbn-ink); font-size: clamp(1.8rem, 2.8vw, 3.2rem); line-height: .95; letter-spacing: 0; }
|
||
.workspace { grid-template-columns: 204px minmax(0, 1fr) 370px; }
|
||
.tool-rail, .tool-panel, .reasoning-panel, .gate-panel, .cap-card, .dashboard-tool-card {
|
||
border-color: rgba(22, 19, 15, 0.15);
|
||
box-shadow: 0 18px 45px rgba(22, 19, 15, 0.08);
|
||
}
|
||
.tool-tab { position: relative; min-height: 74px; overflow: hidden; }
|
||
.tool-tab em { position: absolute; right: 10px; bottom: 8px; color: rgba(0, 32, 91, .22); font-size: 1.25rem; font-style: normal; font-weight: 900; }
|
||
.tool-tab.is-active { background: #fdf8ef; border-color: rgba(186, 12, 47, .28); color: var(--dbn-ink); }
|
||
.tool-tab.is-active::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--dbn-red); }
|
||
.showcase-title { max-width: 980px; color: var(--dbn-ink); font-size: clamp(2.4rem, 6vw, 6.4rem); line-height: .9; letter-spacing: 0; }
|
||
.showcase-tagline { max-width: 780px; color: #403a33; font-size: clamp(1.05rem, 1.6vw, 1.32rem); }
|
||
.cap-grid--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||
.evidence-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||
.google-access-button { display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 18px 0; border-radius: 8px; background: var(--dbn-blue); color: #fff; font-weight: 900; text-decoration: none; }
|
||
.fallback-login { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--dbn-line); }
|
||
.fallback-login summary { cursor: pointer; color: #655d53; font-weight: 800; }
|
||
|
||
@media (max-width: 1120px) {
|
||
.workspace { grid-template-columns: 1fr; }
|
||
.tool-rail { flex-direction: row; overflow-x: auto; }
|
||
.tool-tab { min-width: 170px; }
|
||
.tool-dashboard-grid, .cap-grid--six, .evidence-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
}
|
||
|
||
@media (max-width: 680px) {
|
||
.topbar, .showcase-header-inner { flex-direction: column; }
|
||
.topbar-actions, .showcase-header-actions { width: 100%; justify-content: flex-start; }
|
||
.manifesto-stats, .tool-dashboard-grid, .cap-grid--six, .evidence-inner { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
/* ── Site Footer ─────────────────────────────────────────── */
|
||
.site-footer {
|
||
background: var(--dbn-blue);
|
||
color: rgba(255, 255, 255, 0.82);
|
||
margin-top: 48px;
|
||
}
|
||
.site-footer__inner {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 32px 48px;
|
||
padding: 48px clamp(20px, 4vw, 80px) 32px;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
.site-footer__heading {
|
||
font-size: 0.7rem;
|
||
font-weight: 800;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--dbn-teal);
|
||
margin: 0 0 12px;
|
||
}
|
||
.site-footer__body {
|
||
font-size: 0.88rem;
|
||
line-height: 1.65;
|
||
margin: 0 0 10px;
|
||
}
|
||
.site-footer__body a {
|
||
color: #7dd3ca;
|
||
text-decoration: none;
|
||
}
|
||
.site-footer__body a:hover { text-decoration: underline; }
|
||
.site-footer__sub {
|
||
font-size: 0.78rem;
|
||
color: rgba(255, 255, 255, 0.5);
|
||
margin: 0;
|
||
}
|
||
.site-footer__links {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
.site-footer__links a {
|
||
color: rgba(255, 255, 255, 0.75);
|
||
text-decoration: none;
|
||
font-size: 0.88rem;
|
||
}
|
||
.site-footer__links a:hover { color: #fff; text-decoration: underline; }
|
||
.site-footer__bottom {
|
||
border-top: 1px solid rgba(255, 255, 255, 0.12);
|
||
padding: 20px clamp(20px, 4vw, 80px) 28px;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 32px;
|
||
align-items: flex-start;
|
||
}
|
||
.site-footer__copy {
|
||
font-size: 0.78rem;
|
||
color: rgba(255, 255, 255, 0.5);
|
||
margin: 0;
|
||
white-space: nowrap;
|
||
}
|
||
.site-footer__disclaimer {
|
||
font-size: 0.78rem;
|
||
color: rgba(255, 255, 255, 0.4);
|
||
margin: 0;
|
||
flex: 1;
|
||
min-width: 240px;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
/* ── Workbench Attribution (slim strip on tool pages) ─────── */
|
||
.workbench-attribution {
|
||
text-align: center;
|
||
padding: 10px 24px 14px;
|
||
font-size: 0.72rem;
|
||
color: var(--muted);
|
||
border-top: 1px solid var(--dbn-line);
|
||
background: var(--dbn-paper);
|
||
}
|
||
.workbench-attribution a {
|
||
color: var(--dbn-teal);
|
||
text-decoration: none;
|
||
}
|
||
.workbench-attribution a:hover { text-decoration: underline; }
|
||
|
||
@media (max-width: 860px) {
|
||
.site-footer__inner { grid-template-columns: 1fr; }
|
||
.site-footer__bottom { flex-direction: column; }
|
||
}
|
||
|
||
/* ── Syttende Mai banner ──────────────────────────────────────────────────── */
|
||
.syttende-mai-banner {
|
||
background: #ba0c2f;
|
||
color: #fff;
|
||
padding: 9px 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
letter-spacing: 0.01em;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 200;
|
||
}
|
||
.syttende-mai-close {
|
||
background: none;
|
||
border: none;
|
||
color: rgba(255,255,255,0.75);
|
||
cursor: pointer;
|
||
font-size: 1rem;
|
||
line-height: 1;
|
||
padding: 0 4px;
|
||
margin-left: 8px;
|
||
}
|
||
.syttende-mai-close:hover { color: #fff; }
|
||
|
||
/* ── Free-tier credit badge ──────────────────────────────────────────────── */
|
||
.credit-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
padding: 3px 10px;
|
||
border-radius: 20px;
|
||
font-size: 0.78rem;
|
||
font-weight: 600;
|
||
background: var(--soft-teal);
|
||
color: var(--teal-dark);
|
||
border: 1px solid rgba(15, 118, 110, 0.25);
|
||
white-space: nowrap;
|
||
cursor: default;
|
||
}
|
||
.credit-badge.is-low {
|
||
background: #fff7ed;
|
||
color: #92400e;
|
||
border-color: rgba(183, 121, 31, 0.3);
|
||
}
|
||
.credit-badge.is-empty {
|
||
background: #fff0e8;
|
||
color: #c2410c;
|
||
border-color: rgba(194, 65, 12, 0.3);
|
||
}
|
||
|
||
/* ── Credit-empty modal ───────────────────────────────────────────────────── */
|
||
.credit-modal-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(22, 19, 15, 0.55);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 500;
|
||
}
|
||
.credit-modal {
|
||
background: var(--panel);
|
||
border-radius: 12px;
|
||
padding: 32px 28px 24px;
|
||
max-width: 380px;
|
||
width: calc(100% - 40px);
|
||
box-shadow: var(--shadow);
|
||
text-align: center;
|
||
}
|
||
.credit-modal__icon { font-size: 2.5rem; margin-bottom: 12px; }
|
||
.credit-modal h3 { margin: 0 0 8px; font-size: 1.15rem; color: var(--ink); }
|
||
.credit-modal p { color: var(--muted); font-size: 0.9rem; margin: 0 0 20px; line-height: 1.55; }
|
||
.credit-modal__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
|
||
.credit-modal__actions a {
|
||
padding: 8px 20px;
|
||
border-radius: 8px;
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
}
|
||
.credit-modal__cta { background: var(--teal); color: #fff; }
|
||
.credit-modal__cta:hover { background: var(--teal-dark); }
|
||
.credit-modal__dismiss { background: var(--line); color: var(--ink); }
|
||
.credit-modal__dismiss:hover { background: #c8cdd8; }
|
||
|
||
/* ── Rate-limit toast ────────────────────────────────────────────────────── */
|
||
.credit-toast {
|
||
position: fixed;
|
||
bottom: 24px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: #1b2330;
|
||
color: #fff;
|
||
padding: 10px 20px;
|
||
border-radius: 8px;
|
||
font-size: 0.875rem;
|
||
z-index: 500;
|
||
white-space: nowrap;
|
||
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
|
||
animation: toastIn 0.2s ease;
|
||
}
|
||
@keyframes toastIn {
|
||
from { opacity: 0; transform: translateX(-50%) translateY(8px); }
|
||
to { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════════
|
||
Landing page rebrand — matches dobetternorge.no
|
||
═════════════════════════════════════════════════════════════════════════ */
|
||
|
||
:root {
|
||
--lt-red: #BA0C2F;
|
||
--lt-navy: #00205B;
|
||
--lt-navy-dark: #001540;
|
||
--lt-gold: #f4c542;
|
||
}
|
||
|
||
body.lt-landing {
|
||
background: #fff;
|
||
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
}
|
||
|
||
/* ── Sticky nav ─────────────────────────────────────────────────────────── */
|
||
.lt-nav {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 64px;
|
||
padding: 0 clamp(16px, 3vw, 48px);
|
||
background: rgba(0, 32, 91, 0.97);
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
border-bottom: 1px solid rgba(255,255,255,0.09);
|
||
}
|
||
|
||
.lt-nav__brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.lt-nav__logo {
|
||
height: 34px;
|
||
width: auto;
|
||
filter: brightness(0) invert(1);
|
||
opacity: 0.90;
|
||
display: block;
|
||
}
|
||
|
||
.lt-nav__badge {
|
||
font-family: 'IBM Plex Mono', monospace;
|
||
font-size: 0.68rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.07em;
|
||
text-transform: uppercase;
|
||
color: rgba(244,197,66,0.85);
|
||
border: 1px solid rgba(244,197,66,0.28);
|
||
border-radius: 6px;
|
||
padding: 3px 9px;
|
||
}
|
||
|
||
.lt-nav__right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
}
|
||
|
||
.lt-nav .shell-lang-switcher {
|
||
background: rgba(255,255,255,0.09);
|
||
border-color: rgba(255,255,255,0.16);
|
||
}
|
||
.lt-nav .shell-lang-switcher a { color: rgba(255,255,255,0.72); }
|
||
.lt-nav .shell-lang-switcher a.is-active,
|
||
.lt-nav .shell-lang-switcher a:hover {
|
||
background: rgba(255,255,255,0.17);
|
||
color: #fff;
|
||
}
|
||
|
||
.lt-nav__cta {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
height: 38px;
|
||
padding: 0 20px;
|
||
border-radius: 50px;
|
||
background: var(--lt-red);
|
||
color: #fff;
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.02em;
|
||
text-decoration: none;
|
||
transition: background 140ms, transform 140ms, box-shadow 140ms;
|
||
white-space: nowrap;
|
||
}
|
||
.lt-nav__cta:hover {
|
||
background: #9a0a26;
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 6px 18px rgba(186,12,47,0.40);
|
||
}
|
||
|
||
/* ── Hero ───────────────────────────────────────────────────────────────── */
|
||
.lt-hero {
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: linear-gradient(148deg, var(--lt-navy-dark) 0%, #00205b 58%, #180010 100%);
|
||
padding: clamp(4rem, 9vw, 7.5rem) clamp(16px, 4vw, 60px) clamp(3.5rem, 8vw, 6.5rem);
|
||
text-align: center;
|
||
}
|
||
.lt-hero::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(ellipse 80% 65% at 50% 0%, rgba(186,12,47,0.22), transparent);
|
||
pointer-events: none;
|
||
}
|
||
.lt-hero::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image:
|
||
linear-gradient(90deg, rgba(244,197,66,0.04) 1px, transparent 1px),
|
||
linear-gradient(180deg, rgba(244,197,66,0.03) 1px, transparent 1px);
|
||
background-size: 52px 52px;
|
||
pointer-events: none;
|
||
}
|
||
.lt-hero__inner {
|
||
position: relative;
|
||
z-index: 2;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
.lt-hero__kicker {
|
||
display: inline-block;
|
||
font-family: 'IBM Plex Mono', monospace;
|
||
font-size: 0.70rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
color: var(--lt-gold);
|
||
margin-bottom: 1.2rem;
|
||
opacity: 0.88;
|
||
}
|
||
.lt-hero__title {
|
||
font-family: 'Crimson Pro', serif;
|
||
font-size: clamp(2.5rem, 5.5vw, 5rem);
|
||
font-weight: 700;
|
||
line-height: 1.04;
|
||
color: #fff;
|
||
margin: 0 0 1.25rem;
|
||
text-wrap: balance;
|
||
}
|
||
.lt-hero__body {
|
||
font-size: clamp(1rem, 1.6vw, 1.10rem);
|
||
line-height: 1.82;
|
||
color: rgba(255,255,255,0.74);
|
||
margin: 0 auto 2.6rem;
|
||
max-width: 60ch;
|
||
}
|
||
.lt-hero__stats {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
margin-bottom: 2.8rem;
|
||
}
|
||
.lt-hero__stat {
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 14px 22px;
|
||
border: 1px solid rgba(255,255,255,0.12);
|
||
border-radius: 12px;
|
||
background: rgba(255,255,255,0.05);
|
||
backdrop-filter: blur(4px);
|
||
min-width: 116px;
|
||
}
|
||
.lt-hero__stat strong {
|
||
font-family: 'Crimson Pro', serif;
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
color: var(--lt-gold);
|
||
line-height: 1;
|
||
}
|
||
.lt-hero__stat span {
|
||
font-size: 0.68rem;
|
||
font-weight: 700;
|
||
color: rgba(255,255,255,0.52);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
margin-top: 5px;
|
||
text-align: center;
|
||
}
|
||
.lt-hero__cta-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-family: 'IBM Plex Mono', monospace;
|
||
font-size: 0.80rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
color: rgba(255,255,255,0.45);
|
||
text-decoration: none;
|
||
transition: color 160ms;
|
||
}
|
||
.lt-hero__cta-link:hover { color: var(--lt-gold); }
|
||
|
||
/* ── Tool cards ─────────────────────────────────────────────────────────── */
|
||
.lt-tools {
|
||
padding: clamp(3rem, 6vw, 5.5rem) clamp(16px, 4vw, 60px);
|
||
background: #f6f2ea;
|
||
}
|
||
.lt-tools__header {
|
||
text-align: center;
|
||
max-width: 700px;
|
||
margin: 0 auto 3rem;
|
||
}
|
||
.lt-tools__eyebrow {
|
||
font-family: 'IBM Plex Mono', monospace;
|
||
font-size: 0.70rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.11em;
|
||
text-transform: uppercase;
|
||
color: var(--lt-red);
|
||
margin-bottom: 0.7rem;
|
||
}
|
||
.lt-tools__title {
|
||
font-family: 'Crimson Pro', serif;
|
||
font-size: clamp(1.9rem, 3.5vw, 2.75rem);
|
||
font-weight: 700;
|
||
color: var(--lt-navy);
|
||
margin: 0 0 0.75rem;
|
||
line-height: 1.1;
|
||
}
|
||
.lt-tools__sub {
|
||
color: #5a544d;
|
||
font-size: 0.96rem;
|
||
line-height: 1.75;
|
||
margin: 0;
|
||
}
|
||
|
||
.lt-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 1.2rem;
|
||
max-width: 1280px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.lt-card {
|
||
background: #fff;
|
||
border: 1px solid rgba(0,32,91,0.10);
|
||
border-radius: 14px;
|
||
overflow: hidden;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
display: flex;
|
||
flex-direction: column;
|
||
transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms;
|
||
box-shadow: 0 4px 14px rgba(0,32,91,0.06);
|
||
}
|
||
.lt-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 18px 44px rgba(0,32,91,0.12);
|
||
border-color: rgba(186,12,47,0.28);
|
||
}
|
||
|
||
.lt-card__art {
|
||
width: 100%;
|
||
height: 178px;
|
||
display: block;
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
line-height: 0;
|
||
}
|
||
.lt-card__art svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.lt-card__body {
|
||
padding: 1.2rem 1.4rem 1.5rem;
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.lt-card__badge {
|
||
font-family: 'IBM Plex Mono', monospace;
|
||
font-size: 0.65rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.09em;
|
||
text-transform: uppercase;
|
||
color: var(--lt-red);
|
||
margin: 0 0 0.45rem;
|
||
}
|
||
.lt-card__title {
|
||
font-family: 'Crimson Pro', serif;
|
||
font-size: 1.48rem;
|
||
font-weight: 700;
|
||
color: var(--lt-navy);
|
||
margin: 0 0 0.45rem;
|
||
line-height: 1.1;
|
||
}
|
||
.lt-card__desc {
|
||
font-size: 0.88rem;
|
||
line-height: 1.70;
|
||
color: #5a544d;
|
||
margin: 0;
|
||
flex: 1;
|
||
}
|
||
.lt-card__arrow {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
margin-top: 1rem;
|
||
font-family: 'IBM Plex Mono', monospace;
|
||
font-size: 0.68rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
color: var(--lt-navy);
|
||
opacity: 0.38;
|
||
transition: opacity 150ms, gap 150ms;
|
||
}
|
||
.lt-card:hover .lt-card__arrow { opacity: 1; gap: 9px; }
|
||
|
||
@media (max-width: 900px) {
|
||
.lt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
}
|
||
@media (max-width: 560px) {
|
||
.lt-grid { grid-template-columns: 1fr; }
|
||
.lt-hero__stats { flex-direction: column; align-items: center; }
|
||
.lt-nav__badge { display: none; }
|
||
}
|
||
|
||
/* ── Trust strip ────────────────────────────────────────────────────────── */
|
||
.lt-trust {
|
||
padding: clamp(2.5rem, 5vw, 4rem) clamp(16px, 4vw, 60px);
|
||
background: #fffaf3;
|
||
border-top: 1px solid rgba(0,32,91,0.07);
|
||
border-bottom: 1px solid rgba(0,32,91,0.07);
|
||
}
|
||
.lt-trust__grid {
|
||
max-width: 1280px;
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 1.5rem;
|
||
}
|
||
.lt-trust__item {
|
||
padding: 1.5rem 1.4rem 1.5rem 1.8rem;
|
||
border-left: 4px solid rgba(186,12,47,0.38);
|
||
background: rgba(255,255,255,0.65);
|
||
border-radius: 0 10px 10px 0;
|
||
}
|
||
.lt-trust__item h3 {
|
||
font-family: 'Crimson Pro', serif;
|
||
font-size: 1.28rem;
|
||
font-weight: 700;
|
||
color: var(--lt-navy);
|
||
margin: 0 0 0.55rem;
|
||
}
|
||
.lt-trust__item p {
|
||
font-size: 0.88rem;
|
||
line-height: 1.74;
|
||
color: #5a544d;
|
||
margin: 0;
|
||
}
|
||
@media (max-width: 760px) {
|
||
.lt-trust__grid { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
/* ── Access gate ────────────────────────────────────────────────────────── */
|
||
.lt-access {
|
||
padding: clamp(3rem, 7vw, 5.5rem) clamp(16px, 4vw, 60px);
|
||
background: var(--lt-navy);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.lt-access::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(ellipse 60% 80% at 30% 50%, rgba(244,197,66,0.06), transparent);
|
||
pointer-events: none;
|
||
}
|
||
.lt-access__inner {
|
||
position: relative;
|
||
z-index: 1;
|
||
max-width: 520px;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
.lt-access__eyebrow {
|
||
font-family: 'IBM Plex Mono', monospace;
|
||
font-size: 0.70rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.11em;
|
||
text-transform: uppercase;
|
||
color: var(--lt-gold);
|
||
margin-bottom: 0.8rem;
|
||
opacity: 0.85;
|
||
}
|
||
.lt-access__title {
|
||
font-family: 'Crimson Pro', serif;
|
||
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
|
||
font-weight: 700;
|
||
color: #fff;
|
||
margin: 0 0 0.75rem;
|
||
line-height: 1.08;
|
||
}
|
||
.lt-access__note {
|
||
color: rgba(255,255,255,0.60);
|
||
font-size: 0.90rem;
|
||
line-height: 1.72;
|
||
margin: 0 0 1.8rem;
|
||
}
|
||
.lt-access-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 52px;
|
||
padding: 0 28px;
|
||
border-radius: 10px;
|
||
background: var(--lt-red);
|
||
color: #fff;
|
||
font-weight: 700;
|
||
font-size: 0.98rem;
|
||
letter-spacing: 0.02em;
|
||
text-decoration: none;
|
||
margin: 0 0 1rem;
|
||
transition: background 150ms, transform 150ms, box-shadow 150ms;
|
||
box-shadow: 0 6px 24px rgba(186,12,47,0.35);
|
||
}
|
||
.lt-access-btn:hover {
|
||
background: #9a0a26;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 10px 30px rgba(186,12,47,0.50);
|
||
}
|
||
.lt-access .gate-copy {
|
||
color: rgba(255,255,255,0.45);
|
||
font-size: 0.84rem;
|
||
margin: 0.4rem 0;
|
||
}
|
||
.lt-access .gate-copy a {
|
||
color: rgba(244,197,66,0.78);
|
||
text-decoration: underline;
|
||
text-decoration-color: rgba(244,197,66,0.30);
|
||
}
|
||
.lt-access .fallback-login summary {
|
||
color: rgba(255,255,255,0.42);
|
||
cursor: pointer;
|
||
font-size: 0.84rem;
|
||
margin-top: 0.6rem;
|
||
text-align: center;
|
||
list-style: none;
|
||
}
|
||
.lt-access .passcode-form {
|
||
margin-top: 1.1rem;
|
||
text-align: left;
|
||
}
|
||
.lt-access .passcode-form label {
|
||
display: block;
|
||
color: rgba(255,255,255,0.60);
|
||
font-size: 0.84rem;
|
||
margin-bottom: 4px;
|
||
}
|
||
.lt-access .passcode-form input {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 10px 14px;
|
||
border: 1px solid rgba(255,255,255,0.16);
|
||
border-radius: 8px;
|
||
background: rgba(255,255,255,0.07);
|
||
color: #fff;
|
||
font-size: 0.95rem;
|
||
margin-bottom: 10px;
|
||
outline: none;
|
||
transition: border-color 150ms;
|
||
}
|
||
.lt-access .passcode-form input:focus { border-color: rgba(244,197,66,0.50); }
|
||
.lt-access .passcode-row { display: flex; gap: 8px; }
|
||
.lt-access .passcode-row input { flex: 1; margin-bottom: 0; }
|
||
.lt-access .passcode-row button {
|
||
padding: 0 18px;
|
||
background: var(--lt-gold);
|
||
color: var(--lt-navy);
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-weight: 700;
|
||
font-size: 0.90rem;
|
||
cursor: pointer;
|
||
transition: background 140ms;
|
||
}
|
||
.lt-access .passcode-row button:hover { background: #e2b230; }
|
||
.lt-access .form-status { color: rgba(255,255,255,0.55); font-size: 0.82rem; margin-top: 8px; }
|
||
|
||
/* ── Footer ─────────────────────────────────────────────────────────────── */
|
||
.lt-footer {
|
||
background: var(--lt-navy);
|
||
border-top: 1px solid rgba(255,255,255,0.07);
|
||
padding: clamp(2.5rem, 5vw, 4rem) clamp(16px, 4vw, 60px) 1.5rem;
|
||
color: rgba(255,255,255,0.62);
|
||
font-family: 'Roboto', -apple-system, sans-serif;
|
||
}
|
||
.lt-footer__grid {
|
||
max-width: 1280px;
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1.4fr 0.8fr;
|
||
gap: 3rem;
|
||
padding-bottom: 2.5rem;
|
||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
.lt-footer__logo {
|
||
height: 32px;
|
||
width: auto;
|
||
filter: brightness(0) invert(1);
|
||
opacity: 0.78;
|
||
display: block;
|
||
margin-bottom: 1.1rem;
|
||
}
|
||
.lt-footer__heading {
|
||
font-family: 'Crimson Pro', serif;
|
||
font-size: 1.05rem;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
margin: 0 0 0.7rem;
|
||
}
|
||
.lt-footer__body {
|
||
font-size: 0.84rem;
|
||
line-height: 1.74;
|
||
margin: 0;
|
||
}
|
||
.lt-footer__body a {
|
||
color: rgba(244,197,66,0.75);
|
||
text-decoration: none;
|
||
}
|
||
.lt-footer__body a:hover { color: var(--lt-gold); }
|
||
.lt-footer__sub {
|
||
font-size: 0.78rem;
|
||
color: rgba(255,255,255,0.35);
|
||
margin: 0.75rem 0 0;
|
||
line-height: 1.60;
|
||
}
|
||
.lt-footer__links {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 9px;
|
||
}
|
||
.lt-footer__links a {
|
||
color: rgba(255,255,255,0.56);
|
||
text-decoration: none;
|
||
font-size: 0.87rem;
|
||
transition: color 140ms;
|
||
}
|
||
.lt-footer__links a:hover { color: var(--lt-gold); }
|
||
.lt-footer__bottom {
|
||
max-width: 1280px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
}
|
||
.lt-footer__copy {
|
||
font-size: 0.80rem;
|
||
color: rgba(255,255,255,0.32);
|
||
margin: 0;
|
||
}
|
||
.lt-footer__disclaimer {
|
||
font-size: 0.76rem;
|
||
color: rgba(255,255,255,0.24);
|
||
line-height: 1.62;
|
||
max-width: 62ch;
|
||
margin: 0;
|
||
}
|
||
@media (max-width: 820px) {
|
||
.lt-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
|
||
.lt-footer__bottom { flex-direction: column; }
|
||
}
|