/* GoodMarket Community Feed — self-contained styles.
   Kept out of the template so community.html stays small and cacheable.

   Palette is the app's LIGHT theme on a PURE WHITE canvas: white page, white
   cards, sky-blue accents. The page canvas used to be warm cream; the owner
   asked for pure white, so the feed and the shared profile are white. On a
   white canvas a borderless card is invisible, so the card keeps its 1px
   border — that hairline is what separates card from page, not decoration.
   Text colours clear WCAG AA (4.5:1) on white (the lightest surface, so every
   pair that passed on cream still passes); the G$ gold carries DARK text
   because white on amber fails. Animation is transform/opacity only — no
   box-shadow or left/top keyframes (they repaint the whole element each
   frame).

   ── MOBILE: instagram.com's LAYOUT GRAMMAR, GoodMarket's identity ──────────
   The owner asked for the feed to read like instagram.com on a phone. That is
   a layout grammar, not a palette: ONE white canvas with no floating cards,
   edge-to-edge media, hairline separators, an icon action row directly under
   the media, and the caption as `author + text` on one line. Those traits live
   in the phone-width block near the bottom of this file (see
   docs/COMMUNITY_INSTAGRAM_MOBILE_REDESIGN_PROPOSAL.md).

   What we deliberately do NOT copy: the other site's brand blue, wordmark and
   logo. AGENTS.md carries an impersonation-risk rule (Blockaid flagged the app
   once) — dressing a wallet in another company's trade dress is that same
   mistake. Use GoodMarket's distinct sky-blue accents / G$ gold, not another
   product's trademark blue.
   ------------------------------------------------------------------------- */

:root {
    --cf-bg: #ffffff;
    --cf-bg2: #ffffff;
    --cf-card: #ffffff;
    --cf-card-solid: #ffffff;
    --cf-field: #f7f7f7;
    --cf-soft: rgba(95, 72, 40, 0.06);
    --cf-border: #e9e2d6;
    /* Instagram's separator: a neutral hairline, not a warm brand border. The
       card edge, the section rules and the top bar all use it so the page has
       ONE weight of line. */
    --cf-hairline: #dbdbdb;
    /* Instagram's secondary text grey. AA on white (4.5:1+). */
    --cf-ink-2: #737373;
    --cf-ink: #292524;
    --cf-dim: #6b5d48;
    --cf-muted: #8a8378;
    --cf-accent: #0369a1;
    --cf-accent-rgb: 3, 105, 161;
    --cf-accent-2: #075985;
    --cf-accent-ink: #075985;
    /* The caption field's resting border. 5.93:1 on white — clearly above the
       3:1 non-text floor WCAG sets for UI boundaries. The field is the one
       control a post cannot be written without, so it reads as interactive. */
    --cf-accent-border: #0369a1;
    /* The focus halo. Kept as a token so the ring and the border cannot drift. */
    --cf-accent-soft: rgba(14, 165, 233, 0.17);
    --cf-gold: #f5a623;
    --cf-gold-deep: #d97e0a;
    --cf-gold-ink: #1f1300;
    --cf-danger: #dc2626;
    --cf-ok: #16a34a;
    /* "Done" surface for the Daily Learn strip. --cf-ok (4.05:1) is a hair under
       AA for normal text, so the ink is a darker green and the tint stays pale.
       Measured below against the strip's own background. */
    --cf-ok-ink: #15803d;
    --cf-ok-soft: #f0fdf4;
    --cf-ok-border: #bbf7d0;
    --cf-bottom-nav-height: 76px;
    --cf-serif: 'Fraunces', Georgia, serif;
    --cf-sans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --cf-shadow: 0 4px 16px rgba(67, 56, 43, 0.06);
    /* Instagram has NO elevation on the mobile feed — posts are sections of one
       canvas, not floating cards. Named so the phone layout can switch it off
       in one place instead of unsetting a box-shadow on five rules. */
    --cf-elev: var(--cf-shadow);
    /* The page gutter. The media rules pull back by exactly this much to reach
       the screen edge, so the two must move together. */
    --cf-gutter: 0.85rem;
    /* ── Community G$ card ────────────────────────────────────────────────
       The one surface on this page that is about MONEY, so it carries the G$
       gold family rather than the neutral canvas. A gradient is a range, so
       every text token below is measured against the WORST (lightest) stop
       `#ffdfae`, not the average — see
       docs/COMMUNITY_REWARDS_CARD_REVAMP_PROPOSAL.md §2 for the numbers. */
    --cf-earn-bg1: #fff7e6;
    --cf-earn-bg2: #ffdfae;
    --cf-earn-line: rgba(180, 120, 20, 0.22);
    --cf-earn-ink: #4a2a00;
    --cf-earn-ink-2: #5c3600;
    /* NOT --cf-gold-deep: that is only 2.37:1 here, and the rate value is the
       number that matters. */
    --cf-earn-accent: #8a4b00;
    --cf-earn-tile: rgba(255, 255, 255, 0.72);
    --cf-earn-shadow: 0 6px 20px rgba(180, 120, 20, 0.14);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    font-family: var(--cf-sans);
    background: var(--cf-bg);
    color: var(--cf-ink);
    min-height: 100dvh;
    overflow-x: clip;
}

.cf-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Nav ──────────────────────────────────────────────────────────────────── */
/* Instagram's top bar: flat white, a hairline underneath, no shadow. The
   wordmark carries the brand serif so the bar reads as a masthead rather than
   a toolbar. */
.cf-nav {
    position: sticky; top: 0; z-index: 100;
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 0.75rem;
    padding: 0.7rem 1rem;
    background: var(--cf-bg);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--cf-hairline);
}
.cf-brand {
    display: flex; align-items: center; gap: 0.5rem;
    color: var(--cf-ink); text-decoration: none;
    font-family: var(--cf-serif);
    font-size: 1.02rem; font-weight: 700; min-width: 0;
}
/* Two levels: the company is context, the PAGE is the identity. Before this the
   header read "GoodMarket Community" in the same serif treatment as the wallet
   and the homepage, so nothing said this surface is a daily social feed. */
.cf-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.12; }
.cf-brand-org {
    font-family: var(--cf-sans); font-size: 0.65rem; font-weight: 700;
    letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--cf-ink-2);
}
.cf-brand-page {
    display: flex; align-items: center; gap: 0.32rem;
    font-size: 1.05rem; font-weight: 700; color: var(--cf-accent-ink);
    white-space: nowrap;
}
/* "There is activity here" — the one thing a feed header should say. Opacity +
   transform only (never box-shadow/left/top, which force a full repaint every
   frame) and disabled under prefers-reduced-motion. */
.cf-brand-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    background: var(--cf-accent);
    animation: cfBrandPulse 2.4s ease-in-out 2;
}
@keyframes cfBrandPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.72); }
}
.cf-brand strong { color: var(--cf-accent-ink); font-weight: 700; }
.cf-brand-mark { font-size: 1.15rem; }
/* The UTC date. Same weight of line and the same neutral ink as the other nav
   chips so it reads as chrome, not as a control. */
.cf-today {
    font-size: 0.72rem; font-weight: 700; color: var(--cf-ink-2);
    background: var(--cf-field); border: 1px solid var(--cf-hairline);
    border-radius: 999px; padding: 0.3rem 0.6rem; white-space: nowrap;
}
.cf-nav-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.cf-nav-btn {
    font-family: inherit; font-size: 0.8rem; font-weight: 800;
    color: var(--cf-ink-2); background: transparent;
    border: 1px solid var(--cf-hairline); border-radius: 999px;
    padding: 0.42rem 0.85rem; text-decoration: none; cursor: pointer;
}
.cf-nav-btn:hover { background: var(--cf-field); color: var(--cf-ink); }
.cf-nav-btn:disabled { cursor: not-allowed; opacity: 0.55; }
.cf-nav-btn:disabled:hover { background: transparent; color: var(--cf-ink-2); }
.cf-notification-button {
    position: relative; flex: 0 0 40px; width: 40px; height: 40px;
    display: grid; place-items: center; padding: 0;
    color: var(--cf-ink); background: var(--cf-card);
    border: 1px solid var(--cf-hairline); border-radius: 50%;
    font: inherit; font-size: 1.05rem; cursor: pointer;
}
.cf-notification-button:hover { background: var(--cf-field); }
.cf-notification-button:focus-visible,
.cf-notification-close:focus-visible,
.cf-notification-mark-all:focus-visible,
.cf-notification-more:focus-visible,
.cf-notification-item:focus-visible {
    outline: 2px solid var(--cf-accent-2); outline-offset: 2px;
}
.cf-notification-button:disabled { cursor: default; opacity: 0.65; }
.cf-notification-badge {
    position: absolute; top: -3px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 4px;
    display: grid; place-items: center; border-radius: 999px;
    color: #fff; background: #c62828; border: 2px solid var(--cf-bg);
    font-size: 0.62rem; font-weight: 800; line-height: 1;
}
.cf-notification-badge[hidden] { display: none; }
.cf-notification-panel {
    position: absolute; top: calc(100% + 5px); right: 12px; z-index: 1300;
    display: flex; flex-direction: column;
    width: min(370px, calc(100vw - 24px));
    max-height: min(70vh, 620px); overflow: hidden;
    background: var(--cf-card); border: 1px solid var(--cf-border);
    border-radius: 16px; box-shadow: 0 16px 44px rgba(41, 37, 36, 0.2);
}
.cf-notification-panel[hidden] { display: none; }
.cf-notification-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
    padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--cf-hairline);
}
.cf-notification-panel-head h2 { margin: 0; font-size: 0.95rem; }
.cf-notification-panel-actions { display: flex; align-items: center; gap: 0.4rem; }
.cf-notification-mark-all,
.cf-notification-close,
.cf-notification-more {
    color: var(--cf-accent-ink); background: transparent; border: 0;
    font: inherit; font-size: 0.75rem; font-weight: 700; cursor: pointer;
}
.cf-notification-mark-all:disabled { color: var(--cf-dim); cursor: default; }
.cf-notification-close {
    width: 32px; height: 32px; border-radius: 50%;
    color: var(--cf-ink-2); font-size: 1.35rem; line-height: 1;
}
.cf-notification-close:hover,
.cf-notification-mark-all:not(:disabled):hover,
.cf-notification-more:hover { background: var(--cf-field); }
.cf-notification-list { overflow-y: auto; overscroll-behavior: contain; }
.cf-notification-empty {
    margin: 0; padding: 1.3rem 1rem; color: var(--cf-dim);
    font-size: 0.84rem; text-align: center;
}
.cf-notification-row { border-bottom: 1px solid var(--cf-hairline); }
.cf-notification-item {
    width: 100%; display: flex; align-items: flex-start; gap: 0.7rem;
    padding: 0.78rem 0.9rem; border: 0; text-align: left;
    color: var(--cf-ink); background: transparent; font: inherit; cursor: pointer;
}
.cf-notification-item:hover { background: var(--cf-field); }
.cf-notification-item.is-unread { background: #f2f6ff; }
.cf-notification-item.is-unread:hover { background: #e9f0ff; }
.cf-notification-icon {
    flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center;
    border-radius: 50%; background: var(--cf-field); font-size: 0.95rem;
}
.cf-notification-copy { min-width: 0; flex: 1 1 auto; }
.cf-notification-message { display: block; font-size: 0.82rem; line-height: 1.4; overflow-wrap: anywhere; }
.cf-notification-time { display: block; margin-top: 0.2rem; color: var(--cf-dim); font-size: 0.7rem; }
.cf-notification-unread-dot {
    flex: 0 0 8px; width: 8px; height: 8px; margin-top: 0.38rem;
    border-radius: 50%; background: #2463eb;
}
.cf-notification-unread-dot[hidden] { display: none; }
.cf-notification-more {
    padding: 0.75rem; border-top: 1px solid var(--cf-hairline);
}
.cf-notification-more[hidden] { display: none; }

/* ── Layout ───────────────────────────────────────────────────────────────── */
.cf-wrap {
    width: 100%; max-width: 620px; margin: 0 auto;
    padding: 1rem var(--cf-gutter) 4.5rem;
    display: flex; flex-direction: column; gap: 0.75rem;
}
.cf-guest { padding-top: 1rem; }

/* ── Composer ─────────────────────────────────────────────────────────────── */
.cf-composer {
    background: var(--cf-card); border: 1px solid var(--cf-border);
    border-radius: 14px; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.6rem;
    box-shadow: var(--cf-shadow);
}
.cf-composer-head { display: flex; align-items: center; gap: 0.6rem; }
.cf-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; font-weight: 800; font-size: 0.95rem;
    background: linear-gradient(135deg, #0369a1, #075985);
    color: #fff;
    position: relative; overflow: hidden;
}
/* A member's uploaded profile picture. `object-fit: cover` keeps it circular
   and fills the ring without distortion. */
.cf-avatar-img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    border-radius: 50%;
}
/* Facebook-style ring: a soft gradient halo around the picture, so a card
   header reads as an avatar at a glance even before the photo loads. */
.cf-avatar-ring {
    box-shadow: 0 0 0 2px var(--cf-card), 0 0 0 3.5px rgba(var(--cf-accent-rgb), 0.55);
}
/* The composer avatar is a BUTTON (tap to change the picture) with a small
   camera badge, so the affordance is discoverable without a label. */
.cf-avatar-btn {
    position: relative; flex-shrink: 0; padding: 0; border: none;
    background: none; cursor: pointer; border-radius: 50%;
    line-height: 0;
}
.cf-avatar-btn:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 3px; }
.cf-avatar-badge {
    position: absolute; right: -2px; bottom: -2px;
    width: 18px; height: 18px; border-radius: 50%;
    display: grid; place-items: center; font-size: 0.6rem;
    background: var(--cf-accent); color: #fff;
    border: 2px solid var(--cf-card);
}
.cf-composer-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cf-composer-who strong { font-size: 0.9rem; }
.cf-composer-who span { font-size: 0.72rem; color: var(--cf-dim); }

.cf-caption-input {
    font-family: inherit; font-size: 0.95rem; line-height: 1.5;
    color: var(--cf-ink); background: var(--cf-field);
    border: 1.5px solid var(--cf-accent-border); border-radius: 12px;
    padding: 0.7rem 0.8rem; width: 100%; resize: vertical;
    min-height: 62px; max-height: 220px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* The placeholder is the invitation, so it carries the emphasis. Weight 700 is
   not decoration: --cf-muted measured 3.50:1 on --cf-field, which FAILS WCAG AA
   for normal text and only clears the 3:1 bold/large floor once it is bold.
   --cf-dim measures 5.97:1, so it passes as NORMAL text too and does not depend
   on the bold allowance at all. Do not "brighten" this to --cf-accent (2.86:1)
   or --cf-gold-deep (2.82:1) — both fail even at bold/large. */
.cf-caption-input::placeholder {
    color: var(--cf-dim); font-weight: 700;
    opacity: 1; /* Firefox dims placeholders by default; keep the measured color. */
}
.cf-caption-input:hover { border-color: var(--cf-accent); }
/* The box lights up while a post is being written. The emphasis lives on the
   CONTAINER, not on the words: making 2,200 characters of body copy bold+colored
   would be noisy and would have to be re-measured for every future text color. */
.cf-caption-input:focus {
    outline: 2px solid var(--cf-accent-2); outline-offset: 1px;
    border-color: var(--cf-accent-2);
    box-shadow: 0 0 0 4px var(--cf-accent-soft);
}

.cf-composer-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.6rem; flex-wrap: wrap;
}
.cf-composer-actions { display: flex; align-items: center; gap: 0.5rem; }
.cf-composer-right { display: flex; align-items: center; gap: 0.7rem; margin-left: auto; }
.cf-file-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.8rem; font-weight: 700; cursor: pointer;
    color: var(--cf-ink); background: var(--cf-card);
    border: 1px solid var(--cf-border); border-radius: 999px;
    padding: 0.45rem 0.8rem;
}
.cf-file-btn:hover { border-color: var(--cf-accent-2); }
.cf-counter { font-size: 0.75rem; color: var(--cf-dim); font-variant-numeric: tabular-nums; }
.cf-counter.is-near { color: var(--cf-gold); }
.cf-counter.is-over { color: var(--cf-danger); }

.cf-post-btn {
    font-family: inherit; font-size: 0.85rem; font-weight: 800;
    color: var(--cf-gold-ink);
    background: linear-gradient(135deg, var(--cf-gold), var(--cf-gold-deep));
    border: none; border-radius: 999px; padding: 0.55rem 1.3rem; cursor: pointer;
}
.cf-post-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.cf-post-btn:focus-visible { outline: 2px solid var(--cf-accent-2); outline-offset: 2px; }

.cf-composer-hint { font-size: 0.72rem; color: var(--cf-dim); line-height: 1.45; }

/* ── Daily Learn "done today" strip ────────────────────────────────────────
   Replaces the full Daily Learn card once today's quiz is finished. Green is
   the semantic "done" colour here, not decoration, so it uses --cf-ok-ink on a
   pale tint rather than the G$ gold (gold means money, and a finished quiz is
   not a payment). */
.cf-learn-done {
    display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
    background: var(--cf-ok-soft); border: 1px solid var(--cf-ok-border);
    border-radius: 12px; padding: 0.5rem 0.7rem;
}
.cf-learn-done-mark { font-size: 0.9rem; line-height: 1; }
.cf-learn-done-text {
    font-size: 0.82rem; font-weight: 700; color: var(--cf-ok-ink);
    min-width: 0; flex: 1 1 auto;
}
.cf-learn-done-toggle {
    font-family: inherit; font-size: 0.74rem; font-weight: 800;
    color: var(--cf-ok-ink); background: transparent;
    border: 1px solid var(--cf-ok-border); border-radius: 999px;
    padding: 0.26rem 0.6rem; cursor: pointer; flex-shrink: 0;
}
.cf-learn-done-toggle:hover { background: #ffffff; }
.cf-learn-done-detail {
    font-size: 0.75rem; color: var(--cf-dim); line-height: 1.5;
    margin-top: 0.35rem; padding: 0 0.15rem;
}
.cf-warn {
    font-size: 0.76rem; color: var(--cf-gold); line-height: 1.45;
    border-left: 3px solid var(--cf-gold); padding-left: 0.6rem;
}

/* ── Username gate ────────────────────────────────────────────────────────── */
/* Shown only when the signed-in wallet has no username. Gold accent (the
   brand's "do this now" colour) so it reads as the next step, not an error. */
.cf-username-gate {
    border: 1px solid rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.08);
    border-radius: 12px;
    padding: 0.7rem 0.75rem;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.cf-username-lead { font-size: 0.8rem; color: var(--cf-ink); line-height: 1.5; }
.cf-username-row { display: flex; align-items: stretch; gap: 0.4rem; }
.cf-username-at {
    display: flex; align-items: center; padding: 0 0.15rem 0 0.5rem;
    color: var(--cf-gold); font-weight: 700;
}
.cf-username-input {
    flex: 1 1 auto; min-width: 0;
    background: var(--cf-card-solid);
    border: 1px solid var(--cf-border);
    border-radius: 10px;
    color: var(--cf-ink);
    font-family: inherit; font-size: 0.9rem;
    padding: 0.5rem 0.6rem;
}
.cf-username-input:focus-visible { outline: 2px solid var(--cf-accent-2); outline-offset: 1px; }
.cf-username-save {
    flex: 0 0 auto;
    background: linear-gradient(135deg, var(--cf-gold), var(--cf-gold-deep));
    color: var(--cf-gold-ink);
    border: none; border-radius: 10px; cursor: pointer;
    font-family: inherit; font-weight: 700; font-size: 0.82rem;
    padding: 0.5rem 0.9rem;
}
.cf-username-save:disabled { opacity: 0.6; cursor: not-allowed; }
.cf-username-save:focus-visible { outline: 2px solid var(--cf-accent-2); outline-offset: 2px; }
.cf-username-hint { font-size: 0.7rem; color: var(--cf-dim); line-height: 1.4; }
.cf-username-hint.is-error { color: var(--cf-danger); }

/* ── Upload previews ──────────────────────────────────────────────────────── */
.cf-previews { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cf-preview {
    position: relative; width: 78px; height: 78px; border-radius: 10px;
    overflow: hidden; border: 1px solid var(--cf-border); background: #000;
}
.cf-preview img, .cf-preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-preview-remove {
    position: absolute; top: 3px; right: 3px;
    width: 22px; height: 22px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 0.8rem; line-height: 1;
    display: grid; place-items: center;
}
.cf-preview-bar {
    position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: rgba(0, 0, 0, 0.5);
}
.cf-preview-bar > i {
    display: block; height: 100%; width: 0;
    background: var(--cf-gold);
    transition: width 0.15s linear;
}
.cf-preview.is-done .cf-preview-bar > i { background: var(--cf-ok); }
.cf-preview.is-failed .cf-preview-bar > i { background: var(--cf-danger); }

/* A tile that is still being prepared/uploaded must not look like a black
   rectangle: an overlay spinner says "working" even before a poster exists. */
.cf-preview.is-busy { opacity: 0.85; }
.cf-preview-spinner {
    position: absolute; inset: 0; margin: auto;
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: cfSpin 0.8s linear infinite;
    pointer-events: none;
}
@keyframes cfSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.cf-upload-status {
    font-size: 0.78rem; color: var(--cf-dim);
    display: flex; align-items: center; gap: 0.4rem;
}
.cf-upload-status.is-error { color: var(--cf-danger); }
/* The busy line ("Uploading… 42%") carries its own spinner so the wait is
   visible even if the tiles are scrolled out of view. */
.cf-upload-status.is-busy::before {
    content: '';
    flex: 0 0 auto;
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--cf-border);
    border-top-color: var(--cf-accent);
    animation: cfSpin 0.8s linear infinite;
}

/* ── Recent posters rail ────────────────────────────────────────────────────
   Instagram's story rail: a horizontal run of circular avatars with a ring,
   each labelled underneath. Ours is built from the authors already on the feed
   page, so it needs no endpoint and can never show a member who has not posted
   (see the proposal §3). Scrolls sideways with a hidden scrollbar, exactly like
   the real one. */
.cf-rail {
    display: flex; align-items: flex-start; gap: 0.85rem;
    overflow-x: auto; overflow-y: hidden;
    padding: 0.15rem 0 0.6rem;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.cf-rail::-webkit-scrollbar { display: none; }
.cf-rail[hidden] { display: none; }
.cf-rail-item {
    flex: 0 0 auto; width: 68px;
    display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
    text-decoration: none; color: var(--cf-ink);
    background: none; border: none; padding: 0; cursor: pointer;
    font-family: inherit;
}
/* The ring is drawn as a border on a padded circle, so the avatar inside keeps
   its own size and the gap between photo and ring is real whitespace — a
   box-shadow ring would collapse against the photo edge. */
.cf-rail-ring {
    display: grid; place-items: center;
    width: 62px; height: 62px; border-radius: 50%;
    padding: 2.5px;
    background: linear-gradient(135deg, var(--cf-gold), var(--cf-accent-2));
}
/* Your own row: the same ring, but muted — it is the composer entry point, not
   somebody else's profile. */
.cf-rail-item.is-self .cf-rail-ring {
    background: linear-gradient(135deg, var(--cf-hairline), var(--cf-border));
}
.cf-rail-ring .cf-avatar {
    width: 100%; height: 100%; border: 2px solid var(--cf-card);
    font-size: 1.15rem;
}
.cf-rail-ring .cf-avatar-img { border-radius: 50%; }
.cf-rail-name {
    font-size: 0.7rem; font-weight: 600; color: var(--cf-ink-2);
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cf-rail-item:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; border-radius: 10px; }

/* ── Post card ────────────────────────────────────────────────────────────── */
.cf-feed { display: flex; flex-direction: column; gap: 0.75rem; }
.cf-card {
    background: var(--cf-card); border: 1px solid var(--cf-border);
    border-radius: 14px; overflow: hidden; box-shadow: var(--cf-elev);
}
.cf-card-head {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.7rem 0.85rem 0.6rem;
}
.cf-card-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.cf-card-who strong { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-card-who span { font-size: 0.72rem; color: var(--cf-muted); }
.cf-card-who .cf-post-time {
    display: block; font-size: 0.72rem; color: var(--cf-muted);
    font-variant-numeric: tabular-nums;
}
.cf-card-head .cf-avatar { width: 44px; height: 44px; }
/* Avatar + name are ONE link to the member's public profile. Reset the anchor
   so the row keeps its flex layout, and give the whole target a focus ring. */
.cf-profile-link {
    display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 0;
    color: inherit; text-decoration: none; border-radius: 12px;
}
.cf-profile-link:hover .cf-card-who strong { color: var(--cf-accent-ink); text-decoration: underline; }
.cf-profile-link:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
.cf-menu-btn {
    font-family: inherit; font-size: 1.1rem; line-height: 1;
    color: var(--cf-dim); background: transparent; border: none;
    padding: 0.25rem 0.5rem; cursor: pointer; border-radius: 8px;
}
.cf-menu-btn:hover { background: var(--cf-field); color: var(--cf-ink); }

/* Follow pill in the card head. An outline when idle, a filled grey when
   already following, so the state is obvious at a glance. */
.cf-follow {
    font-family: inherit; font-size: 0.76rem; font-weight: 800;
    color: var(--cf-accent-ink); background: transparent;
    border: 1px solid rgba(var(--cf-accent-rgb), 0.5); border-radius: 999px;
    padding: 0.3rem 0.8rem; cursor: pointer; flex-shrink: 0;
}
.cf-follow:hover { background: rgba(var(--cf-accent-rgb), 0.10); }
.cf-follow:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
.cf-follow.is-following {
    color: var(--cf-dim); border-color: var(--cf-border); background: var(--cf-soft);
}

/* ── Media ──────────────────────────────────────────────────────────────────
   Instagram crops a feed photo into a fixed aspect box; it is never
   letterboxed. `cover` on a black canvas does exactly that, and the box is 4:5
   (IG's portrait default) unless the server reported the real dimensions, in
   which case buildCard sets the image's own `aspect-ratio`. An image with no
   reported size gets `.cf-media-raw` and is shown whole — guessing a box would
   crop a face. */
.cf-media {
    position: relative;   /* the double-tap heart burst is absolutely placed */
    background: #0b0b0b; display: flex; flex-direction: column;
}
.cf-media img {
    width: 100%; display: block; background: #0b0b0b;
    /* 4:5 is Instagram's portrait default. buildCard overrides it with the
       photo's REAL ratio when the server reported one; an unsized image gets
       `.cf-media-raw` instead, because guessing a box would crop a face. */
    aspect-ratio: 4 / 5;
    object-fit: cover;
    max-height: 78dvh;
    cursor: zoom-in;
}
.cf-media img.cf-media-raw { aspect-ratio: auto; object-fit: contain; }
.cf-media-image.is-loading { background: var(--cf-field); opacity: 0.72; }
.cf-media-image.is-error {
    min-height: 150px; aspect-ratio: 4 / 3; object-fit: none;
    background: var(--cf-field); opacity: 0.8;
}

/* Multi-photo posts use a compact square mosaic. Two photos share one row;
   three put the first image beside two stacked tiles; four form a 2 × 2 grid.
   Single photos and any post containing video keep the normal media flow. */
.cf-media.cf-media-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 3px; max-width: 520px; aspect-ratio: 1 / 1;
    margin-inline: auto; overflow: hidden;
}
.cf-media.cf-media-grid-2 {
    grid-template-rows: minmax(0, 1fr); aspect-ratio: 2 / 1;
}
.cf-media.cf-media-grid-3 > img:first-child { grid-row: 1 / span 2; }
.cf-media.cf-media-grid > img,
.cf-media.cf-media-grid > img.cf-media-raw {
    width: 100%; height: 100%; min-width: 0; min-height: 0; max-height: none;
    aspect-ratio: auto; object-fit: cover; background: #0b0b0b;
}

/* Video is Instagram-style: a BOUNDED, rounded frame — never the full screen.
   `contain` (not `cover`) so nothing is cropped; a tall clip letterboxes
   inside the frame. The frame is a button that opens the lightbox. */
.cf-media .cf-video-frame {
    position: relative; display: block; width: 100%; margin: 0.6rem 0;
    padding: 0; border: none; background: #000; cursor: zoom-in;
    border-radius: 12px; overflow: hidden;
    max-height: min(68dvh, 640px); aspect-ratio: 4 / 5;
}
.cf-video-frame video {
    width: 100%; height: 100%; max-height: min(68dvh, 640px);
    object-fit: contain; display: block; background: #000;
}
.cf-video-frame.is-loading { background: var(--cf-field); }
.cf-video-frame.is-error::after {
    content: 'Video unavailable'; position: absolute; inset: 0;
    display: grid; place-items: center; color: var(--cf-ink-2);
    background: var(--cf-field); font-size: 0.85rem; font-weight: 700;
}

/* The double-tap heart burst. Instagram's signature feedback. Positioned over
   the media and animated with transform/opacity ONLY — a test scans every
   animation body for paint-heavy properties, so keep it to those two. */
.cf-burst {
    position: absolute; inset: 0; margin: auto;
    width: 84px; height: 84px; pointer-events: none;
    display: grid; place-items: center; font-size: 3.4rem; line-height: 1;
    opacity: 0;
    animation: cfBurst 0.75s ease-out;
}
@keyframes cfBurst {
    0%   { opacity: 0; transform: scale(0.4); }
    35%  { opacity: 1; transform: scale(1.12); }
    70%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.25); }
}

.cf-card-body { padding: 0.6rem 0.8rem 0.75rem; display: flex; flex-direction: column; gap: 0.35rem; }
.cf-engagement { display: flex; flex-direction: column; gap: 0.2rem; }

/* ── Action row (Instagram's icon row) ──────────────────────────────────────
   heart · comment · share, with report pushed to the right. The reaction
   picker is anchored to the heart; counts and the expanded thread stay grouped
   below the post caption. */
.cf-card-actions {
    display: flex; align-items: center; gap: 0.15rem;
    padding: 0.1rem 0 0;
}
.cf-card-actions .cf-action-btn:last-child { margin-left: auto; }
.cf-reaction-control { position: relative; display: inline-flex; flex: 0 0 auto; }
.cf-action-btn {
    font-family: inherit; font-size: 0.82rem; font-weight: 700;
    color: var(--cf-ink); background: transparent; border: none;
    min-width: 44px; min-height: 44px; padding: 0.4rem 0.55rem;
    border-radius: 10px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.32rem;
}
.cf-action-btn .cf-act-icon { font-size: 1.28rem; line-height: 1; }
.cf-action-btn:hover { background: var(--cf-field); }
.cf-action-btn:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 1px; }
.cf-support-action {
    border: 1px solid var(--cf-earn-line);
    background: var(--cf-earn-bg1);
    color: var(--cf-earn-ink);
    font-weight: 900;
}
.cf-support-action:hover { filter: brightness(0.97); background: var(--cf-earn-bg1); }
.cf-support-action .cf-act-icon { color: var(--cf-accent-ink); }
/* The liked heart is the one red thing on the card, exactly like Instagram. */
.cf-action-btn.is-liked .cf-act-icon { color: var(--cf-danger); }
.cf-action-btn.is-liked { color: var(--cf-danger); }
.cf-reaction-trigger {
    touch-action: pan-y; user-select: none; -webkit-touch-callout: none;
}
.cf-reaction-picker {
    position: absolute; z-index: 30; left: 0; top: calc(100% + 0.25rem);
    display: flex; align-items: center; gap: 0.16rem;
    padding: 0.34rem; background: var(--cf-card);
    border: 1px solid var(--cf-border); border-radius: 999px;
    box-shadow: var(--cf-shadow); white-space: nowrap;
}
.cf-reaction-picker[hidden] { display: none; }

/* Reaction summary line (read-only) */
.cf-summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.6rem; font-size: 0.78rem; color: var(--cf-ink-2);
}
.cf-summary-left { display: flex; align-items: center; gap: 0.35rem; }
/* Stacked reaction badges, Facebook-style: overlapping circles so a post with
   several reactions reads as "many people reacted" at a glance instead of a
   single anonymous emoji. The ring matches the card so the overlap is legible. */
.cf-summary-emojis { display: inline-flex; align-items: center; }
.cf-summary-emoji {
    font-size: 0.78rem; line-height: 1;
    width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--cf-field);
    box-shadow: 0 0 0 2px var(--cf-card);
}
.cf-summary-emoji + .cf-summary-emoji { margin-left: -7px; }
.cf-summary-more {
    font-size: 0.66rem; font-weight: 800; color: var(--cf-dim);
    margin-left: 0.2rem;
}
.cf-count { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--cf-ink); }
.cf-reaction-count-trigger {
    display: inline-flex; align-items: center; gap: 0.28rem;
    border: 0; border-radius: 999px; padding: 0.18rem 0.25rem;
    background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.cf-reaction-count-trigger:hover:not(:disabled) { background: var(--cf-field); }
.cf-reaction-count-trigger:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
.cf-reaction-count-trigger:disabled { cursor: default; }
.cf-reaction-view-label { color: var(--cf-accent-ink); font-size: 0.68rem; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }

/* Caption — Instagram's shape: the author's name in BOLD, then the text, on
   the same line. `.cf-caption-author` is an anchor to the public profile, so
   the inline name is a real link and not just styling. */
.cf-caption {
    font-size: 0.92rem; line-height: 1.55; white-space: pre-wrap;
    overflow-wrap: anywhere; color: var(--cf-ink);
}
.cf-caption-author {
    font-weight: 800; color: var(--cf-ink); text-decoration: none;
    margin-right: 0.35rem;
}
.cf-caption-author:hover { text-decoration: underline; }
.cf-inline-link {
    color: var(--cf-accent-ink); text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 2px;
    overflow-wrap: anywhere;
}
.cf-inline-link:hover { color: var(--cf-accent-2); }
.cf-inline-link:focus-visible {
    outline: 2px solid var(--cf-accent); outline-offset: 2px;
    border-radius: 2px;
}
.cf-caption.is-clamped {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
.cf-see-more {
    font-family: inherit; font-size: 0.78rem; font-weight: 700;
    color: var(--cf-ink-2); background: none; border: none;
    padding: 0; cursor: pointer; align-self: flex-start;
}

/* ── Daily Sunrise compact hierarchy ─────────────────────────────────────── */
.cf-daily-heading {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 0.75rem; margin: 0.05rem 0 -0.35rem;
}
.cf-daily-heading strong {
    font-family: var(--cf-serif); font-size: 1.05rem; font-weight: 700;
    color: var(--cf-ink);
}
.cf-daily-heading span {
    color: var(--cf-muted); font-size: 0.72rem; font-weight: 700;
}
.cf-card.is-focus {
    outline: 3px solid rgba(var(--cf-accent-rgb), 0.42);
    outline-offset: 3px;
    animation: cfFocus 2.4s ease-out;
}
@keyframes cfFocus {
    0%, 70% { background: rgba(255, 247, 230, 0.92); }
    100% { background: var(--cf-card); }
}
.cf-meta { font-size: 0.72rem; color: var(--cf-ink-2); }

/* The six reactions live in the heart's temporary picker, not in a permanent
   toolbar row. A pressed reaction lifts out in G$ gold. */
.cf-chip {
    font-family: inherit; font-size: 1.15rem; line-height: 1;
    background: var(--cf-field); border: 1px solid transparent;
    border-radius: 999px; padding: 0.34rem 0.6rem; cursor: pointer;
    transition: transform 0.12s ease, background-color 0.12s ease;
}
.cf-chip:hover { background: var(--cf-soft); }
.cf-chip:active { transform: scale(1.22); }
.cf-chip[aria-pressed="true"] {
    background: linear-gradient(135deg, var(--cf-gold), var(--cf-gold-deep));
    border-color: var(--cf-gold-deep);
    transform: scale(1.06);
}
.cf-chip:focus-visible { outline: 2px solid var(--cf-accent-2); outline-offset: 2px; }

/* Comments — Instagram's rows are avatar + bubble, with the author in bold
   inside the bubble and the delete control outside it. */
.cf-comments { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.4rem; }
.cf-engagement .cf-comments { margin-top: 0; }
.cf-comment-thread { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.cf-comment-node { min-width: 0; }
.cf-comment-children {
    display: flex; flex-direction: column; gap: 0.48rem;
    margin: 0.42rem 0 0 0.72rem; padding-left: 0.62rem;
    border-left: 2px solid var(--cf-border); min-width: 0;
}
/* Deeper threads keep their semantic nesting while visual indentation caps. */
.cf-comment-children[data-depth="4"] { margin-left: 0; padding-left: 0.42rem; }
.cf-comment { display: flex; gap: 0.5rem; align-items: flex-start; }
.cf-comment-avatar {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; font-size: 0.68rem; font-weight: 800;
    background: linear-gradient(135deg, var(--cf-gold), var(--cf-gold-deep)); color: var(--cf-gold-ink);
    overflow: hidden;
}
.cf-comment-avatar .cf-avatar-img { border-radius: 50%; }
.cf-comment-body {
    background: var(--cf-field); border: 1px solid var(--cf-border); border-radius: 14px;
    padding: 0.42rem 0.7rem; font-size: 0.84rem; line-height: 1.45;
    overflow-wrap: anywhere; white-space: pre-wrap; flex: 1;
}
.cf-comment-author-line { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.12rem; }
.cf-comment-body strong { display: block; font-size: 0.76rem; color: var(--cf-ink); }
.cf-comment-profile-link { color: var(--cf-accent-ink); text-decoration: underline; text-underline-offset: 2px; border-radius: 3px; cursor: pointer; }
.cf-comment-profile-link:hover { color: var(--cf-accent); }
.cf-comment-profile-link:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
.cf-comment-profile-avatar-link { flex: 0 0 26px; border-radius: 50%; text-decoration: none; }
.cf-comment-profile-avatar-link:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
.cf-author-badge { color: var(--cf-accent); font-size: 0.62rem; font-weight: 800; }
.cf-reply-mention { color: var(--cf-accent); font-weight: 750; }
.cf-comment-actions { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.cf-comment-action {
    border: 0; padding: 0.25rem 0.35rem; background: transparent;
    color: var(--cf-muted); font: inherit; font-size: 0.7rem; font-weight: 700;
    cursor: pointer; min-height: 32px;
}
.cf-comment-action:hover, .cf-comment-action:focus-visible { color: var(--cf-accent); }
.cf-comment-deleted-avatar { color: var(--cf-muted); background: var(--cf-field); }
.cf-reply-form { flex-wrap: wrap; align-items: center; padding-left: 2rem; }
.cf-replying-to { color: var(--cf-muted); font-size: 0.7rem; font-weight: 700; width: 100%; }
.cf-comment-form { display: flex; gap: 0.45rem; margin-top: 0.35rem; }
.cf-comment-form input {
    font-family: inherit; font-size: 0.85rem; flex: 1;
    color: var(--cf-ink); background: var(--cf-card);
    border: 1px solid var(--cf-hairline); border-radius: 999px;
    min-height: 44px; padding: 0.45rem 0.85rem;
}
.cf-comment-form button {
    font-family: inherit; font-size: 0.8rem; font-weight: 800;
    color: var(--cf-accent); background: transparent;
    min-height: 44px; border: none; border-radius: 999px;
    padding: 0.45rem 0.7rem; cursor: pointer;
}
.cf-comment-form button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Skeletons / empty / load more ────────────────────────────────────────── */
.cf-skeleton {
    height: 240px; border-radius: 16px;
    background: linear-gradient(100deg, var(--cf-card) 30%, #efe8db 50%, var(--cf-card) 70%);
    background-size: 220% 100%;
    animation: cfShimmer 1.4s linear infinite;
}
@keyframes cfShimmer { from { background-position: 140% 0; } to { background-position: -40% 0; } }

.cf-feed-foot { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.cf-load-more {
    font-family: inherit; font-size: 0.85rem; font-weight: 700;
    color: var(--cf-ink); background: var(--cf-card);
    border: 1px solid var(--cf-border); border-radius: 999px;
    padding: 0.6rem 1.4rem; cursor: pointer;
}
.cf-load-more:disabled { opacity: 0.5; cursor: wait; }
.cf-empty { font-size: 0.88rem; color: var(--cf-dim); text-align: center; padding: 1.5rem 0; }

/* ── Lightbox ─────────────────────────────────────────────────────────────── */
.cf-lightbox {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(20, 14, 6, 0.94);
    display: grid; place-items: center; padding: 1rem;
}
.cf-lightbox[hidden] { display: none; }
.cf-lightbox-body img, .cf-lightbox-body video {
    max-width: 96vw; max-height: 88dvh; border-radius: 10px;
}
.cf-lightbox-close {
    position: absolute; top: 0.7rem; right: 0.9rem;
    font-size: 1.6rem; line-height: 1; color: #fff;
    background: rgba(255, 255, 255, 0.18); border: none; border-radius: 50%;
    width: 40px; height: 40px; cursor: pointer;
}

/* ── Edit modal ───────────────────────────────────────────────────────────── */
.cf-modal {
    position: fixed; inset: 0; z-index: 99990;
    background: rgba(20, 14, 6, 0.72);
    display: grid; place-items: center; padding: 1rem;
}
.cf-modal[hidden] { display: none; }
.cf-modal-card {
    width: 100%; max-width: 460px; background: var(--cf-card-solid);
    border: 1px solid var(--cf-border); border-radius: 16px;
    padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem;
}
.cf-modal-card h3 { font-size: 1rem; }
.cf-modal-foot { display: flex; justify-content: flex-end; gap: 0.5rem; }
.cf-btn-ghost {
    font-family: inherit; font-size: 0.85rem; font-weight: 700;
    color: var(--cf-ink); background: transparent;
    border: 1px solid var(--cf-border); border-radius: 999px;
    padding: 0.55rem 1.1rem; cursor: pointer;
}

/* ── Profile picture modal ────────────────────────────────────────────────── */
.cf-avatar-preview {
    width: 110px; height: 110px; border-radius: 50%; margin: 0.25rem auto 0;
    display: grid; place-items: center; overflow: hidden;
    font-weight: 800; font-size: 2.6rem; color: #fff;
    background: linear-gradient(135deg, #0369a1, #075985);
    box-shadow: 0 0 0 3px var(--cf-card), 0 0 0 5px rgba(var(--cf-accent-rgb), 0.5);
}
.cf-avatar-preview .cf-avatar-img { border-radius: 50%; }
.cf-avatar-status { font-size: 0.82rem; color: var(--cf-dim); text-align: center; min-height: 1.1em; }
.cf-avatar-status.is-error { color: var(--cf-danger); }
.cf-avatar-hint { font-size: 0.75rem; line-height: 1.5; color: var(--cf-muted); text-align: center; }

/* ── Post options menu ────────────────────────────────────────────────────── */
.cf-menu {
    position: absolute; z-index: 99995; min-width: 180px;
    background: var(--cf-card-solid); border: 1px solid var(--cf-border);
    border-radius: 12px; padding: 0.3rem; display: flex; flex-direction: column;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.cf-menu-item {
    font-family: inherit; font-size: 0.85rem; text-align: left;
    color: var(--cf-ink); background: transparent; border: none;
    border-radius: 8px; padding: 0.55rem 0.7rem; cursor: pointer;
}
.cf-menu-item:hover { background: var(--cf-card); }
.cf-menu-item.is-danger { color: var(--cf-danger); }

/* ── Toast ────────────────────────────────────────────────────────────────── */
.cf-toast {
    position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
    z-index: 100001; max-width: min(92vw, 420px);
    background: var(--cf-card-solid); border: 1px solid var(--cf-border);
    border-left: 3px solid var(--cf-accent-2);
    color: var(--cf-ink); font-size: 0.84rem; line-height: 1.45;
    border-radius: 12px; padding: 0.7rem 0.95rem;
    animation: cfToastIn 0.18s ease-out;
}
.cf-toast[hidden] { display: none; }
.cf-toast.is-error { border-left-color: var(--cf-danger); }
.cf-toast.is-ok { border-left-color: var(--cf-ok); }
@keyframes cfToastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── Responsive ───────────────────────────────────────────────────────────── */

/* ── Community feed density refresh: desktop/tablet ──────────────────────────
   Tighten the feed's whitespace to roughly 80% of the previous rhythm without
   scaling the page. Type changes stay deliberately slight (and readable); the
   density comes primarily from scoped component gaps and padding. Interactive
   controls and their hit areas are not reduced. */
@media (min-width: 641px) {
    .cf-wrap { padding-top: 0.8rem; gap: 0.6rem; }
    .cf-feed { gap: 0.6rem; }
    .cf-composer { padding: 0.6rem; gap: 0.48rem; }
    .cf-composer-head { gap: 0.5rem; }
    .cf-caption-input { padding: 0.56rem 0.64rem; }
    .cf-rail { gap: 0.68rem; padding-bottom: 0.48rem; }
    .cf-card-head { gap: 0.56rem; padding: 0.56rem 0.68rem 0.48rem; }
    .cf-card-who strong { font-size: 0.86rem; }
    .cf-card-body { padding: 0.48rem 0.64rem 0.6rem; gap: 0.28rem; }
    .cf-caption { font-size: 0.9rem; line-height: 1.5; }
    .cf-comments { gap: 0.4rem; margin-top: 0.32rem; }
    .cf-comment-body { padding: 0.34rem 0.56rem; }
}

/* ══ THE INSTAGRAM PHONE LAYOUT ═════════════════════════════════════════════
   Everything that makes instagram.com read as instagram.com on a phone lives
   here, in ONE block, so the desktop rail layout below is untouched.

   Four rules carry the whole look:
     1. Posts are SECTIONS of one white canvas — the card loses its border,
        radius and elevation and is separated by a hairline instead.
     2. Media is FULL-BLEED: it pulls back by exactly the page gutter
        (`--cf-gutter`) to reach the screen edges.
     3. The action row is an ICON row and sits directly under the media.
     4. The caption reads `author + text` on one line.

   640px, not 480px: this is a layout decision about a single-column feed, and
   the desktop rail only takes over at 900px. A 600px-wide window is still a
   one-column phone-shaped feed, so it gets the same treatment. */
/* ── Community G$ card ──────────────────────────────────────────────────────
   The community rewards balance. It lives on THIS page only and never on the
   wallet page — see docs/COMMUNITY_REWARDS_LEDGER_PROPOSAL.md §0. It is built
   from the same tokens and the same Instagram-mobile grammar as the feed, so
   it reads as part of the page rather than a bolted-on widget.

   It is the ONE surface on the page that is about money, so unlike the feed's
   flat sections it keeps a warm G$ gold gradient, a radius and a shadow — the
   owner asked for colour and a background here. See
   docs/COMMUNITY_REWARDS_CARD_REVAMP_PROPOSAL.md. */
.cf-earn {
    position: relative;
    isolation: isolate;
    background: linear-gradient(135deg, var(--cf-earn-bg1), var(--cf-earn-bg2));
    border: 1px solid var(--cf-earn-line);
    border-radius: 16px;
    padding: 0.9rem 0.95rem 0.95rem;
    box-shadow: var(--cf-earn-shadow);
    overflow: hidden;
}
/* One decorative loop, kept cheap: `transform`/`opacity` only, so it never
   forces a full repaint per frame (the wallet load-perf lesson). Sits behind
   the content via the negative z-index, and is switched off for reduced
   motion. */
.cf-earn::before {
    content: '';
    position: absolute;
    inset: -40% -20% auto -20%;
    height: 150%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(60% 60% at 78% 8%,
        rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 70%);
    animation: cfEarnGlow 9s ease-in-out infinite;
}
@keyframes cfEarnGlow {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
    50%      { transform: translate3d(-6%, 4%, 0) scale(1.06); opacity: 1; }
}
.cf-earn-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.6rem;
}
.cf-earn-title {
    margin: 0; font-size: 0.82rem; font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--cf-earn-ink);
    display: flex; align-items: center; gap: 0.45rem;
}
/* A gold coin mark. Gold is a light surface, so the glyph carries DARK ink —
   white on amber is 2.03:1 and fails (the wallet page's G$ gold rule). */
.cf-earn-mark {
    width: 1.55rem; height: 1.55rem; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 0.85rem; line-height: 1;
    background: linear-gradient(140deg, #fbbf24, #f59e0b);
    color: var(--cf-gold-ink);
    box-shadow: inset 0 -1px 0 rgba(120, 70, 0, 0.25);
}
/* Always visible: it carries the state, so the card still says what to DO when
   the personal balance is hidden (the default). */
.cf-earn-lead {
    margin: 0.5rem 0 0; font-size: 0.85rem; line-height: 1.45;
    font-weight: 600; color: var(--cf-earn-ink-2);
}
/* The chip is always present so the balance is never shown bare and mistaken
   for spendable on-chain G$. Solid fills (not alpha washes over a gradient):
   a translucent pill over a gradient can never be measured reliably. */
.cf-earn-chip {
    flex-shrink: 0;
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em;
    padding: 0.22rem 0.55rem; border-radius: 999px;
    background: #fff7e6; color: #8a4b00;
    border: 1px solid rgba(180, 120, 20, 0.4);
    font-family: inherit; line-height: 1.4; cursor: default;
}
.cf-earn-chip:not(:disabled) { cursor: pointer; }
.cf-earn-chip:not(:disabled):hover { filter: brightness(0.96); }
.cf-earn-chip:not(:disabled):focus-visible {
    outline: 3px solid var(--cf-accent-2); outline-offset: 2px;
}
.cf-earn-chip:disabled { opacity: 1; }
.cf-earn-chip[data-state="ready"] {
    background: #e7f8ec; color: #146c33;
    border-color: rgba(20, 108, 51, 0.35);
}
/* Not an error: the wallet works, it just does not earn yet. A neutral tone
   reads as "one step to go", where red would read as "you did something wrong". */
.cf-earn-chip[data-state="unverified"] {
    background: #eceefe; color: #3730a3;
    border-color: rgba(55, 48, 163, 0.3);
}
.cf-earn-chip[data-state="guest"] {
    background: #f1f2f6; color: #4b5563;
    border-color: rgba(75, 85, 99, 0.25);
}
.cf-earn-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(10.5rem, 13rem);
    align-items: center;
    gap: 0.85rem;
    margin-top: 0.65rem;
    min-width: 0;
}
.cf-earn-overview[hidden] { display: none !important; }
.cf-earn-overview-no-balance { grid-template-columns: minmax(0, 1fr); }
.cf-earn-overview-no-balance .cf-earn-actions {
    justify-self: end;
    width: min(100%, 15rem);
}
.cf-earn-actions {
    display: grid;
    align-content: start;
    gap: 0.45rem;
    min-width: 0;
}
.cf-earn-actions[hidden] { display: none !important; }
.cf-earn-actions .cf-earn-withdraw-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    margin: 0;
}
.cf-earn-actions .cf-earn-withdraw { width: 100%; min-height: 44px; }
.cf-earn-actions .cf-earn-withdraw-status {
    align-self: stretch;
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
}
.cf-earn-actions .cf-earn-history { margin: 0; }
.cf-earn-actions .cf-earn-history-toggle { width: 100%; min-height: 44px; }
.cf-earn-balance-wrap { margin: 0; }
.cf-earn-balance {
    margin: 0.55rem 0 0; display: flex; align-items: baseline; gap: 0.3rem;
}
.cf-earn-amount {
    font-family: var(--cf-serif); font-size: 2.1rem; font-weight: 700;
    line-height: 1; color: var(--cf-earn-ink);
    font-variant-numeric: tabular-nums;
}
.cf-earn-unit { font-size: 0.95rem; font-weight: 700; color: var(--cf-earn-accent); }
.cf-earn-goal { margin: 0.3rem 0 0; font-size: 0.78rem; color: var(--cf-earn-ink-2); }
.cf-earn-bar {
    margin-top: 0.5rem; height: 7px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.65); overflow: hidden;
    border: 1px solid var(--cf-earn-line);
}
.cf-earn-bar-fill {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--cf-gold), var(--cf-gold-deep));
    border-radius: 999px;
    transition: width 240ms ease;
}
.cf-earn-budgets {
    margin-top: 0.75rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--cf-earn-line);
}
.cf-earn-budget-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    color: var(--cf-earn-ink-2);
    font-size: 0.74rem;
}
.cf-earn-budget-head span { font-size: 0.68rem; color: var(--cf-earn-accent); }
.cf-earn-budget-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    margin-top: 0.45rem;
}
.cf-earn-budget {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.45rem 0.5rem;
    border-radius: 10px;
    background: var(--cf-earn-tile);
    border: 1px solid rgba(255, 255, 255, 0.9);
}
.cf-earn-budget-label { font-size: 0.68rem; font-weight: 800; color: var(--cf-earn-ink-2); }
.cf-earn-budget-value { font-size: 0.78rem; font-weight: 800; color: var(--cf-earn-accent); font-variant-numeric: tabular-nums; }
.cf-earn-budget-note { font-size: 0.64rem; line-height: 1.25; color: var(--cf-earn-ink-2); }
.cf-earn-budget-total { border-color: var(--cf-earn-line); }
.cf-earn-budgets[hidden] { display: none; }
/* Retain server-sourced rate-tile styling for a possible future disclosure;
   the current Community card intentionally does not mount that panel. */
.cf-earn-rates-toggle {
    margin-top: 0.5rem; padding: 0.38rem 0.7rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--cf-earn-line); border-radius: 999px;
    background: transparent; color: var(--cf-earn-accent);
    font: inherit; font-size: 0.76rem; font-weight: 800; cursor: pointer;
}
.cf-earn-rates-toggle:hover { background: var(--cf-earn-tile); }
.cf-earn-rates-toggle:focus-visible { outline: 2px solid var(--cf-earn-accent); outline-offset: 2px; }
.cf-earn-rates-toggle[hidden], .cf-earn-rates[hidden] { display: none; }
.cf-earn-rates {
    margin: 0.45rem 0 0; padding: 0; list-style: none;
    display: grid; gap: 0.4rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cf-earn-rates li {
    display: flex; flex-direction: column; gap: 0.15rem;
    min-width: 0;
    background: var(--cf-earn-tile);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 11px;
    padding: 0.45rem 0.55rem;
}
.cf-earn-rates .cf-earn-rate-label {
    min-width: 0; font-size: 0.7rem; line-height: 1.3;
    font-weight: 600; color: var(--cf-earn-ink-2);
}
.cf-earn-rates .cf-earn-rate-value {
    font-size: 0.92rem; font-weight: 800; color: var(--cf-earn-accent);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cf-earn-note {
    margin: 0.55rem 0 0; font-size: 0.74rem; line-height: 1.4;
    color: var(--cf-earn-ink-2);
}
.cf-earn-note.is-warn { color: var(--cf-accent-ink); }
.cf-earn-reconcile {
    margin-top: 0.75rem;
    padding: 0.7rem;
    border: 1px solid var(--cf-earn-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.64);
}
.cf-earn-reconcile-copy {
    color: var(--cf-earn-ink);
    font-size: 0.78rem;
    line-height: 1.5;
}
.cf-earn-reconcile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.6rem;
}
.cf-earn-reconcile-btn {
    min-height: 44px;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--cf-earn-accent);
    border-radius: 999px;
    background: var(--cf-earn-accent);
    color: #fff;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}
.cf-earn-reconcile-btn:hover { background: #704000; }
.cf-earn-reconcile-btn:focus-visible {
    outline: 2px solid var(--cf-earn-accent);
    outline-offset: 2px;
}
.cf-earn-reconcile-btn:disabled {
    opacity: 0.65;
    cursor: wait;
}
.cf-earn-reconcile-status {
    margin: 0.55rem 0 0;
    color: var(--cf-earn-ink);
    font-size: 0.78rem;
    line-height: 1.45;
}
.cf-earn-reconcile-status.is-error { color: var(--cf-accent-ink); }
.cf-earn-reconcile-status.is-ok { color: var(--cf-ok-ink); }
.cf-earn-history { margin-top: 0.55rem; }
.cf-earn-history-toggle, .cf-earn-history-more {
    min-height: 2.35rem; padding: 0.42rem 0.72rem;
    border: 1px solid var(--cf-earn-line); border-radius: 999px;
    background: var(--cf-earn-tile); color: var(--cf-earn-accent);
    font: inherit; font-size: 0.76rem; font-weight: 800; cursor: pointer;
}
.cf-earn-history-toggle:hover, .cf-earn-history-more:hover { background: #fff; }
.cf-earn-history-toggle:focus-visible, .cf-earn-history-more:focus-visible,
.cf-earn-history-link:focus-visible {
    outline: 2px solid var(--cf-earn-accent); outline-offset: 2px;
}
.cf-earn-history-panel {
    margin-top: 0.55rem; padding-top: 0.55rem;
    border-top: 1px solid var(--cf-earn-line);
}
.cf-earn-history-message { margin: 0 0 0.45rem; color: var(--cf-earn-ink-2); font-size: 0.78rem; line-height: 1.4; }
.cf-earn-history-list { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.cf-earn-history-item {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    gap: 0.3rem 0.65rem; min-width: 0; padding: 0.55rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 11px;
    background: var(--cf-earn-tile);
}
.cf-earn-history-detail { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.55rem; min-width: 0; }
.cf-earn-history-amount { color: var(--cf-earn-ink); font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.cf-earn-history-date { color: var(--cf-earn-ink-2); font-size: 0.7rem; }
.cf-earn-history-state { padding: 0.16rem 0.42rem; border-radius: 999px; background: #fff7e6; border: 1px solid var(--cf-earn-line); color: var(--cf-earn-accent); font-size: 0.65rem; font-weight: 800; white-space: nowrap; }
.cf-earn-history-link { grid-column: 1 / -1; width: fit-content; color: #704000; font-size: 0.72rem; font-weight: 700; overflow-wrap: anywhere; }
.cf-earn-history-more { margin-top: 0.5rem; }
.cf-earn-history-more:disabled { opacity: 0.65; cursor: wait; }
.cf-earn-history [hidden], .cf-earn-history-panel[hidden], .cf-earn-history-more[hidden] { display: none !important; }

@media (max-width: 640px) {
    /* `max-width: none` is load-bearing: the full-bleed media pulls back by
       exactly `--cf-gutter`, which only lands on the screen edge when the wrap
       IS the viewport. Between 620px and 640px the 620px max-width would make
       the pull-back overshoot, and `overflow-x: clip` would silently cut the
       photo's edge. */
    .cf-wrap {
        max-width: none;
        padding: 0.5rem var(--cf-gutter) calc(0.9rem + env(safe-area-inset-bottom, 0px));
        gap: 0.85rem;
    }
    .cf-guest { padding-top: 0.5rem; }

    /* (1) Section, not card. `--cf-elev: none` also flattens the composer and
       the avatar preview, which are siblings of the cards on the same canvas. */
    :root { --cf-elev: none; }
    .cf-feed { gap: 0.9rem; }
    .cf-card {
        border: none; border-radius: 0; box-shadow: none;
        border-bottom: 1px solid var(--cf-hairline);
        padding-bottom: 0.5rem;
    }
    .cf-card:last-child { border-bottom: none; }
    /* The earn card deliberately does NOT follow that grammar. It is the one
       surface on the page that is about money, and the owner asked for colour
       and a background — so it stays a card (gradient, radius, shadow) on a
       phone instead of flattening into a bare section. Scoped to this
       selector, so the feed's Instagram layout is untouched. */
    .cf-earn {
        padding: 0.85rem 0.9rem 0.9rem;
        border-radius: 14px;
    }
    .cf-earn-overview { grid-template-columns: minmax(0, 1fr); gap: 0.72rem; }
    .cf-earn-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.5rem; }
    .cf-earn-actions .cf-earn-withdraw-row,
    .cf-earn-actions .cf-earn-history { flex: 1 1 140px; min-width: 0; }
    .cf-earn-actions .cf-earn-withdraw-row { flex-direction: row; flex-wrap: wrap; }
    .cf-earn-actions .cf-earn-withdraw-status { flex: 1 0 100%; }
    .cf-earn-overview-no-balance .cf-earn-actions { justify-self: stretch; width: 100%; }
    .cf-earn-amount { font-size: 1.95rem; }
    .cf-earn-rates { gap: 0.35rem; }
    .cf-composer { border-radius: 12px; border-color: var(--cf-hairline); }
    .cf-card-head { padding: 0.35rem 0 0.6rem; }
    .cf-skeleton { border-radius: 0; }

    /* (2) Full-bleed media. The negative inline margins cancel the wrap's own
       gutter, so the photo reaches both screen edges exactly. The radius is
       dropped for the same reason — a rounded full-bleed edge looks broken. */
    .cf-card .cf-media {
        margin-inline: calc(var(--cf-gutter) * -1);
    }
    .cf-media img { max-height: 84dvh; }
    .cf-media .cf-video-frame {
        margin: 0; border-radius: 0;
    }

    /* (3) The body's own padding goes too, so the icon row and the caption line
       up with the author's name in the header — Instagram's alignment. */
    .cf-card-body { padding: 0.55rem 0 0.2rem; gap: 0.4rem; }
    .cf-card-actions { padding: 0; margin-bottom: 0.1rem; }
    .cf-action-btn { padding: 0.35rem 0.5rem 0.35rem 0; }
    .cf-action-btn .cf-act-icon { font-size: 1.45rem; }

    /* Keep the temporary picker compact enough for the phone viewport. */
    .cf-reaction-picker { gap: 0.08rem; padding: 0.25rem; }
    .cf-chip { font-size: 1rem; padding: 0.3rem 0.36rem; }
    .cf-action-btn { font-size: 0.8rem; }

    /* (4) The caption line, Instagram-tight. */
    .cf-caption { font-size: 0.9rem; line-height: 1.5; }
    .cf-summary { font-size: 0.76rem; }
    .cf-comment-body { border: none; border-radius: 16px; }
    .cf-daily-heading { margin-top: -0.15rem; }
}

@media (max-width: 480px) {
    .cf-wrap {
        padding: 0.5rem 0.6rem calc(0.8rem + env(safe-area-inset-bottom, 0px));
        gap: 0.8rem;
    }
    .cf-notification-button { flex-basis: 36px; width: 36px; height: 36px; }
    .cf-nav-right { gap: 0.35rem; }
    .cf-nav-refresh-label { display: none; }
    #cfRefreshBtn { padding-left: 0.55rem; padding-right: 0.55rem; }
    /* The gutter token drives the full-bleed pull-back, so it must match the
       wrap's own padding at every width or the photo stops short of the edge. */
    :root { --cf-gutter: 0.6rem; }
    .cf-brand-org { font-size: 0.62rem; }
    .cf-brand-page { font-size: 0.94rem; }
    .cf-composer-foot { align-items: flex-start; }
    .cf-composer-right { width: 100%; justify-content: space-between; margin-left: 0; }
    .cf-preview { width: 68px; height: 68px; }
    .cf-rail-item { width: 62px; }
    .cf-rail-ring { width: 56px; height: 56px; }
}

/* ── Community feed density refresh: mobile ──────────────────────────────────
   A separate phone sizing pass trims vertical whitespace while retaining the
   full-bleed media geometry. Horizontal gutters stay defined by the original
   640px/480px rules above and must continue matching the media pull-back. */
@media (max-width: 640px) {
    .cf-wrap { gap: 0.68rem; }
    .cf-feed { gap: 0.72rem; }
    .cf-composer { padding: 0.6rem; gap: 0.48rem; }
    .cf-composer-head { gap: 0.5rem; }
    .cf-caption-input { padding: 0.56rem 0.64rem; }
    .cf-card { padding-bottom: 0.4rem; }
    .cf-card-head { padding: 0.28rem 0 0.48rem; }
    .cf-card-body { padding-top: 0.44rem; padding-bottom: 0.16rem; gap: 0.32rem; }
    .cf-comments { gap: 0.4rem; }
    .cf-comment-body { padding: 0.36rem 0.6rem; }
    .cf-comment-children { margin-left: 0.42rem; padding-left: 0.42rem; }
    .cf-comment-children[data-depth="4"] { margin-left: 0; padding-left: 0.28rem; }
    .cf-comment-actions { gap: 0.08rem; }
    .cf-comment-action { padding-inline: 0.22rem; }
    .cf-reply-form { padding-left: 0.5rem; gap: 0.2rem; }
    .cf-reply-form input { min-width: 100%; }
}

/* ── Community navigation ───────────────────────────────────────────────────
   The destination list is shared across the mobile action tray and desktop
   rail. Below 900px the tray sits below the masthead; at/above 900px it remains
   the same fixed rail the wallet uses.

   The bar is built from `window.GM_COMMUNITY_NAV` in the bundle (ONE source of
   truth for the destination list) — see community-feed.js. */
.cf-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    max-width: 620px;
    display: flex;
    align-items: stretch;
    gap: 0.15rem;
    min-height: var(--cf-bottom-nav-height);
    padding: 0.4rem 0.35rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--cf-border);
    box-shadow: 0 -8px 24px rgba(67, 56, 43, 0.08);
    z-index: 1200;
}
.cf-nav-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 48px;
    padding: 0.3rem 0.15rem;
    border: none;
    border-radius: 16px;
    background: transparent;
    font-family: inherit;
    color: var(--cf-dim);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.cf-nav-item:active { transform: scale(0.96); }
.cf-nav-item:hover { background: var(--cf-field); }
.cf-nav-item:disabled { cursor: not-allowed; opacity: 0.55; }
.cf-nav-item:disabled:hover { background: transparent; }
.cf-nav-item:disabled:active { transform: none; }
/* Instagram's active tab is INK, not a brand colour — the current tab is
   distinguished by weight and the filled icon disc, not by hue. */
.cf-nav-item.is-active { color: var(--cf-ink); }
.cf-nav-item .cf-nav-icon {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 1.05rem; line-height: 1;
    background: transparent;
}
.cf-nav-item.is-active .cf-nav-icon {
    background: var(--cf-field);
}
/* The G$ gold chip marks a MONEY action (Claim Free G$), the same role the
   gold primary button plays on the wallet page. Gold carries DARK ink: white
   on #f5a623 is 2.03:1 and fails AA, while --cf-gold-ink on the gold gradient
   measures 6.0-9.0:1. The gold also has to survive the desktop rail, where
   the chip is a row rather than a column — hence styling the ICON DISC, which
   keeps its size and shape in both layouts. */
.cf-nav-item.cf-nav-gold .cf-nav-icon {
    background: linear-gradient(135deg, var(--cf-gold), var(--cf-gold-deep));
    color: var(--cf-gold-ink);
    font-weight: 700;
}
.cf-nav-item.cf-nav-gold { color: var(--cf-gold-deep); }
.cf-nav-item.cf-nav-gold:hover { background: var(--cf-field); }
.cf-nav-item .cf-nav-label {
    font-size: 0.68rem; font-weight: 800; line-height: 1.1;
    text-align: center; white-space: normal;
}
.cf-nav-unread {
    position: absolute; top: 0.15rem; right: 0.45rem;
    min-width: 1.05rem; height: 1.05rem; padding: 0 0.22rem;
    display: grid; place-items: center; border-radius: 999px;
    background: #2463eb; color: #fff; font-size: 0.62rem; font-weight: 800; line-height: 1;
}
.cf-nav-unread[hidden] { display: none; }
.cf-nav-item:focus-visible { outline: 2px solid var(--cf-accent-2); outline-offset: 1px; }

/* ── Earn sheet (bottom sheet) ──────────────────────────────────────────────
   Same geometry as the wallet's `bn-sheet`, in the community's light palette. */
.cf-sheet-overlay {
    position: fixed; inset: 0; z-index: 1300;
    background: rgba(41, 37, 36, 0.4);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
}
.cf-sheet-overlay.open { opacity: 1; pointer-events: auto; }
/* The overlay covers the viewport, so letting the page scroll behind it reads
   as a broken sheet. Toggled by openSheet()/closeSheet(). */
body.cf-modal-open { overflow: hidden; }
.cf-sheet {
    position: fixed; left: 50%; bottom: 0;
    transform: translate(-50%, 100%);
    width: 100%; max-width: 620px;
    background: #fff;
    border-top-left-radius: 22px; border-top-right-radius: 22px;
    border-top: 1px solid var(--cf-border);
    box-shadow: 0 -12px 40px rgba(67, 56, 43, 0.15);
    padding: 0.8rem 1rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
    z-index: 1310;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.cf-sheet.open { transform: translate(-50%, 0); }
.cf-sheet-handle {
    width: 42px; height: 4px; border-radius: 999px;
    background: rgba(67, 56, 43, 0.18);
    margin: 0 auto 0.7rem;
}
.cf-sheet-title {
    font-size: 0.95rem; font-weight: 800; color: var(--cf-ink);
    text-align: center; margin-bottom: 0.9rem;
}
.cf-sheet-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem;
}
.cf-sheet-item {
    display: flex; flex-direction: column; align-items: center;
    justify-content: flex-start; gap: 0.4rem;
    padding: 0.75rem 0.4rem;
    border-radius: 16px;
    border: 1px solid var(--cf-border);
    background: #fff;
    font-family: inherit; color: inherit; cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.cf-sheet-item:hover { border-color: rgba(var(--cf-accent-rgb), 0.4); background: #f0f9ff; }
.cf-sheet-item:active { transform: scale(0.97); }
.cf-sheet-item:focus-visible { outline: 2px solid var(--cf-accent-2); outline-offset: 1px; }
.cf-sheet-circle {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 1.25rem; line-height: 1;
    background: linear-gradient(135deg, #0284c7, #075985);
    color: #fff;
}
.cf-sheet-name { font-size: 0.72rem; font-weight: 800; color: var(--cf-dim); text-align: center; }

/* Community Cards reuses the existing card nodes inside this dialog on phones;
   the dialog is also styled for an already-open safety/recovery state if the
   device is rotated to desktop width. */
.cf-community-cards-modal[hidden] { display: none !important; }
.cf-community-cards-modal {
    position: fixed; inset: 0; z-index: 1300;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 0;
    background: rgba(41, 37, 36, 0.52);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.cf-community-cards-panel {
    position: relative; z-index: 1310;
    display: flex; flex-direction: column;
    width: min(100%, 620px);
    max-height: min(90dvh, 900px);
    min-height: min(44dvh, 480px);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--cf-border);
    border-top-left-radius: 22px; border-top-right-radius: 22px;
    box-shadow: 0 -12px 40px rgba(67, 56, 43, 0.18);
}
.cf-community-cards-handle {
    width: 42px; height: 4px; flex: 0 0 4px;
    border-radius: 999px; background: rgba(67, 56, 43, 0.2);
    margin: 0.6rem auto 0.15rem;
}
.cf-community-cards-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 0.75rem; padding: 0.45rem 1rem 0.75rem;
    background: #fff; border-bottom: 1px solid var(--cf-hairline);
    flex: 0 0 auto;
}
.cf-community-cards-kicker {
    margin: 0 0 0.12rem; color: var(--cf-accent-ink);
    font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em;
    text-transform: uppercase;
}
.cf-community-cards-header h2 {
    margin: 0; color: var(--cf-ink); font-size: 1.12rem; line-height: 1.2;
}
.cf-community-cards-header p:last-child {
    margin: 0.25rem 0 0; color: var(--cf-ink-2); font-size: 0.78rem;
}
.cf-community-cards-close {
    flex: 0 0 40px; width: 40px; height: 40px;
    display: grid; place-items: center; padding: 0;
    border: 1px solid var(--cf-hairline); border-radius: 50%;
    background: var(--cf-card); color: var(--cf-ink);
    font: inherit; font-size: 1.45rem; line-height: 1; cursor: pointer;
}
.cf-community-cards-close:hover { background: var(--cf-field); }
.cf-community-cards-close:focus-visible { outline: 2px solid var(--cf-accent-2); outline-offset: 2px; }
.cf-community-cards-content {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; gap: 0.75rem;
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0.8rem 0.85rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
}
.cf-community-cards-content > .cf-earn,
.cf-community-cards-content > .cf-vault-donation,
.cf-community-cards-content > #cfDailyHeading,
.cf-community-cards-content > #cfRail {
    width: 100%; margin: 0; flex: 0 0 auto;
}
@media (min-width: 900px) {
    .cf-community-cards-modal { align-items: center; padding: 1rem; }
    .cf-community-cards-panel {
        width: min(92vw, 760px); max-height: min(88dvh, 900px);
        min-height: 0; border-radius: 18px;
    }
}

.cf-reactions-modal[hidden] { display: none !important; }
.cf-reactions-modal {
    position: fixed; inset: 0; z-index: 1400;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 0; background: rgba(20, 28, 38, 0.48);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.cf-reactions-panel {
    display: flex; flex-direction: column; width: min(100%, 560px);
    max-height: min(84dvh, 720px); min-height: min(38dvh, 360px);
    overflow: hidden; background: var(--cf-card); color: var(--cf-ink);
    border: 1px solid var(--cf-border); border-top-left-radius: 20px;
    border-top-right-radius: 20px; box-shadow: 0 -12px 40px rgba(20, 28, 38, 0.2);
}
.cf-reactions-header {
    display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between;
    gap: 0.75rem; padding: 0.8rem 1rem 0.7rem; border-bottom: 1px solid var(--cf-hairline);
}
.cf-reactions-header h2 { margin: 0; color: var(--cf-ink); font-size: 1.08rem; }
.cf-reactions-filters {
    display: flex; flex: 0 0 auto; gap: 0.4rem; overflow-x: auto;
    padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--cf-hairline);
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.cf-reaction-filter {
    flex: 0 0 auto; min-height: 36px; padding: 0.35rem 0.65rem;
    border: 1px solid var(--cf-border); border-radius: 999px;
    background: var(--cf-card); color: var(--cf-ink-2); font: inherit;
    font-size: 0.76rem; font-weight: 800; cursor: pointer;
}
.cf-reaction-filter[aria-pressed="true"] { background: var(--cf-soft); border-color: var(--cf-accent); color: var(--cf-accent-ink); }
.cf-reaction-filter:focus-visible,
.cf-reactions-more:focus-visible,
.cf-reactions-retry:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
.cf-reactions-status { flex: 0 0 auto; min-height: 1.3em; margin: 0; padding: 0.55rem 1rem 0; color: var(--cf-ink-2); font-size: 0.8rem; }
.cf-reactions-list {
    display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.12rem;
    min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; margin: 0; padding: 0.35rem 0.85rem 0.75rem;
    list-style: none;
}
.cf-reactor-row { display: flex; align-items: center; gap: 0.65rem; min-height: 52px; padding: 0.35rem 0.25rem; }
.cf-reactor-avatar { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; font-size: 0.78rem; }
.cf-reactor-copy { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.1rem; }
.cf-reactor-name { overflow-wrap: anywhere; color: var(--cf-ink); font-size: 0.86rem; font-weight: 800; text-decoration: none; }
.cf-reactor-name:hover { text-decoration: underline; }
.cf-reactor-name:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; border-radius: 2px; }
.cf-reactor-type { color: var(--cf-muted); font-size: 0.72rem; }
.cf-reactor-emoji { flex: 0 0 auto; font-size: 1.15rem; }
.cf-reactions-footer { display: flex; flex: 0 0 auto; justify-content: center; gap: 0.6rem; padding: 0.7rem 1rem calc(0.8rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--cf-hairline); }
.cf-reactions-more, .cf-reactions-retry {
    min-height: 42px; padding: 0.5rem 1.1rem; border: 1px solid var(--cf-border);
    border-radius: 999px; background: var(--cf-field); color: var(--cf-ink);
    font: inherit; font-size: 0.82rem; font-weight: 800; cursor: pointer;
}
.cf-reactions-more[hidden], .cf-reactions-retry[hidden] { display: none !important; }
@media (min-width: 900px) {
    .cf-reactions-modal { align-items: center; padding: 1rem; }
    .cf-reactions-panel { width: min(92vw, 540px); max-height: min(82dvh, 680px); min-height: 0; border-radius: 18px; }
}

/* ── Buy Airtime modal ──────────────────────────────────────────────────────
   The Reloadly store (`/reloadly/?embed=1#topup`) in an iframe instead of a
   navigation. The store is a wide desktop layout, so the frame is rendered at
   1/0.8 of the dialog's size and scaled back down to 0.8 — the store then lays
   itself out for a viewport 25% wider than the visible area, which fits the
   catalogue in without the store's own media queries kicking in at phone
   width. Same z-index ladder as the Earn sheet (overlay 1300 / dialog 1310),
   and the page scroll is locked through `body.cf-modal-open`. */
.cf-airtime-modal {
    position: fixed; inset: 0; z-index: 1300;
    display: grid; place-items: center; padding: 0.75rem;
}
.cf-airtime-modal[hidden] { display: none; }
.cf-airtime-overlay {
    position: absolute; inset: 0;
    background: rgba(41, 37, 36, 0.5);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.cf-airtime-card {
    position: relative; z-index: 1310;
    display: flex; flex-direction: column;
    width: min(100%, 720px);
    /* A definite height, not just max-height: the body is `flex: 1`, and the
       iframe inside it sizes off the body. With only a max-height the card
       collapsed to the iframe's 150px default and the store was unreadable. */
    height: min(92dvh, 900px);
    max-height: min(92dvh, 900px);
    background: #fff; border: 1px solid var(--cf-border);
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 18px 50px rgba(67, 56, 43, 0.28);
}
.cf-airtime-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; padding: 0.7rem 0.9rem;
    background: linear-gradient(135deg, #1a1d2e, #252840);
    color: #fff; flex-shrink: 0;
}
.cf-airtime-kicker {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: #a5b0e8;
}
.cf-airtime-head h3 { font-size: 0.95rem; font-weight: 800; color: #fff; }
.cf-airtime-actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.cf-airtime-close {
    border: 1px solid rgba(255, 255, 255, 0.36);
    background: rgba(255, 255, 255, 0.16); color: #fff;
    border-radius: 999px; width: 34px; height: 34px;
    font-size: 1.15rem; line-height: 1; font-weight: 900;
    cursor: pointer; flex-shrink: 0;
}
.cf-airtime-close:hover { background: rgba(255, 255, 255, 0.26); }
.cf-airtime-body {
    position: relative; flex: 1; min-height: 0;
    background: #0f1117; overflow: hidden;
}
/* The 0.8 shrink. `transform-origin: top left` keeps the scaled frame pinned to
   the top-left corner; the 125% width/height cancels the 20% shrink so the
   frame still fills the body exactly. */
.cf-airtime-body iframe {
    display: block; border: 0;
    width: 125%; height: 125%;
    transform: scale(0.8); transform-origin: top left;
}

/* ── Member search ──────────────────────────────────────────────────────────
   Read-only, so it renders for guests too. It is a second row inside the
   sticky header, so it needs no background/sticky of its own. Results are
   written with textContent — a username is user data. */
.cf-search {
    display: flex; flex-direction: column; gap: 0.5rem;
    flex: 1 0 100%; width: 100%;
}
.cf-search[hidden] { display: none; }
.cf-search-row { display: flex; align-items: center; gap: 0.4rem; }
.cf-search-icon { font-size: 0.95rem; }
/* The hardcoded `@` prefix. It sits OUTSIDE the input so a member never has to
   type it, and reads as part of the field's chrome: the same weight and colour
   as the input's own text, so the two read as one control. */
.cf-search-at {
    flex: 0 0 auto;
    font-size: 0.95rem; font-weight: 800; color: var(--cf-accent-ink);
    margin-right: -0.3rem; pointer-events: none; user-select: none;
}
.cf-search-input {
    flex: 1 1 auto; min-width: 0;
    font-family: inherit; font-size: 0.9rem; color: var(--cf-ink);
    background: var(--cf-field);
    border: 1px solid var(--cf-border); border-radius: 999px;
    padding: 0.5rem 0.8rem;
}
.cf-search-input:focus { outline: 2px solid var(--cf-accent-2); outline-offset: 1px; }
.cf-search-close {
    flex: 0 0 auto;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--cf-border); background: var(--cf-card);
    color: var(--cf-dim); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.cf-search-results { display: flex; flex-direction: column; gap: 0.25rem; max-height: 46dvh; overflow-y: auto; }
.cf-search-result {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: 12px;
    color: var(--cf-ink); text-decoration: none;
    background: var(--cf-card); border: 1px solid var(--cf-border);
}
.cf-search-result:hover { border-color: rgba(var(--cf-accent-rgb), 0.4); background: #f0f9ff; }
.cf-search-avatar {
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 800; font-size: 0.85rem;
    background: linear-gradient(135deg, #0369a1, #075985); color: #fff;
    overflow: hidden;
}
.cf-search-name { font-size: 0.88rem; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cf-search-hint { font-size: 0.8rem; color: var(--cf-dim); padding: 0.4rem 0.2rem; }

/* Desktop: turn the bar into the same fixed rail the wallet uses, so a wide
   screen is not left with a bottom-edge bar. Every rail rule lives inside the
   media query — unscoped, it would steal a permanent left gutter on a phone
   (the documented `.wallet-side-nav` bug class). */
@media (min-width: 900px) {
    body { padding-bottom: 0; }
    .cf-wrap { padding-bottom: 2.5rem; }
    .cf-bottom-nav {
        left: max(0.8rem, calc(50% - 690px));
        top: 50%; bottom: auto;
        transform: translateY(-50%);
        width: 156px; max-width: none;
        max-height: calc(100dvh - 1.5rem);
        flex-direction: column;
        gap: 0.2rem;
        overflow-y: auto;
        padding: 0.5rem;
        border: 1px solid var(--cf-border);
        border-top: 1px solid var(--cf-border);
        border-radius: 18px;
    }
    .cf-nav-item {
        width: 100%; min-height: 48px;
        flex-direction: row; justify-content: flex-start;
        gap: 0.55rem; padding: 0.42rem 0.5rem;
    }
    .cf-nav-item .cf-nav-label { font-size: 0.8rem; text-align: left; }
    .cf-sheet { max-width: 560px; }
}

/* Phone-only Community action tray. The navigation mount sits before the feed
   in the template; these rules raise it into normal flow under the masthead.
   Everything in this block stops at 899px so the desktop rail is unchanged. */
@media (max-width: 899px) {
    .cf-bottom-nav.cf-community-mobile-actions {
        position: relative;
        left: auto; bottom: auto; transform: none;
        width: calc(100% - 1.2rem); max-width: 620px;
        min-height: 0;
        margin: 0.55rem auto 0.45rem;
        padding: 0.38rem;
        gap: 0.28rem;
        background: #eaf7ff;
        border: 1px solid #c7e9f8;
        border-radius: 17px;
        box-shadow: 0 5px 16px rgba(3, 105, 161, 0.11);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        z-index: 20;
    }
    .cf-community-mobile-actions .cf-nav-item {
        min-width: 0;
        min-height: 68px;
        padding: 0.3rem 0.08rem;
        gap: 0.18rem;
        border: 1px solid transparent;
        border-radius: 12px;
        box-shadow: 0 2px 5px rgba(41, 37, 36, 0.08);
    }
    .cf-community-mobile-actions .cf-nav-item .cf-nav-icon {
        width: 24px; height: 24px;
        border-radius: 7px;
        background: transparent;
        font-size: 1.1rem;
    }
    .cf-community-mobile-actions .cf-nav-item .cf-nav-label {
        font-size: clamp(0.56rem, 2.6vw, 0.67rem);
        line-height: 1.08;
        font-weight: 800;
        overflow-wrap: anywhere;
    }
    .cf-community-mobile-actions .cf-nav-item[data-nav="claim"] {
        background: #f5a623;
        border-color: #d97e0a;
        color: #1f1300;
    }
    .cf-community-mobile-actions .cf-nav-item[data-nav="claim"] .cf-nav-icon {
        color: #1f1300;
        font-weight: 700;
    }
    .cf-community-mobile-actions .cf-nav-item[data-nav="search"] {
        background: #bae6fd;
        border-color: #7dd3fc;
        color: #0c4a6e;
    }
    .cf-community-mobile-actions .cf-nav-item[data-nav="messages"] {
        background: #ccfbf1;
        border-color: #5eead4;
        color: #115e59;
    }
    .cf-community-mobile-actions .cf-nav-item[data-nav="airtime"] {
        background: #ede9fe;
        border-color: #c4b5fd;
        color: #5b21b6;
    }
    .cf-community-mobile-actions .cf-nav-item[data-nav="wallet"] {
        display: none;
        background: #1e3a8a;
        border-color: #1e3a8a;
        color: #fff;
    }
    .cf-community-mobile-actions .cf-nav-item[data-nav="community-cards"] {
        background: #ffe4e6;
        border-color: #fda4af;
        color: #9f1239;
    }
    .cf-community-mobile-actions .cf-nav-item:hover { filter: brightness(0.97); }
    .cf-community-mobile-actions .cf-nav-item.cf-nav-gold:hover { background: #f2ab31; }
    .cf-community-mobile-actions .cf-nav-unread { top: 0.08rem; right: 0.08rem; }

    /* Match the approved mockup: the heart is the Like/reaction action, while
       Comment and Share retain their real interactive labels from the bundle. */
    .cf-card-actions .cf-reaction-trigger::after {
        content: "Like";
        color: inherit;
        font-size: 0.8rem;
        font-weight: 700;
        line-height: 1;
    }
}

/* The Wallet shortcut remains in the desktop rail; the masthead already has
   its own Wallet link, so the new Community Cards control is phone-only. */
@media (min-width: 900px) {
    .cf-community-mobile-actions .cf-nav-item[data-nav="community-cards"] { display: none; }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cf-skeleton { animation: none; }
    /* The brand dot is pure decoration — it says "activity" whether or not it
       pulses, so switch the pulse off rather than leave a half-opacity dot. */
    .cf-brand-dot { animation: none; }
    .cf-chip { transition: none; }
    .cf-chip:active { transform: none; }
    .cf-toast { animation: none; }
    /* The spinner still has to READ as "working" without spinning: hold a
       static ring so the busy state stays visible. */
    .cf-preview-spinner,
    .cf-upload-status.is-busy::before { animation: none; }
    .cf-preview-bar > i { transition: none; }
    /* The like burst is pure decoration: without the animation it would sit
       over the photo as a permanent heart, so hide it entirely. */
    .cf-burst { display: none; }
    .cf-rail { scroll-behavior: auto; }
    /* The earn card's glow is decoration; hold it still rather than removing
       it, so the card keeps its lit look without moving. */
    .cf-earn::before { animation: none; }
    .cf-earn-bar-fill { transition: none; }
}


/* ── Daily Community Prompt and Daily Learn ───────────────────────────────── */
.cf-daily-prompt,
.cf-daily-learn {
    width: 100%;
    background: var(--cf-card);
    border: 1px solid var(--cf-hairline);
    border-radius: 16px;
    padding: 1rem 1.1rem;
    box-shadow: var(--cf-shadow);
}
.cf-daily-learn { max-width: 22rem; margin-inline: auto; }
.cf-daily-prompt-kicker,
.cf-daily-learn-kicker {
    color: var(--cf-accent-ink);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.cf-daily-prompt h2,
.cf-daily-learn h2 {
    margin-top: 0.25rem;
    color: var(--cf-ink);
    font-size: 1.12rem;
    line-height: 1.35;
}
.cf-daily-prompt > p {
    margin-top: 0.35rem;
    color: var(--cf-dim);
    font-size: 0.92rem;
    line-height: 1.45;
}
.cf-daily-prompt-foot,
.cf-daily-learn-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-top: 0.8rem;
}
.cf-daily-prompt-foot > span,
.cf-daily-learn-progress,
.cf-daily-learn-reset {
    color: var(--cf-dim);
    font-size: 0.82rem;
}
.cf-btn-primary,
.cf-earn-withdraw {
    min-height: 44px;
    padding: 0.58rem 1rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--cf-accent), var(--cf-accent-2));
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.cf-btn-text {
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    border: 0;
    background: transparent;
    color: var(--cf-accent-ink);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.cf-prompt-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.25rem 0 0.6rem;
    padding: 0.5rem 0.7rem;
    border-left: 3px solid var(--cf-accent);
    border-radius: 6px;
    background: rgba(var(--cf-accent-rgb), 0.07);
    color: var(--cf-accent-ink);
    font-size: 0.84rem;
    font-weight: 800;
}
.cf-prompt-context button {
    min-height: 40px;
    border: 0;
    background: transparent;
    color: var(--cf-dim);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.cf-daily-learn-content { margin-top: 0.65rem; }
.cf-daily-learn-question { font-size: 0.7rem; font-weight: 800; line-height: 1.5; }
.cf-daily-learn-timer {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.25rem 0.6rem;
    margin: 0 0 0.65rem;
    color: var(--cf-accent-ink);
    font-size: 0.78rem;
    font-weight: 800;
}
.cf-daily-learn-timer-value { font-variant-numeric: tabular-nums; }
.cf-daily-learn-timer-track {
    grid-column: 1 / -1;
    display: block;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(var(--cf-accent-rgb), 0.14);
}
.cf-daily-learn-timer-fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--cf-accent);
    transition: width 0.2s linear, background-color 0.2s linear;
}
.cf-daily-learn-timer.is-caution .cf-daily-learn-timer-fill { background: #d97706; }
.cf-daily-learn-timer.is-warning .cf-daily-learn-timer-fill { background: #dc2626; }
.cf-daily-learn-options { display: grid; gap: 0.45rem; margin-top: 0.7rem; }
.cf-daily-learn-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--cf-border);
    border-radius: 10px;
    background: #fff;
    color: var(--cf-ink);
    text-align: left;
    font: inherit;
    font-size: 0.7rem;
    line-height: 1.5;
    cursor: pointer;
}
.cf-daily-learn-option[aria-pressed="true"] {
    border-color: var(--cf-accent);
    background: rgba(var(--cf-accent-rgb), 0.06);
}
.cf-daily-learn-option:disabled { opacity: 0.62; cursor: wait; }
.cf-daily-learn-connect,
.cf-daily-learn-next,
.cf-daily-learn-share {
    min-height: 44px;
    margin-top: 0.7rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--cf-border);
    border-radius: 10px;
    background: var(--cf-field);
    color: var(--cf-ink);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.cf-daily-learn-connect { background: var(--cf-accent); color: #fff; border-color: var(--cf-accent); }
.cf-daily-learn-connect:disabled { opacity: 0.55; cursor: not-allowed; }
.cf-daily-learn-result { margin-top: 0.7rem; line-height: 1.5; }
.cf-daily-learn-reset { margin-top: 0.7rem; }
.cf-daily-learn-answer-status { min-height: 1.2em; margin-top: 0.6rem; color: var(--cf-dim); font-size: 0.82rem; }
.cf-earn-withdraw-row { display: flex; align-items: flex-start; gap: 0.7rem; margin-top: 0.8rem; }
.cf-earn-withdraw { background: var(--cf-earn-accent); color: #fff; }
.cf-earn-withdraw:disabled { opacity: 0.65; cursor: wait; }
.cf-earn-withdraw-status { align-self: center; color: var(--cf-earn-ink); font-size: 0.88rem; line-height: 1.45; }

/* Larger targets and a readable tooltip/title on every reaction option. */
.cf-chip { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

@media (max-width: 620px) {
    .cf-daily-prompt { padding: 0.85rem; border-radius: 12px; }
    .cf-daily-learn { padding: 0.7rem; border-radius: 11px; }
    .cf-daily-prompt-foot { flex-wrap: wrap; justify-content: flex-start; }
    .cf-daily-prompt-foot > span { flex-basis: 100%; }
    .cf-daily-learn-head { align-items: flex-start; }
    .cf-daily-learn h2 { font-size: 1rem; }
}


.cf-badge-row { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.22rem; }
.cf-badge-chip {
    display: inline-flex; align-items: center; gap: 0.2rem;
    max-width: 100%; padding: 0.12rem 0.42rem;
    border: 1px solid rgba(180, 120, 20, 0.24); border-radius: 999px;
    background: #fff7e6; color: #5c3600; font-size: 0.67rem; font-weight: 800;
}
.cf-badge-icon { color: var(--cf-accent-ink); font-size: 0.72rem; }
.cf-badge-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-card-who .cf-badge-row { align-self: flex-start; }
.cf-summary { margin: 0.15rem 0 0.35rem; }

.cf-daily-prompt[hidden],
.cf-daily-learn[hidden],
.cf-prompt-context[hidden],
.cf-earn-reconcile[hidden],
.cf-earn-reconcile-status[hidden],
.cf-earn-withdraw-row[hidden] { display: none !important; }
.cf-learn-done[hidden],
.cf-learn-done-detail[hidden] { display: none !important; }


/* ── Organized Community layout (approved feed refresh) ──────────────────── */
.cf-wrap.cf-layout {
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
}
.cf-today-hub,
.cf-primary {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.72rem;
}
.cf-today-hub[hidden] { display: none !important; }
.cf-today-hub-head { padding: 0.1rem 0.12rem 0.12rem; }
.cf-today-hub-title {
    margin: 0;
    color: var(--cf-ink);
    font-size: 1.28rem;
    font-weight: 850;
    line-height: 1.2;
}
.cf-today-hub-head p {
    margin: 0.25rem 0 0;
    color: var(--cf-dim);
    font-size: 0.86rem;
    line-height: 1.4;
}
.cf-posts {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.62rem;
}
.cf-feed-section-head { padding: 0 0.12rem; }
.cf-feed-section-head h2 {
    margin: 0;
    color: var(--cf-ink);
    font-size: 1.06rem;
    font-weight: 850;
    line-height: 1.3;
}
.cf-composer-entry-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}
.cf-caption-wrap { min-width: 0; }
.cf-caption-wrap .cf-caption-input { display: block; width: 100%; min-height: 3.1rem; }
.cf-composer-entry-row .cf-prompt-context { grid-column: 1 / -1; }
.cf-composer-entry-row .cf-composer-actions { align-self: center; }

@media (min-width: 1280px) {
    .cf-wrap.cf-layout {
        display: grid;
        grid-template-columns: minmax(0, 680px) minmax(300px, 340px);
        justify-content: center;
        align-items: start;
        gap: 1.35rem;
        width: 100%;
        max-width: 1320px;
        margin-inline: auto;
        padding: 0.8rem 1rem 2.5rem 180px;
    }
    .cf-primary { grid-column: 1; grid-row: 1; }
    .cf-today-hub {
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: 5.5rem;
        max-height: calc(100dvh - 6.5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        padding: 0 0.2rem 0.4rem 0;
    }
    .cf-today-hub-title { font-size: 1.35rem; }
    .cf-today-hub .cf-daily-prompt,
    .cf-today-hub .cf-daily-learn { padding: 0.85rem; }
    .cf-today-hub .cf-daily-prompt h2,
    .cf-today-hub .cf-daily-learn h2 { font-size: 1rem; }
    .cf-today-hub .cf-earn-budget-grid { gap: 0.4rem; }
    .cf-today-hub .cf-earn-budget { padding: 0.48rem; }
}

@media (max-width: 640px) {
    .cf-layout.cf-wrap { gap: 0.68rem; }
    .cf-layout .cf-today-hub,
    .cf-layout .cf-primary { gap: 0.68rem; }
    .cf-layout .cf-today-hub-title { font-size: 1.16rem; }
    .cf-layout .cf-posts { gap: 0.55rem; }
    .cf-layout .cf-composer-entry-row {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        align-items: start;
        gap: 0.45rem;
    }
    .cf-layout .cf-composer-head { min-width: 0; }
    .cf-layout .cf-composer-who { display: none; }
    .cf-layout .cf-composer-entry-row .cf-avatar-btn {
        grid-column: 1;
        grid-row: 1;
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
    .cf-layout .cf-caption-wrap { grid-column: 2; grid-row: 1; }
    .cf-layout .cf-caption-wrap .cf-caption-input {
        min-height: 48px;
        height: 48px;
        max-height: 9rem;
        padding: 0.55rem 0.62rem;
        resize: vertical;
    }
    .cf-layout .cf-composer-entry-row .cf-composer-actions {
        grid-column: 3;
        grid-row: 1;
        width: auto;
        align-self: start;
    }
    .cf-layout .cf-file-btn {
        display: flex;
        width: auto;
        min-width: 78px;
        height: 48px;
        min-height: 48px;
        align-items: center;
        justify-content: center;
        gap: 0.28rem;
        padding: 0.4rem 0.48rem;
        font-size: 0.7rem;
        white-space: nowrap;
    }
    .cf-layout .cf-file-btn > span { font-size: 1rem; }
}


.cf-skip-link {
    position: fixed;
    z-index: 10000;
    top: -5rem;
    left: 1rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--cf-border);
    border-radius: 10px;
    background: var(--cf-card-solid);
    color: var(--cf-ink);
    font-size: 0.9rem;
    font-weight: 800;
    box-shadow: var(--cf-shadow);
}
.cf-skip-link:focus {
    top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
    outline: 3px solid var(--cf-accent);
    outline-offset: 2px;
}


/* Community Vault donation form and persistent multi-pin acknowledgments. */
.cf-vault-donation {
    padding: 1rem;
    border: 1px solid var(--cf-hairline);
    border-radius: 14px;
    background: var(--cf-card-solid);
}
.cf-vault-donation-head,
.cf-vault-donation-actions,
.cf-donation-card-head,
.cf-donation-card-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.cf-vault-donation-head { justify-content: space-between; flex-wrap: wrap; }
.cf-vault-donation-head h2,
.cf-pinned-donations h2 { margin: 0; color: var(--cf-ink); font-size: 1.05rem; }
.cf-vault-donation-head p,
.cf-pinned-donations .cf-feed-section-head > span {
    margin: 0.25rem 0 0;
    color: var(--cf-dim);
    font-size: 0.86rem;
}
.cf-vault-donation-open,
.cf-vault-donation-submit {
    min-height: 42px;
    padding: 0.65rem 0.95rem;
    border: 1px solid var(--cf-accent-2);
    border-radius: 10px;
    background: var(--cf-accent-2);
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.cf-vault-donation-open:hover,
.cf-vault-donation-submit:hover { background: var(--cf-accent-ink); }
.cf-vault-donation-form-wrap { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--cf-hairline); }
.cf-vault-donation-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
.cf-vault-donation-field { display: grid; gap: 0.38rem; color: var(--cf-ink); font-size: 0.9rem; font-weight: 800; }
.cf-vault-donation-field:last-child { grid-column: 1 / -1; }
.cf-vault-donation-field input {
    width: 100%; min-height: 42px; padding: 0.6rem 0.7rem;
    border: 1px solid var(--cf-accent-border); border-radius: 8px;
    background: var(--cf-field); color: var(--cf-ink); font: inherit; font-weight: 500;
}
.cf-vault-donation-field input:focus,
.cf-vault-donation-consent input:focus-visible {
    outline: 3px solid var(--cf-accent-soft); outline-offset: 2px;
}
.cf-vault-donation-field small { color: var(--cf-dim); font-size: 0.78rem; font-weight: 500; }
.cf-vault-donation-disclosure {
    margin-top: 0.95rem; padding: 0.85rem;
    border: 1px solid var(--cf-border); border-radius: 10px;
    background: var(--cf-soft); color: var(--cf-ink);
}
.cf-vault-donation-disclosure h3 { margin: 0 0 0.45rem; font-size: 0.92rem; }
.cf-vault-donation-disclosure p { margin: 0.4rem 0 0; font-size: 0.82rem; line-height: 1.5; }
.cf-vault-donation-consent { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0.85rem 0; color: var(--cf-ink); font-size: 0.85rem; }
.cf-vault-donation-consent input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 0.05rem; accent-color: var(--cf-accent); }
.cf-vault-donation-address { overflow-wrap: anywhere; margin: 0.7rem 0; color: var(--cf-dim); font: 0.78rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.cf-vault-donation-actions { flex-wrap: wrap; }
.cf-vault-donation-cancel,
.cf-vault-donation-check {
    min-height: 40px; padding: 0.55rem 0.8rem;
    border: 1px solid var(--cf-hairline); border-radius: 9px;
    background: var(--cf-card-solid); color: var(--cf-ink); font: inherit; font-weight: 700; cursor: pointer;
}
.cf-vault-donation-submit:disabled,
.cf-vault-donation-cancel:disabled,
.cf-vault-donation-check:disabled {
    opacity: 0.58; cursor: not-allowed; filter: saturate(0.55);
}
.cf-vault-donation-submit:disabled:hover { background: var(--cf-accent-2); }
.cf-vault-donation-status { margin: 0.7rem 0 0; color: var(--cf-dim); font-size: 0.85rem; }
.cf-vault-donation-status.is-error { color: var(--cf-danger); }
.cf-vault-donation-status.is-success { color: var(--cf-ok-ink); }
.cf-vault-donation-unavailable { margin: 0; color: var(--cf-dim); font-size: 0.86rem; font-weight: 700; }
.cf-pinned-donations { display: grid; gap: 0.65rem; margin-bottom: 1rem; }
.cf-pinned-donations[hidden],
.cf-vault-donation-review[hidden],
.cf-vault-donation-recovery[hidden] { display: none !important; }
.cf-vault-donation-review,
.cf-vault-donation-recovery { display: grid; gap: 0.75rem; }
.cf-vault-donation-review h3,
.cf-vault-donation-recovery h3 { margin: 0; color: var(--cf-ink); font-size: 1rem; }
.cf-vault-donation-review > p,
.cf-vault-donation-recovery > p { margin: 0; color: var(--cf-dim); font-size: 0.85rem; line-height: 1.5; }
.cf-vault-donation-summary { display: grid; gap: 0.5rem; margin: 0; }
.cf-vault-donation-summary > div {
    display: grid; grid-template-columns: minmax(8rem, 0.7fr) minmax(0, 1.3fr);
    gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--cf-hairline);
}
.cf-vault-donation-summary dt { color: var(--cf-dim); font-size: 0.82rem; font-weight: 700; }
.cf-vault-donation-summary dd { margin: 0; color: var(--cf-ink); font-size: 0.86rem; font-weight: 700; overflow-wrap: anywhere; }
.cf-vault-donation-summary a { color: var(--cf-accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.cf-vault-donation-review-disclosure h4 { margin: 0; font-size: 0.9rem; }
.cf-vault-donation-recovery input {
    width: 100%; min-height: 42px; padding: 0.6rem 0.7rem;
    border: 1px solid var(--cf-accent-border); border-radius: 8px;
    background: var(--cf-field); color: var(--cf-ink); font: 0.82rem ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cf-support-modal[hidden] { display: none !important; }
.cf-support-modal {
    position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
    padding: 1rem; background: rgba(17, 24, 39, 0.62);
}
.cf-support-panel {
    width: min(100%, 30rem); max-height: min(90dvh, 48rem); overflow: auto;
    padding: 1.15rem; border: 1px solid var(--cf-border); border-radius: 18px;
    background: var(--cf-card-solid); color: var(--cf-ink); box-shadow: var(--cf-shadow);
}
.cf-support-panel h2 { margin: 0; font-size: 1.18rem; }
.cf-support-author { margin: 0.45rem 0 1rem; color: var(--cf-ink-2); }
.cf-support-route { display: block; margin: -0.65rem 0 0.8rem; color: var(--cf-dim); font-size: 0.72rem; line-height: 1.4; overflow-wrap: anywhere; }
.cf-support-label { display: grid; gap: 0.35rem; font-weight: 800; }
.cf-support-input {
    min-height: 48px; width: 100%; padding: 0.65rem 0.75rem;
    border: 1px solid var(--cf-border); border-radius: 10px;
    background: var(--cf-field); color: var(--cf-ink); font: inherit; font-weight: 800;
}
.cf-support-input:focus-visible { outline: 3px solid var(--cf-accent); outline-offset: 2px; }
.cf-support-presets { display: flex; gap: 0.5rem; margin-top: 0.65rem; }
.cf-support-preset, .cf-support-cancel, .cf-support-submit {
    min-height: 42px; padding: 0.55rem 0.8rem; border-radius: 10px;
    font: inherit; font-weight: 800; cursor: pointer;
}
.cf-support-preset, .cf-support-cancel {
    border: 1px solid var(--cf-border); background: var(--cf-card-solid); color: var(--cf-ink);
}
.cf-support-minimum { display: block; margin-top: 0.45rem; color: var(--cf-dim); }
.cf-support-disclosure {
    margin-top: 0.85rem; padding: 0.75rem; border-radius: 10px;
    background: var(--cf-soft); color: var(--cf-ink-2); font-size: 0.82rem; line-height: 1.5;
}
.cf-support-status { min-height: 1.4em; margin: 0.8rem 0 0; color: var(--cf-ink-2); font-size: 0.84rem; line-height: 1.45; overflow-wrap: anywhere; }
.cf-support-status.is-error { color: var(--cf-danger); }
.cf-support-status.is-success { color: var(--cf-ok-ink); }
.cf-support-status a { color: var(--cf-accent-ink); font-weight: 800; }
.cf-support-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.55rem; margin-top: 0.85rem; }
.cf-support-submit { border: 1px solid var(--cf-earn-line); background: var(--cf-earn-bg1); color: var(--cf-earn-ink); }
.cf-support-submit:disabled { opacity: 0.65; cursor: wait; }
body.cf-support-modal-open { overflow: hidden; }
.cf-support-post-card .cf-donation-system-mark { font-size: 0.72rem; }
.cf-vault-donation-status-actions:empty { display: none; }
.cf-pinned-donation-feed { display: grid; gap: 0.65rem; }
.cf-donation-card {
    padding: 0.95rem; border: 1px solid var(--cf-hairline); border-radius: 12px;
    background: var(--cf-card-solid); color: var(--cf-ink);
}
.cf-donation-card .cf-card-body { padding: 0; }
.cf-donation-card-head { justify-content: space-between; margin-bottom: 0.55rem; }
.cf-donation-system-author { display: flex; align-items: center; gap: 0.55rem; font-weight: 900; }
.cf-donation-system-mark {
    display: grid; width: 34px; height: 34px; place-items: center;
    border-radius: 50%; background: var(--cf-accent-soft); color: var(--cf-accent-ink); font-weight: 900;
}
.cf-donation-pin-label {
    padding: 0.22rem 0.48rem; border: 1px solid var(--cf-border); border-radius: 999px;
    background: var(--cf-soft); color: var(--cf-accent-ink); font-size: 0.72rem; font-weight: 900;
}
.cf-donation-card-copy { margin: 0; font-size: 0.95rem; line-height: 1.5; overflow-wrap: anywhere; }
.cf-support-profile-link { color: var(--cf-accent-ink); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.cf-support-profile-link:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
.cf-donation-card-meta { display: block; margin-top: 0.35rem; color: var(--cf-dim); font-size: 0.78rem; }
.cf-donation-card-links { flex-wrap: wrap; margin-top: 0.7rem; font-size: 0.82rem; }
.cf-donation-card-links a { color: var(--cf-accent-ink); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.cf-donation-card-links a:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
.cf-donation-card-time { color: var(--cf-dim); font-size: 0.74rem; }
@media (max-width: 640px) {
    .cf-vault-donation { padding: 0.8rem; }
    .cf-vault-donation-head { align-items: flex-start; }
    .cf-vault-donation-open { width: 100%; }
    .cf-vault-donation-fields { grid-template-columns: minmax(0, 1fr); }
    .cf-vault-donation-field:last-child { grid-column: auto; }
    .cf-vault-donation-summary > div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
    .cf-donation-card { border-radius: 0; border-right: 0; border-left: 0; }
}


/* Messages push opt-in. Keep these rules in the main Community bundle: the
   standalone asset was missing from production and left the dialog in document
   flow at the bottom of the page. */
.cf-push-optin[hidden] { display: none !important; }
body.cf-push-optin-open { overflow: hidden; }
.cf-push-optin {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: grid;
    place-items: center;
    padding: max(20px, env(safe-area-inset-top, 0px)) 18px max(20px, env(safe-area-inset-bottom, 0px));
}
.cf-push-optin-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13, 28, 42, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.cf-push-optin-card {
    position: relative;
    width: min(100%, 410px);
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    padding: 28px 24px 22px;
    border: 1px solid var(--cf-border);
    border-radius: 22px;
    background: var(--cf-card);
    color: var(--cf-ink);
    box-shadow: 0 22px 70px rgba(7, 25, 43, 0.26);
    font-family: var(--cf-sans);
    text-align: center;
}
.cf-push-optin-icon {
    display: grid;
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    place-items: center;
    border-radius: 50%;
    background: #fff2df;
    font-size: 1.6rem;
}
.cf-push-optin-card h2 {
    margin: 0 0 10px;
    color: var(--cf-ink);
    font-size: 1.2rem;
    line-height: 1.3;
}
.cf-push-optin-card > p {
    margin: 0;
    color: var(--cf-dim);
    font-size: 0.94rem;
    line-height: 1.5;
}
.cf-push-optin-card > .cf-push-optin-status {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--cf-field);
    color: var(--cf-ink);
    font-size: 0.86rem;
    text-align: left;
}
.cf-push-optin-card > .cf-push-optin-status.is-error {
    background: #fff1f0;
    color: #9f2d2d;
}
.cf-push-optin-actions {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}
.cf-push-optin-actions button {
    min-height: 48px;
    border: 0;
    border-radius: 13px;
    padding: 12px 16px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.cf-push-optin-enable {
    background: var(--cf-accent);
    color: #fff;
}
.cf-push-optin-later {
    background: var(--cf-field);
    color: var(--cf-ink);
}
.cf-push-optin-actions button:disabled {
    opacity: 0.58;
    cursor: wait;
}
.cf-push-optin-actions button:focus-visible {
    outline: 3px solid var(--cf-accent-2);
    outline-offset: 3px;
}
@media (max-width: 380px) {
    .cf-push-optin { padding-inline: 12px; }
    .cf-push-optin-card { padding: 24px 18px 18px; }
}


/* ── Community guest welcome banner ────────────────────────────────────────
   Scoped to /community: the shared guest card keeps its compact layout on
   other feature pages. The banner spans the full Community feed column. */
.cf-guest {
    width: 100%;
    min-width: 0;
}
.cf-guest .gm-guest-connect-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 250px);
    align-items: center;
    gap: 1.2rem clamp(1.2rem, 3vw, 2.1rem);
    width: 100%;
    max-width: none;
    padding: clamp(1.25rem, 2.6vw, 2rem);
    border: 1px solid rgba(3, 105, 161, 0.2);
    border-radius: 22px;
    background: linear-gradient(125deg, #f7fbff 0%, #eef7ff 62%, #fffaf0 100%);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    text-align: left;
}
.cf-guest .gm-guest-connect-copy { min-width: 0; }
.cf-guest .gm-guest-connect-heading {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.cf-guest .gm-guest-connect-icon {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    margin: 0;
    border: 1px solid #bae6fd;
    border-radius: 15px;
    background: #e0f2fe;
    color: var(--cf-accent-2);
    font-size: 1.45rem;
}
.cf-guest .gm-guest-connect-kicker {
    display: block;
    margin: 0 0 0.28rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--cf-accent-2);
    font-size: 0.7rem;
    letter-spacing: 0.11em;
}
.cf-guest .gm-guest-connect-title {
    margin: 0;
    color: #1f2937;
    font-size: clamp(1.35rem, 2.6vw, 1.8rem);
    line-height: 1.18;
    letter-spacing: -0.025em;
}
.cf-guest .gm-guest-connect-body {
    max-width: none;
    margin: 0.85rem 0 0.95rem;
    color: #525f6f;
    font-size: 0.94rem;
    line-height: 1.55;
}
.cf-guest .gm-guest-connect-highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cf-guest .gm-guest-connect-highlights li {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.55rem;
    border: 1px solid rgba(3, 105, 161, 0.14);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.82);
    color: #465568;
    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1.3;
}
.cf-guest .gm-guest-connect-highlights li::before {
    content: "✓";
    flex: 0 0 auto;
    color: var(--cf-accent);
    font-weight: 900;
}
.cf-guest .gm-guest-connect-actions {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    padding-left: clamp(1rem, 2.5vw, 1.7rem);
    border-left: 1px solid var(--cf-hairline);
}
.cf-guest .gm-guest-connect-btn {
    min-height: 52px;
    padding: 0.85rem 1rem;
    border-radius: 13px;
    background: var(--cf-accent);
    color: #ffffff;
    box-shadow: 0 5px 14px rgba(3, 105, 161, 0.18);
    letter-spacing: 0;
}
.cf-guest .gm-guest-connect-btn:hover {
    background: var(--cf-accent-2);
    filter: none;
    transform: translateY(-1px);
}
.cf-guest .gm-guest-connect-btn:focus-visible,
.cf-guest .gm-guest-connect-foot a:focus-visible {
    outline: 3px solid #0c4a6e;
    outline-offset: 3px;
}
.cf-guest .gm-guest-connect-foot {
    margin: 0.45rem 0 0;
    color: #667085;
    font-size: 0.82rem;
    line-height: 1.45;
    text-align: center;
}
.cf-guest .gm-guest-connect-foot a {
    color: var(--cf-accent-2);
}

@media (max-width: 640px) {
    .cf-guest .gm-guest-connect-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
        padding: 1.15rem;
        border-radius: 18px;
    }
    .cf-guest .gm-guest-connect-title { font-size: 1.4rem; }
    .cf-guest .gm-guest-connect-body { margin-top: 0.75rem; }
    .cf-guest .gm-guest-connect-highlights { gap: 0.4rem; }
    .cf-guest .gm-guest-connect-highlights li { padding: 0.42rem; font-size: 0.72rem; }
    .cf-guest .gm-guest-connect-actions {
        padding: 0.9rem 0 0;
        border-top: 1px solid var(--cf-hairline);
        border-left: 0;
    }
}

@media (max-width: 360px) {
    .cf-guest .gm-guest-connect-card { padding: 1rem; }
    .cf-guest .gm-guest-connect-heading { align-items: flex-start; gap: 0.65rem; }
    .cf-guest .gm-guest-connect-icon { flex-basis: 42px; width: 42px; height: 42px; }
    .cf-guest .gm-guest-connect-title { font-size: 1.25rem; }
    .cf-guest .gm-guest-connect-highlights { grid-template-columns: minmax(0, 1fr); }
}