/* === Coloritext emergency responsive overrides (2025-11-11) === */
html, body { max-width:100%; overflow-x:hidden; -webkit-text-size-adjust: 100%; }

img, svg, canvas, video { max-width:100%; height:auto; }

/* Base fluid widths */
.text-input, .select-input, .textarea-input, textarea, input, select { width:100%; max-width:100%; }

/* Keep grid but stack on small screens */
@media (max-width: 992px) {
  .app-container { display:block; padding:12px; margin:10px auto; }
  .top-header, .title-container { display:block; text-align:center; }
  .input-header-row { display:flex; flex-wrap:wrap; gap:10px; }
  .input-group { flex:1 1 240px; min-width:200px; }
  .btn-colorize, .btn-export, .btn-reset { width:100%; }
  .bottom-legend { display:flex; flex-wrap:wrap; gap:10px; padding:10px; justify-content:center; }
  .main-title { font-size: clamp(26px, 8.5vw, 40px); }
  .logo-small { width: min(240px, 60vw); height:auto; }
  .card { padding:12px; }
}

/* Ultra small phones */
@media (max-width: 420px) {
  body { font-size: 15px; }
  .legend-item { font-size: 12px; }
  .legend-dot { width:12px; height:12px; }
}

/* Prevent long colored tokens from overflowing */
.output, .preview-box, .card, .app-main { overflow-wrap: anywhere; word-break: break-word; }


/* === Mobile hotfix: prevent 'Majuscules' checkbox from being cut on small screens === */
@media (max-width: 576px) {
  .checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .checkbox-item {
    flex: 1 1 100%;
    min-width: 0; /* allow shrinking */
  }
  .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    white-space: normal;       /* allow label text to wrap */
    overflow: visible;
  }
  .checkbox-label span {
    display: inline-block;
    line-height: 1.2;
  }
  /* Make checkbox touch-friendly but not oversized */
  .checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }
}