/*
88888888ba
88      "8b                                  ,d
88      ,8P                                  88
88aaaaaa8P' ,adPPYba, ,adPPYba,  ,adPPYba, MM88MMM
88""""88'  a8P_____88 I8[    "" a8P_____88   88
88    `8b  8PP"""""""  `"Y8ba,  8PP"""""""   88
88     `8b "8b,   ,aa aa    ]8I "8b,   ,aa   88,
88      `8b `"Ybbd8"' `"YbbdP"'  `"Ybbd8"'   "Y888
*/

/* A (more) Modern CSS Reset by Andy Bell, updated 2023-09-18 */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/*
  ,ad8888ba,
 d8"'    `"8b
d8'
88             ,adPPYba,  8b,dPPYba,  ,adPPYba,
88            a8"     "8a 88P'   "Y8 a8P_____88
Y8,           8b       d8 88         8PP"""""""
 Y8a.    .a8P "8a,   ,a8" 88         "8b,   ,aa
  `"Y8888Y"'   `"YbbdP"'  88          `"Ybbd8"'
*/

html {
  --background-color: rgba(12, 12, 12, 1);
  --bright-text-color: rgba(240, 240, 240, 1);
  --default-text-color: rgba(192, 192, 192, 1);
  --unimportant-text-color: rgba(128, 128, 128, 1);
  --blockquote-text-color: rgba(112, 112, 92, 1);
  --emphasize-color: rgba(192, 0, 0, 1);
  --font-size: 14px;
  --tag-border-color: rgba(128, 128, 0, 1);
  --tag-background-color: rgba(128, 128, 0, 0.25);
  --comment-count-background-color: rgba(128, 128, 128, 0.25);
  --input-border-color: rgba(128, 128, 128, 0.25);
  --input-background-color: rgba(128, 128, 128, 0.05);
  --link-color-default: rgba(138, 177, 255, 1);
  --link-color-visited: rgba(79, 138, 255, 1);
  --new-user-color: rgba(64, 160, 64, 1);
  --saved-story-color: rgba(96, 192, 96, 1);
  --comment-poster-color: rgba(0, 128, 160, 1);
  --comment-author-color: rgba(128, 128, 32, 1);
}

body {
  background: var(--background-color);
  color: var(--default-text-color);
  font-family: sans-serif;
  font-size: var(--font-size);
  padding: 0;
  margin: 0;
}

a {
  color: var(--default-text-color);
  text-decoration: none;
}

abbr {
  cursor: help;
}

@supports (field-sizing: content) {
  textarea {
    field-sizing: content;
  }
}

/*
88888888ba
88      "8b
88      ,8P
88aaaaaa8P' ,adPPYYba,  ,adPPYb,d8  ,adPPYba,
88""""""'   ""     `Y8 a8"    `Y88 a8P_____88
88          ,adPPPPP88 8b       88 8PP"""""""
88          88,    ,88 "8a,   ,d88 "8b,   ,aa
88          `"8bbdP"Y8  `"YbbdP"Y8  `"Ybbd8"'
                        aa,    ,88
                         "Y8bbdP"
*/

.page {
  --page-padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: var(--page-padding) 0;
  width: 1000px;
  margin: auto;
}

@media (max-width: 1024px) {
  .page {
    width: calc(100% - 2 * var(--page-padding));
  }
}

.subroutes {
  margin: 16px 0;
  justify-content: flex-end;
  font-weight: bold;
  display: flex;
  gap: 16px;
}

/*
88        88                                88
88        88                                88
88        88                                88
88aaaaaaaa88  ,adPPYba, ,adPPYYba,  ,adPPYb,88  ,adPPYba, 8b,dPPYba,
88""""""""88 a8P_____88 ""     `Y8 a8"    `Y88 a8P_____88 88P'   "Y8
88        88 8PP""""""" ,adPPPPP88 8b       88 8PP""""""" 88
88        88 "8b,   ,aa 88,    ,88 "8a,   ,d88 "8b,   ,aa 88
88        88  `"Ybbd8"' `"8bbdP"Y8  `"8bbdP"Y8  `"Ybbd8"' 88
*/

.header {
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
  overflow: hidden;
}

.header .menu-scrolling {
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  align-self: stretch;
}

.header .left-menu-wrapper {
  flex-grow: 1;
}

.header ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 12px;
}

.header ul li {
  font-weight: bold;
  color: var(--default-text-color);
}

.header ul li a {
  text-decoration: none;
  padding-bottom: 2px;
}

.header ul li a.active {
  border-bottom: 2px solid var(--emphasize-color);
}

.header ul li a.disabled {
  color: var(--unimportant-text-color);
}

.header .logo {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  background-image: url(/favicon.svg);
  background-size: cover;
}

/*
 ad88888ba                                                   88          88
d8"     "8b ,d                                               88          ""             ,d
Y8,         88                                               88                         88
`Y8aaaaa, MM88MMM ,adPPYba,  8b,dPPYba, 8b       d8          88          88 ,adPPYba, MM88MMM
  `"""""8b, 88   a8"     "8a 88P'   "Y8 `8b     d8' aaaaaaaa 88          88 I8[    ""   88
        `8b 88   8b       d8 88          `8b   d8'  """""""" 88          88  `"Y8ba,    88
Y8a     a8P 88,  "8a,   ,a8" 88           `8b,d8'            88          88 aa    ]8I   88,
 "Y88888P"  "Y888 `"YbbdP"'  88             Y88'             88888888888 88 `"YbbdP"'   "Y888
                                            d8'
                                           d8'
*/

.story-item.flagged {
  opacity: 40%;
}

.story-item .flagging {
  display: inline;
}

.story-item .unflagging {
  display: none;
}

.story-item.flagged .flagging {
  display: none;
}

.story-item.flagged .unflagging {
  display: inline;
}

.story-item.saved .save {
  color: var(--saved-story-color);
}

.story-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.story-header {
  display: flex;
  gap: 8px;
}

.story-content {
  margin-top: 16px;
  margin-left: 30px;
}

.story-long {
  font-size: 16px;
}

.story-long.is-long::after {
  content: '';
  width: 12px;
  height: 12px;
  display: inline-block;
  background-image: url('data:image/svg+xml;utf8,<svg style="stroke: rgba(192, 192, 192, 1)" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"><defs><style>line {stroke: inherit;stroke-linecap: round;stroke-width: 1.5px;}</style></defs><line x1="8" y1="2" x2="14" y2="2"/><line x1="2" y1="5" x2="14" y2="5"/><line x1="2" y1="8" x2="14" y2="8"/><line x1="2" y1="11"  x2="8" y2="11"/></svg>');
  position: relative;
  top: 2px;
}

.story-header .points {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2px;
}

.story-header .point-value {
  font-size: 0.8em;
}

.story-header .vote-up {
  font-size: 24px;
  line-height: 24px;
  width: 24px;
  height: 24px;
  color: var(--unimportant-text-color);
  cursor: pointer;
  text-decoration: none;
}

.story-header .vote-up:hover,
.story-header .vote-up.voted {
  color: var(--emphasize-color);
}

.story-header .title {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.story-header .story-tags {
  margin: 0 2px;
  vertical-align: top;
}

.story-header .story-tag {
  border-radius: 4px;
  border: 1px solid var(--tag-border-color);
  background-color: var(--tag-background-color);
  padding: 0 6px 1px;
  font-size: 0.8em;
  line-height: 1em;
}

.story-header .story-link {
  line-height: 1.3em;
}

.story-header .story-link-text {
  font-weight: bold;
  font-size: 1.1em;
  text-decoration: none;
  color: var(--link-color-default);
}

.story-header .story-link-text:visited {
  color: var(--link-color-visited);
}

.story-header .story-domain {
  font-style: italic;
  font-size: 0.9em;
  color: var(--unimportant-text-color);
}

.story-header .comment-count {
  align-self: center;
  border-radius: 8px;
  display: flex;
  border: 1px solid var(--unimportant-text-color);
  background-color: var(--comment-count-background-color);
  padding: 2px 6px;
  color: var(--default-text-color);
  text-decoration: none;
}

.story-header .story-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92em;
}

.pager {
  padding: 16px 32px;
  display: flex;
  gap: 16px;
}

/*
88888888888
88
88
88aaaaa  ,adPPYba,  8b,dPPYba, 88,dPYba,,adPYba,
88""""" a8"     "8a 88P'   "Y8 88P'   "88"    "8a
88      8b       d8 88         88      88      88
88      "8a,   ,a8" 88         88      88      88
88       `"YbbdP"'  88         88      88      88
*/

.form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.form .block {
  display: flex;
  align-items: flex-start;
}

.form .block.comfort {
  margin: 12px 0;
}

.form .block .inputs {
  display: flex;
  flex-grow: 1;
  align-items: center;
  gap: 8px;
}

.form .block .inputs .fill-width {
  flex-grow: 1;
}

.form .block .inputs .nobold {
  font-weight: normal;
}

.form .block > label {
  width: 100px;
  min-width: 100px;
  font-weight: bold;
  margin-top: 4px;
}

.form .block input:focus,
.form .block textarea:focus {
  outline: none;
  border-color: var(--unimportant-text-color);
}

.form .block input,
.form .block textarea {
  background-color: var(--input-background-color);
  color: var(--default-text-color);
  border: 1px solid var(--input-border-color);
  padding: 4px 6px;
}

.form .block input[type='text'],
.form .block input[type='email'],
.form .block textarea {
  width: 100%;
}

.form .block input[type='button'],
.form .block input[type='submit'] {
  padding: 4px 16px;
  align-self: stretch;
}

.form .block input[type='checkbox'] + label {
  margin-top: 0;
}

/*
 ad88888ba              88                             88
d8"     "8b             88                             ""   ,d
Y8,                     88                                  88
`Y8aaaaa,   88       88 88,dPPYba,  88,dPYba,,adPYba,  88 MM88MMM
  `"""""8b, 88       88 88P'    "8a 88P'   "88"    "8a 88   88
        `8b 88       88 88       d8 88      88      88 88   88
Y8a     a8P "8a,   ,a88 88b,   ,a8" 88      88      88 88   88,
 "Y88888P"   `"YbbdP'Y8 8Y"Ybbd8"'  88      88      88 88   "Y888
*/

.story-submit {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 800px;
  margin: auto;
}

.story-submit .tag-chips {
  white-space: nowrap;
  display: none;
  gap: 4px;
}

.story-submit .tag-chips-tag {
  border-radius: 4px;
  border: 1px solid var(--tag-border-color);
  background-color: var(--tag-background-color);
  padding: 4px 4px 4px 6px;
  font-size: 0.8em;
  line-height: 1em;
  display: flex;
  gap: 4px;
}

.story-submit .tag-chips-tag .close {
  cursor: pointer;
  color: var(--unimportant-text-color);
  font-size: 1.4em;
  padding: 0 2px 0 4px;
}

/*
 ad88888ba
d8"     "8b ,d
Y8,         88
`Y8aaaaa, MM88MMM ,adPPYba,  8b,dPPYba, 8b       d8
  `"""""8b, 88   a8"     "8a 88P'   "Y8 `8b     d8'
        `8b 88   8b       d8 88          `8b   d8'
Y8a     a8P 88,  "8a,   ,a8" 88           `8b,d8'
 "Y88888P"  "Y888 `"YbbdP"'  88             Y88'
                                            d8'
                                           d8'
*/

.story-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.story-wrapper .new-comment {
  padding-left: 32px;
}

/*
  ,ad8888ba,
 d8"'    `"8b                                                                           ,d
d8'                                                                                     88
88             ,adPPYba,  88,dPYba,,adPYba,  88,dPYba,,adPYba,   ,adPPYba, 8b,dPPYba, MM88MMM
88            a8"     "8a 88P'   "88"    "8a 88P'   "88"    "8a a8P_____88 88P'   `"8a  88
Y8,           8b       d8 88      88      88 88      88      88 8PP""""""" 88       88  88
 Y8a.    .a8P "8a,   ,a8" 88      88      88 88      88      88 "8b,   ,aa 88       88  88,
  `"Y8888Y"'   `"YbbdP"'  88      88      88 88      88      88  `"Ybbd8"' 88       88  "Y888
*/

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.comment-list a {
  color: inherit;
}

.comment-item {
  display: flex;
  gap: 4px;
}

.comment-item .meta {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.comment-item .comment-actions {
  font-size: 0.9em;
  color: var(--unimportant-text-color);
  flex-wrap: wrap;
}

.comment-item .comment-actions .user-name {
  padding-left: 2px;
}

.comment-item .points {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 24px;
}

.comment-item .point-value {
  font-size: 0.8em;
}

.comment-item .vote-up {
  font-size: 24px;
  line-height: 24px;
  width: 24px;
  height: 24px;
  color: var(--unimportant-text-color);
  cursor: pointer;
  text-decoration: none;
}

.comment-item .vote-up:hover,
.comment-item .vote-up.voted {
  color: var(--emphasize-color);
}

.comment-item .comment-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.comment-item > .meta > .children {
  border-left: 1px solid var(--comment-count-background-color);
  padding-left: 16px;
  margin-left: -20px;
  margin-top: 8px;
}

.comment-item.deleted > .meta > .comment-actions,
.comment-item.deleted > .meta > .comment-content {
  color: var(--tag-background-color);
}

.comment-submit {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: auto;
}

.markdown-toggle-wrapper {
  text-align: right;
  flex-grow: 1;
  user-select: none;
}

.markdown-toggle {
  float: right;
  cursor: pointer;
}

.markdown-help summary {
  text-align: right;
  margin-bottom: 16px;
}

.markdown-description {
  border: 1px solid var(--unimportant-text-color);
}

.markdown-description table {
  width: 100%;
  border-collapse: collapse;
}

.markdown-description table td {
  padding: 4px 8px;
}

.markdown-description table td:first-child {
  width: min-content;
}

.markdown-description table tr:nth-child(odd) {
  background-color: var(--input-background-color);
}

.for-flat {
  display: none;
}

.flat .for-flat {
  display: inline;
}

.collapser {
  cursor: pointer;
}

.collapser::after {
  background-image: url('data:image/svg+xml;utf8,<svg style="stroke: rgba(128, 128, 128, 1)" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"><defs><style>line {stroke: inherit;stroke-linecap: round;stroke-width: 1.5px;}</style></defs><line x1="1" y1="1" x2="4" y2="1" /><line x1="1" y1="1" x2="1" y2="15" /><line x1="1" y1="15" x2="4" y2="15" /><line x1="5" y1="8" x2="11" y2="8" /><line x1="12" y1="1" x2="15" y2="1" /><line x1="15" y1="1" x2="15" y2="15" /><line x1="12" y1="15" x2="15" y2="15" /></svg>');
  content: '';
  width: 16px;
  height: 16px;
  display: block;
  position: relative;
  top: 4px;
  margin-bottom: 12px;
  padding: 0 4px;
  background-repeat: no-repeat;
  background-position: center center;
}

.points-placeholder {
  display: none;
  width: 24px;
}

input:checked + div .children,
input:checked + div .points,
input:checked + div .comment-content {
  display: none;
}

input:checked + div .collapser::after {
  background-image: url('data:image/svg+xml;utf8,<svg style="stroke: rgba(128, 128, 128, 1)" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"><defs><style>line {stroke: inherit;stroke-linecap: round;stroke-width: 1.5px;}</style></defs><line x1="1" y1="1" x2="4" y2="1" /><line x1="1" y1="1" x2="1" y2="15" /><line x1="1" y1="15" x2="4" y2="15" /><line x1="5" y1="8" x2="11" y2="8" /><line x1="12" y1="1" x2="15" y2="1" /><line x1="15" y1="1" x2="15" y2="15" /><line x1="12" y1="15" x2="15" y2="15" /><line x1="8" y1="5" x2="8" y2="11" /></svg>');
}

input:checked + div .points-placeholder {
  display: block;
}

/*
88b           d88                       88                88
888b         d888                       88                88
88`8b       d8'88                       88                88
88 `8b     d8' 88 ,adPPYYba, 8b,dPPYba, 88   ,d8  ,adPPYb,88  ,adPPYba,  8b      db      d8 8b,dPPYba,
88  `8b   d8'  88 ""     `Y8 88P'   "Y8 88 ,a8"  a8"    `Y88 a8"     "8a `8b    d88b    d8' 88P'   `"8a
88   `8b d8'   88 ,adPPPPP88 88         8888[    8b       88 8b       d8  `8b  d8'`8b  d8'  88       88
88    `888'    88 88,    ,88 88         88`"Yba, "8a,   ,d88 "8a,   ,a8"   `8bd8'  `8bd8'   88       88
88     `8'     88 `"8bbdP"Y8 88         88   `Y8a `"8bbdP"Y8  `"YbbdP"'      YP      YP     88       88
*/

.marked-down a {
  color: var(--link-color-default);
  text-decoration: underline;
}

.marked-down a[target='_blank']::after {
  content: '';
  width: 16px;
  height: 12px;
  display: inline-block;
  background-image: url('data:image/svg+xml;utf8,<svg style="fill: rgba(138, 177, 255, 1)" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18 18"><path fill="inherit" d="M12.1.6a.944.944 0 0 0 .2 1.04l1.352 1.353L10.28 6.37a.956.956 0 0 0 1.35 1.35l3.382-3.38 1.352 1.352a.944.944 0 0 0 1.04.2.958.958 0 0 0 .596-.875V.96a.964.964 0 0 0-.96-.96h-4.057a.958.958 0 0 0-.883.6z"/><path fill="inherit" d="M14 11v5a2.006 2.006 0 0 1-2 2H2a2.006 2.006 0 0 1-2-2V6a2.006 2.006 0 0 1 2-2h5a1 1 0 0 1 0 2H2v10h10v-5a1 1 0 0 1 2 0z"/></svg>');
  background-repeat: no-repeat;
  background-position: right center;
  position: relative;
  top: 1px;
}

.marked-down a:visited {
  color: var(--link-color-visited);
}

.marked-down table,
.marked-down table td,
.marked-down table th {
  border: 1px solid var(--unimportant-text-color);
  border-collapse: collapse;
  padding: 2px 8px;
}

.marked-down p {
  margin: 12px 0;
}

.marked-down p:first-child {
  margin-top: 4px;
}

.marked-down blockquote {
  border-left: 2px solid var(--unimportant-text-color);
  color: var(--blockquote-text-color);
  padding: 0;
  margin: 8px;
  padding-left: 8px;
}

.marked-down hr {
  border: 0;
  border-bottom: 1px solid var(--unimportant-text-color);
  margin: 1em 0;
}

.marked-down code {
  border: 1px solid var(--unimportant-text-color);
  background-color: var(--comment-count-background-color);
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 0.82em;
}

.marked-down pre code {
  border: unset;
  background-color: unset;
  padding: 0;
  border-radius: 0;
  font-size: 1em;
}

.marked-down pre {
  border: 1px solid var(--unimportant-text-color);
  background-color: var(--comment-count-background-color);
  color: var(--bright-text-color);
  padding: 2px 8px;
  border-left-width: 5px;
  font-size: 0.95em;
}

.marked-down ul {
  padding-left: 16px;
  margin: 0;
}

/*
 ad88888ba                                              88
d8"     "8b                                             88
Y8,                                                     88
`Y8aaaaa,    ,adPPYba, ,adPPYYba, 8b,dPPYba,  ,adPPYba, 88,dPPYba,
  `"""""8b, a8P_____88 ""     `Y8 88P'   "Y8 a8"     "" 88P'    "8a
        `8b 8PP""""""" ,adPPPPP88 88         8b         88       88
Y8a     a8P "8b,   ,aa 88,    ,88 88         "8a,   ,aa 88       88
 "Y88888P"   `"Ybbd8"' `"8bbdP"Y8 88          `"Ybbd8"' 88       88
*/

.search {
  margin-left: 38px;
}

.search .form {
  width: 600px;
  max-width: calc(100% - 38px);
}

.search h3 {
  margin-top: 4px;
  margin-bottom: 16px;
}

.search .form .block > label {
  width: 200px;
  min-width: 200px;
}

.search .form .block label {
  font-weight: normal;
  margin-top: 4px;
}

/*
88                                 88
88                                 ""
88
88          ,adPPYba,   ,adPPYb,d8 88 8b,dPPYba,
88         a8"     "8a a8"    `Y88 88 88P'   `"8a
88         8b       d8 8b       88 88 88       88
88         "8a,   ,a8" "8a,   ,d88 88 88       88
88888888888 `"YbbdP"'   `"YbbdP"Y8 88 88       88
                        aa,    ,88
                         "Y8bbdP"
*/

.login {
  margin-left: 38px;
}

.login .form {
  width: 600px;
  max-width: calc(100% - 38px);
}

.login h3 {
  margin-top: 4px;
  margin-bottom: 16px;
}

.login .form .block label {
  width: 200px;
  min-width: 200px;
  font-weight: normal;
  margin-top: 4px;
}

/*
88888888ba                        88                                                 88
88      "8b                       ""             ,d                            ,d    ""
88      ,8P                                      88                            88
88aaaaaa8P' ,adPPYba,  ,adPPYb,d8 88 ,adPPYba, MM88MMM 8b,dPPYba, ,adPPYYba, MM88MMM 88  ,adPPYba,  8b,dPPYba,
88""""88'  a8P_____88 a8"    `Y88 88 I8[    ""   88    88P'   "Y8 ""     `Y8   88    88 a8"     "8a 88P'   `"8a
88    `8b  8PP""""""" 8b       88 88  `"Y8ba,    88    88         ,adPPPPP88   88    88 8b       d8 88       88
88     `8b "8b,   ,aa "8a,   ,d88 88 aa    ]8I   88,   88         88,    ,88   88,   88 "8a,   ,a8" 88       88
88      `8b `"Ybbd8"'  `"YbbdP"Y8 88 `"YbbdP"'   "Y888 88         `"8bbdP"Y8   "Y888 88  `"YbbdP"'  88       88
                       aa,    ,88
                        "Y8bbdP"
*/

.registration {
  margin-left: 38px;
}

.registration .form {
  width: 600px;
  max-width: calc(100% - 38px);
}

.registration h3 {
  margin-top: 4px;
  margin-bottom: 16px;
}

.registration .form .block label {
  width: 140px;
  min-width: 140px;
  font-weight: normal;
  margin-top: 4px;
}

/*
88888888ba                           ad88 88 88
88      "8b                         d8"   "" 88
88      ,8P                         88       88
88aaaaaa8P' 8b,dPPYba,  ,adPPYba, MM88MMM 88 88  ,adPPYba,
88""""""'   88P'   "Y8 a8"     "8a  88    88 88 a8P_____88
88          88         8b       d8  88    88 88 8PP"""""""
88          88         "8a,   ,a8"  88    88 88 "8b,   ,aa
88          88          `"YbbdP"'   88    88 88  `"Ybbd8"'
*/

.profile {
  margin-left: 38px;
}

.profile .form {
  width: 600px;
  max-width: calc(100% - 38px);
}

.profile h3 {
  margin-top: 4px;
  margin-bottom: 16px;
}

.profile .form .block > label {
  width: 200px;
  min-width: 200px;
}

.profile .form .block label {
  font-weight: normal;
  margin-top: 4px;
}

.public-profile {
  margin-left: 38px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.public-profile h3 {
  margin-top: 4px;
  margin-bottom: 16px;
}

.public-profile .block {
  display: flex;
  gap: 16px;
}

.public-profile .label {
  font-weight: bold;
  width: 120px;
}

.public-profile a {
  text-decoration: underline;
  color: var(--link-color-default);
}

.public-profile a:visited {
  color: var(--link-color-visited);
}

.user-avatar {
  border-radius: 100vw;
  width: 18px;
  height: 18px;
  background-image: linear-gradient(45deg, magenta, cyan);
}

/*
88                         88
88                         ""   ,d
88                              88
88 8b,dPPYba,  8b       d8 88 MM88MMM ,adPPYba,
88 88P'   `"8a `8b     d8' 88   88   a8P_____88
88 88       88  `8b   d8'  88   88   8PP"""""""
88 88       88   `8b,d8'   88   88,  "8b,   ,aa
88 88       88     "8"     88   "Y888 `"Ybbd8"'
*/

.invite {
  margin-left: 38px;
}

.invite .form {
  width: 600px;
  max-width: calc(100% - 38px);
}

.invite h3 {
  margin-top: 4px;
  margin-bottom: 16px;
}

.invite .form .block > label {
  width: 200px;
  min-width: 200px;
}

.invite .form .block label {
  font-weight: normal;
  margin-top: 4px;
}

/*
88        88
88        88                                          ,d
88        88                                          88
88        88 ,adPPYba,  ,adPPYba, 8b,dPPYba,        MM88MMM 8b,dPPYba,  ,adPPYba,  ,adPPYba,
88        88 I8[    "" a8P_____88 88P'   "Y8 aaaaaaaa 88    88P'   "Y8 a8P_____88 a8P_____88
88        88  `"Y8ba,  8PP""""""" 88         """""""" 88    88         8PP""""""" 8PP"""""""
Y8a.    .a8P aa    ]8I "8b,   ,aa 88                  88,   88         "8b,   ,aa "8b,   ,aa
 `"Y8888Y"'  `"YbbdP"'  `"Ybbd8"' 88                  "Y888 88          `"Ybbd8"'  `"Ybbd8"'
*/

.user-tree-wrapper h3 {
  margin-top: 4px;
  margin-bottom: 16px;
}

.new-user-list {
  margin: 16px 0;
}

.user-tree ul {
  margin: 0;
  padding: 0;
  padding-left: 16px;
  margin-left: 6px;
  border-left: 1px solid var(--unimportant-text-color);
  list-style: none;
}

.user-tree li::before {
  content: '';
  border-top: 1px solid var(--unimportant-text-color);
  width: 12px;
  display: block;
  position: relative;
  top: 12px;
  left: -16px;
}

.user-tree a {
  text-decoration: underline;
  color: var(--link-color-default);
}

.user-tree a:visited {
  color: var(--link-color-visited);
}

.user-tree a.inactive {
  text-decoration: line-through;
  color: var(--unimportant-text-color);
}

.user-tree > ul {
  border-left-width: 0;
}

/*
88888888888
88                               ,d
88                               88
88aaaaa  ,adPPYba,   ,adPPYba, MM88MMM ,adPPYba, 8b,dPPYba,
88""""" a8"     "8a a8"     "8a  88   a8P_____88 88P'   "Y8
88      8b       d8 8b       d8  88   8PP""""""" 88
88      "8a,   ,a8" "8a,   ,a8"  88,  "8b,   ,aa 88
88       `"YbbdP"'   `"YbbdP"'   "Y888 `"Ybbd8"' 88
*/

.footer {
  justify-content: flex-end;
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
  overflow: auto;
}

.footer ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 12px;
}

.footer ul li {
  color: var(--default-text-color);
}

.footer ul li a {
  text-decoration: none;
  padding-bottom: 2px;
}

.footer ul li a.active {
  border-bottom: 2px solid var(--emphasize-color);
}

.footer ul li a.disabled {
  color: var(--unimportant-text-color);
}

/*
88888888ba
88      "8b
88      ,8P
88aaaaaa8P' ,adPPYba, ,adPPYba, 8b,dPPYba,   ,adPPYba,  8b,dPPYba,  ,adPPYba,  ,adPPYba,
88""""88'  a8P_____88 I8[    "" 88P'    "8a a8"     "8a 88P'   `"8a I8[    "" a8P_____88
88    `8b  8PP"""""""  `"Y8ba,  88       d8 8b       d8 88       88  `"Y8ba,  8PP"""""""
88     `8b "8b,   ,aa aa    ]8I 88b,   ,a8" "8a,   ,a8" 88       88 aa    ]8I "8b,   ,aa
88      `8b `"Ybbd8"' `"YbbdP"' 88`YbbdP"'   `"YbbdP"'  88       88 `"YbbdP"'  `"Ybbd8"'
                                88
                                88
*/

.response {
  border-radius: 8px;
  border: 1px solid var(--unimportant-text-color);
  background-color: var(--input-background-color);
  padding: 4px 12px;
  margin: 16px 0;
}

.response.error {
  border-color: rgba(192, 64, 64, 0.25);
  background-color: rgba(192, 64, 64, 0.1);
}

.response.success {
  border-color: rgba(64, 192, 64, 0.25);
  background-color: rgba(64, 192, 64, 0.1);
}

/*
88888888888 88                                    88
88          88                                    ""
88          88
88aaaaa     88 ,adPPYYba,  ,adPPYb,d8  ,adPPYb,d8 88 8b,dPPYba,   ,adPPYb,d8
88"""""     88 ""     `Y8 a8"    `Y88 a8"    `Y88 88 88P'   `"8a a8"    `Y88
88          88 ,adPPPPP88 8b       88 8b       88 88 88       88 8b       88
88          88 88,    ,88 "8a,   ,d88 "8a,   ,d88 88 88       88 "8a,   ,d88
88          88 `"8bbdP"Y8  `"YbbdP"Y8  `"YbbdP"Y8 88 88       88  `"YbbdP"Y8
                           aa,    ,88  aa,    ,88                 aa,    ,88
                            "Y8bbdP"    "Y8bbdP"                   "Y8bbdP"
*/

.flag-menu-backdrop {
  user-select: none;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.flag-menu {
  position: absolute;
  border: 1px solid var(--input-border-color);
  background-color: black;
}

.flag-menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
  cursor: default;
}

.flag-menu ul li {
  cursor: pointer;
  padding: 4px 24px 4px 12px;
}

.flag-menu ul li.cancel {
  background-color: var(--tag-background-color);
}

.flag-menu ul li:not(:last-child) {
  border-bottom: 1px solid var(--input-border-color);
}

.flag-menu ul li:hover {
  background-color: var(--input-border-color);
  border-bottom-color: transparent;
}

/*
88 88888888ba    ,ad8888ba,
88 88      "8b  d8"'    `"8b                                   ,d
88 88      ,8P d8'                                             88
88 88aaaaaa8P' 88             ,adPPYba, ,adPPYYba, ,adPPYba, MM88MMM
88 88""""88'   88            a8"     "" ""     `Y8 I8[    ""   88
88 88    `8b   Y8,           8b         ,adPPPPP88  `"Y8ba,    88
88 88     `8b   Y8a.    .a8P "8a,   ,aa 88,    ,88 aa    ]8I   88,
88 88      `8b   `"Y8888Y"'   `"Ybbd8"' `"8bbdP"Y8 `"YbbdP"'   "Y888
*/

.irccast-log {
  border-spacing: 0 8px;
}

.irccast-log td {
  vertical-align: top;
  padding-right: 8px;
}

.irccast-log td:nth-of-type(1) {
  font-size: 12px;
  color: var(--unimportant-text-color);
  padding-top: 4px;
  white-space: nowrap;
}

.irccast-log td:nth-of-type(2) {
  padding-top: 4px;
}

.irccast-log td:nth-of-type(2) a {
  border-radius: 100vw;
  width: 18px;
  height: 18px;
  background-image: linear-gradient(45deg, magenta, cyan);
  display: block;
}

.irccast-log td:nth-of-type(4) a {
  text-decoration: underline;
  color: var(--link-color-default);
}

.irccast-log td:nth-of-type(3) {
  text-align: right;
}

.irccast-log [u='0'] {
  --c: 0;
}
.irccast-log [u='1'] {
  --c: 180;
}
.irccast-log [u='2'] {
  --c: 90;
}
.irccast-log [u='3'] {
  --c: 270;
}
.irccast-log [u='4'] {
  --c: 45;
}
.irccast-log [u='5'] {
  --c: 225;
}
.irccast-log [u='6'] {
  --c: 135;
}
.irccast-log [u='7'] {
  --c: 315;
}
.irccast-log [u='8'] {
  --c: 23;
}
.irccast-log [u='9'] {
  --c: 203;
}
.irccast-log [u='10'] {
  --c: 68;
}
.irccast-log [u='11'] {
  --c: 248;
}
.irccast-log [u='12'] {
  --c: 113;
}
.irccast-log [u='13'] {
  --c: 293;
}
.irccast-log [u='14'] {
  --c: 158;
}
.irccast-log [u='15'] {
  --c: 338;
}

.irccast-log td b {
  --nick-border-color: hsla(var(--c), 100%, 50%, 0.25);
  --nick-background-color: hsla(var(--c), 100%, 50%, 0.1);
  padding: 2px 12px;
  border: 1px solid var(--nick-border-color);
  background-color: var(--nick-background-color);
  border-radius: 100vw;
}

/*
          88888888888                      88
          88                               88
          88                               88
          88aaaaa     8b,dPPYba,   ,adPPYb,88
aaaaaaaa  88"""""     88P'   `"8a a8"    `Y88    aaaaaaaa
""""""""  88          88       88 8b       88    """"""""
          88          88       88 "8a,   ,d88
          88888888888 88       88  `"8bbdP"Y8
*/

.user-name.new-user,
.user-name.new-user:visited {
  color: var(--new-user-color);
}

.user-name.author.author {
  color: var(--comment-poster-color);
}

.user-name.deleted {
  text-decoration: line-through;
  color: var(--unimportant-text-color);
}

.hidden {
  display: none !important;
}

/*
88888888ba                                                                    88
88      "8b                                                                   ""
88      ,8P
88aaaaaa8P' ,adPPYba, ,adPPYba, 8b,dPPYba,   ,adPPYba,  8b,dPPYba,  ,adPPYba, 88 8b       d8  ,adPPYba,
88""""88'  a8P_____88 I8[    "" 88P'    "8a a8"     "8a 88P'   `"8a I8[    "" 88 `8b     d8' a8P_____88
88    `8b  8PP"""""""  `"Y8ba,  88       d8 8b       d8 88       88  `"Y8ba,  88  `8b   d8'  8PP"""""""
88     `8b "8b,   ,aa aa    ]8I 88b,   ,a8" "8a,   ,a8" 88       88 aa    ]8I 88   `8b,d8'   "8b,   ,aa
88      `8b `"Ybbd8"' `"YbbdP"' 88`YbbdP"'   `"YbbdP"'  88       88 `"YbbdP"' 88     "8"      `"Ybbd8"'
                                88
                                88
*/

@media (max-width: 360px) {
  html {
    --font-size: 13px;
  }

  .story-submit {
    width: unset;
  }

  .form .block {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
}