/* ====================================================================
   PRISM THEME — iocore-token-coupled syntax highlighting
   Tracks the active theme: swap iocore theme, this swaps with it.
   Plugins covered: line-numbers · toolbar · show-language ·
                    copy-to-clipboard · match-braces · command-line
   ==================================================================== */

/* ----- TOKEN COLORS ----- */
code[class*="language-"],
pre[class*="language-"] {
    --pf-code-font-size: var(--io-fs-sm);
    --pf-code-line-height: 1.55;
    color: var(--io-text-primary);
    background: none;
    font-family: var(--io-font-mono);
    font-size: var(--pf-code-font-size);
    line-height: var(--pf-code-line-height);
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

pre[class*="language-"] {
    position: relative;
    padding: 12px 14px;
    margin: 0 0 12px 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--io-surface-overlay);
    border: 1px solid var(--io-border);
    scrollbar-gutter: auto;
}

pre[class*="language-"].pf-codeblock-collapsed {
    max-height: min(46vh, 520px);
    padding-bottom: 44px;
}

pre[class*="language-"].pf-codeblock-expanded {
    max-height: min(72vh, 780px);
    overflow: auto;
}

.pf-codeblock-host {
    position: relative;
    max-width: 100%;
}

pre.pf-codeblock-collapsed::after {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;
    height: 72px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--io-surface-overlay) 72%);
    z-index: 2;
}

.pf-codeblock-toggle {
    all: unset;
    box-sizing: border-box;
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 4;
    height: 26px;
    padding: 0 10px;
    background: var(--io-surface-base);
    border: 1px solid var(--io-accent-dim);
    color: var(--io-accent-bright);
    font-family: var(--io-font-mono);
    font-size: var(--io-fs-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.pf-codeblock-toggle:hover {
    background: var(--io-accent-subtle);
    border-color: var(--io-accent);
}

:not(pre) > code[class*="language-"] {
    padding: 1px 6px;
    background: var(--io-surface-overlay);
    border: 1px solid var(--io-border-subtle);
    color: var(--io-accent);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata        { color: var(--io-text-tertiary); font-style: italic; }
.token.punctuation  { color: var(--io-text-secondary); }
.token.keyword,
.token.atrule,
.token.important,
.token.tag          { color: var(--io-accent); font-weight: 600; }
.token.string,
.token.char,
.token.attr-value,
.token.regex        { color: var(--io-accent-bright); }
.token.number,
.token.boolean,
.token.constant     { color: var(--io-info); }
.token.function,
.token.class-name   { color: var(--io-info); }
.token.operator,
.token.entity,
.token.url          { color: var(--io-text-secondary); }
.token.property,
.token.symbol,
.token.deleted      { color: var(--io-error); }
.token.builtin,
.token.inserted     { color: var(--io-success); }
.token.namespace    { opacity: 0.7; }
.token.italic       { font-style: italic; }
.token.bold         { font-weight: 700; }

/* ----- PLUGIN: line-numbers -----
   Row height MUST inherit pre's line-height exactly or the counter drifts.
   Setting explicit line-height on the rows wrapper guarantees alignment
   even when iocore's --io-text-* tokens are bumped.
*/
pre[class*="language-"].line-numbers {
    position: relative;
    padding-left: 3.8em;
    counter-reset: linenumber;
}
pre[class*="language-"].line-numbers > code {
    position: relative;
    display: block;
    min-width: max-content;
    white-space: inherit;
    line-height: var(--pf-code-line-height);
}
.line-numbers .line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 0;
    left: -3.8em;
    width: 3em;
    border-right: 1px solid var(--io-border);
    user-select: none;
    font-family: var(--io-font-mono);
    font-size: 100%;
    line-height: inherit;
    letter-spacing: -1px;
}
.line-numbers-rows > span {
    display: block;
    counter-increment: linenumber;
    pointer-events: none;
    height: auto;
    font-size: 100%;
    line-height: inherit;
}
.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: var(--io-text-disabled);
    display: block;
    padding-right: 0.8em;
    text-align: right;
    height: auto;
    font-size: 100%;
    line-height: inherit;
}

/* ----- PLUGIN: toolbar (base for show-language + copy) ----- */
div.code-toolbar {
    position: relative;
}
div.code-toolbar > .toolbar {
    position: absolute;
    z-index: 10;
    top: 6px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--io-transition-base);
}
div.code-toolbar:hover > .toolbar,
div.code-toolbar:focus-within > .toolbar { opacity: 1; }

div.code-toolbar > .toolbar > .toolbar-item {
    display: inline-flex;
}
div.code-toolbar > .toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > span {
    all: unset;
    cursor: pointer;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    background: var(--io-surface-base);
    border: 1px solid var(--io-border);
    color: var(--io-text-secondary);
    font-family: var(--io-font-mono);
    font-size: var(--io-fs-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color var(--io-transition-base),
                border-color var(--io-transition-base),
                background-color var(--io-transition-base);
}
div.code-toolbar > .toolbar > .toolbar-item > button:hover,
div.code-toolbar > .toolbar > .toolbar-item > a:hover,
div.code-toolbar > .toolbar > .toolbar-item > span:hover {
    color: var(--io-accent-bright);
    border-color: var(--io-accent-dim);
    background: var(--io-accent-subtle);
}
/* show-language label is non-interactive */
div.code-toolbar > .toolbar > .toolbar-item > span {
    cursor: default;
    color: var(--io-text-tertiary);
}
div.code-toolbar > .toolbar > .toolbar-item > span:hover {
    color: var(--io-text-tertiary);
    background: var(--io-surface-base);
    border-color: var(--io-border);
}

/* ----- CUSTOM COPY BUTTON (registered via Prism.plugins.toolbar.registerButton) ----- */
div.code-toolbar > .toolbar > .toolbar-item > button.pf-copy-btn[data-state="ok"] {
    color: var(--io-success);
    border-color: var(--io-success);
    background: var(--io-success-subtle);
}
div.code-toolbar > .toolbar > .toolbar-item > button.pf-copy-btn[data-state="err"] {
    color: var(--io-error);
    border-color: var(--io-error);
    background: var(--io-error-subtle);
}

/* ----- PLUGIN: match-braces ----- */
.token.punctuation.brace-hover,
.token.punctuation.brace-selected {
    outline: 1px solid var(--io-accent);
    background: var(--io-accent-subtle);
}
.rainbow-braces .token.punctuation.brace-level-1,
.rainbow-braces .token.punctuation.brace-level-5,
.rainbow-braces .token.punctuation.brace-level-9  { color: var(--io-accent); }
.rainbow-braces .token.punctuation.brace-level-2,
.rainbow-braces .token.punctuation.brace-level-6,
.rainbow-braces .token.punctuation.brace-level-10 { color: var(--io-info); }
.rainbow-braces .token.punctuation.brace-level-3,
.rainbow-braces .token.punctuation.brace-level-7,
.rainbow-braces .token.punctuation.brace-level-11 { color: var(--io-success); }
.rainbow-braces .token.punctuation.brace-level-4,
.rainbow-braces .token.punctuation.brace-level-8,
.rainbow-braces .token.punctuation.brace-level-12 { color: var(--io-warning); }

/* ----- PLUGIN: command-line ----- */
.command-line-prompt {
    border-right: 1px solid var(--io-border);
    display: block;
    float: left;
    font-size: 100%;
    letter-spacing: -1px;
    margin-right: 1em;
    pointer-events: none;
    user-select: none;
}
.command-line-prompt > span:before {
    color: var(--io-text-disabled);
    content: ' ';
    display: block;
    padding-right: 0.8em;
}
.command-line-prompt > span[data-user]:before {
    content: '[' attr(data-user) '@' attr(data-host) '] $';
    color: var(--io-info);
}
.command-line-prompt > span[data-user="root"]:before {
    content: '[' attr(data-user) '@' attr(data-host) '] #';
    color: var(--io-error);
}
.command-line-prompt > span[data-prompt]:before {
    content: attr(data-prompt);
    color: var(--io-accent);
}