/*
  Application overrides on top of closure.css (which is kept as the design
  branch shipped it). The prototypes showed a phone bezel on wide screens as a
  review frame. The app shows the same phone layout in a centered column.
*/

@media (min-width: 840px) {
  body { background: var(--line); }
  .stage {
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    padding: 0;
  }
  .phone {
    width: 430px;
    height: 100dvh;
    border-radius: 0;
    box-shadow: 0 0 0 1px var(--line-strong);
  }
  .stage-note { display: none; }
}

.flash {
  margin: 12px var(--gutter) 0;
  padding: 10px var(--card-inset);
  border-radius: var(--radius-panel);
  background: var(--accent-tint);
  font-size: 14px;
}
.flash--error { background: var(--working-tint); color: var(--urgent); font-weight: 650; }
.md p { margin: 0 0 10px; }
.md table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 8px 0 12px; }
.md th, .md td { border-bottom: 1px solid var(--line); padding: 6px 4px; text-align: left; vertical-align: top; }
.md pre { white-space: pre-wrap; background: var(--light-oat); padding: 8px; border-radius: var(--radius-row); font-size: 13px; }
.md pre.mermaid { background: transparent; }
.md ul, .md ol { padding-left: 20px; margin: 0 0 10px; }

a.back { text-decoration: none; }