:root { --bkg: var(--white); --text: var(--black); --link: var(--blues); --hover: var(--blued); --lowlink: var(--brack); --input: var(--beige); --tspbkg: rgba(112, 192, 208, 0.1); }
.login *, *.login { -webkit-filter: unset; }
.doc main { }
.doc main > div { text-align: left; padding: 8em 7em; }
.doc main > div:not([ajf]) .VP { width: 44em; max-width: calc(100vw - 8em); margin-left: 4em; margin-right: auto;}
@media only screen and (max-width: 920px) { .doc main > div { text-align: left; padding: 8em 5em; }
}
.doc .VP { grid-template-rows: auto 1fr; padding: 8em 0 5em; grid-gap: 4em; width: 54em; text-align: left; max-width: calc(100% - 3em); }
.doc .VP > div { place-content: start; height: auto; }
.doc h1 { font-size: 3em; padding: 0; letter-spacing: -1px; }
.doc h1 + * { padding-top: 1em; }
.doc .fs { padding: 8em 4em; }
.doc .fs > div { margin: 1em auto; width: 48em; max-width: calc(100vw - 4em); }
.doc .fs .ctn { margin: 4em auto; }
.doc .center { width: 36rem; margin: auto; }
.doc .sorter { padding: 0; grid: 1fr / repeat(auto-fit, 14em); width: 70vw; }
.doc .sorter details { margin: 0.3em 0; }
.doc .sorter details summary ~ * { padding: 0 0 0 0.5em; font-size: 0.8em; }
details { border: 1px solid transparent; }
.doc .trash { float: right; margin: 2em 0 0; }
.doc .sidelabel .trash { float: initial; }
.doc .alt .stack { width: 100%; margin: 0; }
.doc .alt .stack > div:first-child { display: block; }
.doc .alt .stack .sidelabel { width: 100%; grid-template-columns: 1fr 3fr; grid-gap: 1em; }
.doc .alt .stack .sidelabel h4 { padding: 0; }
.doc .alt .stack .sidelabel p { min-height: 3em; }
.doc .alt .stack .nolabel h4 { display: none; }
.doc .notes { }
.doc .notes h3 { padding-top: 0; }
.doc .notes h4 { font-size: 0.9em; text-align: left; font-variation-settings: "wght" 240; }
.doc .notes p[contenteditable] { min-height: 3em; }
div[ajf].inline .ticklist label { display: grid; grid-template-columns: 3em 1fr; place-content: start; }
div[ajf].inline .ticklist label svg { border: 1px solid; margin: 0.35em 0 0; padding: 0; }
div[ajf].inline .ticklist input { padding: 0; }
p, h1, h2, h3, h4, ul, ol, table, form, fieldset, .ctn { max-width: inherit; width: 100%; margin: 0; }
.doc .ctn { display: block; position: relative; }
.doc .ctn.cards { display: grid; place-items: start; grid-gap: 0.5em; margin: 2em auto; grid-template-columns: repeat(auto-fit, minmax(13em, 1fr)); }
.doc .ctn.cards > * { display: grid; grid-template: 1fr auto / 1fr; grid-gap: 1em; padding: 2em 1em 1em; background-color: var(--bright); }
.doc .ctn.cards p { display: block; margin: 0 0 auto; text-align: left; padding: 0 !important; }
.doc .ctn.cards p::first-letter { font-family: Love light; font-size: 3em; text-transform: capitalize; color: var(--main); }
.doc .ctn.cards :last-child p { grid-column: 1 / -1; text-align: center; padding: 2em; aspect-ratio: unset; }
.doc .ctn.cards .styler { display: none; }
.doc .ctn.cards .tools { margin: 0 0 0 auto; font-size: 1em; }
.doc .ctn.cards .tools *:not(svg) { display: contents; }
.doc .ctn.cards .tools .switcher { display: inline-flex; border-radius: 1em; padding: 0.2em 0.4em; grid-gap: 0.5em; width: min-content; background-color: white; position: relative; top: 0.35em; margin: 0; }
.doc .ctn.cards .tools .switcher svg { top: 0; }
.doc .ctn.cards .tools svg { opacity: 0.3; color: var(--text); padding: 0; }
.doc .ctn.cards .tools :checked + label svg { opacity: 1; }
.doc .ctn.cards .tools :checked + label svg[nn=love] { color: var(--blood); }
.doc .ctn.cards .tools :checked + label svg[nn=hate] { color: var(--purpl); }
.doc .ctn.cards .tools :checked + label svg[nn=star] { color: var(--yellow); background-color: white; padding: 0.1em; border-radius: 1em; }
[ajf] .ctn[name] { background: url(../icons/edit.svg) no-repeat 100% 0em; background-size: 1rem; padding-top: 1.5em; margin-top: -1em; }
[ajf] div:not(.ctn) > [contenteditable] { background: url(../icons/edit.svg) no-repeat 100% 30%; background-size: 1rem; padding-right: 1.5rem; }
[ajf] div:not(.ctn) > p[contenteditable] { background-postion: 100% 0em; }
table[ajf] :not(.ctn) [contenteditable], ul[ajf] :not(.ctn) [contenteditable], [ajf] ul :not(.ctn) [contenteditable], [ajf] div:not(.ctn) > [contenteditable]:empty { background: none; padding-right: 0; }
@media only screen and (max-width: 440px) { .doc .ctn.cards > * { aspect-ratio: unset; }
}
h1 { text-transform: unset; }
h2 { font-variation-settings: "wght" 150; }
h1 p { display: contents; }
h2.quote { font-size: 2.5em; }
p.quote { font-size: 1.85em; margin-left: 0; }
p.quote b { font-family: inherit; font-variation-settings: "wght" 800; }
svg.back { position: fixed !important; bottom: calc(100% - 100vh); }
.doc details.conts { -webkit-appearance: none; }
.doc details.conts ::marker { display: none; }
.doc details.conts svg { width: 3em; }
.noempty *[name]:empty::after { content: '' !important; }
*[ajf] .ctn[name]:empty, *[ajf] .ctn[name] h2:empty, *[ajf] .ctn[name] h3:empty, *[ajf] .ctn[name] h4:empty, *[ajf] .ctn[name] p:empty, *[ajf] .ctn[name] li:empty, *[ajf] .ctn[name] blockquote:empty, h1[name]:empty,h2[name]:empty, h3[name]:empty, h4[name]:empty, p[name]:empty, label[name]:empty, li[name]:empty, blockquote[name]:empty { border: 1px dashed rgba(128, 112, 112, 0.3); min-height: 1.3em; }
*[ajf] .ctn[name]:empty { min-height: 5em; }
*[name]:empty:after, .ctn[name] p:first-child:empty:after { opacity: 0.3; text-transform: capitalize; overflow: hidden; font-style: italic; letter-spacing: 0; min-height: 1.3em; }
.ctn[name] p:first-child:empty:after { content: 'content goes here'; }
*[name]:empty:after { content: attr(name); }
*[name][placeholder]:empty::after { content: attr(placeholder); }
.ctn[name] a { color: var(--link); }
.ctn[name] a + input { display: inline-block; position: relative; background-color: var(--link); color: var(--cream); height: 1.3em; width: auto; padding: 0.2em; margin: 0 1em; }
.doc .sidelabel { grid-template-columns: minmax(12em, 1fr) minmax(12em, 3fr); width: 80vw; max-width: unset; grid-gap: 2em 4em; margin: 0; }
.doc .sidelabel > * { max-width: unset; }
.doc .sidelabel > div { width: 100%; padding: 0; }
.doc .sidelabel .columns { columns: 14em; }
.sidelabel .links { width: 100%; }
.links { padding: 1em 0; margin: 0; }
.styler { color: var(--lowlink); }
ul.box, ul.thumbs { display: grid; }
.doc .sidelabel.wide { grid-gap: 2em; }
.sidelabel .oneline { flex-wrap: wrap; }
.doc .oneline { margin-left: 0; }
@media only screen and (max-width: 609px) { .doc .VP { width: calc(100vw - 3em); }
.doc .sidelabel { width: 100%; }
.doc .sidelabel.wide { display: block; }
}
.outline { width: 44em; max-width: 100%; display: grid; grid-gap: 1em; }
.outline details { border: 1px dashed; padding: 1em; width: 100%; border-radius: 0.5em; }
.outline details ul { width: 100%; display: grid; grid-template: 1fr / 1fr; grid-gap: 0.5em; padding: 1em 2.2em; }
.outline details li { border: 1px dotted; padding: 0.7em; font-size: 0.9em; width: 100%; margin: 0; text-align: left; border-radius: 0.5em }
.outline details li * { text-align: left; margin: 0; }
*[sortable] *[draggable] { -webkit-filter: unset; background: url(../icons/drag.svg) no-repeat -1% 50% var(--tspbkg); background-size: 0.8em; padding-left: 1em; }
.ctn > * { padding-right: 1.5rem; padding-left: 1.5rem; }
.ctn [draggable]:focus { background: url(../icons/drag.svg) no-repeat 0em 50%; background-size: 12px; }
.ctn .up { border-none; }
.ctn [data-dropable] { border-bottom: 2px solid #ccc; }
.ctn [data-dropable]:hover { border-bottom-color: var(--apple); }
[contenteditable][draggable] { cursor: text; }
[contenteditable][draggable]:active { cursor: grab; }
.dialogue { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1em; max-width: 36rem; }
.dialogue li { border: 1px solid; padding: 1em; width: auto; }
.dialogue li:nth-child(odd) { grid-column: 1 / 3; border-radius: 1em 1em 1em 0; margin-right: auto; }
.dialogue li:nth-child(even) { grid-column: 2 / 4; border-radius: 1em 1em 0 1em; margin-left: auto; }
.dialogue li div { margin-right: auto; }
.dialogue .checks input + label { display: grid; margin-right: auto; }
.dialogue .checks label svg { opacity: 0.5; color: var(--brown); }
.dialogue .checks :checked + label svg { opacity: 1; }
.dialogue textarea, .dialogue input[type=text] { min-width: 20rem; }
.dialogue ::placeholder { color: var(--cafe); }
.dialogue textarea + .btn, .dialogue input + .btn { position: absolute; bottom: 1em; right: 1em; background-color: var(--youSay); color: var(--cream); aspect-ratio: 1 / 1; padding: 0.5em; border-radius: 1em 1em 0 0; margin: auto auto 0 0; }
.dialogue .typing { display: block; opacity: 1; background: none; color: var(--youSay); -webkit-filter: drop-shadow(1px 1px 1px currentColor); width: auto; display: inline; padding: 0 0.5em; }
.dialogue .typing ~ * { display: none; }
.dialogue :checked + .typing { display: none; }
.dialogue :checked + .typing ~ * { display: block; }
.dialogue[unfolding] .here ~ * { display: none; }
@media only screen and (max-width: 609px) { .doc main > div { max-width: calc(100vw - 2rem); padding: 6em 0 2em; }
}