/* ========================================================================== */
/* Toolsgi Character Counter – Mobile Responsive Tweaks                        */
/* Focus: Thumb-friendly targets, stacked cards, optimal spacing               */
/* ========================================================================== */

/* Base mobile-first adjustments */
.tcc-app,
.tcc-wrap {
  padding: 10px;
}

/* Buttons – larger tap area on mobile */
.tcc-btn {
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 15px;
}

/* Grids collapse gracefully */
.tcc-grid,
.tcc-stats,
.tcc-activity-mini {
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

.tcc-card,
.tcc-stat,
.tcc-activity-mini .tcc-chip {
  grid-column: span 12;
}

/* Editor sizing */
.tcc-editor {
  min-height: 220px;
  font-size: 16px;
  line-height: 1.65;
}

/* Toolbar wraps neatly */
.tcc-toolbar {
  gap: 10px;
}

/* Toast positioning for small screens */
.tcc-toast {
  left: 12px;
  right: 12px;
  bottom: 14px;
  transform: none;
}

/* Subscription popup – center on small screens */
.tcc-subscribe__popup {
  right: auto;
  left: 50%;
  transform: translateX(-50%) scale(.96) translateY(-6px);
  min-width: min(92vw, 360px);
}

/* Panels and tables */
.tcc-panel__row {
  grid-template-columns: 1fr auto;
  padding: 12px;
}

.tcc-table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--tcc-grid);
  border-radius: 12px;
}
.tcc-table table { width: 100%; }

/* Progress bars */
.tcc-progress {
  height: 12px;
}

/* Headline stacks */
.tcc-app__header,
.tcc-header {
  grid-template-columns: 1fr;
  gap: 10px;
}

/* Compact badges */
.tcc-badge {
  font-size: 10px;
  padding: 4px 8px;
}

/* Inputs/selects – full width and touch focus */
.tcc-input,
.tcc-select {
  padding: 12px;
  font-size: 16px; /* prevents iOS zoom on focus */
}

/* Large screens re-enable multi-column density */
@media (min-width: 540px) {
  .tcc-activity-mini .tcc-chip { grid-column: span 6; }
}
@media (min-width: 760px) {
  .tcc-stat { grid-column: span 6; }
}
@media (min-width: 900px) {
  .tcc-card--sm { grid-column: span 4; }
  .tcc-card--md { grid-column: span 6; }
  .tcc-card--lg { grid-column: span 8; }
  .tcc-card--xl { grid-column: span 12; }
  .tcc-stat { grid-column: span 3; }
  .tcc-activity-mini .tcc-chip { grid-column: span 3; }
}

/* Accessibility helpers */
.tcc-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}