/* The Grove, mobile v3: one continuous reading surface with receding controls.
   Desktop and the rest of HoodHallz retain their existing composition. */
.hh-grove-header,
.hh-grove-return,
.hh-grove-compose,
.hh-grove-utilities { display: none; }
.hh-live .post-actions .hh-post-share { display: none; }

@media (max-width: 767px) {
  body:has(.hh-live[data-live-page="social"]) {
    --grove-ground: #f8faf4;
    --grove-ink: #182d23;
    --grove-muted: #657368;
    --grove-line: #294d2c26;
    --grove-accent: #477534;
    --grove-glass: #f4f9eee8;
    --grove-top-height: calc(96px + env(safe-area-inset-top, 0px));
    background: var(--grove-ground);
    color: var(--grove-ink);
    padding-bottom: calc(98px + env(safe-area-inset-bottom, 0px));
  }
  html[data-theme="dark"] body:has(.hh-live[data-live-page="social"]) {
    --grove-ground: #06130f;
    --grove-ink: #f0f4ec;
    --grove-muted: #a1b2a6;
    --grove-line: #c5dfc52b;
    --grove-accent: #b2dd87;
    --grove-glass: #071710e8;
  }
  body:has(.hh-live[data-live-page="social"])::before,
  body:has(.hh-live[data-live-page="social"]) > .site-header,
  body:has(.hh-live[data-live-page="social"]) > .mobile-nav {
    display: none;
  }
  .social-hub .hh-live.grove-main[data-live-page="social"] {
    --hh-panel: var(--grove-ground);
    --hh-text: var(--grove-ink);
    --hh-muted: var(--grove-muted);
    --hh-border: var(--grove-line);
    width: 100%;
    max-width: none;
    padding: var(--grove-top-height) 0 24px;
    margin: 0;
    background: var(--grove-ground);
    color: var(--grove-ink);
    min-height: 100svh;
  }
  .hh-live[data-live-page="social"] > .grove-welcome,
  .hh-live[data-live-page="social"] > .grove-topline,
  .hh-live[data-live-page="social"] .grove-navigation.hh-navigation,
  .hh-live[data-live-page="social"] .grove-stream > .hh-discovery,
  .hh-live[data-live-page="social"] .grove-stream > #hh-composer,
  .hh-live[data-live-page="social"] #hh-caller-action,
  .hh-live[data-live-page="social"] .grove-stream > .stream-heading { display: none; }

  .hh-live[data-live-page="social"] .hh-grove-header {
    display: block;
    position: fixed;
    inset: 0 0 auto;
    z-index: 45;
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--grove-glass);
    border-bottom: 1px solid var(--grove-line);
    backdrop-filter: blur(16px) saturate(125%);
    -webkit-backdrop-filter: blur(16px) saturate(125%);
    transform: translateY(0);
    transition: transform 190ms cubic-bezier(.2,.7,.2,1), opacity 150ms ease;
  }
  .hh-grove-masthead {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(10px, env(safe-area-inset-right, 0px));
    gap: 2px;
  }
  .hh-grove-masthead .brand,
  .hh-grove-masthead .hh-grove-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    min-width: 0;
    margin-right: auto;
    color: var(--grove-ink);
    font: 600 25px/1 var(--font-display);
    letter-spacing: -.025em;
    text-decoration: none;
    white-space: nowrap;
  }
  .hh-grove-masthead .brand-symbol,
  .hh-grove-masthead .brand-symbol svg {
    display: block;
    width: 29px;
    height: 34px;
  }
  .hh-grove-masthead .hh-grove-brand > svg { width: 28px; height: 31px; color: var(--grove-accent); }
  .hh-grove-masthead > :is(a, button):not(.brand):not(.hh-grove-brand),
  .hh-grove-icon {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    color: var(--grove-ink);
    background: transparent;
    border: 0;
    border-radius: 50%;
    text-decoration: none;
  }
  .hh-grove-masthead .hh-grove-icon svg { width: 22px; height: 22px; stroke-width: 1.6; }
  .hh-grove-tabs {
    display: grid;
    grid-template-columns: minmax(0, .65fr) minmax(0, 1.1fr) minmax(0, 1.35fr) minmax(0, .7fr);
    min-height: 44px;
    padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px));
    gap: 8px;
  }
  .hh-grove-tabs > button {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 44px;
    padding: 8px 2px 10px;
    color: var(--grove-muted);
    border: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
  }
  .hh-grove-tabs > button::after {
    content: "";
    position: absolute;
    inset: auto 9px -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--grove-accent);
    opacity: 0;
  }
  .hh-grove-tabs > button:is([aria-pressed="true"], [aria-selected="true"]) {
    color: var(--grove-ink);
    font-weight: 650;
  }
  .hh-grove-tabs > button:is([aria-pressed="true"], [aria-selected="true"])::after { opacity: 1; }
  .hh-grove-header :is(a, button):focus-visible,
  .hh-grove-return:focus-visible,
  .hh-grove-compose:focus-visible {
    outline: 2px solid var(--grove-accent);
    outline-offset: -4px;
  }

  .hh-live[data-live-page="social"] .hh-feed { display: block; gap: 0; }
  .hh-live[data-live-page="social"] .grove-post {
    padding: 15px max(14px, env(safe-area-inset-right, 0px)) 7px max(14px, env(safe-area-inset-left, 0px));
    margin: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--grove-line);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    scroll-margin-top: calc(var(--grove-top-height) + 12px);
    scroll-margin-bottom: 110px;
  }
  .hh-live[data-live-page="social"] .post-author { align-items: flex-start; gap: 9px; flex-wrap: nowrap; }
  .hh-live[data-live-page="social"] .post-author > a { display: grid; place-items: start; min-width: 44px; min-height: 44px; }
  .hh-live[data-live-page="social"] .post-author .hh-avatar { width: 42px; height: 42px; min-width: 42px; border: 1px solid var(--grove-line); }
  .hh-live[data-live-page="social"] .post-author-meta { flex: 1 1 0; padding-top: 1px; min-width: 0; }
  .hh-live[data-live-page="social"] .post-author-meta strong { font-size: 15px; font-weight: 650; line-height: 1.3; }
  .hh-live[data-live-page="social"] .post-author-meta p { color: var(--grove-muted); font-size: 12px; line-height: 1.4; margin-top: 3px; }
  .hh-live[data-live-page="social"] .post-author-meta p span { margin-inline: 3px; }
  .hh-live[data-live-page="social"] .post-author > .hh-more { width: 44px; height: 44px; margin: -8px -8px 0 0; border: 0; background: transparent; box-shadow: none; transform: none; color: var(--grove-muted); }
  .hh-live[data-live-page="social"] .post-author > .hh-more svg { width: 18px; height: 18px; stroke-width: 2.6; }
  .hh-live[data-live-page="social"] .post-copy,
  .hh-live[data-live-page="social"] .hh-call-content > p { font-size: 16px; line-height: 1.48; letter-spacing: -.008em; color: var(--grove-ink); }
  .hh-live[data-live-page="social"] .post-copy { margin: 5px 0 0 53px; }
  .hh-live[data-live-page="social"] .hh-role { font-size: 10px; line-height: 1.4; padding: 2px 7px; border: 0; border-radius: 12px; background: #6d935b19; color: var(--grove-accent); }
  .hh-live[data-live-page="social"] .post-world,
  .hh-live[data-live-page="social"] a.hh-post-collection {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: calc(100% - 53px);
    min-height: 44px;
    margin: 1px 0 0 53px;
    padding: 5px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--grove-accent);
    font-size: 13px;
    font-weight: 550;
    line-height: 1.4;
    text-decoration: none;
    overflow-wrap: anywhere;
  }
  .hh-live[data-live-page="social"] .hh-post-collection img { width: 23px; height: 23px; object-fit: cover; border-radius: 6px; }
  .hh-live[data-live-page="social"] .post-world svg,
  .hh-live[data-live-page="social"] .hh-post-collection svg { width: 16px; height: 16px; }
  .hh-live[data-live-page="social"] .hh-nft-attachment { margin: 11px 0 0; border-radius: 0; border: 0; overflow: hidden; background: transparent; }
  .hh-live[data-live-page="social"] .hh-nft-attachment > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 430px; object-fit: contain; border: 1px solid var(--grove-line); border-radius: 12px; background: #809b7110; }
  .hh-live[data-live-page="social"] .hh-nft-attachment figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px; padding: 9px 1px 4px; font-size: 13px; line-height: 1.4; color: var(--grove-ink); }
  .hh-live[data-live-page="social"] .hh-nft-attachment figcaption span { display: inline; margin: 0; color: var(--grove-muted); font-size: 11px; }
  .hh-live[data-live-page="social"] .post-actions { margin-top: 4px; padding: 0; border: 0; gap: 12px; justify-content: space-between; }
  .hh-live[data-live-page="social"] .post-actions button { min-width: 44px; min-height: 44px; padding-inline: 0; gap: 7px; color: var(--grove-muted); font-size: 12px; line-height: 1.4; }
  .hh-live[data-live-page="social"] .post-actions button[aria-pressed="true"] { color: var(--grove-accent); }
  .hh-live[data-live-page="social"] .post-actions .hh-post-share { display: inline-flex; }
  .hh-live[data-live-page="social"] .post-actions svg { width: 20px; height: 20px; stroke-width: 1.55; }
  .hh-live[data-live-page="social"] .hh-replies { margin-top: 1px; padding-top: 14px; border-color: var(--grove-line); }
  .hh-live[data-live-page="social"] .hh-reply p { font-size: 15px; line-height: 1.5; }
  .hh-live[data-live-page="social"] .hh-reply-form textarea { font-size: 16px; scroll-margin-block: 120px; }
  .hh-live[data-live-page="social"] .hh-call .post-author { flex-wrap: wrap; }
  .hh-live[data-live-page="social"] .hh-call-label { width: auto; margin: -3px 0 0 53px; color: var(--grove-accent); font-size: 11px; }
  .hh-live[data-live-page="social"] .hh-call h2 { font-size: 23px; line-height: 1.2; margin: 9px 0 7px 53px; letter-spacing: -.02em; }
  .hh-live[data-live-page="social"] .hh-call-content { margin: 13px 0 9px 53px; padding: 0; border: 0; background: transparent; }
  .hh-live[data-live-page="social"] .hh-call-content > p { margin: 0; }
  .hh-live[data-live-page="social"] .hh-call-locked { margin: 14px 0; padding: 23px 16px; border: 1px solid var(--grove-line); border-radius: 14px; background: #809b7110; }
  .hh-live[data-live-page="social"] .hh-feed-context { padding-inline: 14px; margin: 0; color: var(--grove-muted); font-size: 12px; line-height: 1.5; }
  .hh-live[data-live-page="social"] .hh-feed-context:not(:empty) { padding-block: 10px; border-bottom: 1px solid var(--grove-line); }
  .hh-live[data-live-page="social"] .hh-feed-status { padding-inline: 14px; font-size: 12px; }
  .hh-live[data-live-page="social"] .hh-empty { padding: 44px 25px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .hh-live[data-live-page="social"] .hh-empty h2 { font-size: 27px; line-height: 1.2; }
  .hh-live[data-live-page="social"] .hh-empty p { font-size: 14px; line-height: 1.6; }
  .hh-live[data-live-page="social"] .hh-load-more { padding-inline: 16px; margin-block: 15px; }
  .hh-live[data-live-page="social"] .hh-grove-utilities { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 13px; padding: 8px 16px 18px; border-bottom: 1px solid var(--grove-line); }
  .hh-grove-utilities > :is(button, a) { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 5px 0; color: var(--grove-muted); font-size: 13px; text-decoration: none; }
  .hh-grove-utilities > [aria-pressed="true"] { color: var(--grove-accent); }
  .hh-grove-utilities svg { width: 17px; height: 17px; }
  .hh-live[data-live-page="social"] .grove-right { padding: 20px 14px 0; gap: 18px; }
  .hh-live[data-live-page="social"] .grove-right .grove-people { padding: 18px; border: 1px solid var(--grove-line); background: #809b7109; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hh-live[data-live-page="social"] #hh-community-suggestions { width: auto; margin: 20px 14px 0; padding: 18px; border-radius: 16px; box-shadow: none; background: #809b7109; border-color: var(--grove-line); }
  .hh-live[data-live-page="social"] #hh-people-search,
  .hh-live[data-live-page="social"] #hh-people { scroll-margin-top: calc(var(--grove-top-height) + 18px); }

  /* An open writing canvas, with tools within reach above the keyboard. */
  .hh-live[data-live-page="social"] .hh-grove-composer-clean {
    position: fixed;
    inset: var(--hh-compose-top, 0px) 0 auto;
    width: 100%; max-width: none;
    height: var(--hh-compose-height, 100dvh); max-height: none;
    margin: 0; padding: 0;
    overflow: hidden; overscroll-behavior: contain;
    border: 0; border-radius: 0;
    background: #fafbf6; color: var(--grove-ink);
    box-shadow: none;
  }
  .hh-grove-composer-clean[open] { display: flex; flex-direction: column; }
  .hh-grove-composer-clean::backdrop { background: #00150db3; }
  html[data-theme="dark"] .hh-live[data-live-page="social"] .hh-grove-composer-clean { background: #08150f; }
  .hh-compose-topbar {
    display: grid; grid-template-columns: 1fr 32px 1fr; align-items: center;
    flex: none; min-height: calc(62px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
    gap: 12px;
  }
  .hh-compose-topbar > button { min-height: 44px; width: fit-content; margin: 0; padding: 8px 0; border: 0; background: transparent; color: var(--grove-ink); font-size: 16px; line-height: 1.2; }
  .hh-compose-mark { display: grid; place-items: center; color: var(--grove-accent); }
  .hh-compose-mark svg { width: 26px; height: 26px; }
  .hh-compose-topbar .hh-compose-publish { justify-self: end; min-width: 76px; min-height: 38px; padding: 9px 19px; border-radius: 22px; background: #376d48; color: #fbfff6; font-weight: 600; font-size: 14px; }
  .hh-compose-topbar .hh-compose-publish:disabled { opacity: 1; background: #63806c24; color: #6f7b6d; cursor: default; }
  html[data-theme="dark"] .hh-compose-topbar .hh-compose-publish { background: #b2cea0; color: #112313; }
  html[data-theme="dark"] .hh-compose-topbar .hh-compose-publish:disabled { background: #b6c8a922; color: #819079; }
  .hh-grove-composer-clean .hh-grove-compose-slot { display: flex; flex: 1; min-height: 0; overflow: hidden; }
  .hh-live[data-live-page="social"] .hh-grove-composer-clean #hh-composer { display: flex; flex: 1; min-width: 0; min-height: 0; }
  .hh-live[data-live-page="social"] .hh-grove-composer-clean #hh-compose-form {
    display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0;
    margin: 0; padding: 12px max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
    border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
  .hh-grove-composer-clean .composer-input { display: flex; align-items: flex-start; flex: 1 0 140px; gap: 12px; min-height: 100px; }
  .hh-grove-composer-clean .composer-input > a { display: block; flex: none; margin-top: 1px; }
  .hh-grove-composer-clean .composer-input .hh-avatar { width: 38px; height: 38px; min-width: 38px; }
  .hh-live[data-live-page="social"] .hh-grove-composer-clean .composer-input textarea {
    display: block; flex: 1; width: 0; min-width: 0; min-height: 128px; max-height: none;
    margin: 0; padding: 6px 0 14px; border: 0; border-radius: 0; background: transparent;
    color: var(--grove-ink); font-size: 17px; line-height: 1.55; resize: none; box-shadow: none;
    scroll-margin-block: 16px;
  }
  .hh-grove-composer-clean .composer-input textarea::placeholder { color: var(--grove-muted); opacity: .92; }
  .hh-grove-composer-clean:has(.hh-compose-photo) .composer-input { flex: 0 0 auto; min-height: 76px; }
  .hh-live[data-live-page="social"] .hh-grove-composer-clean:has(.hh-compose-photo) .composer-input textarea { min-height: 70px; }
  .hh-grove-composer-clean .hh-compose-photos { flex: none; margin: 0 0 14px; }
  .hh-grove-composer-clean .hh-compose-photo > img { max-height: min(340px, 40dvh); }
  .hh-live[data-live-page="social"] .hh-grove-composer-clean .composer-actions {
    position: sticky; bottom: 0; display: flex; flex-direction: column; align-items: stretch;
    flex: none; gap: 0; margin: auto -16px 0; padding: 0 16px; border: 0;
    background: #fafbf6; box-shadow: 0 -6px 12px #fafbf699;
  }
  html[data-theme="dark"] .hh-live[data-live-page="social"] .hh-grove-composer-clean .composer-actions { background: #08150f; box-shadow: 0 -6px 12px #08150f99; }
  .hh-grove-composer-clean .hh-compose-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px; }
  .hh-grove-composer-clean .hh-compose-audience { display: inline-flex; align-items: center; gap: 7px; color: var(--grove-muted); font-size: 12px; }
  .hh-grove-composer-clean .hh-compose-audience svg { width: 15px; height: 15px; }
  .hh-grove-composer-clean .hh-count { margin: 0; padding: 0; font-size: 11px; color: var(--grove-muted); }
  .hh-grove-composer-clean .hh-compose-tools {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    margin: 0 -16px; padding: 4px 12px max(6px, env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--grove-line); background: linear-gradient(180deg, transparent 50%, #81a46b0d);
    box-shadow: inset 0 -1px 0 #97b88628;
  }
  .hh-grove-composer-clean .hh-compose-tools > button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 54px; padding: 4px; color: var(--grove-accent); border: 0; border-radius: 9px; background: transparent; font-size: 10px; line-height: 1.3; }
  .hh-grove-composer-clean .hh-compose-tools > button svg { width: 22px; height: 22px; }
  .hh-grove-composer-clean .hh-compose-tools > button:hover { background: #809b710d; }
  .hh-grove-composer-clean .hh-compose-tools > button:disabled { color: var(--grove-muted); opacity: .45; }
  .hh-live[data-live-page="social"] .hh-grove-composer-clean .composer-actions > .button { display: none; }
  .hh-live[data-live-page="social"] .hh-grove-composer-clean .hh-attachment-label { display: none; }
  .hh-live[data-live-page="social"] .hh-grove-composer-clean .hh-nft-tools-open .hh-attachment-label { display: flex; align-items: center; gap: 9px; min-height: 46px; margin: 5px 0; padding: 0 10px; border: 1px solid var(--grove-line); border-radius: 10px; background: transparent; }
  .hh-grove-composer-clean .hh-attachment-label svg { width: 20px; height: 20px; }
  .hh-live[data-live-page="social"] .hh-grove-composer-clean .hh-attachment-label select { flex: 1; min-width: 0; max-width: none; min-height: 44px; border: 0; background: transparent; color: var(--grove-ink); font-size: 16px; }
  .hh-grove-composer-clean .hh-form-error, .hh-grove-composer-clean .hh-compose-upload-status { flex: none; margin: 7px 0; font-size: 12px; line-height: 1.5; }
  .hh-grove-composer-clean :is(.hh-form-error, .hh-compose-upload-status):empty { display: none; }
  .hh-grove-composer-clean .hh-compose-alt-panel { flex: none; margin-bottom: 15px; }
  .hh-grove-composer-clean .hh-compose-alt-panel textarea { min-height: 70px; font-size: 16px; }
  .hh-grove-compose-alpha { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; flex: none; margin: 0; padding: 5px 12px; border: 0; background: transparent; color: var(--grove-muted); font-size: 11px; }
  .hh-grove-compose-alpha svg { width: 14px; height: 14px; }
  .hh-grove-composer-clean :is(textarea, select, button):focus-visible { outline: 2px solid var(--grove-accent); outline-offset: 2px; }
  .hh-grove-composer-clean .composer-input textarea:focus-visible { outline: 0; }

  body[data-grove-mobile] .hh-mobile-dock {
    z-index: 44;
    transition: transform 190ms cubic-bezier(.2,.7,.2,1), opacity 150ms ease;
  }
  body[data-grove-mobile] .hh-grove-return,
  body[data-grove-mobile] .hh-grove-compose {
    display: inline-flex;
    position: fixed;
    z-index: 44;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: 1px solid #c4d3b9b3;
    border-radius: 30px;
    color: #24492c;
    background: linear-gradient(140deg, #ffffff60, transparent 55%), #e6f3d8bb;
    box-shadow: inset 0 1px 0 #ffffffc7, inset 0 -1px 0 #44614129, 0 4px 14px #16371c1a;
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    touch-action: manipulation;
    transition: transform 190ms cubic-bezier(.2,.7,.2,1), opacity 150ms ease;
  }
  body[data-grove-mobile] .hh-grove-return {
    left: max(14px, env(safe-area-inset-left, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    gap: 9px;
    padding: 0 15px;
    font-size: 13px;
    font-weight: 550;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    visibility: hidden;
  }
  body[data-grove-mobile] .hh-grove-return svg { width: 21px; height: 21px; }
  body[data-grove-mobile] .hh-grove-return svg:last-child { width: 14px; height: 14px; }
  body[data-grove-mobile] .hh-grove-compose {
    right: max(15px, env(safe-area-inset-right, 0px));
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
    padding: 0;
  }
  body[data-grove-mobile] .hh-grove-compose svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  html[data-theme="dark"] body[data-grove-mobile] :is(.hh-grove-return, .hh-grove-compose) {
    color: #d1edb6;
    border-color: #cae1b977;
    background: linear-gradient(140deg, #dbf4c823, transparent 58%), #173725b8;
    box-shadow: inset 0 1px 0 #edffdb70, inset 0 -1px 0 #0005, 0 5px 18px #0003;
  }
  body[data-grove-mobile][data-grove-state="read"] .hh-grove-header { transform: translateY(-101%); opacity: 0; pointer-events: none; }
  body[data-grove-mobile][data-grove-state="read"] .hh-mobile-dock { transform: translate(-50%, calc(100% + 24px + env(safe-area-inset-bottom, 0px))); opacity: 0; pointer-events: none; }
  body[data-grove-mobile][data-grove-state="read"] .hh-grove-return { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
  body[data-grove-mobile][data-grove-state="read"] .hh-grove-compose { transform: translateY(70px); }
  body[data-grove-mobile][data-grove-overlay] :is(.hh-mobile-dock, .hh-grove-compose, .hh-grove-return),
  body[data-grove-mobile]:has(dialog[open]) :is(.hh-grove-compose, .hh-grove-return),
  body[data-grove-mobile]:has(input:not([type="radio"]):not([type="checkbox"]):focus, textarea:focus, select:focus) :is(.hh-grove-compose, .hh-grove-return) { visibility: hidden; pointer-events: none; }

  html.low-effects body[data-grove-mobile] :is(.hh-grove-header, .hh-grove-return, .hh-grove-compose) { background: var(--grove-ground); backdrop-filter: none; -webkit-backdrop-filter: none; }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body[data-grove-mobile] :is(.hh-grove-header, .hh-grove-return, .hh-grove-compose) { background: var(--grove-ground); }
  }
  @media (prefers-reduced-transparency: reduce) {
    body[data-grove-mobile] :is(.hh-grove-header, .hh-grove-return, .hh-grove-compose) { background: var(--grove-ground); backdrop-filter: none; -webkit-backdrop-filter: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    body[data-grove-mobile] :is(.hh-grove-header, .hh-grove-return, .hh-grove-compose, .hh-mobile-dock) { transition: none; }
  }
  @media (forced-colors: active) {
    body[data-grove-mobile] :is(.hh-grove-header, .hh-grove-return, .hh-grove-compose) { background: Canvas; color: CanvasText; border-color: CanvasText; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
    .hh-grove-tabs > button::after { background: Highlight; }
  }
}

@media (max-width: 350px) {
  .hh-grove-masthead .brand,
  .hh-grove-masthead .hh-grove-brand { font-size: 23px; gap: 6px; }
  .hh-grove-tabs { gap: 2px; }
  .hh-grove-tabs > button { font-size: 13px; }
  .hh-live[data-live-page="social"] .grove-post { padding-inline: 12px; }
  .hh-live[data-live-page="social"] .post-author-meta strong { font-size: 14px; }
  .hh-live[data-live-page="social"] .post-actions { gap: 6px; }
  .hh-live[data-live-page="social"] .post-actions button { gap: 5px; }
}

/* Short viewports need content space more than a fixed masthead. */
@media (max-width: 767px) and (max-height: 440px) {
  .hh-live[data-live-page="social"] .hh-grove-header { position: absolute; }
  body[data-grove-mobile] .hh-grove-compose { width: 46px; height: 46px; }
}