/* =========================================================
   tools — page-specific styles  →  assets/css/tools.css
   Global styles live in assets/css/main.css
   ========================================================= */

.tools-container {
  padding-top: 2rem;
  padding-bottom: 0.5rem;
}

/* Same column as the matrix below. .container caps at 1280px and pads 2rem inside
   that cap; .page-header pads 2rem outside its 1280px inner box instead, so on wide
   screens the title and news line started 2rem further left and ran 2rem further right
   than the table. Taking the padding back out of the cap puts both on one edge at
   every width: below the cap the header padding already did the job. */
.page-header-inner {
  max-width: calc(1280px - 4rem);
}

.page-news {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-2);
  border-left: 3px solid var(--pink);
  padding-left: 0.75rem;
}
.page-news-link {
  font-weight: 600;
  color: var(--pink-text);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.page-news-link:hover {
  opacity: 0.8;
}

.matrix-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-width: 100%;
  scrollbar-color: rgba(143, 163, 190, 0.35) transparent;
  /* Fade-right hint: tells users more content exists to the right */
  background:
    linear-gradient(to right, var(--bg) 0%, transparent 2rem) left   / 2rem 100% no-repeat,
    linear-gradient(to left,  var(--bg) 0%, transparent 2rem) right  / 2rem 100% no-repeat,
    linear-gradient(to right, rgba(0,0,0,0.06), transparent)  left   / 3rem 100% no-repeat,
    linear-gradient(to left,  rgba(0,0,0,0.06), transparent)  right  / 3rem 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

.matrix-wrap::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.matrix-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.matrix-wrap::-webkit-scrollbar-thumb {
  background: rgba(143, 163, 190, 0.35);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.matrix-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(143, 163, 190, 0.52);
  border: 2px solid transparent;
  background-clip: padding-box;
}

[data-theme="light"] .matrix-wrap {
  scrollbar-color: rgba(46, 74, 107, 0.35) transparent;
}

[data-theme="light"] .matrix-wrap::-webkit-scrollbar-thumb {
  background: rgba(46, 74, 107, 0.35);
  border: 2px solid transparent;
  background-clip: padding-box;
}

[data-theme="light"] .matrix-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(46, 74, 107, 0.5);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.matrix-table thead th {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-2);
}

.matrix-table thead th:first-child {
  left: 0;
  z-index: 30;
  box-shadow: inset -1px 0 0 var(--border);
}

.matrix-table tbody th.fn-cell {
  position: sticky;
  left: 0;
  z-index: 10;
  background: var(--bg);
  border-right: 1px solid var(--border);
  box-shadow: inset -1px 0 0 var(--border);
  padding: 1rem;
  vertical-align: top;
  min-width: 200px;
  text-align: left;
  font-weight: 400;
}

.matrix-table tbody tr:hover th.fn-cell {
  background: rgba(252,67,117,0.06);
}

.access-key-label {
  font-weight: 600;
  color: var(--text-2);
}

.access-key-note {
  color: var(--text-3);
  font-size: 0.68rem;
}
/* One link per line under the sentence. A real list, so assistive tech announces how
   many there are before reading them out. */
.access-key-links {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
}
.access-key-links li + li { margin-top: 0.2rem; }

.chip-inline {
  margin-top: 2px;
  display: inline-block;
}

.fn-col {
  width: 155px;
  min-width: 155px;
}

.fn-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--teal-text);
  margin-bottom: 0.35rem;
}

.fn-desc {
  font-size: 0.65rem;
  color: var(--text-3);
  line-height: 1.5;
  font-weight: 400;
  white-space: normal;
  margin: 0;
}

/* Clickable access-key chips */
.access-chip {
  cursor: pointer;
  transition: opacity 0.15s, box-shadow 0.15s;
}
.access-chip:hover {
  opacity: 0.85;
  box-shadow: 0 0 0 2px var(--border-teal);
}
.access-chip.active {
  box-shadow: 0 0 0 2px currentColor;
  filter: brightness(1.15);
}

/* Muted cells when access filter is active */
/* Filtered-out cells: opacity alone drops any text to roughly 1.3-1.6:1 while leaving
   it in the accessibility tree. content-visibility removes it from AT as well, so the
   filtered state is not conveyed by appearance alone (WCAG 1.4.1). */
.cell-muted {
  opacity: 0.18;
  pointer-events: none;
  content-visibility: hidden;
}

/* Highlighted tool names — accessible for SAS researchers */
.cell-highlight .tool-name {
  text-decoration: underline;
  text-decoration-color: rgba(252,67,117,0.7);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* Multi-product sub-items within a single cell */
.tool-sub {
  margin-top: 8px;
}
.tool-sub-divider {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.tool-price {
  font-size: 0.65rem;
  color: var(--text-3);
  margin-top: 2px;
  margin-bottom: 2px;
}
.tool-action-link {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--teal-text);
  text-decoration: none;
  margin-top: 4px;
}
.tool-action-link:hover { color: var(--teal-text); }

/* Tool type tags */
.tool-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
/* Same 0.65rem small-label floor as the guide pages: 0.58rem rendered 9.28px at a
   default 16px root, under the 10px very-small-text threshold. */
.tool-tag {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.1rem 0.45rem;
  white-space: nowrap;
}

/* Tags with tooltips */
.tool-tag-tip {
  cursor: default;
  position: relative;
  transition: color 0.15s, border-color 0.15s;
}
.tool-tag-tip:hover {
  color: var(--teal-text);
  border-color: var(--teal);
}
.tool-tag-tip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  width: 210px;
  background: var(--bg-2);
  color: var(--text-2);
  border: 1px solid rgba(127,206,204,0.35);
  border-radius: 5px;
  padding: 0.55rem 0.75rem;
  font-size: 0.65rem;
  font-weight: 400;
  line-height: 1.55;
  white-space: normal;
  text-align: left;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.tool-tag-tip:hover::after {
  opacity: 1;
}

/* Open Models + Research tools sections below the main table */
.open-models-section {
  margin-top: 0.5rem;
  padding-bottom: 0;
}
.open-models-section + .open-models-section {
  margin-top: 1rem;
}
.tools-page-sections-end {
  padding-bottom: 4rem;
}
/* On a phone this padding stacks on the footer's own 4rem margin, leaving about 165px
   of blank page between the last research tool and the footer. Dropped there, the gap
   comes out at the ~93px every other page has before its footer. */
@media (max-width: 768px) {
  .tools-page-sections-end { padding-bottom: 0; }
}
.open-models-header {
  margin-bottom: 1.25rem;
}
.open-models-header .fn-label {
  font-size: 0.78rem;
}
p.research-tools-disclaimer {
  border-left: 2px solid var(--pink);
  padding-left: 0.75rem;
  color: var(--pink-text);
  margin-top: 0.5rem;
}
.open-models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.open-model-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  background: var(--bg-1);
  transition: border-color 0.15s, background 0.15s;
}
.open-model-card:hover {
  border-color: var(--border-teal);
  background: var(--bg-2);
}
.open-model-card .tool-name {
  margin-bottom: 4px;
}

.research-tools-section {
  margin-top: 0;
}
.research-tools-disclaimer {
  max-width: 52rem;
  color: var(--text-3);
  font-size: 0.75rem;
  line-height: 1.6;
  margin-top: 0.5rem;
}
.open-model-card:target {
  border-color: var(--teal);
  background: rgba(43, 138, 138, 0.08);
}

/* Vendor tabs — mobile only (shown via @media below) */
.vendor-tabs {
  display: none;
  flex-wrap: nowrap;
  gap: 0.35rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 0.75rem;
  padding-bottom: 0.25rem;
}

.vendor-tab {
  font-family: 'Poppins', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--border-control);
  background: var(--bg-1);
  color: var(--text-2);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.vendor-tab:hover {
  border-color: var(--teal);
  color: var(--teal-text);
}

.vendor-tab.active {
  border-color: var(--teal);
  background: rgba(43, 138, 138, 0.1);
  color: var(--teal-text);
}

.vendor-col-hidden {
  visibility: collapse;
}

/* ── Tablet & mobile: vendor tabs, one column at a time ── */
@media (max-width: 768px) {
  .vendor-tabs {
    display: flex;
    margin-top: 0.5rem;
  }

  .matrix-wrap {
    overflow-x: visible;
    margin-left: 0;
    margin-right: 0;
    background: none;
  }

  #tools-table {
    table-layout: fixed;
    width: 100%;
    font-size: 0.8rem;
  }

  #tools-table thead th {
    width: auto;
  }

  #tools-table thead th.fn-col {
    white-space: nowrap;
    width: 55%;
    min-width: 0;
    max-width: none;
  }

  #tools-table tbody th.fn-cell {
    width: 55%;
    min-width: 0;
    max-width: none;
    padding: 0.65rem 0.75rem;
  }

  /* Hide the long description paragraph in the Function column on mobile
     — the label alone is enough at this width */
  #tools-table tbody th.fn-cell .fn-desc {
    display: none;
  }

  #tools-table thead th[data-col]:not(.vendor-col-hidden),
  #tools-table tbody td[data-col]:not(.vendor-col-hidden) {
    width: 45%;
    min-width: 0;
    padding: 0.65rem 0.75rem;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  #tools-table .vendor-col-hidden {
    visibility: collapse;
    width: 0;
    min-width: 0;
    padding: 0;
    border: none;
    /* The header cells hold bare text ("OpenAI", "Google"), which the child rule below
       cannot reach. In a 0-wide cell that text still paints out past the right edge,
       widening the page to ~466px on a 402px phone, so mobile browsers zoom the whole
       page out to fit: content looks shrunk, off-centre, and short of the screen edge.
       Clip it, and zero the text box so it adds no width or row height either. */
    overflow: hidden;
    font-size: 0;
    line-height: 0;
  }

  /* WebKit doesn't collapse row height for visibility:collapse td —
     hide cell children so they don't inflate the row height */
  #tools-table .vendor-col-hidden > * {
    display: none;
  }

  #tools-table tbody td[data-col] .tool-name,
  #tools-table tbody td[data-col] .tool-action-link,
  #tools-table tbody td[data-col] .tool-price {
    white-space: normal;
    word-break: break-word;
  }

  #tools-table tbody td[data-col] .tool-tags {
    flex-wrap: wrap;
  }

  #tools-table tbody td[data-col] .tool-tag {
    white-space: normal;
  }

  .tool-tag-tip::after {
    display: none;
  }

  .open-models-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Small phones: tighter spacing ─────────────────────
   Padding only. The font-size cuts that used to live here (0.8 -> 0.69rem on the table,
   0.95 -> 0.8rem on tool names, 0.65 -> 0.6rem on prices and descriptions) took the type
   below 10px on exactly the screens that are hardest to read on. Width is handled by the
   one-vendor-column-at-a-time layout above, not by shrinking text.
   ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .matrix-table thead th {
    padding: 0.45rem 0.6rem;
  }

  #tools-table thead th.fn-col,
  #tools-table tbody th.fn-cell {
    width: 50%;
    padding: 0.6rem 0.65rem;
  }

  #tools-table thead th[data-col]:not(.vendor-col-hidden),
  #tools-table tbody td[data-col]:not(.vendor-col-hidden) {
    width: 50%;
    padding: 0.55rem 0.65rem;
  }

  .vendor-tab {
    padding: 0.25rem 0.65rem;
  }

  .open-models-grid {
    grid-template-columns: 1fr;
  }
}