/* Help center — layout math mirrors Intercom's help center (960px rail,
   3×304px collection grid, 640px article column); colors, type and shell
   come from design-system/site.css. See docs/DESIGN_SYSTEM.md → Help center. */

:root { --help-rail: 770px; --help-line: #dcdee5; }

/* ---- help header: own markup and styles, not shared with the landing nav ---- */
.help-header{position:sticky;top:0;z-index:70;background:#fff}
/* same rail as the content below */
.help-header-in{display:flex;align-items:center;width:min(calc(100% - (var(--grid-gutter) * 2)),var(--help-rail));height:64px;margin:0 auto}
.help-logo{display:flex;align-items:center;gap:5px;flex:none;color:#000;font-size:19px;font-weight:550;line-height:23px;letter-spacing:-.6px}
.help-logo svg{display:block;flex:none}
.help-header-link{margin-left:auto;color:var(--ink);font-size:var(--type-small-size);font-weight:500;line-height:var(--type-small-line);white-space:nowrap}
.help-header-link:hover{text-decoration:underline;text-underline-offset:3px}
.help-logo-sub{font-size:15px;font-weight:400;letter-spacing:-.2px}

/* ---- page: grey header band, flat white content area ---- */
body{background:#fff}
.help-page{display:flex;flex-direction:column;min-height:calc(100vh - 64px)}
.help-panel{flex:1;min-width:0;background:#fff}

/* ---- rail ---- */
.help-rail{width:min(calc(100% - (var(--grid-gutter) * 2)),var(--help-rail));margin-inline:auto}
.help-main{padding:24px 0 96px}

/* ---- hero: white, below the grey nav band ---- */
.help-hero{padding:32px 0 0}
/* home hero: painted landscape in a rounded frame (like the landing search stage);
   the frame is 80px wider than the rail so the search box still lines up with the cards */
.help-hero.is-home{width:min(calc(100% - (var(--grid-gutter) * 2)),calc(var(--help-rail) + 160px));box-sizing:border-box;margin:0 auto 40px;padding:88px 0 80px;border-radius:32px;background:#86b3d6 url("/assets/help-hero-bg.jpg?v=3") center 22%/cover no-repeat}
.help-welcome{margin:0 0 48px;font-size:clamp(36px,4.4vw,48px);font-weight:600;line-height:1.1;letter-spacing:var(--tracking-heading);text-align:center;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.18)}
.help-search{display:flex;align-items:center;gap:10px;height:52px;box-sizing:border-box;padding:0 16px;border:1px solid var(--help-line);border-radius:12px;background:#fff;box-shadow:0 2px 6px -2px rgba(18,18,18,.08);transition:border-color .2s,box-shadow .2s}
.help-search:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(18,18,18,.06)}
.help-search>i{flex:none;font-size:20px;color:var(--gray)}
.help-search input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;background:none;color:var(--ink);font:inherit;font-size:var(--type-body-size)}
.help-search input::placeholder{color:var(--gray-2)}
.help-search input::-webkit-search-cancel-button{display:none}

/* ---- home: collection grid ---- */
.help-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.help-card{display:flex;flex-direction:column;border:1px solid var(--help-line);border-radius:16px;background:#fff;color:var(--ink);overflow:hidden;transition:border-color .2s}
.help-card:hover{border-color:var(--ink)}
/* hairline: same trick as the app's ICON_HAIRLINE_CLASS (0.4px stroke in the surface colour thins the glyph) */
.help-card-icon{display:flex;align-items:center;height:72px;box-sizing:border-box;padding:0 24px;font-size:24px;line-height:24px}
.help-card-text{display:grid;align-content:start;gap:6px;padding:24px 24px 28px}
.help-card-title{font-size:18px;font-weight:600;line-height:24px;letter-spacing:var(--tracking-tight)}
.help-card-desc{color:var(--gray);font-size:var(--type-small-size);line-height:var(--type-small-line)}
.help-card-meta,.help-byline,.help-row-sub,.help-muted,.help-crumbs{color:var(--gray);font-size:var(--type-meta-size);line-height:var(--type-meta-line)}
.dot{display:inline-block;width:3px;height:3px;margin:0 8px;border-radius:50%;background:currentColor;vertical-align:middle}

/* ---- breadcrumb ---- */
.help-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;padding-bottom:16px;color:var(--ink)}
.help-crumbs a:hover{color:var(--gray)}
.help-crumbs i{color:var(--gray-2);font-size:16px}
.help-crumbs [aria-current]{color:var(--gray)}

/* ---- collection ---- */
.help-head{margin:24px 0 40px}
.help-head-icon{display:block;margin-bottom:28px;font-size:40px;line-height:40px}
.help-head h1,.help-title h1{margin:0 0 4px;font-size:32px;font-weight:600;line-height:40px;letter-spacing:var(--tracking-tight)}
.help-desc{margin:0;color:var(--ink);line-height:24px}
.help-byline{display:flex;align-items:center;margin:20px 0 0}
.help-avatars{display:flex;margin-right:8px}
.help-avatars .help-avatar+.help-avatar{margin-left:-6px}
.help-avatar{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border:2px solid #fff;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;font-weight:600;object-fit:cover;box-sizing:content-box}
.help-sections{display:grid;gap:20px}
.help-box{padding:12px;border:1px solid var(--help-line);border-radius:8px;background:#fff}
.help-box ul{margin:0;padding:0;list-style:none}
.help-box-title{margin:0 0 12px;padding:12px;font-size:22px;font-weight:600;line-height:28px;letter-spacing:var(--tracking-tight)}
.help-box-title a:hover{color:var(--gray)}
.help-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;border-radius:6px;color:var(--ink);transition:background .25s}
.help-row>span{display:grid;gap:4px;min-width:0}
.help-row i{flex:none;font-size:16px}
.help-row:hover{background:var(--paper)}

/* ---- collection: title → intro content → plain article list ---- */
/* collection: section cards (Surfer help math) — title, hairline, chevron rows */
.help-secs{display:grid;gap:16px;margin-top:32px}
.help-sec{padding:8px 20px 12px;border:1px solid var(--help-line);border-radius:12px;background:#fff}
.help-sec ul{margin:0;padding:0;list-style:none}
.help-sec-title{margin:0 0 4px;padding:14px 0 16px;border-bottom:1px solid var(--help-line);font-size:18px;font-weight:600;line-height:24px;letter-spacing:var(--tracking-tight)}
.help-sec-title a:hover{text-decoration:underline;text-underline-offset:3px}
.help-sec-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;color:var(--ink);line-height:var(--type-body-line)}
.help-sec-row i{flex:none;font-size:18px;color:var(--gray-2);transition:transform .15s,color .15s}
.help-sec-row:hover span{text-decoration:underline;text-underline-offset:3px}
.help-sec-row:hover i{color:var(--ink);transform:translateX(2px)}

/* collection pages have no TOC, so content uses the full rail like the search box */
.help-col{margin-top:24px}
.help-col-intro{margin-top:24px}
.help-video{position:relative;max-width:774px;margin:40px auto;aspect-ratio:16/9}
.help-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- article ---- */
.help-article-layout{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:48px;margin-top:24px}
.help-article{min-width:0}
.help-author{display:flex;align-items:center;gap:12px;margin:24px 0 36px;font-size:var(--type-meta-size);line-height:var(--type-meta-line)}
.help-author .help-avatar{width:32px;height:32px;border:0;font-size:14px}
.help-author>span{display:grid}
.help-body{line-height:var(--type-body-line)}
.help-body p{margin:0 0 16px}
.help-body h2{margin:32px 0 16px;font-size:20px;font-weight:550;line-height:26px;scroll-margin-top:88px}
.help-body h3{margin:24px 0 12px;font-size:18px;font-weight:600;line-height:24px;scroll-margin-top:88px}
.help-body ul,.help-body ol{margin:16px 0;padding-left:16px}
.help-body li{margin-bottom:4px;padding-left:4px}
.help-body a{text-decoration:underline;text-underline-offset:2px}
.help-body img{display:block;max-width:100%;height:auto;margin:0 0 16px}
.help-body hr{height:3px;margin:16px 0;border:0;border-radius:3px;background:var(--line)}
.help-body code{padding:1px 5px;border-radius:4px;background:var(--paper);font-size:14px}
.help-body pre{overflow:auto;padding:16px;border-radius:8px;background:var(--paper)}
.help-body pre code{padding:0}
.help-body table{width:100%;margin:16px 0;border-collapse:collapse;font-size:var(--type-meta-size)}
.help-body th,.help-body td{padding:8px 12px;border:1px solid var(--line);text-align:left}
.help-body blockquote{margin:16px 0;padding-left:16px;border-left:3px solid var(--line)}
.callout{display:flex;gap:8px;margin:16px 0;padding:10px 14px;border-radius:8px;background:var(--paper);font-size:var(--type-meta-size);line-height:var(--type-meta-line)}
.callout>i{flex:none;font-size:16px;line-height:var(--type-meta-line);color:var(--gray)}
.callout>div>:last-child{margin-bottom:0}
.callout p{margin:0 0 8px}
.callout h3{margin-top:0}
.help-related{margin-top:32px}
.help-related h2{margin:0 0 12px;font-size:18px;font-weight:550;line-height:24px}
.help-reaction{margin:32px 0 0;padding:12px;border:0;border-radius:8px;background:var(--paper);color:var(--gray);text-align:center}
.help-reaction legend{float:left;width:100%;padding:9px 0 4px}
.help-reaction div{clear:both;display:flex;justify-content:center}
.help-reaction button{display:grid;place-items:center;width:50px;height:55px;padding:0;border:0;background:none;color:var(--gray);font-size:32px;cursor:pointer;transition:transform .15s,color .15s}
.help-reaction button:hover{color:var(--ink);transform:scale(1.15)}
.help-reaction [data-thanks]{clear:both;margin:8px 0}
.help-toc{position:sticky;top:96px;align-self:start;max-height:calc(100vh - 120px);overflow:auto}
.help-toc ul{margin:0;padding:0;list-style:none}
.help-toc a{display:block;padding:6px 16px;border-left:2px solid var(--line);color:var(--gray);font-size:var(--type-meta-size);line-height:21px}
.help-toc .d3 a{padding-left:28px}
.help-toc a:hover,.help-toc a.is-active{color:var(--ink)}
.help-toc a.is-active{border-color:var(--ink)}

/* ---- responsive ---- */
@media(max-width:1100px){
  .help-article-layout{grid-template-columns:minmax(0,1fr)}
  .help-toc{display:none}
}
@media(max-width:900px){
  .help-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .help-hero{padding:24px 0 0}
  .help-hero.is-home{margin-bottom:24px;padding:48px 0 40px;border-radius:24px}
  .help-welcome{margin-bottom:32px}
  .help-grid{grid-template-columns:1fr}
  .help-head{margin-bottom:32px}
  .help-main{padding-bottom:64px}
}
@media(prefers-reduced-motion:reduce){
  .help-card,.help-row,.help-reaction button,.help-search,.help-sec-row i{transition:none}
}