: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); }

.conn-list { list-style: none; padding: 0; margin: 0; }
.conn-list li { border-bottom: 1px solid #e4e4e7; }
.conn-list a { display: block; padding: .55rem .2rem; text-decoration: none; }
.conn-list code { font: 600 .95rem/1.2 ui-monospace, Menlo, Consolas, monospace;
                  color: #1d4ed8; margin-right: .5rem; }
.conn-list .where { display: block; color: #71717a; font-size: .78rem; }
/* Connector drawings are a few KB each, so they sit under their name rather
   than behind a click. Drawn at ~50px; scaled to a readable height. */
.conn-list img { display: block; height: 7rem; width: auto; max-width: 100%;
                 object-fit: contain; object-position: left; margin: .4rem 0 .1rem;
                 background: #fff; border: 1px solid var(--line); border-radius: 4px;
                 padding: .3rem; }
.conn-list .nolink { padding: .55rem .2rem; }
.conn-list .nolink a { display: inline; padding: 0; margin-left: .5rem; }
.conn-list .pins, .conn-list .only { color: #71717a; font-size: .78rem; margin-left: .4rem; }
.conn-list .only { font-style: italic; }
/* The second link of a connector row sits under the drawing, not inside the
   first link: an <a> cannot hold an <a>. */
.conn-list a.rep { padding: .1rem .2rem .55rem; font-size: .8rem; }
/* Terminal repair page: one block per connector part, one card per terminal. */
.rep-part { border-bottom: 1px solid var(--line); padding: .3rem 0 1rem; }
.rep-part h2 { text-transform: none; letter-spacing: 0; color: var(--fg);
               font-size: 1.05rem; margin: 1rem 0 .2rem; overflow-wrap: anywhere; }
.rep-part h2 code { font: 600 1rem/1.2 ui-monospace, Menlo, Consolas, monospace;
                    color: #1d4ed8; }
.rep-part .uses { color: #71717a; font-size: .8rem; margin: 0 0 .5rem;
                  overflow-wrap: anywhere; }
.rep-part .term { border: 1px solid var(--line); border-radius: 6px;
                  padding: .5rem .7rem; margin: .5rem 0; background: var(--panel); }
.rep-part .term p { margin: .15rem 0; font-size: .88rem; overflow-wrap: anywhere; }
.rep-part .term .th { font-size: .95rem; }
.rep-part .term .none { color: #71717a; }
.rep-part .figs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.rep-part figure { margin: 0; font-size: .72rem; color: #71717a; max-width: 100%; }
.rep-part figure img { display: block; max-width: 100%; height: auto;
                       background: #fff; border: 1px solid var(--line);
                       border-radius: 4px; padding: .2rem; }
ul.list .var { color: var(--fg); margin-left: .4rem; }
.count { color: #71717a; font-weight: 400; }
/* The front page lists every system by area. On a phone that is one column of
   rows; wider screens fill the width instead of leaving it empty. */
ul.list.cols { columns: 1; column-gap: 1.5rem; }
ul.list.cols li { break-inside: avoid; }
@media (min-width:40rem) { ul.list.cols { columns: 2; } }
@media (min-width:64rem) { ul.list.cols { columns: 3; } }
ul.list.cols a { padding: .5rem .2rem; }
p.intro { margin: 0 0 .5rem; line-height: 2; }
p.intro a { margin-right: 1rem; white-space: nowrap; }
/* A system page leads with its diagrams; the long lists under them -- a
   hundred connectors on an ABS page -- are closed until asked for. */
details.more { border-bottom: 1px solid var(--line); }
ul.list + details.more { margin-top: 1rem; }
details.more > summary { cursor: pointer; padding: .8rem .2rem; font-weight: 700;
                         text-transform: uppercase; letter-spacing: .04em;
                         color: var(--muted); font-size: .95rem; }
details.more[open] > summary { color: var(--fg); }