/* Bridge's fonts, served from this site (no third party sees who visits). SIL Open Font License 1.1: /assets/fonts/LICENSES.md */
@font-face { font-family: Geist; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/geist.woff2') format('woff2'); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/geist-mono.woff2') format('woff2'); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/chakra-petch.woff2') format('woff2'); }
/* Website layout only. Every colour, radius, shadow, blur, size and font comes from Bridge UI Rules
   (assets/ui/tokens.css and bundle.css, copied from bridge-platform/kit/ui-rules). Nothing here adds a new one. */
body { margin: 0; }
a { color: inherit; text-decoration: none; }
.site-wall { min-height: 100vh; padding: var(--br-space-4); display: flex; flex-direction: column; gap: var(--br-space-4); font-family: var(--br-font-ui); color: var(--br-text-primary); }
.site-bar { flex: none; position: sticky; top: var(--br-space-4); z-index: 5; }
.site { width: 100%; max-width: 1408px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; gap: var(--br-space-4); }
.site-foot { display: flex; align-items: center; gap: var(--br-space-3); flex-wrap: wrap; padding: var(--br-space-2) var(--br-space-3) var(--br-space-1); }
.site-foot > .caption { flex: 1; }

/* Hero: straight on the wallpaper, like Games' hero */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--br-space-2); padding: 72px var(--br-space-4) var(--br-space-5); }
.hero .g-title { max-width: 900px; }
.hero .g-actions, .center-panel .g-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); justify-content: center; }
.hero .g-actions > .b-btn, .center-panel .g-actions > .b-btn { justify-content: center; padding: 0 var(--br-space-5); }
.lede { margin: var(--br-space-2) 0 var(--br-space-4); max-width: 640px; font-size: 16px; line-height: 24px; }
.hero-shot { padding: var(--br-space-3); }

/* Panels: the same insets as the app's pages */
.b-panel { padding: var(--br-space-4) var(--br-space-4) var(--br-space-5); gap: var(--br-space-4); }
.panel-head { display: flex; flex-direction: column; gap: var(--br-space-1); padding: var(--br-space-2) var(--br-space-3) var(--br-space-1); }
.panel-head.row { flex-direction: row; align-items: center; gap: var(--br-space-3); flex-wrap: wrap; }
.panel-body, .panel-label { margin: 0 var(--br-space-3); }
.panel-label { display: block; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--br-space-4); }
.grid2.split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.grid2.top { align-items: start; }
.b-panel > .grid2.split { margin: 0 var(--br-space-3); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--br-space-4); }
.b-panel > .grid3 { margin: 0 var(--br-space-3); }
.stack { display: flex; flex-direction: column; gap: var(--br-space-4); }
.phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--br-space-3); align-items: start; }

/* Pictures */
.shot-frame { overflow: hidden; border: 1px solid var(--br-glass-edge); }
.shot { width: 100%; height: 100%; display: block; }
figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
figcaption { padding: 0 var(--br-space-1); }

/* Package icons: the app icon pictures, at the Store's icon sizes */
.pkg-img { flex: none; display: block; width: 48px; height: 48px; border-radius: 12px; }
.pkg-img.sm { width: 36px; height: 36px; border-radius: 10px; }
.pkg-img.xl { width: 72px; height: 72px; border-radius: var(--br-shape-radius); }
.strip { display: flex; flex-wrap: wrap; gap: var(--br-space-2); flex: 1; align-content: flex-start; }

/* Store */
.b-store-card .open { display: flex; flex-direction: column; gap: var(--br-space-3); color: inherit; text-decoration: none; }
.b-store-card.featured .open { flex-direction: row; align-items: center; gap: var(--br-space-5); flex: 1; min-width: 0; }
.b-store-card .open .head { display: flex; align-items: center; gap: var(--br-space-3); min-width: 0; }
.b-store-card .open .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search { width: 260px; max-width: 100%; }
.b-btn.wide { min-width: 160px; }
.app-head { display: flex; align-items: center; gap: var(--br-space-4); flex-wrap: wrap; }
.app-title { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.badges { display: flex; align-items: center; gap: var(--br-space-2); flex-wrap: wrap; }
.desc-long { margin: 0; }
[hidden] { display: none !important; }

/* Rows that wrap to more than one line */
.b-item.tall { height: auto; min-height: 36px; padding: var(--br-space-2); align-items: flex-start; }
.b-item.tall b, .two-line b { font-weight: 600; }
.two-line { display: flex; flex-direction: column; gap: 2px; }
.b-perms .b-item { height: 36px; padding: 0 var(--br-space-2); }
.b-perms .b-item.tall { height: auto; padding: var(--br-space-2); }

/* Kit */
.code-box { border: 1px solid var(--br-glass-edge); }
.kit-code { margin: 0; padding: var(--br-space-4); white-space: pre; overflow-x: auto; font: 500 13px/20px var(--br-font-mono); color: var(--br-text-primary); }
.center-panel { padding: var(--br-space-5); align-items: center; text-align: center; }
.center-panel > .b-muted { max-width: 560px; }

/* Phone */
@media (max-width: 760px) {
  .grid2, .grid2.split, .grid3 { grid-template-columns: minmax(0, 1fr); }
  .b-store-card.featured, .b-store-card.featured .open { flex-direction: column; align-items: flex-start; }
  .b-store-card.featured > .b-btn { align-self: stretch; }
  .g-title { font-size: 40px; }
  .hero { padding-top: 40px; }
  .site-bar .b-logo span { display: none; }
  .search { width: 100%; }
}

/* The real site */
.site-wall { background: radial-gradient(70% 90% at 12% 18%, rgba(139, 109, 255, 0.50), transparent 65%), radial-gradient(60% 80% at 88% 82%, rgba(106, 69, 232, 0.70), transparent 65%), radial-gradient(35% 45% at 62% 22%, rgba(255, 160, 110, 0.26), transparent 70%), radial-gradient(50% 60% at 40% 95%, rgba(20, 90, 140, 0.45), transparent 70%), #0b0e16; background-attachment: fixed; }
h1.heading { margin: 0; }
.b-btn[aria-disabled="true"] { opacity: 0.55; cursor: default; pointer-events: none; }
.center-panel .g-actions { margin-top: var(--br-space-2); }

/* Fixes: the footer sits at the bottom on short pages; values in rows line up right; panels for pictures */
.site-foot { margin-top: auto; }
.b-item > .end { text-align: right; }
.phone-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--br-space-4); align-items: center; }
.phone-text { display: flex; flex-direction: column; gap: var(--br-space-4); align-items: flex-start; }
.phone-panel .phones { margin-right: var(--br-space-3); }
.phone-panel .phones { width: 100%; max-width: 520px; justify-self: end; }
@media (max-width: 760px) {
  .phone-panel { grid-template-columns: minmax(0, 1fr); }
  .phone-panel .phones { margin: 0 var(--br-space-3); }
  #download .panel-head.row > .b-btn { width: 100%; }
  .phone-panel .phones { max-width: none; justify-self: stretch; }
  .site-bar .bar-label { display: none; }
  .site-bar .right .b-btn { padding-left: var(--br-space-3); padding-right: var(--br-space-3); }
  .site-bar { padding: 0; }
  .site-bar .b-tabs { gap: 0; }
  .site-bar .b-tabs .b-tab { padding-left: var(--br-space-3); padding-right: var(--br-space-3); }
  .site-foot > .caption { flex-basis: 100%; }
}

/* Store sections by purpose */
.store-group { display: flex; align-items: baseline; gap: var(--br-space-2); flex-wrap: wrap; }
/* Works with: a whole row is the link */
a.b-item.works { color: inherit; text-decoration: none; }
a.b-item.works > svg:last-child { margin-left: auto; }
/* Package pictures open full screen */
[data-viewer] img.shot { cursor: zoom-in; }
dialog.viewer { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100dvh; display: none; place-items: center; }
dialog.viewer[open] { display: grid; animation: viewer-in var(--br-motion-panel) var(--br-motion-ease-enter); }
dialog.viewer::backdrop { background: var(--br-surface-scrim); }
.viewer-box { width: min(1280px, calc(100vw - 2 * var(--br-space-5))); max-height: calc(100dvh - 2 * var(--br-space-5)); }
.viewer-box > img { width: 100%; min-height: 0; flex: 1; object-fit: contain; border-radius: var(--br-shape-radius); }
.viewer-top { display: flex; align-items: center; justify-content: space-between; gap: var(--br-space-2); }
.viewer-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--br-space-2); }
.viewer-nav[hidden], .viewer-nav > [hidden] { display: none; }
@keyframes viewer-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.viewer[open] { animation: none; } }
/* Apps and Add-ons: one grid each, every card the same size (4 across; 2 on mid widths; 1 on phones). */
.grid3.group-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid3.group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid3.group-grid { grid-template-columns: minmax(0, 1fr); } }
/* Apps header: title on the left, the All / Apps / Add-ons switch in the centre, search on the right */
.store > .panel-head.row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--br-space-3); }
.store > .panel-head.row > .search { justify-self: end; }
.store > .panel-head.row > .b-seg { grid-auto-columns: 96px; }
@media (max-width: 760px) {
  .store > .panel-head.row { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .store > .panel-head.row > .b-seg { grid-auto-columns: 1fr; }
}

/* Hover lights the whole card, not the link inside it: the card's link covers the card, its own edge is off, and the
   card shows the highlight edge. The Download button sits above and keeps its own hover. */
.b-store-card:has(> .open) { position: relative; transition: box-shadow var(--br-motion-move) var(--br-motion-ease-standard); }
.b-store-card > .open::after { content: ""; position: absolute; inset: 0; border-radius: var(--br-shape-radius); }
.b-store-card > .open:is(:hover, :focus-visible) { box-shadow: none; }
.b-store-card:has(> .open:hover), .b-store-card:has(> .open:focus-visible) { box-shadow: var(--br-highlight-edge); }
.b-store-card > .b-btn { position: relative; z-index: 1; }
.b-store-card:has(> .b-btn:hover) { box-shadow: none; }
/* Docs: the article, with the docs list beside it (below it on phones) */
.docs-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--br-space-4); align-items: start; }
.docs-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--br-space-4); max-height: calc(100dvh - 2 * var(--br-space-4)); overflow: auto; }
.docs-nav > .b-label { margin: var(--br-space-3) var(--br-space-2) var(--br-space-1); }
.docs-nav > .b-label:first-child { margin-top: 0; }
.docs-nav > a.b-item { color: inherit; text-decoration: none; }
.doc { min-width: 0; }
.doc-head { display: flex; align-items: center; gap: var(--br-space-3); flex-wrap: wrap; }
.doc-head > .title { margin: 0; flex: 1; min-width: 0; }
.doc .lede { margin-bottom: 0; }
.doc-body { max-width: 720px; line-height: 1.6; }
.doc-body h2 { margin: var(--br-space-5) 0 var(--br-space-2); scroll-margin-top: var(--br-space-5); }
.doc-body h3 { margin: var(--br-space-4) 0 var(--br-space-1); }
.doc-body p, .doc-body ul, .doc-body ol { margin: 0 0 var(--br-space-3); }
.doc-body ul, .doc-body ol { padding-left: var(--br-space-5); }
.doc-body li + li { margin-top: var(--br-space-1); }
.doc-body a, .about-links a, .center-panel a:not(.b-btn) { color: var(--br-accent-primary); }
.doc-body .b-kbd { vertical-align: baseline; }
.doc-table { margin: 0 0 var(--br-space-3); padding: var(--br-space-2) var(--br-space-3); border-radius: var(--br-shape-radius); overflow-x: auto; }
.doc-table table { width: 100%; border-collapse: collapse; }
.doc-table th { text-align: left; padding: var(--br-space-2) var(--br-space-3) var(--br-space-2) 0; }
.doc-table td { padding: var(--br-space-2) var(--br-space-3) var(--br-space-2) 0; vertical-align: top; }
.doc-table tr + tr td { border-top: 1px solid var(--br-glass-edge); }
/* About: every package, with its guide and its page */
.about-list { display: flex; flex-direction: column; gap: var(--br-space-2); }
.about-list > .b-label { margin-top: var(--br-space-3); }
.about-list > .b-label:first-child { margin-top: 0; }
.about-pkg { align-items: flex-start; }
.about-pkg .two-line { gap: var(--br-space-1); }
.about-links { display: flex; gap: var(--br-space-4); }
.about-three > .b-item { align-items: flex-start; }
@media (max-width: 960px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); }
  .docs-nav { position: static; max-height: none; }
}

/* Phones: the top bar keeps Apps, Themes and Docs; Kit and About stay in the footer (the current one still shows) */
@media (max-width: 600px) { .b-tabs > .bar-extra:not(.is-selected) { display: none; } }
@media (max-width: 600px) { .hero .g-actions, .center-panel .g-actions { grid-auto-flow: row; width: 100%; } }
/* Kit: panels side by side are the same height; the code box fills its panel */
.grid2.kit-pair { align-items: stretch; }
.grid2.kit-pair > .b-panel { display: flex; flex-direction: column; }
.grid2.kit-pair > .b-panel > .code-box { flex: 1; }
/* Top bar: Donate and Download side by side, the same width */
.site-bar .bar-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--br-space-2); width: max-content; justify-self: end; margin-left: auto; }
.site-bar .bar-actions > .b-btn { justify-content: center; }

/* Themes: the Theme Store's cards (UI Rules' theme card), each with what it is and a Get button. */
.themes-head { flex-wrap: wrap; gap: var(--br-space-3); }
.themes-search { width: 260px; max-width: 100%; margin-left: auto; }
.site-theme { cursor: default; }
.site-theme-about { grid-column: 1 / -1; padding: 0 var(--br-space-1); min-height: 32px; }
.site-theme > .b-btn { grid-column: 1 / -1; }