* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Public Sans", "Segoe UI", sans-serif;
  background: #f8f6f6;
  color: #0f172a;
}

a:not([class]) {
  color: #ec5b13;
}

a:not([class]):hover {
  color: #c94d0e;
}

/* Optical balance: buttons with a leading icon get slightly less left padding */
button > .material-symbols-outlined:first-child,
a > .material-symbols-outlined:first-child {
  margin-left: -0.125rem;
}

.gk-wrap {
  width: min(1400px, calc(100vw - 1.25rem));
  margin-inline: auto;
}

.gk-disclosure > summary {
  list-style: none;
}

.gk-disclosure > summary::-webkit-details-marker {
  display: none;
}

.gk-markdown p {
  margin: 0.55rem 0;
  line-height: 1.65;
}

.gk-markdown ul,
.gk-markdown ol {
  margin: 0.45rem 0;
  padding-left: 1.2rem;
}

.gk-markdown blockquote {
  margin: 0.8rem 0;
  border-left: 3px solid color-mix(in srgb, currentColor 24%, transparent);
  padding-left: 0.8rem;
  opacity: 0.85;
}

.gk-markdown pre {
  overflow-x: auto;
  border-radius: 0.75rem;
  padding: 0.75rem;
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.gk-markdown img {
  max-width: 100%;
  border-radius: 0.75rem;
}

.gk-sticky-reply {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
}

.errorlist {
  margin: 0.35rem 0 0;
  padding-left: 1rem;
  color: #b91c1c;
  font-size: 0.75rem;
}

.gk-mention {
  color: #ec5b13;
  font-weight: 600;
  text-decoration: none;
}

.gk-mention:hover {
  color: #c94d0e;
  text-decoration: underline;
}

@media (min-width: 880px) {
  .gk-sticky-reply {
    display: none;
  }
}

/* Hide scrollbar but keep scroll */
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }

/* Material Symbols base */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  width: 1em;
  overflow: hidden;
  flex-shrink: 0;
}

/* Dialog modal */
dialog.gk-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  border: none;
  border-radius: 0.75rem;
  padding: 1.25rem;
  max-width: 28rem;
  width: calc(100vw - 2rem);
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  animation: gk-dialog-in 0.15s ease-out;
}

dialog.gk-dialog .gk-dialog-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}

dialog.gk-dialog .gk-dialog-close:hover {
  background: #f1f5f9;
  color: #475569;
}

dialog.gk-dialog::backdrop {
  background: rgba(0, 0, 0, 0.35);
  animation: gk-backdrop-in 0.15s ease-out;
}

@keyframes gk-dialog-in {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes gk-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Tom Select — slate/primary theme */
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
  font-family: inherit;
  font-size: 0.875rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  background: #fff;
  padding: 0.45rem 0.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.ts-wrapper.single .ts-control:hover,
.ts-wrapper.multi .ts-control:hover {
  border-color: #94a3b8;
}

.ts-wrapper.single.focus .ts-control,
.ts-wrapper.multi.focus .ts-control {
  border-color: #ec5b13;
  box-shadow: 0 0 0 2px rgba(236, 91, 19, 0.25);
}

.ts-dropdown {
  font-family: inherit;
  font-size: 0.875rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  margin-top: 4px;
}

.ts-dropdown .active {
  background: rgba(236, 91, 19, 0.1);
  color: #c94d0e;
}

.ts-dropdown .option:hover {
  background: #f1f5f9;
}

/* Tag pills in multi-select */
.ts-wrapper.multi .ts-control .item {
  background: rgba(236, 91, 19, 0.1);
  color: #c94d0e;
  border: 1px solid rgba(236, 91, 19, 0.3);
  border-radius: 9999px;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.ts-wrapper.multi .ts-control .item .remove {
  border-left: none;
  color: #ec5b13;
  font-size: 1rem;
  margin-left: 0.25rem;
}

/* Stage icons (Material Symbols inside Tom Select) */
.gk-ts-icon {
  font-size: 1.125rem;
  flex-shrink: 0;
  color: #ec5b13;
  line-height: 1;
}

.gk-ts-stage-option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Keep selected item and search input on one line */
.ts-wrapper.single .ts-control > .item {
  display: inline-flex;
  align-items: center;
  max-width: none;
}

/* Hide the default caret and use a cleaner one */
.ts-wrapper.single .ts-control::after {
  border-color: #94a3b8 transparent transparent;
}

/* Placeholder styling */
.ts-control > input::placeholder {
  color: #94a3b8;
}

/* Hide blinking cursor on single-select stage picker */
[data-gk-stage] + .ts-wrapper.single .ts-control > input {
  caret-color: transparent;
}

/* Clear button (x) for optional selects */
.ts-wrapper .clear-button {
  color: #94a3b8;
  margin-right: 4px;
}
.ts-wrapper .clear-button:hover {
  color: #475569;
}

/* EasyMDE / markdown editor */
.EasyMDEContainer .CodeMirror,
.EasyMDEContainer .CodeMirror pre,
.EasyMDEContainer .CodeMirror-code,
.EasyMDEContainer .CodeMirror .CodeMirror-line {
  font-family: "Public Sans", "Segoe UI", sans-serif !important;
  font-size: 0.875rem;
}

.EasyMDEContainer .CodeMirror {
  border: 1px solid #cbd5e1;
  border-radius: 0 0 0.5rem 0.5rem;
  border-top: none;
  color: #0f172a;
  background: #fff;
  padding: 0.5rem;
}

.EasyMDEContainer .CodeMirror-focused {
  border-color: #ec5b13;
  box-shadow: 0 0 0 2px rgba(236, 91, 19, 0.2);
}

.EasyMDEContainer .editor-toolbar {
  font-family: inherit;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem 0.5rem 0 0;
  background: #f8fafc;
  padding: 2px 4px;
  opacity: 1;
}

.EasyMDEContainer .editor-toolbar button {
  color: #475569;
  border-radius: 0.375rem;
  width: 28px;
  height: 28px;
}

.EasyMDEContainer .editor-toolbar button:hover,
.EasyMDEContainer .editor-toolbar button.active {
  background: rgba(236, 91, 19, 0.1);
  border-color: transparent;
  color: #ec5b13;
}

.EasyMDEContainer .editor-toolbar i.separator {
  border-color: #e2e8f0;
}

.EasyMDEContainer .editor-preview {
  font-family: inherit;
  font-size: 0.875rem;
  background: #fff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  border-top: none;
}

.EasyMDEContainer .editor-preview p { margin: 0.5rem 0; }
.EasyMDEContainer .editor-preview ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0.4rem 0;
}
.EasyMDEContainer .editor-preview ol {
  list-style: decimal;
  padding-left: 1.25rem;
  margin: 0.4rem 0;
}
.EasyMDEContainer .editor-preview li { margin: 0.15rem 0; }
.EasyMDEContainer .editor-preview blockquote {
  border-left: 3px solid #e2e8f0;
  padding-left: 0.75rem;
  color: #64748b;
  margin: 0.5rem 0;
}
.EasyMDEContainer .editor-toolbar button.preview {
  width: auto;
  padding: 0 6px;
}