/* app.css — App-specific styles not covered by nslcss */

/* === Site Header === */

.site-header {
  text-align: center;
  padding: var(--nsl-space-xl) var(--nsl-space-lg) var(--nsl-space-lg);
  max-width: 640px;
  margin: 0 auto;
}

.site-header h1 {
  font-size: var(--nsl-font-size-xl);
  letter-spacing: 0.06em;
  color: rgba(var(--nsl-blue), 1);
  margin-bottom: var(--nsl-space-sm);
}

.site-header-description {
  font-size: var(--nsl-font-size-base);
  line-height: var(--nsl-line-height-relaxed);
  color: var(--nsl-gray-text);
}

/* === Phoneme Grid (CSS Grid for vowel/consonant matrices) === */

.phoneme-grid {
  display: grid;
  gap: 1px;
  background: #ddd;
  border: 1px solid #ddd;
  border-radius: var(--nsl-radius-sm);
  overflow: hidden;
  margin-bottom: var(--nsl-space-md);
}

.phoneme-grid .header-cell {
  background: #f0f0f0;
  padding: var(--nsl-space-xs) var(--nsl-space-sm);
  font-size: var(--nsl-font-size-xs);
  font-weight: var(--nsl-font-weight-bold);
  text-align: center;
  color: var(--nsl-gray-text);
}

.phoneme-grid .row-header {
  background: #f5f5f5;
  padding: var(--nsl-space-xs) var(--nsl-space-sm);
  font-size: var(--nsl-font-size-xs);
  font-weight: var(--nsl-font-weight-bold);
  color: var(--nsl-gray-text);
  display: flex;
  align-items: center;
}

.phoneme-grid .cell {
  background: #fff;
  padding: var(--nsl-space-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  overflow: hidden;
}

@media (prefers-color-scheme: dark) {
  .phoneme-grid .cell {
    background: #1e1e1e;
  }
}

/* === Phoneme Symbol === */

.phoneme-symbol {
  font-family: 'Courier New', monospace;
  font-size: var(--nsl-font-size-base);
  padding: 2px 6px;
  border-radius: var(--nsl-radius-sm);
  cursor: pointer;
  user-select: none;
  transition: background var(--nsl-transition), opacity var(--nsl-transition);
  display: inline-block;
  text-align: center;
  min-width: 24px;
}

.phoneme-symbol:hover {
  background: rgba(var(--nsl-blue), 0.15);
}

.phoneme-symbol.excluded {
  opacity: 0.25;
  text-decoration: line-through;
  background: none;
}

/* === Phoneme Tooltip === */

.phoneme-tooltip {
  position: fixed;
  z-index: 1000;
  background: #fff;
  border: 1px solid var(--nsl-gray-divider);
  border-radius: var(--nsl-radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  padding: 8px 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  max-width: 280px;
  line-height: 1.4;
}

.phoneme-tooltip.visible {
  opacity: 1;
  pointer-events: auto;
}

.phoneme-tooltip-name {
  font-size: var(--nsl-font-size-sm);
  color: var(--nsl-gray-text);
}

a.phoneme-tooltip-name {
  color: rgba(var(--nsl-blue), 1);
  text-decoration: none;
}

a.phoneme-tooltip-name:hover {
  text-decoration: underline;
}

.phoneme-tooltip-example {
  font-size: var(--nsl-font-size-xs);
  color: var(--nsl-gray-muted);
  margin-top: 2px;
  font-style: italic;
}

.phoneme-tooltip-weight {
  font-size: var(--nsl-font-size-xs);
  color: var(--nsl-gray-muted);
  font-family: 'Courier New', monospace;
  margin-top: 4px;
}

@media (prefers-color-scheme: dark) {
  .phoneme-tooltip {
    background: #2a2a2a;
    border-color: #444;
  }
}

/* === Phoneme Pair === */

.phoneme-pair {
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

/* === Manner Weight Row (slider in consonant grid row headers) === */

.manner-weight-row {
  display: flex;
  align-items: center;
  gap: var(--nsl-space-xs);
  flex-wrap: nowrap;
}

.manner-weight-label {
  font-size: var(--nsl-font-size-xs);
  white-space: nowrap;
  min-width: 60px;
}

.manner-weight-slider {
  flex: 1;
  min-width: 40px;
  max-width: 80px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--nsl-gray-border);
  border-radius: 2px;
  outline: none;
}

.manner-weight-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(var(--nsl-blue), 1);
  cursor: pointer;
}

.manner-weight-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(var(--nsl-blue), 1);
  cursor: pointer;
  border: none;
}

.manner-weight-value {
  font-size: var(--nsl-font-size-xs);
  min-width: 24px;
  text-align: right;
  color: var(--nsl-gray-muted);
}

/* === Column Weight Sliders === */

.column-weight-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.column-weight-slider {
  width: 100%;
  max-width: 60px;
  height: 3px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--nsl-gray-border);
  border-radius: 2px;
  outline: none;
}

.column-weight-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(var(--nsl-blue), 1);
  cursor: pointer;
}

.column-weight-slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(var(--nsl-blue), 1);
  cursor: pointer;
  border: none;
}

.column-weight-value {
  font-size: 9px;
  color: var(--nsl-gray-muted);
}

/* === Hierarchy Weight Sliders (in manner tree) === */

.hierarchy-slider-container {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 90px;
}

.hierarchy-weight-slider {
  flex: 1;
  min-width: 40px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--nsl-gray-border);
  border-radius: 2px;
  outline: none;
}

.hierarchy-weight-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(var(--nsl-color-success), 1);
  cursor: pointer;
}

.hierarchy-weight-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(var(--nsl-color-success), 1);
  cursor: pointer;
  border: none;
}

.hierarchy-weight-value {
  font-size: var(--nsl-font-size-xs);
  min-width: 22px;
  text-align: right;
  color: var(--nsl-gray-muted);
}

/* === Manner Hierarchy Table === */

.manner-hierarchy-table {
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr 1fr auto;
  gap: 0;
  border: 1px solid var(--nsl-gray-divider);
  border-radius: var(--nsl-radius-sm);
  overflow: hidden;
}

.manner-hierarchy-row {
  display: contents;
}

.manner-hierarchy-header > div {
  font-weight: var(--nsl-font-weight-bold);
  font-size: var(--nsl-font-size-xs);
  color: var(--nsl-gray-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(var(--nsl-blue), 0.06);
}

.manner-hierarchy-row:not(.manner-hierarchy-header):hover > div {
  background: rgba(var(--nsl-blue), 0.03);
}

.manner-hierarchy-name,
.manner-hierarchy-slider,
.manner-hierarchy-bar,
.manner-hierarchy-example {
  padding: 5px var(--nsl-space-sm);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--nsl-gray-divider);
}

.manner-hierarchy-row:last-child > div {
  border-bottom: none;
}

.manner-hierarchy-name {
  font-size: var(--nsl-font-size-xs);
}

.manner-name {
  font-weight: var(--nsl-font-weight-bold);
  font-size: var(--nsl-font-size-xs);
  white-space: nowrap;
}

.manner-hierarchy-slider {
  gap: 4px;
}

.manner-hierarchy-bar {
  min-width: 60px;
}

.manner-bar-track {
  flex: 1;
  height: 6px;
  background: var(--nsl-gray-bg);
  border-radius: 3px;
  overflow: hidden;
}

.manner-bar-fill {
  height: 100%;
  background: rgba(var(--nsl-blue), 0.6);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.manner-hierarchy-example {
  font-size: var(--nsl-font-size-xs);
  color: var(--nsl-gray-muted);
  font-style: italic;
}

/* === Toolbar === */

.inventory-toolbar {
  margin-top: var(--nsl-space-lg);
  margin-bottom: var(--nsl-space-md);
}

.grid-instruction-hint {
  font-size: var(--nsl-font-size-sm);
  color: var(--nsl-gray-muted);
  margin-bottom: var(--nsl-space-sm);
  text-align: center;
}

.toolbar-buttons {
  display: flex;
  gap: var(--nsl-space-sm);
  flex-wrap: wrap;
  justify-content: center;
}

.english-toggle-btn {
  padding: var(--nsl-space-xs) var(--nsl-space-sm);
  border: 1px solid var(--nsl-gray-border);
  border-radius: var(--nsl-radius-sm);
  background: #fff;
  font-size: var(--nsl-font-size-sm);
  cursor: pointer;
  transition: background var(--nsl-transition), border-color var(--nsl-transition);
}

.english-toggle-btn.active {
  background: rgba(var(--nsl-blue), 0.08);
  border-color: rgba(var(--nsl-blue), 0.3);
}

.english-toggle-btn:hover {
  background: rgba(var(--nsl-blue), 0.12);
}

@media (prefers-color-scheme: dark) {
  .english-toggle-btn {
    background: #2a2a2a;
    color: var(--nsl-gray-text);
  }
  .english-toggle-btn.active {
    background: rgba(var(--nsl-blue), 0.15);
  }
}

/* === Popover Detail Rows === */

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--nsl-space-xs) 0;
  border-bottom: 1px solid var(--nsl-gray-divider);
  font-size: var(--nsl-font-size-sm);
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-label {
  font-weight: var(--nsl-font-weight-bold);
  color: var(--nsl-gray-muted);
  min-width: 80px;
}

.detail-value {
  text-align: right;
}

/* === Popover Controls === */

.popover-toggle-row,
.popover-weight-row {
  gap: var(--nsl-space-sm);
}

.popover-weight-control {
  display: flex;
  align-items: center;
  gap: var(--nsl-space-xs);
}

.popover-weight-slider {
  width: 100px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--nsl-gray-border);
  border-radius: 2px;
  outline: none;
}

.popover-weight-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(var(--nsl-blue), 1);
  cursor: pointer;
}

.popover-weight-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(var(--nsl-blue), 1);
  cursor: pointer;
  border: none;
}

/* === Toggle Switch === */

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--nsl-gray-border);
  border-radius: 20px;
  transition: background var(--nsl-transition);
}

.toggle-slider::before {
  content: '';
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--nsl-transition);
}

.toggle-switch input:checked + .toggle-slider {
  background: rgba(var(--nsl-color-success), 1);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(16px);
}

/* === Generate Form === */

.generate-form {
  max-width: 560px;
  margin: var(--nsl-space-lg) auto;
}

.generate-form h2 {
  text-align: center;
}

.generate-form .nsl-form-group {
  margin-bottom: var(--nsl-space-md);
}

.form-description {
  font-size: var(--nsl-font-size-sm);
  color: var(--nsl-gray-muted);
  margin-bottom: var(--nsl-space-lg);
  line-height: var(--nsl-line-height-relaxed);
  text-align: center;
}

.rule-toggles {
  display: flex;
  flex-direction: column;
  gap: var(--nsl-space-sm);
  margin-bottom: var(--nsl-space-md);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--nsl-space-xs);
  font-size: var(--nsl-font-size-sm);
  cursor: pointer;
}

.generate-form > .nsl-element-button {
  width: 100%;
}

.generate-form .spelling-set-btn {
  padding: var(--nsl-space-sm) var(--nsl-space-md);
}

/* === Results === */

.results-toolbar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--nsl-space-sm);
  margin-top: var(--nsl-space-lg);
  margin-bottom: var(--nsl-space-md);
}

.results-info {
  display: flex;
  gap: var(--nsl-space-sm);
  align-items: center;
  font-size: var(--nsl-font-size-sm);
  color: var(--nsl-gray-muted);
}

.results-lang-label {
  font-weight: var(--nsl-font-weight-bold);
  color: var(--nsl-gray-muted);
  white-space: nowrap;
}

.results-lang-name {
  border: 1px solid transparent;
  border-radius: var(--nsl-radius-sm);
  background: transparent;
  font-family: inherit;
  font-size: var(--nsl-font-size-base);
  font-weight: var(--nsl-font-weight-bold);
  color: var(--nsl-gray-text);
  padding: var(--nsl-space-xs) var(--nsl-space-sm);
  width: 180px;
  transition: border-color var(--nsl-transition), background var(--nsl-transition);
}

.results-lang-name:hover {
  border-color: var(--nsl-gray-border);
  background: #fff;
}

.results-lang-name:focus {
  outline: none;
  border-color: rgba(var(--nsl-blue), 0.5);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(var(--nsl-blue), 0.1);
}


@media (prefers-color-scheme: dark) {
  .results-lang-name {
    color: var(--nsl-gray-text);
  }
  .results-lang-name:hover,
  .results-lang-name:focus {
    background: #1e1e1e;
  }
}

.results-actions {
  display: flex;
  gap: var(--nsl-space-sm);
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
}

.results-actions > * {
  height: 36px;
  box-sizing: border-box;
  white-space: nowrap;
}

.results-spelling-select {
  padding: var(--nsl-space-xs) var(--nsl-space-sm);
  border: 1px solid var(--nsl-gray-border);
  border-radius: var(--nsl-radius-sm);
  background: #fff;
  font-family: inherit;
  font-size: var(--nsl-font-size-sm);
  cursor: pointer;
  transition: border-color var(--nsl-transition);
}

.results-spelling-select:focus {
  outline: none;
  border-color: rgba(var(--nsl-blue), 0.5);
  box-shadow: 0 0 0 2px rgba(var(--nsl-blue), 0.1);
}

@media (prefers-color-scheme: dark) {
  .results-spelling-select {
    background: #1e1e1e;
    color: var(--nsl-gray-text);
    border-color: #444;
  }
}

/* === Spelling Table (non-virtualized reference table) === */

.spelling-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--nsl-font-size-sm);
}

.spelling-table th {
  text-align: left;
  padding: var(--nsl-space-xs) var(--nsl-space-sm);
  background: rgba(var(--nsl-blue), 0.08);
  font-weight: var(--nsl-font-weight-bold);
  border-bottom: 2px solid var(--nsl-gray-divider);
  font-size: var(--nsl-font-size-xs);
}

.spelling-table td {
  padding: var(--nsl-space-xs) var(--nsl-space-sm);
  border-bottom: 1px solid var(--nsl-gray-divider);
}

.spelling-table .ipa-cell {
  font-family: 'Courier New', monospace;
}

/* === Spelling Tab === */

.spelling-container {
  max-width: 1200px;
  margin: var(--nsl-space-lg) auto;
}

.spelling-container h2 {
  text-align: center;
}

.spelling-set-btngroup {
  display: flex;
  gap: 0;
  margin-bottom: var(--nsl-space-md);
  border: 1px solid var(--nsl-gray-border);
  border-radius: var(--nsl-radius-sm);
  overflow: hidden;
  width: 100%;
}

.spelling-set-btn {
  flex: 1;
  padding: var(--nsl-space-sm) var(--nsl-space-xs);
  border: none;
  border-right: 1px solid var(--nsl-gray-border);
  background: #fff;
  font-family: inherit;
  font-size: var(--nsl-font-size-sm);
  font-weight: var(--nsl-font-weight-bold);
  color: var(--nsl-gray-text);
  cursor: pointer;
  transition: background var(--nsl-transition), color var(--nsl-transition);
  text-align: center;
  white-space: nowrap;
}

.spelling-set-btn:last-child {
  border-right: none;
}

.spelling-set-btn:hover {
  background: rgba(var(--nsl-blue), 0.06);
}

.spelling-set-btn.active {
  background: rgba(var(--nsl-blue), 0.12);
  color: rgba(var(--nsl-blue), 1);
}

@media (prefers-color-scheme: dark) {
  .spelling-set-btn {
    background: #1e1e1e;
    color: var(--nsl-gray-text);
    border-color: #444;
  }
  .spelling-set-btn:hover {
    background: rgba(var(--nsl-blue), 0.1);
  }
  .spelling-set-btn.active {
    background: rgba(var(--nsl-blue), 0.2);
    color: rgba(var(--nsl-blue), 1);
  }
  .spelling-set-btngroup {
    border-color: #444;
  }
}

.spelling-reset-btn {
  display: inline-block;
  margin-bottom: var(--nsl-space-md);
  padding: var(--nsl-space-xs) var(--nsl-space-sm);
  border: 1px solid var(--nsl-gray-border);
  border-radius: var(--nsl-radius-sm);
  background: #fff;
  font-family: inherit;
  font-size: var(--nsl-font-size-sm);
  cursor: pointer;
  transition: background var(--nsl-transition), border-color var(--nsl-transition);
}

.spelling-reset-btn:hover {
  background: rgba(var(--nsl-blue), 0.08);
  border-color: rgba(var(--nsl-blue), 0.3);
}

@media (prefers-color-scheme: dark) {
  .spelling-reset-btn {
    background: #2a2a2a;
    color: var(--nsl-gray-text);
  }
}

.spelling-preview-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.spelling-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--nsl-font-size-sm);
}

.spelling-preview-table th {
  text-align: left;
  padding: var(--nsl-space-xs) var(--nsl-space-sm);
  background: rgba(var(--nsl-blue), 0.08);
  font-weight: var(--nsl-font-weight-bold);
  border-bottom: 2px solid var(--nsl-gray-divider);
  font-size: var(--nsl-font-size-xs);
  position: sticky;
  top: 0;
}

.spelling-preview-table td {
  padding: var(--nsl-space-xs) var(--nsl-space-sm);
  border-bottom: 1px solid var(--nsl-gray-divider);
}

.spelling-preview-table .ipa-cell {
  font-family: 'Courier New', monospace;
}

.spelling-preview-table .phoneme-name-cell {
  color: var(--nsl-gray-muted);
  font-size: var(--nsl-font-size-xs);
}

.spelling-custom-input {
  width: 60px;
  padding: 2px 4px;
  border: 1px solid var(--nsl-gray-border);
  border-radius: var(--nsl-radius-sm);
  font-family: 'Courier New', monospace;
  font-size: var(--nsl-font-size-sm);
  background: #fff;
}

.spelling-custom-input:focus {
  outline: none;
  border-color: rgba(var(--nsl-blue), 0.5);
  box-shadow: 0 0 0 2px rgba(var(--nsl-blue), 0.1);
}

@media (prefers-color-scheme: dark) {
  .spelling-custom-input {
    background: #1e1e1e;
    color: var(--nsl-gray-text);
    border-color: #444;
  }
}

.spelling-preview-empty {
  text-align: center;
  color: var(--nsl-gray-muted);
  padding: var(--nsl-space-lg);
  font-size: var(--nsl-font-size-sm);
}

.spelling-example-cell {
  font-style: italic;
  color: var(--nsl-gray-muted);
  font-size: var(--nsl-font-size-xs);
}

a.spelling-phoneme-link {
  color: rgba(var(--nsl-blue), 1);
  text-decoration: none;
}

a.spelling-phoneme-link:hover {
  text-decoration: underline;
}

@media (max-width: 480px) {
  .spelling-container {
    margin: var(--nsl-space-sm) auto;
  }

  .spelling-custom-input {
    width: 50px;
    padding: 4px 6px;
    font-size: var(--nsl-font-size-base);
  }

  .spelling-set-btn {
    font-size: var(--nsl-font-size-xs);
    padding: var(--nsl-space-xs) var(--nsl-space-xs);
  }
}

/* === Empty State === */

.empty-state {
  text-align: center;
  margin-top: var(--nsl-space-lg);
  padding: var(--nsl-space-xl);
  color: var(--nsl-gray-muted);
}

.empty-state a {
  color: rgba(var(--nsl-blue), 1);
  text-decoration: none;
  cursor: pointer;
}

.empty-state a:hover {
  text-decoration: underline;
}

/* === Section Headings inside tab panes === */

.nsl-tab-pane h2 {
  font-size: var(--nsl-font-size-lg);
  margin: var(--nsl-space-md) 0 var(--nsl-space-sm) 0;
  color: var(--nsl-gray-text);
}

.nsl-tab-pane h2:first-child {
  margin-top: 0;
}

/* === Sticky table header (frozen while scrolling) === */

.nsl-collection-table-scroller > .nsl-collection-table-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f3f7fb;
}

/* === Sortable table headers === */

.sort-header {
  cursor: pointer;
  user-select: none;
}

.sort-header:hover {
  color: rgba(var(--nsl-blue), 1);
}

.sort-arrow::after {
  content: '';
  display: inline-block;
  margin-left: 4px;
}

.sort-asc .sort-arrow::after {
  content: '\25B2';
  font-size: 8px;
}

.sort-desc .sort-arrow::after {
  content: '\25BC';
  font-size: 8px;
}

/* === Button Variant: Active state for toggle buttons === */

.nsl-element-button.active {
  background: rgba(var(--nsl-blue-active), 1);
}

/* === Tune Weights Button (mobile-only, hidden on desktop/tablet) === */

.tune-weights-btn {
  display: none;
  padding: var(--nsl-space-xs) var(--nsl-space-sm);
  border: 1px solid var(--nsl-gray-border);
  border-radius: var(--nsl-radius-sm);
  background: #fff;
  font-family: inherit;
  font-size: var(--nsl-font-size-sm);
  cursor: pointer;
  transition: background var(--nsl-transition), border-color var(--nsl-transition);
}

.tune-weights-btn.active {
  background: rgba(var(--nsl-blue), 0.08);
  border-color: rgba(var(--nsl-blue), 0.3);
}

.tune-weights-btn:hover {
  background: rgba(var(--nsl-blue), 0.12);
}

/* === Phoneme Grid Scroll Container === */

.phoneme-grid-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.phoneme-grid-scroll > .phoneme-grid {
  min-width: 0;
}

@media (max-width: 768px) {
  .phoneme-grid-scroll > .phoneme-grid {
    min-width: max-content;
  }
}

/* === Mobile Tab Nav (hidden on desktop/tablet, shown at <=480px) === */

.mobile-tab-nav {
  display: none;
}

/* === Mobile Bar Slider (hidden on desktop/tablet, shown at <=480px) === */

.mobile-bar-slider {
  display: none;
}

/* === Responsive === */

@media (max-width: 768px) {
  .phoneme-grid {
    font-size: var(--nsl-font-size-xs);
  }

  .results-toolbar {
    flex-direction: column;
    align-items: center;
  }

  .results-info {
    flex-direction: column;
    align-items: center;
    gap: var(--nsl-space-xs);
  }

  .results-lang-label {
    display: none;
  }

  .results-lang-name {
    width: 160px;
    font-size: var(--nsl-font-size-sm);
    text-align: center;
  }

  .results-actions {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Phoneme inventory toolbar — center buttons */
  .toolbar-buttons {
    justify-content: center;
  }

  .grid-instruction-hint {
    text-align: center;
    font-size: var(--nsl-font-size-xs);
  }

  /* Spelling tab — center reset button */
  .spelling-reset-btn {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: fit-content;
  }

  .generate-form .spelling-set-btn {
    padding: var(--nsl-space-sm) var(--nsl-space-sm);
  }

  /* Phoneme grid label width — tablet */
  :root {
    --phoneme-grid-label-width: 100px;
  }

  /* Site header — compact */
  .site-header {
    padding: var(--nsl-space-md) var(--nsl-space-sm) var(--nsl-space-sm);
  }

  .site-header h1 {
    font-size: var(--nsl-font-size-lg);
  }

  .site-header-description {
    display: none;
  }

  /* Section headings: compact and centered */
  .nsl-tab-pane h2 {
    font-size: var(--nsl-font-size-base);
    text-align: center;
    margin: var(--nsl-space-sm) 0 var(--nsl-space-xs) 0;
  }

  .nsl-tab-pane h3 {
    font-size: var(--nsl-font-size-sm);
    text-align: center;
  }

  /* Tab pane padding — tablet */
  .nsl-tab-pane {
    padding: var(--nsl-space-sm);
  }

  /* --- Weight controls: native sliders hidden at tablet, bar sliders shown instead --- */
  .manner-weight-slider,
  .manner-weight-value,
  .column-weight-slider,
  .column-weight-value {
    display: none;
  }

  /* Hide plain-text manner label (bar slider has its own label inside) */
  .manner-weight-label {
    display: none;
  }

  /* Hide column category text (bar slider has its own label inside) */
  .column-weight-cell > span:first-child {
    display: none;
  }

  /* Show label inside compact column bar sliders on mobile */
  .mobile-bar-slider--column .nsl-bar-slider-label {
    display: block;
    font-size: 10px;
    left: var(--nsl-space-xs);
  }

  /* Hierarchy: hide native slider/value, keep cell for bar slider */
  .manner-hierarchy-slider .hierarchy-weight-slider,
  .manner-hierarchy-slider .hierarchy-weight-value {
    display: none;
  }

  .manner-hierarchy-bar {
    display: none;
  }

  /* Tune Weights toggle button — hidden (bar sliders are always visible) */
  .tune-weights-btn {
    display: none !important;
  }

  /* Bar sliders visible by default at tablet and below */
  .mobile-bar-slider {
    display: block;
  }

  .mobile-bar-slider--column {
    display: block;
    width: 100%;
  }

  /* Hide tick marks on mobile (too noisy) */
  .nsl-bar-slider-ticks {
    display: none;
  }

  /* Manner hierarchy table: single column (bar slider has name+example inside) */
  .manner-hierarchy-table {
    grid-template-columns: 1fr;
  }

  /* Manner hierarchy: hide name, example, bar columns (merged into bar slider) */
  .manner-hierarchy-name {
    display: none;
  }

  .manner-hierarchy-example {
    display: none;
  }

  /* Hierarchy header row: hide entirely (bar sliders are self-explanatory) */
  .manner-hierarchy-header {
    display: none;
  }

  /* Hierarchy bar slider fills its cell */
  .manner-hierarchy-slider .mobile-bar-slider {
    flex: 1;
  }

  /* Tighter hierarchy rows */
  .manner-hierarchy-slider {
    padding: 2px var(--nsl-space-xs);
    border-bottom: none;
  }

  .manner-hierarchy-slider .mobile-bar-slider {
    height: 30px;
  }

  .manner-hierarchy-table {
    gap: 2px;
    border: none;
  }

  /* Row header: bar slider is the only child (label hidden) */
  .manner-weight-row .mobile-bar-slider {
    flex: 1;
    min-width: 0;
    height: 28px;
  }

  /* Prevent row header overflow from bar slider */
  .phoneme-grid .row-header {
    overflow: hidden;
    padding: 2px;
  }

  /* Tighter grid cell padding */
  .phoneme-grid .cell {
    padding: 1px;
    align-items: stretch;
  }

  .phoneme-grid .header-cell {
    padding: 2px;
  }

  /* Phoneme pair + symbols: fill cell fully on mobile */
  .phoneme-pair {
    gap: 1px;
    align-items: stretch;
  }

  .phoneme-symbol {
    padding: 1px 3px;
    min-width: 0;
    font-size: var(--nsl-font-size-sm);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Tighter grid margins */
  .phoneme-grid {
    margin-bottom: var(--nsl-space-sm);
  }

  .manner-hierarchy-table {
    margin-bottom: var(--nsl-space-sm);
  }

  /* Column weight cell: just the bar slider, minimal chrome */
  .column-weight-cell {
    gap: 0;
    padding: 0;
    background: transparent;
    justify-content: stretch;
  }

  .column-weight-cell .mobile-bar-slider--column {
    border-radius: 0;
  }

  /* Desktop tab bar: hidden at tablet and below (replaced by mobile nav) */
  .nsl-tabs {
    display: none;
  }

  /* === Mobile Tab Nav === */

  .mobile-tab-nav {
    display: flex;
    align-items: center;
    gap: var(--nsl-space-sm);
    padding: var(--nsl-space-xs) var(--nsl-space-sm);
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    border-bottom: 1px solid var(--nsl-gray-divider);
  }

  .mobile-tab-trigger {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
    padding: var(--nsl-space-xs) var(--nsl-space-sm);
    background: #fff;
    border: 1px solid var(--nsl-gray-border);
    border-radius: var(--nsl-radius-md);
    color: rgba(var(--nsl-blue), 1);
    font-family: inherit;
    font-size: var(--nsl-font-size-sm);
    font-weight: var(--nsl-font-weight-bold);
    cursor: pointer;
  }

  .mobile-tab-trigger-chevron {
    font-size: var(--nsl-font-size-xs);
    margin-left: var(--nsl-space-xs);
  }

  .mobile-tab-cta {
    flex-shrink: 0;
    min-height: 36px;
    padding: var(--nsl-space-xs) var(--nsl-space-md);
    background: rgba(var(--nsl-blue), 1);
    color: #fff;
    border: none;
    border-radius: var(--nsl-radius-md);
    font-family: inherit;
    font-size: var(--nsl-font-size-sm);
    font-weight: var(--nsl-font-weight-bold);
    cursor: pointer;
    transition: background var(--nsl-transition);
  }

  .mobile-tab-cta:hover {
    background: rgba(var(--nsl-blue-hover), 1);
  }

  .mobile-tab-cta:active {
    background: rgba(var(--nsl-blue-active), 1);
  }

  .mobile-tab-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: var(--nsl-space-sm);
    right: var(--nsl-space-sm);
    background: #fff;
    border: 1px solid var(--nsl-gray-border);
    border-radius: var(--nsl-radius-md);
    box-shadow: var(--nsl-shadow-md);
    z-index: 11;
    overflow: hidden;
  }

  .mobile-tab-dropdown.open {
    display: block;
  }

  .mobile-tab-option {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: var(--nsl-space-xs) var(--nsl-space-md);
    font-size: var(--nsl-font-size-sm);
    cursor: pointer;
    transition: background var(--nsl-transition);
    border-bottom: 1px solid var(--nsl-gray-divider);
  }

  .mobile-tab-option:last-child {
    border-bottom: none;
  }

  .mobile-tab-option:hover {
    background: rgba(var(--nsl-blue), 0.06);
  }

  .mobile-tab-option.active {
    color: rgba(var(--nsl-blue), 1);
    font-weight: var(--nsl-font-weight-bold);
    background: rgba(var(--nsl-blue), 0.08);
  }

  /* Bar slider layout within row headers */
  .manner-weight-row .mobile-bar-slider {
    flex: 1;
    min-width: 60px;
  }

  /* Results table: hide IPA columns (2nd and 4th) on tablet */
  .results-table-container .nsl-collection-table-header-cell:nth-child(2),
  .results-table-container .nsl-collection-table-header-cell:nth-child(4),
  .results-table-container .nsl-collection-table-cell:nth-child(2),
  .results-table-container .nsl-collection-table-cell:nth-child(4) {
    display: none;
  }
}

@media (max-width: 480px) {
  /* Phoneme grid label width — mobile */
  :root {
    --phoneme-grid-label-width: 80px;
  }

  /* Tab pane padding — mobile */
  .nsl-tab-pane {
    padding: var(--nsl-space-xs);
  }

  /* Manner hierarchy table: single column on mobile */
  .manner-hierarchy-table {
    grid-template-columns: 1fr;
  }

  /* Results table: also hide Frequency column (5th) on mobile */
  .results-table-container .nsl-collection-table-header-cell:nth-child(5),
  .results-table-container .nsl-collection-table-cell:nth-child(5) {
    display: none;
  }
}

@media (max-width: 768px) and (prefers-color-scheme: dark) {
  .mobile-tab-nav {
    background: #121212;
  }

  .mobile-tab-trigger {
    background: #1e1e1e;
    border-color: var(--nsl-gray-border);
  }

  .mobile-tab-dropdown {
    background: #1e1e1e;
    border-color: var(--nsl-gray-border);
  }
}

/* === Transition Heatmap === */

.heatmap-grid {
  display: grid;
  width: 100%;
  border: 1px solid var(--nsl-gray-divider);
  margin-bottom: var(--nsl-space-md);
}
.heatmap-corner     { grid-area: corner; overflow: hidden; }
.heatmap-col-header { grid-area: colhdr; overflow: hidden; }
.heatmap-row-header { grid-area: rowhdr; overflow: hidden; }
.heatmap-data       { grid-area: data; overflow: auto; }
.heatmap-grid canvas { display: block; }
.heatmap-data canvas { cursor: crosshair; }

.heatmap-toolbar {
  display: flex; align-items: center;
  gap: var(--nsl-space-sm); flex-wrap: wrap;
  margin-bottom: var(--nsl-space-sm);
}

.heatmap-footer {
  display: flex; align-items: center;
  gap: var(--nsl-space-sm);
  margin-top: var(--nsl-space-sm);
  min-height: 32px;
}

.heatmap-banned-count {
  font-size: var(--nsl-font-size-sm); color: var(--nsl-gray-muted);
}

.heatmap-legend {
  display: flex; align-items: center;
  gap: var(--nsl-space-xs); font-size: var(--nsl-font-size-xs);
  color: var(--nsl-gray-muted);
}

.heatmap-legend-gradient {
  width: 100px; height: 10px; border-radius: 2px;
  background: linear-gradient(to right,
    rgba(33,113,181,0.05), rgba(33,113,181,0.3),
    rgba(33,113,181,0.6), rgba(33,113,181,1.0));
}

.heatmap-tooltip {
  position: fixed; z-index: 1000;
  background: #fff; border: 1px solid var(--nsl-gray-divider);
  border-radius: var(--nsl-radius-sm);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  padding: var(--nsl-space-xs) var(--nsl-space-sm);
  pointer-events: none; opacity: 0;
  transition: opacity 0.1s ease;
  max-width: 240px; line-height: 1.3;
}

.heatmap-tooltip.visible { opacity: 1; }

.heatmap-tooltip-pair {
  font-family: 'Courier New', monospace;
  font-weight: var(--nsl-font-weight-bold);
}

.heatmap-tooltip-names {
  font-size: var(--nsl-font-size-xs); color: var(--nsl-gray-muted); margin-top: 2px;
}

a.heatmap-tooltip-name {
  color: rgba(var(--nsl-blue), 1); text-decoration: none;
}

a.heatmap-tooltip-name:hover { text-decoration: underline; }

.heatmap-tooltip-example {
  font-style: italic; color: var(--nsl-gray-muted);
}

.heatmap-tooltip-rate {
  font-size: var(--nsl-font-size-sm); color: rgba(var(--nsl-blue), 1); margin-top: 2px;
}

.heatmap-tooltip-banned {
  font-size: var(--nsl-font-size-xs); color: rgba(var(--nsl-color-error), 1);
  font-weight: var(--nsl-font-weight-bold); margin-top: 2px;
}

@media (prefers-color-scheme: dark) {
  .heatmap-tooltip { background: #2a2a2a; border-color: #444; }
}