/* Single view dialog, toast */
.tile .open {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  border-radius: 0;
  display: block;
}
.tile .open:hover {
  background: var(--label-hover);
}
dialog.view {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  background: var(--vbg, #1a1b26);
  color: var(--label, #e6e9f5);
}
dialog.view.checker {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #d9dce6 25%, transparent 25%),
    linear-gradient(-45deg, #d9dce6 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #d9dce6 75%),
    linear-gradient(-45deg, transparent 75%, #d9dce6 75%);
  background-size: 20px 20px;
  background-position:
    0 0,
    0 10px,
    10px -10px,
    -10px 0;
}
dialog.view::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.vwrap {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px
    calc(16px + env(safe-area-inset-bottom, 0px));
}
.vtop {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.vtop h2 {
  margin: 0 auto 0 8px;
  font-size: 18px;
  font-weight: 700;
}
.vtop .pos {
  font-size: 13px;
  opacity: 0.75;
  margin-right: 8px;
}
.vbtn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border-radius: 0;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0.85;
}
.vbtn:hover {
  opacity: 1;
  background: var(--label-hover);
}
.vbtn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vbtn.icon {
  padding: 0;
  border-color: transparent;
}
.vbtn.tip {
  padding: 0;
}
.btn.icon {
  width: 44px;
  padding: 0;
  justify-content: center;
}
.bar .btn.icon {
  background: var(--btn);
  color: var(--btn-text);
  border-color: var(--btn);
}
.bar .btn.icon:hover {
  opacity: 0.85;
}
.tip {
  position: relative;
}
.tip::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  background: var(--btn);
  color: var(--btn-text);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.tip:hover::after,
.tip:focus-visible::after {
  opacity: 1;
}
.vart {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 16px;
}
.vart > svg {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: min(70vh, 720px);
  aspect-ratio: 1;
  overflow: visible;
}
.tile .meta {
  flex-wrap: wrap;
  justify-content: center;
}
.toast {
  z-index: 20;
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  background: var(--btn);
  color: var(--btn-text);
  padding: 12px 16px;
  border-radius: 0;
  font-size: 13px;
  max-width: calc(100% - 32px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.toast.on {
  opacity: 1;
}