/*
 * 社媒速递 — the band, the /shemei/ index, the 更新记录 furniture, the 来源
 * block, and the one X-video facade correction.
 *
 * EXTENDS THE PAPER, DOES NOT RESTATE IT — deep.css's posture, and for the
 * same reason: this is a new desk on a paper that already has a face. Every
 * colour resolves to an existing token; the fallbacks mirror chrome.css so a
 * token-less context still renders something honest.
 *
 * WHY THE LOCAL --soc-* NAMES. Four of these five surfaces are inner pages,
 * which read --ink / --ink-2 / --rule / --accent; the band is the one that
 * lands on the FRONT page, whose palette is --mh-*. Reading --mh-* on an inner
 * page is the rule this repo has broken before, so the names are bridged once,
 * at the band's root, and every rule below speaks --soc-*. Nothing here reads
 * --mh-* outside that one block.
 *
 * TWO PER LINE IS THE BASE GRID RULE, not a per-count case. `repeat(2,
 * minmax(0, 1fr))` at every width above the phone tier, whether the desk holds
 * three stories or twenty-four; a card with no picture keeps the same shape as
 * one with a picture, so a mixed row sits level instead of leaving half of it
 * empty.
 *
 * NO CARD EVER SHOWS AN AVATAR. A story whose only photograph was removed by a
 * written takedown stays live and imageless by ruling (BUILD-BRIEF §13 B2);
 * `.is-textonly` is what that looks like, and it is a text card, not a face.
 *
 * PHONE TIER IS LAST IN THE FILE AND MUST STAY LAST — chrome.css, deep.css and
 * home-rescue.css all guard theirs the same way. Append above the banner.
 */

.mh-soc-band,
.mh-soc-index,
.mh-soc-src,
.mh-upd-line,
.mh-upd-log {
  --soc-ink: var(--ink, #1a1a18);
  --soc-ink-2: var(--ink-2, #5c5c56);
  --soc-rule: var(--rule, #e3e1da);
  --soc-rule-strong: var(--rule-strong, #c9c6bc);
  --soc-accent: var(--accent, #1e6b4e);
  --soc-panel: var(--surface, #fffdf8);
}

/* THE ONE FRONT-PAGE BLOCK. `.mh` is the homepage root and carries the --mh-*
   palette; the band bridges those names into its own so the rules below never
   have to know which page they are on.

   grid-column comes with it: .mh-body is a dense-packed grid, and a band that
   does not claim the full row is promoted to the top of the page regardless of
   `order`. Inert wherever the parent is not a grid. */
.mh .mh-soc-band {
  --soc-ink: var(--mh-ink, #19201b);
  --soc-ink-2: var(--mh-muted, #606b63);
  --soc-rule: var(--mh-line, #b9c1ba);
  --soc-rule-strong: var(--mh-line, #b9c1ba);
  --soc-accent: var(--mh-green, #2f6b48);
  --soc-panel: var(--mh-panel, #faf8f0);
  grid-column: 1 / -1;
}

/* ------------------------------------------------------------------ */
/* THE BAND                                                            */
/* ------------------------------------------------------------------ */

.mh-soc-band { margin: 0 0 30px; }

/* The 深度观察 band's header, in this desk's names (REFRAME §9 F1): section
   name left, 更多 right, one 2px rule under both. The same head 今日焦点 wears,
   deliberately — several bands of the site's own reporting shipped in one week
   and a reader should not have to learn a head system per desk. */
.mh-soc-band-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--soc-ink);
}

.mh-soc-band-t {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.mh-soc-band-h a {
  color: var(--soc-ink);
  text-decoration: none;
}

.mh-soc-band-h a:hover,
.mh-soc-band-h a:focus-visible { color: var(--soc-accent); }

.mh-soc-more {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--soc-ink-2);
}

/* F3: the owner's one line above the /shemei/ grid. Renders only when the
   option carries something — the element emits nothing at all when it is
   empty, so there is no rule here for a placeholder that cannot exist. */
.mh-soc-intro {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--soc-ink-2);
  max-width: 46em;
}

/* ------------------------------------------------------------------ */
/* THE CARD GRID — shared by the band and the index                    */
/* ------------------------------------------------------------------ */

.mh-soc-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* A hairline panel, NOT the 评论 band's green-topped one. That rule marks an
   editorial object apart from a news row, and these are news rows; a second
   mark for a fact the head already carries is one too many (owner, 2026-09-03,
   on 今日简报). The colour arrives on hover and nowhere else. */
.mh-soc-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--soc-panel);
  border: 1px solid var(--soc-rule);
}

.mh-soc-art {
  display: block;
  line-height: 0;
  border-bottom: 1px solid var(--soc-rule);
}

/* 16 / 9 with object-fit, so twelve derivatives of twelve different shapes
   still make two straight columns. The intrinsic width/height are on the
   element itself — the box is reserved before the bytes arrive. */
.mh-soc-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.mh-soc-t {
  display: block;
  padding: 14px 16px 0;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mh-soc-tl {
  color: var(--soc-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.mh-soc-tl:hover,
.mh-soc-tl:focus-visible { border-bottom-color: var(--soc-accent); }

.mh-soc-x {
  margin: 8px 0 0;
  padding: 0 16px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--soc-ink-2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* BALANCING, NOT A SPECIAL CASE. A text-only card is the same box with one
   fewer element in it, so beside a card that carries a picture it would end up
   mostly air. Two extra lines of the standfirst is the honest way to fill it —
   more of the story, not a decoration. */
.mh-soc-card.is-textonly .mh-soc-t { padding-top: 16px; }
.mh-soc-card.is-textonly .mh-soc-x {
  -webkit-line-clamp: 6;
  line-clamp: 6;
}

/* Pinned to the bottom so both cards in a row rule off at the same height —
   the 评论 band's `margin-top: auto`, which is why its cards never stagger. */
.mh-soc-f {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: auto;
  padding: 10px 16px 12px;
  font-size: 12px;
  color: var(--soc-ink-2);
  font-variant-numeric: tabular-nums;
}

/* 更新 or 首发. Which one is the repository's answer, not this file's — the
   band sorts on the clock this word names. */
.mh-soc-lab {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--soc-accent);
}

.mh-soc-time { color: inherit; }

/* ------------------------------------------------------------------ */
/* THE /shemei/ INDEX                                                  */
/* ------------------------------------------------------------------ */

.mh-soc-index {
  border-top: 1px solid var(--soc-rule-strong);
  padding-top: 22px;
}

/* The desks' pager, in this desk's names. Same shape on purpose: a reader who
   has paged a topic desk already knows this control. */
.mh-soc-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 26px 0 34px;
  font-size: 12.5px;
}

.mh-soc-pager a { color: var(--soc-accent); text-decoration: none; }
.mh-soc-pager a:hover { text-decoration: underline; }

.mh-soc-pg-n {
  min-width: 2em;
  padding: 5px 2px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.mh-soc-pg-n.is-here {
  color: var(--soc-ink);
  font-weight: 700;
  border-bottom: 2px solid var(--soc-accent);
}

.mh-soc-pg-gap { color: var(--soc-ink-2); }
.mh-soc-pg-step { white-space: nowrap; }

/* ------------------------------------------------------------------ */
/* 更新记录 — the stamp line and the foot block                         */
/* ------------------------------------------------------------------ */

/* Under the title, beside the article's own dateline. It appears only on a
   story that has actually developed, so it is allowed to be legible rather
   than apologetic. */
.mh-upd-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--soc-ink-2);
  font-variant-numeric: tabular-nums;
}

.mh-upd-k {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--soc-ink-2);
}

.mh-upd-k-now { color: var(--soc-accent); }
.mh-upd-dot { color: var(--soc-rule-strong); }
.mh-upd-t { color: var(--soc-ink); }

.mh-upd-log { margin: 32px 0 26px; }

.mh-upd-h {
  margin: 0 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--soc-rule-strong);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--soc-ink);
}

.mh-upd-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 72ch;
}

.mh-upd-item {
  padding: 8px 0 8px 13px;
  border-left: 2px solid var(--soc-rule);
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--soc-ink-2);
}

/* The newest development is the one a returning reader came back for. */
.mh-upd-item:first-child {
  border-left-color: var(--soc-accent);
  color: var(--soc-ink);
}

/* 首发 is the floor of the log, not an event in it. */
.mh-upd-item.is-first {
  border-left-color: var(--soc-rule);
  color: var(--soc-ink-2);
}

/* ------------------------------------------------------------------ */
/* 来源 — the social attribution block                                  */
/* ------------------------------------------------------------------ */

/* The fold's frame, the summary row, the paragraph rhythm and the gold link
   colour all come from .arch-fold in chrome.css; this block adds only what is
   particular to a social original. */
.mh-soc-src { margin: 0; }

.mh-soc-line { max-width: 72ch; }

/* 「来源：X（@handle）· 帖文时间 …」 is the load-bearing line of the block —
   the sentence the rights position rests on — so it is the one that reads at
   full ink. */
.mh-soc-line-src { color: var(--soc-ink); }

/* The evidence clause is a statement about EVIDENCE, and it is the only
   coloured mark this block gets. */
.mh-soc-clause {
  padding-left: 12px;
  border-left: 2px solid var(--soc-accent);
}

.mh-soc-cites {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--soc-ink-2);
  max-width: 72ch;
}

.mh-soc-cite { overflow-wrap: anywhere; }
.mh-soc-who { color: var(--soc-ink); }
.mh-soc-gone { color: var(--soc-ink-2); }

/* ------------------------------------------------------------------ */
/* THE X VIDEO FACADE                                                  */
/* ------------------------------------------------------------------ */

/*
 * THE COLLISION THAT DECIDED THE CLASS NAME.
 *
 * chrome.css:2255 owns `.art-film-x`: it is the × that closes the
 * picture-in-picture mini player, and it ships `display: none` with a
 * `::before` of "\00d7". A facade figure wearing that class was invisible on
 * every article page and grew a × the moment anything showed it. The stopgap
 * that used to sit here (a `figure.art-film-x` specificity override) is gone:
 * Social\VideoFacade::render() now emits `art-film-xpost`, so nothing overlaps
 * and the mini player keeps its close button (R-08).
 */
.art-film-xpost { display: block; }

/* Everything else keys off `data-x-post`, which the facade emits and no
   rename can take away. The poster, the play button and the caption are the
   site's own 不明白播客 film mechanism, already dressed by chrome.css; the only
   thing that needed saying is that this caption is a sentence and may wrap. */
.art-film[data-x-post] .art-film-bar { align-items: flex-start; }
.art-film[data-x-post] .art-film-cap { line-height: 1.7; }


/* ------------------------------------------------------------------ */
/* THE COMPACT SCALE — the homepage band only (F1)                      */
/* ------------------------------------------------------------------ */

/*
 * 「use a new page /shemei but has smaller cards on main nav, like 不明白播客」
 * (owner, 2026-09-03). The homepage presence is a SHELF, not a second news
 * band: three across instead of two, a smaller cover, a smaller headline, no
 * standfirst. Same markup, same class names, one modifier — a second card
 * function is how two surfaces stop agreeing about what a card is.
 *
 * The numbers come from .mh-deep-briefs' scale, not from a fresh guess: that
 * band is the one the owner named as the model, and matching it is the point.
 */

.mh-soc-grid.is-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.mh-soc-grid.is-compact .mh-soc-t {
  padding: 11px 12px 0;
  font-size: 15px;
  line-height: 1.45;
}

.mh-soc-grid.is-compact .mh-soc-f {
  padding: 8px 12px 10px;
  font-size: 11.5px;
}

/* A compact card carries no standfirst, so the text-only balancing rule that
   fills the picture's space with more prose has nothing to work with. Padding
   is what keeps it level with its neighbours instead. */
.mh-soc-grid.is-compact .mh-soc-card.is-textonly .mh-soc-t { padding-top: 14px; }


/* ------------------------------------------------------------------ */
/* 相关报道 — REQUIRED on this class (BRIEF §14 D2)                     */
/* ------------------------------------------------------------------ */

/*
 * 「both story and analysis may be short because an x post is usually adding
 * additional information to an existing news. you should allow related news to
 * appear.」 (owner, 2026-09-03). The piece leans on our archive, so the archive
 * has to be visible under it — a list of headlines, not cards: this sits at the
 * foot of an article the reader has just finished, and a second grid of
 * pictures there competes with the piece instead of extending it.
 *
 * The element prints NOTHING when the archive has nothing, so there is no rule
 * here for an empty state that cannot render.
 */

.mh-soc-rel { margin: 22px 0 0; }

.mh-soc-rel-h {
  margin: 0 0 9px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--soc-rule);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--soc-ink);
}

.mh-soc-rel-list { list-style: none; margin: 0; padding: 0; }

.mh-soc-rel-i {
  padding: 8px 0;
  border-bottom: 1px solid var(--soc-rule);
  font-size: 14.5px;
  line-height: 1.6;
}

.mh-soc-rel-i:last-child { border-bottom: 0; }

.mh-soc-rel-i a {
  color: var(--soc-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.mh-soc-rel-i a:hover,
.mh-soc-rel-i a:focus-visible { border-bottom-color: var(--soc-accent); }


/* ------------------------------------------------------------------ */
/* C1 — WHERE THE BAND SITS IN .mh-body                                 */
/* ------------------------------------------------------------------ */

/*
 * 「AFTER the eight desk bands, BEFORE 滚动」 (BRIEF §14 C1).
 *
 * `.mh-body` is a dense-packed GRID with an explicit `order` per band, so a new
 * child that declares neither lands wherever the packer puts it — usually at
 * the top, over the leads (memory: css-order-needs-grid-column-too). Both
 * halves are therefore required: `grid-column: 1 / -1` to claim the full width,
 * and an `order` in the skin's own numbering.
 *
 * THE RULES LIVE HERE, NOT IN home-skins.css, because that file is GENERATED
 * (scripts/build-home-skins.sh) and a hand edit there is reverted by the next
 * build — the trap scripts/check-builds-idempotent.sh exists to catch. The
 * selectors are one step more specific than the generated ones
 * (`.mh-body > .mh-soc-band` rather than a bare class), so they win on
 * specificity rather than on load order, which is not something this file
 * controls.
 *
 * 电讯 numbers .mh-mods 3 and both .mh-roll and .mh-log 4, so order 3 puts the
 * band in the desks' group; DOM order inside a group is source order and
 * HomeRenderer emits the band AFTER modules(), which is exactly C1.
 *
 * 文学城 runs 滚动 at 6 and the desks at 8, so 「after the desks, before 滚动」
 * cannot both be true there — the roll already precedes the desks. 9 keeps the
 * half that is expressible: after the desks, before 茉莉花评论 at 10.
 */

.mh.mh-skin-dianxun .mh-body > .mh-soc-band { grid-column: 1 / -1; order: 3; }
.mh.mh-skin-wxc .mh-body > .mh-soc-band     { grid-column: 1 / -1; order: 9; }

/* ------------------------------------------------------------------ */
/* PHONE TIER — KEEP LAST. Append new rules ABOVE this banner.         */
/* ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .mh-soc-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .mh-soc-band-t { font-size: 14px; }
  .mh-soc-more { font-size: 12px; }
  .mh-soc-intro { font-size: 13.5px; }
  /* Three compact cards across is a phone showing three thumbnails; two is a
     shelf a thumb can read. */
  .mh-soc-grid.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mh-soc-grid.is-compact .mh-soc-t { font-size: 14px; padding: 9px 10px 0; }
  .mh-soc-grid.is-compact .mh-soc-f { padding: 7px 10px 9px; }
  .mh-soc-t { font-size: 16px; padding: 12px 14px 0; }
  .mh-soc-x { font-size: 13px; padding: 0 14px; }
  .mh-soc-f { padding: 9px 14px 11px; }
  /* One column means no neighbour to balance against, so the six-line
     standfirst that filled a text-only card beside a picture is just a long
     paragraph here. */
  .mh-soc-card.is-textonly .mh-soc-x {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
  .mh-soc-pager { margin: 22px 0 28px; }
  .mh-upd-line { font-size: 12px; }
  .mh-upd-item { font-size: 13px; }
  .mh-soc-clause { padding-left: 11px; }
  .mh-soc-rel-i { font-size: 14px; }
}