/* The Projector site's projects, reviews, and docs pages. Colours, fonts, tables and
   code highlighting come from summary.css, which every page also loads. */

.sitebar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px;
  min-height: 60px; padding: 10px 16px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
/* On a summary page the bar scrolls away; the summary's own headers stick. */
.sitebar.scrolls { position: static; }
.sitename {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text); text-decoration: none;
}
.sitemark { width: 20px; height: 20px; flex: none; }
.sitenav { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 14px; }
.sitenav a { color: var(--muted); text-decoration: none; padding: 2px 0; border-bottom: 2px solid transparent; }
.sitenav a:hover { color: var(--text); }
.sitenav a.active { color: var(--text); border-bottom-color: var(--accent); }

/* The header's icon buttons: the section menu, and entering and leaving full screen. */
.sitebtn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; padding: 0; margin: 0 -8px 0 -6px;
  color: var(--muted); background: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer;
}
.sitebtn:hover { color: var(--text); background: var(--surface-2); }
.sitebtn svg { width: 18px; height: 18px; }
/* Where a page has no sidebar, an empty slot holds the menu button's place, so the
   site name sits in the same spot on every page. */
.menuspace { visibility: hidden; cursor: default; }
.barhide { margin: 0 -6px 0 -12px; }
.barshow {
  display: none; position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); right: 8px; z-index: 20; margin: 0;
  background: var(--surface); border-color: var(--border); box-shadow: var(--shadow);
}
body.barhidden .sitebar { display: none; }
body.barhidden .barshow { display: inline-flex; }

.sitemain { max-width: 880px; margin: 0 auto; padding: 28px 16px 48px; }
.sidebody { min-width: 0; }

/* A section's tree beside its page: the docs, or one project's folder. The tree
   runs down the window's left edge under the header's menu button, and the page
   keeps its reading width, centred in the window whether or not the tree is
   shown. Only a window too narrow to centre the page clear of the tree moves it
   right, as little as it must. */
.sitemain.withside { max-width: none; padding: 0; }
.sitemain.withside .sidebody { max-width: 880px; margin: 0 auto; padding: 28px 16px 48px; }
.sitemain.withside:not(.collapsed):not(.wide) .sidebody,
.sitemain.withside:not(.collapsed):not(.wide) + .sitefoot { margin-left: max(240px, calc((100% - 880px) / 2)); }
.sitemain .side {
  position: fixed; top: 61px; bottom: 0; left: 0; width: 240px; align-self: stretch; overflow-y: auto;
  padding: 28px 16px; font-size: 14px; line-height: 1.4;
}
.sitemain .side ul { list-style: none; margin: 0; padding: 0 0 0 12px; }
.sitemain .side > ul { padding-left: 0; }
.sitemain .side li { margin: 5px 0; }
.sitemain .side a { color: var(--muted); text-decoration: none; }
.sitemain .side a:hover { color: var(--text); }
.sitemain .side a.active { color: var(--text); font-weight: 600; }
.sidetop { font-weight: 600; margin-bottom: 10px; }
.sidetop a { color: var(--text); }
.sidedir { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.sitemain.withside.collapsed { grid-template-columns: minmax(0, 1fr); }
.sitemain.collapsed .side { display: none; }

/* An HTML page fills the window below the header, edge to edge, with its section
   sidebar, when shown, as a column beside it. */
.sitemain.wide { max-width: none; padding: 0; }
.sitemain.wide.withside { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0; }
.sitemain.wide.withside.collapsed { grid-template-columns: minmax(0, 1fr); }
.sitemain.wide .sidebody { max-width: none; margin: 0; padding: 0; }
.sitemain.wide .side {
  position: static; width: auto; align-self: stretch; max-height: none; padding: 20px 16px;
  border-right: 1px solid var(--border);
}
.sitemain.wide .sidebody > :not(iframe) { margin: 16px; }
iframe.htmlpage { display: block; width: 100%; border: 0; background: #fff; }
@media (max-width: 760px) {
  .sitemain.withside { display: block; }
  .sitemain .side { position: static; width: auto; max-height: none; padding: 20px 16px 12px; border-bottom: 1px solid var(--border); }
  .sitemain.withside:not(.collapsed):not(.wide) .sidebody,
  .sitemain.withside:not(.collapsed):not(.wide) + .sitefoot { margin-left: auto; }
  .sitemain.wide .side { margin: 0; border-right: 0; }
}
.sitefoot { max-width: 880px; margin: 0 auto; padding: 0 16px 32px; color: var(--muted); font-size: 13px; }
.note { color: var(--muted); font-size: 13.5px; }

.markdown { overflow-wrap: anywhere; }
.markdown h1 { font-size: 30px; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 16px; }
.markdown h2 { font-size: 22px; letter-spacing: -.01em; margin: 32px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.markdown h3 { font-size: 17px; margin: 24px 0 8px; }
.markdown h4, .markdown h5, .markdown h6 { font-size: 15px; margin: 20px 0 6px; }
.markdown pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; overflow-x: auto; font-size: 13px; line-height: 1.5; }
.markdown pre code { background: none; padding: 0; font-size: inherit; }
.markdown blockquote { margin: 16px 0; padding: 4px 16px; border-left: 3px solid var(--border); color: var(--muted); }
.markdown table { border-collapse: collapse; display: block; overflow-x: auto; font-size: 14px; margin: 16px 0; }
.markdown th, .markdown td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; vertical-align: top; }
.markdown th { background: var(--surface-2); }
.markdown img { max-width: 100%; }
.markdown hr { border: 0; border-top: 1px solid var(--border); margin: 28px 0; }

.filter {
  width: 100%; box-sizing: border-box; margin: 8px 0 20px; padding: 8px 12px; font: inherit;
  color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
.pintro { margin: 4px 0 8px; }
.pintro summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.pintro summary:hover { color: var(--accent); }
.pintro .markdown { margin-top: 12px; padding: 4px 16px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.pgroup h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 24px 0 6px; }
table.tbl.projects td:first-child a { text-decoration: none; font-weight: 500; }
table.tbl.projects td.owner { color: var(--muted); white-space: nowrap; }
table.tbl.reviews td.date { white-space: nowrap; }
table.tbl.reviews .stack { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
table.tbl.reviews .stack::before { content: "↳ "; }

.sitemain .badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 500;
  background: var(--surface-2); color: var(--muted); margin-right: 6px; white-space: nowrap;
}
.sitemain .badge.status-in-progress { background: var(--accent-soft); color: var(--accent); }
.sitemain .badge.priority-now { color: var(--text); font-weight: 600; }
.sitemain .badge.status-ready { background: var(--ok-bg); color: var(--ok); }
.sitemain .badge.status-draft, .sitemain .badge.priority-next { background: var(--warn-bg); color: var(--warn); }

.phead { margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.crumbs { font-size: 13.5px; color: var(--muted); margin-bottom: 8px; }
.crumbs a { text-decoration: none; }
.pmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.plist { margin-top: 10px; font-size: 14px; }
.plist b { color: var(--muted); font-weight: 600; margin-right: 6px; }

.sitesearch { margin-left: auto; }
.sitesearch input {
  width: 12rem; max-width: 40vw; padding: 5px 10px; font: inherit; font-size: 14px;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
}
ol.results { list-style: none; padding: 0; margin: 0; }
ol.results li { padding: 12px 0; border-bottom: 1px solid var(--border); }
ol.results li a { font-weight: 500; text-decoration: none; }
.snippet { margin-top: 4px; font-size: 14px; color: var(--muted); }
.snippet mark { background: var(--warn-bg); color: var(--text); border-radius: 2px; padding: 0 1px; }