/* ============================================================
   会议座位安排 · 样式

   这张表最终是打印出来、由一个人站着照着念的。所以：
     · 名字是页面上最大的东西
     · 行号在两端各标一次，视线从左扫到右不用回头
     · 主席台画在最下面，座位区在上 —— 跟拿着图站在台上看到的方向一致
     · 乾坤靠整块底色区分，另外在角上写一个「乾/坤」字：
       底色在灰度打印下几乎一样（实测互比 1.06:1），
       所以真正扛事的是那个字，颜色只是锦上添花
     · 性别占底色、家庭占描边，两套信息各走各的通道，谁也不盖谁

   颜色令牌吃 app.css 那一套，两边看起来才是同一个系统。
   ============================================================ */
.sa{
  --qian:#3D6B99; --qian-bg:#C9DCF2; --qian-ink:#2C5B8F;
  --kun:#A65872;  --kun-bg:#F7D2DE;  --kun-ink:#93304F;
  /* 茶桌是家具，不是座位 —— 走木色，跟乾坤的蓝粉、跟空位的虚线框都拉开 */
  --tea:#8A6A4A; --tea-bg:#E4D6C3; --tea-line:#B79A78;
  /* 人名框一律这么大。两侧列数不同时弹性列宽会把少的那一侧拉胖，
     同一张图上就有了两种大小的框 —— 所以宽高写死，整块跟着列数变宽。 */
  --seat-w:82px; --seat-h:62px; --seat-gap:5px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sa{
    --qian:#7FB0DE; --qian-bg:#1D3149; --qian-ink:#9CC5EA;
    --kun:#DD97A9;  --kun-bg:#3B2130;  --kun-ink:#EDA9BC;
    --tea:#D8BE9B; --tea-bg:#3A3026;  --tea-line:#6B5842;
  }
}
:root[data-theme="dark"] .sa{
  --qian:#7FB0DE; --qian-bg:#1D3149; --qian-ink:#9CC5EA;
  --kun:#DD97A9;  --kun-bg:#3B2130;  --kun-ink:#EDA9BC;
  --tea:#D8BE9B; --tea-bg:#3A3026;  --tea-line:#6B5842;
}

/* 并进主应用之后，主内容区比原来的独立页面窄掉一条侧栏。
   座位图是整个应用里最宽的东西，9 列就已经溢出 —— 只在它露面时把窗口放宽，
   别让人为了看最右边那一列去横向滚。别的页面一个像素都不动。 */
body:has(.sa) #root > .win{max-width:min(1560px, 97vw);}

/* 「标签在上、输入框在下」那一格比按钮高一截，父容器 .row 是 align-items:center，
   中心对齐的结果就是按钮浮在半空。按底边对齐，一排控件才在同一条线上。 */
.sa-ctrlrow{align-items:flex-end;}
.sa-fld{display:flex;flex-direction:column;gap:0;}
.sa-fld input{
  font:inherit;width:78px;background:var(--surface);color:var(--ink);
  border:1px solid var(--line-2);border-radius:7px;padding:5px 8px;font-size:13px;
  font-family:ui-monospace,Menlo,monospace;
}
/* 一侧一组「行 × 列」：两个数字贴在一起、中间一个乘号，
   一眼看得出它们是一对，也看得出这一对管的是哪一边。 */
.sa-xy{display:flex;align-items:center;gap:5px;}
.sa-xy i{font-style:normal;font-size:11px;color:var(--ink-4);}
.sa-xy input{width:54px;}
.sa-toggle{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);
  padding:5px 10px;border:1px solid var(--line);border-radius:7px;background:var(--surface);
  cursor:pointer;user-select:none;
}
.sa-toggle:hover{background:var(--surface-2);}
.sa-toggle input{margin:0;accent-color:var(--accent);}
/* 现场模式那个开关走警示色 —— 它改变的是「能点什么」，不是「怎么显示」 */
.sa-toggle.live input{accent-color:var(--warn);}
.sa-toggle.live:has(input:checked){background:var(--warn-wash);border-color:transparent;color:var(--warn);font-weight:640;}

.sa-stats{display:flex;gap:26px;flex-wrap:wrap;align-items:center;
  margin-top:13px;padding-top:12px;border-top:1px solid var(--line);}
.sa-stats .stat b{display:block;font-size:19px;font-family:ui-monospace,Menlo,monospace;font-weight:640;line-height:1.1;}
.sa-stats .stat span{font-size:10px;color:var(--ink-4);letter-spacing:.06em;}
.sa-stats .stat.q b{color:var(--qian);} .sa-stats .stat.k b{color:var(--kun);}
.sa-stats .stat.w b{color:var(--warn);} .sa-stats .stat.b b{color:var(--bad);}
.sa-stats .stat.sub b{font-size:14px;color:var(--ink-2);}
.sa-stats .stat.sub{margin-left:-14px;}
.sa-stats .sep{width:1px;height:26px;background:var(--line);flex:none;}

.sa-gaze{text-align:center;font-size:11px;color:var(--ink-3);letter-spacing:.08em;margin:16px 0 10px;}

.sa-hall{
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:18px 16px 16px;box-shadow:var(--shadow-1);overflow-x:auto;
}
/* 黑色通栏去掉之后，台上和下面那行提示之间靠这段留白隔开 */
.sa-hall .sa-work{margin-top:16px !important;}
/* 五栏：行号 │ 乾区 │ 过道 │ 坤区 │ 行号 —— 两端都标，台上不用回头找。
   两侧各补留白到 max(左列,右列) 格宽，于是**过道正好压在整张图的中线上**，
   主席台照同一条线居中，中轴贯穿全图。留白是纯空白，不画虚线格子 ——
   画了会让人以为那里有座位。两侧列数相等时留白为 0，跟以前一模一样。
   留白并进行号那一栏，不另开轨道：多两条轨道就多两道栏距，对称场地会平白变宽。 */
.sa-hall .sa-sidelab,.sa-hall .sa-row{
  display:grid;
  grid-template-columns:calc(var(--padl) + 38px) var(--lw) 54px var(--rw) calc(var(--padr) + 38px);
  gap:6px 10px;align-items:stretch;justify-content:center;
}
/* 行号贴着座位块的内侧 —— 短的那一侧留白在外，号码不会被推到老远 */
.sa-row > .sa-rno:first-child,.sa-sidelab > span:first-child{justify-content:flex-end;}
.sa-row > .sa-rno:last-child, .sa-sidelab > span:last-child {justify-content:flex-start;}
/* 座位区、乾坤标注、主席台共用这一个容器，中线就是它的中线。
   width:max-content + 左右 auto 外边距：装得下就居中，装不下 auto 归零、
   退成靠左，横向滚动还能滚到最左边（居中的溢出会把左半截推到滚不到的地方）。 */
.sa-stage{width:max-content;margin-inline:auto;}
/* 乾坤标在座位区下缘 —— 它紧挨着主席台，读图的人从下往上找 */
.sa-sidelab{margin:8px 0 0;gap:0 10px;}
.sa-sidelab span{font-size:11px;font-weight:650;letter-spacing:.14em;text-align:center;}
.sa-sidelab .q{color:var(--qian-ink);} .sa-sidelab .k{color:var(--kun-ink);}
.sa-row{margin-bottom:6px;}
.sa-rno{
  font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--ink-3);
  display:flex;align-items:center;justify-content:center;font-weight:600;
}
.sa-blk{display:grid;gap:var(--seat-gap);}
.sa-aisle{display:grid;place-items:center;font-size:9.5px;color:var(--ink-4);letter-spacing:.2em;
  border-left:1px dashed var(--line-2);border-right:1px dashed var(--line-2);}

.sa-seat{
  height:var(--seat-h);border:1px solid var(--line-2);border-radius:7px;background:var(--surface-2);
  display:flex;flex-direction:column;justify-content:center;gap:2px;padding:5px 8px;
  cursor:grab;user-select:none;position:relative;transition:transform .1s,box-shadow .1s;
}
/* 框是死的，名字长了宁可截断也不撑大 —— 撑大一个就毁了整排的一致 */
.sa-seat .sa-nm{overflow:hidden;text-overflow:ellipsis;}
.sa-seat .sa-mt{overflow:hidden;}
/* 空位按「这是哪一区」淡淡地上色；坐了人的按「这个人的性别」上整块底色 */
.sa-seat.empty{background:transparent;border-style:dashed;border-color:var(--line);cursor:default;}
.sa-seat.empty.a-q{background:color-mix(in srgb,var(--qian-bg) 26%,transparent);}
.sa-seat.empty.a-k{background:color-mix(in srgb,var(--kun-bg) 26%,transparent);}
.sa-seat.q{background:var(--qian-bg);border-color:color-mix(in srgb,var(--qian) 42%,transparent);}
.sa-seat.k{background:var(--kun-bg); border-color:color-mix(in srgb,var(--kun) 42%,transparent);}

/* 角上的「乾/坤」字。灰度打印和色觉障碍下，分辨性别全靠它 —— 底色只是帮衬 */
.sa-sx{
  position:absolute;top:3px;right:5px;font-size:9.5px;font-weight:700;
  letter-spacing:0;line-height:1;opacity:.95;pointer-events:none;
}
.sa-seat.q .sa-sx{color:var(--qian-ink);}
.sa-seat.k .sa-sx{color:var(--kun-ink);}

/* 家庭走描边，不抢底色 —— 于是「性别看底色、家庭看外圈」互不干扰 */
.sa-seat.fam{box-shadow:inset 0 0 0 2px var(--fam);border-color:var(--fam);}
/* 越过交界坐到对方区域的人：底色已经说明了性别，这里只用虚线边点一下「他不在本区」 */
.sa-seat.cross{border-style:dashed;border-width:1.5px;}

.sa-seat .sa-nm{font-size:15px;font-weight:640;line-height:1.2;white-space:nowrap;letter-spacing:.01em;}
/* 次要信息保留但压下去 —— 点名时可能要说「新塘组的陈国强」 */
.sa-seat .sa-mt{display:flex;gap:4px;align-items:center;flex-wrap:wrap;font-size:9.5px;line-height:1.35;opacity:.8;}
.sa-seat .sa-gp{color:var(--ink-2);opacity:.75;}
.sa-seat.dragging{opacity:.4;}
.sa-seat.over{transform:scale(1.04);box-shadow:0 0 0 2px var(--accent);}
/* 点一下选中：一眼看得出「我正拿着这个人」，再点另一个格子就换过去 */
.sa-seat.picked{
  transform:scale(1.05);box-shadow:0 0 0 3px var(--accent),0 6px 18px rgba(0,0,0,.16);
  z-index:3;
}
.sa-seat.picked::after{
  content:"已选中";position:absolute;left:50%;top:-9px;transform:translateX(-50%);
  font-size:9px;font-weight:700;letter-spacing:.06em;padding:1px 6px;border-radius:4px;
  background:var(--accent);color:#fff;white-space:nowrap;
}

/* 临时加入的人：一个轻标就够，别抢名字 */
.sa-tag.tmp{background:var(--accent-wash);color:var(--accent-ink);}
.sa-seat.temp{border-style:dashed;border-width:1.5px;}

/* ---- 格子上的两个键：换人 ⇄ ／ 请假 ⊘ ----
   格子主体点一下就是「选中，准备对调」—— 那是最高频的动作，前面不能加门。
   所以这两件事只能挂在格子上，而且必须点得中：
   做成底部通栏、各占一半（一个键约 50×30），不是角上的小图标 ——
   角标在一百来像素宽的格子里，现场站着单手是点不准的。
   点它们不会连带选中这一格（JS 里 stopPropagation）。 */
.sa-acts{
  position:absolute;left:4px;right:4px;bottom:4px;height:30px;
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
}
.sa-acts.one{grid-template-columns:1fr;}
.sa-act{
  display:flex;align-items:center;justify-content:center;gap:3px;min-width:0;
  border:1px solid var(--line-2);border-radius:6px;background:var(--surface);
  font:inherit;font-size:10.5px;font-weight:650;color:var(--ink-3);
  cursor:pointer;padding:0 2px;line-height:1;white-space:nowrap;
}
.sa-act span{font-size:13px;line-height:1;}
.sa-act:hover{background:var(--surface-2);}
.sa-act.who:hover  {background:var(--accent-wash);color:var(--accent-ink);border-color:transparent;}
.sa-act.leave:hover{background:var(--bad-wash);   color:var(--bad);       border-color:transparent;}
/* 空位上的那一个键淡一点，不要盖过真正坐了人的格子 */
.sa-seat.empty .sa-act{background:transparent;border-style:dashed;}

/* ---- 选人弹窗 ----
   座位已经指定了，这一步不需要再看见它 —— 而弹窗永远在视野里，不受滚动影响。
   这正是「顶端选人、图中找位置」那条路走不通的地方。 */
.sa-modal{
  position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.42);
  display:grid;place-items:center;padding:16px;
}
.sa-mbox{
  width:min(420px,100%);max-height:min(78vh,560px);display:flex;flex-direction:column;
  background:var(--surface);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.32);
  overflow:hidden;
}
.sa-mhead{padding:14px 16px 12px;border-bottom:1px solid var(--line);}
.sa-mhead h3{margin:0 0 4px;font-size:15px;font-weight:660;}
.sa-mhead p{margin:0;line-height:1.6;}
.sa-msearch{
  font:inherit;font-size:14px;width:100%;margin-top:10px;padding:9px 11px;
  border:1px solid var(--line-2);border-radius:8px;
  background:var(--surface-2);color:var(--ink);
}
.sa-mlist{flex:1;overflow-y:auto;padding:6px 10px 10px;}
.sa-mgrp{
  font-size:10.5px;color:var(--ink-4);letter-spacing:.06em;padding:10px 6px 5px;font-weight:600;
}
/* 现场站着单手点，一行给足 48px */
.sa-mrow{
  display:flex;align-items:baseline;gap:9px;width:100%;min-height:48px;
  border:1px solid transparent;border-radius:9px;background:transparent;
  padding:8px 10px;cursor:pointer;text-align:left;font:inherit;
}
.sa-mrow:hover{background:var(--surface-2);border-color:var(--line);}
.sa-mrow b{font-size:15px;font-weight:650;}
.sa-mrow span{font-size:11.5px;color:var(--ink-4);flex:1;}
.sa-mrow i{
  font-style:normal;font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:4px;
  background:var(--accent-wash);color:var(--accent-ink);
}
.sa-mfoot{padding:10px 16px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;}
/* 过道两侧的那一对：画一根穿过过道的短线，说明这两个座位是一组的 */
.sa-seat.pair::after{content:"";position:absolute;top:50%;width:11px;height:1.5px;background:var(--fam);}
.sa-seat.q.pair::after{right:-11px;} .sa-seat.k.pair::after{left:-11px;}

/* 区内的乾坤交界：过道帮不上忙，得自己画一道分隔线 */
.sa-seat.edge-l{border-right:2px solid var(--warn);}
.sa-seat.edge-r::before{
  content:"";position:absolute;left:-6px;top:6px;bottom:6px;width:2px;background:var(--warn);border-radius:1px;
}
/* 缓冲空位：没有夫妻／家人能顶在交界上，只能空开隔一隔 */
.sa-seat.buffer{
  border-style:solid;border-color:color-mix(in srgb,var(--warn) 45%,transparent);
  background:var(--warn-wash);
}
.sa-seat.buffer::after{
  content:"缓冲";position:absolute;inset:0;display:grid;place-items:center;
  font-size:10px;font-weight:650;color:var(--warn);letter-spacing:.1em;
}

.sa-tag{font-size:9px;font-weight:700;padding:0 5px;border-radius:3px;letter-spacing:.02em;white-space:nowrap;}
.sa-tag.fam{background:var(--fam);color:#fff;}
.sa-tag.key{background:var(--bad-wash);color:var(--bad);}
.sa-tag.reg{background:var(--good-wash);color:var(--good);}

/* ---------- 主席台 ----------
   三面围合：对面 4 位在上（离观众近、面向主席），主席在下，左 2 右 1。
   「左/右」是主席自己的左右手，也正好是纸面的左右 ——
   他坐在图的下方朝上看，拿着这张图不用在脑子里翻转。 */
.sa-podium{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2);}
/* 分区靠一条细线加一行小字就够了 —— 那 8 个格子上写着「对面1／左1／右／主席」，
   本身已经说清楚这是主席台，不必再压一块深色通栏跟它抢视线。 */
.sa-podlead{
  text-align:center;font-size:11px;font-weight:650;letter-spacing:.34em;
  color:var(--ink-3);text-indent:.34em;margin:0 0 12px;
}
/* 台上两行共用同一套列宽 —— 原来「对面 4 位」和「左1/主席/右1」
   各自居中、总宽不同，左右边缘差了 28px，看着就是没对齐。
   现在两行都是同一个 4 列网格：左1 对齐对面第 1 位，右1 对齐第 4 位。 */
.sa-pod-far,.sa-pod-mid{
  display:grid;gap:6px;justify-content:center;margin-bottom:6px;
  grid-template-columns:repeat(4,var(--pod-w,132px));
}
.sa-pod-mid > .p-left {grid-column:1;}
.sa-pod-mid > .p-left[data-i="1"]{grid-row:1;}
.sa-pod-mid > .p-left[data-i="2"]{grid-row:2;}
.sa-pod-mid > .p-right{grid-column:4;grid-row:1;}
/* 台上的席位比台下大一号 —— 它是这张图的焦点。高度自己撑，不吃台下那个 --seat-h */
.sa-seat.sa-pod{height:auto;min-height:var(--pod-h,66px);padding-top:17px;}
.sa-seat.sa-pod.empty{border-style:dashed;background:transparent;}

/* 茶桌：台上正中的一张桌子，家具不是座位。
   横跨中间两列、纵跨两行，底边跟「左2」齐平；实心木色，
   跟乾坤的蓝粉底、跟空座位的虚线框都区分得开，一眼看得出它不是能坐人的地方。 */
.sa-tea{
  grid-column:2 / span 2;grid-row:1 / span 2;
  background:var(--tea-bg);border:1px solid var(--tea-line);border-radius:9px;
  display:grid;place-items:center;user-select:none;cursor:default;
  box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--tea-line) 22%,transparent);
}
.sa-tea span{
  font-size:14px;font-weight:680;letter-spacing:.3em;text-indent:.3em;color:var(--tea);
}
.sa-podlab{
  position:absolute;top:3px;left:6px;font-size:9px;font-weight:650;color:var(--ink-4);
  letter-spacing:.08em;pointer-events:none;
}
.sa-seat.sa-pod.empty .sa-podlab{position:static;display:block;text-align:center;padding:6px 0;}

/* ---------- 点名模式 ----------
   台上拿着这张纸念名字：除了行号、名字和乾坤，别的全部让路，字号再放大一档。 */
/* 现场是拿手机站着点的：格子主体是「选中对调」的目标，底下还要塞两个键，
   所以比平时高一截、宽一点 —— 两个键各约 50×30，够手指点。 */
.sa.live{--seat-w:108px; --seat-h:84px; --pod-h:90px;}
.sa.live .sa-seat{padding-bottom:36px;}
.sa.live .sa-seat.sa-pod{padding-bottom:36px;}
.sa.rollcall{--seat-w:104px; --seat-h:64px; --pod-w:150px; --pod-h:74px;}
.sa.rollcall.live{--seat-w:120px; --seat-h:92px;}
.sa.rollcall .sa-seat .sa-mt{display:none;}
.sa.rollcall .sa-seat{justify-content:center;padding:6px 8px;}
.sa.rollcall .sa-seat .sa-nm{font-size:22px;font-weight:660;letter-spacing:.03em;}
.sa.rollcall .sa-sx{font-size:11px;top:4px;right:6px;}   /* 念名字也要知道叫的是哪一侧 */
.sa.rollcall .sa-seat.fam{box-shadow:none;}
.sa.rollcall .sa-rno{font-size:14px;font-weight:700;color:var(--ink-2);}
.sa.rollcall .sa-hall .sa-sidelab,.sa.rollcall .sa-hall .sa-row{
  grid-template-columns:calc(var(--padl) + 46px) var(--lw) 48px var(--rw) calc(var(--padr) + 46px);}
.sa.rollcall .sa-work{display:none;}      /* 冲突面板是排座时用的，念名字时碍事 */
.sa.rollcall .sa-seat.buffer::after{content:"—";}
.sa.rollcall .sa-seat.sa-pod{padding-top:19px;}
.sa.rollcall .sa-podlead{font-size:13px;color:var(--ink-2);}
.sa.rollcall .sa-tea span{font-size:17px;}

/* 重要学员和常席单独成表并带座位号 —— 接待的人拿这张表找人，
   不必在几十个格子里逐个扫 */
.sa-lists{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;}
@media (max-width:900px){.sa-lists{grid-template-columns:1fr;}}
.sa-h3{margin:0 0 10px;font-size:13px;font-weight:650;display:flex;align-items:center;gap:8px;}
.sa-h3 .sa-n{font-size:11px;color:var(--ink-4);font-weight:500;}
.sa-plist{display:flex;flex-direction:column;}
.sa-pr{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:4px 0;border-bottom:1px solid var(--line);}
.sa-pr:last-child{border-bottom:0;}
.sa-pr .sa-who{font-weight:640;min-width:64px;font-size:14px;}
.sa-pr .sa-gp{color:var(--ink-4);font-size:11px;flex:1;}
.sa-pr .sa-pos{font-size:11px;color:var(--accent-ink);background:var(--accent-wash);
  padding:1px 7px;border-radius:4px;white-space:nowrap;}
.sa-pr .sa-pos.none{background:var(--bad-wash);color:var(--bad);}

/* ---- 现场变动汇总 ----
   散落在图上不够：管理层事后照着这一段补名册，现场的人照着它知道还差谁。 */
.sa-roll .sa-seg{padding:10px 0;border-bottom:1px solid var(--line);}
.sa-roll .sa-seg:last-child{border-bottom:0;padding-bottom:0;}
.sa-roll h4{margin:0 0 7px;font-size:12px;font-weight:700;display:flex;align-items:center;gap:8px;}
.sa-roll .sa-seg.leave h4{color:var(--bad);}
.sa-roll .sa-seg.temp  h4{color:var(--accent-ink);}
.sa-roll .sa-seg.none  h4{color:var(--ink-2);}
.sa-roll h4 .sa-n{font-size:11px;color:var(--ink-4);font-weight:500;}
.sa-segl{display:flex;flex-wrap:wrap;gap:6px 9px;margin-bottom:6px;}
.sa-who2{
  display:inline-flex;align-items:baseline;gap:6px;font-size:13px;font-weight:640;
  background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:3px 9px;
}
.sa-who2 i{font-style:normal;font-size:10.5px;font-weight:500;color:var(--ink-4);}
/* 图上已经没有请假的人了，取消请假只能在这儿点 —— 目标给足 */
.sa-undo{
  font:inherit;font-size:10.5px;font-weight:650;line-height:1;
  border:1px solid var(--line-2);border-radius:5px;background:var(--surface);
  color:var(--ink-3);padding:6px 8px;margin-left:2px;cursor:pointer;
}
.sa-undo:hover{background:var(--good-wash);color:var(--good);border-color:transparent;}
.sa-roll .sa-seg.leave .sa-who2{background:var(--bad-wash);border-color:transparent;}
.sa-roll p{margin:0;}

.sa-issue{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.7;
  padding:9px 0;border-bottom:1px solid var(--line);}
.sa-issue:last-child{border-bottom:0;}
.sa-issue .sa-ic{font-size:11px;font-weight:700;padding:1px 7px;border-radius:4px;white-space:nowrap;flex:none;margin-top:3px;}
.sa-issue.w .sa-ic{background:var(--warn-wash);color:var(--warn);}
.sa-issue.b .sa-ic{background:var(--bad-wash);color:var(--bad);}
.sa-issue.g .sa-ic{background:var(--good-wash);color:var(--good);}

/* 打印：印出来是拿在手上念的。控件和按钮去掉，剩下的就是那张表。
   底色在灰度下几乎分不出，所以角上那个「乾/坤」字必须印得清清楚楚。 */
@media print{
  body{background:#fff;}
  /* 并进主应用之后，纸上不该有侧栏和窗口标题条 —— 那是屏幕上的导航。
     只在座位页这么做，所以拿 :has(.sa) 限定，别的页面照旧。 */
  body:has(.sa) .titlebar,body:has(.sa) .side{display:none;}
  body:has(.sa) #root > .win{max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;
    overflow:visible;}   /* 屏幕上靠它裁圆角，纸上会把跨页的内容切掉 */
  body:has(.sa) .body{display:block;min-height:0;}
  body:has(.sa) .main{padding:0;border:0;}
  .sa-print-hide,.sa-panel,.sa-acts,.sa-undo,.sa-modal{display:none;}
  /* 请假的人图上本来就没有了，纸上自然也没有 —— 他在「现场变动」那张卡里，
     那张卡照印，拿着纸也查得到是谁请了假 */
  .sa.live .sa-seat,.sa.live .sa-seat.sa-pod{padding-bottom:5px;}
  .sa-roll{break-inside:avoid;}
  .sa-hall,.sa-lists,.sa .card{box-shadow:none;break-inside:avoid;}
  .sa-hall{overflow:visible;border-color:#bbb;}
  .sa-podium{break-inside:avoid;}
  /* 现场模式的大格子是给手指点的，纸上不需要 —— 打印一律回到纸面尺寸。
     .sa.live 的选择器比 .sa 重，所以这里得一条条压过去，不能只写 .sa。 */
  .sa,.sa.live{--seat-w:76px; --seat-h:44px; --pod-w:118px; --pod-h:48px;}
  .sa.rollcall,.sa.rollcall.live{--seat-w:92px; --seat-h:48px; --pod-w:126px; --pod-h:54px;}
  .sa-seat{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .sa-tea{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .sa-seat .sa-nm{font-size:14px;}
  .sa-sx{font-size:10px;opacity:1;}
  .sa.rollcall .sa-seat .sa-nm{font-size:19px;}
  .sa.rollcall .sa-lists{display:none;}
}