/* Mobile-only refinements for the existing 52Hz views and modal roots. */
:root {
  --hz-accent: var(--hz-teal-500, #57b7b7);
  --hz-accent-hover: #49a6a6;
  --hz-accent-soft: var(--hz-teal-100, #e6f3f1);
  --hz-accent-ink: #173c3c;
  --hz-ui-teal: var(--hz-accent);
  --event-teal: var(--hz-accent);
  --event-teal-bright: var(--hz-accent);
  --event-teal-soft: var(--hz-accent-soft);
  --event-paper: var(--hz-cream-0, #f5f2ea);
  --event-white: #fffefa;
  --event-glass: none;
}

/* This stylesheet is loaded by index.html, whose phone canvas stays at most
   430px even in a wide browser. web/web.html has its own desktop stylesheet. */
@media all {
  #activityView.active,
  #myEventsView.active,
  #communityView.active { padding: 0; }

  :is(#activityView, #myEventsView, #communityView, #profilePageView).active {
    background-color: var(--hz-cream-0, #f5f2ea);
    background-image: none;
  }

  :is(#activityView, #myEventsView, #communityView, #profilePageView).active::before,
  :is(#activityView, #myEventsView, #communityView, #profilePageView).active::after {
    content: none;
    animation: none;
    background-image: none;
  }

  body:has(:is(#activityView, #myEventsView, #communityView, #profilePageView).active) {
    padding: 0;
    background: var(--hz-cream-0, #f5f2ea);
    background-image: none;
  }

  .phone-shell:has(:is(#activityView, #myEventsView, #communityView, #profilePageView).active) {
    min-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }

  body:has(:is(#activityView, #myEventsView, #communityView, #profilePageView).active)::before,
  body:has(:is(#activityView, #myEventsView, #communityView, #profilePageView).active)::after {
    content: none;
    animation: none;
  }

  body:has(:is(#activityView, #myEventsView, #communityView, #profilePageView).active) > .aurora {
    display: none;
  }

  :is(#activityView, #myEventsView, #communityView, #profilePageView) {
    scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }

  #tabBar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: min(100%, 430px);
    max-width: 430px;
    margin: 0 auto;
    min-height: 60px;
    padding: 6px 8px calc(7px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-top: 1px solid rgba(23, 60, 60, .1);
    border-radius: 16px 16px 0 0;
    background: #fffefa;
    box-shadow: 0 -5px 20px rgba(38, 61, 53, .07);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
  }

  #tabBar .tab {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 48px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 11px;
    color: #68746f;
    font-size: 11px;
    line-height: 1.15;
    background: transparent;
    transition: color 150ms ease, background-color 150ms ease;
  }

  #tabBar .tab-icon {
    display: block;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  #tabBar .tab.active,
  #tabBar .tab[aria-current="page"] {
    color: var(--hz-accent-ink);
    background: var(--hz-accent-soft);
  }

  #tabBar .tab.active::before,
  #tabBar .tab[aria-current="page"]::before {
    position: absolute;
    top: 0;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--hz-accent);
    content: "";
  }

  #activityView #eventHubRoot,
  #myEventsView #eventMyEventsRoot {
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  }

  #eventHubRoot .hz-discovery {
    width: 100%;
    max-width: none;
    padding: 16px 16px calc(108px + env(safe-area-inset-bottom, 0px));
    overflow-x: clip;
  }

  #eventHubRoot .hz-discovery-heading {
    display: block;
    margin: 0 0 16px;
  }

  #eventHubRoot .hz-discovery-heading > div {
    display: grid;
    gap: 0;
    min-width: 0;
  }

  #eventHubRoot .hz-discovery-heading > div > p:first-child {
    font-size: 10px;
    line-height: 16px;
    letter-spacing: .09em;
  }

  #eventHubRoot .hz-discovery-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
  }

  #eventHubRoot .hz-discovery-heading h1 {
    min-width: 0;
    margin: 5px 0 7px;
    font-size: clamp(25px, 6.8vw, 28px);
    line-height: 1.28;
    letter-spacing: -.035em;
    text-wrap: balance;
  }

  #eventHubRoot .hz-discovery-heading h1 span { display: inline; }

  #eventHubRoot .hz-discovery-title-row > button {
    display: inline-flex;
    min-width: max-content;
    min-height: 36px;
    align-items: center;
    gap: 3px;
    margin: 0;
    padding: 0 9px;
    border: 1px solid rgba(87, 183, 183, .38);
    border-radius: 9px;
    color: var(--hz-accent-ink);
    background: #fffefa;
    font-size: 12px;
    line-height: 1.25;
  }

  #eventHubRoot .hz-discovery-title-row > button .hz-icon { width: 14px; height: 14px; }

  #eventHubRoot .hz-discovery-heading > div > p:last-child {
    max-width: 34em;
    font-size: 13px;
    line-height: 1.55;
    color: #5f6d67;
  }

  #eventHubRoot .hz-discovery-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  #eventHubRoot .hz-discovery-grid > :last-child { grid-column: auto; }

  #eventHubRoot .hz-discovery-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(38, 61, 53, .1);
    border-radius: 15px;
    background: #fffefa;
    box-shadow: 0 2px 8px rgba(38, 61, 53, .035);
  }

  #eventHubRoot .hz-discovery-photo {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2.18 / 1;
    overflow: hidden;
    background: #e8f0ed;
    isolation: isolate;
  }

  #eventHubRoot .hz-discovery-photo::after {
    position: absolute;
    z-index: 1;
    inset: 0 0 auto;
    height: 58%;
    background: linear-gradient(180deg, rgba(15, 30, 29, .55), rgba(15, 30, 29, .18) 68%, transparent);
    content: "";
    pointer-events: none;
  }

  #eventHubRoot .hz-discovery-photo img {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 54%;
  }

  #eventHubRoot .hz-discovery-photo h2 {
    position: absolute;
    z-index: 2;
    top: 13px;
    left: 15px;
    max-width: calc(100% - 30px);
    margin: 0;
    color: #fff;
    font-size: clamp(19px, 5.5vw, 22px);
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -.015em;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 8px rgba(15, 30, 29, .28);
  }

  #eventHubRoot .hz-discovery-card.is-image-unavailable .hz-discovery-photo img { display: none; }
  #eventHubRoot .hz-discovery-card.is-image-unavailable .hz-discovery-photo { background: linear-gradient(135deg, #e8f3f1, #f3f1e9); }
  #eventHubRoot .hz-discovery-card.is-image-unavailable .hz-discovery-photo::after { display: none; }
  #eventHubRoot .hz-discovery-copy { display: grid; gap: 9px; padding: 12px 14px 13px; }

  #eventHubRoot .hz-discovery-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    color: #5c6a63;
    font-size: 11px;
    line-height: 1.4;
  }

  #eventHubRoot .hz-discovery-meta > span:first-child {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 6px;
    color: #405c59;
    background: var(--hz-accent-soft);
    font-weight: 650;
  }

  #eventHubRoot .hz-discovery-meta > span:last-child {
    min-width: 0;
    overflow-wrap: normal;
    word-break: keep-all;
    text-align: right;
  }

  #eventHubRoot .hz-discovery-copy > p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #46564f;
    font-size: 13px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #eventHubRoot .hz-discovery-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 6px;
    min-width: 0;
    margin: 0;
  }

  #eventHubRoot .hz-discovery-foot small {
    min-width: 0;
    min-height: 0;
    color: #65736d;
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: normal;
    word-break: keep-all;
  }

  #eventHubRoot .hz-discovery-action {
    display: inline-flex;
    flex: 0 0 auto;
    min-width: 118px;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--hz-accent);
    border-radius: 10px;
    color: var(--hz-accent-ink);
    background: var(--hz-accent);
    font-size: 13px;
    font-weight: 700;
    transition: background-color 150ms ease, transform 150ms ease;
  }

  #eventHubRoot .hz-discovery-action:active { transform: scale(.985); }

  #eventHubRoot .hz-persona-strip.hz-deepsea {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 64px;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 0;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #cfdee0;
    border-radius: 15px;
    background: #e9f2f2;
    box-shadow: none;
  }

  #eventHubRoot .hz-persona-strip.hz-deepsea .hz-fish-stack { width: 50px; height: 50px; }
  #eventHubRoot .hz-persona-strip.hz-deepsea .hz-fish-stack img { width: 34px; height: 38px; border: 2px solid #fffefa; border-bottom-width: 4px; border-radius: 5px; box-shadow: 0 2px 6px rgba(43, 85, 107, .16); }
  #eventHubRoot .hz-deepsea-copy { min-width: 0; }
  #eventHubRoot .hz-deepsea-copy .hz-deepsea-kicker { font-size: 10px; line-height: 1.35; }
  #eventHubRoot .hz-deepsea-copy h2 { margin: 2px 0; color: #244f62; font-size: 16px; line-height: 1.3; }
  #eventHubRoot .hz-deepsea-copy p { margin: 0; color: #546e77; font-size: 11px; line-height: 1.4; }
  #eventHubRoot .hz-persona-strip.hz-deepsea > button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 64px;
    min-width: 64px;
    max-width: 64px;
    margin: 0;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    padding: 0 7px;
    border: 1px solid #c2d9dd;
    border-radius: 10px;
    color: #244f62;
    background: #fffefa;
    font-size: 11px;
    white-space: nowrap;
  }

  #eventHubRoot .hz-persona-strip.hz-deepsea > button .hz-icon { width: 15px; height: 15px; }

  #eventMyEventsRoot .ma-dashboard {
    width: 100%;
    max-width: none;
    padding: 18px 16px calc(108px + env(safe-area-inset-bottom, 0px));
    overflow-x: clip;
    color: #263d35;
  }

  #eventMyEventsRoot .ma-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
  }

  #eventMyEventsRoot .ma-heading > div { min-width: 0; }

  #eventMyEventsRoot .ma-heading h1 { margin: 4px 0 5px; font-size: 26px; line-height: 1.25; }
  #eventMyEventsRoot .ma-heading p:last-child { font-size: 12px; line-height: 1.5; }

  #eventMyEventsRoot .ma-heading > .event-btn {
    display: inline-grid;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    min-height: 44px;
    place-items: center;
    margin: 0;
    padding: 0;
    font-size: 0;
  }

  #eventMyEventsRoot .ma-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  #eventMyEventsRoot .ma-heading .ma-icon { width: 18px; height: 18px; }
  #eventMyEventsRoot .ma-notification-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

  #eventMyEventsRoot .ma-filters {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    width: 100%;
    margin: 0 0 17px;
    padding: 0 26px 8px 0;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    border-bottom: 1px solid rgba(38, 61, 53, .12);
    scrollbar-color: var(--hz-accent) rgba(87, 183, 183, .12);
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  #eventMyEventsRoot .ma-filter-scroll-cue {
    position: sticky;
    z-index: 1;
    right: 0;
    display: grid;
    flex: 0 0 24px;
    width: 24px;
    height: 34px;
    place-items: center;
    margin-left: -32px;
    color: var(--hz-accent-ink);
    background: linear-gradient(90deg, rgba(245, 242, 234, .15), #f5f2ea 55%);
    pointer-events: none;
  }

  #eventMyEventsRoot .ma-filter-scroll-cue .ma-icon { width: 17px; height: 17px; }

  #eventMyEventsRoot .ma-filters button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(38, 61, 53, .12);
    border-radius: 9px;
    color: #4e5d56;
    background: #fffefa;
    font-size: 12px;
    white-space: nowrap;
  }

  #eventMyEventsRoot .ma-filters button[aria-pressed="true"] {
    border-color: rgba(87, 183, 183, .46);
    color: var(--hz-accent-ink);
    background: var(--hz-accent-soft);
  }

  #eventMyEventsRoot .ma-section { margin-bottom: 22px; }
  #eventMyEventsRoot .ma-section > header { margin-bottom: 10px; }
  #eventMyEventsRoot .ma-section h2 { color: #263d35; font-size: 17px; line-height: 1.35; }
  #eventMyEventsRoot .ma-section h2 > span { color: #3c5e5b; background: var(--hz-accent-soft); }
  #eventMyEventsRoot .ma-section > header p { font-size: 12px; line-height: 1.5; }
  #eventMyEventsRoot .ma-list { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  #eventMyEventsRoot .ma-item { min-width: 0; border-color: rgba(38, 61, 53, .12); border-radius: 14px; background: #fffefa; }
  #eventMyEventsRoot .ma-item.ma-heartbeat,
  #eventMyEventsRoot .ma-item.ma-dinner { background: #fffefa; }
  #eventMyEventsRoot .ma-cover,
  #eventMyEventsRoot .ma-action .ma-cover { aspect-ratio: 3.2 / 1; height: auto; background: #e8f0ed; }
  #eventMyEventsRoot .ma-card-body,
  #eventMyEventsRoot .ma-history .ma-card-body { padding: 16px; }
  #eventMyEventsRoot .ma-family { margin: 0 0 7px; padding: 3px 7px; border-radius: 6px; color: #65736d; background: #f2f3ee; font-size: 11px; line-height: 1.5; }
  #eventMyEventsRoot .ma-event-meta { gap: 6px 10px; }
  #eventMyEventsRoot .ma-event-meta .ma-family { margin: 0; }
  #eventMyEventsRoot .ma-event-meta .event-status-chip { min-height: 0; padding: 4px 8px; font-size: 11px; line-height: 1.5; }
  #eventMyEventsRoot .ma-item .event-card-title,
  #eventMyEventsRoot .ma-record h3 { margin: 10px 0 0; color: #263d35; font-size: 18px; line-height: 1.4; text-wrap: balance; overflow-wrap: anywhere; }
  #eventMyEventsRoot .ma-item .event-card-summary,
  #eventMyEventsRoot .ma-record p { margin: 8px 0 0; color: #66736d; font-size: 13px; line-height: 1.55; }
  #eventMyEventsRoot .ma-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 14px 0 0; }
  #eventMyEventsRoot .ma-fact { display: grid; align-items: start; min-width: 0; padding: 0; border: 0; }
  #eventMyEventsRoot .ma-fact-primary { grid-column: 1 / -1; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; padding: 0; border: 0; }
  #eventMyEventsRoot .ma-fact-secondary { grid-template-columns: 16px minmax(0, 1fr); gap: 6px; }
  #eventMyEventsRoot .ma-fact-secondary .ma-fact-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #eventMyEventsRoot .ma-fact dt { gap: 5px; color: #70807a; opacity: 1; font-size: 12px; line-height: 1.5; white-space: nowrap; }
  #eventMyEventsRoot .ma-fact-icon { flex-basis: 15px; width: 15px; height: 15px; margin-top: 2px; }
  #eventMyEventsRoot .ma-fact dd,
  #eventMyEventsRoot .ma-fact-primary dd { margin: 0; color: #354a41; font-size: 13px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
  #eventMyEventsRoot .ma-event-footer { gap: 10px; margin-top: 14px; padding-top: 12px; border-color: rgba(38, 61, 53, .1); }
  #eventMyEventsRoot .ma-event-footer .event-decision-fee { font-size: 12px; line-height: 1.5; color: #65736d; }
  #eventMyEventsRoot .ma-event-footer .event-decision-fee strong { color: #354a41; font-size: 13px; }
  #eventMyEventsRoot .ma-item .ma-event-actions { gap: 8px; margin: 0; }
  #eventMyEventsRoot .ma-item .ma-event-actions .event-btn { min-width: 0; min-height: 44px; padding: 10px 12px; }
  #eventMyEventsRoot .ma-item .ma-event-actions .event-btn.primary { flex: 1 1 140px; }
  #eventMyEventsRoot .ma-item .ma-event-actions .event-btn.secondary { flex: 0 1 auto; }
  #eventMyEventsRoot .ma-loading-cover { aspect-ratio: 3.2 / 1; }
  #eventMyEventsRoot .ma-loading-body { gap: 12px; padding: 16px; }
  #eventMyEventsRoot .ma-loading-pill-row { min-height: 25px; justify-content: space-between; }
  #eventMyEventsRoot .ma-loading-facts { gap: 8px 12px; }
  #eventMyEventsRoot .ma-loading-fact { grid-template-columns: 42px minmax(0, 1fr); align-items: center; min-height: 20px; border: 0; }
  #eventMyEventsRoot .ma-loading-fact:nth-child(-n+2) { grid-column: 1 / -1; }
  #eventMyEventsRoot .ma-loading-cta { width: 68%; justify-self: end; }
  #eventMyEventsRoot .ma-history .ma-item { padding: 0; background: #fffefa; }
  #eventMyEventsRoot .ma-history .ma-record { align-items: flex-start; gap: 8px; }
  #eventMyEventsRoot .ma-item .event-action-rail { gap: 8px; margin-top: 12px; }
  #eventMyEventsRoot .event-action-status { display: inline-flex; min-height: 40px; align-items: center; padding: 0 4px; color: #68746f; font-size: 12px; line-height: 1.4; }
  #eventMyEventsRoot .ma-item .event-action-rail .event-btn { min-width: 0; }
  #eventMyEventsRoot .ma-item .event-btn.primary,
  #eventMyEventsRoot .ma-item .event-btn.secondary { border: 1px solid rgba(87, 183, 183, .4); color: #405c59; background: var(--hz-accent-soft); }
  #eventMyEventsRoot .ma-item .event-btn.primary { color: var(--hz-accent-ink); background: var(--hz-accent); }
  #eventMyEventsRoot .ma-empty { padding: 28px 16px; border-color: rgba(87, 183, 183, .3); background: #fffefa; }

  #profilePageView.profile-page-view {
    padding: 0 16px calc(108px + env(safe-area-inset-bottom, 0px));
    overflow-x: clip;
    background: var(--hz-cream-0, #f5f2ea);
  }

  #profilePageView .profile-hero {
    display: flex;
    min-height: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 -16px 12px;
    padding: 16px 16px 10px;
    background: transparent;
  }

  #profilePageView .profile-hero-heading { min-width: 0; }
  #profilePageView .profile-hero .match-heading { margin: 2px 0 4px; color: var(--hz-accent); font-size: 25px; line-height: 1.25; }
  #profilePageView .profile-hero .page-subtitle { margin: 0; color: #5f6d67; font-size: 12px; line-height: 1.45; }
  #profilePageView .profile-header-action { flex: 0 0 auto; min-width: 44px; min-height: 44px; border: 1px solid rgba(87, 183, 183, .35); border-radius: 10px; color: var(--hz-accent-ink); background: #fffefa; }
  #profilePageView .account-card,
  #profilePageView .settings-card,
  #profilePageView .contact-card,
  #profilePageView .profile-coupons-panel,
  #profilePageView .profile-orders-panel {
    margin: 0 0 11px;
    padding: 14px;
    border: 1px solid rgba(38, 61, 53, .11);
    border-radius: 15px;
    color: #263d35;
    background: #fffefa;
    box-shadow: 0 2px 8px rgba(38, 61, 53, .035);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  #profilePageView .profile-identity-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }

  #profilePageView .profile-identity-heading .profile-identity-panel {
    display: grid;
    grid-column: 1;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  #profilePageView #profileAvatarSmall { grid-column: 1; width: 52px; height: 52px; border-radius: 15px; }
  #profilePageView .profile-identity-copy { grid-column: 2; min-width: 0; }
  #profilePageView .profile-nickname { max-width: 100%; margin: 0; color: #263d35; font-size: 17px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #profilePageView .profile-identity-meta { margin: 3px 0 0; color: #64716a; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
  #profilePageView .profile-account-intro { display: none; }
  #profilePageView .profile-identity-heading > .profile-inline-action { grid-column: 2; grid-row: 1; min-width: 62px; min-height: 44px; padding: 0 8px; border-radius: 9px; font-size: 11px; }
  #profilePageView .pc-mobile-completion { display: flex; align-items: center; gap: 9px; margin: 9px 0 0; color: #65736d; font-size: 10px; }
  #profilePageView .pc-mobile-completion > div { display: flex; flex: 0 0 auto; gap: 5px; }
  #profilePageView .pc-completion-track { flex: 1; height: 4px; }
  #profilePageView .profile-encounter-content.pc-preferences-card { margin: 0 0 11px; padding: 14px; border: 1px solid rgba(38, 61, 53, .11); border-radius: 15px; background: #fffefa; }
  #profilePageView .profile-encounter-subhead { margin: 0; color: #263d35; font-size: 16px; }
  #profilePageView .pc-preferences-lead { margin: 4px 0 10px; color: #64716a; font-size: 12px; line-height: 1.45; }
  #profilePageView .profile-encounter-topics { gap: 6px; }
  #profilePageView .profile-encounter-topics :is(span, button) { max-width: 100%; border-color: rgba(87, 183, 183, .24); border-radius: 8px; color: #405c59; background: var(--hz-accent-soft); font-size: 12px; overflow-wrap: anywhere; }
  #profilePageView .pc-deepsea-card { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 0 11px; padding: 11px 13px; border-radius: 15px; }
  #profilePageView .pc-deepsea-heading { margin: 0 0 5px; }
  #profilePageView .pc-deepsea-heading > .pc-deepsea-icon { display: none; }
  #profilePageView .pc-deepsea-heading h3 { font-size: 14px; }
  #profilePageView .pc-deepsea-open { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; padding: 0; border: 0; background: transparent; }
  #profilePageView .pc-deepsea-fish { width: 54px; height: 54px; border-radius: 11px; }
  #profilePageView .pc-deepsea-copy strong { font-size: 14px; }
  #profilePageView .pc-deepsea-copy > span { font-size: 11px; }
  #profilePageView .pc-deepsea-open .pc-deepsea-cta { grid-column: auto; min-height: 40px; margin: 0; padding: 0 9px; border: 1px solid #c2d9dd; border-radius: 9px; color: #244f62; background: #fffefa; font-size: 11px; }
  #profilePageView .profile-readiness-card { display: block; margin: 0 0 11px; padding: 10px 12px; }
  #profilePageView .profile-readiness-card > .profile-card-heading-row { margin: 0; }
  #profilePageView .profile-readiness-card .profile-card-eyebrow,
  #profilePageView .profile-readiness-card .profile-wide-action { display: none; }
  #profilePageView .profile-readiness-card #profileReadinessTitle { color: #52645b; font-size: 12px; font-weight: 650; }
  #profilePageView .profile-readiness-card .profile-state-badge { min-height: 28px; padding: 4px 8px; color: #52645b; background: var(--hz-accent-soft); }
  #profilePageView .profile-readiness-card .profile-readiness-grid { display: flex; gap: 12px; margin: 4px 0 0; border: 0; }
  #profilePageView .profile-readiness-grid > .profile-readiness-item { display: inline-flex; min-height: 28px; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; }
  #profilePageView .profile-readiness-grid > .profile-readiness-item + .profile-readiness-item { padding: 0; border: 0; }
  #profilePageView .profile-readiness-grid :is(span, strong) { color: #65736d; font-size: 11px; line-height: 1.35; }
  #profilePageView .profile-calibration-stack { display: grid; gap: 9px; margin: 0 0 11px; }
  #profilePageView .profile-group-heading { min-height: 0; margin: 4px 1px 0; }
  #profilePageView .profile-group-heading p { color: #263d35; font-size: 15px; }
  #profilePageView .profile-group-heading span { color: #68756e; font-size: 11px; }
  #profilePageView .profile-persona-card { margin: 0; padding: 11px 12px; }
  #profilePageView .profile-persona-card .profile-card-heading-row { margin-bottom: 5px; }
  #profilePageView .profile-persona-card .profile-card-eyebrow { color: #64716a; }
  #profilePageView .profile-persona-card .profile-feature-row { grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 10px; padding: 0; background: transparent; }
  #profilePageView .profile-persona-card .profile-feature-visual { width: 56px; height: 56px; border-radius: 11px; }
  #profilePageView .profile-persona-card .profile-feature-copy { min-width: 0; }
  #profilePageView .profile-persona-card .profile-feature-copy strong { color: #263d35; font-size: 14px; line-height: 1.3; }
  #profilePageView .profile-persona-card .profile-feature-copy em { color: #64716a; font-size: 11px; line-height: 1.45; }
  #profilePageView .profile-frequency-card { margin: 0; padding: 11px 12px; border-color: rgba(38, 61, 53, .11); background: #fffefa; }
  #profilePageView .profile-frequency-card .profile-card-eyebrow { color: #64716a; }
  #profilePageView .profile-frequency-summary { gap: 9px; }
  #profilePageView .profile-frequency-title,
  #profilePageView .profile-frequency-summary strong { color: #263d35; font-size: 14px; }
  #profilePageView .profile-frequency-summary p { color: #64716a; font-size: 11px; }
  #profilePageView .profile-frequency-card .profile-wide-action { width: auto; min-height: 40px; padding: 0 12px; border-radius: 9px; }
  #profilePageView .profile-coupons-panel,
  #profilePageView .profile-orders-panel { padding: 12px 14px; border-color: rgba(38, 61, 53, .11); color: #263d35; background: #fffefa; }
  #profilePageView .profile-coupons-panel:has(#profileCouponEmpty:not(.hidden)) { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding-block: 8px; }
  #profilePageView .profile-coupons-heading { margin: 0; }
  #profilePageView .profile-coupons-heading h3 { margin: 0; color: #263d35; font-size: 15px; }
  #profilePageView .profile-coupons-count { color: #62706a; font-size: 11px; }
  #profilePageView .profile-coupon-empty { margin: 6px 0 0; color: #69766f; font-size: 12px; }
  #profilePageView .profile-order-list,
  #profilePageView .profile-coupon-list { gap: 7px; margin-top: 8px; }
  #profilePageView .profile-order-row { border-color: rgba(38, 61, 53, .1); border-radius: 10px; background: #fffefa; }
  #profilePageView .profile-order-row .profile-order-summary { gap: 3px; padding: 9px 10px; }
  #profilePageView .profile-order-row .profile-order-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px; }
  #profilePageView .profile-order-row .profile-order-heading > span:first-child { display: block; min-width: 0; }
  #profilePageView .profile-order-row .profile-order-source { display: none; }
  #profilePageView .profile-order-row .profile-order-heading strong { display: block; max-width: 100%; color: #263d35; font-size: 13px; line-height: 1.35; }
  #profilePageView .profile-order-row .profile-order-state { flex: 0 0 auto; }
  #profilePageView .profile-order-row .profile-order-quickline { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; }
  #profilePageView .profile-order-row .profile-order-quickline > strong { grid-column: 1; color: #263d35; font-size: 13px; }
  #profilePageView .profile-order-row .profile-order-expand { grid-column: 2; grid-row: 1; color: #405c59; font-size: 11px; }
  #profilePageView .profile-order-row .profile-order-paid-at { grid-column: 1 / -1; grid-row: 2; color: #78837d; font-size: 10px; }
  #profilePageView .profile-order-row .profile-order-amounts { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 3px 8px; padding: 4px 0 0; }
  #profilePageView .profile-order-row .profile-order-amounts strong { color: #263d35; }
  #profilePageView .profile-settings-stack { margin: 0; border-color: rgba(38, 61, 53, .12); border-radius: 15px; background: #fffefa; }
  #profilePageView .profile-settings-disclosure > summary,
  #profilePageView .profile-support-disclosure > summary { min-height: 60px; padding: 10px 14px; }
  #profilePageView .profile-settings-body,
  #profilePageView .profile-support-body { padding: 0 14px 12px; }
  #profilePageView .profile-security-card,
  #profilePageView .profile-support-card { margin: 0; }

  .primary-btn,
  #activityView .activity-primary-btn,
  #eventHubRoot .event-btn.primary,
  #eventMyEventsRoot .event-btn.primary,
  #eventHubModal .event-btn.primary,
  #renewalView .event-btn.primary,
  #profilePageView .profile-wide-action,
  .modal-backdrop .primary-btn {
    border-color: var(--hz-accent);
    color: var(--hz-accent-ink);
    background: var(--hz-accent);
    box-shadow: none;
  }

  .primary-btn:active,
  #activityView .activity-primary-btn:active,
  .modal-backdrop .primary-btn:active { transform: scale(.985); }

  :is(.modal-backdrop, #eventHubModal, .deepsea-share-dialog, .deepsea-poster-dialog, .deepsea-surface-dialog, .dinner-ux-exit) :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select),
  #eventHubRoot .hz-module-dialog :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
    min-height: 44px;
    font-size: 16px;
    line-height: 1.4;
    color-scheme: light;
  }

  .modal-backdrop:not(.hidden) {
    align-items: center;
    justify-items: center;
    padding: max(10px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
    overflow: hidden;
    overscroll-behavior: contain;
    background: rgba(24, 38, 35, .42);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  #editProfileModal {
    --pc-teal: var(--hz-accent-ink);
    --pc-mint: var(--hz-accent-soft);
    --pc-line: rgba(38, 61, 53, .16);
  }

  #editProfileModal .edit-profile-modal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-content: start;
    column-gap: 12px;
  }

  #editProfileModal .edit-profile-modal > h2 { grid-row: 1; grid-column: 1; align-self: center; margin: 0; }
  #editProfileModal .edit-profile-modal > #closeEditProfileModal { position: static; grid-row: 1; grid-column: 2; margin: 0; justify-self: end; }
  #editProfileModal .edit-profile-modal > p:first-of-type { grid-row: 2; grid-column: 1 / -1; max-width: none; margin-top: 8px; }
  #editProfileModal #editProfileForm { grid-row: 3; grid-column: 1 / -1; }

  .modal-backdrop:not(.hidden) > :is(.report-modal, .edit-profile-modal, .portrait-modal, .persona-modal-card, .activity-signup-sheet, .buddy-pref-sheet, .topic-pick-sheet, .post-detail-sheet, .share-preview-modal, .portrait-image-preview-card, .non-campus-gate, .login-modal-card, .radar-editor-sheet, .my-dinner-sheet, .schools-modal, .unlock-modal, .first-join-modal, .captcha-modal-card, .avatar-modal-card, .letter-modal, .policy-modal, .support-ticket-sheet, .chat-ended-card) {
    box-sizing: border-box;
    width: min(100%, 520px);
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px);
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(38, 61, 53, .14);
    border-radius: 18px;
    color: #263d35;
    background: #fffefa;
    box-shadow: 0 12px 34px rgba(28, 43, 38, .16);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .modal-backdrop :is(.report-modal, .edit-profile-modal, .buddy-pref-sheet, .radar-editor-sheet, .activity-signup-sheet, .topic-pick-sheet, .my-dinner-sheet, .login-modal-card, .persona-modal-card) :is(h1, h2, h3) {
    color: #263d35;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .modal-backdrop .modal-close,
  .modal-backdrop .share-preview-close-btn,
  .modal-backdrop [data-close],
  #eventHubModal .event-modal-close,
  #eventHubRoot .hz-module-dialog [data-hz-close],
  .deepsea-share-dialog .deepsea-dialog-close,
  .deepsea-poster-dialog .deepsea-dialog-close {
    display: inline-grid;
    box-sizing: border-box;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    place-items: center;
    border: 1px solid rgba(38, 61, 53, .12);
    border-radius: 12px;
    color: #52635b;
    background: #fffefa;
    font-size: 20px;
    line-height: 1;
    touch-action: manipulation;
  }

  :is(#avatarModal, #phoneBindModal, #campusBindModal, #changePasswordModal, #editProfileModal, #supportTicketModal) .modal-close {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  :is(#editProfileModal, #changePasswordModal, #supportTicketModal) .modal-close {
    position: sticky;
    top: 0;
    right: 0;
    left: auto;
    display: grid;
    margin: 0 0 -44px auto;
    justify-self: end;
    place-items: center;
  }

  #editProfileModal #editProfileForm {
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
    padding-bottom: 12px;
  }

  #editProfileModal #editProfileForm > button[type="submit"] {
    position: static;
    inset: auto;
    margin-top: 12px;
  }

  .modal-backdrop :is(.primary-btn, .secondary-btn, .event-btn, .buddy-pref-confirm-btn, .modal-actions button) {
    min-height: 44px;
    border-radius: 10px;
    box-shadow: none;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
    touch-action: manipulation;
  }

  .modal-backdrop .primary-btn,
  #eventHubModal .event-btn.primary,
  #eventHubRoot .hz-module-dialog .event-btn.primary {
    border-color: var(--hz-accent);
    color: var(--hz-accent-ink);
    background: var(--hz-accent);
  }

  .modal-backdrop .modal-actions { gap: 8px; }
  .modal-backdrop .modal-actions :is(.primary-btn, .secondary-btn) { min-width: 0; padding-inline: 10px; }

  .modal-backdrop :is(.chip.selected, .pref-chip.selected, .choice-btn.selected, .choice-btn[aria-pressed="true"], .event-option.selected, .event-choice.selected) {
    border-color: var(--hz-accent);
    color: var(--hz-accent-ink);
    background: var(--hz-accent-soft);
    box-shadow: inset 0 0 0 1px rgba(87, 183, 183, .14);
  }

  #editProfileModal #editProfileForm .chip.selected {
    border-color: var(--hz-accent);
    color: var(--hz-accent-ink);
    background: var(--hz-accent-soft);
    box-shadow: none;
  }

  .modal-backdrop .ios-select-menu button.selected,
  .modal-backdrop .ios-select-menu button:hover {
    border-color: rgba(87, 183, 183, .38);
    color: var(--hz-accent-ink);
    background: var(--hz-accent-soft);
  }

  .modal-backdrop :is(.chip, .pref-chip, .choice-btn, .event-option, .event-choice):disabled,
  .modal-backdrop button:disabled { opacity: .52; cursor: not-allowed; }

  #eventHubModal.event-modal-backdrop:not(.hidden) { display: grid; align-items: end; padding: 0; }
  #eventHubModal.event-modal-backdrop:not(.hidden) .event-modal { width: 100%; max-width: none; max-height: calc(100dvh - env(safe-area-inset-top, 0px)); overflow: auto; border-radius: 18px 18px 0 0; background: #fffefa; }
  #eventHubModal.event-modal-backdrop:not(.hidden).event-detail-open { align-items: center; padding: 10px; }
  #eventHubModal.event-modal-backdrop:not(.hidden).event-detail-open .event-modal { max-height: calc(100dvh - 20px); border-radius: 18px; }
  #eventHubModal .event-modal-head,
  #eventHubModal .event-detail-hero { background: #fffefa; }
  #eventHubModal .event-form-actions,
  #eventHubModal .event-detail-actions { background: #fffefa; backdrop-filter: none; -webkit-backdrop-filter: none; }

  #eventHubRoot .hz-module-dialog {
    width: calc(100vw - 20px);
    max-width: 520px;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px);
    padding: 16px;
    overflow: auto;
    border: 1px solid rgba(38, 61, 53, .14);
    border-radius: 18px;
    color: #263d35;
    background: #fffefa;
    box-shadow: 0 12px 34px rgba(28, 43, 38, .16);
  }

  #eventHubRoot .hz-module-dialog::backdrop { background: rgba(24, 38, 35, .42); backdrop-filter: none; -webkit-backdrop-filter: none; }
  #eventHubRoot .hz-module-dialog > header { background: #fffefa; }

  #renewalView.active {
    min-height: 100dvh;
    max-height: 100dvh;
    padding: max(14px, env(safe-area-inset-top, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px));
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .deepsea-share-dialog,
  .deepsea-poster-dialog {
    box-sizing: border-box;
    width: calc(100vw - 20px);
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px);
    padding: 18px 14px max(16px, env(safe-area-inset-bottom, 0px));
    border-color: rgba(38, 61, 53, .14);
    border-radius: 18px;
    color: #263d35;
    background: #fffefa;
    box-shadow: 0 12px 34px rgba(28, 43, 38, .16);
  }

  .deepsea-share-dialog::backdrop,
  .deepsea-poster-dialog::backdrop,
  .deepsea-surface-dialog::backdrop,
  .dinner-ux-exit::backdrop { background: rgba(24, 38, 35, .42); backdrop-filter: none; -webkit-backdrop-filter: none; }

  .deepsea-share-dialog .deepsea-dialog-close,
  .deepsea-poster-dialog .deepsea-dialog-close {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border: 1px solid rgba(38, 61, 53, .12);
    border-radius: 12px;
    color: #52635b;
    background: #fffefa;
    font-size: 20px;
    touch-action: manipulation;
  }

  .deepsea-share-dialog .deepsea-primary,
  .deepsea-surface-dialog .deepsea-primary,
  .deepsea-poster-dialog .deepsea-primary {
    border: 1px solid var(--hz-accent);
    border-radius: 10px;
    color: var(--hz-accent-ink);
    background: var(--hz-accent);
    box-shadow: none;
  }

  .deepsea-share-dialog .deepsea-secondary,
  .deepsea-surface-dialog .deepsea-secondary,
  .deepsea-poster-dialog .deepsea-secondary {
    border: 1px solid rgba(87, 183, 183, .35);
    border-radius: 10px;
    color: var(--hz-accent-ink);
    background: var(--hz-accent-soft);
  }

  .deepsea-surface-dialog {
    box-sizing: border-box;
    width: calc(100vw - 20px);
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px);
    border-color: rgba(38, 61, 53, .14);
    border-radius: 18px;
    color: #263d35;
    background: #fffefa;
    box-shadow: 0 12px 34px rgba(28, 43, 38, .16);
  }

  .deepsea-surface-nav { background: #fffefa; color: #263d35; }

  .post-detail-backdrop:not(.hidden) {
    box-sizing: border-box;
    padding: max(10px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
    overflow: hidden;
    background: rgba(24, 38, 35, .42);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .post-detail-backdrop:not(.hidden) > .post-detail-overlay {
    box-sizing: border-box;
    width: min(100%, 520px);
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px);
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(38, 61, 53, .14);
    border-radius: 18px;
    background: #fffefa;
    box-shadow: 0 12px 34px rgba(28, 43, 38, .16);
  }

  .dinner-ux-exit {
    box-sizing: border-box;
    width: calc(100vw - 20px);
    max-width: 520px;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px);
    overflow: auto;
    padding: 20px 16px max(16px, env(safe-area-inset-bottom, 0px));
    border-color: rgba(38, 61, 53, .14);
    border-radius: 18px;
    color: #263d35;
    background: #fffefa;
    box-shadow: 0 12px 34px rgba(28, 43, 38, .16);
  }

  .dinner-ux-exit-actions button { min-height: 44px; border-radius: 10px; }

  .hz-modal-close-icon {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .treehole-app.treehole-portal-root .treehole-ui-dialog-overlay {
    background: rgba(24, 38, 35, .42);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .treehole-app.treehole-portal-root .treehole-ui-dialog-content {
    border-color: rgba(38, 61, 53, .14);
    border-radius: 18px;
    color: #263d35;
    background: #fffefa;
    box-shadow: 0 12px 34px rgba(28, 43, 38, .16);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .treehole-app.treehole-portal-root .treehole-ui-dialog-title { color: #263d35; text-align: left; }

  .treehole-app.treehole-portal-root .treehole-close {
    display: grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    place-items: center;
    border: 1px solid rgba(38, 61, 53, .12);
    border-radius: 12px;
    color: #52635b;
    background: #fffefa;
    font-size: 0;
    touch-action: manipulation;
  }

  .treehole-app.treehole-portal-root .treehole-close .treehole-icon { width: 18px; height: 18px; }

  .treehole-app.treehole-portal-root .treehole-compose-sheet {
    height: calc(100dvh - max(14px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    padding-top: max(16px, env(safe-area-inset-top));
    overflow: hidden;
  }

  .treehole-app.treehole-portal-root .treehole-compose-inner {
    display: flex;
    height: 100%;
    min-height: 0;
    max-height: none;
    flex-direction: column;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .treehole-app.treehole-portal-root .treehole-compose-actions,
  .treehole-app.treehole-portal-root .treehole-echo-input { background: #fffefa; backdrop-filter: none; -webkit-backdrop-filter: none; }

  .treehole-app.treehole-portal-root .treehole-mobile-filter-sheet {
    padding-inline: 16px;
    border-color: rgba(38, 61, 53, .14);
    border-radius: 18px 18px 0 0;
    background: #fffefa;
  }

  .treehole-app.treehole-portal-root .treehole-filter-sheet-tab-list { background: #f3f6f3; }
  .treehole-app.treehole-portal-root .treehole-filter-sheet-tab-list [role="tab"] { min-height: 44px; }
  .treehole-app.treehole-portal-root .treehole-filter-sheet-tab-list [role="tab"][data-state="active"] { color: var(--hz-accent-ink); background: var(--hz-accent-soft); box-shadow: none; }
  .treehole-app.treehole-portal-root .treehole-filter-sheet-options { max-height: none; overflow: visible; }
  .treehole-app.treehole-portal-root .treehole-filter-option { min-height: 44px; }
  .treehole-app.treehole-portal-root .treehole-filter-option.selected { border-color: var(--hz-accent); color: var(--hz-accent-ink); background: var(--hz-accent-soft); }
  .treehole-app.treehole-portal-root .treehole-filter-sheet-actions { background: #fffefa; }
  .treehole-app.treehole-portal-root .treehole-filter-sheet-actions button { min-height: 44px; }
  .treehole-app.treehole-portal-root .treehole-filter-sheet-actions .treehole-filter-done,
  .treehole-app.treehole-portal-root .treehole-submit:not(.danger) { border-color: var(--hz-accent); color: var(--hz-accent-ink); background: var(--hz-accent); }
  .treehole-app.treehole-portal-root .treehole-submit:not(.danger):disabled { opacity: .52; }
  .treehole-app.treehole-portal-root .treehole-report-sheet :is(select, textarea),
  .treehole-app.treehole-portal-root :is(.treehole-compose-sheet, .treehole-detail) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { min-height: 44px; font-size: 16px; }

  #renewalView {
    --heartbeat-ink: #263d35;
    --heartbeat-muted: #64756c;
    --heartbeat-teal: var(--hz-accent);
    --heartbeat-teal-soft: var(--hz-accent-soft);
    --heartbeat-teal-line: rgba(87, 183, 183, .32);
    --heartbeat-line: rgba(38, 61, 53, .14);
    --heartbeat-paper: #fffefa;
  }

  #renewalView :is(.heartbeat-first-reveal-backdrop, .heartbeat-dialog-backdrop, .renewal-record-dialog-backdrop, .heartbeat-personality-image-backdrop, .heartbeat-redpacket-dialog-backdrop) {
    background: rgba(24, 38, 35, .42);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  #renewalView :is(.heartbeat-first-reveal-dialog, .renewal-record-dialog, .heartbeat-personality-image-dialog, .heartbeat-redpacket-dialog, .heartbeat-settings-dialog, .heartbeat-exit-dialog) {
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(38, 61, 53, .14);
    border-radius: 18px;
    background: #fffefa;
    box-shadow: 0 12px 34px rgba(28, 43, 38, .16);
  }

  #renewalView :is(.heartbeat-first-reveal-close, .renewal-record-dialog-close, .heartbeat-personality-image-close, .heartbeat-entry-close, .renewal-modal-close) {
    box-sizing: border-box;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 12px;
    border-color: rgba(38, 61, 53, .12);
    color: #52635b;
    background: #fffefa;
  }

  #renewalView :is(.renewal-primary, .heartbeat-redpacket-open) {
    border-color: var(--hz-accent);
    color: var(--hz-accent-ink);
    background: var(--hz-accent);
    box-shadow: none;
  }

  #renewalView :is(.renewal-primary, .heartbeat-redpacket-open):hover:not(:disabled) {
    border-color: var(--hz-accent-hover);
    color: var(--hz-accent-ink);
    background: var(--hz-accent-hover);
  }

  #renewalView .renewal-heartbeat-paired .heartbeat-visible-days button:is(.today, .is-selected),
  #renewalView .renewal-heartbeat .renewal-moods button.active {
    border-color: var(--hz-accent);
    color: var(--hz-accent-ink);
    background: var(--hz-accent-soft);
  }

  #renewalView :is(.renewal-record-dialog, .heartbeat-settings-dialog, .heartbeat-exit-dialog, .heartbeat-first-reveal-dialog, .heartbeat-personality-image-dialog) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    min-height: 44px;
    font-size: 16px;
  }

  :is(#tabBar, #eventHubRoot, #eventMyEventsRoot, #profilePageView, .modal-backdrop, #eventHubModal) :is(button, a, input, select, textarea):focus-visible {
    outline: 3px solid var(--hz-teal-700,var(--brand-deep,#2f7777));
    outline-offset: 2px;
  }
}

@media (max-width: 360px) {
  #eventHubRoot .hz-discovery-title-row { align-items: flex-start; }
  #eventHubRoot .hz-discovery-heading h1 { max-width: 225px; font-size: 25px; }
  #eventHubRoot .hz-discovery-title-row > button { padding-inline: 7px; font-size: 11px; }
  #eventHubRoot .hz-persona-strip.hz-deepsea { grid-template-columns: 44px minmax(0, 1fr) 58px; gap: 7px; padding: 10px; }
  #eventHubRoot .hz-persona-strip.hz-deepsea .hz-fish-stack { width: 44px; height: 44px; }
  #eventHubRoot .hz-persona-strip.hz-deepsea .hz-fish-stack img { width: 30px; height: 34px; }
  #eventHubRoot .hz-persona-strip.hz-deepsea > button { width: 58px; min-width: 58px; max-width: 58px; white-space: normal; }
  #profilePageView .profile-identity-panel { grid-template-columns: 46px minmax(0, 1fr); gap: 8px; }
  #profilePageView #profileAvatarSmall { width: 46px; height: 46px; }
  #profilePageView .profile-identity-heading > .profile-inline-action { min-width: 56px; padding: 0 6px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  #tabBar .tab,
  #eventHubRoot .hz-discovery-action,
  #eventMyEventsRoot .ma-item,
  .modal-backdrop :is(button, a, input, select, textarea),
  #eventHubModal :is(button, a, input, select, textarea) {
    scroll-behavior: auto;
    transition-duration: .01ms;
    animation-duration: .01ms;
    animation-iteration-count: 1;
  }

  #eventHubRoot .hz-discovery-action:active,
  #activityView .activity-primary-btn:active,
  .modal-backdrop .primary-btn:active { transform: none; }
}

/* Mobile follow-up: loaded exclusively by the phone entry. */
#eventHubRoot .hz-discovery-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; }
#eventHubRoot .hz-discovery-heading > div { display:contents; }
#eventHubRoot .hz-discovery-heading > div > p:first-child { grid-column:1/-1; margin:0; }
#eventHubRoot .hz-discovery-heading h1 { grid-column:1; grid-row:2; margin:0; }
#eventHubRoot .hz-discovery-heading > button { grid-column:2; grid-row:2; margin:0; min-height:40px; padding:8px 12px; font-size:13px; white-space:nowrap; }
#eventHubRoot .hz-discovery-heading > div > p:last-child { grid-column:1/-1; margin:0; font-size:12px; line-height:1.5; font-weight:400; }
#eventHubRoot .hz-persona-strip.hz-deepsea { grid-template-columns:50px minmax(0,1fr); gap:12px; }
#eventHubRoot .hz-persona-strip.hz-deepsea > button { grid-column:1/-1; width:100%; min-width:0; max-width:none; min-height:44px; display:flex; justify-content:space-between; align-items:center; padding:10px 14px; white-space:normal; border-radius:12px; background:#57b7b7; color:#173c3c; font-size:14px; line-height:1.4; }
#profilePageView .profile-hero-heading > div:last-child { display:grid; gap:12px; }
#profilePageView .profile-hero-heading .profile-kicker { margin:0; font-size:10px; line-height:16px; letter-spacing:.09em; font-weight:400; }
#profilePageView .profile-hero .match-heading { margin:0; font-size:clamp(25px,6.8vw,28px); line-height:1.28; letter-spacing:-.035em; }
#profilePageView .profile-hero .page-subtitle { margin:0; font-size:12px; line-height:1.5; font-weight:400; }
#communityView .treehole-compose-header { display:none; }
#communityView .treehole-app { padding-bottom:190px; }
#communityView .treehole-quick-compose { position:fixed; z-index:99; bottom:calc(67px + env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%); width:min(100%,430px); box-sizing:border-box; padding:8px 12px 10px; background:#fffefa; border-top:1px solid #dce7e1; }
#communityView .treehole-quick-meta { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; font-size:10px; color:#63736d; }
#communityView .treehole-quick-meta button { border:0; padding:4px 8px; background:transparent; color:#286d6d; }
#communityView .treehole-quick-row { display:flex; align-items:flex-end; gap:8px; }
#communityView .treehole-quick-row textarea { flex:1; min-width:0; box-sizing:border-box; height:44px; min-height:44px; max-height:110px; resize:vertical; padding:10px 12px; border:1px solid #c8dcda; border-radius:12px; background:#f5f8f5; font:inherit; font-size:16px; line-height:22px; }
#communityView .treehole-quick-row button { min-height:44px; padding:0 16px; border:0; border-radius:12px; background:#57b7b7; color:#173c3c; font-weight:600; }
#communityView .treehole-quick-row button:disabled { opacity:.45; }
#communityView .treehole-quick-row textarea:focus-visible { outline:2px solid #57b7b7; outline-offset:2px; }

#myEventsView [data-open-messages], #profileHeaderNotificationBtn, #communityView .treehole-notification-btn { display:none!important; }
.mobile-notice-dialog { width:min(340px,calc(100vw - 32px)); box-sizing:border-box; border:1px solid #dce7e1; border-radius:20px; padding:20px; background:#fffefa; color:#173c3c; }
.mobile-notice-dialog::backdrop { background:rgba(23,60,60,.3); }
.mobile-notice-dialog header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.mobile-notice-dialog h2 { margin:0; font-size:22px; }
.mobile-notice-dialog button { min-height:44px; border:1px solid #c8dcda; border-radius:12px; background:#e6f3f1; color:#173c3c; padding:10px 14px; font:inherit; }
.mobile-notice-dialog > button { display:block; width:100%; margin-top:10px; text-align:left; }
#eventHubRoot [data-mobile-notifications] .hz-icon { width:22px; height:22px; }

/* The fallback mobile activity header inherits .top-bar's negative side
   margins, while active mobile views have no compensating horizontal padding.
   Keep its background aligned with the phone canvas and the title readable. */
#activityView.active .activity-page-header {
  margin-left: 0;
  margin-right: 0;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}