/* Wider content across the KB */
.md-grid { max-width: 1600px; }

/* --- Full-width API pages (no 100vw hack -> no stray scrollbar) --- */
.api-embed { display: block; width: 100%; height: 88vh; border: 0; }
.md-grid:has(.api-embed) { max-width: none; }
.md-content:has(.api-embed) .md-content__inner { max-width: none; margin: 0; }
.md-content:has(.api-embed) .md-content__inner::before { display: none; }

/* --- Sandbox access cards --- */
.sandbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1.2rem 0 0.5rem;
}
.sandbox-card {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  padding: 1.1rem 1.25rem 1.25rem;
  background: var(--md-default-bg-color);
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  display: flex;
  flex-direction: column;
}
.sandbox-card .badge {
  align-self: flex-start;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .18rem .6rem;
  border-radius: 999px;
  background: var(--md-primary-fg-color);
  color: #fff;
  margin-bottom: .5rem;
}
.sandbox-card .env {
  font-family: var(--md-code-font, monospace);
  font-size: .78rem;
  color: var(--md-default-fg-color--light);
  margin-bottom: .5rem;
  word-break: break-all;
}
.sandbox-card ol { margin: .2rem 0 .8rem; padding-left: 1.15rem; }
.sandbox-card ol li { margin: .4rem 0; line-height: 1.4; }
.sandbox-card .foot {
  margin-top: auto;
  font-size: .8rem;
  color: var(--md-default-fg-color--light);
  border-top: 1px solid var(--md-default-fg-color--lightest);
  padding-top: .6rem;
}

/* --- Homepage chooser cards --- */
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.4rem;
  margin: 1.8rem 0;
}
.home-card {
  display: block;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 16px;
  padding: 1.8rem;
  text-decoration: none;
  color: inherit;
  background: var(--md-default-bg-color);
  box-shadow: 0 2px 14px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.home-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  border-color: var(--md-primary-fg-color);
}
.home-card h2 { margin: 0 0 .5rem; border: 0; }
.home-card p { margin: 0 0 1rem; color: var(--md-default-fg-color--light); }
.home-card .home-cta { font-weight: 700; color: var(--md-primary-fg-color); }
.home-card .home-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  background: var(--md-primary-fg-color);
  margin-bottom: 1rem;
}
.home-card .home-icon svg { width: 1.7rem; height: 1.7rem; fill: #fff; }

/* --- Status badges (PM pages) --- */
.status {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .15rem .6rem;
  border-radius: 999px;
  white-space: nowrap;
}
.status.done      { background: #2e7d3222; color: #2e7d32; }
.status.progress  { background: #f57f1722; color: #f57f17; }
.status.blocked   { background: #c6282822; color: #c62828; }
.status.pending   { background: var(--md-default-fg-color--lightest); color: var(--md-default-fg-color--light); }
[data-md-color-scheme="slate"] .status.done     { color: #81c784; }
[data-md-color-scheme="slate"] .status.progress { color: #ffb74d; }
[data-md-color-scheme="slate"] .status.blocked  { color: #e57373; }

/* --- Delivery timeline --- */
.timeline { list-style: none; margin: 1.5rem 0; padding: 0; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: .55rem;
  top: .4rem;
  bottom: .4rem;
  width: 2px;
  background: var(--md-default-fg-color--lightest);
}
.timeline li { position: relative; padding: 0 0 1.4rem 2.2rem; margin: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .25rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--md-default-bg-color);
  border: 3px solid var(--md-default-fg-color--lighter);
}
.timeline li.done::before     { border-color: #2e7d32; background: #2e7d32; }
.timeline li.progress::before { border-color: #f57f17; }
.timeline li.blocked::before  { border-color: #c62828; }
.timeline .tl-date {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}
.timeline .tl-title { font-weight: 700; margin: .1rem 0; }
.timeline .tl-desc { font-size: .8rem; color: var(--md-default-fg-color--light); }

/* --- Go-live countdown --- */
.golive-banner {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  flex-wrap: wrap;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-left: 4px solid var(--md-primary-fg-color);
  border-radius: 12px;
  padding: 1rem 1.3rem;
  margin: 1.2rem 0;
  background: var(--md-default-bg-color);
}
.golive-banner .golive-days { font-size: 1.9rem; font-weight: 800; color: var(--md-primary-fg-color); }
.golive-banner .golive-label { color: var(--md-default-fg-color--light); }

/* --- Live checklist --- */
.live-checklist { margin: 1.2rem 0; }
.live-checklist .cl-item {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 10px;
  padding: .75rem 1rem;
  margin: .5rem 0;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
  background: var(--md-default-bg-color);
}
.live-checklist .cl-item:hover { border-color: var(--md-primary-fg-color); }
.live-checklist .cl-item input[type="checkbox"] {
  margin-top: .28rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--md-primary-fg-color);
  flex: none;
  cursor: pointer;
}
.live-checklist .cl-item .cl-text { flex: 1; }
.live-checklist .cl-item .cl-note {
  display: block;
  font-size: .75rem;
  color: var(--md-default-fg-color--light);
  margin-top: .15rem;
}
.live-checklist .cl-item.checked { opacity: .62; }
.live-checklist .cl-item.checked .cl-text > span:first-child { text-decoration: line-through; }
.cl-progress {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 1rem 0 1.3rem;
}
.cl-progress .cl-bar {
  flex: 1;
  height: .55rem;
  border-radius: 999px;
  background: var(--md-default-fg-color--lightest);
  overflow: hidden;
}
.cl-progress .cl-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--md-primary-fg-color);
  transition: width .25s ease;
}
.cl-progress .cl-count {
  font-size: .8rem;
  font-weight: 700;
  color: var(--md-default-fg-color--light);
  white-space: nowrap;
}

/* --- Decision-logic flow --- */
.flow {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.2rem 0 .4rem;
}
.flow-step {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  font-size: .82rem;
  padding: .7rem .9rem;
  border-radius: 10px;
  border: 1px solid transparent;
}
.flow-step.reject  { background: #c6282814; border-color: #c6282855; color: #b71c1c; }
.flow-step.hard    { background: #ef6c0014; border-color: #ef6c0055; color: #e65100; }
.flow-step.soft    { background: #f9a82514; border-color: #f9a82566; color: #b26a00; }
.flow-step.outcome { background: var(--md-primary-fg-color); border-color: var(--md-primary-fg-color); color: #fff; }
.flow-arrow { display: flex; align-items: center; color: var(--md-default-fg-color--light); font-weight: 700; }
.flow-note { font-size: .8rem; color: var(--md-default-fg-color--light); margin: 0 0 1.2rem; }
[data-md-color-scheme="slate"] .flow-step.reject { color: #ef9a9a; }
[data-md-color-scheme="slate"] .flow-step.hard   { color: #ffb74d; }
[data-md-color-scheme="slate"] .flow-step.soft   { color: #ffca62; }

/* --- Rule cards --- */
.rule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.rule-card {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  padding: 0 1.1rem 1rem;
  background: var(--md-default-bg-color);
  border-top: 4px solid var(--md-default-fg-color--lighter);
}
.rule-card.reject { border-top-color: #c62828; }
.rule-card.hard   { border-top-color: #ef6c00; }
.rule-card.soft   { border-top-color: #f9a825; }
.rule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .9rem 0 .1rem;
}
.rule-tag { font-weight: 800; font-size: .95rem; }
.rule-verdict {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color--light);
}
.rule-card.reject .rule-verdict { background: #c6282818; color: #c62828; }
.rule-card.hard   .rule-verdict { background: #ef6c0018; color: #e65100; }
.rule-card.soft   .rule-verdict { background: #f9a82522; color: #b26a00; }
.rule-sub { font-size: .8rem; color: var(--md-default-fg-color--light); margin: .1rem 0 .3rem; }
.rule-card ul { margin: .4rem 0 0; padding-left: 1.15rem; }
.rule-card li { margin: .35rem 0; line-height: 1.45; font-size: .86rem; }

/* --- Outcome pills --- */
.outcome-pills { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 .3rem; }
.outcome-pill {
  font-size: .8rem;
  font-weight: 700;
  padding: .4rem .9rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
.outcome-pill.approve { background: #2e7d3218; border-color: #2e7d3255; color: #2e7d32; }
.outcome-pill.review  { background: #f57f1718; border-color: #f57f1755; color: #e65100; }
.outcome-pill.reject  { background: #c6282818; border-color: #c6282855; color: #c62828; }
[data-md-color-scheme="slate"] .outcome-pill.approve { color: #81c784; }
[data-md-color-scheme="slate"] .outcome-pill.review  { color: #ffb74d; }
[data-md-color-scheme="slate"] .outcome-pill.reject  { color: #e57373; }

/* --- Password gate (client-side soft gate for /pm/) --- */
.pm-gate {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--md-default-bg-color);
}
.pm-gate-card {
  width: 100%;
  max-width: 380px;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 16px;
  padding: 2rem 1.8rem;
  background: var(--md-default-bg-color);
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
  text-align: center;
}
.pm-gate-card .pm-gate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--md-primary-fg-color);
  margin-bottom: 1rem;
}
.pm-gate-card .pm-gate-icon svg { width: 1.7rem; height: 1.7rem; fill: #fff; }
.pm-gate-card h2 { margin: 0 0 .3rem; border: 0; font-size: 1.2rem; }
.pm-gate-card p { margin: 0 0 1.2rem; color: var(--md-default-fg-color--light); font-size: .85rem; }
.pm-gate-card input {
  width: 100%;
  box-sizing: border-box;
  padding: .7rem .9rem;
  font-size: 1rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 10px;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  margin-bottom: .8rem;
}
.pm-gate-card input:focus { outline: none; border-color: var(--md-primary-fg-color); }
.pm-gate-card button {
  width: 100%;
  padding: .7rem 1rem;
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  background: var(--md-primary-fg-color);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.pm-gate-card button:hover { filter: brightness(1.08); }
.pm-gate-card .pm-gate-error {
  min-height: 1.1rem;
  font-size: .8rem;
  font-weight: 600;
  color: #c62828;
  margin: .2rem 0 0;
}
/* On a locked page, hide only the content — keep the header + top tabs
   visible and above the overlay so the nav persists across every page. */
.pm-gate-locked .md-container { visibility: hidden; }
.pm-gate-locked .md-header,
.pm-gate-locked .md-tabs { z-index: 2001; }

/* --- PM live-data states (data served by the Netlify function) --- */
.pm-loading { color: var(--md-default-fg-color--light); font-style: italic; }
.pm-loading::before {
  content: "";
  display: inline-block;
  width: .85em; height: .85em;
  margin-right: .5em;
  vertical-align: -.1em;
  border: 2px solid var(--md-default-fg-color--lightest);
  border-top-color: var(--md-primary-fg-color);
  border-radius: 50%;
  animation: pm-spin .7s linear infinite;
}
@keyframes pm-spin { to { transform: rotate(360deg); } }
.pm-error { color: #c62828; font-weight: 600; }
[data-md-color-scheme="slate"] .pm-error { color: #e57373; }

/* --- Brand guide typefaces --- */
.font-anek { font-family: "Anek Telugu", var(--md-text-font-family, sans-serif); }
.font-manrope { font-family: "Manrope", var(--md-text-font-family, sans-serif); }

/* --- Brand guide: hero header --- */
.brand-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 2rem;
  padding: 2.4rem 2.2rem;
  border-radius: 18px;
  background: linear-gradient(135deg, #040813 0%, #14182b 62%, #1b2136 100%);
  color: #FCFCFC;
}
.brand-hero::after {
  content: "";
  position: absolute;
  right: -60px; top: -70px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(116, 140, 252, .42), transparent 68%);
  pointer-events: none;
}
.brand-hero__mark {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #FCFCFC;
}
.brand-hero__mark .dot { color: #748CFC; }
.md-typeset .brand-hero h1 {
  color: #FCFCFC;
  margin: .5rem 0 .45rem;
  font-size: 2.15rem;
  font-weight: 800;
  line-height: 1.08;
  border: 0;
}
.brand-hero__sub {
  margin: 0;
  color: #A0AAFF;
  font-size: .95rem;
  letter-spacing: .01em;
}

/* --- Brand guide: color swatch cards --- */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .8rem;
  margin: 1.2rem 0;
}
.swatch-card {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  overflow: hidden;
  background: var(--md-default-bg-color);
  transition: transform .12s ease, box-shadow .12s ease;
}
.swatch-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .1); }
.swatch-card .sc-chip {
  height: 68px;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
}
.swatch-card .sc-body { padding: .6rem .8rem .7rem; }
.swatch-card .sc-name { display: block; font-weight: 700; font-size: .82rem; }
.swatch-card .sc-hex {
  display: block;
  font-family: var(--md-code-font-family, monospace);
  font-size: .76rem;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
  margin-top: .12rem;
}
.swatch-card .sc-meta { display: block; font-size: .68rem; color: var(--md-default-fg-color--light); margin-top: .18rem; }
.swatch-card--accent { border-color: #748CFC; box-shadow: 0 0 0 1px #748CFC inset; }

/* --- Brand guide: semantic color cards --- */
.sem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: .8rem;
  margin: 1.2rem 0;
}
.sem-card {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  padding: .9rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  background: var(--md-default-bg-color);
}
.sem-card .sem-badge {
  align-self: flex-start;
  padding: .32rem .85rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: .82rem;
}
.sem-card .sem-hex { font-family: var(--md-code-font-family, monospace); font-size: .72rem; color: var(--md-default-fg-color--light); }
.sem-card .sem-use { font-size: .78rem; line-height: 1.4; color: var(--md-default-fg-color--light); }

/* --- Brand guide: type ramp --- */
.type-ramp {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  overflow: hidden;
  margin: 1.2rem 0;
}
.type-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .85rem 1.1rem;
}
.type-row + .type-row { border-top: 1px solid var(--md-default-fg-color--lightest); }
.type-row .ty-sample {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--md-default-fg-color);
  line-height: 1.12;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.type-row .ty-spec {
  flex: 0 0 auto;
  text-align: right;
  font-size: .72rem;
  line-height: 1.35;
  color: var(--md-default-fg-color--light);
}
.type-row .ty-spec strong { color: var(--md-default-fg-color); }
@media screen and (max-width: 44em) {
  .type-row .ty-sample { font-size: 1.2rem !important; }
}

/* --- Integrations: collapsible vendor panels --- */
.vendor-panels {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin: 1rem 0;
}
.vendor-panel {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-left: 3px solid #748CFC;
  border-radius: 10px;
  background: var(--md-default-bg-color);
  overflow: hidden;
}
.vendor-panel > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  padding: .8rem 1rem;
  user-select: none;
}
.vendor-panel > summary::-webkit-details-marker { display: none; }
.vendor-panel > summary:hover { background: rgba(116, 140, 252, .07); }
.vendor-panel .vp-name {
  font-weight: 800;
  font-size: 1rem;
  color: var(--md-default-fg-color);
}
.vendor-panel .vp-env {
  font-family: var(--md-code-font-family, monospace);
  font-size: .74rem;
  color: var(--md-default-fg-color--light);
}
.vendor-panel > summary::after {
  content: "›";
  margin-left: auto;
  font-size: 1.3rem;
  line-height: 1;
  color: #748CFC;
  transition: transform .2s ease;
}
.vendor-panel[open] > summary::after { transform: rotate(90deg); }
.vendor-panel .vp-body { padding: 0 1rem 1rem; }
.vendor-panel .vp-body ol { margin: .2rem 0 .8rem; padding-left: 1.2rem; }
.vendor-panel .vp-body li { margin: .3rem 0; }
.vendor-panel .vp-body .foot {
  font-size: .8rem;
  color: var(--md-default-fg-color--light);
  border-top: 1px solid var(--md-default-fg-color--lightest);
  padding-top: .7rem;
}

/* --- Sidebar: collapsible section titles --- */
.md-sidebar--primary .md-nav__item--nested > .md-nav__link {
  font-weight: 700;
  color: #2E1065;
}
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__item--nested > .md-nav__link {
  color: #c3b0ff;
}

/* --- Footer meta bar --- */
.md-footer-meta {
  position: relative;
  background: var(--md-footer-bg-color);
}
.md-footer-meta::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--md-primary-fg-color) 22%, #A0AAFF 50%, var(--md-primary-fg-color) 78%, transparent);
  opacity: .8;
}
.md-footer-meta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .8rem 1.6rem;
  padding-top: .9rem;
  padding-bottom: .9rem;
}
.md-footer-meta .md-copyright {
  font-size: .7rem;
  line-height: 1.5;
}

/* --- Footer clock: local time in Sofia & Warsaw --- */
.md-footer-clock {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}
.md-footer-clock .fc-cap {
  font-size: .56rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--md-footer-fg-color--lighter);
  padding-right: .2rem;
}
.md-footer-clock .fc-city {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.md-footer-clock .fc-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.md-footer-clock .fc-name {
  font-size: .56rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--md-footer-fg-color--light);
}
.md-footer-clock .fc-time {
  font-size: .95rem;
  font-weight: 700;
  color: var(--md-footer-fg-color);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.md-footer-clock .fc-dot {
  width: .46rem;
  height: .46rem;
  border-radius: 50%;
  background: var(--md-primary-fg-color);
  box-shadow: 0 0 0 0 rgba(116, 140, 252, .5);
  animation: fc-pulse 2.6s ease-out infinite;
}
.md-footer-clock .fc-sep {
  width: 1px;
  height: 1.7rem;
  background: var(--md-footer-fg-color--light);
  opacity: .22;
}
@keyframes fc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(116, 140, 252, .45); }
  70%  { box-shadow: 0 0 0 .42rem rgba(116, 140, 252, 0); }
  100% { box-shadow: 0 0 0 0 rgba(116, 140, 252, 0); }
}
@media screen and (max-width: 44em) {
  .md-footer-meta__inner { justify-content: center; text-align: center; }
  .md-footer-clock { flex-wrap: wrap; margin-left: 0; justify-content: center; }
  .md-footer-clock .fc-cap {
    flex-basis: 100%;
    text-align: center;
    padding-right: 0;
    margin-bottom: .25rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .md-footer-clock .fc-dot { animation: none; }
}