/*
 * Styles of the site that Tailwind classes cannot give: texts written in the page editor (their tags have no
 * classes) and keyframes of animations. Linked from the "header" chunk; templates have no <style> of their own.
 *
 * Unlayered rules win over Tailwind classes; rules in @layer base lose to them (as with Tailwind's base styles).
 */

/* Text of artFull, shopFull, workFull pages: <article class="text-flow">. */
.text-flow p { margin: 0 0 16px; }
.text-flow a { color: #f9a8d4; text-decoration: underline; text-decoration-color: rgb(236 72 153 / .5); text-underline-offset: 4px; transition: all .1s ease-out; }
.text-flow a:hover { color: #fff; }

/* Note "about the work" on workPure pages: <article class="text-info">. */
.text-info p { margin: 0 0 16px; }
.text-info p:last-child { margin: 0; }

/* Blog article (blogFull): the text on a white sheet <main class="text-blog">; a class on a tag in the text wins over these. */
@layer base {
    .text-blog section { margin-bottom: 2rem; }
    .text-blog section:last-child { margin-bottom: 0; }
    .text-blog article h2 { margin-bottom: 1.5rem; font-size: 1.875rem; line-height: 3rem; font-weight: 700; color: oklch(59.2% 0.249 0.584); }
    .text-blog article h3 { margin-bottom: 1rem; font-size: 1.5rem; line-height: 2.5rem; font-weight: 700; color: oklch(65.6% 0.241 354.308); }
    .text-blog article h4 { margin-bottom: 1rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; }
    .text-blog article h5 { margin-bottom: 1rem; font-weight: 700; }
    .text-blog article p { margin-bottom: 1rem; }
    .text-blog article p:last-child { margin-bottom: 0; }
    .text-blog article ul { list-style-type: disc; padding-left: 2rem; padding-bottom: 1.5rem; }
    .text-blog article ol { list-style-type: decimal; padding-left: 3rem; padding-bottom: 1.5rem; }
    .text-blog article :is(ul, ol) > :not(:last-child) { margin-bottom: 1rem; }
    .text-blog article section a { color: oklch(54.6% 0.245 262.881); border-bottom: 1px solid oklch(80.9% 0.105 251.813); transition: all .15s cubic-bezier(.4, 0, .2, 1); }
    /* Photos of an article: as rounded-xl mt-4 mb-10 unless the photo has its own classes. */
    .text-blog article section img { border-radius: 0.75rem; margin-top: 1rem; margin-bottom: 2.5rem; }
    .text-blog article section a:hover { color: oklch(59.2% 0.249 0.584); border-color: oklch(82.3% 0.12 346.018); }
    /* Code of an article: `P@ssword123` in the text is a grey chip, a ``` block is a black panel. */
    .text-blog article section code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875em; padding: .125rem .4rem; border-radius: .375rem; background: oklch(97% 0 0); border: 1px solid #05df7220; color: #02572d; overflow-wrap: anywhere; }
    /* A <pre> with its own classes (bg-black p-1.5…), or whose <code> has them, is left as written; plain ones and blocks with a language get the panel. */
    .text-blog article section :is(pre:not([class]):not(:has(> code[class])), pre[class*="language-"], pre.code-box) { margin: 1.5rem 0 2rem; padding: 1.25rem 1.5rem; border-radius: 1rem; background: oklch(14.5% 0 0); color: oklch(92.2% 0 0); overflow-x: auto; font-size: .875rem; line-height: 1.6; }
    .text-blog article section pre code { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; overflow-wrap: normal; }
    /* Tables of a markdown article (<div class="md-table">): black head, soft rows; on a phone every row is a card. */
    .text-blog .md-table { margin: 2rem 0 2.5rem; overflow-x: auto; border: 1px solid oklch(92.2% 0 0); }
    .text-blog .md-table table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.5rem; }
    .text-blog .md-table th { background: oklch(14.5% 0 0); color: oklch(89.9% 0.061 343.231); padding: .875rem 1.25rem; text-align: left; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
    .text-blog .md-table td { padding: .875rem 1.25rem; border-top: 1px solid oklch(92.2% 0 0); vertical-align: top; }
    .text-blog .md-table tbody tr:nth-child(even) { background: oklch(98.5% 0 0); }
    .text-blog .md-table tbody tr { transition: background-color .15s; }
    .text-blog .md-table tbody tr:hover { background: oklch(97.1% 0.014 343.198); }
    .text-blog .md-table td:first-child { font-weight: 700; color: oklch(59.2% 0.249 0.584); white-space: nowrap; }
    .text-blog .md-table :is(th, td).text-center { text-align: center; }
    .text-blog .md-table :is(th, td).text-right { text-align: right; }
    .text-blog .md-table code { font-size: .8125rem; white-space: nowrap; }
    @media (max-width: 639px) {
        .text-blog .md-table { border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
        .text-blog .md-table :is(table, tbody, tr, td) { display: block; }
        .text-blog .md-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
        .text-blog .md-table tbody tr { margin-bottom: .75rem; border: 1px solid oklch(92.2% 0 0); border-radius: 1rem; overflow: hidden; background: #fff; box-shadow: 0 6px 18px -10px rgb(0 0 0 / .15); }
        .text-blog .md-table tbody tr:nth-child(even), .text-blog .md-table tbody tr:hover { background: #fff; }
        .text-blog .md-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .625rem 1rem; text-align: right !important; }
        .text-blog .md-table td:first-child { border-top: 0; background: oklch(14.5% 0 0); color: oklch(89.9% 0.061 343.231); }
        .text-blog .md-table td::before { content: attr(data-label); flex: none; max-width: 45%; text-align: left; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: oklch(55.6% 0 0); }
        .text-blog .md-table td:first-child::before { color: oklch(70.8% 0 0); }
        .text-blog .md-table td:first-child strong { color: #fff; }
    }
}

/*
 * Code blocks with a language (code.js; blog articles and /ds): line numbers in their own column, the language and
 * "Копіювати" in the corner, colours of highlight.js. Unlayered, so the block is always the dark panel the colours
 * are made for, whatever classes the text gave its <pre> (bg-gray-100 p-4…).
 */
pre.code-box { position: relative; display: flex; margin: 1.5rem 0 2rem; padding: 0; overflow: hidden; border-radius: 1rem; background: oklch(14.5% 0 0); color: oklch(92.2% 0 0); font-size: .875rem; line-height: 1.6; }
pre.code-box > code { display: block; flex: 1; min-width: 0; margin: 0; overflow-x: auto; padding: 2.25rem 1.5rem 1.25rem 1rem; border: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; white-space: pre; overflow-wrap: normal; }
.code-box, .code-box code, .code-lines { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.code-lines { flex: none; padding: 2.25rem .875rem 1.25rem 1.25rem; min-width: 3.25rem; text-align: right; white-space: pre; color: oklch(43.9% 0 0); border-right: 1px solid rgb(255 255 255 / .08); user-select: none; font-variant-numeric: tabular-nums; }
.code-bar { user-select: none; position: absolute; top: .375rem; right: .5rem; display: flex; align-items: center; gap: .5rem; font-size: .6875rem; line-height: 1rem; }
.code-name { font-weight: 700; letter-spacing: .1em; color: oklch(82.3% 0.12 346.018 / .7); }
.code-copy { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .5rem; border-radius: .375rem; color: oklch(70.8% 0 0); cursor: pointer; transition: color .15s, background-color .15s; }
.code-copy:hover { color: #fff; background: rgb(255 255 255 / .08); }
.code-copy svg { width: .875rem; height: .875rem; }
.code-copy.is-done { color: oklch(87.1% 0.15 154.449); }
.code-copy .i-ok, .code-copy.is-done .i-copy { display: none; }
.code-copy.is-done .i-ok { display: block; }
.code-box .hljs { color: oklch(92.2% 0 0); }
.code-box :is(.hljs-tag, .hljs-punctuation, .hljs-meta) { color: oklch(70.8% 0 0); }
.code-box :is(.hljs-name, .hljs-selector-tag, .hljs-section) { color: oklch(71.8% 0.202 349.761); }
.code-box :is(.hljs-attr, .hljs-attribute, .hljs-property) { color: oklch(82.8% 0.111 230.318); }
.code-box :is(.hljs-string, .hljs-regexp) { color: oklch(89.7% 0.196 126.665); }
.code-box :is(.hljs-keyword, .hljs-built_in, .hljs-type, .hljs-doctag) { color: oklch(81.1% 0.111 293.571); }
.code-box :is(.hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet) { color: oklch(87.9% 0.169 91.605); }
.code-box :is(.hljs-title, .hljs-selector-class, .hljs-selector-id) { color: oklch(82.3% 0.12 346.018); }
.code-box :is(.hljs-variable, .hljs-template-variable, .hljs-params) { color: oklch(83.7% 0.128 66.29); }
.code-box :is(.hljs-comment, .hljs-quote) { color: oklch(55.6% 0 0); font-style: italic; }
.code-box .hljs-deletion { color: oklch(71.2% 0.194 13.428); }
.code-box .hljs-addition { color: oklch(84.5% 0.143 164.978); }


/* Services page: black background under the header, the running line and the soft appearance. */
.page:has(.page-services) { background-color: black; }
.marquee-track { display: flex; width: max-content; animation: marquee 20s linear infinite; }
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.fade-in { animation: fadeIn 1.5s ease-in-out; }
@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}