/* mindasip.com/learn/ (render.mjs): the hub, the topic pages, the articles and the tools on the hub's tokens (hub/hub.css: near-black,
   Inter on one type scale, hairlines, violet only as an accent). An article reads in a 72-character measure beside its table of
   contents; the hub and the topics are grids of cards. Every class is lt-; the hub's own classes (hb-) carry the rest. */
.hb-lt { --lt-measure: 72ch; --lt-toc: 220px; }
.hb-lt [hidden] { display: none !important; }
.lt-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Hero: the crumbs, the kind and dates, the title, the answer set apart, the author line */
.lt-hero { padding-bottom: clamp(28px, 4vw, 48px); }
.lt-hero .hb-h1 { margin-top: 24px; max-width: 18em; font-size: clamp(34px, 3.6vw, 54px); }
.lt-hero-hub .hb-h1 { max-width: 15em; font-size: clamp(38px, 4.2vw, 64px); }
.lt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 24px; font-size: var(--hb-t-lbl); color: var(--hb-mut); }
.lt-kind { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: var(--hb-t-lbl); font-weight: 500; line-height: 1; white-space: nowrap; color: var(--hb-vi-2); background: rgba(139, 92, 246, .14); box-shadow: inset 0 0 0 1px rgba(163, 124, 255, .28); }
.lt-topic { font-weight: 500; color: var(--hb-mut-2); transition: color .15s; }
.lt-topic:hover { color: var(--hb-fg); }
.lt-date time { font-variant-numeric: tabular-nums; }
.lt-answer { margin-top: 28px; max-width: 38em; padding: 20px 24px; border-left: 2px solid var(--hb-vi-2); border-radius: 0 18px 18px 0; background: rgba(139, 92, 246, .07); font-size: var(--hb-t-lede); line-height: 1.55; color: var(--hb-fg); text-wrap: pretty; }
.lt-answer a { text-decoration: underline; text-decoration-color: var(--hb-line-2); text-underline-offset: 3px; }
.lt-answer code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .92em; }
.lt-author { margin-top: 20px; max-width: 44em; font-size: var(--hb-t-sm); line-height: 1.6; color: var(--hb-mut); }

/* ---- Where a topic leads: the product pages, as rows in its hero */
.lt-leads { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-top: 32px; max-width: 980px; }
.lt-lead { display: flex; align-items: center; gap: 12px; height: 100%; padding: 12px 14px; border-radius: 16px; background: var(--hb-card); box-shadow: inset 0 0 0 1px var(--hb-line); transition: background-color .2s var(--hb-ease), box-shadow .2s var(--hb-ease); }
.lt-lead:hover { background: var(--hb-card-2); box-shadow: inset 0 0 0 1px var(--hb-line-2); }
.lt-lead .hb-ic { width: 36px; height: 36px; border-radius: 10px; }
.lt-lead-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lt-lead-l { font-size: var(--hb-t-sm); font-weight: 500; line-height: 1.3; color: var(--hb-fg); }
.lt-lead-b { font-size: var(--hb-t-lbl); line-height: 1.4; color: var(--hb-mut); }

/* ---- The search box, with its results under it */
.lt-search { position: relative; margin-top: 28px; max-width: 560px; }
.lt-search-box { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px; border-radius: 999px; color: var(--hb-mut); background: rgba(246, 245, 250, .05); box-shadow: inset 0 0 0 1px var(--hb-line); transition: box-shadow .2s, background-color .2s; }
.lt-search-box:focus-within { color: var(--hb-mut-2); background: rgba(246, 245, 250, .07); box-shadow: inset 0 0 0 1px var(--hb-line-2); }
.lt-search-box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--hb-fg); font: inherit; font-size: var(--hb-t-sm); -webkit-appearance: none; appearance: none; }
.lt-search-box input::placeholder { color: var(--hb-mut); }
.lt-search-box input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }
.lt-results, .lt-results-none { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; border-radius: 18px; background: var(--hb-card-2); box-shadow: inset 0 0 0 1px var(--hb-line), 0 24px 60px rgba(0, 0, 0, .55); }
.lt-results { display: grid; gap: 2px; padding: 8px; }
.lt-results a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: start; padding: 10px 12px; border-radius: 12px; transition: background-color .15s; }
.lt-results a:hover, .lt-results a:focus-visible { background: rgba(246, 245, 250, .06); }
.lt-r-kind { grid-row: 1 / span 2; margin-top: 2px; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: var(--hb-t-lbl); font-weight: 500; line-height: 1; white-space: nowrap; color: var(--hb-mut-2); background: rgba(246, 245, 250, .06); box-shadow: inset 0 0 0 1px var(--hb-line); }
.lt-r-t { font-size: var(--hb-t-sm); font-weight: 500; line-height: 1.35; color: var(--hb-fg); }
.lt-r-d { font-size: var(--hb-t-lbl); line-height: 1.45; color: var(--hb-mut); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lt-results-none { padding: 14px 18px; font-size: var(--hb-t-sm); color: var(--hb-mut); }

/* ---- Sections of the hub, the topics and the tools index */
.lt-sec { padding-block: clamp(56px, 6.5vw, 96px); }
.lt-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; margin-bottom: 36px; }
.lt-sub { max-width: 38em; font-size: var(--hb-t-body); line-height: 1.55; color: var(--hb-mut); text-wrap: pretty; }
.lt-empty { max-width: 40em; font-size: var(--hb-t-body); line-height: 1.6; color: var(--hb-mut-2); }
.lt-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lt-cards[data-n='1'] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.lt-cards[data-n='2'], .lt-cards[data-n='4'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lt-cards > li { display: flex; min-width: 0; }
.lt-card { gap: 10px; }
.lt-card h3 { text-wrap: balance; }
.lt-card .hb-ic { margin-bottom: 6px; }
.lt-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--hb-t-lbl); color: var(--hb-mut); }
.lt-card-area { white-space: nowrap; }
.lt-card-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: auto; padding-top: 14px; font-size: var(--hb-t-lbl); color: var(--hb-mut); }
.lt-card-foot time { font-variant-numeric: tabular-nums; }
.lt-card .hb-card-go { display: inline-flex; align-items: center; gap: 6px; }
.lt-topic-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.lt-topic-grid > li { display: flex; min-width: 0; }
.lt-tcard { padding: 24px; }
.lt-tcard h3 { font-size: var(--hb-t-body); }

/* ---- The article: the table of contents beside a 72-character column */
.lt-body { display: grid; grid-template-columns: var(--lt-toc) minmax(0, var(--lt-measure)); gap: 0 clamp(40px, 5vw, 80px); padding-block: clamp(24px, 4vw, 56px) clamp(48px, 6vw, 88px); }
.lt-toc { position: sticky; top: calc(var(--hb-hdr) + 24px); align-self: start; }
.lt-toc-h { margin-bottom: 10px; font-size: var(--hb-t-lbl); font-weight: 600; color: var(--hb-mut); }
.lt-toc ol { display: grid; gap: 2px; border-left: 1px solid var(--hb-line); }
.lt-toc a { display: block; margin-left: -1px; padding: 6px 0 6px 14px; border-left: 1px solid transparent; font-size: var(--hb-t-sm); line-height: 1.4; color: var(--hb-mut); text-wrap: pretty; transition: color .15s, border-color .15s; }
.lt-toc a:hover, .lt-toc a.is-on { color: var(--hb-fg); border-left-color: var(--hb-fg); }
.lt-article { min-width: 0; }
.lt-article .lt-s + .lt-s { margin-top: clamp(40px, 5vw, 56px); }
.lt-article h2 { font-size: clamp(24px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; }
.lt-article h2 + * { margin-top: 16px; }
.lt-article p, .lt-article li { font-size: var(--hb-t-body); line-height: 1.7; color: var(--hb-mut-2); text-wrap: pretty; overflow-wrap: anywhere; }
.lt-article * + p, .lt-article * + .lt-steps, .lt-article * + .lt-bullets, .lt-article * + .lt-table-wrap, .lt-article * + .lt-note { margin-top: 16px; }
.lt-article strong { font-weight: 600; color: var(--hb-fg); }
.lt-article a { color: var(--hb-fg); text-decoration: underline; text-decoration-color: var(--hb-line-2); text-underline-offset: 3px; transition: text-decoration-color .15s; }
.lt-article a:hover { text-decoration-color: currentColor; }
.lt-article code { padding: 1px 6px; border-radius: 6px; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .92em; color: var(--hb-fg); background: rgba(246, 245, 250, .08); }
.lt-steps, .lt-bullets { display: grid; gap: 10px; padding-left: 1.5em; }
.lt-steps { list-style: decimal; }
.lt-steps li::marker { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--hb-vi-2); }
.lt-bullets { list-style: disc; }
.lt-bullets li::marker { color: var(--hb-mut); }
.lt-note { padding: 16px 20px; border-radius: 14px; background: rgba(246, 245, 250, .04); box-shadow: inset 0 0 0 1px var(--hb-line); }
.lt-note p { font-size: var(--hb-t-sm); line-height: 1.6; }
.lt-table-wrap { overflow-x: auto; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--hb-line); }
.lt-table { width: 100%; border-collapse: collapse; font-size: var(--hb-t-sm); }
.lt-table caption { padding: 14px 16px 10px; text-align: left; font-size: var(--hb-t-lbl); font-weight: 600; color: var(--hb-mut); caption-side: top; }
.lt-table th, .lt-table td { padding: 12px 16px; text-align: left; vertical-align: top; line-height: 1.5; border-top: 1px solid var(--hb-line); }
.lt-table th { font-weight: 600; color: var(--hb-fg); background: rgba(246, 245, 250, .03); white-space: nowrap; }
.lt-table td { color: var(--hb-mut-2); min-width: 9em; }
.lt-sources li { font-size: var(--hb-t-sm); line-height: 1.6; color: var(--hb-mut); }
.lt-sources code { font-size: .9em; color: var(--hb-mut-2); }
.lt-sources ul { display: grid; gap: 8px; }
.lt-article .hb-faq-list { margin-top: 4px; }
.lt-article .hb-faq-item summary { padding-block: 20px; font-size: var(--hb-t-body); }
.lt-article .hb-faq-a p { padding-right: 56px; font-size: var(--hb-t-body); }

/* ---- A tool, in the article column: its own markup (lt-tool) in a card */
.lt-tool-box { padding: clamp(20px, 3vw, 32px); border-radius: 22px; background: var(--hb-card); box-shadow: inset 0 0 0 1px var(--hb-line); }
.lt-tool-box :where(input, textarea, select) { width: 100%; padding: 10px 14px; border: 0; border-radius: 12px; font: inherit; font-size: var(--hb-t-sm); color: var(--hb-fg); background: rgba(246, 245, 250, .06); box-shadow: inset 0 0 0 1px var(--hb-line); }
.lt-tool-box :where(input, textarea, select):focus { outline: 0; box-shadow: inset 0 0 0 1px var(--hb-line-2); }
.lt-tool-box :where(label) { display: block; margin-bottom: 6px; font-size: var(--hb-t-lbl); font-weight: 500; color: var(--hb-mut-2); }
.lt-tool-box :where(button) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 999px; font-size: var(--hb-t-sm); font-weight: 500; color: #0a0a0a; background: #fff; }
.lt-tool-box :where(button):hover { background: #e6e6e6; }

/* ---- Related, the call to action, the newsletter */
.lt-related .hb-link { margin-bottom: 4px; }
.lt-cta { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: clamp(28px, 4vw, 44px); border-radius: 24px; background: #0e0e11; box-shadow: inset 0 0 0 1px var(--hb-line); overflow: hidden; isolation: isolate; }
.lt-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 90% at 0% 100%, rgba(139, 92, 246, .18), transparent 60%); }
.lt-cta-text { max-width: 40em; }
.lt-cta h2 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; }
.lt-cta p { margin-top: 8px; font-size: var(--hb-t-body); line-height: 1.6; color: var(--hb-mut-2); text-wrap: pretty; }
.lt-cta .hb-btn { flex: none; }
.lt-news-box { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 48px; align-items: center; padding: clamp(28px, 4vw, 44px); border-radius: 24px; background: var(--hb-card); box-shadow: inset 0 0 0 1px var(--hb-line); }
.lt-news-text h2 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; }
.lt-news-text p { margin-top: 8px; font-size: var(--hb-t-sm); line-height: 1.6; color: var(--hb-mut); text-wrap: pretty; }
.lt-form { position: relative; display: flex; gap: 10px; }
.lt-input { flex: 1; min-width: 0; height: 48px; padding: 0 18px; border: 0; border-radius: 999px; font: inherit; font-size: var(--hb-t-sm); color: var(--hb-fg); background: rgba(246, 245, 250, .06); box-shadow: inset 0 0 0 1px var(--hb-line); transition: box-shadow .2s; }
.lt-input:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--hb-line-2); }
.lt-input::placeholder { color: var(--hb-mut); }
.lt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lt-form .hb-btn { flex: none; }
.lt-form.is-busy { opacity: .72; }
.lt-msg, .lt-noscript { margin-top: 12px; font-size: var(--hb-t-sm); line-height: 1.5; color: var(--hb-mut-2); }
.lt-msg.is-err { color: var(--hb-warm); }
.lt-msg:empty { margin: 0; }

/* ---- Narrower screens: one column, a 16 px gutter on a phone, nothing wider than the page */
@media (max-width: 1080px) {
  .lt-topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lt-cards, .lt-cards[data-n='1'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt-body { grid-template-columns: minmax(0, 1fr); }
  .lt-toc { position: static; margin-bottom: 36px; max-width: var(--lt-measure); }
}
@media (max-width: 860px) {
  .lt-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt-news-box { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .hb-lt { --hb-gut: 16px; }
  .lt-cards, .lt-cards[data-n], .lt-topic-grid { grid-template-columns: minmax(0, 1fr); }
  .lt-hero .hb-h1 { font-size: clamp(30px, 8vw, 38px); }
  .lt-answer { padding: 16px 18px; border-radius: 0 14px 14px 0; }
  .lt-form { flex-direction: column; }
  .lt-form .hb-btn, .lt-cta .hb-btn { width: 100%; }
  .lt-cta, .lt-news-box { padding: 24px 20px; border-radius: 20px; }
  .lt-article .hb-faq-a p { padding-right: 0; }
  .lt-table th { white-space: normal; }
  .lt-leads { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .lt-topic, .lt-lead, .lt-search-box, .lt-results a, .lt-toc a, .lt-article a, .lt-input { transition: none; }
}