*
{
    /* apply defaults */
    margin: 0;
    padding: 0;

    /* allow draw */
    font-family: monospace;

    /* adaptive */
    color-scheme: light dark;

    /* vars */
    --container-max-width: 768px;
    --color-warning: #ee784e;
    --color-error: #ff6363;
    --color-default: #999;
}

*::placeholder
{
    font-size: 12px;
}

a, a:active, a:visited
{
    text-decoration: none;
}

a:hover
{
    text-decoration: underline;
}

hr {
    background-color: var(--color-default);
    border: none;
    color: var(--color-default);
    height: 1px;
}

body
{
    font-size: 12px;
}

/* header */

header
{
    background-color: Canvas;
    display: block;
    left: 0;
    margin: 0 auto;
    max-width: calc(var(--container-max-width) + 2px);
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 16px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2;
}

header > h2
{
    display: inline-block;
    font-size: 12px;
    margin: 16px 0;
}

header > strong
{
    font-size: 14px;
}

header > div
{
    margin: 12px 0;
}

header > div > code
{
    color: var(--color-error);
    font-weight: bold;
}

header > div > sub > svg
{
    fill: var(--color-error);
}

header > form > input[type="text"]
{
    box-sizing: border-box;
    padding: 4px;
    width: 100%;
}

/* main */

main
{
    display: block;
    margin: 16px auto 0 auto;
    max-width: var(--container-max-width);
    padding-bottom: 164px;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 132px;
}

main ul
{
    list-style: none;
}

main ul ul
{
    margin-left: 24px;
}

main ul li
{
    border-top: 1px var(--color-default) dotted;
    word-wrap: break-word;
}

main > ul > li:first-child
{
    border-top: 1px transparent dotted;
}

main ul li div
{
    padding: 16px 0;
}

main ul li div a[name]
{
    display: block;
    position: relative;
    top: -160px;
    visibility: hidden;
}

main ul li p
{
    padding-top: 8px;
}

main ul li p > br /* tmp solution for current twig filters implementation */
{
    display: block;
    margin: 4px 0;
}

main ul li span > svg
{
    cursor: default;
    fill: var(--color-default);
    float: right;
}

main > form
{
    box-sizing: border-box;
    display: block;
    margin: 16px 0;
    overflow: hidden;
    width: 100%;
}

main > form > input[type="text"],
main > form > input[type="password"],
main > form > textarea
{
    box-sizing: border-box;
    display: block;
    margin-bottom: 10px;
    padding: 4px;
    width: 100%;
}

main > form > label
{
    clear: both;
    display: inline-block;
    margin-bottom: 8px;
}

main > form > button
{
    cursor: pointer;
    float: right;
    padding: 2px 8px;
}

main > form > output
{
    color: var(--color-error);
    display: block;
    font-weight: bolder;
    margin-bottom: 16px;
}

/* footer */

footer
{
    background-color: Canvas;
    bottom: 0;
    display: block;
    left: 0;
    position: fixed;
    right: 0;
    z-index:2;
}

footer > form
{
    bottom: 16px;
    box-sizing: border-box;
    display: block;
    margin: 16px auto;
    max-width: calc(var(--container-max-width) + 12px);
    overflow: hidden;
    padding: 4px;
    width: 100%;
}

footer > form > input[type="text"],
footer > form > textarea
{
    box-sizing: border-box;
    display: block;
    margin-bottom: 10px;
    padding: 4px;
    width: 100%;
}

footer > form > textarea:focus
{
    min-height: 100px;
}

footer > form > button
{
    cursor: pointer;
    float: right;
    padding: 2px 8px;
}

footer > form > output
{
    color: var(--color-error);
    display: block;
    font-weight: bolder;
    margin-bottom: 16px;
}

/* apply mode corrections */
body[data-mode="stream"] > header
{
    display: none;
}

body[data-mode="stream"] > main
{
    padding-top: 0;
}

body[data-mode="stream"] > main ul li div a[name]
{
    top: -16px;
}