.toxmap {
--toxmap-accent: 10, 132, 255;
--toxmap-danger: 211, 64, 63;
margin-top: 12px;
}
.toxmap__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
gap: 12px;
align-items: start;
}
.toxmap-tox {
border: 1px solid var(--line, rgba(15, 23, 42, 0.12));
border-radius: 14px;
background: #fff;
overflow: hidden;
transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
@media (hover: hover) and (pointer: fine) {
.toxmap-tox:hover {
transform: translateY(-3px);
border-color: rgba(var(--toxmap-accent), 0.45);
box-shadow: 0 10px 22px rgba(var(--toxmap-accent), 0.14);
}
}
.toxmap-tox.is-open {
border-color: rgba(var(--toxmap-accent), 0.45);
box-shadow: 0 4px 14px rgba(var(--toxmap-accent), 0.10);
}
.toxmap-tox.is-danger.is-open {
border-color: rgba(var(--toxmap-danger), 0.55);
box-shadow: 0 4px 14px rgba(var(--toxmap-danger), 0.12);
}
@media (hover: hover) and (pointer: fine) {
.toxmap-tox.is-danger:hover {
border-color: rgba(var(--toxmap-danger), 0.55);
box-shadow: 0 4px 14px rgba(var(--toxmap-danger), 0.12);
}
}
.toxmap-tox__btn {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
align-content: center;
row-gap: 6px;
column-gap: 10px;
padding: 12px 13px;
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
font: inherit;
min-height: 90px;
}
.toxmap-tox__btn:focus-visible {
outline: 2px solid rgba(var(--toxmap-accent), 0.9);
outline-offset: -2px;
}
.toxmap-tox__icon { order: 1; font-size: 21px; line-height: 1.3; flex: 0 0 auto; }
.toxmap-tox__name {
order: 2;
flex: 1 1 0;
font-size: 14.5px;
font-weight: 800;
color: var(--text, #111111);
line-height: 1.35;
min-width: 0;
overflow-wrap: break-word;
}
.toxmap-tox__name .cav-term {
color: var(--text, #111111);
font-weight: 800;
background: none;
border: 0;
padding: 0;
border-radius: 0;
text-decoration: none;
border-bottom: 2px dotted rgba(17, 17, 17, 0.5);
}
.toxmap-tox__tags {
order: 4;
flex: 0 0 100%;
margin-left: 31px;
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
justify-content: flex-start;
}
.toxmap-tox__tag {
font-size: 9.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 3px 8px;
border-radius: 999px;
white-space: nowrap;
color: #fff;
background: #6b7280;
}
.toxmap-tox__tag--danger { background: rgb(var(--toxmap-danger)); }
.toxmap-tox__tag--common { background: #0a6cff; }
.toxmap-tox__tag--nbme   { background: #fdeecb; color: #8a5a12; border: 1px solid #e6b24d; }
.toxmap-tox__chevron {
order: 3;
flex: 0 0 auto;
font-size: 13px;
color: #8a93a0;
line-height: 1.35;
transition: transform 0.18s ease;
}
.toxmap-tox.is-open .toxmap-tox__chevron { transform: rotate(180deg); }
.toxmap-tox__panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.22s ease;
}
.toxmap-tox.is-open .toxmap-tox__panel { max-height: 520px; }
.toxmap-tox__panel-inner {
margin: 0 14px;
padding: 11px 0 14px;
border-top: 1px solid var(--line, rgba(15, 23, 42, 0.12));
font-size: 13px;
line-height: 1.55;
color: #111111;
}
.toxmap-tox__panel-inner strong { color: var(--text, #111111); font-weight: 800; }
.toxmap__note {
margin: 12px 0 0;
font-size: 13px;
line-height: 1.55;
color: #111111;
}
@media (prefers-reduced-motion: reduce) {
.toxmap-tox,
.toxmap-tox__panel,
.toxmap-tox__chevron { transition: none; }
@media (hover: hover) and (pointer: fine) {
.toxmap-tox:hover { transform: none; }
}
}