/* Dorax Finance — what is wrong, in the bell (features/reminders/issues.view.js): its rows, the panel a row opens, and the bell ringing. */
.rem.iss { flex-direction: row; align-items: center; gap: 12px; width: 100%; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.rem.iss:hover { background: var(--btn-hover); }
.rem.iss:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rem.iss .grow { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.rem.iss b { font-weight: 500; overflow-wrap: anywhere; }
.rem.iss small { color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.iss-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--info-bg); color: var(--ink-2); }
.iss-ico svg { width: 17px; height: 17px; }
.rem.iss.warn .iss-ico, .iss-head.warn .iss-ico { background: var(--warn-bg); color: var(--warn); }
.rem.iss.crit .iss-ico, .iss-head.crit .iss-ico { background: var(--crit-bg); color: var(--crit); }
/* the panel */
.iss-view { gap: 14px; }
.iss-head { display: flex; align-items: center; gap: 12px; }
.iss-head b { font-size: 18px; font-weight: 500; color: var(--ink-strong); line-height: 1.3; }
.iss-ico.big { width: 44px; height: 44px; }
.iss-ico.big svg { width: 22px; height: 22px; }
.iss-what { display: flex; flex-direction: column; gap: 12px; color: var(--ink-2); }
.iss-what p { margin: 0; line-height: 1.5; }
.iss-what b { color: var(--ink-strong); font-weight: 500; }
.iss-sum .iss-total b { color: var(--ink-strong); }
.iss-h { margin: 6px 0 0; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.iss-fixes { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-mid); overflow: hidden; }
.iss-fix { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 10px 14px; background: none; border: 0; border-top: 1px solid var(--line); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.iss-fix:first-child { border-top: 0; }
.iss-fix:hover { background: var(--surface); }
.iss-fix:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.iss-fix .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.iss-fix b { font-weight: 500; }
.iss-fix small { color: var(--ink-3); font-size: 12.5px; }
.iss-fix.first b { color: var(--link); }
/* the bell, when something new is wrong */
@keyframes bell-ring { 0%, 100% { transform: none; } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }
.bell.ring svg { animation: bell-ring 900ms var(--ease) both; transform-origin: 50% 10%; }
.bell.ring .count { animation: rise 300ms var(--ease) both; }