/*
 * 速刊主题 · 基础。移植自 sukan-ojs 的 sukanTheme（styles/sukan.css）。
 *
 * 内容依次是：设计变量、基础元素、状态基元（徽章、提示条）、阅读页共用的增强、打印样式、
 * 流式容器与共用按钮。声明原样保留，只把选择器改成了本系统模板的类名，对照表见 docs/design/门户主题.md。
 * 本文件不含业务内容、地址或数据假设。
 */

:root {
    --sukan-color-brand-surface: #17324d;
    --sukan-color-accent: #a8432b;
    --sukan-color-interactive: #1b5fa7;
    --sukan-color-interactive-hover: #134a85;
    --sukan-color-text: #1f2a37;
    --sukan-color-text-muted: #5a6675;
    --sukan-color-surface: #ffffff;
    --sukan-color-surface-subtle: #f4f6f8;
    --sukan-color-border: #c9d1db;
    --sukan-color-border-subtle: #e3e7ec;
    --sukan-color-success: #176b3a;
    --sukan-color-danger: #a12622;
    --sukan-color-warning: #7a4f00;
    --sukan-color-focus: #005fcc;
    --sukan-color-success-subtle: rgba(23, 107, 58, 0.12);
    --sukan-color-danger-subtle: rgba(161, 38, 34, 0.12);
    --sukan-color-warning-subtle: rgba(122, 79, 0, 0.12);
    --sukan-color-interactive-subtle: rgba(27, 95, 167, 0.1);
    --sukan-color-muted-subtle: rgba(107, 114, 128, 0.12);
    --sukan-shadow-card: 0 1px 2px rgba(23, 50, 77, 0.06);
    --sukan-shadow-card-hover: 0 0.25rem 0.875rem rgba(23, 50, 77, 0.1);

    --sukan-font-size-small: 0.875rem;
    --sukan-font-size-body: 1rem;
    --sukan-font-size-h4: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --sukan-font-size-h3: clamp(1.125rem, 1.04rem + 0.42vw, 1.375rem);
    --sukan-font-size-h2: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
    --sukan-font-size-h1: clamp(1.75rem, 1.45rem + 1.1vw, 2.25rem);
    --sukan-line-height-body: 1.65;
    --sukan-line-height-heading: 1.3;
    --sukan-line-height-control: 1.25;
    --sukan-line-height-input: 1.4;
    --sukan-line-height-small: 1.5;
    --sukan-font-weight-strong: 700;
    --sukan-reading-measure: 72ch;
    --sukan-container: 82.5rem;
    --sukan-gutter: clamp(1rem, 3vw, 2rem);

    --sukan-space-1: 0.25rem;
    --sukan-space-2: 0.5rem;
    --sukan-space-3: 0.75rem;
    --sukan-space-4: 1rem;
    --sukan-space-5: 1.5rem;
    --sukan-space-6: 2rem;
    --sukan-space-7: 3rem;

    --sukan-radius-small: 0.25rem;
    --sukan-radius-medium: 0.5rem;
    --sukan-touch-target: 2.75rem;
    --sukan-checkbox-size: 1.125rem;
    --sukan-textarea-min-size: 8rem;
    --sukan-focus-width: 0.1875rem;
    --sukan-focus-offset: 0.1875rem;
    --sukan-duration-standard: 160ms;
    --sukan-duration-reduced: 0.01ms;

    /* 以下几项在原主题里是直接写在规则中的色值，移植时收成变量，取值不变。 */
    --sukan-color-on-interactive: #fff;
    --sukan-color-footer-text: #c4cfdb;
    --sukan-color-footer-link: #e3ebf3;
    --sukan-color-footer-muted: #9fb0c2;
    --sukan-color-footer-rule: rgba(255, 255, 255, 0.14);
    --sukan-color-print-text: #000;
    --sukan-color-print-surface: #fff;
    --sukan-shadow-menu: 0 0.5rem 1rem rgba(23, 50, 77, 0.12);
    --sukan-shadow-cover: 0 0.5rem 1.25rem rgba(23, 50, 77, 0.18);
}

html,
body {
    color: var(--sukan-color-text);
    background: var(--sukan-color-surface-subtle);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
    font-size: var(--sukan-font-size-body);
    line-height: var(--sukan-line-height-body);
    /* 渐进增强：不支持 text-spacing 的浏览器会忽略这一行。 */
    text-spacing: ideograph-alpha allow-end;
}

.sukan_content,
.sukan_main,
.sukan_main > .sukan_view {
    min-inline-size: 0;
}

.sukan_main {
    overflow-wrap: anywhere;
}

.sukan_main h1,
.sukan_main h2,
.sukan_main h3,
.sukan_main h4 {
    color: var(--sukan-color-text);
    line-height: var(--sukan-line-height-heading);
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.sukan_main h1 {
    font-size: var(--sukan-font-size-h1);
}

.sukan_main h2 {
    font-size: var(--sukan-font-size-h2);
}

.sukan_main h3 {
    font-size: var(--sukan-font-size-h3);
}

.sukan_main h4 {
    font-size: var(--sukan-font-size-h4);
}

.sukan_main p,
.sukan_main li,
.sukan_main dd,
.sukan_main td,
.sukan_main th {
    overflow-wrap: anywhere;
}

.sukan_main a {
    color: var(--sukan-color-interactive);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
}

.sukan_main a:hover {
    color: var(--sukan-color-interactive-hover);
}

.sukan_page a:focus-visible,
.sukan_page button:focus-visible,
.sukan_page input:focus-visible,
.sukan_page select:focus-visible,
.sukan_page textarea:focus-visible,
.sukan_page summary:focus-visible,
.sukan_page [tabindex]:focus-visible {
    outline: var(--sukan-focus-width) solid var(--sukan-color-focus);
    outline-offset: var(--sukan-focus-offset);
}

.sukan_article_summary {
    display: flow-root;
    min-inline-size: 0;
    padding: var(--sukan-space-4);
    background: var(--sukan-color-surface);
    border: 1px solid var(--sukan-color-border-subtle);
    border-radius: var(--sukan-radius-medium);
    box-shadow: var(--sukan-shadow-card);
    overflow-wrap: anywhere;
    transition: border-color var(--sukan-duration-standard) ease, box-shadow var(--sukan-duration-standard) ease;
}

.sukan_article_summary:hover {
    border-color: var(--sukan-color-border);
    box-shadow: var(--sukan-shadow-card-hover);
}

.sukan_article_summary > .title {
    line-height: var(--sukan-line-height-heading);
}

.sukan_article_summary .meta,
.sukan_article_summary .subtitle,
.sukan_article_summary .pages,
.sukan_article_summary .published {
    color: var(--sukan-color-text-muted);
}

.sukan_breadcrumbs {
    max-inline-size: 100%;
}

.sukan_breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sukan-space-1);
}

.sukan_breadcrumbs li,
.sukan_breadcrumbs a,
.sukan_breadcrumbs .current,
.sukan_breadcrumbs .current h1 {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.sukan_breadcrumbs .separator {
    padding-inline: var(--sukan-space-1);
    color: var(--sukan-color-text-muted);
}

.sukan_notification {
    padding: var(--sukan-space-4);
    color: var(--sukan-color-text);
    background: var(--sukan-color-surface-subtle);
    border: 1px solid var(--sukan-color-border-subtle);
    border-inline-start: var(--sukan-space-2) solid var(--sukan-color-brand-surface);
    border-radius: var(--sukan-radius-small);
    overflow-wrap: anywhere;
}

.sukan_notification.success,
.sukan_notification .success {
    border-inline-start-color: var(--sukan-color-success);
}

.sukan_notification.error,
.sukan_notification.no,
.sukan_notification .error,
.sukan_notification .no {
    border-inline-start-color: var(--sukan-color-danger);
}

.sukan_notification.warning,
.sukan_notification .warning {
    border-inline-start-color: var(--sukan-color-warning);
}

/*
 * 可复用的状态基元：徽章与提示条。
 * 颜色只取自 --sukan-* 变量；状态总有文字相伴，不单靠颜色表达。
 */

.sukan_badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sukan-space-1);
    max-inline-size: 100%;
    padding: 0.125rem var(--sukan-space-2);
    color: var(--sukan-color-text);
    background: var(--sukan-color-surface-subtle);
    border: 1px solid var(--sukan-color-border-subtle);
    border-radius: 999px;
    font-size: var(--sukan-font-size-small);
    font-weight: var(--sukan-font-weight-strong);
    line-height: var(--sukan-line-height-small);
    overflow-wrap: anywhere;
}

.sukan_badge::before {
    content: "";
    flex: 0 0 auto;
    inline-size: 0.5em;
    block-size: 0.5em;
    background: currentColor;
    border-radius: 50%;
}

.sukan_badge--success {
    color: var(--sukan-color-success);
    background: var(--sukan-color-success-subtle);
    border-color: transparent;
}

.sukan_badge--warning {
    color: var(--sukan-color-warning);
    background: var(--sukan-color-warning-subtle);
    border-color: transparent;
}

.sukan_badge--danger {
    color: var(--sukan-color-danger);
    background: var(--sukan-color-danger-subtle);
    border-color: transparent;
}

.sukan_badge--interactive {
    color: var(--sukan-color-interactive-hover);
    background: var(--sukan-color-interactive-subtle);
    border-color: transparent;
}

.sukan_badge--muted {
    color: var(--sukan-color-text-muted);
    background: var(--sukan-color-muted-subtle);
    border-color: transparent;
}

.sukan_alert {
    padding: var(--sukan-space-3) var(--sukan-space-4);
    color: var(--sukan-color-text);
    background: var(--sukan-color-surface-subtle);
    border: 1px solid var(--sukan-color-border-subtle);
    border-inline-start: var(--sukan-space-1) solid var(--sukan-color-interactive);
    border-radius: var(--sukan-radius-small);
    overflow-wrap: anywhere;
}

.sukan_alert > :first-child {
    margin-block-start: 0;
}

.sukan_alert > :last-child {
    margin-block-end: 0;
}

.sukan_alert--info {
    background: var(--sukan-color-interactive-subtle);
    border-inline-start-color: var(--sukan-color-interactive);
}

.sukan_alert--success {
    background: var(--sukan-color-success-subtle);
    border-inline-start-color: var(--sukan-color-success);
}

.sukan_alert--warning {
    background: var(--sukan-color-warning-subtle);
    border-inline-start-color: var(--sukan-color-warning);
}

.sukan_alert--danger {
    background: var(--sukan-color-danger-subtle);
    border-inline-start-color: var(--sukan-color-danger);
}

.sukan_main table {
    inline-size: 100%;
    max-inline-size: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.sukan_main th,
.sukan_main td {
    padding: var(--sukan-space-2) var(--sukan-space-3);
    border: 1px solid var(--sukan-color-border-subtle);
    text-align: start;
    vertical-align: top;
}

.sukan_main th {
    background: var(--sukan-color-surface-subtle);
}

@media (min-width: 48rem) {
    .sukan_article_summary {
        padding: var(--sukan-space-5);
    }
}

@media (max-width: 29.99rem) {
    :root {
        --sukan-space-6: 1.5rem;
        --sukan-space-7: 2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sukan_article_summary {
        transition-duration: var(--sukan-duration-reduced);
    }
}

/*
 * 阅读页共用的增强：过刊列表、期次目录、文章详情。
 * 这里只管表现；内容的顺序、可见与否由服务端决定。
 */

.sukan_view_archive .sukan_archive_issues {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sukan-space-5);
    margin: var(--sukan-space-5) 0 0;
    padding: 0;
    border: 0;
    list-style: none;
}

.sukan_view_archive .sukan_archive_issues > li {
    min-inline-size: 0;
    padding: 0;
    border: 0;
}

.sukan_issue_toc .heading {
    min-inline-size: 0;
}

.description,
.pub_id,
.published) {
    margin-block-end: var(--sukan-space-5);
    padding: var(--sukan-space-4);
    background: var(--sukan-color-surface-subtle);
    border: 1px solid var(--sukan-color-border-subtle);
    border-radius: var(--sukan-radius-medium);
}

.sukan_issue_toc .sections:not(:first-child) {
    margin-block-start: var(--sukan-space-6);
}

.sukan_issue_toc .section {
    position: relative;
    margin: var(--sukan-space-6) 0 0;
    padding: var(--sukan-space-5) 0 0;
    border-block-start: 1px solid var(--sukan-color-border-subtle);
}

.sukan_issue_toc .section > h2,
.sukan_issue_toc .section > h3,
.sukan_issue_toc .section > h4 {
    position: static;
    display: block;
    margin: 0 0 var(--sukan-space-4);
    padding: 0;
    color: var(--sukan-color-text);
    background: transparent;
    font-size: var(--sukan-font-size-h3);
    font-weight: var(--sukan-font-weight-strong);
    line-height: var(--sukan-line-height-heading);
}

.sukan_issue_toc .articles,
.sukan_toc_list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sukan-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sukan_issue_toc .articles > li,
.sukan_toc_list > li {
    min-inline-size: 0;
    margin: 0;
}

.sukan_article_summary > .title {
    margin: 0;
    font-size: var(--sukan-font-size-h4);
}

.sukan_article_summary > .title a {
    text-decoration: none;
}

.sukan_article_summary > .title a:hover {
    text-decoration: underline;
}

.sukan_article_summary .meta {
    margin-block-start: var(--sukan-space-2);
    padding-block-start: 0;
    line-height: var(--sukan-line-height-small);
}

.sukan_article_summary .authors,
.sukan_article_summary .subtitle {
    overflow-wrap: anywhere;
}

.sukan_article_details > .page_title {
    max-inline-size: var(--sukan-reading-measure);
    margin: 0;
}

.sukan_article_details > .subtitle {
    max-inline-size: var(--sukan-reading-measure);
    margin-block-start: var(--sukan-space-2);
    color: var(--sukan-color-text-muted);
    line-height: var(--sukan-line-height-heading);
}

.sukan_article_details .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: var(--sukan-space-6) 0 0;
    background: var(--sukan-color-surface);
    border: 1px solid var(--sukan-color-border-subtle);
    border-radius: var(--sukan-radius-medium);
    overflow: hidden;
}

.sukan_article_details .main_entry,
.sukan_article_details .entry_details {
    float: none;
    inline-size: auto;
    width: auto;
    min-inline-size: 0;
    margin: 0;
    border: 0;
}

.sukan_article_details .main_entry .item,
.sukan_article_details .entry_details .item {
    padding: var(--sukan-space-4);
    overflow-wrap: anywhere;
}

.sukan_article_details .main_entry .item + .item,
.sukan_article_details .entry_details .item + .item {
    border-block-start: 1px solid var(--sukan-color-border-subtle);
}

.sukan_article_details .main_entry .item > .label,
.sukan_article_details .entry_details .item .label {
    color: var(--sukan-color-text);
    line-height: var(--sukan-line-height-heading);
}

.sukan_article_details .main_entry .abstract {
    max-inline-size: var(--sukan-reading-measure);
}

.sukan_article_details .main_entry .abstract > :first-child,
.sukan_article_details .entry_details .value > :first-child {
    margin-block-start: 0;
}

.sukan_article_details .main_entry .abstract > :last-child,
.sukan_article_details .entry_details .value > :last-child {
    margin-block-end: 0;
}

.sukan_article_details ul.authors {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sukan_article_details ul.authors {
    display: grid;
    gap: var(--sukan-space-3);
}

.sukan_article_details ul.authors > li {
    margin: 0;
}

.sukan_article_details .authors .affiliation,
.sukan_article_details .keywords .value,
.sukan_article_details .entry_details .value {
    color: var(--sukan-color-text-muted);
    overflow-wrap: anywhere;
}

.sukan_article_details .entry_details {
    background: var(--sukan-color-surface-subtle);
    border-block-start: 1px solid var(--sukan-color-border-subtle);
}

@media (min-width: 48rem) {
    .sukan_view_archive .sukan_archive_issues {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sukan_article_details .main_entry .item,
    .sukan_article_details .entry_details .item {
        padding: var(--sukan-space-5);
    }
}

@media (min-width: 64rem) {
    .sukan_article_details .row {
        grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    }

    .sukan_article_details .main_entry {
        grid-column: 1;
        grid-row: 1;
    }

    .sukan_article_details .entry_details {
        grid-column: 2;
        grid-row: 1;
        border-block-start: 0;
        border-inline-start: 1px solid var(--sukan-color-border-subtle);
    }
}

/* 年份索引版式（原“历史过刊”页）：只管表现。 */

.sukan_history__years {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sukan-space-5);
}

@media (min-width: 48rem) {
    .sukan_history__years {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*
 * 最小的打印样式：去掉吸顶页头、首页操作按钮、侧栏、页脚导航和工作入口；
 * 正文黑字白底，链接不展开成地址。
 */
@media print {
    .sukan_head,
    .sukan_hero__actions,
    .sukan_issue_sidebar,
    .sukan_homepage_sidebar,
    .sukan_history__sidebar,
    .sukan_footer__navigation,
    .sukan_role_entries {
        display: none;
    }

    html,
    body {
        color: var(--sukan-color-print-text);
        background: var(--sukan-color-print-surface);
    }

    .sukan_content,
    .sukan_main {
        float: none;
        inline-size: 100%;
        width: 100%;
        margin-inline: 0;
        padding-block-start: 0;
    }
}

/* ===== 原 styles/layout.css ===== */

/*
 * 页面版式：页头、正文、页脚共用一个流式容器，最大 1320px。
 */

.sukan_page {
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
    background: var(--sukan-color-surface-subtle);
}

.sukan_content,
.sukan_footer_container,
.sukan_header_inner {
    box-sizing: border-box;
    inline-size: min(100% - 2 * var(--sukan-gutter), var(--sukan-container));
    max-inline-size: var(--sukan-container);
    margin-inline: auto;
}

.sukan_content {
    flex: 1 0 auto;
    padding-block: var(--sukan-space-5) var(--sukan-space-7);
    background: transparent;
}

.sukan_main {
    background: transparent;
}

.sukan_main > .sukan_view,
.sukan_main > .sukan_view_home,
.sukan_main > .sukan_view_article,
.sukan_main > .sukan_view_issue,
.sukan_main > .sukan_view_archive,
.sukan_main > .sukan_history {
    inline-size: 100%;
    max-inline-size: none;
}

/* 共用按钮；页面的主要操作加 --primary。 */
.sukan_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-block-size: var(--sukan-touch-target);
    padding: var(--sukan-space-2) var(--sukan-space-5);
    color: var(--sukan-color-brand-surface);
    background: var(--sukan-color-surface);
    border: 1px solid var(--sukan-color-border);
    border-radius: var(--sukan-radius-small);
    font-weight: 600;
    line-height: var(--sukan-line-height-control);
    text-decoration: none;
    transition: background-color var(--sukan-duration-standard) ease, border-color var(--sukan-duration-standard) ease, color var(--sukan-duration-standard) ease;
}

.sukan_main a.sukan_button {
    color: var(--sukan-color-brand-surface);
}

.sukan_main a.sukan_button:hover,
.sukan_main a.sukan_button:focus {
    color: var(--sukan-color-interactive);
    border-color: var(--sukan-color-interactive);
}

.sukan_main a.sukan_button--primary {
    color: var(--sukan-color-on-interactive);
    background: var(--sukan-color-interactive);
    border-color: var(--sukan-color-interactive);
}

.sukan_main a.sukan_button--primary:hover,
.sukan_main a.sukan_button--primary:focus {
    color: var(--sukan-color-on-interactive);
    background: var(--sukan-color-interactive-hover);
    border-color: var(--sukan-color-interactive-hover);
}