.orientation-card { margin-bottom: 22px; }
.orientation-count { background: var(--green2); color: var(--green); font-weight: 800; border-radius: 99px; padding: 6px 11px; }
.orientation-intro { color: var(--muted); margin: 10px 0 4px; }
.open-loops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.open-loop { border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: center; padding: 10px; gap: 8px; background: white; }
.open-loop-main { border: 0; background: transparent; text-align: left; display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: var(--ink); cursor: pointer; }
.open-loop-main .badge { margin: 0; flex: none; }
.open-loop-main strong, .open-loop-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.open-loop-main small { color: var(--muted); max-width: 38ch; }
.loop-complete { border: 1px solid var(--line); background: var(--card); color: var(--green); border-radius: 8px; padding: 7px 9px; font-weight: 700; cursor: pointer; }
.loop-complete:hover { background: var(--green2); }
.orientation-clear { display: flex; gap: 8px; color: var(--muted); padding: 10px 0; }
.orientation-clear strong { color: var(--green); }
@media (max-width: 820px) { .open-loops { grid-template-columns: 1fr; } }