tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family:
      "World Pro MVP",
      ui-sans-serif,
      system-ui,
      -apple-system,
      "Segoe UI",
      Roboto,
      "Helvetica Neue",
      Arial,
      "Noto Sans",
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol";
  }
}

@layer components {
  /* Sidebar — selected item is a neutral pill per Docs 3.0 (bg gray/a9, ink
     text), replacing the theme-default blue tint. The Proof of Human badge
     keeps its gray artwork in both states for the same reason. */
  #sidebar-content li[data-active="true"] > a {
    background-color: #F3F2F0 !important;
    color: #181818 !important;
    border-radius: 6px !important;
    text-shadow: none !important;
  }
  .dark #sidebar-content li[data-active="true"] > a {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #F3F2F0 !important;
  }

  /* Page content text links only (anchors without custom classes) */
  .prose a:not([class]),
  .prose a:not([class]):hover,
  .prose a:not([class]):focus {
    color: #1989fb !important;
    text-decoration: none !important;
    background-image: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  /* Specific smaller image override for Mini Apps template screenshot */
  .img-miniapps-template {
    width: 220px !important;
    max-width: 220px !important;
    height: auto !important;
  }

  /* Improve select dropdown option contrast in light/dark modes */
  select,
  select option {
    color: inherit;
  }
  :root select option {
    background-color: #ffffff;
    color: #0f172a; /* slate-900 */
  }
  .dark select option {
    background-color: #0b1220; /* near slate-950 */
    color: #e5e7eb; /* gray-200 */
  }

  /* ------------------------------------------------------------------ */
  /* Tab bar (Docs 3.0 header) — pill tabs in the design language: ink   */
  /* labels, black pill for the active tab (inverted in dark mode), no   */
  /* underline indicator, hairline divider before the menu tabs.         */
  /* ------------------------------------------------------------------ */
  #navbar .nav-tabs {
    align-items: center;
    gap: 0 !important;
  }
  #navbar .nav-tabs-item {
    height: 32px !important;
    padding: 6px 10px;
    border-radius: 42px;
    color: #181818 !important;
    transition: background-color 0.15s ease;
  }
  #navbar .nav-tabs-item:hover {
    color: #181818 !important;
    background-color: #F3F2F0;
  }
  #navbar .nav-tabs-item[data-active="true"] {
    padding: 6px 14px;
    background-color: #181818;
    color: #F9F9F8 !important;
    text-shadow: none;
  }
  #navbar .nav-tabs-item[data-active="true"]:hover {
    color: #F9F9F8 !important;
    background-color: #181818;
  }
  /* The theme's active-tab underline indicator */
  #navbar .nav-tabs-item > div.absolute {
    display: none;
  }
  /* Hairline divider between the page tabs and the Resources/Support
     menus (the menu tabs render as <button>, page tabs as <a>). */
  #navbar .nav-tabs > button.nav-tabs-item:first-of-type {
    margin-left: 17px;
  }
  #navbar .nav-tabs > button.nav-tabs-item:first-of-type::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 24px;
    background-color: #E1DFDA;
  }
  .dark #navbar .nav-tabs > button.nav-tabs-item:first-of-type::before {
    background-color: rgba(255, 255, 255, 0.15);
  }
  .dark #navbar .nav-tabs-item {
    color: #F3F2F0 !important;
  }
  .dark #navbar .nav-tabs-item:hover {
    color: #F3F2F0 !important;
    background-color: rgba(255, 255, 255, 0.08);
  }
  .dark #navbar .nav-tabs-item[data-active="true"],
  .dark #navbar .nav-tabs-item[data-active="true"]:hover {
    background-color: #F3F2F0;
    color: #181818 !important;
  }

  /* Search entry — quiet bordered pill per design */
  #navbar #search-bar-entry {
    border-radius: 20px;
    background-color: #F9F9F8;
    box-shadow: none;
    --tw-ring-color: #E1DFDA;
    color: #181818;
  }
  .dark #navbar #search-bar-entry {
    background-color: rgb(24, 25, 27);
    --tw-ring-color: rgba(255, 255, 255, 0.15);
    color: #F3F2F0;
  }

  /* Developer Portal CTA — pill radius to match the design language */
  #topbar-cta-button a > span.absolute {
    border-radius: 20px;
  }

  /* ------------------------------------------------------------------ */
  /* Floating pill header (Docs 3.0, desktop ≥1440px) — collapse the     */
  /* theme's two-row header into the design's single 84px rounded bar.   */
  /* The theme's row scaffolding is flattened with display:contents so   */
  /* the logo, the tab row, and the search/assistant cluster lay out on  */
  /* ONE flex line — no absolute positioning, so the variable-width      */
  /* hosted cluster (Search + Ask Assistant) can never overlap the tabs. */
  /* Below 1440px — including when the hosted assistant panel narrows    */
  /* the page without changing the window width — the two-row layout     */
  /* above remains: the pill activates on the header's own width via a   */
  /* container query, not a viewport media query.                        */
  /* ------------------------------------------------------------------ */
  #navbar {
    container-type: inline-size;
  }
  @container (min-width: 1440px) {
    /* No full-width backdrop: the pill floats on the page background. */
    #navbar #navbar-transition {
      display: none;
    }
    /* The pill is the flex row. */
    #navbar > div.max-w-8xl {
      display: flex;
      align-items: center;
      column-gap: 16px;
      /* Side margins scale with the header's own width (the design
         frame's 63/1728 ratio), so the pill keeps the same proportions
         as the window — or the page area beside the assistant panel —
         shrinks. */
      width: calc(100% - 7.3cqw);
      max-width: 1602px !important;
      height: 84px;
      margin: 24px auto 0;
      padding: 0 25px 0 33px;
      background-color: #FFFFFF;
      border: 1px solid #E1DFDA;
      border-radius: 18px;
      box-shadow: 0px 15px 20px -5px rgba(0, 0, 0, 0.03);
    }
    .dark #navbar > div.max-w-8xl {
      background-color: rgb(24, 25, 27);
      border-color: rgba(255, 255, 255, 0.12);
    }
    /* Flatten the two-row scaffolding into the pill's flex line. */
    #navbar > div.max-w-8xl > div,
    #navbar > div.max-w-8xl > div > div.relative,
    #navbar div.lg\:px-12,
    #navbar div.lg\:px-12 > div {
      display: contents !important;
    }
    /* Logo | tabs | search cluster; the two auto margins center the
       tabs in the free space between logo and cluster. */
    #navbar div.lg\:px-12 > div > div.flex-1:first-child {
      order: 1;
      flex: 0 0 auto !important;
    }
    #navbar .nav-tabs-item {
      white-space: nowrap;
    }
    #navbar .max-w-8xl > div > div.px-12 {
      order: 2;
      position: static;
      width: max-content;
      flex-shrink: 0;
      height: auto !important;
      padding: 0 !important;
      margin-left: auto;
    }
    #navbar div.lg\:px-12 div.z-20 {
      order: 3;
      flex: 0 0 auto !important;
      margin-left: auto;
    }
    /* Logo at the design scale: the mock's logo block is 166px wide;
       our combined SVG hits that width at 17.5px tall. */
    #navbar div.lg\:px-12 .nav-logo {
      height: 17.5px !important;
    }
    /* Search pill at the design metrics: 34px tall, 6/14 padding. */
    #navbar #search-bar-entry {
      width: auto !important;
      height: 34px !important;
      padding: 6px 14px !important;
      border-radius: 20px;
      box-shadow: none;
    }
    #navbar #search-bar-entry span.text-xs {
      display: none;
    }
    /* Ask Assistant (hosted-only) — the design's "Ask AI" pill. */
    #navbar #assistant-entry {
      height: 34px !important;
      padding: 6px 14px !important;
      border-radius: 20px !important;
      background-color: #F9F9F8 !important;
      border: 1px solid #E1DFDA !important;
      box-shadow: none !important;
      color: #181818 !important;
    }
    #navbar #assistant-entry kbd,
    #navbar #assistant-entry .text-xs {
      display: none !important;
    }
    .dark #navbar #assistant-entry {
      background-color: rgb(24, 25, 27) !important;
      border-color: rgba(255, 255, 255, 0.15) !important;
      color: #F3F2F0 !important;
    }
    /* The emptied right-hand group collapses inside the pill. */
    #navbar div.lg\:px-12 > div > div.justify-end {
      display: none !important;
    }
  }
  /* The header chrome is identical at every size, per the design: no
     Explore Integrations link and no Developer Portal CTA (both removed
     from docs.json navbar — Ecosystem and Developer Portal live in the
     Resources menu and footer), and no theme toggle (the theme follows
     the system preference). */
  #navbar #theme-preference-menu-trigger {
    display: none !important;
  }

  /* Quickstart: tighten code block spacing within the card */
  .quickstart-code .code-block {
    margin-top: 0.5rem !important;
    margin-bottom: 0.75rem !important;
  }

  /* Quickstart: remove code block background while keeping syntax colors */
  .quickstart-code .code-block .code-block-background,
  .quickstart-code .code-block .code-block-background pre.shiki {
    background: transparent !important;
    background-color: transparent !important;
  }

  /* Quickstart: hide code fade overlay to avoid white brush near copy button */
  .quickstart-code .code-block [data-fade-overlay="true"] {
    display: none !important;
  }

  /* ------------------------------------------------------------------ */
  /* Assistant chat — remove the duplicate chat entry points; the        */
  /* assistant stays reachable from the header (Ask Assistant / ⌘I).     */
  /* The hosted site renders a sticky "Ask a question" bar at the bottom */
  /* of every docs page; local `mint dev` renders a draggable floating   */
  /* launcher instead. Hide both.                                        */
  /* ------------------------------------------------------------------ */
  div[data-assistant-bar] {
    display: none !important;
  }
  body > div.z-999.cursor-grab.touch-none[role="status"] {
    display: none !important;
  }

  /* Landing page — product cards (borderless icon-tile rows per Docs 3.0) */
  a.product-card {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    text-decoration: none;
  }
  .product-card-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 105px;
    height: 112px;
    border-radius: 24px;
    background-color: #F3F2F0;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
  }
  .product-card:hover .product-card-tile {
    background-color: #EDECE9;
  }
  .dark .product-card-tile {
    background-color: rgb(24, 25, 27);
  }
  .dark .product-card:hover .product-card-tile {
    background-color: rgb(32, 33, 36);
  }
  .product-card-title {
    color: #181818;
  }
  .dark .product-card-title {
    color: #FFFFFF;
  }
  .product-card-desc {
    color: #75726F;
  }
  .dark .product-card-desc {
    color: rgb(158, 162, 166);
  }
  .dark .product-card-icon {
    filter: invert(1);
  }

  /* Landing page — section headers (Developer stories / World Tech Updates) */
  .landing-section-title {
    font-size: 48px;
    line-height: 1.15;
    letter-spacing: -0.96px;
    font-weight: 300;
    color: #181818;
  }
  .dark .landing-section-title {
    color: #F3F2F0;
  }
  .landing-section-sub {
    margin-top: 12px;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 300;
    color: #75726F;
  }
  .dark .landing-section-sub {
    color: rgb(158, 162, 166);
  }
  @media (max-width: 600px) {
    .landing-section-title {
      font-size: 32px;
      letter-spacing: -0.64px;
    }
  }

  /* Landing page — developer stories carousel.
     Cards are 4:3 (756x567 in the mock); two fill the content column with the
     third peeking past the edge, matching the design's resting composition.
     Kept as a CSS class on purpose: an arbitrary utility like
     w-[min(760px,85%)] is silently dropped by Mintlify's Tailwind compiler
     (values with a comma + %), which renders the cards at zero size. */
  .landing-story-card {
    width: calc((100% - 96px) / 2 - 12px);
    aspect-ratio: 4 / 3;
  }
  @media (min-width: 901px) {
    .landing-stories-track {
      margin-right: -96px;
    }
  }
  @media (max-width: 900px) {
    .landing-story-card {
      width: 85%;
    }
  }
  .landing-stories-track {
    scrollbar-width: none;
  }
  .landing-stories-track::-webkit-scrollbar {
    display: none;
  }
  .landing-carousel-arrow {
    background-color: #FFFFFF;
    border: 1px solid #E1DFDA;
    color: #181818;
    transition: background-color 0.15s ease;
  }
  .landing-carousel-arrow:hover {
    background-color: #F3F2F0;
  }
  .dark .landing-carousel-arrow {
    background-color: rgb(24, 25, 27);
    border-color: rgba(255, 255, 255, 0.15);
    color: #F3F2F0;
  }
  .dark .landing-carousel-arrow:hover {
    background-color: rgb(32, 33, 36);
  }

  /* Landing page — World Tech updates list; rows separated by hairline rules
     (above each row and below the last) per the Docs 3.0 QA design. */
  .landing-update {
    display: block;
    padding: 40px 0;
    border-top: 1px solid #E1DFDA;
    text-decoration: none;
  }
  .landing-update:last-child {
    border-bottom: 1px solid #E1DFDA;
  }
  .dark .landing-update {
    border-color: rgba(255, 255, 255, 0.12);
  }
  .landing-update-title {
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -0.24px;
    font-weight: 300;
    color: #181818;
  }
  .landing-update:hover .landing-update-title {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .dark .landing-update-title {
    color: #F3F2F0;
  }
  .landing-update-desc {
    margin: 12px 0 0;
    max-width: 886px;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 300;
    color: #75726F;
  }
  .dark .landing-update-desc {
    color: rgb(158, 162, 166);
  }

  /* Landing page — hero text */
  .landing-hero {
    color: #2D2C2C;
  }
  .dark .landing-hero {
    color: #F3F2F0;
  }

  /* Landing page — support links */
  .landing-link {
    color: #181818;
  }
  .landing-link svg {
    fill: #181818;
  }
  .dark .landing-link {
    color: #F3F2F0;
  }
  .dark .landing-link svg {
    fill: #F3F2F0;
  }

  /* Landing page — footer */
  .landing-footer {
    padding: 0;
  }
  .landing-footer-inner {
    max-width: 1728px;
    margin: 0 auto;
    padding: 0 96px 64px;
    display: flex;
    flex-direction: column;
    gap: 64px;
  }
  .landing-newsletter {
    background-color: #F3F2F0;
    border-radius: 16px;
    padding: 128px 40px;
  }
  .dark .landing-newsletter {
    background-color: #161618;
  }
  .landing-newsletter-title {
    color: #181818;
  }
  .dark .landing-newsletter-title {
    color: #F3F2F0;
  }
  .landing-email-field {
    background-color: #FFFFFF;
  }
  .dark .landing-email-field {
    background-color: #2D2C2C;
  }
  .landing-email-input {
    color: #2D2C2C;
  }
  .landing-email-input::placeholder {
    color: #9D9B96;
  }
  .dark .landing-email-input {
    color: #F3F2F0;
  }
  .dark .landing-email-input::placeholder {
    color: #75726F;
  }
  .landing-privacy-link {
    color: #2D2C2C !important;
  }
  .dark .landing-privacy-link {
    color: #F3F2F0 !important;
  }
  .landing-footer-link {
    color: #181818;
    text-decoration: none;
  }
  .landing-footer-link:hover {
    text-decoration: underline;
  }
  .dark .landing-footer-link {
    color: #F3F2F0;
  }
  .landing-footer-links {
    color: #181818;
  }
  .dark .landing-footer-links {
    color: #F3F2F0;
  }

  /* ------------------------------------------------------------------ */
  /* Docs-page footer (Docs 3.0) — restyle Mintlify's advanced footer    */
  /* into the design's single row: "™ 2026 World" left, links right.     */
  /* The homepage keeps its own hand-built .landing-footer.              */
  /* ------------------------------------------------------------------ */
  #footer.advanced-footer {
    border-top: none;
  }
  #footer.advanced-footer > div {
    max-width: 1728px !important;
  }
  @media (min-width: 1024px) {
    #footer.advanced-footer > div {
      padding: 48px 96px 64px !important;
    }
  }
  /* Replace the footer logo with the trademark line from the design. */
  #footer.advanced-footer .nav-logo {
    display: none !important;
  }
  #footer.advanced-footer a.select-none::after {
    content: "™ 2026 World";
    font-size: 16px;
    line-height: 1.4;
    font-weight: 300;
    color: #181818;
    white-space: nowrap;
  }
  .dark #footer.advanced-footer a.select-none::after {
    color: #F3F2F0;
  }
  /* Link row: right-aligned single row, ink links per design. */
  @media (min-width: 768px) {
    #footer.advanced-footer .md\:justify-center {
      justify-content: flex-end !important;
      gap: 40px !important;
    }
  }
  #footer.advanced-footer a[class*="max-w-36"] {
    max-width: none !important;
    font-size: 16px !important;
    line-height: 1.4;
    font-weight: 300;
    color: #181818 !important;
  }
  #footer.advanced-footer a[class*="max-w-36"]:hover {
    color: #181818 !important;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .dark #footer.advanced-footer a[class*="max-w-36"],
  .dark #footer.advanced-footer a[class*="max-w-36"]:hover {
    color: #F3F2F0 !important;
  }
  /* The design's footer carries no social icons (those links live in the
     footer links row; GitHub also sits in the Resources menu). */
  #footer.advanced-footer div[class*="min-w-[140px]"] {
    display: none !important;
  }
  /* The design's footer is the single links row only: drop the theme's
     bottom utility row (Powered by Mintlify + theme icons) and its
     divider. Branding removal is a paid-plan Mintlify feature — if the
     org's plan requires attribution, revert this rule or use the
     dashboard's hide-branding toggle instead. */
  #footer.advanced-footer > div > div.h-px,
  #footer.advanced-footer > div > div:last-child {
    display: none !important;
  }
  @media (max-width: 900px) {
    .landing-footer-inner {
      padding: 0 24px 48px;
      gap: 48px;
    }
    .landing-newsletter {
      padding: 64px 24px;
    }
    .landing-footer-links {
      /* Wrapped rows stay together: the trademark line sits inline with
         the links instead of floating far above them. */
      gap: 16px 40px !important;
    }
  }
  @media (max-width: 600px) {
    .landing-footer-inner {
      padding: 0 16px 40px;
    }
    .landing-newsletter {
      padding: 40px 20px;
    }
    .landing-newsletter-title {
      font-size: 24px !important;
      letter-spacing: -0.48px !important;
    }
    .landing-email-field {
      padding: 6px 6px 6px 20px !important;
    }
    .landing-email-input {
      font-size: 18px !important;
    }
    .landing-footer-links {
      gap: 12px 32px !important;
    }
  }

  /* Landing page — hero */
  .landing-hero-title {
    font-size: 64px;
    line-height: 1.1;
    letter-spacing: -1.28px;
    font-weight: 300;
    color: #181818;
  }
  .dark .landing-hero-title {
    color: #F3F2F0;
  }
  .landing-hero-sub {
    margin-top: 24px;
    max-width: 487px;
    font-size: 24px;
    line-height: 1.35;
    letter-spacing: -0.24px;
    font-weight: 300;
    color: #75726F;
  }
  .dark .landing-hero-sub {
    color: rgb(158, 162, 166);
  }
  @media (max-width: 600px) {
    .landing-hero-title {
      font-size: 40px;
      letter-spacing: -0.8px;
    }
    .landing-hero-sub {
      font-size: 18px;
    }
  }

  /* Landing page — responsive card grid (2×2 per Docs 3.0) */
  .landing-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 80px;
    row-gap: 113px;
  }
  @media (max-width: 900px) {
    .landing-card-grid {
      grid-template-columns: 1fr;
      row-gap: 40px;
    }
    .product-card-tile {
      width: 84px;
      height: 90px;
    }
    .product-card .product-card-title {
      font-size: 24px !important;
    }
  }
  .landing-container {
    max-width: 1728px;
    margin: 0 auto;
    padding: 60px 96px 0;
    width: 100%;
    box-sizing: border-box;
  }
  @media (max-width: 900px) {
    .landing-container {
      padding: 40px 24px 0;
    }
  }
  @media (max-width: 600px) {
    .landing-container {
      padding: 32px 16px 0;
    }
  }

  /* ------------------------------------------------------------------ */
  /* Header/content alignment (Docs 3.0 QA) — the navbar container and   */
  /* the docs-page body use Mintlify's max-w-8xl (the body via a         */
  /* peer-variant class); match both to the 1728px design frame with     */
  /* 96px gutters so the logo, tabs, hero, and content share one edge.   */
  /* ------------------------------------------------------------------ */
  @media (min-width: 1024px) {
    [class*="max-w-8xl"] {
      max-width: 1728px !important;
    }
    /* Navbar top row (logo/search/CTA) and tab row: 48px → 96px gutters. */
    #navbar .lg\:px-12,
    #navbar .px-12 {
      padding-left: 96px !important;
      padding-right: 96px !important;
    }
    /* Docs pages: pull the sidebar/content wrapper out to the same frame
       so the sidebar lines up under the logo (group headers and link text
       both carry a 16px inset, so 80px padding lands them at 96px).
       Scoped to non-custom pages; the homepage manages its own gutters. */
    body:has(#navbar.is-not-custom) div[class*="is-not-custom]:px-4"] {
      padding-left: 80px !important;
      padding-right: 80px !important;
    }
  }

}