/* ===========================================================================
   revocle-help.css — Help Center components only.

   Theme-agnostic: every colour here comes from a custom property, so these
   components follow whichever theme is active. The light palette itself now
   lives in revocle-light.css and applies site-wide from the device setting.
   =========================================================================== */

/* --- Help Center specifics ----------------------------------------------- */
.help-search{
  display:flex;align-items:center;gap:12px;width:100%;max-width:620px;
  padding:16px 20px;border-radius:14px;background:var(--panel);
  border:1px solid var(--line);margin:26px 0 6px;
  
}
.help-search input{
  flex:1;border:0;background:transparent;outline:none;color:var(--cream);
  font:400 1rem var(--f-d);min-width:0;
}
.help-search input::placeholder{color:var(--faint)}
.help-search svg{flex:none;color:var(--faint)}

.hcats{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));margin-top:30px}
.hcat{
  display:flex;flex-direction:column;gap:8px;padding:26px 24px;border-radius:16px;
  text-decoration:none;background:var(--panel);border:1px solid var(--line);
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
.hcat:hover{border-color:oklch(72% .17 45 / .42)}
.hcat .hicon{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;margin-bottom:6px;
  background:oklch(72% .17 45 / .12);color:var(--accent);flex:none;
}
.hcat b{font:700 1.0625rem var(--f-d);color:var(--cream)}
.hcat span.hdesc{font:400 .90625rem/1.55 var(--f-d);color:var(--muted)}
.hcat span.hcount{
  font:600 .6875rem var(--f-d);letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin-top:auto;padding-top:8px;
}

.hlist{display:grid;gap:2px;margin-top:6px}
.hlist a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 18px;border-radius:11px;text-decoration:none;color:var(--cream);
  font:500 .96875rem var(--f-d);border:1px solid transparent;transition:.25s var(--ease);
}
.hlist a:hover{background:var(--panel);border-color:var(--line)}
.hlist a::after{content:"→";color:var(--accent);opacity:0;transition:.25s var(--ease)}
.hlist a:hover::after{opacity:1}

.hsec-title{
  font:700 .75rem var(--f-d);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:36px 0 12px;
}
.hcontact{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  margin-top:40px;padding:28px 30px;border-radius:18px;
  background:linear-gradient(135deg,oklch(72% .17 45 / .09),oklch(72% .17 45 / .03));
  border:1px solid oklch(72% .17 45 / .26);
}
.hcontact b{display:block;font:700 1.125rem var(--f-d);color:var(--cream);margin-bottom:4px}
.hcontact p{margin:0;color:var(--muted);font-size:.9375rem}

@media (max-width:600px){
  .hcontact{flex-direction:column;align-items:flex-start}
  .help-search{padding:14px 16px}
}

/* --- search: results render under the input, so typing shows something ---- */
.hsearch-wrap{position:relative;max-width:620px}
.help-search{margin-bottom:0}
.hres{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60;
  max-height:min(60vh,440px);overflow-y:auto;padding:6px;border-radius:14px;
  background:var(--bg2);border:1px solid var(--line);
  box-shadow:0 24px 60px oklch(0 0 0 / .35);
}
.hres[hidden]{display:none}
.hres-item{
  display:grid;gap:3px;padding:12px 14px;border-radius:10px;text-decoration:none;
  border:1px solid transparent;
}
.hres-item:hover,.hres-item.is-active{background:var(--panel);border-color:var(--line)}
.hres-cat{font:700 .625rem var(--f-d);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.hres-t{font:600 .96875rem var(--f-d);color:var(--cream)}
.hres-d{font:400 .84375rem/1.5 var(--f-d);color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hres-empty{padding:16px 14px;font:400 .9375rem var(--f-d);color:var(--muted)}
.hres-empty a{color:var(--accent)}

/* --- category pages ------------------------------------------------------- */
.harts{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:30px}
.hart{
  display:flex;flex-direction:column;gap:7px;padding:24px 22px;border-radius:16px;
  text-decoration:none;background:var(--panel);border:1px solid var(--line);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.hart:hover{border-color:oklch(72% .17 45 / .42)}
.hart b{font:700 1.03125rem/1.4 var(--f-d);color:var(--cream)}
.hart-d{font:400 .90625rem/1.55 var(--f-d);color:var(--muted)}
.hart-m{font:600 .6875rem var(--f-d);letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin-top:auto;padding-top:8px}
.hchips{display:flex;flex-wrap:wrap;gap:10px}
.hchip{
  display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;
  text-decoration:none;font:600 .84375rem var(--f-d);color:var(--muted);
  background:var(--panel);border:1px solid var(--line);transition:.25s var(--ease);
}
.hchip:hover{color:var(--cream);border-color:oklch(72% .17 45 / .45)}