/* 已读追踪后台 · 业务层样式（项目命名 .rrt-*）
 *
 * 资源库（ui-resource-module，preset-liquid）负责材质 / 配色 / 控件状态 / 动效；
 * 这里只补业务**细化**：间距尺度、字号层级、对齐、信息密度、微交互。
 *
 * 边界（v1.4.1 重抠、v1.4.2 打磨时明确）：
 *   - 不重定义任何 `--ui-*` 令牌；
 *   - 所有对公共组件的细化都**限定在业务作用域内**（`.rrt-app` / `.rrt-page`
 *     / `.rrt-login`），不修改公共 `.ui-*` 的默认外观，避免污染其它页面；
 *   - 颜色一律取自令牌（含 color-mix 派生的发丝线），保证深/浅主题同时成立。
 */

/* ---------- 业务令牌（只在业务作用域内生效） ---------- */
.rrt-app,
.rrt-page {
  /* 发丝线从主题 ink 派生：浅色主题下不会出现「白线看不见」的问题 */
  --rrt-hair: color-mix(in srgb, var(--ui-color-ink) 10%, transparent);
  --rrt-hair-soft: color-mix(in srgb, var(--ui-color-ink) 6%, transparent);
  --rrt-tint: color-mix(in srgb, var(--ui-color-accent) 7%, transparent);
  --rrt-tint-soft: color-mix(in srgb, var(--ui-color-accent) 4%, transparent);
  /* 行卡片底色：比画布略实一点的一点墨，深浅主题都成立 */
  --rrt-card: color-mix(in srgb, var(--ui-color-ink) 3%, transparent);
  --rrt-card-hover: color-mix(in srgb, var(--ui-color-accent) 6%, transparent);
  --rrt-radius: var(--ui-radius-md);
}

/* ---------- 页面容器 ---------- */
/* grid 单列栈：页内每个卡片/区块之间的间距由这里统一给。
 * 之前普通块流没有间距机制，「消息概览」和「读取明细」两个面板直接粘连
 * （列表页好看纯属各子块碰巧自带 margin）。 */
.rrt-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
  align-content: start;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  /* 窄屏底部导航是 fixed 的，给内容留出安全距离 */
  padding-bottom: 4.75rem;
}

@media (min-width: 1061px) {
  .rrt-page {
    padding-bottom: 0;
  }
}

/* 单卡表单页（修改密码等）：整卡收窄到舒适阅读宽度，别在宽屏摊成一条 */
.rrt-narrow {
  max-width: 30rem;
}

/* 内容块之间比库默认略松一点，页面不「糊」在一起 */
.rrt-app .ui-stack {
  gap: 1.1rem;
}

/* ---------- 概览指标 ---------- */
.rrt-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.7rem;
}

@media (max-width: 1180px) {
  .rrt-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .rrt-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
}

/* 指标卡：标签在上、数字醒目、口径下沉到底边对齐。
 * 六张卡的「口径」文字因此排成一条线，视觉上是一组而不是六块散件。 */
.rrt-app .rrt-metrics > .ui-metric {
  display: flex;
  flex-direction: column;
  padding: 0.95rem 1.05rem 1rem;
  min-height: 7.25rem;
}

.rrt-app .ui-metric__label {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--ui-ink-muted);
}

.rrt-app .ui-metric__value {
  margin: 0.4rem 0 0;
  font-size: 1.6rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

.rrt-app .ui-metric__meta {
  /* 顶到底部 → 一排卡片的口径说明对齐 */
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 0.6875rem;
  line-height: 1.45;
}

/* ---------- 卡片头部 / 标题层级 ---------- */
.rrt-app .ui-card-head {
  margin-bottom: 0.9rem;
  align-items: center;
}

.rrt-app .ui-card-head h2 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.rrt-app .ui-title {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.rrt-app .ui-kicker,
.rrt-login .ui-kicker {
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.rrt-app .ui-supporting,
.rrt-login .ui-supporting {
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--ui-ink-muted);
}

/* ---------- 工具条（搜索 / 导出） ---------- */
.rrt-app .rrt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.9rem;
}

.rrt-app .rrt-toolbar .rrt-grow {
  min-width: 12rem;
}

/* ---------- 消息表格（每行一张圆角卡片） ---------- */
/* 行距用 border-spacing 拉开；行卡片感由「单元格分段描边 + 两端圆角」拼出
 * （table-row 上的圆角各浏览器表现不一，落在 td 上最稳）。 */
.rrt-app .rrt-table {
  border-collapse: separate;
  border-spacing: 0 0.55rem;
}

.rrt-app .rrt-table th {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.07em;
  padding: 0.1rem 1rem 0.2rem;
  color: var(--ui-ink-muted);
  border-bottom: 0;
}

.rrt-app .rrt-table td {
  padding: 0.85rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  vertical-align: middle;
  background: var(--rrt-card);
  border-top: 1px solid var(--rrt-hair-soft);
  border-bottom: 1px solid var(--rrt-hair-soft);
}

.rrt-app .rrt-table td:first-child {
  border-left: 1px solid var(--rrt-hair-soft);
  border-radius: var(--rrt-radius) 0 0 var(--rrt-radius);
}

.rrt-app .rrt-table td:last-child {
  border-right: 1px solid var(--rrt-hair-soft);
  border-radius: 0 var(--rrt-radius) var(--rrt-radius) 0;
}

/* 列宽固定下来，六列才不会「谁内容长谁变宽」地飘 */
.rrt-table .rrt-col-read {
  width: 7rem;
}

.rrt-table .rrt-col-ago {
  width: 8.5rem;
}

.rrt-table .rrt-col-place {
  width: 15.5rem;
}

.rrt-table .rrt-col-time {
  width: 7.25rem;
}

.rrt-table .rrt-col-ops {
  width: 6.75rem;
}

/* 整行可点：悬停整卡提亮 + 左侧强调条，明确「这是一条可点的记录」 */
.rrt-table tbody tr.rrt-row-link {
  cursor: pointer;
}

.rrt-table tbody tr.rrt-row-link:hover td {
  background: var(--rrt-card-hover);
  transition: background-color 120ms var(--ui-motion-easing-standard);
}

.rrt-table tbody tr.rrt-row-link:hover td:first-child {
  box-shadow: inset 2px 0 0 var(--ui-color-accent);
}

.rrt-app .rrt-cell-ops .rrt-actions {
  justify-content: flex-end;
}

/* 内容：最多两行，超出省略 */
.rrt-table td.rrt-cell-content {
  max-width: 34rem;
}

.rrt-content {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1.5;
  word-break: break-word;
}

.rrt-content.is-empty {
  color: var(--ui-ink-muted);
}

/* 次要信息（时间 / 计数 / 地区）—— 用安静的小字，不再一律做成药丸，
 * 减少「满屏都是 chip」的噪音。 */
.rrt-sub {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ui-ink-muted);
}

.rrt-place {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ui-ink);
}

/* 注意：这一行必须比 `.rrt-sub { display:block }` 更具体（双类权重），
 * 否则同权重下由源码顺序决定胜负 —— 手机小字行会漏到桌面表格里。 */
.rrt-table .rrt-only-mobile {
  display: none;
}

@media (max-width: 760px) {
  .rrt-table .rrt-col-ago,
  .rrt-table .rrt-col-place,
  .rrt-table .rrt-col-time {
    display: none;
  }

  .rrt-table .rrt-only-mobile {
    display: block;
  }

  .rrt-table td.rrt-cell-content {
    max-width: none;
  }

  .rrt-app .rrt-table th,
  .rrt-app .rrt-table td {
    padding: 0.7rem 0.75rem;
  }

  .rrt-table .rrt-col-read {
    width: 6rem;
  }

  .rrt-table .rrt-col-ops {
    width: auto;
  }
}

/* 标签组：药丸只留给「状态/异常/口径」，事实信息用文字 */
.rrt-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.35rem;
}

.rrt-place + .rrt-tags,
.rrt-place + .rrt-sub {
  margin-top: 0.4rem;
}

/* ---------- 详情页 ---------- */
/* 消息原文：引用块，比一坨等宽字好读 */
.rrt-quote {
  margin: 0.15rem 0 1rem;
  padding: 0.6rem 0.9rem;
  border-left: 3px solid var(--ui-color-accent);
  border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0;
  background: var(--rrt-tint);
  font-size: 0.875rem;
  line-height: 1.65;
  word-break: break-word;
  white-space: pre-wrap;
}

/* 描述列表：标签列固定宽度、值与标签基线对齐、行距收紧 */
.rrt-dl {
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr);
  column-gap: 0.9rem;
  row-gap: 0.45rem;
  margin: 0;
}

.rrt-dl dt {
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--ui-ink-muted);
}

.rrt-dl dd {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  word-break: break-word;
}

@media (max-width: 560px) {
  .rrt-dl {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    column-gap: 0.6rem;
  }
}

/* 读者卡片 */
.rrt-read {
  padding: 0.9rem 1.05rem;
}

.rrt-read + .rrt-read {
  border-top: 1px solid var(--rrt-hair);
}

.rrt-read__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.rrt-read__ip {
  font-family: var(--ui-font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  word-break: break-all;
}

.rrt-read__time {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--ui-ink-muted);
  white-space: nowrap;
}

/* ---------- 等宽块（消息 ID / 技术细节） ---------- */
.rrt-mono {
  font-family: var(--ui-font-mono);
  font-size: 0.75rem;
  line-height: 1.65;
  word-break: break-all;
  white-space: pre-wrap;
  background: var(--ui-control-bg);
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-radius-sm);
  padding: 0.55rem 0.7rem;
  margin: 0.35rem 0 0;
  color: var(--ui-ink);
}

/* ---------- 折叠区（口径说明 / 技术细节） ---------- */
.rrt-fold {
  margin-top: 0.35rem;
}

/* 注意：summary 里会有 <b> 等内联元素，绝不能设成 flex —— 否则每个子元素
   都会变成 flex item，长句子会被拆成竖排的单字（真踩过）。 */
.rrt-fold > summary {
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1.7;
  padding: 0.3rem 0;
  color: var(--ui-ink-muted);
  list-style: none;
  user-select: none;
  transition: color 120ms var(--ui-motion-easing-standard);
}

.rrt-fold > summary:hover {
  color: var(--ui-ink);
}

.rrt-fold > summary::-webkit-details-marker {
  display: none;
}

.rrt-fold > summary::before {
  content: "\25B8";
  display: inline-block;
  margin-right: 0.4rem;
  transition: transform 140ms var(--ui-motion-easing-standard);
}

.rrt-fold[open] > summary::before {
  transform: rotate(90deg);
}

.rrt-fold__body {
  font-size: 0.75rem;
  line-height: 1.8;
  color: var(--ui-ink-muted);
  padding: 0.45rem 0 0.2rem 1.1rem;
  margin: 0;
}

.rrt-fold__body li {
  margin-bottom: 0.3rem;
}

.rrt-note {
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--ui-ink-muted);
  margin: 0;
}

.rrt-note strong {
  color: var(--ui-ink);
  font-weight: 600;
}

/* ---------- 通用小工具类 ---------- */
.rrt-center {
  text-align: center;
}

.rrt-grow {
  flex: 1 1 auto;
  min-width: 0;
}

.rrt-block {
  width: 100%;
  justify-content: center;
}

.rrt-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.rrt-inline-form {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
}

.rrt-nowrap {
  white-space: nowrap;
}

/* 按钮文字一律不折行（窄列里「明细」曾被折成上下两个字） */
.rrt-app .ui-button,
.rrt-page .ui-button {
  white-space: nowrap;
}

/* 账号列表：改密输入框别太宽，四个动作按钮排得开 */
.rrt-app .rrt-users-table .rrt-inline-form .ui-input {
  width: 8rem;
}

/* 角色开关要放得下「普通用户 / 管理员」两个中文标签（默认上限 7.5rem 会把
   标签挤到换行）。依据接入规范 §4.2：`--ui-switch-max-width` 允许在项目根
   节点覆盖 —— 这里只限定在承载开关的表单项上，不改 `.ui-switch` 自身。 */
.rrt-switch-host {
  --ui-switch-max-width: 12.5rem;
}

/* ---------- 登录页 ---------- */
.rrt-login {
  width: 100%;
  max-width: 23rem;
  margin: 9vh auto 0;
}

.rrt-login__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.15rem;
}

.rrt-login__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.9rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ui-color-on-accent);
  background: linear-gradient(150deg, var(--ui-color-accent-strong),
    var(--ui-color-accent));
  box-shadow: 0 8px 20px -10px var(--ui-color-accent);
}

.rrt-login__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.rrt-login__sub {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ui-ink-muted);
}

@media (max-width: 760px) {
  .rrt-login {
    margin-top: 5vh;
  }

  .rrt-read__time {
    margin-left: 0;
    flex-basis: 100%;
  }
}

/* ---- 服务端一次性提示（库 toast）的小屏落点 ----
   库默认把 toast 固定在视口顶部 20px 居中；窄屏时顶栏标题也在那一带，
   提示弹出的几秒内会盖住标题。这里只把落点下移到移动顶栏之下，
   不改库的任何主题变量与结构（作用域限定在本应用外壳内）。 */
@media (max-width: 760px) {
  .rrt-app .ui-message-host {
    top: 72px;
  }
}