/* ── Computation Companies — table page ───────────────────────────────
   Reuses the theme tokens from styles.css (--ink, --gold, --line, etc.)
   and adds table-specific styling. */

:root {
  --cc-head-bg: #e7f1fc;
  --cc-stripe: #f3f8fd;
  --cc-hover: #fdf4e6;
  --cc-yes: var(--gold-dark);
  --cc-radius: 6px;
}

/* ── Page hero ──────────────────────────────────────────── */

.page-hero {
  padding: 140px 0 32px;
  position: relative;
}

.page-hero-inner {
  max-width: 1200px;
}

.page-hero h1 {
  color: var(--ink);
  font-size: clamp(32px, 4.4vw, 50px);
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin-bottom: 18px;
}

.page-hero-lead {
  color: var(--text);
  font-size: 17px;
  line-height: 1.7;
  max-width: 720px;
}

/* ── Table section shell ────────────────────────────────── */

.cc-section {
  background: #fdfdfd;
  padding: 28px 0 56px;
}

/* Center the table area as one coherent column sized to the table itself, so
   the tabs, search, and downloads line up with the grid's edges instead of
   stretching across the page. */
.cc-wide {
  padding: 0 24px;
}

/* Pin the block to the widest view's width (JS measures it into --cc-grid-w)
   and centre it, so switching tabs never reflows the tabs or toolbar. The
   fallback keeps it stable before the script runs; on narrow screens it caps
   at the viewport. */
.cc-inner {
  margin: 0 auto;
  width: min(100%, var(--cc-grid-w, 1560px));
}

/* ── Sheet tabs (mirror Excel's sheet tabs) ─────────────── */

.cc-tabs {
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 4px;
  justify-content: center;
}

.cc-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  margin-bottom: -1px;
  padding: 12px 18px;
  text-transform: uppercase;
  transition: color 0.15s, border-color 0.15s;
}

.cc-tab:hover {
  color: var(--ink);
}

.cc-tab.is-active {
  border-bottom-color: var(--gold);
  color: var(--gold-dark);
}

/* ── Toolbar ────────────────────────────────────────────── */

.cc-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  justify-content: center;
  margin: 20px 0 16px;
}

.cc-search {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--cc-radius);
  display: flex;
  flex: 0 1 400px;
  gap: 10px;
  max-width: 460px;
  padding: 0 14px;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.cc-search:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 138, 54, 0.14);
}

.cc-search svg {
  fill: none;
  flex-shrink: 0;
  height: 18px;
  stroke: var(--muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 18px;
}

.cc-search input {
  background: transparent;
  border: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  padding: 12px 0;
  width: 100%;
}

.cc-search input::placeholder {
  color: var(--muted);
}

/* ── Table ──────────────────────────────────────────────── */

.cc-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--cc-radius);
  box-shadow: var(--shadow);
  /* No vertical cap — the box grows to fit every row, so the whole table is
     visible by scrolling the page (no inner vertical scrollbar). */
  overflow: auto;
  position: relative;
  /* Shrink-wrap the box to the table's natural width (columns sized to their
     content, no empty bands between them); cap at the viewport so it scrolls
     horizontally only when the data is genuinely wider than the screen.
     Centre it within the pinned frame so the narrower view stays page-centred. */
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.cc-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
  /* Columns size to their content — pack left, no stretching. */
  width: auto;
}

.cc-table th,
.cc-table td {
  border-bottom: 1px solid var(--line);
  padding: 11px 12px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

/* Cap the wide descriptive columns and let long values wrap, so a short cell
   ("GPGPU") no longer sits beside the empty band left by the column's longest
   value. Identity columns (Origin/Layer) are short enough that the cap never
   engages; the Company column and the feature flags keep their own sizing. */
.cc-table td.cc-col-n:not(.cc-cell-bool):not(.cc-company):not(.cc-idea),
.cc-table thead th.cc-col-n:not(.cc-cell-bool) {
  max-width: 150px;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Sticky header row */
.cc-table thead th {
  background: var(--cc-head-bg);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  position: sticky;
  top: 0;
  user-select: none;
  vertical-align: bottom;
  z-index: 2;
}

.cc-table thead th:hover {
  background: #dceaf8;
}

.cc-th-inner {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

/* Sort indicator */
.cc-arrow {
  color: var(--gold-dark);
  font-size: 10px;
  opacity: 0;
  transition: opacity 0.12s;
}

.cc-table thead th:hover .cc-arrow {
  opacity: 0.4;
}

.cc-table thead th.is-asc .cc-arrow,
.cc-table thead th.is-desc .cc-arrow {
  opacity: 1;
}

.cc-table thead th.is-asc .cc-arrow::after {
  content: "▲";
}

.cc-table thead th.is-desc .cc-arrow::after {
  content: "▼";
}

.cc-table thead th:not(.is-asc):not(.is-desc) .cc-arrow::after {
  content: "▲";
}

/* Body rows */
.cc-table tbody td {
  background: #fff;
  color: var(--text);
}

.cc-table tbody tr:nth-child(even) td {
  background: var(--cc-stripe);
}

.cc-table tbody tr:hover td {
  background: var(--cc-hover);
}

/* Frozen first column (Company) */
.cc-table th.cc-col-0,
.cc-table td.cc-col-0 {
  left: 0;
  position: sticky;
  z-index: 1;
}

.cc-table tbody td.cc-col-0 {
  border-right: 1px solid var(--line);
}

.cc-table thead th.cc-col-0 {
  border-right: 1px solid var(--line);
  z-index: 3; /* top-left corner sits above everything */
}

/* Company name links (subtle) */
.cc-company {
  color: var(--ink);
  font-weight: 600;
}

/* Idea: the core-idea description in the leading column */
.cc-table td.cc-idea {
  color: var(--text);
  min-width: 300px;
  max-width: 340px;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Row number to the left of each company name */
.cc-rownum {
  color: var(--muted);
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  margin-right: 10px;
  min-width: 1.6em;
  text-align: right;
}

/* Company name as a link to the company website */
.cc-company-link {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s;
}

.cc-company-link:hover {
  color: var(--gold-dark);
  text-decoration: underline;
}

/* "Not applicable" dash + secondary cells */
.cc-na {
  color: var(--muted);
}

.cc-origin,
.cc-layer {
  color: var(--muted);
}

/* Feature-matrix check marks */
.cc-cell-bool {
  text-align: center;
}

/* Compact the 18 flag columns (each holds a single ✓) so the whole feature
   matrix can fit on screen — the long headings wrap instead of forcing width. */
.cc-table th.cc-cell-bool,
.cc-table td.cc-cell-bool {
  max-width: 40px;
  min-width: 28px;
  padding-left: 4px;
  padding-right: 4px;
  width: 30px;
}

/* Flag headers rotate to vertical (reading bottom-to-top) so the columns
   stay ~30px narrow and the whole matrix compacts horizontally. */
.cc-table thead th.cc-cell-bool {
  font-size: 10px;
  letter-spacing: 0;
  padding-bottom: 12px;
  padding-top: 8px;
  vertical-align: bottom;
}

.cc-table thead th.cc-cell-bool .cc-th-inner {
  display: inline-block;
  transform: rotate(180deg);
  white-space: nowrap;
  writing-mode: vertical-rl;
}

/* No room for the sort caret in a vertical header — tint the label instead. */
.cc-table thead th.cc-cell-bool .cc-arrow {
  display: none;
}

.cc-table thead th.cc-cell-bool.is-asc,
.cc-table thead th.cc-cell-bool.is-desc {
  color: var(--gold-dark);
}

.cc-yes {
  color: var(--cc-yes);
  font-size: 15px;
  font-weight: 700;
}

.cc-no {
  color: var(--stone);
}

/* Pinned totals row (Excel-style) */
.cc-table tfoot th,
.cc-table tfoot td {
  background: #eef3f9;
  bottom: 0;
  border-top: 2px solid var(--line);
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 600;
  position: sticky;
  z-index: 2;
}

.cc-table tfoot td {
  text-align: center;
}

.cc-table tfoot th.cc-col-0 {
  left: 0;
  text-align: left;
  z-index: 3;
}

.cc-empty {
  color: var(--muted);
  font-size: 15px;
  padding: 32px 4px;
  text-align: center;
}

.cc-footnote {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
  margin-top: 14px;
  max-width: 820px;
}

.cc-footnote .cc-star {
  color: var(--gold-dark);
  font-weight: 700;
}

/* Reference asterisk in the Tokens/sec column, linking to the vendor source */
.cc-ref {
  color: var(--gold-dark);
  font-size: 0.82em;
  font-weight: 700;
  margin-left: 1px;
  text-decoration: none;
  vertical-align: super;
}

a.cc-ref:hover {
  color: var(--gold);
  text-decoration: underline;
}

.cc-source {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.6;
  margin-top: 16px;
  text-align: center;
}

.cc-source em {
  color: var(--text);
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 680px) {
  .page-hero {
    padding-top: 36px;
  }

  .cc-wide {
    padding: 0 14px;
  }

  .cc-table th,
  .cc-table td {
    padding: 10px 12px;
  }
}