/* The menu, regrouped (nav.js): sections by what the reader came to find
   out, Site health's pages under it while open, Settings' own menu in the
   sidebar's place, a foot of three buttons, the trail's group, the phone's
   drawer and tab bar. Loaded last: it refines features.css's sidebar.
   Tokens come from app.css; the chrome stays ink, colour is for data. */

/* the rows are links now: no underline, and a focus ring inside the rail */
a.tab, a.foot-btn { text-decoration: none; box-sizing: border-box; }
.tab:focus-visible, .foot-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 8px; }
/* rows a little shorter than before: sixteen sections, four headings and the foot fit a 800px-tall window */
.tab { height: 34px; }
.nav-h { margin: 7px 10px 3px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }

/* Site health's pages: tabs on the page itself; under it in the phone's menu only */
.nav-group .nav-sub { display: none; list-style: none; margin: 1px 0 3px 17px; padding: 0 0 0 9px; border-left: 1px solid var(--rule); gap: 1px; }
.app[data-rail="drawer"] .nav-group .nav-sub { display: grid; }
.tab.open { color: var(--ink); font-weight: 640; }

/* Settings' menu: the way back, its title, its groups */
.nav-back { color: var(--ink-3); height: 32px; font-size: 13px; }
.nav-back svg { width: 14px; height: 14px; }
.nav-title { margin: 6px 10px 2px; font-size: 18px; font-weight: 720; letter-spacing: -.015em; color: var(--ink); }
/* a longer list than the dashboard's, so slightly shorter rows: it fits a 800px-tall window */
.nav.in-settings .tab:not(.nav-back) { height: 32px; font-size: 13.5px; }
.nav.in-settings .nav-h { margin-top: 8px; }

/* the foot: Settings, the reader's own button, the fold button - one row */
.rail-foot { gap: 2px; }
.foot-btn.gear { flex: 1; width: auto; min-width: 0; }
.foot-btn.gear[aria-current] { color: var(--ink); font-weight: 640; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.foot-me { position: relative; flex: none; }
.foot-btn.me { width: 34px; padding: 0; justify-content: center; }
.me-i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--surface);
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.foot-btn.me[aria-expanded="true"] { background: var(--sunk); }
.set-rule { border: 0; border-top: 1px solid var(--rule); margin: 6px 4px; }
.settings-pop { width: min(280px, calc(100vw - 16px)); }

/* the icon rail: sub-pages and the title give way; the foot stacks */
.app[data-rail="icons"] .nav-title { display: none; }
/* one rule between groups: the heading's line (features.css), not a second border above it */
.app[data-rail="icons"] .nav-group + .nav-group { border-top: 0; padding-top: 0; }
.app[data-rail="icons"] .foot-btn.me { width: 40px; }
.app[data-rail="icons"] .foot-btn.gear { flex: none; }

/* the trail: the page's name is never cut or covered. Beside the period and the filters
   (below 1440px) the group and the parent give way - the sidebar and the sub-tabs name them -
   and so do the refresh button's words (the footer has the time too). */
@media (min-width: 768px) {
  .tb-title { flex-shrink: 0; }
  .trail .crumb.now { max-width: none; }
  .bar-mid { justify-content: safe center; }
}
@media (min-width: 768px) and (max-width: 1439px) {
  .bar-row:has(.bar-mid > *) .trail li:is(.crumb-g, .crumb-p) { display: none; }
  .bar-row:has(.bar-mid > *) .trail li:is(.crumb-g, .crumb-p):first-child + li::before { content: none; }
  .bar-row:has(.bar-mid > *) .trail li.crumb-g:not(:first-child) + li::before { content: "›"; }
  .refresh .r-l, .refresh .r-ago, .bar-right .stamp { display: none; }
}
/* the bar never overlaps itself (main.js fitBar, 768px and up): "tight" gives up the trail's
   group and parent and the refresh words; "two-rows" puts the period and the filters on a
   row of their own under the title and the buttons */
.bar.tight .trail li:is(.crumb-g, .crumb-p) { display: none; }
.bar.tight .trail li:is(.crumb-g, .crumb-p):first-child + li::before { content: none; }
/* a hidden group after "Settings" still leaves a separator: "Settings › Internal traffic" */
.bar.tight .trail li.crumb-g:not(:first-child) + li::before { content: "›"; }
.bar.tight .refresh .r-l, .bar.tight .refresh .r-ago, .bar.tight .bar-right .stamp { display: none; }
.bar.tighter .x-btn .x-l { display: none; }
.bar.two-rows .bar-row { flex-wrap: wrap; row-gap: 4px; padding-top: 6px; }
.bar.two-rows .tb-title { flex: 1 0 auto; }
.bar.two-rows .bar-mid { order: 3; flex: 1 0 100%; flex-wrap: wrap; justify-content: flex-start; padding: 0 0 8px; }
/* phones: a long page name is cut with an ellipsis, never drawn under the buttons */
@media (max-width: 767px) {
  .tb-title, .trail { min-width: 0; }
  .trail { overflow: hidden; }
  .trail .crumb.now { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
/* the group, quiet, before the page (wide screens only) */
.trail .crumb-g .crumb { cursor: default; color: var(--ink-3); font-weight: 520; }
.trail .crumb-g .crumb:hover { text-decoration: none; }
.trail li.crumb-g + li::before { content: none; }
.trail li.crumb-g::after { content: "›"; margin: 0 6px; color: var(--gap); }
@media (max-width: 1099px) {
  .trail li.crumb-g { display: none; }
  .trail li.crumb-g + li::before { content: "›"; }
  .trail li.crumb-g:first-child + li::before { content: none; }
}

/* the palette's group, the shortcuts by group, the report builder by group */
.pal-g { margin-left: 8px; font-size: 12px; color: var(--ink-3); }
.pal-list li[aria-selected="true"] .pal-g { color: inherit; opacity: .75; }
.keys-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 24px; }
.keys-g h4 { margin: 10px 0 2px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.rb-tabs { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 18px; align-items: start; }
.rb-g { display: grid; gap: 5px; }
.rb-gh { margin: 0 0 1px; font-size: 12px; font-weight: 600; color: var(--ink-3); }

/* the drawer's close button; hidden unless the sidebar is a drawer */
.drawer-x { display: none; margin-left: auto; flex: none; align-self: flex-start; }
.drawer-x svg { width: 16px; height: 16px; }

/* phones: the drawer with large rows, the tab bar's Menu, sub-tabs that never push the page sideways */
@media (max-width: 767px) {
  .app[data-rail="drawer"] .drawer-x { display: inline-flex; min-width: 40px; min-height: 40px; align-items: center; justify-content: center; }
  .app[data-rail="drawer"] .tab { height: 44px; font-size: 15px; }
  .app[data-rail="drawer"] .tab.sub { height: 40px; font-size: 14.5px; }
  .app[data-rail="drawer"] .nav.in-settings .tab:not(.nav-back) { height: 42px; font-size: 14.5px; }
  .app[data-rail="drawer"] .nav-back { height: 40px; font-size: 14px; }
  .app[data-rail="drawer"] .nav-h { margin-top: 14px; font-size: 12.5px; }
  .app[data-rail="drawer"] .foot-btn { height: 44px; }
  .app[data-rail="drawer"] .foot-btn.me { width: 44px; }
  .app[data-rail="drawer"] #rail-toggle { display: none; }
  .rail { width: min(300px, 86vw); }
  .tb-i { min-height: 44px; align-content: center; }
  .tb-i[aria-expanded="true"] { color: var(--ink); }
  .subtabs { overflow-x: auto; scrollbar-width: none; }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtab { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .rail { transition: none; } }

/* The menu scrolls inside the sidebar when the window is shorter than it
   (the sidebar is one screen high): no page is ever out of reach. */
.rail .nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* Theme and What's new, one click away in the foot. */
.foot-btn.quick { position: relative; width: 34px; padding: 0; justify-content: center; }
/* Settings on its own line; theme, what's new, you and fold share the line below. */
.app:not([data-rail="icons"]) .rail-foot { display: flex; flex-wrap: wrap; align-items: center; }
.app:not([data-rail="icons"]) .rail-foot .foot-btn.gear { flex: 1 0 100%; }
.foot-btn.quick .new-dot { position: absolute; top: 5px; right: 5px; }

/* ======================================== the site's logo (2.6.0, logo.js)
   A square tile: the letter on the site's colour, the logo over it. The site
   button at the top of the sidebar (logo, site name, the tool's name), the
   switcher's rows, the icon rail's button, and the phone bar's chip. */
.logo-t { position: relative; width: var(--lt, 24px); height: var(--lt, 24px); flex: none; display: grid; place-items: center; overflow: hidden;
  border-radius: calc(var(--lt, 24px) * .26); color: #fff; font-weight: 720; font-size: calc(var(--lt, 24px) * .5); line-height: 1;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); }
.logo-t img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.brand { display: flex; align-items: center; gap: 6px; padding: 2px 2px 10px; }
.site-slot { display: block; flex: 1; min-width: 0; }
.site-wrap { position: relative; display: block; min-width: 0; }
.site-btn { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px;
  padding: 8px 10px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); }
.site-btn:hover { border-color: var(--gap); }
.site-btn[aria-expanded="true"] { border-color: var(--ink-3); }
.site-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sb-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.brand .sb-txt .brand-site { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-tool { font-size: 12px; color: var(--ink-3); }
.site-btn .chev { margin-left: auto; flex: none; }
.site-btn .chev svg { width: 16px; height: 16px; color: var(--ink-2); display: block; }
/* One column as wide as the menu (2.6.1): an implicit grid column took the rows' full width, so a
   long name and "N today" ran past the menu and the sidebar cut them off. */
.pop.site-menu { left: 0; right: 0; top: calc(100% + 6px); width: auto; padding: 6px; gap: 2px; z-index: 60; transform-origin: top left;
  grid-template-columns: minmax(0, 1fr); }
.pop.site-menu[style*="fixed"] { right: auto; width: 260px; }
.site-menu .site-i { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; }
.site-menu .site-i b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 520; }
.site-menu .site-i[aria-current="page"] { background: var(--sunk); }
.site-menu .site-i[aria-current="page"] b { font-weight: 650; }
.site-menu .si-end { margin-left: auto; flex: none; font-size: 12px; color: var(--ink-3); }
.site-menu .si-check svg { width: 16px; height: 16px; color: var(--ink); display: block; }
.site-menu .site-all { display: flex; align-items: center; min-height: 40px; padding: 0 8px; margin-top: 4px; border-top: 1px solid var(--grid);
  border-radius: 0 0 8px 8px; color: var(--ink-2); font-size: 14px; }
/* the icon rail: the logo alone is the button */
.app[data-rail="icons"] .brand { justify-content: center; padding: 2px 0 10px; }
.app[data-rail="icons"] .site-btn { width: 40px; min-height: 40px; padding: 0; border: 0; background: none; justify-content: center; }
.app[data-rail="icons"] .site-btn .sb-txt, .app[data-rail="icons"] .site-btn .chev { display: none; }
.app[data-rail="icons"] .site-btn .sb-logo { width: 40px; height: 40px; border-radius: 10px; font-size: 19px; }
.app[data-rail="icons"] .site-btn:focus-visible { outline-offset: 1px; }
/* the phone's bar: the site's logo where the menu button was (the tab bar has Menu), its
   name above the page's name; both open the switcher */
.tb-title > .site-wrap { display: none; }
@media (max-width: 767px) {
  .bar .menu-btn { display: none; }
  .tb-title:has(> .site-wrap) { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px; align-items: center; }
  .tb-title > .site-wrap { display: contents; }
  .site-chip { all: unset; box-sizing: border-box; cursor: pointer; grid-row: 1 / span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; }
  .site-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
  .site-chip[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--rule); }
  .sc-name { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 2px; min-width: 0; cursor: pointer; font-size: 12px; line-height: 1.2; color: var(--ink-3); font-weight: 560; }
  .sc-name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sc-name .chev svg { width: 12px; height: 12px; display: block; }
  .tb-title > .site-wrap ~ .trail { grid-column: 2; grid-row: 2; line-height: 1.25; }
  .app[data-rail="drawer"] .site-btn { min-height: 56px; }
}