/* The app menu as a sidebar (wide screens) and as the /menu page. */
:root{--sl-bp:1180px;}

/* ---- the menu itself: one panel, grouped rows ---- */
.sm{background:var(--white); border:1px solid var(--border-soft); border-radius:20px; padding:8px; display:flex; flex-direction:column; gap:2px;}
.sm-me{display:flex; align-items:center; gap:12px; padding:12px; border-radius:14px; background:var(--blue-tint); color:var(--navy); text-decoration:none;}
a.sm-me:hover{background:color-mix(in srgb, var(--blue) 22%, transparent);}
.sm-me > svg{width:18px; height:18px; flex:none; margin-inline-start:auto; color:var(--navy-soft);}
html[dir="rtl"] .sm-me > svg{transform:scaleX(-1);}
.sm-av{position:relative; width:44px; height:44px; flex:none; border-radius:50%; overflow:hidden; background:var(--white); display:grid; place-items:center; font:700 17px/1 'Sora','Inter',sans-serif; color:var(--blue-dark);}
.sm-av img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.sm-who{display:flex; flex-direction:column; min-width:0; gap:3px;}
.sm-who b{font:700 15px/1.25 'Inter',sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sm-who i{font:normal 500 13px/1.2 'Inter',sans-serif; color:var(--navy-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sm-guest{flex-direction:column; align-items:stretch; text-align:center; gap:12px; padding:16px 14px;}
.sm-guest .sm-who b{white-space:normal; font-size:14.5px; line-height:1.4;}
.sm-guest .btn{justify-content:center;}

.sm-group{padding:6px 0; border-bottom:1px solid var(--border-soft);}
.sm-group:last-of-type{border-bottom:0;}
.sm-h{margin:6px 12px 6px; font:700 11px/1.2 'JetBrains Mono',monospace; letter-spacing:.7px; text-transform:uppercase; color:var(--navy-soft);}
html[lang="ar"] .sm-h,html[lang="ja"] .sm-h{font-family:inherit; letter-spacing:0; font-size:12.5px;}
.sm-list{list-style:none; margin:0; padding:0;}
.sm-item{display:flex; align-items:center; gap:12px; padding:7px 10px; border-radius:12px; color:var(--navy); text-decoration:none; font:600 14.5px/1.25 'Inter',sans-serif; transition:background .15s;}
html[lang="ar"] .sm-item,html[lang="ja"] .sm-item{font-family:inherit;}
a.sm-item:hover{background:var(--blue-tint);}
.sm-item.is-on{background:var(--blue-tint); color:var(--blue-dark);}
.sm-ic{display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:10px; background:color-mix(in srgb, var(--navy) 7%, transparent); color:var(--navy-soft); transition:background .15s,color .15s;}
.sm-ic svg{width:19px; height:19px;}
a.sm-item:hover .sm-ic,.sm-item.is-on .sm-ic{background:var(--blue); color:#fff;}
.sm-t{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sm-item.is-soon{opacity:.55; cursor:default;}
.sm-soon{font:700 9.5px/1 'JetBrains Mono',monospace; letter-spacing:.4px; text-transform:uppercase; padding:3px 6px; border-radius:999px; background:var(--blue-tint); color:var(--blue-dark); flex:none;}
.sm a:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}

.sm-foot{padding:10px 6px 6px; border-top:1px solid var(--border-soft); margin-top:4px;}
.sm-foot .sm-h{margin-inline:6px;}
.sm-social{display:flex; flex-wrap:nowrap; justify-content:space-between; gap:2px;}
.sm-social a{display:grid; place-items:center; flex:1 1 0; min-width:0; max-width:40px; height:38px; border-radius:12px; color:var(--navy-soft); text-decoration:none;}
.sm-social a:hover{background:var(--blue-tint); color:var(--blue-dark);}
.sm-social svg{width:20px; height:20px;}
.sm-legal{display:flex; flex-wrap:wrap; gap:4px 12px; margin:10px 6px 0; font-size:12.5px;}
.sm-legal a{color:var(--navy-soft); text-decoration:none;}
.sm-legal a:hover{color:var(--navy); text-decoration:underline;}
.sm-copy{margin:8px 6px 4px; font-size:11.5px; color:var(--navy-soft); opacity:.8;}

/* ---- the /menu page ---- */
.sm-page{background:var(--paper); padding:22px 0 70px; min-height:70vh;}
.sm-page-in{width:min(560px,100% - 32px); margin-inline:auto;}
.sm-page-in > h1{margin:0 0 14px; font:800 24px/1.3 'Sora','Inter',sans-serif; color:var(--navy);}
html[lang="ar"] .sm-page-in > h1,html[lang="ja"] .sm-page-in > h1{font-family:inherit;}

/* ---- the layout around a page ---- */
.sl-bg{background:var(--paper);}
.sl-menu,.sl-end{display:none;}
@media (min-width:1180px){
  .sl{--sl-col:288px; --sl-top:148px; display:grid; grid-template-columns:var(--sl-col) minmax(0,1fr); gap:28px; width:min(1560px,100% - 40px); margin-inline:auto; align-items:start;}
  .sl.has-end{grid-template-columns:var(--sl-col) minmax(0,1fr) var(--sl-col);}
  /* pinned: it stays in view while the page scrolls and never scrolls inside itself. It follows the header
   * (which slides away while reading down), the same way the community tabs do. */
  .sl-menu{display:block; position:sticky; top:var(--sl-top); align-self:start; padding:0 0 24px; transition:top .28s ease;}
  html.nav-hidden .sl-menu{--sl-top:68px;}
  html.nav-instant .sl-menu{transition:none;}
  .sl-end{display:block; min-height:1px;}
  .sl-main{min-width:0;}
  /* the menu is on the page now, so its tab in the header is not needed */
  .mn-top a.mn-item[href="/menu/"],.mn-top a.mn-item[href="/menu"]{display:none;}
}
/* short windows: drop the small print so the whole menu always fits without scrolling */
@media (min-width:1180px) and (max-height:820px){ .sm-copy{display:none;} }
@media (min-width:1180px) and (max-height:700px){ .sm-legal{display:none;} .sm-group{padding:3px 0;} .sm-item{padding:4px 10px;} }