/* Software directory pages. Uses the site's own tokens (--ink, --body, --muted, --line, --paper, --accent, --tint, --display)
   so the same file works on scoutsaas.com and stackkite.com. --hi is the site's highlight colour, set below per site. */
:root { --hi: var(--kite, #F2A93B); --hi-text: var(--kite-text, #8A5A00); }
.dir { background: var(--paper); color: var(--ink); padding-bottom: 72px; }
.dir a { color: var(--accent); text-underline-offset: 3px; }
.dir a:hover { color: var(--accent-dark); }
.dir h1, .dir h2, .dir h3, .dir h4 { font-family: var(--display); color: var(--ink); letter-spacing: -0.02em; }
.dir h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.12; margin: 0 0 18px; }
.dir h3 { font-size: 19px; line-height: 1.25; margin: 0; }
.dir h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 8px; font-family: inherit; color: var(--muted); }
.dir section { margin-top: 56px; }
.dir-body > section:first-child, .dir-body > .dir-stats:first-child { margin-top: 32px; }

.dir-crumbs { width: min(1120px, 100% - 72px); margin: 0 auto; padding-top: 24px; font-size: 13px; color: var(--muted); }
.dir-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.dir-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line); }
.dir-crumbs a { color: var(--muted); }

.dir-hero { padding: 40px 0 8px; }
.dir-hero h1 { font-size: clamp(34px, 5.4vw, 58px); line-height: 1.02; letter-spacing: -0.035em; margin: 10px 0 0; max-width: 20ch; }
.dir-hero__tool { display: flex; align-items: center; gap: 18px; }
.dir-hero__tool h1 { margin-top: 4px; }
.dir-kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hi-text); }
.dir-lead { margin: 18px 0 0; max-width: 46rem; font-size: 19px; line-height: 1.6; color: var(--body); }
.dir-meta { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.dir-angle { margin: 28px 0 0; max-width: 46rem; padding: 16px 18px; border-radius: 14px; background: var(--tint); color: var(--body); line-height: 1.6; }
.dir-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.dir-na { color: var(--muted); }

.dir-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 32px 0 0; }
.dir-stats div { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.dir-stats dt { font-size: 12px; color: var(--muted); }
.dir-stats dd { margin: 4px 0 0; font: 800 26px/1.1 var(--display); color: var(--ink); }

.dir-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.dir-table table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.dir-table caption { text-align: left; padding: 12px 16px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.dir-table th, .dir-table td { text-align: left; vertical-align: top; padding: 12px 16px; border-top: 1px solid var(--line); line-height: 1.45; }
.dir-table thead th { border-top: 0; background: var(--tint); font-size: 12px; font-weight: 700; color: var(--body); white-space: nowrap; }
.dir-table tbody th { font-weight: 600; min-width: 150px; }
.dir-name { display: inline-flex; align-items: center; gap: 8px; }
.dir-name--ours { font-weight: 700; }
.dir-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--hi); color: var(--ink); white-space: nowrap; }
.dir-badge--muted { background: var(--tint); color: var(--body); }
.dir-logo { width: 28px; height: 28px; border-radius: 7px; background: #fff; border: 1px solid var(--line); object-fit: contain; padding: 2px; box-sizing: border-box; flex-shrink: 0; }
.dir-logo--mono { display: inline-flex; align-items: center; justify-content: center; font: 700 13px/1 var(--display); color: var(--accent); background: var(--tint); }

.dir-criteria { margin: 0 0 20px; padding-left: 18px; max-width: 52rem; line-height: 1.6; color: var(--body); }
.dir-criteria li + li { margin-top: 6px; }

.dir-card { margin-top: 20px !important; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px; scroll-margin-top: 90px; }
.dir-card__head { display: flex; gap: 14px; align-items: flex-start; }
.dir-card__head h3 { font-size: 22px; }
.dir-card__head h3 a { color: var(--ink); text-decoration: none; }
.dir-card__tag { margin: 4px 0 0; color: var(--body); line-height: 1.5; }
.dir-card__links { margin: 16px 0 0; font-size: 14px; font-weight: 600; }
.dir-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 20px; margin: 18px 0 0; }
.dir-facts dt { font-size: 12px; color: var(--muted); }
.dir-facts dd { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink); }
.dir-facts--wide { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.dir-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.dir-fit > div { border-radius: 14px; padding: 16px 18px; background: var(--tint); }
.dir-fit__no { background: #FBF1EC !important; }
.dir-fit h3, .dir-fit h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; font-family: inherit; color: var(--body); margin: 0 0 8px; }
.dir-fit ul, .dir-gain ul { margin: 0; padding-left: 18px; line-height: 1.55; font-size: 14px; color: var(--body); }
.dir-fit li + li, .dir-gain li + li { margin-top: 4px; }
.dir-gain { margin-top: 14px; }
section.dir-gain { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--hi); border-radius: 16px; padding: 22px 24px; }
section.dir-gain ul { font-size: 15px; }

.dir-status { margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; background: #FDF3DC; color: #6B4A00; font-size: 14px; line-height: 1.5; }
.dir-status--discontinued { background: #FBE9E7; color: #8A2A1C; }

.dir-product { margin-top: 56px; background: var(--accent); color: #fff; border-radius: 20px; padding: 32px; }
.dir-product h2 { color: #fff; margin: 6px 0 10px; }
.dir-product p { color: rgba(255,255,255,.86); line-height: 1.6; max-width: 44rem; margin: 0 0 12px; }
.dir-product .dir-kicker { color: var(--hi); }
.dir-product__facts { font-size: 14px; }

.dir-faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.dir-faq summary { cursor: pointer; list-style: none; }
.dir-faq summary::-webkit-details-marker { display: none; }
.dir-faq summary h3 { display: inline; font-size: 18px; }
.dir-faq p { margin: 10px 0 0; line-height: 1.65; color: var(--body); max-width: 50rem; }

.dir-related ul, .dir-links { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.dir-related li a, .dir-links li a { display: inline-block; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; text-decoration: none; font-size: 14px; font-weight: 600; color: var(--ink); }
.dir-related--cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }

.dir-alts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dir-alts li { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.dir-alts li > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.dir-alts li a { font-weight: 700; color: var(--ink); }
.dir-alts li span { font-size: 14px; color: var(--body); }
.dir-alts__price { font-size: 13px !important; color: var(--muted) !important; text-align: right; max-width: 180px; }
.dir-more { font-weight: 700; }

.dir-verdict__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dir-verdict__col { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.dir-verdict__col h3 { margin: 12px 0 8px; }
.dir-verdict__col ul { margin: 0; padding-left: 18px; line-height: 1.55; color: var(--body); font-size: 15px; }

.dir-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.dir-tile { display: flex; flex-direction: column; gap: 8px; height: 100%; box-sizing: border-box; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; text-decoration: none; color: var(--ink) !important; }
.dir-tile:hover { border-color: var(--accent); }
.dir-tile__name { font: 800 18px/1.2 var(--display); }
.dir-tile__desc { font-size: 14px; line-height: 1.5; color: var(--body); flex: 1; }
.dir-tile__logos { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.dir-tile__logos .dir-logo { width: 22px; height: 22px; }
.dir-tile__logos span { margin-left: 6px; }
.dir-catlist { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; }
.dir-catlist li { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; }
.dir-catlist h2 { font-size: 22px; margin: 0 0 6px; }
.dir-catlist p { margin: 0; line-height: 1.55; color: var(--body); }

.dir-method p { color: var(--body); line-height: 1.6; max-width: 50rem; }
.dir-sources summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.dir-sources ol { font-size: 13px; line-height: 1.7; color: var(--body); }
.dir-prose { max-width: 46rem; }
.dir-prose h2 { margin-top: 40px; }
.dir-prose p, .dir-prose li { line-height: 1.7; color: var(--body); }

@media (max-width: 760px) {
  .dir-crumbs { width: calc(100% - 32px); }
  .dir-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dir-fit, .dir-verdict__grid, .dir-related--cols { grid-template-columns: 1fr; }
  .dir-card { padding: 18px; }
  .dir-product { padding: 24px; }
  .dir-alts__price { display: none; }
  .dir-lead { font-size: 17px; }
}

/* The site styles every th as a small uppercase label; row headers in directory tables are names, not labels. */
.dir-table tbody th { text-transform: none; letter-spacing: normal; font-size: 14px; color: var(--ink); background: transparent; }
.dir-table td { min-width: 120px; max-width: 320px; }
.dir-table thead th { text-transform: none; letter-spacing: normal; }
.dir-table td, .dir-table tbody th { white-space: normal; overflow-wrap: break-word; }