/* SoloAI Tools — comparison site, not a default blog.
   Paper is cool gray. Accent is ledger teal. */

:root {
  --ink: #1a2332;
  --muted: #5b6573;
  --paper: #eef1f4;
  --card: #fbfcfd;
  --rule: #c5ced6;
  --teal: #1f6f66;
  --teal-soft: #d7eeea;
  --warn: #8a4b12;
  --warn-soft: #f6e6d4;
  --read: 46rem;
  --compare: 52rem;
}

html {
  background: var(--paper);
  overflow-x: clip;
}

body {
  color: var(--ink);
  font-family: "Source Sans 3", "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
  background: var(--paper);
  overflow-x: clip;
  max-width: 100%;
}

h1, h2, h3, .wp-block-post-title, .wp-block-site-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: pretty;
}

.wp-block-site-title,
.wp-block-site-title a {
  font-size: 1.2rem;
  text-decoration: none;
  color: var(--ink);
}

.wp-block-site-tagline {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Drop Twenty Twenty-Five's huge main padding. */
main.wp-block-group {
  margin-top: 0 !important;
}

main > .wp-block-group.alignfull {
  padding-top: 1.5rem !important;
  padding-bottom: 2.25rem !important;
}

/* Reading column. Comparison pages a bit wider for tables. */
.entry-content,
.wp-block-post-content,
.wp-block-post-excerpt {
  max-width: var(--read);
}

body.soloai-compare .entry-content,
body.soloai-compare .wp-block-post-content {
  max-width: var(--compare);
}

body.soloai-compare .wp-block-post-title {
  max-width: var(--compare);
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  line-height: 1.15;
  padding-bottom: 0.85rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}

body.soloai-home .entry-content,
body.soloai-home .wp-block-post-content {
  max-width: 42rem;
}

.entry-content > *:not(.soloai-table-wrap):not(table),
.wp-block-post-content > *:not(.soloai-table-wrap):not(table) {
  max-width: 100%;
}

/* Tables: scroll inside the column, never blow the page. */
.soloai-table-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 1.1rem 0 1.5rem;
  border: 1px solid var(--rule);
  box-shadow: inset 3px 0 0 var(--teal);
  scrollbar-width: thin;
  scrollbar-color: var(--teal) var(--paper);
  /* Edge shadow appears only while there is more table that way.
     Covers are `local` (they ride the content), shadows are `scroll`
     (they stay pinned to the container edge). */
  background-color: var(--card);
  background-image:
    linear-gradient(to right, var(--card) 45%, rgba(251, 252, 253, 0)),
    linear-gradient(to left, var(--card) 45%, rgba(251, 252, 253, 0)),
    linear-gradient(to right, rgba(26, 35, 50, 0.22), rgba(26, 35, 50, 0)),
    linear-gradient(to left, rgba(26, 35, 50, 0.22), rgba(26, 35, 50, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 2.25rem 100%, 2.25rem 100%, 1.1rem 100%, 1.1rem 100%;
  background-attachment: local, local, scroll, scroll;
}

.soloai-table-wrap::-webkit-scrollbar {
  height: 6px;
}

.soloai-table-wrap::-webkit-scrollbar-thumb {
  background: var(--teal);
  border-radius: 3px;
}

.soloai-table-wrap::-webkit-scrollbar-track {
  background: var(--paper);
}

.entry-content table,
.wp-block-post-content table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.4;
  background: transparent;
  margin: 0;
}

.entry-content table:not(.soloai-table-wrap table),
.wp-block-post-content table:not(.soloai-table-wrap table) {
  box-shadow: inset 3px 0 0 var(--teal);
}

.entry-content th,
.entry-content td,
.wp-block-post-content th,
.wp-block-post-content td {
  border: 1px solid var(--rule);
  padding: 0.5rem 0.65rem;
  vertical-align: top;
  text-align: left;
  word-break: normal;
  overflow-wrap: break-word;
}

.entry-content thead th,
.wp-block-post-content thead th {
  background: var(--teal-soft);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  font-weight: 500;
  white-space: nowrap;
}

.entry-content td:nth-child(n+2),
.wp-block-post-content td:nth-child(n+2) {
  font-variant-numeric: tabular-nums;
}

/* Screenshots: never full-bleed marketing size. */
.entry-content img,
.wp-block-post-content img {
  max-width: min(100%, 22rem);
  max-height: 16rem;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0.6rem auto;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(26, 35, 50, 0.06);
}

.soloai-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: 0.85rem;
  margin: 1.25rem 0 1.75rem;
  padding: 0.85rem;
  background: var(--card);
  border: 1px solid var(--rule);
}

.soloai-shots p {
  margin: 0;
}

.soloai-shots img {
  max-width: 100%;
  max-height: 11rem;
  margin: 0;
}

.soloai-shots::before {
  content: "Vendor UI (marketing shots)";
  grid-column: 1 / -1;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}

/* Disclosure reads as a stamp, not a paragraph. */
.entry-content p strong:first-child,
.wp-block-post-content p strong:first-child {
  color: var(--warn);
}

.wp-block-post-content p:has(> strong:first-child) {
  background: var(--warn-soft);
  border-left: 3px solid var(--warn);
  padding: 0.7rem 0.9rem;
}

/* Blog chrome — hide if a block still renders. */
header.wp-block-template-part,
.wp-block-post-author,
.wp-block-post-author-name,
.wp-block-post-date,
.wp-block-post-terms,
.taxonomy-category,
.wp-block-post-author-biography,
.wp-block-comments,
.comment-respond,
.wp-block-query,
.wp-block-query-title,
.wp-block-post-template,
.wp-block-post-navigation-link,
.wp-block-group.has-small-font-size.is-layout-flex:has(.wp-block-post-terms),
.wp-block-group.has-small-font-size.is-layout-flex:has(.taxonomy-category) {
  display: none !important;
}

a {
  color: var(--teal);
}

a:hover {
  color: var(--ink);
}

@media (max-width: 640px) {
  /* Narrower gutter on a phone. Set the variable, not the padding, so the
     theme's alignfull negative margins stay in step with it. */
  body {
    --wp--style--root--padding-left: 18px;
    --wp--style--root--padding-right: 18px;
  }

  /* Size to content and scroll, instead of squeezing columns to nothing. */
  .entry-content table,
  .wp-block-post-content table {
    width: max-content;
    min-width: 100%;
    font-size: 0.875rem;
    line-height: 1.45;
  }

  .entry-content th,
  .entry-content td,
  .wp-block-post-content th,
  .wp-block-post-content td {
    min-width: 6.5rem;
    max-width: 12rem;
    padding: 0.55rem 0.6rem;
  }

  /* Long headers wrap rather than dictating the column width. */
  .entry-content thead th,
  .wp-block-post-content thead th {
    white-space: normal;
    font-size: 0.7rem;
  }

  /* Row label stays put while the numbers scroll past it. */
  .soloai-table-wrap th:first-child,
  .soloai-table-wrap td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    max-width: 8.5rem;
    background: var(--card);
    box-shadow: 1px 0 0 var(--rule);
  }

  .soloai-table-wrap thead th:first-child {
    background: var(--teal-soft);
  }

  .entry-content img,
  .wp-block-post-content img {
    max-height: 12rem;
  }

  body.soloai-compare .wp-block-post-title {
    font-size: 1.55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}