/* AIBridges styles.
   Every class is a bridge data field prefixed with "bridge", so the class name
   tells you which JSON item it styles — and the prefix keeps these from clashing
   with the site's own classes:
     id  -> .bridgeId          question   -> .bridgeQuestion
     rare-> .bridgeRare        why        -> .bridgeWhy
     missing -> .bridgeMissing reasoning  -> .bridgeReasoning
     type -> .bridgeType       confidence -> .bridgeConfidence
   (.bridgePeople, .bridgeType, .bridgeConfidence, .bridgeStatus exist in the markup
    as styling hooks even where they have no rule yet — add rules when you want them.) */

.bridgeWrap { padding: 4px 16px 16px 16px; }

/* one rule per JSON field shown on a card */
.bridgeId        { background-color: #FFFFFF06; padding: 4px 8px; border-radius: 6px; color: #88888888; }
.bridgeQuestion  { margin: 8px; color: #88aaee; }
.bridgeRare      { /* background-color: #FFFFFF06; padding: 4px 8px; border-radius: 6px; */ }
.bridgeWhy       { /* background-color: #FFFFFF06; padding: 4px 8px; border-radius: 6px; */ }
.bridgeMissing   { /* background-color: #FFFFFF06; padding: 4px 8px; border-radius: 6px; */ }
.bridgeReasoning { /* background-color: #FFFFFF06; padding: 4px 8px; border-radius: 6px; */ }

/* structural wrappers */
.bridgeCard   { background-color: #FFFFFF06; border-radius: 16px; margin-bottom: 8px; padding: 8px; }
.bridgePerson { background-color: #FFFFFF11; border-radius: 6px; padding: 4px 8px; margin-bottom: 8px; }
.bridgeMeta   { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.bridgeTag    { background-color: #FFFFFF11; padding: 4px 8px; border-radius: 6px; }

/* confidence coloring — the value class is "bridgeConfidence" + the value (High/Medium/Low).
   Defined after .bridgeTag so these win on source order. */
.bridgeConfidenceHigh   { background-color: #2ecc7120; color: #7ee0a8; }
.bridgeConfidenceMedium { background-color: #f1c40f20; color: #f0d878; }
.bridgeConfidenceLow    { background-color: #e74c3c20; color: #f0a08c; }

.bridgeRawJson { background-color: #000000; color: #dddddd; border: 1px solid #888888; max-width: 676px; width: 100%; box-sizing: border-box; overflow: auto; padding: 8px; margin: auto; }