/**
 * Copyright 2021 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/*
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

:root {
    --base-fontsize: 0.89rem;
    --header-scale: 1.125;
    --line-height: 1.618;

    --accent-bg: #2B2B2B;
    --border: #666;
    --main-bg: #000;
}

html {
    font-family: 'Noto Sans', sans-serif;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}

body {
    background: var(--main-bg);
    color: #bfbfbf;
    overflow-x: hidden;
    width: 100%;
    font-size: var(--base-fontsize);
}

.content, .async-content {
    max-width: 80em;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
    display: flex;
    justify-content: center;
    gap: 10px;
}

pre {
    white-space: pre-line;
}

a {
    color: #9fc6e0;
}

/* The following two are for making two-spans-in-an-anchor work in the navbar */

.navigation > a {
  display: flex;
  justify-content: space-between;
}

.navigation > a > span {
    flex-grow: 1;
    flex-shrink: 0;
    padding: 5px; /* to give some space inside the span */
}

nav {
    font-family: sans-serif;
    max-width: 100%;
}

.navbar-item {
    display: flex;
    gap: 10px;
    vertical-align: center;
}

/* this prevents too large images from breaking layouts */
img {
    max-width: 100%;
    height: auto;
}

button {
    border: 1px #999 solid;
    font-size: 12px;
    border-radius: 4px;
    background: #ddd;
    text-transform: capitalize;
    padding: 3px 6px 3px 6px;
}

ul {
    /* list-style-position: inside; */
    /* this ^ is a nice idea but it screws up too much rendering, e.g. [[2024-02-25]], so skipping it for now. */
    line-height: 1.7em;
    padding-right: 0.34em;
    padding-left: 2em;
}

li {
    /* background-color: #070710; */
    /* background-color: #030707; */
    /* background-color: #070310; g/
    /* padding: 0.34em; */
    padding: 0.17em;
}

.subnode-content > ul::after{
    content: 'Agora Protocol v0.9'; /* Custom bullet point */
    font-size: smaller;
    font-style: italic;
    color: grey; /* Bullet point color */
    position: relative;
    display: inline-block;
}

li img {
    vertical-align: top;
}

hr {
    border: 0;
    height: 1px;
    /* trying this out -- fadeout effect for hr which mostly comes from user-contributed content.
    /* background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.0)); */
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.1));
    /* background-image: linear-gradient(to right, rgba(0, 0, 0, 0.40), rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.40)); */
}

iframe {
    margin-top: 2px;
    margin-bottom: 2px;
    border-color: gray;
    border-style: dashed;
    border-width: 1px;
    height: 53em;
    width: 99.5%;
}

.mastodon-embed {
    height: 30em;
    width: 500px;
}

details .mastodon, .twitter {
    display: inline;
    max-width: 100%;
    vertical-align: top;
}

/*
details summary { 
  cursor: pointer;
}

details summary > * {
  display: inline;
}

summary {
  list-style: none;
  display: flex;
  gap: 0.2em;
  align-items: start;
  cursor: pointer;
}
summary::before {
  content: '▶︎';
  width: 1em;
  flex-shrink: 0;
  transition: 0.3s;
}
details[open] > summary::before {
  transform: rotate(90deg);
  transform-origin: 40% 45% 0;
}
*/

/* this is meant to target mobile */
/* but actually using ems seems to be better? */
@media screen and (max-width: 900px) {
    iframe {
        max-height: 35em;
    }
}

.container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
}

.column {
    background-color: #f0f0f0;
    padding: 20px;
    border: 1px solid #ccc;
}

@media (min-width: 48em) {
    .container {
        flex-direction: row;
    }

    .column {
        flex: 1;
    }
}

.page {
    margin: 2em auto;
    width: 35em;
    border: 5px solid #ccc;
    padding: 0.8em;
    background: white;
}

.entries {
    list-style: none;
    margin: 0;
    padding: 0;
}

.add-entry {
    font-size: 0.9em;
    border-bottom: 1px solid #ccc;
}

.add-entry dl {
    font-weight: bolder;
}

.metanav {
    text-align: right;
    font-size: 0.8em;
    padding: 0.3em;
    margin-bottom: 1em;
    background: #fafafa;
}

.flash {
    background: #cee5F5;
    padding: 0.5em;
    border: 1px solid #aacbe2;
}

.error {
    background: #f0d6d6;
    padding: 0.5em;
}

.navigation .logo {
    vertical-align: middle;
    padding-top: 4px;
    padding-bottom: 4px;
    max-width: 26px;
    max-height: 26px;
}

.logo {
    filter: invert(1);
}

.spinner {
    animation: heartbeat 1s infinite;
}

.spinner2 {
    transform: translateZ(1px);
    animation: flipping 10s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

@keyframes heartbeat {
  0% {
    transform: scale(0.95);
  }
  5% {
    transform: scale(1.1);
  }
  39% {
    transform: scale(0.85);
  }
  45% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(0.9);
  }
}

@keyframes flipping {
  0%, 100% {
    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
  }
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(1800deg);
    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
  }
  100% {
    transform: rotateY(3600deg);
  }
}

.content {
    line-height: var(--line-height);
}

#popup {
    display: none;
    position: absolute;
    max-width: 60%;
    max-height: 50%;
    overflow: scroll;
}

/* Format headers */
h1, h2, h3 {
    color: #bfbfbf;
}

/* Fix line height when title wraps */
h1, h2, h3 {
    line-height: 1.1;
}

/*
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
}
*/

h1 {
    font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale) * var(--header-scale) * var(--header-scale));
}


h2 {
    font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale));
    margin-top: calc(var(--line-height) * 1.4rem);
}

h3 {
    font-size: calc(var(--base-fontsize) * var(--header-scale));
    margin-top: calc(var(--line-height) * 1.3rem);
}

h4 {
    font-size: calc(var(--base-fontsize));
    margin-top: calc(var(--line-height) * 1.2rem);
}

h5 {
    font-size: calc(var(--base-fontsize) / var(--header-scale));
    margin-top: calc(var(--line-height) * 1.1rem);
}

h6 {
    font-size: calc(var(--base-fontsize) / var(--header-scale) / var(--header-scale));
}

li > p {
    margin-block-start: 0;
    margin-block-end: 0;
}

.content blockquote {
    padding-left: 0.5em;
    margin-left: 1em;
    border-left: 2px solid #bfbfbf;
    font-style: italic;
}

summary::-webkit-scrollbar {
    display: none;
}

summary {
    gap: 5px; /* but will grow to fit, aren't we living in the future? :)
    vertical-align: middle;
    align-items: center;
    /* why doesn't this work? */
    overflow-x: scroll;
    white-space: nowrap;
    align-items: center;
    width: 100%;
    justify-content: space-between;

    /* hide scrollbar if one is needed, but allow scrolling */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}


.navigation::-webkit-scrollbar {
    display: none;
}

.navigation {
    display: flex;
    gap: 5px; /* but will grow to fit, aren't we living in the future? :)
    vertical-align: middle;
    align-items: center;
    /* why doesn't this work? */
    overflow-x: scroll;
    white-space: nowrap;
    align-items: center;
    width: 100%;
    justify-content: space-between;

    /* hide scrollbar if one is needed, but allow scrolling */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

.webnav::-webkit-scrollbar {
    display: none;
}

.webnav{
    vertical-align: middle;
    align-items: center;
    /* why doesn't this work? */
    overflow-x: scroll;
    white-space: nowrap;
    align-items: center;
    justify-content: space-between;

    /* hide scrollbar if one is needed, but allow scrolling */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}



.topline-node {
    vertical-align: middle;
    overflow-y: auto;
}

.topline-node-wrapper {
    display: flex;
    align-items: center;
}

.hypothesis-adder {
    display: block;
    position: absolute;
    bottom: 0px;
}

input[type="text"] {
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */
}

.topline-agora {
    display: flex;
    justify-content: space-between;
    vertical-align: middle;
    /* does not work, will be removed shortly */
    overflow-y: auto;
    width: auto;
    margin-top: 10px;
    margin-right: 10px;
    margin-left: 10px;
}

.topline-query {
    flex: auto;
    display: inline;
    vertical-align: middle;
    margin-right: 4px;
}

.topline-cli {
    flex: auto;
    vertical-align: middle;
    width: 100%;
}

#mini-cli {
    width: 100%;
    padding: 2px;
}

.topline-container {
    width: 100%;
}

.cli-header {
    margin-right: 10px;
}

#mini-cli-clear, #mini-cli-go {
    margin-left: 4px;
}

#mini-cli-exec {
    min-width: 3em;
}

.web, .stoa {
    display: block;
    /* does not work, will be removed shortly */
    overflow-y: auto;
    width: auto;
}

summary {
    line-height: 1.7;
}

.exec {
    list-style-type: trad-chinese-informal;
    /* why */
}

.separator {
    /*border-color: #7f5af0;*/
    /*border-style: dotted;*/
    /*
    align-items: center;
    text-align: center;
    */
    margin-top: 15px;
    margin-bottom: 15px;
    /*border-radius: 20px;*/
    font-family: 'Montserrat', sans-serif;
}

/*
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #ddd;
}

.separator:not(:empty)::before {
  margin-right: 1em;
}

.separator:not(:empty)::after {
  margin-left: 1em;
}
*/

.user {
    font-weight: bold;
}

.node, .web, .stoa, .search, .genai {
    /*border-color: #7f5af0;*/
    border-color: gray;
    /* border-style: dashed;*/
    border-width: 1px;
    border-style: dotted;
    /*
    margin-top: 10px;
    margin-bottom: 10px;
    */
    /*border-radius: 5px;*/
    padding: 10px;
}

.context {
    /*border-color: #7f5af0;*/
    border-color: gray;
    border-style: dotted;
    border-width: 1px;
    /*border-style: dotted;*/
    margin-top: 10px;
    margin-bottom: 10px;
    /*border-radius: 20px;*/
    padding: 10px;
}

.context-all {
    /*border-color: #7f5af0;*/
    position: relative;
    height: 800px;
    border-color: gray;
    border-style: solid;
    border-width: 1px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.left {
    border-color: red;
}

.right {
    border-color: blue;
}

.pulled-node {
    /*border-color: #7f5af0;*/
    border-color: gray;
    border-width: 1px;
    border-style: solid;
    /*border-style: dotted;*/
    margin-top: 10px;
    margin-bottom: 10px;
    /*border-radius: 20px;*/
    padding: 10px;
}

.related-node {
    /*border-color: #7f5af0;*/
    border-color: gray;
    border-width: 1px;
    border-style: solid;
    margin-top: 10px;
    margin-bottom: 10px;
    /*border-radius: 20px;*/
    padding: 10px;
}

.image-embed {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    max-height: 600px;
}

.obsidian-embed {
    text-align: center;
    font-style: italic;
}

.subnode, .not-found {
    background: #1f232b;
    /* background: #12091a; */
    /* background: #150d38; */
    color: #cfcfcf;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    /*border-radius: 20px;*/
}

.info-box, .intro {
    line-height: var(--line-height);
    text-align: left;
    background: #00112b;
    color: #cfcfcf;
    padding: 7px;
    position: relative;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    opacity: 1;
    visibility: visible;
}

.dismiss-button {
    position: absolute;
    right: 10px;
    cursor: pointer;
    font-weight: bold;
    color: blue;
}

.info-box::before {
  /* content: '︎❓'; */
  content: '︎ℹ️';
  width: 1em;
  flex-shrink: 0;
  transition: 0.3s;
}

.info-box.hidden {
    opacity: 0;
    visibility: hidden;
}

.intro {
    line-height: var(--line-height);
}

.intro::before {
  content: '➼';
  width: 1em;
  flex-shrink: 0;
  transition: 0.3s;
}

.pulled-subnode, .pushed-subnode, .stoa-public {
    background: #101010;
    color: #cfcfcf;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    /*border-radius: 20px;*/
}

.node-header, .context-header, .stoa-header, .ctzn-header {
    justify-content: space-between;
    text-align: left;
    padding-bottom: 2px;
}

.header-with-button {
    display: flex;
}

details > summary {
    cursor: pointer;
}

.node-name {
    text-transform: capitalize;
}

.not-found {
    /*background: #476349;*/
    background: #476353;
}

/*.subnode li     { margin: 0.8em 1.2em; }*/
/*.subnode li h2  { margin-left: -1em; }*/

.subnode-header, .links-header, .search-header, .subnode-id {
    width: 100%;
    padding-bottom: 2px;
}

.subnode-header {
    border-bottom: 1px solid #ccc;
}

.subnode-footer, .node-footer {
    font-size: smaller;
    font-weight: bolder;
    width: 100%;
    display: flex;
    padding-top: 6px;
    border-top: 1px solid #ccc;
    text-align: left;
}

.subnode-contrib {
    text-align: right;
    text-decoration: none;
    max-width: 19%;
    margin-left: auto;
}

.footer-links, .footer-id {
    text-align: right;
    margin-left: auto;
    text-decoration: none;
    font-weight: normal;
}

.node-actions {
    text-align: right;
    text-decoration: none;
    max-width: 19%;
    margin-left: auto;
}

.subnode-id {
    max-width: 81%;
}

.subnode-id a {
    text-decoration: none;
}

.search {
    overflow: auto;
    gap: 10px;
}

.links-flex {
    display: flex;
}

.context-flex {
    display: flex;
}

.listing-flex {
    display: flex;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
    justify-content: space-between;
    /* it proved to be tough to use flex inside of summary... */
    /* so here's a hack :) */
    width: 97%;
}

.inline-flex > div {
    flex: auto;
}

.search-flex {
    display: flex;
}

.infobox {
    width: 100%;
}

.subnodes {
    width: 100%;
}

.annotations {
    width: 100%;
    display: flex;
    background: #080808;
    color: #cfcfcf;
    padding: 0.5em;
    margin-bottom: 10px;
    /*border-radius: 10px;*/
    gap: 10px;
}

.delta {
    width: 100%;
    display: flex;
    background: #080808;
    color: #cfcfcf;
    padding: 0.5em;
    margin-bottom: 10px;
    /*border-radius: 10px;*/
    gap: 10px;
}

.delta-nodes {
    float: left;
    width: 100%;
}

.delta-annotations {
    background: #080808;
    float: left;
    width: 100%;
}

.backlinks {
    float: left;
    width: 50%;
    overflow: auto;
}

.pushlinks {
    width: 33%;
    overflow: auto;
}

.pulllinks {
    width: 33%;
    overflow: auto;
}

.forwardlinks {
    width: 50%;
    overflow: auto;
}

.backlinks-header, .pushlinks-header, .pulllinks-header, .forwardlinks-header {
    font-style: italic;
}

#graph {
    overflow: hidden;
    /*border-radius: 20px;*/
    padding: 10px;
    margin: 10px;
    max-height: 300px;
    width: 50%;
}

#agoragraph {
    height: 90%;
    width: 100%;
    position: absolute;
}

.links {
    overflow: auto;
    padding: 10px;
    margin: 10px;
    gap: 10px;
    max-height: 400px;
    width: 50%;
}


.search-header {
    text-align: left;
    margin-bottom: 1em;
    margin-left: 0.2em;
}

.search-agora {
    float: right;
    width: 100%;
}

.search-internet {
    float: left;
    width: 35%;
}

.listing {
    display: inline-block;
    padding: 0.5em;
    /*margin-bottom: 10px;*/
    /*border-radius: 10px;*/
}

.wikilink-marker {
    /* deemphasize */
    font-weight: lighter;
    color: grey;
    display: none;
}

summary .wikilink-marker {
    display: inline;
}

ul .wikilink-marker {
    display: inline;
}

.wiki-search .wikilink-marker {
    display: inline;
}

.wikilink:link {
    /* different color for wikilinks */
    color: deepskyblue;
}

.wikilink:visited {
    /* different color for wikilinks */
    color: deepskyblue;
}

.wikilink:hover {
    /* different color for wikilinks */
    color: hotpink;
}

/*
 * doesn't work super well, sometimes forces a loop when the link is near a line break
.wikilink:hover:before {
	content: "[["
}

.wikilink:hover:after {
	content: "]]"
}
*/



/* hypothes.is 
    This totally doesn't work at all, and I have no idea why :) 
*/
.annotator-frame {
    margin-top: 4.5em
}


.submit {
    display: block;
    margin-top: 25px
}

/** 
* overriding bmann's microblog hardcoded style
* is this sustainable? probably no.
*/
.microblog_timeline {
    background: #1f232b;
    color: #cfcfcf;
}


#login-box, #logout-box {
    display: none;
}

#focus-hack {
    display: none;
}

/* Format tables.  Based on https://github.com/kevquirk/simple.css/. */
table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    margin: 1.5rem 0;
}

td,
th {
    border: 1px solid var(--border);
    padding: .5rem;
    word-wrap: break-word;
    white-space: pre-wrap;
    text-align: left;
}

th {
    background: var(--accent-bg);
    font-weight: bold;
}

tr:nth-child(even) {
    /* Set every other cell slightly darker. Improves readability. */
    background: var(--accent-bg);
}

table caption {
    font-weight: bold;
    margin-bottom: .5rem;
}

.burger {
    position: fixed;
    margin-top: -1px;
    font-size: 26px;
    cursor: pointer;
    position: absolute;
    z-index: 1000;
    background-color: rgba(20, 20, 20, 1);
}

.darkmode {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 14px;
    font-size: 18px;
}

.overlay-wrapper {
    position: relative;
}

.overlay-content {
    padding: 50px;
}

.overlay {
    height: 100%;
    min-width: 30%;
    max-width: 80%;
    top: 0;
    left: -100%;
    position: fixed;
    /*top: 30;
    left: 30;
    */
    background-color: rgba(20, 20, 20, 0);
    overflow-x: hidden;
    transition: 0.4s ease-in-out;
    z-index: 3;
    justify-content: center;
    align-items: center;
}

/* Overlay active state */
.overlay.active {
    left: 0;
    background-color: rgba(20, 20, 20, 0.95);
}