/* =========================================================================
   suite theme - code block (macOS terminal style, v5)
   Adapted from wang1rrr's Redefine theme (40px title bar, 12px traffic
   light dots in #fc625d/#fdbc40/#35cd4b, bold 16px language label,
   bold copy button with 0 18px 0 0 corner radius)
   Adds light/dark theme adaptation.
   ========================================================================= */

/* ----- theme variables ----- */
:root {
  --code-line-height: 1.7;
  --code-bg: #f6f8fa;
  --code-fg: #24292e;
  --code-title-bar: #e8eaed;
  --code-title-fg: #57606a;
  --code-line-num: #b0b4ba;
  --code-line-border: #d8dde3;
  --code-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  --code-comment: #6a737d;
  --code-keyword: #d73a49;
  --code-string: #032f62;
  --code-number: #005cc5;
  --code-fn: #6f42c1;
  --code-var: #e36209;
  --code-tag: #22863a;
  --code-punct: #24292e;
}
:root[data-theme="dark"] {
  --code-bg: #1e1e1e;
  --code-fg: #d4d4d4;
  --code-title-bar: #2c2c2c;
  --code-title-fg: #d4d4d4;
  --code-line-num: #5a5a5a;
  --code-line-border: #2d2d2d;
  --code-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
  --code-comment: #6a9955;
  --code-keyword: #569cd6;
  --code-string: #ce9178;
  --code-number: #b5cea8;
  --code-fn: #dcdcaa;
  --code-var: #9cdcfe;
  --code-tag: #f92672;
  --code-punct: #d4d4d4;
}

/* Fixed toolbar shell; only the code body scrolls horizontally. */
.mac-code-shell {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 1.8em 0;
    padding-top: 40px;
    overflow: hidden;
    border: 1px solid var(--code-line-border);
    border-radius: 18px;
    background: var(--code-bg);
    box-shadow: var(--code-shadow);
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Main code body. */
pre.mac-code,
pre[class*="language-"].mac-code {
    width: 100%;
    max-width: 100%;
    background: var(--code-bg);
    color: var(--code-fg);
    border: 0;
    border-radius: 0 0 18px 18px;
    padding: 14px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0;
    font-family: "JetBrains Mono", "Fira Code", "SF Mono", "Cascadia Code",
                 "Source Code Pro", Consolas, "Liberation Mono", monospace;
    font-size: 13.5px;
    line-height: var(--code-line-height);
    font-variant-ligatures: none;
    font-feature-settings: "calt" 0, "liga" 0;
    position: relative;
    counter-reset: line;
    box-shadow: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
    tab-size: 4;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

/* Title bar (top stripe) — different color from code body. */
.mac-code-shell::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 40px;
    background: var(--code-title-bar);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 17px 17px 0 0;
    pointer-events: none;
    z-index: 1;
    transition: background-color 0.18s ease;
}
:root[data-theme="dark"] .mac-code-shell::before {
    border-bottom: 1px solid #000;
}

/* three traffic light dots (colors from wang1rrr's Redefine theme) */
.mac-code-shell::after {
    content: "";
    position: absolute;
    top: 14px; left: 20px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fc625d;
    box-shadow:
        20px 0 0 0 #fdbc40,
        40px 0 0 0 #35cd4b;
    pointer-events: none;
    z-index: 2;
}

/* language title — bold 16px, position matches wang1rrr (::before attr(data-rel),
   80px right of the dots, line-height 38px) */
.mac-code-title {
    position: absolute;
    top: 0;
    left: 12px;
    margin-left: 80px;
    color: var(--code-title-fg);
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
                 "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 38px;
    letter-spacing: 0;
    pointer-events: none;
    user-select: none;
    z-index: 2;
    transition: color 0.18s ease;
}

/* copy button (top-right) — wang1rrr style: bold, right-corner radius,
   hidden until hover */
.mac-code-copy {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0 18px 0 0;
    display: inline-block;
    font-weight: bold;
    line-height: 1.8;
    opacity: 0;
    outline: 0;
    padding: 6px 15px;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 1rem;
    color: var(--code-title-fg);
    background: var(--code-title-bar);
    border: 0;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
    z-index: 3;
}
.mac-code-shell:hover .mac-code-copy,
.mac-code-copy:focus { opacity: 1; }
.mac-code-copy:hover { background: var(--code-line-border); }
.mac-code-copy.copied { color: #35cd4b; }

/* line numbers gutter (Prism line-numbers plugin) */
pre.line-numbers {
    padding-left: 56px !important;
}
.line-numbers .line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 14px;
    left: 0;
    width: 44px;
    font-size: 100%;
    line-height: calc(var(--code-line-height) * 1em);
    border-right: 1px solid var(--code-line-border);
    padding: 0 10px 0 0;
    text-align: right;
    user-select: none;
}
.line-numbers-rows > span {
    display: block;
    height: calc(var(--code-line-height) * 1em);
    line-height: calc(var(--code-line-height) * 1em);
    counter-increment: line;
}
.line-numbers-rows > span::before {
    content: counter(line);
    color: var(--code-line-num);
    display: block;
    font: inherit;
    line-height: inherit;
    text-align: right;
}

/* ----- syntax tokens (themed) ----- */
.token.comment, .token.prolog, .token.doctype, .token.cdata {
    color: var(--code-comment);
    font-style: italic;
}
.token.punctuation { color: var(--code-punct); }
.token.namespace { opacity: 0.7; }
.token.property, .token.tag, .token.constant, .token.symbol, .token.deleted {
    color: var(--code-tag);
}
.token.boolean, .token.number { color: var(--code-number); }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {
    color: var(--code-string);
}
.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string {
    color: var(--code-punct);
}
.token.atrule, .token.attr-value, .token.keyword { color: var(--code-keyword); }
.token.function, .token.class-name { color: var(--code-fn); }
.token.regex, .token.important, .token.variable { color: var(--code-var); }
.token.important, .token.bold { font-weight: bold; }
.token.italic { font-style: italic; }
.token.entity { cursor: help; }

/* scrollbar in code block */
pre.mac-code::-webkit-scrollbar { height: 8px; }
pre.mac-code::-webkit-scrollbar-track { background: transparent; }
pre.mac-code::-webkit-scrollbar-thumb {
    background: var(--code-line-border);
    border-radius: 4px;
}
pre.mac-code::-webkit-scrollbar-thumb:hover {
    background: var(--code-line-num);
}

/* fallback: inline <code> still looks nice */
:not(pre) > code {
    background: rgba(135, 131, 120, 0.15);
    color: #eb5757;
    border-radius: 3px;
    padding: 0.1em 0.3em;
    font-size: 0.92em;
    font-family: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;
}
:root[data-theme="light"] :not(pre) > code { color: #c0392b; background: rgba(192, 57, 43, 0.08); }

/* ensure prism tokens inside pre are not affected by theme's <code> override */
pre.mac-code > code,
pre.mac-code code {
    background: transparent !important;
    color: inherit;
    padding: 0;
    font-size: inherit;
    white-space: pre;
}
pre.mac-code > code {
    display: inline-block;
    min-width: max-content;
    font: inherit;
    line-height: inherit;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (max-width: 560px) {
    .mac-code-shell {
        margin-right: 0;
        margin-left: 0;
    }
    pre.mac-code,
    pre[class*="language-"].mac-code {
        --code-line-height: 1.65;
        padding-right: 14px;
        font-size: 11.5px;
        scrollbar-width: thin;
    }
    .mac-code-title { font-size: 14px; }
}