/*
 * Beranda — additions on top of the design's own style.css.
 *
 * Separate file because docs/TEMPLATE_MIGRATION.md §5 is explicit: the design's stylesheet is never
 * edited, and additions live in a dynamic.css linked after it. For these bundles the reason is
 * concrete rather than theoretical — style.css here is a byte-for-byte copy of the source bundle, and
 * re-copying it (to pick up a fix made upstream) would silently discard anything added inline.
 *
 * Loaded by _LakonLayout after style.css, so these rules win.
 */

/*
 * The canonical section anchors need a containing block, or they position against the page.
 *
 * .lakon-anchor is `position: absolute; top: -56px` (see _shared/lakon.css) so it can sit above a
 * section without disturbing its layout. Without a positioned ancestor every anchor in the feed
 * resolves against the initial containing block — i.e. they all land at the top of the document, and
 * the editor's preview scrolls to the same place whichever field is being edited.
 *
 * Safe on .post specifically: nothing inside a post is absolutely positioned against an outer block
 * (.album__cell and .bank are themselves `position: relative`), and z-index stays auto, so no
 * stacking context is created and the fixed cover, sheets, picker and lightbox are unaffected.
 */
 * Only .post needs the rule: .cover and .sheet are already `position: fixed`, which makes them
 * containing blocks in their own right.
 */
.post {
    position: relative;
}

/*
 * greeting_message's own slot, above the guest block on the cover.
 *
 * It needs one because the design has a single #cover-note element and hero_subtitle already owns
 * it — writing both there would discard whichever the host filled second, and the editor offers
 * both. Sized to match .cover__note so the cover still reads as one block.
 */
.cover__greeting {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
}

/*
 * The lead line rsvp_description / wishes_description are rendered into.
 *
 * The bundle has no equivalent element — it hardcoded no lead text in either sheet — so this is a
 * new class rather than a restyle of an existing one.
 */
.sheet__lead {
    margin: 0;
    padding: 12px 16px 0;
    color: var(--gray);
    font-size: 13px;
    line-height: 1.6;
}

/*
 * `hidden` must actually hide. THIS ONE IS NOT COSMETIC.
 *
 * An author `display` rule beats the user-agent's `[hidden] { display: none }` — author normal
 * declarations win over UA declarations regardless of specificity. This bundle styles `.sheet`,
 * `.lightbox` and `.picker` with `display: flex` / `display: grid` and relies on the `hidden`
 * attribute alone to close them, so on this page **every bottom sheet, the photo lightbox and the
 * reaction picker were painted open on top of the feed from the moment it loaded**. The markup and
 * the DOM were correct throughout: `document.querySelectorAll('.sheet:not([hidden])')` came back
 * empty while all three sheets were visibly stacked over the invitation.
 *
 * It is a defect in the source bundle rather than anything the integration introduced. Sorot's
 * bundle carries exactly this rule (its style.css line 59, with the same comment) and Beranda's
 * does not — which is why it went unnoticed: the design was only ever looked at through a checker
 * that asserts on the console and the DOM, and neither says a word about it.
 *
 * The fix lives here because §5 forbids editing style.css, which is a byte-for-byte copy of the
 * source. It also covers renderStats setting `hidden` on an empty `.post__stats`, which is how the
 * problem was first noticed — that strip kept its padding and border with nothing in it.
 */
[hidden] {
    display: none !important;
}

/*
 * The comment count sits on the right even when it is alone.
 *
 * .post__stats is `justify-content: space-between`, which is right for the two-part strip the bundle
 * always drew. A guest who has not reacted now sees only the right-hand half, and space-between
 * would park it on the left, under the post text.
 */
.post__stats > .stats__right:only-child {
    margin-left: auto;
}


/* Own shapes (2026-10-27): moves the design away from the platform it parodies. */
/* Rounded-square avatars instead of circles. */
.avatar { border-radius: 26%; }