/* ============================================================
   Realm SMP — Nickname Gradient Generator (/nickname)
   Scoped under .ng-page; uses the site's design tokens from style.css.
   ============================================================ */

.ng-page .page-header { margin-bottom: var(--space-lg); }

/* ── Layout: editor + preview side by side, stacked on mobile ─────────── */
.ng-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: start;
}
@media (min-width: 900px) {
  .ng-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .ng-output { position: sticky; top: calc(var(--nav-height, 64px) + 32px); }
}
.ng-page .form-card { padding: var(--space-lg); }
@media (min-width: 600px) {
  .ng-page .form-card { padding: var(--space-xl); }
}

.ng-block { margin-bottom: var(--space-lg); }
.ng-block:last-child { margin-bottom: 0; }

.ng-fieldset { border: 0; padding: 0; margin: 0 0 var(--space-lg); min-width: 0; }
.ng-fieldset:last-child { margin-bottom: 0; }
.ng-fieldset legend,
.ng-subhead-title {
  font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted);
  padding: 0; margin-bottom: var(--space-sm);
}

.ng-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.ng-counter { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-text-faint); }
.ng-counter.is-over { color: var(--color-danger); font-weight: 700; }

.ng-error {
  color: var(--color-danger); font-size: 0.82rem; font-weight: 600; margin: 2px 0 0;
}
.ng-error-list { margin: var(--space-sm) 0 0; padding-left: 1.1em; }
.ng-error-list li + li { margin-top: 2px; }

.ng-page input[aria-invalid="true"] {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(224, 122, 138, 0.25);
}

/* ── Checkboxes / chips ───────────────────────────────────────────────── */
.ng-check {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  font-weight: 500; color: var(--color-text-muted); cursor: pointer;
}
.ng-check input { width: 18px; height: 18px; accent-color: var(--color-accent); cursor: pointer; flex: none; }
.ng-check-inline { margin-top: var(--space-sm); font-size: 0.85rem; }

.ng-format { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.ng-chip {
  padding: 7px 14px; border-radius: 999px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  color: var(--color-text); transition: background .15s, border-color .15s;
}
.ng-chip:hover { background: var(--glass-bg-2); }
.ng-chip:has(input:checked) { background: var(--color-accent-dim); border-color: var(--color-accent); }

/* ── Segmented control (Gradient / Solid) ─────────────────────────────── */
.ng-segmented {
  display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px;
  background: var(--color-surface-2); border: 1px solid var(--color-border);
}
.ng-seg { position: relative; cursor: pointer; }
.ng-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ng-seg span {
  display: block; padding: 7px 18px; border-radius: 999px;
  font-size: 0.88rem; font-weight: 600; color: var(--color-text-muted);
  transition: background .15s, color .15s;
}
.ng-seg input:checked + span { background: var(--color-accent); color: #fff; }
.ng-seg input:focus-visible + span { outline: 2px solid var(--color-accent-hover); outline-offset: 2px; }

/* ── Presets ──────────────────────────────────────────────────────────── */
.ng-presets {
  display: grid; gap: var(--space-sm);
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
}
.ng-preset {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 8px; border-radius: var(--radius-md);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  color: var(--color-text); font: 600 0.78rem var(--font-body); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ng-preset:hover { background: var(--glass-bg-2); border-color: var(--color-border-light); }
.ng-preset[aria-pressed="true"] { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-dim); }
.ng-preset-bar { display: block; height: 14px; border-radius: 6px; }

/* ── Gradient swatch + stops ──────────────────────────────────────────── */
.ng-subhead {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.ng-swatch {
  height: 30px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); margin-bottom: var(--space-md);
}

.ng-stops { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: grid; gap: var(--space-sm); }
.ng-stop {
  display: grid; align-items: center; gap: var(--space-sm);
  grid-template-columns: 22px 44px minmax(0, 1fr) auto;
}
.ng-stop-num { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-text-faint); text-align: center; }
.ng-stop-tools { display: inline-flex; gap: 4px; }

.ng-page input[type="color"] {
  width: 44px; height: 40px; padding: 3px; cursor: pointer;
  border-radius: var(--radius-sm); border: 1px solid var(--color-border);
  background: var(--color-surface-2);
}
.ng-page input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.ng-page input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 5px; }
.ng-page input[type="color"]::-moz-color-swatch { border: 0; border-radius: 5px; }

.ng-page .ng-hex { font-family: var(--font-mono); text-transform: uppercase; padding: 9px 12px; }

.ng-color-field { display: grid; grid-template-columns: 44px minmax(0, 220px); gap: var(--space-sm); align-items: center; }

.ng-icon-btn {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1px solid var(--color-border);
  background: var(--glass-bg); color: var(--color-text); cursor: pointer; font-size: 0.85rem;
  transition: background .15s, border-color .15s, color .15s;
}
.ng-icon-btn:hover:not(:disabled) { background: var(--color-accent-dim); border-color: var(--color-accent); color: var(--color-accent-hover); }
.ng-icon-btn[data-action="remove"]:hover:not(:disabled) { background: rgba(224,122,138,0.16); border-color: var(--color-danger); color: var(--color-danger); }
.ng-icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.ng-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.ng-page .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Preview (Minecraft chat look) ────────────────────────────────────── */
.ng-out-title { font-size: 1rem; margin: 0 0 var(--space-sm); }
.ng-out-title label { font-size: inherit; color: var(--color-text); font-weight: inherit; }
.ng-output .form-hint { margin: 6px 0 var(--space-lg); }

.ng-chat {
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 18px 16px;
  font-family: 'Press Start 2P', var(--font-mono);
  font-size: clamp(0.72rem, 2.6vw, 0.95rem);
  line-height: 1.9;
  color: #FFFFFF;
  overflow-wrap: anywhere;
  min-height: 72px;
  display: flex; align-items: center;
}
.ng-chat-bracket, .ng-chat-msg { text-shadow: 0.125em 0.125em 0 #3F3F3F; }
.ng-nick { word-break: break-all; }
.ng-nick span { text-decoration-thickness: 0.125em; }
.ng-nick.is-placeholder { color: #8A8A8A; font-style: italic; }

/* ── Command field ────────────────────────────────────────────────────── */
.ng-page .ng-command {
  font-family: var(--font-mono); font-size: 0.86rem; line-height: 1.5;
  resize: none; min-height: 0; word-break: break-all;
  background: rgba(0, 0, 0, 0.35); color: var(--color-text);
}
.ng-page .ng-command.is-invalid { color: var(--color-text-faint); font-style: italic; }

.ng-copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-md); }
.ng-copy-row .btn.is-copied { background: linear-gradient(135deg, #57c98a, #3fa66d); border-color: #3fa66d; color: #0e1a13; text-shadow: none; }
.ng-status { font-size: 0.85rem; color: var(--color-text-muted); }

/* ── Help ─────────────────────────────────────────────────────────────── */
.ng-help { margin-top: var(--space-xl); }
.ng-help h2 { font-size: 1.25rem; margin-bottom: var(--space-md); }
.ng-steps { margin: 0 0 var(--space-lg); padding-left: 1.3em; color: var(--color-text-muted); display: grid; gap: 6px; }
.ng-steps strong { color: var(--color-text); }
.ng-help-text { margin: 0 0 var(--space-xs); color: var(--color-text-muted); font-size: 0.9rem; }
.ng-example { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.ng-example code { word-break: break-all; }
.ng-help-notice { margin-bottom: 0; }
.ng-page kbd {
  font-family: var(--font-mono); font-size: 0.8em; padding: 1px 6px; border-radius: 4px;
  background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text);
}

/* ── Visible focus for every interactive control ──────────────────────── */
.ng-page button:focus-visible,
.ng-page a:focus-visible,
.ng-page input[type="checkbox"]:focus-visible,
.ng-page input[type="color"]:focus-visible,
.ng-page textarea:focus-visible,
.ng-page input[type="text"]:focus-visible {
  outline: 2px solid var(--color-accent-hover);
  outline-offset: 2px;
}

/* ── Small screens ────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .ng-stop { grid-template-columns: 40px minmax(0, 1fr); }
  .ng-stop-num { display: none; }
  .ng-stop-tools { grid-column: 1 / -1; justify-content: flex-end; }
  .ng-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .ng-page * { transition: none !important; }
}