* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100vh;
  background: #1a1a1a;
  font-family: 'JetBrains Mono', 'Consolas', 'Monaco', 'Courier New', monospace;
}

.grid {
  display: grid;
  height: 100vh;
  min-height: 0;
  gap: .65vw;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
    grid-template-areas:
      "emdash blank"
      "mdrich richmd"
      "htmlmd mdhtml"
      "remove stats"
      "sort stats"
      "sort stats"
      "richh2 stats"
      "minify minify"
      "minify minify";
}


@media (min-width:768px) {
    .grid {
        grid-template-columns: 1fr 1fr 1fr 1.3fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "emdash blank sort stats"
            "mdrich richmd sort stats"
            "htmlmd mdhtml remove stats"
            "richh2 minify minify minify";
        }
}

/* Assign grid-areas by ID */
#dash_box     { grid-area: emdash; }
#blank_box    { grid-area: blank; }
#comment_box  { grid-area: remove; }
#md_to_rich   { grid-area: mdrich; }
#rich_to_md   { grid-area: richmd; }
#html_to_md   { grid-area: htmlmd; }
#md_to_html   { grid-area: mdhtml; }
#stat_box     { grid-area: stats; }
#sort_box     { grid-area: sort; }
#rich_to_h2   { grid-area: richh2; }
#minify_box   { grid-area: minify; }

/* Panel Colors */
#dash_box     { --panel-bg: #e67e00; }
#blank_box    { --panel-bg: #e53e3e; }
#comment_box  { --panel-bg: #38a169; }
#md_to_rich   { --panel-bg: #3182ce; }
#rich_to_md   { --panel-bg: #805ad5; }
#html_to_md   { --panel-bg: #4fd1c5; }
#md_to_html   { --panel-bg: #ed64a6; }
#stat_box     { --panel-bg: #d69e2e; }
#sort_box     { --panel-bg: #00b5d8; }
#rich_to_h2   { --panel-bg: #d53f8c; }
#minify_box   { --panel-bg: #ff8c00; }

.panel {
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  color: #fff;
  overflow: hidden;
  position: relative;
  min-height: 80px;
  min-width: 120px;
  border-radius: 4px;
  animation: fadeIn 0.3s ease forwards;
}
.panel:before {
  content: "";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:#000000;
  opacity: 0;
  transition: opacity .3s;
  z-index:0;
}
.panel:hover:before {
  opacity:.2;
}
.panel:focus-within:hover:before {
  opacity:.8;
}
.header {
  font-weight: 600;
  font-size: max(10px, 1vw);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--panel-bg);
  user-select: none;
  position: absolute;
  right: .35vw;
  top: .35vw;
  z-index: 11;
  /* pointer-events: none; */
}


textarea,
[contenteditable="true"] {
  flex: 1;
  width: 100%;
  padding: .65vw;
  border: 0;
  resize: none;
  background: transparent;
  color: #fff;
  font-size: max(12px, 1vw);
  font-family: inherit;
  line-height: 1.4;
  overflow: auto;
  z-index:1;
}

textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

textarea:focus,
[contenteditable="true"]:focus {
  opacity: 1;
}

.sort_toggle {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-weight: 600;
  font-size: 11px;
  padding: 4px 8px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.sort_toggle:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}
.sort_toggle:active { transform: scale(0.95); }

@keyframes fadeIn {
  from {/* opacity: 0; *//* transform: translateY(10px); */}
  to {/* opacity: 1; *//* transform: translateY(0); */}
}

/* Custom scrollbar for textareas/contenteditable */
textarea::-webkit-scrollbar,
[contenteditable="true"]::-webkit-scrollbar {
  width: 8px;
}
textarea::-webkit-scrollbar-track,
[contenteditable="true"]::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}
textarea::-webkit-scrollbar-thumb,
[contenteditable="true"]::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}
textarea::-webkit-scrollbar-thumb:hover,
[contenteditable="true"]::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}



#intro-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(12px);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #f0f0f0;
  font-family: 'JetBrains Mono', monospace;
  padding: 2rem;
}

.splash-content {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.splash-content h1 {
  font-size: 1.8rem;
  margin: 0;
}

.splash-content .desc {
  font-size: 1rem;
  opacity: 0.9;
}

.splash-content .explain {
  font-size: 0.9rem;
  opacity: 0.8;
  line-height: 1.5;
}

#splash-close {
  background: #4db760;
  color: #fff;
  border: none;
  font-size: 1rem;
  padding: 0.5rem 1.2rem;
  margin-top: 1rem;
  cursor: pointer;
  font-weight: bold;
  font-family: inherit;
  border-radius: 4px;
  transition: back
}




/* Info icon (i) styling */
.info-icon {
    display: inline-block;
    margin-left: 6px;
    font-family: inherit;
    font-size: 14px;
    text-transform: lowercase;
    color: #000;
    cursor: pointer;
    vertical-align: middle;
    user-select: none;
    outline: none;
    position: relative;
    z-index: 2;
}
.info-icon:focus {
    outline: 2px solid #512DA8;
    z-index: 3;
}

/* Hides panel tooltip spans, used only for content */
.tooltip {
    display: none !important;
}

/* Global floating tooltip */
#global-tooltip, .global-tooltip {
    position: fixed;
    left: 50%;
    bottom: 12%;
    transform: translateX(-50%);
    background: #222426;
    color: #FFF;
    font-size: 15px;
    font-family: JetBrains Mono, monospace;
    border-radius: 12px;
    box-shadow: 0 4px 32px rgba(0,0,0,0.28);
    padding: 16px 28px;
    min-width: 240px;
    max-width: 440px;
    z-index: 1002;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.13s cubic-bezier(.72,.04,.15,1.06);
}
.global-tooltip.active,
#global-tooltip.active {
    opacity: 1;
    pointer-events: auto;
}

/* Responsive for mobile */
@media (max-width: 700px) {
    #global-tooltip, .global-tooltip {
        min-width: 140px;
        max-width: 94vw;
        font-size: 13px;
        padding: 12px 10px;
    }
}