/* The realm has four report groups at every width. Keep the manuscript tabs
   and active/focus styling from ornate.css; only their art and grid change. */
.progression-mode .sheet-content .report-inbox .progression-report-tabs{
 display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));
}
.progression-mode .report-inbox .progression-report-tabs button{
 min-height:72px;
 gap:5px;
}
.progression-mode .progression-report-tab-art{
 display:flex;
 align-items:center;
 justify-content:center;
 width:32px;
 height:32px;
 flex:none;
 pointer-events:none;
}
.progression-mode .progression-report-tab-art>:is(img,.icon,.hud-art,.progression-report-alliance-art){
 display:block;
 width:100%;
 height:100%;
 object-fit:contain;
}
.progression-mode .progression-report-tabs button>span:last-child{
 white-space:nowrap;
}
@media(min-width:700px){
 .progression-mode .report-inbox .progression-report-tabs button{min-height:84px;gap:7px}
 .progression-mode .progression-report-tab-art{width:40px;height:40px}
}
@media(forced-colors:active){
 .progression-mode .progression-report-tab-art img{filter:none}
}
.alliance-notice-report-art{display:block;width:44px;height:44px;flex:none;background-size:contain;background-position:center;background-repeat:no-repeat}
.alliance-notice-report .alliance-notice-report-text{white-space:pre-wrap;overflow-wrap:anywhere}
.alliance-notice-report .metric-line strong{overflow-wrap:anywhere;min-width:0}
.diplomacy-report .city-report-art>.alliance-notice-report-art{width:100%;height:100%}
.diplomacy-report .metric-line{gap:10px;align-items:baseline}
.diplomacy-report .metric-line>strong{flex:0 1 auto;max-width:66%;text-align:end}
.diplomacy-report-reason h4{font-family:var(--serif);margin:14px 0 5px}