/* Pacisoft 2026 — comparison table page (so-sanh.html) only.
   Requires tokens.css + base.css. Defines NO tokens, overrides NO base components.
   The compare TRAY and TOAST live on every page and are styled by compare.js
   (injected <style id="compare-tray-css">) — not here. */

/* the renderer toggles states with [hidden]; the display rules below must not win */
.compare-page [hidden] { display: none !important; }

/* ------------------------------------------------------------ page frame */
.compare-page { padding-bottom: var(--space-12); }

.breadcrumb { padding-block: var(--space-6) 0; }
.breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  list-style: none; margin: 0; padding: 0;
  font-size: var(--text-sm); color: var(--ink-soft);
}
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: var(--line); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-ink); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 500; }

.compare-head { padding-block: var(--space-6) var(--space-8); max-width: 64ch; }
.compare-head .lead { margin-top: var(--space-3); }

/* --------------------------------------------------------------- notices */
.compare-notice {
  display: flex; gap: var(--space-2); align-items: flex-start;
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm); line-height: 1.5;
  color: var(--ink); background: var(--accent-soft);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.compare-notice-solo { background: var(--white); }

/* ------------------------------------------------------------- toolbar */
.compare-tools {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-4);
}
.compare-summary { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }
.compare-summary strong { color: var(--ink); font-weight: 700; }

.compare-difftoggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm); font-weight: 600; color: var(--ink);
  background: var(--white); border: 1px solid var(--line);
  border-radius: 999px; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.compare-difftoggle:hover { border-color: var(--accent); background: var(--accent-soft); }
.compare-difftoggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-ink); cursor: pointer; }
.compare-difftoggle:focus-within { border-color: var(--accent-ink); }

/* --------------------------------------------- sticky product-name strip */
/* Shown only once the table head has scrolled under the site header, so the
   reader always knows which column is which. Horizontally slaved to the
   table's own scroll container (transform, set by compare.js). */
.compare-pin {
  position: sticky; top: 0; z-index: 40;
  overflow: hidden; isolation: isolate;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: -1px;
}
.compare-pin[hidden] { display: none !important; }
.compare-pin-track { display: flex; min-width: max-content; }
.compare-pin-cell {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-xs); line-height: 1.4; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-right: 1px solid var(--line);
}
.compare-pin-cell.is-corner { background: var(--paper); }
.compare-pin-cell:last-child { border-right: 0; }
/* opaque overlay over the track's own corner cell so the label column stays put */
.compare-pin-corner {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--paper);
  border-right: 1px solid var(--line);
  font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap; overflow: hidden;
}

/* ------------------------------------------------------ scroll container */
.compare-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.compare-scroll:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }

/* ----------------------------------------------------------------- table */
/* separate borders: position:sticky cells are unreliable under border-collapse */
.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}
.compare-table th, .compare-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }

/* row-label column — pinned while the product columns scroll sideways */
.compare-table thead th.compare-corner,
.compare-table tbody th[scope="row"] {
  position: sticky; left: 0; z-index: 2;
  width: 200px; min-width: 200px;
  background: var(--white);
  border-right: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-xs); letter-spacing: .02em; line-height: 1.4;
  color: var(--ink-soft);
}
.compare-table thead th.compare-corner {
  z-index: 3; background: var(--paper); vertical-align: bottom;
  border-bottom: 2px solid var(--line);
}
.compare-corner-label {
  display: block;
  font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}
.compare-legend {
  display: block; margin-top: var(--space-2);
  font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs);
  letter-spacing: 0; text-transform: none; color: var(--ink-soft);
}
.compare-legend .compare-diff-dot { margin-left: 0; margin-right: 2px; }

/* product column heads */
.compare-table thead th.compare-col {
  min-width: 220px;
  padding: var(--space-4);
  background: var(--paper);
  border-bottom: 2px solid var(--line);
  vertical-align: top;
}
/* flex (not grid): a fixed-height grid container still sizes its row to the
   image's max-content height, so a percentage max-height would never clamp */
.compare-col-media {
  display: flex; align-items: center; justify-content: center;
  height: 108px; margin-bottom: var(--space-3);
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  padding: var(--space-2);
}
.compare-col-media img {
  max-height: 92px; max-width: 100%; width: auto; height: auto;
  object-fit: contain; mix-blend-mode: multiply;
}
.compare-col-brand {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
}
.compare-col-name {
  margin: 0 0 var(--space-3); min-height: 2.6em;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-base);
  line-height: 1.3; letter-spacing: -.01em;
}
/* clamp to 2 lines so the per-column buttons line up across every column */
.compare-col-name a {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--ink); text-decoration: none;
}
.compare-col-name a:hover { color: var(--accent-ink); text-decoration: underline; }
.compare-col-actions { display: grid; gap: var(--space-2); }
.compare-col-actions .btn.is-added { background: var(--ok); border-color: var(--ok); color: var(--white); }
.compare-col-drop {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs); font-weight: 600; color: var(--ink-soft);
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.compare-col-drop:hover { color: var(--ink); border-color: #B9C8DA; background: var(--white); }

/* the "add another product" ghost column (1-item state) */
.compare-table thead th.compare-col-slot {
  background: var(--white);
  border-left: 1px dashed var(--line);
  text-align: center;
}
.compare-slot-mark {
  display: grid; place-items: center;
  width: 48px; height: 48px; margin: var(--space-6) auto var(--space-3);
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; line-height: 1;
  color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px;
}
.compare-slot-title { margin: 0 0 var(--space-2); font-family: var(--font-display); font-weight: 700; }
.compare-slot-copy { margin: 0 0 var(--space-3); font-size: var(--text-xs); color: var(--ink-soft); line-height: 1.5; }
.compare-table td.is-slot { color: var(--line); text-align: center; border-left: 1px dashed var(--line); }

/* ------------------------------------------------- difference highlighting */
.compare-table td { color: var(--ink); }
.compare-table td.is-wrap { line-height: 1.55; }

/* rows where every column reads the same recede */
.compare-row.is-same th[scope="row"] { font-weight: 500; color: #7B8B99; }
.compare-row.is-same td { color: var(--ink-soft); font-weight: 400; }

/* rows that actually differ are the useful ones */
.compare-row.is-diff th[scope="row"] { background: var(--accent-soft); color: var(--accent-ink); }
.compare-row.is-diff td { color: var(--ink); font-weight: 600; }
.compare-row.is-diff td.is-wrap { font-weight: 400; }
.compare-diff-dot {
  display: inline-block; width: 6px; height: 6px; margin-left: 6px; vertical-align: 2px;
  background: var(--accent); border-radius: 999px;
}

.compare-table.only-diff .compare-row.is-same { display: none; }

/* ---------------------------------------------------------------- footer */
.compare-foot {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ----------------------------------------------------------- empty state */
.compare-empty {
  display: grid; justify-items: center; text-align: center;
  gap: var(--space-3);
  padding: var(--space-16) var(--space-4);
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.compare-empty-icon { color: var(--line); }
.compare-empty h2 { margin: 0; }
.compare-empty p { margin: 0; max-width: 46ch; }
.compare-empty-tip { font-size: var(--text-sm); color: var(--ink-soft); }
.compare-empty-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-3); }

/* --------------------------------------------------------------- mobile */
@media (max-width: 767px) {
  .compare-table thead th.compare-corner,
  .compare-table tbody th[scope="row"] { width: 132px; min-width: 132px; }
  .compare-table thead th.compare-col { min-width: 176px; padding: var(--space-3); }
  .compare-table th, .compare-table td { padding: var(--space-3); }
  .compare-table td.is-wrap { min-width: 200px; }
  .compare-col-media { height: 84px; }
  .compare-col-name { font-size: var(--text-sm); }
  .compare-tools { align-items: stretch; }
  .compare-difftoggle { justify-content: center; }
  .compare-foot .btn { flex: 1 1 auto; }
}