/* Simulateur de portes logiques (booleens-simulateur.html). Éléments communs : css/sim.css. Tout est préfixé .lg. */

.lg {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

/* ---------- défis ---------- */

.lg-challenge__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6rem 1.25rem;
}

.lg-challenge__pick {
  flex: 1 1 18rem;
  max-width: 34rem;
}

.lg-challenge__score {
  margin: 0;
  font-weight: 700;
}

.lg-challenge__body {
  margin-top: 0.85rem;
  display: grid;
  gap: 0.55rem;
}

.lg-challenge__statement {
  font-weight: 700;
  max-width: 70ch;
}

.lg-challenge__rule {
  font-size: 0.88rem;
  color: var(--sm-ink-2);
}

.lg-challenge__rule b {
  color: var(--sm-ink);
}

.lg-challenge__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.lg-challenge__hint {
  padding: 0.55rem 0.75rem;
  border-radius: 9px;
  background: var(--sm-warn-soft);
  color: var(--sm-warn);
  font-size: 0.9rem;
  max-width: 70ch;
}

.lg-challenge .sm-verdict {
  margin-top: 0.8rem;
}

/* ---------- mise en page ---------- */

.lg-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

@media (min-width: 1000px) {
  .lg-main {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }
}

.lg-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  min-width: 0;
}

/* ---------- plan de travail ---------- */

.lg-boardcard {
  padding: 0.85rem 0.9rem 1rem;
  min-width: 0;
}

.lg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-bottom: 0.65rem;
}

.lg-palette {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.lg-toolbar__t {
  margin-right: 0.2rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sm-ink-2);
}

.lg-pal {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-width: 62px;
  padding: 0.3rem 0.45rem 0.25rem;
  border: 1.5px solid var(--sm-ink);
  border-radius: 10px;
  background: #fff;
  color: var(--sm-ink);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.lg-pal svg {
  display: block;
  width: 46px;
  height: 31px;
}

.lg-pal:hover {
  background: var(--sm-cream);
  border-color: var(--sm-accent-deep);
}

.lg-pal[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  border-style: dashed;
}

.lg-pal[aria-disabled="true"]:hover {
  background: #fff;
  border-color: var(--sm-ink);
}

.lg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.lg-actions .sm-btn {
  min-height: 36px;
  padding: 0.3rem 0.8rem;
}

.lg-board {
  border: 1.5px solid var(--sm-line-2);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  touch-action: none;
}

.lg-board svg {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-select: none;
}

.lg-board.is-dropping {
  border-color: var(--sm-accent-deep);
  box-shadow: 0 0 0 3px rgba(201, 54, 32, 0.2);
}

.lg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--sm-ink-2);
}

.lg-key {
  display: inline-block;
  width: 24px;
  height: 0;
  margin-right: 0.35rem;
  vertical-align: middle;
}

.lg-key--1 {
  border-top: 4px solid var(--sm-accent);
}

.lg-key--0 {
  border-top: 3px solid var(--sm-ink-2);
}

.lg-key--x {
  border-top: 3px dashed var(--sm-field);
}

.lg-help {
  margin-top: 0.6rem;
  max-width: 78ch;
}

.lg-live {
  min-height: 1.3em;
  margin-top: 0.25rem;
  font-weight: 700;
  color: var(--sm-ink);
}

.lg-lists {
  margin-top: 0.4rem;
}

.lg-lists summary {
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--sm-ink-2);
  padding: 0.2rem 0;
}

.lg-lists[open] summary {
  margin-bottom: 0.5rem;
}

.lg-lists__row {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-bottom: 0.6rem;
}

.lg-lists__row--btn {
  grid-template-columns: repeat(auto-fit, minmax(10rem, max-content));
}

.lg-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--sm-line-2);
}

.lg-counts .sm-field {
  width: 7.5rem;
}

.lg-counts[data-locked="1"] .sm-select {
  opacity: 0.55;
}

/* éléments du plan (SVG) */

.lg-svg-text {
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  fill: var(--sm-ink);
  pointer-events: none;
}

.lg-dot {
  fill: #e6ddc8;
}

.lg-empty {
  font-size: 15px;
  font-weight: 700;
  fill: var(--sm-ink-3);
  text-anchor: middle;
}

.lg-gate {
  cursor: grab;
  outline: none;
}

.lg-gate:active {
  cursor: grabbing;
}

.lg-gate__shape {
  fill: #fff;
  stroke: var(--sm-ink);
  stroke-width: 2;
  stroke-linejoin: round;
}

.lg-gate__line {
  fill: none;
  stroke: var(--sm-ink);
  stroke-width: 2;
  stroke-linecap: round;
}

.lg-gate__bubble {
  fill: #fff;
  stroke: var(--sm-ink);
  stroke-width: 2;
}

.lg-gate__label {
  font-size: 12px;
  font-weight: 800;
}

.lg-gate__ring {
  fill: none;
  stroke: transparent;
  stroke-width: 2;
  stroke-dasharray: 5 4;
}

.lg-gate:hover .lg-gate__shape,
.lg-gate:hover .lg-gate__bubble {
  stroke: var(--sm-accent-deep);
}

.lg-gate.is-selected .lg-gate__ring,
.lg-gate:focus-visible .lg-gate__ring {
  stroke: var(--sm-accent-deep);
}

.lg-gate.is-selected .lg-gate__shape {
  stroke: var(--sm-accent-deep);
  stroke-width: 3;
}

.lg-pin__dot {
  fill: #fff;
  stroke: var(--sm-ink);
  stroke-width: 2;
}

.lg-pin__hit {
  fill: transparent;
  cursor: crosshair;
}

.lg-pin:hover .lg-pin__dot {
  fill: var(--sm-accent);
}

.lg-pin.is-hot .lg-pin__dot {
  fill: var(--sm-accent);
  stroke: var(--sm-accent-deep);
}

.lg-pin.is-armed .lg-pin__dot {
  fill: var(--sm-ink);
}

.lg-pin.is-ok .lg-pin__dot {
  fill: var(--sm-ink);
}

.lg-wire {
  fill: none;
  stroke-linecap: round;
}

.lg-wire--1 {
  stroke: var(--sm-accent);
  stroke-width: 3.5;
}

.lg-wire--0 {
  stroke: var(--sm-ink-2);
  stroke-width: 2.5;
}

.lg-wire--x {
  stroke: var(--sm-field);
  stroke-width: 2.5;
  stroke-dasharray: 5 5;
}

.lg-wire--temp {
  stroke: var(--sm-accent-deep);
  stroke-width: 2.5;
  stroke-dasharray: 3 5;
  pointer-events: none;
}

.lg-wire__halo {
  fill: none;
  stroke: var(--sm-accent-soft);
  stroke-width: 11;
  stroke-linecap: round;
  opacity: 0;
}

.lg-wiregroup.is-selected .lg-wire__halo {
  opacity: 1;
}

.lg-wire__hit {
  fill: none;
  stroke: transparent;
  stroke-width: 14;
  cursor: pointer;
}

.lg-sw {
  cursor: pointer;
  outline: none;
}

.lg-sw__box {
  fill: #fff;
  stroke: var(--sm-ink);
  stroke-width: 2;
}

.lg-sw__name {
  font-size: 17px;
  font-weight: 800;
}

.lg-sw__val {
  fill: var(--sm-cream-2);
  stroke: var(--sm-ink);
  stroke-width: 1.5;
}

.lg-sw__vt {
  font-size: 14px;
  font-weight: 800;
  font-family: var(--sm-mono);
}

.lg-sw.is-on .lg-sw__val {
  fill: var(--sm-accent-deep);
  stroke: var(--sm-accent-deep);
}

.lg-sw.is-on .lg-sw__vt {
  fill: #fff;
}

.lg-sw:hover .lg-sw__box,
.lg-sw:focus-visible .lg-sw__box {
  stroke: var(--sm-accent-deep);
  stroke-width: 3;
}

.lg-lamp__c {
  fill: #fff;
  stroke: var(--sm-ink);
  stroke-width: 2.5;
}

.lg-lamp.is-1 .lg-lamp__c {
  fill: var(--sm-accent-deep);
  stroke: var(--sm-accent-ink);
}

.lg-lamp.is-x .lg-lamp__c {
  fill: var(--sm-cream-2);
  stroke-dasharray: 4 3;
}

.lg-lamp__v {
  font-size: 15px;
  font-weight: 800;
  font-family: var(--sm-mono);
  text-anchor: middle;
}

.lg-lamp.is-1 .lg-lamp__v {
  fill: #fff;
}

.lg-lamp__n {
  font-size: 16px;
  font-weight: 800;
  text-anchor: middle;
}

/* ---------- table de vérité ---------- */

.lg-tablecard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.lg-tablecard__head .sm-label {
  margin: 0;
}

.lg-tablecard__head .sm-btn {
  min-height: 36px;
  padding: 0.3rem 0.8rem;
}

.lg-tablewrap {
  overflow-x: auto;
}

.lg-tt {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--sm-mono);
  font-size: 0.98rem;
  border: 1px solid var(--sm-line-2);
  border-radius: 10px;
  overflow: hidden;
}

.lg-tt th {
  padding: 0.4rem 0.7rem;
  background: var(--sm-cream);
  border-bottom: 1px solid var(--sm-line-2);
  font-family: "Manrope", sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  text-align: center;
  color: var(--sm-ink-2);
}

.lg-tt th.is-out {
  color: var(--sm-ink);
  border-left: 2px solid var(--sm-ink);
}

.lg-tt th.is-first-out {
  border-left: 2px solid var(--sm-ink);
}

.lg-tt td {
  padding: 0.38rem 0.7rem;
  text-align: center;
  border-top: 1px solid var(--sm-line);
  font-weight: 700;
}

.lg-tt tbody tr:first-child td {
  border-top: 0;
}

.lg-tt tbody tr {
  cursor: pointer;
}

.lg-tt tbody tr:hover td {
  background: var(--sm-cream);
}

.lg-tt tbody tr:focus-visible {
  outline: 3px solid var(--sm-ink);
  outline-offset: -3px;
}

.lg-tt td.is-in {
  color: var(--sm-ink-2);
}

.lg-tt td.is-first-out {
  border-left: 2px solid var(--sm-ink);
}

.lg-tt td.is-one {
  background: var(--sm-accent-soft);
  color: var(--sm-accent-ink);
  font-weight: 800;
}

.lg-tt td.is-unknown,
.lg-tt td.is-hidden {
  color: var(--sm-ink-3);
}

.lg-tt td.is-want {
  color: var(--sm-ink-3);
  font-weight: 600;
  background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(20, 20, 26, 0.04) 6px 12px);
}

.lg-tt td.is-wrong {
  outline: 2px solid var(--sm-accent-deep);
  outline-offset: -2px;
}

.lg-tt tbody tr.is-current td {
  background: var(--sm-cream-2);
}

.lg-tt tbody tr.is-current td.is-one {
  background: #f9cfc6;
}

.lg-tt tbody tr.is-current td:first-child {
  box-shadow: inset 4px 0 0 var(--sm-ink);
}

.lg-tt td.is-new {
  animation: lg-pop 0.42s ease-out both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes lg-pop {
  0% {
    transform: scale(0.55);
    opacity: 0;
  }
  60% {
    transform: scale(1.14);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ---------- expressions ---------- */

.lg-exprcard .sm-label {
  margin-bottom: 0.65rem;
}

.lg-out + .lg-out {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--sm-line-2);
}

.lg-out__t {
  margin-bottom: 0.35rem;
  font-size: 1rem;
  font-weight: 800;
}

.lg-out__t span {
  font-weight: 600;
  color: var(--sm-ink-2);
}

.lg-eq {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.25rem 0.8rem;
  font-size: 0.9rem;
}

.lg-eq dt {
  font-weight: 600;
  color: var(--sm-ink-2);
}

.lg-eq dd {
  font-family: var(--sm-mono);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.lg-eq dd.is-name {
  font-family: "Manrope", sans-serif;
}

.lg-issues {
  display: grid;
  gap: 0.35rem;
}

.lg-issue {
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  background: var(--sm-warn-soft);
  color: var(--sm-warn);
  font-size: 0.86rem;
  font-weight: 600;
}

.lg-issue--error {
  background: var(--sm-accent-soft);
  color: var(--sm-accent-ink);
}