/* Prop65Shield navigation shell.

   The sticky header, the secondary identity row, the left rail, the mobile
   drawer and search view, and the shared site footer. Loaded by every gated
   page that opts in, alongside beta-product-nav.css.

   Every colour here is either an existing custom property from
   reports/assets/threat-report.css (--bone, --paper, --line, --amber-deep,
   --amber-soft, --tile-fill, --muted, --quiet, --navy, --radius) or a chrome
   literal already used by beta-product-nav.css (#1b2a4e, #fafaf7, #e8ebf3,
   #c9d2e6, #e89b2e, and the rgba(250,250,247,.16) / .28 hairlines). Nothing
   new is invented.

   Shadow discipline: the shell declares exactly one box-shadow value, the
   approved nav shadow, and uses it in exactly two places (the header once the
   page is scrolled, and the rail while expanded). Everywhere else is a
   hairline. */

:root {
  /* Header 64px plus its 1px hairline. Rail and page content both start here. */
  --nav-shell-header-h: 64px;
  --nav-shell-top: 65px;
  --nav-shell-header-h-mobile: 56px;
  --nav-shell-top-mobile: 57px;
  --nav-shell-rail-w: 64px;
  --nav-shell-rail-w-open: 240px;
  --nav-shell-identity-h: 30px;
  --nav-shell-identity-h-mobile: 26px;
  --nav-shell-chrome: #1b2a4e;
  --nav-shell-chrome-text: #fafaf7;
  --nav-shell-chrome-quiet: #e8ebf3;
  --nav-shell-chrome-faint: #c9d2e6;
  --nav-shell-chrome-line: rgba(250, 250, 247, 0.16);
  --nav-shell-chrome-line-strong: rgba(250, 250, 247, 0.28);
  --nav-shell-amber: #e89b2e;
  /* The report system's --quiet reads 4.17:1 on --paper, under the 4.5:1
     floor the shell holds itself to. This is the same quiet register, one
     step darker, so the parked rows stay quiet and stay readable. */
  --nav-shell-quiet: oklch(52% 0.012 82);
  /* How far past the fold a short page runs, so the footer starts below it.
     The shell measures the rendered footer and rewrites this, because the
     footer wraps to two and three rows as the viewport narrows. The literal is
     the desktop height and governs only until that first measurement lands. */
  --nav-shell-footer-h: 122px;
  --nav-shell-shadow: 0 1px 2px rgba(44, 40, 28, 0.05), 0 6px 16px rgba(44, 40, 28, 0.06);
  --nav-shell-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Single tuning knob for shelf-open rail muting. Change only this value for
     the next taste adjustment. */
  --nav-shell-muted-opacity: 0.42;

  /* Shared z-scale for every shell surface. Report content reaches 43, so
     navigation sits at the bottom of the fixed layer pile at 44. Fixed chrome
     starts at 45. Existing report popovers and export dialogs start at 50 and
     remain above navigation and chrome. Shelves and the persistent Ask Us
     utility keep one named tier each. New shell layers use these tokens
     instead of adding another local number. */
  --nav-shell-layer-navigation: 44;
  --nav-shell-layer-chrome: 45;
  --nav-shell-layer-shelf: 90;
  --nav-shell-layer-utility: 100;
}

/* The shelf assets predate the shared scale and still carry local fallbacks.
   These shell-scoped rules are authoritative when the components meet on one
   page. Ask Us stays above every backdrop and panel, including nested Notice
   Detail over Activity. The higher-specificity utility selectors also win
   when beta-ask-us.css is loaded dynamically after this stylesheet. */
body.has-nav-shell .beta-activity-overlay,
body.has-nav-shell .beta-search-drawer-backdrop {
  z-index: var(--nav-shell-layer-shelf);
}

body.has-nav-shell .beta-search-drawer {
  z-index: calc(var(--nav-shell-layer-shelf) + 1);
}

body.has-nav-shell .beta-ask-us [data-ask-trigger],
body.has-nav-shell .beta-ask-us [data-ask-popover],
body.has-nav-shell .notice-shell [data-ask-trigger],
body.has-nav-shell .notice-shell [data-ask-popover] {
  z-index: var(--nav-shell-layer-utility);
}

/* ---------------------------------------------------------------- page fit */

/* The page itself is the scroller; the header and rail are fixed above it, so
   content passes under chrome that never moves. The flex column is what puts
   the footer at the end of the page rather than under the last paragraph.

   Ian, 2026-08-30: "for short pages like this, lets create a little more
   vertical space. you should have to scroll down to see the footer. so put
   footer below the fold so to speak." This overrides the design handoff, which
   pinned the footer to the bottom of the viewport when content was short.

   A short page is now one full viewport of content with the footer beneath it,
   so the footer's top edge lands at the fold and the reader scrolls to reach
   it. This is a floor, not a height: a page taller than a viewport is already
   past it and gains nothing, which is why no page ends up with dead space.

   box-sizing is stated because the surfaces disagree about it, and the
   arithmetic only works if the padding above is inside the box being measured. */
body.has-nav-shell {
  box-sizing: border-box;
  min-height: calc(100vh + var(--nav-shell-footer-h));
  /* Mobile browsers grow and shrink the viewport as their toolbars move.
     Where dvh is understood it is the honest number; vh above is the fallback. */
  min-height: calc(100dvh + var(--nav-shell-footer-h));
  display: flex;
  flex-direction: column;
  padding-top: var(--nav-shell-top);
  padding-left: var(--nav-shell-rail-w);
}

/* The footer sits at the very end of that box, which is what puts its top edge
   at the fold on a short page. */
body.has-nav-shell > .nav-shell-footer {
  margin-top: auto;
}

/* A visitor who has not been let in sees the access panel and nothing else.
   The guard removes .beta-locked once membership is confirmed. */
html.beta-locked .nav-shell-bar,
html.beta-locked .nav-shell-rail,
html.beta-locked .nav-shell-scrim,
html.beta-locked .nav-shell-drawer,
html.beta-locked .nav-shell-searchview,
html.beta-locked .nav-shell-footer {
  display: none;
}

/* The access panel is the whole page and there is no footer to scroll to, so
   the below-the-fold floor does not apply to it. */
html.beta-locked body.has-nav-shell {
  min-height: 100vh;
  padding-top: 0;
  padding-left: 0;
}

/* Notice Search brings its own sticky row, and the two do not collide. The
   results table sits inside a wrapper that scrolls its own horizontal axis,
   which makes that wrapper the sticky scrollport, so the table header sticks
   inside the table and never to the viewport. Offsetting it by the shell's
   height pushes it 65px down into the first rows, which is why the shell
   leaves that rule alone. */

/* ------------------------------------------------------------------- shell */

.nav-shell-bar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--nav-shell-layer-chrome);
  font-family: "Schibsted Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Out of the way until a keyboard reaches it. */
.nav-shell-skip {
  position: absolute;
  top: 8px;
  left: -9999px;
  z-index: calc(var(--nav-shell-layer-chrome) + 4);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: var(--radius, 8px);
  background: var(--nav-shell-chrome-text);
  color: var(--nav-shell-chrome);
  font-family: "Schibsted Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

.nav-shell-skip:focus {
  left: 8px;
}

.nav-shell-skip:focus-visible {
  outline: 2px solid var(--nav-shell-amber);
  outline-offset: 2px;
}

/* The header is the page's own canonical private-beta topbar, adopted into
   the shell. These selectors carry two classes so they win over
   beta-product-nav.css regardless of which stylesheet loads last. */
.nav-shell-bar .nav-shell-header {
  box-sizing: border-box;
  min-height: var(--nav-shell-header-h);
  height: var(--nav-shell-header-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 clamp(14px, 3vw, 24px);
  border-bottom: 1px solid var(--nav-shell-chrome-line);
  background: var(--nav-shell-chrome);
  color: var(--nav-shell-chrome-text);
  transition: box-shadow 0.16s var(--nav-shell-ease);
}

[data-nav-shell-scrolled="true"] .nav-shell-bar .nav-shell-header {
  box-shadow: var(--nav-shell-shadow);
}

.nav-shell-brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.nav-shell-brand-mark {
  --mark-size: 30px;
  color: var(--nav-shell-chrome);
}

/* Declared here as well as in beta-product-nav.css so the shell's own lockup
   still reads on a page that does not load the canonical header stylesheet,
   such as the harness. Same class, same colour, no second vocabulary. */
.beta-product-brand-accent {
  color: var(--nav-shell-amber);
}

/* The one rule that was missing, and the whole bug. beta-brand.css sets a hard
   .p65wordmark { font-size: 22px }, and beta-product-nav.css undoes it with an
   identical block scoped to .beta-product-brand. The shell's lockups were not
   inside that scope, so the footer wordmark rendered at 22px next to a 17px
   mark while its own link said 15px. This is that block, verbatim, extended to
   the two lockups the shell builds. */
.nav-shell-brand .p65wordmark,
.nav-shell-footer-brand .p65wordmark {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
}

.nav-shell-brand:focus-visible {
  border-radius: var(--radius, 8px);
  outline: 3px solid #bd6500;
  outline-offset: 3px;
}

.nav-shell-chip {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--nav-shell-chrome-line-strong);
  border-radius: 999px;
  color: var(--nav-shell-chrome-quiet);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The flexible gap, then whatever the surface puts on the right: the header
   omnibox, Home's activity action, or nothing. */
.nav-shell-header .nav-shell-header-slot {
  min-width: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* -------------------------------------------------------- identity row */

/* Closed by default: no height, no opacity, and crucially no border. A border
   that is always present lays a stray hairline across the top of the rail and
   throws the two left edges out of alignment by a pixel. */
.nav-shell-identity {
  box-sizing: border-box;
  margin-left: var(--nav-shell-rail-w);
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-bottom: 0 solid transparent;
  background: var(--bone, oklch(98.4% 0.006 95));
  color: var(--muted, oklch(42% 0.012 82));
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  transition:
    height 0.16s var(--nav-shell-ease),
    opacity 0.16s var(--nav-shell-ease);
}

[data-nav-shell-scrolled="true"] .nav-shell-identity[data-nav-shell-identity-filled="true"] {
  height: var(--nav-shell-identity-h);
  border-bottom: 1px solid var(--line, oklch(89% 0.011 88));
  opacity: 1;
}

.nav-shell-identity-ag {
  color: #465a88;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav-shell-identity-sep {
  color: var(--nav-shell-quiet);
}

/* ------------------------------------------------------------------ footer */

/* The footer begins at the content's left edge, not the page's. Bleeding it
   under the rail put the lockup and the links beneath a column that is always
   drawn on top of them. */
/* Ian, 2026-08-30: "also can we make the footer smaller? smaller logo. less
   vertical space." The handoff's 22px mark, 17px wordmark, and 22/18 padding
   are all reduced below. The two rows, the five links, and the full-bleed navy
   are unchanged; only the bulk is. */
.nav-shell-footer {
  box-sizing: border-box;
  width: 100%;
  padding: 10px clamp(16px, 4vw, 40px) 12px;
  background: var(--nav-shell-chrome);
  color: var(--nav-shell-chrome-quiet);
  font-family: "Schibsted Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* The row gap is larger than it looks because the rows below pull themselves
   in by 9px at each edge. When the links wrap on a narrow viewport, 22 less
   those 18 leaves 4px between the wrapped lines. Shrink this and wrapped links
   overlap each other. */
.nav-shell-footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 18px;
}

/* Every target below keeps its full 44px, and then pulls 9px back at the top
   and bottom so the row it sits in is 26px rather than 44px. The hit area is
   the untouched border box; only the space the row claims from its neighbours
   changes, and what it overlaps is padding. */
/* The header's lockup, scaled down, at the header's own proportions: its mark
   is 30px to a 22px wordmark and a 10px gap, so at the footer's 17px mark the
   wordmark is 12.5px and the gap 6px. Ian, 2026-08-30: "the footer logo looks
   slightly different from the one at top of page. also, it should be smaller
   to match the mark's size on the footer." */
.nav-shell-footer-brand {
  min-height: 44px;
  margin-block: -9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--nav-shell-chrome-text);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
}

.nav-shell-footer-brand-mark {
  --mark-size: 17px;
  color: var(--nav-shell-chrome);
}

.nav-shell-footer-link {
  min-height: 44px;
  margin-block: -9px;
  display: inline-flex;
  align-items: center;
  color: var(--nav-shell-chrome-quiet);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.nav-shell-footer-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nav-shell-footer-link:focus-visible {
  border-radius: 6px;
  outline: 2px solid var(--nav-shell-amber);
  outline-offset: 2px;
}

.nav-shell-footer-legal {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--nav-shell-chrome-line);
  color: var(--nav-shell-chrome-faint);
  font-size: 11px;
}

/* --------------------------------------------------------------- the rail */

/* Fixed, so widening it moves the rail and nothing else. The content column
   keeps its 64px offset and never reflows: expansion floats over the page. */
.nav-shell-rail {
  position: fixed;
  top: var(--nav-shell-top);
  bottom: 0;
  left: 0;
  z-index: var(--nav-shell-layer-navigation);
  box-sizing: border-box;
  width: var(--nav-shell-rail-w);
  display: flex;
  flex-direction: column;
  /* 64 wide, less the 1px hairline and 2 x 9 of padding, leaves each row a
     45px box. A 10px pad would leave 43 and miss the 44px target floor. */
  padding: 8px 9px 10px;
  overflow: hidden;
  border-right: 1px solid var(--line, oklch(89% 0.011 88));
  background: var(--paper, oklch(99.2% 0.004 95));
  font-family: "Schibsted Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: width 0.18s var(--nav-shell-ease);
}

.nav-shell-rail[data-nav-shell-rail-expanded="true"] {
  width: var(--nav-shell-rail-w-open);
  box-shadow: var(--nav-shell-shadow);
}

.nav-shell-rail-item {
  box-sizing: border-box;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius, 8px);
  background: none;
  color: var(--muted, oklch(42% 0.012 82));
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* The two in-development rows are real links to their preview pages. They stay
   quiet so the rail still reads as five destinations plus a look ahead. */
.nav-shell-rail-item-preview {
  color: var(--nav-shell-quiet);
}

.nav-shell-rail-item:hover {
  background: var(--tile-fill, oklch(95.4% 0.014 88));
}

.nav-shell-rail-item:focus-visible {
  outline: 2px solid var(--amber, oklch(72% 0.15 72));
  outline-offset: -2px;
}

/* A row the reader opened with a mouse does not keep a ring when the shelf
   gives focus back to it. Keyboard activation clears this attribute, so a
   keyboard reader still sees where focus went. */
.nav-shell-rail-item[data-nav-shell-quiet-focus]:focus-visible {
  outline: none;
}

/* ------------------------------------------- the rail under an open shelf

   Ian, 2026-08-30, on the deployed site: "It still has this issue where the
   nav drawer is not muted when the notice shelf is active."

   The first attempt at this suppressed only the focus ring, which was the
   wrong half. What reads as "lit" is the amber wash, the amber icon, and the
   bold label of the aria-current row, and all three sat there at full strength
   underneath an open shelf. While a shelf is over the page the rail is not
   where the reader is, so it says nothing at all.

   aria-current stays in the DOM. This is visual muting only: a screen reader
   still hears which destination is current.

   The mobile drawer is deliberately not in this list. It IS navigation, so the
   lit row is the one thing it most needs to show. */
html.beta-activity-open .nav-shell-rail[data-nav-shell-rail="rail"],
html.beta-notice-detail-open .nav-shell-rail[data-nav-shell-rail="rail"] {
  opacity: var(--nav-shell-muted-opacity);
}

html.beta-activity-open .nav-shell-rail-item[aria-current="page"],
html.beta-notice-detail-open .nav-shell-rail-item[aria-current="page"] {
  background: transparent;
  color: inherit;
  font-weight: inherit;
}

html.beta-activity-open .nav-shell-rail-item[aria-current="page"] .nav-shell-rail-icon,
html.beta-notice-detail-open .nav-shell-rail-item[aria-current="page"] .nav-shell-rail-icon {
  color: inherit;
}

/* Hover and the expanded-rail tile fill go quiet too: pointing at a rail the
   shelf is covering should not light it up behind the shelf. */
html.beta-activity-open .nav-shell-rail-item:hover,
html.beta-notice-detail-open .nav-shell-rail-item:hover {
  background: transparent;
}

/* The ring the shelf leaves behind when it hands focus back. A reader who is
   actively tabbing INTO the rail still gets one: :focus-visible fires on the
   row they moved to, and the rule below only silences the row that was already
   focused when the shelf opened. */
html.beta-activity-open .nav-shell-rail-item[data-nav-shell-quiet-focus]:focus-visible,
html.beta-notice-detail-open .nav-shell-rail-item[data-nav-shell-quiet-focus]:focus-visible {
  outline: none;
}

.nav-shell-rail-icon {
  width: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  color: inherit;
}

.nav-shell-rail-icon svg {
  width: 19px;
  height: 19px;
  display: block;
}

/* Labels are present for assistive technology at every width; the collapsed
   rail simply has no room to draw them. */
.nav-shell-rail-label {
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.18s var(--nav-shell-ease);
}

.nav-shell-rail[data-nav-shell-rail-expanded="true"] .nav-shell-rail-label {
  opacity: 1;
}

/* The lit destination. Weight carries the state as much as the wash does, and
   there is no left bar. */
.nav-shell-rail-item[aria-current="page"] {
  background: var(--amber-soft, oklch(96% 0.035 80));
  color: var(--ink, oklch(18% 0.009 82));
  font-weight: 700;
}

.nav-shell-rail-item[aria-current="page"] .nav-shell-rail-icon {
  color: var(--amber-deep, oklch(55% 0.13 66));
}

.nav-shell-rail-separator {
  height: 1px;
  margin: 8px 6px;
  background: var(--line, oklch(89% 0.011 88));
}

.nav-shell-rail-heading {
  margin: 4px 0 2px;
  padding: 0 10px;
  color: var(--nav-shell-quiet);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.18s var(--nav-shell-ease);
}

.nav-shell-rail[data-nav-shell-rail-expanded="true"] .nav-shell-rail-heading {
  opacity: 1;
}

.nav-shell-rail-spacer {
  flex: 1 1 auto;
  min-height: 12px;
}

.nav-shell-rail-item-quiet {
  font-size: 12.5px;
}

.nav-shell-rail-foot {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line, oklch(89% 0.011 88));
}

.nav-shell-rail-chevron-icon {
  transition: transform 0.18s var(--nav-shell-ease);
}

.nav-shell-rail-chevron[aria-expanded="false"] .nav-shell-rail-chevron-icon {
  transform: rotate(180deg);
}

/* Collapsed-state tooltip: reachable by keyboard focus, not hover only. */
.nav-shell-rail-tooltip {
  position: absolute;
  left: 60px;
  z-index: calc(var(--nav-shell-layer-chrome) + 2);
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--navy, oklch(28% 0.07 264));
  color: var(--bone, oklch(98.4% 0.006 95));
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}

.nav-shell-rail-tooltip[hidden] {
  display: none;
}

/* ---------------------------------------------------------- header omnibox */

/* A second mount of the shared omnibox in a chrome skin, never a second
   omnibox. Everything below is presentation; the suggestions, the ranking, and
   the intent gate all come from Prop65BetaOmnibox. */
.nav-shell-omnibox {
  position: relative;
  box-sizing: border-box;
  width: 300px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--nav-shell-chrome-line-strong);
  border-radius: var(--radius, 8px);
  background: rgba(250, 250, 247, 0.07);
  color: var(--nav-shell-chrome-quiet);
  transition:
    border-color 0.16s var(--nav-shell-ease),
    background-color 0.16s var(--nav-shell-ease),
    color 0.16s var(--nav-shell-ease);
}

/* Focus turns the field into a bone-paper surface so it reads as active
   against the navy chrome, not just outlined. Everything inside flips to
   navy so it still reads on the light fill. This selector is not scoped to
   the header mount, so it also covers the same omnibox when it takes over
   the mobile search view (.nav-shell-searchview / .nav-shell-search-slot). */
.nav-shell-omnibox:focus-within {
  border-color: var(--nav-shell-amber);
  background-color: var(--nav-shell-chrome-text);
  color: var(--nav-shell-chrome);
}

.nav-shell-omnibox-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  display: block;
  color: var(--nav-shell-chrome-faint);
}

.nav-shell-omnibox:focus-within .nav-shell-omnibox-icon {
  color: var(--nav-shell-chrome);
}

/* The placeholder carries the label visually; the label itself stays in the
   accessibility tree. */
.nav-shell-omnibox label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.nav-shell-omnibox input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--nav-shell-chrome-text);
  font-family: inherit;
  font-size: 13.5px;
}

.nav-shell-omnibox input::placeholder {
  color: var(--nav-shell-chrome-faint);
  opacity: 1;
}

.nav-shell-omnibox:focus-within input {
  color: var(--nav-shell-chrome);
}

.nav-shell-omnibox:focus-within input::placeholder {
  color: var(--nav-shell-chrome);
  opacity: 0.6;
}

.nav-shell-omnibox input:focus-visible {
  outline: none;
}

.nav-shell-omnibox-badge {
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid var(--nav-shell-chrome-line);
  border-radius: 6px;
  color: var(--nav-shell-chrome-faint);
  font-size: 10.5px;
  font-weight: 600;
}

.nav-shell-omnibox:focus-within .nav-shell-omnibox-badge {
  border-color: var(--nav-shell-chrome);
  color: var(--nav-shell-chrome);
}

/* The polite count line is announced, not drawn. */
.nav-shell-omnibox > p[role="status"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.nav-shell-omnibox > [role="listbox"] {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: calc(var(--nav-shell-layer-chrome) + 3);
  box-sizing: border-box;
  width: min(360px, calc(100vw - 24px));
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line, oklch(89% 0.011 88));
  border-radius: var(--radius, 8px);
  background: var(--paper, oklch(99.2% 0.004 95));
  color: var(--ink, oklch(18% 0.009 82));
  box-shadow: var(--nav-shell-shadow);
}

.nav-shell-omnibox > [role="listbox"][hidden] {
  display: none;
}

.nav-shell-omnibox [role="group"] > div:first-child {
  padding: 8px 8px 4px;
  color: var(--nav-shell-quiet);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav-shell-omnibox [role="option"] {
  min-height: 38px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 1px;
  margin-bottom: 2px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.nav-shell-omnibox [role="option"] > span:last-child {
  color: var(--nav-shell-quiet);
  font-size: 11.5px;
}

.nav-shell-omnibox [role="option"][aria-selected="true"] {
  border-color: #d7b36f;
  /* Home names its own token; every other surface falls back to the report
     system's amber wash, which is the nearest thing it carries. */
  background: var(--home-amber-soft, var(--amber-soft, oklch(96% 0.035 80)));
}

/* Home's suggestion rows, on a page that does not load beta-home.css.
   The header box is Home's search box in a chrome skin, so it renders Home's
   markup: a Company or Notices badge, the label, a meta line, and a count.
   These rules dress that markup in the report system's own vocabulary and add
   nothing Home does not already draw. */
.nav-shell-omnibox .beta-home-suggestion-badge {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  padding: 2px 6px;
  border: 1px solid #cfdff1;
  border-radius: 4px;
  background: #e7eff9;
  color: #244a7b;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-shell-omnibox .beta-home-suggestion-label {
  grid-column: 2;
  grid-row: 1;
  color: var(--ink, oklch(18% 0.009 82));
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-shell-omnibox .beta-home-suggestion-ag {
  color: #465a88;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.nav-shell-omnibox .beta-home-suggestion-meta,
.nav-shell-omnibox .beta-home-suggestion-count {
  color: var(--nav-shell-quiet);
  font-size: 11.5px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-shell-omnibox .beta-home-suggestion-meta {
  grid-column: 2;
  grid-row: 2;
}

.nav-shell-omnibox .beta-home-suggestion-count {
  grid-column: 3;
  grid-row: 1 / span 2;
  font-weight: 700;
}

.nav-shell-omnibox .beta-home-suggestion-group-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.nav-shell-omnibox .beta-home-suggestion-group-count {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.nav-shell-omnibox .beta-home-suggestion-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 8px 2px;
  border-top: 1px solid var(--line, oklch(89% 0.011 88));
  color: var(--nav-shell-quiet);
  font-size: 10.5px;
}

/* ------------------------------------------- header buttons, drawer, search */

.nav-shell-icon-button {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: none;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius, 8px);
  background: none;
  color: var(--nav-shell-chrome-text);
  cursor: pointer;
}

.nav-shell-icon-button svg {
  width: 21px;
  height: 21px;
  display: block;
}

.nav-shell-icon-button:focus-visible {
  outline: 2px solid var(--nav-shell-amber);
  outline-offset: 2px;
}

.nav-shell-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--nav-shell-layer-navigation);
  background: rgba(27, 42, 78, 0.42);
}

.nav-shell-scrim[hidden],
.nav-shell-drawer[hidden],
.nav-shell-searchview[hidden] {
  display: none;
}

.nav-shell-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: calc(var(--nav-shell-layer-navigation) + 1);
  box-sizing: border-box;
  width: 284px;
  max-width: 88vw;
  display: flex;
  flex-direction: column;
  background: var(--paper, oklch(99.2% 0.004 95));
  transform: translateX(-100%);
  transition: transform 0.2s var(--nav-shell-ease);
}

.nav-shell-drawer[data-nav-shell-drawer-open="true"] {
  transform: translateX(0);
}

.nav-shell-drawer-head {
  min-height: 57px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 0 16px;
  border-bottom: 1px solid var(--nav-shell-chrome-line);
  background: var(--nav-shell-chrome);
  color: var(--nav-shell-chrome-quiet);
  font-family: "Schibsted Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-shell-drawer-close {
  display: grid;
}

/* The drawer hosts the same rail component, in its labelled variant. */
.nav-shell-drawer .nav-shell-rail {
  position: static;
  z-index: auto;
  width: 100%;
  flex: 1 1 auto;
  border-right: 0;
  box-shadow: none;
}

.nav-shell-searchview {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: calc(var(--nav-shell-layer-chrome) + 2);
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: var(--nav-shell-header-h-mobile);
  padding: 0 8px;
  border-bottom: 1px solid var(--nav-shell-chrome-line);
  background: var(--nav-shell-chrome);
}

.nav-shell-searchview .nav-shell-icon-button {
  display: grid;
}

.nav-shell-search-slot {
  flex: 1 1 auto;
  min-width: 0;
}

/* In the mobile search view the control and its panel take the frame. */
.nav-shell-search-slot .nav-shell-omnibox {
  width: 100%;
}

.nav-shell-search-slot .nav-shell-omnibox > [role="listbox"] {
  right: -8px;
  left: -52px;
  width: auto;
  border-radius: 0;
}

/* ------------------------------------------------ the sub-1180px overlay */

/* Below a comfortable laptop width the rail stops being a persistent column
   and becomes the same drawer mobile uses, reached from the hamburger. The
   content column takes the full width. */
@media (max-width: 1180px) {
  body.has-nav-shell {
    padding-left: 0;
  }

  .nav-shell-rail[data-nav-shell-rail="rail"] {
    display: none;
  }

  .nav-shell-header .nav-shell-hamburger {
    display: grid;
  }

  .nav-shell-identity {
    margin-left: 0;
  }

}

/* ------------------------------------------------------------ mobile sizes */

@media (max-width: 767px) {
  body.has-nav-shell {
    padding-top: var(--nav-shell-top-mobile);
    padding-left: 0;
  }

  .nav-shell-bar .nav-shell-header {
    min-height: var(--nav-shell-header-h-mobile);
    height: var(--nav-shell-header-h-mobile);
    gap: 8px;
    padding: 0 8px;
  }

  .nav-shell-header .nav-shell-brand,
  .nav-shell-header .beta-product-brand {
    font-size: 19px;
  }

  .nav-shell-header .nav-shell-brand-mark,
  .nav-shell-header .beta-product-brand-mark {
    --mark-size: 28px;
  }

  .nav-shell-header .nav-shell-chip,
  .nav-shell-header .beta-product-chip {
    display: none;
  }

  .nav-shell-header .nav-shell-search-toggle {
    display: grid;
  }

  /* On a phone the magnifier is the search, and the field it opens belongs in
     the search view, not in the header. Left in the header it has nowhere to
     go: a 56px row cannot hold a hamburger, a lockup, a 300px field and a
     magnifier, so the field printed straight over the wordmark on every report
     page. The control still exists and still holds its value; only the header
     copy of it is out of the layout below this width. */
  .nav-shell-header .nav-shell-header-slot .nav-shell-omnibox {
    display: none;
  }

  /* Same crowding, same 56px row. The rail's Home item is the way back on a
     phone and the drawer carries it, so this desktop link is chrome the shell
     has already replaced. */
  .nav-shell-header .beta-product-return {
    display: none;
  }

  .nav-shell-identity {
    margin-left: 0;
  }

  [data-nav-shell-scrolled="true"] .nav-shell-identity[data-nav-shell-identity-filled="true"] {
    height: var(--nav-shell-identity-h-mobile);
  }

}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .nav-shell-bar .nav-shell-header,
  .nav-shell-identity,
  .nav-shell-rail,
  .nav-shell-rail-label,
  .nav-shell-rail-heading,
  .nav-shell-rail-chevron-icon,
  .nav-shell-drawer,
  .nav-shell-omnibox {
    transition: none;
  }
}