/* ================================================================
   ShakilTech Code Highlighter Pro — highlighter.css
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* ================================================================
   THEME TOKEN MAPS
   Applied via  data-stch="dark|light"  +  data-stch-scheme="..."
   ================================================================ */

/* ── Shared structure defaults ── */
:root {
  --stch-radius       : 10px;
  --stch-font         : 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  --stch-fs           : 14px;
  --stch-lh           : 1.75;
  --stch-tab          : 4;
  --stch-trans        : 160ms ease;
  --stch-gutter-w     : 3rem;
}

/* ── DARK BASE ── */
[data-stch="dark"] {
  --stch-bg           : #161b22;
  --stch-surface      : #0d1117;
  --stch-border       : #30363d;
  --stch-text         : #e6edf3;
  --stch-muted        : #7d8590;
  --stch-toolbar-bg   : #0d1117;
  --stch-toolbar-border: #21262d;
  --stch-dot1         : #ff5f56;
  --stch-dot2         : #ffbd2e;
  --stch-dot3         : #27c93f;
  --stch-badge-bg     : #21262d;
  --stch-badge-fg     : #7d8590;
  --stch-badge-border : #30363d;
  --stch-btn-bg       : transparent;
  --stch-btn-fg       : #7d8590;
  --stch-btn-hover-bg : #21262d;
  --stch-btn-hover-fg : #e6edf3;
  --stch-btn-border   : #30363d;
  --stch-copy-ok      : #3fb950;
  --stch-gutter-bg    : #0d1117;
  --stch-gutter-border: #21262d;
  --stch-gutter-fg    : #3d444d;
  --stch-scroll-thumb : #30363d;
  --stch-shadow       : 0 0 0 1px #30363d, 0 8px 32px rgba(0,0,0,.45);
  --stch-inline-bg    : #161b22;
  --stch-inline-fg    : #79c0ff;
  --stch-inline-border: #30363d;
}

/* ── LIGHT BASE ── */
[data-stch="light"] {
  --stch-bg           : #f6f8fa;
  --stch-surface      : #ffffff;
  --stch-border       : #d0d7de;
  --stch-text         : #1f2328;
  --stch-muted        : #656d76;
  --stch-toolbar-bg   : #f0f3f5;
  --stch-toolbar-border: #d0d7de;
  --stch-dot1         : #ff5f56;
  --stch-dot2         : #ffbd2e;
  --stch-dot3         : #27c93f;
  --stch-badge-bg     : #eaeef2;
  --stch-badge-fg     : #656d76;
  --stch-badge-border : #d0d7de;
  --stch-btn-bg       : transparent;
  --stch-btn-fg       : #656d76;
  --stch-btn-hover-bg : #e6ebf0;
  --stch-btn-hover-fg : #1f2328;
  --stch-btn-border   : #d0d7de;
  --stch-copy-ok      : #1a7f37;
  --stch-gutter-bg    : #f0f3f5;
  --stch-gutter-border: #d0d7de;
  --stch-gutter-fg    : #afb8c1;
  --stch-scroll-thumb : #d0d7de;
  --stch-shadow       : 0 0 0 1px #d0d7de, 0 4px 16px rgba(0,0,0,.08);
  --stch-inline-bg    : #f0f3f5;
  --stch-inline-fg    : #953800;
  --stch-inline-border: #d0d7de;
}

/* ── SCHEME OVERRIDES — dark variants ── */
[data-stch-scheme="one-dark"] {
  --stch-bg: #282c34; --stch-surface: #21252b; --stch-border: #3e4451;
  --stch-toolbar-bg: #21252b; --stch-toolbar-border: #3e4451;
  --stch-gutter-bg: #21252b; --stch-gutter-border: #3e4451;
  --stch-muted: #636d83;
}
[data-stch-scheme="tokyo-night"] {
  --stch-bg: #1a1b2e; --stch-surface: #13142a; --stch-border: #2a2d4a;
  --stch-toolbar-bg: #13142a; --stch-toolbar-border: #1e2040;
  --stch-gutter-bg: #13142a; --stch-gutter-border: #2a2d4a;
  --stch-muted: #565f89;
}
[data-stch-scheme="dracula"] {
  --stch-bg: #282a36; --stch-surface: #1e1f29; --stch-border: #44475a;
  --stch-toolbar-bg: #1e1f29; --stch-toolbar-border: #383a4a;
  --stch-gutter-bg: #1e1f29; --stch-gutter-border: #383a4a;
  --stch-muted: #6272a4;
}
[data-stch-scheme="nord"] {
  --stch-bg: #2e3440; --stch-surface: #242933; --stch-border: #3b4252;
  --stch-toolbar-bg: #242933; --stch-toolbar-border: #3b4252;
  --stch-gutter-bg: #242933; --stch-gutter-border: #3b4252;
  --stch-muted: #616e88;
}
[data-stch-scheme="monokai"] {
  --stch-bg: #272822; --stch-surface: #1e1f1c; --stch-border: #3e3d32;
  --stch-toolbar-bg: #1e1f1c; --stch-toolbar-border: #3e3d32;
  --stch-gutter-bg: #1e1f1c; --stch-gutter-border: #3e3d32;
  --stch-muted: #75715e;
}
[data-stch-scheme="night-owl"] {
  --stch-bg: #011627; --stch-surface: #01111d; --stch-border: #1d3b53;
  --stch-toolbar-bg: #01111d; --stch-toolbar-border: #1d3b53;
  --stch-gutter-bg: #01111d; --stch-gutter-border: #1d3b53;
  --stch-muted: #5f7e97;
}
[data-stch-scheme="vscode-dark"] {
  --stch-bg: #1e1e1e; --stch-surface: #141414; --stch-border: #333;
  --stch-toolbar-bg: #141414; --stch-toolbar-border: #2a2a2a;
  --stch-gutter-bg: #141414; --stch-gutter-border: #2a2a2a;
  --stch-muted: #606060;
}

/* ── SCHEME OVERRIDES — light variants ── */
[data-stch-scheme="one-light"] {
  --stch-bg: #fafafa; --stch-surface: #fff; --stch-border: #e5e5e5;
  --stch-toolbar-bg: #f2f2f2; --stch-toolbar-border: #e5e5e5;
  --stch-gutter-bg: #f2f2f2; --stch-gutter-border: #e5e5e5;
}
[data-stch-scheme="solarized-light"] {
  --stch-bg: #fdf6e3; --stch-surface: #eee8d5; --stch-border: #ccc4a2;
  --stch-toolbar-bg: #eee8d5; --stch-toolbar-border: #ccc4a2;
  --stch-gutter-bg: #eee8d5; --stch-gutter-border: #ccc4a2;
  --stch-muted: #93a1a1;
}

/* ================================================================
   OUTER WRAPPER
   ================================================================ */
.stch-block {
  position        : relative;
  border-radius   : var(--stch-radius);
  border          : 1px solid var(--stch-border);
  box-shadow      : var(--stch-shadow);
  background      : var(--stch-bg);
  margin          : 1.75em 0;
  overflow        : hidden;
  font-family     : var(--stch-font);
  opacity         : 0;
  transform       : translateY(8px);
  transition      : opacity .28s ease, transform .28s ease;
}

.stch-block.stch-visible {
  opacity   : 1;
  transform : translateY(0);
}

/* ================================================================
   TOOLBAR
   ================================================================ */
.stch-toolbar {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 0 14px;
  height          : 42px;
  background      : var(--stch-toolbar-bg);
  border-bottom   : 1px solid var(--stch-toolbar-border);
  gap             : 10px;
  user-select     : none;
}

.stch-toolbar-left,
.stch-toolbar-right {
  display     : flex;
  align-items : center;
  gap         : 8px;
  min-width   : 0;
}

/* macOS window dots */
.stch-dots {
  display     : flex;
  gap         : 6px;
  align-items : center;
  flex-shrink : 0;
}
.stch-dots span {
  display       : block;
  width         : 11px;
  height        : 11px;
  border-radius : 50%;
}
.stch-dots span:nth-child(1) { background: var(--stch-dot1); }
.stch-dots span:nth-child(2) { background: var(--stch-dot2); }
.stch-dots span:nth-child(3) { background: var(--stch-dot3); }

/* Filename */
.stch-filename {
  font-size   : 12px;
  font-family : var(--stch-font);
  color       : var(--stch-muted);
  font-weight : 500;
  white-space : nowrap;
  overflow    : hidden;
  text-overflow: ellipsis;
  max-width   : 260px;
}

/* Language badge */
.stch-lang-badge {
  display       : inline-flex;
  align-items   : center;
  background    : var(--stch-badge-bg);
  color         : var(--stch-badge-fg);
  border        : 1px solid var(--stch-badge-border);
  border-radius : 5px;
  padding       : 2px 9px;
  font-size     : 11px;
  font-family   : var(--stch-font);
  font-weight   : 500;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space   : nowrap;
  pointer-events: none;
}

/* Toolbar buttons (copy + theme toggle) */
.stch-btn {
  display       : inline-flex;
  align-items   : center;
  gap           : 5px;
  background    : var(--stch-btn-bg);
  color         : var(--stch-btn-fg);
  border        : 1px solid var(--stch-btn-border);
  border-radius : 6px;
  padding       : 4px 10px;
  font-size     : 11.5px;
  font-family   : var(--stch-font);
  font-weight   : 500;
  cursor        : pointer;
  transition    : background var(--stch-trans), color var(--stch-trans), border-color var(--stch-trans);
  white-space   : nowrap;
  line-height   : 1;
}
.stch-btn:hover {
  background   : var(--stch-btn-hover-bg);
  color        : var(--stch-btn-hover-fg);
}
.stch-btn svg { flex-shrink: 0; }

/* Copied state */
.stch-copy-btn.stch-copied {
  color        : var(--stch-copy-ok) !important;
  border-color : var(--stch-copy-ok) !important;
}

/* Theme toggle — icon-only pill */
.stch-theme-btn {
  padding : 4px 7px;
}

/* ================================================================
   CODE AREA
   ================================================================ */
.stch-code-area {
  display    : flex;
  overflow-x : auto;
  background : var(--stch-bg);
}

.stch-code-area.stch-wrap .stch-pre {
  white-space : pre-wrap;
  word-break  : break-all;
}

/* Custom scrollbar */
.stch-code-area::-webkit-scrollbar        { height: 5px; }
.stch-code-area::-webkit-scrollbar-track  { background: transparent; }
.stch-code-area::-webkit-scrollbar-thumb  {
  background    : var(--stch-scroll-thumb);
  border-radius : 10px;
}

/* ── Line-number gutter ── */
.stch-gutter {
  flex-shrink   : 0;
  display       : flex;
  flex-direction: column;
  padding       : 16px 0;
  min-width     : var(--stch-gutter-w);
  background    : var(--stch-gutter-bg);
  border-right  : 1px solid var(--stch-gutter-border);
  text-align    : right;
  pointer-events: none;
  user-select   : none;
}

.stch-gutter span {
  display     : block;
  padding     : 0 12px;
  font-size   : calc(var(--stch-fs) - 1px);
  font-family : var(--stch-font);
  line-height : var(--stch-lh);
  color       : var(--stch-gutter-fg);
  font-variant-numeric: tabular-nums;
}

/* ── Code pre/code ── */
.stch-pre {
  flex       : 1;
  margin     : 0;
  padding    : 16px 20px;
  background : transparent;
  border     : none;
  outline    : none;
  overflow   : visible;
  white-space: pre;
  tab-size   : var(--stch-tab);
}

.stch-code {
  font-family : var(--stch-font);
  font-size   : var(--stch-fs);
  line-height : var(--stch-lh);
  background  : transparent !important;
  color       : var(--stch-text);
  tab-size    : var(--stch-tab);
}

/* ================================================================
   HIGHLIGHT.JS TOKEN OVERRIDES
   Applied on top of hljs's own theme; ensures our themes work.
   ================================================================ */

/* ── Dark shared tokens ── */
[data-stch="dark"] .hljs-comment,
[data-stch="dark"] .hljs-quote             { color: #8b949e; font-style: italic; }
[data-stch="dark"] .hljs-keyword,
[data-stch="dark"] .hljs-selector-tag      { color: #ff7b72; font-weight: 500; }
[data-stch="dark"] .hljs-string,
[data-stch="dark"] .hljs-attr              { color: #a5d6ff; }
[data-stch="dark"] .hljs-number,
[data-stch="dark"] .hljs-literal           { color: #79c0ff; }
[data-stch="dark"] .hljs-built_in,
[data-stch="dark"] .hljs-type             { color: #ffa657; }
[data-stch="dark"] .hljs-function         { color: #d2a8ff; }
[data-stch="dark"] .hljs-title            { color: #d2a8ff; font-weight: 600; }
[data-stch="dark"] .hljs-variable         { color: #79c0ff; }
[data-stch="dark"] .hljs-tag              { color: #7ee787; }
[data-stch="dark"] .hljs-name             { color: #7ee787; }
[data-stch="dark"] .hljs-params           { color: #e6edf3; }
[data-stch="dark"] .hljs-meta             { color: #79c0ff; }
[data-stch="dark"] .hljs-operator         { color: #ff7b72; }
[data-stch="dark"] .hljs-deletion         { background: rgba(255,123,114,.15); color: #ff7b72; }
[data-stch="dark"] .hljs-addition         { background: rgba(63,185,80,.1);  color: #3fb950; }

/* ── Light shared tokens ── */
[data-stch="light"] .hljs-comment,
[data-stch="light"] .hljs-quote            { color: #6e7781; font-style: italic; }
[data-stch="light"] .hljs-keyword,
[data-stch="light"] .hljs-selector-tag     { color: #cf222e; font-weight: 500; }
[data-stch="light"] .hljs-string,
[data-stch="light"] .hljs-attr             { color: #0a3069; }
[data-stch="light"] .hljs-number,
[data-stch="light"] .hljs-literal          { color: #0550ae; }
[data-stch="light"] .hljs-built_in,
[data-stch="light"] .hljs-type            { color: #953800; }
[data-stch="light"] .hljs-function        { color: #8250df; }
[data-stch="light"] .hljs-title           { color: #8250df; font-weight: 600; }
[data-stch="light"] .hljs-variable        { color: #0550ae; }
[data-stch="light"] .hljs-tag             { color: #116329; }
[data-stch="light"] .hljs-name            { color: #116329; }
[data-stch="light"] .hljs-params          { color: #1f2328; }
[data-stch="light"] .hljs-meta            { color: #0550ae; }
[data-stch="light"] .hljs-operator        { color: #cf222e; }
[data-stch="light"] .hljs-deletion        { background: rgba(255,129,130,.15); color: #cf222e; }
[data-stch="light"] .hljs-addition        { background: rgba(31,136,61,.1);  color: #116329; }

/* ── Scheme-specific overrides ── */
[data-stch-scheme="dracula"] .hljs-keyword    { color: #ff79c6; }
[data-stch-scheme="dracula"] .hljs-string     { color: #f1fa8c; }
[data-stch-scheme="dracula"] .hljs-function   { color: #50fa7b; }
[data-stch-scheme="dracula"] .hljs-title      { color: #50fa7b; }
[data-stch-scheme="dracula"] .hljs-number     { color: #bd93f9; }
[data-stch-scheme="dracula"] .hljs-built_in   { color: #ffb86c; }

[data-stch-scheme="tokyo-night"] .hljs-keyword { color: #bb9af7; }
[data-stch-scheme="tokyo-night"] .hljs-string  { color: #9ece6a; }
[data-stch-scheme="tokyo-night"] .hljs-number  { color: #ff9e64; }
[data-stch-scheme="tokyo-night"] .hljs-function{ color: #7aa2f7; }
[data-stch-scheme="tokyo-night"] .hljs-title   { color: #7aa2f7; }
[data-stch-scheme="tokyo-night"] .hljs-built_in{ color: #2ac3de; }

[data-stch-scheme="nord"] .hljs-keyword   { color: #81a1c1; }
[data-stch-scheme="nord"] .hljs-string    { color: #a3be8c; }
[data-stch-scheme="nord"] .hljs-number    { color: #b48ead; }
[data-stch-scheme="nord"] .hljs-function  { color: #88c0d0; }
[data-stch-scheme="nord"] .hljs-title     { color: #88c0d0; }
[data-stch-scheme="nord"] .hljs-built_in  { color: #ebcb8b; }

[data-stch-scheme="monokai"] .hljs-keyword  { color: #f92672; }
[data-stch-scheme="monokai"] .hljs-string   { color: #e6db74; }
[data-stch-scheme="monokai"] .hljs-number   { color: #ae81ff; }
[data-stch-scheme="monokai"] .hljs-function { color: #a6e22e; }
[data-stch-scheme="monokai"] .hljs-title    { color: #a6e22e; }
[data-stch-scheme="monokai"] .hljs-built_in { color: #66d9e8; }

[data-stch-scheme="night-owl"] .hljs-keyword  { color: #c792ea; }
[data-stch-scheme="night-owl"] .hljs-string   { color: #addb67; }
[data-stch-scheme="night-owl"] .hljs-number   { color: #f78c6c; }
[data-stch-scheme="night-owl"] .hljs-function { color: #82aaff; }
[data-stch-scheme="night-owl"] .hljs-title    { color: #82aaff; }
[data-stch-scheme="night-owl"] .hljs-built_in { color: #ffcb8b; }

/* ================================================================
   INLINE CODE
   ================================================================ */
:not(pre) > code.stch-inline,
:not(.stch-block) > :not(pre) > code {
  font-family     : var(--stch-font);
  font-size       : .875em;
  background      : var(--stch-inline-bg);
  color           : var(--stch-inline-fg);
  border          : 1px solid var(--stch-inline-border);
  border-radius   : 4px;
  padding         : .15em .45em;
  white-space     : nowrap;
}

/* ================================================================
   PENDING (before lazy-highlight fires)
   ================================================================ */
pre.stch-pending {
  background    : var(--stch-bg);
  border-radius : var(--stch-radius);
  min-height    : 60px;
  position      : relative;
  overflow      : hidden;
}

pre.stch-pending::after {
  content    : '';
  position   : absolute;
  inset      : 0;
  background : linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.04) 50%,
    transparent 100%);
  background-size : 200% 100%;
  animation  : stch-shimmer 1.4s infinite;
}

@keyframes stch-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 640px) {
  .stch-filename { display: none; }
  .stch-btn span { display: none; }
  .stch-btn { padding: 4px 7px; }
  .stch-lang-badge { display: none; }
  :root { --stch-gutter-w: 2.4rem; }
}