/* Systems Projects additions: use the existing realm colours, cards and type. */
body.realm-systems .standalone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
body.realm-systems .standalone-grid .tool-card { min-height: 0; }
body.realm-systems .tool-card { overflow: visible; }
body.realm-systems .tool-card.problem-open { z-index: 10; }
body.realm-systems .section-head .system-help { margin-top: 16px; color: #13646a; font-size: 13px; }
body.realm-systems .system-full-name { margin-bottom: 12px; color: #13646a; font-size: 14px; font-weight: 800; }
body.realm-systems .system-disclosure { position: relative; margin: 18px 0 12px; }
body.realm-systems .system-disclosure summary { display: block; width: fit-content; max-width: 100%; padding: 5px 0; cursor: pointer; list-style: none; border-radius: 4px; }
body.realm-systems .system-disclosure summary::-webkit-details-marker { display: none; }
body.realm-systems .system-disclosure summary h3 { display: inline; margin: 0; line-height: 1.16; }
body.realm-systems .system-disclosure summary:hover h3 { color: #13646a; }
body.realm-systems .system-disclosure summary:focus-visible { outline: 3px solid #13646a; outline-offset: 5px; }
body.realm-systems .system-info { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; vertical-align: middle; border: 1px solid #13646a; border-radius: 50%; font: 700 12px/1 var(--font-sans); color: #13646a; }
body.realm-systems .system-problem { position: absolute; inset: 100% 0 auto; z-index: 2; padding: 18px; border: 1px solid var(--realm-3); border-radius: 16px; background: #082b2f; color: #ecfffb; box-shadow: 0 16px 36px rgba(8,43,47,.23); overflow-wrap: anywhere; }
body.realm-systems .system-problem strong { display: block; margin-bottom: 8px; color: #8bdecd; font: 800 11px/1.4 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; }
body.realm-systems .tool-card .system-problem p { color: #ecfffb; font: 400 14px/1.65 var(--font-sans); }
body.realm-systems .tool-card.eaf { border-top-color: #65c4b3; }
body.realm-systems .tool-card.command-deck { border-top-color: #5f96c8; }
body.realm-systems .tool-graphic.finder span, body.realm-systems .tool-graphic.command span { inset: auto; transform: none; border-color: #13646a; background: rgba(255,255,255,.75); }
body.realm-systems .tool-graphic.finder span:nth-child(1) { left: calc(50% - 90px); top: 30px; width: 118px; height: 72px; border-radius: 8px; }
body.realm-systems .tool-graphic.finder span:nth-child(1)::before { content: ''; position: absolute; left: -2px; top: -13px; width: 48px; height: 12px; border: 2px solid #13646a; border-bottom: 0; border-radius: 7px 7px 0 0; background: #fff; }
body.realm-systems .tool-graphic.finder span:nth-child(2) { left: calc(50% + 3px); top: 22px; width: 58px; height: 58px; border-radius: 50%; background: #edf6f2; }
body.realm-systems .tool-graphic.finder span:nth-child(3) { left: calc(50% + 56px); top: 72px; width: 9px; height: 35px; border-radius: 8px; transform: rotate(-40deg); }
body.realm-systems .tool-graphic.command span { top: 23px; width: 22%; height: 80px; border-radius: 10px; }
body.realm-systems .tool-graphic.command span:nth-child(1) { left: 12%; }
body.realm-systems .tool-graphic.command span:nth-child(2) { left: 39%; }
body.realm-systems .tool-graphic.command span:nth-child(3) { left: 66%; }
body.realm-systems .tool-graphic.command span::before { content: ''; position: absolute; left: 18%; top: 17px; width: 64%; height: 8px; border-radius: 4px; background: #65c4b3; box-shadow: 0 16px 0 #c5e5dd, 0 32px 0 #c5e5dd; }
@media (max-width: 700px) {
  body.realm-systems .standalone-grid { grid-template-columns: 1fr; gap: 20px; }
  body.realm-systems .standalone-grid .tool-graphic { height: 128px; }
}
@media (prefers-reduced-motion: reduce) {
  body.realm-systems .tool-card { transition: none; }
  body.realm-systems .tool-card:hover { transform: none; }
}
@media print {
  body.realm-systems .system-problem { position: static; box-shadow: none; background: white; border-color: #13646a; }
  body.realm-systems .tool-card .system-problem p { color: #092a2e; }
}

body.realm-systems .system-problem { overflow-y: auto; }
body.realm-systems .system-disclosure.problem-above .system-problem { inset: auto 0 100%; }
