@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700;800&display=swap");

:root {
  --primary: #050515;
  --ink: #212529;
  --muted: #6f7180;
  --line: #e6e7ec;
  --soft: #f6f7f9;
  --card: #ffffff;
  --radius-xl: 22px;
  --shadow-soft: 0 14px 45px rgba(15, 15, 30, .08);

  /* Main site font */
  --font-display: "Ubuntu", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Bootstrap global font variable */
  --bs-body-font-family: "Ubuntu", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { 
  box-sizing: border-box; 
}

body {
  font-family: var(--font-display);
  color: var(--ink);
  background: #fff;
  letter-spacing: -.01em;
}

a { 
  color: inherit; 
  text-decoration: none; 
}

button { 
  font-family: var(--font-display);
}

.btn-outline-light {
    --bs-btn-color: #FFB514;
    --bs-btn-border-color: #FFB514;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #FFB514;
    --bs-btn-hover-border-color: #FFB514;
    --bs-btn-focus-shadow-rgb: 248, 249, 250;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #FFB514;
    --bs-btn-active-border-color: #FFB514;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #FFB514;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #FFB514;
    --bs-gradient: none;
}
.btn-light {
    --bs-btn-color: #000;
    --bs-btn-bg: #FFB514;
    --bs-btn-border-color: #FFB514;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #FFB514;
    --bs-btn-hover-border-color: #FFB514;
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #FFB514;
    --bs-btn-active-border-color: #FFB514;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #FFB514;
    --bs-btn-disabled-border-color: #FFB514;
}

.btn:hover {
    color: #ffffff;
    background-color: #050515;
    border-color: #050515;
}

.form-select:focus {
    box-shadow: 0 0 0 .15rem #2196F3;
}

/* MENU */

.convey-header {
  min-height: 79px;
  z-index: 1030;
}

.convey-header .navbar {
  min-height: 79px;
}

.convey-menu-btn {
  width: 61px;
  min-height: 79px;
  color: #212529;
}

.convey-menu-btn:hover,
.convey-menu-btn:focus {
  background: #f6f7f9;
}

.convey-logo {
  width: 253px;
  max-width: min(253px, 52vw);
  height: auto;
  color: #000;
}

.convey-search {
  min-width: 180px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, .10);
  background: #ececf0;
  color: #717182;
  font-size: 14px;
  font-weight: 500;
  padding: 0 13px;
}

.convey-search:hover,
.convey-search:focus {
  background: #fff;
  border-color: rgba(0, 0, 0, .2);
  color: #212529;
}

.convey-support,
.convey-support-icon {
  border: 0;
  background: #212529;
  color: #fff;
  font-family: "Ubuntu", var(--bs-body-font-family, system-ui, sans-serif);
  font-weight: 700;
  text-decoration: none;
}

.convey-support {
  min-height: 42px;
  border-radius: 999px;
  padding: 8px 18px 8px 14px;
  font-size: 16px;
}

.convey-support-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.convey-support:hover,
.convey-support:focus,
.convey-support-icon:hover,
.convey-support-icon:focus {
  background: #33383d;
  color: #fff;
}

.convey-user-icon {
  width: 21px;
  height: 24px;
  color: currentColor;
  flex: 0 0 auto;
}

.convey-offcanvas {
  width: min(340px, 88vw) !important;
}

@media (max-width: 575.98px) {
  .convey-header,
  .convey-header .navbar,
  .convey-menu-btn {
    min-height: 68px;
  }

  .convey-menu-btn {
    width: 54px;
  }

  .convey-logo {
    max-width: 190px;
  }
}

/* SEARCH */

/* Search result text wrapping fix */
.search-item {
  min-width: 0;
  overflow: hidden;
}

.search-item .flex-grow-1,
.search-item .min-w-0 {
  min-width: 0;
  max-width: 100%;
}

.search-item-title,
.search-item-sub {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  overflow-wrap: anywhere;
  word-break: normal;
}

.search-item-sub {
  line-height: 1.45;
}


/* REST */


.container-docs { max-width: 1216px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.container-narrow { max-width: 980px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.navbar-wrap { backdrop-filter: blur(16px); }
.logo-mark {
  width: 31px; height: 31px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; font-weight: 800; font-size: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.16);
}
.brand-text { font-weight: 700; font-size: 16px; }
.brand-text span { color: var(--muted); font-weight: 500; }
.navbar .nav-link { color: #5f6070; font-weight: 500; font-size: 15px; border-radius: 10px; padding: .55rem .85rem !important; }
.navbar .nav-link:hover { color: #212529; background: #f3f4f7; }
.search-trigger { min-width: 205px; height: 38px; background: #f1f2f5; border: 1px solid #dddfe6; border-radius: 11px; color: #626475; align-items: center; gap: 10px; padding: 0 12px; }
.search-trigger span { flex: 1; text-align: left; }
kbd { background: #fff; color: #777988; border: 1px solid #dadce3; border-radius: 6px; box-shadow: none; padding: 2px 6px; font-size: 11px; }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; background: #f2f3f6; border: 1px solid transparent; color: #212529; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover, .search-trigger:hover { border-color: #c8cad4; background: #fff; }
.hero { border-bottom: 1px solid var(--line); padding: 100px 0 94px; text-align: center; }
.hero.compact { padding: 66px 0 62px; }
.hero h1 { font-size: clamp(40px, 5vw, 58px); line-height: 1; font-weight: 800; letter-spacing: -.055em; margin-bottom: 17px; }
.hero p { color: var(--muted); font-size: 20px; margin-bottom: 34px; }
.hero-search { border: 1px solid #dedfe5; background: #fff; border-radius: 18px; height: 64px; box-shadow: 0 10px 28px rgba(0,0,0,.04); max-width: 760px; width: 100%; display: flex; align-items: center; gap: 16px; padding: 0 20px; color: #777887; margin: 0 auto; }
.hero-search:hover { border-color: #c7cad4; box-shadow: var(--shadow-soft); }
.hero-search span { flex: 1; text-align: left; font-size: 17px; }
.pill-cloud { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.topic-pill { border: 1px solid #dedfe6; color: #777887; border-radius: 999px; padding: 7px 17px; background: #fff; font-size: 14px; }
.section-pad { padding: 74px 0; }
.section-title { font-size: 29px; font-weight: 800; letter-spacing: -.035em; margin: 0 0 6px; }
.section-subtitle { color: var(--muted); margin: 0 0 42px; }
.category-card { height: 100%; min-height: 222px; border: 1px solid var(--line); border-radius: 19px; background: #fff; padding: 25px; text-align: left; display: flex; flex-direction: column; gap: 18px; transition: .2s ease; }
.category-card:hover, .article-list-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: #000; border: solid 1px; }
.category-icon { width: 42px; height: 42px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e9ecef; font-size: 20px;background: #e9ecef }
.category-card h3 { font-size: 16px; font-weight: 800; margin-bottom: 10px; }
.category-card p { color: var(--muted); line-height: 1.65; margin: 0; }
.card-footer-line { border-top: 1px solid var(--line); margin-top: auto; padding-top: 15px; display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; }
.tint-violet { color:#8b5cf6; background:#f5f0ff; } .tint-blue { color:#3b82f6; background:#eff6ff; }
.tint-emerald { color:#10b981; background:#ecfdf5; } .tint-amber { color:#f59e0b; background:#fffbeb; }
.tint-cyan { color:#06b6d4; background:#ecfeff; } .tint-indigo { color:#6366f1; background:#eef2ff; }
.tint-rose { color:#f43f5e; background:#fff1f2; } .tint-orange { color:#f97316; background:#fff7ed; }
.link-list { list-style: none; padding: 0; margin: 0; }
.link-list li { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 13px 0; }
.link-list .num { color: #c4c5cc; font-size: 13px; font-variant-numeric: tabular-nums; }
.link-list a { font-weight: 650; }
.link-list .meta { color: var(--muted); font-size: 13px; }
.cta-box { border-radius: 21px; background: radial-gradient(circle at top right, rgba(0, 0, 0, 1), transparent 40%), #212529; color: white; padding: clamp(34px, 5vw, 50px); }
.cta-box p { color: #bcbdca; font-size: 18px; }
.footer { border-top: 1px solid var(--line); padding: 58px 0 30px; color: #656777; }
.footer h6 { color: #212529; font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 20px; }
.footer a { display: block; color: #656777; margin-bottom: 13px; }
.footer a:hover { color: #212529; }
.breadcrumb-row { color: var(--muted); font-size: 16px; }
.breadcrumb-row i { font-size: 12px; color: #b7b8c1; margin: 0 9px; }
.category-head { padding: 68px 0 42px; border-bottom: 1px solid var(--line); }
.category-head-grid { display: flex; gap: 25px; align-items: center; }
.category-head h1 { font-size: clamp(34px, 5vw, 47px); font-weight: 850; letter-spacing: -.055em; margin-bottom: 10px; }
.category-head p { color: var(--muted); font-size: 20px; margin-bottom: 10px; }
.filter-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 31px; }
.filter-row .btn { border-radius: 12px; border: 0; padding: 9px 16px; color: #777887; background: #eeeef3; }
.filter-row .btn.active { background: var(--primary); color: #fff; }
.article-list-card { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 19px; padding: 26px 28px; text-align: left; display: flex; justify-content: space-between; gap: 18px; transition: .2s ease; }
.article-list-card h3 { font-size: 18px; font-weight: 800; margin: 0 0 11px; }
.article-list-card p { color: var(--muted); font-size: 17px; line-height: 1.55; margin-bottom: 16px; }
.article-meta { display: flex; gap: 22px; color: var(--muted); font-size: 14px; flex-wrap: wrap; }
.badge-soft { border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 500; border: 1px solid; }
.badge-new { color: #212529; background:#C7C9CC; border-color:#C7C9CC; }
.badge-updated { color: #3ECB47; background:#E8F9E9; border-color:#3ECB47; } 
.article-page { background: #fff; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 70px; align-items: start; }
.article-main { max-width: 820px; }
.article-header { padding: 56px 0 34px; border-bottom: 1px solid var(--line); }
.article-header h1 { font-size: clamp(36px, 6vw, 56px); font-weight: 850; letter-spacing: -.06em; line-height: 1.04; margin: 19px 0 16px; }
.article-header .lead { color: var(--muted); font-size: 20px; line-height: 1.55; }
.article-body { padding: 35px 0 70px; }
.article-body h2 { font-size: 26px; font-weight: 850; letter-spacing: -.035em; margin: 54px 0 18px; scroll-margin-top: 90px; }
.article-body h3 { font-size: 20px; font-weight: 800; margin: 34px 0 14px; scroll-margin-top: 90px; }
.article-body p, .article-body li { line-height: 1.82; font-size: 16px; }
.article-body p { margin-bottom: 21px; }
.article-body ul { padding-left: 22px; margin-bottom: 24px; }
.code-block { border-radius: 14px; overflow: hidden; border: 1px solid #202130; margin-bottom: 27px; background:#11121d; }
.code-head { background:#11121d; border-bottom:1px solid #202130; display:flex; justify-content:space-between; padding:10px 15px; color:#69708f; text-transform:uppercase; letter-spacing:.09em; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.copy-btn { color:#7d86a8; border:0; background:transparent; text-transform:none; letter-spacing:0; }
.code-block pre { margin:0; background:#11121d; color:#b7bee2; padding:20px; overflow:auto; font-size:14px; line-height:1.7; }
.callout { border-radius: 14px; padding: 16px 18px; display: flex; gap: 13px; margin-bottom: 25px; border:1px solid; }
.callout-title { font-size:14px; font-weight:800; margin-bottom:2px; }
.callout p { font-size:14px; line-height:1.55; margin:0; }
.callout-info { background:#BCDAF5; border-color:#1565C0; color:#1565C0; }
.callout-warning { background:#fffbeb; border-color:#fde68a; color:#92400e; }
.callout-tip { background:#E8F9E9; border-color:#3ECB47; color:#3ECB47; }
.table-docs { border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:27px; }
.table-docs table { margin:0; font-size:14px; }
.table-docs th { background:#F2F3F3; font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.toc { position: sticky; top: 100px; align-self: start; height: fit-content; max-height: calc(100vh - 130px); overflow-y: auto; padding-top: 56px; }
.toc-title { font-size: 12px; text-transform: uppercase; letter-spacing:.12em; color: var(--muted); font-weight:800; margin-bottom:13px; }
.toc a { display:block; padding:8px 12px; border-left:2px solid transparent; color:var(--muted); border-radius:0 8px 8px 0; font-size:14px; }
.toc a.level-3 { margin-left:15px; }
.toc a.active, .toc a:hover { color: var(--primary); border-left-color: var(--primary); background:#f3f4f7; }

.toc::-webkit-scrollbar {
  width: 4px;
}

.toc::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 10px;
}

.feedback-box { background:#F2F3F3; border:1px solid var(--line); border-radius:15px; padding:18px; display:flex; align-items:center; justify-content:space-between; gap:15px; }
.related-card { border:1px solid var(--line); border-radius:12px; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; background-color: #fff; }
.reading-progress { position:fixed; top:0; left:0; height:3px; width:0; background:#050515; z-index:3000; transition: width .1s linear; }
.search-modal { position:fixed; inset:0; z-index:4000; display:none; align-items:flex-start; justify-content:center; padding:76px 18px 0; }
.search-modal.open { display:flex; }
.search-backdrop { position:absolute; inset:0; background:rgba(13,13,18,.24); backdrop-filter: blur(2px); }
.search-panel { position:relative; width:min(100%, 760px); background:#fff; border:1px solid #dfe0e7; box-shadow:0 24px 70px rgba(0,0,0,.18); border-radius:22px; overflow:hidden; }
.search-field-row { height:72px; display:flex; align-items:center; gap:15px; padding:0 20px; border-bottom:1px solid var(--line); }
.search-field-row .form-control { border:0; box-shadow:none; font-size:20px; padding:0; }
.esc-btn { border:1px solid var(--line); border-radius:10px; color:var(--muted); }
.search-results { max-height:430px; overflow:auto; padding:13px 0; }
.search-item { width:100%; border:0; background:#fff; display:flex; gap:14px; padding:13px 22px; text-align:left; align-items:flex-start; }
.search-item:hover { background:#f5f6f8; }
.search-item-title { font-weight:700; }
.search-item-sub {
  color: var(--muted);
  font-size: 13px;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  overflow-wrap: anywhere;
  line-height: 1.45;
}
.search-footer { display:flex; gap:24px; background:#f5f6f8; border-top:1px solid var(--line); padding:12px 20px; color:var(--muted); font-size:13px; }
.empty-search { padding:44px 20px; text-align:center; color:var(--muted); }
@media (max-width: 991.98px) {
  .article-layout { grid-template-columns: 1fr; gap: 0; }
  .toc { display:none; }
  .article-main { max-width: none; }
  .container-docs, .container-narrow { padding-left: 22px; padding-right: 22px; }
  .hero { padding: 76px 0; }
}
@media (max-width: 767.98px) {
  .navbar-collapse { order:4; width:100%; }
  .hero h1 { font-size: 40px; }
  .hero p { font-size: 17px; }
  .hero-search { height:58px; border-radius:16px; }
  .section-pad { padding: 48px 0; }
  .category-head-grid { align-items:flex-start; }
  .category-head p, .article-list-card p { font-size:15px; }
  .filter-row { align-items:flex-start; flex-direction:column; }
  .article-list-card { padding:21px; }
  .footer { padding-top:42px; }
  .search-footer { display:none; }
  .search-modal { padding-top:30px; }
}

/* Mobile overflow fixes for article.html */
html,
body {
  max-width: 100%;
}

.article-page,
.article-layout,
.article-main,
.article-body {
  min-width: 0;
  max-width: 100%;
}

.article-main,
.article-body,
.article-body p,
.article-body li,
.article-body blockquote,
.article-body .lead {
  overflow-wrap: break-word;
  word-break: normal;
}

.code-block,
.table-docs,
.callout,
.feedback-box,
.related-card {
  min-width: 0;
  max-width: 100%;
}

.code-head {
  min-width: 0;
  gap: 12px;
}

.code-head span,
.copy-btn {
  min-width: 0;
}

.code-block pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-docs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-docs table {
  width: 100%;
}

.related-card span,
.feedback-box strong,
.callout > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  .container-docs,
  .container-narrow {
    padding-left: 16px;
    padding-right: 16px;
  }

  .article-header h1 {
    font-size: clamp(32px, 10vw, 40px);
    letter-spacing: -.045em;
  }

  .article-header .lead {
    font-size: 17px;
  }

  .article-meta {
    gap: 10px 16px;
  }

  .code-block pre {
    padding: 16px;
    font-size: 12.5px;
  }

  .code-head {
    padding: 9px 12px;
  }

  .callout {
    padding: 14px;
  }

  .feedback-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .related-card {
    gap: 10px;
  }

  .related-card .small {
    white-space: nowrap;
  }
}