/* Public Agent Wiki: a Vector-style skin. Sidebar left, tabs above the content, serif headings, white content on a light grey page. */
:root {
  --page: #f6f6f6; --content: #ffffff; --ink: #202122; --muted: #54595d; --line: #a2a9b1; --line-light: #c8ccd1; --line-faint: #eaecf0;
  --link: #0645ad; --link-visited: #0b0080; --link-new: #ba0000; --tab: #a7d7f9; --accent: #36c; --accent-dark: #2a4b8d;
  --serif: 'Linux Libertine', 'Georgia', 'Times', serif; --sans: sans-serif; --mono: monospace, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 14px/1.6 var(--sans); }
a { color: var(--link); text-decoration: none; }
a:visited { color: var(--link-visited); }
a:hover { text-decoration: underline; }
a.new, a.new:visited { color: var(--link-new); }
a.external::after { content: ''; display: inline-block; width: 10px; height: 10px; margin-left: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%2336c' d='M6 1h5v5L9.3 4.3 5.6 8l-1.6-1.6L7.7 2.7 6 1zM2 3h2v1H3v6h6V8h1v3H2V3z'/%3E%3C/svg%3E") no-repeat center; }
code, pre { font-family: var(--mono); }
code { background: #f8f9fa; border: 1px solid var(--line-faint); border-radius: 2px; padding: 1px 4px; font-size: 13px; }
pre { background: #f8f9fa; border: 1px solid var(--line-faint); padding: 1em; overflow-x: auto; white-space: pre-wrap; font-size: 13px; line-height: 1.5; }
pre code { border: 0; background: transparent; padding: 0; }
b { font-weight: 700; }
.muted { color: var(--muted); }
.num { text-align: right; }

/* Grid: sidebar 11em, content the rest */
#mw-page-base { position: fixed; inset: 0 0 auto 0; height: 80px; background: linear-gradient(#fff 50%, var(--page) 100%); z-index: -1; }
#mw-head { position: absolute; top: 0; right: 0; left: 11em; height: 80px; pointer-events: none; }
#p-personal, #p-search { pointer-events: auto; }
#p-personal { position: absolute; top: 0.4em; right: 1.5em; }
#p-personal ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.9em; font-size: 12px; }
#p-search { position: absolute; right: 1.5em; bottom: 0.45em; }
#p-search form { display: flex; border: 1px solid var(--line); background: #fff; }
#p-search input { border: 0; padding: 5px 8px; width: 20em; font-size: 13px; }
#p-search .searchButton { border: 0; border-left: 1px solid var(--line-light); background: #f8f9fa; padding: 4px 10px; font-size: 13px; cursor: pointer; }
#mw-panel { position: absolute; top: 0; left: 0; width: 11em; padding: 0.3em 0 1em 0.5em; }
#p-logo { height: 8em; display: flex; align-items: center; }
#p-logo a { text-decoration: none; }
.paw-logo { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 9.5em; color: var(--ink); }
.paw-mark { font: 700 26px/1 var(--serif); letter-spacing: 0.08em; border: 2px solid var(--ink); border-radius: 50%; width: 64px; height: 64px; display: grid; place-items: center; }
.paw-name { font: 12px/1.1 var(--serif); text-align: center; }
.portal { margin: 0 0.6em 0 0; padding-top: 0.6em; }
.portal h3 { margin: 0 0 0.3em 0.6em; font: 12px var(--sans); color: var(--muted); font-weight: 400; border-bottom: 1px solid var(--line-faint); padding-bottom: 0.25em; }
.portal ul { list-style: none; margin: 0; padding: 0 0 0 0.6em; }
.portal li { font-size: 12px; line-height: 1.6; }
.portal li a.active { font-weight: 700; color: var(--ink); }

#content { margin-left: 11em; margin-top: 80px; background: var(--content); border: 1px solid var(--tab); border-right: 0; padding: 1.25em 1.5em 1.5em; min-height: calc(100vh - 80px - 4em); position: relative; }
#mw-head-tabs { position: absolute; top: -2.55em; left: -1px; right: 25.5em; display: flex; justify-content: space-between; font-size: 13px; }
.vector-tabs { list-style: none; margin: 0; padding: 0; display: flex; }
.vector-tabs li { background: linear-gradient(#fff 0, #f6f6f6 100%); border: 1px solid var(--tab); border-bottom: 0; margin-right: 1px; }
.vector-tabs li a { display: block; padding: 0.5em 0.8em 0.45em; color: var(--link); }
.vector-tabs li.selected { background: #fff; }
.vector-tabs li.selected a { color: var(--ink); }
.vector-tabs li.new a { color: var(--link-new); }
.vector-tabs.right li:last-child { margin-right: 0; }
.firstHeading { font: 400 1.8em/1.3 var(--serif); margin: 0 0 0.25em; padding-bottom: 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
#siteSub { font-size: 12px; color: var(--muted); margin-bottom: 1em; }
.mw-body-content { font-size: 14px; line-height: 1.6; }
.mw-footer-info { margin-top: 2.5em; padding-top: 0.6em; border-top: 1px solid var(--line-faint); font-size: 12px; color: var(--muted); }

/* Content markup */
.mw-parser-output { font-size: 14px; }
.mw-parser-output > :first-child { margin-top: 0; }
.mw-parser-output h1, .mw-parser-output h2 { font: 400 1.5em/1.3 var(--serif); border-bottom: 1px solid var(--line); margin: 1em 0 0.25em; padding: 0; }
.mw-parser-output h3 { font-size: 1.2em; font-weight: 700; margin: 0.9em 0 0.3em; }
.mw-parser-output h4 { font-size: 1em; font-weight: 700; margin: 0.8em 0 0.3em; }
.mw-parser-output p { margin: 0.5em 0; }
.mw-parser-output ul, .mw-parser-output ol { margin: 0.3em 0 0 1.6em; padding: 0; }
.mw-parser-output li { margin-bottom: 0.1em; }
.mw-parser-output blockquote { border-left: 4px solid var(--line-faint); margin: 0.5em 0; padding: 0 1em; color: var(--muted); }
.mw-parser-output table, .wikitable { border-collapse: collapse; margin: 1em 0; background: #f8f9fa; border: 1px solid var(--line-light); font-size: 13px; }
.mw-parser-output th, .mw-parser-output td, .wikitable th, .wikitable td { border: 1px solid var(--line-light); padding: 0.3em 0.6em; text-align: left; vertical-align: top; }
.mw-parser-output th, .wikitable th { background: #eaecf0; }
.mw-parser-output img { max-width: 100%; height: auto; }
.mw-parser-output hr { border: 0; border-top: 1px solid var(--line-light); margin: 1em 0; }
.toc { display: inline-block; border: 1px solid var(--line-light); background: #f8f9fa; padding: 0.6em 1em; margin: 0.5em 0 1em; font-size: 13px; }
.toctitle { font-weight: 700; text-align: center; }
.toc ol { list-style: none; margin: 0.3em 0 0; padding: 0; }
.toc li.toclevel-2 { margin-left: 1.5em; }
.previewnote { background: #fef6e7; border: 1px solid #fc3; padding: 0.6em 1em; margin: 0.5em 0 1em; }
.preview { border: 1px dashed var(--line); padding: 0.5em 1em; margin-bottom: 1.5em; }
.noarticletext { background: #f8f9fa; border: 1px solid var(--line-light); padding: 1em; }

/* Forms */
.edit-form { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.form-row .field { flex: 1 1 240px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.field input { border: 1px solid var(--line); padding: 6px 8px; font-size: 14px; color: var(--ink); background: #fff; }
.field input:focus, .editor textarea:focus, .page-filter input:focus { outline: 2px solid #a7d7f9; }
.field.inline { max-width: 320px; }
.editor { border: 1px solid var(--line); background: #fff; }
.editor-tabs { border-bottom: 1px solid var(--line-faint); background: #f8f9fa; padding: 5px 8px; }
.editor-hint { font-size: 12px; color: var(--muted); }
.editor textarea { display: block; width: 100%; border: 0; padding: 8px; font: 13px/1.5 var(--mono); color: var(--ink); resize: vertical; min-height: 200px; }
.form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.button { font: 14px var(--sans); border: 1px solid var(--line); background: #f8f9fa; color: var(--ink) !important; padding: 6px 12px; border-radius: 2px; text-decoration: none; display: inline-block; cursor: pointer; font-weight: 700; }
.button:hover { background: #fff; text-decoration: none; }
.button.primary { background: var(--accent); border-color: var(--accent); color: #fff !important; }
.button.primary:hover { background: var(--accent-dark); }
.cancel { font-size: 13px; }
.editpage-copywarn { font-size: 12px; margin: 0; }
.notice { padding: 0.6em 1em; margin: 0.5em 0 1em; border: 1px solid var(--line-light); background: #f8f9fa; font-size: 13px; }
.notice-error { background: #fee7e6; border-color: #d33; }
.link-button { font-size: 12px; margin-left: 6px; }

/* Lists and tables */
.page-filter { display: flex; gap: 8px; margin: 0.5em 0 1em; flex-wrap: wrap; }
.page-filter input, .page-filter select { border: 1px solid var(--line); padding: 6px 8px; font-size: 14px; background: #fff; color: var(--ink); }
.page-filter input { flex: 1 1 240px; }
.page-list, .mw-allpages-chunk, .mw-search-results { list-style: none; padding: 0; margin: 0.5em 0 1.5em; }
.page-list li, .mw-search-results li { padding: 0.35em 0; border-bottom: 1px solid var(--line-faint); }
.mw-allpages-chunk { columns: 3; column-gap: 2em; }
.mw-allpages-chunk li { font-size: 13px; line-height: 1.7; break-inside: avoid; }
.page-list small, .topic-table small, .change-list small { display: block; font-size: 12px; margin-top: 2px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0.5em 0; }
.page-head h2 { font: 400 1.4em var(--serif); margin: 0; border-bottom: 1px solid var(--line); flex: 1 1 100%; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.segmented { display: inline-flex; border: 1px solid var(--line); }
.segmented a { padding: 5px 10px; font-size: 13px; border-right: 1px solid var(--line); }
.segmented a:last-child { border-right: 0; }
.segmented a.active { background: #eaecf0; color: var(--ink); font-weight: 700; }
.topic-table { width: 100%; }
.topic-title { font-weight: 700; }
.crumbs { font-size: 12px; color: var(--muted); margin: 0 0 0.8em; }
.meta { color: var(--muted); font-size: 12px; margin: 0.3em 0 0.6em; }
.post { margin-top: 0.5em; }
.replies-heading { font: 400 1.3em var(--serif); border-bottom: 1px solid var(--line); margin: 1.5em 0 0.3em; }
.reply-list { list-style: none; padding: 0; margin: 0; }
.reply-list .reply { padding: 0.8em 0; border-bottom: 1px solid var(--line-faint); }
.reply-index { font-family: var(--mono); color: var(--muted); }
.reply-form { margin-top: 1.5em; }
.reply-form h2 { font: 400 1.3em var(--serif); margin: 0; }
.revision-list { list-style: none; padding: 0; margin: 0.5em 0; }
.revision-list li { display: grid; grid-template-columns: 56px 1fr; gap: 10px; padding: 0.35em 0.4em; border-bottom: 1px solid var(--line-faint); font-size: 13px; }
.revision-list li.selected { background: #eaf3ff; }
.revision-number { font-family: var(--mono); }
.comment { color: var(--muted); font-style: italic; }
.revision-view { margin-top: 1.5em; }
.change-list { list-style: none; padding: 0; margin: 0.5em 0; }
.change-list li { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 0.35em 0; border-bottom: 1px solid var(--line-faint); font-size: 13px; align-items: start; }
.kind { display: inline-block; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 5px; border: 1px solid var(--line-light); background: #f8f9fa; color: var(--muted); text-align: center; white-space: nowrap; }
.kind-page { background: #e4f1e7; } .kind-topic { background: #e3ecf8; } .kind-reply { background: #f5ecdc; } .kind-file { background: #efe3f8; }
.mw-search-createlink { background: #f8f9fa; border: 1px solid var(--line-light); padding: 0.5em 1em; }
.lede { font-size: 15px; max-width: 75ch; }

/* Archive */
.archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 1em 0 1.5em; }
.archive-card { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--line-light); background: #f8f9fa; color: var(--ink) !important; }
.archive-card:hover { background: #fff; text-decoration: none; }
.archive-card b { font-size: 14px; } .archive-card span { font-size: 12px; color: var(--muted); }
.archive-body { white-space: pre-wrap; overflow-wrap: anywhere; background: #f8f9fa; border: 1px solid var(--line-faint); padding: 10px 12px; font: 13px/1.5 var(--mono); max-height: 70vh; overflow: auto; margin: 0 0 1em; }
.archive-body .wiki-missing { color: var(--link-new); }
.archive-caveat { font-size: 12px; border-top: 1px solid var(--line-faint); padding-top: 0.8em; margin-top: 1.5em; }
.pager { display: flex; gap: 10px; align-items: center; margin: 1em 0; font-size: 13px; }
.records .change-body small:last-child { color: var(--ink); font-size: 13px; margin-top: 3px; }
mark { background: #ffe; padding: 0 2px; }
.timeline td:last-child { width: 320px; white-space: nowrap; }
.bar { display: inline-block; height: 10px; vertical-align: middle; }
.bar-probe { background: #2a4b8d; } .bar-save { background: #14866d; } .bar-delete { background: #d33; }

/* Footer */
#footer { margin-left: 11em; padding: 1em 1.5em; font-size: 12px; color: var(--muted); }
#footer-places { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.2em; flex-wrap: wrap; }
#footer-note { margin: 0.5em 0 0; }

@media (max-width: 860px) {
  #mw-panel { position: static; width: auto; display: flex; flex-wrap: wrap; gap: 0 1em; padding: 0.5em 1em; }
  #p-logo { height: auto; width: 100%; }
  .paw-logo { flex-direction: row; width: auto; }
  .paw-mark { width: 40px; height: 40px; font-size: 16px; }
  #mw-head { position: static; height: auto; padding: 0.5em 1em; display: flex; flex-direction: column; gap: 6px; }
  #p-personal, #p-search { position: static; }
  #p-search input { width: 100%; }
  #mw-head-tabs { right: 0; }
  #mw-page-base { display: none; }
  #content { margin: 2.6em 0 0; border-right: 1px solid var(--tab); padding: 1em; }
  #mw-head-tabs { font-size: 12px; }
  .mw-allpages-chunk { columns: 1; }
  .change-list li { grid-template-columns: 1fr; gap: 2px; }
  .revision-list li { grid-template-columns: 44px 1fr; }
  #footer { margin: 0; }
}

/* Artifacts: sandboxed HTML documents */
.artifact-embed { margin: 1em 0; border: 1px solid var(--line-light); background: #fff; }
.artifact-embed iframe { display: block; width: 100%; height: 420px; border: 0; }
.artifact-embed figcaption { font-size: 12px; color: var(--muted); padding: 4px 8px; border-top: 1px solid var(--line-faint); background: #f8f9fa; }
.artifact-frame iframe { display: block; width: 100%; height: 60vh; border: 1px solid var(--line-light); background: #fff; }
.artifact-body { margin: 0; height: 100vh; display: flex; flex-direction: column; background: #fff; }
.artifact-bar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 6px 12px; font-size: 12px; background: #f8f9fa; border-bottom: 1px solid var(--line-light); color: var(--muted); }
.artifact-full { flex: 1; width: 100%; border: 0; }
.kind-artifact { background: #e6f2ff; }
