/* =====================================================================
   Competitor Comparison Tables — CENTRAL STYLESHEET  (Option A)
   ---------------------------------------------------------------------
   Single control point for how EVERY comparison table renders site-wide.

   NAMESPACE: every rule is scoped under the parent class `.cccc`
   ("claude code comparison chart"). Styles only apply inside an element
   with class="cccc", and the extra specificity keeps other blog CSS from
   overriding them. The inner cc-* classes are inert outside `.cccc`.

   Palette: ShipStation brand greens + neutral greys (reds intentionally
   unused). Font: Figtree 1.25rem / 27px. Card model: 1px outline (no
   shadow); caption is a title band inside the outline; section rows are a
   light band.

   To restyle every table at once, edit the design tokens below and
   re-deploy this one file.
   ===================================================================== */

.cccc {
  /* ---------- DESIGN TOKENS — change these to reskin every table ---------- */
  --cc-font: Figtree, "Helvetica Neue", Helvetica, Arial, sans-serif;  /* brand font */
  --cc-fg: #11003A;                   /* body text        (brand near-black)   */
  --cc-muted: #56595D;                /* labels/footnotes (neutral 600, AA)    */
  --cc-bg: #ffffff;                   /* table surface                         */
  --cc-row-alt: #F8F8F8;              /* zebra striping   (neutral 25)         */
  --cc-border: #E4E5E7;               /* internal hairlines (neutral 100)      */
  --cc-outline: #CFD1D3;              /* card outline on white  (neutral 200)  */
  --cc-header-bg: #27292A;            /* column header row (neutral 800)       */
  --cc-header-fg: #ffffff;
  --cc-primary: #006B2D;              /* primary column header (brand green)   */
  --cc-accent: #00E664;               /* bright brand green (accents/badge)    */
  --cc-accent-fg: #003A19;            /* text on the bright-green accent       */
  --cc-primary-tint: #F0FDEF;         /* primary column body  (green 25)       */
  --cc-primary-tint-strong: #E1FAE0;  /* primary column, alt rows (green 50)   */
  --cc-group-bg: #56595D;             /* section rows — mid grey, white text   */
  --cc-group-fg: #ffffff;             /* section label text                    */
  --cc-yes: #006B2D;                  /* ✓  present   (green 700, AA)          */
  /* Branded ShipStation tick (SVG embedded as a data URI so it renders on the blog,
     in the offline/inlined preview, and needs no extra request). Swap this one value
     to change every checkmark; the dark-mode block below supplies a lighter fill. */
  --cc-yes-icon: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%2211%2012%2019%2015.5%22%20fill=%22none%22%3E%3Cpath%20d=%22M18.125%2022.5L14.375%2018.75L12.5%2020.625L18.125%2026.25L28.75%2015.625L26.875%2013.75L18.125%2022.5Z%22%20fill=%22%23003311%22%3E%3C/path%3E%3Cpath%20d=%22M26.4313%2013.3062L18.125%2021.6124L14.8187%2018.3062H13.9375L12.0625%2020.1812V21.0624L17.6875%2026.6874H18.5687L29.1938%2016.0624V15.1812L27.3188%2013.3062H26.4375H26.4313ZM18.125%2025.3687L13.3813%2020.6249L14.375%2019.6312L17.6813%2022.9374H18.5625L26.8688%2014.6312L27.8625%2015.6249L18.1188%2025.3687H18.125Z%22%20fill=%22%23003311%22%3E%3C/path%3E%3C/svg%3E");
  --cc-no: #56595D;                   /* ✕  absent    (neutral 600, AA)        */
  --cc-partial: #56595D;              /* ◐  limited   (neutral 600)            */
  --cc-radius: 12px;
  --cc-feature-col: 34%;              /* first (attribute) column; competitors split the rest equally */
  --cc-cell-pad: 0.75rem 1rem;
  --cc-fs: 1rem;                      /* comparison body size                  */
  --cc-gap: 1rem;
  --cc-row-min: 4.5rem;               /* uniform row height (fits 2-line cells) */
  --cc-max: 1200px;                   /* width cap up to ShipStation + 2 competitors (<= 4 columns) */
  /* ----------------------------------------------------------------------- */

  font-family: var(--cc-font);
  color: var(--cc-fg);
  font-size: var(--cc-fs);
  font-weight: 400;
  line-height: 1.45;
  max-width: var(--cc-max);
  margin: 1.75rem auto;               /* cap the width; center within a full-width container */
}

/* More than 2 competitors (a 5th header cell present) — drop the cap; let the parent .container bound the width */
.cccc:has(.cc-table thead th:nth-child(5)) { --cc-max: none; }

/* Border-box everywhere inside the component so width:100% + padding never overflows */
.cccc, .cccc *, .cccc *::before, .cccc *::after { box-sizing: border-box; }

/* Outlined card: 1px border, rounded, no shadow. Wide tables scroll inside it. */
.cccc .cc-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--cc-outline);
  border-radius: var(--cc-radius);
  box-shadow: 0px 2px 8px rgba(0, 0, 0, .2);
}

.cccc .cc-table {
  width: 100%;
  table-layout: fixed;                /* equal competitor columns, content-independent */
  border-collapse: collapse;
  background: var(--cc-bg);
}

/* Caption = title band at the top of the card, inside the outline */
.cccc .cc-caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  font-size: 1.1em;
  color: var(--cc-fg);
  background: var(--cc-row-alt);
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--cc-border);
}

/* ---- Column header row ---- */
.cccc .cc-table thead th {
  background: var(--cc-header-bg);
  color: var(--cc-header-fg);
  text-align: left;
  padding: var(--cc-cell-pad);
  font-weight: 600;
  vertical-align: bottom;
  white-space: normal;
}

/* Fixed layout: first column is set, competitor columns split the rest equally */
.cccc .cc-table thead th:first-child { width: var(--cc-feature-col); }

/* ---- Body ---- */
.cccc .cc-table tbody th,
.cccc .cc-table tbody td {
  padding: var(--cc-cell-pad);
  border-top: 1px solid var(--cc-border);
  vertical-align: middle;
  text-align: left;
}
.cccc .cc-table tbody th[scope="row"] {
  font-weight: 600;
  color: var(--cc-fg);
}

/* Uniform row height — non-divider rows share a min height that fits 2 lines */
.cccc .cc-table tbody tr:not(.cc-group) th,
.cccc .cc-table tbody tr:not(.cc-group) td { height: var(--cc-row-min); }

/* Zebra striping (never stripe the group-divider rows) */
.cccc .cc-table tbody tr:not(.cc-group):nth-child(even) td,
.cccc .cc-table tbody tr:not(.cc-group):nth-child(even) th { background: var(--cc-row-alt); }

/* Primary ("us") column emphasis — brand-green header + light-green body */
.cccc .cc-is-primary { background: var(--cc-primary-tint); }
.cccc .cc-table tbody tr:not(.cc-group):nth-child(even) .cc-is-primary { background: var(--cc-primary-tint-strong); }
.cccc .cc-table thead th.cc-is-primary {
  background: var(--cc-primary);
  color: #fff;
}

/* Value tokens — the icon is decorative (::before); the WORD stays in the
   DOM for SEO + screen readers. cc-yes uses the branded SVG tick; cross/partial
   remain unicode glyphs. */
.cccc .cc-yes, .cccc .cc-no, .cccc .cc-partial { font-weight: 600; white-space: nowrap; }
.cccc .cc-yes::before {                                                                    /* ✓ branded tick */
  content: ""; display: inline-block;
  width: 1.2em; height: 1em; vertical-align: -0.16em; margin-right: .3em;
  background: var(--cc-yes-icon) no-repeat center / contain;
}
.cccc .cc-no::before      { content: "\2715"; color: var(--cc-no);      margin-right: .4em; font-weight: 800; }  /* ✕ */
.cccc .cc-partial::before { content: "\25D0"; color: var(--cc-partial); margin-right: .4em; }                    /* ◐ */
.cccc .cc-na { color: var(--cc-muted); }

/* Secondary note inside a cell */
.cccc .cc-note {
  display: block;
  margin-top: .15rem;
  font-size: .82em;
  font-weight: 400;
  color: var(--cc-muted);
}

/* Section / group divider row — light band, lighter than the column header */
.cccc .cc-table tr.cc-group th {
  background: var(--cc-group-bg);
  color: var(--cc-group-fg);
  font-size: .7em;
  line-height: 1.4;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 700;
  padding: .5rem 1rem;
}

/* Footnote / sources / verification date — sits below the outlined card */
.cccc .cc-footnote {
  margin: .65rem 0 0;
  font-size: .8em;
  color: var(--cc-muted);
}
.cccc .cc-footnote a { color: var(--cc-primary); text-decoration: underline; }

/* ---------- Simple mode: icon-only value cells (data-cccc-mode="simple") ----
   The Yes/No/Partial word stays in the DOM (SEO + screen readers) but is
   visually collapsed; only the ✓ ✕ ◐ icon shows. Default mode is "detailed". */
.cccc[data-cccc-mode="simple"] { --cc-row-min: 3rem; }   /* single-line rows need less height */
.cccc[data-cccc-mode="simple"] .cc-yes,
.cccc[data-cccc-mode="simple"] .cc-no,
.cccc[data-cccc-mode="simple"] .cc-partial { font-size: 0; }
.cccc[data-cccc-mode="simple"] .cc-yes::before,
.cccc[data-cccc-mode="simple"] .cc-no::before,
.cccc[data-cccc-mode="simple"] .cc-partial::before { font-size: 1.2rem; margin-right: 0; }
@media (min-width: 641px) {
  .cccc[data-cccc-mode="simple"] .cc-table tbody td { text-align: center; }
}

/* ---------- Responsive: collapse to stacked cards on phones ---------- */
@media (max-width: 640px) {
  .cccc .cc-scroll { overflow: visible; border: 0; border-radius: 0; box-shadow: none; }
  .cccc .cc-table { background: transparent; }
  .cccc .cc-caption { display: block; background: transparent; border-bottom: 0; padding: 0 0 .6rem; }

  /* Visually hide the column-header row but keep it for assistive tech */
  .cccc .cc-table thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .cccc .cc-table, .cccc .cc-table tbody, .cccc .cc-table tr, .cccc .cc-table td, .cccc .cc-table th { display: block; width: 100%; }
  .cccc .cc-table tbody tr:not(.cc-group) th,
  .cccc .cc-table tbody tr:not(.cc-group) td { height: auto; }   /* no fixed row height in card layout */

  .cccc .cc-table tbody tr {
    margin-bottom: var(--cc-gap);
    border: 1px solid var(--cc-outline);
    border-radius: var(--cc-radius);
    overflow: hidden;
    background: var(--cc-bg);
  }
  .cccc .cc-table tbody th[scope="row"] {
    background: var(--cc-primary-tint);
    border-top: 0;
    font-size: 1em;
    padding: .7rem 1rem;
  }
  .cccc .cc-table tbody td {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem 1.5rem;
    align-items: baseline;
    justify-content: space-between;
    text-align: right;
    border-top: 1px solid var(--cc-border);
  }
  .cccc .cc-table tbody td::before {
    content: attr(data-label);        /* the column name, from the data-label attr */
    flex: 0 0 auto;
    text-align: left;
    font-weight: 600;
    color: var(--cc-muted);
  }
  /* Neutralize desktop tints inside cards */
  .cccc .cc-table tbody tr:not(.cc-group):nth-child(even) td,
  .cccc .cc-table tbody .cc-is-primary { background: transparent; }
  .cccc .cc-note { flex-basis: 100%; text-align: right; margin-top: .1rem; }
  .cccc .cc-table tr.cc-group {
    margin-bottom: var(--cc-gap); border: 1px solid var(--cc-outline);
    border-radius: var(--cc-radius); overflow: hidden;
  }
  .cccc .cc-table tr.cc-group th { border-radius: 0; }
}

/* ---------- Print ---------- */
@media print {
  .cccc .cc-scroll { overflow: visible; box-shadow: none; }
  .cccc .cc-table thead th {
    background: #27292A !important; color: #fff !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}