/* The /blueprints page: a big In Development banner, filters, and one card per blueprint, on top of org.css */
.bp-dev { margin: 18px 0 6px; padding: 18px 22px; max-width: 64rem; color: var(--text);
  border: 2px solid #ffb43a; background: repeating-linear-gradient(-45deg, rgba(255,180,58,.14) 0 14px, rgba(255,180,58,.04) 14px 28px), rgba(16,12,22,.9); }
.bp-dev .big { margin: 0 0 6px; font: 700 clamp(1.8rem, 5vw, 2.8rem)/1 var(--hud); letter-spacing: .18em; text-transform: uppercase; color: #ffb43a; }
.bp-dev p { margin: 0; line-height: 1.5; }
.bp-dev a { color: #ffb43a; }
.filters .n { opacity: .7; margin-left: 4px; }
.bp-tools { align-items: center; }
.bp-tools .filters { margin-top: 0; }
.bp-tools select, .bp-tools #search { padding: 6px 10px; background: rgba(16,12,22,.9); color: var(--text); border: 1px solid var(--hud-line); font: inherit; }
.bp-tools #search { margin-left: auto; width: min(100%, 20rem); }
/* Cards in the home page's tool card style (org.css .land-tools .tool.pic): picture on the right, faded left and down.
   No wiki picture: the placeholder (brand/bp-placeholder.webp, a workbench in an Anvil ship). */
.bp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 16px; margin-top: 12px; }
.bp { --tool: var(--cyan); position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 8px;
  min-height: 11rem; padding: 18px 18px 16px; text-align: left; cursor: pointer; color: var(--text); font: inherit;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tool) 9%, #17111f), #100c16 70%);
  border: 1px solid var(--hud-line); border-top: 2px solid var(--tool); transition: border-color .15s, transform .15s, box-shadow .15s; }
.bp::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, #100c16 0, rgba(16,12,22,.4) 30%, transparent 55%),
    linear-gradient(90deg, #100c16 0, rgba(16,12,22,.8) 25%, rgba(16,12,22,.35) 52%, transparent 75%),
    var(--pic, url(/org/brand/bp-placeholder.webp)) 100% 30% / cover no-repeat; }
.bp:hover, .bp:focus-visible { border-color: var(--tool); transform: translateY(-2px); box-shadow: 0 6px 22px color-mix(in srgb, var(--tool) 20%, transparent); }
.bp .tag { font: 500 .62rem/1.3 var(--hud); letter-spacing: .2em; text-transform: uppercase; color: var(--tool); }
.bp .name { max-width: 75%; font: 400 1.1rem/1.25 var(--sc-font); letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 6px #0b0710; }
.bp .sub { color: var(--text); opacity: .8; font-size: .85rem; text-shadow: 0 1px 6px #0b0710; }
.bp .src { margin-top: auto; font: 500 .64rem/1.3 var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--tool); }
.bp .shop { margin-top: 4px; font: 500 .62rem/1.3 var(--hud); letter-spacing: .14em; text-transform: uppercase; color: #ffc861; text-shadow: 0 1px 6px #0b0710; }
.bp-detail { width: min(92vw, 46rem); max-height: 85vh; padding: 22px 24px; color: var(--text); background: #120d1a; border: 1px solid var(--cyan); }
.bp-detail::backdrop { background: rgba(5,3,9,.7); backdrop-filter: blur(3px); }
.bp-detail .close { position: absolute; top: 8px; right: 12px; background: none; border: 0; color: var(--muted); font-size: 1.8rem; cursor: pointer; }
.bp-detail .close:hover { color: var(--cyan); }
.bp-detail .kicker { margin: 0; font: 500 .66rem/1.3 var(--hud); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.bp-detail h2 { margin: 4px 0 6px; font: 300 1.6rem/1.2 var(--sc-font); }
.bp-detail h3 { margin: 16px 0 6px; font: 500 .7rem/1 var(--hud); letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); }
.bp-detail .scroll { overflow-x: auto; }
.bp-detail table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.bp-detail th { text-align: left; font: 500 .62rem/1 var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 6px 8px 6px 0; }
.bp-detail td { padding: 6px 8px 6px 0; border-top: 1px solid var(--hud-line); vertical-align: top; }
.bp-detail td span { display: block; color: var(--muted); font-size: .8rem; }
.bp-detail td a { color: var(--text); }
.bp-detail .num { text-align: right; white-space: nowrap; }
.bp-detail .il { font-style: normal; color: #ff7a7a; }
.bp-detail .ing { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 2px 18px; font-size: .88rem; }
.bp-detail .ing li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--hud-line); padding: 3px 0; }
.bp-detail .ing li span:last-child { color: var(--muted); }
.bp-detail .small a { color: var(--cyan); }
.note.small a { color: var(--cyan); }
@media (max-width: 700px) {
  .bp-tools #search { margin-left: 0; width: 100%; }
  .bp-list { grid-template-columns: 1fr; gap: 10px; }
  .bp { min-height: 9rem; }
  .bp-detail { padding: 18px 16px; }
  .bp-detail td:nth-child(3), .bp-detail th:nth-child(3) { display: none; }
}