/* The Notepad (notepad.js): its cover in a showcase and up close, and the book open over the page for its holder.
   Cloth, leather and paper keep their own colours in either theme, as any object does. */
.notepad-object { position: relative; display: block; width: 110px; aspect-ratio: 520 / 770; }
.notepad-object img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35)); }
[data-notepad-toggle][hidden] { display: none; }

/* On the showcase, and up close. */
.notepad-showcase { width: 110px; }
.notepad-preview .notepad-object, .showcase-inventory-preview .notepad-object { width: 100%; }
.profile-showcase .notepad-preview, .notepad-showcase .notepad-preview { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; transform: none; cursor: zoom-in; }
.notepad-showcase .notepad-preview:hover { transform: none; background: transparent; }
.inspector-object.is-notepad .notepad-object { width: min(260px, 60vw); }
.card-page-inspected .card-page-preview .inspector-object.is-notepad .notepad-object { width: min(240px, 56vw); }

/* Open over the page: the strap it is dragged by, the book with its tabs on the edge, and its tools under it. */
.notepad-panel {
    --book: min(380px, calc(100vw - var(--shell-left) - 120px), calc((100vh - var(--shell-pad-top) - var(--shell-bottom) - 110px) * 673 / 940));
    --leather: #22372f;
    --paper-ink: #1f2a44;
    position: fixed;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: calc(var(--book) + 100px);
    color: #f4ecd8;
    pointer-events: none;
}
.notepad-panel > * { pointer-events: auto; }
.notepad-panel[hidden] { display: none; }
.notepad-panel button { font: inherit; color: inherit; background: transparent; border: 0; margin: 0; padding: 0; cursor: pointer; box-shadow: none; }
.notepad-icon { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.notepad-strap { align-self: flex-start; margin-left: calc(var(--book) / 2 - 32px); display: grid; place-items: center; width: 64px; height: 20px; border-radius: 10px 10px 4px 4px; background: var(--leather); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); cursor: grab; touch-action: none; }
.notepad-panel.is-dragged .notepad-strap { cursor: grabbing; }
.notepad-panel.is-dragged { user-select: none; }

.notepad-book { position: relative; width: var(--book); aspect-ratio: 673 / 940; background: url('/static/images/notepad/page.webp') center / 100% 100% no-repeat; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.4)); perspective: 1600px; }
.notepad-paper { position: absolute; inset: 3.5% 14.5% 9% 7%; color: var(--paper-ink); perspective: 1600px; }

/* The page: ruled lines the words sit on, and the drawing over both. */
.notepad-sheet { position: absolute; inset: 0 0 26px; background: repeating-linear-gradient(transparent 0 27px, rgba(70, 110, 170, 0.28) 27px 28px); background-position: 0 30px; }
.notepad-sheet textarea { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; margin: 0; padding: 30px 6px 0; border: 0; resize: none; background: transparent; color: var(--paper-ink); font: 500 22px/28px Caveat, "Segoe Print", "Comic Sans MS", cursive; outline: none; box-shadow: none; }
.notepad-ink { position: absolute; inset: 0; pointer-events: none; touch-action: none; --ink-colour: var(--paper-ink); }
.notepad-sheet.is-drawing .notepad-ink { pointer-events: auto; cursor: crosshair; }
.notepad-number { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font: 500 16px Caveat, cursive; opacity: 0.6; }
.notepad-corner { position: absolute; top: auto; left: auto; bottom: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--paper-ink) !important; opacity: 0.55; transition: opacity 0.15s, background 0.15s; }
.notepad-corner:hover, .notepad-corner:focus-visible { opacity: 1; background: rgba(31, 42, 68, 0.08) !important; }
.notepad-corner.is-previous { left: -4px; }
.notepad-corner.is-next { right: -4px; }
.notepad-corner[hidden] { display: none; }

/* A leaf turning over the page, and the cover swinging open from the spine. */
.notepad-leaf { position: absolute; inset: -2% -4% -4% -3%; opacity: 0; pointer-events: none; transform-origin: left center; border-radius: 2px 6px 6px 2px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.12), transparent 12%), #f3ead6; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.18); }
.notepad-cover { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: left center; backface-visibility: hidden; pointer-events: none; z-index: 3; }
.notepad-cover[hidden] { display: none; }

/* The sections: index tabs standing out of the edge of the pages. */
.notepad-tabs { position: absolute; top: 9%; left: calc(100% - 6px); display: flex; flex-direction: column; gap: 5px; max-height: 80%; overflow: visible; }
.notepad-tab { position: relative; display: flex; align-items: center; max-width: 96px; border-radius: 0 7px 7px 0; background: var(--tab); color: #fff; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); transition: transform 0.15s; }
.notepad-tab.is-current { transform: translateX(6px); }
.notepad-tab [data-notepad-tab] { padding: 3px 8px 3px 12px !important; font: 500 17px/1.1 Caveat, cursive !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); }
.notepad-tab-remove { display: none !important; padding: 0 4px 0 0 !important; }
.notepad-tab-remove .notepad-icon { width: 12px; height: 12px; }
.notepad-tab:hover .notepad-tab-remove, .notepad-tab:focus-within .notepad-tab-remove { display: block !important; }

.notepad-search, .notepad-tab-new { position: absolute; z-index: 2; top: 0; left: 0; right: 0; }
.notepad-search[hidden], .notepad-tab-new[hidden] { display: none; }
.notepad-search input, .notepad-tab-new input { width: 100%; box-sizing: border-box; padding: 4px 10px; border: 1px solid rgba(31, 42, 68, 0.25); border-radius: 6px; background: #fffaf0; color: var(--paper-ink); font: 500 20px Caveat, cursive; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.notepad-results { margin: 4px 0 0; padding: 4px; max-height: 220px; overflow: auto; list-style: none; border-radius: 6px; background: #fffaf0; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); }
.notepad-results[hidden] { display: none; }
.notepad-results button { display: block; width: 100%; padding: 4px 6px !important; border-radius: 4px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--paper-ink) !important; }
.notepad-results button:hover { background: rgba(31, 42, 68, 0.08) !important; }
.notepad-none { padding: 4px 6px; opacity: 0.7; }

/* The tools, on a strip of the cover's leather under the book. */
.notepad-tools { display: flex; align-items: center; gap: 2px; width: var(--book); box-sizing: border-box; padding: 5px 8px; border-radius: 12px; background: var(--leather); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }
.notepad-tools-gap { flex: 1; }
.notepad-tool { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; transition: background 0.15s; }
.notepad-tool:hover, .notepad-tool:focus-visible { background: rgba(255, 255, 255, 0.12) !important; }
.notepad-tool[aria-pressed="true"] { background: #e8b84a !important; color: var(--leather) !important; }