/* SnapTracker：方块 + 粗体。每层只显示这一层需要的内容。 */

#v-tracker { max-width: 820px; margin: auto; }

.tk-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px;
  font-size: 14px; font-weight: 700; color: var(--dim); transition: color .15s; }
.tk-back .icon { width: 17px; height: 17px; }
.tk-back:active { color: var(--ink); }
@media (hover: hover) { .tk-back:hover { color: var(--ink); } }

.tk-top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.tk-top > div { flex: 1; min-width: 0; }
.tk-top h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.028em; line-height: 1.1;
  overflow-wrap: anywhere; }
.tk-add { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: transform .14s var(--e), opacity .14s; }
.tk-add .icon { width: 20px; height: 20px; stroke-width: 2.5; }
.tk-add:active { transform: scale(.88); }
@media (hover: hover) { .tk-add:hover { opacity: .84; } }
.tk-sub { margin: 7px 0 0; font-size: 13.5px; font-weight: 600; color: var(--dim); }
.tk-top .tk-top-acts { flex: none; display: flex; gap: 10px; align-items: center; }
.tk-h2 { margin: 32px 0 10px; font-size: 17px; font-weight: 800; letter-spacing: -.015em; }
.tk-empty { margin: 56px 0; text-align: center; font-size: 15px; font-weight: 600;
  line-height: 2; color: var(--dim2); }

/* 方块：笼位与动物都用同一种块 */
/* 方块：左上角是名字，中间是数量，底部一行圆点＝这一笼有几只。
   今天有待办的笼子描一圈蓝边，过期描琥珀边 —— 不用点进去就知道哪一笼该动了。 */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 12px; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 1; padding: 15px 16px 14px; border-radius: 20px; background: var(--card);
  border: 1px solid var(--line); color: var(--ink); overflow: hidden;
  transition: transform .14s var(--e), border-color .18s, background .18s; }
.tile:active { transform: scale(.965); }
@media (hover: hover) { .tile:hover { border-color: var(--dim2); background: var(--soft); } }
.tile.due { border-color: var(--blue); }
.tile.late { border-color: var(--amber); }

.tile-head { display: flex; align-items: flex-start; gap: 8px; }
.tile-name { flex: 1; min-width: 0; font-size: 19px; font-weight: 800; letter-spacing: -.015em;
  line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-flag { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--blue); color: var(--card); font: 800 11.5px/20px var(--f); font-style: normal;
  text-align: center; }
.tile.late .tile-flag { background: var(--amber); }
.tile-mark { flex: none; padding: 2px 7px; border-radius: 999px; background: var(--soft2); color: var(--dim);
  font: 700 10.5px/1.5 var(--f); font-style: normal; }

.tile-mid { display: flex; align-items: baseline; gap: 4px; }
.tile-n { font-size: 40px; font-weight: 800; line-height: .95; letter-spacing: -.04em; }
.tile-mid small { font-size: 12.5px; font-weight: 700; color: var(--dim); }

/* 占位圆点：一只一个 */
.pips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 8px; }
.pip { width: 8px; height: 8px; border-radius: 3px; background: var(--blue); opacity: .85; }
.pip.off { background: var(--dim2); opacity: .5; }
.pip-more { font: 700 10.5px/1 var(--f); font-style: normal; color: var(--dim); margin-left: 2px; }

/* 动物块：编号 / 基因型（最多两行） / 最近体重 */
/* 笼位方块上的笼卡缩略图：点了直接进这张卡的打印页 */
.tile-card {
  position: absolute; right: 9px; bottom: 9px; z-index: 2;
  width: 38px; height: 27px; border-radius: 5px; overflow: hidden;
  border: 1px solid var(--line); background: var(--card);
}
.tile-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-card { box-shadow: var(--matte-sh, 0 1px 2px rgb(0 0 0 / 8%)); }
@media (hover: hover) { .tile-card:hover { border-color: var(--dim2); } }
/* 有卡的一笼：称重那行给缩略图让位，不然字会压到图底下 */
.tile.has-card .tile-weigh { padding-right: 44px; }

.tile-a { justify-content: flex-start; }
.tile-a .tile-name { font-size: 21px; }
.tile-sub { flex: 1; min-height: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin: 7px 0 6px; overflow-wrap: anywhere;
  font-size: 11.5px; font-weight: 700; line-height: 1.45; color: var(--blue-d); }
.tile-foot { flex: none; }
.tile-foot b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.025em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.off { opacity: .55; }

/* 待办入口 */
.tk-due-bar { display: flex; align-items: center; gap: 11px; margin-top: 16px; padding: 17px 18px;
  border-radius: 18px; background: var(--blue-s); color: var(--blue-d); font-weight: 700; font-size: 14px;
  transition: opacity .15s; }
.tk-due-bar b { font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.tk-due-bar span { flex: 1; min-width: 0; }
.tk-due-bar .icon { width: 18px; height: 18px; opacity: .65; }
.tk-due-bar:active { opacity: .8; }
@media (hover: hover) { .tk-due-bar:hover { opacity: .92; } }   /* 整条是个链接，桌面端给一点经过感 */
.tk-due-bar.late { background: var(--amber-s); color: var(--amber-d); }
.tk-due-bar.quiet { background: var(--soft); color: var(--dim); }

/* 次要动作：朴素文字按钮，不跟主操作抢位置 */
.tk-more { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.tk-more button { padding: 10px 15px; border-radius: 12px; background: transparent; color: var(--dim);
  border: 1px solid var(--line); font-size: 13.5px; font-weight: 700;
  transition: background .15s, color .15s, border-color .15s, transform .12s var(--e); }
@media (hover: hover) { .tk-more button:hover { background: var(--soft); color: var(--ink); border-color: var(--dim2); } }
.tk-more button:active { background: var(--soft); color: var(--ink); transform: scale(.97); }
.tk-more button.danger { color: var(--red); }

/* 资料表 */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 2px 12px; margin: 22px 0 26px; }
.facts div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: 12px; font-weight: 700; color: var(--dim); margin-bottom: 3px; }
.facts dd { margin: 0; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }

/* 待办列表 */
.tk-due { display: flex; flex-direction: column; }
.tk-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.tk-row:last-child { border-bottom: 0; }
.tk-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tk-row-main b { font-weight: 700; overflow-wrap: anywhere; }
.tk-row-main small { font-size: 12px; font-weight: 600; color: var(--dim); }
.tk-when { flex: none; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  background: var(--soft); color: var(--dim); }
.tk-when.today { background: var(--blue-s); color: var(--blue-d); }
.tk-when.late { background: var(--red-s); color: var(--red); }
.tk-tick { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line);
  color: var(--dim); display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, transform .12s var(--e); }
.tk-tick .icon { width: 16px; height: 16px; }
.tk-tick:active { background: var(--green-s); color: var(--green); transform: scale(.88); }

/* 指标图 */
.tchart { width: 100%; overflow-x: auto; }
.tchart svg { display: block; }
.chart-line, .chart-dot { transform-box: fill-box; transform-origin: center; }
.chart-area { transform-box: view-box; }
.chart-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.chart-key { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--dim); background: var(--soft);
  transition: background .15s, color .15s, transform .12s var(--e); }
@media (hover: hover) { .chart-key:hover { background: var(--soft2); color: var(--ink); } }
.chart-key:active { transform: scale(.95); }
.chart-key.on { background: var(--ink); color: var(--bg); }
.chart-swatch { width: 10px; height: 10px; flex: none; border-radius: 3px; }
.chart-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%;
  padding: 10px 12px; border-radius: 12px; background: var(--soft); }
.chart-colors-for { font-size: 12px; font-weight: 800; color: var(--ink); margin-right: 2px; }
.chart-color { display: inline-flex; align-items: center; padding: 4px; border-radius: 8px;
  border: 1.5px solid transparent; transition: border-color .15s; }
/* :focus-visible 和 :hover 分开写 —— 裸 :hover 在触屏上会粘住 */
.chart-color:focus-visible { border-color: var(--line); }
@media (hover: hover) { .chart-color:hover { border-color: var(--line); } }
.chart-color.reset { padding: 4px 10px; font-size: 12px; font-weight: 700; color: var(--dim); }
.chart-empty { text-align: center; padding: 40px 10px; font-weight: 600; }
.metric-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0 10px; }
.metric-tabs button { padding: 8px 15px; border-radius: 999px; background: var(--soft); color: var(--dim);
  font-size: 13.5px; font-weight: 700; transition: background .15s, color .15s, transform .12s var(--e); }
.metric-tabs button:active { transform: scale(.95); }
@media (hover: hover) { .metric-tabs button:not(.on):hover { background: var(--soft2); color: var(--ink); } }
.metric-tabs button.on { background: var(--ink); color: var(--bg); }

/* 选项式录入 */
.pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.pick.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.pick button { padding: 10px 15px; border-radius: 11px; background: var(--soft); color: var(--ink);
  font-size: 14px; font-weight: 700; border: 1.5px solid transparent;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .12s var(--e); }
.pick button:active { transform: scale(.97); }
@media (hover: hover) { .pick button:not(.on):hover { background: var(--soft2); } }
.pick button.on { background: var(--blue-s); border-color: var(--blue); color: var(--blue-d); }
.fieldset { margin: 16px 0; }
.fieldset > label.hint { display: block; font-size: 13px; font-weight: 700; color: var(--dim); margin-bottom: 2px; }
/* 称重行：编号 | 输入框 | 变化量。
   统一改成 grid：polish.css 里同名 .wrow 的 grid 写法特异度更低、一直被这里的
   flex 盖着没生效；这里用同一套列宽，两边说的才是同一种布局。 */
.f.wrow { display: grid; grid-template-columns: minmax(58px, auto) 1fr minmax(96px, auto); align-items: center; gap: 10px; }
.f.wrow span { min-width: 62px; font-weight: 800; }
.f.wrow input { min-width: 0; }

/* 造模 */
.model-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-bottom: 18px; }
.model-card { text-align: left; padding: 14px 15px; border-radius: 14px; background: var(--soft);
  border: 1.5px solid transparent; color: var(--ink); transition: border-color .15s, background .15s, transform .12s var(--e); }
.model-card:active { transform: scale(.98); }
@media (hover: hover) { .model-card:not(.on):hover { border-color: var(--dim2); } }
.model-card.on { border-color: var(--blue); background: var(--blue-s); }
.model-card b { display: block; font-size: 14.5px; font-weight: 800; margin-bottom: 4px; }
.model-card small { display: block; font-size: 12px; font-weight: 600; line-height: 1.55; color: var(--dim); }
.model-card .sp { margin-top: 4px; color: var(--blue-d); font-weight: 700; }
.step-row { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.step-row:last-child { border-bottom: 0; }
.step-day { flex: none; font-weight: 800; font-size: 13px; color: var(--blue-d); min-width: 78px; }
.step-main { flex: 1; min-width: 0; }
.step-main b { font-weight: 700; }
.step-main small { display: block; font-size: 12px; font-weight: 600; color: var(--dim); margin-top: 2px; overflow-wrap: anywhere; }
.caution { margin-top: 14px; padding: 12px 15px; border-radius: 12px; background: var(--amber-s);
  color: var(--amber-d); font-size: 13px; font-weight: 600; line-height: 1.7; }

@media (max-width: 760px) {
  .tk-top h1 { font-size: 28px; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
  .tile { padding: 13px 13px 12px; border-radius: 17px; }
  .tile-name { font-size: 17px; }
  .tile-a .tile-name { font-size: 18px; }
  .tile-n { font-size: 34px; }
  .tile-foot b { font-size: 15px; }
}

/* 笼卡「这几处没把握」（7.0）
   识别时模型自己点名的字段摆在这里，点一行就去改那一项。
   用琥珀色不用红色 —— 这不是错误，是「看一眼」。红色会让人以为出了故障。 */
.tk-check {
  display: grid; gap: 6px; padding: 11px 13px; margin: 10px 0;
  border: 1px solid var(--amber); border-radius: 12px; background: var(--amber-s);
}
.tk-check-h {
  margin: 0; display: flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 650; color: var(--amber-d);
}
.tk-check-h .icon { width: 16px; height: 16px; }
.tk-check-row {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  font: inherit; font-size: 13.5px; cursor: pointer; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink);
}
.tk-check-row b { flex: none; font-weight: 600; }
.tk-check-row span { flex: 1; min-width: 0; color: var(--dim);
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-check-row .icon { flex: none; width: 15px; height: 15px; color: var(--dim2); }
@media (hover: hover) { .tk-check-row:hover { border-color: var(--amber-d); } }
.tk-check-n { margin: 0; font-size: 12.5px; color: var(--dim); line-height: 1.6; }
.tk-check-opts { display: flex; flex-wrap: wrap; gap: 6px; }

/* 笼位里的称重 / 造模（7.0）：两个写着字的按钮，不再是意义不明的「+」 */
.cg-main-acts { display: flex; gap: 10px; margin: 6px 0 12px; }
.cg-main-acts .btn { flex: 1; justify-content: center; font-size: 15px; padding: 11px 14px; }
.cg-main-acts .icon { width: 17px; height: 17px; }

/* 这一笼的待办：造模排出来的给药、换水，勾掉就算做了 */
.cg-todos { display: grid; gap: 6px; margin: 0 0 12px; }
.cg-todo {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--card);
}
.cg-todo input { width: 18px; height: 18px; flex: none; }
.cg-todo span { display: grid; gap: 1px; min-width: 0; }
.cg-todo b { font-size: 14px; font-weight: 600; }
.cg-todo small { font-size: 12px; color: var(--dim); }
.cg-todo.today { border-color: var(--amber); }
.cg-todo.late { border-color: var(--red); }
.cg-todo.late small { color: var(--red); }