/* The sidebar's own polish, moved out of assets/atlas-sidebar-polish.js
   ("the sidebar glitches loading in", 2026-09-23). It used to be injected by
   that module about 0.2s after the sidebar first painted, so every row grew
   from 40px to 42px and the brand re-laid-out in front of the person loading
   the app. Linked from index.html's head it is there for the first paint; the
   module still links it on any page that does not. */
/* These two are about the LIST layout's brand -- a 176px wordmark in a
   250px drawer -- and they were written before the rail existed. Left
   unscoped they also ran on the rail, where the wordmark is hidden and the
   brand is a 34px app icon drawn as .brand::before: content:none removed
   that icon, and min-height:76px kept the empty box it had been in. The
   result was 76px of nothing at the top of a rail that scrolls with ten of
   its rows below the fold -- "utilize the top empty space when in rail
   view" (2026-09-17). Exactly this codebase's usual failure: one module's
   rule quietly invalidating another's, with nothing thrown and nothing to
   see but a gap. So they are scoped to the layout they were written for,
   and the rail keeps the mark it was designed with, in a box the size of
   the mark. */
html:not([data-atlas-sidebar="rail"]) .sidebar .brand{display:flex!important;align-items:center!important;justify-content:center!important;min-height:76px!important;padding:4px 10px 12px!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
html:not([data-atlas-sidebar="rail"]) .sidebar .brand:before,html:not([data-atlas-sidebar="rail"]) .sidebar .brand:after{display:none!important;content:none!important}
/* flex:0 0 auto because the sidebar is a flex COLUMN and the brand is one
   of its items: with the menu wanting more height than the window has, a
   shrinkable brand gave its pixels up and the 34px icon was squeezed to
   19px. The menu is the part that scrolls, so the menu is the part that
   gives. */
html[data-atlas-sidebar="rail"] .sidebar .brand{display:flex!important;flex:0 0 auto!important;align-items:center!important;justify-content:center!important;min-height:0!important;padding:0 0 12px!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
/* The brand also carries .atlas-overlay-brand, whose :before and :after are
   two absolutely-positioned glass panels drawn over the wordmark. They are
   the list layout's decoration, and :before is the same pseudo-element the
   rail draws its app icon with -- so the icon inherited position:absolute
   and inset:5px from the decoration, left the brand box measuring 12px
   tall, and painted on top of the first menu row instead of above it. Put
   it back in flow and the 34px icon sizes its own box; the second panel has
   no icon to be and stays off. */
html[data-atlas-sidebar="rail"] .sidebar .brand:before{position:static!important;inset:auto!important;border:0!important;margin:0!important;pointer-events:none}
html[data-atlas-sidebar="rail"] .sidebar .brand:after{display:none!important;content:none!important}
/* .sidebar .brand, three classes: atlas-final-restoration.css caps the logo at
   58px with two, and as a linked sheet this one no longer lands after it. */
.sidebar .brand .atlas-brand-logo{display:block!important;width:100%!important;max-width:176px!important;height:auto!important;max-height:56px!important;object-fit:contain!important;object-position:center center!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;filter:none!important}
.mobile-brand-wrap,.mobile-atlas-logo{display:none!important}
.sidebar{overflow:hidden!important}.sidebar .nav{overflow-y:auto!important;overflow-x:hidden!important;padding-right:3px}
/* 8px like every bar in Atlas (2026-09-23). The standard properties are for
   Firefox only: in Chrome they turn the pseudo-elements off for a 10px bar. */
@supports not selector(::-webkit-scrollbar){.sidebar .nav{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.38) transparent}}
.sidebar .nav::-webkit-scrollbar{width:8px}.sidebar .nav::-webkit-scrollbar-track{background:transparent}.sidebar .nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:8px}
/* The foot carried a scrim: a gradient fading to opaque #091c2c over 14px,
   there to hide nav rows scrolling underneath it. Measured on the loaded
   page, nothing scrolls underneath it -- .nav is its own scroll container
   ending at 813px and the foot begins at 813px, so they meet rather than
   overlap. The scrim covered nothing and cost a great deal: an opaque slab,
   in a colour the sidebar's own gradient never reaches at that height
   (#091c2c against roughly #0c2236), inset 15px from both sidebar edges by
   the sidebar's padding. Left edge, right edge, bottom edge and a hairline
   on top is a box, and it read as one.

   Removing the background is the whole fix. The hairline stays and is a
   divider again once there is no slab for it to be the top edge of. */
.sidebar .nav button{flex:0 0 auto;min-height:42px}.sidebar-foot{flex:0 0 auto;background:none;padding-top:8px}
@media(max-width:850px){
  .mobile-brand-wrap{display:flex!important;align-items:center!important;justify-content:flex-start!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important}
  .mobile-atlas-logo{display:block!important;width:132px!important;height:auto!important;max-height:48px!important;object-fit:contain!important;object-position:left center!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;filter:none!important}
}
/* Below 780px the sidebar is a dropdown hanging off the A mark in the
   header, sized in atlas-rebuild.css. No width is set here on purpose: a
   260px!important from this module would silently win over that sizing and
   leave the panel a drawer's width, which is the shape of every bug in this
   codebase -- one module quietly invalidating another's assumption.

   The brand comes out with it. The logo would repeat, at 176px, directly
   under the mark the panel just dropped from, and cost a phone 68px of the
   list it opened to show. */
/* body .sidebar .brand.brand, not .sidebar .brand: the two brand rules
   above are html:not([data-atlas-sidebar="rail"]) .sidebar .brand and
   html[data-atlas-sidebar="rail"] .sidebar .brand, each three points of
   weight to this rule's former two, so both outranked this display:none
   and the brand came back inside the phone's dropdown, right under the
   mark it dropped out of. Written with the same weight, and later, this
   one wins on either layout (browser-checks/mobile-nav-dropdown.check.js,
   red from the rail change of 2026-09-18 until this line). */
@media(max-width:780px){.sidebar{padding:8px 10px 10px!important}body .sidebar .brand.brand{display:none!important}.sidebar .nav button{padding:10px 12px!important;margin:2px 0!important;font-size:14px}.sidebar-foot{font-size:10px!important;padding-top:10px!important;padding-bottom:max(4px,env(safe-area-inset-bottom))}}
@media(max-width:780px){.mobile-brand-wrap,.mobile-atlas-logo{display:none!important}}
/* Invoices shows on a phone too (2026-09-29): its page works at every width
   now, so the side menu no longer hides its row below 851px. */
/* The main menu items in the header's lettering: "Do a mock-up for making
   side drawer font chromium to match headers", then "screenshot 4"
   (2026-09-24), which was option C -- Michroma on the pages and the group
   parents, with the pages inside a group in the plain face as the smaller
   step. Then "Mobile drawer fonts still not right" and "Michroma, smaller"
   (2026-10-13): the pages inside a group wear Michroma too, a size down and
   indented on a phone as on a computer. Then "switch to the flat version"
   (2026-09-25), off a side-by-side of the two: the silver chrome fill, its
   drop shadow and the blue glow on hover and on the current page are gone.
   The lettering is one flat colour, and Atlas blue under the pointer and on
   the page you are on. The glow the shared stylesheet gives every row on
   hover goes with it, sub-pages included, so no row in the drawer shades.
   Michroma is wide: Company Letterhead needed 193px where a row has 165
   (it is Letterhead now), so a label that long takes a second line rather
   than running out of the drawer.
   A field menu (assets/atlas-field-home.js) folds a group open and hides its
   heading, data-field-flat, so its pages stand as main rows -- Customers,
   Equipment, My Day, My Hours -- at the main rows' size ("My sidebar font
   reverted", 2026-10-13, in Field view). */
.sidebar .nav>:is(button,a)>span:not(.nav-icon):not(.nav-chev):not(.nav-doc-out):not(.sr-only),
.sidebar .nav>.nav-group>.nav-parent>span:not(.nav-icon):not(.nav-chev),
.sidebar .nav>.nav-group>.nav-children>:is(button,a)>span:not(.nav-icon):not(.nav-chev):not(.nav-doc-out):not(.sr-only){font-family:var(--font-display);font-weight:400;font-size:14px;line-height:1.3;letter-spacing:0;white-space:normal;min-width:0;color:var(--ink-on-dark);text-shadow:none}
.sidebar .nav>:is(button,a):is(:hover,:focus-visible,.active)>span:not(.nav-icon):not(.nav-chev):not(.nav-doc-out):not(.sr-only),
.sidebar .nav>.nav-group>.nav-parent:is(:hover,:focus-visible)>span:not(.nav-icon):not(.nav-chev),
.sidebar .nav>.nav-group>.nav-children>:is(button,a):is(:hover,:focus-visible,.active)>span:not(.nav-icon):not(.nav-chev):not(.nav-doc-out):not(.sr-only){color:var(--accent-on-dark)}
.sidebar .nav>.nav-group:not([data-field-flat])>.nav-children>:is(button,a)>span:not(.nav-icon):not(.nav-chev):not(.nav-doc-out):not(.sr-only){font-size:12px}
@media(max-width:780px){.sidebar .nav>.nav-group:not([data-field-flat])>.nav-children>:is(button,a){padding-left:30px!important}}
.sidebar .nav :is(button,a):is(:hover,:focus-visible,.active){text-shadow:none}

/* Arrange menu ("give user ability to organize and re order side drawer",
   2026-09-24): the foot's third icon, drawn like the layout switch beside it;
   and while arranging, every row with its up and down arrows beside it, the
   bar above the menu, and a lifted row while it is dragged. */
.sidebar-foot .nav-arrange{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 auto;margin:0;padding:0;border:0;border-radius:9px;background:transparent;color:var(--ink-fainter);font:inherit;cursor:pointer}
.sidebar-foot .nav-arrange:hover,.sidebar-foot .nav-arrange:focus-visible,.sidebar-foot .nav-arrange[aria-pressed="true"]{color:var(--accent-on-dark)}
.sidebar-foot .nav-arrange:focus-visible{outline:2px solid var(--accent-on-dark);outline-offset:-2px}
.sidebar-foot .nav-arrange .nav-icon{display:grid;place-items:center;width:20px}
.sidebar-foot .nav-arrange svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html[data-atlas-sidebar="rail"] .sidebar-foot .nav-arrange{width:44px;height:34px;border-radius:10px}
/* The morning brief's icon, beside Arrange: the same quiet foot button. */
.nav-arrange-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;margin:0 8px 8px;padding:8px 10px;border:1px dashed color-mix(in srgb,var(--accent-on-dark) 55%,transparent);border-radius:10px;color:var(--ink-on-dark-soft,#9fb3c3);font:600 11.5px/1.3 var(--font-body)}
.nav-arrange-actions{display:inline-flex;gap:6px}
html[data-atlas-menu-arrange] .sidebar nav.nav:not(.nav-foot),
html[data-atlas-menu-arrange] .sidebar nav.nav:not(.nav-foot) .nav-group,
html[data-atlas-menu-arrange] .sidebar nav.nav:not(.nav-foot) .nav-children{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:4px}
html[data-atlas-menu-arrange] .sidebar nav.nav:not(.nav-foot) .nav-group,
html[data-atlas-menu-arrange] .sidebar nav.nav:not(.nav-foot) .nav-children{grid-column:1/-1}
html[data-atlas-menu-arrange] .sidebar nav.nav:not(.nav-foot) .nav-children[hidden]{display:none}
html[data-atlas-menu-arrange] .sidebar [data-nav-row]:not(.nav-group),
html[data-atlas-menu-arrange] .sidebar .nav-group[data-nav-row]>.nav-parent{cursor:grab;min-width:0}
html[data-atlas-menu-arrange] .sidebar [data-nav-row].is-dragging{opacity:.55}
html[data-atlas-menu-arrange] .sidebar .nav-chev{display:none}
/* Names in the first column and arrows in the second, by name rather than by
   turn, so arrows can never take the column a name is in. A group's pages sit
   indented on a rule under it, so the Equipment group and the Equipment page
   inside it read as a group and its page, not the same row twice. */
html[data-atlas-menu-arrange] .sidebar nav.nav:not(.nav-foot) [data-nav-row]:not(.nav-group),
html[data-atlas-menu-arrange] .sidebar nav.nav:not(.nav-foot) .nav-group>.nav-parent{grid-column:1}
html[data-atlas-menu-arrange] .sidebar nav.nav:not(.nav-foot) [data-nav-move]{grid-column:2}
html[data-atlas-menu-arrange] .sidebar nav.nav:not(.nav-foot) [data-nav-pinned]{grid-column:1/-1}
/* A row this person does not have (a permission, or My Schedule for the
   office) is hidden, and its arrows go with it: drawn on their own they stood
   in the menu beside nothing (2026-10-07). So do a field menu's group
   headings' (data-field-flat): the heading is hidden and its pages stand as
   main rows, and the heading's arrows, with no name beside them, read as the
   row above's ("This is confusing and moving the wrong way is too easy",
   2026-10-14). Those pages move their group (atlas-sidebar-mode.js, move). */
.sidebar nav.nav :is([hidden],[data-field-off])+[data-nav-move],
.sidebar nav.nav .nav-group[data-field-flat]>.nav-parent+[data-nav-move]{display:none}
html[data-atlas-menu-arrange] .sidebar nav.nav:not(.nav-foot) .nav-group:not([data-field-flat])>.nav-children{margin-left:18px;padding-left:4px;border-left:1px solid color-mix(in srgb,var(--accent-on-dark) 35%,transparent)}
/* The row just moved is lit for a moment, so a press shows what it moved. */
html[data-atlas-menu-arrange] .sidebar [data-nav-moved]{animation:atlasNavMoved 1.2s ease-out}
@keyframes atlasNavMoved{from{background:color-mix(in srgb,var(--accent-on-dark) 26%,transparent)}to{background:transparent}}
@media(prefers-reduced-motion:reduce){html[data-atlas-menu-arrange] .sidebar [data-nav-moved]{animation:none;background:color-mix(in srgb,var(--accent-on-dark) 18%,transparent)}}
.sidebar .nav-move{display:inline-flex;gap:2px;padding-right:6px}
.sidebar .nav-move .btn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* The Billboard tile ("C for desktop", 2026-10-03): on a computer's list the
   Billboard is a card under the logo, above every row, in place of its row in
   the menu. Here rather than injected by assets/atlas-billboard.js (which
   fills it), so the card and the missing row are both there for the first
   paint -- the drawer that slid away for 240ms was a stylesheet that arrived
   after its markup. Every line of the card has a fixed height, so filling it
   never moves a row below it (browser-checks/the-sidebar-paints-once). Amber
   is the alert-severity token the Billboard defines (liveStyle), and the card
   wears it only once that module has marked it new; everything else is the
   drawer's own ink, so it follows each colour scheme. The phone drawer (850px
   and under) and the rail keep the Billboard row as it was; so does Arrange
   menu, because the order it arranges is the phone's too. Everywhere else
   the card is not drawn, and that rule is in index.html's own head rather
   than here, so it holds on a phone that never received this file. */
@media(min-width:851px){
  html:not([data-atlas-sidebar="rail"]) .sidebar .bb-tile{display:grid;grid-template-columns:minmax(0,1fr);gap:3px;flex:0 0 auto;box-sizing:border-box;margin:0 4px 10px;padding:9px 12px 9px;
    border:1px solid color-mix(in srgb,var(--ink-on-dark) 18%,transparent);border-radius:14px;background:color-mix(in srgb,var(--ink-on-dark) 5%,transparent);
    color:var(--ink-on-dark);font:inherit;text-align:left;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}
  html:not([data-atlas-sidebar="rail"]) .sidebar .bb-tile:hover,
  html:not([data-atlas-sidebar="rail"]) .sidebar .bb-tile[aria-current="page"]{background:color-mix(in srgb,var(--ink-on-dark) 9%,transparent)}
  html:not([data-atlas-sidebar="rail"]) .sidebar .bb-tile:not(.is-new):is(:hover,[aria-current="page"]){border-color:color-mix(in srgb,var(--accent-on-dark) 60%,transparent)}
  html:not([data-atlas-sidebar="rail"]) .sidebar .bb-tile.is-new{border-color:var(--atlas-alert-amber);
    box-shadow:0 0 0 1px color-mix(in srgb,var(--atlas-alert-amber) 30%,transparent),0 0 16px color-mix(in srgb,var(--atlas-alert-amber) 28%,transparent)}
  html:not([data-atlas-sidebar="rail"]) .sidebar .bb-tile:focus-visible{outline:2px solid var(--accent-on-dark);outline-offset:2px}
  .sidebar .bb-tile-head{display:flex;align-items:center;justify-content:space-between;gap:8px;height:20px;min-width:0}
  .sidebar .bb-tile-name{font-family:var(--font-display);font-weight:400;font-size:13px;line-height:20px;color:var(--ink-on-dark);white-space:nowrap}
  .sidebar .bb-tile-new:not([hidden]){display:inline-flex;align-items:center;flex:0 0 auto;height:18px;padding:0 8px;box-sizing:border-box;border-radius:999px;
    border:1px solid color-mix(in srgb,var(--atlas-alert-amber) 55%,transparent);background:color-mix(in srgb,var(--atlas-alert-amber) 20%,transparent);
    color:var(--atlas-alert-amber);font-size:10.5px;font-weight:800;line-height:1;white-space:nowrap}
  .sidebar .bb-tile-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;height:34px;font-size:12.5px;font-weight:700;line-height:17px;color:var(--ink-on-dark);overflow-wrap:anywhere}
  .sidebar .bb-tile-meta,.sidebar .bb-tile-counts{display:block;height:15px;overflow:hidden;font-size:11px;line-height:15px;white-space:nowrap;text-overflow:ellipsis}
  .sidebar .bb-tile-meta{color:var(--ink-on-dark-soft)}
  .sidebar .bb-tile-counts{color:var(--ink-fainter)}
  html:not([data-atlas-sidebar="rail"]):not([data-atlas-menu-arrange]) .sidebar .nav>button[data-page="billboard"]{display:none}
  /* Read ("A", 2026-10-03): one slim capsule, Billboard and two chips, set by
     atlas-billboard.js and, before it loads, by index.html's head from the
     last state it kept. Something new brings the full card back. */
  .sidebar .bb-tile-chips{display:none}
  html[data-atlas-bb-read]:not([data-atlas-sidebar="rail"]) .sidebar .bb-tile{align-content:center;height:40px;padding:0 6px 0 14px;border-radius:999px}
  html[data-atlas-bb-read] .sidebar :is(.bb-tile-title,.bb-tile-meta,.bb-tile-counts){display:none}
  html[data-atlas-bb-read] .sidebar .bb-tile-chips{display:flex;gap:4px;min-width:0;overflow:hidden}
  .sidebar .bb-chip{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;height:20px;padding:0 7px;box-sizing:border-box;border-radius:999px;
    border:1px solid color-mix(in srgb,var(--accent-on-dark,#5ab4f5) 55%,transparent);background:color-mix(in srgb,var(--accent-on-dark,#5ab4f5) 16%,transparent);
    color:var(--accent-on-dark,#5ab4f5);font-size:10.5px;font-weight:800;line-height:1;white-space:nowrap}
  /* Pointed at, the slim bar pops open to the full square card ("I wanted the
     Billboard to pop open to the square that it was before", 2026-10-03), laid
     over the menu rather than pushing it down: the card grows by what its
     negative bottom margin gives back, so not one row below it moves. 113px is
     the card as drawn above -- 9 + 20 + 3 + 34 + 3 + 15 + 3 + 15 + 9 and the
     two border lines -- and 63 is that less the bar's 40 and its 10 margin. */
  html[data-atlas-bb-read]:not([data-atlas-sidebar="rail"]) .sidebar .bb-tile{position:relative;overflow:hidden;
    transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease,height .18s ease,margin-bottom .18s ease,border-radius .18s ease,padding .18s ease}
  html[data-atlas-bb-read]:not([data-atlas-sidebar="rail"]) .sidebar .bb-tile:is(:hover,:focus-visible){z-index:6;align-content:start;height:113px;margin-bottom:-63px;padding:9px 12px;border-radius:14px;
    background:linear-gradient(color-mix(in srgb,var(--ink-on-dark) 9%,transparent),color-mix(in srgb,var(--ink-on-dark) 9%,transparent)),var(--chrome-navy);
    box-shadow:0 14px 30px color-mix(in srgb,var(--surface-deep) 70%,transparent)}
  html[data-atlas-bb-read] .sidebar .bb-tile:is(:hover,:focus-visible) .bb-tile-title{display:-webkit-box}
  html[data-atlas-bb-read] .sidebar .bb-tile:is(:hover,:focus-visible) :is(.bb-tile-meta,.bb-tile-counts){display:block}
  html[data-atlas-bb-read] .sidebar .bb-tile:is(:hover,:focus-visible) .bb-tile-chips{display:none}
  .sidebar .bb-chip-dot{width:6px;height:6px;border-radius:50%;background:var(--atlas-alert-amber)}
}
@media(min-width:851px) and (prefers-reduced-motion:reduce){.sidebar .bb-tile,html[data-atlas-bb-read] .sidebar .bb-tile{transition:none}}