/* The page lives beside a 240px sidebar, so its usable width is well below the
   viewport width. Breakpoints therefore key off the container, not the window. */
.knowledge-page { color:var(--brand-ink); font:14px/1.6 var(--brand-sans); max-width:1200px; margin:auto; padding:24px 12px 60px;
                  container-type:inline-size; container-name:knowledge; }
.knowledge-page * { box-sizing:border-box; }
.knowledge-page h1,.knowledge-page h2,.knowledge-page h3,.knowledge-page p { margin:0; }
.knowledge-page h1 { font:400 clamp(32px,4vw,46px)/1.2 var(--brand-serif); letter-spacing:-1px; margin:12px 0; }
.knowledge-page h2 { font:400 26px/1.35 var(--brand-serif); letter-spacing:-.4px; }
.knowledge-page h3 { font-size:16px; font-weight:600; }
.knowledge-page p,.knowledge-muted { color:var(--brand-muted); }
.knowledge-eyebrow { color:var(--brand-muted); font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
.knowledge-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:28px; }
.knowledge-heading p { max-width:60ch; }
.knowledge-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.knowledge-policy-bar { padding:14px 0; border-top:1px solid var(--brand-border); border-bottom:1px solid var(--brand-border); }
.knowledge-policy-bar .knowledge-muted { margin:0 0 10px; }
.knowledge-configuration { margin-bottom:24px; }
.knowledge-configuration > p { margin-top:8px; }
.knowledge-destination { display:grid; gap:3px; margin:18px 0; padding:14px 16px; border:1px solid var(--brand-border); border-radius:8px; background:var(--brand-sunk); overflow-wrap:anywhere; }
.knowledge-destination p { font-size:12px; }
.knowledge-configuration-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:20px 0; }
.knowledge-configuration-grid > div { min-width:0; }
.knowledge-configuration-grid .knowledge-button { margin-top:14px; }
.knowledge-configuration-grid .knowledge-configuration-value { color:var(--brand-ink); font-weight:600; margin:8px 0; overflow-wrap:anywhere; }
.knowledge-button { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:40px; border:1px solid var(--brand-border); background:var(--brand-surface); color:var(--brand-ink); font:500 13px/1.5 var(--brand-sans); padding:9px 16px; border-radius:8px; cursor:pointer; text-decoration:none; }
.knowledge-button:hover { background:var(--brand-sunk); }
.knowledge-button.primary { background:var(--brand-accent); border-color:var(--brand-accent); color:var(--brand-on-accent); }
.knowledge-button.primary:hover { background:var(--brand-accent-hover); }
/* Forest is the primary action colour; withdrawal is not a primary action. */
.knowledge-button.danger { background:var(--brand-danger-soft); border-color:var(--brand-danger); color:var(--brand-danger); }
.knowledge-button.danger:hover { background:var(--brand-danger); color:var(--brand-surface); }
.knowledge-button:disabled { background:var(--brand-sunk); color:var(--brand-muted); border-color:var(--brand-border); cursor:not-allowed; }
.knowledge-page :is(button,a,input,select,summary):focus-visible { outline:3px solid var(--brand-accent); outline-offset:3px; }
.knowledge-card { background:var(--brand-surface); border:1px solid var(--brand-border); border-radius:14px; padding:24px; }
.knowledge-intro { display:grid; grid-template-columns:1.2fr 1fr; gap:30px; align-items:center; background:var(--brand-accent-soft); margin-bottom:28px; }
.knowledge-intro h2 { margin:8px 0 12px; }
.knowledge-steps { display:grid; gap:16px; padding-left:28px; border-left:1px solid var(--brand-border); }
.knowledge-step { display:flex; gap:12px; align-items:start; }
.knowledge-step > span { border:1px solid var(--brand-border); border-radius:50%; width:28px; height:28px; display:grid; place-items:center; flex-shrink:0; font-size:12px; }
.knowledge-step p { font-size:13px; }
/* auto-fill, not auto-fit: one connected source keeps card proportions instead of stretching. */
.knowledge-source-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:16px; margin:18px 0 32px; }
.knowledge-source { text-align:left; cursor:pointer; font:inherit; color:inherit; transition:border-color .15s,box-shadow .15s; }
.knowledge-source[aria-pressed=true] { border-color:var(--brand-accent); box-shadow:0 0 0 1px var(--brand-accent); }
.knowledge-source:hover { box-shadow:var(--brand-shadow); }
.knowledge-source h3 { margin:18px 0 6px; overflow-wrap:anywhere; }
.knowledge-source .knowledge-muted { font-size:13px; }
.knowledge-source-footer { border-top:1px solid var(--brand-border); margin-top:20px; padding-top:14px; display:flex; justify-content:space-between; gap:12px; font-size:12px; color:var(--brand-muted); }
.knowledge-row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.knowledge-icon { width:42px; height:42px; background:var(--brand-accent-soft); color:var(--brand-accent); border-radius:10px; display:grid; place-items:center; }
.knowledge-icon svg { width:24px; height:24px; }
.knowledge-badge { display:inline-flex; align-items:center; border:1px solid var(--brand-border); border-radius:6px; padding:3px 8px; color:var(--brand-muted); background:var(--brand-sunk); font-size:12px; font-weight:500; white-space:nowrap; }
.knowledge-badge.success { color:var(--brand-success); background:var(--brand-success-soft); border-color:var(--brand-success); }
.knowledge-badge.warning { color:var(--brand-warning); background:var(--brand-warning-soft); border-color:var(--brand-warning); }
.knowledge-badge.danger { color:var(--brand-danger); background:var(--brand-danger-soft); border-color:var(--brand-danger); }
.knowledge-notice { padding:16px 20px; background:var(--brand-warning-soft); color:var(--brand-warning); border:1px solid currentColor; border-radius:10px; margin:16px 0; }
.knowledge-notice.error { background:var(--brand-danger-soft); color:var(--brand-danger); }
/* Instructions are not warnings: setup guidance must not read as a problem. */
.knowledge-notice.info { background:var(--brand-accent-soft); color:var(--brand-ink); border-color:var(--brand-border); }
.knowledge-notice.info code { display:inline-block; margin:6px 0; padding:4px 8px; border-radius:6px; background:var(--brand-surface); border:1px solid var(--brand-border); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; }
.knowledge-notice p { color:inherit; }
/* Only the notice's own lead line is a block; inline emphasis stays inline. */
.knowledge-notice > b { display:block; margin-bottom:4px; }
.knowledge-table-wrap { overflow:auto; max-height:560px; border:1px solid var(--brand-border); border-radius:10px; margin:18px 0; }
.knowledge-table { width:100%; border-collapse:collapse; min-width:820px; background:var(--brand-surface); table-layout:fixed; }
/* Fixed widths keep long filenames from crushing the status and action columns;
   the wrapper scrolls horizontally inside the panel instead of the page. */
.knowledge-table :is(th,td):nth-child(1) { width:44%; }
.knowledge-table :is(th,td):nth-child(2) { width:15%; }
.knowledge-table :is(th,td):nth-child(3) { width:16%; }
.knowledge-table :is(th,td):nth-child(4) { width:25%; }
.knowledge-table th { position:sticky; top:0; background:var(--brand-sunk); text-align:left; color:var(--brand-muted); font-size:12px; font-weight:600; z-index:1; }
.knowledge-table :is(th,td) { padding:15px 18px; border-bottom:1px solid var(--brand-border); vertical-align:top; }
.knowledge-table td { overflow-wrap:anywhere; }
.knowledge-table small { display:block; font-size:12px; margin-top:5px; color:var(--brand-muted); }
.knowledge-table .knowledge-next { display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:170px; }
.knowledge-table tbody tr:hover { background:var(--brand-accent-soft); }
.knowledge-empty { padding:42px 24px; text-align:center; border:1px dashed var(--brand-border); border-radius:14px; background:var(--brand-surface); }
.knowledge-empty .knowledge-icon { margin:0 auto 16px; }
.knowledge-empty p { margin:8px auto 20px; max-width:55ch; }
.knowledge-field { display:grid; gap:6px; font-weight:500; margin:18px 0; }
.knowledge-req { color:var(--brand-muted); font-weight:400; font-size:12px; }
.knowledge-field:focus-within > .knowledge-req { color:var(--brand-accent); }
.knowledge-field small { color:var(--brand-muted); font-size:12px; font-weight:400; line-height:1.6; }
.knowledge-input { width:100%; min-height:42px; padding:9px 12px; border:1px solid var(--brand-border); border-radius:8px; background:var(--brand-surface); color:var(--brand-ink); font:14px/1.5 var(--brand-sans); }
.knowledge-input::placeholder { color:var(--brand-muted); }
.knowledge-check { display:flex; align-items:start; gap:10px; margin:18px 0; }
.knowledge-check input { accent-color:var(--brand-accent); margin-top:5px; width:16px; height:16px; }
.knowledge-dialog { position:fixed; inset:0; z-index:60; overflow:auto; background:var(--brand-overlay); padding:32px 16px; display:flex; align-items:flex-start; justify-content:center; }
.knowledge-dialog-card { width:100%; max-width:620px; box-shadow:var(--brand-shadow); container-type:inline-size; container-name:dialog; }
.knowledge-dialog-card.narrow { max-width:520px; }
.knowledge-dialog-card > h2 { margin:6px 0 8px; }
.knowledge-dialog-scroll { max-height:52vh; overflow:auto; margin:4px -4px; padding:0 4px; }
.knowledge-detail-list { display:grid; gap:10px; margin:18px 0; font-size:13px; }
.knowledge-detail-list > div { display:grid; grid-template-columns:150px 1fr; gap:12px; align-items:baseline; }
.knowledge-detail-list dt { color:var(--brand-muted); }
.knowledge-detail-list dd { margin:0; overflow-wrap:anywhere; }
.knowledge-detail-list code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; }
@container dialog (max-width:420px) { .knowledge-detail-list > div { grid-template-columns:1fr; gap:2px; } }
.knowledge-dialog-footer { border-top:1px solid var(--brand-border); padding-top:20px; display:flex; gap:10px; justify-content:flex-end; }
.knowledge-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.knowledge-timeline { margin-top:24px; color:var(--brand-muted); font-size:13px; }
.knowledge-timeline li { padding:8px 0; border-bottom:1px solid var(--brand-border); }
.knowledge-page code { overflow-wrap:anywhere; }
body:has(.knowledge-page),body:has(.pb-workspace) { background:var(--brand-ground); }
html.dark body:has(.knowledge-page),html.dark body:has(.pb-workspace) { background:var(--brand-ground); }
body:has(.knowledge-page) header.md\:hidden { background:var(--brand-surface); color:var(--brand-ink); border-color:var(--brand-border); }
#sidebar { background:var(--brand-sidebar); border-color:var(--brand-sidebar-active); }
#sidebar .nav-link { color:var(--brand-sidebar-ink); font-size:13px; min-height:40px; }
#sidebar .nav-link:hover,#sidebar .nav-link[aria-current=page] { background:var(--brand-sidebar-active); color:var(--brand-sidebar-ink); }
#sidebar .nav-section-label { color:var(--brand-sidebar-muted); font-size:12px; letter-spacing:.08em; }
#sidebar > div { border-color:var(--brand-sidebar-active); }
#sidebar .brand-mark { background:var(--brand-primary); color:var(--brand-sidebar-ink); font:500 21px var(--brand-serif); }
.pb-workspace.pb-workspace { --pb-bg:var(--brand-ground); --panel-bg:var(--brand-surface); --panel-bg-elevated:var(--brand-accent-soft); --page-bg:var(--brand-ground); --border:var(--brand-border); --border-hover:var(--brand-accent); --text-primary:var(--brand-ink); --text-secondary:var(--brand-muted); --text-muted:var(--brand-muted); --accent:var(--brand-accent); }
.pb-workspace :is(.pb-hero h1,.pb-section-heading h2,.pb-process-card h3,.pb-review-title) { font-family:var(--brand-serif); }
.pb-workspace.pb-workspace .btn { font-size:13px; min-height:40px; }
.pb-workspace.pb-workspace .btn-primary,.pb-workspace.pb-workspace .pb-brandmark { background:var(--brand-accent); color:var(--brand-on-accent); border-color:var(--brand-accent); }
.pb-workspace.pb-workspace .btn-primary:hover { background:var(--brand-accent-hover); }
.pb-workspace.pb-workspace .pb-field-label { font-size:13px; }
.pb-workspace.pb-workspace .pb-process-card { background:var(--brand-accent-soft); border-color:var(--brand-border); }
.pb-workspace.pb-workspace :is(.pb-process-card li p,.pb-process-foot,.pb-document-drop p,.pb-filetypes,.pb-upload-footer>span,.pb-connect-hint,.pb-section-heading p) { color:var(--brand-muted); font-size:12px; }
/* Container-driven: correct beside the sidebar as well as on a phone. */
/* A scrollable region must be reachable and operable from the keyboard. */
.knowledge-table-wrap:focus-visible { outline:3px solid var(--brand-accent); outline-offset:2px; }
.knowledge-scroll-hint { display:none; font-size:12px; color:var(--brand-muted); margin-top:14px; }
@container knowledge (max-width:640px) {
  .knowledge-scroll-hint { display:block; }
  /* Less to scroll past on a phone: let long filenames wrap instead of
     reserving a wide fixed column. */
  .knowledge-table { min-width:600px; table-layout:auto; }
  .knowledge-table :is(th,td):nth-child(n) { width:auto; }
  .knowledge-table :is(th,td) { padding:12px 14px; }
  .knowledge-table .knowledge-next { min-width:140px; }
}
@container knowledge (max-width:760px) {
  .knowledge-heading,.knowledge-row { align-items:flex-start; flex-wrap:wrap; }
  .knowledge-intro { grid-template-columns:1fr; }
  .knowledge-configuration-grid { grid-template-columns:1fr; }
  .knowledge-card { padding:20px; }
  .knowledge-steps { border-left:0; padding:0; }
}
/* The dialog is fixed-position, so it sizes against itself, not the page. */
@container dialog (max-width:520px) {
  .knowledge-form-grid { grid-template-columns:1fr; }
  .knowledge-dialog-footer { flex-wrap:wrap; }
  .knowledge-dialog-footer .knowledge-button { flex:1 1 auto; }
}
@media(max-width:700px) {
  .knowledge-page { padding:16px 0 40px; }
  .knowledge-dialog { padding:12px; }
  .knowledge-dialog-scroll { max-height:none; }
}
/* No container-query support: fall back to viewport breakpoints. */
@supports not (container-type:inline-size) {
  @media(max-width:1000px) {
    .knowledge-heading,.knowledge-row { align-items:flex-start; flex-wrap:wrap; }
    .knowledge-intro,.knowledge-form-grid { grid-template-columns:1fr; }
    .knowledge-configuration-grid { grid-template-columns:1fr; }
    .knowledge-card { padding:20px; }
    .knowledge-steps { border-left:0; padding:0; }
  }
}
@media(prefers-reduced-motion:reduce) { .knowledge-source { transition:none; } }