/* Help Center page.
   Everything here is driven by theme variables and color-mix, so the same rules
   carry the light themes without a second set of overrides. */
.helpCenterPage{ max-width:920px; margin:0 auto; }

/* ---------------------------------------------------------------- header */
/* Title on the left; Back sits top-right with the search below it, so the two
   controls stack in the corner instead of bracketing the title. */
.helpHeader{
  position:relative;
  display:grid; grid-template-columns:1fr auto; align-items:start; gap:16px 20px;
  margin-bottom:26px; padding:4px 0 22px;
  border-bottom:1px solid var(--line);
}
/* A soft accent wash behind the title.
   The gradient must reach full transparency INSIDE the box on every side. The
   previous version sized it 120% x 100% from a centre at the very top edge, so
   it was still at full strength where the box ended -- drawing a hard rectangle
   edge 18px above the header that read as a stray band across the page.
   Centred vertically with a 70% falloff, every edge fades out on its own. */
.helpHeader::before{
  content:""; position:absolute; inset:-30px -40px auto -40px; height:190px; z-index:0;
  background:radial-gradient(58% 68% at 18% 48%,
    color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
  pointer-events:none;
}
.helpHeaderText, .helpHeaderSide{ position:relative; z-index:1; }
.helpHeaderText{ min-width:0; }
.helpHeaderSide{ display:flex; flex-direction:column; align-items:flex-end; gap:14px; }
.helpBack{ align-self:flex-end; white-space:nowrap; }

.helpEyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--accent2, var(--accent)); font-size:.62rem; font-weight:900; letter-spacing:.14em;
}
.helpEyebrow::before{
  content:""; width:22px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--accent), transparent);
}
.helpHeader h2{ margin:6px 0 4px; font-size:1.7rem; letter-spacing:-.015em; }
.helpHeader p{ margin:0; color:var(--muted); font-size:.86rem; max-width:46ch; line-height:1.55; }

/* Search: magnifier drawn in CSS so there is no extra markup or asset. */
.helpSearch{ position:relative; display:block; }
.helpSearch::before{
  content:""; position:absolute; left:13px; top:50%; width:11px; height:11px;
  margin-top:-7px; border:2px solid var(--muted); border-radius:50%;
  opacity:.8; pointer-events:none; transition:border-color .2s ease, opacity .2s ease;
}
.helpSearch::after{
  content:""; position:absolute; left:23px; top:50%; width:6px; height:2px;
  margin-top:3px; background:var(--muted); border-radius:2px; transform:rotate(45deg);
  opacity:.8; pointer-events:none; transition:background .2s ease, opacity .2s ease;
}
.helpSearch:focus-within::before{ border-color:var(--accent); opacity:1; }
.helpSearch:focus-within::after{ background:var(--accent); opacity:1; }
.helpSearch input{
  width:min(300px, 42vw); min-width:190px; padding:11px 13px 11px 34px;
  border:1px solid var(--edge-strong, var(--line)); border-radius:12px;
  background:var(--surface-input, var(--panel)); color:var(--text);
  font:500 .86rem var(--app-font, system-ui); outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.helpSearch input::placeholder{ color:var(--muted); }
.helpSearch input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ---------------------------------------------------------------- groups */
.helpGroups{ display:flex; flex-direction:column; gap:26px; }
.helpGroup[hidden]{ display:none; }
.helpGroup h3{
  display:flex; align-items:center; gap:10px;
  margin:0 0 12px; font-size:.72rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent2, var(--accent));
}
/* A short accent bar, then a hairline running to the edge — gives each group a
   clear start without another box inside a page already full of boxes. */
.helpGroup h3::before{
  content:""; width:3px; height:14px; border-radius:2px; flex:0 0 auto;
  background:linear-gradient(180deg, var(--accent), var(--accent2, var(--accent)));
}
.helpGroup h3::after{
  content:""; flex:1 1 auto; height:1px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent), transparent);
}

/* ------------------------------------------------------------ accordions */
.helpItem{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:13px; margin-bottom:10px;
  background:var(--surface-raised, var(--panel));
  transition:border-color .22s ease, transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
}
.helpItem[hidden]{ display:none; }
/* The accent edge grows from the middle out as the row is opened, so the marker
   reads as belonging to the row rather than being pinned beside it. */
.helpItem::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--accent), var(--accent2, var(--accent)));
  transform:scaleY(0); transform-origin:center;
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.helpItem:hover{
  border-color:color-mix(in srgb, var(--accent) 42%, var(--line));
  transform:translateY(-1px);
  box-shadow:0 1px 2px rgba(8,12,20,.10), 0 10px 22px -14px rgba(8,12,20,.5);
}
.helpItem[open]{
  border-color:color-mix(in srgb, var(--accent) 52%, var(--line));
  background:color-mix(in srgb, var(--accent) 4%, var(--surface-raised, var(--panel)));
}
.helpItem[open]::before{ transform:scaleY(1); }

.helpItem summary{
  list-style:none; cursor:pointer; position:relative;
  padding:14px 52px 14px 17px;
  font-weight:650; font-size:.92rem; line-height:1.45;
  transition:color .2s ease;
}
.helpItem summary::-webkit-details-marker{ display:none; }
.helpItem[open] summary{ color:var(--text); }
.helpItem summary:hover{ color:var(--accent2, var(--accent)); }
/* Chevron inside a chip, so the affordance is visible before you hover. */
.helpItem summary::after{
  content:""; position:absolute; right:15px; top:50%; width:24px; height:24px;
  margin-top:-12px; border-radius:8px;
  border:1px solid var(--line); background:var(--surface-input, transparent);
  transition:background .22s ease, border-color .22s ease, transform .28s cubic-bezier(.2,.8,.2,1);
}
.helpItem summary::before{
  content:""; position:absolute; right:23px; top:50%; z-index:1; width:7px; height:7px;
  margin-top:-5px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg);
  transition:transform .28s cubic-bezier(.2,.8,.2,1), border-color .22s ease;
}
.helpItem[open] summary::after{
  border-color:color-mix(in srgb, var(--accent) 55%, var(--line));
  background:color-mix(in srgb, var(--accent) 14%, transparent);
}
.helpItem[open] summary::before{
  transform:rotate(-135deg); margin-top:-2px;
  border-color:var(--accent);
}
.helpItem summary:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; border-radius:12px; }

/* <details> removes the content from layout when closed, so a height transition
   is not available without rebuilding it in JS. Animating the reveal on open
   gives the same sense of unfolding; closing is immediate, which is what you
   want anyway once you have finished reading. */
.helpAnswer{ padding:2px 17px 16px; color:var(--muted); font-size:.86rem; line-height:1.68; }
.helpItem[open] .helpAnswer{ animation:helpReveal .3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes helpReveal{
  from{ opacity:0; transform:translateY(-5px); }
  to{ opacity:1; transform:none; }
}
.helpAnswer b{ color:var(--text); font-weight:700; }
.helpAnswer p{ margin:0 0 9px; }
.helpAnswer p:last-child{ margin-bottom:0; }

/* Gentle staggered entrance. Capped at six so a long group does not end with
   rows still fading in after the reader has already scrolled past them. */
.helpGroup .helpItem{ animation:helpItemIn .34s cubic-bezier(.2,.8,.2,1) both; }
.helpGroup .helpItem:nth-child(2){ animation-delay:.03s }
.helpGroup .helpItem:nth-child(3){ animation-delay:.06s }
.helpGroup .helpItem:nth-child(4){ animation-delay:.09s }
.helpGroup .helpItem:nth-child(5){ animation-delay:.12s }
.helpGroup .helpItem:nth-child(n+6){ animation-delay:.15s }
@keyframes helpItemIn{
  from{ opacity:0; transform:translateY(7px); }
  to{ opacity:1; transform:none; }
}

/* ------------------------------------------------------------- furniture */
.helpEmpty{ margin:18px 0 0; color:var(--muted); text-align:center; }
.helpFoot{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:28px; padding:17px 19px; border-radius:14px;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent),
    var(--surface-sub, var(--panel2, var(--panel)));
}
.helpFoot p{ margin:0; color:var(--muted); font-size:.85rem; }
.helpFootActions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
@media(max-width:560px){ .helpFootActions{ width:100%; } .helpFootActions .btn{ flex:1 1 auto; } }

/* Settings entry point */
.helpEntryCard{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:18px; padding:17px 19px; border-radius:14px;
  border:1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 11%, transparent), transparent 62%),
    var(--surface-raised, var(--panel));
  transition:border-color .22s ease, transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
}
.helpEntryCard:hover{
  border-color:color-mix(in srgb, var(--accent) 48%, var(--line));
  transform:translateY(-1px);
  box-shadow:0 10px 24px -16px rgba(8,12,20,.6);
}
.helpEntryCard strong{ display:block; font-size:.95rem; }
.helpEntryCard small{ display:block; margin-top:3px; color:var(--muted); font-size:.78rem; }

@media(max-width:680px){
  /* Narrow: Back goes above the title, search spans the full width beneath. */
  .helpHeader{ grid-template-columns:1fr; }
  .helpHeaderText{ order:2; }
  .helpHeaderSide{ order:1; align-items:stretch; gap:12px; }
  .helpBack{ align-self:flex-start; }
  .helpSearch input{ width:100%; max-width:none; }
  .helpHeader h2{ font-size:1.45rem; }
}

/* Motion is decoration here; the page must read identically without it. */
@media(prefers-reduced-motion:reduce){
  .helpItem, .helpItem::before, .helpItem summary,
  .helpItem summary::after, .helpItem summary::before,
  .helpEntryCard, .helpSearch input{ transition:none; }
  .helpGroup .helpItem, .helpItem[open] .helpAnswer{ animation:none; }
  .helpItem:hover, .helpEntryCard:hover{ transform:none; }
}