@janga/norna 0.7.23 → 0.7.25

package/src/styles/page-layout.css

@@ -40,7 +40,7 @@
 	background-color: transparent;
 }
 
-@media (min-width: 701px) {
+@media (min-width: 961px) {
 	.site-page-layout-tree > .site-content {
 		--layout-inline-start-margin: 0;
 		--layout-inline-end-margin: auto;
@@ -48,6 +48,17 @@
 	}
 }
 
+:is(.tree-local-navigation, .mobile-site-nav, .page-contents-navigation) {
+	--tree-disclosure-icon-width: 0.9rem;
+	--tree-disclosure-gap: 0.6rem;
+	--tree-disclosure-offset: calc(var(--tree-disclosure-icon-width) + var(--tree-disclosure-gap));
+	--tree-current-item-background: color-mix(
+		in srgb,
+		var(--color-surface-soft-background) 58%,
+		var(--color-page)
+	);
+}
+
 .tree-local-navigation {
 	position: sticky;
 	top: calc(var(--site-top-anchor-offset) + 1.25rem);
@@ -55,10 +66,138 @@
 	min-height: 0;
 	max-height: calc(100svh - var(--site-top-anchor-offset) - 2.5rem);
 	border-inline-end: 1px solid var(--color-nav-separator);
-	padding: 1.5rem 0;
+	padding: 1.25rem 0.75rem 1.25rem 0.35rem;
 	background: var(--color-page);
 	overflow-y: auto;
 	overscroll-behavior: contain;
+	scrollbar-gutter: stable;
+}
+
+.navigation-tree-controls {
+	position: sticky;
+	top: 0;
+	z-index: 4;
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto;
+	gap: 0.45rem;
+	margin: 0 0 0.85rem;
+	border-bottom: 1px solid var(--color-nav-separator);
+	padding: 0 0 0.75rem;
+	background: var(--color-page);
+}
+
+.navigation-tree-filter {
+	position: relative;
+	grid-column: 1 / -1;
+	display: flex;
+	align-items: center;
+}
+
+.navigation-tree-filter > svg {
+	position: absolute;
+	left: 0.55rem;
+	width: 0.95rem;
+	height: 0.95rem;
+	pointer-events: none;
+	opacity: 0.62;
+}
+
+.navigation-tree-filter > input {
+	min-width: 0;
+	width: 100%;
+	min-height: 2.15rem;
+	border: 1px solid var(--color-border);
+	border-radius: var(--corner-radius-small, 2px);
+	padding: 0.4rem 0.55rem 0.4rem 1.85rem;
+	background: var(--color-page);
+	color: var(--color-primary-text);
+	font: inherit;
+	font-size: 0.78rem;
+	letter-spacing: 0;
+}
+
+.navigation-tree-filter > input::placeholder {
+	color: var(--color-secondary-text);
+	opacity: 0.8;
+}
+
+.navigation-tree-filter > input:focus-visible {
+	outline: 2px solid var(--color-focus-ring);
+	outline-offset: 2px;
+}
+
+.navigation-tree-commands {
+	grid-column: 1 / -1;
+	display: flex;
+	justify-content: flex-end;
+	gap: 0.35rem;
+}
+
+.navigation-tree-commands > button {
+	display: grid;
+	place-items: center;
+	width: 2.15rem;
+	height: 2.15rem;
+	border: 1px solid var(--color-border);
+	border-radius: var(--corner-radius-small, 2px);
+	padding: 0;
+	background: var(--color-page);
+	color: var(--color-secondary-text);
+	cursor: pointer;
+}
+
+.navigation-tree-commands > button:hover,
+.navigation-tree-commands > button:focus-visible {
+	background: var(--color-surface-soft-background);
+	color: var(--color-primary-text);
+}
+
+.navigation-tree-commands > button:focus-visible {
+	outline: 2px solid var(--color-focus-ring);
+	outline-offset: 2px;
+}
+
+.navigation-tree-commands > button:disabled {
+	cursor: not-allowed;
+	opacity: 0.38;
+}
+
+.navigation-tree-commands svg {
+	width: 1rem;
+	height: 1rem;
+}
+
+.navigation-tree-filter-empty {
+	grid-column: 1 / -1;
+	margin: 0.2rem 0 0;
+	color: var(--color-secondary-text);
+	font-size: 0.75rem;
+	line-height: 1.4;
+}
+
+[data-tree-filter-active='true'] .navigation-page-sections,
+[data-tree-filter-active='true'] .navigation-page-sections-disclosure {
+	display: none;
+}
+
+:root[data-appearance='dark']
+	:is(.tree-local-navigation, .mobile-site-nav, .page-contents-navigation) {
+	--tree-current-item-background: color-mix(
+		in srgb,
+		var(--color-surface-emphasis-background) 64%,
+		var(--color-surface-soft-background)
+	);
+}
+
+@media (prefers-color-scheme: dark) {
+	:root[data-appearance='system']
+		:is(.tree-local-navigation, .mobile-site-nav, .page-contents-navigation) {
+		--tree-current-item-background: color-mix(
+			in srgb,
+			var(--color-surface-emphasis-background) 64%,
+			var(--color-surface-soft-background)
+		);
+	}
 }
 
 .page-contents-navigation {
@@ -78,14 +217,6 @@
 	overscroll-behavior: contain;
 }
 
-.page-contents-navigation-inline {
-	display: none;
-	width: min(100%, var(--reader-text-width, var(--page-text-width, var(--text-width))));
-	margin-inline: var(--layout-inline-start-margin) var(--layout-inline-end-margin);
-	border-block: 1px solid var(--color-nav-separator);
-	padding: 0.85rem 0;
-}
-
 .page-contents-navigation-label {
 	margin: 0 0 0.65rem;
 	color: var(--color-primary-text);
@@ -95,7 +226,7 @@
 	line-height: 1.3;
 }
 
-@media (min-width: 701px) and (max-width: 1100px) {
+@media (min-width: 961px) and (max-width: 1280px) {
 	.site-page-layout-tree {
 		--tree-layout-width: max(var(--page-width), 76rem);
 		grid-template-columns: var(--tree-navigation-width) minmax(0, 1fr);
@@ -104,16 +235,72 @@
 	.page-contents-navigation-rail {
 		display: none;
 	}
+}
 
-	.page-contents-navigation-inline {
+@media (min-width: 1281px) {
+	.site-page-layout-tree[data-page-contents-placement='contents-rail']
+		.tree-local-navigation .navigation-page-sections,
+	.site-page-layout-tree[data-page-contents-placement='contents-rail']
+		.tree-local-navigation .navigation-page-sections-disclosure {
+		display: none;
+	}
+}
+
+@media (max-width: 960px) {
+	.site-page-layout-tree {
 		display: block;
+		width: 100%;
+	}
+
+	.site-page-layout-tree > .site-content {
+		width: min(calc(100% - (var(--content-gutter) * 2)), var(--page-width));
+	}
+
+	.tree-local-navigation,
+	.page-contents-navigation {
+		display: none;
 	}
 }
 
 .navigation-page-sections {
-	margin: 0.15rem 0 0.55rem 0.3rem;
-	border-left: 2px solid color-mix(in srgb, currentColor 38%, transparent);
-	padding: 0.2rem 0 0.25rem 0.85rem;
+	margin: 0.1rem 0 0.45rem 0.25rem;
+	border-left: 1px solid color-mix(in srgb, currentColor 26%, transparent);
+	padding: 0.15rem 0 0.2rem 0.75rem;
+}
+
+.navigation-page-tree-sidebar
+	.navigation-page-sections-disclosure > .navigation-page-sections {
+	margin-inline-start: var(--tree-disclosure-offset);
+}
+
+.navigation-page-sections-disclosure > summary {
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: grid;
+	place-items: center;
+	width: var(--tree-disclosure-offset);
+	height: 1.95rem;
+	border: 0;
+	border-radius: var(--corner-radius-small, 2px);
+	list-style: none;
+	cursor: pointer;
+	color: var(--color-secondary-text);
+}
+
+.navigation-page-sections-disclosure > summary::-webkit-details-marker {
+	display: none;
+}
+
+.navigation-page-sections-disclosure > summary:hover,
+.navigation-page-sections-disclosure > summary:focus-visible {
+	background: color-mix(in srgb, currentColor 8%, transparent);
+	color: var(--color-primary-text);
+}
+
+.navigation-page-sections-disclosure[open]
+	> summary .navigation-page-chevron::before {
+	transform: rotate(90deg);
 }
 
 .navigation-page-tree,
@@ -127,67 +314,53 @@
 	position: relative;
 }
 
+.navigation-page-node[hidden] {
+	display: none !important;
+}
+
 .navigation-page-tree-sidebar .navigation-page-link {
 	display: block;
-	padding: 0.45rem 2rem 0.45rem 0;
+	border-radius: var(--corner-radius-small, 2px);
+	padding: 0.375rem 0.3rem 0.375rem var(--tree-disclosure-offset);
 	color: var(--color-secondary-text);
-	font-size: 0.86rem;
-	line-height: 1.35;
+	font-size: 0.84rem;
+	font-weight: 400;
+	line-height: 1.4;
 	text-decoration: none;
 }
 
-.navigation-page-tree-sidebar > .navigation-page-node > .navigation-page-link {
+.tree-local-navigation
+	> nav
+	> .navigation-page-tree-sidebar
+	> .navigation-page-node
+	> .navigation-page-link {
 	color: var(--color-primary-text);
-	font-size: 0.94rem;
-	font-weight: 700;
+	font-size: 0.9rem;
+	font-weight: 650;
 }
 
 .navigation-page-tree-sidebar .navigation-page-link:hover,
-.navigation-page-tree-sidebar .navigation-page-link:focus-visible,
-.navigation-page-tree-sidebar .navigation-page-link[aria-current='page'] {
+.navigation-page-tree-sidebar .navigation-page-link:focus-visible {
+	background: color-mix(in srgb, var(--color-surface-soft-background) 68%, transparent);
 	color: var(--color-primary-text);
 	text-decoration: underline;
 	text-decoration-thickness: 1px;
 	text-underline-offset: 0.28em;
 }
 
-.navigation-page-tree-sidebar .navigation-page-tree-sidebar {
-	margin: 0.25rem 0 0.25rem 0.3rem;
-	border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent);
-	padding-left: 0.85rem;
-}
-
-.navigation-page-branch:not(.navigation-page-disclosure) > summary {
-	position: absolute;
-	top: 0.25rem;
-	right: 0;
-	display: grid;
-	place-items: center;
-	width: 1.8rem;
-	height: 1.8rem;
-	border: 0;
-	border-radius: var(--corner-radius-small, 2px);
-	list-style: none;
-	cursor: pointer;
-	color: var(--color-secondary-text);
-}
-
-.navigation-page-branch:not(.navigation-page-disclosure) > summary::-webkit-details-marker {
-	display: none;
-}
-
-.navigation-page-branch:not(.navigation-page-disclosure) > summary:hover,
-.navigation-page-branch:not(.navigation-page-disclosure) > summary:focus-visible {
-	background: color-mix(in srgb, currentColor 8%, transparent);
+.navigation-page-tree-sidebar .navigation-page-link[aria-current='page'] {
+	background: var(--tree-current-item-background);
 	color: var(--color-primary-text);
+	font-weight: 650;
+	text-decoration: underline;
+	text-decoration-thickness: 1px;
+	text-underline-offset: 0.28em;
 }
 
-.navigation-page-branch:not(.navigation-page-disclosure) > summary > [aria-hidden='true']::before {
-	content: "+";
-}
-
-.navigation-page-branch:not(.navigation-page-disclosure)[open] > summary > [aria-hidden='true']::before {
-	content: "−";
+.navigation-page-tree-sidebar .navigation-page-tree-sidebar {
+	margin: 0.15rem 0 0.2rem 0.25rem;
+	border-left: 1px solid color-mix(in srgb, currentColor 16%, transparent);
+	padding-left: 0.75rem;
 }
 
 .navigation-page-disclosure > .navigation-page-summary {
@@ -197,9 +370,10 @@
 	width: 100%;
 	border: 0;
 	border-radius: var(--corner-radius-small, 2px);
-	padding: 0.45rem 0;
-	font-size: 0.86rem;
-	line-height: 1.35;
+	padding: 0.375rem 0.3rem 0.375rem 0;
+	font-size: 0.84rem;
+	font-weight: 400;
+	line-height: 1.4;
 	list-style: none;
 	cursor: pointer;
 	color: var(--color-secondary-text);
@@ -215,34 +389,91 @@
 	position: relative;
 }
 
-.navigation-page-disclosure-sidebar {
+.navigation-page-disclosure-sidebar.navigation-category-disclosure {
 	display: grid;
 	grid-template-columns: minmax(0, 1fr);
 }
 
-.navigation-page-disclosure-sidebar > .navigation-page-summary,
-.navigation-page-disclosure-sidebar > .navigation-page-open-link {
+.navigation-page-disclosure-sidebar.navigation-category-disclosure
+	> .navigation-page-summary {
+	display: grid;
+	grid-template-columns: var(--tree-disclosure-icon-width) minmax(0, 1fr);
+	column-gap: var(--tree-disclosure-gap);
+	justify-content: normal;
+}
+
+.navigation-page-disclosure-sidebar.navigation-category-disclosure
+	> .navigation-page-summary > .navigation-page-summary-title {
+	grid-column: 2;
+	width: auto;
+}
+
+.navigation-page-disclosure-sidebar.navigation-category-disclosure
+	> .navigation-page-summary > .navigation-page-chevron {
 	grid-column: 1;
 	grid-row: 1;
+	display: grid;
+	place-items: center;
+	width: var(--tree-disclosure-icon-width);
+	height: 1.35em;
 }
 
-.navigation-page-disclosure-sidebar > .navigation-page-open-link {
-	z-index: 1;
+.navigation-page-node-page-disclosure {
+	display: grid;
+	grid-template-columns: var(--tree-disclosure-offset) minmax(0, 1fr);
+}
+
+.navigation-page-node-page-disclosure
+	> .navigation-page-disclosure
+	> .navigation-page-summary {
+	grid-column: 1;
+	grid-row: 1;
+	display: grid;
+	place-items: center;
+	width: 100%;
+	min-height: 1.95rem;
+	padding: 0;
 }
 
-.navigation-page-disclosure-sidebar > .navigation-page-branch-content {
+.navigation-page-node-page-disclosure > .navigation-page-disclosure {
 	grid-column: 1;
+	grid-row: 1;
+}
+
+.navigation-page-node-page-disclosure > .navigation-page-open-link {
+	grid-column: 2;
+	grid-row: 1;
+}
+
+.navigation-page-node-page-disclosure > .navigation-page-branch-content {
+	grid-column: 1 / -1;
 	grid-row: 2;
 }
 
+.navigation-page-node-page-disclosure
+	> .navigation-page-disclosure:not([open])
+	~ .navigation-page-branch-content {
+	display: none;
+}
+
 .navigation-page-disclosure > .navigation-page-summary::-webkit-details-marker {
 	display: none;
 }
 
 .navigation-page-disclosure > .navigation-page-summary:hover,
-.navigation-page-disclosure > .navigation-page-summary:focus-visible,
+.navigation-page-disclosure > .navigation-page-summary:focus-visible {
+	background: color-mix(in srgb, var(--color-surface-soft-background) 68%, transparent);
+	color: var(--color-primary-text);
+}
+
 .navigation-page-disclosure[data-current-page='true'] > .navigation-page-summary {
+	background: var(--tree-current-item-background);
 	color: var(--color-primary-text);
+	font-weight: 650;
+}
+
+.navigation-page-disclosure[data-current-page='true'] + .navigation-page-open-link {
+	background: var(--tree-current-item-background);
 }
 
 .navigation-page-disclosure > .navigation-page-summary:hover > :first-child,
@@ -253,39 +484,43 @@
 	text-underline-offset: 0.28em;
 }
 
-.navigation-page-disclosure:not(.navigation-category-disclosure)[open]
-	> .navigation-page-summary > .navigation-page-summary-title {
-	opacity: 0;
-}
-
 .navigation-category-disclosure[data-current-branch='true'] > .navigation-page-summary {
 	color: var(--color-primary-text);
+	font-weight: 600;
 }
 
 .navigation-page-open-link {
-	position: absolute;
-	top: 0;
-	left: 0;
-	display: none;
-	width: calc(100% - 2rem);
-	padding: 0.45rem 0;
+	display: block;
+	min-width: 0;
+	width: 100%;
+	border-radius: var(--corner-radius-small, 2px);
+	padding: 0.375rem 0.3rem 0.375rem 0;
 	color: var(--color-secondary-text);
-	font-size: 0.86rem;
-	line-height: 1.35;
+	font-size: 0.84rem;
+	font-weight: 400;
+	line-height: 1.4;
 	overflow: visible;
 	overflow-wrap: anywhere;
 	text-decoration: none;
 	white-space: normal;
 }
 
-.navigation-page-disclosure[open] > .navigation-page-open-link {
-	display: block;
+.navigation-page-node-page-disclosure > .navigation-page-open-link {
+	width: 100%;
 }
 
 .navigation-page-open-link:hover,
-.navigation-page-open-link:focus-visible,
+.navigation-page-open-link:focus-visible {
+	background: color-mix(in srgb, var(--color-surface-soft-background) 68%, transparent);
+	color: var(--color-primary-text);
+	text-decoration: underline;
+	text-decoration-thickness: 1px;
+	text-underline-offset: 0.28em;
+}
+
 .navigation-page-open-link[aria-current='page'] {
 	color: var(--color-primary-text);
+	font-weight: 650;
 	text-decoration: underline;
 	text-decoration-thickness: 1px;
 	text-underline-offset: 0.28em;
@@ -303,35 +538,59 @@
 	transform: rotate(90deg);
 }
 
-.navigation-page-tree-sidebar > .navigation-page-node > .navigation-page-disclosure > .navigation-page-summary {
+.navigation-page-tree-sidebar .navigation-page-chevron::before {
+	width: 0.38rem;
+	height: 0.38rem;
+	border-right: 1.5px solid currentColor;
+	border-bottom: 1.5px solid currentColor;
+	content: '';
+	transform: rotate(-45deg);
+}
+
+.navigation-page-tree-sidebar
+	.navigation-page-disclosure[open]
+	> .navigation-page-summary .navigation-page-chevron::before,
+.navigation-page-tree-sidebar
+	.navigation-page-sections-disclosure[open]
+	> summary .navigation-page-chevron::before {
+	transform: rotate(45deg);
+}
+
+.tree-local-navigation
+	> nav
+	> .navigation-page-tree-sidebar
+	> .navigation-page-node
+	> .navigation-page-disclosure
+	> .navigation-page-summary {
 	color: var(--color-primary-text);
-	font-size: 0.94rem;
-	font-weight: 700;
+	font-size: 0.9rem;
+	font-weight: 650;
 }
 
-.navigation-page-tree-sidebar > .navigation-page-node > .navigation-page-disclosure > .navigation-page-open-link {
+.tree-local-navigation
+	> nav
+	> .navigation-page-tree-sidebar
+	> .navigation-page-node
+	> .navigation-page-open-link {
 	color: var(--color-primary-text);
-	font-size: 0.94rem;
-	font-weight: 700;
+	font-size: 0.9rem;
+	font-weight: 650;
 }
 
-.navigation-page-tree-sidebar .navigation-page-disclosure > .navigation-page-branch-content {
-	margin: 0.1rem 0 0.25rem 0.3rem;
-	border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent);
-	padding-left: 0.85rem;
+.navigation-page-tree-sidebar .navigation-page-disclosure > .navigation-page-branch-content,
+.navigation-page-tree-sidebar .navigation-page-node-page-disclosure > .navigation-page-branch-content {
+	margin: 0.1rem 0 0.2rem 0.25rem;
+	border-left: 1px solid color-mix(in srgb, currentColor 16%, transparent);
+	padding-left: 0.75rem;
 }
 
-.navigation-page-tree-sidebar .navigation-page-disclosure .navigation-page-tree-sidebar {
-	margin: 0.25rem 0;
+.navigation-page-tree-sidebar .navigation-page-disclosure .navigation-page-tree-sidebar,
+.navigation-page-tree-sidebar .navigation-page-branch-content > .navigation-page-tree-sidebar {
+	margin: 0.15rem 0;
 	border-left: 0;
 	padding-left: 0;
 }
 
-.navigation-page-disclosure[data-current-branch='true']:not([data-current-page='true']):not([data-sections-open='true'])
-	> .navigation-page-branch-content > .navigation-page-sections {
-	display: none;
-}
-
 .page-contents-links li + li {
 	margin-top: 0.45rem;
 }
@@ -360,6 +619,12 @@
 	text-underline-offset: 0.25em;
 }
 
+.page-contents-navigation-rail .page-contents-links a[aria-current='location'] {
+	border-radius: var(--corner-radius-small, 2px);
+	background: var(--tree-current-item-background);
+	box-shadow: 0 0 0 0.2rem var(--tree-current-item-background);
+}
+
 .page-contents-links a[aria-current='location']::before {
 	position: absolute;
 	top: 0.15em;
@@ -371,6 +636,24 @@
 	content: '';
 }
 
+.navigation-page-tree-sidebar .navigation-page-sections .page-contents-links a {
+	margin-inline: -0.4rem 0.2rem;
+	border-radius: var(--corner-radius-small, 2px);
+	padding-inline: 0.4rem;
+}
+
+.navigation-page-tree-sidebar
+	.navigation-page-sections .page-contents-links a[aria-current='location'] {
+	background: var(--tree-current-item-background);
+	color: var(--color-primary-text);
+	text-decoration-thickness: 1.5px;
+}
+
+.navigation-page-tree-sidebar
+	.navigation-page-sections .page-contents-links a[aria-current='location']::before {
+	content: none;
+}
+
 .site-breadcrumbs {
 	min-height: calc(clamp(1rem, 2.5vw, 1.5rem) + 1.35rem);
 	width: min(100%, var(--reader-text-width, var(--page-text-width, var(--text-width))));
@@ -435,3 +718,101 @@
 .site-content-has-breadcrumbs > .site-section:first-of-type {
 	padding-top: clamp(1.15rem, 2.5vw, 1.75rem);
 }
+
+.site-content-has-page-sequence > .site-section:last-of-type,
+.site-content-has-edit-source > .site-section:last-of-type {
+	padding-bottom: var(--space-content-block-gap);
+}
+
+.edit-source-link {
+	width: min(100%, var(--reader-text-width, var(--page-text-width, var(--text-width))));
+	margin: 0 var(--layout-inline-end-margin) var(--space-content-block-gap) var(--layout-inline-start-margin);
+	border-top: 1px solid var(--color-nav-separator);
+	padding-top: 0.75rem;
+	color: var(--color-secondary-text);
+	font-size: 0.84rem;
+}
+
+.edit-source-link a {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.45rem;
+	color: inherit;
+	text-decoration: none;
+}
+
+.edit-source-link a:hover,
+.edit-source-link a:focus-visible {
+	color: var(--color-primary-text);
+	text-decoration: underline;
+	text-underline-offset: 0.25em;
+}
+
+.edit-source-link svg {
+	width: 0.95rem;
+	height: 0.95rem;
+	stroke-width: 1.75;
+}
+
+.site-content-has-edit-source:not(.site-content-has-page-sequence) > .edit-source-link {
+	margin-bottom: var(--space-final-section-bottom);
+}
+
+.page-sequence-navigation {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 0.75rem;
+	width: min(100%, var(--reader-text-width, var(--page-text-width, var(--text-width))));
+	margin-inline: var(--layout-inline-start-margin) var(--layout-inline-end-margin);
+	padding: 0 0 var(--space-final-section-bottom);
+}
+
+.page-sequence-link {
+	display: grid;
+	grid-template-columns: auto minmax(0, 1fr);
+	align-items: center;
+	gap: 0.65rem;
+	min-width: 0;
+	border: 1px solid var(--color-nav-separator);
+	border-radius: var(--corner-radius-medium);
+	padding: 0.8rem;
+	color: var(--color-primary-text);
+	text-decoration: none;
+}
+
+.page-sequence-link:hover,
+.page-sequence-link:focus-visible {
+	border-color: var(--color-primary-text);
+	background: var(--color-surface-soft-background);
+}
+
+.page-sequence-link > svg {
+	width: 1rem;
+	height: 1rem;
+	stroke-width: 1.75;
+}
+
+.page-sequence-link > span {
+	display: grid;
+	min-width: 0;
+	gap: 0.15rem;
+}
+
+.page-sequence-next {
+	grid-template-columns: minmax(0, 1fr) auto;
+	text-align: right;
+}
+
+.page-sequence-direction {
+	color: var(--color-secondary-text);
+	font-size: 0.72rem;
+	font-weight: 650;
+	line-height: 1.3;
+}
+
+.page-sequence-title {
+	font-size: 0.92rem;
+	font-weight: 650;
+	line-height: 1.35;
+	overflow-wrap: anywhere;
+}