/* tcm docs: the forge's colours, as the home page, the forge, the studio and the registry have them */
:root { color-scheme: light dark;
  --bg:#fff; --bg2:#f6f8fa; --bg3:#eef1f4; --fg:#1f2328; --dim:#59636e; --line:#d1d9e0; --acc:#0969da; --accbg:#ddf4ff;
  --ok:#1a7f37; --warn:#9a6700; --warnbg:#fff8c5;
  --k:#cf222e; --s:#0a3069; --n:#0550ae; --c:#6e7781; --f:#8250df; --t:#953800;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (prefers-color-scheme: dark) { :root {
  --bg:#0e1117; --bg2:#151b23; --bg3:#1c2330; --fg:#e6edf3; --dim:#8d96a0; --line:#2a313c; --acc:#4493f8; --accbg:#121d2f;
  --ok:#3fb950; --warn:#d29922; --warnbg:#272115;
  --k:#ff7b72; --s:#a5d6ff; --n:#79c0ff; --c:#8b949e; --f:#d2a8ff; --t:#ffa657; } }
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); scroll-padding-top: 72px; }
body { margin: 0; font: 15px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--acc); text-decoration: none; } a:hover { text-decoration: underline; }
.rule { display: none; }

/* the bar along the top, as the home page has it */
header.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg2) 85%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
header.top .bar { max-width: 1280px; margin: 0 auto; padding: 0 24px; height: 56px; display: flex; align-items: center; gap: 28px; }
.logo { font-size: 17px; font-weight: 600; color: var(--fg); display: inline-flex; gap: 8px; align-items: center; } .logo:hover { text-decoration: none; }
.mark { width: 22px; height: 22px; border-radius: 6px; background: var(--acc); display: inline-block; flex: none; }
header.top .links { display: flex; gap: 20px; font-size: 14px; }
header.top .links a { color: var(--dim); } header.top .links a:hover { color: var(--fg); text-decoration: none; }
header.top .links a.on { color: var(--fg); font-weight: 600; }

.site { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0 56px; max-width: 1280px; margin: 0 auto; padding: 32px 24px 80px; }
/* a page with no menu (the code browser's list of codebases) */
.site.single { grid-template-columns: minmax(0, 1fr); max-width: 1040px; }
.codebases { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 28px; max-width: none; }
main > .codebases { max-width: none; }
.cb { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.cb .cb-name { font: 600 16px var(--mono); color: var(--fg); } .cb .cb-name:hover { color: var(--acc); text-decoration: none; }
.cb p { margin: 0; color: var(--dim); font-size: 14px; flex: 1; }
.cb-links { display: flex; gap: 16px; margin-top: 10px; font-size: 14px; }
/* prose a readable width; a definition's code as wide as there's room for */
main > * { max-width: 780px; } main > pre.code { max-width: none; }

/* the menu */
.pages-btn { display: none; }
.side { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 112px); overflow-y: auto; font-size: 14px; padding-right: 4px; }
.side ol { list-style: none; margin: 0; padding: 0; }
.side .filter { display: block; width: 100%; height: 32px; margin: 0 0 12px; padding: 0 10px; font: inherit; font-size: 13.5px; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
.side .filter:focus { outline: 2px solid var(--acc); outline-offset: -1px; }
.side li { margin: 0; }
.side li.section { margin: 18px 10px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.side li > a, .side li > span { display: block; padding: 5px 10px; border-radius: 6px; color: var(--fg); }
.side li > a:hover { background: var(--bg3); text-decoration: none; }
.side li.here > span { background: var(--accbg); color: var(--acc); font-weight: 600; }
.side ul { list-style: none; margin: 4px 0 8px 12px; padding: 0 0 0 10px; border-left: 1px solid var(--line); font-size: 13px; }
.side ul li { margin: 0; }
.side ul a { display: block; padding: 3px 8px; color: var(--dim); border-radius: 4px; } .side ul a:hover { color: var(--fg); background: var(--bg3); text-decoration: none; }

/* the page */
main { min-width: 0; }
article { overflow-wrap: break-word; }
h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -.015em; }
h1 { font-size: 34px; font-weight: 700; letter-spacing: -.03em; margin: 0 0 20px; }
h2 { font-size: 23px; font-weight: 650; margin: 44px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
h3 { font-size: 18px; font-weight: 600; margin: 28px 0 8px; }
p, ul, ol, .table, dl, blockquote, pre { margin: 0 0 16px; }
ul, ol { padding-left: 24px; } li { margin: 4px 0; }
li > ul, li > ol { margin: 4px 0 0; }
code { font: .88em var(--mono); background: var(--bg3); border-radius: 4px; padding: .12em .36em; }
pre { padding: 12px 16px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; font: 13px/1.6 var(--mono); }
pre code { font: inherit; background: none; padding: 0; border-radius: 0; }
pre.shiki { background: var(--bg2) !important; }
.shiki span { color: var(--shiki-light); }
@media (prefers-color-scheme: dark) { .shiki span { color: var(--shiki-dark); } }
.table { overflow-x: auto; }
table { border-collapse: collapse; font-size: 14px; }
th { font-weight: 600; text-align: left; background: var(--bg2); }
th, td { padding: 6px 12px; border: 1px solid var(--line); vertical-align: top; }
td:first-child code { white-space: nowrap; }
dl { display: grid; gap: 2px; }
dt { margin-top: 12px; font-weight: 600; } dt:first-child { margin-top: 0; }
dd { margin: 0 0 0 20px; color: var(--fg); }
blockquote { padding: 2px 0 2px 16px; border-left: 3px solid var(--line); color: var(--dim); }
strong { font-weight: 600; }
.path { color: var(--dim); }
.build { color: var(--dim); font-size: 13px; margin-top: 16px; }
:target { scroll-margin-top: 72px; }
h1:target, h2:target, h3:target, dt:target { background: none; }
h2:target::after, h3:target::after { content: " #"; color: var(--acc); font-weight: 400; }

/* the pages before and after */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.pager a { display: block; border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; color: var(--fg); font-weight: 600; }
.pager a:hover { border-color: var(--acc); text-decoration: none; }
.pager small { display: block; font-size: 12.5px; font-weight: 400; color: var(--dim); margin-bottom: 2px; }
.pager a.next { text-align: right; grid-column: 2; }

/* the code browser: the forge's colours for code */
.code { white-space: pre; font: 13px/1.65 var(--mono); }
.code .k, .code .x, .code .g { color: var(--k); } .code .s { color: var(--s); } .code .n { color: var(--n); }
.code .c { color: var(--c); font-style: italic; } .code .f { color: var(--f); } .code .t { color: var(--t); } .code .a { color: var(--fg); }
.code a.ref { color: inherit; border-bottom: 1px dotted var(--dim); } .code a.ref[href]:hover { text-decoration: none; border-bottom-color: var(--acc); }
.code a.ref.s { color: var(--s); } .code a.ref.f { color: var(--f); } .code a.ref.t { color: var(--t); }
.meta, .why, .sig { color: var(--dim); }
.sig { font: 12.5px var(--mono); }
.side .crumbs { margin: 0 0 10px; padding: 0 10px; font: 12.5px var(--mono); color: var(--dim); overflow-wrap: anywhere; }
.side .code-list li.ns > a { font-weight: 600; }
.side .code-list li.group { margin: 16px 10px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.side .code-list li > a, .side .code-list li > span { font: 13px var(--mono); }
ul.refs { columns: 2; list-style: none; padding-left: 0; font: 13px var(--mono); }
.file-image { max-width: 100%; }

/* an image in a page: the page's width, and full size over the page when pressed (the page's target) */
a.image { display: block; cursor: zoom-in; }
a.image img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; }
a.image:target { position: fixed; inset: 0; z-index: 30; overflow: auto; padding: 48px 16px 16px; background: var(--bg); cursor: default; }
a.image:target img { width: auto; max-width: none; margin: 0 auto; border: 0; border-radius: 0; }
.image-close { display: none; }
a.image:target + .image-close { display: block; position: fixed; top: 12px; right: 16px; z-index: 31; }

/* narrow screens: the menu goes on top */
@media (max-width: 900px) {
  header.top .bar { padding: 0 16px; gap: 18px; }
  .site { display: block; padding: 20px 16px 56px; }
  .side { position: static; max-height: none; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
  .side { margin-bottom: 24px; padding-bottom: 0; border-bottom: 0; }
  .pages-btn { display: flex; width: 100%; justify-content: space-between; align-items: center; height: 40px; padding: 0 14px; font: inherit; font-weight: 600; color: var(--fg); background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
  .pages { display: none; padding: 12px 0 8px; border-bottom: 1px solid var(--line); }
  .pages.open { display: block; }
  .side ol { columns: 2; column-gap: 12px; } .side li.section { break-after: avoid; } .side ul { display: none; }
  h1 { font-size: 28px; }
  .pager { grid-template-columns: 1fr; } .pager a.next { grid-column: 1; }
}