/* ── Blog: list + post detail ──────────────────────────────────────────────
   Reuses the Mac System 7 chrome tokens (tokens.css): black hairline
   borders, flat title-bar boxes, no radius except buttons, hard-edged
   shadows only on outer/floating elements. No new breakpoints: the rest of
   the site is a fixed 820px desktop-only layout, so this doesn't add any
   either.
*/

/* ── Banner ─────────────────────────────────────────────────────────────── */
/* Reuses .welcome-card / .card-header from home.css so the blog page matches
   the home page exactly — same outer window, same title-bar recipe. */

.blog-banner-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.blog-banner-intro {
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--mac-black);
}

.pixel-icon {
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.pixel-icon-inline {
    width: 12px;
    height: 12px;
    image-rendering: pixelated;
    vertical-align: -1px;
    margin-right: 4px;
}

/* ── Two-column blog layout (list + post share this shell) ───────────────── */

#blog-content,
#post-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

#blog-main,
#post-main {
    flex: 1;
    min-width: 0;
}

#blog-sidebar,
#post-sidebar {
    width: 180px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 10px;
    align-self: flex-start;
    max-height: calc(100vh - 20px);
    overflow-y: auto;
}

/* Post page: #toc-list handles its own internal scroll (below), so the
   column itself shouldn't also scroll — that would let Info/Share drift
   out of view above/below instead of staying put. The blog-list sidebar
   has no such per-box scroll, so it keeps overflow-y: auto above. */
#post-sidebar {
    overflow-y: hidden;
}

/* ── Sidebar boxes (shared by list + post) — clone of .panel-box/.panel-header */

.blog-sidebar-box {
    background: var(--mac-white);
    border: 1px solid var(--mac-black);
    border-radius: 0;
    overflow: hidden;
    /* Flex children of the sticky column default to flex-shrink: 1, which
       squeezes this box below its content height (clipped by overflow:
       hidden above) once the column runs out of room. Only #toc-box should
       shrink/scroll internally — it overrides this via its higher-
       specificity ID rule below. */
    flex-shrink: 0;
}

.blog-sidebar-box h4 {
    display: flex;
    align-items: center;
    background: var(--mac-grey-2);
    color: var(--mac-black);
    font-family: var(--font-chrome);
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 5px 8px;
    border-bottom: 3px solid;
    border-image: var(--rainbow-gradient) 1;
}

.blog-sidebar-box ul {
    list-style: none;
}

.blog-sidebar-box li {
    border-bottom: 1px solid var(--mac-grey-4);
}

.blog-sidebar-box li:last-child {
    border-bottom: none;
}

.blog-sidebar-box a {
    display: block;
    padding: 5px 8px;
    font-size: 9.5px;
    font-weight: normal;
    color: var(--mac-black);
    text-decoration: none;
    background: var(--mac-white);
}

.blog-sidebar-box li:nth-child(even) a {
    background: var(--mac-grey-1);
}

.blog-sidebar-box a:hover {
    background: var(--mac-black);
    color: var(--mac-white);
}

.blog-sidebar-box a.blog-cat-active {
    background: var(--mac-black);
    color: var(--mac-white);
}

/* "Post Info" box: plain label/value lines, some with an inline link mixed
   into the same <li> as text — these can't use the block pill-button style
   above (that's for lists made of one <a> per <li>, like Categories/Share). */
.sidebar-info-list li {
    padding: 5px 8px;
    font-size: 9.5px;
    font-weight: bold;
    color: var(--mac-black);
    text-transform: uppercase;
}

.sidebar-info-list a {
    display: inline;
    padding: 0;
    background: none;
    color: var(--mac-black);
    text-decoration: underline;
}

/* ── Post rows (blog list) ─────────────────────────────────────────────── */
/* Plain rows inside a single .welcome-card, no per-item radius/shadow —
   same idiom as home's .news-table rows, just with a thumbnail column. */

.blog-post-row {
    display: flex;
    padding: 10px 12px;
    border-bottom: 1px dashed var(--mac-grey-4);
}

.blog-post-row:last-of-type {
    border-bottom: none;
}

.blog-post-thumb-link {
    flex-shrink: 0;
    display: block;
    margin-right: 10px;
}

.blog-post-thumb {
    width: 90px;
    height: 90px;
    object-fit: cover;
    display: block;
    border: 1px solid var(--mac-black);
    box-shadow: var(--shadow-flat-1);
}

.blog-post-thumb-placeholder {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    margin-right: 10px;
    background-image: repeating-linear-gradient(45deg,
            var(--mac-grey-1) 0 8px,
            var(--mac-grey-2) 8px 16px);
    border: 1px solid var(--mac-black);
    box-shadow: var(--shadow-flat-1);
}

.blog-post-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.blog-post-meta {
    font-family: var(--font-chrome);
    font-size: 9px;
    font-weight: bold;
    color: var(--mac-grey-6);
    text-transform: uppercase;
    margin-bottom: 3px;
}

.blog-post-meta a {
    color: var(--mac-black);
    text-decoration: none;
}

.blog-post-meta a:hover {
    text-decoration: underline;
}

.blog-post-body h3 {
    font-size: 11.5px;
    line-height: 1.3;
    margin-bottom: 4px;
}

.blog-post-body h3 a {
    color: var(--mac-black);
    text-decoration: none;
}

.blog-post-body h3 a:hover {
    text-decoration: underline;
}

.blog-post-excerpt {
    font-size: 10px;
    line-height: 1.4;
    color: var(--mac-grey-6);
    flex: 1;
}

.blog-read-more {
    align-self: flex-start;
    margin-top: 6px;
    font-family: var(--font-chrome);
    font-size: 8.5px;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--mac-black);
    background: var(--mac-grey-2);
    border: 1px solid var(--mac-black);
    border-radius: var(--radius-button);
    padding: 3px 8px;
    text-decoration: none;
}

.blog-read-more:hover {
    background: var(--mac-black);
    color: var(--mac-white);
}

/* ── Pagination ────────────────────────────────────────────────────────── */
/* Footer bar inside the .welcome-card, same idiom as .news-footer/.alert-footer. */

.blog-pagination-footer {
    background: var(--mac-grey-2);
    border-top: 1px solid var(--mac-black);
    padding: 6px 8px;
}

.blog-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
}

.blog-page-btn {
    display: inline-block;
    min-width: 22px;
    text-align: center;
    padding: 3px 7px;
    font-family: var(--font-chrome);
    font-size: 9.5px;
    font-weight: bold;
    color: var(--mac-black);
    background: var(--mac-white);
    border: 1px solid var(--mac-black);
    border-radius: var(--radius-button);
    text-decoration: none;
}

.blog-page-btn:hover {
    background: var(--mac-black);
    color: var(--mac-white);
}

.blog-page-btn.current {
    background: var(--mac-black);
    border-color: var(--mac-black);
    color: var(--mac-white);
}

.blog-page-btn.disabled {
    color: var(--mac-grey-4);
    background: var(--mac-grey-1);
    pointer-events: none;
}

/* ── Post cover ────────────────────────────────────────────────────────── */
/* Kept small and fixed-height, styled like .feature-image (black border,
   flat hard-edged shadow, no rounding) so it can never overflow its column. */

.post-cover-wrap {
    position: relative;
    margin-bottom: 12px;
    border: 2px solid var(--mac-black);
    box-shadow: var(--shadow-flat-2);
}

.post-cover-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

.post-cover-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.post-cover-title {
    color: var(--mac-white);
    font-size: 13px;
    font-weight: bold;
    line-height: 1.3;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
}

/* ── Post header / meta ────────────────────────────────────────────────── */

.post-header h1 {
    font-size: 15px;
    color: var(--mac-black);
    margin-bottom: 5px;
}

.post-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    font-family: var(--font-chrome);
    font-size: 9.5px;
    font-weight: bold;
    color: var(--mac-grey-6);
    text-transform: uppercase;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mac-grey-4);
}

.post-meta-cat {
    color: var(--mac-black);
    background: var(--mac-grey-2);
    border: 1px solid var(--mac-black);
    border-radius: 2px;
    padding: 2px 6px;
    text-decoration: none;
}

.post-meta-cat:hover {
    background: var(--mac-black);
    color: var(--mac-white);
}

.post-meta-lang a {
    color: var(--mac-black);
    text-decoration: underline;
}

/* ── Prose (rendered markdown content) ────────────────────────────────── */

.prose {
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.55;
    color: var(--mac-black);
}

.prose>*+* {
    margin-top: 10px;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    color: var(--mac-black);
    font-weight: bold;
    line-height: 1.3;
    scroll-margin-top: 15px;
}

.prose h1 {
    font-size: 15px;
    padding-bottom: 6px;
    border-bottom: 3px solid;
    border-image: var(--rainbow-gradient) 1;
}

.prose h2 {
    font-size: 13px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--mac-grey-4);
}

.prose h3 {
    font-size: 12px;
    color: var(--mac-black);
}

.prose h4,
.prose h5,
.prose h6 {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--mac-grey-6);
}

.prose p {
    text-align: justify;
}

.prose a {
    color: var(--mac-black);
}

.prose strong {
    color: var(--mac-black);
}

.prose ul,
.prose ol {
    padding-left: 20px;
}

.prose li+li {
    margin-top: 3px;
}

.prose blockquote {
    border-left: 4px solid var(--mac-black);
    background: var(--mac-grey-1);
    color: var(--mac-black);
    padding: 6px 10px;
}

.prose blockquote>*+* {
    margin-top: 6px;
}

.prose hr {
    border: none;
    border-top: 1px dashed var(--mac-grey-4);
    margin: 2px 0;
}

.prose img {
    display: block;
    max-width: 100%;
    max-height: 420px;
    width: auto;
    height: auto;
    margin: 0 auto;
    border: 2px solid var(--mac-black);
    box-shadow: var(--shadow-flat-2);
}

.prose iframe {
    display: block;
    max-width: 100%;
    max-height: 420px;
    margin: 0 auto;
    border: 2px solid var(--mac-black);
    box-shadow: var(--shadow-flat-2);
}

.prose code {
    font-family: var(--font-mono);
    font-size: 10px;
    background: var(--mac-grey-1);
    border: 1px solid var(--mac-grey-4);
    padding: 1px 4px;
    color: var(--mac-black);
}

.code-block-wrap {
    position: relative;
}

.prose pre {
    background: var(--mac-grey-6);
    padding: 10px 12px;
    overflow-x: auto;
    border: 1px solid var(--mac-black);
}

.code-copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--mac-grey-2);
    color: var(--mac-black);
    font-family: var(--font-chrome);
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 3px 8px;
    border: 1px solid var(--mac-black);
    border-radius: var(--radius-button);
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.code-copy-btn:hover {
    opacity: 1;
    background: var(--mac-black);
    color: var(--mac-white);
}

.code-copy-btn.copied {
    opacity: 1;
    background: var(--rainbow-green);
    color: var(--mac-black);
    border-color: var(--mac-black);
}

.prose pre code {
    background: none;
    border: none;
    padding: 0;
    color: var(--mac-grey-1);
    font-size: 10px;
    line-height: 1.5;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
}

.prose th,
.prose td {
    border: 1px solid var(--mac-black);
    padding: 5px 7px;
    text-align: left;
}

.prose th {
    background: var(--mac-grey-2);
    color: var(--mac-black);
}

.prose tr:nth-child(even) td {
    background: var(--mac-grey-1);
}

/* ── Post gallery ──────────────────────────────────────────────────────── */

.post-gallery {
    margin-top: 18px;
}

.post-gallery h4 {
    display: flex;
    align-items: center;
    font-family: var(--font-chrome);
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--mac-black);
    margin-bottom: 6px;
}

.post-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 6px;
}

.post-gallery-grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 2px solid var(--mac-black);
    box-shadow: var(--shadow-flat-1);
}

/* CRT power-on flicker, staggered per-thumbnail as it enters view */
.post-gallery-grid img.crt-power-on {
    animation: crt-power-on 0.5s steps(12) 1;
}

.post-gallery-grid img.crt-glitch {
    animation: crt-glitch 0.35s steps(3) 1;
}

@keyframes crt-power-on {
    0% {
        filter: brightness(3) contrast(0.4) saturate(0);
        transform: scaleY(0.05);
        opacity: 0;
    }

    15% {
        opacity: 1;
        transform: scaleY(1.02);
    }

    30% {
        filter: brightness(0.4) contrast(1.6) saturate(0.2);
        transform: scaleY(0.85);
    }

    45% {
        filter: brightness(2) contrast(1.2) saturate(0.6);
        transform: scaleY(1);
    }

    100% {
        filter: brightness(1) contrast(1) saturate(1);
        transform: scaleY(1);
    }
}

@keyframes crt-glitch {
    0% {
        filter: brightness(1) saturate(1);
        transform: translateX(0);
    }

    30% {
        filter: brightness(1.6) saturate(0.3) hue-rotate(10deg);
        transform: translateX(-2px);
    }

    60% {
        filter: brightness(0.8) saturate(1.4) hue-rotate(-8deg);
        transform: translateX(2px);
    }

    100% {
        filter: brightness(1) saturate(1);
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .post-gallery-grid img.crt-power-on,
    .post-gallery-grid img.crt-glitch {
        animation: none;
    }
}

/* ── Back link ─────────────────────────────────────────────────────────── */

.post-back {
    display: inline-block;
    margin-top: 18px;
    font-family: var(--font-chrome);
    font-size: 9.5px;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--mac-black);
    background: var(--mac-grey-2);
    border: 1px solid var(--mac-black);
    border-radius: var(--radius-button);
    padding: 5px 10px;
    text-decoration: none;
}

.post-back:hover {
    background: var(--mac-black);
    color: var(--mac-white);
}

/* ── Table of contents ────────────────────────────────────────────────── */
/* The whole #post-sidebar column (Post Info + Contents + Share) is sticky
   as one unit (see above) so they all travel down/up together and stop
   together at the end of the article — not just this box on its own. */

#toc-box {
    /* JS un-hides this once headings are found; hidden by default so a
       post with no headings doesn't leave an empty "Contents" box. Grows to
       fill the leftover sticky-column space, so long TOCs scroll internally
       instead of pushing Info/Share out of the viewport. */
    display: none;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

#toc-list {
    flex: 1;
    min-height: 40px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--mac-grey-5) var(--mac-grey-1);
}

#toc-list::-webkit-scrollbar {
    width: 6px;
}

#toc-list::-webkit-scrollbar-track {
    background: var(--mac-grey-1);
}

#toc-list::-webkit-scrollbar-thumb {
    background: var(--mac-grey-5);
    border-radius: 2px;
}

#toc-list::-webkit-scrollbar-thumb:hover {
    background: var(--mac-grey-6);
}

#toc-list li {
    border-bottom: none !important;
}

#toc-list a {
    background: none !important;
    padding: 3px 8px !important;
    font-size: 9px !important;
    font-weight: normal !important;
    color: var(--mac-grey-6) !important;
    text-transform: none !important;
    border-left: 2px solid transparent;
}

#toc-list li[data-level="3"] a {
    padding-left: 16px !important;
}

#toc-list li[data-level="4"] a,
#toc-list li[data-level="5"] a,
#toc-list li[data-level="6"] a {
    padding-left: 24px !important;
}

#toc-list a:hover {
    background: var(--mac-black) !important;
    color: var(--mac-white) !important;
}

#toc-list a.toc-active {
    border-left-color: var(--mac-black);
    background: var(--mac-grey-1) !important;
    color: var(--mac-black) !important;
    font-weight: bold !important;
}

.toc-empty {
    padding: 6px 8px;
    font-size: 9.5px;
    color: var(--mac-grey-6);
    font-style: italic;
}

/* ── Mobile: stack sidebar below the article instead of beside it ───────── */
@media (max-width: 768px) {

    #blog-content,
    #post-content {
        flex-direction: column;
        /* align-items: flex-start (desktop) sizes row-children to their
           content width — once the axis flips to column it would stop
           #blog-main/#post-main from stretching to the full column width,
           letting prose/images/code blocks size to their own content
           width and overflow the viewport instead of wrapping. */
        align-items: stretch;
    }

    #blog-sidebar,
    #post-sidebar {
        width: 100%;
        position: static;
        max-height: none;
        overflow-y: visible;
    }

    #toc-box {
        flex: none;
    }

    #toc-list {
        max-height: 220px;
    }
}