/* Colors come from colors.css, which the converter generates from its options. */
:root {
  --ink: #292a2e;
  --muted: #6b6e76;
  --line: #dddddd;
  --hover: #f1f2f4;
  --soft: #f4f5f7;
  --link: #1f68c6;
  --brand-tint: color-mix(in srgb, var(--brand) 10%, white);
  --header-line: color-mix(in srgb, var(--header) 88%, black);
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin:0; background:#fff; color:var(--ink); font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:var(--link); }

/* Header */
.site-header { height:56px; display:flex; align-items:center; padding:0 20px; background:var(--header); border-bottom:1px solid var(--header-line); }
.brand { display:flex; align-items:center; font-weight:700; font-size:1.15rem; color:var(--ink); text-decoration:none; }
.brand img { height:30px; width:auto; display:block; }

/* Layout */
.layout { display:grid; grid-template-columns:288px minmax(0,1fr); min-height:calc(100vh - 56px); }
.side { border-right:1px solid var(--line); padding:12px 8px 40px; font-size:14px; overflow-y:auto; max-height:calc(100vh - 56px); position:sticky; top:0; align-self:start; }
main { padding:24px clamp(1rem,4vw,3.5rem) 5rem; min-width:0; max-width:62rem; }

/* Page tree, like the Confluence sidebar */
.tree, .tree ul { list-style:none; margin:0; padding:0; }
.tree ul { padding-left:14px; }
.tree li { margin:1px 0; }
.tree a { display:block; color:var(--ink); text-decoration:none; padding:6px 8px; border-radius:4px; }
.tree a:hover { background:var(--hover); }
.tree .current > a, .tree .current > summary { background:var(--brand-tint); }
.tree .current > a, .tree .current > summary a { color:var(--brand); font-weight:600; }
.tree.root .home a { display:flex; align-items:center; gap:10px; font-weight:600; }
.tree.root { margin-bottom:6px; }
summary { display:flex; align-items:center; cursor:pointer; border-radius:4px; list-style:none; }
summary::-webkit-details-marker { display:none; }
summary:hover { background:var(--hover); }
summary a { flex:1; min-width:0; }
summary a:hover { background:transparent; }
summary::after { content:""; width:7px; height:7px; margin:0 12px 0 6px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(-45deg); transition:transform .12s; flex:none; }
details[open] > summary::after { transform:rotate(45deg); }

/* Content */
.breadcrumbs { list-style:none; display:flex; flex-wrap:wrap; gap:4px; padding:0; margin:0 0 14px; font-size:13px; color:var(--muted); }
.breadcrumbs a { color:var(--muted); text-decoration:none; }
.breadcrumbs a:hover { text-decoration:underline; }
.breadcrumbs li + li::before { content:"/"; margin-right:4px; }
h1 { margin:0 0 6px; font-size:2rem; line-height:1.25; font-weight:700; letter-spacing:-.01em; }
.content h2 { font-size:1.55rem; margin:2rem 0 .6rem; line-height:1.3; }
.content h3 { font-size:1.25rem; margin:1.6rem 0 .5rem; }
.content h4 { font-size:1.05rem; margin:1.3rem 0 .4rem; }
.meta { color:var(--muted); font-size:13px; margin:0 0 1.5rem; }
.content img, .content video { max-width:100%; height:auto; }
.content img.center { display:block; margin:1rem auto; }
.content img.right { display:block; margin:1rem 0 1rem auto; }
.content audio { width:100%; max-width:30rem; }
.content hr { border:0; border-top:1px solid var(--line); margin:1.5rem 0; }
.content table { border-collapse:collapse; display:block; overflow-x:auto; margin:1rem 0; font-size:15px; }
.content th, .content td { border:1px solid #c1c7d0; padding:.45rem .7rem; vertical-align:top; }
.content th { background:var(--soft); text-align:left; font-weight:600; }
.content td > :first-child, .content th > :first-child { margin-top:0; }
.content td > :last-child, .content th > :last-child { margin-bottom:0; }
.content pre { overflow-x:auto; padding:.9rem 1rem; border:1px solid var(--line); border-radius:3px; background:var(--soft) !important; font-size:13.5px; line-height:1.5; }
.content :not(pre) > code { background:var(--soft); padding:.1em .35em; border-radius:3px; font-size:.9em; }
blockquote { margin:1rem 0; padding:.1rem 1rem; border-left:3px solid var(--line); color:var(--muted); }

/* Confluence info / note / tip / warning panels */
.alert { margin:1rem 0; padding:.2rem 1rem .4rem; border-radius:3px; background:#deebff; border-left:4px solid #4c9aff; }
.alert-title { font-weight:700; font-size:.75rem; letter-spacing:.06em; margin:.7rem 0 .2rem; }
.alert-important { background:#eae6ff; border-color:#8777d9; }
.alert-warning, .alert-caution { background:#fffae6; border-color:#f5cd47; }
.alert-tip { background:#e3fcef; border-color:#57d9a3; }

.children ul { columns:2; }

@media (max-width: 800px) {
  .layout { grid-template-columns:1fr; }
  .side { position:static; max-height:none; border-right:0; border-bottom:1px solid var(--line); }
  .children ul { columns:1; }
}