yattho_view_components 0.0.1

data/app/lib/yattho/css/layout.css

@@ -0,0 +1,1541 @@
+.AppFrame .AppFrame-a11yNav {
+  position: absolute;
+  z-index: 1000;
+  display: flex;
+  width: 100%;
+  padding: var(--base-size-16, 16px);
+  background: var(--color-canvas-inset);
+  padding-block-end: calc(var(--base-size-16, 16px) - var(--yattho-borderWidth-thin, 1px));
+  isolation: isolate;
+  align-items: center;
+  gap: var(--base-size-8, 8px)
+}
+
+.AppFrame .AppFrame-a11yNav:not(:focus-within) {
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  border: 0
+}
+
+.AppFrame .AppFrame-a11yNav:focus-within {
+  top: 0;
+  left: 0
+}
+
+@media(max-width: 767.98px) {
+  .AppFrame .AppFrame-a11yNav:focus-within {
+      justify-content: center
+  }
+}
+
+.AppFrame .AppFrame-a11yLink {
+  transition: none
+}
+
+.AppFrame .AppFrame-a11yLink:not(:focus) {
+  display: block;
+  width: var(--base-size-8, 8px);
+  height: var(--base-size-8, 8px);
+  overflow: hidden;
+  text-indent: var(--base-size-128, 128px);
+  pointer-events: none;
+  background: var(--color-border-default);
+  border-radius: var(--yattho-borderRadius-full, 100vh)
+}
+
+.AppFrame .AppFrame-a11yLink:focus {
+  z-index: 20;
+  display: grid;
+  width: auto;
+  height: auto;
+  min-height: var(--yattho-control-medium-size, 32px);
+  padding: 0 var(--yattho-control-medium-paddingInline-spacious, 16px);
+  overflow: auto;
+  color: var(--color-fg-on-emphasis);
+  background: var(--color-accent-emphasis);
+  border-radius: var(--yattho-borderRadius-full, 100vh);
+  align-items: center
+}
+
+@media(pointer: coarse) {
+  .AppFrame .AppFrame-a11yLink:focus::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 100%;
+      height: 100%;
+      min-height: var(--yattho-control-minTarget-coarse, 44px);
+      content: "";
+      transform: translateX(-50%) translateY(-50%)
+  }
+}
+
+@media(prefers-reduced-motion: no-preference) {
+  .AppFrame .AppFrame-a11yLink:focus {
+      animation: AppFrame-a11yLink-focus 200ms ease-out
+  }
+}
+
+@keyframes AppFrame-a11yLink-focus {
+  0% {
+      color: var(--color-accent-emphasis);
+      transform: scale(0.3, 0.25)
+  }
+
+  50% {
+      color: var(--color-accent-emphasis);
+      transform: scale(1, 1)
+  }
+
+  55% {
+      color: var(--color-fg-on-emphasis)
+  }
+
+  100% {
+      transform: scaleX(1)
+  }
+}
+
+.AppFrame .AppFrame-main {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column
+}
+
+@supports(height: 100dvh) {
+  .AppFrame .AppFrame-main {
+      min-height: 100dvh
+  }
+}
+
+.AppFrame .AppFrame-header-wrapper {
+  position: relative;
+  height: min-content;
+  overflow: visible
+}
+
+.AppFrame .AppFrame-header-wrapper .AppFrame-header {
+  position: sticky;
+  top: 0;
+  z-index: 1
+}
+
+.AppFrame .AppFrame-header {
+  flex: 0 0 auto
+}
+
+.AppFrame .AppFrame-subheader {
+  flex: 0 0 auto
+}
+
+.AppFrame .AppFrame-body {
+  flex: 1 0;
+  height: 100%
+}
+
+.AppFrame .AppFrame-footer {
+  flex: 0 0 auto
+}
+
+.container-sm {
+  max-width: 544px;
+  margin-right: auto;
+  margin-left: auto
+}
+
+.container-md {
+  max-width: 768px;
+  margin-right: auto;
+  margin-left: auto
+}
+
+.container-lg {
+  max-width: 1012px;
+  margin-right: auto;
+  margin-left: auto
+}
+
+.container-xl {
+  max-width: 1280px;
+  margin-right: auto;
+  margin-left: auto
+}
+
+.col-1 {
+  width: 8.33333333%
+}
+
+.col-2 {
+  width: 16.66666666%
+}
+
+.col-3 {
+  width: 24.99999999%
+}
+
+.col-4 {
+  width: 33.33333332%
+}
+
+.col-5 {
+  width: 41.66666665%
+}
+
+.col-6 {
+  width: 49.99999998%
+}
+
+.col-7 {
+  width: 58.33333331%
+}
+
+.col-8 {
+  width: 66.66666664%
+}
+
+.col-9 {
+  width: 74.99999997%
+}
+
+.col-10 {
+  width: 83.3333333%
+}
+
+.col-11 {
+  width: 91.66666663%
+}
+
+.col-12 {
+  width: 100%
+}
+
+@media(min-width: 544px) {
+  .col-sm-1 {
+      width: 8.33333333%
+  }
+
+  .col-sm-2 {
+      width: 16.66666666%
+  }
+
+  .col-sm-3 {
+      width: 24.99999999%
+  }
+
+  .col-sm-4 {
+      width: 33.33333332%
+  }
+
+  .col-sm-5 {
+      width: 41.66666665%
+  }
+
+  .col-sm-6 {
+      width: 49.99999998%
+  }
+
+  .col-sm-7 {
+      width: 58.33333331%
+  }
+
+  .col-sm-8 {
+      width: 66.66666664%
+  }
+
+  .col-sm-9 {
+      width: 74.99999997%
+  }
+
+  .col-sm-10 {
+      width: 83.3333333%
+  }
+
+  .col-sm-11 {
+      width: 91.66666663%
+  }
+
+  .col-sm-12 {
+      width: 100%
+  }
+}
+
+@media(min-width: 768px) {
+  .col-md-1 {
+      width: 8.33333333%
+  }
+
+  .col-md-2 {
+      width: 16.66666666%
+  }
+
+  .col-md-3 {
+      width: 24.99999999%
+  }
+
+  .col-md-4 {
+      width: 33.33333332%
+  }
+
+  .col-md-5 {
+      width: 41.66666665%
+  }
+
+  .col-md-6 {
+      width: 49.99999998%
+  }
+
+  .col-md-7 {
+      width: 58.33333331%
+  }
+
+  .col-md-8 {
+      width: 66.66666664%
+  }
+
+  .col-md-9 {
+      width: 74.99999997%
+  }
+
+  .col-md-10 {
+      width: 83.3333333%
+  }
+
+  .col-md-11 {
+      width: 91.66666663%
+  }
+
+  .col-md-12 {
+      width: 100%
+  }
+}
+
+@media(min-width: 1012px) {
+  .col-lg-1 {
+      width: 8.33333333%
+  }
+
+  .col-lg-2 {
+      width: 16.66666666%
+  }
+
+  .col-lg-3 {
+      width: 24.99999999%
+  }
+
+  .col-lg-4 {
+      width: 33.33333332%
+  }
+
+  .col-lg-5 {
+      width: 41.66666665%
+  }
+
+  .col-lg-6 {
+      width: 49.99999998%
+  }
+
+  .col-lg-7 {
+      width: 58.33333331%
+  }
+
+  .col-lg-8 {
+      width: 66.66666664%
+  }
+
+  .col-lg-9 {
+      width: 74.99999997%
+  }
+
+  .col-lg-10 {
+      width: 83.3333333%
+  }
+
+  .col-lg-11 {
+      width: 91.66666663%
+  }
+
+  .col-lg-12 {
+      width: 100%
+  }
+}
+
+@media(min-width: 1280px) {
+  .col-xl-1 {
+      width: 8.33333333%
+  }
+
+  .col-xl-2 {
+      width: 16.66666666%
+  }
+
+  .col-xl-3 {
+      width: 24.99999999%
+  }
+
+  .col-xl-4 {
+      width: 33.33333332%
+  }
+
+  .col-xl-5 {
+      width: 41.66666665%
+  }
+
+  .col-xl-6 {
+      width: 49.99999998%
+  }
+
+  .col-xl-7 {
+      width: 58.33333331%
+  }
+
+  .col-xl-8 {
+      width: 66.66666664%
+  }
+
+  .col-xl-9 {
+      width: 74.99999997%
+  }
+
+  .col-xl-10 {
+      width: 83.3333333%
+  }
+
+  .col-xl-11 {
+      width: 91.66666663%
+  }
+
+  .col-xl-12 {
+      width: 100%
+  }
+}
+
+.gutter {
+  margin-right: -16px;
+  margin-left: -16px
+}
+
+.gutter>[class*=col-] {
+  padding-right: 16px !important;
+  padding-left: 16px !important
+}
+
+.gutter-condensed {
+  margin-right: -8px;
+  margin-left: -8px
+}
+
+.gutter-condensed>[class*=col-] {
+  padding-right: 8px !important;
+  padding-left: 8px !important
+}
+
+.gutter-spacious {
+  margin-right: -24px;
+  margin-left: -24px
+}
+
+.gutter-spacious>[class*=col-] {
+  padding-right: 24px !important;
+  padding-left: 24px !important
+}
+
+@media(min-width: 544px) {
+  .gutter-sm {
+      margin-right: -16px;
+      margin-left: -16px
+  }
+
+  .gutter-sm>[class*=col-] {
+      padding-right: 16px !important;
+      padding-left: 16px !important
+  }
+
+  .gutter-sm-condensed {
+      margin-right: -8px;
+      margin-left: -8px
+  }
+
+  .gutter-sm-condensed>[class*=col-] {
+      padding-right: 8px !important;
+      padding-left: 8px !important
+  }
+
+  .gutter-sm-spacious {
+      margin-right: -24px;
+      margin-left: -24px
+  }
+
+  .gutter-sm-spacious>[class*=col-] {
+      padding-right: 24px !important;
+      padding-left: 24px !important
+  }
+}
+
+@media(min-width: 768px) {
+  .gutter-md {
+      margin-right: -16px;
+      margin-left: -16px
+  }
+
+  .gutter-md>[class*=col-] {
+      padding-right: 16px !important;
+      padding-left: 16px !important
+  }
+
+  .gutter-md-condensed {
+      margin-right: -8px;
+      margin-left: -8px
+  }
+
+  .gutter-md-condensed>[class*=col-] {
+      padding-right: 8px !important;
+      padding-left: 8px !important
+  }
+
+  .gutter-md-spacious {
+      margin-right: -24px;
+      margin-left: -24px
+  }
+
+  .gutter-md-spacious>[class*=col-] {
+      padding-right: 24px !important;
+      padding-left: 24px !important
+  }
+}
+
+@media(min-width: 1012px) {
+  .gutter-lg {
+      margin-right: -16px;
+      margin-left: -16px
+  }
+
+  .gutter-lg>[class*=col-] {
+      padding-right: 16px !important;
+      padding-left: 16px !important
+  }
+
+  .gutter-lg-condensed {
+      margin-right: -8px;
+      margin-left: -8px
+  }
+
+  .gutter-lg-condensed>[class*=col-] {
+      padding-right: 8px !important;
+      padding-left: 8px !important
+  }
+
+  .gutter-lg-spacious {
+      margin-right: -24px;
+      margin-left: -24px
+  }
+
+  .gutter-lg-spacious>[class*=col-] {
+      padding-right: 24px !important;
+      padding-left: 24px !important
+  }
+}
+
+@media(min-width: 1280px) {
+  .gutter-xl {
+      margin-right: -16px;
+      margin-left: -16px
+  }
+
+  .gutter-xl>[class*=col-] {
+      padding-right: 16px !important;
+      padding-left: 16px !important
+  }
+
+  .gutter-xl-condensed {
+      margin-right: -8px;
+      margin-left: -8px
+  }
+
+  .gutter-xl-condensed>[class*=col-] {
+      padding-right: 8px !important;
+      padding-left: 8px !important
+  }
+
+  .gutter-xl-spacious {
+      margin-right: -24px;
+      margin-left: -24px
+  }
+
+  .gutter-xl-spacious>[class*=col-] {
+      padding-right: 24px !important;
+      padding-left: 24px !important
+  }
+}
+
+.offset-1 {
+  margin-left: 8.33333333% !important
+}
+
+.offset-2 {
+  margin-left: 16.66666666% !important
+}
+
+.offset-3 {
+  margin-left: 24.99999999% !important
+}
+
+.offset-4 {
+  margin-left: 33.33333332% !important
+}
+
+.offset-5 {
+  margin-left: 41.66666665% !important
+}
+
+.offset-6 {
+  margin-left: 49.99999998% !important
+}
+
+.offset-7 {
+  margin-left: 58.33333331% !important
+}
+
+.offset-8 {
+  margin-left: 66.66666664% !important
+}
+
+.offset-9 {
+  margin-left: 74.99999997% !important
+}
+
+.offset-10 {
+  margin-left: 83.3333333% !important
+}
+
+.offset-11 {
+  margin-left: 91.66666663% !important
+}
+
+@media(min-width: 544px) {
+  .offset-sm-1 {
+      margin-left: 8.33333333% !important
+  }
+
+  .offset-sm-2 {
+      margin-left: 16.66666666% !important
+  }
+
+  .offset-sm-3 {
+      margin-left: 24.99999999% !important
+  }
+
+  .offset-sm-4 {
+      margin-left: 33.33333332% !important
+  }
+
+  .offset-sm-5 {
+      margin-left: 41.66666665% !important
+  }
+
+  .offset-sm-6 {
+      margin-left: 49.99999998% !important
+  }
+
+  .offset-sm-7 {
+      margin-left: 58.33333331% !important
+  }
+
+  .offset-sm-8 {
+      margin-left: 66.66666664% !important
+  }
+
+  .offset-sm-9 {
+      margin-left: 74.99999997% !important
+  }
+
+  .offset-sm-10 {
+      margin-left: 83.3333333% !important
+  }
+
+  .offset-sm-11 {
+      margin-left: 91.66666663% !important
+  }
+}
+
+@media(min-width: 768px) {
+  .offset-md-1 {
+      margin-left: 8.33333333% !important
+  }
+
+  .offset-md-2 {
+      margin-left: 16.66666666% !important
+  }
+
+  .offset-md-3 {
+      margin-left: 24.99999999% !important
+  }
+
+  .offset-md-4 {
+      margin-left: 33.33333332% !important
+  }
+
+  .offset-md-5 {
+      margin-left: 41.66666665% !important
+  }
+
+  .offset-md-6 {
+      margin-left: 49.99999998% !important
+  }
+
+  .offset-md-7 {
+      margin-left: 58.33333331% !important
+  }
+
+  .offset-md-8 {
+      margin-left: 66.66666664% !important
+  }
+
+  .offset-md-9 {
+      margin-left: 74.99999997% !important
+  }
+
+  .offset-md-10 {
+      margin-left: 83.3333333% !important
+  }
+
+  .offset-md-11 {
+      margin-left: 91.66666663% !important
+  }
+}
+
+@media(min-width: 1012px) {
+  .offset-lg-1 {
+      margin-left: 8.33333333% !important
+  }
+
+  .offset-lg-2 {
+      margin-left: 16.66666666% !important
+  }
+
+  .offset-lg-3 {
+      margin-left: 24.99999999% !important
+  }
+
+  .offset-lg-4 {
+      margin-left: 33.33333332% !important
+  }
+
+  .offset-lg-5 {
+      margin-left: 41.66666665% !important
+  }
+
+  .offset-lg-6 {
+      margin-left: 49.99999998% !important
+  }
+
+  .offset-lg-7 {
+      margin-left: 58.33333331% !important
+  }
+
+  .offset-lg-8 {
+      margin-left: 66.66666664% !important
+  }
+
+  .offset-lg-9 {
+      margin-left: 74.99999997% !important
+  }
+
+  .offset-lg-10 {
+      margin-left: 83.3333333% !important
+  }
+
+  .offset-lg-11 {
+      margin-left: 91.66666663% !important
+  }
+}
+
+@media(min-width: 1280px) {
+  .offset-xl-1 {
+      margin-left: 8.33333333% !important
+  }
+
+  .offset-xl-2 {
+      margin-left: 16.66666666% !important
+  }
+
+  .offset-xl-3 {
+      margin-left: 24.99999999% !important
+  }
+
+  .offset-xl-4 {
+      margin-left: 33.33333332% !important
+  }
+
+  .offset-xl-5 {
+      margin-left: 41.66666665% !important
+  }
+
+  .offset-xl-6 {
+      margin-left: 49.99999998% !important
+  }
+
+  .offset-xl-7 {
+      margin-left: 58.33333331% !important
+  }
+
+  .offset-xl-8 {
+      margin-left: 66.66666664% !important
+  }
+
+  .offset-xl-9 {
+      margin-left: 74.99999997% !important
+  }
+
+  .offset-xl-10 {
+      margin-left: 83.3333333% !important
+  }
+
+  .offset-xl-11 {
+      margin-left: 91.66666663% !important
+  }
+}
+
+:root {
+  --Layout-pane-width: 220px;
+  --Layout-content-width: 100%;
+  --Layout-template-columns: 1fr var(--Layout-pane-width);
+  --Layout-template-areas: "content pane";
+  --Layout-column-gap: 16px;
+  --Layout-row-gap: 16px;
+  --Layout-outer-spacing-x: 0px;
+  --Layout-outer-spacing-y: 0px;
+  --Layout-inner-spacing-min: 0px;
+  --Layout-inner-spacing-max: 0px
+}
+
+.PageLayout {
+  display: block;
+  margin: var(--Layout-outer-spacing-y) var(--Layout-outer-spacing-x)
+}
+
+@media(min-width: 768px) {
+  .PageLayout.PageLayout--panePos-start {
+      --Layout-template-columns: var(--Layout-pane-width) minmax(0, calc(100% - var(--Layout-pane-width) - var(--Layout-column-gap)));
+      --Layout-template-areas: "pane content"
+  }
+
+  .PageLayout.PageLayout--panePos-end {
+      --Layout-template-columns: minmax(0, calc(100% - var(--Layout-pane-width) - var(--Layout-column-gap))) var(--Layout-pane-width);
+      --Layout-template-areas: "content pane"
+  }
+
+  .PageLayout .PageLayout-header--hasDivider {
+      padding-bottom: max(var(--Layout-row-gap), var(--Layout-inner-spacing-min));
+      border-bottom: 1px solid var(--color-border-default)
+  }
+
+  .PageLayout .PageLayout-footer--hasDivider {
+      padding-top: max(var(--Layout-row-gap), var(--Layout-inner-spacing-min));
+      border-top: 1px solid var(--color-border-default)
+  }
+
+  .PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-start .PageLayout-pane {
+      border-right: 1px solid var(--color-border-default)
+  }
+
+  .PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-start:not(.PageLayout--columnGap-none) .PageLayout-pane {
+      padding-right: calc(var(--Layout-column-gap) - 1px);
+      margin-right: calc(var(--Layout-column-gap)*-1)
+  }
+
+  .PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-start:not(.PageLayout--columnGap-none) .PageLayout-content {
+      margin-left: var(--Layout-column-gap)
+  }
+
+  .PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-end .PageLayout-pane {
+      border-left: 1px solid var(--color-border-default)
+  }
+
+  .PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-end:not(.PageLayout--columnGap-none) .PageLayout-pane {
+      padding-left: calc(var(--Layout-column-gap) - 1px);
+      margin-left: calc(var(--Layout-column-gap)*-1)
+  }
+
+  .PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-end:not(.PageLayout--columnGap-none) .PageLayout-content {
+      margin-right: var(--Layout-column-gap)
+  }
+
+  .PageLayout .PageLayout-pane--sticky {
+      position: sticky;
+      top: 0;
+      max-height: 100vh;
+      overflow: auto;
+      scrollbar-width: thin
+  }
+
+  @supports(max-height: 100dvh) {
+      .PageLayout .PageLayout-pane--sticky {
+          max-height: 100dvh
+      }
+  }
+
+  .PageLayout [class^=PageLayout-content-centered-] {
+      max-width: calc(var(--Layout-content-width) + var(--Layout-pane-width) + var(--Layout-column-gap));
+      margin-right: auto;
+      margin-left: auto
+  }
+
+  .PageLayout.PageLayout--hasPaneDivider [class^=PageLayout-content-centered-] {
+      max-width: calc(var(--Layout-content-width) + var(--Layout-pane-width) + var(--Layout-column-gap)*2)
+  }
+
+  .PageLayout.PageLayout--panePos-start [class^=PageLayout-content-centered-]>[class^=container-] {
+      margin-left: 0
+  }
+
+  .PageLayout.PageLayout--panePos-end [class^=PageLayout-content-centered-]>[class^=container-] {
+      margin-right: 0
+  }
+
+  .PageLayout .PageLayout-content-centered-sm {
+      --Layout-content-width: 544px
+  }
+
+  .PageLayout .PageLayout-content-centered-md {
+      --Layout-content-width: 768px
+  }
+
+  .PageLayout .PageLayout-content-centered-lg {
+      --Layout-content-width: 1012px
+  }
+
+  .PageLayout .PageLayout-content-centered-xl {
+      --Layout-content-width: 1280px
+  }
+}
+
+@media(min-width: 768px)and (min-width: 544px) {
+  .PageLayout {
+      --Layout-pane-width: 220px
+  }
+}
+
+@media(min-width: 768px)and (min-width: 768px) {
+  .PageLayout {
+      --Layout-pane-width: 256px
+  }
+}
+
+@media(min-width: 768px)and (min-width: 1012px) {
+  .PageLayout {
+      --Layout-pane-width: 296px
+  }
+}
+
+@media(min-width: 768px)and (min-width: 768px) {
+  .PageLayout.PageLayout--paneWidth-narrow {
+      --Layout-pane-width: 240px
+  }
+}
+
+@media(min-width: 768px)and (min-width: 1012px) {
+  .PageLayout.PageLayout--paneWidth-narrow {
+      --Layout-pane-width: 256px
+  }
+}
+
+@media(min-width: 768px)and (min-width: 1012px) {
+  .PageLayout.PageLayout--paneWidth-wide {
+      --Layout-pane-width: 320px
+  }
+}
+
+@media(min-width: 768px)and (min-width: 1280px) {
+  .PageLayout.PageLayout--paneWidth-wide {
+      --Layout-pane-width: 336px
+  }
+}
+
+@media(max-width: 767.98px) {
+  .PageLayout.PageLayout--responsive-stackRegions {
+      --Layout-template-columns: 1fr;
+      --Layout-template-areas: "content" "pane"
+  }
+
+  .PageLayout.PageLayout--responsive-stackRegions.PageLayout--responsive-panePos-start {
+      --Layout-template-areas: "pane" "content"
+  }
+
+  .PageLayout.PageLayout--responsive-separateRegions {
+      --Layout-template-columns: 1fr;
+      --Layout-template-areas: "content"
+  }
+
+  .PageLayout.PageLayout--responsive-separateRegions.PageLayout--responsive-primary-content {
+      --Layout-template-areas: "content"
+  }
+
+  .PageLayout.PageLayout--responsive-separateRegions.PageLayout--responsive-primary-content .PageLayout-pane {
+      display: none
+  }
+
+  .PageLayout.PageLayout--responsive-separateRegions.PageLayout--responsive-primary-pane {
+      --Layout-template-areas: "pane"
+  }
+
+  .PageLayout.PageLayout--responsive-separateRegions.PageLayout--responsive-primary-pane .PageLayout-content {
+      display: none
+  }
+
+  .PageLayout .PageLayout-region--dividerNarrow-line-before {
+      position: relative;
+      margin-top: var(--Layout-row-gap)
+  }
+
+  .PageLayout .PageLayout-region--dividerNarrow-line-before::before {
+      position: absolute;
+      left: calc(var(--Layout-outer-spacing-x)*-1);
+      display: block;
+      width: calc(100% + var(--Layout-outer-spacing-x)*2);
+      height: 1px;
+      content: "";
+      background-color: var(--color-border-default);
+      top: calc(-1px - var(--Layout-row-gap))
+  }
+
+  .PageLayout .PageLayout-region--dividerNarrow-line-after {
+      position: relative;
+      margin-bottom: var(--Layout-row-gap)
+  }
+
+  .PageLayout .PageLayout-region--dividerNarrow-line-after::after {
+      position: absolute;
+      left: calc(var(--Layout-outer-spacing-x)*-1);
+      display: block;
+      width: calc(100% + var(--Layout-outer-spacing-x)*2);
+      height: 1px;
+      content: "";
+      background-color: var(--color-border-default);
+      bottom: calc(-1px - var(--Layout-row-gap))
+  }
+
+  .PageLayout .PageLayout-region--dividerNarrow-filled-before {
+      position: relative;
+      margin-top: calc(8px + var(--Layout-row-gap))
+  }
+
+  .PageLayout .PageLayout-region--dividerNarrow-filled-before::after {
+      position: absolute;
+      bottom: calc(8px * -1);
+      left: calc(var(--Layout-outer-spacing-x)*-1);
+      display: block;
+      width: calc(100% + var(--Layout-outer-spacing-x)*2);
+      height: 8px;
+      content: "";
+      background-color: var(--color-canvas-inset);
+      box-shadow: inset 0 1px var(--color-border-default), inset 0 -1px var(--color-border-default);
+      top: calc(-8px - var(--Layout-row-gap))
+  }
+
+  .PageLayout .PageLayout-region--dividerNarrow-filled-after {
+      position: relative;
+      margin-bottom: calc(8px + var(--Layout-row-gap))
+  }
+
+  .PageLayout .PageLayout-region--dividerNarrow-filled-after::before {
+      position: absolute;
+      bottom: calc(8px * -1);
+      left: calc(var(--Layout-outer-spacing-x)*-1);
+      display: block;
+      width: calc(100% + var(--Layout-outer-spacing-x)*2);
+      height: 8px;
+      content: "";
+      background-color: var(--color-canvas-inset);
+      box-shadow: inset 0 1px var(--color-border-default), inset 0 -1px var(--color-border-default);
+      bottom: calc(-8px - var(--Layout-row-gap))
+  }
+}
+
+.PageLayout-wrapper {
+  display: grid;
+  grid: auto-flow/1fr;
+  row-gap: var(--Layout-row-gap)
+}
+
+.PageLayout-columns {
+  display: grid;
+  column-gap: var(--Layout-column-gap);
+  row-gap: var(--Layout-row-gap);
+  grid-template-columns: var(--Layout-template-columns);
+  grid-template-rows: 1fr;
+  grid-template-areas: var(--Layout-template-areas)
+}
+
+.PageLayout-columns .PageLayout-content {
+  padding-right: var(--Layout-inner-spacing-max);
+  padding-left: var(--Layout-inner-spacing-max);
+  grid-area: content
+}
+
+.PageLayout-columns .PageLayout-pane {
+  grid-area: pane
+}
+
+.PageLayout--outerSpacing-normal {
+  --Layout-outer-spacing-x: 16px;
+  --Layout-outer-spacing-y: 16px
+}
+
+@media(min-width: 1012px) {
+  .PageLayout--outerSpacing-normal {
+      --Layout-outer-spacing-x: 24px;
+      --Layout-outer-spacing-y: 24px
+  }
+}
+
+.PageLayout--outerSpacing-condensed {
+  --Layout-outer-spacing-x: 16px;
+  --Layout-outer-spacing-y: 16px
+}
+
+.PageLayout--innerSpacing-normal {
+  --Layout-inner-spacing-min: 16px;
+  --Layout-inner-spacing-max: 16px
+}
+
+@media(min-width: 1012px) {
+  .PageLayout--innerSpacing-normal {
+      --Layout-inner-spacing-max: 24px
+  }
+}
+
+.PageLayout--innerSpacing-condensed {
+  --Layout-inner-spacing-min: 16px;
+  --Layout-inner-spacing-max: 16px
+}
+
+.PageLayout--columnGap-normal {
+  --Layout-column-gap: 16px
+}
+
+@media(min-width: 1012px) {
+  .PageLayout--columnGap-normal {
+      --Layout-column-gap: 24px
+  }
+}
+
+.PageLayout--columnGap-condensed {
+  --Layout-column-gap: 16px
+}
+
+.PageLayout--columnGap-none {
+  --Layout-column-gap: 0px
+}
+
+.PageLayout--rowGap-normal {
+  --Layout-row-gap: 16px
+}
+
+@media(min-width: 1012px) {
+  .PageLayout--rowGap-normal {
+      --Layout-row-gap: 24px
+  }
+}
+
+.PageLayout--rowGap-none {
+  --Layout-row-gap: 0px
+}
+
+.PageLayout--rowGap-condensed {
+  --Layout-row-gap: 16px
+}
+
+.PageLayout-header,
+.PageLayout-content,
+.PageLayout-pane,
+.PageLayout-footer {
+  padding: var(--Layout-inner-spacing-min)
+}
+
+.Stack {
+  --Stack-gap-whenRegular: var(--yattho-stack-gap-normal, 16px);
+  --Stack-gap-whenNarrow: var(--yattho-stack-gap-normal, 16px);
+  --Stack-gap-whenWide: var(--Stack-gap-whenRegular);
+  --Stack-divider-color: var(--color-border-default);
+  display: flex;
+  flex-flow: column;
+  align-items: stretch;
+  align-content: flex-start;
+  gap: var(--Stack-gap-whenRegular)
+}
+
+@media(max-width: 767.98px) {
+  .Stack {
+      gap: var(--Stack-gap-whenNarrow)
+  }
+}
+
+@media(min-width: 1400px) {
+  .Stack {
+      gap: var(--Stack-gap-whenWide)
+  }
+}
+
+.Stack-divider {
+  display: none;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  align-self: stretch
+}
+
+.Stack-item {
+  flex: 0 1 auto;
+  min-inline-size: 0
+}
+
+@media(max-width: 767.98px) {
+  .Stack--dir-inline-whenNarrow {
+      flex-flow: row
+  }
+
+  .Stack--dir-block-whenNarrow {
+      flex-flow: column
+  }
+
+  .Stack--gap-none-whenNarrow {
+      --Stack-gap-whenNarrow: 0
+  }
+
+  .Stack--gap-condensed-whenNarrow {
+      --Stack-gap-whenNarrow: var(--yattho-stack-gap-condensed, 8px)
+  }
+
+  .Stack--gap-normal-whenNarrow {
+      --Stack-gap-whenNarrow: var(--yattho-stack-gap-normal, 16px)
+  }
+
+  .Stack--align-start-whenNarrow {
+      align-items: flex-start
+  }
+
+  .Stack--align-center-whenNarrow {
+      align-items: center
+  }
+
+  .Stack--align-end-whenNarrow {
+      align-items: flex-end
+  }
+
+  .Stack--align-baseline-whenNarrow {
+      align-items: baseline
+  }
+
+  .Stack--alignWrap-start-whenNarrow {
+      align-content: flex-start
+  }
+
+  .Stack--alignWrap-center-whenNarrow {
+      align-content: center
+  }
+
+  .Stack--alignWrap-end-whenNarrow {
+      align-content: flex-end
+  }
+
+  .Stack--alignWrap-distribute-whenNarrow {
+      align-content: space-between
+  }
+
+  .Stack--alignWrap-distributeEvenly-whenNarrow {
+      align-content: space-evenly
+  }
+
+  .Stack--spread-start-whenNarrow {
+      justify-content: flex-start
+  }
+
+  .Stack--spread-center-whenNarrow {
+      justify-content: center
+  }
+
+  .Stack--spread-end-whenNarrow {
+      justify-content: flex-end
+  }
+
+  .Stack--spread-distribute-whenNarrow {
+      justify-content: space-between
+  }
+
+  .Stack--spread-distributeEvenly-whenNarrow {
+      justify-content: space-evenly
+  }
+
+  .Stack--wrap-whenNarrow {
+      flex-wrap: wrap
+  }
+
+  .Stack--nowrap-whenNarrow {
+      flex-wrap: nowrap
+  }
+
+  .Stack--showDividers-whenNarrow>.Stack-divider,
+  .Stack--showDividers-whenNarrow>.Stack-item>.Stack-divider {
+      display: block
+  }
+
+  :not(.Stack--dir-inline-whenNarrow)>.Stack-divider,
+  :not(.Stack--dir-inline-whenNarrow)>.Stack-item>.Stack-divider {
+      border-block-end: var(--yattho-borderWidth-thin, 1px) solid var(--Stack-divider-color);
+      inline-size: auto;
+      block-size: 0
+  }
+
+  .Stack--dir-inline-whenNarrow>.Stack-divider,
+  .Stack--dir-inline-whenNarrow>.Stack-item>.Stack-divider {
+      border-inline-end: var(--yattho-borderWidth-thin, 1px) solid var(--Stack-divider-color);
+      inline-size: 0;
+      block-size: auto
+  }
+
+  .Stack-item--expand-whenNarrow {
+      flex-grow: 1
+  }
+
+  .Stack-item--keepSize-whenNarrow {
+      flex-shrink: 0
+  }
+}
+
+@media(min-width: 768px) {
+  .Stack--dir-inline-whenRegular {
+      flex-flow: row
+  }
+
+  .Stack--dir-block-whenRegular {
+      flex-flow: column
+  }
+
+  .Stack--gap-none-whenRegular {
+      --Stack-gap-whenRegular: 0
+  }
+
+  .Stack--gap-condensed-whenRegular {
+      --Stack-gap-whenRegular: var(--yattho-stack-gap-condensed, 8px)
+  }
+
+  .Stack--gap-normal-whenRegular {
+      --Stack-gap-whenRegular: var(--yattho-stack-gap-normal, 16px)
+  }
+
+  .Stack--gap-spacious-whenRegular {
+      --Stack-gap-whenRegular: var(--yattho-stack-gap-spacious, 24px)
+  }
+
+  .Stack--align-start-whenRegular {
+      align-items: flex-start
+  }
+
+  .Stack--align-center-whenRegular {
+      align-items: center
+  }
+
+  .Stack--align-end-whenRegular {
+      align-items: flex-end
+  }
+
+  .Stack--align-baseline-whenRegular {
+      align-items: baseline
+  }
+
+  .Stack--alignWrap-start-whenRegular {
+      align-content: flex-start
+  }
+
+  .Stack--alignWrap-center-whenRegular {
+      align-content: center
+  }
+
+  .Stack--alignWrap-end-whenRegular {
+      align-content: flex-end
+  }
+
+  .Stack--alignWrap-distribute-whenRegular {
+      align-content: space-between
+  }
+
+  .Stack--alignWrap-distributeEvenly-whenRegular {
+      align-content: space-evenly
+  }
+
+  .Stack--spread-start-whenRegular {
+      justify-content: flex-start
+  }
+
+  .Stack--spread-center-whenRegular {
+      justify-content: center
+  }
+
+  .Stack--spread-end-whenRegular {
+      justify-content: flex-end
+  }
+
+  .Stack--spread-distribute-whenRegular {
+      justify-content: space-between
+  }
+
+  .Stack--spread-distributeEvenly-whenRegular {
+      justify-content: space-evenly
+  }
+
+  .Stack--wrap-whenRegular {
+      flex-wrap: wrap
+  }
+
+  .Stack--nowrap-whenRegular {
+      flex-wrap: nowrap
+  }
+
+  .Stack--showDividers-whenRegular>.Stack-divider,
+  .Stack--showDividers-whenRegular>.Stack-item>.Stack-divider {
+      display: block
+  }
+
+  :not(.Stack--dir-inline-whenRegular)>.Stack-divider,
+  :not(.Stack--dir-inline-whenRegular)>.Stack-item>.Stack-divider {
+      border-block-end: var(--yattho-borderWidth-thin, 1px) solid var(--Stack-divider-color);
+      inline-size: auto;
+      block-size: 0
+  }
+
+  .Stack--dir-inline-whenRegular>.Stack-divider,
+  .Stack--dir-inline-whenRegular>.Stack-item>.Stack-divider {
+      border-inline-end: var(--yattho-borderWidth-thin, 1px) solid var(--Stack-divider-color);
+      inline-size: 0;
+      block-size: auto
+  }
+
+  .Stack-item--expand-whenRegular {
+      flex-grow: 1
+  }
+
+  .Stack-item--keepSize-whenRegular {
+      flex-shrink: 0
+  }
+}
+
+@media(min-width: 1400px) {
+  .Stack--dir-inline-whenWide {
+      flex-flow: row
+  }
+
+  .Stack--dir-block-whenWide {
+      flex-flow: column
+  }
+
+  .Stack--gap-none-whenWide {
+      --Stack-gap-whenWide: 0
+  }
+
+  .Stack--gap-condensed-whenWide {
+      --Stack-gap-whenWide: var(--yattho-stack-gap-condensed, 8px)
+  }
+
+  .Stack--gap-normal-whenWide {
+      --Stack-gap-whenWide: var(--yattho-stack-gap-normal, 16px)
+  }
+
+  .Stack--gap-spacious-whenWide {
+      --Stack-gap-whenWide: var(--yattho-stack-gap-spacious, 24px)
+  }
+
+  .Stack--align-start-whenWide {
+      align-items: flex-start
+  }
+
+  .Stack--align-center-whenWide {
+      align-items: center
+  }
+
+  .Stack--align-end-whenWide {
+      align-items: flex-end
+  }
+
+  .Stack--align-baseline-whenWide {
+      align-items: baseline
+  }
+
+  .Stack--alignWrap-start-whenWide {
+      align-content: flex-start
+  }
+
+  .Stack--alignWrap-center-whenWide {
+      align-content: center
+  }
+
+  .Stack--alignWrap-end-whenWide {
+      align-content: flex-end
+  }
+
+  .Stack--alignWrap-distribute-whenWide {
+      align-content: space-between
+  }
+
+  .Stack--alignWrap-distributeEvenly-whenWide {
+      align-content: space-evenly
+  }
+
+  .Stack--spread-start-whenWide {
+      justify-content: flex-start
+  }
+
+  .Stack--spread-center-whenWide {
+      justify-content: center
+  }
+
+  .Stack--spread-end-whenWide {
+      justify-content: flex-end
+  }
+
+  .Stack--spread-distribute-whenWide {
+      justify-content: space-between
+  }
+
+  .Stack--spread-distributeEvenly-whenWide {
+      justify-content: space-evenly
+  }
+
+  .Stack--wrap-whenWide {
+      flex-wrap: wrap
+  }
+
+  .Stack--nowrap-whenWide {
+      flex-wrap: nowrap
+  }
+
+  .Stack--showDividers-whenWide>.Stack-divider,
+  .Stack--showDividers-whenWide>.Stack-item>.Stack-divider {
+      display: block
+  }
+
+  :not(.Stack--dir-inline-whenWide)>.Stack-divider,
+  :not(.Stack--dir-inline-whenWide)>.Stack-item>.Stack-divider {
+      border-block-end: var(--yattho-borderWidth-thin, 1px) solid var(--Stack-divider-color);
+      inline-size: auto;
+      block-size: 0
+  }
+
+  .Stack--dir-inline-whenWide>.Stack-divider,
+  .Stack--dir-inline-whenWide>.Stack-item>.Stack-divider {
+      border-inline-end: var(--yattho-borderWidth-thin, 1px) solid var(--Stack-divider-color);
+      inline-size: 0;
+      block-size: auto
+  }
+
+  .Stack-item--expand-whenWide {
+      flex-grow: 1
+  }
+
+  .Stack-item--keepSize-whenWide {
+      flex-shrink: 0
+  }
+}