/* Public Bench Notes: article layout. Loaded after /site.css.
   Everything here dresses markup that an issued note already carries. It adds no content. */
/* The reading spine. Everything narrative in a note starts and ends on the reading column:
   the head, headings and their rules, prose, entries, small tables. Only a table of records
   that needs the room runs on to the right, from the same left edge. */
.note-head{padding:2.5rem 0 0;max-width:var(--measure)}
.note-head > h1:first-child{margin-top:1.75rem}
.note-head h1{font-size:clamp(1.625rem,3.4vw,2.25rem);line-height:1.16;margin:2rem 0 0;text-wrap:balance}
.note-sub{font-size:clamp(1.125rem,1.9vw,1.3125rem);line-height:1.42;margin:.75rem 0 0}
.note-meta{margin:.875rem 0 0;font-size:1rem;color:var(--soft)}

/* small legends: one size, wherever a label names a field or a column */
.plate dt,.toc-h,.note th,.fault dt,.tag{font-size:.75rem;font-weight:600;letter-spacing:.09em;line-height:1.35;text-transform:uppercase;color:var(--soft)}

/* the note's identity: what it is, which revision is in force, when it was issued */
.plate{display:flex;flex-wrap:wrap;margin:0;border-bottom:1px solid var(--rule)}
.plate div{min-width:0;max-width:100%;padding:0 1.25rem 1.125rem 1rem;border-left:1px solid var(--rule)}
.plate div:first-child{border-left:0;padding-left:0}
.plate dd{margin:.375rem 0 0;font-size:1.0625rem;font-weight:500;line-height:1.3}
.plate .fig{font-family:var(--figure);font-weight:600;font-size:1.25rem;font-feature-settings:"tnum"}
/* the revision scale: A to the revision in force, with the index under it. Presentation only;
   the revision itself is stated in words beside it for anything that does not draw the scale.
   A step gives up width before the scale leaves its cell. */
.revs{display:flex;margin-top:.5625rem;border-top:1.5px solid var(--ink)}
.revs span{position:relative;flex:0 1 auto;width:2.125rem;min-width:1.25rem;text-align:center;padding-top:.625rem;font-family:var(--figure);font-weight:500;font-size:.9375rem;line-height:1;color:var(--soft)}
.revs span::before{content:"";position:absolute;left:50%;top:0;margin-left:-.75px;width:1.5px;height:.4375rem;background:var(--ink)}
.revs .cur{color:var(--ink);font-weight:600;font-size:1.125rem;padding-top:.5625rem}
.revs .cur::after{content:"";position:absolute;left:50%;top:1.8125rem;margin-left:-.375rem;
  border-left:.375rem solid transparent;border-right:.375rem solid transparent;border-bottom:.5625rem solid var(--index)}

.note-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;padding-top:2.5rem}
.toc{font-size:.875rem;line-height:1.35;border-bottom:1px solid var(--rule);padding-bottom:1.25rem}
.toc-h{margin:0 0 .75rem}
.toc ol{list-style:none;margin:0 0 0 .8125rem;padding:0;border-left:1.5px solid var(--ink)}
.toc li{position:relative;padding:.3125rem 0 .3125rem 1.25rem}
.toc li::before{content:"";position:absolute;left:0;top:.875rem;width:.625rem;height:1.5px;background:var(--ink)}
.toc ol ol{margin:.25rem 0 0;border-left:0;font-size:.8125rem}
.toc ol ol li{padding:.1875rem 0 .1875rem .75rem}
.toc ol ol li::before{display:none}
.toc a{text-decoration:none;color:var(--soft)}
.toc a:hover{color:var(--ink);text-decoration:underline}
.toc-pdf{margin:1.125rem 0 0 .8125rem}
.toc-pdf a{color:var(--ink);text-decoration:underline}
/* on a wide screen the contents stand in the margin, left of the reading edge */
@media (min-width:64rem){
  .note-grid{grid-template-columns:calc(var(--axis) - 2rem) minmax(0,1fr);gap:0 2rem;margin-left:calc(-1 * var(--axis))}
  .toc{position:sticky;top:1.5rem;align-self:start;max-height:calc(100vh - 3rem);overflow-y:auto;border-bottom:0;padding-bottom:1rem}
}

.note-body{min-width:0}
.note-body section{position:relative;margin:0 0 3.25rem;scroll-margin-top:1rem}
.note-body section:last-child{margin-bottom:0;padding-bottom:4rem}
.note-body h2{position:relative;margin:0 0 .625rem;padding-top:1rem;border-top:1px solid var(--ink);max-width:var(--measure)}
.note-body h3{position:relative;font-weight:600;font-size:1.1875rem;line-height:1.35;margin:1.75rem 0 .3rem;scroll-margin-top:1rem;max-width:var(--measure)}
.note-body p{max-width:var(--measure);margin:0 0 .75rem}
.note-body .key{font-weight:600}
.note-body .small{font-size:.9375rem;color:var(--soft)}
.note-body .top{margin:1.25rem 0 0;font-size:.875rem}
.note-body .top a{color:var(--soft)}
.muted{color:var(--soft);font-size:.92em}
.rust{color:inherit}
.bn{font-weight:600}
.tag{vertical-align:.14em;margin-left:.25rem}

/* provenance marks: five classes, one frame. The letter says which; nothing else does. */
.chip{display:inline-block;width:1.5rem;height:1.5rem;border:1.5px solid var(--ink);font-family:var(--figure);font-weight:600;font-size:.875rem;line-height:calc(1.5rem - 3px);text-align:center;vertical-align:.02em}
.chips{white-space:nowrap}
.marks{margin:1.125rem 0;border-top:1px solid var(--rule);max-width:var(--measure)}
.marks div{display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:.875rem;padding:.5625rem 0 .625rem;border-bottom:1px solid var(--rule);font-size:1rem;line-height:1.45}
.marks dt,.marks dd{margin:0}
.about{margin:1.25rem 0 .5rem;padding:.75rem 0 .8125rem;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:.9375rem;line-height:1.5;color:var(--soft);max-width:var(--measure)}

/* the index: a selected position. The entry or row a link has brought you to carries it,
   and so does the revision in force at the foot of the revision history. */
.note-body section:target > h2::before,.note-body h3:target::before,.fault:target::before,.fault:has(.was:target)::before,
.note tr:target > td:first-child::before,#revision-history tbody tr:last-child > td:first-child::before{
  content:"";position:absolute;left:-1.125rem;top:.5rem;border-top:.375rem solid transparent;border-bottom:.375rem solid transparent;border-left:.5625rem solid var(--index)}
.fault:target::before,.fault:has(.was:target)::before{top:1.3125rem}
.note-body section:target > h2::before{top:1.5rem}
.note tr:target > td:first-child::before,#revision-history tbody tr:last-child > td:first-child::before{top:.9375rem}

/* tables. The box is widened to the left so that an index mark beside a row is not cut off. */
.tw{overflow-x:auto;margin:.75rem 0 1rem -1.25rem;padding-left:1.25rem}
.note table{width:100%;max-width:var(--measure);border-collapse:collapse;font-size:.96875rem;line-height:1.46}
.note table.parts,.note table.rel{max-width:none}
.note th{position:relative;text-align:left;padding:0 1rem .5rem 0;vertical-align:bottom;border-bottom:1.5px solid var(--ink)}
.note td{position:relative;padding:.6875rem 1rem .75rem 0;vertical-align:top;border-bottom:1px solid var(--rule)}
.note th:last-child,.note td:last-child{padding-right:0}
.parts .pn,.plain .pn{font-family:var(--figure);font-weight:600;font-size:1.25rem;line-height:1.15;font-feature-settings:"tnum";white-space:nowrap}
.parts .nm{font-weight:600;min-width:11rem}
.parts .nm .muted{font-weight:400}
.parts .qty{text-align:center}
.parts td.sub,.parts td.qty{font-family:var(--figure);font-weight:500;font-size:1.0625rem;line-height:1.3;white-space:nowrap}
.parts .mk{width:2rem;text-align:right}
.plain .mk{text-align:right;white-space:nowrap}
.parts tr{scroll-margin-top:1rem}
#revision-history td:first-child{font-family:var(--figure);font-weight:600;font-size:1.25rem;line-height:1.15}
#revision-history td:nth-child(2){white-space:nowrap}
#revision-history tbody tr:not(:last-child) td:nth-child(n+2){color:var(--soft)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* drive path and the plans for diagrams: two columns between rules */
.drive{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.5rem;max-width:var(--measure);margin:.75rem 0 1rem;padding:.875rem 0 .75rem;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.drive p{margin:0 0 .3rem;font-size:1.0625rem}
.drive > div > p:first-child{font-weight:600;margin-bottom:.5rem}

/* symptoms: one ruled entry each */
.faults{margin:.75rem 0;border-top:1.5px solid var(--ink);max-width:var(--measure)}
.fault{position:relative;padding:.9375rem 0 1.0625rem;border-bottom:1px solid var(--rule);scroll-margin-top:1rem}
/* a retired anchor: an empty target at the head of the entry that took over from it */
.was{display:block;scroll-margin-top:2rem}
.fault h3{margin:0 0 .5rem;display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;font-size:1.125rem}
.fault h3 a.self{text-decoration:none}
.fault h3 a.self:hover{text-decoration:underline;text-decoration-thickness:2px}
.fault dl{margin:0;display:grid;gap:.375rem}
.fault dl div{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:1rem;font-size:.96875rem;line-height:1.46}
.fault dt{padding-top:.1875rem}
.fault dd{margin:0}

@media (max-width:52rem){
  .note-head{padding-top:1.75rem}
  .drive{grid-template-columns:1fr;gap:.75rem 0}
  .fault dl div{grid-template-columns:1fr;gap:.1rem}
  /* Tables of records (components, diagnostic relationships): each row stands alone, so below this width a
     row is set as one entry and nothing slides sideways. A grid read across rows would scroll instead. */
  .parts thead,.rel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .parts,.parts tbody,.rel,.rel tbody{display:block}
  .parts tbody,.rel tbody{border-top:1.5px solid var(--ink)}
  .parts tr,.rel tr{position:relative;display:grid;padding:.75rem 0;border-bottom:1px solid var(--rule)}
  .parts td,.rel td{position:static;padding:0;border:0}
  .parts tr{grid-template-columns:3.75rem auto 1fr auto;gap:.15rem .8rem}
  .parts .pn{grid-area:1/1}
  .parts .nm{grid-area:1/2/2/4;min-width:0}
  .parts .mk{grid-area:1/4;width:auto}
  .parts td.sub{grid-area:2/2}
  .parts td.qty{grid-area:2/3;text-align:left}
  .parts td.sub,.parts td.qty{font-size:.9375rem;color:var(--soft)}
  .parts td[data-label]::before{content:attr(data-label) " "}
  .parts .fn{grid-area:3/2/4/5;margin-top:.3rem}
  .rel tr{grid-template-columns:1fr auto;gap:.4rem .8rem}
  .rel .hd{grid-area:1/1;font-size:1.0625rem}
  .rel .mk{grid-area:1/2}
  .rel td[data-label]{grid-column:1/-1}
  .rel td[data-label]::before{content:attr(data-label);display:block;font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--soft)}
}
@media (max-width:30rem){
  .note th,.note td{padding-right:.625rem}
  .plate{row-gap:.875rem}
  .plate div{border-left:0;padding:0 1.5rem 0 0}
  .plate div:last-child{padding-bottom:1.125rem}
}
/* the narrowest screens: the scale's steps close up so that Issued stays beside it, as it does at 390 */
@media (max-width:22rem){
  .revs span{width:1.625rem}
  .plate div{padding-right:1.25rem}
  .plate div:last-child{padding-right:0}
}
@media print{.toc,.top,header.top{display:none}.note-grid{display:block}}

/* series index */
.series{max-width:47.5rem;padding:2.25rem 0 4rem}
.series > p{margin:0 0 2rem}
.series-list{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.series-list li{padding:1.25rem 0 1.375rem;border-bottom:1px solid var(--rule)}
.series-list h2{font-size:1.25rem;margin:.2rem 0 .4rem}
.series-list h2 a{text-decoration:none}
.series-list h2 a:hover{text-decoration:underline;text-decoration-thickness:2px}
.series-list p{margin:0 0 .4rem}
.series-id{font-family:var(--figure);font-weight:600;font-size:1.125rem;font-feature-settings:"tnum"}
.series-meta{color:var(--soft);font-size:1rem}
