:root {
  
    --bkg:          var(--white);
    --text:         var(--black);
    --link:         var(--blues);
    --hover:        var(--blued);
    --lowlink:      var(--brack); /* #877 = 128, 112, 112  */
    --input:        var(--beige);
    

}


.login *, *.login   { -webkit-filter: unset; }

.doc main                       { }
.doc main > div                 { text-align: left; padding: 8em 7em; /* IF not class - VP restates it */ }
.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) 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%; background-size: 0.8em; padding: 0.3em 0 0.3em 1em; }


.ctn > *                            { padding-right: 1.5rem; padding-left: 1.5rem; /* this is to account for the draggable sign */ }
.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; }
}