/* Shared typography, page shell and prose styles come from the docs theme. */
:root { color-scheme: light; }
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 2rem; min-height: 2rem; padding: .375rem .75rem; border: 1px solid var(--faint); border-radius: var(--r-sm); background: var(--bg); color: var(--fg); font-size: var(--text-small); line-height: 1.5; cursor: pointer; }
button:hover { background: var(--panel); }
button.primary { background: var(--primary); border-color: var(--primary); color: var(--bg); }
button.primary:hover { background: var(--primary-press); border-color: var(--primary-press); }
button:disabled { cursor: progress; opacity: .6; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
input:not([type=checkbox]), select { min-width: 0; width: 100%; min-height: 2rem; padding: .5rem .625rem; border: 1px solid var(--faint); border-radius: var(--r-sm); background: var(--bg); font-size: var(--text-small); line-height: 1.5; }
input::placeholder { color: var(--dim); opacity: 1; }
label { font-size: var(--text-small); }
label input { display: block; margin-top: .5rem; }
.top .brand, .top .gh { position: relative; }
.top .brand::before, .top .gh::before { content: ''; position: absolute; inset: -.5rem; }
#categories a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.count { color: var(--dim); font-variant-numeric: tabular-nums; }
.intro-actions { margin: 1rem 0; }
.toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .75rem; align-items: center; }
.search-field { grid-column: 1 / -1; position: relative; }
.search-field input { padding-right: 2.5rem; }
kbd { position: absolute; right: .625rem; top: 50%; transform: translateY(-50%); padding: 0 .35rem; font: inherit; font-size: var(--text-small); color: var(--dim); background: var(--panel); border: 1px solid var(--line); pointer-events: none; }
.view-switch { display: flex; gap: .5rem; }
.view-switch button { border-color: transparent; color: var(--dim); }
.view-switch button[aria-pressed=true] { background: var(--code-bg); border-color: var(--faint); color: var(--fg); }
#catalog-status { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; color: var(--dim); font-size: var(--text-small); }
#results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.extension-card { display: flex; flex-direction: column; min-width: 0; padding: .875rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.extension-card:hover, .extension-card:focus-within { border-color: var(--primary); }
.card-main { display: block; flex: 1; color: var(--fg); text-decoration: none; }
.card-main:hover { color: var(--fg); }
.card-main:hover h3 { color: var(--link-hover); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: var(--dim); font-size: var(--text-small); }
.tag { color: var(--dim); font-size: var(--text-small); }
.content .card-main h3 { font-size: var(--text-body); margin: .5rem 0; color: var(--link); text-decoration: underline; text-decoration-color: var(--sel); text-underline-offset: 2px; }
.content .card-description { color: var(--dim); font-size: var(--text-small); margin: .5rem 0; text-align: start; }
.repository-link { display: inline-flex; align-items: center; min-height: 2rem; width: fit-content; max-width: 100%; color: var(--dim); font-size: var(--text-small); overflow-wrap: anywhere; }
.card-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--line-soft); color: var(--dim); font-size: var(--text-small); }
.card-meta span:first-child { color: var(--fg); }
#results[data-view=list] { grid-template-columns: 1fr; gap: 0; }
#results[data-view=list] .extension-card { border-width: 0 0 1px; padding: 1rem 0; }
#results[data-view=list] .extension-card:first-child { border-top-width: 1px; }
#results[data-view=list] .card-meta { border: 0; padding: 0; margin: 0; }
#results[data-view=list] .card-top { justify-content: flex-start; gap: 1rem; }
.empty { grid-column: 1 / -1; }
.content .empty h2 { border: 0; padding: 0; margin: 1rem 0; }
.back-button, button.quiet { border-color: transparent; background: transparent; color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.back-button { margin: 0 0 1.5rem; padding-left: 0; }
.detail-heading h1:focus { outline: none; }
.detail-heading > .tag { margin-right: 1rem; }
.facts { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,3fr); margin: 1.4rem 0; border: 1px solid var(--line); font-size: var(--text-small); line-height: 1.5; }
.facts dt, .facts dd { padding: .5rem .625rem; border-bottom: 1px solid var(--line-soft); }
.facts dt { color: var(--dim); background: var(--panel); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts dt:last-of-type, .facts dd:last-child { border-bottom: 0; }
.actions, .topics { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-size: var(--text-small); }
.topics { margin-top: 1.4rem; }
.dependencies { font-size: var(--text-small); }
.help { font-size: var(--text-small); color: var(--dim); }
.content .security-note { margin-top: 1.5rem; padding-left: 1rem; border-left: 2px solid var(--primary); font-size: var(--text-small); color: var(--dim); text-align: start; }
.notice:empty { display: none; }
.notice { color: var(--dim); font-size: var(--text-small); }
dialog { width: min(35rem,calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--fg); overflow: auto; }
dialog::backdrop { background: var(--fg); opacity: .32; }
.dialog-head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.dialog-head .help { margin: 0 0 .5rem; }
.dialog-head h2 { margin: 0; padding: 0; border: 0; }
dialog form label { display: block; margin-top: 1.25rem; }
.optional { color: var(--dim); margin-left: .5rem; }
#folder-help { margin: .625rem 0 1.5rem; }
#submit-status { color: var(--dim); font-size: var(--text-small); }
#submit-status:empty { margin: 0; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.trust-note { padding-top: 1rem; margin-top: 1.5rem; border-top: 1px solid var(--line-soft); }
.skip { position: absolute; top: -100px; left: 1rem; background: var(--bg); padding: .75rem; z-index: 70; }
.skip:focus { top: .5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (pointer: coarse) {
  button, input:not([type=checkbox]), select, .repository-link, .actions a { min-height: 2.75rem; }
  button { min-width: 2.75rem; }
  input:not([type=checkbox]), select { font-size: 1rem; }
  .actions a { display: inline-flex; align-items: center; }
  kbd { display: none; }
}
@media (min-width: 821px) and (max-width: 1200px), (max-width: 560px) {
  #results { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .navtoggle:not(:checked) ~ .shell .side { visibility: hidden; }
  .toolbar { gap: .5rem; }
  .search-field input { padding-right: .625rem; }
  kbd { display: none; }
  .extension-card { padding: .75rem; }
  dialog { padding: 1rem; }
}