/* The site's frame on every page: the program's top bar (with a folding menu on phones) and the footer. */
/* header: the program's top bar */
.hbar { position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: 56px; display: flex; align-items: center; gap: 24px; padding: 0 20px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); }
.hbar .brand { font-size: 15px; gap: 10px; }
.hbar .brand span { color: var(--text); font-weight: 700; }
.hnav { display: flex; gap: 4px; font-size: 14px; }
.hnav a { color: var(--muted); padding: 8px 10px; border-radius: var(--radius-sm); }
.hnav a:hover { color: var(--text); background: var(--panel); }
.hend { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.langs { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); font: 500 11px/1 var(--font-mono); }
.langs a, .langs span { padding: 5px 7px; border-radius: 4px; color: var(--dim); }
.langs span { background: var(--raise); color: var(--text); }
.hlink { color: var(--muted); font-size: 14px; padding: 8px 6px; }
.hlink:hover { color: var(--text); }
.cta { background: var(--accent-fill); color: var(--accent-ink); font-weight: 600; font-size: 14px; padding: 9px 14px; border-radius: var(--radius-md); white-space: nowrap; }
.cta:hover { background: var(--accent-fill-hot); color: var(--accent-ink); }
.cta.lg, .ghostbtn.lg { font-size: 15px; padding: 13px 18px; }
.ghostbtn { background: var(--raise); color: var(--text); font-weight: 600; font-size: 14px; padding: 9px 14px; border-radius: var(--radius-md); border: 1px solid var(--line); white-space: nowrap; }
.ghostbtn:hover { background: var(--raise-hover); color: var(--text); }

.hmenu { display: none; position: relative; }
.hmenu summary { list-style: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text); }
.hmenu summary::-webkit-details-marker { display: none; }
.hmenu summary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.hmenu nav { position: fixed; left: 0; right: 0; top: 56px; display: flex; flex-direction: column; padding: 8px 16px 16px; background: var(--bg); border-bottom: 1px solid var(--line-soft); }
.hmenu nav a { padding: 12px; font-size: 16px; color: var(--muted); border-radius: var(--radius-sm); }
.hmenu nav a:hover, .hmenu nav a[aria-current] { color: var(--text); background: var(--panel); }
.hnav a[aria-current] { color: var(--text); background: var(--panel); }
/* pages under the fixed bar */
.shell-page #icerik { padding-top: 56px; }

.sfoot { border-top: 1px solid var(--line-soft); max-width: 1240px; margin: 0 auto; padding: 32px clamp(16px, 4vw, 40px) 64px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--dim); }
.sfoot nav { display: flex; gap: 16px; flex-wrap: wrap; }
.sfoot a { color: var(--muted); }
.sfoot .end2 { width: 100%; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (max-width: 759px) {
  .hnav, .langs, .hlink { display: none; }
  .hbar { gap: 12px; padding: 0 10px 0 14px; }
  .hmenu { display: block; }
}

/* "Features": the six spaces with the program's drawings */
.hdrop { position: relative; }
.hdrop summary { list-style: none; display: flex; align-items: center; gap: 4px; color: var(--muted); padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; }
.hdrop summary::-webkit-details-marker { display: none; }
.hdrop summary:hover, .hdrop[open] summary, .hdrop summary[aria-current] { color: var(--text); background: var(--panel); }
.hdrop summary svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dropbox { position: absolute; top: calc(100% + 8px); left: 0; width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 8px; background: var(--glass-panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
.dropbox a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-md); color: var(--text); }
.dropbox a:hover, .dropbox a[aria-current] { background: var(--panel-2); }
.dropbox img { width: 84px; height: auto; border-radius: 4px; flex: none; }
.dropbox b { display: block; font-size: 14px; font-weight: 600; }
.dropbox i { display: block; font: 500 10px var(--font-mono); font-style: normal; color: var(--dim); letter-spacing: .04em; margin-top: 3px; }

/* content pages in the home page's language: big tight headings, a mono kicker, rounder cards, mono numbers */
.shell-page .page-head { padding: 72px 0 32px; }
.shell-page .page-head h1 { font-size: clamp(40px, 6vw, 76px); line-height: .98; font-weight: 800; letter-spacing: -.045em; }
.shell-page .page-head h1 em { font-style: normal; color: var(--accent); }
.shell-page .page-head .lead { font-size: 17px; max-width: 60ch; }
.shell-page .page-head .kicker { display: flex; gap: 8px; align-items: center; font: 500 12px/1 var(--font-mono); color: var(--dim); letter-spacing: .06em; }
.shell-page .page-head .kicker::before { content: ""; width: 6px; height: 6px; background: var(--accent); border-radius: 1px; }
.shell-page .band { padding: 56px 0; }
.shell-page .band h2 { font-size: clamp(24px, 2.8vw, 34px); font-weight: 800; letter-spacing: -.03em; }
.shell-page .btn.primary { border-radius: var(--radius-md); }
.shell-page .btn.lg { height: 46px; border-radius: var(--radius-md); }
/* pricing */
.shell-page .plan { border-radius: 14px; padding: 26px; gap: 16px; }
.shell-page .plan h2 { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
.shell-page .plan.best { background: var(--pick-soft); }
.shell-page .plan.best h2 { color: var(--accent); }
.shell-page .plan h2 i { font: 600 11px var(--font-mono); font-style: normal; padding: 3px 7px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); }
.shell-page .price b { font: 800 42px/1 var(--font-sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.included { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 8px; margin-top: 20px; }
.included a { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--panel); color: var(--text); }
.included a:hover { border-color: var(--accent-line); color: var(--text); }
.included img { width: 100%; height: auto; border-radius: 6px; }
.included b { font-size: 14px; font-weight: 600; }
.included span { font: 500 10px var(--font-mono); color: var(--dim); letter-spacing: .04em; }
/* download */
.shell-page .get { border-radius: 14px; padding: 22px 24px; }
.shell-page .get .who b { font: 700 22px var(--font-mono); letter-spacing: -.02em; }
.entrance { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.entrance img { border: 1px solid var(--line); border-radius: 14px; }
.entrance figcaption { font-size: 13px; color: var(--dim); }
/* docs */
.shell-page .toc a[aria-current], .shell-page .toc a:focus-visible { background: var(--panel-2); color: var(--text); }
.shell-page .doc h2 { font-size: 26px; }
.where { width: 100%; border-collapse: collapse; font-size: 14px; }
.where td { padding: 10px 0; border-bottom: 1px solid var(--line-soft); color: var(--muted); vertical-align: top; }
.where td:first-child { width: 42%; font: 500 13px var(--font-mono); color: var(--text); padding-right: 16px; }
/* support */
.shell-page .card { border-radius: 14px; }
@media (max-width: 760px) { .shell-page .page-head { padding: 40px 0 20px; } .where td:first-child { width: 48%; } }

/* theme switch in the top bar */
.themebtn { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: none; color: var(--muted); cursor: pointer; }
.themebtn:hover { color: var(--text); background: var(--panel); }
.themebtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.themebtn .sun { display: none; }
[data-theme="light"] .themebtn .sun { display: block; }
[data-theme="light"] .themebtn .moon { display: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .themebtn .sun { display: block; } :root:not([data-theme="dark"]) .themebtn .moon { display: none; } }
/* the program's drawings are dark: on the light theme they turn light, keeping the yellow */
[data-theme="light"] img[src*="/img/bolum/"] { filter: invert(1) hue-rotate(180deg) brightness(1.04); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) img[src*="/img/bolum/"] { filter: invert(1) hue-rotate(180deg) brightness(1.04); } }
.themebtn.wide { width: auto; height: auto; padding: 12px; justify-content: start; display: block; text-align: left; font: inherit; font-size: 16px; border: 0; }
@media (max-width: 759px) { .hend > .themebtn { display: none; } }

.btn.primary { background: var(--accent-fill); border-color: var(--accent-fill); }
.btn.primary:hover { background: var(--accent-fill-hot); }