/* Books — bookshelf, reader and library manager (module: assets/js/hovarn-books.js).
   One theme: every colour, font, radius and shadow is a theme token. The value after the comma in var()
   is only a fallback for standalone embedding without a theme file.
   Prefix: hb-.  Breakpoints: 1100px (two-page spread), 920px (phone chrome), 640px (narrow). */

/* ------------------------------------------------------------------ shared tokens for the module */
.hb-scope,.hb-reader,.hb-detail,.hb-dlg{
  --hb-hl-0:var(--accent-200,#f6c9a8);
  --hb-hl-1:color-mix(in srgb,var(--success,#1f7a4d) 32%,var(--sheet,#fff));
  --hb-hl-2:color-mix(in srgb,var(--info,#2b5ea8) 30%,var(--sheet,#fff));
  --hb-pen-0:var(--brand-900,#0b2545);
  --hb-pen-1:var(--accent-600,#d9560b);
  --hb-pen-2:var(--danger,#b42424);
  --hb-cover-w:128px;
  --hb-spine:linear-gradient(90deg,rgba(var(--brand-rgb,11,37,69),.32) 0,rgba(var(--brand-rgb,11,37,69),.10) 3px,rgba(255,255,255,.28) 5px,rgba(255,255,255,0) 9px,rgba(var(--brand-rgb,11,37,69),.06) 14px,rgba(var(--brand-rgb,11,37,69),0) 22px);
}
.hb-ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor}
.hb-ico-sm{width:16px;height:16px}
.hb-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ------------------------------------------------------------------ book cover (shelf, strip, manager, detail) */
.hb-cover{position:relative;display:block;width:var(--hb-cw,var(--hb-cover-w));aspect-ratio:7/9.6;border-radius:3px var(--r-sm,8px) var(--r-sm,8px) 3px;overflow:hidden;background:var(--paper-2,#f3efe7);
  box-shadow:0 1px 0 rgba(var(--brand-rgb,11,37,69),.10),0 10px 18px -10px rgba(var(--brand-rgb,11,37,69),.55),2px 2px 0 -1px var(--sheet,#fff),3px 3px 0 -1px var(--line-2,#d9d2c5);
  transition:transform var(--dur,200ms) var(--ease,ease),box-shadow var(--dur,200ms) var(--ease,ease)}
.hb-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hb-cover::after{content:"";position:absolute;inset:0;background:var(--hb-spine);pointer-events:none;border-radius:inherit}
.hb-cover-fb{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:12% 12% 10% 16%;background:var(--brand-900,#0b2545);color:var(--on-brand,#fff)}
.hb-cover-fb::before{content:"";position:absolute;left:16%;right:12%;top:46%;height:2px;background:var(--accent-500,#f26a1b);border-radius:2px}
.hb-cover-fb b{font:700 clamp(10px,calc(var(--hb-cw,128px) * .11),18px)/1.15 var(--f-display,system-ui);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.hb-cover-fb small{font:500 clamp(8px,calc(var(--hb-cw,128px) * .075),12px)/1.2 var(--f-body,system-ui);color:var(--on-brand-2,#c9d3e3)}
.hb-cover-fb.t1{background:var(--brand-800,#13315c)}
.hb-cover-fb.t2{background:var(--brand-700,#1d4271)}
.hb-cover-fb.t3{background:var(--brand-950,#071a33)}
.hb-cover.is-sm{--hb-cw:44px;border-radius:2px 4px 4px 2px;box-shadow:0 1px 2px rgba(var(--brand-rgb,11,37,69),.18),0 4px 8px -4px rgba(var(--brand-rgb,11,37,69),.4)}
.hb-cover.is-sm .hb-cover-fb{padding:10% 8% 8% 14%}
.hb-cover.is-sm .hb-cover-fb small,.hb-cover.is-sm .hb-cover-fb::before{display:none}
.hb-cover.is-hidden img,.hb-cover.is-hidden .hb-cover-fb{filter:grayscale(1);opacity:.45}

/* ------------------------------------------------------------------ student bookshelf */
.hb-shelf{display:flex;flex-direction:column;gap:var(--s6,24px)}
.hb-tools{display:flex;flex-wrap:wrap;gap:var(--s3,12px);align-items:center}
.hb-tools .input-icon{flex:1 1 280px;min-width:0}
.hb-tools .select{width:auto;min-width:150px;flex:0 1 auto}
.hb-tools .hb-count{margin-left:auto;font-size:var(--t-14,.875rem);color:var(--ink-2,#4a5263);font-variant-numeric:tabular-nums}
.hb-sec-head{display:flex;align-items:baseline;gap:var(--s3,12px);margin-bottom:var(--s3,12px)}
.hb-sec-head h2{font:650 var(--t-20,1.25rem)/1.2 var(--f-display,system-ui);color:var(--brand-900,#0b2545);letter-spacing:-.015em;margin:0}
.hb-sec-head .hb-n{font-size:var(--t-14,.875rem);color:var(--ink-3,#5f6675);font-variant-numeric:tabular-nums}
.hb-sec-head .hb-end{margin-left:auto;display:flex;gap:4px;align-items:center}

/* continue reading */
.hb-cont-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s4,16px)}
.hb-cont{display:flex;gap:var(--s4,16px);align-items:center;padding:var(--s4,16px);background:var(--sheet,#fff);border:1px solid var(--line,#e6e1d8);border-radius:var(--r-md,12px);box-shadow:var(--sh-1);text-decoration:none;color:inherit;transition:border-color var(--dur,200ms) var(--ease,ease)}
.hb-cont:hover{border-color:var(--brand-700,#1d4271)}
.hb-cont:focus-visible{outline:none;box-shadow:var(--focus)}
.hb-cont .hb-cover{--hb-cw:64px;flex:none}
.hb-cont-text{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}
.hb-cont-text b{font:600 var(--t-16,1rem)/1.25 var(--f-display,system-ui);color:var(--brand-900,#0b2545);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hb-cont-text small{font-size:var(--t-14,.875rem);color:var(--ink-2,#4a5263);font-variant-numeric:tabular-nums}
.hb-cont-text .hb-chapline{font-size:var(--t-12,.75rem);color:var(--ink-3,#5f6675);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-meter{height:6px;border-radius:var(--r-pill,999px);background:var(--paper-2,#f3efe7);overflow:hidden;margin-top:4px}
.hb-meter>i{display:block;height:100%;background:var(--brand-700,#1d4271);border-radius:inherit}
.hb-cont-go{flex:none;color:var(--brand-700,#1d4271)}

/* shelves */
.hb-shelfrow{position:relative}
.hb-row{list-style:none;margin:0;padding:6px 4px 0;display:flex;gap:var(--s5,20px);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;align-items:flex-end;position:relative;z-index:1}
.hb-row>li{flex:none;scroll-snap-align:start;width:var(--hb-cover-w)}
.hb-shelfrow.is-all .hb-row{flex-wrap:wrap;overflow:visible}
.hb-ledge{height:14px;margin-top:-8px;border-radius:0 0 var(--r-sm,8px) var(--r-sm,8px);background:linear-gradient(var(--sheet,#fff),var(--paper-2,#f3efe7));border:1px solid var(--line,#e6e1d8);border-top-color:var(--line-2,#d9d2c5);box-shadow:0 10px 16px -12px rgba(var(--brand-rgb,11,37,69),.45);position:relative}
.hb-shelfrow.is-all .hb-ledge{display:none}
.hb-book{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:10px;width:100%;padding-bottom:18px;border-radius:var(--r-sm,8px)}
.hb-book:hover .hb-cover{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 1px 0 rgba(var(--brand-rgb,11,37,69),.10),0 18px 26px -14px rgba(var(--brand-rgb,11,37,69),.6),2px 2px 0 -1px var(--sheet,#fff),3px 3px 0 -1px var(--line-2,#d9d2c5)}
.hb-book:focus-visible{outline:none}
.hb-book:focus-visible .hb-cover{box-shadow:var(--focus)}
.hb-book-t{font:600 var(--t-14,.875rem)/1.3 var(--f-display,system-ui);color:var(--brand-900,#0b2545);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hb-book-m{font-size:var(--t-12,.75rem);color:var(--ink-3,#5f6675);margin-top:-6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-book .hb-meter{height:4px;margin-top:-4px}
.hb-book-hit{font-size:var(--t-12,.75rem);color:var(--accent-700,#b84508);margin-top:-6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hb-results .hb-row{flex-wrap:wrap;overflow:visible}
.hb-skel .hb-cover{animation:hb-pulse 1.1s ease-in-out infinite alternate}
.hb-skel .hb-book-t{height:12px;width:80%;border-radius:4px;background:var(--paper-2,#f3efe7)}
@keyframes hb-pulse{to{opacity:.55}}

/* book detail sheet */
dialog.hb-detail{border:0;padding:0;margin:0 0 0 auto;height:100vh;height:100dvh;max-height:100dvh;width:min(480px,100vw);background:var(--sheet,#fff);color:var(--ink-1,#1a1f2b);box-shadow:var(--sh-3);font-family:var(--f-body,system-ui)}
dialog.hb-detail::backdrop{background:rgba(var(--brand-rgb,11,37,69),.42)}
dialog.hb-detail[open]{animation:hb-slide 260ms var(--ease,ease)}
@keyframes hb-slide{from{transform:translateX(24px);opacity:.4}}
.hb-detail-in{display:flex;flex-direction:column;height:100%}
.hb-detail-head{display:flex;align-items:center;gap:8px;padding:12px 12px 12px 20px;border-bottom:1px solid var(--line,#e6e1d8)}
.hb-detail-head h2{font:650 var(--t-16,1rem)/1.2 var(--f-display,system-ui);color:var(--ink-2,#4a5263);margin:0;flex:1}
.hb-detail-body{flex:1;overflow:auto;padding:var(--s5,20px)}
.hb-detail-top{display:flex;gap:var(--s5,20px);align-items:flex-start}
.hb-detail-top .hb-cover{--hb-cw:132px;flex:none}
.hb-detail-top h3{font:700 var(--t-24,1.5rem)/1.2 var(--f-display,system-ui);color:var(--brand-900,#0b2545);letter-spacing:-.015em;margin:0 0 4px}
.hb-detail-top p{margin:0;color:var(--ink-2,#4a5263)}
.hb-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:var(--s5,20px) 0;font-size:var(--t-14,.875rem)}
.hb-facts dt{color:var(--ink-3,#5f6675)}
.hb-facts dd{margin:0;color:var(--ink-1,#1a1f2b);font-variant-numeric:tabular-nums}
.hb-credit{font-size:var(--t-12,.75rem);line-height:1.5;color:var(--ink-2,#4a5263);background:var(--paper,#fbfaf7);border:1px solid var(--line,#e6e1d8);border-radius:var(--r-sm,8px);padding:10px 12px;display:flex;gap:8px}
.hb-credit .hb-ico{color:var(--brand-700,#1d4271);margin-top:1px}
.hb-credit a{color:var(--brand-700,#1d4271)}
.hb-chapters{list-style:none;margin:var(--s3,12px) 0 0;padding:0;counter-reset:ch}
.hb-chapters li{border-bottom:1px solid var(--line,#e6e1d8)}
.hb-chapters a{display:flex;gap:12px;align-items:baseline;padding:10px 4px;text-decoration:none;color:var(--ink-1,#1a1f2b);font-size:var(--t-14,.875rem)}
.hb-chapters a:hover{background:var(--paper,#fbfaf7);color:var(--brand-900,#0b2545)}
.hb-chapters a span{flex:1}
.hb-chapters a small{color:var(--ink-3,#5f6675);font-variant-numeric:tabular-nums;white-space:nowrap}
.hb-chapters li.is-here a{font-weight:600;color:var(--brand-900,#0b2545)}
.hb-chapters li.is-here a small{color:var(--accent-700,#b84508)}
.hb-detail-foot{display:flex;gap:10px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line,#e6e1d8);background:var(--paper,#fbfaf7)}
.hb-detail-foot .btn{flex:1}
.hb-h4{font:600 var(--t-16,1rem)/1.2 var(--f-display,system-ui);color:var(--brand-900,#0b2545);margin:var(--s6,24px) 0 0}

/* library-page strip */
.hb-strip{display:flex;align-items:center;gap:var(--s5,20px);padding:var(--s4,16px) var(--s5,20px);background:var(--sheet,#fff);border:1px solid var(--line,#e6e1d8);border-radius:var(--r-md,12px);box-shadow:var(--sh-1);margin-bottom:var(--s6,24px)}
.hb-strip-text{flex:0 1 260px;min-width:0}
.hb-strip-text h2{font:650 var(--t-18,1.125rem)/1.2 var(--f-display,system-ui);color:var(--brand-900,#0b2545);margin:0 0 4px;display:flex;align-items:center;gap:8px}
.hb-strip-text h2 .hb-ico{color:var(--accent-600,#d9560b)}
.hb-strip-text p{margin:0 0 8px;font-size:var(--t-14,.875rem);color:var(--ink-2,#4a5263)}
.hb-strip-text a{font:600 var(--t-14,.875rem)/1 var(--f-display,system-ui);color:var(--brand-700,#1d4271);display:inline-flex;align-items:center;gap:4px}
.hb-strip-covers{list-style:none;margin:0;padding:4px 2px 8px;display:flex;gap:var(--s4,16px);overflow-x:auto;flex:1;min-width:0;scrollbar-width:none}
.hb-strip-covers li{flex:none}
.hb-strip-covers a{display:block;border-radius:var(--r-sm,8px)}
.hb-strip-covers a:focus-visible{outline:none}
.hb-strip-covers a:focus-visible .hb-cover{box-shadow:var(--focus)}
.hb-strip-covers a:hover .hb-cover{transform:translateY(-3px)}
.hb-strip-covers .hb-cover{--hb-cw:76px}

/* ------------------------------------------------------------------ admin library manager */
.hb-manager .grid-main{align-items:start}
.hb-switch{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px 0 6px;border-radius:var(--r-pill,999px);font:600 var(--t-12,.75rem)/1 var(--f-display,system-ui);color:var(--success,#1f7a4d);background:var(--success-bg,#e8f3ec);white-space:nowrap}
.hb-switch .hb-knob{width:30px;height:18px;border-radius:9px;background:var(--success,#1f7a4d);position:relative;flex:none;transition:background var(--dur,200ms) var(--ease,ease)}
.hb-switch .hb-knob::after{content:"";position:absolute;top:2px;left:14px;width:14px;height:14px;border-radius:50%;background:var(--sheet,#fff);transition:left var(--dur,200ms) var(--ease,ease)}
.hb-switch[aria-checked=false]{color:var(--ink-2,#4a5263);background:var(--paper-2,#f3efe7)}
.hb-switch[aria-checked=false] .hb-knob{background:var(--border-input,#857f73)}
.hb-switch[aria-checked=false] .hb-knob::after{left:2px}
.hb-switch:focus-visible{box-shadow:var(--focus)}
.hb-switch[disabled]{cursor:not-allowed;opacity:.6}
.hb-cats{list-style:none;margin:0;padding:0}
.hb-cat{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;padding:12px 16px 12px 8px;border-bottom:1px solid var(--line,#e6e1d8)}
.hb-cat:last-child{border-bottom:0}
.hb-cat-move{display:flex;flex-direction:column}
.hb-cat-move .icon-btn{width:28px;height:22px;border-radius:6px}
.hb-cat-move .icon-btn[disabled]{opacity:.3;cursor:default}
.hb-cat-name b{display:block;font:600 var(--t-14,.875rem)/1.3 var(--f-display,system-ui);color:var(--brand-900,#0b2545)}
.hb-cat-name small{font-size:var(--t-12,.75rem);color:var(--ink-3,#5f6675);font-variant-numeric:tabular-nums}
.hb-cat-name .hb-linkbtn{margin-top:2px}
.hb-cat.is-off .hb-cat-name b{color:var(--ink-3,#5f6675)}
.hb-linkbtn{all:unset;cursor:pointer;font-size:var(--t-12,.75rem);color:var(--brand-700,#1d4271);text-decoration:underline;text-underline-offset:2px;display:inline-flex;gap:4px;align-items:center}
.hb-linkbtn:focus-visible{box-shadow:var(--focus);border-radius:4px}
.hb-mtable td{vertical-align:middle}
.hb-mtable .hb-cover{--hb-cw:40px}
.hb-mbook{display:flex;gap:12px;align-items:center;min-width:220px}
.hb-mbook b{display:block;font:600 var(--t-14,.875rem)/1.3 var(--f-display,system-ui);color:var(--brand-900,#0b2545)}
.hb-mbook small{display:block;font-size:var(--t-12,.75rem);color:var(--ink-3,#5f6675)}
.hb-mtable tr.is-off .hb-mbook b{color:var(--ink-3,#5f6675)}
.hb-licence{font-size:var(--t-12,.75rem);color:var(--ink-2,#4a5263);max-width:220px;min-width:150px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hb-why{display:block;font-size:var(--t-12,.75rem);color:var(--ink-3,#5f6675);margin-top:4px;white-space:nowrap}
.hb-batches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin-top:12px}
.hb-note-line{display:flex;gap:8px;align-items:flex-start;font-size:var(--t-12,.75rem);color:var(--ink-3,#5f6675);margin-top:12px}
.hb-more{display:flex;justify-content:center;padding:12px}
.hb-up-prev{display:flex;gap:16px;align-items:center;margin-top:12px}
.hb-up-prev .hb-cover{--hb-cw:72px}
dialog.hb-dlg .dlg-body{max-height:70vh;overflow:auto}

/* ------------------------------------------------------------------ READER */
body.hb-reading{margin:0;height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;background:var(--paper-2,#f3efe7)}
body.hb-reading>main#main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.hb-reader{
  --hb-bg:var(--paper-2,#f3efe7);--hb-surface:var(--sheet,#fff);--hb-ink:var(--ink-1,#1a1f2b);--hb-ink-2:var(--ink-2,#4a5263);--hb-ink-3:var(--ink-3,#5f6675);
  --hb-line:var(--line,#e6e1d8);--hb-hover:var(--paper-2,#f3efe7);--hb-strong:var(--brand-900,#0b2545);--hb-page:var(--sheet,#fff);
  --hb-tint:transparent;--hb-tint-blend:normal;--hb-page-filter:none;
  position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;background:var(--hb-bg);color:var(--hb-ink);font-family:var(--f-body,system-ui)}
.hb-reader[data-comfort=sepia]{--hb-bg:color-mix(in srgb,var(--paper-2,#f3efe7) 82%,var(--accent-200,#f6c9a8));--hb-surface:color-mix(in srgb,var(--paper,#fbfaf7) 90%,var(--accent-100,#fbdcc6));--hb-hover:color-mix(in srgb,var(--paper-2,#f3efe7) 80%,var(--accent-100,#fbdcc6));
  --hb-tint:color-mix(in srgb,var(--accent-100,#fbdcc6) 70%,var(--paper-2,#f3efe7));--hb-tint-blend:multiply;--hb-page:color-mix(in srgb,var(--accent-50,#fdeede) 60%,var(--paper,#fbfaf7))}
.hb-reader[data-comfort=night]{--hb-bg:var(--brand-950,#071a33);--hb-surface:var(--brand-900,#0b2545);--hb-ink:var(--on-brand,#fff);--hb-ink-2:var(--on-brand-2,#c9d3e3);--hb-ink-3:var(--on-brand-3,#a9b6cb);
  --hb-line:color-mix(in srgb,var(--on-brand,#fff) 14%,transparent);--hb-hover:color-mix(in srgb,var(--on-brand,#fff) 9%,transparent);--hb-strong:var(--on-brand,#fff);--hb-page:var(--brand-950,#071a33);
  --hb-page-filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.92);--hb-tint:color-mix(in srgb,var(--brand-700,#1d4271) 55%,transparent);--hb-tint-blend:multiply;color-scheme:dark}
/* night chrome: the shared controls read from the reader tokens */
.hb-reader[data-comfort=night] .icon-btn,.hb-reader[data-comfort=night] .hb-tb{color:var(--hb-ink-2)}
.hb-reader[data-comfort=night] .icon-btn:hover,.hb-reader[data-comfort=night] .hb-tb:hover{background:var(--hb-hover);color:var(--hb-ink)}
.hb-reader[data-comfort=night] .hb-select,.hb-reader[data-comfort=night] .hb-pagein,.hb-reader[data-comfort=night] .hb-panel .input{background:var(--hb-bg);color:var(--hb-ink);border-color:var(--hb-line)}
.hb-reader[data-comfort=night] .hb-seg{background:var(--hb-bg);border-color:var(--hb-line)}
.hb-reader[data-comfort=night] .hb-seg [aria-pressed=true]{background:var(--hb-surface);color:var(--hb-ink)}
.hb-reader[data-comfort=night] .hb-panel .tabs [aria-selected=true]{color:var(--hb-ink)}

/* top bar */
.hb-top{display:flex;align-items:center;gap:var(--s2,8px);padding:8px 12px;background:var(--hb-surface);border-bottom:1px solid var(--hb-line);min-height:60px;position:relative;z-index:30}
.hb-titlebox{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto}
.hb-titlebox .hb-cover{--hb-cw:28px}
.hb-titletext{display:flex;flex-direction:column;min-width:0}
.hb-title{font:650 var(--t-16,1rem)/1.2 var(--f-display,system-ui);color:var(--hb-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw;margin:0}
.hb-sub{font-size:var(--t-12,.75rem);color:var(--hb-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
.hb-spacer{flex:1 1 auto}
.hb-select{height:38px;border:1px solid var(--line-2,#d9d2c5);border-radius:var(--r-sm,8px);background:var(--sheet,#fff);color:var(--ink-1,#1a1f2b);font:500 var(--t-14,.875rem)/1 var(--f-body,system-ui);padding:0 30px 0 10px;max-width:340px;text-overflow:ellipsis;min-width:0;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%234a5263' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
.hb-select:focus-visible,.hb-pagein:focus-visible{outline:none;box-shadow:var(--focus)}
.hb-chap{display:flex;min-width:0;flex:0 1 340px}
.hb-chap .hb-select{width:100%}
.hb-pageform{display:flex;align-items:center;gap:6px;font:500 var(--t-14,.875rem)/1 var(--f-display,system-ui);color:var(--hb-ink-2);font-variant-numeric:tabular-nums;white-space:nowrap;margin:0}
.hb-pagein{width:58px;height:38px;text-align:center;border:1px solid var(--line-2,#d9d2c5);border-radius:var(--r-sm,8px);background:var(--sheet,#fff);color:var(--ink-1,#1a1f2b);font:600 var(--t-14,.875rem)/1 var(--f-display,system-ui);font-variant-numeric:tabular-nums;padding:0 4px}
.hb-top .icon-btn[aria-pressed=true],.hb-top .icon-btn[aria-expanded=true]{background:var(--hb-hover);color:var(--hb-strong)}

/* tool bar */
.hb-toolbar{display:flex;align-items:center;gap:4px;padding:6px 12px;background:var(--hb-surface);border-bottom:1px solid var(--hb-line);position:relative;z-index:25;min-height:50px}
.hb-tgroup{display:flex;align-items:center;gap:2px}
.hb-tsep{width:1px;height:24px;background:var(--hb-line);margin:0 6px;flex:none}
.hb-tb{height:38px;min-width:38px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--r-sm,8px);border:1px solid transparent;background:transparent;color:var(--ink-2,#4a5263);font:600 var(--t-12,.75rem)/1 var(--f-display,system-ui);cursor:pointer;white-space:nowrap}
.hb-tb:hover{background:var(--hb-hover);color:var(--hb-strong)}
.hb-tb:focus-visible{outline:none;box-shadow:var(--focus)}
.hb-tb[aria-pressed=true]{background:var(--brand-900,#0b2545);color:var(--on-brand,#fff)}
.hb-reader[data-comfort=night] .hb-tb[aria-pressed=true]{background:var(--on-brand,#fff);color:var(--brand-950,#071a33)}
.hb-tb[disabled]{opacity:.4;cursor:not-allowed}
.hb-tb.hb-bmbtn[aria-pressed=true]{background:var(--accent-50,#fdeede);color:var(--accent-700,#b84508);border-color:var(--accent-200,#f6c9a8)}
.hb-tb.hb-bmbtn[aria-pressed=true] .hb-ico{fill:currentColor}
.hb-zoomval{min-width:52px;font-variant-numeric:tabular-nums}
.hb-swatches{display:flex;gap:6px;align-items:center;padding:0 4px}
.hb-swatches[hidden]{display:none}
.hb-sw{width:26px;height:26px;border-radius:50%;border:2px solid var(--hb-surface);box-shadow:0 0 0 1px var(--line-2,#d9d2c5);cursor:pointer;padding:0;background:var(--sw)}
.hb-sw[aria-checked=true]{box-shadow:0 0 0 2px var(--hb-surface),0 0 0 4px var(--hb-strong)}
.hb-sw:focus-visible{outline:none;box-shadow:var(--focus)}
.hb-seg{display:inline-flex;padding:2px;border-radius:10px;background:var(--paper-2,#f3efe7);border:1px solid var(--line,#e6e1d8);gap:2px}
.hb-seg button{all:unset;box-sizing:border-box;cursor:pointer;height:32px;padding:0 10px;border-radius:8px;font:600 var(--t-12,.75rem) var(--f-display,system-ui);color:var(--ink-2,#4a5263);display:inline-flex;align-items:center;gap:6px}
.hb-seg [aria-pressed=true]{background:var(--sheet,#fff);color:var(--brand-900,#0b2545);box-shadow:var(--sh-1)}
.hb-seg button:focus-visible{box-shadow:var(--focus)}

/* body: panel + stage */
.hb-body{flex:1 1 auto;min-height:0;display:flex;position:relative}
.hb-panel{flex:none;width:344px;display:flex;flex-direction:column;background:var(--hb-surface);border-right:1px solid var(--hb-line);min-height:0}
.hb-panel[hidden]{display:none}
.hb-panel-head{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:4px 6px 0 8px}
.hb-panel-head .tabs{flex:1;min-width:0}
.hb-panel .tabs{margin:0;padding:0;gap:0;border-bottom-color:var(--hb-line)}
.hb-panel .tabs button{padding:12px 8px;font-size:var(--t-12,.75rem);color:var(--hb-ink-2)}
.hb-panel-close{display:none}
.hb-tabpanel{flex:1;overflow:auto;padding:8px 0 24px;min-height:0}
.hb-tabpanel[hidden]{display:none}
.hb-plist{list-style:none;margin:0;padding:0}
.hb-plist li{position:relative}
.hb-plist a,.hb-plist .hb-pitem{display:flex;gap:10px;align-items:flex-start;width:100%;padding:9px 16px;text-decoration:none;color:var(--hb-ink);font-size:var(--t-14,.875rem);line-height:1.4;border:0;background:none;text-align:left;cursor:pointer;box-sizing:border-box}
.hb-plist a:hover,.hb-plist .hb-pitem:hover{background:var(--hb-hover)}
.hb-plist a:focus-visible,.hb-plist .hb-pitem:focus-visible{outline:none;box-shadow:inset var(--focus)}
.hb-plist .hb-ptext{flex:1;min-width:0}
.hb-plist .hb-ptext small{display:block;color:var(--hb-ink-3);font-size:var(--t-12,.75rem)}
.hb-plist .hb-pno{flex:none;color:var(--hb-ink-3);font:500 var(--t-12,.75rem)/1.6 var(--f-display,system-ui);font-variant-numeric:tabular-nums}
.hb-plist li[aria-current=true]>a{font-weight:600;color:var(--hb-strong);background:var(--hb-hover)}
.hb-plist li[aria-current=true]>a::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--accent-500,#f26a1b)}
.hb-plist .hb-del{position:absolute;right:6px;top:4px;opacity:0}
.hb-plist li:hover .hb-del,.hb-plist .hb-del:focus-visible{opacity:1}
.hb-plist li.has-del .hb-pitem{padding-right:48px}
.hb-dot{width:10px;height:10px;border-radius:50%;flex:none;margin-top:5px;background:var(--sw)}
.hb-quote{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hb-pempty{padding:24px 20px;color:var(--hb-ink-3);font-size:var(--t-14,.875rem);line-height:1.5}
.hb-pempty b{color:var(--hb-ink);display:block;margin-bottom:4px;font-family:var(--f-display,system-ui)}
.hb-psearch{padding:12px 12px 4px}
.hb-psearch form{display:flex;gap:6px}
.hb-psearch .input-icon{flex:1}
.hb-sstatus{padding:4px 16px 8px;font-size:var(--t-12,.75rem);color:var(--hb-ink-3);font-variant-numeric:tabular-nums;min-height:22px}
.hb-plist mark{background:var(--accent-100,#fbdcc6);color:inherit;border-radius:2px;padding:0 1px}
.hb-reader[data-comfort=night] .hb-plist mark{background:color-mix(in srgb,var(--accent-500,#f26a1b) 45%,transparent)}
.hb-pgroup{padding:12px 16px 4px;font:600 var(--t-12,.75rem)/1.2 var(--f-display,system-ui);color:var(--hb-ink-3)}

/* stage */
.hb-stage{flex:1 1 auto;min-width:0;position:relative;overflow:auto;outline:none;overscroll-behavior:contain}
.hb-stage:focus{outline:none}
.hb-bookwrap{min-width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px 56px;box-sizing:border-box;width:max-content}
.hb-book{position:relative;flex:none}
.hb-reader[data-mode=scroll] .hb-bookwrap{display:none}
.hb-scroll{display:none;flex-direction:column;align-items:center;gap:20px;padding:24px 16px 48px;width:max-content;min-width:100%;box-sizing:border-box}
.hb-reader[data-mode=scroll] .hb-scroll{display:flex}
.hb-stage.is-fading .hb-book{animation:hb-fade 240ms var(--ease,ease)}
@keyframes hb-fade{from{opacity:.15}}

/* a page */
.hb-page{position:relative;background:var(--hb-page);overflow:hidden;user-select:none;-webkit-user-select:none}
.hb-scroll .hb-page{flex:none;box-shadow:var(--sh-2);outline:1px solid var(--hb-line)}
.hb-pin-in{position:absolute;inset:0}
.hb-img{position:absolute;inset:0;width:100%;height:100%;display:block;filter:var(--hb-page-filter);pointer-events:none;-webkit-user-drag:none}
.hb-tint{position:absolute;inset:0;background:var(--hb-tint);mix-blend-mode:var(--hb-tint-blend);pointer-events:none;z-index:1}
.hb-skel{position:absolute;inset:8% 10%;display:flex;flex-direction:column;gap:14px;pointer-events:none}
.hb-skel i{display:block;height:9px;border-radius:5px;background:var(--hb-line);animation:hb-pulse 1s ease-in-out infinite alternate}
.hb-skel i:nth-child(1){width:55%;height:16px;margin-bottom:10px}
.hb-skel i:nth-child(3n){width:82%}
.hb-skel i:nth-child(4n){width:68%}
.hb-page.is-ready .hb-skel{display:none}
.hb-marks{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.hb-marks{mix-blend-mode:multiply}
.hb-reader[data-comfort=night] .hb-marks{mix-blend-mode:screen}
.hb-reader[data-comfort=night] .hb-hl{opacity:.5}
.hb-hl.c0{fill:var(--hb-hl-0)}.hb-hl.c1{fill:var(--hb-hl-1)}.hb-hl.c2{fill:var(--hb-hl-2)}
.hb-ink{fill:none;stroke-linecap:round;stroke-linejoin:round}
.hb-ink.c0{stroke:var(--hb-pen-0)}.hb-ink.c1{stroke:var(--hb-pen-1)}.hb-ink.c2{stroke:var(--hb-pen-2)}
.hb-reader[data-comfort=night] .hb-ink.c0{stroke:var(--on-brand,#fff)}
.hb-hit{fill:none;stroke:var(--accent-500,#f26a1b);stroke-width:2;vector-effect:non-scaling-stroke}
.hb-page .textLayer{position:absolute;inset:0;overflow:clip;line-height:1;text-align:initial;opacity:1;z-index:3;pointer-events:none;forced-color-adjust:none;transform-origin:0 0;text-size-adjust:none;-webkit-text-size-adjust:none}
.hb-page .textLayer :is(span,br){color:transparent;position:absolute;white-space:pre;cursor:text;transform-origin:0 0}
/* PDF.js 5 text layer: spans carry --font-height/--scale-x/--rotate and the layer --min-font-size; size and placement come from here */
.hb-page .textLayer{--user-unit:1;--total-scale-factor:calc(var(--scale-factor,1)*var(--user-unit));--scale-round-x:1px;--scale-round-y:1px;--min-font-size:1;--text-scale-factor:calc(var(--total-scale-factor)*var(--min-font-size));--min-font-size-inv:calc(1/var(--min-font-size))}
.hb-page .textLayer>:not(.markedContent),.hb-page .textLayer .markedContent span:not(.markedContent){--font-height:0;font-size:calc(var(--text-scale-factor)*var(--font-height));--scale-x:1;--rotate:0deg;transform:rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv))}
.hb-page .textLayer .markedContent{display:contents}
.hb-page .textLayer span.markedContent{top:0;height:0}
.hb-page .textLayer .endOfContent{display:block;position:absolute;inset:100% 0 0;z-index:0;cursor:default;user-select:none}
.hb-page .textLayer.selecting .endOfContent{top:0}
.hb-page .textLayer ::selection{background:rgba(var(--brand-rgb,11,37,69),.22)}
.hb-page .textLayer span.hb-found{background:color-mix(in srgb,var(--accent-500,#f26a1b) 30%,transparent);border-radius:2px}
.hb-reader[data-text=on] .hb-page .textLayer{pointer-events:auto;user-select:text;-webkit-user-select:text}
.hb-draw{position:absolute;inset:0;z-index:4;display:none;touch-action:none}
.hb-reader[data-tool=pen] .hb-draw{display:block;cursor:crosshair}
.hb-reader[data-tool=note] .hb-draw{display:block;cursor:copy}
.hb-reader[data-tool=eraser] .hb-marks{z-index:4}
.hb-reader[data-tool=eraser] .hb-marks [data-mark]{pointer-events:visiblePainted;cursor:pointer}
.hb-reader[data-tool=eraser] .hb-marks .hb-ink[data-mark]{pointer-events:stroke}
.hb-reader[data-tool=eraser] .hb-marks [data-mark]:hover{opacity:.4}
.hb-reader[data-tool=eraser] .hb-page{touch-action:none}
.hb-pins{position:absolute;inset:0;z-index:5;pointer-events:none}
.hb-pin{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:8px 8px 8px 2px;border:1px solid var(--accent-600,#d9560b);background:var(--accent-100,#fbdcc6);color:var(--accent-700,#b84508);display:grid;place-items:center;cursor:pointer;pointer-events:auto;padding:0;box-shadow:0 4px 10px -4px rgba(var(--brand-rgb,11,37,69),.45)}
.hb-pin:focus-visible{outline:none;box-shadow:var(--focus)}
.hb-pin .hb-ico{width:16px;height:16px;pointer-events:none}
.hb-reader[data-tool=eraser] .hb-pin:hover{opacity:.45}
.hb-ribbon{position:absolute;top:-2px;right:9%;width:22px;height:46px;z-index:6;border:0;padding:0;cursor:pointer;background:var(--accent-500,#f26a1b);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);box-shadow:none;display:none;animation:hb-drop 260ms var(--ease,ease)}
.hb-page.is-marked .hb-ribbon{display:block}
.hb-ribbon:focus-visible{outline:2px solid var(--brand-900,#0b2545);outline-offset:2px}
@keyframes hb-drop{from{transform:translateY(-18px)}}
.hb-pfoot{position:absolute;bottom:6px;left:0;right:0;text-align:center;font:500 10px/1 var(--f-display,system-ui);color:var(--ink-3,#5f6675);opacity:0;pointer-events:none;z-index:2}


/* page-flip library (StPageFlip) essentials, in case its own style tag is blocked */
.hb-book.stf__parent{position:relative;display:block;box-sizing:border-box;transform:translateZ(0);touch-action:pan-y}
.hb-book .stf__block{position:absolute;width:100%;height:100%;box-sizing:border-box;perspective:2000px}
.hb-book .stf__item{display:none;position:absolute;transform-style:preserve-3d}
.hb-book .stf__outerShadow,.hb-book .stf__innerShadow,.hb-book .stf__hardShadow,.hb-book .stf__hardInnerShadow{position:absolute;left:0;top:0}
.hb-book .stf__item.--simple{box-shadow:var(--sh-2)}
.hb-book .stf__item.--simple.--left{box-shadow:inset -18px 0 22px -18px rgba(var(--brand-rgb,11,37,69),.35),var(--sh-2)}
.hb-book .stf__item.--simple.--right{box-shadow:inset 18px 0 22px -18px rgba(var(--brand-rgb,11,37,69),.28),var(--sh-2)}
.hb-reader:not(.is-spread) .hb-book .stf__item.--simple.--right{box-shadow:var(--sh-2)}
.hb-reader[data-tool]:not([data-tool=read]) .hb-book{touch-action:none}

/* prev / next */
.hb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:20;width:44px;height:64px;border-radius:var(--r-md,12px);border:1px solid var(--hb-line);background:color-mix(in srgb,var(--hb-surface) 88%,transparent);color:var(--hb-ink-2);display:grid;place-items:center;cursor:pointer;box-shadow:var(--sh-1)}
.hb-nav:hover{color:var(--hb-strong);background:var(--hb-surface)}
.hb-nav:focus-visible{outline:none;box-shadow:var(--focus)}
.hb-nav[disabled]{opacity:0;pointer-events:none}
.hb-prev{left:8px}.hb-next{right:8px}
.hb-reader[data-mode=scroll] .hb-nav{display:none}
.hb-stagewrap{flex:1 1 auto;min-width:0;min-height:0;position:relative;display:flex;flex-direction:column}
.hb-stagewrap>.hb-stage{min-height:0}

/* state: loading and errors */
.hb-state{position:absolute;inset:0;display:grid;place-items:center;z-index:40;background:var(--hb-bg);padding:24px}
.hb-state[hidden]{display:none}
.hb-state-card{max-width:420px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--hb-ink-2)}
.hb-state-card .hb-glyph{width:64px;height:64px;border-radius:18px;background:var(--hb-surface);border:1px solid var(--hb-line);display:grid;place-items:center;color:var(--brand-700,#1d4271)}
.hb-state-card h2{font:650 var(--t-20,1.25rem)/1.25 var(--f-display,system-ui);color:var(--hb-strong);margin:0}
.hb-state-card p{margin:0;line-height:1.5}
.hb-state-card .hb-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.hb-loadbar{width:220px;height:6px;border-radius:3px;background:var(--hb-line);overflow:hidden}
.hb-loadbar i{display:block;height:100%;width:0;background:var(--brand-700,#1d4271);transition:width 200ms linear}
.hb-loadbar.is-indet i{width:35%;animation:hb-indet 1.1s ease-in-out infinite}
@keyframes hb-indet{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}

/* resume prompt */
.hb-resume{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:35;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;background:var(--sheet,#fff);color:var(--ink-1,#1a1f2b);border:1px solid var(--line,#e6e1d8);border-radius:var(--r-md,12px);box-shadow:var(--sh-3);max-width:calc(100% - 24px);animation:hb-down 260ms var(--ease,ease)}
.hb-resume[hidden]{display:none}
.hb-resume p{margin:0;font-size:var(--t-14,.875rem);line-height:1.35}
.hb-resume p b{font-family:var(--f-display,system-ui);color:var(--brand-900,#0b2545)}
.hb-resume p small{display:block;color:var(--ink-3,#5f6675);font-size:var(--t-12,.75rem);max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-resume .hb-actions{display:flex;gap:6px;flex:none}
@keyframes hb-down{from{transform:translate(-50%,-10px);opacity:0}}

/* footer: scrubber + progress */
.hb-foot{position:relative;z-index:25;background:var(--hb-surface);border-top:1px solid var(--hb-line);padding:8px 16px calc(10px + env(safe-area-inset-bottom))}
.hb-scrub{display:flex;align-items:center;gap:12px;font:500 var(--t-12,.75rem)/1 var(--f-display,system-ui);color:var(--hb-ink-3);font-variant-numeric:tabular-nums;position:relative}
.hb-scrub>span{min-width:28px;text-align:center}
.hb-range{flex:1;min-width:0;height:28px;background:transparent;appearance:none;-webkit-appearance:none;margin:0;cursor:pointer;--p:0%}
.hb-range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--brand-700,#1d4271) var(--p),var(--hb-line) var(--p))}
.hb-range::-moz-range-track{height:6px;border-radius:3px;background:var(--hb-line)}
.hb-range::-moz-range-progress{height:6px;border-radius:3px;background:var(--brand-700,#1d4271)}
.hb-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;background:var(--sheet,#fff);border:2px solid var(--brand-900,#0b2545);box-shadow:var(--sh-1)}
.hb-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--sheet,#fff);border:2px solid var(--brand-900,#0b2545)}
.hb-range:focus-visible{outline:none}
.hb-range:focus-visible::-webkit-slider-thumb{box-shadow:var(--focus)}
.hb-bubble{position:absolute;bottom:calc(100% + 10px);transform:translateX(-50%);z-index:50;background:var(--sheet,#fff);color:var(--ink-1,#1a1f2b);border:1px solid var(--line,#e6e1d8);border-radius:var(--r-md,12px);box-shadow:var(--sh-3);padding:8px;width:148px;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.hb-bubble[hidden]{display:none}
.hb-bubble .hb-thumb{width:120px;background:var(--paper,#fbfaf7);border:1px solid var(--line,#e6e1d8);display:grid;place-items:center;overflow:hidden}
.hb-bubble .hb-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.hb-bubble b{font:600 var(--t-14,.875rem)/1 var(--f-display,system-ui);color:var(--brand-900,#0b2545)}
.hb-bubble small{font-size:11px;line-height:1.3;color:var(--ink-3,#5f6675);text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hb-progress{position:absolute;left:0;right:0;top:-1px;height:3px;background:transparent}
.hb-progress i{display:block;height:100%;width:0;background:var(--brand-700,#1d4271);transition:width 300ms var(--ease,ease)}

/* popovers (view settings, selection, note) */
.hb-pop{position:absolute;z-index:60;background:var(--sheet,#fff);color:var(--ink-1,#1a1f2b);border:1px solid var(--line,#e6e1d8);border-radius:var(--r-md,12px);box-shadow:var(--sh-3);padding:12px}
.hb-pop[hidden]{display:none}
.hb-view{top:calc(100% + 6px);right:8px;width:300px;display:flex;flex-direction:column;gap:14px}
.hb-view h3{font:600 var(--t-12,.75rem)/1 var(--f-display,system-ui);color:var(--ink-3,#5f6675);margin:0 0 6px;letter-spacing:.02em}
.hb-view .hb-seg{width:100%;box-sizing:border-box}
.hb-view .hb-seg button{flex:1;justify-content:center}
.hb-view .hb-zoomrow{display:flex;align-items:center;gap:6px}
.hb-view .hb-zoomrow .hb-tb{border:1px solid var(--line-2,#d9d2c5)}
.hb-view .hb-zoomrow .hb-zoomval{flex:1;text-align:center;font:600 var(--t-14,.875rem)/1 var(--f-display,system-ui);color:var(--brand-900,#0b2545)}
.hb-view .hb-row2{display:flex;gap:8px}
.hb-view .hb-row2 .btn{flex:1}
.hb-selpop{display:flex;align-items:center;gap:6px;padding:6px;border-radius:var(--r-pill,999px)}
.hb-selpop .hb-tb{height:34px}
.hb-notepop{width:280px;display:flex;flex-direction:column;gap:8px}
.hb-notepop label{font:600 var(--t-12,.75rem)/1 var(--f-display,system-ui);color:var(--ink-2,#4a5263)}
.hb-notepop textarea{width:100%;min-height:96px;resize:vertical;border:1px solid var(--border-input,#857f73);border-radius:var(--r-sm,8px);padding:8px 10px;font:400 var(--t-14,.875rem)/1.45 var(--f-body,system-ui);background:var(--sheet,#fff);color:var(--ink-1,#1a1f2b);box-sizing:border-box}
.hb-notepop textarea:focus{outline:none;border-color:var(--brand-700,#1d4271);box-shadow:0 0 0 3px rgba(var(--brand-rgb,11,37,69),.12)}
.hb-notepop .hb-actions{display:flex;gap:6px;justify-content:flex-end}
.hb-notepop .hb-actions .btn-danger{margin-right:auto}
.hb-panel-backdrop{display:none}

/* info dialog */
.hb-info-top{display:flex;gap:16px;align-items:flex-start}
.hb-info-top .hb-cover{--hb-cw:96px;flex:none}
.hb-info-top h2{font:700 var(--t-20,1.25rem)/1.2 var(--f-display,system-ui);color:var(--brand-900,#0b2545);margin:0 0 4px}
.hb-info-top p{margin:0;color:var(--ink-2,#4a5263);font-size:var(--t-14,.875rem)}
.hb-keys{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:var(--t-12,.75rem);color:var(--ink-2,#4a5263);margin-top:12px}
.hb-keys kbd{font:600 11px/1 var(--f-display,system-ui);background:var(--paper-2,#f3efe7);border:1px solid var(--line-2,#d9d2c5);border-bottom-width:2px;border-radius:5px;padding:3px 6px;color:var(--brand-900,#0b2545);white-space:nowrap}

/* blocked (not found, hidden, error): only the way back stays */
.hb-reader.is-blocked .hb-toolbar,.hb-reader.is-blocked .hb-foot,.hb-reader.is-blocked .hb-chap,.hb-reader.is-blocked .hb-pageform,.hb-reader.is-blocked .hb-top>.icon-btn:not(.hb-back),.hb-reader.is-blocked .hb-nav{display:none}
/* fullscreen */
.hb-reader:fullscreen{background:var(--hb-bg)}

/* ------------------------------------------------------------------ responsive */
@media (max-width:1180px){
  .hb-chap{flex-basis:200px}
  .hb-tb .hb-tlabel{display:none}
}
@media (max-width:920px){
  .hb-cont-row{grid-template-columns:1fr}
  .hb-tools .select{flex:1 1 140px;min-width:0}
  .hb-tools .hb-count{flex-basis:100%;margin-left:0}
  .hb-scope{--hb-cover-w:104px}
  .hb-row{gap:var(--s4,16px)}
  dialog.hb-detail{margin:auto 0 0;width:100vw;max-width:100vw;height:auto;max-height:92dvh;border-radius:20px 20px 0 0}
  dialog.hb-detail[open]{animation:hb-up 280ms var(--ease,ease)}
  .hb-detail-top .hb-cover{--hb-cw:104px}
  .hb-detail-top h3{font-size:var(--t-20,1.25rem)}
  .hb-strip{flex-direction:column;align-items:stretch;gap:12px}
  .hb-strip-text{flex:none}
  .hb-strip-covers .hb-cover{--hb-cw:70px}

  /* reader phone chrome */
  .hb-top{padding:6px 6px 6px 4px;gap:4px;min-height:54px}
  .hb-titlebox .hb-cover{display:none}
  .hb-title,.hb-sub{max-width:none}
  .hb-titlebox{flex:1 1 auto}
  .hb-chap,.hb-desk{display:none}
  .hb-pagein{width:48px;height:36px}
  .hb-toolbar{order:3;border-bottom:0;border-top:1px solid var(--hb-line);justify-content:space-around;padding:4px 6px calc(4px + env(safe-area-inset-bottom));gap:0;min-height:52px}
  .hb-reader .hb-tsep,.hb-reader .hb-tright{display:none}
  .hb-tb{height:44px;min-width:44px;padding:0 8px}
  .hb-swatches{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--hb-surface);border:1px solid var(--hb-line);border-radius:var(--r-pill,999px);padding:6px 10px;box-shadow:var(--sh-2)}
  .hb-sw{width:32px;height:32px}
  .hb-foot{order:2;padding:6px 14px 6px}
  .hb-panel{position:absolute;left:0;top:0;bottom:0;z-index:45;width:min(340px,88vw);box-shadow:var(--sh-3)}
  .hb-panel-close{display:inline-grid}
  .hb-panel:not([hidden])~.hb-panel-backdrop{display:block;position:absolute;inset:0;z-index:44;background:rgba(var(--brand-rgb,11,37,69),.38)}
  .hb-bookwrap{padding:12px 8px}
  .hb-nav{display:none}
  .hb-view{position:fixed;top:auto;bottom:0;left:0;right:0;width:auto;border-radius:20px 20px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
  .hb-notepop{position:fixed;left:8px!important;right:8px;top:auto!important;bottom:8px;width:auto}
  .hb-resume{flex-direction:column;align-items:stretch;gap:10px;top:8px;width:calc(100% - 24px);box-sizing:border-box}
  .hb-resume .hb-actions .btn{flex:1}
  .hb-resume p small{max-width:none}
}
@keyframes hb-up{from{transform:translateY(40px);opacity:.4}}
@media (max-width:640px){
  .hb-tools .input-icon{flex-basis:100%}
  .hb-cat{padding-right:12px}
  .hb-sub{display:none}
}
@media (min-width:921px){
  .hb-ponly{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  .hb-cover,.hb-book:hover .hb-cover{transition:none;transform:none}
  .hb-stage.is-fading .hb-book{animation:hb-fade 160ms linear}
}
@media print{.hb-top,.hb-toolbar,.hb-foot,.hb-panel{display:none}}
@media (max-width:640px){
  .hb-mtable td .hb-why{white-space:normal}
  .hb-mtable td[data-label="Class · subject"]{display:block;text-align:right}
  .hb-licence{max-width:none;min-width:0;text-align:right}
}