/,
Query-Operatoren) nutzt explizit --font-code (siehe Regel unten). */
--font-mono: var(--font-sans);
--font-code: 'JetBrains Mono', ui-monospace, monospace;
--mono: var(--font-sans);
/* Radius — Fein-/Mittelstufe (P0 Design-System-Konsolidierung) */
--radius-xs: 3px;
--radius-md: 6px;
/* Surface — Weiß/Oberfläche */
--surface: #FFFFFF;
--surface-2: var(--paper);
/* Status — semantische Farben (pass/fail/warn/danger/stable/volatile) */
--status-ok: #1f8a5b;
--status-ok-bg: #e8f3ec;
--status-warn: #b8740a;
--status-warn-bg: #fff3dc;
--status-danger: #c0392b;
--status-danger-bg: #fdecea;
--status-info: #2d6cdf;
--status-info-bg: #e7f1fc;
--success: #1ea672;
/* Type-Skala — Schriftgrößen (10 Stufen) */
--fs-3xs: 10px;
--fs-2xs: 11px;
--fs-xs: 12px;
--fs-sm: 13px;
--fs-md: 14px;
--fs-lg: 16px;
--fs-xl: 18px;
--fs-2xl: 22px;
--fs-3xl: 28px;
--fs-4xl: 34px;
/* Spacing-Skala — Abstände (padding/margin/gap) */
--sp-2: 2px;
--sp-4: 4px;
--sp-6: 6px;
--sp-8: 8px;
--sp-10: 10px;
--sp-12: 12px;
--sp-14: 14px;
--sp-16: 16px;
--sp-20: 20px;
--sp-24: 24px;
--sp-32: 32px;
}
/* Echter Quelltext bleibt monospace, unabhaengig vom --font-mono-Redirect. */
code, pre, kbd, samp { font-family: var(--font-code); }
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
font-family: var(--font-sans);
background: var(--shell-bg);
color: var(--ink-900);
-webkit-font-smoothing: antialiased;
}
/* Body darf scrollen — Shells mit min-height:100vh (.hub/.lib/.cs/.cmp/.bm/
.proj/.preq-cat) wachsen mit ihrem Inhalt und triggern Body-Scroll.
Reader (.app) und QA (.qa-shell) füllen exakt 100vh und scrollen intern,
so dass hier kein Doppel-Scrollbar entsteht. */
html { height: 100%; }
body { min-height: 100%; }
button { font-family: inherit; }
/* ===== App shell ===== */
.app {
display: grid;
grid-template-columns: var(--rail-w) var(--sidebar-w) 1fr;
height: 100vh;
overflow: hidden;
transition: grid-template-columns 0.2s;
}
.app.sidebar-collapsed {
grid-template-columns: var(--rail-w) 0 1fr;
}
.app.sidebar-collapsed .sidebar { display: none; }
.sidebar-toggle {
position: absolute;
top: 56px;
left: var(--rail-w);
width: 28px;
height: 110px;
border: 1px solid var(--paper-3);
border-left: none;
background: var(--paper-2);
border-radius: 0 var(--radius) var(--radius) 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
padding: 0;
transition: background 0.12s;
}
.sidebar-toggle:hover { background: white; }
.sidebar-toggle .lab {
writing-mode: vertical-rl;
font-size: var(--fs-3xs);
font-family: var(--font-sans);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
}
.sidebar-toggle:hover .lab { color: var(--ink-800); }
.sb-close {
position: absolute;
top: 12px;
right: 14px;
background: transparent;
border: none;
font-size: var(--fs-xl);
cursor: pointer;
color: var(--ink-500);
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
line-height: 1;
}
.sb-close:hover { background: var(--paper-3); color: var(--ink-900); }
/* ===== Mode rail ===== */
.rail {
background: var(--navy-900);
color: var(--paper);
display: flex;
flex-direction: column;
align-items: center;
padding: var(--sp-16) 0 var(--sp-14);
gap: var(--sp-4);
border-right: 1px solid var(--navy-700);
}
/* .rail-logo Basis-Styling: konsolidiert weiter unten (ehem. Doppel-Block). Hier nur der Glow-Ring. */
.rail-logo::after {
content: '';
position: absolute;
inset: -3px;
border: 1px solid color-mix(in srgb, var(--pink-500) 35%, transparent);
border-radius: var(--radius-lg);
}
/* .rail-mode Basis + Hover + Active-Fläche: konsolidiert weiter unten. Hier nur der Pink-Marker. */
.rail-mode.active::before {
content: '';
position: absolute;
left: -14px;
top: 8px;
bottom: 8px;
width: 3px;
background: var(--pink-500);
border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}
.rail-mode .soon-dot {
position: absolute;
top: 6px;
right: 6px;
width: 5px;
height: 5px;
background: var(--pink-500);
border-radius: 50%;
opacity: 0.55;
}
/* .rail-mode-label + .rail-spacer: konsolidiert weiter unten (ehem. Doppel-Block). */
.rail-bottom-mode { color: rgba(255,255,255,0.4); }
/* ===== Sidebar ===== */
.sidebar {
background: var(--paper-2);
border-right: 1px solid var(--paper-3);
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 0;
}
.sb-header {
padding: var(--sp-16) var(--sp-16) var(--sp-12);
border-bottom: 1px solid var(--paper-3);
position: sticky;
top: 0;
background: var(--paper-2);
z-index: 5;
}
.sb-mode-label {
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: 0.01em;
color: var(--ink-500);
text-transform: none;
margin-bottom: var(--sp-4);
}
.sb-title {
font-size: var(--fs-xl);
font-weight: 600;
color: var(--ink-900);
letter-spacing: -0.01em;
margin-bottom: var(--sp-12);
}
.sb-search {
display: flex;
align-items: center;
gap: var(--sp-8);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
padding: var(--sp-8) var(--sp-10);
transition: border-color 0.15s;
}
.sb-search:focus-within {
border-color: var(--ink-400);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy-900) 6%, transparent);
}
.sb-search svg { color: var(--ink-500); flex-shrink: 0; }
.sb-search input {
border: none;
outline: none;
background: transparent;
font-size: var(--fs-sm);
width: 100%;
font-family: inherit;
color: var(--ink-900);
}
.sb-search input::placeholder { color: var(--ink-500); }
.sb-search kbd {
background: var(--paper-2);
border: 1px solid var(--paper-3);
border-radius: var(--radius-sm);
padding: 1px var(--sp-4);
font-size: var(--fs-3xs);
font-family: var(--font-mono);
color: var(--ink-600);
}
/* Sidebar tree */
.sb-collapsible {
border-bottom: 1px solid var(--paper-3);
display: flex;
flex-direction: column;
min-height: 0;
}
.sb-collapsible.open {
/* Grow only as needed; scroll inside if content exceeds available height.
Multiple open sections share space proportional to content. */
flex: 0 1 auto;
overflow-y: auto;
min-height: 0;
}
.sb-collapsible:not(.open) {
flex: 0 0 auto;
}
.sb-collapsible-h {
display: flex;
align-items: center;
gap: var(--sp-8);
padding: var(--sp-12) var(--sp-16);
font-family: var(--font-sans);
font-size: var(--fs-2xs);
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-700);
cursor: pointer;
user-select: none;
background: var(--paper-2);
position: sticky;
top: 0;
z-index: 2;
flex-shrink: 0;
border-bottom: 1px solid transparent;
}
.sb-collapsible.open .sb-collapsible-h {
border-bottom-color: var(--paper-3);
}
.sb-collapsible-h:hover { background: var(--paper-3); color: var(--ink-900); }
.sb-collapsible-h .chev {
/* geschlossen: zeigt nach rechts (auf den Inhalt); offen: nach unten.
Konsistent zu allen anderen Sidebar-Toggles (sb-fam-chev, sb-toc-*). */
transform: rotate(0deg);
transition: transform 0.15s;
display: inline-flex;
color: var(--ink-500);
}
.sb-collapsible.open .sb-collapsible-h .chev { transform: rotate(90deg); }
.sb-collapsible-h .lab { flex: 1; }
.sb-collapsible-h .count {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 500;
color: var(--ink-500);
background: var(--paper);
padding: var(--sp-2) var(--sp-6);
border-radius: var(--radius-xs);
letter-spacing: 0;
}
.sb-section {
padding: var(--sp-14) 0 var(--sp-8);
}
.sb-section-title {
padding: 0 var(--sp-16) var(--sp-6);
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: 0.01em;
color: var(--ink-500);
text-transform: none;
display: flex;
align-items: center;
gap: var(--sp-6);
}
.sb-fam {
border-top: 1px solid var(--paper-3);
}
.sb-fam:first-of-type { border-top: none; }
.sb-fam-header {
display: flex;
align-items: center;
gap: var(--sp-8);
padding: var(--sp-10) var(--sp-16);
cursor: pointer;
font-size: var(--fs-xs);
font-weight: 600;
color: var(--ink-900);
user-select: none;
}
.sb-fam-header:hover { color: var(--ink-900); background: color-mix(in srgb, var(--navy-900) 3%, transparent); }
/* Offene Familie: dezenter Farbstich in Familienfarbe -> Gruppe klar erkennbar. */
.sb-fam-header.open { background: color-mix(in srgb, var(--fam, #888) 8%, transparent); }
.sb-fam-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.sb-fam-chev {
margin-left: auto;
color: var(--ink-500);
transition: transform 0.15s;
}
.sb-fam-header.open .sb-fam-chev { transform: rotate(90deg); }
.sb-std {
display: flex;
align-items: flex-start;
gap: var(--sp-8);
/* eingerueckt + Rail in gedaempfter Familienfarbe -> Kind gehoert sichtbar
zur Familie darueber (Hierarchie via Farbe, nicht nur Einrueckung). */
padding: var(--sp-8) var(--sp-16) var(--sp-8) var(--sp-32);
margin-left: var(--sp-20);
cursor: pointer;
font-size: var(--fs-xs);
color: var(--ink-600);
border-left: 2px solid color-mix(in srgb, var(--fam, #888) 30%, transparent);
transition: background 0.1s;
line-height: 1.35;
}
.sb-std:hover { background: color-mix(in srgb, var(--fam, #000) 7%, transparent); color: var(--ink-900); }
.sb-std.active {
background: color-mix(in srgb, var(--fam, #000) 12%, white);
color: var(--ink-900);
border-left-color: var(--fam, var(--accent));
font-weight: 600;
}
.sb-std-id {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--ink-500);
white-space: nowrap;
font-weight: 500;
margin-top: 1px;
}
.sb-std.active .sb-std-id { color: var(--fam, var(--accent)); }
.sb-std-name { flex: 1; }
/* TOC inside the active standard */
.sb-toc {
background: white;
border-top: 1px solid var(--paper-3);
border-bottom: 1px solid var(--paper-3);
padding: var(--sp-8) 0 var(--sp-12);
}
.sb-toc-header {
padding: var(--sp-10) var(--sp-16) var(--sp-6);
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: 0.01em;
color: var(--ink-500);
text-transform: none;
display: flex;
align-items: center;
gap: var(--sp-6);
}
.sb-toc-group {
padding: var(--sp-4) 0;
}
.sb-toc-group-title {
padding: var(--sp-6) var(--sp-16) var(--sp-4);
font-size: var(--fs-2xs);
font-weight: 600;
color: var(--ink-700);
display: flex;
align-items: center;
gap: var(--sp-6);
cursor: pointer;
user-select: none;
}
.sb-toc-group-title:hover { color: var(--ink-900); }
.sb-toc-group-title .count {
margin-left: auto;
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--ink-500);
font-weight: 400;
}
.sb-toc-group-title .chev {
transition: transform 0.15s;
color: var(--ink-500);
}
.sb-toc-group-title.open .chev { transform: rotate(90deg); }
.sb-toc-item {
display: flex;
gap: var(--sp-8);
padding: var(--sp-4) var(--sp-16) var(--sp-4) var(--sp-32);
cursor: pointer;
font-size: var(--fs-2xs);
color: var(--ink-600);
line-height: 1.35;
border-left: 2px solid transparent;
}
.sb-toc-item:hover { color: var(--ink-900); background: var(--paper); }
.sb-toc-item.active {
color: var(--ink-900);
background: var(--accent-soft);
border-left-color: var(--accent);
font-weight: 500;
}
.sb-toc-item-id {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--ink-500);
font-weight: 500;
flex-shrink: 0;
min-width: 38px;
}
.sb-toc-item.active .sb-toc-item-id { color: var(--accent); }
/* Filter-Highlight: Treffer-Leaves hervorheben (TOC wird NICHT reduziert),
Treffer-enthaltende Container (Kapitel/Buckets) markieren, damit man auch
bei eingeklapptem Zustand sieht, wo Treffer liegen. */
.sb-toc-item.sb-match {
background: color-mix(in srgb, var(--accent) 14%, transparent);
color: var(--ink-900);
font-weight: 600;
box-shadow: inset 2px 0 0 var(--accent);
}
.sb-toc-item.sb-match .sb-toc-item-id { color: var(--accent); }
.sb-toc-chapter-head.sb-has-match,
.sb-toc-bucket-head.sb-has-match {
color: var(--ink-900);
}
.sb-toc-chapter-head.sb-has-match::after,
.sb-toc-bucket-head.sb-has-match::after {
content: "";
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent);
margin-left: var(--sp-6);
flex-shrink: 0;
}
/* Chapter sub-heads (Article kapitel-grouping) and Recital buckets */
.sb-toc-chapter, .sb-toc-bucket {
margin: 0;
}
.sb-toc-chapter-head, .sb-toc-bucket-head {
padding: var(--sp-4) var(--sp-16) var(--sp-4) var(--sp-24);
font-size: var(--fs-2xs);
color: var(--ink-700);
display: flex;
align-items: center;
gap: var(--sp-6);
cursor: pointer;
user-select: none;
letter-spacing: 0.01em;
}
.sb-toc-chapter-head:hover, .sb-toc-bucket-head:hover {
color: var(--ink-900);
background: var(--paper);
}
.sb-toc-chapter-head .chev, .sb-toc-bucket-head .chev {
transition: transform 0.15s;
color: var(--ink-400);
margin-right: 1px;
}
.sb-toc-chapter-head.open .chev,
.sb-toc-bucket-head.open .chev { transform: rotate(90deg); }
.sb-toc-chapter-roman {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 600;
color: var(--accent);
min-width: 38px;
letter-spacing: 0.05em;
white-space: nowrap;
flex-shrink: 0;
align-self: flex-start;
}
.sb-toc-chapter-title {
flex: 1;
min-width: 0;
font-size: var(--fs-2xs);
font-weight: 500;
color: var(--ink-700);
text-wrap: balance;
line-height: 1.35;
}
.sb-toc-bucket-range {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 600;
color: var(--ink-700);
letter-spacing: 0.04em;
white-space: nowrap;
flex-shrink: 0;
min-width: 38px;
align-self: flex-start;
}
.sb-toc-chapter-head .count, .sb-toc-bucket-head .count {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--ink-400);
font-weight: 400;
}
/* Items inside chapter/bucket are slightly indented */
.sb-toc-chapter .sb-toc-item,
.sb-toc-bucket .sb-toc-item {
padding-left: 38px;
}
/* Nodes-TOC: Blätter (ohne Kinder, kein Chevron) fluchten mit den aufklappbaren
Geschwistern (sb-toc-bucket-head). Padding + gap = Bucket-Head-Geometrie, plus
ein unsichtbarer Chevron-Platzhalter → Nummern-Spalte (sb-toc-item-id) bündig
mit sb-toc-bucket-range, auf jeder Verschachtelungstiefe. */
.sb-toc-item.sb-toc-leaf { padding-left: var(--sp-24); gap: var(--sp-6); }
.sb-toc-chapter .sb-toc-item.sb-toc-leaf,
.sb-toc-bucket .sb-toc-item.sb-toc-leaf { padding-left: var(--sp-24); }
.sb-toc-chev-spacer { visibility: hidden; flex-shrink: 0; margin-right: 1px; align-self: flex-start; }
/* ===== Main reader ===== */
.main {
display: flex;
flex-direction: column;
background: var(--reader-bg);
overflow: hidden;
position: relative;
/* Immer in der Inhalts-Spalte (3) verankern. Sonst rutscht main beim Einklappen
der Sidebar in die 0px-Mittelspalte (die .sidebar-toggle ist position:absolute,
belegt also keine Grid-Zelle) und der gesamte Lesebereich verschwindet. */
grid-column: 3;
}
.topbar {
height: 56px;
border-bottom: 1px solid var(--paper-3);
display: flex;
align-items: center;
padding: 0 var(--sp-24);
gap: var(--sp-12);
background: white;
flex-shrink: 0;
}
/* ── Gemeinsame Breadcrumb-Vorlage (AppBreadcrumb) — EIN Design fuer alle Seiten ── */
.app-crumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sp-6);
font-family: var(--font-sans);
font-size: var(--fs-xs);
font-weight: 400;
line-height: 1.4;
color: var(--ink-500);
margin: 0 0 var(--sp-8);
}
.app-crumb-link { color: var(--ink-500); cursor: pointer; text-decoration: none; transition: color .12s ease; }
.app-crumb-link:hover { color: var(--ink-900); }
.app-crumb-link:focus-visible { outline: 2px solid var(--pink-500); outline-offset: 2px; border-radius: var(--radius-xs); }
.app-crumb-sep { color: var(--ink-400); user-select: none; }
.app-crumb-txt,
.app-crumb-cur { color: var(--ink-500); }
.topbar-crumb {
display: flex;
align-items: center;
gap: var(--sp-8);
font-size: var(--fs-xs);
color: var(--ink-600);
}
.topbar-crumb .sep { color: var(--ink-400); }
.topbar-crumb .current { color: var(--ink-900); font-weight: 500; }
.topbar-crumb .crumb-link { cursor: pointer; border-radius: var(--radius-sm); padding: 1px var(--sp-4); transition: color .12s, background .12s; }
.topbar-crumb .crumb-link:hover { color: var(--accent); background: color-mix(in srgb, var(--navy-900) 4%, transparent); }
.topbar-spacer { flex: 1; }
.topbar-tag {
display: inline-flex;
align-items: center;
gap: var(--sp-6);
padding: var(--sp-4) var(--sp-8);
background: var(--accent-soft);
border: 1px solid var(--accent-line);
border-radius: 999px;
font-size: var(--fs-2xs);
color: var(--accent);
font-weight: 600;
font-family: var(--font-mono);
}
.topbar-btn {
background: transparent;
border: 1px solid var(--paper-3);
border-radius: var(--radius-md);
padding: var(--sp-6) var(--sp-12);
font-size: var(--fs-xs);
color: var(--ink-700);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--sp-6);
font-weight: 500;
font-family: inherit;
transition: all 0.12s;
}
.topbar-btn:hover { border-color: var(--ink-400); color: var(--ink-900); background: var(--paper); }
.topbar-btn.active {
background: var(--navy-900);
color: white;
border-color: var(--navy-900);
}
.topbar-btn .kbd {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
background: var(--paper-2);
border: 1px solid var(--paper-3);
border-radius: var(--radius-xs);
padding: 1px var(--sp-4);
color: var(--ink-600);
}
.topbar-btn.active .kbd { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.18); }
.topbar-divider {
width: 1px;
height: 22px;
background: var(--paper-3);
}
/* Reader scroll area */
.reader-scroll {
flex: 1;
overflow-y: auto;
}
/* Sticky breadcrumb bar — single thin line above the reader */
.reader-sticky-bar {
display: flex;
align-items: center;
gap: var(--sp-8);
padding: var(--sp-6) var(--sp-24);
background: rgba(255,255,254,0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid var(--paper-3);
font-family: var(--font-sans);
font-size: var(--fs-2xs);
color: var(--ink-600);
flex-shrink: 0;
min-height: 28px;
z-index: 4;
}
.reader-sticky-bar .rsb-section {
font-size: var(--fs-3xs);
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
color: var(--accent);
}
.reader-sticky-bar .rsb-sep {
color: var(--ink-400);
font-weight: 400;
margin: 0 var(--sp-2);
}
.reader-sticky-bar .rsb-anchor-id {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
font-weight: 600;
color: var(--ink-900);
background: var(--paper-2);
padding: var(--sp-2) var(--sp-8);
border-radius: var(--radius-sm);
border: 1px solid var(--paper-3);
}
.reader-sticky-bar .rsb-em {
color: var(--ink-400);
margin: 0 var(--sp-2);
}
.reader-sticky-bar .rsb-anchor-title {
color: var(--ink-700);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 60%;
}
.reader {
max-width: min(820px, 100%);
margin: 0 auto;
padding: 64px 56px 240px;
font-family: var(--font-serif);
color: var(--ink-900);
font-size: var(--fs-xl);
line-height: 1.65;
position: relative;
}
.reader.compact { font-size: var(--fs-lg); line-height: 1.55; }
.reader.dense { padding: var(--sp-32) 56px 240px; }
.reader.wide { max-width: 920px; }
.reader.iec { max-width: 1100px; padding: 48px 48px 240px; }
.reader.wd { max-width: 1000px; }
/* Cover block — title page of a standard */
.cover {
margin-bottom: var(--sp-24);
padding-bottom: var(--sp-24);
border-bottom: 1px solid var(--paper-3);
}
.cover-fam {
display: inline-flex;
align-items: center;
gap: var(--sp-8);
font-family: var(--font-sans);
font-size: var(--fs-2xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--accent);
margin-bottom: var(--sp-16);
}
.cover-fam-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.cover-id {
font-family: var(--font-mono);
font-size: var(--fs-sm);
color: var(--ink-600);
margin-bottom: var(--sp-8);
font-weight: 500;
}
.cover-title {
font-family: var(--font-sans);
font-size: 44px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0 0 var(--sp-16);
color: var(--ink-900);
}
.cover-meta {
display: flex;
flex-wrap: wrap;
gap: var(--sp-24);
font-family: var(--font-sans);
font-size: var(--fs-xs);
color: var(--ink-600);
margin-top: var(--sp-24);
}
.cover-meta-item { display: flex; flex-direction: column; gap: var(--sp-2); }
.cover-meta-item .lab {
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
}
.cover-meta-item .val { color: var(--ink-900); font-weight: 500; }
/* Section header (Articles / Recitals / Annexes) */
.section-h {
margin: var(--sp-32) 0 var(--sp-20);
display: flex;
align-items: baseline;
gap: var(--sp-14);
border-top: 1px solid var(--paper-3);
padding-top: var(--sp-24);
}
.section-h:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.section-h.section-collapsed { margin-bottom: var(--sp-24); }
.section-chev {
display: inline-flex;
align-items: center;
color: var(--ink-500);
transition: transform 0.15s;
align-self: center;
}
.section-chev.open { transform: rotate(90deg); }
.section-chev:hover { color: var(--ink-900); }
.section-h-count {
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--ink-500);
background: var(--paper-2);
padding: var(--sp-2) var(--sp-8);
border-radius: var(--radius-sm);
font-weight: 500;
}
.section-h-num {
font-family: var(--font-mono);
font-size: var(--fs-sm);
color: var(--accent);
font-weight: 600;
}
.section-h-title {
font-family: var(--font-sans);
font-size: var(--fs-2xl);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink-900);
margin: 0;
}
.article.collapsed .article-head {
margin-bottom: -22px;
border-bottom: none;
border-radius: var(--radius);
}
.art-chev {
display: inline-flex;
color: var(--ink-500);
transition: transform 0.15s;
margin-right: var(--sp-2);
}
.art-chev.open { transform: rotate(90deg); }
.collapse-all-btn {
margin-left: auto;
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-md);
padding: var(--sp-6) var(--sp-12);
font-family: var(--font-sans);
font-size: var(--fs-xs);
font-weight: 500;
color: var(--ink-700);
cursor: pointer;
}
.collapse-all-btn:hover { border-color: var(--accent); color: var(--accent); }
.article {
margin: 44px 0;
scroll-margin-top: 80px;
position: relative;
/* The visible "this is one group" affordance */
padding: var(--sp-20) var(--sp-24) var(--sp-24) var(--sp-32);
border: 1px solid var(--paper-3);
border-radius: var(--radius);
background: var(--surface);
transition: border-color 0.15s, box-shadow 0.15s;
}
.article:hover {
border-color: var(--ink-300);
}
.article.has-active-child {
border-color: var(--accent-line);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.article-head {
display: flex;
align-items: baseline;
gap: var(--sp-14);
margin: -22px -28px var(--sp-16) -32px;
padding: var(--sp-14) var(--sp-24) var(--sp-14) var(--sp-32);
font-family: var(--font-sans);
background: var(--paper);
border-bottom: 1px solid var(--paper-3);
border-radius: var(--radius) var(--radius) 0 0;
}
.article-id {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-500);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
white-space: nowrap;
padding: var(--sp-4) var(--sp-8);
background: var(--surface);
border-radius: var(--radius-sm);
border: 1px solid var(--paper-3);
}
.article-id.active-anchor {
background: var(--accent);
color: white;
border-color: var(--accent);
}
.article-title {
font-size: var(--fs-xl);
font-weight: 600;
letter-spacing: -0.005em;
color: var(--ink-900);
margin: 0;
line-height: 1.3;
}
.article-body {
white-space: pre-wrap;
text-wrap: pretty;
color: var(--ink-800);
}
.article-body p { margin: 0 0 1em; }
.article-body p:last-child { margin-bottom: 0; }
.article-body .sub {
display: block;
padding-left: var(--sp-24);
text-indent: -28px;
margin: 0.4em 0;
}
/* Paragraph block — hanging marker in left margin, body indented */
.para {
position: relative;
padding: var(--sp-6) 0 var(--sp-6) 56px;
margin: var(--sp-14) 0;
scroll-margin-top: 100px;
border-radius: var(--radius-sm);
transition: background 0.12s;
cursor: default;
}
.para + .para {
border-top: 1px dashed var(--paper-3);
padding-top: var(--sp-16);
margin-top: var(--sp-16);
}
.para:hover {
background: color-mix(in srgb, var(--navy-900) 2%, transparent);
}
.para.active-para {
background: var(--accent-soft);
}
.para.active-para::before {
content: '';
position: absolute;
left: -32px;
top: 0;
bottom: 0;
width: 3px;
background: var(--accent);
border-radius: var(--radius-xs);
}
.para-marker {
position: absolute;
left: 0;
top: 6px;
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--ink-500);
width: 44px;
text-align: right;
user-select: none;
cursor: pointer;
padding: var(--sp-2) var(--sp-4);
border-radius: var(--radius-xs);
}
.annex-part-head {
margin: var(--sp-24) 0 var(--sp-14) -52px;
padding: 0 0 var(--sp-8) 52px;
border-bottom: 1px solid var(--ink-100);
font-family: var(--font-sans);
font-weight: 600;
font-size: var(--fs-sm);
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
}
.annex-part-head:first-child {
margin-top: var(--sp-4);
}
.annex-part-head .annex-part-num {
display: inline-block;
}
.para-marker:hover {
color: var(--accent);
background: var(--accent-soft);
}
.para.active-para .para-marker {
color: var(--accent);
font-weight: 700;
}
.para-body {
white-space: pre-wrap;
text-wrap: pretty;
color: var(--ink-800);
}
/* Article without sub-paragraphs gets a flat body */
.article-flat-body {
white-space: pre-wrap;
text-wrap: pretty;
color: var(--ink-800);
margin-top: var(--sp-8);
}
/* Recital — same box treatment as article, but compact */
.recital-box {
margin: var(--sp-16) 0;
scroll-margin-top: 80px;
position: relative;
padding: 0;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
background: var(--surface);
transition: border-color 0.15s, box-shadow 0.15s;
}
.recital-box:hover { border-color: var(--ink-300); }
.recital-box.has-active-child {
border-color: var(--accent-line);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.recital-box .article-head.compact-head {
margin: 0;
padding: var(--sp-8) var(--sp-14);
background: var(--paper);
border-bottom: 1px solid var(--paper-3);
border-radius: var(--radius) var(--radius) 0 0;
font-size: var(--fs-xs);
display: flex;
align-items: center;
gap: var(--sp-10);
}
.recital-box.collapsed .article-head.compact-head {
border-bottom: none;
border-radius: var(--radius);
}
.recital-box .recital-body {
padding: var(--sp-12) var(--sp-16) var(--sp-14);
color: var(--ink-700);
font-size: var(--fs-lg);
line-height: 1.55;
white-space: pre-wrap;
text-wrap: pretty;
border-left: none;
}
.recital-head {
display: flex;
align-items: baseline;
gap: var(--sp-10);
margin-bottom: var(--sp-8);
font-family: var(--font-sans);
}
.recital-id {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-500);
font-weight: 500;
}
.recital-num {
font-family: var(--font-sans);
font-size: var(--fs-2xs);
color: var(--ink-500);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
}
.recital-body {
color: var(--ink-700);
font-size: var(--fs-lg);
line-height: 1.6;
white-space: pre-wrap;
text-wrap: pretty;
}
/* Annex */
.annex {
margin: 36px 0;
scroll-margin-top: 80px;
}
.annex-head {
display: flex;
align-items: baseline;
gap: var(--sp-14);
margin-bottom: var(--sp-14);
font-family: var(--font-sans);
}
.annex-id {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--accent);
font-weight: 600;
padding: var(--sp-2) var(--sp-8);
background: var(--accent-soft);
border: 1px solid var(--accent-line);
border-radius: var(--radius-sm);
}
.annex-title {
font-size: var(--fs-xl);
font-weight: 600;
letter-spacing: -0.005em;
color: var(--ink-900);
margin: 0;
line-height: 1.3;
}
.annex-body {
white-space: pre-wrap;
text-wrap: pretty;
color: var(--ink-800);
font-size: var(--fs-lg);
}
/* Definition pill (inline highlighted term) */
.def-term {
background: linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--pink-500) 18%, transparent) 60%);
border-bottom: 1px dotted var(--pink-400);
cursor: help;
font-style: normal;
text-decoration: none;
color: inherit;
padding: 0 1px;
transition: background 0.15s;
}
.def-term:hover {
background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--pink-500) 28%, transparent) 50%);
}
/* Cross-reference link */
.xref {
color: var(--accent);
border-bottom: 1px solid var(--accent-line);
cursor: pointer;
font-family: var(--font-mono);
font-size: 0.92em;
font-weight: 500;
text-decoration: none;
padding: 0 var(--sp-2);
transition: background 0.15s;
}
.xref:hover { background: var(--accent-soft); border-bottom-color: var(--accent); }
/* Hover popup */
.popover {
position: fixed;
z-index: 200;
background: white;
border: 1px solid var(--ink-300);
border-radius: var(--radius);
box-shadow: var(--shadow-2);
padding: var(--sp-14) var(--sp-16);
max-width: 560px;
min-width: 320px;
max-height: 420px;
overflow: hidden;
font-family: var(--font-sans);
font-size: var(--fs-sm);
line-height: 1.5;
color: var(--ink-800);
pointer-events: none;
animation: pop-in 0.12s ease;
}
@keyframes pop-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.popover-tag {
display: inline-block;
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--pink-500);
margin-bottom: var(--sp-6);
}
.popover-tag.xref { color: var(--accent); border: none; padding: 0; background: none; }
.popover-title {
font-weight: 600;
font-size: var(--fs-md);
margin-bottom: var(--sp-4);
color: var(--ink-900);
}
.popover-body {
font-size: var(--fs-xs);
line-height: 1.55;
color: var(--ink-700);
}
/* Right rail — companion panel (collapsible) */
.companion-toggle {
position: absolute;
top: 56px;
right: 0;
bottom: 0;
width: 36px;
border-left: 1px solid var(--paper-3);
background: var(--paper);
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: var(--sp-16);
cursor: pointer;
z-index: 5;
transition: background 0.12s;
}
.companion-toggle:hover { background: white; }
.companion-toggle .lab {
writing-mode: vertical-rl;
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
margin-top: var(--sp-14);
}
.companion-toggle:hover .lab { color: var(--ink-800); }
.companion {
position: absolute;
top: 56px;
right: 0;
bottom: 0;
width: 320px;
border-left: 1px solid var(--paper-3);
background: var(--paper);
overflow-y: auto;
padding: var(--sp-16) var(--sp-20) 80px;
font-family: var(--font-sans);
font-size: var(--fs-sm);
display: flex;
flex-direction: column;
gap: var(--sp-20);
z-index: 6;
box-shadow: -8px 0 24px color-mix(in srgb, var(--navy-900) 4%, transparent);
}
.companion-close {
position: absolute;
top: 12px;
right: 14px;
background: transparent;
border: none;
font-size: var(--fs-lg);
cursor: pointer;
color: var(--ink-500);
width: 24px;
height: 24px;
border-radius: var(--radius-sm);
}
.companion-close:hover { background: var(--paper-3); color: var(--ink-900); }
/* Reader fills more when companion closed */
.reader-scroll.with-companion-stub { padding-right: 36px; }
.reader-scroll.with-companion { padding-right: 320px; }
@media (min-width: 1500px) {
.reader { max-width: min(960px, 100%); }
}
@media (min-width: 1800px) {
.reader-scroll.with-companion-stub .reader { max-width: min(1040px, 100%); }
}
.companion-block {}
.companion-block-h {
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
margin-bottom: var(--sp-10);
display: flex;
align-items: center;
gap: var(--sp-6);
}
.comp-anchor {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
background: white;
border: 1px solid var(--paper-3);
padding: var(--sp-4) var(--sp-8);
border-radius: var(--radius-sm);
color: var(--ink-700);
margin-bottom: var(--sp-8);
display: inline-block;
}
.comp-anchor-current {
background: var(--accent);
color: white;
border-color: var(--accent);
}
.comp-empty {
font-size: var(--fs-xs);
color: var(--ink-500);
font-style: italic;
}
.comp-link {
display: flex;
align-items: flex-start;
gap: var(--sp-8);
padding: var(--sp-8) var(--sp-10);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-md);
font-size: var(--fs-xs);
color: var(--ink-700);
cursor: pointer;
margin-bottom: var(--sp-6);
transition: all 0.12s;
}
.comp-link:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-soft);
}
.comp-link-id {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
font-weight: 500;
color: var(--ink-500);
flex-shrink: 0;
min-width: 56px;
}
.comp-link:hover .comp-link-id { color: var(--accent); }
.comp-action {
display: flex;
align-items: center;
gap: var(--sp-8);
padding: var(--sp-8) var(--sp-10);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-md);
font-size: var(--fs-xs);
color: var(--ink-700);
font-weight: 500;
cursor: pointer;
margin-bottom: var(--sp-6);
width: 100%;
font-family: inherit;
transition: all 0.12s;
}
.comp-action:hover {
border-color: var(--ink-400);
color: var(--ink-900);
background: white;
}
.comp-action.toggled {
border-color: var(--pink-500);
color: var(--pink-500);
background: color-mix(in srgb, var(--pink-500) 5%, transparent);
}
.comp-status {
font-size: var(--fs-2xs);
color: var(--ink-500);
font-style: italic;
margin-top: var(--sp-4);
}
/* Definitions list compact */
.comp-def {
padding: var(--sp-8) 0;
border-bottom: 1px dashed var(--paper-3);
}
.comp-def:last-child { border-bottom: none; }
.comp-def-term {
font-weight: 600;
color: var(--ink-900);
font-size: var(--fs-xs);
margin-bottom: var(--sp-2);
}
.comp-def-body {
font-size: var(--fs-xs);
line-height: 1.45;
color: var(--ink-600);
}
/* ===== Cmd+K palette ===== */
.kbar-overlay {
position: fixed;
inset: 0;
background: color-mix(in srgb, var(--navy-900) 45%, transparent);
z-index: 1000;
display: grid;
place-items: flex-start center;
padding-top: 14vh;
animation: pop-in 0.14s ease;
}
.kbar {
width: min(720px, 92vw);
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-3);
overflow: hidden;
display: flex;
flex-direction: column;
max-height: 80vh;
}
.kbar-input {
display: flex;
align-items: center;
gap: var(--sp-10);
padding: var(--sp-16) var(--sp-20);
border-bottom: 1px solid var(--paper-3);
}
.kbar-input svg { color: var(--ink-500); }
.kbar-input input {
flex: 1;
font-size: var(--fs-lg);
border: none;
outline: none;
font-family: inherit;
color: var(--ink-900);
}
.kbar-input input::placeholder { color: var(--ink-400); }
.kbar-results {
overflow-y: auto;
padding: var(--sp-6);
flex: 1;
min-height: 0;
}
.kbar-empty {
padding: var(--sp-32);
text-align: center;
color: var(--ink-500);
font-size: var(--fs-sm);
}
.kbar-result {
padding: var(--sp-8) var(--sp-14);
border-radius: var(--radius-md);
cursor: pointer;
display: flex;
align-items: flex-start;
gap: var(--sp-10);
}
.kbar-result.sel { background: var(--accent-soft); }
.kbar-result-id {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
font-weight: 500;
color: var(--ink-500);
min-width: 64px;
padding-top: var(--sp-2);
}
.kbar-result.sel .kbar-result-id { color: var(--accent); }
.kbar-result-title {
flex: 1;
font-size: var(--fs-sm);
color: var(--ink-900);
}
.kbar-result-snippet {
font-size: var(--fs-2xs);
color: var(--ink-500);
margin-top: var(--sp-2);
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.kbar-result-kind {
font-size: var(--fs-3xs);
text-transform: none;
letter-spacing: 0.01em;
font-weight: 600;
color: var(--ink-500);
padding: var(--sp-4) var(--sp-8);
background: var(--paper-2);
border-radius: var(--radius-sm);
margin-top: 1px;
}
.kbar-foot {
display: flex;
gap: var(--sp-16);
padding: var(--sp-10) var(--sp-16);
border-top: 1px solid var(--paper-3);
font-size: var(--fs-2xs);
color: var(--ink-500);
background: var(--paper);
}
.kbar-foot kbd {
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-xs);
padding: 1px var(--sp-4);
font-family: var(--font-mono);
margin-right: var(--sp-4);
}
/* ===== Toast ===== */
.toast {
position: fixed;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
background: var(--navy-900);
color: white;
padding: var(--sp-10) var(--sp-16);
border-radius: var(--radius);
font-size: var(--fs-sm);
font-family: var(--font-sans);
box-shadow: var(--shadow-2);
z-index: 1100;
display: flex;
align-items: center;
gap: var(--sp-8);
animation: pop-in 0.18s;
}
.toast .pink { color: var(--pink-400); }
/* Highlight saved */
.hl {
background: linear-gradient(180deg, transparent 50%, rgba(255,235,128,0.7) 50%);
padding: 0 var(--sp-2);
}
/* Search-match highlight (filter mode) */
.search-hit {
background: rgba(255,210,80,0.55);
border-radius: var(--radius-xs);
padding: 1px var(--sp-2);
box-shadow: 0 0 0 1px rgba(255,170,0,0.35);
font-weight: 600;
color: var(--ink-900);
}
/* Filter banner above the reader */
.filter-banner {
background: linear-gradient(180deg, #FFF8E0, #FFF1C4);
border-bottom: 1px solid #f0d77a;
padding: var(--sp-10) var(--sp-24);
display: flex;
align-items: center;
gap: var(--sp-14);
font-family: var(--font-sans);
font-size: var(--fs-sm);
color: var(--ink-900);
flex-shrink: 0;
}
.filter-banner .pill {
display: inline-flex;
align-items: center;
gap: var(--sp-6);
background: white;
border: 1px solid #e6c560;
border-radius: var(--radius-sm);
padding: var(--sp-4) var(--sp-8);
font-family: var(--font-mono);
font-size: var(--fs-2xs);
font-weight: 500;
}
.filter-banner .count {
font-weight: 600;
color: var(--ink-900);
}
.filter-banner .spacer { flex: 1; }
.filter-banner button {
background: white;
border: 1px solid #e6c560;
border-radius: var(--radius-md);
padding: var(--sp-4) var(--sp-12);
font-size: var(--fs-xs);
font-weight: 500;
cursor: pointer;
font-family: inherit;
color: var(--ink-800);
}
.filter-banner button:hover { background: #fffbeb; }
.filter-banner .clear-x {
background: var(--ink-900);
color: white;
border-color: var(--ink-900);
}
.filter-banner .clear-x:hover { background: var(--navy-800); }
/* Hidden articles in filter mode */
.article.no-match,
.recital.no-match,
.annex.no-match {
display: none;
}
/* "No results" empty state */
.filter-empty {
text-align: center;
padding: 80px var(--sp-20);
color: var(--ink-500);
font-family: var(--font-sans);
}
.filter-empty h3 {
font-size: var(--fs-xl);
font-weight: 600;
color: var(--ink-700);
margin: 0 0 var(--sp-8);
}
/* Bookmark indicator on article */
.bookmark-mark {
position: absolute;
left: -28px;
top: 0;
color: var(--pink-500);
font-size: var(--fs-xl);
}
/* Reading mode: concise hides recitals */
.reader.mode-concise .recital,
.reader.mode-concise .annex { display: none; }
.reader.mode-deep .recital { opacity: 1; }
/* Scrollbar styling */
.reader-scroll::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.companion::-webkit-scrollbar,
.kbar-results::-webkit-scrollbar {
width: 8px;
}
.reader-scroll::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.companion::-webkit-scrollbar-thumb,
.kbar-results::-webkit-scrollbar-thumb {
background: var(--ink-300);
border-radius: var(--radius-sm);
}
.reader-scroll::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover,
.companion::-webkit-scrollbar-thumb:hover,
.kbar-results::-webkit-scrollbar-thumb:hover {
background: var(--ink-500);
}
/* Reading-progress bar */
.progress {
position: absolute;
left: 0;
right: 320px;
top: 56px;
height: 2px;
background: transparent;
z-index: 10;
}
.progress-fill {
height: 100%;
background: var(--pink-500);
width: 0%;
transition: width 0.05s linear;
}
/* Note about prototype */
.proto-note {
position: fixed;
bottom: 16px;
left: calc(var(--rail-w) + var(--sidebar-w) + 16px);
background: var(--navy-900);
color: rgba(255,255,255,0.7);
font-family: var(--font-sans);
font-size: var(--fs-2xs);
padding: var(--sp-6) var(--sp-10);
border-radius: var(--radius-md);
z-index: 50;
pointer-events: none;
}
.proto-note .pink { color: var(--pink-400); font-weight: 600; }
/* ===== Reader sub-groups (Chapters under Articles, EG-Buckets under Recitals) ===== */
.reader-subgroup {
margin: var(--sp-32) 0 0;
}
.reader-subgroup:first-of-type {
margin-top: var(--sp-16);
}
.reader-subgroup-head {
display: flex;
align-items: baseline;
gap: var(--sp-12);
padding: var(--sp-10) 0 var(--sp-10);
border-bottom: 1px solid var(--ink-200);
cursor: pointer;
user-select: none;
transition: border-color 0.15s;
margin-bottom: 0;
}
.reader-subgroup-head:hover { border-color: var(--ink-300); }
.reader-subgroup-head.open { margin-bottom: var(--sp-16); }
.reader-subgroup-head.active { background: var(--accent-soft); }
.reader-subgroup-head.active .reader-subgroup-id { color: var(--accent); }
/* Kontext-Auswahl in Spezial-Readern (3-3 / 4-2 / 18031): aktive Karte markieren.
en18031-req extra, weil der EN-18031-Reader keinen .reader-Wrapper hat. */
.reader .ctx-active,
.en18031-req.ctx-active { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.reader-subgroup-chev {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
color: var(--ink-500);
transition: transform 0.15s;
flex-shrink: 0;
align-self: center;
}
.reader-subgroup-head.open .reader-subgroup-chev { transform: rotate(90deg); }
.reader-subgroup-id {
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--accent);
letter-spacing: 0.01em;
text-transform: none;
flex-shrink: 0;
min-width: 60px;
white-space: nowrap;
align-self: flex-start;
}
.reader-subgroup-title {
flex: 1;
min-width: 0;
font-family: var(--font-sans);
font-size: var(--fs-lg);
font-weight: 600;
color: var(--ink-900);
line-height: 1.35;
letter-spacing: -0.005em;
text-wrap: balance;
}
.reader-subgroup-count {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-500);
font-weight: 400;
flex-shrink: 0;
margin-left: auto;
}
/* When subgroup-head is collapsed, items below are hidden — handled in JSX. */
/* When open, the article-box / recital-box children take over normal layout. */
/* Reader anchor badge — brand-conform (Pink-Tint statt Yellow-Background). */
.reader-anchor-badge {
margin-left: auto;
font-family: var(--font-mono);
font-size: var(--fs-2xs);
background: color-mix(in srgb, var(--pink-500) 12%, transparent);
color: var(--pink-500);
padding: var(--sp-2) var(--sp-8);
border-radius: var(--radius-sm);
font-weight: 600;
}
/* Reader error state — brand token statt Named-Color 'crimson'. */
.reader-error {
color: var(--fam-de);
}
/* ============================================================
IEC 62443-3-3 + prEN 40000-1-4 reader extensions
(added Phase 1 — alongside CRA reader)
============================================================ */
/* ============================================================
Reader extensions for IEC 62443-3-3 (SL/FR/SR/RE)
Reuses CRA shell tokens; adds SR-card + SL-vector + RE blocks.
============================================================ */
:root {
--fam-iec-soft: rgba(224,138,60,0.08);
--fam-iec-line: rgba(224,138,60,0.30);
}
/* ===== Cover variants per family ===== */
.cover.iec .cover-fam, .cover.iec .cover-fam-dot { color: var(--fam-iec); background: transparent; }
.cover.iec .cover-fam-dot { background: var(--fam-iec); }
.cover.iec .cover-id { color: var(--ink-700); }
.cover.draft .cover-id { color: var(--badge-draft); }
.cover.draft .cover-fam { color: var(--badge-draft); }
.cover.draft .cover-fam-dot { background: var(--badge-draft); }
/* ===== Draft banner — persistent, restrained ===== */
.draft-banner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--sp-16);
padding: var(--sp-12) var(--sp-16);
margin: 0 0 var(--sp-24);
background: var(--badge-draft-bg);
border: 1px solid color-mix(in srgb, var(--badge-draft) 28%, transparent);
border-radius: var(--radius);
font-family: var(--font-sans);
}
.draft-banner .stage {
display: inline-flex;
align-items: center;
gap: var(--sp-8);
font-family: var(--font-mono);
font-size: var(--fs-2xs);
font-weight: 600;
letter-spacing: 0.01em;
color: var(--badge-draft);
text-transform: none;
}
.draft-banner .stage::before {
content: '';
width: 8px; height: 8px; border-radius: 50%;
background: var(--badge-draft);
box-shadow: 0 0 0 3px rgba(184,116,10,0.18);
}
.draft-banner .meta {
font-size: var(--fs-xs);
color: var(--ink-700);
display: flex;
flex-wrap: wrap;
gap: var(--sp-14);
}
.draft-banner .meta span { display: inline-flex; gap: var(--sp-6); align-items: baseline; }
.draft-banner .meta b {
font-weight: 600;
color: var(--ink-900);
font-family: var(--font-mono);
font-size: var(--fs-2xs);
}
.draft-banner .actions {
display: flex; gap: var(--sp-8);
}
.draft-banner .diff-toggle {
font-family: var(--font-sans);
font-size: var(--fs-2xs);
font-weight: 500;
color: var(--badge-draft);
background: white;
border: 1px solid color-mix(in srgb, var(--badge-draft) 28%, transparent);
border-radius: var(--radius-md);
padding: var(--sp-4) var(--sp-10);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--sp-6);
}
.draft-banner .diff-toggle.active {
background: var(--badge-draft);
color: white;
border-color: var(--badge-draft);
}
/* ===== SL toolbar (62443) ===== */
.sl-toolbar {
display: flex;
align-items: center;
gap: var(--sp-14);
padding: var(--sp-10) var(--sp-14);
margin: 0 0 var(--sp-24);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
font-family: var(--font-sans);
}
.sl-toolbar .lab {
font-size: var(--fs-3xs);
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
}
.sl-toolbar .sl-pills { display: flex; gap: var(--sp-4); }
.sl-pill {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
font-weight: 600;
padding: var(--sp-4) var(--sp-12);
border-radius: 999px;
border: 1px solid var(--paper-3);
background: white;
color: var(--ink-700);
cursor: pointer;
letter-spacing: 0.04em;
}
.sl-pill.active {
background: var(--ink-900);
color: white;
border-color: var(--ink-900);
}
.sl-pill[data-sl="1"].active { background: var(--sl-1); border-color: var(--sl-1); }
.sl-pill[data-sl="2"].active { background: var(--sl-2); border-color: var(--sl-2); }
.sl-pill[data-sl="3"].active { background: var(--sl-3); border-color: var(--sl-3); }
.sl-pill[data-sl="4"].active { background: var(--sl-4); border-color: var(--sl-4); }
.sl-toolbar .divider {
width: 1px; height: 22px; background: var(--paper-3);
}
.sl-toolbar .view-switch {
display: inline-flex;
border: 1px solid var(--paper-3);
border-radius: var(--radius-md);
overflow: hidden;
}
.sl-toolbar .view-switch button {
background: white;
border: none;
padding: var(--sp-6) var(--sp-12);
font-family: inherit;
font-size: var(--fs-2xs);
color: var(--ink-700);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--sp-4);
border-right: 1px solid var(--paper-3);
}
.sl-toolbar .view-switch button:last-child { border-right: none; }
.sl-toolbar .view-switch button.active {
background: var(--paper-2);
color: var(--ink-900);
font-weight: 600;
}
.sl-toolbar .stat {
margin-left: auto;
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-500);
}
.sl-toolbar .stat b { color: var(--ink-900); font-weight: 600; }
/* ===== FR section header (overrides .section-h slightly for IEC) ===== */
.fr-block {
margin: var(--sp-32) 0;
border-top: 1px solid var(--paper-3);
padding-top: var(--sp-20);
}
.fr-block:first-of-type { border-top: none; padding-top: 0; }
.fr-head {
display: flex;
align-items: baseline;
gap: var(--sp-14);
margin-bottom: var(--sp-16);
}
.fr-tag {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
font-weight: 700;
letter-spacing: 0.06em;
color: var(--fam-iec);
background: var(--fam-iec-soft);
border: 1px solid var(--fam-iec-line);
padding: var(--sp-4) var(--sp-10);
border-radius: var(--radius-sm);
}
.fr-title {
font-family: var(--font-sans);
font-size: var(--fs-2xl);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink-900);
margin: 0;
}
.fr-purpose {
font-family: var(--font-serif);
font-size: var(--fs-lg);
line-height: 1.6;
color: var(--ink-700);
margin: 0 0 var(--sp-6);
max-width: 70ch;
}
.fr-rationale {
font-family: var(--font-serif);
font-size: var(--fs-md);
line-height: 1.6;
color: var(--ink-700);
padding: var(--sp-12) var(--sp-16);
background: var(--paper-2);
border-radius: var(--radius-md);
margin: var(--sp-14) 0 var(--sp-20);
max-width: 75ch;
}
.fr-rationale .lab {
font-family: var(--font-sans);
font-size: var(--fs-3xs);
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
display: block;
margin-bottom: var(--sp-4);
}
/* ===== SR card ===== */
.sr {
margin: var(--sp-20) 0;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
background: white;
transition: border-color 0.15s, box-shadow 0.15s;
overflow: hidden;
scroll-margin-top: 80px;
}
.sr:hover { border-color: var(--ink-300); }
.sr.dimmed { opacity: 0.42; }
.sr.dimmed .sr-body { display: none; }
.sr-head {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: var(--sp-14);
align-items: center;
padding: var(--sp-12) var(--sp-16);
background: var(--paper);
border-bottom: 1px solid var(--paper-3);
}
.iec-bm-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--radius-md);
border: 1px solid transparent;
background: transparent;
color: var(--ink-400);
cursor: pointer;
transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.iec-bm-toggle:hover {
color: var(--ink-700);
background: var(--paper-2);
border-color: var(--paper-3);
}
.iec-bm-toggle.on {
color: var(--pink-500);
}
.iec-bm-toggle.on:hover {
color: var(--pink-500);
background: color-mix(in srgb, var(--pink-500) 8%, transparent);
border-color: color-mix(in srgb, var(--pink-500) 25%, transparent);
}
.sr-id {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
font-weight: 700;
letter-spacing: 0.04em;
color: var(--ink-900);
background: white;
padding: var(--sp-4) var(--sp-8);
border: 1px solid var(--paper-3);
border-radius: var(--radius-sm);
}
.sr-title {
font-family: var(--font-sans);
font-size: var(--fs-lg);
font-weight: 600;
color: var(--ink-900);
margin: 0;
letter-spacing: -0.005em;
}
/* SL-C capability vector — 4-cell pill */
.sl-vector {
display: inline-flex;
align-items: center;
gap: 0;
border: 1px solid var(--paper-3);
border-radius: var(--radius-md);
overflow: hidden;
background: white;
}
.sl-vector .lab {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 700;
letter-spacing: 0.01em;
color: var(--ink-500);
text-transform: none;
padding: var(--sp-4) var(--sp-8) var(--sp-4) var(--sp-8);
border-right: 1px solid var(--paper-3);
background: var(--paper-2);
}
.sl-cell {
width: 26px;
height: 22px;
display: grid;
place-items: center;
font-family: var(--font-mono);
font-size: var(--fs-2xs);
font-weight: 600;
color: white;
border-right: 1px solid rgba(255,255,255,0.4);
}
.sl-cell:last-child { border-right: none; }
.sl-cell[data-active="0"] { background: var(--sl-na); color: var(--ink-500); }
.sl-cell[data-active="1"][data-sl="1"] { background: var(--sl-1); }
.sl-cell[data-active="1"][data-sl="2"] { background: var(--sl-2); }
.sl-cell[data-active="1"][data-sl="3"] { background: var(--sl-3); }
.sl-cell[data-active="1"][data-sl="4"] { background: var(--sl-4); }
.sl-cell.highlight { box-shadow: inset 0 0 0 2px var(--ink-900); }
.sr-body {
padding: var(--sp-16) var(--sp-20) var(--sp-20);
font-family: var(--font-serif);
font-size: var(--fs-lg);
line-height: 1.65;
color: var(--ink-800);
}
.sr-req {
font-family: var(--font-serif);
font-size: var(--fs-lg);
color: var(--ink-900);
padding: 0 0 var(--sp-14);
border-bottom: 1px dashed var(--paper-3);
margin-bottom: var(--sp-14);
max-width: 72ch;
}
.sr-req .lab {
display: block;
font-family: var(--font-sans);
font-size: var(--fs-3xs);
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
margin-bottom: var(--sp-4);
}
.sr-supp {
font-family: var(--font-serif);
font-size: var(--fs-md);
color: var(--ink-700);
max-width: 75ch;
}
.sr-supp .lab {
display: block;
font-family: var(--font-sans);
font-size: var(--fs-3xs);
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
margin-bottom: var(--sp-4);
}
.sr-supp p { margin: 0 0 0.7em; }
.sr-supp p:last-child { margin-bottom: 0; }
/* ===== Requirement Enhancements ===== */
.re-list {
margin-top: var(--sp-16);
border-top: 1px solid var(--paper-3);
padding-top: var(--sp-14);
}
.re-list-head {
font-family: var(--font-sans);
font-size: var(--fs-3xs);
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
margin-bottom: var(--sp-10);
display: flex;
align-items: center;
gap: var(--sp-8);
}
.re-list-head .count {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--ink-600);
background: var(--paper-2);
padding: 1px var(--sp-6);
border-radius: var(--radius-xs);
letter-spacing: 0;
}
.re {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--sp-12);
align-items: start;
padding: var(--sp-12) 0 var(--sp-12) var(--sp-14);
border-left: 2px solid var(--fam-iec);
margin-bottom: var(--sp-8);
}
.re.dimmed { opacity: 0.32; border-left-color: var(--paper-3); }
.re-tag {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 700;
color: var(--fam-iec);
background: var(--fam-iec-soft);
padding: var(--sp-2) var(--sp-8);
border-radius: var(--radius-xs);
letter-spacing: 0.04em;
align-self: start;
white-space: nowrap;
}
.re-text {
font-family: var(--font-serif);
font-size: var(--fs-md);
line-height: 1.55;
color: var(--ink-800);
max-width: 64ch;
}
.re-text strong {
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--ink-900);
display: block;
margin-bottom: var(--sp-2);
}
.re-text .note {
display: block;
font-size: var(--fs-xs);
font-style: italic;
color: var(--ink-600);
margin-top: var(--sp-4);
}
.re .sl-vector .lab { display: none; }
.re .sl-vector { transform: scale(0.92); transform-origin: top right; }
/* ===== SR x SL matrix view ===== */
.matrix-wrap {
margin: var(--sp-24) 0;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
overflow: hidden;
background: white;
}
.matrix-wrap-h {
padding: var(--sp-10) var(--sp-14);
background: var(--paper);
border-bottom: 1px solid var(--paper-3);
font-family: var(--font-sans);
font-size: var(--fs-2xs);
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-700);
display: flex;
align-items: center;
gap: var(--sp-10);
}
.matrix-wrap-h .fr-tag { font-size: var(--fs-3xs); padding: var(--sp-2) var(--sp-8); }
table.matrix {
width: 100%;
border-collapse: collapse;
font-family: var(--font-sans);
font-size: var(--fs-sm);
}
table.matrix th, table.matrix td {
padding: var(--sp-8) var(--sp-10);
text-align: left;
border-bottom: 1px solid var(--paper-2);
vertical-align: middle;
}
table.matrix thead th {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
background: var(--paper);
border-bottom: 1px solid var(--paper-3);
}
table.matrix th.sl-col, table.matrix td.sl-col {
width: 56px;
text-align: center;
}
table.matrix tr:hover td:not(.sl-col) { background: var(--paper); cursor: pointer; }
table.matrix .mid {
width: 12px; height: 12px; border-radius: var(--radius-xs);
display: inline-block;
}
table.matrix .mid.on[data-sl="1"] { background: var(--sl-1); }
table.matrix .mid.on[data-sl="2"] { background: var(--sl-2); }
table.matrix .mid.on[data-sl="3"] { background: var(--sl-3); }
table.matrix .mid.on[data-sl="4"] { background: var(--sl-4); }
table.matrix .mid.off { background: var(--paper-3); border: 1px dashed var(--ink-400); }
table.matrix .mid.re {
background: white;
border: 1.5px solid var(--fam-iec);
width: 8px; height: 8px;
border-radius: 50%;
margin-left: var(--sp-2);
}
table.matrix .mid-id {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
font-weight: 600;
color: var(--ink-700);
}
table.matrix .matrix-fr-row td {
background: var(--paper);
font-family: var(--font-mono);
font-size: var(--fs-2xs);
font-weight: 700;
letter-spacing: 0.01em;
color: var(--fam-iec);
text-transform: none;
padding: var(--sp-6) var(--sp-10);
}
/* ===== SL legend (standalone, outside table.matrix) — extrahiert aus
Inline-style-Objekten, P3d, Design-System-Konsolidierung. Werterhaltend.
Hinweis: die "on"-Glyphen erben ihre SL-Farbe unveraendert von
table.matrix .mid.on[data-sl] (Zeile ~2456), was ausserhalb dieser
Tabelle nicht greift — vorbestehender Zustand, hier nicht behoben. ===== */
.rk-sl-legend {
display: flex;
gap: var(--sp-24);
padding: var(--sp-14) var(--sp-16);
background: var(--paper-2);
border-radius: var(--radius);
font-family: var(--font-sans);
font-size: var(--fs-xs);
color: var(--ink-700);
margin-top: var(--sp-20);
flex-wrap: wrap;
}
.rk-sl-legend-item {
display: flex;
align-items: center;
gap: var(--sp-8);
}
.rk-sl-glyph {
display: inline-block;
width: 12px;
height: 12px;
border-radius: var(--radius-xs);
}
/* ===== Draft uncertainty markers (40000-1-4) ===== */
.void-card {
padding: var(--sp-14) var(--sp-16);
margin: var(--sp-14) 0;
border-radius: var(--radius);
background: repeating-linear-gradient(
135deg,
var(--paper-2) 0 8px,
var(--paper) 8px 16px
);
border: 1px dashed var(--ink-400);
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--sp-14);
align-items: center;
font-family: var(--font-sans);
}
.void-tag {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 700;
letter-spacing: 0.01em;
color: var(--badge-void);
background: white;
border: 1px solid var(--ink-400);
padding: var(--sp-4) var(--sp-8);
border-radius: var(--radius-sm);
text-transform: none;
}
.void-card .id {
font-family: var(--font-mono);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--ink-700);
}
.void-card .reason {
font-size: var(--fs-xs);
color: var(--ink-600);
font-family: var(--font-sans);
}
.void-card .merge-link {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--accent);
cursor: pointer;
}
/* TBD slot in assessment fields */
.tbd {
display: inline-flex;
align-items: center;
gap: var(--sp-4);
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 700;
letter-spacing: 0.01em;
padding: var(--sp-2) var(--sp-8);
border-radius: var(--radius-xs);
color: var(--badge-draft);
background: var(--badge-draft-bg);
border: 1px solid color-mix(in srgb, var(--badge-draft) 28%, transparent);
text-transform: none;
}
.tbd::before {
content: '';
width: 5px; height: 5px; border-radius: 50%;
background: var(--badge-draft);
}
/* Strikethrough — text removed from previous draft */
.strike {
text-decoration: line-through;
text-decoration-color: var(--status-danger);
text-decoration-thickness: 1.5px;
color: var(--ink-500);
background: var(--status-danger-bg);
padding: 0 var(--sp-2);
border-radius: var(--radius-xs);
}
/* Insertion — added in current draft */
.ins {
background: var(--badge-active-bg);
color: var(--ink-900);
padding: 0 var(--sp-2);
border-radius: var(--radius-xs);
box-shadow: inset 0 -1.5px 0 var(--fam-eu);
}
/* Editorial / committee note */
.edit-note {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--sp-10);
align-items: start;
padding: var(--sp-10) var(--sp-14);
margin: var(--sp-12) 0;
background: var(--fam-en-soft, rgba(139,92,246,0.08));
border: 1px solid rgba(107,63,160,0.22);
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: var(--fs-sm);
line-height: 1.5;
color: var(--ink-800);
}
.edit-note .tag {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 700;
letter-spacing: 0.01em;
color: var(--violet-700);
background: white;
border: 1px solid rgba(107,63,160,0.30);
padding: var(--sp-2) var(--sp-8);
border-radius: var(--radius-xs);
text-transform: none;
align-self: start;
white-space: nowrap;
}
.edit-note b { color: var(--ink-900); font-weight: 600; }
/* Committee comment / change request */
.committee-comment {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--sp-12);
align-items: start;
padding: var(--sp-10) var(--sp-14);
margin: var(--sp-10) 0;
border: 1px solid var(--paper-3);
border-left: 3px solid var(--fam-eu);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
background: white;
font-family: var(--font-sans);
font-size: var(--fs-xs);
color: var(--ink-700);
line-height: 1.5;
}
.committee-comment .author {
font-weight: 600;
color: var(--ink-900);
font-size: var(--fs-xs);
}
.committee-comment .meta {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--ink-500);
letter-spacing: 0.04em;
margin-bottom: var(--sp-4);
}
.committee-comment .avatar {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--paper-2);
color: var(--ink-700);
display: grid;
place-items: center;
font-family: var(--font-sans);
font-size: var(--fs-2xs);
font-weight: 600;
}
/* Inline draft warning embedded in body text */
.inline-warning {
display: block;
margin: var(--sp-8) 0;
padding: var(--sp-8) var(--sp-12);
background: var(--status-danger-bg);
border-left: 3px solid var(--status-danger);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
font-family: var(--font-sans);
font-size: var(--fs-xs);
color: var(--ink-800);
line-height: 1.5;
}
.inline-warning .tag {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 700;
letter-spacing: 0.01em;
color: var(--status-danger);
text-transform: none;
margin-right: var(--sp-6);
}
/* Stability bar (per requirement) */
.stability {
display: inline-flex;
align-items: center;
gap: var(--sp-6);
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 600;
color: var(--ink-600);
}
.stability .bar {
display: inline-flex; gap: var(--sp-2);
}
.stability .seg {
width: 14px; height: 5px; border-radius: 1px;
background: var(--paper-3);
}
.stability.stable .seg { background: #4a9264; }
.stability.likely .seg:nth-child(-n+3) { background: #c69a3c; }
.stability.volatile .seg:nth-child(-n+2) { background: var(--status-danger); }
.stability.tbd .seg:nth-child(1) { background: var(--badge-draft); }
/* Last-changed timestamp shown next to req IDs */
.last-changed {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--ink-500);
font-weight: 500;
}
.last-changed.recent { color: var(--fam-eu); }
/* Requirement card for draft (uses sr-style chrome but with draft accents) */
.req {
margin: var(--sp-20) 0;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
background: white;
overflow: hidden;
transition: border-color 0.15s;
}
.req:hover { border-color: var(--ink-300); }
.req.is-new { border-left: 3px solid #4a9264; }
.req.is-mod { border-left: 3px solid var(--badge-draft); }
.req.is-void { border-left: 3px solid var(--badge-void); opacity: 0.7; }
.req-head {
display: grid;
grid-template-columns: auto 1fr auto auto auto;
gap: var(--sp-14);
align-items: center;
padding: var(--sp-12) var(--sp-14);
background: var(--paper);
border-bottom: 1px solid var(--paper-3);
}
.req-id {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
font-weight: 700;
letter-spacing: 0.04em;
color: var(--ink-900);
background: white;
padding: var(--sp-4) var(--sp-8);
border: 1px solid var(--paper-3);
border-radius: var(--radius-sm);
}
.req-title {
font-family: var(--font-sans);
font-size: var(--fs-lg);
font-weight: 600;
color: var(--ink-900);
margin: 0;
letter-spacing: -0.005em;
}
.lineage-badge {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 700;
letter-spacing: 0.01em;
padding: var(--sp-4) var(--sp-8);
border-radius: var(--radius-xs);
text-transform: none;
}
.lineage-badge[data-kind="EN 18031"] { color: #2a6fbf; background: #e7f1fc; }
.lineage-badge[data-kind="EN 18031 modified"] { color: #b8740a; background: #fff3dc; }
.lineage-badge[data-kind="NEW"] { color: #2d6a3f; background: #d9efe1; }
.lineage-badge[data-kind="VOID"] { color: var(--badge-void); background: var(--paper-2); }
.req-body {
padding: var(--sp-16) var(--sp-20) var(--sp-20);
font-family: var(--font-serif);
font-size: var(--fs-lg);
line-height: 1.65;
color: var(--ink-800);
}
.req-section { margin-bottom: var(--sp-16); max-width: 72ch; }
.req-section:last-child { margin-bottom: 0; }
.req-section .lab {
display: block;
font-family: var(--font-sans);
font-size: var(--fs-3xs);
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
margin-bottom: var(--sp-4);
}
.req-section .req-text {
font-family: var(--font-serif);
color: var(--ink-900);
}
.req-section .req-text.guidance {
color: var(--ink-700);
font-size: var(--fs-md);
}
/* Two-column block for Conceptual / Functional Assessment */
.assess-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-14);
margin-top: var(--sp-6);
}
.assess-cell {
padding: var(--sp-12) var(--sp-14);
background: var(--paper-2);
border-radius: var(--radius-md);
min-height: 64px;
}
.assess-cell .lab {
font-family: var(--font-sans);
font-size: var(--fs-3xs);
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
margin-bottom: var(--sp-4);
display: block;
}
.assess-cell .body {
font-family: var(--font-serif);
font-size: var(--fs-sm);
color: var(--ink-700);
line-height: 1.55;
}
/* Linkage chips (CRA-ER, threats, objectives) */
.chip-row {
display: flex;
flex-wrap: wrap;
gap: var(--sp-6);
margin-top: var(--sp-6);
}
.chip {
display: inline-flex;
align-items: center;
gap: var(--sp-4);
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 600;
padding: var(--sp-4) var(--sp-8);
border-radius: 999px;
border: 1px solid var(--paper-3);
background: white;
color: var(--ink-700);
letter-spacing: 0.02em;
}
.chip.cra { color: var(--cra-purple, #7c3aed); border-color: rgba(124,58,237,0.30); background: #f5f3ff; }
.chip.threat { color: var(--status-danger); border-color: var(--status-danger-bg); background: var(--status-danger-bg); }
.chip.objective { color: #2d6a3f; border-color: #d9efe1; background: #ebf5ee; }
/* NEW-marker next to a TOC title (sidebar) — same green as .lineage-badge
[data-kind="NEW"] above; kept as literal hex, not var(--status-ok)
(visibly different shade, no exact token). Extrahiert P3d. */
.rk-new-marker {
color: #2d6a3f;
font-family: var(--font-mono);
font-size: var(--fs-3xs);
margin-left: var(--sp-4);
}
/* ===== Marker reference card (MarkerReference demo, extrahiert P3d) ===== */
.rk-demo-page {
padding: 40px 48px;
font-family: var(--font-sans);
background: var(--surface);
height: 100%;
overflow: auto;
}
.rk-demo-title {
font-size: var(--fs-2xl);
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 var(--sp-6);
color: var(--ink-900);
}
.rk-demo-intro {
font-size: var(--fs-sm);
color: var(--ink-600);
margin: 0 0 var(--sp-32);
max-width: 60ch;
}
.rk-demo-code-line {
font-family: var(--font-serif);
font-size: var(--fs-md);
margin: 0;
}
.rk-demo-stability-row { display: flex; gap: var(--sp-20); flex-wrap: wrap; }
.rk-demo-stamp-row { display: flex; gap: var(--sp-14); }
.rk-demo-row {
display: grid;
grid-template-columns: 180px 1fr;
gap: var(--sp-24);
padding: var(--sp-14) 0;
border-top: none;
}
.rk-demo-row--divider { border-top: 1px solid var(--paper-3); }
.rk-demo-row-name { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-900); }
.rk-demo-row-desc {
font-size: var(--fs-2xs);
color: var(--ink-600);
margin-top: var(--sp-4);
line-height: 1.5;
}
.rk-demo-row-demo { display: flex; align-items: flex-start; }
/* ============================================================
Hub & Library (Option A) — Phase 1.5
============================================================ */
/* Mode rail (shared between Hub and Library) */
.hub-shell .rail,
.lib-shell .rail,
.cs-shell .rail,
.cmp-shell .rail,
.kb-shell .rail {
/* Nur Positionierung — Optik (bg/flex/padding/gap) kommt aus Basis-.rail,
damit die Rail auf ALLEN Seiten identisch sitzt (kein Versatz beim Seitenwechsel). */
position: fixed;
left: 0; top: 0; bottom: 0;
width: var(--rail-w);
z-index: 50;
}
.rail-logo {
width: 36px;
height: 36px;
border-radius: var(--radius);
background: var(--pink-500);
color: white;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-sans);
font-weight: 700;
font-size: var(--fs-xl);
letter-spacing: -0.02em;
margin-bottom: var(--sp-12);
position: relative;
transition: transform .12s ease;
}
.rail-logo:hover { transform: scale(1.05); }
.rail-mode {
position: relative;
width: 44px;
height: 44px;
border: none;
background: transparent;
color: rgba(255,255,255,.55);
border-radius: var(--radius);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .12s ease, color .12s ease;
}
.rail-mode:hover {
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.9);
}
.rail-mode.active {
background: color-mix(in srgb, var(--pink-500) 16%, transparent);
color: var(--pink-400);
}
.rail-mode.disabled {
cursor: default;
color: rgba(255,255,255,.28);
}
.rail-mode.disabled:hover {
background: transparent;
color: rgba(255,255,255,.28);
}
.rail-mode-label {
position: absolute;
left: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
background: var(--navy-700);
color: rgba(255,255,255,.92);
padding: var(--sp-4) var(--sp-8);
border-radius: var(--radius-md);
font-size: var(--fs-2xs);
font-weight: 500;
font-family: var(--font-sans);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .12s ease;
z-index: 100;
border: 1px solid var(--navy-700);
box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.rail-mode:hover .rail-mode-label { opacity: 1; }
.rail-spacer { flex: 1; }
/* .soon-dot: kanonisch via .rail-mode .soon-dot (höhere Spezifität, pink) — ehem. toter Grau-Override entfernt */
/* ============================================================
GlobalRail — Expandierbar + Gruppen-Trenner (additiv)
- Collapsed (Default): unverändert, schmaler Icon-Streifen (--rail-w).
- Expanded (.rail.expanded): breiter, Icon + Label nebeneinander inline.
- Persistenz: localStorage-Key 'rail-expanded' (in app-shell.jsx).
============================================================ */
/* Sanfte Breiten-Animation. Die Positionier-Regeln (.hub-shell .rail …) setzen
width: var(--rail-w) mit 2 Klassen Spezifität — daher hier ebenfalls 2-Klassen
Selektoren mit .expanded, damit der Expand-Wert gewinnt. */
.rail { transition: width .18s ease; }
/* Ausgeklappt: GLOBAL --rail-w erhöhen (Klasse auf , von app-shell.jsx gesetzt).
Da Rail-Breite UND Inhalts-Offset (margin-left/left) auf ALLEN Shells var(--rail-w)
nutzen, shiftet der Inhalt überall korrekt mit — kein Überlappen mehr. */
html.rail-expanded { --rail-w: 208px; }
/* sanftes Mitschieben des Inhalts */
.proj-a, .proj-detail, .hub-a, .lib-a, .cs-a { transition: margin-left .18s ease, left .18s ease; }
/* Im Expanded-Modus linksbündig + horizontaler Innenabstand, damit Icon+Label
wie eine Zeile wirken. Collapsed bleibt zentriert (Basis-.rail). */
.rail.expanded {
align-items: stretch;
padding-left: var(--sp-12);
padding-right: var(--sp-12);
}
/* Toggle-Button (Hamburger) direkt unter dem Logo. Optik wie .rail-mode,
damit er sich nahtlos einfügt. */
.rail-toggle {
position: relative;
width: 44px;
height: 38px;
border: none;
background: transparent;
color: rgba(255,255,255,.55);
border-radius: var(--radius);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-12);
margin-bottom: var(--sp-2);
transition: background .12s ease, color .12s ease, width .18s ease;
}
.rail-toggle:hover {
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.9);
}
/* Expanded: Rail-Buttons werden zu vollbreiten Zeilen mit Icon links + Label inline. */
.rail.expanded .rail-mode,
.rail.expanded .rail-toggle {
width: 100%;
justify-content: flex-start;
padding-left: var(--sp-12);
gap: var(--sp-12);
}
/* Icon im Flex-Layout nicht stauchen lassen. */
.rail.expanded .rail-mode > svg,
.rail.expanded .rail-toggle > svg { flex: 0 0 auto; }
/* Label im Expanded-Modus: aus dem Hover-Tooltip wird ein inline-Text neben dem Icon. */
.rail.expanded .rail-mode-label {
position: static;
transform: none;
background: transparent;
border: none;
box-shadow: none;
padding: 0;
opacity: 1;
pointer-events: auto;
color: inherit;
font-size: var(--fs-sm);
z-index: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Aktiver/disabled Eintrag färbt im Expanded-Modus auch das Label (erbt via color: inherit). */
.rail.expanded .rail-mode.active .rail-mode-label { color: var(--pink-400); }
/* Gruppen-Trenner: zarter Hairline zwischen den Sinngruppen der Rail.
Funktioniert in beiden Zuständen — schmal zentriert wenn collapsed, voll wenn expanded. */
.rail-divider {
flex: 0 0 auto;
height: 0;
width: 28px;
margin: var(--sp-6) auto;
border-top: 1px solid rgba(255,255,255,.08);
}
.rail.expanded .rail-divider {
width: auto;
align-self: stretch;
margin: var(--sp-6) var(--sp-4);
}
/* ─── Hub (Option A — Kommandozentrale) ─── */
.hub-shell {
min-height: 100vh;
background: var(--paper);
font-family: var(--font-sans);
color: var(--ink-900);
}
.hub-a {
margin-left: var(--rail-w);
padding: var(--sp-32) 40px 80px;
max-width: 1280px;
}
.hub-a-top {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 40px;
gap: var(--sp-32);
}
.hub-a-greet {
font-size: var(--fs-xs);
color: var(--ink-500);
text-transform: none;
letter-spacing: 0.01em;
margin-bottom: var(--sp-10);
font-weight: 500;
}
.hub-a-h1 {
font-family: var(--font-serif);
font-size: 48px;
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0;
font-weight: 500;
color: var(--ink-900);
}
.hub-a-h1 .accent {
color: var(--pink-500);
font-style: italic;
}
.hub-a-search {
display: flex;
align-items: center;
gap: var(--sp-10);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
padding: var(--sp-10) var(--sp-14);
font-size: var(--fs-sm);
color: var(--ink-500);
min-width: 280px;
cursor: pointer;
transition: border-color .12s ease, box-shadow .12s ease;
}
.hub-a-search:hover {
border-color: var(--ink-400);
box-shadow: 0 1px 3px color-mix(in srgb, var(--navy-900) 4%, transparent);
}
.hub-a-search kbd {
margin-left: auto;
background: var(--paper-2);
border: 1px solid var(--paper-3);
border-radius: var(--radius-sm);
padding: var(--sp-2) var(--sp-6);
font-size: var(--fs-3xs);
font-family: var(--font-mono);
color: var(--ink-600);
}
.hub-a-grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: var(--sp-24);
}
.hub-a-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-14);
align-content: start;
}
.hub-a-card {
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-lg);
padding: var(--sp-20);
cursor: pointer;
transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
display: flex;
flex-direction: column;
gap: var(--sp-10);
min-height: 168px;
}
.hub-a-card.live:hover,
.hub-a-card.wip:hover {
transform: translateY(-2px);
border-color: var(--pink-300);
box-shadow: 0 6px 20px color-mix(in srgb, var(--pink-500) 10%, transparent);
}
.hub-a-card.soon {
cursor: default;
background: var(--paper-2);
border-color: var(--paper-3);
}
.hub-a-card.soon .icon-wrap { color: var(--ink-400); }
.hub-a-card.soon .hub-a-card-title,
.hub-a-card.soon .hub-a-card-desc { color: var(--ink-500); }
.hub-a-card .icon-wrap {
width: 32px;
height: 32px;
border-radius: var(--radius);
background: var(--paper-2);
display: flex;
align-items: center;
justify-content: center;
color: var(--pink-500);
}
.hub-a-card.live .icon-wrap {
background: color-mix(in srgb, var(--pink-500) 10%, transparent);
}
.hub-a-card.wip .icon-wrap {
background: rgba(184,119,13,0.10);
color: #8a5a07;
}
.hub-a-card-title {
font-size: var(--fs-lg);
font-weight: 600;
color: var(--ink-900);
letter-spacing: -0.01em;
}
.hub-a-card-desc {
font-size: var(--fs-xs);
color: var(--ink-600);
line-height: 1.45;
flex: 1;
}
.hub-a-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: var(--sp-4);
}
.hub-a-card-footer .pill {
font-size: var(--fs-3xs);
font-weight: 600;
text-transform: none;
letter-spacing: 0.01em;
padding: var(--sp-4) var(--sp-8);
border-radius: var(--radius-sm);
}
.hub-a-card-footer .pill.live {
background: rgba(74,146,100,0.14);
color: #2f6741;
}
.hub-a-card-footer .pill.wip {
background: rgba(184,119,13,0.14);
color: #8a5a07;
}
.hub-a-card-footer .pill.soon {
background: var(--paper-3);
color: var(--ink-600);
}
.hub-a-card-footer .arrow {
font-size: var(--fs-xs);
color: var(--ink-500);
font-weight: 500;
}
.hub-a-card.live .hub-a-card-footer .arrow,
.hub-a-card.wip .hub-a-card-footer .arrow {
color: var(--pink-500);
font-size: var(--fs-lg);
}
.hub-a-side {
display: flex;
flex-direction: column;
gap: var(--sp-14);
}
.hub-a-side-card {
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-lg);
padding: var(--sp-16);
}
.hub-a-side-h {
font-size: var(--fs-2xs);
text-transform: none;
letter-spacing: 0.01em;
color: var(--ink-500);
font-weight: 600;
margin-bottom: var(--sp-12);
}
.hub-a-recent { display: flex; flex-direction: column; gap: var(--sp-2); }
.hub-a-recent-row {
display: grid;
grid-template-columns: 88px 1fr auto;
gap: var(--sp-10);
align-items: baseline;
padding: var(--sp-8) var(--sp-8);
margin: 0 -8px;
border-radius: var(--radius-md);
cursor: pointer;
transition: background .1s ease;
}
.hub-a-recent-row:hover { background: var(--paper-2); }
.hub-a-recent-row .id {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--pink-500);
font-weight: 500;
}
.hub-a-recent-row .t {
font-size: var(--fs-xs);
color: var(--ink-800);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hub-a-recent-row .ago {
font-size: var(--fs-3xs);
color: var(--ink-500);
font-family: var(--font-mono);
}
.hub-a-stat-row {
display: flex;
justify-content: space-between;
font-size: var(--fs-xs);
padding: var(--sp-6) 0;
border-bottom: 1px dashed var(--paper-3);
}
.hub-a-stat-row:last-child { border-bottom: none; }
.hub-a-stat-row .lab { color: var(--ink-700); }
.hub-a-stat-row .v {
font-family: var(--font-mono);
color: var(--ink-900);
font-weight: 500;
}
/* ─── Library (Option A — Familien-Spalten) ─── */
.lib-shell {
min-height: 100vh;
background: var(--paper);
font-family: var(--font-sans);
color: var(--ink-900);
}
.lib-a {
margin-left: var(--rail-w);
padding: var(--sp-32) 40px 64px;
}
.lib-a-top {
display: grid;
grid-template-columns: 1fr 1fr 320px;
align-items: end;
gap: var(--sp-24);
margin-bottom: var(--sp-24);
}
.lib-a-top h1 {
font-family: var(--font-serif);
font-size: var(--fs-4xl);
font-weight: 600;
letter-spacing: -0.015em;
margin: 0;
color: var(--ink-900);
}
.lib-a-top .crumb {
font-weight: 400;
font-size: var(--fs-xs);
color: var(--ink-500);
text-transform: none;
letter-spacing: 0;
margin-bottom: var(--sp-8);
font-family: var(--font-mono);
}
.lib-a-top .crumb span:hover { color: var(--pink-500); }
.lib-a-search {
display: flex;
align-items: center;
gap: var(--sp-10);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
padding: var(--sp-8) var(--sp-12);
font-size: var(--fs-sm);
color: var(--ink-500);
}
.lib-a-search kbd {
background: var(--paper-2);
border: 1px solid var(--paper-3);
border-radius: var(--radius-sm);
padding: var(--sp-2) var(--sp-6);
font-size: var(--fs-3xs);
font-family: var(--font-mono);
color: var(--ink-600);
}
.lib-a-tabs {
display: flex;
gap: var(--sp-4);
border-bottom: 1px solid var(--paper-3);
margin-bottom: var(--sp-24);
}
.lib-a-tab {
padding: var(--sp-10) var(--sp-16);
font-size: var(--fs-sm);
color: var(--ink-600);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color .12s ease, border-color .12s ease;
}
.lib-a-tab:hover { color: var(--ink-900); }
.lib-a-tab.active {
color: var(--pink-500);
border-bottom-color: var(--pink-500);
font-weight: 500;
}
.lib-a-tab .count {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-400);
margin-left: var(--sp-4);
}
.lib-a-cols {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sp-16);
}
.lib-a-col {
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
padding: var(--sp-14);
min-height: 360px;
}
.lib-a-col-h {
display: flex;
align-items: center;
gap: var(--sp-8);
padding-bottom: var(--sp-10);
border-bottom: 1px solid var(--paper-3);
margin-bottom: var(--sp-10);
}
.lib-a-col-h .swatch {
width: 10px; height: 10px; border-radius: var(--radius-xs);
}
.lib-a-col-h .name {
font-size: var(--fs-sm);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink-900);
}
.lib-a-col-h .count {
font-size: var(--fs-2xs);
color: var(--ink-400);
font-family: var(--font-mono);
margin-left: auto;
}
.lib-a-item {
padding: var(--sp-10) var(--sp-8);
min-width: 0;
overflow-wrap: anywhere;
margin: 0 -8px;
border-radius: var(--radius-md);
cursor: pointer;
transition: background .1s ease;
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.lib-a-item.live:hover { background: var(--paper-2); }
.lib-a-item.soon {
cursor: default;
opacity: 0.55;
}
.lib-a-item-id {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--ink-500);
font-weight: 500;
}
.lib-a-item.live .lib-a-item-id { color: var(--pink-500); }
.lib-a-item-t {
font-size: var(--fs-xs);
color: var(--ink-900);
line-height: 1.35;
font-weight: 500;
}
.lib-a-item-meta {
font-size: var(--fs-3xs);
color: var(--ink-500);
font-family: var(--font-mono);
}
/* ---------- Chips (Reifegrad/Lifecycle/Qualitaet/Flags) ----------
Extrahiert aus Inline-style-Objekten (P3d, Design-System-Konsolidierung,
docs/superpowers/specs/2026-07-12-design-system-konsolidierung-design.md).
Werterhaltend; genuin dynamische Farben (Reifegrad-/Flag-Typ-Farbe)
bleiben inline, referenzieren aber weiterhin Tokens. Chip-Rahmenfarbe
nutzt currentColor (identisch zum vorherigen Inline-Wert). */
.lib-chip-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-4);
margin-top: 1px;
}
.lib-chip-tier {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 700;
letter-spacing: .01em;
text-transform: none;
border-style: solid;
border-width: 1px;
border-radius: var(--radius-sm);
padding: 1px var(--sp-4);
}
.lib-chip-lifecycle {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: .03em;
color: var(--ink-600, #555c66);
border: 1px solid var(--ink-300, #c7ccd4);
border-radius: var(--radius-sm);
padding: 1px var(--sp-4);
}
.lib-chip-quality {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 600;
color: var(--ink-500, #6b7280);
}
.lib-chip-flag {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 600;
border-style: dashed;
border-width: 1px;
border-radius: var(--radius-sm);
padding: 1px var(--sp-4);
}
/* ============================================================
Cross-Search — Volltextsuche über alle Standards (Phase 2 prototype)
============================================================ */
.cs-shell {
min-height: 100vh;
background: var(--paper);
color: var(--ink-900);
font-family: var(--font-sans);
}
.cs-app {
margin-left: var(--rail-w);
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* ---------- Header ---------- */
.cs-header {
padding: var(--sp-32) 40px var(--sp-16);
border-bottom: 1px solid var(--paper-3);
background: linear-gradient(180deg, rgba(250,248,244,1) 0%, rgba(250,248,244,0.7) 100%);
position: sticky; top: 0; z-index: 20;
backdrop-filter: blur(8px);
}
.cs-crumb {
font-weight: 400;
font-size: var(--fs-xs);
font-family: var(--font-mono);
color: var(--ink-500);
letter-spacing: 0;
margin-bottom: var(--sp-8);
display: flex; align-items: center; gap: var(--sp-8);
}
.cs-crumb-link { cursor: pointer; transition: color .12s; }
.cs-crumb-link:hover { color: var(--pink-500); }
.cs-crumb-flag {
margin-left: auto;
background: color-mix(in srgb, var(--pink-500) 10%, transparent);
color: var(--pink-500);
padding: var(--sp-2) var(--sp-8);
border-radius: var(--radius-sm);
font-size: var(--fs-3xs);
font-weight: 600;
}
.cs-querybar {
display: flex; align-items: stretch;
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-lg);
box-shadow: 0 1px 2px color-mix(in srgb, var(--navy-900) 4%, transparent);
transition: border-color .15s, box-shadow .15s;
overflow: hidden;
}
.cs-querybar:focus-within {
border-color: var(--pink-300);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink-500) 10%, transparent), 0 1px 2px color-mix(in srgb, var(--navy-900) 4%, transparent);
}
.cs-querybar-icon {
display: grid; place-items: center;
padding: 0 var(--sp-14) 0 var(--sp-16);
color: var(--ink-500);
}
.cs-input {
flex: 1;
border: none; outline: none;
font-family: var(--font-sans);
font-size: var(--fs-xl);
background: transparent;
color: var(--ink-900);
padding: var(--sp-16) 0;
letter-spacing: -0.005em;
}
.cs-input::placeholder { color: var(--ink-400); }
.cs-clear {
background: var(--paper-2); border: none;
width: 24px; height: 24px;
border-radius: 50%;
display: grid; place-items: center;
cursor: pointer;
margin: auto var(--sp-12);
color: var(--ink-600);
transition: background .12s;
}
.cs-clear:hover { background: var(--paper-3); color: var(--ink-900); }
.cs-mode-tabs {
display: flex; gap: 0;
border-left: 1px solid var(--paper-3);
padding: var(--sp-6);
margin: var(--sp-6) var(--sp-6) var(--sp-6) 0;
background: var(--paper-2);
border-radius: var(--radius);
align-self: center;
margin-right: var(--sp-6);
}
.cs-mode-tab {
background: transparent; border: none;
padding: var(--sp-8) var(--sp-14);
font-family: var(--font-sans);
font-size: var(--fs-xs);
font-weight: 500;
color: var(--ink-600);
cursor: pointer;
border-radius: var(--radius-md);
transition: all .12s;
}
.cs-mode-tab:hover { color: var(--ink-900); }
.cs-mode-tab.active {
background: white;
color: var(--ink-900);
box-shadow: 0 1px 3px color-mix(in srgb, var(--navy-900) 8%, transparent);
}
.cs-status {
display: flex; align-items: center; gap: var(--sp-16);
padding: var(--sp-12) var(--sp-4) 0;
font-size: var(--fs-xs);
color: var(--ink-600);
}
.cs-status-num {
font-family: var(--font-mono);
color: var(--ink-900);
font-weight: 600;
}
.cs-status-err {
color: #b04a4a;
font-family: var(--font-mono);
}
.cs-clear-filters {
margin-left: auto;
background: white;
border: 1px solid var(--paper-3);
padding: var(--sp-4) var(--sp-10);
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: var(--fs-2xs);
color: var(--ink-700);
cursor: pointer;
display: inline-flex; align-items: center; gap: var(--sp-4);
transition: all .12s;
}
.cs-clear-filters:hover {
border-color: var(--pink-300);
color: var(--pink-500);
}
/* ---------- Body 3-column layout ---------- */
.cs-body {
flex: 1;
display: grid;
grid-template-columns: var(--facets-w) 1fr 360px;
gap: 0;
min-height: 0;
}
.cs-body-no-preview {
grid-template-columns: var(--facets-w) 1fr 32px;
}
/* ---------- Facets ---------- */
/* Facetten-Spalte (Cross-Search / Lesezeichen / Wissensdatenbank): zentrale
Breite via --facets-w (im jeweiligen 2-Spalten-Grid) + gemeinsamer Rahmen und
Innenabstand. Die Seiten ergänzen nur ihren Sticky-Offset/Hintergrund. */
.cs-facets, .bm-facets, .kb-facets {
border-right: 1px solid var(--paper-3);
padding: var(--sp-24) var(--sp-16) 64px;
}
.cs-facets {
overflow-y: auto;
max-height: calc(100vh - 154px);
position: sticky;
top: 154px;
}
.cs-facet-block {
margin-bottom: var(--sp-20);
}
.cs-facet-h {
font-size: var(--fs-3xs);
text-transform: none;
letter-spacing: 0.01em;
font-weight: 600;
color: var(--ink-500);
margin-bottom: var(--sp-6);
padding: 0 var(--sp-8);
}
.cs-facet-row {
display: flex; align-items: center; gap: var(--sp-8);
width: 100%;
background: transparent;
border: none;
padding: var(--sp-6) var(--sp-8);
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: var(--fs-xs);
color: var(--ink-700);
cursor: pointer;
text-align: left;
transition: background .1s, color .1s;
}
.cs-facet-row:hover { background: white; }
.cs-facet-row.active {
background: white;
color: var(--ink-900);
box-shadow: inset 2px 0 0 var(--pink-500);
}
.cs-facet-row.empty { opacity: 0.4; }
.cs-facet-row.empty:hover { background: transparent; cursor: default; }
.cs-facet-label { flex: 1; }
.cs-facet-label.cs-mono { font-family: var(--font-mono); font-size: var(--fs-2xs); }
.cs-facet-count {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--ink-500);
font-weight: 500;
}
.cs-facet-row.active .cs-facet-count { color: var(--pink-500); font-weight: 700; }
.cs-fam-dot {
width: 8px; height: 8px;
border-radius: var(--radius-xs);
flex-shrink: 0;
}
/* ---------- Results stream ---------- */
.cs-results {
padding: var(--sp-24) var(--sp-32) 80px;
min-width: 0;
overflow-y: auto;
max-height: calc(100vh - 154px);
}
/* Bridge banner */
.cs-bridge {
background: linear-gradient(135deg, color-mix(in srgb, var(--pink-500) 4%, transparent), rgba(45,108,223,0.04));
border: 1px solid color-mix(in srgb, var(--pink-500) 15%, transparent);
border-radius: var(--radius);
padding: var(--sp-12) var(--sp-16);
margin-bottom: var(--sp-20);
}
.cs-bridge-h {
font-size: var(--fs-2xs);
font-weight: 600;
color: var(--pink-500);
display: flex; align-items: center; gap: var(--sp-6);
text-transform: none;
letter-spacing: 0.01em;
margin-bottom: var(--sp-8);
}
.cs-bridge-sub {
text-transform: none;
letter-spacing: 0;
color: var(--ink-600);
font-weight: 500;
margin-left: var(--sp-4);
}
.cs-bridge-row { display: flex; gap: var(--sp-8); flex-wrap: wrap; }
.cs-bridge-tag {
background: white;
border: 1px solid var(--paper-3);
padding: var(--sp-6) var(--sp-10) var(--sp-6) var(--sp-10);
border-radius: var(--radius-md);
font-size: var(--fs-2xs);
font-family: var(--font-mono);
color: var(--ink-800);
cursor: pointer;
display: inline-flex; align-items: center; gap: var(--sp-6);
transition: all .12s;
}
.cs-bridge-tag:hover {
border-color: var(--pink-300);
transform: translateY(-1px);
box-shadow: 0 2px 8px color-mix(in srgb, var(--pink-500) 10%, transparent);
}
.cs-bridge-fams { display: inline-flex; gap: var(--sp-2); padding-left: var(--sp-4); border-left: 1px solid var(--paper-3); }
.cs-bridge-count {
font-size: var(--fs-3xs);
background: var(--paper-2);
padding: 1px var(--sp-4);
border-radius: var(--radius-xs);
font-weight: 600;
}
/* Hit list */
.cs-hits {
display: flex; flex-direction: column;
gap: var(--sp-10);
}
.cs-hit {
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
display: flex;
cursor: pointer;
transition: border-color .12s, transform .12s, box-shadow .12s;
overflow: hidden;
}
.cs-hit:hover {
border-color: var(--ink-300);
transform: translateY(-1px);
box-shadow: 0 4px 14px color-mix(in srgb, var(--navy-900) 6%, transparent);
}
.cs-hit.active {
border-color: var(--pink-500);
box-shadow: 0 0 0 1px var(--pink-500), 0 4px 14px color-mix(in srgb, var(--pink-500) 10%, transparent);
}
.cs-hit-rail {
width: 3px;
flex-shrink: 0;
}
.cs-hit-body {
flex: 1;
padding: var(--sp-14) var(--sp-16);
display: flex; flex-direction: column;
gap: var(--sp-6);
min-width: 0;
}
.cs-hit-meta {
display: flex; align-items: center; gap: var(--sp-10);
font-size: var(--fs-2xs);
color: var(--ink-500);
}
.cs-hit-std {
font-family: var(--font-mono);
font-weight: 600;
font-size: var(--fs-2xs);
display: inline-flex; align-items: center; gap: var(--sp-4);
}
.cs-hit-crumb {
color: var(--ink-500);
font-size: var(--fs-2xs);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cs-hit-spacer { flex: 1; }
.cs-lang-pill {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 600;
background: var(--paper-2);
color: var(--ink-600);
padding: var(--sp-2) var(--sp-4);
border-radius: var(--radius-xs);
letter-spacing: 0.06em;
}
.cs-kind-badge {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 700;
padding: var(--sp-2) var(--sp-6);
border-radius: var(--radius-xs);
letter-spacing: 0.04em;
}
.cs-hit-title {
font-family: var(--font-serif);
font-size: var(--fs-lg);
font-weight: 600;
line-height: 1.3;
color: var(--ink-900);
letter-spacing: -0.005em;
}
.cs-hit-snippet {
font-size: var(--fs-sm);
line-height: 1.55;
color: var(--ink-700);
font-family: var(--font-serif);
}
.cs-hit-foot {
display: flex; align-items: center; gap: var(--sp-10);
margin-top: var(--sp-4);
font-size: var(--fs-2xs);
flex-wrap: wrap;
}
.cs-hit-anchor {
font-size: var(--fs-3xs);
color: var(--ink-500);
font-weight: 600;
}
.cs-tag {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--ink-500);
}
.cs-pill {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 600;
padding: var(--sp-2) var(--sp-6);
border-radius: var(--radius-xs);
letter-spacing: 0.04em;
}
.cs-pill-changed { background: color-mix(in srgb, var(--pink-500) 12%, transparent); color: var(--pink-500); }
.cs-pill-stable { background: var(--status-ok-bg); color: var(--status-ok); }
.cs-pill-likely { background: var(--status-warn-bg); color: var(--status-warn); }
.cs-pill-volatile{ background: var(--status-danger-bg); color: var(--status-danger); }
.cs-sl {
display: inline-flex; align-items: center; gap: var(--sp-4);
margin-right: var(--sp-4);
}
.cs-sl-lab {
font-size: var(--fs-3xs); font-weight: 700;
color: var(--ink-500);
font-family: var(--font-mono);
margin-right: var(--sp-2);
letter-spacing: 0.06em;
}
.cs-sl-cell {
width: 8px; height: 10px;
border-radius: 1px;
background: var(--paper-3);
}
.cs-sl-cell.on { background: var(--fam-iec); }
.cs-sl-cell.big {
width: 14px; height: 14px;
border-radius: var(--radius-xs);
display: grid; place-items: center;
font-family: var(--font-mono);
font-size: var(--fs-3xs); font-weight: 700;
color: var(--ink-400);
}
.cs-sl-cell.big.on { color: white; }
.cs-hit-open {
background: var(--ink-900);
color: white;
border: none;
padding: var(--sp-6) var(--sp-10);
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: var(--fs-2xs);
font-weight: 500;
cursor: pointer;
display: inline-flex; align-items: center; gap: var(--sp-4);
transition: background .12s;
}
.cs-hit-open:hover { background: var(--pink-500); }
.cs-hit-soon {
font-size: var(--fs-3xs);
color: var(--ink-400);
font-style: italic;
}
/* highlight */
.cs-mark {
background: color-mix(in srgb, var(--pink-500) 14%, transparent);
color: var(--ink-900);
border-radius: var(--radius-xs);
padding: 1px var(--sp-2);
margin: 0 -1px;
box-shadow: inset 0 -1px 0 var(--pink-500);
font-weight: 500;
}
/* ---------- Initial state ---------- */
.cs-initial {
max-width: 720px;
padding: var(--sp-32) 0;
}
.cs-initial-h {
font-family: var(--font-serif);
font-size: var(--fs-3xl);
font-weight: 600;
letter-spacing: -0.015em;
color: var(--ink-900);
margin-bottom: var(--sp-6);
}
.cs-initial-sub {
font-size: var(--fs-sm);
color: var(--ink-600);
line-height: 1.55;
margin-bottom: var(--sp-32);
max-width: 540px;
}
.cs-initial-block { margin-bottom: var(--sp-32); }
.cs-initial-block-h {
font-size: var(--fs-2xs);
font-weight: 600;
text-transform: none;
letter-spacing: 0.01em;
color: var(--ink-500);
margin-bottom: var(--sp-12);
}
.cs-suggestions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-8);
}
.cs-suggestion {
background: white;
border: 1px solid var(--paper-3);
padding: var(--sp-12) var(--sp-14);
border-radius: var(--radius);
text-align: left;
cursor: pointer;
transition: all .12s;
display: flex; flex-direction: column; gap: var(--sp-4);
}
.cs-suggestion:hover {
border-color: var(--pink-300);
transform: translateY(-1px);
box-shadow: 0 3px 12px color-mix(in srgb, var(--navy-900) 6%, transparent);
}
.cs-suggestion-q {
font-family: var(--font-mono);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--pink-500);
}
.cs-suggestion-sub {
font-size: var(--fs-xs);
color: var(--ink-600);
line-height: 1.4;
}
.cs-ops {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-8) var(--sp-24);
}
.cs-op {
font-size: var(--fs-xs);
color: var(--ink-700);
}
.cs-op code {
font-family: var(--font-mono);
background: var(--paper-2);
padding: var(--sp-2) var(--sp-6);
border-radius: var(--radius-xs);
margin-right: var(--sp-8);
color: var(--ink-900);
font-size: var(--fs-2xs);
}
/* ---------- No results ---------- */
.cs-noresult {
text-align: left;
max-width: 480px;
padding: 64px 0;
}
.cs-noresult-h {
font-family: var(--font-serif);
font-size: var(--fs-2xl);
font-weight: 600;
color: var(--ink-900);
margin-bottom: var(--sp-8);
}
.cs-noresult-sub {
font-size: var(--fs-sm);
color: var(--ink-600);
line-height: 1.5;
margin-bottom: var(--sp-16);
}
/* ---------- Preview panel ---------- */
.cs-preview {
position: relative;
background: var(--reader-bg);
border-left: 1px solid var(--paper-3);
padding: var(--sp-24) var(--sp-24) 80px;
overflow-y: auto;
max-height: calc(100vh - 154px);
}
.cs-preview.empty {
background: var(--paper);
display: grid; place-items: center;
}
.cs-preview-empty {
text-align: center;
color: var(--ink-500);
max-width: 240px;
padding: var(--sp-32) var(--sp-16);
}
.cs-preview-empty-h {
font-size: var(--fs-md); font-weight: 600;
margin: var(--sp-12) 0 var(--sp-4);
color: var(--ink-700);
}
.cs-preview-empty-sub { font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-500); }
.cs-preview-close {
position: absolute;
top: 14px; right: 14px;
background: var(--paper-2);
border: none;
width: 24px; height: 24px;
border-radius: var(--radius-md);
display: grid; place-items: center;
cursor: pointer;
color: var(--ink-600);
transition: all .12s;
}
.cs-preview-close:hover { background: var(--paper-3); color: var(--ink-900); }
.cs-preview-inner { padding-top: var(--sp-4); }
.cs-preview-meta {
display: flex; align-items: center; gap: var(--sp-6);
font-size: var(--fs-2xs);
margin-bottom: var(--sp-8);
}
.cs-preview-meta-sep { color: var(--ink-400); }
.cs-preview-meta-ref { color: var(--ink-600); }
.cs-preview-anchor {
font-size: var(--fs-2xs);
font-weight: 600;
color: var(--ink-500);
margin-bottom: var(--sp-4);
}
.cs-preview-title {
font-family: var(--font-serif);
font-size: var(--fs-2xl);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.25;
color: var(--ink-900);
margin: 0 0 var(--sp-6);
}
.cs-preview-crumb {
font-size: var(--fs-2xs);
color: var(--ink-500);
margin-bottom: var(--sp-16);
padding-bottom: var(--sp-14);
border-bottom: 1px dashed var(--paper-3);
}
.cs-preview-body {
font-family: var(--font-serif);
font-size: var(--fs-md);
line-height: 1.65;
color: var(--ink-800);
margin-bottom: var(--sp-24);
}
.cs-preview-row {
display: flex; flex-direction: column; gap: var(--sp-8);
margin-bottom: var(--sp-20);
}
.cs-preview-row-h {
font-size: var(--fs-3xs);
text-transform: none;
letter-spacing: 0.01em;
font-weight: 600;
color: var(--ink-500);
}
.cs-preview-actions {
display: flex; gap: var(--sp-6); flex-wrap: wrap;
}
.cs-btn {
background: white;
border: 1px solid var(--paper-3);
padding: var(--sp-8) var(--sp-12);
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: var(--fs-xs);
color: var(--ink-800);
cursor: pointer;
display: inline-flex; align-items: center; gap: var(--sp-6);
transition: all .12s;
}
.cs-btn:hover { border-color: var(--ink-300); }
.cs-btn.primary {
background: var(--ink-900);
color: white;
border-color: var(--ink-900);
}
.cs-btn.primary:hover { background: var(--pink-500); border-color: var(--pink-500); }
.cs-btn:disabled {
background: var(--paper-2);
color: var(--ink-400);
cursor: not-allowed;
}
.cs-preview-list {
display: flex; flex-direction: column;
gap: var(--sp-2);
}
.cs-preview-rel {
background: transparent;
border: none;
text-align: left;
padding: var(--sp-8) var(--sp-10);
border-radius: var(--radius-md);
cursor: pointer;
display: flex; align-items: center; gap: var(--sp-8);
font-family: var(--font-sans);
transition: background .1s;
}
.cs-preview-rel:hover { background: var(--paper-2); }
.cs-preview-rel-id {
font-size: var(--fs-3xs);
font-weight: 600;
color: var(--ink-500);
min-width: 80px;
flex-shrink: 0;
}
.cs-preview-rel-t {
font-size: var(--fs-xs);
color: var(--ink-800);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cs-mono { font-family: var(--font-mono); }
.cs-preview-stub {
background: var(--paper-2);
border-left: 1px solid var(--paper-3);
border-top: none; border-right: none; border-bottom: none;
cursor: pointer;
display: flex; align-items: flex-start;
justify-content: center;
padding: var(--sp-24) 0;
transition: background .12s;
}
.cs-preview-stub:hover { background: var(--paper-3); }
.cs-preview-stub .lab {
writing-mode: vertical-rl;
font-size: var(--fs-3xs);
font-weight: 600;
text-transform: none;
letter-spacing: 0.01em;
color: var(--ink-700);
margin-top: var(--sp-14);
}
/* Scrollbars */
.cs-results::-webkit-scrollbar,
.cs-facets::-webkit-scrollbar,
.cs-preview::-webkit-scrollbar { width: 8px; }
.cs-results::-webkit-scrollbar-thumb,
.cs-facets::-webkit-scrollbar-thumb,
.cs-preview::-webkit-scrollbar-thumb {
background: var(--ink-300);
border-radius: var(--radius-sm);
}
.cs-results::-webkit-scrollbar-thumb:hover,
.cs-facets::-webkit-scrollbar-thumb:hover,
.cs-preview::-webkit-scrollbar-thumb:hover {
background: var(--ink-500);
}
/* responsive */
@media (max-width: 1280px) {
.cs-body {
grid-template-columns: 220px 1fr 320px;
}
}
@media (max-width: 1100px) {
.cs-body {
grid-template-columns: 200px 1fr;
}
.cs-preview { display: none; }
}
/* ============================================================
COMPARE MODULE — pages/compare.jsx
Prefix: .cmp-*
============================================================ */
.cmp-shell {
min-height: 100vh;
background: var(--paper);
font-family: var(--font-sans);
color: var(--ink-900);
}
.cmp-app {
margin-left: var(--rail-w);
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* ---------- Header ---------- */
.cmp-header {
padding: var(--sp-32) 40px var(--sp-14);
border-bottom: 1px solid var(--paper-3);
background: var(--paper);
position: sticky;
top: 0;
z-index: 20;
}
.cmp-crumb {
font-weight: 400;
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--ink-500);
letter-spacing: 0;
margin-bottom: var(--sp-8);
display: flex;
align-items: center;
gap: var(--sp-8);
}
.cmp-crumb-link {
cursor: pointer;
color: var(--ink-500);
}
.cmp-crumb-link:hover { color: var(--pink-500); }
.cmp-crumb-flag {
margin-left: auto;
background: var(--paper-2);
border: 1px solid var(--paper-3);
padding: var(--sp-4) var(--sp-8);
border-radius: var(--radius-sm);
font-size: var(--fs-3xs);
letter-spacing: 0.01em;
color: var(--ink-600);
text-transform: none;
}
/* Picker row */
.cmp-header-row {
display: grid;
grid-template-columns: 1fr 48px 1fr;
gap: 0;
align-items: stretch;
}
.cmp-picker {
position: relative;
}
.cmp-picker-side {
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
margin-bottom: var(--sp-6);
padding: 0 var(--sp-2);
}
.cmp-picker-btn {
width: 100%;
display: flex;
align-items: center;
gap: var(--sp-12);
padding: var(--sp-12) var(--sp-14);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
cursor: pointer;
font-family: inherit;
text-align: left;
transition: border-color 0.15s, box-shadow 0.15s;
}
.cmp-picker-btn:hover { border-color: var(--ink-400); box-shadow: var(--shadow-1); }
.cmp-picker-text { flex: 1; min-width: 0; }
.cmp-picker-short {
font-family: var(--font-mono);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--ink-900);
margin-bottom: 1px;
}
.cmp-picker-full {
font-size: var(--fs-2xs);
color: var(--ink-600);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cmp-picker-chev {
color: var(--ink-500);
display: inline-flex;
transform: rotate(90deg);
flex-shrink: 0;
}
.cmp-picker-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
box-shadow: var(--shadow-2);
z-index: 40;
padding: var(--sp-6);
max-height: 380px;
overflow-y: auto;
}
.cmp-picker-dropdown-h {
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
padding: var(--sp-8) var(--sp-10) var(--sp-6);
}
.cmp-picker-item {
width: 100%;
display: flex;
align-items: center;
gap: var(--sp-10);
padding: var(--sp-10) var(--sp-10);
background: transparent;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
text-align: left;
font-family: inherit;
margin-bottom: 1px;
}
.cmp-picker-item:hover { background: var(--paper); }
.cmp-picker-item.active { background: var(--paper-2); }
.cmp-picker-item.disabled {
opacity: 0.45;
cursor: not-allowed;
}
.cmp-picker-item-text { flex: 1; min-width: 0; }
.cmp-picker-item-short {
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--ink-900);
}
.cmp-picker-item-full {
font-size: var(--fs-2xs);
color: var(--ink-600);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cmp-picker-item-flag {
font-size: var(--fs-3xs);
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
background: var(--paper-2);
padding: var(--sp-2) var(--sp-6);
border-radius: var(--radius-xs);
}
/* Swap button */
.cmp-swap {
align-self: end;
height: 46px;
width: 46px;
margin: 0 auto;
display: grid;
place-items: center;
background: white;
border: 1px solid var(--paper-3);
border-radius: 50%;
cursor: pointer;
color: var(--ink-700);
transition: all 0.15s;
}
.cmp-swap:hover {
background: var(--pink-500);
border-color: var(--pink-500);
color: white;
transform: rotate(180deg);
}
/* Header meta row (walks + stats) */
.cmp-header-meta {
display: flex;
align-items: center;
gap: var(--sp-24);
margin-top: var(--sp-14);
flex-wrap: wrap;
}
.cmp-walks {
display: flex;
align-items: center;
gap: var(--sp-6);
flex-wrap: wrap;
}
.cmp-walks-h {
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
margin-right: var(--sp-4);
}
.cmp-walk {
display: inline-flex;
align-items: center;
gap: var(--sp-6);
background: white;
border: 1px solid var(--paper-3);
border-radius: 999px;
padding: var(--sp-4) var(--sp-12);
cursor: pointer;
font-family: inherit;
font-size: var(--fs-2xs);
color: var(--ink-700);
transition: all 0.12s;
}
.cmp-walk:hover {
border-color: var(--ink-400);
color: var(--ink-900);
}
.cmp-walk.active {
background: var(--navy-900);
border-color: var(--navy-900);
color: white;
}
.cmp-walk.active .cmp-fam-dot {
outline: 1.5px solid white;
outline-offset: 1px;
}
.cmp-walk.secondary {
border-style: dashed;
}
.cmp-walk-label {
font-family: var(--font-mono);
font-weight: 500;
font-size: var(--fs-2xs);
letter-spacing: 0.02em;
}
.cmp-stats {
margin-left: auto;
display: flex;
align-items: stretch;
gap: 0;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
background: white;
overflow: hidden;
}
.cmp-stats-h {
display: inline-flex;
align-items: center;
padding: 0 var(--sp-14);
font-size: var(--fs-2xs);
color: var(--ink-600);
font-family: var(--font-mono);
border-right: 1px solid var(--paper-3);
background: var(--paper-2);
}
.cmp-stat {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--sp-6);
padding: var(--sp-8) var(--sp-14);
background: white;
border: none;
border-right: 1px solid var(--paper-3);
cursor: pointer;
font-family: inherit;
color: var(--ink-700);
overflow: hidden;
transition: background 0.12s;
}
.cmp-stat:last-child { border-right: none; }
.cmp-stat:hover, .cmp-stat.on, .cmp-stat.focus { background: var(--paper); }
.cmp-stat.focus { box-shadow: inset 0 -2px 0 var(--pink-500); }
.cmp-stat-bar {
position: absolute;
left: 0; bottom: 0;
height: 2px;
width: var(--w);
background: currentColor;
opacity: 0.35;
}
.cmp-stat-glyph {
width: 9px;
height: 9px;
border-radius: var(--radius-sm);
display: inline-block;
}
.cmp-stat-num {
font-family: var(--font-mono);
font-weight: 600;
font-size: var(--fs-md);
color: var(--ink-900);
}
.cmp-stat-lab {
font-size: var(--fs-2xs);
color: var(--ink-600);
}
.cmp-stat-full { color: var(--fam-iso); }
.cmp-stat-partial { color: var(--fam-iec); }
.cmp-stat-gap { color: var(--pink-500); }
/* coverage glyphs */
.cmp-glyph-full { background: var(--fam-iso); }
.cmp-glyph-partial { background: linear-gradient(90deg, var(--fam-iec) 50%, transparent 50%); border: 1.5px solid var(--fam-iec); box-sizing: border-box; }
.cmp-glyph-gap { background: var(--paper); border: 1.5px dashed var(--pink-500); box-sizing: border-box; }
/* Family dot */
.cmp-fam-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
/* mono helper */
.cmp-mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
/* ---------- Stage (column area) ---------- */
.cmp-stage {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
position: relative;
}
.cmp-cols {
display: grid;
grid-template-columns: 1fr 220px 1fr;
border-bottom: 1px solid var(--paper-3);
background: var(--paper-2);
}
.cmp-col-head {
padding: var(--sp-16) var(--sp-24) var(--sp-14);
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.cmp-col-head-target {
text-align: right;
align-items: flex-end;
}
.cmp-col-head-side {
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
}
.cmp-col-head-row {
display: flex;
align-items: center;
gap: var(--sp-8);
font-family: var(--font-serif);
font-size: var(--fs-2xl);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink-900);
}
.cmp-col-head-target .cmp-col-head-row { flex-direction: row-reverse; }
.cmp-col-head-short { line-height: 1; }
.cmp-col-head-full {
font-size: var(--fs-2xs);
color: var(--ink-600);
}
.cmp-col-head-mid {
padding: var(--sp-16) var(--sp-16) var(--sp-14);
display: flex;
flex-direction: column;
gap: var(--sp-6);
align-items: center;
border-left: 1px solid var(--paper-3);
border-right: 1px solid var(--paper-3);
}
.cmp-col-head-mid-h {
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
}
.cmp-col-head-mid-legend {
display: flex;
flex-direction: column;
gap: var(--sp-4);
margin-top: var(--sp-4);
}
.cmp-legend-row {
display: inline-flex;
align-items: center;
gap: var(--sp-8);
font-size: var(--fs-3xs);
color: var(--ink-700);
font-family: var(--font-mono);
}
.cmp-legend-line {
width: 24px;
height: 0;
border-top: 1.5px solid currentColor;
display: inline-block;
}
.cmp-legend-full { color: var(--fam-iso); }
.cmp-legend-partial { color: var(--fam-iec); border-top-style: dashed !important; }
.cmp-legend-gap { color: var(--pink-500); border-top-style: dashed !important; }
/* Stage body — three columns, mid-lane absolute SVG */
.cmp-stage-body {
flex: 1;
display: grid;
grid-template-columns: 1fr 220px 1fr;
min-height: 0;
position: relative;
overflow: hidden;
}
.cmp-col {
overflow-y: auto;
padding: var(--sp-24) var(--sp-24) 80px;
display: flex;
flex-direction: column;
gap: var(--sp-10);
position: relative;
z-index: 2;
}
.cmp-col-source { padding-right: var(--sp-16); }
.cmp-col-target { padding-left: var(--sp-16); }
.cmp-col-empty {
padding: 40px var(--sp-20);
text-align: center;
font-size: var(--fs-sm);
color: var(--ink-500);
border: 1px dashed var(--paper-3);
border-radius: var(--radius);
margin-top: var(--sp-24);
}
.cmp-col-mid {
position: relative;
border-left: 1px solid var(--paper-3);
border-right: 1px solid var(--paper-3);
background: repeating-linear-gradient(
180deg,
var(--paper) 0 28px,
var(--paper-2) 28px 29px
);
z-index: 1;
}
.cmp-svg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.cmp-svg path { pointer-events: stroke; }
/* Requirement card */
.cmp-req {
position: relative;
display: flex;
align-items: flex-start;
gap: var(--sp-10);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
padding: var(--sp-12) var(--sp-14);
cursor: pointer;
transition: border-color 0.12s, box-shadow 0.12s, opacity 0.18s, transform 0.12s;
scroll-margin: 60px;
}
.cmp-req:hover {
border-color: var(--ink-400);
box-shadow: var(--shadow-1);
}
.cmp-req.hovered {
border-color: var(--ink-700);
}
.cmp-req.active {
border-color: var(--navy-900);
box-shadow: 0 0 0 1px var(--navy-900);
background: white;
}
.cmp-req.dimmed {
opacity: 0.32;
}
.cmp-req-source { padding-right: var(--sp-24); }
.cmp-req-target { padding-left: var(--sp-24); }
.cmp-req-target { flex-direction: row-reverse; }
.cmp-req-body {
flex: 1;
min-width: 0;
}
.cmp-req-target .cmp-req-body { text-align: right; }
.cmp-req-meta {
display: flex;
align-items: center;
gap: var(--sp-8);
margin-bottom: var(--sp-4);
flex-wrap: wrap;
}
.cmp-req-target .cmp-req-meta { justify-content: flex-end; }
.cmp-req-id {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
font-weight: 600;
letter-spacing: 0.02em;
}
.cmp-req-cat {
font-size: var(--fs-3xs);
font-weight: 500;
letter-spacing: 0.06em;
color: var(--ink-500);
background: var(--paper-2);
padding: 1px var(--sp-6);
border-radius: var(--radius-xs);
font-family: var(--font-mono);
}
.cmp-req-title {
font-family: var(--font-serif);
font-size: var(--fs-md);
font-weight: 600;
color: var(--ink-900);
line-height: 1.3;
letter-spacing: -0.005em;
text-wrap: pretty;
}
.cmp-req-crumb {
font-size: var(--fs-2xs);
color: var(--ink-500);
margin-top: var(--sp-4);
line-height: 1.3;
}
/* Connector dot — positioned at the column edge */
.cmp-req-dot {
position: absolute;
top: 18px;
width: 12px;
height: 12px;
border-radius: 50%;
background: white;
border: 1.5px solid var(--ink-400);
z-index: 3;
transition: all 0.12s;
}
.cmp-req-source .cmp-req-dot {
right: -6px;
}
.cmp-req-target .cmp-req-dot {
left: -6px;
}
.cmp-req-dot-full { border-color: var(--fam-iso); background: var(--fam-iso); }
.cmp-req-dot-partial { border-color: var(--fam-iec); background: white; }
.cmp-req-dot-gap { border-color: var(--pink-500); background: var(--paper); border-style: dashed; }
.cmp-req.active .cmp-req-dot,
.cmp-req.hovered .cmp-req-dot {
transform: scale(1.35);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--navy-900) 6%, transparent);
}
/* ---------- Tooltip ---------- */
.cmp-tooltip {
position: fixed;
z-index: 60;
background: var(--navy-900);
color: white;
border-radius: var(--radius);
padding: var(--sp-12) var(--sp-14);
width: 340px;
font-size: var(--fs-xs);
line-height: 1.45;
box-shadow: var(--shadow-3);
pointer-events: none;
border: 1px solid var(--navy-700);
}
.cmp-tooltip-head {
display: flex;
align-items: center;
font-size: var(--fs-3xs);
letter-spacing: 0.01em;
text-transform: none;
color: rgba(255,255,255,0.6);
margin-bottom: var(--sp-8);
font-weight: 600;
}
.cmp-tooltip-label-full { color: #6fc59a; }
.cmp-tooltip-label-partial { color: #f4b87a; }
.cmp-tooltip-label-gap { color: var(--pink-400); }
.cmp-tooltip-pair {
display: flex;
align-items: center;
gap: var(--sp-6);
font-size: var(--fs-2xs);
margin-bottom: var(--sp-8);
}
.cmp-tooltip-pair .cmp-mono {
font-weight: 600;
}
.cmp-tooltip-arrow { color: rgba(255,255,255,0.45); }
.cmp-tooltip-none { color: rgba(255,255,255,0.45); font-style: italic; }
.cmp-tooltip-targets {
display: flex;
flex-direction: column;
gap: var(--sp-4);
border-top: 1px solid var(--navy-700);
border-bottom: 1px solid var(--navy-700);
padding: var(--sp-8) 0;
margin: 0 0 var(--sp-10);
}
.cmp-tooltip-target {
display: flex;
align-items: baseline;
gap: var(--sp-8);
font-size: var(--fs-2xs);
}
.cmp-tooltip-target-id {
color: rgba(255,255,255,0.7);
flex-shrink: 0;
width: 60px;
}
.cmp-tooltip-target-t {
color: white;
}
.cmp-tooltip-note {
color: rgba(255,255,255,0.78);
font-size: var(--fs-xs);
line-height: 1.45;
}
/* ---------- Detail panel (locked edge) ---------- */
.cmp-detail {
position: absolute;
left: 16px;
right: 16px;
bottom: 16px;
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-3);
padding: var(--sp-16) var(--sp-20) var(--sp-20);
z-index: 30;
animation: cmp-detail-in 0.18s ease-out;
}
@keyframes cmp-detail-in {
from { transform: translateY(12px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.cmp-detail-close {
position: absolute;
top: 12px;
right: 12px;
width: 26px;
height: 26px;
display: grid;
place-items: center;
background: var(--paper);
border: 1px solid var(--paper-3);
border-radius: 50%;
cursor: pointer;
color: var(--ink-600);
}
.cmp-detail-close:hover { background: var(--pink-500); color: white; border-color: var(--pink-500); }
.cmp-detail-grid {
display: grid;
grid-template-columns: 1fr 280px 1fr;
gap: var(--sp-24);
align-items: stretch;
}
.cmp-detail-side {
display: flex;
flex-direction: column;
gap: var(--sp-8);
}
.cmp-detail-side-h {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
letter-spacing: 0.02em;
color: var(--ink-700);
display: flex;
align-items: center;
gap: var(--sp-8);
font-weight: 500;
}
.cmp-detail-side-title {
font-family: var(--font-serif);
font-size: var(--fs-xl);
font-weight: 600;
color: var(--ink-900);
line-height: 1.3;
letter-spacing: -0.005em;
}
.cmp-detail-side-body {
font-size: var(--fs-sm);
line-height: 1.55;
color: var(--ink-700);
text-wrap: pretty;
}
.cmp-detail-target {
margin-bottom: var(--sp-10);
padding-bottom: var(--sp-10);
border-bottom: 1px solid var(--paper-3);
}
.cmp-detail-target:last-of-type { border-bottom: none; padding-bottom: 0; }
.cmp-detail-target-crumb {
font-size: var(--fs-2xs);
color: var(--ink-500);
margin-top: var(--sp-2);
}
.cmp-detail-empty {
padding: var(--sp-20);
background: var(--paper-2);
border: 1px dashed var(--paper-3);
border-radius: var(--radius);
text-align: center;
}
.cmp-detail-empty-h {
font-weight: 600;
color: var(--pink-500);
margin-bottom: var(--sp-4);
font-size: var(--fs-sm);
}
.cmp-detail-empty-sub {
font-size: var(--fs-xs);
color: var(--ink-600);
line-height: 1.4;
}
.cmp-detail-soon {
margin-top: var(--sp-8);
font-size: var(--fs-2xs);
color: var(--ink-500);
font-style: italic;
padding: var(--sp-6) var(--sp-10);
background: var(--paper-2);
border-radius: var(--radius-md);
align-self: flex-start;
}
.cmp-detail-open {
margin-top: var(--sp-6);
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: var(--sp-6);
font-family: inherit;
font-size: var(--fs-xs);
font-weight: 500;
background: var(--navy-900);
color: white;
border: none;
border-radius: var(--radius);
padding: var(--sp-8) var(--sp-14);
cursor: pointer;
transition: background 0.12s;
}
.cmp-detail-open:hover { background: var(--pink-500); }
.cmp-detail-center {
display: flex;
flex-direction: column;
gap: var(--sp-10);
align-items: center;
text-align: center;
padding: var(--sp-8) 0;
}
.cmp-detail-coverage {
display: inline-flex;
align-items: center;
gap: var(--sp-8);
padding: var(--sp-6) var(--sp-14);
border-radius: 999px;
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.02em;
}
.cmp-detail-coverage-full {
background: rgba(74, 146, 100, 0.12);
color: var(--fam-iso);
}
.cmp-detail-coverage-partial {
background: rgba(224, 138, 60, 0.12);
color: var(--fam-iec);
}
.cmp-detail-coverage-gap {
background: color-mix(in srgb, var(--pink-500) 10%, transparent);
color: var(--pink-500);
}
.cmp-detail-note {
font-size: var(--fs-xs);
line-height: 1.55;
color: var(--ink-700);
text-wrap: pretty;
font-style: italic;
max-width: 280px;
}
/* When detail open, leave room above */
.cmp-stage-detail .cmp-stage-body { padding-bottom: 240px; }
/* Scrollbars */
.cmp-col::-webkit-scrollbar { width: 8px; }
.cmp-col::-webkit-scrollbar-thumb { background: var(--paper-3); border-radius: var(--radius-sm); }
.cmp-col::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }
/* Responsive — narrow */
@media (max-width: 1100px) {
.cmp-cols, .cmp-stage-body {
grid-template-columns: 1fr 160px 1fr;
}
.cmp-col { padding: var(--sp-16) var(--sp-16) 60px; }
.cmp-detail-grid {
grid-template-columns: 1fr 200px 1fr;
gap: var(--sp-14);
}
}
/* ============================================================
NIS2 Reader — Phase 1
============================================================ */
:root {
--fam-eu-soft: rgba(45,108,223,0.08);
--fam-eu-line: rgba(45,108,223,0.25);
}
.nis2-mono {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
letter-spacing: 0.01em;
}
.cover.nis2 .cover-fam-dot { background: var(--fam-eu); }
.reader.nis2 { padding: 36px 56px 80px; max-width: 920px; margin: 0 auto; font-family: var(--font-serif); color: var(--ink-900); }
.nis2-context {
font-family: var(--font-serif);
font-size: var(--fs-lg);
line-height: 1.6;
color: var(--ink-700);
max-width: 70ch;
margin: 0 0 var(--sp-24);
}
/* Quickjump on cover */
.nis2-quickjump { margin-top: var(--sp-32); padding-top: var(--sp-24); border-top: 1px solid var(--paper-3); }
.nis2-quickjump-h {
font-family: var(--font-sans);
font-size: var(--fs-2xs);
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
margin-bottom: var(--sp-14);
}
.nis2-quickjump-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--sp-10);
}
.nis2-quickjump-card {
display: flex;
flex-direction: column;
gap: var(--sp-6);
padding: var(--sp-14) var(--sp-16);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
text-align: left;
font-family: var(--font-sans);
cursor: pointer;
transition: all 0.12s;
}
.nis2-quickjump-card:hover { border-color: var(--fam-eu); box-shadow: var(--shadow-1); }
.nis2-quickjump-card.annex {
background: var(--fam-eu-soft);
border-color: var(--fam-eu-line);
}
.nis2-quickjump-id { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--fam-eu); font-weight: 500; }
.nis2-quickjump-t { font-size: var(--fs-sm); color: var(--ink-900); font-weight: 500; line-height: 1.35; }
/* Article block */
.nis2-art { background: white; border: 1px solid var(--paper-3); border-radius: var(--radius); overflow: hidden; }
.nis2-art-head {
padding: var(--sp-20) var(--sp-32) var(--sp-14);
border-bottom: 1px solid var(--paper-3);
background: var(--paper);
display: flex;
flex-direction: column;
gap: var(--sp-6);
}
.nis2-art-id {
display: inline-block;
width: fit-content;
padding: var(--sp-4) var(--sp-8);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-sm);
color: var(--fam-eu);
}
.nis2-art-title {
font-family: var(--font-serif);
font-size: var(--fs-3xl);
font-weight: 600;
color: var(--ink-900);
line-height: 1.25;
margin: 0;
text-wrap: pretty;
}
.nis2-art-lede {
font-family: var(--font-serif);
font-size: var(--fs-lg);
line-height: 1.55;
color: var(--ink-700);
margin: var(--sp-16) var(--sp-32) 0;
max-width: 70ch;
}
.nis2-article-body { padding: var(--sp-20) var(--sp-32) var(--sp-24); }
.nis2-art-intro {
font-family: var(--font-serif);
font-size: var(--fs-lg);
line-height: 1.6;
color: var(--ink-900);
margin: 0 0 var(--sp-16);
max-width: 70ch;
text-wrap: pretty;
}
.nis2-art-item {
display: grid;
grid-template-columns: 32px 1fr;
gap: var(--sp-6);
margin: var(--sp-8) 0;
font-family: var(--font-serif);
font-size: var(--fs-lg);
line-height: 1.55;
color: var(--ink-800);
max-width: 70ch;
}
.nis2-art-letter {
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--fam-eu);
padding-top: var(--sp-4);
}
.nis2-art-text { text-wrap: pretty; }
/* ===== Meldepflicht-Timeline ===== */
.nis2-timeline {
margin: 0 var(--sp-32);
margin-top: -2px;
padding: var(--sp-16) var(--sp-20) var(--sp-24);
background: linear-gradient(180deg, rgba(45,108,223,0.04), rgba(45,108,223,0.02));
border: 1px dashed var(--fam-eu-line);
border-radius: var(--radius);
margin-bottom: var(--sp-4);
}
.nis2-timeline-h {
display: flex;
align-items: baseline;
gap: var(--sp-14);
margin-bottom: var(--sp-16);
font-family: var(--font-sans);
}
.nis2-timeline-label {
font-size: var(--fs-3xs);
letter-spacing: 0.01em;
text-transform: none;
color: var(--fam-eu);
font-weight: 600;
background: white;
padding: var(--sp-4) var(--sp-8);
border-radius: var(--radius-xs);
border: 1px solid var(--fam-eu-line);
}
.nis2-timeline-meta {
font-size: var(--fs-2xs);
color: var(--ink-600);
font-style: italic;
line-height: 1.4;
}
.nis2-timeline-track {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 0 var(--sp-24);
}
.nis2-timeline-line {
position: absolute;
left: 24px;
right: 24px;
top: 7px;
height: 1.5px;
background: var(--ink-300);
z-index: 0;
}
.nis2-timeline-stop {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-family: var(--font-sans);
}
.nis2-timeline-dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--fam-eu);
border: 3px solid var(--paper);
box-shadow: 0 0 0 1px var(--fam-eu);
margin-bottom: var(--sp-10);
}
.nis2-timeline-lab {
font-family: var(--font-mono);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--fam-eu);
margin-bottom: var(--sp-4);
}
.nis2-timeline-cap {
font-size: var(--fs-xs);
font-weight: 600;
color: var(--ink-900);
margin-bottom: var(--sp-2);
}
.nis2-timeline-sub {
font-size: var(--fs-2xs);
color: var(--ink-600);
line-height: 1.35;
max-width: 18ch;
}
/* ===== Sektor-Picker ===== */
.nis2-sectors { padding: 0 var(--sp-32) var(--sp-24); }
.nis2-sectors-h {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-16);
padding: var(--sp-20) 0 var(--sp-16);
flex-wrap: wrap;
}
.nis2-sectors-title {
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--ink-700);
display: flex;
align-items: center;
gap: var(--sp-10);
}
.nis2-sectors-tag {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
letter-spacing: 0.01em;
text-transform: none;
color: var(--fam-eu);
background: var(--fam-eu-soft);
padding: var(--sp-2) var(--sp-8);
border-radius: var(--radius-xs);
}
.nis2-sectors-tabs {
display: inline-flex;
border: 1px solid var(--paper-3);
border-radius: var(--radius-md);
overflow: hidden;
background: white;
}
.nis2-sectors-tab {
font-family: var(--font-sans);
font-size: var(--fs-xs);
padding: var(--sp-8) var(--sp-12);
background: transparent;
border: none;
color: var(--ink-700);
cursor: pointer;
display: flex;
align-items: center;
gap: var(--sp-6);
border-right: 1px solid var(--paper-3);
}
.nis2-sectors-tab:last-child { border-right: none; }
.nis2-sectors-tab:hover { background: var(--paper); }
.nis2-sectors-tab.active {
background: var(--fam-eu);
color: white;
}
.nis2-sectors-tab .count {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
background: rgba(255,255,255,0.2);
padding: 1px var(--sp-4);
border-radius: var(--radius-xs);
}
.nis2-sectors-tab:not(.active) .count {
background: var(--paper-2);
color: var(--ink-500);
}
.nis2-sectors-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--sp-12);
}
.nis2-sector-card {
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
padding: var(--sp-14) var(--sp-16);
cursor: pointer;
transition: all 0.12s;
font-family: var(--font-sans);
}
.nis2-sector-card:hover { border-color: var(--fam-eu); box-shadow: var(--shadow-1); }
.nis2-sector-card.open {
border-color: var(--fam-eu);
box-shadow: var(--shadow-1);
grid-column: 1 / -1;
}
.nis2-sector-card-h {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto auto;
gap: var(--sp-4) var(--sp-12);
align-items: baseline;
}
.nis2-sector-card-id {
grid-column: 1;
grid-row: 1;
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--fam-eu);
background: var(--fam-eu-soft);
padding: var(--sp-2) var(--sp-6);
border-radius: var(--radius-xs);
}
.nis2-sector-card-name {
grid-column: 2;
grid-row: 1;
font-size: var(--fs-md);
font-weight: 600;
color: var(--ink-900);
}
.nis2-sector-card-chev {
grid-column: 3;
grid-row: 1;
color: var(--ink-500);
transition: transform 0.15s;
transform: rotate(90deg);
}
.nis2-sector-card.open .nis2-sector-card-chev { transform: rotate(-90deg); }
.nis2-sector-card-sub {
grid-column: 1 / -1;
grid-row: 2;
font-size: var(--fs-xs);
color: var(--ink-600);
line-height: 1.4;
text-wrap: pretty;
}
.nis2-sector-card-body {
margin-top: var(--sp-14);
padding-top: var(--sp-14);
border-top: 1px dashed var(--paper-3);
font-family: var(--font-serif);
font-size: var(--fs-md);
line-height: 1.55;
color: var(--ink-800);
}
.nis2-sector-card-body ul { list-style: none; padding: 0; margin: 0; }
.nis2-sector-card-body li {
display: grid;
grid-template-columns: 28px 1fr;
gap: var(--sp-4);
margin: var(--sp-6) 0;
text-wrap: pretty;
}
.nis2-sector-card-body li .lt {
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--fam-eu);
}
.nis2-sector-card-foot {
margin-top: var(--sp-14);
display: flex;
justify-content: flex-end;
}
.nis2-sector-jump {
font-family: var(--font-sans);
font-size: var(--fs-2xs);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-md);
padding: var(--sp-4) var(--sp-10);
color: var(--fam-eu);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--sp-4);
}
.nis2-sector-jump:hover { background: var(--fam-eu-soft); border-color: var(--fam-eu-line); }
/* ===== Companion (NIS2 — minimal, sufficient for shared rules) ===== */
.reader.nis2 + .proto-note { max-width: 1180px; margin: var(--sp-32) auto 0; }
.reader-scroll.wide .reader.nis2 { max-width: 1280px; }
.comp-h {
font-family: var(--font-sans);
font-size: var(--fs-2xs);
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
margin-bottom: var(--sp-14);
}
.comp-id-block {
padding: var(--sp-12) var(--sp-14);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-md);
margin-bottom: var(--sp-14);
}
.comp-id {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--fam-eu);
margin-bottom: var(--sp-4);
}
.comp-title {
font-family: var(--font-serif);
font-size: var(--fs-md);
font-weight: 600;
color: var(--ink-900);
line-height: 1.3;
}
.comp-section { margin-top: var(--sp-20); }
.comp-section-h {
font-family: var(--font-sans);
font-size: var(--fs-3xs);
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
margin-bottom: var(--sp-10);
}
.comp-xref-list { display: flex; flex-direction: column; gap: var(--sp-6); }
.comp-xref {
display: flex;
align-items: center;
gap: var(--sp-8);
font-family: var(--font-sans);
font-size: var(--fs-2xs);
color: var(--ink-700);
padding: var(--sp-6) var(--sp-8);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-sm);
}
.comp-xref-tag {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
background: var(--paper-2);
padding: var(--sp-2) var(--sp-4);
border-radius: var(--radius-xs);
color: var(--ink-700);
}
.comp-xref-stub {
margin-left: auto;
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--ink-500);
font-style: italic;
}
.comp-empty {
font-family: var(--font-sans);
font-size: var(--fs-2xs);
color: var(--ink-500);
font-style: italic;
}
.comp-bm {
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding: var(--sp-8) 0;
border-bottom: 1px dashed var(--paper-3);
}
.comp-bm:last-child { border-bottom: none; }
.comp-bm-id {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--fam-eu);
}
.comp-bm-t {
font-family: var(--font-sans);
font-size: var(--fs-xs);
color: var(--ink-800);
}
/* ===== Tweaks panel (NIS2-specific) ===== */
.nis2-tweaks {
position: fixed;
bottom: 18px;
right: 18px;
width: 280px;
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
box-shadow: var(--shadow-2);
padding: var(--sp-14) var(--sp-16);
z-index: 100;
font-family: var(--font-sans);
}
.nis2-tweaks-h {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--fs-2xs);
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
margin-bottom: var(--sp-12);
padding-bottom: var(--sp-10);
border-bottom: 1px solid var(--paper-3);
}
.nis2-tweaks-close {
background: none;
border: none;
font-size: var(--fs-lg);
cursor: pointer;
color: var(--ink-500);
padding: 0 var(--sp-4);
line-height: 1;
}
.nis2-tweaks-row {
display: flex;
flex-direction: column;
gap: var(--sp-6);
margin-bottom: var(--sp-10);
}
.nis2-tweaks-lab {
font-size: var(--fs-xs);
font-weight: 500;
color: var(--ink-800);
}
.nis2-tweaks-seg {
display: inline-flex;
border: 1px solid var(--paper-3);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--paper);
}
.nis2-tweaks-seg button {
flex: 1;
border: none;
background: transparent;
padding: var(--sp-6) var(--sp-10);
font-family: inherit;
font-size: var(--fs-2xs);
cursor: pointer;
color: var(--ink-700);
}
.nis2-tweaks-seg button.active {
background: var(--fam-eu);
color: white;
}
.nis2-tweaks-hint {
font-size: var(--fs-2xs);
color: var(--ink-500);
font-style: italic;
line-height: 1.4;
margin-top: var(--sp-8);
}
/* ============================================================
* IEC 62443-4-2 — Component requirements
* Override pills (EDR/HDR/NDR/SAR), expandable component-specific blocks,
* component-type filter. Reuses .sr / .re / .sl-vector from 62443-3-3.
* ============================================================ */
.iec42-counts {
margin-top: var(--sp-16);
padding: var(--sp-12) var(--sp-14);
background: var(--paper-2);
border-radius: var(--radius-md);
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--ink-600);
display: grid;
gap: var(--sp-4);
letter-spacing: 0.02em;
}
.iec42-counts b {
color: var(--ink-900);
font-weight: 700;
display: inline-block;
min-width: 20px;
}
/* Cover blurb — explains EDR/HDR/NDR/SAR up front */
.iec42-cover-blurb {
font-family: var(--font-serif);
font-size: var(--fs-lg);
line-height: 1.55;
color: var(--ink-700);
max-width: 72ch;
margin: var(--sp-14) 0 0;
}
.iec42-cover-blurb b {
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: 700;
color: var(--fam-iec);
letter-spacing: 0.04em;
padding: 1px var(--sp-4);
background: var(--fam-iec-soft);
border-radius: var(--radius-xs);
margin-right: var(--sp-2);
}
/* SR-cross-reference button on each base CR */
.iec42-cr-titlewrap {
display: flex;
flex-direction: column;
gap: var(--sp-6);
min-width: 0;
}
.iec42-srref {
display: inline-flex;
align-items: center;
gap: var(--sp-4);
align-self: flex-start;
font-family: var(--font-sans);
font-size: var(--fs-2xs);
color: var(--ink-600);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-sm);
padding: var(--sp-4) var(--sp-8);
cursor: pointer;
transition: all .12s ease;
}
.iec42-srref:hover {
border-color: var(--fam-iec);
color: var(--fam-iec);
background: var(--fam-iec-soft);
}
.iec42-srref-id {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 700;
color: var(--fam-iec);
letter-spacing: 0.04em;
}
.iec42-srref:hover .iec42-srref-id { color: var(--fam-iec); }
/* Base CR with no SL vector — "component-specific" placeholder */
.iec42-base-na {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 600;
color: var(--ink-500);
background: repeating-linear-gradient(
135deg,
var(--paper-2) 0 4px,
var(--paper) 4px 8px
);
border: 1px dashed var(--ink-400);
padding: var(--sp-4) var(--sp-10);
border-radius: var(--radius-md);
letter-spacing: 0.03em;
white-space: nowrap;
align-self: start;
}
/* Override bar — container at the bottom of a base CR card */
.iec42-override-bar {
margin-top: var(--sp-16);
border-top: 1px solid var(--paper-3);
padding-top: var(--sp-14);
}
.iec42-override-bar-h {
display: flex;
align-items: baseline;
gap: var(--sp-12);
margin-bottom: var(--sp-10);
}
.iec42-override-bar-h .lab {
font-family: var(--font-sans);
font-size: var(--fs-3xs);
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
}
.iec42-override-hint {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--ink-500);
}
.iec42-override-hint b {
color: var(--ink-900);
font-weight: 600;
}
/* Pill row */
.iec42-override-pills {
display: flex;
flex-wrap: wrap;
gap: var(--sp-8);
}
.iec42-pill {
display: inline-flex;
align-items: center;
gap: var(--sp-8);
padding: var(--sp-8) var(--sp-12) var(--sp-8) var(--sp-8);
background: white;
border: 1px solid var(--fam-iec-line);
border-radius: var(--radius-sm); /* --radius-1 per spec */
cursor: pointer;
font-family: var(--font-sans);
font-size: var(--fs-xs);
color: var(--ink-800);
transition: all .14s ease;
position: relative;
}
.iec42-pill:hover {
border-color: var(--fam-iec);
background: var(--fam-iec-soft);
transform: translateY(-1px);
}
.iec42-pill-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: var(--radius-xs);
background: var(--fam-iec-soft);
color: var(--fam-iec);
}
.iec42-pill-id {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
font-weight: 700;
color: var(--fam-iec);
letter-spacing: 0.04em;
}
.iec42-pill-long {
color: var(--ink-700);
font-size: var(--fs-2xs);
}
.iec42-pill-recount {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 600;
color: var(--ink-600);
background: var(--paper-2);
padding: var(--sp-2) var(--sp-4);
border-radius: var(--radius-xs);
letter-spacing: 0.03em;
}
.iec42-pill.expanded {
background: var(--fam-iec);
border-color: var(--fam-iec);
color: white;
}
.iec42-pill.expanded .iec42-pill-id,
.iec42-pill.expanded .iec42-pill-long {
color: white;
}
.iec42-pill.expanded .iec42-pill-icon {
background: rgba(255,255,255,0.2);
color: white;
}
.iec42-pill.expanded .iec42-pill-recount {
background: rgba(255,255,255,0.18);
color: white;
}
.iec42-pill.auto {
box-shadow: 0 0 0 2px rgba(224,138,60,0.18);
}
/* Stack of expanded override blocks under the pill row */
.iec42-override-stack {
display: flex;
flex-direction: column;
gap: var(--sp-12);
margin-top: var(--sp-14);
}
/* Single expanded override block */
.iec42-override {
border: 1px solid var(--fam-iec-line);
border-left: 3px solid var(--fam-iec);
border-radius: var(--radius-md);
background: white;
overflow: hidden;
}
.iec42-override-head {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--sp-14);
align-items: center;
padding: var(--sp-12) var(--sp-16);
background: linear-gradient(
90deg,
var(--fam-iec-soft) 0%,
rgba(224,138,60,0.02) 100%
);
border-bottom: 1px solid var(--fam-iec-line);
}
.iec42-override-id {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
font-weight: 700;
color: white;
background: var(--fam-iec);
padding: var(--sp-4) var(--sp-8);
border-radius: var(--radius-sm);
letter-spacing: 0.04em;
}
.iec42-override-titlewrap {
display: flex;
flex-direction: column;
gap: var(--sp-2);
min-width: 0;
}
.iec42-override-ct {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
color: var(--fam-iec);
}
.iec42-override-title {
font-family: var(--font-sans);
font-size: var(--fs-lg);
font-weight: 600;
letter-spacing: -0.005em;
color: var(--ink-900);
margin: 0;
}
.iec42-override-body {
padding: var(--sp-16) var(--sp-16) var(--sp-16);
font-family: var(--font-serif);
color: var(--ink-800);
}
/* Re-use .sr-req / .re-list / .re inside the override body */
.iec42-override-body .sr-req {
margin-bottom: var(--sp-14);
max-width: 72ch;
}
.iec42-override-body .sr-req .lab {
color: var(--fam-iec);
}
.iec42-override-body .re-list {
margin-top: var(--sp-14);
border-top-color: var(--fam-iec-line);
padding-top: var(--sp-12);
}
/* Component-type filter row (sticky, sits next to SL pills) */
.iec42-filterbar {
flex-wrap: wrap;
row-gap: var(--sp-10);
}
.iec42-ct-pills {
display: inline-flex;
gap: var(--sp-4);
}
.iec42-ct-pill {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
font-weight: 600;
letter-spacing: 0.04em;
padding: var(--sp-4) var(--sp-12);
background: white;
border: 1px solid var(--paper-3);
color: var(--ink-700);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all .12s ease;
}
.iec42-ct-pill:hover {
border-color: var(--fam-iec);
color: var(--fam-iec);
}
.iec42-ct-pill.active {
background: var(--fam-iec);
color: white;
border-color: var(--fam-iec);
}
/* Empty state */
.iec42-empty {
padding: 36px var(--sp-24);
text-align: center;
background: var(--paper-2);
border-radius: var(--radius);
border: 1px dashed var(--paper-3);
margin-top: var(--sp-16);
}
.iec42-empty-h {
font-family: var(--font-sans);
font-size: var(--fs-md);
font-weight: 600;
color: var(--ink-800);
margin-bottom: var(--sp-6);
}
.iec42-empty-b {
font-family: var(--font-sans);
font-size: var(--fs-xs);
color: var(--ink-500);
}
/* Demo footnote */
.iec42-demo-foot {
margin-top: 36px;
padding: var(--sp-12) var(--sp-14);
background: var(--paper-2);
border-left: 2px solid var(--pink-500);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
font-family: var(--font-sans);
font-size: var(--fs-2xs);
color: var(--ink-600);
line-height: 1.6;
}
.iec42-demo-foot .pink {
color: var(--pink-500);
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
font-size: var(--fs-3xs);
margin-right: var(--sp-6);
}
/* ============================================================
ISO 27001 + 27002 Reader (Phase 1)
Spec: specs/iso-27001.md · prefix: .iso-*
============================================================ */
:root {
/* 5 attribute-axis colors — moderate saturation, readability > knall */
--iso-axis-controlType: #4a5568;
--iso-axis-infoSecProps: #4a9264;
--iso-axis-cybersecConcepts:#c98314;
--iso-axis-opCapabilities: #7c5cc4;
--iso-axis-secDomains: #d6438a;
/* family tints (organizational/people/physical/technological) */
--iso-fam-A5: #4a9264;
--iso-fam-A6: #c98314;
--iso-fam-A7: #7c5cc4;
--iso-fam-A8: #2d6cdf;
}
.iso-mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; }
/* ----- Sidebar additions ----- */
.iso-sb-modes {
display: flex;
gap: var(--sp-4);
padding: var(--sp-8) var(--sp-14) var(--sp-12);
background: var(--paper);
border-bottom: 1px solid var(--paper-3);
}
.iso-sb-mode {
flex: 1;
padding: var(--sp-8) var(--sp-10);
font: 600 11px/1 var(--font-sans);
letter-spacing: 0.01em;
text-transform: none;
background: transparent;
border: 1px solid var(--paper-3);
color: var(--ink-600);
border-radius: var(--radius-md);
cursor: pointer;
transition: all .12s;
}
.iso-sb-mode:hover { color: var(--ink-900); border-color: var(--ink-400); }
.iso-sb-mode.active {
background: var(--ink-900);
color: white;
border-color: var(--ink-900);
}
.iso-sb-group { padding: var(--sp-8) 0 var(--sp-4); }
.iso-sb-group-h {
display: flex;
align-items: center;
gap: var(--sp-8);
padding: var(--sp-6) var(--sp-14);
font: 600 10.5px/1.2 var(--font-sans);
text-transform: none;
letter-spacing: 0.01em;
color: var(--ink-600);
}
.iso-sb-group-count {
margin-left: auto;
font: 500 10px/1 var(--font-mono);
color: var(--ink-500);
}
.iso-sb-fam-dot {
width: 8px;
height: 8px;
border-radius: var(--radius-xs);
display: inline-block;
}
.iso-sb-fam-dot.iso-fam-A5 { background: var(--iso-fam-A5); }
.iso-sb-fam-dot.iso-fam-A6 { background: var(--iso-fam-A6); }
.iso-sb-fam-dot.iso-fam-A7 { background: var(--iso-fam-A7); }
.iso-sb-fam-dot.iso-fam-A8 { background: var(--iso-fam-A8); }
.iso-sb-empty {
padding: var(--sp-4) var(--sp-16) var(--sp-6);
font: italic 11.5px/1.4 var(--font-sans);
color: var(--ink-400);
}
.iso-sb-stub {
margin: var(--sp-12) var(--sp-14) var(--sp-8);
padding: var(--sp-8) var(--sp-10);
font: italic 11px/1.4 var(--font-sans);
color: var(--ink-500);
background: var(--paper-2);
border-left: 2px solid var(--ink-300);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
/* ----- Reader cover variant ----- */
.cover.iso .cover-fam-dot { background: var(--fam-iso); }
.iso-context {
font: 14px/1.6 var(--font-serif);
color: var(--ink-700);
max-width: 720px;
margin: 0 0 var(--sp-24);
}
/* ----- Filter bar ----- */
.iso-filterbar {
border: 1px solid var(--paper-3);
background: white;
border-radius: var(--radius);
padding: var(--sp-12) var(--sp-14);
margin: 0 0 var(--sp-24);
}
.iso-filterbar-row {
display: flex;
align-items: center;
gap: var(--sp-10);
flex-wrap: wrap;
padding: var(--sp-4) 0;
}
.iso-filterbar-row + .iso-filterbar-row {
border-top: 1px dashed var(--paper-3);
margin-top: var(--sp-4);
padding-top: var(--sp-10);
}
.iso-filterbar-lab {
font: 600 10.5px/1 var(--font-sans);
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
min-width: 70px;
}
.iso-filterbar-pills { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.iso-filter-pill {
display: inline-flex;
align-items: center;
gap: var(--sp-6);
padding: var(--sp-4) var(--sp-10);
font: 500 12px/1 var(--font-sans);
background: var(--paper);
border: 1px solid var(--paper-3);
color: var(--ink-700);
border-radius: 999px;
cursor: pointer;
transition: all .12s;
}
.iso-filter-pill:hover { border-color: var(--ink-400); color: var(--ink-900); }
.iso-filter-pill.iso-filter-fam .iso-mono {
font-size: var(--fs-3xs);
color: var(--ink-500);
}
.iso-filter-pill.iso-filter-fam.active {
background: var(--ink-900);
color: white;
border-color: var(--ink-900);
}
.iso-filter-pill.iso-filter-fam.active .iso-mono { color: var(--pink-300); }
.iso-filter-pill.iso-filter-csf.active {
background: rgba(201,131,20,0.10);
border-color: var(--iso-axis-cybersecConcepts);
color: var(--iso-axis-cybersecConcepts);
font-weight: 600;
}
.iso-filter-clear {
margin-left: var(--sp-6);
padding: var(--sp-4) var(--sp-10);
font: 500 11px/1 var(--font-sans);
background: transparent;
border: 1px solid transparent;
color: var(--ink-500);
border-radius: var(--radius-sm);
cursor: pointer;
}
.iso-filter-clear:hover { color: var(--pink-500); }
.iso-filterbar-count {
margin-left: auto;
font: 500 11px/1 var(--font-mono);
color: var(--ink-500);
}
/* ----- Article / control body ----- */
.iso-art {
max-width: 760px;
margin: 0 auto;
padding: var(--sp-12) 0 36px;
}
.iso-art-head {
display: flex;
align-items: center;
gap: var(--sp-10);
flex-wrap: wrap;
margin: 0 0 var(--sp-14);
}
.iso-art-tag {
display: inline-flex;
align-items: center;
gap: var(--sp-4);
padding: var(--sp-4) var(--sp-8);
font: 600 10.5px/1 var(--font-sans);
letter-spacing: 0.01em;
text-transform: none;
border-radius: var(--radius-sm);
}
.iso-art-tag.iso-tag-isms {
background: rgba(74,146,100,0.10);
color: var(--fam-iso);
}
.iso-fam-tag.iso-fam-A5 { background: rgba(74,146,100,0.12); color: var(--iso-fam-A5); }
.iso-fam-tag.iso-fam-A6 { background: rgba(201,131,20,0.12); color: var(--iso-fam-A6); }
.iso-fam-tag.iso-fam-A7 { background: rgba(124,92,196,0.14); color: var(--iso-fam-A7); }
.iso-fam-tag.iso-fam-A8 { background: rgba(45,108,223,0.10); color: var(--iso-fam-A8); }
.iso-art-id {
font-size: var(--fs-sm);
font-weight: 500;
color: var(--ink-700);
}
.iso-art-title {
font: 600 26px/1.25 var(--font-serif);
color: var(--ink-900);
margin: 0;
flex-basis: 100%;
letter-spacing: -0.01em;
}
.iso-art-body p {
font: 16px/1.7 var(--font-serif);
color: var(--ink-800);
margin: 0 0 var(--sp-14);
}
/* ----- Attribute pills (Killer-Feature) ----- */
.iso-pills {
display: flex;
flex-direction: column;
gap: var(--sp-6);
margin: 0 0 var(--sp-20);
padding: var(--sp-14) var(--sp-16);
background: linear-gradient(180deg, white, var(--paper));
border: 1px solid var(--paper-3);
border-radius: var(--radius);
}
.iso-pill-axis {
display: grid;
grid-template-columns: 160px 1fr;
gap: var(--sp-12);
align-items: baseline;
}
.iso-pill-axis-lab {
font: 600 10.5px/1.4 var(--font-sans);
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
position: relative;
padding-left: var(--sp-12);
}
.iso-pill-axis-lab::before {
content: '';
position: absolute;
left: 0; top: 4px;
width: 4px; height: 4px;
border-radius: 50%;
}
.iso-pill-axis.iso-axis-controlType .iso-pill-axis-lab { color: var(--iso-axis-controlType); }
.iso-pill-axis.iso-axis-controlType .iso-pill-axis-lab::before { background: var(--iso-axis-controlType); }
.iso-pill-axis.iso-axis-infoSecProps .iso-pill-axis-lab { color: var(--iso-axis-infoSecProps); }
.iso-pill-axis.iso-axis-infoSecProps .iso-pill-axis-lab::before { background: var(--iso-axis-infoSecProps); }
.iso-pill-axis.iso-axis-cybersecConcepts .iso-pill-axis-lab { color: var(--iso-axis-cybersecConcepts); }
.iso-pill-axis.iso-axis-cybersecConcepts .iso-pill-axis-lab::before { background: var(--iso-axis-cybersecConcepts); }
.iso-pill-axis.iso-axis-opCapabilities .iso-pill-axis-lab { color: var(--iso-axis-opCapabilities); }
.iso-pill-axis.iso-axis-opCapabilities .iso-pill-axis-lab::before { background: var(--iso-axis-opCapabilities); }
.iso-pill-axis.iso-axis-secDomains .iso-pill-axis-lab { color: var(--iso-axis-secDomains); }
.iso-pill-axis.iso-axis-secDomains .iso-pill-axis-lab::before { background: var(--iso-axis-secDomains); }
.iso-pill-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.iso-pill {
display: inline-block;
padding: var(--sp-4) var(--sp-8);
font: 500 11.5px/1.3 var(--font-sans);
border-radius: var(--radius-lg);
border: 1px solid currentColor;
background: white;
color: inherit;
white-space: nowrap;
}
.iso-axis-controlType .iso-pill { color: var(--iso-axis-controlType); background: rgba(74,85,104,0.06); }
.iso-axis-infoSecProps .iso-pill { color: var(--iso-axis-infoSecProps); background: rgba(74,146,100,0.08); }
.iso-axis-cybersecConcepts .iso-pill { color: var(--iso-axis-cybersecConcepts); background: rgba(201,131,20,0.08); }
.iso-axis-opCapabilities .iso-pill { color: var(--iso-axis-opCapabilities); background: rgba(124,92,196,0.08); }
.iso-axis-secDomains .iso-pill { color: var(--iso-axis-secDomains); background: rgba(214,67,138,0.08); }
/* ----- Dual body (27001 / 27002) ----- */
.iso-dualbody {
display: flex;
flex-direction: column;
gap: 0;
}
.iso-dualbody-section {
padding: var(--sp-16) 0;
border-top: 1px solid var(--paper-3);
}
.iso-dualbody-section:first-child { border-top: 0; padding-top: 0; }
.iso-dualbody-cap {
display: flex;
align-items: center;
gap: var(--sp-8);
margin: 0 0 var(--sp-10);
width: 100%;
background: transparent;
border: 0;
padding: 0;
font-family: inherit;
text-align: left;
}
.iso-dualbody-cap-btn { cursor: pointer; }
.iso-dualbody-cap-btn:hover .iso-dualbody-cap-tag { background: var(--paper-3); }
.iso-dualbody-cap-tag {
display: inline-flex;
align-items: center;
padding: var(--sp-4) var(--sp-8);
font: 600 10.5px/1 var(--font-sans);
letter-spacing: 0.01em;
text-transform: none;
background: var(--paper-2);
color: var(--ink-700);
border-radius: var(--radius-sm);
transition: background .12s;
}
.iso-dualbody-cap-tag.iso-cap-27002 {
background: rgba(74,146,100,0.10);
color: var(--fam-iso);
}
.iso-dualbody-cap-modal {
font: italic 600 12px/1 var(--font-serif);
color: var(--ink-500);
}
.iso-dualbody-text {
font: 16px/1.7 var(--font-serif);
color: var(--ink-800);
margin: 0 0 var(--sp-8);
}
.iso-guide-chev {
margin-left: auto;
color: var(--ink-500);
display: inline-flex;
}
.iso-guide-tease {
flex-basis: 100%;
margin-top: var(--sp-4);
font: italic 13px/1.5 var(--font-serif);
color: var(--ink-500);
}
.iso-guide-body { padding: var(--sp-4) 0 0; }
.iso-guide-req {
color: var(--ink-700);
font-style: italic;
}
.iso-guide-divider {
position: relative;
text-align: center;
margin: var(--sp-14) 0 var(--sp-12);
height: 1px;
background: var(--paper-3);
}
.iso-guide-divider span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--reader-bg);
padding: 0 var(--sp-12);
font: 600 10.5px/1 var(--font-sans);
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
}
/* ----- Cover-grid landings ----- */
.iso-grid-h {
font: 600 11px/1 var(--font-sans);
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
margin: var(--sp-4) 0 var(--sp-12);
}
.iso-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--sp-10);
margin: 0 0 var(--sp-32);
}
.iso-grid-card {
padding: var(--sp-12) var(--sp-14);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
text-align: left;
cursor: pointer;
transition: all .14s;
display: flex;
flex-direction: column;
gap: var(--sp-8);
}
.iso-grid-card:hover {
border-color: var(--ink-700);
transform: translateY(-1px);
box-shadow: var(--shadow-1);
}
.iso-grid-card-head {
display: flex;
align-items: center;
gap: var(--sp-6);
}
.iso-grid-card-id {
margin-left: auto;
font: 500 11.5px/1 var(--font-mono);
color: var(--ink-600);
}
.iso-grid-card-title {
font: 600 14px/1.35 var(--font-serif);
color: var(--ink-900);
}
.iso-grid-card-csf {
display: flex;
gap: var(--sp-4);
flex-wrap: wrap;
margin-top: auto;
}
.iso-csf-chip {
display: inline-block;
padding: var(--sp-2) var(--sp-8);
font: 600 10px/1.2 var(--font-sans);
letter-spacing: 0.01em;
text-transform: none;
border-radius: var(--radius-xs);
background: rgba(201,131,20,0.10);
color: var(--iso-axis-cybersecConcepts);
}
.iso-csf-chip.iso-csf-identify { background: rgba(74,85,104,0.10); color: #4a5568; }
.iso-csf-chip.iso-csf-protect { background: rgba(45,108,223,0.10); color: var(--fam-eu); }
.iso-csf-chip.iso-csf-detect { background: rgba(201,131,20,0.10); color: var(--iso-axis-cybersecConcepts); }
.iso-csf-chip.iso-csf-respond { background: rgba(214,67,138,0.10); color: var(--iso-axis-secDomains); }
.iso-csf-chip.iso-csf-recover { background: rgba(74,146,100,0.10); color: var(--fam-iso); }
/* ----- Framework (clauses) cards ----- */
.iso-clauses {
display: flex;
flex-direction: column;
gap: var(--sp-8);
}
.iso-clause-card {
display: grid;
grid-template-columns: 56px 1fr;
gap: var(--sp-14);
padding: var(--sp-14) var(--sp-16);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
}
.iso-clause-num {
font: 600 28px/1 var(--font-mono);
color: var(--fam-iso);
align-self: start;
}
.iso-clause-title {
font: 600 15px/1.3 var(--font-serif);
color: var(--ink-900);
margin-bottom: var(--sp-8);
}
.iso-clause-stub {
font: italic 12px/1.4 var(--font-sans);
color: var(--ink-400);
}
.iso-clause-list {
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.iso-clause-item {
display: flex;
align-items: baseline;
gap: var(--sp-10);
padding: var(--sp-6) var(--sp-8);
background: transparent;
border: 0;
text-align: left;
cursor: pointer;
border-radius: var(--radius-sm);
font: 13px/1.4 var(--font-serif);
color: var(--ink-800);
transition: background .12s;
}
.iso-clause-item:hover { background: var(--paper); }
.iso-clause-item .iso-mono {
font-size: var(--fs-2xs);
color: var(--ink-600);
min-width: 38px;
}
/* ----- Companion attributes ----- */
.iso-comp-attrs { display: flex; flex-direction: column; gap: var(--sp-10); }
.iso-comp-axis {
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.iso-comp-axis-lab {
display: flex;
align-items: center;
gap: var(--sp-6);
font: 600 10px/1 var(--font-sans);
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-600);
}
.iso-comp-axis-dot {
width: 6px;
height: 6px;
border-radius: 50%;
display: inline-block;
}
.iso-comp-axis-dot.iso-axis-controlType { background: var(--iso-axis-controlType); }
.iso-comp-axis-dot.iso-axis-infoSecProps { background: var(--iso-axis-infoSecProps); }
.iso-comp-axis-dot.iso-axis-cybersecConcepts { background: var(--iso-axis-cybersecConcepts); }
.iso-comp-axis-dot.iso-axis-opCapabilities { background: var(--iso-axis-opCapabilities); }
.iso-comp-axis-dot.iso-axis-secDomains { background: var(--iso-axis-secDomains); }
.iso-comp-axis-vals { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.iso-comp-attr-chip {
display: inline-block;
padding: var(--sp-2) var(--sp-8);
font: 500 11px/1.3 var(--font-sans);
background: var(--paper);
color: var(--ink-700);
border-radius: var(--radius);
border: 1px solid var(--paper-3);
}
/* ----- App-level accent override ----- */
.iso-app .reader-sticky-bar .rsb-anchor-id { color: var(--fam-iso); }
.iso-app .topbar-tag { font-family: var(--font-mono); font-size: var(--fs-3xs); }
@media (max-width: 1024px) {
.iso-pill-axis { grid-template-columns: 1fr; gap: var(--sp-4); }
.iso-grid { grid-template-columns: 1fr; }
}
/* ============================================================
Bookmarks-Übersicht (Cross-Standard) — .bm-* prefix
============================================================ */
.bm-shell {
min-height: 100vh;
background: var(--paper);
color: var(--ink-900);
}
.bm-app {
margin-left: var(--rail-w);
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* ---------- Header ---------- */
.bm-header {
padding: var(--sp-32) 40px var(--sp-20);
border-bottom: 1px solid var(--paper-3);
background: var(--paper);
}
.bm-crumb {
font-weight: 400;
font-size: var(--fs-xs);
font-family: var(--font-mono);
color: var(--ink-500);
display: flex;
align-items: center;
gap: var(--sp-6);
margin-bottom: var(--sp-8);
}
.bm-crumb-link { cursor: pointer; }
.bm-crumb-link:hover { color: var(--ink-900); }
.bm-crumb-flag {
margin-left: var(--sp-10);
background: color-mix(in srgb, var(--pink-500) 10%, transparent);
color: var(--pink-500);
padding: var(--sp-2) var(--sp-8);
border-radius: var(--radius-xs);
font-size: var(--fs-3xs);
letter-spacing: 0.05em;
font-weight: 600;
}
.bm-header-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--sp-24);
}
.bm-h1 {
font-family: var(--font-serif);
font-size: var(--fs-4xl);
font-weight: 600;
letter-spacing: -0.015em;
margin: 0 0 var(--sp-4);
display: flex;
align-items: baseline;
gap: var(--sp-12);
}
.bm-h1-count {
font-family: var(--font-mono);
font-size: var(--fs-md);
font-weight: 500;
color: var(--ink-500);
letter-spacing: 0;
}
.bm-h-sub {
font-size: var(--fs-sm);
color: var(--ink-500);
max-width: 640px;
line-height: 1.5;
}
.bm-clear-filters {
display: inline-flex;
align-items: center;
gap: var(--sp-6);
background: white;
border: 1px solid var(--paper-3);
color: var(--ink-700);
font-family: var(--font-mono);
font-size: var(--fs-2xs);
padding: var(--sp-6) var(--sp-10);
border-radius: var(--radius-md);
cursor: pointer;
transition: all .12s;
}
.bm-clear-filters:hover {
border-color: var(--pink-300);
color: var(--pink-500);
}
/* ---------- Body 2-column layout ---------- */
.bm-body {
flex: 1;
display: grid;
grid-template-columns: var(--facets-w) 1fr;
min-height: 0;
}
/* ---------- Filter sidebar ---------- */
.bm-facets {
background: var(--paper);
position: sticky;
align-self: flex-start;
top: 0;
max-height: 100vh;
overflow-y: auto;
}
.bm-facet-block {
margin-bottom: var(--sp-20);
}
.bm-facet-h {
font-size: var(--fs-3xs);
text-transform: none;
letter-spacing: 0.01em;
color: var(--ink-500);
font-weight: 700;
margin-bottom: var(--sp-6);
padding: 0 var(--sp-8);
}
.bm-facet-row {
display: flex;
align-items: center;
gap: var(--sp-8);
width: 100%;
background: transparent;
border: none;
padding: var(--sp-8) var(--sp-8);
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: var(--fs-xs);
color: var(--ink-700);
cursor: pointer;
text-align: left;
transition: background .1s, color .1s;
}
.bm-facet-row:hover { background: white; }
.bm-facet-row.active {
background: white;
color: var(--ink-900);
box-shadow: inset 2px 0 0 var(--pink-500);
}
.bm-facet-row.active .bm-facet-count { color: var(--pink-500); font-weight: 700; }
.bm-facet-label { flex: 1; }
.bm-facet-label.bm-mono { font-family: var(--font-mono); font-size: var(--fs-2xs); }
.bm-facet-tag {
flex: 1;
font-size: var(--fs-2xs);
color: var(--ink-700);
}
.bm-facet-count {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--ink-500);
font-weight: 500;
}
.bm-facet-empty {
font-size: var(--fs-2xs);
color: var(--ink-500);
font-style: italic;
padding: var(--sp-4) var(--sp-8);
}
.bm-radio {
width: 12px;
height: 12px;
border-radius: 50%;
border: 1.5px solid var(--ink-400);
flex-shrink: 0;
position: relative;
transition: all .12s;
}
.bm-radio.on {
border-color: var(--pink-500);
}
.bm-radio.on::after {
content: '';
position: absolute;
inset: 2px;
background: var(--pink-500);
border-radius: 50%;
}
.bm-sort-row.active { box-shadow: none; background: white; }
.bm-sort-row.active .bm-facet-label { color: var(--ink-900); font-weight: 500; }
.bm-fam-dot {
width: 8px;
height: 8px;
border-radius: var(--radius-xs);
flex-shrink: 0;
}
.bm-fam-dot.lg {
width: 10px;
height: 10px;
border-radius: var(--radius-xs);
}
.bm-mono { font-family: var(--font-mono); }
/* ---------- Stream ---------- */
.bm-stream {
padding: var(--sp-24) var(--sp-32) 96px;
min-width: 0;
}
.bm-stream-meta {
font-size: var(--fs-2xs);
font-family: var(--font-mono);
color: var(--ink-500);
margin-bottom: var(--sp-14);
text-transform: none;
letter-spacing: 0.01em;
}
.bm-stream-meta-num {
color: var(--ink-900);
font-weight: 600;
}
.bm-cards {
display: flex;
flex-direction: column;
gap: var(--sp-10);
}
.bm-group {
margin-bottom: var(--sp-24);
}
.bm-group-head {
display: flex;
align-items: baseline;
gap: var(--sp-10);
padding: var(--sp-8) var(--sp-4) var(--sp-12);
margin-bottom: var(--sp-6);
border-bottom: 1px solid var(--paper-3);
}
.bm-group-label {
font-size: var(--fs-sm);
font-weight: 700;
letter-spacing: 0.02em;
}
.bm-group-tag {
font-size: var(--fs-sm);
color: var(--ink-900);
font-weight: 600;
}
.bm-group-count {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-500);
margin-left: auto;
}
/* ---------- Bridge banner ---------- */
.bm-bridge {
background: linear-gradient(135deg, color-mix(in srgb, var(--pink-500) 4%, transparent), rgba(45,108,223,0.04));
border: 1px solid color-mix(in srgb, var(--pink-500) 15%, transparent);
border-radius: var(--radius);
padding: var(--sp-14) var(--sp-16);
margin-bottom: var(--sp-16);
}
.bm-bridge-h {
font-size: var(--fs-2xs);
font-weight: 600;
text-transform: none;
letter-spacing: 0.01em;
color: var(--pink-500);
display: flex;
align-items: center;
gap: var(--sp-6);
margin-bottom: var(--sp-10);
}
.bm-bridge-sub {
text-transform: none;
letter-spacing: 0;
color: var(--ink-500);
font-weight: 400;
margin-left: var(--sp-4);
}
.bm-bridge-row { display: flex; gap: var(--sp-8); flex-wrap: wrap; }
.bm-bridge-tag {
background: white;
border: 1px solid var(--paper-3);
padding: var(--sp-6) var(--sp-10);
border-radius: 18px;
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-800);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--sp-8);
transition: all .12s;
}
.bm-bridge-tag:hover {
border-color: var(--pink-300);
transform: translateY(-1px);
box-shadow: 0 2px 8px color-mix(in srgb, var(--pink-500) 10%, transparent);
}
.bm-bridge-fams {
display: inline-flex;
gap: var(--sp-2);
padding-left: var(--sp-6);
border-left: 1px solid var(--paper-3);
}
.bm-bridge-count {
font-size: var(--fs-3xs);
background: var(--paper-2);
color: var(--ink-600);
padding: 1px var(--sp-6);
border-radius: var(--radius-xs);
letter-spacing: 0.02em;
}
/* ---------- Bookmark Card ---------- */
.bm-card {
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-lg);
display: flex;
cursor: pointer;
overflow: hidden;
transition: border-color .12s, transform .12s, box-shadow .12s;
box-shadow: var(--shadow-1);}
.bm-card:hover {
border-color: var(--ink-300);
transform: translateY(-1px);
box-shadow: 0 4px 14px color-mix(in srgb, var(--navy-900) 6%, transparent);
}
.bm-card.bm-card-soon { cursor: default; }
.bm-card.bm-card-soon:hover {
border-color: var(--paper-3);
transform: none;
box-shadow: none;
}
.bm-card-rail {
width: 3px;
flex-shrink: 0;
}
.bm-card-body {
flex: 1;
padding: var(--sp-14) var(--sp-16) var(--sp-12);
display: flex;
flex-direction: column;
gap: var(--sp-6);
min-width: 0;
}
.bm-card-meta {
display: flex;
align-items: center;
gap: var(--sp-8);
font-size: var(--fs-2xs);
color: var(--ink-500);
}
.bm-card-std {
font-family: var(--font-mono);
font-weight: 600;
font-size: var(--fs-2xs);
display: inline-flex;
align-items: center;
gap: var(--sp-4);
}
.bm-card-sep { color: var(--ink-400); }
.bm-card-crumb {
color: var(--ink-500);
font-size: var(--fs-2xs);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bm-card-spacer { flex: 1; }
.bm-card-anchor {
font-size: var(--fs-3xs);
color: var(--ink-700);
font-weight: 600;
background: var(--paper-2);
padding: var(--sp-2) var(--sp-8);
border-radius: var(--radius-xs);
letter-spacing: 0.02em;
}
.bm-card-title {
font-family: var(--font-serif);
font-size: var(--fs-lg);
font-weight: 600;
line-height: 1.3;
color: var(--ink-900);
letter-spacing: -0.005em;
margin: 0;
}
.bm-card-excerpt {
font-size: var(--fs-sm);
line-height: 1.55;
color: var(--ink-700);
font-family: var(--font-serif);
margin: 0;
/* Clamp at ~3 lines */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bm-card-note {
font-style: italic;
font-size: var(--fs-sm);
color: var(--ink-600);
font-family: var(--font-serif);
line-height: 1.5;
border-left: 2px solid var(--pink-300);
padding: var(--sp-2) 0 var(--sp-2) var(--sp-10);
margin-top: var(--sp-2);
}
.bm-card-note-q {
color: var(--pink-500);
font-style: normal;
font-weight: 600;
}
.bm-card-foot {
display: flex;
align-items: center;
gap: var(--sp-8);
margin-top: var(--sp-6);
font-size: var(--fs-2xs);
flex-wrap: wrap;
}
.bm-card-tag {
background: transparent;
border: none;
padding: 0;
font-size: var(--fs-3xs);
color: var(--ink-500);
cursor: pointer;
font-family: var(--font-mono);
}
.bm-card-tag:hover {
color: var(--pink-500);
box-shadow: inset 0 -1px 0 var(--pink-300);
}
.bm-card-date {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--ink-500);
letter-spacing: 0.02em;
}
.bm-card-soon-pill {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 600;
background: var(--paper-2);
color: var(--ink-500);
padding: var(--sp-2) var(--sp-6);
border-radius: var(--radius-xs);
letter-spacing: 0.01em;
text-transform: none;
}
.bm-card-del {
background: transparent;
border: none;
color: var(--ink-400);
cursor: pointer;
width: 22px;
height: 22px;
border-radius: var(--radius-sm);
display: grid;
place-items: center;
transition: all .12s;
}
.bm-card-del:hover {
background: rgba(208,74,74,0.10);
color: #d04a4a;
}
/* ---------- Empty state ---------- */
.bm-empty {
max-width: 480px;
margin: 80px auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-14);
}
.bm-loading {
max-width: 560px;
margin: 80px auto;
text-align: center;
color: var(--ink-500);
font-size: var(--fs-md);
font-family: var(--font-sans);
}
.bm-loading.bm-error {
color: var(--pink-500);
}
.bm-empty-icon {
width: 96px;
height: 96px;
border-radius: 50%;
background: var(--paper-2);
color: var(--ink-300);
display: grid;
place-items: center;
margin-bottom: var(--sp-4);
}
.bm-empty-icon-filter {
background: color-mix(in srgb, var(--pink-500) 6%, transparent);
color: var(--pink-300);
}
.bm-empty-h {
font-family: var(--font-serif);
font-size: var(--fs-2xl);
font-weight: 600;
color: var(--ink-900);
letter-spacing: -0.01em;
}
.bm-empty-sub {
font-size: var(--fs-sm);
color: var(--ink-600);
line-height: 1.55;
max-width: 420px;
}
.bm-btn {
margin-top: var(--sp-6);
display: inline-flex;
align-items: center;
gap: var(--sp-6);
background: var(--navy-900);
color: white;
border: 1px solid var(--navy-900);
padding: var(--sp-8) var(--sp-16);
border-radius: var(--radius);
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: 500;
cursor: pointer;
transition: background .12s;
}
.bm-btn:hover { background: var(--navy-800); }
/* Scrollbars */
.bm-facets::-webkit-scrollbar,
.bm-stream::-webkit-scrollbar { width: 8px; }
.bm-facets::-webkit-scrollbar-thumb,
.bm-stream::-webkit-scrollbar-thumb {
background: var(--ink-300);
border-radius: var(--radius-sm);
}
.bm-facets::-webkit-scrollbar-thumb:hover,
.bm-stream::-webkit-scrollbar-thumb:hover {
background: var(--ink-500);
}
/* Responsive */
@media (max-width: 980px) {
.bm-body { grid-template-columns: 200px 1fr; }
.bm-stream { padding: var(--sp-24) var(--sp-20) 80px; }
.bm-header { padding: var(--sp-20) var(--sp-20) var(--sp-16); }
}
/* Reuse the .rail fixed position from cs-shell rule */
.bm-shell .rail {
position: fixed;
top: 0;
left: 0;
width: var(--rail-w);
height: 100vh;
z-index: 10;
}
/* ============================================================
Projekte — .proj-* prefix
============================================================ */
.proj-shell {
min-height: 100vh;
background: var(--paper);
color: var(--ink-900);
font-family: var(--font-sans);
}
.proj-a {
margin-left: var(--rail-w);
min-height: 100vh;
padding: var(--sp-32) 40px 80px;
max-width: 1280px;
}
.proj-crumb {
font-weight: 400;
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--ink-500);
text-transform: none;
letter-spacing: 0;
margin-bottom: var(--sp-8);
}
.proj-crumb span:hover { color: var(--pink-500); }
.proj-a-h1 {
font-family: var(--font-serif);
font-size: var(--fs-4xl);
font-weight: 600;
letter-spacing: -0.015em;
color: var(--ink-900);
margin: 0 0 var(--sp-4);
}
.proj-a-sub {
font-size: var(--fs-sm);
color: var(--ink-500);
font-family: var(--font-sans);
line-height: 1.5;}
.proj-a-top {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--sp-20);
margin-bottom: var(--sp-32);
}
.proj-a-top-actions {
display: flex;
gap: var(--sp-10);
align-items: center;
}
/* ---- Buttons ---- */
.proj-btn-primary, .proj-btn-ghost, .proj-back-btn {
display: inline-flex;
align-items: center;
gap: var(--sp-8);
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: 500;
padding: var(--sp-8) var(--sp-14);
border-radius: var(--radius);
cursor: pointer;
border: 1px solid transparent;
transition: all 0.12s;
white-space: nowrap;
}
.proj-btn-primary {
background: var(--navy-900);
color: white;
padding: var(--sp-8) var(--sp-16);
border: 1px solid var(--navy-900);
border-radius: var(--radius);
font-size: var(--fs-sm);
font-weight: 500;}
.proj-btn-primary:hover { background: var(--navy-800); }
.proj-btn-primary.disabled, .proj-btn-primary:disabled {
background: var(--paper-3);
color: var(--ink-500);
cursor: not-allowed;
}
.proj-btn-ghost {
background: white;
color: var(--ink-700);
border-color: var(--paper-3);
border: 1px solid var(--paper-3);
border-radius: var(--radius);
padding: var(--sp-8) var(--sp-14);
font-size: var(--fs-sm);
font-weight: 500;}
.proj-btn-ghost:hover { border-color: var(--ink-400); color: var(--ink-900); }
.proj-back-btn {
background: transparent;
color: var(--ink-600);
padding: var(--sp-6) 0 var(--sp-12);
font-size: var(--fs-xs);
}
.proj-back-btn:hover { color: var(--pink-500); }
/* ---- Search input ---- */
.proj-search {
display: flex;
align-items: center;
gap: var(--sp-8);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
padding: var(--sp-8) var(--sp-12);
min-width: 280px;
color: var(--ink-500);
}
.proj-search:focus-within { border-color: var(--ink-400); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy-900) 6%, transparent); }
.proj-search input {
border: none; outline: none; background: transparent;
flex: 1; font-size: var(--fs-sm); font-family: inherit; color: var(--ink-900);
}
.proj-search input::placeholder { color: var(--ink-500); }
/* ---- Family helpers (used by pill + classification rows) ---- */
.proj-fam-eu { --pf: var(--fam-eu); }
.proj-fam-iec { --pf: var(--fam-iec); }
.proj-fam-iso { --pf: var(--fam-iso); }
.proj-fam-en { --pf: var(--fam-en); }
.proj-fam-de { --pf: var(--fam-de); }
/* ---- Standard pill ---- */
.proj-pill {
display: inline-flex;
align-items: center;
gap: var(--sp-6);
font-family: var(--font-sans);
font-size: var(--fs-2xs);
font-weight: 500;
background: white;
border: 1px solid var(--paper-3);
border-radius: 999px;
padding: var(--sp-4) var(--sp-10) var(--sp-4) var(--sp-8);
color: var(--ink-700);
line-height: 1.2;
}
.proj-pill-dot {
display: inline-block;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--pf, var(--ink-500));
flex-shrink: 0;
}
.proj-pill-id {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 600;
color: var(--pf, var(--ink-700));
letter-spacing: 0.02em;
}
.proj-pill-prof {
color: var(--ink-600);
padding-left: var(--sp-6);
border-left: 1px solid var(--paper-3);
margin-left: 1px;
font-size: var(--fs-2xs);
}
.proj-pill-eu { --pf: var(--fam-eu); }
.proj-pill-iec { --pf: var(--fam-iec); }
.proj-pill-iso { --pf: var(--fam-iso); }
.proj-pill-en { --pf: var(--fam-en); }
.proj-pill-de { --pf: var(--fam-de); }
/* ---- Grid + Card ---- */
.proj-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: var(--sp-16);
}
.proj-grid-empty {
grid-column: 1 / -1;
padding: 40px;
text-align: center;
color: var(--ink-500);
font-size: var(--fs-md);
}
.proj-card {
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-lg);
padding: var(--sp-20) var(--sp-20) var(--sp-16);
cursor: pointer;
transition: all 0.15s;
display: flex;
flex-direction: column;
gap: var(--sp-14);
box-shadow: var(--shadow-1);}
.proj-card:hover {
border-color: var(--ink-400);
box-shadow: var(--shadow-2);
transform: translateY(-2px);
}
.proj-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--sp-12);
}
.proj-card-id {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--ink-500);
letter-spacing: 0.04em;
margin-bottom: var(--sp-2);
}
.proj-card-name {
font-family: var(--font-sans);
font-size: var(--fs-2xl);
font-weight: 600;
color: var(--ink-900);
letter-spacing: -0.01em;
margin: 0;
line-height: 1.15;
}
.proj-card-desc {
font-size: var(--fs-xs);
color: var(--ink-600);
line-height: 1.45;
text-wrap: pretty;
}
.proj-card-pills {
display: flex;
flex-wrap: wrap;
gap: var(--sp-6);
}
.proj-card-foot {
display: flex;
align-items: center;
gap: var(--sp-12);
padding-top: var(--sp-12);
border-top: 1px solid var(--paper-2);
font-size: var(--fs-2xs);
color: var(--ink-500);
}
.proj-card-prod {
display: inline-flex;
align-items: center;
gap: var(--sp-4);
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-700);
}
.proj-card-cov {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--pink-500);
font-weight: 600;
}
.proj-card-ago { margin-left: auto; font-style: italic; }
/* ---- Mini Donut ---- */
.proj-mini-donut { flex-shrink: 0; }
.proj-mini-seg-impl { stroke: var(--fam-iso); }
.proj-mini-seg-prog { stroke: #c98314; }
.proj-mini-seg-open { stroke: var(--pink-500); }
.proj-mini-seg-na { stroke: var(--ink-300); }
/* ---- Empty state ---- */
.proj-empty {
display: flex;
flex-direction: column;
align-items: center;
padding: 60px var(--sp-24);
text-align: center;
}
.proj-empty-art { width: 240px; height: 192px; margin-bottom: var(--sp-12); }
.proj-empty-h {
font-family: var(--font-serif);
font-size: var(--fs-3xl);
font-weight: 600;
color: var(--ink-900);
margin: 0 0 var(--sp-10);
letter-spacing: -0.01em;
}
.proj-empty-p {
color: var(--ink-600);
font-size: var(--fs-md);
line-height: 1.6;
max-width: 480px;
margin-bottom: var(--sp-24);
}
/* ============================================================
Projekt-Detail
============================================================ */
.proj-detail { max-width: 1280px; }
.proj-detail-head {
border-bottom: 1px solid var(--paper-3);
padding-bottom: var(--sp-20);
margin-bottom: 0;
}
.proj-detail-back { margin-bottom: var(--sp-4); }
.proj-detail-title-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sp-24);
}
.proj-detail-id {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-500);
letter-spacing: 0.01em;
text-transform: none;
margin-bottom: var(--sp-6);
}
.proj-detail-h1 {
font-family: var(--font-serif);
font-size: 44px;
font-weight: 600;
color: var(--ink-900);
letter-spacing: -0.02em;
margin: 0 0 var(--sp-6);
line-height: 1.05;
}
.proj-detail-desc {
font-size: var(--fs-lg);
color: var(--ink-600);
font-family: var(--font-sans);
max-width: 720px;
}
.proj-detail-actions { display: flex; gap: var(--sp-8); }
.proj-detail-meta {
display: flex;
flex-direction: column;
gap: var(--sp-10);
margin-top: var(--sp-16);
}
.proj-detail-pills {
display: flex;
flex-wrap: wrap;
gap: var(--sp-6);
}
.proj-detail-meta-stats {
display: flex;
flex-wrap: wrap;
gap: var(--sp-8);
font-size: var(--fs-xs);
color: var(--ink-500);
font-family: var(--font-mono);
}
.proj-detail-meta-sep { opacity: 0.5; }
/* ---- Tabs ---- */
.proj-tabs {
display: flex;
gap: var(--sp-4);
border-bottom: 1px solid var(--paper-3);
margin-top: 0;
}
.proj-tab {
background: transparent;
border: none;
font-family: var(--font-sans);
font-size: var(--fs-md);
font-weight: 500;
color: var(--ink-600);
padding: var(--sp-16) var(--sp-16) var(--sp-14);
cursor: pointer;
position: relative;
display: inline-flex;
align-items: center;
gap: var(--sp-8);
transition: color 0.12s;
}
.proj-tab:hover { color: var(--ink-900); }
.proj-tab.active { color: var(--ink-900); font-weight: 600; }
.proj-tab.active::after {
content: '';
position: absolute;
left: 14px; right: 14px; bottom: -1px;
height: 2px;
background: var(--pink-500);
border-radius: var(--radius-xs);
}
.proj-tab-count {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 500;
color: var(--ink-500);
background: var(--paper-2);
padding: var(--sp-2) var(--sp-6);
border-radius: var(--radius-sm);
}
.proj-tab.active .proj-tab-count { color: var(--ink-900); background: var(--paper-3); }
.proj-tab-body { padding-top: var(--sp-24); }
/* ---- Overview ---- */
.proj-overview-intro {
font-size: var(--fs-sm);
color: var(--ink-600);
margin-bottom: var(--sp-16);
}
.proj-coverage-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
gap: var(--sp-16);
}
.proj-cov-card {
background: white;
border: 1px solid var(--paper-3);
border-top: 3px solid var(--pf, var(--ink-400));
border-radius: var(--radius-lg);
padding: var(--sp-16) var(--sp-20) var(--sp-14);
cursor: pointer;
transition: all 0.15s;
display: flex;
flex-direction: column;
gap: var(--sp-14);
}
.proj-cov-card:hover {
box-shadow: var(--shadow-2);
transform: translateY(-2px);
}
.proj-cov-card-head {
display: flex;
align-items: baseline;
gap: var(--sp-12);
flex-wrap: wrap;
}
.proj-cov-card-fam {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 700;
color: var(--pf);
text-transform: none;
letter-spacing: 0.01em;
display: inline-flex;
align-items: center;
gap: var(--sp-4);
}
.proj-cov-card-title {
font-family: var(--font-serif);
font-size: var(--fs-2xl);
font-weight: 600;
color: var(--ink-900);
}
.proj-cov-card-prof {
font-size: var(--fs-xs);
color: var(--ink-600);
margin-left: auto;
}
.proj-cov-card-body {
display: flex;
gap: var(--sp-20);
align-items: center;
padding: var(--sp-4) 0 var(--sp-4);
}
.proj-cov-card-foot {
border-top: 1px solid var(--paper-2);
padding-top: var(--sp-10);
display: flex;
}
.proj-cov-card-link {
margin-left: auto;
font-size: var(--fs-xs);
font-weight: 500;
color: var(--pink-500);
display: inline-flex;
align-items: center;
gap: var(--sp-4);
}
.proj-cov-card:hover .proj-cov-card-link { gap: var(--sp-6); }
/* ---- Donut ---- */
.proj-donut-wrap {
flex-shrink: 0;
display: grid;
place-items: center;
position: relative;
}
.proj-donut-seg-impl { stroke: var(--fam-iso); }
.proj-donut-seg-prog { stroke: #c98314; }
.proj-donut-seg-open { stroke: var(--pink-500); }
.proj-donut-seg-na { stroke: var(--ink-300); }
.proj-donut-pct {
font-family: var(--font-mono);
font-size: var(--fs-2xl);
font-weight: 600;
fill: var(--ink-900);
}
.proj-donut-frac {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
fill: var(--ink-500);
letter-spacing: 0.04em;
}
.proj-donut-legend {
display: flex;
flex-direction: column;
gap: var(--sp-6);
min-width: 130px;
}
.proj-donut-legend-row {
display: flex;
align-items: center;
gap: var(--sp-8);
font-size: var(--fs-xs);
color: var(--ink-700);
}
.proj-donut-legend-dot {
width: 10px; height: 10px; border-radius: var(--radius-xs);
display: inline-block;
flex-shrink: 0;
}
.proj-donut-legend-dot.proj-donut-seg-impl { background: var(--fam-iso); }
.proj-donut-legend-dot.proj-donut-seg-prog { background: #c98314; }
.proj-donut-legend-dot.proj-donut-seg-open { background: var(--pink-500); }
.proj-donut-legend-dot.proj-donut-seg-na { background: var(--ink-300); }
.proj-donut-legend-lab { flex: 1; }
.proj-donut-legend-v { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-900); font-weight: 500; }
/* ---- SoA stub ---- */
.proj-soa-stub {
background: var(--paper-2);
border: 1px dashed var(--paper-3);
border-radius: var(--radius-lg);
padding: 36px var(--sp-32);
max-width: 640px;
}
.proj-soa-stub-tag {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--pink-500);
text-transform: none;
letter-spacing: 0.01em;
font-weight: 600;
margin-bottom: var(--sp-10);
}
.proj-soa-stub h3 {
font-family: var(--font-serif);
font-size: var(--fs-2xl);
font-weight: 600;
color: var(--ink-900);
margin: 0 0 var(--sp-8);
}
.proj-soa-stub p {
color: var(--ink-700);
font-size: var(--fs-md);
line-height: 1.6;
margin: 0 0 var(--sp-14);
}
.proj-soa-stub-meta {
font-size: var(--fs-xs);
font-family: var(--font-mono);
color: var(--ink-600);
margin-bottom: var(--sp-8);
}
.proj-soa-stub-link {
font-size: var(--fs-xs);
color: var(--ink-500);
}
.proj-soa-stub-link code {
font-family: var(--font-mono);
background: white;
padding: var(--sp-2) var(--sp-6);
border-radius: var(--radius-sm);
color: var(--ink-900);
}
/* ---- Products ---- */
.proj-products-intro {
font-size: var(--fs-sm);
color: var(--ink-600);
margin-bottom: var(--sp-16);
}
.proj-products-list {
display: grid;
gap: var(--sp-14);
}
.proj-prod-card {
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-lg);
padding: var(--sp-16) var(--sp-20);
}
.proj-prod-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sp-12);
padding-bottom: var(--sp-12);
border-bottom: 1px solid var(--paper-2);
margin-bottom: var(--sp-14);
}
.proj-prod-id {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--ink-500);
margin-bottom: var(--sp-4);
letter-spacing: 0.04em;
}
.proj-prod-name {
font-family: var(--font-serif);
font-size: var(--fs-2xl);
font-weight: 600;
color: var(--ink-900);
margin: 0;
}
.proj-prod-class-grid {
display: grid;
grid-template-columns: 180px 1fr;
row-gap: var(--sp-10);
column-gap: var(--sp-16);
font-size: var(--fs-sm);
}
.proj-prod-class-fam {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
font-weight: 600;
color: var(--pf, var(--ink-700));
display: inline-flex;
align-items: center;
gap: var(--sp-6);
letter-spacing: 0.04em;
}
.proj-prod-class-val {
color: var(--ink-900);
display: inline-flex;
align-items: center;
gap: var(--sp-8);
}
.proj-prod-class-val.deviates { color: var(--pink-500); font-weight: 500; }
.proj-prod-class-flag {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 600;
color: var(--pink-500);
background: color-mix(in srgb, var(--pink-500) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--pink-500) 25%, transparent);
padding: 1px var(--sp-6);
border-radius: var(--radius-xs);
text-transform: none;
letter-spacing: 0.01em;
}
.proj-prod-class-na { color: var(--ink-400); font-family: var(--font-mono); }
.proj-prod-add {
background: transparent;
border: 1px dashed var(--paper-3);
border-radius: var(--radius-lg);
padding: var(--sp-16);
color: var(--ink-600);
font-size: var(--fs-sm);
font-family: inherit;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--sp-8);
justify-content: center;
transition: all 0.12s;
}
.proj-prod-add:hover { border-color: var(--ink-400); color: var(--ink-900); background: white; }
/* ---- Notes ---- */
.proj-notes-meta {
font-size: var(--fs-2xs);
color: var(--ink-500);
margin-bottom: var(--sp-8);
font-family: var(--font-mono);
}
.proj-notes-area {
width: 100%;
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
padding: var(--sp-16) var(--sp-16);
font-family: var(--font-mono);
font-size: var(--fs-sm);
line-height: 1.6;
color: var(--ink-900);
resize: vertical;
min-height: 240px;
outline: none;
}
.proj-notes-area:focus { border-color: var(--ink-400); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy-900) 6%, transparent); }
.proj-notes-area::placeholder { color: var(--ink-400); }
/* ============================================================
Projekt-Create
============================================================ */
.proj-create { max-width: 720px; }
.proj-create-head { margin-bottom: 36px; }
.proj-form { display: flex; flex-direction: column; gap: var(--sp-32); }
.proj-form-step {
border-left: 2px solid var(--paper-3);
padding: var(--sp-4) 0 var(--sp-4) var(--sp-20);
position: relative;
}
.proj-form-step-head {
display: flex;
align-items: flex-start;
gap: var(--sp-12);
margin-bottom: var(--sp-12);
}
.proj-form-step-n {
position: absolute;
left: -13px;
top: 0;
width: 24px; height: 24px;
border-radius: 50%;
background: var(--navy-900);
color: var(--paper);
display: grid;
place-items: center;
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: 600;
}
.proj-form-step-t {
font-family: var(--font-serif);
font-size: var(--fs-xl);
font-weight: 600;
color: var(--ink-900);
letter-spacing: -0.01em;
line-height: 1.2;
}
.proj-form-step-hint {
font-size: var(--fs-xs);
color: var(--ink-500);
margin-top: var(--sp-2);
}
.proj-form-empty {
font-size: var(--fs-xs);
color: var(--ink-500);
font-style: italic;
padding: var(--sp-8) 0;
}
.proj-form-input, .proj-form-textarea, .proj-form-select {
width: 100%;
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
padding: var(--sp-10) var(--sp-12);
font-family: var(--font-sans);
font-size: var(--fs-md);
color: var(--ink-900);
outline: none;
transition: all 0.12s;
}
.proj-form-input:focus, .proj-form-textarea:focus, .proj-form-select:focus {
border-color: var(--ink-400);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy-900) 6%, transparent);
}
.proj-form-textarea { resize: vertical; min-height: 80px; font-family: inherit; line-height: 1.5; }
.proj-form-select { cursor: pointer; }
/* Standards-Auswahl-Grid */
.proj-form-std-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--sp-8);
}
.proj-form-std {
display: grid;
grid-template-columns: 18px auto 1fr;
align-items: center;
gap: var(--sp-10);
padding: var(--sp-10) var(--sp-12);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
cursor: pointer;
font-size: var(--fs-xs);
transition: all 0.12s;
user-select: none;
}
.proj-form-std:hover { border-color: var(--ink-400); }
.proj-form-std.on {
border-color: var(--pf, var(--navy-900));
background: color-mix(in oklab, var(--pf, var(--ink-900)) 6%, white);
}
.proj-form-std-box {
width: 18px; height: 18px;
border-radius: var(--radius-sm);
border: 1.5px solid var(--paper-3);
background: white;
display: grid;
place-items: center;
font-family: var(--font-mono);
font-size: var(--fs-2xs);
font-weight: 700;
color: white;
}
.proj-form-std.on .proj-form-std-box {
background: var(--pf, var(--navy-900));
border-color: var(--pf, var(--navy-900));
}
.proj-form-std-id {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
font-weight: 700;
color: var(--pf, var(--ink-700));
letter-spacing: 0.04em;
}
.proj-form-std-lab {
font-size: var(--fs-xs);
color: var(--ink-700);
line-height: 1.3;
text-wrap: balance;
}
/* Profile-Liste */
.proj-form-prof-list {
display: flex;
flex-direction: column;
gap: var(--sp-10);
}
.proj-form-prof-row {
display: grid;
grid-template-columns: 140px 1fr;
align-items: center;
gap: var(--sp-12);
}
.proj-form-prof-id {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
font-weight: 700;
color: var(--pf);
letter-spacing: 0.04em;
display: inline-flex;
align-items: center;
gap: var(--sp-6);
}
/* Form-Aktionen */
.proj-form-actions {
display: flex;
justify-content: flex-end;
gap: var(--sp-10);
padding-top: var(--sp-16);
border-top: 1px solid var(--paper-3);
margin-top: var(--sp-8);
}
.proj-form-success {
padding: var(--sp-12) var(--sp-16);
background: rgba(74,146,100,0.10);
border: 1px solid rgba(74,146,100,0.3);
border-radius: var(--radius);
color: var(--fam-iso);
font-size: var(--fs-sm);
text-align: center;
}
/* Responsive */
@media (max-width: 900px) {
.proj-a { padding: var(--sp-24) var(--sp-24) 60px; }
.proj-grid { grid-template-columns: 1fr; }
.proj-coverage-grid { grid-template-columns: 1fr; }
.proj-detail-title-row { flex-direction: column; }
.proj-prod-class-grid { grid-template-columns: 1fr; row-gap: var(--sp-6); }
.proj-prod-class-grid > * { padding-left: 0; }
.proj-cov-card-body { flex-direction: column; align-items: flex-start; }
.proj-form-prof-row { grid-template-columns: 1fr; }
}
.proj-shell .rail {
position: fixed;
top: 0;
left: 0;
width: var(--rail-w);
height: 100vh;
z-index: 10;
}
/* ===========================================================================
* SoA — Statement of Applicability (components/soa-table.jsx)
* Spec: specs/soa.md · Präfix: .soa-*
* =========================================================================== */
/* Shell */
.soa-shell {
display: flex;
flex-direction: column;
gap: 0;
background: var(--paper);
border-radius: var(--radius-lg);
border: 1px solid var(--paper-3);
overflow: hidden;
min-height: 480px;
}
/* ---- Toolbar ---- */
.soa-toolbar {
display: flex;
flex-direction: column;
gap: var(--sp-12);
padding: var(--sp-16) var(--sp-16) var(--sp-14);
background: var(--paper-2);
border-bottom: 1px solid var(--paper-3);
}
.soa-toolbar-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-16);
}
.soa-toolbar-row.soa-toolbar-actions {
padding-top: var(--sp-4);
border-top: 1px dashed var(--paper-3);
}
.soa-toolbar-group {
display: flex;
align-items: center;
gap: var(--sp-10);
min-height: 28px;
}
.soa-toolbar-label {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
white-space: nowrap;
}
.soa-toolbar-spacer { flex: 1; }
.soa-chip-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-6);
}
/* Filter-Chip */
.soa-chip {
display: inline-flex;
align-items: center;
gap: var(--sp-6);
height: 28px;
padding: 0 var(--sp-10);
border: 1px solid var(--paper-3);
background: white;
border-radius: 999px;
font-family: inherit;
font-size: var(--fs-xs);
font-weight: 500;
color: var(--ink-700);
cursor: pointer;
transition: background 0.1s, border-color 0.1s, color 0.1s;
user-select: none;
}
.soa-chip:hover { border-color: var(--ink-400); color: var(--ink-900); }
.soa-chip.active { color: var(--ink-900); border-color: var(--ink-700); background: var(--paper); }
.soa-chip-fam.active { border-width: 1px; }
.soa-chip .soa-fam-dot { width: 6px; height: 6px; border-radius: 50%; }
.soa-chip-fam.soa-fam-eu .soa-fam-dot { background: var(--fam-eu); }
.soa-chip-fam.soa-fam-iec .soa-fam-dot { background: var(--fam-iec); }
.soa-chip-fam.soa-fam-iso .soa-fam-dot { background: var(--fam-iso); }
.soa-chip-fam.soa-fam-en .soa-fam-dot { background: var(--fam-en); }
.soa-chip-fam.soa-fam-de .soa-fam-dot { background: var(--fam-de); }
.soa-chip-count {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--ink-500);
padding-left: var(--sp-4);
}
.soa-chip.active .soa-chip-count { color: var(--ink-700); }
.soa-chip-check {
padding-left: var(--sp-6);
}
/* Mini-Checkbox in Chip */
.soa-cb-mini {
width: 14px;
height: 14px;
border-radius: var(--radius-xs);
border: 1.5px solid var(--ink-400);
display: inline-flex;
align-items: center;
justify-content: center;
background: white;
}
.soa-cb-mini.checked {
background: var(--ink-900);
border-color: var(--ink-900);
color: white;
}
/* Search-Input */
.soa-search {
position: relative;
display: flex;
align-items: center;
gap: var(--sp-6);
height: 30px;
padding: 0 var(--sp-10) 0 var(--sp-10);
border: 1px solid var(--paper-3);
border-radius: var(--radius);
background: white;
flex: 0 0 260px;
max-width: 320px;
}
.soa-search:focus-within { border-color: var(--ink-400); }
.soa-search svg { color: var(--ink-500); flex-shrink: 0; }
.soa-search input {
border: none;
outline: none;
background: transparent;
font-size: var(--fs-xs);
flex: 1;
font-family: inherit;
color: var(--ink-900);
min-width: 0;
}
.soa-search input::placeholder { color: var(--ink-500); }
.soa-search-x {
border: none; background: transparent;
color: var(--ink-500); cursor: pointer;
display: inline-flex; padding: var(--sp-2);
border-radius: var(--radius-xs);
}
.soa-search-x:hover { background: var(--paper-2); color: var(--ink-900); }
/* Buttons */
.soa-btn-primary,
.soa-btn-ghost,
.soa-btn-danger {
display: inline-flex;
align-items: center;
gap: var(--sp-6);
height: 30px;
padding: 0 var(--sp-12);
border-radius: var(--radius);
font-family: inherit;
font-size: var(--fs-xs);
font-weight: 500;
cursor: pointer;
border: 1px solid transparent;
transition: background 0.1s, border-color 0.1s, color 0.1s;
user-select: none;
}
.soa-btn-primary {
background: var(--navy-900); color: var(--paper); border-color: var(--navy-900);
}
.soa-btn-primary:hover:not(:disabled) { background: var(--navy-800); }
.soa-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.soa-btn-ghost {
background: white; color: var(--ink-800); border-color: var(--paper-3);
}
.soa-btn-ghost:hover:not(:disabled) { border-color: var(--ink-400); color: var(--ink-900); }
.soa-btn-ghost:disabled { opacity: 0.45; cursor: not-allowed; }
.soa-btn-danger {
background: white; color: #b54a4a; border-color: rgba(208,74,74,0.3);
}
.soa-btn-danger:hover { background: rgba(208,74,74,0.06); border-color: #d04a4a; }
.soa-btn-sm { height: 26px; padding: 0 var(--sp-10); font-size: var(--fs-xs); }
/* Stats */
.soa-stats {
display: flex;
align-items: center;
gap: var(--sp-14);
flex-wrap: wrap;
}
.soa-stat {
font-size: var(--fs-xs);
color: var(--ink-600);
display: inline-flex;
align-items: baseline;
gap: var(--sp-4);
}
.soa-stat-num {
font-family: var(--font-mono);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--ink-900);
}
.soa-stat-impl .soa-stat-num { color: var(--fam-iso); }
.soa-stat-prog .soa-stat-num { color: #a55c00; }
.soa-stat-open .soa-stat-num { color: var(--ink-700); }
.soa-stat-overdue {
color: var(--pink-500);
padding: var(--sp-2) var(--sp-8);
background: color-mix(in srgb, var(--pink-500) 8%, transparent);
border-radius: 999px;
}
.soa-stat-overdue .soa-stat-num { color: var(--pink-500); }
/* ---- Bulk-Bar ---- */
.soa-bulk {
display: flex;
align-items: center;
gap: var(--sp-8);
padding: var(--sp-10) var(--sp-16);
background: var(--navy-900);
color: var(--paper);
border-bottom: 1px solid var(--navy-700);
position: sticky;
top: 0;
z-index: 5;
}
.soa-bulk-count {
font-size: var(--fs-xs);
color: rgba(250,248,244,0.7);
margin-right: var(--sp-8);
}
.soa-bulk-num {
font-family: var(--font-mono);
font-weight: 700;
color: var(--paper);
font-size: var(--fs-md);
}
.soa-bulk-action { position: relative; }
.soa-bulk .soa-btn-ghost {
background: transparent; color: var(--paper);
border-color: rgba(250,248,244,0.18);
}
.soa-bulk .soa-btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(250,248,244,0.4); color: var(--paper); }
.soa-bulk-sep {
width: 1px;
height: 18px;
background: rgba(255,255,255,0.12);
margin: 0 var(--sp-4);
}
.soa-bulk-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 30;
background: white;
color: var(--ink-900);
border: 1px solid var(--paper-3);
border-radius: var(--radius);
box-shadow: var(--shadow-3);
padding: var(--sp-6);
min-width: 200px;
}
.soa-bulk-menu-input {
display: flex;
gap: var(--sp-6);
align-items: center;
padding: var(--sp-8);
min-width: 280px;
}
.soa-bulk-menu-input .soa-input { flex: 1; }
.soa-bulk-clear {
margin-left: auto;
background: transparent;
color: rgba(250,248,244,0.6);
border: none;
width: 26px;
height: 26px;
border-radius: var(--radius-sm);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.soa-bulk-clear:hover { background: rgba(255,255,255,0.08); color: var(--paper); }
/* ---- Table ---- */
.soa-table-wrap {
flex: 1;
overflow: auto;
background: white;
position: relative;
}
.soa-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: var(--fs-xs);
table-layout: fixed;
}
.soa-th {
position: sticky;
top: 0;
z-index: 4;
background: var(--paper-2);
border-bottom: 1px solid var(--paper-3);
text-align: left;
font-weight: 600;
padding: 0;
font-size: var(--fs-2xs);
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-700);
white-space: nowrap;
box-shadow: 0 1px 0 color-mix(in srgb, var(--navy-900) 4%, transparent);
}
.soa-th-btn {
display: inline-flex;
align-items: center;
gap: var(--sp-4);
height: 36px;
padding: 0 var(--sp-12);
background: transparent;
border: none;
color: inherit;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
cursor: pointer;
width: 100%;
}
.soa-th-btn:hover { color: var(--ink-900); }
.soa-th-btn.active { color: var(--ink-900); }
.soa-th-btn.right { justify-content: flex-end; }
.soa-th-dir {
font-size: var(--fs-3xs);
color: var(--pink-500);
margin-left: var(--sp-2);
}
/* column widths */
.soa-th-cb, .soa-td-cb { width: 38px; }
.soa-th-std, .soa-td-std { width: 96px; }
.soa-th-nid, .soa-td-nid { width: 112px; }
.soa-th-title, .soa-td-title { width: auto; }
.soa-th-app, .soa-td-app { width: 102px; }
.soa-th-status, .soa-td-status { width: 132px; }
.soa-th-resp, .soa-td-resp { width: 100px; }
.soa-th-due, .soa-td-due { width: 140px; }
.soa-th-evi, .soa-td-evi { width: 52px; text-align: center; }
.soa-th-cb,
.soa-th-evi { padding: 0 var(--sp-10); }
.soa-row {
cursor: pointer;
transition: background 0.08s;
}
.soa-row:nth-child(even) td { background: var(--paper); }
.soa-row:hover td { background: color-mix(in srgb, var(--pink-500) 4%, transparent); }
.soa-row.selected td { background: rgba(45,108,223,0.06); }
.soa-row.selected:hover td { background: rgba(45,108,223,0.09); }
.soa-td {
padding: var(--sp-12) var(--sp-12);
border-bottom: 1px solid var(--paper-2);
vertical-align: top;
background: white;
}
.soa-td-cb { padding: var(--sp-14) var(--sp-10); }
.soa-td-nid {
padding-top: var(--sp-12);
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-800);
letter-spacing: -0.01em;
white-space: nowrap;
}
.soa-row-title {
font-weight: 500;
color: var(--ink-900);
line-height: 1.35;
margin-bottom: var(--sp-4);
text-wrap: pretty;
}
.soa-row-excerpt {
font-size: var(--fs-2xs);
color: var(--ink-500);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-wrap: pretty;
}
.soa-mono {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
letter-spacing: -0.01em;
}
/* Std-Tag in Tabelle */
.soa-fam-tag {
display: inline-flex;
align-items: center;
gap: var(--sp-4);
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--ink-800);
padding: var(--sp-4) var(--sp-8);
border-radius: var(--radius-xs);
background: var(--paper-2);
white-space: nowrap;
}
.soa-fam-tag .soa-fam-dot {
width: 5px; height: 5px; border-radius: 50%;
flex-shrink: 0;
}
.soa-fam-eu .soa-fam-dot,
.soa-fam-tag.soa-fam-eu .soa-fam-dot { background: var(--fam-eu); }
.soa-fam-iec .soa-fam-dot,
.soa-fam-tag.soa-fam-iec .soa-fam-dot { background: var(--fam-iec); }
.soa-fam-iso .soa-fam-dot,
.soa-fam-tag.soa-fam-iso .soa-fam-dot { background: var(--fam-iso); }
.soa-fam-en .soa-fam-dot,
.soa-fam-tag.soa-fam-en .soa-fam-dot { background: var(--fam-en); }
.soa-fam-de .soa-fam-dot,
.soa-fam-tag.soa-fam-de .soa-fam-dot { background: var(--fam-de); }
/* ---- Pills (Status / Applicable) ---- */
.soa-pill-wrap { position: relative; display: inline-flex; }
.soa-pill {
display: inline-flex;
align-items: center;
gap: var(--sp-4);
height: 22px;
padding: 0 var(--sp-8);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 700;
text-transform: none;
letter-spacing: 0.01em;
border: 1px solid transparent;
cursor: pointer;
user-select: none;
white-space: nowrap;
background: transparent;
}
.soa-pill-status {
background: rgba(125,135,163,0.14);
}
.soa-pill-app {
background: transparent;
border-style: solid;
border-width: 1px;
height: 20px;
font-size: var(--fs-3xs);
}
.soa-pill .soa-pill-dot {
width: 6px; height: 6px; border-radius: 50%;
}
.soa-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.soa-pill-menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 20;
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
box-shadow: var(--shadow-3);
padding: var(--sp-4);
min-width: 168px;
}
.soa-pill-menu-item {
display: flex;
align-items: center;
gap: var(--sp-8);
width: 100%;
padding: var(--sp-8) var(--sp-10);
border: none;
background: transparent;
border-radius: var(--radius-sm);
font-family: inherit;
font-size: var(--fs-xs);
color: var(--ink-800);
cursor: pointer;
text-align: left;
}
.soa-pill-menu-item:hover { background: var(--paper-2); color: var(--ink-900); }
.soa-pill-menu-item.active { background: var(--paper); }
.soa-pill-menu-item .soa-pill-dot {
width: 8px; height: 8px; border-radius: 50%;
}
.soa-pill-menu-check {
margin-left: auto;
color: var(--pink-500);
}
/* Inline inputs in der Tabelle */
.soa-inline-input {
width: 100%;
height: 28px;
padding: 0 var(--sp-8);
border: 1px solid transparent;
background: transparent;
border-radius: var(--radius-sm);
font: inherit;
font-size: var(--fs-xs);
color: var(--ink-900);
outline: none;
font-family: inherit;
}
.soa-inline-input::placeholder { color: var(--ink-400); }
.soa-inline-input:hover { border-color: var(--paper-3); background: white; }
.soa-inline-input:focus { border-color: var(--ink-400); background: white; }
.soa-inline-date {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-800);
}
.soa-inline-date.urg-soon { color: #a55c00; }
.soa-inline-date.urg-overdue { color: var(--pink-500); font-weight: 600; }
.soa-inline-date.urg-done { color: var(--ink-400); }
/* Evidence count in Tabellenzelle */
.soa-td-evi { padding: var(--sp-12) var(--sp-6); text-align: center; vertical-align: middle; }
.soa-evi-count {
display: inline-flex;
align-items: center;
gap: var(--sp-4);
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-700);
padding: var(--sp-2) var(--sp-6);
background: var(--paper-2);
border-radius: var(--radius-xs);
}
.soa-evi-empty { color: var(--ink-300); font-family: var(--font-mono); font-size: var(--fs-2xs); }
/* Checkbox (groß, fürs Auswählen) */
.soa-cb {
width: 16px;
height: 16px;
border-radius: var(--radius-xs);
border: 1.5px solid var(--ink-400);
display: inline-flex;
align-items: center;
justify-content: center;
background: white;
cursor: pointer;
flex-shrink: 0;
position: relative;
}
.soa-cb:hover { border-color: var(--ink-700); }
.soa-cb.checked {
background: var(--navy-900);
border-color: var(--navy-900);
color: white;
}
.soa-cb.indeterminate {
background: var(--navy-900);
border-color: var(--navy-900);
}
.soa-cb-dash {
width: 8px;
height: 2px;
background: white;
border-radius: 1px;
}
/* Empty-State innerhalb der Tabelle */
.soa-empty-row td { padding: 0; background: white; }
.soa-empty {
padding: 56px var(--sp-24);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-12);
}
.soa-empty-h {
font-family: var(--font-serif);
font-size: var(--fs-xl);
font-weight: 500;
color: var(--ink-900);
}
.soa-empty-p {
font-size: var(--fs-sm);
color: var(--ink-600);
max-width: 440px;
line-height: 1.5;
}
/* ===========================================================================
* Drawer (Detail rechts, 480px)
* =========================================================================== */
.soa-drawer-root {
position: fixed;
inset: 0;
z-index: 200;
pointer-events: none;
}
.soa-drawer-backdrop {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--navy-900) 32%, transparent);
pointer-events: auto;
animation: soa-fade-in 0.18s ease;
}
.soa-drawer {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 480px;
max-width: 92vw;
background: var(--paper);
pointer-events: auto;
display: flex;
flex-direction: column;
box-shadow: -8px 0 24px color-mix(in srgb, var(--navy-900) 16%, transparent);
overflow-y: auto;
animation: soa-slide-in 0.22s ease;
}
@keyframes soa-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes soa-slide-in {
from { transform: translateX(24px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.soa-drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-14) var(--sp-20);
border-bottom: 1px solid var(--paper-3);
background: var(--paper-2);
position: sticky;
top: 0;
z-index: 3;
}
.soa-drawer-back {
display: inline-flex;
align-items: center;
gap: var(--sp-6);
font-family: inherit;
font-size: var(--fs-xs);
color: var(--ink-600);
background: transparent;
border: none;
cursor: pointer;
padding: var(--sp-4) var(--sp-8) var(--sp-4) var(--sp-4);
border-radius: var(--radius-sm);
}
.soa-drawer-back:hover { background: var(--paper-3); color: var(--ink-900); }
.soa-drawer-head-meta {
display: flex; align-items: center; gap: var(--sp-8);
}
.soa-drawer-natid {
color: var(--ink-700);
font-weight: 600;
}
.soa-drawer-title-row {
padding: var(--sp-16) var(--sp-24) var(--sp-10);
}
.soa-drawer-title {
font-family: var(--font-serif);
font-size: var(--fs-2xl);
font-weight: 500;
line-height: 1.25;
margin: 0;
color: var(--ink-900);
text-wrap: balance;
}
.soa-drawer-section {
padding: var(--sp-14) var(--sp-24);
border-top: 1px solid var(--paper-3);
}
.soa-drawer-section:first-of-type { border-top: none; padding-top: 0; }
.soa-drawer-label {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
margin-bottom: var(--sp-8);
display: flex;
align-items: center;
gap: var(--sp-8);
}
.soa-drawer-label-count {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
background: var(--paper-2);
color: var(--ink-700);
padding: 1px var(--sp-4);
border-radius: var(--radius-xs);
letter-spacing: 0;
}
.soa-drawer-excerpt {
font-family: var(--font-serif);
font-size: var(--fs-md);
line-height: 1.55;
color: var(--ink-800);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
padding: var(--sp-14) var(--sp-16);
margin-bottom: var(--sp-8);
text-wrap: pretty;
}
.soa-link-btn {
display: inline-flex;
align-items: center;
gap: var(--sp-4);
background: transparent;
border: none;
font-family: inherit;
font-size: var(--fs-xs);
color: var(--fam-eu);
cursor: pointer;
padding: var(--sp-4) 0;
box-shadow: inset 0 -1px 0 transparent;
transition: box-shadow 0.1s;
}
.soa-link-btn:hover { box-shadow: inset 0 -1px 0 var(--fam-eu); }
.soa-drawer-grid {
display: grid;
grid-template-columns: auto 1fr 1fr;
gap: var(--sp-16);
padding: var(--sp-14) var(--sp-24);
border-top: 1px solid var(--paper-3);
}
.soa-drawer-grid .soa-drawer-label { margin-bottom: var(--sp-6); }
.soa-textarea,
.soa-input {
width: 100%;
font-family: inherit;
font-size: var(--fs-sm);
color: var(--ink-900);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
padding: var(--sp-8) var(--sp-10);
outline: none;
line-height: 1.45;
resize: vertical;
}
.soa-textarea { min-height: 64px; }
.soa-input { height: 32px; }
.soa-textarea:focus,
.soa-input:focus {
border-color: var(--ink-400);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy-900) 6%, transparent);
}
.soa-textarea::placeholder,
.soa-input::placeholder { color: var(--ink-400); }
/* Evidence-Liste */
.soa-evidence-list {
list-style: none;
padding: 0;
margin: 0 0 var(--sp-10);
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.soa-evidence-row {
display: flex;
align-items: center;
gap: var(--sp-8);
padding: var(--sp-8) var(--sp-10);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-sm);
font-size: var(--fs-xs);
color: var(--ink-800);
}
.soa-evidence-row svg { color: var(--ink-500); flex-shrink: 0; }
.soa-evidence-text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--font-mono);
font-size: var(--fs-2xs);
}
.soa-evidence-x {
border: none;
background: transparent;
color: var(--ink-500);
cursor: pointer;
display: inline-flex;
padding: var(--sp-2);
border-radius: var(--radius-xs);
}
.soa-evidence-x:hover { background: var(--paper-2); color: var(--pink-500); }
.soa-evidence-empty {
font-size: var(--fs-xs);
color: var(--ink-500);
padding: var(--sp-8) 0;
font-style: italic;
}
.soa-evidence-add {
display: flex;
align-items: center;
gap: var(--sp-8);
}
.soa-evidence-add .soa-input { flex: 1; }
.soa-drawer-foot {
margin-top: auto;
padding: var(--sp-14) var(--sp-24);
border-top: 1px solid var(--paper-3);
background: var(--paper-2);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-8);
position: sticky;
bottom: 0;
}
.soa-drawer-stamp {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--ink-500);
letter-spacing: 0.02em;
}
/* ===========================================================================
* Cherry-Pick-Modal
* =========================================================================== */
.soa-modal-root {
position: fixed;
inset: 0;
z-index: 250;
display: flex;
align-items: center;
justify-content: center;
}
.soa-modal-backdrop {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--navy-900) 42%, transparent);
animation: soa-fade-in 0.18s ease;
}
.soa-modal {
position: relative;
width: 680px;
max-width: 92vw;
max-height: 86vh;
background: var(--paper);
border-radius: var(--radius-lg);
box-shadow: 0 24px 64px color-mix(in srgb, var(--navy-900) 32%, transparent);
display: flex;
flex-direction: column;
overflow: hidden;
animation: soa-pop-in 0.2s ease;
}
@keyframes soa-pop-in {
from { transform: translateY(8px) scale(0.98); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.soa-modal-head {
padding: var(--sp-16) var(--sp-20) var(--sp-14);
display: flex;
align-items: flex-start;
justify-content: space-between;
border-bottom: 1px solid var(--paper-3);
background: white;
}
.soa-modal-eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
margin-bottom: var(--sp-2);
}
.soa-modal-title {
font-family: var(--font-serif);
font-size: var(--fs-2xl);
font-weight: 500;
margin: 0;
color: var(--ink-900);
}
.soa-modal-x {
background: transparent;
border: none;
color: var(--ink-500);
cursor: pointer;
width: 30px;
height: 30px;
border-radius: var(--radius-sm);
display: inline-flex;
align-items: center;
justify-content: center;
}
.soa-modal-x:hover { background: var(--paper-2); color: var(--ink-900); }
.soa-modal-toolbar {
padding: var(--sp-14) var(--sp-20);
background: var(--paper-2);
border-bottom: 1px solid var(--paper-3);
display: flex;
flex-direction: column;
gap: var(--sp-10);
}
.soa-modal-stds {
display: flex;
flex-wrap: wrap;
gap: var(--sp-6);
}
.soa-modal-std {
display: inline-flex;
align-items: center;
gap: var(--sp-6);
height: 28px;
padding: 0 var(--sp-10);
background: white;
border: 1px solid var(--paper-3);
border-radius: 999px;
font: inherit;
font-size: var(--fs-xs);
font-weight: 500;
color: var(--ink-700);
cursor: pointer;
font-family: var(--font-mono);
letter-spacing: 0.02em;
}
.soa-modal-std:hover { border-color: var(--ink-400); color: var(--ink-900); }
.soa-modal-std.active { background: var(--navy-900); color: var(--paper); border-color: var(--navy-900); }
.soa-modal-std.active .soa-fam-dot { box-shadow: 0 0 0 1.5px rgba(255,255,255,0.4); }
.soa-modal-std-count {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
background: var(--pink-500);
color: white;
padding: 1px var(--sp-6);
border-radius: 999px;
font-weight: 700;
letter-spacing: 0;
}
.soa-modal-search {
display: flex;
align-items: center;
gap: var(--sp-6);
height: 32px;
padding: 0 var(--sp-10);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
}
.soa-modal-search:focus-within { border-color: var(--ink-400); }
.soa-modal-search svg { color: var(--ink-500); flex-shrink: 0; }
.soa-modal-search input {
flex: 1;
border: none;
outline: none;
background: transparent;
font: inherit;
font-size: var(--fs-sm);
color: var(--ink-900);
}
.soa-modal-search input::placeholder { color: var(--ink-500); }
.soa-modal-list {
flex: 1;
overflow-y: auto;
background: white;
padding: var(--sp-4) 0;
}
.soa-modal-row {
display: flex;
align-items: center;
gap: var(--sp-10);
padding: var(--sp-8) var(--sp-20);
cursor: pointer;
border-left: 2px solid transparent;
transition: background 0.08s;
}
.soa-modal-row:hover:not(.existing) { background: var(--paper); }
.soa-modal-row.picked {
background: color-mix(in srgb, var(--pink-500) 5%, transparent);
border-left-color: var(--pink-500);
}
.soa-modal-row.picked:hover { background: color-mix(in srgb, var(--pink-500) 9%, transparent); }
.soa-modal-row.existing {
opacity: 0.55;
cursor: not-allowed;
}
.soa-modal-row-check {
width: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.soa-modal-row-existing {
width: 16px; height: 16px;
border-radius: var(--radius-xs);
background: var(--paper-3);
color: var(--ink-700);
display: inline-flex;
align-items: center;
justify-content: center;
}
.soa-modal-row-nid {
flex: 0 0 124px;
color: var(--ink-700);
font-weight: 600;
}
.soa-modal-row-title {
flex: 1;
font-size: var(--fs-sm);
color: var(--ink-900);
text-wrap: pretty;
line-height: 1.35;
}
.soa-modal-row.existing .soa-modal-row-title,
.soa-modal-row.existing .soa-modal-row-nid { color: var(--ink-500); }
.soa-modal-row-tag {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--ink-500);
padding: var(--sp-2) var(--sp-6);
background: var(--paper-2);
border-radius: var(--radius-xs);
letter-spacing: 0.02em;
white-space: nowrap;
}
.soa-modal-empty {
padding: 40px var(--sp-24);
text-align: center;
color: var(--ink-500);
font-size: var(--fs-sm);
}
.soa-modal-foot {
padding: var(--sp-14) var(--sp-20);
border-top: 1px solid var(--paper-3);
background: var(--paper-2);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-8);
}
.soa-modal-foot-count {
font-size: var(--fs-xs);
color: var(--ink-600);
}
.soa-modal-foot-actions {
display: flex;
gap: var(--sp-8);
}
/* ===========================================================================
* Print
* =========================================================================== */
@media print {
.soa-toolbar, .soa-bulk, .soa-drawer-root, .soa-modal-root,
.soa-td-cb, .soa-th-cb, .rail, .sidebar, .topbar, .proj-tabs,
.proj-detail-back, .proj-detail-actions { display: none !important; }
.soa-shell { border: none; border-radius: 0; }
.soa-row { break-inside: avoid; }
.soa-row:hover td { background: white !important; }
}
/* =====================================================================
* EVIDENCE & COVERAGE — specs/evidence.md
* Prefix: .ev-*, .cov-*
* ===================================================================== */
:root {
/* Decision colors */
--ev-pass: var(--status-ok);
--ev-pass-bg: var(--status-ok-bg);
--ev-partial: #b8770d;
--ev-partial-bg: #fbf2dd;
--ev-fail: #c0392b;
--ev-fail-bg: #f9e6e2;
--ev-pending: #6b7280;
--ev-pending-bg: #eef0f3;
--ev-na: #94a3b8;
--ev-na-bg: #eef0f3;
}
/* ---- Shared modal shell ---- */
.ev-modal-root { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; }
.ev-modal-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--navy-900) 42%, transparent); }
.ev-modal {
position: relative;
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-3);
max-width: 640px; width: calc(100vw - 48px);
max-height: calc(100vh - 48px);
display: flex; flex-direction: column;
overflow: hidden;
}
.ev-modal-create { max-width: 680px; }
.ev-modal-head {
display: flex; align-items: flex-start; justify-content: space-between;
padding: var(--sp-20) var(--sp-24) var(--sp-14);
border-bottom: 1px solid var(--paper-3);
}
.ev-modal-eyebrow {
font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: 0.01em;
text-transform: none; color: var(--ink-500); margin-bottom: var(--sp-4);
}
.ev-modal-title { font-size: var(--fs-xl); font-weight: 600; color: var(--ink-900); margin: 0; letter-spacing: -0.01em; }
.ev-modal-x {
background: transparent; border: 1px solid var(--paper-3); border-radius: var(--radius);
width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; color: var(--ink-600);
}
.ev-modal-x:hover { background: var(--paper-2); color: var(--ink-900); }
.ev-modal-foot {
display: flex; gap: var(--sp-10); justify-content: flex-end;
padding: var(--sp-14) var(--sp-24) var(--sp-20);
border-top: 1px solid var(--paper-3);
background: var(--paper);
}
/* ---- Form controls ---- */
.ev-input, .ev-textarea {
width: 100%; box-sizing: border-box;
background: white; border: 1px solid var(--paper-3); border-radius: var(--radius);
padding: var(--sp-8) var(--sp-10); font-family: inherit; font-size: var(--fs-sm); color: var(--ink-900);
transition: border-color 0.1s, box-shadow 0.1s;
}
.ev-input:focus, .ev-textarea:focus { outline: none; border-color: var(--ink-400); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy-900) 6%, transparent); }
.ev-textarea { font-family: inherit; resize: vertical; min-height: 60px; line-height: 1.45; }
.ev-mono { font-family: var(--font-mono); font-size: var(--fs-xs); }
.ev-btn-ghost, .ev-btn-primary {
display: inline-flex; align-items: center; gap: var(--sp-6);
font-family: inherit; font-size: var(--fs-sm); font-weight: 500;
padding: var(--sp-8) var(--sp-16); border-radius: var(--radius); cursor: pointer;
transition: all 0.12s;
background: var(--navy-900);
color: white;
border: 1px solid var(--navy-900);}
.ev-btn-ghost { background: white; border: 1px solid var(--paper-3); color: var(--ink-700);
border-radius: var(--radius);
padding: var(--sp-8) var(--sp-14);
font-size: var(--fs-sm);
font-weight: 500;}
.ev-btn-ghost:hover { border-color: var(--ink-400); color: var(--ink-900); background: var(--paper); }
.ev-btn-primary { background: var(--navy-900); border: 1px solid var(--navy-900); color: white; }
.ev-btn-primary:hover { background: var(--navy-800); }
.ev-btn-primary:disabled { background: var(--ink-300); border-color: var(--ink-300); cursor: not-allowed; }
/* ---- Create modal body ---- */
.ev-create-body { padding: var(--sp-16) var(--sp-24); overflow: auto; }
.ev-create-row { margin-bottom: var(--sp-14); }
.ev-create-row:last-child { margin-bottom: 0; }
.ev-create-label {
display: flex; align-items: center; gap: var(--sp-4);
font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.01em;
text-transform: none; color: var(--ink-600); margin-bottom: var(--sp-6);
}
.ev-create-req { color: var(--pink-500); }
.ev-create-hint { font-size: var(--fs-2xs); color: var(--ink-500); margin-top: var(--sp-4); }
.ev-create-kind-toggle { display: flex; gap: var(--sp-8); }
.ev-create-kind-btn {
flex: 1; display: inline-flex; align-items: center; gap: var(--sp-8); justify-content: center;
padding: var(--sp-10) var(--sp-12); border-radius: var(--radius);
background: white; border: 1px solid var(--paper-3); color: var(--ink-700);
font-family: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer;
transition: all 0.12s;
}
.ev-create-kind-btn:hover { border-color: var(--ink-400); }
.ev-create-type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.ev-create-type-btn {
display: inline-flex; align-items: center; gap: var(--sp-6);
padding: var(--sp-8) var(--sp-10); border-radius: var(--radius-md);
background: white; border: 1px solid var(--paper-3); color: var(--ink-700);
font-family: inherit; font-size: var(--fs-xs); cursor: pointer;
transition: all 0.1s;
text-align: left;
}
.ev-create-type-btn:hover { border-color: var(--ink-400); }
.ev-create-grid3 { display: grid; grid-template-columns: 1fr 130px 110px; gap: var(--sp-10); }
/* ---- Shared dot/badge ---- */
.ev-kind-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.ev-kind-badge {
display: inline-flex; align-items: center; gap: var(--sp-6);
padding: var(--sp-4) var(--sp-8); border-radius: 999px;
font-size: var(--fs-2xs); font-weight: 500;
border: 1px solid transparent;
}
.ev-kind-badge.compact { padding: var(--sp-2) var(--sp-8); font-size: var(--fs-3xs); }
/* ---- Assessment axes ---- */
.ev-axes { display: grid; gap: var(--sp-10); }
.ev-axis-row {
display: grid;
grid-template-columns: 200px 1fr;
gap: var(--sp-14); align-items: center;
}
.ev-axis-label-t { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-900); }
.ev-axis-label-h { font-size: var(--fs-3xs); color: var(--ink-500); margin-top: var(--sp-2); line-height: 1.3; }
.ev-axis-pills { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.ev-axis-pill {
display: inline-flex; align-items: center; gap: var(--sp-4);
padding: var(--sp-4) var(--sp-8); border-radius: var(--radius-md);
background: white; border: 1px solid;
font-family: inherit; font-size: var(--fs-2xs); font-weight: 500;
cursor: pointer; transition: all 0.1s;
}
.ev-axis-pill:hover { box-shadow: var(--shadow-1); }
.ev-axis-pill.active { font-weight: 600; }
.ev-axis-pill-glyph { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.5px; }
.ev-axis-pill-lab {}
@media (max-width: 760px) {
.ev-axis-row { grid-template-columns: 1fr; gap: var(--sp-4); }
}
/* ---- Decision pill + menu ---- */
.ev-decision-wrap { position: relative; display: inline-flex; align-items: center; gap: var(--sp-8); }
.ev-decision-pill {
display: inline-flex; align-items: center; gap: var(--sp-6);
padding: var(--sp-4) var(--sp-12) var(--sp-4) var(--sp-8); border-radius: 999px;
border: 1px solid;
font-family: inherit; font-size: var(--fs-xs); font-weight: 600;
cursor: pointer;
}
.ev-decision-pill:hover { box-shadow: var(--shadow-1); }
.ev-decision-dot { width: 8px; height: 8px; border-radius: 50%; }
.ev-decision-overridden {
font-size: var(--fs-3xs); color: var(--ink-500); font-style: italic;
}
.ev-decision-menu {
position: absolute; top: 100%; left: 0; margin-top: var(--sp-6);
background: white; border: 1px solid var(--paper-3); border-radius: var(--radius);
box-shadow: var(--shadow-2); padding: var(--sp-6);
min-width: 220px; z-index: 50;
}
.ev-decision-menu-head {
font-size: var(--fs-3xs); font-weight: 600; letter-spacing: 0.01em; text-transform: none;
color: var(--ink-500); padding: var(--sp-6) var(--sp-10) var(--sp-4);
}
.ev-decision-menu-item {
display: flex; align-items: center; gap: var(--sp-8); width: 100%;
background: transparent; border: none;
padding: var(--sp-8) var(--sp-10); border-radius: var(--radius-md); cursor: pointer;
font-family: inherit; font-size: var(--fs-xs); color: var(--ink-800); text-align: left;
}
.ev-decision-menu-item:hover { background: var(--paper); }
.ev-decision-menu-item.active { background: var(--paper-2); font-weight: 500; }
.ev-decision-menu-tag {
margin-left: var(--sp-6);
font-size: var(--fs-3xs); font-weight: 600; letter-spacing: 0.01em; text-transform: none;
color: var(--ink-500); background: white; padding: var(--sp-2) var(--sp-6); border-radius: var(--radius-xs);
border: 1px solid var(--paper-3);
}
.ev-decision-menu-check { margin-left: auto; color: var(--ink-700); }
/* ---- Evidence card (library grid) ---- */
.ev-card {
background: white; border: 1px solid var(--paper-3); border-radius: var(--radius-lg);
padding: var(--sp-14) var(--sp-16) var(--sp-12);
display: flex; flex-direction: column; gap: var(--sp-6);
cursor: pointer; transition: all 0.12s;
box-shadow: var(--shadow-1);}
.ev-card:hover { border-color: var(--ink-400); box-shadow: var(--shadow-1); }
.ev-card-head { display: flex; align-items: center; gap: var(--sp-8); }
.ev-card-type {
display: inline-flex; align-items: center; gap: var(--sp-4);
font-size: var(--fs-3xs); color: var(--ink-600); font-weight: 500;
margin-left: auto;
}
.ev-card-type-icon { color: var(--ink-500); display: inline-flex; }
.ev-card-name { font-size: var(--fs-md); font-weight: 600; color: var(--ink-900); margin: var(--sp-4) 0 0; line-height: 1.3; letter-spacing: -0.01em; }
.ev-card-desc { font-size: var(--fs-xs); color: var(--ink-700); margin: 0; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev-card-source {
display: inline-flex; align-items: center; gap: var(--sp-4);
font-family: var(--font-mono); font-size: var(--fs-3xs); color: var(--ink-500);
background: var(--paper); border-radius: var(--radius-sm); padding: var(--sp-4) var(--sp-8);
align-self: flex-start; max-width: 100%;
}
.ev-card-source-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ev-card-tags { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.ev-tag {
font-size: var(--fs-3xs); padding: var(--sp-2) var(--sp-8); border-radius: var(--radius-sm);
background: var(--paper-2); color: var(--ink-700);
border: 1px solid var(--paper-3);
}
.ev-card-foot {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10);
margin-top: var(--sp-6); padding-top: var(--sp-8); border-top: 1px dashed var(--paper-3);
font-size: var(--fs-2xs); color: var(--ink-600);
}
.ev-card-foot-stds { display: inline-flex; gap: var(--sp-4); flex-wrap: wrap; }
.ev-mini-std {
font-family: var(--font-mono); font-size: var(--fs-3xs); font-weight: 600;
padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-xs);
background: color-mix(in srgb, var(--pf, var(--ink-500)) 10%, white);
color: var(--pf, var(--ink-700));
border: 1px solid color-mix(in srgb, var(--pf, var(--ink-500)) 25%, white);
}
/* ---- Evidence drawer (Library) ---- */
.ev-drawer-root, .ev-picker-root { position: fixed; inset: 0; z-index: 1100; }
.ev-drawer-backdrop, .ev-picker-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--navy-900) 42%, transparent); }
.ev-drawer {
position: absolute; right: 0; top: 0; bottom: 0; width: 560px; max-width: 96vw;
background: white;
box-shadow: var(--shadow-3);
display: flex; flex-direction: column;
overflow-y: auto;
}
.ev-drawer-head {
display: flex; align-items: center; justify-content: space-between;
padding: var(--sp-16) var(--sp-24) var(--sp-12);
border-bottom: 1px solid var(--paper-3);
position: sticky; top: 0; background: white; z-index: 5;
}
.ev-drawer-back {
background: transparent; border: 1px solid var(--paper-3); border-radius: var(--radius);
padding: var(--sp-4) var(--sp-10); font-size: var(--fs-xs); color: var(--ink-700); cursor: pointer;
display: inline-flex; align-items: center; gap: var(--sp-6);
}
.ev-drawer-back:hover { border-color: var(--ink-400); color: var(--ink-900); background: var(--paper); }
.ev-drawer-head-meta { display: inline-flex; align-items: center; gap: var(--sp-10); }
.ev-drawer-id { color: var(--ink-500); }
.ev-drawer-title-row { padding: var(--sp-14) var(--sp-24) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.ev-drawer-type {
display: inline-flex; align-items: center; gap: var(--sp-6);
font-size: var(--fs-2xs); color: var(--ink-600); font-weight: 500;
}
.ev-drawer-title { font-size: var(--fs-2xl); font-weight: 600; color: var(--ink-900); margin: 0; letter-spacing: -0.01em; line-height: 1.2; text-wrap: pretty; }
.ev-drawer-section { padding: var(--sp-14) var(--sp-24); border-bottom: 1px solid var(--paper-3); }
.ev-drawer-section:last-child { border-bottom: none; }
.ev-drawer-label {
display: flex; align-items: center; gap: var(--sp-8);
font-size: var(--fs-3xs); font-weight: 600; letter-spacing: 0.01em;
text-transform: none; color: var(--ink-600); margin-bottom: var(--sp-8);
}
.ev-drawer-label-count {
font-family: var(--font-mono); font-size: var(--fs-3xs); color: var(--ink-500);
background: var(--paper-2); padding: 1px var(--sp-6); border-radius: var(--radius-xs); letter-spacing: 0;
}
.ev-drawer-desc { font-size: var(--fs-sm); color: var(--ink-800); line-height: 1.55; margin: 0; }
.ev-drawer-grid { display: grid; grid-template-columns: 1fr 110px 90px; gap: var(--sp-14); padding: var(--sp-14) var(--sp-24); border-bottom: 1px solid var(--paper-3); font-size: var(--fs-xs); color: var(--ink-800); }
.ev-drawer-source { background: var(--paper); padding: var(--sp-4) var(--sp-8); border-radius: var(--radius-sm); display: inline-block; }
.ev-drawer-empty {
font-size: var(--fs-xs); color: var(--ink-500); font-style: italic;
background: var(--paper); border: 1px dashed var(--paper-3); border-radius: var(--radius);
padding: var(--sp-14) var(--sp-16);
}
.ev-mapping-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.ev-mapping-row {
display: grid; grid-template-columns: auto auto 1fr auto auto; gap: var(--sp-10);
align-items: center; padding: var(--sp-8) var(--sp-12);
background: var(--paper); border-radius: var(--radius-md); font-size: var(--fs-xs);
}
.ev-mapping-row:hover { background: var(--paper-2); cursor: pointer; }
.ev-mapping-nid { color: var(--ink-700); font-weight: 500; }
.ev-mapping-title { color: var(--ink-800); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-mapping-decision {
font-size: var(--fs-3xs); font-weight: 600; padding: var(--sp-2) var(--sp-8); border-radius: var(--radius-sm);
display: inline-flex; align-items: center; gap: var(--sp-4);
}
.ev-mapping-go { color: var(--ink-500); display: inline-flex; }
/* ---- Library page ---- */
.ev-shell {}
.ev-page { padding: var(--sp-32) 40px 80px; max-width: 1480px; }
.ev-page-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: var(--sp-16); margin-bottom: var(--sp-16);
}
.ev-page-eyebrow {
font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0;
text-transform: none; color: var(--ink-500); font-weight: 400;
margin-bottom: var(--sp-8);
}
.ev-page-h1 { font-family: var(--font-serif); font-size: var(--fs-4xl); font-weight: 600; color: var(--ink-900); margin: 0; letter-spacing: -0.012em; }
.ev-page-sub { font-size: var(--fs-sm); color: var(--ink-500); margin-top: var(--sp-6);
line-height: 1.5;}
.ev-page-head-r { display: flex; gap: var(--sp-10); }
.ev-tabs {
display: flex; align-items: center; gap: var(--sp-8); margin-bottom: var(--sp-14);
border-bottom: 1px solid var(--paper-3); padding-bottom: 0;
}
.ev-tab {
display: inline-flex; align-items: center; gap: var(--sp-8);
padding: var(--sp-8) var(--sp-16); border-radius: var(--radius) var(--radius) 0 0;
background: transparent; border: 1px solid transparent; border-bottom: none;
font-family: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-600);
cursor: pointer; transition: all 0.12s;
margin-bottom: -1px;
}
.ev-tab:hover { color: var(--ink-900); background: var(--paper); }
.ev-tab.active { font-weight: 600; }
.ev-tab-count {
font-family: var(--font-mono); font-size: var(--fs-3xs); padding: 1px var(--sp-6); border-radius: var(--radius-xs);
background: rgba(255,255,255,0.6); color: inherit; border: 1px solid currentColor; opacity: 0.7;
letter-spacing: 0;
}
.ev-tabs-spacer { flex: 1; }
.ev-tabs-help {
display: inline-flex; align-items: center; gap: var(--sp-6);
font-size: var(--fs-2xs); color: var(--ink-500); font-style: italic;
}
.ev-toolbar {
display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-14);
padding: var(--sp-12) var(--sp-14); background: var(--paper); border: 1px solid var(--paper-3);
border-radius: var(--radius); margin-bottom: var(--sp-16);
flex-wrap: wrap;
}
.ev-toolbar-l { display: flex; gap: var(--sp-16); flex-wrap: wrap; flex: 1; }
.ev-toolbar-r { display: flex; gap: var(--sp-8); align-items: center; }
.ev-tb-group { display: flex; flex-direction: column; gap: var(--sp-4); }
.ev-tb-label {
font-size: var(--fs-3xs); font-weight: 600; letter-spacing: 0.01em; text-transform: none; color: var(--ink-500);
}
.ev-tb-chips { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.ev-chip {
background: white; border: 1px solid var(--paper-3); border-radius: 999px;
padding: var(--sp-4) var(--sp-10); font-family: inherit; font-size: var(--fs-2xs); color: var(--ink-700);
cursor: pointer; transition: all 0.1s;
}
.ev-chip:hover { border-color: var(--ink-400); color: var(--ink-900); }
.ev-chip.active { background: var(--navy-900); color: white; border-color: var(--navy-900); }
.ev-search {
display: inline-flex; align-items: center; gap: var(--sp-6);
background: white; border: 1px solid var(--paper-3); border-radius: var(--radius);
padding: var(--sp-8) var(--sp-12);
}
.ev-search:focus-within { border-color: var(--ink-400); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy-900) 6%, transparent); }
.ev-search input { border: none; outline: none; font-family: inherit; font-size: var(--fs-xs); min-width: 220px; }
.ev-search svg { color: var(--ink-500); }
.ev-search-x {
background: transparent; border: none; cursor: pointer; color: var(--ink-500);
display: inline-flex; padding: 0; line-height: 0;
}
.ev-search-x:hover { color: var(--ink-900); }
.ev-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--sp-12);
}
.ev-empty {
grid-column: 1 / -1;
background: var(--paper); border: 1px dashed var(--paper-3); border-radius: var(--radius);
padding: 40px var(--sp-24); text-align: center; color: var(--ink-500); font-size: var(--fs-sm);
}
/* ---- Picker modal (attach evidence to requirement) ---- */
.ev-picker {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 720px; max-width: calc(100vw - 48px); max-height: calc(100vh - 48px);
background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
display: flex; flex-direction: column; overflow: hidden;
}
.ev-picker-head {
padding: var(--sp-16) var(--sp-24) var(--sp-14); border-bottom: 1px solid var(--paper-3);
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10);
}
.ev-picker-title { font-size: var(--fs-lg); font-weight: 600; margin: 0; }
.ev-picker-eyebrow { font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: 0.01em; text-transform: none; color: var(--ink-500); margin-bottom: var(--sp-4); }
.ev-picker-body { padding: var(--sp-14) var(--sp-24); overflow: auto; flex: 1; min-height: 0; }
.ev-picker-search {
display: flex; align-items: center; gap: var(--sp-8);
background: var(--paper); border: 1px solid var(--paper-3); border-radius: var(--radius);
padding: var(--sp-8) var(--sp-10); margin-bottom: var(--sp-12);
}
.ev-picker-search input { border: none; background: transparent; outline: none; flex: 1; font-family: inherit; font-size: var(--fs-sm); }
.ev-picker-list { display: flex; flex-direction: column; gap: var(--sp-6); }
.ev-picker-item {
display: grid; grid-template-columns: 22px auto 1fr auto; gap: var(--sp-10);
align-items: center; padding: var(--sp-10) var(--sp-12);
background: white; border: 1px solid var(--paper-3); border-radius: var(--radius);
cursor: pointer; transition: all 0.1s;
}
.ev-picker-item:hover { border-color: var(--ink-400); background: var(--paper); }
.ev-picker-item.checked { border-color: var(--navy-900); background: var(--paper-2); }
.ev-picker-item.existing { opacity: 0.5; cursor: not-allowed; }
.ev-picker-check {
width: 18px; height: 18px; border-radius: var(--radius-sm);
border: 1.5px solid var(--ink-400); display: grid; place-items: center;
background: white; color: white;
}
.ev-picker-item.checked .ev-picker-check { background: var(--navy-900); border-color: var(--navy-900); }
.ev-picker-name { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-900); }
.ev-picker-meta { font-size: var(--fs-2xs); color: var(--ink-500); margin-top: var(--sp-2); }
.ev-picker-tail { display: inline-flex; align-items: center; gap: var(--sp-6); }
.ev-picker-existing-tag {
font-size: var(--fs-3xs); font-weight: 600; letter-spacing: 0.01em; text-transform: none;
color: var(--ink-500); background: var(--paper-2); padding: var(--sp-2) var(--sp-6); border-radius: var(--radius-xs);
}
.ev-picker-foot {
padding: var(--sp-14) var(--sp-24); border-top: 1px solid var(--paper-3);
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10);
background: var(--paper);
}
.ev-picker-count { font-size: var(--fs-xs); color: var(--ink-600); }
/* ---- Coverage matrix ---- */
.cov-shell {
background: white; border: 1px solid var(--paper-3); border-radius: var(--radius-lg);
padding: var(--sp-16) var(--sp-16);
}
.cov-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-12); }
.cov-title { font-size: var(--fs-lg); font-weight: 600; color: var(--ink-900); margin: 0; }
.cov-sub { font-size: var(--fs-2xs); color: var(--ink-500); margin-top: var(--sp-2); }
.cov-legend { display: inline-flex; gap: var(--sp-12); align-items: center; font-size: var(--fs-2xs); color: var(--ink-600); }
.cov-legend-sw { width: 12px; height: 12px; border-radius: var(--radius-xs); display: inline-block; vertical-align: -1px; margin-right: var(--sp-4); }
.cov-grid {
display: grid; gap: var(--sp-4);
}
.cov-row { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-12); align-items: center; }
.cov-row-l { font-size: var(--fs-xs); color: var(--ink-800); display: flex; align-items: center; gap: var(--sp-6); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cov-row-nid { font-family: var(--font-mono); font-size: var(--fs-3xs); color: var(--ink-500); }
.cov-row-r { display: flex; gap: var(--sp-4); }
.cov-cell {
flex: 1; min-width: 14px; height: 22px; border-radius: var(--radius-xs);
background: var(--paper-2);
cursor: pointer; position: relative;
transition: transform 0.08s;
}
.cov-cell:hover { transform: scale(1.08); z-index: 2; box-shadow: var(--shadow-1); }
.cov-cell.pass { background: var(--ev-pass); }
.cov-cell.partial { background: var(--ev-partial); }
.cov-cell.fail { background: var(--ev-fail); }
.cov-cell.pending { background: var(--ev-pending); opacity: 0.45; }
.cov-cell.empty { background: repeating-linear-gradient(45deg, var(--paper-2), var(--paper-2) 3px, var(--paper-3) 3px, var(--paper-3) 4px); }
.cov-stack {
display: flex; align-items: center; height: 22px; gap: var(--sp-2);
background: var(--paper-2); border-radius: var(--radius-xs); overflow: hidden;
padding: 0;
}
.cov-stack-seg { height: 100%; min-width: 2px; }
.cov-stack-empty { color: var(--ink-400); font-size: var(--fs-3xs); padding: 0 var(--sp-6); line-height: 22px; font-style: italic; }
/* ---- SoA drawer Evidence sections (new) ---- */
.ev-assess-block { background: linear-gradient(180deg, var(--paper) 0%, white 100%); }
.ev-assess-sub { font-weight: 400; color: var(--ink-500); margin-left: var(--sp-6); letter-spacing: 0; text-transform: none; font-size: var(--fs-3xs); }
.ev-assess-empty {
font-size: var(--fs-xs); color: var(--ink-500); font-style: italic;
padding: var(--sp-12) var(--sp-14); background: var(--paper); border: 1px dashed var(--paper-3); border-radius: var(--radius);
}
.ev-assess-agg { display: flex; flex-direction: column; gap: var(--sp-12); }
.ev-assess-decision { display: flex; align-items: center; gap: var(--sp-12); padding-top: var(--sp-10); border-top: 1px dashed var(--paper-3); }
.ev-assess-decision-l { font-size: var(--fs-2xs); color: var(--ink-600); font-weight: 500; }
.ev-sec { padding-top: var(--sp-16); padding-bottom: var(--sp-16); }
.ev-sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10); margin-bottom: var(--sp-8); }
.ev-sec-titlewrap { display: inline-flex; align-items: center; gap: var(--sp-8); }
.ev-sec-title { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-900); }
.ev-sec-count {
font-family: var(--font-mono); font-size: var(--fs-3xs); font-weight: 500;
background: var(--paper-2); color: var(--ink-600); padding: 1px var(--sp-6); border-radius: var(--radius-xs);
}
.ev-sec-attach {
display: inline-flex; align-items: center; gap: var(--sp-4);
font-family: inherit; font-size: var(--fs-2xs); font-weight: 500;
padding: var(--sp-4) var(--sp-10); border-radius: var(--radius-md);
background: white; border: 1px solid; cursor: pointer;
transition: all 0.1s;
}
.ev-sec-attach:hover { box-shadow: var(--shadow-1); }
.ev-sec-empty {
font-size: var(--fs-xs); color: var(--ink-500); font-style: italic;
padding: var(--sp-10) var(--sp-12); background: var(--paper); border: 1px dashed var(--paper-3); border-radius: var(--radius);
}
.ev-sec-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-6); }
.ev-sec-row {
background: white; border: 1px solid var(--paper-3); border-radius: var(--radius); overflow: hidden;
transition: border-color 0.1s;
}
.ev-sec-row:hover { border-color: var(--ink-400); }
.ev-sec-row.open { border-color: var(--ink-400); }
.ev-sec-row-head {
display: grid; grid-template-columns: 26px 1fr auto; gap: var(--sp-10); align-items: center;
padding: var(--sp-8) var(--sp-12); cursor: pointer;
}
.ev-sec-row-typeicon {
width: 22px; height: 22px; border-radius: var(--radius-sm);
display: grid; place-items: center;
}
.ev-sec-row-body { min-width: 0; }
.ev-sec-row-name { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-900); line-height: 1.3; }
.ev-sec-row-meta { display: flex; gap: var(--sp-4); align-items: center; margin-top: var(--sp-2); font-size: var(--fs-3xs); color: var(--ink-500); }
.ev-sec-row-dot { color: var(--ink-400); }
.ev-sec-row-src { color: var(--ink-500); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-sec-row-tail { display: inline-flex; align-items: center; gap: var(--sp-6); }
.ev-sec-row-x {
background: transparent; border: none; padding: var(--sp-4); cursor: pointer; color: var(--ink-400);
display: inline-flex; border-radius: var(--radius-sm);
}
.ev-sec-row-x:hover { color: var(--ev-fail); background: var(--ev-fail-bg); }
.ev-sec-row-chev { color: var(--ink-400); display: inline-flex; }
.ev-sec-row-expand { padding: var(--sp-8) var(--sp-14) var(--sp-14); border-top: 1px dashed var(--paper-3); background: var(--paper); }
.ev-sec-row-expand-label {
font-size: var(--fs-3xs); font-weight: 600; letter-spacing: 0.01em; text-transform: none;
color: var(--ink-500); margin: var(--sp-6) 0 var(--sp-8);
}
.ev-sec-row-notes { margin-top: var(--sp-10); }
.ev-sec-row-notes-l { display: block; font-size: var(--fs-3xs); font-weight: 500; color: var(--ink-600); margin-bottom: var(--sp-4); }
.ev-sec-row-notes-t { font-size: var(--fs-xs) !important; }
.ev-sec-row-stamp { display: flex; gap: var(--sp-6); margin-top: var(--sp-8); font-size: var(--fs-3xs); color: var(--ink-500); }
.ev-sec-row-stamp strong { color: var(--ink-700); font-weight: 600; }
.ev-gap-hint {
display: flex; gap: var(--sp-8); align-items: flex-start;
padding: var(--sp-10) var(--sp-14); margin: var(--sp-10) var(--sp-24) var(--sp-14);
background: var(--ev-partial-bg); border: 1px solid color-mix(in srgb, var(--ev-partial) 30%, white);
border-radius: var(--radius);
font-size: var(--fs-2xs); color: var(--ink-800); line-height: 1.45;
}
.ev-gap-hint svg { color: var(--ev-partial); flex-shrink: 0; margin-top: var(--sp-2); }
.ev-gap-hint strong { color: var(--ev-partial); }
/* ---- Project-Detail Evidence-Map tab ---- */
.ev-map-tab { display: flex; flex-direction: column; gap: var(--sp-20); }
.ev-map-intro {
display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-24);
padding: var(--sp-16) var(--sp-20); background: white; border: 1px solid var(--paper-3); border-radius: var(--radius-lg);
}
.ev-map-intro-t { font-size: var(--fs-xs); color: var(--ink-700); line-height: 1.5; max-width: 640px; }
.ev-map-stds { display: flex; gap: var(--sp-10); flex-wrap: wrap; }
/* Einzelne Norm-Pille (Auswahl) im Evidence-Coverage-Tab */
.ev-map-std {
display: inline-flex; align-items: center; gap: var(--sp-8);
padding: var(--sp-4) var(--sp-12) var(--sp-4) var(--sp-10);
border: 1px solid var(--paper-3); border-radius: 999px;
background: white; cursor: pointer;
font-family: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-700);
transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.ev-map-std:hover { border-color: var(--ink-400); }
.ev-map-std.active { border-color: var(--pf, var(--navy-900)); color: var(--navy-900); background: var(--paper); }
.ev-map-std .proj-pill-dot { background: var(--pf, var(--ink-400)); }
/* Statistik-Leiste (3 Kennzahlen) als Karte in einer Reihe */
.ev-map-stats {
display: flex; gap: var(--sp-32); flex-wrap: wrap;
padding: var(--sp-16) var(--sp-20); background: white;
border: 1px solid var(--paper-3); border-radius: var(--radius-lg);
}
.ev-map-stats .ev-map-stat { text-align: left; }
.ev-map-stat { text-align: right; }
.ev-map-stat-num { font-family: var(--font-serif); font-size: var(--fs-2xl); font-weight: 500; color: var(--ink-900); line-height: 1; }
.ev-map-stat-lab { font-size: var(--fs-3xs); font-weight: 600; letter-spacing: 0.01em; text-transform: none; color: var(--ink-500); margin-top: var(--sp-4); }
.ev-map-stat-gap .ev-map-stat-num { color: var(--ev-fail); }
.ev-map-empty {
background: var(--paper); border: 1px dashed var(--paper-3); border-radius: var(--radius);
padding: 40px var(--sp-24); text-align: center; color: var(--ink-500); font-size: var(--fs-sm);
}
/* ============================================================
* Voraussetzungen (Prerequisites) — Präfix .preq-*
* Spec: specs/prerequisites.md
* Status-Farben: greift auf bestehende --ev-* Palette zurück.
* ============================================================ */
/* ---- Status-Icon (kleine, gefüllte Pille mit Icon) ---- */
.preq-status-icon {
display: inline-grid;
place-items: center;
border-radius: 50%;
flex-shrink: 0;
}
.preq-status-icon svg { display: block; }
/* ---- Status-Pill (mit Label) ---- */
.preq-status-pill {
display: inline-flex;
align-items: center;
gap: var(--sp-4);
padding: var(--sp-4) var(--sp-8) var(--sp-4) var(--sp-8);
border-radius: var(--radius-sm);
font-size: var(--fs-2xs);
font-weight: 600;
letter-spacing: 0.01em;
}
/* ---- Kategorie-Tag ---- */
.preq-cat {
display: inline-flex;
align-items: center;
gap: var(--sp-4);
padding: var(--sp-2) var(--sp-8) var(--sp-2) var(--sp-6);
border: 1px solid;
border-radius: var(--radius-xs);
background: white;
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
}
.preq-cat.lg {
font-size: var(--fs-2xs);
padding: var(--sp-4) var(--sp-8) var(--sp-4) var(--sp-8);
}
/* ============================================================
* PrerequisiteCard
* ============================================================ */
.preq-card {
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
padding: var(--sp-16) var(--sp-16) var(--sp-14);
display: flex;
flex-direction: column;
gap: var(--sp-14);
transition: border-color 0.12s, box-shadow 0.12s;
}
.preq-card:hover { border-color: var(--ink-400); }
.preq-card.compact {
padding: var(--sp-12) var(--sp-16) var(--sp-12) var(--sp-12);
gap: 0;
}
@keyframes preq-flash {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pink-500) 45%, transparent); }
30% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--pink-500) 18%, transparent); }
100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pink-500) 0%, transparent); }
}
.preq-card.compact .preq-card-title {
font-size: var(--fs-md);
font-family: var(--font-sans);
font-weight: 500;
}
.preq-link:hover { background: var(--paper-2); color: var(--ink-900); }
.preq-card-body {
display: flex;
flex-direction: column;
gap: var(--sp-14);
padding-left: var(--sp-32);
}
.preq-field {
display: flex;
flex-direction: column;
gap: var(--sp-6);
}
/* Blockierte Anforderungen */
.preq-blocked-list {
display: flex;
flex-wrap: wrap;
gap: var(--sp-6);
}
.preq-blocked-pill:hover {
border-color: var(--ink-500);
background: var(--paper);
}
.preq-blocked-more:hover { border-color: var(--ink-500); color: var(--ink-900); }
/* Foot der Card (Verantwortlich, Fällig, Status) */
.preq-foot {
display: flex;
align-items: center;
gap: var(--sp-24);
padding-top: var(--sp-10);
border-top: 1px solid var(--paper-2);
flex-wrap: wrap;
}
/* ============================================================
* Status-Bar (kompakte horizontale Verteilung)
* ============================================================ */
.preq-statusbar {
display: flex;
gap: var(--sp-2);
height: 38px;
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
padding: var(--sp-4);
}
.preq-statusbar-lab svg { color: var(--ink-500); }
.preq-statusbar-seg-functioning .preq-statusbar-lab svg { color: var(--ev-pass); }
.preq-statusbar-seg-partial .preq-statusbar-lab svg { color: var(--ev-partial); }
.preq-statusbar-seg-not_functioning .preq-statusbar-lab svg { color: var(--ev-fail); }
.preq-statusbar-lab span:first-of-type { font-weight: 600; color: var(--ink-900); }
/* ============================================================
* Voraussetzungs-Tab (Projekt-Detail)
* ============================================================ */
.preq-tab {
display: flex;
flex-direction: column;
gap: var(--sp-16);
}
.preq-tab-sections {
display: flex;
flex-direction: column;
gap: var(--sp-24);
}
.preq-tab-sec {
display: flex;
flex-direction: column;
gap: var(--sp-12);
}
/* Empty state */
.preq-tab-empty {
background: white;
border: 1px dashed var(--paper-3);
border-radius: var(--radius-lg);
padding: 56px var(--sp-32);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-14);
}
.preq-tab-empty svg { color: var(--ink-400); }
.preq-tab-empty h3 {
font-family: var(--font-serif);
font-size: var(--fs-2xl);
font-weight: 500;
color: var(--ink-900);
margin: 0;
}
.preq-tab-empty p {
max-width: 480px;
font-size: var(--fs-sm);
line-height: 1.55;
color: var(--ink-600);
margin: 0;
}
/* ============================================================
* Blocking-Badge (SoA / Gap)
* ============================================================ */
.preq-block-badge {
display: inline-flex;
align-items: center;
gap: var(--sp-4);
padding: var(--sp-2) var(--sp-8) var(--sp-2) var(--sp-6);
background: transparent;
border: 1px solid var(--ev-partial);
border-radius: var(--radius-xs);
color: var(--ev-partial);
font-size: var(--fs-2xs);
font-weight: 500;
cursor: pointer;
font-family: inherit;
transition: background 0.1s;
}
.preq-block-badge:hover {
background: var(--ev-partial-bg);
}
.preq-block-badge.compact {
font-size: var(--fs-3xs);
padding: 1px var(--sp-4);
}
/* ============================================================
* SoA-Drawer-Notice (gelb-orange Warning, gedämpft)
* ============================================================ */
.preq-soa-notice {
display: flex;
gap: var(--sp-12);
padding: var(--sp-12) var(--sp-14);
background: var(--ev-partial-bg);
border: 1px solid color-mix(in oklch, var(--ev-partial) 30%, transparent);
border-radius: var(--radius);
margin: 0 0 var(--sp-14);
}
.preq-soa-notice-body {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--sp-6);
}
.preq-soa-notice-list li {
display: flex;
align-items: center;
gap: var(--sp-6);
font-size: var(--fs-xs);
color: var(--ink-800);
cursor: pointer;
}
.preq-soa-notice-list li:hover { color: var(--ink-900); text-decoration: underline; }
/* ============================================================
* Gap-Report Block (Header über Anforderungs-Gap-Liste)
* ============================================================ */
.preq-gap-block {
background: var(--paper-2);
border: 1px solid var(--paper-3);
border-left: 3px solid var(--ev-partial);
border-radius: 0 var(--radius) var(--radius) 0;
padding: var(--sp-16) var(--sp-20) var(--sp-16);
display: flex;
flex-direction: column;
gap: var(--sp-14);
margin-bottom: var(--sp-24);
}
.preq-gap-block-title strong { font-weight: 600; color: var(--ev-partial); }
.preq-gap-block-row-main { flex: 1; min-width: 0; }
.preq-gap-block-link:hover { background: var(--paper-2); }
/* ============================================================
* Voraussetzungs-Katalog (eigene Page)
* ============================================================ */
.preq-cat-shell { background: var(--paper); }
/* .preq-cat-page / .preq-cat-head: kanonisch in styles-prereq.css (spätere Quelle gewinnt) */
.preq-cat-tag {
display: inline-flex;
align-items: center;
gap: var(--sp-6);
font-size: var(--fs-3xs);
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
color: var(--pink-500);
margin-bottom: var(--sp-6);
}
.preq-cat-intro p {
margin: 0;
font-size: var(--fs-sm);
line-height: 1.55;
color: var(--ink-700);
}
.preq-cat-intro p em { font-style: italic; color: var(--ink-900); }
.preq-cat-search input {
flex: 1;
border: none;
outline: none;
font-size: var(--fs-sm);
font-family: inherit;
color: var(--ink-900);
background: transparent;
}
.preq-cat-search svg { color: var(--ink-500); }
.preq-cat-tab:hover { border-color: var(--ink-400); }
.preq-cat-tab.active {
font-weight: 600;
background: var(--paper);
}
.preq-cat-card-section {
display: flex;
flex-direction: column;
gap: var(--sp-6);
}
.preq-cat-pattern-eu .preq-cat-pattern-dot { background: var(--fam-eu); }
.preq-cat-pattern-iec .preq-cat-pattern-dot { background: var(--fam-iec); }
.preq-cat-pattern-iso .preq-cat-pattern-dot { background: var(--fam-iso); }
.preq-cat-pattern-en .preq-cat-pattern-dot { background: var(--fam-en); }
.preq-cat-pattern-de .preq-cat-pattern-dot { background: var(--fam-de); }
.preq-cat-card-edit:hover { background: var(--paper-2); color: var(--ink-900); }
.preq-cat-note svg { color: var(--pink-500); }
.preq-cat-note code {
font-family: var(--font-mono);
background: white;
padding: 1px var(--sp-4);
border-radius: var(--radius-xs);
font-size: var(--fs-3xs);
}
/* =====================================================================
* Reports Module — Phase 1
*
* Prefix: rep-* (Reports), hub-r-* (none — only rep- used)
* Composed of: Reports overview tab, Heatmap, GapReport, CoverageReport,
* DeltaReport, Export-Button.
* ===================================================================== */
/* ---------- Reports Overview (project-detail tab) ---------- */
.rep-overview {
padding: var(--sp-24) var(--sp-32) 80px;
max-width: 1280px;
margin: 0 auto;
}
.rep-overview-intro {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--sp-24);
margin-bottom: var(--sp-24);
padding-bottom: var(--sp-16);
border-bottom: 1px solid var(--paper-3);
}
.rep-overview-intro-l {
font-family: var(--font-sans);
font-size: var(--fs-2xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--pink-500);
margin-bottom: var(--sp-6);
}
.rep-overview-intro-h {
font-family: var(--font-serif);
font-size: var(--fs-3xl);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink-900);
margin: 0 0 var(--sp-6);
line-height: 1.15;
}
.rep-overview-intro-s {
font-family: var(--font-sans);
font-size: var(--fs-md);
color: var(--ink-700);
max-width: 56ch;
}
.rep-overview-meta {
font-family: var(--font-sans);
font-size: var(--fs-xs);
color: var(--ink-500);
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--sp-2);
white-space: nowrap;
}
.rep-overview-meta strong {
color: var(--ink-900);
font-weight: 600;
font-family: var(--font-mono);
font-size: var(--fs-2xs);
}
.rep-overview-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-16);
margin-bottom: 36px;
}
.rep-card {
position: relative;
text-align: left;
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-lg);
padding: var(--sp-20) var(--sp-20) var(--sp-20);
cursor: pointer;
font-family: var(--font-sans);
transition: transform 0.14s ease, border-color 0.14s, box-shadow 0.14s;
overflow: hidden;
}
.rep-card:hover {
transform: translateY(-2px);
border-color: var(--ink-400);
box-shadow: 0 6px 22px color-mix(in srgb, var(--navy-900) 8%, transparent);
}
.rep-card-accent {
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--pink-500);
}
.rep-card-head {
display: flex;
align-items: center;
gap: var(--sp-10);
margin-bottom: var(--sp-14);
}
.rep-card-glyph {
width: 34px;
height: 34px;
border-radius: var(--radius);
background: var(--paper-2);
color: var(--ink-700);
display: grid;
place-items: center;
}
.rep-card-glyph svg { display: block; }
.rep-card-kicker {
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
}
.rep-card-h {
font-family: var(--font-sans);
font-size: var(--fs-xl);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink-900);
margin: 0 0 var(--sp-6);
line-height: 1.2;
}
.rep-card-d {
font-size: var(--fs-xs);
line-height: 1.5;
color: var(--ink-700);
margin: 0 0 var(--sp-14);
}
.rep-card-stats {
display: flex;
flex-wrap: wrap;
gap: var(--sp-16);
padding-top: var(--sp-12);
border-top: 1px dashed var(--paper-3);
margin-bottom: var(--sp-14);
min-height: 38px;
}
.rep-card-stat {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.rep-card-stat-n {
font-family: var(--font-mono);
font-size: var(--fs-xl);
font-weight: 600;
color: var(--ink-900);
line-height: 1;
}
.rep-card-stat-l {
font-size: var(--fs-3xs);
font-weight: 500;
color: var(--ink-600);
letter-spacing: 0.02em;
margin-top: var(--sp-4);
}
.rep-card-stat-sev-critical .rep-card-stat-n { color: #c2362b; }
.rep-card-stat-sev-high .rep-card-stat-n { color: #d97706; }
.rep-card-stat-pct .rep-card-stat-n { color: #2563eb; }
.rep-card-cta {
font-family: var(--font-sans);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--pink-500);
display: inline-flex;
align-items: center;
gap: var(--sp-6);
}
.rep-card-cta svg { transition: transform 0.16s; }
.rep-card:hover .rep-card-cta svg { transform: translateX(3px); }
.rep-card-coming {
position: absolute;
top: 14px;
right: 14px;
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
background: var(--paper);
border: 1px solid var(--paper-3);
padding: var(--sp-4) var(--sp-8);
border-radius: 999px;
}
/* Profil-Hinweis im Overview */
.rep-profile-callout {
display: flex;
align-items: center;
gap: var(--sp-14);
background: var(--paper-2);
border: 1px solid var(--paper-3);
border-radius: var(--radius);
padding: var(--sp-14) var(--sp-16);
margin-bottom: 36px;
font-family: var(--font-sans);
}
.rep-profile-callout-icon {
width: 28px; height: 28px;
border-radius: var(--radius-md);
background: white;
border: 1px solid var(--paper-3);
display: grid; place-items: center;
color: var(--ink-700);
flex-shrink: 0;
}
.rep-profile-callout-text { flex: 1; font-size: var(--fs-xs); color: var(--ink-700); line-height: 1.5; }
.rep-profile-callout-text strong { color: var(--ink-900); font-weight: 600; }
.rep-profile-callout-link {
background: none; border: none; cursor: pointer;
color: var(--pink-500); font-weight: 600; font-size: var(--fs-xs);
text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
padding: 0; font-family: inherit;
}
/* Recent reports section */
.rep-overview-recent {
border-top: 1px solid var(--paper-3);
padding-top: var(--sp-24);
}
.rep-overview-recent-h {
font-family: var(--font-sans);
font-size: var(--fs-2xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
margin-bottom: var(--sp-14);
}
.rep-overview-recent-list {
display: flex;
flex-direction: column;
gap: 1px;
background: var(--paper-3);
border: 1px solid var(--paper-3);
border-radius: var(--radius);
overflow: hidden;
}
.rep-overview-recent-row {
background: white;
padding: var(--sp-12) var(--sp-16);
display: grid;
grid-template-columns: 88px 1fr auto auto;
align-items: center;
gap: var(--sp-16);
font-family: var(--font-sans);
font-size: var(--fs-xs);
}
.rep-overview-recent-kind {
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-600);
background: var(--paper-2);
padding: var(--sp-4) var(--sp-8);
border-radius: var(--radius-sm);
display: inline-flex;
width: fit-content;
}
.rep-overview-recent-kind-gap { color: #c2362b; background: #fdecea; }
.rep-overview-recent-kind-coverage { color: #2f7a4d; background: #e6f3eb; }
.rep-overview-recent-kind-delta { color: var(--pink-500); background: color-mix(in srgb, var(--pink-500) 8%, transparent); }
.rep-overview-recent-name { color: var(--ink-900); font-weight: 500; }
.rep-overview-recent-when {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-500);
}
.rep-overview-recent-when-rel {
font-family: var(--font-sans);
font-weight: 500;
margin-left: var(--sp-6);
color: var(--ink-600);
}
/* ---------- Report-View Header (Gap/Coverage/Delta) ---------- */
.rep-view {
padding: var(--sp-24) var(--sp-32) 80px;
max-width: 1320px;
margin: 0 auto;
font-family: var(--font-sans);
}
.rep-view-head { margin-bottom: var(--sp-24); }
.rep-back-btn {
background: none;
border: 1px solid var(--paper-3);
font-family: var(--font-sans);
font-size: var(--fs-xs);
font-weight: 500;
color: var(--ink-700);
cursor: pointer;
padding: var(--sp-4) var(--sp-12) var(--sp-4) var(--sp-8);
border-radius: var(--radius-md);
display: inline-flex;
align-items: center;
gap: var(--sp-6);
margin-bottom: var(--sp-16);
transition: all 0.12s;
}
.rep-back-btn:hover { border-color: var(--ink-500); color: var(--ink-900); background: var(--paper-2); }
.rep-view-head-title-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--sp-24);
}
.rep-view-head-kicker {
font-size: var(--fs-2xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-600);
margin-bottom: var(--sp-8);
display: inline-flex;
align-items: center;
gap: var(--sp-8);
}
.rep-view-head-kicker-dot {
width: 7px; height: 7px;
border-radius: 50%;
display: inline-block;
}
.rep-view-head-h1 {
font-family: var(--font-serif);
font-size: var(--fs-4xl);
font-weight: 600;
color: var(--ink-900);
letter-spacing: -0.015em;
margin: 0 0 var(--sp-10);
line-height: 1.1;
}
.rep-view-head-meta {
font-size: var(--fs-xs);
color: var(--ink-600);
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sp-4) 0;
}
.rep-view-head-meta strong { color: var(--ink-900); font-weight: 600; }
.rep-view-head-meta-sep { margin: 0 var(--sp-10); opacity: 0.5; }
/* ---------- Export Button ---------- */
.rep-export { position: relative; }
.rep-export-btn {
font-family: var(--font-sans);
font-size: var(--fs-xs);
font-weight: 600;
color: white;
background: var(--navy-900);
border: 1px solid var(--navy-900);
padding: var(--sp-8) var(--sp-14);
border-radius: var(--radius);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--sp-8);
transition: background 0.12s;
}
.rep-export-btn:hover { background: var(--navy-800); }
.rep-export-btn.open { background: var(--navy-700); }
.rep-export-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
width: 240px;
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
box-shadow: 0 12px 32px color-mix(in srgb, var(--navy-900) 16%, transparent);
padding: var(--sp-6);
z-index: 50;
font-family: var(--font-sans);
}
.rep-export-item {
display: flex;
align-items: center;
gap: var(--sp-12);
width: 100%;
border: none;
background: none;
font-family: inherit;
font-size: var(--fs-xs);
font-weight: 500;
color: var(--ink-900);
text-align: left;
cursor: pointer;
padding: var(--sp-8) var(--sp-10);
border-radius: var(--radius-md);
}
.rep-export-item:hover { background: var(--paper-2); }
.rep-export-item-glyph {
width: 30px;
height: 22px;
background: var(--navy-900);
color: white;
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.rep-export-item-glyph-ghost {
background: var(--paper-2);
color: var(--ink-700);
font-size: var(--fs-md);
}
.rep-export-sep {
height: 1px;
background: var(--paper-3);
margin: var(--sp-4) var(--sp-6);
}
.rep-toast {
position: fixed;
bottom: 28px; left: 50%;
transform: translateX(-50%);
background: var(--navy-900);
color: white;
padding: var(--sp-10) var(--sp-16);
border-radius: var(--radius);
font-family: var(--font-sans);
font-size: var(--fs-xs);
font-weight: 500;
z-index: 9999;
box-shadow: 0 8px 24px color-mix(in srgb, var(--navy-900) 25%, transparent);
animation: rep-toast-in 0.16s ease-out;
}
.rep-toast-out { opacity: 0; transform: translate(-50%, 8px); transition: all 0.3s; }
@keyframes rep-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }
/* ---------- Section header (within reports) ---------- */
.rep-section-h {
display: flex;
align-items: baseline;
gap: var(--sp-14);
margin-bottom: var(--sp-14);
padding-bottom: var(--sp-8);
border-bottom: 1px solid var(--paper-3);
}
.rep-section-h-t {
font-family: var(--font-serif);
font-size: var(--fs-lg);
font-weight: 600;
color: var(--ink-900);
}
.rep-section-h-sub {
font-size: var(--fs-2xs);
color: var(--ink-500);
}
/* ---------- Filter Bar ---------- */
.rep-filterbar {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: var(--sp-16);
padding: var(--sp-14) var(--sp-16);
background: var(--paper-2);
border: 1px solid var(--paper-3);
border-radius: var(--radius);
margin-bottom: var(--sp-24);
}
.rep-filter-block { display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; }
.rep-filter-l {
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
}
.rep-filter-chips { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.rep-chip {
font-family: var(--font-sans);
font-size: var(--fs-2xs);
font-weight: 500;
border: 1px solid var(--paper-3);
background: white;
color: var(--ink-600);
padding: var(--sp-4) var(--sp-10);
border-radius: 999px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--sp-6);
transition: all 0.12s;
}
.rep-chip:hover { border-color: var(--ink-400); color: var(--ink-900); }
.rep-chip.on {
background: white;
color: var(--ink-900);
border-color: var(--ink-400);
font-weight: 600;
}
.rep-chip-sev { padding-left: var(--sp-8); }
.rep-chip:not(.on) .proj-pill-dot { opacity: 0.45; }
.rep-select, .rep-input {
font-family: var(--font-sans);
font-size: var(--fs-xs);
color: var(--ink-900);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-md);
padding: var(--sp-8) var(--sp-10);
min-width: 180px;
}
.rep-select:focus, .rep-input:focus {
outline: none;
border-color: var(--navy-700);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy-900) 6%, transparent);
}
/* ---------- Gap-Report — Summary ---------- */
.rep-summary {
display: grid;
grid-template-columns: 240px 1fr;
gap: var(--sp-24);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-lg);
padding: var(--sp-20) var(--sp-24);
margin-bottom: var(--sp-24);
}
.rep-summary-total {
border-right: 1px solid var(--paper-3);
padding-right: var(--sp-24);
display: flex;
flex-direction: column;
justify-content: center;
}
.rep-summary-total-n {
font-family: var(--font-serif);
font-size: 52px;
font-weight: 600;
color: var(--ink-900);
line-height: 1;
}
.rep-summary-total-l {
font-size: var(--fs-xs);
color: var(--ink-600);
margin-top: var(--sp-4);
}
.rep-summary-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-20);
}
.rep-summary-col-h {
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
margin-bottom: var(--sp-8);
padding-bottom: var(--sp-4);
border-bottom: 1px dashed var(--paper-3);
}
.rep-summary-row {
display: grid;
grid-template-columns: 18px 1fr auto;
align-items: center;
gap: var(--sp-8);
padding: var(--sp-4) 0;
font-size: var(--fs-xs);
color: var(--ink-700);
}
.rep-summary-row-icon { display: inline-flex; }
.rep-summary-row-l { font-weight: 500; }
.rep-summary-row-n {
font-family: var(--font-mono);
font-weight: 600;
font-size: var(--fs-sm);
color: var(--ink-900);
}
/* ---------- Gap-Report — Standard- & Severity-Groups ---------- */
.rep-gap-list { display: flex; flex-direction: column; gap: var(--sp-14); }
.rep-gap-std-group {
border: 1px solid var(--paper-3);
border-radius: var(--radius-lg);
background: white;
overflow: hidden;
}
.rep-gap-std-head {
display: flex;
align-items: center;
width: 100%;
background: var(--paper);
border: none;
font-family: var(--font-sans);
text-align: left;
cursor: pointer;
padding: var(--sp-12) var(--sp-16);
gap: var(--sp-12);
border-bottom: 1px solid transparent;
position: relative;
}
.rep-gap-std-group.open .rep-gap-std-head { border-bottom-color: var(--paper-3); }
.rep-gap-std-head::before {
content: '';
position: absolute;
top: 8px; bottom: 8px; left: 0;
width: 3px;
border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
background: var(--fam-color, var(--ink-400));
}
.rep-gap-std-head.proj-fam-eu { --fam-color: var(--fam-eu); }
.rep-gap-std-head.proj-fam-iec { --fam-color: var(--fam-iec); }
.rep-gap-std-head.proj-fam-iso { --fam-color: var(--fam-iso); }
.rep-gap-std-head.proj-fam-en { --fam-color: var(--fam-en); }
.rep-gap-std-head.proj-fam-de { --fam-color: var(--fam-de); }
.rep-gap-std-chev {
font-family: var(--font-sans);
font-size: var(--fs-2xs);
color: var(--ink-500);
width: 12px;
}
.rep-gap-std-name {
font-size: var(--fs-md);
font-weight: 600;
color: var(--ink-900);
display: inline-flex;
align-items: center;
gap: var(--sp-8);
flex: 1;
}
.rep-gap-std-count {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-600);
background: white;
border: 1px solid var(--paper-3);
padding: var(--sp-2) var(--sp-8);
border-radius: var(--radius-sm);
}
.rep-gap-std-hl { display: inline-flex; gap: var(--sp-6); margin-left: var(--sp-8); }
.rep-gap-std-hl-c {
font-size: var(--fs-2xs);
font-weight: 600;
color: #c2362b;
background: #fdecea;
padding: var(--sp-2) var(--sp-8);
border-radius: var(--radius-sm);
}
.rep-gap-std-hl-h {
font-size: var(--fs-2xs);
font-weight: 600;
color: #d97706;
background: #fef3c7;
padding: var(--sp-2) var(--sp-8);
border-radius: var(--radius-sm);
}
.rep-gap-std-body { padding: var(--sp-6) 0; }
.rep-gap-sev-group { padding: 0 var(--sp-16); }
.rep-gap-sev-head {
display: flex;
align-items: center;
gap: var(--sp-10);
background: none;
border: none;
font-family: var(--font-sans);
width: 100%;
text-align: left;
cursor: pointer;
padding: var(--sp-10) 0 var(--sp-8);
border-bottom: 1px dashed var(--paper-3);
}
.rep-gap-sev-group.open .rep-gap-sev-head { border-bottom-style: solid; }
.rep-gap-sev-chev {
font-size: var(--fs-2xs); color: var(--ink-500); width: 12px;
}
.rep-gap-sev-icon { display: inline-flex; }
.rep-gap-sev-name {
font-size: var(--fs-xs);
font-weight: 600;
}
.rep-gap-sev-n {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-600);
background: var(--paper-2);
padding: 1px var(--sp-8);
border-radius: var(--radius-xs);
}
.rep-gap-sev-body {
display: flex;
flex-direction: column;
gap: var(--sp-8);
padding: var(--sp-10) 0 var(--sp-12);
}
.rep-gap-item {
display: grid;
grid-template-columns: 3px 1fr;
gap: var(--sp-14);
background: var(--paper);
border: 1px solid var(--paper-3);
border-radius: var(--radius);
overflow: hidden;
}
.rep-gap-item-bar { width: 3px; }
.rep-gap-item-main { padding: var(--sp-12) var(--sp-14); }
.rep-gap-item-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-8);
margin-bottom: var(--sp-6);
}
.rep-gap-item-sev {
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
padding: var(--sp-2) var(--sp-8);
border-radius: var(--radius-sm);
display: inline-flex;
align-items: center;
gap: var(--sp-4);
}
.rep-gap-item-type {
font-size: var(--fs-2xs);
color: var(--ink-600);
background: white;
border: 1px solid var(--paper-3);
padding: var(--sp-2) var(--sp-8);
border-radius: var(--radius-sm);
}
.rep-gap-item-nid {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-700);
background: white;
border: 1px solid var(--paper-3);
padding: var(--sp-2) var(--sp-8);
border-radius: var(--radius-sm);
}
.rep-gap-item-title {
font-size: var(--fs-sm);
font-weight: 600;
color: var(--ink-900);
flex: 1;
min-width: 0;
}
.rep-gap-item-desc {
font-size: var(--fs-xs);
color: var(--ink-700);
line-height: 1.55;
margin-bottom: var(--sp-4);
}
.rep-gap-item-details {
font-size: var(--fs-xs);
color: var(--ink-600);
background: white;
border-left: 2px solid var(--paper-3);
padding: var(--sp-6) var(--sp-10);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
margin-bottom: var(--sp-8);
line-height: 1.5;
}
.rep-gap-item-foot {
display: flex;
align-items: center;
gap: var(--sp-14);
font-size: var(--fs-2xs);
color: var(--ink-500);
}
.rep-gap-item-since { font-family: var(--font-mono); font-size: var(--fs-2xs); }
.rep-gap-item-missing { color: #c2362b; font-weight: 500; }
.rep-link-btn {
background: none;
border: none;
cursor: pointer;
font-family: var(--font-sans);
font-size: var(--fs-2xs);
font-weight: 600;
color: var(--pink-500);
display: inline-flex;
align-items: center;
gap: var(--sp-4);
padding: 0;
margin-left: auto;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.rep-link-btn:hover { color: var(--pink-400); }
.rep-link-btn-inline { margin-left: 0; }
/* ---------- Coverage-Report ---------- */
.rep-cov-top {
display: grid;
grid-template-columns: 1fr 380px;
gap: var(--sp-20);
margin-bottom: var(--sp-32);
}
.rep-cov-top-left, .rep-cov-top-right {
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-lg);
padding: var(--sp-16) var(--sp-20);
}
/* Stacked status bar */
.rep-stackedbar {
display: flex;
height: 26px;
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--paper-3);
margin-bottom: var(--sp-14);
}
.rep-stackedbar-seg {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: var(--fs-2xs);
font-weight: 700;
color: white;
position: relative;
min-width: 4px;
transition: filter 0.12s;
}
.rep-stackedbar-seg:hover { filter: brightness(0.94); }
.rep-stackedbar-seg-pct { text-shadow: 0 1px 2px rgba(0,0,0,0.18); }
.rep-seg-verified { background: #2f7a4d; }
.rep-seg-impl { background: #6bb88f; color: #0c2418; }
.rep-seg-prog { background: #e0a83c; color: #3a2a06; }
.rep-seg-open { background: #c2362b; }
.rep-seg-na { background: #b3b0a8; color: #2a2820; }
.rep-stackedbar-legend {
display: flex;
flex-wrap: wrap;
gap: var(--sp-14);
}
.rep-stackedbar-legend-item {
display: inline-flex;
align-items: center;
gap: var(--sp-8);
font-size: var(--fs-xs);
color: var(--ink-700);
}
.rep-stackedbar-legend-sw {
width: 14px;
height: 14px;
border-radius: var(--radius-xs);
display: inline-block;
}
.rep-stackedbar-legend-l { font-weight: 500; }
.rep-stackedbar-legend-v {
font-family: var(--font-mono);
font-weight: 600;
color: var(--ink-900);
}
.rep-stackedbar-legend-p {
font-family: var(--font-mono);
color: var(--ink-500);
font-size: var(--fs-2xs);
}
/* Evidence stats */
.rep-evstats {}
.rep-evstats-h {
font-family: var(--font-sans);
font-size: var(--fs-2xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
margin-bottom: var(--sp-12);
}
.rep-evstats-rows { display: flex; flex-direction: column; gap: var(--sp-10); }
.rep-evstats-row {
display: grid;
grid-template-columns: 1fr 64px 56px 40px;
align-items: center;
gap: var(--sp-10);
font-size: var(--fs-xs);
color: var(--ink-700);
}
.rep-evstats-row.strong { color: var(--ink-900); font-weight: 500; }
.rep-evstats-row.warn .rep-evstats-row-fill { background: #c2362b; }
.rep-evstats-row.strong .rep-evstats-row-fill { background: #2f7a4d; }
.rep-evstats-row-l { font-size: var(--fs-2xs); min-width: 0; }
.rep-evstats-row-bar {
width: 100%;
height: 6px;
background: var(--paper-2);
border-radius: var(--radius-xs);
overflow: hidden;
}
.rep-evstats-row-fill { height: 100%; background: var(--ink-400); border-radius: var(--radius-xs); }
.rep-evstats-row-v {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-900);
text-align: right;
}
.rep-evstats-row-p {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-500);
text-align: right;
}
/* Per-standard cards */
.rep-perstd { margin-bottom: var(--sp-32); }
.rep-perstd-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--sp-16);
}
.rep-perstd-card {
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-lg);
padding: var(--sp-16) var(--sp-16);
position: relative;
overflow: hidden;
}
.rep-perstd-card::before {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
width: 3px;
background: var(--fam-color, var(--ink-400));
}
.rep-perstd-card.proj-fam-eu { --fam-color: var(--fam-eu); }
.rep-perstd-card.proj-fam-iec { --fam-color: var(--fam-iec); }
.rep-perstd-card.proj-fam-iso { --fam-color: var(--fam-iso); }
.rep-perstd-card.proj-fam-en { --fam-color: var(--fam-en); }
.rep-perstd-card.proj-fam-de { --fam-color: var(--fam-de); }
.rep-perstd-card-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--sp-14);
}
.rep-perstd-fam {
font-size: var(--fs-xs);
font-weight: 600;
color: var(--ink-900);
display: inline-flex;
align-items: center;
gap: var(--sp-6);
}
.rep-perstd-pct {
font-family: var(--font-mono);
font-size: var(--fs-xl);
font-weight: 600;
color: var(--ink-900);
}
.rep-perstd-card-body {
display: grid;
grid-template-columns: 116px 1fr;
gap: var(--sp-16);
align-items: center;
}
.rep-perstd-card-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-8);
}
.rep-perstd-stat {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
}
.rep-perstd-stat-n {
font-family: var(--font-mono);
font-size: var(--fs-md);
font-weight: 600;
color: var(--ink-900);
line-height: 1;
}
.rep-perstd-stat-l {
font-size: var(--fs-3xs);
font-weight: 500;
color: var(--ink-600);
position: relative;
padding-left: var(--sp-10);
}
.rep-perstd-stat-l::before {
content: '';
position: absolute;
left: 0; top: 4px;
width: 6px; height: 6px;
border-radius: 50%;
}
.rep-perstd-stat-l.rep-seg-verified::before { background: #2f7a4d; }
.rep-perstd-stat-l.rep-seg-impl::before { background: #6bb88f; }
.rep-perstd-stat-l.rep-seg-prog::before { background: #e0a83c; }
.rep-perstd-stat-l.rep-seg-open::before { background: #c2362b; }
.rep-perstd-card-foot {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: var(--sp-14);
padding-top: var(--sp-10);
border-top: 1px dashed var(--paper-3);
font-size: var(--fs-2xs);
color: var(--ink-500);
}
.rep-perstd-na {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--ink-500);
background: var(--paper-2);
padding: 1px var(--sp-6);
border-radius: var(--radius-xs);
}
/* Heatmap block (in coverage report) */
.rep-heatblock {}
.rep-heatblock-stdtabs {
display: flex;
gap: var(--sp-8);
margin-bottom: var(--sp-14);
flex-wrap: wrap;
}
.rep-tabchip {
font-family: var(--font-sans);
font-size: var(--fs-xs);
font-weight: 500;
background: white;
border: 1px solid var(--paper-3);
color: var(--ink-600);
padding: var(--sp-4) var(--sp-12);
border-radius: 999px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--sp-6);
transition: all 0.12s;
}
.rep-tabchip:hover { border-color: var(--ink-400); color: var(--ink-900); }
.rep-tabchip.active {
background: var(--navy-900);
border-color: var(--navy-900);
color: white;
}
.rep-tabchip.active .proj-pill-dot { background: white !important; }
/* ---------- Heatmap component ---------- */
.rep-heatmap {
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
padding: var(--sp-14) var(--sp-16) var(--sp-16);
}
.rep-heatmap-grouph {
display: flex;
align-items: center;
gap: var(--sp-10);
margin: var(--sp-14) 0 var(--sp-8);
padding-bottom: var(--sp-6);
border-bottom: 1px dashed var(--paper-3);
}
.rep-heatmap-grouph:first-child { margin-top: 0; }
.rep-heatmap-grouph-l {
font-family: var(--font-sans);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--ink-900);
display: inline-flex;
align-items: center;
gap: var(--sp-6);
}
.rep-heatmap-grouph-n {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--ink-500);
}
.rep-heatmap-grid {
display: grid;
gap: var(--sp-4);
grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
margin-bottom: var(--sp-8);
}
.rep-heatmap-cell {
position: relative;
aspect-ratio: 1 / 1;
min-height: 28px;
background: var(--paper-2);
border: 1px solid transparent;
border-radius: var(--radius-sm);
cursor: pointer;
padding: 0;
display: grid;
place-items: center;
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 600;
color: rgba(255,255,255,0.85);
transition: transform 0.1s, box-shadow 0.1s;
}
.rep-heatmap-cell:hover {
transform: scale(1.18);
z-index: 5;
box-shadow: 0 4px 14px color-mix(in srgb, var(--navy-900) 18%, transparent);
border-color: var(--navy-900);
}
.rep-heatmap-cell-dec-pass { background: #2f7a4d; }
.rep-heatmap-cell-dec-pass-evidence { background: #6bb88f; color: #0c2418; }
.rep-heatmap-cell-dec-partial { background: #e0a83c; color: #3a2a06; }
.rep-heatmap-cell-dec-fail { background: #c2362b; }
.rep-heatmap-cell-dec-na { background: #b3b0a8; color: #2a2820; }
.rep-heatmap-cell-dec-open { background: var(--paper-3); color: var(--ink-600); }
.rep-heatmap-tt {
position: fixed;
background: var(--navy-900);
color: white;
padding: var(--sp-8) var(--sp-12);
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: var(--fs-2xs);
z-index: 9999;
pointer-events: none;
transform: translate(-50%, calc(-100% - 12px));
box-shadow: 0 6px 20px color-mix(in srgb, var(--navy-900) 30%, transparent);
max-width: 280px;
line-height: 1.4;
}
.rep-heatmap-tt::after {
content: '';
position: absolute;
bottom: -5px; left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 10px; height: 10px;
background: var(--navy-900);
}
.rep-heatmap-tt-h {
display: flex;
align-items: center;
gap: var(--sp-8);
margin-bottom: var(--sp-2);
}
.rep-heatmap-tt-nid {
font-family: var(--font-mono);
font-weight: 600;
}
.rep-heatmap-tt-dec {
font-size: var(--fs-3xs);
font-weight: 600;
text-transform: none;
letter-spacing: 0.01em;
padding: 1px var(--sp-6);
border-radius: var(--radius-xs);
}
.rep-heatmap-tt-title {
margin: var(--sp-4) 0 var(--sp-2);
opacity: 0.9;
}
.rep-heatmap-tt-foot {
margin-top: var(--sp-4);
opacity: 0.7;
font-size: var(--fs-3xs);
display: flex;
gap: var(--sp-8);
font-family: var(--font-mono);
}
.rep-heatmap-legend {
display: flex;
flex-wrap: wrap;
gap: var(--sp-14);
padding-top: var(--sp-12);
border-top: 1px dashed var(--paper-3);
margin-top: var(--sp-6);
}
.rep-heatmap-legend-item {
display: inline-flex;
align-items: center;
gap: var(--sp-6);
font-size: var(--fs-2xs);
color: var(--ink-600);
}
.rep-heatmap-legend-sw {
width: 12px; height: 12px;
border-radius: var(--radius-xs);
display: inline-block;
}
/* ---------- Delta-Report ---------- */
.rep-delta-config {
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-lg);
padding: var(--sp-24) var(--sp-24);
max-width: 720px;
}
.rep-delta-config-types {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-10);
margin-bottom: var(--sp-20);
}
.rep-radio-card {
position: relative;
display: flex;
align-items: flex-start;
gap: var(--sp-10);
padding: var(--sp-12) var(--sp-14);
border: 1px solid var(--paper-3);
border-radius: var(--radius);
cursor: pointer;
background: white;
transition: all 0.12s;
}
.rep-radio-card.on { border-color: var(--navy-900); background: var(--paper); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy-900) 5%, transparent); }
.rep-radio-card input { position: absolute; opacity: 0; }
.rep-radio-card-mark {
width: 16px; height: 16px;
border-radius: 50%;
border: 2px solid var(--paper-3);
flex-shrink: 0;
margin-top: var(--sp-2);
position: relative;
}
.rep-radio-card.on .rep-radio-card-mark {
border-color: var(--navy-900);
}
.rep-radio-card.on .rep-radio-card-mark::after {
content: '';
position: absolute;
inset: 2px;
border-radius: 50%;
background: var(--navy-900);
}
.rep-radio-card-body { display: flex; flex-direction: column; gap: var(--sp-2); }
.rep-radio-card-l {
font-size: var(--fs-sm);
font-weight: 600;
color: var(--ink-900);
}
.rep-radio-card-s {
font-size: var(--fs-2xs);
color: var(--ink-600);
line-height: 1.4;
}
.rep-delta-config-fields { margin-bottom: var(--sp-20); display: flex; flex-direction: column; gap: var(--sp-12); }
.rep-field { display: flex; flex-direction: column; gap: var(--sp-4); }
.rep-field-l {
font-size: var(--fs-2xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
}
.rep-field-readout {
font-size: var(--fs-sm);
color: var(--ink-900);
font-weight: 500;
padding: var(--sp-8) var(--sp-10);
background: var(--paper-2);
border-radius: var(--radius-md);
border: 1px dashed var(--paper-3);
}
.rep-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); }
.rep-delta-hint {
font-size: var(--fs-xs);
color: var(--ink-700);
background: var(--paper-2);
border-left: 3px solid var(--ink-400);
padding: var(--sp-10) var(--sp-14);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
line-height: 1.5;
margin-top: var(--sp-8);
}
.rep-delta-hint-ok { border-left-color: #2f7a4d; }
.rep-delta-hint strong { color: var(--ink-900); }
.rep-delta-config-actions { display: flex; justify-content: flex-end; }
.rep-btn-primary {
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: 600;
background: var(--navy-900);
color: white;
border: 1px solid var(--navy-900);
padding: var(--sp-8) var(--sp-16);
border-radius: var(--radius);
cursor: pointer;
transition: background 0.12s;
}
.rep-btn-primary:hover { background: var(--navy-800); }
.rep-delta-summary {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1px;
background: var(--paper-3);
border: 1px solid var(--paper-3);
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: var(--sp-24);
}
.rep-delta-summary-cell {
background: white;
padding: var(--sp-16) var(--sp-14);
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.rep-delta-summary-cell-h {
display: inline-flex;
align-items: baseline;
gap: var(--sp-6);
}
.rep-delta-summary-sign {
font-family: var(--font-mono);
font-size: var(--fs-lg);
font-weight: 700;
}
.rep-delta-summary-n {
font-family: var(--font-serif);
font-size: var(--fs-3xl);
font-weight: 600;
color: var(--ink-900);
line-height: 1;
}
.rep-delta-summary-l {
font-size: var(--fs-2xs);
color: var(--ink-600);
line-height: 1.3;
}
.rep-delta-pos .rep-delta-summary-sign { color: #2f7a4d; }
.rep-delta-neg .rep-delta-summary-sign { color: #c2362b; }
.rep-delta-neut .rep-delta-summary-sign { color: var(--ink-500); }
.rep-delta-changes { display: flex; flex-direction: column; gap: var(--sp-12); }
.rep-delta-group {
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-lg);
overflow: hidden;
}
.rep-delta-group-head {
width: 100%;
background: var(--paper);
border: none;
border-bottom: 1px solid transparent;
display: flex;
align-items: center;
gap: var(--sp-12);
padding: var(--sp-12) var(--sp-16);
cursor: pointer;
text-align: left;
font-family: var(--font-sans);
}
.rep-delta-group.open .rep-delta-group-head { border-bottom-color: var(--paper-3); }
.rep-delta-group-chev { font-size: var(--fs-2xs); color: var(--ink-500); width: 12px; }
.rep-delta-group-marker {
width: 7px;
height: 7px;
border-radius: 50%;
display: inline-block;
}
.rep-delta-marker-improve { background: #2f7a4d; }
.rep-delta-marker-regress { background: #c2362b; }
.rep-delta-marker-new { background: #2563eb; }
.rep-delta-marker-removed { background: var(--ink-500); }
.rep-delta-marker-evidence { background: var(--pink-500); }
.rep-delta-marker-assessment { background: #d97706; }
.rep-delta-group-title {
flex: 1;
font-size: var(--fs-md);
font-weight: 600;
color: var(--ink-900);
}
.rep-delta-group-count {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-600);
background: white;
border: 1px solid var(--paper-3);
padding: var(--sp-2) var(--sp-8);
border-radius: var(--radius-sm);
}
.rep-delta-group-body { padding: var(--sp-6) var(--sp-16) var(--sp-14); display: flex; flex-direction: column; gap: var(--sp-8); }
.rep-delta-row {
padding: var(--sp-10) var(--sp-12);
border-radius: var(--radius);
border: 1px solid var(--paper-3);
background: var(--paper);
display: flex;
flex-direction: column;
gap: var(--sp-6);
}
.rep-delta-row-regress { background: #fef5f3; border-color: #f5cbc6; }
.rep-delta-row-improve { background: #f1f8f3; border-color: #c9e3d3; }
.rep-delta-row-new { background: #f3f6fb; border-color: #cad9ee; }
.rep-delta-row-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-8);
}
.rep-delta-row-nid {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-700);
background: white;
border: 1px solid var(--paper-3);
padding: var(--sp-2) var(--sp-8);
border-radius: var(--radius-sm);
}
.rep-delta-row-title {
font-size: var(--fs-sm);
font-weight: 600;
color: var(--ink-900);
flex: 1;
min-width: 0;
}
.rep-delta-row-title-strike { text-decoration: line-through; opacity: 0.7; }
.rep-delta-row-arrow {
font-family: var(--font-mono);
color: var(--ink-500);
}
.rep-delta-row-tag {
font-size: var(--fs-3xs);
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
padding: var(--sp-2) var(--sp-6);
border-radius: var(--radius-xs);
}
.rep-delta-row-tag-fail { background: #fdecea; color: #c2362b; }
.rep-delta-row-reason {
font-size: var(--fs-xs);
color: var(--ink-700);
line-height: 1.5;
padding: var(--sp-6) var(--sp-10);
background: rgba(255,255,255,0.5);
border-radius: var(--radius-sm);
border-left: 2px solid var(--paper-3);
}
.rep-delta-row-foot {
display: flex;
align-items: center;
gap: var(--sp-12);
font-size: var(--fs-2xs);
color: var(--ink-500);
}
.rep-delta-row-when { font-family: var(--font-mono); }
.rep-delta-row-change {
font-size: var(--fs-xs);
color: var(--ink-700);
font-weight: 500;
flex: 1;
}
.rep-delta-row-ev-name {
font-size: var(--fs-sm);
font-weight: 600;
color: var(--ink-900);
}
.rep-delta-row-ev-maps { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.rep-delta-row-ev-nid {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--pink-500);
background: color-mix(in srgb, var(--pink-500) 8%, transparent);
padding: var(--sp-2) var(--sp-8);
border-radius: var(--radius-sm);
}
/* Status pill (in delta rows) */
.rep-statuspill {
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
padding: var(--sp-2) var(--sp-8);
border-radius: var(--radius-sm);
background: var(--paper-2);
color: var(--ink-700);
border: 1px solid var(--paper-3);
}
.rep-status-open { color: #c2362b; background: #fdecea; border-color: #f5cbc6; }
.rep-status-in_progress { color: #a06700; background: #fef3c7; border-color: #f0d585; }
.rep-status-implemented { color: #2f7a4d; background: #e6f3eb; border-color: #c9e3d3; }
.rep-status-verified { color: #1c5934; background: #cce7d5; border-color: #a5d2b5; }
.rep-status-not_applicable { color: var(--ink-500); }
.rep-statuspill-pos { box-shadow: 0 0 0 1.5px rgba(47,122,77,0.18); }
.rep-statuspill-neg { box-shadow: 0 0 0 1.5px rgba(194,54,43,0.18); }
/* Standard-tag (in delta rows) */
.rep-stdtag {
font-size: var(--fs-2xs);
font-weight: 600;
color: var(--ink-900);
background: white;
border: 1px solid var(--paper-3);
padding: var(--sp-2) var(--sp-8);
border-radius: var(--radius-sm);
display: inline-flex;
align-items: center;
gap: var(--sp-6);
}
.rep-stdtag.proj-fam-eu .proj-pill-dot,
.rep-stdtag.proj-fam-iec .proj-pill-dot,
.rep-stdtag.proj-fam-iso .proj-pill-dot,
.rep-stdtag.proj-fam-en .proj-pill-dot,
.rep-stdtag.proj-fam-de .proj-pill-dot { display: inline-block; }
/* ---------- Empty / Loading ---------- */
.rep-empty {
background: white;
border: 1px dashed var(--paper-3);
border-radius: var(--radius-lg);
padding: 36px var(--sp-24);
text-align: center;
}
.rep-empty-h {
font-family: var(--font-serif);
font-size: var(--fs-lg);
color: var(--ink-900);
margin-bottom: var(--sp-4);
}
.rep-empty-d {
font-size: var(--fs-xs);
color: var(--ink-600);
}
/* =====================================================================
* Print stylesheet
* Goal: Reports as clean A4 PDF.
* ===================================================================== */
@media print {
/* Hide chrome */
.rail, .proj-tabs, .topbar, .sb-collapsible, .sidebar,
.rep-back-btn, .rep-export, .rep-overview-recent,
.rep-filterbar, .rep-heatblock-stdtabs,
.proj-header-actions, .proj-rail {
display: none !important;
}
body, html {
background: white !important;
color: black !important;
}
.proj-shell {
display: block !important;
grid-template-columns: none !important;
}
.proj-a, .proj-detail {
padding: 0 !important;
margin: 0 !important;
background: white !important;
}
.proj-tab-body { padding: 0 !important; }
.rep-view, .rep-overview {
padding: 0 !important;
max-width: none !important;
}
/* Avoid splitting cards/rows across pages */
.rep-card, .rep-perstd-card, .rep-delta-group, .rep-gap-std-group, .rep-summary, .rep-cov-top {
break-inside: avoid;
page-break-inside: avoid;
}
.rep-section-h { break-after: avoid; page-break-after: avoid; }
/* Force everything to open in print */
.rep-gap-std-group .rep-gap-std-body,
.rep-gap-sev-group .rep-gap-sev-body,
.rep-delta-group .rep-delta-group-body {
display: block !important;
}
.rep-gap-std-chev, .rep-gap-sev-chev, .rep-delta-group-chev { display: none !important; }
/* Crisper borders */
.rep-perstd-card, .rep-gap-item, .rep-delta-row, .rep-summary, .rep-cov-top-left, .rep-cov-top-right {
box-shadow: none !important;
border-color: #999 !important;
}
/* Suppress hover/interactive states */
.rep-heatmap-cell { cursor: default !important; }
.rep-heatmap-cell:hover { transform: none !important; box-shadow: none !important; }
.rep-link-btn { color: black !important; text-decoration: none !important; }
/* Page breaks per major section */
.rep-view-head { page-break-after: avoid; }
.rep-perstd, .rep-heatblock { page-break-before: auto; }
@page {
size: A4;
margin: 14mm 12mm;
}
}
/* =====================================================================
* End Reports Module
* ===================================================================== */
/* =====================================================================
* B2/B3/B4/B5 — Maßnahmen-Integration in bestehende Module
* (siehe specs/2026-05-massnahmen-integration.md)
* ===================================================================== */
/* ---- B5: Gap-Report „Maßnahme anlegen"-Button ---- */
.rep-link-btn.rep-link-action {
color: var(--pink-500);
border-left: 1px solid var(--paper-3);
padding-left: var(--sp-10);
}
.rep-link-btn.rep-link-action:hover { color: var(--pink-400); }
/* ---- B2: SoA-Drawer Maßnahmen-Sektion ---- */
.soa-actions-sec { }
.soa-drawer-label-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 16px; padding: 0 var(--sp-4);
margin-left: var(--sp-4);
font-family: var(--font-mono);
font-size: var(--fs-3xs); font-weight: 600;
color: var(--ink-700);
background: var(--paper-2);
border: 1px solid var(--paper-3);
border-radius: var(--radius);
}
.soa-actions-empty {
font-size: var(--fs-xs);
color: var(--ink-500);
padding: var(--sp-6) 0;
font-style: italic;
}
.soa-actions-list {
list-style: none; margin: var(--sp-8) 0 0 0; padding: 0;
display: flex; flex-direction: column; gap: var(--sp-2);
}
.soa-action-row {
display: grid;
grid-template-columns: auto 1fr auto auto auto auto;
align-items: center;
gap: var(--sp-10);
padding: var(--sp-8) var(--sp-10);
border: 1px solid var(--paper-3);
border-radius: var(--radius);
background: white;
}
.soa-action-row + .soa-action-row { margin-top: 0; }
.soa-action-name {
font-size: var(--fs-sm);
color: var(--ink-900);
font-weight: 500;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.soa-action-resp {
font-size: var(--fs-2xs);
color: var(--ink-500);
}
.soa-action-due {
font-size: var(--fs-2xs);
color: var(--ink-700);
font-family: var(--font-mono);
}
.soa-mono { font-family: var(--font-mono); }
.soa-link-btn-sm {
font-family: inherit; font-size: var(--fs-2xs);
color: var(--fam-eu);
background: transparent;
border: none;
padding: var(--sp-4) var(--sp-6);
cursor: pointer;
box-shadow: inset 0 -1px 0 transparent;
transition: box-shadow 0.1s;
}
.soa-link-btn-sm:hover { box-shadow: inset 0 -1px 0 var(--fam-eu); }
/* ---- B3: Evidence-Drawer „Entstanden aus Maßnahme"-Block ---- */
.ev-from-action { }
.ev-from-action-link {
display: flex; align-items: center; gap: var(--sp-10);
width: 100%;
padding: var(--sp-10) var(--sp-12);
margin-top: var(--sp-6);
background: var(--paper-1);
border: 1px solid var(--paper-3);
border-radius: var(--radius);
font-family: inherit;
text-align: left;
cursor: pointer;
transition: border-color 0.12s, background 0.12s;
}
.ev-from-action-link:hover {
background: white;
border-color: var(--ink-300);
}
.ev-from-action-name {
flex: 1 1 auto;
font-size: var(--fs-sm);
font-weight: 500;
color: var(--ink-900);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ev-from-action-status { flex-shrink: 0; }
/* ---- B4: Prerequisites — Maßnahmen-Sektion statt improvement_plan ---- */
.preq-actions-sec { }
.preq-field-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 16px; padding: 0 var(--sp-4);
margin-left: var(--sp-4);
font-family: var(--font-mono);
font-size: var(--fs-3xs); font-weight: 600;
color: var(--ink-700);
background: var(--paper-2);
border: 1px solid var(--paper-3);
border-radius: var(--radius);
}
.preq-actions-empty {
font-size: var(--fs-xs);
color: var(--ink-500);
padding: var(--sp-6) 0;
font-style: italic;
}
.preq-actions-list {
list-style: none; margin: var(--sp-8) 0 0 0; padding: 0;
display: flex; flex-direction: column; gap: var(--sp-4);
}
.preq-action-row {
display: grid;
grid-template-columns: auto 1fr auto auto auto;
align-items: center;
gap: var(--sp-10);
padding: var(--sp-8) var(--sp-10);
border: 1px solid var(--paper-3);
border-radius: var(--radius);
background: white;
}
.preq-action-name {
font-size: var(--fs-sm);
color: var(--ink-900);
font-weight: 500;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.preq-action-due {
font-size: var(--fs-2xs);
color: var(--ink-700);
font-family: var(--font-mono);
}
.preq-mono { font-family: var(--font-mono); }
.preq-link-sm {
font-family: inherit; font-size: var(--fs-2xs);
color: var(--fam-eu);
background: transparent;
border: none;
padding: var(--sp-4) var(--sp-6);
cursor: pointer;
box-shadow: inset 0 -1px 0 transparent;
transition: box-shadow 0.1s;
}
.preq-link-sm:hover { box-shadow: inset 0 -1px 0 var(--fam-eu); }
/* ===================================================================== */
/* AUDIT-PAKETE — .pkg-* */
/* ===================================================================== */
.pkg-mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; }
/* App-Shell */
.pkg-create-shell, .pkg-ws-shell {
display: grid;
grid-template-columns: var(--rail-w) 1fr;
min-height: 100vh;
background: var(--shell-bg);
}
.pkg-a {
padding: var(--sp-24) 36px 80px;
max-width: 1320px;
width: 100%;
margin: 0 auto;
font-family: var(--font-sans);
color: var(--ink-900);
}
/* ===== Buttons ===== */
.pkg-btn {
display: inline-flex;
align-items: center;
gap: var(--sp-6);
font-family: var(--font-sans);
font-size: var(--fs-xs);
font-weight: 500;
padding: var(--sp-8) var(--sp-14);
border-radius: var(--radius-md);
border: 1px solid var(--paper-3);
background: white;
color: var(--ink-900);
cursor: pointer;
transition: all 0.12s;
}
.pkg-btn:hover { border-color: var(--ink-400); background: var(--paper); }
.pkg-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pkg-btn-primary { background: var(--navy-900); color: white; border-color: var(--navy-900); }
.pkg-btn-primary:hover { background: var(--navy-800); border-color: var(--navy-800); }
.pkg-btn-primary:disabled { background: var(--ink-300); border-color: var(--ink-300); }
.pkg-btn-ghost { background: transparent; }
.pkg-link {
display: inline-flex;
align-items: center;
gap: var(--sp-4);
background: transparent;
border: none;
font-family: var(--font-sans);
font-size: var(--fs-xs);
font-weight: 500;
color: var(--pink-500);
cursor: pointer;
padding: var(--sp-4) 0;
}
.pkg-link:hover { text-decoration: underline; }
/* ===== Goal-Badge / Status-Pill ===== */
.pkg-goal-badge {
display: inline-flex;
align-items: center;
gap: var(--sp-4);
font-family: var(--font-sans);
font-weight: 600;
border: 1px solid currentColor;
border-radius: 999px;
padding: var(--sp-4) var(--sp-10);
background: white;
letter-spacing: 0.01em;
}
.pkg-goal-badge--sm { font-size: var(--fs-3xs); padding: var(--sp-2) var(--sp-8); }
.pkg-goal-badge--md { font-size: var(--fs-2xs); }
.pkg-goal-badge-lab { line-height: 1; }
.pkg-status-pill {
display: inline-flex;
align-items: center;
gap: var(--sp-4);
font-family: var(--font-sans);
font-size: var(--fs-2xs);
font-weight: 600;
padding: var(--sp-4) var(--sp-8);
border-radius: 999px;
}
.pkg-status-pill--sm { font-size: var(--fs-3xs); padding: var(--sp-2) var(--sp-8); }
.pkg-status-dot {
display: inline-block;
width: 7px; height: 7px;
border-radius: 50%;
}
/* ===== Tab in Project-Detail ===== */
.pkg-tab { padding: 0; }
.pkg-section { margin-top: var(--sp-16); }
.pkg-section + .pkg-section { margin-top: var(--sp-24); }
.pkg-section-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--sp-14);
}
.pkg-section-h {
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--ink-700);
letter-spacing: 0.01em;
text-transform: none;
}
.pkg-section-sub {
font-size: var(--fs-xs);
color: var(--ink-500);
margin-top: var(--sp-2);
}
/* ===== Card Grid ===== */
.pkg-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: var(--sp-16);
}
.pkg-card {
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-lg);
padding: var(--sp-16) var(--sp-20);
display: flex;
flex-direction: column;
gap: var(--sp-12);
box-shadow: var(--shadow-1);
transition: border-color 0.12s, box-shadow 0.12s;
}
.pkg-card:hover { border-color: var(--ink-400); box-shadow: var(--shadow-2); }
.pkg-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-10);
}
.pkg-card-name {
font-family: var(--font-sans);
font-size: var(--fs-lg);
font-weight: 600;
margin: 0;
text-wrap: pretty;
line-height: 1.3;
}
.pkg-card-recipient { font-size: var(--fs-xs); color: var(--ink-500); }
.pkg-card-meta { display: flex; flex-direction: column; gap: var(--sp-4); font-size: var(--fs-xs); }
.pkg-card-meta-lab { color: var(--ink-500); font-size: var(--fs-2xs); text-transform: none; letter-spacing: 0.01em; }
.pkg-card-meta-val { color: var(--ink-900); }
.pkg-card-deadline-rel { color: var(--ink-500); font-family: var(--font-sans); }
.pkg-card-scope { font-size: var(--fs-2xs); color: var(--ink-600); padding-top: var(--sp-8); border-top: 1px dashed var(--paper-3); }
.pkg-card-prog {
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.pkg-card-prog-bar {
height: 6px;
border-radius: var(--radius-xs);
background: var(--paper-2);
overflow: hidden;
}
.pkg-card-prog-fill { height: 100%; background: var(--pink-500); transition: width 0.3s; }
.pkg-card-prog-lab { font-size: var(--fs-2xs); color: var(--ink-500); font-family: var(--font-mono); }
.pkg-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--sp-10);
margin-top: auto;
}
/* ===== Closed rows ===== */
.pkg-section-closed { margin-top: var(--sp-32); padding-top: var(--sp-24); border-top: 1px solid var(--paper-3); }
.pkg-closed-toggle {
display: flex; align-items: center; gap: var(--sp-8);
background: transparent; border: none;
font-family: var(--font-sans); font-size: var(--fs-sm);
color: var(--ink-700); font-weight: 600; cursor: pointer;
letter-spacing: 0.04em;
padding: var(--sp-4) 0;
}
.pkg-closed-toggle-n {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-500);
background: var(--paper-2);
padding: var(--sp-2) var(--sp-6); border-radius: var(--radius-xs);
}
.pkg-closed-row {
display: flex; align-items: center; justify-content: space-between;
padding: var(--sp-10) var(--sp-14); border: 1px solid var(--paper-3); border-radius: var(--radius-md);
background: white; margin-top: var(--sp-8);
font-size: var(--fs-xs);
}
.pkg-closed-row-l { display: flex; align-items: center; gap: var(--sp-10); }
.pkg-closed-row-name { font-weight: 500; }
.pkg-closed-row-when { color: var(--ink-500); font-size: var(--fs-2xs); }
.pkg-closed-row-r { display: flex; align-items: center; gap: var(--sp-12); color: var(--ink-500); font-size: var(--fs-2xs); }
/* ===== Empty / stub ===== */
.pkg-empty, .pkg-stub {
text-align: center;
padding: 56px var(--sp-24);
background: white;
border: 1px dashed var(--paper-3);
border-radius: var(--radius);
}
.pkg-empty-h { font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--sp-6); }
.pkg-empty-sub { font-size: var(--fs-xs); color: var(--ink-500); max-width: 480px; margin: 0 auto; line-height: 1.55; }
/* ===================================================================== */
/* CREATE-Page */
/* ===================================================================== */
.pkg-create { padding-top: var(--sp-24); max-width: 920px; }
.pkg-create-head { margin-bottom: var(--sp-24); }
.pkg-create-back {
display: inline-flex; align-items: center; gap: var(--sp-6);
background: transparent; border: none;
font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--ink-500);
cursor: pointer; padding: var(--sp-4) 0; margin-bottom: var(--sp-14);
}
.pkg-create-back:hover { color: var(--ink-900); }
.pkg-create-h1 {
font-family: var(--font-sans);
font-size: var(--fs-4xl);
font-weight: 600;
margin: 0;
letter-spacing: -0.01em;
}
.pkg-create-sub { color: var(--ink-500); font-size: var(--fs-sm); margin-top: var(--sp-6); }
.pkg-create-section { margin-bottom: 36px; }
.pkg-create-section-head {
display: flex; align-items: flex-start; gap: var(--sp-14);
margin-bottom: var(--sp-16);
}
.pkg-create-step-n {
flex: none;
width: 28px; height: 28px;
border-radius: 50%;
background: var(--navy-900); color: white;
display: grid; place-items: center;
font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-sm);
}
.pkg-create-section-h {
font-family: var(--font-sans);
font-size: var(--fs-xl); font-weight: 600;
margin: 0;
}
.pkg-create-section-sub { font-size: var(--fs-xs); color: var(--ink-500); margin-top: var(--sp-2); line-height: 1.5; }
/* Goal-Picker */
.pkg-goal-picker {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--sp-10);
}
.pkg-goal-pick {
display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8);
background: white;
border: 1.5px solid var(--paper-3);
border-radius: var(--radius);
padding: var(--sp-14) var(--sp-14);
cursor: pointer;
text-align: left;
font-family: var(--font-sans);
transition: all 0.12s;
}
.pkg-goal-pick:hover { border-color: var(--ink-500); }
.pkg-goal-pick--on { border-color: var(--navy-900); background: var(--paper); box-shadow: var(--shadow-1); }
.pkg-goal-pick-icon { display: grid; place-items: center; }
.pkg-goal-pick-lab { font-size: var(--fs-sm); font-weight: 600; }
.pkg-goal-pick-desc { font-size: var(--fs-2xs); color: var(--ink-500); line-height: 1.45; }
/* Form */
.pkg-create-form { display: flex; flex-direction: column; gap: var(--sp-14); }
.pkg-field { display: flex; flex-direction: column; gap: var(--sp-6); flex: 1; }
.pkg-field-row { display: flex; gap: var(--sp-14); }
.pkg-field-lab {
font-family: var(--font-sans);
font-size: var(--fs-2xs); font-weight: 600;
color: var(--ink-600);
letter-spacing: 0.04em;
}
.pkg-input, .pkg-textarea {
font-family: var(--font-sans);
font-size: var(--fs-sm);
padding: var(--sp-8) var(--sp-12);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-md);
color: var(--ink-900);
outline: none;
transition: border-color 0.12s;
}
.pkg-input:focus, .pkg-textarea:focus { border-color: var(--navy-700); }
.pkg-input-date { font-family: var(--font-mono); }
.pkg-textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
/* Scope */
.pkg-scope-block { margin-top: var(--sp-14); }
.pkg-scope-block + .pkg-scope-block { margin-top: var(--sp-20); }
.pkg-scope-block-h {
font-family: var(--font-sans);
font-size: var(--fs-xs); font-weight: 600;
color: var(--ink-700);
letter-spacing: 0.01em; text-transform: none;
margin-bottom: var(--sp-10);
}
.pkg-scope-list { display: flex; flex-direction: column; gap: var(--sp-6); }
.pkg-scope-empty { font-size: var(--fs-xs); color: var(--ink-500); padding: var(--sp-10) var(--sp-14); background: var(--paper-2); border-radius: var(--radius-md); }
.pkg-scope-note { font-size: var(--fs-2xs); color: var(--ink-500); margin-top: var(--sp-10); font-style: italic; }
.pkg-check-row {
display: flex; align-items: center; gap: var(--sp-10);
padding: var(--sp-8) var(--sp-12);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-md);
font-size: var(--fs-sm);
cursor: pointer;
transition: all 0.1s;
}
.pkg-check-row:hover { border-color: var(--ink-400); }
.pkg-check-row--on { background: var(--paper); border-color: var(--navy-700); }
.pkg-check-row input[type=checkbox] { accent-color: var(--navy-900); }
.pkg-check-name { font-weight: 500; }
.pkg-check-profile { font-size: var(--fs-2xs); color: var(--ink-500); padding: 1px var(--sp-6); background: var(--paper-2); border-radius: var(--radius-xs); }
.pkg-check-hint { margin-left: auto; font-size: var(--fs-2xs); color: var(--ink-500); font-style: italic; }
.pkg-check-status { font-size: var(--fs-2xs); color: var(--ink-500); margin-left: auto; }
.pkg-create-foot {
display: flex; justify-content: flex-end; gap: var(--sp-12);
margin-top: var(--sp-14);
padding-top: var(--sp-16);
border-top: 1px solid var(--paper-3);
}
/* ===================================================================== */
/* WORKSPACE */
/* ===================================================================== */
.pkg-ws { padding-top: var(--sp-24); }
.pkg-ws-head {
position: sticky;
top: 0;
z-index: 10;
background: var(--shell-bg);
padding-bottom: var(--sp-12);
margin-bottom: var(--sp-16);
border-bottom: 1px solid var(--paper-3);
}
.pkg-ws-head-row1 { display: flex; align-items: center; gap: var(--sp-10); margin: var(--sp-8) 0 var(--sp-10); }
.pkg-ws-readonly {
display: inline-flex; align-items: center; gap: var(--sp-4);
font-size: var(--fs-2xs); color: var(--ink-500);
padding: var(--sp-4) var(--sp-8); border-radius: 999px; background: var(--paper-2);
font-weight: 600; letter-spacing: 0.04em;
}
.pkg-ws-title {
font-family: var(--font-sans);
font-size: var(--fs-3xl); font-weight: 600;
margin: 0;
letter-spacing: -0.01em;
}
.pkg-ws-meta {
display: flex; gap: var(--sp-20); flex-wrap: wrap;
margin-top: var(--sp-8);
font-size: var(--fs-xs); color: var(--ink-600);
}
.pkg-ws-meta strong { color: var(--ink-900); font-weight: 600; }
.pkg-ws-meta-rel { color: var(--ink-500); }
.pkg-ws-actions-bar { display: flex; gap: var(--sp-8); margin-top: var(--sp-14); }
.pkg-status-menu-wrap { position: relative; }
.pkg-status-menu {
position: absolute; top: 100%; left: 0; margin-top: var(--sp-4);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
box-shadow: var(--shadow-2);
z-index: 20;
min-width: 200px;
padding: var(--sp-4);
}
.pkg-status-menu-item {
display: flex; align-items: center; gap: var(--sp-8);
background: transparent; border: none;
font-family: var(--font-sans); font-size: var(--fs-xs);
padding: var(--sp-8) var(--sp-12); width: 100%; text-align: left;
border-radius: var(--radius-sm);
cursor: pointer;
}
.pkg-status-menu-item:hover { background: var(--paper); }
.pkg-status-menu-item--cur { font-weight: 600; }
/* Sub-Tabs */
.pkg-ws-subtabs {
display: flex;
gap: var(--sp-4);
margin-top: var(--sp-16);
border-bottom: 0;
}
.pkg-ws-subtab {
background: transparent;
border: none;
border-bottom: 2px solid transparent;
font-family: var(--font-sans);
font-size: var(--fs-sm); font-weight: 500;
color: var(--ink-500);
padding: var(--sp-8) var(--sp-14);
cursor: pointer;
margin-bottom: -1px;
}
.pkg-ws-subtab:hover { color: var(--ink-900); }
.pkg-ws-subtab--on { color: var(--navy-900); border-bottom-color: var(--pink-500); font-weight: 600; }
.pkg-ws-body { padding-top: var(--sp-16); }
/* Overview */
.pkg-ov-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--sp-16);
}
.pkg-ov-card {
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius);
padding: var(--sp-16) var(--sp-16);
display: flex;
flex-direction: column;
gap: var(--sp-10);
cursor: pointer;
transition: all 0.12s;
}
.pkg-ov-card:hover { border-color: var(--ink-400); box-shadow: var(--shadow-1); }
.pkg-ov-card-h {
font-family: var(--font-sans);
font-size: var(--fs-2xs); font-weight: 600;
color: var(--ink-500);
letter-spacing: 0.01em; text-transform: none;
}
.pkg-ov-card-body { display: flex; gap: var(--sp-16); align-items: center; }
.pkg-ov-card-body--stat { flex-direction: column; align-items: flex-start; gap: var(--sp-8); }
.pkg-ov-donut { flex: none; }
.pkg-ov-big {
font-family: var(--font-sans);
font-size: 36px; font-weight: 600;
line-height: 1;
letter-spacing: -0.02em;
}
.pkg-ov-big-lab { font-size: var(--fs-2xs); color: var(--ink-500); margin-top: -4px; }
.pkg-ov-stat { list-style: none; padding: 0; margin: 0; font-size: var(--fs-xs); color: var(--ink-600); display: flex; flex-direction: column; gap: var(--sp-4); }
.pkg-ov-stat-n { font-family: var(--font-mono); font-weight: 600; color: var(--ink-900); margin-right: var(--sp-4); }
.pkg-ov-stat-n--red { color: #dc2626; }
.pkg-ov-card-foot { font-size: var(--fs-2xs); color: var(--pink-500); font-weight: 500; margin-top: auto; }
.pkg-ov-warn { font-size: var(--fs-xs); color: #dc2626; display: inline-flex; align-items: center; gap: var(--sp-4); font-weight: 500; }
.pkg-ov-ok { font-size: var(--fs-xs); color: #16a34a; font-weight: 500; }
.pkg-ov-faded { font-size: var(--fs-xs); color: var(--ink-500); }
.pkg-risk-box {
margin-top: var(--sp-16);
border: 1px solid #fecaca;
background: #fef2f2;
border-radius: var(--radius);
padding: var(--sp-14) var(--sp-16);
}
.pkg-risk-h {
display: flex; align-items: center; gap: var(--sp-6);
font-weight: 600; font-size: var(--fs-sm); color: #b91c1c;
margin-bottom: var(--sp-8);
}
.pkg-risk-list { list-style: disc; padding-left: var(--sp-20); margin: 0; font-size: var(--fs-xs); color: #991b1b; }
.pkg-risk-list li { line-height: 1.6; }
.pkg-ws-desc { margin-top: var(--sp-16); background: white; border: 1px solid var(--paper-3); border-radius: var(--radius); padding: var(--sp-14) var(--sp-16); }
.pkg-ws-desc-h { font-size: var(--fs-2xs); font-weight: 600; color: var(--ink-500); text-transform: none; letter-spacing: 0.01em; margin-bottom: var(--sp-6); }
.pkg-ws-desc p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-800); }
/* Actions sub-tab */
.pkg-ws-actions-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-14); }
.pkg-ws-actions-h { font-size: var(--fs-sm); color: var(--ink-600); }
.pkg-ws-actions-controls { display: flex; align-items: center; gap: var(--sp-10); }
.pkg-view-switch { display: inline-flex; border: 1px solid var(--paper-3); border-radius: var(--radius-md); overflow: hidden; }
.pkg-view-switch-b {
background: white; border: none; padding: var(--sp-8) var(--sp-12);
font-family: var(--font-sans); font-size: var(--fs-xs); cursor: pointer;
color: var(--ink-600);
}
.pkg-view-switch-b + .pkg-view-switch-b { border-left: 1px solid var(--paper-3); }
.pkg-view-switch-b--on { background: var(--navy-900); color: white; }
.pkg-pentest-banner {
background: #fef2f2; border: 1px solid #fecaca;
border-radius: var(--radius); padding: var(--sp-12) var(--sp-16); margin-bottom: var(--sp-14);
}
.pkg-pentest-banner-h { font-weight: 600; font-size: var(--fs-sm); color: #991b1b; }
.pkg-pentest-banner-sub { font-size: var(--fs-xs); color: #b91c1c; margin-top: var(--sp-2); font-family: var(--font-mono); }
/* Requirements sub-tab */
.pkg-ws-reqs-head { font-size: var(--fs-xs); color: var(--ink-500); margin-bottom: var(--sp-14); }
.pkg-req-std-block { margin-bottom: var(--sp-20); }
.pkg-req-std-h {
font-family: var(--font-sans);
font-size: var(--fs-md); font-weight: 600;
margin-bottom: var(--sp-8);
display: inline-flex; align-items: center; gap: var(--sp-8);
}
.pkg-req-std-n {
font-family: var(--font-mono); font-size: var(--fs-2xs);
color: var(--ink-500);
background: var(--paper-2); padding: var(--sp-2) var(--sp-6); border-radius: var(--radius-xs);
}
.pkg-req-table {
width: 100%; border-collapse: collapse;
background: white; border: 1px solid var(--paper-3); border-radius: var(--radius);
overflow: hidden;
font-size: var(--fs-xs);
}
.pkg-req-table th, .pkg-req-table td {
text-align: left;
padding: var(--sp-8) var(--sp-12);
border-bottom: 1px solid var(--paper-3);
}
.pkg-req-table th {
background: var(--paper);
font-weight: 600; font-size: var(--fs-2xs); color: var(--ink-600);
text-transform: none; letter-spacing: 0.01em;
}
.pkg-req-table tr:last-child td { border-bottom: none; }
.pkg-req-pill {
display: inline-block;
padding: var(--sp-2) var(--sp-8);
border-radius: 999px;
font-size: var(--fs-2xs); font-weight: 500;
}
.pkg-ws-reqs-note { font-size: var(--fs-2xs); color: var(--ink-500); margin-top: var(--sp-10); font-style: italic; }
/* Gaps */
.pkg-ws-gaps-head { font-size: var(--fs-xs); color: var(--ink-500); margin-bottom: var(--sp-14); }
.pkg-gap-summary { display: flex; gap: var(--sp-14); margin-bottom: var(--sp-20); }
.pkg-gap-summary-card {
background: white; border: 1px solid var(--paper-3);
border-radius: var(--radius); padding: var(--sp-14) var(--sp-20);
min-width: 160px;
}
.pkg-gap-summary-card--red { background: #fef2f2; border-color: #fecaca; }
.pkg-gap-summary-n { font-family: var(--font-sans); font-size: var(--fs-3xl); font-weight: 600; line-height: 1; }
.pkg-gap-summary-card--red .pkg-gap-summary-n { color: #b91c1c; }
.pkg-gap-summary-lab { font-size: var(--fs-2xs); color: var(--ink-500); margin-top: var(--sp-4); }
.pkg-gap-block { margin-top: var(--sp-16); }
.pkg-gap-block-h { font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-8); }
.pkg-gap-ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-8); }
.pkg-gap-row {
display: flex; align-items: center; gap: var(--sp-10);
background: white; border: 1px solid var(--paper-3); border-left: 3px solid #dc2626;
padding: var(--sp-10) var(--sp-14); border-radius: var(--radius-md);
font-size: var(--fs-xs);
}
.pkg-gap-row-name { font-weight: 500; flex: 1; }
.pkg-gap-row-reason { font-size: var(--fs-2xs); color: #991b1b; font-style: italic; }
/* Evidence */
.pkg-ws-ev-head { font-size: var(--fs-xs); color: var(--ink-500); margin-bottom: var(--sp-12); }
.pkg-ev-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-6); }
.pkg-ev-row {
display: flex; align-items: center; gap: var(--sp-10);
background: white; border: 1px solid var(--paper-3);
padding: var(--sp-10) var(--sp-14); border-radius: var(--radius-md);
font-size: var(--fs-xs);
}
.pkg-ev-kind { font-size: var(--fs-3xs); padding: var(--sp-2) var(--sp-6); border-radius: var(--radius-xs); font-weight: 600; }
.pkg-ev-kind[data-kind="implementation"] { background: #dbeafe; color: #1e40af; }
.pkg-ev-kind[data-kind="verification"] { background: #dcfce7; color: #166534; }
.pkg-ev-name { font-weight: 500; flex: 1; }
.pkg-ev-maps { color: var(--ink-500); font-size: var(--fs-2xs); }
/* Snapshot */
.pkg-ws-snap { padding-top: var(--sp-4); }
.pkg-ws-snap-empty { text-align: center; padding: 60px var(--sp-24); background: white; border: 1px dashed var(--paper-3); border-radius: var(--radius-lg); }
.pkg-snap-empty-icon { color: var(--ink-400); margin-bottom: var(--sp-14); }
.pkg-snap-empty-h { font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--sp-8); }
.pkg-snap-empty-sub { font-size: var(--fs-sm); color: var(--ink-500); max-width: 520px; margin: 0 auto; line-height: 1.55; }
.pkg-snap-frozen-banner {
display: inline-flex; align-items: center; gap: var(--sp-6);
background: var(--paper-2); border: 1px solid var(--paper-3); border-radius: var(--radius-md);
padding: var(--sp-8) var(--sp-14); font-size: var(--fs-xs); color: var(--ink-700);
margin-bottom: var(--sp-16);
}
.pkg-snap-detail { background: white; border: 1px solid var(--paper-3); border-radius: var(--radius); padding: var(--sp-20) var(--sp-24); }
.pkg-snap-detail-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--sp-16);
padding-bottom: var(--sp-16); border-bottom: 1px solid var(--paper-3);
}
.pkg-snap-lab { font-size: var(--fs-2xs); color: var(--ink-500); font-weight: 600; text-transform: none; letter-spacing: 0.01em; margin-bottom: var(--sp-4); }
.pkg-snap-val { font-size: var(--fs-sm); }
.pkg-snap-role { color: var(--ink-500); font-weight: 400; }
.pkg-snap-frozen { padding-top: var(--sp-16); }
.pkg-snap-frozen-h { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; margin: 0 0 var(--sp-10); letter-spacing: 0.01em; text-transform: none; color: var(--ink-700); }
.pkg-snap-frozen-ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-6); font-size: var(--fs-sm); }
.pkg-snap-actions { display: flex; gap: var(--sp-10); flex-wrap: wrap; margin-top: var(--sp-20); padding-top: var(--sp-16); border-top: 1px solid var(--paper-3); }
/* Modal */
.pkg-modal-overlay {
position: fixed; inset: 0;
background: color-mix(in srgb, var(--navy-900) 40%, transparent);
z-index: 1000;
display: grid; place-items: center;
padding: var(--sp-24);
}
.pkg-modal {
background: white;
border-radius: var(--radius-lg);
width: 100%; max-width: 580px;
box-shadow: var(--shadow-3);
display: flex; flex-direction: column;
max-height: 90vh; overflow: auto;
}
.pkg-modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: var(--sp-16) var(--sp-20);
border-bottom: 1px solid var(--paper-3);
}
.pkg-modal-head h3 { font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: 600; margin: 0; }
.pkg-modal-close {
background: transparent; border: none; cursor: pointer;
color: var(--ink-500); padding: var(--sp-4); border-radius: var(--radius-sm);
}
.pkg-modal-close:hover { background: var(--paper); color: var(--ink-900); }
.pkg-modal-warn {
display: flex; align-items: center; gap: var(--sp-8);
margin: var(--sp-14) var(--sp-20) 0;
padding: var(--sp-10) var(--sp-14); border-radius: var(--radius-md);
background: #fef3c7; border: 1px solid #fcd34d;
font-size: var(--fs-xs); color: #92400e;
}
.pkg-modal-state { padding: var(--sp-14) var(--sp-20) var(--sp-4); }
.pkg-modal-state-h, .pkg-modal-sigs-h { font-size: var(--fs-2xs); font-weight: 600; color: var(--ink-500); text-transform: none; letter-spacing: 0.01em; margin-bottom: var(--sp-8); }
.pkg-modal-state ul { list-style: disc; margin: 0; padding-left: var(--sp-20); font-size: var(--fs-xs); color: var(--ink-700); line-height: 1.7; }
.pkg-modal-sigs { padding: var(--sp-14) var(--sp-20); display: flex; flex-direction: column; gap: var(--sp-12); }
.pkg-modal-foot {
display: flex; justify-content: flex-end; gap: var(--sp-10);
padding: var(--sp-16) var(--sp-20);
border-top: 1px solid var(--paper-3);
background: var(--paper);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
/* ===== Project-Detail Tab-Badge passthrough ===== */
/* ===== Frontmatter (meta_body Markdown rendered after the cover) ===== */
.frontmatter {
margin: var(--sp-24) auto var(--sp-32);
max-width: 760px;
padding: var(--sp-24) var(--sp-32);
background: white;
border: 1px solid var(--paper-3);
border-radius: var(--radius-lg);
font-family: var(--font-sans);
font-size: var(--fs-md);
line-height: 1.6;
color: var(--ink-800);
}
.frontmatter .md-h {
font-family: var(--font-serif, var(--font-sans));
font-weight: 600;
color: var(--ink-900);
margin: var(--sp-16) 0 var(--sp-8);
line-height: 1.25;
}
.frontmatter h2.md-h { font-size: var(--fs-xl); }
.frontmatter h3.md-h { font-size: var(--fs-lg); color: var(--ink-700); }
.frontmatter h4.md-h { font-size: var(--fs-md); text-transform: none; letter-spacing: 0.01em; color: var(--ink-500); }
.frontmatter .md-h:first-child { margin-top: 0; }
.frontmatter .md-p { margin: 0 0 var(--sp-12); }
.frontmatter .md-ul { margin: 0 0 var(--sp-12) 1.2em; padding: 0; }
.frontmatter .md-ul li { margin-bottom: var(--sp-4); }
.frontmatter .md-table {
width: 100%;
border-collapse: collapse;
margin: var(--sp-12) 0 var(--sp-16);
font-size: var(--fs-sm);
}
.frontmatter .md-table th,
.frontmatter .md-table td {
border: 1px solid var(--paper-3);
padding: var(--sp-8) var(--sp-12);
text-align: left;
vertical-align: top;
}
.frontmatter .md-table th {
background: var(--paper-1, #f8f6f1);
font-weight: 600;
color: var(--ink-700);
font-size: var(--fs-xs);
}
.frontmatter .md-table td:first-child { white-space: nowrap; color: var(--ink-700); font-weight: 500; }
.frontmatter code {
font-family: var(--font-mono);
font-size: 0.92em;
background: var(--paper-1, #f8f6f1);
padding: 1px var(--sp-4);
border-radius: var(--radius-sm);
}
/* ===== Record-Zusatzfelder (rationale/guidance/category/...) ===== */
.rec-extras { margin-top: var(--sp-10); }
.rec-badges { display: flex; gap: var(--sp-6); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-8); }
.rec-cat {
display: inline-block;
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
padding: var(--sp-2) var(--sp-8);
border-radius: var(--radius-sm);
background: var(--paper-1, #f3eee5);
color: var(--ink-700);
border: 1px solid var(--paper-3);
}
.rec-cat-technical { background: rgba(74, 146, 200, 0.12); color: var(--fam-eu); border-color: rgba(74, 146, 200, 0.3); }
.rec-cat-organizational { background: rgba(74, 146, 100, 0.12); color: #4a9264; border-color: rgba(74, 146, 100, 0.3); }
.rec-cat-process { background: rgba(176, 138, 60, 0.12); color: #b08a3c; border-color: rgba(176, 138, 60, 0.3); }
.rec-changenote {
font-family: var(--font-sans);
font-size: var(--fs-2xs);
color: var(--pink-500);
cursor: help;
}
.rec-pageref {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-500);
}
.rec-extra {
margin-top: var(--sp-8);
font-family: var(--font-sans);
font-size: var(--fs-sm);
background: var(--paper-1, #f8f6f1);
border-left: 3px solid var(--paper-3);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
padding: var(--sp-6) var(--sp-12) var(--sp-8);
}
.rec-extra summary {
cursor: pointer;
font-weight: 600;
font-size: var(--fs-xs);
text-transform: none;
letter-spacing: 0.01em;
color: var(--ink-700);
list-style: none;
padding: var(--sp-4) 0;
}
.rec-extra summary::-webkit-details-marker { display: none; }
.rec-extra summary::before {
content: '▸';
display: inline-block;
width: 1em;
color: var(--ink-500);
transition: transform 0.15s;
}
.rec-extra[open] summary::before { transform: rotate(90deg); }
.rec-extra-rationale { border-left-color: rgba(74, 146, 100, 0.5); }
.rec-extra-guidance { border-left-color: rgba(176, 138, 60, 0.5); }
.rec-extra-body {
margin-top: var(--sp-6);
line-height: 1.55;
color: var(--ink-700);
white-space: pre-wrap;
}
.rec-ext-ref {
margin-top: var(--sp-8);
font-size: var(--fs-xs);
color: var(--ink-500);
font-family: var(--font-sans);
}
.rec-ext-ref-lab { font-weight: 600; color: var(--ink-700); }
.rec-figure {
margin: var(--sp-12) 0;
padding: 0;
text-align: center;
}
.rec-figure img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.rec-figure figcaption { font-size: var(--fs-xs); color: var(--ink-500); margin-top: var(--sp-6); }
/* ===== Edition / Status Badges & Pillen =====
Verwendung:
- Body-Badge an einem Record-Eintrag (z.B. neben Anchor-ID):
DRAFT (ENQ)
CD 2025-10
VOID
- Pille fuer Topbar-Filter / Section-Listen:
Active
Draft
Draft CD
Aktive Filter-Pille bekommt zusaetzlich .is-active (volle Saettigung). */
.badge {
display: inline-flex;
align-items: center;
gap: var(--sp-4);
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 700;
letter-spacing: 0.01em;
text-transform: none;
padding: var(--sp-2) var(--sp-8);
border-radius: var(--radius-sm);
background: var(--paper-2);
color: var(--ink-700);
border: 1px solid var(--paper-3);
white-space: nowrap;
line-height: 1.4;
}
.badge-active {
background: var(--badge-active-bg);
color: var(--badge-active);
border-color: rgba(45, 108, 223, 0.28);
}
.badge-draft {
background: var(--badge-draft-bg);
color: var(--badge-draft);
border-color: rgba(184, 116, 10, 0.32);
}
.badge-draft-cd {
background: var(--badge-draft-cd-bg);
color: var(--badge-draft-cd);
border-color: rgba(12, 84, 96, 0.32);
}
.badge-void {
background: var(--badge-void-bg);
color: var(--badge-void);
border-color: rgba(138, 109, 109, 0.32);
text-decoration: line-through;
text-decoration-thickness: 1px;
}
.status-pill {
display: inline-flex;
align-items: center;
gap: var(--sp-4);
font-family: var(--font-sans);
font-size: var(--fs-2xs);
font-weight: 600;
letter-spacing: 0.01em;
padding: var(--sp-4) var(--sp-8) var(--sp-4) var(--sp-8);
border-radius: 999px;
background: var(--paper-2);
color: var(--ink-600);
border: 1px solid var(--paper-3);
cursor: pointer;
user-select: none;
transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.status-pill::before {
content: '';
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
opacity: 0.55;
}
.status-pill:hover { background: white; color: var(--ink-800); }
.status-pill.active {
color: var(--badge-active);
border-color: rgba(45, 108, 223, 0.28);
background: var(--badge-active-bg);
}
.status-pill.draft {
color: var(--badge-draft);
border-color: rgba(184, 116, 10, 0.32);
background: var(--badge-draft-bg);
}
.status-pill.draft-cd {
color: var(--badge-draft-cd);
border-color: rgba(12, 84, 96, 0.32);
background: var(--badge-draft-cd-bg);
}
.status-pill.void {
color: var(--badge-void);
border-color: rgba(138, 109, 109, 0.32);
background: var(--badge-void-bg);
}
/* Aktiver / eingeschalteter Filter-Zustand: deutlicher hervorgehoben */
.status-pill.is-active {
box-shadow: 0 0 0 1px currentColor inset, 0 1px 2px color-mix(in srgb, var(--navy-900) 8%, transparent);
}
.status-pill.is-active::before { opacity: 1; }
/* Inaktiv: Pille gedimmt (Filter nicht gesetzt) */
.status-pill.is-off {
background: var(--paper);
color: var(--ink-500);
border-color: var(--paper-3);
}
.status-pill.is-off::before { opacity: 0.35; }
/* Container fuer die drei Filter-Pillen in der Topbar */
.topbar-status-filter {
display: inline-flex;
align-items: center;
gap: var(--sp-6);
padding: 0 var(--sp-4);
border-left: 1px solid var(--paper-3);
border-right: 1px solid var(--paper-3);
margin: 0 var(--sp-4);
height: 28px;
}
.topbar-status-filter .status-filter-label {
font-family: var(--font-sans);
font-size: var(--fs-3xs);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--ink-500);
margin-right: var(--sp-2);
}
/* ===== Print-Stylesheet ===== */
@media print {
html, body { height: auto; overflow: visible; background: white; }
.rail, .sidebar, .topbar, .companion-toggle, .sidebar-toggle, .proto-note,
.popover, .cmd-k, .cs-shell, .filter-bar, .sticky-bar,
.companion-action, .reader-progress, .progress-bar {
display: none !important;
}
.app { display: block !important; grid-template-columns: none !important; height: auto !important; overflow: visible !important; }
.main { overflow: visible !important; height: auto !important; }
.reader-scroll { overflow: visible !important; }
.reader, .reader-scroll, .frontmatter { max-width: none !important; padding: 0 1cm !important; }
.article, .recital-box {
page-break-inside: avoid;
break-inside: avoid;
box-shadow: none !important;
border: 1px solid #ddd !important;
margin-bottom: 12pt;
}
.article.collapsed, .recital-box.collapsed { display: block; }
.article.collapsed .article-body, .recital-box.collapsed .recital-body { display: block !important; }
.rec-extra { background: white !important; border-left-width: 2px; }
.rec-extra[open] { /* keep open for print regardless of UI state */ }
details:not([open]) > *:not(summary) { display: block; } /* expand all details for print */
a { color: black; text-decoration: underline; }
.cover { background: white; border: none; }
.md-table { page-break-inside: avoid; }
}
/* ===== Library (scroll fix — html/body are overflow:hidden) ===== */
.lib-shell {
height: 100vh;
overflow-y: auto;
}
.hub-shell {
height: 100vh;
overflow-y: auto;
}
/* ===== Generic-Reader: kompakte Definition-Items (z.B. ISO 21434 3.1.x) ===== */
.article.generic-section.is-definition {
background: transparent;
border: none;
border-top: 1px dashed var(--paper-3);
box-shadow: none;
padding: var(--sp-6) var(--sp-16);
margin: 0;
border-radius: 0;
}
.article.generic-section.is-definition .article-head {
padding: var(--sp-4) 0;
align-items: baseline;
gap: var(--sp-8);
}
.article.generic-section.is-definition .article-id {
font-size: var(--fs-2xs);
color: var(--ink-500);
min-width: 48px;
}
.article.generic-section.is-definition .article-title {
font-family: var(--font-serif);
font-size: var(--fs-md);
font-weight: 600;
color: var(--ink-900);
margin: 0;
}
.article.generic-section.is-definition .rec-cat {
display: none;
}
.article.generic-section.is-definition .art-chev {
display: none;
}
.article.generic-section.is-definition .article-flat-body {
padding: var(--sp-2) 0 var(--sp-6) 56px;
font-size: var(--fs-sm);
line-height: 1.5;
color: var(--ink-700);
}
/* ===== EUR-Lex correlation tables (e.g. Machinery Annex XII) ===== */
table.eurlex-correlation {
width: 100%;
border-collapse: collapse;
margin: var(--sp-16) 0;
font-family: var(--font-sans);
font-size: var(--fs-sm);
color: var(--ink-800);
}
table.eurlex-correlation td {
border: 1px solid var(--paper-3);
padding: var(--sp-8) var(--sp-12);
vertical-align: top;
line-height: 1.45;
}
table.eurlex-correlation tr:first-child td {
background: var(--paper-2);
font-weight: 600;
color: var(--ink-900);
}
table.eurlex-correlation tr:nth-child(even):not(:first-child) td {
background: rgba(0,0,0,0.015);
}
/* =====================================================================
Evidence — File-Upload + Drawer Datei-Liste (Phase A / app.db)
===================================================================== */
.ev-drawer-files .ev-file-list {
list-style: none;
margin: var(--sp-6) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.ev-file-row {
display: flex;
align-items: center;
gap: var(--sp-10);
padding: var(--sp-6) var(--sp-8);
border: 1px solid rgba(0,0,0,.08);
border-radius: var(--radius-md);
background: var(--paper-2, #f6f4ef);
font-size: var(--fs-xs);
}
.ev-file-link {
display: inline-flex;
align-items: center;
gap: var(--sp-6);
color: var(--ink-900);
text-decoration: none;
font-weight: 500;
flex: 1 1 auto;
min-width: 0;
}
.ev-file-link:hover { color: var(--pink-500); }
.ev-file-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ev-file-meta {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--ink-500);
flex: 0 0 auto;
}
.ev-file-del {
border: none;
background: transparent;
color: var(--ink-500);
cursor: pointer;
padding: var(--sp-4);
border-radius: var(--radius-sm);
}
.ev-file-del:hover { color: var(--fam-de); background: rgba(208,74,74,.08); }
.ev-file-upload-btn {
display: inline-flex;
align-items: center;
gap: var(--sp-6);
margin-top: var(--sp-8);
padding: var(--sp-6) var(--sp-10);
border: 1px dashed rgba(0,0,0,.18);
border-radius: var(--radius-md);
font-size: var(--fs-xs);
color: var(--ink-700, #333);
cursor: pointer;
background: transparent;
transition: border-color .12s ease, color .12s ease;
}
.ev-file-upload-btn:hover {
border-color: var(--pink-500);
color: var(--pink-500);
}
/* Create-Modal — Drag&Drop-Zone */
.ev-create-file-drop {
border: 1.5px dashed rgba(0,0,0,.18);
border-radius: var(--radius);
padding: var(--sp-14);
text-align: center;
color: var(--ink-500);
font-size: var(--fs-xs);
cursor: pointer;
transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.ev-create-file-drop:hover,
.ev-create-file-drop.dragover {
border-color: var(--pink-500);
background: color-mix(in srgb, var(--pink-500) 4%, transparent);
color: var(--pink-500);
}
.ev-create-file-drop-t {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-6);
font-weight: 500;
}
.ev-create-file-drop-h {
margin-top: var(--sp-4);
font-size: var(--fs-2xs);
color: var(--ink-500);
}
.ev-create-file-picked {
margin-top: var(--sp-8);
display: inline-flex;
align-items: center;
gap: var(--sp-6);
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-900);
}
.ev-create-file-picked-x {
background: transparent;
border: none;
color: var(--ink-500);
cursor: pointer;
padding: var(--sp-2);
}
.ev-create-file-picked-x:hover { color: var(--fam-de); }
.ev-create-file-error {
margin-top: var(--sp-6);
color: var(--fam-de);
font-size: var(--fs-2xs);
}
/* Library — Loading / Error banner */
.ev-page-error {
margin: var(--sp-12) 0;
padding: var(--sp-10) var(--sp-14);
border-radius: var(--radius);
border: 1px solid rgba(208,74,74,.3);
background: rgba(208,74,74,.06);
color: var(--fam-de);
font-size: var(--fs-sm);
}
.ev-grid-loading {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--sp-14);
}
.ev-card-skeleton {
height: 168px;
border-radius: var(--radius-lg);
background: linear-gradient(90deg,
rgba(0,0,0,.05) 0%,
rgba(0,0,0,.08) 50%,
rgba(0,0,0,.05) 100%);
background-size: 200% 100%;
animation: ev-skel-pulse 1.6s ease-in-out infinite;
}
@keyframes ev-skel-pulse {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* Rail-User badge — zeigt me.display_name unten in der GlobalRail */
.rail-user {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-4);
padding: var(--sp-6) 0;
margin-top: var(--sp-4);
color: rgba(255,255,255,.65);
font-size: var(--fs-3xs);
font-family: var(--font-sans);
text-align: center;
max-width: 56px;
word-break: break-word;
line-height: 1.15;
}
.rail-user-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(255,255,255,.10);
color: rgba(255,255,255,.92);
display: flex; align-items: center; justify-content: center;
font-size: var(--fs-2xs);
font-weight: 600;
}
.rail-user-name {
font-size: var(--fs-3xs);
opacity: .8;
letter-spacing: .02em;
}
/* ============================================================
EN 18031 reader (-1, -2, -3) — radio-equipment baselines
Structure: Overview · Terms · Method · Requirements (by cat) · Annexes
============================================================ */
/* Sidebar — TOC links and category list */
.en18031-sb-link {
padding: var(--sp-6) var(--sp-10);
font-size: var(--fs-xs);
color: var(--ink-700);
cursor: pointer;
border-radius: var(--radius-sm);
}
.en18031-sb-link:hover { background: var(--paper-3); color: var(--ink-900); }
.en18031-sb-link.active { background: var(--paper-3); color: var(--ink-900); font-weight: 500; }
.en18031-sb-cat {
display: grid;
grid-template-columns: 38px 1fr auto;
align-items: center;
gap: var(--sp-8);
padding: var(--sp-6) var(--sp-10);
font-size: var(--fs-xs);
color: var(--ink-700);
cursor: pointer;
border-radius: var(--radius-sm);
}
.en18031-sb-cat:hover { background: var(--paper-3); color: var(--ink-900); }
.en18031-sb-cat.active { background: var(--paper-3); color: var(--ink-900); }
.en18031-sb-cat-key {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 600;
color: var(--fam-en, #8b5cf6);
letter-spacing: .04em;
}
.en18031-sb-cat-label { font-size: var(--fs-xs); }
.en18031-sb-cat-count { font-size: var(--fs-3xs); color: var(--ink-500); font-variant-numeric: tabular-nums; }
/* Scroll container — base shared with other readers; ensure padding */
.reader-scroll { padding: 0; }
/* Cover */
.en18031-cover {
padding: 48px 56px var(--sp-32);
border-bottom: 1px solid var(--paper-3);
}
.en18031-cover-tag {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
letter-spacing: 0.01em;
color: var(--fam-en, #8b5cf6);
text-transform: none;
margin-bottom: var(--sp-8);
}
.en18031-cover-title {
font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
font-size: var(--fs-4xl);
line-height: 1.15;
color: var(--ink-900);
margin: 0 0 var(--sp-8);
font-weight: 600;
}
.en18031-cover-sub {
color: var(--ink-600);
font-size: var(--fs-md);
margin-bottom: var(--sp-16);
}
.en18031-cover-stats {
display: flex; gap: var(--sp-20);
font-size: var(--fs-xs); color: var(--ink-600);
font-variant-numeric: tabular-nums;
}
.en18031-cover-stats b { color: var(--ink-900); margin-right: var(--sp-4); }
/* Group headings */
.en18031-group { padding: var(--sp-32) 56px; border-bottom: 1px solid var(--paper-3); }
.en18031-group-h {
font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
font-size: var(--fs-2xl);
font-weight: 600;
color: var(--ink-900);
margin: 0 0 var(--sp-16);
letter-spacing: -0.01em;
}
/* Section card (overview, annex) */
.en18031-section {
border: 1px solid var(--paper-3);
border-radius: var(--radius);
padding: var(--sp-16) var(--sp-20);
background: white;
margin-bottom: var(--sp-12);
}
.en18031-section-head {
display: flex; align-items: baseline; gap: var(--sp-10);
margin-bottom: var(--sp-8);
}
.en18031-section-badge {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--fam-en, #8b5cf6);
background: var(--fam-en-soft, rgba(139,92,246,0.08));
border: 1px solid var(--fam-en-line, rgba(139,92,246,0.2));
padding: var(--sp-2) var(--sp-8);
border-radius: var(--radius-sm);
letter-spacing: .04em;
}
.en18031-section-num {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-500);
}
.en18031-section-title {
font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
font-size: var(--fs-lg);
margin: 0;
color: var(--ink-900);
font-weight: 600;
}
.en18031-section-body p,
.en18031-section-body .en18031-bullet {
font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
font-size: var(--fs-md);
line-height: 1.55;
color: var(--ink-800);
margin: 0 0 var(--sp-8);
}
.en18031-section-body .en18031-bullet { padding-left: var(--sp-16); position: relative; }
.en18031-section-body .en18031-bullet::before { content: '—'; position: absolute; left: 0; color: var(--ink-400); }
/* Definitions block */
.en18031-defs {
border: 1px solid var(--paper-3);
border-radius: var(--radius);
background: white;
}
.en18031-defs > summary {
list-style: none;
display: flex; align-items: center; gap: var(--sp-10);
padding: var(--sp-14) var(--sp-20);
cursor: pointer;
font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
font-size: var(--fs-lg);
color: var(--ink-900);
}
.en18031-defs > summary::-webkit-details-marker { display: none; }
.en18031-defs[open] .en18031-defs-chev { transform: rotate(90deg); }
.en18031-defs-chev { transition: transform .15s; color: var(--ink-500); display: inline-flex; }
.en18031-defs-title { font-weight: 600; flex: 1; }
.en18031-defs-count { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--ink-500); }
.en18031-defs-grid {
padding: var(--sp-4) var(--sp-20) var(--sp-16);
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-6);
}
.en18031-def {
display: grid;
grid-template-columns: 60px 1fr;
gap: var(--sp-12);
padding: var(--sp-8) 0;
border-top: 1px solid var(--paper-3);
}
.en18031-def:first-child { border-top: none; }
.en18031-def-num {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-500);
padding-top: var(--sp-2);
}
.en18031-def-term {
font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
font-weight: 600;
font-size: var(--fs-md);
color: var(--ink-900);
}
.en18031-def-content {
font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
font-size: var(--fs-sm);
line-height: 1.5;
color: var(--ink-700);
margin-top: var(--sp-2);
}
/* Category accordion */
.en18031-cat {
margin-bottom: var(--sp-14);
border: 1px solid var(--paper-3);
border-radius: var(--radius);
background: white;
overflow: hidden;
}
.en18031-cat-head {
display: grid;
grid-template-columns: 22px 56px 1fr auto;
align-items: center;
gap: var(--sp-10);
padding: var(--sp-14) var(--sp-16);
cursor: pointer;
border-bottom: 1px solid transparent;
}
.en18031-cat.open .en18031-cat-head { border-bottom-color: var(--paper-3); }
.en18031-cat-head:hover { background: var(--paper-2); }
.en18031-cat-chev { color: var(--ink-500); display: inline-flex; }
.en18031-cat-key {
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: .06em;
color: var(--fam-en, #8b5cf6);
}
.en18031-cat-label {
font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
font-size: var(--fs-lg);
font-weight: 600;
color: var(--ink-900);
}
.en18031-cat-count {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-500);
font-variant-numeric: tabular-nums;
}
.en18031-cat-body { padding: var(--sp-8) var(--sp-16) var(--sp-16); }
/* Requirement card */
.en18031-req {
border-top: 1px solid var(--paper-3);
padding: var(--sp-16) 0 var(--sp-4);
}
.en18031-req:first-child { border-top: none; padding-top: var(--sp-8); }
.en18031-req.is-child {
margin-left: var(--sp-24);
border-top-style: dashed;
border-left: 2px solid var(--fam-en-soft, rgba(139,92,246,0.16));
padding-left: var(--sp-16);
border-top: none;
margin-top: var(--sp-12);
}
.en18031-req-head {
display: flex;
align-items: baseline;
gap: var(--sp-10);
flex-wrap: wrap;
margin-bottom: var(--sp-8);
}
.en18031-req-id {
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: 600;
color: white;
background: var(--fam-en, #8b5cf6);
padding: var(--sp-4) var(--sp-8);
border-radius: var(--radius-sm);
letter-spacing: .04em;
}
.en18031-req.is-child .en18031-req-id { background: var(--ink-700); }
.en18031-req-sec {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
color: var(--ink-500);
}
.en18031-req-title {
font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
font-size: var(--fs-lg);
font-weight: 600;
color: var(--ink-900);
margin: 0;
flex: 1;
min-width: 240px;
}
.en18031-req-block { margin-top: var(--sp-10); }
.en18031-req-block-label {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
color: var(--ink-500);
text-transform: none;
letter-spacing: 0.01em;
margin-bottom: var(--sp-4);
display: inline-flex;
align-items: center;
gap: var(--sp-4);
}
.en18031-req-block-rationale .en18031-req-block-label { color: var(--ink-600); }
.en18031-req-block-guidance .en18031-req-block-label { color: var(--ink-600); }
.en18031-p {
font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
font-size: var(--fs-md);
line-height: 1.55;
color: var(--ink-800);
margin: 0 0 var(--sp-6);
}
.en18031-bullet {
font-family: var(--font-serif, 'Source Serif 4', Georgia, serif);
font-size: var(--fs-sm);
line-height: 1.55;
color: var(--ink-700);
padding-left: var(--sp-16);
position: relative;
margin: 0 0 var(--sp-4);
}
.en18031-bullet::before { content: '—'; position: absolute; left: 0; color: var(--ink-400); }
.en18031-req-block-rationale .en18031-p { color: var(--ink-700); font-size: var(--fs-sm); }
.en18031-req-block-guidance .en18031-p { color: var(--ink-700); font-size: var(--fs-sm); }
/* Decision tree */
.en18031-req-block-dt { margin-top: var(--sp-14); }
.en18031-dt { margin-top: var(--sp-4); }
.en18031-dt-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-mono);
font-size: var(--fs-2xs);
background: var(--paper-2);
border-radius: var(--radius-md);
overflow: hidden;
}
.en18031-dt-table th, .en18031-dt-table td {
padding: var(--sp-8) var(--sp-10);
border: 1px solid var(--paper-3);
vertical-align: top;
text-align: left;
}
.en18031-dt-table th {
background: var(--paper-3);
font-weight: 600;
color: var(--ink-800);
font-size: var(--fs-3xs);
text-transform: none;
letter-spacing: 0.01em;
}
.en18031-dt-table td { color: var(--ink-800); }
.en18031-dt-table .en18031-dt-key { font-weight: 600; color: var(--fam-en, #8b5cf6); }
.en18031-dt-table .en18031-dt-out { font-size: var(--fs-2xs); }
.en18031-dt-fallback { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--ink-700); white-space: pre-wrap; }
/* Assessment criteria */
.en18031-ac {
margin-top: var(--sp-14);
border: 1px solid var(--paper-3);
border-radius: var(--radius-md);
background: var(--paper-2);
padding: var(--sp-8) var(--sp-12);
}
.en18031-ac-head {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
text-transform: none;
letter-spacing: 0.01em;
color: var(--ink-600);
margin-bottom: var(--sp-4);
}
.en18031-ac-item { border-top: 1px solid var(--paper-3); }
.en18031-ac-item:first-of-type { border-top: none; }
.en18031-ac-item > summary {
list-style: none;
display: flex; align-items: center; gap: var(--sp-8);
padding: var(--sp-6) 0;
cursor: pointer;
font-family: var(--font-sans, 'Uncut Sans', system-ui, sans-serif);
font-size: var(--fs-xs);
color: var(--ink-800);
}
.en18031-ac-item > summary::-webkit-details-marker { display: none; }
.en18031-ac-item[open] .en18031-ac-chev { transform: rotate(90deg); }
.en18031-ac-chev { color: var(--ink-500); display: inline-flex; transition: transform .15s; }
.en18031-ac-label { font-weight: 500; }
.en18031-ac-body { padding: var(--sp-4) 0 var(--sp-10) var(--sp-16); }
.en18031-ac-body .en18031-p { font-size: var(--fs-sm); color: var(--ink-700); }
/* Children container */
.en18031-req-children { margin-top: var(--sp-8); }
/* ============================================================
nodes-Modell — Inline-Figuren/Formeln, Pipe-Tabellen, Fußnoten
(iec62443_4_1 & weitere docling-Standards; siehe
PREMIUM_VIEWER_MIGRATION.md §4). ADDITIV — eigener `nodes-`-Präfix,
greift nur für Bodies mit [[REF:]]/Pipe-Tabellen.
============================================================ */
/* Inline-Figur/Formel aus [[REF:]] */
.nodes-inline-figure {
display: block;
margin: var(--sp-16) 0;
padding: 0;
}
.nodes-inline-figure img {
display: block;
max-width: 100%;
height: auto;
border-radius: var(--radius);
border: 1px solid var(--paper-3);
background: var(--surface);
}
.nodes-inline-figure figcaption {
margin-top: var(--sp-8);
font-family: var(--font-sans);
font-size: var(--fs-xs);
color: var(--ink-500);
line-height: 1.45;
}
/* Fehlende Referenz: Marker neutral als Mono-Klartext halten */
.nodes-ref-missing {
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--ink-500);
}
/* GitHub-Pipe-Tabelle → */
.nodes-table {
width: 100%;
border-collapse: collapse;
margin: var(--sp-14) 0 var(--sp-16);
font-family: var(--font-sans);
font-size: var(--fs-sm);
}
.nodes-table th,
.nodes-table td {
border: 1px solid var(--paper-3);
padding: var(--sp-8) var(--sp-12);
text-align: left;
vertical-align: top;
white-space: normal;
}
.nodes-table th {
background: var(--paper-1, #f8f6f1);
font-weight: 600;
color: var(--ink-700);
font-size: var(--fs-xs);
}
/* ============================================================
nodes-Modell — verschachtelte Abschnitts-Hierarchie
(grouped.sectionTree, rekursiv aus parent_id/ord). Wie der CRA-
Reader: Container-Knoten (mit Kindern) sind leichte .reader-subgroup-
Wrapper, Blätter sind .article-Boxen. Schachtelung erfolgt NUR über
die Subgroups; Blätter sitzen flach im eingerückten .nodes-children.
ADDITIV — greift nur für nodes-Records.
============================================================ */
/* Eingerückter Inhalt eines Container-Knotens: eine Ebene Einzug +
dezente Führungslinie. Schachtelt sich natürlich (jede Tiefe rückt
relativ zum Elternteil ein). */
.nodes-children {
margin-left: var(--sp-8);
padding-left: var(--sp-16);
border-left: 1px solid var(--ink-200, color-mix(in srgb, var(--navy-900) 10%, transparent));
}
/* Verschachtelte Subgroups bekommen weniger Luft nach oben als ein
Top-Level-Kapitel, damit tiefe Bäume nicht auseinanderfallen. */
.nodes-children .nodes-subgroup {
margin-top: var(--sp-16);
}
.nodes-children .nodes-leaf {
margin-top: var(--sp-12);
}
/* ---- Heading-Hierarchie: Titelgröße staffelt NUR nach Tiefe, gleich ob der
Knoten Container (Subgroup) oder Blatt (.article) ist. So ist der Eltern-Titel
IMMER größer als sein Kind (vorher war Annex C kleiner als C.1), und Geschwister
auf derselben Ebene sind gleich groß — egal ob mit/ohne Unterpunkte. Der
`>`-Kombinator verhindert Durchsickern in verschachtelte Titel. NUR nodes-Baum;
CRA-Artikel (.article-title) bleiben unberührt. ---- */
.nodes-subgroup.nodes-depth-0 > .reader-subgroup-head > .reader-subgroup-title,
.nodes-leaf.nodes-depth-0 > .article-head > .article-title {
font-size: var(--fs-2xl);
font-weight: 700;
line-height: 1.25;
}
.nodes-subgroup.nodes-depth-1 > .reader-subgroup-head > .reader-subgroup-title,
.nodes-leaf.nodes-depth-1 > .article-head > .article-title {
font-size: var(--fs-xl);
font-weight: 650;
}
.nodes-subgroup.nodes-depth-2 > .reader-subgroup-head > .reader-subgroup-title,
.nodes-leaf.nodes-depth-2 > .article-head > .article-title {
font-size: var(--fs-lg);
font-weight: 600;
}
.nodes-subgroup.nodes-depth-3 > .reader-subgroup-head > .reader-subgroup-title,
.nodes-leaf.nodes-depth-3 > .article-head > .article-title {
font-size: var(--fs-md);
font-weight: 600;
}
/* Top-Level-Kopf bekommt mehr Luft unter sich. */
.nodes-subgroup.nodes-depth-0 > .reader-subgroup-head {
padding: var(--sp-4) 0 var(--sp-14);
}
/* ---- Top-Level: grauer Trennstrich + großzügiger Abstand zwischen Kapiteln ---- */
.nodes-subgroup.nodes-depth-0,
.nodes-leaf.nodes-depth-0 {
margin-top: 44px;
padding-top: var(--sp-24);
border-top: 1px solid var(--ink-200, color-mix(in srgb, var(--navy-900) 12%, transparent));
}
/* Sekundärstrukturen (Fußnote/Abbildung/Formel), die mangels parent_id als lose
Top-Level-Knoten landen, sind KEINE Kapitel: kleiner, kein Kapitel-Trennstrich. */
.nodes-leaf.nodes-depth-0.nodes-kind-footnote,
.nodes-leaf.nodes-depth-0.nodes-kind-figure,
.nodes-leaf.nodes-depth-0.nodes-kind-formula {
margin-top: var(--sp-16);
padding-top: 0;
border-top: none;
}
.nodes-leaf.nodes-depth-0.nodes-kind-footnote > .article-head > .article-title,
.nodes-leaf.nodes-depth-0.nodes-kind-figure > .article-head > .article-title,
.nodes-leaf.nodes-depth-0.nodes-kind-formula > .article-head > .article-title {
font-size: var(--fs-md);
font-weight: 600;
}
/* Sekundär-Strukturen (Abbildung/Formel/Fußnote) optisch zurücknehmen. */
.nodes-leaf.nodes-kind-figure .article-title,
.nodes-leaf.nodes-kind-formula .article-title,
.nodes-leaf.nodes-kind-footnote .article-title {
font-weight: 500;
color: var(--ink-700);
}
.nodes-leaf.nodes-kind-footnote {
font-size: 0.94em;
}
/* Fußnoten-Box: kleine graue Box, die aufeinanderfolgende Fußnoten einer Seite bündelt. */
.nodes-footnote-box {
margin: var(--sp-16) 0 0;
padding: var(--sp-12) var(--sp-14);
background: var(--paper-2, #f4f1ec);
border: 1px solid var(--ink-200, color-mix(in srgb, var(--navy-900) 12%, transparent));
border-radius: var(--radius);
}
.nodes-footnote-box.nodes-depth-0 { margin-top: var(--sp-24); } /* Luft, aber kein Kapitel-Trenner */
.nodes-footnote-box-title {
font-family: var(--font-mono);
font-size: var(--fs-3xs);
font-weight: 600;
text-transform: none;
letter-spacing: 0.01em;
color: var(--ink-500);
margin-bottom: var(--sp-8);
}
.nodes-footnote-item {
display: flex;
gap: var(--sp-8);
margin-top: var(--sp-4);
font-size: var(--fs-sm);
line-height: 1.5;
}
.nodes-footnote-item:first-of-type { margin-top: 0; }
.nodes-footnote-item.active { background: rgba(255,210,80,0.18); border-radius: var(--radius-sm); }
.nodes-footnote-marker {
font-family: var(--font-mono);
font-weight: 600;
color: var(--accent);
flex-shrink: 0;
}
.nodes-footnote-text { color: var(--ink-700); white-space: pre-wrap; min-width: 0; }
/* Sidebar-TOC aus dem nodes-Baum: verschachtelte Ebenen einrücken, Frontmatter
als ruhiger Einzeleintrag. */
.sb-toc-nodes { margin-top: var(--sp-2); }
.sb-toc-subtree {
margin-left: var(--sp-8);
padding-left: var(--sp-8);
border-left: 1px solid var(--ink-200, color-mix(in srgb, var(--navy-900) 10%, transparent));
}
.sb-toc-fm {
font-style: italic;
color: var(--ink-500);
}
/* Topbar-Export-Dropdown (Export -> Drucken / CSV). */
.topbar-export { position: relative; display: inline-flex; }
.topbar-export-caret {
display: inline-flex;
align-items: center;
margin-left: var(--sp-4);
transform: rotate(90deg); /* chev zeigt nach unten */
}
.topbar-export-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 140px;
background: var(--surface);
border: 1px solid var(--paper-3);
border-radius: var(--radius);
box-shadow: var(--shadow-2, 0 8px 24px color-mix(in srgb, var(--navy-900) 14%, transparent));
padding: var(--sp-4);
z-index: 60;
display: flex;
flex-direction: column;
}
.topbar-export-item {
text-align: left;
background: transparent;
border: none;
padding: var(--sp-8) var(--sp-10);
border-radius: var(--radius-sm);
font-family: var(--font-sans);
font-size: var(--fs-sm);
color: var(--ink-900);
cursor: pointer;
}
.topbar-export-item:hover { background: var(--paper-2); }
/* Sprach-Pille für eine in der DB nicht vorhandene Sprache: ausgegraut, inaktiv. */
.topbar-btn.is-disabled {
color: var(--ink-300, #b8bcc4);
cursor: not-allowed;
background: var(--paper-2, #f4f1ec);
opacity: 0.6;
}
.topbar-btn.is-disabled:hover { background: var(--paper-2, #f4f1ec); }
/* ============================================================
Product-Detail (pd-*) — Hierarchie-Umbau Kunde -> Produkt
============================================================ */
.pd-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-6); font-size:var(--fs-sm); color:var(--ink-500); margin-bottom:var(--sp-10); }
.pd-crumb-link { color:var(--ink-600); cursor:pointer; }
.pd-crumb-link:hover { color:var(--pink-500); text-decoration:underline; }
.pd-crumb-sep { color:var(--ink-300); }
.pd-crumb-current { color:var(--ink-900); font-weight:600; }
.pd-std-chip { display:inline-block; padding:var(--sp-2) var(--sp-8); border-radius:999px; font-size:var(--fs-xs); font-weight:600;
background:var(--paper-2); color:var(--ink-700); border:1px solid var(--paper-3); }
/* Übersicht */
.pd-overview { display:block; }
.pd-ov-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:var(--sp-16); align-items:start; }
.pd-ov-card { background: white; border: 1px solid var(--paper-3); border-radius: var(--radius-lg); padding:var(--sp-16) var(--sp-20); box-shadow: var(--shadow-1); }
.pd-ov-card-h { font-weight:700; color:var(--navy-900); margin-bottom:var(--sp-12); display:flex; align-items:center; gap:var(--sp-8); }
.pd-ov-card-h-count { font-size:var(--fs-xs); font-weight:600; color:var(--ink-500); background:var(--paper-2); border-radius:999px; padding:1px var(--sp-8); }
.pd-ov-meta-row { display:flex; justify-content:space-between; gap:var(--sp-12); padding:var(--sp-8) 0; border-bottom:1px solid var(--paper-2); font-size:var(--fs-sm); }
.pd-ov-meta-row:last-child { border-bottom:none; }
.pd-ov-meta-lab { color:var(--ink-500); flex-shrink:0; }
.pd-ov-meta-val { color:var(--ink-900); text-align:right; min-width:0; }
.pd-ov-cov { display:block; }
.pd-ov-cov-bar { display:flex; height:12px; border-radius: var(--radius-md); overflow:hidden; background:var(--paper-2); margin-bottom:var(--sp-14); }
.pd-ov-cov-seg { height:100%; }
.pd-ov-cov-legend { display:flex; flex-direction:column; gap:var(--sp-8); }
.pd-ov-cov-leg { display:flex; align-items:center; gap:var(--sp-8); font-size:var(--fs-sm); }
.pd-ov-cov-dot { width:10px; height:10px; border-radius: var(--radius-xs); flex-shrink:0; }
.pd-ov-cov-leg-lab { color:var(--ink-700); flex:1; }
.pd-ov-cov-leg-num { color:var(--ink-900); font-weight:600; font-variant-numeric:tabular-nums; }
.pd-ov-empty { color:var(--ink-500); font-size:var(--fs-sm); }
/* SoA + Readiness Tab */
.pd-readiness, .pd-soa { display:block; }
.pd-soa-intro { color:var(--ink-600); font-size:var(--fs-sm); margin-bottom:var(--sp-14); }
.pd-soa-error { color:var(--ev-fail); font-size:var(--fs-sm); margin:var(--sp-8) 0; }
.pd-soa-table-wrap { overflow-x:auto; border:1px solid var(--paper-3); border-radius: var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-1); }
.pd-soa-table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.pd-soa-table th { text-align:left; font-size:var(--fs-2xs); text-transform: none; letter-spacing: 0.01em; color:var(--ink-500);
font-weight:600; padding:var(--sp-10) var(--sp-12); border-bottom:1px solid var(--paper-3); background:var(--paper-1); white-space:nowrap; }
.pd-soa-table td { padding:var(--sp-8) var(--sp-12); border-bottom:1px solid var(--paper-2); vertical-align:middle; }
.pd-soa-table tr:last-child td { border-bottom:none; }
.pd-soa-table select { padding:var(--sp-4) var(--sp-8); border:1px solid var(--paper-3); border-radius: var(--radius-md); background:var(--surface); font-family:inherit; font-size:var(--fs-sm); }
.pd-soa-nid { font-family: var(--font-mono); font-size:var(--fs-xs); color:var(--ink-800); }
.pd-soa-resp { color:var(--ink-500); }
.pd-soa-row-busy { opacity:.5; pointer-events:none; }
.pd-soa-empty { padding:var(--sp-20); text-align:center; color:var(--ink-500); }
.pd-soa-add { display:flex; flex-wrap:wrap; gap:var(--sp-8); align-items:center; margin-top:var(--sp-14); padding:var(--sp-14);
border:1px dashed var(--paper-3); border-radius: var(--radius-lg); background:var(--paper-1); }
.pd-soa-add select, .pd-soa-add input { padding:var(--sp-8) var(--sp-8); border:1px solid var(--paper-3); border-radius: var(--radius);
background:var(--surface); font-family:inherit; font-size:var(--fs-sm); }
.pd-tab-fallback { color:var(--ink-500); padding:var(--sp-24); font-size:var(--fs-sm); }
/* ============================================================
Fragebogen-Editor Kopf (pages/questionnaire-editor.jsx)
============================================================ */
.qst-editor-head { margin-bottom:var(--sp-16); }
/* Alle Felder GLEICH breit, linksbündig, umbrechend. */
.qst-head-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:var(--sp-12) var(--sp-16); align-items:end; }
.qst-head-field { display:flex; flex-direction:column; gap:var(--sp-4); min-width:0; }
.preq-cat-crumb {
font-weight: 400; font-size: var(--fs-xs); color: var(--ink-500); margin-bottom: var(--sp-8); }
.preq-cat-crumb span { cursor: pointer; }
.preq-cat-crumb span:hover { color: var(--pink-500); }