/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  /* -webkit-font-smoothing: antialiased; */
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: pretty;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}
:root {
  line-height: 1.4;
  font-size: 16px;
}

html {
  --pl-viewport-margins-gutter: 1em !important;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.page__layout {
  flex-grow: 1;
}

pennlibs-header {
  display: block;
  border-bottom: 2px solid var(--pl-color-gray-blue-light);
  --pl-viewport-margins-max-width: 100%;
}

pennlibs-hero pennlibs-header {
  border-bottom: none;
}

* {
  accent-color: var(--pl-color-fg-accent);
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

*:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--pl-color-bg-accent), 0 0 0 4px var(--pl-color-penn-blue);
}

body {
  margin: 0;
  font-family: var(--pl-font-family);
  color: var(--pl-color-fg-default);
  
  --heading-line-height: 1;
}

li {
  margin-bottom: 0.25rem;
}

code {
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  background: var(--pl-color-bg-subtle);
  padding: .125rem .25rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--pl-border-radius-subtle);
}

strong {
  font-weight: 600;
}

pre {
  padding: 1rem;
  border: 1px solid var(--pl-color-fg-default);
  box-shadow: rgba(140, 149, 159, 0.2) 0px 3px 6px 0px;
  width: auto;
  overflow-x: initial;
  border-radius: var(--pl-border-radius-subtle);
}

pre code {
  padding: 0;
  background: none;
  color: var(--pl-color-fg-default);
  font-size: 0.75rem;
  white-space: pre-wrap;
}

kbd {
  display: inline-block;
  padding: 0.125rem 0.25rem;
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--pl-color-fg-default);
  vertical-align: middle;
  background-color: var(--pl-color-bg-subtle);
  border: solid 1px var(--pl-color-fg-subtle);
  border-bottom-color: var(--pl-color-fg-subtle);
  border-radius: var(--pl-border-radius-subtle);
  box-shadow: inset 0 -1px 0 var(--pl-color-fg-subtle);
}

mark {
  background: var(--pl-color-bg-attention);
  font-weight: 500;
}

.website-header__version-link {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
  font-size: 1rem;
  color: var(--pl-color-fg-subtle);
  text-decoration: none;
  margin-top: 0.25rem;

  @media (max-width: 620px) {
    display: none;
  }
}

pennlibs-hero .website-header__version-link {
  color: var(--pl-color-gray-blue-light);
}

.website-header__version-link:hover {
  text-decoration: underline;
}
.lede {
  font-size: var(--pl-font-size-l);
  max-width: 60ch;
}

.prose .lede {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.section {
  padding: var(--pl-space-3xl) 0;

  @media (max-width: 640px) {
    padding: var(--pl-space-2xl) 0;
  }
}

.section p,
.section a {
  max-width: 46ch;
}

.section:nth-child(odd) {
  background: #eeeff4;
}

.section h2 {
  margin-top: 0;
}
a {
  color: var(--pl-color-fg-accent);
  text-decoration: underline;
  text-underline-offset: var(--pl-link-text-underline-offset);
  text-decoration-thickness: var(--pl-link-text-decoration-thickness);
}

a:hover {
  text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);
}
.button {
  display: inline-block;
  padding: 0.5rem 2rem;
  color: var(--pl-color-fg-default);
  background: var(--pl-color-bg-subtle);
  font-weight: 500;
  border-radius: var(--pl-border-radius);
  box-sizing: border-box;
  outline: none;
  text-underline-offset: var(--pl-link-text-underline-offset);
  text-decoration-thickness: var(--pl-link-text-decoration-thickness);
}

.button--priority {
  color: var(--pl-color-fg-on-emphasis);
  background: var(--pl-color-bg-accent-emphasis);
}

.button:hover {
  cursor: pointer;
  text-decoration: underline;
}
.cards {
  all: unset;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--pl-color-bg-default);
  border: 1px solid var(--pl-color-fg-default);
  box-shadow: -0.25rem 0.25rem 0 var(--pl-color-fg-accent);
  color: var(--wdg-color-tonal-black);
  min-height: 6rem;
  padding: 1rem 1.25rem;
  justify-content: space-between;
  border-radius: var(--pl-border-radius-subtle);
}

.card__heading {
  all: unset;
  font-size: 1.25rem;
  font-weight: 500;
}

.card__description {
  all: unset;
  color: var(--pl-color-fg-subtle);
}

.card__link {
  color: var(--pl-color-fg-default);
  text-decoration: none;
}

.card__link:hover {
  text-decoration: underline;
}

.card__link::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.breadcrumbs {
  all: unset;
  display: block;
}

.crumb {
  all: unset;
}

.crumb:not(:last-child):after {
  display: inline-block;
  content: "/";
  color: var(--pl-color-fg-subtle);
  padding: 0 0.5rem;
  font-size: 0.875rem;
}

.crumb a {
  display: inline-flex;
  color: var(--pl-color-fg-default);
  text-decoration: none;
  align-items: center;
  gap: 0.5rem;
}

.crumb a:hover {
  text-decoration: underline;
  text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);
}

.crumb a[aria-current=true] {
  text-decoration: none;
  color: var(--pl-color-fg-default);
}

.crumb a[aria-current=true]:hover {
  text-decoration: underline;
}
table.table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
.table caption,
.table th {
  text-align: left;
}
.table caption {
  color: var(--pl-color-fg-subtle);
}
.table tr > * {
  border-bottom: solid 1px var(--pl-color-bg-subtle-brand);
  padding: 1rem 0;
  vertical-align: top;
}
.table tr > *:not(:last-child) {
  padding-right: 1rem;
}
.table th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.075rem;
  vertical-align: middle;
  font-weight: 600;
}
.table p+p {
  margin-top: var(--pl-space-xs);
}
.table tr > *[data-th]:before {
  content: attr(data-th) ':\00a0';
  display: none;
}
.table tr > td[data-th]:before {
  font-weight: 600;
}
@media only screen and (max-width: 1200px) {
  .table--responsive-large thead {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
  }
  .table--responsive-large tr > * {
    display: block;
  }
  .table--responsive-large tr > *:not(:last-child) {
    border-bottom: 0;
    padding-bottom: 0;
    padding-right: 0;
  }
  .table--responsive-large tr > *[data-th]:not(th) + *[data-th] {
    padding-top: 0;
  }
  .table--responsive-large tr > *[data-th]:before {
    display: inline;
  }
}
@media only screen and (max-width: 920px) {
  .table--responsive-medium thead {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
  }
  .table--responsive-medium tr > * {
    display: block;
  }
  .table--responsive-medium tr > *:not(:last-child) {
    border-bottom: 0;
    padding-bottom: 0;
    padding-right: 0;
  }
  .table--responsive-medium tr > *[data-th]:not(th) + *[data-th] {
    padding-top: 0;
  }
  .table--responsive-medium tr > *[data-th]:before {
    display: inline;
  }
}
@media only screen and (max-width: 720px) {
  .table--responsive-small thead {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
  }
  .table--responsive-small tr > * {
    display: block;
  }
  .table--responsive-small tr > *:not(:last-child) {
    border-bottom: 0;
    padding-bottom: 0;
    padding-right: 0;
  }
  .table--responsive-small tr > *[data-th]:not(th) + *[data-th] {
    padding-top: 0;
  }
  .table--responsive-small tr > *[data-th]:before {
    display: inline;
  }
}
.table--responsive thead {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}
.table--responsive tr > * {
  display: block;
}
.table--responsive tr > *:not(:last-child) {
  border-bottom: 0;
  padding-bottom: 0;
  padding-right: 0;
}
.table--responsive tr > *[data-header]:not(th) + *[data-header] {
  padding-top: 0;
}
.table--responsive tr > *[data-header]:before {
  content: attr(data-header) ':\00a0';
}
.table--responsive tr > td[data-header]:before {
  font-weight: 600;
}
.table-colors {
  margin-top: 1rem;
}

.table-colors__preview {
  display: flex;
  min-height: 6rem;
  min-width: 8rem;
  padding: 0.5rem 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
  flex-direction: column;
  border-radius: var(--pl-border-radius-subtle);
}

.table-colors__contrast {
  padding: 0.25rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.table-colors__contrast-dot {
  height: 0.5rem;
  width: 0.5rem;
  display: inline-block;
  border-radius: 100%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}

.table-colors__contrast-ratio {
  font-size: var(--pl-font-size-s);
}

.table-colors__color-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

.table-colors__code {
  white-space: nowrap;
}

.table-colors__heading {
  margin: 0;
}
.prose {
  width: 100%;
  order: 2;
  margin: 3rem 0;

  @media (max-width: 1000px) {
    margin: 1rem 0;
  }
}

.prose > *:first-child {
  margin-top: 0;
}

.prose > * {
  text-wrap: pretty;
}

.prose > h2,
.prose > p,
.prose > h3,
.prose > ul,
.prose > ol {
  max-width: 36rem;
}

.prose > pre,
.prose .syntax-highlighter {
  margin-bottom: 1rem;
}

.prose > p,
.prose > ul {
  margin-bottom: 1.125em;
}

.prose > ul > li,
.prose > ol > li {
  margin: 0.5rem 0;
}

.prose .breadcrumbs {
  display: none;
  margin-bottom: 2rem;

  @media (max-width: 1000px) {
    display: block;
  }
}
.aside-nav {
  all: unset;
  background: #eeeff4;
  padding: 0.5rem 0;
  width: 14rem;
  flex-shrink: 0;

  @media (max-width: 1000px) {
    display: none;
  }
}

.aside-nav__item {
  all: unset;
  display: block;
}

.aside-nav > .aside-nav__item > .aside-nav__link {
  font-weight: 500;
}

.aside-nav__link {
  display: flex;
  gap: 0.5rem;
  color: var(--pl-color-fg-default);
  text-decoration: none;
  padding: 0.5rem var(--pl-viewport-margins-gutter);
  justify-content: space-between;
}

.aside-nav__link:hover,
.aside-nav__link[aria-current=true]:hover {
  text-decoration: underline;
  text-decoration-thickness: var(--pl-link-hover-text-decoration-thickness);
}

.aside-nav__link[aria-current=true] {
  font-weight: 600;
  text-decoration: underline;
}


.aside-nav__sublist {
  padding-left: 1rem;
}

/* .aside-nav__link[aria-current=true]:before {
  content: "•";
  padding-left: 0.125rem;
} */
.site-search {
  background: var(--pl-color-bg-default);
  box-shadow: rgba(140, 149, 159, 0.2) 0px 3px 6px 0px;
  border: solid 1px var(--pl-color-fg-subtle);
  margin-left: 0.5rem;
  width: 20rem;

  @media (max-width: 1000px) {
    margin-top: 1rem;
    width: 100%;
    margin-left: 0;
  }
}

.site-search__inner-container {
  display: flex;
  padding: 0.25rem;
  align-items: center;
}

.site-search,
.site-search__inner-container {
  border-radius: var(--pl-border-radius);
}

.site-search:focus-within {
  box-shadow: 0 0 0 1px var(--pl-color-fg-default), 0 0 0 3px var(--pl-color-bg-accent);
}

.site-search__icon {
  color: var(--pl-color-fg-subtle);
  align-self: baseline;
  margin-bottom: -4px;
  margin-left: 0.25rem;
  flex-shrink: 0;
}

.site-search input[type=search] {
  all: unset;
  flex-grow: 1;
  padding: 0.25rem;
  padding-left: 0.75rem;
  box-sizing: border-box;
}

.site-search input[type=search]::placeholder {
  all: unset;
  color: var(--pl-color-fg-default);
  font-size: 1em;
}

.site-search__icon {
  color: var(--pl-color-fg-default);
  padding: 0.25rem;
  padding-right: 0.25rem;
}

.site-search__results-container {
  background: #eeeff4;
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}

.site-search__results {
  margin-top: 2rem;
}

.site-search__result-counter {
  color: var(--pl-color-fg-subtle);
  padding-right: 0.25rem;
  font-size: 1rem;
}

.site-search__results-heading {
  margin: 0;
}

.site-search__results .card {
  gap: 0.25rem;
}

.site-search__results .card__description {
  margin-bottom: auto;
}

.site-search__excerpt {
  font-size: 0.75rem;
  display: -webkit-box;
  max-width: 400px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page__layout {
  display: flex;
  gap: 3rem;
}

.page__content {
  flex: 1;
  min-width: 0;
  max-width: 1920px;
  padding: 0 1rem;


  @media (min-width: 1001px) {
    margin-right: 3rem;
  }
}
.callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--pl-color-bg-subtle-brand);
  border-left-width: 0.25rem;
  border-radius: var(--pl-border-radius-subtle);
  border-left-color: var(--pl-color-fg-accent);
  font-size: 0.875rem;
}
/**
 * Editable Code Blocks Styles - GitHub Light Theme
 */

/* Main container */
.editable-code-block,
.syntax-highlighter {
  border: 1px solid var(--pl-color-fg-subtle);
  background: var(--pl-color-bg-subtle);
  overflow: hidden;
  box-shadow: rgba(140, 149, 159, 0.2) 0px 3px 6px 0px;
  border-radius: var(--pl-border-radius-subtle);
}


/* Content area */
.editable-code-block__content {
  display: flex;
  flex-direction: column;
  background: var(--pl-color-bg-subtle);
}

.editable-code-block__preview-container {  margin-bottom: 0;
}

/* Preview section */
.editable-code-block__preview-frame {
  display: block;
  width: 100%;
  border: none;
  background: var(--pl-color-white);
  border-radius: var(--pl-border-radius-subtle) var(--pl-border-radius-subtle) 0 0;
  resize: horizontal;
  max-width: 100%;
}

/* Actions */
.editable-code-block__actions {
  display: flex;
  padding: 1rem 0;
  gap: 0.5rem;
}

.editable-code-block__actions .button {
  border-radius: var(--pl-border-radius);
  padding: 0.25rem 1rem;
  font-size: 0.875rem;
  border: none;
}

/* Reset button - relies on design system .button class */
.editable-code-block__action-btn--reset,
.editable-code-block__action-btn--codepen {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.editable-code-block__editor-container {
  margin: 0.5rem 0;
}

/* Editor section */
.editable-code-block__editor-container .cm-editor {
  height: 100%;
  border-radius: 0;
  background: var(--pl-color-bg-subtle);
}

.editable-code-block__editor-container .cm-scroller {
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Disable line wrapping by default - override CodeMirror's .cm-lineWrapping styles */
.editable-code-block__editor-container .cm-lineWrapping {
  white-space: pre !important;
}

.editable-code-block__editor-container .cm-gutters {
  border: none;
  background: var(--pl-color-bg-subtle);
}

.editable-code-block .cm-editor.cm-focused {
  outline: none;
}

.editable-code-block__editor-section {
  background: var(--pl-color-bg-subtle);
  border-radius: 0 0 var(--pl-border-radius-subtle) var(--pl-border-radius-subtle);
}

.editable-code-block__editor-section .cm-gutters {
  color: var(--pl-color-fg-subtle);
}

.editable-code-block__editor-section .cm-activeLine {
  background: rgba(0, 0, 0, 0.05);
}

.editable-code-block__editor-section .cm-activeLineGutter {
  background: rgba(0, 0, 0, 0.075);
}

.editable-code-block__editor-section .ͼs {
  color: var(--pl-color-blue);
}

.editable-code-block__editor-section .ͼp {
  color: var(--pl-color-green);
}

.editable-code-block__editor-section .ͼu {
  color: var(--pl-color-gray-dark);
}

.editable-code-block__editor-section .ͼr {
  color: var(--pl-color-purple);
}

.editable-code-block__editor-section .ͼz {
  color: var(--pl-color-orange);
}

.editable-code-block__editor-section .ͼt {
  color: var(--pl-color-orange);
}