/* Reading Buddy styles. Loaded after app.css; uses its variables (--ink, --forest, --glass-2, --ui...). */

/* grade-screen tile: a wide banner after grade 5 */
.grade-tile.buddy-tile{grid-column:1/-1;aspect-ratio:auto;flex-direction:row;justify-content:flex-start;gap:14px;padding:10px 20px 10px 8px;min-height:104px;text-align:left}
.buddy-tile .bt-art{position:relative;width:150px;flex:0 0 150px}
.buddy-tile .bt-art .buddy-art{width:100%}
.buddy-tile .bt-txt{position:relative;display:flex;flex-direction:column;gap:4px;min-width:0}
.buddy-tile .bt-txt small{font-size:14px;font-weight:600;color:var(--ink-2);letter-spacing:.01em;text-transform:none}
@media (max-width:420px){.buddy-tile .bt-art{width:110px;flex-basis:110px}.buddy-tile .lbl{font-size:15px}}

/* the shoulder-buddy artwork */
.buddy-art{display:block;overflow:visible}
.buddy-art .b-hair{fill:#6b4429;stroke:var(--ink);stroke-width:5;stroke-linejoin:round}
.buddy-art .b-ear{fill:#f2c6a0;stroke:var(--ink);stroke-width:4;stroke-linejoin:round}
.buddy-art .b-neck{fill:#f2c6a0;stroke:var(--ink);stroke-width:5;stroke-linejoin:round}
.buddy-art .b-shirt{fill:var(--coral);stroke:var(--ink);stroke-width:5;stroke-linejoin:round}
.buddy-art .b-seam{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;opacity:.35}
.buddy-art .buddy-turtle{overflow:visible}
.buddy-art .buddy-turtle .head{transform-origin:100px 140px}
.buddy-art .buddy-turtle .eyes{transform:translate(1px,-3px)}            /* looking up and ahead, at the page */
.buddy-art .buddy-turtle.thinking .eyes,.buddy-art .buddy-turtle.listening .eyes{transform:translate(0,-4px)}

/* setup / scanning screen */
#buddy .scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}
.bs-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:520px;margin:0 auto;padding:6px 0 28px;text-align:center}
.bs-hero{width:min(300px,72vw)}
.bs-hero .buddy-art{width:100%}
.bs-title{margin:0;font-size:30px;letter-spacing:.04em;color:var(--forest)}
.bs-steps{margin:0;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:8px;text-align:left;font-size:18px;font-weight:600}
.bs-steps li{counter-increment:s;display:flex;align-items:center;gap:12px}
.bs-steps li::before{content:counter(s);flex:0 0 32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--forest);color:#fff;font-weight:700;border:2px solid var(--ink)}
.bs-level{display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--forest-3)}
.bs-err{margin:0;padding:10px 14px;border-radius:14px;background:#fff3f0;border:2px solid var(--coral);color:var(--ink);font-weight:600;max-width:420px}
.bs-priv,.bs-note{margin:0;font-size:13px;color:var(--ink-2);max-width:420px}
.bs-grown{width:100%;max-width:420px;text-align:left;font-size:14px}
.bs-grown summary{cursor:pointer;font-weight:700;color:var(--ink-2);padding:6px 0}
.bs-row{display:flex;gap:10px;align-items:center;margin:6px 0}
.bs-key{flex-direction:column;align-items:stretch;gap:4px}
.bs-key input{font:inherit;padding:8px 10px;border-radius:10px;border:2px solid var(--ink-3);background:#fff}
.bs-scan{display:flex;justify-content:center}
.bs-scan-hint{position:fixed;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom) + 138px);text-align:center;margin:0;font-size:20px;font-weight:700;color:var(--forest);z-index:6}

/* camera view: big while looking for the first page, a thumbnail while reading */
#buddyCam{position:fixed;z-index:7;overflow:hidden;background:#0c1511;border:var(--stroke) solid var(--ink);box-shadow:0 4px 0 var(--ink);border-radius:20px}
#buddyCam[hidden]{display:none}
#buddyCam video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#buddyCam .bcam-ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bcam-size{position:absolute;right:6px;bottom:6px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.85);border:2px solid var(--ink);font-weight:700;line-height:1;display:grid;place-items:center}
.bcam-paused{position:absolute;left:6px;top:6px;padding:2px 8px;border-radius:99px;background:var(--sun);border:2px solid var(--ink);font-size:12px;font-weight:700}
#buddyCam.paused video{filter:grayscale(1) brightness(.7)}
body.buddy-scan #buddyCam{top:calc(env(safe-area-inset-top) + 72px);left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:calc(env(safe-area-inset-bottom) + 190px)}
body.buddy-read #buddyCam{top:calc(env(safe-area-inset-top) + 10px);right:max(14px,env(safe-area-inset-right));width:104px;height:78px;border-radius:14px}
body.buddy-read #buddyCam.big{width:min(72vw,360px);height:min(54vw,270px)}
body.buddy-read #buddyCam .bcam-size{width:24px;height:24px;font-size:13px}

/* Shellfie on the shoulder: bottom centre, between the page arrows */
#buddyShoulder{position:fixed;z-index:4;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 2px);width:min(190px,calc(100vw - 190px));pointer-events:none}
#buddyShoulder[hidden]{display:none}
#buddyShoulder .buddy-art{width:100%}
body.buddy-scan #buddyShoulder{width:min(210px,60vw);bottom:calc(env(safe-area-inset-bottom) + 8px)}
body.calm #buddyShoulder .turtle,body.calm #buddyShoulder .turtle *{animation:none!important}

/* status hint pill */
#buddyHint{pointer-events:auto;position:fixed;z-index:8;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top) + 100px);max-width:min(80vw,420px);padding:8px 16px;border-radius:99px;background:#fff;border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);font-weight:700;font-size:16px;text-align:center}
#buddyHint[hidden]{display:none}
body.buddy-scan #buddyHint{display:none}

/* the reader while it shows a Reading Buddy page */
body.buddy-live .r-top .grow,body.buddy-live #rBookInfo,body.buddy-live .r-shells{visibility:hidden}
/* "Done": always reachable, even over the pause screen (z-index above .r-pause) */
.buddy-done,.buddy-scanbtn{display:none}
body.buddy-live .buddy-done{display:inline-flex;position:absolute;z-index:9;top:calc(env(safe-area-inset-top) + 12px);left:72px;min-height:44px;padding:0 20px;font-size:17px}
body.buddy-live .page-text{justify-content:flex-start;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:auto;padding-bottom:30vh}
body.buddy-live .page-text .inner{margin-top:0}
body.buddy-live .buddy-scanbtn{display:inline-flex;position:absolute;z-index:9;top:calc(env(safe-area-inset-top) + 12px);left:176px;min-height:44px;padding:0 16px;font-size:16px}
body.buddy-live .r-top{pointer-events:none}
body.buddy-live .r-top>button{pointer-events:auto}
@media (prefers-reduced-motion:reduce){#buddyShoulder .turtle,#buddyShoulder .turtle *{animation:none!important}}

/* setup: mode chooser */
.bs-mode{display:flex;flex-direction:column;gap:8px;width:100%;max-width:420px}
.bs-mode button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 14px;border-radius:16px;border:var(--stroke) solid var(--ink-3);background:var(--glass-2)}
.bs-mode button b{font-size:18px}.bs-mode button small{font-size:13px;color:var(--ink-2)}
.bs-mode button[aria-checked=true]{border-color:var(--ink);background:#e2f6e8;box-shadow:0 3px 0 var(--ink)}

/* scan-first mode: small camera on top, the page list below, Start reading at the bottom */
body.buddy-prescan #buddyShoulder{display:none}
body.buddy-prescan.buddy-scan #buddyCam{bottom:auto;height:min(36vh,320px)}
.bs-prescan{display:flex;flex-direction:column;gap:8px;align-items:stretch;padding-top:calc(min(36vh,320px) + 8px);height:100%}
.bs-scan-title{margin:0;font-size:20px;text-align:center;color:var(--forest)}
.bs-prescan .bs-scan-hint{position:static;font-size:15px;padding:0 4px}
.bs-list{flex:1;overflow:auto;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-width:520px;width:100%;align-self:center}
.bs-list li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:14px;border:2px solid var(--ink-3);background:#fff;font-weight:600}
.bs-list li span{flex:1}.bs-list li b{font-variant-numeric:tabular-nums}.bs-list li em{font-style:normal;font-size:13px;color:#b3412c}
.bs-list li.good{border-color:#2f9e5a;background:#eaf9ef}.bs-list li.ok{border-color:#d49a1c;background:#fff6dd}.bs-list li.low{border-color:#d4553a;background:#fff0ec}
.bs-list li.cur{box-shadow:0 0 0 3px var(--mint)}.bs-list li.empty{border-style:dashed;color:var(--ink-3);justify-content:center}
.bs-startread{align-self:center;margin:6px 0 14px;min-height:60px;font-size:22px}