@font-face { font-family: 'ET Book'; src: url(incipit/fonts/text/et-book-roman-old-style-figures.ttf); }
@font-face { font-family: 'ET Book'; font-style: italic; src: url(incipit/fonts/text/et-book-display-italic-old-style-figures.ttf); }

:root {
	--paper: #f3efe6;
	--sheet: #fbf8f1;
	--ink: #2b2824;
	--quiet: #857d70;
	--tile: 512px;
}
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--paper); }
body { font: 15px/1.25 'ET Book', Georgia, serif; color: var(--ink); overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
button, a { font: inherit; }

#field { position: fixed; inset: 0; overflow: hidden; cursor: grab; touch-action: none; background: var(--paper); }
#field.dragging { cursor: grabbing; }
#paper { position: absolute; left: calc(-1 * var(--tile)); top: calc(-1 * var(--tile)); width: calc(100% + 2 * var(--tile)); height: calc(100% + 2 * var(--tile)); background-size: var(--tile) var(--tile); will-change: transform; }
.flat #paper { background-image: none !important; }
#world { position: absolute; left: 0; top: 0; will-change: transform; }

/* --lean: neighbours leaning out of the picked initial's way, and back */
:root { --lean: transform .45s cubic-bezier(.25, .8, .3, 1); }
.cap { position: absolute; opacity: 0; transition: opacity .35s ease, var(--lean); }
.cap.shown { opacity: 1; cursor: pointer; }
/* inked in (inking.js) rather than faded */
.cap.inked { transition: var(--lean); }
.cap.gone { opacity: 0; transition: opacity .3s ease, var(--lean); pointer-events: none; }
/* the copy that replays the growth over a cell */
.cap.grow { transition: var(--lean); pointer-events: none; }
.cap.grow.fading { opacity: 0; transition: opacity .25s ease, var(--lean); }
/* the still under it, out of sight but still clickable */
.cap.under { opacity: 0 !important; transition: var(--lean) !important; }

/* paper pieces: the torn sheet is a canvas behind each (torn.js) */
.sheet-bg { z-index: -1; }
#bar, .tag, #collection, .tab, .sheet { isolation: isolate; }

button.plain, #bar button, .tag button, .tag a { all: unset; cursor: pointer; color: var(--quiet); }
#bar button:hover, .tag button:hover, .tag a:hover { color: var(--ink); }
[hidden] { display: none !important; }

/* the bar: a torn strip at the top */
#bar { position: fixed; left: 14px; top: calc(14px + env(safe-area-inset-top)); display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; max-width: calc(100vw - 28px); box-sizing: border-box; padding: 8px 16px 9px; }
#hint { color: var(--quiet); font-style: italic; }
#bar .off { text-decoration: line-through; }
#letterbtn { min-width: 6em; }

/* the tag under the chosen initial: each thing it does on its own scrap of paper, a little askew.
   Picked, its scraps come out from under it once its neighbours have leant away */
.tag { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 3px; --from: -9px; }
.tag.above { --from: 9px; }
.tag.arrive { animation: arrive .32s cubic-bezier(.25, .8, .3, 1) .12s both; }
@keyframes arrive { from { opacity: 0; transform: translateY(var(--from)); } }
.tag .row { display: flex; align-items: center; gap: 5px; }
.tag .space { width: 7px; }
.tag .scrap { all: unset; position: relative; isolation: isolate; display: inline-flex; padding: 7px; cursor: pointer; transform: rotate(var(--tilt, 0deg)); transition: transform .15s ease; }
.tag .scrap.small { padding: 6px; }
.tag .scrap:hover { transform: rotate(0deg) translateY(-1px) scale(1.07); }
.tag .scrap canvas:not(.sheet-bg) { display: block; }
.tag .scrap.busy canvas:not(.sheet-bg) { opacity: .45; }
.tag .scrap.busy { cursor: progress; }
.tag .note { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 3px; font-size: 12px; font-style: italic; color: var(--quiet); white-space: nowrap; pointer-events: none; }
/* the row above the initial: its notes go above it, clear of the initial */
.tag.above .note { top: auto; bottom: 100%; margin: 0 0 3px; }
/* more like this says what it does, in words, unlike the icons */
.tag .scrap.word { padding: 6px 13px 8px; font-style: italic; font-size: 19px; line-height: 1; color: var(--ink); white-space: nowrap; }
#pins { font-size: 12px; font-style: italic; color: var(--quiet); }
#pins:empty { display: none; }

/* the collection: a row along the foot, in the middle, newest first, after a bookmark */
#collection { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: calc(100vw - 28px); box-sizing: border-box; display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 12px; }
#collection .mark { flex: none; display: flex; }
#collection .items { min-width: 0; overflow-x: auto; display: flex; align-items: center; gap: 4px; padding: 7px 7px 4px 2px; scrollbar-width: none; }
#collection .item { position: relative; width: 56px; height: 56px; flex: none; cursor: pointer; }
#collection canvas { width: 56px; height: 56px; display: block; transition: opacity .2s; }
#collection .item.arriving canvas { opacity: 0; }
#collection .item button { all: unset; position: absolute; top: -4px; right: -6px; font-size: 14px; color: var(--quiet); opacity: 0; cursor: pointer; }
#collection .item:hover button { opacity: 1; }
#collection .item button:hover { color: var(--ink); }
.flying { position: fixed; z-index: 50; pointer-events: none; transform-origin: 0 0; transition: transform .75s cubic-bezier(.3, .6, .2, 1); }

/* in context: an aged sheet over the whole screen, the initial laid on it */
#sheet { position: fixed; inset: 0; z-index: 10; opacity: 0; transition: opacity .5s ease; cursor: zoom-out; }
#sheet.shown { opacity: 1; }
#sheet .aged { position: absolute; inset: 0; width: 100%; height: 100%; }
#sheet .initial { position: absolute; mix-blend-mode: multiply; }
#bar, #collection { z-index: 12; }

/* the flat page, for browsers without WebGPU */
#context { position: fixed; inset: 0; padding: 16px; background: color-mix(in srgb, var(--paper) 88%, transparent); cursor: zoom-out; z-index: 20; }
#context canvas { display: block; box-shadow: 0 1px 10px rgba(40, 30, 20, .18); }
#context p { margin: 0; color: var(--quiet); }

/* the edit view */
#editor { position: fixed; inset: 0; z-index: 30; display: flex; gap: 40px; padding: 40px 36px 28px 40px; background: color-mix(in srgb, var(--paper) 94%, transparent); }
#editor .stage { flex: none; }
#editor .preview { display: block; box-shadow: 0 2px 14px rgba(50, 35, 20, .16); }
#editor .binder { flex: 0 1 450px; margin-left: auto; display: flex; flex-direction: column; min-width: 300px; }
#editor .tabs { display: flex; gap: 1px; padding-left: 6px; position: relative; z-index: 1; margin-bottom: -3px; }
#editor .tab { all: unset; position: relative; cursor: pointer; padding: 7px 8px 9px; font-size: 14.5px; color: var(--ink); transform: translateY(5px); transition: transform .15s; display: flex; gap: 6px; align-items: center; }
#editor .tab { flex: 0 1 auto; min-width: 0; }
#editor .tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#editor .tab.on { transform: none; z-index: 2; }
#editor .tab .pin { display: inline-flex; width: 13px; height: 13px; opacity: .3; transition: opacity .15s; }
#editor .tab .pin svg { width: 13px; height: 13px; fill: var(--ink); }
#editor .tab .pin:hover { opacity: .7; }
#editor .tab.pinned .pin { opacity: 1; }
#editor .sheet { flex: 1; position: relative; display: flex; flex-direction: column; min-height: 0; padding: 18px 22px 14px; }
#editor .body { flex: 1; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
#editor .group { margin: 0 0 16px; }
#editor h3 { margin: 0 0 6px; font-weight: normal; font-size: 13px; font-variant: small-caps; letter-spacing: .07em; color: var(--quiet); }
#editor .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
#editor .chip { all: unset; box-sizing: border-box; min-width: 26px; height: 30px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--quiet); border-radius: 2px; }
#editor .chip:hover { color: var(--ink); background: rgba(60, 45, 30, .06); }
#editor .chip.on { color: var(--ink); background: rgba(60, 45, 30, .11); }
#editor .letters .chip { min-width: 22px; padding: 0 3px; height: 24px; }
#editor .faces { max-height: 168px; overflow-y: auto; scrollbar-width: thin; }
#editor .chip.face { width: 40px; height: 40px; font-size: 30px; line-height: 1; padding: 0; color: var(--ink); }
#editor .chip canvas { width: 34px; height: 34px; display: block; opacity: .75; }
#editor .chip.on canvas, #editor .chip:hover canvas { opacity: 1; }
#editor .patterns .chip, #editor .frames .chip { height: 40px; min-width: 40px; padding: 3px; }
#editor .patterns .chip.word { font-style: italic; }
#editor .chip.ink { width: 26px; height: 26px; min-width: 0; padding: 0; border-radius: 50%; }
#editor .chip.ink::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 1px rgba(40, 30, 20, .25); }
#editor .chip.ink.on { box-shadow: 0 0 0 1.5px var(--ink); background: none; }
#editor .chip.palette { gap: 2px; padding: 0 5px; height: 26px; }
#editor .chip.palette i { width: 9px; height: 16px; box-shadow: inset 0 0 0 .5px rgba(40, 30, 20, .25); }
#editor .words .chip { font-style: italic; }
#editor .slider { display: grid; grid-template-columns: 9em 1fr; align-items: center; gap: 10px; margin: 2px 0; color: var(--quiet); }
#editor input[type=range] { -webkit-appearance: none; appearance: none; background: none; height: 22px; margin: 0; }
#editor input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--ink); opacity: .55; }
#editor input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: -6px; border-radius: 50%; background: var(--sheet); box-shadow: 0 0 0 1px var(--ink), 0 1px 2px rgba(40, 30, 20, .3); }
#editor input[type=range]::-moz-range-track { height: 1px; background: var(--ink); }
#editor input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--sheet); border: 1px solid var(--ink); }
#editor .colours { display: flex; gap: 14px; }
#editor .colour { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--quiet); font-size: 13px; }
#editor input[type=color] { width: 30px; height: 30px; padding: 0; border: none; background: none; cursor: pointer; }
#editor .foot { display: flex; justify-content: flex-end; gap: 18px; padding-top: 10px; }
#editor .foot button { all: unset; cursor: pointer; color: var(--quiet); font-size: 16px; }
#editor .foot button:hover { color: var(--ink); }
#editor .foot .done { color: var(--ink); font-style: italic; }