/* GitHub #82 round 5 (2026-10-27): Home at 200% zoom / very narrow screens (under 300 CSS px = a 360-600 px phone at 200%).
   Reflow instead of squeezing: one column, icon beside the words, words never split letter by letter,
   Morning News above Emergency 911 (no overlap), header buttons wrap instead of running off the screen.
   Loaded LAST in index.html so it wins over earlier Home styles. Normal phone widths are not changed,
   except the Home header: its buttons may wrap to a second line instead of running off a narrow screen. */
#hdr-home{flex-wrap:wrap;row-gap:6px}
#hdr-home .hdr-right{flex-wrap:wrap;justify-content:flex-end;min-width:0;margin-left:auto;row-gap:6px}
/* What's New tiles: long Chinese titles stay inside the tile at every width (zh 360 px ran 7 px past the edge) */
#s-home .wn-tile .t{min-width:0;max-width:100%;white-space:normal}
#s-home .wn-tile .t b,#s-home .wn-tile .t small{white-space:normal;overflow-wrap:break-word}
@media (max-width:300px){
  #hdr-home{padding-left:8px;padding-right:8px}
  #hdr-home .brand{flex:1 1 100%}
  #hdr-home .hdr-right{flex:1 1 100%;justify-content:flex-start;gap:6px}
  #hdr-home .hdr-right .chip{min-width:44px;min-height:44px}
  .shell .nk3-w .nk3{grid-template-columns:1fr!important}
  .shell .nk3-w .nk3 a{font-size:15px!important;min-height:44px!important;word-break:keep-all!important;overflow-wrap:normal!important}

  #s-home.h3 *{word-break:keep-all;overflow-wrap:break-word}
  #s-home.h3 .h3-top,#s-home.h3 .h3-pair,#s-home.h3 .h3-ent,#s-home.h3 .a5-row,#s-home.h3 .a5-home{grid-template-columns:minmax(0,1fr)!important}
  #s-home.h3 .h3-top>*,#s-home.h3 .h3-top .a5-gm{min-width:0;width:100%}
  #s-home.h3 .a5-gm{justify-content:flex-start;gap:8px;padding:8px 10px;min-height:56px}
  #s-home.h3 .a5-gm span{position:static!important;width:auto!important;min-width:0}
  #s-home.h3 .a5-gm b{font-size:1.05rem;line-height:1.15}
  #s-home.h3 a.emg{justify-content:flex-start;gap:8px;padding:8px 10px;min-height:56px}
  #s-home.h3 a.emg .emg-ic{font-size:1.4rem}
  #s-home.h3 a.emg .emg-tx{flex-direction:column;align-items:flex-start;width:auto}
  #s-home.h3 a.emg .emg-l{font-size:.85rem!important;line-height:1.1}
  #s-home.h3 a.emg .emg-n{font-size:1.5rem!important;line-height:1.05}

  /* the 9 picture tiles become one list: picture left, word right */
  #s-home.h3 .tiles{grid-template-columns:minmax(0,1fr)!important;gap:8px;padding-left:12px;padding-right:12px}
  #s-home.h3 .tiles .tile,#s-home.h3 .a5-tile,#s-home.h3 .h3-pair .tile{flex-direction:row!important;justify-content:flex-start!important;align-items:center;gap:8px;min-height:56px!important;height:auto!important;padding:6px 8px!important;text-align:left}
  #s-home.h3 .tiles .tile .ic,#s-home.h3 .a5-tile .i,#s-home.h3 .h3-pair .tile .ic{flex:0 0 auto;margin:0!important;font-size:1.3rem!important}
  #s-home.h3 .tiles .tile span:not(.ic),#s-home.h3 .a5-tile .l,#s-home.h3 .h3-pair .tile span:not(.ic){position:static!important;width:auto!important;min-width:0;flex:1 1 auto;font-size:.95rem!important;line-height:1.2;text-align:left;hyphens:auto!important;-webkit-hyphens:auto!important}
  #s-home.h3 .tiles .tile b{font-size:1rem!important}

  /* Ask Aimee: face left, words right (letters no longer stack) */
  #s-home.h3 .aimee-banner{flex-direction:row!important;align-items:center;gap:10px;min-height:64px;height:auto!important;padding:8px 10px!important}
  #s-home.h3 .aimee-banner .aimee-face{position:static!important;flex:0 0 auto}
  #s-home.h3 .aimee-banner .aimee-txt{position:static!important;flex:1 1 auto;min-width:0;width:auto!important;height:auto!important;writing-mode:horizontal-tb!important;flex-direction:column;align-items:flex-start}
  #s-home.h3 .aimee-banner .aimee-txt b,#s-home.h3 .aimee-banner .aimee-txt small{width:auto!important;height:auto!important;font-size:1rem!important;line-height:1.2}

  /* wide buttons: text gets the room, arrow stays inside */
  #s-home.h3 .lvc-homebtn,#s-home.h3 .lvm-homebtn{gap:8px;padding:8px 10px;margin-left:12px;margin-right:12px;width:auto}
  #s-home.h3 .lvc-homebtn .t,#s-home.h3 .lvm-homebtn .t{min-width:0;width:auto!important}
  #s-home.h3 .lvc-homebtn .ic,#s-home.h3 .lvm-homebtn .ic{font-size:1.4rem}
  #s-home.h3 .lvc-homebtn .chev,#s-home.h3 .lvm-homebtn .chev{flex:0 0 auto;font-size:1.4rem}
  #s-home.h3 .lvc-homebtn b,#s-home.h3 .lvm-homebtn b{font-size:1rem}
  #s-home.h3 .lvc-homebtn small,#s-home.h3 .lvm-homebtn small{font-size:.85rem}

  /* Senior Favorites and New today */
  #s-home.h3 .sf-hhead,#s-home.h3 .wn-head{flex-wrap:wrap;gap:6px;min-height:0;height:auto}
  #s-home.h3 .sf-hhead>span:not(.ic):not(.chev),#s-home.h3 .wn-head .t{flex:1 1 0;min-width:0;width:auto!important}
  #s-home.h3 .sf-hhead .ic{width:auto;flex:0 0 auto;font-size:1.4rem}
  #s-home.h3 .sf-pins{grid-template-columns:minmax(0,1fr)!important}
  #s-home.h3 .sf-pin{flex-direction:row!important;justify-content:flex-start;align-items:center;gap:8px;min-height:52px;height:auto!important;flex-wrap:wrap}
  #s-home.h3 .sf-pin .ic{font-size:1.4rem!important}
  #s-home.h3 .sf-pin .t{width:auto!important;flex:1 1 0;min-width:0;text-align:left;font-size:1rem!important;hyphens:manual!important}
  #s-home.h3 .sf-pin .sf-prov{flex:1 1 100%;width:auto!important;text-align:left}
  #s-home.h3 #h3-mov .h3-mov-row{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:6px}
  #s-home.h3 #h3-mov .h3-mov-b{width:100%!important;min-height:48px;border-radius:12px!important}
  #s-home.h3 .h3-mov-b,#s-home.h3 .h3-trv-b{width:auto!important}
  #s-home.h3 .h3-mov-b b,#s-home.h3 .h3-trv-b b,#s-home.h3 .h3-trv-b span{position:static!important;width:auto!important}
  #s-home.h3 .wn-tile .t{min-width:0;width:auto!important;max-width:100%}
  #s-home.h3 .lvc-homebtn,#s-home.h3 .lvm-homebtn,#s-home.h3 .dy-homebtn{width:calc(100% - 24px)!important;box-sizing:border-box}
  #s-home.h3 .dy-homebtn{gap:8px;padding:8px 10px;margin-left:12px;margin-right:12px}
  #s-home.h3 .dy-homebtn>span:not(.ic):not(.chev){min-width:0;flex:1 1 auto;width:auto!important}
  #s-home.h3 .dy-homebtn b,#s-home.h3 .dy-homebtn small{white-space:normal}
  #s-home.h3 .dy-homebtn .chev{flex:0 0 auto}
  #s-home.h3 .aimee-banner .aimee-txt b,#s-home.h3 .aimee-banner .aimee-txt small{white-space:normal!important;max-width:100%}
  /* Neighbors & Connections / Real Estate Market / My Diary buttons: picture and arrow on the first line, words below at full width */
  #s-home.h3 .lvc-homebtn,#s-home.h3 .lvm-homebtn,#s-home.h3 .dy-homebtn{flex-wrap:wrap!important;justify-content:space-between}
  #s-home.h3 .lvc-homebtn .t,#s-home.h3 .lvm-homebtn .t,#s-home.h3 .dy-homebtn>span:not(.ic):not(.chev){order:3;flex:1 1 100%!important}
  /* heads with picture + words + arrow/close: picture and arrow on the first line, words get the full width below */
  #s-home.h3 .wn-head,#s-home.h3 .sf-hhead,#s-home.h3 .lg-hhead{flex-wrap:wrap!important;align-items:center;justify-content:space-between;height:auto!important}
  #s-home.h3 .wn-head .t,#s-home.h3 .sf-hhead>span:not(.ic):not(.chev),#s-home.h3 .lg-hhead .t{order:3;flex:1 1 100%!important;width:auto!important;min-width:0;text-align:left}
  #s-home.h3 .lg-face{width:48px!important;height:48px!important}
  /* A Day with Aimee (Lounge) on Home */
  #s-home.h3 .lg-sug,#s-home.h3 .lg-hfoot{grid-template-columns:minmax(0,1fr)!important}
  #s-home.h3 .lg-sug-it{grid-template-columns:minmax(0,1fr)!important}
  #s-home.h3 .lg-sug-it>*{min-width:0;max-width:100%}
  #s-home.h3 .lg-acts{display:grid!important;grid-auto-flow:row!important;grid-template-columns:minmax(0,1fr)!important;gap:6px}
  #s-home.h3 .lg-btn{min-width:0;max-width:100%;width:100%;height:auto;min-height:44px;white-space:normal}
  #s-home.h3 .lg-btn .ic{position:static!important}
  /* same list layout when A+ (html.bigfs) is also on */
  html.bigfs #s-home.h3 .tiles{grid-template-columns:minmax(0,1fr)!important}
  html.bigfs #s-home.h3 .tiles .tile,html.bigfs #s-home.h3 .tiles .tile.big{grid-column:auto;flex-direction:row!important;justify-content:flex-start!important;font-size:1rem}
  html.bigfs #s-home.h3 .tiles .tile span:not(.ic),html.bigfs #s-home.h3 .a5-tile .l{overflow-wrap:normal;word-break:keep-all;hyphens:auto!important;-webkit-hyphens:auto!important}
  html.bigfs #s-home.h3 .a5-tile .l{font-size:.95rem!important}
  /* A+ and 200% together: picture on its own line so a whole word fits on one line */
  html.bigfs #s-home.h3 .tiles .tile,html.bigfs #s-home.h3 .a5-tile,html.bigfs #s-home.h3 .sf-pin{flex-wrap:wrap!important}
  html.bigfs #s-home.h3 .tiles .tile span:not(.ic),html.bigfs #s-home.h3 .a5-tile .l,html.bigfs #s-home.h3 .sf-pin .t{flex:1 1 100%!important}
  /* Korean "Major life events" bar: less side padding so the words get room */
  #s-home.h3 #h3-life,html.bigfs #s-home.h3 #h3-life{padding:10px 32px 10px 40px!important;width:calc(100% - 16px)}
}

/* #82 round 6 (2026-10-28, app b53): ported to the current b52 Home + these extra fixes found on b52 */
@media (max-width:300px){
  /* top photo: date left, temperature right, "Add to Home" becomes a dark button under the photo so nothing overlaps */
  #s-home.h3 .usenow-btn{position:static!important;transform:none!important;margin:6px auto 0;background:#16264F!important;font-size:15px!important;min-height:44px;padding:0 10px!important;max-width:100%;box-sizing:border-box;white-space:normal;text-align:center;line-height:1.1}
  #h56-wx .d{font-size:13px!important;white-space:normal}
  #h56-tmp .t{font-size:16px!important}#h56-tmp .r{font-size:12px!important}
  /* "Add LWVlife to your home screen?" hint: shown under the photo instead of covering the tiles */
  #a2hs-hint{position:static!important;margin:8px 0 0;line-height:1.3;flex-direction:column}
  #a2hs-hint button{width:100%;font-size:16px!important}
}

/* #82 round 6 / #37 ISS-0009: Daily Living rows (category rows, KoMeRiCa board cards, What's New mini tiles).
   All widths: words start at the left and may wrap, so the arrow and count badge stay inside the row. */
#s-living .row-link{text-align:left}
#s-living .row-link>span:not(.ic):not(.chev):not(.num){flex:1 1 auto;min-width:0;overflow-wrap:break-word}
#s-living .row-link .chev,#s-living .row-link .num{flex:0 0 auto}
#s-living .cinfo-card .row .txt{min-width:0}
#s-living .cinfo-card .row .cnt{flex:0 0 auto}
/* What's New mini tiles side by side only when there is room for the words */
@media (max-width:379px){#s-living .wn-row{grid-template-columns:minmax(0,1fr)}}
@media (max-width:479px){html.bigfs #s-living .wn-row{grid-template-columns:minmax(0,1fr)}}
@media (max-width:300px){
  #s-living .row-link,#s-living .cinfo-card .row{flex-wrap:wrap;justify-content:space-between;row-gap:4px;padding-left:8px;padding-right:8px}
  #s-living .row-link .ic{width:40px!important;height:40px!important;font-size:1.35rem!important}
  #s-living .row-link>span:not(.ic):not(.chev):not(.num),#s-living .cinfo-card .row .txt{order:3;flex:1 1 100%!important;width:auto!important;font-size:1rem;line-height:1.25;word-break:keep-all;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
  #s-living .cinfo-card .row .txt b,#s-living .cinfo-card .row .txt small{white-space:normal;max-width:100%}
  #s-living .cinfo-card .row .cnt em{font-size:.85rem}
  #s-living .wn-tile.sm{flex-wrap:wrap;justify-content:space-between}
  #s-living .wn-tile.sm .t{order:3;flex:1 1 100%;min-width:0}
  #s-living .wn-tile.sm .t b{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
}
/* Important contacts rows (name + phone number): the number moves under the name when both do not fit */
#s-living .row-link{min-width:0;max-width:100%;box-sizing:border-box}
#s-living .row-link:has(.num){flex-wrap:wrap}
#s-living .row-link:has(.num)>span:not(.ic):not(.chev):not(.num){flex:1 1 7.5em}
#s-living .row-link .num{margin-left:auto;white-space:nowrap}
@media (max-width:300px){
  #s-living .row-link>span:not(.ic):not(.chev):not(.num){overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
  #s-living .row-link .num{order:4;flex:1 1 100%;text-align:left;white-space:normal;font-size:1rem}
}
@media (max-width:300px){
  /* cards inside Daily Living give their rows more room */
  #s-living .card{padding-left:8px!important;padding-right:8px!important}
  #s-living .card .row-link{padding-left:6px;padding-right:6px}
}