/* Saqr Consulting — the site header.

   One stylesheet for the bar across the top of every page: the brand, the
   Sheets and Learn menus, and the plain links. The markup is written into each
   page by tools/build-header.py, so the bar is the same everywhere and works
   with JavaScript switched off — the menus are <details> elements, which open
   and close on their own. saqr-site.js only adds the niceties: one menu open at
   a time, Escape and a click outside to close, the mobile toggle, and carrying
   the reader's figures into the sheet links the way the cross-sheet strip does.

   Colours are the page's own custom properties, with the same values as
   fallbacks so a page that defines none still renders the bar correctly. */

header.sh{background:var(--ink,#152633);color:var(--sheet-lit,#F4F6F7);
 border-bottom:1.5px solid #0D1A24;position:relative;z-index:40;
 font-family:"Barlow Condensed",sans-serif}
@media (min-width:900px){
 header.sh{position:sticky;top:0}
 html{scroll-padding-top:64px}
}
.sh-in{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;align-items:center;
 gap:6px;min-height:52px;flex-wrap:wrap}
header.sh a{color:inherit;text-decoration:none}

.sh-brand{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 0;margin-right:auto;
 font-weight:600;font-size:17px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.sh-brand img{height:26px;width:auto;display:block;filter:brightness(0) invert(1)}
.sh-brand small{font-family:"IBM Plex Mono",monospace;font-weight:400;font-size:10.5px;
 letter-spacing:.1em;color:#C3CBD2;padding-left:10px;border-left:1px solid #3A4B59}
@media (max-width:520px){.sh-brand small{display:none}}

/* the toggle exists only once the script has run; without it the nav shows */
.sh-toggle{display:none;font:inherit;font-weight:600;font-size:15px;letter-spacing:.16em;
 text-transform:uppercase;background:transparent;color:inherit;border:1.5px solid #6F7E8B;
 padding:7px 14px;cursor:pointer}
.sh-toggle:hover{border-color:var(--sheet-lit,#F4F6F7)}
.sh-toggle[aria-expanded="true"]{background:var(--sheet-lit,#F4F6F7);color:var(--ink,#152633)}

.sh-nav{display:flex;align-items:center}
.sh-list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.sh-item{position:relative;margin:0;padding:0}
.sh-link,.sh-dd>summary{display:flex;align-items:center;gap:7px;padding:15px 13px;cursor:pointer;
 font-weight:600;font-size:15px;letter-spacing:.15em;text-transform:uppercase;color:#E2E7EB;
 list-style:none;border-bottom:2px solid transparent;user-select:none}
.sh-dd>summary::-webkit-details-marker{display:none}
.sh-dd>summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;
 border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.sh-dd[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.sh-link:hover,.sh-dd>summary:hover{color:#fff;border-bottom-color:#E0353B}
.sh-dd[open]>summary{color:#fff;background:#0D1A24}
.sh-link[aria-current="page"],.sh-dd.sh-here>summary{color:#fff;border-bottom-color:#E0353B}
header.sh a:focus-visible,header.sh summary:focus-visible,.sh-toggle:focus-visible{outline:2px solid #F4F6F7;outline-offset:-4px}

/* the drop-down panels: light, like a sheet laid over the bar */
.sh-panel{position:absolute;top:100%;left:0;min-width:250px;background:var(--sheet-lit,#F4F6F7);
 color:var(--ink,#152633);border:1.5px solid var(--ink,#152633);
 box-shadow:0 18px 40px -16px rgba(13,26,36,.55);padding:8px 0;z-index:60}
.sh-panel-wide{left:auto;right:auto;width:min(900px,calc(100vw - 40px));
 display:grid;grid-template-columns:repeat(4,1fr);padding:0}
.sh-item-sheets{position:static}
.sh-item-sheets .sh-panel-wide{left:50%;transform:translateX(-50%)}
.sh-grp{padding:12px 0 10px;border-right:1px solid var(--rule-soft,#D0D6DB);
 border-bottom:1px solid var(--rule-soft,#D0D6DB);min-width:0}
.sh-grp:nth-child(4n){border-right:0}
.sh-grp-h{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
 text-transform:uppercase;color:var(--ink-soft,#55616E);padding:0 16px 6px;font-weight:400}
.sh-panel a{display:block;padding:7px 16px;font-weight:600;font-size:15.5px;letter-spacing:.08em;
 text-transform:uppercase;line-height:1.2}
.sh-panel a .n{display:block;font-family:"IBM Plex Mono",monospace;font-weight:400;font-size:10px;
 letter-spacing:.09em;color:var(--ink-soft,#55616E)}
.sh-panel a .d{display:block;font-family:"IBM Plex Sans",system-ui,sans-serif;font-weight:400;
 font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--ink-soft,#55616E);margin-top:2px}
.sh-panel a:hover{background:var(--ink,#152633);color:var(--sheet-lit,#F4F6F7)}
.sh-panel a:hover .n,.sh-panel a:hover .d{color:#C3CBD2}
.sh-panel a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--flag,#A90E14)}
.sh-panel a:focus-visible{outline:2px solid var(--flag,#A90E14);outline-offset:-3px}
.sh-panel-foot{grid-column:1/-1;padding:10px 16px;font-family:"IBM Plex Mono",monospace;
 font-size:11px;color:var(--ink-soft,#55616E);letter-spacing:.03em}

/* narrow screens: the bar folds into one Menu button, and the menus become
   accordions inside it rather than panels floating over the page */
@media (max-width:899px){
 .sh-js .sh-toggle{display:block}
 .sh-nav{flex-basis:100%}
 .sh-js .sh-nav{display:none}
 .sh-js.sh-open .sh-nav{display:block}
 .sh-list{flex-direction:column;align-items:stretch;padding:0 0 12px}
 .sh-link,.sh-dd>summary{padding:12px 4px;border-bottom:1px solid #2C3D4B;justify-content:space-between}
 .sh-panel,.sh-panel-wide,.sh-item-sheets .sh-panel-wide{position:static;transform:none;width:auto;
  box-shadow:none;border:0;display:block;margin:0 0 6px}
 .sh-grp{border-right:0}
}
@media (min-width:900px){.sh-item-home{display:none}}

@media print{header.sh{display:none}}

/* the search box: a plain GET form to the search page */
.sh-item-search{display:flex;align-items:center}
.sh-search{display:flex;align-items:center;margin-left:8px}
.sh-search input{font-family:"IBM Plex Mono",monospace;font-size:12.5px;width:170px;
 padding:7px 10px;background:#0D1A24;color:#F4F6F7;border:1px solid #3A4B59;border-right:0;border-radius:0}
.sh-search input::placeholder{color:#AEB8C1}
.sh-search input:focus{outline:2px solid #F4F6F7;outline-offset:-2px;background:#08121A}
.sh-search button{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:13.5px;
 letter-spacing:.14em;text-transform:uppercase;padding:7px 11px;background:#F4F6F7;color:#152633;
 border:1px solid #F4F6F7;cursor:pointer;border-radius:0}
.sh-search button:hover{background:#fff}
.sh-search button:focus-visible{outline:2px solid #E0353B;outline-offset:1px}
@media (max-width:1099px) and (min-width:900px){.sh-search input{width:140px}}
@media (max-width:899px){
 .sh-search{margin:12px 0 4px}
 .sh-search input{flex:1;width:auto;font-size:16px}
}
/* a shadow once the page has scrolled under the bar */
header.sh.sh-scrolled{box-shadow:0 6px 18px -8px rgba(13,26,36,.55)}

/* The hidden attribute means hidden. A page rule such as .dat-out{display:grid}
   outranks the browser's own [hidden] rule, and Sheet 02 showed an empty
   190-pixel box under "A section of your own" because of it. This stylesheet
   is on every page, so the fix is here once. */
[hidden]{display:none!important}

/* The pickers draw their own chevron 11px from the right edge, and a long
   option ("Conventional — wing with tail behind") ran underneath it. Room for
   the chevron on every page, from the one stylesheet every page links. */
select.sel,select.entry-select{padding-right:30px;text-overflow:ellipsis}

/* Chart labels with a halo in the sheet's colour, so a curve or a grid line
   drawn through a label stops at the letters instead of striking them out
   ("best glide 39 km/h", "CG 95 mm up"). Text on a dark fill is left alone. */
main svg text:not([fill="#fff"]):not([fill="#FFF"]):not([fill="#ffffff"]):not([fill="#FFFFFF"]):not([fill="#F4F6F7"]):not([fill="#f4f6f7"]){
  paint-order:stroke;stroke:#F4F6F7;stroke-width:5px;stroke-linejoin:round}

/* the breadcrumb, and on a sheet the one before and after it in a study */
.sh-crumbs{background:var(--sheet,#E3E6E9);border-bottom:1px solid var(--rule,#B4BCC4)}
.sh-crumbs-in{max-width:1180px;margin:0 auto;padding:7px 20px;display:flex;flex-wrap:wrap;
 align-items:center;justify-content:space-between;gap:6px 18px;
 font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.04em;color:var(--ink-soft,#55616E)}
.sh-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 0}
.sh-crumbs li{margin:0;padding:0}
.sh-crumbs li+li::before{content:"\203A";margin:0 8px;color:#7C8792}
.sh-crumbs li[aria-current="page"]{color:var(--ink,#152633);font-weight:500}
.sh-crumbs a{color:var(--ink-soft,#55616E);text-decoration:none;border-bottom:1px solid transparent}
.sh-crumbs a:hover{color:var(--ink,#152633);border-bottom-color:var(--flag,#A90E14)}
.sh-crumbs a:focus-visible{outline:2px solid var(--ink,#152633);outline-offset:2px}
.sh-step{display:flex;gap:16px;flex-wrap:wrap}
.sh-step a{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.12em;
 text-transform:uppercase;color:var(--ink,#152633)}
.sh-step .n{font-family:"IBM Plex Mono",monospace;font-weight:400;font-size:10px;letter-spacing:.08em;
 color:var(--ink-soft,#55616E);margin-right:6px}
@media (max-width:560px){.sh-step .n{display:none}}
@media print{.sh-crumbs{display:none}}

/* the metric/imperial switch on Sheet 01 and the atmosphere tool: a thumb-sized
   target on a phone, which is where the sheets are said to be used */
@media (pointer:coarse){.units button{min-height:44px;min-width:64px}}

/* a wide chart on a narrow screen: readable size, scrolled sideways in place */
.chartscroll.on{overflow-x:auto;-webkit-overflow-scrolling:touch;contain:inline-size;width:100%;max-width:100%;
 background:linear-gradient(to right,transparent 85%,rgba(21,38,51,.06)) right/24px 100% no-repeat}
.chartscroll.on > svg{min-width:680px;width:680px;max-width:none}
.chartscroll:focus-visible{outline:2px solid var(--ink,#152633);outline-offset:2px}
.tblwrap:focus-visible{outline:2px solid var(--ink,#152633);outline-offset:-2px}
@media print{.chartscroll.on{overflow:visible}.chartscroll.on > svg{min-width:0;width:100%}}

/* the cover's filter by stage */
.ifilter{display:flex;flex-wrap:wrap;gap:6px;padding:4px 26px 0}
.ichip{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
 padding:6px 10px;border:1px solid var(--rule,#B4BCC4);background:transparent;color:var(--ink-soft,#55616E);cursor:pointer}
.ichip:hover{border-color:var(--ink,#152633);color:var(--ink,#152633)}
.ichip[aria-pressed="true"]{background:var(--ink,#152633);border-color:var(--ink,#152633);color:var(--sheet-lit,#F4F6F7)}
.ichip:focus-visible{outline:2px solid var(--flag,#A90E14);outline-offset:2px}
@media print{.ifilter{display:none}}

/* the number of the sheet you are on, beside the Sheets menu */
header.sh .sh-cur{font-family:"IBM Plex Mono",monospace;font-weight:400;font-size:11px;letter-spacing:.06em;
 padding:1px 6px;border:1px solid #6F7E8B;color:#E2E7EB}

/* save a chart or drawing */
.svgbar{display:flex;justify-content:flex-end;gap:6px;margin:6px 0 2px;padding:0 10px}
@media print{.svgbar{display:none}}
.svgbtn{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.09em;
 text-transform:uppercase;padding:4px 9px;border:1px solid var(--rule,#B4BCC4);background:transparent;
 color:var(--ink-soft,#55616E);cursor:pointer;border-radius:2px;line-height:1.3}
.svgbtn:hover{border-color:var(--ink,#152633);color:var(--ink,#152633)}

/* the footer's site links, in columns: a site map rather than one long row */
nav.sitelinks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 26px;align-items:start;
 margin-top:22px;padding-top:18px;border-top:1px solid var(--rule,#B4BCC4)}
@media (max-width:760px){nav.sitelinks{grid-template-columns:repeat(2,minmax(0,1fr))}}
nav.sitelinks .sl-grp{display:flex;flex-direction:column;gap:2px;min-width:0}
nav.sitelinks .sl-h{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:400;letter-spacing:.14em;
 text-transform:uppercase;color:var(--ink-soft,#55616E);margin-bottom:4px}
nav.sitelinks .sl-grp a{padding:4px 0;align-self:flex-start}
@media print{nav.sitelinks{display:none}}

/* the cover's one line about the newest revision */
.whatsnew{margin:0;padding:12px 26px;border-bottom:1px solid var(--rule-soft,#D0D6DB);
 font-size:14px;background:var(--sheet,#E3E6E9)}
.whatsnew a{color:var(--ink,#152633);text-decoration:none;border-bottom:1px solid var(--flag,#A90E14)}
.whatsnew a:hover{color:var(--flag,#A90E14)}
.whatsnew .wn-k{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
 color:var(--sheet-lit,#F4F6F7);background:var(--flag,#A90E14);padding:2px 6px;margin-right:8px;vertical-align:1px}
@media print{.whatsnew{display:none}}

/* Read by a screen reader, not shown: the readout announcer in saqr-site.js */
.sh-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;
 clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* The line saqr-print.js writes at the foot of a printed page */
.printstamp{display:none}
@media print{.printstamp{display:block;margin-top:14px;font:10px/1.4 "IBM Plex Mono",monospace;
 color:#55616E;word-break:break-all}}

/* Readout figures copy on a click (saqr-site.js); the badge says it worked. */
.readout.copyable .cell .v{cursor:copy;position:relative}
.readout.copyable .cell .v[data-copied]::after{content:attr(data-copied);position:absolute;left:0;top:100%;
  margin-top:2px;padding:2px 6px;font-size:11px;font-weight:600;letter-spacing:0;white-space:nowrap;
  color:var(--sheet-lit,#fff);background:var(--ink,#111);border-radius:3px;z-index:3;pointer-events:none}
@media print{.readout.copyable .cell .v[data-copied]::after{display:none}}

/* A readout cell whose figure just changed (saqr-site.js). */
@keyframes sh-moved{from{background-color:color-mix(in srgb,var(--ink,#152633) 10%,transparent)}to{background-color:transparent}}
@media (prefers-reduced-motion:no-preference){.readout .cell.moved{animation:sh-moved 1.6s ease-out}}
@media print{.readout .cell.moved{animation:none}}

/* Windows high contrast (forced-colors). The system palette repaints every
   border, so the transparent underline that marks nothing was drawn under
   every menu item, and the current page looked like all of them; box-shadow
   is dropped outright, so the current sheet in the open menu had no mark.
   Here the plain items get the background's own colour, the current one the
   system Highlight, and the menu's current sheet a real border. The titlebar
   mark is a dark falcon that vanishes on a black canvas, so it keeps its
   own light plate. */
@media (forced-colors:active){
  .sh-link,.sh-dd>summary{border-bottom-color:Canvas}
  .sh-link:hover,.sh-dd>summary:hover{border-bottom-color:LinkText}
  .sh-link[aria-current="page"],.sh-dd.sh-here>summary{border-bottom-color:Highlight}
  .sh-panel a[aria-current="page"]{border-left:3px solid Highlight}
  .titlebar .mark{forced-color-adjust:none;background:#F4F6F7}
}
@media (forced-colors:active) and (max-width:899px){
  .sh-link,.sh-dd>summary{border-bottom-color:GrayText}
}

/* The menus open with a short drop and fade rather than appearing in one
   frame. Opening only: a <details> removes its panel the instant it closes,
   and holding it open to animate the exit would need script for a 120 ms
   flourish. `translate` rather than `transform`, which the wide panel already
   uses to centre itself. Nothing moves for anyone who has asked for less
   motion. */
@keyframes sh-drop{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:no-preference){
  .sh-dd[open]>.sh-panel{animation:sh-drop .14s ease-out}
}

/* the phone-only "jump to" bar on a sheet (saqr-site.js) */
.jumpbar{display:none}
@media (max-width:899px){
  .jumpbar{display:flex;position:sticky;top:0;z-index:30;gap:0;overflow-x:auto;
    background:var(--sheet-lit,#F4F6F7);border-bottom:1px solid var(--rule,#B4BCC4);
    font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:13px;letter-spacing:.12em;
    text-transform:uppercase;scrollbar-width:none}
  .jumpbar a{flex:1 0 auto;text-align:center;padding:11px 12px;color:var(--ink,#152633);
    text-decoration:none;border-right:1px solid var(--rule-soft,#D0D6DB)}
  .jumpbar a:last-child{border-right:0}
  .jumpbar a:focus-visible{outline:2px solid var(--ink,#152633);outline-offset:-3px}
  html{scroll-padding-top:46px}
}
@media print{.jumpbar{display:none}}