@layer foundation-layout, foundation-weather, foundation-page, foundation-design, foundation-default, components-default, components-design, components-page, components-weather, components-layout;
@layer foundation-default{.api-credits-card{grid-column: 1 / -1;box-sizing: border-box;width: min(calc(100% - 24px), 960px);margin: 0 auto;padding: 24px clamp(18px, 4vw, 34px);border: 1px solid var(--ui-border);border-radius: 18px;background: var(--ui-surface);box-shadow: var(--ui-shadow);color: var(--ui-text);text-align: center}
.api-credits-card__icon{display: grid;place-items: center;width: 46px;height: 46px;margin: 0 auto 8px;color: var(--ui-accent)}
.api-credits-card__icon svg{width: 29px;height: 29px;overflow: visible;fill: none;stroke: currentColor;stroke-width: 3;stroke-linecap: round;stroke-linejoin: round}
.api-credits-card__icon circle{fill: var(--ui-surface)}
.api-credits-card h2{margin: 0;color: var(--ui-heading);-webkit-text-fill-color: currentColor;font: 750 clamp(1.35rem, 2.2vw, 1.65rem)/1.15 Inter, ui-sans-serif, system-ui, sans-serif;letter-spacing: 0}
.api-credits-card__intro{max-width: 760px;margin: 9px auto 0;color: var(--ui-muted);font-size: .96rem;line-height: 1.5}
.api-credits-card__providers{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));align-items: stretch;gap: 12px;max-width: 960px;margin: 20px auto 0;text-align: left}
.api-credits-card__providers > .api-credits-source:only-child{grid-column: 1 / -1;justify-self: center;width: min(100%, 474px)}
.api-credits-source{box-sizing: border-box;display: flex;flex-direction: column;align-items: flex-start;min-width: 0;min-height: 164px;padding: 17px 18px 16px;border: 1px solid var(--ui-border);border-radius: 13px;background: var(--ui-raised)}
.api-credits-source h3{margin: 0;color: var(--ui-heading);-webkit-text-fill-color: currentColor;font: 780 1rem/1.25 Inter, ui-sans-serif, system-ui, sans-serif;letter-spacing: .005em;text-align: left}
.api-credits-source p{margin: 8px 0 15px;color: var(--ui-muted);-webkit-text-fill-color: currentColor;font-size: .88rem;line-height: 1.5;text-align: left}
.api-credits-source a{display: inline-flex;align-items: center;gap: 6px;min-height: 34px;margin-top: auto;padding: 6px 11px;border: 1px solid var(--ui-button-border);border-radius: 8px;background: var(--ui-button-bg);color: var(--ui-accent);-webkit-text-fill-color: currentColor;font-size: .88rem;font-weight: 700;line-height: 1.2;text-decoration: none;transition: border-color .16s ease, background .16s ease, color .16s ease}
.api-credits-source a:hover, .api-credits-source a:focus-visible{border-color: var(--ui-accent);background: var(--ui-button-hover);color: var(--ui-text);-webkit-text-fill-color: currentColor}
.api-credits-card__note{max-width: 820px;margin: 13px auto 0;color: var(--ui-muted);font-size: .8rem;line-height: 1.45}
@media (max-width: 600px){.api-credits-card{padding: 21px 14px}
.api-credits-card__providers{grid-template-columns: minmax(0, 1fr);width: 100%}
.api-credits-source{min-height: 0}}}
@layer components-default{.api-credits-card{display: block;align-self: start;height: auto;min-height: 0}
html body #pageApiCreditsCard.api-credits-card{display: block}}
@layer components-design{body #pageApiCreditsCard .api-credits-source{display: block;min-height: 0;padding: 14px 16px}
body #pageApiCreditsCard .api-credits-source__head{display: grid;grid-template-columns: minmax(0, 1fr) auto;align-items: center;gap: 10px;width: 100%;min-width: 0;max-width: none;margin: 0;padding: 0;border: 0;background: none}
body #pageApiCreditsCard .api-credits-source__head h3{min-width: 0;margin: 0;font: 600 15px/1.4 var(--ui-font, Inter, sans-serif);letter-spacing: 0;text-align: left;white-space: normal;overflow-wrap: anywhere}
body #pageApiCreditsCard .api-credits-source__head a{justify-self: end;min-height: 32px;margin: 0;padding: 6px 8px;font: 600 12px/1.2 var(--ui-font, Inter, sans-serif);white-space: nowrap}
body #pageApiCreditsCard .api-credits-source p{margin: 8px 0 0}}

/* A quieter, compact reference area distinct from the interactive page cards. */
html body #pageApiCreditsCard.api-credits-card {
  padding: 20px clamp(14px, 2.5vw, 26px);
  border: 1px solid #4b545c;
  background: linear-gradient(155deg, #2a3035, #20252a);
  color: #e4e9ec;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}
html body #pageApiCreditsCard .api-credits-card__icon {
  color: #b2c0c7;
}
html body #pageApiCreditsCard .api-credits-card__icon circle {
  fill: #252b30;
}
html body #pageApiCreditsCard #pageApiCreditsTitle {
  margin: 0;
  color: #e7ecee;
  -webkit-text-fill-color: currentColor;
}
html body #pageApiCreditsCard :is(.api-credits-card__intro, .api-credits-card__note) {
  color: #bdc8ce;
  -webkit-text-fill-color: currentColor;
  font-size: 13px;
  line-height: 1.45;
}
html body #pageApiCreditsCard .api-credits-card__providers {
  gap: 9px;
  margin-top: 15px;
}
html body #pageApiCreditsCard .api-credits-source {
  min-height: 0;
  padding: 13px 14px;
  border: 1px solid #4d565d;
  background: #30363b;
  color: #e2e8eb;
  text-align: left;
  box-shadow: none;
}
html body #pageApiCreditsCard .api-credits-source__head h3 {
  color: #e3e9ec;
  -webkit-text-fill-color: currentColor;
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
}
html body #pageApiCreditsCard .api-credits-source p {
  width: 100%;
  max-width: none;
  margin: 6px 0 0;
  color: #c3cdd2;
  -webkit-text-fill-color: currentColor;
  font-size: 13px;
  line-height: 1.42;
  text-align: left;
}
html body #pageApiCreditsCard .api-credits-source__head a {
  border-color: #65727b;
  background: #3a444c;
  color: #dce7ec;
  -webkit-text-fill-color: currentColor;
}
html body #pageApiCreditsCard .api-credits-source__head a:hover,
html body #pageApiCreditsCard .api-credits-source__head a:focus-visible {
  border-color: #a5bbc6;
  background: #48545e;
  color: #fff;
}
@media (max-width: 600px) {
  html body #pageApiCreditsCard.api-credits-card { padding: 18px 12px; }
  html body #pageApiCreditsCard .api-credits-source { padding: 12px; }
}

/* Center the shared credits heading, introduction, and closing note on every page. */
html body #pageApiCreditsCard.api-credits-card { text-align: center; }
html body #pageApiCreditsCard > .api-credits-card__icon { display: none; }
html body #pageApiCreditsCard #pageApiCreditsTitle {
  width: 100%;
  margin: 0;
  color: #b5bec4;
  -webkit-text-fill-color: currentColor;
  font-style: italic;
  text-align: center;
}
html body main #pageApiCreditsCard.api-credits-card > .api-credits-card__intro {
  box-sizing: border-box;
  width: min(100%, 760px);
  max-width: 760px;
  margin: 9px auto 0;
  text-align: center;
}
html body main #pageApiCreditsCard.api-credits-card > .api-credits-card__note {
  box-sizing: border-box;
  width: min(100%, 820px);
  max-width: 820px;
  margin: 13px auto 0;
  text-align: center;
}
@layer components-layout {
  html body main #pageApiCreditsCard.api-credits-card {
    width: min(calc(100% - 24px), 960px);
    max-width: 960px;
    margin: 0 auto;
  }
}