/* One reading surface and close control for stories and news. */
.reading-reader-page,.reading-reader-page body{background:var(--crp-bg-f7f7fc,#f7f7fc)}
.reading-reader-page .learning-page-content{max-width:850px}
.reading-reader-page body[data-learning-page] .learning-page-content{background:linear-gradient(180deg,var(--crp-bg-ffffff,#fff),var(--crp-bg-f8fafc,#f8fafc));border-color:var(--crp-border-94a3b8,#94a3b8)}
.reading-reader-toolbar{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:12px;padding:12px 18px;margin:-2px 0 24px;background:#f3f4f6;border-radius:14px;color:#212939}
.reading-reader-toolbar>span{font-size:17px;font-weight:700;line-height:1.45;text-align:center;overflow-wrap:anywhere}
.reading-reader-close{display:inline-grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:12px;background:transparent;color:#6e40d9;text-decoration:none;transition:transform .16s ease-out,opacity .16s ease-out}
.reading-reader-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.reading-reader-close:focus-visible{outline:3px solid #a78bfa;outline-offset:2px}
.reading-reader-close:active{transform:scale(.985);opacity:.9}
@media(hover:hover){.reading-reader-close:hover{transform:translateY(-2px)}}
.reading-reader-page .story-reader-page-header{display:block;margin-bottom:4px;padding-bottom:16px;border-bottom:4px solid var(--crp-border-9ca3af,#9ca3af)}
.reading-reader-page .story-reader-title-copy{display:flow-root}
.reading-reader-native,.reading-reader-native body{background:#f7f7fc!important}
.reading-reader-native .learning-page-main{padding:20px!important;min-height:0}
.reading-reader-native body[data-learning-page] .learning-page-content{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;animation:none}
.reading-reader-native .reading-reader-toolbar{display:none}
.story-card-image{display:block;width:88px;height:88px;object-fit:cover;border-radius:12px;background:#f3f4f6;flex-shrink:0}
.hsk-reading-story-link:has(.story-card-image){grid-template-columns:auto minmax(0,1fr) 88px auto}
.story-reader-image{float:right;width:120px;margin:0 0 12px 18px}
.story-reader-image>img{display:block;width:120px;height:96px;object-fit:cover;border-radius:12px;background:#f3f4f6}
/* Attribution stays on the photo and opens only when requested. */
.story-reader-image{position:relative}
.story-reader-image>button.story-image-info{position:absolute;right:4px;bottom:4px;display:grid;place-items:center;box-sizing:border-box;width:36px;min-width:36px;height:36px;min-height:36px;padding:7px;border:1px solid #94a3b8;border-radius:50%;background:rgba(255,255,255,.95);color:#334155;cursor:pointer;transition:transform .16s ease-out,opacity .16s ease-out}
.story-image-info svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.story-image-info:active{transform:scale(.985);opacity:.9}
.story-image-info:focus-visible{outline:3px solid #a78bfa;outline-offset:2px}
.story-image-dialog{box-sizing:border-box;width:calc(100% - 32px);max-width:400px;max-height:85dvh;padding:0;border:1px solid #94a3b8;border-radius:16px;background:#fff;color:#212939;overflow:auto}
.story-image-dialog::backdrop{background:rgba(15,23,42,.35)}
.story-image-dialog-header{display:flex;align-items:center;gap:12px;padding:10px;background:#f3f4f6}
.story-image-dialog-header svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.story-image-dialog h2{margin:0;font-size:18px}
.story-image-dialog-header button{width:44px;height:44px;min-height:44px;padding:0;border:0;background:transparent;color:#6e40d9;font-size:28px}
.story-image-dialog-content{padding:0 20px 20px;overflow-wrap:anywhere}
.story-image-dialog a{color:#6d28d9}
.reading-reader-native .story-reader-title{display:none}
.story-reader-status[hidden]{display:none}
.story-word-hint{position:fixed;z-index:11000;display:flex;flex-direction:column;align-items:center;width:220px;transform:translateX(-50%);pointer-events:none;color:#fff}
.story-word-hint>span{padding:9px 12px;border-radius:10px;background:#553283;font:600 14px/1.4 system-ui,sans-serif;box-shadow:0 3px 12px #1e1b4b20}
.story-word-hint>svg{width:48px;height:48px;transform:translateX(var(--hand-offset,0px));overflow:visible}
.story-word-hint-hand{animation:word-hint-tap 1.1s ease-in-out infinite;transform-origin:32px 40px}
@keyframes word-hint-tap{0%,100%{transform:translateY(-4px) rotate(-7deg)}50%{transform:translateY(2px) rotate(0deg)}}
@media(prefers-reduced-motion:reduce){.story-word-hint-hand{animation:none}.story-reader-image>button.story-image-info{transition:none}}
@media(max-width:600px){.story-reader-image{width:88px;margin-left:14px}.story-reader-image>img{width:88px;height:88px}.hsk-reading-story-link:has(.story-card-image){grid-template-columns:auto minmax(0,1fr) 88px}.hsk-reading-story-link>.story-card-image{grid-column:3;grid-row:1/3;align-self:start}.hsk-reading-story-link>.hsk-reading-story-cta{grid-column:2}}
@media(prefers-reduced-motion:reduce){.reading-reader-close{transition:none;transform:none!important}}

/* Keep word lookups compact inside the native reading area and fixed banners. */
.reading-reader-native .story-reader-tooltip,.story-reader-tooltip.story-reader-tooltip-native{width:280px;max-width:calc(100vw - 32px);max-height:min(380px,58dvh);padding:12px;padding-top:18px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.reading-reader-native .story-reader-tooltip>button.story-reader-tooltip-close,.story-reader-tooltip-native>button.story-reader-tooltip-close{position:sticky;float:right;top:-18px;right:auto;width:36px;height:36px;margin:-18px -12px 0 0}