:root {
  --color-contribution-green: hsla(130, 50%, 50%, 100%);
  --color-dba: hsla(130, 50%, 50%, 100%);
  --color-nice-blue: hsla(200, 100%, 45%, 100%);
  --color-rendered-content: #ce9a5e;
  --color-segment-default: hsla(28, 100%, 73%, 10%);
  --color-answered-segment-default: hsla(28, 100%, 73%, 35%);
}


#second_sticky_bar {
  position: sticky;
  top: calc(var(--header-height) + 0.1em);
  background-color: var(--color-global-bg);
  border-bottom: 1px solid var(--color-rendered-content);
  /* background-color: red; */
}

.rendered_content {
    border-left: 1px solid var(--color-rendered-content);
    border-bottom: 1px solid var(--color-rendered-content);
    border-right: 1px solid var(--color-rendered-content);
    padding: 1em;
    margin-bottom: 1em;
}

/* select the h3 immediately before the preview */

h3:has(+ .rendered_content) {
    margin-bottom: 0.1em;
}



/* for the main textarea */
.ta-container {
    width: 100%;
    /* padding: 20px; */
    box-sizing: border-box;
  }

  .custom-textarea {
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    display: block;
    padding: 10px;
    min-height: 100px;
    resize: vertical; /* Allows vertical resizing */
  }


/* for the buttons below the textarea */

.button-container {
      display: flex;
      justify-content: flex-end;
      gap: 1em;
    }
.button-container button  {
    margin-top: 0.5em;
}

/* debate-specific header bar (title and segment information) */

#second_sticky_bar {
  display: flex;
}

#second_sticky_bar h2 {
  display: inline-block;
  margin-top: 0em;
  margin-bottom: 0em;

  /* for debugging the div containers */
  /* background-color: red; */
}

#debate_title {
  flex: 1;
  display: inline-block;
}

.clickable_span {
  cursor: pointer;
}

.answered_heading .heading {
  margin-bottom: 0.1em;
}
.answered_heading .contribution {
  margin-bottom: 1em;
}



#seg_id_display {
  display: inline;
}

#user_role_display {
  display: inline;
  margin-left: 0.5em;
  background-color: hsla(0, 0%, 0%, 10%);
}

#fold_button_display {
  --box-grey: #BBB;
  display: inline;

}

#fold_button_display .boxed:hover {
  --box-grey: #777;

}


/* debate body (segment and contributions) */


.segment {
  background-color: var(--color-segment-default);
  cursor: pointer;
}
.segment.has_answer {
  background-color: var(--color-answered-segment-default);
  cursor: pointer;

}

.segment + .segment {
  margin-left: 0.2em;
}

.segment:hover, .segment:active,
.segment:hover code, .segment:active code, .segment:target code{
    background-color: #ffbd71;
}

/* Highlight of anchor link */
.segment:target {
  /* background-color: #ffa; */
  border: 1px solid var(--color-nice-blue);
  -webkit-transition: all 1s linear;
}

/*
  Small squares to indicate the presence of positive or negative comments
  (currently only negative variant is used)
*/


.sqp::after,
.sqn::after {
  content: '';
  position: relative;
  display: inline-block;
  top: -0.7em;
  right: 0;
  width: 3px;
  height: 3px;
}

/* currently unused */
.sqp::after {
  background-color: hsla(310, 100%, 55%, 100%);
}

.sqn::after {
  background-color: red;
}

.sqn.dba::after {
  background-color: var(--color-dba);
}

.contribution {
  display: none;
  margin-left: 0.5em;
  padding: 1.1em;
}

#contribution_a,
.contribution {
  padding: 0.3em;

}

.contribution p {
  margin-top: 0.1em;
  margin-bottom: 0.1em;
}

.contribution.level1,
.contribution.level3,
.contribution.level5,
.contribution.level7,
.contribution.level9
{
  background-color:hsla(220, 80%, 95%, 100%);
  border: 1px solid hsla(220, 50%, 80%, 100%);
}

  #contribution_a,
 .contribution.level2,
 .contribution.level4,
 .contribution.level6,
 .contribution.level8,
 .contribution.level10
 {
  background-color:hsla(20, 90%, 95%, 100%);
  border: 1px solid hsla(220, 50%, 80%, 100%);
}

.contribution.db_ctb {
 border: 1px solid var(--color-dba);
}


/* segment contribution form related */

.segment_contribution_form_container {
  width: 100%;
}

.segment_contribution_form_container .button-container {
  background-color: var(--color-contribution-green);
}

.not_logged_in_warning{
  margin: 1em 0 1em 0;
  padding: 0.5em;
  background-color: hsla(10, 95%, 60%, 100%);
}

.segment_contribution_hint_container {
  margin: 1em 0 1em 0;
  padding: 0.5em;
  background-color: hsla(10, 95%, 60%, 100%);

}

/* class .hidden moved to base.css */


.separator_widget {
  padding: 1em 0em 0.3em 0em;
  background-color: var(--color-contribution-green);
}



.separator_widget.toolbar {
  padding-top: 0.1em;
  background-color: var(--color-contribution-green);
}

.separator_widget.toolbar ._text {
  margin-top: 0.5em;
  /* background-color: red; */
  /* display: flex; */
}

.button-container .toolbar {
  display: flex;
  justify-content: space-between;
  gap: 1em;
}


.button-container button:not(._copy_button)  {
margin-top: 0.1em;
}



.contribution.db_ctb .separator_widget {
  margin-bottom: 0.2em;
}

.segment_contribution_form_container + .separator_widget {
  margin-top: 0.2em;
}

/* bottom toolbar */

#bottom_toolbar {
  /* top right bottom left */
  padding: 1em;
  background-color: var(--color-contribution-green);
}