/* Sail Tactician — Guides
   Shared by every page under /guides. Tokens come from /colors_and_type.css;
   this file holds layout and the handful of article components only. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--fg);
  overflow-x: hidden;
}

.wrap { width: 100%; max-width: 760px; padding: 0 24px; margin: 0 auto; }
.wrap--wide { max-width: 1040px; }

/* Top bar and hero title block (.gbar, .ghead, .eyebrow, .store) live in /site/chrome.css. */

/* ---- Prose ---------------------------------------------------------------- */
.article { padding: 48px 0 24px; }
.article p, .article li { font-size: 1.0625rem; line-height: 1.7; color: var(--fg); }
.article p { margin: 0 0 1.1em; max-width: none; }
.article h2 {
  font-size: 1.75rem; line-height: 1.2; margin: 2.4em 0 .7em; scroll-margin-top: 72px; text-wrap: balance;
}
.article h3 { font-size: 1.25rem; margin: 1.8em 0 .5em; scroll-margin-top: 72px; }
.article ul, .article ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.article li { margin: .35em 0; }
.article strong { color: var(--fg); font-weight: 650; }
.article a { color: var(--lay); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(70,197,255,.4); }
.article a:hover { text-decoration-color: var(--lay); }
.article hr { border: 0; border-top: 1px solid var(--hairline-soft); margin: 48px 0; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums slashed-zero; }
.muted { color: var(--fg-2); }

/* ---- Verdict / TL;DR box -------------------------------------------------- */
.verdict {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-4);
  padding: 24px 24px 12px; margin: 0 0 40px;
}
.verdict h2 { margin: 0 0 14px !important; font-size: 13px !important; font-family: var(--font-display);
  font-stretch: 75%; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.verdict dl { margin: 0; display: grid; grid-template-columns: minmax(130px, 34%) 1fr; gap: 0; }
.verdict dt, .verdict dd { margin: 0; padding: 12px 0; border-top: 1px solid var(--hairline-soft); font-size: 15px; line-height: 1.5; }
.verdict dt { color: var(--fg-2); padding-right: 16px; }
.verdict dd { color: var(--fg); }
.verdict dd b { font-weight: 650; }
@media (max-width: 560px) {
  .verdict dl { grid-template-columns: 1fr; }
  .verdict dd { border-top: 0; padding-top: 0; }
}

/* ---- Table of contents ------------------------------------------------------ */
.toc { border-left: 2px solid var(--hairline); padding: 4px 0 4px 18px; margin: 0 0 40px; }
.toc b { display: block; font-size: 13px; color: var(--fg-3); font-weight: 600; margin-bottom: 6px; letter-spacing: .04em; text-transform: uppercase; }
.toc ol { margin: 0; padding-left: 1.2em; }
.toc li { font-size: 15px !important; line-height: 1.5 !important; margin: .25em 0 !important; }
.toc a { color: var(--fg-2) !important; text-decoration: none !important; }
.toc a:hover { color: var(--fg) !important; }

/* ---- Product card ----------------------------------------------------------- */
.pick {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-4);
  padding: 24px; margin: 28px 0;
}
.pick header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 6px; }
.pick h3 { margin: 0 !important; font-size: 1.375rem; }
.pick .price { font-family: var(--font-mono); font-size: 14px; color: var(--fg-2); white-space: nowrap; }
.pick .bestfor { font-size: 14px; color: var(--lay); margin: 0 0 14px !important; font-weight: 600; }
.pick .pc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.pick .pc h4 { font-size: 12px; letter-spacing: var(--tr-label); text-transform: uppercase; font-family: var(--font-display); font-stretch: 75%; margin: 0 0 6px; }
.pick .pc .pro h4 { color: var(--lift); }
.pick .pc .con h4 { color: var(--burn); }
.pick .pc ul { margin: 0; padding-left: 1.1em; }
.pick .pc li { font-size: 15px; line-height: 1.5; }
@media (max-width: 560px) { .pick .pc { grid-template-columns: 1fr; } }

/* ---- Comparison table --------------------------------------------------------- */
.tablewrap { overflow-x: auto; margin: 24px 0 32px; border: 1px solid var(--hairline); border-radius: var(--r-3); -webkit-overflow-scrolling: touch; }
table.cmp { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 14px; line-height: 1.45; }
table.cmp th, table.cmp td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--hairline-soft); vertical-align: top; }
table.cmp thead th { background: var(--surface-2); font-weight: 650; color: var(--fg); position: sticky; top: 0; }
table.cmp tbody th { font-weight: 600; color: var(--fg-2); white-space: nowrap; }
table.cmp tr:last-child td, table.cmp tr:last-child th { border-bottom: 0; }
table.cmp td.y { color: var(--lift); }
table.cmp td.n { color: var(--fg-3); }
table.cmp td.p { color: var(--burn); }
table.cmp .us { background: rgba(14,102,168,.12); }
.tablenote { font-size: 13px !important; color: var(--fg-3) !important; margin-top: -20px !important; }

/* ---- Callouts ------------------------------------------------------------------- */
.note {
  display: flex; gap: 14px; padding: 18px 20px; margin: 28px 0;
  background: var(--lay-soft); border: 1px solid rgba(70,197,255,.25); border-radius: var(--r-3);
}
.note p { margin: 0 !important; font-size: 15px !important; line-height: 1.6 !important; }
.note svg { flex: none; width: 20px; height: 20px; color: var(--lay); margin-top: 2px; }
.note--honest { background: var(--burn-soft); border-color: rgba(255,179,0,.28); }
.note--honest svg { color: var(--burn); }

/* "Where Sail Tactician fits" */
.fit {
  margin: 40px 0; padding: 28px; border-radius: var(--r-5);
  background: linear-gradient(160deg, var(--brand-deep), var(--surface));
  border: 1px solid var(--hairline);
}
.fit .eyebrow { margin-bottom: 8px; }
.fit h2 { margin: 0 0 12px !important; font-size: 1.5rem !important; }
.fit p:last-child { margin-bottom: 0; }

/* Figure (real app capture only) */
.shot { margin: 32px 0; text-align: center; }
.shot img { max-width: 100%; height: auto; border-radius: 28px; border: 1px solid var(--hairline); }
.shot figcaption { font-size: 14px; color: var(--fg-3); margin-top: 10px; }

/* FAQ */
.faq details { border-top: 1px solid var(--hairline-soft); padding: 14px 0; }
.faq details:last-child { border-bottom: 1px solid var(--hairline-soft); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.0625rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--fg-3); font-family: var(--font-mono); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 10px 0 0 !important; color: var(--fg-2); }

/* Sources */
.sources { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--hairline-soft); }
.sources h2 { font-size: 13px !important; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-3); font-family: var(--font-display); font-stretch: 75%; margin: 0 0 10px !important; }
.sources p, .sources li { font-size: 13px !important; line-height: 1.6 !important; color: var(--fg-3) !important; }
.sources a { color: var(--fg-2) !important; word-break: break-word; }

/* ---- Close: CTA + related ------------------------------------------------------- */
.cta {
  margin: 56px 0 0; padding: 36px 28px; border-radius: var(--r-5); text-align: center;
  background: url("/assets/hero-bg.png") center / cover no-repeat, var(--brand-deep);
  position: relative; isolation: isolate; overflow: hidden;
}
.cta::before { content: ""; position: absolute; inset: 0; background: rgba(6,17,28,.55); z-index: -1; }
.cta h2 { margin: 0 0 8px !important; font-size: 1.75rem !important; }
.cta p { color: var(--fg-2); margin: 0 auto 20px !important; max-width: 480px; }
.cta .store { padding: 12px 20px; font-size: 16px; }

.related { padding: 56px 0 24px; }
.related h2 { font-size: 1.25rem; margin: 0 0 16px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card {
  display: flex; flex-direction: column; gap: 8px; padding: 20px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-4);
  color: var(--fg); text-decoration: none; transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.card:hover { border-color: rgba(70,197,255,.45); transform: translateY(-1px); text-decoration: none; color: var(--fg); }
.card .k { font-family: var(--font-display); font-stretch: 75%; font-weight: 700; font-size: 12px; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--lay); }
.card b { font-size: 1.125rem; line-height: 1.3; font-weight: 700; }
.card span { font-size: 14px; line-height: 1.5; color: var(--fg-2); }

.gfoot { padding: 32px 0 48px; border-top: 1px solid var(--hairline-soft); margin-top: 40px; font-size: 13px; color: var(--fg-3); }
.gfoot .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.gfoot a { color: var(--fg-2); text-decoration: none; }
.gfoot a:hover { color: var(--fg); }

@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .ghead { padding: 48px 0 32px; }
  .article p, .article li { font-size: 1rem; }
}

/* Cards sit inside .article on the index; keep them out of the prose link style. */
.article a.card, .article a.card:hover { color: var(--fg); text-decoration: none; }

/* ---- Review-format components (award, sellers, flaws, changelog) -------- */
.award {
  display: inline-block; margin: 0 0 10px; padding: 4px 10px; border-radius: var(--r-pill);
  font-family: var(--font-display); font-stretch: 75%; font-weight: 700; font-size: 12px;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ground); background: var(--lay);
}
.award--us { background: var(--fg); }
.tradeoff { font-size: 15px !important; color: var(--fg-2) !important; margin: 4px 0 14px !important; font-style: italic; }
.sellers { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.sellers a {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px;
  background: var(--brand-tactic); color: #fff !important; text-decoration: none !important;
  font-size: 14px; font-weight: 600;
}
.sellers a:hover { background: var(--brand-tactic-hi); }
.sellers a.alt { background: transparent; border: 1px solid var(--hairline); color: var(--fg) !important; }
.sellers a.alt:hover { border-color: var(--fg-3); }
.basis { font-size: 12px !important; color: var(--fg-3) !important; margin: 10px 0 0 !important; }
.flaws { margin-top: 16px; padding: 14px 16px; border-left: 3px solid var(--burn); background: var(--burn-soft); border-radius: 0 var(--r-2) var(--r-2) 0; }
.flaws h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: var(--tr-label); text-transform: uppercase; font-family: var(--font-display); font-stretch: 75%; color: var(--burn); }
.flaws p { margin: 0 !important; font-size: 15px !important; line-height: 1.6 !important; }
.pick--us { border-color: rgba(244,247,250,.28); }

/* Quick picks strip */
.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 0 0 40px; }
.quick a {
  display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--r-3);
  background: var(--surface); border: 1px solid var(--hairline); text-decoration: none !important; color: var(--fg) !important;
}
.quick a:hover { border-color: rgba(70,197,255,.45); }
.quick .k { font-family: var(--font-display); font-stretch: 75%; font-weight: 700; font-size: 11px; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--lay); }
.quick b { font-size: 16px; line-height: 1.3; }
.quick span { font-size: 13px; line-height: 1.45; color: var(--fg-2); }
.quick .price { font-family: var(--font-mono); font-size: 13px; color: var(--fg-3); }

/* Pin the product-name column while the table scrolls sideways */
table.cmp tbody th, table.cmp thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
table.cmp thead th:first-child { z-index: 2; background: var(--surface-2); }
table.cmp tr.us th { background: #0f2539; }

/* Disclosure line under the byline */
.disclose { margin-top: 14px; font-size: 13px; line-height: 1.55; color: var(--fg-2); max-width: 640px; }
.disclose a { color: var(--fg); }

/* Changelog */
.changelog { margin-top: 40px; }
.changelog h2 { font-size: 1.25rem !important; margin: 0 0 10px !important; }
.changelog li { font-size: 14px !important; color: var(--fg-2) !important; }
.changelog time { font-family: var(--font-mono); color: var(--fg-3); margin-right: 8px; }

/* The App Store button sits inside .article in the CTA; keep it out of the prose link style. */
.article a.store, .article a.store:hover { color: var(--ground); text-decoration: none; }
.article a.store:hover { background: #fff; }

/* Product image (licensed assets only — see tools/guides/products.json) */
.pimg { margin: 4px 0 16px; padding: 16px; background: #F3F6FA; border-radius: var(--r-3); text-align: center; }
.pimg img { max-width: 100%; max-height: 200px; width: auto; height: auto; object-fit: contain; display: inline-block; }
.pimg figcaption { font-size: 11px; color: #6F7E8E; margin-top: 6px; text-align: right; }
/* Beside affiliate buttons: the FTC wants the disclosure next to the link, in plain words. */
.paidnote { font-size: 13px !important; color: var(--fg-3) !important; margin: 6px 0 0 !important; }

/* Guides index groups */
.ggroup { margin: 0 0 48px; }
.ggroup h2 { font-size: 1.5rem !important; margin: 0 0 6px !important; scroll-margin-top: 80px; }
.ggroup > p { margin: 0 0 20px !important; font-size: 15px !important; }