/* The finance prototype owns its content; the application keeps its navigation. */
.finance-page--preview {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 520px;
}
.finance-preview-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 12px 28px;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-muted);
  font-size: 12px;
}
.finance-preview-link { color: var(--c-fill); text-decoration: none; }
.finance-preview-link:hover { text-decoration: underline; }
.finance-preview-link:focus-visible { outline: 2px solid var(--c-fill); outline-offset: 4px; }
.finance-preview-frame {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 420px;
  border: 0;
  background: var(--c-bg);
  color-scheme: light dark;
}
.finance-real-data-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 26px 28px 20px;
  border-bottom: 1px solid var(--c-line);
}
.finance-real-data-head .finance-page__title { margin: 0 0 8px; }
.finance-real-data-path { margin: 0; font-size: 13px; color: var(--c-muted); }
.finance-real-data-path span { margin-left: 10px; font-size: 11px; color: var(--c-faint); }
@media (max-width: 760px) {
  /* The mobile workspace normally grows with its document. An embedded editor
     instead needs the remaining viewport below its back bar and above the dock. */
  .app-page .workspace:has(.finance-page--preview) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
  .app-page .workspace:has(.finance-page--preview) .mob-backbar { flex: 0 0 auto; }
  .app-page .workspace:has(.finance-page--preview) .tab-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  .app-page .finance-page--preview { min-height: 0; }
  .app-page .finance-preview-frame { min-height: 0; }
}
@media (max-width: 600px) {
  .finance-page--preview { min-height: 420px; }
  .finance-preview-notice { padding: 10px 16px; }
  .finance-real-data-head { padding: 20px 16px 16px; }
}