/* ==========================================================================
   Deepinfo Docs: the home page (build/home.mjs), in Signal (docs/DESIGN-SIGNAL.md §4.20)
   Linked on "/" only (build/build.mjs stylesheetsFor), after tokens.css and docs.css.
   Every band sits at a depth (data-depth on the band; tokens.css), so this file only uses
   depth tokens: the hero on `bedrock` (deep moss, the carrying words in lime), then white
   (`surface-2`) and sage (`surface`) bands in turn, and the closing band on `bedrock` again,
   full width (maintainer feedback, 2026-10-03). The API modules are cards with their category
   icon (the same feedback; docs/DESIGN-SIGNAL.md §13); the other lists are docs.css ledger rows
   and buttons are docs.css .btn / .go. No gradients but the faint grids, no pill badge, no
   counts, no raw colours.
   ========================================================================== */

:root {
  --home-max: 1200px;
}

/* ---------- the page column: full width, no prose padding ---------- */
.page-home .main {
  padding: 0;
}
.page-home .prose-inner {
  max-width: none;
  margin: 0;
}
.page-home .footer-inner {
  max-width: calc(var(--home-max) + 2 * var(--gutter));
  margin-inline: auto;
}

.home {
  color: var(--fg-2);
}
.home-wrap {
  max-width: calc(var(--home-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* prose resets: the home page's components set their own type */
.home h1,
.home h2,
.home h3 {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--fg);
}
/* (0,1,1): equal to `.prose p`, later in the cascade; any .home .x rule still wins */
.home p {
  margin: 0;
}
.home ul.home-env-list,
.home dl {
  margin: 0;
  padding: 0;
  list-style: none;
}
.home .home-env-list > li {
  margin: 0;
}
/* a headline in `fg-dim` with its carrying words in `em` (the build marks it .has-em) */
.home .has-em {
  color: var(--fg-dim);
}
.home h1 em,
.home h2 em {
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--em);
}

/* every band paints its own depth */
.home-hero,
.home-section,
.home-band {
  background: var(--bg);
  color: var(--fg-2);
}
.home-section {
  padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
}

/* ========================================================================== hero */
.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* the faint 42px grid, masked to the top right. With scripts and motion it drifts on a
   canvas instead (assets/js/docs.js heroGrid: .has-grid-motion), under the same mask. */
.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(color-mix(in srgb, var(--fg) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--fg) 8%, transparent) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 88% 8%, var(--fg) 8%, transparent 68%);
  mask-image: radial-gradient(ellipse 70% 80% at 88% 8%, var(--fg) 8%, transparent 68%);
  pointer-events: none;
}
.home-grid-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 88% 8%, var(--fg) 8%, transparent 68%);
  mask-image: radial-gradient(ellipse 70% 80% at 88% 8%, var(--fg) 8%, transparent 68%);
  pointer-events: none;
}
.home-hero.has-grid-motion::before {
  display: none;
}
.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  align-items: center;
  gap: 56px;
  padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
}
.home-hero-solo {
  grid-template-columns: minmax(0, 1fr);
}
.home-hero-copy {
  min-width: 0;
}
.home .home-title {
  font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.75rem);
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: -0.045em;
  word-spacing: -0.025em;
  text-wrap: balance;
}
.home-lede {
  max-width: var(--measure);
  margin-top: var(--s-5);
}
.home .home-lede p {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  letter-spacing: -0.02em;
  color: var(--fg-2);
}
.home .home-lede p + p {
  margin-top: var(--s-3);
}

/* the start field: a button that opens the ⌘K palette (docs.js [data-search-open]) */
.home-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 500px;
  height: 52px;
  margin-top: var(--s-6);
  padding: 0 12px 0 16px;
  border: 1px solid var(--field-bd);
  border-radius: var(--radius-code);
  background: var(--code-bg);
  color: var(--fg-3);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.home-search:hover {
  border-color: var(--fg-2);
  color: var(--fg);
}
.home-search .ico {
  width: 18px;
  height: 18px;
  color: var(--fg-3);
}
.home-search-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-search kbd {
  flex: none;
  min-width: 20px;
  height: 22px;
  padding: 0 7px;
  border: 1px solid var(--rule-2);
  border-radius: 5px;
  background: var(--panel);
  /* fg-2, not fg-3: on the dark hero the key sits on two white washes (the box, the panel)
     where fg-3 reads 4.0:1; fg-2 clears 4.5:1 on every ground the hero has */
  color: var(--fg-2);
  font-size: 11px;
  line-height: 20px;
}
/* without JavaScript there is no palette to open, and the language tabs cannot switch:
   the curl snippet stands alone */
html:not(.js) .home-search,
html:not(.js) .home-qs-req .tab:not([aria-selected='true']) {
  display: none;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: var(--s-5);
}

/* ---------- the quick start card: a code panel (depth-code; tokens.css scopes .home-qs) ---------- */
.home-hero-code {
  min-width: 0;
}
.home-qs {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--depth-code-bd);
  border-radius: var(--radius-code);
  background: var(--depth-code);
  box-shadow: var(--panel-shadow);
  color: var(--code-fg);
}
.home-qs-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  min-height: 52px;
  padding: 8px 16px 8px 18px;
  border-bottom: 1px solid var(--code-rule);
}
.home .home-qs-title {
  flex: 1 0 100%;
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--code-tab);
}
.home .home-qs-op {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.home-qs-path {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--code-fg);
  white-space: nowrap;
}
.home-qs .go {
  color: var(--code-fg);
  font-size: 14px;
}
.home-qs .go .ico {
  color: var(--code-ring);
}
.home-qs-ref {
  margin-left: auto;
}

/* the language tabs: Signal's code tabs, the Copy button at the end of the row */
.home .home-qs-req {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  margin: 0;
  border: 0;
  background: transparent;
}
/* the bar's hairline runs under the tabs and Copy alike (a grid item of its own, drawn first),
   so Copy can sit inside the bar with room for its focus ring like the tabs */
.home .home-qs-req::before {
  content: '';
  grid-column: 1 / -1;
  grid-row: 1;
  border-bottom: 1px solid var(--code-rule);
  pointer-events: none;
}
.home-qs-req > .tabs-list {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 0 6px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow-x: auto;
  scrollbar-width: none;
}
.home-qs-req > .tabs-list::-webkit-scrollbar {
  display: none;
}
.home .home-qs-req .tab {
  flex: none;
  height: auto;
  margin: 6px 0 6px 6px;
  padding: 6px 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  color: var(--code-tab);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.3;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.home .home-qs-req .tab:hover {
  color: var(--code-fg);
}
.home .home-qs-req .tab[aria-selected='true'] {
  background: var(--code-tab-on);
  color: var(--code-fg);
}
.home .home-qs-copy {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  min-width: 44px;
  margin: 0 6px 0 0;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--code-tab);
  font-family: var(--sans);
  font-size: 11px;
}
.home .home-qs-copy:hover {
  color: var(--code-fg);
}
.home-qs-req > .tab-panel {
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 0;
  margin: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--code-rule) transparent;
}
/* the panel scrolls and is flush with the card, which clips (overflow hidden): its ring is
   drawn inside it, like a scrolling code block's (docs.css pre[data-scroller]) */
.home-qs-req > .tab-panel:focus-visible {
  outline-offset: -2px;
}
.home-qs pre {
  margin: 0;
  padding: 16px 18px;
  border: 0;
  background: transparent;
  color: var(--code-fg);
  font-size: var(--fs-code);
  line-height: 1.7;
  tab-size: 4;
  -moz-tab-size: 4;
  /* long lines wrap (a hanging indent keeps them readable) instead of hiding off-card */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-indent: 4ch hanging each-line;
}
.home-qs pre code {
  display: block;
  padding: 0;
  background: none;
  font-size: inherit;
  color: inherit;
}

/* the response: one title, "200 OK · application/json", then the saved body (cut to a few
   fields; the JSON marks what is left out with …) */
.home-qs-res {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-top: 1px solid var(--code-rule);
}
.home .home-qs-bar {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border-bottom: 1px solid var(--code-rule);
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--code-tab);
}
.home-qs-status-ok {
  color: var(--code-ok);
}
.home-qs-res pre {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--code-rule) transparent;
}
.home .home-qs-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 10px 18px;
  border-top: 1px solid var(--code-rule);
  font-size: 13px;
  line-height: 1.5;
  color: var(--code-tab);
}
.home .home-qs-foot code {
  padding: 0.1em 0.38em;
  border: 0;
  border-radius: 5px;
  background: var(--code-tab-on);
  color: var(--code-fg);
  font-size: 12px;
}
.home-qs-link {
  margin-left: auto;
}

/* A fixed card height on wide screens: switching to a longer language scrolls the
   snippet and the response scrolls inside the card, so nothing below the hero moves. */
@media (min-width: 1180px) {
  .home-qs {
    height: 628px;
  }
  .home-qs-top,
  .home-qs-foot {
    flex: none;
  }
  .home .home-qs-req {
    flex: 0 1 auto;
    max-height: 290px;
  }
  .home-qs-res {
    flex: 1 1 0;
    min-height: 140px;
  }
}

/* ========================================================================== bands */
.home-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 48px;
  margin-bottom: var(--s-6);
}
.home-head-text {
  min-width: 0;
  max-width: 46rem;
}
.home .home-h2 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.035em;
  word-spacing: -0.02em;
  text-wrap: balance;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.home-intro {
  max-width: var(--measure-wide);
  margin-top: var(--s-3);
}
.home .home-intro p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-2);
}
.home .home-intro p + p {
  margin-top: var(--s-2);
}
.home .home-intro strong {
  font-weight: 600;
  color: var(--fg);
}
.home-head-aside {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  flex: none;
}

/* the module groups share one white band */
.home-band .home-apis + .home-apis {
  padding-top: 0;
}
.home-ledger .ledger-sub {
  margin-top: 4px;
}

/* ---------- the API modules: one card each, its icon in a tile ---------- */
.home ul.home-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
}
.home .home-cards > li {
  margin: 0;
}
.home-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px 22px 20px;
  border: 1px solid var(--panel-bd);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--panel-shadow);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.home-card:hover {
  border-color: var(--hi);
  box-shadow: inset 0 0 0 1px var(--hi), var(--panel-shadow);
}
.home-card:focus-within {
  border-color: var(--hi);
}
.home-card-ico {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--s-4);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.home-card-ico .cat-ico {
  width: 24px;
  height: 24px;
}
.home .home-card-title {
  font-size: var(--fs-h3);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.02em;
}
/* the heading's link covers the whole card */
.home-card-link {
  color: inherit;
  text-decoration: none;
}
.home-card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}
.home-card-link:focus-visible {
  outline: none;
}
.home-card-link:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.home .home-card-sub {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--fg-3);
}
.home .home-card-text {
  margin-top: var(--s-3);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-2);
}
.home .home-card-tags {
  margin-top: var(--s-4);
}
.home-card-go {
  position: absolute;
  top: 24px;
  right: 22px;
  width: 16px;
  height: 16px;
  color: var(--fg-3);
  transition: transform 0.2s var(--ease), color 0.2s var(--ease);
}
.home-card:hover .home-card-go {
  color: var(--hi);
  transform: translateX(3px);
}

/* ---------- Production or Demo? ---------- */
.home-env-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: var(--s-6) 56px;
}
.home-env-copy .home-intro {
  margin-top: var(--s-3);
}
.home .home-env-more {
  margin-top: var(--s-4);
}
.home .home-env-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
/* each environment card is one link: the API reference with that environment chosen */
.home-env-item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px 22px 22px;
  border: 1px solid var(--panel-bd);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--panel-shadow);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.home-env-item:hover,
.home-env-item:focus-within {
  border-color: var(--hi);
  box-shadow: inset 0 0 0 1px var(--hi), var(--panel-shadow);
}
.home-env-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}
.home-env-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}
/* the hosts stay selectable and copyable above the card's link */
.home .home-env-hosts {
  position: relative;
  z-index: 1;
}
/* without JavaScript the link cannot choose an environment: the other cards make no promise */
html:not(.js) .home-env-item:not(:first-child) .home-env-go {
  display: none;
}
.home-env-link:focus-visible {
  outline: none;
}
.home-env-link:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.home .home-env-go {
  margin-top: var(--s-4);
  font-size: 14px;
  font-weight: 600;
  color: var(--hi);
}
.home-env-go .ico {
  width: 14px;
  height: 14px;
  transition: transform 0.2s var(--ease);
}
.home-env-item:hover .home-env-go .ico {
  transform: translateX(3px);
}
.home .home-env-name {
  font-size: var(--fs-h3);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.home .home-env-who {
  margin-top: 2px;
  font-size: 14px;
  color: var(--fg-3);
}
.home .home-env-hosts {
  margin: var(--s-4) 0 0;
  border-top: 1px solid var(--rule-2);
}
.home-env-hosts > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.home .home-env-hosts dd {
  margin: 0;
  min-width: 0;
}
.home .home-env-hosts code {
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  overflow-wrap: anywhere;
}
/* ---------- the closing band: full width on bedrock, like the hero ---------- */
.home-section.home-help {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
}
.home-cta {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: var(--s-6) 48px;
  color: var(--fg-2);
}
.home-section.home-help::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image:
    linear-gradient(color-mix(in srgb, var(--fg) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--fg) 8%, transparent) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse at 80% 20%, var(--fg) 10%, transparent 70%);
  mask-image: radial-gradient(ellipse at 80% 20%, var(--fg) 10%, transparent 70%);
  pointer-events: none;
}
.home .home-cta-title {
  max-width: 16ch;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.045em;
  word-spacing: -0.025em;
  text-wrap: balance;
}
.home-cta-side {
  min-width: 0;
}
.home .home-cta-text p {
  max-width: 26rem;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-2);
}
.home .home-cta-text p + p {
  margin-top: var(--s-2);
}
.home .home-cta-text code {
  background: var(--code-bg);
  color: var(--fg);
}
.home-cta .home-actions {
  margin-top: var(--s-5);
}

/* ---------- extra sections from content/home.md ---------- */
.home-extra .home-head {
  margin-bottom: 0;
}

/* ========================================================================== responsive */
@media (max-width: 1179px) {
  .home-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .home-hero-copy {
    max-width: 720px;
  }
  /* one column: the card keeps a code-friendly width instead of stretching */
  .home-hero-code {
    max-width: 780px;
  }
  .home .home-qs-req > .tab-panel {
    max-height: 360px;
  }
  .home-env-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 899px) {
  .home-cta {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}
@media (max-width: 760px) {
  .home-head {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 640px) {
  /* a phone-wide card: lines are kept (a URL or a JSON value never breaks in the
     middle) and the code scrolls sideways, like every other code block on the site */
  .home-qs pre {
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
    text-indent: 0;
    padding-inline: 14px;
  }
  .home .home-env-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .home .home-title {
    font-size: clamp(2.125rem, 1.5rem + 3vw, 2.4rem);
  }
  .home-search {
    margin-top: var(--s-5);
  }
  .home-qs-top,
  .home .home-qs-bar,
  .home .home-qs-foot {
    padding-inline: 14px;
  }
  .home-qs-link {
    margin-left: 0;
  }
  .home-env-item {
    padding: 18px;
  }
  .home-cta .home-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 400px) {
  .home-qs-req .tab {
    padding-inline: 9px;
  }
}
@media (pointer: coarse) {
  .home-search kbd {
    display: none;
  }
}
@media print {
  .home-hero::before,
  .home-grid-canvas,
  .home-section.home-help::before,
  .home-search {
    display: none;
  }
}