/* ═══════════════════════════════════════════════════════════════════════════
bytefret — styles.css
───────────────────────────────────────────────────────────────────────────
Zwei Themes über semantische CSS-Variablen:
- Light (Default in :root) — „Notenbuch auf dem Tisch"
- Dark ([data-theme="dark"]) — „Notenbuch im Studio"
Theme-Switch wird vor dem ersten Paint im gesetzt (kein FOUC).
═══════════════════════════════════════════════════════════════════════════ */
/* ─── LIGHT-Tokens (Default) ──────────────────────────────────────────────── */
:root {
/* Sizing / motion (theme-unabhängig) */
--radius: 8px;
--radius-lg: 12px;
--ease: cubic-bezier(.4, 0, .2, 1);
/* Surfaces — warm cream paper */
--bg: #FAF7F0; /* page background */
--bg-elevated: #F2EDE0; /* topbar, meta-bar */
--bg-sunken: rgba(60, 40, 20, .07); /* btn-group, hover wells */
--bg-page: #FFFCF7; /* the sheet card top */
--bg-page-2: #FAF6EC; /* sheet card gradient end */
/* Body atmosphere */
--bg-pattern:
radial-gradient(ellipse 900px 600px at 12% -8%, rgba(216, 102, 0, .045), transparent 55%),
radial-gradient(ellipse 700px 500px at 110% 110%, rgba(138, 111, 71, .06), transparent 55%);
/* Text */
--text: #1F1A14; /* warm espresso */
--text-muted: #6B5F4F; /* warm secondary */
--text-subtle: #8C7E6B; /* warm tertiary */
/* Borders */
--border: #D9D0BC;
--border-soft: #E8E1D2;
--border-strong:#B6A98E;
/* Accent — warm orange (slightly print-toned for light bg) */
--accent: #D86600;
--accent-hover: #E97000;
--accent-soft: rgba(216, 102, 0, .12);
--accent-glow: rgba(216, 102, 0, .22);
--accent-on: #FFFFFF; /* text-on-accent */
/* Secondary brand — warm bronze (replaces cold teal) */
--secondary: #8A6F47; /* bronze */
--secondary-soft: rgba(138, 111, 71, .15);
--secondary-line: #A3855B;
/* Strings — warm graphite */
--string: #B0A28A;
/* Danger */
--danger: #B83D2C;
--danger-soft: rgba(184, 61, 44, .15);
--danger-text: #8A2A1D;
/* Card shadow (warm, not blue-grey) */
--shadow-card:
0 6px 24px rgba(60, 40, 20, .08),
0 2px 8px rgba(60, 40, 20, .05),
inset 0 1px 0 rgba(255, 255, 255, .6);
/* Topbar / footer fills (semi-transparent for backdrop blur) */
--bg-topbar: rgba(242, 237, 224, .82);
--bg-meta: rgba(242, 237, 224, .55);
--bg-footer: rgba(242, 237, 224, .65);
/* Select chevron color (matches accent) */
--chevron: D86600;
/* Cell hover (subtle warm wash) */
--cell-hover: rgba(138, 111, 71, .12);
color-scheme: light;
}
/* ─── DARK-Tokens (Override) ──────────────────────────────────────────────── */
[data-theme="dark"] {
/* Surfaces — warm anthracite, not blue-black */
--bg: #1A1614;
--bg-elevated: #221E1A;
--bg-sunken: rgba(0, 0, 0, .28);
--bg-page: #25201B; /* leather-warm */
--bg-page-2: #1F1B17;
/* Atmosphere — bronze + orange hints */
--bg-pattern:
radial-gradient(ellipse 900px 600px at 12% -8%, rgba(165, 132, 85, .12), transparent 55%),
radial-gradient(ellipse 700px 500px at 110% 110%, rgba(253, 125, 0, .07), transparent 55%);
/* Text — warm off-white */
--text: #F2EBDC;
--text-muted: #9C8E78;
--text-subtle: #6B5E4A;
/* Borders */
--border: #3A322A;
--border-soft: #2D2823;
--border-strong:#564938;
/* Accent — full digital orange in dark */
--accent: #FD7D00;
--accent-hover: #FF8E1F;
--accent-soft: rgba(253, 125, 0, .15);
--accent-glow: rgba(253, 125, 0, .35);
--accent-on: #1A1614;
/* Secondary — brass / warm bronze */
--secondary: #A48455;
--secondary-soft: rgba(165, 132, 85, .18);
--secondary-line: #C4A472;
/* Strings — muted warm brown-grey */
--string: #4A4135;
/* Danger */
--danger: #D04A3A;
--danger-soft: rgba(208, 74, 58, .25);
--danger-text: #FFB0A6;
/* Card shadow — deep, warm */
--shadow-card:
0 14px 44px rgba(0, 0, 0, .55),
0 4px 12px rgba(0, 0, 0, .3),
inset 0 1px 0 rgba(255, 255, 255, .04);
/* Topbar / footer fills */
--bg-topbar: rgba(34, 30, 26, .85);
--bg-meta: rgba(34, 30, 26, .55);
--bg-footer: rgba(34, 30, 26, .55);
/* Select chevron */
--chevron: FD7D00;
/* Cell hover */
--cell-hover: rgba(165, 132, 85, .22);
color-scheme: dark;
}
/* ─── Reset / Base ────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
/* Scrollbar-Farben adaptiv (Firefox) */
scrollbar-color: var(--border-strong) transparent;
}
body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: var(--bg-pattern), var(--bg);
background-attachment: fixed;
color: var(--text);
min-height: 100vh;
display: flex;
flex-direction: column;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Smooth Theme-Übergänge auf den großen Surfaces.
Targeted (nicht universal *) damit Hover/Focus auf cells/buttons snappy bleibt. */
body,
.topbar,
.meta,
.tab-area,
.tab-page,
.tab-page::before,
footer {
transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
/* ─── Topbar ──────────────────────────────────────────────────────────────── */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem 2rem;
padding: .9rem 1.75rem;
background: var(--bg-topbar);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 10;
}
.brand {
display: flex;
align-items: center;
gap: .8rem;
}
.logo {
width: 32px;
height: 32px;
flex-shrink: 0;
display: block;
filter: drop-shadow(0 0 10px var(--accent-glow));
transition: filter .35s var(--ease), transform .15s var(--ease);
}
.brand:hover .logo,
.brand-link:hover .logo {
filter: drop-shadow(0 0 14px var(--accent-glow));
transform: scale(1.04);
}
.brand-text {
display: flex;
flex-direction: column;
line-height: 1;
}
.brand-text h1 {
margin: 0;
font-size: 1.4rem;
font-weight: 600;
letter-spacing: -.015em;
color: var(--text);
}
.brand-text small {
margin-top: .25rem;
font-size: .68rem;
color: var(--text-muted);
letter-spacing: .14em;
text-transform: uppercase;
}
/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.actions {
display: flex;
gap: .65rem;
align-items: center;
flex-wrap: wrap;
}
.btn-group {
display: flex;
gap: .15rem;
padding: .25rem;
background: var(--bg-sunken);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
}
button {
display: inline-flex;
align-items: center;
gap: .4rem;
background: transparent;
color: var(--text);
border: 1px solid transparent;
padding: .42rem .75rem;
font: inherit;
font-size: .82rem;
font-weight: 500;
cursor: pointer;
border-radius: 5px;
transition: background .15s var(--ease), color .15s var(--ease), transform .08s var(--ease), box-shadow .15s var(--ease);
white-space: nowrap;
user-select: none;
}
button:hover {
background: var(--secondary-soft);
color: var(--text);
}
button:active { transform: translateY(1px); }
button:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
button .icon {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* Primary — accent-filled */
button.btn-primary {
background: var(--accent);
color: var(--accent-on);
font-weight: 600;
box-shadow:
0 1px 0 rgba(255, 255, 255, .18) inset,
0 2px 6px var(--accent-glow);
}
button.btn-primary:hover {
background: var(--accent-hover);
box-shadow:
0 1px 0 rgba(255, 255, 255, .22) inset,
0 4px 14px var(--accent-glow);
}
/* Danger */
button.btn-danger { color: var(--danger-text); }
button.btn-danger:hover {
background: var(--danger-soft);
color: var(--danger);
}
/* Theme-Toggle (icon-only) */
.icon-btn {
width: 36px;
height: 36px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bg-sunken);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
color: var(--text);
cursor: pointer;
transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.icon-btn:hover {
background: var(--secondary-soft);
border-color: var(--border);
color: var(--accent);
}
.icon-btn:active { transform: translateY(1px); }
.icon-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.icon-btn .icon { width: 16px; height: 16px; }
/* Sun/moon umschalten je nach Theme — der jeweils ANDERE wird gezeigt */
.icon-btn .ico-sun { display: none; }
.icon-btn .ico-moon { display: block; }
[data-theme="dark"] .icon-btn .ico-sun { display: block; }
[data-theme="dark"] .icon-btn .ico-moon { display: none; }
/* Language toggle — Globe + ISO-Code ("EN" / "DE") */
.lang-btn {
height: 36px;
padding: 0 .55rem;
display: inline-flex;
align-items: center;
gap: .35rem;
background: var(--bg-sunken);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
color: var(--text);
cursor: pointer;
font: inherit;
font-size: .72rem;
font-weight: 700;
letter-spacing: .08em;
transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.lang-btn:hover {
background: var(--secondary-soft);
border-color: var(--border);
color: var(--accent);
}
.lang-btn:active { transform: translateY(1px); }
.lang-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.lang-btn .icon { width: 14px; height: 14px; flex-shrink: 0; }
.lang-btn .lang-current { line-height: 1; font-variant-numeric: tabular-nums; }
/* ─── Meta bar ────────────────────────────────────────────────────────────── */
.meta {
display: flex;
flex-wrap: wrap;
gap: 1rem 1.5rem;
align-items: center;
padding: .85rem 1.75rem;
background: var(--bg-meta);
border-bottom: 1px solid var(--border-soft);
}
.meta-field {
display: flex;
gap: .5rem;
align-items: center;
font-size: .8rem;
color: var(--text-muted);
}
.meta-field span {
color: var(--text-muted);
letter-spacing: .04em;
text-transform: uppercase;
font-size: .68rem;
font-weight: 600;
}
.meta input[type="text"],
.meta select {
background: var(--bg-page);
color: var(--text);
border: 1px solid var(--border);
padding: .4rem .65rem;
font: inherit;
font-size: .85rem;
border-radius: 6px;
transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .35s var(--ease), color .35s var(--ease);
}
.meta input[type="text"]:hover,
.meta select:hover { border-color: var(--secondary-line); }
.meta input[type="text"]:focus,
.meta select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Custom-Chevron für Selects (Farbe per Theme via --chevron) */
.meta select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right .55rem center;
background-size: 11px;
padding-right: 1.85rem;
cursor: pointer;
}
/* Light-Variante des Chevrons (deeper orange für besseren Kontrast auf Cream) */
:root .meta select {
background-image: url("data:image/svg+xml;utf8,");
}
#title { width: 16rem; max-width: 60vw; }
/* ─── Autosave indicator ──────────────────────────────────────────────────── */
.autosave {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: .35rem;
font-size: .72rem;
color: var(--secondary-line);
letter-spacing: .06em;
font-weight: 500;
text-transform: uppercase;
transition: color .3s var(--ease);
}
.autosave .icon { width: 12px; height: 12px; transition: transform .35s var(--ease); }
.autosave.saving { color: var(--accent); }
.autosave.saving .icon { animation: spin .55s var(--ease); }
@keyframes spin {
from { transform: rotate(-90deg); opacity: .4; }
to { transform: rotate(0); opacity: 1; }
}
/* ─── Tab area / Tab page (das Sheet) ─────────────────────────────────────── */
.tab-area {
flex: 1;
display: flex;
justify-content: center;
padding: 2.5rem 1.5rem 4rem;
}
.tab-page {
display: flex;
flex-direction: column;
gap: 2.25rem;
padding: 2.5rem 2.25rem 2rem;
width: max-content;
max-width: 100%;
background: linear-gradient(180deg, var(--bg-page) 0%, var(--bg-page-2) 100%);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", Menlo, Consolas, monospace;
font-size: 1rem;
line-height: 1;
overflow-x: auto;
position: relative;
}
/* dezenter Akzent oben (Highlight-Stripe) */
.tab-page::before {
content: "";
position: absolute;
top: 0;
left: 12%;
right: 12%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
}
/* ─── Tab line (eine Zeile Bars mit gemeinsamen String-Lines) ─────────────── */
.tab-line {
display: flex;
flex-direction: column;
break-inside: avoid;
page-break-inside: avoid;
width: max-content;
}
/* Bar-Nummerierung über jeder Zeile */
.bar-numbers {
display: flex;
align-items: flex-end;
height: 1.1rem;
margin-bottom: .4rem;
font-family: system-ui, sans-serif;
font-size: .65rem;
letter-spacing: .15em;
text-transform: uppercase;
font-weight: 600;
color: var(--accent);
user-select: none;
}
.bar-numbers .num-label { display: inline-block; min-width: 1.5rem; padding-right: .25rem; }
.bar-numbers .num-sep { display: inline-block; width: .5rem; }
.bar-numbers .bar-num {
display: inline-block;
width: calc(var(--bar-size, 8) * 1.7rem);
text-align: center;
opacity: .75;
}
/* ─── String row + die durchgängige Saiten-Linie ──────────────────────────── */
.string-row {
position: relative;
display: flex;
align-items: center;
height: 1.5rem;
}
.string-row::after {
content: "";
position: absolute;
top: 50%;
left: 1.9rem;
right: 0;
height: 1px;
background: var(--string);
z-index: 0;
pointer-events: none;
transition: background-color .35s var(--ease);
}
/* Saiten-Hierarchy: Bass-Saiten präsenter als Treble */
.string-row[data-str="0"]::after { opacity: .55; }
.string-row[data-str="1"]::after { opacity: .65; }
.string-row[data-str="2"]::after { opacity: .75; }
.string-row[data-str="3"]::after { opacity: .85; }
.string-row[data-str="4"]::after { opacity: .92; }
.string-row[data-str="5"]::after { opacity: 1; }
.string-row > * { position: relative; z-index: 1; }
.string-label {
display: inline-block;
min-width: 1.5rem;
padding-right: .35rem;
text-align: right;
color: var(--accent);
user-select: none;
font-weight: 600;
letter-spacing: .02em;
}
.bar-sep {
display: inline-block;
width: .5rem;
text-align: center;
color: var(--secondary-line);
user-select: none;
font-weight: 700;
}
/* ─── Cells ───────────────────────────────────────────────────────────────── */
.cell {
width: 1.7rem;
height: 1.5rem;
text-align: center;
background: transparent;
color: var(--text);
border: none;
font: inherit;
padding: 0;
margin: 0;
outline: none;
caret-color: var(--accent);
border-radius: 4px;
transition: background .12s var(--ease), box-shadow .12s var(--ease);
}
.cell:hover { background: var(--cell-hover); }
.cell:focus {
background: var(--accent-soft);
box-shadow:
inset 0 0 0 1px var(--accent),
0 0 14px var(--accent-glow);
}
.cell::placeholder { color: transparent; }
/* ─── Footer ──────────────────────────────────────────────────────────────── */
footer {
text-align: center;
padding: 1.1rem 1rem 1.4rem;
color: var(--text-muted);
font-size: .72rem;
border-top: 1px solid var(--border-soft);
background: var(--bg-footer);
}
footer code,
footer kbd {
display: inline-block;
background: var(--bg-sunken);
border: 1px solid var(--border-soft);
padding: 1px 6px;
margin: 0 1px;
border-radius: 3px;
color: var(--accent);
font-size: .7rem;
font-family: "JetBrains Mono", monospace;
line-height: 1.4;
}
footer kbd {
color: var(--text);
border-bottom-width: 2px;
border-color: var(--border-soft) var(--border-soft) var(--border-strong) var(--border-soft);
font-size: .65rem;
min-width: 1.2rem;
text-align: center;
}
footer em {
color: var(--secondary-line);
font-style: normal;
font-weight: 500;
}
/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
.brand-text small { display: none; }
.topbar { padding: .75rem 1rem; gap: .75rem; }
.meta { padding: .75rem 1rem; gap: .75rem 1rem; }
.tab-area { padding: 1.5rem .75rem 3rem; }
.tab-page { padding: 1.5rem 1.1rem 1.25rem; gap: 1.5rem; }
#title { width: 12rem; }
.autosave { margin-left: 0; }
}
/* ─── Legal pages (imprint, privacy) ──────────────────────────────────────── */
/* Sprach-Toggle: nur der Block mit lang-Attribut, das zu passt,
wird gezeigt. Spart hunderte data-i18n-Keys für Legal-Body. */
.legal-body { display: none; }
html[lang="de"] .legal-body[lang="de"] { display: block; }
html[lang="en"] .legal-body[lang="en"] { display: block; }
/* Fallback: wenn html lang weder de noch en, zeig EN */
html:not([lang="de"]):not([lang="en"]) .legal-body[lang="en"] { display: block; }
/* Brand als Link zurück zur App */
.brand-link {
text-decoration: none;
color: inherit;
display: flex;
align-items: center;
gap: .8rem;
border-radius: var(--radius);
padding: .25rem .35rem;
margin: -.25rem -.35rem;
transition: background .15s var(--ease);
}
.brand-link:hover { background: var(--secondary-soft); }
.brand-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Legal area */
.legal-area {
flex: 1;
display: flex;
justify-content: center;
padding: 2.5rem 1.5rem 4rem;
}
/* Legal-Page reuses the sheet-card visual but with reading-friendly typography */
.legal-page {
width: 100%;
max-width: 760px;
padding: 2.5rem 2.5rem 2rem;
background: linear-gradient(180deg, var(--bg-page) 0%, var(--bg-page-2) 100%);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: .95rem;
line-height: 1.65;
color: var(--text);
position: relative;
}
.legal-page::before {
content: "";
position: absolute;
top: 0;
left: 12%;
right: 12%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
}
.legal-body h2 {
margin: 0 0 .25rem;
font-size: 1.7rem;
font-weight: 700;
letter-spacing: -.01em;
color: var(--text);
}
.legal-body h3 {
margin: 2rem 0 .75rem;
font-size: 1.15rem;
font-weight: 600;
letter-spacing: -.005em;
color: var(--accent);
border-bottom: 1px solid var(--border-soft);
padding-bottom: .35rem;
}
.legal-body h4 {
margin: 1.5rem 0 .5rem;
font-size: .95rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--text-muted);
}
.legal-body p,
.legal-body li {
margin: 0 0 .9rem;
color: var(--text);
}
.legal-body ul {
margin: 0 0 1rem;
padding-left: 1.4rem;
}
.legal-body li { margin-bottom: .35rem; }
.legal-body a {
color: var(--accent);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.legal-body a:hover { color: var(--accent-hover); }
.legal-body code {
background: var(--bg-sunken);
border: 1px solid var(--border-soft);
padding: 1px 6px;
border-radius: 3px;
color: var(--accent);
font-size: .82em;
font-family: "JetBrains Mono", "Fira Code", monospace;
}
.legal-body strong { font-weight: 600; }
.legal-meta {
font-size: .75rem;
color: var(--text-subtle);
letter-spacing: .04em;
text-transform: uppercase;
margin: .25rem 0 1.5rem !important;
}
/* Address-card */
.legal-card {
display: block;
margin: 1.25rem 0 1.5rem;
padding: 1.1rem 1.25rem;
background: var(--bg-sunken);
border: 1px solid var(--border-soft);
border-left: 3px solid var(--accent);
border-radius: var(--radius);
font-style: normal;
}
.legal-card-eyebrow {
margin: 0 0 .35rem !important;
font-size: .68rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text-subtle);
font-weight: 600;
}
.legal-card-name {
margin: 0 0 .35rem !important;
font-size: 1.05rem;
font-weight: 600;
color: var(--text);
}
.legal-card-address {
display: block;
font-style: normal;
margin: 0 0 .35rem;
color: var(--text-muted);
line-height: 1.55;
}
.legal-card-contact {
margin: 0 !important;
font-size: .9rem;
}
/* Legal footer (different from main editor footer) */
.legal-footer {
text-align: center;
padding: 1.25rem 1rem 1.75rem;
color: var(--text-muted);
font-size: .78rem;
border-top: 1px solid var(--border-soft);
background: var(--bg-footer);
}
.legal-footer a {
color: var(--text-muted);
text-decoration: none;
transition: color .15s var(--ease);
}
.legal-footer a:hover { color: var(--accent); }
.legal-footer span { margin: 0 .35rem; color: var(--text-subtle); }
/* Editor-Footer: Legal-Links unterhalb der Hilfe-Zeile */
.legal-links {
display: block;
margin-top: .5rem;
color: var(--text-subtle);
}
.legal-links a {
color: var(--text-muted);
text-decoration: none;
transition: color .15s var(--ease);
}
.legal-links a:hover { color: var(--accent); }
.legal-links span[aria-hidden] { margin: 0 .4rem; color: var(--text-subtle); }
/* Responsive */
@media (max-width: 720px) {
.legal-area { padding: 1.5rem .75rem 3rem; }
.legal-page { padding: 1.75rem 1.25rem 1.5rem; }
.legal-body h2 { font-size: 1.4rem; }
.legal-body h3 { font-size: 1.05rem; }
}
/* ─── Print — immer schwarz auf weiß, theme-unabhängig ────────────────────── */
@media print {
@page { margin: 1.5cm; }
body {
background: white !important;
color: black !important;
}
.topbar, .meta, footer { display: none !important; }
.tab-area {
padding: 0;
background: none;
}
.tab-page {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0;
width: 100%;
max-width: none;
overflow: visible;
color: black;
gap: 1.5rem;
}
.tab-page::before { display: none; }
.tab-page::after {
content: var(--print-title, "");
display: block;
order: -1;
font-family: system-ui, sans-serif;
font-size: 1.3rem;
font-weight: 700;
color: black;
margin-bottom: .3rem;
padding-bottom: .5rem;
border-bottom: 2px solid #333;
}
.bar-numbers { color: #555 !important; opacity: 1; }
.bar-numbers .bar-num { color: #333 !important; opacity: 1; }
.string-label { color: #111 !important; }
.bar-sep { color: #111 !important; }
.cell { background: transparent !important; color: black !important; box-shadow: none !important; }
.string-row::after { background: #777 !important; opacity: 1 !important; }
/* Legal pages */
.legal-area { padding: 0; }
.legal-page {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0;
max-width: 100%;
color: black !important;
}
.legal-page::before { display: none; }
.legal-body h2,
.legal-body h3,
.legal-body h4 { color: black !important; }
.legal-body h3 { border-bottom-color: #888 !important; }
.legal-body p,
.legal-body li,
.legal-body strong { color: black !important; }
.legal-body a { color: black !important; text-decoration: underline; }
.legal-body code { background: #f0f0f0 !important; color: black !important; border-color: #ccc !important; }
.legal-card { background: #f5f5f5 !important; border-color: #ccc !important; border-left-color: #555 !important; }
.legal-card-eyebrow,
.legal-card-address { color: #333 !important; }
.legal-footer { display: none !important; }
}