@layer sections{
  [ui-section=page]{
    --bg-shade-color:oklch(from var(--bg-color) calc(l - 0.0225 * (1 - 2 * clamp(0, (0.5 - l) * 9999, 1)) + 0.16 * clamp(0, (0.25 - l) * 4, 1)) calc(c + 0.0181 * clamp(0, c * 200, 1)) calc(h + 6.6));
    display:flex;
    flex-direction:column;
    gap:var(--spacing-24);
  }
  [ui-section=page] [ui-slot=alert]{
    width:-moz-fit-content;
    width:fit-content;
  }
  [ui-section=page]:has(> form){
    align-items:center;
    justify-content:center;
  }
  [ui-section=page] > form{
    display:grid;
    grid-gap:var(--spacing-24);
    gap:var(--spacing-24);
    width:100%;
  }
  @media (min-width: 769px){
    [ui-section=page] > form{
      width:50%;
    }
  }
  [ui-section=page] > form .fields{
    display:grid;
    grid-gap:var(--spacing-24);
    gap:var(--spacing-24);
  }
  [ui-section=page] > form .fields fieldset{
    display:grid;
    grid-gap:var(--spacing-8);
    gap:var(--spacing-8);
  }
  [ui-section=page] > form .fields fieldset [ui-slot=input],
  [ui-section=page] > form .fields fieldset [ui-slot=textarea]{
    background-color:var(--bg-shade-color);
  }
}
@layer sections{
  /* LittleSpa: keep text pages (about, policies, FAQ) inside a readable column with side margins,
     and stop pasted content (wide tables, fixed widths, long links) from stretching the page */
  [ui-section=page]:not(:has(> form)){
    width:100%;
    max-width:860px;
    margin-inline:auto;
  }
  [ui-section=page] .page-content{
    width:100%;
    min-width:0;
    overflow-wrap:anywhere;
    line-height:1.8;
  }
  [ui-section=page] .page-content *{
    max-width:100% !important;
    box-sizing:border-box;
  }
  [ui-section=page] .page-content table{
    width:100% !important;
    table-layout:fixed;
    border-collapse:collapse;
  }
  [ui-section=page] .page-content img,
  [ui-section=page] .page-content video,
  [ui-section=page] .page-content iframe{
    height:auto;
  }
  [ui-section=page] .page-content pre{
    white-space:pre-wrap;
  }
}