/* HHN Site Kit: the Porch on phones (1.10.92).
   Loaded with media="(max-width: 720px)" and wrapped in the same query, so nothing here can reach the computer view.
   The computer view is porch.css; this file only takes away or re-shapes for small screens. */
@media (max-width: 720px) {

  /* ---- every Porch page: the blue band carries the title only ---- */
  .hhn-porch .phead { padding-top: 18px; padding-bottom: 16px; }
  .hhn-porch .phead-text p { display: none; }
  .hhn-porch .phead-text h1 { margin-bottom: 0; }
  .hhn-porch .phead-text .eyebrow { margin-bottom: 4px; }

  /* ---- the feed: band, search, Start here, post box, posts; the side cards live under More ---- */
  .hhn-porch.hhn-porchpage .wrap > .side { display: none; }

  /* Start here, one line above the post box (shown only while steps remain; opens the setup guide) */
  .hhn-porch .start-strip { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 11px 14px; background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--light); border-radius: 10px; font-family: var(--sans); font-size: 14px; color: var(--navy); text-decoration: none !important; }
  .hhn-porch .start-strip b { font-weight: 600; }
  .hhn-porch .start-strip span { color: #555; }
  .hhn-porch .start-strip .go { margin-left: auto; color: var(--blue); font-weight: 600; white-space: nowrap; }

  /* the post box is one line until it is tapped */
  .hhn-porch .card.composer:not(.open) #whats-new { height: 46px !important; min-height: 0 !important; overflow: hidden; }
  .hhn-porch .card.composer:not(.open) .compose-bar,
  .hhn-porch .card.composer:not(.open) .attach:empty,
  .hhn-porch .card.composer:not(.open) > p.small,
  .hhn-porch .card.composer:not(.open) > .small,
  .hhn-porch .card.composer:not(.open) .guide { display: none; }
  .hhn-porch .card.composer:not(.open) { padding-bottom: 14px; }

  /* posts: every reaction on show (1.10.193: they used to fold behind a dots button on phones); no "No replies yet" */
  .hhn-porch .post .rx { position: relative; flex-wrap: wrap; gap: 6px; }
  .hhn-porch .post .rx .r { padding: 4px 9px 4px 7px; }
  .hhn-porch .post .rx .r .l { display: none; }
  .hhn-porch .post .acts .count.zero { display: none; }
  /* replies fold under the count ("3 replies"); tap to open, tap again to fold. Replying opens them. */
  .hhn-porch .post:not(.replies-open) > .replies { display: none; }
  .hhn-porch .post .acts .count:not(.zero) { color: var(--blue); font-weight: 600; cursor: pointer; padding: 6px 2px; }
  .hhn-porch .post .acts .count:not(.zero)::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-right: 1.5px solid var(--blue); border-bottom: 1.5px solid var(--blue); transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
  .hhn-porch .post.replies-open .acts .count:not(.zero)::after { transform: translateY(2px) rotate(225deg); }
  .hhn-porch .post .acts .togglereplies { display: none; }

  /* ---- Calendar: the list, with Add an event as a small button beside the title; the side cards (a second copy of
     the HHN events and a second Add an event) are hidden ---- */
  .hhn-porch.hhn-calpage .wrap > aside { display: none; }
  .hhn-porch .cal .cal-head { position: relative; display: block !important; padding-right: 0; }
  .hhn-porch .cal .cal-head h2 { margin-bottom: 12px !important; padding-right: 130px; white-space: normal; font-size: 20px; line-height: 1.2; } /* 1.10.189: "November 2026" wraps instead of running under the Add button */
  .hhn-porch .cal .cal-head .caladd { position: absolute; top: -4px; right: 0; flex: none !important; width: auto !important; padding: 7px 12px !important; font-size: 13px !important; background: #fff !important; color: var(--blue) !important; border: 1px solid var(--border) !important; border-radius: 999px; box-shadow: none; }
  .hhn-porch .cal .cal-head .caladd:hover { background: var(--cream) !important; }
  .hhn-porch .cal .cal-head .calsearch { flex: 1 1 100%; min-width: 0; height: 42px; }

  /* ---- Members: one tight list (hairlines, not cards), the side cards hidden ---- */
  .hhn-porch.hhn-dirpage .wrap > .side { display: none; }
  .hhn-porch.hhn-dirpage .fbar { gap: 8px; margin-bottom: 12px; }
  .hhn-porch.hhn-dirpage .fbar { flex-wrap: nowrap; }
  .hhn-porch.hhn-dirpage .fbar input { min-width: 0 !important; width: auto !important; flex: 1 1 0 !important; padding: 10px 12px; }
  .hhn-porch.hhn-dirpage .fbar select { flex: 0 0 128px !important; width: 128px !important; min-width: 0 !important; max-width: 128px; padding: 10px 26px 10px 10px; height: auto; line-height: 1.3; }
  .hhn-porch.hhn-dirpage .fbar .small { flex: 0 0 auto; }
  .hhn-porch.hhn-dirpage .dir { display: block; background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
  .hhn-porch.hhn-dirpage .pc { border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 10px 14px; gap: 12px; align-items: center; }
  .hhn-porch.hhn-dirpage .pc:first-child { border-top: 0; }
  .hhn-porch.hhn-dirpage .pc .av { width: 38px !important; height: 38px !important; font-size: 12px; flex: none; }
  .hhn-porch.hhn-dirpage .pc b { font-size: 16px; line-height: 1.25; }
  .hhn-porch.hhn-dirpage .pc small { font-size: 12.5px; line-height: 1.35; }
  .hhn-porch.hhn-dirpage .pc small:empty { display: none; }
  .hhn-porch.hhn-dirpage .pc.hid { display: none; }
  .hhn-porch.hhn-dirpage .dirmore { display: block !important; width: 100%; margin-top: 12px; text-align: center; padding: 12px; }
  .hhn-porch.hhn-dirpage .dirmore[hidden] { display: none !important; }

  /* ---- no zoom-in on tap: iPhones zoom the page when a field's text is smaller than 16px, and the page stays zoomed ---- */
  .hhn-porch input:not([type=checkbox]):not([type=radio]):not([type=file]), .hhn-porch textarea, .hhn-porch select,
  .hhn-porch .wiz input, .hhn-porch .wiz textarea, .hhn-porch .hhn-modal input, .hhn-porch .hhn-modal textarea, .hhn-porch .hhn-modal select { font-size: 16px !important; }

  /* ---- the setup guide and pop-up forms: the whole sheet scrolls, and the bottom bar and helper step aside ---- */
  .hhn-porch .wiz-shade { align-items: flex-start; padding: 12px 10px calc(40px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; z-index: 99998; }
  .hhn-porch .wiz { max-height: none; overflow: visible; }
  body.hhn-wiz-open .pbottom, body.hhn-wiz-open .hhn-help, body.hhn-wiz-open .hhn-totop, body.hhn-wiz-open .pmore-sheet,
  body.hhn-modal-open .hhn-help { display: none !important; }
  .hhn-porch .hhn-modal { padding: 12px 10px calc(40px + env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; z-index: 99998; }
  .hhn-porch .hhn-modal-box { max-height: none; overflow: visible; }

  /* setup guide, Your team: one card per person with captions; one empty card to start, more on "Add another person" */
  .hhn-porch .wiz .wpeople { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
  .hhn-porch .wiz .person { display: block; position: relative; border: 1px solid var(--border); border-radius: 12px; padding: 14px 14px 12px; margin: 0; background: #fff; }
  .hhn-porch .wiz .person.onporch { background: #FBFAF8; }
  .hhn-porch .wiz .person .pf { display: block; margin-top: 10px; }
  .hhn-porch .wiz .person .pf:first-of-type { margin-top: 0; }
  .hhn-porch .wiz .person .pf > span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6a6a6a; margin: 0 0 4px 2px; }
  .hhn-porch .wiz .person .pf input { width: 100%; margin: 0; }
  .hhn-porch .wiz .person .ptag { position: absolute; top: -9px; right: 12px; background: #e7f0f7; }
  .hhn-porch .wiz .person:not(.onporch) .ptag.new { display: inline-block; background: var(--cream); color: #6a6a6a; border: 1px solid var(--border); }
  .hhn-porch .wiz .person:not(.onporch):not(.added):not(.phead) ~ .person:not(.onporch):not(.added):not(.phead) { display: none; }
  .hhn-porch .wiz .person.phead { display: none; }
  .hhn-porch .wiz .wpeople + p.small { margin-top: 12px; }
}