/* ApolloKnowledgeBase - the question page, in the style of ApolloUpdate
   (apolloteam-dev.github.io/ApolloSoftware): dark logo bar, light page,
   Inter, purple links, dark table heads. */
@font-face { font-family: Inter; font-style: normal; font-weight: 400 700;
             font-display: swap; src: url(Inter-latin.woff2) format("woff2"); }
:root {
  --bg: #f6f6f4; --fg: #1c1c1e; --dim: #6b6b70; --head: #131417; --link: #7a5cff;
  --line: #e2e2df; --box: #c4c4c0; --card: #ffffff; --alt: #fbfaff; --code: #f1f0ec;
  --warn: #a35a00; --bad: #b3261e; --sub: #a9a9a8;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); min-height: 100vh; display: flex; flex-direction: column;
       font: 15px/1.55 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
       font-feature-settings: "calt" 0; }          /* 680x0 stays x, as on ApolloUpdate */
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.hidden { display: none !important; }

/* the logo bar */
.top { background: var(--head); padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: block; line-height: 0; flex: 0 1 auto; min-width: 0; }
.logo img { display: block; max-width: 100%; height: auto; }
.who { display: flex; gap: 24px; align-items: center; flex: none; }
.who .item { display: flex; flex-direction: column; gap: 4px; white-space: nowrap; }
.who .item b, .who .item a, .who .item button { color: #fff; font-weight: 600; font-size: 15px; }
.who .item span { color: var(--sub); font-weight: 600; font-size: 13px; }
.who button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.who button:hover { text-decoration: underline; }

main { flex: 1; width: 100%; max-width: 900px; margin: 0 auto; padding: 0 16px; }
main.start .hero { margin-top: 7vh; }
.hero { margin-top: 20px; }
/* the photo, faded into the page by its own radial alpha (gunnar.png) */
.photo { display: block; width: 160px; height: 160px; margin: 0 auto 6px; }
main:not(.start) .photo { display: none; }
.lead { text-align: center; color: var(--fg); font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.lead2 { text-align: center; color: var(--dim); font-size: 14px; font-style: italic; margin: 0 0 18px; }
main:not(.start) .lead, main:not(.start) .lead2, main:not(.start) .examples,
main:not(.start) .start-project, main:not(.start) .startpanel { display: none; }

.signin { text-align: center; margin-top: 22vh; font-size: 18px; font-weight: 600; }

/* the one question field */
.ask { display: flex; align-items: flex-end; gap: 8px; background: #fff; border: 1px solid var(--box);
       border-radius: 4px; padding: 6px 6px 6px 14px; }
.ask:focus-within { border-color: var(--link); box-shadow: 0 0 0 2px rgba(122, 92, 255, .18); }
.ask textarea { flex: 1; border: 0; outline: 0; resize: none; background: transparent; color: var(--fg);
                font: inherit; font-size: 17px; line-height: 1.5; padding: 5px 0; max-height: 220px; }
.ask button { font: inherit; font-weight: 700; border: 0; border-radius: 3px; padding: 7px 18px; cursor: pointer;
              background: var(--link); color: #fff; }
.ask button:disabled { opacity: .5; cursor: default; }

/* example questions: the filter boxes of ApolloUpdate */
.examples { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 14px; }
.examples button { font: inherit; font-size: 14px; color: var(--link); background: #fff; border: 1px solid var(--box);
                   border-radius: 0; padding: 2px 8px; cursor: pointer; }
.examples button:hover { background: var(--link); color: #fff; border-color: var(--link); }

/* Start Apollo V4 Project: the red of the logo, white bold text */
.start-project { text-align: center; margin-top: 18px; }
.startbtn { font: inherit; font-size: 16px; font-weight: 700; color: #fff; background: #cc3e38; border: 0;
            border-radius: 3px; padding: 9px 22px; cursor: pointer; }
.startbtn:hover { background: #b2332e; }
.startpanel { background: var(--card); border: 1px solid var(--line); padding: 14px 18px; margin-top: 12px; font-size: 14px; }
.startpanel p { margin: 0 0 10px; }
.startpanel p:last-child { margin-bottom: 0; }
.startpanel pre { background: var(--code); border: 1px solid var(--line); padding: 10px 12px; margin: 0 0 10px;
                  white-space: pre-wrap; font: 13.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.startpanel code { font: 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--code); padding: 1px 4px; }
.startpanel .copy { font: inherit; font-weight: 700; color: #fff; background: var(--link); border: 0; border-radius: 3px;
                    padding: 5px 14px; cursor: pointer; }
.dim { color: var(--dim); }

/* answers */
#answers { margin: 18px 0 8px; }
.answer { background: var(--card); border: 1px solid var(--line); padding: 14px 18px; margin-bottom: 14px; }
.answer .question { font-weight: 700; margin: 0 0 8px; white-space: pre-wrap; }
.answer.old { opacity: .8; }
.status { color: var(--dim); font-size: 14px; display: flex; gap: 8px; align-items: center; min-height: 20px; }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--link); animation: pulse 1s infinite alternate; }
.status.idle { display: none; }
@keyframes pulse { from { opacity: .25; } to { opacity: 1; } }
.error { color: var(--bad); }
.sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.sources:empty { display: none; }
.sources a { background: #fff; border: 1px solid var(--box); padding: 1px 8px; }
.sources a:hover { background: var(--link); color: #fff; border-color: var(--link); text-decoration: none; }
.badge { font-size: 11px; font-weight: 700; text-transform: uppercase; margin-left: 6px; color: var(--dim); }
.badge.draft, .badge.deprecated { color: var(--warn); }
.sources a:hover .badge { color: #fff; }
.left { color: var(--dim); font-size: 12px; margin-top: 8px; }

/* the answer's Markdown */
.md { overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3, .md h4 { line-height: 1.3; margin: 1em 0 .4em; }
.md h1 { font-size: 20px; } .md h2 { font-size: 18px; } .md h3 { font-size: 16px; } .md h4 { font-size: 15px; }
.md p, .md ul, .md ol, .md pre, .md table { margin: .6em 0; }
.md ul, .md ol { padding-left: 1.4em; }
.md code { font: 13.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--code); padding: 1px 4px; }
.md pre { background: var(--code); border: 1px solid var(--line); padding: 10px 12px; overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md table { border-collapse: separate; border-spacing: 1px; background: var(--line); display: block; overflow-x: auto; font-size: 14px; }
.md th { background: var(--head); color: #fff; font-weight: 700; padding: 3px 8px; text-align: left; white-space: nowrap; }
.md td { background: #fff; padding: 3px 8px; vertical-align: top; }
.md tr:nth-child(even) td { background: var(--alt); }
.md blockquote { margin: .6em 0; padding-left: 12px; border-left: 3px solid var(--box); color: var(--dim); }

.foot { max-width: 900px; margin: 24px auto; padding: 0 16px; font-size: 13px; text-align: center; color: var(--dim); line-height: 1.7; }
.foot b { color: var(--fg); }

@media (max-width: 760px) {
  .top { flex-wrap: wrap; gap: 10px; }
  .who { gap: 16px; }
  main.start .hero { margin-top: 3vh; }
  .photo { width: 120px; height: 120px; }
  .signin { margin-top: 12vh; }
  .answer { padding: 12px 14px; }
}