/* The know-how section (plan 21): the search and the row of themes, which become a thinner bar under the site header
   while the reader scrolls; the panel the section script swaps; every theme at the end; and the theme list the row
   opens, a panel with room on every side. --top is the height of the site's fixed header, which the script measures. */
.knowhow { --knowhow-accent: #b7354b; --knowhow-ink: #333; --knowhow-muted: #666; --knowhow-line: #e4dcdd; --knowhow-soft: #faf4f5; --knowhow-top: 6rem; }
.knowhow .main__inner { min-height: 0; }
.knowhow-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.knowhow a:focus-visible, .knowhow button:focus-visible { outline: 2px solid var(--knowhow-accent); outline-offset: 2px; }

/* The search and the row of themes. The slot keeps the bar's height while the bar is fixed at the top. */
.knowhow__slot { box-sizing: border-box; max-width: 65rem; margin-inline: auto; }
.knowhow__bar { display: grid; gap: 1rem; box-sizing: border-box; padding: 1.2rem 1.6rem 0; background: #fff; }
.knowhow__search { margin: 0; }
.knowhow__field { position: relative; display: flex; align-items: center; gap: .8rem; min-height: 44px; box-sizing: border-box; padding: 0 1.2rem; border: 1px solid #cfc6c8; border-radius: 1rem; background: #fff; cursor: text; }
.knowhow__field:focus-within { border-color: var(--knowhow-accent); box-shadow: 0 0 0 3px rgba(183, 53, 75, .15); }
.knowhow__field-icon { flex: none; width: 2rem; height: 2rem; fill: #8a7d80; }
.knowhow__field input { flex: 1; min-width: 0; height: 42px; margin: 0; padding: 0; border: 0; outline: 0; background: none; font-size: 1.6rem; color: var(--knowhow-ink); }
.knowhow__field input::placeholder { color: #8d8487; }

.knowhow-rail { display: flex; align-items: center; gap: .8rem; min-width: 0; margin-right: -1.6rem; }
.knowhow-rail__chip--list { flex: none; }
.knowhow-rail__scroller { position: relative; flex: 1; min-width: 0; }
.knowhow-rail__list { position: relative; display: flex; gap: .8rem; min-width: 0; margin: -.4rem 0 -.4rem -.4rem; padding: .4rem 1.6rem .4rem .4rem; overflow-x: auto; list-style: none; scrollbar-width: none; overscroll-behavior-x: contain; }
.knowhow-rail__list::-webkit-scrollbar { display: none; }
.knowhow-rail__list li { flex: none; }
.knowhow-rail.is-clipped-end .knowhow-rail__list { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 4.8rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 4.8rem), transparent); }
.knowhow-rail.is-clipped-start .knowhow-rail__list { -webkit-mask-image: linear-gradient(to right, transparent, #000 4.8rem); mask-image: linear-gradient(to right, transparent, #000 4.8rem); }
.knowhow-rail.is-clipped-start.is-clipped-end .knowhow-rail__list { -webkit-mask-image: linear-gradient(to right, transparent, #000 4.8rem, #000 calc(100% - 4.8rem), transparent); mask-image: linear-gradient(to right, transparent, #000 4.8rem, #000 calc(100% - 4.8rem), transparent); }
.knowhow-rail__chip { display: inline-flex; align-items: center; gap: .6rem; min-height: 40px; box-sizing: border-box; padding: 0 1.4rem; border: 1px solid var(--knowhow-line); border-radius: 99.9rem; background: #fff; color: var(--knowhow-ink); font-size: 1.3rem; line-height: 1; white-space: nowrap; text-decoration: none; }
.knowhow-rail__chip:hover { border-color: var(--knowhow-accent); color: var(--knowhow-accent); }
.knowhow-rail__icon { flex: none; width: 1.8rem; height: 1.8rem; fill: var(--knowhow-accent); }
.knowhow-rail__count { font-size: 1.1rem; color: #767676; font-variant-numeric: tabular-nums; }
.knowhow-rail__chip[aria-current] { border-color: var(--knowhow-accent); background: var(--knowhow-accent); color: #fff; font-weight: bold; }
.knowhow-rail__chip[aria-current] .knowhow-rail__icon { fill: #fff; }
.knowhow-rail__chip[aria-current] .knowhow-rail__count { color: #fde8ec; }
/* With a mouse, a round arrow at a side that has more themes scrolls the row. */
.knowhow-rail__step { display: none; }
@media (hover: hover) and (pointer: fine) {
  .knowhow-rail__step { position: absolute; top: 50%; z-index: 1; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; margin-top: -1.6rem; padding: 0; border: 1px solid var(--knowhow-line); border-radius: 50%; background: #fff; box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .14); cursor: pointer; }
  .knowhow-rail__step:hover { border-color: var(--knowhow-accent); }
  .knowhow-rail__step::before { content: ""; width: .7rem; height: .7rem; border-top: 2px solid var(--knowhow-ink); border-right: 2px solid var(--knowhow-ink); }
  .knowhow-rail__step--prev { left: 0; }
  .knowhow-rail__step--prev::before { margin-left: .3rem; transform: rotate(-135deg); }
  .knowhow-rail__step--next { right: .4rem; }
  .knowhow-rail__step--next::before { margin-right: .3rem; transform: rotate(45deg); }
  .knowhow-rail.is-clipped-start .knowhow-rail__step--prev, .knowhow-rail.is-clipped-end .knowhow-rail__step--next { display: inline-flex; }
}
.knowhow-rail__chip--list, .knowhow-rail__chip--more { border-color: #d8c9cc; background: var(--knowhow-soft); color: var(--knowhow-accent); font-weight: bold; }

/* Fixed under the site header while the slot is out of sight: one row, the search folded into its icon until it is used. */
@keyframes knowhow-bar-in { from { transform: translateY(-100%); } to { transform: none; } }
.knowhow__bar.is-stuck { position: fixed; top: var(--knowhow-top); left: 0; right: 0; z-index: 90; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .8rem; padding: .6rem max(1.6rem, calc((100% - 65rem) / 2 + 1.6rem)); border-bottom: 1px solid var(--knowhow-line); box-shadow: 0 .4rem .8rem rgba(0, 0, 0, .06); animation: knowhow-bar-in .18s ease-out; }
.knowhow__bar.is-stuck .knowhow__field { width: 44px; padding: 0; justify-content: center; border-color: #d8c9cc; background: var(--knowhow-soft); cursor: pointer; }
.knowhow__bar.is-stuck .knowhow__field-icon { fill: var(--knowhow-accent); }
.knowhow__bar.is-stuck .knowhow__field input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.knowhow__bar.is-stuck .knowhow-rail { margin-right: 0; }
.knowhow__bar.is-stuck .knowhow-rail__list { padding-right: .4rem; }
.knowhow__bar.is-stuck .knowhow-rail__chip--list { width: 44px; padding: 0; justify-content: center; }
.knowhow__bar.is-stuck .knowhow-rail__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.knowhow__bar.is-stuck.is-searching { grid-template-columns: minmax(0, 1fr); }
.knowhow__bar.is-stuck.is-searching .knowhow__field { width: auto; padding: 0 1.2rem; justify-content: flex-start; background: #fff; cursor: text; }
.knowhow__bar.is-stuck.is-searching .knowhow__field input { position: static; opacity: 1; cursor: text; }
.knowhow__bar.is-stuck.is-searching .knowhow-rail { display: none; }

/* The panel. */
.knowhow__panel { overflow-x: clip; }
.knowhow[aria-busy="true"] .knowhow__panel { opacity: .6; transition: opacity .15s; }
.knowhow-panel > .bread, .knowhow-panel__title, .knowhow-panel__intro, .knowhow-panel__count, .knowhow-panel__empty,
.knowhow-chips, .knowhow-pager, .knowhow-panel__subtitle, .knowhow-all { box-sizing: border-box; max-width: 65rem; margin-inline: auto; padding-inline: 1.6rem; }
.knowhow-panel > .bread { padding-block: 1.2rem 0; }
.knowhow-panel__title { margin-block: .4rem; font-size: 2.2rem; font-weight: bold; line-height: 1.4; color: var(--knowhow-ink); }
.knowhow-panel__title:focus { outline: none; }
.knowhow-panel__eyebrow { display: block; font-size: 1.3rem; font-weight: normal; color: var(--knowhow-accent); letter-spacing: .04em; }
.knowhow-panel__count, .knowhow-panel__empty { margin-block: 0 1.2rem; font-size: 1.4rem; color: var(--knowhow-muted); }
.knowhow-panel__subtitle { margin-block: 2.4rem 1.2rem; font-size: 1.7rem; font-weight: bold; color: var(--knowhow-ink); }
.knowhow-panel__subtitle span { margin-left: .8rem; font-size: 1.3rem; font-weight: normal; color: var(--knowhow-muted); }
.knowhow-panel__title + .knowhow-articles .knowhow-panel__subtitle, .knowhow-panel__title + .knowhow-features .knowhow-panel__subtitle { margin-top: 1.4rem; }
.knowhow-panel__intro { margin-block: 0 1.6rem; font-size: 1.4rem; line-height: 1.8; color: var(--knowhow-muted); }
.knowhow-chips .knowhow-panel__subtitle { padding-inline: 0; }
.knowhow-chips ul { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.knowhow-chips a { display: inline-flex; align-items: center; gap: .6rem; min-height: 36px; box-sizing: border-box; padding: .2rem 1.2rem; border: 1px solid var(--knowhow-line); border-radius: 99.9rem; font-size: 1.3rem; color: var(--knowhow-ink); text-decoration: none; background: #fff; }
.knowhow-chips a span { font-size: 1.1rem; color: var(--knowhow-muted); font-variant-numeric: tabular-nums; }
.knowhow-chips--quiet a { color: var(--knowhow-muted); }
.knowhow-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.6rem; margin-block: 2.4rem; font-size: 1.4rem; }
.knowhow-pager a { display: inline-flex; align-items: center; min-height: 44px; }

@keyframes knowhow-forward { from { opacity: 0; transform: translateX(2.4rem); } to { opacity: 1; transform: none; } }
@keyframes knowhow-back { from { opacity: 0; transform: translateX(-2.4rem); } to { opacity: 1; transform: none; } }
.knowhow-panel.is-entering-forward { animation: knowhow-forward .22s ease-out; }
.knowhow-panel.is-entering-back { animation: knowhow-back .22s ease-out; }

/* Every theme, at the end of the page and in the theme list. Top themes carry their icons. */
.knowhow-tree { margin: 0; padding: 0; list-style: none; }
.knowhow-tree__top { display: flex; align-items: center; gap: 1rem; min-height: 44px; color: var(--knowhow-ink); font-size: 1.5rem; font-weight: bold; text-decoration: none; }
.knowhow-tree__icon { flex: none; width: 3.2rem; height: 3.2rem; padding: .6rem; box-sizing: border-box; border-radius: 50%; background: var(--knowhow-soft); fill: var(--knowhow-accent); }
.knowhow-tree__name { flex: 1; min-width: 0; }
.knowhow-tree__count { flex: none; font-size: 1.2rem; font-weight: normal; color: #767676; font-variant-numeric: tabular-nums; }
.knowhow-tree a:hover .knowhow-tree__name { color: var(--knowhow-accent); }
.knowhow-tree [aria-current] { color: var(--knowhow-accent); }
.knowhow-all { margin-block: 3.2rem 4rem; scroll-margin-top: calc(var(--knowhow-top) + 6.4rem); }
.knowhow-all > .knowhow-panel__subtitle { padding-inline: 0; }
.knowhow-all .knowhow-tree { display: grid; grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); align-items: start; gap: 1.2rem; }
.knowhow-all .knowhow-tree__item { display: grid; gap: .6rem; padding: .6rem 1.2rem; border: 1px solid var(--knowhow-line); border-radius: 1.2rem; }
.knowhow-all .knowhow-tree__item:has(.knowhow-tree__children) { padding-bottom: 1.2rem; }
.knowhow-all .knowhow-tree__children { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.knowhow-all .knowhow-tree__children a { display: inline-flex; align-items: center; gap: .6rem; min-height: 36px; box-sizing: border-box; padding: 0 1.2rem; border: 1px solid var(--knowhow-line); border-radius: 99.9rem; font-size: 1.3rem; color: var(--knowhow-ink); text-decoration: none; }
.knowhow-all .knowhow-tree__children .knowhow-tree__name { flex: none; }
.knowhow-all .knowhow-tree__children [aria-current] { border-color: var(--knowhow-accent); color: var(--knowhow-accent); font-weight: bold; }

/* The theme list: on a phone a panel above the bottom edge, on a wider screen a panel under the bar, with room on
   every side either way. */
@keyframes knowhow-sheet-up { from { opacity: 0; transform: translateY(2.4rem); } to { opacity: 1; transform: none; } }
.knowhow-sheet { position: fixed; inset: auto 1.6rem max(1.6rem, env(safe-area-inset-bottom)) 1.6rem; box-sizing: border-box; width: auto; max-width: none; height: auto; max-height: calc(100vh - var(--knowhow-top) - 3.2rem); max-height: calc(100dvh - var(--knowhow-top) - 3.2rem); margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 1.6rem; background: #fff; color: var(--knowhow-ink); box-shadow: 0 1.2rem 4rem rgba(40, 10, 20, .28); }
.knowhow-sheet[open] { display: flex; animation: knowhow-sheet-up .2s ease-out; }
.knowhow-sheet::backdrop { background: rgba(30, 16, 20, .5); }
html:has(.knowhow-sheet[open]) { overflow: hidden; }
.knowhow-sheet__body { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; }
.knowhow-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: .6rem .6rem 0 2rem; }
.knowhow-sheet__title { margin: 0; font-size: 1.7rem; font-weight: bold; color: var(--knowhow-ink); }
.knowhow-sheet__title:focus { outline: none; }
.knowhow-sheet__close { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--knowhow-ink); cursor: pointer; }
.knowhow-sheet__close:hover { background: var(--knowhow-soft); }
.knowhow-sheet__close svg { width: 2.4rem; height: 2.4rem; fill: currentColor; }
.knowhow-sheet__filter { flex: none; margin: .4rem 1.6rem 1rem; }
.knowhow-sheet__tree { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid #f0eaeb; }
.knowhow-sheet .knowhow-tree__item { position: relative; border-bottom: 1px solid #f0eaeb; }
.knowhow-sheet .knowhow-tree__top { min-height: 48px; padding-inline: 1.6rem; }
.knowhow-sheet .knowhow-tree__item.has-toggle > .knowhow-tree__top { padding-right: 5.6rem; }
.knowhow-sheet .knowhow-tree__toggle { position: absolute; top: .2rem; right: .6rem; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.knowhow-sheet .knowhow-tree__toggle::before { content: ""; width: .8rem; height: .8rem; margin-top: .4rem; border-right: 2px solid #8a7d80; border-bottom: 2px solid #8a7d80; transform: rotate(-135deg); transition: transform .15s; }
.knowhow-sheet .knowhow-tree__toggle[aria-expanded="false"]::before { margin-top: -.4rem; transform: rotate(45deg); }
.knowhow-sheet .knowhow-tree__children { margin: 0; padding: 0 0 .6rem; list-style: none; }
.knowhow-sheet .knowhow-tree__children a { display: flex; align-items: center; gap: .8rem; min-height: 44px; padding: 0 1.6rem 0 5.8rem; color: var(--knowhow-ink); font-size: 1.4rem; text-decoration: none; }
.knowhow-sheet .knowhow-tree [aria-current] { background: #f8ecee; color: var(--knowhow-accent); font-weight: bold; }
.knowhow-sheet__none, .knowhow-sheet__search { flex: none; margin: 1.2rem 1.6rem; font-size: 1.4rem; }
.knowhow-sheet__none { color: var(--knowhow-muted); }
.knowhow-sheet__search { display: flex; align-items: center; min-height: 44px; color: var(--knowhow-accent); font-weight: bold; }
.knowhow-sheet [hidden] { display: none; }

@media (min-width: 768px) {
  .knowhow-rail { margin-right: 0; }
  .knowhow-rail__list { padding-right: .4rem; }
  @keyframes knowhow-sheet-down { from { opacity: 0; transform: translate(-50%, -.8rem); } to { opacity: 1; transform: translate(-50%, 0); } }
  .knowhow-sheet { inset: var(--knowhow-sheet-top, calc(var(--knowhow-top) + 12rem)) auto auto 50%; width: min(61.8rem, calc(100% - 3.2rem)); max-height: calc(100vh - var(--knowhow-sheet-top, 18rem) - 2.4rem); transform: translateX(-50%); }
  .knowhow-sheet[open] { animation-name: knowhow-sheet-down; }
}
@media (max-width: 600px) {
  .knowhow-panel__title { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .knowhow-panel.is-entering-forward, .knowhow-panel.is-entering-back, .knowhow__bar.is-stuck, .knowhow-sheet[open] { animation: none; }
}

/* The block under a know-how article: its theme's newer articles and the themes of the section. */
.knowhow-related { box-sizing: border-box; max-width: 65rem; margin: 3.2rem auto; padding: 0 1.6rem; }
.knowhow-related h2 { margin: 0 0 1.2rem; font-size: 1.8rem; font-weight: bold; }
.knowhow-related__list { margin: 0 0 1.2rem; padding: 0; list-style: none; border-top: 1px solid #e4dcdd; }
.knowhow-related__list li { border-bottom: 1px solid #e4dcdd; }
.knowhow-related__list a { display: block; padding: 1.2rem .4rem; font-size: 1.5rem; line-height: 1.6; color: #333; text-decoration: none; }
.knowhow-related__list a:hover { color: #b7354b; }
.knowhow-related__more { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.4rem; }
.knowhow-related__themes { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.knowhow-related__themes a { display: inline-flex; align-items: center; gap: .6rem; min-height: 40px; box-sizing: border-box; padding: .2rem 1.2rem; border: 1px solid #e4dcdd; border-radius: 99.9rem; font-size: 1.3rem; color: #333; text-decoration: none; }
.knowhow-related__themes svg { width: 1.8rem; height: 1.8rem; fill: #b7354b; }