/* START COLOR PALETTE VARIABLES */

:root {

    /* COLORS */
    --color-gs-lt-100 : hsl(0, 0.0%, 100.0%); /* #ffffff */
    --color-gs-lt-98  : hsl(0, 0.0%,  98.0%); /* #fafafa */
    --color-gs-lt-94  : hsl(0, 0.0%,  94.0%); /* #f0f0f0 */
    --color-gs-lt-93  : hsl(0, 0.0%,  92.9%); /* #ededed */
    --color-gs-lt-90  : hsl(0, 0.0%,  90.2%); /* #e6e6e6 */
    --color-gs-lt-88  : hsl(0, 0.0%,  88.2%); /* #e1e1e1 */
    --color-gs-lt-87  : hsl(0, 0.0%,  86.7%); /* #dddddd */
    --color-gs-lt-83  : hsl(0, 0.0%,  82.7%); /* #d3d3d3 */
    --color-gs-lt-80  : hsl(0, 0.0%,  80.4%); /* #d4d4d4 */
    --color-gs-lt-79  : hsl(0, 0.0%,  78.8%); /* #c9c9c9 */
    --color-gs-lt-75  : hsl(0, 0.0%,  74.9%); /* #bfbfbf */
    --color-gs-lt-71  : hsl(0, 0.0%,  71.0%); /* #b5b5b5 */
    --color-gs-lt-68  : hsl(0, 0.0%,  67.5%); /* #acacac */
    --color-gs-lt-64  : hsl(0, 0.0%,  63.5%); /* #a2a2a2 */
    --color-gs-lt-48  : hsl(0, 0.0%,  48.2%); /* #7b7b7b */
    --color-gs-lt-44  : hsl(0, 0.0%,  44.3%); /* #717171 */
    --color-gs-lt-40  : hsl(0, 0.0%,  40.4%); /* #676767 */
    --color-gs-lt-37  : hsl(0, 0.0%,  36.5%); /* #5d5d5d */
    --color-gs-lt-33  : hsl(0, 0.0%,  32.9%); /* #545454 */
    --color-gs-lt-29  : hsl(0, 0.0%,  29.0%); /* #4a4a4a */
    --color-gs-lt-25  : hsl(0, 0.0%,  25.1%); /* #404040 */
    --color-gs-lt-21  : hsl(0, 0.0%,  21.2%); /* #363636 */
    --color-gs-lt-17  : hsl(0, 0.0%,  17.3%); /* #2c2c2c */
    --color-gs-lt-13  : hsl(0, 0.0%,  13.7%); /* #232323 */
    --color-gs-lt-10  : hsl(0, 0.0%,   9.8%); /* #191919 */
    --color-gs-lt-6   : hsl(0, 0.0%,   5.9%); /* #0f0f0f */
    --color-gs-lt-0   : hsl(0, 0.0%,   0.0%); /* #000000 */

    /* COLOR PALETTE */
    /* PREVIOUS : #1B1B2F, #162447, #1F4068, #E43F5A, #F875AA */
    --color-plt-white              : var(--color-gs-lt-100);
    --color-plt-black              : var(--color-gs-lt-0);
    --color-plt-dark               : hsl(240, 27%, 15%);
    --color-plt-medium             : hsl(223, 53%, 18%);
    --color-plt-light              : hsl(213, 54%, 26%);
    --color-plt-light-highlight    : hsl(213, 54%, 82%);
    --color-plt-accent             : hsl(350, 75%, 57%);
    --color-plt-accent-dark        : hsl(350, 75%, 37%);
    --color-plt-accent-highlight   : hsla(350, 75%, 57%, .15);

}

/* END COLOR PALETTE VARIABLES */

/* START VARIABLES */

:root {

    /* FONT FAMILIES & STYLES */
    --color-text-base    : var(--color-gs-lt-6);
    --font-family        : Helvetica, Arial, sans-serif;
    --font-weight-bold   : bold;
    --font-weight-normal : normal;
    --font-weight-gs-lt  : light;

    /* MISC */
    --background-color-body     : var(--color-gs-lt-79);
    --color-link                : var(--color-plt-light);
    --color-link-hover          : hsla(213, 54%, 50%, 1);
    --color-code-highlight      : var(--color-plt-light-highlight);
    --background-color-sections : var(--color-gs-lt-93);

    /* BOX SHADOWS */
    --box-shadow : none;

    /* BORDERS */
    --border-radius-small        : 3px;
    --border-radius-small-bottom : 0 0 var(--border-radius-small) var(--border-radius-small);
    --border-radius-small-top    : var(--border-radius-small) var(--border-radius-small) 0 0;
    --border-radius-small-left   : var(--border-radius-small) 0 0 var(--border-radius-small);
    --border-radius-small-right  : 0 var(--border-radius-small) var(--border-radius-small) 0;
    --border-radius-large        : 8px;
    --border-radius-large-bottom : 0 0 var(--border-radius-large) var(--border-radius-large);
    --border-radius-large-top    : var(--border-radius-large) var(--border-radius-large) 0 0;
    --border-radius-large-left   : var(--border-radius-large) 0 0 var(--border-radius-large);
    --border-radius-large-right  : 0 var(--border-radius-large) var(--border-radius-large) 0;

    /* HOVER */
    --background-color-button       : var(--color-plt-white);
    --background-color-button-hover : var(--color-gs-lt-98);

    /* OUTLINE */
    --outline-color-base            : var(--color-plt-accent);
    --outline-box-shadow-color-base : var(--color-gs-lt-40);

    /* FORMS */
    --background-image-form-select         : url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='25' height='34' viewBox='0 0 25 34'><g fill-rule='evenodd' stroke='none'><rect width='25' height='34' fill='hsla(0,0.0%,88.2%,1)' /><polygon fill='hsla(0,0.0%,9.8%,1)' points='12.5 14 19 20 6 20' transform='matrix(1 0 0 -1 0 34)'/></g></svg>");
    --background-image-form-checkbox       : url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='9' viewBox='0 0 8 7'><polyline fill='none' stroke='hsla(0,0.0%,9.8%,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' points='1 4 3 6 7 1'/></svg>");
    --background-color-form-input-checkbox : var(--color-plt-white);

    /* ICONS */
    --pencil-black       : url("data:image/svg+xml,%3Csvg width='49px' height='49px' viewBox='0 0 46 46' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000  0.000000)' fill='%23000000' fill-rule='nonzero'%3E%3Cpath d='M4 34 L12 42 L0 46 L4 34 Z M38 0 L46 8 L14 40 L6 32 L38 0 Z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --pencil-white       : url("data:image/svg+xml,%3Csvg width='49px' height='49px' viewBox='0 0 46 46' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000  0.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cpath d='M4 34 L12 42 L0 46 L4 34 Z M38 0 L46 8 L14 40 L6 32 L38 0 Z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --pencil-blue        : url("data:image/svg+xml,%3Csvg width='49px' height='49px' viewBox='0 0 46 46' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000  0.000000)' fill='%231F4068' fill-rule='nonzero'%3E%3Cpath d='M4 34 L12 42 L0 46 L4 34 Z M38 0 L46 8 L14 40 L6 32 L38 0 Z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --pencil-accent      : url("data:image/svg+xml,%3Csvg width='49px' height='49px' viewBox='0 0 46 46' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000  0.000000)' fill='%23e43f5b' fill-rule='nonzero'%3E%3Cpath d='M4 34 L12 42 L0 46 L4 34 Z M38 0 L46 8 L14 40 L6 32 L38 0 Z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --arrow-right        : url("data:image/svg+xml,%3Csvg width='12px' height='12px' viewBox='0 0 10 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eclosed%3C/title%3E%3Ctitle%3EExpand%3C/title%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-14.000000  -5.000000)' fill='%23000000' fill-rule='nonzero'%3E%3Cpolygon transform='translate(19.000000  10.000000) rotate(-270.000000) translate(-19.000000  -10.000000) ' points='19 5 24 15 14 15'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    /*--arrow-down        : url("data:image/svg+xml,%3Csvg width='12px' height='12px' viewBox='0 0 10 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EExpand%3C/title%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-14.000000  -5.000000)' fill='%23000000' fill-rule='nonzero'%3E%3Cpolygon transform='translate(19.000000  10.000000) rotate(-180.000000) translate(-19.000000  -10.000000) ' points='19 5 24 15 14 15'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E");*/
    /*--arrow-right-white : url("data:image/svg+xml,%3Csvg width='12px' height='12px' viewBox='0 0 10 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EExpand%3C/title%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-14.000000  -5.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cpolygon transform='translate(19.000000  10.000000) rotate(-270.000000) translate(-19.000000  -10.000000) ' points='19 5 24 15 14 15'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E");*/
    --arrow-down-white   : url("data:image/svg+xml,%3Csvg width='12px' height='12px' viewBox='0 0 10 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EExpand%3C/title%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-14.000000  -5.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cpolygon transform='translate(19.000000  10.000000) rotate(-180.000000) translate(-19.000000  -10.000000) ' points='19 5 24 15 14 15'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --close-black        : url("data:image/svg+xml,%3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg fill='none' fill-rule='evenodd' stroke-linecap='round'%3E%3Cg transform='translate(1.666667  1.666667)' fill-rule='nonzero' stroke='%230F0F0F' stroke-width='2'%3E%3Cline shape-rendering='geometricPrecision' x1='0' y1='0' x2='14.6666667' y2='14.6666667'%3E%3C/line%3E%3Cline shape-rendering='geometricPrecision' x1='14.6666667' y1='0' x2='0' y2='14.6666667'%3E%3C/line%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --close-white        : url("data:image/svg+xml,%3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg fill='none' fill-rule='evenodd' stroke-linecap='round'%3E%3Cg transform='translate(1.666667  1.666667)' fill-rule='nonzero' stroke='%23FFFFFF' stroke-width='2'%3E%3Cline x1='0' y1='0' x2='14.6666667' y2='14.6666667'%3E%3C/line%3E%3Cline x1='14.6666667' y1='0' x2='0' y2='14.6666667'%3E%3C/line%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --command-prompt     : url("data:image/svg+xml,%3Csvg width='12.414228' height='10.423522' viewBox='0 0 12.414228 10.423522' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-1.5000004,-0.29327665)'%3E%3Cg transform='translate(0.981633,1.00082)' stroke='%230f0f0f' stroke-width='2'%3E%3Cpolyline points='7.01362684 0 11.5183674 4.49917986 7.01362684 9.00929322' /%3E%3Cline x1='11.518368' y1='4.4991798' x2='0.51836741' y2='4.4991798' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --command-prompt-rtl : url("data:image/svg+xml,%3Csvg width='14.000001' height='11' viewBox='0 0 14 11' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='rotate(180,6.9571145,5.3583992)'%3E%3Cg transform='translate(0.981633,1.00082)' stroke='%230f0f0f' stroke-width='2'%3E%3Cpolyline points='7.01362684 0 11.5183674 4.49917986 7.01362684 9.00929322' /%3E%3Cline x1='11.518368' y1='4.4991798' x2='0.51836741' y2='4.4991798' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

    --scrollbar-thumb-background-color : var(--color-plt-medium);
    --scrollbar-thumb-border           : 1px solid var(--background-color-body);

    --scrollbar-thumb-textarea-background-color : hsla(223, 53%, 18%, .9);
    --scrollbar-thumb-textarea-border           : 1px solid var(--color-plt-white);

    --progress-accent        : var(--color-plt-medium);
    --progress-background    : var(--color-gs-lt-90);
    --progress-border-radius : 3px;
    --progress-transition    : width 0.05s ease-in;
    --progress-width         : auto;
    --progress-height        : 38px;

    --dialog-width-small : clamp(300px, calc(100vw - 20px), 400px);
}

/* END VARIABLES */

/* START GLOBAL */

html {
    overflow-y               : scroll;
    height                   : 100%;
    padding                  : 9px 0 9px 9px;
    -webkit-text-size-adjust : 100%; /* Prevent font scaling in landscape mode. */
}
html.hidden {
    overflow : hidden;
    padding  : 9px;
}
html, body {
    background-color : var( --background-color-body );
    font-family      : var( --font-family );
    font-kerning     : none;
    font-weight      : var( --font-weight-normal );
    font-style       : normal;
    font-size        : 14px;
    line-height      : 1;
    margin           : 0;
    height: 100%;
}
h2, h3, h4 {
    margin         : 0;
    padding        : 0;
    vertical-align : baseline;
}
h2 {
    font-size: 1.2rem;
}
h3 {
    font-size: 1.1rem;
}
h4 {
    font-size  : 1rem;
    margin-top : 1rem;
}
ul {
    padding-inline-start : 1.4rem;
    margin-block         : .8rem;
    margin-inside        : 0;
    list-style-type      : square;
}
ol {
    padding-inline-start : 1.4rem;
    margin-block         : .8rem;
    margin-inside        : 0;
    list-style-type      : decimal;
}
li {
    margin-bottom: .6rem;
    line-height: 1.1;
}
.cmd {
    list-style-image: var(--command-prompt);
}
.cmd:dir(rtl) {
    list-style-image: var(--command-prompt-rtl);
}
.cmd li {
    padding-inline-start: 4px;
}
.cmd li small, .desc {
    display: block;
    line-height: 1rem;
    margin-top: .2rem;
}
p {
    line-height: 1.25rem;
    margin: .8rem 0;
}
a,
a:link,
a:visited,
a:active {
    color : var(--color-link);
}
strong {
    font-weight : var(--font-weight-bold);
}
*:focus {
    outline-style  : solid;
    outline-color  : var(--outline-color-base);
    outline-width  : 3px;
    outline-offset : -3px;
    position       : relative;
    z-index        : 1;
    top            : 0;
}
body a:focus,
body textarea:focus,
body code:focus,
body input[type='checkbox']:focus {
    outline-offset : 0;
}
*:focus:not(:focus-visible) {
    outline : none;
}
button {
    display          : inline-block;
    appearance       : none;
    border           : none;
    border-radius    : 0;
    padding          : 0;
    margin           : 0;
    font-family      : inherit;
    font-size        : 1rem;
    color            : var( --color-text-base );
    background-color : var( --background-color-button );
}
.btn__primary {
    block-size       : fit-content;
    width            : fit-content;
    min-width        : 44px;
    min-height       : 44px;
    background-color : var(--color-plt-medium);
    color            : var(--color-plt-white);
    border           : 1px solid transparent;
    border-radius    : var(--border-radius-small);
}
.btn__secondary {
    block-size       : fit-content;
    width            : fit-content;
    min-width        : 44px;
    min-height       : 44px;
    background-color : transparent;
    color            : var(--color-text-base);
    border           : 1px solid var(--color-text-base);
    border-radius    : var(--border-radius-small);
}
.btn__secondary:active {
    background-color: var(--color-gs-lt-68);
}
label {
    display       : inline-block;
    margin-bottom : 5px;
    font-size     : 1.1rem;
    font-weight   : var(--font-weight-bold);
}
input[type='password']::placeholder {
    color : var( --color-gs-lt-68 );
}
input[type='checkbox'] {
    appearance       : none;
    position         : relative;
    width            : 14px;
    height           : 14px;
    border-radius    : 2px;
    border           : 1px solid var( --color-gs-lt-87 );
    background-color : var( --background-color-form-input-checkbox );
    margin-top       : 2px;
}
input[type='checkbox']:checked {
    background-image    : var( --background-image-form-checkbox );
    background-repeat   : no-repeat;
    background-position : center center;
}
textarea {
    display       : block; /* Default was inline-block */
    width         : 100%;
    height        : 100%;
    resize        : vertical;
    padding       : 9px;
    margin        : 3px auto 0 auto;
    border        : 0;
    border-radius : var(--border-radius-small);
    overflow      : auto;
    font-family   : monospace;
    font-size     : 1rem;
    white-space   : pre;
    overflow-wrap : normal;
    overflow-x    : scroll;

}
table {
    border-collapse  : collapse;
    border-spacing   : 0;
    /*noinspection CssInvalidPropertyValue*/
    width            : fill-available;
    /*noinspection CssInvalidPropertyValue*/
    width            : -webkit-fill-available;
    margin           : .5rem 0 .5rem 0;
    border           : 1px solid var( --color-gs-lt-75 );
    background-color : var( --color-gs-lt-98 );
    word-break       : initial;
}
th {
    font-weight  : var(--font-weight-bold);
    text-align   : left;
    padding      : 5px;
    border-right : 1px solid var( --color-gs-lt-75 );
}
tr {
    border-bottom : 1px solid var( --color-gs-lt-75 );
}
tr:last-child {
    border : none;
}
td {
    padding      : 5px;
    border-right : 1px solid var( --color-gs-lt-75 );
}
td:last-child {
    border : none;
}
tr {
    border-bottom: 1px solid var(--color-gs-lt-75);
}
.not-encrypted {
    background-color : hsla( 350, 75%, 57%, .3 ) !important;
}
* {
    box-sizing      : border-box;
    /*noinspection CssUnknownProperty*/
    scrollbar-color : var(--scrollbar-thumb-textarea-background-color) transparent;
    /*noinspection CssUnknownProperty*/
    scrollbar-width : thin;
}
::-webkit-scrollbar {
    width  : 9px;
    height : 9px;
}
::-webkit-scrollbar-thumb {
    background-color : var(--scrollbar-thumb-background-color);
    border           : var(--scrollbar-thumb-border);
    border-radius    : 3px;
}
::-webkit-scrollbar-track {
    background : transparent;
}
textarea::-webkit-scrollbar-thumb {
    background-color : var(--scrollbar-thumb-textarea-background-color);
    border           : var(--scrollbar-thumb-textarea-border);
}
progress {
    -webkit-appearance : none;
    background-color   : var(--progress-background);
    accent-color       : var(--progress-accent);
    height             : var(--progress-height);
    border-radius      : var(--progress-border-radius);
}
progress::-webkit-progress-bar {
    background-color : var(--progress-background);
    border-radius    : var(--progress-border-radius);
}
progress::-webkit-progress-value {
    background-color : var(--progress-accent);
    border-radius    : var(--progress-border-radius);
}
progress::-moz-progress-bar {
    background-color : var(--progress-accent);
    border-radius    : var(--progress-border-radius);
}
.color-accent {
    color: var(--color-plt-accent-dark);
}
.visually-hidden {
    position    : absolute !important;
    width       : 1px !important;
    height      : 1px !important;
    padding     : 0 !important;
    margin      : -1px !important;
    overflow    : hidden !important;
    clip        : rect(0,0,0,0) !important;
    white-space : nowrap !important;
    border      : 0 !important;
}
.display-none {
    display : none;
}
.ellipsis {
    max-width     : max-content;
    overflow      : hidden;
    white-space   : nowrap;
    text-overflow : ellipsis;
}
.code {
    background-color : var(--color-code-highlight);
    padding          : 3px;
    font-family      : monospace;
    text-align       : left;
    vertical-align   : inherit;
    word-break       : break-word;
    line-height      : 1rem;
}
.code:active {
    background-color: var(--color-gs-lt-80);
}

.music-notation {
    width: 100%;
    font-family: monospace;
    line-height: 1.3rem;
    padding: 7px;
}

.music-notation td {
    min-width: 20px;
}

.music-notation td.title {
    text-align: center;
}

.time-signature span {
    display: block;
    text-align: center;
    width: 20px;
}

.notation {
    padding: 7px 13px;
    white-space: nowrap;
    letter-spacing: 3px;
}

.scroll-snap {
    scroll-snap-type: y proximity;
    scroll-padding-top: 43px;
}
.scroll-snap section {
    scroll-snap-align: start;
}
@media ( max-width: 800px ) {
    .scroll-snap {
        scroll-padding-top: 49px;
    }
}
@keyframes rotating {
    from {
        rotate : 0deg;
    }
    to {
        rotate : 360deg;
    }
}
@media ( pointer: coarse ) {
    html {
        overflow-y : unset;
        padding    : 5px;
    }
    html, body {
        font-size : 16px;
    }
    input, select, textarea {
        font-size: 100%;
    }
}

/* END GLOBAL */

/* START NOTES */

.notes {
    padding : 0 0 70px 0;
    margin  : 0 auto;
    width   : clamp(250px, 100%, 1400px);
}
.notes__section {
    margin-bottom : 1rem;
}
.notes__sections {
    display               : grid;
    grid-template-columns : repeat(auto-fill,minmax(300px,1fr));
    grid-gap              : 5px;
    padding               : 5px 5px 0 5px;
    border-radius         : var( --border-radius-small-bottom );
}
.not-encrypted .notes__sections { padding-bottom: 5px; }
.notes__sections details {
    margin : 0;
}
.notes > details {
    margin: 5px 5px 0 5px;
}
details {
    --color-background-details-summary      : var( --color-plt-white );
    --color-background-details-summary-open : var( --color-plt-medium );
    --padding-details-summary               : 0 0 0 10px;
    margin                                  : 5px 7px 0 7px;
    background-color                        : transparent;
    border-radius                           : var( --border-radius-small );
    overflow                                : visible;
    display                                 : flow-root;
}
summary {
    height                : 38px;
    padding               : 0;
    background-color      : var( --color-background-details-summary );
    font-weight           : var( --font-weight-bold );
    font-size             : 1.1rem;
    position              : relative;
    top                   : 0;
    user-select           : none;
    display               : grid;
    grid-template-columns : 38px auto min-content;
    grid-gap              : 1px;
    align-items           : center;
    border-radius         : var( --border-radius-small );
}
summary.no-edit {
    grid-template-columns : 38px auto;
}
summary.no-edit span {
    border-radius : var( --border-radius-small-right );
}
summary > * {
    display : inline;
}
summary::-webkit-details-marker {
    display : none;
}
details > summary::before {
    content       : var( --arrow-right );
    line-height   : 0;
    align-self    : center;
    justify-self  : center;
    padding       : 0;
    width         : 38px;
    height        : 38px;
    display       : grid;
    place-content : center;
    border-radius : var( --border-radius-small-left );
}
details > summary:dir(rtl)::before {
    rotate : 180deg;
}
details[open] > summary::before {
    content       : var( --arrow-down-white );
    line-height   : 0;
    border-radius : var( --border-radius-small ) 0 0 0;
}
details[open] > summary:dir(rtl)::before {
    rotate : none;
}
details[open] > summary {
    position         : sticky;
    top              : 0;
    z-index          : 2;
    background-color : var( --color-background-details-summary-open );
    color            : var( --color-plt-white );
    border-radius    : var( --border-radius-small-top );
}
summary button {
    width               : 38px;
    height              : 38px;
    flex                : 0 0 38px;
    background-color    : transparent;
    border-radius       : var( --border-radius-small-right );
    animation           : none;
}
summary button i {
    display             : block;
    width               : 38px;
    height              : 38px;
    background-image    : var( --pencil-black );
    background-color    : transparent;
    background-size     : 16px 16px;
    background-position : center;
    background-repeat   : no-repeat;
    animation           : none;
}
summary button span {
    display: none;
}
details[open] > summary button {
    border-radius    : 0 var( --border-radius-small ) 0 0;
}
details[open] > summary button i {
    background-image : var( --pencil-white );
}
details > summary button.selected i,
details[open] > summary button.selected i {
    background-image : var( --pencil-accent );
    animation        : rotating 1.2s linear 0s infinite;
}
@media ( max-width: 800px ) {
    details {
        --padding-details-summary : 8px 10px;
    }
    summary {
        grid-template-columns : 44px auto min-content;
        height                : 44px;
    }
    summary.no-edit {
        grid-template-columns : 44px auto;
    }
    details > summary::before {
        width  : 44px;
        height : 44px;
    }
    summary button {
        width  : 44px;
        height : 44px;
        flex   : 0 0 44px;
    }
    summary button i {
        width  : 44px;
        height : 44px;
    }
    .notes__sections {
        grid-template-columns : 1fr;
    }
}
@media ( hover: hover ) {
    details > summary:hover {
        background-color: var( --background-color-button-hover );
    }
    details[open] > summary:hover {
        background-color: var( --color-background-details-summary-open );
    }
    details > summary button:hover i {
        background-image: var( --pencil-accent );
    }
}

/* END NOTES */

/* START NOTE */

.note__section {
    margin           : 0;
    padding          : 1rem 1rem 1rem 1rem;
    background-color : var( --background-color-sections );
    word-break       : break-word;
    height           : fit-content;
    border-radius    : var( --border-radius-small );
}
.notes__sections details section { margin: 5px 5px 0 5px }
.notes__sections details[open] section  h4:first-child { margin-top: 0 }
.note--double-wide {
    grid-column : auto / span 2;
}
.note--triple-wide {
    grid-column : auto / span 3;
}
.note--quadruple-wide {
    grid-column : auto / span 4;
}
@media ( max-width: 800px ) {
    .note--double-wide,
    .note--triple-wide,
    .note--quadruple-wide {
        grid-column : 1 / span 1;
    }
    .note--double-wide .note__textarea,
    .note--triple-wide .note__textarea,
    .note--quadruple-wide .note__textarea {
        overflow : scroll;
    }
}

/* END NOTE */

/* START NAVIGATION CONTROLLER */

.controller {
    position        : fixed;
    right           : 5px;
    bottom          : 12px;
    z-index         : 3;
    display         : flex;
    -moz-margin-end : 9px;
}
.controller:dir(rtl) {
    right : unset;
    left  : 5px;
}
html.hidden .controller {
    right           : 14px;
    -moz-margin-end : 0;
}
.controller-button {
    min-width         : 44px;
    height            : 44px;
    box-shadow        : 0 0 7px -2px var(--color-gs-lt-13);
    border-radius     : 50%;
    background-repeat : no-repeat;
}
.controller-button.expand {
    background-image    : var(--arrow-down-white);
    background-position : center 17px;
    background-color    : var(--color-plt-medium);
}
.controller-button.collapse {
    background-image    : var(--arrow-right);
    background-position : 18px center;
    background-color    : var(--color-plt-white);
}
.controller-button.collapse:dir(rtl) {
    rotate: 180deg;
}
.controller-button-span {
    display: none;
}
@media ( pointer: coarse ), ( max-width: 800px ) {
    html.hidden .controller, .controller {
        right           : 12px;
        -moz-margin-end : 0px;
    }
    html.hidden .controller:dir(rtl), .controller:dir(rtl) {
        left           : 12px;
        -moz-margin-end : 0px;
    }
}

/* END NAVIGATION CONTROLLER */

/* START BOOKMARKS */

.bkm__section {
    --padding-bookmark          : 0 15px;
    --background-color-bookmark : var(--color-gs-lt-100);
    --color-bookmark            : var(--color-text-base);
    padding                     : 0;
    background-color            : transparent;
}
.bkm__section ul {
    padding         : 0;
    margin          : 0;
    list-style-type : none;
}
.bkm__section ul + .bkm__section ul {
    margin-top : 5px;
}
.bkm__section li {
    margin  : 0;
    padding : 0;
    background-color : var( --color-plt-white );
}
.bkm__section li:first-child {
    border-radius : var( --border-radius-small-top );
}
.bkm__section li:last-child {
    border-radius : var( --border-radius-small-bottom );
}
.bkm__section li:only-child {
    border-radius : var( --border-radius-small );
}
.bkm__section li:last-child .bkm__a {
    margin : 0;
}
.bkm__section a,
.bkm__section a:link,
.bkm__section a:visited,
.bkm__section a:active {
    display          : grid;
    align-content    : center;
    margin           : 0 0 1px 0;
    padding          : var(--padding-bookmark);
    min-height       : 38px;
    line-height      : 1rem;
    text-decoration  : none;
    background-color : var(--background-color-bookmark);
    color            : var(--color-bookmark);
    border-radius    : inherit;
}
.bkm__section li:last-child a {
    margin: 0;
}
.bkm__section a:focus {
    outline-offset : -3px;
}
@media ( max-width: 800px ) {
    .bkm__section a,
    .bkm__section a:link,
    .bkm__section a:visited,
    .bkm__section a:active {
        min-height : 44px;
    }
}
@media ( hover: hover ) {
    .bkm__section a:hover {
        background-color: var( --background-color-button-hover );
    }
}

/* END BOOKMARKS */

/* START CHECKLIST */

.cl__section {
    margin           : 0;
    padding          : 1rem 1rem 1rem 1rem;
    background-color : var( --background-color-sections );
    height           : fit-content;
    border-radius    : var( --border-radius-small );
}
.cl__section header {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    font-size       : 1.1rem;
}
.cl__section header h3 {
    flex : 1 0 auto;
}
.cl__section header label {
    height           : 38px;
    min-width        : 38px;
    margin           : 0 5px 0 0;
    padding          : 0;
    display          : grid;
    place-content    : center;
    background-color : var(--color-gs-lt-100);
    border-radius    : var( --border-radius-small );
}
.cl__section header input {
    padding : 0;
    margin  : 0;
}
.cl__section header button {
    padding          : 0 13px;
    height           : 38px;
    min-width        : 38px;
    border-radius    : var( --border-radius-small );
}
.cl__section header button.select-all {
    margin : 0 5px 0 0;
}
.cl__section h4 {
    margin-top  : 5px;
    line-height : 2.25rem;
}
.cl__section label {
    display          : flex;
    align-items      : center;
    min-height       : 30px;
    background-color : var(--color-gs-lt-100);
    margin-bottom    : 1px;
    font-size        : 1rem;
    font-weight      : var(--font-weight-normal);
}
.cl__section label.hide {
    display : none;
}
.cl__section input {
    margin : 0 10px;
}
@media ( max-width: 800px ) {
    .cl__section header label,
    .cl__section header button.select-all {
        margin-right : 10px;
    }
}
@media ( hover: hover ) {
    .cl__section label:hover,
    .cl__section header label:hover,
    .cl__section header button:hover {
        background-color: var( --background-color-button-hover );
    }
}

/* END CHECKLIST */

/* START FOOTER */

footer {
    padding    : 0 5px 12px 5px;
    margin     : 0 auto;
    width      : clamp(250px, 100%, 1400px);
    text-align : center;
}
footer button.btn__secondary {
    width               : 38px;
    min-width           : 38px;
    height              : 38px;
    min-height          : 38px;
    background-image    : var(--pencil-black);
    background-size     : 16px 16px;
    background-position : center;
    background-repeat   : no-repeat;
}
@media ( hover: hover ) {
    footer button:hover {
        /*background-image: var( --pencil-accent );*/
    }
}
@media ( max-width: 800px ) {
    footer button.btn__secondary {
        width      : 44px;
        min-width  : 44px;
        height     : 44px;
        min-height : 44px;
    }
}

/* END FOOTER */

/* START DIALOG */

dialog {
    position         : unset;
    display          : block;
    padding          : 0;
    background-color : var(--color-plt-white);
    border-width     : 0;
    border-radius    : var(--border-radius-small);
}
html.dialog {
    overflow-y : unset;
    padding    : 0;
}
.dialog body {
    display       : grid;
    height        : 100svh;
    place-content : center;
    place-items   : center;
}
.dialog body.edit,
.dialog body.setup {
    align-content: start;
}
.dialog body .notes,
.dialog body .controller,
.dialog body footer {
    display : none;
}

.close:active {
    background-color: var(--color-gs-lt-68) !important;
}

#dialogProgressBar {
    width : var(--dialog-width-small);
}
#dialogProgressBar div {
    display    : grid;
    grid-gap   : 10px;
    padding    : 40px 40px;
    margin     : 0;
}
#dialogProgressBar label {
    margin : 0;
}
#dialogProgressBar progress {
    width : var(--progress-width);
    color : var(--color-text-base);
}
#dialogProgressBar small {
    margin-top : 5px;
}


#dialogPassphrase div {
    display               : grid;
    grid-template-columns : min-content 1fr;
    grid-gap              : 10px;
    padding               : 40px 40px;
    width                 : var(--dialog-width-small);
}
#dialogPassphrase label {
    display     : block;
    margin      : 0;
    line-height : 1.2rem;
    grid-column : 1 / 3;
}
#dialogPassphrase input {
    height        : 38px;
    width         : 100%;
    padding       : 10px;
    margin        : 0 0 0 0;
    border        : 1px solid var(--color-text-base);
    border-radius : var(--border-radius-small);
    grid-column   : 1 / 3;
}
#dialogPassphrase .error {
    color       : var(--color-plt-accent-dark);
    margin      : 0 0 0 0;
    line-height : 1.2em;
}
#dialogPassphrase .error.show {}
#dialogPassphrase button {
    height           : 38px;
    width            : 120px;
    min-width        : 120px;
    padding          : 0 20px;
    justify-self     : left;
}


#dialogEdit {
    display            : grid;
    grid-template-rows : 44px auto 72px;
    width              : calc( 100vw - 18px );
    max-width          : 1400px;
    height             : 100svh;
    background-color   : var(--background-color-body);
}
#dialogEdit header {
    display               : grid;
    grid-template-columns : 3fr 180px 44px;
    place-content         : center;
    place-items           : center;
    margin                : 0;
}
#dialogEdit header h2 {
    place-self   : center start;
    padding-left : 14px;
}
#dialogEdit time {
    font-size: .8rem;
    text-align  : center;
    line-height : 1.1;
}
#dialogEdit header button {
    width               : 44px;
    height              : 44px;
    padding             : 13px;
    background-image    : var( --close-black );
    background-repeat   : no-repeat;
    background-position : center;
    background-color    : transparent;
    border-radius       : var(--border-radius-small);
}
#dialogEdit header button span {
    display : none;
}
#dialogEdit form {
    border-radius : var(--border-radius-small);
}
#dialogEdit textarea {
    width         : 100%;
    height        : 100%;
    margin        : 0;
    border-radius : var(--border-radius-small);
    resize        : none;
}
#dialogEdit nav {
    display               : grid;
    grid-template-columns : 2fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap              : 5px;
    place-content         : center;
    place-items           : center;
}
#dialogEdit nav button {
    height      : 44px;
    width       : 100%;
    padding     : 0;
    /*line-height : 42px;*/
    font-family : monospace;
}
#dialogEdit nav button#saveNote {
    width       : 100%;
    padding     : 0;
    font-family : var(--font-family);
}
#dialogEdit.processing form {
    display          : grid;
    place-content    : center;
    place-items      : center;
    width            : calc( 100% - 10px );
    height           : calc( 100% - 10px );
    margin           : 0 auto;
    background-color : var(--color-plt-white);
    border-radius    : var(--border-radius-small);
}
#dialogEdit.processing form input,
#dialogEdit.processing form textarea {
    visibility : hidden;
}
#dialogEdit.processing #saveNote i {
    display             : block;
    width               : 38px;
    height              : 38px;
    margin              : auto;
    background-image    : var( --pencil-white );
    background-color    : transparent;
    background-size     : 16px 16px;
    background-position : center;
    background-repeat   : no-repeat;
    animation           : rotating 1.2s linear 0s infinite;
}
#dialogEdit.processing #saveNote span {
    display : none;
}


#dialogSetup {
    width            : calc( 100vw - 18px );
    max-width        : 400px;
    height           : 100svh;
    background-color : var(--background-color-body);
}
#dialogSetup#dialogSetup {
    height        : 100%;
    margin-bottom : 3px;
}
#dialogSetup header {
    display               : grid;
    grid-template-columns : 3fr 44px;
    place-content         : center;
    place-items           : center;
    margin                : 0;
}
#dialogSetup header h2 {
    place-self   : center start;
    padding-left : 14px;
}
#dialogSetup header button {
    width               : 44px;
    min-width           : 44px;
    height              : 44px;
    padding             : 13px;
    background-image    : var( --close-black );
    background-repeat   : no-repeat;
    background-position : center;
    background-color    : transparent;
    border-radius       : var(--border-radius-small);
}
#dialogSetup header button span {
    display : none;
}
#dialogSetup form {
    margin           : 0 auto 9px auto;
    padding          : 0;
    border-radius    : var(--border-radius-small);
    background-color : transparent;
}
#dialogSetup fieldset {
    display               : grid;
    grid-template-columns : min-content;
    grid-gap              : 10px;
    width                 : var(--dialog-width-small);
    padding               : 40px 40px;
    margin                : auto;
    border                : none;
    border-radius         : var(--border-radius-small);
    background-color      : var(--color-plt-white);
}
#scrollForm fieldset {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    grid-gap              : 10px;
    padding               : 40px 40px;
    position              : relative;
}
#scrollForm h3 {
    grid-column : 1 / 3;
    line-height : 1.2rem;
}
#dialogSetup label {
    display     : block;
    margin      : 0;
    line-height : 1.2rem;
    grid-column : 1 / 3;
}
#dialogSetup input[type='url'] {
    display       : block;
    width         : 100%;
    padding       : 10px;
    margin        : 0 0 0 0;
    border        : 1px solid var(--color-text-base);
    border-radius : var(--border-radius-small);
    grid-column   : 1 / 3;
}
#dialogSetup input[type='file'],
#dialogSetup input[type='file'] input {
    display       : block;
    width         : 100%;
    height        : auto;
    padding       : 0;
    margin        : 0;
    border        : none;
    border-radius : unset;
    font-size     : 1rem;
    grid-column   : 1 / 3;
}
#dialogSetup input[type='file']::file-selector-button {
    padding: 0 13px;
    margin: 0 10px 0 0;
    line-height: 38px;
    vertical-align: center;
    text-align: left;
    font-size: 1rem;
    color: var(--color-text-base);
    background-color: transparent;
    border: 1px solid var(--color-text-base);
    border-radius: var(--border-radius-small);
}
#dialogSetup input[type='file']::file-selector-button:active {
    background-color: var(--color-gs-lt-68);
}
#scrollForm label {
    display               : grid;
    grid-template-columns : min-content max-content;
    grid-column           : unset;
    align-content         : center;
    align-items           : center;
    height                : 38px;
    margin                : 0;
    font-size             : 1rem;
    font-weight           : normal;
}
#scrollForm input[type='radio'] {
    min-width: 15px;
    margin-inline: 0 10px;
    margin-block: 0;
    appearance: none;
    background-color: transparent;
    border: 1px solid var(--color-text-base);
    border-radius: 50%;
    aspect-ratio: 1;
}
#scrollForm input[type='radio']:checked {
    background-color: var(--color-plt-medium);
}
#dialogSetup .error {
    color       : var(--color-plt-accent-dark);
    margin      : 0 0 0 0;
    line-height : 1.2em;
}
#dialogSetup .error.show {
    /*visibility : visible;*/
}
#dialogSetup button {
    display          : block;
    justify-self     : left;
    height           : 44px;
    width            : 120px;
    min-width        : 120px;
    padding          : 0 20px;
}
#dialogSetup form.processing button i {
    display             : block;
    width               : 38px;
    height              : 38px;
    margin              : auto;
    background-image    : var( --pencil-white );
    background-color    : transparent;
    background-size     : 16px 16px;
    background-position : center;
    background-repeat   : no-repeat;
    animation           : rotating 1.2s linear 0s infinite;
}
#dialogSetup form.processing button span {
    display : none;
}


@media ( max-width: 800px ) and ( pointer: coarse ) {
    #dialogPassphrase input,
    #dialogPassphrase button {
        height : 44px;
    }
    #dialogEdit header {
        grid-template-columns: 3fr 100px 44px;
    }
    #dialogEdit nav button:not(#saveNote) {
        font-size : .85rem;
    }
    #scrollForm label {
        height: 44px;
    }
    .error {
        font-size: .75rem;
    }
}

/* END DIALOG */