/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

 ul { padding-left: 1em; }
 li { margin-bottom: 1em;}
 li form { display: inline; }
button:enabled, input[type="submit"]:enabled, .fs-buttons img, .close, .frame-close, .trix-editor a, .clear-text { cursor: pointer; }
button:disabled, input[type="submit"]:disabled, select:disabled { cursor: not-allowed !important; color: white; background: #888; }
button.selected { color: white; background-color: green; }
h1 button:not(.selected) { background-color: #fff; opacity: 0.5; }
button.best-first span:before { content: 'Best'; }
button.newest-first span:before { content: 'Newest'; }
.button-line { display: flex; gap: 1em; flex-wrap: wrap; align-items: center; margin: 1.5em 0; }
.button-line>* { margin: 0 auto !important; }
.button-line form { display: inline; }
.chooser button:not(.selected) { background: #888; color: #ddd; }
.button-pair >:nth-child(2) { margin-left: 1em !important; }
.button-pair a { display: inline-block; }

.close { position: absolute; right: 0; z-index: 99; }
 .rate-instructions .close { z-index: 3; }
.highlight { font-weight: bold; color: yellow; }
.wow, .worthy, .meh, .unworthy { padding: .2em; border-radius: .2em; }
.wow { background-color: lightgreen; }
.worthy { background-color: green; }
.meh { background-color: grey; }
.unworthy { background-color: red; }
.rate { font-size: 80%; text-transform: uppercase; color: black; padding: .2em .3em; border-radius: 3px; }
a img, img[class^="toggle-"]  { height: 4cqw; cursor: pointer; }
.edit-handle { height: .75em; }
.my-post { display: inline-block; width: 2em; height: 2em; border-radius: 2em; background-color: #000; color: #fff; justify-items: center; }

body {  margin: 0; overflow: hidden; }

#frames {
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
}

section {
  position: relative;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
  container-type: size;
  flex: 1 0 20em;
  outline: none;
  font-size: max(13px, 1.6cqmax);
  display: flex;
  flex-direction: column;
}

section button {
  font-size: max(13px, 1.6cqmax);
}

section > header {
  flex: 0 0 3em;
}
section.top-row > header > .frame-up, section.bottom-row > footer > .frame-down { display: none;}
.frame-up, .frame-down { color: #f00; font-size: x-large; position: absolute; top: 0; z-index: 9990; cursor: pointer; }
.frame-up:first-child, .frame-down:first-child { left: 1.5em; }
.frame-up:last-child, .frame-down:last-child { right: 1.5em; }

.frame-body {
  flex-grow: 1;
  overflow: auto;
  padding: 0.5em 3% 0.5em 3%;
}

section > footer {
  position: relative;
  flex: 0 0 3em;
}

button.frame-back {
  margin-top: .5em;
	width: 2em; height: 2em; border-radius: 2em;
  background: url("/assets/arrow_back-bcfff7c2.svg") no-repeat 50% 50% / 2em #ffff;
  z-index: 2; cursor: pointer; opacity: 0.7
}

.frame-close { 
  margin-top: .5em;
  z-index: 99; font-size: 1.3em; float: right;
}

.frame-duplicate {
  background: url("/assets/frame-duplicate-0e6b63a0.svg") no-repeat 50% 50% / 2em #ffff;
}

#frames > section:only-child .frame-close { display: none; }

.longdeba-home {
  display: inline-block;
  height: 3em; width: 2em;
  background: url("/assets/longdeba-7ad66024.svg") no-repeat 50% 50% / 1.5em;
}

.user-profile {
  display: inline-block;
  height: 3em; width: 2em;
  background: url("/assets/envelope-head-40f7ee42.svg") no-repeat 50% 50% / 1.7em;
  float: right;
}

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

.frame-body > header button {
  font-size: 60%;
}


.frame-body > header, .watchlist-link {
  position: absolute;
  height: 3em;
  padding: 0 1em;
  left: 2.5em; right: 2em;
  z-index: 999;
  background-color: #000; color: #fff;
  border-radius: .6em;
}

.watchlist-link { text-align: center; }
#frames:not(.alert) .watchlist-link:after { content: "Watchlist"; }
#frames.alert .watchlist-link:after { content: "New Watchlist Items"; }

.frame-body > header > h1 { font-size: 100%; text-align: center; }
frame-body > header > h1 span { display: inline-block; }
.frame-body > header > h1 > button { display: inline-block; vertical-align: middle; font-size: large; }
.frame-body > header > h1 a { color: #fff; }
.toggle-search { position: absolute; right: 0.3em; top: 0.3em; }
.search-posts { flex-grow: 1;}
.search-posts div { position: relative; }
.search-posts input { width: 100%; font-size: 70%;}
.search-posts span { display: block; text-align: center; }
.clear-text { position: absolute; top: .4em; right: .1em; font-size: 70%; }

article { margin: 1em 0; }

.post-content > h1, .post-author, .post-when, .post-rating, .post-rating-stats, .post-index-ends { text-align: center; }
.post-content > h1 { margin: 0; }
.post-rating, .post-rating-stats { margin: 1em 0; }
.post-index {width: 40%; height: 3em; margin: 0 auto; }
.post-index a { text-decoration: none; font-weight: 900; }
.post-index a[rel="prev"] { float: left; }
.post-index a[rel="next"] { float: right; }
.article-comments { display: flex; gap: 1em; align-items: center; justify-content: center; width: 100%; text-align: center; }
.article-topics ul { list-style-type: none;  }
.article-topics li { display: inline;  }
.article-topics li:not(:last-child):after { content: "|"; }
.reply { display: block;}

.profile > div { border-top: 1px; border-bottom: 1px; border-left: 2px; border-right: 2px; border-style: solid; border-color: #000; padding: 0 1em; }
.profile > div:nth-child(2n) { background-color: #aaa; }
.profile > div:nth-child(2n+1) { background-color: #ffefaf; }
.profile button, .profile input { display: block; margin: 1em auto; }
.profile input[type="text"] { width: 20em; max-width: 100%; font-size: large; }

.profile-stats { text-align: center; }


.unworthy-reason-selector ul { margin: 0 !important; padding: 1em !important; }
.unworthy-reason-selector li { text-align: center; margin-bottom: .5em; }
.unworthy-reason-selector input { margin-top: 1em; color: black; background-color: yellow; }
.popup { position: fixed; max-width: 100vw; }
.popup input[type="checkbox"] { display: none; }
.popup ul { list-style-type: none; }
.popup ul li:nth-child(4), .popup ul li:nth-child(5) { display: inline-block; }
#rating-popup { z-index: 999; background: black; color: white; padding: 0.5em; border: 2px solid white; }
#rating-popup span, span.rating { text-transform: uppercase; text-align: center;}
.post-content .unworthy { display: inline-block; text-align: center;}
.post-content .unworthy ul { list-style-type: none; margin: 0; padding: 0; font-size: 60%; color: white; }
.rate-instructions { z-index: 1; text-align: left !important;}
.guide { top: 0; bottom: auto; background-color: black; color: white; margin: 0 auto; }
.guide { overflow: auto; max-height: 100vh; z-index: 4; text-align: center; }
.guide > div { padding: 0.5em; }
.guide .just-agreement { background-color: orange; color: black }
.guide .worthy { background-color: green; color: white;}
.guide .unworthy { background-color: red; color: white; }
.guide .meh { background-color: #666; color: white; text-align: center;}
/* .guide p, .guide li, .guide button { font-size: 16px; font-family: arial; } */
.guide .agree.selected { background-color: #51b155; color: white; content: 'DISAGREE ✅'}
.guide button.worthy.selected { background-color: yellow; color: black; }
.guide button.unworthy.selected { background-color: yellow; color: black; }
 .guide p, .guide ul { margin: 0;  }
.guide p { padding: 0.5em 0; }
.guide ul { padding-left: 1em; }
.guide ul.and li { margin-bottom: 0.5em; }
.guide ul { padding-bottom: 1px !important; }
.guide ul.buttons li { margin-bottom: 1em; }

.compose-buttons { position: absolute; top: 0.2em; right: .2em; z-index: 2; }
.compose-buttons * { vertical-align: middle; }
.compose-buttons .fs-buttons img { height: 1.5em; }
.compose-buttons #message-length, .compose-buttons #abandon { font-size: .7em; }
.check-draft { font-size: .7em !important; padding: .3em !important; }
.check-draft:enabled { color: #ffefaf; background-color: #006100; }
.post-length { font-weight: bold; color: #006100; }
.post-length.too-long { color: red }
.publication-cycle { color: white; background: black; width: 1.2em; height: 1.2em; border-radius: 1.2em; display: inline-block; text-align: center; }