/* ZaxSocial · css/public.css — public pages rendered on the server and hydrated by the `public` bundle
   (.zs-public-page: bar, hero, TOC chips, readable legal typography, footer links; sticky TOC column ≥1024),
   the legal index, the SSR install guide and the contact form; print styles. Tokens only.
   Owner: U4. Docs: arch/15-shell-pwa-landing-ui-b.md §8.2 (SSR DOM); 15-c §12.3, §13 (public.css blocks), §15 rule 11. */

.zs-public-page{position:relative;max-width:1120px;margin:0 auto;padding:0 max(16px,var(--zs-safe-right)) calc(32px + var(--zs-safe-bottom)) max(16px,var(--zs-safe-left));color:var(--zs-text)}
.zs-public-page--loading{padding-top:calc(var(--zs-safe-top) + 72px)}
.zs-public-page__skip:focus{position:fixed;left:12px;top:calc(var(--zs-safe-top) + 12px);z-index:var(--zs-z-toast);width:auto;height:auto;clip:auto;padding:10px 14px;border-radius:12px;background:var(--zs-elevated);box-shadow:var(--zs-shadow-lg)}
.zs-public-page__bar{position:sticky;top:0;z-index:var(--zs-z-sticky);display:flex;align-items:center;justify-content:space-between;gap:12px;height:calc(60px + var(--zs-safe-top));margin:0 calc(-1 * max(16px,var(--zs-safe-left)));padding:var(--zs-safe-top) max(16px,var(--zs-safe-right)) 0 max(16px,var(--zs-safe-left));background:var(--zs-glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:inset 0 -1px 0 var(--zs-hairline)}
#zs-app[data-layout="app"] .zs-public-page__bar{display:none}
.zs-public-page__brand{display:inline-flex;align-items:center;gap:9px;min-height:44px;color:inherit;text-decoration:none;font-size:18px}
.zs-public-page__brand .zs-mark{width:30px;height:30px;border-radius:9px}
.zs-public-page__hero{max-width:760px;padding:40px 0 8px}
.zs-public-page__title{margin:0;font-size:34px;line-height:40px;font-weight:800;letter-spacing:-.034em;outline:none;text-wrap:balance}
.zs-public-page__meta{margin:10px 0 0;font-size:14px;line-height:20px;color:var(--zs-text-tertiary)}
.zs-public-page__toc{display:flex;gap:8px;margin:18px calc(-1 * max(16px,var(--zs-safe-left))) 0;padding:0 max(16px,var(--zs-safe-left)) 4px;overflow-x:auto;scrollbar-width:none}
.zs-public-page__toc::-webkit-scrollbar{display:none}
.zs-public-page__toc .zs-chip{flex:none;text-decoration:none}
.zs-public-page__body{max-width:720px;padding-top:12px;font-size:16px;line-height:27px;color:var(--zs-text-secondary)}
.zs-public-page__body>:first-child{margin-top:12px}
.zs-public-page__body h2{margin:36px 0 10px;scroll-margin-top:calc(var(--zs-safe-top) + 80px);font-size:22px;line-height:28px;font-weight:750;letter-spacing:-.022em;color:var(--zs-text);outline:none}
.zs-public-page__body h3{margin:24px 0 8px;scroll-margin-top:calc(var(--zs-safe-top) + 80px);font-size:18px;line-height:24px;font-weight:700;color:var(--zs-text)}
.zs-public-page__body p{margin:0 0 14px}
.zs-public-page__body ul,.zs-public-page__body ol{margin:0 0 16px;padding-inline-start:22px}
.zs-public-page__body li{margin:6px 0}
.zs-public-page__body li::marker{color:var(--zs-accent-text)}
.zs-public-page__body strong,.zs-public-page__body b{color:var(--zs-text);font-weight:650}
.zs-public-page__body a{color:var(--zs-accent-text);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.zs-public-page__body a:hover{text-decoration-thickness:2px}
.zs-public-page__body code{padding:1px 6px;border-radius:6px;background:var(--zs-surface-2);font-family:var(--zs-font-mono);font-size:13.5px;color:var(--zs-text)}
.zs-public-page__body blockquote{margin:0 0 16px;padding:12px 16px;border-inline-start:3px solid var(--zs-accent);border-radius:0 12px 12px 0;background:var(--zs-accent-soft);color:var(--zs-text)}
.zs-public-page__body hr{margin:28px 0;border:0;border-top:1px solid var(--zs-hairline)}
.zs-public-page__body table{width:100%;margin:0 0 18px;border-collapse:collapse;font-size:14.5px;line-height:21px}
.zs-public-page__body th,.zs-public-page__body td{padding:10px 12px;border-bottom:1px solid var(--zs-hairline);text-align:start;vertical-align:top}
.zs-public-page__body th{color:var(--zs-text);font-weight:650;background:var(--zs-surface-2)}
.zs-public-page__body .zs-note{margin:0 0 16px;padding:12px 14px;border-radius:14px;background:var(--zs-info-soft);color:var(--zs-info-ink)}
.zs-public-page__foot{max-width:720px;margin-top:48px;padding-top:22px;border-top:1px solid var(--zs-hairline);font-size:13.5px;line-height:20px;color:var(--zs-text-tertiary)}
.zs-public-page__links{display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:12px}
.zs-public-page__links a{display:inline-flex;align-items:center;min-height:36px;color:var(--zs-text-secondary);text-decoration:none}
.zs-public-page__links a:hover{color:var(--zs-text)}
.zs-public-page__links a[aria-current="page"]{color:var(--zs-accent-text);font-weight:600}
.zs-public-page__foot p{margin:0}

/* legal index */
.zs-public-page__index{margin:6px 0 0;max-width:720px}
.zs-public-page__index .zs-item{text-decoration:none;color:inherit}
.zs-public-page__index .zs-item__trail{font-size:22px;line-height:1;color:var(--zs-text-tertiary)}

/* SSR install guide (no JS) */
.zs-public-install{margin:0 0 12px;padding:4px 16px;border-radius:18px;background:var(--zs-surface);box-shadow:0 0 0 1px var(--zs-hairline)}
.zs-public-install summary{display:flex;align-items:center;min-height:48px;color:var(--zs-text);font-weight:650;cursor:pointer}
.zs-public-install__steps{margin:0 0 12px;padding:0;list-style:none;counter-reset:zsstep}
.zs-public-install__step{display:flex;align-items:center;gap:14px;margin:8px 0;color:var(--zs-text-secondary)}
.zs-public-install__step img{flex:none;width:96px;height:76px;border-radius:12px;background:var(--zs-surface-2);object-fit:contain}

/* contact form */
.zs-public-contact{max-width:560px;margin:8px 0 24px}
.zs-public-contact__form{display:grid;gap:16px;padding:20px;border-radius:24px;background:var(--zs-surface);box-shadow:0 0 0 1px var(--zs-hairline),var(--zs-shadow-sm)}
.zs-public-contact__form .zs-input,.zs-public-contact__form .zs-textarea{font-size:16px}
.zs-public-contact__form .zs-chips{flex-wrap:wrap}
.zs-public-contact__hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.zs-public-contact__done{padding:12px 0}

@media (min-width:768px){
  .zs-public-page__title{font-size:44px;line-height:50px;letter-spacing:-.04em}
  .zs-public-page__hero{padding-top:56px}
  .zs-public-page__body{font-size:16.5px;line-height:28px}
}
@media (min-width:1024px){
  .zs-public-page{display:grid;grid-template-columns:minmax(0,1fr) 260px;column-gap:56px;align-items:start}
  .zs-public-page>*{grid-column:1}
  .zs-public-page__bar{grid-column:1 / -1}
  .zs-public-page__toc{grid-column:2;grid-row:2 / span 3;position:sticky;top:calc(var(--zs-safe-top) + 84px);flex-direction:column;align-items:stretch;gap:2px;margin:56px 0 0;padding:14px;border-radius:20px;background:var(--zs-surface);box-shadow:0 0 0 1px var(--zs-hairline);overflow:visible}
  .zs-public-page__toc .zs-chip{justify-content:flex-start;height:auto;min-height:36px;padding:6px 10px;border:0;border-radius:10px;background:none;white-space:normal;text-align:left;font-weight:550;color:var(--zs-text-secondary)}
  .zs-public-page__toc .zs-chip:hover{background:var(--zs-overlay-hover);color:var(--zs-text)}
}

@media print{
  .zs-public-page__bar,.zs-public-page__toc,.zs-public-contact,#zs-header,#zs-tabbar,#zs-sidebar,#zs-banners,.zs-splash{display:none}
  .zs-public-page{display:block;max-width:none;padding:0;color:var(--zs-lit-000000)}
  .zs-public-page__body{max-width:none;color:var(--zs-lit-000000);font-size:11pt;line-height:1.5}
  .zs-public-page__body a{color:var(--zs-lit-000000)}
  .zs-public-page__body h2{break-after:avoid}
}