/*==SANDBOX: All temporary, development, and unreviewed css lives here.
Rules will be incorporated into the main cascade by Front End before deploy.
If you've just coded up a new feature and put in some layout, put that layout here,
with a comment, and the Front End Santa will make your wishes come true.
Or if you've put in a fix and you've not yet read the Front End Docs?
Put your fix in here.
Examples:

/*Fix for issue 996
.bookmark .header {float:left;}

/*Draft layout for views/shiny/new by astolat.
It has to be purple, see wiki, ADT meeting 25
.shiny-happy-people table {display:table-cell;
background:purple; color:#555;}

/*Some helpful notes
0.875em/1.286 line height = 14px with 18px leading
0.643em  = 9px, so {margin: 0.643em auto;} gives you a single blank line between block elements */

/* styling for AO3-3359 to remove top padding from the new button
and preserve the balance/symmetry of the page */
#new_work_search fieldset:first-of-type .submit {
  padding-top: 0;
}

/* Issue 3243 needs nested ul to be indented in external_authors/claim
*/
.edit_external_author ul ul {
  margin-left: 2.75em;
}

/* While implementing AO3-5987 it was suggested we move to non-JS share buttons.
 * These are statically styled with CSS instead.
 *
 * Sourced from: https://sharingbuttons.io/
 * See: https://github.com/otwcode/otwarchive/pull/3874#pullrequestreview-460459176
 */

a.resp-sharing-button__link,
.resp-sharing-button__icon {
  display: inline-block;
}

a.resp-sharing-button__link,
a.resp-sharing-button__link:hover {
  text-decoration: none;
  color: #fff;
  border: none;
}

.resp-sharing-button {
  border-radius: 5px;
  transition: 25ms ease-out;
  padding: 0.5em 0.75em;
}

.resp-sharing-button__icon svg {
  width: 1.25em;
  height: 1.25em;
  margin-right: 0.25em;
  vertical-align: text-bottom;
  overflow: visible;
}

/* Non solid icons get a stroke */
.resp-sharing-button__icon {
  stroke: #fff;
  fill: none;
}

/* Solid icons get a fill */
.resp-sharing-button__icon--solid {
  fill: #fff;
  stroke: none;
}

/* Add proper padding for works page */
#main.works-index {
  /* padding: 2em 4em 3.5em !important; */
  /* margin: auto !important; */
}

/* Keep minimal padding for other main content */
/* #main:not(.works-index) { */
  padding: 0.5em 2.5em 3.5em !important;
  margin: auto !important;
}

#inner.wrapper {
  padding: 0 !important;
}

/* Mobile fixes */
/* @media only screen and (max-width: 42em) {
  #main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0.5em !important;
    }
}

  #inner.wrapper {
    padding: 0 !important;
  }

  .work.blurb {
    padding: 0.5em;
    margin-bottom: 1em;
  }
} */

/* Fix summary width to match paragraph width on all pages */
.userstuff.summary {
    max-width: 100%;
    margin: 1.286em auto;
    padding: 0;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Ensure summary paragraphs match main page paragraph width */
.userstuff.summary p,
.summary blockquote p {
    margin: 1.286em auto;
    max-width: 100%;
    padding: 0;
    line-height: 1.125;
}

/* Apply consistent width to work page summaries */
.preface .summary blockquote,
.preface .userstuff {
    max-width: 100%;
    margin: 1.286em auto;
    padding: 0;
}
  
  .work meta group {
    margin: 0 !important;
    padding: 0.5em !important;
  }
  
  .stats {
    margin: 0 !important;
    padding: 0.5em !important;
  }
  
  .tags {
    margin: 0 !important;
    padding: 0.25em !important;
  }
  
  .userstuff {
    padding: 0 !important;
    margin: 0 !important;
  }
}

.resp-sharing-button--twitter {
  background-color: #55acee;
}

.resp-sharing-button--twitter:hover,
a:focus .resp-sharing-button--twitter {
  background-color: #2795e9;
}

.resp-sharing-button--tumblr {
  background-color: #35465C;
}

.resp-sharing-button--tumblr:hover,
a:focus .resp-sharing-button--tumblr {
  background-color: #222d3c;
}

.resp-sharing-button--bluesky {
  background-color: #1185fe;
}

.resp-sharing-button--bluesky:hover,
a:focus .resp-sharing-button--bluesky {
  background-color: #0168d6;
}

.resp-sharing-button--twitter {
  background-color: #55acee;
  border-color: #55acee;
}

.resp-sharing-button--twitter:hover,
.resp-sharing-button--twitter:active {
  background-color: #2795e9;
  border-color: #2795e9;
}

.resp-sharing-button--tumblr {
  background-color: #35465C;
  border-color: #35465C;
}

.resp-sharing-button--tumblr:hover,
.resp-sharing-button--tumblr:active {
  background-color: #222d3c;
  border-color: #222d3c;
}

.resp-sharing-button--bluesky {
  background-color: #1185fe;
  border-color: #1185fe;
}

.resp-sharing-button--bluesky:hover,
.resp-sharing-button--bluesky:active {
  background-color: #0168d6;
  border-color: #0168d6;
}