/* 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.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); }