/* "Bio" hub tiles (see hub.js). Uses the tokens from bridge.css. Same look as the module tiles inside My Xenyra: icon on the left, status pill on the right, name, one line of text. */
.b-hub { display: flex; flex-direction: column; gap: 14px; }
.b-hub__title { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 400; }
.b-hub__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
.b-tile { border-radius: var(--b-radius); border: 1px solid var(--b-line); background: var(--b-surface); }
.b-tile__body { display: flex; flex-direction: column; gap: 10px; min-height: var(--b-tap); padding: 18px; color: inherit; text-decoration: none; }
.b-tile__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.b-tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: var(--b-surface-2); color: var(--b-blue-ink); }
.b-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.b-tile__status { padding: 3px 10px; border-radius: var(--b-pill); border: 1px solid var(--b-line); color: var(--b-muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.b-tile--available .b-tile__status { color: var(--b-ok-ink); }
.b-tile--pilot .b-tile__status { color: var(--b-blue-ink); }
.b-tile__name { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 400; }
.b-tile__text { margin: 0; color: var(--b-muted); font-size: 14px; line-height: 1.5; }
.b-tile--closed { background: transparent; border-style: dashed; }
.b-tile--closed .b-tile__name { color: var(--b-muted); }
@media (hover: hover) { a.b-tile__body:hover .b-tile__name { color: var(--b-blue-ink); } }
@media (min-width: 560px) { .b-hub__grid { grid-template-columns: 1fr 1fr; } }