/* Every writing dimension derives from one size preset. Paper never enters the spine. */
.notebook-page{--writing-font:18px;--row:32px;--writing-scale:1;--grip-base:14px;--flag-base:40px;--symbol-base:36px;--gap-base:8px;--paper-offset:48px;--grip-width:calc(var(--grip-base)*var(--writing-scale));--flag-width:calc(var(--flag-base)*var(--writing-scale));--symbol-width:calc(var(--symbol-base)*var(--writing-scale));--writing-gap:calc(var(--gap-base)*var(--writing-scale));--writing-inset:calc(var(--grip-width) + var(--flag-width) + var(--symbol-width) + 3*var(--writing-gap))}
.paper-content{margin-left:calc(0px - var(--paper-offset))}
/* 24px inset clears the binding on desktop, tablet and mobile, independent of type size. */
.notebook-page .paper-content:before{inset:0 0 0 24px;background-position:0 0}
.notebook-page[data-paper=dots] .paper-content:before{background-image:radial-gradient(circle at 1px calc(var(--row) - 1px),#b9bea7 calc(.7px*var(--writing-scale)),transparent calc(1px*var(--writing-scale)));background-size:calc(var(--row)/2) var(--row)}
.notebook-page[data-paper=ruled] .paper-content:before{background-image:linear-gradient(to bottom,transparent calc(var(--row) - 1px),#dbdecc calc(var(--row) - 1px));background-size:100% var(--row)}
.notebook-page[data-paper=grid] .paper-content:before{background-image:linear-gradient(to bottom,transparent calc(var(--row) - 1px),#e2e4d4 calc(var(--row) - 1px)),linear-gradient(to right,transparent calc(var(--row) - 1px),#e2e4d4 calc(var(--row) - 1px));background-size:var(--row) var(--row)}
.page-header{padding-left:calc(var(--writing-inset) - var(--paper-offset))}
.entry-row{grid-template-columns:var(--grip-width) var(--flag-width) var(--symbol-width) minmax(0,1fr);column-gap:var(--writing-gap);min-height:var(--row)}
.entry-text,#entry-editor{font-size:var(--writing-font);line-height:var(--row);min-height:var(--row)}
.entry-grip,.entry-grip-placeholder{width:var(--grip-width);height:var(--row);line-height:var(--row);font-size:calc(15px*var(--writing-scale))}
.entry-signifiers{width:var(--flag-width);height:var(--row);line-height:calc(var(--row)/2);font-size:calc(13px*var(--writing-scale));gap:calc(2px*var(--writing-scale))}
.entry-signifiers svg{width:calc(15px*var(--writing-scale));height:calc(15px*var(--writing-scale));flex-shrink:0}
.entry-symbol{width:var(--symbol-width);min-width:var(--symbol-width);height:var(--row);min-height:var(--row);line-height:var(--row);font-size:calc(19px*var(--writing-scale))}
.blank-row{height:var(--row);padding-left:var(--writing-inset);font-size:var(--writing-font)}
.blank-symbol{left:calc(var(--grip-width) + var(--flag-width) + 2*var(--writing-gap));width:var(--symbol-width);font-size:calc(17px*var(--writing-scale))}
.blank-hint{font-size:calc(16px*var(--writing-scale))}
.entry-labels{height:var(--row);min-height:var(--row)}
.entry-labels>button{font-size:calc(9px*var(--writing-scale));padding:calc(3px*var(--writing-scale)) calc(7px*var(--writing-scale))}
.entry-link{font-size:calc(11px*var(--writing-scale));line-height:var(--row)}
.editor-hint{height:var(--row);min-height:var(--row);line-height:var(--row);font-size:calc(8px*var(--writing-scale))}
.entry-group-date{margin-left:var(--writing-inset);line-height:var(--row);padding-top:var(--row);font-size:calc(9px*var(--writing-scale))}
.index-intro,.index-add{margin-left:var(--writing-inset);line-height:var(--row)}
.index-row{padding-left:var(--writing-inset);min-height:calc(2*var(--row));font-size:var(--writing-font)}
.index-add{line-height:calc(2*var(--row));font-size:calc(16px*var(--writing-scale))}
.text-size-options{display:flex;align-items:center;gap:5px;padding:0 5px 8px}.text-size-options button{display:flex;align-items:center;justify-content:center;width:40px;height:42px;flex:1;border:1px solid transparent;border-radius:4px;font:var(--size-preview)/1 var(--serif);color:#687660}.text-size-options button:hover{background:#eff2e5}.text-size-options button[aria-pressed=true]{background:#e8eddf;border-color:#a7b49a;color:#3e5739}.text-size-options+.menu-empty{margin:0 0 5px}
@media(max-width:900px){.notebook-page{--grip-base:12px;--flag-base:34px;--symbol-base:32px;--gap-base:7px;--paper-offset:35px}}
@media(max-width:680px){.notebook-page{--grip-base:8px;--flag-base:28px;--symbol-base:28px;--gap-base:6px;--paper-offset:26px}.entry-signifiers{font-size:calc(11px*var(--writing-scale));gap:calc(1px*var(--writing-scale))}.entry-signifiers svg{width:calc(12px*var(--writing-scale));height:calc(12px*var(--writing-scale))}.entry-grip,.entry-grip-placeholder{font-size:calc(12px*var(--writing-scale))}}