/**
 * Global base styles for the Yarrharr UI.
 */
:root {
    /* Column width whenever a narrow layout is desired. */
    --layout-max-width: 50rem;

    --background-color: white;
    --text-color: black;
    --quiet-text-color: #2f2f2f;
    --footer-background-color: #fafafa;
    --foter-text-color: #141414;

    --border-color: #ddd;
    --icon-color: #666;
    --icon-color-off: var(--border-color);

    --heart-color: #c92ccc;
    --check-color: #39cc5c;
    --selected-color: hsl(24.1, 100%, 49.2%);

    --font-family-chrome: "InterVariable", sans-serif;
    --font-family-content: "Newsreader", serif;
    --font-family-mono: "Inconsolata VF", monospace;
    --font-family: var(--font-family-chrome);
    --font-wdth-mono: 100;
    --font-weight-mono: 400;

    /* By default, the focus ring is offset so it doesn't bump against text ("out").
     In packed UI contexts, it is inset relative to layout ("in"). */
    --focus-color: #0098ff;
    --focus-offset-out: 2px;
    --focus-offset-in: -2px;
    --focus-offset: var(--focus-offset-out);

    /* There is always this much padding between text and the edge of stuff. */
    --text-padding: 0.25rem;

    /* Buttons have thick borders, also used to indicate focus. */
    --button-border-width: 2px;

    --icon-size: 2.0rem;
    --bar-line-height: 1.25rem;
    --bar-height: calc(2 * var(--bar-line-height) + 2 * var(--text-padding) + 2 * var(--button-border-width));
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        --background-color: black;
        --text-color: white;
        --quiet-text-color: #cecece;
        --footer-background-color: #111;
        --footer-text-color: #eee;

        --border-color: #222;
        --icon-color: #eee;
        --icon-color-off: #666;

        --font-weight-mono: 300;

        scrollbar-color: var(--quiet-text-color) var(--background-color);
    }
}

@media screen and (max-width: 45rem) {
    :root {
        --font-wdth-mono: 80;
    }
}

html {
    font: normal 18px / 1.4 var(--font-family);
    margin: 0;
    padding: 0;
    overflow-y: scroll;
    color: var(--text-color);
    /* When scrolling out of bounds (as with a touchpad in Firefox)
     * align the overscroll area with the header and footer. */
    background: var(--footer-background-color);
    touch-action: manipulation;
}
body {
    background: var(--background-color);
}

code, kbd, samp, pre {
    font-family: var(--font-family-mono);
    font-variation-settings: "wdth" var(--font-wdth-mono);
}

a {
    color: var(--text-color);
    --underline-color: var(--text-color);
    text-decoration-line: none;
}
a:not(:is(.no-underline, .lazy-underline)),
a.lazy-underline:is(:hover, :focus),
a .underline {
    text-decoration-line: underline;
    text-decoration-color: var(--underline-color);
}
a:visited {
    text-decoration-style: dashed;
}
a:visited {
    color: var(--text-color);
}
a:active {
    --underline-color: rgb(185, 28, 199); /* TODO Make this more vibrant */
}
a:link[aria-disabled=true],
a:visited[aria-disabled=true] {
    text-decoration-line: none;
    cursor: default;
}

#main {
    min-height: 100vh; /* push the footer off the page */
}

h1 {
    font: 350 2.0rem / 1.4 var(--font-family);
    font-variation-settings: "opsz" 72;
    hyphens: auto;
}

/* Default focus styles.  */
:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: var(--focus-offset);
}
/* Same as above, but with higher precedence to address a specificity conflict with normalize.css. */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 2px solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

/**
 * Base form styles
 *
 */
label:not(.checkbox) {
    display: block;
    font-size: 0.9rem;
    color: var(--quiet-text-color);
    padding: 0 0 var(--text-padding) 0;
}

label.checkbox {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 2.5rem;
    padding: 0 var(--text-padding);

    input[type=checkbox] {
        display: inline-block;
    }
}

input[type=text],
input[type=password],
input[type=url],
input[type=email],
select[multiple],
textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 2.5rem;
    padding: 0 var(--text-padding);

    color: var(--text-color);
    background: var(--background-color);
    border: var(--button-border-width) solid var(--border-color);
    transition: border-color 0.05s;

    &:focus {
        --border-color: var(--focus-color);
        box-shadow: inset 0 0 0 1.5px var(--background-color);
        outline: none;
    }
    & ::placeholder {
        opacity: 0.8;
        color: inherit;
    }
}
select[multiple],
textarea {
    height: auto; /* allow size attribute to have an effect */
}

input[readonly],
textarea[readonly] {
  border: none;
  padding: 0;
}

.text-button {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: var(--text-padding) 0.75rem;
    cursor: pointer;
    white-space: nowrap;

    --text-color: white;
    --gradient-start: #444;
    --gradient-mid: #333;
    --gradient-end: #323232;
    --gradient-border-color: #151515;

    color: var(--text-color);
    background: linear-gradient(to bottom, var(--gradient-start) 0%, var(--gradient-mid) 28%, var(--gradient-end) 100%);
    border: var(--button-border-width) solid var(--gradient-border-color);
    border-radius: calc(1.5 * var(--text-padding));
    transition: border-color 0.05s;

    /* bump contrast */
    text-shadow: var(--gradient-border-color) 0 0 .1rem,
        var(--gradient-border-color) -1px -1px .01rem,
        var(--gradient-border-color) 1px 1px .01rem;
    box-shadow: inset var(--gradient-end) 0 0 .25rem;

    &:active {
        background: linear-gradient(to top, var(--gradient-start) 0%, var(--gradient-mid) 28%, var(--gradient-end) 100%);
        box-shadow: inset var(--gradient-end) 0 0 .25rem;
    }
    &:focus-visible {
        box-shadow: inset 0 0 0 1.5px currentColor;
        outline: 2px solid transparent;
    }
    &:active:focus-visible {
        box-shadow: inset 0 0 0 1.5px currentColor,
                    inset var(--gradient-end) 0 0 .25rem;
    }
}

/**
 * A "primary" button represents the default action of the form. It is colored
 * bright orange to draw attention to it. This style must be combined with
 * .text-button, which provides layout.
 */
.text-button-primary {
    --text-color: white;
    --gradient-border-color: #da5200;
    --gradient-start: #f17e31;
    --gradient-mid: #fb6500;
    --gradient-end: #fb6500;
}

/**
 * A "danger" button performs a destructive action like deletion. It has a red
 * border to provide an aura of the forbidden. This button must be combined
 * with .text-button, which provides layout.
 */
.text-button-danger {
    --text-color: white;
    --gradient-border-color: #950015;
    --gradient-start: #da1732;
    --gradient-mid: #ba001a;
    --gradient-end: #ba001a;
}


.about-page {
    .about-page-inner {
        max-width: var(--layout-max-width);
        margin: 0 auto;
        padding: 1px 0 1px 0; /* disable margin collapsing */
    }
}

/* Django form errors */
.errorlist {
    padding: 0;
    list-style: none;
    hyphens: auto;
}


#footer {
    padding: 3em 0.25em;
    text-align: center;
    background: var(--footer-background-color);
    border-top: 2px solid var(--border-color);
    color: var(--footer-text-color);
}

.article-header {
    display: grid;
    grid-template-columns: 1fr min-content;

    .meta {
        --font-family: var(--font-family-chrome);
        font-size: smaller;
        color: var(--quiet-text-color);
        p {
            margin: 0;
        }
    }

    .tools {
        display: flex;
        flex-flow: row nowrap;
        --focus-offset: var(--focus-offset-in); /* Don't clip focus ring. */

        .icon {
            width: 2em;
            height: 2em;
        }
    }
}

article {
    h1 {
        margin: 1rem auto;
    }

    padding: 0 0 1rem 0;
    margin: 0.5rem 0;
    word-wrap: break-word; /* Don't let long lines break the layout */

    & > * {
        padding: 0 0.25rem;
        margin: 0 auto;
    }
    .layout-narrow & > * {
        max-width: var(--layout-max-width);
    }

    .content {
        --font-family: var(--font-family-content);
        font: normal 1.2rem / 1.7 var(--font-family);

        h1, h2, h3, h4, h5, h6, p, blockquote {
            margin: 0;
            padding: 0;
        }
        h1, h2, h3, h4, h5, h6 {
            font: inherit;
            font-weight: 500;
            margin: 1.75rem 0 0.75rem 0;
            font-variation-settings: "opsz" 60;
        }

        p {
            margin: 0.75rem 0;
        }

        blockquote {
            margin: 0.75rem;
        }

        img, video {
            max-width: 100%;
            height: auto;
        }

        figure {
            margin: 0.75rem 0;
            @media (min-width: 32rem) {
                margin: 1.5rem;
            }
        }

        hr {
            margin: 1rem 0;
            border: 0 solid var(--quiet-text-color);
            border-width: 1.5px 0 0 0;
        }

        pre {
            white-space: pre-wrap;
        }

        /* <img src="...">
         * <aside class="title-text">xkcd tooltip</aside> */
        aside.title-text {
            font-style: italic;
        }

        /* <a href=... class=youtube-thumb>
         *    <img src=thumbnail>
         *    <svg><!-- icon --></svg>
         * </a> */
        a.youtube-thumb {
            display: inline-block;
            position: relative;

            img {
                display: block;
            }

            svg {
                position: absolute;
                bottom: 0.5rem;
                right: 0.5rem;
                width: 2rem;
                height: 2rem;
                color: red;
            }
        }
    }
}

.article-footer {
    display: flex;
    justify-content: center;

    .icon {
        width: 2em;
        height: 2em;
    }
}

#global-nav {
    display: flex;
    justify-content: space-between;
    background: var(--footer-background-color);
    min-height: var(--bar-height); /* So .square is square */
    border-bottom: 2px solid var(--border-color);

    --focus-offset: calc(2 * var(--focus-offset-in)); /* Don't clip focus ring. */

    & > a[href],
    & > button {
        background: transparent;
        border: none;
    }

    & > * {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    & > * > .icon {
        display: block;
        font-size: var(--icon-size);
    }

    & > .square {
        flex: 0 0 var(--bar-height);
    }
}


#masthead {
    display: flex;
    flex: 0 0 auto;
    font: 1.5rem Montez, sans-serif;
    padding: 0 0.5rem;

    &:link {
        text-decoration: none;
    }

    .logotype {
        display: block;
    }

    @media (max-width: 30rem) {
        .logotype { display: none; }
    }
}

.global-links {
    flex: 1 1 100%;
    display: flex;
    padding: 0 1rem;
    gap: 2rem;
    @media (max-width: 45rem) {
        gap: 1rem;
    }
    @media (max-width: 30rem) {
        gap: 0.5rem;
    }
}

.global-link {
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
    text-align: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0.25rem;

    .icon {
        --icon-color: var(--selected-color);
    }
    span {
        white-space: nowrap;

        @media (max-width: 45rem) {
            font-size: smaller;
            --icon-size: smaller;
        }
    }

    @media (max-width: 30rem) {
        &.secondary {
            display: none;
        }
    }
}

#icon-sprites {
    display: none;
}

.icon {
    color: var(--icon-color);
}

.icon-inline {
    transform: translateY(0.075em);
}

.icon-heart {
    --icon-color: var(--heart-color);
}
.icon-check {
    --icon-color: var(--check-color);
}

.clocktime {
    transform: translateY(0.075em); /* Align with text baseline */
    padding-inline: 0.25rem;

    .face {
        fill: color-mix(in hsl, var(--background-color) 85%, var(--text-color));
        stroke: var(--text-color);
    }
    .pie {
        fill: none;
        stroke: var(--text-color);
    }
}

fave-toggle {
    button {
        background: transparent;
        border: none;
    }

    .inactive {
        fill: var(--icon-color-off);
    }
    .active {
        fill: var(--heart-color);
        transform: translateY(100%);
        transition: transform 200ms ease;
    }
    &[checked] .active {
        transform: translateY(0);
    }
    &[checked] .icon {
        color: var(--heart-color);
    }
}

read-toggle {
    button {
        background: transparent;
        border: none;
    }

    .inactive {
        fill: var(--icon-color-off);
    }
    .active {
        fill: var(--check-color);
        transform: translateX(-100%);
        transition: transform 150ms ease-in;
    }
    &[checked] .active {
        transform: translateX(0);
    }
}

/**
 * <div.tabs>
 *   <div.tabs-tabs>
 *     <a>text</a>
 *     <a aria-disabled="true">current tab</a>
 *   </div>
 * </div>
 */
.tabs {
    background: var(--background-color);
}
.tabs-tabs {
    max-width: 100%;
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
    padding: 0 0 2px 0;
}
/* base tab styles */
.tabs-tabs > a {
    flex: 0 1 2rem;
    --tab-shape-color: transparent;

    border-style: solid;
    border-width: 0 0 2px 0;
    border-color: var(--border-color);
    border-radius: 4px 4px 0 0;
    text-decoration: none;
    line-height: 1.7;
    padding: 0.125rem 8px 2px 8px;
    white-space: nowrap;
    text-align: center;
    text-overflow: ellipsis;
}
/* current tab */
.tabs-tabs > a[aria-selected=true] {
    --border-color: var(--selected-color);
}

.tabs-tabs .count {
    font-size: 0.7em;
    background: rgba(127, 127, 127, 0.3);
    padding: 0.25em 0.5em;
    border-radius: 2em;
    position: relative;
    top: -0.25em;
}

.feed-header {
    h1 {
        margin: 1rem 0;
        word-wrap: break-word; /* Don't let words in feed titles break the layout */
    }
}

.pagination {
    max-width: var(--layout-max-width);
    margin: 0 auto;

    display: flex;
    justify-content: space-around;

    a {
        display: block;
        padding: 1em 3em; /* Big click area */
    }
}

.inventory-centered {
    max-width: var(--layout-max-width);
    margin: 0 auto;
}

.inventory-header {
    display: grid;
    grid-template-columns: 1fr min-content;
    align-items: center;
    padding: 0 0.5rem;
}


.feed-list,
.label-list {
    white-space: nowrap;
    border-block: 2px solid var(--border-color);
    margin: 0.5rem 0;

    thead, tbody, tfoot {
        display: contents;
    }
    td {
        display: block;
    }

}

.feed-list-item {
    & > * {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    & > .col-feed {
        display: flex;
        flex-flow: column nowrap;
        align-items: start;

        .feed-error {
            font-size: small;
            white-space: collapse;
        }
    }
    & > .col-unread {}
    & > .col-fave {}
    & > .col-site-url {}
    & > .col-changed {}
    & > .col-edit {
        display: flex;
        align-content: center;
        a {
            display: block;
            padding: 0.25rem; /* increase clickable area */
        }
        svg {
            display: block;
            width: 1.5rem;
            height: 1.5rem;
        }
    }
}

/* On wide displays, show a table with scannable columns. */
@media screen and (min-width: 32rem) {
    .feed-list {
        display: grid;
        grid: auto /
            5fr max-content max-content 5fr max-content min-content;
    }

    .feed-list-item {
        display: contents;

        th, td {
            display: flex;
            align-items: center;
            justify-content: stretch;
            padding: 0.75rem 0.5rem;
        }

        & > .col-feed {}
        & > .col-unread { justify-content: end; }
        & > .col-fave { justify-content: end; }
        & > .col-site-url {}
        & > .col-changed { justify-content: end; }
        & > .col-edit {}
    }

    .feed-list-item-header {
        --font-family: var(--font-family-chrome);
        font-size: smaller;
    }

    /* Zebra stripes. Have to handle the header specially. */
    .feed-list-item-header > th {
        font: inherit;
        background: var(--footer-background-color);
        border-bottom: 2px solid var(--border-color);
    }
    .feed-list-item:nth-child(even) > td {
        background: var(--footer-background-color);
    }
}

/* On narrow displays display a fatter row suitable for touchscreens. */
@media screen and (max-width: 32rem) {
    .feed-list {
        display: grid;
        grid: auto-flow auto / 1fr;
    }

    .feed-list-item {
        display: grid;
        grid:
            "feed     unread edit" min-content
            "changed  fave   edit" min-content / 1fr min-content min-content;
        padding: 0.75rem var(--text-padding);

        & > .col-feed { grid-area: feed; padding: 0 0.5rem 0 0; }
        & > .col-unread { grid-area: unread; padding: 0 0.5rem; text-align: right; }
        & > .col-fave { grid-area: fave; padding: 0 0.5rem; text-align: right; }
        & > .col-unread::after { content: " unread"; }
        & > .col-fave::after { content: " favorites"; }
        & > .col-site-url { display: none; }
        & > .col-changed { grid-area: changed; }
        & > .col-changed::before { content: "Updated "; }
        & > .col-edit { grid-area: edit; padding: 0 0 0 0.5rem; }
    }

    /* Hide the header, as we have duplicated its function inline. */
    .feed-list-item-header {
        display: none;
    }

    /* Zebra stripes */
    .feed-list-item:nth-child(odd) {
        background: var(--footer-background-color);
    }
}

.label-list-item {
    /*& > :nth-child(1) { background: hsla(160, 60%, 50%, 0.5); }*/
    /*& > :nth-child(2) { background: hsla(120, 60%, 50%, 0.5); }*/
    /*& > :nth-child(3) { background: hsla(060, 60%, 50%, 0.5); }*/
    /*& > :nth-child(4) { background: hsla(190, 60%, 50%, 0.5); }*/
    /*& > :nth-child(5) { background: hsla(000, 60%, 50%, 0.5); }*/
    /*& > :nth-child(6) { background: hsla(040, 60%, 50%, 0.5); }*/

    /* Icon */
    & > :nth-child(1) {
        display: flex;
        align-items: center;
        svg {
            width: 2.0rem;
            height: 2.0rem;
        }
    }

    /* Label name */
    & > :nth-child(2) {
    }

    /* Feed count */
    & > :nth-child(3) {
    }

    /* Unread count */
    & > :nth-child(4) {
    }

    /* Fave count */
    & > :nth-child(5) {
    }
    /* Edit button */
    & > :nth-child(6) {
        a {
            display: block;
            padding: 0.25rem; /* increase clickable area */
        }
        svg {
            display: block;
            width: 1.5rem;
            height: 1.5rem;
        }
    }
}

/* On wide displays, show a table with scannable columns. */
@media screen and (min-width: 32rem) {
    .label-list {
        display: grid;
        grid: "icon title feeds unread fave edit" auto /
            max-content 5fr minmax(max-content, 1fr) minmax(max-content, 1fr) minmax(max-content, 1fr) minmax(max-content, 1fr);
        border-block: 2px solid var(--border-color);
    }

    .label-list-item {
        display: contents;

        th, td {
            display: flex;
            align-items: center;
            justify-content: stretch;
            padding: 0.75rem 0.5rem;
        }

        & > :nth-child(1) { padding-right: 0; }
        & > :nth-child(3) { justify-content: end; }
        & > :nth-child(4) { justify-content: end; }
        & > :nth-child(5) { justify-content: end; }
        & > :nth-child(6) { justify-content: end; }
    }

    .label-list-item-header {
        --font-family: var(--font-family-chrome);
        font-size: smaller;
    }

    /* Zebra stripes. Have to handle the header specially. */
    .label-list-item-header > th {
        font-weight: normal;
        background: var(--footer-background-color);
        border-bottom: 2px solid var(--border-color);
    }
    .label-list-item:nth-child(even) > td {
        background: var(--footer-background-color);
    }
}

/* On narrow displays display a fatter row suitable for touchscreens. */
@media screen and (max-width: 32rem) {
    .label-list {
        display: grid;
        grid: auto-flow auto / 1fr;
    }

    .label-list-item {
        display: grid;
        grid:
            "icon title unread edit" min-content
            "icon feeds fave   edit" min-content / min-content 1fr min-content min-content;
        padding: 0.75rem var(--text-padding);

        & > td:nth-child(1) { grid-area: icon; padding: 0 0.5rem 0 0; }
        & > td:nth-child(2) { grid-area: title; }
        & > td:nth-child(3) { grid-area: feeds; }
        & > td:nth-child(3)::after { content: " feeds"; }
        & > td:nth-child(4) { grid-area: unread; padding: 0 0.5rem; text-align: right; }
        & > td:nth-child(4) a::after { content: " unread"; }
        & > td:nth-child(5) { grid-area: fave; padding: 0 0.5rem; text-align: right; }
        & > td:nth-child(5) a::after { content: " favorites"; }
        & > td:nth-child(6) { grid-area: edit; padding: 0 0 0 0.5rem; }
    }

    /* Hide the header, as we have duplicated its function inline. */
    .label-list-item-header {
        display: none;
    }

    /* Zebra stripes */
    .label-list-item:nth-child(odd) {
        background: var(--footer-background-color);
    }
}

.inventory-tools {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;

    .remove-button, input[type=submit] {
        flex: 0 1 auto;
        width: auto;
    }
}

.feed-error {
    white-space: pre-wrap;
}

.add-feed-form {
    display: flex;

    input[type=url] {
        flex: 1 1 100%;
        min-width: 0;
    }
    input[type=submit] {
        flex: 1 1 0;
        margin-left: var(--text-padding);
    }
}

.register-feed-reader-form {
    input {
        display: inline-block;
        width: auto;
    }
}