/* ==========================================================================
   PmWiki skin — refreshed stylesheet
   保留原主题：米白背景 + 渐变遮罩 + 左栏 logo/右栏正文
   改进：正文排版、标题层次、代码/表格样式、链接配色、现代布局
   ========================================================================== */

/* ---------- Reset & base ---------- */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;              /* 1rem = 10px, 便于换算 */
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    width: 100%;
    word-wrap: break-word;
    overflow-x: hidden;
    font-size: 1.5rem;
    line-height: 1.75;
    color: #3a3a3a;
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
                 'Hiragino Sans GB', 'Microsoft YaHei', 'PingFang SC',
                 'WenQuanYi Zen Hei', sans-serif;
}

/* 背景：保留原图 + 渐变遮罩 */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(to top, rgba(255,255,255,0.82), rgba(255,255,255,0.94)),
        url('//yahaizi.com/wiki/pub/skins/z/page01.jpg');
    background-position: 0 0, center;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    background-attachment: scroll;
    background-color: #efefef;
}

/* ---------- Links ---------- */

a {
    color: #5b7b35;                 /* 比原先的亮绿柔和 */
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease;
}

a:hover {
    color: #6b9443;
}

#article a {
    border-bottom: 1px solid rgba(90,122,58,0.25);
}

#article a:hover {
    border-bottom-color: #6b9443;
}

/* ---------- Media ---------- */

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

hr {
    border: 0;
    height: 1px;
    background: linear-gradient(to right,
        transparent, rgba(0,0,0,0.15), transparent);
    margin: 2.4rem 0;
}

textarea {
    width: 90%;
    height: 17rem;
    font-family: 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 1.3rem;
    padding: .8rem;
    border: 1px solid #ccc;
    border-radius: 3px;
}

/* ---------- Layout ---------- */

#wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#main {
    display: flex;
    position: relative;
    z-index: 1;
    padding: 0 1.25rem;
    max-width: 86rem;
    margin: 0 auto;
    width: 100%;
}

#inner { width: 100%; }

#container { overflow: hidden; }

/* ---------- Header (left sidebar on desktop) ---------- */

#header {
    float: left;
    margin: 4rem 0 3rem;
    padding-bottom: 7rem;
    padding-right: 2.4rem;
    max-width: 17rem;
    text-align: right;
    border-right: 1px solid rgba(0,0,0,0.08);
}

#logo img {
    width: 12rem;
    margin-top: 4rem;
}

#info {
    font-size: 1.7rem;
    margin: 1.6rem 0;
    letter-spacing: 0.08rem;
    line-height: 1.7;
    color: #555;
}

#info p { margin: 0; }

#nav {
    font-size: 1.25rem;
    letter-spacing: 0.08rem;
    line-height: 1.7;
}

#qr img {
    width: 7rem;
    margin-top: 1.75rem;
}

#switch { display: none; }

/* ---------- Content ---------- */

#content {
    float: left;
    margin: 4rem 0 3rem;
    max-width: 62rem;
    overflow: hidden;
}

#article {
    margin-left: 2.75rem;
    font-size: 1.5rem;
    line-height: 1.85;
    color: #2c2c2c;
    letter-spacing: 0.03rem;
    text-align: justify;
    font-family: 'Source Serif Pro', Georgia, 'Hiragino Sans GB',
                 'Microsoft YaHei', 'PingFang SC', serif;
    word-break: normal;
}

/* ---------- Typography ---------- */

#article p {
    margin: 0 0 1.1em;
}

#article p.vspace { margin-top: .4em; }

#article h1,
#article h2,
#article h3,
#article h4 {
    color: #1f1f1f;
    font-family: 'Source Sans Pro', 'Hiragino Sans GB', 'Microsoft YaHei',
                 'PingFang SC', sans-serif;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.02rem;
}

#article h1 { font-size: 2.2rem; margin: 2.4em 0 .8em; }
#article h2 {
    font-size: 1.8rem;
    margin: 2.2em 0 .9em;
    padding-bottom: .35em;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
#article h3 { font-size: 1.55rem; margin: 1.8em 0 .6em; }
#article h4 { font-size: 1.4rem;  margin: 1.6em 0 .5em; }

#article h2:first-child,
#article h3:first-child { margin-top: 0; }

#article ul,
#article ol {
    padding-left: 1.8em;
    margin: 0 0 1.1em;
}

#article li { margin: .3em 0; }

#article li > ul,
#article li > ol { margin-bottom: 0; }

#article strong { color: #1f1f1f; font-weight: 600; }
#article em { font-style: italic; }

#article blockquote {
    margin: 1.2em 0;
    padding: .2em 1.2em;
    border-left: 3px solid rgba(90,122,58,0.4);
    color: #555;
    background: rgba(0,0,0,0.02);
}

/* indent / outdent helpers used by PmWiki */
.indent  { margin-left: 2em; }
.outdent { margin-left: 2em; text-indent: -2em; }

/* ---------- Code ---------- */

#article code,
#article pre,
#article tt,
code.escaped,
code.varlink {
    font-family: 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 0.92em;
}

#article p code,
#article li code,
#article td code {
    background: rgba(0,0,0,0.05);
    padding: .1em .4em;
    border-radius: 3px;
    color: #b5481f;                 /* 与主题呼应的暖橘 */
    letter-spacing: 0;
}

#article pre,
#article pre.escaped {
    background: #f6f3ee;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 4px;
    padding: 1em 1.2em;
    margin: 1.2em 0;
    overflow-x: auto;
    line-height: 1.55;
    font-size: 1.25rem;
    color: #333;
    letter-spacing: 0;
    tab-size: 4;
    -moz-tab-size: 4;
}

#article pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* ---------- PmWiki markup tables (side-by-side source / result) ---------- */

table.markup {
    width: 100%;
    margin: 1.5em 0;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

table.markup td {
    padding: 1em 1.2em;
    vertical-align: top;
}

table.markup td.markup1 {
    background: #f6f3ee;
    border-right: 1px solid rgba(0,0,0,0.08);
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 1.22rem;
    line-height: 1.6;
    white-space: pre-wrap;
    color: #333;
    letter-spacing: 0;
}

table.markup td.markup1 pre {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}

table.markup td.markup2 {
    background: #fff;
    font-size: 1.4rem;
}

table.markup.vert td {
    display: block;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

table.markup.vert td:last-child { border-bottom: 0; }

/* ---------- Generic tables ---------- */

#article table {
    border-collapse: collapse;
    margin: 1.2em 0;
}

#article table.tabtable {
    width: 100%;
    border: 1px solid rgba(0,0,0,0.1);
}

#article table.tabtable th,
#article table.tabtable td {
    padding: .55em .9em;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

#article table.tabtable th {
    background: #f2ede5;
    font-weight: 600;
    text-align: left;
    color: #1f1f1f;
}

/* ---------- Floats, frames, trails ---------- */

.rfloat { float: right; margin: 0 0 .8em 1.2em; }
.lfloat { float: left;  margin: 0 1.2em .8em 0; }

.frame {
    padding: .6em 1em;
    border: 1px solid rgba(0,0,0,0.12);
    background: rgba(255,255,255,0.6);
    border-radius: 3px;
}

.frame.rfloat,
.frame.lfloat {
    max-width: 20em;
    font-size: .92em;
}

.wikitrail {
    color: #777;
}

.wikitrail a { border-bottom: 0; }

/* anchor offsets (so jumping to #id doesn't hide under fixed header on mobile) */
#article [id] { scroll-margin-top: 5rem; }

/* ---------- Footer ---------- */

#footer {
    font-size: 1.1rem;
    text-align: center;
    margin: 2rem 0 5rem;
    color: #888;
}

#footer p { margin: 0; line-height: 1.7; }

#footer a { color: #888; }
#footer a:hover { color: #6b9443; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 63rem) {
    body { font-size: 1.5rem; }

    #main { margin: 0; max-width: 100%; }

    #header {
        float: none;
        width: 100%;
        max-width: 100%;
        text-align: left;
        border-right: 0;
        padding: 0 0 1.5rem;
        margin: 0;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
    }

    #banner {
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 100%;
        gap: 1rem;
    }

    #logo { margin: 2rem 0 0; }
    #logo img { width: 8rem; margin: 0; }

    #info {
        margin: 2rem 0 0;
        font-size: 1.3rem;
        flex: 1;
    }

    #info p {
        display: block;
        height: auto;
    }

    #nav {
        margin: 0 0 0 auto;
        text-align: right;
        font-size: 1.1rem;
    }

    #qr { display: none; }

    #content {
        float: none;
        width: 100%;
        max-width: 100%;
        padding: 1.5rem 0;
        margin: 0;
        border-top: 1px solid rgba(0,0,0,0.1);
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    #article {
        margin: 0;
        font-size: 1.4rem;
        line-height: 1.8;
    }

    #article h2 {
        font-size: 1.7rem;
        text-align: left;
    }
}

@media (max-width: 37rem) {
    #main { padding: 0; }

    #content {
        width: 100vw;
        margin-top: 6rem;
        padding: 1.2rem 0;
    }

    #article { margin: 0 1.5rem; font-size: 1.5rem; }

    /* markup 对照表改为上下堆叠 */
    table.markup.horiz td {
        display: block;
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    table.markup.horiz td:last-child { border-bottom: 0; }

    #footer { margin: 1.7rem 0 3rem; }

    #header {
        margin: 0;
        padding: 0;
        width: 100vw;
        background-color: #eaedef;
        border-bottom: 1px solid #ccc;
        overflow: hidden;
        height: 6rem;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        display: flex;
        align-items: center;
        gap: 0;
    }

    #banner { width: auto; max-width: 100%; flex: 1; gap: .5rem; }

    #logo { margin: 0.5rem 0; }
    #logo img { height: 5rem; width: auto; }

    #info { margin: 0; }
    #info p {
        display: inline;
        color: #555;
        margin: 0;
        font-size: 1.3rem;
        line-height: 1.7;
    }
    #info br { display: block; line-height: 1.9; }

    #nav { display: none; }

    #switch {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #bb4c20;
        background: #d0d8de;
        cursor: pointer;
        width: 6rem;
        height: 6rem;
        margin: 0;
        padding: 0;
        flex-shrink: 0;
    }
    #switch img { width: 100%; height: 100%; margin: 0; padding: 0; }
}

@media (max-width: 320px) {
    body { font-size: 1.5rem; }
    #info { display: none; }
}

/* ==========================================================================
   Overlay menu (mobile)
   ========================================================================== */

.overlay {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.92);
    overflow-y: auto;
    transition: height .25s ease;
}

.overlay-content {
    position: relative;
    top: 4rem;
    width: 100%;
    text-align: center;
    margin-top: 1rem;
}

.overlay a {
    padding: .6rem;
    text-decoration: none;
    font-size: 1.3rem;
    color: #bbb;
    display: block;
    transition: color .15s ease;
    border: 0;
}

.overlay a:hover,
.overlay a:focus {
    color: #fff;
}

.overlay .closebtn {
    position: absolute;
    top: .7rem;
    right: 1.2rem;
    font-size: 2.4rem;
}

/* ---------- Print ---------- */

@media print {
    body::before { display: none; }
    body { background: #fff; color: #000; }
    #header, #footer, #switch, .overlay { display: none; }
    #content, #article { width: 100%; max-width: 100%; margin: 0; }
    a { color: #000; border-bottom: 0; }
    #article pre { border: 1px solid #999; background: #f6f3ee; }
}