/*
  Standalone-demo shell for AdiaUI corpus exemplars.

  Each exemplar `index.html` loads this stylesheet so it can render
  correctly when opened directly (out of the docs router shell). It
  carries:

  - body framing — flex-centered, padded, schemes set up via tokens
  - section min-width — exemplar pages are intentionally desktop-shaped
  - decoration classes — for the few pages that need a hero / split-
    layout gradient that can't be expressed via component primitives

  IMPORTANT — training-corpus contract: the exemplar HTML is harvested
  for the gen-UI training pipeline. Per AGENTS.md, harvested files MUST
  contain no `<style>` block and no `style="..."` attributes. Anything
  in this stylesheet is allowed because it's loaded via `<link>`, not
  inlined.
*/

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-sizing: border-box;
}
body[data-anchor="bottom"] {
  align-items: flex-end;
}
body > section,
body > footer {
  min-width: 600px;
}

/*
  Footer-pattern link styling. footer-ui's own contract leaves <a>
  unstyled (it doesn't slot links itself), so the prose/footer demo
  legitimately needs a few tone + transition rules here. Defining
  them in _shell.css keeps the harvested HTML from carrying any
  inline style attributes for these.
*/
footer a {
  color: var(--a-fg-subtle);
  text-decoration: none;
  font-size: var(--a-ui-md);
  transition: color var(--a-duration-fast) var(--a-easing);
}
footer a:hover {
  color: var(--a-fg);
}

/*
  Auth-login brand panel — split-screen hero with photographic
  background + dark scrim. Used on the first card of
  prose/auth-login. Class hook keeps the harvested HTML clean
  while preserving the visual that motivates the pattern.
*/
.demo-brand-panel {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.8)),
    url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1200&q=80')
    center/cover no-repeat;
  min-height: 560px;
  color: #fff;
}

/*
  Accent split-panel — used on the ui/auth-login split-layout card.
  Lighter than the brand panel; just an accent-tinted surface with a
  comfortable min-height so the form panel beside it doesn't collapse.
*/
.demo-accent-panel {
  background: var(--a-accent-subtle);
  min-height: 480px;
}

/*
  CTA hero card — photographic background with dark scrim. Used on
  the centered CTA on prose/cta. Same shape as `.demo-brand-panel`
  but with a different image; kept distinct so each page can be
  retuned without leaking into the others.
*/
.demo-cta-hero {
  background:
    linear-gradient(to bottom right, rgba(0,0,0,0.7), rgba(0,0,0,0.85)),
    url('https://images.unsplash.com/photo-1534972195531-d756b9bfa9f2?w=1200&q=80')
    center/cover no-repeat;
}
