/* Device frames and screen scaffolding shared by both platforms. */

.device {
  width: calc(var(--m-device-width) + var(--m-device-border) * 2);
  border: var(--m-device-border) solid var(--m-device-bezel);
  border-radius: var(--m-device-corner);
  background: var(--m-device-bezel);
  overflow: hidden;
  box-shadow: var(--m-elevation-high);
  margin: 0;
  align-self: start;
}

.screen {
  position: relative;
  width: var(--m-device-width);
  min-height: 240px;
  background: var(--m-surface-page);
  color: var(--m-glyphs-default);
  font: var(--m-type-body-2);
  overflow: hidden;
  border-radius: var(--m-device-screen-corner);
  display: flex;
  flex-direction: column;
}
.screen--full { height: var(--m-device-height); }
.screen__body { flex: 1; overflow-y: auto; padding: var(--m-space-16) var(--m-screen-margin); display: flex; flex-direction: column; gap: var(--m-space-16); }
.screen__body--flush { padding: 0; gap: 0; }
.screen__caption { font: var(--m-type-label-1); letter-spacing: var(--m-tracking-label-1); color: var(--m-glyphs-secondary); margin: 0; }

.status-bar {
  height: var(--m-status-bar-height);
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 var(--m-space-24) var(--m-space-8);
  font: var(--m-type-label-2-prominent);
  color: var(--m-glyphs-prominent);
}
.platform-android .status-bar { align-items: center; padding: 0 var(--m-space-16); font: var(--m-type-label-1-prominent); }
.status-bar__icons { display: flex; gap: var(--m-space-4); align-items: center; }
.status-bar__icons svg { width: 16px; height: 16px; fill: currentColor; }

.home-indicator { height: var(--m-home-indicator-height); flex: none; display: flex; align-items: center; justify-content: center; }
.home-indicator::after { content: ""; width: 134px; height: 4px; border-radius: var(--m-corner-pill); background: var(--m-glyphs-prominent); }
.platform-android .home-indicator::after { width: 108px; }

.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 32px; height: 32px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.demo-pair { display: flex; flex-direction: column; gap: var(--m-space-24); align-self: start; }
.demo-stack { display: flex; flex-direction: column; gap: var(--m-space-12); }
.demo-row { display: flex; gap: var(--m-space-8); align-items: center; flex-wrap: wrap; }
.demo-label { font: var(--m-type-label-1-prominent); letter-spacing: var(--m-tracking-label-1); color: var(--m-glyphs-secondary); text-transform: uppercase; margin: 0; }

.scrim { position: absolute; inset: 0; background: var(--m-scrim); display: flex; align-items: center; justify-content: center; z-index: 5; }
.scrim--bottom { align-items: flex-end; }
.scrim[hidden] { display: none; }

/* Shimmer placeholder shared with decimal-loading-shimmer guidance */
.shimmer { background: linear-gradient(90deg, var(--m-surface-sunken) 0%, var(--m-surface-card) 50%, var(--m-surface-sunken) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--m-corner-m); }
@keyframes shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .shimmer { animation: none; }
}

/* Charts */
.chart-bars { display: flex; align-items: flex-end; gap: var(--m-space-8); height: 120px; padding-top: var(--m-space-8); }
.chart-bars__bar { flex: 1; background: var(--m-chart-1); border-radius: var(--m-corner-s) var(--m-corner-s) 0 0; }
.chart-bars__bar:nth-child(even) { background: var(--m-chart-2); }
.chart-line { width: 100%; height: 120px; }
.chart-line path { fill: none; stroke: var(--m-chart-1); stroke-width: 2; }
.chart-line .chart-line__area { fill: var(--m-fill-info); stroke: none; }
.chart-legend { display: flex; gap: var(--m-space-12); font: var(--m-type-label-1); letter-spacing: var(--m-tracking-label-1); }
.chart-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--m-space-4); background: var(--m-chart-1); }
.chart-legend span:nth-child(2)::before { background: var(--m-chart-2); }
.chart-legend span:nth-child(3)::before { background: var(--m-chart-3); }
.donut { width: 120px; height: 120px; }
.donut circle { fill: none; stroke-width: 12; }
.donut__track { stroke: var(--m-chart-track); }
.donut__seg-1 { stroke: var(--m-chart-1); }
.donut__seg-2 { stroke: var(--m-chart-2); }
.donut__seg-3 { stroke: var(--m-chart-3); }