/* The reading settings, as the apps': Light (the site as it is), Sepia, Dark and Blackout, and the article's font,
   text size and line spacing. _Layout's head script puts the choice on <html>: data-theme, plus fm-themed for any
   theme but Light and fm-dark for Dark and Blackout; data-font, data-size and data-spacing when not the default.
   Every rule below is under one of those, so Light looks exactly as before. Linked directly in _Layout, not
   bundled (WebGrease doesn't know custom properties). The signed-out homepage stays Light. */

/* The palettes: the apps' colors (Feedmesh.Droid Resources/values/Colors.xml), with the website's two greys
   (the page behind, the cards on it) */
html[data-theme=sepia] {
    --fm-row-title: #3b3027;
    --fm-ink: #3b3027;
    --fm-ink-2: #4a3d32;
    --fm-on-ink: #f6efe2;
    --fm-on-ink-muted: #cdbfa6;
    --fm-bg: #ebe1ca;
    --fm-surface: #f3ebd9;
    --fm-text: #3a2e22;
    --fm-muted: #7d6a52;
    --fm-line: #ddd0b4;
    --fm-chip: #e5d9bf;
    --fm-link: #b0443a;
    --fm-hover: rgba(58, 46, 34, .06);
    --fm-field: #fbf6eb;
    --fm-field-line: #cdbf9f;
    --fm-button: #e5d9bf;
    --fm-button-line: #cdbf9f;
    --fm-card: #f3ebd9;
    --fm-card-line: #ddd0b4;
    --fm-strip: #fbf6eb;
    --fm-strip-text: #3a2e22;
    --fm-band: rgba(74, 59, 46, .65);
    --fm-placeholder: #e5d9bf;
    --fm-warn: #8a6d3b;
    --fm-nav-icon: #4f7db0;
}
html[data-theme=dark] {
    --fm-row-title: #222222;
    --fm-ink: #2c2c2c;
    --fm-ink-2: #3d3d3d;
    --fm-bg: #3d3d3d;
    --fm-surface: #4f4f4f;
    --fm-text: #f2f2f2;
    --fm-muted: #c4c4c4;
    --fm-line: #666666;
    --fm-chip: #5e5e5e;
    --fm-link: #f4a19d;
    --fm-hover: rgba(255, 255, 255, .07);
    --fm-field: #3d3d3d;
    --fm-field-line: #707070;
    --fm-button: #3d3d3d;
    --fm-button-line: #707070;
    --fm-card: #222222;
    --fm-card-line: #2c2c2c;
    --fm-strip: #333333;
    --fm-strip-text: #ffffff;
    --fm-band: rgba(79, 79, 79, .65);
    --fm-placeholder: #3a3a3a;
    --fm-warn: #e6c27a;
    --fm-nav-icon: #8ab8ea;
}
html[data-theme=blackout] {
    --fm-row-title: #0d0d0d;
    --fm-ink: #000000;
    --fm-ink-2: #1c1c1c;
    --fm-bg: #000000;
    --fm-surface: #000000;
    --fm-text: #e6e6e6;
    --fm-muted: #9e9e9e;
    --fm-line: #2a2a2a;
    --fm-chip: #1c1c1c;
    --fm-link: #e57373;
    --fm-hover: rgba(255, 255, 255, .08);
    --fm-field: #0d0d0d;
    --fm-field-line: #333333;
    --fm-button: #1c1c1c;
    --fm-button-line: #333333;
    --fm-card: #000000;
    --fm-card-line: #2a2a2a;
    --fm-strip: #000000;
    --fm-strip-text: #e6e6e6;
    --fm-band: rgba(79, 79, 79, .65);
    --fm-placeholder: #141414;
    --fm-warn: #d9b46a;
    --fm-nav-icon: #7aa7d9;
}
/* The browser's own parts (scroll bars, date pickers, select lists) dark too */
html.fm-dark {
    color-scheme: dark;
}

/* Blackout: the bars are black on black, so a line marks them off */
html[data-theme=blackout] .navbar.navbar-inverse {
    border-bottom: 1px solid var(--fm-ink-2);
}
html[data-theme=blackout] .site-footer {
    border-top: 1px solid var(--fm-ink-2);
}

/* Links and text (with :where, a plain link's weight, so buttons and the bars keep their own colors) */
:where(html.fm-themed) a,
:where(html.fm-themed) a:hover,
:where(html.fm-themed) a:focus {
    color: var(--fm-link);
}
.fm-themed hr {
    border-top-color: var(--fm-line);
}
.fm-themed .text-muted,
.fm-themed .help-block,
.fm-themed blockquote footer,
.fm-themed .dropdown-header {
    color: var(--fm-muted);
}
.fm-themed blockquote {
    border-left-color: var(--fm-line);
}
.fm-themed code {
    background-color: var(--fm-chip);
    color: var(--fm-text);
}
.fm-themed pre {
    background-color: var(--fm-field);
    border-color: var(--fm-line);
    color: var(--fm-text);
}

/* Bootstrap's parts */
.fm-themed .form-control {
    background-color: var(--fm-field);
    border-color: var(--fm-field-line);
    color: var(--fm-text);
}
.fm-themed .form-control[disabled],
.fm-themed .form-control[readonly] {
    background-color: var(--fm-chip);
}
.fm-themed .form-control::placeholder {
    color: var(--fm-muted);
}
.fm-themed .input-group-addon {
    background-color: var(--fm-chip);
    border-color: var(--fm-field-line);
    color: var(--fm-text);
}
.fm-themed .btn-default {
    background-color: var(--fm-button);
    border-color: var(--fm-button-line);
    color: var(--fm-text);
}
.fm-themed .btn-default:hover,
.fm-themed .btn-default:focus,
.fm-themed .btn-default:active,
.fm-themed .btn-default.active,
.fm-themed .open > .dropdown-toggle.btn-default {
    background-color: var(--fm-chip);
    border-color: var(--fm-button-line);
    color: var(--fm-text);
}
.fm-themed .btn-link {
    color: var(--fm-link);
}
.fm-themed .dropdown-menu {
    background-color: var(--fm-surface);
    border-color: var(--fm-line);
}
.fm-themed .dropdown-menu > li > a {
    color: var(--fm-text);
}
.fm-themed .dropdown-menu > li > a:hover,
.fm-themed .dropdown-menu > li > a:focus {
    background-color: var(--fm-hover);
    color: var(--fm-text);
}
.fm-themed .dropdown-menu .divider {
    background-color: var(--fm-line);
}
.fm-themed .modal-content {
    background-color: var(--fm-surface);
    border-color: var(--fm-line);
}
.fm-themed .modal-header,
.fm-themed .modal-footer {
    border-color: var(--fm-line);
}
.fm-themed .close,
.fm-themed .close:hover,
.fm-themed .close:focus {
    color: var(--fm-text);
    text-shadow: none;
}
.fm-themed .panel {
    background-color: var(--fm-surface);
    border-color: var(--fm-line);
}
.fm-themed .panel-default > .panel-heading,
.fm-themed .panel-footer {
    background-color: var(--fm-chip);
    border-color: var(--fm-line);
    color: var(--fm-text);
}
.fm-themed .list-group-item {
    background-color: var(--fm-surface);
    border-color: var(--fm-line);
    color: var(--fm-text);
}
.fm-themed a.list-group-item,
.fm-themed button.list-group-item {
    color: var(--fm-text);
}
.fm-themed a.list-group-item:hover,
.fm-themed a.list-group-item:focus,
.fm-themed button.list-group-item:hover,
.fm-themed button.list-group-item:focus {
    background-color: var(--fm-hover);
    color: var(--fm-text);
}
.fm-themed .list-group-item-heading {
    color: var(--fm-text);
}
.fm-themed .list-group-item-text {
    color: var(--fm-muted);
}
.fm-themed .table > thead > tr > th,
.fm-themed .table > tbody > tr > th,
.fm-themed .table > tbody > tr > td,
.fm-themed .table > tfoot > tr > td {
    border-color: var(--fm-line);
}
.fm-themed .table-striped > tbody > tr:nth-of-type(odd),
.fm-themed .table-hover > tbody > tr:hover {
    background-color: var(--fm-hover);
}
.fm-themed .well {
    background-color: var(--fm-chip);
    border-color: var(--fm-line);
}
.fm-themed .nav-tabs {
    border-bottom-color: var(--fm-line);
}
.fm-themed .nav > li > a:hover,
.fm-themed .nav > li > a:focus {
    background-color: var(--fm-hover);
}
.fm-themed .nav-tabs > li.active > a,
.fm-themed .nav-tabs > li.active > a:hover,
.fm-themed .nav-tabs > li.active > a:focus {
    background-color: var(--fm-surface);
    border-color: var(--fm-line) var(--fm-line) transparent;
    color: var(--fm-text);
}
.fm-themed .pagination > li > a,
.fm-themed .pagination > li > span {
    background-color: var(--fm-surface);
    border-color: var(--fm-line);
    color: var(--fm-link);
}
.fm-themed .progress {
    background-color: var(--fm-chip);
}
.fm-themed .popover {
    background-color: var(--fm-surface);
    border-color: var(--fm-line);
    color: var(--fm-text);
}

/* The feeds page (Site.css): the rows' cards as the apps' (the image, a title band over it, the site and time below) */
/* A feed's bar in its own color; the default (#222222, no color chosen) in the theme's, as the apps' */
.fm-themed .feedtitle[style*="#222222"] {
    background-color: var(--fm-row-title) !important;
}
.fm-themed .feeditem {
    background-color: var(--fm-card);
    border-color: var(--fm-card-line);
    box-shadow: none;
}
.fm-themed .feeditem .feedname,
.fm-themed .feeditem .date {
    background-color: var(--fm-strip);
    color: var(--fm-strip-text);
}
.fm-themed .feeditem .title {
    background-color: var(--fm-band);
}
.fm-themed .feeditem .imageplace {
    background-color: var(--fm-placeholder);
}
html[data-theme=sepia] .feeditem .imageplace {
    background-image: url(/images/no-image-sepia.png);
}
html[data-theme=dark] .feeditem .imageplace {
    background-image: url(/images/no-image-dark.png);
}
html[data-theme=blackout] .feeditem .imageplace {
    background-image: url(/images/no-image-blackout.png);
}
.fm-themed .loading,
.fm-themed .loadingarticle {
    background-color: var(--fm-surface);
}
.fm-themed .feedstatus,
.fm-themed .search-note {
    color: var(--fm-warn);
}
.fm-themed .feedstatusnote {
    color: var(--fm-muted);
}
.fm-themed .feednoitems .glyphicon,
.fm-themed .feednoitemsmore,
.fm-themed .similarfeeddetails,
.fm-themed .searchstats,
.fm-themed .searchstats .glyphicon-time,
.fm-themed .welcome-intro,
.fm-themed .welcome-detail,
.fm-themed .welcome-elsewhere,
.fm-themed .welcome-search .glyphicon,
.fm-themed .search-box .glyphicon,
.fm-themed .search-scope a,
.fm-themed .search-message {
    color: var(--fm-muted);
}
.fm-themed .search-message h3,
.fm-themed .welcome-more a {
    color: var(--fm-text);
}
.fm-themed .welcome-button[disabled] {
    background-color: var(--fm-chip);
}
.fm-themed #feedsearchresultsarea .media {
    border-bottom-color: var(--fm-line);
}

/* The article */
.fm-themed #displayarticle .header .back,
.fm-themed #displayarticle .header .next {
    color: var(--fm-nav-icon);
}
.fm-themed #displayarticle #pubauthor {
    color: var(--fm-muted);
}
.fm-themed #displayarticle blockquote {
    background-color: var(--fm-chip);
}
.fm-themed #displayarticle #footeractions a {
    background-color: var(--fm-button);
    border-color: var(--fm-button-line);
    color: var(--fm-text);
}
/* What the site sent: its own colors and boxes give way to the theme's (black text, white panels), as in the apps */
.fm-themed #displayarticlecontent,
.fm-themed #displayarticlecontent * {
    color: inherit !important;
    background-color: transparent !important;
    border-color: var(--fm-line) !important;
}
.fm-themed #displayarticlecontent a {
    color: var(--fm-link) !important;
}
.fm-themed #displayarticlecontent pre,
.fm-themed #displayarticlecontent code,
.fm-themed #displayarticlecontent blockquote {
    background-color: var(--fm-chip) !important;
}
.fm-themed #displayarticlecontent blockquote {
    border-left-color: var(--fm-nav-icon) !important;
}
/* Site icons drawn black on clear vanish on the dark greys: a white tile behind them */
.fm-dark #displayarticle .article-source img,
.fm-dark #displayarticle #footeractions img,
.fm-dark .favicon,
.fm-dark .similarfeed .favicon,
.fm-dark .local-source img,
.fm-dark .local-found-icon,
.fm-dark .welcome-feed-icon {
    background-color: #fff;
    border-radius: 3px;
    padding: 1px;
}

/* The account pages' own styles (Index, Usage, Connect) */
.fm-themed .plus-message,
.fm-themed .plus-modal dt,
.fm-themed .usage-meter-head span,
.fm-themed .usage-note,
.fm-themed .connect-note {
    color: var(--fm-muted);
}
.fm-themed .usage-meter {
    border-top-color: var(--fm-line);
}
.fm-themed .usage-bar {
    background-color: var(--fm-chip);
}
.fm-themed .local-option:hover {
    background-color: var(--fm-hover);
}
.fm-dark .auth-card,
.fm-dark .account-card {
    box-shadow: none;
}

/* The article's font, text size and line spacing (Medium and Normal are the site as it was) */
html[data-font=slabserif] #displayarticle h1,
html[data-font=slabserif] #displayarticle #displayarticlecontent {
    font-family: "Roboto Slab", Georgia, "Times New Roman", serif;
}
html[data-size=small] #displayarticle #displayarticlecontent {
    font-size: 14px;
}
html[data-size=large] #displayarticle #displayarticlecontent {
    font-size: 19px;
}
html[data-size=xlarge] #displayarticle #displayarticlecontent {
    font-size: 23px;
}
html[data-size=small] #displayarticle h1 {
    font-size: 24px;
}
html[data-size=large] #displayarticle h1 {
    font-size: 32px;
}
html[data-size=xlarge] #displayarticle h1 {
    font-size: 36px;
}
html[data-spacing=compact] #displayarticle #displayarticlecontent {
    line-height: 1.3;
}
html[data-spacing=relaxed] #displayarticle #displayarticlecontent {
    line-height: 1.75;
}

/* The article bar's Aa (Text and theme), beside its icons */
#displayarticle .header .reading-toggle {
    cursor: pointer;
    font: 700 24px/28px var(--fm-display);
    margin: 0 15px 0 0;
    color: var(--fm-muted);
}
#displayarticle .header .reading-toggle:hover,
#displayarticle .header .reading-toggle:focus {
    color: var(--fm-text);
}
.modal-reading {
    max-width: 440px;
}
@media (min-width: 768px) {
    .modal-reading {
        width: 440px;
    }
}

/* Text and theme's choices (Views/Shared/_ReadingOptions): a row of buttons each, the current one edged in red */
.reading-options {
    display: grid;
    gap: 16px;
}
.reading-label {
    display: block;
    font: 700 12px/1.2 var(--fm-display);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fm-muted);
    margin-bottom: 7px;
}
.reading-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.reading-choices button {
    flex: 1 1 60px;
    min-width: 0;
    padding: 8px 4px;
    border: 1px solid var(--fm-line);
    border-radius: 8px;
    background-color: var(--fm-surface);
    color: var(--fm-text);
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
}
.reading-choices button:hover {
    border-color: var(--fm-muted);
}
.reading-choices button.active,
.reading-choices button.active:hover {
    border-color: var(--fm-red);
    box-shadow: inset 0 0 0 1px var(--fm-red);
    font-weight: 700;
}
.reading-choices button:focus {
    outline: none;
}
.reading-choices button:focus-visible {
    outline: 2px solid var(--fm-red);
    outline-offset: 2px;
}
/* Each theme's button in its own colors */
.reading-choices [data-value=light] {
    background-color: #ffffff;
    color: #262222;
}
.reading-choices [data-value=sepia] {
    background-color: #f3ebd9;
    color: #3a2e22;
}
.reading-choices [data-value=dark] {
    background-color: #4f4f4f;
    color: #ffffff;
}
.reading-choices [data-value=blackout] {
    background-color: #000000;
    color: #e6e6e6;
}
.reading-choices [data-value=light],
.reading-choices [data-value=sepia] {
    border-color: #ddd0b4;
}
.reading-choices [data-value=dark],
.reading-choices [data-value=blackout] {
    border-color: #555555;
}
.reading-choices [data-value=slabserif] {
    font-family: "Roboto Slab", Georgia, "Times New Roman", serif;
}
.reading-sizes button {
    font-weight: 700;
}
.reading-sizes [data-value=small] { font-size: 12px; }
.reading-sizes [data-value=medium] { font-size: 15px; }
.reading-sizes [data-value=large] { font-size: 18px; }
.reading-sizes [data-value=xlarge] { font-size: 21px; }
.reading-sizes button {
    height: 38px;
    padding-top: 0;
    padding-bottom: 0;
}
.account-card .reading-options {
    margin-top: 14px;
}

/* The top bar's theme menu (_Layout): a half-filled circle; each theme with a swatch of its colors, the current ticked */
.nav-theme-icon {
    width: 18px;
    height: 18px;
    vertical-align: -4px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}
.nav-theme-icon .nav-theme-half {
    fill: currentColor;
    stroke: none;
}
.reading-menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 36px;
    position: relative;
}
.reading-menu > li > a.active {
    font-weight: 700;
}
.reading-menu > li > a.active::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 6px;
    height: 11px;
    margin-top: -7px;
    border: solid var(--fm-red);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.reading-swatch {
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(128, 128, 128, .55);
}
.reading-menu [data-value=light] .reading-swatch { background-color: #ffffff; }
.reading-menu [data-value=sepia] .reading-swatch { background-color: #f3ebd9; }
.reading-menu [data-value=dark] .reading-swatch { background-color: #4f4f4f; }
.reading-menu [data-value=blackout] .reading-swatch { background-color: #000000; }
.reading-menu [data-value=auto] .reading-swatch { background: linear-gradient(135deg, #ffffff 50%, #4f4f4f 50%); }
/* Plus (Views/Home/Plus.cshtml's own styles): the chats, the plan card and the comparison table */
.fm-themed .plus-chat,
.fm-themed .plus-plan,
.fm-themed .pro-table {
    background-color: var(--fm-surface);
    border-color: var(--fm-line);
}
.fm-dark .plus-chat,
.fm-dark .plus-plan {
    box-shadow: none;
}
.fm-themed .plus-chat-head {
    background-color: var(--fm-surface);
    border-bottom-color: var(--fm-line);
}
.fm-themed .plus-chat-body {
    background-color: var(--fm-bg);
}
.fm-themed .plus-chat-name,
.fm-themed .plus-switch button.plus-switch-on,
.fm-themed .pro-table td:first-child,
.fm-themed .pro-table td.pro-col-plus {
    color: var(--fm-text);
}
.fm-themed .plus-bubble-ai {
    background-color: var(--fm-chip);
    color: var(--fm-text);
}
.fm-themed .plus-bubble-ai::after {
    background-color: var(--fm-chip);
}
.fm-dark .plus-bubble-me,
.fm-dark .plus-bubble-me::after {
    background-color: #6b6461;
}
.fm-themed .plus-source,
.fm-themed .plus-switch button,
.fm-themed .plus-plan-price small,
.fm-themed .plus-plan-sub,
.fm-themed .pro-buy-note,
.fm-themed .pro-soon,
.fm-themed .pro-small {
    color: var(--fm-muted);
}
.fm-themed .pro-soon {
    border-color: var(--fm-line);
}
.fm-themed .plus-switch {
    background-color: var(--fm-chip);
}
.fm-themed .plus-switch button.plus-switch-on {
    background-color: var(--fm-surface);
}
.fm-themed .plus-dots button {
    background-color: var(--fm-line);
}
.fm-themed .plus-dots button.plus-dot-on {
    background-color: var(--fm-text);
}
.fm-themed .pro-table th {
    background-color: var(--fm-chip);
    color: var(--fm-text);
}
.fm-themed .pro-table th.pro-col-plus {
    background-color: var(--fm-red);
    color: #fff;
}
.fm-themed .pro-table td {
    border-top-color: var(--fm-line);
}
.fm-themed .pro-table td.pro-col-plus {
    background-color: rgba(204, 52, 51, .10);
}
.fm-themed .pro-table tbody tr:hover td {
    background-color: var(--fm-hover);
}
.fm-themed .pro-table tbody tr:hover td.pro-col-plus {
    background-color: rgba(204, 52, 51, .16);
}

/* Connect your AI (Views/Home/Developers.cshtml's own styles) */
.fm-themed .dev-url,
.fm-themed .dev-table {
    background-color: var(--fm-surface);
    border-color: var(--fm-line);
}
.fm-themed .dev-url span {
    color: var(--fm-muted);
}
.fm-themed .dev-url code {
    background: none;
    color: var(--fm-text);
}
.fm-dark .plus-switch button em {
    color: var(--fm-link);
}