/* ================================================================
   CodeToFun — C pattern program pages (star / number / alphabet)
   Live preview chips, monospace pattern output, walkthrough rows.
   Shared so HTML stays lean and CSS is cached across pattern pages.
   ================================================================ */

/* Pattern output: monospace, unwrapped, ligature-free so columns align. */
.tut-live-preview-output .tut-output-body pre.tut-star-pattern-out {
  margin: 0;
  padding: 0.85rem 1rem;
  font-family: "Courier New", Courier, ui-monospace, monospace;
  font-size: 0.9375rem;
  line-height: 1.45;
  letter-spacing: 0;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.45rem;
  white-space: pre;
  overflow-x: auto;
  word-break: normal;
  overflow-wrap: normal;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}

.tut-star-live-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.65rem 0 0;
}

.tut-star-live-chip {
  appearance: none;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.45rem 0.75rem;
  border-radius: 0.45rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.tut-star-live-chip:hover {
  border-color: #0ea5e9;
  color: #0369a1;
  background: #f0f9ff;
}

.tut-star-live-chip:focus-visible {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}

.tut-star-live-chip.is-active {
  border-color: #0284c7;
  background: #e0f2fe;
  color: #0c4a6e;
}

.tut-live-preview-output .tut-output-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
}

.tut-star-live-stats {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #0369a1;
  font-variant-numeric: tabular-nums;
}

.tut-star-live-stats.is-error {
  color: #b91c1c;
}

#walkthrough .tut-star-row-cell {
  text-align: left;
}

#walkthrough .ref-table code.tut-star-row {
  display: inline-block;
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: pre;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  padding: 0.2rem 0.45rem;
}

#definition .tut-code-body {
  font-family: "Courier New", Courier, monospace;
  white-space: pre;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}

.tut-live-preview-toolbar .tut-live-preview-input-row {
  margin-top: 0.35rem;
}

@media (max-width: 480px) {
  .tut-star-live-chip {
    flex: 1 1 calc(25% - 0.5rem);
    text-align: center;
    min-width: 3.25rem;
  }
}