app.css

/* ─────────────────────────────────────────────────────────────
   DiffLens UI v2 — 结构基准稿
   功能集 = PRD F-001..F-043，不多不少。布局重做，语义色为契约。
   母题：gutter/接缝 —— diff 的定义性结构是两份文本被缝合处的竖栏。
   ───────────────────────────────────────────────────────────── */

:root {
  --ground:   #FCFCFD;
  --panel:    #F3F4F7;
  --field:    #FFFFFF;
  --line:     #E3E5EA;
  --ink:      #191C22;
  --ink-soft: #656B78;
  --accent:   #3B4FD8;
  --accent-soft: rgba(59, 79, 216, 0.10);

  /* 语义色：契约。三档共用同一 L 与同一 C，只有色相不同 —— 视觉重量真正相等。
     L/C 不是拍脑袋：红色相(22)在 sRGB 里的彩度天花板远低于绿(150)，
     L=0.945 时红只到 C=0.030。给超了会被色域映射静默压低 L，
     对齐就白做了（实测踩过：L 掉到 0.9316，极差回到 GitHub 水平）。
     L=0.92 是三色相共用 C=0.045 的落点，正文对比度 13.2。 */
  --add-bg:   oklch(0.92 0.045 150);
  --add-word: oklch(0.83 0.096 150);
  --add-ink:  oklch(0.440 0.120 150);
  --del-bg:   oklch(0.92 0.045 22);
  --del-word: oklch(0.83 0.096 22);
  --del-ink:  oklch(0.470 0.160 22);
  --chg-bg:   oklch(0.92 0.045 85);
  --chg-ink:  oklch(0.470 0.100 75);
  --minor-bg: oklch(0.965 0.004 265);
  --ws:       #B9BEC9;

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* 圆角只留两级：控件 6px、容器面 9px——此前 6/7/8/9 四种并存，无信息含义，纯不一致 */
  --r-ctl: 6px;
  --r-box: 9px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:   #15171C;
    --panel:    #1B1E25;
    --field:    #101216;
    --line:     #2C3039;
    --ink:      #E7E9EE;
    --ink-soft: #98A0AF;
    --accent:   #8A9BFF;
    --accent-soft: rgba(138, 155, 255, 0.14);

    /* 暗色三档同样共用 L=0.30 / C=0.060（实测该 L 下共用安全彩度上限 0.0737，未超域）*/
    --add-bg:   oklch(0.30 0.060 150);
    --add-word: oklch(0.44 0.100 150);
    --add-ink:  oklch(0.800 0.140 150);
    --del-bg:   oklch(0.30 0.060 22);
    --del-word: oklch(0.44 0.100 22);
    --del-ink:  oklch(0.800 0.120 18);
    --chg-bg:   oklch(0.30 0.060 85);
    --chg-ink:  oklch(0.830 0.100 85);
    --minor-bg: oklch(0.260 0.005 265);
    --ws:       #4E5563;
  }
}
/* 观看者的主题切换必须双向压过 media query */
:root[data-theme="dark"] {
  --ground: #15171C; --panel: #1B1E25; --field: #101216; --line: #2C3039;
  --ink: #E7E9EE; --ink-soft: #98A0AF; --accent: #8A9BFF;
  --accent-soft: rgba(138, 155, 255, 0.14);
  --add-bg: oklch(0.30 0.060 150); --add-word: oklch(0.44 0.100 150); --add-ink: oklch(0.800 0.140 150);
  --del-bg: oklch(0.30 0.060 22);  --del-word: oklch(0.44 0.100 22);  --del-ink: oklch(0.800 0.120 18);
  --chg-bg: oklch(0.30 0.060 85);  --chg-ink: oklch(0.830 0.100 85);
  --minor-bg: oklch(0.260 0.005 265); --ws: #4E5563;
}
:root[data-theme="light"] {
  --ground: #FCFCFD; --panel: #F3F4F7; --field: #FFFFFF; --line: #E3E5EA;
  --ink: #191C22; --ink-soft: #656B78; --accent: #3B4FD8;
  --accent-soft: rgba(59, 79, 216, 0.10);
  --add-bg: oklch(0.92 0.045 150); --add-word: oklch(0.83 0.096 150); --add-ink: oklch(0.440 0.120 150);
  --del-bg: oklch(0.92 0.045 22);  --del-word: oklch(0.83 0.096 22);  --del-ink: oklch(0.470 0.160 22);
  --chg-bg: oklch(0.92 0.045 85);  --chg-ink: oklch(0.470 0.100 75);
  --minor-bg: oklch(0.965 0.004 265); --ws: #B9BEC9;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 13px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ── 布局：顶栏 / 输入 / 选项条 / 结果 / 底部状态栏 ─────────────
   骨架取自 Stitch 稿，两条理由都是实的：
   ① 结果区独占全宽 —— 原左导轨要吃 216px，在 split 视图里等于每侧
      少约 13 个字符，而横向空间正是对比工具最不该省的东西；
   ② 选项条紧贴结果区 —— 选项影响的是 diff 不是输入，邻接性更对；
      且独占整行后 8 个控件比原版挤在顶栏跟品牌抢位置宽裕得多
      （PRD 开放问题 #1 照样解决，且不花那 216px）。
   统计与跳转沉到底部状态栏（IDE 惯例），把结果区顶部让给内容。 */
.app {
  display: grid;
  /* The result row keeps a 160px floor and the app only *starts* at the viewport
     height. Both matter: the input row is `auto`, so it grows honestly when the
     user drags a textarea's resize handle, and a `1fr` with a 0 floor under a
     locked `height: 100vh` would let it squeeze the diff down to nothing with no
     scrollbar to get it back — drag to 700px and one row survives; to 900px, none.
     With a floor and min-height, the page scrolls instead of eating the diff. */
  grid-template-rows: auto auto auto minmax(160px, 1fr) auto;
  /* Same trap on the column axis: an implicit `auto` column takes its minimum
     from the widest row's min-content, so the top bar's 498px min-content became
     the page's floor and everything below 500px scrolled sideways. The bar never
     got the chance to shrink — its flex items' min-width:0 and ellipsis only
     matter once the box is actually constrained. minmax(0, 1fr) constrains it. */
  grid-template-columns: minmax(0, 1fr);
  height: 100vh;
}

/* 顶栏：品牌 + 隐私承诺 + 历史/导出 */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 40px; padding: 0 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mark {
  display: grid; place-items: center;
  width: 24px; height: 24px; flex: 0 0 auto;
  border-radius: var(--r-ctl);
  background: var(--accent); color: #fff;
  font: 600 14px/1 var(--mono);
}
.wordmark { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
/* 隐私承诺是产品最核心的差异点，常驻顶栏（PRD F-043）。
   用词严格对齐事实：本地运行、不上传。不是加密 —— 不做的事不许写。 */
.privacy {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 4px; padding: 3px 10px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--ground);
  white-space: nowrap; min-width: 0;
}
.privacy b {
  font: 600 9.5px/1 var(--mono);
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--add-ink);
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
/* min-width on both: a flex item defaults to min-width:auto, which on nowrap text
   is the full string — the ellipsis never gets a chance and the bar just refuses
   to go below its min-content, scrolling the page sideways instead. */
.privacy span {
  font-size: 10.5px; color: var(--ink-soft);
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.topacts { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

/* 选项条：3 组 + 视图切换，独占整行 */
.optbar {
  display: flex; align-items: center; gap: 0; flex-wrap: wrap;
  padding: 5px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
/* Groups wrap internally too, or the widest one (Display, at 463px) sets a floor
   the page can't go under and narrow windows scroll sideways. */
.group { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 11px; padding: 3px 14px; }
.group:first-child { padding-left: 0; }
.group + .group { border-left: 1px solid var(--line); }
.glabel {
  font: 500 9.5px/1 var(--mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
  user-select: none;
}
.chk {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink);
  user-select: none; cursor: pointer; white-space: nowrap;
}
.chk input { accent-color: var(--accent); margin: 0; cursor: pointer; }
.chk:hover { color: var(--accent); }

.action {
  font: 500 11.5px/1 var(--mono);
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--ground);
  color: var(--accent);
  cursor: pointer; white-space: nowrap;
}
.action:hover { border-color: var(--accent); background: var(--accent-soft); }

/* 控件统一的过渡与按压反馈：120ms 内的状态变化读作"响应"而非"动画"；
   prefers-reduced-motion 的全局豁免会整体关掉它们。.pip 不在此列（归 F-044 段管）。 */
.action, .navbtn, .swap, .segbtn, .link, .item, .foldbtn, .hist-restore, .hist-del, .menu > summary {
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.action:active, .navbtn:active:not(:disabled), .swap:active, .segbtn:active,
.item:active, .hist-restore:active, .hist-del:active, .foldbtn:active,
.menu > summary:active { transform: translateY(0.5px); }

/* 底部状态栏：统计 + 跳转 + 键盘提示 */
.statusbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 30px; padding: 0 12px;
  background: var(--panel);
  border-top: 1px solid var(--line);
}
.statusbar kbd {
  font: 9.5px/1 var(--mono);
  padding: 2px 4px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--ground);
  color: var(--ink-soft);
}
.hint { font: 9.5px/1 var(--mono); color: var(--ink-soft); display: flex; align-items: center; gap: 4px; }

/* 输入区 */
.io {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0;
  padding: 12px 12px 10px;
}
.pane { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pane-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pane-head h2 {
  margin: 0;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.pane-acts { display: inline-flex; gap: 10px; }
.link {
  border: 0; background: none; padding: 0;
  font: 11px/1 var(--sans);
  color: var(--accent); cursor: pointer;
}
.link:hover { text-decoration: underline; }
textarea {
  height: 22vh; min-height: 120px;
  width: 100%; resize: vertical;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-box);
  background: var(--field);
  color: var(--ink);
  font: 12px/1.5 var(--mono);
  tab-size: 2;
}
textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.dragover { border-color: var(--accent); border-style: dashed; background: var(--accent-soft); }
textarea::placeholder { color: var(--ink-soft); }

/* 中缝：swap 挂在两栏之间的接缝上 */
.seam { display: flex; align-items: center; justify-content: center; width: 44px; position: relative; }
.seam::before {
  content: ""; position: absolute; top: 26px; bottom: 0; left: 50%;
  border-left: 1px solid var(--line);
}
.swap {
  position: relative; z-index: 1;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--ground);
  color: var(--ink-soft);
  font-size: 13px; cursor: pointer;
}
.swap:hover { border-color: var(--accent); color: var(--accent); }

/* 结果区：独占全宽，上下都无工具栏 —— 内容拿走最大面积。
   右侧第二列是 F-044 改动色标轨道（隐藏时列宽归零，不占位）。 */
.stage { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 0; padding: 10px 12px; }
.stats { font: 11.5px/1 var(--mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.stats .add   { color: var(--add-ink); font-weight: 600; cursor: pointer; }
.stats .del   { color: var(--del-ink); font-weight: 600; cursor: pointer; }
.stats .minorc{ color: var(--ink-soft); font-weight: 600; cursor: pointer; }
.stats .movedc{ color: var(--accent); font-weight: 600; }
.stats .same  { color: var(--add-ink); font-weight: 600; }
.stats .add:hover, .stats .del:hover, .stats .minorc:hover { text-decoration: underline; }

.nav { display: inline-flex; align-items: center; gap: 3px; }
.navbtn {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--ground); color: var(--ink);
  font-size: 11px; cursor: pointer;
}
.navbtn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.navbtn:disabled { opacity: 0.38; cursor: default; }
.navcount {
  min-width: 52px; text-align: center;
  font: 10.5px/1 var(--mono); color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; margin-left: auto; }
.segbtn {
  border: 0; background: var(--ground); color: var(--ink-soft);
  font: 500 11px/1 var(--mono); letter-spacing: 0.04em;
  padding: 6px 11px; cursor: pointer;
}
.segbtn + .segbtn { border-left: 1px solid var(--line); }
.segbtn:hover { color: var(--accent); }
/* The selected view is only ever signalled by this fill, so the label on it has
   to stay readable. White on the dark theme's lighter accent is 2.56:1. */
.segbtn.on { background: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) { .segbtn.on { color: #10131c; } }
:root[data-theme="dark"] .segbtn.on { color: #10131c; }
:root[data-theme="light"] .segbtn.on { color: #fff; }

.menu { position: relative; }
.menu > summary {
  list-style: none; cursor: pointer; user-select: none;
  font: 11px/1 var(--sans); color: var(--accent);
  padding: 6px 2px;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { text-decoration: underline; }
.sheet {
  position: absolute; right: 0; top: calc(100% + 5px); z-index: 20;
  display: flex; flex-direction: column;
  min-width: 190px; padding: 4px;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r-box);
  box-shadow: 0 10px 30px rgba(10, 12, 20, 0.16);
}
.item {
  border: 0; background: none; text-align: left;
  font: 12px/1 var(--sans); color: var(--ink);
  padding: 8px 9px; border-radius: var(--r-ctl); cursor: pointer; white-space: nowrap;
}
.item:hover { background: var(--accent-soft); color: var(--accent); }

.histsheet { min-width: 292px; }
.hist-list { max-height: 300px; overflow: auto; margin-top: 3px; }
.hist-empty { padding: 10px 9px; font-size: 11.5px; color: var(--ink-soft); }
.hist-item { display: flex; align-items: stretch; gap: 2px; }
.hist-restore {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  border: 0; background: none; text-align: left; cursor: pointer;
  padding: 7px 9px; border-radius: var(--r-ctl); color: var(--ink);
}
.hist-restore:hover { background: var(--accent-soft); }
.hist-prev { font: 11.5px/1.3 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-time { font: 10px/1 var(--mono); color: var(--ink-soft); }
.hist-del {
  border: 0; background: none; cursor: pointer;
  color: var(--ink-soft); padding: 0 9px; border-radius: var(--r-ctl); font-size: 11px;
}
.hist-del:hover { background: var(--del-bg); color: var(--del-ink); }

/* ── 结果表面 ─────────────────────────────────────────────── */
.result {
  min-height: 0; overflow: auto;
  /* positioned：行的 offsetTop 以结果区为原点——pip 轨道的定位算法依赖这一点 */
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-box);
  background: var(--field);
  font: 12px/1.55 var(--mono);
}
/* 滚动条主题化：默认系统滚动条在暗色下是刺眼的亮灰块。颜色全部引用既有变量，
   亮暗两套自动成立；Firefox 走 scrollbar-color 降级，语义相同。 */
.result, textarea, .hist-list { scrollbar-color: var(--line) transparent; }
.result::-webkit-scrollbar, textarea::-webkit-scrollbar, .hist-list::-webkit-scrollbar { width: 10px; height: 10px; }
.result::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb, .hist-list::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 5px;
  border: 2px solid var(--field);
}
.result::-webkit-scrollbar-thumb:hover, textarea::-webkit-scrollbar-thumb:hover, .hist-list::-webkit-scrollbar-thumb:hover {
  background: var(--ink-soft);
}
.result::-webkit-scrollbar-corner, textarea::-webkit-scrollbar-corner { background: transparent; }
.row { display: flex; align-items: flex-start; }
.num {
  flex: 0 0 62px;
  display: flex; gap: 6px; justify-content: flex-end;
  padding: 0 8px;
  color: var(--ink-soft);
  background: var(--panel);
  border-right: 1px solid var(--line);   /* 第三道缝：行号 gutter */
  user-select: none; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
.num span { display: inline-block; min-width: 22px; text-align: right; }
.sign { flex: 0 0 18px; text-align: center; color: var(--ink-soft); user-select: none; }
.txt { flex: 1; min-width: 0; padding: 0 10px 0 2px; white-space: pre; }
.result.wrap .txt { white-space: pre-wrap; overflow-wrap: anywhere; }

.row.equal { color: var(--ink); }
.row.add   { background: var(--add-bg); }
.row.del   { background: var(--del-bg); }
.row.change{ background: var(--chg-bg); }
.row.minor { background: var(--minor-bg); color: var(--ink-soft); }
.row.add .sign { color: var(--add-ink); }
.row.del .sign { color: var(--del-ink); }
.row.change .sign { color: var(--chg-ink); }
.row.moved, .scol.moved { box-shadow: inset 3px 0 0 var(--accent); }
.row.jumped, .srow.jumped { outline: 2px solid var(--accent); outline-offset: -2px; }

ins { background: var(--add-word); text-decoration: none; border-radius: 2px; padding: 0 1px; }
del { background: var(--del-word); text-decoration: none; border-radius: 2px; padding: 0 1px; }
.ws { color: var(--ws); }
.movetag {
  margin-left: 8px; padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--ground);
  color: var(--accent);
  font: 600 9.5px/1.5 var(--mono);
  letter-spacing: 0.03em;
  white-space: nowrap; user-select: none;
}

/* split */
.srow { display: flex; align-items: stretch; }
.scol { flex: 1 1 50%; min-width: 0; display: flex; align-items: flex-start; }
.scol.b { border-left: 1px solid var(--line); }
.snum {
  flex: 0 0 40px; text-align: right; padding: 0 8px;
  color: var(--ink-soft); background: var(--panel);
  border-right: 1px solid var(--line);
  user-select: none; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-size: 11px;
}
.stxt { flex: 1; min-width: 0; padding: 0 9px; white-space: pre; }
.result.wrap .stxt { white-space: pre-wrap; overflow-wrap: anywhere; }
.scol.del { background: var(--del-bg); }
.scol.add { background: var(--add-bg); }
.scol.chg { background: var(--chg-bg); }
.scol.minor { background: var(--minor-bg); color: var(--ink-soft); }
.scol.blank { background: var(--panel); }

/* 折叠带 */
.row.fold { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.foldbtn {
  width: 100%; border: 0; background: none; cursor: pointer;
  color: var(--accent); font: 11px/1 var(--mono);
  padding: 6px 8px; text-align: center; letter-spacing: 0.04em;
}
.foldbtn:hover { background: var(--accent-soft); }

/* ── F-044 改动色标轨道 ────────────────────────────────────────
   pip 颜色直接引用语义 -ink 变量：亮/暗两套值已在 :root 定义，
   此处零新增色值，语义映射（绿增/红删/琥珀改/强调=当前）自动成立。
   pip 的 top 由 JS 按文档相对高度写入（specs 决策 1 的几何豁免）。 */
.pip-rail {
  position: relative;
  width: 10px; min-height: 0;
  /* 间距挂在轨道自身：隐藏（display:none）时随之归零，结果区拿回全宽 */
  margin-left: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
}
.pip-rail.hidden { display: none; }
.pip {
  position: absolute; left: 1px; right: 1px;
  height: 4px;
  border: 0; border-radius: 2px; padding: 0;
  cursor: pointer;
}
.pip.add    { background: var(--add-ink); }
.pip.del    { background: var(--del-ink); }
.pip.change { background: var(--chg-ink); }
.pip:hover  { transform: scaleY(1.7); }
.pip.current {
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.placeholder {
  display: grid; place-items: center; gap: 6px;
  height: 100%; min-height: 180px; padding: 24px;
  text-align: center; color: var(--ink-soft);
  font: 12px/1.6 var(--sans);
}
.placeholder .big { font: 500 13px/1 var(--mono); color: var(--ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.segbtn:focus-visible, .item:focus-visible, .hist-restore:focus-visible { outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Stack only when side-by-side panes would be genuinely unusable (~220px each).
   Stacking is not free: two panes bill the page twice over, and the diff pays.
   Measured, 31-row diff, rows fully visible — stack at 900px vs at 480px:
     1440px  28 / 28      880px  20 -> 27      620px  12 -> 18
   The old single-column layout showed 26 / 26 / 19 at those widths. Reading more
   diff beats wider input boxes: the panes are for pasting into, the result is
   what you actually read. */
@media (max-width: 480px) {
  .io { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  textarea { height: 14vh; min-height: 96px; }
  .seam { width: auto; height: 36px; }
  .seam::before { top: 50%; bottom: auto; left: 0; right: 0; border-left: 0; border-top: 1px solid var(--line); }
  /* 不隐藏隐私副文案：实测 620px 时顶栏仍余 305px，藏了一分空间不省，
     却弱化了产品最核心的承诺（PRD F-043 明写不得弱化）。 */
  .seg { margin-left: 0; }
  .group + .group { border-left: 0; }
}