/* flaris-lang.org - shared stylesheet for index.html and libraries.html */

:root {
  --bg:        #17141c;
  --bg2:       #1c1824;
  --bg3:       #221e2c;
  --border:    #2e2840;
  --amber:     #f07030;
  --amber-dim: #6a3018;
  --green:     #e8608a;
  --green-dim: #5a2040;
  --text:      #d8d0e8;
  --text-dim:  #5a5068;
  --text-mid:  #9088a8;
  --red:       #e05060;
  --blue:      #7090e0;
  --purple:    #c070d0;
  --font-mono: 'Courier New', 'Lucida Console', monospace;
  --font-ui:   Georgia, 'Times New Roman', serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

::selection { background: var(--amber); color: #0a0c0e; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Subtle scanline overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.08) 2px,
    rgba(0,0,0,0.08) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ── NAV ── */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(23,20,28,0.96);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(4px);
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 52px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  flex: 0 0 auto;
}

.nav-logo img {
  height: 28px;
  width: auto;
  display: block;
}

.nav-logo span {
  color: var(--text-mid);
  font-size: 0.78rem;
  font-weight: normal;
  letter-spacing: 0.04em;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-link {
  color: var(--text-mid);
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.15s;
}

.nav-link:hover { color: var(--amber); }

.nav-cta {
  color: var(--amber);
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--amber-dim);
  border-radius: 2px;
  padding: 0.3rem 0.7rem;
  transition: background 0.15s, border-color 0.15s;
}

.nav-cta:hover { background: var(--amber-dim); border-color: var(--amber); }

.nav-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mid);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.nav-toggle:hover,
.nav-toggle[aria-expanded="true"] { color: var(--amber); border-color: var(--amber-dim); }

.nav-toggle-bars {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 13px;
}

.nav-toggle-bars span {
  display: block;
  height: 1px;
  background: currentColor;
}

.nav-menu {
  position: absolute;
  top: 52px;
  right: 1.5rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(9rem, 1fr));
  gap: 1.25rem 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-top: none;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  max-width: calc(100vw - 3rem);
}

.nav-menu[hidden] { display: none; }

.nav-menu h4 {
  color: var(--text-dim);
  font-size: 0.65rem;
  font-weight: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.nav-menu a {
  display: block;
  color: var(--text);
  text-decoration: none;
  font-size: 0.78rem;
  padding: 0.18rem 0;
  transition: color 0.15s;
}

.nav-menu a:hover { color: var(--amber); }

section[id] { scroll-margin-top: 52px; }
/* Legacy #embedding / #hosting anchors: keep old inbound links landing correctly. */
.legacy-anchor { display: block; height: 0; scroll-margin-top: 52px; }

/* ── HERO ── */
#hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem 2rem 4rem;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

.hero-prompt {
  color: var(--text-mid);
  font-size: 0.85rem;
  margin-bottom: 1.2rem;
  letter-spacing: 0.05em;
}

.hero-prompt::before {
  content: '$ ';
  color: var(--green);
}

.hero-logo-wrap {
  margin-bottom: 2rem;
}

.hero-logo {
  height: 64px;
  width: auto;
  display: block;
}

h1 {
  font-family: var(--font-mono);
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  font-weight: bold;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

h1 .lang  { background: linear-gradient(135deg, #f07030, #d04080); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
h1 .accent { color: var(--green); }

.hero-tagline {
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  color: var(--text-mid);
  max-width: 560px;
  line-height: 1.8;
  margin-bottom: 2.5rem;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 3rem;
}

.badge {
  display: inline-block;
  padding: 0.2em 0.7em;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  border-radius: 2px;
  background: var(--bg2);
}

.badge.hi { border-color: var(--amber-dim); color: var(--amber); background: rgba(232,160,32,0.06); }
.badge.green { border-color: var(--green-dim); color: var(--green); background: rgba(62,200,106,0.06); }

.hero-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.65em 1.4em;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--amber);
  color: #0a0c0e;
  font-weight: bold;
}

.btn-primary:hover { background: #f0b030; }

.btn-ghost {
  background: transparent;
  color: var(--text-mid);
  border-color: var(--border);
}

.btn-ghost:hover { border-color: var(--amber); color: var(--amber); }

/* ── HERO CODE BLOCK ── */
.hero-code {
  margin-top: 4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg2);
  overflow: hidden;
}

.code-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
}

.code-dot { width: 10px; height: 10px; border-radius: 50%; }
.code-dot.r { background: #e05060; }
.code-dot.y { background: var(--amber); }
.code-dot.g { background: var(--green); }
.code-filename { margin-left: 0.5rem; color: var(--text-mid); font-size: 0.78rem; }

pre {
  padding: 1.4rem 1.6rem;
  font-size: 0.83rem;
  line-height: 1.8;
  overflow-x: auto;
  tab-size: 4;
  /* pre-wrap keeps the indentation of a code sample while letting an
     over-long line fold instead of running off the panel. break-word folds
     only when a single token (a URL, a hash) is itself wider than the panel,
     so ordinary code still breaks at spaces. */
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* Syntax colors */
.kw  { color: var(--amber); }
.fn  { color: var(--green); }
.st  { color: #a0d080; }
.cm  { color: var(--text-dim); font-style: italic; }
.nu  { color: #60b8f0; }
.ty  { color: var(--purple); }
.op  { color: var(--text-mid); }
.pl  { color: var(--text); }

/* ── SECTIONS ── */
section {
  padding: 5rem 2rem;
  max-width: 1160px;
  margin: 0 auto;
}

.section-label {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 0.8rem;
}

.section-label::before { content: '// '; }

h2 {
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: bold;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

h2 em { color: var(--amber); font-style: normal; }

.section-lead {
  color: var(--text-mid);
  max-width: 600px;
  margin-bottom: 3rem;
  line-height: 1.8;
  font-size: 0.9rem;
}

hr.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0 2rem;
}

/* ── FEATURES GRID ── */
.features {
  --cols: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

/* Six cards divide evenly three-across; four would leave a stretched half-row. */
.features--3 { --cols: 3; }

/* Cards grow to fill a short final row - an empty grid cell would expose the
   container background, which is the colour of the 1px separators. */
.feature {
  flex: 1 1 calc(100% / var(--cols) - 1px);
  background: var(--bg2);
  padding: 1.6rem;
  transition: background 0.15s;
}

.feature:hover { background: var(--bg3); }

.feature-icon {
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
  display: block;
}

.feature h3 {
  font-size: 0.88rem;
  color: var(--amber);
  margin-bottom: 0.5rem;
  letter-spacing: 0.04em;
}

.feature p {
  font-size: 0.8rem;
  color: var(--text-mid);
  line-height: 1.7;
}

/* ── CODE EXAMPLES TABS ── */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
  overflow-x: auto;
}

.tab {
  padding: 0.6rem 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  cursor: pointer;
  border: none;
  background: var(--bg3);
  border-right: 1px solid var(--border);
  transition: all 0.1s;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.tab:hover { color: var(--text); background: var(--bg2); }
.tab.active { color: var(--amber); background: var(--bg2); border-bottom: 1px solid var(--bg2); margin-bottom: -1px; }

.tab-content { display: none; }
.tab-content.active { display: block; }

.code-panel {
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg2);
}

/* ── SCREENSHOT ── */
.shot {
  margin: 2rem 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg2);
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
}
.shot figcaption {
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-mid);
}

/* ── STD LIBRARY ── */
.stdlib-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.stdlib-cat {
  background: var(--bg2);
  padding: 1.1rem 1.4rem;
}

.stdlib-cat h4 {
  font-size: 0.75rem;
  color: var(--amber);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.stdlib-cat ul { list-style: none; }

.stdlib-cat li {
  font-size: 0.82rem;
  color: var(--text);
  padding: 0.15rem 0;
}

.stdlib-cat li::before { content: '· '; color: var(--amber); opacity: 0.5; }
.stdlib-cat li a { color: inherit; text-decoration: none; border-bottom: 1px dotted transparent; }
.stdlib-cat li a:hover { color: var(--amber); border-bottom-color: var(--amber-dim); }

/* ── DOWNLOADS ── */
.dl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.dl-card {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.4rem;
  background: var(--bg2);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  opacity: 0.55;
}

a.dl-card {
  text-decoration: none;
  cursor: pointer;
  opacity: 1;
  border-color: var(--amber-dim);
  background: rgba(240,112,48,0.05);
  transition: border-color 0.15s, background 0.15s;
}

a.dl-card:hover {
  border-color: var(--amber);
  background: rgba(240,112,48,0.10);
}

a.dl-card.soon {
  opacity: 0.55;
  border-color: var(--border);
  background: var(--bg2);
  cursor: default;
  pointer-events: none;
}

.dl-card.available { opacity: 1; }

.dl-platform {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}

.dl-name {
  font-size: 1rem;
  color: var(--text);
  font-weight: bold;
}

.dl-arch {
  font-size: 0.75rem;
  color: var(--text-mid);
}

.dl-status {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.2em 0.6em;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  border-radius: 2px;
  background: var(--bg3);
  color: var(--text-dim);
  border: 1px solid var(--border);
  align-self: flex-start;
}

.dl-status.soon  { color: var(--amber); border-color: var(--amber-dim); }
.dl-status.ready { color: var(--amber);     border-color: var(--amber);     background: rgba(240,112,48,0.08); }

.code-panel--spaced { margin-bottom: 2rem; }

.code-bar--tabs { justify-content: flex-start; gap: 0; padding: 0; }

.code-bar { position: relative; }

.hero-copy-btn {
  margin-left: auto;
  padding: 0.15em 0.55em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--amber);
  border: 1px solid var(--amber-dim);
  border-radius: 2px;
  background: rgba(240,112,48,0.07);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.hero-copy-btn:hover { background: rgba(240,112,48,0.16); border-color: var(--amber); }
.hero-copy-btn.copied { color: var(--green); border-color: var(--green-dim); }

.feature-link { color: var(--amber); font-size: 0.8rem; text-decoration: none; }
.feature-link:hover { text-decoration: underline; }
.doc-dl-link { margin-left: 0.9rem; color: var(--text-mid); }

/* ── DOC MODAL ── */
.doc-modal { position: fixed; inset: 0; z-index: 10000; display: none; }
.doc-modal.open { display: block; }
.doc-modal-backdrop { position: absolute; inset: 0; background: rgba(8,6,12,0.78); backdrop-filter: blur(2px); }
.doc-modal-panel {
  position: absolute; inset: 3vh 3vw; display: flex; flex-direction: column;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6); overflow: hidden;
}
.doc-modal-bar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--border); background: var(--bg3);
}
.doc-modal-title { font-family: var(--font-mono); color: var(--amber); font-size: 0.95rem; flex: 0 0 auto; }
.doc-modal-actions { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
.doc-search {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  font-family: var(--font-mono); font-size: 0.78rem; padding: 0.3rem 0.55rem; border-radius: 4px; width: 180px;
}
.doc-search:focus { outline: none; border-color: var(--amber); }
.doc-modal-btn {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  font-family: var(--font-mono); font-size: 0.78rem; padding: 0.32rem 0.7rem; border-radius: 4px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.doc-modal-btn:hover { border-color: var(--amber); color: var(--amber); }
.doc-modal-body { flex: 1; display: flex; min-height: 0; }
.doc-toc {
  flex: 0 0 230px; overflow-y: auto; padding: 1rem 0.6rem 2rem 1.1rem;
  border-right: 1px solid var(--border); background: var(--bg2);
}
.doc-toc a {
  display: block; color: var(--text-mid); text-decoration: none; font-size: 0.76rem;
  padding: 0.18rem 0.4rem; border-radius: 3px; line-height: 1.4;
  text-transform: none; letter-spacing: normal; border: none;
}
.doc-toc a:hover { color: var(--text); background: var(--bg3); }
.doc-toc a.lvl-3 { padding-left: 1.2rem; font-size: 0.72rem; opacity: 0.85; }
.doc-toc a.hidden { display: none; }
.doc-content {
  flex: 1; overflow-y: auto; padding: 1.6rem 2.4rem 4rem; font-family: var(--font-ui);
  line-height: 1.75; color: var(--text); scroll-behavior: smooth;
}
.doc-content.loading, .doc-content.error { font-family: var(--font-mono); color: var(--text-mid); }
.doc-content h1, .doc-content h2, .doc-content h3, .doc-content h4 {
  font-family: var(--font-mono); color: var(--text); margin: 1.8rem 0 0.8rem; line-height: 1.3;
}
.doc-content h1 { font-size: 1.7rem; color: var(--amber); }
.doc-content h2 { font-size: 1.3rem; border-bottom: 1px solid var(--border); padding-bottom: 0.3rem; }
.doc-content h3 { font-size: 1.08rem; color: var(--green); }
.doc-content h4 { font-size: 0.95rem; color: var(--text-mid); }
.doc-content p, .doc-content ul, .doc-content ol, .doc-content blockquote, .doc-content table { margin: 0.8rem 0; }
.doc-content a { color: var(--amber); }
.doc-content ul, .doc-content ol { padding-left: 1.6rem; }
.doc-content li { margin: 0.25rem 0; }
.doc-content code {
  font-family: var(--font-mono); font-size: 0.85em; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 3px; padding: 0.1em 0.35em; color: var(--green);
  overflow-wrap: anywhere;   /* inline code is often a full signature or URL */
}
.doc-content pre {
  background: var(--bg); border: 1px solid var(--border); border-radius: 5px;
  padding: 1rem 1.1rem; overflow-x: auto; margin: 1rem 0;
  white-space: pre-wrap; overflow-wrap: break-word;
}
.doc-content pre code { background: none; border: none; padding: 0; color: var(--text); font-size: 0.82rem; line-height: 1.6; }
.doc-content blockquote { border-left: 3px solid var(--amber-dim); padding-left: 1rem; color: var(--text-mid); }
/* The reference's API tables are far wider than the modal. Making the table a
   block lets it scroll on its own instead of stretching the page - the one
   case where scrolling beats wrapping, since folded cells lose the columns. */
.doc-content table {
  border-collapse: collapse; width: 100%; font-size: 0.85rem;
  display: block; overflow-x: auto; max-width: 100%;
}
.doc-content th, .doc-content td { border: 1px solid var(--border); padding: 0.4rem 0.7rem; text-align: left; }
.doc-content th { background: var(--bg3); font-family: var(--font-mono); }
.doc-content tr:nth-child(even) td { background: var(--bg3); }
.doc-content hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
.doc-content img { max-width: 100%; }
.doc-content :target { scroll-margin-top: 1rem; }
.doc-toc, .doc-content { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.doc-toc::-webkit-scrollbar, .doc-content::-webkit-scrollbar { width: 10px; }
.doc-toc::-webkit-scrollbar-thumb, .doc-content::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 5px; border: 2px solid var(--bg2);
}
.doc-toc::-webkit-scrollbar-thumb:hover, .doc-content::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
@media (max-width: 720px) {
  .doc-modal-panel { inset: 0; border-radius: 0; }
  .doc-toc { display: none; }
  .doc-content { padding: 1.2rem 1.2rem 4rem; }
  .doc-search { width: 110px; }
}
.section-footnote { margin-top: 1rem; font-size: 0.9rem; opacity: 0.7; }
.section-footnote a { color: var(--amber); }
.section-footnote--spaced { margin-bottom: 2rem; }
.pm-commands { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font-family: var(--font-mono); font-size: 0.9rem; }
.pm-commands tr { border-bottom: 1px solid rgba(255,255,255,0.06); }
.pm-commands tr:last-child { border-bottom: none; }
.pm-commands td { padding: 0.6rem 1rem; vertical-align: middle; }
.pm-commands td:first-child { color: var(--amber); white-space: nowrap; width: 1%; padding-right: 2rem; }
.pm-commands td:last-child { color: var(--text); font-family: var(--font-mono); }

.ffi-header-note { font-size: 0.78rem; color: var(--text-mid); margin-bottom: 0.5rem; margin-top: 0.8rem; }

/* ── FOOTER ── */
.footer-outer {
  position: sticky;
  bottom: 0;
  z-index: 98;
  background: rgba(10,12,14,0.97);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(4px);
}

footer {
  padding: 1.2rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 1160px;
  margin: 0 auto;
}

footer .f-logo { color: var(--amber); font-size: 0.88rem; font-weight: bold; }

footer .f-copy {
  font-size: 0.75rem;
  color: var(--text-mid);
  letter-spacing: 0.04em;
}

footer a {
  color: var(--text-mid);
  text-decoration: none;
  font-size: 0.78rem;
  transition: color 0.15s;
}

footer a:hover { color: var(--amber); }

footer .f-links { display: flex; gap: 1.5rem; }

/* ── LIB LIST ── */
.lib-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 2rem;
}

.lib-item {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: var(--bg2);
  padding: 1rem 1.4rem;
  transition: background 0.15s;
}

.lib-item:hover { background: var(--bg3); }

.lib-item-name {
  font-size: 0.92rem;
  font-weight: bold;
  color: var(--amber);
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.lib-u-badge {
  font-size: 0.6rem;
  font-weight: normal;
  letter-spacing: 0.05em;
  color: var(--amber);
  border: 1px solid var(--amber-dim);
  border-radius: 2px;
  padding: 0.1em 0.35em;
  background: rgba(240,112,48,0.08);
  position: relative;
  cursor: default;
}

.lib-u-badge::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text-mid);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  padding: 0.45em 0.7em;
  border-radius: 3px;
  white-space: normal;
  width: 260px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
}

.lib-u-badge:hover { color: var(--amber); border-color: var(--amber-dim); }
.lib-u-badge:hover::after { opacity: 1; }

.lib-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.18rem;
}

.lib-links a { margin: 0; }

.lib-item-desc {
  font-size: 0.82rem;
  color: var(--text-mid);
  line-height: 1.6;
  max-width: 680px;
}

.lib-item-code {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.lib-code-line {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.45rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0.22em 0.55em;
  font-size: 0.7rem;
  color: var(--text-mid);
  /* Import lines carry a full URL, which is longer than the panel on most
     screens. Wrapping keeps the copy button reachable - scrolling pushed it
     out of sight, so the one control on the line could not be clicked. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* A flex item will not shrink below its content width without this, which is
   what makes the line overflow instead of wrapping. */
.lib-code-line > span { min-width: 0; flex: 1 1 auto; }

.lib-code-line span { flex: 1; }

.lib-copy-btn {
  flex-shrink: 0;
  padding: 0.1em 0.45em;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--amber);
  border: 1px solid var(--amber-dim);
  border-radius: 2px;
  background: rgba(240,112,48,0.07);
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s, background 0.1s;
}

.lib-copy-btn:hover { background: rgba(240,112,48,0.16); border-color: var(--amber); }
.lib-copy-btn.copied { color: var(--green); border-color: var(--green-dim); }

.lib-src-link {
  font-size: 0.67rem;
  color: var(--text-mid);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.1s;
}

.lib-src-link:hover { color: var(--amber); }

.lib-c-link {
  font-size: 0.67rem;
  color: var(--blue);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.1s;
}

.lib-c-link:hover { color: #90b0f0; }

/* ── EXAMPLE COLLECTION ── */
.example-collection-head {
  margin-top: 3rem;
  margin-bottom: 1.2rem;
}

.example-collection-head h3 {
  font-size: 1rem;
  font-weight: bold;
  color: var(--text);
  margin-bottom: 0.3rem;
}

.example-collection-head p {
  font-size: 0.82rem;
  color: var(--text-mid);
}

.example-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  gap: 0.6rem;
}

.example-card {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.85rem 1rem;
  background: var(--bg2);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: border-color 0.15s;
}

.example-card:hover { border-color: var(--amber-dim); }

.example-num {
  font-size: 0.68rem;
  color: var(--text-mid);
  letter-spacing: 0.08em;
}

.example-name {
  font-size: 0.82rem;
  color: var(--text);
  font-weight: bold;
  flex: 1;
}

.example-dl {
  margin-top: 0.4rem;
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.dl-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.2em 0.55em;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  border-radius: 2px;
  border: 1px solid var(--amber-dim);
  color: var(--amber);
  background: rgba(240,112,48,0.07);
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
}

.dl-pill:hover { background: rgba(240,112,48,0.16); border-color: var(--amber); }

.dl-pill.c-file { border-color: var(--blue); color: var(--blue); background: rgba(112,144,224,0.07); }
.dl-pill.c-file:hover { background: rgba(112,144,224,0.16); border-color: var(--blue); }

/* ── CURSOR BLINK ── */
.blink {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  background: var(--amber);
  vertical-align: text-bottom;
  animation: blink 1.1s step-end infinite;
  margin-left: 2px;
}

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── FADE IN ── */
.fade-in {
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 0.5s ease forwards;
}

@keyframes fadeUp { to { opacity:1; transform:none; } }

.fade-in:nth-child(1) { animation-delay: 0.05s; }
.fade-in:nth-child(2) { animation-delay: 0.15s; }
.fade-in:nth-child(3) { animation-delay: 0.25s; }
.fade-in:nth-child(4) { animation-delay: 0.35s; }
.fade-in:nth-child(5) { animation-delay: 0.45s; }

/* ── CONTACT ── */
.discord-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--amber-dim);
  border-radius: 4px;
  background: rgba(240, 112, 48, 0.06);
  color: var(--amber);
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.discord-cta:hover {
  background: rgba(240, 112, 48, 0.12);
  border-color: var(--amber);
}

.contact-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 2rem;
  max-width: 600px;
}
.contact-email {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--amber);
  text-decoration: none;
  word-break: break-all;
}
.contact-email:hover { text-decoration: underline; }
.contact-note {
  color: var(--text-mid);
  font-size: 0.85rem;
  line-height: 1.7;
  margin-top: 1rem;
}

/* ── RESPONSIVE ── */
@media (max-width: 980px) {
  .stdlib-grid { grid-template-columns: repeat(2, 1fr); }
  .features { --cols: 2; }
}


/* ── RELEASE NOTES ── */
.release-head {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}

.release-version {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--amber);
  border: 1px solid var(--amber-dim);
  background: rgba(240,112,48,0.07);
  border-radius: 3px;
  padding: 0.25rem 0.6rem;
  letter-spacing: 0.06em;
}

.release-date { font-size: 0.78rem; color: var(--text-dim); font-family: var(--font-mono); }

.release-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.release-col { background: var(--bg2); padding: 1.6rem; }

.release-col h3 {
  font-size: 0.88rem;
  color: var(--amber);
  margin-bottom: 0.9rem;
  letter-spacing: 0.04em;
}

.release-col.fixed h3 { color: var(--blue); }

.release-col ul { list-style: none; }

.release-col li {
  font-size: 0.8rem;
  color: var(--text-mid);
  line-height: 1.7;
  padding-left: 1rem;
  margin-bottom: 0.7rem;
  position: relative;
}

.release-col li::before {
  content: '\203A';
  position: absolute;
  left: 0;
  color: var(--text-dim);
}

.release-col li strong { color: var(--text); font-weight: normal; }

.release-col a { color: var(--amber); text-decoration: none; }
.release-col a:hover { text-decoration: underline; }

.release-col code {
  font-family: var(--font-mono);
  font-size: 0.94em;
  color: var(--green);
}

@media (max-width: 820px) { .release-grid { grid-template-columns: 1fr; } }

@media (max-width: 820px) {
  .nav-right .nav-link { display: none; }
  .nav-menu { grid-template-columns: repeat(2, minmax(8rem, 1fr)); }
}

@media (max-width: 600px) {
  .stdlib-grid { grid-template-columns: 1fr; }
  .features { --cols: 1; }
  .pm-commands td:first-child { white-space: normal; }
  nav { padding: 0 1rem; }
  .nav-logo span { display: none; }
  .nav-menu {
    left: 0;
    right: 0;
    max-width: none;
    border-left: none;
    border-right: none;
  }
  footer { flex-direction: column; align-items: flex-start; }
}

/* ── Libraries page (libraries.html) ───────────────────────────────────────── */

.lib-crumb { font-size: 0.78rem; margin-bottom: 1.2rem; }
.lib-crumb a { color: var(--text-dim); text-decoration: none; }
.lib-crumb a:hover { color: var(--amber); }

.lib-h1 {
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: bold;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}
.lib-h1 em { color: var(--amber); font-style: normal; }

/* Sticky under the 52px nav so the filters stay reachable down a long list. */
.lib-toolbar {
  position: sticky;
  top: 52px;
  z-index: 50;
  margin: 2rem 0 1.5rem;
  padding: 0.9rem 0 0.8rem;
  background: rgba(23,20,28,0.96);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--border);
}

.lib-search-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.lib-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 320px;
  min-width: 0;
}

.lib-search-icon {
  position: absolute;
  left: 0.7rem;
  color: var(--text-dim);
  font-size: 0.9rem;
  pointer-events: none;
}

.lib-search {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  padding: 0.55rem 2.2rem 0.55rem 2.1rem;
}
.lib-search::placeholder { color: var(--text-dim); }
.lib-search:focus { outline: none; border-color: var(--amber); background: var(--bg3); }
.lib-search::-webkit-search-decoration,
.lib-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.lib-search-clear {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.2rem 0.35rem;
}
.lib-search-clear:hover { color: var(--amber); }

.lib-count {
  font-size: 0.78rem;
  color: var(--text-dim);
  white-space: nowrap;
}

.lib-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.lib-chip {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-mid);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.lib-chip:hover { color: var(--text); border-color: var(--text-dim); }
.lib-chip.active {
  color: var(--amber);
  border-color: var(--amber-dim);
  background: rgba(240,112,48,0.08);
}
.lib-chip-n { color: var(--text-dim); margin-left: 0.25rem; }
.lib-chip.active .lib-chip-n { color: var(--amber); opacity: 0.7; }

/* .lib-item sets display:flex, which beats the UA rule for [hidden]. */
.lib-item[hidden] { display: none; }

.lib-item-cat {
  font-size: 0.68rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: -0.25rem;
}

.lib-item--linked {
  box-shadow: inset 3px 0 0 var(--amber);
  background: var(--bg3);
}

.lib-empty {
  font-size: 0.85rem;
  color: var(--text-mid);
  padding: 2rem 0 3rem;
  text-align: center;
}
.lib-empty span { color: var(--amber); }

.lib-reset {
  background: none;
  border: none;
  border-bottom: 1px dotted var(--amber-dim);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
}
.lib-reset:hover { border-bottom-style: solid; }

/* Homepage teaser card that links here. */
.libs-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
  padding: 1.2rem 1.4rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.libs-cta p { font-size: 0.82rem; color: var(--text-mid); flex: 1 1 320px; margin: 0; }
.libs-cta .btn { margin: 0; }

@media (max-width: 720px) {
  .lib-toolbar { padding-top: 0.7rem; }
  .lib-count { flex: 1 1 100%; }
}

/* ── Commercial services (index.html #commercial) ──────────────────────────── */

.svc-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin: 2rem 0;
}

.svc-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  background: var(--bg2);
  padding: 0.9rem 1.4rem;
  transition: background 0.15s;
}
.svc-item:hover { background: var(--bg3); }

.svc-name {
  font-size: 0.88rem;
  color: var(--text);
  letter-spacing: 0.02em;
}

.svc-detail {
  display: block;
  font-size: 0.78rem;
  color: var(--text-mid);
  letter-spacing: 0;
  margin-top: 0.2rem;
}

.svc-price {
  font-size: 0.78rem;
  color: var(--amber);
  border: 1px solid var(--amber-dim);
  background: rgba(240,112,48,0.08);
  border-radius: 3px;
  padding: 0.15rem 0.6rem;
  white-space: nowrap;
}
.svc-price--soft { color: var(--text-mid); border-color: var(--border); background: none; }

.commercial-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 1.2rem 1.4rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  border-radius: 4px;
}
.commercial-note p { flex: 1 1 340px; font-size: 0.85rem; color: var(--text-mid); margin: 0; }
.commercial-note strong { color: var(--text); }
.commercial-note .btn { margin: 0; }