/* Context-menu info box */
.CtxtMenu_InfoClose {
  top: .2em;
  right: .2em;
}

.CtxtMenu_InfoContent {
  overflow: auto;
  text-align: left;
  font-size: 80%;
  padding: .4em .6em;
  border: 1px inset;
  margin: 1em 0;
  max-height: 20em;
  max-width: 30em;
  background-color: #EEEEEE;
  white-space: normal;
}

.CtxtMenu_Info.CtxtMenu_MousePost {
  outline: none;
}

.CtxtMenu_Info {
  position: fixed;
  left: 50%;
  width: auto;
  text-align: center;
  border: 3px outset;
  padding: 1em 2em;
  background-color: #DDDDDD;
  color: black;
  cursor: default;
  font-family: message-box;
  font-size: 120%;
  line-height: normal;
  white-space: nowrap;
  z-index: 201;
  border-radius: 15px;
  /* vendor prefixes */
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -khtml-border-radius: 15px;
  /* shadows */
  box-shadow: 0px 10px 20px #808080;
  -webkit-box-shadow: 0px 10px 20px #808080;
  -moz-box-shadow: 0px 10px 20px #808080;
  -khtml-box-shadow: 0px 10px 20px #808080;
  /* IE drop shadow */
  filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color="gray", Positive="true");
}

/* Context-menu “close” button */
.CtxtMenu_MenuClose {
  position: absolute;
  cursor: pointer;
  display: inline-block;
  border: 2px solid #AAA;
  border-radius: 18px;
  font-family: "Courier New", Courier;
  font-size: 24px;
  color: #F0F0F0;
}

.CtxtMenu_MenuClose span {
  display: block;
  background-color: #AAA;
  border: 1.5px solid;
  border-radius: 18px;
  line-height: 0;
  padding: 8px 0 6px; /* may need browser tweak */
}

.CtxtMenu_MenuClose:hover {
  color: white !important;
  border-color: #CCC !important;
}

.CtxtMenu_MenuClose:hover span {
  background-color: #CCC !important;
}

.CtxtMenu_MenuClose:hover:focus {
  outline: none;
}

/* Context-menu itself */
.CtxtMenu_Menu {
  position: absolute;
  background-color: white;
  color: black;
  padding: 5px 0;
  border: 1px solid #CCCCCC;
  cursor: default;
  font: menu;
  text-align: left;
  white-space: nowrap;
  z-index: 201;
  border-radius: 5px;
  box-shadow: 0px 10px 20px #808080;
  -webkit-box-shadow: 0px 10px 20px #808080;
  -moz-box-shadow: 0px 10px 20px #808080;
  -khtml-box-shadow: 0px 10px 20px #808080;
}

.CtxtMenu_MenuItem {
  padding: 1px 2em;
  background: transparent;
}

.CtxtMenu_MenuArrow {
  position: absolute;
  right: .5em;
  padding-top: .25em;
  color: #666666;
  font-size: .75em;
}

.CtxtMenu_MenuActive .CtxtMenu_MenuArrow {
  color: white;
}

.CtxtMenu_MenuArrow.CtxtMenu_RTL {
  left: .5em;
  right: auto;
}

.CtxtMenu_MenuCheck,
.CtxtMenu_MenuRadioCheck {
  position: absolute;
  left: .7em;
}

.CtxtMenu_MenuCheck.CtxtMenu_RTL,
.CtxtMenu_MenuRadioCheck.CtxtMenu_RTL {
  right: .7em;
  left: auto;
}

.CtxtMenu_MenuInputBox {
  padding-left: 1em;
  right: .5em;
  color: #666666;
}

.CtxtMenu_MenuInputBox.CtxtMenu_RTL {
  left: .1em;
  right: auto;
}

.CtxtMenu_MenuComboBox {
  left: .1em;
  padding-bottom: .5em;
}

.CtxtMenu_MenuSlider {
  left: .1em;
}

.CtxtMenu_SliderValue {
  position: absolute;
  right: .1em;
  padding-top: .25em;
  color: #333333;
  font-size: .75em;
}

.CtxtMenu_SliderBar {
  outline: none;
  background: #d3d3d3;
}

.CtxtMenu_MenuLabel {
  padding: 1px 2em 3px 1.33em;
  font-style: italic;
}

.CtxtMenu_MenuRule {
  border-top: 1px solid #DDDDDD;
  margin: 4px 3px;
}

.CtxtMenu_MenuDisabled {
  color: GrayText;
}

.CtxtMenu_MenuActive {
  background-color: #606872;
  color: white;
}

.CtxtMenu_MenuDisabled:focus,
.CtxtMenu_MenuLabel:focus {
  background-color: #E8E8E8;
}

.CtxtMenu_ContextMenu:focus,
.CtxtMenu_ContextMenu .CtxtMenu_MenuItem:focus {
  outline: none;
}

/* Selection menus */
.CtxtMenu_SelectionMenu {
  position: relative;
  float: left;
  border-bottom: none;
  -webkit-box-shadow: none;
  -webkit-border-radius: 0;
}

.CtxtMenu_SelectionItem {
  padding-right: 1em;
}

.CtxtMenu_Selection {
  right: 40%;
  width: 50%;
}

.CtxtMenu_SelectionBox {
  padding: 0;
  max-height: 20em;
  background-color: #FFFFFF;
}

.CtxtMenu_SelectionDivider {
  clear: both;
  border-top: 2px solid #000000;
}

/* Move close-button inside menu */
.CtxtMenu_Menu .CtxtMenu_MenuClose {
  top: -10px;
  left: -10px;
}

/* Autocomplete text field */
.AutoCompleteText {
  position: relative;
  z-index: 100;
}

.AutoCompleteText .input button,
.AutoCompleteText .input input {
  border: none;
  border-radius: 0;
}

/* The header search box: the field keeps a visible border (the rule above
   strips it, leaving white on white inside the mobile menu), and fills
   whatever width its container has instead of Semantic's fixed 200px field
   + 250px box, which is wider than the 300px mobile menu's content. */
#header-search-bar .AutoCompleteText .input input.prompt {
  border: 1px solid rgba(34, 36, 38, 0.35);
}

#header-search-bar .AutoCompleteText .input input.prompt:focus {
  border-color: #0377cd;
}

#header-search-bar {
  width: 100%;
}

#header-search-bar .ui.fluid.search {
  width: 100%;
}

#header-search-bar .ui.input,
#header-search-bar .ui.input > input {
  width: auto !important;
  min-width: 0;
}

#header-search-bar .ui.input > input {
  flex: 1 1 auto;
}

@media (min-width: 1280px) {
  #header-search-bar {
    width: 250px;
  }

  #header-search-bar .ui.input > input {
    width: 200px !important;
  }
}

.AutoCompleteText ul {
  background-color: #fff;
  border: 1px solid #e0e1e2;
  border-radius: 0 0 .3rem .3rem;
  color: #000;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  text-align: left;
  width: 100%;
}

.AutoCompleteText ul:before {
  content: "";
}

.AutoCompleteText li {
  cursor: pointer;
  padding: .3em 1em;
}

.AutoCompleteText li:hover {
  background-color: #e0e1e2;
  border-radius: .3rem;
  text-decoration: underline;
}

/* Search bar autocomplete: reuses .AutoCompleteText's positioning/box, adds
   its own row layout (label + a muted hint on the right) and a keyboard-
   selected state to match the existing hover style. */
.search-suggestions {
  max-height: 320px;
  overflow-y: auto;
}

.search-suggestion {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
}

.search-suggestion.active {
  background-color: #e0e1e2;
  border-radius: .3rem;
}

.search-suggestion-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-suggestion-keyword .search-suggestion-label {
  font-family: monospace;
  font-weight: bold;
}

.search-suggestion-meta {
  flex: none;
  color: #767676;
  font-size: .85em;
}

/* A "scoped" suggestion (fields, authors) runs a plain-text search instead
   of extending the query, so the block of them is set apart from the
   node/AS/CAUSES/AND/OR suggestions above with a rule, the way a menu
   separates unlike actions. Only the first of a run gets it. */
.search-suggestion-scoped {
  border-top: 1px solid #e0e1e2;
}

.search-suggestion-scoped + .search-suggestion-scoped {
  border-top: none;
}

/* MathJax CHTML styles */
mjx-container[jax="CHTML"] { line-height: 0; }
mjx-container [space="1"] { margin-left: .111em; }
mjx-container [space="2"] { margin-left: .167em; }
mjx-container [space="3"] { margin-left: .222em; }
mjx-container [space="4"] { margin-left: .278em; }
mjx-container [space="5"] { margin-left: .333em; }
mjx-container [rspace="1"] { margin-right: .111em; }
mjx-container [rspace="2"] { margin-right: .167em; }
mjx-container [rspace="3"] { margin-right: .222em; }
mjx-container [rspace="4"] { margin-right: .278em; }
mjx-container [rspace="5"] { margin-right: .333em; }
mjx-container [size="s"] { font-size: 70.7%; }
mjx-container [size="ss"] { font-size: 50%; }
mjx-container [size="Tn"] { font-size: 60%; }
mjx-container [size="sm"] { font-size: 85%; }
mjx-container [size="lg"] { font-size: 120%; }
mjx-container [size="Lg"] { font-size: 144%; }
mjx-container [size="LG"] { font-size: 173%; }
mjx-container [size="hg"] { font-size: 207%; }
mjx-container [size="HG"] { font-size: 249%; }
mjx-container [width="full"] { width: 100%; }
mjx-box { display: inline-block; }
mjx-block { display: block; }
mjx-itable { display: inline-table; }
mjx-row { display: table-row; }
mjx-row > * { display: table-cell; }
mjx-mtext,
mjx-mstyle,
mjx-merror,
mjx-mphantom { display: inline-block; }
mjx-merror { color: red; background-color: yellow; }
mjx-assistive-mml {
  position: absolute !important;
  top: 0; left: 0; clip: rect(1px,1px,1px,1px);
  padding: 1px 0 0 0 !important; border: 0 !important;
  width: auto !important; overflow: hidden !important;
  -webkit-touch-callout: none; user-select: none;
}
mjx-assistive-mml[display="block"] { width: 100% !important; }
mjx-c::before { display: block; width: 0; }
.MJX-TEX { font-family: MJXZERO, MJXTEX; }
/* …and so on for the full MathJax font-face definitions… */

.rdm-logo {
  padding-bottom: 0;
}

/* Recent-graph thumbnails. Mobile-first and stated once, so there is no width
   at which two rules disagree: the markup previously carried a "mobile only"
   and a "computer tablet only" copy of the same figure, and their breakpoints
   (max-width:767px / min-width:768px) leave a gap that any fractional viewport
   width falls into — common at devicePixelRatio 1.25 or under browser zoom. */
.recent-graph-figure {
  display: block;
}

.recent-graph-figure img {
  display: block;
  width: 100%;
  height: auto;
}

@media only screen and (min-width: 768px) {
  .recent-graph-figure img {
    width: 70%;
  }
}

/* Flat brand blue everywhere the theme would otherwise paint a gradient. */
.outer-navbar,
.cover-page {
  background-image: none;
  background-color: #0377cd;
}

/* Shared footer for the cover-page pages (landing, login, signup), which
   replace the default site footer with their own inline branding. */
.cover-footer {
  border-top: 1px solid rgba(255, 255, 255, .25);
}

.cover-footer .link-list a {
  color: #fff;
  margin: 0 .35em;
}

/* Semantic UI has no [hidden] rule, so an element whose class sets `display`
   (a .ui.message, a flex row) would stay visible when JS sets hidden = true. */
[hidden] {
  display: none !important;
}

/* ---------- Graph Builder and Share page ----------
   The two pages share a shell: a sidebar that stays in view while the main
   column scrolls, holding the graph preview (css/graph_preview.css), and
   panels - Semantic segments, keeping its own 1em padding - whose header
   lines up a label or icon with its text. */
.tool-sidebar {
  position: sticky;
  top: 1rem;
}

@media (max-width: 991px) {
  .tool-sidebar {
    position: static;
  }
}

.tool-panel > .ui.header {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.tool-panel > .ui.header .ui.label {
  margin: 0;
}

/* The Share page: why the code cannot be published yet, above Publish; and
   what is wrong with the graph - written by the page after a failed publish
   and by share_graph/preview.js on every preview. The latter has to outweigh
   Semantic's `.ui.form .message:first-child { margin-top: 0 }`. */
.ui.message.share-publish-message {
  margin: 0 0 0.75rem;
}

.ui.form .ui.message.graph-message {
  margin-top: 1rem;
}
.ui.message.graph-message .list li {
  word-break: break-word;
}

/* The Share page's References check (share_graph/references.js): the whole
   checked bibliography in one list, in a modal, each entry marked matched or
   not; and under the box, a line saying where the check stands. */
.references-actions {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.references-status {
  margin-top: 0.5rem;
}
.references-summary {
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.ui.message.references-note {
  margin: 0 0 0.75rem;
}
.references-checked {
  margin: 0 0 0.75rem;
  padding-left: 1.5rem;
}
.references-checked li {
  margin-bottom: 0.5rem;
  word-break: break-word;
}
.references-checked .reference-status {
  display: block;
  font-size: 0.85em;
  color: rgba(0, 0, 0, 0.6);
}
.references-checked .reference-status .icon {
  margin-right: 0.25em;
}
.references-checked .reference-original {
  display: block;
  font-size: 0.85em;
  color: rgba(0, 0, 0, 0.5);
}

/* ---------- Narrow screens: nothing may widen the page ----------
   Semantic's `.ui.grid` and `.ui.relaxed.grid` pull their rows out by a
   negative margin that a full-width parent has nowhere to take up, the burger
   button hangs 1.5rem outside the header, and long unbroken strings
   (identifiers, URLs, code) are as wide as they are. Each is held back to the
   viewport here. */
#rdm-burger-toggle {
  right: -0.75rem;
}

.ui.grid.cover-page,
.ui.container > .ui.relaxed.grid {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

pre {
  max-width: 100%;
  overflow-x: auto;
}

.ui.items > .item > .content,
.ui.items > .item > .content > .description,
.ui.header,
.ui.table td,
.ui.message,
p,
li,
td,
code {
  overflow-wrap: anywhere;
}

pre code {
  overflow-wrap: normal;
}

/* Index graph item meta row: chips left, stats right; stats always on their own line on mobile. */
.graph-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.graph-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
.graph-chips .ui.label {
  margin: 0;
}
@media (max-width: 767px) {
  .graph-meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
  }
  .graph-stats .ui.label:first-child {
    padding-left: 0;
  }
}