/* Capture app — only what ../shared/brand.css does not already provide.
   Palette, typography, focus rings, tables, badges, forms, responsiveness and
   the portfolio banner layout all live in brand.css; no raw hex belongs here. */

/* The banner mark is drawn in Alluvion's own strata, not the Synapse parent's
   navy + amber (BRANDBOOK.md:14, :24). Fills go here rather than on the SVG
   because var() is not reliable in a presentation attribute. */
.portfolio-banner .mark .stratum   { fill: var(--riverbed-slate); }
.portfolio-banner .mark .accretion { fill: var(--iron-ochre); }
.portfolio-banner .banner-text     { flex: 1 1 12rem; }

/* Anchors used as nav items need the same target size and contrast as the
   nav buttons brand.css already styles. */
nav.app-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem .875rem;
  font-size: .875rem;
  color: var(--bone);
  border: 1px solid rgba(247, 244, 238, .3);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
nav.app-nav a:hover { background: rgba(247, 244, 238, .12); color: var(--bone); }

form { max-width: 44rem; }

/* Machine output (DSAR payloads, CSV previews) reads as a plate so it is never
   mistaken for prose the app is asserting. */
.code-plate {
  background: var(--slate-dark);
  color: var(--bone);
  padding: .9rem 1rem;
  margin: .6rem 0 0;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-family: var(--f-mono);
  font-size: .8125rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.code-plate:empty { display: none; }

@media (max-width: 760px) {
  header.app-bar h1 { flex: 1 1 100%; }
}