/* plugins.hubra.club: what the Marketplace and the guide add to site.css
   (which is a copy of hubra.club's). Colours only from site.css tokens, so
   light and dark mode follow the main site. */

.brand-sub { font: 600 .78rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); background: var(--tint); border-radius: 6px; padding: 5px 7px; margin-left: -2px; }
.foot-brand .brand-sub { font-size: .72rem; }

[hidden] { display: none !important; }

/* Marketplace toolbar */
.market-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; }
.market-bar input { flex: 1 1 260px; max-width: 420px; font: 500 1rem/1.2 var(--body); color: var(--text); background: var(--surface); border: 1px solid var(--border-2); border-radius: 10px; padding: 12px 14px; }
.market-bar input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 600 .85rem/1 var(--body); color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 8px 12px; cursor: pointer; }
.chip:hover { border-color: var(--border-2); color: var(--text); }
.chip[aria-pressed="true"] { background: var(--tint); border-color: var(--accent); color: var(--tint-text); }
.market-status { color: var(--text-3); font-size: .92rem; margin-left: auto; }

/* Plugin cards */
.plugin-card { position: relative; }
.plugin-card .top-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plugin-card .ver { font: 600 .82rem/1 var(--mono); color: var(--text-3); }
.plugin-card .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.plugin-card dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 4px 0 0; font-size: .9rem; }
.plugin-card dt { color: var(--text-3); }
.plugin-card dd { margin: 0; color: var(--text-2); min-width: 0; overflow-wrap: anywhere; }
.plugin-card details { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; }
.plugin-card summary { cursor: pointer; font-weight: 600; color: var(--accent-text); font-size: .92rem; }
.plugin-card .changes { white-space: pre-wrap; font-size: .88rem; color: var(--text-2); margin-top: 8px; max-height: 16em; overflow: auto; }
.plugin-card .links { display: flex; flex-wrap: wrap; gap: 14px; font-size: .92rem; }
.plugin-card .links a { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.plugin-card .links a:hover { text-decoration: underline; }
.plugin-card .yanked { color: var(--text); background: var(--notice-bg); border: 1px solid var(--notice-border); border-radius: 8px; padding: 6px 10px; font-size: .88rem; }
.market-empty { color: var(--text-2); padding: 24px; border: 1px dashed var(--border-2); border-radius: 16px; }
.trust-line { color: var(--text-3); font-size: .9rem; margin-top: 20px; overflow-wrap: anywhere; }

/* Guide: code blocks */
.prose pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; overflow-x: auto; font: 500 .86rem/1.55 var(--mono); color: var(--text); }
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.prose .callout { background: var(--tint); border-radius: 12px; padding: 14px 16px; color: var(--text); }
.prose .callout p { color: var(--text); }

/* Two big cards linking the two halves of the site */
.duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 640px) { .duo { grid-template-columns: 1fr; } .market-status { margin-left: 0; } }