directly under
, so enumerating selectors is fragile — using the universal child
selector catches every wrapper plus the running-header table.ears. */
body.xml2rfc > *:not(#toc) {
max-width: var(--p1-content-max);
}
/* xml2rfc header table reads like a form — soften its borders */
body.xml2rfc table.head td {
border-color: var(--p1-rule);
color: var(--p1-ink-mute);
}
/* ---------- Sidebar: pin #toc to the left ---------- */
body.xml2rfc #toc {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: var(--p1-sidebar-w);
overflow-y: auto;
background: var(--p1-sidebar-bg);
border-left: 0;
border-bottom: 0;
padding: 0 20px 32px 22px;
margin: 0;
font-size: 13.5px;
line-height: 1.5;
z-index: 10;
}
/* Sticky logo header on top of the sidebar — full-width white background
so TOC items disappear behind it as they scroll up. */
body.xml2rfc #toc::before {
content: "";
display: block;
position: sticky;
top: 0;
/* Cancel the parent's horizontal padding so the white bg spans full sidebar */
margin: 0 -20px 16px -22px;
height: 80px;
background: #fff url("1password-logo-dark.svg") no-repeat 22px 28px;
background-size: 140px auto;
z-index: 1;
}
body.xml2rfc #toc section {
padding: 0;
}
body.xml2rfc #toc h2 {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--p1-ink-mute) !important; /* defeats `color: white` in xml2rfc < 1024px rule */
font-weight: 600;
margin: 0 0 12px;
padding: 0 0 10px;
min-width: 0;
text-align: left;
background: transparent none !important; /* defeats `background-color: #444` in xml2rfc < 1024px rule */
cursor: default;
border-top: 0;
border-bottom: 1px solid var(--p1-rule);
}
body.xml2rfc #toc h2::before {
/* xml2rfc draws a CSS hamburger here for its collapsed mobile TOC.
We keep the TOC permanently expanded, so blank it out. */
content: none;
display: none;
}
body.xml2rfc #toc h2 a {
color: inherit;
text-decoration: none;
}
/* xml2rfc's < 1024px media query sets `#toc nav { display: none }` to hide
the TOC behind its hamburger. We always want it visible. */
body.xml2rfc #toc nav,
body.xml2rfc #toc nav.toc {
display: block;
height: auto;
padding: 0;
border-left: 0;
}
/* The xml2rfc "back to top" arrow inside the sidebar is noise here */
body.xml2rfc #toc a.toplink {
display: none;
}
body.xml2rfc #toc nav.toc ul {
list-style: none;
padding-left: 14px;
margin: 0;
}
body.xml2rfc #toc nav.toc > ul {
padding-left: 0;
}
body.xml2rfc #toc nav.toc li {
margin: 2px 0;
}
body.xml2rfc #toc nav.toc p {
margin: 1px 0;
line-height: 1.45;
}
body.xml2rfc #toc nav.toc a {
color: var(--p1-ink);
text-decoration: none;
}
body.xml2rfc #toc nav.toc a:hover {
color: var(--p1-accent);
text-decoration: underline;
}
body.xml2rfc #toc nav.toc a.auto {
color: var(--p1-ink-mute);
margin-right: 4px;
font-variant-numeric: tabular-nums;
}
/* ---------- Code & figures ---------- */
body.xml2rfc pre,
body.xml2rfc .sourcecode {
background: var(--p1-code-bg);
border: 1px solid var(--p1-rule);
border-radius: 4px;
padding: 12px 14px;
font-size: 13px;
}
/* ---------- Informative asides ---------- */
body.xml2rfc aside {
background-color: #eef3fb;
border-left: 4px solid var(--p1-accent);
border-radius: 4px;
padding: 12px 18px;
margin: 1em 0;
color: var(--p1-ink);
}
body.xml2rfc aside > :first-child { margin-top: 0; }
body.xml2rfc aside > :last-child { margin-bottom: 0; }
/* Aside title: first
in the first , colored to match the stripe. */
body.xml2rfc aside > p:first-of-type > strong:first-child {
color: var(--p1-accent);
}
/* Non-normative annex: same shape, red palette. */
body.xml2rfc #non-normative-annex aside {
background-color: #fdf2f2;
border-left-color: #c0392b;
}
body.xml2rfc #non-normative-annex aside > p:first-of-type > strong:first-child {
color: #c0392b;
}
/* Per-draft body class controls aside color: local-delegated uses yellow.
The body class is injected by the Makefile post-process step. */
body.xml2rfc.draft-local-delegated aside {
background-color: #fff7e0;
border-left-color: #d4a017;
}
body.xml2rfc.draft-local-delegated aside > p:first-of-type > strong:first-child {
color: #b8860b;
}
/* ---------- Narrow desktop: shrink sidebar + content but keep side-by-side ----------
Below the comfortable ~1100px width, the 300px sidebar + 680px content max
leaves no breathing room. Tighten both before falling back to mobile flow. */
@media (max-width: 1100px) and (min-width: 901px) {
body.xml2rfc {
--p1-sidebar-w: 240px;
--p1-content-max: 560px;
}
body.xml2rfc #toc {
font-size: 12.5px;
}
body.xml2rfc #toc::before {
height: 70px;
background-size: 120px auto;
}
}
/* ---------- Mobile: return the TOC to normal flow ---------- */
@media (max-width: 900px) {
body.xml2rfc {
padding-left: 16px;
padding-right: 16px;
}
body.xml2rfc #toc {
position: static;
width: auto;
height: auto;
border-left: 0;
border-bottom: 1px solid var(--p1-rule);
padding: 0 16px 24px;
}
body.xml2rfc #toc::before {
margin: 0 -16px 16px -16px;
height: 80px;
background-position: 16px 20px;
background-size: 120px auto;
}
}
/* ---------- Print: drop the sidebar entirely ---------- */
@media print {
body.xml2rfc {
padding-left: 0;
padding-right: 0;
}
body.xml2rfc #toc {
position: static;
width: auto;
border: 0;
padding: 0;
}
body.xml2rfc #toc::before {
display: none;
}
}