/* HANGARBIBLE — shared shell (update 6.7)
   The hub's look, in one file, so it cannot drift.
   Everything here is hb- prefixed on purpose: these rules load BEFORE each page's own
   <style>, so a page that already owns a class name still wins. Nothing in here styles
   a bare element except the hero/tab spacing it owns. */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

:root{
  --hb-navy:#0A5A54; --hb-navy-2:#0C7C6E; --hb-accent:#0D9488; --hb-accent-dim:#E3F5F1;
  --hb-ink:#17211F; --hb-ink-soft:#566A66; --hb-ink-faint:#8A9C97;
  --hb-line:#DEE7E4; --hb-line-soft:#EAF1EF; --hb-paper:#E4F3EF;
  --hb-gold:#F5B942;
  --hb-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --hb-tabh:62px;
}

/* ---- hero: the navy block under the header, on every page ---- */
/* ---- THE HERO IS HUB-ONLY FROM 7.50 ----------------------------------------
   On a section page the green band cost 90–130px of every screen to say a word the
   header could say for nothing. It is hidden here, for every page, and `index.html`
   turns it back on in its own stylesheet — which loads after this file, so the hub
   keeps its hero, its search bar and its moon without a class, a flash or a `:has()`.
   The section name now sits in the header instead (hb-shell.js), permanently rather
   than sliding in on scroll, which is why the collapsing-title machinery went with it.
   Everything below still describes the hub's hero. */
.hb-hero{display:none}
.hb-hero{position:relative;overflow:hidden;color:#fff;padding:14px 0 24px;
  border-radius:0 0 28px 28px;
  background:linear-gradient(155deg,var(--hb-navy) 0%,var(--hb-navy) 28%,#0E7A6C 100%)}
/* the soft shapes are one pseudo-element, so no page's markup had to change (7.25).
   pointer-events:none keeps the command bar and every hero link clickable. */
.hb-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle 230px at 106% 116%,rgba(255,255,255,.11),transparent 70%),
    radial-gradient(circle 64px at 89% 20%,rgba(255,255,255,.10) 0 100%,transparent 100%),
    radial-gradient(circle 34px at 9% 86%,rgba(255,255,255,.07) 0 100%,transparent 100%),
    radial-gradient(circle 9px at 77% 72%,var(--hb-gold) 0 100%,transparent 100%)}
.hb-hero__in{position:relative;z-index:1;max-width:940px;margin:0 auto;padding:0 16px}
.hb-hero__t{margin:0;font-size:21px;font-weight:800;letter-spacing:.01em;line-height:1.2;
  color:#fff}
.hb-hero__s{margin:4px 0 0;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.84)}
/* colour is set on the elements, not inherited: parts-catalog and defect-library carry
   `h1,h2,h3,h4{color:var(--hb-teal)}`, which is navy on navy and made the title invisible. */
.hb-hero .cmd{padding-top:15px}
@media(min-width:600px){
  .hb-hero{padding-bottom:30px;border-radius:0 0 34px 34px}
  .hb-hero__t{font-size:25px}
  .hb-hero__in{padding:0 20px}
}

/* ---- the collapsing title: the section name slides into the header ---- */
/* on a phone the right-hand line gives up its space to the section name */

/* ---- the footer: identical on all ten pages ---- */


/* ---- navigation: a sheet under the header, not a bar at the bottom (7.29) ----
   The bottom tab bar was 72px of every screen, permanently, on a phone that only has
   about 640px to give. It also only ever held five of the ten sections. It is now a
   sheet that opens from a button in the header and holds all ten.

   NO PAGE MARKUP CHANGED. The same two elements do the work, restyled:
     .hb-tabspace  was the 72px spacer that reserved the bar's height. It is now the
                   scrim — a fixed, transparent, invisible layer that covers the page
                   while the sheet is open. Its height is gone, which IS the reclaim.
     .hb-tabs      was the fixed bar. It is now the sheet: fixed under the header,
                   two columns, hidden until `body.hb-menu`.
   Neither moved in the DOM. `.hb-tabs` sits at the end of <body> and is positioned
   under the header by `top`, which is why nothing had to be re-ordered.

   The header stays ABOVE the scrim while the sheet is open (`z-index` bumped on
   `body.hb-menu`), so the button that opened it is the button that closes it and never
   disappears under its own overlay. */

/* the button, injected into .doc-bar by hb-shell.js */
.hb-nav{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;margin-left:-9px;margin-right:2px;padding:0;
  background:transparent;border:0;border-radius:12px;color:#fff;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background .12s ease}
.hb-nav svg{width:22px;height:22px;display:block}
/* .doc-bar is space-between with two children; a third would sit in the middle.
   The brand takes the slack so button+brand stay together on the left. */
.doc-bar .hb-brand{margin-right:auto;min-width:0}
/* The brand is a link home on every page but the hub (7.52). The padding takes the tap
   target to 44px and the negative margin gives the space straight back, so the header
   is still 54px and nothing sticky at top:54px had to be re-measured. */
.hb-home{display:inline-flex;align-items:center;min-height:44px;padding:12px 6px;
  margin:-12px -6px;color:inherit;text-decoration:none;border-radius:10px;
  -webkit-tap-highlight-color:transparent}
.hb-home:active{background:rgba(255,255,255,.14)}
.hb-nav:active{background:rgba(255,255,255,.16)}
/* 7.29 shipped a second, X icon that was meant to replace the bars while the sheet was
   open. It never replaced anything: `.hb-nav svg` is (0,1,1) and `.hb-nav__x` was (0,1,0),
   so the `display:block` above outranked the `display:none` and BOTH icons showed. Removed
   in 7.33 rather than out-specified — the bars toggle, and the scrim and Escape also close
   the sheet, so the second icon was never carrying its weight. */
body.hb-menu .doc-bar{z-index:42}

/* the scrim — this used to be 72px of reserved footer height on every page */
.hb-tabspace{position:fixed;inset:0;z-index:40;background:rgba(6,50,46,.52);
  opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s}
body.hb-menu .hb-tabspace{opacity:1;visibility:visible}

/* the sheet */
.hb-tabs{position:fixed;z-index:41;left:8px;right:8px;
  top:calc(54px + env(safe-area-inset-top) + 8px);
  max-width:520px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
  background:#fff;border-radius:20px;padding:8px;
  box-shadow:0 18px 44px rgba(6,50,46,.28),0 2px 6px rgba(6,50,46,.12);
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.985);
  transform-origin:top left;
  transition:opacity .18s ease,transform .18s ease,visibility .18s}
body.hb-menu .hb-tabs{opacity:1;visibility:visible;transform:none}
/* 11.29: the FIND invitation lives inside the search box and is longer than the old
   placeholder, so it is set a step smaller than the text the user types. Without this it
   is cut off at 320px. opacity:1 keeps it the colour the pages picked, not the browser's. */
.search::placeholder{font-size:13px;opacity:1}
/* 11.27: the sheet is empty for now (hb-shell.js). Without a height it would open as an
   8px white sliver that reads as a glitch; this keeps it a panel until content comes. */
.hb-tabs.hb-tabs--empty{display:block;min-height:140px}
/* 12.83: the sheet now carries Last opened, Share and Help; on a short screen it scrolls inside itself. */
html body .hb-tabs.hb-tabs--empty{max-height:calc(100vh - 54px - env(safe-area-inset-top) - 24px);max-height:calc(100dvh - 54px - env(safe-area-inset-top) - 24px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

.hb-tab{display:flex;align-items:center;gap:10px;min-height:50px;
  padding:8px 10px;border-radius:14px;color:var(--hb-ink);text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .12s ease,color .12s ease}
.hb-tab__ico{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:11px;color:var(--hb-navy);
  background:linear-gradient(140deg,#E9F8F4,#D3EFE8)}
.hb-tab__ico svg{width:19px;height:19px}
.hb-tab__lbl{min-width:0;font-size:12.5px;font-weight:700;line-height:1.25;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
/* Offline is a utility, not a section, and 10.51 makes it the one row in the sheet
   you cannot miss. The 10.37 slate was too quiet. Gold rather than teal, because teal
   is the selected tab and a second teal row would read as "you are here"; this spends
   the third use of the 7.25 --hb-gold budget deliberately, in the MENU, never in
   content where amber already means caution. :not(.is-on) so opening the page still
   gives it the ordinary selected treatment instead of a third appearance. */
.hb-tab--util:not(.is-on) .hb-tab__ico{background:linear-gradient(150deg,#FFC747,#F0A01E);
  color:#4A3000;box-shadow:0 2px 8px rgba(224,150,20,.38)}
.hb-tab--util:not(.is-on) .hb-tab__lbl{color:#8A5A00;font-weight:800}
/* .hb-tab declares no border, so border-color alone would have done nothing */
.hb-tab--util:not(.is-on){background:#FFF7E6;box-shadow:inset 0 0 0 1px #F0D093}
.hb-tab.is-on{background:linear-gradient(140deg,#0E7A6C,var(--hb-navy));color:#fff}
.hb-tab.is-on .hb-tab__ico{background:rgba(255,255,255,.18);color:#fff}
.hb-tab:active{background:var(--hb-accent-dim);color:var(--hb-navy)}
.hb-tab.is-on:active{background:var(--hb-navy-2);color:#fff}

/* The section name replaced "Aviation HUB" in this slot (7.50), and some of them are
   long — DISPATCH REFERENCE (dispatch list) is 24 characters. Scoped to [data-hb-sec] so the hub's
   own label, which is short and not generated, keeps its size. It truncates rather than
   pushing the brand off the left of a 375px screen. */
/* 10.47: the section name truncated but the BRAND could not, so on a 375px screen
   DISPATCH REFERENCE (dispatch list) and HANGARBIBLE overlapped instead of one of them giving
   way. A flex item only shrinks below its content when min-width:0 lets it. */
.doc-bar .hb-name{flex:0 0 auto;white-space:nowrap}
/* 10.61: the right-hand block is gone; the section name is in the brand instead */
.doc-bar .hb-right{display:none}
.doc-bar .hb-sec{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff}
.doc-bar .hb-nav{order:9;margin-left:auto}
.doc-bar .hb-hub[data-hb-sec]{max-width:46vw;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:12.5px;letter-spacing:.02em}
@media(max-width:430px){
  .doc-bar{gap:10px;padding-left:14px;padding-right:14px}
  .doc-bar .hb-name{font-size:15px;letter-spacing:.05em}
  .doc-bar .hb-hub[data-hb-sec]{max-width:50vw;font-size:12px}
}

/* on a narrow phone the header gives up its second line so the button fits */
@media(max-width:400px){.hb-rev{display:none}}
@media(min-width:480px){.hb-tabs{grid-template-columns:1fr 1fr 1fr}}
@media(prefers-reduced-motion:reduce){
  .hb-tabs,.hb-tabspace,.hb-tab,.hb-hero{transition:none}
}
@media print{.hb-tabs,.hb-tabspace,.hb-nav{display:none}}

/* 7.95 — the search box and the filter beside it, on ONE line.
   THIS LIVES IN hb-shell.css, not tasks.css. 7.94 put it in tasks.css and it did nothing:
   tools.html, parts-catalog.html and defect-library.html do not load tasks.css at all — each
   inlines its own copy of .toolbar and .search. hb-shell.css is the one stylesheet every page
   loads. A shared rule is only shared if the page reads the file it is in.
   The pages set .search{width:100%} in their own <style>, which comes after this file; the
   descendant selector .toolbar__row .search wins on specificity rather than on order, which is
   why it does not matter that the page's copy is later. Under 380px a second select drops to
   its own line rather than squeezing the search box down to nothing. */
.toolbar__row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.toolbar__row .search,.toolbar__row .hb-search{flex:1 1 190px;min-width:0;width:auto}
.toolbar__row select{flex:0 1 200px;min-width:130px;min-height:46px;
  border:1px solid var(--line);border-radius:999px;padding:0 14px;font-size:14px;
  background:#fff;color:var(--ink);outline:none;box-shadow:0 1px 3px rgba(10,90,84,.05)}
.toolbar__row select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
@media(max-width:380px){.toolbar__row select{flex:1 1 100%}}

/* ==== 10.70 THE OFFICIAL HEADER — logo tile + stacked wordmark left, section pill right ==== */
.doc-bar .hb-div,.doc-bar .hb-sec{display:none}
.doc-bar .hb-brand,.doc-bar .hb-home{display:flex;align-items:center;gap:11px;min-width:0;color:#fff;text-decoration:none}
.doc-bar .hb-logo{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:#0E7A6C;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;color:#fff}
.doc-bar .hb-logo svg{width:27px;height:27px;display:block;fill:currentColor}
.doc-bar .hb-stack{display:flex;flex-direction:column;line-height:1.12;min-width:0}
.doc-bar .hb-stack .hb-name{font-size:16px;font-weight:800;letter-spacing:.07em;white-space:nowrap;color:#fff}
.doc-bar .hb-stack .hb-tag{font-size:11.5px;font-weight:500;letter-spacing:.01em;color:rgba(255,255,255,.74);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-bar .hb-pill{order:8;margin-left:auto;min-width:0;max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.13);padding:6px 12px;border-radius:999px}
.doc-bar .hb-pill~.hb-nav{margin-left:6px}
/* 10.85 — the dot grid is drawn at the SAME square as the logo tile, 38px (34px on a phone),
   so the two ends of the header weigh the same. The generic rule above keeps `.hb-nav svg` at
   22px for anywhere else a nav button is used; this one is scoped to `.doc-bar` and wins on
   specificity (0,2,1 against 0,1,1) rather than by load order. The button box stays 40px, so
   the 38px drawing sits inside it with 1px to spare — do not grow the icon further without
   growing the button, and the button cannot grow past the 54px bar. */
.doc-bar .hb-nav svg{width:38px;height:38px}
@media(max-width:600px){
  .doc-bar .hb-logo{width:34px;height:34px;border-radius:9px}
  .doc-bar .hb-logo svg{width:24px;height:24px}
  .doc-bar .hb-nav svg{width:34px;height:34px}
  .doc-bar .hb-stack .hb-name{font-size:14.5px;letter-spacing:.05em}
  .doc-bar .hb-stack .hb-tag{font-size:10.5px}
  .doc-bar .hb-pill{font-size:11.5px;padding:5px 10px;max-width:38vw}
}
@media(max-width:360px){.doc-bar .hb-stack .hb-tag{display:none}}
@media print{.doc-bar .hb-pill{background:none;padding:0}}
/* 10.70: on a phone the wordmark never shrinks; the section pill is what gives way */
.doc-bar .hb-brand{flex:0 0 auto;margin-right:0}
.doc-bar .hb-pill{flex:0 1 auto}
.doc-bar .hb-stack .hb-tag{overflow:visible}
@media(max-width:600px){.doc-bar .hb-brand,.doc-bar .hb-home{gap:9px}.doc-bar .hb-pill{max-width:none;font-size:11px;padding:5px 9px}}
/* 10.71: the section pill is an OUTLINE, not a filled chip (user's choice) */
.doc-bar .hb-pill{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}

/* ---- 10.99: the search moved into the header ------------------------------
   The hub carried its command bar in the hero, about 80px of the first screen
   spent on a box most visits never type into. It is now behind a magnifier in
   the header, next to the sections button, and the hero starts with the
   sections. The INPUT ITSELF IS MOVED, not rebuilt: index.html still owns it,
   its listeners and its id, so the hub's own script is untouched. */
/* 11.0: the magnifier sits AGAINST the dots. order 8 puts it after the brand and before
   the sections button (order 9), and the auto margin is what pushes the pair to the right
   end together. On a page that has a section pill the pill already owns that auto margin,
   but such a page has no magnifier — it has its own search on the page. */
.doc-bar .hb-find{flex:0 0 auto;order:8;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;margin:0 0 0 auto;padding:0;background:transparent;border:0;
  border-radius:12px;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.doc-bar .hb-find + .hb-nav{margin-left:2px}
.doc-bar .hb-find svg{width:22px;height:22px;display:block}
.doc-bar .hb-find:active{background:rgba(255,255,255,.16)}
body.hb-seek .doc-bar .hb-find{background:rgba(255,255,255,.18)}
.hb-search{position:fixed;z-index:41;left:0;right:0;
  top:calc(54px + env(safe-area-inset-top));
  background:#fff;padding:12px 16px 14px;
  box-shadow:0 14px 30px rgba(6,50,46,.18),0 1px 3px rgba(6,50,46,.10);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s}
body.hb-seek .hb-search{opacity:1;visibility:visible;transform:none}
.hb-search__in{max-width:940px;margin:0 auto}
.hb-search .cmd{padding:0}
/* the result list is the tall part; it scrolls inside the panel so the panel
   never grows past the screen */
.hb-search .cmd__res{padding-top:12px;max-height:min(62vh,62dvh);overflow:auto;
  -webkit-overflow-scrolling:touch}
body.hb-seek .hb-tabspace{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){.hb-search{transition:none}}

/* ---- 11.0: no strip under the header -------------------------------------
   With the command bar gone from the hero (10.99) the hero was left as a dark
   band about 40px tall holding a title nobody needs — "What are you looking
   for?" was the label ON the search box — and its clipped bottom edge read as
   a shadow under the header. The hero is hidden on any page whose search has
   moved into the header, which today is the hub; the aircraft sky goes with
   it, and that is the trade: the tiles now start at the top of the page.
   The header's own drop shadow goes too — with nothing but flat background
   under it, it was the only edge left to notice. */
body.hb-hassearch .hb-hero{display:none}
body .doc-bar{box-shadow:none}
body.hb-hassearch .shell{padding-top:14px}

/* ---- 11.2: the header gets out of the way -------------------------------
   It slides up while you scroll DOWN and comes back the moment you scroll UP:
   54px of green returned to the page on every screen of a long table. The
   phone-browser gesture, so there is nothing to learn.

   Three things it must not do, and each is a rule below rather than a comment
   in the script:
   - not move at all on a page too short to scroll (the script checks)
   - not leave a 54px hole above a sticky toolbar: `.toolbar` is anchored under
     the header at top:54px, so it goes to the top when the header is not there
   - not hide while a panel that is anchored to it is open (the script forces
     it back for .hb-menu and .hb-seek) */
.doc-bar{transition:transform .22s ease}
body.hb-bar-away .doc-bar{transform:translateY(-100%)}
.toolbar{transition:top .22s ease}
body.hb-bar-away .toolbar{top:0}
@media(prefers-reduced-motion:reduce){.doc-bar,.toolbar{transition:none}}


/* ---- 11.4: one step back, in the header ----------------------------------
   The bottom bar of 11.3 is gone; the arrow it was going to carry lives here
   instead, between the magnifier and the sections button. Three targets at the
   right-hand end, each 40px, in the order they are reached for: search, back,
   sections. The sections button moves from order 9 to 10 to make room — the
   auto margin stays on the first of the three, which is what carries the group
   to the right edge. */
.doc-bar .hb-back{flex:0 0 auto;order:9;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;margin:0;padding:0;background:transparent;border:0;border-radius:12px;
  color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.doc-bar .hb-back svg{width:22px;height:22px;display:block}
.doc-bar .hb-back:active{background:rgba(255,255,255,.16)}
.doc-bar .hb-nav{order:10}
.doc-bar .hb-back + .hb-nav{margin-left:2px}
.doc-bar .hb-find + .hb-back{margin-left:2px}

/* (the .hb-foot and .hb-warn rules were deleted in 11.5 with the footer they styled) */

/* ---- 11.5: the caution is per page ---------------------------------------
   The old footer said the same nine words on twenty pages, which is the surest
   way to make a warning invisible. Each page now carries its own, in the shape
   FIND SPLICE has used since 10.88: the label in red, then what actually goes
   wrong ON THAT PAGE. `.pagenote` is declared here so the twelve pages that had
   no note of their own need no CSS added to them; the eight that define it
   already keep their own copy, which is the same look. */
.pagenote{font-size:11.5px;line-height:1.55;color:var(--hb-ink-faint,#61706b);
  margin:26px 0 0;padding-top:14px;border-top:1px solid var(--hb-line,#E3EBE8)}
.pagenote .ro{color:#C0392B;font-weight:800;letter-spacing:.02em;white-space:nowrap}

/* ---- 11.11: reaching the page without a mouse --------------------------
   Three separate things, none of them about compliance:

   SKIP LINK. Invisible until it is focused, then it is the first thing Tab
   lands on. Without it, anyone driving by keyboard or screen reader walks the
   whole header on every page before reaching a word of content.

   VISIBLE FOCUS. :focus-visible, not :focus \u2014 so a mouse click does not leave
   a ring behind, but a Tab does. This helps the person it was written for and
   it helps a mechanic in gloves in bad light who is not sure which button he
   is on.

   The outline is offset and doubled (outline + shadow) so it reads on the dark
   green header as well as on white. */
.hb-skip{position:fixed;left:8px;top:8px;z-index:60;transform:translateY(-200%);
  background:#fff;color:var(--hb-navy,#0A5A54);font:700 13px/1 inherit;
  padding:12px 16px;border-radius:999px;text-decoration:none;
  box-shadow:0 6px 20px rgba(6,50,46,.28);transition:transform .15s ease}
.hb-skip:focus{transform:translateY(0)}
:focus-visible{outline:2px solid #0D9488;outline-offset:2px;border-radius:4px}
.doc-bar :focus-visible{outline-color:#fff;box-shadow:0 0 0 4px rgba(10,90,84,.45)}
@media(prefers-reduced-motion:reduce){.hb-skip{transition:none}}

/* ---- 11.21: NOTHING SCROLLS SIDEWAYS -----------------------------------
   The user asked for every page to fit its screen with no sideways scroll
   bar anywhere. Two causes were found, on eleven pages:

   1. The catalogue folds (.stds) made their table its OWN scroller:
      display:block + overflow-x:auto + white-space:nowrap. That is the
      grey bar under the M39029 table. Here the table is a table again,
      100% wide, and its text wraps.
   2. Result cards set td.n to nowrap, so one long value (a list of RG
      cables, a tool list) pushed the table, the card and the whole page
      past the right edge — up to 1,226 px on a 360 px phone.

   `html body` in front of each selector is deliberate: every page declares
   its own .tbl rules AFTER this file loads, and equal specificity would let
   the page win. break-word, not anywhere: a word only breaks when it cannot
   fit on a line by itself, so short words in narrow columns stay whole. */
html body .tbl th,html body .tbl td,html body .tbl td.n{white-space:normal;overflow-wrap:break-word}
html body .stds div.tbl{display:block;overflow:visible;white-space:normal;max-width:100%}
html body .stds table.tbl{display:table;width:100%;overflow:visible;white-space:normal}
html body .stds .tbl td,html body .stds .tbl td:nth-child(n){min-width:0}
@media(max-width:480px){
  html body .tbl th,html body .tbl td{padding:7px 6px}
  html body .stds table.tbl{font-size:12.5px}
  html body .stds table.tbl th{font-size:10.5px;letter-spacing:.02em}
  html body .stds table.tbl td.n{font-size:12px}
  html body .stds table.tbl th,html body .stds table.tbl td{padding:6px 5px}
  /* prose cells may break a word only if it cannot fit a line by itself; code cells (.n) never */
  html body .stds table.tbl td:not(.n){overflow-wrap:anywhere}
  /* the head drawings in the FIND folds: 60 px of a 298 px table was the drawing column */
  html body .stds .hd{width:38px;height:16px}
  html body .stds .hdcell{width:42px}
}
@media(max-width:359px){
  html body .stds table.tbl td.n{font-size:11px}
  html body .stds table.tbl th,html body .stds table.tbl td{padding:5px 3px}
}
/* 11.21: the header's own narrow-screen rule (max-width:430px, above) never took effect —
   every page repeats `.doc-bar{padding:0 22px;gap:16px}` in its official header block AFTER
   this file loads. On a 375 px phone the menu button stood 4 px past the edge, on 320 px
   41 px. Same rule, stated so it wins. */
@media(max-width:430px){
  html body .doc-bar{gap:10px;padding-left:14px;padding-right:14px}
  html body .doc-bar .hb-name{font-size:15px;letter-spacing:.05em}
}
@media(max-width:350px){
  html body .doc-bar{gap:4px;padding-left:10px;padding-right:10px}
  html body .doc-bar .hb-brand{gap:9px}
  html body .doc-bar .hb-name{font-size:14px;letter-spacing:.03em}
}
@media(max-width:359px){
  html body .tbl th,html body .tbl td{padding:6px 4px}
  html body .tbl th{font-size:10px;letter-spacing:0}
}

/* ==== 11.60 THE LIGHT HEADER AND THE WORDMARK (user's choice from three previews) ====
   The bar turns light grey (#EBECED); "hangar" black, "Bible" and the plane green, a curved
   green line under the name and STUDY AND REFERENCE GUIDE in small spaced capitals.
   Replaces the 10.70 logo tile and the stacked HANGARBIBLE / tagline.
   Every page restates `.doc-bar{background:#0A5A54;color:#fff…}` in its own official header
   block, AFTER this file loads, so these rules are written `html body .doc-bar…` (0,1,2 and
   up) and win on specificity, not on order. Everything that sat white on the teal bar —
   section pill, magnifier, back arrow, menu dots, focus ring, press states — is teal now. */
html body .doc-bar{background:#E4F3EF;color:#0A5A54;border-bottom:1px solid rgba(12,124,110,.12)}
html body .doc-bar .hb-brand,html body .doc-bar .hb-home{color:#0A5A54}
html body .doc-bar .hb-home:active{background:rgba(10,90,84,.08)}
html body .doc-bar .hb-pill{color:#0A5A54;background:#fff;box-shadow:none;font-weight:700}
html body .doc-bar .hb-nav,html body .doc-bar .hb-find,html body .doc-bar .hb-back{color:#0A5A54}
html body .doc-bar .hb-nav:active,html body .doc-bar .hb-find:active,html body .doc-bar .hb-back:active{background:rgba(10,90,84,.1)}
html body.hb-seek .doc-bar .hb-find{background:rgba(10,90,84,.12)}
html body .doc-bar :focus-visible{outline-color:#0A5A54}
/* the wordmark block: name, curved line, tagline — centred on each other */
.doc-bar .hb-wmk{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;line-height:1}
.doc-bar .hb-wm{display:block;height:26px;width:auto;max-width:none}
.doc-bar .hb-swoosh{display:block;width:100%;height:5px;margin-top:2px;fill:#0C7C6E}
.doc-bar .hb-wmtag{display:block;margin-top:3px;font-size:7px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:#4A5553;white-space:nowrap}
.doc-bar .hb-name.hb-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.doc-bar .hb-logo,.doc-bar .hb-tag,.doc-bar .hb-stack{display:none}
@media(max-width:600px){.doc-bar .hb-wm{height:23px}.doc-bar .hb-swoosh{height:4px}.doc-bar .hb-wmtag{font-size:6.4px;letter-spacing:.13em}}
@media(max-width:340px){.doc-bar .hb-wm{height:21px}.doc-bar .hb-wmtag{font-size:6px;letter-spacing:.1em}}
@media print{html body .doc-bar{border-bottom:0}}

/* 11.61 MINT: the light header of 11.60 moved from grey #EBECED to mint #E4F3EF (user's pick,
   idea 6 of six), with a green hairline under it, and the section name is a FILLED white chip
   instead of an outline. The two lines above were edited in place, not overridden. */

/* 11.74b ONE SURFACE: the page is the colour of the header, at the user's request — header and page
   must not read as two bands. `html:root` (0,1,1) beats each page's own `:root{--paper:…}` whatever
   the load order, and `html body` beats each page's `body{background:…}`. The header loses its
   hairline and shadow; it still covers the content that scrolls under it. Cards stay white. */
html:root{--paper:#E4F3EF}
html body{background:#E4F3EF}
html body .doc-bar{border-bottom:0;box-shadow:none}

/* 11.77 THE SEARCH PANEL ON A PHONE: it takes the whole screen under the header instead of a
   62%-high box over a dimmed page, the result list scrolls to the bottom edge, the field is
   compact, and long result lines wrap instead of being cut. */
.hb-search .hit__sub,.hb-search .hit__txt{white-space:normal;overflow-wrap:anywhere}
@media(max-width:700px){
  .hb-search{bottom:0;padding:10px 12px 0;display:flex;flex-direction:column;box-shadow:none}
  .hb-search__in{flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column}
  .hb-search .cmd__res{flex:1 1 auto;min-height:0;max-height:none;padding-top:10px;
    padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .hb-search .cmd__box{padding:9px 14px;box-shadow:none;border:1px solid #CFE3DD;background:#F7FBFA}
  .hb-search .hit{padding:10px 12px;margin-bottom:6px}
  .hb-search .cmd__grp{margin:10px 2px 6px}
}

/* 11.83 THE LOW-POLY BACKGROUND, from the user's screenshot: mint facets with darker teal ribbons
   behind every page, and the matching app icon. The picture is `hb-bg.svg` (one file, ~51 KB,
   ~10 KB gzipped) on a FIXED `body::before`, not on `body` itself — iOS Safari ignores
   `background-attachment:fixed` and would stretch a `cover` image down the whole document
   height. `z-index:-1` on the root stacking context paints it above the canvas (body's mint
   still propagates there) and below every card. `pointer-events:none` or it would eat taps.
   The header and the sticky search bands turn FROSTED (translucent mint + blur) so the facets
   run under them and header, band and page still read as one surface (11.75/11.81). Cards stay
   white. If the picture is ever dropped, delete this block: nothing else refers to it.
   12.36: the picture is now hb-bg.webp (the user's hangar photo, block 12.36); hb-bg.svg is no longer used. */
html body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:#C4D6D1 url(hb-bg.webp) 50% 50%/cover no-repeat}
html body .doc-bar,html body .toolbar{background:rgba(228,243,239,.72);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  html body .doc-bar,html body .toolbar{background:rgba(228,243,239,.94)}}
@media print{html body::before{display:none}html body .doc-bar,html body .toolbar{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* 12.3: EVERY STICKY SEARCH gets out of the way -- FIN LIST's 10.96 rule, now site-wide. Past 90 px the
   bar is compact; scrolling down slides it up out of view, scrolling up brings it back; it never hides
   while its box has focus. The classes are set by hb-shell.js on the page's first .toolbar. */
.toolbar{transition:transform .2s ease,padding .2s ease,top .22s ease}
.toolbar.is-min{padding-top:7px!important;padding-bottom:5px!important}
.toolbar.is-min .search{padding-top:9px;padding-bottom:9px;font-size:15px}
.toolbar.is-min .count,.toolbar.is-min .toolrow{display:none}
.toolbar.is-away{transform:translateY(calc(-100% - 8px))}
@media(prefers-reduced-motion:reduce){.toolbar{transition:none}}

/* ==== 12.22 THE HEADER BECOMES THE SEARCH FIELD (hub only: the only page with a .cmd) ====
   The magnifier grows into a field across the whole header; the wordmark slides out left, back and
   menu fade. `.hb-cmd` is index.html's own `.cmd`, moved into the bar by hb-shell.js; --hb-l / --hb-r
   are the magnifier's position, set by the script, so the field starts on top of it. */
html body.hb-hdrsearch .doc-bar{overflow:hidden}
.doc-bar .hb-cmd{position:absolute;top:8px;bottom:8px;left:var(--hb-l,auto);right:var(--hb-r,100px);
  padding:0;margin:0;z-index:2;opacity:0;visibility:hidden;pointer-events:none;
  transition:left .32s cubic-bezier(.3,.7,.2,1),right .32s cubic-bezier(.3,.7,.2,1),opacity .14s ease,visibility 0s linear .32s}
.doc-bar .hb-cmd .cmd__box{height:100%;min-height:0;padding:0 0 0 13px;gap:8px;border-radius:999px;
  background:#fff;border:1px solid #CFE3DD;box-shadow:0 2px 10px rgba(10,90,84,.10)}
.doc-bar .hb-cmd .cmd__box:focus-within{border-color:#0D9488;box-shadow:0 0 0 3px rgba(13,148,136,.18)}
.doc-bar .hb-cmd .cmd__in{font-size:16px;opacity:0;transition:opacity .15s ease;min-width:0}
.doc-bar .hb-cmd .cmd__clr{min-height:0;height:100%;padding:0 4px;font-size:20px}
.doc-bar .hb-cancel{flex:0 0 auto;height:100%;border:0;background:transparent;color:#61706b;
  font:600 14.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;padding:0 15px 0 6px;cursor:pointer}
.doc-bar .hb-brand,.doc-bar .hb-home,.doc-bar .hb-find,.doc-bar .hb-back,.doc-bar .hb-nav{
  transition:transform .3s cubic-bezier(.3,.7,.2,1),opacity .2s ease}
body.hb-seek .doc-bar .hb-cmd{left:10px;right:10px;opacity:1;visibility:visible;pointer-events:auto;
  transition:left .32s cubic-bezier(.3,.7,.2,1),right .32s cubic-bezier(.3,.7,.2,1),opacity .1s ease,visibility 0s}
body.hb-seek .doc-bar .hb-cmd .cmd__in{opacity:1;transition-delay:.14s}
body.hb-seek .doc-bar .hb-brand,body.hb-seek .doc-bar .hb-home{transform:translateX(-120%);opacity:0;pointer-events:none}
body.hb-seek .doc-bar .hb-find,body.hb-seek .doc-bar .hb-back,body.hb-seek .doc-bar .hb-nav{opacity:0;transform:scale(.6);pointer-events:none}
/* the results take the whole screen under the header, on every width */
body.hb-hdrsearch .hb-search{bottom:0;background:#E4F3EF;box-shadow:none;padding:6px 16px 0;
  display:flex;flex-direction:column}
body.hb-hdrsearch .hb-search__in{flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column}
body.hb-hdrsearch .hb-search .cmd__res{flex:1 1 auto;min-height:0;max-height:none;overflow:auto;padding-top:6px;
  padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.hb-search__hint{margin:8px 2px 0;font-size:12.5px;color:#61706b}
body.hb-hdrsearch .hb-search .cmd__res:not([hidden]) ~ .hb-search__hint,
body.hb-hdrsearch .hb-search__hint:has(~ .cmd__res:not([hidden])){display:none}
@media(prefers-reduced-motion:reduce){.doc-bar .hb-cmd,.doc-bar .hb-brand,.doc-bar .hb-find,.doc-bar .hb-back,.doc-bar .hb-nav{transition:none}}
/* the header carries the field now, so it sits above the results panel (41) and the dim layer */
html body.hb-seek .doc-bar{z-index:42}
body.hb-hdrsearch.hb-seek .hb-tabspace{opacity:0;visibility:hidden}
/* the white pill is the field's focus mark; the page-wide focus ring would draw a second box inside it */
html body .doc-bar .hb-cmd .cmd__in:focus,html body .doc-bar .hb-cmd .cmd__in:focus-visible{outline:none;box-shadow:none;border-radius:0}

/* ==== 12.23 THE HEADER SEARCH ON SECTION PAGES WITH ONE SEARCH (list in hb-shell.js) ====
   The page's own input is moved into the header inside the hub's field shape (.cmd > .cmd__box).
   The hub styles .cmd__* in its own page; section pages get them here, and the page's .search
   look (border, padding, radius of the old full-width box) is taken off the moved input. */
.doc-bar .hb-cmd .cmd__box{display:flex;align-items:center}
.doc-bar .hb-cmd .cmd__ico{flex:0 0 auto;color:#0D9488;display:flex}
.doc-bar .hb-cmd .cmd__ico svg{width:17px;height:17px}
html body .doc-bar .hb-cmd .cmd__in{flex:1 1 auto;width:auto;min-width:0;max-width:none;margin:0;padding:0;border:0;
  border-radius:0;background:transparent;box-shadow:none;font:16px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:#1b2320;height:auto;-webkit-appearance:none;appearance:none}
.doc-bar .hb-cmd .cmd__in::-webkit-search-cancel-button{display:none}
.doc-bar .hb-cmd .cmd__clr{flex:0 0 auto;border:0;background:transparent;color:#8a9893;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.doc-bar .hb-cmd .cmd__clr[hidden]{display:none}
/* the band that held the box keeps the count only, and is no longer sticky */
html body .toolbar.hb-tb-off{position:static;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
  padding:0;transform:none;top:auto}
html body .toolbar.hb-tb-off .count{margin:0 2px}
html body .toolbar.hb-tb-off:not(:has(.count:not(:empty))){display:none}

/* ==== 12.23 ONE GAP UNDER THE HEADER, EVERY PAGE: the first thing on the page starts 16 px below
   the header (the hub had 36 px to "Quick check"). The page container carries the 16 px; the first
   block inside it gives up its own top margin/padding. Pages whose first block is a sticky search band
   (parts-catalog, tools, pins-sockets) keep the band's 12 px inside it and take 4 px on the container. */
html body .wrap,html body .shell,html body main.shell{padding-top:16px!important}
html body .wrap:has(> .toolbar:first-child:not(.hb-tb-off)){padding-top:4px!important}
#sections > .grp:first-child,#sections > .grp:first-of-type{margin-top:0}
html body .pick{margin-top:0}
html body .toolbar.hb-tb-off .toolrow{margin-top:0}
/* FIN LIST opens on its hint, which carried 26 px of its own on top */
html body .wrap > .toolbar.hb-tb-off + #list + #empty + #hint{padding-top:0}
html body .starts{padding-top:0}
html body .starts > .zhead:first-child{margin-top:0}

/* ==== 12.27 ROOM UNDER THE FOOTER, EVERY PAGE: the REFERENCE ONLY note at the end of each page ended 3-20 px
   from the bottom on some pages (the hub, EDIT), where a phone's home bar and browser toolbar sit over it.
   Now the page ends one header-height (54 px) below the note, plus the phone's safe area. The container
   carries the space; the note gives up any bottom margin of its own so every page measures the same. */
html body .wrap,html body .shell,html body main.shell{padding-bottom:calc(54px + env(safe-area-inset-bottom))!important}
html body .pagenote{margin-bottom:0!important;padding-bottom:0!important}

/* ==== 12.35 THE SEARCH BAND OF THE FIND PAGES: their box stood loose in the page; hb-shell.js wraps it in a
   .toolbar.hb-band so it behaves as every search band -- sticky under the header, slides under it on the
   way down, then leaves with it (block 5 of hb-shell.js). Empty while the page has hidden its box. */
.hb-band{position:sticky;top:54px;z-index:3;padding:8px 0 8px;margin:0 0 8px}
.hb-band > .search{margin:0!important}
.hb-band:has(> .search[hidden]),.hb-band:has(> input[hidden]){display:none}

/* ==== 12.36 THE HANGAR PHOTO BEHIND EVERY PAGE: background 60 from the user's own photo of a hangar bay seen from
   above, turned into a flat illustration in the site's mint and teal (hb-bg.webp, 1080x1778, ~70 KB). It replaces
   the low-poly hb-bg.svg on the same fixed body::before (block 11.83). The picture is mid-tone and busy, so the
   text that sat straight on the page now sits on a FROSTED PLATE: near-white, blurred behind, rounded like the
   cards. Long notes get a full-width plate; one-line counts, hints and zone heads a chip as wide as their text.
   On the hub each group title and its line under it share one plate. Tiles and cards are white already and keep
   a slightly firmer border and shadow so they stand clear of the picture. A screen wider than it is tall (a
   computer, a tablet on its side) gets hb-bg-wide.webp, the same bay cut landscape (1920x1200, ~70 KB), so the
   portrait picture is not blown up to fill it. */
@media (min-aspect-ratio:1/1){html body::before{background-image:url(hb-bg-wide.webp)}}
html body .pagenote,html body .hint,html body .foot-note,html body p.note,html body .empty:not(.slot),html body .empty-state,
html body .count,html body .zhead,html body .pkg,html body .grp{
  background:rgba(246,250,249,.88);border:1px solid rgba(10,90,84,.10);border-radius:12px;
  -webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);
  box-shadow:0 2px 8px rgba(6,50,46,.10)}
html body .pagenote.pagenote,html body .hint,html body .foot-note,html body p.note{padding:10px 13px!important}
html body .empty:not(.slot),html body .empty-state{padding:18px 14px!important}
html body .count,html body .zhead,html body .pkg{width:fit-content;max-width:100%;padding:4px 11px!important;border-radius:999px}
html body .grp{width:fit-content;max-width:100%;padding:7px 13px 8px}
html body .hint:empty,html body .count:empty,html body .pagenote:empty{display:none}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  html body .pagenote,html body .hint,html body .foot-note,html body p.note,html body .empty:not(.slot),html body .empty-state,
  html body .count,html body .zhead,html body .pkg,html body .grp{background:rgba(246,250,249,.96)}}
@media print{html body .pagenote,html body .hint,html body .foot-note,html body p.note,html body .empty:not(.slot),html body .empty-state,
  html body .count,html body .zhead,html body .pkg,html body .grp{background:none;border:0;box-shadow:none}}

/* ==== 12.37 NIGHT RAMP BACKGROUND, HEADER IN THE SKY'S COLOUR: the background is now option 59 -- the user's
   photo of an aircraft on the ramp at night with the yellow stairs, as a flat illustration (same two files,
   hb-bg.webp / hb-bg-wide.webp). Its whole upper part is ONE flat colour, #78978F, and the header and the
   sticky search bands are painted exactly that colour, solid, with no frost, line or shadow, so they merge
   with the sky. The picture is anchored to the TOP (not centred) so the sky is always what lies under the
   header, on any screen shape. On this mid mint the header's teal icons were too faint: icons and the tagline
   go near-black, the wordmark is re-coloured in hb-shell.js (near-black "hangar", white "Bible"). The status
   bar colour (theme-color) follows. */
html body::before{background-color:#78978F;background-position:50% 0}
html body .doc-bar,html body .toolbar{background:#78978F;-webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:0;box-shadow:none}
html body .doc-bar .hb-nav,html body .doc-bar .hb-find,html body .doc-bar .hb-back{color:#0B2A26}
html body .doc-bar .hb-nav:active,html body .doc-bar .hb-find:active,html body .doc-bar .hb-back:active{background:rgba(11,42,38,.14)}
html body.hb-seek .doc-bar .hb-find{background:rgba(11,42,38,.14)}
html body .doc-bar :focus-visible{outline-color:#0B2A26}
html body .doc-bar .hb-swoosh{fill:#FFFFFF}
html body .doc-bar .hb-wmtag{color:#14231F}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  html body .doc-bar,html body .toolbar{background:#78978F}}
@media print{html body .doc-bar,html body .toolbar{background:#fff}}

/* ==== 12.38 CLEAR BLUR -- the user's pick (option 5 of 10) for the labels that stood on white plates since 12.36:
   the hub's group titles, the one-line counts, CB RESETS' zone heads and EDIT's group labels. They lose the plate
   and take the background's own colour: nothing is painted behind them, only a light blur of what lies under
   them. On the flat sky the blur is invisible; over the aircraft and the ramp it smooths the detail under the
   letters so near-black text reads. Long notes (REFERENCE ONLY, hints, empty results) keep their plates.
   The hub's tiles get a firmer edge: a darker border, a deeper shadow, a darker name and count. */
html body .grp,html body .count,html body .zhead,html body .pkg{
  background:transparent;border:0;box-shadow:none;
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
html body .grp{width:fit-content;max-width:100%;padding:5px 8px;margin-left:-6px;border-radius:10px;
  color:#071A17;font-size:16.5px;font-weight:800}
html body .grp span{color:#0F241F;font-weight:600;font-size:12px}
html body .count,html body .zhead,html body .pkg{padding:3px 8px!important;margin-left:-8px;border-radius:8px;color:#0B211D!important}
html body .count{font-weight:600}
html body .zhead,html body .pkg{font-weight:800}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  html body .grp,html body .count,html body .zhead,html body .pkg{background:transparent}}
html body .card--sm{border:1px solid rgba(6,40,36,.16);box-shadow:0 3px 10px rgba(6,40,36,.20)}
html body .card--sm .card__lbl{color:#06302C;font-weight:800}
html body .card--sm .card__qty{color:#3A4D48}

/* ==== 12.43 THE BACK ARROW IN ONE PLACE: on a page with no magnifier the header spread its buttons apart, so the
   arrow stood in the middle of the bar (213 px on a 390 px phone) instead of beside the menu (282 px, where it is
   on the pages that have the magnifier). The first right-hand button now takes the free space on its left, so
   the arrow sits next to the menu on every page, and the magnifier, where there is one, next to the arrow. */
html body .doc-bar .hb-back{margin-left:auto}
html body .doc-bar .hb-find{margin-left:auto}
html body .doc-bar .hb-find + .hb-back{margin-left:2px}

/* ==== 12.44 A LIGHTER NIGHT, AND NOTES WITHOUT PLATES: the user wanted the notes (REFERENCE ONLY, the hints, the
   empty results) to read well straight on the background, with no bubble round them. From four lightnesses of the
   night-ramp picture he picked number 3 ("dusk"): the same scene, the sky two steps lighter -- #CCD9E0 instead of
   #78978F -- so near-black 12.5 px text stands at 8.9 : 1 on it (was 5.1 : 1). The header and the search bands
   follow the new sky; the wordmark is the original black-and-green again (hb-shell.js); the swoosh green again.
   The plates of 12.36 on the long notes go: no fill, border, shadow or blur -- dark text on the picture. */
html body::before{background-color:#CCD9E0}
html body .doc-bar,html body .toolbar{background:#CCD9E0}
html body .doc-bar .hb-swoosh{fill:#0C7C6E}
html body .pagenote,html body .hint,html body .foot-note,html body p.note,html body .empty:not(.slot),html body .empty-state{
  background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  color:#17231F;font-size:12.5px;line-height:1.6}
html body .pagenote.pagenote,html body .hint,html body .foot-note,html body p.note{padding:6px 2px!important}
html body .empty:not(.slot),html body .empty-state{padding:14px 2px!important}
html body .pagenote .ro{color:#A3241A!important}
html body .pagenote b,html body .hint b{color:#0B1A17}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  html body .doc-bar,html body .toolbar{background:#CCD9E0}
  html body .pagenote,html body .hint,html body .foot-note,html body p.note{background:transparent}}
@media print{html body .doc-bar,html body .toolbar{background:#fff}}

/* ==== 12.45 THE SEARCH IN THE COLOUR OF THE BACKGROUND: the user asked for the header, the search box and the frame
   round it all in the background's colour. The header and the search bands already were (#CCD9E0, 12.44); now the
   search box itself, the header search on the hub and its five sections, the PARTS CATALOG / TOOLS chapter picker
   and the By part number / By size / By picture switch are the same sky colour -- no white field. A dark teal
   frame (1.5 px) is what marks the box out; typing turns the frame teal with a soft ring. The header search's
   result panel is the sky colour too, so header, field and results read as one surface; the result rows stay white. */
html body #q,html body #catSearch,html body .toolbar input.search,html body .hb-band input,
html body .toolbar select,html body .doc-bar .hb-cmd .cmd__box,html body .cmd__box{
  background-color:#CCD9E0!important;border:1.5px solid rgba(11,42,38,.55)!important;box-shadow:none!important;color:#0B1F1C!important}
html body #q::placeholder,html body #catSearch::placeholder,html body .toolbar input.search::placeholder,
html body .cmd__in::placeholder{color:#34463F!important;opacity:1}
html body #q:focus,html body #catSearch:focus,html body .toolbar input.search:focus,html body .toolbar select:focus,
html body .cmd__box:focus-within{border-color:#0A5A54!important;box-shadow:0 0 0 3px rgba(10,90,84,.18)!important;outline:none!important}
html body .cmd__in{background:transparent!important;color:#0B1F1C!important}
html body .modes{background:#CCD9E0!important;border:1.5px solid rgba(11,42,38,.55)!important;box-shadow:none!important}
html body .modes .mode:not(.is-on):not([aria-selected="true"]){color:#10251F!important}
html body .hb-search,html body.hb-hdrsearch .hb-search{background:#CCD9E0!important}
/* the pages' own :focus-visible{border-radius:4px} squared the pill-shaped box while typing -- it keeps its shape */
html body #q:focus,html body #q:focus-visible,html body #catSearch:focus,html body #catSearch:focus-visible,
html body .toolbar input.search:focus,html body .toolbar input.search:focus-visible{border-radius:999px!important}

/* ==== 12.46 NO WHITE BOXES (see block 12.46 of hb-shell.js, which sets these two classes): a box that was white is
   the sky colour with the search box's frame; a white box inside it loses its fill and keeps only a quiet line. */
html body .hb-tone{background-color:#CCD9E0!important;background-image:none!important;
  border-color:rgba(11,42,38,.55)!important;border-style:solid!important;border-width:1.5px!important;box-shadow:none!important}
html body .hb-tone-in{background-color:transparent!important;background-image:none!important;box-shadow:none!important;
  border-color:rgba(11,42,38,.28)!important}
html body .hb-tone input,html body .hb-tone select,html body .hb-tone textarea,html body .hb-tone-in input,html body .hb-tone-in select{
  border-color:rgba(11,42,38,.55)!important}
/* the page's own box moved into the header search keeps no frame of its own -- the header field is the frame */
html body .cmd__box #q,html body .cmd__box .cmd__in,html body .cmd__box #q:focus,html body .cmd__box #q:focus-visible{
  border:0!important;box-shadow:none!important;background:transparent!important;outline:none!important}
/* 12.47: an opened section's header, white on some pages, stays in the colour of the box it opens */
html body .hb-tone[open]>summary,html body .hb-tone-in[open]>summary,html body .hb-tone details[open]>summary{
  background-color:transparent!important;border-bottom-color:rgba(11,42,38,.28)!important}

/* ==== 12.48 THE HUB'S TILE ICONS: no chip, a big dark icon. The user's pick (6 of 6) for icons on the background's
   colour that stand out: the pale tinted square behind each icon goes, the icon is near-black #0B2A26, 30 px,
   stroke 2.2. The group's colour stays in the dot beside the group title. */
html body .card--sm .card__ico{background:transparent!important;border:0!important;box-shadow:none!important;color:#0B2A26!important}
html body .card--sm .card__ico svg{width:30px!important;height:30px!important;stroke-width:2.2!important}

/* ==== 12.49 PALE SKY, BLACK TEXT, GLASS TILES: the user found the mint too dark and the text not black enough, and
   picked tint 3 of six -- PALE SKY BLUE. The same night-ramp scene redrawn on a blue-grey ramp (#5F7482 up to
   #F6F9FB); the sky, and so the header, the search bands, the search boxes and every toned box (12.44-12.46), is
   #CCD9E0 (all the #B0C5C0 above now read #CCD9E0). Black text at 13.4 : 1 on it.
   TEXT BLACK: the page colour tokens and the plain text go near-black #0B0F0E; soft and faint text #1F2724 / #343C39.
   THE HUB'S TILES (the user's pick 3 of 4): frosted glass -- a white haze, thicker at the top left, the picture
   blurred behind -- a 2 px WHITE frame and a soft shadow; the tile names in the green of "Bible" in the wordmark
   (#0C7C6E), icons and counts black. The other boxes of the site keep the dark frame of the search box.
   iPHONE: Safari was turning digit runs such as "17 1 150 00" into blue telephone links -- every page now says
   format-detection telephone=no (and date/address/email), and any link it still makes keeps the text's colour. */
html body{--ink:#0B0F0E;--ink-soft:#1F2724;--ink-faint:#343C39;--mute:#343C39;--hb-ink-faint:#343C39;color:#0B0F0E}
html body .pagenote,html body .hint,html body .foot-note,html body p.note,html body .count,html body .zhead,html body .pkg,
html body .grp,html body .grp span{color:#0B0F0E!important}
html body .card.card--sm{background:linear-gradient(145deg,rgba(255,255,255,.42),rgba(255,255,255,.14))!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.3)!important;backdrop-filter:blur(10px) saturate(1.3)!important;
  border:2px solid #FFFFFF!important;box-shadow:0 2px 8px rgba(20,40,55,.18)!important}
html body .card--sm .card__ico{color:#0B0F0E!important}
html body .card--sm .card__lbl{color:#0C7C6E!important}
html body .card--sm .card__qty{color:#1F2724!important}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  html body .card.card--sm{background:rgba(255,255,255,.55)!important}}
a[x-apple-data-detectors],a[href^="tel:"]{color:inherit!important;text-decoration:none!important;
  font:inherit!important;pointer-events:none}

/* ==== 12.50 (1) THE PICTURE BEHIND A VERSION NUMBER: _headers (12.39) lets a phone keep a picture for 7 days, and
   12.49 changed the pictures under the same names -- so a phone that had the old mint picture kept it under the new
   blue header and search bands, and the bands showed as pale blue blocks on green. The pictures are now asked for
   with ?v=<revision>: a new picture is a new address, fetched at once. RAISE THE ?v= WHENEVER A PICTURE CHANGES.
   (2) THE HUB'S TILES are framed in the search box's dark line (the user's choice) instead of white; glass kept. */
html body::before{background-image:url(hb-bg.webp?v=12.50)}
@media (min-aspect-ratio:1/1){html body::before{background-image:url(hb-bg-wide.webp?v=12.50)}}
html body .card.card--sm{border:1.5px solid rgba(11,42,38,.55)!important}

/* ==== 12.51 EVERY FRAMED WINDOW THE SAME: a dark frame with a LIGHT inside. The user sent a phone screenshot of an
   open box on FIND TERMINAL LUGS and asked for every framed box to look like it -- dark line, light fill. On his
   phone that box looked light because the old mint picture was still behind it; with the pale sky picture (#CCD9E0)
   a box in the sky's own colour would be only an outline. So every framed box now has its own fill, one step
   lighter than the sky -- #E3EBEF -- with the dark frame: the toned boxes (12.46), the search boxes, pickers and the
   mode switch (12.45), the header search field, and the hub's tiles (their glass of 12.49 gives way to the same
   fill; the green names, black icons and the dark frame stay). */
html body .hb-tone{background-color:#E3EBEF!important}
html body #q,html body #catSearch,html body .toolbar input.search,html body .hb-band input,html body .toolbar select,
html body .doc-bar .hb-cmd .cmd__box,html body .cmd__box,html body .modes{background-color:#E3EBEF!important}
html body .cmd__box #q,html body .cmd__box .cmd__in{background:transparent!important}
html body .card.card--sm{background:#E3EBEF!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:none!important}

/* ==== 12.52 TABLES THAT READ: the user found the tables hard to see (PINS & SOCKETS card on the pale sky). Every
   table on the site: a clear dark grid, the header row on a darker band with black capitals, the body cells white
   so the rows stand off the box's fill, every other row faintly shaded, and words no longer broken mid-word
   ("Extractio-n", "Unwire-d") -- a cell wraps between words; only part numbers may break, at a hyphen or anywhere. */
html body table{border-collapse:collapse!important;border:1.5px solid rgba(11,42,38,.55)!important;background:#FFFFFF!important}
html body table th,html body table td,html body table th.hb-tone,html body table td.hb-tone,
html body table th.hb-tone-in,html body table td.hb-tone-in{
  border:1px solid rgba(11,42,38,.30)!important;color:#0B0F0E!important;
  word-break:normal!important;overflow-wrap:normal!important;hyphens:manual!important}
html body table th,html body table thead td{background:#C9D7DF!important;color:#0B0F0E!important;font-weight:800!important}
html body table tbody td,html body table td.hb-tone,html body table td.hb-tone-in{background:#FFFFFF!important}
html body table tbody tr:nth-child(even) td{background:#F1F5F7!important}
html body table td code,html body table td .mono,html body table td[class*="pn"],html body table td a{overflow-wrap:anywhere!important}

/* ==== 12.53 THE HUB'S TILE TEXT IN THE WORDMARK'S TYPE: the wordmark "hangarBible" is set in a neo-grotesque
   (Helvetica Neue style: double-storey a, tight, heavy). The tile names and counts now use the same family --
   Helvetica Neue on iPhone and Mac, Arial (its metric twin) elsewhere -- no font file to download. Names bold,
   counts regular in small capitals-width; the green of "Bible" and the black stay. */
html body .card--sm .card__lbl,html body .card--sm .card__qty{
  font-family:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif!important}
html body .card--sm .card__lbl{font-weight:700!important;font-size:14px!important;letter-spacing:-.005em!important}
html body .card--sm .card__qty{font-weight:500!important;font-size:10.5px!important;letter-spacing:.06em!important}

/* ==== 12.54 THIN TILE ICONS: the user's pick A -- the icons he chose in 12.26 stay, drawn with a thin line
   (1.4 instead of 2.2 from 12.48); size and black colour unchanged. */
html body .card--sm .card__ico svg{stroke-width:1.4!important}

/* ==== 12.55 FIND COMPUTER: the unit found stays RED. 12.46 toned every near-white box, and the slots of the racks are
   near-white, so its !important sky fill covered the red of the lit slot. The lit slot keeps its red and white text. */
html body .slot.hit,html body .slot.hit.hb-tone,html body .slot.hit.hb-tone-in{background:#C0392B!important;border-color:#922B21!important}
html body .slot.hit b,html body .slot.hit i{color:#FFFFFF!important}

/* ==== 12.56 SOFT RAISED TILES on the hub, from the user's reference picture, fitted to the pale sky: no dark frame,
   a near-white tile lit from the top left (a thin white edge and a faint gradient) that sits ABOVE the page on a
   soft, wide shadow in the sky's own blue-grey; larger corners; the icon in a pale teal rounded square, drawn in
   teal; the name teal and bold; the count in plain dark type, as written (not capitals). Pressed, the tile sinks. */
html body .card.card--sm{
  background:linear-gradient(160deg,#FCFDFE 0%,#F1F5F8 100%)!important;
  border:1px solid rgba(255,255,255,.9)!important;border-radius:20px!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:0 10px 24px -6px rgba(52,78,96,.28),0 3px 8px rgba(52,78,96,.12),inset 0 1px 0 #FFFFFF!important;
  padding:12px 12px!important;column-gap:13px!important;transition:transform .12s ease,box-shadow .12s ease}
html body .card.card--sm:active{transform:translateY(1px) scale(.985);
  box-shadow:0 4px 10px -4px rgba(52,78,96,.30),0 1px 3px rgba(52,78,96,.14),inset 0 1px 0 #FFFFFF!important}
html body .card--sm .card__ico{width:46px!important;height:46px!important;border-radius:14px!important;
  background:linear-gradient(160deg,#E4F3EF,#D3EBE4)!important;border:0!important;color:#0C7C6E!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important}
html body .card--sm .card__ico svg{width:26px!important;height:26px!important;stroke-width:2!important}
html body .card--sm .card__lbl{color:#0C7C6E!important;font-weight:800!important;font-size:15px!important;letter-spacing:.005em!important}
html body .card--sm .card__qty{color:#16201D!important;font-size:13px!important;font-weight:500!important;
  letter-spacing:0!important;text-transform:none!important;margin-top:3px!important}
/* 12.56: long names (DEACTIVATE, PROTECTION, COMPUTER) must fit whole on a 390 px phone -- a slightly smaller name
   and icon square, and names wrap between words only */
html body .card--sm .card__ico{width:40px!important;height:40px!important;border-radius:12px!important}
html body .card--sm .card__ico svg{width:23px!important;height:23px!important}
html body .card.card--sm{padding:12px 10px!important;column-gap:10px!important}
html body .card--sm .card__lbl{font-size:13px!important;overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important}
html body .card--sm .card__qty{font-size:12.5px!important}
@media(max-width:360px){html body .card--sm .card__lbl{font-size:10.5px!important;letter-spacing:-.01em!important}html body .card--sm .card__qty{font-size:11px!important}
  html body .card--sm .card__ico{width:32px!important;height:32px!important;border-radius:10px!important}
  html body .card--sm .card__ico svg{width:19px!important;height:19px!important}html body .card.card--sm{padding:10px 8px!important;column-gap:8px!important}}


/* ==== 12.57 REALISTIC CB PANELS (the user's pick 1 of 3): every panel map (FIND CB, DEACTIVATE BY FIN) drawn as a
   dark grey panel with black round breakers in a metal bezel, empty positions as small screw holes, white row letters;
   the breaker found glows red. The panel look is on the table itself (no padding), so the map keeps the width
   cbmap.js fitted and the widest panel (121VU, 46 columns) still fits a phone. It also undoes 12.52's table style,
   which had given the maps a header band and white stripes. */
html body table.map,html body table.map tbody tr:nth-child(n) th,html body table.map tbody tr:nth-child(n) td{background:transparent!important;border:0!important;padding:0!important}
html body table.map{border-collapse:separate!important;border-spacing:2px!important}html body .mapwrap table.map{background:linear-gradient(180deg,#3A4146,#2B3135)!important;border-radius:8px!important;border:0!important;outline:1.5px solid #1B2023;outline-offset:0;box-shadow:0 2px 6px rgba(20,30,40,.25)!important}
 html body table.map tbody tr:nth-child(n) th{color:#E8ECEE!important;font-weight:800!important}
 html body .map .sq{border-radius:50%!important;background:radial-gradient(circle at 35% 30%,#4A5055 0,#141719 60%)!important;border:1.5px solid #9AA4AA!important;box-shadow:0 1px 1px rgba(0,0,0,.6)!important}
 html body .map .sq:not(.has):not(.hit){background:#2F3539!important;border:0!important;width:4px!important;height:4px!important;box-shadow:inset 0 1px 1px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.1)!important}
 html body .map .sq.hit{background:radial-gradient(circle at 35% 30%,#FF6B5B 0,#C0392B 55%,#7E1F16 100%)!important;border:1.5px solid #FFD5CF!important;box-shadow:0 0 0 3px rgba(255,90,70,.45),0 0 10px rgba(255,80,60,.8)!important}
html body .map .sq{box-sizing:border-box!important}
@media(max-width:400px){html body table.map{border-spacing:1px!important}}
html body .map .sq.has{border-width:1px!important;border-color:#7C878D!important} html body table.map tbody tr:nth-child(n) th{padding-right:3px!important}

/* ==== 12.58 HUB AS AN APP SCREEN (iPhone style): no tile behind anything. Each entry is an app-style icon -- a rounded
   square in the teal tint with the glyph in it -- and its name UNDER it, centred; the count is hidden (it stays in
   index.html, so the hub search is untouched). Three across on a phone, four from 560 px. Name in the type of the
   chapter rows (Inter / system stack, semibold, dark teal #0A5A54 = --hb-teal). */
html body .row--3:has(.card--sm){grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px 0!important}
@media(min-width:560px){html body .row--3:has(.card--sm){grid-template-columns:repeat(4,minmax(0,1fr))!important}}
html body .row--3 .card.card--sm{display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:flex-start!important;text-align:center!important;row-gap:5px!important;column-gap:0!important;
  min-height:0!important;padding:2px 0!important;background:none!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body .row--3 .card.card--sm:active{transform:scale(.94)!important;box-shadow:none!important}
html body .row--3 .card--sm .card__qty{display:none!important}
html body .row--3 .card--sm .card__ico{flex:0 0 auto!important;width:76px!important;height:76px!important;
  border-radius:18px!important;background:linear-gradient(160deg,#EEF8F5,#CFE8E0)!important;
  box-shadow:0 5px 12px -3px rgba(52,78,96,.35),inset 0 1px 0 rgba(255,255,255,.9)!important}
html body .row--3 .card--sm .card__ico svg{width:43px!important;height:43px!important;stroke-width:1.6!important}
html body .row--3 .card--sm .card__lbl{flex:0 0 auto!important;width:100%!important;min-width:0!important;margin:0!important;
  padding:0!important;text-align:center!important;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;
  font-weight:600!important;font-size:12px!important;letter-spacing:0!important;line-height:1.2!important;
  color:#0A5A54!important;overflow-wrap:normal!important;word-break:normal!important}
@media(max-width:360px){
  html body .row--3 .card--sm .card__ico{width:68px!important;height:68px!important;border-radius:16px!important}
  html body .row--3 .card--sm .card__ico svg{width:38px!important;height:38px!important}
  html body .row--3 .card--sm .card__lbl{font-size:10.5px!important}}

/* ==== 12.71 LABELS IN THE LOGO TYPE ==== the wordmark is a medium-weight neo-grotesque; the tile names and the
   section titles were bold Inter. Same family as the wordmark, medium weight. */
html body .card--sm .card__lbl,html body .row--3 .card--sm .card__lbl,html body .card--sm .card__qty{
  font-family:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif!important}
html body .card--sm .card__lbl,html body .row--3 .card--sm .card__lbl{font-weight:500!important;letter-spacing:.005em!important}
html body .grp,html body .grp span{font-family:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif!important}
html body .grp{font-weight:600!important}
html body .grp span{font-weight:400!important}

/* ==== 12.76 ONE STANDARD ==== the site had three dialects (the find pages, torque and deactivate: system font 15 px; tasks.css pages: Inter 16 px;
   the hub: Inter 14 px) and 5 different search fields, 3 select shapes, 4 table-head looks. One set of values for all of them.
   Words are Inter, values and part numbers stay monospace (that rule is unchanged); body text 15 px, every field 16 px (iOS does not
   zoom a 16 px field); controls 44 px; the global command bar (.cmd) keeps its own look. */
html body{--ink:#17211F;--mute:#5C6B70;--pale:#E3F5F1;--hb-font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-family:var(--hb-font)!important;font-size:15px!important}
html body .hb-hero__t,html body .hb-hero__s,html body .pagenote,html body .count,html body .hint,html body .note:not(.mono),html body .none,
html body .chip,html body .pk,html body .pk-l,html body .pkinfo,html body .mode,html body details.stds>summary,html body .btn,html body label,
html body th,html body select,html body input,html body textarea,html body button{font-family:var(--hb-font)!important}
/* the search field: one pill */
html body main input.search,html body .shell input.search,html body .toolbar input.search,html body .wrap input.search,html body #q.search,html body #catSearch.search{
  font-family:var(--hb-font)!important;font-size:16px!important;min-height:46px;padding:12px 17px!important;border-radius:999px!important;
  border:1px solid rgba(11,42,38,.55)!important;background-color:#E3EBEF!important;color:var(--ink)!important}
/* the select: one shape */
html body main select,html body .shell select,html body .toolbar select,html body .wrap select{
  font-size:16px!important;min-height:44px!important;padding:10px 12px!important;border-radius:12px!important;background-color:#E3EBEF!important;color:var(--ink)!important}
/* the segmented switch */
html body .modes .mode{font-size:clamp(12px,3.6vw,14px)!important;font-weight:600!important;min-height:44px!important;padding:10px 4px!important}
/* count line and hint */
html body .count{font-size:12.5px!important;padding:6px 2px!important;font-weight:400}
html body .hint{font-size:13px!important;font-weight:400!important;border-radius:12px!important}
/* table heads of the data tables (not the breaker maps) */
html body table.tbl th,html body table.pt th,html body table.t th,html body table.meltable th{
  font-size:10.5px!important;letter-spacing:.02em!important;text-transform:uppercase!important;padding:6px 5px!important}
html body table.tbl td,html body table.pt td,html body table.t td{padding:6px 5px!important}
/* cards: one corner, one line */
html body .card:not(.card--sm):not(.tile),html body details.task{border-radius:16px!important;border-color:rgba(11,42,38,.3)!important}
/* the page's side padding */
html body .wrap,html body main.shell{padding-left:16px!important;padding-right:16px!important}
/* 12.76, second part: what the audit still found */
html:root{--ink:#17211F;--mute:#5C6B70;--pale:#E3F5F1}
html body .pk-l{color:var(--mute)!important;border-top-color:var(--mute)!important}
html body .count,html body .hint{font-size:12.5px!important;border-radius:12px!important}
html body .hint:not(.count){font-size:13px!important}
html body main select,html body .shell select,html body .toolbar select,html body .wrap select{border:1px solid rgba(11,42,38,.55)!important}
html body .wrap,html body main.shell{padding-top:12px!important}