/* Server Text Studio. Every selector is #sts-scoped — css/tool-theme.css loads after this and
 * re-skins buttons, inputs and tabs across all the ported widgets, so a plain class rule loses
 * the tie. See CLAUDE.md, "Writing widget CSS".
 */

#sts { display: block; }

#sts .sts-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
#sts .sts-tab { padding: 8px 14px; border-radius: 8px; font-weight: 700; font-size: 14px; cursor: pointer; }

#sts .sts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  align-items: start;
}
#sts .sts-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

#sts .sts-field { display: block; min-width: 0; }
#sts .sts-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .72;
  margin-bottom: 6px;
}
#sts .sts-hint { display: block; margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; opacity: .68; }

#sts input[type="text"],
#sts textarea { width: 100%; padding: 9px 11px; border-radius: 8px; font-size: 15px; }
#sts .sts-input,
#sts .sts-out {
  /* Server text is full of §, & and angle brackets; a proportional face makes them unreadable
   * and hides a doubled code entirely. */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
  /* An unbroken 2,000-character §-code string would otherwise push the column wide. */
  word-break: break-all;
}

/* Colour stops ----------------------------------------------------------- */
#sts .sts-stops { display: flex; flex-wrap: wrap; gap: 8px; }
#sts .sts-stop { display: inline-flex; align-items: center; gap: 4px; }
#sts .sts-stop input[type="color"] {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  cursor: pointer;
}
#sts .sts-hexin {
  width: 84px !important;
  padding: 6px 7px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px !important;
}
#sts .sts-drop {
  width: 24px; height: 24px; border-radius: 6px; line-height: 1;
  font-size: 15px; cursor: pointer; padding: 0;
}
#sts .sts-stopbtns { display: flex; gap: 8px; margin-top: 8px; }

/* Segmented buttons ------------------------------------------------------ */
#sts .sts-segs { display: flex; flex-wrap: wrap; gap: 6px; }
#sts .sts-seg {
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
#sts .sts-formats .sts-seg { flex: 1 1 auto; }
#sts .sts-bgtoggle { margin-top: 8px; }

/* Presets ---------------------------------------------------------------- */
#sts .sts-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
#sts .sts-preset {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
}
#sts .sts-presetname { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; opacity: .8; }
#sts .sts-presetbar { display: block; height: 10px; border-radius: 999px; }

/* Swatches --------------------------------------------------------------- */
#sts .sts-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 6px; }
#sts .sts-swatch {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  cursor: pointer;
  /* The swatch IS the colour, so tool-theme.css must not repaint it and theme-normalize.js
   * must not judge its contrast — there is no text on it to read. */
  border: 1px solid rgba(0, 0, 0, .25);
}
#sts .sts-swatch span {
  position: absolute;
  inset: auto 0 -18px;
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#sts .sts-swatch:hover span,
#sts .sts-swatch:focus-visible span { opacity: .85; }

/* Preview ---------------------------------------------------------------- */
#sts .sts-preview {
  padding: 18px 16px;
  border-radius: 12px;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* The whole point is the colours, so nothing here may inherit the page's foreground. */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: .01em;
  word-break: break-word;
  overflow-wrap: anywhere;
}
#sts .sts-dark { background: #101418; }
#sts .sts-light { background: #f2f4f6; }
#sts .sts-mcbg {
  /* Minecraft chat sits on a translucent black panel over the world; this is that panel, not
   * a screenshot, because a background image would be one more asset for no extra truth. */
  background: #1d2a17;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .55);
}
#sts .sts-ctx-lore { background: #211a2b; font-style: italic; }
#sts .sts-ctx-hologram { background: #0d1b26; font-size: 15px; }
#sts .sts-placeholder { color: #8a8a8a; font-size: 14px; font-style: italic; }

/* Obfuscated is animated in game. A CSS blur says "this is scrambled" without an interval
 * timer, which would keep running on a page nobody is looking at. */
#sts .sts-obf { filter: blur(2.2px); opacity: .85; }

/* Actions ---------------------------------------------------------------- */
#sts .sts-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
#sts .sts-btn { padding: 8px 14px; border-radius: 9px; font-size: 14px; font-weight: 700; cursor: pointer; }
#sts .sts-meta { font-size: 12.5px; opacity: .7; }
#sts .sts-check { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; cursor: pointer; }
#sts .sts-note { margin: 14px 0 0; min-height: 1.2em; font-size: 13px; opacity: .85; }

#sts .sts-help { margin-top: 24px; font-size: 14.5px; line-height: 1.65; max-width: 72ch; }
#sts .sts-help p { margin: 0; }

/* A display rule beats the [hidden] attribute — see CLAUDE.md. */
#sts [hidden] { display: none !important; }