/* =========================================================
   角色查看器：与主题无关的布局修复（2026-10-01）
   ---------------------------------------------------------
   classic.css / tapiocamilktea.css 各自只管「外观」（贴图、配色），
   这里放两套主题都需要、且不该各写一份的东西：几何修正 + 响应式布局。
   由 index.php 在主题 CSS **之后** 引入，所以能覆盖主题里的写法；
   换主题时这个文件不受影响（主题切换只换 #stylesheet 那个 link）。
   ========================================================= */

/* ---------- 1) 物品可点 ---------- */
.ipop-item { cursor: pointer; }

.ipop-item:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  filter: brightness(1.3);
}

.ipop-hint {
  margin-left: 1em;
  font-size: .85em;
  opacity: .85;
  white-space: nowrap;
}

/* 窄屏：提示条另起一行，别把语言那一行撑宽（nowrap 会让整页横向溢出） */
@media (max-width: 720px) {
  .ipop-hint {
    display: block;
    margin: .4em 0 0;
    white-space: normal;
  }
}

/* ---------- 2) 颜色ID 那一行 ----------
   .sectionid 这个类名是加在 <td> 自己身上的；两套主题都写了 display:flex，
   而 td 一旦不是 table-cell，该列的宽度约束就失效 ——
   实测单元格被压到 32px、内容横向溢出 295px。
   改回 table-cell，用行内流式排布做「文字 + 图标 + 文字」一行。
   （图标的尺寸/显隐仍由各主题决定，这里不碰） */
.sectionid {
  display: table-cell;
  white-space: nowrap;
}

.sectionid_text {
  display: inline;
  white-space: nowrap;
}

.sectionid_image {
  display: inline-block;
  vertical-align: middle;
}

/* ---------- 3) 公告框 ----------
   tapioca 主题里是 height:110px + overflow-y:scroll：
   公告一长就被截掉最后几条、旁边还多出一条滚动条。
   统一改成跟着内容长高。 */
.notification {
  height: auto !important;
  min-height: 110px;
  overflow-x: hidden;
  overflow-y: hidden;
}

/* 日期列不换行；说明列占满剩余宽度 */
.notification td {
  vertical-align: top;
}

.notification td:first-child {
  white-space: nowrap;
}

.notification td:last-child {
  width: 100%;
}

/* ---------- 4) 搜索/筛选行 ----------
   三个输入框 + 筛选项加起来约 700px，窄屏不折行会把整页撑宽 */
.types,
.wordsearch {
  flex-wrap: wrap;
}

.word,
.elements,
.hit {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.input_text_wrap {
  flex-wrap: wrap;
  min-width: 0;
}

/* ---------- 5) 窄屏 ---------- */
@media (max-width: 915px) {
  /* 搜索区在窄屏靠折行 + 输入框可缩，不额外撑宽 */
  .wordsearch .sep {
    margin-right: 0.3em;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  /* 主标题：浏览器默认 h1 是 2em，小屏折行后会被 .header 的死高裁掉 */
  .header h1 {
    font-size: 1.5em;
    letter-spacing: 1px;
  }

  /* 公告表：日期/图标一行、正文独占一行 ——
     三列并排在手机上每列只剩一个字的宽度 */
  .notification tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .notification td {
    display: block;
  }

  .notification td:last-child {
    flex: 1 1 100%;
    padding-top: 0.2em;
  }

  .notification table {
    width: 100%;
  }

  /* 登录区（数据/时间戳/下载按钮挤在一排）：窄屏折行。
     不折的话整排 650px+ 把页面撑出横向滚动条，
     按钮还会被 flex 压成 29px 宽的竖条。 */
  .input_text_wrap > .lang {
    flex-wrap: wrap;
    row-gap: 0.4em;
    align-items: flex-start;
    min-width: 0;
  }

  .lang > select,
  .lang > button,
  .lang > label,
  .lang > .inputb {
    max-width: 100%;
  }

  /* 文件输入框按内容（"未选择文件"按钮+文件名）撑宽 330px+，极窄屏会顶破；
     登录区在 .lang 下、非登录区在 .input_text_btn 下，都覆盖 */
  .input_text_wrap .inputb {
    width: 100%;
    max-width: 100%;
  }

  /* 搜索/数据框左右 2em 内边距在手机上太占宽 */
  .sticky_indent {
    padding: 0 0.7em;
  }

  /* 数据表格内容最窄也有 410px（表格自身带 .data_body 背景，
     直接撑破 375 的视口）：给外层 #data 横滚，别撑破整页 */
  #data {
    overflow-x: auto;
  }
}

/* ---------- 6) 宽屏 ----------
   两块信息框并排；数据框按可用宽度自动排成 2~3 列，
   否则 1600+ 的屏幕上右边会空一大片。 */
@media (min-width: 1600px) {
  .contents {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    column-gap: 1.2em;
    align-items: start;
  }

  .contents > .notification_wrap {
    width: auto;
    max-width: none;
  }

  /* 选择文件 / 语言条 / 搜索 仍然整行 */
  .contents > .sticky {
    grid-column: 1 / -1;
  }

  /* 数据区整行，内部再排多列 */
  .contents > .data {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
    column-gap: 1.2em;
    align-items: start;
  }
}