/* Knowledge base articles, as help.php shows them. An article is plain HTML saved in KB.BODY,
   so everything it needs to look right is set here against the bare tags: the article only
   has to say h2, p, table and so on. Scoped to #kbarticle, which also outranks Bulma's
   .content rules underneath. Every colour is a scheme token, so it follows the scheme:
   --gen-accent-hi is the teal, --gen-warm the orange beside it. */

/* The article's title, the page's h1, between the panel's bar and the article. */
#kbtitle {
    margin: 0;
    padding: 1.75rem 2rem 0;
    color: var(--gen-hi);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
}
#kbtitle::after {
    content: '';
    display: block;
    width: 5rem;
    height: 4px;
    margin-top: .8rem;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gen-accent-hi), var(--gen-warm));
}

#kbarticle {
    padding: 1.5rem 2rem 2.25rem;
    color: var(--gen-soft);
    font-size: 1rem;
    line-height: 1.7;
}
#kbarticle > :first-child { margin-top: 0; }
#kbarticle > :last-child { margin-bottom: 0; }

/* Headings. h2 is a section, h3 a part of one, h4 and below lesser still. */
#kbarticle :is(h1, h2, h3, h4, h5, h6) {
    color: var(--gen-hi);
    font-weight: 600;
    line-height: 1.3;
    margin: 2rem 0 .75rem;
}
#kbarticle h1 { font-size: 1.75rem; font-weight: 700; }
#kbarticle h2 {
    font-size: 1.5rem;
    margin-top: 2.75rem;
    padding-bottom: .45rem;
    background: linear-gradient(90deg, var(--gen-accent-hi), var(--gen-warm) 35%, var(--gen-edge) 65%) left bottom / 100% 2px no-repeat;
}
#kbarticle h3 {
    font-size: 1.2rem;
    color: var(--gen-accent-hi);
    padding-left: .7rem;
    border-left: 3px solid var(--gen-warm);
}
#kbarticle h4 { font-size: 1.05rem; color: var(--gen-warm); margin-top: 1.5rem; }
#kbarticle h5,
#kbarticle h6 {
    font-size: .8rem;
    color: var(--gen-dim);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 1.5rem;
}
/* A heading straight after another needs no gap of its own. */
#kbarticle :is(h1, h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6) { margin-top: .75rem; }

#kbarticle p { margin: 0 0 1.1rem; }
#kbarticle strong,
#kbarticle b { color: var(--gen-hi); font-weight: 600; }
#kbarticle em { color: var(--gen-ink); }
#kbarticle small { font-size: .85em; color: var(--gen-dim); }
#kbarticle mark { background: color-mix(in srgb, var(--gen-warm) 30%, transparent); color: var(--gen-hi); padding: 0 .15em; border-radius: 2px; }

#kbarticle a {
    color: var(--gen-accent-hi);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--gen-accent-hi) 40%, transparent);
    text-underline-offset: .2em;
}
#kbarticle a:hover { color: var(--gen-warm); text-decoration-color: currentColor; }

/* Lists. Drawn bullets rather than the font's, so they can be larger and coloured: a teal
   dot with a halo, a hollow orange ring a level down, and numbers in an orange disc. */
#kbarticle :is(ul, ol) { margin: 0 0 1.25rem; padding: 0; list-style: none; }
#kbarticle li { position: relative; margin: 0 0 .55rem; padding-left: 1.9rem; }
#kbarticle ul > li::before {
    content: '';
    position: absolute;
    left: .35rem;
    top: .58em;
    width: .6em;
    height: .6em;
    border-radius: 50%;
    background: var(--gen-accent-hi);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gen-accent-hi) 22%, transparent);
}
#kbarticle ul ul > li::before {
    background: transparent;
    border: 2px solid var(--gen-warm);
    box-shadow: none;
}
#kbarticle ol { counter-reset: kb; }
#kbarticle ol > li { counter-increment: kb; }
#kbarticle ol > li::before {
    content: counter(kb);
    position: absolute;
    left: 0;
    top: .2em;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--gen-warm);
    color: var(--gen-accent-ink);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.4rem;
    text-align: center;
    box-shadow: 0 2px 4px color-mix(in srgb, var(--gen-shade) 45%, transparent);
}
#kbarticle li > :is(ul, ol) { margin: .55rem 0 0; }
#kbarticle li > p { margin-bottom: .5rem; }

#kbarticle dl { margin: 0 0 1.25rem; }
#kbarticle dt { color: var(--gen-hi); font-weight: 600; margin-top: .8rem; }
#kbarticle dd { margin: .2rem 0 0 1.25rem; padding-left: .8rem; border-left: 2px solid var(--gen-edge); }

/* Code. Inline in a chip, lawngreen on grey; blocks as a terminal, sunk into the page. */
#kbarticle code,
#kbarticle kbd,
#kbarticle samp { font-family: var(--bulma-family-code); font-size: .85em; font-weight: 400; }
#kbarticle code {
    color: var(--bulma-code);
    background: var(--gen-panel-2);
    border: 1px solid var(--gen-edge);
    border-radius: 4px;
    padding: .1em .4em;
    white-space: break-spaces;
}
#kbarticle kbd {
    color: var(--gen-hi);
    background: linear-gradient(180deg, var(--gen-panel), var(--gen-panel-2));
    border: 1px solid var(--gen-edge-2);
    border-radius: 4px;
    box-shadow: 0 2px 0 var(--gen-edge-2);
    padding: .05em .45em;
}
#kbarticle .gen-kbcode { position: relative; margin: 0 0 1.4rem; }
#kbarticle pre {
    font-family: var(--bulma-family-code);
    font-size: .85rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--bulma-code);
    background: var(--gen-page);
    border: 1px solid var(--gen-edge);
    border-left: 3px solid var(--gen-accent-hi);
    border-radius: 6px;
    box-shadow: inset 0 2px 8px color-mix(in srgb, var(--gen-shade) 50%, transparent);
    padding: .9rem 1.2rem;
    margin: 0 0 1.4rem;
    overflow-x: auto;
    white-space: pre;
}
#kbarticle .gen-kbcode > pre { margin: 0; padding-right: 5.5rem; }
#kbarticle pre code {
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
    white-space: inherit;
}
/* The Copy button, faint until the block is pointed at, and always there on a touch screen. */
#kbarticle .gen-kbcopy {
    position: absolute;
    top: .5rem;
    right: .5rem;
    font: 600 .7rem/1 var(--bulma-family-primary);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gen-dim);
    background: var(--gen-panel);
    border: 1px solid var(--gen-edge-2);
    border-radius: 4px;
    padding: .4rem .6rem;
    cursor: pointer;
    opacity: .7;
    transition: opacity .15s, color .15s, background .15s, border-color .15s;
}
#kbarticle .gen-kbcode:hover .gen-kbcopy,
#kbarticle .gen-kbcopy:focus-visible { opacity: 1; }
#kbarticle .gen-kbcopy:hover { color: var(--gen-accent-ink); background: var(--gen-accent-hi); border-color: var(--gen-accent-hi); }
@media (hover: none) { #kbarticle .gen-kbcopy { opacity: 1; } }

/* Tables. Raised off the page with a shadow and a lit top edge, a solid teal header with an
   orange rule under it, and banded rows. Articles write the header as a row of th with no
   thead, so th is styled wherever it is. The first column, usually the name of the thing, is
   set a shade stronger. */
#kbarticle table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--gen-edge-2);
    border-radius: 8px;
    overflow: hidden;
    margin: .5rem 0 1.75rem;
    font-size: .925rem;
    line-height: 1.55;
    background: var(--gen-panel-2);
    box-shadow:
        0 10px 24px -6px color-mix(in srgb, var(--gen-shade) 60%, transparent),
        0 2px 4px color-mix(in srgb, var(--gen-shade) 40%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--gen-tint) 8%, transparent);
}
#kbarticle :is(th, td) {
    text-align: left;
    vertical-align: top;
    padding: .7rem .95rem;
    border: 0;
    border-bottom: 1px solid var(--gen-edge);
}
#kbarticle :is(th, td) + :is(th, td) { border-left: 1px solid color-mix(in srgb, var(--gen-edge) 60%, transparent); }
#kbarticle th {
    color: var(--gen-accent-ink);
    background: linear-gradient(180deg, color-mix(in srgb, var(--gen-accent) 80%, #fff), color-mix(in srgb, var(--gen-accent) 90%, #000));
    border-bottom: 2px solid var(--gen-warm);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    white-space: nowrap;
}
#kbarticle th + th { border-left-color: color-mix(in srgb, var(--gen-accent-ink) 15%, transparent); }
#kbarticle td { color: var(--gen-ink); }
#kbarticle tr:nth-child(even) > td { background: color-mix(in srgb, var(--gen-tint) 3%, transparent); }
#kbarticle tr:hover > td { background: color-mix(in srgb, var(--gen-accent-hi) 9%, transparent); }
#kbarticle td:first-child { color: var(--gen-hi); font-weight: 600; }
#kbarticle tr:last-child > td { border-bottom: 0; }
#kbarticle td :is(p, ul, ol):last-child { margin-bottom: 0; }
#kbarticle caption { caption-side: bottom; text-align: left; font-size: .8rem; color: var(--gen-dim); padding: .5rem .2rem 0; }

#kbarticle hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gen-edge-2) 20%, var(--gen-edge-2) 80%, transparent);
    margin: 2.25rem 0;
}

/* A blockquote is a note: something to stop and read, set apart in the help colours. */
#kbarticle blockquote {
    color: var(--gen-ink);
    background: var(--gen-info-bg);
    border: 1px solid var(--gen-info-edge);
    border-left: 4px solid var(--gen-info);
    border-radius: 6px;
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--gen-shade) 50%, transparent);
    padding: .9rem 1.1rem;
    margin: 0 0 1.4rem;
}
#kbarticle blockquote > :last-child { margin-bottom: 0; }

#kbarticle img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--gen-edge);
    border-radius: 6px;
    box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--gen-shade) 55%, transparent);
}
#kbarticle figure { margin: 0 0 1.4rem; }
#kbarticle figcaption { font-size: .8rem; color: var(--gen-dim); margin-top: .5rem; }

#kbarticle details {
    background: var(--gen-panel-2);
    border: 1px solid var(--gen-edge);
    border-radius: 6px;
    padding: .7rem 1rem;
    margin: 0 0 1.4rem;
}
#kbarticle summary { color: var(--gen-accent-hi); font-weight: 600; cursor: pointer; }
#kbarticle details[open] > summary { margin-bottom: .7rem; }

/* An article pulled into another with [[SUBJECT]] reads as part of it, not as a box. */
#kbarticle .gen-kbinclude > :last-child { margin-bottom: 0; }

/* The search: the box takes the room, the two filters and the button sit beside it. */
.gen-kbform {
    display: grid;
    grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: .9rem;
    align-items: end;
}
.gen-kbform .field { margin: 0; }

/* A result: the title, where it sits, the section that matched, and the words in context. */
#kblist .gen-kbrow { padding: .85rem 1.1rem; transition: background .12s; }
#kblist .gen-kbrow:hover { background: color-mix(in srgb, var(--gen-accent-hi) 7%, var(--gen-panel-2)); }
#kblist .gen-kbrowtitle { display: block; color: var(--gen-hi); font-size: 1.05rem; font-weight: 600; }
#kblist .gen-kbrow:hover .gen-kbrowtitle { color: var(--gen-accent-hi); }
#kblist .gen-kbsection {
    display: inline-block;
    margin-top: .35rem;
    padding: .05rem .5rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--gen-warm);
    border: 1px solid color-mix(in srgb, var(--gen-warm) 45%, transparent);
    border-radius: 999px;
}
#kblist .gen-kbsnip { margin-top: .35rem; color: var(--gen-soft); font-size: .88rem; line-height: 1.55; }
#kblist mark { background: color-mix(in srgb, var(--gen-warm) 28%, transparent); color: var(--gen-hi); padding: 0 .1em; border-radius: 2px; }

/* The written answer, marked out as the machine's with a teal to orange edge along the top. */
.gen-kbanswer { border-top: 0; overflow: hidden; }
.gen-kbanswer::before { content: ''; display: block; height: 3px; background: linear-gradient(90deg, var(--gen-accent-hi), var(--gen-warm)); }
.gen-kbanswer .gen-panel-head .icon { color: var(--gen-warm); font-size: 1.1rem; }

/* Answer and Articles are the headings of what follows, so they stand clear of the text under them. */
#kbanswer .gen-panel-title,
#kbresults .gen-panel-title { font-size: 1.3rem; color: var(--gen-hi); }
#kbanswerbody { color: var(--gen-ink); line-height: 1.65; padding: 1.1rem 1.4rem; }
#kbanswerbody p { margin: 0 0 .8rem; }
#kbanswerbody ul { margin: 0 0 .8rem; padding-left: 1.3rem; list-style: disc; }
#kbanswerbody li { margin-bottom: .3rem; }
#kbanswerbody li::marker { color: var(--gen-accent-hi); }
#kbanswerbody strong { color: var(--gen-hi); font-weight: 600; }
#kbanswerbody code {
    font-family: var(--bulma-family-code);
    font-size: .85em;
    color: var(--bulma-code);
    background: var(--gen-panel-2);
    border: 1px solid var(--gen-edge);
    border-radius: 4px;
    padding: .1em .4em;
}
#kbanswerbody .gen-kbfrom { margin: 1.1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--gen-edge); font-size: 1rem; color: var(--gen-soft); }
#kbanswerbody .gen-kbfrom a { color: var(--gen-accent-hi); font-weight: 600; }
#kbanswerbody .gen-kbfrom a:hover { color: var(--gen-warm); }
#kbanswerbody > :last-child { margin-bottom: 0; }

/* On a phone: less padding, and a wide table scrolls sideways inside its own box. */
@media (max-width: 768px) {
    .gen-kbform { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .gen-kbform .gen-kbq,
    .gen-kbform .field:last-child { grid-column: 1 / -1; }
    .gen-kbform .button { width: 100%; }
    #kbtitle { padding: 1.25rem 1rem 0; font-size: 1.5rem; }
    #kbarticle { padding: 1.1rem 1rem 1.5rem; font-size: .95rem; }
    #kbarticle table { display: block; overflow-x: auto; }
    #kbarticle th { white-space: normal; }
}