/*----------------------------------------------------------------------------*/
/* Section */

body > article {

    section {
        break-inside: avoid;
        break-before: auto;
        orphans: 3;
    }

}


/*----------------------------------------------------------------------------*/
/* Link */

a { 

    background-color: transparent;
    color: var(--accent);
    text-decoration: none;

    transition:
        background-color var(--transition-time),
        color            var(--transition-time),
        box-shadow       var(--transition-time),
        text-decoration  var(--transition-time);

    &:hover {
        background-color: transparent;
        color: var(--accent);
        text-decoration: underline;
    }

    &:focus {
        background-color: var(--foreground);
        color: var(--background);
        box-shadow: 0 0 1px var(--accent);
        border:  none;
        outline: none;
    }

    &:active {
        background-color: var(--foreground);
        color: var(--background);
    }

}


/*----------------------------------------------------------------------------*/
/* List */

ul, ol {

    list-style: none;
    padding: 0;

    font-family: var(--font-family-sans);
    line-height: 1.75rem;

}

ul ::marker { content: "-   "; }
ol ::marker { content: counter(list-item) ".  "; }


/*----------------------------------------------------------------------------*/
/* Checklist */

.checklist {

    input[type="checkbox"] {
        margin-inline-end: 8px;
    }

}


/*----------------------------------------------------------------------------*/
/* Defined List */

dl {

    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;

    font-family: var(--font-family-sans);

    div {

        display: contents;

        line-height: 2rem;

    }

    dt {

        grid-column: 1;
        border-inline-end: dashed 1px var(--border-subtle-01);
        padding-inline-end: 16px;

        font-weight: 500;

    }

    dd {

        grid-column: 2;
        padding-inline: 16px;
        margin: 0;

    }

}

/*----------------------------------------------------------------------------*/
/* Table */

table {

    width: 100%;
    table-layout: auto;

    border-collapse: collapse;

    font-family: var(--font-family-sans);
    line-height: 2rem;

    tr {
        box-sizing: border-box;
        display: block;
    }

    td, th {
        box-sizing: border-box;
        min-width: 120px;

        border: solid 1px var(--foreground);
        border-block-start: none;
        padding-inline: 1ch;
    }

    th {
        background-color: var(--foreground);
        border-color: var(--foreground);
        color: var(--background);

        &::selection { background-color: var(--background); color: var(--foreground); }
    }

    tbody {
        tr:nth-child(odd) { td { background-color: var(--background-dim); } }
    }

}


/*----------------------------------------------------------------------------*/
/* Code block */

pre > code {

    background-color: var(--foreground);
    color: var(--background);
    border: solid 1px var(--foreground);

    display: block;
    box-sizing: border-box;
    padding: 16px;

    &::selection {
        color: var(--foreground);
        background-color: var(--background);
    }

}


/*----------------------------------------------------------------------------*/
/* blockqoute */

blockquote {

    margin-inline: 0;
    padding-block: 1rlh;
    padding-inline: 2ch;

    background-color: var(--background-dim);
    border-inline-start: solid 2px var(--foreground);

    cite {
        margin-block-start: 1rlh;
        display: block;
    }

}