/* Code showcase built by code.js: a centered heading over a dark editor window with file
   tabs, line numbers and syntax colors drawn from the dawn palette. */

.code-head { margin-bottom: calc(var(--spacing) * 10); text-align: center; }
.code-head .eyebrow { margin-bottom: calc(var(--spacing) * 2); }

/* Segmented switch between standards, in place of the eyebrow when a section shows several. */
.code-switch {
  display: inline-flex;
  gap: 2px;
  margin-bottom: calc(var(--spacing) * 6);
  padding: 3px;
  border-radius: 999px;
  background: var(--muted);
  box-shadow: inset 0 0 0 1px #0000000a;
}
.code-switch button {
  height: calc(var(--spacing) * 8);
  padding: 0 calc(var(--spacing) * 4);
  border-radius: 999px;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  transition: color var(--default-transition-duration), background-color var(--default-transition-duration);
}
.code-switch button:hover { color: var(--primary); }
.code-switch [aria-pressed="true"] { background: var(--background); color: var(--primary); box-shadow: 0 1px 2px #0000001a, 0 0 0 1px #0000000a; }
.code-switch button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.code-repo { margin-top: calc(var(--spacing) * 6); }

.code-intro {
  max-width: var(--container-xl);
  margin: calc(var(--spacing) * 4) auto 0;
  color: var(--muted-foreground);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  text-wrap: balance;
}

.code-window {
  --code-bg: var(--color-mist-950);
  max-width: var(--container-4xl);
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  corner-shape: superellipse(var(--squircle-factor));
  background: var(--code-bg);
  color: #e4e6eb;
  box-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
}

.code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 2);
  border-bottom: 1px solid #ffffff14;
}
.code-tabs { display: flex; gap: calc(var(--spacing) * 1); min-width: 0; overflow-x: auto; scrollbar-width: none; }

.code-tabs button,
.code-copy {
  flex-shrink: 0;
  height: calc(var(--spacing) * 8);
  padding: 0 calc(var(--spacing) * 3);
  border-radius: var(--radius-lg);
  corner-shape: superellipse(var(--squircle-factor));
  color: #ffffff8c;
  font-size: var(--text-xs);
  white-space: nowrap;
  transition: color var(--default-transition-duration), background-color var(--default-transition-duration);
}
.code-tabs button { font-family: var(--font-mono); }
.code-tabs button:hover, .code-copy:hover { color: #fff; }
.code-tabs [aria-selected="true"] { background: #ffffff14; color: #fff; }
.code-copy { border: 1px solid #ffffff1f; font-weight: var(--font-weight-medium); }

.code-window :focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.code-panel {
  display: flex;
  max-height: calc(var(--spacing) * 130);
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.75;
  scrollbar-color: #ffffff26 transparent;
}
.code-panel[hidden] { display: none; }
.code-panel pre { margin: 0; font: inherit; }

.code-gutter {
  position: sticky;
  left: 0;
  padding: calc(var(--spacing) * 5) calc(var(--spacing) * 3) calc(var(--spacing) * 5) calc(var(--spacing) * 4);
  background: var(--code-bg);
  color: #ffffff38;
  text-align: right;
  user-select: none;
}
.code-body { flex: 1; padding: calc(var(--spacing) * 5) calc(var(--spacing) * 6) calc(var(--spacing) * 5) calc(var(--spacing) * 2); tab-size: 4; }

.tok-comment { color: #8a8f9c; }
.tok-tag { color: #b7a3ea; }
.tok-keyword { color: #c4a5ff; }
.tok-type { color: #8fd3f7; }
.tok-fn { color: #fdbf94; }
.tok-string { color: #f7a8cf; }
.tok-number { color: #f6d27a; }

.code-link {
  display: block;
  width: fit-content;
  margin: calc(var(--spacing) * 6) auto 0;
  color: var(--brand-content);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: dotted underline color-mix(in oklab, var(--brand) 50%, transparent) 2px;
  text-underline-offset: 4px;
}
.code-link:hover { text-decoration-style: solid; }

@media (min-width: 40rem) {
  .code-panel { font-size: 13px; }
  .code-gutter { padding-left: calc(var(--spacing) * 5); }
}
@media (min-width: 48rem) {
  .code-head { margin-bottom: calc(var(--spacing) * 10); }
  .code-intro { font-size: var(--text-lg); line-height: var(--text-lg--line-height); }
  .code-head .eyebrow { margin-bottom: calc(var(--spacing) * 6); }
  .capability-title + .code-intro { margin-top: calc(var(--spacing) * 5); }
}
@media (min-width: 80rem) {
  .capability-title + .code-intro { margin-top: calc(var(--spacing) * 6); }
}