/*
 * The Knowledge Base stylesheet for the mpx theme.
 *
 * Written against the kb- class contract. Delivered by the publisher to
 * assets/kb.css on every run, and loaded after the library's own stylesheet so
 * it overrides it.
 */

/*
 * HOW THIS FILE IS BUILT
 *
 * site.css arrives first and carries the whole token system, the faces, the
 * element rules, and the header and footer of the parent site. This file adds
 * only what the library's own markup needs, which is everything between the
 * owner's navigation and the end of the page.
 *
 * Every value comes from a tier two role, the ui prefix, by var(). site.css
 * states that tier two is the only tier a rule may reference, and that a grep
 * for the tier one prefix outside its root block must return nothing. This
 * file holds no tier one reference, so it passes that check the same way
 * site.css does.
 *
 * Every rule is scoped to a kb- class. There is no bare element selector at the
 * top level, so nothing here can reach the owner's header, the owner's
 * navigation, or anything else site.css already owns. An element selector
 * appears only as a descendant of a kb- class, where it styles markup the
 * renderer produced.
 *
 * WHAT THE LIBRARY MARKUP DOES NOT GET FROM site.css
 *
 * site.css puts its page column on .wrap, and main.kb-main does not carry that
 * class. So the column, the side gutter, and the vertical rhythm of the page
 * are absent and are supplied here. The descendant rule main h1, main p and so
 * on does reach into kb-main, so the prose is already held to ui-measure. What
 * it is not is centred, and without a column it sits against the left edge of
 * the viewport.
 *
 * The footer is the same story. site.css builds its band on .site-footer with
 * an inner .wrap, and kb-footer has neither, so it arrives as three ordinary
 * paragraphs.
 *
 * The renderer and the markup are the contract. Nothing here asks for a class
 * or an element that the shapes do not already produce.
 */


/* ------------------------------------------------------------------------
   1. The page column
   The reference page is main.wrap: ui-width-site wide, centred, with a
   ui-space-5 side gutter, ui-space-7 above and ui-space-8 below. kb-main is
   given the same geometry so a library page and a parent site page put their
   first line in the same place.

   The column sits under the owner's navigation, which is the parent site's
   own full width header and is not touched here.
   ------------------------------------------------------------------------ */

.kb-main {
    max-width: var(--ui-width-site);
    margin: 0 auto;
    padding: var(--ui-space-7) var(--ui-space-5) var(--ui-space-8);
}

/* Nothing inside the column may push past it. A card image, a preformatted
   block, and a bare address are the three things long enough to try. */
.kb-body img,
.kb-body pre,
.kb-body table {
    max-width: 100%;
}

.kb-body pre {
    overflow-x: auto;
}


/* ------------------------------------------------------------------------
   2. The title block
   h1 is site.css's, unchanged. What follows it here is the deck line and the
   metadata, and neither may read as the first paragraph of the article.

   kb-question is the question the page answers. It takes the title's colour
   and weight one step down in size, so it reads as apparatus belonging to the
   heading rather than as prose.

   kb-headline is the hub's thesis and kb-description is the source's, and each
   is the lead of the page it sits on, so both take the lead treatment in
   section 3 rather than this one.
   ------------------------------------------------------------------------ */

.kb-question {
    max-width: var(--ui-measure);
    margin: 0 0 var(--ui-space-4);
    color: var(--ui-fg);
    font-size: var(--ui-size-5);
    font-weight: 600;
    line-height: var(--ui-leading-heading);
}

/* The metadata layer. Mono, which is the voice site.css gives its own footer
   and its own table headers.

   The byline and the role line sit at size-2 because they carry the credit,
   which is the one piece of this layer a reader is meant to take in. kb-dates
   stays at size-1 as the label under them.

   kb-credit-line is not uppercased. MPX 1.3.3 reserves uppercase mono for
   headers, labels, codes, counts, and timestamps, and a person's name is none
   of those. site.css makes the same call for its footer links and says so.

   kb-dates is uppercased, because a date is a timestamp and a timestamp is on
   that list. */
.kb-credit-line,
.kb-author-role {
    max-width: var(--ui-measure);
    margin: 0 0 var(--ui-space-2);
    color: var(--ui-fg-soft);
    font-family: var(--ui-font-mono);
    font-size: var(--ui-size-2);
    line-height: var(--ui-leading-tight);
}

.kb-author-role {
    margin-bottom: var(--ui-space-6);
}

.kb-dates {
    max-width: var(--ui-measure);
    margin: 0 0 var(--ui-space-6);
    color: var(--ui-fg-soft);
    font-family: var(--ui-font-mono);
    font-size: var(--ui-size-1);
    font-weight: 600;
    letter-spacing: var(--ui-tracking-mono);
    line-height: var(--ui-leading-tight);
    text-transform: uppercase;
}

/* The two stamps are separate lines in the source and collapse to one space.
   A space is not a separation at this size. */
.kb-dates .kb-date-modified {
    margin-left: var(--ui-space-4);
}

/* A link in the metadata layer is ink and underlines on hover. site.css makes
   this argument for its Factor index: a list of rows whose text is gold is not
   a set of links, it is a gold field with gaps in it. A credit line of four
   gold names under a title is the same picture. */
.kb-credit-line a {
    color: var(--ui-fg-soft);
    text-decoration: none;
}

.kb-credit-line a:hover {
    color: var(--ui-action-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ------------------------------------------------------------------------
   3. The lead
   The reference page sets its lead with main > .factor-summary: ui-size-5,
   leading-body, ui-fg-soft, and ui-space-6 beneath. The article takeaway takes
   exactly that, so it reads as the lead and not as the first body paragraph.

   The hub headline and the source description are the lead of their own pages
   and take the same treatment. Neither page carries a takeaway, and a page
   whose first line after the title is ordinary prose has no lead at all.
   ------------------------------------------------------------------------ */

.kb-takeaway,
.kb-headline,
.kb-description {
    max-width: var(--ui-measure);
    margin: 0 0 var(--ui-space-6);
    color: var(--ui-fg-soft);
    font-size: var(--ui-size-5);
    line-height: var(--ui-leading-body);
}

/* The takeaway is a div holding one paragraph. The paragraph carries site.css's
   own margin, which would add a second gap under the lead. */
.kb-takeaway p {
    max-width: var(--ui-measure);
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}


/* ------------------------------------------------------------------------
   4. Body prose
   site.css already styles every element a cleaned body can hold, and the
   descendant rule under main already holds the prose to ui-measure. What is
   left is the three elements the renderer's whitelist admits that the parent
   site has no rule for, and the bio, which is prose by another name.
   ------------------------------------------------------------------------ */

.kb-body,
.kb-bio {
    max-width: var(--ui-measure);
}

.kb-body blockquote {
    max-width: var(--ui-measure);
    margin: 0 0 var(--ui-space-4);
    padding-left: var(--ui-space-5);
    border-left: 2px solid var(--ui-line);
    color: var(--ui-fg-soft);
}

.kb-body code {
    font-family: var(--ui-font-mono);
    font-size: var(--ui-size-2);
}

.kb-body pre {
    margin: 0 0 var(--ui-space-4);
    padding: var(--ui-space-4);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-bg-sunken);
}

/* A block inside a block does not take the step down twice. */
.kb-body pre code {
    font-size: inherit;
}

/* The address a source links out to is not prose. It is an address, so it
   takes the mono layer, and it is allowed to break because a long one at phone
   width is the one thing on these pages that can force a sideways scroll. */
.kb-link-out {
    max-width: var(--ui-measure);
    margin: 0 0 var(--ui-space-4);
    font-family: var(--ui-font-mono);
    font-size: var(--ui-size-1);
    overflow-wrap: anywhere;
}


/* ------------------------------------------------------------------------
   5. The call to action
   Not live on any page today. The renderer emits it on the article shape while
   the library's flag is set.

   It reads as a distinct block after the body, in the shape site.css gives its
   form notice: a four pixel ui-brand edge on a ui-action-wash field. That is
   gold as brand furniture rather than gold as an action, which leaves the one
   gold action in the view to the button inside it.

   kb-cta-action carries no ranked class, so the rank one treatment and the
   large size modifier are restated here from section 10 of site.css, role for
   role. The focus ring is the same replacement site.css uses, because the
   global gold ring sits on a gold fill and separates from nothing.
   ------------------------------------------------------------------------ */

.kb-cta {
    max-width: var(--ui-measure);
    margin: var(--ui-space-7) 0 0;
    padding: var(--ui-space-5) var(--ui-space-6);
    border-left: 4px solid var(--ui-brand);
    border-radius: var(--ui-radius-md);
    background: var(--ui-action-wash);
}

.kb-cta h2 {
    margin-top: 0;
    margin-bottom: var(--ui-space-2);
    font-size: var(--ui-size-5);
}

.kb-cta p {
    max-width: var(--ui-measure);
    margin: 0 0 var(--ui-space-4);
}

.kb-cta p:last-child {
    margin-bottom: 0;
}

.kb-cta-action {
    display: inline-block;
    padding: var(--ui-space-3) var(--ui-space-6);
    border: 1px solid transparent;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-action);
    color: var(--ui-fg-on-action);
    font-size: var(--ui-size-4);
    font-weight: 600;
    line-height: var(--ui-leading-tight);
    text-decoration: none;
}

.kb-cta-action:hover {
    background: var(--ui-action-hover);
    color: var(--ui-fg-on-action);
}

.kb-cta-action:focus-visible {
    outline: 2px solid var(--ui-fg-on-action);
    outline-offset: 2px;
}


/* ------------------------------------------------------------------------
   6. Credit
   The closing attribution. It separates from the body the way the reference
   page separates How to Complete It: ui-space-8 above, a ui-line rule, and
   ui-space-6 of air under the rule, with the heading's own top margin removed
   so the rule and the heading do not drift apart.

   The heading is the label layer rather than an h2. Credit is a header, which
   is on the list uppercase mono is reserved for, and an h2 here would read as
   one more section of the article rather than as the end of it.

   Neither list carries a bullet. These are two short attributions, not an
   enumeration, and site.css takes the same list-style off its own Factor list
   for the same reason.
   ------------------------------------------------------------------------ */

.kb-credit {
    max-width: var(--ui-measure);
    margin-top: var(--ui-space-8);
    padding-top: var(--ui-space-6);
    border-top: 1px solid var(--ui-line);
}

.kb-credit h2 {
    margin-top: 0;
    margin-bottom: var(--ui-space-4);
    color: var(--ui-fg-soft);
    font-family: var(--ui-font-mono);
    font-size: var(--ui-size-1);
    font-weight: 600;
    letter-spacing: var(--ui-tracking-mono);
    line-height: var(--ui-leading-tight);
    text-transform: uppercase;
}

.kb-credit ul {
    max-width: var(--ui-measure);
    margin: 0 0 var(--ui-space-4);
    padding-left: 0;
    list-style: none;
}

.kb-credit ul:last-child {
    margin-bottom: 0;
}

.kb-credit li {
    margin: 0 0 var(--ui-space-2);
}

.kb-credit li:last-child {
    margin-bottom: 0;
}

/* The name links into the library and keeps the prose link treatment. The
   citation links out to the work itself and is an address, so it takes the
   mono layer and steps back, which lets the two read as one item rather than
   as two competing links. */
.kb-citation {
    color: var(--ui-fg-soft);
    font-family: var(--ui-font-mono);
    font-size: var(--ui-size-1);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.kb-citation:hover {
    color: var(--ui-action-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ------------------------------------------------------------------------
   7. The way back to the hub
   The last thing on an article, and the one element on these pages that is
   navigation rather than content. It stands clear of the credit block above it
   and of the footer band below it, so it is not read as part of either.

   The arrow is generated rather than authored. The renderer emits the hub's
   name and nothing else, and a bare name at the foot of an article does not
   say what it is for.
   ------------------------------------------------------------------------ */

.kb-hub-link {
    max-width: var(--ui-measure);
    margin: var(--ui-space-7) 0 var(--ui-space-8);
    font-family: var(--ui-font-mono);
    font-size: var(--ui-size-2);
    line-height: var(--ui-leading-tight);
}

.kb-hub-link a {
    color: var(--ui-fg-soft);
    text-decoration: none;
}

.kb-hub-link a::before {
    content: "\2190\00a0";
}

.kb-hub-link a:hover {
    color: var(--ui-action-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ------------------------------------------------------------------------
   8. The roll up
   The list of articles on a hub, a source, an author, and the home page.

   No bullet. Each entry is a title, a summary, and an attribution, and a
   bullet in front of a three line block marks the first line rather than the
   block.

   Each entry is one unit, held together by its own padding and closed by a
   ui-line-soft rule. site.css uses that lighter rule for its own list rows and
   says why: a panel edge on every row makes a list of thirty-seven read as
   thirty-seven boxes.

   The title is ink and underlines on hover, for the reason given in section 2.
   The attribution is the metadata layer and stays quiet, because the source
   belongs to the article and is not the thing being chosen.
   ------------------------------------------------------------------------ */

.kb-rollup {
    max-width: var(--ui-measure);
    margin: var(--ui-space-7) 0 0;
    padding-left: 0;
    list-style: none;
}

.kb-rollup-item {
    margin: 0;
    padding: var(--ui-space-5) 0;
    border-bottom: 1px solid var(--ui-line-soft);
}

.kb-rollup-title {
    margin: 0 0 var(--ui-space-2);
    font-size: var(--ui-size-4);
    line-height: var(--ui-leading-tight);
}

.kb-rollup-title a {
    color: var(--ui-fg);
    text-decoration: none;
}

.kb-rollup-title a:hover {
    color: var(--ui-fg);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.kb-rollup-summary {
    max-width: var(--ui-measure);
    margin: 0 0 var(--ui-space-2);
    color: var(--ui-fg-soft);
}

.kb-rollup-source {
    max-width: var(--ui-measure);
    margin: 0;
    color: var(--ui-fg-soft);
    font-family: var(--ui-font-mono);
    font-size: var(--ui-size-1);
    line-height: var(--ui-leading-tight);
}

.kb-rollup-source a {
    color: var(--ui-fg-soft);
    text-decoration: none;
}

.kb-rollup-source a:hover {
    color: var(--ui-action-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ------------------------------------------------------------------------
   9. The home page lists
   One section per hub, each holding a roll up. The hub name is the way in, so
   it is ink like every other list title rather than a gold heading.
   ------------------------------------------------------------------------ */

.kb-lists {
    margin-top: var(--ui-space-7);
}

.kb-list {
    margin: 0 0 var(--ui-space-7);
}

.kb-list h2 {
    margin-top: 0;
    margin-bottom: 0;
}

.kb-list h2 a {
    color: var(--ui-fg);
    text-decoration: none;
}

.kb-list h2 a:hover {
    color: var(--ui-fg);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The section heading already carries the separation. */
.kb-list .kb-rollup {
    margin-top: var(--ui-space-4);
}


/* ------------------------------------------------------------------------
   10. The footer band
   The band that ends the page, in the shape site.css gives .site-footer:
   ui-space-8 clear of the content, a ui-line-on-dark rule on top, a
   ui-bg-inverse field, and the mono label layer at size-1 in ui-fg-on-dark.

   kb-footer carries no inner wrapper, so the band and the column are the same
   element. The horizontal padding is the gutter until the viewport passes
   ui-width-site, and the centring half of the difference after that. The field
   stays full width either way, which is what makes it a band rather than a box.

   The publisher name is pushed right, where the parent site puts its footer
   navigation, so the two footers read as one shape.
   ------------------------------------------------------------------------ */

.kb-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-4);
    margin-top: var(--ui-space-8);
    padding-top: var(--ui-space-4);
    padding-bottom: var(--ui-space-4);
    padding-left: max(var(--ui-space-5), calc((100% - var(--ui-width-site)) / 2));
    padding-right: max(var(--ui-space-5), calc((100% - var(--ui-width-site)) / 2));
    border-top: 1px solid var(--ui-line-on-dark);
    background: var(--ui-bg-inverse);
    color: var(--ui-fg-on-dark);
    font-family: var(--ui-font-mono);
    font-size: var(--ui-size-1);
    line-height: var(--ui-leading-tight);
}

.kb-footer-title,
.kb-footer-tagline,
.kb-footer-publisher {
    max-width: none;
    margin: 0;
}

.kb-footer-title {
    font-weight: 600;
}

.kb-footer-publisher {
    margin-left: auto;
}


/* ------------------------------------------------------------------------
   11. The renderer's own header
   Emitted only where the library authors no navigation of its own. No live
   library does, so nothing below renders today. It is written because a
   library that clears nav_markup would otherwise drop an unstyled logo at the
   top of every page, and the fallback existing without a treatment is how that
   happens.

   The owner's authored navigation is not reached by any of this. It carries
   the parent site's own classes and belongs to site.css.
   ------------------------------------------------------------------------ */

.kb-header {
    padding-top: var(--ui-space-2);
    padding-bottom: var(--ui-space-2);
    padding-left: max(var(--ui-space-5), calc((100% - var(--ui-width-site)) / 2));
    padding-right: max(var(--ui-space-5), calc((100% - var(--ui-width-site)) / 2));
    background: var(--ui-bg-inverse);
}

.kb-logo {
    display: inline-flex;
    align-items: center;
    min-height: var(--ui-height-header);
    text-decoration: none;
}

.kb-logo img {
    display: block;
    width: auto;
    height: var(--ui-mark-header);
}


/* ------------------------------------------------------------------------
   12. Narrow screens
   The gutter steps down to ui-space-4, which is sixteen pixels. site.css holds
   its own gutter at ui-space-5 on every width and has no narrow override, so
   this is the one place the two files differ on purpose.

   The breakpoint is the one site.css already uses, where h1 steps down and the
   parent header stacks. A second breakpoint would put the library's layout and
   the parent's header on different clocks.

   The footer keeps its band. Only the gutter moves, and the publisher name
   drops its push to the right once the three lines wrap.
   ------------------------------------------------------------------------ */

@media (max-width: 45rem) {

    .kb-main {
        padding-left: var(--ui-space-4);
        padding-right: var(--ui-space-4);
    }

    .kb-footer,
    .kb-header {
        padding-left: var(--ui-space-4);
        padding-right: var(--ui-space-4);
    }

    .kb-footer-publisher {
        margin-left: 0;
    }
}