/* The mobile menu (STOUR-261). Linked in the head of every page whose bar carries the menu button, so the bar is right
 * on the first paint. Below 1024px the button shows at the right end of the bar; at 1024px and up the button and the
 * panel are not rendered, and every bar is exactly as before. It reads only stoury-system.css roles, so it is dark
 * wherever those tokens are; a page with no dark mode (no data-menu-theme) keeps a light panel (the one block below).
 * Markup: app/templates/mobile-menu.html (added by app/services/menu_tag.py). Behaviour: stoury-menu.js. */

/* ── The button: three drawn lines, 44 by 44px, the bar's own colour ─────────────────── */
.smm-btn{display:none;}
@media (max-width:1023px){
  .smm-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin:0 0 0 auto;padding:0;border:0;border-radius:var(--st-radius-sm,8px);background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;}
}
.smm-btn svg,.smm-x svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.smm-btn:focus-visible{outline:2.5px solid currentColor;outline-offset:2px;}
.smm-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
/* The count: a gold pill on the button's top-right corner, the number in dark brown (12.0:1 in both themes), a 2px
   ring in the bar's colour (--smm-ring, set by the page's bar). None at 0; "99+" over 99. aria-hidden: the button's
   name carries the count. */
.smm-badge{position:absolute;top:2px;right:0;box-sizing:border-box;min-width:18px;height:18px;padding:0 5px;border-radius:var(--st-pill,999px);background:var(--st-gold,#f7d18a);color:var(--st-on-fill,#1c1a13);font:400 11px/18px var(--st-mono);letter-spacing:0;text-align:center;box-shadow:0 0 0 2px var(--smm-ring,var(--st-surface));pointer-events:none;}
.smm-badge[hidden]{display:none;}

/* ── The panel: full screen, the page's background ─────────────────────────────────── */
/* Over every bar and the Staying scrim (z 45), under the Feedback pill (STOUR-164). */
.smm{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--st-bg);color:var(--st-text);text-align:left;animation:smm-in .16s ease-out both;}
.smm[hidden]{display:none;}
@keyframes smm-in{from{opacity:0;transform:translateY(-8px);}}
@media (prefers-reduced-motion:reduce){ .smm{animation:none;} }
@media (min-width:1024px){ .smm-btn,.smm{display:none!important;} }
/* A page with no dark mode stays light whatever the system says (its own colours never follow it): the light roles,
   as stoury-system.css defines them, held on this panel only. */
.smm:not([data-themed]){--st-bg:#f4ead2;--st-surface:#fbf6ea;--st-raised:#efe4c8;--st-text:#1c1a13;--st-muted:#5c5940;--st-line:rgba(28,26,19,.16);--st-line-strong:#1c1a13;}
/* The page behind does not scroll while the menu is open; the panel scrolls itself. */
html.smm-open,html.smm-open body{overflow:hidden;}
html.smm-open body{overscroll-behavior:none;}

/* The top row matches the bar: its height, /home's wordmark (its O a window onto the hero's photographs, the same on
   every page: stoury-wordmark.css, or site.css on /home) where the bar's wordmark sits, the x in the menu button's spot
   (stoury-menu.js measures them on open). */
/* Round 3 (CJ): the header row is the hero band's look, as every bar is below 1024px: olive, the wordmark in butter,
   the x in cream, the same in both themes; so opening the menu changes only the menu button into the x. */
.smm-top{position:sticky;top:0;z-index:1;flex:none;height:var(--smm-bar-h,57px);box-sizing:border-box;background:var(--st-olive,#5c5940);border-bottom:1px solid rgba(0,0,0,.14);}
.smm-mark{position:absolute;top:0;bottom:0;left:var(--smm-mark-left,16px);display:flex;align-items:center;}
.smm-wm{display:inline-flex;align-items:baseline;padding:11px 0;color:var(--st-gold,#f7d18a);font:800 22px/1 var(--st-display);letter-spacing:.01em;text-decoration:none;}
.smm-wm .owin-stack,.smm-mark .owin-stack{animation:none;opacity:1;}   /* the photographs at once, no opening fade */
/* The bar's own wordmark, copied (stoury-menu.js), in the band's butter: the row reads exactly as the bar did. */
.smm-mark [data-menu-mark-copy]{visibility:visible!important;text-decoration:none;}
.smm-mark [data-menu-mark-copy],.smm-mark [data-menu-mark-copy] *{color:var(--st-gold,#f7d18a)!important;}
.smm-x{position:absolute;top:50%;transform:translateY(-50%);right:var(--smm-x-right,12px);display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--st-radius-sm,8px);background:none;color:var(--st-on-olive,#f4ead2);cursor:pointer;}

/* ── The rows (CJ, rounds 2 and 3: one dense list): every row the system's label role (SP Blunt 14/13), 36px tall
   on screen with a 44px tap (STOUR-52) from a box around it, left on the one column, a hairline between groups and no
   other gaps, no group headings ───────────────────────────────────────────────────────────────────────────────── */
.smm-body{flex:1 0 auto;display:flex;flex-direction:column;padding:0 16px calc(20px + var(--feedback-reserve-h, 0px) + env(safe-area-inset-bottom,0px));}
.smm-list{list-style:none;margin:0;padding:4px 0;}
.smm-group{margin:0;padding:4px 0;border:0;min-width:0;}
.smm-body>*+.smm-list,.smm-body>*+.smm-group,.smm-body>*+.smm-mail{border-top:1px solid var(--st-line);}
/* Jump to map on the home page folds the band, so it shows only while the band is open. */
body[data-band="folded"] .smm-jump-home{display:none;}
.smm-row{position:relative;display:flex;align-items:center;gap:10px;box-sizing:border-box;width:100%;min-height:36px;margin:0;padding:0;border:0;background:none;color:var(--st-text);font:400 var(--st-fs-label,14px)/1.2 var(--st-display);letter-spacing:.06em;text-transform:uppercase;text-align:left;text-decoration:none;cursor:pointer;}
.smm-row::after,.smm .scp-listmode .scp-live::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%);}
.smm-row[aria-current="page"]{text-decoration:underline;text-underline-offset:4px;}
.smm-heart{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;}
/* The count in the desktop pill's gold look, "0" shown too. */
.smm-n{margin-left:auto;min-width:28px;box-sizing:border-box;padding:2px 9px;border-radius:var(--st-pill,999px);background:var(--st-gold,#f7d18a);color:var(--st-on-fill,#1c1a13);font:400 13px/1.3 var(--st-mono);letter-spacing:0;text-align:center;}
/* inquiries@stoury.com on its own, centred, in the link colour and underlined: plainly a link (CJ, round 3). */
.smm-mail{margin:0;padding:4px 0;text-align:center;}
.smm-mail a{display:inline-flex;align-items:center;min-height:44px;color:var(--st-link);font:400 var(--st-fs-label,14px)/1.2 var(--st-display);letter-spacing:.06em;text-decoration:underline;text-underline-offset:4px;}
/* The credit line, alone and last: one link, breaking only after "Stoury LLC." */
.smm-note{margin:0;padding:12px 0 0;text-align:center;color:var(--st-muted);font:400 11px/1.6 var(--st-mono);letter-spacing:0;}
.smm-credit{margin:8px 0 0;color:var(--st-muted);font:400 11px/1.6 var(--st-mono);letter-spacing:0;}
.smm-credit a{display:inline-block;padding:13px 0;color:inherit;text-decoration:none;}
.smm-credit .cr{white-space:nowrap;}
.smm a:focus-visible,.smm button:focus-visible{outline:2.5px solid var(--st-text);outline-offset:2px;border-radius:4px;}
.smm-top a:focus-visible,.smm-top button:focus-visible{outline-color:var(--st-on-olive,#f4ead2);}

/* ── The city: the picker's list mode (stoury-city-picker.js), right under Jump to map ──────────────────────────── */
.smm-city:not(:has(.scp)){display:none;}
.smm .scp{--scp-ink:var(--st-text);--scp-ink-2:var(--st-muted);--scp-bg:var(--st-surface);--scp-line:var(--st-line);--scp-hover:var(--st-raised);--scp-badge:var(--st-raised);}
.smm .scp-listmode{font-family:var(--st-display);}
.smm .scp-listmode .scp-list{margin:0;padding:0;}
.smm .scp-listmode .scp-live{position:relative;justify-content:flex-start;gap:10px;min-height:36px;padding:0;border-radius:0;background:none;color:var(--st-text);font:400 var(--st-fs-label,14px)/1.2 var(--st-display);letter-spacing:.06em;text-transform:uppercase;}
.smm .scp-listmode .scp-live:hover,.smm .scp-listmode .scp-live[aria-current]{background:none;font-weight:400;}
.smm .scp-listmode .scp-pin{flex:none;width:18px;height:18px;}
.smm .scp-listmode .scp-list .scp-soon{min-height:44px;margin:0;padding:0 14px;border-radius:var(--st-pill,999px);color:var(--st-muted);font:400 13px/1.2 var(--st-display);}
/* The note sits right under the city, on the city name's left edge (after the pin), not a row of its own. */
.smm .scp-listmode .scp-more{display:block;min-height:0;margin:-4px 0 0;padding:0 0 6px 28px;color:var(--st-muted);font:400 13px/1.3 var(--st-display);letter-spacing:.04em;}

/* ── The theme, last before the credit (CJ, round 2): Light / Dark / System, native radios in a three-segment pill ── */
.smm-theme{display:flow-root;padding:10px 0 6px;}   /* air between the rule and the pill (CJ, round 3) */
.smm-legend{float:left;padding:0;color:var(--st-text);font:400 var(--st-fs-label,14px)/38px var(--st-display);letter-spacing:.06em;text-transform:uppercase;}
.smm-seg{float:right;display:inline-flex;gap:2px;padding:2px;border-radius:var(--st-pill,999px);background:var(--st-surface);}
.smm-seg-i{position:relative;display:inline-flex;}
.smm-seg-i input{position:absolute;left:0;right:0;top:-5px;bottom:-5px;width:100%;height:calc(100% + 10px);margin:0;opacity:0;cursor:pointer;}   /* a 44px tap */
.smm-seg-i span{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:var(--st-pill,999px);color:var(--st-text);font:400 13px/1 var(--st-display);letter-spacing:.04em;text-transform:uppercase;}
.smm-seg-i input:checked+span{background:var(--st-raised);box-shadow:inset 0 0 0 1.5px var(--st-line-strong);}
.smm-seg-i input:focus-visible+span{outline:2.5px solid var(--st-text);outline-offset:2px;}