/* mirko.vip — styl 2020: Tahoma, płaskie karty, zielone plusy */

/* ---------- @font-face ---------- */
@font-face { font-family: "Tahoma"; src: url("/static/fonts/tahoma-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; }
@font-face { font-family: "Tahoma"; src: url("/static/fonts/tahoma-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; }

@font-face { font-family: "Verdana"; src: url("/static/fonts/verdana-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; }
@font-face { font-family: "Verdana"; src: url("/static/fonts/verdana-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; }
@font-face { font-family: "Verdana"; src: url("/static/fonts/verdana-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; }
@font-face { font-family: "Verdana"; src: url("/static/fonts/verdana-bolditalic.woff2") format("woff2"); font-weight: 700; font-style: italic; }

@font-face { font-family: "Lato"; src: url("/static/fonts/lato-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; }
@font-face { font-family: "Lato"; src: url("/static/fonts/lato-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; }
@font-face { font-family: "Lato"; src: url("/static/fonts/lato-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; }
@font-face { font-family: "Lato"; src: url("/static/fonts/lato-bolditalic.woff2") format("woff2"); font-weight: 700; font-style: italic; }

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

/* ---------- paleta ---------- */
:root {
    --bg: #f4f4f4;
    --card: #fff;
    --card-alt: #f8f8f8;
    --card-inline: #f4f7fa;
    --border: #dfe3e6;
    --border-soft: #f0f0f0;
    --text: #333;
    --text-soft: #555;
    --muted: #767676;
    --link: #367da9;
    --link-hover: #2a6080;
    --vote: #339933;
    --down: #cc3333;
    --quote-border: #ccc;
    --quote-text: #666;
    --code-bg: #f0f0f0;
    --btn-bg: #e0e0e0;
    --btn-border: #ccc;
    --nsfw: #ff5917;
    --thread-line: #ddd;
    color-scheme: light;
}
body.dark {
    --bg: #16191d;
    --card: #23272c;
    --card-alt: #2a2f35;
    --card-inline: #1e2228;
    --border: #343a41;
    --border-soft: #343a41;
    --text: #c8cdd2;
    --text-soft: #a8adb2;
    --muted: #8f8f8f;
    --link: #6a9dc0;
    --link-hover: #8db8d6;
    --vote: #71be71;
    --down: #e0726e;
    --quote-border: #555;
    --quote-text: #999;
    --code-bg: #2a2f35;
    --btn-bg: #444;
    --btn-border: #666;
    --nsfw: #d9534f;
    --thread-line: #3a3a3a;
    color-scheme: dark;
}

/* ---------- baza ---------- */
html { font-size: 15px; }

body {
    background: var(--bg);
    color: var(--text);
    font-size: 1rem;
    line-height: 1.55;
    padding: 0.615rem;
}

body.font-tahoma  { font-family: Tahoma, Verdana, "DejaVu Sans", Arial, sans-serif; }
body.font-verdana { font-family: Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif; }
body.font-arial   { font-family: Arial, Helvetica, "Liberation Sans", sans-serif; }
body.font-lato    { font-family: Lato, sans-serif; }

body.font-arial .entry-body,
body.font-arial .comment .comment-body { letter-spacing: 0.01em; }

.entry-body,
.comment-body {
    line-height: 1.267;
}


a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
}

/* ---------- header / nav ---------- */
.site-header {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    padding: 0.462rem 0.769rem 1.077rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.308rem 0;
    position: sticky;
    top: 0;
    z-index: 500;
}
.site-header::before {
    content: "";
    position: absolute;
    inset: 0 0 0.615rem 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 2px;
    z-index: -1;
}
.site-header h1 { font-size: 1.077rem; display: inline; }
.site-header h1 a { color: var(--text); font-weight: bold; }
.site-header nav { display: inline; margin-left: 0.923rem; }
.site-header nav a {
    margin-right: 0.615rem;
    color: var(--muted);
    font-size: 0.846rem;
    text-transform: lowercase;
}
.site-header nav a:hover { color: var(--link); }
.theme-toggle {
    margin-left: auto;
    font-size: 0.846rem;
    color: var(--muted);
    cursor: pointer;
}

/* sub-nav (tag sort, profile tabs) */
.sub-nav { font-size: 0.923rem; font-weight: normal; margin-left: 0.615rem; }
.sub-nav a { color: var(--muted); margin-right: 0.615rem; }
.sub-nav a:hover { color: var(--link); }
.sub-nav a.active { color: var(--link); font-weight: bold; text-decoration: underline; }
.profile-tabs { margin-bottom: 0.615rem; }

/* ---------- layout / sidebars ---------- */
/* .content carries the width setting (cookie); sidebars are a fixed-width
   add-on to either side and never affect the content's own width. */
.layout {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sidebar { display: none; }

.content {
    width: 100%;
    max-width: 700px;
    min-width: 0;
}

@media (min-width: 900px) {
    .layout {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 0 1.2rem;
    }
    /* grid zamiast flex: kolumny sidebarów są zawsze zarezerwowane (200px),
       nawet gdy tylko jeden sidebar jest włączony w ustawieniach — dzięki temu
       .content zawsze trafia w ten sam środek co niezależnie centrowany
       .site-header, więc krawędzie belki i kart się pokrywają. */
    body.has-sidebars .layout {
        display: grid;
        grid-template-columns: 200px minmax(0, 1fr) 200px;
        column-gap: 1.2rem;
        align-items: start;
        max-width: calc(200px + 1.2rem + var(--content-width, 700px) + 1.2rem + 200px);
        margin: 0 auto;
    }
    body.has-sidebars .layout .content {
        grid-column: 2;
        justify-self: center;
    }
    body.has-sidebars .layout .sidebar-left { grid-column: 1; }
    body.has-sidebars .layout .sidebar-right { grid-column: 3; }
    body.has-sidebars .sidebar {
        display: block;
        width: 200px;
        position: sticky;
        top: 3.6rem;
    }
}

.sidebar {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 0.615rem 0.769rem;
}
.sidebar-title {
    font-size: 0.923rem;
    font-weight: bold;
    color: var(--text);
    margin-bottom: 0.462rem;
    padding-bottom: 0.308rem;
    border-bottom: 1px solid var(--border);
}
.tag-list { list-style: none; }
.tag-list li {
    display: flex;
    align-items: center;
    gap: 0.385rem;
    font-size: 0.846rem;
    padding: 0.231rem 0;
    border-bottom: 1px solid var(--border-soft);
}
.tag-list li:last-child { border-bottom: none; }
.tag-list a { overflow-wrap: anywhere; }
.tag-count { color: var(--muted); font-size: 0.769rem; margin-left: auto; }
.tag-change { font-size: 0.769rem; }
.tag-change.tag-up { color: var(--vote); }
.tag-change.tag-down { color: var(--down); }
.sidebar-edit-link {
    display: block;
    margin-top: 0.462rem;
    font-size: 0.769rem;
    color: var(--muted);
    text-align: right;
}
.sidebar-edit-link:hover { color: var(--link); }

/* ---------- avatars — square, 2020 style ---------- */
.avatar,
.avatar-large {
    border-radius: 0;
    vertical-align: middle;
    border: 1px solid var(--border);
}
.avatar { width: 2.154rem; height: 2.154rem; margin-right: 0.385rem; }
.avatar-large { width: 3.692rem; height: 3.692rem; margin-right: 0.615rem; }

/* ---------- entry / article — flat white card ---------- */
article {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 0.615rem 0.769rem 0.769rem;
    margin-bottom: 1.077rem;
}

.entry-header {
    font-size: 0.923rem;
    color: var(--muted);
    margin-bottom: 0.308rem;
    display: flex;
    align-items: center;
    gap: 0.385rem;
    flex-wrap: wrap;
}
.entry-header .author { font-weight: bold; font-size: 1rem; }
.entry-header .date { color: var(--muted); font-size: 0.846rem; }

.votes-right {
    color: var(--vote);
    font-weight: bold;
    font-size: 1.077rem;
    margin-left: auto;
}

.entry-body,
.comment-body {
    overflow-wrap: break-word;
    font-weight: 400;
    /* line-height i letter-spacing dziedziczone z body */
}
.entry-body { margin: 0.308rem 0; }
.comment-body { margin: 0.154rem 0; }

.entry-title { font-size: 1.077rem; margin: 0.154rem 0 0.308rem; font-weight: bold; }
.entry-title a { color: var(--text); }
.entry-title a:hover { color: var(--link); }
.entry-source { font-size: 0.846rem; color: var(--muted); font-weight: normal; }

/* ---------- media ---------- */
.entry-media img,
.comment-media img {
    display: block;
    max-width: 100%;
    max-height: 36rem;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 0;
}
.entry-media img { margin: 0.462rem 0; }
.comment-media img { max-width: 80%; margin: 0.308rem 0; }

/* entry header gallery: entries-threads entries can carry up to 4 photos
   (the old /entries API this wraps never produced more than one, so this
   was unreachable before — now the single-entry view can hit it) */
.entry-media-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.308rem;
    margin: 0.462rem 0;
}
.entry-media-gallery .entry-media { margin: 0; }
.entry-media-gallery .entry-media img { margin: 0; width: 100%; max-height: 16rem; object-fit: cover; }

.embed-media { max-width: 100%; overflow: hidden; }
.comment-media.embed-media { max-width: 80%; }
.embed-link {
    display: inline-block;
    font-size: 0.923rem;
    overflow-wrap: anywhere;
    margin: 0.462rem 0;
}
.embed-media iframe,
.embed-media video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0.462rem 0;
    border: 0;
}

/* nsfw */
.nsfw-label {
    background: var(--nsfw);
    color: #fff;
    font-size: 0.769rem;
    font-weight: bold;
    padding: 0.077rem 0.308rem;
    border-radius: 2px;
    text-transform: uppercase;
}
.nsfw .entry-media img { filter: blur(16px); }
.nsfw .entry-media img:hover,
.nsfw .entry-media img:focus-visible { filter: none; }

/* ---------- footer / tags ---------- */
.entry-footer {
    font-size: 0.846rem;
    color: var(--muted);
    margin-top: 0.308rem;
    text-transform: lowercase;
}
.entry-footer a { color: var(--muted); }
.entry-footer a:hover { color: var(--link); }
.entry-tags { font-size: 0.923rem; margin-top: 0.154rem; }
.entry-tags a { color: var(--link); }

/* ---------- comments — indented, left border, lighter bg ---------- */
.comment {
    padding: 0.462rem 0.615rem 0.462rem 0.923rem;
    border-left: 2px solid var(--border);
    background: var(--card-alt);
    margin-bottom: 0.308rem;
    border-radius: 0;
}
.comment.op-reply { border-left-color: var(--link); }
.comment-header {
    font-size: 0.846rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 0.385rem;
    flex-wrap: wrap;
}
.comment-header .author { font-weight: bold; font-size: 0.923rem; }

.show-comments-link {
    display: block;
    margin-top: 0.308rem;
    font-size: 0.846rem;
    color: var(--muted);
}
.show-comments-link:hover { color: var(--link); }
.no-comments { font-size: 0.923rem; color: var(--muted); }

/* lista komentarzy — identyczna w streamie (.inline-comments)
   i w widoku wpisu (.comments) */
.comments,
.inline-comments {
    margin: 0.308rem 0;
    padding: 0.308rem 0 0.462rem;
    border-top: 1px solid var(--border-soft);
}
.comments .comment,
.inline-comments .comment {
    margin-left: 0.615rem;
}

/* ---------- comment tree (single-entry view) — new classes only,
   nothing here touches .comment/.comments/.inline-comments above ---------- */

.thread {
    margin: 0.308rem 0;
    padding: 0.308rem 0 0.462rem;
    border-top: 1px solid var(--border-soft);
}

.sort-switch {
    display: flex;
    gap: 0.769rem;
    font-size: 0.846rem;
    margin-bottom: 0.462rem;
}
.sort-switch a { color: var(--muted); }
.sort-switch a:hover { color: var(--link); }
.sort-switch a.active { color: var(--link); font-weight: bold; text-decoration: underline; }

.c {
    padding: 0.462rem 0.615rem;
    margin-bottom: 0.462rem;
    min-width: 0;
}
/* nested comments: no right padding, so every .c-head ends at the same
   x as the top-level one and the votes form one vertical column */
.c-children > .c { padding-right: 0; }
/* no frames in the tree — the only vertical line is .c-children border-left */
.thread .c,
.thread .c-children {
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    box-shadow: none;
}

.c-head {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.385rem;
    flex-wrap: wrap;
    font-size: 0.846rem;
    color: var(--muted);
    cursor: pointer;
    min-width: 0;
}
.c-head::-webkit-details-marker { display: none; }
.c-head::before {
    content: "[-]";
    display: inline-block;
    min-width: 1.8em;
    flex-shrink: 0;
    text-align: center;
    white-space: nowrap;
    color: var(--muted);
}
.c:not([open]) > .c-head::before { content: "[\2195]"; /* [↕] */ }

.c-head .author {
    font-weight: bold;
    font-size: 0.923rem;
    min-width: 0;
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.op-badge {
    background: var(--link);
    color: #fff;
    font-size: 0.692rem;
    font-weight: bold;
    padding: 0.077rem 0.308rem;
    border-radius: 2px;
    flex-shrink: 0;
}
.c-count {
    display: none;
    color: var(--muted);
    font-size: 0.846rem;
}
.c:not([open]) > .c-head .c-count { display: inline; }
/* votes always last in the row (after .c-count), pushed right by margin-left:auto */
.c-head .votes-right { order: 1; }

.c-replyto {
    display: none;
    font-size: 0.769rem;
    color: var(--muted);
    margin: 0.154rem 0;
    overflow-wrap: anywhere;
}
/* VISUAL_MAX = 6 (desktop): from c-d6 (nesting capped at 6) the reply-to
   label becomes the only way to see who a flattened reply answers to */
.c-d6 > .c-replyto {
    display: block;
}

.c-body {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
    margin: 0.308rem 0 0.154rem;
}
.c-body img,
.c-body video,
.c-body iframe {
    max-width: 100%;
    height: auto;
}
.c-body pre,
.c-body code {
    overflow-x: auto;
    max-width: 100%;
}

.c-media,
.c-media-gallery {
    max-width: 100%;
    overflow: hidden;
}
.c-media img {
    display: block;
    max-width: 100%;
    max-height: 36rem;
    height: auto;
    border: 1px solid var(--border);
    margin: 0.308rem 0;
}
.c-media.embed-media {
    max-width: 100%;
}
.c-media iframe,
.c-media video {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0.462rem 0;
    border: 0;
}
.c-media .embed-link {
    display: inline-block;
    font-size: 0.923rem;
    overflow-wrap: anywhere;
    margin: 0.462rem 0;
}
/* gallery: 1 photo = full width (handled above); 2-4 photos = 2-col grid */
.c-media-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.308rem;
    margin: 0.308rem 0;
}
.c-media-gallery .c-media { margin: 0; }
.c-media-gallery .c-media img { margin: 0; width: 100%; max-height: 16rem; object-fit: cover; }

/* indentation: nested .c-children margin + a thread line on the left —
   VISUAL_MAX = 6: from c-d6 onward, no more margin/padding/line, the
   thread just keeps going flat and relies on .c-replyto for context */
.c-children {
    margin-left: 0.75rem;
    padding-left: 0.6rem;
    min-width: 0;
}
.c-children.c-flat,
.c-children.c-d6 {
    margin-left: 0;
    padding-left: 0;
}
.thread .c-children:not(.c-flat) {
    border-left: 2px solid var(--thread-line);
}
.c-children > .c:last-child { margin-bottom: 0; }

/* depth >= 2: smaller avatars (d0/d1 keep the default .avatar size) */
.c-d2 .c-head .avatar,
.c-d3 .c-head .avatar,
.c-d4 .c-head .avatar,
.c-d5 .c-head .avatar,
.c-d6 .c-head .avatar {
    width: 24px;
    height: 24px;
}

/* top-level threads: the only horizontal line in the tree — a faint
   separator, with equal air above and below it */
.thread > .c {
    padding-bottom: 0.923rem;
    margin-bottom: 0.462rem;
    border-bottom: 1px solid var(--thread-line);
}
.thread > .c:last-child {
    padding-bottom: 0.462rem;
    margin-bottom: 0;
    border-bottom: none;
}

/* ---------- user profile ---------- */
.profile-header {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 0.769rem;
    margin-bottom: 0.615rem;
    display: flex;
    align-items: flex-start;
    gap: 0.769rem;
    flex-wrap: wrap;
}
.profile-header .username { font-size: 1.231rem; font-weight: bold; }
.profile-header .meta { font-size: 0.846rem; color: var(--muted); }
.profile-header .about { font-size: 0.923rem; color: var(--text-soft); margin-top: 0.308rem; }

/* ---------- pagination ---------- */
.pagination { padding: 0.769rem 0; font-size: 0.923rem; color: var(--muted); }
.pagination a { margin-right: 0.769rem; color: var(--link); }

/* ---------- footer ---------- */
.footer-info { margin-top: 1.2rem; text-align: center; padding: 0.769rem 0; font-size: 0.923rem; color: var(--muted); }
.footer-info a { color: var(--link); }

/* ---------- page title ---------- */
.page-title {
    font-size: 1.077rem;
    font-weight: bold;
    color: var(--text);
    margin-bottom: 0.615rem;
    padding-bottom: 0.308rem;
    border-bottom: 1px solid var(--border);
}

/* ---------- about page ---------- */
.about-content {
    max-width: 700px;
    margin: 0 auto;
}
.about-content h2 {
    font-size: 1rem;
    color: var(--text);
    margin: 1.2rem 0 0.462rem;
}
.about-content h2:first-child { margin-top: 0; }
.about-content p {
    margin: 0.462rem 0;
    color: var(--text-soft);
}
.about-content strong { color: var(--text); }
.about-content .about-updated {
    margin-top: 1.2rem;
    font-size: 0.846rem;
    color: var(--muted);
}

/* ---------- wykop markdown ---------- */
blockquote {
    border-left: 3px solid var(--quote-border);
    padding: 0.154rem 0.615rem;
    margin: 0.308rem 0;
    color: var(--quote-text);
    font-style: italic;
}
code {
    font-family: monospace;
    background: var(--code-bg);
    color: var(--text);
    padding: 0.077rem 0.308rem;
    border-radius: 2px;
    font-size: 0.923rem;
}
.spoiler-btn {
    background: var(--btn-bg);
    color: var(--text);
    border: 1px solid var(--btn-border);
    padding: 0.308rem 0.923rem;
    cursor: pointer;
    font-size: 0.923rem;
    font-family: inherit;
    border-radius: 2px;
    margin: 0.308rem 0;
    display: block;
}
.spoiler-content { margin: 0.308rem 0; }
strong { font-weight: bold; }
em { font-style: italic; }

/* ---------- ankiety (survey) ---------- */
.survey {
    margin: 0.462rem 0;
    padding: 0.462rem 0.769rem;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: var(--card-alt);
    font-size: 0.923rem;
}
.survey-question { font-weight: bold; margin-bottom: 0.308rem; }
.survey-answers { list-style: none; padding: 0; margin: 0; }
.survey-answers li { padding: 0.154rem 0; }
.survey-count { color: var(--muted); }

/* ---------- settings form ---------- */
.settings-form fieldset {
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 0.769rem 0.923rem;
    margin-bottom: 0.769rem;
}
.settings-form legend {
    font-size: 0.923rem;
    font-weight: bold;
    color: var(--text);
    padding: 0 0.308rem;
}
.settings-form label {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.769rem;
    color: var(--text-soft);
}
.settings-form label:last-child { margin-bottom: 0; }
.checkbox-label { display: flex; align-items: center; gap: 0.462rem; }
.radio-label { display: flex; align-items: center; gap: 0.462rem; margin-bottom: 0.308rem; }
.radio-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
}
.field-hint { font-size: 0.846rem; color: var(--muted); margin: -0.462rem 0 0.769rem; }
.settings-form input[type="text"] {
    display: block;
    width: 100%;
    margin-top: 0.231rem;
    padding: 0.308rem 0.462rem;
    font-size: 1rem;
    font-family: inherit;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: var(--card);
    color: var(--text);
}
.settings-form input[type="text"]:focus { outline: none; border-color: var(--link); }
.settings-form button {
    padding: 0.385rem 1.231rem;
    font-size: 1rem;
    font-family: inherit;
    background: var(--link);
    color: #fff;
    border: none;
    border-radius: 2px;
    cursor: pointer;
}
.settings-form button:hover { background: var(--link-hover); }

/* embed mode radios: input/label/hint są płaskim rodzeństwem (nie zagnieżdżone),
   żeby ~ mogło dosięgnąć .frontend-fields; jeśli selektor nie zadziała,
   .frontend-fields po prostu zostaje widoczne (pożądany fallback). */
.embed-mode-fieldset .embed-mode-radio { margin: 0 0.462rem 0 0; vertical-align: middle; }
.embed-mode-fieldset .embed-mode-option {
    display: inline;
    margin-bottom: 0;
    font-size: 0.923rem;
    color: var(--text-soft);
    cursor: pointer;
}
.embed-mode-fieldset .field-hint { margin: 0.154rem 0 0.769rem 1.6rem; }
.embed-mode-fieldset .frontend-fields {
    display: none;
    margin-top: 0.462rem;
    padding-top: 0.615rem;
    border-top: 1px solid var(--border);
}
#embed-mode-frontends:checked ~ .frontend-fields { display: block; }

/* ---------- lightbox ---------- */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    z-index: 1000;
    cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img {
    max-width: 100%;
    max-height: 100%;
    border: 1px solid var(--border);
    cursor: default;
}
.lightbox-close {
    position: absolute;
    top: 0.769rem;
    right: 1.077rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.308rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.308rem;
}
.lightbox-close:hover { color: var(--link-hover); }

/* ---------- mobile ---------- */
/* tylko baza rem — reszta skaluje się proporcjonalnie */
@media (max-width: 600px) {
    html { font-size: 12px; }
    body { padding: 0.333rem; }
    .comment { padding-left: 0.667rem; }
    .site-header nav a { margin-right: 0.417rem; }
    .comment-media img,
    .comment-media.embed-media { max-width: 100%; }

    /* comment tree: tighter indent, VISUAL_MAX effectively 4 instead of 6 */
    .c-children {
        margin-left: 0.25rem;
        padding-left: 0.4rem;
    }
    .c-children.c-d4,
    .c-children.c-d5,
    .c-children.c-flat,
    .c-children.c-d6 {
        margin-left: 0;
        padding-left: 0;
    }
    /* d4/d5 are flat on mobile too — no line, it would hug the text */
    .thread .c-children.c-d4,
    .thread .c-children.c-d5 {
        border-left: none;
    }
    .c-d2 .c-head .avatar,
    .c-d3 .c-head .avatar,
    .c-d4 .c-head .avatar,
    .c-d5 .c-head .avatar,
    .c-d6 .c-head .avatar {
        width: 20px;
        height: 20px;
    }
    .c-d4 > .c-replyto,
    .c-d5 > .c-replyto,
    .c-d6 > .c-replyto {
        display: block;
    }
    .c-head .author { max-width: 30vw; }
    .c-media-gallery { grid-template-columns: 1fr 1fr; gap: 0.25rem; }
    .c-media-gallery .c-media img { max-height: 10rem; }
    .entry-media-gallery { grid-template-columns: 1fr 1fr; gap: 0.25rem; }
    .entry-media-gallery .entry-media img { max-height: 10rem; }
}