.app-view[hidden] { display: none; }

.page { position: relative; }

.one-nav a {
  transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out, transform 100ms ease-out;
}

.one-nav a:active { transform: scale(.98); }

#mainContent:focus,
#pageHeading:focus,
.app-view:focus { outline: none; }

.actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 132px));
  gap: 8px;
  margin: 0 0 24px;
}

.status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
}

.status .dot {
  flex: 0 0 8px;
  border-radius: 50%;
  transition: background-color 120ms ease-out;
}

.value.is-empty {
  color: var(--one-muted);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}

.widget { text-align: center; }
.widget .value { display: flex; align-items: baseline; justify-content: center; }
.widget .value.is-empty { justify-content: center; }

.system-info { margin-top: 18px; }
.system-info > summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  cursor: pointer;
  color: var(--one-text);
  font-size: .9375rem;
  font-weight: 600;
  list-style: none;
}
.system-info > summary::-webkit-details-marker { display: none; }
.system-info > summary::marker { content: ""; }
.system-info__arrow { display: grid; flex: 0 0 18px; width: 18px; height: 18px; margin-left: 8px; place-items: center; }
.system-info__arrow > span {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--one-muted);
  border-bottom: 2px solid var(--one-muted);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 120ms ease-out;
}
.system-info[open] .system-info__arrow > span { transform: rotate(225deg); }
.system-info .meta { margin-top: 0; }

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
canvas { display: block; width: 100%; height: 230px; cursor: crosshair; touch-action: manipulation; }
.result { margin-top: 20px; }
.result > :first-child { margin-top: 0; }
.result > :last-child { margin-bottom: 0; }
.result h2, .result h3 { margin: 1.25em 0 .45em; }
.result h2 { font-size: 1.15em; }
.result h3 { font-size: 1em; }
.result p, .result ul, .result ol { margin: .65em 0; }
.result li + li { margin-top: .3em; }
.result code { padding: .1em .3em; border-radius: .3em; background: rgba(0, 0, 0, .08); }
.hint { margin-top: 20px; }

@keyframes ios-view-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes one-ui-view-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

html[data-platform="ios"] #mainContent.is-view-transition .app-view:not([hidden]) {
  animation: ios-view-enter 180ms ease-out both;
}

html[data-platform="one-ui"] #mainContent.is-view-transition .app-view:not([hidden]) {
  animation: one-ui-view-enter 200ms cubic-bezier(.2, 0, 0, 1) both;
}

@media (max-width: 920px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meta, .chart-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .status { gap: 6px; padding: 8px 6px; font-size: .75rem; }
  canvas { height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .one-nav a,
  .status .dot,
  .system-info > summary::after { transition: none; }
  .one-nav a:active { transform: none; }
  #mainContent.is-view-transition .app-view:not([hidden]) { animation: none; }
}