/* Rewards v3 home page (index_v3 + rewards/list_v3), the admin "View as" picker (v3/_view-as)
   and the activity feed (admin/activity-feed-v3). Same tokens and rules as igtags.css / pages.css:
   cards on the gray page, pills, accent for the main action, accent-soft for selected, green = downloaded. */

/* ------------------------------------------------------------------ page blocks */
.hm-page { display: flex; flex-direction: column; gap: 24px; }
.hm-page > .ig-banner, .hm-block > .ig-banner { margin: 0; }
.hm-block { display: flex; flex-direction: column; gap: 14px; }
.ig .hm-section-title { margin: 0 4px; font-size: 17px; font-weight: 700; }
.hm-banner-icon { flex: none; display: inline-flex; margin-top: 1px; }
.ig-banner > div > span { display: block; }
.ig-banner > div > span + span { margin-top: 4px; }
.ig-banner .hm-banner-sub { font-size: 13px; opacity: .85; }
.ig .ig-banner a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hm-loading { padding: 48px 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.hm-loading svg { animation: ig-spin 1s linear infinite; }
.hm-spin { animation: ig-spin 1s linear infinite; }
.hm-ico { display: inline-flex; }
.hm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ cover cards (presets / wallpapers) */
.hm-covers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ig .hm-cover { width: 100%; padding: 0; gap: 0; overflow: hidden; color: var(--ink); text-align: left; cursor: pointer; transition: box-shadow .15s; }
.hm-cover-media { aspect-ratio: 16 / 9; background: var(--soft); overflow: hidden; }
.hm-cover-media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .25s cubic-bezier(.2, 0, 0, 1); }
.hm-cover-foot { padding: 18px 22px 20px; display: flex; align-items: center; gap: 14px; }
.hm-cover-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hm-cover-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--soft-ink); }
.hm-cover-line strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.hm-cover-go { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--soft); color: var(--soft-ink); transition: background .15s, color .15s; }
@media (hover: hover) {
    .ig .hm-cover:hover { box-shadow: var(--pop-shadow); }
    .hm-cover:hover .hm-cover-media img { transform: scale(1.03); }
    .hm-cover:hover .hm-cover-go { background: var(--accent); color: var(--on-accent); }
}
.hm-badge-accent { background: var(--accent-soft); color: var(--on-accent-soft); }
.ig .pg-badge.is-green { background: var(--green-bg); color: var(--green); }

/* free tier: the reason, then the way to Patreon */
.hm-upsell { flex-direction: row; align-items: center; justify-content: space-between; gap: 18px; }
.hm-upsell > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hm-upsell .ig-note { font-size: 14px; }

/* ------------------------------------------------------------------ Instagram shoutouts */
.hm-ig { flex-direction: row; align-items: center; gap: 22px; }
.hm-ig-intro { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 14px; }
.hm-ig-intro > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hm-round { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--soft); color: var(--soft-ink); }
.hm-ig-form { flex: 0 1 420px; min-width: 0; display: flex; gap: 10px; }
/* one field box holding the @ and the input side by side, on the same text baseline (an @ laid over the input drifted off it) */
.hm-at { flex: 1; min-width: 0; height: 46px; align-self: center; padding: 0 14px; display: flex; align-items: baseline; gap: 2px; border: 1px solid var(--field); border-radius: 12px; background: var(--card); cursor: text; }
.hm-at:focus-within { border-color: var(--field-open); box-shadow: 0 0 0 3px rgba(22, 24, 26, .06); }
.hm-at > span { flex: none; color: var(--muted); font-size: 15px; line-height: 44px; pointer-events: none; }
.ig .hm-at .ig-input { flex: 1; min-width: 0; height: 44px; min-height: 0; padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; line-height: 44px; }

/* ------------------------------------------------------------------ rewards (one card per reward type) */
.hm-acc { padding: 0; gap: 0; overflow: hidden; }
.ig .hm-acc-head { width: 100%; padding: 18px 22px; display: flex; align-items: center; gap: 14px; border: none; background: none; color: var(--ink); text-align: left; transition: background .15s; }
@media (hover: hover) { .ig .hm-acc-head:hover { background: color-mix(in srgb, var(--ink) 4%, var(--card)); } }
.hm-acc-head .hm-round { background: var(--accent-soft); color: var(--on-accent-soft); }
.hm-acc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hm-acc-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 17px; font-weight: 700; }
.hm-acc-sub { font-size: 13px; color: var(--muted); }
.hm-acc-count { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.hm-acc-count strong { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hm-acc-count span { font-size: 12px; color: var(--muted); }
.hm-chev { flex: none; display: inline-flex; color: var(--muted); transition: transform .15s; }
.hm-chev.is-open { transform: rotate(180deg); }
.hm-acc-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 18px; border-top: 1px solid var(--line); }

/* photo request form */
.hm-acc .ig-steps { margin: 0; }
.ig .ig-steps a { color: var(--ink); font-weight: 600; }
.hm-req-form { display: flex; flex-direction: column; gap: 14px; }
.hm-req-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; }
.hm-req-row .ig-btn { margin-left: auto; }
.hm-orient { display: flex; flex-direction: column; }
.hm-orient .ig-label { margin-bottom: 6px; }
/* the orientation radios drawn as a segmented control */
.hm-seg { display: inline-flex; padding: var(--seg-pad); border-radius: 999px; background: var(--seg-track); }
.hm-seg input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.hm-seg label { height: var(--seg-h); padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; color: var(--seg-text); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.hm-seg input:checked + label { background: var(--accent-soft); color: var(--on-accent-soft); font-weight: 600; }
.hm-seg input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
/* stacked on phones: the icon above the word, like the Appearance switch in the profile menu; one line on wider screens */
.hm-seg.is-stacked svg { width: 14px; height: 14px; }
@media (max-width: 760px) {
    .hm-seg.is-stacked { border-radius: 18px; }
    .hm-seg.is-stacked label { height: auto; padding: 7px 16px 6px; flex-direction: column; justify-content: center; gap: 3px; border-radius: 15px; }
    .hm-seg.is-stacked svg { width: 18px; height: 18px; }
}
@media (hover: hover) { .hm-seg input:not(:checked) + label:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); } }

/* photo requests */
.hm-reqs-head { display: flex; align-items: center; gap: 8px; }
.hm-reqs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.hm-req, .hm-pack, .hm-preset { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.hm-req-cover { position: relative; aspect-ratio: 4 / 3; background: var(--soft); overflow: hidden; }
.hm-req-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hm-req-wait { position: absolute; inset: 0; padding: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 500; text-align: center; }
.hm-req-cover .pg-badge { position: absolute; top: 10px; left: 10px; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.hm-req-cover .pg-badge.is-muted { background: var(--card); }
.hm-req-body { flex: 1; padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.hm-req-date { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hm-req-meta { min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--soft-ink); }
.hm-req-meta svg { flex: none; color: var(--muted); }
.hm-req-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig a.hm-req-meta { font-weight: 600; text-decoration: none; }
.ig a.hm-req-meta:hover { color: var(--accent); }
.hm-req-body .ig-btn, .hm-preset .ig-btn { margin-top: auto; }
/* the button sits at the bottom of every card, so a row of cards lines its buttons up */
.hm-req-body > .ig-btn { margin-top: auto; }
.hm-req-body > div:last-of-type { margin-bottom: 6px; }
.ig .ig-btn.hm-del:hover { background: var(--coral-bg); color: var(--coral); box-shadow: none; }

/* presets: packs */
.hm-note-box { padding: 10px 14px; display: flex; align-items: flex-start; gap: 10px; border-radius: 12px; background: var(--soft); color: var(--soft-ink); font-size: 14px; }
.hm-note-box svg { flex: none; margin-top: 2px; color: var(--muted); }
.ig .hm-note-box a { color: var(--ink); font-weight: 600; }
.hm-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ig .hm-pack { width: 100%; padding: 0; color: var(--ink); text-align: left; cursor: pointer; transition: background .15s, box-shadow .15s; }
@media (hover: hover) { .ig .hm-pack:hover { box-shadow: var(--shadow); background: color-mix(in srgb, var(--ink) 3%, var(--card)); } }
.hm-pack-cover { aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; background: var(--soft) center / cover no-repeat; color: var(--muted); }
.hm-pack-foot { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.hm-pack-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 15px; font-weight: 600; }
.hm-pack-line { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }
.hm-pack-line b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ig .hm-pack .ig-progress, .ig .hm-pack-modal .ig-progress { height: 6px; background: var(--soft); }
.ig-progress.is-done i { background: var(--green); }

/* ------------------------------------------------------------------ pack window */
.ig .ig-modal.hm-pack-modal { width: 820px; padding: 0; gap: 0; overflow: hidden; }
.hm-pack-modal .ig-modal-head { padding: 18px 20px 14px; align-items: center; gap: 14px; }
.hm-pack-thumb { width: 52px; height: 52px; flex: none; border-radius: 10px; background: var(--soft) center / cover no-repeat; }
.hm-pack-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hm-pack-tools { padding: 0 20px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; border-bottom: 1px solid var(--line); }
.hm-pack-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hm-pack-filter .ig-pill { border: 1px solid var(--field); box-shadow: none; }
.hm-pack-filter .ig-pill.is-on { border-color: transparent; font-weight: 600; }
@media (hover: hover) { .hm-pack-filter .ig-pill:not(.is-on):hover { background: color-mix(in srgb, var(--ink) 7%, var(--card)); } }
.hm-pack-modal .ig-modal-body { padding: 18px 20px 20px; }
.hm-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.hm-preset { padding: 14px; gap: 8px; }
/* downloaded presets stay quiet, like downloaded photos: a gray badge and the normal outline */
.hm-preset-top { min-height: 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.hm-preset-vol { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ig .preset-card-title { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.hm-preset .ig-btn { margin-top: auto; }

/* a confirm opened from inside the pack window sits on top of it */
.ig .ig-modal-bg.is-top { z-index: 50; }
.ig .ig-modal.is-top { z-index: 51; }
.hm-confirm-name { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ admin "View as" (inside the hero band) */
.hm-viewas { height: 100%; }
.hm-viewas-row { height: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.hm-viewas-box { position: relative; min-width: 0; }
.ig .hm-viewas-btn { max-width: min(420px, calc(100vw - 32px)); height: 40px; padding: 0 12px 0 14px; display: inline-flex; align-items: center; gap: 8px; border: none; border-radius: 999px; background: var(--card); color: var(--ink); font-size: 14px; box-shadow: var(--shadow); }
.hm-viewas-btn svg { flex: none; color: var(--muted); transition: transform .15s; }
.hm-viewas-btn.is-open svg:last-child { transform: rotate(180deg); }
.hm-viewas-cap { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--violet); }
.hm-viewas-btn strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
@media (hover: hover) { .ig .hm-viewas-btn:hover { background: color-mix(in srgb, var(--ink) 7%, var(--card)); } }
.hm-viewas-menu { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: 340px; max-width: calc(100vw - 32px); padding: 8px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); box-shadow: var(--pop-shadow); }
.hm-viewas-list { max-height: min(380px, 60vh); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.hm-viewas-list .pg-mcheck { width: 18px; }
.ig-dd-item.is-on .pg-mcheck { color: var(--on-accent-soft); }
.hm-viewas-free { color: var(--muted); }
.ig .hm-viewas-acts { height: 40px; padding: 0 14px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); font-weight: 600; white-space: nowrap; }
.ig .hm-viewas-acts.is-on { background: var(--warn-bg); color: var(--warn); }
.hm-viewas-acts input { accent-color: var(--warn); }

/* ------------------------------------------------------------------ activity feed */
.hm-act-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-act-filters input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.hm-act-filters label { min-height: 34px; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--field); border-radius: 999px; background: var(--card); color: var(--soft-ink); font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s; }
.hm-act-filters label svg { color: var(--muted); }
.hm-act-filters input:checked + label { border-color: transparent; background: var(--accent-soft); color: var(--on-accent-soft); font-weight: 600; }
.hm-act-filters input:checked + label svg { color: inherit; }
.hm-act-filters input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .hm-act-filters input:not(:checked) + label:hover { background: color-mix(in srgb, var(--ink) 7%, var(--card)); color: var(--ink); } }
.hm-act-list.is-busy { opacity: .55; transition: opacity .15s; }
.ig .pg-row.hm-act-row { align-items: flex-start; cursor: default; }
.ig .pg-row.hm-act-row:hover { background: var(--card); }
.hm-act-icon { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--soft); color: var(--soft-ink); }
.hm-act-icon.is-download { background: var(--green-bg); color: var(--green); }
.hm-act-icon.is-joined { background: var(--accent-soft); color: var(--on-accent-soft); }
.hm-act-what { color: var(--soft-ink) !important; }
.hm-act-what b { font-weight: 600; color: var(--ink); }
.hm-act-side { flex: none; padding-top: 2px; font-size: 13px; color: var(--muted); text-align: right; }
.hm-act-date-phone { display: none; }
.hm-act-more { display: flex; justify-content: center; }
.hm-act-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.hm-act-head .ig-title { margin: 0 4px; }

/* ------------------------------------------------------------------ phones */
@media (max-width: 1060px) {
    .hm-ig { flex-direction: column; align-items: stretch; }
    .hm-ig-form { flex: none; }
}
@media (max-width: 760px) {
    .hm-page { gap: 20px; }
    .hm-covers { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .hm-cover-foot { padding: 14px 16px 16px; }
    .hm-upsell { flex-direction: column; align-items: stretch; }
    .hm-upsell .ig-btn, .hm-ig-form .ig-btn, .hm-req-row .ig-btn { width: 100%; }
    .hm-ig-form { flex-direction: column; }
    .ig .hm-acc-head { padding: 14px 16px; gap: 12px; }
    .hm-acc-head .hm-round { width: 40px; height: 40px; }
    .hm-acc-sub { display: none; }
    .hm-acc-body { padding: 16px; }
    .hm-req-row { flex-direction: column; align-items: stretch; }
    .hm-req-row .ig-btn { margin-left: 0; }
    .hm-seg { display: flex; }
    .hm-seg label { flex: 1; justify-content: center; padding: 0 8px; }
    .hm-packs, .hm-presets { grid-template-columns: minmax(0, 1fr); }
    /* photo requests: downloaded ones two to a row, the ones still to download (or on the way) full width */
    .hm-reqs { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 10px; }
    .hm-req:not(.is-done) { grid-column: 1 / -1; }
    .hm-req.is-done .hm-req-body { padding: 10px 10px 12px; }
    .hm-req.is-done .ig-btn { padding: 0 10px; font-size: 13px; }
    .hm-pack-modal .ig-modal-head, .hm-pack-tools { padding-left: 16px; padding-right: 16px; }
    .hm-pack-modal .ig-modal-body { padding: 16px; }
    .hm-viewas-row { gap: 8px; }
    .ig .hm-viewas-btn { height: 36px; max-width: calc(100vw - 150px); }
    .ig .hm-viewas-acts { height: 36px; padding: 0 12px; font-size: 13px; }
    .hm-act-side { display: none; }
    .hm-act-date-phone { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
    /* the 3% photo zoom on card hover stays smooth here too: it is small and only follows the pointer */
    .hm-chev, .hm-viewas-btn svg { transition: none; }
    .hm-loading svg, .hm-spin { animation-duration: 3s; }
}

/* wallpapers: a line between the request form and "Your photo requests", edge to edge in the card */
.hm-acc-body > .hm-block ~ .hm-reqs-block { margin: 0 -22px; padding: 18px 22px 0; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .hm-acc-body > .hm-block ~ .hm-reqs-block { margin: 0 -16px; padding: 16px 16px 0; } }
/* the request form and "Your photo requests" (both in one block): a line between them, edge to edge */
.hm-req-form ~ .hm-reqs-block { margin: 8px -22px 0; padding: 22px 22px 0; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .hm-req-form ~ .hm-reqs-block { margin: 6px -16px 0; padding: 18px 16px 0; } }
/* the button closes the form, on the right (full width on phones) */
.hm-req-submit { display: flex; justify-content: flex-end; }
.hm-req-row > .hm-req-submit { margin-left: auto; } /* on the orientation's line, at the right */
@media (max-width: 760px) { .hm-req-row > .hm-req-submit { margin-left: 0; } } /* phones: under it, full width */
@media (max-width: 760px) { .hm-req-submit .ig-btn { width: 100%; } }

/* Hover on the big cover cards and the preset pack cards: one effect, one timing, so the shadow and the photo zoom
   move together and ease out smoothly (in and out) instead of the shadow snapping before the photo follows */
.ig .hm-cover, .ig .hm-pack { transition: box-shadow .35s cubic-bezier(.2, 0, 0, 1), background .35s cubic-bezier(.2, 0, 0, 1); }
.hm-cover-media img, .hm-pack-cover { transition: transform .35s cubic-bezier(.2, 0, 0, 1); will-change: transform; }
.hm-cover-go { transition: background .35s cubic-bezier(.2, 0, 0, 1), color .35s cubic-bezier(.2, 0, 0, 1); }
@media (hover: hover) {
    .ig .hm-pack:hover { box-shadow: var(--pop-shadow); background: var(--card); }
    .hm-pack:hover .hm-pack-cover { transform: scale(1.03); }
}

/* Activity: two columns of tiles, 2px apart. Only the outer corners of the whole block are round (20px), every
   inner corner is 4px, the same rule as a one-column list. Phones keep one column. */
@media (min-width: 761px) {
    .ig .pg-list.hm-act-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
    .ig .hm-act-list > .pg-row { border-radius: 4px; }
    .ig .hm-act-list > .pg-row:nth-of-type(1) { border-top-left-radius: 20px; }
    .ig .hm-act-list > .pg-row:nth-of-type(2) { border-top-right-radius: 20px; }
    /* even count: the last row is full */
    .ig .hm-act-list > .pg-row:nth-last-of-type(2):nth-of-type(odd) { border-bottom-left-radius: 20px; }
    .ig .hm-act-list > .pg-row:last-of-type:nth-of-type(even) { border-bottom-right-radius: 20px; }
    /* odd count: the last tile sits alone on the left, the one above it on the right closes that column */
    .ig .hm-act-list > .pg-row:last-of-type:nth-of-type(odd) { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
    .ig .hm-act-list > .pg-row:nth-last-of-type(2):nth-of-type(even) { border-bottom-right-radius: 20px; }
    .ig .hm-act-list > .pg-row:only-of-type { border-radius: 20px; }
}

/* photo requests: Downloaded is done and quiet - gray, not green */
.hm-req-cover .pg-badge.is-done { background: var(--card); color: var(--soft-ink); }
@media (max-width: 760px) { .hm-ig-form .hm-at { flex: none; align-self: stretch; } }

/* Instagram shoutouts, close to the old block: the pink Instagram bubble at the top of the text, and one round
   gray field with the Save button inside it on the right */
.hm-ig .hm-round { background: var(--pink); color: var(--card); }
.hm-ig .hm-ig-intro { align-items: flex-start; }
.hm-ig-form { height: 52px; padding: 4px 4px 4px 18px; align-items: center; gap: 8px; border-radius: 999px; background: var(--soft); transition: box-shadow .15s; }
.hm-ig-form:focus-within { box-shadow: inset 0 0 0 1px var(--field-open), 0 0 0 3px rgba(22, 24, 26, .06); }
.ig .hm-ig-form .hm-at { height: 44px; padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; }
.ig .hm-ig-form .ig-btn { flex: none; min-height: 44px; padding: 0 20px; }
@media (max-width: 760px) {
    .ig .hm-ig-form { flex-direction: row; }
    .ig .hm-ig-form .hm-at { flex: 1; align-self: center; }
    .ig .hm-ig-form .ig-btn { width: auto; }
}