/* ---------------------------------------------------------------------------
   cserver.cmeta.catalog - page styles.

   Everything is scoped under #cxc so the page cannot disturb its host, and
   nothing is loaded over the network (no CDN, no web font) so the page renders
   identically on the internal cserver and on the cPlatform.

   Three theme sources, in order of authority:
     .cxc.dark            the cPlatform told us the visitor chose dark
     body.dark-theme #cxc an anonymous cPlatform visitor arrives with misc={}
                          while the page still renders dark
     .cxc-auto + prefers-color-scheme
                          the internal cserver only, which has no theme system.
                          The class is what keeps the OS preference from
                          overriding a cPlatform user who chose light.
   --------------------------------------------------------------------------- */

#cxc {
  --cxc-fg: #1c2024;
  --cxc-dim: #5b6570;
  --cxc-bg: transparent;
  --cxc-panel: #f7f8fa;
  --cxc-border: #dfe3e8;
  --cxc-accent: #1f6feb;
  --cxc-term-bg: #1c2024;
  --cxc-term-fg: #eceff3;
  --cxc-ok-bg: #e6f4ea;
  --cxc-ok-fg: #1b5e30;

  color: var(--cxc-fg);
  background: var(--cxc-bg);
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
  line-height: 1.55;
}

#cxc.dark,
body.dark-theme #cxc {
  --cxc-fg: #e6e9ed;
  --cxc-dim: #9aa4b0;
  --cxc-panel: #1b1f24;
  --cxc-border: #303740;
  --cxc-accent: #6cb0ff;
  --cxc-term-bg: #0f1216;
  --cxc-term-fg: #e6e9ed;
  --cxc-ok-bg: #143021;
  --cxc-ok-fg: #7fd6a0;
}

@media (prefers-color-scheme: dark) {
  /* Only where the host has no theme system of its own (the internal cserver,
     which sets .cxc-auto). On the cPlatform the visitor's own choice decides,
     so the OS preference must not override a user who picked the light theme. */
  #cxc.cxc-auto {
    --cxc-fg: #e6e9ed;
    --cxc-dim: #9aa4b0;
    --cxc-panel: #1b1f24;
    --cxc-border: #303740;
    --cxc-accent: #6cb0ff;
    --cxc-term-bg: #0f1216;
    --cxc-term-fg: #e6e9ed;
    --cxc-ok-bg: #143021;
    --cxc-ok-fg: #7fd6a0;
  }
}

#cxc a { color: var(--cxc-accent); }
#cxc [hidden] { display: none !important; }

/* Bootstrap on the cPlatform paints bare <code> pink; keep it as text. */
#cxc code {
  color: inherit;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
}

#cxc .cxc-title { margin: 0 0 .4rem; font-size: 1.6rem; }
#cxc .cxc-lede { color: var(--cxc-dim); margin: 0 0 1.4rem; max-width: 78ch; }
#cxc h3 { margin: 1.8rem 0 .6rem; font-size: 1.1rem; }
#cxc .cxc-hint { color: var(--cxc-dim); }
#cxc .cxc-warn {
  padding: .7rem .9rem;
  border: 1px solid var(--cxc-border);
  border-left: 3px solid #d1883c;
  border-radius: 6px;
  background: var(--cxc-panel);
}

/* --- controls (filters + search) ----------------------------------------- */
#cxc .cxc-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .9rem;
}
#cxc .cxc-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
#cxc .cxc-filter {
  font: inherit;
  font-size: .88rem;
  color: var(--cxc-fg);
  background: var(--cxc-panel);
  border: 1px solid var(--cxc-border);
  border-radius: 999px;
  padding: .25rem .8rem;
  cursor: pointer;
}
#cxc .cxc-filter:hover { border-color: var(--cxc-accent); }
#cxc .cxc-filter.cxc-on {
  border-color: var(--cxc-accent);
  box-shadow: inset 0 0 0 1px var(--cxc-accent);
}
#cxc .cxc-search {
  font: inherit;
  font-size: .9rem;
  color: var(--cxc-fg);
  background: var(--cxc-panel);
  border: 1px solid var(--cxc-border);
  border-radius: 6px;
  padding: .3rem .6rem;
  min-width: 14rem;
  flex: 0 1 18rem;
}
#cxc .cxc-count {
  display: inline-block;
  font-size: .78em;
  color: var(--cxc-dim);
  padding-left: .25rem;
}

/* --- tables --------------------------------------------------------------- */
#cxc .cxc-tablewrap { overflow-x: auto; }
#cxc .cxc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
#cxc .cxc-table th {
  text-align: left;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cxc-dim);
  font-weight: 600;
  border-bottom: 1px solid var(--cxc-border);
  padding: .45rem .6rem;
  white-space: nowrap;
}
#cxc .cxc-table td {
  border-bottom: 1px solid var(--cxc-border);
  padding: .5rem .6rem;
  vertical-align: top;
}
#cxc .cxc-table tr:last-child td { border-bottom: none; }
#cxc .cxc-name { white-space: nowrap; font-weight: 600; }
#cxc .cxc-origin { white-space: nowrap; color: var(--cxc-dim); font-size: .88rem; }
#cxc .cxc-desc { color: var(--cxc-fg); }
#cxc th.cxc-artifacts, #cxc td.cxc-artifacts { text-align: right; white-space: nowrap; }
#cxc .cxc-num { font-variant-numeric: tabular-nums; }
#cxc .cxc-cmd-name { white-space: nowrap; }
#cxc .cxc-src { font-size: .76rem; color: var(--cxc-dim); margin-top: .15rem; }
#cxc .cxc-cmds td { vertical-align: top; }

/* --- cards (repositories page) -------------------------------------------- */
#cxc .cxc-cards { display: grid; gap: 1rem; }
#cxc .cxc-card {
  border: 1px solid var(--cxc-border);
  border-radius: 10px;
  background: var(--cxc-panel);
  padding: 1rem 1.1rem 1.2rem;
}
#cxc .cxc-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: baseline;
  justify-content: space-between;
}
#cxc .cxc-card-head h3 { margin: 0; font-size: 1.15rem; }
#cxc .cxc-card-title { margin: .1rem 0 .5rem; color: var(--cxc-dim); }
#cxc .cxc-badge {
  font-size: .75rem;
  border-radius: 999px;
  padding: .15rem .6rem;
  white-space: nowrap;
}
#cxc .cxc-ok { background: var(--cxc-ok-bg); color: var(--cxc-ok-fg); }
#cxc .cxc-muted {
  background: transparent;
  color: var(--cxc-dim);
  border: 1px solid var(--cxc-border);
}
#cxc .cxc-sub {
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cxc-dim);
  margin: 1rem 0 .35rem;
}
#cxc .cxc-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
#cxc .cxc-chip {
  font-size: .85rem;
  text-decoration: none;
  border: 1px solid var(--cxc-border);
  border-radius: 999px;
  padding: .15rem .65rem;
  background: var(--cxc-bg);
}
#cxc .cxc-chip:hover { border-color: var(--cxc-accent); }

/* --- facts ---------------------------------------------------------------- */
#cxc .cxc-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .5rem 1.2rem;
  margin: .8rem 0 0;
}
#cxc .cxc-facts-wide { margin: .9rem 0 1.2rem; }
#cxc .cxc-fact dt {
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cxc-dim);
}
#cxc .cxc-fact dd { margin: .1rem 0 0; font-size: .92rem; overflow-wrap: anywhere; }

/* --- code blocks ---------------------------------------------------------- */
#cxc .cxc-cmd {
  background: var(--cxc-term-bg);
  color: var(--cxc-term-fg);
  border-radius: 8px;
  padding: .7rem .9rem;
  overflow-x: auto;
  margin: .5rem 0;
  font-size: .88rem;
  line-height: 1.5;
}
#cxc .cxc-cmd code { color: inherit; }
#cxc .cxc-comment { color: #9aa4b0; }

#cxc .cxc-sig { margin-top: .4rem; }
#cxc .cxc-sig summary {
  cursor: pointer;
  font-size: .8rem;
  color: var(--cxc-dim);
}
#cxc .cxc-sig pre {
  background: var(--cxc-term-bg);
  color: var(--cxc-term-fg);
  border-radius: 8px;
  padding: .7rem .9rem;
  overflow-x: auto;
  font-size: .82rem;
  margin: .4rem 0 .2rem;
}
#cxc .cxc-sig pre code { color: inherit; }

/* --- detail page bits ------------------------------------------------------ */
#cxc .cxc-back { text-decoration: none; font-size: .9rem; }
#cxc .cxc-cat-name { margin: .3rem 0 .2rem; font-size: 1.5rem; }
#cxc .cxc-cat-desc { margin: 0; max-width: 78ch; }
#cxc .cxc-tag {
  font-size: .78rem;
  border: 1px solid var(--cxc-border);
  border-radius: 999px;
  padding: .05rem .5rem;
  margin-right: .2rem;
  white-space: nowrap;
}
#cxc .cxc-sources { font-size: .9rem; margin-top: 1.4rem; }
#cxc .cxc-foot {
  margin: 2rem 0 .5rem;
  padding-top: .8rem;
  border-top: 1px solid var(--cxc-border);
  font-size: .82rem;
  color: var(--cxc-dim);
}

/* --- narrow screens -------------------------------------------------------- */
@media (max-width: 640px) {
  #cxc .cxc-controls { flex-direction: column; align-items: stretch; }
  #cxc .cxc-search { flex: 1 1 auto; min-width: 0; }
  #cxc .cxc-facts { grid-template-columns: 1fr; }
}