/* Practice mode: Auto/Practice switch, cells, badges, coach */
  .practice-controls {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    justify-content: center;
    flex-wrap: wrap;
  }
  /* segmented Auto | Practice switch (calm pill, Signal Blue active) */
  .seg {
    display: inline-flex;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: var(--paper);
  }
  .seg-btn {
    font-size: 11px;
    padding: 3px 12px;
    border: none;
    background: transparent;
    color: var(--fog);
    cursor: pointer;
    font-family: inherit;
  }
  .seg-btn + .seg-btn { border-left: 1px solid var(--hairline); }
  .seg-btn:hover { color: var(--ink); }
  .seg-btn.active {
    background: var(--signal-blue);
    color: #fff;
    font-weight: 700;
  }
  /* Check = the one primary (blue); Reveal = quiet */
  .mini {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: var(--radius-control);
    border: 1px solid var(--signal-blue);
    background: var(--signal-blue);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
  }
  .mini:hover { background: var(--signal-blue-deep); border-color: var(--signal-blue-deep); }
  .mini.ghost { background: transparent; color: var(--ash); border-color: var(--hairline); }
  .mini.ghost:hover { background: var(--paper); border-color: var(--silver); color: var(--ink); }

  .coach {
    margin-top: 6px;
    min-height: 14px;
    font-size: 11px;
    color: var(--fog);
    text-align: center;
  }
  .coach:empty, .coach.coach-empty { display: none; }
  .coach.ok { color: var(--true); font-weight: 700; }
  .coach.warn { color: var(--false); font-weight: 600; }
  .coach.info { color: var(--signal-blue); font-weight: 600; }

  /* correctness shown by a ring + ✓/✗ badge, NOT by the T/F text color
     (an F is already red, so red must not also mean "wrong"). */
  td.prac-cell { padding: 0; position: relative; }
  .practice-input {
    width: 100%;
    min-width: 46px;
    box-sizing: border-box;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    padding: 9px 6px;
    color: var(--ink);
    text-transform: uppercase;
    outline: none;
    font-family: inherit;
  }
  .practice-input:focus { background: rgba(37, 118, 235, 0.07); }
  .mark {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
  }
  td.prac-cell.correct {
    background: var(--true-bg);
    box-shadow: inset 0 0 0 2px var(--true);
  }
  td.prac-cell.correct .mark::after { content: "\2713"; color: var(--true); }
  td.prac-cell.incorrect {
    background: var(--false-bg);
    box-shadow: inset 0 0 0 2px var(--false);
  }
  td.prac-cell.incorrect .mark::after { content: "\2717"; color: var(--false); }
  td.prac-cell.revealed {
    background: rgba(37, 118, 235, 0.10);
    box-shadow: inset 0 0 0 2px var(--signal-blue);
  }
  td.prac-cell.revealed .mark::after { content: "\2605"; color: var(--signal-blue); }

  /* ----- "Logical forms" dropdown (implication columns) ----- */
  .forms-menu { position: relative; margin-top: 6px; }
  .forms-summary {
    list-style: none;
    cursor: pointer;
    font-size: 11px;
    color: var(--signal-blue);
    font-weight: 600;
    display: inline-block;
    padding: 2px 6px;
    border-radius: var(--radius-control);
    user-select: none;
  }
  .forms-summary::-webkit-details-marker { display: none; }
  .forms-summary:hover { background: rgba(37, 118, 235, 0.08); }
  .forms-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    z-index: 1100;
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-sm);
    padding: 4px;
    min-width: 200px;
    text-align: left;
  }
  .forms-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    align-items: flex-start;
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--radius-icon);
  }
  .forms-item:hover { background: var(--mist); }
  .forms-name { font-size: 12px; font-weight: 700; color: var(--ink); }
  .forms-expr { font-size: 12px; color: var(--ash); }

  /* ----- tautology / satisfiable / unsatisfiable badges + equivalence chip ----- */
  .badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    margin-top: 6px;
  }
  .badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--hairline);
    white-space: nowrap;
  }
  .badge-tautology { color: var(--true); background: var(--true-bg); border-color: transparent; }
  .badge-unsatisfiable { color: var(--false); background: var(--false-bg); border-color: transparent; }
  .badge-satisfiable { color: var(--ash); background: var(--mist); }
  .eq-chip {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    color: var(--signal-blue);
    background: rgba(37, 118, 235, 0.10);
    white-space: nowrap;
    cursor: default;
  }