.fade-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--pfse-anim-micro) var(--pfse-ease-standard);
}

.fade-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--pfse-anim-micro) var(--pfse-ease-standard);
}
/* Hide native number input spin buttons (arrows) for all browsers */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
  background-color: var(--pfse-surface-secondary);
  border-radius: var(--pfse-radius-md);
  padding: var(--pfse-spacing-2);
  color: var(--pfse-text-high);
  font-family: var(--pfse-font-mono);
  border: 1px solid var(--pfse-border-secondary);
}

/* labels above the numeric inputs */
label span.caption {
  margin-bottom: var(--pfse-spacing-2)
}
/* Activation card styling and state variants */
.activation-card{background:var(--pfse-surface-secondary); border:1px solid var(--pfse-border-secondary); border-radius:8px; padding:10px; display:flex; flex-direction:column; gap:8px; position:relative; min-height:140px}
.activation-card:focus-visible{outline:var(--pfse-focus-ring-width) solid var(--pfse-focus-ring-color); outline-offset:2px}
.activation-card-header{display:flex; justify-content:space-between; align-items:center; font-size:11px; letter-spacing:.5px; color:var(--muted)}
.activation-card-weight{font-size:15px; font-weight:600; font-family:monospace; overflow:hidden; text-overflow:ellipsis}
.activation-card-meta{display:flex; gap:6px; font-size:11px; color:var(--muted)}
.activation-card-actions{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px; margin-top:4px}
.activation-card-actions button{width:100%}

/* State classes based on value sign & mute */
.cell--pos .activation-card-weight{color:var(--success)}
.cell--neg .activation-card-weight{color:var(--danger)}
.cell--muted .activation-card-weight{color:var(--muted)}

/* Nonzero cue: accent rail + squared top-left */
.cell--active.activation-card{border-radius:8px 8px 8px 0}
.cell--active.activation-card::before{content:""; position:absolute; inset:6px auto 6px 0; width:4px; border-radius:var(--pfse-radius-sm); background:var(--pfse-accent-primary); pointer-events:none}

/* Selected & focused layering refinement */
.cell--selected.activation-card{box-shadow:0 0 0 1px var(--pfse-accent-primary)}
.cell--focused.activation-card{box-shadow:0 0 0 var(--pfse-focus-ring-width) var(--pfse-focus-ring-color)}

/* Input inside card */
.activation-card input[type="text"]{background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:6px 8px; color:var(--text); font-family:monospace; font-size:14px}
.activation-card input[type="text"]:focus-visible{outline:var(--pfse-focus-ring-width) solid var(--pfse-focus-ring-color); outline-offset:2px}

/* Grid layout (v4) */
.activation-card--grid{padding:8px; border-radius:10px}
.activation-grid-rows{display:flex; flex-direction:column; gap:var(--pfse-spacing-2)}
.activation-card-head{display:flex; gap:var(--pfse-spacing-2); align-items:flex-start}
.activation-card-body{display:flex; flex-direction:column; gap:var(--pfse-spacing-2)}
.activation-pill{flex:1; background:var(--pfse-surface-primary); border:1px solid var(--pfse-border-secondary); border-radius:var(--pfse-radius-md); padding:6px 10px; text-align:center; font-size:14px; font-weight:600; letter-spacing:.3px}
.activation-pill--meta{flex:0 0 auto; min-width:72px; letter-spacing:.15px; font-size:20px; font-weight:600; color:var(--pfse-text-high); font-family:"Imperial Script","Space Grotesk",system-ui,sans-serif; line-height:1.05}
.activation-value-row{display:flex; gap:var(--pfse-spacing-2); align-items:center; justify-content:center}
.activation-value-input{flex:1; min-width:120px; text-align:center}
.activation-actions-row{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--pfse-spacing-2); align-items:center}
.activation-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pfse-spacing-1);
  padding: 6px 10px;
  min-height: 34px;
  border-radius: var(--pfse-radius-md);
  border: 1px solid var(--pfse-border-secondary);
  background: var(--pfse-surface-primary);
  color: var(--pfse-text-high);
  cursor: pointer;
  transition:
    background var(--pfse-anim-micro) var(--pfse-ease-standard),
    color var(--pfse-anim-micro) var(--pfse-ease-standard),
    border-color var(--pfse-anim-micro) var(--pfse-ease-standard),
    box-shadow var(--pfse-anim-micro) var(--pfse-ease-standard),
    outline var(--pfse-anim-instant) var(--pfse-ease-standard),
    transform var(--pfse-anim-instant) var(--pfse-ease-standard);
}
.activation-btn:hover {
  background: var(--pfse-surface-secondary);
}
.activation-btn:active {
  transform: scale(var(--pfse-active-scale));
}
.activation-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--pfse-accent-primary);
}
.activation-btn--inc,.activation-btn--dec{min-width:42px; min-height:44px}
.activation-btn--mute{min-height:44px}
.activation-btn--mute.is-muted{background:color-mix(in srgb, var(--pfse-danger) 18%, var(--pfse-surface-secondary) 82%);}

/* Legacy four-row layout (kept while other panels migrate) */
.row-top{display:flex; gap:8px; align-items:center}
.cell-index,.cell-prime{flex:1; background:var(--pfse-surface-primary); border:1px solid var(--pfse-border-secondary); border-radius:6px; padding:10px 0; text-align:center; font-size:15px; font-weight:600; letter-spacing:.4px}
.row-coeff{display:flex}
.coeff-input{width:100%; background:var(--pfse-surface-primary); border:1px solid var(--pfse-border-secondary); border-radius:6px; padding:10px 14px; font-family:var(--pfse-font-mono); font-size:16px; line-height:1.3}
.row-incdec,.row-mute-clear{display:flex; gap:10px}
.btn-activ {
  flex: 1;
  min-height: 46px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--pfse-surface-primary);
  border: 1px solid var(--pfse-border-secondary);
  cursor: pointer;
  transition:
    background var(--pfse-anim-micro) var(--pfse-ease-standard),
    color var(--pfse-anim-micro) var(--pfse-ease-standard),
    border-color var(--pfse-anim-micro) var(--pfse-ease-standard),
    box-shadow var(--pfse-anim-micro) var(--pfse-ease-standard),
    outline var(--pfse-anim-instant) var(--pfse-ease-standard),
    transform var(--pfse-anim-instant) var(--pfse-ease-standard);
}
.btn-activ:hover {
  background: var(--pfse-surface-secondary);
}
.btn-activ:active {
  transform: scale(0.97);
}
.btn-activ[aria-pressed="true"] {
  background: color-mix(in srgb, var(--pfse-danger) 18%, var(--pfse-surface-secondary) 82%);
}
.btn-activ:focus-visible {
  outline: var(--pfse-focus-ring-width) solid var(--pfse-focus-ring-color);
  outline-offset: 2px;
}

/* Adaptive layout for very narrow panels */
@media (max-width:640px){
  .activation-card{min-height:120px}
  .btn-activ{min-height:42px; font-size:18px}
}