/* An app's page on the dixith.com hub (dixith.com/labs/<id>/). Built on tokens.css and hub.css.
 * The pages are written by dixith-hub/make-pages.mjs; change CSS_V there (and ?v= in index.html)
 * whenever this file or hub.css changes, because browsers keep both for a week.
 */
.app-hero { display: flex; align-items: center; gap: 22px; padding: 44px 0 0; }
.app-hero-icon { width: 96px; height: 96px; border-radius: 23px; flex-shrink: 0; box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--accent) 45%, rgba(20,22,30,.35)); }
.app-hero h1 { margin: 0; font-size: clamp(38px, 7vw, 58px); }
.app-hero .kind { margin: 6px 0 0; font-size: 16px; font-weight: 600; color: var(--accent-ink); }
.app-lede { margin: 20px 0 0; max-width: 38em; }

/* what to do with it */
.get { margin: 26px 0 0; }
.get-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.get-acts .btn svg { width: 18px; height: 18px; }
.get-note { margin: 14px 0 0; max-width: 40em; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.get-note b { color: var(--ink); font-weight: 600; }
.get-phone { display: flex; align-items: center; gap: 20px; margin: 20px 0 0; padding: 18px; max-width: 560px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
.get-phone .qr { flex: none; width: 132px; height: 132px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.get-phone h2 { margin: 0 0 4px; font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.2; }
.get-phone p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.get-phone p.quiet { margin-top: 8px; font-size: 14px; }
/* A public app leads with what the visitor's device can use. With no script (no data-device) it shows Google Play and the web, as an Android phone does. */
.is-public .for-ios, .is-public .for-computer { display: none; }
.is-public[data-device="ios"] .for-ios { display: block; }
.is-public[data-device="computer"] .for-computer { display: flex; }
/* What a browser cannot do is said to those who will use the web: not to an Android visitor being led to Google Play. */
.is-public .get-web-note { display: none; }
.is-public[data-device="ios"] .get-web-note, .is-public[data-device="computer"] .get-web-note { display: block; }
.is-public[data-device="ios"] .get-play, .is-public[data-device="computer"] .get-play,
.is-public[data-device="ios"] .for-android, .is-public[data-device="computer"] .for-android { display: none; }
.is-public[data-device="ios"] .btn.get-web, .is-public[data-device="computer"] .btn.get-web { color: #fff; background: linear-gradient(145deg, var(--accent-2), var(--accent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 10px color-mix(in srgb, var(--accent) 30%, transparent); }
:root[data-theme="dark"].is-public[data-device="ios"] .btn.get-web, :root.auto-dark.is-public[data-device="ios"] .btn.get-web,
:root[data-theme="dark"].is-public[data-device="computer"] .btn.get-web, :root.auto-dark.is-public[data-device="computer"] .btn.get-web { color: var(--on-accent); }

/* screenshots: a row that scrolls sideways inside itself, never the page */
.shots { display: flex; gap: 16px; margin: 0 -20px; padding: 6px 20px 18px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.shots img { flex: none; width: 230px; height: auto; aspect-ratio: 9 / 16; border-radius: 22px; scroll-snap-align: center; background: var(--bg-2); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line); }
.shots:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }

/* what it does */
.parts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.part { padding: 22px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
.part h3 { margin: 0 0 10px; font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.2; letter-spacing: -.01em; }
.part ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.part li { position: relative; padding-left: 18px; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.part li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-line); }
.yours { margin: 22px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.yours a { font-weight: 600; }

/* the other apps */
.others { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.other { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px; border-radius: 18px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); transition: transform .14s var(--ease); }
.other:hover { text-decoration: none; background-image: linear-gradient(var(--hover), var(--hover)); }
.other:active { transform: scale(.985); }
.other img { flex: none; width: 44px; height: 44px; border-radius: 11px; }
.other b { display: block; font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.25; }
.other small { display: block; color: var(--ink-2); font-size: 13.5px; line-height: 1.35; }
footer p a { color: var(--ink); }

@media (max-width: 760px) { .parts { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .app-hero { gap: 16px; padding-top: 28px; }
  .app-hero-icon { width: 76px; height: 76px; border-radius: 18px; }
  .shots { margin: 0 -16px; padding: 6px 16px 16px; gap: 12px; }
  .shots img { width: 200px; border-radius: 18px; }
  .get-acts .btn { flex: 1 1 100%; }
  .get-phone { flex-direction: column; align-items: flex-start; }
  .part { padding: 18px; }
  .top nav a.hide-s { display: none; }
}