/*===Machining: Units===*/
.container-header {
    display: flex;
    align-items: center;
    max-width: var(--box-80);
    margin: 0 auto;
    padding: var(--gap-3) var(--gap-4);
    line-height: var(--text-l-tight);
}

.container-main {
    display: grid;
    align-items: start; /*头对齐不等高*/
    max-width: var(--box-80);
    margin: var(--gap-2) auto;
    padding: 0 var(--gap-4);
    grid-template-columns: var(--box-10) 1fr var(--box-10); /*160px+自适应+160px*/
    gap: var(--gap-6);
    line-height: var(--text-l);
}

.container-main.with-aside {
    grid-template-columns: 0 1fr var(--box-20); /*自适应+320px*/
}

@media (max-width: 768px) {
    .container-main,
    .container-main.with-aside {
        grid-template-columns: 0 1fr 0;
    }
}

.container-footer {
    max-width: var(--box-80);
    margin: 0 auto;
    padding: 0 var(--gap-4);
    line-height: var(--text-l-tight);
}

.container-footer p {
    margin: var(--gap-1) 0;
}

.main-center {
    min-width: 0;
}

.main-dock,
.main-aside {
    position: static;
}

.main-dock.sticky,
.main-aside.sticky {
    position: sticky;
    top: var(--gap-4);
    align-self: flex-start;
}

/*pagination*/
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: var(--space-8) 0;
}

/*===Machining: Components===*/

/*menu*/
.menu {
    display: flex;
    align-items: center;
    margin: 0 var(--gap-4);
    margin-left: auto;
    padding: 0;
    gap: var(--gap-2);
    list-style: none;
}

/*menu-manual
    ul:menu(
        li:menu-item(
            button:menu-button
            ul:menu-dropdown(
                li:menu-item(...)
            )
        )
    )
*/

/*menu-conditonal*/
.menu-item {
    position: relative;
}

.menu-item a {
    text-decoration: none;
}

.menu-button {
    display: flex; /*图标文字并排*/
    align-items: center; /*图标文字对齐*/
    border: none;
    border-radius: var(--border-r);
    padding: var(--gap-2) var(--gap-2); /*2,2*/
    background: none;
    font-size: var(--font-s-xl);
    color: var(--text-c-title);
    transition: var(--transition-all);
}

.menu-button:hover {
    background: var(--highlight-cl);
    color: var(--text-c-hover);
}

.menu-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: var(--box-12);
    margin: 0;
    border: var(--border-l) var(--border-c);
    border-radius: var(--border-r);
    padding: var(--gap-2); /*2,2*/
    background: var(--bg-c-elevate);
    list-style: none;
    box-shadow: var(--shadow-light);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-all);
}

.menu-dropdown .menu-button {
    font-size: var(--font-s-l);
}

.menu-dropdown .menu-dropdown {
    top: 0;
    left: 100%;
}

.menu-item:hover > .menu-dropdown {
    margin-top: var(--gap-1);
    opacity: 1;
    visibility: visible;
}

/*search*/
.search {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: var(--gap-2);
    width: 100%;
    /*max-width: var(--box-40);*/
}

/*search-manual
    div:search(
        input()
        button()
    )
*/

/*search-conditional*/
.search input {
    flex: 1;
    border: var(--border-l) var(--border-c-accent);
    border-radius: var(--border-r);
    padding: var(--gap-2) var(--gap-3); /*2,3*/
    background: var(--bg-c-elevate);
    font-weight: var(--font-w-normal);
}

.search input:focus {
    outline: var(--border-l-hover) var(--border-c-hover);
    outline-offset: -1px;
    font-weight: var(--font-w-bold);
    box-shadow: var(--shadow-focus);
}

.search input::placeholder {
    color: var(--text-c);
}

.search button {
    border: var(--border-l) var(--border-c-accent);
    border-radius: var(--border-r);
    padding: var(--gap-2) var(--gap-4); /*2,4*/
    background: var(--button-c);
    font-weight: var(--font-w-normal);
    color: var(--text-c-accent);
    white-space: nowrap;
    transition: var(--transition-all);
}

.search button:hover {
    outline: var(--border-l-hover) var(--border-c-hover);
    outline-offset: -1px;
    background-color: var(--button-c-hover);
    font-weight: var(--font-w-bold);
    color: var(--text-c-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

/*excerpt*/
.excerpt {
    margin: var(--gap-2) 0;
    border: var(--border-l) var(--border-c);
    border-radius: var(--border-r);
    padding: var(--gap-4);
}

.excerpt a {
    color: inherit; /* 继承父级文本色 */
}

/*excerpt-manual
    article:excerpt(
        div:meta(
            time()
            ul:tags(li(a()))
        )
        div:summary(
            h2(a())
            p()
        )
        a:more()
    )
    article:excerpt(
        h3()
        ul(
            li(a())
            li(a())
            ...
        )
        a:more()
    )
    article:excerpt(
        figtitle()
        iframe()
        figcaption()
    )
*/

/*excerpt-conditional*/
.meta {
    display: flex;
    align-items: center;
    margin-bottom: var(--gap-1);
    gap: var(--gap-2);
    font-family: var(--font-f-code);
    font-size: var(--font-s-s);
    color: var(--text-c-accent);
}

.tags {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: var(--gap-2);
    font-family: var(--font-f-code);
    font-size: var(--font-s-s);
    list-style: none;
}

.tags li {
    margin: 0;
    border-radius: var(--tag-r);
    padding: 0 var(--gap-1);
    background: var(--bg-c-descend);
    transition: var(--transition-all);
}

.tags li:hover {
    font-weight: var(--font-w-bold);
    background-color: var(--bg-c-elevate);
    color: var(--text-c-hover);
    /*transform: translateY(-1px);*/
}

.summary {
    margin-bottom: var(--gap-1);
}

.summary h2,
.summary h3,
.summary h4 {
    margin-top: var(--gap-1);
    padding-top: var(--gap-1);
    font-family: var(--font-f-head);
}

.readmore {
    font-weight: var(--font-w-medium);
    text-decoration: none;
    transition: var(--transition-all);
}

/*.excerpt a.readmore {
    color: var(--text-c-accent);
}*/

.readmore:hover {
    color: var(--text-c-hover);
}

/*post card*/
.post {
    margin-bottom: var(--gap-2);
    border-bottom: var(--border-l) var(--border-c);
    padding-bottom: var(--gap-2);
} /*大封装*/
.post h1,
.post h2,
.post h3,
.post h4 {
    margin-top: var(--gap-2);
    border-top: var(--border-l) var(--border-c);
    padding-top: var(--gap-2);
}

/*featured works*/
.featured-works {
    display: block;
} /* to be confirmed */

/*progress heatmap*/
.progress {
    display: block;
} /* to be confirmed */
.heatmap {
    display: block;
} /* to be confirmed */
.events {
    display: block;
} /* to be confirmed */

/*shortcut*/

/*reference*/

/*===Machining: Assemblies===*/

/*brand*/
/*brand-manual
    div:brand(
        div:brand-title()
        div:brand-subtitle()
    )
*/

.brand-title {
    font-family: var(--font-f-head);
    font-size: var(--font-s-2xl);
    font-weight: var(--font-w-bold);
    color: var(--text-c-title);
    line-height: var(--text-l-tight);
}

.brand-subtitle {
    margin-top: var(--gap-1);
    border-top: var(--border-l) var(--border-c);
    font-family: var(--font-f-base);
    font-size: var(--font-s-s);
    color: var(--text-c);
}

/*toggle*/
/*toggle-manual
    button:toggle(
        svg()
        svg:dark()
    )
*/

.toggle {
    position: relative;
    width: var(--button-s-toggle);
    height: var(--button-s-toggle);
    background: none;
    border: var(--border-l) var(--border-c);
    border-radius: 50%;
    transition: var(--transition-all);
}

.toggle:hover {
    outline: var(--border-l-hover) var(--border-c-hover);
    outline-offset: -1px;
    background-color: var(--bg-c-descend);
    box-shadow: var(--shadow-focus);
}

.toggle svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--button-s-svg);
    height: var(--button-s-svg);
    stroke: var(--text-c-title);
    stroke-width: 2px;
    fill: none;
    transform: translate(-50%, -50%); /*center to upper-left*/
    transition: var(--transition-opacity);
}

.toggle:hover svg {
    stroke: var(--text-c-hover);
    stroke-width: 2px;
}

.toggle svg.dark {
    opacity: 0;
}

[data-theme="dark"] .toggle svg {
    opacity: 0;
}

[data-theme="dark"] .toggle svg.dark {
    opacity: 1;
}

/*===Machining: Parts===*/