/* base.css：布局、响应式、CJK 字体回退；皮肤交给主题 CSS（PRD 6.2）。
   模板按 98.css 的 class 约定书写，这里只补 98.css 没有的部分。 */

:root {
  --site-width: 960px;
  --gap: 8px;
  --touch: 44px;
}

/* 文字沿用浏览器默认字号（98.css / XP.css 写死 11-12px，这里统一还原） */
body,
.title-bar,
.window,
button,
input,
label,
legend,
li[role="tab"],
option,
select,
table,
textarea,
ul.tree-view {
  font-size: 1rem;
}

body {
  margin: 0;
  background: #008080; /* Win98 桌面青色 */
}

.site {
  max-width: var(--site-width);
  margin: 16px auto;
}

/* ---- 菜单栏 ---- */
.menubar {
  padding: 2px var(--gap);
}
.menubar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.menubar-items {
  display: flex;
  align-items: center;
  gap: calc(var(--gap) * 2);
}
/* 语言、主题、登录状态靠右 */
.menu-push {
  margin-left: auto;
}
/* 语言 / 主题下拉：<details>，无 JS 可用 */
.menu-drop {
  position: relative;
}
.menu-drop > summary {
  cursor: pointer;
}
.menu-drop > ul {
  position: absolute;
  right: 0;
  z-index: 20;
  min-width: 120px;
}
.menu-drop > ul a {
  display: block;
  padding: 4px 8px;
}
.menu-drop a[aria-current] {
  font-weight: bold;
}
.menubar a {
  color: inherit;
  text-decoration: none;
}
.menubar a:hover,
.menubar a:focus-visible {
  text-decoration: underline;
}
.start-menu {
  display: none;
  position: relative;
}
/* 98.css 不给 summary 加样式，这里沿用其按钮立体边框 */
.start-menu > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 12px;
  font-weight: bold;
  list-style: none;
  cursor: pointer;
  background: silver;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
}
.start-menu > summary::-webkit-details-marker {
  display: none;
}
.start-menu[open] > summary {
  box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
}
.start-menu > ul {
  position: absolute;
  z-index: 10;
  min-width: 180px;
}
.start-menu > ul a,
.start-menu > ul .menubar-user,
.start-menu > ul .link-button {
  display: flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 12px;
}

/* 开始菜单里的下拉就地展开 */
.start-menu .menu-push {
  margin-left: 0;
}
.start-menu .menu-drop > summary {
  display: flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 12px;
}
.start-menu .menu-drop > ul {
  position: static;
  box-shadow: none;
  border: 0;
  background: transparent;
  padding-left: 12px;
}

/* ---- 错误页 ---- */
.error-dialog {
  max-width: 400px;
  margin: 32px auto;
}
.error-actions {
  justify-content: flex-end;
}

/* ---- 表单 ---- */
.auth-dialog {
  max-width: 360px;
  margin: 32px auto;
}
.auth-dialog input:not([type="hidden"]) {
  box-sizing: border-box;
  width: 100%;
}
.form-actions {
  justify-content: space-between;
  align-items: center;
}
.form-error {
  color: #a00;
}
.hint {
  color: #444;
}
/* 蜜罐：移出视口而非 display:none，部分机器人会跳过 display:none 的字段 */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* 菜单里的登出是 POST 表单，按钮做成链接外观 */
.inline-form {
  display: inline;
  margin: 0;
}
.link-button {
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.link-button:hover,
.link-button:focus-visible {
  text-decoration: underline;
}
.menubar-user {
  font-weight: bold;
}

/* ---- 通用 ---- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.window-body h1 {
  margin: 0 0 4px;
  font-size: 1.5em;
}
.section-title {
  margin: 12px 0 4px;
  font-size: 1.15em;
}
.breadcrumb {
  margin-bottom: var(--gap);
}
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--gap);
}
.notice {
  padding: 4px var(--gap);
  background: #ffffe1; /* Win98 气泡提示的浅黄 */
  border: 1px solid #000;
}
/* 链接做成 98.css 按钮外观（「发新主题」等导航入口不必用表单） */
.button-link {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 0 12px;
  white-space: nowrap;
  color: #000;
  text-decoration: none;
  background: silver;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
}
.button-link:active {
  box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
}
.badge {
  padding: 0 3px;
  font-size: 0.9em;
  color: #fff;
  background: navy;
}

/* ---- 列表（版块 / 主题），窄屏卡片化见下方媒体查询 ---- */
.list-table {
  width: 100%;
}
.list-table .num {
  text-align: right;
  white-space: nowrap;
}
.list-table .col-last {
  white-space: nowrap;
}
.board-tag {
  color: inherit;
}
.sort-links,
.pager {
  margin: 4px 0;
}
.pager {
  text-align: right;
}

/* ---- 主题页 ---- */
/* 98.css 的 .title-bar-text 是 div 样式，主题标题用 h1 时复位字号与外边距 */
h1.title-bar-text {
  margin: 0;
  font-size: inherit;
}
.memory,
.reply-box,
.post-dialog {
  margin: var(--gap) 0;
}
.meta {
  margin: 0 0 var(--gap);
  color: #444;
}
/* 用户内容：长 URL、长英文单词不撑破窄屏 */
.content {
  overflow-wrap: anywhere;
}
.content pre {
  overflow-x: auto;
}
.rules {
  margin: var(--gap) 0;
}
.rules > summary {
  cursor: pointer;
}
.mod-panel {
  margin: var(--gap) 0;
}
.mod-panel form + form {
  margin-top: 4px;
}
.reply {
  padding: var(--gap) 0;
  border-bottom: 1px solid grey;
}
.reply:target {
  background: #ffffe1;
}
.reply .content > :first-child {
  margin-top: 0;
}
.post-dialog input[type="text"],
.post-dialog textarea,
.reply-box textarea {
  box-sizing: border-box;
  width: 100%;
}
.form-actions-end {
  justify-content: flex-end;
}

/* 点赞与举报 */
.memory-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--gap);
}
.like-form {
  margin: 0;
}
.like-form button[aria-pressed="true"] {
  font-weight: bold;
  box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
}
.report > summary {
  cursor: pointer;
  color: #444;
}
.report-form {
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.report-form > * {
  margin: 0;
}
.reply .report {
  font-size: 0.9em;
}

/* 编辑器（PRD 4.3） */
.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 2px 0;
}
.editor-toolbar[hidden] {
  display: none;
}
.editor-toolbar button {
  min-width: 0;
  padding: 0 8px;
}
.editor-count {
  margin-left: auto;
  color: #444;
}
.editor-count.over {
  color: #a00;
  font-weight: bold;
}
.editor-preview {
  min-height: 6em;
  padding: var(--gap);
  background: #fff;
  box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}

/* 首页公告；吧页「只看精华」；搜索 */
.announcement > :first-child {
  margin-top: 0;
}
.announcement > :last-child {
  margin-bottom: 0;
}
.featured-toggle {
  margin: 4px 0;
}
.featured-toggle a {
  color: inherit;
}
.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--gap);
  margin-bottom: var(--gap);
}
.search-form input[type="search"] {
  flex: 1 1 12em;
}

/* ---- 后台（固定 win98，PRD 5） ---- */
.admin-tabs {
  flex-wrap: wrap;
}
.admin-panel {
  margin-bottom: var(--gap);
}
.admin-filter,
.admin-batch,
.source-clean {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--gap);
  margin: 0 0 var(--gap);
}
.admin-filter > *,
.admin-batch > *,
.source-clean > * {
  margin: 0; /* 抵消 98.css .field-row > * + * 的左外边距，改由 gap 控制 */
}
.admin-batch {
  margin-top: var(--gap);
}
.source-clean {
  padding: 4px var(--gap);
  background: #ffffe1;
  border: 1px solid #000;
}
.admin-table {
  width: 100%;
}
.admin-table .num {
  text-align: right;
}
.admin-table .col-title,
.admin-table .excerpt {
  white-space: normal;
  min-width: 12em;
}
.admin-table .json code {
  display: block;
  max-width: 24em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.admin-meta th {
  width: 8em;
}
.hash {
  overflow-wrap: anywhere;
}
.admin-preview {
  padding: var(--gap);
  background: #fff;
}
.admin-form fieldset {
  margin: var(--gap) 0;
}
.admin-form input[type="text"],
.admin-form textarea {
  box-sizing: border-box;
  width: 100%;
}
.admin-mods li + li {
  margin-top: 4px;
}
.alert {
  padding: 0 4px;
  font-weight: bold;
  color: #fff;
  background: #a00;
}
.icon-button {
  min-width: 23px;
  padding: 0 4px;
}
.mod-more {
  margin: 4px 0 0;
}
.queue-item {
  margin-bottom: var(--gap);
  padding: var(--gap);
  border: 1px solid grey;
}
.queue-item.is-current {
  outline: 2px solid navy;
}
.queue-item .meta,
.queue-reason {
  margin: 0 0 4px;
}
.report-notes {
  color: #444;
}
.settings-form .field-row label {
  min-width: 14em;
}

/* ---- XP 主题：XP.css 之外、base.css 里写死的 Win98 皮肤部分 ---- */
[data-theme="xp"] body {
  background: #004e98; /* XP 默认桌面蓝 */
}
[data-theme="xp"] .button-link {
  border: 1px solid #003c74;
  border-radius: 3px;
  box-shadow: none;
  background: linear-gradient(180deg, #fff, #ecebe6 86%, #d6d0c5);
}
[data-theme="xp"] .start-menu > summary {
  color: #fff;
  font-style: italic;
  border-radius: 0 8px 8px 0;
  box-shadow: none;
  background: linear-gradient(180deg, #3c9c3c, #2a8a2a 50%, #1e761e);
}
[data-theme="xp"] .like-form button[aria-pressed="true"] {
  box-shadow: inset 0 0 3px 1px #e59700;
}

/* ---- brutalist 主题：base.css 里写死的 Win98 皮肤一律还原成白底黑线 ---- */
[data-theme="brutalist"] body {
  background: #fff;
}
[data-theme="brutalist"] .site {
  margin: 0 auto;
  padding: 0 16px;
  border: 0;
}
[data-theme="brutalist"] h1.title-bar-text {
  font-size: 1.5em;
}
[data-theme="brutalist"] .menubar {
  padding: 2px 0;
  border-bottom: 1px solid #000;
}
[data-theme="brutalist"] .menubar a {
  color: #00f;
  text-decoration: underline;
}
[data-theme="brutalist"] .menubar a:hover {
  color: #f00;
}
[data-theme="brutalist"] .link-button {
  min-height: 0;
  color: #00f;
  text-decoration: underline;
  border: 0;
  outline: 0;
  background: none;
}
[data-theme="brutalist"] .button-link,
[data-theme="brutalist"] .start-menu > summary {
  color: #000;
  text-decoration: none;
  background: #dfdfdf;
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  outline: 1px solid #000;
}
[data-theme="brutalist"] .button-link:active,
[data-theme="brutalist"] .start-menu[open] > summary,
[data-theme="brutalist"] .like-form button[aria-pressed="true"] {
  border-color: #808080 #fff #fff #808080;
}
[data-theme="brutalist"] .notice,
[data-theme="brutalist"] .source-clean,
[data-theme="brutalist"] .reply:target {
  background: #fff;
}
[data-theme="brutalist"] .reply:target {
  outline: 1px dotted #000;
}
[data-theme="brutalist"] .reply {
  border-bottom-color: #000;
}
[data-theme="brutalist"] .badge {
  padding: 0 2px;
  color: #000;
  background: #fff;
  border: 1px solid #000;
}
[data-theme="brutalist"] .alert,
[data-theme="brutalist"] .form-error,
[data-theme="brutalist"] .editor-count.over {
  color: #f00;
  background: #fff;
}
[data-theme="brutalist"] .hint,
[data-theme="brutalist"] .meta,
[data-theme="brutalist"] .report > summary,
[data-theme="brutalist"] .editor-count {
  color: #000;
}
[data-theme="brutalist"] .editor-preview {
  border: 1px solid #000;
}
[data-theme="brutalist"] .board-tag,
[data-theme="brutalist"] .featured-toggle a {
  color: #00f;
}

/* ---- CJK 字体回退：拉丁字符仍用像素字体，中日文落到当年的系统字体（PRD 6.4） ----
   :lang() 命中带 lang 的元素及其全部后代，内容容器需标注 lang（内容语言），<html lang> 为 UI 语言。 */
:root:not([data-theme="brutalist"]) :lang(zh):not(code, pre, kbd, samp) {
  font-family: "Pixelated MS Sans Serif", "SimSun", "宋体", "Songti SC", sans-serif;
}
:root:not([data-theme="brutalist"]) :lang(ja):not(code, pre, kbd, samp) {
  font-family: "Pixelated MS Sans Serif", "MS UI Gothic", "MS PGothic", "Hiragino Sans", sans-serif;
}

/* ---- 窄屏（PRD 6.5） ---- */
@media (max-width: 639px) {
  .site {
    margin: 0;
    max-width: none;
    min-height: 100dvh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }
  .site > main {
    flex: 1;
  }
  .menubar-items {
    display: none;
  }
  .start-menu {
    display: inline-block;
  }

  /* 列表改卡片：隐藏表头与「最后回复」列，每行一张卡 */
  .list-table thead,
  .list-table .col-last {
    display: none;
  }
  .list-table tr,
  .list-table td {
    display: block;
  }
  .list-table tr {
    padding: var(--gap) 0;
    border-bottom: 1px solid grey;
  }
  /* 标题独占一行，作者与计数并成第二行 */
  .list-table td:not(.col-title, .col-last) {
    display: inline;
  }
  .list-table .num::before {
    content: " · " attr(data-label) " ";
  }
  .page-head {
    flex-direction: column;
  }

  .error-dialog,
  .auth-dialog {
    margin: 16px auto;
  }
}

/* 触控设备或窄屏：可点元素至少 44px */
@media (max-width: 639px), (pointer: coarse) {
  button,
  input:not([type="checkbox"], [type="radio"]),
  select,
  summary {
    min-height: var(--touch);
  }
}

/* 标题栏左侧站点 logo：16px 图标 + 站名，链接回首页 */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}