/* EPI Suite product composition. Generic rules belong in framework.css. */
@layer pages;

@layer pages {
  /* Shared result composition */
  .result-summary {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) minmax(0, 3.5fr);
    align-items: center;
    gap: var(--space-lg);
  }
  .result-summary > * {
    min-inline-size: 0;
  }
  @container card-content (max-width: 40rem) {
    .result-summary {
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }
  }
  @media print {
    .result-summary {
      display: block;
    }
  }

  /* Hero, search, and release banner placement */
  .hero {
    background:
      url("../assets/images/home-background.svg") center / cover,
      var(--hero-surface);
  }
  .home-hero {
    min-block-size: 20rem;
    color: var(--on-accent);
  }
  .home-hero.ecosar-hero {
    min-block-size: 0;
    block-size: 100%;
    display: flex;
    flex-direction: column;
    background: transparent;
  }
  .home-hero > .hero-layout {
    padding-block: clamp(2.5rem, 8vw, 6rem);
  }
  .home-hero.ecosar-hero > .hero-layout {
    min-block-size: 0;
    flex: 1 1 auto;
    align-content: center;
    padding-block-start: calc(var(--site-header-height) + var(--space-lg));
    padding-block-end: var(--space-lg);
  }
  .home-hero > .site-banner {
    --site-banner-surface: var(--hero-banner-surface);
    margin-block-start: auto;
  }
  .hero :where(a, h1, h2, h3, h4, h5, h6, hgroup > p, .search-shell > small, .ecosar-home-notices strong) {
    color: inherit;
  }
  .hero .combobox {
    --combobox-max: 50rem;
    --joined-line: var(--search-line);
    --joined-surface: var(--search-surface);
    --joined-ink: var(--search-ink);
    --joined-focus: var(--search-focus);
  }
  .search-shell {
    --gap: var(--space-xs);
  }
  .search-shell > small {
    color: var(--on-accent);
    text-align: center;
  }

  .hero-main {
    max-inline-size: var(--hero-measure, var(--measure));
    inline-size: 100%;
    margin-inline: auto;
    text-align: center;
  }
  .hero-layout {
    --gap: var(--space-lg);
  }
  .home-hero .hero-main {
    --hero-measure: 50rem;
  }
  .home-hero.ecosar-hero .hero-main {
    translate: 0 -10svh;
  }
  .home-hero h1 {
    max-inline-size: 14ch;
    margin-inline: auto;
    font-size: var(--text-display);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
  }
  .ecosar-hero h1 sup {
    padding-inline-start: var(--space-3xs);
    font-size: var(--text-dense);
    font-weight: var(--weight-strong);
    letter-spacing: var(--tracking-label);
    vertical-align: super;
  }
  #app[data-app="ecosar"][data-view="home"] {
    block-size: 100vh;
    block-size: 100svh;
    min-block-size: 0;
    color: var(--on-accent);
    background:
      linear-gradient(to bottom, transparent 58%, var(--hero-footer-fade)),
      url("../assets/images/ecosar-bg.svg") center / cover,
      var(--ecosar-hero-surface);
    background-blend-mode: multiply;
  }
  #app[data-app="ecosar"][data-view="home"] > main {
    min-block-size: 0;
    flex: 1 1 auto;
  }
  .ecosar-home-notices {
    --gap: var(--space-3xs);
    color: color-mix(in oklch, var(--on-accent) 86%, transparent);
    font-size: var(--text-dense);
    line-height: var(--leading-dense);
    text-align: center;
  }
  .ecosar-footer[data-variant="hero"] {
    --footer-padding-block: var(--space-lg) var(--space-sm);
    --grid-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    --footer-align: end;
    flex: 0 0 auto;
    color: var(--on-accent);
    background: transparent;
  }
  .ecosar-footer[data-variant="hero"] .ecosar-footer-meta {
    grid-column: 2;
    grid-row: 1;
    padding: 0 var(--space-md);
    color: color-mix(in oklch, var(--on-accent) 78%, transparent);
  }
  .ecosar-footer[data-variant="hero"] .footer-resources {
    grid-column: 3;
    grid-row: 1;
    justify-items: end;
    text-align: end;
  }
  .ecosar-footer[data-variant="hero"] .footer-resources ul {
    align-items: flex-end;
  }
  .ecosar-footer[data-variant="hero"] :where(a, h2, small) {
    color: inherit;
  }
  .ecosar-footer-label-compact {
    display: none;
  }
  .compact-hero {
    padding-block: var(--space-lg);
    color: var(--compact-hero-ink);
    background:
      url("../assets/images/home-background.svg") center 42% / cover,
      var(--compact-hero-surface);
  }
  [data-surface="ecosar"] {
    isolation: isolate;
  }
  [data-surface="ecosar"]::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
      url("../assets/images/ecosar-bg.svg") center / cover,
      var(--ecosar-hero-surface);
    background-blend-mode: multiply;
  }
  /* EPI home and result composition */
  .home-content {
    --gap: var(--space-lg);
    padding-block: var(--space-lg);
  }
  .content-layout {
    --sidebar-width: 25rem;
    --sidebar-main-min: 60%;
  }

  :where(.results-layout, .result-state) {
    --sidebar-width: 26rem;
    --sidebar-main-min: 60%;
    --gap: var(--space-lg);
    padding-block: var(--space-lg);
  }
  .chemical-depiction {
    inline-size: 100%;
    max-inline-size: 14rem;
    justify-self: start;
    object-fit: contain;
  }
  .analog-grid {
    --grid-min: 14rem;
    --gap: var(--space-md);
  }
  .analog-card img {
    inline-size: 100%;
    max-inline-size: 8rem;
    block-size: 8rem;
    object-fit: contain;
  }
  .loading-view {
    display: grid;
    justify-items: center;
    padding-block: var(--space-lg);
    text-align: center;
  }

  /* ECOSAR module and summary composition */
  .module-layout {
    --sidebar-width: 32.875rem;
    --sidebar-main-min: 56%;
    padding-block: var(--space-lg);
  }
  .form-meta {
    justify-content: flex-end;
    color: var(--ink-muted);
    font-size: var(--text-ui);
    line-height: var(--leading-tight);
  }
  .form-meta > :first-child {
    margin-inline-end: auto;
  }
  .form-meta > a {
    min-block-size: var(--space-lg);
    display: inline-flex;
    align-items: center;
  }
  .download-control {
    display: contents;
  }

  .concentration {
    --gap: var(--space-3xs);
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  /* Help navigation and reading composition */
  .help-search-field {
    display: grid;
    align-items: center;
  }
  .help-search-field > * {
    grid-area: 1 / 1;
  }
  .help-search-field input {
    padding-inline-end: var(--control-height);
  }
  .help-search-field kbd {
    justify-self: end;
    margin-inline-end: var(--space-xs);
    color: var(--ink-muted);
    pointer-events: none;
  }
  .help-nav {
    max-block-size: calc(100svh - var(--site-header-height));
    padding: var(--space-lg);
    overflow: auto;
    position: sticky;
    inset-block-start: 0;
  }
  .help-nav nav {
    --gap: var(--space-lg);
  }
  .help-nav nav section {
    --gap: var(--space-3xs);
  }
  :where(
    .help-nav nav h2,
    .help-nav nav button span,
    .help-example-note,
    .help-pager span
  ) {
    color: var(--ink-muted);
    font-size: var(--text-dense);
    line-height: var(--leading-dense);
  }
  .help-nav nav h2 {
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }
  .help-nav nav a,
  .help-nav nav button {
    inline-size: 100%;
    display: block;
    padding: var(--control-padding-block) var(--control-padding-inline);
    border: 0;
    border-inline-start: var(--indicator-width) solid transparent;
    color: var(--ink);
    font-size: var(--text-ui);
    line-height: var(--leading-tight);
    text-align: start;
    text-decoration: none;
  }
  .help-nav nav a[aria-current="page"] {
    border-inline-start-color: var(--accent);
    background: var(--accent-soft);
  }
  .help-nav nav button span {
    display: block;
  }
  .help-reading {
    --frame-max: 76rem;
    padding: var(--space-lg) 0;
  }
  .prose > * + * {
    margin-block-start: var(--prose-flow-space, var(--space-md));
  }
  .prose > :where(.help-media, figure, pre, blockquote) {
    inline-size: 100%;
    max-inline-size: none;
    --prose-flow-space: var(--space-lg);
  }
  .help-component {
    display: block;
    inline-size: 100%;
    max-inline-size: none;
  }
  .prose > :where(h2, h3):not(:first-child) {
    --prose-flow-space: var(--space-lg);
  }
  .table-export-pin {
    z-index: 1;
    position: sticky;
    inline-size: fit-content;
    block-size: 0;
    inset-block-start: 0;
    inset-inline-start: calc(100% - var(--control-height));
  }
  .prose :where(h1, h2, h3, h4, h5, h6)[id] {
    scroll-margin-block-start: calc(var(--site-header-height) + var(--space-lg) + var(--space-xs));
  }
  .help-reading > section {
    max-inline-size: calc(var(--measure) + var(--space-lg) + var(--space-lg));
    margin-inline: auto;
    padding: var(--space-lg);
  }
  .help-pager {
    --gap: var(--space-md);
    justify-content: space-between;
    padding: var(--space-lg) 0 0;
    border-block-start: var(--border) solid var(--line);
  }
  .help-pager .help-next {
    margin-inline-start: auto;
  }
  .help-pager span {
    display: block;
  }

  /* ChemKit host sizing */
  chemkit-editor {
    inline-size: 100%;
    min-block-size: min(27.5rem, 58vh);
    block-size: min(68vh, 38.75rem);
  }

  /* Page-level narrow mode */
  @media (width < 48rem) {
    .ecosar-footer :where(.ecosar-footer-label-full, nav small) {
      display: none;
    }
    .ecosar-footer .ecosar-footer-label-compact {
      display: inline;
    }
    .ecosar-footer[data-variant="hero"] {
      --grid-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .ecosar-footer[data-variant="hero"] .ecosar-footer-meta {
      grid-column: 1 / -1;
      grid-row: 2;
      padding-block-start: var(--space-sm);
    }
    .ecosar-footer[data-variant="hero"] .footer-resources {
      grid-column: 2;
    }
    .help-nav {
      max-block-size: none;
      padding: var(--space-md);
      position: static;
      border-block-end: var(--border) solid var(--line);
    }
    .help-nav nav {
      max-block-size: min(16rem, 35svh);
      padding-inline-end: var(--space-xs);
      overflow: auto;
    }
  }
}