@import url("/assets/reset-721ed75b.css");
@import url("/assets/audio_reset-25ee17b9.css");
@import url("/assets/buttons-e77f4c50.css");
@import url("/assets/nav-1f0469e5.css");
@import url("/assets/details-190bf7ab.css");
@import url("/assets/articles-b7343c06.css");
@import url("/assets/feeds-b3d5492a.css");
@import url("/assets/account-8e7b29b7.css");
@import url("/assets/lists-b3e9ff0e.css");
@import url("/assets/clouds-15dc4ce7.css");
@import url("/assets/labels-89c93023.css");

:root {
  --background-color: rgb(253, 253, 253); /* #fdfdfd */
  /* --background-color-sky: #d9fcff; */
  /* --background-sky: linear-gradient(to bottom, var(--background-color-sky), #94dfff); */
  --background-color-sky: #b3f0ff;
  --background-color-sky-transparent: rgba(179, 240, 255, 0.3);
  --background-sky: linear-gradient(to bottom, var(--background-color-sky), #99d6ff);
  --background-color-transparent: rgba(253, 253, 253, 0.9);
  --text-color: black;
  --text-color-light: darkgray;
  --article-border-color: #dddddd;
  --avatar-background-color: #eeeeee;
  --avatar-foreground-color: #808080;
  --favourite-background-color: rgba(224, 227, 21, 0.07);

  --main-border-color: #333;
  --main-border-width: 2px;
  --main-border-style: groove;

  --ground-color: rgba(0, 128, 0, 0.9);

  --pre-background-color: #CCC;

  --success-color: #28a745;
  --error-color: #dc3545;
  --subscribe-color: #ffc107;

  --link-color: royalblue;
  --link-visited-color: darkorchid;
  --favourite-color: gold;
  --bookmark-color: dodgerblue;
  --blue-button-color: #0077cc;
  --nav-background-color: rgba(0, 0, 255, 0.3);
  --nav-mobile-background-color: rgba(0, 172, 0, 0.9);

  --outer-padding: 4px;

  --main-width: 350px;
  --desktop-nav-width: 160px;
  --footer-height: 40px;
  --footer-text-color: white;

  --flash-text-color: white;

  @media (prefers-color-scheme: dark) {
    /* --background-color: #1A1A1A; */
    /* --background-color: #1C110F; */
    --background-color: rgb(31, 28, 26); /* #1F1C1A */
    --background-color-sky: #020111;
    --background-color-sky-transparent: rgba(2, 1, 17, 0.3);
    --background-sky: linear-gradient(to bottom, var(--background-color-sky) 10%, #3a3a52 100%);
    --background-color-transparent: rgba(31, 28, 26, 0.9);
    /* --text-color: #DDD; */
    --text-color: #F9F9E9;
    /* --text-color-light: gray; */
    --article-border-color: #333;
    --avatar-background-color: #333333;
    --avatar-foreground-color: #aaaaaa;

    --main-border-color: #666;
    --main-border-style: solid;

    --ground-color: rgba(0, 66, 0, 0.9);

    --pre-background-color: #333;

    --link-color: dodgerblue;
    --link-visited-color: orchid;

    --nav-background-color: rgba(100, 100, 255, 0.3);
    --nav-mobile-background-color: rgba(0, 130, 0, 0.9);
  }
}

body {
  margin: 0;
  background-color: var(--background-color-sky);
  background-image: var(--background-sky);
  /* background-attachment: fixed; */
  color: var(--text-color);
  font-family: system-ui, sans-serif;
  /* font-family: ui-rounded, sans-serif; */
  padding: var(--outer-padding) var(--outer-padding) 0 var(--outer-padding);
}

@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-right: calc(var(--outer-padding) + env(safe-area-inset-right));
    padding-left: calc(var(--outer-padding) + env(safe-area-inset-left));
    padding-top: calc(var(--outer-padding) + env(safe-area-inset-top));
  }

  /* This is for PWA (on iOS), so that the status bar has a transparent background. */
  body::before {
    content: '';
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top);
    backdrop-filter: blur(10px);
  }
}

body #flex-container {
  display: flex;
  gap: 1vw;
  flex-wrap: wrap-reverse;
  justify-content: center;
  min-height: calc(100vh - var(--outer-padding) - var(--footer-height));
}

#flex-container > * {
  flex-shrink: 1;
}

summary {
  cursor: pointer;
}

progress {
  width: 100%;
}

dialog {
  padding: 1em;
  border: 2px solid var(--text-color-light);
  border-radius: 10px;
  color: var(--text-color);
  background-color: var(--background-color);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  max-width: calc(100% - 4em);
  max-height: calc(100% - 4em);
}

dialog h2, dialog h3, dialog h4 {
  margin: 0;
}

/* In Safari, this rule is not removed correctly when the popover is closed again. */
/* body:has(:popover-open) {
  overflow: hidden;
  pointer-events: none;
} */

dialog::backdrop {
  backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

@media (prefers-color-scheme: dark) {
  dialog::backdrop {
    background-color: rgba(30, 30, 30, 0.3);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  }

  dialog {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  }
}

[popover]:popover-open {
  opacity: 1;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
}

[popover] {
  opacity: 0;
  transition: opacity 0.2s;
}

/* Needs to be after the previous [popover]:popover-open rule
to take effect, as the specificity is the same */
@starting-style {
  [popover]:popover-open {
    opacity: 0;
  }
}

input, textarea, select {
  background-color: var(--background-color);
  color: var(--text-color);
}

.alert {
  color: var(--flash-text-color);
  background-color: var(--error-color);
}

.notice {
  color: var(--flash-text-color);
  background-color: var(--success-color);
}

a {
  /* Make links with URLs break, so they do not wide their container */
  word-break: break-word;
  /* text-decoration: none; */
  color: var(--link-color);
}

a:visited { color: var(--link-visited-color); }
a:hover, a:focus { text-decoration-line: underline; }

a[type="application/rss+xml"]::before,
a[type="application/atom+xml"]::before,
a[type="application/feed+json"]::before,
a[type="text/x-opml"]::before,
a[type="text/html"]::before {
  content: '';
  display: inline-block;
  height: 12px;
  width: 12px;
  background-size: 100%;
  margin-right: 4px;
}

a[type="application/rss+xml"]::before   { background-image: url("/assets/feed_type_icons/rss-6f5322c2.svg"); }
a[type="application/atom+xml"]::before  { background-image: url("/assets/feed_type_icons/atom-3d05960f.svg"); }
a[type="application/feed+json"]::before { background-image: url("/assets/feed_type_icons/json-e22ed5e0.svg"); }
a[type="text/x-opml"]::before           { background-image: url("/assets/feed_type_icons/opml-c8c26b33.svg"); }
a[type="text/html"]::before           { background-image: url("/assets/feed_type_icons/html-8a5a5b1d.svg"); }

body main {
  background-color: var(--background-color);
  flex-basis: var(--main-width);
  max-width: min(640px, 100%);
  flex-grow: 2;
  min-width: min(var(--main-width), calc(100% - 2 * var(--outer-padding)));
  border-width: var(--main-border-width);
  border-style: var(--main-border-style);
  border-color: var(--main-border-color);
  border-radius: 4px 4px 0 0;
  border-bottom-width: 0px;
  /* margin: 0 var(--outer-padding); */
  padding-bottom: 3rem; /* to make sure the mobile nav bar does not cover the content */
}

/* (Fake) animating slide out of details. https://stackoverflow.com/a/73447722/210307 */
details summary {
  transition: margin 150ms ease-out;
}

p, ul, ol, div, article {
  /* Where hyphens is not supported, this should make long words (e.g. URLs) wrap and not exceed the line. */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

main video {
  width: 100%;
  height: auto;
  background-color: var(--avatar-background-color);
}

a.click-to-embed {
  display: block;
  position: relative;
}

a.click-to-embed::before {
  content: '►';
  display: inline-block;
  position: absolute;
  background-color: var(--background-color);
  color: var(--text-color);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  top: calc(50% - 40px);
  left: calc(50% - 40px);
  font-size: 54px;
  text-align: center;
  text-indent: 10px;
  opacity: 0.5;
  z-index: 1;
}

a.click-to-embed:hover::before,
a.click-to-embed:focus::before {
  opacity: 0.75;
}

/* Lists set their own padding in reset.css */
main > *:not(ul, ol) {
  /* padding: 12px; */
  padding: 12px 2.5%;
}

main > header {
  /* position: sticky; */
  top: 0px;
  background-color: var(--background-color-transparent);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  z-index: 1; /* seems really only be needed to make <audio> elements be behind as well */
  border-top-left-radius: 4px; /* to not make the header "destroy" the main's border radius */
  border-top-right-radius: 4px; /* to not make the header "destroy" the main's border radius */
  border-bottom: 1px solid var(--article-border-color);
}

main > footer {
  margin: 1em 0;
  text-align: center;
}

iframe {
  width: 100%;
}

pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background-color: var(--pre-background-color);
  padding: 0.5em;
  border-radius: 0.3em;
}

main section#profile form {
  display: inline;
}
main section#profile > img {
  max-height: 120px;
  width: auto;
  display: block;
  margin: 0px auto 1em 1em;
  float: right;
  border-radius: 4px;
}

main section#profile > * {
  margin-top: 0;
  margin-bottom: 0.5em;
}

main section#profile small {
  opacity: 0.7;
}

main section#profile > ul#links {
  font-family: ui-monospace, monospace;
  font-size: smaller;
  list-style-type: none;
  padding-left: 0;
}

main section#profile > ul#links button {
  border-width: 0;
  background-color: initial;
  padding: 0;
  min-width: initial;
}

main section#profile > ul#links > li {
  margin-bottom: 0.5em;
  display: flex;
  gap: 4px;
  align-items: center;
  margin-right: 0.5em;
  hyphens: none;
}

main section#profile > ul#links > li > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

main section#profile > ul#links > li > a:first-of-type {
  flex-shrink: 1;
}

main section#profile svg {
  vertical-align: middle;
}

main section#profile > ul#links a {
  color: var(--link-color);
}

main section#profile > ul#badges {
  list-style-type: none;
  padding: 0;
  margin: 1em 0;
}

main section#profile > ul#badges li {
  display: inline;
  margin-right: 0.5em;
}

/* For feed indexes */
main ol.feeds {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

main ol.feeds li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-top: 1px solid var(--article-border-color);
  margin: 0;
}

main.feeds form.new_feed input[type=url] {
  width: calc(100% - 8px); /* 8px for default border and padding */
}

.feather-star {
  stroke: var(--favourite-color);
}

.feather-star.favourited {
  color: var(--favourite-color);
  fill: var(--favourite-color);
}

.feather-bookmark {
  stroke: var(--bookmark-color);
}

.feather-bookmark.bookmarked {
  color: var(--bookmark-color);
  fill: var(--bookmark-color);
}

main .f-feed-list-content {
  overflow: hidden; /* Important to make nested flexbox overflow settings work. */
}

main .f-feed-list-content a {
  text-decoration: none;
  color: inherit;
}

main .f-feed-list-content a:hover {
  text-decoration: underline;
}

main .f-feed-list-content > small {
  margin-bottom: 0.3em;
  margin-right: 0.3em;
  hyphens: none;
  display: block;
}

main .f-feed-list-content > small > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  display: block;
}

main .f-feed-list-content > small > a {
  flex-shrink: 1;
  font-family: monospace;
  font-size:  1.1em;
}

main .f-feed-list-content > small > [type="application/rss+xml"]::before,
main .f-feed-list-content > small > [type="application/atom+xml"]::before,
main .f-feed-list-content > small > [type="application/feed+json"]::before,
main .f-feed-list-content > small > [type="text/x-opml"]::before {
  height: 10px;
  width: 10px;
}

body > header {
  display: flex;
  align-items: center;
  gap: 1em;
  justify-content: center;
}

body > header a {
  color: var(--text-color);
  text-decoration: none;
}

body > header a:visited {
  color: var(--text-color);
}

body > footer {
  text-align: center;
  color: var(--footer-text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ground-color);
  margin-left: calc(var(--outer-padding) * -1);
  margin-right: calc(var(--outer-padding) * -1);
  /* padding: 0.6em; */
  height: 40px;
}

body > footer a {
  color: var(--footer-text-color);
}

body > footer a:visited {
  color: var(--footer-text-color);
}

/***********************************************/
/* Adjustments for desktop sized screens */
/***********************************************/
@media screen and (min-width: calc(160px + 350px + 1vw + (2 * 4px) + (4 * 2px))) { /* --desktop-nav-width + --main-width + flex gap + 2 * --outer-padding + 4 * --main-border-width*/
  body main {
    padding-bottom: 0; /* back to "normal" padding on desktop, since there's no mobile nav to cater for */
  }

  body nav#mobile-nav {
    display: none;
  }

  body nav#desktop-nav {
    display: initial;
  }
}