/* The three facility guides share small icons and responsive text diagrams. */
:is(.stat-reforge-dialog, .icon-design-intro, .arena-help-dialog) .strategy-mark {
  display: inline-block; flex: 0 0 28px; width: 28px; height: 28px; object-fit: contain; vertical-align: middle;
}
:is(.stat-reforge-dialog, .icon-design-intro, .arena-help-dialog) .facility-guide-flow {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  padding: 0; margin: 12px 0; list-style: none;
}
:is(.stat-reforge-dialog, .icon-design-intro, .arena-help-dialog) .facility-guide-flow > li {
  position: relative; display: flex; align-items: flex-start; gap: 8px; min-width: 0;
  margin: 0; padding: 12px 8px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--surface); color: var(--text); font-size: var(--ga-font-body); line-height: 1.65;
}
:is(.stat-reforge-dialog, .icon-design-intro, .arena-help-dialog) .facility-guide-flow > li::before { content: none; }
:is(.stat-reforge-dialog, .icon-design-intro, .arena-help-dialog) .facility-guide-flow > li:not(:last-child)::after {
  content: "→"; position: absolute; right: -16px; top: 14px; width: 16px; text-align: center; color: var(--text);
}
:is(.stat-reforge-dialog, .icon-design-intro, .arena-help-dialog) .facility-guide-flow > li > div { min-width: 0; overflow-wrap: anywhere; }
:is(.stat-reforge-dialog, .icon-design-intro, .arena-help-dialog) .facility-guide-flow strong { display: block; font-size: var(--ga-font-body); }
:is(.stat-reforge-dialog, .icon-design-intro, .arena-help-dialog) .facility-guide-flow > li > div > span { display: block; margin-top: 4px; font-size: var(--ga-font-body); }
:is(.stat-reforge-dialog, .icon-design-intro, .arena-help-dialog) .facility-guide-step-mark { display: grid; justify-items: center; gap: 4px; flex: 0 0 28px; }
:is(.stat-reforge-dialog, .icon-design-intro, .arena-help-dialog) .facility-guide-step-mark b { font-size: var(--ga-font-caption); line-height: 1.2; color: var(--muted); }
.stat-reforge-dialog :is(#stat-reforge-title, .reforge-stat-label) { display: flex; align-items: center; gap: 8px; }
.stat-reforge-dialog .facility-guide-flow [aria-current="step"] { border-color: var(--selected-border, var(--gold)); background: var(--selected-bg, var(--surface)); }
.icon-design-screen .icon-design-steps.icon-commission-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 12px 0; }
.icon-design-screen .icon-design-steps.icon-commission-flow > li { margin: 0; padding: 12px 8px; border: 1px solid var(--line); background: var(--surface); }
.arena-help-dialog .arena-help-content .facility-guide-flow > li { margin: 0; }
.arena-help-dialog .arena-guide-heading { display: flex; align-items: center; gap: 8px; }
.arena-help-dialog .arena-guide-comparison { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 12px 0; font-size: var(--ga-font-body); line-height: 1.7; }
.arena-help-dialog .arena-guide-comparison caption { padding: 0 0 8px; text-align: left; color: var(--text); }
.arena-help-dialog .arena-guide-comparison :is(th, td) { padding: 8px; border: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.arena-help-dialog .arena-guide-comparison th { background: var(--surface); color: var(--text); text-align: left; }
.arena-help-dialog .arena-help-content .arena-guide-practice-note { display: flex; align-items: flex-start; gap: 8px; font-size: var(--ga-font-body); color: var(--text); }
@media (max-width: 640px) {
  :is(.stat-reforge-dialog, .icon-design-intro, .arena-help-dialog) .facility-guide-flow,
  .icon-design-screen .icon-design-steps.icon-commission-flow { grid-template-columns: minmax(0, 1fr); }
  :is(.stat-reforge-dialog, .icon-design-intro, .arena-help-dialog) .facility-guide-flow > li:not(:last-child)::after { content: "↓"; right: auto; top: auto; left: 14px; bottom: -19px; }
  .arena-help-dialog .arena-guide-comparison :is(th, td) { padding: 8px 4px; }
}
.stat-reforge-dialog .reforge-flow-guide .facility-guide-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-reforge-dialog .reforge-flow-guide .facility-guide-flow > li { display: grid; justify-items: center; align-content: start; text-align: center; gap: 4px; padding: 8px 4px; }
.stat-reforge-dialog .reforge-flow-guide .facility-guide-flow > li:not(:last-child)::after { content: "→"; right: -16px; left: auto; top: 50%; bottom: auto; }
.stat-reforge-dialog .reforge-flow-guide .facility-guide-flow > li > div > span:empty { display: none; }