/* =========================================================
   拟物层 — chrome 是机器，内容是纸

   一句话规则：header 条、窗框、铭牌、按键、凹槽用同一套
   壳 / 屏 / 键配方；文章卡片、正文、标签一律不加壳、不加阴影，
   只作为纸片躺在凹槽托盘里。

   三个配方（全站只用这三个，不要再发明第四个）：
     壳  background: #fdfdfa
         box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
                     inset 0 -1px 0 rgba(0,0,0,.075),
                     0 1px 1px rgba(0,0,0,.06)
     屏  background: linear-gradient(158deg,#ffffff,#fbfcf9,#fefefd)
         box-shadow: inset 1px 1px 2px rgba(0,0,0,.15),
                     inset 0 0 5px rgba(0,0,0,.075)
     凹槽 background: #f7f8f2
         box-shadow: inset 1px 1px 2px rgba(0,0,0,.12),
                     inset 0 0 4px rgba(0,0,0,.04)

   屏是自发光面：中间亮、四周被机壳压暗；壳永远比页面底色亮。
   深度靠 inset 阴影和渐晕，不靠反光。
   与 components.css 里的 .lang-theme 语言/主题机同源，那个是原型。
   ========================================================= */

:root {
  --skeuo-case: #fdfdfa;
  /* 屏 = 自发光的 LCD，不是玻璃。那道 115° 斜反光删掉了：整页只有它一处
     在暗示光源方向，孤证 —— 读不出玻璃，只读成"左上角发白"。改用暗色主题
     里已经在用的渐晕：中间亮、四周被机壳压暗，不需要房间里那盏灯。
     两个端点色所有屏共用（同一块玻璃）；半径按比例给，并按长宽比分两条 ——
     接近方形/横向的屏用 --skeuo-screen，56px 高的电台名条用 -strip，
     否则暗环会切进文字那一行。 */
  --skeuo-screen: radial-gradient(125% 95% at 50% 34%, #f7f9f2 0%, #e9ebe2 100%);
  --skeuo-screen-strip: radial-gradient(120% 260% at 50% 40%, #f7f9f2 0%, #e9ebe2 100%);
  --skeuo-screen-hover: radial-gradient(125% 95% at 50% 34%, #fafcf5 0%, #ecefe6 100%);
  --skeuo-well: #f7f8f2;
  --skeuo-edge: rgba(0, 0, 0, 0.068);
  --skeuo-case-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
                       inset 0 -1px 0 rgba(0, 0, 0, 0.075),
                       0 1px 1px rgba(0, 0, 0, 0.06);
  --skeuo-well-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.12),
                       inset 0 0 4px rgba(0, 0, 0, 0.04);
  --skeuo-screen-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.15),
                         inset 0 0 5px rgba(0, 0, 0, 0.075);
  --skeuo-emboss: 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* 机器要坐在桌面上，不能浮在纸上 */
body { background: #fafaf7; }

/* ---------- header = 面板条 ---------- */
header {
  backdrop-filter: none;
  background: var(--skeuo-case);
  border-bottom: 1px solid rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
              inset 0 -1px 0 rgba(0, 0, 0, 0.038),
              0 1px 1px rgba(0, 0, 0, 0.038);
}

.logo { text-shadow: var(--skeuo-emboss); }

nav { gap: 0.5rem; }

/* 非当前项 = 蚀刻在面板上的字 */
nav a {
  padding: 0.4rem 0.9rem;
  color: #6f7169;
  text-shadow: var(--skeuo-emboss);
}
nav a::before { display: none; }   /* 下划线换成凹槽 */

/* 当前项 = 凹槽 + 橙 LED */
nav a.active {
  color: #33372f;
  border-radius: 2px;
  background: var(--skeuo-well);
  box-shadow: var(--skeuo-well-shadow);
  text-shadow: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
nav a.active::after {
  content: '';
  order: -1;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 5px oklch(0.72 0.12 55 / 0.8);
}

/* ---------- 终端 / radio = 两台机器 ---------- */
.term-v1,
.radio {
  background: var(--skeuo-case);
  border: 1px solid var(--skeuo-edge);
  border-radius: 6px;
  backdrop-filter: none;
  box-shadow: var(--skeuo-case-shadow), 0 10px 22px -14px rgba(0, 0, 0, 0.165);
}
.term-v1:hover,
.radio:hover {
  transform: none;   /* 机器不会因为鼠标经过就抬起来 */
  box-shadow: var(--skeuo-case-shadow), 0 12px 24px -14px rgba(0, 0, 0, 0.2);
}

.term-v1 { padding: 16px 16px 19px; gap: 12px; }
.term-v1 .term-head {
  border-bottom: 0;
  padding: 0 4px;
  margin-bottom: 0;
  color: #6f7169;
  text-shadow: var(--skeuo-emboss);
}
/* 指示片，不是凸起的按键：底部内阴影和光晕都压掉一半 */
.term-v1 .dot-mark {
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.07),
              0 0 3px oklch(0.82 0.13 88 / 0.4);
}

/* 终端屏 —— 依赖 index.astro 里新增的 .term-screen 包裹层。

   开口是模压的，不是切出来的一个方孔。实物感不来自凸起 —— 恰恰相反，
   外投影 + 顶边白高光那一组是"凸"的签名，一加上去屏就浮到面板上面去了。
   凹的签名是三件事，这里就只做这三件：
     1. 四边糊开的内阴影，顶边最重（开口的内壁背光）
     2. 开口下沿一条受光的亮边（唯一的亮，且在下面）
     3. 玻璃周围一圈极淡的外阴影 —— 环境光遮蔽，不是投影，所以无偏移
   总墨量刻意压到和 --skeuo-screen-shadow 同一档，不然这块屏会比页面上
   其他几块重出一截，整组就不成套了。
   圆角从 3px 开到 14px：616px 宽的屏对 14px，和真 CRT 的比例一致。
   底色和墨色仍走 --skeuo-screen / --text-*，一个值都没换，
   所以 radio 那块屏天然还是同一块玻璃。 */
.term-v1 .term-screen {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  background: var(--skeuo-screen);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.035),
              inset 0 0 0 1px rgba(0, 0, 0, 0.05),
              inset 0 2px 4px rgba(0, 0, 0, 0.10),
              inset 0 -1px 0 rgba(255, 255, 255, 0.45),
              inset 2px 0 4px rgba(0, 0, 0, 0.055),
              inset -2px 0 4px rgba(0, 0, 0, 0.055),
              inset 0 0 14px rgba(0, 0, 0, 0.05);
}

/* 圆角开大以后，内容要从圆弧里让开一点 */
.term-v1 .term-screen .term-body { padding: 18px 22px 0; }
.term-v1 .term-input {
  border-top: 1px solid rgba(0, 0, 0, 0.053);
  padding: 0.7rem 22px 0.8rem;
  margin-top: 0;
}

/* 键位提示在加厚的下边框里垂直居中：上下各 19px，仍然左对齐 */
.term-hints {
  border-top: 0;
  padding: 0 4px;
  margin-top: 7px;
  color: #7c7e77;
  text-shadow: var(--skeuo-emboss);
}
/* 键帽 */
.term-hints kbd {
  border: 0;
  border-radius: 2px;
  background: var(--skeuo-well);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
              inset 0 -1px 0 rgba(0, 0, 0, 0.105),
              0 1px 1px rgba(0, 0, 0, 0.045);
}

/* radio 电台名 = 屏（56px 高的细长条 —— 用 -strip 那条半径） */
.radio-display {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 3px;
  background: var(--skeuo-screen-strip);
  box-shadow: var(--skeuo-screen-shadow);
}

/* ---------- 喇叭网纹 ----------
   横向不要拉满：喇叭是一块装在面板上的零件，不是一条通栏。
   1px 线 / 3px 间距，rgba(0,0,0,.085) —— 再淡就看不见网了。 */
.radio-visualizer {
  box-sizing: border-box;
  width: 240px;
  height: 76px;
  margin: 0 auto;
  justify-content: center;
  gap: 6px;
  padding: 0.7rem 1.1rem;
  border-radius: 3px;
  background: var(--skeuo-well);
  background-image: repeating-linear-gradient(0deg,
                    rgba(0, 0, 0, 0.085) 0 1px, transparent 1px 3px);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.135),
              inset 0 0 4px rgba(0, 0, 0, 0.06);
}
.radio-bar { width: 7px; }
/* 条也走网纹，像是从网眼后面透出来的 */
.radio-bar-fill {
  background: repeating-linear-gradient(0deg, #666 0 3px, transparent 3px 5px);
  opacity: 0.6;
}

/* 圆键 */
.radio-btn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
              inset 0 -1.5px 0 rgba(0, 0, 0, 0.165),
              0 1.5px 2px rgba(0, 0, 0, 0.135);
}
.radio-btn:hover { transform: none; }
.radio-btn:active { transform: translateY(1px); }
.station-btn {
  border: 0;
  color: #fff;
  background: var(--accent-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
              inset 0 -1px 0 rgba(0, 0, 0, 0.165),
              0 1px 1px rgba(0, 0, 0, 0.105);
}
.radio-progress-track {
  height: 4px;
  background: #f1f2ec;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15),
              0 1px 0 rgba(255, 255, 255, 0.85);
}

/* ---------- posts = 机壳里的一叠纸 ---------- */
.posts-section .window {
  background: var(--skeuo-case);
  border-color: var(--skeuo-edge);
  border-radius: 6px;
  backdrop-filter: none;
  box-shadow: var(--skeuo-case-shadow), 0 10px 22px -14px rgba(0, 0, 0, 0.135);
}

/* 铭牌 —— 只是一条更浅的底 + 一道发丝分割线。
   这里刻意不加渐变和高光：窗头一旦浮雕，整块就压过了下面的文章。 */
.posts-section .window-header {
  padding: 0.7rem 1.25rem;
  background: #fcfcf8;
  border-bottom-color: rgba(0, 0, 0, 0.053);
}
.win-path { font-weight: 400; letter-spacing: 0.14em; color: #6a6c64; }

/* SORT 三个形状进凹槽 */
.win-sort {
  padding: 5px 10px;
  border-radius: 2px;
  background: var(--skeuo-well);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.12),
              inset 0 0 4px rgba(0, 0, 0, 0.038);
}
.win-sort-label { color: #8a8c85; opacity: 1; }
.win-shape:hover { transform: none; }   /* 凹槽里的零件不放大 */
.win-circle.active { box-shadow: 0 0 4px oklch(0.58 0.10 252 / 0.6); }

/* 分类筛选：当前项 = 浅凹槽，其余仍是蚀刻文字 */
.posts-toolbar .filter-btn { text-shadow: var(--skeuo-emboss); }
.posts-toolbar .filter-btn.active {
  padding: 0.3rem 0.75rem !important;
  border-radius: 2px;
  border-bottom-color: transparent !important;
  background: var(--skeuo-well) !important;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.12);
  text-shadow: none;
}

/* GRID / LIST = 槽里的单滑块
   原来两个键都凸起、当前项反而被按进去 —— 一个两态控件用了三层表面，
   而且凸凹逻辑是反的。现在槽里只有一块键帽，它就是当前项；
   未选中项蚀刻在槽底，没有壳。 */
.view-switch {
  gap: 0;
  padding: 3px;
  border-radius: 3px;
  background: var(--skeuo-well);
  box-shadow: var(--skeuo-well-shadow);
}
.view-switch button {
  width: 28px;
  height: 24px;
  padding: 0;
  border-radius: 3px;
  opacity: 1;
  color: #a8aaa2;
  background: transparent;
  box-shadow: none;
  text-shadow: var(--skeuo-emboss);
  transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.view-switch button:hover { color: #6f7169; }
.view-switch button:active { transform: none; }
.view-switch button.active {
  color: #33372f;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10),
              inset 0 1px 0 rgba(255, 255, 255, 0.9);
  text-shadow: none;
}

/* 网格视图不再有托盘：卡片本身就是屏（见文件末尾"读出模块"一节）。
   托盘（凹）+ 卡片壳（凸）+ 屏（凹）三层叠在一起，就是"盒子套盒子"。
   托盘只留给条目视图 —— 那里的行是纸，需要一个底。 */
.posts-grid {
  padding: 1.5rem;
  gap: 1.25rem;
}
a.post-card {
  background: #fdfdfc !important;
  border-color: rgba(0, 0, 0, 0.053) !important;
  border-radius: 1px !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.038);
}
a.post-card:hover {
  transform: none;
  background: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.053);
}

.posts-grid.view-list {
  margin: 1.25rem;
  padding: 0.75rem 1.25rem 1rem;
  border-radius: 3px;
  background: var(--skeuo-well);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.105),
              inset 0 0 5px rgba(0, 0, 0, 0.038);
}
.posts-grid.view-list a.post-card {
  background: transparent !important;
  box-shadow: none;
}

.posts-pager { border-top-color: rgba(0, 0, 0, 0.06); }
.pager-range { color: #8a8c85; text-shadow: var(--skeuo-emboss); }

/* =========================================================
   暗色 —— 不是把亮色调暗，是换一种光源

   亮色里的白边和玻璃反光，都是"房间里有一盏灯"的产物：机壳顶边
   接到光，屏面反出一道斜光。暗房间里没有那盏灯 —— 再画白边和反光，
   就成了凭空发光的塑料。所以暗色只守两条：

     1. 深度全部交给阴影（inset 暗边 + 外投影），不再有任何 inset 白边
     2. 亮的只能是真正会自己发光的东西 —— 屏、LED、指示灯

   屏也因此从"玻璃"变成"发光面"：中间亮、四周被机壳压暗的渐晕，
   而不是一道斜的白色反光。
   ========================================================= */
body.dark {
  --skeuo-case: #1c1f1a;
  --skeuo-screen: radial-gradient(125% 95% at 50% 38%, #262a21 0%, #1f2219 100%);
  --skeuo-well: #141610;
  --skeuo-edge: rgba(0, 0, 0, 0.55);
  --skeuo-case-shadow: 0 1px 1px rgba(0, 0, 0, 0.5),
                       0 8px 20px -14px rgba(0, 0, 0, 0.8);
  --skeuo-well-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.75),
                       inset 0 0 0 1px rgba(0, 0, 0, 0.4);
  --skeuo-screen-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5),
                         inset 0 2px 10px rgba(0, 0, 0, 0.45);
  --skeuo-emboss: none;
  /* 桌面比机壳更暗，机器才浮得起来 */
  background: #0e100d;
}

body.dark header {
  background: var(--skeuo-case);
  border-bottom-color: #000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
body.dark nav a { color: #8b8e85; }
body.dark nav a.active { color: #e9eae5; }

body.dark .term-v1,
body.dark .radio,
body.dark .posts-section .window {
  background: var(--skeuo-case);
  border-color: var(--skeuo-edge);
}
body.dark .term-v1:hover,
body.dark .radio:hover {
  box-shadow: var(--skeuo-case-shadow);
}
body.dark .term-v1 .term-head,
body.dark .term-hints { color: #8b8e85; }
body.dark .term-v1 .term-input { border-top-color: rgba(0, 0, 0, 0.5); }

/* 暗色里开口更深 —— 暗房间里没有那盏灯，
   唯一的亮边保持在下沿，且只有 4%。 */
body.dark .term-v1 .term-screen {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3),
              inset 0 0 0 1px rgba(0, 0, 0, 0.5),
              inset 0 2px 6px rgba(0, 0, 0, 0.45),
              inset 0 -1px 0 rgba(255, 255, 255, 0.04),
              inset 2px 0 6px rgba(0, 0, 0, 0.3),
              inset -2px 0 6px rgba(0, 0, 0, 0.3),
              inset 0 0 18px rgba(0, 0, 0, 0.35);
}

/* 键帽：暗色里靠一圈黑描边和投影立起来，不靠顶边白光 */
body.dark .term-hints kbd,
body.dark .station-btn,
body.dark .radio-btn {
  background: #262a22;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5),
              0 1px 2px rgba(0, 0, 0, 0.5);
}
body.dark .station-btn { color: #d8dad3; }
body.dark .radio-btn:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7); }

/* 网罩：亮色打黑线，暗色还是黑线 —— 网眼永远比面板暗 */
body.dark .radio-visualizer {
  background-image: repeating-linear-gradient(0deg,
                    rgba(0, 0, 0, 0.55) 0 1px, transparent 1px 3px);
}
body.dark .radio-progress-track {
  background: #0d0f0c;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
}

body.dark .posts-section .window-header {
  background: #22251e;
  border-bottom-color: rgba(0, 0, 0, 0.5);
}
body.dark .win-path { color: #9a9d93; }
body.dark .win-sort-label,
body.dark .pager-range { color: #7e817a; }
body.dark .posts-pager { border-top-color: rgba(0, 0, 0, 0.5); }

body.dark .view-switch { box-shadow: var(--skeuo-well-shadow); }
body.dark .view-switch button {
  color: #6f7269;
  background: transparent;
  box-shadow: none;
}
body.dark .view-switch button:hover { color: #8b8e85; }
body.dark .view-switch button.active {
  color: #e9eae5;
  background: #2e3229;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5),
              0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 暗色里的纸不是白纸，是被屏光照到的一层 */
body.dark a.post-card {
  background: #212419 !important;
  border-color: rgba(0, 0, 0, 0.5) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
body.dark a.post-card:hover {
  background: #262a1f !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}
body.dark .posts-grid.view-list a.post-card {
  background: transparent !important;
  box-shadow: none;
}


/* =========================================================
   移动端（≤968px，与 components.css 同一个断点）

   抽屉是从面板里抽出来的一块，不是压在页面上的一张白纸；
   机器只是变窄，圆角、描边、三个配方一个都不换。
   ========================================================= */
@media (max-width: 968px) {
  header nav {
    background: var(--skeuo-case);
    border-bottom-color: rgba(0, 0, 0, 0.09);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05),
                0 8px 18px -10px rgba(0, 0, 0, 0.35);
  }
  body.dark header nav {
    background: var(--skeuo-case);
    border-bottom-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
                0 8px 18px -10px rgba(0, 0, 0, 0.6);
  }
  header nav::before { text-shadow: var(--skeuo-emboss); }

  /* 抽屉里的当前项仍是凹槽 + LED，components.css 的 ' ◀' 让位 */
  header nav a.active {
    justify-content: center;
    padding: 0.45rem 1.6rem;
  }
  header nav a.active::after {
    content: '';
    order: -1;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 5px oklch(0.72 0.12 55 / 0.8);
  }

  /* 拉手 = 面板下沿的一道金属条 */
  .pull-tab { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }

  .term-v1 { padding: 12px 12px 15px; gap: 10px; }
  .term-v1 .term-screen { border-radius: 12px; }
  .term-v1 .term-screen .term-body { padding: 15px 16px 0; }
  .term-v1 .term-input { padding: 0.6rem 16px 0.7rem; }
  .term-hints { gap: 0.9rem; margin-top: 5px; }

  /* 喇叭跟着机器收窄，但不超过 240px —— 网眼间距是固定的 3px，
     一旦拉伸，网就不像网了 */
  .radio-visualizer { width: 100%; max-width: 240px; }

  .posts-section .window-header { padding: 0.6rem 0.9rem; }
  .posts-toolbar { padding: 0.9rem; }
  .win-sort { gap: 9px; padding: 4px 8px; }
  .posts-grid { padding: 1rem; gap: 1rem; }
  .posts-grid.view-list { margin: 0.75rem; padding: 0.5rem 0.75rem 0.75rem; }
}

/* =========================================================
   网格视图 = 一排读出模块（turn 5 · 5A）

   条目视图之所以像电子读出，不是因为它是列表，而是因为每条信息
   都落在固定字段里、列与列对齐、中间只有发丝线。网格照抄这套：
   每篇文章就是一块屏 —— 卡片本身即屏面，不再套一层机壳，外面也不再
   有托盘。图标 / 标题 / 摘要 / 读数 / 标签全部落在这一块屏上。
   屏用的就是终端和 radio 那一条配方，不新增第四种。

   全部规则都锁在 .posts-grid:not(.view-list) 里 —— 条目视图一行不动。
   ========================================================= */
/* 比例用 aspect-ratio 锁死，不写死高度：列宽怎么变，屏都还是 16:9。
   容器 1336px 三列时是 416×234 —— 页面于是有三种屏，每种都有形状理由：
   终端近 1:1（工作屏）、radio 名条细长（铭牌屏）、卡片 16:9（监视器）。 */
.posts-grid:not(.view-list) a.post-card {
  position: relative;
  aspect-ratio: 16 / 9;
  padding: 0;
  gap: 0;
  border: 0 !important;
  border-radius: 3px !important;
  background: var(--skeuo-screen) !important;
  box-shadow: var(--skeuo-screen-shadow);
  grid-template-rows: auto auto 1fr auto auto;
}
/* hover 不加壳、不抬起 —— 只把屏调亮一档 */
.posts-grid:not(.view-list) a.post-card:hover {
  background: var(--skeuo-screen-hover) !important;
  box-shadow: var(--skeuo-screen-shadow);
}
.posts-grid:not(.view-list) a.post-card > *,
.posts-grid:not(.view-list) a.post-card .post-title,
.posts-grid:not(.view-list) a.post-card .post-meta { position: relative; z-index: 1; }

/* 编号 = 屏右上角的读数（data-n 由 posts-ui.js 写入） */
.posts-grid:not(.view-list) a.post-card::after {
  content: attr(data-n);
  position: absolute;
  top: 15px;
  right: 18px;
  z-index: 1;
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  color: #a0a29a;
  font-variant-numeric: tabular-nums;
}

/* 标题和日期原来是同一个 wrap 里的两行；display:contents 把它们放平，
   日期才能沉到屏底当读数。条目视图不受影响（选择器进不去）。 */
.posts-grid:not(.view-list) .post-title-wrap { display: contents; }
.posts-grid:not(.view-list) .post-icon {
  grid-area: 1 / 1;
  margin: 15px 18px 10px;
  width: 40px;
  height: 40px;
}
.posts-grid:not(.view-list) .post-title { grid-area: 2 / 1; margin: 0 18px; font-size: 0.88rem; }
.posts-grid:not(.view-list) .post-excerpt {
  grid-area: 3 / 1;
  margin: 0.5rem 18px 0.6rem;
  font-size: 0.76rem;
  -webkit-line-clamp: 2;
}
.posts-grid:not(.view-list) .post-meta {
  grid-area: 4 / 1;
  margin: 0 18px;
  padding: 0.5rem 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  opacity: 1;
  color: #8a8c85;
  font-variant-numeric: tabular-nums;
}

/* 标签 = 屏上的一个字段：左边字段名，右边用 · 连成一行值。
   三个裸词并排，读者判断不出那是分类、作者还是状态；这里改成和终端
   whoami 里 name / role / focus 同一套"字段名 + 值"。
   块级文本行 + ellipsis：宁可右端省略，也不要 flex + overflow 把首项裁掉。 */
.posts-grid:not(.view-list) .post-tags {
  grid-area: 5 / 1;
  display: block;
  margin: 5px 18px 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.posts-grid:not(.view-list) .post-tags::before {
  content: 'TAGS';
  margin-right: 8px;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  color: #a2a79a;
}
.posts-grid:not(.view-list) .post-tags .tag {
  border: 0;
  padding: 0;
  font-size: 0.6rem;
  color: #8a8c85;
}
.posts-grid:not(.view-list) .post-tags .tag + .tag::before {
  content: '·';
  margin: 0 0.4rem;
  color: #b9bbb2;
}

/* 暗色：屏走变量（那条渐晕本来就是暗色先有的），只压暗读数 */
body.dark .posts-grid:not(.view-list) a.post-card,
body.dark .posts-grid:not(.view-list) a.post-card:hover {
  background: var(--skeuo-screen) !important;
  border-color: transparent !important;
  box-shadow: var(--skeuo-screen-shadow);
}
body.dark .posts-grid:not(.view-list) a.post-card:hover { background: #2a2e24 !important; }
body.dark .posts-grid:not(.view-list) a.post-card::after { color: #6f7269; }
body.dark .posts-grid:not(.view-list) .post-meta,
body.dark .posts-grid:not(.view-list) .post-tags .tag { color: #8b8e85; }
body.dark .posts-grid:not(.view-list) .post-tags::before { color: #6f7269; }
body.dark .posts-grid:not(.view-list) .post-meta { border-top-color: rgba(0, 0, 0, 0.5); }

/* =========================================================
   电子屏配色 —— 屏不是白纸，是 LCD

   之前的屏是白的，所以它更像一张压在凹槽里的相纸。真正的 LCD
   底色偏绿灰、比机壳暗一点，字是深绿墨而不是纯黑。取值直接用
   header 上那台语言机（components.css 的 .lang-lcd）—— 整套拟物
   本来就是照它长出来的，这里只是让大屏也对齐同一块玻璃。

   亮色：终端屏 / radio 屏 / 网格模块的屏
   暗色：条目视图整块变成一块屏（亮色的条目视图仍是纸，一行不动）
   ========================================================= */

/* 屏上的字是深绿墨，不是纯黑。只在亮色 —— 暗色的屏自己发光，
   墨色由 --text-dark 管，套上来会把字压进背景里。 */
body:not(.dark) .term-v1 .term-screen,
body:not(.dark) .radio-display,
body:not(.dark) .posts-grid:not(.view-list) .post-title { color: #2f3329; }
body:not(.dark) .posts-grid:not(.view-list) .post-excerpt { color: #575c4e; }
body:not(.dark) .posts-grid:not(.view-list) .post-meta { color: #7b8073; }
body:not(.dark) .posts-grid:not(.view-list) a.post-card::after { color: #969b8c; }
body:not(.dark) .posts-grid:not(.view-list) .post-meta { border-top-color: rgba(0, 0, 0, 0.08); }

/* ---------- 条目视图：行要顶到托盘两端 ----------
   行的左右内边距原来归托盘，所以 hover 的高亮停在内边距里侧、
   第一行上面还空着一条。把内边距移交给行本身，托盘只负责裁圆角。 */
.posts-grid.view-list {
  padding: 0;
  overflow: hidden;
}
.posts-grid.view-list a.post-card { padding: 1rem 1.25rem; }

/* 暗色：条目视图整块是一块屏，行就是屏上的行 */
body.dark .posts-grid.view-list {
  background: var(--skeuo-screen);
  box-shadow: var(--skeuo-screen-shadow);
}
body.dark .posts-grid.view-list a.post-card,
body.dark .posts-grid.view-list a.post-card:hover {
  border-bottom-color: rgba(0, 0, 0, 0.45) !important;
}
body.dark .posts-grid.view-list a.post-card:hover {
  background: rgba(255, 255, 255, 0.045) !important;
}
body.dark .posts-grid.view-list .post-title { color: #dfe3d6; }
body.dark .posts-grid.view-list .post-excerpt { color: #9aa08f; }
body.dark .posts-grid.view-list .post-meta { color: #7f8577; }
body.dark .posts-grid.view-list .post-card .tag { color: #8b917f; }

@media (max-width: 968px) {
  .posts-grid.view-list { padding: 0; }
  .posts-grid.view-list a.post-card { padding: 0.9rem 1rem; }
}