/* Shared by kalender-verstehen.html and understanding-calendars.html.
   Only what those pages add on top of the shared styles.css: prose width,
   one comparison table and a couple of accents.

   This lives in a file rather than a <style> block because the vhost sends
   style-src 'self' without 'unsafe-inline' - an inline block is dropped by
   the browser, which silently unstyles the page. See deploy/nginx/rypox.com.conf. */

.prose { max-width: 68ch; }
.prose p { color: var(--muted); }
.prose p strong, .prose li strong { color: var(--text); }

.lede { font-size: 1.1rem; }

.tableWrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.compare {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    margin-top: 8px;
}
table.compare th, table.compare td {
    text-align: left;
    vertical-align: top;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}
table.compare thead th {
    color: var(--text);
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255,255,255,0.22);
}
table.compare tbody th {
    color: var(--text);
    font-weight: 600;
    width: 26%;
}
table.compare td { color: var(--muted); }
table.compare tbody tr:last-child th,
table.compare tbody tr:last-child td { border-bottom: none; }

.note {
    border-left: 3px solid var(--brand);
    background: var(--card2);
    border-radius: 0 12px 12px 0;
    padding: 14px 18px;
    margin: 22px 0;
    color: var(--muted);
}
.note strong { color: var(--text); }

.toc { margin: 0; padding: 0; list-style: none; }
.toc li { margin: 0 0 8px; }
.toc a { color: var(--brand2); }

/* The diagram ships as two SVGs: wide side-by-side for desktop, stacked for
   phones. A single version won't do - at 390 px the wide version shrinks the
   labels to an unreadable size. A media query switches between them, so
   exactly one is ever visible. */
.diagram { margin: 30px 0 0; padding: 0; max-width: 900px; }
.diagram svg { display: block; width: 100%; height: auto; font-family: inherit; }
.diagram .dNarrow { display: none; max-width: 420px; margin: 0 auto; }
@media (max-width: 700px) {
    .diagram .dWide { display: none; }
    .diagram .dNarrow { display: block; }
}
.diagram figcaption {
    margin-top: 18px;
    color: var(--muted);
    font-size: 0.92rem;
    max-width: 62ch;
}