/*
 * 全局样式表 负责：页面布局、排版、配色、打印样式、深色主题自适应
 *
 * 配色采用两层体系：
 *   1. --c-*   原始色板（纯色值）
 *   2. --color-* 语义令牌（引用色板，描述用途）
 * 深色主题仅覆写 --c-* 色板值，语义令牌自动跟随。
 */

:root {
    --c-body-bg:          #fcfcfc;
    --c-layer-bg:         #fcfcfc;
    --c-layer-border:     #e7d9e0;
    --c-layer-shadow:     #e2dee3;
    --c-flag:             #aca4a8;
    --c-accent:           #a36081;
    --c-text:             #3a3333;
    --c-hr:               #3a333320;
    --c-input-text-bg:    rgba(85, 86, 88, 0.15);
    --c-input-btn-bg:     rgba(85, 86, 88, 0.08);
    --c-scrollbar:        #cccccc20;
    --c-white:            #fff;
    --c-bg-image:         url(/static/img/bg.png);
}

/* =========================================================================
 * 语义令牌（引用色板，描述用途。深色主题覆写色板后自动更新）
 * ========================================================================= */
:root {
    /* ---- 字体 ---- */
    --font-sans: 'Source Sans Pro', 'MiSans', '等距更纱黑体 SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
    --font-code: 'Fira Code', Monaco, Consolas, 'MiSans', '等距更纱黑体 SC', 'Microsoft YaHei', sans-serif;
    --font-size-base: 15px;
    --line-height-base: 1.5rem;
    --line-height-content: 1.15;

    /* ---- 间距 ---- */
    --spacing-stack: 1em;
    --spacing-flag-bottom: 1em;
    --spacing-flag-height: 1em;
    --spacing-stack-bottom-gap: 0.2em;
    --spacing-layer-offset: -3px;
    --spacing-layer-bottom: 1px;
    --spacing-content-pad-v: 1em;
    --spacing-content-pad-h: 1.2em;
    --spacing-blockquote-pad: 24px 16px 12px;
    --spacing-blockquote-margin: 24px 0 36px;

    /* ---- 圆角 ---- */
    --radius-layer: 3.456789px;
    --radius-content: 3px;
    --radius-input: 1000px;

    /* ---- 语义颜色（引用色板） ---- */
    --color-body-bg:           var(--c-body-bg);
    --color-body-bg-image:     var(--c-bg-image);
    --color-layer-bg:          var(--c-layer-bg);
    --color-layer-border:      var(--c-layer-border);
    --color-layer-shadow:      var(--c-layer-shadow);
    --color-flag:              var(--c-flag);
    --color-flag-size:         14px;
    --color-link:              var(--c-accent);
    --color-content-text:      var(--c-text);
    --color-content-bg:        transparent;
    --color-hr-border:         var(--c-hr);
    --color-hr-width:          1.8px;
    --color-blockquote:        var(--c-accent);
    --color-blockquote-border: 2px solid;
    --color-input-text-bg:     var(--c-input-text-bg);
    --color-input-btn-bg:      var(--c-input-btn-bg);
    --color-input-height-text: 23px;
    --color-input-width-text:  160px;
    --color-input-height-btn:  20px;
    --color-scrollbar-thumb:   var(--c-scrollbar);

    /* ---- 图片 ---- */
    --img-max-width: 80%;
}

/* =========================================================================
 * 基础元素
 * ========================================================================= */
body {
    margin: 0;
    background: var(--color-body-bg-image) top left repeat var(--color-body-bg);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
}

textarea {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-content);
    margin: 0;
}

/* ---- 标题层级 (h1-h6) ---- */
h1, h2, h3, h4, h5, h6 {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
    line-height: 1.4;
    cursor: text;
    unicode-bidi: isolate;
}

h1 tt, h1 code,
h2 tt, h2 code,
h3 tt, h3 code,
h4 tt, h4 code,
h5 tt, h5 code,
h6 tt, h6 code {
    font-size: inherit !important;
}

h1 p, h2 p, h3 p, h4 p, h5 p, h6 p {
    margin-top: 0;
}

h1 { display: block; font-size: 1.125em; }
h2 { display: block; font-size: 1.05em;  unicode-bidi: isolate; }
h3 { display: block; font-size: 1em; }

/* ---- 段落 ---- */
p {
    word-spacing: 0.05rem;
    text-align: justify;
    display: block;
    margin-block-start: 0.25em;
    margin-block-end: 0.25em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}

/* ---- 代码块与行内代码 ---- */
pre {
    margin: 1em 0;
    padding: 0.8em 1em;
    border-radius: var(--radius-content);
    background-color: var(--color-scrollbar-thumb);
    overflow-x: auto;
    font-family: var(--font-code);
    font-size: 0.9rem;
    line-height: 1.55rem;
    color: var(--color-content-text);
    -webkit-font-smoothing: initial;
}

pre code {
    padding: 0;
    background: none;
    font-family: inherit;
    font-size: inherit;
}

code {
    padding: 0.15em 0.4em;
    border-radius: 3px;
    background-color: var(--color-scrollbar-thumb);
    font-family: var(--font-code);
    font-size: 0.9em;
    vertical-align: 0.5px;
}

/* ---- 列表 ---- */
ol li { margin-left: -4px; }
ol li p { margin-left: 4px; }

li {
    display: list-item;
    unicode-bidi: isolate;
}

/* 嵌套列表深度交替：ul-d0=■(marker)  ul-d1=□(before)  ul-d2=■  … */
.content ul.ul-d0 {
    list-style-type: square;
}

.content ul.ul-d1 {
    list-style: none;
}

.content ul.ul-d1 > li::before {
    content: "□";
    display: inline-block;
    width: 1em;
    margin-left: -0.8em;
    color: var(--color-content-text);
}

ul {
    list-style-type: square;
    line-height: 2rem;
}

ul, ol {
    padding-left: 30px;
}

/* ---- 任务列表（checkbox） ---- */
li:has(input[type="checkbox"]) {
    list-style: none;
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1em;
    height: 1em;
    margin: 0 0.4em 0 -0.8em;
    border: 1.5px solid var(--color-layer-border);
    border-radius: 3px;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
}

input[type="checkbox"]:checked {
    background-color: var(--color-layer-border);
}

input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 1px;
    width: 4px;
    height: 7px;
    border: solid var(--c-white);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

/* ---- 引用块 ---- */
blockquote {
    position: relative;
    padding: var(--spacing-blockquote-pad);
    margin: var(--spacing-blockquote-margin);
    font-size: 1em;
    font-style: normal;
    line-height: 1.6;
    color: var(--color-blockquote);
    text-indent: 0;
    border: none;
    border-left: var(--color-blockquote-border);
}

blockquote blockquote {
    padding-right: 0;
}

blockquote a {
    color: var(--color-flag);
}

/* =========================================================================
 * 核心布局：stack → layer 嵌套边框效果
 * ========================================================================= */
.stack {
    position: fixed;
    left: var(--spacing-stack);
    top: var(--spacing-stack);
    right: var(--spacing-stack);
    bottom: calc(var(--spacing-flag-bottom) + var(--spacing-flag-height) + var(--spacing-stack-bottom-gap));
}

.layer {
    position: absolute;
    left: var(--spacing-layer-offset);
    right: var(--spacing-layer-offset);
    top: var(--spacing-layer-offset);
    bottom: var(--spacing-layer-bottom);
    background-color: var(--color-layer-bg);
    border-radius: var(--radius-layer);
    border: 1px solid var(--color-layer-border);
    box-shadow: 0 0 5px 0 var(--color-layer-shadow);
}

/* =========================================================================
 * 底部标识栏
 * ========================================================================= */
.flag {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--spacing-flag-bottom);
    height: var(--spacing-flag-height);
    text-align: center;
    color: var(--color-flag);
    font-size: var(--color-flag-size);
}

/* =========================================================================
 * 超链接
 * ========================================================================= */
a:link,
a:visited,
a:active {
    color: var(--color-link);
    text-decoration: none;
    word-break: break-all;
    -webkit-tap-highlight-color: transparent;
}

/* =========================================================================
 * 全局
 * ========================================================================= */
*:focus {
    outline: none;
}

/* =========================================================================
 * 内容区域（textarea / div.content 共用）
 * ========================================================================= */
.content {
    width: 100%;
    height: 100%;
    min-height: 100%;
    resize: none;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-wrap: break-word;
    border-radius: var(--radius-content);
    box-sizing: border-box;
    border: none;
    padding: var(--spacing-content-pad-v) var(--spacing-content-pad-h);
    color: var(--color-content-text);
    background-color: var(--color-content-bg);
    font-size: 1.1em;
}

/* 渲染视图禁止选中/复制 */
#render-view .content {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* 代码块例外：允许选中复制 */
#render-view pre,
#render-view code {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

/* ---- 水平分割线 ---- */
hr {
    display: block;
    border: none;
    border-top: var(--color-hr-border) solid;
    border-width: var(--color-hr-width);
    margin-block-start: 3em;
    margin-block-end: 3em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    unicode-bidi: isolate;
    overflow: hidden;
}

/* ---- 打印专用容器（默认隐藏） ---- */
.print {
    display: none;
}

/* ---- 图片 ---- */
img {
    vertical-align: middle;
    max-width: var(--img-max-width);
}

/* =========================================================================
 * 表单控件
 * ========================================================================= */
input[type="text"] {
    appearance: none;
    border: unset;
    border-radius: var(--radius-input);
    background-color: var(--color-input-text-bg);
    height: var(--color-input-height-text);
    width: var(--color-input-width-text);
    padding: 0 10px;
}

input[type="button"] {
    appearance: none;
    border: unset;
    border-radius: var(--radius-input);
    background-color: var(--color-input-btn-bg);
    height: var(--color-input-height-btn);
}

input[type="text"]:hover,
input[type="button"]:hover {
    filter: contrast(3);
}

input[type="button"]:active {
    filter: contrast(2);
}

/* =========================================================================
 * 滚动条（桌面端）
 * ========================================================================= */
@media (pointer: fine) {
    ::-webkit-scrollbar {
        width: 0px;
    }
    ::-webkit-scrollbar-thumb {
        background: var(--color-scrollbar-thumb);
    }
}

/* =========================================================================
 * 打印样式
 * ========================================================================= */
@media print {
    .container, .stack, .layer, .flag {
        display: none;
    }
    .print {
        display: block;
    }
}

/* =========================================================================
 * 深色主题（跟随系统设置）
 * 仅覆写 --c-* 色板，语义令牌自动更新
 * ========================================================================= */
@media (prefers-color-scheme: dark) {
    :root {
        --c-body-bg:          #111329;
        --c-layer-bg:         #111329;
        --c-layer-border:     #020435;
        --c-layer-shadow:     #010a2082;
        --c-flag:             #8888b55b;
        --c-accent:           #8888b5;
        --c-text:             #ddddddee;
        --c-hr:               #dddddd3d;
        --c-input-text-bg:    rgba(225, 225, 225, 0.25);
        --c-input-btn-bg:     rgba(225, 225, 225, 0.25);
        --c-scrollbar:        rgba(80, 80, 89, 0.725);
        --c-bg-image:         url(/static/img/bg-dark.png);
    }
}