/* Rangooo hub as a phone app screen (stories-and-activities). PHONES ONLY (max-width:699px).
   hub-app.js builds .ha from the page's own links and mounts it on <body>, then adds html.hub-on.
   With hub-on the document IS the app: every other child of <body> (the page, the Draw promo, footer, tab bar and whatever a build step adds later)
   is hidden, except the dock, its sheet and dialogs. Nothing in this file changes layout at >=700px. */
.ha{display:none}
@media (max-width:699px){
  /* ---- tokens: light (docs/design-system.md) ---- */
  html.hub-on,.ha{
    --ha-bg:#F6F6F2;--ha-surface:#FFFFFF;--ha-ink:#16202C;--ha-muted:#5A6573;--ha-line:rgba(22,32,44,.10);--ha-line-strong:#D5D6CF;
    --ha-acc:#145C63;--ha-acc-ink:#FFFFFF;--ha-acc-tint:rgba(20,92,99,.08);--ha-acc-edge:rgba(20,92,99,.45);--ha-track:#ECE8DE;
    --ha-focus:#E8590C;--ha-glow:rgba(20,92,99,.16);--ha-brass:#8A5F1A;
    --ha-sh1:0 1px 2px rgba(22,32,44,.05),0 1px 1px rgba(22,32,44,.03);
    --ha-sh2:0 1px 2px rgba(22,32,44,.04),0 10px 26px rgba(22,32,44,.09);
    --ha-head:Fraunces,Georgia,'Times New Roman',serif;--ha-ui:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
    --ha-ease:cubic-bezier(.2,.7,.2,1);
  }
  /* ---- tokens: night (html[data-night="1"] from overrides/night/night.css; system dark when the user did not pick light) ---- */
  html[data-night="1"].hub-on,html[data-night="1"] .ha{
    --ha-bg:#0F1720;--ha-surface:#18222D;--ha-ink:#E9EEF2;--ha-muted:#9BA8B5;--ha-line:#263341;--ha-line-strong:#34445A;
    --ha-acc:#4FB3C4;--ha-acc-ink:#0B1218;--ha-acc-tint:rgba(79,179,196,.14);--ha-acc-edge:rgba(79,179,196,.55);--ha-track:#111B25;
    --ha-glow:rgba(79,179,196,.22);--ha-brass:#E8BE6A;
    --ha-sh1:0 1px 2px rgba(0,0,0,.3);--ha-sh2:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.4);
  }
  @media (prefers-color-scheme:dark){
    html.hub-on:not(.hub-light),html:not(.hub-light) .ha{
      --ha-bg:#0F1720;--ha-surface:#18222D;--ha-ink:#E9EEF2;--ha-muted:#9BA8B5;--ha-line:#263341;--ha-line-strong:#34445A;
      --ha-acc:#4FB3C4;--ha-acc-ink:#0B1218;--ha-acc-tint:rgba(79,179,196,.14);--ha-acc-edge:rgba(79,179,196,.55);--ha-track:#111B25;
      --ha-glow:rgba(79,179,196,.22);--ha-brass:#E8BE6A;
      --ha-sh1:0 1px 2px rgba(0,0,0,.3);--ha-sh2:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.4);
    }
  }
  /* category tones (art only: plates and icons, never button fills) */
  .ha [data-tone=teal]{--tone:#0E6F78;--tone-bg:#E2F0F1}
  .ha [data-tone=saffron]{--tone:#B04E10;--tone-bg:#FCEADB}
  .ha [data-tone=violet]{--tone:#6F45A8;--tone-bg:#EFE8F8}
  .ha [data-tone=pink]{--tone:#B3305E;--tone-bg:#FBE5EC}
  .ha [data-tone=green]{--tone:#2B7A4B;--tone-bg:#E3F2E8}
  .ha [data-tone=brass]{--tone:#8A5F1A;--tone-bg:#F8EDD6}
  .ha [data-tone=sky]{--tone:#2A69A0;--tone-bg:#E2EEF8}
  .ha [data-tone=indigo]{--tone:#4A56AC;--tone-bg:#E8EAF8}
  .ha [data-tone=slate]{--tone:#4F5D6B;--tone-bg:#E8ECEF}
  html[data-night="1"] .ha [data-tone=teal]{--tone:#6FD0DC;--tone-bg:#17353B}
  html[data-night="1"] .ha [data-tone=saffron]{--tone:#F5A468;--tone-bg:#3A2616}
  html[data-night="1"] .ha [data-tone=violet]{--tone:#C4A6F0;--tone-bg:#2B2140}
  html[data-night="1"] .ha [data-tone=pink]{--tone:#F29AB5;--tone-bg:#3B1F2A}
  html[data-night="1"] .ha [data-tone=green]{--tone:#7ED9A0;--tone-bg:#1B3326}
  html[data-night="1"] .ha [data-tone=brass]{--tone:#E8BE6A;--tone-bg:#35290F}
  html[data-night="1"] .ha [data-tone=sky]{--tone:#86BDEE;--tone-bg:#172C40}
  html[data-night="1"] .ha [data-tone=indigo]{--tone:#A3ABEE;--tone-bg:#20264A}
  html[data-night="1"] .ha [data-tone=slate]{--tone:#B4C0CB;--tone-bg:#26323D}
  @media (prefers-color-scheme:dark){
    html:not(.hub-light) .ha [data-tone=teal]{--tone:#6FD0DC;--tone-bg:#17353B}
    html:not(.hub-light) .ha [data-tone=saffron]{--tone:#F5A468;--tone-bg:#3A2616}
    html:not(.hub-light) .ha [data-tone=violet]{--tone:#C4A6F0;--tone-bg:#2B2140}
    html:not(.hub-light) .ha [data-tone=pink]{--tone:#F29AB5;--tone-bg:#3B1F2A}
    html:not(.hub-light) .ha [data-tone=green]{--tone:#7ED9A0;--tone-bg:#1B3326}
    html:not(.hub-light) .ha [data-tone=brass]{--tone:#E8BE6A;--tone-bg:#35290F}
    html:not(.hub-light) .ha [data-tone=sky]{--tone:#86BDEE;--tone-bg:#172C40}
    html:not(.hub-light) .ha [data-tone=indigo]{--tone:#A3ABEE;--tone-bg:#20264A}
    html:not(.hub-light) .ha [data-tone=slate]{--tone:#B4C0CB;--tone-bg:#26323D}
  }

  /* ---- the document is the app: nothing else shows (still in the HTML for SEO and no-JS) ---- */
  html.hub-on,html.hub-on body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--ha-bg)}
  html.hub-on body,html.hub-on.ud-on body,html.hub-on.ud-on body.rg{padding:0!important}
  html.hub-on body::before,html.hub-on body::after{display:none!important}
  html.hub-on body>*:not(.ha):not(.dk):not(.dk-scrim):not(.dk-sheet):not(.skip):not(.skip-link):not(.dpx):not(dialog):not([role=dialog]):not(script):not(style):not(link):not(noscript):not(template){display:none!important}
  html.hub-on header.sh,html.hub-on main.fp,html.hub-on .fe-hero,html.hub-on .dp,html.hub-on #draw-paint,html.hub-on footer.sf,html.hub-on nav.sh-tab{display:none!important}

  /* ---- screen: one full-height column; the dock height is reserved at the bottom ---- */
  html.hub-on .ha{
    --ha-dock:var(--dock-h,calc(80px + env(safe-area-inset-bottom,0px)));--ha-row-min:128px;--ha-row-max:236px;
    display:flex;flex-direction:column;position:fixed;inset:0;z-index:40;padding-bottom:var(--ha-dock);overflow:hidden;
    font-family:var(--ha-ui);color:var(--ha-ink);background:var(--ha-bg);-webkit-text-size-adjust:100%;text-size-adjust:100%;
  }
  .ha *{box-sizing:border-box}
  .ha-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  /* title block: kicker, the page's H1, the count line */
  .ha-hero{flex:none;padding:calc(env(safe-area-inset-top,0px) + 14px) max(20px,env(safe-area-inset-right,0px)) 0 max(20px,env(safe-area-inset-left,0px))}
  .ha-kick{display:block;margin:0 0 6px;font:700 12.5px/1 var(--ha-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ha-brass)}
  html.hub-on .ha .ha-h1{margin:0!important;padding:0!important;background:none!important;font:500 clamp(28px,8vw,36px)/1.08 var(--ha-head)!important;letter-spacing:-.018em!important;color:var(--ha-ink)!important;text-wrap:balance}
  .ha-lead{margin:6px 0 0;font:500 15px/1.4 var(--ha-ui);color:var(--ha-muted)}

  /* control bar: search + category rail */
  .ha-bar{position:relative;z-index:2;flex:none;padding:10px 0 6px;background:var(--ha-bg);transition:box-shadow .2s var(--ha-ease)}
  .ha-bar.is-stuck{box-shadow:0 1px 0 var(--ha-line),0 8px 20px rgba(22,32,44,.06)}
  html[data-night="1"] .ha-bar.is-stuck{box-shadow:0 1px 0 var(--ha-line),0 8px 20px rgba(0,0,0,.35)}
  .ha-search{position:relative;display:flex;align-items:center;margin:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));height:48px;border-radius:16px;background:var(--ha-surface);border:1px solid var(--ha-line-strong);box-shadow:var(--ha-sh1);transition:border-color .15s,box-shadow .15s}
  .ha-search:focus-within{border-color:var(--ha-acc);box-shadow:0 0 0 4px var(--ha-glow)}
  .ha-search>svg{position:absolute;left:16px;width:22px;height:22px;color:var(--ha-muted);pointer-events:none}
  .ha-search input{flex:1;min-width:0;height:100%;padding:0 52px 0 48px;border:0;border-radius:16px;background:transparent;color:var(--ha-ink);font:500 16px/1.2 var(--ha-ui);-webkit-appearance:none;appearance:none;outline:0}
  .ha-search input::placeholder{color:var(--ha-muted);opacity:1}
  .ha-search input::-webkit-search-cancel-button,.ha-search input::-webkit-search-decoration{-webkit-appearance:none;display:none}
  .ha-clear{position:absolute;right:2px;top:2px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--ha-muted);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s,transform .12s var(--ha-ease)}
  .ha-clear[hidden]{display:none}
  .ha-clear svg{width:20px;height:20px}
  .ha-clear:active{transform:scale(.92);background:var(--ha-acc-tint)}

  /* category rail: segmented track with a sliding thumb; swipes sideways, fades at both edges */
  .ha-tabs{margin-top:10px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 max(32px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));scroll-padding-inline:16px;overscroll-behavior-x:contain;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent 100%)}
  .ha-tabs::-webkit-scrollbar,.ha-sub::-webkit-scrollbar,.ha-rail::-webkit-scrollbar{display:none}
  .ha-tabs[hidden],.ha-sub[hidden]{display:none}
  .ha-seg{position:relative;display:inline-flex;gap:0;padding:4px;border-radius:999px;background:var(--ha-track);width:max-content}
  .ha-thumb{position:absolute;left:0;top:4px;bottom:4px;width:0;border-radius:999px;background:var(--ha-acc);box-shadow:0 2px 8px rgba(20,92,99,.28);transform:translateX(0);transition:transform .28s var(--ha-ease),width .28s var(--ha-ease)}
  .ha-seg.no-anim .ha-thumb{transition:none}
  .ha-tab{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--ha-muted);font:600 15px/1 var(--ha-ui);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:color .2s}
  .ha-tab svg{width:20px;height:20px;flex:none}
  .ha-tab[aria-selected=true]{color:var(--ha-acc-ink)}
  .ha-tab:active{opacity:.7}

  /* printables sub-groups */
  .ha-sub{display:flex;gap:8px;margin-top:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px max(32px,env(safe-area-inset-right,0px)) 2px max(16px,env(safe-area-inset-left,0px));scroll-padding-inline:16px;overscroll-behavior-x:contain;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent 100%)}
  .ha-chip{flex:none;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 12px;border-radius:999px;background:var(--ha-surface);border:1px solid var(--ha-line);color:var(--ha-ink);font:600 15px/1 var(--ha-ui);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background .15s,border-color .15s,color .15s,transform .12s var(--ha-ease)}
  .ha-chip svg{width:20px;height:20px;color:var(--tone)}
  .ha-chip:active{transform:scale(.96)}
  .ha-chip[aria-selected=true]{background:var(--ha-acc-tint);border-color:var(--ha-acc-edge);color:var(--ha-acc)}

  /* focus ring (design system): orange, keyboard only */
  .ha button:focus-visible,.ha a:focus-visible{outline:3px solid var(--ha-focus);outline-offset:2px}
  .ha button:focus:not(:focus-visible),.ha a:focus:not(:focus-visible){outline:0}

  /* body: takes all the room left; the carousel fills it, search results scroll inside it */
  .ha-body{flex:1 1 0;min-height:0;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .ha-panel:not([hidden]){flex:1 0 auto;display:flex;flex-direction:column;padding:6px 0 4px}
  .ha-results:not([hidden]){flex:none;padding:8px 0 24px}
  .ha-head{flex:none;display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 max(20px,env(safe-area-inset-right,0px)) 8px max(20px,env(safe-area-inset-left,0px))}
  .ha-head h2{margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:500 22px/1.15 var(--ha-head);letter-spacing:-.01em;color:var(--ha-ink)}
  .ha-count{flex:none;font:500 14px/1.2 var(--ha-ui);color:var(--ha-muted);font-variant-numeric:tabular-nums}

  /* two-row carousel with snap; the rows share the height that is left, between a floor and a cap */
  .ha-rail{flex:1 1 0;min-height:calc(var(--ha-row-min)*2 + 22px);max-height:calc(var(--ha-row-max)*2 + 22px);display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,minmax(var(--ha-row-min),1fr));grid-auto-columns:min(78vw,288px);gap:12px;margin:0;padding:2px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px));list-style:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .ha-li{margin:0;padding:0;min-width:0;min-height:0;scroll-snap-align:start;display:flex;container-type:size;container-name:hc}
  .ha-card{position:relative;flex:1;display:flex;flex-direction:column;gap:0;min-width:0;padding:12px;border-radius:22px;background:var(--ha-surface);border:1px solid var(--ha-line);box-shadow:var(--ha-sh1);color:var(--ha-ink);text-decoration:none;overflow:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .14s var(--ha-ease),box-shadow .2s var(--ha-ease),border-color .2s,background-color .2s}
  .ha-card::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--tone);opacity:.55}
  .ha-card:active{transform:scale(.975);box-shadow:var(--ha-sh1);background:var(--ha-acc-tint)}
  @media (hover:hover){.ha-card:hover{box-shadow:var(--ha-sh2);transform:translateY(-2px)}}
  .ha-top{flex:1 0 auto;display:flex;align-items:flex-start;justify-content:space-between;padding-bottom:6px}
  .ha-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--tone-bg);color:var(--tone)}
  .ha-ico svg{width:21px;height:21px}
  .ha-go{display:grid;place-items:center;width:32px;height:32px;margin:-2px -4px 0 0;border-radius:50%;color:var(--ha-muted);transition:transform .2s var(--ha-ease),color .2s,background-color .2s}
  .ha-go svg{width:18px;height:18px}
  .ha-card:active .ha-go{transform:translateX(3px);color:var(--ha-acc)}
  .ha-t{flex:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font:600 17px/1.2 var(--ha-head);letter-spacing:-.005em;color:var(--ha-ink)}
  .ha-d{flex:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden;margin-top:4px;font:400 13.5px/1.4 var(--ha-ui);color:var(--ha-muted)}
  /* the card decides what it can afford from the height it was given (rows flex with the screen) */
  @container hc (min-height:150px){
    .ha-card{padding:14px}.ha-ico{width:42px;height:42px;border-radius:14px}.ha-ico svg{width:24px;height:24px}.ha-t{font-size:18px}.ha-d{font-size:14px}
  }
  @container hc (min-height:164px){
    .ha-d{-webkit-line-clamp:2;line-clamp:2}
  }
  @container hc (min-height:186px){
    .ha-ico{width:46px;height:46px}.ha-t{font-size:19px}.ha-d{margin-top:6px}
  }
  @container hc (min-height:212px){
    .ha-card{padding:18px}.ha-ico{width:52px;height:52px;border-radius:16px}.ha-ico svg{width:28px;height:28px}.ha-t{font-size:20px}.ha-d{-webkit-line-clamp:3;line-clamp:3}
  }
  .ha-prog{flex:none;position:relative;height:4px;margin:4px max(20px,env(safe-area-inset-right,0px)) 6px max(20px,env(safe-area-inset-left,0px));border-radius:2px;background:var(--ha-line)}
  .ha-prog i{position:absolute;left:0;top:0;bottom:0;width:30%;border-radius:2px;background:var(--ha-acc);opacity:.75;will-change:transform}

  /* search results: one-hand list of cards */
  .ha-res{display:grid;gap:8px;margin:0;padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));list-style:none}
  .ha-row{display:flex;align-items:center;gap:12px;min-height:72px;padding:12px 8px 12px 12px;border-radius:20px;background:var(--ha-surface);border:1px solid var(--ha-line);box-shadow:var(--ha-sh1);color:var(--ha-ink);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .14s var(--ha-ease),background-color .2s}
  .ha-row:active{transform:scale(.985);background:var(--ha-acc-tint)}
  .ha-row .ha-ico{flex:none;width:44px;height:44px;border-radius:14px}
  .ha-row .ha-ico svg{width:24px;height:24px}
  .ha-rt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .ha-rt b{font:500 17px/1.2 var(--ha-head);color:var(--ha-ink);font-weight:500}
  .ha-rt span{font:400 14px/1.3 var(--ha-ui);color:var(--ha-muted)}
  .ha-status{margin:0 max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));font:500 14px/1.3 var(--ha-ui);color:var(--ha-muted)}
  .ha-empty{margin:24px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));padding:32px 24px;border-radius:22px;background:var(--ha-surface);border:1px dashed var(--ha-line-strong);text-align:center}
  .ha-empty b{display:block;font:500 20px/1.2 var(--ha-head);margin-bottom:8px}
  .ha-empty p{margin:0 0 16px;font:400 15px/1.5 var(--ha-ui);color:var(--ha-muted)}
  .ha-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 24px;border:0;border-radius:999px;background:var(--ha-acc);color:var(--ha-acc-ink);font:600 15px/1 var(--ha-ui);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--ha-ease)}
  .ha-btn:active{transform:scale(.96)}

  /* entrance: cards rise in on a category swap (transform + opacity only) */
  @keyframes ha-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .ha-panel.ha-in .ha-li{animation:ha-rise .28s var(--ha-ease) both;animation-delay:calc(min(var(--i,0),7) * 28ms)}
  .ha-results.ha-in .ha-res li{animation:ha-rise .22s var(--ha-ease) both;animation-delay:calc(min(var(--i,0),8) * 18ms)}
}
/* very short viewports (small phones with the browser bars out): lose the count line, tighten the title block */
@media (max-width:699px) and (max-height:640px){
  .ha-lead{display:none}
  .ha-hero{padding-top:calc(env(safe-area-inset-top,0px) + 10px)}
  .ha-kick{margin-bottom:4px}
  .ha-head{margin-bottom:6px}
}
@media (max-width:699px) and (prefers-reduced-motion:reduce){
  .ha *,.ha *::before,.ha *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}