:root {

  --color-dark: #004792;
  --color-medium: #848fbb;
  --color-accent: #ffb703;
  --color-dim-accent: #fff8e7;
  --color-light: #f7f9ff;
  --color-very-light: #fff7d6;

  --color-darkgrey: #737687;
  --color-mediumgrey: #a7aabc;
}


body {
  font-family: "Roboto Flex", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  letter-spacing: .05em;
  font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "GRAD" 0,
    "XOPQ" 96,
    "XTRA" 468,
    "YOPQ" 79,
    "YTAS" 750,
    "YTDE" -203,
    "YTFI" 738,
    "YTLC" 514,
    "YTUC" 712;
  font-size: clamp(10px, 14px, 18px);
  line-height:  1.5em;
  justify-content: center;
  max-width: 100%;
  background-color: var(--color-light);
  overflow-wrap: break-word;
}


.page {
  padding-top: 2rem; 
  max-width: 720px;
  margin: 0 auto;
  padding-inline: clamp(12px, 5vw, 24px);
}


input, textarea, select, button {
    font: inherit; /* Inherit font-family, font-size, font-weight, etc. */
    color: inherit; /* Inherit text color */
}

a {
  color: var(--color-dark);
  text-decoration: none;
  font-weight: 400;
}

a:link, a:visited, > a:hover,  a:active {
  color: inherit;
}

button {
  cursor: pointer;
  color: white;
  background-color: var(--color-accent);
  border-radius: .25rem;
  padding: 0 1rem;
  border:none;
  text-transform: uppercase;
  font-size: 120%;
  font-weight: bold;
  letter-spacing: .1rem;
}

button.inverse {
  background-color: var(--color-dim-accent);
  color: var(--color-accent);
  border-bottom: solid 1px var(--color-accent);
  font-weight: normal;
  border-radius: .25rem .25rem 0 0;
  margin-left: auto;
  font-size: 80%;
}

button#morecomments {
  background-color: var(--color-light);
  color: var(--color-medium);
  border-bottom: solid 1px var(--color-medium);
  font-weight: normal;
  border-radius: .25rem .25rem 0 0;
  margin-left: auto;
  font-size: 80%;
}

button > a {
  color: inherit;
  background-color: inherit;
  text-transform: inherit;
  text-decoration: none;
  font-weight: inherit;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}



/** PANELS **********************************************/
.panel-container {
  margin:0;
  padding:0;
  border:none;
}

.panel-container > .panel {
  border-bottom:  solid 1px var(--color-mediumgrey);
  box-shadow:  5px 5px 5px var(--color-mediumgrey);
  padding: .5rem;
}

.panel.message  {
  box-shadow:  5px 5px 5px var(--color-mediumgrey);
  padding: .5rem;
}

.panel {
  padding: 0;
  margin: 1em 0;
  background-color: white;
  border: none;
}

.panel.draft {
  background-color: #fafafa;
}

.panel.draft:after {
  content: 'DRAFT';
  color: var(--color-dark);
  font-weight:  600;
  color: white;
  text-shadow: 1px 1px var(--color-darkgrey),
      -1px 1px var(--color-darkgrey),
      1px -1px var(--color-darkgrey), 
      -1px -1px var(--color-darkgrey) ;
  font-size:  250%;
  position:   relative;
  bottom: 1rem;
  letter-spacing:   .25rem;
}

.headline {
  font-size:  150%;
  margin-bottom:  1em;
  border-top: solid 1rem var(--color-darkgrey);
  padding: 1rem 0;

}

.panel-title {
  font-size:  150%;
  font-weight:  600;
  margin-top: 1rem;
}

.panel-subtitle {
    font-weight:  bold;
    color: var(--color-darkgrey);
    margin: 0;
    font-size: 90%;
    padding-top: .5rem;
    border-bottom: solid 1px var(--color-mediumgrey);
}

.panel-subtitle.trivium {
  background-color: white;
  margin: -1rem;
  padding: 1rem;
}

.panel form {
  padding-bottom: 1rem;
}

.panel-spacer {
  margin: 0;
//  border-bottom: solid 1px grey;
}

.panel hr {
  margin: 2em 0 1em 0;
}

/*** TOPMESSAGE ******************************/
.topmessage-container {
  width: 100%;
  background-color: black;
  color: white;
  margin-left: calc(-50vw + 50%);
  padding: 1em 0 0;
  margin-bottom: 2em;
  box-shadow: 0px 10px 10px 3px black;
  box-sizing: border-box;
}

.topmessage {
  width: clamp(300px, 80%, 960px);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 2rem auto;
}

.topmessage-marker {
  grid-column-start: 1;
  padding-top: .3rem;
}

.topmessage.content {
  grid-column-start: 2;
}

.topmessage a {
  background-color: white;
  color: var(--color-dark);
  padding: 0 .25rem;
  font-weight: bold;
  border-radius: .25rem;
}

/*** MESSAGE ********************************/
.message {
  border:none;
  border-radius: .25em;
  margin: 0;
}

.message:only-child {
  margin-bottom:  -1rem;
}

.message > .main, .topmessage .main, .panel > .main {
  margin: .5em 0;
}

.message > .fineprint, .topmessage > .fineprint, .panel > .fineprint {
  font-size:80%;
  margin: 1rem 0;
}

.message .cast-reaction {
  display: flex;
  align-items: center;
}

.message .cast-reaction > .headshot {
  text-align: center;
  font-weight: bold;
}

.message .cast-reaction > .reaction-text {
  padding-left: 1rem;
 
 }


/** NAVIGATION *******************************/

.topline-container {
  position:fixed;
  top: 0;
  left: 0;
  color:white;
  background-color: var(--color-dark);
  width:100%;
  z-index: 1;
  height: 2rem;
  border-bottom:  solid 2px white;
  box-sizing: border-box;
}

.topline {
  width: min(960px, 80vw); 
  display: grid;
  align-items:  start;
  grid-template-columns: 56px 8rem auto;
  box-sizing: border-box;
  margin:auto;
  font-weight: 600;
}

.topline > .logo {
  grid-column: 1;
  display:  flex;
  justify-content: center;
  margin-top:   -12px;
  background-color:   white;
  border-radius:  50%;
  padding-top: 4px;
}

.topline > .name {
  font-size: 18px;
  justify-self: left;
  padding: .15rem .5rem;
  align-items: center;
  grid-column: 2;
}

.topline a {
  color: white;
}

.topline > .name > a {
  text-transform: uppercase;
  letter-spacing: .1em;
}

.topline > .topright {
  grid-column: 3;
  margin-left: auto;
  align-items: end;
  display: flex;
  column-gap: .5rem;
}


/*** MENU ****/
.side-panel {
  position: fixed;
  top: 2.1rem;
  left: -310px; /* Start hidden off-screen */
  max-width: 300px;
  width: fit-content;
  height: fit-content;
  box-shadow: 2px 0 5px rgba(0,0,0,0.5);
  transition: left 0.3s ease; /* Smooth slide */
  z-index: 1000;
}

/* When active, slide into view */
.side-panel.active {
  left: 0;
}

.menu {
  margin:0;
  display:  grid;
  grid-template-columns: 2rem auto 2rem;
  row-gap: 2rem;
  font-size: 150%;
  background-color: var(--color-dark);
  padding: .5rem 0 2rem;
  line-height:  1.7rem;
}

.menu > .close {
    grid-column:  3;
}

.element {
    grid-column: 2;
}

.clickable {
  cursor:pointer;
}

/*** "MORE" BUTTONS **********************************************/
.loadmore-container {
  display: flex;
  justify-content: right;
}


/** FOOTER ****/
.footer {
  text-transform: uppercase;
  margin:2em 0 0 0;
  font-size:80%;
  color: black;
  font-weight:  100;
  display:  flex;
  gap: 1em;
  border-top: solid 1px black;
}

/** FORMS ***********************************************************/
.form-submit, dialog#welcomeModal menu  {
  display:  flex;
  justify-content: center;
  align-items: end;
  text-transform: uppercase;
  align-items: baseline;
  padding: 0 0 1rem 0;
}

.form-submit > button, dialog#welcomeModal menu > button {
  margin-top: 1.5rem;
}

.form-submit > a, dialog#welcomeModal menu > a {
  color: var(--color-darkgrey);
  margin: 1.5rem 1rem 0;
  font-weight: normal;
  text-transform: capitalize;
}


/** POLL DISPLAY ****************/
.polls-container {
  width:100%;
}

.poll-title {
    font-weight:  800;
    margin: 0;
    padding: 1rem 0 0;
    color: var(--color-dark);
}

.draft .poll-title {
  border-top: solid 1rem var(--color-mediumgrey);
}

.question {
  padding-bottom: 1rem;
  font-size: 125%;
  line-height: 1.7rem;
}

.panel .poll-info {
}

.author {
  color: var(--color-dark);
  font-weight: 600;
}

.choices-container {
  border: solid 1px lightgrey;
  border-radius:  .25em;
  margin: 2em;
  padding: 1em;
  background-color: white;
}

.polls-container .panel button {
  margin-top: 1.5rem;
  display: flex;
  justify-self: center;
}

.choice {
  display: flex;
}

.choice.first {
  padding-top: 1rem;
}

/* Customize the label (the container) */
.choice > label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.choice > label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.choice > label:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.choice > label input:checked ~ .checkmark {
  background-color: var(--color-accent);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.choice > label input:checked ~ .checkmark:after, .checkmark.display:after {
  display: block;
}

/* Style the checkmark/indicator */
.choice > label .checkmark:after, .checkmark.display:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.checkmark.display {
  background-color: var(--color-accent);
}


/** POST VOTE *************************************/
.trivium-choice {

}

.trivium-body {
  background-color: var(--color-light);
  border: solid 1px var(--color-dark);
  padding: .5rem;
  line-height: 1.5em;
  grid-column: 3;
  margin: 0.5rem 1rem 1rem 0;
  color: var(--color-dark);
}

.vote-results {
  display:grid;
  grid-template-columns: 25px 1.5em auto;
  column-gap: .25em;
  row-gap: .75em;
  padding: 1rem 0;
  margin: 0;
  color: var(--color-mediumgrey);
}

.vote-results-indicator {
  grid-column-start: 1;
  grid-column-end: 1;
  align-self: flex-start;
}

.vote-results-rank {
  place-self: center;
  grid-column-start: 2;
  grid-column-end: 2;
  align-self:flex-start;
  font-size:  110%;
  font-weight:  100;
}

.vote-results-rank::before {
  content:"#";
  font-size: 50%;
  vertical-align: top;
}

.vote-results-choice {
  grid-column-start: 3;
  grid-column-end: 3;
  align-self:center;  
}

.voted {
  color: var(--color-dark);
  font-weight: 800;
}

/** SUGGESTED POLL *********************************/
.suggest-poll {
  margin: 1em 0;
  display:grid;
  grid-template-columns: 6em minmax(0,auto);
  column-gap: 1em;
  row-gap:  1em;
}

.suggest-poll label, .suggest-poll > .subtitle, .login label {
  font-weight:  400;
  font-size: 80%;
  letter-spacing: .25em;
  text-transform: uppercase;
  grid-column-start: 1;
  padding-top: .5em;
  white-space: nowrap;
  justify-self: right;
}

.suggest-poll > .subtitle {
  grid-column-start:  1;
  justify-self: right;
}

.suggest-poll textarea, .suggest-poll input, .login input  {
  grid-column-start: 2;
  border: none;
  background-color: #f0f0f0;
  padding: .5em;
  font-size: 100%;
  box-sizing: border-box;
  max-width: 100%;
}

.suggest-poll input[type="checkbox"] {
  margin-right: auto;
}

.suggest-poll label#publish {
  border-bottom: solid 10px yellow;
}

.suggest-poll .form-submit {
  grid-column: span 2;
}


/** TOP POLLS, RECENT POLLS, LOGIN ***********************************/
.top-polls, .recent-polls {
  display:grid;
  grid-template-columns: auto 2em;
  column-gap: .25em;
  row-gap: 2em;
  padding: 0;
}

.top-polls-link, .recent-polls-link {
  grid-column-start: 2;
  grid-column-end: 2;
  align-self:baseline;
  font-size: 125%;
}

.top-polls-question, .recent-polls-question {
  grid-column-start: 1; 
}

.login label, .profile label {
  font-weight: 400;
  margin-right: 1em;

}

.login form, .profile form {
  margin: .5em 0;
}

.recaptcha {
  margin-top:2em;
  display:block;
  justify-content: center;
  display: flex;
}

/** COMMENTS *************/
.comments-container {
  background-color: white;
}

.comments-group-container {
  display:grid;
  grid-template-columns: 5rem auto;
  row-gap: 1rem;
}

.comments-group-container > .character-message {
  grid-column: 1 /3;
}

.comments-group-container > .panel-subtitle {
  grid-column: 1 / 3;
} 

.comment-user {
  grid-column: 1;
  font-weight: 800;
  font-size: 90%;
  padding-top: .1rem;
}

.comment-date {
  font-size: 90%;
  color: var(--color-mediumgrey);
  font-weight:  bold;
}

.comment-body {
  grid-column: 2;
  margin: 0;
  padding-bottom: .5rem;
  overflow-wrap:  anywhere;
  line-height:  1.25rem;
}

.comments-addl-container {
  display:grid;
  grid-template-columns: auto;
  line-height: normal;
  padding: 0;
  background-color: white;
  margin: 0;
}

.comments-addl-container > .comment-body {
  border-bottom: none;
  text-align: center;
  grid-column: 1;
}

.comment-prompt {
  grid-column: 1;
  font-size:  80%;
  font-weight:  bold;
  text-align: center;
  padding: .5rem 0;
}

.comment-prompt > a {
  color: var(--color-dark);
  font-weight: inherit;
}

.comments-addl-container > form {
  grid-column: 1;
  margin:0;
  padding: 0;
  display: grid;
  grid-template-columns: auto 3rem;
}

.comments-addl-container textarea {
  grid-column: 1;
  width: 100%;
  margin: 1rem 0;
  box-sizing: border-box;
}

button#submitcomment {
  grid-column: 2;
  margin: 1rem 0;
  color:var(--color-accent);
  background-color: white;
  padding:0;
  margin-left: auto;
  align-items: center;
}

button#submitcomment[disabled] {
  color: var(--color-mediumgrey);
}

.debug-mode {
  color: red;
  font-size: 12px;
  font-weight: bold;
}

.debug-mode-element {
  display:inline;
  padding: .1rem .5rem;
  color: red;
  background-color: rgba(255,0,0,.1);
  white-space: nowrap;
}


/***** CAST *********************************/
.cast {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.cast > .character {
  border: solid 1px var(--color-mediumgrey);
  padding: 1rem;
  display: flex;
  flex: 1 1 48%;
  box-sizing: border-box;
}

.cast > .character > .headshot {
  text-align: center;
  font-weight: bold;
  padding-right: 1rem;
}

.cast > .character > .bio > div {
  margin-bottom: 1rem;
}

/***** CHARACTERS AND REACTIONS *****************************/
.welcome {
  display: grid;
  grid-template-columns: 5rem auto 5rem;
  row-gap: 1rem;
  margin: 2rem 0;
}

.welcome > .intro {
  grid-column: 1 / 4;
  font-size: 150%;
}

.welcome > .opener {
  text-align: center;
  grid-column: span 2;
}

.host {
  text-align: center;
  font-weight: bold;
}

.host > a {
  color: inherit;
}

.host.left {
  grid-column: 1;
}

.host.right {
  grid-column: 3;
}

.welcome > .statement-container {
  grid-column:2;
}

.statement {
  border: solid 1px var(--color-mediumgrey);
  border-radius: .25rem;
  padding: .75rem;
  position: relative;
  display: flex ;
  flex-direction: column;
  row-gap: 1rem;
  background-color: var(--color-dim-accent);
}

.statement.right::before {
    content: '';
    position: absolute;
    display: block;
    height: 1rem;
    width: 1rem;
    box-sizing: border-box;
    background: inherit;
    top: 15px; /* vertical position of tail */
    left: -.5rem;
    border: 1px solid;
    transform: rotate(45deg);
    border-color: transparent transparent var(--color-mediumgrey) var(--color-mediumgrey);
}

.statement.left::after {
    content: '';
    top: 15px; /* vertical position of tail */
    right: calc(-.5rem  - 1px);
    border-width: 1px;
    border-style: solid ;
    rotate: 45deg;
    display: flex;
    height: 1rem;
    width: 1rem;
    background-color: inherit;
    border-color: var(--color-mediumgrey) var(--color-mediumgrey) transparent transparent;
    position: absolute;
}

.statement > p {
  margin: 0 0 .5rem 0;
}
.character-message {
  display: grid;
  grid-template-columns: 5rem auto 5rem;
  row-gap: 1rem;
}

.character-message > .statement-container.left {
  grid-column: 1 / 3;
}

.character-message > .statement-container.left.conversation {
  grid-column: 2 / 3;
}

.character-message > .statement-container.right {
  grid-column: 2 / 4;
}

.character-message > .statement-container.right.conversation {
  grid-column: 2 / 3;
}

dialog {
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 1rem;
  max-width: min(92vw, 520px);
}

dialog::backdrop {
  background: rgba(0,0,0,0.5);
}

dialog a:focus-visible {
  outline: 2px solid var(--color-dark); /* brand color */
  outline-offset: 2px;
}