@font-face {
  font-family: "ChiKareGo2";
  src: url("../fonts/20879f289f178c7c99a7623b1bcda06f.eot");
  src:
    url("../fonts/20879f289f178c7c99a7623b1bcda06f.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/20879f289f178c7c99a7623b1bcda06f.woff") format("woff"),
    url("../fonts/20879f289f178c7c99a7623b1bcda06f.woff2") format("woff2"),
    url("../fonts/20879f289f178c7c99a7623b1bcda06f.ttf") format("truetype"),
    url("../fonts/20879f289f178c7c99a7623b1bcda06f.svg#ChiKareGo2")
      format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gohu";
  src: url("../fonts/gohufont-uni-14.woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: var(--font-regular);
  font-size: var(--font-size-regular);
}

[role="menu"] a {
  display: block;
  width: 100%;
  text-decoration: none;
}

[role="menu"] a:active,
[role="menu"] a:focus {
  background-color: var(--primary-2);
}

.menubar .username {
  padding: 1px 8px;
  text-decoration: none;
}

.menubar .username::before {
  content: "～";
  /* color: var(--affirmative); */
  margin-right: 1px;
}

.tabs > [role="tabpanel"] {
  position: relative;
  z-index: 0;
}

.tabs-nojs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

.tabs-nojs .tab {
  display: contents;
}

.tabs-nojs .tab-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
}

.tabs-nojs .tab-label {
  order: 0;
  display: inline-block;
  margin: 0 -1px -1px 0;
  padding: 3px 16px;
  cursor: default;
  user-select: none;
  color: var(--window-fg);
  background: var(--surface-12);
  box-shadow:
    inset 1px 1px var(--border-brightness-14),
    inset -1px 0 var(--border-brightness-06),
    inset 0 -2px var(--border-brightness-07);
}

.tabs-nojs .tab-radio:checked + .tab-label {
  position: relative;
  z-index: 2;
  padding-bottom: 5px;
  background: var(--surface-14);
  box-shadow:
    inset 1px 1px var(--border-brightness-15),
    inset -1px 0 var(--border-brightness-08);
}

.tabs-nojs .tab-radio:focus-visible + .tab-label {
  outline: 1px dotted var(--window-fg);
  outline-offset: -4px;
}

.tabs-nojs .tab-panel {
  order: 1;
  flex-basis: 100%;
  display: none;
  margin-top: -1px;
  background: var(--surface-14);
  box-shadow:
    0 0 0 1px var(--border-brightness-00),
    inset 1px 1px var(--border-brightness-14),
    inset -1px -1px var(--border-brightness-09);
}

.tabs-nojs .tab-radio:checked ~ .tab-panel {
  display: block;
}

.tabs-nojs .tab-textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font-family: var(--font-text);
  font-size: var(--font-size-text);
}

.container {
  max-width: 958px;
  margin: 0 auto;
}

.header {
  color: var(--window-fg);
  background-color: var(--surface-13);
}

.header > .banner {
  font-size: 24px;
}

.header > .banner > a {
  display: block;
  text-decoration: none;
}

.header > .banner > a > .text {
  margin: 8px;
}

.header > .breadcrumbs {
  padding: 4px 2px 4px 2px;
}

.header > .breadcrumbs > ul {
  list-style: none;
  padding: 0px 8px;
}

.header > .breadcrumbs > ul > li::before {
  content: "> ";
}

.header > .breadcrumbs > ul > li.active {
  color: var(--primary-3);
}

.footer {
  color: var(--window-fg);
  background-color: var(--surface-13);
}

.footer > .bar {
  padding: 4px 2px 4px 2px;
}

.footer > .bar > .segment {
  margin: 0px 2px;
}

.title-bar .title-bar-text {
  font-size: inherit;
  /* font-weight: normal; */
}
.title-bar .title-bar-text::before,
.title-bar .title-bar-text::after {
  height: 20px;
}
.title-bar-buttons button {
  width: 18px;
  height: 18px;
}

.button.affirmative,
button.affirmative {
  background-color: var(--affirmative);
}

.button.highlight,
button.highlight {
  background-color: var(--highlight);
}

.button.danger,
button.danger {
  background-color: var(--danger);
}

.detailed .big > img {
  width: 48px;
  height: 48px;
  margin-left: 0px;
}

a {
  color: var(--window-fg);
}

a.button {
  text-decoration: none;
}

.detailed a.icon {
  display: flex;
}

.detailed .icon {
  width: 100%;
  text-decoration: none;
}

.detailed .icon > .icon-label {
  text-align: left;
}

.icon-sublabel {
  font-size: 0.9rem;
  color: var(--surface-05);
}

.dialog {
  max-width: 380px;
  margin: var(--margin) auto;
}

.error {
  background-color: var(--danger) !important;
}

.warn {
  background-color: var(--warn) !important;
}

.info {
  background-color: var(--info) !important;
}

.debug {
  background-color: var(--debug) !important;
}

.unconfirmed {
  color: var(--disabled-fg);
}

.banned {
  color: var(--highlight);
}

.deleted {
  color: var(--danger);
}

.window.authentication {
  max-width: 380px;
  margin: var(--margin) auto;
}

.authentication > .window-body > form .actions {
  margin: 8px 2px;
}

.authentication > .window-body > .social .actions > .button {
  text-align: left;
}

.authentication > .window-body .fieldrow {
  margin: 8px 0;
}

.post {
}

.post > .profile {
  flex: 1;
  max-width: 164px;
}

.post > .profile > .picture {
}

.post > .profile > .username {
  font-size: 1.1rem;
}

.post > .profile > .role {
  font-size: 1rem;
}

.post > .profile > .units {
  font-size: 0.9rem;
}

.post > .profile > .joined {
  font-size: 0.9rem;
}

.post > .content {
  flex: 4;
}

.post > .content > .text {
  margin: 4px var(--margin);
  min-height: 186px;
}

.post > .content > .attachments {
  display: block;
  margin: 4px var(--margin);
}

.post > .content > .attachments > .attachment {
  display: block;
  margin-bottom: 8px;
}

.post > .content > .attachments > .attachment > a > .attachment-image {
  display: block;
  max-width: 100%;
  height: auto;
}

.post > .content > .attachments > .attachment > .attachment-row {
  align-items: center;
}

.post > .content > .signature {
  margin: 4px var(--margin);
  color: var(--border-brightness-08);
  border-top: var(--border-brightness-08) 1px dashed;
  max-height: 160px;
  overflow: hidden;
}

.post > .content > .actions {
  margin-top: auto;
}

.post > .content > .actions > .left-side {
  width: 100%;
}

.post > .content > .actions > .left-side > .timestamp {
  color: var(--disabled-fg);
  padding: 2px var(--margin);
}

.pagination {
  flex-wrap: wrap;
  margin-top: 16px;
}

.editor {
  width: 100%;
  padding: 0px 4px;
}

.editor > div > input {
  width: 100%;
  box-sizing: border-box;
  margin-left: 0px;
}

.editor > textarea {
  font-family: var(--font-text);
  font-size: var(--font-size-text);

  width: 100%;
  box-sizing: border-box;
  margin-left: 0px;
  resize: vertical;
  padding: 8px;
}

/* .reply > form > .actions > .button { */
/*   padding: 4px 14px; */
/* } */

.markdown {
  font-family: var(--font-text);
  font-size: var(--font-size-text);
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  margin: var(--margin) 0px;
  border-bottom: var(--border-brightness-08) 1px dashed;
}

.markdown h1:not(:first-child),
.markdown h2:not(:first-child),
.markdown h3:not(:first-child),
.markdown h4:not(:first-child),
.markdown h5:not(:first-child),
.markdown h6:not(:first-child) {
  margin: calc(var(--margin) * 4) 0px var(--margin) 0px;
}

.markdown ul,
.markdown ol {
  margin: var(--margin) 0px;
  list-style-position: inside;
}

.markdown ul li,
.markdown ol li {
  display: list-item;
}

.markdown ul li > p,
.markdown ol li > p {
  display: inline-block;
  margin: 0;
}

.markdown pre {
  margin: var(--margin) 0px;
}

.markdown blockquote {
  font-style: italic;
  color: var(--text-quote);
}

.markdown > blockquote {
  margin-top: var(--margin);
  margin-bottom: var(--margin);
}

/* blockquote > blockquote { */
/*   margin-left: var(--margin); */
/* } */

.markdown blockquote > p {
  margin: 0;
}

/* TODO: Any way to make the indentation automatic? */
.markdown > blockquote > p::before {
  content: "> ";
}

.markdown > blockquote > blockquote > p::before {
  content: ">> ";
}

.markdown > blockquote > blockquote > blockquote > p::before {
  content: ">>> ";
}

.markdown > blockquote > blockquote > blockquote > blockquote > p::before {
  content: ">>>> ";
}
/* END TODO */

.markdown hr {
  margin: var(--margin) 0px;
  border-bottom: var(--border-brightness-08) 1px dashed;
}

.markdown table {
  margin: var(--margin) 0px;
  width: 100%;
  border: 1px solid var(--border-brightness-15);
  border-right-color: var(--border-brightness-08);
  border-bottom-color: var(--border-brightness-08);
}

.markdown table th,
.markdown table td {
  border: 1px solid var(--border-brightness-08);
  border-right-color: var(--border-brightness-15);
  border-bottom-color: var(--border-brightness-15);
}

.button-block > .button {
  display: block;
  margin: var(--margin) 0;
}

.button-block > hr {
  border-bottom: var(--border-brightness-08) 1px dashed;
}

@media (max-width: 600px) {
  .no-mobile {
    display: none;
  }
}

.flex-wrap {
  flex-wrap: wrap;
}

.social .button.apple,
.root_admin_auth legend.apple {
  background: linear-gradient(to left, #888888, #ddd);
}

.social .button.bsky,
.root_admin_auth legend.bsky {
  background: linear-gradient(to left, #55aef7, #ddd);
}

.social .button.facebook,
.root_admin_auth legend.facebook {
  background: linear-gradient(to left, #395498, #ddd);
}

.social .button.github,
.root_admin_auth legend.github {
  background: linear-gradient(to left, #1a1e22, #ddd);
}

.social .button.google,
.root_admin_auth legend.google {
  background: linear-gradient(
    to left,
    #ea4335 0%,
    #fbbc05 20%,
    #2b9d4d 30%,
    #4285f4 40%,
    #ddd 100%
  );
}

.social .button.reddit,
.root_admin_auth legend.reddit {
  background: linear-gradient(to left, #f74300, #ddd);
}

.social .button.slack,
.root_admin_auth legend.slack {
  background: linear-gradient(to left, #481449, #ddd);
}

.social .button.x,
.root_admin_auth legend.x {
  background: linear-gradient(to left, #000000, #ddd);
}

.root_admin_auth fieldset.provider legend {
  color: #fff;
  padding: 2px 10px;
  border-radius: 3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/*** root_account_profile *****************************************************/

.root_account_profile fieldset.profile-picture .picture {
  max-width: 256px;
  max-height: 256px;
}

.root_account_profile fieldset.profile-picture input {
  max-width: 252px;
}

.root_account_profile fieldset.profile-picture label {
  margin: var(--margin) 0px;
  display: block;
}

.root_account_profile fieldset.signature .signature-preview {
  margin: var(--margin) 0px;
  min-height: 164px;
  max-height: 164px;
  overflow: hidden;
}
.root_account_profile fieldset.signature textarea {
  margin: var(--margin) 0px;
  font-family: var(--font-text);
  font-size: var(--font-size-text);
  width: 100%;
}

/*** root_admin_comms_email / root_admin_comms_xmpp ***************************/

.root_admin_comms_email .config-grid,
.root_admin_comms_xmpp .config-grid,
.root_admin_auth .config-grid {
  grid-template-columns: auto 1fr;
}