/* Reaction Matchmaker: the agency office, the match card, the ion-tile tray and the profile board, inside the practice
 * shell's stage (about 1066 × 628 at 1366 × 768). Text is 16 px or more; formulas are 20–22 px so their subscripts
 * (0.8 em) stay at 16 px. */
.rm { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 10px; padding: 6px 10px 6px 8px; }
.rm--noboard { grid-template-columns: minmax(0, 1fr); }
.rm-main { grid-column: 1; grid-row: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }

/* the office */
.rm-scene { flex: 0 1 auto; min-height: 190px; aspect-ratio: 800 / 250; max-height: 250px; width: min(100%, 800px); border-radius: var(--tlg-radius-lg); overflow: hidden; border: var(--tlg-border-width) solid var(--tlg-border); background: #f3e3e6; user-select: none; -webkit-user-select: none; align-self: center; }
.rm--classify .rm-scene { max-height: 300px; }
.rm-svg { display: block; width: 100%; height: 100%; }
.rm-wall { fill: url(#rm-paper); }
.rm-cl-f { fill: #2b1520; paint-order: stroke; stroke: rgba(255, 248, 242, .9); stroke-width: 4px; stroke-linejoin: round; }
.rm-stage-k { fill: #fff3f6; }
html[data-theme="dark"] .rm-scene { background: #2b2230; }
html[data-theme="dark"] .rm-wall { fill: url(#rm-paper-dark); }
html[data-theme="dark"] .rm-cl-f { fill: #fdeef3; stroke: rgba(30, 18, 28, .9); }
html[data-theme="dark"] .rm-floorb { filter: brightness(.6); }
html[data-theme="dark"] .rm-window { filter: brightness(.7); }
.rm-act-b { transition: none; }

/* the match card */
.rm-bench { flex: 0 0 auto; padding: 4px 10px 6px; border-radius: var(--tlg-radius-lg); background: #fff8f2; border: 2px solid #e6c3cf; color: #2b1520; }
html[data-theme="dark"] .rm-bench { background: #2a1f26; border-color: #6a3a4c; color: #f7e9ef; }
.rm-bench-k, .rm-tray-k, .rm-board-k, .rm-chips-k { margin: 0 0 2px; font-size: 16px; font-weight: 800; letter-spacing: var(--tlg-tracking-caps, .04em); text-transform: uppercase; color: #a0304f; }
html[data-theme="dark"] .rm-bench-k, html[data-theme="dark"] .rm-tray-k, html[data-theme="dark"] .rm-board-k, html[data-theme="dark"] .rm-chips-k { color: #ff9fbd; }
.rm-eq { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; }
.rm-op { font-size: 26px; font-weight: 800; color: #7a1f3d; }
html[data-theme="dark"] .rm-op { color: #ffb3c9; }
.rm-arrow { font-size: 30px; padding: 0 4px; }
.rm-sp { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.rm-spbox { display: flex; align-items: baseline; gap: 2px; flex-direction: column; align-items: center; }
.rm-spf { font-size: 22px; font-weight: 800; line-height: 1.15; white-space: nowrap; }
.rm-spf sub, .rm-spf sup { font-size: 17px; line-height: 0; }
.rm-st { font-size: 16px; font-weight: 600; margin-left: 2px; color: var(--tlg-text-muted); }
.rm-spn { font-size: 16px; color: var(--tlg-text-muted); line-height: 1.1; max-width: 120px; text-align: center; }
.rm--classify .rm-bench { padding-top: 6px; padding-bottom: 10px; }
.rm--classify .rm-eq { gap: 6px 14px; }
.rm-pic { display: block; height: 60px; }
.rm--classify .rm-spf { font-size: 22px; }
.rm--classify .rm-spn { max-width: 120px; }
/* three products (a gas-forming double replacement, baking soda): names off, tighter slots, so the card stays one row */
.rm--three .rm-spn { display: none; }
.rm--three .rm-eq { gap: 4px 4px; }
.rm--three .rm-op { font-size: 22px; }
.rm--three .rmt-slot, .rm--three .rm-slothost { min-width: 112px; }
.rm--three .rmt-edit { width: 24px; }
.rm-pic svg { display: block; }
.rm-gc { font-size: 24px; font-weight: 800; margin-right: 2px; color: #a0304f; }
.rm-spbox { flex-direction: column; }
.rm-spbox .rm-gc { position: relative; }
.rm-spbox:has(.rm-gc) { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; max-width: 150px; }
.rm-spbox:has(.rm-gc) .rm-spn { flex-basis: 100%; }
.rm-role { min-height: 40px; font: inherit; font-size: 16px; padding: 2px 6px; border-radius: 8px; border: 2px solid var(--tlg-border-strong); background: var(--tlg-surface); color: var(--tlg-text); }
.rm-role:focus-visible { outline: var(--tlg-focus-width) solid var(--tlg-focus); outline-offset: 2px; }

/* coefficient boxes */
.rm-coef { display: inline-flex; align-items: center; gap: 2px; }
.rm-cb { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; font-size: 22px; font-weight: 800; color: #7a1f3d; background: #fbe4ea; border: 2px solid #d99bb0; cursor: pointer; }
.rm-cb:disabled { opacity: .4; cursor: default; }
.rm-cb:focus-visible, .rm-cv:focus-visible { outline: var(--tlg-focus-width) solid var(--tlg-focus); outline-offset: 2px; }
.rm-cv { min-width: 40px; height: 36px; display: inline-grid; place-items: center; font-size: 22px; font-weight: 800; border-radius: 8px; border: 2px solid var(--tlg-border-strong); background: var(--tlg-surface); color: var(--tlg-text); }
.rm-coef.is-off { opacity: .35; }
html[data-theme="dark"] .rm-cb { background: #4a2533; border-color: #8a4a62; color: #ffd1de; }

/* product slots (formula-tiles.js) */
.rm-slothost { min-width: 140px; }
.rmt-slot { position: relative; min-width: 140px; min-height: 92px; padding: 4px 6px 2px; border-radius: 14px; border: 3px dashed #c98aa0; background: rgba(255, 255, 255, .7); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2px; cursor: pointer; }
html[data-theme="dark"] .rmt-slot { background: rgba(255, 255, 255, .05); border-color: #8a4a62; }
.rmt-slot.is-active { border-style: solid; border-color: #a0304f; box-shadow: 0 0 0 3px rgba(160, 48, 79, .18); }
.rmt-slot.is-over { background: #fde7ee; border-color: #a0304f; }
.rmt-slot.is-dim { opacity: .35; filter: grayscale(.6); }
.rmt-slot:focus-visible { outline: var(--tlg-focus-width) solid var(--tlg-focus); outline-offset: 2px; }
.rmt-build { display: flex; align-items: center; justify-content: center; min-height: 52px; }
.rmt-empty, .rmt-typed { font-size: 16px; color: var(--tlg-text-muted); font-style: italic; }
.rmt-joint { display: flex; align-items: flex-start; gap: 1px; }
.rmt-part { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rmt-part.is-snap .rmt-stack { animation: rmt-snap .28s ease-out; }
@keyframes rmt-snap { 0% { transform: scale(1.25); } 100% { transform: none; } }
.rmt-stack { position: relative; display: inline-grid; padding: calc((var(--n, 1) - 1) * 3px) calc((var(--n, 1) - 1) * 6px) 0 0; }
.rmt-copy { grid-area: 1 / 1; transform: translate(calc(var(--k) * 6px), calc(var(--k) * -3px)); }
.rmt-copy:not(:last-child) { filter: brightness(.94); }
.rmt-cnt { display: flex; align-items: center; gap: 1px; }
.rmt-cb { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: 26px; height: 28px; border-radius: 8px; font-size: 20px; font-weight: 800; background: #f3e7ec; color: #5e1530; border: 2px solid #d99bb0; cursor: pointer; }
.rmt-cb:disabled { opacity: .35; cursor: default; }
.rmt-cb:focus-visible { outline: var(--tlg-focus-width) solid var(--tlg-focus); outline-offset: 1px; }
.rmt-cv { min-width: 26px; text-align: center; font-size: 17px; font-weight: 800; }
html[data-theme="dark"] .rmt-cb { background: #4a2533; color: #ffd1de; border-color: #8a4a62; }
.rmt-fline { display: flex; align-items: center; gap: 4px; }
.rmt-f { font-size: 22px; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.rmt-f sub, .rmt-f sup { font-size: 17px; line-height: 0; }
.rmt-f.is-empty { color: var(--tlg-text-muted); }
.rmt-edit { all: unset; box-sizing: border-box; width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 8px; font-size: 16px; cursor: pointer; color: var(--tlg-text-muted); }
.rmt-edit:hover { background: rgba(160, 48, 79, .1); }
.rmt-edit:focus-visible { outline: var(--tlg-focus-width) solid var(--tlg-focus); }
.rmt-in { width: 130px; font: inherit; font-size: 20px; padding: 2px 6px; border-radius: 8px; border: 2px solid #a0304f; background: var(--tlg-surface); color: var(--tlg-text); }
.rmt-slot.is-editing .rmt-fline { display: none; }
.rmt-slot.is-typed .rmt-build { min-height: 30px; }

/* tiles */
.rmt-face { display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 0 8px 0 4px; border-radius: 10px; font-weight: 800; font-size: 20px; line-height: 1; white-space: nowrap; color: #24131b; box-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.rmt-face sub, .rmt-face sup { font-size: 16px; line-height: 0; }
.rmt-face--cat { background: linear-gradient(#fff3e0, #ffd9b0); border: 2px solid #c96a1b; border-radius: 20px 10px 10px 20px; }
.rmt-face--an { background: linear-gradient(#e6f1ff, #c4dcff); border: 2px solid #2f5fb3; border-radius: 10px 20px 20px 10px; }
.rmt-face--atom { background: linear-gradient(#f4f4f6, #dcdde3); border: 2px solid #6b6f7a; border-radius: 20px; }
.rmt-face--mol { background: linear-gradient(#eef9ef, #cfeccf); border: 2px solid #3b8a4b; border-radius: 6px; }
.rmt-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; }
.rmt-ico svg { display: block; }
.rmt-face--sm { height: 34px; font-size: 19px; padding: 0 9px; box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.rmt-face--sm .rmt-ico { display: none; }
.rmt-tray { display: flex; flex-wrap: wrap; gap: 6px; }
.rmt-tile { all: unset; box-sizing: border-box; cursor: grab; border-radius: 12px; }
html .rmt-tile { touch-action: none; user-select: none; -webkit-user-select: none; }
.rmt-tile:focus-visible { outline: var(--tlg-focus-width) solid var(--tlg-focus); outline-offset: 2px; }
.rmt-tile:hover .rmt-face { filter: brightness(1.04); transform: translateY(-1px); }
.rmt-tile:disabled { cursor: default; opacity: .5; }
.rmt-tray.is-dim { opacity: .4; }
html .rmt-ghost { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: .92; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .3)); }
html.rmt-dragging, html.rmt-dragging * { cursor: grabbing !important; }

/* the low row: tray + No reaction */
.rm-low { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.rm-lowrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.rm-traywrap { padding: 4px 8px 6px; border-radius: var(--tlg-radius-lg); background: var(--tlg-surface-muted, #f6f1f3); border: 1px solid var(--tlg-border); }
html[data-theme="dark"] .rm-traywrap { background: #2a1f26; border-color: #6a3a4c; }
.rm-nr { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 6px 14px; border-radius: 14px; border: 3px solid #7a1f3d; background: #fff; color: #5e1530; cursor: pointer; font-size: 16px; }
.rm-nr b { display: block; font-size: 18px; }
.rm-nr small { display: block; font-size: 16px; color: var(--tlg-text-muted); }
.rm-nr-i { font-size: 30px; line-height: 1; }
.rm-nr[aria-pressed="true"] { background: #7a1f3d; color: #fff; }
.rm-nr[aria-pressed="true"] small { color: #f6d3df; }
.rm-nr:focus-visible { outline: var(--tlg-focus-width) solid var(--tlg-focus); outline-offset: 2px; }
.rm-nr:disabled { cursor: default; }
html[data-theme="dark"] .rm-nr { background: #2a1f26; color: #ffd1de; border-color: #ff9fbd; }
html[data-theme="dark"] .rm-nr[aria-pressed="true"] { background: #ff9fbd; color: #2a1020; }
.rm-msg { margin: 0; min-height: 1.2em; font-size: 16px; font-weight: 700; color: var(--tlg-danger, #b42318); }
html[data-theme="dark"] .rm-msg { color: #ffb4a8; }

/* AP chips */
.rm-chips-g { display: flex; flex-wrap: wrap; gap: 8px; }
.rm-chip { min-height: 44px; font-size: 16px; }

/* net ionic */
.rm-mol { margin: 0 0 4px; font-size: 18px; text-align: center; }
.rm-mol-k { font-weight: 800; color: #a0304f; }
.rm-eq--net { gap: 4px 6px; }
.rm-ion { gap: 2px; }
.rm-ionb { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 2px 8px; border-radius: 12px; border: 2px solid var(--tlg-border-strong); background: var(--tlg-surface); cursor: pointer; }
.rm-ionb .rm-spf { font-size: 22px; }
.rm-ionb:focus-visible { outline: var(--tlg-focus-width) solid var(--tlg-focus); outline-offset: 2px; }
.rm-x { display: none; font-size: 16px; font-weight: 800; color: #7a1f3d; }
.rm-ion.is-out .rm-ionb { background: repeating-linear-gradient(-45deg, #f6e6ea 0 6px, #fff 6px 12px); border-style: dashed; }
.rm-ion.is-out .rm-spf { text-decoration: line-through; text-decoration-thickness: 3px; opacity: .55; }
.rm-ion.is-out .rm-x { display: block; }
html[data-theme="dark"] .rm-ion.is-out .rm-ionb { background: repeating-linear-gradient(-45deg, #3a2430 0 6px, #2a1f26 6px 12px); }
.rm-netbox { padding: 6px 12px; border-radius: var(--tlg-radius-lg); border: 2px solid #e6c3cf; background: #fff8f2; color: #2b1520; }
html[data-theme="dark"] .rm-netbox { background: #2a1f26; border-color: #6a3a4c; color: #f7e9ef; }
.rm-netprev { margin: 0; font-size: 24px; font-weight: 800; text-align: center; }

/* the profile board */
.rm-board { grid-column: 2; grid-row: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; border-radius: var(--tlg-radius-lg); background: linear-gradient(#fff4f7, #fde4ec); border: 2px solid #e6a5ba; color: #2b1520; overflow: hidden; }
html[data-theme="dark"] .rm-board { background: linear-gradient(#2e1d27, #24161f); border-color: #6a3a4c; color: #f7e9ef; }
.rm-filetray { min-height: 52px; display: flex; justify-content: center; align-items: center; border-radius: 12px; border: 2px dashed #d99bb0; }
.rm-file { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 10px; background: #a0304f; color: #fff; font-size: 16px; font-weight: 800; box-shadow: 0 3px 0 #5e1530; }
.rm-file-i { font-size: 18px; }
.rm-file:focus-visible { outline: var(--tlg-focus-width) solid var(--tlg-focus); outline-offset: 3px; }
.rm-zones { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.rm-zone { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 6px; min-height: 70px; padding: 4px 6px; border-radius: 12px; background: #fff; border: 2px solid #e6c3cf; }
html[data-theme="dark"] .rm-zone { background: #33222c; border-color: #6a3a4c; }
.rm-board--6 .rm-zone { min-height: 62px; }
.rm-zone-t { display: flex; flex-direction: column; line-height: 1.15; font-size: 16px; }
.rm-zone-t small { font-size: 16px; color: var(--tlg-text-muted); white-space: nowrap; }
.rm-zone[data-type="neutralization"] .rm-zone-t small { white-space: normal; }
.rm-zone-slot { position: absolute; right: -6px; top: -9px; }
.rm-zone-slot .rm-file { height: 28px; padding: 0 7px; font-size: 16px; border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.rm-zone-slot .rm-file-t { display: none; }
.rm-zone.has-token { border-color: #a0304f; background: #fde7ee; }
html[data-theme="dark"] .rm-zone.has-token { background: #4a2533; border-color: #ff9fbd; }
.rm-zone-mark { position: absolute; left: 26px; top: 4px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 900; color: #fff; }
.rm-zone-mark:empty { display: none; }
.rm-zone.is-right { border-color: #1f7a45; box-shadow: inset 0 0 0 2px #1f7a45; }
.rm-zone.is-right .rm-zone-mark { background: #1f7a45; }
.rm-zone.is-wrong { border-color: #b42318; border-style: dashed; }
.rm-zone.is-wrong .rm-zone-mark { background: #b42318; border-radius: 4px; }
html.pdz-armed .rm-zone { outline: 3px dashed rgba(160, 48, 79, .55); outline-offset: -3px; }

.rm-example-svg { display: block; width: 100%; height: auto; max-height: 460px; }
@media (prefers-reduced-motion: reduce) { .rmt-part.is-snap .rmt-stack { animation: none; } }
@media (max-width: 1100px) { .rm { grid-template-columns: minmax(0, 1fr) 210px; } }
@media (max-width: 900px) {
  .rm { position: static; grid-template-columns: 1fr; }
  .rm-board, .rm-main { grid-column: 1; grid-row: auto; }
  .rm-zones { flex-direction: row; flex-wrap: wrap; }
  .rm-zone { flex: 1 1 150px; }
}