/* The cheat sheet reader (sheet-viewer.js, 16 October 2026): a whole screen on a dark ground, the pages one under the
   other, a bar with the sheet's name, Download and close. Built from the shop's own colours. */
html.sv-open{overflow:hidden}
.sv{position:fixed;inset:0;z-index:2000;display:grid;grid-template-rows:auto minmax(0,1fr);background:rgba(16,22,18,.96);color:#fff}
.sv-bar{display:flex;align-items:center;gap:10px;min-height:60px;padding:8px 10px 8px 16px;padding-top:max(8px,env(safe-area-inset-top));background:#101612;border-bottom:1px solid rgba(255,255,255,.08)}
.sv-name{display:grid;min-width:0;flex:1}
.sv-name b{overflow:hidden;font:600 16px/1.3 var(--sans);white-space:nowrap;text-overflow:ellipsis}
.sv-name small{font-size:13px;line-height:1.3;color:rgba(255,255,255,.66)}
.sv-bar button{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;min-width:44px;height:44px;padding:0 12px;border:0;border-radius:999px;font:600 15px/1 var(--sans);color:#fff;background:transparent;cursor:pointer}
.sv-bar button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Room inside the round-ended button: more on the word's side than the icon's, so both look even (the owner, 16 October 2026:
   "Download button a tad bit off on pc and mobile, not proper padding inside"). */
.sv-download{gap:8px!important;padding:0 20px 0 16px!important;background:var(--green)!important}
.sv-download svg{width:20px!important;height:20px!important}
.sv-close{width:44px;padding:0!important}
.sv-bar button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sv-pages{display:grid;align-content:start;gap:12px;overflow:auto;overscroll-behavior:contain;padding:12px 10px calc(56px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
.sv-page{position:relative;width:100%;max-width:880px;margin:0 auto;border-radius:4px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.sv-page canvas{display:block;width:100%;height:100%;border-radius:4px}
.sv-page:not(.is-drawn)::after{content:"";position:absolute;inset:0;border-radius:4px;background:#f3f5f2}
.sv-note{max-width:34ch;margin:40px auto;font-size:16px;line-height:1.5;text-align:center;color:rgba(255,255,255,.8)}
.sv-count{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));margin:0;padding:4px 12px;border-radius:999px;font:600 13px/1.4 var(--sans);color:#fff;background:rgba(0,0,0,.55);transform:translateX(-50%);pointer-events:none}
.sv-count:empty{display:none}
@media(max-width:360px){.sv-download span{display:none}.sv-download{width:44px;padding:0!important}}
@media(prefers-reduced-motion:no-preference){.sv{animation:sv-in .18s ease-out}}
@keyframes sv-in{from{opacity:0}to{opacity:1}}
/* A laptop: a whole page to the screen, zoomed with the bar's minus, size and plus, Ctrl or Cmd with + - 0, or Ctrl or Cmd
   with the wheel or a pinch (sheet-viewer.js). A page wider than the screen scrolls sideways too. */
.sv.is-wide .sv-pages{padding:12px 12px 56px}
.sv.is-wide .sv-page{width:var(--sv-w,100%);max-width:none}
.sv-zoom{display:flex;align-items:center;gap:2px;margin-right:6px;padding:2px;border:1px solid rgba(255,255,255,.18);border-radius:999px}
.sv-zoom button{min-width:40px!important;height:40px!important;padding:0 10px!important}
.sv-zoom .sv-size{min-width:62px!important;font-variant-numeric:tabular-nums}
.sv-zoom button:hover:not(:disabled){background:rgba(255,255,255,.1)}
.sv-zoom button:disabled{opacity:.4;cursor:default}