/* Isotope Mint: the scene (coins, nucleus close-up, tables, spectrometer, balance) + the keypad panel in the practice
 * shell's stage. Colors use --tlg-* tokens so dark mode works; the coins and particles keep their metal colors. */
.im { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; padding: 10px 12px; }
.im-scene { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px;
  border-radius: var(--tlg-radius-lg); border: var(--tlg-border-width) solid var(--tlg-border); background: var(--tlg-surface-2); overflow: hidden; color: var(--tlg-text); }
.im-top { display: flex; align-items: flex-start; gap: 14px; min-height: 0; }
.im-main { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; }
.im-main--spec { justify-content: center; }
.im-panel { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; padding: 2px; }
.im-note { margin: 0; font-size: 16px; color: var(--tlg-text-muted); }

/* coins */
.im-coins { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; align-content: flex-start; }
.im-coin, .im-pile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 8px 8px; border-radius: var(--tlg-radius-md, 12px);
  border: 2px solid transparent; background: transparent; color: var(--tlg-text); font: inherit; cursor: pointer; }
.im-coin svg, .im-pile svg { display: block; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .25)); transition: transform .15s; }
.im-coin:hover:not(:disabled) svg, .im-pile:hover svg { transform: translateY(-2px) rotate(-4deg); }
.im-coin[aria-pressed="true"], .im-pile[aria-pressed="true"] { border-color: var(--ps-accent); background: var(--tlg-surface); }
.im-coin:focus-visible, .im-pile:focus-visible, .im-slot:focus-visible, .im-cand:focus-visible { outline: var(--tlg-focus-width) solid var(--tlg-focus); outline-offset: 2px; }
.im-coin:disabled { cursor: default; opacity: 1; }
.im-coin-lab { font-weight: var(--tlg-weight-bold); font-size: 17px; }
.im-coin-lab small { font-weight: var(--tlg-weight-regular); color: var(--tlg-text-muted); margin-left: 2px; font-size: 16px; }
.im-bigcoin { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.im-bigcoin svg { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .28)); }
.im-bigcoin-lab { font-weight: var(--tlg-weight-bold); font-size: 22px; }
.im-bigcoin-lab small { font-size: 16px; font-weight: var(--tlg-weight-regular); color: var(--tlg-text-muted); }
.im-side { display: flex; flex-direction: column; gap: 8px; width: 150px; flex: none; padding-top: 18px; }

/* periodic-table tile */
.im-tile { display: grid; grid-template-rows: auto auto auto auto; justify-items: center; width: 112px; padding: 6px 6px 8px; border-radius: 10px;
  border: 2px solid var(--tlg-border-strong); background: var(--tlg-surface); color: var(--tlg-text); line-height: 1.15; position: relative; }
.im-tile-z { justify-self: start; font-weight: var(--tlg-weight-bold); font-size: 16px; }
.im-tile-sym { font-size: 34px; font-weight: 900; }
.im-tile-name { font-size: 16px; text-transform: capitalize; }
.im-tile-avg { font-size: 16px; font-variant-numeric: tabular-nums; font-weight: var(--tlg-weight-bold); }

/* nucleus close-up */
.im-look { margin-left: auto; width: 236px; flex: none; padding: 8px 10px 10px; border-radius: var(--tlg-radius-lg); background: var(--tlg-surface);
  border: var(--tlg-border-width) solid var(--tlg-border); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.im-look.is-open { animation: im-pop .28s ease-out; }
@keyframes im-pop { from { transform: scale(.92); opacity: .4; } to { transform: none; opacity: 1; } }
.im-look-head { font-weight: var(--tlg-weight-bold); font-size: 16px; }
.im-look-svg { width: 190px; height: 190px; color: var(--tlg-text); }
.im-look-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: 16px; }
.im-look-sum { font-size: 16px; text-align: center; color: var(--tlg-text-muted); }
.im-look-locked { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 4px; text-align: center; }
.im-look-locked p { margin: 0; font-size: 16px; color: var(--tlg-text-muted); }
.im-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.im-dot--p { background: radial-gradient(circle at 35% 30%, #ffb3a8, #e0473c 50%, #8f1f18); }
.im-dot--n { background: radial-gradient(circle at 35% 30%, #f4f6f8, #a9b3bd 50%, #5c6670); }
.im-dot--e { background: radial-gradient(circle at 35% 30%, #d8ecff, #3d8fe0 60%, #1b4f8a); }

/* key facts row (particle counts) */
.im-legend-row { display: flex; flex-wrap: wrap; gap: 8px; }
.im-key { padding: 6px 12px; border-radius: var(--tlg-radius-full); background: var(--tlg-surface); border: var(--tlg-border-width) solid var(--tlg-border); font-size: 16px; }

/* bag */
.im-bag { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.im-bag-sack { display: flex; flex-direction: column; align-items: center; font-weight: var(--tlg-weight-bold); flex: none; }
.im-sack { width: 104px; height: 112px; }
.im-piles { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }

/* tables and plaques */
.im-table { border-collapse: collapse; font-size: 18px; background: var(--tlg-surface); border-radius: 10px; overflow: hidden; align-self: flex-start; font-variant-numeric: tabular-nums; }
.im-table th, .im-table td { padding: 8px 18px; border-bottom: 1px solid var(--tlg-border); text-align: right; }
.im-table thead th { font-size: 16px; color: var(--tlg-text-muted); text-align: right; }
.im-table th[scope="row"], .im-table thead th:first-child { text-align: left; }
.im-table tbody tr:last-child > * { border-bottom: 0; }
.im-q { color: var(--tlg-text-muted); font-weight: var(--tlg-weight-bold); }
.im-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; }
.im-plaque { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: var(--tlg-radius-lg); background: var(--tlg-surface); border: var(--tlg-border-width) solid var(--tlg-border); align-self: flex-start; max-width: 560px; }
.im-plaque p { margin: 0; font-size: 17px; }
.im-plaque--avg { flex-direction: column; align-items: flex-start; gap: 2px; }
.im-plaque--avg span { font-size: 16px; color: var(--tlg-text-muted); }
.im-plaque--avg b { font-size: 26px; font-variant-numeric: tabular-nums; }
.im-plaque--avg em { font-size: 16px; color: var(--tlg-text-muted); }

/* spectrometer + chart */
.im-specwrap { flex: 1; min-height: 0; display: flex; }
.im-spec { width: 100%; height: 100%; display: block; color: var(--tlg-text); }
.im-spec text { fill: currentColor; font-family: var(--tlg-font, system-ui), system-ui, sans-serif; }
.im-sp-cap { font-size: 17px; opacity: .78; }
.im-sp-box { fill: var(--tlg-surface); stroke: currentColor; stroke-opacity: .5; }
.im-sp-plate { fill: currentColor; opacity: .55; }
.im-grid { stroke: currentColor; stroke-opacity: .12; }
.im-axisline { stroke: currentColor; stroke-opacity: .6; stroke-width: 1.5; }
.im-tick { font-size: 17px; opacity: .8; font-variant-numeric: tabular-nums; }
.im-axis { font-size: 17px; font-weight: 700; }
.im-barval { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.im-barlab { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.im-barsym { font-size: 17px; opacity: .8; }
.im-ion { stroke: #fff; stroke-width: 1; }

/* the answer panel: particle-count fields and element cards */
.im-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.im-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 60px; padding: 6px 4px; border-radius: var(--tlg-radius-sm);
  border: var(--tlg-border-width-strong) solid var(--tlg-border-strong); background: var(--tlg-surface); color: var(--tlg-text); font: inherit; cursor: pointer; }
.im-slot span { font-size: 16px; }
.im-slot b { font-size: 24px; font-variant-numeric: tabular-nums; }
.im-slot.is-active { border-color: var(--ps-accent); box-shadow: inset 0 0 0 2px var(--ps-accent); }
.im-cands { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.im-cand { padding: 3px; border-radius: 12px; border: 2px solid transparent; background: transparent; cursor: pointer; display: flex; justify-content: center; font: inherit; }
.im-cand .im-tile { width: 100%; padding: 3px 4px 5px; }
.im-cand .im-tile-sym { font-size: 26px; }
.im-cand[aria-pressed="true"] .im-tile { border-color: var(--ps-accent); box-shadow: inset 0 0 0 2px var(--ps-accent); }
.im-cand:disabled { cursor: default; }
.im--spec-id .pn-pad .pn-key { min-height: 42px; }

/* the balance scale after Check */
.im-reveal { position: absolute; left: 10px; right: 10px; top: 10px; padding: 8px 12px 6px; border-radius: var(--tlg-radius-lg); background: var(--tlg-surface);
  border: var(--tlg-border-width) solid var(--tlg-border); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); animation: im-up .3s ease-out; color: var(--tlg-text); }
@keyframes im-up { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.im-reveal-head { font-size: 16px; }
.im-bal { display: block; width: 100%; height: 168px; }
.im-bal text { fill: currentColor; font-family: var(--tlg-font, system-ui), system-ui, sans-serif; }
.im-beam { fill: #8a6a3a; }
.im-fulcrum { fill: var(--ps-accent); }
.im-fulcrum-lab { font-size: 17px; font-weight: 800; fill: var(--ps-accent) !important; }
html[data-theme="dark"] .im-fulcrum-lab { fill: #5fd3a8 !important; }
.im-pilelab { font-size: 17px; font-weight: 800; }
.im-mine { fill: #c0392b; }
.im-mine-lab { font-size: 17px; font-weight: 700; fill: #c0392b !important; }
html[data-theme="dark"] .im-mine, html[data-theme="dark"] .im-mine-lab { fill: #ff8a7a !important; }

/* Briefing worked example */
.im-ex { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.im-coins--ex { flex: none; }
.im-ex-bal { flex: 1 1 100%; }
.im-ex .im-bal { height: 160px; }
.ps-brief--drawer .im-ex .im-table { font-size: 16px; }
.ps-brief--drawer .im-ex .im-table th, .ps-brief--drawer .im-ex .im-table td { padding: 6px 10px; }

@media (prefers-reduced-motion: reduce) { .im-look.is-open, .im-reveal { animation: none; } }
@media (max-width: 1100px) { .im { grid-template-columns: minmax(0, 1fr) 280px; } .im-scene { overflow: auto; } .im-look { width: 200px; } .im-look-svg { width: 160px; height: 160px; } }
@media (max-width: 900px) {
  .im { position: static; grid-template-columns: 1fr; }
  .im-scene { min-height: 420px; }
  .im-top { flex-wrap: wrap; }
  .im-look { margin-left: 0; }
  .im-reveal { position: static; }
}