/* Copyright (c) 2026 Sasha Firsov <https://github.com/sashafirsov> */

html
{   font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
    font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased;
}
body,nav, main {   display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: space-between;
    align-items: stretch;
    &>*{flex: auto;}
}
nav
{   flex-direction: column;
    dce-root{ box-shadow:none; padding: 0;}
}

cem-demo-element *:has(>[data-cem-island]){ box-shadow: 0 0 0.5rem lime; padding: 1rem;  flex:1; display: block; }
script{ display:none !important; }
dd{ padding: 1rem;}
p{ margin: 0;}
code{ font-weight: bold; color: green; text-wrap: nowrap; }

cem-demo-element h3
{   text-shadow: 0 0 0.25em white;
    letter-spacing: 0.1rem;
}
*[slot="demo"]{ display: flex; gap: 1rem; flex-wrap: wrap; }

/* Keep documentation above a compact, wrapping source/output gallery. */
/* A source-loaded document host must also shrink within the flex page. */
body > * { min-width: 0; }
body > nav, body > main { flex-basis: 100%; min-width: 0; }
main > section { flex-basis: 100%; min-width: 0; }
main > cem-demo-element,
main > cem-element:has(cem-demo-element) { flex: 1 1 32rem; min-width: 0; max-width: 100%; }
cem-demo-element [slot="demo"] > * { min-width: 0; max-width: 100%; }
cem-demo-element input, cem-demo-element textarea, cem-demo-element select {
    box-sizing: border-box;
    max-width: 100%;
}
main p, main li { overflow-wrap: anywhere; }
main section code { white-space: normal; }