/* Open-source pages (open-source/ and open-source/<slug>/) — on top of
   /style.css and /apps/app-page.css. The terminal motif carries the install
   block: a hairline box, a mono command, one Copy button. Monochrome, like
   everything else (DESIGN.md §2, §8). */

/* hero monogram — these projects have no app icon; DESIGN.md §6 says a
   monogram tile stands in, at the hero icon's size */
.oss-mark {
  inline-size: clamp(72px, 10vw, 96px); block-size: clamp(72px, 10vw, 96px);
  margin-block-end: 24px; border-radius: var(--radius-icon);
  display: grid; place-items: center;
  background: var(--ink); color: var(--bg);
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.4rem);
}

/* the facts line under the hero: licence, language, what it runs in */
.oss-facts {
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  list-style: none; padding: 0; margin: 22px 0 0;
}
.oss-facts li {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em;
  color: var(--ink-soft); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 4px 11px;
}

/* install block */
.term {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); overflow: hidden;
  max-inline-size: 860px;
}
.term + .term { margin-block-start: 20px; }
.term-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px 10px 18px; border-block-end: 1px solid var(--line);
}
.term-copy {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: 8px;
  min-block-size: 36px; padding-inline: 12px;
  transition: color 0.15s ease-out, border-color 0.15s ease-out;
}
.term-copy:hover { color: var(--ink); border-color: var(--ink); }
/* no clipboard without JS: the button shows only once script.js has run */
html:not(.js) .term-copy { display: none; }
.term pre {
  margin: 0; padding: 16px 18px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  font-family: var(--font-mono); font-size: 0.84rem; line-height: 1.7;
  direction: ltr; text-align: left; color: var(--ink);
}
.term code { font-family: inherit; }
.term .c { color: var(--ink-soft); }   /* a comment line */
.term-note { margin-block-start: 14px; color: var(--ink-soft); font-size: 0.95rem; max-inline-size: 64ch; }
.term-note code, .oss-prose code {
  font-family: var(--font-mono); font-size: 0.88em; background: var(--surface);
  border: 1px solid var(--line); border-radius: 6px; padding: 0.08em 0.36em;
}

/* the demo clip is the README's GIF, re-encoded: 1100 × 640, not 16:9 */
.vid-stage.oss-demo { aspect-ratio: 55 / 32; max-inline-size: 960px; }

/* plain prose blocks: the limits, the "what it will not do" */
.oss-prose { max-inline-size: 68ch; }
.oss-prose p + p, .oss-prose p + ul, .oss-prose ul + p { margin-block-start: 14px; }
.oss-prose ul { padding-inline-start: 1.2em; }
.oss-prose li + li { margin-block-start: 8px; }
.oss-prose li { color: var(--ink-soft); }
.oss-prose li strong { color: var(--ink); font-weight: 600; }

/* articles about the project — numbered rows, each with its Hebrew twin */
.oss-reading { list-style: none; padding: 0; margin: 0; border-block-start: 1px solid var(--line); }
.oss-reading li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  gap: clamp(14px, 3vw, 28px); padding-block: 20px; border-block-end: 1px solid var(--line);
}
.oss-reading .featured-num { align-self: baseline; }
.oss-reading a.oss-read-title { font-weight: 600; text-decoration: none; font-size: 1.08rem; line-height: 1.35; }
.oss-reading a.oss-read-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.oss-reading p { color: var(--ink-soft); font-size: 0.92rem; margin-block-start: 4px; }
.oss-reading .chip { text-decoration: none; }
.page-hero .lede code, .cap code {
  font-family: var(--font-mono); font-size: 0.86em; background: var(--surface);
  border: 1px solid var(--line); border-radius: 6px; padding: 0.06em 0.34em;
  overflow-wrap: anywhere;
}

/* GitHub's mark (Octicons mark-github) before a link that goes to GitHub —
   ink, at the text's size; no blinking suffix on these links */
.gh-link { gap: 8px; }
.gh-mark { inline-size: 1.05em; block-size: 1.05em; flex-shrink: 0; display: inline-block; vertical-align: -0.15em; }