/*
  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 h1, .md h2, .md h3, .md h4, .md h5, .md h6 { font-size: 16px; line-height: 1.3; font-weight: 680; margin: 0 0 8px; }
.md h1 { font-size: 18px; }
.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 :not(pre) > code, .prose code, .callout code { background: var(--light-oat); padding: 0 3px; border-radius: 4px; font-size: 0.92em; }
.md blockquote { margin: 0 0 10px; padding-left: 12px; border-left: 3px solid var(--line-strong); }
.md ul, .md ol { padding-left: 20px; margin: 0 0 10px; }

a.back { text-decoration: none; }