/* Hushcode Help. The same colors and font as Hushcode: Dark by default, Light when the device is set to light. */
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/lexend-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/lexend-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }

:root {
  --bg: #17151f; --panel: #1f1d30; --raised: #2a2840; --line: #36334f; --fg: #ecebf3; --muted: #a5a2bb;
  --accent: #fec72e; --accent-text: #fec72e; --on-accent: #1f1d30;
  color-scheme: dark;
}
/* Light when the device is set to light, unless the switch at the bottom right picked dark (or the other way around) */
:root[data-theme="light"] { --bg: #ffffff; --panel: #f6f5f9; --raised: #ebe9f2; --line: #dcd9e6; --fg: #1f1d30; --muted: #5e5b76; --accent-text: #8a5d00; color-scheme: light; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --bg: #ffffff; --panel: #f6f5f9; --raised: #ebe9f2; --line: #dcd9e6; --fg: #1f1d30; --muted: #5e5b76; --accent-text: #8a5d00; color-scheme: light; }
}

/* No blue box when you tap something on a phone, the same as in Hushcode */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: "Lexend", system-ui, sans-serif; font-size: 16px; line-height: 1.6; }
a { color: var(--accent-text); }
code, kbd { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.85em; }
code { padding: 0.1em 0.35em; border-radius: 5px; background: var(--raised); }
kbd { display: inline-block; min-width: 1.6em; padding: 0.05em 0.45em; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--panel); text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Top bar ---------- */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px max(16px, calc((100% - 860px) / 2)); background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--fg); font-weight: 600; text-decoration: none; }
.logo { width: 32px; height: 32px; image-rendering: pixelated; }
.open-app { padding: 7px 14px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 0.9rem; text-decoration: none; white-space: nowrap; }
.open-app:hover { filter: brightness(1.05); }

main { max-width: 860px; margin: 0 auto; padding: 32px 16px 48px; }
h1 { margin: 8px 0 4px; font-size: 2rem; line-height: 1.25; }
.home h1, .home .lead { text-align: center; }
h2 { font-size: 1.35rem; line-height: 1.3; }
h3 { margin: 0 0 6px; font-size: 1.08rem; line-height: 1.4; }
.lead { margin: 0 0 18px; color: var(--muted); }

/* ---------- Search ---------- */
/* Looks and hovers like a button until you click into it, the same as the search in Hushcode */
.search-wrap { position: relative; display: flex; }
.search-wrap > svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search input { width: 100%; height: 50px; padding: 0 16px 0 46px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--fg); font: inherit; font-size: 1.05rem; cursor: pointer; -webkit-appearance: none; appearance: none; }
.search input:hover { background: var(--raised); }
.search input:focus { outline: none; border-color: var(--accent); background: transparent; cursor: text; }
.search input::placeholder { color: var(--muted); }
/* No X to clear it */
.search input::-webkit-search-cancel-button, .search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.results { margin-top: 14px; }
.results p { margin: 0 0 8px; color: var(--muted); font-size: 0.9rem; }
.results ul, .popular ul { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
.results li + li, .popular li + li { border-top: 1px solid var(--line); }
.results a, .popular a { display: block; padding: 12px 16px; color: var(--fg); text-decoration: none; }
.results a:hover, .popular a:hover, .results a:focus-visible, .popular a:focus-visible { background: var(--raised); outline: none; }
.results small { display: block; color: var(--muted); font-size: 0.82rem; }
.popular h2, .topics-title { margin: 32px 0 12px; font-size: 1.1rem; }

/* ---------- Topics ---------- */
.topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.topics a { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--fg); text-decoration: none; }
.topics a:hover, .topics a:focus-visible { background: var(--raised); outline: none; }
.topics b { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.topics b svg { flex: none; width: 18px; height: 18px; color: var(--accent-text); }
.topics span { color: var(--muted); font-size: 0.86rem; line-height: 1.45; }

/* ---------- Topic pages and answers ---------- */
.topic { margin-top: 40px; }
.topic > h2 { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.crumbs { margin: 0 0 6px; font-size: 0.9rem; color: var(--muted); }
/* Each question opens on its own, with no lines between them */
article { margin: 0 -14px; }
summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); }
details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
summary:hover, summary:focus-visible { background: var(--raised); outline: none; }
summary h3 { flex: 1; margin: 0; }
.answer { padding: 2px 14px 16px; }
.answer p, .answer ul { margin: 0 0 10px; }
.answer > :last-child { margin-bottom: 0; }
/* The question you picked from the search box looks like the Open Hushcode button, open or closed, until you go somewhere else */
article.is-target summary, article.is-target summary:hover, article.is-target summary:focus-visible { background: var(--accent); color: var(--on-accent); }
article.is-target summary::after { border-color: var(--on-accent); }
article.is-target summary:hover { filter: brightness(1.05); }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
.none { color: var(--muted); }

/* With scripts, one view at a time: the home page, or one topic. Without them, everything shows in one long page. */
body.js .topic { display: none; margin-top: 8px; }
body.js .topic.is-open { display: block; }
body.js.in-topic .home { display: none; }
body.js.is-searching .popular, body.js.is-searching .topics-title, body.js.is-searching .topics { display: none; }

.foot { max-width: 860px; margin: 0 auto; padding: 24px 16px 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }
.foot p { margin: 0 0 6px; }

/* Light and dark, under the footer on the left, with the same sliding fill as Hushcode's theme picker */
.theme-row { display: flex; justify-content: flex-start; margin-top: 14px; }
.seg { position: relative; display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 9px; }
.seg button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: background-color 0.14s ease, color 0.16s ease; }
.seg button svg { flex: none; width: 15px; height: 15px; }
.seg button[aria-pressed="true"] { color: var(--on-accent); transition: background-color 0.14s ease, color 0.18s ease 0.08s; }
.seg button:not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--raised) 60%, transparent); color: var(--fg); }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.seg-ind { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; border-radius: 7px; background: var(--accent); pointer-events: none; }
.seg:not(.seg-ready) .seg-ind { visibility: hidden; }
.seg:not(.seg-ready) button[aria-pressed="true"] { background: var(--accent); }
.seg-ind.is-moving { transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), width 0.38s cubic-bezier(0.16, 1, 0.3, 1); }
@media (prefers-reduced-motion: reduce) { .seg-ind.is-moving { transition: none; } }

@media (max-width: 560px) {
  h1 { font-size: 1.6rem; }
  main { padding-top: 22px; }
  .brand span { font-size: 0.95rem; }
}

/* Switching between light and dark fades the whole page, the same as changing the theme in Hushcode */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; animation-timing-function: ease; }