/* ------------------------------------------------------------------
   Pedia - knowledge base and engine documentation.

   Entry bodies are author-written HTML, so the rules under .pedia-article
   have to style arbitrary markup and must not fight an author's inline
   styles: everything here is a plain element selector at low specificity,
   which any style="" attribute from the editor overrides.

   default.css restyles bare <button>/<input>, so controls here use
   anchors and explicit classes instead. See the M3 admin notes.
   ------------------------------------------------------------------ */

/* ---------- chrome ---------- */

/* The strip directly under the title bar. Its contents sit inset from the
   core edges and centred in the band, while the columns below stay flush.
   No margin under the rule: the entry begins straight after it. */
.pedia-topbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    /* Even on all four sides: a wider inset here left the crumbs sitting well
       right of the flush columns beneath them. */
    padding: 6px;
    border-bottom: 1px solid var(--line-soft, #383c42);
    margin-bottom: 0;
}

/* The crumb trail is one flex child that wraps internally, not a row of
   loose ones that the parent would stretch apart. */
.pedia-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    font-size: 13px;
}

.pedia-topbar a { text-decoration: none; }
.pedia-crumb-sep { margin: 0 7px; opacity: .5; }
.pedia-crumb-here { font-weight: bold; }

.pedia-editbar { display: flex; gap: 8px; }

.pedia-btn {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid var(--line, #444a52);
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0;
    cursor: pointer;
    white-space: nowrap;
}

.pedia-btn-primary { background: rgba(73, 172, 255, .20); border-color: var(--accent-dim, #2b6ea8); }

/* ---------- layout ---------- */

.pedia-layout { display: flex; gap: 13px; align-items: flex-start; }

/* min-width:0 lets the column shrink below its content, which is what stops
   a wide table or a long word from widening the whole page.
   No panel of its own: #page is already a solid surface. */
.pedia-main {
    flex: 1 1 auto;
    min-width: 0;
    order: 0;
}

/* Left directory. Source order puts the article first so a phone reads the
   entry before the navigation; order pulls this to the left on a desktop. */
.pedia-nav {
    flex: 0 0 180px;
    min-width: 0;
    order: -1;
}

.pedia-aside { flex: 0 0 174px; min-width: 0; order: 1; }

@media (max-width: 1000px) {
    .pedia-layout { flex-direction: column; }
    .pedia-nav,
    .pedia-aside { flex: 1 1 auto; width: 100%; order: 0; }
}

.pedia-title {
    font-size: 30px;
    line-height: 1.2;
    margin: 0 0 16px 0;
    /* small clearance from the rule above, which now sits directly on top */
    padding-top: 4px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--accent-dim, #2b6ea8);
}

.pedia-updated {
    margin-top: 28px;
    padding-top: 10px;
    border-top: 1px solid var(--line-soft, #383c42);
    font-size: 12px;
    opacity: .7;
}

.pedia-missing { padding: 26px 0; }
.pedia-missing p { margin: 0 0 14px 0; }

/* ---------- side panels ---------- */

/* Slightly sunk against the solid core, so the rails read as furniture
   rather than as more article. */
.pedia-side {
    background-color: rgba(0, 0, 0, .22);
    border: 1px solid var(--line-soft, #383c42);
    border-radius: 4px;
    padding: 12px 14px;
    margin-bottom: 13px;
}

.pedia-side h3 {
    margin: 0 0 8px 0;
    font-size: 11px;
    letter-spacing: 0;
    opacity: .75;
}

.pedia-side ul { list-style: none; margin: 0; padding: 0; }
.pedia-side li { margin: 3px 0; font-size: 13px; }
.pedia-toc .toc-h3 { padding-left: 12px; }
.pedia-toc .toc-h4 { padding-left: 24px; opacity: .85; }
.pedia-toc .toc-h5 { padding-left: 34px; opacity: .75; }

/* ---------- left directory ----------
   The content of this column is an ordinary Pedia entry ("Directory"),
   rendered small and tight. It is edited like any other entry, so the site
   navigation is content rather than markup someone has to redeploy. */

.pedia-directory { font-size: 13px; line-height: 1.5; }
.pedia-directory > *:first-child { margin-top: 0; }

.pedia-directory h1,
.pedia-directory h2,
.pedia-directory h3,
.pedia-directory h4 {
    margin: 14px 0 4px 0;
    padding: 0 0 3px 0;
    border: 0;
    color: var(--accent, #49acff);
    font-size: 12px;
    font-weight: 700;
    border-bottom: 1px solid var(--line-soft, #383c42);
}

.pedia-directory ul,
.pedia-directory ol { list-style: none; margin: 0; padding: 0; }
.pedia-directory li { margin: 2px 0; }
.pedia-directory p { margin: .4em 0; }
/* A dense nav list does not want the dotted underline that marks a wiki
   link in running prose. */
.pedia-directory a,
.pedia-directory a.pedia-link { text-decoration: none; border-bottom: 0; }
.pedia-directory a:hover { text-decoration: underline; }
.pedia-directory hr { margin: 10px 0; }

.pedia-directory-empty { font-size: 12px; opacity: .7; line-height: 1.5; }

/* ---------- entry body ---------- */

.pedia-article { line-height: 1.62; overflow-wrap: break-word; }
.pedia-article > *:first-child { margin-top: 0; }

.pedia-article h1,
.pedia-article h2,
.pedia-article h3,
.pedia-article h4,
.pedia-article h5,
.pedia-article h6 {
    line-height: 1.25;
    margin: 1.5em 0 .45em 0;
}

.pedia-article h2 {
    font-size: 22px;
    color: var(--accent, #49acff);
    border-bottom: 1px solid var(--line-soft, #383c42);
    padding-bottom: .2em;
}

.pedia-article h3 { font-size: 18px; }
.pedia-article h4 { font-size: 15px; letter-spacing: .01em; opacity: .9; }
.pedia-article h5 { font-size: 14px; opacity: .9; }

.pedia-article p { margin: .75em 0; }
.pedia-article ul, .pedia-article ol { margin: .7em 0; padding-left: 1.6em; }
.pedia-article li { margin: .2em 0; }

.pedia-article dl { margin: .9em 0; }
.pedia-article dt { font-weight: bold; margin-top: .8em; }
.pedia-article dd { margin: .15em 0 0 1.6em; opacity: .92; }

.pedia-article blockquote {
    margin: 1em 0;
    padding: .5em 1em;
    border-left: 3px solid var(--accent-dim, #2b6ea8);
    opacity: .95;
}

.pedia-article hr { border: 0; border-top: 1px solid var(--line-soft, #383c42); margin: 1.6em 0; }

.pedia-article img { max-width: 100%; height: auto; }
.pedia-article figure { margin: 1.2em 0; }
.pedia-article figcaption { font-size: 12px; opacity: .75; margin-top: .4em; }

/* Wide tables and code scroll inside their own box so the page never
   scrolls sideways on a phone. */
.pedia-article table {
    border-collapse: collapse;
    margin: 1em 0;
    max-width: 100%;
}

.pedia-article th, .pedia-article td {
    border: 1px solid var(--line-soft, #383c42);
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
}

.pedia-article th { background: rgba(73, 172, 255, .18); }

.pedia-article pre {
    overflow-x: auto;
    padding: 12px 14px;
    border: 1px solid var(--line-soft, #383c42);
    border-radius: 4px;
    background: rgba(0, 0, 0, .25);
}

.pedia-article code {
    font-family: Consolas, "Courier New", monospace;
    font-size: .92em;
}

.pedia-article :not(pre) > code {
    padding: .1em .35em;
    border-radius: 3px;
    background: rgba(0, 0, 0, .25);
}

/* ---------- wiki links ---------- */

a.pedia-link { text-decoration: none; border-bottom: 1px dotted currentColor; }

/* An entry that has not been written yet. Dotted-red is the long-standing
   wiki convention for this, and it is what makes gaps visible instead of
   silently dead. */
a.pedia-link-new { color: var(--bad, #e2725b); text-decoration: none; border-bottom: 1px dashed currentColor; }
a.pedia-link-new:after { content: "?"; font-size: .75em; vertical-align: super; opacity: .85; }

/* ---------- index / search / history ---------- */

.pedia-list { width: 100%; border-collapse: collapse; }
.pedia-list td, .pedia-list th { padding: 7px 10px; border-bottom: 1px solid var(--line-soft, #383c42); text-align: left; }
.pedia-list th { font-size: 12px; letter-spacing: .01em; opacity: .75; }
.pedia-list tr:hover td { background: rgba(73, 172, 255, .12); }
.pedia-list .num { text-align: right; font-variant-numeric: tabular-nums; opacity: .8; }

.pedia-group-letter {
    font-size: 18px;
    font-weight: bold;
    color: var(--accent, #49acff);
    margin: 22px 0 6px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line-soft, #383c42);
}

.pedia-snippet { font-size: 13px; opacity: .8; margin-top: 2px; }
.pedia-hit mark { background: rgba(73, 172, 255, .28); color: inherit; padding: 0 2px; }

.pedia-searchbar { display: flex; gap: 8px; margin-bottom: 18px; }
.pedia-searchbar .pedia-input { flex: 1 1 auto; }

/* default.css styles bare inputs with dark blue text and a pale green
   focus background; a class outranks its element selector, and the focus
   rule below outranks input:focus. */
.pedia-input {
    height: 30px;
    padding: 4px 9px;
    background-color: #05090e;
    color: #ffffff;
    border: 1px solid var(--line, #444a52);
    border-radius: 3px;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

.pedia-input:focus {
    background-color: #05090e;
    color: #ffffff;
    border-color: var(--accent, #49acff);
    outline: none;
}

.pedia-input::-webkit-input-placeholder { color: #7d94a3; }
.pedia-input::-moz-placeholder { color: #7d94a3; opacity: 1; }
.pedia-input:-ms-input-placeholder { color: #7d94a3; }
.pedia-input::placeholder { color: #7d94a3; }

.pedia-empty { padding: 30px 0; opacity: .75; }

.pedia-flag {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0;
}

.pedia-flag-deleted { background: rgba(226, 114, 91, .22); color: var(--bad, #e2725b); }
.pedia-flag-empty { background: rgba(240, 168, 56, .2); color: var(--warn, #f0a838); }
.pedia-flag-draft { background: rgba(150, 150, 150, .2); }