.trs-overview-grid { display: grid; gap: 24px; }
.trs-overview-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px; min-width: 0; background: #fff; }
.trs-overview-card h2 { margin-top: 0; }
.trs-overview-card ol, .trs-position-list { padding-left: 1.4rem; }
.trs-overview-card li, .trs-position-list li { margin: .45rem 0; }
.trs-diagram { --trs-w: 38px; --trs-h: 60px; display: grid; grid-template-columns: repeat(3, var(--trs-w)); grid-auto-rows: var(--trs-h); justify-content: center; align-items: center; gap: 12px; margin: 24px auto; max-width: 100%; }
.trs-slot { display: grid; place-items: center; width: var(--trs-w); height: var(--trs-h); border: 2px solid var(--brand-dark, #234e80); border-radius: 5px; background: #eef2ff; color: #172b50; font-size: 1rem; font-weight: 700; }
.trs-slot[hidden] { display: none; }
.trs-diagram-single { grid-template-columns: var(--trs-w); }
.trs-diagram-five, .trs-diagram-love, .trs-diagram-choices { grid-template-columns: repeat(3, var(--trs-w)); }
.trs-diagram-five .trs-slot-1 { grid-area: 2 / 2; }
.trs-diagram-five .trs-slot-2 { grid-area: 2 / 1; }
.trs-diagram-five .trs-slot-3 { grid-area: 3 / 2; }
.trs-diagram-five .trs-slot-4 { grid-area: 1 / 2; }
.trs-diagram-five .trs-slot-5 { grid-area: 2 / 3; }
.trs-diagram-love .trs-slot-1 { grid-area: 1 / 1; }
.trs-diagram-love .trs-slot-2 { grid-area: 1 / 3; }
.trs-diagram-love .trs-slot-3 { grid-area: 2 / 2; }
.trs-diagram-love .trs-slot-4 { grid-area: 3 / 1; }
.trs-diagram-love .trs-slot-5 { grid-area: 3 / 3; }
.trs-diagram-choices .trs-slot-1 { grid-area: 1 / 2; }
.trs-diagram-choices .trs-slot-2 { grid-area: 2 / 1; }
.trs-diagram-choices .trs-slot-3 { grid-area: 3 / 1; }
.trs-diagram-choices .trs-slot-4 { grid-area: 2 / 3; }
.trs-diagram-choices .trs-slot-5 { grid-area: 3 / 3; }
.trs-diagram-cross { --trs-w: 30px; --trs-h: 48px; grid-template-columns: repeat(5, var(--trs-w)); grid-template-rows: repeat(4, var(--trs-h)); gap: 10px; }
.trs-diagram-cross .trs-slot-1 { grid-area: 2 / 2; align-self: center; align-items: start; padding-top: 1px; box-sizing: border-box; }
.trs-diagram-cross .trs-slot-2 { grid-area: 2 / 2; width: 48px; height: 27px; justify-self: center; z-index: 1; background: #dbe7ff; transform: translateY(9px); box-shadow: 0 2px 4px #0002; }
.trs-diagram-cross .trs-slot-3 { grid-area: 3 / 2; }
.trs-diagram-cross .trs-slot-4 { grid-area: 2 / 1; }
.trs-diagram-cross .trs-slot-5 { grid-area: 1 / 2; }
.trs-diagram-cross .trs-slot-6 { grid-area: 2 / 3; }
.trs-diagram-cross .trs-slot-7 { grid-area: 4 / 5; }
.trs-diagram-cross .trs-slot-8 { grid-area: 3 / 5; }
.trs-diagram-cross .trs-slot-9 { grid-area: 2 / 5; }
.trs-diagram-cross .trs-slot-10 { grid-area: 1 / 5; }
.trs-options { display: grid; gap: 10px; margin: 20px 0; max-width: 480px; }
.trs-options input[type=text], .trs-options select { max-width: 100%; width: 100%; box-sizing: border-box; min-width: 0; }
.trs-check { display: flex; gap: 10px; align-items: center; }
.trs-check input { width: 20px; height: 20px; }
.trs-result { display: grid; gap: 16px; margin: 20px 0; }
.trs-card { min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #fff; overflow-wrap: anywhere; }
.trs-position { margin-top: 0; color: var(--brand-dark); }
.trs-img { display: block; width: min(100%, 140px); height: auto; margin: 16px auto; }
.trs-reversed .trs-img { transform: rotate(180deg); }
.trs-en { font-weight: 400; color: var(--muted); }
.trs-state { font-weight: 700; }
.trs-summary { grid-column: 1 / -1; border-left: 4px solid var(--brand-dark); padding: 12px; background: #eef2ff; }
@media (min-width: 700px) { .trs-overview-grid, .trs-result { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .trs-result { grid-template-columns: repeat(3, minmax(0, 1fr)); } }