/* Comparison page (compare.html) - Gipity vs the alternatives.
   Builds on the styles.css tokens; everything scoped under .compare-* so
   nothing leaks into other pages if this sheet is ever linked elsewhere. */

/* The page intro/header is now the shared `.page-intro` in styles.css. */

/* Tab row sits above the tables; reuse the site tab component, full width. */
.compare-tabs {
  margin-top: var(--space-lg);
}
.compare-tabs .tab-row {
  max-width: none;
  justify-content: center;
}
.compare-tabs .tab {
  flex: 0 1 auto;
}

/* Horizontal scroll wrapper so the table survives narrow screens. */
.compare-scroll {
  margin-top: var(--space-sm);
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.compare-table {
  width: 100%;
  min-width: 860px;
  /* water.css forces table-layout: fixed + break-word, which crushes every
     column to equal width and breaks labels mid-word. */
  table-layout: auto;
  overflow-wrap: normal;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  font-size: var(--text-sm);
}
/* Kill water.css's cool-grey zebra striping; the warm row borders are enough. */
.compare-table tbody tr {
  background: transparent;
}
.compare-table th,
.compare-table td {
  padding: var(--space-sm) calc(var(--space-sm) + 2px);
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  text-align: center;
  vertical-align: middle;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Row labels (first column) */
.compare-table th[scope="row"] {
  text-align: left;
  font-weight: 500;
  color: var(--text);
  min-width: 190px;
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 1;
}

/* Column headers */
.compare-table thead th {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-muted);
  white-space: nowrap;
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-strong);
}
.compare-table thead th:first-child {
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 2;
}

/* Clickable competitor column headers: drill down to a Gipity-vs-one view.
   The button has to read exactly like the plain header text, so strip water.css's
   button chrome and inherit the th's typography. */
.compare-table thead th .vendor-toggle {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  border-radius: var(--radius);
}
.compare-table thead th .vendor-toggle small {
  cursor: pointer;
}
.compare-table thead th .vendor-toggle:hover,
.compare-table thead th .vendor-toggle:focus-visible {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}

/* Section divider rows ("Approach", "The stack") */
.compare-table .compare-group th {
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
  padding-top: var(--space-md);
  padding-bottom: var(--space-sm);
  position: static;
}

/* Gipity column: highlighted */
.compare-table .col-gipity {
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}
.compare-table thead .col-gipity {
  color: var(--primary);
  font-size: var(--text-base);
}

.compare-table thead .col-gipity .gipity-head {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}
.compare-table .gipity-egg {
  width: 18px;
  height: 18px;
  display: block;
}

/* DIY column: the stack you'd assemble yourself - text, not marks. */
.compare-table .col-diy {
  font-size: var(--text-xs);
  color: var(--text-muted);
  border-left: 1px dashed var(--border-strong);
  min-width: 110px;
  max-width: 140px;
}
.compare-table thead .col-diy {
  color: var(--text-muted);
}
.compare-table thead th small {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-faint);
  text-transform: none;
  letter-spacing: 0;
}

/* Marks. Single glyphs center reliably with line-height = box height;
   grid/flex centering drifts with the glyph's baseline metrics. */
.mark {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  line-height: 1.6rem;
  text-align: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: var(--text-sm);
}
.mark-yes {
  color: var(--live);
  background: color-mix(in srgb, var(--live) 12%, transparent);
}
.mark-no {
  color: #f87171;
  background: color-mix(in srgb, #f87171 10%, transparent);
}
.mark-partial {
  color: #fbbf24;
  background: color-mix(in srgb, #fbbf24 10%, transparent);
}

/* Sticky column headers on wide screens: the overflow-x wrapper would break
   viewport sticky, so above the breakpoint the wrapper stops scrolling and the
   header row pins just below the (sticky, 49px) site header. On narrow
   screens the horizontal scroll wrapper wins and the header scrolls away. */
@media (min-width: 1000px) {
  .compare-scroll {
    overflow: visible;
  }
  .compare-table {
    min-width: 0;
  }
  .compare-table thead th {
    position: sticky;
    top: 49px;
    z-index: 4;
    background: var(--surface);
    box-shadow: 0 1px 0 var(--border-strong);
  }
  .compare-table thead th.col-gipity {
    background: color-mix(in srgb, var(--primary) 9%, var(--surface));
  }
}

/* Builders/Platforms tables: fix the layout and pin the Feature column to a set
   width. With table-layout:auto the Feature column rubber-bands to fill whatever
   space the vendor columns leave, so it jumped every time you drilled into a
   single vendor. Fixed layout keeps Feature put; only the mark columns absorb
   the slack, and centered glyphs don't visibly shift. */
.compare-table-grid {
  table-layout: fixed;
  /* A touch under the ~868px content width at the 900px breakpoint (below which
     we switch to the single-vendor dropdown), leaving room for a scrollbar so
     the grid never needs horizontal scroll where it's shown. */
  min-width: 820px;
}
.compare-table-grid thead th:first-child,
.compare-table-grid th[scope="row"] {
  width: 280px;
}

/* Head-to-head focus view: only three columns, so don't let them sprawl across
   a wide screen - cap the table and left-align it. Feature stays 300px (above),
   so this only narrows the mark columns. */
.compare-table-focus {
  min-width: 0;
  max-width: 620px;
}

/* DIY tab: the tool list is the content, give it room and full opacity. */
.compare-table-diy {
  min-width: 560px;
}
.compare-table-diy .col-diy {
  max-width: none;
  text-align: left;
  font-size: var(--text-sm);
  color: var(--text);
}
.compare-table-diy thead .col-diy {
  text-align: left;
}

/* Legend + footnote */
.compare-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  align-items: center;
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
/* Direct children only - the .mark circles are also spans, and this layout
   rule must not override their own centering. */
.compare-legend > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}
.compare-note {
  margin-top: var(--space-md);
  font-size: var(--text-xs);
  color: var(--text-faint);
  max-width: 720px;
}

/* ---- Mobile: "Gipity vs one" picker + a 3-column table ----
   The wide multi-column tables can't stay legible in portrait, so below the
   breakpoint we hide the tabbed tables and show a single comparison the visitor
   chooses from a dropdown. Desktop is untouched. */
.compare-mobile {
  display: none;
}
.compare-mobile-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  font-weight: 600;
}
.compare-mobile-pick select {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-xs) var(--space-sm);
}
.compare-mobile-table {
  margin-top: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
/* Three columns fit a phone, so drop the wide-table min-widths and let the
   feature label wrap instead of forcing horizontal scroll. */
.compare-table-mobile {
  min-width: 0;
}
.compare-table-mobile th[scope="row"] {
  min-width: 0;
  position: static;
}
.compare-table-mobile thead th:first-child {
  position: static;
}
.compare-table-mobile.compare-table-diy {
  min-width: 0;
}

/* Below the width where the multi-vendor grid fits without horizontal scroll,
   drop the tabs and show the single "Gipity vs ___" picker instead. */
@media (max-width: 900px) {
  .compare-tabs {
    display: none;
  }
  .compare-mobile {
    display: block;
  }
}

/* Visually-hidden text so screen readers announce each mark. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}