/* The Doggos — Book Reader v2 (page-flip). Field Notes register. */

.dbr-wrap{ --dbr-ink:#2a2a36; --dbr-bone:#faf6ee; --dbr-cream:#fdfaf3; --dbr-line:#e7d9c0;
	--dbr-rust:#8e5a2f; --dbr-lime:#aac527; --dbr-muted:#76715f;
	max-width:1180px; margin:0 auto; font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif; color:var(--dbr-ink); }

.dbr-reader{ border:1.5px solid var(--dbr-ink); border-radius:14px; overflow:hidden; background:var(--dbr-cream); }

/* Toolbar */
.dbr-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; justify-content:space-between;
	padding:10px 12px; background:var(--dbr-bone); border-bottom:1.5px solid var(--dbr-ink); }
.dbr-tb-group{ display:flex; align-items:center; gap:6px; }
.dbr-btn{ appearance:none; -webkit-appearance:none; cursor:pointer; font:inherit; min-height:40px; min-width:40px;
	padding:0 12px; display:inline-flex; align-items:center; justify-content:center;
	background:var(--dbr-cream); color:var(--dbr-ink); border:1.5px solid var(--dbr-ink); border-radius:8px;
	font-weight:600; font-size:16px; line-height:1; text-decoration:none; }
.dbr-btn:hover{ background:var(--dbr-ink); color:var(--dbr-cream); }
.dbr-btn:focus-visible{ outline:2px solid var(--dbr-rust); outline-offset:2px; }
.dbr-btn[disabled]{ opacity:.4; cursor:default; }
.dbr-download{ font-size:13px; font-family:Consolas,Menlo,monospace; letter-spacing:.04em; }

.dbr-pagebox{ display:inline-flex; align-items:center; gap:4px; font-family:Consolas,Menlo,monospace; font-size:14px; }
/* width is !important on purpose: the theme ships
   `.page-article__content input[type="text"]{width:100%}` at specificity 0,2,1, which
   beats `.dbr-page-input` (0,1,0) AND `.dbr-reader .dbr-page-input` (0,2,0) — it blew the
   page box out to 249px live. Same cascade class as the dark-CTA link-colour fix. */
.dbr-page-input{ width:3.2em !important; box-sizing:border-box; text-align:center; font:inherit;
	padding:8px 4px; border:1.5px solid var(--dbr-line);
	border-radius:6px; background:var(--dbr-cream); color:var(--dbr-ink); }
.dbr-page-sep{ color:var(--dbr-muted); } .dbr-page-total{ min-width:1.5em; }

/* Stage — deep ambient backdrop makes the book pop like a real object */
.dbr-stage{ position:relative; min-height:64vh; padding:26px 16px 30px;
	background:radial-gradient(120% 90% at 50% 0%, #26262f 0%, #1c1c24 60%, #15151b 100%);
	display:flex; flex-direction:column; align-items:center; justify-content:center; }

/* Flip book */
.dbr-flip{ margin:0 auto; touch-action:pan-y; }
.dbr-flip .dbr-page{ background:#fff; overflow:hidden; box-shadow:0 0 1px rgba(0,0,0,.2); }
.dbr-page-canvas{ display:block; width:100%; height:100%; }
.dbr-page-shimmer{ position:absolute; inset:0; background:
		linear-gradient(100deg, #f4efe6 30%, #ece5d8 50%, #f4efe6 70%); background-size:200% 100%;
	animation:dbr-sh 1.1s linear infinite; }
.dbr-page.is-rendered .dbr-page-shimmer{ display:none; }
@keyframes dbr-sh{ to{ background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce){ .dbr-page-shimmer{ animation:none; } }

/* StPageFlip shadows already drawn; give the whole book a grounded drop shadow */
.dbr-flip.stf__parent{ filter:drop-shadow(0 18px 40px rgba(0,0,0,.45)); }

/* Fallback single-canvas pager */
.dbr-flip--fallback{ filter:none; max-width:100%; }
.dbr-fallback-canvas{ display:block; max-width:100%; height:auto; box-shadow:0 10px 34px rgba(0,0,0,.4); background:#fff; }

/* Scrubber */
.dbr-scrubwrap{ width:min(560px,88%); margin:18px auto 0; display:flex; align-items:center; gap:10px; }
.dbr-scrubber{ flex:1; -webkit-appearance:none; appearance:none; height:4px; border-radius:999px;
	background:rgba(255,255,255,.28); cursor:pointer; }
.dbr-scrubber::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
	background:var(--dbr-lime); border:2px solid #fff; cursor:pointer; }
.dbr-scrubber::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--dbr-lime); border:2px solid #fff; }
.dbr-scrub-edge{ color:rgba(255,255,255,.7); font-family:Consolas,Menlo,monospace; font-size:11px; letter-spacing:.06em; }

/* Loading / error over the dark stage */
.dbr-loading,.dbr-error{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
	justify-content:center; gap:14px; z-index:5; padding:24px; text-align:center; color:#f2ede3;
	background:radial-gradient(120% 90% at 50% 0%, #26262f 0%, #16161c 100%); }
.dbr-loading[hidden],.dbr-error[hidden]{ display:none; }
.dbr-spinner{ width:34px; height:34px; border:3px solid rgba(255,255,255,.22); border-top-color:var(--dbr-lime);
	border-radius:50%; animation:dbr-spin .8s linear infinite; }
.dbr-loading-text{ margin:0; font-family:Consolas,Menlo,monospace; font-size:12px; letter-spacing:.1em;
	text-transform:uppercase; color:rgba(255,255,255,.72); }
.dbr-progress{ width:min(240px,60%); height:4px; background:rgba(255,255,255,.2); border-radius:999px; overflow:hidden; }
.dbr-progress-bar{ display:block; width:0; height:100%; background:var(--dbr-lime); transition:width .2s ease; }
.dbr-error .dbr-btn{ background:var(--dbr-cream); color:var(--dbr-ink) !important; }
@keyframes dbr-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .dbr-spinner{ animation:none; } .dbr-progress-bar{ transition:none; } }

/* Fullscreen */
.dbr-reader:fullscreen{ display:flex; flex-direction:column; }
.dbr-reader:fullscreen .dbr-stage{ flex:1; min-height:0; }

/* Zoom overlay (pinch/pan) */
.dbr-zoom{ position:fixed; inset:0; z-index:2147483000; background:rgba(12,12,16,.94);
	display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; }
.dbr-zoom[hidden]{ display:none; }
.dbr-zoom-canvas{ max-width:100%; max-height:100%; transform-origin:center center; will-change:transform;
	box-shadow:0 10px 40px rgba(0,0,0,.6); background:#fff; }
.dbr-zoom-close{ position:absolute; top:calc(14px + env(safe-area-inset-top)); right:16px; z-index:2;
	width:46px; height:46px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff;
	font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.dbr-zoom-hint{ position:absolute; bottom:calc(16px + env(safe-area-inset-bottom)); left:0; right:0; text-align:center;
	color:rgba(255,255,255,.7); font-size:12px; font-family:Consolas,Menlo,monospace; letter-spacing:.05em; }
html.dbr-noscroll{ overflow:hidden; }

/* Text version (crawlable + a11y) */
.dbr-textversion{ margin:18px 2px 0; border:1px solid var(--dbr-line); border-radius:10px; background:var(--dbr-cream); }
.dbr-textversion > summary{ cursor:pointer; padding:14px 16px; font-weight:700; list-style:none; }
.dbr-textversion > summary::-webkit-details-marker{ display:none; }
.dbr-textversion > summary::before{ content:'+ '; color:var(--dbr-rust); font-family:Consolas,Menlo,monospace; }
.dbr-textversion[open] > summary::before{ content:'– '; }
.dbr-tv-note{ font-weight:400; color:var(--dbr-muted); font-size:13px; }
.dbr-textversion-body{ padding:4px 20px 22px; max-width:70ch; margin:0 auto; }
.dbr-textversion-body p{ margin:0 0 1em; line-height:1.6; }
.dbr-tv-head{ font-family:Georgia,'Times New Roman',serif; font-style:italic; color:var(--dbr-muted);
	border-bottom:1px solid var(--dbr-line); padding-bottom:10px; }

/* Mobile */
@media (max-width:600px){
	.dbr-toolbar{ gap:8px; padding:8px; }
	.dbr-btn{ min-height:44px; min-width:44px; padding:0 10px; }
	.dbr-tb-nav{ order:1; flex:1 1 100%; justify-content:center; }
	.dbr-tb-zoom{ order:2; } .dbr-tb-actions{ order:3; }
	.dbr-stage{ min-height:70vh; padding:16px 8px 22px; }
	.dbr-scrubwrap{ width:94%; }
}