/* Illustrated systems directory, shared by both navigation dialogs. */
dialog:has(.systems-visual){max-height:90dvh;overflow:auto}
dialog .systems-visual{padding:30px 24px 24px}
dialog .systems-visual .options-popup-head{margin-bottom:20px;padding-inline:28px}
dialog .systems-visual .systems-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:none}
dialog .systems-visual .systems-grid>.system-visual-card{grid-column:auto;display:flex;flex-direction:column;gap:0;min-width:0;min-height:0;padding:0;border:1px solid #d9e8ef;border-radius:16px;background:white;overflow:hidden;text-align:right;color:#14365b;box-shadow:0 4px 14px #143c5d07;cursor:pointer;transition:transform .15s,border-color .15s}
dialog .systems-visual .system-visual-card:hover{transform:translateY(-2px);border-color:#67bbc5}
dialog .systems-visual .system-visual-card:focus-visible{outline:3px solid #079caa;outline-offset:3px}
.systems-visual .system-card-image{position:relative;width:100%;height:126px;flex:none;background:#dceff3;overflow:hidden}
.systems-visual .system-card-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.systems-visual .system-availability{position:absolute;right:10px;top:10px;padding:4px 9px;border-radius:20px;background:#fff;color:#176c65;font:700 11px/1.5 "Segoe UI",Arial,sans-serif;box-shadow:0 2px 8px #1238}
.systems-visual .system-availability.is-coming{background:#fff4de;color:#8c6516}
.systems-visual .system-card-copy{display:flex;flex:1;flex-direction:column;gap:8px;padding:15px}
dialog .systems-visual .system-card-copy h3{font-size:18px;line-height:1.35;margin:0}
dialog .systems-visual .system-card-copy p{font-size:13px;line-height:1.65;margin:0;color:#607b96;min-height:43px}
dialog .systems-visual .system-card-copy .group-meta{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:5px;font-size:12px;font-weight:600;color:#078b99}
@media(max-width:900px){dialog .systems-visual .systems-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){dialog .systems-visual{padding:26px 14px 18px}dialog .systems-visual .systems-grid{grid-template-columns:1fr;gap:14px}dialog .systems-visual .options-popup-head h2{font-size:25px}.systems-visual .system-card-image{height:160px}dialog .systems-visual .system-card-copy p{min-height:0}}
@media(prefers-reduced-motion:reduce){dialog .systems-visual .system-visual-card{transition:none}}

/* Override the legacy mixed two/three-card spans in both dialogs. */
dialog .systems-visual .systems-grid>.system-visual-card{grid-column:auto!important}