/* Page layout extends the public illustration kit and Reporter typography, like /research. */
/* The shared bar deliberately uses a high layer; keyboard access must remain above it. */
.knowledge .prp-skip:focus { position: fixed; z-index: 2147483001; }

/* knowledge, skills, routines: Par's three terms, set like code in a doc (the mono font on a tinted chip). */
.kn-term { padding: .06em .32em .1em; border-radius: .28em; background: rgba(43, 35, 27, .08); font-family: var(--prp-mono); font-size: .8em; font-style: normal; font-weight: 400; letter-spacing: -.02em; white-space: nowrap; }
h1 .kn-term, h2 .kn-term { font-size: .74em; }
.pil-key .kn-term { font-weight: 400; }

/* The site's main button: Par's tactile button, verbatim from the home (par-btn par-btn--primary cta). */
.knowledge {
  --par-accent: oklch(0.72 0.12 258);
  --par-glass-brd: oklch(0.46 0.055 78 / 0.16);
  --par-glass-top: oklch(1 0.014 92 / 0.8);
  --par-sh-1: 0.13;
  --par-sh-2: 0.17;
  --par-sh-3: 0.26;
  --par-r-sm: 10px;
  --par-ease: cubic-bezier(.34, 1.56, .64, 1);
  --par-dur-fast: .1s;
  --par-dur: .18s;
  --par-dur-slow: .28s;
  --kn-paper-2: #efe6d1;
}
.par-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  color: oklch(from var(--par-btn) 0.34 calc(c + 0.05) h);
  background-color: transparent;
  background-image: linear-gradient(180deg, color-mix(in oklch, var(--par-btn) 88%, transparent), var(--par-btn));
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  box-shadow:
    0 3px 6px -1px oklch(0 0 0 / var(--par-sh-1)),
    0 14px 28px -6px oklch(0 0 0 / var(--par-sh-2)),
    0 26px 50px -12px oklch(0 0 0 / var(--par-sh-3));
  transition:
    background-color var(--par-dur-slow) ease,
    transform var(--par-dur) var(--par-ease),
    box-shadow var(--par-dur-slow) ease;
}
.par-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, var(--par-glass-top), transparent 45%, var(--par-glass-brd));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.par-btn--primary { --par-btn: oklch(from var(--par-accent) 0.81 0.11 h); }
.par-btn:hover {
  background-color: var(--par-btn);
  transform: translateY(-1px) scale(1.025);
  box-shadow:
    0 6px 12px -2px oklch(0 0 0 / calc(var(--par-sh-1) + 0.05)),
    0 18px 36px -8px oklch(0 0 0 / calc(var(--par-sh-2) + 0.08)),
    0 38px 64px -12px oklch(0 0 0 / calc(var(--par-sh-3) + 0.1));
}
.par-btn:active {
  transform: translateY(1px) scale(.95);
  box-shadow: 0 1px 2px oklch(0 0 0 / var(--par-sh-2)), 0 4px 12px -5px oklch(0 0 0 / var(--par-sh-1));
  transition: transform var(--par-dur-fast) ease, box-shadow var(--par-dur-fast) ease;
}
.cta { padding: 17px 26px; min-height: 50px; border-radius: var(--par-r-sm); }

.knowledge .kn-hero { display: grid; grid-template-columns: 6fr 5fr; align-items: center; gap: 32px; padding-top: clamp(48px, 8vw, 100px); }
.kn-hero h1 { font-size: clamp(40px, 4.6vw, 64px); line-height: 1.08; letter-spacing: -.025em; }
.kn-hero h1 .kn-term { font-size: .68em; }
.kn-lead { font: 400 clamp(20px, 2vw, 24px)/1.45 var(--prp-serif); }
.kn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 28px; }
.kn-figure { margin: 0; }
.kn-figure .pil-art { margin-top: 0; }
.kn-hero figcaption { font-size: 15px; line-height: 1.5; color: var(--prp-body); text-align: center; margin: 14px auto 0; max-width: 34em; }
.kn-section { padding-block: clamp(64px, 8vw, 112px); }
.kn-heading { max-width: 44em; margin-bottom: 32px; }
.knowledge h2 { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.07; letter-spacing: -.02em; text-wrap: balance; }
.knowledge h3 { font-size: 24px; line-height: 1.2; letter-spacing: -.01em; }
.kn-heading > p { max-width: 38em; font-size: 18px; color: var(--prp-body); }
/* Small labels are Geist in soft ink; the mono font belongs to the three terms only. */
.kn-label { display: block; font: 500 13px/1.5 var(--prp-sans); color: var(--prp-muted); }
/* The page's bands: cream, or the home's paper band, alternating. */
.kn-band { background: var(--kn-paper-2); }
.kn-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.kn-split .kn-heading { margin-bottom: 0; }
.kn-split--art-first > div > p:first-of-type { margin-top: 20px; }

/* How. When. What. */
.kn-triad { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kn-triad li { min-width: 0; padding: 22px 24px 24px; background: var(--pil-paper); border: 1px solid var(--prp-strong); border-radius: 20px; }
.kn-triad h3 { margin-top: 14px; }
.kn-triad p { margin: 10px 0 0; color: var(--prp-body); }
.kn-triad .kn-triad-name { margin: 0; font-size: 24px; color: var(--pil-ink); }
.kn-triad-name .kn-term { font-size: .9em; }
.kn-triad-name span { margin-left: 6px; font: 500 13px/1 var(--prp-sans); color: var(--prp-muted); vertical-align: 3px; }
/* A site card, not app UI: the highlight is a light fill and a thin ink line, with no hard shadow. */
.kn-triad .kn-triad-new { background: var(--pil-yellow-soft); border-color: var(--pil-ink); }

/* Lia's knowledge, asked from two AIs */
.kn-lia .kn-heading p + p { margin-top: 12px; }
.kn-example { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: start; margin-top: clamp(40px, 5vw, 64px); scroll-margin-top: 24px; }
.kn-shelf-top { margin: 0; padding: 18px 22px 14px; border-bottom: var(--pil-line) solid var(--pil-ink); font: 400 22px/1.2 var(--prp-serif); }
.kn-shelf-top span { display: block; margin-top: 4px; font: 13px/1.4 var(--prp-sans); color: var(--prp-muted); }
.kn-records { list-style: none; margin: 0; padding: 10px; display: grid; gap: 8px; }
.kn-records li { padding: 12px 14px; border: 2px solid transparent; border-radius: 14px; font-size: 16px; line-height: 1.45; transition: background-color .25s var(--prp-ease), border-color .25s var(--prp-ease); }
.kn-records li.is-used { background: var(--pil-yellow-soft); border-color: var(--pil-ink); }
.kn-records .kn-label { margin-bottom: 4px; }
.kn-tabs { flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
/* Without JavaScript the tabs and the status line ship hidden; only a tab row that is not hidden becomes a flex row. */
.kn-tabs:not([hidden]) { display: flex; }
.kn-tabs button { min-height: 44px; padding: 9px 16px; border: 2px solid var(--pil-ink); border-radius: 99px; background: var(--pil-paper); color: var(--pil-ink); font: 500 14px var(--prp-sans); cursor: pointer; }
.kn-tabs button[aria-pressed="true"] { background: var(--pil-yellow); box-shadow: 2px 2px 0 var(--pil-ink); }
.kn-announcement { margin: 0 0 14px; font-size: 14px; color: var(--prp-muted); }
.kn-chat { display: grid; gap: 20px; }
.kn-chat .kn-tabs, .kn-chat .kn-announcement { margin-bottom: 0; }
.kn-talk[hidden] { display: none; }
.kn-when { margin: 0; padding: 14px 22px 12px; border-bottom: var(--pil-line) solid var(--pil-ink); font: 500 13px/1.4 var(--prp-sans); color: var(--prp-muted); }
.kn-ask { margin: 18px 22px 0 auto; max-width: 80%; width: fit-content; padding: 12px 16px; background: var(--pil-yellow); border: 2px solid var(--pil-ink); border-radius: 18px 18px 4px 18px; font-weight: 500; }
.kn-answer { margin: 14px 22px 0; max-width: 88%; padding: 14px 18px; background: var(--pil-paper); border: 2px solid var(--pil-ink); border-radius: 18px 18px 18px 4px; font: 400 19px/1.4 var(--prp-serif); }
.kn-used { margin: 16px 0 0; padding: 12px 22px 16px; border-top: 2px solid #e6dcc6; font-size: 14px; color: var(--prp-body); }
.kn-line { margin: clamp(32px, 4vw, 48px) 0 0; font: 400 clamp(24px, 2.6vw, 32px)/1.25 var(--prp-serif); text-align: center; }

/* A team's knowledge: a wider text column and the smaller title keep the heading to two lines at 1280. */
@media (min-width: 761px) { .kn-team .kn-split { grid-template-columns: 9fr 11fr; } }
.kn-team h2 { font-size: clamp(32px, 3.8vw, 50px); }
.kn-story { font-size: 18px; }
.kn-more { font-weight: 500; text-decoration: underline 1px; text-underline-offset: 5px; }
.kn-more::after { content: " →"; }

/* A link vs knowledge (the site's comparison table, as on /how-it-works) */
.kn-table { width: 100%; max-width: 1000px; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.kn-table th, .kn-table td { text-align: left; vertical-align: top; padding: 14px 16px; border-top: 1px solid var(--prp-strong); }
.kn-table thead th { font: 400 21px var(--prp-serif); border-top: 0; padding-bottom: 12px; }
.kn-table thead td { border-top: 0; }
.kn-table thead th.is-par { background: var(--pil-ink); color: var(--pil-paper); border-radius: 12px 12px 0 0; }
.kn-table thead th.is-par .kn-term { background: rgba(247, 240, 225, .16); }
.kn-table tbody th { font: 500 14px/1.5 var(--prp-sans); color: var(--prp-muted); width: 20%; }
.kn-table td { color: var(--prp-body); }
.kn-table td.is-par { color: var(--prp-text); background: rgba(43, 35, 27, .06); width: 40%; font-weight: 500; }
.kn-builders { max-width: 46em; margin: 28px 0 0; font-size: 16px; color: var(--prp-body); }
.kn-builders-link { margin: 12px 0 0; font-size: 16px; }

/* Kept fresh by whoever knows it best */
.kn-keepers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kn-keepers li { display: flex; flex-direction: column; min-width: 0; padding: 20px 22px; background: var(--pil-paper); border: 1px solid var(--prp-strong); border-radius: 20px; }
.kn-keepers p { margin: 8px 0 0; color: var(--prp-body); }
/* Who keeps it and how often it changes: two dotted lines, not pills. */
.kn-keepers .kn-kept { display: grid; gap: 4px; margin-top: auto; padding-top: 16px; }
.kn-kept span { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--prp-body); }
.kn-kept span::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--prp-muted); }

/* Add anyone's knowledge to your AI */
.kn-anyone .kn-heading h2 + p { margin-top: 18px; }
.kn-anyone .kn-heading p + p { margin-top: 12px; }
@media (min-width: 761px) { .kn-anyone .kn-split { grid-template-columns: 11fr 9fr; } }
.kn-anyone h2 { font-size: clamp(32px, 3.8vw, 50px); }
.kn-steps { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kn-steps li { min-width: 0; padding-top: 18px; border-top: 2px solid var(--pil-ink); }
.kn-steps h3 { margin-top: 8px; }
.kn-steps p { margin: 10px 0 0; color: var(--prp-body); }

.kn-end { text-align: center; }
.kn-end p { font-size: 18px; color: var(--prp-body); }
.kn-end .par-btn { margin-top: 16px; }

@media (max-width: 900px) {
  .kn-triad, .kn-keepers, .kn-steps { grid-template-columns: 1fr 1fr; }
  .kn-example { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .knowledge .kn-hero, .kn-split { grid-template-columns: 1fr; gap: 32px; }
  /* The drawings' panels bleed to the screen's edge (the kit assumes a 16 px gutter; this page's is wider). */
  .knowledge .pil-art { margin-inline: calc(-1 * var(--prp-gutter)); }
  .kn-split--art-first .kn-figure { order: 2; }
  .kn-triad, .kn-keepers, .kn-steps { grid-template-columns: 1fr; }
  .kn-ask { max-width: 90%; margin-inline: auto 16px; }
  .kn-answer { max-width: none; margin-inline: 16px; }
  .kn-when, .kn-used { padding-inline: 16px; }
  .kn-table, .kn-table tbody, .kn-table tr, .kn-table th, .kn-table td { display: block; width: auto !important; }
  .kn-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .kn-table tr { padding: 4px 0 12px; border-top: 1px solid var(--prp-strong); }
  .kn-table tbody th { border-top: 0; padding: 12px 0 4px; color: var(--prp-text); }
  .kn-table td { border-top: 0; padding: 26px 0 6px; position: relative; }
  .kn-table td.is-par { padding: 32px 12px 10px; border-radius: 10px; }
  .kn-table td::before { content: attr(data-col); position: absolute; left: 0; top: 4px; font: 500 13px/1.4 var(--prp-sans); color: var(--prp-muted); }
  /* The knowledge column's label is the term itself, so it keeps the term's mono chip. */
  .kn-table td.is-par::before { left: 12px; top: 6px; padding: 1px 5px 2px; border-radius: 4px; background: rgba(43, 35, 27, .1); font: 12px/1.4 var(--prp-mono); color: var(--pil-ink); letter-spacing: -.02em; }
}
/* Text links are small to the eye but a 44 px target for a finger. */
@media (pointer: coarse) { .kn-see, .kn-more { display: inline-block; min-height: 44px; padding-block: 10px; } }
@media (prefers-reduced-motion: reduce) { .knowledge { scroll-behavior: auto; } .kn-records li { transition: none; } .par-btn, .par-btn:hover, .par-btn:active { transition: none; transform: none; } }