/* blog.css — shared styles for the /blog index and every /blog/<slug> article.
   Rides on styles.css tokens (--panel/--border/--text/--text-2/--muted/--blue/
   --green/--shadow) so both themes come for free; only the few colours the
   articles need that the shared sheet does not carry are declared here. */

:root {
  --blog-jade: #16795a;
  --blog-clay: #a8402a;
  --blog-brass: #8a6a18;
  --blog-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}
html[data-theme="dark"] {
  --blog-jade: #4fc79b;
  --blog-clay: #e0806a;
  --blog-brass: #d3ac58;
}

/* ---------- shared header dropdown ----------
   styles.css does not carry the Products dropdown rules — every page that uses
   the shared header re-declares them. All three blog pages already load this
   file, so they get them from here instead of three inline copies. Without
   these the menu has no positioning and renders expanded across the header. */
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-dd-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 264px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 60;
}
.nav-dd-menu::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { opacity: 1; visibility: visible; transform: none; }
.nav-dd-menu a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px;
  font-size: 14px; font-weight: 600; color: var(--text-2); white-space: nowrap; text-decoration: none;
}
.nav-dd-menu a:hover { background: color-mix(in srgb, var(--text) 6%, var(--panel)); color: var(--text); }
.nav-dd-menu i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); flex: 0 0 auto; }

/* ---------- index ---------- */
.blog-hero { padding: 44px 0 4px; }
.blog-hero .kicker {
  display: inline-block; font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; color: var(--blue); margin: 0 0 12px; padding: 5px 13px;
  border-radius: 999px; background: color-mix(in srgb, var(--blue) 10%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--blue) 28%, transparent);
}
.blog-hero h1 { font-size: clamp(26px, 3.8vw, 40px); font-weight: 750; line-height: 1.16; margin: 0; }
.blog-hero p { font-size: clamp(15px, 1.9vw, 18px); color: var(--text-2); max-width: 680px; margin: 0; }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 22px; margin: 30px 0 56px; }
.post-card {
  display: flex; flex-direction: column; background: var(--panel);
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  text-decoration: none; color: inherit; box-shadow: var(--shadow);
  transition: transform .16s ease, border-color .16s ease;
}
.post-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--blue) 45%, var(--border)); }
.post-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.post-thumb { display: block; width: 100%; height: auto; background: #0a0e10; }
.post-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.post-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--muted); }
.post-tag {
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px;
  padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 12%, var(--panel));
  color: var(--blue); border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
}
.post-card h2 { font-size: 21px; font-weight: 750; line-height: 1.22; margin: 0; }
.post-card p { font-size: 14.5px; color: var(--text-2); margin: 0; line-height: 1.55; }
.post-more { margin-top: auto; padding-top: 6px; font-size: 13.5px; font-weight: 700; color: var(--blue); }

/* ---------- app guides ---------- */
.guides-h { margin: 4px 0 6px; font-size: clamp(21px, 2.8vw, 27px); font-weight: 750; }
.guides-sub { color: var(--text-2); font-size: 15px; margin: 0 0 22px; max-width: 66ch; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 12px; margin-bottom: 56px; }
.guide {
  display: flex; gap: 13px; align-items: flex-start; padding: 15px 17px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 13px;
  text-decoration: none; color: inherit;
  transition: transform .14s ease, border-color .14s ease;
}
.guide:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--gc) 55%, var(--border)); }
.guide:focus-visible { outline: 2px solid var(--gc); outline-offset: 3px; }
.guide i {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  font-size: 16px; font-style: normal; color: #fff; background: var(--gc);
}
.guide b { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; }
.guide span { display: block; font-size: 13px; color: var(--text-2); margin-top: 3px; line-height: 1.45; }
.guide em { font-style: normal; color: var(--gc); font-weight: 700; }
/* Flags a guide that opens behind a login, or lives inside the app rather than
   as its own page — so a logged-out reader is not surprised by a login wall. */
.gate {
  display: inline-block; text-decoration: none; vertical-align: 1px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px; margin-left: 5px;
  color: var(--muted); background: color-mix(in srgb, var(--text) 7%, var(--panel));
  border: 1px solid var(--border);
}

/* ---------- article ----------
   The container matches the site .wrap (1200/22) so headings line up with the
   logo above them. Running prose is then capped at a measure that stays
   readable, while every block that carries data — tables, charts, strategy
   cards, the mono boxes — is free to use the full width. Those were the
   elements actually being squeezed at 880px. */
.art-wrap { max-width: 1200px; margin: 0 auto; padding: 0 22px; }
.art article > p,
.art article > h2,
.art article > h3,
.art-head .stand { max-width: 88ch; }
.art .callout { max-width: 94ch; }
@media (max-width: 900px) {
  .art article > p, .art article > h2, .art article > h3,
  .art-head .stand, .art .callout { max-width: none; }
}
.art-head { padding: 40px 0 6px; }
.art-head .back { font-size: 13px; font-weight: 700; color: var(--muted); text-decoration: none; }
.art-head .back:hover { color: var(--blue); }
.art-head h1 { font-size: clamp(28px, 4.6vw, 46px); font-weight: 750; line-height: 1.12; margin: 14px 0 12px; }
.art-head .stand { font-size: clamp(16px, 2vw, 19px); color: var(--text-2); line-height: 1.55; margin: 0; }
.art-head .byline { margin-top: 16px; font-size: 13px; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; }

.art article { font-size: 17px; line-height: 1.72; }
.art h2 { font-size: clamp(22px, 3vw, 29px); font-weight: 750; line-height: 1.18; margin: 46px 0 14px; }
.art h3 {
  font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 8px;
}
.art p { margin: 0 0 16px; }
.art p:last-child { margin-bottom: 0; }
.art strong { font-weight: 700; }
.art code { font-family: var(--blog-mono); font-size: .9em; background: color-mix(in srgb, var(--text) 7%, var(--panel)); padding: 1px 5px; border-radius: 4px; }

.slugbar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin: 26px 0;
}
.slugbar > div { background: var(--panel); padding: 12px 15px; }
.slugbar dt { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.slugbar dd { margin: 0; font-family: var(--blog-mono); font-size: 14.5px; font-variant-numeric: tabular-nums; }

.callout { border-left: 3px solid var(--blog-brass); padding: 2px 0 2px 18px; margin: 22px 0; color: var(--text-2); }
.callout.good { border-left-color: var(--blog-jade); }
.callout.bad { border-left-color: var(--blog-clay); }
.callout strong { color: var(--text); }
.callout p { margin: 0; }

.mono-box {
  font-family: var(--blog-mono); font-size: 14.5px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 10px; padding: 15px 17px;
  margin: 22px 0; overflow-x: auto; white-space: pre; line-height: 1.7;
}

.tbl-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; margin: 22px 0; }
table.blog-tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
table.blog-tbl th {
  font-size: 10.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted); text-align: right; padding: 12px 15px; background: var(--panel);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.blog-tbl th:first-child, table.blog-tbl td:first-child { text-align: left; }
table.blog-tbl td {
  padding: 11px 15px; text-align: right; border-bottom: 1px solid var(--border);
  font-family: var(--blog-mono); font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.blog-tbl td:first-child { font-family: inherit; font-weight: 600; white-space: normal; }
table.blog-tbl tr:last-child td { border-bottom: 0; }
.pos { color: var(--blog-jade); } .neg { color: var(--blog-clay); }

.chartbox { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 16px 16px 10px; margin: 24px 0; }
.chartbox svg { display: block; width: 100%; height: auto; }
.chart-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--border); }
.chart-legend span { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.chart-legend i { width: 15px; height: 3px; border-radius: 2px; display: inline-block; }

/* strategy card */
.strat { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin: 28px 0; box-shadow: var(--shadow); }
.strat-head { padding: 22px 22px 18px; border-bottom: 1px solid var(--border); }
.strat-head h2 { margin: 0 0 9px; font-size: clamp(20px, 2.6vw, 26px); }
.strat-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.strat-chips b {
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--text) 7%, var(--panel)); color: var(--text-2);
}
.strat-chips b.g { color: var(--blog-jade); background: color-mix(in srgb, var(--blog-jade) 13%, var(--panel)); }
.strat-chips b.r { color: var(--blog-clay); background: color-mix(in srgb, var(--blog-clay) 13%, var(--panel)); }
.strat-head p { margin: 0; color: var(--text-2); font-size: 15.5px; }

.strat-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.strat-grid > div { padding: 20px 22px; }
.strat-legs { border-right: 1px solid var(--border); }
@media (max-width: 720px) {
  .strat-grid { grid-template-columns: 1fr; }
  .strat-legs { border-right: 0; border-bottom: 1px solid var(--border); }
}
table.legs { width: 100%; border-collapse: collapse; font-family: var(--blog-mono); font-size: 13.5px; }
table.legs th {
  font-family: inherit; font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted); text-align: right; padding: 0 0 7px; border-bottom: 1px solid var(--border);
}
table.legs th:first-child, table.legs td:first-child { text-align: left; }
table.legs td { padding: 7px 0; text-align: right; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--border); }
table.legs tr:last-child td { border-bottom: 0; }
.bs { display: inline-block; min-width: 16px; text-align: center; font-family: inherit; font-size: 10px; font-weight: 800; padding: 2px 5px; border-radius: 4px; margin-right: 8px; }
.bs.b { background: color-mix(in srgb, var(--blog-jade) 18%, transparent); color: var(--blog-jade); }
.bs.s { background: color-mix(in srgb, var(--blog-clay) 18%, transparent); color: var(--blog-clay); }
.leg-note { font-family: inherit; font-size: 11px; color: var(--muted); margin-left: 6px; }
.net-row {
  margin-top: 13px; padding-top: 12px; border-top: 2px solid var(--muted);
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-family: var(--blog-mono); font-size: 14.5px; font-variant-numeric: tabular-nums;
}
.net-row span:first-child { font-family: inherit; font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }

.strat-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 1px; background: var(--border); border-top: 1px solid var(--border); }
.strat-stats > div { background: var(--panel); padding: 14px 22px 16px; }
.strat-stats dt { font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); margin: 0 0 5px; }
.strat-stats dd { margin: 0; font-family: var(--blog-mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.strat-stats dd small { display: block; margin-top: 2px; font-family: inherit; font-size: 11.5px; color: var(--muted); }

.strat-foot { border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--border); }
.strat-foot > div { background: var(--panel); padding: 18px 22px 20px; }
.strat-foot p { margin: 0; font-size: 14.5px; color: var(--text-2); }

.strat-manage { border-top: 1px solid var(--border); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 1px; background: var(--border); }
@media (max-width: 720px) { .strat-manage { grid-template-columns: 1fr; } }
.strat-manage > div { background: var(--panel); padding: 18px 22px 22px; }
.strat-manage p { margin: 0; font-size: 14.5px; color: var(--text-2); }
ol.defence { margin: 0; padding: 0; list-style: none; }
ol.defence li { padding: 13px 0; border-top: 1px solid var(--border); }
ol.defence li:first-child { padding-top: 0; border-top: 0; }
ol.defence li:last-child { padding-bottom: 0; }
.d-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; }
.d-trig { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); flex: 1 1 180px; }
.d-tag { font-family: var(--blog-mono); font-size: 11px; padding: 2px 7px; border-radius: 4px; background: color-mix(in srgb, var(--text) 7%, var(--panel)); white-space: nowrap; color: var(--text-2); }
.d-tag.cr { color: var(--blog-jade); } .d-tag.dr { color: var(--blog-clay); } .d-tag.w { color: var(--blog-brass); }
.d-do { margin: 0 0 3px; font-size: 15px; font-weight: 650; }
.d-why { margin: 0; font-size: 14px; color: var(--text-2); }

ol.numbered { margin: 22px 0; padding: 0; list-style: none; counter-reset: n; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
ol.numbered li { background: var(--panel); padding: 15px 19px 16px; counter-increment: n; }
ol.numbered li::before { content: counter(n, decimal-leading-zero); display: block; font-family: var(--blog-mono); font-size: 11.5px; color: var(--blue); margin-bottom: 4px; }
ol.numbered b { font-weight: 750; }
ol.numbered span { color: var(--text-2); }

.art-foot { margin: 48px 0 30px; padding-top: 22px; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.art-foot p { margin: 0 0 9px; }
.art-next { display: flex; gap: 12px; flex-wrap: wrap; margin: 34px 0 10px; }