/* =====================================================================
   notes.css — the look of sky/notes.js.
   (it used to be written inside the script, as strings; same rules, now here)
   ===================================================================== */

.notes-board {
    aspect-ratio: 4 / 5;
    z-index: 2;
    cursor: zoom-in;
    filter: drop-shadow(0 6px 7px rgba(0, 0, 0, .42));
    transition: transform .25s;
    transform: rotate(var(--tilt, 1.5deg));
}
.notes-board:hover,
.notes-board:focus-visible {
    transform: rotate(var(--tilt, 1.5deg)) translateY(-2px);
    outline: none;
}
.notes-board>svg,
.notes-board>.art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.notes-board .nb-list {
    position: absolute;
    inset: var(--paper, 22% 16% 8% 16%);
    overflow: hidden;
    color: #3a2716;
    font: italic calc(var(--nb-w, 150px) * .075)/1.35 "IM Fell English", Georgia, serif;
    -webkit-mask-image: linear-gradient(#000 80%, transparent);
    mask-image: linear-gradient(#000 80%, transparent);
    pointer-events: none;
}
.notes-board .nb-list b {
    display: block;
    font: normal 1.15em "IM Fell English SC", Georgia, serif;
    margin-bottom: .2em;
}
.notes-board .nb-list div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notes-board .nb-list .done {
    text-decoration: line-through;
    opacity: .55;
}
.notes-board .nb-hint {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    white-space: nowrap;
    font-style: italic;
    font-size: .9rem;
    color: #f3e6c2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}
.notes-board:hover .nb-hint,
.notes-board:focus-visible .nb-hint {
    opacity: 1;
}
.notes-sheet {
    position: fixed;
    inset: 0;
    z-index: 8;
    display: grid;
    place-items: center;
    padding: 60px 16px 24px;
    background: rgba(14, 9, 5, .82);
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s, visibility 0s .3s;
    font-family: "IM Fell English", Georgia, serif;
}
.notes-sheet.open {
    visibility: visible;
    opacity: 1;
    transition: opacity .3s;
}
.notes-sheet .ns-paper {
    position: relative;
    width: min(560px, 100%);
    max-height: calc(100vh - 110px);
    overflow: auto;
    padding: 34px 40px 30px;
    color: #3a2716;
    background: #efe3c6 var(--sheet-art, none) center / 100% 100% no-repeat;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .6), inset 0 0 40px rgba(120, 80, 30, .25);
    transform: rotate(-.6deg);
}
.notes-sheet h2 {
    margin: 0 0 10px;
    font: normal 1.7rem "IM Fell English SC", Georgia, serif;
}
.notes-sheet h3 {
    margin: 22px 0 6px;
    font: normal 1.2rem "IM Fell English SC", Georgia, serif;
    color: #6e5236;
}
.notes-sheet ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.notes-sheet li {
    position: relative;
    padding: 5px 0 5px 30px;
    border-bottom: 1px dashed rgba(110, 82, 54, .3);
    font-size: 1.08rem;
    white-space: pre-wrap;
}
.notes-sheet li.todo::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 9px;
    width: 15px;
    height: 15px;
    border: 1.6px solid #6e5236;
    border-radius: 3px;
}
.notes-sheet li.todo.done {
    color: #8a7258;
    text-decoration: line-through;
}
.notes-sheet li.todo.done::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 6px;
    width: 7px;
    height: 13px;
    border: solid #9a3b1f;
    border-width: 0 3px 3px 0;
    transform: rotate(40deg);
}
.notes-sheet li.note {
    padding-left: 0;
}
.notes-sheet li.note i {
    display: block;
    font-size: .85rem;
    color: #8a7258;
}
.notes-sheet .ns-x {
    position: absolute;
    top: 8px;
    right: 12px;
    border: 0;
    background: none;
    font-size: 1.5rem;
    color: #6e5236;
    cursor: pointer;
}
.notes-sheet .ns-empty {
    font-style: italic;
    color: #8a7258;
}
body.notes-open .place-tabs,
body.notes-open .cp {
    opacity: 0;
    pointer-events: none;
}