/* hubs.css (16 Oct 2026) – 8 hubs, guides, My new town, shelf, tools */
.hb-stages{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.hb-chip{min-height:44px;padding:8px 14px;border-radius:999px;border:1.5px solid #c9d6d0;background:#fff;color:#0f3d2a;font:inherit;font-size:15px;cursor:pointer}
.hb-chip.on{background:#0f3d2a;color:#fff;border-color:#0f3d2a}
.hb-stagelist{margin:0 0 14px}.hb-forget{background:none;border:0;color:#555;text-decoration:underline;font:inherit;font-size:14px;min-height:44px;cursor:pointer}
.hb-grid .hg-urgent{order:-1}
.big.row.hb-row{display:flex;align-items:center;gap:12px;text-align:start}
.hb-row>span{display:flex;flex-direction:column;min-width:0}.hb-row small{font-weight:400;font-size:14px;opacity:.8;line-height:1.3;margin-top:2px}
.hb-h{display:flex;align-items:center;gap:8px}.hb-intro{margin:0 0 12px;font-size:17px}
.hb-sh{margin:18px 0 8px;font-size:17px}
.hb-note{display:flex;gap:10px;align-items:flex-start;background:#eef6ff;border:1px solid #b9d5f3;border-radius:12px;padding:12px;margin:10px 0;font-size:15px;line-height:1.45}
.hb-note a{font-weight:700}.hb-priv{background:#f1f8f3;border-color:#bfdcc8}
.hb-en{background:#fff8e1;border:1px solid #f0d58a;border-radius:12px;padding:10px 12px;margin:10px 0;font-size:15px}
.hb-rev{background:#f6f0ff;border:1px solid #d7c6f3;border-radius:12px;padding:8px 12px;margin:10px 0;font-size:14px}
.hb-guide{background:#fff;border-radius:16px;padding:16px;margin:8px 0 16px;line-height:1.55;font-size:17px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.hb-guide h2{margin:4px 0 6px;font-size:23px;line-height:1.25}.hb-guide h3{margin:16px 0 6px;font-size:18px}
.hb-guide ul{padding-inline-start:22px;margin:6px 0}.hb-guide li{margin:6px 0}.hb-guide a{color:#0b5cad;text-decoration:underline;overflow-wrap:anywhere}
.hb-sum{font-size:17px;color:#333;margin:0 0 8px}.hb-crumb{margin:0;font-size:14px}.hb-crumb a{text-decoration:none!important}
.hb-src{border-top:1px solid #e5e5e5;margin-top:16px;padding-top:10px;font-size:14px}.hb-src ul{margin:4px 0}
.hb-savebtn{margin-top:12px}
.hb-exit{position:fixed;top:calc(8px + env(safe-area-inset-top,0px));inset-inline-end:8px;z-index:1000;background:#b00020;color:#fff;border:0;border-radius:10px;min-height:44px;padding:8px 14px;font:inherit;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.25);cursor:pointer}
.hb-town .hb-tn{font-size:20px;margin:0 0 6px}.hb-mini{width:auto!important;display:inline-flex;align-items:center;gap:6px;padding:8px 14px!important;min-height:44px;margin:4px 6px 4px 0}
.hb-grid4{grid-template-columns:repeat(2,1fr)}
.hb-sbox{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.hb-sbox input{flex:1 1 220px;min-height:48px;font-size:17px}
.hb-shelf{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:720px){.hb-shelf{grid-template-columns:1fr 1fr}}
.hb-book{display:flex;gap:12px;background:#fff;border-radius:16px;padding:12px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.hb-book>img{width:110px;height:auto;border-radius:6px;flex:none;align-self:flex-start;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.hb-bi{min-width:0;flex:1}.hb-bi h3{margin:0 0 2px;font-size:17px}.hb-lv{margin:0 0 6px;font-size:13px;color:#555}.hb-bi p{margin:4px 0;font-size:15px}
.hb-sample{width:100%;max-width:420px;border:1px solid #ddd;border-radius:6px;margin:6px 0}
.hb-bi details summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:#0b5cad;text-decoration:underline}
.hb-az{display:inline-flex!important;width:auto!important;background:#ffd814!important;color:#111!important;border:1px solid #fcd200!important;border-radius:10px;padding:8px 14px!important;text-decoration:none;font-weight:700;margin-top:6px}
.hb-small{font-size:13px;color:#555;line-height:1.4}
.hb-tool label{display:block;margin:10px 0 4px;font-weight:600}.hb-tool input:not([type=checkbox]),.hb-tool textarea{width:100%;box-sizing:border-box;min-height:44px;font-size:16px;padding:8px;border:1px solid #c9c9c9;border-radius:8px;font-family:inherit}
.hb-tool .hb-ck{display:flex;gap:8px;align-items:center;font-weight:400}.hb-ck input{width:22px;height:22px}
.hb-big{text-align:center}.hb-date{font-size:26px;font-weight:800;margin:4px 0}.hb-warn{color:#8a4b00;font-weight:600}
.hb-steps{background:#fff;border-radius:14px;padding:12px 12px 12px 34px;line-height:1.5}.hb-steps li{margin:8px 0}
.hb-bar{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.hb-cv{background:#fff;color:#111;border:1px solid #ddd;border-radius:10px;padding:18px;font-family:Arial,Helvetica,sans-serif;line-height:1.4}
.hb-cv h1{font-size:24px;margin:0}.hb-cv h2{font-size:16px;border-bottom:1px solid #bbb;margin:14px 0 4px;padding-bottom:2px}.hb-cv .cv-c{margin:2px 0 6px;color:#333}.hb-cv ul{margin:4px 0;padding-left:20px}
.hb-letter{white-space:pre-wrap;background:#fff;border:1px solid #ddd;border-radius:10px;padding:14px;font-family:inherit;font-size:15px;line-height:1.5}
[dir=rtl] .hb-steps{padding:12px 34px 12px 12px}
html.a11y .hb-chip.on{outline:3px solid #000}
@media print{body.hb-printing>*:not(main),body.hb-printing #app>*:not(.hb),body.hb-printing .hb>*,body.hb-printing .hb-tool>*{display:none!important}
 body.hb-printing #app,body.hb-printing .hb,body.hb-printing .hb-tool,body.hb-printing #hbt,body.hb-printing #ltf{display:block!important}
 body.hb-printing #hbt>*:not(.hb-print):not(#ltf),body.hb-printing #ltf>*:not(.hb-print){display:none!important}
 body.hb-printing .hb-print{display:block!important;border:0}body.hb-printing .hb-bar{display:none!important}}
.hb-imm{background:#fff7e6;border-color:#f0c36d}.hb-imm p{margin:0 0 6px}.hb-imm ul{margin:4px 0 6px;padding-inline-start:18px}.hb-imm li{margin:4px 0}.hb-imm a{color:#0b5cad}
.hb-soft{background:#f3f7f5;border-color:#cfe0d6}
/* readability: body text >= 16px */
.hb-note,.hb-bi p,.hb-en,.hb-rev,.hb-lv{font-size:16px}.hb-crumb{font-size:15px}
/* sources footer: new-tab label, translate link, OGL (16 Oct 2026) */
.hb-src li{margin:6px 0;line-height:1.5}.hb-src a{display:inline-block;min-height:24px;padding:2px 0}
.hb-nt{font-size:16px;color:#555}.hb-gt{white-space:nowrap}.hb-gtn,.hb-ogl{font-size:16px;color:#444;margin-top:8px}
html.a11y .hb-nt,html.a11y .hb-gtn,html.a11y .hb-ogl{font-size:16px;color:#000}
/* 16 Oct follow-up: compact "See free sample" button (replaces the yellow Buy on Amazon button; site colours from the theme) */
.hb .hb-samp{display:inline-flex!important;align-items:center;gap:6px;width:auto!important;min-height:44px;padding:8px 14px!important;margin:6px 0 0!important;font-size:15px!important;font-weight:600;border-radius:12px!important}
.hb .hb-sample[hidden]{display:none}
.hb .hb-soon{display:inline-block;margin:6px 0 0;padding:3px 10px;border-radius:999px;background:var(--tm-tint,#E6F2F1);color:var(--tm-brand,#0F6E68);font-size:13px;font-weight:700}
/* 16 Oct follow-up (Sachiko review): in RTL languages, untranslated English fallback lines take their own direction (left-to-right),
   and the Back arrow points the right way. */
html[dir=rtl] .hb :is(p,li,h2,h3,h4,small,summary,.hb-rt,.hb-note span),html[dir=rtl] #app .card,html[dir=rtl] #app .mcw-sub{unicode-bidi:plaintext}
html[dir=rtl] a[href^="javascript:history.back"]>b,html[dir=rtl] #mcwup>b,html[dir=rtl] .hb-back>b{display:inline-block;transform:scaleX(-1)}

/* ===== 16 Oct 19:14 (Joseph): minimal shelf cards, ONE fixed size everywhere. Card = cover box (full cover, contain) + title box (exactly
   2 lines, ellipsis, space reserved) + foot (price line + Buy) pinned at the bottom. Heights use em so text-size prefs scale every card alike. */
.hb .hb-shelf{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));align-items:stretch}
.hb .hb-card{box-sizing:border-box;display:flex;flex-direction:column;gap:0;min-width:0;padding:10px;height:calc(220px + 2.7em + 1.6em + 76px);overflow:hidden;font-size:16px;line-height:1.35}
.hb .hb-card>.hb-cov{flex:none;display:flex;align-items:center;justify-content:center;width:100%;height:200px;margin:0;padding:6px;box-sizing:border-box;border-radius:10px;background:#F2F4F7;cursor:pointer;overflow:hidden}
.hb .hb-card>.hb-cov img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.hb .hb-cov-ph{font-size:48px}
.hb .hb-card>.hb-t{flex:none;margin:10px 0 0;height:2.7em;font-size:16px;line-height:1.35;overflow:hidden}
.hb .hb-card>.hb-t>.hb-open{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;width:100%;max-height:2.7em;margin:0;padding:0;font:inherit;font-weight:700;line-height:1.35;text-align:start;overflow-wrap:anywhere;cursor:pointer;min-height:0}
.hb .hb-card>.hb-foot{flex:none;margin-top:auto;height:calc(1.6em + 60px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hb .hb-card .sh-price-line{margin:0 0 6px;height:1.6em;line-height:1.6em;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb .hb-card .sh-price-line b{font-size:17px}
.hb .hb-card .hb-foot .sh-btn{width:100%;min-height:50px;height:50px;margin:0;padding:6px 10px;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb .hb-card .hb-foot .hb-soon{align-self:flex-start;margin:0 0 14px}
html.tm:not(.a11y):not(#tgx):not(#tgx) .hb .hb-card .hb-open{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;color:inherit!important;width:100%}
html.tm:not(.a11y):not(#tgx):not(#tgx) .hb .hb-card>.hb-cov{background:#F2F4F7!important;border-radius:10px!important;padding:6px!important}
html.tm:not(.a11y):not(#tgx):not(#tgx) .hb .hb-card>.hb-t>.hb-open{padding:0!important;min-height:0!important;color:#0B0B0C!important;justify-content:flex-start}
.hb .hb-open:focus-visible{outline:3px solid var(--tm-brand,#0F6E68);outline-offset:2px}
html.a11y .hb .hb-card .hb-open{background:transparent;border:0;color:#000}
html.bigtext .hb .hb-card{height:calc(220px + 2.7em + 1.6em + 76px)}
/* tap-to-open popup */
html.hb-popon,html.hb-popon body{overflow:hidden}
.hb-popw{position:fixed;inset:0;z-index:2000;background:rgba(10,14,20,.55);display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
.hb-pop{position:relative;box-sizing:border-box;width:100%;max-width:520px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;background:#fff;border-radius:18px;padding:18px;box-shadow:0 20px 50px rgba(0,0,0,.35);font-size:16px;line-height:1.45;color:#0B0B0C}
.hb-pop:focus{outline:none}
.hb-popx{position:absolute;top:8px;inset-inline-end:8px;width:44px;height:44px;min-height:44px;padding:0;font-size:20px;border-radius:12px;cursor:pointer}
.hb-pophd{display:flex;gap:14px;align-items:flex-start;padding-inline-end:44px}
.hb-pophd img{width:110px;height:auto;flex:none;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.hb-pophd h3{margin:0 0 4px;font-size:20px;line-height:1.25;overflow-wrap:anywhere}
.hb-pop .hb-pd{margin:12px 0 0}
.hb-pop .hb-samp{display:inline-flex!important;width:auto!important;min-height:44px;padding:8px 14px!important;margin:12px 0 0!important;font-size:15px!important;font-weight:600}
.hb-pop .hb-sample{display:block;width:100%;max-width:100%;margin:10px 0 0;border:1px solid #ddd;border-radius:6px}.hb-pop .hb-sample[hidden]{display:none}
.hb-popft{margin-top:14px}.hb-popft .sh-btn{width:100%}.hb-popft .sh-price-line{margin:0 0 4px}
html[dir=rtl] .hb-pop :is(p,h3){unicode-bidi:plaintext}
.hb .hb-card .sh-soon-slot{display:flex;align-items:center;justify-content:center;height:50px;margin:0;border-radius:var(--tg-r3,14px);border:1.5px dashed #c9ced6;box-sizing:border-box}
.hb-popft .sh-soon-slot{display:flex;align-items:center;justify-content:center;min-height:50px;margin:0;border-radius:14px;border:1.5px dashed #c9ced6}

/* 19:30 (Joseph): no Buy on cards. Card = cover + 2-line title + price; whole card is the tap target (title button stretched over the card). */
.hb .hb-card{position:relative;height:calc(220px + 2.7em + 1.6em + 16px);cursor:pointer}
.hb .hb-card>.hb-cov{cursor:pointer}
.hb .hb-card>.hb-t>.hb-open::after{content:"";position:absolute;inset:0;border-radius:16px}
.hb .hb-card>.hb-foot{height:1.6em;justify-content:center}
.hb .hb-card .hb-foot .sh-price-line{margin:0}
.hb .hb-card .hb-foot .sh-price-line .sh-soon{font-size:13px;padding:1px 8px;vertical-align:1px}
.hb .hb-card .hb-foot .hb-soon{margin:0;align-self:flex-start}
.hb .hb-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.12)}
html.tm:not(.a11y):not(#tgx):not(#tgx) .hb .hb-card>.hb-cov{background:#F2F4F7!important}
/* popup editions list */
.hb-pop .sh-eds{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.hb-pop .sh-ed{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"l p" "s b";gap:6px 10px;align-items:center;padding:10px 12px;border:1px solid #E4E7EC;border-radius:14px;background:#F9FAFB}
.hb-pop .sh-ed-l{grid-area:l;font-weight:700}.hb-pop .sh-ed-p{grid-area:p;font-size:18px;justify-self:end}
.hb-pop .sh-ed:not(:has(.sh-ed-samp))>.sh-btn,.hb-pop .sh-ed:not(:has(.sh-ed-samp))>.sh-soon{grid-column:1/-1}
.hb-pop .sh-ed .sh-btn{grid-area:b;width:100%;min-height:48px;margin:0}
.hb-pop .sh-ed>.sh-soon{grid-area:b;justify-self:start}
.hb-pop .sh-ed-samp{grid-area:s;justify-self:start;min-height:48px;white-space:nowrap;padding:6px 12px;font-size:15px;font-weight:600;border-radius:12px;cursor:pointer}
@media (min-width:480px){.hb-pop .sh-ed{grid-template-columns:minmax(90px,1fr) auto auto auto;grid-template-areas:"l p s b"}.hb-pop .sh-ed:not(:has(.sh-ed-samp))>.sh-btn,.hb-pop .sh-ed:not(:has(.sh-ed-samp))>.sh-soon{grid-column:auto}.hb-pop .sh-ed .sh-btn{width:auto;padding:8px 16px}.hb-pop .sh-ed>.sh-soon{justify-self:end}}
.hb-pop .sh-ed-soon .hb-soon{margin:0}

/* Shop / Books admin: School books subject filter = one compact scrollable row */
.hb .hb-subf{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;margin:8px 0 4px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.hb .hb-subf>.hb-chip{flex:none;min-height:44px;margin:0;padding:6px 16px;font:inherit;font-size:15px;font-weight:600;border-radius:999px;white-space:nowrap;border:1.5px solid #c9ced6;background:#fff;color:#111;cursor:pointer}
.hb .hb-subf>.hb-chip[aria-pressed="true"]{background:#111;color:#fff;border-color:#111}
.hb .hb-subf>.hb-chip:focus-visible{outline:3px solid #ffd400;outline-offset:2px}
.hb .hb-subj>h4.hb-sh{margin-top:14px}
.hb .hb-school .hb-card{height:auto;min-height:0}
.hb .hb-school .hb-stage{margin:2px 0 6px;font-size:14px;line-height:1.3;color:#3b4350}
/* ---- Learn hub (feat-learn preview, 16 Oct 2026) ---- */
.lh .lh-anchor{position:absolute!important;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lh .lh-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.lh .lh-chips .hb-chip{min-height:48px;padding:8px 16px;font-size:16px}
.lh .lh-sec{margin:0 0 10px}
.lh .lh-sec[hidden]{display:none!important}
.lh .lh-tiles{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:720px){.lh .lh-tiles{grid-template-columns:1fr 1fr}}
.lh .lh-tile{display:flex;align-items:center;gap:12px;box-sizing:border-box;min-height:64px;padding:10px 14px;border-radius:16px;background:#fff;color:#0B0B0C;text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,.08);min-width:0}
.lh .lh-tile:focus-visible{outline:3px solid #0B0B0C;outline-offset:2px}
.lh .lh-ic{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:#EEF4F3;font-size:24px}
.lh .lh-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lh .lh-tx b{font-size:17px;line-height:1.3;overflow-wrap:anywhere}
.lh .lh-tx small{font-size:14.5px;line-height:1.35;color:#4A4F57;overflow-wrap:anywhere}
.lh .lh-go{flex:none;font-size:26px;color:#8A9099;line-height:1}
[dir=rtl] .lh .lh-go{transform:scaleX(-1)}
.lh .lh-sub{margin-top:16px}
.lh .lh-books{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:720px){.lh .lh-books{grid-template-columns:1fr 1fr}}
.lh .lh-book{display:flex;gap:14px;box-sizing:border-box;padding:12px;border-radius:16px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08);min-width:0}
.lh .lh-bcov{flex:none;width:110px}
.lh .lh-bcov img{display:block;width:110px;height:auto;aspect-ratio:5/8;object-fit:cover;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.25);background:#F2F4F7}
.lh .lh-bbody{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.lh .lh-bt{margin:0;font-size:18px;line-height:1.3}
.lh .lh-stage{margin:0;font-size:14px;font-weight:600;color:#0F6E68}
.lh .lh-bd{margin:2px 0 0;font-size:15px;line-height:1.4;color:#2B2F36}
.lh .lh-imp{margin:0;font-size:13px;color:#6A707A}
.lh .lh-read{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:48px;margin-top:6px;padding:8px 18px;font-size:17px;font-weight:700;border-radius:12px;text-decoration:none}
.lh .lh-off{opacity:.55;cursor:not-allowed}
.lh .lh-pv{font-size:13px;color:#8A4B00}
@media(max-width:380px){.lh .lh-book{flex-direction:column}.lh .lh-bcov,.lh .lh-bcov img{width:120px}}
html.a11y .lh .lh-tile,html.a11y .lh .lh-book{border:3px solid #000;box-shadow:none;background:#fff;color:#000}
html.a11y .lh .lh-tx small,html.a11y .lh .lh-bd{color:#000}
.lh-price{display:block;font-weight:800;font-size:18px;margin:6px 0 4px}

/* LIBRARY (17 Oct 2026): Library tile on Learn + #learn/library page */
.lh .lh-libt{grid-template-columns:1fr!important}
.lh .lh-libtile{min-height:76px;border:2px solid #1F5FAE;background:#F3F7FD}
.lh .lh-libtile .lh-ic{font-size:30px}
.lh .lh-libtile b{font-size:19px}
.lib .lib-sec{margin:0 0 18px}
.lib .lib-sec.lib-empty{display:none}
.lib .lib-st{margin-top:14px}
.lib .lib-subj{margin:14px 0 8px;font-size:17px;font-weight:800;color:#1F2A3C}
.lib .hb-shelf{min-width:0}