/* Single canonical sidebar layout. The user surface renders
   _SharedShellSidebar.cshtml (same partial as public/tool/docs) so
   no user-specific override file is required — all chrome, brand,
   nav, collapsed-rail, and mobile-overlay rules come from the
   shared cascade below. The design-shell file (formerly
   `tool-public-sidebar.css`) layers the memphis chrome on top so the
   user sidebar visually matches the public tool page. */
/* ==========================================================================
   PUBLIC SIDEBAR COMPONENT
   Dyad-style docs/tool rail with command palette and display controls.
   ========================================================================== */
.sidebar-shell {
  width: var(--tn-shell-sidebar-expanded);
  min-width: var(--tn-shell-sidebar-expanded);
  height: 100vh;
  position: sticky;
  top: 0;
  z-index: 9981;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--tn-surface-panel);
  border-right: 1px solid var(--tn-border-muted);
  box-shadow: 0 0 1px rgba(0,0,0,0.06), 1px 0 12px rgba(0,0,0,0.05);
  color: var(--tn-text-default);
  transition:
    width var(--tn-transition),
    min-width var(--tn-transition),
    background var(--tn-transition),
    border-color var(--tn-transition),
    box-shadow var(--tn-transition);
}
html.dark .sidebar-shell {
  background: var(--tn-surface-panel-strong);
  border-right-color: var(--tn-border-muted);
  box-shadow: 0 0 1px rgba(0,0,0,0.12), 1px 0 16px rgba(0,0,0,0.22);
}
.sidebar-shell.is-collapsed {
  width: var(--tn-shell-sidebar-collapsed);
  min-width: var(--tn-shell-sidebar-collapsed);
}
.sidebar-shell__top {
  display: grid;
  gap: var(--tn-space-2);
  padding: var(--tn-space-3);
  border-bottom: 1px solid var(--tn-border-muted);
  flex-shrink: 0;
}
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-space-2);
  min-height: 40px;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
  min-width: 0;
  color: var(--tn-text-default);
  text-decoration: none;
}
.brand-glyph {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--tn-radius-md);
  background: var(--tn-accent-primary);
  color: var(--tn-color-paper);
}
.brand-glyph .material-symbols-outlined {
  font-size: 19px;
  line-height: 1;
}
.brand-name {
  display: grid;
  min-width: 0;
  transition:
    opacity var(--tn-transition),
    width var(--tn-transition);
}
.brand-name__title {
  overflow: hidden;
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-sm);
  font-weight: 650;
  line-height: var(--tn-leading-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-name__meta {
  overflow: hidden;
  color: var(--tn-text-soft);
  font-size: var(--tn-font-size-micro);
  line-height: var(--tn-leading-heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-collapse-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid transparent;
  border-radius: var(--tn-radius-md);
  color: var(--tn-text-muted);
  transition:
    background var(--tn-transition),
    border-color var(--tn-transition),
    color var(--tn-transition);
}
.sidebar-collapse-btn:hover {
  background: var(--tn-surface-subtle);
  border-color: var(--tn-border-muted);
  color: var(--tn-text-default);
}
.sidebar-collapse-btn:focus-visible {
  background: var(--tn-surface-subtle);
  border-color: var(--tn-accent-primary);
  color: var(--tn-text-default);
  outline: 2px solid var(--tn-accent-focus);
  outline-offset: 2px;
}
.sidebar-collapse-btn .material-symbols-outlined {
  font-size: 18px;
}
.sidebar-search-wrap {
  min-width: 0;
}
.sidebar-command-trigger {
  width: 100%;
  min-height: 36px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tn-space-2);
  padding: 0 var(--tn-space-3);
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-md);
  background: var(--tn-surface-subtle);
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-sm);
  text-align: left;
  transition:
    background var(--tn-transition),
    border-color var(--tn-transition),
    color var(--tn-transition),
    box-shadow var(--tn-transition);
}
.sidebar-command-trigger:hover {
  border-color: var(--tn-border-default);
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
}
.sidebar-command-trigger:focus-visible {
  border-color: var(--tn-accent-primary);
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
  box-shadow: 0 0 0 2px var(--tn-accent-focus);
}
.sidebar-command-trigger .nav-icon {
  width: 16px;
  height: 16px;
  font-size: 17px;
}
.sidebar-command-trigger__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-command-trigger kbd {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 var(--tn-space-1);
  border: 1px solid var(--tn-border-subtle);
  border-radius: var(--tn-radius-sm);
  background: var(--tn-surface-panel-strong);
  color: var(--tn-text-muted);
  font-family: var(--tn-font-mono);
  font-size: var(--tn-font-size-micro);
  line-height: 1;
}
.sidebar-shell__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 0;
  padding: var(--tn-space-2) var(--tn-space-3);
  overflow-y: auto;
  overflow-x: hidden;
}
.nav-section-label,
.sidebar-shell__nav-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-space-2);
  min-height: 28px;
  margin: var(--tn-space-3) 0 var(--tn-space-1);
  padding: 0 var(--tn-space-2);
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: var(--tn-leading-heading);
}
/* First section label doesn't need the large top margin */
.nav-section-label:first-child,
.sidebar-shell__nav-group:first-child {
  margin-top: var(--tn-space-1);
}
.sidebar-shell__group-count {
  color: var(--tn-text-soft);
  font-family: var(--tn-font-mono);
  font-size: var(--tn-font-size-micro);
  font-weight: 500;
}
.sidebar-nav-item,
.sidebar-docs__nav-link,
.sidebar-shell__nav-link {
  position: relative;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
  padding: var(--tn-space-1) var(--tn-space-2);
  border: 1px solid transparent;
  border-radius: var(--tn-radius-md);
  color: var(--tn-text-secondary);
  font-size: var(--tn-font-size-sm);
  font-weight: 500;
  line-height: var(--tn-leading-heading);
  text-decoration: none;
  transition:
    background var(--tn-transition),
    border-color var(--tn-transition),
    color var(--tn-transition);
}
/* Hover: clear feedback without being loud */
.sidebar-nav-item:hover,
.sidebar-docs__nav-link:hover,
.sidebar-shell__nav-link:hover {
  background: var(--tn-surface-subtle);
  color: var(--tn-text-default);
}
/* Focus: strong visible keyboard indicator */
.sidebar-nav-item:focus-visible,
.sidebar-docs__nav-link:focus-visible,
.sidebar-shell__nav-link:focus-visible {
  background: var(--tn-surface-subtle);
  color: var(--tn-text-default);
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: -2px;
}
/* Active: dominant current-page signal */
.sidebar-nav-item.active,
.sidebar-docs__nav-link--active,
.sidebar-docs__nav-link.active,
.sidebar-shell__nav-link--active,
.sidebar-shell__nav-link.active {
  background: var(--tn-accent-primary-soft);
  border-color: rgb(var(--tn-color-pink-rgb) / 0.15);
  color: var(--tn-accent-primary-strong);
  font-weight: 600;
}
/* Active indicator bar — thicker, full-height for stronger signal */
.sidebar-nav-item.active::before,
.sidebar-docs__nav-link--active::before,
.sidebar-docs__nav-link.active::before,
.sidebar-shell__nav-link--active::before,
.sidebar-shell__nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--tn-accent-primary);
}
.nav-icon,
.sidebar-shell__nav-link-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--tn-text-muted);
  font-size: 18px;
  transition: color var(--tn-transition);
}
.sidebar-nav-item:hover .nav-icon,
.sidebar-nav-item.active .nav-icon,
.sidebar-shell__nav-link:hover .sidebar-shell__nav-link-icon,
.sidebar-shell__nav-link.active .sidebar-shell__nav-link-icon {
  color: currentColor;
}
/* Filled icon variant for active items — stronger visual weight */
.sidebar-nav-item.active .nav-icon,
.sidebar-shell__nav-link.active .sidebar-shell__nav-link-icon {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
.nav-label,
.sidebar-docs__nav-link-label,
.sidebar-shell__nav-link-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition:
    opacity var(--tn-transition),
    width var(--tn-transition);
}
.sidebar-shell__nav-link-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tn-space-2);
  flex: 1;
}
.sidebar-shell__nav-link-badge {
  min-width: 0;
  padding: 1px var(--tn-space-1);
  border: none;
  border-radius: var(--tn-radius-sm);
  background: var(--tn-surface-inset);
  color: var(--tn-text-muted);
  font-size: var(--tn-font-size-micro);
  font-weight: 500;
  line-height: 1.5;
}
.sidebar-nav-item.active .sidebar-shell__nav-link-badge,
.sidebar-shell__nav-link--active .sidebar-shell__nav-link-badge {
  /* a11y: --tn-color-paper on --tn-accent-primary (#e8879f) is 2.47:1
     (fails WCAG AA). Use the strong pink (#b04968) so the white badge
     label clears 4.5:1. */
  background: var(--tn-accent-primary-strong);
  color: var(--tn-color-paper);
}
.sidebar-footer {
  display: grid;
  gap: var(--tn-space-2);
  margin-top: auto;
  padding: var(--tn-space-3);
  border-top: 1px solid var(--tn-border-muted);
  background: var(--tn-surface-panel);
  flex-shrink: 0;
}
/* Collapse footer when its controls container is empty */
.sidebar-footer:has(.sidebar-footer__controls:empty) {
  padding: 0;
  border-top: none;
  gap: 0;
}
.sidebar-footer__controls {
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-2);
}
.sidebar-text-scale,
.sidebar-theme-toggle {
  min-height: 28px;
  border: 1px solid var(--tn-border-subtle);
  border-radius: var(--tn-radius-md);
  background: var(--tn-surface-subtle);
  color: var(--tn-text-muted);
}
.sidebar-text-scale {
  display: grid;
  grid-template-columns: 28px minmax(34px, 1fr) 28px;
  align-items: center;
  overflow: hidden;
}
.sidebar-text-scale button,
.sidebar-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--tn-transition),
    color var(--tn-transition);
}
.sidebar-text-scale button {
  height: 28px;
  color: var(--tn-text-muted);
  font-weight: 700;
}
.sidebar-text-scale button:hover,
.sidebar-text-scale button:focus-visible,
.sidebar-theme-toggle:hover,
.sidebar-theme-toggle:focus-visible {
  background: var(--tn-surface-panel);
  color: var(--tn-text-default);
}
.sidebar-text-scale span {
  color: var(--tn-text-soft);
  font-size: var(--tn-font-size-micro);
  text-align: center;
}
.sidebar-theme-toggle {
  gap: var(--tn-space-1);
  width: 100%;
  padding: 0 var(--tn-space-2);
  justify-content: flex-start;
}
.sidebar-theme-toggle .material-symbols-outlined {
  font-size: 17px;
}
.theme-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--tn-space-2);
  min-width: 0;
  min-height: 40px;
  padding: var(--tn-space-1) var(--tn-space-2);
  border-radius: var(--tn-radius-md);
  color: var(--tn-text-default);
  text-decoration: none;
  transition: background var(--tn-transition);
}
.sidebar-user:hover,
.sidebar-user:focus-visible {
  background: var(--tn-surface-subtle);
}
.user-avatar {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--tn-border-subtle);
  border-radius: var(--tn-radius-md);
  background: var(--tn-surface-panel);
  color: var(--tn-accent-primary-strong);
  font-size: var(--tn-font-size-xs);
  font-weight: 700;
}
.user-avatar .material-symbols-outlined {
  font-size: 16px;
}
.user-info {
  display: grid;
  min-width: 0;
  transition:
    opacity var(--tn-transition),
    width var(--tn-transition);
}
.user-name,
.user-role {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-name {
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-sm);
  font-weight: 600;
  line-height: var(--tn-leading-tight);
}
.user-role {
  color: var(--tn-text-soft);
  font-size: var(--tn-font-size-micro);
  line-height: var(--tn-leading-heading);
}
.styled-scroll {
  scrollbar-color: var(--tn-border-muted) transparent;
  scrollbar-width: thin;
}
.styled-scroll::-webkit-scrollbar {
  width: var(--tn-space-1);
}
.styled-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.styled-scroll::-webkit-scrollbar-thumb {
  background: var(--tn-border-muted);
  border-radius: var(--tn-radius-pill);
}
.styled-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--tn-border-default);
}
.sidebar-user__chevron {
  margin-left: auto;
  color: var(--tn-text-muted);
  font-size: 18px;
  transition: transform var(--tn-transition), color var(--tn-transition);
}
.sidebar-user:hover .sidebar-user__chevron {
  color: var(--tn-text-default);
}
/* ── Tablet: tighter sidebar ───────────────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1280px) {
  .sidebar-shell:not(.is-collapsed, .is-micro) {
    --tn-shell-sidebar-expanded: 240px;
  }
}
/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sidebar-shell,
  .sidebar-collapse-btn,
  .sidebar-command-trigger,
  .sidebar-nav-item,
  .sidebar-docs__nav-link,
  .sidebar-shell__nav-link,
  .sidebar-user,
  .nav-icon,
  .sidebar-shell__nav-link-icon,
  .sidebar-user__chevron,
  .brand-name {
    transition: none;
  }

}
/* ==========================================================================
   SIDEBAR DESIGN SHELL (formerly tool-public-sidebar.css)

   The "memphis design-shell" sidebar treatment — bold borders, offset
   shadows, mono-typed meta text, dot-icon nav groups, ribbon gradient
   background — is now applied to every `.sidebar-shell` surface (public,
   admin, user, docs). The user request states:
     "We need a single left sidebar which will be use in all panel.
      public website, user panel, admin panel. Final sidebar design
      ui-ux have to be same as it is as 'tool public page'."
   Selectors are therefore scoped to `.sidebar-shell` rather than the
   previous `body[data-shell-surface="tool"][data-tool-public-layout="design-shell"]
   .sidebar-shell--tool` gate so they cascade onto every surface.

   The filename is preserved to keep the existing CSS-bundles manifest
   and freshness guards stable. Surface-specific deltas (admin mobile
   overlay, admin micro-rail, user account dropdown) continue to live in
   their dedicated override files.
   ========================================================================== */
.sidebar-shell {
  position: sticky;
  top: 0;
  overflow: visible;
  background:
    linear-gradient(180deg, var(--tn-surface-elevated), var(--tn-surface-panel));
  border-right: var(--tn-border-heavy);
  box-shadow: none;
}
.sidebar-shell .sidebar-shell__top {
  padding: var(--tn-space-3);
  border-bottom: var(--tn-border-heavy);
  background: var(--tn-surface-panel);
}
.sidebar-shell .sidebar-header {
  min-height: 36px;
}
.sidebar-shell .sidebar-brand {
  gap: var(--tn-space-2);
  max-width: calc(100% - 42px);
}
.sidebar-shell .brand-glyph {
  width: 34px;
  height: 34px;
  background: var(--tn-accent-primary);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-md);
  box-shadow: 2px 2px 0 var(--tn-border-strong);
  color: var(--tn-color-paper);
}
.sidebar-shell .brand-glyph .material-symbols-outlined {
  font-size: 18px;
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 24;
}
.sidebar-shell .brand-name__title {
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-sm);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.sidebar-shell .brand-name__meta {
  max-width: 140px;
  color: var(--tn-text-muted);
  font-family: var(--tn-font-mono);
  font-size: var(--tn-font-size-micro);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.sidebar-shell .sidebar-collapse-btn {
  width: 34px;
  height: 34px;
  border: 2px solid transparent;
  border-radius: var(--tn-radius-md);
  color: var(--tn-text-default);
}
.sidebar-shell .sidebar-collapse-btn:hover,
.sidebar-shell .sidebar-collapse-btn:focus-visible {
  background: var(--tn-surface-elevated);
  border-color: var(--tn-border-strong);
  box-shadow: 2px 2px 0 var(--tn-border-strong);
  color: var(--tn-text-default);
}
.sidebar-shell .sidebar-search-wrap {
  margin-top: var(--tn-space-1);
}
.sidebar-shell .sidebar-command-trigger {
  min-height: 38px;
  padding: 0 var(--tn-space-2);
  grid-template-columns: auto minmax(0, 1fr) auto;
  background: var(--tn-surface-elevated);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-lg);
  box-shadow: 2px 2px 0 var(--tn-border-strong);
  color: var(--tn-text-default);
  font-weight: 600;
}
.sidebar-shell .sidebar-command-trigger:hover,
.sidebar-shell .sidebar-command-trigger:focus-visible {
  background: var(--tn-surface-panel);
  border-color: var(--tn-border-strong);
  box-shadow: 3px 3px 0 var(--tn-border-strong);
}
.sidebar-shell .sidebar-command-trigger .nav-icon {
  color: var(--tn-text-default);
}
.sidebar-shell .sidebar-command-trigger kbd {
  min-height: 22px;
  padding: 0 var(--tn-space-2);
  background: var(--tn-color-yellow-soft);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-sm);
  color: var(--tn-color-ink);
  font-weight: 600;
  box-shadow: 1px 1px 0 var(--tn-border-strong);
}
.sidebar-shell .sidebar-shell__nav {
  gap: 2px;
  padding: var(--tn-space-3);
  background:
    linear-gradient(var(--tn-surface-panel) 30%, transparent) center top,
    linear-gradient(transparent, var(--tn-surface-panel) 70%) center bottom,
    radial-gradient(farthest-side at 50% 0, rgb(var(--tn-color-ink-rgb) / 0.12), transparent) center top,
    radial-gradient(farthest-side at 50% 100%, rgb(var(--tn-color-ink-rgb) / 0.12), transparent) center bottom;
  background-attachment: local, local, scroll, scroll;
  background-repeat: no-repeat;
  background-size: 100% 40px, 100% 40px, 100% 10px, 100% 10px;
}
.sidebar-shell .sidebar-shell__nav-group {
  justify-content: flex-start;
  min-height: 24px;
  margin: var(--tn-space-4) 0 var(--tn-space-2);
  padding: 0 var(--tn-space-2);
  color: var(--tn-text-default);
  font-family: var(--tn-font-mono);
  font-size: var(--tn-font-size-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.sidebar-shell .sidebar-shell__nav-group span {
  flex: 0 1 auto;
}
.sidebar-shell .sidebar-shell__nav-group:first-child {
  margin-top: var(--tn-space-1);
}
.sidebar-shell .sidebar-shell__nav-group::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: var(--tn-space-1);
  border: 2px solid var(--tn-border-strong);
  border-radius: 50%;
  background: var(--tn-accent-primary);
  box-shadow: 1px 1px 0 var(--tn-border-strong);
}
.sidebar-shell .sidebar-shell__nav-link {
  min-height: 40px;
  gap: var(--tn-space-2);
  padding: var(--tn-space-2);
  border: 2px solid transparent;
  border-radius: var(--tn-radius-lg);
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-sm);
  font-weight: 600;
}
.sidebar-shell .sidebar-shell__nav-link:hover,
.sidebar-shell .sidebar-shell__nav-link:focus-visible {
  background: var(--tn-surface-elevated);
  border-color: var(--tn-border-strong);
  box-shadow: 2px 2px 0 var(--tn-border-strong);
  color: var(--tn-text-default);
}
.sidebar-shell .sidebar-shell__nav-link.active,
.sidebar-shell .sidebar-shell__nav-link--active {
  background: var(--tn-accent-primary-soft);
  border-color: var(--tn-border-strong);
  box-shadow: 2px 2px 0 var(--tn-border-strong);
  color: var(--tn-text-default);
  font-weight: 600;
}
.sidebar-shell .sidebar-shell__nav-link.active::before,
.sidebar-shell .sidebar-shell__nav-link--active::before {
  left: var(--tn-space-1);
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: var(--tn-radius-pill);
  background: var(--tn-border-strong);
}
.sidebar-shell .sidebar-shell__nav-link-icon {
  width: 20px;
  height: 20px;
  color: var(--tn-text-default);
  font-size: 20px;
  font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 24;
}
.sidebar-shell .sidebar-shell__nav-link.active .sidebar-shell__nav-link-icon,
.sidebar-shell .sidebar-shell__nav-link--active .sidebar-shell__nav-link-icon {
  font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24;
}
.sidebar-shell .sidebar-shell__nav-link-label {
  padding-left: var(--tn-space-1);
}
.sidebar-shell .sidebar-footer {
  padding: var(--tn-space-3);
  background: var(--tn-surface-panel);
  border-top: var(--tn-border-heavy);
}
.sidebar-shell .sidebar-auth-cta {
  padding: var(--tn-space-3);
  background: var(--tn-surface-elevated);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-lg);
  box-shadow: 3px 3px 0 var(--tn-border-strong);
}
.sidebar-shell .sidebar-auth-cta__text {
  color: var(--tn-text-default);
  font-size: var(--tn-font-size-sm);
  font-weight: 600;
  line-height: var(--tn-leading-body);
}
.sidebar-shell .sidebar-auth-cta__btn {
  min-height: 38px;
  background: var(--tn-accent-primary);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-md);
  box-shadow: 2px 2px 0 var(--tn-border-strong);
  color: var(--tn-color-ink);
  font-weight: 600;
}
.sidebar-shell .sidebar-auth-cta__btn:hover,
.sidebar-shell .sidebar-auth-cta__btn:focus-visible {
  background: var(--tn-accent-primary-soft);
  box-shadow: 3px 3px 0 var(--tn-border-strong);
}
.sidebar-shell .account-menu--sidebar {
  width: 100%;
}
.sidebar-shell .account-menu--sidebar .account-menu__trigger {
  min-height: 46px;
  background: var(--tn-surface-elevated);
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-lg);
  box-shadow: 3px 3px 0 var(--tn-border-strong);
}
.sidebar-shell .account-menu--sidebar .account-menu__trigger:hover,
.sidebar-shell .account-menu--sidebar .account-menu__trigger:focus-visible {
  background: var(--tn-surface-panel);
  box-shadow: 4px 4px 0 var(--tn-border-strong);
}
.sidebar-shell .account-menu--sidebar .account-menu__avatar {
  background: var(--tn-accent-primary-soft);
  border: 2px solid var(--tn-border-strong);
  color: var(--tn-text-default);
  font-weight: 600;
}
.sidebar-shell .account-menu__name {
  color: var(--tn-text-default);
  font-weight: 600;
}
.sidebar-shell .account-menu__email {
  color: var(--tn-text-muted);
  font-family: var(--tn-font-mono);
}
.sidebar-shell .account-menu__panel--up {
  min-width: 304px;
  border: 2px solid var(--tn-border-strong);
  border-radius: var(--tn-radius-lg);
  box-shadow: 6px 6px 0 var(--tn-border-strong);
  z-index: 10010;
}
.sidebar-shell .sidebar-auth-cta__btn {
  gap: var(--tn-space-1);
}
.sidebar-shell .sidebar-auth-cta__btn-icon {
  font-size: 18px;
  line-height: 1;
}
@media (min-width: 1024px) {
  .sidebar-shell.is-collapsed {
    overflow: visible;
  }

  .sidebar-shell.is-collapsed .sidebar-shell__top,
  .sidebar-shell.is-collapsed .sidebar-footer {
    padding: var(--tn-space-2) 0;
  }

  .sidebar-shell.is-collapsed .sidebar-shell__top {
    justify-items: center;
  }

  .sidebar-shell.is-collapsed .sidebar-header {
    width: 100%;
    min-height: 0;
    display: grid;
    justify-items: center;
    gap: var(--tn-space-2);
  }

  .sidebar-shell.is-collapsed .sidebar-brand,
  .sidebar-shell.is-collapsed .sidebar-collapse-btn,
  .sidebar-shell.is-collapsed .sidebar-command-trigger,
  .sidebar-shell.is-collapsed .sidebar-shell__nav-link,
  .sidebar-shell.is-collapsed .sidebar-auth-cta,
  .sidebar-shell.is-collapsed .sidebar-auth-cta__btn,
  .sidebar-shell.is-collapsed .account-menu--sidebar,
  .sidebar-shell.is-collapsed .account-menu--sidebar .account-menu__trigger {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
  }

  .sidebar-shell.is-collapsed .sidebar-brand,
  .sidebar-shell.is-collapsed .sidebar-collapse-btn,
  .sidebar-shell.is-collapsed .sidebar-command-trigger,
  .sidebar-shell.is-collapsed .sidebar-shell__nav-link,
  .sidebar-shell.is-collapsed .sidebar-auth-cta__btn,
  .sidebar-shell.is-collapsed .account-menu--sidebar .account-menu__trigger {
    display: grid;
    place-items: center;
    gap: 0;
    margin: 0 auto;
    padding: 0;
  }

  .sidebar-shell.is-collapsed .brand-glyph {
    width: 34px;
    height: 34px;
    border-radius: var(--tn-radius-md);
    box-shadow: 1px 1px 0 var(--tn-border-strong);
  }

  .sidebar-shell.is-collapsed .sidebar-collapse-btn {
    border-width: 2px;
  }

  .sidebar-shell.is-collapsed .sidebar-search-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .sidebar-shell.is-collapsed .sidebar-command-trigger {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .sidebar-shell.is-collapsed .sidebar-command-trigger__label,
  .sidebar-shell.is-collapsed .sidebar-command-trigger kbd,
  .sidebar-shell.is-collapsed .sidebar-shell__nav-link-label,
  .sidebar-shell.is-collapsed .nav-label,
  .sidebar-shell.is-collapsed .sidebar-auth-cta__text,
  .sidebar-shell.is-collapsed .sidebar-auth-cta__btn-label,
  .sidebar-shell.is-collapsed .account-menu__identity,
  .sidebar-shell.is-collapsed .account-menu__chev {
    display: none;
  }

  .sidebar-shell.is-collapsed .sidebar-shell__nav {
    align-items: center;
    gap: var(--tn-space-2);
    padding: var(--tn-space-3) 0;
  }

  .sidebar-shell.is-collapsed .sidebar-shell__nav-group {
    width: 24px;
    min-height: 1px;
    height: 1px;
    margin: var(--tn-space-3) 0;
    padding: 0;
  }

  .sidebar-shell.is-collapsed .sidebar-shell__nav-group::before {
    display: none;
  }

  .sidebar-shell.is-collapsed .sidebar-shell__nav-group::after {
    width: 24px;
    background: var(--tn-border-muted);
  }

  .sidebar-shell.is-collapsed .sidebar-shell__nav-link {
    border-width: 2px;
    border-radius: var(--tn-radius-lg);
    box-shadow: none;
  }

  .sidebar-shell.is-collapsed .sidebar-shell__nav-link.active,
  .sidebar-shell.is-collapsed .sidebar-shell__nav-link--active {
    box-shadow: 2px 2px 0 var(--tn-border-strong);
  }

  .sidebar-shell.is-collapsed .sidebar-shell__nav-link.active::before,
  .sidebar-shell.is-collapsed .sidebar-shell__nav-link--active::before {
    left: 4px;
    top: 10px;
    bottom: 10px;
  }

  .sidebar-shell.is-collapsed .sidebar-auth-cta {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .sidebar-shell.is-collapsed .sidebar-auth-cta__btn {
    color: transparent;
    font-size: 0;
    line-height: 0;
  }

  .sidebar-shell.is-collapsed .sidebar-auth-cta__btn::before {
    content: "login";
    color: var(--tn-text-default);
    font-family: "Material Symbols Outlined";
    font-size: 20px;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
  }

  .sidebar-shell.is-collapsed .sidebar-auth-cta__btn-icon {
    display: none;
  }

  .sidebar-shell.is-collapsed .account-menu--sidebar .account-menu__trigger {
    box-shadow: 2px 2px 0 var(--tn-border-strong);
  }

  .sidebar-shell.is-collapsed .account-menu__panel--up {
    left: calc(100% + var(--tn-space-2));
  }

  .sidebar-shell.is-collapsed .account-menu__panel--up .account-menu__item {
    min-height: 40px;
  }
}
@media (max-width: 1023px) {
  .sidebar-shell {
    width: min(var(--tn-shell-sidebar-expanded), 88vw);
    min-width: min(var(--tn-shell-sidebar-expanded), 88vw);
    border-right: var(--tn-border-heavy);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-shell .sidebar-command-trigger,
  .sidebar-shell .sidebar-shell__nav-link,
  .sidebar-shell .sidebar-auth-cta__btn,
  .sidebar-shell .account-menu--sidebar .account-menu__trigger {
    transition: none;
  }
}
/* ==========================================================================
   Public sidebar collapse — polished icon-rail mode.
   wwwroot/js/shell/sidebar-state.ts drives the expanded ↔ mini cycle.

   Design goals:
   - 68 px rail with 40 px touch targets (WCAG 2.5.5)
   - CSS tooltips on hover/focus (no native title delay)
   - Accent-colored active bar for clear current-page signal
   - Section dividers replace hidden group labels
   - Shadow + stronger border for depth separation
   ========================================================================== */
/* ── Hide text elements ────────────────────────────────────────────────── */
.sidebar-shell.is-collapsed .brand-name,
.sidebar-shell.is-collapsed .sidebar-command-trigger__label,
.sidebar-shell.is-collapsed .sidebar-command-trigger kbd,
.sidebar-shell.is-collapsed .nav-label,
.sidebar-shell.is-collapsed .sidebar-docs__nav-link-label,
.sidebar-shell.is-collapsed .sidebar-shell__nav-link-label,
.sidebar-shell.is-collapsed .sidebar-text-scale,
.sidebar-shell.is-collapsed .sidebar-theme-toggle .theme-label,
.sidebar-shell.is-collapsed .user-info,
.sidebar-shell.is-collapsed .sidebar-user__chevron {
  width: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
/* ── Header / top area ─────────────────────────────────────────────────── */
.sidebar-shell.is-collapsed .sidebar-shell__top {
  padding: var(--tn-space-2);
  border-bottom: 1px solid var(--tn-border-muted);
}
.sidebar-shell.is-collapsed .sidebar-header {
  justify-content: center;
  padding-bottom: 0;
}
/* Keep brand glyph visible so the rail has identity */
.sidebar-shell.is-collapsed .sidebar-brand {
  display: flex;
}
.sidebar-shell.is-collapsed .brand-name {
  display: none;
}
/* ── Search trigger → icon-only pill ───────────────────────────────────── */
.sidebar-shell.is-collapsed .sidebar-command-trigger {
  grid-template-columns: auto;
  justify-content: center;
  padding: 0;
  min-height: 40px;
  border-radius: var(--tn-radius-md);
  border-color: transparent;
  background: transparent;
}
.sidebar-shell.is-collapsed .sidebar-command-trigger:hover,
.sidebar-shell.is-collapsed .sidebar-command-trigger:focus-visible {
  background: var(--tn-surface-subtle);
}
.sidebar-shell.is-collapsed .sidebar-command-trigger .nav-icon {
  width: 20px;
  height: 20px;
  font-size: 20px;
  margin: 0;
}
/* ── Nav container ─────────────────────────────────────────────────────── */
.sidebar-shell.is-collapsed .sidebar-shell__nav {
  padding: var(--tn-space-2) var(--tn-space-1);
  gap: var(--tn-space-1);
}
/* ── Section labels → thin centered dividers ──────────────────────────── */
.sidebar-shell.is-collapsed .nav-section-label,
.sidebar-shell.is-collapsed .sidebar-shell__nav-group {
  justify-content: center;
  min-height: 0;
  height: 0;
  margin: var(--tn-space-3) auto;
  padding: 0;
  border: none;
  position: relative;
}
.sidebar-shell.is-collapsed .nav-section-label::after,
.sidebar-shell.is-collapsed .sidebar-shell__nav-group::after {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: var(--tn-border-muted);
  border-radius: 1px;
}
.sidebar-shell.is-collapsed .nav-section-label span,
.sidebar-shell.is-collapsed .sidebar-shell__nav-group span {
  display: none;
}
.sidebar-shell.is-collapsed .sidebar-shell__group-count {
  display: none;
}
/* ── Nav items: centered icon + tooltip host ──────────────────────────── */
.sidebar-shell.is-collapsed .sidebar-nav-item,
.sidebar-shell.is-collapsed .sidebar-docs__nav-link,
.sidebar-shell.is-collapsed .sidebar-shell__nav-link {
  display: grid;
  place-items: center;
  min-height: 40px;
  min-width: 40px;
  padding: 0;
  margin: 0 auto;
  border: 1px solid transparent;
  border-radius: var(--tn-radius-md);
  position: relative;
  color: var(--tn-text-secondary);
  transition:
    background var(--tn-transition),
    color var(--tn-transition);
}
/* ── Hover state ───────────────────────────────────────────────────────── */
.sidebar-shell.is-collapsed .sidebar-nav-item:hover,
.sidebar-shell.is-collapsed .sidebar-docs__nav-link:hover,
.sidebar-shell.is-collapsed .sidebar-shell__nav-link:hover {
  background: var(--tn-surface-subtle);
  color: var(--tn-text-default);
}
.sidebar-shell.is-collapsed .sidebar-nav-item:focus-visible,
.sidebar-shell.is-collapsed .sidebar-docs__nav-link:focus-visible,
.sidebar-shell.is-collapsed .sidebar-shell__nav-link:focus-visible {
  background: var(--tn-surface-subtle);
  color: var(--tn-text-default);
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: -2px;
}
/* ── Active state: accent left bar + soft glow ────────────────────────── */
.sidebar-shell.is-collapsed .sidebar-nav-item.active,
.sidebar-shell.is-collapsed .sidebar-docs__nav-link--active,
.sidebar-shell.is-collapsed .sidebar-docs__nav-link.active,
.sidebar-shell.is-collapsed .sidebar-shell__nav-link--active,
.sidebar-shell.is-collapsed .sidebar-shell__nav-link.active {
  background: var(--tn-accent-primary-soft);
  border-color: rgb(var(--tn-color-pink-rgb) / 0.15);
  color: var(--tn-accent-primary-strong);
}
.sidebar-shell.is-collapsed .sidebar-nav-item.active::before,
.sidebar-shell.is-collapsed .sidebar-docs__nav-link--active::before,
.sidebar-shell.is-collapsed .sidebar-docs__nav-link.active::before,
.sidebar-shell.is-collapsed .sidebar-shell__nav-link--active::before,
.sidebar-shell.is-collapsed .sidebar-shell__nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--tn-accent-primary);
}
/* ── Icons in collapsed mode ──────────────────────────────────────────── */
.sidebar-shell.is-collapsed .nav-icon,
.sidebar-shell.is-collapsed .sidebar-shell__nav-link-icon {
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: currentColor;
  margin: 0;
}
/* Filled icon variant for active items */
.sidebar-shell.is-collapsed .sidebar-nav-item.active .nav-icon,
.sidebar-shell.is-collapsed .sidebar-docs__nav-link.active .sidebar-shell__nav-link-icon,
.sidebar-shell.is-collapsed .sidebar-shell__nav-link.active .sidebar-shell__nav-link-icon {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
/* ── CSS Tooltips ────────────────────────────────────────────────────────
   Uses data-tooltip attribute injected by sidebar-state.ts.
   Positioned to the right of the icon, revealed on hover/focus. */
.sidebar-shell.is-collapsed .sidebar-nav-item[data-tooltip]::after,
.sidebar-shell.is-collapsed .sidebar-docs__nav-link[data-tooltip]::after,
.sidebar-shell.is-collapsed .sidebar-shell__nav-link[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  padding: 5px 10px;
  background: var(--tn-surface-panel-strong);
  color: var(--tn-text-default);
  border: 1px solid var(--tn-border-default);
  border-radius: var(--tn-radius-md);
  font-size: var(--tn-font-size-xs);
  font-weight: 500;
  font-family: var(--tn-font-body);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 10000;
  box-shadow: var(--tn-shadow-floating);
  transition:
    opacity 120ms ease,
    transform 150ms ease;
  transition-delay: 180ms;
}
.sidebar-shell.is-collapsed .sidebar-nav-item[data-tooltip]:hover::after,
.sidebar-shell.is-collapsed .sidebar-nav-item[data-tooltip]:focus-visible::after,
.sidebar-shell.is-collapsed .sidebar-docs__nav-link[data-tooltip]:hover::after,
.sidebar-shell.is-collapsed .sidebar-docs__nav-link[data-tooltip]:focus-visible::after,
.sidebar-shell.is-collapsed .sidebar-shell__nav-link[data-tooltip]:hover::after,
.sidebar-shell.is-collapsed .sidebar-shell__nav-link[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.sidebar-rail-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10050;
  max-width: min(280px, calc(100vw - 24px));
  padding: 6px 10px;
  background: var(--tn-surface-panel-strong);
  border: 1px solid var(--tn-border-default);
  border-radius: var(--tn-radius-md);
  box-shadow: var(--tn-shadow-floating);
  color: var(--tn-text-default);
  font-family: var(--tn-font-body);
  font-size: var(--tn-font-size-xs);
  font-weight: 500;
  line-height: var(--tn-leading-heading);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(-4px);
  transition: opacity 120ms ease, transform 150ms ease;
  white-space: nowrap;
}
.sidebar-rail-tooltip[data-open="true"] {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
/* ── Footer: centered, compact ─────────────────────────────────────────── */
.sidebar-shell.is-collapsed .sidebar-footer {
  padding: var(--tn-space-2);
  border-top: 1px solid var(--tn-border-muted);
}
.sidebar-shell.is-collapsed .sidebar-footer__controls {
  justify-content: center;
  grid-template-columns: auto;
}
.sidebar-shell.is-collapsed .sidebar-user {
  justify-content: center;
}
.sidebar-shell.is-collapsed .sidebar-auth-cta__text {
  display: none;
}
.sidebar-shell.is-collapsed .sidebar-auth-cta {
  justify-content: center;
}
.sidebar-shell.is-collapsed .sidebar-auth-cta__btn {
  font-size: var(--tn-font-size-xs);
  padding: var(--tn-space-1) var(--tn-space-2);
}
/* Account menu inside sidebar — collapse to avatar-only */
.sidebar-shell.is-collapsed .account-menu--sidebar .account-menu__identity,
.sidebar-shell.is-collapsed .account-menu--sidebar .account-menu__chev {
  width: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.sidebar-shell.is-collapsed .account-menu--sidebar .account-menu__trigger {
  justify-content: center;
  padding: var(--tn-space-1);
  border: none;
  background: transparent;
}
.sidebar-shell.is-collapsed .account-menu--sidebar {
  justify-content: center;
}
/* ── Theme toggle in collapsed mode ────────────────────────────────────── */
.sidebar-shell.is-collapsed .sidebar-theme-toggle {
  justify-content: center;
  padding: 0;
  min-height: 36px;
  border-radius: var(--tn-radius-md);
}
.sidebar-shell.is-collapsed .sidebar-theme-toggle .material-symbols-outlined {
  font-size: 18px;
  margin: 0;
}
/* ── Micro mode (Dyad-style ultra-minimal rail) ──────────────────────────
   Only the collapse toggle and the user avatar remain visible so the rail
   stays out of the reader's way while keeping one affordance to return. */
.sidebar-shell.is-micro {
  width: var(--tn-shell-sidebar-micro);
  min-width: var(--tn-shell-sidebar-micro);
}
.sidebar-shell.is-micro .sidebar-search-wrap,
.sidebar-shell.is-micro .sidebar-shell__nav,
.sidebar-shell.is-micro .sidebar-footer__controls,
.sidebar-shell.is-micro .sidebar-brand {
  display: none;
}
.sidebar-shell.is-micro .sidebar-shell__top {
  padding: var(--tn-space-2);
  border-bottom: none;
}
.sidebar-shell.is-micro .sidebar-header {
  justify-content: center;
}
.sidebar-shell.is-micro .sidebar-footer {
  padding: var(--tn-space-2);
  border-top: 1px solid var(--tn-border-muted);
  background: transparent;
}
.sidebar-shell.is-micro .sidebar-user {
  justify-content: center;
  padding: 0;
}
.sidebar-shell.is-micro .account-menu--sidebar .account-menu__identity,
.sidebar-shell.is-micro .account-menu--sidebar .account-menu__chev {
  display: none;
}
.sidebar-shell.is-micro .account-menu--sidebar .account-menu__trigger {
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
}
.sidebar-shell.is-micro .account-menu--sidebar {
  justify-content: center;
}
/* ── Mobile / narrow viewport override ───────────────────────────────────
   On screens ≤ 1023 px the sidebar reverts to its expanded layout so
   the mobile overlay / slide-in behavior works correctly. */
@media (max-width: 1023px) {
  .sidebar-shell.is-collapsed,
  .sidebar-shell.is-micro {
    width: min(var(--tn-shell-sidebar-expanded), 86vw);
    min-width: min(var(--tn-shell-sidebar-expanded), 86vw);
  }

  .sidebar-shell.is-collapsed .brand-name,
  .sidebar-shell.is-collapsed .sidebar-command-trigger__label,
  .sidebar-shell.is-collapsed .sidebar-command-trigger kbd,
  .sidebar-shell.is-collapsed .nav-section-label span,
  .sidebar-shell.is-collapsed .nav-label,
  .sidebar-shell.is-collapsed .sidebar-docs__nav-link-label,
  .sidebar-shell.is-collapsed .sidebar-shell__nav-link-label,
  .sidebar-shell.is-collapsed .user-info,
  .sidebar-shell.is-collapsed .sidebar-user__chevron {
    width: auto;
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar-shell.is-collapsed .sidebar-brand,
  .sidebar-shell.is-micro .sidebar-search-wrap,
  .sidebar-shell.is-micro .sidebar-shell__nav,
  .sidebar-shell.is-micro .sidebar-footer__controls,
  .sidebar-shell.is-micro .sidebar-brand {
    display: flex;
  }

  .sidebar-shell.is-collapsed .sidebar-command-trigger {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .sidebar-shell.is-collapsed .sidebar-command-trigger,
  .sidebar-shell.is-collapsed .sidebar-nav-item,
  .sidebar-shell.is-collapsed .sidebar-docs__nav-link,
  .sidebar-shell.is-collapsed .sidebar-shell__nav-link {
    justify-content: flex-start;
    padding-right: var(--tn-space-2);
    padding-left: var(--tn-space-2);
  }

  .sidebar-shell.is-collapsed .nav-section-label,
  .sidebar-shell.is-collapsed .sidebar-shell__nav-group {
    min-height: var(--tn-space-8);
    margin: var(--tn-space-3) var(--tn-space-1) var(--tn-space-1);
    height: auto;
  }

  /* Remove divider line on mobile */
  .sidebar-shell.is-collapsed .nav-section-label::after,
  .sidebar-shell.is-collapsed .sidebar-shell__nav-group::after {
    display: none;
  }

  /* Hide tooltips on mobile */
  .sidebar-shell.is-collapsed .sidebar-nav-item[data-tooltip]::after,
  .sidebar-shell.is-collapsed .sidebar-docs__nav-link[data-tooltip]::after,
  .sidebar-shell.is-collapsed .sidebar-shell__nav-link[data-tooltip]::after {
    display: none;
  }
}
/* Mobile sidebar overlay is handled by mobile-nav.css.
   The sidebar transitions to position: fixed + translateX(-100%) at ≤ 1023 px
   and slides in via .is-mobile-open instead of being hidden entirely. */
/**
 * mobile-nav — slide-in drawer for primary navigation on narrow viewports.
 *
 * Triggered by the hamburger button in .app-header. Contains the primary
 * nav links that are hidden from the header on mobile, plus search and
 * auth CTA / account info.
 *
 * On pages that also have a sidebar (tool/docs/user), the sidebar itself
 * becomes a fixed overlay at ≤1023px (see sidebar-mobile-overlay section
 * at the bottom) — the mobile-nav drawer handles the primary header
 * links that the sidebar does NOT contain.
 */
/* ─── Drawer + backdrop ──────────────────────────────────────────── */
.mobile-nav {
    display: none;
}
@media (max-width: 1023px) {
    .mobile-nav {
        display: contents;
    }

    .mobile-nav__backdrop {
        position: fixed;
        inset: 0;
        z-index: 9990;
        background: rgb(0 0 0 / 0.4);
        opacity: 0;
        visibility: hidden;
        transition: opacity 200ms ease, visibility 200ms ease;
    }

    .mobile-nav.is-open .mobile-nav__backdrop {
        opacity: 1;
        visibility: visible;
    }

    .mobile-nav__panel {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 9991;
        width: min(300px, 85vw);
        display: flex;
        flex-direction: column;
        background: var(--tn-surface-panel);
        border-right: 1px solid var(--tn-border-default);
        box-shadow: var(--tn-shadow-lg);
        transform: translateX(-100%);
        transition: transform 250ms cubic-bezier(0.32, 0.72, 0, 1);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .mobile-nav.is-open .mobile-nav__panel {
        transform: translateX(0);
    }

    /* ─── Header row ─────────────────────────────────────────── */

    .mobile-nav__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--tn-border-default);
        flex-shrink: 0;
    }

    .mobile-nav__brand {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none;
        color: var(--tn-text-default);
    }

    .mobile-nav__brand-mark {
        width: 24px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .mobile-nav__brand-mark img {
        width: 24px;
        height: 24px;
        display: block;
    }

    .mobile-nav__brand-name {
        font-size: 0.875rem;
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    .mobile-nav__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: 1px solid transparent;
        border-radius: 6px;
        background: transparent;
        color: var(--tn-text-muted);
        cursor: pointer;
        flex-shrink: 0;
        transition: background-color 120ms ease, color 120ms ease;
    }
    .mobile-nav__close:hover {
        color: var(--tn-text-default);
        background: var(--tn-surface-inset);
    }
    .mobile-nav__close:focus-visible {
        outline: 2px solid var(--tn-accent-primary);
        outline-offset: 2px;
    }
    .mobile-nav__close .material-symbols-outlined { font-size: 20px; }

    /* ─── Search trigger ─────────────────────────────────────── */

    .mobile-nav__search {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0.75rem 1rem 0;
        padding: 0 0.75rem;
        height: 40px;
        background: var(--tn-surface-inset);
        border: 1px solid var(--tn-border-default);
        border-radius: 8px;
        color: var(--tn-text-muted);
        font-size: 0.85rem;
        cursor: pointer;
        font-family: inherit;
        transition: border-color 120ms ease;
        flex-shrink: 0;
    }
    .mobile-nav__search:hover {
        border-color: var(--tn-border-strong);
    }
    .mobile-nav__search:focus-visible {
        outline: 2px solid var(--tn-accent-primary);
        outline-offset: 2px;
    }
    .mobile-nav__search .material-symbols-outlined { font-size: 18px; }

    /* ─── Nav links ──────────────────────────────────────────── */

    .mobile-nav__links {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0.75rem;
        flex: 1;
    }

    .mobile-nav__link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        height: 44px;
        padding: 0 0.75rem;
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--tn-text-secondary);
        text-decoration: none;
        transition: background-color 120ms ease, color 120ms ease;
    }
    .mobile-nav__link:hover {
        color: var(--tn-text-default);
        background: var(--tn-surface-inset);
    }
    .mobile-nav__link:focus-visible {
        outline: 2px solid var(--tn-accent-primary);
        outline-offset: -2px;
    }
    .mobile-nav__link.is-active {
        color: var(--tn-text-default);
        background: var(--tn-surface-inset);
        font-weight: 600;
    }
    .mobile-nav__link .material-symbols-outlined {
        font-size: 20px;
        color: var(--tn-text-muted);
    }
    .mobile-nav__link.is-active .material-symbols-outlined {
        color: var(--tn-accent-primary);
    }

    /* ─── Divider ────────────────────────────────────────────── */

    .mobile-nav__divider {
        height: 1px;
        margin: 0.25rem 0.75rem;
        background: var(--tn-border-default);
    }

    /* ─── Auth section (footer) ──────────────────────────────── */

    .mobile-nav__auth {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        margin-top: auto;
        border-top: 1px solid var(--tn-border-default);
        flex-shrink: 0;
    }

    .mobile-nav__auth-primary {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        border-radius: 8px;
        font-size: 0.85rem;
        font-weight: 600;
        text-decoration: none;
        transition: opacity 120ms ease;
    }
    .mobile-nav__auth-primary--login {
        background: var(--tn-accent-primary);
        color: var(--tn-color-paper);
    }
    .mobile-nav__auth-primary--login:hover { opacity: 0.9; }
    .mobile-nav__auth-primary--register {
        background: var(--tn-surface-inset);
        color: var(--tn-text-default);
        border: 1px solid var(--tn-border-default);
    }
    .mobile-nav__auth-primary--register:hover {
        background: var(--tn-surface-panel);
    }

    /* ─── Account info (when logged in) ─────────────────────── */

    .mobile-nav__account {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.5rem 0.75rem;
        border-radius: 8px;
        text-decoration: none;
        color: var(--tn-text-default);
        transition: background-color 120ms ease;
    }
    .mobile-nav__account:hover {
        background: var(--tn-surface-inset);
    }

    .mobile-nav__account-avatar {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: var(--tn-accent-primary);
        color: var(--tn-color-paper);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        font-weight: 700;
        flex-shrink: 0;
    }

    .mobile-nav__account-info {
        display: grid;
        min-width: 0;
    }
    .mobile-nav__account-name {
        font-size: 0.85rem;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mobile-nav__account-email {
        font-size: 0.75rem;
        color: var(--tn-text-muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ─── Body scroll lock when drawer is open ───────────────── */

    body.mobile-nav-open {
        overflow: hidden;
    }
}
/* Desktop: ensure mobile nav is completely hidden */
@media (min-width: 1024px) {
    .mobile-nav {
        display: none !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .mobile-nav__backdrop,
    .mobile-nav__panel {
        transition: none;
    }
}
/* ==========================================================================
   SIDEBAR MOBILE OVERLAY
   At ≤1023px the sidebar switches from sticky column to a fixed overlay
   that slides in from the left, triggered by the header hamburger.
   ========================================================================== */
@media (max-width: 1023px) {
    /* Override the sidebar-collapse.css `display: none` rule */
    .sidebar-shell {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 9991;
        width: min(var(--tn-shell-sidebar-expanded), 86vw);
        min-width: min(var(--tn-shell-sidebar-expanded), 86vw);
        transform: translateX(-100%);
        transition: transform 250ms cubic-bezier(0.32, 0.72, 0, 1);
        box-shadow: none;
    }

    .sidebar-shell.is-mobile-open {
        transform: translateX(0);
        box-shadow: var(--tn-shadow-lg);
    }

    /* Backdrop for sidebar overlay */
    .sidebar-mobile-backdrop {
        position: fixed;
        inset: 0;
        z-index: 9990;
        background: rgb(0 0 0 / 0.4);
        opacity: 0;
        visibility: hidden;
        transition: opacity 200ms ease, visibility 200ms ease;
    }

    .sidebar-mobile-backdrop.is-visible {
        opacity: 1;
        visibility: visible;
    }
}
@media (min-width: 1024px) {
    .sidebar-mobile-backdrop {
        display: none;
    }
}
:root {
  --tn-page-max-width: 1220px;
  --tn-page-wide-width: 1320px;
  --text-muted: var(--tn-text-soft);
  --code-purple: #8250df;
  --code-blue: #0969da;
  --code-green: #1a7f37;
  --tn-public-ink: var(--tn-text-default);
  --tn-public-muted: var(--tn-text-muted);
  --tn-public-line: var(--tn-border-default);
  --tn-public-accent: var(--tn-accent-primary);
  --tn-public-accent-strong: var(--tn-accent-primary-strong);
}
.tn-shell__body > .home-page,
.tn-shell__body > .tools-directory {
  width: 100%;
}
.home-page,
.tools-directory {
  color: var(--tn-text-default);
}
.home-inner,
.directory-shell {
  width: min(100%, var(--tn-page-max-width));
  margin: 0 auto;
}
.section-title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--tn-text-default);
}
.section-subtitle {
  margin: 0;
  max-width: 720px;
  color: var(--tn-text-muted);
  font-size: 16px;
  line-height: 1.7;
}
.directory-guide__body,
.directory-results__context,
.directory-hero__subtitle {
  margin: 0;
  color: var(--tn-text-muted);
  font-size: 16px;
  line-height: 1.7;
}
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  padding: 0 6px;
  border: 1px solid var(--tn-border-default);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--tn-surface-canvas);
  color: var(--tn-text-muted);
  font-family: var(--tn-font-mono);
  font-size: 11px;
  line-height: 1;
  box-shadow: var(--tn-shadow-sm);
}
.home-hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 28px;
}
.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(9, 105, 218, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(246, 248, 250, 0.86), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.home-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 40px;
  align-items: start;
}
.home-hero__copy {
  display: grid;
  gap: 24px;
}
.tool-section__eyebrow {
  margin: 0;
  color: var(--tn-text-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.home-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--tn-border-muted) 88%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tn-surface-canvas) 88%, transparent);
  box-shadow: var(--tn-shadow-sm);
}
.home-hero__title {
  margin: 0;
  max-width: 14ch;
  font-family: var(--tn-font-headline);
  font-size: clamp(42px, 5.8vw, 68px);
  line-height: 0.97;
  letter-spacing: -0.06em;
}
.home-hero__sub {
  margin: 0;
  max-width: 60ch;
  color: var(--tn-text-muted);
  font-size: 17px;
  line-height: 1.75;
}
.home-hero__lanes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-hero__lane {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--tn-border-muted) 88%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tn-surface-canvas) 90%, transparent);
  color: var(--tn-text-default);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.home-hero__signal-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-hero__signal {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--tn-border-muted) 88%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--tn-surface-canvas) 90%, transparent);
}
.home-hero__signal-value {
  font-family: var(--tn-font-headline);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1;
  letter-spacing: -0.05em;
}
.home-hero__signal-label {
  color: var(--tn-text-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.home-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.home-hero__cta-primary,
.home-cta-band__btn,
.directory-submit,
.directory-link-button,
.home-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--tn-accent-primary-strong);
  color: #fff;
  font-weight: 700;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.home-hero__cta-primary:hover,
.home-cta-band__btn:hover,
.directory-submit:hover,
.directory-link-button:hover,
.home-search-submit:hover {
  transform: translateY(-1px);
  box-shadow: var(--tn-shadow-md);
}
.home-hero__cta-primary:focus-visible,
.home-hero__cta-ghost:focus-visible,
.home-search-link:focus-visible,
.home-search-submit:focus-visible,
.home-search-chip:focus-visible,
.tool-directory-clear:focus-visible,
.directory-submit:focus-visible,
.directory-link-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--tn-accent-primary) 68%, transparent);
  outline-offset: 4px;
}
.home-hero__cta-ghost,
.home-search-link,
.directory-search__link,
.directory-clear,
.tool-directory-clear {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--tn-border-default);
  border-radius: 14px;
  background: transparent;
  color: var(--tn-text-default);
  font-weight: 600;
}
.home-hero__support-note {
  margin: 0;
  max-width: 60ch;
  color: var(--tn-text-soft);
  font-size: 14px;
  line-height: 1.7;
}
.home-hero__search {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--tn-border-default);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tn-surface-canvas) 90%, transparent), color-mix(in srgb, var(--tn-surface-subtle) 78%, transparent));
  box-shadow: var(--tn-shadow-sm);
}
.tool-directory-search {
  display: grid;
  gap: 16px;
}
.home-search-panel__intro {
  display: grid;
  gap: 8px;
}
.home-search-shell,
.directory-search__shell {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 0 56px 0 46px;
  border: 1px solid var(--tn-border-default);
  border-radius: 14px;
  background: var(--tn-surface-canvas);
}
.home-search-shell:focus-within,
.directory-search__shell:focus-within {
  border-color: var(--tn-accent-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tn-accent-primary) 16%, transparent);
}
.home-search-shell__icon,
.directory-search__icon {
  position: absolute;
  left: 18px;
  color: var(--tn-text-soft);
}
.home-search-input,
.directory-search__input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--tn-text-default);
  font-size: 15px;
}
.home-search-input::placeholder,
.directory-search__input::placeholder {
  color: var(--tn-text-soft);
}
.home-search-kbd,
.directory-search__kbd {
  position: absolute;
  right: 14px;
}
.home-search-meta,
.directory-search__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.home-search-tip,
.directory-search__tip {
  margin: 0;
  color: var(--tn-text-soft);
  font-size: 13px;
}
.home-search-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.home-search-shortcuts-block {
  display: grid;
  gap: 10px;
}
.home-search-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--tn-border-default) 92%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tn-surface-canvas) 88%, transparent);
  color: var(--tn-text-default);
  font-size: 13px;
  font-weight: 600;
  transition: transform 0.16s ease, border-color 0.16s ease;
}
.home-search-chip:hover {
  transform: translateY(-1px);
  border-color: var(--tn-accent-primary);
}
.home-search-filter-note {
  margin: 0;
  color: var(--tn-text-soft);
  font-size: 13px;
  line-height: 1.7;
}
.home-search-disclosure {
  align-self: flex-start;
}
.home-search-disclosure__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--tn-border-default) 92%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tn-surface-canvas) 88%, transparent);
  color: var(--tn-text-default);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: transform 0.16s ease, border-color 0.16s ease;
}
.home-search-disclosure__trigger::-webkit-details-marker { display: none; }
.home-search-disclosure__trigger::marker { content: ""; }
.home-search-disclosure__trigger:hover {
  transform: translateY(-1px);
  border-color: var(--tn-accent-primary);
}
.home-search-disclosure__trigger:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.home-search-disclosure__icon,
.home-search-disclosure__chevron {
  font-size: 18px;
  line-height: 1;
}
/* Filter count chip inside the disclosure trigger. Surfaces "(N)"
   so users on small viewports know how many filters live behind
   the button before tapping. */
.home-search-disclosure__count {
  font-size: 12px;
  font-weight: 700;
  color: var(--tn-accent-primary);
  line-height: 1;
}
.home-search-disclosure__chevron {
  transition: transform 0.16s ease;
}
.home-search-disclosure[open] > .home-search-disclosure__trigger .home-search-disclosure__chevron {
  transform: rotate(180deg);
}
.home-search-disclosure__panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
}
/* Mobile: full-width disclosure trigger keeps the filters single-tap
   reachable on narrow viewports without occupying scroll real-estate. */
@media (max-width: 640px) {
  .home-search-disclosure {
    align-self: stretch;
  }

  .home-search-disclosure__trigger {
    width: 100%;
    justify-content: center;
  }
}
.tool-directory-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}
.home-hero__search .tool-directory-toolbar {
  padding-top: 12px;
  border-top: 1px solid var(--tn-border-muted);
}
.tool-directory-control {
  display: grid;
  gap: 8px;
  min-width: 180px;
  flex: 1 1 180px;
}
.tool-directory-control > span {
  color: var(--tn-text-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tool-directory-control select {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--tn-border-default);
  border-radius: 12px;
  background: var(--tn-surface-canvas);
  color: var(--tn-text-default);
}
.tool-directory-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--tn-border-default);
  border-radius: 12px;
  background: var(--tn-surface-canvas);
  color: var(--tn-text-default);
  font-weight: 600;
}
.tool-directory-status {
  display: grid;
  gap: 10px;
  padding-top: 8px;
}
.tool-directory-status__count,
.directory-results__count {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.04;
  letter-spacing: -0.05em;
}
.tool-directory-active,
.directory-results__active,
.directory-empty__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tool-directory-active__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid var(--tn-border-default);
  border-radius: 0;
  background: transparent;
  color: var(--tn-text-default);
  font-size: 13px;
  font-weight: 600;
}
.home-hero__surface {
  display: grid;
  gap: 16px;
  align-content: start;
}
.home-hero__surface-card {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--tn-border-muted) 88%, transparent);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(9, 105, 218, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 248, 250, 0.88));
  box-shadow: var(--tn-shadow-sm);
}
.home-hero__surface-header,
.home-section-heading {
  display: grid;
  gap: 10px;
}
.home-section-heading {
  margin-bottom: 28px;
}
.home-section-heading--compact {
  margin-bottom: 22px;
}
.home-hero__surface-title {
  margin: 0;
  color: var(--tn-text-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.home-hero__surface-copy {
  margin: 0;
  color: var(--tn-text-muted);
  font-size: 15px;
  line-height: 1.7;
}
.home-hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
  margin: 0;
}
.home-hero__fact {
  display: grid;
  gap: 4px;
}
.home-hero__fact dt {
  color: var(--tn-text-soft);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.home-hero__fact dd {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.02;
  letter-spacing: -0.05em;
}
.home-hero__principles {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-hero__principles li {
  padding-top: 12px;
  border-top: 1px solid var(--tn-border-muted);
  color: var(--tn-text-muted);
  line-height: 1.65;
}
.home-hero__routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}
.home-hero__routes a {
  padding: 12px 0;
  border-top: 1px solid var(--tn-border-muted);
  color: var(--tn-text-default);
  font-weight: 600;
}
.home-workflow-item:focus-visible,
.home-category-hub__link:focus-visible,
.tool-card:focus-visible,
.home-section-nav a:focus-visible,
.home-hero__routes a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--tn-accent-primary) 68%, transparent);
  outline-offset: 4px;
}
.home-proof-band {
  border-block: 1px solid var(--tn-border-muted);
  background: linear-gradient(180deg, rgba(246, 248, 250, 0.68), rgba(255, 255, 255, 0));
}
.home-proof-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 18px 0 20px;
}
.home-proof-strip__stat {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--tn-border-muted) 88%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--tn-surface-canvas) 84%, transparent);
  color: var(--tn-text-muted);
  font-size: 13px;
  line-height: 1.5;
}
.home-proof-strip__stat strong {
  color: var(--tn-text-default);
  font-family: var(--tn-font-headline);
  font-size: 20px;
  letter-spacing: -0.04em;
}
.home-proof-strip__stat span {
  max-width: 24ch;
}
.home-workflows,
.home-category-nav,
.home-tool-section,
.home-steps-section,
.home-cta-band,
.home-faq-section,
.directory-results,
.directory-guide {
  padding: 56px 0;
  border-top: 1px solid var(--tn-border-muted);
}
.home-section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding: 18px 0 14px;
}
.home-section-nav__label {
  color: var(--tn-text-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.home-section-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--tn-border-default);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tn-surface-canvas) 88%, transparent);
  color: var(--tn-text-default);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.home-section-nav a:hover {
  color: var(--tn-accent-primary);
  border-color: var(--tn-accent-primary);
}
.home-workflow-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
}
.home-workflow-item {
  display: grid;
  gap: 10px;
  padding: 20px 0 18px;
  border-top: 1px solid var(--tn-border-muted);
  transition: color 0.16s ease, transform 0.16s ease;
}
.home-workflow-item:hover {
  transform: translateX(4px);
}
.home-workflow-item:hover .home-workflow-item__title,
.home-hero__routes a:hover {
  color: var(--tn-accent-primary);
}
.home-workflow-item__meta {
  color: var(--tn-text-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.home-workflow-item__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: clamp(24px, 2.8vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.home-workflow-item__body {
  margin: 0;
  color: var(--tn-text-muted);
  font-size: 15px;
  line-height: 1.7;
}
.home-workflow-item__link {
  color: var(--tn-accent-primary);
  font-size: 14px;
  font-weight: 700;
}
.home-category-hub__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.home-category-hub__link {
  display: grid;
  gap: 12px;
  min-height: 0;
  padding: 22px;
  border: 1px solid var(--tn-border-muted);
  border-radius: 16px;
  background: transparent;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.home-category-hub__link:hover {
  transform: translateY(-1px);
  border-color: var(--tn-accent-primary);
  background: color-mix(in srgb, var(--tn-surface-subtle) 74%, transparent);
}
.home-category-hub__name {
  font-family: var(--tn-font-headline);
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.home-category-hub__meta {
  color: var(--tn-text-soft);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.home-category-hub__summary {
  color: var(--tn-text-muted);
  font-size: 15px;
  line-height: 1.7;
}
.tool-section__header,
.directory-results__header,
.directory-guide__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-end;
  margin-bottom: 24px;
}
.tool-section__header-text,
.directory-results__summary,
.directory-guide__copy {
  display: grid;
  gap: 8px;
}
.tool-section__count {
  color: var(--tn-text-soft);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.tool-card {
  display: grid;
  gap: 16px;
  min-height: 0;
  padding: 22px;
  border: 1px solid var(--tn-border-muted);
  border-radius: 16px;
  background: color-mix(in srgb, var(--tn-surface-canvas) 92%, transparent);
  box-shadow: var(--tn-shadow-subtle);
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.tool-card:hover {
  transform: translateY(-1px);
  border-color: var(--tn-accent-primary);
  background: color-mix(in srgb, var(--tn-surface-subtle) 70%, var(--tn-surface-canvas));
  box-shadow: var(--tn-shadow-card);
}
.tool-card__topline,
.tool-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  align-items: start;
}
.tool-card__signals,
.tool-card__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.tool-card__category,
.tool-card__tag,
.tool-card__badge {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tool-card__category {
  color: var(--tn-text-soft);
}
.tool-card__tag {
  color: var(--tn-text-muted);
}
.tool-card__badge {
  color: var(--tn-success);
}
.tool-card__badge--server {
  color: var(--tn-color-warning);
}
.tool-card__badge--access {
  color: var(--tn-color-purple);
}
.tool-card__body {
  display: grid;
  gap: 8px;
}
.tool-card__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: 24px;
  line-height: 1.06;
  letter-spacing: -0.04em;
}
.tool-card__description {
  margin: 0;
  color: var(--tn-text-muted);
  font-size: 14px;
  line-height: 1.68;
}
.tool-card__meta {
  margin-top: auto;
  gap: 12px 18px;
  padding-top: 14px;
  border-top: 1px solid var(--tn-border-muted);
}
.tool-card__meta-item {
  display: grid;
  gap: 3px;
  color: var(--tn-text-soft);
  font-size: 11px;
}
.tool-card__meta-item strong {
  color: var(--tn-text-default);
  font-size: 12px;
}
.tool-card__launch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: var(--tn-accent-primary);
  font-size: 12px;
  font-weight: 700;
}
.tool-directory-empty,
.directory-empty {
  display: grid;
  gap: 16px;
  padding: 28px;
  border: 1px dashed var(--tn-border-default);
  border-radius: 22px;
  background: color-mix(in srgb, var(--tn-surface-subtle) 74%, transparent);
}
.tool-directory-empty__title,
.directory-empty__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: 26px;
  line-height: 1.06;
  letter-spacing: -0.04em;
}
.tool-directory-empty__body,
.directory-empty__body,
.tool-directory-empty__query {
  margin: 0;
  color: var(--tn-text-muted);
}
.tool-directory-empty__actions,
.directory-empty__actions,
.directory-controls__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.home-steps {
  display: grid;
  gap: 18px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.home-operate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 42px;
}
.home-operate-block {
  display: grid;
  gap: 22px;
}
.home-step {
  display: grid;
  gap: 8px;
  align-content: start;
  padding-top: 18px;
  border-top: 1px solid var(--tn-border-muted);
}
.home-step__num {
  color: var(--tn-text-soft);
  font-family: var(--tn-font-headline);
  font-size: clamp(32px, 4vw, 42px);
  line-height: 1;
  letter-spacing: -0.05em;
}
.home-step__label {
  font-size: 18px;
  font-weight: 700;
}
.home-step p {
  margin: 0;
  color: var(--tn-text-muted);
  font-size: 14px;
  line-height: 1.7;
}
.home-kbd-grid {
  display: grid;
  gap: 0;
  margin: 0;
}
.home-kbd-row {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 16px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--tn-border-muted);
}
.home-kbd-row dt,
.home-kbd-row dd {
  margin: 0;
}
.home-kbd-row dd {
  color: var(--tn-text-muted);
  line-height: 1.65;
}
.seo-faq-item {
  border-bottom: 1px solid var(--tn-border-muted);
}
.seo-faq-item summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  list-style: none;
  font-size: 17px;
  font-weight: 600;
}
.seo-faq-item summary::-webkit-details-marker {
  display: none;
}
.seo-faq-item summary::after {
  content: '+';
  color: var(--tn-text-soft);
  font-size: 22px;
  line-height: 1;
}
.seo-faq-item[open] summary::after {
  content: '−';
}
.seo-faq-item p {
  margin: 0 0 20px;
  color: var(--tn-text-muted);
  line-height: 1.7;
}
.home-cta-band {
  padding-bottom: 40px;
}
.home-cta-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
}
.home-cta-band__copy {
  display: grid;
  gap: 12px;
}
.home-cta-band__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-cta-band__list li {
  padding-top: 10px;
  border-top: 1px solid var(--tn-border-muted);
  color: var(--tn-text-muted);
  line-height: 1.65;
}
.home-cta-band__title {
  margin: 0;
  font-family: var(--tn-font-headline);
  font-size: clamp(28px, 3.5vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.05em;
}
.home-cta-band__sub {
  margin: 0;
  max-width: 60ch;
  color: var(--tn-text-muted);
  font-size: 15px;
  line-height: 1.7;
}
.home-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.directory-hero {
  padding: 48px 0 28px;
}
.directory-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--tn-text-soft);
  font-size: 13px;
}
.directory-hero__inner {
  display: grid;
  gap: 26px;
  padding: 28px;
  border: 1px solid var(--tn-border-default);
  border-radius: 28px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tn-surface-canvas) 90%, transparent), color-mix(in srgb, var(--tn-surface-subtle) 76%, transparent));
  box-shadow: var(--tn-shadow-sm);
}
.directory-hero__title {
  margin: 0;
  max-width: 15ch;
  font-family: var(--tn-font-headline);
  font-size: clamp(34px, 5vw, 54px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}
.directory-browse {
  display: grid;
  gap: 18px;
}
.directory-browse__group {
  display: grid;
  gap: 12px;
}
.directory-facets__label {
  margin: 0;
  color: var(--tn-text-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Explore-strip chip rows stay as wrapping clouds. */
.directory-chip-row,
.directory-link-strip,
.directory-category-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.directory-chip-link strong,
.directory-link-strip__item strong {
  color: var(--tn-text-default);
  font-size: 11px;
}
/* ── Filter rail: one unified faceted list (categories + type/action) ──
   Categories are single-select nav links; type/action are multi-select
   checkboxes. Both render as identical full-width rows so the rail reads
   as one component; the custom check-box on type/action is the only
   visual cue that those are multi-select + batched behind Apply. */
.directory-facets__rail,
.directory-facetgroup__options {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
}
.directory-facet-chip,
.directory-facetgroup__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 7px 2px;
  border: 0;
  border-bottom: 1px solid var(--tn-border-muted);
  border-radius: 0;
  background: transparent;
  color: var(--tn-text-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, padding-left 0.15s ease;
}
.directory-facets__rail > .directory-facet-chip:last-child,
.directory-facetgroup__options > .directory-facetgroup__option:last-child {
  border-bottom: 0;
}
.directory-facet-chip:hover,
.directory-facetgroup__option:hover {
  color: var(--tn-text-default);
  background: transparent;
  transform: none;
  padding-left: 6px;
}
.directory-facet-chip > span:first-child,
.directory-facetgroup__label {
  flex: 1;
  min-width: 0;
}
.directory-facet-chip strong,
.directory-facetgroup__count {
  margin-left: auto;
  color: var(--tn-text-soft);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.directory-facet-chip.is-active {
  color: var(--tn-accent-primary-strong);
  font-weight: 700;
  background: transparent;
  border-bottom: 1px solid var(--tn-accent-primary);
}
.directory-facet-chip.is-active strong {
  color: var(--tn-accent-primary-strong);
}
/* Custom check indicator for the multi-select type/action rows. */
.directory-facetgroup__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.directory-facetgroup__option::before {
  content: "";
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--tn-border-default);
  border-radius: 5px;
  background: var(--tn-surface-canvas);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.directory-facetgroup__option:has(input:checked) {
  color: var(--tn-text-default);
  font-weight: 600;
  background: transparent;
}
.directory-facetgroup__option:has(input:checked)::before {
  border-color: var(--tn-accent-primary);
  background: var(--tn-accent-primary) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2012'%3E%3Cpath%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M2.5%206.2l2.4%202.4%204.6-5.2'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.directory-facetgroup__option:focus-within {
  outline: none;
}
.directory-facetgroup__option:has(input:focus-visible)::before {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
}
.directory-facetgroup__option.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.directory-results__header {
  align-items: flex-start;
}
.directory-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.directory-pagination__pages {
  display: flex;
  gap: 10px;
}
.directory-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--tn-border-default);
  border-radius: 12px;
  background: var(--tn-surface-canvas);
  font-weight: 600;
}
.directory-pagination__link.is-current {
  border-color: var(--tn-accent-primary);
  background: var(--tn-accent-primary-soft);
  color: var(--tn-accent-primary);
}
.directory-guide__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.directory-guide__step {
  display: grid;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--tn-border-default);
  border-radius: 20px;
  background: var(--tn-surface-canvas);
}
.directory-guide__step strong {
  font-size: 16px;
}
.directory-guide__step p {
  margin: 0;
  color: var(--tn-text-muted);
  font-size: 14px;
  line-height: 1.65;
}
.tn-footer {
  margin-top: 32px;
}
@media (max-width: 1280px) {
  .home-proof-strip,
  .directory-guide__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1024px) {
  .home-hero__grid,
  .home-operate-grid,
  .home-workflow-list {
    grid-template-columns: 1fr;
  }

  .home-hero__surface {
    padding-top: 0;
  }

  .tn-shell__body {
    padding: 24px;
  }
}
@media (max-width: 768px) {
  .home-hero,
  .home-workflows,
  .home-category-nav,
  .home-tool-section,
  .home-steps-section,
  .home-cta-band,
  .home-faq-section,
  .directory-hero,
  .directory-results,
  .directory-guide {
    padding: 36px 0;
  }

  .tool-grid,
  .home-category-hub__list,
  .home-proof-strip,
  .home-hero__facts,
  .home-hero__routes,
  .directory-guide__steps {
    grid-template-columns: 1fr;
  }

  .directory-hero__inner,
  .home-hero__search,
  .home-hero__surface-card,
  .tool-card,
  .directory-empty,
  .tool-directory-empty {
    padding: 20px;
  }

  .tool-card__meta-item--hide-xs {
    display: none;
  }

  .home-kbd-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .home-section-nav {
    gap: 10px;
  }

  .home-section-nav__label {
    width: 100%;
  }

  .home-cta-band__inner {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .tn-shell__body {
    padding: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card,
  .home-category-hub__link,
  .home-workflow-item,
  .home-hero__cta-primary,
  .home-cta-band__btn,
  .directory-submit,
  .home-search-submit {
    transition: none;
    transform: none;
  }
}
body[data-user-end-vnext="true"] .docs-shell {
  width: min(100%, var(--tn-page-wide-width));
  margin: 0 auto;
  padding: 32px 0 48px;
  display: grid;
  gap: 20px;
}
body[data-user-end-vnext="true"] .docs-mobile-toggle,
body[data-user-end-vnext="true"] .docs-sidebar__inner,
body[data-user-end-vnext="true"] .docs-content,
body[data-user-end-vnext="true"] .docs-outline,
body[data-user-end-vnext="true"] .docs-search,
body[data-user-end-vnext="true"] .docs-article,
body[data-user-end-vnext="true"] .static-page .sp-header,
body[data-user-end-vnext="true"] .static-page .sp-section,
body[data-user-end-vnext="true"] .static-page .sp-callout,
body[data-user-end-vnext="true"] .timeline-column,
body[data-user-end-vnext="true"] .feedback-hero__inner,
body[data-user-end-vnext="true"] .feedback-panel,
body[data-user-end-vnext="true"] .feedback-guide-card,
body[data-user-end-vnext="true"] .feedback-sidebar__card {
  border: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
  border-radius: 32px;
  background:
    radial-gradient(circle at top right, rgba(9, 105, 218, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 248, 250, 0.92) 100%);
  box-shadow: 0 22px 54px rgba(15, 23, 42, 0.08);
}
body[data-user-end-vnext="true"] .docs-mobile-toggle,
body[data-user-end-vnext="true"] .docs-sidebar__inner,
body[data-user-end-vnext="true"] .docs-content,
body[data-user-end-vnext="true"] .docs-article,
body[data-user-end-vnext="true"] .static-page .sp-header,
body[data-user-end-vnext="true"] .static-page .sp-section,
body[data-user-end-vnext="true"] .static-page .sp-callout,
body[data-user-end-vnext="true"] .timeline-column,
body[data-user-end-vnext="true"] .feedback-hero__inner,
body[data-user-end-vnext="true"] .feedback-panel,
body[data-user-end-vnext="true"] .feedback-guide-card,
body[data-user-end-vnext="true"] .feedback-sidebar__card {
  padding: 28px;
}
body[data-user-end-vnext="true"] .docs-mobile-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  width: fit-content;
  color: var(--tn-public-ink);
  font-size: 14px;
  font-weight: 700;
  background: var(--tn-surface-canvas);
}
body[data-user-end-vnext="true"] .docs-sidebar__inner {
  display: grid;
  gap: 16px;
}
body[data-user-end-vnext="true"] .docs-sidebar__brand,
body[data-user-end-vnext="true"] .feedback-secondary-btn,
body[data-user-end-vnext="true"] .feedback-link-btn,
body[data-user-end-vnext="true"] .sp-pill,
body[data-user-end-vnext="true"] .timeline-tag,
body[data-user-end-vnext="true"] .timeline-status,
body[data-user-end-vnext="true"] .timeline-vote {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--tn-public-ink);
  font-size: 12px;
  font-weight: 700;
}
body[data-user-end-vnext="true"] .docs-sidebar__brand {
  width: fit-content;
  margin-bottom: 0;
  text-decoration: none;
}
body[data-user-end-vnext="true"] .docs-sidebar__overview {
  display: grid;
  gap: 8px;
}
body[data-user-end-vnext="true"] .docs-sidebar__summary {
  margin: 0;
  color: var(--tn-public-muted);
  line-height: 1.7;
}
body[data-user-end-vnext="true"] .feedback-secondary-btn,
body[data-user-end-vnext="true"] .feedback-link-btn {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
  border-radius: 12px;
  background: transparent;
  font-size: 13px;
}
body[data-user-end-vnext="true"] .docs-sidebar__brand-icon,
body[data-user-end-vnext="true"] .sp-list__icon {
  color: var(--tn-public-accent);
}
body[data-user-end-vnext="true"] .docs-search {
  margin-top: 0;
  padding: 0;
  overflow: hidden;
}
body[data-user-end-vnext="true"] .docs-search__wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 16px 42px;
  border-bottom: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
}
body[data-user-end-vnext="true"] .docs-search__icon {
  position: absolute;
  left: 16px;
  color: var(--tn-public-muted);
}
body[data-user-end-vnext="true"] .docs-search__input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--tn-public-ink);
}
body[data-user-end-vnext="true"] .docs-search__hint {
  margin: 0;
  padding: 12px 16px 0;
  color: var(--tn-public-muted);
  font-size: 13px;
  line-height: 1.6;
}
body[data-user-end-vnext="true"] .docs-nav__label,
body[data-user-end-vnext="true"] .docs-content__page,
body[data-user-end-vnext="true"] .sp-callout__label,
body[data-user-end-vnext="true"] .sp-field__label,
body[data-user-end-vnext="true"] .feedback-breadcrumbs,
body[data-user-end-vnext="true"] .feedback-field__label,
body[data-user-end-vnext="true"] .feedback-section__hint {
  color: var(--tn-public-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
body[data-user-end-vnext="true"] .docs-nav__list,
body[data-user-end-vnext="true"] .docs-search__results,
body[data-user-end-vnext="true"] .docs-toc__list,
body[data-user-end-vnext="true"] .sp-list,
body[data-user-end-vnext="true"] .sp-faq,
body[data-user-end-vnext="true"] .feedback-guide-list,
body[data-user-end-vnext="true"] .feedback-sidebar__list,
body[data-user-end-vnext="true"] .feedback-hero__meta,
body[data-user-end-vnext="true"] .timeline-list {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}
body[data-user-end-vnext="true"] .docs-nav__link,
body[data-user-end-vnext="true"] .docs-search__results li,
body[data-user-end-vnext="true"] .docs-toc__list a,
body[data-user-end-vnext="true"] .docs-search__empty,
body[data-user-end-vnext="true"] .sp-list__item,
body[data-user-end-vnext="true"] .sp-faq__item,
body[data-user-end-vnext="true"] .feedback-guide-list li,
body[data-user-end-vnext="true"] .feedback-sidebar__list li,
body[data-user-end-vnext="true"] .feedback-hero__meta li,
body[data-user-end-vnext="true"] .timeline-item {
  display: block;
  padding: 14px 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--tn-public-muted);
}
body[data-user-end-vnext="true"] .docs-search__results a {
  display: grid;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}
body[data-user-end-vnext="true"] .docs-search__results strong {
  color: var(--tn-public-ink);
}
body[data-user-end-vnext="true"] .docs-search__results span {
  color: var(--tn-public-muted);
  font-size: 13px;
  line-height: 1.6;
}
body[data-user-end-vnext="true"] .feedback-category-card,
body[data-user-end-vnext="true"] .feedback-panel-card,
body[data-user-end-vnext="true"] .feedback-success {
  display: block;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--tn-surface-canvas) 84%, transparent);
  color: var(--tn-public-muted);
}
body[data-user-end-vnext="true"] .docs-nav__link.is-active,
body[data-user-end-vnext="true"] .docs-toc__list a[aria-current="true"],
body[data-user-end-vnext="true"] .feedback-category-card.is-selected {
  border-color: color-mix(in srgb, var(--tn-public-accent) 32%, transparent);
  background: transparent;
  color: var(--tn-public-accent);
}
body[data-user-end-vnext="true"] .docs-nav__link.is-active,
body[data-user-end-vnext="true"] .docs-toc__list a[aria-current="true"] {
  padding-left: 12px;
  border-left: 2px solid color-mix(in srgb, var(--tn-public-accent) 42%, transparent);
}
body[data-user-end-vnext="true"] .docs-content__top,
body[data-user-end-vnext="true"] .sp-field__header,
body[data-user-end-vnext="true"] .feedback-panel__header,
body[data-user-end-vnext="true"] .feedback-field__topline,
body[data-user-end-vnext="true"] .feedback-actions,
body[data-user-end-vnext="true"] .timeline-column__header,
body[data-user-end-vnext="true"] .timeline-item__meta,
body[data-user-end-vnext="true"] .timeline-item__footer,
body[data-user-end-vnext="true"] .directory-guide__inner,
body[data-user-end-vnext="true"] .sp-header__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
body[data-user-end-vnext="true"] .docs-content__top {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
}
body[data-user-end-vnext="true"] .docs-outline {
  padding: 16px;
}
body[data-user-end-vnext="true"] .docs-outline summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  color: var(--tn-public-ink);
  font-weight: 700;
}
body[data-user-end-vnext="true"] .docs-outline summary::-webkit-details-marker {
  display: none;
}
body[data-user-end-vnext="true"] .docs-outline[open] summary {
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
}
body[data-user-end-vnext="true"] .docs-toc__empty {
  padding-top: 14px;
  color: var(--tn-public-muted);
  font-size: 13px;
  line-height: 1.6;
}
body[data-user-end-vnext="true"] .docs-article {
  color: var(--tn-public-muted);
}
body[data-user-end-vnext="true"] .docs-article h1,
body[data-user-end-vnext="true"] .docs-article h2,
body[data-user-end-vnext="true"] .docs-article h3,
body[data-user-end-vnext="true"] .docs-article h4,
body[data-user-end-vnext="true"] .sp-header__title,
body[data-user-end-vnext="true"] .sp-section__title,
body[data-user-end-vnext="true"] .feedback-panel__title,
body[data-user-end-vnext="true"] .feedback-section__title,
body[data-user-end-vnext="true"] .feedback-hero__title,
body[data-user-end-vnext="true"] .feedback-guide-card h2,
body[data-user-end-vnext="true"] .feedback-sidebar__card h2,
body[data-user-end-vnext="true"] .feedback-sidebar__card h3,
body[data-user-end-vnext="true"] .timeline-column__title,
body[data-user-end-vnext="true"] .timeline-item__title,
body[data-user-end-vnext="true"] .sp-faq__q {
  margin: 0;
  color: var(--tn-public-ink);
  font-family: var(--tn-font-headline);
  letter-spacing: -0.04em;
}
body[data-user-end-vnext="true"] .docs-article h1,
body[data-user-end-vnext="true"] .sp-header__title,
body[data-user-end-vnext="true"] .feedback-hero__title {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 0.98;
}
body[data-user-end-vnext="true"] .docs-article h2,
body[data-user-end-vnext="true"] .sp-section__title,
body[data-user-end-vnext="true"] .feedback-panel__title,
body[data-user-end-vnext="true"] .feedback-section__title {
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.04;
}
body[data-user-end-vnext="true"] .docs-article h3,
body[data-user-end-vnext="true"] .timeline-item__title {
  font-size: 20px;
  line-height: 1.1;
}
body[data-user-end-vnext="true"] .docs-article p,
body[data-user-end-vnext="true"] .docs-article li,
body[data-user-end-vnext="true"] .sp-header__lead,
body[data-user-end-vnext="true"] .sp-body,
body[data-user-end-vnext="true"] .sp-faq__a,
body[data-user-end-vnext="true"] .feedback-hero__lead,
body[data-user-end-vnext="true"] .feedback-panel__note,
body[data-user-end-vnext="true"] .feedback-status,
body[data-user-end-vnext="true"] .feedback-field__hint,
body[data-user-end-vnext="true"] .feedback-actions__note,
body[data-user-end-vnext="true"] .timeline-item__body {
  margin: 0;
  color: var(--tn-public-muted);
  line-height: 1.72;
}
body[data-user-end-vnext="true"] .docs-article h2,
body[data-user-end-vnext="true"] .docs-article h3 {
  scroll-margin-top: 112px;
}
body[data-user-end-vnext="true"] .docs-article h2 {
  margin-top: 32px;
}
body[data-user-end-vnext="true"] .docs-article h3 {
  margin-top: 24px;
}
body[data-user-end-vnext="true"] .docs-article p + p,
body[data-user-end-vnext="true"] .sp-body--mt {
  margin-top: 12px;
}
body[data-user-end-vnext="true"] .docs-article ul,
body[data-user-end-vnext="true"] .docs-article ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}
body[data-user-end-vnext="true"] .docs-article a,
body[data-user-end-vnext="true"] .static-page a:not(.sp-pill):not(.sp-submit-btn):not(.feedback-secondary-btn):not(.feedback-link-btn) {
  color: var(--tn-public-accent);
}
body[data-user-end-vnext="true"] .docs-article code,
body[data-user-end-vnext="true"] .timeline-item__title code {
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--tn-surface-canvas) 82%, transparent);
  color: var(--tn-public-ink);
  font-family: var(--tn-font-mono);
  font-size: 0.92em;
}
body[data-user-end-vnext="true"] .docs-article pre {
  padding: 20px;
  border-radius: 24px;
  background: linear-gradient(180deg, #132033 0%, #0f1726 100%);
  color: rgba(248, 250, 252, 0.94);
  overflow: auto;
}
body[data-user-end-vnext="true"] .docs-article pre code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}
body[data-user-end-vnext="true"] .docs-article table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}
body[data-user-end-vnext="true"] .docs-article th,
body[data-user-end-vnext="true"] .docs-article td {
  padding: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
  text-align: left;
  vertical-align: top;
}
body[data-user-end-vnext="true"] .static-page {
  width: min(100%, var(--tn-page-max-width));
  margin: 0 auto;
  display: grid;
  gap: 24px;
  padding: 32px 0 48px;
  color: var(--tn-public-ink);
}
body[data-user-end-vnext="true"] .timeline-page {
  width: min(100%, var(--tn-page-wide-width));
}
body[data-user-end-vnext="true"] .sp-header,
body[data-user-end-vnext="true"] .sp-section,
body[data-user-end-vnext="true"] .sp-callout,
body[data-user-end-vnext="true"] .feedback-panel,
body[data-user-end-vnext="true"] .feedback-guide-card,
body[data-user-end-vnext="true"] .feedback-sidebar__card {
  display: grid;
  gap: 14px;
}
body[data-user-end-vnext="true"] .sp-header {
  position: relative;
  overflow: hidden;
}
body[data-user-end-vnext="true"] .sp-header__glow {
  position: absolute;
  inset: -24% -12% auto auto;
  width: 18rem;
  height: 18rem;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(9, 105, 218, 0.12) 0%, rgba(9, 105, 218, 0) 72%);
  pointer-events: none;
}
body[data-user-end-vnext="true"] .sp-list__item,
body[data-user-end-vnext="true"] .feedback-guide-list li,
body[data-user-end-vnext="true"] .feedback-sidebar__list li,
body[data-user-end-vnext="true"] .feedback-hero__meta li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
body[data-user-end-vnext="true"] .sp-list__badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0;
  border-radius: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body[data-user-end-vnext="true"] .sp-list__badge--required {
  color: #226645;
}
body[data-user-end-vnext="true"] .sp-list__badge--optional {
  color: #835200;
}
body[data-user-end-vnext="true"] .sp-list__badge--ops {
  color: var(--tn-public-accent);
}
body[data-user-end-vnext="true"] .sp-callout--tip {
  background: color-mix(in srgb, var(--tn-public-accent) 8%, white 92%);
}
body[data-user-end-vnext="true"] .sp-callout--code {
  background:
    radial-gradient(circle at top right, rgba(9, 105, 218, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(16, 32, 51, 0.96) 0%, rgba(19, 38, 60, 0.92) 100%);
  color: rgba(226, 232, 240, 0.9);
}
body[data-user-end-vnext="true"] .sp-callout--code p {
  color: inherit;
}
body[data-user-end-vnext="true"] .sp-form,
body[data-user-end-vnext="true"] .feedback-form,
body[data-user-end-vnext="true"] .feedback-section,
body[data-user-end-vnext="true"] .feedback-section__header,
body[data-user-end-vnext="true"] .feedback-section__body,
body[data-user-end-vnext="true"] .feedback-panel-grid,
body[data-user-end-vnext="true"] .feedback-grid,
body[data-user-end-vnext="true"] .feedback-field,
body[data-user-end-vnext="true"] .feedback-sidebar {
  display: grid;
  gap: 16px;
}
body[data-user-end-vnext="true"] .sp-form__row,
body[data-user-end-vnext="true"] .sp-field,
body[data-user-end-vnext="true"] .sp-form__footer {
  display: grid;
  gap: 12px;
}
body[data-user-end-vnext="true"] .sp-field__input,
body[data-user-end-vnext="true"] .feedback-field input,
body[data-user-end-vnext="true"] .feedback-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--tn-surface-canvas) 86%, transparent);
  color: var(--tn-public-ink);
  outline: none;
}
body[data-user-end-vnext="true"] .sp-field__input--textarea,
body[data-user-end-vnext="true"] .feedback-field textarea {
  min-height: 148px;
  padding-block: 14px;
  resize: vertical;
}
body[data-user-end-vnext="true"] .sp-field__input:focus,
body[data-user-end-vnext="true"] .feedback-field input:focus,
body[data-user-end-vnext="true"] .feedback-field textarea:focus {
  border-color: var(--tn-public-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tn-public-accent) 12%, transparent);
}
body[data-user-end-vnext="true"] .sp-field.is-invalid .sp-field__input,
body[data-user-end-vnext="true"] .feedback-field.is-invalid input,
body[data-user-end-vnext="true"] .feedback-field.is-invalid textarea,
body[data-user-end-vnext="true"] .feedback-category-card.is-invalid {
  border-color: rgba(180, 35, 24, 0.48);
  box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.08);
}
body[data-user-end-vnext="true"] .sp-field__error,
body[data-user-end-vnext="true"] .feedback-field__error,
body[data-user-end-vnext="true"] .feedback-field__error span {
  color: #b42318;
  font-size: 13px;
}
body[data-user-end-vnext="true"] .sp-form__status,
body[data-user-end-vnext="true"] .feedback-status,
body[data-user-end-vnext="true"] .feedback-summary,
body[data-user-end-vnext="true"] .feedback-success {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
  background: color-mix(in srgb, var(--tn-surface-canvas) 86%, transparent);
  color: var(--tn-public-muted);
}
body[data-user-end-vnext="true"] .sp-form__status--ok,
body[data-user-end-vnext="true"] .feedback-success {
  border-color: rgba(26, 127, 55, 0.24);
  background: rgba(26, 127, 55, 0.1);
  color: #226645;
}
body[data-user-end-vnext="true"] .sp-form__status--error {
  border-color: rgba(180, 35, 24, 0.28);
  background: rgba(180, 35, 24, 0.12);
  color: #8b1b13;
}
body[data-user-end-vnext="true"] .validation-summary-valid:empty,
body[data-user-end-vnext="true"] .feedback-summary:empty {
  display: none;
}
body[data-user-end-vnext="true"] .sp-submit-btn,
body[data-user-end-vnext="true"] .feedback-actions button[type="submit"],
body[data-user-end-vnext="true"] .feedback-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid color-mix(in srgb, var(--tn-public-accent) 82%, black 18%);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--tn-public-accent) 0%, var(--tn-public-accent-strong) 100%);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 16px 34px rgba(9, 105, 218, 0.22);
}
body[data-user-end-vnext="true"] .auth-grid,
body[data-user-end-vnext="true"] .feedback-layout,
body[data-user-end-vnext="true"] .timeline-columns,
body[data-user-end-vnext="true"] .timeline-columns--roadmap,
body[data-user-end-vnext="true"] .feedback-category-grid,
body[data-user-end-vnext="true"] .feedback-grid--2 {
  display: grid;
  gap: 20px;
}
body[data-user-end-vnext="true"] .feedback-category-card {
  position: relative;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease;
}
body[data-user-end-vnext="true"] .feedback-category-card:hover,
body[data-user-end-vnext="true"] .timeline-vote:hover:not(:disabled),
body[data-user-end-vnext="true"] .sp-pill:hover,
body[data-user-end-vnext="true"] .feedback-secondary-btn:hover,
body[data-user-end-vnext="true"] .feedback-link-btn:hover {
  transform: translateY(-1px);
}
body[data-user-end-vnext="true"] .feedback-category-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
body[data-user-end-vnext="true"] .feedback-upload {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px dashed color-mix(in srgb, var(--tn-public-accent) 28%, var(--tn-public-line));
  border-radius: 24px;
  background: color-mix(in srgb, var(--tn-surface-canvas) 84%, transparent);
}
body[data-user-end-vnext="true"] .feedback-upload.is-paste-ready {
  border-color: color-mix(in srgb, var(--tn-public-accent) 44%, transparent);
  background: color-mix(in srgb, var(--tn-public-accent) 10%, white 90%);
}
body[data-user-end-vnext="true"] .feedback-upload__preview {
  display: none;
  align-items: center;
  gap: 12px;
}
body[data-user-end-vnext="true"] .feedback-upload__preview.is-visible {
  display: flex;
}
body[data-user-end-vnext="true"] .feedback-upload__thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
  background: color-mix(in srgb, var(--tn-surface-canvas) 92%, transparent);
}
body[data-user-end-vnext="true"] .feedback-upload__fallback {
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
}
body[data-user-end-vnext="true"] .feedback-upload__fallback summary {
  cursor: pointer;
  color: var(--tn-public-ink);
  font-weight: 700;
}
body[data-user-end-vnext="true"] .timeline-column__header {
  padding-bottom: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
}
body[data-user-end-vnext="true"] .timeline-column__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
  background: color-mix(in srgb, var(--tn-surface-canvas) 84%, transparent);
  color: var(--tn-public-accent);
  font-weight: 700;
}
body[data-user-end-vnext="true"] .timeline-tag--planned,
body[data-user-end-vnext="true"] .timeline-tag--new,
body[data-user-end-vnext="true"] .timeline-tag--feature,
body[data-user-end-vnext="true"] .timeline-tag--docs {
  background: rgba(47, 111, 237, 0.12);
  color: #204a9e;
}
body[data-user-end-vnext="true"] .timeline-tag--in-progress,
body[data-user-end-vnext="true"] .timeline-tag--improvement,
body[data-user-end-vnext="true"] .timeline-tag--perf,
body[data-user-end-vnext="true"] .timeline-tag--medium {
  background: rgba(15, 108, 189, 0.12);
  color: #0a4c82;
}
body[data-user-end-vnext="true"] .timeline-tag--completed,
body[data-user-end-vnext="true"] .timeline-tag--low {
  background: rgba(46, 139, 87, 0.12);
  color: #226645;
}
body[data-user-end-vnext="true"] .timeline-tag--fix,
body[data-user-end-vnext="true"] .timeline-tag--bugfix {
  background: rgba(192, 122, 0, 0.12);
  color: #835200;
}
body[data-user-end-vnext="true"] .timeline-tag--breaking,
body[data-user-end-vnext="true"] .timeline-tag--deprecated,
body[data-user-end-vnext="true"] .timeline-tag--high,
body[data-user-end-vnext="true"] .timeline-tag--security {
  background: rgba(180, 35, 24, 0.12);
  color: #8b1b13;
}
body[data-user-end-vnext="true"] .static-page .sp-header--split,
body[data-user-end-vnext="true"] .static-page .sp-section--split {
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
  align-items: start;
  gap: 24px;
}
body[data-user-end-vnext="true"] .static-page .sp-header__body,
body[data-user-end-vnext="true"] .static-page .sp-header__side,
body[data-user-end-vnext="true"] .static-page .sp-section__header,
body[data-user-end-vnext="true"] .static-page .sp-aside,
body[data-user-end-vnext="true"] .static-page .sp-route-card,
body[data-user-end-vnext="true"] .static-page .sp-note,
body[data-user-end-vnext="true"] .docs-content__hero,
body[data-user-end-vnext="true"] .docs-content__hero-copy,
body[data-user-end-vnext="true"] .docs-content__hero-meta,
body[data-user-end-vnext="true"] .docs-content__context,
body[data-user-end-vnext="true"] .timeline-empty {
  display: grid;
  gap: 12px;
}
body[data-user-end-vnext="true"] .static-page .sp-page-nav,
body[data-user-end-vnext="true"] .static-page .sp-action-row,
body[data-user-end-vnext="true"] .static-page .sp-choice-row,
body[data-user-end-vnext="true"] .static-page .sp-note-grid,
body[data-user-end-vnext="true"] .static-page .sp-route-grid,
body[data-user-end-vnext="true"] .docs-content__quicklinks,
body[data-user-end-vnext="true"] .timeline-empty__actions,
body[data-user-end-vnext="true"] .timeline-release-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
body[data-user-end-vnext="true"] .static-page .sp-kpi-strip,
body[data-user-end-vnext="true"] .docs-content__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body[data-user-end-vnext="true"] .static-page .sp-kpi-strip li,
body[data-user-end-vnext="true"] .docs-content__stat {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--tn-surface-canvas) 88%, transparent);
}
body[data-user-end-vnext="true"] .static-page .sp-kpi-strip strong,
body[data-user-end-vnext="true"] .docs-content__stat dd {
  color: var(--tn-public-ink);
  font-family: var(--tn-font-headline);
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1;
  letter-spacing: -0.05em;
}
body[data-user-end-vnext="true"] .static-page .sp-kpi-strip span,
body[data-user-end-vnext="true"] .docs-content__stat dt {
  color: var(--tn-public-muted);
  font-size: 12px;
  line-height: 1.6;
}
body[data-user-end-vnext="true"] .docs-content__stat dt,
body[data-user-end-vnext="true"] .docs-content__stat dd {
  margin: 0;
}
body[data-user-end-vnext="true"] .static-page .sp-page-nav {
  padding: 0 4px;
}
body[data-user-end-vnext="true"] .static-page .sp-page-nav a,
body[data-user-end-vnext="true"] .docs-content__quicklinks a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
  color: var(--tn-public-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body[data-user-end-vnext="true"] .static-page .sp-page-nav a:hover,
body[data-user-end-vnext="true"] .docs-content__quicklinks a:hover {
  color: var(--tn-public-accent);
  border-bottom-color: color-mix(in srgb, var(--tn-public-accent) 42%, transparent);
}
body[data-user-end-vnext="true"] .static-page .sp-aside {
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
  border-radius: 24px;
  background: color-mix(in srgb, var(--tn-surface-canvas) 86%, transparent);
}
body[data-user-end-vnext="true"] .static-page .sp-aside--compact {
  gap: 10px;
}
body[data-user-end-vnext="true"] .static-page .sp-aside__eyebrow,
body[data-user-end-vnext="true"] .static-page .sp-route-card__eyebrow,
body[data-user-end-vnext="true"] .static-page .sp-note__eyebrow,
body[data-user-end-vnext="true"] .docs-content__eyebrow {
  margin: 0;
  color: var(--tn-public-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
body[data-user-end-vnext="true"] .static-page .sp-link-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body[data-user-end-vnext="true"] .static-page .sp-link-list li {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
  color: var(--tn-public-muted);
}
body[data-user-end-vnext="true"] .static-page .sp-route-grid,
body[data-user-end-vnext="true"] .static-page .sp-note-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body[data-user-end-vnext="true"] .static-page .sp-route-card,
body[data-user-end-vnext="true"] .static-page .sp-note {
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
  border-radius: 24px;
  background: color-mix(in srgb, var(--tn-surface-canvas) 88%, transparent);
}
body[data-user-end-vnext="true"] .static-page .sp-route-card__title,
body[data-user-end-vnext="true"] .static-page .sp-note__title,
body[data-user-end-vnext="true"] .docs-content__hero-page {
  margin: 0;
  color: var(--tn-public-ink);
  font-family: var(--tn-font-headline);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
body[data-user-end-vnext="true"] .static-page .sp-action-row {
  padding-top: 4px;
}
body[data-user-end-vnext="true"] .static-page .sp-choice-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tn-surface-canvas) 88%, transparent);
  color: var(--tn-public-ink);
  font-size: 13px;
  font-weight: 600;
}
body[data-user-end-vnext="true"] .static-page .sp-choice-chip:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--tn-public-accent) 42%, transparent);
}
body[data-user-end-vnext="true"] .docs-content {
  display: grid;
  gap: 24px;
}
body[data-user-end-vnext="true"] .docs-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 24px;
  align-items: start;
}
body[data-user-end-vnext="true"] .docs-main-column,
body[data-user-end-vnext="true"] .docs-rail,
body[data-user-end-vnext="true"] .docs-rail__card {
  display: grid;
  gap: 16px;
}
body[data-user-end-vnext="true"] .docs-content__hero {
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
}
body[data-user-end-vnext="true"] .docs-content__hero-meta {
  gap: 16px;
}
body[data-user-end-vnext="true"] .docs-content__hero-lead,
body[data-user-end-vnext="true"] .docs-content__summary {
  margin: 0;
  color: var(--tn-public-muted);
  line-height: 1.7;
}
body[data-user-end-vnext="true"] .docs-content__summary {
  font-size: 14px;
}
body[data-user-end-vnext="true"] .docs-content__actions,
body[data-user-end-vnext="true"] .docs-sidebar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
body[data-user-end-vnext="true"] .docs-content__top {
  margin-bottom: 0;
}
body[data-user-end-vnext="true"] .docs-outline {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--tn-surface-canvas) 88%, transparent);
}
body[data-user-end-vnext="true"] .docs-rail {
  position: sticky;
  top: 88px;
}
body[data-user-end-vnext="true"] .docs-rail__card {
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--tn-surface-canvas) 88%, transparent);
}
body[data-user-end-vnext="true"] .docs-article {
  width: min(100%, 860px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body[data-user-end-vnext="true"] .docs-nav__link {
  padding-right: 10px;
}
body[data-user-end-vnext="true"] .docs-mini-link,
body[data-user-end-vnext="true"] .docs-sidebar__actions a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tn-surface-canvas) 88%, transparent);
  color: var(--tn-public-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}
body[data-user-end-vnext="true"] .docs-mini-link:hover,
body[data-user-end-vnext="true"] .docs-sidebar__actions a:hover {
  border-color: color-mix(in srgb, var(--tn-public-accent) 42%, transparent);
  color: var(--tn-public-accent);
}
body[data-user-end-vnext="true"] .docs-mini-link:focus-visible,
body[data-user-end-vnext="true"] .docs-sidebar__actions a:focus-visible,
body[data-user-end-vnext="true"] .docs-sidebar__brand:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--tn-public-accent) 52%, transparent);
  outline-offset: 4px;
}
body[data-user-end-vnext="true"] .timeline-page {
  gap: 28px;
}
body[data-user-end-vnext="true"] .timeline-columns,
body[data-user-end-vnext="true"] .timeline-release-groups {
  display: grid;
  gap: 20px;
}
body[data-user-end-vnext="true"] .timeline-column__copy {
  margin: 6px 0 0;
  color: var(--tn-public-muted);
  font-size: 14px;
  line-height: 1.6;
}
body[data-user-end-vnext="true"] .timeline-empty {
  padding: 18px;
  border: 1px dashed color-mix(in srgb, var(--tn-public-line) 92%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--tn-surface-canvas) 84%, transparent);
}
body[data-user-end-vnext="true"] .timeline-item {
  display: grid;
  gap: 12px;
}
body[data-user-end-vnext="true"] .timeline-item__meta,
body[data-user-end-vnext="true"] .timeline-item__footer {
  align-items: center;
}
body[data-user-end-vnext="true"] .timeline-tag,
body[data-user-end-vnext="true"] .timeline-status,
body[data-user-end-vnext="true"] .timeline-vote {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--tn-public-line) 92%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tn-surface-canvas) 88%, transparent);
  font-size: 12px;
  letter-spacing: 0.04em;
}
body[data-user-end-vnext="true"] .timeline-vote {
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease;
}
body[data-user-end-vnext="true"] .timeline-vote:disabled {
  cursor: default;
  opacity: 0.8;
}
body[data-user-end-vnext="true"] .timeline-release-group {
  width: 100%;
}
@media (min-width: 1024px) {
  body[data-user-end-vnext="true"] .docs-shell {
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
    align-items: start;
  }

  body[data-user-end-vnext="true"] .docs-sidebar {
    position: sticky;
    top: 88px;
  }

  body[data-user-end-vnext="true"] .auth-grid,
  body[data-user-end-vnext="true"] .feedback-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    align-items: start;
  }

  body[data-user-end-vnext="true"] .feedback-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    align-items: start;
  }

  body[data-user-end-vnext="true"] .feedback-sidebar {
    position: sticky;
    top: 88px;
  }

  body[data-user-end-vnext="true"] .timeline-columns--roadmap {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  body[data-user-end-vnext="true"] .sp-form__row--2col,
  body[data-user-end-vnext="true"] .feedback-grid--2,
  body[data-user-end-vnext="true"] .feedback-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-user-end-vnext="true"] .sp-form__footer {
    grid-auto-flow: column;
    justify-content: start;
  }
}
@media (max-width: 1023px) {
  body[data-user-end-vnext="true"] .docs-mobile-toggle {
    display: inline-flex;
  }

  body[data-user-end-vnext="true"] .docs-sidebar {
    display: none;
  }

  body[data-user-end-vnext="true"] .docs-shell--menu-open .docs-sidebar {
    display: block;
  }

  body[data-user-end-vnext="true"] .docs-main-grid {
    grid-template-columns: 1fr;
  }

  body[data-user-end-vnext="true"] .docs-rail {
    position: static;
  }
}
@media (max-width: 768px) {
  body[data-user-end-vnext="true"] .docs-shell,
  body[data-user-end-vnext="true"] .static-page,
  body[data-user-end-vnext="true"] .feedback-page .feedback-hero,
  body[data-user-end-vnext="true"] .feedback-page .feedback-main {
    padding-top: 20px;
    padding-bottom: 32px;
  }

  body[data-user-end-vnext="true"] .docs-mobile-toggle,
  body[data-user-end-vnext="true"] .docs-sidebar__inner,
  body[data-user-end-vnext="true"] .docs-content,
  body[data-user-end-vnext="true"] .docs-article,
  body[data-user-end-vnext="true"] .static-page .sp-header,
  body[data-user-end-vnext="true"] .static-page .sp-section,
  body[data-user-end-vnext="true"] .static-page .sp-callout,
  body[data-user-end-vnext="true"] .timeline-column,
  body[data-user-end-vnext="true"] .feedback-hero__inner,
  body[data-user-end-vnext="true"] .feedback-panel,
  body[data-user-end-vnext="true"] .feedback-guide-card,
  body[data-user-end-vnext="true"] .feedback-sidebar__card {
    padding: 20px;
    border-radius: 24px;
  }

  body[data-user-end-vnext="true"] .static-page .sp-header--split,
  body[data-user-end-vnext="true"] .static-page .sp-section--split,
  body[data-user-end-vnext="true"] .static-page .sp-route-grid,
  body[data-user-end-vnext="true"] .static-page .sp-note-grid,
  body[data-user-end-vnext="true"] .static-page .sp-kpi-strip,
  body[data-user-end-vnext="true"] .docs-content__stats,
  body[data-user-end-vnext="true"] .docs-main-grid {
    grid-template-columns: 1fr;
  }
}
/* Tool runtime compatibility layer */
body[data-user-end-vnext="true"] .tool-panel--output[data-state="idle"] {
  border-color: rgba(148, 163, 184, 0.32);
}
body[data-user-end-vnext="true"] .tool-panel--output[data-state="running"] {
  border-color: rgba(37, 99, 235, 0.38);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
}
body[data-user-end-vnext="true"] .tool-panel--output[data-state="success"] {
  border-color: rgba(22, 163, 74, 0.4);
  box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.12);
}
body[data-user-end-vnext="true"] .tool-panel--output[data-state="error"] {
  border-color: rgba(220, 38, 38, 0.4);
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.12);
}
body[data-user-end-vnext="true"] .tool-console__feed {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body[data-user-end-vnext="true"] .tool-console__entry {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(191, 219, 254, 0.52);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
}
body[data-user-end-vnext="true"] .tool-console__entry--empty {
  color: rgba(71, 85, 105, 0.92);
}
body[data-user-end-vnext="true"] .toast-region {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  display: grid;
  gap: 10px;
  pointer-events: none;
}
body[data-user-end-vnext="true"] .toast-region > * {
  pointer-events: auto;
}
body[data-user-end-vnext="true"] .tool-advanced-drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
}
body[data-user-end-vnext="true"] .tool-advanced-drawer[hidden] {
  display: none !important;
}
body[data-user-end-vnext="true"] .tool-advanced-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
}
body[data-user-end-vnext="true"] .tool-advanced-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(540px, 100%);
  height: 100%;
  overflow-y: auto;
  background: #fff;
  border-left: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: -20px 0 48px rgba(15, 23, 42, 0.16);
  padding: 28px 24px 32px;
}
body[data-user-end-vnext="true"] .tool-advanced-drawer__head,
body[data-user-end-vnext="true"] .tool-advanced-drawer__actions,
body[data-user-end-vnext="true"] .tool-advanced-drawer__form {
  display: flex;
  gap: 12px;
}
body[data-user-end-vnext="true"] .tool-advanced-drawer__head {
  align-items: flex-start;
  justify-content: space-between;
}
body[data-user-end-vnext="true"] .tool-advanced-drawer__actions,
body[data-user-end-vnext="true"] .tool-advanced-drawer__form {
  flex-wrap: wrap;
}
body[data-user-end-vnext="true"] .tool-advanced-drawer__title {
  margin: 4px 0 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: #0f172a;
}
body[data-user-end-vnext="true"] .tool-advanced-drawer__muted,
body[data-user-end-vnext="true"] .tool-advanced-drawer small {
  color: rgba(71, 85, 105, 0.9);
}
body[data-user-end-vnext="true"] .tool-advanced-drawer__section + .tool-advanced-drawer__section {
  margin-top: 24px;
}
body[data-user-end-vnext="true"] .tool-advanced-drawer__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body[data-user-end-vnext="true"] .tool-advanced-drawer__list a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid rgba(191, 219, 254, 0.52);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.92);
  color: inherit;
  text-decoration: none;
}
body[data-user-end-vnext="true"] .tool-advanced-drawer input,
body[data-user-end-vnext="true"] .tool-advanced-drawer select {
  min-height: 42px;
  border: 1px solid rgba(148, 163, 184, 0.36);
  border-radius: 12px;
  padding: 0 12px;
  background: #fff;
  color: #0f172a;
}
body[data-user-end-vnext="true"] .tool-advanced-drawer input:focus-visible,
body[data-user-end-vnext="true"] .tool-advanced-drawer select:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.32);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  body[data-user-end-vnext="true"] .tool-advanced-drawer__panel,
  body[data-user-end-vnext="true"] .toast-region > *,
  body[data-user-end-vnext="true"] .tool-panel--output {
    transition: none !important;
    animation: none !important;
  }
}
/* Changelog feed override */
body[data-user-end-vnext="true"] .timeline-page .cl-header {
  display: block;
  padding: var(--tn-space-10) var(--tn-space-6) var(--tn-space-6);
  max-width: 760px;
  margin-inline: auto;
  border-bottom: 1px solid var(--tn-border-muted);
}
body[data-user-end-vnext="true"] .timeline-page .cl-header .sp-header__body {
  max-width: 100%;
}
body[data-user-end-vnext="true"] .cl-header-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-2);
  margin-top: var(--tn-space-5);
}
body[data-user-end-vnext="true"] .cl-feed {
  max-width: 760px;
  margin-inline: auto;
  padding: var(--tn-space-8) var(--tn-space-6) var(--tn-space-4);
}
body[data-user-end-vnext="true"] .cl-month {
  margin-bottom: var(--tn-space-10);
}
body[data-user-end-vnext="true"] .cl-month__heading {
  display: flex;
  align-items: center;
  gap: var(--tn-space-3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tn-text-soft);
  padding-bottom: var(--tn-space-3);
  border-bottom: 1px solid var(--tn-border-muted);
  margin: 0 0 var(--tn-space-4);
}
body[data-user-end-vnext="true"] .cl-month__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--tn-surface-soft);
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-pill);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tn-text-soft);
}
body[data-user-end-vnext="true"] .cl-entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tn-space-3);
}
body[data-user-end-vnext="true"] .cl-entry {
  background: var(--tn-surface-panel);
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-md);
  padding: var(--tn-space-5);
}
body[data-user-end-vnext="true"] .cl-entry__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tn-space-2);
  margin-bottom: var(--tn-space-2);
}
body[data-user-end-vnext="true"] .cl-entry__date {
  font-size: 0.74rem;
  color: var(--tn-text-soft);
  font-variant-numeric: tabular-nums;
}
body[data-user-end-vnext="true"] .cl-entry__version {
  font-family: var(--tn-font-mono);
  font-size: 0.7rem;
  color: var(--tn-text-muted);
  background: var(--tn-surface-soft);
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-sm);
  padding: 1px 6px;
  line-height: 1.6;
}
body[data-user-end-vnext="true"] .cl-entry__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tn-text-default);
  margin: 0 0 var(--tn-space-2);
  line-height: 1.4;
}
body[data-user-end-vnext="true"] .cl-entry__body {
  font-size: 0.84rem;
  color: var(--tn-text-muted);
  line-height: 1.65;
  margin: 0;
}
body[data-user-end-vnext="true"] .cl-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--tn-radius-pill);
  border: 1px solid var(--tn-border-default);
  background: var(--tn-surface-soft);
  color: var(--tn-text-soft);
  white-space: nowrap;
}
body[data-user-end-vnext="true"] .cl-tag--fix,
body[data-user-end-vnext="true"] .cl-tag--bugfix,
body[data-user-end-vnext="true"] .cl-tag--bug-fix {
  background: var(--tn-error-soft);
  border-color: rgba(207, 34, 46, 0.24);
  color: var(--tn-error);
}
body[data-user-end-vnext="true"] .cl-tag--feature,
body[data-user-end-vnext="true"] .cl-tag--new {
  background: var(--tn-success-soft);
  border-color: rgba(26, 127, 55, 0.24);
  color: var(--tn-success);
}
body[data-user-end-vnext="true"] .cl-tag--improvement,
body[data-user-end-vnext="true"] .cl-tag--perf,
body[data-user-end-vnext="true"] .cl-tag--performance {
  background: var(--tn-accent-primary-soft);
  border-color: rgba(9, 105, 218, 0.24);
  color: var(--tn-accent-primary);
}
body[data-user-end-vnext="true"] .cl-tag--breaking,
body[data-user-end-vnext="true"] .cl-tag--breaking-change {
  background: var(--tn-warning-soft);
  border-color: rgba(154, 103, 0, 0.24);
  color: var(--tn-warning);
}
body[data-user-end-vnext="true"] .cl-tag--security {
  background: var(--tn-done-soft);
  border-color: rgba(130, 80, 223, 0.24);
  color: var(--tn-done);
}
body[data-user-end-vnext="true"] .cl-tag--docs,
body[data-user-end-vnext="true"] .cl-tag--chore,
body[data-user-end-vnext="true"] .cl-tag--misc,
body[data-user-end-vnext="true"] .cl-tag--update {
  background: rgb(var(--tn-color-ink-rgb) / 0.06);
  border-color: rgba(110, 118, 129, 0.22);
  color: var(--tn-text-muted);
}
body[data-user-end-vnext="true"] .cl-empty {
  background: var(--tn-surface-panel);
  border: 1px solid var(--tn-border-muted);
  border-radius: var(--tn-radius-lg);
  padding: var(--tn-space-10) var(--tn-space-8);
  text-align: center;
  max-width: 500px;
  margin: var(--tn-space-8) auto;
}
body[data-user-end-vnext="true"] .cl-empty__heading {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--tn-text-default);
  margin: 0 0 var(--tn-space-3);
}
body[data-user-end-vnext="true"] .cl-empty__body {
  font-size: 0.84rem;
  color: var(--tn-text-muted);
  line-height: 1.65;
  margin: 0 0 var(--tn-space-6);
}
body[data-user-end-vnext="true"] .cl-empty__actions {
  display: flex;
  gap: var(--tn-space-3);
  justify-content: center;
  flex-wrap: wrap;
}
body[data-user-end-vnext="true"] .cl-route-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tn-space-2) var(--tn-space-6);
  max-width: 760px;
  margin-inline: auto;
  padding: var(--tn-space-5) var(--tn-space-6) var(--tn-space-10);
  border-top: 1px solid var(--tn-border-muted);
}
body[data-user-end-vnext="true"] .cl-route-bar__link {
  font-size: 0.78rem;
  color: var(--tn-text-muted);
  text-decoration: none;
  transition: color 0.12s;
}
body[data-user-end-vnext="true"] .cl-route-bar__link:hover {
  color: var(--tn-accent-primary);
}
body[data-user-end-vnext="true"] .cl-route-bar__link:hover strong {
  color: var(--tn-accent-primary);
}
body[data-user-end-vnext="true"] .cl-route-bar__link strong {
  color: var(--tn-text-default);
  font-weight: 600;
}
body[data-user-end-vnext="true"] .cl-route-bar__link:focus-visible {
  outline: 2px solid var(--tn-accent-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
@media (max-width: 640px) {
  body[data-user-end-vnext="true"] .timeline-page .cl-header,
  body[data-user-end-vnext="true"] .cl-feed,
  body[data-user-end-vnext="true"] .cl-route-bar {
    padding-inline: var(--tn-space-4);
  }

  body[data-user-end-vnext="true"] .cl-entry {
    padding: var(--tn-space-4);
  }

  body[data-user-end-vnext="true"] .cl-empty {
    padding: var(--tn-space-8) var(--tn-space-5);
  }

  body[data-user-end-vnext="true"] .cl-route-bar {
    flex-direction: column;
    gap: var(--tn-space-3);
  }
}
html.dark body[data-user-end-vnext="true"] .cl-entry {
  border-color: rgba(110, 118, 129, 0.18);
}
html.dark body[data-user-end-vnext="true"] .cl-month__heading {
  border-color: rgba(110, 118, 129, 0.18);
}
html.dark body[data-user-end-vnext="true"] .cl-route-bar {
  border-top-color: rgba(110, 118, 129, 0.18);
}
html.dark body[data-user-end-vnext="true"] .cl-empty {
  border-color: rgba(110, 118, 129, 0.18);
}
/* ============================================================================
   Canonical ko-btn-* recipes for the user surface.
   Mirrors src/.../tool-studio-v2/components/buttons.css. The studio sheet
   is not loaded here, so user-area views that use `ko-btn-primary` /
   `ko-btn-secondary` (Profile, Vault, Security, Account, TwoFactor, etc.)
   would otherwise compute to inherited ink-on-transparent and fail WCAG AA
   in dark mode. Uses `--tn-accent-primary-strong` (not the lighter
   `--tn-accent-primary`) to keep paper text ≥4.5:1 in both themes.
   ============================================================================ */
.ko-btn-primary,
.ko-btn-secondary,
.ko-btn-ghost,
.ko-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, filter 150ms ease;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
}
.ko-btn-primary {
  background: var(--tn-accent-primary-strong);
  color: var(--tn-color-paper);
  border-color: var(--tn-accent-primary-strong);
}
.ko-btn-primary:hover:not(:disabled) {
  filter: brightness(0.92);
}
.ko-btn-primary:active:not(:disabled) {
  transform: scale(0.98);
}
.ko-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ko-btn-secondary {
  background: var(--tn-surface-inset);
  color: var(--tn-text-default);
  border-color: var(--tn-border-subtle);
}
.ko-btn-secondary:hover:not(:disabled) {
  background: var(--tn-surface-panel);
  border-color: var(--tn-border-default);
}
.ko-btn-secondary:active:not(:disabled) {
  transform: scale(0.98);
}
.ko-btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ko-btn-ghost {
  background: transparent;
  color: var(--tn-text-default);
  border-color: transparent;
}
.ko-btn-ghost:hover:not(:disabled) {
  background: var(--tn-surface-inset);
  border-color: var(--tn-border-subtle);
}
.ko-btn-ghost:active:not(:disabled) {
  transform: scale(0.98);
}
.ko-btn-ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ko-btn-danger {
  background: var(--tn-error);
  color: var(--tn-color-paper);
  border-color: var(--tn-error);
}
.ko-btn-danger:hover:not(:disabled) {
  filter: brightness(0.92);
}
.ko-btn-danger:active:not(:disabled) {
  transform: scale(0.98);
}
.ko-btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ko-btn-primary:focus-visible,
.ko-btn-secondary:focus-visible,
.ko-btn-ghost:focus-visible,
.ko-btn-danger:focus-visible {
  outline: var(--tn-focus-ring-width) solid var(--tn-focus-ring);
  outline-offset: 2px;
}