/* B08-HF02 — mobile overflow safety + Visual Platform responsive guardrails.
   Kept separate from site.css so the stable public theme is not overwritten. */
html, body { max-width: 100%; }

/* Grid/flex children are allowed to shrink below their content's intrinsic width. */
.hero > *,
.search,
.search input,
.preview,
.visual-hero,
.visual-card,
.pack { min-width: 0; }

.search { width: 100%; max-width: 100%; }
.search input { width: 100%; min-width: 0; }
.search .btn,
.search button { flex: 0 0 auto; }
.preview { width: 100%; max-width: 100%; overflow: hidden; }

/* Do not let long labels, URLs, or translated strings create horizontal page scroll. */
.hero p,
.preview p,
.visual-hero p,
.visual-card p,
.pack p { overflow-wrap: anywhere; }

@media (max-width: 850px) {
  .hero { width: 100%; max-width: 100%; }
  .hero > div,
  .preview { width: 100%; max-width: 100%; }

  .preview .emoji {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .08em .18em;
    max-width: 100%;
    font-size: clamp(54px, 18vw, 80px);
    line-height: 1.15;
    white-space: normal;
  }
}

@media (max-width: 520px) {
  .hero { padding-left: 4%; padding-right: 4%; }
  .search { padding: 8px; gap: 6px; border-radius: 15px; }
  .search input { padding: 13px 8px; font-size: 16px; }
  .search .btn,
  .search button { padding: 13px 16px; }
  .preview { padding: 24px 20px; }

  /* B08 /visual/ cards stay entirely inside the viewport. */
  .visual-hero { padding-left: 4px; padding-right: 4px; }
  .visual-grid,
  .pack-row { width: 100%; max-width: 100%; }
  .visual-card,
  .pack { width: 100%; max-width: 100%; }
}

/* B08A — command bar collision fix (Kaomoji + long localized labels) */
.tool-commandbar{overflow:hidden}
.tool-nav-chip{grid-template-columns:42px minmax(0,1fr);overflow:hidden;isolation:isolate}
.tool-nav-chip>span{max-width:42px;overflow:hidden;white-space:nowrap;line-height:1;position:relative;z-index:1}
.tool-nav-chip>b,.tool-nav-chip>small{min-width:0;position:relative;z-index:2}
.tool-nav-chip:nth-child(3)>span{font-size:13px;letter-spacing:-.06em}
html[dir="rtl"] .tool-nav-chip{grid-template-columns:42px minmax(0,1fr)}
@media(max-width:640px){
  .tool-commandbar{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
  .tool-nav-chip{flex:0 0 190px;min-width:190px;max-width:190px}
}


/* B08A-HF01 — hard fix for Tools command-card collision. */
.tool-commandbar{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;overflow:visible!important}
.tool-commandbar .tool-nav-chip{display:grid!important;grid-template-columns:52px minmax(0,1fr)!important;grid-template-rows:auto auto!important;column-gap:12px!important;align-items:center!important;min-width:0!important;overflow:hidden!important}
.tool-commandbar .tool-nav-chip>span{grid-row:1/3!important;width:52px!important;height:52px!important;max-width:52px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;white-space:nowrap!important;font-size:25px!important;line-height:1!important}
.tool-commandbar .tool-nav-chip:nth-child(3)>span{font-size:11px!important;letter-spacing:-.08em!important;transform:none!important}
.tool-commandbar .tool-nav-chip>b,.tool-commandbar .tool-nav-chip>small{grid-column:2!important;min-width:0!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;margin:0!important}
.tool-commandbar .tool-nav-chip>b{grid-row:1!important;align-self:end!important}
.tool-commandbar .tool-nav-chip>small{grid-row:2!important;align-self:start!important}

/* Public mobile navigation */
.mobile-nav-toggle,.mobile-nav-drawer,.mobile-nav-overlay{display:none}
@media(max-width:760px){
  .top{display:flex!important;align-items:center!important;gap:10px!important;padding-left:16px!important;padding-right:14px!important}
  .top .desktop-nav{display:none!important}
  .top>.language-menu{margin-left:auto}
  .mobile-nav-toggle{display:inline-flex;width:44px;height:44px;border:1px solid #dfe7f0;border-radius:12px;background:#fff;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0;cursor:pointer;flex:0 0 auto}
  .mobile-nav-toggle span{display:block;width:20px;height:2px;background:#173765;border-radius:4px}
  .mobile-nav-overlay{position:fixed;inset:0;background:rgba(12,25,45,.42);z-index:998}
  .mobile-nav-drawer{display:flex;position:fixed;top:0;right:0;bottom:0;width:min(88vw,360px);background:#fff;z-index:999;box-shadow:-18px 0 42px rgba(13,36,66,.18);transform:translateX(105%);transition:transform .22s ease;flex-direction:column;padding:18px;overflow-y:auto}
  .mobile-nav-open .mobile-nav-overlay{display:block}
  .mobile-nav-open .mobile-nav-drawer{transform:translateX(0)}
  .mobile-nav-open{overflow:hidden}
  .mobile-nav-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:15px;border-bottom:1px solid #e8edf4}
  .mobile-nav-head .brand{font-size:27px}
  .mobile-nav-close{width:40px;height:40px;border:0;border-radius:10px;background:#f2f6fb;font-size:28px;line-height:1;color:#52627a}
  .mobile-nav-links{display:grid!important;gap:8px!important;padding:16px 0!important}
  .mobile-nav-links a{display:flex!important;align-items:center!important;gap:12px!important;min-height:50px!important;padding:0 13px!important;border:1px solid #e7edf5!important;border-radius:12px!important;text-decoration:none!important;color:#21324c!important;font-weight:750!important;background:#fff!important}
  .mobile-nav-links a span{width:30px;text-align:center;font-size:19px}
  .mobile-language-title{font-size:12px;font-weight:800;color:#6a7890;text-transform:uppercase;letter-spacing:.04em;margin:6px 0 10px}
  .mobile-language-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .mobile-language-grid a{display:flex;align-items:center;justify-content:center;min-height:42px;padding:8px;border:1px solid #e4eaf2;border-radius:10px;text-decoration:none;color:#43536b;background:#f9fbfd;font-size:13px;font-weight:650}
  .mobile-language-grid a[aria-current="page"]{background:#173765;color:#fff;border-color:#173765}
  .tool-commandbar{display:flex!important;overflow-x:auto!important;overflow-y:hidden!important;gap:10px!important;padding-bottom:4px!important;scroll-snap-type:x proximity}
  .tool-commandbar .tool-nav-chip{flex:0 0 220px!important;min-width:220px!important;max-width:220px!important;scroll-snap-align:start}
}
@media(max-width:430px){
  .top>.language-menu summary{padding-left:10px!important;padding-right:10px!important;font-size:14px!important}
  .tool-commandbar .tool-nav-chip{flex-basis:205px!important;min-width:205px!important;max-width:205px!important}
}


/* B08B — compact mobile menu. Four items use roughly 30% of the previous visual footprint. */
@media(max-width:760px){
  .mobile-nav-links{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    padding:10px 0!important;
    align-content:start!important;
  }
  .mobile-nav-links a{
    min-height:30px!important;
    height:30px!important;
    padding:0 7px!important;
    gap:5px!important;
    border-radius:8px!important;
    font-size:11px!important;
    line-height:1!important;
    font-weight:700!important;
    justify-content:flex-start!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .mobile-nav-links a span{
    width:16px!important;
    min-width:16px!important;
    font-size:13px!important;
    line-height:1!important;
  }
}

/* B08B-HF01 — compact floating mobile menu: white panel hugs menu content. */
@media(max-width:760px){
  .mobile-nav-drawer{
    top:70px!important; right:10px!important; bottom:auto!important;
    width:min(300px,calc(100vw - 20px))!important; height:auto!important;
    min-height:0!important; max-height:calc(100vh - 90px)!important;
    padding:9px!important; border-radius:14px!important;
    box-shadow:0 16px 40px rgba(13,36,66,.22)!important;
    overflow:auto!important;
  }
  .mobile-nav-head{padding:0 0 7px!important;min-height:0!important}
  .mobile-nav-head .brand{display:none!important}
  .mobile-nav-close{margin-left:auto!important;width:28px!important;height:28px!important;border-radius:8px!important;font-size:20px!important}
  .mobile-nav-links{padding:0!important;margin:0!important}
}