@import url("/assets/tokens.css");
@import url("/assets/signal-ui.css");

/* The same five destinations across public pages; the assistant stays one tap away. */
.sr-mobile-nav{display:none}
@media(max-width:760px){
  body:has(.sr-mobile-nav){padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  .sr-mobile-nav{position:fixed;inset:auto 0 0;z-index:45;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:4px 8px env(safe-area-inset-bottom,0px);min-height:calc(62px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--sr-line);background:var(--sr-paper);box-sizing:border-box}
  .sr-mobile-nav[hidden]{display:none}
  .sr-mobile-nav{transition:transform 180ms ease}
  .sr-mobile-nav--scrolled{transform:translateY(calc(100% + 1px));pointer-events:none}
  .sr-mobile-nav>a,.sr-mobile-nav>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:56px;padding:3px 0;border:0;border-radius:12px;background:transparent;color:var(--sr-text-2);font:600 11px/1.2 var(--sr-font-text);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .sr-mobile-nav>a:hover,.sr-mobile-nav>button:hover,.sr-mobile-nav>[aria-current="page"]{background:var(--sr-tint);color:var(--sr-ink)}
  .sr-mobile-nav>:focus-visible{outline:3px solid var(--sr-ink);outline-offset:-3px}
  .sr-mobile-nav [data-mobile-assistant]{color:var(--sr-ink);gap:0}
  .sr-mobile-nav .srt{width:40px;height:40px}
  body.assistant-chat-page:has(.sr-mobile-nav){padding-bottom:0}
  body.assistant-chat-page:has(.sr-mobile-nav:not([hidden]):not(.sr-mobile-nav--scrolled)){padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
}
@media(prefers-reduced-motion:reduce){.sr-mobile-nav{transition:none}}
@media print{.sr-mobile-nav{display:none!important}}

/* A small editorial library; existing radar and search keep their hierarchy. */
.editorial-picture,.editorial-picture img{display:block;max-width:100%}
.editorial-picture img{width:100%;height:auto}
.guide-card-art{width:220px;max-width:70%;margin:0 0 20px;mix-blend-mode:multiply}
.guide-card-art img{height:130px;object-fit:contain;object-position:left center}
.home-guide-art{float:right;width:250px;margin:6px 0 12px 24px;mix-blend-mode:multiply}
.home-guide-art img{height:164px;object-fit:contain}
.editorial-figure{margin:28px 0 44px;break-inside:avoid}
.editorial-figure picture{border:1px solid var(--line,#c7cec3);border-radius:3px;overflow:hidden}
.editorial-figure figcaption{font-size:14px;line-height:1.55;color:var(--muted,#4c574f);margin-top:12px}
.editorial-figure figcaption a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:600px){
 .guide-card-art{width:150px;margin-bottom:12px}
 .guide-card-art img{height:96px}
 .home-guide-art{width:150px;margin:0 0 8px 12px}
 .home-guide-art img{height:96px}
 .editorial-figure{margin:24px 0 32px}
 .editorial-figure figcaption{font-size:13px}
}

/* Feature, thumbnail and margin scales share the same compact asset library. */
.guide-card-art{width:220px;max-width:100%;margin-bottom:4px}
.guide-card-art img{height:136px}
.library-intro-art{float:right;width:300px;max-width:36%;margin:0 0 24px 32px;mix-blend-mode:multiply}
.library-intro-art img{height:190px;object-fit:contain}
.page-intro{display:flow-root}.guide-margin-art{width:180px;max-width:100%;margin:0 0 20px;mix-blend-mode:multiply}
.guide-margin-art img{height:126px;object-fit:contain}
@media(min-width:760px){
 .guide-card--feature{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(150px,1fr);gap:16px 28px}
 .guide-card--feature>:not(picture){grid-column:1}.guide-card--feature .guide-card-art{grid-column:2;grid-row:1 / span 4;width:100%;align-self:center;margin:0}
 .guide-card--feature .guide-card-art img{height:220px}.guide-card--feature h3{font-size:clamp(23px,2.2vw,30px)}
}
@media(max-width:600px){.library-intro-art{float:none;width:220px;max-width:100%;margin:0 0 20px}.library-intro-art img{height:140px}.guide-card-art{width:180px}.guide-card-art img{height:112px}}