/* ============================================================
   help.css — Help Center demo styles (Buyer demo)
   Reuses tokens.css + landing.css shell (topnav / footer / btn).
   Demo only — no router, no app.js.
   ============================================================ */

/* ---------- page shell ---------- */
.help{
  max-width:1100px;
  margin:0 auto;
  padding:var(--sp-8) var(--sp-6) var(--sp-12);
}

/* Top Nav (incl. .navlink.is-active) moved to _shared/topnav.css */

/* ---------- breadcrumb ---------- */
.crumb{
  font-size:var(--text-sm);
  color:var(--ink-500);
  margin-bottom:var(--sp-4);
}
.crumb a{color:var(--ink-500);text-decoration:none}
.crumb a:hover{color:var(--brand-600)}
.crumb__sep{margin:0 6px;color:var(--ink-300)}

/* ---------- article head ---------- */
.help__head{margin-bottom:var(--sp-6)}
.help__title{
  font-size:var(--text-2xl);
  line-height:1.25;
  margin:0 0 var(--sp-3);
  color:var(--ink-900);
  letter-spacing:-.01em;
}
.help__meta{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.tag{
  font-size:var(--text-xs);
  font-weight:600;
  padding:4px 10px;
  border-radius:var(--r-full);
}
.tag--qc{background:var(--brand-50);color:var(--brand-700)}
.tag--sample{background:var(--success-bg);color:var(--success-600)}
.help__updated{font-size:var(--text-xs);color:var(--ink-500);margin-left:auto}

/* ---------- intro ---------- */
.intro{
  background:var(--ink-0);
  border:1px solid var(--ink-100);
  border-left:4px solid var(--brand-600);
  border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5);
  color:var(--ink-700);
  margin-bottom:var(--sp-8);
  box-shadow:var(--shadow-1);
}

/* ---------- download bar (accent = the single conversion CTA) ---------- */
.dlbar{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  flex-wrap:wrap;
  background:linear-gradient(90deg,var(--brand-50) 0%,var(--ink-0) 100%);
  border:1px solid var(--brand-100);
  border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5);
  margin-bottom:var(--sp-4);
}
.dlbar__txt{flex:1;min-width:220px;font-size:var(--text-sm);color:var(--ink-600)}
.dlbar__txt b{display:block;color:var(--ink-900);font-size:var(--text-base);margin-bottom:2px}
.dlbar__hint{font-size:var(--text-xs);color:var(--ink-500)}
.btn-accent.btn--dl{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent-600);color:#fff;text-decoration:none;
  padding:11px 20px;border-radius:var(--r-md);font-weight:600;font-size:var(--text-base);
  box-shadow:var(--shadow-accent);white-space:nowrap;
}
.btn-accent.btn--dl:hover{background:var(--accent-700)}

/* ---------- quote line ---------- */
.quote{
  border-left:4px solid var(--success-600);
  background:var(--success-bg);
  border-radius:0 var(--r-md) var(--r-md) 0;
  padding:var(--sp-3) var(--sp-5);
  margin-bottom:var(--sp-8);
  color:#0F5132;
  font-style:italic;
}

/* ============================================================
   HELP CENTER HUB — three topic groups + article tiles
   ============================================================ */
.grp{margin-bottom:var(--sp-8);scroll-margin-top:var(--sp-8)}
.grp__head{margin-bottom:var(--sp-4)}
.grp__title{font-size:var(--text-lg);font-weight:700;color:var(--ink-900);margin:0 0 2px}
.grp__sub{margin:0;font-size:var(--text-sm);color:var(--ink-500)}

.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}

.tile{
  position:relative;
  display:flex;flex-direction:column;gap:var(--sp-2);
  background:var(--ink-0);
  border:1px solid var(--ink-100);
  border-radius:var(--r-lg);
  padding:var(--sp-5);
  text-decoration:none;
  box-shadow:var(--shadow-1);
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.tile:hover{border-color:var(--brand-300);box-shadow:var(--shadow-2);transform:translateY(-2px)}
/* the freed icon slot: live tiles signal clickability by colour instead of an arrow */
.tile--live .tile__t{color:var(--brand-700)}
.tile__t{display:block;font-size:var(--text-md);font-weight:700;color:var(--ink-900);line-height:1.35}
.tile__d{display:block;font-size:var(--text-sm);color:var(--ink-500);line-height:1.5}
/* placeholder badge: pinned to the tile bottom so the old icon row collapses cleanly */
.tile__badge{
  margin-top:auto;
  align-self:flex-start;
  font-size:11px;font-weight:600;
  padding:3px 9px;border-radius:var(--r-full);
  background:var(--ink-50);color:var(--ink-500);
  border:1px solid var(--ink-100);
  white-space:nowrap;
}

/* placeholder tile — not clickable, visually recedes */
.tile--soon{background:var(--ink-25);box-shadow:none;cursor:default}
.tile--soon:hover{border-color:var(--ink-100);box-shadow:none;transform:none}

.hub__more{
  font-size:var(--text-sm);color:var(--ink-400);
  border-top:1px dashed var(--ink-100);
  padding-top:var(--sp-4);
  margin:0 0 var(--sp-8);
}

/* ---------- checklist cards ---------- */
.card{
  background:var(--ink-0);
  border:1px solid var(--ink-100);
  border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-6);
  margin-bottom:var(--sp-4);
  box-shadow:var(--shadow-1);
}
.card__head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.card__num{
  width:26px;height:26px;flex:none;
  border-radius:var(--r-full);
  background:var(--brand-600);color:#fff;
  font-size:var(--text-xs);font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
}
.card__title{font-size:var(--text-md);font-weight:700;color:var(--ink-900);margin:0}

.checklist{list-style:none;margin:0;padding:0}
.checklist li{
  position:relative;
  padding:7px 0 7px 26px;
  border-bottom:1px dashed var(--ink-100);
  color:var(--ink-800);
}
.checklist li:last-child{border-bottom:none}
.checklist li::before{
  content:"✓";
  position:absolute;left:2px;top:7px;
  color:var(--success-600);font-weight:700;font-size:var(--text-sm);
}
.checklist b{color:var(--ink-900)}

/* ---------- final result ---------- */
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.result{border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);border:1px solid var(--ink-100)}
.result__title{font-size:var(--text-base);font-weight:700;margin:0 0 6px}
.result p{margin:0;color:var(--ink-700);font-size:var(--text-sm)}
.result--pass{background:var(--success-bg);border-color:#BBE7CC}
.result--pass .result__title{color:var(--success-600)}
.result--fail{background:var(--danger-bg);border-color:#F6C9C9}
.result--fail .result__title{color:var(--danger-600)}

.note{
  background:var(--warning-bg);
  border:1px solid #F3DDAF;
  border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-5);
  font-size:var(--text-sm);
  color:#7A4A06;
}
.note b{color:#5C3705}

/* ---------- related documents ---------- */
.related{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.related a{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4);
  border:1px solid var(--ink-100);
  border-radius:var(--r-md);
  text-decoration:none;
  background:var(--ink-25);
  transition:border-color .15s ease,background .15s ease;
}
.related a:hover{border-color:var(--brand-300);background:var(--brand-50)}
.related__t{font-weight:600;color:var(--ink-900);font-size:var(--text-base)}
.related__d{font-size:var(--text-xs);color:var(--ink-500);line-height:1.4}

/* ---------- when to use ---------- */
.when{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.when__item{
  border:1px dashed var(--ink-200);
  border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5);
  color:var(--ink-700);
}
.when__item b{display:block;color:var(--ink-900);margin-bottom:4px}

/* ---------- FAQ ---------- */
.faq__search{margin-bottom:var(--sp-2)}
.faq__search input{
  width:100%;
  padding:10px 14px;
  border:1px solid var(--ink-200);
  border-radius:var(--r-md);
  background:var(--ink-0);
  color:var(--ink-900);
  font:inherit;
  font-size:var(--text-base);
}
.faq__search input::placeholder{color:var(--ink-400)}
.faq__search input:focus{outline:none;border-color:var(--brand-400);box-shadow:0 0 0 3px var(--brand-50)}

.faq__item{border-bottom:1px solid var(--ink-100);padding:var(--sp-4) 0}
.faq__item:last-child{border-bottom:none;padding-bottom:0}
.faq__item[hidden]{display:none}
.faq__q{
  font-weight:700;color:var(--ink-900);margin:0 0 6px;
}
.faq__a{margin:0;padding-left:0;color:var(--ink-700)}
.faq__a a{color:var(--brand-600);font-weight:600;text-decoration:none}
.faq__a a:hover{text-decoration:underline}
.faq__empty{
  margin:var(--sp-4) 0 0;
  font-size:var(--text-sm);
  color:var(--ink-400);
}
.faq__empty[hidden]{display:none}

/* ---------- back link (article pages) ---------- */
.backlink{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:var(--sp-2);
  font-size:var(--text-sm);font-weight:600;
  color:var(--brand-600);text-decoration:none;
}
.backlink:hover{text-decoration:underline}

/* ---------- footer tweak (桌面 3 列 + minmax 防撑破;移动跟 landing.css 的 2 列) ---------- */
.footer__cols{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){
  .footer__cols{grid-template-columns:repeat(2,1fr);gap:20px}
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .help{padding:var(--sp-6) var(--sp-4) var(--sp-10)}
  .help__title{font-size:var(--text-xl)}
  .result-grid,.related,.when{grid-template-columns:1fr}
  .card{padding:var(--sp-4)}
  .help__updated{margin-left:0;width:100%}
}
@media (max-width:560px){
  .tiles{grid-template-columns:1fr}
}

/* .topnav .brand__logo moved to _shared/topnav.css */