/* Extracted styles from templates/index.html.tera */
@font-face {
    font-family: "Departure Mono";
    src: url("/static/fonts/DepartureMono-Regular.woff2") format("woff2"),
         url("/static/fonts/DepartureMono-Regular.woff") format("woff"),
         url("/static/fonts/DepartureMono-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    font-family: "Departure Mono", "Courier New", monospace;
    box-sizing: border-box;
}

pre, .ascii-container {
    font-family: "Departure Mono",
                 "Twemoji Mozilla",
                 "Apple Color Emoji",
                 "Segoe UI Emoji",
                 "Segoe UI Symbol",
                 "Noto Color Emoji",
                 "EmojiOne Color",
                 "Android Emoji",
                 "Courier New",
                 monospace;
    text-rendering: optimizeLegibility;
}

html {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #000000;
}

body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    color: #fff;
    overflow-x: hidden;
    background: transparent;
    position: relative;
}

#stars-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background-color: #000000;
}

.star {
    position: absolute;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    animation: twinkle 3s ease-in-out infinite;
    font-size: 20px;
    line-height: 1;
    will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
    .star { animation: none; opacity: 0.6; }
}

@keyframes twinkle {
    0%, 100% { 
        opacity: 0.2;
        transform: scale(1);
    }
    50% { 
        opacity: 1;
        transform: scale(1.2);
    }
}

.ascii-container {
    min-height: 100vh;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    background: rgba(0, 0, 0, 0.7);
}

pre {
    white-space: pre;
    margin: 0;
    font-size: 14px;
    line-height: 1.2;
    overflow-x: auto;
    max-width: 100%;
    font-variant-ligatures: none;
    font-feature-settings: "kern" 0, "liga" 0, "calt" 0;
    letter-spacing: 0;
    word-spacing: 0;
    font-variant-numeric: tabular-nums;

}

pre::after {
    content: "";
    display: inline-block;
    width: 0;
}

.profile-ascii {
    font-size: 0.1vw;
    line-height: 0.5;
    margin: 0;
    padding: 0;
    white-space: pre;
    display: block;
    position: relative;
    z-index: 1;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    transform: scale(0.1);
    transform-origin: top center;
}

/* Smaller, readable ASCII lines for WHOAMI pfp inside boxes */
/* The pfp is 75 chars wide and needs to fit in boxes of varying widths */
.pfp-small {
    font-size: inherit;       /* inherit from parent pre */
    line-height: 1;           /* normal line height */
    white-space: pre;         /* preserve spaces */
    display: block;           /* block display */
    transform: scale(0.7);    /* scale to fit 75-char pfp in ~55-char large box */
    transform-origin: top left;
    margin-bottom: -30%;      /* compensate for scaled height */
}

/* Mobile tuning for WHOAMI pfp - scale more for 30-char small boxes */
@media (max-width: 600px) {
  .pfp-small {
    transform: scale(0.38);   /* scale to fit 75-char pfp in ~30-char box */
    margin-bottom: -60%;      /* compensate for scaled height */
  }
}

.ascii-title {
    font-size: 0.8vw;
    white-space: pre;
    line-height: 1;
    margin: 0 auto;
    max-width: 100%;
}

.ascii-box {
    display: flex;
    flex-direction: column;
    min-height: fit-content;
}

.box-tiny, .box-small, .box-medium, .box-large {
    display: none;
}

@media (min-width: 901px) {
    .box-large { display: block; }
}

@media (min-width: 601px) and (max-width: 900px) {
    .box-medium { display: block; }
}

@media (min-width: 401px) and (max-width: 600px) {
    .box-small { display: block; }
}

@media (max-width: 400px) {
    .box-tiny { display: block; }
}

@media (max-width: 600px) {
    .box-tiny, .box-small, .box-medium, .box-large { display: none !important; }
    /* Content boxes - use small (40-char) which fits better on mobile */
    .ascii-content .welcome-box .box-small { display: block !important; }
    .ascii-content .latest-posts-box .box-small { display: block !important; }
    /* Sidebar boxes - use small (30-45 char) for about/categories */
    .ascii-sidebar .box-small { display: block !important; }
    #additional-posts-mobile .box-small { display: block !important; }
    /* Nav and footer - use small for mobile */
    .ascii-nav .box-small { display: block !important; }
    .ascii-footer .box-small { display: block !important; }
    .ascii-nav pre { text-align: center !important; }
    #ascii-cat { font-size: 1.5px !important; }
}

/* Sidebar layout (for pages with sidebar) */
.main-content-wrapper { display: flex; gap: 10px; }
.ascii-content { flex: 4; display: flex; flex-direction: column; gap: 10px; }
.ascii-sidebar { flex: 1; display: flex; flex-direction: column; gap: 10px; }

/* About page: GitHub-avatar truecolor half-block portrait (generated from source
   by `cargo run --bin gen-avatar`). Uses the normal box font so the framed
   55-col portrait lines up with the SKILLS/EDUCATION/LINKS boxes; line-height 1
   keeps the half-blocks contiguous (no gaps between rows). */
.profile-art {
    font-family: "Departure Mono", "Courier New", monospace;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0;
    white-space: pre;
    margin: 0;
    display: block;
    color: #fff;
}
.profile-art span { display: inline; }
@media (max-width: 600px) {
    /* Scale down so the fixed-width portrait still fits the narrow column. */
    .profile-art { font-size: 11px; }
}

/* Author-voice `// ...` asides, rendered like dimmed code comments site-wide
   (blog prose, the experience-tree bios, anywhere the class is applied). */
.md-comment { color: #6b7482; }

/* ── asm syntax highlight (the `mov rax, "about me" ; ret` flourish) ── */
.asm-kw      { color: #c678dd; }  /* mnemonic */
.asm-reg     { color: #56b6c2; }  /* register */
.asm-str     { color: #98c379; }  /* string   */
.asm-comment { color: #5c6370; }  /* comment  */

/* ── experience: a real ASCII box (matches the others) with a collapsible,
      tree-command-style timeline. Each .exp-row is a full `║ … ║` line, so
      hiding a job's bio rows just closes the box up without breaking borders. ── */
.exp-box {
    font-family: "Departure Mono", "Courier New", monospace;
    font-size: 14px;
    line-height: 1.2;
    white-space: pre;
    text-align: left;
    display: inline-block;
    color: #c8c8c8;
}
.exp-row { display: block; }
.exp-head {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    white-space: pre;
    cursor: pointer;
}
.exp-head:hover { background: rgba(198, 120, 221, 0.12); }
.exp-root   { color: #5c6370; }
.exp-conn   { color: #5c6370; }
.exp-date   { color: #56b6c2; }
.exp-co     { color: #98c379; }
.exp-role   { color: #abb2bf; }
.exp-toggle { color: #c678dd; }
.exp-bio { display: none; }
.exp-job.open .exp-bio { display: block; }

/* Desktop shows the wide (80-col) box; mobile shows the compact (~42-col) box. */
.exp-mobile { display: none; }
@media (max-width: 600px) {
    .exp-desktop { display: none; }
    .exp-mobile { display: block; }
    /* 42-col box at 12px (~302px) fits narrow screens without horizontal scroll. */
    .exp-mobile .exp-box { font-size: 12px; }
}


/* Centered layout (no sidebar) */
.main-content-centered {
    display: flex;
    justify-content: center;
    width: 100%;
}

.main-content-centered .ascii-content {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

/* Post pages only: cap the column so long code/tables scroll instead of
   stretching the page (home keeps its natural, wider width). */
.main-content-centered .post-content {
    width: 100%;
    max-width: 820px;
}

.main-content-centered .ascii-box {
    width: 100%;
    display: flex;
    justify-content: center;
}

@media (max-width: 600px) {
    .main-content-wrapper { flex-direction: column; }
    .ascii-sidebar { flex: 1; width: 100%; }
    .ascii-content { flex: 1; width: 100%; }
    .main-content-centered .ascii-content { width: 100%; }
    /* Keep readable font size, allow horizontal scroll for wide boxes */
    pre { font-size: 11px; overflow-x: auto; max-width: 100%; }
    .ascii-title { font-size: 1.4vw; }
    .ascii-box { max-width: 100%; overflow-x: auto; margin: 0 auto; }
    .ascii-container { padding: 5px; text-align: center; }
    pre { text-align: left; margin: 0 auto; display: block; }
}

/* Extra small screens */
@media (max-width: 400px) {
    pre { font-size: 9px; }
    .ascii-title { font-size: 1.2vw; }
    .ascii-container { padding: 3px; }
}

.ascii-nav a, .ascii-content a, .ascii-sidebar a { color: #33aaff; text-decoration: none; }
.ascii-nav a:hover, .ascii-content a:hover, .ascii-sidebar a:hover { text-decoration: underline; }

.ascii-nav { display: flex; justify-content: center; }
.ascii-footer { display: flex; justify-content: center; }

.emoji-img { display: inline-block; height: 1em; width: 1ch !important; min-width: 1ch; max-width: 1ch; vertical-align: baseline; object-fit: contain; margin: 0; padding: 0; border: 0; }

/* Blog page styles */
.blog-content {
    flex: 4;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.blog-post-card {
    margin-bottom: 0;
}

.blog-post-card pre {
    color: #fff;
}

.blog-post-card strong {
    color: #33aaff;
}

.post-date {
    color: #888;
    font-style: italic;
}

/* Blog page responsive - show small boxes on mobile */
@media (max-width: 600px) {
    .blog-content .box-small { display: block !important; }
    .blog-content .box-tiny,
    .blog-content .box-medium,
    .blog-content .box-large { display: none !important; }

    .post-content .box-small { display: block !important; }
    .post-content .box-tiny,
    .post-content .box-medium,
    .post-content .box-large { display: none !important; }
}

/* Individual post page styles */
.post-content {
    flex: 4;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.post-header, .post-nav {
    margin-bottom: 0;
}

.post-body {
    position: relative;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* ASCII double-line frame drawn with real box-drawing glyphs, overlaid on the
   flowing HTML body so it matches the site's other ╔═╗ boxes. */
.ascii-frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    color: #c3ccd6;
    font-family: "Departure Mono", "Courier New", monospace;
    font-size: 15px;
    line-height: 1;
}

.ascii-frame-h {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    height: 1em;
    white-space: pre;
    overflow: hidden;
}

.ascii-frame-top { top: 0; }
.ascii-frame-bottom { bottom: 0; }

.ascii-frame-fill {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
}

.ascii-frame-fill::before {
    content: "════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════";
}

.ascii-frame-v {
    position: absolute;
    top: 0.6em;
    bottom: 0.6em;
    width: 1ch;
    overflow: hidden;
    word-break: break-all;
    white-space: normal;
}

.ascii-frame-left { left: 0; }
.ascii-frame-right { right: 0; }

.ascii-frame-v::before {
    content: "║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║║";
}

.post-html-content {
    padding: 20px 30px;
    line-height: 1.7;
    font-size: 14px;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    /* Reading content stays left-aligned even where a parent (the mobile
       .ascii-container) sets text-align: center. Explicit <center> blocks
       (xkcd, embeds) still center themselves. */
    text-align: left;
}

.post-html-content h1,
.post-html-content h2,
.post-html-content h3 {
    color: #33aaff;
    margin: 1em 0 0.5em 0;
}

.post-html-content h1 { font-size: 1.5em; }
.post-html-content h2 { font-size: 1.3em; }
.post-html-content h3 { font-size: 1.1em; }

.post-html-content p {
    margin: 0.8em 0;
}

.post-html-content ul, .post-html-content ol {
    margin: 0.8em 0;
    padding-left: 2em;
}

.post-html-content li {
    margin: 0.3em 0;
}

.post-html-content code {
    background: rgba(51, 170, 255, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: "Departure Mono", "Courier New", monospace;
}

.post-html-content pre:not(.ascii-scrollbar) {
    background: #2b303b;
    border: 1px solid #4f5b66;
    padding: 15px;
    margin: 1em 0;
    overflow-x: auto;
    border-radius: 4px;
    max-width: 100%;
    box-sizing: border-box;
}

.post-html-content pre code {
    background: none;
    padding: 0;
    white-space: pre;
}

/* Syntax highlighting overrides for syntect output */
.post-html-content pre[style]:not(.ascii-scrollbar) {
    background: #2b303b !important;
    border: 1px solid #4f5b66;
    padding: 15px;
    margin: 1em 0;
    overflow-x: auto;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
    max-width: 100%;
    box-sizing: border-box;
}

.post-html-content a {
    color: #33aaff;
    text-decoration: none;
}

.post-html-content a:hover {
    text-decoration: underline;
}

.post-html-content blockquote {
    border-left: 3px solid #33aaff;
    background: rgba(51, 170, 255, 0.06);
    margin: 1em 0;
    padding: 0.5em 1em;
    border-radius: 0 4px 4px 0;
    color: #bbb;
    font-style: italic;
}

.post-html-content blockquote p { margin: 0.3em 0; }

.post-html-content table {
    border-collapse: collapse;
    margin: 1em 0;
    width: 100%;
    display: block;
    overflow-x: auto;
    max-width: 100%;
}

.post-html-content th, .post-html-content td {
    border: 1px solid #333;
    padding: 8px 12px;
    text-align: left;
}

.post-html-content th {
    background: rgba(51, 170, 255, 0.1);
}

/* Horizontal image filmstrip for posts: `<div class="scroll-container">` with a
   row of `<img>`s. Auto-scrolls (scroll-container.js), pauses on hover. A WASM
   ASCII scrollbar (◄──███──►) attaches below it (src/mods/wasm.rs). */
.post-html-content .scroll-container {
    overflow-x: auto;
    white-space: nowrap;
    margin: 1em 0;
    max-width: 100%;
    /* Fallback native scrollbar (hover-only) until the WASM bar attaches. */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.post-html-content .scroll-container:hover {
    scrollbar-color: #33aaff transparent;
}

.post-html-content .scroll-container::-webkit-scrollbar {
    height: 8px;
}

.post-html-content .scroll-container::-webkit-scrollbar-track {
    background: transparent;
}

.post-html-content .scroll-container::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 0;
}

.post-html-content .scroll-container:hover::-webkit-scrollbar-thumb {
    background: #33aaff;
}

/* Once the WASM ASCII scrollbar attaches, hide the native one entirely. */
.post-html-content .scroll-container.has-ascii-scrollbar {
    scrollbar-width: none;
}

.post-html-content .scroll-container.has-ascii-scrollbar::-webkit-scrollbar {
    display: none;
}

/* WASM ASCII lightbox: click a filmstrip image to open it in a draggable
   ╔═ name ═ ✕ ╗ window (see src/mods/wasm.rs, AsciiLightbox). */
.lb-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(0, 0, 0, 0.55);
}

.ascii-lightbox {
    position: fixed;
    left: 50%;
    top: 7%;
    transform: translateX(-50%);
    z-index: 99999;
    padding: 18px;
    max-width: 92vw;
    background: rgba(0, 0, 0, 0.9);
}

.ascii-lightbox .lb-img {
    display: block;
    max-width: 88vw;
    max-height: 78vh;
    width: auto;
    height: auto;
    border-radius: 2px;
}

.ascii-lightbox .lb-titlebar {
    position: absolute;
    top: -0.5em;
    left: 14px;
    right: 14px;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Departure Mono", "Courier New", monospace;
    font-size: 14px;
    line-height: 1;
    color: #c3ccd6;
    cursor: move;
    user-select: none;
    -webkit-user-select: none;
}

.ascii-lightbox .lb-name,
.ascii-lightbox .lb-close {
    background: #000;
    padding: 0 6px;
}

.ascii-lightbox .lb-close {
    cursor: pointer;
    color: #ff6b6b;
}

.ascii-lightbox .lb-close:hover {
    color: #fff;
    background: #ff6b6b;
}

@media (max-width: 600px) {
    .ascii-lightbox { padding: 12px; }
    .ascii-lightbox .lb-img { max-width: 84vw; max-height: 70vh; }
}

/* WASM-rendered ASCII scrollbar: box glyphs, hover-only, draggable. */
.ascii-scrollbar {
    margin: 4px 0 0.5em;
    font-family: "Departure Mono", "Courier New", monospace;
    font-size: 15px;
    line-height: 1;
    text-align: center;
    white-space: pre;
    color: #4f5b66;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    opacity: 0;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.post-html-content .scroll-container:hover + .ascii-scrollbar,
.ascii-scrollbar:hover {
    opacity: 1;
}

.ascii-scrollbar:hover {
    color: #33aaff;
}

/* Regular content images (e.g. the xkcd comic) fit the column and never
   overflow the page. Filmstrip images opt out below so they stay full-size. */
.post-html-content img {
    max-width: 100%;
    height: auto;
}

.post-html-content .scroll-container img {
    padding: 10px;
    max-width: none;
    max-height: 420px;
    width: auto;
    vertical-align: middle;
    border-radius: 3px;
}

/* Mobile: shrink the filmstrip images and the ASCII scrollbar so they fit a
   narrow column, and keep the frame/images from overflowing the post box. */
@media (max-width: 600px) {
    .post-html-content .scroll-container img {
        max-height: 200px;
        padding: 6px;
    }
    .ascii-scrollbar {
        font-size: 12px;
    }
    .post-html-content {
        padding: 16px 14px;
    }
}

.post-html-content strong {
    color: #fff;
}

.post-html-content em {
    color: #ccc;
}