/* Reader navigation: one edge-to-edge bar, jewel-toned controls and a warm active state. */
body[data-reader] .frame>.top.reader-top,body[data-reader][data-sticky-navigation="true"] .frame>.top.reader-top{position:relative;display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:24px;min-height:108px;margin-top:0;margin-bottom:26px;padding:calc(15px + env(safe-area-inset-top)) max(24px,calc((100% - 1280px)/2)) 15px;border:0;border-bottom:1px solid #e3c5ff24;border-radius:0;background:linear-gradient(110deg,#2b1d43f5,#49305df0 58%,#352248f5);box-shadow:0 7px 28px #180f2929,inset 0 -1px #fff1d008;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);isolation:isolate}
body .reader-top:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,#ebc58477 24%,#ebc58422 62%,transparent);pointer-events:none}
body .reader-top .reader-wordmark{display:flex;align-items:center;gap:13px;min-width:0;max-width:330px;padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;color:#fff3d9;text-align:left;text-shadow:none;flex:none;min-height:56px;transition:opacity .2s}
body .reader-top .reader-wordmark:hover{opacity:.85}
body .reader-top .reader-brand-icon{display:grid;place-items:center;flex:none;width:48px;height:48px;border:1px solid #e3bf8d77;border-radius:16px;background:linear-gradient(140deg,#f3d6a326,#d2b3f60d);color:#f3d398;box-shadow:inset 0 1px #fff1d31f;rotate:-7deg}
.reader-brand-icon>.ui-icon{width:27px;height:27px}
body .reader-top .reader-brand-copy{display:block;min-width:0}
body .reader-top .reader-name{display:block;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d0b5d9;font:600 10px/1.5 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}
body .reader-top .reader-brand{display:block;color:#fff3d9;font:700 30px/1.1 ui-rounded,'Trebuchet MS',system-ui,sans-serif;letter-spacing:-1px;white-space:nowrap}
body .reader-top .brand-point{display:inline;color:#efbcdf}
body .reader-top nav.reader-nav{display:grid;grid-template-columns:repeat(var(--nav-count),minmax(72px,1fr));align-items:stretch;justify-content:initial;gap:7px;width:auto;max-width:720px;min-width:0;margin:0;padding:5px;border:1px solid #d6b5f020;border-radius:22px;background:#1d13252b;flex:0 1 700px}
body .reader-top nav.reader-nav .reader-nav-item,body[data-sticky-navigation="true"] .reader-top nav.reader-nav .reader-nav-item{position:relative;isolation:isolate;display:grid;grid-template-rows:36px 17px;align-content:center;align-items:center;justify-items:center;gap:4px;flex:none;min-width:0;width:100%;max-width:none;height:76px;min-height:76px;margin:0;padding:6px 8px 9px;overflow:hidden;border:1px solid #ddc5f422;border-radius:16px;background:linear-gradient(145deg,#ffffff0e,#ffffff03);color:#e7d8ec;box-shadow:inset 0 1px #ffffff0c;font-weight:650;transition:transform .2s,background .2s,border-color .2s,box-shadow .2s,color .2s}
body .reader-top nav.reader-nav .reader-nav-item:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 10%,#fff2ce15 48%,transparent 80%);translate:-130% 0;transition:translate .55s ease;pointer-events:none}
body .reader-top nav.reader-nav .reader-nav-item:hover:before{translate:130% 0}
body .reader-top nav.reader-nav .reader-nav-item:hover{transform:translateY(-2px);border-color:#e3c8fa65;background-color:#9871bb22;box-shadow:0 6px 16px #140c2526,inset 0 1px #ffffff18;color:#fff8e9}
body .reader-top nav.reader-nav .reader-nav-item:active{transform:translateY(0) scale(.96)}
body .reader-top nav.reader-nav .reader-nav-item[aria-current="page"]{background:linear-gradient(145deg,#fff0c6,#e8c68c);border-color:#fff1c5;color:#4d2e65;box-shadow:0 4px 15px #130c241f,inset 0 1px #fff8e5}
body .reader-top nav.reader-nav .reader-nav-item:focus-visible{outline:2px solid #ffe1a0;outline-offset:4px}
body .reader-top nav.reader-nav .navicon,body[data-sticky-navigation="true"] .reader-top nav.reader-nav .navicon{display:grid;place-items:center;width:36px;height:36px;margin:0;transition:transform .25s}
body .reader-top nav.reader-nav .navicon img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 3px #1d11252b)}
body .reader-top nav.reader-nav .navicon>.ui-icon{width:25px;height:25px}
body .reader-top nav.reader-nav .reader-nav-item:hover .navicon{transform:translateY(-2px) rotate(-4deg)}
body .reader-top nav.reader-nav .navlabel{display:flex;align-items:center;justify-content:center;min-width:0;width:100%;height:17px;min-height:0;font-size:11px;line-height:1.15;text-align:center;white-space:nowrap;overflow-wrap:normal}
.nav-active-light{position:absolute;bottom:3px;left:calc(50% - 8px);width:16px;height:2px;background:transparent;border-radius:2px}
[aria-current="page"]>.nav-active-light{background:#80519188}
body .reader-top nav.reader-nav .reader-exit{border-color:transparent;background:transparent;color:#cdb9d6;box-shadow:none}
@media(max-width:1000px){body[data-reader] .frame>.top.reader-top,body[data-reader][data-sticky-navigation="true"] .frame>.top.reader-top{gap:16px;padding-inline:20px}body .reader-top .reader-brand-icon{display:none}body .reader-top .reader-brand{font-size:27px}body .reader-top nav.reader-nav{grid-template-columns:repeat(var(--nav-count),minmax(64px,1fr));gap:5px}body .reader-top nav.reader-nav .navlabel{font-size:10px}}
@media(max-width:740px){
 body[data-reader] .frame>.top.reader-top,body[data-reader][data-sticky-navigation="true"] .frame>.top.reader-top{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;min-height:0;padding:calc(10px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));margin-bottom:18px}
 body .reader-top .reader-wordmark{min-height:37px;gap:9px;max-width:100%;width:auto}
 body .reader-top .reader-brand-icon{display:grid;width:35px;height:35px;border-radius:12px}.reader-brand-icon>.ui-icon{width:21px;height:21px}
 body .reader-top .reader-brand-copy{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
 body .reader-top .reader-name{order:2;font-size:8px;letter-spacing:.07em;max-width:150px}
 body .reader-top .reader-brand{font-size:25px;line-height:1.1}
 body .reader-top nav.reader-nav{display:grid;grid-template-columns:repeat(var(--nav-count),minmax(0,1fr));gap:4px;width:100%;max-width:none;min-width:0;margin:0;padding:4px;border-radius:17px}
 body .reader-top nav.reader-nav .reader-nav-item,body[data-sticky-navigation="true"] .reader-top nav.reader-nav .reader-nav-item{display:grid;grid-template-rows:28px 20px;align-content:center;gap:3px;width:100%;min-width:0;max-width:none;height:64px;min-height:64px;padding:5px 1px 7px;border-radius:12px}
 body .reader-top nav.reader-nav .navicon,body[data-sticky-navigation="true"] .reader-top nav.reader-nav .navicon{width:28px;height:28px}
 body .reader-top nav.reader-nav .navicon>.ui-icon{width:22px;height:22px}
 body .reader-top nav.reader-nav .navlabel{font-size:clamp(8px,2.1vw,10px);height:20px;white-space:normal;line-height:1.1;min-height:0}
 .nav-active-light{bottom:3px}
}
@media(max-width:360px){body .reader-top .reader-name{font-size:7px;max-width:130px}body .reader-top .reader-brand{font-size:23px}body .reader-top .reader-brand-copy{gap:7px}body .reader-top nav.reader-nav .navlabel{font-size:8px}}
@media(prefers-reduced-motion:reduce){body .reader-top *,body .reader-top *:before{transition:none!important}body .reader-top nav.reader-nav .reader-nav-item:hover,body .reader-top nav.reader-nav .reader-nav-item:hover .navicon{transform:none}body .reader-top nav.reader-nav .reader-nav-item:before{display:none}}

/* Preserve the distraction-free reader and word-practice layouts. */
body[data-view="read"] .reading-frame>.reader-top,body[data-view="wordPractice"] .frame>.reader-top{display:none!important}

body[data-reader][data-sticky-navigation="true"] .frame>.top.reader-top{position:sticky;top:0;z-index:50}

/* Name first on every screen, with the familiar in-app wordmark. */
body .reader-top .reader-title{display:block;color:#fff3d9;font:700 29px/1.08 ui-rounded,'Trebuchet MS',system-ui,sans-serif;letter-spacing:-.8px;text-align:left}
body .reader-top .reader-child-name{display:block;color:#fff3d9;overflow-wrap:anywhere}
body .reader-top .reader-title-line{display:block;color:#f1bbdf}
@media(max-width:740px){body .reader-top .reader-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 7px;font-size:25px}body .reader-top .reader-child-name,body .reader-top .reader-title-line{display:inline}}
@media(max-width:360px){body .reader-top .reader-title{font-size:23px}}

/* The navigation was a single row that squeezed every button as items were added. With
   routines, words, games, rewards, parents and sign out a phone had seven cells of about
   48px and 8px labels. Below 620px the row wraps instead, keeping each button big enough
   to hit and its label big enough to read. These are emerging readers, so the words stay:
   icon-only buttons, or hiding items behind a "more" menu, would cost them more than the
   space is worth. */
@media(max-width:620px){
 body .reader-top nav.reader-nav,body[data-sticky-navigation="true"] .reader-top nav.reader-nav{grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:6px;row-gap:6px}
 body .reader-top nav.reader-nav .navlabel{font-size:10px;line-height:1.25}
 body .reader-top nav.reader-nav .reader-nav-item{padding-block:8px}
}
@media(max-width:360px){
 body .reader-top nav.reader-nav,body[data-sticky-navigation="true"] .reader-top nav.reader-nav{grid-template-columns:repeat(auto-fit,minmax(66px,1fr))}
 body .reader-top nav.reader-nav .navlabel{font-size:9px}
 body .reader-top nav.reader-nav .nav-tag{font-size:8px;padding:1px 4px}
}

/* Optional single-row navigation on phones, controlled by the global setting. One line
   that slides sideways instead of wrapping: saves vertical space, at the cost of buttons
   starting off the edge where a young child may never find them. Off by default. */
@media(max-width:620px){
 body[data-scrolling-navigation="true"] .reader-top nav.reader-nav,
 body[data-scrolling-navigation="true"][data-sticky-navigation="true"] .reader-top nav.reader-nav{
  grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(76px,1fr);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding-inline:6px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
 body[data-scrolling-navigation="true"] .reader-top nav.reader-nav::-webkit-scrollbar{display:none}
 body[data-scrolling-navigation="true"] .reader-top nav.reader-nav .reader-nav-item{scroll-snap-align:start}
 /* A visible edge fade, so it reads as "there is more" rather than as a cut-off button. */
 body[data-scrolling-navigation="true"] .reader-top nav.reader-nav{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%)}
}