/* Global Styles & Lato Font Application */
body {
    font-family: 'Lato', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    /*background-color: #f4f4f4;*/
    background-color: #1a1a1a;
    color: #333;
}

/* Header Styles */
header {
    background-color: #004A7C; 
    color: white;
    padding: 1em 20px;
    text-align: center;
}

header h1 {
    margin: 0 0 0.5em 0;
    font-size: 1.8em;
}

.subheader {
    font-size: 0.9em;
    max-width: 800px;
    margin: 0 auto;
}

.subheader p {
    margin: 0.3em 0;
}

/* Search index build status (only shown while building or on failure) */
#index-status {
    font-size: 0.85em;
    margin: 10px 0 0;
    color: #f0f0f0;
}

/* Table of Contents Navigation */
nav#toc-nav {
    padding: 15px 20px;
    background-color: #333;
    text-align: center;
}

nav#toc-nav h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.4em;
}

#chapter-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#chapter-list li {
    margin: 5px;
}

#chapter-list button, .subsection-links button {
    background-color: #003366;
    color: white;
    border: none;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1em;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

#chapter-list button:hover, .subsection-links button:hover {
    background-color: #1976D2;
}

#chapter-list button.active {
    background-color: #2196F3;
    /*font-weight: bold;*/
}

/* Main Content Area */
main {
    padding: 20px;
    max-width: 900px;
    margin: 20px auto; 
    background-color: white;
    /*box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    border-radius: 5px; 
}

/* Search Bar */
.search-container {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
}

#search-input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
}

#search-button, #clear-search-button {
    padding: 10px 15px;
    background-color: #5cb85c; 
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}
#clear-search-button {
    background-color: #f0ad4e; 
}

#search-button:hover {
    background-color: #4cae4c;
}
#clear-search-button:hover {
    background-color: #ec971f;
}

/* Subsection Links */
#subsection-links-container {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
#subsection-links-container h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.2em;
}
.subsection-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

hr.content-divider {
    border: 0;
    height: 1px;
    background: #ddd;
    margin: 20px 0;
}

/* Content Display Area (from chapters) */
#content-display {
    margin-top: 20px;
}

#content-display p, #content-display li, #content-display td, #content-display th {
    font-size: 1rem; /* Base font size for content */
    color: #000;
}

#content-display h1, #content-display h2, #content-display h3, #content-display h4,
#content-display .SectionHead, #content-display .SubChapterHead { /* If your local HTML uses these classes */
    font-family: 'Lato', sans-serif; /* Ensure Lato for headings from source */
    color: #004A7C;
}

#content-display .SectionHead { 
    font-weight: bold;
    font-size: 1.3em;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}
#content-display .SubChapterHead { 
    font-weight: bold;
    font-size: 1.1em;
    margin-top: 1em;
    margin-bottom: 0.3em;
}
#content-display table {
    width: 100%; 
    max-width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
    font-size: 0.9rem; 
}
#content-display th, #content-display td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
    vertical-align: top; 
}
#content-display th {
    background-color: #f0f0f0;
}
#content-display a[href] { 
    color: #1a0dab; /* Standard link blue */
}
#content-display a:not([href]) { /* Named anchors wrapping section titles are not links */
    color: inherit;
}
#content-display a[href]:visited {
    color: #551a8b; /* Standard visited link purple */
}
#content-display img { 
    max-width: 100%;
    height: auto;
    display: block; 
    margin: 0.5em 0; 
}

/* Warning Box for Parsing Issues */
.warning-box {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}
.warning-box strong {
    color: #664d03;
}

/* Search Highlight Styles */
.highlight { /* For in-page search term highlighting */
    background-color: yellow;
    font-weight: bold;
    color: black; 
}

/* Global Search Results List Styles */
ul.search-results-list {
    list-style-type: none;
    padding-left: 0;
}
ul.search-results-list li {
    margin-bottom: 1.5em;
    padding-bottom: 1em;
    border-bottom: 1px solid #eee;
}
ul.search-results-list li:last-child {
    border-bottom: none;
}
a.search-result-link {
    font-weight: bold;
    text-decoration: none;
    color: #004A7C; 
    font-size: 1.1em;
}
a.search-result-link:hover {
    text-decoration: underline;
}
p.search-snippet {
    font-size: 0.9em;
    color: #555;
    margin-top: 0.3em;
    line-height: 1.5;
}
strong.search-hit { /* For highlighting term in search result snippet */
    background-color: #FFD700; /* Gold */
    padding: 1px 0;
    font-weight: bold; /* Ensure it stands out */
}

/* Footer Styles */
footer {
    text-align: center;
    padding: 15px;
    background-color: #333;
    color: white;
    font-size: 0.8em;
    margin-top: 20px;
}

/* Scroll-to-Top Button Styles */
#scrollToTopBtn {
  display: none; /* Hidden by default, JS will manage 'show' class */
  position: fixed;
  bottom: 25px;
  left: 50%; /* For horizontal centering */
  transform: translateX(-50%); /* Correctly center after left: 50% */
  z-index: 100;
  border: none;
  outline: none;
  background-color: #004A7C;
  color: white; /* Used by the ::before element's border */
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, background-color 0.3s ease;
  opacity: 0;
  visibility: hidden;
}

/* Upward pointing CHEVRON using a pseudo-element */
#scrollToTopBtn::before {
  content: '';
  position: absolute;
  box-sizing: border-box;

  /* Position the center of the transform at the button's center */
  left: 50%;
  top: 50%;

  /* Define the size of the square from which the chevron arms are made */
  /* The length of each arm of the chevron will be roughly this size. */
  width: 10px;  /* Adjust for overall size of the chevron */
  height: 10px; /* Adjust for overall size of the chevron */

  /* Create two borders (top and right) on this square */
  /* These will form the "L" shape that gets rotated into a chevron. */
  border-top: 3px solid white !important;   /* Adjust thickness of the chevron lines */
  border-right: 3px solid white !important;  /* Adjust thickness of the chevron lines */
  border-bottom: 0 !important;
  border-left: 0 !important;


  /*
    Transform Explanation:
    1. rotate(-45deg): Rotates the square (with its top and right borders)
       counter-clockwise. This turns the "L" shape into an upward-pointing chevron.
    2. translate(-50%, -75%): This positions the rotated chevron.
       - translateX(-50%): Centers the chevron horizontally relative to its own width.
       - translateY(-75%): Shifts the chevron vertically. The -75% (instead of -50%)
         helps to visually center the chevron, pushing it slightly upwards because
         the visual "point" of the chevron is its highest part.
         You might need to fine-tune the -75% (e.g., to -70% or -80%) for perfect
         visual centering based on the exact arm length and thickness.
  */
  transform: translate(-50%, -75%) rotate(-45deg);
}

/* Change H5 header size & match site theme */
#content-display h5, h5 {
font-family: 'Lato', sans-serif;
color: #004A7C;
font-size: 1.5rem;
font-weight: bold;
margin-top: 1.2rem;
margin-bottom: 0.5rem;
}

#scrollToTopBtn.show {
  opacity: 1;
  visibility: visible;
  display: block;
}

#scrollToTopBtn:hover {
  background-color: #2196F3; /* Lighter blue on hover */
}

.tasbox {
  border: 1px solid #ccc;
  background-color: #b0aea7;
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 4px;
  display: block; /* Ensures the <p> tag behaves like a container */
}

/* Section headers: land a little below the top edge after a jump */
#content-display h5, #content-display p {
    scroll-margin-top: 12px;
}

/* Side section index */
#section-index {
    position: fixed;
    top: 20px;
    left: max(12px, calc(50% - 536px - 272px)); /* beside the 1072px content column */
    width: 250px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain; /* reaching either end must not scroll the page behind it */
    z-index: 90;
    background-color: #262626;
    border-radius: 5px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    padding: 12px 0;
    font-size: 0.85rem;
    line-height: 1.35;
}
#section-index[hidden] { display: none; }
.section-index-title {
    color: #fff;
    font-weight: bold;
    padding: 0 14px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid #3a3a3a;
}
.section-index-list, .section-index-list ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
.section-index-list a {
    display: block;
    padding: 5px 14px;
    color: #cfcfcf;
    text-decoration: none;
    border-left: 3px solid transparent;
}
.section-index-list a:hover {
    background-color: #333;
    color: #fff;
}
/* Level 1: chapters */
.si-chapter > a {
    font-weight: bold;
}
.si-chapter.current > a {
    color: #fff;
    background-color: #1f1f1f;
}
/* Level 2: sections of the open chapter */
.si-sections a {
    padding-left: 26px;
}
.si-sections > li.active > a {
    color: #fff;
    font-weight: bold;
    border-left-color: #2196F3;
}
/* Level 3: subsections, only under the section being read */
.si-subs { display: none; }
.si-sections > li.active > .si-subs { display: block; }
.si-subs a {
    padding: 3px 14px 3px 40px;
    color: #a8a8a8;
}
.si-subs a.current {
    color: #fff;
    background-color: #004A7C;
}

#section-index-toggle {
    display: none;
    position: fixed;
    bottom: 25px;
    right: 20px;
    z-index: 100;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: #004A7C;
    color: white;
    font-size: 1.4em;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#section-index-toggle:hover { background-color: #2196F3; }

/* Not enough room beside the page: index becomes a drawer opened by the § button */
@media (max-width: 1639px) { /* 1072px column + 2 x (250px index + gaps) */
    #section-index-toggle:not([hidden]) { display: block; }
    #section-index {
        display: none;
        left: auto;
        right: 12px;
        top: auto;
        bottom: 90px;
        width: min(300px, calc(100vw - 24px));
        max-height: calc(100vh - 130px);
    }
    #section-index.open:not([hidden]) { display: block; }
}


/* =====================================================================
   BAC theme (2026-10-20): visual layer matching brunjes.us. Appended
   after the original rules and overrides colors, type and surfaces only.
   Delete from here down (plus the .bac-bar header block and the font
   link in index.html) to return to the previous look.
   ===================================================================== */
:root{
  --paper:#f6f4ee; --sheet:#fffdf8; --ink:#16202a; --ink-2:#47525d; --rule:#cfd3d4;
  --grid:rgba(27,117,187,.07); --blue:#135e9a; --blue-hi:#29a8e0; --blue-bg:#e3f0f9; --focus:#c2410c;
  --on-blue:#ffffff; --field-focus:#ffffff; --tasbox:#ebe8e0; --visited:#5b3e8a; color-scheme:light;
  --sans:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,sans-serif;
  --mono:"Atkinson Hyperlegible Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
  --grid:rgba(41,168,224,.06); --paper:#0f1720; --sheet:#15202b; --ink:#e9eef2; --ink-2:#a9b5bf; --rule:#2c3a47;
  --blue:#6cc4ef; --blue-bg:#16324a; --focus:#fb923c; --on-blue:#0f1720; --field-focus:#1b2733;
  --tasbox:#2e4052; --visited:#c4a7f5; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --grid:rgba(41,168,224,.06); --paper:#0f1720; --sheet:#15202b; --ink:#e9eef2; --ink-2:#a9b5bf; --rule:#2c3a47;
  --blue:#6cc4ef; --blue-bg:#16324a; --focus:#fb923c; --on-blue:#0f1720; --field-focus:#1b2733;
  --tasbox:#2e4052; --visited:#c4a7f5; color-scheme:dark;
}
body{
  font-family:var(--sans); color:var(--ink); background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;
}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px}
button,input{font-family:var(--sans)}

/* header */
header{background:var(--sheet); color:var(--ink); border-bottom:1px solid var(--rule); padding:0 20px 1.5em}
.bac-bar{max-width:900px; margin:0 auto 1.5em; padding:.9em 0; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-bottom:1px solid var(--rule); text-align:left}
.bac-brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--ink); font-weight:800; font-size:1.15rem; line-height:1.1}
.bac-brand img{width:40px; height:40px}
.bac-brand small{display:block; font-weight:400; color:var(--ink-2); font-size:.8rem}
.bac-tag{margin:0; display:flex; align-items:center; gap:.6rem; font:400 .78rem var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)}
.bac-tag b{color:var(--blue); font-weight:600; border:1.5px solid currentColor; padding:.15rem .5rem; border-radius:2px}
header h1{font-weight:800; font-size:clamp(1.5em,3.5vw,2.1em); letter-spacing:-.015em; line-height:1.15}
.subheader{color:var(--ink-2)}
.subheader strong{color:var(--ink)}
#index-status{color:var(--ink-2)}

/* table of contents */
nav#toc-nav{background:transparent; padding:22px 20px 6px}
nav#toc-nav h2{font:600 .78rem var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin-bottom:12px}
#chapter-list button,.subsection-links button{background-color:var(--sheet); color:var(--blue); border:2px solid var(--blue); font-weight:800; transition:background-color .15s ease; white-space:normal; max-width:100%}
/* Full section/chapter names: let a long label wrap instead of stretching the row */
#chapter-list button,.subsection-links button{line-height:1.25; max-width:min(100%, 30ch)}
.subsection-links button{text-align:left}
#chapter-list button:hover,.subsection-links button:hover{background-color:var(--blue-bg)}
#chapter-list button.active{background-color:var(--blue); color:var(--on-blue)}

/* main sheet */
main{background-color:var(--sheet); border:1px solid var(--rule); border-radius:4px; box-shadow:0 1px 0 var(--rule),0 18px 40px -24px rgba(0,0,0,.25)}
#search-input{background:var(--paper); border:1.5px solid var(--ink-2); color:var(--ink)}
#search-input:focus{border-color:var(--blue); background:var(--field-focus)}
#search-input{min-width:0}  /* let the box shrink so Search/Clear fit on phones */
@media (max-width:420px){#search-button,#clear-search-button{padding:10px 12px}}
#search-button{background-color:var(--blue); color:var(--on-blue); border:2px solid var(--blue); font-weight:800}
#search-button:hover{background-color:var(--ink); color:var(--sheet); border-color:var(--ink)}
#clear-search-button{background-color:transparent; color:var(--blue); border:2px solid var(--blue); font-weight:800}
#clear-search-button:hover{background-color:var(--blue-bg)}
#subsection-links-container{border-bottom-color:var(--rule)}
hr.content-divider{background:var(--rule)}

/* chapter content */
#content-display p,#content-display li,#content-display td,#content-display th{color:var(--ink)}
#content-display h1,#content-display h2,#content-display h3,#content-display h4,
#content-display .SectionHead,#content-display .SubChapterHead,#content-display h5,h5{font-family:var(--sans); color:var(--blue)}
#content-display th,#content-display td{border-color:var(--rule)}
#content-display th{background-color:var(--paper)}
#content-display a[href]{color:var(--blue)}
#content-display a[href]:visited{color:var(--visited)}
.tasbox{background-color:var(--tasbox); border:1px solid var(--rule); border-left:4px solid var(--ink-2)}
a.search-result-link{color:var(--blue)}
p.search-snippet{color:var(--ink-2)}
ul.search-results-list li{border-bottom-color:var(--rule)}

/* side section index: light panel */
#section-index{background-color:var(--sheet); border:1px solid var(--rule); border-radius:4px; box-shadow:0 18px 40px -24px rgba(0,0,0,.3)}
.section-index-title{color:var(--blue); font-family:var(--mono); font-weight:600; letter-spacing:.06em; text-transform:uppercase; border-bottom-color:var(--rule)}
.section-index-list a{color:var(--ink-2)}
.section-index-list a:hover{background-color:var(--blue-bg); color:var(--ink)}
.si-chapter.current > a{color:var(--ink); background-color:var(--paper)}
.si-sections > li.active > a{color:var(--ink); border-left-color:var(--blue)}
.si-subs a{color:var(--ink-2)}
.si-subs a.current{color:var(--on-blue); background-color:var(--blue)}

/* floating buttons */
#scrollToTopBtn,#section-index-toggle{background-color:var(--blue); color:var(--on-blue)}
#scrollToTopBtn::before{border-top-color:var(--on-blue) !important; border-right-color:var(--on-blue) !important}
#scrollToTopBtn:hover,#section-index-toggle:hover{background-color:var(--ink); color:var(--sheet)}
#scrollToTopBtn:hover::before{border-top-color:var(--sheet) !important; border-right-color:var(--sheet) !important}

/* footer as a drawing title block */
footer{max-width:900px; margin:20px auto 40px; background:var(--sheet); color:var(--ink); border:2px solid var(--ink); padding:.75em 1em; text-align:left; font-size:.85em}
footer p{margin:0}

/* dark view details: figures are black line drawings, keep them on white; search hits stay readable */
#content-display img{background:#fff; padding:4px; border-radius:2px}
strong.search-hit,.highlight{color:#000}

/* header bar sized like brunjes.us: full-width bar, 72rem content, 46px logo */
.bac-bar{max-width:none; min-height:calc(5rem + 1px); margin:0 -20px 1.5em; box-sizing:border-box;
  /* same left edge as brunjes.us: centred 72rem column plus its gutter (header has 20px padding, hence +40px) */
  padding:0 calc(max(0px, (100% + 40px - 72rem) / 2) + clamp(1rem,4vw,2.5rem))}
.bac-brand{font-size:1.35rem}
.bac-brand img{width:46px; height:46px}
.bac-brand small{font-size:.94rem}
@media (max-width:560px){ .bac-tag-txt{display:none} .bac-head-in,.bac-bar{flex-wrap:nowrap} }
@media (max-width:820px){ .bac-bar{min-height:calc(4.25rem + 1px)} .bac-brand{font-size:1.125rem} .bac-brand img{width:38px;height:38px} .bac-brand small{font-size:.78rem} }

/* keep the chapter row inside the header column (72rem) */
#chapter-list button{padding:10px 10px}
#chapter-list li{margin:4px}

.bac-right{display:flex; align-items:center; gap:1rem}
@media (max-width:560px){ .bac-right{gap:.5rem} }
/* light/dark switch: sun · pill · moon (same on brunjes.us, prf and tas) */
.theme-switch{flex:none;display:inline-flex;align-items:center;gap:.45rem;background:none;border:0;padding:6px 4px;margin:0;cursor:pointer;color:var(--ink-2);border-radius:999px;-webkit-tap-highlight-color:transparent}
.ts-ico{width:1.15rem;height:1.15rem;flex:none}
.ts-track{position:relative;display:block;width:3.1rem;height:1.7rem;border-radius:999px;background:var(--paper);border:1.5px solid var(--rule);box-sizing:border-box;box-shadow:inset 0 1px 3px rgba(0,0,0,.12)}
.ts-knob{position:absolute;top:50%;left:.15rem;width:1.2rem;height:1.2rem;border-radius:50%;background:var(--sheet);border:1.5px solid var(--ink-2);box-sizing:border-box;
  transform:translateY(-50%);transition:left .2s ease;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.theme-switch[aria-checked="true"] .ts-knob{left:calc(100% - 1.35rem);background:var(--ink-2);border-color:var(--ink-2)}
.theme-switch[aria-checked="false"] .ts-sun,.theme-switch[aria-checked="true"] .ts-moon{color:var(--ink)}
.theme-switch:hover .ts-track{border-color:var(--ink-2)}
@media (max-width:420px){.theme-switch .ts-ico{display:none}}
@media (prefers-reduced-motion:reduce){.ts-knob{transition:none}}

/* header like brunjes.us: translucent page-colored bar; title block as a centered card (same width as main) */
header{background:transparent; border-bottom:0; padding:0}
.bac-bar{margin:0 0 1.5em; background:color-mix(in srgb,var(--paper) 92%,transparent); backdrop-filter:blur(8px);
  padding:0 calc(max(0px, (100% - 72rem) / 2) + clamp(1rem,4vw,2.5rem))}
.tas-title{max-width:1072px; margin:0 auto; box-sizing:border-box; padding:1.4em 20px 1.2em; text-align:center;
  background:var(--sheet); border:1px solid var(--rule); border-radius:4px; box-shadow:0 1px 0 var(--rule),0 18px 40px -24px rgba(0,0,0,.25)}
.tas-title h1{margin-top:0}
/* phones: edge to edge, like the main card below it */

/* body, title and footer share the chapter row's 1072px column (the 72rem header column minus its gutters) */
main{max-width:1072px; box-sizing:border-box}
footer{max-width:1072px; box-sizing:border-box}
@media (max-width:1112px){ main,footer{margin-left:20px; margin-right:20px} .tas-title{margin-left:20px; margin-right:20px} }
@media (max-width:600px){ main,footer,.tas-title{margin-left:0; margin-right:0} }

/* ---- PROWAG content ----
   The source marks up chapters as h2, sections (R302) as h3, subsections (R302.2) as h4
   and anything deeper as h5, so the heading scale is set here rather than inherited from
   the TAS rules above, which gave h5 the section look. */
#content-display h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 .8rem;
}
#content-display h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 1.8rem 0 .5rem;
    padding-top: .6rem;
    border-top: 1px solid var(--rule);
}
#content-display h4 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 1.2rem 0 .35rem;
}
#content-display h5, h5 {
    font-size: 1rem;
    margin: 1rem 0 .3rem;
}
#content-display h6 {
    font-size: .95rem;
    font-weight: 600;
    color: var(--ink-2);
    margin: .9rem 0 .3rem;
}
/* Any heading should land just below the top edge after a jump. */
#content-display h2, #content-display h3, #content-display h4,
#content-display h5, #content-display h6, #content-display p {
    scroll-margin-top: 12px;
}

/* Figures. The source puts class="advisory" on every figure; it carries no meaning
   beyond "this is a figure", so both kinds are styled the same. */
#content-display figure {
    margin: 1.2em 0;
    padding: 12px;
    background-color: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 4px;
}
#content-display figure img {
    margin: 0 auto;
    background-color: #fff; /* line drawings are transparent PNGs drawn in black */
    border-radius: 2px;
}
/* Some drawings are tall (the accessibility symbol is 1426x1630); without a cap they
   fill the screen. Width still shrinks to fit on narrow screens. */
#content-display img {
    max-height: 70vh;
    width: auto;
    object-fit: contain;
}
#content-display figcaption {
    font-family: var(--mono);
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: .6em;
    text-align: center;
}

/* "EXCEPTION:" and "EXCEPTIONS:" paragraphs, set off the way the printed guidelines do. */
#content-display p.exception {
    margin-left: 1.5em;
    padding-left: .9em;
    border-left: 3px solid var(--rule);
    color: var(--ink-2);
}
#content-display p.exception + p.exception-cont {
    margin-top: .4em;
}
#content-display p.exception .exception-label {
    font-weight: 700;
    color: var(--ink);
}

#content-display table {
    margin: 1.2em 0;
}
#content-display caption {
    font-weight: 700;
    text-align: left;
    padding-bottom: .4em;
}
#content-display tbody tr:nth-child(odd) {
    background-color: var(--paper);
}

/* Defined terms (R104.3) come through as a definition list. */
#content-display dl {
    margin: .6em 0 1.2em;
}
#content-display dt {
    font-weight: 700;
    color: var(--ink);
    margin-top: .7em;
}
#content-display dd {
    margin: .15em 0 0 1.5em;
    color: var(--ink);
}