/* Lifted from templates/cms/_tool_sidebar.html on 13 Sep 2026. Byte-identical to the block it
   replaced; the only change is that the browser can cache it.
   Linked by {% css 'tool-sidebar' %} in that same partial, so a page that does
   not include the partial does not download this. */
/* The arrows sit 15px from the window edge: 3px here plus the 12px each row
   carries internally. Set HERE rather than in each page, because the padding is
   declared in nine different page stylesheets at two different values — editing
   them one by one is how they drift apart. This block is included after those,
   so it wins on document order without needing !important.
   Shifting the container moves the arrows, icons and labels together, which is
   what keeps the column aligned. */
.sidebar-collapsed .tool-switcher{padding-left:0;padding-right:0}

/* The CONTENT is capped at 1600px and centred; the header, filter bar and stat
   bar stay full width, so they still span the panel and read as chrome rather
   than as another column. Set HERE for the same reason as the sidebar padding above: .tool-main
   is declared in nine separate page stylesheets and .search-main in a tenth, so
   editing them one by one is how they drift. This block loads after those and
   wins on document order.
   auto margins rather than a wrapper: these are flex children, so auto absorbs
   the leftover space evenly on both sides. */
/* The cap is a VARIABLE because a second thing now needs it. Anything that
   opens out of .tool-header -- the Settings drawer on /projects/, say -- sits
   outside .tool-content and so escapes this rule, running the full width of the
   window while the rows below it stop at 1500. Two numbers would drift; one
   does not. Subtract the chrome gutter twice where the element is already
   inside .tool-header's own padding. Kev, 30 Aug 2026. */
:root{--content-max:1500px;--chrome-gutter:28px}
.tool-content,.prod-grid-wrap{max-width:var(--content-max);margin-left:auto;margin-right:auto;width:100%}

/* ── the whole menu, 10% larger ──────────────────────────────────────────
   Also normalises the width: pages declared it at 212px, 240px and 260px, three
   different answers to the same question. One value here, so they cannot drift
   again. Everything below is the old figure x1.1, rounded to whole pixels. */
.tool-sidebar,.search-sidebar{width:303px}                    /* was 260 */
.tool-sidebar.sidebar-collapsed,
.search-sidebar.sidebar-collapsed{width:66px}                 /* was 56  */
.tool-switcher{padding-left:3px;padding-right:10px}

.tool-tab,.tool-group-head{font-size:.99rem;padding:9px 14px;gap:12px;line-height:1.2}   /* .85rem / 9px 12px / 10px */
/* Row height cut 10%: 11 + 19 + 11 = 41px  ->  9 + 19 + 9 = 37px. line-height
   is stated rather than left to the browser default so the arithmetic above is
   something you can check, not a guess about what 'normal' resolves to. */
.tool-tab > svg,.tool-group-head > svg{width:20px;height:20px}             /* was 17 */
/* The Inventory box is mostly empty space inside its own box, so at the same
   20px it reads smaller than the briefcase or the cog beside it. Scaled with a
   transform rather than width/height on purpose: a transform does not change
   the layout box, so the icon grows without nudging "Inventory" 2px right and
   breaking the column every other label lines up on. */
.tool-group[data-group="inventory"] > .tool-group-head > svg:not(.grp-chev){
  transform:scale(1.1)}

.tool-group-head .grp-chev{width:15px;height:15px}                         /* was 13 */
/* Item text still lines up with the group title:
   3 (container) + 14 (row) + 15 (chevron) + 12 (gap) + 20 (icon) + 12 (gap) = 76px */
.tool-group-body .tool-tab{padding-left:73px}
/* Plan Sets owns Lists. The parent keeps its own row and its own link; the
   caret is a separate button, so opening the children never costs you the page
   you were trying to reach.

   It sits in the gutter to the LEFT of the label, inside the 73px these tabs
   already indent by — laid over the row rather than in the flex line, so the
   label stays on the same left edge as Inspections and Teams below it. */
.tool-sub-head{position:relative}
.tool-sub-head>.tool-tab{width:100%}
.tool-sub-toggle{position:absolute;left:44px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;padding:0;border:0;background:none;
  color:#9aa2ab;cursor:pointer;border-radius:6px}
.tool-sub-toggle:hover{background:var(--hover,#f4f3ef);color:#39424b}
.tool-sub-toggle svg{width:13px;height:13px;transition:transform .18s ease}
.tool-sub.is-open .tool-sub-toggle svg{transform:rotate(90deg)}
.tool-sub-body{display:none}
.tool-sub.is-open .tool-sub-body{display:block}
/* 25px in from the tab above it, so the nesting is visible without a second
   set of rules for the label. */
.tool-sub-body .tool-tab{padding-left:98px}
/* Orders moved back INSIDE Plan Sets (Kev, 30 Aug 2026), and .tool-sub was
   written for the top level: the caret is absolutely placed at left:44px to sit
   beside a 41px-indented row, and its child sat at 98px. A group child indents
   to 73px instead, so unmoved the caret floated out in the gutter on its own and
   Invoices lined up under the wrong thing. These two rules apply ONLY when a
   .tool-sub is nested in a group, so the pattern still works if it is ever used
   at the top level again. */
.tool-group-body .tool-sub-toggle{left:52px}
.tool-group-body .tool-sub-body .tool-tab{padding-left:98px}
.tool-tab .tab-badge{font-size:.82rem}

/* Sidebar as a flex column so the Sign Out row pins to the bottom */
#tool-sidebar{overflow:visible;position:sticky}
#tool-sidebar .tool-switcher{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:visible}
/* OUTSIDE .tool-switcher, and that is the whole point.

   It used to be the last flex child inside the switcher with margin-top:auto,
   which pins a thing to the bottom of its CONTENT — not to the bottom of the
   screen. While the nav was shorter than the sidebar those are the same place,
   so it looked right. The moment the menu overflowed, the content grew past the
   box, the switcher started scrolling, and the account chip went with it: on the
   Plan Set Manager it measured a bottom edge of 1240px in a 1205px viewport, so
   you had to scroll the sidebar to find out who you were signed in as. Whether
   it was visible depended on how many groups that page happened to open.

   Now the sidebar is the flex column (bounded at 100vh - 46px by the chrome CSS),
   .tool-switcher is the flex:1 part that scrolls, and this sits after it at
   flex:none — always on screen, whatever the nav does. */
/* No background of its own -- Kev, 26 Aug. It was #fff from when the sidebar
   was white; the sidebar is var(--page) now, so this drew a white block behind
   the name in the bottom corner. The rule above it is what separates the card
   from the menu, not a change of colour.
   The border warmed with it: #ecedf0 is a blue-grey and was the only cool line
   left in the column. */
#tool-sidebar .acct-group{flex:none;padding-top:10px;
  border-top:1px solid var(--border,#e9e9e7);margin-left:6px;margin-right:6px;
  padding-bottom:8px}

/* ── who: the identity card in the bottom-left corner ─────────────────────── */
.who{display:flex;align-items:center;gap:2px;border-radius:10px;padding:4px;
  color:#4a5561;text-decoration:none;transition:background .12s}
.who:hover{background:var(--hover,#f4f3ef)}
/* The name/email half is the link; the sign-out button is its sibling. Nesting a
   form inside an <a> is invalid HTML and browsers reparent it, so they are two
   children of a flex row that only LOOKS like one control. */
.who-id{display:flex;align-items:center;gap:10px;flex:1;min-width:0;
  padding:4px;border-radius:8px;color:inherit;text-decoration:none}
.who-face{width:32px;height:32px;flex:none;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#ff8a3d,#f36000);color:#fff;
  font-size:.72rem;font-weight:800;letter-spacing:.02em}
.who-face img{width:100%;height:100%;object-fit:cover;display:block}
.who-face-anon{background:var(--surface-2,#eeece7);color:#8a939d}
.who-face-anon svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
/* min-width:0 on both the flex child and the spans: without it the longest email
   sets the sidebar's width instead of being ellipsised inside it. */
.who-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25;gap:1px}
.who-name,.who-sub{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.who-name{font-size:.83rem;font-weight:700;color:#22282f}
.who-sub{font-size:.71rem;color:#98a0a8}
.who-out{margin:0;flex:none}
.who-out button{display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border:none;background:none;border-radius:7px;
  cursor:pointer;color:#a4acb5;padding:0;transition:background .12s,color .12s}
.who-out button:hover{background:var(--accent-tint,#ecebe7);color:var(--accent-hover,#33383d)}
.who-out button svg{width:16px;height:16px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Collapsed to the 66px rail: the avatar only, centred, with the text and the
   separate sign-out button gone. Sign-out is still one click away because the
   avatar links to the account page — this is the one place the invariant
   relaxes, and it relaxes to "one click", not to "hidden". */
#tool-sidebar.sidebar-collapsed .acct-group,
.tool-sidebar.sidebar-collapsed .acct-group{margin-left:0;margin-right:0}
.sidebar-collapsed .who{justify-content:center;padding:6px 0;gap:0}
.sidebar-collapsed .who-txt,
.sidebar-collapsed .who-out{display:none}
.sidebar-collapsed .who-id{flex:none;justify-content:center;gap:0;padding:0}
/* Stripe-style collapse pill on the right border (appears on hover) */
.sidebar-pill{position:absolute;top:50%;right:-11px;transform:translateY(-50%);width:22px;height:48px;border-radius:11px;border:1px solid #e2e4e8;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#b3b9c1;opacity:0;transition:opacity .15s,color .15s,border-color .15s;z-index:60;padding:0}
#tool-sidebar:hover .sidebar-pill,.sidebar-pill:focus{opacity:1}
.sidebar-pill:hover{color:#1f2327;border-color:#c3c9d0}
.sidebar-pill svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.6;display:none}
.sidebar-pill .p-collapse{display:block}
#tool-sidebar.sidebar-collapsed .sidebar-pill .p-collapse{display:none}
#tool-sidebar.sidebar-collapsed .sidebar-pill .p-expand{display:block}

/* ── collapsible groups ─────────────────────────────────────────────────── */
/* Built to match .tool-tab exactly, so a header and an item sit on the same
   left edge and carry the same icon weight. */
.tool-group{margin-bottom:2px}
.tool-group-head{display:flex;align-items:center;gap:12px;width:100%;
  padding:9px 14px;border:none;background:none;border-radius:8px;cursor:pointer;
  font-family:inherit;font-size:.99rem;font-weight:400;color:#555;
  margin-bottom:2px;text-align:left;transition:background .12s,color .12s}
.tool-group-head:hover{background:var(--hover,#f4f3ef);color:#111}
.tool-group-head.active{background:var(--accent-tint,#ecebe7);color:var(--accent,#1f2327)}
/* The head OPENS A PAGE and the chevron OPENS THE SECTION -- two jobs, so two
   controls. Kev, 25 Aug: "I want to make the top level menus all open pages."
   The chevron is a transparent button laid over the one already drawn inside
   the link, so the row's spacing arithmetic above is untouched and the caret
   still sits on the shared left line. Clicking it toggles and never navigates;
   clicking anywhere else on the row goes to the page. */
.tool-group-headwrap{position:relative}
.grp-toggle{position:absolute;left:0;top:0;bottom:2px;width:38px;padding:0;
  border:none;background:none;cursor:pointer;z-index:2;border-radius:8px}
.grp-toggle:focus-visible{outline:2px solid var(--accent,#1f2327);outline-offset:-2px}
/* NOT WHEN THE RAIL IS COLLAPSED. Kev, 5 Sep 2026: "the plan set icon doesnt
   work on /calendar/ loaded in lhm."

   Expanded, this 38px button covers the group's ICON and the rest of the row is
   the link -- click the icon to fold the section, click the words to go to the
   page. Collapsed, the words are gone and the icon IS the whole row, so the
   toggle sits exactly on top of the only thing there is to click. Measured:
   elementFromPoint on the middle of the Projects link returned the button, not
   the link, on every group head in the rail.

   There is nothing for it to do collapsed either -- the section it folds is
   already hidden with the labels -- so it goes. */
.tool-sidebar.sidebar-collapsed .grp-toggle{display:none}
/* For a group whose head is not a link (Leads), the toggle takes the whole row
   so the label still opens and closes the section. */
.grp-toggle-wide{width:100%}
.tool-group-head > svg{width:20px;height:20px;flex-shrink:0;stroke:currentColor;
  fill:none;stroke-width:1.8}
.tool-group-head .grp-label{flex:1;min-width:0}
/* The chevron leads the row: points right when closed, rotates down when open.
   It is the only thing that moves, so the eye tracks state without re-reading. */
.tool-group-head .grp-chev{width:13px;height:13px;flex:none;stroke:currentColor;
  fill:none;stroke-width:2.4;transition:transform .18s ease;transform:rotate(-90deg)}
/* Sub-items carry no icon — the group header's icon already says what the
   section is, and repeating one per row made the column busy.
   The indent is arithmetic, not a guess: the header's TEXT starts at
   3 (container) + 12 (row padding) + 13 (chevron) + 10 (gap) + 17 (icon) + 10 (gap) = 65px,
   so an item with no icon needs 62px of padding to put its text on the same line. */
.tool-group-body .tool-tab > svg{display:none}
/* Dashboard has no chevron, so it needs the same indent by hand to keep its icon
   on the shared line. In the stylesheet rather than inline, so the collapsed-rail
   rule below can still override it — an inline style would win and shove the icon
   off-centre in the 56px rail. */
.tool-tab-top{padding-left:41px}
.sidebar-collapsed .tool-tab-top{padding-left:0;justify-content:center}
.tool-group[open] .grp-chev,.tool-group.is-open .grp-chev{transform:rotate(0deg)}

.tool-group-body{display:none;padding-bottom:4px}
.tool-group.is-open .tool-group-body{display:block}

/* Collapsed rail: labels and chevrons go, icons stay centred. */
.sidebar-collapsed .tool-group-head{justify-content:center;padding:10px 0;gap:0}
.sidebar-collapsed .tool-group-head .grp-label,
.sidebar-collapsed .tool-group-head .grp-chev{display:none}

/* ══ The rail's fly-out menus ═════════════════════════════════════════════
   The rail is NINE icons and nothing else — Dashboard plus the eight groups.
   It used to show every sub-item as an icon too, which meant twenty-odd
   identical-weight glyphs in a 66px column with no way to tell an Inventory
   from a Marketplace, and the group an item belonged to was invisible.

   The children live in a fly-out instead, on hover or keyboard focus, styled
   like the dropdowns in the site header (cms/_nav_css.html) because that is the
   same idea in the same product: a dark panel of links hanging off the thing you
   pointed at. The group's own name is the panel's first line, taken from
   data-label on the panel — in the rail the icon cannot say it, and a menu that
   does not name itself is a guessing game.

   Two clipping traps, both dealt with below:
   - .tool-switcher scrolls (overflow-y:auto), and a scroll container clips its
     children on BOTH axes: 'overflow-x:visible' next to 'overflow-y:auto'
     computes to auto, it does not stay visible. Nine icons never need to
     scroll, so the rail turns scrolling off rather than fighting it.
   - The rail also sets overflow:hidden for the width transition. Same fix.

   These rules are written twice: once here for the rail you get by pressing the
   collapse pill, and once inside the 768-1364 media query for the rail that
   width forces on you. CSS cannot put a media query into a selector list, and
   the two states have no class in common. If you change one, change the other —
   they are marked RAIL-FLYOUT in both places. */

/* ── RAIL-FLYOUT (pill-collapsed) ── */
/* The sidebar is position:sticky, which makes it a stacking context of its own.
   Without a z-index of its own that context sits at the natural order of the
   flex line, and the page's cards — .sj-form and .job-card are both positioned —
   come later in the DOM and paint over it. The fly-out's own z-index:300 cannot
   help: it only ranks it INSIDE the sidebar. 130 puts the rail above the page
   and below the site nav's 199, so the header's own dropdowns still win.

   Both of these have to out-specify something: cms/_tool_chrome_css.html sets
   overflow:hidden on `.tool-sidebar.sidebar-collapsed` (two classes), and the
   scrolling switcher is set by `#tool-sidebar .tool-switcher` (an id). A plain
   `.sidebar-collapsed …` loses to both, and loses SILENTLY — the fly-out is
   built, positioned and then clipped away by an ancestor, which looks exactly
   like a rule that never fired. */
#tool-sidebar.sidebar-collapsed,
.tool-sidebar.sidebar-collapsed,
.search-sidebar.sidebar-collapsed{overflow:visible;z-index:130}
#tool-sidebar.sidebar-collapsed .tool-switcher,
.tool-sidebar.sidebar-collapsed .tool-switcher{overflow:visible}
.sidebar-collapsed .tool-group{position:relative}
/* Shut by default — including the group holding the current page, which is
   forced open in the expanded menu and would otherwise hang open here. */
.sidebar-collapsed .tool-group .tool-group-body{display:none}
.sidebar-collapsed .tool-group:hover > .tool-group-body,
.sidebar-collapsed .tool-group:focus-within > .tool-group-body{
  display:flex;flex-direction:column;position:absolute;left:100%;top:-6px;
  z-index:300;min-width:210px;margin-left:9px;padding:6px 0;
  background:var(--page,#fbfbf9);border-radius:4px;box-shadow:0 4px 16px rgba(0,0,0,.4)}
/* Bridges the 9px gap, so crossing it does not close the panel. */
.sidebar-collapsed .tool-group:hover > .tool-group-body::before,
.sidebar-collapsed .tool-group:focus-within > .tool-group-body::before{
  content:"";position:absolute;left:-11px;top:0;bottom:0;width:11px}
/* The group's name, first in the panel. order:-1 rather than ::before because
   ::before is the bridge, and a flex column lets ::after lead anyway. */
.sidebar-collapsed .tool-group > .tool-group-body::after{
  content:attr(data-label);order:-1;padding:5px 16px 7px;
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#7d868f}
.sidebar-collapsed .tool-group-body .tool-tab{padding:8px 16px;justify-content:flex-start;
  white-space:nowrap;border-radius:0;color:#ccc;margin-bottom:0}
.sidebar-collapsed .tool-group-body .tool-tab:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar-collapsed .tool-group-body .tool-tab.active{background:rgba(255,255,255,.06);color:#ff8a3d}
.sidebar-collapsed .tool-group-body .tab-label{display:inline}
.sidebar-collapsed .tool-group-body .tool-tab > svg{display:none}
/* A fly-out is transient — there is nothing to gain by making you open a second
   level inside it, so the sub-lists are simply shown. */
.sidebar-collapsed .tool-sub-toggle{display:none}
.sidebar-collapsed .tool-sub-body{display:block}
.sidebar-collapsed .tool-sub-body .tool-tab{padding-left:30px}
/* Dashboard has no children, so it gets its name on a tooltip instead — the
   same dark pill the plan-set bar's buttons use. */
.sidebar-collapsed .tool-tab-top{position:relative}
.sidebar-collapsed .tool-tab-top:hover .tab-label,
.sidebar-collapsed .tool-tab-top:focus-visible .tab-label{
  display:block;position:absolute;left:100%;top:50%;transform:translateY(-50%);
  margin-left:9px;z-index:300;background:#1f2327;color:#fff;
  padding:7px 12px;border-radius:4px;font-size:.8rem;white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,0,0,.4)}

/* ── Laptop and tablet: forced to the icon rail ───────────────────────────
   Between 768 and 1364 the column is worth more as content than as labels.

   1364 is its own number, not one of the four bands in
   cms/_tool_responsive_css.html, and not the same question those bands answer.
   They are about how a page lays itself out; this is about how much of the
   window the navigation is worth — and the answer to that is a judgement, so it
   is written where it can be changed on its own.

   Moving it has a consequence worth knowing about: it decides how much room the
   plan-set bar has. The bar's one-line form needs 632px of fixed furniture plus
   the stages strip's basis. With the rail it has (viewport - 146) to play with;
   with the full sidebar, (viewport - 383). Wherever the rail sits, the window
   just ABOVE it is the tightest case in the whole page — the full sidebar on the
   narrowest screen that still gets one — see --strip-min in
   cms/website_jobs_manager.html, which is sized from exactly that number.

   Forced, not remembered. .sidebar-collapsed is a stored preference and it is
   honoured on desktop; at these widths the answer does not depend on what you
   last chose, so the rail applies either way and the collapse pill is hidden
   rather than left as a control that changes nothing. If labels on a laptop turn
   out to be wanted, the way to get them is a real expand toggle — the pill's
   script is copy-pasted into a dozen page templates today, so that is its own
   job rather than something to bolt on here.

   These rules live HERE, not in the shared responsive partial, because this
   partial renders in the BODY and its own .tool-sidebar rules would otherwise
   beat anything the head said. Same reason the width above wins today. */
@media(min-width:768px) and (max-width:1364px){
  /* 66px, matching .sidebar-collapsed above — the rail has one width.
     overflow:visible, not hidden: a fly-out has to be able to leave the rail. */
  /* z-index for the same reason as the RAIL-FLYOUT block above: sticky makes a
     stacking context, and without a rank of its own the page's cards paint over
     the fly-out however high the fly-out's own z-index is. */
  #tool-sidebar,.tool-sidebar,.search-sidebar{width:66px;overflow:visible;z-index:130}
  #tool-sidebar .tool-switcher,.tool-sidebar .tool-switcher{padding:8px 0}
  .tool-sidebar .tool-switcher-label,
  .tool-sidebar .tab-badge,
  .tool-sidebar .tab-label,
  .tool-sidebar .grp-label,
  .tool-sidebar .grp-chev{display:none}
  .tool-sidebar .tool-tab,
  .tool-sidebar .tool-group-head{justify-content:center;padding:10px 0;gap:0}
  .tool-sidebar .tool-tab-top{padding-left:0;justify-content:center}
  /* A control that cannot change anything is worse than no control. */
  .sidebar-pill{display:none}
  /* Site links belong in the drawer, and there is no drawer at these widths —
     they are still up in the header where they have always been. */
  .drawer-site-links{display:none}

  /* ── RAIL-FLYOUT (width-forced) ──────────────────────────────────────────
     The twin of the RAIL-FLYOUT block above, which carries the reasoning. Kept
     in step by hand: a media query cannot go in a selector list, and these two
     rail states share no class. Change one, change the other. */
  #tool-sidebar .tool-switcher,.tool-sidebar .tool-switcher{overflow:visible}
  .tool-sidebar .tool-group{position:relative}
  .tool-sidebar .tool-group .tool-group-body{display:none}
  .tool-sidebar .tool-group:hover > .tool-group-body,
  .tool-sidebar .tool-group:focus-within > .tool-group-body{
    display:flex;flex-direction:column;position:absolute;left:100%;top:-6px;
    z-index:300;min-width:210px;margin-left:9px;padding:6px 0;
    background:var(--page,#fbfbf9);border-radius:4px;box-shadow:0 4px 16px rgba(0,0,0,.4)}
  .tool-sidebar .tool-group:hover > .tool-group-body::before,
  .tool-sidebar .tool-group:focus-within > .tool-group-body::before{
    content:"";position:absolute;left:-11px;top:0;bottom:0;width:11px}
  .tool-sidebar .tool-group > .tool-group-body::after{
    content:attr(data-label);order:-1;padding:5px 16px 7px;
    font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:#7d868f}
  .tool-sidebar .tool-group-body .tool-tab{padding:8px 16px;justify-content:flex-start;
    white-space:nowrap;border-radius:0;color:#ccc;margin-bottom:0}
  .tool-sidebar .tool-group-body .tool-tab:hover{background:rgba(255,255,255,.08);color:#fff}
  .tool-sidebar .tool-group-body .tool-tab.active{background:rgba(255,255,255,.06);color:#ff8a3d}
  .tool-sidebar .tool-group-body .tab-label{display:inline}
  .tool-sidebar .tool-group-body .tool-tab > svg{display:none}
  .tool-sidebar .tool-sub-toggle{display:none}
  .tool-sidebar .tool-sub-body{display:block}
  .tool-sidebar .tool-sub-body .tool-tab{padding-left:30px}
  .tool-sidebar .tool-tab-top{position:relative}
  .tool-sidebar .tool-tab-top:hover .tab-label,
  .tool-sidebar .tool-tab-top:focus-visible .tab-label{
    display:block;position:absolute;left:100%;top:50%;transform:translateY(-50%);
    margin-left:9px;z-index:300;background:#1f2327;color:#fff;
    padding:7px 12px;border-radius:4px;font-size:.8rem;white-space:nowrap;
    box-shadow:0 4px 16px rgba(0,0,0,.4)}
}

/* ── Mobile: this menu becomes a drawer ───────────────────────────────────
   One opener: the site nav's hamburger sets .menu-open on <body>. The old
   objection to a drawer was that the sidebar's collapse pill was its only
   opener and would slide away with it — the hamburger is outside the sidebar,
   so that no longer applies.

   Was 900px. Moved to 767 so the drawer is a phone answer only, and so it stays
   in lockstep with the nav's own hamburger — the two are one button, and a width
   where the burger appears but the drawer does not is a button that does
   nothing. cms/_nav_css.html and cms/_tool_nav.html carry the matching number. */
@media(max-width:767px){
  /* #tool-sidebar sets position:sticky, and an id beats a class however late the
     class rule comes — specificity is not order. Matched here rather than
     lowered there, because that sticky is what the desktop layout needs. */
  /* Slid with `left`, not `transform`. A transform on this element refused to
     take even with !important, while other properties from the same rule
     applied — something in the page is pinning it and I could not find what.
     `left` is not in that fight, animates just as well, and the drawer is the
     point rather than the technique. */
  #tool-sidebar,.tool-sidebar{
    position:fixed;top:0;bottom:0;z-index:120;
    left:calc(-1 * min(290px,84vw));
    width:min(290px,84vw);height:100%;overflow-y:auto;overscroll-behavior:contain;
    background:#fff;border-right:1px solid #e2e4e8;
    transition:left .22s ease;
    box-shadow:0 0 40px rgba(0,0,0,.18)}
  body.menu-open #tool-sidebar,body.menu-open .tool-sidebar{left:0}
  body.menu-open{overflow:hidden}
  /* The collapse pill is a two-column idea and there are no columns now. */
  .sidebar-pill{display:none}
  .tool-sidebar.sidebar-collapsed{width:min(290px,84vw)}
  .tool-sidebar.sidebar-collapsed .tab-label,
  .tool-sidebar.sidebar-collapsed .grp-label,
  .tool-sidebar.sidebar-collapsed .grp-chev{display:inline}
  .tool-sidebar.sidebar-collapsed .tool-tab,
  .tool-sidebar.sidebar-collapsed .tool-group-head{justify-content:flex-start}
  /* Rows sized for a finger, not a mouse. */
  .tool-tab,.tool-group-head{padding:12px 16px}
}
.drawer-site-links{display:none}
@media(max-width:767px){
  /* Only in the drawer — at every other width these live in the site header
     where they always have. */
  .drawer-site-links{display:block;border-top:1px solid #e9edf1;margin-top:10px;
    padding-top:10px}
}
/* Signed-out login block at the top of the sidebar. Kev, 29 Aug 2026. */
.tool-login{padding:14px 12px 16px;border-bottom:1px solid var(--border,#e9e9e7);margin:6px 0 8px}
.tl-form{display:flex;flex-direction:column;gap:8px}
.tl-in{width:100%;padding:9px 11px;border:1px solid #d7dde3;border-radius:8px;font-size:.85rem;background:#fff;color:#39424b;box-sizing:border-box}
.tl-in:focus{outline:none;border-color:var(--accent,#1f2327)}
.tl-in::placeholder{color:#aab2ba}
.tl-btn{width:100%;padding:9px;border:none;border-radius:8px;background:var(--accent,#1f2327);color:#fff;font-size:.85rem;font-weight:600;cursor:pointer}
.tl-btn:hover{background:var(--accent-hover,#33383d)}
.tl-or{display:flex;align-items:center;gap:9px;margin:11px 0;color:#a8afb6;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.tl-or span{flex:0 0 auto}
.tl-or::before,.tl-or::after{content:"";flex:1;height:1px;background:var(--border,#e9e9e7)}
.tl-google{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:9px;border:1px solid #d7dde3;border-radius:8px;background:#fff;color:#39424b;font-size:.82rem;font-weight:600;text-decoration:none;box-sizing:border-box}
.tl-google:hover{border-color:#c3ccd5;background:var(--hover,#f4f3ef)}
.tl-google svg{flex-shrink:0}