/* Theme 2.0 header (design changelog 10 section 1): ONE shared bar on every page, three "seg" capsules: logo (left), nav tabs (centred), tray (right).
   left/right 56px, top 24px, height 48px. Tray collapses by default; the avatar is always visible. */
.t2-nav { position: absolute; z-index: 30; left: var(--page-x); right: var(--page-x); top: 24px; height: 48px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.t2-nav > * { pointer-events: auto; }
.t2-cap { display: flex; align-items: center; height: 48px; padding: 3px; border-radius: 18px; background: var(--seg); border: 1px solid var(--pbd); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

/* 1. Logo: hollow ribbon mark 34px; the wordmark slides out on hover or focus (0.45s ease-out-expo). Light uses logo-black.svg, dark logo-reverse.svg. */
.t2-logo { padding: 0 9px; color: var(--tx); }
.t2-logo__mark { width: 34px; height: 34px; flex: none; }
.t2-logo__mark--d { display: block; }
.t2-logo__mark--l { display: none; }
[data-theme="light"] .t2-logo__mark--d { display: none; }
[data-theme="light"] .t2-logo__mark--l { display: block; }
.t2-logo__wm { max-width: 0; margin-left: 0; overflow: hidden; white-space: nowrap; font-size: 19px; font-weight: 500; letter-spacing: -0.01em; opacity: 0;
  transition: max-width 0.45s var(--ease), margin-left 0.45s var(--ease), opacity 0.3s var(--ease); }
.t2-logo:hover .t2-logo__wm, .t2-logo:focus-visible .t2-logo__wm { max-width: 200px; margin-left: 12px; opacity: 1; }

/* 2. Nav tabs: centred, active = --ink fill. Hidden under 1040px (the burger opens the same links). */
.t2-pill { position: absolute; left: 50%; transform: translateX(-50%); gap: 2px; padding: 5px; }
.t2-pill a { padding: 11px 14px; border-radius: 13px; font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--td); transition: color var(--dur), background var(--dur); }
.t2-pill a:hover { color: var(--tx); }
.t2-pill a[aria-current="page"] { background: var(--ink); color: var(--inktx); }

/* 3. Tray: theme, preferences and alerts icons expand on hover, focus or while a menu is open (collapse delayed about 200ms so it never flickers) */
.t2-tray { gap: 0; padding: 3px; }
.t2-tray__x { display: flex; align-items: center; gap: 2px; max-width: 0; overflow: hidden; opacity: 0; padding-right: 0;
  transition: max-width 0.3s var(--ease) 0.2s, opacity 0.2s ease 0.2s, padding 0.3s var(--ease) 0.2s; }
.t2-tray:hover .t2-tray__x, .t2-tray:focus-within .t2-tray__x, .t2-tray.is-open .t2-tray__x { max-width: 100px; opacity: 1; padding-right: 4px; transition-delay: 0s; }
.t2-tb { flex: none; width: 42px; height: 42px; border-radius: 13px; border: 0; background: transparent; color: var(--t2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--dur), color var(--dur); }
.t2-tb:hover, .t2-tb[aria-expanded="true"] { background: var(--ghost); color: var(--tx); }
.t2-tb svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.t2-ico-sun { display: none; } .t2-ico-moon { display: inline-flex; }                 /* the icon shows the CURRENT theme */
[data-theme="light"] .t2-ico-sun { display: inline-flex; } [data-theme="light"] .t2-ico-moon { display: none; }
.t2-burger { display: none; }
.t2-acct { flex: none; width: 42px; height: 42px; border-radius: 9px; border: 0; background: var(--ink); color: var(--inktx); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity var(--dur); }
.t2-acct:hover { opacity: 0.85; }
.t2-acct svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Menus: one open at a time, fixed under the bar, panelsolid with border, 12px radius, shadow, fbin .15s */
.t2-catch { position: fixed; inset: 0; z-index: 40; }
.t2-catch[hidden] { display: none; }
.t2-menu { position: fixed; z-index: 45; top: 86px; display: none; padding: 8px; border-radius: var(--rad-panel); background: var(--panelsolid); border: 1px solid var(--pbd); box-shadow: var(--shadow); }
.t2-menu.is-open { display: block; animation: t2in 0.15s var(--ease) both; }
.t2-menu--alerts { right: 110px; width: 300px; }
.t2-menu--user { right: 56px; width: 250px; }
.t2-menu--nav { right: 56px; width: 250px; }
.t2-menu__h { padding: 6px 10px 8px; font-size: 14px; font-weight: 500; color: var(--tx); }
.t2-menu__who { padding: 8px 10px 10px; font-size: 13px; color: var(--td); border-bottom: 1px solid var(--grid); margin-bottom: 4px; }
.t2-menu__row, .t2-menu a, .t2-menu button.t2-menu__row { display: flex; align-items: center; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font-size: 14px; color: var(--t2); text-align: left; cursor: pointer; }
.t2-menu__row:hover, .t2-menu a:hover { background: var(--ghost); color: var(--tx); }
.t2-menu__row[aria-current="page"] { color: var(--tx); font-weight: 500; }
.t2-menu .t2-seg button { min-height: 0; }

@media (max-width: 1039px) {
  .t2-pill { display: none; }
  .t2-burger { display: flex; }
}
/* Below 900px: capsules reflow with a 24px side gutter, the tray stays expanded and reachable, menus become full-width sheets, 44px taps, no horizontal scroll */
@media (max-width: 899px) {
  .t2-nav { left: 24px; right: 24px; top: 16px; }
  .t2-logo { min-width: 44px; padding: 0 6px; }
  .t2-tray__x { max-width: none; opacity: 1; padding-right: 2px; }
  .t2-tb { width: 44px; height: 44px; }
  .t2-acct { width: 44px; height: 44px; }
  .t2-menu { left: 24px; right: 24px; width: auto; top: 72px; }
  .t2-logo:hover .t2-logo__wm { max-width: 0; margin-left: 0; opacity: 0; }
}
@media (hover: none) { .t2-tray__x { max-width: none; opacity: 1; padding-right: 2px; } }

/* Header avatar: profile photo fills the button exactly (absolute, inset 0, same radius, no border or padding to leave slivers). The ink background lives on the
   initials layer, not the button, and that layer hides once the photo has loaded, so nothing shows behind or around the photo. The img removes itself on error. */
.t2-acct { position: relative; overflow: hidden; background: transparent; }
.t2-acct--anon { background: var(--ink); }
.t2-acct__i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--inktx); border-radius: inherit; }
.t2-acct.has-photo .t2-acct__i { visibility: hidden; }
.t2-acct__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; background: transparent; }
.t2-menu__who--av { display: flex; align-items: center; gap: 10px; }
.t2-menu__av { flex: none; width: 36px; height: 36px; border-radius: 9px; object-fit: cover; display: block; background: transparent; }
.t2-menu__whotx { min-width: 0; }

/* Logo stands alone: no tile (background, border colour, blur, shadow); the 48px box, the 44px tap area and the focus ring stay. The 1px border is kept transparent so nothing shifts. */
.t2-cap.t2-logo { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }