/* CUTD site navigation — the changeable layer shared by every page (split from classical.css, 2026-11-10; rules moved
   verbatim): the navigation tabs with the Tools menu, the phone menu button, and the site notice (nav-row slot and strip).
   Loads after site-frame.css (it uses its tokens) and before the page's own stylesheet. */
/* Nav row: navigation with the Tools dropdown on the left, the site notice on the right.
   No overflow: hidden on the bar or this row: the Tools list hangs out of it. */
/* the row reaches past the bar gutters (negative margins), so its top line runs across the window like the bottom line */
.cutd-nav-row { display: flex; align-items: center; gap: 0 16px; min-width: 0; margin-inline: -24px; padding-inline: 24px; border-top: 1px solid var(--rule-soft); }
.cutd-bar .cutd-navigation { display: flex; flex: none; align-items: stretch; width: auto; background: none; }
.cutd-bar .cutd-navigation-inner { display: flex; align-items: stretch; justify-content: flex-start; gap: 0 26px; width: auto; padding: 0; }
.cutd-bar .cutd-navigation-inner > a, .cutd-bar .cutd-navigation-inner > span, .cutd-bar .nav-tools-button { display: inline-flex; align-items: center; min-height: 0; padding: 8px 0 5px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; color: var(--ink); font-family: var(--cutd-font-body); font-size: 14.5px; font-weight: 400; line-height: 1.3; white-space: nowrap; }
.cutd-bar .cutd-navigation-inner > a:hover, .cutd-bar .nav-tools-button:hover, .cutd-bar .nav-tools-button[aria-expanded="true"] { background: none; border-bottom-color: var(--rule); color: var(--ink); text-decoration: none; }
.cutd-bar .cutd-navigation-inner > a[aria-current="page"], .cutd-bar .nav-tools-button[aria-current="true"] { background: none; border-bottom-color: var(--accent); color: var(--ink); font-weight: 600; }
.cutd-bar .cutd-navigation-inner > span[aria-disabled="true"] { color: #a7b1b7; cursor: default; }
/* Tools: a disclosure (button + list), not an application menu */
.nav-tools { position: relative; display: flex; align-items: stretch; }
.cutd-bar .nav-tools-button { gap: 7px; cursor: pointer; }
.cutd-bar .nav-tools-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-chevron { display: inline-block; width: 6px; height: 6px; margin-top: -4px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); }
.nav-tools-button[aria-expanded="true"] .nav-chevron { margin-top: 3px; transform: rotate(-135deg); }
.nav-tools-menu { position: absolute; left: -14px; top: calc(100% + 4px); z-index: 60; min-width: 210px; margin: 0; padding: 6px 0; list-style: none; border: 1px solid var(--rule); border-radius: 4px; background: #fff; box-shadow: 0 8px 18px rgba(23, 36, 45, .14); }
.nav-tools-menu li > span, .nav-tools-menu li > a { display: flex; align-items: baseline; gap: 8px; padding: 7px 14px; font-size: 14px; line-height: 1.4; white-space: nowrap; }
.nav-tools-menu li > a { color: var(--ink); }
.nav-tools-menu li > a:hover { background: var(--hover); text-decoration: none; }
.nav-tools-menu span[aria-disabled="true"] { color: #a7b1b7; cursor: default; }
.nav-tools-menu small { font-size: 11.5px; }
/* Site notice: one line on the right of the nav row; at 1000 px and below a wrapping strip under the bar.
   The base display rules must stay before the media block; [hidden] (empty list, dismissed) always wins. */
.site-notice.in-nav { display: flex; flex: 0 1 auto; align-items: center; gap: 10px; min-width: 0; max-width: 56%; margin-left: auto; padding-left: 16px; font-size: 13px; line-height: 1.4; }
.site-notice-label { flex: none; font: 600 11px/1 var(--cutd-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--warn); }
.site-notice-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.site-notice-link { flex: none; }
.site-notice-close { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 2px; background: none; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; }
.site-notice-close:hover { background: rgba(23, 36, 45, .06); color: var(--ink); }
.site-notice-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.site-notice.strip { display: none; background: #fff8e8; border-bottom: 1px solid #f0e2bd; }
.site-notice.strip .site-notice-inner { display: flex; align-items: flex-start; gap: 10px; max-width: none; margin: 0; padding: 6px 24px; font-size: 13px; line-height: 1.45; }
.site-notice.strip .site-notice-label { padding-top: 3px; }
.site-notice.strip .site-notice-text { flex: 1; overflow: visible; white-space: normal; }
.site-notice.strip .site-notice-close { margin: -3px -4px -3px 0; }
@media (max-width: 1000px) {
  .site-notice.in-nav { display: none; }
  .site-notice.strip { display: block; }
}
@media (min-width: 761px) and (max-height: 800px) {
  .cutd-bar .cutd-navigation-inner > a, .cutd-bar .cutd-navigation-inner > span, .cutd-bar .nav-tools-button { padding: 6px 0 3px; }
}
@media (max-width: 760px) {
  .cutd-nav-row { margin-inline: -16px; padding-inline: 16px; }
  .site-notice.strip .site-notice-inner { padding-inline: 16px; }
}
/* nine nav items since Browse (2026-11-10) need 679 px at the 26 px gap; between 641 and 700 px use 18 px so the row fits
   (at 640 px and below the phone menu's own grid gap applies) */
@media (max-width: 700px) {
  .cutd-bar .cutd-navigation-inner { gap: 0 18px; }
}
@media (max-width: 640px) {
  .cutd-nav-row { border-top: 0; }
  .cutd-bar .cutd-navigation { flex-direction: column; width: 100%; }
  .cutd-bar .cutd-menu-toggle { position: absolute; top: 10px; right: 16px; display: flex; align-items: center; gap: 6px; width: auto; height: 40px; min-height: 0; padding: 0 4px; background: none; color: var(--ink); font: 600 13.5px/1 var(--cutd-font-body); }
  .cutd-bar .cutd-menu-toggle:hover, .cutd-bar .cutd-menu-toggle[aria-expanded="true"] { background: none; color: var(--link); }
  .cutd-bar .cutd-navigation-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; padding: 0 0 10px; }
  .cutd-bar .cutd-navigation-inner > a, .cutd-bar .cutd-navigation-inner > span, .cutd-bar .nav-tools-button { padding: 7px 0; border-bottom: 1px solid var(--rule-soft); }
  /* Tools: a full row; its list opens in the page flow, indented, two columns */
  .nav-tools { grid-column: 1 / -1; flex-direction: column; }
  .nav-tools-menu { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; min-width: 0; padding: 0 0 0 14px; border: 0; border-radius: 0; box-shadow: none; }
  .nav-tools-menu li > span, .nav-tools-menu li > a { padding: 7px 0; border-bottom: 1px solid var(--rule-soft); }
}