:root { --fg:#1a1a1a; --muted:#666; --line:#d8d8d8; --accent:#8b1a1a; --bg:#fff;
        --panel:#f6f6f4;
        /* The site's graph paper, copied from theme/style.css so a built
           manual reads as part of jdmfsm.info rather than a bare white page. */
        --paper:#f7f6f2; --grid:rgba(31,110,140,.09); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; color:var(--fg); line-height:1.5;
       font:16px/1.5 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
       background-color:var(--paper);
       background-image:
         linear-gradient(var(--grid) 1px, transparent 1px),
         linear-gradient(90deg, var(--grid) 1px, transparent 1px);
       background-size:26px 26px; }
a { color:var(--accent); }
/* The manual's own contents.css styles every a:link at 10pt with an underline.
   That rule is more specific than a plain class, so the site chrome has to match
   on link state too, and restate its size. */
.card:link, .card:visited, ul.list a:link, ul.list a:visited,
header.site a.home:link, header.site a.home:visited,
.pager a:link, .pager a:visited, nav.crumb a:link, nav.crumb a:visited {
  text-decoration:none; font-size:inherit;
}
.card:hover, ul.list a:hover, .pager a:hover { text-decoration:underline; }
header.site { position:sticky; top:0; z-index:10; background:var(--panel);
              border-bottom:1px solid var(--line); padding:.6rem .9rem; }
header.site a.home { font-weight:700; text-decoration:none; color:var(--fg); }
header.site .sub { color:var(--muted); font-size:.85rem; }
main { padding:.9rem; max-width:70rem; margin:0 auto; }
nav.crumb { font-size:.85rem; color:var(--muted); margin:0 0 .9rem;
            word-wrap:break-word; }
nav.crumb a { color:var(--muted); }
h1 { font-size:1.35rem; margin:.2rem 0 1rem; }
h2 { font-size:1rem; text-transform:uppercase; letter-spacing:.04em;
     color:var(--muted); margin:1.6rem 0 .5rem; }
ul.list { list-style:none; margin:0; padding:0; }
ul.list li { border-bottom:1px solid var(--line); }
ul.list a { display:block; padding:.75rem .2rem; text-decoration:none; }
ul.list a:hover { background:var(--panel); }
ul.list .kind { color:var(--muted); font-size:.8rem; }
/* A row carrying a second link -- a wiring diagram and its connector list --
   keeps both on one line; ul.list a is display:block, so without this the
   second link becomes a row of its own and reads as another diagram. */
ul.list li.split { display:flex; align-items:baseline; gap:.5rem; }
ul.list li.split > a:first-child { flex:1 1 auto; }
ul.list li.split > a.kind { flex:0 0 auto; padding:.75rem .2rem; white-space:nowrap; }
.grid { display:grid; gap:.5rem; grid-template-columns:1fr; }
@media (min-width:40rem) { .grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:64rem) { .grid { grid-template-columns:repeat(3,1fr); } }
.card { display:block; padding:.9rem; border:1px solid var(--line); border-radius:6px;
        text-decoration:none; color:var(--fg); background:var(--panel); }
.card:hover { border-color:var(--accent); }
.card b { display:block; }
.card span { color:var(--muted); font-size:.85rem; }
/* The document body comes from the manual's own stylesheet; keep wide tables and
   figures inside the viewport instead of stretching the page. */
.doc { overflow-x:auto; }
.doc img { max-width:100%; height:auto; }
.doc table { max-width:100%; }
.pager { display:flex; gap:.5rem; justify-content:space-between; margin:2rem 0 0;
         border-top:1px solid var(--line); padding-top:.9rem; }
.pager a { text-decoration:none; padding:.5rem 0; }
#q { width:100%; padding:.7rem .8rem; font-size:1rem; border:1px solid var(--line);
     border-radius:6px; }
#results li b { font-weight:600; }
.fig { text-align:center; }
.fig img { max-width:100%; height:auto; border:1px solid var(--line); }
footer { color:var(--muted); font-size:.8rem; padding:2rem .9rem; text-align:center; }
/* Only the manual's own front page carries this: a way back out to the whole
   collection at the site root. */
header.site a.root { display:inline-flex; align-items:center; vertical-align:middle;
  margin-right:.5rem; color:var(--muted); text-decoration:none; }
header.site a.root:link, header.site a.root:visited { color:var(--muted); text-decoration:none; }
header.site a.root:hover { color:var(--accent); }

.tablewrap { overflow-x: auto; margin: 0 0 1.2rem; -webkit-overflow-scrolling: touch; }
table.pins { border-collapse: collapse; margin: 0; font-size: .92rem; }
table.pins th, table.pins td { border: 1px solid var(--rule, #d6d2c8); padding: .3rem .55rem;
  text-align: left; vertical-align: top; }
table.pins th { background: rgba(0,0,0,.04); font-weight: 600; }
.figure { margin: 0 0 1.5rem; }
.figure img, .figure object { max-width: 100%; height: auto; background: #fff; }
.figure.view img { max-height: 55vh; width: auto; display: block; }
.figure figcaption { font-size: .85rem; opacity: .75; margin-top: .3rem; }
.schematic object, .schematic img { width: 100%; height: 78vh; min-height: 420px; background: #fff;
  border: 1px solid var(--rule, #d6d2c8); }
.docsec { margin: 0 0 2.5rem; }
.docsec > h2 { border-bottom: 1px solid var(--rule, #d6d2c8); padding-bottom: .25rem; }
.results .more { opacity: .7; font-style: italic; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem; }