/* THE INSTRUMENTS PAGE, RESTRUCTURED (Michael, bus posts 863 and 888): the site's title band; the rail replaced by the site's
   navigation cards in rows (sectors, then that sector's instruments, then the views); the instrument on the DARK chart card in both
   themes, drawn in the chart series colours of the standard; nothing under the size floor (R-017); the palette of R-021.
   What the page DOES is unchanged: the slicers, the row counter, the table of rows, the rule fragments, the addresses. */
.ins4{padding-top:0}
.ins4 .icon{margin-top:14px;display:block;border:0;background:transparent}
.ins4 .icon-body{display:block;height:auto;min-height:0}
.ins4 .icon-nav{display:block;flex:none;overflow:visible;padding:0;background:transparent;color:var(--hi);border:0}
.ins4 .icon-cat,.ins4 .icon-foot{display:none}
.ins4 .icon-g{display:none}.ins4 .icon-g[data-open="1"]{display:block}
.ins4 .icon-items,.ins4 .icon-g[data-open="1"] .icon-items{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
/* the second row: the chosen sector's instruments, the menu button's look at a smaller size */
.ins4 .icon-item{display:inline-block;width:auto;padding:12px 16px;border:1px solid var(--hl);border-left:1px solid var(--hl);border-radius:0;background:var(--hs);color:var(--hi);font:600 18px/1.2 Barlow,sans-serif;text-align:left;cursor:pointer}
.ins4 .icon-item:hover,.ins4 .icon-item:focus-visible{outline:3px solid var(--s1);outline-offset:1px;background:var(--hs);color:var(--hi)}
.ins4 .icon-item[aria-current="true"]{background:var(--hi);color:var(--hs);border-color:var(--hi);box-shadow:inset 0 -3px 0 var(--s1);font-weight:600}
/* the heading over the space: the sector and the instrument */
.ins4 .icon-head{background:transparent;color:var(--hi);margin-top:22px}
.ins4 .icon-bar{min-height:0;padding:0 0 10px;justify-content:flex-start}
.ins4 .icon-page{display:none}
.ins4 .icon-title{justify-content:flex-start;text-align:left;gap:12px}
.ins4 .icon-room{color:var(--hd);font-size:28px}
.ins4 .icon-inst{color:var(--hi);font-size:28px}
/* THE SPACE: the dark chart card, in both themes */
.ins4 .icon-space{--card:#0d0e10;--bg:#08090b;--fg:#ededed;--dim:#a3a7ae;--faint:#a3a7ae;--edge:#2a2d33;--fill:#1b1d21;--s1:#4fc3f7;background:#0d0e10;color:#ededed;color-scheme:dark;border:1px solid #2a2d33;border-radius:6px;padding:18px;overflow:visible;font:500 17px/1.5 Barlow,sans-serif}
.ins4 .ins-fig{background:#08090b;border-color:#2a2d33}
.ins4 .icon-tab{background:#ffffff;color:#121212;border:1px solid #ffffff;border-radius:0;font:600 17px/1.2 Barlow,sans-serif;padding:10px 14px}
.ins4 .icon-tab:hover{background:#dff3fd;border-color:#dff3fd}
.ins4 .icon-tab.on{background:#4fc3f7;border-color:#4fc3f7;color:#04121a}
/* the size floor through the slicers, the tags, the notes and the table */
.ins4 .ins-says,.ins4 .ins-note,.ins4 .ins-tags,.ins4 .ins-warn{font-size:17px;line-height:1.5}
.ins4 .ins-warn{color:#ededed;font-weight:600}
.ins4 .ins-tags b,.ins4 .ins-h,.ins4 .ins-ns,.ins4 .ins-fb,.ins4 .ins-opt,.ins4 .ins-slice,.ins4 .ins-slice *{font-size:16px}
.ins4 .ins-h{color:#ededed;border-color:#2a2d33;letter-spacing:.1em}
.ins4 .ins-tw table,.ins4 .ins-tw th,.ins4 .ins-tw td,.ins4 .ins-fresh,.ins4 .ins-fresh th,.ins4 .ins-fresh td{font-size:16px;line-height:1.4}
.ins4 .ins-tw a,.ins4 .ins-tags a,.ins4 .ins-credit a{color:#ededed;text-decoration:underline;text-underline-offset:3px}
.ins4 .ins-tw a:hover,.ins4 .ins-tags a:hover,.ins4 .ins-credit a:hover{color:#4fc3f7}
.ins4 .ins-credit{margin:12px 0 0;font:500 17px/1.5 Barlow,sans-serif;color:#a3a7ae}
.ins4 .ins-fb{background:#15171a;color:#a3a7ae;border-color:#2a2d33;border-radius:0}
.ins4 .ins-fb b{color:#ededed}
.ins4 .ins-fp{background:#15171a;border-color:#2a2d33}
.ins4 .ins-opt{color:#ededed}.ins4 .ins-opt:hover{background:#1b1d21}
.ins4-line{font:500 calc(16px * var(--scale,1))/1.5 Barlow,sans-serif;color:var(--hd);margin:0}
@media(max-width:699px){.ins4 .icon-item{font-size:16px;padding:10px 12px}.ins4 .icon-space{padding:10px}.ins4 .icon-room,.ins4 .icon-inst{font-size:24px}}

/* the old page's own narrow-screen rules (a rail 40vh tall, a space 70vh tall) do not apply to the new layout */
.ins4 .icon-nav{max-height:none;overflow:visible}
.ins4 .icon-space{height:auto;min-height:0;flex:none}
.ins4 .icon-body{height:auto}
/* ON A PHONE the three rows would push the chart far down (bus post 933 A): the sector cards become compact one-line buttons, two across,
   the name alone; the instruments under them stay one-line buttons */
@media(max-width:699px){
  .ins4 [data-ins-sectors]{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ins4 [data-ins-sectors] .navcard{min-height:0;padding:12px 12px}
  .ins4 [data-ins-sectors] .navcard .nc-n,.ins4 [data-ins-sectors] .navcard .nc-fig,.ins4 [data-ins-sectors] .navcard .nc-lab,.ins4 [data-ins-sectors] .navcard .nc-go{display:none}
  .ins4 [data-ins-sectors] .navcard .nc-k{font-size:22px;margin:0}
  .ins4 .icon-items .icon-item{flex:1 1 calc(50% - 8px)}
}
/* THE TABLE OF ROWS ON A NARROW SCREEN: it scrolls sideways inside its own box, its first column kept in view */
.ins4 .ins-tw{overflow-x:auto;border-color:#2a2d33}
.ins4 .ins-tw th:first-child,.ins4 .ins-tw td:first-child{position:sticky;left:0;z-index:1;background:#0d0e10;box-shadow:1px 0 0 #2a2d33}
.ins4 .ins-tw thead th:first-child{z-index:2}

.ins4 .ins-tags span,.ins4 .ins-tags b{font-size:16px;letter-spacing:.02em}
@media(max-width:699px){.ins4 .ins-tags span,.ins4 .ins-tags b{font-size:15px}}
/* the floor is 17 px at 2200 wide and over */
@media(min-width:2200px){.ins4 .ins-tags span,.ins4 .ins-tags b,.ins4 .ins-h,.ins4 .ins-ns,.ins4 .ins-fb,.ins4 .ins-opt,.ins4 .ins-slice,.ins4 .ins-slice *,.ins4 .ins-tw table,.ins4 .ins-tw th,.ins4 .ins-tw td,.ins4 .ins-fresh,.ins4 .ins-fresh th,.ins4 .ins-fresh td,.ins4 .icon-tab,.ins4 .ins-says,.ins4 .ins-note,.ins4 .ins-tags,.ins4 .ins-warn,.ins4 .ins-credit,.ins4-line,.ins4 .icon-space{font-size:17px}}

/* ONE BLACK, NOT THREE GREYS (Michael's guideline, bus post 965, 11 October 2026): "match the card and any gray elements on that card to
   the graphic walker black. Otherwise, it doesn't blend as one instrument." THE INSTRUMENT GROUND is one setting, --ig: the card, the
   slicer bar, the chart's box and the table take exactly it, and no box on the card carries an edge of another colour. What must be told
   apart is told apart by its own edge or text: the white buttons, the table's quiet rules. */
.ins4 .icon-space{--card:var(--ig);--bg:var(--ig);--fill:var(--ig);background:var(--ig);border-color:var(--ig)}
.ins4 .ins-fig{background:var(--ig);border:0;padding:0}
.ins4 .ins-slice{background:var(--ig);border:0;padding:0}
.ins4 .ins-tw th:first-child,.ins4 .ins-tw td:first-child{background:var(--ig)}
.ins4 .ins-tw{border-color:#2a2d33;min-height:0}
/* THE DROP-DOWNS ARE WHITE, WITH BLACK TEXT (bus post 966), button and opened list alike, as the view buttons beside them */
.ins4 .ins-fb{background:#ffffff;color:#121212;border:1px solid #ffffff}
.ins4 .ins-fb b{color:#121212}
.ins4 .ins-fb:hover{background:#dff3fd;border-color:#dff3fd}
.ins4 .ins-fb.on{background:#4fc3f7;border-color:#4fc3f7;color:#04121a}.ins4 .ins-fb.on b{color:#04121a}
.ins4 .ins-fp{background:#ffffff;border-color:#ffffff;color:#121212;border-radius:0}
.ins4 .ins-opt{color:#121212}.ins4 .ins-opt:hover{background:#dff3fd}
.ins4 .ins-opt i{color:#5e5e5e}
.ins4 .ins-fp .ins-fc{color:#121212;border-color:#121212;font-size:16px}
.ins4 .ins-sl{color:#c8c8c8}
.ins4 .ins-reset{color:#4fc3f7;border:1px solid #4fc3f7;border-radius:0;background:transparent;font-size:16px;padding:7px 11px}
/* THE ROWS: a closed section, opened by the reader (bus post 966); "The rows" as on Esper */
.ins4 .ins-note{margin:14px 0 0}
.ins4 .ins-rows{margin-top:12px;border-top:1px solid #2a2d33}
.ins4 .ins-rows > summary{cursor:pointer;padding:12px 0;font:700 16px/1.2 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:#ededed}
.ins4 .ins-rows > summary:hover,.ins4 .ins-rows > summary:focus-visible{color:#4fc3f7;outline:none}
.ins4 .ins-more{margin:12px 0 0}
.ins4 .ins-more .ins-fc{margin:0;background:#ffffff;color:#121212;border:1px solid #ffffff;border-radius:0;font-size:16px;padding:9px 12px}
.ins4 .ins-more .ins-fc:hover{background:#dff3fd;border-color:#dff3fd}
@media(min-width:2200px){.ins4 .ins-rows > summary,.ins4 .ins-more .ins-fc,.ins4 .ins-reset,.ins4 .ins-fp .ins-fc{font-size:17px}}

/* THE INSTRUMENT BUTTONS AND THE TITLE ON ONE LINE (Michael's guideline, bus post 974): left, the buttons, standing alone; right, ending at
   the card's right edge, the title, changing with the choice. Where the line is too narrow for both the title falls to its own line, by
   the layout itself. The navigation's own box is dissolved so that its two rows and the title lie in one flow. */
.ins4 .icon{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-end;align-content:flex-start;justify-content:flex-start;column-gap:28px;row-gap:10px;height:auto;min-height:0;overflow:visible}
.ins4 .icon-nav{display:contents}
.ins4 .icon > .icon-nav > .navcards{flex:1 0 100%;width:100%;margin-bottom:4px}
.ins4 .icon-g[data-open="1"]{flex:0 1 auto;min-width:0;max-width:100%}
.ins4 .icon-items,.ins4 .icon-g[data-open="1"] .icon-items{margin-top:0}
.ins4 .icon-head{flex:0 1 auto;margin:0 0 0 auto;min-width:0;max-width:100%}
.ins4 .icon-bar{padding:0 0 6px}
.ins4 .icon-title{justify-content:flex-end;text-align:right}
.ins4 .icon-body{flex:1 0 100%;min-width:0}
@media(max-width:699px){.ins4 .icon-head{margin-left:0}.ins4 .icon-title{justify-content:flex-start;text-align:left}}
/* A DIVIDING LINE BETWEEN THE VIEW BUTTONS AND THE SLICERS (bus post 970 item 1): more room, and one thin light grey line across the card */
.ins4 .ins-slice{margin-top:18px;padding-top:18px;border-top:1px solid #6b6f76}
.ins4 .ins-slice:empty{display:none}
/* RESET in the white form of the other controls (970 item 3) */
.ins4 .ins-reset{color:#121212;background:#ffffff;border:1px solid #ffffff}
.ins4 .ins-reset:hover{background:#dff3fd;border-color:#dff3fd}
/* ONE SHORT CREDIT LINE IN VIEW; the rest in SOURCE AND METHOD, a closed section in the form of THE ROWS (970 item 2) */
.ins4 .ins-short{margin:12px 0 0;font:500 17px/1.5 Barlow,sans-serif;color:#c8c8c8}
.ins4 .ins-short a{color:#ededed;text-decoration:underline;text-underline-offset:3px}.ins4 .ins-short a:hover{color:#4fc3f7}
.ins4 .ins-src{margin-top:16px}
.ins4 .ins-rows + .ins-rows{margin-top:0}
.ins4 .ins-srcbody{padding:2px 0 16px;max-width:1100px}
.ins4 .ins-srcbody p{margin:0 0 10px;font:500 17px/1.5 Barlow,sans-serif;color:#c8c8c8}
.ins4 .ins-srcbody .ins-tags{display:block;margin:0;font-size:17px}
.ins4 .ins-srcbody .ins-tags b{font:700 1em/1.5 Barlow,sans-serif;color:#ededed;letter-spacing:0;text-transform:none;margin-right:6px}
.ins4 .ins-srcbody .ins-tags b::after{content:":"}
.ins4 .ins-srcbody .ins-note{margin:0 0 14px}
.ins4 .ins-srcbody .ins-fresh{margin-top:4px}

/* ROOM AND A DIVIDING LINE BETWEEN THE SECTOR CARDS AND THE INSTRUMENT ROW (Michael, bus post 991): "One's a top-level navigation and
   the other is a selection of available instruments." The site's own section rule. */
.ins4 .icon > .icon-nav > .navcards{margin-bottom:14px;padding-bottom:28px;border-bottom:1px solid var(--hl,rgba(0,0,0,.14))}
/* the caution paragraph stands inside SOURCE AND METHOD (991 item 2) */
.ins4 .ins-srcbody .ins-warn{font-weight:500;color:#ededed}

/* THE BUTTONS ALWAYS SIT NEXT TO THE CARD (Michael, bus post 996): "we should always want to keep the buttons down if the title bumps up."
   Where buttons and title fit on one line they share it, as before. Where they do not, the TITLE goes to the line above and the
   instrument buttons stay on the line directly above the card. Done by the layout itself: the lines of the page stack upward from the
   card (wrap-reverse), so the item that leaves the row leaves it upward. The order a keyboard and a reader of the page meet is unchanged. */
.ins4 .icon{flex-wrap:wrap-reverse;align-items:flex-start;align-content:flex-end;row-gap:14px}
.ins4 .icon-body{order:1}
.ins4 .icon-g[data-open="1"]{order:2}
.ins4 .icon-head{order:3}
.ins4 .icon > .icon-nav > .navcards{order:4;margin-bottom:8px}