/* I54: Billing Review. Builds on foundation-details.css and referral-journey.css (unchanged); these rules are scoped to .br-*. */
/* Static modal: no opening animation, so screenshots never catch an animation start. */
.br-page .br-dlg[open]{animation:none}

/* Overview art: relative container for hotspots the parent calibrates later */
.br-art{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#061326;box-shadow:0 18px 55px #0005}
.br-art img{display:block;width:100%;height:auto}
.br-hotspot{position:absolute;display:block;min-width:44px;min-height:44px;border:2px solid transparent;border-radius:10px;cursor:pointer}
.br-hotspot:hover,.br-hotspot:focus-visible{border-color:#fff0a9;background:#f1c86c18;box-shadow:inset 0 0 20px #d6b24a33;outline:2px solid #f8e8b0;outline-offset:-3px}

/* Separate branch */
.br-branch{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:start;padding:18px;border:1px dashed var(--line);border-radius:14px;background:rgba(127,176,255,.05)}
.br-branch-main{min-width:0}
.br-branch-main p:last-child{margin:0;color:#c7cfde;font-size:14.5px}
.br-diff{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.br-diff li{min-width:0;padding:10px 12px;border:1px solid var(--line-s);border-top:2px solid var(--rec);border-radius:10px;background:var(--chip);overflow-wrap:anywhere}
.br-diff b{display:block;color:var(--cream);font-size:14px}
.br-diff span{color:#b5c0d2;font-size:13px}

/* Three part cards with large controls */
.br-parts{grid-template-columns:repeat(3,minmax(0,1fr))}
.br-parts .rj-card h3{font-size:20px}
.br-part-go{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:auto;padding:0 14px;border:1px solid var(--gold);border-radius:10px;background:var(--gold-f);color:var(--cream);font-size:14px;font-weight:800;text-align:center}
.br-part:hover .br-part-go,.br-part:focus-visible .br-part-go{background:rgba(212,175,55,.24)}
.br-parts .rj-cd{margin-bottom:8px}

/* Thread */
.br-thread{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Artifact library */
.br-lib{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.br-lib li{display:flex;min-width:0}
.br-lib a{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0;min-height:44px;padding:12px 14px;border:1px solid var(--line-s);border-left:3px solid var(--gold);border-radius:12px;background:var(--card);color:var(--text);text-decoration:none;overflow-wrap:anywhere}
.br-lib a:hover,.br-lib a:focus-visible{border-color:var(--gold-l);color:var(--text)}
.br-lib small{color:var(--rec);font-size:11px;font-weight:800;letter-spacing:.06em}
.br-lib b{color:var(--cream);font-size:15px;line-height:1.3}
.br-lib span{color:#b5c0d2;font-size:13px}
.br-lib em{margin-top:auto;padding-top:4px;color:var(--gold-l);font-size:12.5px;font-style:normal;font-weight:800}

/* Roles, boundaries, maintenance loop */
.br-roles{grid-template-columns:repeat(4,minmax(0,1fr))}
.br-bounds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;margin:0;padding:0;list-style:none}
.br-bounds li{position:relative;min-width:0;padding:8px 0 8px 22px;border-bottom:1px solid var(--line-s);color:#c7cfde;font-size:13.5px;overflow-wrap:anywhere}
.br-bounds li::before{position:absolute;top:8px;left:0;color:var(--gold);font-weight:900;content:'×'}
.br-loop{display:grid;gap:4px;margin-top:12px;padding:12px 14px;border:1px dashed var(--line);border-radius:12px;background:rgba(212,175,55,.05)}
.br-loop b{color:var(--gold-l);font-size:13px}
.br-loop span{color:#c7cfde;font-size:13.5px}

/* Dialog additions */
.br-accept{margin-top:12px}
.br-boundary{margin:10px 0 0;padding:10px 12px;border:1px dashed var(--line);border-radius:10px;color:#c7cfde;font-size:13px}
.br-boundary b{color:var(--gold-l)}
.br-p{margin:0;color:#c7cfde;font-size:13.5px}
.br-found .rj-links{margin-top:10px}
.br-qa{display:grid;gap:10px;margin:0}
.br-qa div{min-width:0;padding:10px 12px;border:1px solid var(--line-s);border-left:3px solid var(--rec);border-radius:10px;background:var(--chip);overflow-wrap:anywhere}
.br-qa dt{color:var(--cream);font-size:14px;font-weight:800}
.br-qa dd{margin:4px 0 0;font-size:13.5px}
.br-qa .br-qa-note{margin-top:4px;color:var(--muted);font-size:12.5px}
.br-stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:10px;margin:0;padding:0;list-style:none}
.br-stat li{display:flex;flex-direction:column;gap:3px;min-width:0;padding:10px 12px;border:1px solid var(--line-s);border-left:4px solid var(--sc,var(--muted));border-radius:10px;background:var(--chip);overflow-wrap:anywhere}
.br-stat .is-done{--sc:var(--ai)}
.br-stat .is-wait{--sc:var(--gold);border-left-style:dashed}
.br-stat .is-open{--sc:#e8a35c;border-left-style:dashed}
.br-stat .is-none{--sc:var(--dim);border-left-style:dotted}
.br-sk{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.04em}
.br-stat b{color:var(--cream);font-size:14.5px;line-height:1.3}
.br-stat li>span:last-child{color:#b5c0d2;font-size:12.5px}

@media (max-width:980px){
  .br-branch{grid-template-columns:minmax(0,1fr)}
  .br-thread,.br-roles,.br-lib{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .br-art .br-hotspot,.br-art .rj-hotspot{display:none}
  .br-parts,.br-lib,.br-roles,.br-bounds{grid-template-columns:minmax(0,1fr)}
  .br-branch{padding:14px}
}
@media (max-width:480px){
  .br-thread,.br-diff{grid-template-columns:minmax(0,1fr)}
}