/* ============================================================================
   Kredily Support — help-center layout on top of Liquid Glass tokens.
   Uses the theme's --glass / --ink / --accent / --r-* / --drop-* variables so
   it repaints with the time+weather scenes automatically.
   ========================================================================== */

/* ---- layout shell ---- */
.docs-wrap{max-width:1180px;margin:0 auto;padding:0 20px;display:grid;
  grid-template-columns:264px 1fr;gap:28px;align-items:start}
@media (max-width:880px){.docs-wrap{grid-template-columns:1fr}}

/* ---- sidebar ---- */
.docs-side{position:sticky;top:88px;align-self:start;max-height:calc(100vh - 110px);
  overflow:auto;padding:18px 16px;border-radius:var(--r-lg);
  background:var(--glass);border:1px solid var(--edge-soft);
  backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);
  box-shadow:var(--gloss),var(--drop-sm)}
@media (max-width:880px){.docs-side{position:static;max-height:none;margin-bottom:18px}}
.docs-side .grp{margin-bottom:16px}
.docs-side .grp-title{font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-subtle);margin:0 8px 8px}
.docs-side a{display:block;padding:7px 10px;border-radius:var(--r-xs);
  color:var(--ink-muted);font-size:14px;font-weight:500;line-height:1.35;transition:all .14s}
.docs-side a:hover{background:var(--accent-50);color:var(--ink)}
.docs-side a.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;box-shadow:0 6px 16px -6px rgba(var(--accent-rgb),.55)}

/* ---- article card ---- */
.docs-main{min-width:0}
.docs-article{padding:34px 38px;border-radius:var(--r-lg);
  background:var(--glass-strong);border:1px solid var(--edge-soft);
  backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);
  box-shadow:var(--gloss),var(--drop-md)}
@media (max-width:560px){.docs-article{padding:24px 20px}}
.docs-crumbs{font-size:12.5px;color:var(--ink-subtle);margin-bottom:14px}
.docs-crumbs a{color:var(--ink-muted)}.docs-crumbs a:hover{color:var(--accent)}
.docs-article h1{font-size:clamp(26px,4vw,38px);font-weight:800;margin-bottom:10px}
.docs-meta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  font-size:12.5px;color:var(--ink-subtle);margin-bottom:22px}
.docs-pill{padding:3px 10px;border-radius:999px;font-weight:600;font-size:11.5px;
  background:var(--accent-50);color:var(--accent);text-transform:capitalize}
.docs-stale{background:rgba(224,138,0,.14);color:var(--warning)}

/* ---- article body typography ---- */
.docs-body{font-size:15.5px;line-height:1.7;color:var(--ink)}
.docs-body h2{font-size:22px;font-weight:700;margin:30px 0 12px;letter-spacing:-.02em}
.docs-body h3{font-size:17px;font-weight:700;margin:22px 0 8px}
.docs-body p{margin:0 0 14px;color:var(--ink-muted)}
.docs-body ul,.docs-body ol{margin:0 0 16px;padding-left:22px;color:var(--ink-muted)}
.docs-body li{margin:6px 0}
.docs-body strong{color:var(--ink);font-weight:650}
.docs-body a{color:var(--accent);font-weight:550}.docs-body a:hover{text-decoration:underline}
.docs-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  padding:2px 6px;border-radius:6px;background:var(--accent-50);color:var(--brand-h)}
.docs-body pre{background:var(--glass-soft);border:1px solid var(--edge-soft);
  border-radius:var(--r-sm);padding:14px 16px;overflow:auto;margin:0 0 16px}
.docs-body pre code{background:none;padding:0;color:var(--ink)}
.docs-body blockquote{margin:0 0 16px;padding:10px 16px;border-left:3px solid var(--accent);
  background:var(--accent-50);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--ink-muted)}
.docs-body table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:14px}
.docs-body th,.docs-body td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--edge-soft)}
.docs-body th{font-weight:700;color:var(--ink)}
.callout{padding:12px 16px;border-radius:var(--r-sm);margin:0 0 16px;border:1px solid var(--edge-soft);background:var(--glass)}
.callout.warn{border-color:rgba(224,138,0,.3);background:rgba(224,138,0,.10)}
.callout.tip{border-color:rgba(22,163,74,.3);background:rgba(22,163,74,.10)}

/* ---- home: hero search + category grid ---- */
.docs-search{position:relative;max-width:620px;margin:26px auto 0}
.docs-search input{width:100%;padding:15px 18px 15px 46px;font-size:16px;font-family:inherit;
  color:var(--ink);border-radius:999px;border:1px solid var(--edge-soft);
  background:var(--glass-strong);backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);box-shadow:var(--gloss),var(--drop-sm);outline:none}
.docs-search input::placeholder{color:var(--ink-subtle)}
.docs-search input:focus{border-color:var(--accent)}
.docs-search .si{position:absolute;left:18px;top:50%;transform:translateY(-50%);
  color:var(--ink-subtle);font-size:17px}
.docs-results{margin:10px auto 0;max-width:620px;text-align:left}
.docs-results a{display:block;padding:12px 16px;border-radius:var(--r-sm);margin-bottom:8px;
  background:var(--glass);border:1px solid var(--edge-soft);box-shadow:var(--drop-sm);transition:transform .15s}
.docs-results a:hover{transform:translateY(-2px)}
.docs-results .rt{font-weight:650;color:var(--ink)}
.docs-results .rs{font-size:13px;color:var(--ink-subtle);margin-top:3px}
.docs-results .rm{font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:.04em}

.cat-card .ic{font-size:22px}
.cat-card .cnt{font-size:12.5px;color:var(--ink-subtle);margin-top:8px}
.cat-card ul{list-style:none;padding:0;margin:12px 0 0}
.cat-card li{margin:5px 0}
.cat-card li a{display:block;color:var(--ink-muted);font-size:14px;padding:3px 0}
.cat-card li a:hover{color:var(--accent)}

/* feedback footer on articles */
.docs-fb{margin-top:26px;padding-top:18px;border-top:1px solid var(--edge-soft);
  display:flex;gap:12px;align-items:center;font-size:14px;color:var(--ink-muted)}
.docs-fb .lg-btn{padding:8px 16px;font-size:13px}

/* support site: env chip to bottom-left so the chat launcher owns bottom-right */
.lg-env{left:18px;right:auto}
@media (max-width:560px){.lg-env{display:none}}

/* related-product back-link (SEO cross-link to the main site) */
.docs-product{margin:26px 0 0;padding:14px 18px;border:1px solid var(--edge-soft);border-radius:14px;background:var(--glass-soft);font-size:14px;color:var(--ink-muted)}
.docs-product a{color:var(--accent);font-weight:600;text-decoration:none}
.docs-product a:hover{text-decoration:underline}