/* Settings? */

:root {
  --min-width:0px;
  --max-width:1024px;
  --spacing:8px;
}

body { height:100vh; overflow:hidden; font-family:Verdana, Geneva, Tahoma, sans-serif; margin:0; }

a { color:blue; }

button, option, select { outline:0; cursor:pointer; }

.resolution-notice { display:none; }

.hidden { display:none !important; }

/* Preview mode
   ============ */

.preview-mode { height:100vh; overflow:hidden; display:flex; display:flex; flex-direction:column; }

/* Guide row */

.guide { }
.guide-inner { box-sizing:border-box; min-width:var(--min-width); max-width:var(--max-width); margin:0 auto; padding:var(--spacing); display:flex; }

@media (width < 480px)
{
	.guide-inner { flex-direction:column; }
}

.guide-section { flex:1; display:flex; align-items:center; overflow-x:hidden; }
.guide-img { display:inline-block; width:20%; min-width:32px; aspect-ratio:94/98; margin-right:var(--spacing); background-size:cover;	 }
.guide-message { flex:1; overflow-x:hidden; }
.guide-spacer { width:var(--spacing); overflow:hidden; }

.guide-img-1 { background-image:url("img/guide-1.png"); }
.guide-img-2 { background-image:url("img/guide-2.png"); }
.guide-img-3 { background-image:url("img/guide-3.png"); }

@media (width < 480px)
{
	.guide-img { width:10%; }
}

/* Toolbar */

.toolbar { background:gainsboro; }
.toolbar-inner { box-sizing:border-box; margin:0 auto; padding:var(--spacing); min-width:var(--min-width); max-width:var(--max-width); display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:var(--spacing); }
.toolbar-section { margin:0 8px; white-space:nowrap; overflow-x:hidden; }
.toolbar button { min-width:1.8rem; outline:0; cursor:pointer; }

/* Toolbar / Specific Items */

.page-num-text-input { width:1.8rem; text-align:center; }

@media (width < 800px)
{
	.toolbar-inner { flex-direction:column; }
}

/* Main */

.main { flex:1; padding:1rem; display:flex; }

.ringbinder-area { flex:1; width:100%; max-width:1024px; margin:0 auto; position:relative; }
.ringbinder { position:absolute; box-sizing:border-box; padding:1rem; }
.layer { position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover; }
.background-layer { background-image:url("img/background-layer.png"); }
.main-layer { box-sizing:border-box; display:flex; padding:1rem; }
.foreground-layer { background-image:url("img/foreground-layer.png"); }
.feather { position:absolute; display:none; background-image:url("img/feather.png"); background-size:100%; width:3%; aspect-ratio:32/32 }
.left-page-feather { top:-1%; left:-1%; transform: scaleX(-1); }
.right-page-feather { top:-1%; right:-1%; }
.feather.feather-active { display:inline-block; }

/* Ringbinder Left Page */

.left-page { height:100%; border:solid 1px grey; background-color:white; aspect-ratio: 148 / 210; display:flex; }
.left-page-contents { flex:1; height:100%; }
.left-page-holes { height:100%; width:10%; }
.spacer { width:1rem; }

/* Ringbinder Right Page */

.right-page { height:100%; border:solid 1px grey; background-color:white; aspect-ratio: 148 / 210; display:flex; }
.right-page-holes { height:100%; width:10%; }
.right-page-contents { flex:1; }

/* Footer */

.foot { width:100%; max-width:1024px; margin:0 auto; text-align:center; padding-bottom:0.5rem; font-size:0.8rem; }

/* Print Dialog */

.print-overlay { position:fixed; background-color:rgba(0,0,0,0.25); left:0; top:0; right:0; bottom:0; overflow:hidden; width:100%; height:100%; display:flex; align-items:center; justify-content:center;  }
.print-dialog { border:solid 3px lightskyblue; box-sizing:border-box; width:400px; max-width:90%; background-color:white; }

.print-header { display:flex; padding:4px; }
.print-heading { flex:1; font-size:1.5rem; }
.print-close {}

.print-body { padding:8px; }
.print-subheading { font-size:1.25rem; text-align:center; margin-bottom:0px;  }
.print-buttons { text-align:center; margin-bottom:16px; }
.print-text { margin-bottom:16px; }
.print-dialog p { margin:0 0 12px 0; }
.print-dialog p:last-child { margin:0; }
.print-smallprint { font-size:0.7rem; }