/* ============================================================
   MAIN.CSS — Static master stylesheet
   Derived from "Shortcake" by ricecodes (ricecodes.tumblr.com)
   Converted to static use with permission-attributed credit.
   Design: Tumblr theme structure retained; platform code removed.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root {
    /* Typography */
    --body-font: Tahoma, sans-serif;
    --body-size: 12px;
    --body-wgt: 400;
    --line-hgt: 1.5em;

    /* Layout */
    --side-size: 15vw;
    --post-size: 40vw;
    --postwrap-gap: 8rem;
    --post-gap: 30px;

    /* Shared (both themes) */
    --links: #f46e8a;
    --links-hover: #9dc6d7;
    --like-btn: #ff492f;
    --selection-bg: #faaca8;
    --selection: #ffffff;
    --tooltips: #000000;
    --tooltips-text: #ffffff;
}

/* LIGHT theme (default) */
body {
    --accent1: #feada6;
    --accent2: #f5efef;
    --accent-text: #ffffff;
    --bg: #f5efef;
    --bg2: #feada6;
    --bg-direction: to bottom;
    --posts: #f0f0f0;
    --captions: #ffffff;
    --sideborders: #d0d0d0;
    --borders: #d0d0d0;
    --borders1: #ffffff;   /* bevel highlight */
    --borders2: #999999;   /* bevel shadow */
    --text: #000000;
    --rgb-text: 0, 0, 0;
    --pressed-bg: rgba(0, 0, 0, .1);
    background-image: linear-gradient(var(--bg-direction), var(--bg), var(--bg2));
}

/* DARK theme */
body.dark {
    --accent1: #742761;
    --accent2: #ea6060;
    --accent-text: #ffffff;
    --bg: #cd5454;
    --bg2: #531945;
    --posts: #2d2d2d;
    --captions: #1d1d1d;
    --sideborders: #5d5d5d;
    --borders: #151515;
    --borders1: #444444;
    --borders2: #101010;
    --text: #ffffff;
    --rgb-text: 255, 255, 255;
    --pressed-bg: rgba(255, 255, 255, .12);
    background-image: linear-gradient(var(--bg-direction), var(--bg), var(--bg2));
}

/* ---------- RESET & BASE ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    color: var(--text);
    font-family: var(--body-font);
    font-size: var(--body-size);
    font-weight: var(--body-wgt);
    line-height: var(--line-hgt);
    overflow-x: hidden;
}

a { color: var(--links); text-decoration: none; }
a:hover { color: var(--links-hover); }
.caption a, .reblogged a { text-decoration: underline; }

b, strong { font-weight: 700; }
sub, small { font-size: calc(var(--body-size) - 2px); }
h1, .t-title { font-size: calc(var(--body-size) + 15px); line-height: var(--line-hgt); }
h1, h2, h3, h4, h5, h6 { padding: 0; margin: 10px 0; }
.t-title { margin: 0; padding: 0; font-weight: 700; }
p { margin: 10px 0; }
ol, ul { margin: 0 0 0 3em; }
ul { list-style-type: square; }
ol li, ul li { margin: 5px 0; }
hr { width: 25%; margin: 10px auto; border-top: 1px solid var(--borders); }

pre {
    white-space: pre-wrap; overflow-x: auto; padding: 15px;
    font-family: monospace, sans-serif;
    background: var(--captions); color: var(--text);
}

blockquote {
    margin: 10px 0; padding: 20px;
    background: var(--posts);
    border: 1px solid var(--borders);
    box-shadow: inset 1px 1px 0 var(--borders1);
}

::selection { color: var(--selection); background: var(--selection-bg); }

/* ---------- UTILITIES ---------- */
.flex { display: flex; flex-wrap: wrap; }
.center { align-content: center; }
.justify { justify-content: space-between; }
.none { display: none; }

/* Panel inner surfaces (the "sunken" look) */
.padding {
    padding: 10px;
    border-top: 1px solid var(--borders2);
    box-shadow: inset 0 1px 0 var(--borders1);
}

.inner-padding, .sidebox, .desc {
    padding: 10px;
    background: var(--captions);
    border: 1px solid;
    border-color: var(--borders2) var(--borders) var(--borders) var(--borders2);
}

/* Shared fade-in for tab switches */
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

a, .folds label:hover, .fold-name, .btn, .tasks2 a { transition: all 0.4s ease; }

/* ---------- DESKTOP SHELL ---------- */
.container { margin: 0; width: 100%; }

.package {
    margin: calc(6vh - 20px) auto;
    padding: 0;
    width: calc(var(--side-size) + var(--post-size) + 134px);
    background: var(--posts);
    border: 1px solid var(--borders1);
    outline: 1px solid var(--borders2);
    box-shadow: 3px 3px 0 rgba(50, 50, 50, .1);
    overflow: hidden;
}

.packhead { width: 100%; }

.wrapper {
    margin: 0;
    padding: 10px 10px 10px 0;
    width: calc(var(--post-size) + 130px);
    max-width: 85vw;
}

.tabs {
    margin: 0 auto;
    padding: 40px;
    width: 100%;
    background: var(--captions);
    height: calc(75vh - 40px);
    overflow-y: auto; overflow-x: hidden;
    border-top: 1px solid var(--borders2);
    border-left: 1px solid var(--borders2);
    border-right: 1px solid var(--borders);
    border-bottom: 1px solid var(--borders);
}

/* Radio-driven tab switching (pure CSS) */
[class^="tab_"] {
    display: none;
    position: relative;
    margin: 0 auto;
    width: var(--post-size);
    animation: fadein 0.4s ease-in-out forwards;
}
#button_a:checked ~ .package > .wrapper > .tabs > .tab_a,
#button_b:checked ~ .package > .wrapper > .tabs > .tab_b,
#button_c:checked ~ .package > .wrapper > .tabs > .tab_c,
#button_d:checked ~ .package > .wrapper > .tabs > .tab_d,
#button_e:checked ~ .package > .wrapper > .tabs > .tab_e,
#button_f:checked ~ .package > .wrapper > .tabs > .tab_f { display: block; }

.entry { margin: 0 auto var(--postwrap-gap); width: 100%; }

/* ---------- WINDOWS (articles) ---------- */
article {
    margin: 0 0 var(--post-gap);
    width: 100%;
    background: var(--posts);
    border: 1px solid var(--borders1);
    outline: 1px solid var(--borders2);
    overflow: hidden;
    box-shadow: 3px 3px 0 rgba(50, 50, 50, .1);
}

/* Title bar with gradient */
.post-header {
    margin: 0; padding: 10px;
    background-image: linear-gradient(to right, var(--accent1), var(--accent2));
    color: var(--text);
    width: 100%;
}

.winhead { width: calc(100% - 80px); white-space: nowrap; overflow: hidden; }
.winhead img { margin: auto 0; vertical-align: middle; width: 20px; height: 20px; }
.w-info { margin: 0; width: calc(100% - 30px); }
.w-title {
    vertical-align: middle; margin: auto 0; width: 100%;
    color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
}
.winhead .ti, .post-btns .ti {
    margin: auto 0; vertical-align: middle; padding: 3px; font-size: 14px;
    background: var(--posts); color: var(--text);
    border: 1px solid var(--borders);
    box-shadow: inset 1px 1px 0 var(--borders1);
}

/* Minimize / maximize / close buttons */
.post-btns { margin: 0; }
.post-btns .ti { cursor: pointer; }
.post-btns .ti.ex:active, .post-btns .ti.close:active {
    border-top: 1px solid var(--borders2);
    border-left: 1px solid var(--borders2);
    border-bottom: 1px solid var(--borders1);
    border-right: 1px solid var(--borders1);
}

/* File / Edit / View menu bar */
.bar {
    margin: 0; padding: 8px 5px; width: 100%;
    border-top: 1px solid var(--borders2);
    box-shadow: inset 0 1px 0 var(--borders1);
}
.bar p, .bar a {
    display: inline-block; margin: 0 2px 0 0; padding: 2px 5px;
    color: var(--text); border: 1px solid var(--posts);
}
.bar p::first-letter, .bar a::first-letter { text-decoration: underline; }
.bar a:hover {
    border-right: 1px solid var(--borders2);
    border-bottom: 1px solid var(--borders2);
    cursor: pointer;
}

/* Pressed/active state (shared by all buttons) */
.btn.act, [class^="btn_"].act, .bar a:active, .tasks2 a:active,
.audio-play:active {
    background: var(--pressed-bg);
    border-top: 1px solid var(--borders2);
    border-left: 1px solid var(--borders2);
    border-bottom: 1px solid var(--borders1);
    border-right: 1px solid var(--borders1);
}

/* Status bar (footer strip inside windows) */
.post-footer { padding: 0 10px 10px; color: var(--text); width: 100%; overflow: hidden; }
.post-footer a { color: var(--text); }
.post-footer a:hover { color: var(--links-hover); }
[class^="post-info"], .time-info {
    border-top: 1px solid var(--borders2);
    border-left: 1px solid var(--borders2);
    border-right: 1px solid var(--borders1);
    border-bottom: 1px solid var(--borders1);
    white-space: nowrap; overflow: hidden;
}
[class^="post-info"] { width: calc(38% - 1.5px); }
.time-info { width: calc(24% - 1.5px); }
.pnotes {
    vertical-align: middle; margin: auto 0; padding: 5px 10px; width: 100%;
    color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- SIDEBAR (folder tree) ---------- */
.sidebar { position: sticky; margin: 0; padding: 10px; width: var(--side-size); }
.sidebox {
    margin: auto 0; width: 100%;
    height: calc(75vh - 40px);
    overflow-y: auto; overflow-x: hidden;
}

.folds a, .folds label, .folds span {
    margin-top: 1px; display: block; position: relative; padding: 5px;
    color: var(--text);
    border-left: 1px dotted var(--sideborders);
}
.fold { position: relative; margin-bottom: 5px; width: 100%; white-space: nowrap; overflow: hidden; }
.fold-name {
    vertical-align: middle; margin: auto 0; width: 100%;
    color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fold-name:hover { color: var(--links-hover); }
.folds { margin-left: 8px; }

/* Tree "elbow" connectors */
.folds a:before, .folds label:before, .folds span:before {
    content: ""; position: absolute;
    top: calc((var(--line-hgt) / 2) + 2px); left: 0;
    width: 5px; height: 1px;
    border-bottom: 1px dotted var(--sideborders);
}

/* Selected folder = active tab */
#button_a:checked ~ .package > .sidebar > .sidebox > .folders > .folds > label.folder_a,
#button_b:checked ~ .package > .sidebar > .sidebox > .folders > .folds > label.folder_b,
#button_c:checked ~ .package > .sidebar > .sidebox > .folders > .folds > label.folder_c,
#button_d:checked ~ .package > .sidebar > .sidebox > .folders > .folds > label.folder_d {
    cursor: default;
    background: var(--accent1);
    color: var(--accent-text);
}

.inner-folder { padding-left: 13px; width: 100%; border-left: 1px dotted var(--sideborders); }
.folds a:hover, .folds label:hover, .inner-folder a:hover { color: var(--links-hover); cursor: pointer; }

/* ---------- TASKBAR ---------- */
.taskbar {
    position: fixed; bottom: 0; left: 0;
    padding: 0 15px;
    width: 100vw; height: 50px;
    background: var(--posts);
    border-top: 1px solid var(--borders);
    box-shadow: inset 0 1px 0 var(--borders1);
    z-index: 9999999;
}

.tasks { margin: auto 0; width: 60%; }
.tasks2 { display: inline-flex; margin: auto 0; max-width: 40%; }

.btn, [class^="btn_"] {
    display: inline-flex; margin: 0 1px 0 0; padding: 4px 10px;
    max-width: calc(20% - 1px);
    background: var(--posts); color: var(--text);
    border: 1px solid var(--borders);
    box-shadow: inset 1px 1px 0 var(--borders1), inset 0 0 1px 1px var(--borders);
    white-space: nowrap; overflow: hidden; cursor: pointer;
}
.btn .ti, [class^="btn_"] .ti, .clock-wrap .ti {
    margin: auto 5px auto 0; font-size: var(--body-size); color: var(--text);
}
.linfo { margin: 0; width: 100%; }
.ltitle { width: 100%; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Active taskbar tab (tracks checked radio) */
#button_a:checked ~ .taskbar > .tasks > .btn_a,
#button_b:checked ~ .taskbar > .tasks > .btn_b,
#button_c:checked ~ .taskbar > .tasks > .btn_c,
#button_d:checked ~ .taskbar > .tasks > .btn_d { background: var(--pressed-bg); }

/* Clock tray */
.clock-wrap {
    margin: auto 0 auto 1px; padding: 4px 10px;
    border-top: 1px solid var(--borders2);
    border-left: 1px solid var(--borders2);
    border-right: 1px solid var(--borders1);
    border-bottom: 1px solid var(--borders1);
    box-shadow: inset 0 1px 0 var(--borders1);
}
#clock, #date { display: inline-flex; }

/* ---------- POPUP WINDOWS (Start menu, etc.) ---------- */
.start-wrap, .up-wrap, .search-wrap { position: fixed; z-index: 9999; }
.start-wrap { left: 20px; bottom: 80px; width: 20vw; }
.up-wrap, .search-wrap { right: 20px; width: 20vw; }
.start-wrap article, .up-wrap article, .search-wrap article { margin: 0; }

.cover {
    width: 100%; max-height: 18vh; overflow: hidden;
    background: radial-gradient(ellipse at top, var(--accent1), transparent),
                radial-gradient(ellipse at bottom, var(--accent2), transparent);
    border-top: 1px solid var(--borders2);
    box-shadow: inset 0 1px 0 var(--borders1);
}
.cover img { width: 100%; max-height: 18vh; object-fit: fill; }

.por { margin: -40px auto 10px; }
.por img {
    margin: 0 auto; width: 60px; height: 60px; padding: 3px;
    background: var(--posts);
    border: 1px solid var(--borders2);
    box-shadow: inset 1px 1px 0 var(--borders1);
}

.desc { margin: 10px auto 0; max-height: 20vh; overflow-y: auto; }

/* Bio "chips" (labels, links, favorites) */
.pref span, .pref a, .explr a, .colors span {
    display: inline-block; margin: 0 5px 5px 0; padding: 4px 7px;
    background: var(--posts); color: var(--text);
    border: 1px solid var(--borders);
    box-shadow: inset 1px 1px 0 var(--borders1);
    word-break: keep-all;
}
.pref .ti, .colors .ti { margin: auto 5px auto 0; vertical-align: middle; font-size: var(--body-size); }

/* Skill "HP bars" (keep — great gag for an About page) */
.hp {
    width: 100%; height: 10px; background: var(--posts);
    overflow: hidden;
    border-top: 1px solid var(--borders2);
    border-left: 1px solid var(--borders2);
    border-right: 1px solid var(--borders1);
    border-bottom: 1px solid var(--borders1);
}
.hpbar {
    margin: auto 0; vertical-align: middle; height: 10px;
    background-image: linear-gradient(to right, var(--accent1), var(--accent2));
    background-clip: padding-box; color: var(--accent-text);
}
.hpbar.one   { width: 40%; }   /* set per-bar widths here */
.hpbar.two   { width: 100%; }
.hpbar.three { width: 60%; }
.hpbar.four  { width: 20%; }
.hpbar.five  { width: 80%; }

/* ---------- ADDRESS BAR ---------- */
.address-bar {
    margin: 0; padding: 10px; width: 100%;
    background: var(--posts);
    border-top: 1px solid var(--borders2);
    border-bottom: 1px solid var(--borders2);
    box-shadow: 0 1px 0 var(--borders1), inset 0 1px 0 var(--borders1);
}
.address {
    margin: auto 0; padding: 4px 10px;
    width: calc(100% - 140px);
    background: var(--captions);
    border-top: 1px solid var(--borders2);
    border-left: 1px solid var(--borders2);
    border-right: 1px solid var(--borders);
    border-bottom: 1px solid var(--borders);
    white-space: nowrap; overflow: hidden;
    line-height: var(--line-hgt);
}
.urlol { color: rgba(var(--rgb-text), .5); }
.a-name { vertical-align: middle; margin: auto 0; width: 100%; color: var(--text); }

/* ---------- TAGS & PAGINATION ---------- */
.tags a, .ptags a {
    display: inline-block; margin: 0 5px 5px 0; padding: 4px 7px;
    background: var(--posts); color: var(--text);
    border: 1px solid var(--borders);
    box-shadow: inset 1px 1px 0 var(--borders1);
    word-break: keep-all;
}
.t-wrap { margin: 0; padding: 0 10px 10px; width: 100%; }

.pgs {
    position: relative; margin: 0 auto; width: 100%;
    border-top: 1px solid var(--borders2);
    box-shadow: inset 0 1px 0 var(--borders1);
    padding: 10px;
}
.pgs a, .current {
    display: inline-flex; padding: 5px 10px; margin: 0 1px;
    justify-content: center; text-align: center;
}
.pgs a { border: 1px solid var(--borders); box-shadow: inset 1px 1px 0 var(--borders1); color: var(--text); }
.current {
    background: var(--captions);
    box-shadow: inset 1px 1px 0 0 var(--borders2), inset 0 0 1px 1px var(--borders);
}
.pgs a:active { box-shadow: inset 1px 1px 0 0 var(--borders2), inset 0 0 1px 1px var(--borders1); }

/* ---------- ERROR DIALOG ---------- */
.error {
    margin: 0 auto;
    width: var(--post-size);
}
.go-back { margin: 0 auto; width: 100%; }
.yes, .no {
    width: calc(50% - 1px); color: var(--text);
    justify-content: center; text-align: center;
    background: var(--posts);
    border: 1px solid var(--borders);
    box-shadow: inset 1px 1px 0 var(--borders1);
    overflow: hidden;
}
.go-back a { padding: 5px 10px; justify-content: center; }
.yes:hover, .no:hover, .tags a:hover { outline: .75px dashed var(--text); outline-offset: -4px; cursor: pointer; }

/* ---------- DAY / NIGHT TOGGLE ---------- */
body.light .nox, body.dark .diem { display: none; }
input[type="checkbox"] { display: none; }
.modus { cursor: pointer; }
.address-bar .ti {
    display: inline-flex; margin: auto 0; vertical-align: middle; padding: 6px;
    background: var(--posts); color: var(--text);
    border: 1px solid var(--borders);
    box-shadow: inset 1px 1px 0 var(--borders1);
    font-size: calc(var(--body-size) + 2px);
    cursor: pointer;
}

/* ---------- SCROLLBARS (retro track + gradient thumb) ---------- */
.tabs::-webkit-scrollbar, .sidebox::-webkit-scrollbar, .desc::-webkit-scrollbar {
    background-color: transparent;
}
.tabs::-webkit-scrollbar { width: 20px; }
.sidebox::-webkit-scrollbar, .desc::-webkit-scrollbar { width: 14px; }
.tabs::-webkit-scrollbar-thumb, .sidebox::-webkit-scrollbar-thumb, .desc::-webkit-scrollbar-thumb {
    background-image: linear-gradient(var(--accent1), var(--accent2));
    height: 90px;
    border: 6px solid transparent;
    background-clip: padding-box;
}

/* ---------- RESPONSIVE (under 850px) ---------- */
.mobile-head, .m-cred, .m-to-top, .bg-up, .bg-sea { display: none; }
@media only screen and (max-width: 850px) {
    .sea, .update, .thm, .sidebar, .to-top { display: none !important; }
    .mobile-head, .m-cred { display: block; }
    .tasks { width: 100%; justify-content: center; }

    .package, .wrapper { width: 100vw; max-width: 100vw; }
    .package { margin: 0 auto; border-width: 0; outline: 0; box-shadow: none; }
    .wrapper { padding: 0; }
    .tabs { margin: 0 auto; width: 100vw; padding: 50px 15px 70px; height: auto; }
    [class^="tab_"], .entry, .error { width: 100%; }

    .cover { max-height: 35vh; }
    .cover img { max-height: 35vh; }

    .m-cred { margin: 5rem 0; width: 100%; text-align: center; }
    .m-cred a { color: var(--text); border-bottom: 2px solid var(--accent1); }
}

/* ===== CANONICAL BANNER RULES — day/night swap + sizing ===== */

/* Theme swap: sunset room for day, moonlit room for night */
body.dark .day-cover,
body:not(.dark) .night-cover { display: none; }

/* Start-menu popup cover (desktop + shared) */
.cover { width: 100%; height: 18vh; overflow: hidden; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Mobile full-bleed banner */
@media only screen and (max-width: 850px) {
    
    /* Taskbar: Start (left) + clock tray (right) */
    .tasks { display: flex !important; width: auto !important; }
    .tasks .btn:not(.start) { display: none; }
    .tasks .btn.start { max-width: none; }
    /* hide every task button except Start */
    .tasks2 { display: inline-flex !important; width: auto; max-width: 55%; justify-content: flex-end; }

    .sea, .update, .thm, .sidebar, .to-top { display: none !important; }
    .mobile-head {
        display: block;
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
    }
    .mobile-head .cover { height: 30vh; }
    .mobile-head .cover img { height: 100%; }
}
.mobile-head .desc p { text-align: center; }
.mobile-head .pref { text-align: center; }

.start-wrap {
    position: fixed;
    bottom: 58px !important;
    left: 8px !important;
    width: min(280px, 85vw) !important;
    right: auto !important;
    top: auto !important;
}

/* Article reading size — the OS stays 12px, the words don't */
.caption { font-size: calc(var(--body-size) + 4px); }

/* More breathable article text */
.caption { line-height: 1.65; }

/* ---------- ARCHIVE FILE LISTING ---------- */
.postlist .pl-item {
    display: flex; flex-wrap: wrap; align-items: center;
    padding: 8px 6px;
    border-bottom: 1px dotted var(--sideborders);
}
.postlist .pl-item:last-child { border-bottom: none; }
.postlist .pl-item .ti {
    margin: auto 8px auto 0; padding: 3px; font-size: 14px;
    background: var(--posts); color: var(--text);
    border: 1px solid var(--borders);
    box-shadow: inset 1px 1px 0 var(--borders1);
}
.postlist .pl-item a { flex: 1; color: var(--text); }
.postlist .pl-item a:hover { color: var(--links-hover); }
.pl-meta { color: rgba(var(--rgb-text), .5); white-space: nowrap; }

/* Side padding for footer credit line */
.m-cred { padding: 0 16px; }