/* ═══ 店铺列表 /shops + 店铺详情 /shops/:sid ═══
   只放这两屏独有的规则。共用的在 base.css / components.css / screens.css。
   颜色一律取令牌；这一份里出现任何 #hex 都是 bug（tools/selfcheck.py 会查）。

   表格四条硬规则（01-commission，不可协商）在这里的落法：
   ① 列宽写百分比并写进 <th style="width:…">（同时也写 <colgroup>，因为
      table-layout:fixed 下第一行全是 colspan 的分组格，只靠 th 分不出列宽）
   ② 容器窄了横向滚动，绝不挤压列 —— .shops-scroll 是滚动容器，表设 min-width
   ③ table-layout: fixed（components.css 的 table.t 已经给了）
   ④ 徽章 nowrap（components.css 的 .bg 已经给了）*/

/* ── 店铺列表：整屏三段（头 / 工具条 / 滚动的表）── */
.shopspage { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* 用量条：常驻，不藏进设置页。两行的第二行是「设定值」注解。 */
.usagebar { display: flex; flex-direction: column; gap: 2px; }
.usagebar .l1 { font-size: var(--size-base); color: var(--c-neutral-900);
                display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.usagebar .l2 { font-size: var(--size-11); color: var(--c-neutral-500); }

.toolbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;   /* GAP toolbar-gap-9 */
           margin-top: var(--space-3); }
.toolbar .seg { display: inline-flex; align-items: center; gap: var(--space-1); }
.toolbar .sep { width: 1px; height: 18px; background: var(--c-neutral-100); }

/* 已激活筛选：徽章不许直接放进控件排，所以走 28px 控件几何，只借徽章配色。 */
.filtchip { background: var(--c-accent-wash); border-color: var(--c-accent-base);
            color: var(--c-accent-text); cursor: default; }
.filtchip .x { border: 0; background: none; padding: 0; cursor: pointer; color: inherit;
               min-width: var(--a11y-floor-target-min); height: 28px;   /* GAP chip-h-28 */
               display: inline-flex; align-items: center; justify-content: center; }
.filtchip .x svg { width: 12px; height: 12px; }

/* ⓘ：不用点线下划线 —— 点线是「推算」专属记号，借来当术语提示会把两套语义搅在一起。
   一个真按钮 + 一段可见说明，键盘也够得着。 */
.infobtn { border: 0; background: none; padding: 0; cursor: pointer; color: var(--c-neutral-500);
           min-width: var(--a11y-floor-target-min); min-height: var(--a11y-floor-target-min);
           display: inline-flex; align-items: center; justify-content: center; font-family: inherit; }
.infobtn:hover { color: var(--c-neutral-900); }
.infobtn svg { width: 13px; height: 13px; }
.infonote { margin: 4px 0 0; font-size: var(--size-11); color: var(--c-neutral-500);
            line-height: var(--leading-snug); max-width: 52ch;
            /* 列头继承了 table.t th 的 nowrap，说明句要能换行 */
            white-space: normal; font-weight: 400; }

/* ── 表 ── */
.shops-scroll { flex: 1; min-height: 0; overflow: auto; margin: 14px 18px 18px;  /* GAP pad-18 */
                border: 1px solid var(--c-neutral-100); border-radius: var(--radius-10);
                background: var(--c-neutral-0); }
/* ⚠️ 必须写成 table.t.shops-t：components.css 的 `table.t` 是 (0,1,1)，
   只写 .shops-t 是 (0,1,0)，会被它的 min-width:720px 压过去 —— 表就不横向滚动了，
   列被挤扁，正是「容器窄了绝不挤压列」那条硬规则要防的事。 */
table.t.shops-t { min-width: 1180px; }                                   /* GAP shops-minw */
.shops-t thead tr:first-child th { top: 0; height: 26px; padding-top: 5px; padding-bottom: 5px;
                                   font-size: var(--size-xs); letter-spacing: .04em; }
.shops-t thead tr:nth-child(2) th { top: 26px; font-size: var(--size-xs); }   /* GAP grouprow-h-26 */
table.t.shops-t th, table.t.shops-t td { padding: 8px 10px; }            /* GAP row-pad */
.shops-t th.grouphd { border-left: 1px solid var(--c-neutral-100); text-align: left; }
.shops-t th.grouphd:first-child { border-left: 0; }

/* 第一列冻住：横向滚动时店名不走。只冻一列 ——
   第二个 sticky 列需要一个已知 px 偏移，与「列宽写百分比」这条硬规则冲突。
   这是刻意的取舍，不是漏做（plan 第 8 章写的是「冻结左两列和最右一列」）。 */
.shops-t thead th:first-child,
.shops-t tbody td:first-child { position: sticky; left: 0; background: var(--c-neutral-0);
                                border-right: 1px solid var(--border-hairline); z-index: 1; }
.shops-t thead th:first-child { z-index: 3; background: var(--c-neutral-25); }
.shops-t tbody tr:hover td:first-child { background: var(--c-neutral-25); }

/* 分组行与展开行是整行一格，不参与冻结。 */
.shops-t tr.grp td, .shops-t tr.rowdetail td { position: static; }
.shops-t tr.grp td { background: var(--c-neutral-50); font-size: var(--size-base);
                     font-weight: 600; color: var(--c-neutral-900); }
.shops-t tr.grp .sub { display: block; margin-top: 3px; font-weight: 400;
                       font-size: var(--size-11); color: var(--c-neutral-600);
                       line-height: var(--leading-snug); }
.shops-t tr.grp .sub .bg { vertical-align: middle; }

/* 二档：单店连续失败 —— 有形无色，3px 灰左条 + 断线图标。不用红。 */
.shops-t tr.failing td:first-child { box-shadow: inset 3px 0 0 var(--c-severity-mid); }

.shops-t td .stack { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.shops-t td.left .stack { align-items: flex-start; }
.shops-t .sub2 { font-size: var(--size-11); color: var(--c-neutral-500); }
.shops-t .nm { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.shops-t .nm a { font-size: var(--size-base); font-weight: 500; color: var(--c-neutral-900);
                 text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shops-t .nm a:hover { text-decoration: underline; }
.shops-t tr.stopped td { color: var(--c-neutral-600); }
/* 焦点环内缩，不外扩：行与行是贴着的，外扩会盖住上下两行，
   而且这张表在一个横向滚动容器里，外扩的那一圈会被容器边缘裁掉。
   第一列是 sticky、自带背景、盖在行上面，所以那一格要自己再画一次环，
   否则左边那一段看不见 —— 焦点环缺一条边就等于「不知道自己停在哪一行」。 */
.shops-t tr:focus-visible { outline: var(--a11y-floor-focus-ring) solid var(--a11y-floor-focus-color);
                            outline-offset: -2px; }
.shops-t tr:focus-visible td:first-child {
  outline: var(--a11y-floor-focus-ring) solid var(--a11y-floor-focus-color); outline-offset: -2px; }

.disc { border: 0; background: none; padding: 0; cursor: pointer; color: var(--c-neutral-500);
        min-width: var(--a11y-floor-target-min); min-height: var(--a11y-floor-target-min);
        display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.disc svg { width: 14px; height: 14px; transition: transform var(--motion-duration-item-enter); }
.disc[aria-expanded="false"] svg { transform: rotate(-90deg); }

/* 展开速览：只用已经拿到的那个 shop 对象，不发新请求。 */
.rowdetail td { background: var(--c-neutral-25); padding: var(--space-3) var(--space-4); }
.peek { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--size-base); }
.peek .cell { display: inline-flex; align-items: baseline; gap: 5px; color: var(--c-neutral-600); }
.peek .grp2 { display: flex; flex-direction: column; gap: 4px; min-width: 210px; }
.peek .hd { font-size: var(--size-11); color: var(--c-neutral-500); }

/* 三档异常：原位一行字 + 再试一次。不弹层、不横条。 */
.retryline { display: inline-flex; align-items: center; gap: var(--space-2);
             font-size: var(--size-11); color: var(--c-neutral-600); }

/* ── 店铺详情 ── */
.shopdetail { display: flex; flex-direction: column; gap: var(--space-4); }
.shophead { display: flex; flex-direction: column; gap: 6px; }
.shophead .titlerow { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.shophead h1 { font-size: var(--size-2xl); }
.metarow { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
           font-size: var(--size-sm); color: var(--c-neutral-600); }
.metarow .vsep { width: 1px; height: 12px; background: var(--c-neutral-100); }
.metarow .it { display: inline-flex; align-items: center; gap: 5px; }

/* ② 采集状态条：二档，有形无色（3px 灰左条），绝不用红。 */
.collectbar { background: var(--c-neutral-50); border: 1px solid var(--c-neutral-200);
              border-left: 3px solid var(--c-severity-mid); border-radius: var(--radius-md);
              padding: 9px 12px; font-size: var(--size-base); color: var(--c-neutral-600);
              display: flex; gap: var(--space-2); align-items: flex-start;
              line-height: var(--leading-snug); }
.collectbar svg { flex-shrink: 0; margin-top: 2px; }
.collectbar p { margin: 0 0 4px; }
.collectbar p:last-child { margin-bottom: 0; }

/* ③ KPI 带：6 张卡，shop_ticks 六个字段一个不少。 */
.k6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px;
      background: var(--border-hairline); border: 1px solid var(--c-neutral-100);
      border-radius: var(--radius-10); overflow: hidden; }
@media (max-width: 1180px) { .k6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .k6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.k6 > div { background: var(--c-neutral-0); padding: 10px 13px; min-width: 0; }  /* GAP kpi-pad */
.k6 .l { font-size: var(--size-11); color: var(--c-neutral-500);
         display: flex; align-items: center; gap: 3px; }
.k6 .vr { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
          margin: 3px 0 2px; min-width: 0; }
.k6 .v { font-size: var(--size-2xl); font-weight: 600; letter-spacing: -.02em;
         line-height: var(--leading-tight); color: var(--c-neutral-900); min-width: 0;
         overflow: hidden; text-overflow: ellipsis; }
.k6 .v .bg { font-size: var(--size-sm); }
.k6 .d { font-size: var(--size-xs); color: var(--c-neutral-500); }

/* ③b 派生带 */
.dband { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
         font-size: var(--size-sm); color: var(--c-neutral-600); }
.dband .it { display: inline-flex; align-items: baseline; gap: 5px; }
.dband .vsep { width: 1px; height: 12px; background: var(--c-neutral-100); align-self: center; }

/* ④ 时序图：小多图 —— 每个序列一行，共享时间轴，各自独立纵轴。
   不做双 Y 轴：两条轴的缩放比例是任选的，等于让图自己决定谁涨得多。 */
.chartbox { border: 1px solid var(--c-neutral-100); border-radius: var(--radius-10);
            padding: var(--space-3); background: var(--c-neutral-0); }
.chartbox > header { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
                     margin-bottom: var(--space-3); }
.legend { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.smallmult { display: flex; flex-direction: column; gap: var(--space-3); }
.smallmult > section { display: flex; flex-direction: column; gap: 2px; }
.smallmult .cap { display: flex; align-items: baseline; gap: var(--space-2);
                  font-size: var(--size-sm); color: var(--c-neutral-600); }
.smallmult .cap b { font-family: var(--font-mono); font-weight: 600; color: var(--c-neutral-900);
                    font-variant-numeric: tabular-nums; }
.charthint { font-size: var(--size-11); color: var(--c-neutral-500); margin: var(--space-2) 0 0; }

/* ⑤ tab 组 */
.ptab-wrap { display: flex; flex-direction: column; gap: var(--space-3); }
.ptab-bar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
            justify-content: space-between; }
table.t.prod-t { min-width: 880px; }                                     /* GAP prod-minw */
.prod-t .pname { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prod-t .pname .en { font-size: var(--size-base); font-weight: 500; color: var(--c-neutral-900);
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-t .pname .cn { font-size: var(--size-11); color: var(--c-neutral-600);
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-t .marks { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.prod-t .strike { text-decoration: line-through; color: var(--c-neutral-500);
                  font-size: var(--size-11); margin-left: 4px; }
.prod-t tr:focus-visible { outline: var(--a11y-floor-focus-ring) solid var(--a11y-floor-focus-color);
                           outline-offset: -2px; }
.listfoot { font-size: var(--size-11); color: var(--c-neutral-500); padding: var(--space-2) 0 0;
            line-height: var(--leading-snug); }

/* 下钻弹层 */
.snapsec { margin-bottom: var(--space-4); }
.snapsec > h4 { margin: 0 0 var(--space-2); font-size: var(--size-base); font-weight: 600;
                color: var(--c-neutral-900); }
.snapgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2);
            font-size: var(--size-base); }
@media (max-width: 560px) { .snapgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.snapgrid .cell { display: flex; flex-direction: column; gap: 2px; }
.snapgrid .cell .l { font-size: var(--size-11); color: var(--c-neutral-500); }
dialog.modal > .body .lead { color: var(--c-neutral-600); line-height: var(--leading-snug);
                             margin-bottom: var(--space-3); }
.snapscroll { max-height: 40vh; overflow: auto; border: 1px solid var(--c-neutral-100);
              border-radius: var(--radius-md); }

/* 右对齐的数字格里如果放了两个东西（实测值 + 推算比值），整体靠右。 */
.shops-t td.num .rowline, .k6 .vr .rowline { justify-content: flex-end; }