.results {
    padding: 1em;
    border-top: 1px solid #333;    
}

.hide-words {
    display: none;
}

.group0 {
    font-weight: bold;
}

.group1 {
    font-size: medium;
    font-style: italic;
}

.subtext {
    font-size: 0.8rem;
    color: #6c757d;
    white-space: nowrap;
    margin-left: 0.25rem;
}

.pangram {
    background-color: #faf3d4;
}

.bg-light {
  background-color: #f8f9fa;
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.flex-item {
    margin-right: 1rem;
}

.form-label { 
    display: inline-block;
}

.form-row {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;  /* 👈 pack items together */
    gap: 0.5rem;                  /* controlled spacing */
}

.btn {
    padding: 0.3em 0.6em;
    border: none;
    border-radius: 4px;
    background-color: #0d6efd;
    color: white;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-sm { font-size: 0.8rem; padding: 0.2em 0.4em; }

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem;
  align-items: flex-start;
}

.col {
  flex: 0 0 auto;           /* hug content, don't stretch */
  min-width: 250px;         /* wrap at this point */
  width: auto;              /* no artificial growth */
}

.row > .col {
  flex: 0 0 auto;        /* don't grow, don't shrink */
  width: fit-content;    /* shrinkwrap to content */
  min-width: 0;          /* allow shrink below default 'auto' */
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.row > .col > table {
  width: auto;
  table-layout: auto;
  margin: 1rem;
}

.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    background-color: #f8f9fa; /* "bg-light" replacement */
}

.table th,
.table td {
    border: 1px solid #dee2e6;
    padding: 0.5rem;
}

.table th {
    background-color: #e9ecef;
    text-align: left;
}

.text-right  { text-align: right; }
.text-muted  { color: #6c757d; }
.text-top    { vertical-align: top; }

.fst-italic  { font-style: italic; }
.bold        { font-weight: bold; }
/* .subtext     { font-size: 0.8rem; } */

/* === Spacing utilities === */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }

.ms-1 { margin-left: 0.25rem; }

.align-middle { vertical-align: middle; }
.bg-alice     { background-color: aliceblue; }


@media (max-width: 480px) {
    .subtext {
        white-space: normal;
        margin-left: 0;
        margin-top: 0.25rem;
    }
}
@media (min-width: 576px) {
    .col-sm-6 { flex: 0 0 50%; }
}
@media (min-width: 768px) {
    .col-md-4 { flex: 0 0 33.333%; }
    .col-md-auto { flex: 0 0 auto; }
}
@media (min-width: 992px) {
    .col-lg-3 { flex: 0 0 25%; }
}