@import "@fontsource-variable/noto-sans-jp";
@import './components/counts/countsTable.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

.ainu-ui-text
{
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.ainu-ui-word
{
  display: inline;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.ainu-ui-label .ainu-ui-text
{
  white-space: nowrap !important;
}

.ainu-ui-label wbr
{
  display: none;
}

.localised-document
{
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

.localised-document a:lang(ain)
{
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

@layer base
{
  :root
  {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 72.2% 50.6%;
    --destructive-foreground: 210 40% 98%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --theme-link: 221.2 83.2% 53.3%;
    --top-nav-root-bg-mobile: #fef08a;
    --top-nav-root-bg-desktop: #fefce8;
    --top-nav-active-bg: #fef08a;
    --top-nav-submenu-bg: #fef08a;
    --top-nav-mobile-menu-bg: #fef08a;
    --top-nav-mobile-active-bg: #fefce8;
    --top-nav-brand-link: #db2777;
    --top-nav-menu-link: #1d4ed8;

    --tag-colour-deerjikist: #9f1239;
    --tag-colour-deerjikist-hover: #b62a51;
    --tag-colour-meme: #6b21a8;
    --tag-colour-meme-hover: #8238bf;
    --tag-colour-character: #4d7c0f;
    --tag-colour-character-hover: #649326;
    --tag-colour-general: #155e75;
    --tag-colour-general-hover: #2c758c;
    --tag-colour-material: #c2410c;
    --tag-colour-material-hover: #d95823;
    --tag-colour-meta: #a16207;
    --tag-colour-meta-hover: #b8791e;
    --tag-colour-nico: #4b5563;
    --tag-colour-nico-hover: #626c7a;
  }

  .dark
  {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --destructive: 0 62.8% 45%;
    --destructive-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --top-nav-root-bg-mobile: #230505;
    --top-nav-root-bg-desktop: #230505;
    --top-nav-active-bg: #450a0a;
    --top-nav-submenu-bg: #450a0a;
    --top-nav-mobile-menu-bg: #230505;
    --top-nav-mobile-active-bg: #450a0a;
    --top-nav-brand-link: #f9a8d4;
    --top-nav-menu-link: #93c5fd;
  }

  body
  {
    @apply overflow-x-clip bg-background text-foreground;
  }

  a
  {
    color: hsl(var(--theme-link));
  }
  a:hover
  {
    color: color-mix(in oklab, hsl(var(--theme-link)), white 18%);
  }
}

:root
{
  font-family: "Noto Sans JP Variable", system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root[data-animation='reduced'] *,
:root[data-animation='off'] *
{
  scroll-behavior: auto !important;
}

:root[data-animation='off'] *,
:root[data-animation='off'] *::before,
:root[data-animation='off'] *::after
{
  animation-duration: 0ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0ms !important;
  transition-delay: 0ms !important;
}

a
{
  font-weight: 500;
  text-decoration: inherit;
}

body
{
  margin: 0;
  min-width: 320px;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

#root
{
  min-height: 100dvh;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

@keyframes wiki-blink
{
  0%, 100% { color: #dc2626; }
  50% { color: #2563eb; }
}

@keyframes wiki-blink-dark
{
  0%, 100% { color: #f87171; }
  50% { color: #60a5fa; }
}

.tag-marquee
{
  position: relative;
}

.tag-link-colour
{
  color: var(--tag-link-colour);
}

.tag-link-hover-colour:hover
{
  color: var(--tag-link-hover-colour) !important;
}

.top-nav-root
{
  background: var(--top-nav-root-bg-mobile);
}

.top-nav-bar
{
  padding-inline: 8px;
  column-gap: 4px;
}

.top-nav-primary
{
  column-gap: 4px;
}

.top-nav-account
{
  flex-shrink: 0;
  width: max-content;
}

.top-nav-layout .top-nav-brand-link
{
  margin-inline: 4px;
  font-size: 1rem;
}

.top-nav-desktop-menu,
.top-nav-desktop-submenu,
.top-nav-layout .top-nav-account,
.top-nav-user-desktop
{
  display: none;
}

.top-nav-desktop-menu
{
  font-size: .875rem;
}

.top-nav-separator-vertical
{
  display: inline-flex;
}

.top-nav-separator-horizontal
{
  display: none;
}

.top-nav-mobile-menu .top-nav-separator-vertical
{
  display: none;
}

.top-nav-mobile-menu .top-nav-separator-horizontal
{
  display: block;
}

.top-nav-more-menu
{
  display: grid;
  grid-template-columns: fit-content(35%) minmax(0, 1fr);
  align-items: center;
}

.top-nav-desktop-submenu .top-nav-menu-link
{
  white-space: normal;
  overflow-wrap: normal;
}

.top-nav-desktop-menu .top-nav-menu-link
{
  padding-inline: 8px;
}

.top-nav-user-desktop
{
  padding-right: 4px;
  font-size: .875rem;
}

.top-nav-user-mobile
{
  overflow-wrap: anywhere;
}

.top-nav-account .top-nav-user-desktop
{
  min-width: 0;
  max-width: 24vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-nav-locale-name
{
  display: none;
}

@media (min-width: 768px)
{
  .top-nav-layout[data-measuring] .top-nav-primary,
  .top-nav-layout[data-measuring] .top-nav-desktop-menu,
  .top-nav-layout[data-measuring] .top-nav-account
  {
    flex: 0 0 auto;
    width: max-content;
    max-width: none;
  }

  .top-nav-layout:not([data-desktop]) .top-nav-locale-name,
  .top-nav-layout[data-desktop='true'] .top-nav-locale-name,
  .top-nav-layout[data-measuring] .top-nav-locale-name
  {
    display: inline;
  }

  .top-nav-layout:not([data-desktop]) .top-nav-account .top-nav-user-desktop,
  .top-nav-layout[data-desktop='true'] .top-nav-account .top-nav-user-desktop,
  .top-nav-layout[data-measuring] .top-nav-account .top-nav-user-desktop
  {
    max-width: none;
  }

  .top-nav-layout .top-nav-brand-link
  {
    font-size: 1.125rem;
  }

  .top-nav-layout:not([data-desktop]) .top-nav-root,
  .top-nav-layout[data-desktop='true'] .top-nav-root
  {
    background: var(--top-nav-root-bg-desktop);
  }

  .top-nav-layout:not([data-desktop]) .top-nav-desktop-menu,
  .top-nav-layout:not([data-desktop]) .top-nav-account,
  .top-nav-layout[data-desktop='true'] .top-nav-desktop-menu,
  .top-nav-layout[data-measuring] .top-nav-desktop-menu,
  .top-nav-layout[data-desktop='true'] .top-nav-account,
  .top-nav-layout[data-measuring] .top-nav-account
  {
    display: flex;
  }

  .top-nav-layout:not([data-desktop]) .top-nav-user-desktop,
  .top-nav-layout:not([data-desktop]) .top-nav-desktop-submenu,
  .top-nav-layout[data-desktop='true'] .top-nav-user-desktop,
  .top-nav-layout[data-measuring] .top-nav-user-desktop,
  .top-nav-layout[data-desktop='true'] .top-nav-desktop-submenu
  {
    display: block;
  }

  .top-nav-layout:not([data-desktop]) .top-nav-mobile-controls,
  .top-nav-layout:not([data-desktop]) .top-nav-mobile-menu,
  .top-nav-layout:not([data-desktop]) .top-nav-user-mobile,
  .top-nav-layout[data-desktop='true'] .top-nav-mobile-toggle,
  .top-nav-layout[data-measuring] .top-nav-mobile-toggle,
  .top-nav-layout[data-desktop='true'] .top-nav-mobile-controls,
  .top-nav-layout[data-measuring] .top-nav-mobile-controls,
  .top-nav-layout[data-desktop='true'] .top-nav-mobile-menu,
  .top-nav-layout[data-desktop='true'] .top-nav-user-mobile
  {
    display: none;
  }

  .top-nav-layout[data-measuring]
  {
    visibility: hidden;
  }
}

@media (min-width: 1024px)
{
  .top-nav-bar
  {
    padding-inline: 12px;
    column-gap: 8px;
  }

  .top-nav-primary
  {
    column-gap: 6px;
  }

  .top-nav-layout .top-nav-brand-link
  {
    margin-inline: 8px;
    font-size: 1.25rem;
  }

  .top-nav-desktop-menu
  {
    column-gap: 2px;
  }

  .top-nav-desktop-menu,
  .top-nav-user-desktop
  {
    font-size: .9375rem;
  }

  .top-nav-desktop-menu .top-nav-menu-link
  {
    padding-inline: 12px;
  }

  .top-nav-user-desktop
  {
    padding-right: 8px;
  }
}

@media (min-width: 1280px)
{
  .top-nav-bar
  {
    column-gap: 12px;
  }

  .top-nav-primary
  {
    column-gap: 8px;
  }

  .top-nav-layout .top-nav-brand-link
  {
    margin-inline: 16px;
  }

  .top-nav-desktop-menu
  {
    column-gap: 4px;
  }

  .top-nav-desktop-menu,
  .top-nav-user-desktop
  {
    font-size: 1rem;
  }

  .top-nav-desktop-menu .top-nav-menu-link
  {
    padding-inline: 20px;
  }

  .top-nav-user-desktop
  {
    padding-right: 16px;
  }
}

.top-nav-layout[data-density='comfortable'] .top-nav-bar
{
  padding-inline: 12px;
  column-gap: 8px;
}

.top-nav-layout[data-density='comfortable'] .top-nav-primary
{
  column-gap: 6px;
}

.top-nav-layout[data-density='comfortable'] .top-nav-brand-link
{
  margin-inline: 8px;
  font-size: 1.25rem;
}

.top-nav-layout[data-density='comfortable'] .top-nav-desktop-menu
{
  column-gap: 2px;
}

.top-nav-layout[data-density='comfortable'] .top-nav-desktop-menu,
.top-nav-layout[data-density='comfortable'] .top-nav-user-desktop
{
  font-size: .9375rem;
}

.top-nav-layout[data-density='comfortable'] .top-nav-desktop-menu .top-nav-menu-link
{
  padding-inline: 12px;
}

.top-nav-layout[data-density='comfortable'] .top-nav-user-desktop
{
  padding-right: 8px;
}

.top-nav-layout[data-density='compact'] .top-nav-bar
{
  padding-inline: 8px;
  column-gap: 4px;
}

.top-nav-layout[data-density='compact'] .top-nav-primary
{
  column-gap: 4px;
}

.top-nav-layout[data-density='compact'] .top-nav-brand-link
{
  margin-inline: 4px;
  font-size: 1.125rem;
}

.top-nav-layout[data-density='compact'] .top-nav-desktop-menu
{
  column-gap: 0;
}

.top-nav-layout[data-density='compact'] .top-nav-desktop-menu,
.top-nav-layout[data-density='compact'] .top-nav-user-desktop
{
  font-size: .875rem;
}

.top-nav-layout[data-density='compact'] .top-nav-desktop-menu .top-nav-menu-link
{
  padding-inline: 8px;
}

.top-nav-layout[data-density='compact'] .top-nav-user-desktop
{
  padding-right: 4px;
}

.top-nav-brand-link,
.top-nav-mobile-toggle
{
  color: var(--top-nav-brand-link);
}

.top-nav-brand-link:hover,
.top-nav-mobile-toggle:hover
{
  color: color-mix(in oklab, var(--top-nav-brand-link), white 18%);
}

.top-nav-menu-link,
.top-nav-mobile-row
{
  color: var(--top-nav-menu-link);
}

.top-nav-menu-link:hover,
.top-nav-mobile-row:hover
{
  color: color-mix(in oklab, var(--top-nav-menu-link), white 18%);
}

.top-nav-highlight
{
  background: var(--top-nav-active-bg);
}

.top-nav-submenu
{
  background: var(--top-nav-submenu-bg);
}

.top-nav-mobile-menu .top-nav-submenu
{
  background: var(--top-nav-mobile-active-bg);
}

.top-nav-mobile-menu
{
  background: var(--top-nav-mobile-menu-bg);
}

.top-nav-mobile-active
{
  background: var(--top-nav-mobile-active-bg);
}

.tag-marquee__animated
{
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 100%;
  width: max-content;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  will-change: transform;
}

/* Loaded only by the development-only sample, with the OFL alongside the font. */
@font-face
{
  font-family: 'BTRC Mongolian Preview';
  src: url('/fonts/noto-sans-mongolian/NotoSansMongolian-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Development-only /mn-Mong layout. Unannotated pages retain horizontal text. */
[data-vertical-preview]
{
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

[data-vertical-preview] > :not(.top-nav-layout)
{
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

[data-vertical-preview] [data-sidebar-container]
{
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

[data-vertical-preview] .main-area
{
  min-width: 0;
  min-height: 0;
  overscroll-behavior: contain;
}

[data-vertical-preview] .main-area[data-vertical-content]
{
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}

[data-vertical-preview] .sidebar-panel
{
  width: 100%;
  height: var(--sidebar-height);
  min-height: 0;
  flex: none;
}

[data-vertical-preview] .sidebar
{
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  direction: ltr;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
}

[data-vertical-preview] .sidebar > *
{
  flex-shrink: 0;
}

[data-vertical-preview] .sidebar > form
{
  width: 16rem;
  height: 100%;
  overflow-y: auto;
}

[data-vertical-preview] .sidebar > form > ul
{
  position: relative;
}

[data-vertical-preview] .sidebar > div
{
  writing-mode: vertical-lr;
  text-orientation: mixed;
  height: 100%;
  margin: 0;
}

[data-vertical-preview] .sidebar :is(h2, h3, ul)
{
  margin: 0;
  margin-block-end: 1rem;
}

[data-vertical-preview] .sidebar-resize
{
  display: block;
  inset: auto 0 -.5rem;
  width: 100%;
  height: 1rem;
  cursor: row-resize;
}

[data-vertical-preview] .sidebar-resize::before
{
  inset: 50% 0 auto;
  width: 100%;
  height: 1px;
}

[data-vertical-preview] .vertical-preview-sample
{
  writing-mode: vertical-lr;
  text-orientation: mixed;
  font-family: 'BTRC Mongolian Preview', 'Mongolian Baiti', sans-serif;
  font-size: 1.25rem;
  line-height: 1.5;
  flex-shrink: 0;
}

/* The post grid fills each column downwards before continuing to the right. */
[data-vertical-preview] .posts-main-area > div
{
  display: flex;
  height: 100%;
  width: max-content;
  margin: 0;
  gap: 1rem;
}

[data-vertical-preview] .posts-main-area > div > div:first-child
{
  flex-direction: column;
  justify-content: flex-start;
  writing-mode: vertical-lr;
  text-orientation: mixed;
}

[data-vertical-preview] .posts-main-area > div > div:last-child
{
  display: flex;
  width: max-content;
  height: 100%;
  margin: 0;
  gap: 1rem;
}

[data-vertical-preview] .main-area[data-vertical-content] .post-list
{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 10rem;
  grid-template-rows: repeat(auto-fill, min(10rem, 100%));
  flex: none;
  width: max-content;
  height: 100%;
  writing-mode: horizontal-tb;
}

[data-vertical-preview] .main-area[data-vertical-content] .post-list > a
{
  height: 100%;
}

[data-vertical-preview] .main-area[data-vertical-content] nav
{
  flex: none;
  align-self: flex-start;
  margin: 0;
  writing-mode: horizontal-tb;
}

[data-vertical-preview] .tags-main-area
{
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
}

[data-vertical-preview] .tag-list-filter
{
  flex: none;
  width: min(24rem, 75vw);
  max-width: none;
  overflow-y: auto;
}

[data-vertical-preview] .tag-list-filter h1
{
  writing-mode: vertical-lr;
  text-orientation: mixed;
  max-height: 8rem;
  margin-block: 0;
}

[data-vertical-preview] .tag-list-filter input[type='number']
{
  max-width: 7rem;
}

[data-vertical-preview] .tag-list-results
{
  display: flex;
  flex: none;
  gap: 1rem;
  max-width: none;
  margin: 0;
}

[data-vertical-preview] .tag-list-table
{
  max-width: none;
  overflow-x: visible;
  overflow-y: auto;
}

[data-vertical-preview] .tag-list-table table
{
  writing-mode: vertical-lr;
  text-orientation: mixed;
  inline-size: max-content;
  block-size: max-content;
  min-width: 0;
}

[data-vertical-preview] .tag-list-table col
{
  width: auto;
}

[data-vertical-preview] .tag-list-table :is(th, td)
{
  min-inline-size: 2rem;
  max-inline-size: 16rem;
  text-align: start;
}

[data-vertical-preview] .tag-list-table thead
{
  border-bottom: 0;
  border-block-end: 2px solid currentColor;
}

[data-vertical-preview] .tag-list-table td:nth-child(2),
[data-vertical-preview] .tag-list-table time
{
  writing-mode: horizontal-tb;
  white-space: nowrap;
}

[data-vertical-preview] :is(.sidebar, .tag-list-table, .wiki-main-area) .tag-marquee,
[data-vertical-preview] :is(.sidebar, .tag-list-table, .wiki-main-area) .tag-marquee__static
{
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-inline-size: 16rem;
  opacity: 1;
}

[data-vertical-preview] :is(.sidebar, .tag-list-table, .wiki-main-area) .tag-marquee__animated
{
  display: none;
}

/* Prose flows through the viewport height and grows into columns on the right. */
[data-vertical-preview] .wiki-main-area
{
  display: flex;
  gap: 1rem;
}

[data-vertical-preview] .wiki-main-area > div
{
  flex: none;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  margin: 0;
}

[data-vertical-preview] .wiki-main-area > div > span
{
  writing-mode: horizontal-tb;
}

[data-vertical-preview] .wiki-main-area article,
[data-vertical-preview] .posts-main-area .localised-document
{
  writing-mode: vertical-lr;
  text-orientation: mixed;
  inline-size: 100%;
  block-size: max-content;
  max-width: none;
  margin: 0;
  flex: none;
}

[data-vertical-preview] .main-area[data-vertical-content] .localised-document
{
  max-width: none;
  overflow: visible;
}

[data-vertical-preview] .wiki-main-area article :is(h1, h2, h3, h4, p, ul, ol, blockquote)
{
  margin: 0;
  margin-block: 1em;
}

[data-vertical-preview] .wiki-main-area article :is(ul, ol)
{
  padding: 0;
  padding-inline-start: 1.5em;
}

[data-vertical-preview] .wiki-main-area article :is(img, video, iframe, svg)
{
  writing-mode: horizontal-tb;
  max-height: 100%;
  max-width: none;
  object-fit: contain;
}

[data-vertical-preview] .wiki-main-area article :is(pre, table, .not-prose),
[data-vertical-preview] .main-area[data-vertical-content] :is(code, time, input, select, textarea)
{
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

[data-vertical-preview] .wiki-main-area article :is(pre, table, .not-prose)
{
  display: inline-block;
  max-height: 100%;
  max-width: min(48rem, 80vw);
  overflow: auto;
  vertical-align: top;
}

[data-vertical-preview] .wiki-main-area article .not-prose
{
  width: max-content;
  height: 100%;
}

[data-vertical-preview] .wiki-main-area .not-prose > div
{
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

[data-vertical-preview] .wiki-main-area .not-prose > div > div:last-child
{
  flex: 1;
  min-height: 0;
}

@media (min-width: 768px)
{
  [data-vertical-preview].app-layout
  {
    flex-direction: row;
  }

  [data-vertical-preview] .top-nav-layout
  {
    display: flex;
    width: max-content;
    max-width: 50vw;
    height: 100%;
  }

  [data-vertical-preview] .top-nav-bar
  {
    flex-direction: column;
    flex: none;
    width: 7rem;
    height: 100%;
    padding: .5rem;
    gap: .5rem;
  }

  [data-vertical-preview] .top-nav-primary
  {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    height: auto;
    overflow-y: auto;
  }

  [data-vertical-preview] .top-nav-brand-link
  {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    max-height: 9rem;
    white-space: normal;
    margin-block: .5rem;
  }

  [data-vertical-preview] .top-nav-desktop-menu
  {
    flex-direction: column;
    width: 100%;
    height: auto;
  }

  [data-vertical-preview] .top-nav-desktop-menu > div:not(.top-nav-highlight)
  {
    width: 100%;
  }

  [data-vertical-preview] .top-nav-desktop-menu .top-nav-menu-link
  {
    justify-content: center;
    width: 100%;
    min-height: 3rem;
    height: auto;
    padding: .5rem;
  }

  [data-vertical-preview] .top-nav-menu-link > :not(svg, select),
  [data-vertical-preview] .top-nav-more-menu h2
  {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    max-height: 9rem;
    white-space: normal;
  }

  [data-vertical-preview] .top-nav-highlight
  {
    inset-inline-start: 0;
  }

  [data-vertical-preview] .top-nav-account
  {
    flex-direction: column;
    width: 100%;
    margin: 0;
  }

  [data-vertical-preview] .top-nav-account .top-nav-user-desktop
  {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  [data-vertical-preview] .top-nav-locale-name
  {
    display: inline;
    writing-mode: horizontal-tb;
  }

  [data-vertical-preview] .top-nav-desktop-submenu
  {
    min-width: 0;
    height: 100%;
  }

  [data-vertical-preview] .top-nav-submenu-content
  {
    width: max-content;
    max-width: 35vw;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }

  [data-vertical-preview] :is(.top-nav-submenu-items, .top-nav-more-links)
  {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  [data-vertical-preview] .top-nav-submenu-items .top-nav-menu-link
  {
    justify-content: center;
  }
}

@media (max-width: 767px)
{
  [data-vertical-preview] .top-nav-layout
  {
    max-height: 50dvh;
    overflow-y: auto;
  }
}