/* Firmspec Knowledge: a quiet field guide built for scanning during real work. */

.knowledge-wide { width:var(--site-width); margin-inline:auto; }

.knowledge-eyebrow { margin:0 0 13px; color:var(--muted); font:11px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.knowledge-hero { padding:56px 0 40px; }
.knowledge-hero h1 { max-width:780px; margin:0; font:420 clamp(34px,4.6vw,44px)/1.05 var(--headline); letter-spacing:-.02em; text-wrap:balance; }
.knowledge-hero > p:not(.knowledge-eyebrow) { max-width:690px; margin:24px 0 0; color:var(--text-soft); font-size:17px; line-height:1.65; }
.knowledge-search { max-width:760px; height:58px; display:flex; align-items:center; gap:13px; margin-top:42px; padding:0 16px; border:1px solid var(--line-strong); border-radius:12px; background:var(--bg-raised); box-shadow:0 14px 45px rgb(0 0 0 / .12); }
.knowledge-search:focus-within { border-color:color-mix(in srgb,var(--text) 35%,transparent); box-shadow:0 0 0 3px var(--line); }
.knowledge-search > span { color:var(--muted); font-size:25px; transform:rotate(-15deg); }
.knowledge-search input { min-width:0; flex:1; height:100%; border:0; outline:0; background:transparent; color:var(--text); font-size:16px; }
.knowledge-search input::placeholder { color:var(--muted); }
.knowledge-search kbd { min-width:25px; padding:3px 7px; border:1px solid var(--line-strong); border-radius:6px; background:var(--panel); color:var(--muted); font:12px var(--mono); text-align:center; }
.knowledge-search-results { max-width:760px; margin-top:10px; overflow:hidden; border:1px solid var(--line-strong); border-radius:12px; background:var(--bg-raised); box-shadow:0 18px 48px rgb(0 0 0 / .16); }
.knowledge-search-results[hidden] { display:none; }
.knowledge-search-summary { min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 15px; border-bottom:1px solid var(--line); }
.knowledge-search-summary p { margin:0; color:var(--muted); font-size:12px; }
.knowledge-search-summary button { padding:5px 7px; border:0; background:transparent; color:var(--text-soft); font-size:12px; }
.knowledge-search-summary button:hover { color:var(--text); }
.knowledge-search-hits { display:grid; }
.knowledge-search-hit { min-width:0; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:13px 15px; border-bottom:1px solid var(--line); }
.knowledge-search-hit:hover { background:var(--panel); }
.knowledge-search-hit > span:first-child { min-width:0; display:grid; gap:3px; }
.knowledge-search-hit small { color:var(--faint); font:9px/1.4 var(--mono); letter-spacing:.05em; text-transform:uppercase; }
.knowledge-search-hit strong { overflow:hidden; color:var(--text); font-size:14px; font-weight:500; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.knowledge-search-hit strong + span { overflow:hidden; color:var(--muted); font-size:11px; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }
.knowledge-search-hit-arrow { flex:0 0 auto; color:var(--faint); font-size:15px; }
.knowledge-search-hit:hover .knowledge-search-hit-arrow { color:var(--text); }
.knowledge-search-all { min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 15px; color:var(--text-soft); font-size:12px; font-weight:500; }
.knowledge-search-all:hover { background:var(--panel); color:var(--text); }
.knowledge-search-all[hidden] { display:none; }
.library-section,.all-section { padding:44px 0; }
.library-section { border-bottom:1px solid var(--line); }
.all-section { padding-top:36px; }
.section-heading { max-width:680px; margin-bottom:24px; }
.section-heading h2 { margin:0; font:440 clamp(22px,2.4vw,28px)/1.15 var(--headline); letter-spacing:-.014em; }
.section-heading > p:not(.knowledge-eyebrow) { margin:12px 0 0; color:var(--muted); font-size:15px; line-height:1.6; }

/* Browse: a short orienting line, then one clear stage filter row + a live count. */
.all-intro { max-width:640px; margin-bottom:26px; }
.all-intro h2 { margin:0; font:440 clamp(22px,2.4vw,28px)/1.15 var(--headline); letter-spacing:-.014em; }
.all-intro > p:not(.knowledge-eyebrow) { margin:11px 0 0; color:var(--muted); font-size:14px; line-height:1.6; }
.all-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 20px; margin-bottom:34px; }
.all-toolbar [data-result-count] { flex:0 0 auto; color:var(--muted); font:12px var(--mono); }
[data-filter-context] { margin-top:6px; color:var(--muted); font-size:12px; }
[data-filter-context] button { padding:0; border:0; background:none; color:var(--text-soft); font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
[data-filter-context] button:hover { color:var(--text); }

/* Articles grouped by stage so the whole library is scannable at a glance. */
.all-groups { display:grid; gap:44px; }
.stage-group[hidden] { display:none; }
.stage-group-head { display:flex; align-items:baseline; gap:10px; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.stage-group-head h3 { margin:0; font:470 17px/1.2 var(--headline); color:var(--text); }
.stage-group-head span { color:var(--faint); font:11px var(--mono); }

.knowledge-card { min-height:218px; display:flex; flex-direction:column; padding:20px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-raised); transition:border-color .16s ease,background .16s ease; }
.knowledge-card:hover { border-color:var(--line-strong); background:var(--panel); }
.knowledge-card[hidden] { display:none; }
.card-image { height:112px; flex:0 0 auto; margin:-20px -20px 18px; overflow:hidden; border-bottom:1px solid var(--line); border-radius:var(--radius-md) var(--radius-md) 0 0; background:var(--panel); }
.card-image img { width:100%; height:100%; display:block; object-fit:cover; opacity:.78; filter:saturate(.72) contrast(.96); transition:opacity .18s ease,transform .35s cubic-bezier(.32,.72,0,1); }
.knowledge-card:hover .card-image img { opacity:.9; transform:scale(1.015); }
.card-meta { display:flex; justify-content:space-between; gap:12px; color:var(--faint); font:10px/1.4 var(--mono); letter-spacing:.05em; text-transform:uppercase; }
.knowledge-card > strong { margin-top:16px; font:470 18px/1.27 var(--headline); }
.knowledge-card > p { margin:10px 0 21px; color:var(--muted); font-size:13px; line-height:1.55; }
.card-foot { margin-top:auto; color:var(--faint); font-size:11px; }
.library-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.library-grid a { display:grid; align-content:start; gap:8px; min-height:105px; padding:18px; border:1px solid var(--line); border-radius:10px; background:var(--bg-raised); }
.library-grid a:hover { border-color:var(--line-strong); }
.library-grid span { color:var(--faint); font:10px var(--mono); text-transform:uppercase; }
.library-grid strong { font-size:14px; font-weight:480; line-height:1.4; }

.filter-row { display:flex; flex-wrap:wrap; gap:7px; flex:1 1 auto; }
.filter-row button { min-height:34px; padding:0 13px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--muted); font-size:13px; }
.filter-row button:hover,.filter-row button.active { border-color:var(--line-strong); background:var(--panel); color:var(--text); }
.all-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.empty-results { padding:56px 0; border-top:1px solid var(--line); text-align:center; }
.empty-results strong { font:480 20px var(--headline); }
.empty-results p { color:var(--muted); }

.article-layout { display:grid; grid-template-columns:220px minmax(0,1fr) 220px; justify-content:space-between; gap:48px; padding-top:42px; }
.stage-nav,.article-toc { position:sticky; top:92px; align-self:start; max-height:calc(100vh - 116px); overflow:auto; }
.stage-nav { display:grid; gap:2px; }
.stage-nav a { padding:7px 9px; border-radius:7px; color:var(--muted); font-size:12px; line-height:1.35; }
.stage-nav a:hover,.stage-nav a.active { background:var(--panel); color:var(--text); }
.stage-nav-home { margin-bottom:15px; color:var(--text-soft) !important; }
.stage-nav-label { margin:20px 9px 5px; color:var(--faint); font:10px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:40px; color:var(--muted); font-size:12px; }
.breadcrumbs a:hover { color:var(--text); }
.article-header { padding-bottom:38px; border-bottom:1px solid var(--line); }
.article-labels { display:flex; flex-wrap:wrap; gap:7px; }
.article-labels span { padding:4px 8px; border:1px solid var(--line); border-radius:6px; color:var(--muted); font:10px var(--mono); letter-spacing:.05em; text-transform:uppercase; }
.article-header h1 { margin:22px 0 16px; font:430 clamp(33px,4.4vw,44px)/1.08 var(--headline); letter-spacing:-.02em; text-wrap:balance; }
.article-header > p { max-width:680px; margin:0; color:var(--text-soft); font-size:18px; line-height:1.6; }
.article-hero-image { aspect-ratio:16/7; margin:34px 0 0; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.article-hero-image img { width:100%; height:100%; display:block; object-fit:cover; opacity:.82; filter:saturate(.74) contrast(.96); }
.article-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:28px; color:var(--muted); font-size:12px; }
.article-save { position:relative; margin-left:auto; }
.article-save > summary { display:inline-flex; align-items:center; gap:7px; min-height:32px; padding:0 11px; border:1px solid var(--line); border-radius:7px; background:var(--bg-raised); color:var(--text-soft); cursor:pointer; list-style:none; user-select:none; }
.article-save > summary::-webkit-details-marker { display:none; }
.article-save > summary::marker { content:''; }
.article-save[open] > summary,.article-save > summary:hover { border-color:var(--line-strong); background:var(--panel); color:var(--text); }
.article-save-option strong .icon { display:inline-block; width:13px; height:13px; margin-left:3px; color:var(--success); vertical-align:-2px; }
.article-save-panel { position:absolute; right:0; top:calc(100% + 8px); z-index:30; width:300px; padding:10px; border:1px solid var(--line-strong); border-radius:12px; background:var(--panel); box-shadow:0 16px 44px rgba(0,0,0,.18); display:grid; gap:4px; }
.article-save-hint { margin:2px 4px 6px; color:var(--faint); font:10px var(--mono); letter-spacing:.05em; text-transform:uppercase; }
.article-meta .article-save-option { display:block; width:100%; min-height:0; text-align:left; padding:9px 10px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--text); cursor:pointer; }
.article-meta .article-save-option:hover,.article-meta .article-save-option[aria-pressed="true"] { border-color:var(--line); background:var(--bg-raised); }
.article-meta .article-save-option strong { display:block; font-size:13px; font-weight:600; }
.article-meta .article-save-option span { display:block; margin-top:3px; color:var(--muted); font-size:11px; line-height:1.45; }
.freshness-warning { display:flex; gap:13px; margin:22px 0 0; padding:14px 16px; border:1px solid color-mix(in srgb,var(--warning) 28%,var(--line)); border-radius:9px; background:color-mix(in srgb,var(--warning) 6%,var(--bg-raised)); color:var(--text-soft); }
.freshness-warning > span { color:var(--warning); font:17px/1 var(--mono); }
.freshness-warning strong { display:block; color:var(--text); font-size:13px; font-weight:520; }
.freshness-warning p { margin:4px 0 0; font-size:12px; line-height:1.5; }
.article-resource { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 24px; margin-top:24px; padding:18px 20px; border:1px solid var(--line); border-radius:10px; background:var(--bg-raised); }
.article-resource .knowledge-eyebrow { margin-bottom:6px; }
.article-resource h2 { margin:0; font:480 16px/1.35 var(--headline); }
.resource-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.resource-actions button { min-height:34px; padding:0 12px; border:1px solid var(--line-strong); border-radius:7px; background:var(--panel); color:var(--text-soft); font-size:12px; }
.resource-actions button:first-child { background:var(--text); border-color:var(--text); color:var(--bg); }
.resource-actions button:hover { filter:brightness(1.06); }
.resource-status { grid-column:1/-1; min-height:0; color:var(--success); font-size:11px; }
.article-body { padding:33px 0 72px; color:var(--text-soft); font-size:16px; line-height:1.72; }
.article-body > :first-child { margin-top:0; }
.article-body h2,.article-body h3,.article-body h4 { scroll-margin-top:90px; color:var(--text); font-family:var(--headline); font-weight:480; letter-spacing:-.008em; text-wrap:balance; }
.article-body h2 { margin:58px 0 17px; padding-top:3px; font-size:29px; line-height:1.18; }
.article-body h3 { margin:37px 0 12px; font-size:21px; line-height:1.25; }
.article-body h4 { margin:28px 0 10px; font-size:17px; }
.article-body p { margin:0 0 19px; }
.article-body ul,.article-body ol { margin:0 0 24px; padding-left:24px; }
.article-body li { margin:7px 0; padding-left:4px; }
.article-body a { color:var(--text); text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:3px; }
.article-body a:hover { text-decoration-color:var(--text); }
.article-body code { padding:2px 5px; border-radius:5px; background:var(--panel); color:var(--code-strong); font-size:.88em; }
.article-body pre { margin:27px 0; padding:20px; overflow:auto; border:1px solid var(--line); border-radius:10px; background:var(--code-bg); color:var(--code-text); font-size:13px; line-height:1.65; }
.article-body pre code { padding:0; background:transparent; }
.article-body hr { margin:42px 0; border:0; border-top:1px solid var(--line); }
.article-callout { margin:29px 0; padding:18px 20px; border-left:2px solid var(--info); border-radius:0 9px 9px 0; background:color-mix(in srgb,var(--info) 7%,var(--bg-raised)); }
.article-callout > strong { display:block; margin-bottom:8px; color:var(--text); font:480 13px var(--headline); }
.article-callout p { margin:0; }
.article-callout.is-good-default { border-color:var(--success); background:color-mix(in srgb,var(--success) 7%,var(--bg-raised)); }
.article-callout.is-watch-out { border-color:var(--warning); background:color-mix(in srgb,var(--warning) 7%,var(--bg-raised)); }
.task-list { display:grid; gap:8px; padding:0 !important; list-style:none; }
.task-list li { display:flex; gap:10px; margin:0; }
.check-box { flex:0 0 18px; width:18px; height:18px; display:grid; place-items:center; margin-top:4px; border:1px solid var(--line-strong); border-radius:4px; color:var(--success); font-size:12px; }
.check-box .icon { width:12px; height:12px; stroke-width:2.5; }
.table-wrap { margin:28px 0; overflow:auto; border:1px solid var(--line); border-radius:10px; }
.article-body table { width:100%; border-collapse:collapse; font-size:14px; }
.article-body th,.article-body td { padding:13px 15px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.article-body th { color:var(--text); background:var(--panel); font-weight:500; }
.article-body tr:last-child td { border-bottom:0; }
.article-toc { display:grid; gap:8px; }
.article-toc > strong { margin-bottom:6px; color:var(--text); font-size:12px; font-weight:520; }
.article-toc a { color:var(--muted); font-size:11px; line-height:1.4; }
.article-toc a:hover { color:var(--text); }
.article-toc a.level-3 { padding-left:10px; color:var(--faint); }
.article-toc .toc-feedback { margin-top:18px; padding-top:17px; border-top:1px solid var(--line); }
.article-pagination { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:27px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.article-pagination a { display:grid; gap:7px; padding:13px; border-radius:9px; }
.article-pagination a:hover { background:var(--panel); }
.article-pagination span { color:var(--faint); font:10px var(--mono); text-transform:uppercase; }
.article-pagination strong { font-size:13px; font-weight:470; }
.article-pagination .next { text-align:right; }
.related-section { padding:66px 0 90px; }
.related-section h2 { margin:0 0 24px; font:450 29px var(--headline); }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.related-grid .knowledge-card { min-height:205px; }
.related-grid .card-image { height:88px; }
.related-grid .card-meta span:last-child { display:none; }

.knowledge-footer { margin-top:25px; border-top:1px solid var(--line); }
.knowledge-footer > div { min-height:150px; display:grid; grid-template-columns:160px 1fr auto; align-items:center; gap:35px; }
.knowledge-footer strong { font:650 13px var(--headline); letter-spacing:.045em; }
.knowledge-footer p { max-width:500px; color:var(--muted); font-size:13px; }
.knowledge-footer nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:18px; color:var(--muted); font-size:12px; }
.knowledge-footer a:hover { color:var(--text); }

@media (max-width:1080px) {
  .all-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .article-layout { grid-template-columns:180px minmax(0,1fr); }
  .article-toc { display:none; }
  .related-grid { grid-template-columns:1fr; }
}
@media (max-width:760px) {

  .knowledge-hero { padding:40px 0 34px; }
  .knowledge-hero > p:not(.knowledge-eyebrow) { font-size:16px; }
  .knowledge-search-hit strong + span { display:none; }
  .library-section,.all-section { padding:40px 0; }
  .all-grid,.library-grid { grid-template-columns:1fr; }
  .article-layout { display:block; padding-top:26px; }
  .stage-nav { position:static; display:flex; margin:0 0 35px; padding-bottom:11px; overflow-x:auto; border-bottom:1px solid var(--line); }
  .stage-nav a { flex:0 0 auto; }
  .stage-nav a:not(.stage-nav-home),.stage-nav-label { display:none; }
  .breadcrumbs { margin-bottom:28px; }
  .article-header h1 { font-size:clamp(34px,10vw,44px); }
  .article-header > p { font-size:16px; }
  .article-save { margin-left:0; }
  .article-save-panel { right:auto; left:0; width:min(300px,calc(100vw - 40px)); }
  .article-resource { grid-template-columns:1fr; }
  .resource-actions { justify-content:flex-start; }
  .article-body { font-size:16px; }
  .article-pagination { grid-template-columns:1fr; }
  .article-pagination .next { text-align:left; }
  .knowledge-footer > div { display:flex; flex-direction:column; align-items:flex-start; min-height:0; padding:38px 0; gap:12px; }
  .knowledge-footer nav { justify-content:flex-start; margin-top:12px; }
}

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

[data-filter-context] { font-size:13px; color:var(--muted); margin:12px 0; }
[data-filter-context] button { color:var(--text); text-decoration:underline; cursor:pointer; background:none; border:0; font:inherit; }