/* ═══ 新品孵化 `/new` ═══
   只放这一屏独有的规则。共用的骨架（.card / .bg / .empty / .chip / .btn）在
   components.css，颜色一律取 vendor/tokens.css 的变量，本文件里不出现任何 hex。

   两条这一屏特有的版式硬要求：
   ① 五列同等宽度，一列都不折叠、不隐藏 —— 「长期无单」这类反向事实同样有用
      （同一家店大量新品长期无单，说明这批选品方向没跑通）。视口窄了横向滚，不砍列。
   ② 手机上改成「五个状态标签 + 单列」，仍然一个字段都不删（plan 第 08 章：
      「信息全面」在手机上靠纵向堆叠实现，不靠删字段）。 */

/* 外壳的高度链在 #app 这一节断了：index.html 的 <div id="app"> 没有 height:100%，
   所以 .shell / .main / .screen 的 height:100% 全部落回 auto，整屏被内容撑高。
   别的屏（整页纵向滚）看不出来，这一屏看得出来 —— 列要在自己内部滚，前提是列有确定的高度。
   用 :has() 把这一条限定在本屏，不动别的屏。
   ⚠️ 真正的位置是 index.html / base.css（外壳线的路径），修好之后这三行就该删掉。 */
#app:has(.newpage) { height: 100%; }

.screen > .page.newpage {
  display: flex;
  flex-direction: column;
  gap: 14px;                                  /* GAP page-gap-14 */
  overflow: hidden;                           /* 页面不滚，列各自在内部滚 */
  padding: var(--space-4) 18px 18px;          /* GAP pad-18 与外壳一致 */
}

/* ── 说明横条 ── */
.newpage .strip {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 9px 12px;                          /* GAP strip-pad */
  background: var(--c-neutral-50);
  border: 1px solid var(--c-neutral-200);
  border-left: 3px solid var(--c-neutral-600);
  border-radius: var(--radius-md);
}
.newpage .strip > svg { flex-shrink: 0; margin-top: 2px; color: var(--c-neutral-600); }
.newpage .strip p {
  margin: 0;
  font-size: var(--size-sm);
  line-height: var(--leading-snug);
  color: var(--c-neutral-600);
}
.newpage .strip b { color: var(--c-neutral-900); font-weight: 600; }

/* ── 二档异常：就地插在受影响的范围里，有形无色（3px 灰左条，不用红）── */
.tier2 {
  border-left: 3px solid var(--c-neutral-600);
  background: var(--c-neutral-25);
  border-radius: var(--radius-sm);
  padding: 7px 10px;                          /* GAP tier2-pad */
  font-size: var(--size-sm);
  line-height: var(--leading-snug);
  color: var(--c-neutral-600);
  flex-shrink: 0;
}
.tier2 b { color: var(--c-neutral-900); }
.tier2.wide { width: 100%; }

/* ── 五列看板 ── */
.newpage .board {
  flex: 1;
  min-height: 0;
  align-items: stretch;
  /* 五列一列都不折叠：装不下就横向滚。196px 是卡片内容 173px + 左右内距 + 边框。 */
  grid-template-columns: repeat(5, minmax(196px, 1fr));   /* GAP col-min-196 */
  overflow-x: auto;
  overflow-y: hidden;
}
/* screens.css 在窄视口把 .board 压成两列 —— 这一屏不折叠，覆盖掉。 */
@media (max-width: 1180px) {
  .newpage .board { grid-template-columns: repeat(5, minmax(196px, 1fr)); }  /* GAP col-min-196 */
}

.newpage .board > section {
  display: flex;
  flex-direction: column;
  gap: 10px;                                  /* GAP col-gap-10 */
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* 列头。灰字最浅到 n500 —— n400 对白只有 2.69:1，不到 4.5:1。 */
.newpage .colhead {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;                                   /* GAP colhead-gap-3 */
  padding-bottom: 9px;                        /* GAP colhead-pad-9 */
  border-bottom: 2px solid var(--border-hairline);
  align-items: stretch;
}
.newpage .chrow { display: flex; align-items: baseline; gap: var(--space-2); }
.newpage .colname {
  font-size: var(--size-md);
  font-weight: 600;
  color: var(--c-neutral-500);
  white-space: nowrap;
}
.newpage .colnum {
  margin-left: auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--size-base);
  color: var(--c-neutral-500);
}
.newpage .chrow > .bg { margin-left: auto; }
.newpage .colrule {
  font-size: var(--size-11);
  color: var(--c-neutral-500);
  line-height: var(--leading-snug);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 中位行只有「已出单」那几列有。让每一列都留出这一行的高度，五列的条目区才从同一条
   基线开始 —— 不然有中位行的那一列整列往下掉一行，看起来像它比别人少了什么。
   留的是空高度不是空内容：没有中位数的列什么都不写（visibility:hidden 连读屏也读不到）。 */
.newpage .colmed {
  font-size: var(--size-11);
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 18px;                           /* GAP colmed-h-18 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.newpage .colmed > * { flex-shrink: 0; }
.newpage .colmed.ghost { visibility: hidden; }

/* 列内条目区：列自己纵向滚，卡片之间是 10px 真空隙不是分隔线。 */
.newpage .collist {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;                                  /* GAP feed-gap-10 */
  padding-bottom: var(--space-2);
}
.newpage .more { flex-shrink: 0; }
.newpage .colempty { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-5) var(--space-2); }
.newpage .colempty .hint { font-size: var(--size-11); }

/* ── 卡片 ──
   骨架借 components.css 的 .card；本屏卡片不承载严重度，左条留透明只为几何对齐
   （去掉这 3px 就和信号流的卡片对不齐了）。 */
.pcard {
  display: flex;
  flex-direction: column;
  gap: 6px;                                   /* GAP card-inner-6 */
  border-left-color: transparent;
}
.pcard:focus-visible { outline-offset: 1px; }
/* 状态未知：整张卡切成「这个数现在不可信」的呈现。不压灰、不隐藏 ——
   库里的旧值仍然有用，缺的是「能不能信」这一句。
   ⚠️ 所以**边框保持实线**，那一句由 .unkbar 承载。原来这里写的是 border-style: dashed，
   而虚线锁给「时候未到」（现在没有、以后会有），与「别信这个数」时间方向相反。
   这一行的注释当时已经把正确方向写出来了（「缺的是『能不能信』这一句」），
   实现却把它落到了另一套语言的记号上——规则和违规在同一个文件里隔了 134 行。
   分隔线画在**下**边：这一条在卡片最上面，说的是「下面这些数现在不可信」，
   线要压在它和它所限定的内容之间。 */
.pcard.unk .unkbar { border-bottom: 1px solid var(--c-neutral-100); padding-bottom: var(--space-2);
                     margin-bottom: var(--space-1); }
.pcard .unkbar {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
  font-size: var(--size-11);
  color: var(--c-neutral-600);
}
.pcard .unkname { font-weight: 600; color: var(--c-neutral-900); }
.pcard .unkwhy { flex-basis: 100%; color: var(--c-neutral-500); }

/* 主图 1:1。接口不代理图片，直接指平台原图，所以 img 上的 referrerpolicy 是硬要求
   （写在 JS 里）。取不到时铺斜纹 + 「未抓到」徽章，不画破图标、不留空白。 */
.pcard .pthumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-neutral-50);
  border: 1px solid var(--c-neutral-100);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pcard .pthumb img { width: 100%; height: 100%; object-fit: cover; display: block;
                     border: 0; border-radius: 0; }
/* 没有图时画虚线占位，**不画斜纹** —— 斜纹是「未抓到」专属，而这里
   主图地址是取到了的（线上 image_key 4981/4981），缺的是拼 URL 的实现。
   ⚠️ 这里原来写 `border: 0`，于是**同一个状态在同款页是虚线、在这儿是个没边的灰块**——
   一个状态两种质地，等于又多出一种记号。虚线必须留住，只把外框的圆角去掉。 */
.pcard .pthumb .thumb.none {
  width: 100%; height: 100%; border-radius: 0;
  background: var(--c-neutral-50);
}

.pcard .pnm {
  font-size: var(--size-md);
  font-weight: 500;
  color: var(--c-neutral-900);
  line-height: 1.4;
  height: 37px;                               /* GAP name-2line-37 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pcard .pcn {
  font-size: var(--size-base);
  color: var(--c-neutral-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 本列的大字块 */
.pcard .big { min-height: 40px; }             /* GAP big-h-40 */
.pcard .bigline { display: flex; align-items: baseline; gap: 3px; flex-wrap: wrap; }
.pcard .bignum {
  font-size: var(--size-2xl);
  font-weight: 500;
  letter-spacing: -.02em;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--c-neutral-900);
}
.pcard .big .bg.derived .bignum { color: var(--c-provenance-derived); }
.pcard .bigline .pre { font-size: var(--size-11); color: var(--c-neutral-500); }
.pcard .bigcap { font-size: var(--size-11); color: var(--c-neutral-500); }

/* D1 / D3 / D7。三个值都在 derived 里，格子太小放不下 ≈，
   所以整块加一条点线底边表达推算，数字也取推算色。 */
.pcard .win {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-neutral-100);
  border: 1px solid var(--c-neutral-100);
  border-bottom: 1px dotted var(--c-provenance-derived);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.pcard .wcell {
  background: var(--c-neutral-0);
  padding: 5px 2px 6px;                       /* GAP wcell-pad */
  text-align: center;
  min-width: 0;
}
.pcard .wl { display: block; font-size: var(--size-xs); color: var(--c-neutral-500); }
.pcard .wv { display: block; font-size: var(--size-base); font-weight: 500; }
.pcard .wv b.n { color: var(--c-provenance-derived); }
.pcard .wv .bg { font-size: var(--size-9); padding: 1px 3px; max-width: 100%; }

.pcard .prow,
.pcard .tags,
.pcard .srow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--size-11);
  color: var(--c-neutral-600);
}
.pcard .prow s { color: var(--c-neutral-500); }
.pcard .srow { color: var(--c-neutral-500); }
.pcard .sepdot { color: var(--c-neutral-200); }

.pcard .foot {
  padding-top: 7px;                           /* GAP foot-pad-7 */
  border-top: 1px solid var(--c-neutral-100);
  display: flex;
  flex-direction: column;
  gap: 3px;                                   /* GAP foot-gap-3 */
  font-size: var(--size-11);
  color: var(--c-neutral-500);
}
.pcard .fline { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .facts { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; margin-top: 2px; }
.pcard .act {
  height: var(--control-h-sm);
  min-height: var(--a11y-floor-target-used);
  padding: 0 6px;                             /* GAP act-pad-6 */
  font-size: var(--size-11);
  text-decoration: none;
}
.retry { font-size: var(--size-11); color: var(--c-neutral-600); }
.hidden { display: none; }
.linkbtn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--c-accent-text);
  cursor: pointer;
  text-decoration: underline;
}

/* ── 时候未到：虚线框。与斜纹（未抓到）是两种质地，永远不加第三种。 ── */
.bg.notyet {
  border: 1px dashed var(--border-control);
  color: var(--c-neutral-600);
  background: none;
}

/* ── 自定义术语：首次出现带虚线下划线 + 悬停一句白话 ── */
.term {
  text-decoration: none;
  border-bottom: 1px dashed var(--border-control);
  cursor: help;
}

/* ── 顶栏浮层 ── */
.pop { position: relative; display: inline-flex; }
.menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 70;
  min-width: 260px;                           /* GAP menu-w-260 */
  max-height: 60vh;
  overflow-y: auto;
  background: var(--c-neutral-0);
  border: 1px solid var(--c-neutral-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
  padding: var(--space-1);
}
.menurow { display: block; }
.menurow.check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-2);                /* GAP menurow-pad */
  font-size: var(--size-base);
  cursor: pointer;
}
.menurow.check > span:first-of-type { flex: 1; min-width: 0; }
.menuitem {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--size-base);
  color: var(--c-neutral-900);
  padding: 7px var(--space-2);                /* GAP menuitem-pad */
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.menuitem:hover { background: var(--c-neutral-50); }
.menuitem.on { background: var(--c-neutral-100); font-weight: 500; }
.menuextra { padding: 0 var(--space-2) var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); }
.menuextra .input { width: 90px; }            /* GAP mindelta-w-90 */
.menuhint { margin: 0; font-size: var(--size-11); color: var(--c-neutral-500); line-height: var(--leading-snug); }
.menuhint.warn { color: var(--c-neutral-900); }

/* 分段控件 28px。disabled 一律实底实字，不用 opacity（半透明会把里面的字拖到 AA 以下）。 */
.segbox {
  display: inline-flex;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 28px;                               /* GAP seg-h-28 */
}
.seg {
  border: 0;
  background: var(--c-neutral-0);
  font: inherit;
  font-size: var(--size-base);
  color: var(--c-neutral-600);
  padding: 0 10px;                            /* GAP seg-pad-10 */
  cursor: pointer;
}
.seg + .seg { border-left: 1px solid var(--c-neutral-100); }
.seg:hover { background: var(--c-neutral-50); }
.seg.on { background: var(--c-neutral-100); color: var(--c-neutral-900); font-weight: 500; }

.newpage .chips { gap: var(--space-2); justify-content: center; margin-bottom: var(--space-2); }

/* ── 手机：五个状态标签 + 单列。字段一个都不删，只改排布。 ── */
.mtabs { display: none; }
.mtab {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--size-base);
  color: var(--c-neutral-600);
  padding: 7px var(--space-1);                /* GAP mtab-pad */
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.mtab[aria-selected="true"] {
  color: var(--c-neutral-900);
  font-weight: 500;
  border-bottom-color: var(--c-neutral-900);
}
.mtab .mtn { font-family: var(--font-mono); font-size: var(--size-xs); color: var(--c-neutral-500); }

@media (max-width: 760px) {
  .newpage { padding: var(--space-3) var(--space-3) var(--space-4); }
  .mtabs { display: flex; border-bottom: 1px solid var(--c-neutral-100); flex-shrink: 0; }
  .newpage .board {
    grid-template-columns: minmax(0, 1fr);
    overflow-x: hidden;
  }
  .newpage .board > section { display: none; }
  .newpage .board > section.mcur { display: flex; }
  /* 手机上列头的判定规则不省略成一行 —— 那是这一屏的判据，砍掉就没法复算了。 */
  .newpage .colrule { white-space: normal; }
}