/* Sanity App Hub on /get-the-app.html — same card language as css/app-library.css.
   Picture behind readable text, whole card one link, favourite star beside it.
   House palette: #000103 #0d1b2a #00fff0 #eef6ff, one pink accent #ff4d8d. */
.hub { margin-top: 2rem; }
.hub h2 { font-size: 1.5rem; margin: 0 0 0.4rem; color: #eef6ff; }
.hub-lede { color: #dff; line-height: 1.6; margin: 0 0 1rem; }
.hub-h { margin: 1.5rem 0 0.6rem; font-size: 1.1rem; color: #eef6ff; }

/* Featured / recent / fresh: one swipeable row that snaps inside its own box. */
.hub-row { list-style: none; margin: 0; padding: 0 0 8px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 78%); gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
@media (min-width: 720px) { .hub-row { grid-auto-columns: minmax(260px, 32%); } }
.hub-row > li { scroll-snap-align: start; }

.hub-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .hub-grid { grid-template-columns: 1fr 1fr; } }

.hub-item { position: relative; margin: 0; }
.hub-card { position: relative; display: flex; align-items: flex-end; min-height: 190px; height: 100%; overflow: hidden; isolation: isolate; border-radius: 18px; border: 1px solid rgba(0, 255, 240, 0.35); background: #000103; color: #eef6ff; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.hub-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.78; z-index: 0; }
.hub-card img.hub-image-fallback { object-fit: contain; padding: 1.5rem; box-sizing: border-box; background: #0d1b2a; }
.hub-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 1, 3, 0.05) 0%, rgba(0, 1, 3, 0.72) 42%, rgba(0, 1, 3, 0.94) 100%); }
.hub-text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 5px; padding: 2.6rem 1rem 1rem; text-shadow: 0 1px 3px #000103; }
.hub-text strong { font-size: 1.08rem; padding-right: 48px; }
.hub-blurb { color: #dff; line-height: 1.5; font-size: 0.95rem; }
.hub-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.hub-tag, .hub-age { padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
.hub-tag { color: #000103; background: #00fff0; text-shadow: none; }
.hub-tag.hub-own { color: #eef6ff; background: transparent; border: 1px solid #ff4d8d; }
.hub-age { color: #eef6ff; border: 1px solid rgba(238, 246, 255, 0.45); background: rgba(0, 1, 3, 0.55); }
.hub-a11y { color: #cfe; font-size: 0.82rem; line-height: 1.4; }
.hub-card:hover, .hub-card:focus-visible { border-color: #00fff0; box-shadow: 0 0 22px rgba(0, 255, 240, 0.35); }
.hub-card:focus-visible { outline: 3px solid #00fff0; outline-offset: 3px; }
.hub-card:active { transform: scale(0.98); }

.hub-fav { position: absolute; top: 8px; right: 8px; z-index: 3; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(0, 255, 240, 0.5); background: rgba(0, 1, 3, 0.72); color: #ffd36b; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.hub-fav[aria-pressed="true"] { border-color: #ffd36b; }
.hub-fav:focus-visible { outline: 3px solid #00fff0; outline-offset: 2px; }

.hub-tools { display: grid; gap: 10px; margin-bottom: 12px; }
.hub-search-label { font-weight: 700; color: #eef6ff; }
.hub-search { box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(0, 255, 240, 0.5); background: rgba(0, 1, 3, 0.75); color: #eef6ff; font: inherit; font-size: 1rem; }
.hub-search:focus-visible { outline: 3px solid #00fff0; outline-offset: 2px; }
.hub-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.hub-chip { min-height: 48px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(0, 255, 240, 0.4); background: rgba(0, 1, 3, 0.6); color: #eef6ff; font: inherit; font-size: 0.92rem; cursor: pointer; }
.hub-chip[aria-pressed="true"] { background: #00fff0; color: #000103; font-weight: 700; border-color: #00fff0; }
.hub-chip:focus-visible { outline: 3px solid #00fff0; outline-offset: 2px; }
.hub-count { margin: 0; color: #cfe; font-size: 0.9rem; }
.hub-empty { padding: 1.2rem; border-radius: 16px; border: 1px dashed rgba(0, 255, 240, 0.4); color: #dff; background: rgba(0, 1, 3, 0.6); }

@media (prefers-reduced-motion: reduce) {
  .hub-card { transition: none; }
  .hub-card:active { transform: none; }
  .hub-row { scroll-behavior: auto; }
}

.hub-welcome { position:relative; isolation:isolate; overflow:hidden; border:1px solid rgba(0,255,240,.35); border-radius:24px; background:#0d1b2a; margin:1.4rem 0; }
.hub-welcome > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.hub-welcome::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(0,1,3,.93),rgba(0,1,3,.65) 65%,rgba(0,1,3,.2)); }
.hub-welcome-copy { padding:clamp(1.4rem,5vw,3rem); max-width:37rem; color:#eef6ff; }
.hub-welcome h1 { font-size:clamp(2rem,6vw,3.3rem); line-height:1.12; margin:.6rem 0; }
.hub-eyebrow { font-size:.78rem; font-weight:800; letter-spacing:.12em; color:#a9fff4; }
.hub-welcome .btn { min-height:48px; display:inline-flex; align-items:center; margin-top:.6rem; background:#000b16; }
@media(max-width:560px) { .hub-welcome::before { background:linear-gradient(180deg,rgba(0,1,3,.35),rgba(0,1,3,.95) 60%); } .hub-welcome-copy { padding-top:7rem; } }

.hub-extra { border-block: 1px solid rgba(0,255,240,.25); margin: 1rem 0; padding: .25rem 0; }
.hub-extra > summary { min-height: 48px; padding: .75rem .25rem; box-sizing: border-box; cursor: pointer; color: #dff; font-weight: 700; }
.hub-extra > summary:focus-visible { outline: 3px solid #00fff0; outline-offset: 3px; }
#hub-browse { scroll-margin-top: 2rem; }
.hub-card { overflow-wrap: anywhere; }

html[data-theme="light"] { --room-bg:#f4f8fb; --room-card:#fff; --room-ink:#173247; --room-accent:#005f69; }
html[data-theme="light"] :is(.hub h2,.hub-h,.hub-search-label,.hub-extra > summary) { color:#173247; }
html[data-theme="light"] :is(.hub-lede,.hub-count,.wrap > .lede,.note) { color:#36505d; }
html[data-theme="light"] .wrap .card { background:#fff; }
html[data-theme="light"] .wrap .btn.solid { color:#fff; }
html[data-theme="light"] .hub-welcome .btn { color:#eef6ff; }

/* Install guidance stays in page flow; no blocking banner or new tracking. */
.hub-install h2 { color: inherit; font-size: 1.35rem; }
.hub-install h3 { color: inherit; font-size: 1.05rem; }
.hub-install li { margin-block: .6rem; line-height: 1.6; }
.hub-install [data-install-status]:empty { display: none; }
.hub-install [data-install-status]:focus { outline: 3px solid #00fff0; outline-offset: 3px; }
.hub-install .btn[hidden] { display: none; }
.hub-install .btn:disabled { opacity: .7; cursor: wait; }
.card.hub-extra { padding: 1rem; }

/* ===== App Store listing on /app.html — additive, does not touch hub rules =====
   Palette locked: #000103 / #0d1b2a backgrounds, #00fff0 cyan accent,
   #eef6ff headings, #c9e9ef body, #a9c7d1 muted, crisis orange. No purple. */
.store { max-width: 1180px; margin: 0 auto; padding: 0 1rem 2rem; }
.store-hero { position: relative; isolation: isolate; overflow: hidden; border-radius: 22px; border: 1px solid rgba(0,255,240,.35); background: #0d1b2a; margin: 1.2rem 0 1rem; }
.store-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; z-index: -2; }
.store-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, rgba(0,1,3,.94) 0%, rgba(13,27,42,.82) 45%, rgba(0,1,3,.55) 100%); }
.store-hero-copy { padding: clamp(1.4rem, 5vw, 2.6rem); max-width: 42rem; color: #eef6ff; text-shadow: 0 1px 4px #000103; }
.store-eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .14em; color: #00fff0; margin: 0 0 .4rem; }
.store-hero h1 { font-size: clamp(1.9rem, 6vw, 3rem); line-height: 1.1; margin: .2rem 0 .6rem; color: #eef6ff; }
.store-hero p { color: #c9e9ef; line-height: 1.6; margin: 0 0 1rem; max-width: 34rem; }
.store-install-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.store-install-btn { min-height: 48px; padding: 0 1.4rem; border-radius: 999px; border: 1px solid #00fff0; background: #00fff0; color: #000103; font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer; text-shadow: none; }
.store-install-btn[hidden] { display: none; }
.store-install-btn:focus-visible { outline: 3px solid #00fff0; outline-offset: 3px; }
.store-install-btn:disabled { opacity: .7; cursor: wait; }
.store-manual { flex-basis: 100%; margin-top: .4rem; padding: .9rem 1rem; border-radius: 14px; border: 1px solid rgba(0,255,240,.3); background: rgba(0,1,3,.6); color: #c9e9ef; font-size: .92rem; line-height: 1.6; }
.store-manual[hidden] { display: none; }
.store-manual a { color: #00fff0; }
.store-manual ol { margin: .4rem 0 0; padding-left: 1.2rem; }
.store-manual li { margin: .25rem 0; }
.store-status { flex-basis: 100%; margin: 0; color: #a9c7d1; font-size: .88rem; min-height: 1.2em; }

/* Crisis strip — always visible, orange accent */
.crisis-strip { margin: 1rem 0 0; padding: .9rem 1rem; border-radius: 16px; border: 1px solid rgba(255,140,66,.55); background: linear-gradient(90deg, rgba(255,108,30,.16), rgba(13,27,42,.85)); color: #ffe9d6; font-size: .95rem; line-height: 1.6; }
.crisis-strip strong { color: #ffb27a; font-weight: 800; }
.crisis-strip a { color: #ffd3a8; font-weight: 700; text-decoration: underline; }
.crisis-nums { display: block; margin-top: .3rem; font-weight: 700; color: #fff; letter-spacing: .02em; }

/* Search + filter tools */
.store-tools { margin: 1.4rem 0 1rem; display: grid; gap: .8rem; }
.store-search-label { font-weight: 700; color: #eef6ff; font-size: .95rem; }
.store-search { box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(0,255,240,.5); background: rgba(0,1,3,.75); color: #eef6ff; font: inherit; font-size: 1rem; }
.store-search:focus-visible { outline: 3px solid #00fff0; outline-offset: 2px; }
.store-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.store-chip { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(0,255,240,.4); background: rgba(0,1,3,.6); color: #eef6ff; font: inherit; font-size: .9rem; cursor: pointer; }
.store-chip[aria-pressed="true"] { background: #00fff0; color: #000103; font-weight: 800; border-color: #00fff0; }
.store-chip:focus-visible { outline: 3px solid #00fff0; outline-offset: 2px; }
.store-count { margin: 0; color: #a9c7d1; font-size: .9rem; }

/* Sections + grid */
.store-section { margin: 1.8rem 0 0; }
.store-section[hidden] { display: none; }
.store-section h2 { font-size: 1.35rem; color: #eef6ff; margin: 0 0 .8rem; padding-bottom: .4rem; border-bottom: 1px solid rgba(0,255,240,.25); }
.store-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .store-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .store-grid { grid-template-columns: repeat(3, 1fr); } }

/* App card: bg image + dark gradient overlay + readable text + Open button */
.store-card { position: relative; display: flex; align-items: flex-end; min-height: 210px; height: 100%; overflow: hidden; isolation: isolate; border-radius: 19px; border: 1px solid rgba(0,255,240,.35); background: #000103; }
.store-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .78; z-index: 0; }
.store-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,1,3,.08) 0%, rgba(0,1,3,.55) 40%, rgba(0,1,3,.94) 100%); }
.store-card-body { position: relative; z-index: 2; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 2.4rem .95rem .95rem; text-shadow: 0 1px 3px #000103; }
.store-card-name { margin: 0; font-size: 1.08rem; color: #eef6ff; padding-right: 8px; }
.store-card-blurb { margin: 0; color: #c9e9ef; line-height: 1.5; font-size: .92rem; }
.store-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.store-tag { padding: 2px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; color: #000103; background: #00fff0; text-shadow: none; }
.store-tag.store-own { color: #eef6ff; background: transparent; border: 1px solid rgba(0,255,240,.6); }
.store-tag.store-beta { color: #ffd3a8; background: transparent; border: 1px solid rgba(255,140,66,.6); }
.store-open { align-self: flex-start; margin-top: 4px; min-height: 40px; padding: 0 1.1rem; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid #00fff0; background: rgba(0,255,240,.14); color: #eef6ff; font-weight: 800; font-size: .92rem; text-decoration: none; text-shadow: none; }
.store-open:hover, .store-open:focus-visible { background: #00fff0; color: #000103; }
.store-open:focus-visible { outline: 3px solid #00fff0; outline-offset: 2px; }
.store-card:hover { border-color: #00fff0; box-shadow: 0 0 22px rgba(0,255,240,.28); }
.store-empty { margin: 1.4rem 0; padding: 1.2rem; border-radius: 16px; border: 1px dashed rgba(0,255,240,.4); color: #c9e9ef; background: rgba(0,1,3,.6); }
.store-empty[hidden] { display: none; }
.store-note { color: #a9c7d1; font-size: .85rem; line-height: 1.6; margin: 1.4rem 0 0; }
.store-note a { color: #00fff0; }
@media (prefers-reduced-motion: reduce) { .store-card, .store-open { transition: none; } }