/* Weibo search page.

   The feed is a reading column, not a grid: posts are two or three lines of prose
   with a photo, so they want one narrow column at a comfortable measure rather
   than the full width of a desktop screen. Everything above the feed - counts,
   search box, facets - is kept to the same column so the eye tracks straight down
   one edge instead of jumping between a centred header and a left-hung bar. */
.weibo-page {
  margin: 0 auto;
  max-width: 660px;
  padding: 0 14px;
  text-align: left;
}

.weibo-head {
  border-bottom: 1px solid #ddddc8;
  padding-bottom: 10px;
}

.weibo-head__title {
  color: #4e0d0d;
  font-size: 1.3em;
}

/* Counts live on one muted line under the title. They used to sit in a blue box
   hung off the left edge of the viewport, away from the column they described. */
.weibo-head__meta {
  color: #8a7a6a;
  font-size: 0.85em;
  margin-top: 4px;
}

.weibo-head__meta strong {
  color: #4a7c59;
  font-weight: 600;
}

.weibo-head__sep {
  opacity: 0.5;
  padding: 0 6px;
}

.weibo-search {
  display: flex;
  gap: 8px;
  padding: 12px 0 4px;
}

/* forms_styling.css dresses every input for a stacked form (full width, its own
   padding). Give the box and its button one height so the bar reads as one control. */
.weibo-search input[type="search"] {
  box-sizing: border-box;
  flex: 1 1 auto;
  font-size: 0.95em;
  height: 38px;
  min-width: 0;
  width: 100%;
}

/* `.styled-button` carries its own vertical padding, which sat the label below
   centre once the bar gave the button a fixed height. Centre the content instead
   of stacking one spacing rule on the other. */
.weibo-search__go {
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  flex: none;
  gap: 6px;
  height: 38px;
  justify-content: center;
  line-height: 1;
  padding-bottom: 0;
  padding-top: 0;
  white-space: nowrap;
}

.weibo-facets {
  padding: 4px 0 10px;
}

.weibo-facets__row {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 3px 0;
  /* The overflow panel hangs off this row. */
  position: relative;
}

.weibo-facets__label {
  color: #8a8a78;
  flex: none;
  font-size: 0.82em;
  width: 2.6em;
}

/* The chips carry a count in a smaller, quieter size: the name is what you read,
   the number is what you check afterwards. */
.weibo-chip small {
  opacity: 0.7;
  padding-left: 3px;
}

.weibo-facets__hint {
  color: #a5a593;
  font-size: 0.78em;
}

/* The feed list. The home page reuses `.weibos` for its single rotating card in a
   full-width section, so the column width lives here; the search page hands it a
   column of its own and overrides it. */
.weibos {
  margin: 30px auto 0;
  padding: 10px;
  width: 45%;
}

.weibo-page .weibos {
  margin: 0;
  padding: 0;
  width: auto;
}

/* One post. White on the page's warm ground, with the same border and radius as
   the cards on the downloads and portal pages, so the site reads as one place. */
.weibo {
  background-color: #fff;
  border: 1px solid #d9d9c6;
  border-radius: 10px;
  margin-bottom: 14px;
  padding: 12px 14px 10px;
}

.weibo-profile {
  align-items: center;
  display: flex;
  gap: 9px;
  /* The home page drops this card into a centred section. */
  text-align: left;
}

.weibo-profile-image {
  border-radius: 50%;
  flex: none;
  height: 36px;
  object-fit: cover;
  width: 36px;
}

.weibo-profile__name {
  font-size: 0.98em;
}

.weibo-profile__date {
  color: #8a8a78;
  font-size: 0.85em;
}

/* The source link is a footnote, not a call to action: quiet until hovered, and
   pushed to the far end of the row so the name and date stay together. */
.weibo-profile__action {
  color: #9a9a88;
  font-size: 0.82em;
  margin-left: auto;
  text-decoration: none;
  white-space: nowrap;
}

.weibo-profile__action:hover {
  color: #1a5276;
}

.weibo-text {
  font-size: 1.02em;
  line-height: 1.75;
  padding: 9px 0 2px;
  text-align: left;
  word-break: break-word;
}

.weibo-text p {
  margin: 0 0 0.5em;
}

/* Long posts. A few of these run to a screen and a half of Tibetan, which turned
   a feed of one-liners into a page nobody can scan. Fold anything long behind a
   toggle - a checkbox rather than script, so it works with JavaScript off and
   keeps its state while the page is open. */
.weibo-fold {
  position: relative;
}

.weibo-fold__state {
  /* Off-screen rather than display:none, so the label stays keyboard-reachable. */
  height: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 0;
}

.weibo-fold__state:not(:checked) ~ .weibo-text {
  max-height: 16em;
  overflow: hidden;
  /* The fade below anchors to the clipped text, not to the whole fold - otherwise
     it sits over the toggle instead of over the last visible line. */
  position: relative;
}

/* The fade tells the reader the text is cut rather than finished. */
.weibo-fold__state:not(:checked) ~ .weibo-text::after {
  background: linear-gradient(rgba(255, 255, 255, 0), #fff);
  bottom: 0;
  content: "";
  display: block;
  height: 3.2em;
  left: 0;
  position: absolute;
  right: 0;
}

.weibo-retweet .weibo-fold__state:not(:checked) ~ .weibo-text::after {
  background: linear-gradient(rgba(247, 246, 238, 0), #f7f6ee);
}

.weibo-fold__toggle {
  color: #1a5276;
  cursor: pointer;
  display: inline-block;
  font-size: 0.85em;
  padding-top: 4px;
}

.weibo-fold__toggle:hover {
  text-decoration: underline;
}

.weibo-fold__state:checked ~ .weibo-fold__toggle .weibo-fold__more,
.weibo-fold__state:not(:checked) ~ .weibo-fold__toggle .weibo-fold__less {
  display: none;
}

/* Search hits. Underlined as well as tinted so the mark survives greyscale. */
.weibo-text mark {
  background-color: #fbeaa8;
  border-bottom: 1px solid #e3c95f;
  border-radius: 2px;
  color: inherit;
  padding: 0 1px;
}

/* Photos. A single photo keeps its own shape but is capped, so a tall portrait
   cannot take a whole screen on its own; two or more become a square thumbnail
   grid the way the source app shows them, and open full size on click. */
.weibo-media {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.weibo-media--single {
  grid-template-columns: 1fr;
  justify-items: center;
}

/* Two side by side, four as a square block, anything else in threes - the shapes
   the source app uses, so an album keeps the arrangement it was posted in. */
.weibo-media--two {
  grid-template-columns: repeat(2, 1fr);
}

.weibo-media--four {
  grid-template-columns: repeat(2, 1fr);
}

.weibo-media--many {
  grid-template-columns: repeat(3, 1fr);
}

.weibo-media a {
  display: block;
  min-width: 0;
}

.weibo-image {
  /* A hairline so a photo on a white ground still has an edge against the card. */
  border: 1px solid #ece9dd;
  border-radius: 6px;
  display: block;
  width: 100%;
}

/* A single photo keeps its own shape, centred in the column and capped so a tall
   portrait cannot take a whole screen on its own. */
.weibo-media--single a {
  max-width: 100%;
}

.weibo-media--single .weibo-image {
  margin: 0 auto;
  max-height: 460px;
  object-fit: contain;
  width: auto;
}

.weibo-media--two .weibo-image,
.weibo-media--four .weibo-image,
.weibo-media--many .weibo-image {
  aspect-ratio: 1;
  object-fit: cover;
}

/* A retweet is someone else's post quoted inside this one, so it is set back
   behind a rule and on a duller ground rather than repeating the card. */
.weibo-retweet {
  background-color: #f7f6ee;
  border-left: 3px solid #e0dcc8;
  border-radius: 0 6px 6px 0;
  margin-top: 10px;
  padding: 8px 10px;
}

.weibo-retweet .weibo-text {
  font-size: 0.95em;
  padding-top: 6px;
}

.weibo-empty {
  color: #6b6257;
  margin: 30px auto;
  max-width: 420px;
  padding: 20px 16px;
  text-align: center;
}

.weibo-empty__lead {
  font-size: 1.08em;
  margin: 0;
}

.weibo-empty__hint {
  font-size: 0.88em;
  line-height: 1.6;
  margin: 8px 0 14px;
}

@media screen and (max-width: 1000px) {
  .weibos {
    width: 60%;
  }
}

@media screen and (max-width: 800px) {
  .weibos {
    width: 75%;
  }
}

@media screen and (max-width: 600px) {
  .weibos {
    width: 90%;
  }
}

@media screen and (max-width: 560px) {
  .weibo-facets__label {
    width: auto;
  }

  .weibo-media--many {
    grid-template-columns: repeat(2, 1fr);
  }

  .weibo-media--single .weibo-image {
    max-height: 360px;
  }
}

/* Export page. Wider than the feed: it is a directory of accounts and years, not
   prose, so the cards sit two or three abreast instead of stacking down a reading
   column. Everything else - the header, the chips - is shared with the search page
   so the two read as one section of the site. */
.export-page {
  margin: 0 auto;
  max-width: 940px;
  padding: 0 14px;
  text-align: left;
}

/* Two steps, numbered. The instruction that matters second - how to save the page
   that opens - used to sit ahead of the table as one unbroken sentence. */
.export-steps {
  color: #6f6f5e;
  /* style.css strips markers from lists site-wide; these are steps, so put the
     numbers back. */
  list-style: decimal outside;
  font-size: 0.88em;
  line-height: 1.6;
  margin: 12px 0 4px;
  padding-left: 1.4em;
}

.export-steps li {
  padding: 1px 0;
}

.export-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.export-card {
  background-color: #fff;
  border: 1px solid #d9d9c6;
  border-radius: 10px;
  padding: 12px 14px;
}

.export-card__head {
  align-items: baseline;
  border-bottom: 1px solid #ececdc;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding-bottom: 8px;
}

.export-card__name {
  color: #4e0d0d;
  font-size: 1.02em;
  font-weight: 600;
  text-decoration: none;
}

.export-card__name:hover {
  text-decoration: underline;
}

.export-card__total {
  color: #4a7c59;
  flex: none;
  font-size: 0.82em;
}

/* The years are the buttons: one click per account-year, labelled with the count
   it will export, instead of a separate 导出 link in a column of its own. */
.export-years {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px;
}

.export-year small {
  opacity: 0.7;
  padding-left: 4px;
}

.export-card__empty {
  color: #8a8a78;
  font-size: 0.9em;
  margin: 0;
}